Remove group (Fix #38)

src/app/groups/recent-group-list.tsx

@@ -1,16 +1,26 @@
 'use client'
 import { getGroupsAction } from '@/app/groups/actions'
 import {
+  deleteRecentGroup,
   getRecentGroups,
   getStarredGroups,
+  saveRecentGroup,
   starGroup,
   unstarGroup,
 } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { Skeleton } from '@/components/ui/skeleton'
+import { ToastAction } from '@/components/ui/toast'
+import { useToast } from '@/components/ui/use-toast'
 import { getGroups } from '@/lib/api'
 import { StarFilledIcon } from '@radix-ui/react-icons'
-import { Calendar, Loader2, Star, Users } from 'lucide-react'
+import { Calendar, Loader2, MoreHorizontal, Star, Users } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
@@ -56,6 +66,7 @@ export function RecentGroupList() {
   }, [])
 
   const router = useRouter()
+  const toast = useToast()
 
   if (state.status === 'pending') {
     return (
@@ -101,13 +112,18 @@ export function RecentGroupList() {
                   onClick={() => router.push(`/groups/${group.id}`)}
                 >
                   <div className="w-full flex flex-col gap-1">
-                    <div className="text-base flex justify-between">
-                      <Link href={`/groups/${group.id}`}>{group.name}</Link>
-                      <span>
+                    <div className="text-base flex gap-2 justify-between">
+                      <Link
+                        href={`/groups/${group.id}`}
+                        className="flex-1 overflow-hidden text-ellipsis"
+                      >
+                        {group.name}
+                      </Link>
+                      <span className="flex-shrink-0">
                         <Button
                           size="icon"
                           variant="ghost"
-                          className="-m-3"
+                          className="-my-3 -ml-3 -mr-1.5"
                           onClick={(event) => {
                             event.stopPropagation()
                             if (state.starredGroups.includes(group.id)) {
@@ -127,6 +143,53 @@ export function RecentGroupList() {
                             <Star className="w-4 h-4 text-muted-foreground" />
                           )}
                         </Button>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              className="-my-3 -mr-3 -ml-1.5"
+                            >
+                              <MoreHorizontal className="w-4 h-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem
+                              className="text-destructive"
+                              onClick={(event) => {
+                                event.stopPropagation()
+                                deleteRecentGroup(group)
+                                setState({
+                                  ...state,
+                                  groups: state.groups.filter(
+                                    (g) => g.id !== group.id,
+                                  ),
+                                })
+                                toast.toast({
+                                  title: 'Group has been removed',
+                                  description:
+                                    'The group was removed from your recent groups list.',
+                                  action: (
+                                    <ToastAction
+                                      altText="Undo group removal"
+                                      onClick={() => {
+                                        saveRecentGroup(group)
+                                        setState({
+                                          ...state,
+                                          groups: state.groups,
+                                        })
+                                      }}
+                                    >
+                                      Undo
+                                    </ToastAction>
+                                  ),
+                                })
+                              }}
+                            >
+                              Remove from recent groups
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </span>
                     </div>
                     <div className="text-muted-foreground font-normal text-xs">

src/app/groups/recent-groups-helpers.ts

@@ -32,6 +32,14 @@ export function saveRecentGroup(group: RecentGroup) {
   )
 }
 
+export function deleteRecentGroup(group: RecentGroup) {
+  const recentGroups = getRecentGroups()
+  localStorage.setItem(
+    STORAGE_KEY,
+    JSON.stringify(recentGroups.filter((rg) => rg.id !== group.id)),
+  )
+}
+
 export function getStarredGroups() {
   const starredGroupsJson = localStorage.getItem(STARRED_GROUPS_STORAGE_KEY)
   const starredGroupsRaw = starredGroupsJson