From 4739ec0127bc030e9487df69aa267067c4555ba5 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 13 May 2026 07:01:49 +0200
Subject: [PATCH] feat(cms): KDS cooking-mode bumps item + modifier visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a card hits `accepted` the items section bumps base font to
1.25rem and modifier/note lines to 1.15rem + medium weight; the
muted grey on modifiers drops to inherited color. All via Vue
`:style` bindings — class-based CSS rules lose to lnbits' upstream
`!important` on Quasar typography utilities (even with our own
`!important`), so inline wins without an arms race.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/cms.md                   | 20 ++++++++++++++++++++
 static/js/kds.js              |  3 +++
 templates/restaurant/kds.html |  6 +++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/docs/cms.md b/docs/cms.md
index 59bef8c..a438095 100644
--- a/docs/cms.md
+++ b/docs/cms.md
@@ -70,6 +70,26 @@ Both use the same data source (`GET /restaurants/{id}/orders`)
 filtered by status. The KDS view escalates color by age (`>5min`
 orange, `>15min` red) and offers one-tap state transitions.
 
+When a card transitions to `accepted` (driven by `cookingMode(order)`
+in `kds.js`), three inline `:style` bindings kick in:
+
+- the items `q-card-section` switches base font between `1rem` and
+  `1.25rem`,
+- the modifier list (`.text-caption.text-grey-7`) bumps to `1.15rem`
+  + medium weight + `color: inherit` (drops the muted grey),
+- the per-line note (`.text-caption.text-amber-9`) bumps to `1.15rem`
+  + medium weight; color is left alone so it stays amber.
+
+All cooking-mode styling is inline because an upstream `!important`
+rule (likely an lnbits theme override on Quasar's typography
+utilities) defeats class-based CSS rules — even with `!important`
+on our side. Inline `:style` wins without needing the arms race.
+Card chrome and the age-based `bg-{color}-1` from `cardClass()`
+are untouched. The amber
+per-line note keeps its color because only `.text-grey-7` is
+overridden. No background rules; card chrome and the age-based
+`bg-{color}-1` from `cardClass()` are untouched.
+
 Today the monitor + KDS poll every 5–8 s. SSE / Nostr push is on
 the roadmap.
 
diff --git a/static/js/kds.js b/static/js/kds.js
index ab4f0cc..f7fd258 100644
--- a/static/js/kds.js
+++ b/static/js/kds.js
@@ -23,6 +23,9 @@ window.app = Vue.createApp({
     statusColor(status) {
       return {paid: 'positive', accepted: 'blue', ready: 'amber'}[status] || 'grey'
     },
+    cookingMode(order) {
+      return order && order.status === 'accepted'
+    },
     cardClass(order) {
       // Visually escalate as orders age. >5min = highlight; >15min = alarm.
       //
diff --git a/templates/restaurant/kds.html b/templates/restaurant/kds.html
index 0474f28..8ba3052 100644
--- a/templates/restaurant/kds.html
+++ b/templates/restaurant/kds.html
@@ -37,7 +37,9 @@
             </div>
           </q-card-section>
           <q-separator></q-separator>
-          <q-card-section style="font-size: 1rem">
+          <q-card-section
+            :style="{'font-size': cookingMode(order) ? '1.25rem' : '1rem'}"
+          >
             <div v-for="line in order._items || []" :key="line.id">
               <div>
                 <strong v-text="line.quantity + 'x'"></strong>
@@ -46,6 +48,7 @@
               <div
                 v-if="line.selected_modifiers && line.selected_modifiers.length"
                 class="text-caption text-grey-7 q-pl-md"
+                :style="cookingMode(order) ? 'font-size: 1.15rem; font-weight: 500; color: inherit' : ''"
               >
                 <span
                   v-for="(m, i) in line.selected_modifiers"
@@ -58,6 +61,7 @@
               <div
                 v-if="line.note"
                 class="text-caption text-amber-9 q-pl-md"
+                :style="cookingMode(order) ? 'font-size: 1.15rem; font-weight: 500' : ''"
               >
                 <q-icon name="info" size="xs"></q-icon>
                 <span v-text="line.note"></span>