Home screen (1g) with empty states (Feature 21) (#174)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/home/HomePage.tsx

@@ -0,0 +1,147 @@
+import { Bell, ChevronRight, Compass, Search, ShoppingCart, Zap, type LucideIcon } from 'lucide-react'
+import { Link, useNavigate } from 'react-router'
+import { duration } from '../plan/PlanPage.tsx'
+import { supplyRunScreen } from '../shopping/api.ts'
+import buttonStyles from '../ui/Button.module.css'
+import { EmptyState } from '../ui/EmptyState.tsx'
+import { ErrorBanner } from '../ui/ErrorBanner.tsx'
+import { Icon } from '../ui/Icon.tsx'
+import { IconButton } from '../ui/IconButton.tsx'
+import { Photo } from '../ui/Photo.tsx'
+import { Skeleton } from '../ui/Skeleton.tsx'
+import { useHome, type Home, type Origin, type Tonight } from './api.ts'
+import styles from './HomePage.module.css'
+
+const ORIGIN_LABEL: Record<Origin, string> = { regular: 'Regular', side_quest: 'Side quest' }
+
+// meta is the Tonight card's "Regular · 40 min" line, the time only when
+// the recipe says it.
+function meta({ origin, minutes_total }: Tonight): string {
+  return minutes_total === null ? ORIGIN_LABEL[origin] : `${ORIGIN_LABEL[origin]} · ${duration(minutes_total)}`
+}
+
+// TonightCard is the dinner planned for today: its washed photo, name and
+// meta line, and the dark Recipe pill to its recipe.
+function TonightCard({ tonight }: { tonight: Tonight }) {
+  return (
+    <section aria-label="Tonight" className={styles.card}>
+      <Photo id={tonight.photo_id} name={tonight.name} inset="10px" sizes="400px" className={styles.photo} />
+      <div className={styles.cardFoot}>
+        <div className={styles.cardText}>
+          <h2 className={styles.name}>{tonight.name}</h2>
+          <span className={styles.meta}>{meta(tonight)}</span>
+        </div>
+        <Link to={`/dinner/${encodeURIComponent(tonight.id)}`} className={[buttonStyles.button, buttonStyles.dark, styles.recipe].join(' ')}>
+          Recipe
+        </Link>
+      </div>
+    </section>
+  )
+}
+
+// NoPlan stands in for the Tonight card when today has no plan.
+function NoPlan() {
+  const navigate = useNavigate()
+  return (
+    <div className={styles.card}>
+      <EmptyState title="No quest planned tonight" action={{ label: 'Plan this week', onClick: () => void navigate('/plan') }}>
+        Draft this week's dinners and tonight's quest shows up here.
+      </EmptyState>
+    </div>
+  )
+}
+
+// StatusRow is one neutral row under the tiles: a grape-700 icon, its line
+// and a chevron, linking to the screen it is about.
+function StatusRow({ to, icon, children }: { to: string; icon: LucideIcon; children: string }) {
+  return (
+    <li>
+      <Link to={to} className={styles.status}>
+        <Icon icon={icon} className={styles.statusIcon} />
+        <span className={styles.statusText}>{children}</span>
+        <Icon icon={ChevronRight} />
+      </Link>
+    </li>
+  )
+}
+
+// StatusRows are the rows that apply: Side quests waiting in the deck, and
+// a Supply run ready. With neither, there are no rows.
+function StatusRows({ home }: { home: Home }) {
+  const count = home.sideQuestCount
+  const list = home.shoppingList
+  if (count === 0 && !list.ready) return null
+  return (
+    <ul aria-label="Status" className={styles.statuses}>
+      {count > 0 && (
+        <StatusRow to="/discover" icon={Compass}>
+          {`${count} new side ${count === 1 ? 'quest' : 'quests'} to swipe`}
+        </StatusRow>
+      )}
+      {list.ready && (
+        <StatusRow to={supplyRunScreen(list.weekStart)} icon={ShoppingCart}>
+          {`Shopping list ready · ${list.dates}`}
+        </StatusRow>
+      )}
+    </ul>
+  )
+}
+
+// Tiles are the two shortcuts, Quick dinner and Cook from what I have.
+function Tiles() {
+  return (
+    <div className={styles.tiles}>
+      <Link to="/quick" className={[styles.tile, styles.quick].join(' ')}>
+        <Icon icon={Zap} size="nav" />
+        <span className={styles.tileLabel}>Quick dinner</span>
+      </Link>
+      <Link to="/cook-from-pantry" className={[styles.tile, styles.pantry].join(' ')}>
+        <Icon icon={Search} size="nav" />
+        <span className={styles.tileLabel}>Cook from what I have</span>
+      </Link>
+    </div>
+  )
+}
+
+// HomePage is mock 1g, Home: today's date over "Tonight's quest" and the
+// Recent updates bell, the Tonight card (or the way to plan the week), the
+// Quick dinner and Cook from what I have tiles, and the status rows, all
+// from GET /api/v1/home.
+//
+// The bell only shows whether there are unread updates; the Recent updates
+// sheet it opens is still to come.
+export function HomePage() {
+  const home = useHome()
+  const data = home.data
+  return (
+    <div className={styles.page} aria-busy={home.isPending}>
+      <header className={styles.header}>
+        <div>
+          {data !== undefined ? (
+            <p className={styles.date}>{data.dateLabel}</p>
+          ) : (
+            home.isPending && <Skeleton data-testid="skeleton-date" className={styles.skeletonDate} />
+          )}
+          <h1 className={styles.title}>Tonight's quest</h1>
+        </div>
+        <IconButton label={data?.unread ? 'Recent updates, unread' : 'Recent updates'} className={styles.bell}>
+          <Icon icon={Bell} className={styles.bellIcon} />
+          {data?.unread && <span data-testid="unread-dot" className={styles.dot} />}
+        </IconButton>
+      </header>
+      {home.isPending && <Skeleton data-testid="skeleton-tonight" className={styles.skeletonCard} />}
+      {home.isError && (
+        <ErrorBanner onRetry={() => void home.refetch()}>Couldn't load tonight's quest. {home.error.message}</ErrorBanner>
+      )}
+      {data !== undefined && (data.tonight === null ? <NoPlan /> : <TonightCard tonight={data.tonight} />)}
+      <Tiles />
+      {home.isPending && (
+        <div className={styles.statuses} aria-hidden="true">
+          <Skeleton data-testid="skeleton-status" className={styles.skeletonStatus} />
+          <Skeleton data-testid="skeleton-status" className={styles.skeletonStatus} />
+        </div>
+      )}
+      {data !== undefined && <StatusRows home={data} />}
+    </div>
+  )
+}