CWM Coffee

Project summary §

CWM Coffee is a real-time coffee order management web app for church volunteers on coffee duty. One tablet at the front desk takes orders; another in the kitchen shows what needs to be made. The two views stay in sync within seconds via Supabase realtime.

It’s a small, single-purpose app — no accounts, no admin dashboard, no build step. Plain HTML/CSS/JS talking to Postgres directly.

Stack §

• Plain HTML / CSS / JS, no framework, no build step
• Supabase (Postgres + realtime subscriptions) for sync
• Deployed on Cloudflare Pages / Netlify (auto-deploy on push to main)
• Installable as a PWA for iPad kiosk use

Core surfaces §

• Orders view — front-desk order entry with returning-customer suggestions, multi-quantity (×N) batches, sugar/honey sweeteners, milk options, optional notes
• Kitchen view — live FIFO queue, group-by-milk batching, dairy/alt-milk/non-coffee filters, three-tier search (substring → fuzzy → edit-distance), inline DONE confirm, completed/cancelled tail
• Settings — drink/milk availability toggles, milk rules per drink, scheduled ticker messages, dev/operator power-user tabs (gated behind a 7-tap gesture on the title)

---

Major achievements by date §

2026-04-18 — Initial scaffold §

Project bootstrapped. Passphrase gate, dark mode, basic order form with Coffee/Other subsections, kitchen view with MARK AS DONE flow, English Breakfast Tea handling, frequent-order suggestions when a name is recognised.

2026-04-19 — Card redesign and PWA shell §

Kitchen and Orders cards redesigned to v3 chip layout with tree-style note branches; settings gear modal replacing the kitchen sub-section; PWA manifest, Apple touch icon, iOS safe-area insets; segmented availability controls; suggestion banner; relative timestamps.

2026-04-20 — Design language audit §

Kitchen filter pill (ALL / DAIRY / ALT.MILK / NON-COFFEE) with live badges and smart hide-when-empty; swipe nav between Orders and Kitchen; design tokens for colours and three font variables; dark-mode contrast pass; SVG cup icon replacing the coffee emoji; modal-jump fix on iOS keyboard open.

2026-04-21 — Wide-screen layout and motion §

3-column wide-screen Orders layout with queue counter and menu reference; FLIP-animated kitchen card reorder on completion; fake Dynamic Island “order ready” notification; Nikola-style ripple click effects; dark-mode toggle in header; font-size controls; drink-prep instructions per menu item; PWA install prompt; kitchen clock with scheduled service messages.

2026-04-22 — Mahogany dark mode and prep notes §

Refreshed dark-mode palette to warm mahogany with comprehensive chip/card/footer recolouring; collapse header controls behind a hamburger menu; replace custom PWA banner with @khmyznikov/pwa-install; border-radius design tokens; coffee-drink prep recipes with precise ratios and weights; fold ambiguous name variants in suggestions.

2026-04-23 — Confirm gates and cancelled-card redesign §

Two-step DONE confirm on kitchen cards with rich confirm-state palette; cancelled cards collapsed by default and revealed on tap, re-homed in the queue; mobile submit FAB replacing modal footer; inline kitchen search in the toolbar; momentum scrolling.

2026-04-24 — Bottom-sheet overlays and resilience §

Settings and menu restyled as bottom-sheet overlays with dim backdrops; left slide-out navigation panel for header actions; BUMP renamed to SKIP Q with stacked-chevron glyph; connection-state surfaced with retryable load errors and friendly toasts; mobile-first reframe; “Back to top” hint for the kitchen tail; long Safari × order-modal status-bar tint fight (later resolved on the 25th).

2026-04-25 — Honey, multi-order, soft-launch prep §

Added honey as a sweetener alongside sugar (with column migration); ×N multi-order pill for placing duplicate orders in one batch; sweetener counters restyled as inset/accent pill with pip indicators; order_preferences table for durable suggestions across order purges; PWA safe-area tint final fix using html.order-modal-open::before; soft-launch cache-bust and DEV install-prompt buttons.

2026-04-26 — Ticker, QR ordering, CLAUDE.md §

Scheduled ticker messages in Settings with Supabase sync, per-slot Preview button, seamless infinite scroll with diamond separators, sticky-to-header behaviour on mobile; QR ordering toggle synced across devices via realtime; Settings → Dev buttons to seed/clear 20 test orders; first CLAUDE.md capturing dev-vs-production guidance for shared surfaces.

2026-04-27 — Orders editorial redesign §

Orders page editorial redesign (Variation E) with full-bleed mobile cards, completed sidebar layout, dog-ear position fold, pill-style back-to-top FAB, cancelled hatching, completed-rail filtering on search; mobile header with pinned logo and fading tabs on scroll; tab-bar auto-collapse and swipe-nav hints; audit fixes — event delegation, realtime cleanup, dead-code removal.

2026-04-28 — Security hardening pass §

Big security sweep before public soft-launch: Content-Security-Policy meta tag with no unsafe-inline, SRI on pinned CDN scripts, length caps on user inputs at form and DB level, anon DELETE locked down (cleanup routed through server-side RPCs), iframe sandboxed, ?di= URL overrides gated behind dev flag, gate passphrase migration started, HTML-injection lint as a CI check, operator snapshot/restore “Saturday-morning panic button”, 7-tap power-user gesture for cwm_dev / cwm_operator toggles on mobile. Plus: per-drink milk_mode and a MILK RULES tab; “Strong [Drink]” labelling; refined drink-chip glyphs.

2026-04-29 — Kitchen rework and haptics §

Kitchen view reworked with right-side rail, age-tier toggles and HC mode; haptic feedback on key order actions; ticker slots laid out as header + full-width message; back-to-top pill always visible past the queue; refinements to the kitchen completion wash (fade-in solid green, no ripple); various tail-pill / toolbar hide rules.

2026-04-30 — Polish and final security §

Mobile completed/cancelled tail rendered as compact rail cards with dark-mode styling; today’s-service breakdown surfaced when the queue is empty; gate passphrase now stored hashed instead of in source; stale Introduction link replaced with a proper Documentation page; kitchen first-visit banner strengthened and pinned under the sticky header.

2026-05-23 — Order-name auto-capitalisation §

Order-form name input now auto-title-cases each word as the user types — handles spaces, hyphens and apostrophes so double-barrelled and Irish surnames come out as Mary-Jane, O'Brien rather than Brian b; text-transform: capitalize on .v3-card .name as a CSS fallback so historical orders also render capitalised in the Orders view.

---

Pointers §

• Repo: ~/Code/cwm-coffee — see README.md, HANDOVER.md, CLAUDE.md
• Schema migrations: docs/supabase-migrations.md (apply via Supabase SQL Editor)
• Changelog: docs/changelog.md
• Cache busting: bump ?v=NN on style.css / app.js in index.html on every visible change

Last updated May 23, 2026.