shopping: ship as plugin, integrate phone view into relay UI, fix sync

Restructure the shopping-list feature end to end:

  - New public/plugins/shopping/ plugin with backend.php (proxy
    routes registered via PluginManager::onApiRoute), shopping.js
    (self-contained; injects the header Shopping button, owns the
    picker dialog + sync loop via hyprcrd.hooks), plugin.json and a
    placeholder css file. Core no longer knows about shopping —
    index.php loses the static button and the proxy block, app.js
    loses the initShopping wiring, the old js/modules/shopping.js
    is gone.
  - Phone view moves out of a standalone /shopping page and into
    the relay UI as a regular `view-shopping` behind a nav-burger
    entry (relay/ui/layout.php + app.js + style.css). Same session
    auth as compose/chat/account — no separate login. Auto-refresh
    every 4 s while the view is active; no manual refresh button.
    Headings "# h1 … ###### h6" render between items for grouping.
    Orphan section headings (no open items under them) are hidden.
  - Sync: drop timestamp cursors (broke across SQLite-UTC / PHP
    timezones and silently blocked pushes after a pull). Both sides
    diff the (uid, title, body) triple instead — timezone-agnostic
    and authoritative. Client ticks push-before-pull so fresh local
    edits land on the relay before a stale pull can overwrite them.
    Relay drops its "server newer" guard and stamps server times
    with gmdate so anything left comparing to SQLite is UTC.
  - Client also ticks on cards.reloaded, not just sync.tick, so
    any edit path (editor save, checkbox toggle, context menu,
    undo) pushes the update immediately.
  - Tests: updated for the plugin (still uses the same selectors
    because the plugin injects the same ids), plus a plugin-
    registration check and "(no active list)" option assertion.
  - Help section copy updated — references the Shopping header
    button and the shopping tab in the relay UI rather than the
    gone /shopping URL.

Both #einkauf and #shopping work as trigger tags; phone is
check-only, editing stays in hyprcrd. Version bumped to 1.9.21.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

relay/inc/routes/shopping.php

@@ -32,24 +32,15 @@ if ($route === '/api/shopping' && $method === 'POST') {
     $uid   = trim((string)($input['card_uid'] ?? ''));
     $title = (string)($input['title'] ?? '');
     $body  = (string)($input['body'] ?? '');
-    $clientTs = trim((string)($input['updated_at'] ?? '')) ?: date('Y-m-d H:i:s');
+    $clientTs = trim((string)($input['updated_at'] ?? '')) ?: gmdate('Y-m-d H:i:s');
     if ($uid === '') jsonResponse(['error' => 'card_uid required'], 400);
 
-    $existing = shoppingLoad($db, (int)$clientTenant['id']);
-    // Skip the write when the client is pushing an older version of
-    // the same card than what's already stored (phone toggled
-    // meanwhile). Still return 200 so the client doesn't retry in a
-    // loop — they just haven't pulled yet.
-    if ($existing && $existing['card_uid'] === $uid
-        && strcmp($existing['updated_at_server'], $clientTs) > 0) {
-        jsonResponse([
-            'ok' => true,
-            'stored' => false,
-            'reason' => 'server newer — pull first',
-            'updated_at_server' => $existing['updated_at_server'],
-        ]);
-    }
-    $now = date('Y-m-d H:i:s');
+    // No server-side staleness guard: the client decides whether to
+    // push by diffing its last-synced body against the current card,
+    // not by timestamp, so cross-timezone clock comparisons can't
+    // silently block edits. Last-writer per tick wins — phone-toggle
+    // races lose at most one tick of flips (rare by design).
+    $now = gmdate('Y-m-d H:i:s');
     $db->prepare('
         INSERT INTO shopping_state (tenant_id, card_uid, title, body, updated_at_client, updated_at_server)
         VALUES (:t, :u, :ti, :b, :c, :s)
@@ -113,155 +104,12 @@ if ($route === '/api/shopping/check' && $method === 'POST') {
     if (!$hit) jsonResponse(['error' => 'line not found (list may have been edited — reload)'], 409);
 
     $newBody = implode("\n", $lines);
-    $now = date('Y-m-d H:i:s');
+    $now = gmdate('Y-m-d H:i:s');
     $db->prepare('UPDATE shopping_state SET body = :b, updated_at_server = :s WHERE tenant_id = :t')
         ->execute(['b' => $newBody, 's' => $now, 't' => $sessionTenant['id']]);
     jsonResponse(['ok' => true, 'updated_at_server' => $now]);
 }
 
-// ── GET /shopping ────────────────────────────────────────────
-// Phone UI. Simple static shell; the JS fetches /api/shopping and
-// renders only unchecked items. Tapping one POSTs to /api/shopping/check.
-
-if ($route === '/shopping' && $method === 'GET') {
-    if (!$sessionTenant) {
-        // Bounce through the relay's session-auth flow.
-        header('Location: ' . dirname($_SERVER['SCRIPT_NAME']) . '/');
-        exit;
-    }
-    header('Content-Type: text/html; charset=utf-8');
-    $userLabel = htmlspecialchars($sessionTenant['username'], ENT_QUOTES);
-    ?>
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
-<meta name="theme-color" content="#0f172a">
-<title>Shopping list</title>
-<style>
-  :root { color-scheme: dark; }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; padding: 0; background: #0f172a; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; }
-  header { position: sticky; top: 0; background: #0f172a; padding: 14px 16px; border-bottom: 1px solid #334155; display: flex; align-items: center; gap: 10px; }
-  header h1 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
-  header .user { font-size: 12px; color: #64748b; }
-  header .refresh { background: none; border: 1px solid #334155; color: #94a3b8; padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
-  main { padding: 12px; }
-  .title { font-size: 13px; color: #94a3b8; margin: 0 0 12px; }
-  .empty { text-align: center; padding: 40px 16px; color: #64748b; }
-  ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
-  li { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 14px 16px; font-size: 16px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.12s, opacity 0.3s, background 0.12s; }
-  li:active { transform: scale(0.98); background: #273446; }
-  li.checked { opacity: 0.35; text-decoration: line-through; }
-  .stale { font-size: 11px; color: #64748b; text-align: center; margin-top: 16px; }
-  .err { background: #7f1d1d; color: #fecaca; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
-</style>
-</head>
-<body>
-<header>
-  <h1>Shopping list</h1>
-  <span class="user"><?= $userLabel ?></span>
-  <button class="refresh" id="refresh">↻</button>
-</header>
-<main>
-  <p class="title" id="title">…</p>
-  <div id="err" class="err" style="display:none"></div>
-  <ul id="items"></ul>
-  <p class="stale" id="stale"></p>
-</main>
-<script>
-(function(){
-  const base = location.pathname.replace(/\/shopping\/?$/, '');
-  const elTitle = document.getElementById('title');
-  const elItems = document.getElementById('items');
-  const elStale = document.getElementById('stale');
-  const elErr = document.getElementById('err');
-  const btnRefresh = document.getElementById('refresh');
-
-  let lastServerTs = null;
-  let busy = false;
-
-  function showErr(msg) {
-    if (!msg) { elErr.style.display = 'none'; elErr.textContent = ''; return; }
-    elErr.textContent = msg; elErr.style.display = 'block';
-  }
-
-  function parseItems(body) {
-    const lines = String(body || '').split(/\r\n|\n|\r/);
-    const items = [];
-    for (const l of lines) {
-      const m = /^\s*-\s*\[([ xX])\]\s*(.*)$/.exec(l);
-      if (!m) continue;
-      const checked = m[1].toLowerCase() === 'x';
-      if (!checked) items.push({ line: l, text: m[2] });
-    }
-    return items;
-  }
-
-  async function load() {
-    try {
-      const res = await fetch(base + '/api/shopping', { credentials: 'same-origin' });
-      const data = await res.json();
-      if (!data.ok || !data.state) {
-        elTitle.textContent = '';
-        elItems.innerHTML = '<div class="empty">no active shopping list</div>';
-        elStale.textContent = '';
-        return;
-      }
-      const { title, body, updated_at_server } = data.state;
-      lastServerTs = updated_at_server;
-      elTitle.textContent = title || '';
-      const items = parseItems(body);
-      if (!items.length) {
-        elItems.innerHTML = '<div class="empty">✓ all done</div>';
-      } else {
-        elItems.innerHTML = '';
-        for (const it of items) {
-          const li = document.createElement('li');
-          li.textContent = it.text;
-          li.dataset.line = it.line;
-          li.addEventListener('click', () => check(li));
-          elItems.appendChild(li);
-        }
-      }
-      const ago = Math.round((Date.now() - Date.parse(updated_at_server.replace(' ','T') + 'Z')) / 1000);
-      elStale.textContent = 'last synced: ' + (ago < 60 ? ago + 's ago' : Math.round(ago/60) + ' min ago');
-      showErr('');
-    } catch (e) {
-      showErr('load failed: ' + e.message);
-    }
-  }
-
-  async function check(li) {
-    if (busy) return;
-    busy = true;
-    li.classList.add('checked');
-    try {
-      const res = await fetch(base + '/api/shopping/check', {
-        method: 'POST',
-        credentials: 'same-origin',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ line: li.dataset.line, checked: true }),
-      });
-      const data = await res.json();
-      if (!data.ok) throw new Error(data.error || 'check failed');
-      setTimeout(() => { busy = false; load(); }, 300);
-    } catch (e) {
-      busy = false;
-      li.classList.remove('checked');
-      showErr(e.message);
-    }
-  }
-
-  btnRefresh.addEventListener('click', () => load());
-  document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
-  load();
-  setInterval(() => { if (!document.hidden && !busy) load(); }, 15000);
-})();
-</script>
-</body>
-</html>
-    <?php
-    exit;
-}
+// Shopping list lives inside the relay UI as a regular view (see
+// relay/ui/layout.php + app.js). No separate /shopping page — login
+// and navigation are the same as for every other relay feature.

relay/index.php

@@ -72,8 +72,4 @@ if (str_starts_with($route, '/api/')) {
 
 // ── UI ─────────────────────────────────────────────────────────────
 
-// Shopping UI lives outside /api/ so phones can bookmark a clean URL.
-// File has both /api/shopping* and /shopping handlers; they short-
-// circuit on match, so loading it here for the non-API path is safe.
-require __DIR__ . '/inc/routes/shopping.php';
 require __DIR__ . '/ui/layout.php';

relay/ui/app.js

@@ -68,15 +68,16 @@ function showView(name) {
     if (me && me.password_changed === false && !['setup', 'login', 'change-password'].includes(name)) {
         name = 'change-password';
     }
-    ['setup', 'login', 'change-password', 'compose', 'account', 'admin', 'chat'].forEach(v => {
+    ['setup', 'login', 'change-password', 'compose', 'account', 'admin', 'chat', 'shopping'].forEach(v => {
         $('view-' + v)?.classList.add('hidden');
     });
     $('view-' + name)?.classList.remove('hidden');
 
-    if (['compose', 'account', 'admin', 'chat'].includes(name)) {
+    if (['compose', 'account', 'admin', 'chat', 'shopping'].includes(name)) {
         $('nav-buttons').classList.remove('hidden');
         $('nav-compose').classList.toggle('active', name === 'compose');
         $('nav-chat')?.classList.toggle('active', name === 'chat');
+        $('nav-shopping')?.classList.toggle('active', name === 'shopping');
         $('nav-account').classList.toggle('active', name === 'account');
         $('nav-admin').classList.toggle('active', name === 'admin');
         $('nav-burger')?.classList.remove('hidden');
@@ -105,6 +106,12 @@ function showView(name) {
     } else {
         stopChatPoll();
     }
+    if (name === 'shopping') {
+        loadShopping();
+        startShoppingPoll();
+    } else {
+        stopShoppingPoll();
+    }
     if (name === 'admin') {
         loadUsers();
     } else if (name === 'account') {
@@ -695,6 +702,129 @@ window.deleteAllMessages = deleteAllMessages;
 /** Lightweight relative-time formatter for the inbox. SQLite gives us
  *  `YYYY-MM-DD HH:MM:SS` (UTC). Returns "2 min ago", "today 14:32",
  *  or a full date for older messages. */
+// ── Shopping (phone-side of the hyprcrd → relay list) ──
+//
+// We don't own the content — hyprcrd pushes the active card's body
+// to /api/shopping and we just render the unchecked "- [ ]" lines
+// as tappable rows. A tap POSTs to /api/shopping/check which flips
+// that exact line to "- [x]" on disk; hyprcrd's next pull sees it.
+
+let shoppingPollHandle = null;
+let shoppingBusy = false;
+
+function startShoppingPoll() {
+    stopShoppingPoll();
+    // 4 s is responsive enough that edits on the desktop show up
+    // while you're still holding the phone, and cheap enough that
+    // an always-on tab costs basically nothing (single indexed
+    // SELECT per poll).
+    shoppingPollHandle = setInterval(() => {
+        if (!document.hidden && !shoppingBusy) loadShopping(true);
+    }, 4000);
+}
+function stopShoppingPoll() {
+    if (shoppingPollHandle) { clearInterval(shoppingPollHandle); shoppingPollHandle = null; }
+}
+
+function shoppingErr(msg) {
+    const el = $('shopping-err');
+    if (!el) return;
+    if (!msg) { el.classList.add('hidden'); el.textContent = ''; return; }
+    el.textContent = msg;
+    el.classList.remove('hidden');
+}
+
+function shoppingParseLines(body) {
+    // Two node kinds end up on the phone:
+    //   heading — "# h1" … "###### h6" inside the body, used to
+    //             section the list (Obst / Backwaren / …)
+    //   item    — unchecked "- [ ] …" lines (checked ones are hidden)
+    // Then drop orphan headings (no open items before the next
+    // heading or end of list) so empty section labels don't sit
+    // around after everything under them is ticked off.
+    const nodes = [];
+    for (const line of String(body || '').split(/\r\n|\n|\r/)) {
+        const hm = /^\s*(#{1,6})\s+(.+?)\s*#*\s*$/.exec(line);
+        if (hm) { nodes.push({ kind: 'heading', level: hm[1].length, text: hm[2] }); continue; }
+        const im = /^\s*-\s*\[([ xX])\]\s*(.*)$/.exec(line);
+        if (!im) continue;
+        if (im[1].toLowerCase() === 'x') continue;
+        nodes.push({ kind: 'item', text: im[2], line });
+    }
+    const out = [];
+    for (let i = 0; i < nodes.length; i++) {
+        if (nodes[i].kind === 'heading') {
+            let hasItem = false;
+            for (let j = i + 1; j < nodes.length; j++) {
+                if (nodes[j].kind === 'heading') break;
+                if (nodes[j].kind === 'item') { hasItem = true; break; }
+            }
+            if (!hasItem) continue;
+        }
+        out.push(nodes[i]);
+    }
+    return out;
+}
+
+async function loadShopping(quiet = false) {
+    if (!quiet) shoppingErr('');
+    const data = await api('api/shopping');
+    const title = $('shopping-title');
+    const list  = $('shopping-items');
+    if (!list) return;
+    if (!data?.ok) { if (!quiet) shoppingErr(data?.error || 'load failed'); return; }
+    if (!data.state) {
+        if (title) title.textContent = '';
+        list.innerHTML = '<li class="empty">no active shopping list</li>';
+        return;
+    }
+    const { title: t, body } = data.state;
+    if (title) title.textContent = t || '';
+    const nodes = shoppingParseLines(body);
+    const hasItems = nodes.some(n => n.kind === 'item');
+    if (!hasItems) {
+        list.innerHTML = '<li class="empty">\u2713 all done</li>';
+        return;
+    }
+    list.innerHTML = '';
+    for (const n of nodes) {
+        const li = document.createElement('li');
+        if (n.kind === 'heading') {
+            li.className = 'shopping-heading h' + n.level;
+            li.textContent = n.text;
+        } else {
+            li.textContent = n.text;
+            li.dataset.line = n.line;
+            li.addEventListener('click', () => shoppingCheck(li));
+        }
+        list.appendChild(li);
+    }
+}
+
+async function shoppingCheck(li) {
+    if (shoppingBusy) return;
+    shoppingBusy = true;
+    li.classList.add('checked');
+    try {
+        const res = await api('api/shopping/check', { method: 'POST', body: { line: li.dataset.line, checked: true } });
+        if (!res?.ok) throw new Error(res?.error || 'check failed');
+        setTimeout(() => { shoppingBusy = false; loadShopping(true); }, 300);
+    } catch (e) {
+        shoppingBusy = false;
+        li.classList.remove('checked');
+        shoppingErr(e.message);
+    }
+}
+
+// Auto-refresh when the tab comes back into focus — same pattern as
+// the standalone page used to have, just without a manual button.
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden) return;
+    if ($('view-shopping')?.classList.contains('hidden')) return;
+    if (shoppingBusy) return;
+    loadShopping(true);
+});
+
 // ── Chat ──
 
 let chatActivePeer = null;

relay/ui/layout.php

@@ -23,6 +23,7 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
         <span id="nav-user" class="user"></span>
         <button id="nav-compose" class="nav-btn active" onclick="showView('compose')"><i class="ph ph-pencil-line"></i> compose</button>
         <button id="nav-chat" class="nav-btn" onclick="showView('chat')"><i class="ph ph-chat-circle-dots"></i> chat</button>
+        <button id="nav-shopping" class="nav-btn" onclick="showView('shopping')"><i class="ph ph-shopping-cart"></i> shopping</button>
         <button id="nav-account" class="nav-btn" onclick="showView('account')"><i class="ph ph-user-circle"></i> account</button>
         <button id="nav-admin" class="nav-btn hidden" onclick="showView('admin')"><i class="ph ph-users"></i> users</button>
         <button class="nav-btn danger" onclick="doLogout()"><i class="ph ph-sign-out"></i> logout</button>
@@ -210,6 +211,21 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
     </div>
 </div>
 
+<!-- ── Shopping view ── -->
+<!-- Phone-friendly checklist. Shows only unchecked "- [ ]" items
+     from the currently active shopping card. Tapping an item flips
+     it to "- [x]" on the relay in place; hyprcrd pulls that back on
+     the next sync tick. Edits to item text stay in hyprcrd. -->
+<div id="view-shopping" class="hidden">
+    <div class="shopping-wrap">
+        <div class="shopping-top">
+            <span id="shopping-title" class="pixel" style="font-size:11px;color:var(--bright);">loading…</span>
+        </div>
+        <div id="shopping-err" class="shopping-err hidden"></div>
+        <ul id="shopping-items" class="shopping-items"></ul>
+    </div>
+</div>
+
 <!-- ── Chat view ── -->
 <div id="view-chat" class="hidden">
     <div class="chat-layout">

relay/ui/style.css

@@ -254,6 +254,43 @@ label.checkbox input[type="checkbox"] { accent-color:var(--accent); cursor:point
     display:flex; gap:8px; align-items:center;
 }
 .compose-card .actions .spacer { flex:1; }
+
+/* Shopping view — phone-friendly checklist. Large tap targets,
+   unchecked items only, tap to flip. */
+.shopping-wrap { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
+.shopping-top { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
+.shopping-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.shopping-items li {
+    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
+    padding: 14px 16px; font-size: 16px; cursor: pointer; user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: transform 0.12s, opacity 0.3s, background 0.12s;
+}
+.shopping-items li:active { transform: scale(0.98); background: var(--raised, var(--surface)); }
+.shopping-items li.checked { opacity: 0.35; text-decoration: line-through; }
+.shopping-items .empty { text-align: center; padding: 40px 16px; color: var(--dim); background: transparent; border: none; cursor: default; }
+.shopping-items .empty:active { transform: none; }
+
+/* Section headings between items — "# Obst", "## Backwaren", etc. */
+.shopping-items li.shopping-heading {
+    background: transparent;
+    border: none;
+    padding: 18px 4px 4px;
+    cursor: default;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+.shopping-items li.shopping-heading:active { transform: none; background: transparent; opacity: 1; }
+.shopping-items li.shopping-heading:first-child { padding-top: 2px; }
+.shopping-items li.shopping-heading.h1 { font-size: 18px; color: var(--bright); }
+.shopping-items li.shopping-heading.h2 { font-size: 15px; color: var(--accent); }
+.shopping-items li.shopping-heading.h3,
+.shopping-items li.shopping-heading.h4,
+.shopping-items li.shopping-heading.h5,
+.shopping-items li.shopping-heading.h6 { font-size: 13px; color: var(--muted); }
+.shopping-err { background: var(--danger-bg, #7f1d1d); color: var(--danger-fg, #fecaca); padding: 8px 12px; border-radius: 6px; font-size: 13px; }
+.shopping-err.hidden { display: none; }
+
 /* Chat view */
 .chat-layout { display: flex; height: calc(100vh - 200px); min-height: 300px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
 .chat-sidebar { width: 200px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); }