added mute button to channel

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
+    "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@emoji-mart/data': ^1.1.2
   '@emoji-mart/react': ^1.1.1
+  '@radix-ui/react-alert-dialog': ^1.0.3
   '@radix-ui/react-collapsible': ^1.0.2
   '@radix-ui/react-dialog': ^1.0.3
   '@radix-ui/react-dropdown-menu': ^2.0.4
@@ -56,6 +57,7 @@ specifiers:
 dependencies:
   '@emoji-mart/data': 1.1.2
   '@emoji-mart/react': 1.1.1_kyrnz3vmphzqyjjk2ivrm6bcsu
+  '@radix-ui/react-alert-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq
   '@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq
   '@radix-ui/react-dropdown-menu': 2.0.4_zn3vyfk3tbnwebg5ldvieekjaq
@@ -563,6 +565,26 @@ packages:
       '@babel/runtime': 7.21.0
     dev: false
 
+  /@radix-ui/react-alert-dialog/1.0.3_zn3vyfk3tbnwebg5ldvieekjaq:
+    resolution:
+      { integrity: sha512-QXFy7+bhGi0u+paF2QbJeSCHZs4gLMJIPm6sajUamyW0fro6g1CaSGc5zmc4QmK2NlSGUrq8m+UsUqJYtzvXow== }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-dialog': 1.0.3_zn3vyfk3tbnwebg5ldvieekjaq
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.1_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@radix-ui/react-arrow/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution:
       { integrity: sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA== }

src/components/channels/messages/item.tsx

@@ -1,8 +1,8 @@
+import { MuteButton } from '@components/channels/messages/muteButton';
 import { ReplyButton } from '@components/channels/messages/replyButton';
 import { MessageUser } from '@components/chats/messageUser';
 
 import HideIcon from '@assets/icons/hide';
-import MuteIcon from '@assets/icons/mute';
 
 import { memo } from 'react';
 
@@ -25,9 +25,7 @@ const ChannelMessageItem = ({ data }: { data: any }) => {
           <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
             <HideIcon className="h-4 w-4 text-zinc-400" />
           </button>
-          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
-            <MuteIcon className="h-4 w-4 text-zinc-400" />
-          </button>
+          <MuteButton pubkey={data.pubkey} />
         </div>
       </div>
     </div>

src/components/channels/messages/muteButton.tsx

@@ -0,0 +1,85 @@
+import { RelayContext } from '@components/relaysProvider';
+
+import { dateToUnix } from '@utils/getDate';
+
+import MuteIcon from '@assets/icons/mute';
+
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import useLocalStorage from '@rehooks/local-storage';
+import { getEventHash, signEvent } from 'nostr-tools';
+import { useCallback, useContext } from 'react';
+
+export const MuteButton = ({ pubkey }: { pubkey: string }) => {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
+
+  const muteUser = useCallback(() => {
+    const event: any = {
+      content: '',
+      created_at: dateToUnix(),
+      kind: 44,
+      pubkey: activeAccount.pubkey,
+      tags: [['p', pubkey]],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, activeAccount.privkey);
+
+    // publish note
+    pool.publish(event, relays);
+  }, [pubkey, activeAccount.privkey, activeAccount.pubkey, pool, relays]);
+
+  return (
+    <AlertDialog.Root>
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <AlertDialog.Trigger asChild>
+            <Tooltip.Trigger asChild>
+              <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+                <MuteIcon className="h-4 w-4 text-zinc-400" />
+              </button>
+            </Tooltip.Trigger>
+          </AlertDialog.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="select-none rounded-md bg-zinc-800 px-4 py-2 text-sm leading-none text-zinc-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+              sideOffset={4}
+            >
+              Mute user
+              <Tooltip.Arrow className="fill-zinc-800" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
+        <AlertDialog.Content className="fixed left-[50%] top-[50%] z-50 max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-md bg-zinc-900 p-6 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] ring-1 ring-zinc-800 focus:outline-none data-[state=open]:animate-contentShow">
+          <AlertDialog.Title className="m-0 font-medium text-zinc-100">Are you absolutely sure?</AlertDialog.Title>
+          <AlertDialog.Description className="mb-5 mt-4 text-zinc-400">
+            This action cannot be undone. This will permanently mute this user and you will never receive message from
+            this user
+          </AlertDialog.Description>
+          <div className="flex justify-end gap-4">
+            <AlertDialog.Cancel asChild>
+              <button
+                autoFocus={false}
+                className="inline-flex h-9 items-center justify-center rounded px-4 font-medium leading-none text-zinc-200 outline-none hover:bg-zinc-900 focus:shadow-[0_0_0_2px]"
+              >
+                Cancel
+              </button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <button
+                autoFocus={false}
+                onClick={() => muteUser()}
+                className="inline-flex h-9 items-center justify-center rounded bg-red-500 px-4 font-medium leading-none text-white outline-none hover:bg-red-600 focus:shadow-[0_0_0_2px] focus:shadow-red-700"
+              >
+                Yes, mute this user
+              </button>
+            </AlertDialog.Action>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+};

src/components/multiAccounts/activeAccount.tsx

@@ -55,7 +55,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
       relays,
       (event: any) => {
         if (event.tags.length > 0) {
-          insertFollowsToStorage(event.tags);
+          //insertFollowsToStorage(event.tags);
         }
       },
       20000,

src/pages/channels/[id].tsx

@@ -7,6 +7,7 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { channelReplyAtom } from '@stores/channel';
 
+import useLocalStorage from '@rehooks/local-storage';
 import { useResetAtom } from 'jotai/utils';
 import { useRouter } from 'next/router';
 import {
@@ -16,6 +17,7 @@ import {
   ReactPortal,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
@@ -26,30 +28,44 @@ export default function Page() {
   const id: string | string[] = router.query.id || null;
 
   const [messages, setMessages] = useState([]);
+  const [activeAccount]: any = useLocalStorage('activeAccount', {});
   const resetChannelReply = useResetAtom(channelReplyAtom);
 
+  const muted = useRef(new Set());
+
   useEffect(() => {
     // reset channel reply
     resetChannelReply();
     // subscribe event
     const unsubscribe = pool.subscribe(
       [
+        {
+          authors: [activeAccount.pubkey],
+          kinds: [44],
+          since: 0,
+        },
         {
           '#e': [id],
-          kinds: [42],
+          kinds: [42, 43],
           since: 0,
         },
       ],
       relays,
       (event: any) => {
-        setMessages((messages) => [event, ...messages]);
+        if (event.kind === 44) {
+          muted.current = muted.current.add(event.tags[0][1]);
+        } else if (event.kind === 42) {
+          if (!muted.current.has(event.pubkey)) {
+            setMessages((messages) => [event, ...messages]);
+          }
+        }
       }
     );
 
     return () => {
       unsubscribe;
     };
-  }, [id, pool, relays, resetChannelReply]);
+  }, [id, pool, relays, activeAccount.pubkey, resetChannelReply]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">