thread styling updates

spacetimedb/src/index.ts

@@ -1159,7 +1159,7 @@ export const init = spacetimedb.init((ctx) => {
   if (!hasServers) {
     const s = ctx.db.server.insert({
       id: 0n,
-      name: "Spacetime Community",
+      name: "Ditchcord",
       owner: undefined,
     });
     ctx.db.channel.insert({

src/chat/components/ThreadView.svelte

@@ -106,38 +106,29 @@
 
 {#if (activeThreadId && activeThread) || pendingThreadParentMessageId}
   <div class="thread-view">
-    <div
-      class="thread-header"
-      style="border-bottom: 1px solid var(--background-accent); padding: 8px; display: flex; justify-content: space-between; align-items: center;"
-    >
-      <div style="display: flex; align-items: center; gap: 8px">
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <span
-          style="color: var(--brand); cursor: pointer; font-size: 1rem;"
-          onclick={handleClose}
-        >
+    <header class="thread-header">
+      <div class="thread-header-left">
+        <button class="icon-btn back-btn" onclick={handleClose} title="Close thread">
           <i class="fas fa-arrow-left"></i>
-        </span>
-        <span style="font-weight: bold; font-size: 0.9rem">
-          {threadName}
-        </span>
+        </button>
+        <span class="thread-title-icon"><i class="fas fa-comment"></i></span>
+        <h2 class="thread-title">{threadName}</h2>
       </div>
       <button
-        class="close-btn"
+        class="icon-btn"
         onclick={handleClose}
         aria-label="Close thread view"
       >
         <i class="fas fa-times"></i>
       </button>
-    </div>
+    </header>
 
     <div
       class="thread-content-wrapper"
       bind:this={scrollContainer}
       onscroll={handleScroll}
     >
-      <div style="position: relative; display: flex; flex-direction: column;">
+      <div class="thread-scroll-inner">
         {#if parentMessage}
           <div class="thread-parent-msg-section">
             <MessageItem
@@ -171,7 +162,8 @@
       </div>
     </div>
 
-    <div class="typing-indicator" style="margin-left: 12px; margin-top: 4px;">
+    <div class="thread-input-container">
+      <div class="typing-indicator">
         {#if chat.typingUsers.length > 0}
           <div class="dots">
             <div class="dot"></div>
@@ -201,14 +193,69 @@
         placeholder="Reply in thread..."
       />
     </div>
+  </div>
 {/if}
 
 <style>
+  .thread-view {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-primary);
+    min-width: 0;
+  }
+
+  .thread-header {
+    height: 48px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+    flex-shrink: 0;
+    background-color: var(--background-primary);
+  }
+
+  .thread-header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .thread-title-icon {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+  }
+
+  .thread-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--header-primary);
+  }
+
+  .back-btn {
+    margin-right: 4px;
+    color: var(--brand);
+  }
+
   .thread-content-wrapper {
     flex: 1;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
+    min-height: 0;
+  }
+
+  .thread-scroll-inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding-top: 16px;
   }
 
   .thread-divider {
@@ -218,7 +265,8 @@
     position: relative;
   }
 
-  .thread-divider::before {
+  .thread-divider::before,
+  .thread-divider::after {
     content: "";
     flex: 1;
     height: 1px;
@@ -233,17 +281,25 @@
     text-transform: uppercase;
   }
 
-  .thread-divider::after {
-    content: "";
-    flex: 1;
-    height: 1px;
-    background-color: var(--background-modifier-accent);
-  }
-
   .thread-parent-msg-section {
     padding-bottom: 8px;
   }
 
+  .thread-input-container {
+    padding: 0 16px 24px 16px;
+    flex-shrink: 0;
+  }
+
+  .typing-indicator {
+    height: 24px;
+    font-size: 0.75rem;
+    color: var(--text-normal);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
   .scroll-pause-indicator {
     position: absolute;
     top: 8px;
@@ -263,10 +319,6 @@
     white-space: nowrap;
   }
 
-  .scroll-pause-indicator.small {
-    padding: 4px 8px;
-  }
-
   .resume-scroll-btn {
     background-color: rgba(255, 255, 255, 0.2);
     border: none;
@@ -282,10 +334,6 @@
     gap: 4px;
   }
 
-  .resume-scroll-btn.small {
-    padding: 2px 6px;
-  }
-
   .resume-scroll-btn:hover {
     background-color: rgba(255, 255, 255, 0.3);
   }