track collapse/expands

src/chat/components/MessageList.svelte

@@ -253,7 +253,7 @@
             <span class="message-time">{chat.formatTime(msg.sent)}</span>
           </div>
           <div class="message-text">
-            <RichText text={msg.text} onLoad={handleContentLoad} />
+            <RichText text={msg.text} messageId={msg.id} onLoad={handleContentLoad} />
           </div>
 
           {#if messageImages.length > 0}

src/chat/components/RichText.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+  import { getContext } from "svelte";
   import LinkPreview from "./LinkPreview.svelte";
+  import type { ChatService } from "../services/chat.svelte";
 
-  let { text, onLoad } = $props<{ text: string, onLoad?: () => void }>();
+  let { text, messageId, onLoad } = $props<{ text: string, messageId: bigint, onLoad?: () => void }>();
+
+  const chat = getContext<ChatService>("chat");
 
   const urlRegex = /(https?:\/\/[^\s]+)/g;
   const parts = $derived(text.split(urlRegex));
@@ -114,17 +118,22 @@
     link: true,
   };
 
-  let userToggledStates = $state<Record<number, boolean>>({});
+  function getEmbedKey(index: number) {
+    return `${messageId}-${index}`;
+  }
 
   function isCollapsed(index: number, type: EmbedType) {
-    if (index in userToggledStates) {
-      return userToggledStates[index];
+    const key = getEmbedKey(index);
+    if (chat.ui.embedCollapsedStates.has(key)) {
+      return chat.ui.embedCollapsedStates.get(key);
     }
     return DEFAULT_COLLAPSED_STATES[type] ?? true;
   }
 
   function toggleEmbed(index: number, type: EmbedType) {
-    userToggledStates[index] = !isCollapsed(index, type);
+    const key = getEmbedKey(index);
+    const currentState = isCollapsed(index, type);
+    chat.ui.embedCollapsedStates.set(key, !currentState);
   }
 
   function onImageLoad(e: Event) {

src/chat/components/ThreadMessageList.svelte

@@ -208,7 +208,7 @@ $effect(() => {
             <span class="user-name">{msgUsername}</span>
           </div>
           <div class="message-text">
-            <RichText text={msg.text} onLoad={handleContentLoad} />
+            <RichText text={msg.text} messageId={msg.id} onLoad={handleContentLoad} />
           </div>
 
           {#if messageImages.length > 0}

src/chat/components/ThreadView.svelte

@@ -89,7 +89,9 @@
         <div class="message-item" style="border-bottom: 1px solid var(--background-accent); opacity: 0.8">
           <div class="message-content">
             <div style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px">Starting thread from:</div>
-            <div class="message-text">{pendingParentMessage.text}</div>
+            <div class="message-text">
+              <RichText text={pendingParentMessage.text} messageId={pendingParentMessage.id} />
+            </div>
           </div>
         </div>
       </div>

src/chat/services/chat.svelte.ts

@@ -194,6 +194,9 @@ export class ChatService {
   }
 
   // Facade Getters for Data
+  get ui() {
+    return this.#ui;
+  }
   get account() {
     return this.#account;
   }

src/chat/services/ui.svelte.ts

@@ -1,3 +1,5 @@
+import { SvelteMap } from "svelte/reactivity";
+
 export class UIService {
   showCreateServerModal = $state(false);
   newServerName = $state("");
@@ -11,4 +13,7 @@ export class UIService {
   showDiscoveryModal = $state(false);
   authError = $state("");
   viewingImageId = $state<bigint | null>(null);
+  
+  // Track collapsed state of embeds by key: `${messageId}-${index}`
+  embedCollapsedStates = new SvelteMap<string, boolean>();
 }