treewide: simplify useWebSocket API and fix channel button

- useWebSocket now uses $effect internally for auto-cleanup
- API simplified to useWebSocket(eventType, handler)
- Fix CreateChannelButton offset by using icon button

🤖 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

@@ -29,9 +29,8 @@
   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", () => {
+  // WebSocket: refresh unread counts on new messages
+  useWebSocket("message:created", () => {
     unreadManager.fetchUnreadCounts();
   });
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getApiClient, unwrapResponse } from "@/lib/api.svelte";
   import Modal, { ModalManager } from "@/lib/modal/modal.svelte";
+  import MdiPlus from "~icons/mdi/plus";
 
   const api = getApiClient();
 
@@ -40,12 +41,13 @@
 <Modal manager={modalManager} />
 
 <button
-  class="btn btn-primary btn-sm mt-2 w-full"
+  class="btn btn-ghost btn-xs btn-square"
+  title="新しいチャンネル"
   onclick={() => {
     modalManager.dispatch(createChannelModalContent);
   }}
 >
-  + 新しいチャンネル
+  <MdiPlus class="text-muted h-4 w-4" />
 </button>
 
 {#snippet createChannelModalContent()}

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

@@ -2,8 +2,7 @@
   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";
+  import { useWebSocket } from "@/lib/websocket";
 
   interface Props {
     channelId: string;
@@ -12,7 +11,6 @@
   let { channelId }: Props = $props();
 
   const api = getApiClient();
-  const ws = getWebSocket();
 
   const pinnedMessages = useQuery<Message[]>(async () => {
     const response = await api.messages.pins.get({
@@ -29,35 +27,23 @@
     }
   });
 
-  $effect(() => {
-    const handleMessageUpdate = (event: WsEvent) => {
-      if (event.type !== "message:updated" || event.channelId !== channelId) {
-        return;
-      }
+  useWebSocket("message:updated", (event) => {
+    if (event.channelId !== channelId) return;
 
-      const updatedMessage = event.message as Message;
-      const existingIndex = messages.findIndex(
-        (m) => m.id === updatedMessage.id,
-      );
+    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];
-        }
+    if (updatedMessage.pinnedAt) {
+      if (existingIndex !== -1) {
+        messages[existingIndex] = updatedMessage;
       } else {
-        if (existingIndex !== -1) {
-          messages = messages.filter((m) => m.id !== updatedMessage.id);
-        }
+        messages = [...messages, updatedMessage];
       }
-    };
-
-    ws.on("message:updated", handleMessageUpdate);
-
-    return () => {
-      ws.off("message:updated", handleMessageUpdate);
-    };
+    } else {
+      if (existingIndex !== -1) {
+        messages = messages.filter((m) => m.id !== updatedMessage.id);
+      }
+    }
   });
 
   function formatTime(timestamp: Date | number | string) {

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

@@ -17,7 +17,6 @@
   let { messageId }: Props = $props();
 
   const api = getApiClient();
-  const ws = useWebSocket();
 
   const reactions = useQuery<Reaction[]>(async () => {
     const response = await getMessage(api, messageId).reactions.get();
@@ -38,8 +37,8 @@
     }
   });
 
-  // WebSocket subscriptions (auto-cleanup via useWebSocket)
-  ws.on("reaction:added", (event) => {
+  // WebSocket subscriptions (auto-cleanup via $effect)
+  useWebSocket("reaction:added", (event) => {
     if (event.messageId === messageId) {
       const newReaction = event.reaction as Reaction;
       if (!reactionsData.some((r) => r.id === newReaction.id)) {
@@ -48,7 +47,7 @@
     }
   });
 
-  ws.on("reaction:removed", (event) => {
+  useWebSocket("reaction:removed", (event) => {
     if (event.messageId === messageId) {
       reactionsData = reactionsData.filter(
         (r) => !(r.emoji === event.emoji && r.userId === event.userId),

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

@@ -1,4 +1,3 @@
-import { onDestroy } from "svelte";
 import { getWebSocket } from "./index.ts";
 import type { WsEvent } from "./types.ts";
 
@@ -7,99 +6,39 @@ type EventHandler<T extends EventType> = (
   event: Extract<WsEvent, { type: T }>,
 ) => void;
 
-interface Subscription {
-  type: string;
-  handler: (event: WsEvent) => void;
-}
-
 /**
- * Reactive WebSocket hook with automatic cleanup.
- * Handles event subscriptions and channel management.
+ * Subscribe to a WebSocket event with automatic cleanup via $effect.
  *
  * @example
  * ```ts
- * const ws = useWebSocket();
- *
- * // Subscribe to events (auto-cleanup on destroy)
- * ws.on("message:created", (event) => {
+ * useWebSocket("message:created", (event) => {
  *   console.log("New message:", event.message);
  * });
- *
- * // Subscribe to a channel
- * ws.subscribe(channelId);
  * ```
  */
-export function useWebSocket() {
-  const subscriptions: Subscription[] = [];
-  const subscribedChannels: string[] = [];
-
+export function useWebSocket<T extends EventType>(
+  type: T,
+  handler: EventHandler<T>,
+): void {
   let ws: ReturnType<typeof getWebSocket> | null = null;
 
   try {
     ws = getWebSocket();
   } catch {
     console.warn("WebSocket not initialized");
+    return;
   }
 
-  /**
-   * Subscribe to a WebSocket event with automatic cleanup.
-   */
-  function on<T extends EventType>(type: T, handler: EventHandler<T>) {
-    if (!ws) return;
-
-    const wrappedHandler = (event: WsEvent) => {
-      if (event.type === type) {
-        handler(event as Extract<WsEvent, { type: T }>);
-      }
-    };
-
-    ws.on(type, wrappedHandler);
-    subscriptions.push({ type, handler: wrappedHandler });
-  }
-
-  /**
-   * Subscribe to a channel.
-   */
-  function subscribe(channelId: string) {
-    if (!ws) return;
-    ws.subscribe(channelId);
-    subscribedChannels.push(channelId);
-  }
-
-  /**
-   * Unsubscribe from a channel.
-   */
-  function unsubscribe(channelId: string) {
-    if (!ws) return;
-    ws.unsubscribe(channelId);
-    const index = subscribedChannels.indexOf(channelId);
-    if (index !== -1) subscribedChannels.splice(index, 1);
-  }
-
-  // Cleanup on component destroy
-  onDestroy(() => {
-    if (!ws) return;
-
-    // Remove all event listeners
-    for (const { type, handler } of subscriptions) {
-      ws.off(type, handler);
+  const wrappedHandler = (event: WsEvent) => {
+    if (event.type === type) {
+      handler(event as Extract<WsEvent, { type: T }>);
     }
+  };
 
-    // Unsubscribe from all channels
-    for (const channelId of subscribedChannels) {
-      ws.unsubscribe(channelId);
-    }
+  $effect(() => {
+    ws?.on(type, wrappedHandler);
+    return () => {
+      ws?.off(type, wrappedHandler);
+    };
   });
-
-  return {
-    on,
-    subscribe,
-    unsubscribe,
-    get connected() {
-      return ws?.status === "connected";
-    },
-    get status() {
-      return ws?.status ?? "disconnected";
-    },
-  };
 }