treewide: extend real-time updates with proper cleanup

- Add useWebSocket hook for reusable subscriptions with auto-cleanup
- Add WebSocket broadcast for reactions (add/remove)
- Add real-time updates for pinned messages
- Replace polling with event-driven unread count updates in ChannelList
- Add destroy() method to MessageListController for proper cleanup
- Fix event listener accumulation by tracking handlers for removal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: aster-void

apps/desktop/src/components/channels/ChannelList.svelte

@@ -3,6 +3,7 @@
   import { onMount } from "svelte";
   import { getApiClient, unwrapResponse, useQuery } from "@/lib/api.svelte";
   import { UnreadManager } from "@/lib/unread.svelte";
+  import { useWebSocket } from "@/lib/websocket";
   import type { Selection } from "$components/chat/types";
   import DMList from "$components/dms/DMList.svelte";
   import UserSearch from "$components/dms/UserSearch.svelte";
@@ -28,13 +29,14 @@
   const unreadManager = $derived(new UnreadManager(api, organizationId));
   let showUserSearch = $state(false);
 
+  // WebSocket: refresh unread counts on new messages (auto-cleanup)
+  const ws = useWebSocket();
+  ws.on("message:created", () => {
+    unreadManager.fetchUnreadCounts();
+  });
+
   onMount(() => {
     unreadManager.fetchUnreadCounts();
-    const interval = setInterval(
-      () => unreadManager.fetchUnreadCounts(),
-      30000,
-    );
-    return () => clearInterval(interval);
   });
 </script>
 

apps/desktop/src/components/chat/MessageList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Message } from "@apps/api-client";
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import Modal, { ModalManager } from "$lib/modal/modal.svelte";
   import EmojiPalette from "./EmojiPalette.svelte";
   import MessageDropdown from "./MessageDropdown.svelte";
@@ -40,6 +40,10 @@
   onMount(() => {
     scrollToBottom();
   });
+
+  onDestroy(() => {
+    controller.destroy();
+  });
 </script>
 
 <Modal manager={modalManager} />

apps/desktop/src/components/chat/PinnedMessages.svelte

@@ -2,6 +2,8 @@
   import type { Message } from "@apps/api-client";
   import MdiPin from "@/icons/mdi-pin.svelte";
   import { getApiClient, unwrapResponse, useQuery } from "@/lib/api.svelte";
+  import type { WsEvent } from "@/lib/websocket";
+  import { getWebSocket } from "@/lib/websocket";
 
   interface Props {
     channelId: string;
@@ -10,6 +12,7 @@
   let { channelId }: Props = $props();
 
   const api = getApiClient();
+  const ws = getWebSocket();
 
   const pinnedMessages = useQuery<Message[]>(async () => {
     const response = await api.messages.pins.get({
@@ -18,6 +21,45 @@
     return unwrapResponse(response);
   });
 
+  let messages = $state<Message[]>([]);
+
+  $effect(() => {
+    if (pinnedMessages.data) {
+      messages = [...pinnedMessages.data];
+    }
+  });
+
+  $effect(() => {
+    const handleMessageUpdate = (event: WsEvent) => {
+      if (event.type !== "message:updated" || event.channelId !== channelId) {
+        return;
+      }
+
+      const updatedMessage = event.message as Message;
+      const existingIndex = messages.findIndex(
+        (m) => m.id === updatedMessage.id,
+      );
+
+      if (updatedMessage.pinnedAt) {
+        if (existingIndex !== -1) {
+          messages[existingIndex] = updatedMessage;
+        } else {
+          messages = [...messages, updatedMessage];
+        }
+      } else {
+        if (existingIndex !== -1) {
+          messages = messages.filter((m) => m.id !== updatedMessage.id);
+        }
+      }
+    };
+
+    ws.on("message:updated", handleMessageUpdate);
+
+    return () => {
+      ws.off("message:updated", handleMessageUpdate);
+    };
+  });
+
   function formatTime(timestamp: Date | number | string) {
     const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
     return date.toLocaleTimeString("ja-JP", {
@@ -32,14 +74,14 @@
   }
 </script>
 
-{#if pinnedMessages.data && pinnedMessages.data.length > 0}
+{#if messages.length > 0}
   <div class="bg-base-200 border-b p-2">
     <div class="text-warning mb-2 flex items-center gap-2">
       <MdiPin class="h-4 w-4" />
       <span class="text-sm font-semibold">ピン留めされたメッセージ</span>
     </div>
     <div class="space-y-1">
-      {#each pinnedMessages.data as message}
+      {#each messages as message}
         <button
           class="hover:bg-base-300 w-full rounded p-2 text-left transition-colors"
           onclick={() => scrollToMessage(message.id)}

apps/desktop/src/components/chat/ReactionButtons.svelte

@@ -8,6 +8,7 @@
     useMutation,
     useQuery,
   } from "@/lib/api.svelte";
+  import { useWebSocket } from "@/lib/websocket";
 
   interface Props {
     messageId: string;
@@ -16,6 +17,7 @@
   let { messageId }: Props = $props();
 
   const api = getApiClient();
+  const ws = useWebSocket();
 
   const reactions = useQuery<Reaction[]>(async () => {
     const response = await getMessage(api, messageId).reactions.get();
@@ -27,6 +29,33 @@
     return unwrapResponse(response);
   });
 
+  // Local state for real-time updates
+  let reactionsData = $state<Reaction[]>([]);
+
+  $effect(() => {
+    if (reactions.data) {
+      reactionsData = reactions.data;
+    }
+  });
+
+  // WebSocket subscriptions (auto-cleanup via useWebSocket)
+  ws.on("reaction:added", (event) => {
+    if (event.messageId === messageId) {
+      const newReaction = event.reaction as Reaction;
+      if (!reactionsData.some((r) => r.id === newReaction.id)) {
+        reactionsData = [...reactionsData, newReaction];
+      }
+    }
+  });
+
+  ws.on("reaction:removed", (event) => {
+    if (event.messageId === messageId) {
+      reactionsData = reactionsData.filter(
+        (r) => !(r.emoji === event.emoji && r.userId === event.userId),
+      );
+    }
+  });
+
   const addReaction = useMutation(
     async ({ messageId: mid, emoji }: { messageId: string; emoji: string }) => {
       const response = await getMessage(api, mid).reactions.post({
@@ -49,10 +78,7 @@
 
   const reactionsByEmoji = $derived.by(() => {
     const counts = new Map<string, { count: number; me: boolean }>();
-    if (!reactions.data) {
-      return counts;
-    }
-    for (const r of reactions.data) {
+    for (const r of reactionsData) {
       counts.set(r.emoji, {
         count: (counts.get(r.emoji)?.count ?? 0) + 1,
         me: counts.get(r.emoji)?.me || r.userId === me.data?.id,

apps/desktop/src/components/chat/messageList.controller.svelte.ts

@@ -10,6 +10,8 @@ import { useAuth } from "@/lib/auth.svelte";
 import { getWebSocket } from "@/lib/websocket";
 import type { WsEvent } from "@/lib/websocket/types";
 
+type WsHandler = (event: WsEvent) => void;
+
 /**
  * Controller for managing message list state and operations.
  * Handles fetching messages, managing UI state for dropdowns/palettes,
@@ -48,6 +50,10 @@ export class MessageListController {
   pinMessage: ReturnType<typeof useMutation<{ messageId: string }, Message>>;
   unpinMessage: ReturnType<typeof useMutation<{ messageId: string }, Message>>;
 
+  // WebSocket cleanup
+  private wsHandlers: { type: string; handler: WsHandler }[] = [];
+  private ws: ReturnType<typeof getWebSocket> | null = null;
+
   constructor(props: () => { organizationId: string; channelId: string }) {
     const api = getApiClient();
     this.organizationId = props().organizationId;
@@ -114,11 +120,11 @@ export class MessageListController {
 
     // WebSocket integration
     try {
-      const ws = getWebSocket();
-      ws.subscribe(this.channelId);
+      this.ws = getWebSocket();
+      this.ws.subscribe(this.channelId);
 
       // Handle new messages
-      ws.on("message:created", (event: WsEvent) => {
+      const handleCreated: WsHandler = (event) => {
         if (
           event.type === "message:created" &&
           event.channelId === this.channelId
@@ -128,10 +134,10 @@ export class MessageListController {
             this.messagesData = [...this.messagesData, newMessage];
           }
         }
-      });
+      };
 
       // Handle message updates
-      ws.on("message:updated", (event: WsEvent) => {
+      const handleUpdated: WsHandler = (event) => {
         if (
           event.type === "message:updated" &&
           event.channelId === this.channelId
@@ -141,10 +147,10 @@ export class MessageListController {
             m.id === updated.id ? updated : m,
           );
         }
-      });
+      };
 
       // Handle message deletions
-      ws.on("message:deleted", (event: WsEvent) => {
+      const handleDeleted: WsHandler = (event) => {
         if (
           event.type === "message:deleted" &&
           event.channelId === this.channelId
@@ -153,7 +159,17 @@ export class MessageListController {
             (m) => m.id !== event.messageId,
           );
         }
-      });
+      };
+
+      this.ws.on("message:created", handleCreated);
+      this.ws.on("message:updated", handleUpdated);
+      this.ws.on("message:deleted", handleDeleted);
+
+      this.wsHandlers = [
+        { type: "message:created", handler: handleCreated },
+        { type: "message:updated", handler: handleUpdated },
+        { type: "message:deleted", handler: handleDeleted },
+      ];
     } catch (error) {
       console.warn("WebSocket not initialized:", error);
     }
@@ -242,4 +258,16 @@ export class MessageListController {
     await this.messages.refetch();
     this.visibleDropdown = null;
   }
+
+  /**
+   * Cleanup WebSocket subscriptions. Call this when the component unmounts.
+   */
+  destroy() {
+    if (this.ws) {
+      for (const { type, handler } of this.wsHandlers) {
+        this.ws.off(type, handler);
+      }
+      this.ws.unsubscribe(this.channelId);
+    }
+  }
 }

apps/desktop/src/lib/websocket/client.svelte.ts

@@ -85,6 +85,13 @@ export class WebSocketClient {
     this.eventManager.on(eventType, callback);
   }
 
+  /**
+   * Removes an event listener.
+   */
+  off(eventType: string, callback: (event: WsEvent) => void) {
+    this.eventManager.off(eventType, callback);
+  }
+
   private send(data: unknown) {
     if (this.ws?.readyState === WebSocket.OPEN) {
       this.ws.send(JSON.stringify(data));

apps/desktop/src/lib/websocket/events.ts

@@ -16,6 +16,13 @@ export class EventManager {
     this.listeners.get(eventType)?.add(callback);
   }
 
+  /**
+   * Removes an event listener.
+   */
+  off(eventType: string, callback: (event: WsEvent) => void) {
+    this.listeners.get(eventType)?.delete(callback);
+  }
+
   /**
    * Notifies all listeners for a given event.
    */

apps/desktop/src/lib/websocket/index.ts

@@ -25,3 +25,4 @@ export function getWebSocket(): WebSocketClient {
 }
 
 export type { ConnectionStatus, WsEvent } from "./types.ts";
+export { useWebSocket } from "./useWebSocket.svelte.ts";