diff options
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/groups/recent-group-list.tsx | 73 | ||||
| -rw-r--r-- | src/app/groups/recent-groups-helpers.ts | 8 |
2 files changed, 76 insertions, 5 deletions
diff --git a/src/app/groups/recent-group-list.tsx b/src/app/groups/recent-group-list.tsx index 0491650..92a8067 100644 --- a/src/app/groups/recent-group-list.tsx +++ b/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"> diff --git a/src/app/groups/recent-groups-helpers.ts b/src/app/groups/recent-groups-helpers.ts index 5ccb5ae..72c5d28 100644 --- a/src/app/groups/recent-groups-helpers.ts +++ b/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 |