From 0fc2128e924874d990b47deab504004d6490ff9b Mon Sep 17 00:00:00 2001
From: Adam Lamers <adamlamers@gmail.com>
Date: Sat, 4 Apr 2026 22:51:27 -0400
Subject: [PATCH] deduplicate logic from message list and thread message list

---
 src/SpacetimeProvider.svelte                 |   5 -
 src/auth/AuthGate.svelte                     |   2 +-
 src/chat/components/MessageItem.svelte       | 371 +++++++++++++++++++
 src/chat/components/MessageList.svelte       | 323 +---------------
 src/chat/components/ThreadMessageList.svelte | 354 ++----------------
 src/config.ts                                |  19 +-
 src/connection.svelte.ts                     |   6 +-
 vite.config.ts                               |   4 +-
 wrangler.jsonc                               |  12 +-
 9 files changed, 436 insertions(+), 660 deletions(-)
 create mode 100644 src/chat/components/MessageItem.svelte

diff --git a/src/SpacetimeProvider.svelte b/src/SpacetimeProvider.svelte
index a401904..b708603 100644
--- a/src/SpacetimeProvider.svelte
+++ b/src/SpacetimeProvider.svelte
@@ -17,11 +17,6 @@
   // We store the db instance in state so it can be updated inside an effect
   let db = $state<any>(null);
 
-  function triggerReconnect() {
-    console.log("SpacetimeProvider: Reconnect requested, incrementing key...");
-    reconnectKey++;
-  }
-
   // Use an effect to handle the connection lifecycle.
   // This avoids state_unsafe_mutation since we are now in an effect.
   $effect(() => {
diff --git a/src/auth/AuthGate.svelte b/src/auth/AuthGate.svelte
index 3c3c2f7..0924fec 100644
--- a/src/auth/AuthGate.svelte
+++ b/src/auth/AuthGate.svelte
@@ -5,7 +5,7 @@
   import { TokenStore, getStdbHost, getStdbDbName } from "../config";
   import SpacetimeProvider from "../SpacetimeProvider.svelte";
 
-  let { children, showServerSettings, onToggleServerSettings } = $props<{
+  let { children, showServerSettings, onToggleServerSettings: _onToggleServerSettings } = $props<{
     children: any,
     showServerSettings: boolean,
     onToggleServerSettings: (_val: boolean) => void
diff --git a/src/chat/components/MessageItem.svelte b/src/chat/components/MessageItem.svelte
new file mode 100644
index 0000000..921345a
--- /dev/null
+++ b/src/chat/components/MessageItem.svelte
@@ -0,0 +1,371 @@
+<script lang="ts">
+  import { getContext, tick } from "svelte";
+  import { portal } from "../../portal";
+  import type { ChatService } from "../services/chat.svelte";
+  import RichText from "./RichText.svelte";
+  import EmojiPicker from "./EmojiPicker.svelte";
+  import Avatar from "./Avatar.svelte";
+  import { getCustomEmojiUrl } from "../utils";
+  import { EMOJIS } from "../emojis";
+  import type * as Types from "../../module_bindings/types";
+
+  let {
+    msg,
+    isThread = false,
+    isHighlighted = false,
+    onContentLoad
+  }: {
+    msg: Types.Message;
+    isThread?: boolean;
+    isHighlighted?: boolean;
+    onContentLoad?: () => void;
+  } = $props();
+
+  const chat = getContext<ChatService>("chat");
+
+  let collapsedImages = $state<boolean>(false);
+  let showPicker = $state(false);
+  let pickerPos = $state<{ x: number, y: number, placement: 'top' | 'bottom' } | null>(null);
+
+  let tooltip = $state<{
+    text: string;
+    x: number;
+    y: number;
+    visible: boolean;
+    targetKey?: string;
+  }>({ text: "", x: 0, y: 0, visible: false });
+  let tooltipTimeout: any;
+
+  const msgUsername = $derived(chat.getUsername(msg.sender));
+  const existingThread = $derived(chat.allThreads.find((t) => t.parentMessageId === msg.id));
+  const reactions = $derived(chat.messageReactions.filter(r => r.messageId === msg.id));
+  const emojiGroups = $derived(reactions.reduce((acc, r) => {
+    const key = r.emoji || `custom:${r.customEmojiId}`;
+    if (!acc[key]) acc[key] = [];
+    acc[key].push(r);
+    return acc;
+  }, {} as Record<string, typeof reactions>));
+  const messageImages = $derived(chat.messageImages.filter(mi => mi.messageId === msg.id));
+
+  $effect(() => {
+    if (tooltip.visible && tooltip.targetKey) {
+      const parts = tooltip.targetKey.split(":");
+      const msgId = BigInt(parts[0]);
+      const emojiKey = parts.slice(1).join(":");
+      const exists = chat.messageReactions.some(r =>
+        r.messageId === msgId && (r.emoji || `custom:${r.customEmojiId}`) === emojiKey
+      );
+      if (!exists) {
+        hideTooltip();
+      }
+    }
+  });
+
+  function handleTooltipShow(e: MouseEvent, key: string, group: Types.MessageReaction[]) {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const usernames = group.map(r => chat.getUsername(r.identity));
+    const maxShow = 3;
+    const displayed = usernames.slice(0, maxShow);
+    const remaining = usernames.length - maxShow;
+
+    let emojiName = "";
+    if (group[0].emoji) {
+      emojiName = EMOJIS.find(e => e.char === group[0].emoji)?.name || "emoji";
+    } else if (group[0].customEmojiId) {
+      emojiName = chat.customEmojis.find(e => e.id === group[0].customEmojiId)?.name || "custom emoji";
+    }
+
+    let text = displayed.join(", ");
+    if (remaining > 0) {
+      text += ` and ${remaining} more`;
+    }
+    text += ` reacted with :${emojiName.replace(/ /g, "-")}:`;
+
+    const targetKey = `${group[0].messageId}:${key}`;
+
+    clearTimeout(tooltipTimeout);
+    tooltipTimeout = setTimeout(() => {
+      tooltip = {
+        text,
+        x: rect.left + rect.width / 2,
+        y: rect.top,
+        visible: true,
+        targetKey
+      };
+    }, 400);
+  }
+
+  function hideTooltip() {
+    clearTimeout(tooltipTimeout);
+    tooltip.visible = false;
+  }
+
+  function toggleImages() {
+    collapsedImages = !collapsedImages;
+    if (onContentLoad) {
+      tick().then(onContentLoad);
+    }
+  }
+
+  function handleGlobalClick(e: MouseEvent) {
+    if (showPicker) {
+      const target = e.target as HTMLElement;
+      if (!target.closest(".add-reaction-wrapper") && !target.closest(".emoji-picker")) {
+        showPicker = false;
+        pickerPos = null;
+      }
+    }
+  }
+
+  function toggleEmojiPicker(e: MouseEvent) {
+    e.stopPropagation();
+    if (showPicker) {
+      showPicker = false;
+      pickerPos = null;
+      return;
+    }
+
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const pickerHeight = 400;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const placement = spaceBelow < pickerHeight ? 'top' : 'bottom';
+
+    pickerPos = {
+      x: isThread ? rect.left : rect.right,
+      y: placement === 'bottom' ? rect.bottom + 8 : rect.top - 8,
+      placement
+    };
+    showPicker = true;
+  }
+
+  function handleImageLoad() {
+    if (onContentLoad) onContentLoad();
+  }
+</script>
+
+<svelte:window onclick={handleGlobalClick} />
+
+<div class="message-item {isHighlighted ? 'active' : ''} {isThread ? 'thread-message-item' : ''}">
+  {#if !isThread}
+    <div class="message-actions-toolbar">
+      {#if chat.isFullyAuthenticated}
+        <div class="add-reaction-wrapper" style="position: relative;">
+          <button
+            class="toolbar-btn"
+            onclick={toggleEmojiPicker}
+            title="Add Reaction"
+            aria-label="Add reaction"
+          >
+            <i class="far fa-smile"></i>
+          </button>
+          {#if showPicker && pickerPos}
+            <div
+              use:portal
+              class="emoji-picker-popover"
+              style="position: fixed; left: {pickerPos.x}px; top: {pickerPos.y}px; transform: {isThread ? '' : 'translateX(-100%)'} {pickerPos.placement === 'top' ? 'translateY(-100%)' : ''}; z-index: 1000;"
+            >
+              <EmojiPicker
+                onSelect={(emoji, customId) => {
+                  chat.handleToggleReaction(msg.id, emoji, customId);
+                  showPicker = false;
+                  pickerPos = null;
+                }}
+              />
+            </div>
+          {/if}
+        </div>
+      {/if}
+      {#if !existingThread && chat.isFullyAuthenticated}
+        <button
+          class="toolbar-btn"
+          onclick={() => chat.handleStartThread(msg)}
+          title="Start Thread"
+          aria-label="Start thread"
+        >
+          <i class="fas fa-comment"></i>
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  <Avatar user={chat.users.find(u => u.identity.isEqual(msg.sender))} size={isThread ? "small" : "medium"} class="message-avatar" />
+
+  <div class="message-content">
+    <div class="message-header">
+      <span class="user-name">{msgUsername}</span>
+      {#if !isThread}
+        <span class="message-time">{chat.formatTime(msg.sent)}</span>
+      {/if}
+    </div>
+
+    <div class="message-text">
+      <RichText text={msg.text} messageId={msg.id} onLoad={handleImageLoad} />
+    </div>
+
+    {#if messageImages.length > 0}
+      <div class="embed-wrapper shadow-box" style="margin-top: 8px;">
+        <button
+          class="embed-header"
+          class:collapsed={collapsedImages}
+          onclick={toggleImages}
+          aria-expanded={!collapsedImages}
+        >
+          <div class="embed-type-label">
+            <i class="fas fa-image" style="color: var(--brand);"></i>
+            {messageImages.length} Image{messageImages.length > 1 ? 's' : ''}
+          </div>
+          <i class="fas fa-chevron-{collapsedImages ? 'down' : 'up'}" style="color: var(--text-muted); font-size: 0.8rem;"></i>
+        </button>
+
+        {#if !collapsedImages}
+          <div class="embed-content-body">
+            <div class="message-images-grid" style="display: flex; flex-wrap: wrap; gap: 8px;">
+              {#each messageImages as mi}
+                {@const image = chat.images.find(img => img.id === mi.imageId)}
+                {#if image}
+                  <!-- svelte-ignore a11y_click_events_have_key_events -->
+                  <div
+                    class="message-image-container"
+                    style="margin-top: 0;"
+                    onclick={() => chat.viewingImageId = image.id}
+                    role="button"
+                    tabindex="0"
+                    onkeydown={(e) => e.key === 'Enter' && (chat.viewingImageId = image.id)}
+                    aria-label="View full resolution image"
+                  >
+                    <img
+                      src={URL.createObjectURL(new Blob([image.data], { type: image.mimeType }))}
+                      alt="Uploaded"
+                      class="message-image"
+                      style="cursor: pointer; max-width: {isThread ? '200px' : '300px'}; max-height: {isThread ? '200px' : '300px'}; border-radius: 4px;"
+                      onload={handleImageLoad}
+                    />
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="reactions-container" style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;">
+      {#each Object.entries(emojiGroups) as [key, group]}
+        {@const hasReacted = group.some(r => r.identity.isEqual(chat.identity))}
+        {@const emoji = group[0].emoji}
+        {@const customEmojiId = group[0].customEmojiId}
+        <button
+          class="reaction-badge {hasReacted ? 'active' : ''}"
+          onclick={() => {
+            chat.handleToggleReaction(msg.id, emoji, customEmojiId);
+            hideTooltip();
+          }}
+          onmouseenter={(e) => handleTooltipShow(e, key, group)}
+          onmouseleave={hideTooltip}
+          aria-label="Reacted with {emoji || 'custom emoji'} {group.length} times"
+        >
+          {#if emoji}
+            <span class="emoji">{emoji}</span>
+          {:else if customEmojiId}
+            {@const customEmoji = chat.customEmojis.find(e => e.id === customEmojiId)}
+            {#if customEmoji}
+              <img class="custom-emoji-reaction" src={getCustomEmojiUrl(customEmoji.data)} alt={customEmoji.name} />
+            {/if}
+          {/if}
+          <span class="count">{group.length}</span>
+        </button>
+      {/each}
+
+      {#if isThread && chat.isFullyAuthenticated}
+        <div class="add-reaction-wrapper" style="position: relative;">
+          <button
+            class="add-reaction-btn"
+            onclick={toggleEmojiPicker}
+            title="Add Reaction"
+            aria-label="Add reaction"
+          >
+            <i class="far fa-smile"></i>
+          </button>
+          {#if showPicker && pickerPos}
+            <div
+              use:portal
+              class="emoji-picker-popover"
+              style="position: fixed; left: {pickerPos.x}px; top: {pickerPos.y}px; transform: {pickerPos.placement === 'top' ? 'translateY(-100%)' : ''}; z-index: 1000;"
+            >
+              <EmojiPicker
+                onSelect={(emoji, customId) => {
+                  chat.handleToggleReaction(msg.id, emoji, customId);
+                  showPicker = false;
+                  pickerPos = null;
+                }}
+              />
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    {#if !isThread && existingThread}
+      {@const threadMessageCount = chat.allMessages.filter(m => m.threadId === existingThread.id).length}
+      <button
+        class="thread-link"
+        onclick={() => (chat.activeThreadId = existingThread.id)}
+        style="margin-top: 2px; padding-left: 12px; border-left: 2px solid var(--background-accent); display: flex; align-items: center; gap: 4px; font-size: 0.75rem; background: none; border-top: none; border-right: none; border-bottom: none; color: var(--brand); cursor: pointer; height: 18px; text-decoration: none;"
+        aria-label="View thread with {threadMessageCount} messages"
+      >
+        <i class="fas fa-reply fa-rotate-180" style="font-size: 0.7rem; text-decoration: none;"></i>
+        <span class="thread-link-text">View Thread ({threadMessageCount})</span>
+      </button>
+    {/if}
+  </div>
+</div>
+
+{#if tooltip.visible}
+  <div
+    use:portal
+    class="message-reaction-tooltip"
+    style="left: {tooltip.x}px; top: {tooltip.y}px;"
+  >
+    {tooltip.text}
+  </div>
+{/if}
+
+<style>
+  .thread-link:hover .thread-link-text {
+    text-decoration: underline;
+  }
+
+  .custom-emoji-reaction {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+    vertical-align: middle;
+  }
+
+  .message-reaction-tooltip {
+    position: fixed;
+    transform: translate(-50%, -100%);
+    margin-top: -8px;
+    background-color: var(--background-floating);
+    color: var(--text-normal);
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    pointer-events: none;
+    z-index: 10000;
+    white-space: nowrap;
+    box-shadow: var(--elevation-stroke), var(--elevation-high);
+    border: 1px solid var(--background-modifier-accent);
+    font-family: inherit;
+  }
+
+  .message-reaction-tooltip::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--background-floating);
+  }
+</style>
\ No newline at end of file
diff --git a/src/chat/components/MessageList.svelte b/src/chat/components/MessageList.svelte
index 78fc1ad..3638201 100644
--- a/src/chat/components/MessageList.svelte
+++ b/src/chat/components/MessageList.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
   import { getContext, tick } from "svelte";
-  import { portal } from "../../portal";
   import type { ChatService } from "../services/chat.svelte";
-  import RichText from "./RichText.svelte";
-  import EmojiPicker from "./EmojiPicker.svelte";
-  import Avatar from "./Avatar.svelte";
-  import { getCustomEmojiUrl } from "../utils";
-  import { EMOJIS } from "../emojis";
-  import type * as Types from "../../module_bindings/types";
+  import MessageItem from "./MessageItem.svelte";
 
   const chat = getContext<ChatService>("chat");
 
@@ -15,111 +9,9 @@
   let scrollContainer = $state<HTMLDivElement | null>(null);
   let lastChannelId = $state<bigint | null>(null);
   let isAtBottom = $state(true);
-  let activePickerMessageId = $state<bigint | null>(null);
   let oldScrollHeight = 0;
   let isPrepending = $state(false);
 
-  let collapsedImages = $state<Record<string, boolean>>({});
-  let pickerPos = $state<{ x: number, y: number, placement: 'top' | 'bottom' } | null>(null);
-
-  let tooltip = $state<{
-    text: string;
-    x: number;
-    y: number;
-    visible: boolean;
-    targetKey?: string;
-  }>({ text: "", x: 0, y: 0, visible: false });
-  let tooltipTimeout: any;
-
-  $effect(() => {
-    if (tooltip.visible && tooltip.targetKey) {
-      const parts = tooltip.targetKey.split(":");
-      const msgId = BigInt(parts[0]);
-      const emojiKey = parts.slice(1).join(":");
-      const exists = chat.messageReactions.some(r =>
-        r.messageId === msgId && (r.emoji || `custom:${r.customEmojiId}`) === emojiKey
-      );
-      if (!exists) {
-        hideTooltip();
-      }
-    }
-  });
-
-  function showTooltip(e: MouseEvent, key: string, group: Types.MessageReaction[]) {
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const usernames = group.map(r => chat.getUsername(r.identity));
-    const maxShow = 3;
-    const displayed = usernames.slice(0, maxShow);
-    const remaining = usernames.length - maxShow;
-
-    let emojiName = "";
-    if (group[0].emoji) {
-      emojiName = EMOJIS.find(e => e.char === group[0].emoji)?.name || "emoji";
-    } else if (group[0].customEmojiId) {
-      emojiName = chat.customEmojis.find(e => e.id === group[0].customEmojiId)?.name || "custom emoji";
-    }
-
-    let text = displayed.join(", ");
-    if (remaining > 0) {
-      text += ` and ${remaining} more`;
-    }
-    text += ` reacted with :${emojiName.replace(/ /g, "-")}:`;
-
-    const targetKey = `${group[0].messageId}:${key}`;
-
-    clearTimeout(tooltipTimeout);
-    tooltipTimeout = setTimeout(() => {
-      tooltip = {
-        text,
-        x: rect.left + rect.width / 2,
-        y: rect.top,
-        visible: true,
-        targetKey
-      };
-    }, 400);
-  }
-
-  function hideTooltip() {
-    clearTimeout(tooltipTimeout);
-    tooltip.visible = false;
-  }
-
-  function toggleImages(messageId: bigint) {
-    const idStr = messageId.toString();
-    collapsedImages[idStr] = !collapsedImages[idStr];
-  }
-
-  function handleGlobalClick(e: MouseEvent) {
-    if (activePickerMessageId !== null) {
-      const target = e.target as HTMLElement;
-      if (!target.closest(".add-reaction-wrapper") && !target.closest(".emoji-picker")) {
-        activePickerMessageId = null;
-        pickerPos = null;
-      }
-    }
-  }
-
-  function toggleEmojiPicker(e: MouseEvent, messageId: bigint) {
-    e.stopPropagation();
-    if (activePickerMessageId === messageId) {
-      activePickerMessageId = null;
-      pickerPos = null;
-      return;
-    }
-
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const pickerHeight = 400;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const placement = spaceBelow < pickerHeight ? 'top' : 'bottom';
-
-    activePickerMessageId = messageId;
-    pickerPos = {
-      x: rect.right,
-      y: placement === 'bottom' ? rect.bottom + 8 : rect.top - 8,
-      placement
-    };
-  }
-
   function handleScroll() {
     if (!scrollContainer) return;
     const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
@@ -178,8 +70,6 @@
   });
 </script>
 
-<svelte:window onclick={handleGlobalClick} />
-
 <div
   class="message-list-container"
   style="flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative;"
@@ -190,179 +80,16 @@
     onscroll={handleScroll}
   >
     {#each chat.channelMessages as msg (msg.id.toString())}
-      {@const msgUsername = chat.getUsername(msg.sender)}
-      {@const existingThread = chat.allThreads.find((t) => t.parentMessageId === msg.id)}
-      {@const reactions = chat.messageReactions.filter(r => r.messageId === msg.id)}
-      {@const emojiGroups = reactions.reduce((acc, r) => {
-        const key = r.emoji || `custom:${r.customEmojiId}`;
-        if (!acc[key]) acc[key] = [];
-        acc[key].push(r);
-        return acc;
-      }, {} as Record<string, typeof reactions>)}
       {@const isHighlighted = (chat.pendingThreadParentMessageId === msg.id) || (chat.activeThread?.parentMessageId === msg.id)}
-      {@const messageImages = chat.messageImages.filter(mi => mi.messageId === msg.id)}
-
-      <div class="message-item {isHighlighted ? 'active' : ''}">
-        <div class="message-actions-toolbar">
-          {#if chat.isFullyAuthenticated}
-            <div class="add-reaction-wrapper" style="position: relative;">
-              <button
-                class="toolbar-btn"
-                onclick={(e) => toggleEmojiPicker(e, msg.id)}
-                title="Add Reaction"
-                aria-label="Add reaction"
-              >
-                <i class="far fa-smile"></i>
-              </button>
-              {#if activePickerMessageId === msg.id && pickerPos}
-                <div
-                  use:portal
-                  class="emoji-picker-popover"
-                  style="position: fixed; left: {pickerPos.x}px; top: {pickerPos.y}px; transform: translateX(-100%) {pickerPos.placement === 'top' ? 'translateY(-100%)' : ''}; z-index: 1000;"
-                >
-                  <EmojiPicker
-                    onSelect={(emoji, customId) => {
-                      chat.handleToggleReaction(msg.id, emoji, customId);
-                      activePickerMessageId = null;
-                      pickerPos = null;
-                    }}
-                    onClose={() => {
-                      activePickerMessageId = null;
-                      pickerPos = null;
-                    }}
-                  />
-                </div>
-              {/if}
-            </div>
-          {/if}
-          {#if !existingThread && chat.isFullyAuthenticated}
-            <button
-              class="toolbar-btn"
-              onclick={() => chat.handleStartThread(msg)}
-              title="Start Thread"
-              aria-label="Start thread"
-            >
-              <i class="fas fa-comment"></i>
-            </button>
-          {/if}
-        </div>
-
-        <Avatar user={chat.users.find(u => u.identity.isEqual(msg.sender))} class="message-avatar" />
-        <div class="message-content">
-          <div class="message-header">
-            <span class="user-name">{msgUsername}</span>
-            <span class="message-time">{chat.formatTime(msg.sent)}</span>
-          </div>
-          <div class="message-text">
-            <RichText text={msg.text} messageId={msg.id} onLoad={handleContentLoad} />
-          </div>
-
-          {#if messageImages.length > 0}
-            <div class="embed-wrapper shadow-box" style="margin-top: 8px;">
-              <button
-                class="embed-header"
-                class:collapsed={collapsedImages[msg.id.toString()]}
-                onclick={() => {
-                  toggleImages(msg.id);
-                  // Tick to wait for DOM update then scroll if needed
-                  tick().then(handleContentLoad);
-                }}
-                aria-expanded={!collapsedImages[msg.id.toString()]}
-              >
-                <div class="embed-type-label">
-                  <i class="fas fa-image" style="color: var(--brand);"></i>
-                  {messageImages.length} Image{messageImages.length > 1 ? 's' : ''}
-                </div>
-                <i class="fas fa-chevron-{collapsedImages[msg.id.toString()] ? 'down' : 'up'}" style="color: var(--text-muted); font-size: 0.8rem;"></i>
-              </button>
-
-              {#if !collapsedImages[msg.id.toString()]}
-                <div class="embed-content-body">
-                  <div class="message-images-grid" style="display: flex; flex-wrap: wrap; gap: 8px;">
-                    {#each messageImages as mi}
-                      {@const image = chat.images.find(img => img.id === mi.imageId)}
-                      {#if image}
-                        <!-- svelte-ignore a11y_click_events_have_key_events -->
-                        <div
-                          class="message-image-container"
-                          style="margin-top: 0;"
-                          onclick={() => chat.viewingImageId = image.id}
-                          role="button"
-                          tabindex="0"
-                          onkeydown={(e) => e.key === 'Enter' && (chat.viewingImageId = image.id)}
-                          aria-label="View full resolution image"
-                        >
-                          <img
-                            src={URL.createObjectURL(new Blob([image.data], { type: image.mimeType }))}
-                            alt="Uploaded"
-                            class="message-image"
-                            style="cursor: pointer; max-width: 300px; max-height: 300px; border-radius: 4px;"
-                            onload={handleContentLoad}
-                          />
-                        </div>
-                      {/if}
-                    {/each}
-                  </div>
-                </div>
-              {/if}
-            </div>
-          {/if}
-
-          <div class="reactions-container" style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;">
-            {#each Object.entries(emojiGroups) as [key, group]}
-              {@const hasReacted = group.some(r => r.identity.isEqual(chat.identity))}
-              {@const emoji = group[0].emoji}
-              {@const customEmojiId = group[0].customEmojiId}
-              <button
-                class="reaction-badge {hasReacted ? 'active' : ''}"
-                onclick={() => {
-                  chat.handleToggleReaction(msg.id, emoji, customEmojiId);
-                  hideTooltip();
-                }}
-                onmouseenter={(e) => showTooltip(e, key, group)}
-                onmouseleave={hideTooltip}
-                aria-label="Reacted with {emoji || 'custom emoji'} {group.length} times"
-              >
-                {#if emoji}
-                  <span class="emoji">{emoji}</span>
-                {:else if customEmojiId}
-                  {@const customEmoji = chat.customEmojis.find(e => e.id === customEmojiId)}
-                  {#if customEmoji}
-                    <img class="custom-emoji-reaction" src={getCustomEmojiUrl(customEmoji.data)} alt={customEmoji.name} />
-                  {/if}
-                {/if}
-                <span class="count">{group.length}</span>
-              </button>
-            {/each}
-          </div>
-          {#if existingThread}
-            {@const threadMessageCount = chat.allMessages.filter(m => m.threadId === existingThread.id).length}
-            <button
-              class="thread-link"
-              onclick={() => (chat.activeThreadId = existingThread.id)}
-              style="margin-top: 2px; padding-left: 12px; border-left: 2px solid var(--background-accent); display: flex; align-items: center; gap: 4px; font-size: 0.75rem; background: none; border-top: none; border-right: none; border-bottom: none; color: var(--brand); cursor: pointer; height: 18px; text-decoration: none;"
-              aria-label="View thread with {threadMessageCount} messages"
-            >
-              <i class="fas fa-reply fa-rotate-180" style="font-size: 0.7rem; text-decoration: none;"></i>
-              <span class="thread-link-text">View Thread ({threadMessageCount})</span>
-            </button>
-          {/if}
-        </div>
-      </div>
+      <MessageItem
+        {msg}
+        {isHighlighted}
+        onContentLoad={handleContentLoad}
+      />
     {/each}
     <div bind:this={messagesEndRef}></div>
   </div>
 
-  {#if tooltip.visible}
-    <div
-      use:portal
-      class="message-reaction-tooltip"
-      style="left: {tooltip.x}px; top: {tooltip.y}px;"
-    >
-      {tooltip.text}
-    </div>
-  {/if}
-
   {#if !isAtBottom && chat.channelMessages.length > 0}
     <div class="scroll-pause-indicator">
       <span>You're viewing older messages</span>
@@ -378,10 +105,6 @@
 </div>
 
 <style>
-  .thread-link:hover .thread-link-text {
-    text-decoration: underline;
-  }
-
   .scroll-pause-indicator {
     position: absolute;
     top: 8px;
@@ -423,38 +146,4 @@
     from { transform: translate(-50%, -20px); opacity: 0; }
     to { transform: translate(-50%, 0); opacity: 1; }
   }
-
-  .custom-emoji-reaction {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-    vertical-align: middle;
-  }
-
-  .message-reaction-tooltip {
-    position: fixed;
-    transform: translate(-50%, -100%);
-    margin-top: -8px;
-    background-color: var(--background-floating);
-    color: var(--text-normal);
-    padding: 6px 12px;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    pointer-events: none;
-    z-index: 10000;
-    white-space: nowrap;
-    box-shadow: var(--elevation-stroke), var(--elevation-high);
-    border: 1px solid var(--background-modifier-accent);
-    font-family: inherit;
-  }
-
-  .message-reaction-tooltip::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 6px solid transparent;
-    border-top-color: var(--background-floating);
-  }
 </style>
diff --git a/src/chat/components/ThreadMessageList.svelte b/src/chat/components/ThreadMessageList.svelte
index faca5e2..80460e3 100644
--- a/src/chat/components/ThreadMessageList.svelte
+++ b/src/chat/components/ThreadMessageList.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
-  import { Identity } from "spacetimedb";
   import { getContext, tick } from "svelte";
-  import { portal } from "../../portal";
   import type { ChatService } from "../services/chat.svelte";
   import type * as Types from "../../module_bindings/types";
-  import RichText from "./RichText.svelte";
-  import EmojiPicker from "./EmojiPicker.svelte";
-  import Avatar from "./Avatar.svelte";
-  import { getCustomEmojiUrl } from "../utils";
-  import { EMOJIS } from "../emojis";
+  import MessageItem from "./MessageItem.svelte";
 
   let {
     threadMessages,
-    users,
+    users: _users,
     identity: _identity,
     images: _images
   }: {
     threadMessages: readonly Types.Message[],
     users: readonly Types.User[],
-    identity: Identity | null,
+    identity: any,
     images: readonly Types.Image[]
   } = $props();
 
@@ -28,108 +22,6 @@
   let scrollContainer = $state<HTMLDivElement | null>(null);
   let lastThreadId = $state<bigint | null>(null);
   let isAtBottom = $state(true);
-  let activePickerMessageId = $state<bigint | null>(null);
-
-  let collapsedImages = $state<Record<string, boolean>>({});
-  let pickerPos = $state<{ x: number, y: number, placement: 'top' | 'bottom' } | null>(null);
-
-  let tooltip = $state<{
-    text: string;
-    x: number;
-    y: number;
-    visible: boolean;
-    targetKey?: string;
-  }>({ text: "", x: 0, y: 0, visible: false });
-  let tooltipTimeout: any;
-
-  $effect(() => {
-    if (tooltip.visible && tooltip.targetKey) {
-      const parts = tooltip.targetKey.split(":");
-      const msgId = BigInt(parts[0]);
-      const emojiKey = parts.slice(1).join(":");
-      const exists = chat.messageReactions.some(r =>
-        r.messageId === msgId && (r.emoji || `custom:${r.customEmojiId}`) === emojiKey
-      );
-      if (!exists) {
-        hideTooltip();
-      }
-    }
-  });
-
-  function showTooltip(e: MouseEvent, key: string, group: Types.MessageReaction[]) {
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const usernames = group.map(r => getUsername(r.identity, users));
-    const maxShow = 3;
-    const displayed = usernames.slice(0, maxShow);
-    const remaining = usernames.length - maxShow;
-
-    let emojiName = "";
-    if (group[0].emoji) {
-      emojiName = EMOJIS.find(e => e.char === group[0].emoji)?.name || "emoji";
-    } else if (group[0].customEmojiId) {
-      emojiName = chat.customEmojis.find(e => e.id === group[0].customEmojiId)?.name || "custom emoji";
-    }
-
-    let text = displayed.join(", ");
-    if (remaining > 0) {
-      text += ` and ${remaining} more`;
-    }
-    text += ` reacted with :${emojiName.replace(/ /g, "-")}:`;
-
-    const targetKey = `${group[0].messageId}:${key}`;
-
-    clearTimeout(tooltipTimeout);
-    tooltipTimeout = setTimeout(() => {
-      tooltip = {
-        text,
-        x: rect.left + rect.width / 2,
-        y: rect.top,
-        visible: true,
-        targetKey
-      };
-    }, 400);
-  }
-
-  function hideTooltip() {
-    clearTimeout(tooltipTimeout);
-    tooltip.visible = false;
-  }
-
-  function toggleImages(messageId: bigint) {
-    const idStr = messageId.toString();
-    collapsedImages[idStr] = !collapsedImages[idStr];
-  }
-
-  function handleGlobalClick(e: MouseEvent) {
-    if (activePickerMessageId !== null) {
-      const target = e.target as HTMLElement;
-      if (!target.closest(".add-reaction-wrapper") && !target.closest(".emoji-picker")) {
-        activePickerMessageId = null;
-        pickerPos = null;
-      }
-    }
-  }
-
-  function toggleEmojiPicker(e: MouseEvent, messageId: bigint) {
-    e.stopPropagation();
-    if (activePickerMessageId === messageId) {
-      activePickerMessageId = null;
-      pickerPos = null;
-      return;
-    }
-
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    const pickerHeight = 400;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const placement = spaceBelow < pickerHeight ? 'top' : 'bottom';
-
-    activePickerMessageId = messageId;
-    pickerPos = {
-      x: rect.left,
-      y: placement === 'bottom' ? rect.bottom + 8 : rect.top - 8,
-      placement
-    };
-  }
 
   function handleScroll() {
     if (!scrollContainer) return;
@@ -138,47 +30,37 @@
     isAtBottom = atBottom;
   }
 
-  const getUsername = (
-    userIdentity: Identity | null,
-    users: readonly Types.User[],
-  ) => {
-    if (!userIdentity) return "Unknown";
-    const user = users.find((u) => u.identity?.isEqual(userIdentity));
-    return user?.name || userIdentity.toHexString().substring(0, 8);
-  };
-function scrollToBottom(smooth = true) {
-  tick().then(() => {
-    threadMessagesEndRef?.scrollIntoView({
-      behavior: smooth ? "smooth" : "auto",
-      block: "end"
+  function scrollToBottom(smooth = true) {
+    tick().then(() => {
+      threadMessagesEndRef?.scrollIntoView({
+        behavior: smooth ? "smooth" : "auto",
+        block: "end"
+      });
+      isAtBottom = true;
     });
-    isAtBottom = true;
-  });
-}
-
-function handleContentLoad() {
-  if (isAtBottom) {
-    scrollToBottom(false);
   }
-}
 
-$effect(() => {
-  // Track threadMessages and activeThreadId
-  const messages = threadMessages;
-  const currentThreadId = chat.activeThreadId;
-
-  if (messages.length > 0 && threadMessagesEndRef) {
-    const isThreadSwitch = currentThreadId !== lastThreadId;
-    lastThreadId = currentThreadId;
-
-    if (isThreadSwitch || isAtBottom) {
-      scrollToBottom(!isThreadSwitch);
+  function handleContentLoad() {
+    if (isAtBottom) {
+      scrollToBottom(false);
     }
   }
-});
-</script>
 
-<svelte:window onclick={handleGlobalClick} />
+  $effect(() => {
+    // Track threadMessages and activeThreadId
+    const messages = threadMessages;
+    const currentThreadId = chat.activeThreadId;
+
+    if (messages.length > 0 && threadMessagesEndRef) {
+      const isThreadSwitch = currentThreadId !== lastThreadId;
+      lastThreadId = currentThreadId;
+
+      if (isThreadSwitch || isAtBottom) {
+        scrollToBottom(!isThreadSwitch);
+      }
+    }
+  });
+</script>
 
 <div
   class="thread-list-container"
@@ -191,151 +73,15 @@ $effect(() => {
     onscroll={handleScroll}
   >
     {#each threadMessages as msg (msg.id.toString())}
-      {@const msgUsername = getUsername(msg.sender, users)}
-      {@const messageImages = chat.messageImages.filter(mi => mi.messageId === msg.id)}
-      {@const reactions = chat.messageReactions.filter(r => r.messageId === msg.id)}
-      {@const emojiGroups = reactions.reduce((acc, r) => {
-        const key = r.emoji || `custom:${r.customEmojiId}`;
-        if (!acc[key]) acc[key] = [];
-        acc[key].push(r);
-        return acc;
-      }, {} as Record<string, typeof reactions>)}
-      <div
-        class="message-item thread-message-item"
-      >
-        <Avatar user={users.find(u => u.identity.isEqual(msg.sender))} size="small" class="message-avatar" />
-        <div class="message-content">
-          <div class="message-header">
-            <span class="user-name">{msgUsername}</span>
-          </div>
-          <div class="message-text">
-            <RichText text={msg.text} messageId={msg.id} onLoad={handleContentLoad} />
-          </div>
-
-          {#if messageImages.length > 0}
-            <div class="embed-wrapper shadow-box" style="margin-top: 8px;">
-              <button
-                class="embed-header"
-                class:collapsed={collapsedImages[msg.id.toString()]}
-                onclick={() => {
-                  toggleImages(msg.id);
-                  tick().then(handleContentLoad);
-                }}
-                aria-expanded={!collapsedImages[msg.id.toString()]}
-              >
-                <div class="embed-type-label">
-                  <i class="fas fa-image" style="color: var(--brand);"></i>
-                  {messageImages.length} Image{messageImages.length > 1 ? 's' : ''}
-                </div>
-                <i class="fas fa-chevron-{collapsedImages[msg.id.toString()] ? 'down' : 'up'}" style="color: var(--text-muted); font-size: 0.8rem;"></i>
-              </button>
-
-              {#if !collapsedImages[msg.id.toString()]}
-                <div class="embed-content-body">
-                  <div class="message-images-grid" style="display: flex; flex-wrap: wrap; gap: 8px;">
-                    {#each messageImages as mi}
-                      {@const image = chat.images.find(img => img.id === mi.imageId)}
-                      {#if image}
-                        <!-- svelte-ignore a11y_click_events_have_key_events -->
-                        <div
-                          class="message-image-container"
-                          style="margin-top: 0;"
-                          onclick={() => chat.viewingImageId = image.id}
-                          role="button"
-                          tabindex="0"
-                          onkeydown={(e) => e.key === 'Enter' && (chat.viewingImageId = image.id)}
-                          aria-label="View full resolution image"
-                        >
-                          <img
-                            src={URL.createObjectURL(new Blob([image.data], { type: image.mimeType }))}
-                            alt="Uploaded"
-                            class="message-image"
-                            style="cursor: pointer; max-width: 200px; max-height: 200px; border-radius: 4px;"
-                            onload={handleContentLoad}
-                          />
-                        </div>
-                      {/if}
-                    {/each}
-                  </div>
-                </div>
-              {/if}
-            </div>
-          {/if}
-          <div class="reactions-container" style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;">
-            {#each Object.entries(emojiGroups) as [key, group]}
-              {@const hasReacted = group.some(r => r.identity.isEqual(chat.identity))}
-              {@const emoji = group[0].emoji}
-              {@const customEmojiId = group[0].customEmojiId}
-              <button
-                class="reaction-badge {hasReacted ? 'active' : ''}"
-                onclick={() => {
-                  chat.handleToggleReaction(msg.id, emoji, customEmojiId);
-                  hideTooltip();
-                }}
-                onmouseenter={(e) => showTooltip(e, key, group)}
-                onmouseleave={hideTooltip}
-                aria-label="Reacted with {emoji || 'custom emoji'} {group.length} times"
-              >
-                {#if emoji}
-                  <span class="emoji">{emoji}</span>
-                {:else if customEmojiId}
-                  {@const customEmoji = chat.customEmojis.find(e => e.id === customEmojiId)}
-                  {#if customEmoji}
-                    <img class="custom-emoji-reaction" src={getCustomEmojiUrl(customEmoji.data)} alt={customEmoji.name} />
-                  {/if}
-                {/if}
-                <span class="count">{group.length}</span>
-              </button>
-            {/each}
-
-            {#if chat.isFullyAuthenticated}
-              <div class="add-reaction-wrapper" style="position: relative;">
-                <button
-                  class="add-reaction-btn"
-                  onclick={(e) => toggleEmojiPicker(e, msg.id)}
-                  title="Add Reaction"
-                  aria-label="Add reaction"
-                >
-                  <i class="far fa-smile"></i>
-                </button>
-                {#if activePickerMessageId === msg.id && pickerPos}
-                  <div
-                    use:portal
-                    class="emoji-picker-popover"
-                    style="position: fixed; left: {pickerPos.x}px; top: {pickerPos.y}px; transform: {pickerPos.placement === 'top' ? 'translateY(-100%)' : ''}; z-index: 1000;"
-                  >
-                    <EmojiPicker
-                      onSelect={(emoji, customId) => {
-                        chat.handleToggleReaction(msg.id, emoji, customId);
-                        activePickerMessageId = null;
-                        pickerPos = null;
-                      }}
-                      onClose={() => {
-                        activePickerMessageId = null;
-                        pickerPos = null;
-                      }}
-                    />
-                  </div>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        </div>
-      </div>
+      <MessageItem
+        {msg}
+        isThread={true}
+        onContentLoad={handleContentLoad}
+      />
     {/each}
     <div bind:this={threadMessagesEndRef}></div>
   </div>
 
-  {#if tooltip.visible}
-    <div
-      use:portal
-      class="message-reaction-tooltip"
-      style="left: {tooltip.x}px; top: {tooltip.y}px;"
-    >
-      {tooltip.text}
-    </div>
-  {/if}
-
   {#if !isAtBottom && threadMessages.length > 0}
     <div class="scroll-pause-indicator small">
       <span>Older messages</span>
@@ -401,38 +147,4 @@ $effect(() => {
     from { transform: translate(-50%, -10px); opacity: 0; }
     to { transform: translate(-50%, 0); opacity: 1; }
   }
-
-  .custom-emoji-reaction {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-    vertical-align: middle;
-  }
-
-  .message-reaction-tooltip {
-    position: fixed;
-    transform: translate(-50%, -100%);
-    margin-top: -8px;
-    background-color: var(--background-floating);
-    color: var(--text-normal);
-    padding: 6px 12px;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    pointer-events: none;
-    z-index: 10000;
-    white-space: nowrap;
-    box-shadow: var(--elevation-stroke), var(--elevation-high);
-    border: 1px solid var(--background-modifier-accent);
-    font-family: inherit;
-  }
-
-  .message-reaction-tooltip::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 6px solid transparent;
-    border-top-color: var(--background-floating);
-  }
 </style>
diff --git a/src/config.ts b/src/config.ts
index a62cfa5..cdd84aa 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -5,9 +5,16 @@ import { connectionState } from "./connection.svelte";
 
 export { HOST_KEY, DB_NAME_KEY, getEnv };
 
-const normalizeHost = (host: string) => {
+export const normalizeHost = (host: string) => {
   try {
-    const url = new URL(host.includes("://") ? host : `https://${host}`);
+    // If it's localhost and has no protocol, default to ws:// instead of wss:// or https://
+    const defaultProtocol =
+      host.includes("localhost") || host.includes("127.0.0.1")
+        ? "ws://"
+        : "wss://";
+    const url = new URL(
+      host.includes("://") ? host : `${defaultProtocol}${host}`,
+    );
     return url.origin.replace(/^http/, "ws"); // Ensure ws/wss
   } catch {
     return host.trim().replace(/\/+$/, ""); // Fallback
@@ -122,15 +129,15 @@ class ConnectionManager {
       this.#reconnectTimeout = null;
       if (this.#isStopped) return;
       this.#retryCount++;
-      console.log("ConnectionManager: Reconnect delay reached. Reloading window...");
+      console.log(
+        "ConnectionManager: Reconnect delay reached. Reloading window...",
+      );
       window.location.reload();
     }, delay);
   };
 }
 
-export const connectionBuilder = (
-  oidcToken?: string,
-) => {
+export const connectionBuilder = (oidcToken?: string) => {
   const host = getStdbHost();
   const dbName = getStdbDbName();
 
diff --git a/src/connection.svelte.ts b/src/connection.svelte.ts
index e677480..7eb12c4 100644
--- a/src/connection.svelte.ts
+++ b/src/connection.svelte.ts
@@ -1,6 +1,10 @@
 // src/connection.svelte.ts
 
-export type ConnectionStatus = "idle" | "connecting" | "connected" | "disconnected";
+export type ConnectionStatus =
+  | "idle"
+  | "connecting"
+  | "connected"
+  | "disconnected";
 
 class ConnectionState {
   status = $state<ConnectionStatus>("idle");
diff --git a/vite.config.ts b/vite.config.ts
index faa54f2..7bc1f97 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   plugins: [
     process.env.VITE_USE_SSL === "true" ? basicSsl() : [],
     svelte(),
-    cloudflare()
+    cloudflare(),
   ],
   // Prevent vite from obscuring rust errors
   clearScreen: false,
@@ -20,4 +20,4 @@ export default defineConfig({
     port: process.env.VITE_USE_SSL === "true" ? 5174 : 5173,
     host: "0.0.0.0",
   },
-});
\ No newline at end of file
+});
diff --git a/wrangler.jsonc b/wrangler.jsonc
index 55a905a..71e1dc5 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -3,16 +3,14 @@
   "name": "ditchcord",
   "compatibility_date": "2026-04-04",
   "observability": {
-    "enabled": true
+    "enabled": true,
   },
   "assets": {
     "directory": "dist",
-    "not_found_handling": "single-page-application"
+    "not_found_handling": "single-page-application",
   },
-  "compatibility_flags": [
-    "nodejs_compat"
-  ],
+  "compatibility_flags": ["nodejs_compat"],
   "build": {
-      "command": "pnpm run build"
-  }
+    "command": "pnpm run build",
+  },
 }