Redesign the groups page

src/app/groups/page.tsx

@@ -1,5 +1,7 @@
 import { RecentGroupList } from '@/app/groups/recent-group-list'
 import { Button } from '@/components/ui/button'
+import { getGroups } from '@/lib/api'
+import { Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
 
@@ -8,15 +10,25 @@ export const metadata: Metadata = {
 }
 
 export default async function GroupsPage() {
+  async function getGroupsAction(groupIds: string[]) {
+    'use server'
+    return getGroups(groupIds)
+  }
+
   return (
     <main>
-      <h1 className="font-bold text-2xl mb-4">
-        <Link href="/groups">Recently visited groups</Link>
-      </h1>
-      <Button asChild>
-        <Link href="/groups/create">New group</Link>
-      </Button>
-      <RecentGroupList />
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2">
+        <h1 className="font-bold text-2xl mb-4">
+          <Link href="/groups">Recently visited groups</Link>
+        </h1>
+        <Button asChild>
+          <Link href="/groups/create">
+            <Plus className="w-4 h-4 mr-2" />
+            Create group
+          </Link>
+        </Button>
+      </div>
+      <RecentGroupList getGroupsAction={getGroupsAction} />
     </main>
   )
 }

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

@@ -1,6 +1,8 @@
 'use client'
 import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
+import { getGroups } from '@/lib/api'
+import { Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { z } from 'zod'
@@ -13,31 +15,69 @@ const recentGroupsSchema = z.array(
 )
 type RecentGroups = z.infer<typeof recentGroupsSchema>
 
-type State = { status: 'pending' } | { status: 'success'; groups: RecentGroups }
+type State =
+  | { status: 'pending' }
+  | { status: 'partial'; groups: RecentGroups }
+  | {
+      status: 'complete'
+      groups: RecentGroups
+      groupsDetails: Awaited<ReturnType<typeof getGroups>>
+    }
 
-export function RecentGroupList() {
+type Props = {
+  getGroupsAction: (groupIds: string[]) => ReturnType<typeof getGroups>
+}
+
+export function RecentGroupList({ getGroupsAction }: Props) {
   const [state, setState] = useState<State>({ status: 'pending' })
 
   useEffect(() => {
     const groupsInStorage = getRecentGroups()
-    setState({ status: 'success', groups: groupsInStorage })
-  }, [])
+    setState({ status: 'partial', groups: groupsInStorage })
+    getGroupsAction(groupsInStorage.map((g) => g.id)).then((groupsDetails) => {
+      setState({ status: 'complete', groups: groupsInStorage, groupsDetails })
+    })
+  }, [getGroupsAction])
+
+  if (state.status === 'pending')
+    return (
+      <p>
+        <Loader2 className="w-4 m-4 mr-2 inline animate-spin" /> Loading recent
+        groups…
+      </p>
+    )
 
   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>
+    <ul className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
+      {state.groups.map((group) => {
+        const details =
+          state.status === 'complete'
+            ? state.groupsDetails.find((d) => d.id === group.id)
+            : null
+        return (
+          <li key={group.id}>
+            <Button variant="outline" className="h-fit w-full py-3" asChild>
+              <Link href={`/groups/${group.id}`} className="text-base">
+                <div className="w-full flex flex-col items-start gap-1">
+                  <div className="text-base">{group.name}</div>
+                  <div className="text-muted-foreground font-normal text-xs">
+                    {details ? (
+                      <>
+                        {details._count.participants} participants ·{' '}
+                        {details.currency}
+                      </>
+                    ) : (
+                      <>
+                        <Loader2 className="w-3 h-3 mr-1 inline animate-spin" />
+                      </>
+                    )}
+                  </div>
+                </div>
+              </Link>
             </Button>
           </li>
-        ))
-      )}
+        )
+      })}
     </ul>
   )
 }