First version

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

@@ -0,0 +1,43 @@
+'use client'
+import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { z } from 'zod'
+
+const recentGroupsSchema = z.array(
+  z.object({
+    id: z.string().min(1),
+    name: z.string(),
+  }),
+)
+type RecentGroups = z.infer<typeof recentGroupsSchema>
+
+type State = { status: 'pending' } | { status: 'success'; groups: RecentGroups }
+
+export function RecentGroupList() {
+  const [state, setState] = useState<State>({ status: 'pending' })
+
+  useEffect(() => {
+    const groupsInStorage = getRecentGroups()
+    setState({ status: 'success', groups: groupsInStorage })
+  }, [])
+
+  return (
+    <ul className="flex flex-col gap-2 mt-2">
+      {state.status === 'pending' ? (
+        <li>
+          <em>Loading recent groups…</em>
+        </li>
+      ) : (
+        state.groups.map(({ id, name }) => (
+          <li key={id}>
+            <Button asChild variant="outline">
+              <Link href={`/groups/${id}`}>{name}</Link>
+            </Button>
+          </li>
+        ))
+      )}
+    </ul>
+  )
+}