add user popover

src/app/channel/pages/index.page.tsx

@@ -53,7 +53,7 @@ export function Page() {
 
   const now = useRef(new Date());
 
-  useSWRSubscription(channelID && muted && hided ? ['channel', channelID] : null, ([, key], {}: any) => {
+  useSWRSubscription(account && channelID && muted && hided ? ['channel', channelID] : null, ([, key], {}: any) => {
     // subscribe to channel
     const unsubscribe = pool.subscribe(
       [

src/app/chat/pages/index.page.tsx

@@ -27,7 +27,7 @@ export function Page() {
   const setChatMessages = useSetAtom(chatMessagesAtom);
   const resetChatMessages = useResetAtom(chatMessagesAtom);
 
-  useSWRSubscription(pubkey ? ['chat', pubkey] : null, ([, key], {}: any) => {
+  useSWRSubscription(account ? ['chat', pubkey] : null, ([, key], {}: any) => {
     const unsubscribe = pool.subscribe(
       [
         {

src/app/note/components/user/default.tsx

@@ -5,8 +5,10 @@ import { DEFAULT_AVATAR, IMGPROXY_URL } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 import { shortenKey } from '@utils/shortenKey';
 
+import { Popover, Transition } from '@headlessui/react';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { Fragment } from 'react';
 
 dayjs.extend(relativeTime);
 
@@ -14,17 +16,17 @@ export function NoteDefaultUser({ pubkey, time }: { pubkey: string; time: number
   const { user } = useProfile(pubkey);
 
   return (
-    <div className="group relative z-10 flex items-center gap-2.5">
+    <Popover className="relative flex items-center gap-2.5">
-      <div className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+      <Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
           className="h-9 w-9 object-cover"
         />
-      </div>
+      </Popover.Button>
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex flex-col gap-0.5">
-          <h5 className="text-sm font-semibold leading-none group-hover:underline">
+          <h5 className="text-sm font-semibold leading-none">
             {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>}
           </h5>
           <div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
@@ -34,6 +36,59 @@ export function NoteDefaultUser({ pubkey, time }: { pubkey: string; time: number
           </div>
         </div>
       </div>
-    </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute left-0 top-8 z-10 mt-3 w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
+          <div
+            onClick={(e) => e.stopPropagation()}
+            className="w-full max-w-xs overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5"
+          >
+            <div className="flex items-start gap-2.5 border-b border-zinc-800 px-3 py-3">
+              <Image
+                src={`${IMGPROXY_URL}/rs:fit:200:200/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
+                alt={pubkey}
+                className="h-14 w-14 shrink-0 rounded-lg object-cover"
+              />
+              <div className="flex w-full flex-1 flex-col gap-2">
+                <div className="inline-flex w-2/3 flex-col gap-0.5">
+                  <h5 className="text-sm font-semibold leading-none">
+                    {user?.display_name || user?.name || (
+                      <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>
+                    )}
+                  </h5>
+                  <span className="truncate text-sm leading-none text-zinc-500">
+                    {user?.nip05 || shortenKey(pubkey)}
+                  </span>
+                </div>
+                <div>
+                  <p className="line-clamp-3 text-sm leading-tight text-zinc-100">{user?.about}</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 px-3 py-3">
+              <a
+                href={`/app/user?pubkey=${pubkey}`}
+                className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+              >
+                View full profile
+              </a>
+              <a
+                href={`/app/chat?pubkey=${pubkey}`}
+                className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+              >
+                Message
+              </a>
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
   );
 }

src/app/note/components/user/repost.tsx

@@ -3,9 +3,12 @@ import { Image } from '@shared/image';
 import { DEFAULT_AVATAR, IMGPROXY_URL } from '@stores/constants';
 
 import { useProfile } from '@utils/hooks/useProfile';
+import { shortenKey } from '@utils/shortenKey';
 
+import { Popover, Transition } from '@headlessui/react';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { Fragment } from 'react';
 
 dayjs.extend(relativeTime);
 
@@ -13,14 +16,14 @@ export function NoteRepostUser({ pubkey, time }: { pubkey: string; time: number
   const { user } = useProfile(pubkey);
 
   return (
-    <div className="group flex items-center gap-2.5">
+    <Popover className="relative flex items-center gap-2.5">
-      <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+      <Popover.Button className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
           className="h-9 w-9 rounded-md object-cover"
         />
-      </div>
+      </Popover.Button>
       <div className="flex items-baseline gap-1.5 text-sm">
         <h5 className="font-semibold leading-tight group-hover:underline">
           {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>}
@@ -32,6 +35,59 @@ export function NoteRepostUser({ pubkey, time }: { pubkey: string; time: number
         <span className="leading-tight text-zinc-500">·</span>
         <span className="text-zinc-500">{dayjs().to(dayjs.unix(time), true)}</span>
       </div>
-    </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="absolute left-0 top-8 z-10 mt-3 w-screen max-w-sm px-4 sm:px-0 lg:max-w-3xl">
+          <div
+            onClick={(e) => e.stopPropagation()}
+            className="w-full max-w-xs overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input ring-1 ring-black ring-opacity-5"
+          >
+            <div className="flex items-start gap-2.5 border-b border-zinc-800 px-3 py-3">
+              <Image
+                src={`${IMGPROXY_URL}/rs:fit:200:200/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
+                alt={pubkey}
+                className="h-14 w-14 shrink-0 rounded-lg object-cover"
+              />
+              <div className="flex w-full flex-1 flex-col gap-2">
+                <div className="inline-flex w-2/3 flex-col gap-0.5">
+                  <h5 className="text-sm font-semibold leading-none">
+                    {user?.display_name || user?.name || (
+                      <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>
+                    )}
+                  </h5>
+                  <span className="truncate text-sm leading-none text-zinc-500">
+                    {user?.nip05 || shortenKey(pubkey)}
+                  </span>
+                </div>
+                <div>
+                  <p className="line-clamp-3 text-sm leading-tight text-zinc-100">{user?.about}</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 px-3 py-3">
+              <a
+                href={`/app/user?pubkey=${pubkey}`}
+                className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+              >
+                View full profile
+              </a>
+              <a
+                href={`/app/chat?pubkey=${pubkey}`}
+                className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 text-sm font-medium"
+              >
+                Message
+              </a>
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
   );
 }