UI-Refactoring: Transitions vereinheitlicht, Card-Navigation auf Menü umgestellt, openChatBtn entfernt, Chat-Back navigiert zum Dashboard

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 {

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] {

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;

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;
 }

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;
 }
 

wwwroot/index.html

@@ -64,7 +64,6 @@
     <header>
       <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1 id="sessionPageTitle">Neue Session</h1>
-      <button id="openChatBtn" disabled>Chat öffnen</button>
     </header>
     <div class="page-content">
       <div class="form">

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

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', {
           </div>
         </div>
       `;
-      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 = `
         <div class="card-image">${a.avatar ? `<img src="${a.avatar}" alt="">` : ''}</div>
         <div class="card-body">
@@ -137,10 +133,6 @@ registerPage('dashboard', {
           </div>
         </div>
       `;
-      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) => {

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 = `<img src="${session.image}" alt="">`;
@@ -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) {