Frontend style refactoring

wwwroot/index.html

@@ -7,6 +7,11 @@
   <link rel="stylesheet" href="css/theme.css">
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/nav.css">
+  <link rel="stylesheet" href="css/form.css">
+  <link rel="stylesheet" href="css/dashboard.css">
+  <link rel="stylesheet" href="css/chat.css">
+  <link rel="stylesheet" href="css/placeholder.css">
 </head>
 <body>
 
@@ -35,27 +40,21 @@
       <div class="section-header">
         <h2>Agents</h2>
       </div>
-      <div class="card-grid" id="agentCards">
-        <div class="card placeholder">
-          <div class="card-icon">🤖</div>
-          <div class="card-title">Kommt bald</div>
-          <div class="card-sub">Agents werden hier aufgelistet</div>
-        </div>
-      </div>
+      <div class="card-grid" id="agentCards"></div>
     </section>
   </div>
 </template>
 
 <template id="tpl-session">
-  <div class="page session-edit-page">
-    <header class="session-header">
+  <div class="page form-page">
+    <header>
       <button class="back-btn" data-page="dashboard">←</button>
-      <h1 id="sessionPageTitle">Session</h1>
-      <button id="openChatBtn" hidden>Chat öffnen</button>
+      <h1 id="sessionPageTitle">Neue Session</h1>
+      <button id="openChatBtn" disabled>Chat öffnen</button>
     </header>
-    <div class="agent-form">
-      <div class="agent-avatar-section">
-        <div class="agent-avatar-preview" id="sessionImagePreview">?</div>
+    <div class="form">
+      <div class="avatar-section">
+        <div class="avatar-preview" id="sessionImagePreview">?</div>
         <input type="file" id="sessionImageInput" accept="image/*" hidden>
         <button id="sessionImageBtn">Bild ändern</button>
         <button id="sessionImageClearBtn">Entfernen</button>
@@ -70,7 +69,7 @@
       <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
       <label>Workspace</label>
       <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
-      <div class="agent-form-actions">
+      <div class="form-actions">
         <button id="sessionSaveBtn">Speichern</button>
         <button id="sessionCancelBtn">Abbrechen</button>
         <button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
@@ -79,31 +78,15 @@
   </div>
 </template>
 
-<template id="tpl-chat">
-  <div class="page session-page">
-    <header class="session-header">
-      <button class="back-btn" id="chatBackBtn">←</button>
-      <h1 id="sessionTitle">Session</h1>
-      <button class="header-btn" id="archiveBtn">Archivieren</button>
-    </header>
-    <div class="meta-bar" id="meta"></div>
-    <div id="chat"></div>
-    <div class="input-area">
-      <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
-      <button id="send">Senden</button>
-    </div>
-  </div>
-</template>
-
 <template id="tpl-agent">
-  <div class="page agent-page">
-    <header class="session-header">
+  <div class="page form-page">
+    <header>
       <button class="back-btn" data-page="dashboard">←</button>
       <h1 id="agentPageTitle">Neuer Agent</h1>
     </header>
-    <div class="agent-form">
-      <div class="agent-avatar-section">
-        <div class="agent-avatar-preview" id="avatarPreview">?</div>
+    <div class="form">
+      <div class="avatar-section">
+        <div class="avatar-preview" id="avatarPreview">?</div>
         <input type="file" id="avatarInput" accept="image/*" hidden>
         <button id="avatarBtn">Avatar ändern</button>
         <button id="avatarClearBtn">Entfernen</button>
@@ -121,7 +104,7 @@
       <textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
       <label>Instructions</label>
       <textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
-      <div class="agent-form-actions">
+      <div class="form-actions">
         <button id="agentSaveBtn">Speichern</button>
         <button id="agentCancelBtn">Abbrechen</button>
         <button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
@@ -130,13 +113,29 @@
   </div>
 </template>
 
+<template id="tpl-chat">
+  <div class="page chat-page">
+    <header>
+      <button class="back-btn" id="chatBackBtn">←</button>
+      <h1 id="sessionTitle">-</h1>
+      <button class="header-btn" id="archiveBtn">Archivieren</button>
+    </header>
+    <div class="meta-bar" id="meta"></div>
+    <div id="chat"></div>
+    <div class="input-area">
+      <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
+      <button id="send">Senden</button>
+    </div>
+  </div>
+</template>
+
 <template id="tpl-settings">
   <div class="page settings-page">
-    <header class="session-header">
+    <header>
       <button class="back-btn" data-page="dashboard">←</button>
       <h1>Einstellungen</h1>
     </header>
-    <div class="placeholder-page">
+    <div class="placeholder-content">
       <div class="placeholder-icon">⚙️</div>
       <h2>Einstellungen</h2>
       <p>Hier können diverse Einstellungen getroffen werden.</p>