chore: update build artifacts for v1.4.17

.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?

build-bookmarklet.sh

@@ -258,6 +258,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=$?

changelog.md

@@ -1,3 +1,13 @@
+## 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

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

@@ -2021,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.14</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.17</small></h1>
                             <div id="last-updated-subtitle" class="subtitle"></div>
                         </div>
                         <div class="nav-group" style="margin-left: 1rem;">
@@ -2163,7 +2163,7 @@ body {
                     </div>
                     <div class="modal-body">
                         <div style="margin-bottom: 1rem;">
-                            <strong>Aktuell:</strong> <span id="version-current">v1.4.14</span>
+                            <strong>Aktuell:</strong> <span id="version-current">v1.4.17</span>
                         </div>
                         <div class="dev-toggle">
                             <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
@@ -2181,6 +2181,9 @@ body {
                             <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>
@@ -2228,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');
@@ -2265,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');
         });
@@ -3034,12 +3060,27 @@ body {
     // 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 [dateStr] = flagId.split('_'); // Format usually is YYYY-MM-DD
-            const cutoff = new Date(date);
+
+            // 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;
             }
@@ -3969,7 +4010,7 @@ body {
 
     // Periodic update check (runs on init + every hour)
     async function checkForUpdates() {
-        const currentVersion = 'v1.4.14';
+        const currentVersion = 'v1.4.17';
         const devMode = localStorage.getItem('kantine_dev_mode') === 'true';
 
         try {
@@ -4010,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.14';
+        const currentVersion = 'v1.4.17';
 
         if (!modal) return;
         modal.classList.remove('hidden');

kantine.js

@@ -231,6 +231,9 @@
                             <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>
@@ -278,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');
@@ -315,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');
         });
@@ -1084,12 +1110,27 @@
     // 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 [dateStr] = flagId.split('_'); // Format usually is YYYY-MM-DD
-            const cutoff = new Date(date);
+
+            // 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;
             }

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'));
+    }
+}

tests/test_dom.js

@@ -1,7 +1,12 @@
 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>
@@ -15,35 +20,80 @@ const html = `
     <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>
 </body>
 </html>
 `;
 
-const jsCode = fs.readFileSync('kantine.js', 'utf8').replace('(function () {', '').replace(/}\)\(\);$/, '');
+log("Reading file jsCode...");
+const jsCode = fs.readFileSync('kantine.js', 'utf8')
+    .replace('(function () {', '')
+    .replace('})();', '')
+    .replace('if (window.__KANTINE_LOADED) return;', '');
 
-const dom = new JSDOM(html, { runScripts: "dangerously" });
+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.localStorage = { getItem: () => '[]', setItem: () => { } };
 global.sessionStorage = { getItem: () => null };
 
-global.showToast = () => {};
+global.showToast = () => { };
-global.saveFlags = () => {};
+global.saveFlags = () => { };
-global.renderVisibleWeeks = () => {};
+global.renderVisibleWeeks = () => { };
 // Mock missing browser features if needed
-global.Notification = { permission: 'default', requestPermission: () => {} };
+global.Notification = { permission: 'default', requestPermission: () => { } };
-
+global.window.matchMedia = () => ({ matches: false, addListener: () => { }, removeListener: () => { } });
-try {
+global.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve({ results: [] }) });
-    dom.window.eval(jsCode);
+global.window.fetch = global.fetch;
-    console.log("Initial Bell Classes:", window.document.getElementById('alarm-bell').className);
 
+log("Before eval...");
+const testCode = `
+        console.log("--- Testing Alarm Bell ---");
         // Add flag
-    dom.window.eval("userFlags.add('2026-02-24_123'); updateAlarmBell();");
+        userFlags.add('2026-02-24_123'); updateAlarmBell();
-    console.log("After Add:", window.document.getElementById('alarm-bell').className);
+        if (document.getElementById('alarm-bell').className.includes('hidden')) throw new Error("Bell should be visible");
 
         // Remove flag
-    dom.window.eval("userFlags.delete('2026-02-24_123'); updateAlarmBell();");
+        userFlags.delete('2026-02-24_123'); updateAlarmBell();
-    console.log("After Remove:", window.document.getElementById('alarm-bell').className);
+        if (!document.getElementById('alarm-bell').className.includes('hidden')) throw new Error("Bell should be hidden");
-} catch (e) {
+
-    console.error(e);
+        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");
+
+        // Call bindEvents manually to attach the listeners since the IIFE is stripped
+        bindEvents();
+
+        // 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");
+        
+        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.14
+v1.4.17