From 8f12e8dc1a27784082cf876780053f91dc6961ea Mon Sep 17 00:00:00 2001 From: Meleki Date: Sun, 1 Mar 2026 11:32:12 +0100 Subject: [PATCH] =?UTF-8?q?UI-Refactoring:=20Transitions=20vereinheitlicht?= =?UTF-8?q?,=20Card-Navigation=20auf=20Men=C3=BC=20umgestellt,=20openChatB?= =?UTF-8?q?tn=20entfernt,=20Chat-Back=20navigiert=20zum=20Dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wwwroot/css/chat.css | 4 ++-- wwwroot/css/dashboard.css | 16 +++------------- wwwroot/css/form.css | 4 ---- wwwroot/css/theme.css | 2 +- wwwroot/css/tooltip.css | 2 +- wwwroot/index.html | 1 - wwwroot/js/pages/chat-page.js | 4 ++-- wwwroot/js/pages/dashboard.js | 12 ++---------- wwwroot/js/pages/session-page.js | 8 -------- 9 files changed, 11 insertions(+), 42 deletions(-) diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css index 97e6db0..1a14831 100644 --- a/wwwroot/css/chat.css +++ b/wwwroot/css/chat.css @@ -273,7 +273,7 @@ position: absolute; top: var(--badge-spacing); opacity: 0; - transition: opacity .15s; + transition: opacity var(--transition-duration); padding: .15em .35em; font-size: var(--font-size); background: var(--f2-bg); @@ -465,7 +465,7 @@ font-size: var(--font-size); white-space: nowrap; vertical-align: baseline; - transition: background .15s, border-color .15s; + transition: background var(--transition-duration), border-color var(--transition-duration); } .file-ref-chip:hover { diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css index a8ea5b7..484f1c3 100644 --- a/wwwroot/css/dashboard.css +++ b/wwwroot/css/dashboard.css @@ -111,28 +111,18 @@ } .card-menu-trigger { - opacity: 0; - transition: opacity .15s; - padding: .15em .45em; + transition: opacity var(--transition-duration); font-size: var(--font-size); background: var(--f3-bg); border: var(--border-width) solid var(--f3-border); border-radius: var(--border-radius); } -.card:hover .card-menu-trigger { - opacity: var(--semi-transparent); -} - -.card-menu-trigger:hover { - opacity: 1 !important; -} - .card-menu-dropdown { + margin-top: var(--badge-spacing); position: absolute; top: 100%; right: 0; - margin-top: .3em; background: var(--f3-bg); border: var(--border-width) solid var(--f3-border); border-radius: var(--border-radius); @@ -140,7 +130,7 @@ display: flex; flex-direction: column; overflow: hidden; - padding-block: calc(var(--badge-spacing) / 2) var(--badge-spacing); + padding-block: var(--badge-spacing); } .card-menu-dropdown[hidden] { diff --git a/wwwroot/css/form.css b/wwwroot/css/form.css index 4b6e7c4..e7da9b5 100644 --- a/wwwroot/css/form.css +++ b/wwwroot/css/form.css @@ -10,10 +10,6 @@ margin-top: var(--box-spacing); } -#openChatBtn { - margin-left: var(--badge-spacing); -} - .avatar-section { display: flex; align-items: center; diff --git a/wwwroot/css/theme.css b/wwwroot/css/theme.css index 2e69b49..521906f 100644 --- a/wwwroot/css/theme.css +++ b/wwwroot/css/theme.css @@ -30,5 +30,5 @@ --menu-item-padding: .5em .75em; --page-width: 900px; --hover-filter: contrast(.9); - --transition-duration: 220ms; + --transition-duration: .15s; } diff --git a/wwwroot/css/tooltip.css b/wwwroot/css/tooltip.css index af591aa..17c3e5b 100644 --- a/wwwroot/css/tooltip.css +++ b/wwwroot/css/tooltip.css @@ -11,7 +11,7 @@ line-height: 1.4; pointer-events: none; opacity: 0; - transition: opacity 120ms; + transition: opacity var(--transition-duration); white-space: pre-line; } diff --git a/wwwroot/index.html b/wwwroot/index.html index 1a3fcee..3a2f0d7 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -64,7 +64,6 @@

Neue Session

-
diff --git a/wwwroot/js/pages/chat-page.js b/wwwroot/js/pages/chat-page.js index aa82fba..2219b7f 100644 --- a/wwwroot/js/pages/chat-page.js +++ b/wwwroot/js/pages/chat-page.js @@ -176,10 +176,10 @@ registerPage('chat', { addCmdSection(sessionCmds, 'Session'); } - // Zurück zur Session-Edit-Seite + // Zurück zum Dashboard const backBtn = document.getElementById('chatBackBtn'); if (backBtn) { - backBtn.addEventListener('click', () => navigateTo('session', { id: sessionId })); + backBtn.addEventListener('click', () => navigateTo('dashboard')); } // Send diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js index 7f33012..8c19904 100644 --- a/wwwroot/js/pages/dashboard.js +++ b/wwwroot/js/pages/dashboard.js @@ -17,7 +17,7 @@ registerPage('dashboard', { for (const s of sessions) { const agent = s.agentId ? agentMap[s.agentId] : null; const card = document.createElement('div'); - card.className = 'card clickable'; + card.className = 'card'; const msgLabel = s.messageCount !== undefined ? `${s.messageCount}${s.totalMessageCount !== s.messageCount ? ` (${s.totalMessageCount})` : ''} Nachrichten` : ''; @@ -44,10 +44,6 @@ registerPage('dashboard', {
`; - card.addEventListener('click', (e) => { - if (e.target.closest('.card-menu')) return; - navigateTo('session', { id: s.sessionId }); - }); const menuTrigger = card.querySelector('.card-menu-trigger'); const menuDropdown = card.querySelector('.card-menu-dropdown'); menuTrigger.addEventListener('click', (e) => { @@ -119,7 +115,7 @@ registerPage('dashboard', { for (const a of agents) { const card = document.createElement('div'); - card.className = 'card clickable'; + card.className = 'card'; card.innerHTML = `
${a.avatar ? `` : ''}
@@ -137,10 +133,6 @@ registerPage('dashboard', {
`; - card.addEventListener('click', (e) => { - if (e.target.closest('.card-menu')) return; - navigateTo('agent', { id: a.agentId }); - }); const menuTrigger = card.querySelector('.card-menu-trigger'); const menuDropdown = card.querySelector('.card-menu-dropdown'); menuTrigger.addEventListener('click', (e) => { diff --git a/wwwroot/js/pages/session-page.js b/wwwroot/js/pages/session-page.js index 7759b0e..7aa44b2 100644 --- a/wwwroot/js/pages/session-page.js +++ b/wwwroot/js/pages/session-page.js @@ -27,7 +27,6 @@ registerPage('session', { const saveBtn = document.getElementById('sessionSaveBtn'); const cancelBtn = document.getElementById('sessionCancelBtn'); const deleteBtn = document.getElementById('sessionDeleteBtn'); - const openChatBtn = document.getElementById('openChatBtn'); const commandsList = document.getElementById('customCommandsList'); const addCommandBtn = document.getElementById('addCommandBtn'); @@ -41,7 +40,6 @@ registerPage('session', { workspaceEl.value = session.workspace || ''; _sessionImageData = session.image || null; deleteBtn.hidden = false; - openChatBtn.disabled = false; if (session.image) { imagePreview.innerHTML = ``; @@ -52,7 +50,6 @@ registerPage('session', { } else { titleEl.textContent = 'Neue Session'; deleteBtn.hidden = true; - openChatBtn.disabled = true; } // Befehl hinzufügen @@ -151,11 +148,6 @@ registerPage('session', { await apiDeleteSession(sessionId); navigateTo('dashboard'); }); - - // Chat öffnen - openChatBtn.addEventListener('click', () => { - navigateTo('chat', { id: sessionId }); - }); }, destroy() { if (_sessionPasteHandler) {