treewide: add real-time messaging via WebSocket

Server:
- Broadcast message:created/updated/deleted events from message routes

Client:
- Subscribe to WebSocket channel in MessageListController
- Handle real-time message events to update UI instantly

UI:
- Improve chat design based on "Clarity" design language
- Add smooth transitions and hover states
- Increase whitespace for better readability

🤖 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/Channel.svelte

@@ -82,25 +82,29 @@
 <div class="flex h-full flex-col">
   <!-- Channel header -->
   <header
-    class="border-subtle flex items-center justify-between border-b px-4 py-3"
+    class="border-subtle flex items-center justify-between border-b px-6 py-4"
   >
-    <div class="flex items-center gap-2">
-      <MdiPound class="text-muted h-5 w-5" />
-      <h1 class="font-semibold">{selectedChannel.data?.name ?? "..."}</h1>
+    <div class="flex items-center gap-3">
+      <MdiPound class="h-5 w-5 opacity-50" />
+      <h1 class="text-base font-semibold">
+        {selectedChannel.data?.name ?? "..."}
+      </h1>
       {#if selectedChannel.data?.description}
-        <span class="text-muted hidden text-sm sm:inline">
+        <span class="hidden text-sm opacity-40 sm:inline">
           — {selectedChannel.data.description}
         </span>
       {/if}
     </div>
 
     <div class="flex items-center gap-2">
       {#if showSearch}
-        <div class="relative">
+        <div
+          class="animate-in fade-in slide-in-from-right-2 relative duration-200"
+        >
           <input
             type="text"
             placeholder="メッセージを検索..."
-            class="input input-sm input-bordered bg-base-200 w-48 pr-8 text-sm"
+            class="input input-sm input-bordered bg-base-200 w-56 pr-8 text-sm transition-all duration-150 focus:w-64"
             bind:value={searchQuery}
             onkeydown={(e) => e.key === "Enter" && handleSearch()}
           />
@@ -112,11 +116,13 @@
         </div>
       {/if}
       <button
-        class="btn btn-ghost btn-sm btn-square"
+        class="btn btn-ghost btn-sm btn-square transition-all duration-150"
         title="検索"
         onclick={() => (showSearch = !showSearch)}
       >
-        <MdiMagnify class="text-muted h-5 w-5" />
+        <MdiMagnify
+          class="h-5 w-5 opacity-50 transition-opacity duration-150 hover:opacity-80"
+        />
       </button>
     </div>
   </header>

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

@@ -46,27 +46,35 @@
 
 <article
   id="message-{message.id}"
-  class="group hover:bg-base-200/50 relative px-4 py-1.5 transition-colors"
+  class="group hover:bg-base-200/30 relative px-6 py-3 transition-all duration-200"
   oncontextmenu={onContextMenu}
 >
   <!-- Reply reference -->
   {#if parentMessage}
-    <div class="text-muted mb-1 flex items-center gap-1.5 text-xs">
+    <div
+      class="mb-2 flex items-center gap-1.5 text-xs opacity-60 transition-opacity duration-150 group-hover:opacity-80"
+    >
       <MdiReply class="h-3 w-3" />
       <span class="text-primary/80 font-medium">{parentMessage.author}</span>
-      <span class="truncate opacity-70">{parentMessage.content}</span>
+      <span class="truncate">{parentMessage.content}</span>
     </div>
   {/if}
 
   <!-- Message header -->
-  <div class="flex items-baseline gap-2">
-    <span class="text-primary font-medium">{message.author}</span>
-    <span class="timestamp">{formatTime(message.createdAt)}</span>
+  <div class="flex items-baseline gap-2.5">
+    <span class="text-primary text-sm font-semibold">{message.author}</span>
+    <span
+      class="text-xs opacity-40 transition-opacity duration-150 group-hover:opacity-60"
+      >{formatTime(message.createdAt)}</span
+    >
     {#if isEdited}
-      <span class="text-muted text-xs">(編集済み)</span>
+      <span
+        class="text-xs opacity-30 transition-opacity duration-150 group-hover:opacity-50"
+        >(編集済み)</span
+      >
     {/if}
     {#if message.pinnedAt}
-      <span class="text-warning flex items-center gap-1 text-xs">
+      <span class="text-warning flex items-center gap-1 text-xs opacity-70">
         <MdiPin class="h-3 w-3" />
         ピン留め
       </span>
@@ -75,9 +83,9 @@
 
   <!-- Message content -->
   {#if isEditing}
-    <div class="mt-2 space-y-2">
+    <div class="mt-3 space-y-2">
       <textarea
-        class="textarea textarea-bordered bg-base-300 w-full text-sm"
+        class="textarea textarea-bordered bg-base-300 w-full text-sm transition-all duration-150"
         value={editedContent}
         oninput={(e) =>
           onEditChange?.(
@@ -96,16 +104,14 @@
       </div>
     </div>
   {:else}
-    <div
-      class="text-base-content/90 text-sm leading-relaxed whitespace-pre-wrap"
-    >
+    <div class="mt-1.5 text-sm leading-relaxed whitespace-pre-wrap opacity-90">
       {message.content}
     </div>
   {/if}
 
   <!-- Attachments -->
   {#if message.attachments && message.attachments.length > 0}
-    <div class="mt-2 space-y-1">
+    <div class="mt-3 space-y-2">
       {#each message.attachments as fileId}
         <FileAttachment {fileId} compact={false} />
       {/each}
@@ -114,7 +120,7 @@
 
   <!-- Vote -->
   {#if message.vote}
-    <div class="mt-2">
+    <div class="mt-3">
       <VoteViewer voteId={message.vote} />
     </div>
   {/if}
@@ -124,14 +130,14 @@
 
   <!-- Actions (hover) -->
   <div
-    class="border-subtle bg-base-100 absolute top-1 right-2 flex gap-0.5 rounded border opacity-0 shadow-sm transition-opacity group-hover:opacity-100"
+    class="border-subtle bg-base-100 absolute top-2 right-4 flex gap-0.5 rounded border opacity-0 shadow-sm transition-all duration-200 group-hover:opacity-100"
   >
     <button
-      class="btn btn-ghost btn-xs btn-square"
+      class="btn btn-ghost btn-xs btn-square transition-colors duration-150"
       onclick={onDotsClick}
       title="メニュー"
     >
-      <MdiDotsVertical class="h-4 w-4" />
+      <MdiDotsVertical class="h-4 w-4 opacity-60" />
     </button>
   </div>
 </article>

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

@@ -32,7 +32,7 @@
   }
 
   $effect(() => {
-    if (controller.messages.data) {
+    if (controller.messagesData.length > 0) {
       setTimeout(scrollToBottom, 0);
     }
   });
@@ -44,9 +44,9 @@
 
 <Modal manager={modalManager} />
 
-<div bind:this={messagesContainer} class="flex-1 space-y-2 overflow-y-auto p-4">
-  {#if controller.messages.data}
-    {#each controller.messages.data as message (message.id)}
+<div bind:this={messagesContainer} class="flex-1 overflow-y-auto scroll-smooth">
+  {#if controller.messagesData.length > 0}
+    {#each controller.messagesData as message (message.id)}
       {#snippet reactionListSnippet()}
         <ReactionList {organizationId} messageId={message.id} />
       {/snippet}
@@ -100,13 +100,13 @@
         onEditCancel={() => controller.cancelEditing()}
       />
     {:else}
-      <div class="text-center text-base-content/60 py-8">
-        まだメッセージがありません
+      <div class="flex h-full items-center justify-center py-16">
+        <p class="text-sm opacity-40">まだメッセージがありません</p>
       </div>
     {/each}
   {:else}
-    <div class="text-base-content/60 py-8 text-center">
-      メッセージを読み込み中...
+    <div class="flex h-full items-center justify-center py-16">
+      <p class="text-sm opacity-40">メッセージを読み込み中...</p>
     </div>
   {/if}
 </div>

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

@@ -7,6 +7,8 @@ import {
   useQuery,
 } from "@/lib/api.svelte";
 import { useAuth } from "@/lib/auth.svelte";
+import { getWebSocket } from "@/lib/websocket";
+import type { WsEvent } from "@/lib/websocket/types";
 
 /**
  * Controller for managing message list state and operations.
@@ -22,6 +24,7 @@ export class MessageListController {
     refetch: () => Promise<void>;
   };
   messagesById: Map<string, Message>;
+  messagesData = $state<Message[]>([]);
 
   // UI State
   clientX = $state(0);
@@ -61,10 +64,17 @@ export class MessageListController {
 
     this.messagesById = $derived(
       new Map(
-        this.messages.data?.map((message: Message) => [message.id, message]),
+        this.messagesData.map((message: Message) => [message.id, message]),
       ),
     );
 
+    // Sync messagesData with query data
+    $effect(() => {
+      if (this.messages.data) {
+        this.messagesData = this.messages.data;
+      }
+    });
+
     this.addReaction = useMutation(
       async (args: { messageId: string; emoji: string }) => {
         const response = await getMessage(api, args.messageId).reactions.post({
@@ -102,6 +112,52 @@ export class MessageListController {
       return unwrapResponse(response);
     });
 
+    // WebSocket integration
+    try {
+      const ws = getWebSocket();
+      ws.subscribe(this.channelId);
+
+      // Handle new messages
+      ws.on("message:created", (event: WsEvent) => {
+        if (
+          event.type === "message:created" &&
+          event.channelId === this.channelId
+        ) {
+          const newMessage = event.message as Message;
+          if (!this.messagesById.get(newMessage.id)) {
+            this.messagesData = [...this.messagesData, newMessage];
+          }
+        }
+      });
+
+      // Handle message updates
+      ws.on("message:updated", (event: WsEvent) => {
+        if (
+          event.type === "message:updated" &&
+          event.channelId === this.channelId
+        ) {
+          const updated = event.message as Message;
+          this.messagesData = this.messagesData.map((m) =>
+            m.id === updated.id ? updated : m,
+          );
+        }
+      });
+
+      // Handle message deletions
+      ws.on("message:deleted", (event: WsEvent) => {
+        if (
+          event.type === "message:deleted" &&
+          event.channelId === this.channelId
+        ) {
+          this.messagesData = this.messagesData.filter(
+            (m) => m.id !== event.messageId,
+          );
+        }
+      });
+    } catch (error) {
+      console.warn("WebSocket not initialized:", error);
+    }
+
     // Close dropdowns on click outside
     document.addEventListener("click", () => {
       this.visibleDropdown = null;

apps/server/src/domains/messages/routes.ts

@@ -8,6 +8,7 @@ import {
   users,
 } from "../../db/schema.ts";
 import { authMiddleware } from "../../middleware/auth.ts";
+import { wsManager } from "../../ws/manager.ts";
 import { requireOrganizationMembership } from "../organizations/permissions.ts";
 import { messagePinRoutes } from "./pins.ts";
 import { messageReactionRoutes } from "./reactions.ts";
@@ -152,6 +153,12 @@ export const messageRoutes = new Elysia({ prefix: "/messages" })
         );
       }
 
+      wsManager.broadcast(body.channelId, {
+        type: "message:created",
+        channelId: body.channelId,
+        message,
+      });
+
       return message;
     },
     {
@@ -215,6 +222,13 @@ export const messageRoutes = new Elysia({ prefix: "/messages" })
         .where(eq(messages.id, params.id))
         .returning();
 
+      wsManager.broadcast(message.channelId, {
+        type: "message:updated",
+        channelId: message.channelId,
+        messageId: params.id,
+        message: updatedMessage,
+      });
+
       return updatedMessage;
     },
     {
@@ -265,6 +279,12 @@ export const messageRoutes = new Elysia({ prefix: "/messages" })
 
       await db.delete(messages).where(eq(messages.id, params.id));
 
+      wsManager.broadcast(message.channelId, {
+        type: "message:deleted",
+        channelId: message.channelId,
+        messageId: params.id,
+      });
+
       return { success: true };
     },
     {