From c04805f4a577358309a2f247884f813b64fa6741 Mon Sep 17 00:00:00 2001
From: Kanata844 <ta3wata@gmail.com>
Date: Wed, 13 Aug 2025 21:34:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AB=E3=83=9B=E3=83=90=E3=83=BC=E3=81=97=E3=81=9F?=
 =?UTF-8?q?=E3=81=A8=E3=81=8D=E3=81=AB=E8=89=B2=E3=81=8C=E5=A4=89=E3=82=8F?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=80=81=E5=8F=B3?=
 =?UTF-8?q?=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=A7=E3=83=89=E3=83=AD?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=83=80=E3=82=A6=E3=83=B3=E3=83=A1=E3=83=8B?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=82=92=E5=87=BA=E3=81=9B=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat/MessageDropdown.svelte    | 20 ++++
 .../src/components/chat/MessageList.svelte    | 98 ++++++++++++-------
 2 files changed, 84 insertions(+), 34 deletions(-)
 create mode 100644 packages/client/src/components/chat/MessageDropdown.svelte

diff --git a/packages/client/src/components/chat/MessageDropdown.svelte b/packages/client/src/components/chat/MessageDropdown.svelte
new file mode 100644
index 0000000..ac7578e
--- /dev/null
+++ b/packages/client/src/components/chat/MessageDropdown.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  const {
+    onclick_reply,
+    x,
+    y,
+    visible,
+  }: { onclick_reply: () => void; x: number; y: number; visible: boolean } =
+    $props();
+</script>
+
+<ul
+  style={`top: ${y}px; left: ${x}px; visibility: ${visible ? "visible" : "hidden"}`}
+  tabindex="0"
+  role="menu"
+  class="menu dropdown-content bg-base-100 absolute z-[1] w-40 rounded-md border p-2 shadow"
+>
+  <li>
+    <button onclick={onclick_reply}>返信</button>
+  </li>
+</ul>
diff --git a/packages/client/src/components/chat/MessageList.svelte b/packages/client/src/components/chat/MessageList.svelte
index 71398bf..bddf32f 100644
--- a/packages/client/src/components/chat/MessageList.svelte
+++ b/packages/client/src/components/chat/MessageList.svelte
@@ -3,6 +3,7 @@
   import type { Doc } from "@packages/convex/src/convex/_generated/dataModel";
   import { useQuery } from "convex-svelte";
   import { onMount } from "svelte";
+  import MessageDropdown from "./MessageDropdown.svelte";
 
   interface Props {
     channelId: Id<"channels">;
@@ -43,46 +44,75 @@
   onMount(() => {
     scrollToBottom();
   });
+
+  let clientX = $state(0);
+  let clientY = $state(0);
+  let onclick_dropdown_reply = $state(() => {});
+  let visible_dropdown = $state(false);
+  document.addEventListener("click", () => {
+    visible_dropdown = false;
+  });
 </script>
 
 <div bind:this={messagesContainer} class="flex-1 space-y-2 overflow-y-auto p-4">
+  <MessageDropdown
+    x={clientX}
+    y={clientY}
+    visible={visible_dropdown}
+    onclick_reply={onclick_dropdown_reply}
+  />
   {#if messages.data}
     {#each messages.data as message (message._id)}
-      {#if message.parentId && messages.data.find((m) => m._id === message.parentId)}
-        <div class="flex items-center gap-2">
-          <span class="text-base-content/60 text-xs">返信</span>
-          <span class="text-primary font-semibold"
-            >{messagesById.get(message.parentId)?.author}</span
-          >
-          <span class="text-base-content/60 text-xs">
-            {messagesById.get(message.parentId)?.content}
-          </span>
-        </div>
-      {/if}
-      <div class="group relative flex flex-col">
-        <div class="flex items-baseline gap-2">
-          <span class="text-primary font-semibold">{message.author}</span>
-          <span class="text-base-content/60 text-xs">
-            {formatTime(message.createdAt)}
-          </span>
-        </div>
-        <div class="text-base-content ml-0 whitespace-pre-wrap">
-          {message.content}
-        </div>
-        <div
-          class="bg-base-100 absolute top-0 right-4 -translate-y-1/2 rounded-md border opacity-0 group-hover:opacity-100"
-        >
-          <div class="dropdown dropdown-end">
-            <button class="btn btn-ghost btn-sm p-2" tabindex="0"> ⋮ </button>
-            <ul
-              tabindex="0"
-              role="menu"
-              class="menu dropdown-content bg-base-100 z-[1] w-40 rounded-md border p-2 shadow"
+      <div
+        role="button"
+        tabindex="0"
+        class="p-1 hover:bg-sky-900"
+        oncontextmenu={(e) => {
+          e.preventDefault();
+          clientX = e.clientX;
+          clientY = e.clientY;
+          visible_dropdown = true;
+          onclick_dropdown_reply = () => {
+            replyingTo = message;
+          };
+        }}
+      >
+        {#if message.parentId && messages.data.find((m) => m._id === message.parentId)}
+          <div class="flex items-center gap-2">
+            <span class="text-base-content/60 text-xs">返信</span>
+            <span class="text-primary font-semibold"
+              >{messagesById.get(message.parentId)?.author}</span
             >
-              <li>
-                <button onclick={() => (replyingTo = message)}>返信</button>
-              </li>
-            </ul>
+            <span class="text-base-content/60 text-xs">
+              {messagesById.get(message.parentId)?.content}
+            </span>
+          </div>
+        {/if}
+        <div class="group relative flex flex-col">
+          <div class="flex items-baseline gap-2">
+            <span class="text-primary font-semibold">{message.author}</span>
+            <span class="text-base-content/60 text-xs">
+              {formatTime(message.createdAt)}
+            </span>
+          </div>
+          <div class="text-base-content ml-0 whitespace-pre-wrap">
+            {message.content}
+          </div>
+          <div
+            class="bg-base-100 absolute top-4 right-4 -translate-y-1/2 rounded-md border opacity-0 group-hover:opacity-100"
+          >
+            <div class="dropdown dropdown-end">
+              <button class="btn btn-ghost btn-sm p-2" tabindex="0"> ⋮ </button>
+              <ul
+                tabindex="0"
+                role="menu"
+                class="menu dropdown-content bg-base-100 z-[1] w-40 rounded-md border p-2 shadow"
+              >
+                <li>
+                  <button onclick={() => (replyingTo = message)}>返信</button>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>

From 9bf5f7899a7ed6aed6a1a95f8d8593ca673a39f8 Mon Sep 17 00:00:00 2001
From: Kanata844 <ta3wata@gmail.com>
Date: Thu, 14 Aug 2025 17:50:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=82=AD=E3=83=A3=E3=83=A1=E3=83=AB?=
 =?UTF-8?q?=E3=82=B1=E3=83=BC=E3=82=B9=E3=81=AB=E4=BF=AE=E6=AD=A3=E3=80=81?=
 =?UTF-8?q?snippet=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=97=E3=81=9F=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat/MessageDropdown.svelte    | 22 +++++--------
 .../src/components/chat/MessageList.svelte    | 33 +++++++++++--------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/chat/MessageDropdown.svelte b/packages/client/src/components/chat/MessageDropdown.svelte
index ac7578e..41a37f8 100644
--- a/packages/client/src/components/chat/MessageDropdown.svelte
+++ b/packages/client/src/components/chat/MessageDropdown.svelte
@@ -1,20 +1,16 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
+
   const {
-    onclick_reply,
+    children,
     x,
     y,
     visible,
-  }: { onclick_reply: () => void; x: number; y: number; visible: boolean } =
-    $props();
+  }: { children: Snippet; x: number; y: number; visible: boolean } = $props();
 </script>
 
-<ul
-  style={`top: ${y}px; left: ${x}px; visibility: ${visible ? "visible" : "hidden"}`}
-  tabindex="0"
-  role="menu"
-  class="menu dropdown-content bg-base-100 absolute z-[1] w-40 rounded-md border p-2 shadow"
->
-  <li>
-    <button onclick={onclick_reply}>返信</button>
-  </li>
-</ul>
+{#if visible}
+  <div style={`top: ${y}px; left: ${x}px;}`} class="absolute z-10">
+    {@render children()}
+  </div>
+{/if}
diff --git a/packages/client/src/components/chat/MessageList.svelte b/packages/client/src/components/chat/MessageList.svelte
index bddf32f..214b1ca 100644
--- a/packages/client/src/components/chat/MessageList.svelte
+++ b/packages/client/src/components/chat/MessageList.svelte
@@ -47,22 +47,32 @@
 
   let clientX = $state(0);
   let clientY = $state(0);
-  let onclick_dropdown_reply = $state(() => {});
-  let visible_dropdown = $state(false);
+  let visibleDropdown = $state<Id<"messages"> | null>(null);
   document.addEventListener("click", () => {
-    visible_dropdown = false;
+    visibleDropdown = null;
   });
 </script>
 
 <div bind:this={messagesContainer} class="flex-1 space-y-2 overflow-y-auto p-4">
-  <MessageDropdown
-    x={clientX}
-    y={clientY}
-    visible={visible_dropdown}
-    onclick_reply={onclick_dropdown_reply}
-  />
   {#if messages.data}
     {#each messages.data as message (message._id)}
+      {#snippet dropdownContent()}
+        <ul
+          class="menu dropdown-content bg-base-100 absolute z-[1] w-40 rounded-md border p-2 shadow"
+        >
+          <li>
+            <button onclick={() => (replyingTo = message)}>返信</button>
+          </li>
+        </ul>
+      {/snippet}
+      <MessageDropdown
+        x={clientX}
+        y={clientY}
+        visible={visibleDropdown === message._id}
+      >
+        {@render dropdownContent()}
+      </MessageDropdown>
+
       <div
         role="button"
         tabindex="0"
@@ -71,10 +81,7 @@
           e.preventDefault();
           clientX = e.clientX;
           clientY = e.clientY;
-          visible_dropdown = true;
-          onclick_dropdown_reply = () => {
-            replyingTo = message;
-          };
+          visibleDropdown = message._id;
         }}
       >
         {#if message.parentId && messages.data.find((m) => m._id === message.parentId)}