The .empty svg rule (styling the OrdersIcon/BasketIcon) was a plain
descendant selector, so it also matched — and, with higher specificity
than inherited color, overrode — the backdrop's own food-icon svgs
nested inside the same .empty box. Scope it to a direct child (> svg)
so it only targets the actual empty-state icon.
Also expands the backdrop palette from 3 to 6 colors (adds basil,
berry, and cocoa) for more variety across the icons.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Cycle a small warm palette (terracotta, golden-brown, golden-yellow)
across the icons via a CSS custom property instead of one flat tint.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Confine MenuBackdrop to whatever card renders it instead of the whole
viewport: it's now position: absolute inset:0 within its container
(previously position: fixed, spanning the page) with a gentle floating
animation per icon (staggered delay, respects prefers-reduced-motion).
Wired it into the empty basket and empty orders states instead of the
menu list page.
Also gives .empty on both pages position: relative + z-index: 0 so it
forms its own stacking context — without an explicit z-index, the
backdrop's z-index: -1 child was escaping to the document root and
painting either fully behind everything or (on the basket page, where
motion.div meant `.empty` never picked up a context on its own) above
the card's own text, depending on the surrounding markup.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
MenuBackdrop renders pizza, burger, and fries stroke icons at fixed,
hand-placed positions (no Math.random(), to avoid an SSR/client
hydration mismatch) as a fixed, pointer-events-none layer behind the
page content. Also tweaks the intro line to call out "your tasty menu".
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Lets customers pick options on a menu item detail page before adding to the
basket, and makes displayed prices respect a configurable currency/locale
via VITE_CURRENCY/VITE_LOCALE. Also crossfades the basket's empty/filled
states with AnimatePresence in wait mode instead of animating both at once.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Add an AnimatedNumber component that slides a quantity stepper's
count horizontally — left on increment, right on decrement — and
wire it into both the menu and basket steppers.
- Make the top nav bar position: sticky, with an explicit background
so scrolled content doesn't show through it.
- Reserve the scrollbar's gutter on every page (scrollable or not) so
the sticky header doesn't shift width when navigating between short
and tall pages.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Wire up Better Auth (email/password + Google/Apple SSO) with a
sign-in/sign-up UI, header account menu, and a basket that follows
the signed-in-or-guest state.
- Give the order status page a vertical timeline per preparation step
(with a distinct customer-facing name separate from the machine tag,
a done/in-progress/queued/pending look, and a sonar-ping highlight on
the active step), a formatted ETA (relative under 3h, absolute clock
time beyond that), and Buy again / Get help / Cancel actions.
- Expand Pizza's recipe into 6 steps across a shared prep station and
the existing oven/assembly stations, with matching schema, seed, and
domain changes plus updated/added test coverage.
- Add an Orders list (account orders via session, guest orders via a
locally remembered access-token list) with a shared getOrdersForCustomer
domain summary, and remember a guest's name/contact after their first
order so checkout doesn't ask again.
- Improve page transitions with the View Transitions API: a shared
element morph between an order card and its detail page, a stable
(non-jumping) header across navigations, and reduced-motion handling.
- Add a Ghost Kitchen wordmark (Space Grotesk, faded "Ghost", ghost
icon standing in for the "o") and shrink the basket icon to match
the rest of the header controls.
- Add a run-ghost-kitchen agent skill documenting local setup, the
dev-server driver, and the gotchas hit along the way.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Builds the main customer-facing flow: browse the Brand's menu, add
items to a cart, and check out either as a guest (name + contact) or,
if signed in, as the account customer — both call the existing
placeOrder server function, which already distinguishes the two. On
success, navigates to a new /orders/$orderId status page showing each
Order Item's Preparation Steps, queue position, ETA, and (per the
domain rules already established) a Cancel button while cancellable
and a pickup-confirmation button once ready.
Styled with SCSS Modules per CLAUDE.md; added the sass dependency and
the src/styles/ structure it describes (globals.scss imported once in
__root.tsx, alongside the existing Tailwind stylesheet the not-yet-
mounted header-user.tsx component depends on).
Verified end-to-end against a throwaway local Postgres: menu renders
with seeded items, cart quantities update, guest checkout places a
real order, and the status page reflects a real cancellation.
Also fixes CLAUDE.md's Commands section, which documented pnpm even
though this repo only has npm (package-lock.json, no pnpm installed).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
lukasandClaude Sonnet 5