chore: update build artifacts for v1.4.19

.agent/rules/rules.md

@@ -48,6 +48,11 @@ trigger: always_on
 - **Browser**: Allowed for documentation and safe browsing. No automated logins without permission.
 - **Terminal**: No `rm -rf`. Run tests (`pytest` etc.) after logic changes.
 
+## 7. Mandatory Testing Policy 🧪
+**CRITICAL: No logic or UI fix is complete without a corresponding automated test.**
+- If you fix a regression or implement a new UI feature, you **MUST** write or update a test in `tests/test_dom.js` or `test_logic.js`. 
+- Refactoring MUST include verifying that no click listeners drop out. This guarantees that features like modal toggles stay functional.
+
 ## 7. Requirements-Konsistenz 📋
 Alle umgesetzten Anforderungen müssen mit `REQUIREMENTS.md` übereinstimmen.
 1.  **Vor der Umsetzung prüfen**: Passt die neue Anforderung zu den bestehenden Requirements?

REQUIREMENTS.md

@@ -40,7 +40,7 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 | FR-033 | Es muss möglich sein, dasselbe Menü mehrfach zu bestellen. Bei Mehrfachbestellungen muss die Anzahl angezeigt werden. | Niedrig | v1.0.1 |
 | **Kostentransparenz & Bestellhistorie** | | | |
 | FR-040 | Das System muss die Gesamtkosten aller Bestellungen einer Woche automatisch berechnen und anzeigen. | Mittel | v1.1.0 |
-| FR-041 | Das System muss dem Benutzer eine paginierte oder vollständige Bestellhistorie (gruppiert nach Monat und KW) mit Fortschrittsanzeige auf Abruf in einem Modal bereitstellen. | Mittel | v1.4.0 |
+| FR-041 | Das System muss dem Benutzer eine Bestellhistorie (gruppiert nach Monat und KW) mit Fortschrittsanzeige auf Abruf in einem Modal bereitstellen. Die Historie muss über ein lokales Delta-Caching verfügen, um Ladezeiten zu minimieren. | Mittel | v1.4.0 (Update v1.4.7) |
 | **Bestell-Countdown** | | | |
 | FR-050 | Das System muss vor Bestellschluss einen visuell hervorgehobenen Countdown anzeigen. | Mittel | v1.1.0 |
 | **Menü-Flagging & Benachrichtigungen** | | | |
@@ -59,7 +59,8 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 | FR-082 | Das System muss beim erstmaligen Laden die Betriebssystem-Präferenz für das Farbschema berücksichtigen. | Niedrig | v1.0.1 |
 | **Header UI & Navigation** | | | |
 | FR-090 | Die Hauptnavigation (Wochen-Toggles) muss linksbündig neben dem App-Titel positioniert sein. | Niedrig | v1.5.0 |
-| FR-091 | Ein dynamisches Alarm-Icon im Header muss den Überwachungsstatus geflaggter Menüs anzeigen (Gelb=Überwachung aktiv, Grün=Menü verfügbar, Versteckt=keine Flags). Der Tooltip muss den Zeitpunkt der letzten Prüfung als relativen String (z.B. "vor 4 Min.") enthalten. | Mittel | v1.5.0 |
+| FR-091 | Ein dynamisches Alarm-Icon im Header muss den Überwachungsstatus geflaggter Menüs anzeigen (Gelb=Überwachung aktiv aber kein Menü verfügbar, Grün=Mindestens ein Menü verfügbar, Versteckt=keine Flags). Der Tooltip muss den Zeitpunkt der letzten Prüfung als relativen String (z.B. "vor 4 Min.") enthalten. | Mittel | v1.5.0 (Update v1.4.10) |
+| FR-092 | Sobald über den Daten-Refresh erstmals Menüdaten für die Nächste Woche geladen werden, muss der entsprechende Navigation-Button animiert und farblich (Gelb) hervorgehoben werden. Zusätzlich muss einmalig ein Hinweis eingeblendet werden. Bei Klick auf den Button muss die Hervorhebung erlöschen. | Mittel | v1.6.0 |
 | **Benutzer-Feedback** | | | |
 | FR-090 | Alle benutzerrelevanten Aktionen (Bestellung, Stornierung, Fehler) müssen durch nicht-blockierende Benachrichtigungen (Toasts) bestätigt werden. | Mittel | v1.0.1 |
 | FR-091 | Bei einem Verbindungsfehler muss ein Fehlerdialog mit Fallback-Link zur Originalseite angezeigt werden. | Mittel | v1.0.1 |
@@ -71,6 +72,7 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 | FR-112 | Benutzer müssen eine Versionsliste mit Installationslinks einsehen können (Versionsmenü). | Niedrig | v1.3.0 |
 | FR-113 | Es muss möglich sein, zu einer älteren Version zurückzukehren (Downgrade). | Niedrig | v1.3.0 |
 | FR-114 | Ein Dev-Mode muss es ermöglichen, zwischen stabilen Releases und Entwicklungs-Tags umzuschalten. | Niedrig | v1.3.0 |
+| FR-115 | Das Versionsmenü muss Links zur Erstellung von Feature-Requests und Bug-Reports auf GitHub enthalten. | Niedrig | v1.4.4 |
 
 ## 3. Nicht-funktionale Anforderungen
 
@@ -91,4 +93,4 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 *   **Datenhaltung**: Clientseitig via `localStorage` (Menü-Cache, Flags, Highlights, Theme) und `sessionStorage` (Auth-Token).
 *   **Build**: Bash-basiertes Build-Script, das Bookmarklet-URL, Standalone-HTML und Installer-Seite generiert.
 *   **Versionierung**: SemVer, verwaltet über GitHub Releases/Tags.
-*   **Tests**: Python-basierte Build-Tests + Node.js-basierte Logik-Tests.
+*   **Tests**: Python-basierte Build-Tests (`python3`) + Node.js-basierte Logik-Tests.

build-bookmarklet.sh

@@ -7,6 +7,7 @@ SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 DIST_DIR="$SCRIPT_DIR/dist"
 CSS_FILE="$SCRIPT_DIR/style.css"
 JS_FILE="$SCRIPT_DIR/kantine.js"
+FAVICON_FILE="$SCRIPT_DIR/favicon.svg"
 
 # === VERSION ===
 if [ -f "$SCRIPT_DIR/version.txt" ]; then
@@ -23,6 +24,11 @@ echo "=== Kantine Bookmarklet Builder ($VERSION) ==="
 # Check files exist
 if [ ! -f "$CSS_FILE" ]; then echo "ERROR: $CSS_FILE not found"; exit 1; fi
 if [ ! -f "$JS_FILE" ]; then echo "ERROR: $JS_FILE not found"; exit 1; fi
+if [ ! -f "$FAVICON_FILE" ]; then echo "ERROR: $FAVICON_FILE not found"; exit 1; fi
+
+# Generate favicon Base64 data URI
+FAVICON_B64=$(base64 -w0 "$FAVICON_FILE")
+FAVICON_URI="data:image/svg+xml;base64,${FAVICON_B64}"
 
 CSS_CONTENT=$(cat "$CSS_FILE")
 
@@ -101,6 +107,7 @@ cat > "$DIST_DIR/install.html" << INSTALLEOF
 <head>
     <meta charset="UTF-8">
     <title>Kantine Wrapper Installer ($VERSION)</title>
+    <link rel="icon" type="image/svg+xml" href="$FAVICON_URI">
     <style>
         body { font-family: 'Inter', sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #1a1a2e; color: #eee; }
         h1 { color: #029AA8; } /* Knapp Teal */
@@ -171,7 +178,7 @@ cat > "$DIST_DIR/install.html" << INSTALLEOF
     </div>
 
     <div style="text-align: center; margin-top: 40px; color: #5c6b7f; font-size: 0.8rem;">
-        <p>Powered by <strong>Kaufi-Kitchen</strong> 👨‍🍳</p>
+        <p>Powered by <strong>Kaufis-Kitchen</strong> 👨‍🍳</p>
     </div>
 
 
@@ -258,6 +265,14 @@ if [ $LOGIC_EXIT -ne 0 ]; then
     exit 1
 fi
 
+echo "=== Running DOM Interaction Tests ==="
+node "$SCRIPT_DIR/tests/test_dom.js"
+DOM_EXIT=$?
+if [ $DOM_EXIT -ne 0 ]; then
+    echo "❌ DOM UI tests FAILED! Regressions detected."
+    exit 1
+fi
+
 echo "=== Running Build Tests ==="
 python3 "$SCRIPT_DIR/test_build.py"
 TEST_EXIT=$?
@@ -267,23 +282,4 @@ if [ $TEST_EXIT -ne 0 ]; then
 fi
 echo "✅ All build tests passed."
 
-# === 5. Commit, tag, and push ===
-echo ""
-echo "=== Committing & Pushing ==="
-git add -A
-git commit -m "dist files for $VERSION built" --allow-empty
 
-echo ""
-echo "=== Tagging $VERSION ==="
-if git rev-parse "$VERSION" >/dev/null 2>&1; then
-    git tag -f "$VERSION"
-    echo "🔄 Tag $VERSION moved to current commit."
-else
-    git tag "$VERSION"
-    echo "✅ Created tag: $VERSION"
-fi
-
-git push
-git push origin --force tag "$VERSION"
-git push github --force tag "$VERSION"
-echo "✅ Pushed commit + tag $VERSION"

changelog.md

@@ -1,3 +1,55 @@
+## v1.4.19
+- 🎨 **Feature**: Eigenes Favicon für die Installer-Seite hinzugefügt (Dreieck + Gabel & Messer). Wird beim Drag & Drop in die Lesezeichenleiste als Icon übernommen.
+
+## v1.4.18
+- 🧪 **Testing**: Die automatische DOM-Testing Suite (`test_dom.js`) wurde massiv ausgebaut. Sie prüft nun neben der Alarmglocke und den Highlights auch systematisch alle anderen UI-Komponenten (Login-Modal, History-Modal, Versionen-Modal, Theme-Toggle, und Navigation Tabs) auf korrekte Event-Listener-Bindungen, um Regressionen (tote Buttons) endgültig auszuschließen.
+
+## v1.4.17
+- 🐛 **Bugfix**: Regression behoben: Der "Persönliche Highlights" (Stern-Button) Dialog öffnet sich nun wieder korrekt.
+- 🧪 **Testing**: Es wurde ein initialer UI-Testing-Hook (`test_dom.js` mit `jsdom`) in die Build-Pipeline integriert, um kritische DOM Event-Listener Regressionen (wie den Highlights-Button und die Alarmglocke) automatisch zu preventen.
+
+## v1.4.16
+- ⚡ **Feature**: Ein Button "Lokalen Cache leeren" wurde zum Versionen-Menü hinzugefügt, um bei hartnäckigen lokalen Fehlern alle Caches und Sessions bereinigen zu können, ohne die Entwicklertools (F12) des Browsers bemühen zu müssen.
+
+## v1.4.15
+- 🧹 **Bugfix**: In der Vergangenheit gesetzte Alarme/Flags wurden nicht zuverlässig gelöscht. Dies ist nun behoben, sodass verfallene Menüs nach 10:00 Uhr bzw. an vergangenen Tagen automatisch aus dem Tracker verschwinden.
+
+## v1.4.14
+- 🐛 **Bugfix**: Alarmglocke versteckt sich jetzt zuverlässig auch auf Endgeräten mit CSS Konflikten 
+- 🚀 **Feature**: Sofortige API-Aktualisierung (Refresh) bei Aktivierung eines Menüalarms
+- ⚡ **Optimierung**: "Unbekannt" im letzten Refresh-Zeitpunkt wird abgefangen und zeigt initial "gerade eben"
+
+## v1.4.13 (2026-02-24)
+- **Fix**: Die Farben der Glocke funktionieren nun verlässlich, da CSS-Variablen durch direkte Hex-Codes ersetzt wurden.
+
+## v1.4.12 (2026-02-24)
+- **Fix**: Das Glocken-Icon sollte nun endgültig versteckt bleiben, wenn keine Benachrichtigungen aktiv sind (CSS-Kollision mit `.hidden` behoben).
+
+## v1.4.11 (2026-02-24)
+- **Feature**: Das Versionsmenü prüft nun im Hintergrund direkt beim Öffnen nach neuen Versionen und aktualisiert die Liste automatisch, selbst wenn eine veraltete Liste noch im Cache liegt.
+
+## v1.4.10 (2026-02-24)
+- **Fix**: Die Farben der Benachrichtigungs-Glocke wurden korrigiert: Sie ist nun gelb, während man auf ein Menü wartet, und wird grün, sobald eines verfügbar ist.
+
+## v1.4.9 (2026-02-24)
+- **Fix**: Das Glocken-Icon für Benachrichtigungen wird nun direkt beim Start (wenn Daten aus dem lokalen Cache geladen werden) korrekt angezeigt.
+
+## v1.4.8 (2026-02-24)
+- **Fix**: Die Benachrichtigungs-Glocke wird nun korrekt in Gelb dargestellt, wenn beobachtete Menüs verfügbar sind.
+- **Tools**: Fehler in Testskript behoben, der den CI/CD Build verlangsamt hat.
+
+## v1.4.7 (2026-02-24)
+- **Performance**: Die Bestellhistorie nutzt nun einen inkrementellen Delta-Cache anstatt immer alle Seiten von der API herunterzuladen, was die Ladezeiten für Vielbesteller enorm reduziert.
+
+## v1.4.6 (2026-02-24)
+- **Fix**: Die Umrandung für bereits bestellte Menüs der vergangenen Tage ist nun ebenfalls einheitlich violett statt blau.
+
+## v1.4.5 (2026-02-24)
+- **Fix**: Doppelten Scrollbalken in der Versionen-Liste entfernt.
+
+## v1.4.4 (2026-02-24)
+- **Feature**: Das Versionsmenü enthält nun direkte Links zu GitHub, um Fehler zu melden oder neue Features vorzuschlagen.
+
 ## v1.4.3 (2026-02-24)
 - **Fix**: Der Rahmen des "Heute Bestellt" Menüs ist nun konsequent violett (passend zum Glow-Effekt).
 

debug_test.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const jsCode = fs.readFileSync('kantine.js', 'utf8').replace('(function () {', '').replace(/}\)\(\);$/, '');
+try {
+    const vm = require('vm');
+    new vm.Script(jsCode);
+} catch (e) {
+    console.error(e.message);
+    const lines = jsCode.split('\n');
+    console.error("Around line", e.loc?.line);
+    if(e.loc?.line) {
+       console.log(lines[e.loc.line - 2]);
+       console.log(lines[e.loc.line - 1]);
+       console.log(lines[e.loc.line]);
+    }
+}

dist/kantine-standalone.html

@@ -197,6 +197,32 @@ body {
     color: white;
 }
 
+/* Notification state for Next Week */
+.nav-btn.new-week-available {
+    animation: goldPulse 2s infinite;
+    border-color: #f59e0b;
+    color: var(--accent-color);
+}
+
+.nav-btn.new-week-available.active {
+    color: white;
+}
+
+@keyframes goldPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+    }
+}
+
+
 /* Badge for nav buttons (day count indicator) */
 .nav-badge {
     background-color: var(--error-color);
@@ -786,7 +812,7 @@ body {
     /* No opacity/filter here - fully visible */
     background: var(--bg-card);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    border: 1px solid var(--accent-color);
+    border: 1px solid #8b5cf6;
     border-radius: 8px;
     padding: 1rem;
     margin: 0 -1rem 1.5rem -1rem;
@@ -1606,8 +1632,6 @@ body {
 .version-list {
     list-style: none;
     padding: 0;
-    max-height: 350px;
-    overflow-y: auto;
     margin: 0;
 }
 
@@ -1997,7 +2021,7 @@ body {
                     <div class="brand">
                         <span class="material-icons-round logo-icon">restaurant_menu</span>
                         <div class="header-left">
-                            <h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">v1.4.3</small></h1>
+                            <h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">v1.4.19</small></h1>
                             <div id="last-updated-subtitle" class="subtitle"></div>
                         </div>
                         <div class="nav-group" style="margin-left: 1rem;">
@@ -2139,7 +2163,7 @@ body {
                     </div>
                     <div class="modal-body">
                         <div style="margin-bottom: 1rem;">
-                            <strong>Aktuell:</strong> <span id="version-current">v1.4.3</span>
+                            <strong>Aktuell:</strong> <span id="version-current">v1.4.19</span>
                         </div>
                         <div class="dev-toggle">
                             <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
@@ -2147,9 +2171,20 @@ body {
                                 <span>Dev-Mode (alle Tags anzeigen)</span>
                             </label>
                         </div>
-                        <div id="version-list-container" style="margin-top:1rem;">
+                        <div id="version-list-container" style="margin-top:1rem; max-height: 250px; overflow-y: auto;">
                             <p style="color:var(--text-secondary);">Lade Versionen...</p>
                         </div>
+                        <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9em;">
+                            <a href="https://github.com/TauNeutrino/kantine-overview/issues" target="_blank" rel="noopener noreferrer" style="color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem;" title="Melde einen Fehler auf GitHub">
+                                <span class="material-icons-round" style="font-size: 1.2em;">bug_report</span> Fehler melden
+                            </a>
+                            <a href="https://github.com/TauNeutrino/kantine-overview/discussions/categories/ideas" target="_blank" rel="noopener noreferrer" style="color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem;" title="Schlage ein neues Feature auf GitHub vor">
+                                <span class="material-icons-round" style="font-size: 1.2em;">lightbulb</span> Feature vorschlagen
+                            </a>
+                            <button id="btn-clear-cache" style="background: none; border: none; padding: 0; color: var(--error-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-align: left; font-size: inherit; font-family: inherit;" title="Löscht alle lokalen Daten & erzwingt einen Neuladen">
+                                <span class="material-icons-round" style="font-size: 1.2em;">delete_forever</span> Lokalen Cache leeren
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -2196,6 +2231,18 @@ body {
         const historyModal = document.getElementById('history-modal');
         const btnHistoryClose = document.getElementById('btn-history-close');
 
+        if (btnHighlights) {
+            btnHighlights.addEventListener('click', () => {
+                highlightsModal.classList.remove('hidden');
+            });
+        }
+
+        if (btnHighlightsClose) {
+            btnHighlightsClose.addEventListener('click', () => {
+                highlightsModal.classList.add('hidden');
+            });
+        }
+
         btnHistory.addEventListener('click', () => {
             if (!authToken) {
                 loginModal.classList.remove('hidden');
@@ -2233,6 +2280,17 @@ body {
             });
         }
 
+        const btnClearCache = document.getElementById('btn-clear-cache');
+        if (btnClearCache) {
+            btnClearCache.addEventListener('click', () => {
+                if (confirm('Möchtest du wirklich alle lokalen Daten (inkl. Login-Session, Cache und Einstellungen) löschen? Die Seite wird danach neu geladen.')) {
+                    localStorage.clear();
+                    sessionStorage.clear();
+                    window.location.reload();
+                }
+            });
+        }
+
         window.addEventListener('click', (e) => {
             if (e.target === versionModal) versionModal.classList.add('hidden');
         });
@@ -2283,6 +2341,7 @@ body {
         });
 
         btnNextWeek.addEventListener('click', () => {
+            btnNextWeek.classList.remove('new-week-available');
             if (displayMode !== 'next-week') {
                 displayMode = 'next-week';
                 btnNextWeek.classList.add('active');
@@ -2487,37 +2546,49 @@ body {
         const progressFill = document.getElementById('history-progress-fill');
         const progressText = document.getElementById('history-progress-text');
 
-        // Check memory cache first
+        // Check local storage cache (we still use memory cache if available)
+        let localCache = [];
         if (fullOrderHistoryCache) {
-            renderHistory(fullOrderHistoryCache);
-            return;
-        }
-
-        // Check local storage cache
-        const localCache = localStorage.getItem('kantine_history_cache');
-        if (localCache) {
+            localCache = fullOrderHistoryCache;
+        } else {
+            const ls = localStorage.getItem('kantine_history_cache');
+            if (ls) {
                 try {
-                fullOrderHistoryCache = JSON.parse(localCache);
-                renderHistory(fullOrderHistoryCache);
-                return;
+                    localCache = JSON.parse(ls);
+                    fullOrderHistoryCache = localCache;
                 } catch (e) {
                     console.warn('History cache parse error', e);
                 }
             }
+        }
+
+        // Show cached version immediately if we have one
+        if (localCache.length > 0) {
+            renderHistory(localCache);
+        }
 
         if (!authToken) return;
 
+        // Start background delta sync
+        if (localCache.length === 0) {
             historyContent.innerHTML = '';
             historyLoading.classList.remove('hidden');
-        progressFill.style.width = '0%';
-        progressText.textContent = 'Lade Bestellhistorie...';
+        }
 
-        let nextUrl = `${API_BASE}/user/orders/?venue=${VENUE_ID}&ordering=-created&limit=50`;
-        let allOrders = [];
+        progressFill.style.width = '0%';
+        progressText.textContent = localCache.length > 0 ? 'Suche nach neuen Bestellungen...' : 'Lade Bestellhistorie...';
+        if (localCache.length > 0) historyLoading.classList.remove('hidden');
+
+        let nextUrl = localCache.length > 0
+            ? `${API_BASE}/user/orders/?venue=${VENUE_ID}&ordering=-created&limit=5`
+            : `${API_BASE}/user/orders/?venue=${VENUE_ID}&ordering=-created&limit=50`;
+        let fetchedOrders = [];
         let totalCount = 0;
+        let requiresFullFetch = localCache.length === 0;
+        let deltaComplete = false;
 
         try {
-            while (nextUrl) {
+            while (nextUrl && !deltaComplete) {
                 const response = await fetch(nextUrl, { headers: apiHeaders(authToken) });
                 if (!response.ok) throw new Error(`Fetch failed: ${response.status}`);
 
@@ -2527,29 +2598,75 @@ body {
                     totalCount = data.count;
                 }
 
-                allOrders = allOrders.concat(data.results || []);
+                const results = data.results || [];
+
+                for (const order of results) {
+                    // Check if we hit an order that is already in our cache AND has the exact same state/update time
+                    // Bessa returns 'updated' timestamp, we can use it to determine if anything changed
+                    const existingOrderIndex = localCache.findIndex(cached => cached.id === order.id);
+
+                    if (!requiresFullFetch && existingOrderIndex !== -1) {
+                        const existingOrder = localCache[existingOrderIndex];
+                        // If order exists and wasn't updated since our cache, we've reached the point 
+                        // where everything older is already correctly cached.
+                        // order.updated is an ISO string like "2025-02-18T10:30:15.123456Z"
+                        if (existingOrder.updated === order.updated && existingOrder.order_state === order.order_state) {
+                            deltaComplete = true;
+                            break;
+                        }
+                    }
+                    fetchedOrders.push(order);
+                }
 
                 // Update progress
+                if (!deltaComplete && requiresFullFetch) {
                     if (totalCount > 0) {
-                    const pct = Math.round((allOrders.length / totalCount) * 100);
+                        const pct = Math.round((fetchedOrders.length / totalCount) * 100);
                         progressFill.style.width = `${pct}%`;
-                    progressText.textContent = `Lade Bestellung ${allOrders.length} von ${totalCount}...`;
+                        progressText.textContent = `Lade Bestellung ${fetchedOrders.length} von ${totalCount}...`;
                     } else {
-                    progressText.textContent = `Lade Bestellung ${allOrders.length}...`;
+                        progressText.textContent = `Lade Bestellung ${fetchedOrders.length}...`;
+                    }
+                } else if (!deltaComplete) {
+                    progressText.textContent = `${fetchedOrders.length} neue/geänderte Bestellungen gefunden...`;
                 }
 
-                nextUrl = data.next;
+                nextUrl = deltaComplete ? null : data.next;
             }
 
-            fullOrderHistoryCache = allOrders;
+            // Merge fetched orders with cache
+            if (fetchedOrders.length > 0) {
+                // We have new/updated orders. We need to merge them into the cache.
+                // 1. Create a map of the existing cache for quick ID lookup
+                const cacheMap = new Map(localCache.map(o => [o.id, o]));
+
+                // 2. Update/Insert the newly fetched orders
+                for (const order of fetchedOrders) {
+                    cacheMap.set(order.id, order); // Overwrites existing, or adds new
+                }
+
+                // 3. Convert back to array and sort by created date (descending)
+                const mergedOrders = Array.from(cacheMap.values());
+                mergedOrders.sort((a, b) => new Date(b.created) - new Date(a.created));
+
+                fullOrderHistoryCache = mergedOrders;
                 try {
-                localStorage.setItem('kantine_history_cache', JSON.stringify(allOrders));
-            } catch (e) { console.warn('History cache write error', e); }
+                    localStorage.setItem('kantine_history_cache', JSON.stringify(mergedOrders));
+                } catch (e) {
+                    console.warn('History cache write error', e);
+                }
+
+                // Render the updated history
                 renderHistory(fullOrderHistoryCache);
+            }
 
         } catch (error) {
-            console.error('Error fetching full history:', error);
+            console.error('Error in history sync:', error);
+            if (localCache.length === 0) {
                 historyContent.innerHTML = `<p style="color:var(--error-color);text-align:center;">Fehler beim Laden der Historie.</p>`;
+            } else {
+                showToast('Hintergrund-Synchronisation fehlgeschlagen', 'error');
+            }
         } finally {
             historyLoading.classList.add('hidden');
         }
@@ -2751,7 +2868,7 @@ body {
 
             if (response.ok || response.status === 201) {
                 showToast(`Bestellt: ${name}`, 'success');
-                localStorage.removeItem('kantine_history_cache');
+                fullOrderHistoryCache = null; // Clear memory cache so next history open triggers delta sync
                 await fetchOrders();
             } else {
                 const data = await response.json();
@@ -2781,7 +2898,7 @@ body {
 
             if (response.ok) {
                 showToast(`Storniert: ${name}`, 'success');
-                localStorage.removeItem('kantine_history_cache');
+                fullOrderHistoryCache = null; // Clear memory cache so next history open triggers delta sync
                 await fetchOrders();
             } else {
                 const data = await response.json();
@@ -2798,6 +2915,67 @@ body {
         localStorage.setItem('kantine_flags', JSON.stringify([...userFlags]));
     }
 
+    async function refreshFlaggedItems() {
+        if (userFlags.size === 0) return;
+        const token = authToken || GUEST_TOKEN;
+        const datesToFetch = new Set();
+
+        for (const flagId of userFlags) {
+            const [dateStr] = flagId.split('_');
+            datesToFetch.add(dateStr);
+        }
+
+        let updated = false;
+        for (const dateStr of datesToFetch) {
+            try {
+                const resp = await fetch(`${API_BASE}/venues/${VENUE_ID}/menu/${MENU_ID}/${dateStr}/`, {
+                    headers: apiHeaders(token)
+                });
+                if (!resp.ok) continue;
+                const data = await resp.json();
+                const menuGroups = data.results || [];
+                let dayItems = [];
+                for (const group of menuGroups) {
+                    if (group.items && Array.isArray(group.items)) {
+                        dayItems = dayItems.concat(group.items);
+                    }
+                }
+
+                // Update allWeeks in memory
+                for (let week of allWeeks) {
+                    if (!week.days) continue;
+                    let dayObj = week.days.find(d => d.date === dateStr);
+                    if (dayObj) {
+                        dayObj.items = dayItems.map(item => {
+                            const isUnlimited = item.amount_tracking === false;
+                            const hasStock = parseInt(item.available_amount) > 0;
+                            return {
+                                id: `${dateStr}_${item.id}`,
+                                articleId: item.id,
+                                name: item.name || 'Unknown',
+                                description: item.description || '',
+                                price: parseFloat(item.price) || 0,
+                                available: isUnlimited || hasStock,
+                                availableAmount: parseInt(item.available_amount) || 0,
+                                amountTracking: item.amount_tracking !== false
+                            };
+                        });
+                        updated = true;
+                    }
+                }
+            } catch (e) {
+                console.error('Error refreshing flag date', dateStr, e);
+            }
+        }
+
+        if (updated) {
+            saveMenuCache();
+            updateLastUpdatedTime(new Date().toISOString());
+            updateAlarmBell();
+            renderVisibleWeeks();
+        }
+    }
+
     function updateAlarmBell() {
         const bellBtn = document.getElementById('alarm-bell');
         const bellIcon = document.getElementById('alarm-bell-icon');
@@ -2805,10 +2983,14 @@ body {
 
         if (userFlags.size === 0) {
             bellBtn.classList.add('hidden');
+            bellBtn.style.display = 'none';
+            bellIcon.style.color = 'var(--text-secondary)';
+            bellIcon.style.textShadow = 'none';
             return;
         }
 
         bellBtn.classList.remove('hidden');
+        bellBtn.style.display = 'inline-flex';
 
         // Check if any flagged item is available
         let anyAvailable = false;
@@ -2827,33 +3009,40 @@ body {
             if (anyAvailable) break;
         }
 
-        const lastUpdatedStr = localStorage.getItem('kantine_last_updated');
-        let timeStr = 'Unbekannt';
-        if (lastUpdatedStr) {
+        let lastUpdatedStr = localStorage.getItem('kantine_last_updated');
+        let timeStr = 'gerade eben'; // Fallback instead of Unbekannt
+        if (!lastUpdatedStr) {
+            lastUpdatedStr = new Date().toISOString();
+            localStorage.setItem('kantine_last_updated', lastUpdatedStr);
+        }
+
         const lastUpdated = new Date(lastUpdatedStr);
         const diffMs = Date.now() - lastUpdated.getTime();
         const diffMins = Math.floor(diffMs / 60000);
-            if (diffMins < 60) timeStr = `vor ${diffMins} Min.`;
+        if (diffMins < 1) timeStr = 'gerade eben';
+        else if (diffMins < 60) timeStr = `vor ${diffMins} Min.`;
         else timeStr = `vor ${Math.floor(diffMins / 60)} Std.`;
-        }
+
         bellBtn.title = `Zuletzt geprüft: ${timeStr}`;
 
         if (anyAvailable) {
-            bellIcon.style.color = 'var(--success-color)';
+            bellIcon.style.color = '#10b981'; // green / success
             bellIcon.style.textShadow = '0 0 10px rgba(16, 185, 129, 0.4)';
         } else {
-            bellIcon.style.color = 'var(--warning-color)';
+            bellIcon.style.color = '#f59e0b'; // yellow / warning
             bellIcon.style.textShadow = '0 0 10px rgba(245, 158, 11, 0.4)';
         }
     }
 
     function toggleFlag(date, articleId, name, cutoff) {
         const id = `${date}_${articleId}`;
+        let flagAdded = false;
         if (userFlags.has(id)) {
             userFlags.delete(id);
             showToast(`Flag entfernt für ${name}`, 'success');
         } else {
             userFlags.add(id);
+            flagAdded = true;
             showToast(`Benachrichtigung aktiviert für ${name}`, 'success');
             if (Notification.permission === 'default') {
                 Notification.requestPermission();
@@ -2862,17 +3051,36 @@ body {
         saveFlags();
         updateAlarmBell();
         renderVisibleWeeks();
+
+        if (flagAdded) {
+            refreshFlaggedItems();
+        }
     }
 
     // FR-019: Auto-remove flags whose cutoff has passed
     function cleanupExpiredFlags() {
         const now = new Date();
+        const todayStr = now.toISOString().split('T')[0]; // Format: YYYY-MM-DD
         let changed = false;
+
         for (const flagId of [...userFlags]) {
-            const [date] = flagId.split('_');
-            const cutoff = new Date(date);
+            const [dateStr] = flagId.split('_'); // Format usually is YYYY-MM-DD
+
+            // If the flag's date string is entirely in the past (before today)
+            // or if it's today but past the 10:00 cutoff time
+            let isExpired = false;
+
+            if (dateStr < todayStr) {
+                isExpired = true;
+            } else if (dateStr === todayStr) {
+                const cutoff = new Date(dateStr);
                 cutoff.setHours(10, 0, 0, 0); // Standard cutoff 10:00
                 if (now >= cutoff) {
+                    isExpired = true;
+                }
+            }
+
+            if (isExpired) {
                 userFlags.delete(flagId);
                 changed = true;
             }
@@ -3017,6 +3225,7 @@ body {
                 console.log(`[Cache] Parsed ${allWeeks.length} weeks:`, allWeeks.map(w => `KW${w.weekNumber}/${w.year} (${(w.days || []).length} days)`));
                 renderVisibleWeeks();
                 updateNextWeekBadge();
+                updateAlarmBell();
                 if (cachedTs) updateLastUpdatedTime(cachedTs);
                 console.log('Loaded menu from cache');
                 return true;
@@ -3387,6 +3596,14 @@ body {
                 badge.classList.add('has-highlights');
             }
 
+            // FR-092: Highlight Next Week Button when new data arrives
+            const storageKey = `kantine_notified_nextweek_${nextYear}_${nextWeek}`;
+            if (!localStorage.getItem(storageKey)) {
+                localStorage.setItem(storageKey, 'true');
+                btnNextWeek.classList.add('new-week-available');
+                showToast('Neue Menüdaten für nächste Woche verfügbar!', 'info');
+            }
+
         } else if (badge) {
             badge.remove();
         }
@@ -3793,7 +4010,7 @@ body {
 
     // Periodic update check (runs on init + every hour)
     async function checkForUpdates() {
-        const currentVersion = 'v1.4.3';
+        const currentVersion = 'v1.4.19';
         const devMode = localStorage.getItem('kantine_dev_mode') === 'true';
 
         try {
@@ -3834,7 +4051,7 @@ body {
         const modal = document.getElementById('version-modal');
         const container = document.getElementById('version-list-container');
         const devToggle = document.getElementById('dev-mode-toggle');
-        const currentVersion = 'v1.4.3';
+        const currentVersion = 'v1.4.19';
 
         if (!modal) return;
         modal.classList.remove('hidden');
@@ -3852,19 +4069,8 @@ body {
             const dm = devToggle.checked;
             container.innerHTML = '<p style="color:var(--text-secondary);">Lade Versionen...</p>';
 
-            try {
-                let versions;
-                const cached = JSON.parse(localStorage.getItem('kantine_version_cache') || 'null');
-                if (!forceRefresh && cached && cached.devMode === dm && (Date.now() - cached.timestamp < 3600000)) {
-                    versions = cached.versions;
-                } else {
-                    versions = await fetchVersions(dm);
-                    localStorage.setItem('kantine_version_cache', JSON.stringify({
-                        timestamp: Date.now(), devMode: dm, versions
-                    }));
-                }
-
-                if (!versions.length) {
+            function renderVersionsList(versions) {
+                if (!versions || !versions.length) {
                     container.innerHTML = '<p style="color:var(--text-secondary);">Keine Versionen gefunden.</p>';
                     return;
                 }
@@ -3896,6 +4102,34 @@ body {
                     `;
                     list.appendChild(li);
                 });
+            }
+
+            try {
+                // 1. Show cached versions immediately if available
+                const cachedRaw = localStorage.getItem('kantine_version_cache');
+                let cached = null;
+                if (cachedRaw) {
+                    try { cached = JSON.parse(cachedRaw); } catch (e) { }
+                }
+
+                if (cached && cached.devMode === dm && cached.versions) {
+                    renderVersionsList(cached.versions);
+                }
+
+                // 2. Fetch fresh versions in background (or foreground if no cache)
+                const liveVersions = await fetchVersions(dm);
+
+                // Compare with cache to see if we need to re-render
+                const liveVersionsStr = JSON.stringify(liveVersions);
+                const cachedVersionsStr = cached ? JSON.stringify(cached.versions) : '';
+
+                if (liveVersionsStr !== cachedVersionsStr) {
+                    localStorage.setItem('kantine_version_cache', JSON.stringify({
+                        timestamp: Date.now(), devMode: dm, versions: liveVersions
+                    }));
+                    renderVersionsList(liveVersions);
+                }
+
             } catch (e) {
                 container.innerHTML = `<p style="color:#e94560;">Fehler: ${e.message}</p>`;
             }

favicon.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <!-- Fork (left, with gap to triangle) -->
+  <g transform="translate(2, 10)">
+    <!-- Tines -->
+    <rect x="1" y="0" width="1.8" height="16" rx="0.9" fill="#333"/>
+    <rect x="4.6" y="0" width="1.8" height="16" rx="0.9" fill="#333"/>
+    <rect x="8.2" y="0" width="1.8" height="16" rx="0.9" fill="#333"/>
+    <!-- Connector -->
+    <rect x="1" y="14" width="9" height="3.5" rx="1.5" fill="#333"/>
+    <!-- Handle -->
+    <rect x="3.5" y="16.5" width="4" height="24" rx="2" fill="#333"/>
+  </g>
+
+  <!-- Triangle (center, equilateral aspect ratio ~1:0.866) -->
+  <!-- Equilateral: base=28, height=24.25 => keeps proper ratio -->
+  <polygon points="32,8 47,48 17,48" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
+
+  <!-- Knife (right, with gap to triangle) -->
+  <g transform="translate(50, 10)">
+    <!-- Blade (slight curve) -->
+    <path d="M3,0 C3,0 3,0 3,0 L3,17 L10,14 C10,6 7,0 3,0 Z" fill="#333"/>
+    <!-- Spine -->
+    <rect x="1.5" y="0" width="2" height="18" rx="1" fill="#333"/>
+    <!-- Bolster -->
+    <rect x="1.5" y="16.5" width="8.5" height="3.5" rx="1.2" fill="#333"/>
+    <!-- Handle -->
+    <rect x="3.5" y="19" width="4" height="22" rx="2" fill="#333"/>
+  </g>
+</svg>

kantine.js

@@ -221,9 +221,20 @@
                                 <span>Dev-Mode (alle Tags anzeigen)</span>
                             </label>
                         </div>
-                        <div id="version-list-container" style="margin-top:1rem;">
+                        <div id="version-list-container" style="margin-top:1rem; max-height: 250px; overflow-y: auto;">
                             <p style="color:var(--text-secondary);">Lade Versionen...</p>
                         </div>
+                        <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9em;">
+                            <a href="https://github.com/TauNeutrino/kantine-overview/issues" target="_blank" rel="noopener noreferrer" style="color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem;" title="Melde einen Fehler auf GitHub">
+                                <span class="material-icons-round" style="font-size: 1.2em;">bug_report</span> Fehler melden
+                            </a>
+                            <a href="https://github.com/TauNeutrino/kantine-overview/discussions/categories/ideas" target="_blank" rel="noopener noreferrer" style="color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem;" title="Schlage ein neues Feature auf GitHub vor">
+                                <span class="material-icons-round" style="font-size: 1.2em;">lightbulb</span> Feature vorschlagen
+                            </a>
+                            <button id="btn-clear-cache" style="background: none; border: none; padding: 0; color: var(--error-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-align: left; font-size: inherit; font-family: inherit;" title="Löscht alle lokalen Daten & erzwingt einen Neuladen">
+                                <span class="material-icons-round" style="font-size: 1.2em;">delete_forever</span> Lokalen Cache leeren
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -270,6 +281,18 @@
         const historyModal = document.getElementById('history-modal');
         const btnHistoryClose = document.getElementById('btn-history-close');
 
+        if (btnHighlights) {
+            btnHighlights.addEventListener('click', () => {
+                highlightsModal.classList.remove('hidden');
+            });
+        }
+
+        if (btnHighlightsClose) {
+            btnHighlightsClose.addEventListener('click', () => {
+                highlightsModal.classList.add('hidden');
+            });
+        }
+
         btnHistory.addEventListener('click', () => {
             if (!authToken) {
                 loginModal.classList.remove('hidden');
@@ -307,6 +330,17 @@
             });
         }
 
+        const btnClearCache = document.getElementById('btn-clear-cache');
+        if (btnClearCache) {
+            btnClearCache.addEventListener('click', () => {
+                if (confirm('Möchtest du wirklich alle lokalen Daten (inkl. Login-Session, Cache und Einstellungen) löschen? Die Seite wird danach neu geladen.')) {
+                    localStorage.clear();
+                    sessionStorage.clear();
+                    window.location.reload();
+                }
+            });
+        }
+
         window.addEventListener('click', (e) => {
             if (e.target === versionModal) versionModal.classList.add('hidden');
         });
@@ -357,6 +391,7 @@
         });
 
         btnNextWeek.addEventListener('click', () => {
+            btnNextWeek.classList.remove('new-week-available');
             if (displayMode !== 'next-week') {
                 displayMode = 'next-week';
                 btnNextWeek.classList.add('active');
@@ -561,37 +596,49 @@
         const progressFill = document.getElementById('history-progress-fill');
         const progressText = document.getElementById('history-progress-text');
 
-        // Check memory cache first
+        // Check local storage cache (we still use memory cache if available)
+        let localCache = [];
         if (fullOrderHistoryCache) {
-            renderHistory(fullOrderHistoryCache);
-            return;
-        }
-
-        // Check local storage cache
-        const localCache = localStorage.getItem('kantine_history_cache');
-        if (localCache) {
+            localCache = fullOrderHistoryCache;
+        } else {
+            const ls = localStorage.getItem('kantine_history_cache');
+            if (ls) {
                 try {
-                fullOrderHistoryCache = JSON.parse(localCache);
-                renderHistory(fullOrderHistoryCache);
-                return;
+                    localCache = JSON.parse(ls);
+                    fullOrderHistoryCache = localCache;
                 } catch (e) {
                     console.warn('History cache parse error', e);
                 }
             }
+        }
+
+        // Show cached version immediately if we have one
+        if (localCache.length > 0) {
+            renderHistory(localCache);
+        }
 
         if (!authToken) return;
 
+        // Start background delta sync
+        if (localCache.length === 0) {
             historyContent.innerHTML = '';
             historyLoading.classList.remove('hidden');
-        progressFill.style.width = '0%';
-        progressText.textContent = 'Lade Bestellhistorie...';
+        }
 
-        let nextUrl = `${API_BASE}/user/orders/?venue=${VENUE_ID}&ordering=-created&limit=50`;
-        let allOrders = [];
+        progressFill.style.width = '0%';
+        progressText.textContent = localCache.length > 0 ? 'Suche nach neuen Bestellungen...' : 'Lade Bestellhistorie...';
+        if (localCache.length > 0) historyLoading.classList.remove('hidden');
+
+        let nextUrl = localCache.length > 0
+            ? `${API_BASE}/user/orders/?venue=${VENUE_ID}&ordering=-created&limit=5`
+            : `${API_BASE}/user/orders/?venue=${VENUE_ID}&ordering=-created&limit=50`;
+        let fetchedOrders = [];
         let totalCount = 0;
+        let requiresFullFetch = localCache.length === 0;
+        let deltaComplete = false;
 
         try {
-            while (nextUrl) {
+            while (nextUrl && !deltaComplete) {
                 const response = await fetch(nextUrl, { headers: apiHeaders(authToken) });
                 if (!response.ok) throw new Error(`Fetch failed: ${response.status}`);
 
@@ -601,29 +648,75 @@
                     totalCount = data.count;
                 }
 
-                allOrders = allOrders.concat(data.results || []);
+                const results = data.results || [];
+
+                for (const order of results) {
+                    // Check if we hit an order that is already in our cache AND has the exact same state/update time
+                    // Bessa returns 'updated' timestamp, we can use it to determine if anything changed
+                    const existingOrderIndex = localCache.findIndex(cached => cached.id === order.id);
+
+                    if (!requiresFullFetch && existingOrderIndex !== -1) {
+                        const existingOrder = localCache[existingOrderIndex];
+                        // If order exists and wasn't updated since our cache, we've reached the point 
+                        // where everything older is already correctly cached.
+                        // order.updated is an ISO string like "2025-02-18T10:30:15.123456Z"
+                        if (existingOrder.updated === order.updated && existingOrder.order_state === order.order_state) {
+                            deltaComplete = true;
+                            break;
+                        }
+                    }
+                    fetchedOrders.push(order);
+                }
 
                 // Update progress
+                if (!deltaComplete && requiresFullFetch) {
                     if (totalCount > 0) {
-                    const pct = Math.round((allOrders.length / totalCount) * 100);
+                        const pct = Math.round((fetchedOrders.length / totalCount) * 100);
                         progressFill.style.width = `${pct}%`;
-                    progressText.textContent = `Lade Bestellung ${allOrders.length} von ${totalCount}...`;
+                        progressText.textContent = `Lade Bestellung ${fetchedOrders.length} von ${totalCount}...`;
                     } else {
-                    progressText.textContent = `Lade Bestellung ${allOrders.length}...`;
+                        progressText.textContent = `Lade Bestellung ${fetchedOrders.length}...`;
+                    }
+                } else if (!deltaComplete) {
+                    progressText.textContent = `${fetchedOrders.length} neue/geänderte Bestellungen gefunden...`;
                 }
 
-                nextUrl = data.next;
+                nextUrl = deltaComplete ? null : data.next;
             }
 
-            fullOrderHistoryCache = allOrders;
+            // Merge fetched orders with cache
+            if (fetchedOrders.length > 0) {
+                // We have new/updated orders. We need to merge them into the cache.
+                // 1. Create a map of the existing cache for quick ID lookup
+                const cacheMap = new Map(localCache.map(o => [o.id, o]));
+
+                // 2. Update/Insert the newly fetched orders
+                for (const order of fetchedOrders) {
+                    cacheMap.set(order.id, order); // Overwrites existing, or adds new
+                }
+
+                // 3. Convert back to array and sort by created date (descending)
+                const mergedOrders = Array.from(cacheMap.values());
+                mergedOrders.sort((a, b) => new Date(b.created) - new Date(a.created));
+
+                fullOrderHistoryCache = mergedOrders;
                 try {
-                localStorage.setItem('kantine_history_cache', JSON.stringify(allOrders));
-            } catch (e) { console.warn('History cache write error', e); }
+                    localStorage.setItem('kantine_history_cache', JSON.stringify(mergedOrders));
+                } catch (e) {
+                    console.warn('History cache write error', e);
+                }
+
+                // Render the updated history
                 renderHistory(fullOrderHistoryCache);
+            }
 
         } catch (error) {
-            console.error('Error fetching full history:', error);
+            console.error('Error in history sync:', error);
+            if (localCache.length === 0) {
                 historyContent.innerHTML = `<p style="color:var(--error-color);text-align:center;">Fehler beim Laden der Historie.</p>`;
+            } else {
+                showToast('Hintergrund-Synchronisation fehlgeschlagen', 'error');
+            }
         } finally {
             historyLoading.classList.add('hidden');
         }
@@ -825,7 +918,7 @@
 
             if (response.ok || response.status === 201) {
                 showToast(`Bestellt: ${name}`, 'success');
-                localStorage.removeItem('kantine_history_cache');
+                fullOrderHistoryCache = null; // Clear memory cache so next history open triggers delta sync
                 await fetchOrders();
             } else {
                 const data = await response.json();
@@ -855,7 +948,7 @@
 
             if (response.ok) {
                 showToast(`Storniert: ${name}`, 'success');
-                localStorage.removeItem('kantine_history_cache');
+                fullOrderHistoryCache = null; // Clear memory cache so next history open triggers delta sync
                 await fetchOrders();
             } else {
                 const data = await response.json();
@@ -872,6 +965,67 @@
         localStorage.setItem('kantine_flags', JSON.stringify([...userFlags]));
     }
 
+    async function refreshFlaggedItems() {
+        if (userFlags.size === 0) return;
+        const token = authToken || GUEST_TOKEN;
+        const datesToFetch = new Set();
+
+        for (const flagId of userFlags) {
+            const [dateStr] = flagId.split('_');
+            datesToFetch.add(dateStr);
+        }
+
+        let updated = false;
+        for (const dateStr of datesToFetch) {
+            try {
+                const resp = await fetch(`${API_BASE}/venues/${VENUE_ID}/menu/${MENU_ID}/${dateStr}/`, {
+                    headers: apiHeaders(token)
+                });
+                if (!resp.ok) continue;
+                const data = await resp.json();
+                const menuGroups = data.results || [];
+                let dayItems = [];
+                for (const group of menuGroups) {
+                    if (group.items && Array.isArray(group.items)) {
+                        dayItems = dayItems.concat(group.items);
+                    }
+                }
+
+                // Update allWeeks in memory
+                for (let week of allWeeks) {
+                    if (!week.days) continue;
+                    let dayObj = week.days.find(d => d.date === dateStr);
+                    if (dayObj) {
+                        dayObj.items = dayItems.map(item => {
+                            const isUnlimited = item.amount_tracking === false;
+                            const hasStock = parseInt(item.available_amount) > 0;
+                            return {
+                                id: `${dateStr}_${item.id}`,
+                                articleId: item.id,
+                                name: item.name || 'Unknown',
+                                description: item.description || '',
+                                price: parseFloat(item.price) || 0,
+                                available: isUnlimited || hasStock,
+                                availableAmount: parseInt(item.available_amount) || 0,
+                                amountTracking: item.amount_tracking !== false
+                            };
+                        });
+                        updated = true;
+                    }
+                }
+            } catch (e) {
+                console.error('Error refreshing flag date', dateStr, e);
+            }
+        }
+
+        if (updated) {
+            saveMenuCache();
+            updateLastUpdatedTime(new Date().toISOString());
+            updateAlarmBell();
+            renderVisibleWeeks();
+        }
+    }
+
     function updateAlarmBell() {
         const bellBtn = document.getElementById('alarm-bell');
         const bellIcon = document.getElementById('alarm-bell-icon');
@@ -879,10 +1033,14 @@
 
         if (userFlags.size === 0) {
             bellBtn.classList.add('hidden');
+            bellBtn.style.display = 'none';
+            bellIcon.style.color = 'var(--text-secondary)';
+            bellIcon.style.textShadow = 'none';
             return;
         }
 
         bellBtn.classList.remove('hidden');
+        bellBtn.style.display = 'inline-flex';
 
         // Check if any flagged item is available
         let anyAvailable = false;
@@ -901,33 +1059,40 @@
             if (anyAvailable) break;
         }
 
-        const lastUpdatedStr = localStorage.getItem('kantine_last_updated');
-        let timeStr = 'Unbekannt';
-        if (lastUpdatedStr) {
+        let lastUpdatedStr = localStorage.getItem('kantine_last_updated');
+        let timeStr = 'gerade eben'; // Fallback instead of Unbekannt
+        if (!lastUpdatedStr) {
+            lastUpdatedStr = new Date().toISOString();
+            localStorage.setItem('kantine_last_updated', lastUpdatedStr);
+        }
+
         const lastUpdated = new Date(lastUpdatedStr);
         const diffMs = Date.now() - lastUpdated.getTime();
         const diffMins = Math.floor(diffMs / 60000);
-            if (diffMins < 60) timeStr = `vor ${diffMins} Min.`;
+        if (diffMins < 1) timeStr = 'gerade eben';
+        else if (diffMins < 60) timeStr = `vor ${diffMins} Min.`;
         else timeStr = `vor ${Math.floor(diffMins / 60)} Std.`;
-        }
+
         bellBtn.title = `Zuletzt geprüft: ${timeStr}`;
 
         if (anyAvailable) {
-            bellIcon.style.color = 'var(--success-color)';
+            bellIcon.style.color = '#10b981'; // green / success
             bellIcon.style.textShadow = '0 0 10px rgba(16, 185, 129, 0.4)';
         } else {
-            bellIcon.style.color = 'var(--warning-color)';
+            bellIcon.style.color = '#f59e0b'; // yellow / warning
             bellIcon.style.textShadow = '0 0 10px rgba(245, 158, 11, 0.4)';
         }
     }
 
     function toggleFlag(date, articleId, name, cutoff) {
         const id = `${date}_${articleId}`;
+        let flagAdded = false;
         if (userFlags.has(id)) {
             userFlags.delete(id);
             showToast(`Flag entfernt für ${name}`, 'success');
         } else {
             userFlags.add(id);
+            flagAdded = true;
             showToast(`Benachrichtigung aktiviert für ${name}`, 'success');
             if (Notification.permission === 'default') {
                 Notification.requestPermission();
@@ -936,17 +1101,36 @@
         saveFlags();
         updateAlarmBell();
         renderVisibleWeeks();
+
+        if (flagAdded) {
+            refreshFlaggedItems();
+        }
     }
 
     // FR-019: Auto-remove flags whose cutoff has passed
     function cleanupExpiredFlags() {
         const now = new Date();
+        const todayStr = now.toISOString().split('T')[0]; // Format: YYYY-MM-DD
         let changed = false;
+
         for (const flagId of [...userFlags]) {
-            const [date] = flagId.split('_');
-            const cutoff = new Date(date);
+            const [dateStr] = flagId.split('_'); // Format usually is YYYY-MM-DD
+
+            // If the flag's date string is entirely in the past (before today)
+            // or if it's today but past the 10:00 cutoff time
+            let isExpired = false;
+
+            if (dateStr < todayStr) {
+                isExpired = true;
+            } else if (dateStr === todayStr) {
+                const cutoff = new Date(dateStr);
                 cutoff.setHours(10, 0, 0, 0); // Standard cutoff 10:00
                 if (now >= cutoff) {
+                    isExpired = true;
+                }
+            }
+
+            if (isExpired) {
                 userFlags.delete(flagId);
                 changed = true;
             }
@@ -1091,6 +1275,7 @@
                 console.log(`[Cache] Parsed ${allWeeks.length} weeks:`, allWeeks.map(w => `KW${w.weekNumber}/${w.year} (${(w.days || []).length} days)`));
                 renderVisibleWeeks();
                 updateNextWeekBadge();
+                updateAlarmBell();
                 if (cachedTs) updateLastUpdatedTime(cachedTs);
                 console.log('Loaded menu from cache');
                 return true;
@@ -1461,6 +1646,14 @@
                 badge.classList.add('has-highlights');
             }
 
+            // FR-092: Highlight Next Week Button when new data arrives
+            const storageKey = `kantine_notified_nextweek_${nextYear}_${nextWeek}`;
+            if (!localStorage.getItem(storageKey)) {
+                localStorage.setItem(storageKey, 'true');
+                btnNextWeek.classList.add('new-week-available');
+                showToast('Neue Menüdaten für nächste Woche verfügbar!', 'info');
+            }
+
         } else if (badge) {
             badge.remove();
         }
@@ -1926,19 +2119,8 @@
             const dm = devToggle.checked;
             container.innerHTML = '<p style="color:var(--text-secondary);">Lade Versionen...</p>';
 
-            try {
-                let versions;
-                const cached = JSON.parse(localStorage.getItem('kantine_version_cache') || 'null');
-                if (!forceRefresh && cached && cached.devMode === dm && (Date.now() - cached.timestamp < 3600000)) {
-                    versions = cached.versions;
-                } else {
-                    versions = await fetchVersions(dm);
-                    localStorage.setItem('kantine_version_cache', JSON.stringify({
-                        timestamp: Date.now(), devMode: dm, versions
-                    }));
-                }
-
-                if (!versions.length) {
+            function renderVersionsList(versions) {
+                if (!versions || !versions.length) {
                     container.innerHTML = '<p style="color:var(--text-secondary);">Keine Versionen gefunden.</p>';
                     return;
                 }
@@ -1970,6 +2152,34 @@
                     `;
                     list.appendChild(li);
                 });
+            }
+
+            try {
+                // 1. Show cached versions immediately if available
+                const cachedRaw = localStorage.getItem('kantine_version_cache');
+                let cached = null;
+                if (cachedRaw) {
+                    try { cached = JSON.parse(cachedRaw); } catch (e) { }
+                }
+
+                if (cached && cached.devMode === dm && cached.versions) {
+                    renderVersionsList(cached.versions);
+                }
+
+                // 2. Fetch fresh versions in background (or foreground if no cache)
+                const liveVersions = await fetchVersions(dm);
+
+                // Compare with cache to see if we need to re-render
+                const liveVersionsStr = JSON.stringify(liveVersions);
+                const cachedVersionsStr = cached ? JSON.stringify(cached.versions) : '';
+
+                if (liveVersionsStr !== cachedVersionsStr) {
+                    localStorage.setItem('kantine_version_cache', JSON.stringify({
+                        timestamp: Date.now(), devMode: dm, versions: liveVersions
+                    }));
+                    renderVersionsList(liveVersions);
+                }
+
             } catch (e) {
                 container.innerHTML = `<p style="color:#e94560;">Fehler: ${e.message}</p>`;
             }

release.sh

@@ -0,0 +1,58 @@
+#!/bin/bash
+# release.sh - Deploys a new version of the Kantine Wrapper
+
+# Ensure we're in the script directory
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+cd "$SCRIPT_DIR"
+
+# Ensure tests have run and artifacts exist
+if [ ! -d "$SCRIPT_DIR/dist" ]; then
+    echo "❌ Error: dist folder missing. Please run build-bookmarklet.sh first"
+    exit 1
+fi
+
+# Get current version
+VERSION=$(cat "version.txt" | tr -d '\n\r ')
+
+# Validate that version is set
+if [ -z "$VERSION" ]; then
+    echo "❌ Error: Could not determine version from version.txt"
+    exit 1
+fi
+
+echo "=== Kantine Bookmarklet Releaser ($VERSION) ==="
+
+# Check for uncommitted changes (excluding dist/)
+if ! git diff-index --quiet HEAD -- ":(exclude)dist"; then
+    echo "⚠️ Warning: You have uncommitted changes in the working directory."
+    echo "Please commit your code changes before running the release script."
+    exit 1
+fi
+
+echo "=== Committing build artifacts ==="
+git add "dist/"
+git commit -m "chore: update build artifacts for $VERSION" --allow-empty
+
+echo ""
+echo "=== Tagging $VERSION ==="
+if git rev-parse "$VERSION" >/dev/null 2>&1; then
+    git tag -f "$VERSION"
+    echo "🔄 Tag $VERSION moved to current commit."
+else
+    git tag "$VERSION"
+    echo "✅ Created tag: $VERSION"
+fi
+
+echo ""
+echo "=== Pushing to remotes ==="
+# Determine remote targets: Assume 'origin' for primary, optionally 'github'
+git push origin HEAD
+git push origin --force tag "$VERSION"
+
+# If a remote named 'github' exists, push tags there too
+if git remote | grep -q "^github$"; then
+    git push github --force tag "$VERSION"
+fi
+
+echo "🎉 Successfully released version $VERSION!"
+exit 0

style.css

@@ -186,6 +186,32 @@ body {
     color: white;
 }
 
+/* Notification state for Next Week */
+.nav-btn.new-week-available {
+    animation: goldPulse 2s infinite;
+    border-color: #f59e0b;
+    color: var(--accent-color);
+}
+
+.nav-btn.new-week-available.active {
+    color: white;
+}
+
+@keyframes goldPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+    }
+}
+
+
 /* Badge for nav buttons (day count indicator) */
 .nav-badge {
     background-color: var(--error-color);
@@ -775,7 +801,7 @@ body {
     /* No opacity/filter here - fully visible */
     background: var(--bg-card);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    border: 1px solid var(--accent-color);
+    border: 1px solid #8b5cf6;
     border-radius: 8px;
     padding: 1rem;
     margin: 0 -1rem 1.5rem -1rem;
@@ -1595,8 +1621,6 @@ body {
 .version-list {
     list-style: none;
     padding: 0;
-    max-height: 350px;
-    overflow-y: auto;
     margin: 0;
 }
 

syntax_check.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+const jsCode = fs.readFileSync('kantine.js', 'utf8')
+    .replace('(function () {', '')
+    .replace('})();', '')
+    .replace('if (window.__KANTINE_LOADED) return;', '');
+const testCode = `
+    console.log("TEST");
+`;
+const code = jsCode + '\n' + testCode;
+try {
+    const vm = require('vm');
+    new vm.Script(code);
+} catch (e) {
+    if(e.stack) {
+       console.log("Syntax error at:", e.stack.split('\n').slice(0,3).join('\n'));
+    }
+}

test_logic.js

@@ -108,7 +108,8 @@ try {
         [/function\s+isNewer/, 'isNewer function'],
         [/function\s+openVersionMenu/, 'openVersionMenu function'],
         [/kantine_dev_mode/, 'dev-mode localStorage key'],
-        [/function\s+isCacheFresh/, 'isCacheFresh function']
+        [/function\s+isCacheFresh/, 'isCacheFresh function'],
+        [/limit=5/, 'Delta fetch limit parameter']
     ];
 
     for (const [regex, label] of checks) {

tests/test_dom.js

@@ -0,0 +1,184 @@
+const fs = require('fs');
+fs.writeFileSync('trace.log', '');
+function log(m) { fs.appendFileSync('trace.log', m + '\n'); }
+
+log("Initializing JSDOM...");
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
+
+log("Reading html...");
+const html = `
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .hidden { display: none !important; }
+        .icon-btn { display: inline-flex; }
+    </style>
+</head>
+<body>
+    <button id="alarm-bell" class="icon-btn hidden">
+        <span id="alarm-bell-icon" style="color:var(--text-secondary);"></span>
+    </button>
+    
+    <!-- Mocks for Highlights Feature -->
+    <button id="btn-highlights">Highlights</button>
+    <div id="highlights-modal" class="modal hidden">
+        <button id="btn-highlights-close">Close</button>
+        <input id="tag-input" type="text" />
+        <button id="btn-add-tag">Add</button>
+        <ul id="tags-list"></ul>
+    </div>
+    
+    <!-- Mocks for Login Modal -->
+    <button id="btn-login-open">Login</button>
+    <div id="login-modal" class="modal hidden">
+        <button id="btn-login-close">Close</button>
+        <form id="login-form"></form>
+        <div id="login-error" class="hidden"></div>
+    </div>
+    
+    <!-- Mocks for History Modal -->
+    <button id="btn-history">History</button>
+    <div id="history-modal" class="modal hidden">
+        <button id="btn-history-close">Close</button>
+        <div id="history-loading" class="hidden"></div>
+        <div id="history-content"></div>
+    </div>
+
+    <!-- Mocks for Version Modal -->
+    <span class="version-tag">v1.4.17</span>
+    <div id="version-modal" class="modal hidden">
+        <button id="btn-version-close">Close</button>
+        <button id="btn-clear-cache">Clear</button>
+        <span id="version-current"></span>
+        <div id="version-list-container"></div>
+    </div>
+
+    <!-- Mocks for Theme Toggle -->
+    <button id="theme-toggle"><span class="theme-icon">light_mode</span></button>
+
+    <!-- Mocks for Navigation Tabs -->
+    <button id="btn-this-week" class="active">This Week</button>
+    <button id="btn-next-week">Next Week</button>
+    
+    <button id="btn-refresh">Refresh</button>
+    <button id="btn-logout">Logout</button>
+    <div class="order-history-header">Header</div>
+    <button id="btn-error-redirect">Error Redirect</button>
+</body>
+</html>
+`;
+
+log("Reading file jsCode...");
+const jsCode = fs.readFileSync('kantine.js', 'utf8')
+    .replace('(function () {', '')
+    .replace('})();', '')
+    .replace('if (window.__KANTINE_LOADED) return;', '')
+    .replace('window.location.reload();', 'window.__RELOAD_CALLED = true;');
+
+log("Instantiating JSDOM...");
+const dom = new JSDOM(html, { runScripts: "dangerously", url: "http://localhost/" });
+log("JSDOM dom created...");
+global.window = dom.window;
+global.document = window.document;
+global.localStorage = { getItem: () => '[]', setItem: () => { } };
+global.sessionStorage = { getItem: () => null };
+
+global.showToast = () => { };
+global.saveFlags = () => { };
+global.renderVisibleWeeks = () => { };
+// Mock missing browser features if needed
+global.Notification = { permission: 'default', requestPermission: () => { } };
+global.window.matchMedia = () => ({ matches: false, addListener: () => { }, removeListener: () => { } });
+global.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve({ results: [] }) });
+global.window.fetch = global.fetch;
+
+log("Before eval...");
+const testCode = `
+        console.log("--- Testing Alarm Bell ---");
+        // Add flag
+        userFlags.add('2026-02-24_123'); updateAlarmBell();
+        if (document.getElementById('alarm-bell').className.includes('hidden')) throw new Error("Bell should be visible");
+
+        // Remove flag
+        userFlags.delete('2026-02-24_123'); updateAlarmBell();
+        if (!document.getElementById('alarm-bell').className.includes('hidden')) throw new Error("Bell should be hidden");
+
+        console.log("✅ Alarm Bell Test Passed");
+
+        console.log("--- Testing Highlights Modal ---");
+        // First, verify initial state
+        const hlModal = document.getElementById('highlights-modal');
+        if (!hlModal.classList.contains('hidden')) throw new Error("Highlights modal should be hidden initially");
+
+        // Click to open
+        document.getElementById('btn-highlights').click();
+        if (hlModal.classList.contains('hidden')) throw new Error("Highlights modal did not open upon clicking btn-highlights!");
+
+        // Click to close
+        document.getElementById('btn-highlights-close').click();
+        if (!hlModal.classList.contains('hidden')) throw new Error("Highlights modal did not close upon clicking btn-highlights-close!");
+
+        console.log("✅ Highlights Modal Test Passed");
+        
+        console.log("--- Testing Login Modal ---");
+        const loginModal = document.getElementById('login-modal');
+        document.getElementById('btn-login-open').click();
+        if (loginModal.classList.contains('hidden')) throw new Error("Login modal should open");
+        document.getElementById('btn-login-close').click();
+        if (!loginModal.classList.contains('hidden')) throw new Error("Login modal should close");
+        console.log("✅ Login Modal Test Passed");
+
+        console.log("--- Testing History Modal ---");
+        // We need authToken to be truthy to open history modal
+        authToken = "fake_token";
+        const historyModal = document.getElementById('history-modal');
+        document.getElementById('btn-history').click();
+        if (historyModal.classList.contains('hidden')) throw new Error("History modal should open");
+        document.getElementById('btn-history-close').click();
+        if (!historyModal.classList.contains('hidden')) throw new Error("History modal should close");
+        console.log("✅ History Modal Test Passed");
+
+        console.log("--- Testing Version Modal ---");
+        const versionModal = document.getElementById('version-modal');
+        document.querySelector('.version-tag').click();
+        if (versionModal.classList.contains('hidden')) throw new Error("Version modal should open");
+        document.getElementById('btn-version-close').click();
+        if (!versionModal.classList.contains('hidden')) throw new Error("Version modal should close");
+        console.log("✅ Version Modal Test Passed");
+
+        console.log("--- Testing Theme Toggle ---");
+        const themeBtn = document.getElementById('theme-toggle');
+        const initialTheme = document.documentElement.getAttribute('data-theme');
+        themeBtn.click();
+        const newTheme = document.documentElement.getAttribute('data-theme');
+        if (initialTheme === newTheme) throw new Error("Theme did not toggle");
+        console.log("✅ Theme Toggle Test Passed");
+
+        console.log("--- Testing Navigation Tabs ---");
+        const btnThis = document.getElementById('btn-this-week');
+        const btnNext = document.getElementById('btn-next-week');
+        btnNext.click();
+        if (!btnNext.classList.contains('active') || btnThis.classList.contains('active')) throw new Error("Next week tab not active");
+        btnThis.click();
+        if (!btnThis.classList.contains('active') || btnNext.classList.contains('active')) throw new Error("This week tab not active");
+        console.log("✅ Navigation Tabs Test Passed");
+        
+        console.log("--- Testing Clear Cache Button ---");
+        // Mock confirm directly inside evaluated JSDOM context
+        window.confirm = () => true;
+        document.getElementById('btn-clear-cache').click();
+        if (!window.__RELOAD_CALLED) throw new Error("Clear cache did not reload the page");
+        console.log("✅ Clear Cache Button Test Passed");
+
+        window.__TEST_PASSED = true;
+    `;
+
+dom.window.eval(jsCode + "\n" + testCode);
+
+if (!dom.window.__TEST_PASSED) {
+    throw new Error("Tests failed to reach completion inside JSDOM.");
+}
+
+process.exit(0);

version.txt

@@ -1 +1 @@
-v1.4.3
+v1.4.19