frontend: standardize base styles and color scheme, rework chat input section

frontend/src/components/Message.vue

@@ -43,8 +43,7 @@ function chatEntryClass(msg) {
     return ['log'];
   } else if (msg.type == 'thread-header') {
     let cls = ['thread'];
-    if (!msg.active) cls.push('thread-open')
-    if (msg.isFork) cls.push('thread-fork');
+    if (!msg.active) cls.push(msg.isFork ? 'thread-fork' : 'thread-closed')
     return cls;
   } else {
     return ['info'];
@@ -247,22 +246,18 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
   width: 100%;
   text-align: center;
   user-select: none;
-  border-top: 1px solid var(--color-border);
 }
 
-.thread.thread-open {
+.thread:hover {
+  border-color: 1px solid var(--color-text);
+}
+
+.thread-closed {
+  border-bottom: 1px solid var(--color-border);
   cursor: pointer;
 }
 
-.thread-open:hover {
-  border-top: 1px solid var(--color-heading);
-}
-
-.thread.thread-fork {
-  border-top: none;
-}
-
-.thread.thread-fork.thread-open {
+.thread-fork {
   width: fit-content;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);

frontend/src/components/TitleBar.vue

@@ -27,6 +27,10 @@
     padding: 0 0.4em;
   }
 
+  .main-header {
+    background-color: var(--color-surface);
+  }
+
   .header-button {
     height: var(--header-height);
     width: var(--header-height);

frontend/src/components/main/Sidebar.vue

@@ -124,6 +124,10 @@
 </template>
 
 <style scoped>
+  .main-sidebar {
+    background-color: var(--color-surface);
+  }
+
   .tab-bar, .tab-group {
     display: flex;
     flex-direction: row;
@@ -147,16 +151,19 @@
     /*flex-grow: 1;*/
   }
 
-  .tab:hover {
-    background-color: var(--color-background-mute);
+  .tab.active, .tab:hover {
+    background: linear-gradient(to bottom, var(--color-surface-strong) 20%, var(--color-surface) 100%);
   }
 
-  .tab.active {
-    color: var(--color-text-heading);
-    background-color: var(--color-background);
-
+  .tab:hover {
+    color: var(--color-heading);
     padding-top: 0;
-    border-top: 3px solid var(--color-active);
+    border-top: 3px solid var(--color-heading);
+  }
+  .tab.active {
+    color: var(--color-highlight);
+    padding-top: 0;
+    border-top: 3px solid var(--color-highlight);
   }
 
   .nav-item {
@@ -177,7 +184,8 @@
   }
 
   .nav-item:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--color-heading);
+    background-color: var(--color-surface-strong);
   }
 
   .nav-item i {
@@ -197,7 +205,7 @@
 
   /* Adapt sidebar to small screens */
   @media (max-width: 480px) {
-    .sidebar {
+    .main-sidebar {
       position: absolute;
       width: 100%;
       height: 100%;