Add Phase 1 Pocket Pascal UI: home, pantry, week plan, and plate.

Replace the hello-world shell with the elevated design system, bilingual screens, recipe/extras data, and the interactive Mein Teller view.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/ui-pp/Accordion.tsx

@@ -0,0 +1,168 @@
+import { useId, useState, type ReactNode } from "react"
+import { ChevronRight } from "lucide-react"
+
+import { cx } from "@/lib/cx"
+
+export interface AccordionProps {
+  title: ReactNode
+  meta?: ReactNode
+  icon?: ReactNode
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * Top-level elevated accordion (type groups, pantry categories).
+ * Bevel/fill use rounded-[inherit] so radius tokens stay consistent.
+ */
+export function Accordion({
+  title,
+  meta,
+  icon,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  className,
+  children,
+}: AccordionProps) {
+  const reactId = useId()
+  const panelId = `acc-panel-${reactId}`
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : uncontrolledOpen
+
+  function toggle() {
+    const next = !open
+    if (!isControlled) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }
+
+  return (
+    <div
+      className={cx(
+        "overflow-hidden rounded-[var(--radius-card)] shadow-[var(--shadow-elevated)]",
+        className,
+      )}
+      style={{ backgroundImage: "var(--surface-gradient)" }}
+    >
+      <div className="relative">
+        <div
+          className="absolute inset-0 rounded-[inherit]"
+          style={{
+            background: "var(--glass-fill)",
+            backdropFilter: "blur(var(--glass-blur))",
+            WebkitBackdropFilter: "blur(var(--glass-blur))",
+          }}
+        />
+        <div className="glass-border pointer-events-none absolute inset-0 rounded-[inherit]" />
+
+        <button
+          type="button"
+          aria-expanded={open}
+          aria-controls={panelId}
+          onClick={toggle}
+          className={cx(
+            "relative z-10 flex min-h-[56px] w-full items-center gap-3 px-4 py-3 text-left",
+            "font-body no-select [-webkit-tap-highlight-color:transparent]",
+            "active:brightness-[0.98]",
+          )}
+        >
+          {icon ? (
+            <span className="shrink-0 text-xl leading-none">{icon}</span>
+          ) : null}
+          <span className="type-title-sm min-w-0 flex-1 text-[var(--ink)]">
+            {title}
+          </span>
+          {meta ? (
+            <span className="type-caption shrink-0 font-bold text-[var(--ink-faint)]">
+              {meta}
+            </span>
+          ) : null}
+          <ChevronRight
+            aria-hidden
+            className={cx(
+              "h-5 w-5 shrink-0 text-[var(--ink-faint)] transition-transform duration-150",
+              open && "rotate-90",
+            )}
+          />
+        </button>
+
+        {open ? (
+          <div
+            id={panelId}
+            className="relative z-10 border-t border-[var(--border)] px-3 py-3"
+          >
+            {children}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export interface NestedDisclosureProps {
+  title: ReactNode
+  defaultOpen?: boolean
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * Compact nested row for lists inside an Accordion.
+ * Radius --radius-nested with parent p-3 → outer card 24 = 12 + 12.
+ */
+export function NestedDisclosure({
+  title,
+  defaultOpen = false,
+  className,
+  children,
+}: NestedDisclosureProps) {
+  const reactId = useId()
+  const panelId = `nested-panel-${reactId}`
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div
+      className={cx(
+        "overflow-hidden rounded-[var(--radius-nested)]",
+        "ring-1 ring-[var(--border)]",
+        className,
+      )}
+      style={{ background: "var(--glass-fill)" }}
+    >
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((value) => !value)}
+        className={cx(
+          "flex min-h-[48px] w-full items-center gap-2 px-3 py-2 text-left",
+          "font-body no-select [-webkit-tap-highlight-color:transparent]",
+          "active:brightness-[0.98]",
+        )}
+      >
+        <span className="type-body-emphasis min-w-0 flex-1 text-[var(--ink)]">
+          {title}
+        </span>
+        <ChevronRight
+          aria-hidden
+          className={cx(
+            "h-4 w-4 shrink-0 text-[var(--ink-faint)] transition-transform duration-150",
+            open && "rotate-90",
+          )}
+        />
+      </button>
+      {open ? (
+        <div
+          id={panelId}
+          className="border-t border-[var(--border)] px-3 py-3"
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}