diff --git a/TODO.md b/TODO.md index bf880f5..6b79a49 100644 --- a/TODO.md +++ b/TODO.md @@ -26,7 +26,7 @@ - [x] Chat: User-Nachrichten mit dem Tag [Datei: pfad/zur/datei.xyz:1-10] wird nicht als HTML geparsed - [x] Chat: Wird zwar erkannt und ist klickbar, aber es öffnet sich einfach nur der File Explorer, ohne dass sich die Datei öffnet und die Darstellung in Monospace ist auch nicht schön - [x] Chat: Es werden momentan alle Tool-Calls angezeigt - die Anzeige soll individuell in den Einstellungen gemacht werden können. Auswahl aus drei Stufen: "Alle anzeigen" / "Nur Modifikationen" (file änderungen, memory änderungen, etc.) / "Verstecken" -- [ ] Browser: "Zurück"-Taste soll auf den vorherigen location.hash wechseln +- [x] Browser: "Zurück"-Taste soll auf den vorherigen location.hash wechseln - [x] File Explorer: CodeMirror lässt sich horizontal nicht scroll ## Ideas / Backlog diff --git a/wwwroot/js/app.js b/wwwroot/js/app.js index 5ba0ea7..3fe4478 100644 --- a/wwwroot/js/app.js +++ b/wwwroot/js/app.js @@ -4,25 +4,35 @@ document.addEventListener('DOMContentLoaded', async () => { // Auth-Check: Eingeloggt? var user = await apiMe(); if (!user) { - await navigateTo('login'); + await navigateTo('login', {}, { replace: true }); return; } const { page, id } = parseHash(); var target = page === 'login' ? 'dashboard' : page; - await navigateTo(target, { id }); + await navigateTo(target, { id }, { replace: true }); }); -// Hash-Änderungen abfangen -window.addEventListener('hashchange', async () => { - const { page, id } = parseHash(); +// Browser Zurück/Vor-Button +window.addEventListener('popstate', async (e) => { + var page, id; + if (e.state && e.state.page) { + page = e.state.page; + id = e.state.params ? e.state.params.id : null; + } else { + const parsed = parseHash(); + page = parsed.page; + id = parsed.id; + } + // Login-Seite immer erlauben, alles andere nur wenn eingeloggt if (page !== 'login') { var user = await apiMe(); if (!user) { - await navigateTo('login'); + await navigateTo('login', {}, { replace: true }); return; } } - await navigateTo(page, { id }); + + await navigateTo(page, { id }, { replace: true }); }); diff --git a/wwwroot/js/pages/chat-page.js b/wwwroot/js/pages/chat-page.js index 57128bb..05f2de0 100644 --- a/wwwroot/js/pages/chat-page.js +++ b/wwwroot/js/pages/chat-page.js @@ -166,7 +166,7 @@ registerPage('chat', { // Zurück zum Dashboard const backBtn = document.getElementById('chatBackBtn'); if (backBtn) { - backBtn.addEventListener('click', () => navigateTo('dashboard')); + backBtn.addEventListener('click', () => history.back()); } // Send / Stop diff --git a/wwwroot/js/router.js b/wwwroot/js/router.js index e3f2527..3f41fb4 100644 --- a/wwwroot/js/router.js +++ b/wwwroot/js/router.js @@ -2,12 +2,13 @@ const routes = {}; let currentPage = null; +let isNavigating = false; function registerPage(name, { init, destroy }) { routes[name] = { init, destroy }; } -async function navigateTo(page, params = {}) { +async function navigateTo(page, params = {}, options = {}) { const app = document.getElementById('app'); // Tooltip verstecken @@ -32,7 +33,11 @@ async function navigateTo(page, params = {}) { // URL Hash setzen const hash = params.id ? `${page}/${params.id}` : page; - history.replaceState(null, '', `#${hash}`); + if (options.replace) { + history.replaceState({ page, params }, '', `#${hash}`); + } else { + history.pushState({ page, params }, '', `#${hash}`); + } // Page initialisieren if (routes[page] && routes[page].init) { @@ -41,7 +46,7 @@ async function navigateTo(page, params = {}) { // Back-Buttons verdrahten document.querySelectorAll('.back-btn[data-page]').forEach(btn => { - btn.addEventListener('click', () => navigateTo(btn.dataset.page)); + btn.addEventListener('click', () => history.back()); }); }