Sessions: Sidebar, Session-Wechsel, Archivieren-Button, alles session-bezogen

wwwroot/css/style.css

@@ -4,10 +4,16 @@ body {
   background: #222;
   color: #eee;
   display: flex;
-  flex-direction: column;
   height: 100vh;
 }
 
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 body, input, select, button, textarea {
   font-family: monospace;
   font-size: 1em;
@@ -28,6 +34,7 @@ button:hover, select:hover, input:hover, textarea:hover {
 
 button {
   cursor: pointer;
+  line-height: 1.25;
 }
 
 textarea {
@@ -46,6 +53,68 @@ textarea {
   cursor: pointer;
 }
 
+/* ── Sidebar ── */
+
+#sidebar {
+  width: 260px;
+  background: #1a1a1a;
+  border-right: 1px solid #444;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 1em;
+  border-bottom: 1px solid #444;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-header h2 {
+  font-size: 1em;
+}
+
+#sessionList {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.session-item {
+  padding: 1em;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  border-left: 3px solid transparent;
+}
+
+.session-item:hover { background: #333; }
+
+.session-item.active {
+  background: #333;
+  border-left-color: #eee;
+}
+
+.session-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid transparent;
+}
+
+.session-date {
+  color: #888;
+}
+
+.session-rename {
+  background: #222;
+  border: 1px solid #888;
+  outline: none;
+  width: 100%;
+}
+
 /* ── Header ── */
 
 header {
@@ -79,7 +148,7 @@ header h1 {
   background: #111;
   border-bottom: 1px solid #333;
   flex-shrink: 0;
-  min-height: 2em;
+  min-height: 2.5em;
 }
 
 /* ── Chat ── */