From a37cd911918f400353b6038160bbb64b8eb50de9 Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Tue, 25 Feb 2025 10:51:24 -0500
Subject: [PATCH] feat: Only allow one context menu to be open at a time

---
 src/lib/components/message.svelte             | 12 +++++++---
 .../(main)/channel/[channel]/+page.svelte     | 22 +++++++++++++++++--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
index 0331006..ef5af54 100644
--- a/src/lib/components/message.svelte
+++ b/src/lib/components/message.svelte
@@ -4,7 +4,13 @@
   import renderMarkdown from '$lib/functions/renderMarkdown';
   import * as ContextMenu from '$lib/components/ui/context-menu';
 
-  const { message, imageSrc, user, timestamp, uid }: TypeMessage = $props();
+  interface Props {
+    open: boolean;
+    closeDialogs: (i: number) => void;
+    i: number;
+  }
+
+  let { message, imageSrc, user, timestamp, uid, open = $bindable(), closeDialogs, i }: TypeMessage & Props = $props();
   let epoch: number = Math.floor(timestamp.getTime() / 1000);
 
   function copy(itemName: string, content: string | number) {
@@ -21,8 +27,8 @@
   }
 </script>
 
-<ContextMenu.Root>
-  <ContextMenu.Trigger class="flex w-full p-2 hover:bg-zinc-200 dark:hover:bg-stone-900">
+<ContextMenu.Root bind:open>
+  <ContextMenu.Trigger class="flex w-full p-2 hover:bg-zinc-200 dark:hover:bg-stone-900" oncontextmenu={() => closeDialogs(i)}>
     <div class="avatar mr-2 rounded-sm">
       <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
         <img src={imageSrc} alt="Profile image for {user}" />
diff --git a/src/routes/(main)/channel/[channel]/+page.svelte b/src/routes/(main)/channel/[channel]/+page.svelte
index f78bd93..bc7f90e 100644
--- a/src/routes/(main)/channel/[channel]/+page.svelte
+++ b/src/routes/(main)/channel/[channel]/+page.svelte
@@ -20,17 +20,26 @@
   const channel: string = $derived(page.params.channel);
   let textareaRef: HTMLTextAreaElement | undefined = $state();
   let formref: HTMLFormElement | undefined = $state();
+  let contextMenus: boolean[] = $state([]);
 
   function askNotificationPermission() {
     // Check if the browser supports notifications
     if (!('Notification' in window)) {
-      alert('This browser does not support notifications.');
+      alert('This browser does not support notifications. Sorry :(');
       return;
     }
 
     Notification.requestPermission();
   }
 
+  function closeDialogs(i: number) {
+    for (let x = 0; x < contextMenus.length; x++) {
+      if (x !== i) {
+        contextMenus[x] = false;
+      }
+    }
+  }
+
   function submit(event: Event) {
     event.preventDefault();
     if (msg.length <= 2000) {
@@ -71,7 +80,16 @@
 
 {#snippet message(messages: TypeMessage[])}
   {#each messages as message, i}
-    <Message imageSrc={message.imageSrc} user={message.user} message={message.message} timestamp={message.timestamp} uid={message.uid} />
+    <Message
+      bind:open={contextMenus[i]}
+      imageSrc={message.imageSrc}
+      user={message.user}
+      message={message.message}
+      timestamp={message.timestamp}
+      uid={message.uid}
+      {closeDialogs}
+      {i}
+    />
   {/each}
 {/snippet}