wip: port more component to new ui

2023-08-02 14:48:51 +07:00
parent a85bcf917b
commit babcd8698e
20 changed files with 410 additions and 559 deletions
--- a/src/shared/composer/composer.tsx
+++ b/src/shared/composer/composer.tsx
@@ -14,7 +14,6 @@ import { CancelIcon, LoaderIcon, PlusCircleIcon } from '@shared/icons';
 import { MentionNote } from '@shared/notes';

 import { useComposer } from '@stores/composer';
-import { FULL_RELAYS } from '@stores/constants';

 import { usePublish } from '@utils/hooks/usePublish';
 import { useImageUploader } from '@utils/hooks/useUploader';
@@ -45,7 +44,7 @@ export function Composer() {
      Image.configure({
        HTMLAttributes: {
          class:
-            'rounded-lg w-2/3 h-auto border border-zinc-800 outline outline-2 outline-offset-0 outline-zinc-700 ml-1',
+            'rounded-lg w-2/3 h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1',
        },
      }),
    ],
@@ -54,7 +53,7 @@ export function Composer() {
      attributes: {
        class: twMerge(
          'scrollbar-hide markdown break-all max-h-[500px] overflow-y-auto outline-none pr-2',
-          `${reply.id ? '!min-h-42' : '!min-h-[100px]'}`
+          `${reply.id ? '!min-h-42' : '!min-h-[120px]'}`
        ),
      },
    },
@@ -88,13 +87,13 @@ export function Composer() {
      if (reply.id && reply.pubkey) {
        if (reply.root && reply.root.length > 1) {
          tags = [
-            ['e', reply.root, FULL_RELAYS[0], 'root'],
-            ['e', reply.id, FULL_RELAYS[0], 'reply'],
+            ['e', reply.root, 'wss://relayable.org', 'root'],
+            ['e', reply.id, 'wss://relayable.org', 'reply'],
            ['p', reply.pubkey],
          ];
        } else {
          tags = [
-            ['e', reply.id, FULL_RELAYS[0], 'reply'],
+            ['e', reply.id, 'wss://relayable.org', 'reply'],
            ['p', reply.pubkey],
          ];
        }
@@ -131,7 +130,7 @@ export function Composer() {
    <div className="flex h-full flex-col px-4 pb-4">
      <div className="flex h-full w-full gap-3">
        <div className="flex w-8 shrink-0 items-center justify-center">
-          <div className="h-full w-[2px] bg-zinc-800" />
+          <div className="h-full w-[2px] bg-white/10" />
        </div>
        <div className="w-full">
          <EditorContent
@@ -147,9 +146,9 @@ export function Composer() {
              <button
                type="button"
                onClick={() => clearReply()}
-                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center gap-2 rounded bg-zinc-800 px-2 hover:bg-zinc-700"
+                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2"
              >
-                <CancelIcon className="h-4 w-4 text-zinc-100" />
+                <CancelIcon className="h-4 w-4 text-white" />
              </button>
            </div>
          )}
@@ -159,15 +158,15 @@ export function Composer() {
        <button
          type="button"
          onClick={() => uploadImage()}
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
        >
-          <PlusCircleIcon className="h-5 w-5 text-zinc-500" />
+          <PlusCircleIcon className="h-5 w-5 text-white/50" />
        </button>
        <Button onClick={() => submit()} preset="publish">
          {status === 'loading' ? (
-            <LoaderIcon className="h-4 w-4 animate-spin text-zinc-100" />
+            <LoaderIcon className="h-4 w-4 animate-spin text-white" />
          ) : (
-            'Publish'
+            'Postr'
          )}
        </Button>
      </div>
--- a/src/shared/composer/modal.tsx
+++ b/src/shared/composer/modal.tsx
@@ -1,5 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
 import { useHotkeys } from 'react-hotkeys-hook';

 import { Button } from '@shared/button';
@@ -27,64 +26,39 @@ export function ComposerModal() {
  useHotkeys(COMPOSE_SHORTCUT, () => toggle(true));

  return (
-    <>
-      <Button onClick={() => toggle(true)} preset="small">
-        <ComposeIcon className="h-4 w-4" />
-        Postr
-      </Button>
-      <Transition appear show={open} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative h-min w-full max-w-xl rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-                <div className="flex items-center justify-between px-4 py-4">
-                  <div className="flex items-center gap-2">
-                    {account && <ComposerUser pubkey={account.pubkey} />}
-                    <span>
-                      <ChevronRightIcon
-                        width={14}
-                        height={14}
-                        className="text-zinc-500"
-                      />
-                    </span>
-                    <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-sm font-medium text-zinc-400">
-                      New Post
-                      <ChevronDownIcon className="h-4 w-4" />
-                    </div>
-                  </div>
-                  <button
-                    onClick={closeModal}
-                    type="button"
-                    className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
-                  >
-                    <CancelIcon width={16} height={16} className="text-zinc-500" />
-                  </button>
+    <Dialog.Root open={open}>
+      <Dialog.Trigger asChild>
+        <Button preset="small">
+          <ComposeIcon className="h-4 w-4" />
+          Postr
+        </Button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <div className="relative h-min w-full max-w-2xl rounded-xl bg-white/10">
+            <div className="flex items-center justify-between px-4 py-4">
+              <div className="flex items-center gap-2">
+                {account && <ComposerUser pubkey={account.pubkey} />}
+                <span>
+                  <ChevronRightIcon className="h-4 w-4 text-white/50" />
+                </span>
+                <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-white/10 pl-3 pr-1.5 text-sm font-medium text-white">
+                  New Post
+                  <ChevronDownIcon className="h-4 w-4" />
                </div>
-                <Composer />
-              </Dialog.Panel>
-            </Transition.Child>
+              </div>
+              <Dialog.Close
+                onClick={() => closeModal()}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
+              >
+                <CancelIcon className="h-5 w-5 text-white/50" />
+              </Dialog.Close>
+            </div>
+            <Composer />
          </div>
-        </Dialog>
-      </Transition>
-    </>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
  );
 }
--- a/src/shared/composer/user.tsx
+++ b/src/shared/composer/user.tsx
@@ -9,15 +9,13 @@ export function ComposerUser({ pubkey }: { pubkey: string }) {

  return (
    <div className="flex items-center gap-3">
-      <div className="h-8 w-8 shrink-0 overflow-hidden rounded-md bg-zinc-900">
-        <Image
-          src={user?.picture || user?.image}
-          fallback={DEFAULT_AVATAR}
-          alt={pubkey}
-          className="h-8 w-8 object-cover"
-        />
-      </div>
-      <h5 className="text-base font-semibold leading-none text-zinc-100">
+      <Image
+        src={user?.picture || user?.image}
+        fallback={DEFAULT_AVATAR}
+        alt={pubkey}
+        className="h-8 w-8 shrink-0 rounded-md object-cover"
+      />
+      <h5 className="text-base font-semibold leading-none text-white">
        {user?.nip05 || user?.name || (
          <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
        )}
--- a/src/shared/logout.tsx
+++ b/src/shared/logout.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Transition } from '@headlessui/react';
+import * as Dialog from '@radix-ui/react-dialog';
 import { useQueryClient } from '@tanstack/react-query';
 import { relaunch } from '@tauri-apps/plugin-process';
 import { Fragment, useState } from 'react';
@@ -29,91 +29,63 @@ export function Logout() {
  };

  return (
-    <>
-      <button
-        type="button"
-        onClick={() => openModal()}
-        aria-label="Logout"
-        className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
-      >
-        <LogoutIcon className="h-4 w-4 text-white" />
-      </button>
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-md" />
-          </Transition.Child>
-          <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <Dialog.Panel className="relative flex h-min w-full max-w-lg flex-col rounded-xl border-t border-zinc-800/50 bg-zinc-900">
-                <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-6">
-                  <div className="flex flex-col gap-2">
-                    <div className="flex items-center justify-between">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-semibold leading-none text-zinc-100"
-                      >
-                        Are you sure!
-                      </Dialog.Title>
-                      <button
-                        type="button"
-                        onClick={closeModal}
-                        className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-                      >
-                        <CancelIcon width={20} height={20} className="text-zinc-300" />
-                      </button>
-                    </div>
-                    <Dialog.Description className="text-sm leading-tight text-zinc-400">
-                      <p className="mb-2">
-                        When logout, all local data will be wiped, and restart app then
-                        you need to start onboarding process again when you log in.
-                      </p>
-                      <p>
-                        In the next version, Lume will support multi account, then you can
-                        switch between all account s instead of logout
-                      </p>
-                    </Dialog.Description>
-                  </div>
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button
+          type="button"
+          aria-label="Logout"
+          className="inline-flex h-9 w-9 transform items-center justify-center rounded-md bg-white/20 active:translate-y-1"
+        >
+          <LogoutIcon className="h-4 w-4 text-white" />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal className="relative z-10">
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-6">
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                  <Dialog.Title className="text-lg font-semibold leading-none text-white">
+                    Are you sure!
+                  </Dialog.Title>
+                  <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
+                    <CancelIcon className="h-4 w-4 text-white/50" />
+                  </Dialog.Close>
                </div>
-                <div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
-                  <div className="flex items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={closeModal}
-                      className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => logout()}
-                      className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-3 text-sm font-medium text-zinc-100 hover:bg-red-600"
-                    >
-                      Confirm
-                    </button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+                <Dialog.Description className="text-sm leading-tight text-white/50">
+                  <p className="mb-2">
+                    When logout, all local data will be wiped, and restart app then you
+                    need to start onboarding process again when you log in.
+                  </p>
+                  <p>
+                    In the next version, Lume will support multi account, then you can
+                    switch between all account s instead of logout
+                  </p>
+                </Dialog.Description>
+              </div>
+            </div>
+            <div className="flex h-full w-full flex-col items-end justify-center overflow-y-auto px-5 py-2.5">
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={closeModal}
+                  className="inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium text-white/50 hover:bg-white/10"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={() => logout()}
+                  className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-3 text-sm font-medium text-white hover:bg-red-600"
+                >
+                  Confirm
+                </button>
+              </div>
+            </div>
          </div>
-        </Dialog>
-      </Transition>
-    </>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
  );
 }
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -23,6 +23,7 @@ export function Navigation() {

  return (
    <div className="relative h-full w-[232px] bg-black/80">
+      <div className="absolute left-0 top-0 h-8 w-full" data-tauri-drag-region />
      <div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
        <div className="inline-flex h-8 items-center justify-between px-2 pb-4 pt-14">
          <ComposerModal />
@@ -53,7 +54,7 @@ export function Navigation() {
                    open ? '' : 'rotate-180'
                  )}
                >
-                  <NavArrowDownIcon width={12} height={12} className="text-white/50" />
+                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
                </div>
                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
                  Feeds
@@ -106,7 +107,7 @@ export function Navigation() {
                    open ? '' : 'rotate-180'
                  )}
                >
-                  <NavArrowDownIcon width={12} height={12} className="text-white/50" />
+                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
                </div>
                <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
                  Chats
--- a/src/shared/notes/actions/reaction.tsx
+++ b/src/shared/notes/actions/reaction.tsx
@@ -80,7 +80,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => react('👏')}
-              className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-zinc-600"
+              className="inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
            >
              <img
                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Clapping%20Hands.png"
@@ -91,7 +91,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => react('🤪')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
            >
              <img
                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Tongue.png"
@@ -102,7 +102,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => react('😮')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
            >
              <img
                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Face%20with%20Open%20Mouth.png"
@@ -113,7 +113,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => react('😢')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
            >
              <img
                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png"
@@ -124,7 +124,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
            <button
              type="button"
              onClick={() => react('🤡')}
-              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-zinc-600"
+              className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
            >
              <img
                src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Clown%20Face.png"
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@@ -29,7 +29,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
      onKeyDown={(e) => openThread(e, id)}
      role="button"
      tabIndex={0}
-      className="mb-2 mt-3 cursor-default rounded-lg border-t border-zinc-700/50 bg-zinc-800/50 px-3 py-3"
+      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
    >
      {status === 'loading' ? (
        <NoteSkeleton />
--- a/src/shared/notes/preview/link.tsx
+++ b/src/shared/notes/preview/link.tsx
@@ -27,10 +27,11 @@ export function LinkPreview({ urls }: { urls: string[] }) {
          rel="noreferrer"
        >
          {error ? (
-            <div className="px-3 py-3">
-              <p className="line-clamp-3 break-all text-sm text-zinc-400">
+            <div className="flex flex-col gap-2 px-3 py-3">
+              <p className="text-sm text-white/50">
                Can&apos;t fetch open graph, click to open webpage
              </p>
+              <span className="text-sm leading-none text-white">{domain.hostname}</span>
            </div>
          ) : (
            <>
--- a/src/shared/notification/modal.tsx
+++ b/src/shared/notification/modal.tsx
@@ -57,10 +57,10 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
        </button>
      </Dialog.Trigger>
      <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-[1000px] bg-black bg-opacity-30 backdrop-blur-md data-[state=open]:animate-overlayShow" />
-        <div className="fixed inset-0 z-50 flex min-h-full items-center justify-center data-[state=open]:animate-contentShow">
-          <Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
-            <div className="h-min w-full shrink-0 border-b border-zinc-800 px-5 py-5">
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
+          <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
+            <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
              <div className="flex flex-col gap-1">
                <div className="flex items-center justify-between">
                  <Dialog.Title className="text-lg font-semibold leading-none text-zinc-100">
@@ -96,8 +96,8 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
                data.map((event) => renderItem(event))
              )}
            </div>
-          </Dialog.Content>
-        </div>
+          </div>
+        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -1,6 +1,6 @@
-import { Popover, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
+import * as Popover from '@radix-ui/react-popover';
 import { Link } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';

 import { VerticalDotsIcon } from '@shared/icons';
 import { Image } from '@shared/image';
@@ -9,7 +9,7 @@ import { DEFAULT_AVATAR } from '@stores/constants';

 import { formatCreatedAt } from '@utils/createdAt';
 import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
+import { displayNpub, shortenKey } from '@utils/shortenKey';

 export function User({
  pubkey,
@@ -50,99 +50,94 @@ export function User({
  }

  return (
-    <Popover
-      className={`flex ${size === 'small' ? 'items-center gap-2' : 'items-start gap-3'}`}
-    >
-      <Popover.Button
-        className={`${avatarWidth} ${avatarHeight} relative z-10 shrink-0 overflow-hidden bg-zinc-900`}
-      >
-        <Image
-          src={user?.picture || user?.image}
-          fallback={DEFAULT_AVATAR}
-          alt={pubkey}
-          className={`${
-            isRepost ? 'ring-1 ring-zinc-800' : ''
-          } ${avatarWidth} ${avatarHeight} ${
-            size === 'small' ? 'rounded' : 'rounded-lg'
-          } object-cover`}
-        />
-      </Popover.Button>
+    <Popover.Root>
      <div
-        className={`${isRepost ? 'mt-4' : ''} flex flex-1 items-baseline justify-between`}
+        className={twMerge(
+          'relative flex',
+          size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
+        )}
      >
-        <h5
-          className={`truncate font-semibold leading-none text-zinc-100 ${
-            size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
-          }`}
-        >
-          {user?.nip05?.toLowerCase() ||
-            user?.name ||
-            user?.display_name ||
-            shortenKey(pubkey)}
-        </h5>
-        <div className="inline-flex items-center gap-2">
-          <span className="leading-none text-white/50">{createdAt}</span>
+        <Popover.Trigger asChild>
          <button
            type="button"
-            className="inline-flex h-5 w-max items-center justify-center rounded px-1 hover:bg-white/20"
+            className={`${avatarWidth} ${avatarHeight} relative z-40 shrink-0 overflow-hidden`}
          >
-            <VerticalDotsIcon className="h-4 w-4 rotate-90 transform text-white/50" />
+            <Image
+              src={user?.picture || user?.image}
+              fallback={DEFAULT_AVATAR}
+              alt={pubkey}
+              className={twMerge(
+                `object-cover ${avatarWidth} ${avatarHeight}`,
+                size === 'small' ? 'rounded' : 'rounded-lg',
+                isRepost ? 'ring-1 ring-zinc-800' : ''
+              )}
+            />
          </button>
+        </Popover.Trigger>
+        <div
+          className={twMerge(
+            'flex flex-1 items-baseline justify-between',
+            isRepost ? 'mt-4' : ''
+          )}
+        >
+          <h5
+            className={twMerge(
+              'truncate font-semibold leading-none text-white',
+              size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
+            )}
+          >
+            {user?.nip05?.toLowerCase() ||
+              user?.name ||
+              user?.display_name ||
+              shortenKey(pubkey)}
+          </h5>
+          <span className="leading-none text-white/50">{createdAt}</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 top-10 z-50 mt-3">
-          <div className="w-[250px] overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/90 backdrop-blur-lg">
-            <div className="flex gap-2.5 border-b border-zinc-800 px-3 py-3">
-              <Image
-                src={user?.picture || user?.image}
-                fallback={DEFAULT_AVATAR}
-                alt={pubkey}
-                className="h-11 w-11 shrink-0 rounded-lg object-cover"
-              />
-              <div className="flex flex-1 flex-col gap-2">
-                <div className="inline-flex flex-col gap-1">
-                  <h5 className="text-sm font-semibold leading-none">
-                    {user?.displayName || user?.name || (
-                      <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
-                    )}
-                  </h5>
-                  <span className="max-w-[10rem] truncate text-sm leading-none text-zinc-500">
-                    {user?.nip05 || shortenKey(pubkey)}
-                  </span>
-                </div>
-                <div>
-                  <p className="line-clamp-3 break-all leading-tight text-zinc-100">
-                    {user?.about}
-                  </p>
-                </div>
+      <Popover.Portal>
+        <Popover.Content
+          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl"
+          sideOffset={5}
+        >
+          <div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
+            <Image
+              src={user?.picture || user?.image}
+              fallback={DEFAULT_AVATAR}
+              alt={pubkey}
+              className="h-11 w-11 shrink-0 rounded-lg object-cover"
+            />
+            <div className="flex flex-1 flex-col gap-2">
+              <div className="inline-flex flex-col gap-1">
+                <h5 className="text-sm font-semibold leading-none">
+                  {user?.displayName || user?.name}
+                </h5>
+                <span className="max-w-[10rem] truncate text-sm leading-none text-white/50">
+                  {user?.nip05 || displayNpub(pubkey, 16)}
+                </span>
+              </div>
+              <div>
+                <p className="line-clamp-3 break-all leading-tight text-white">
+                  {user?.about}
+                </p>
              </div>
            </div>
-            <div className="flex items-center gap-2 px-3 py-3">
-              <Link
-                to={`/app/users/${pubkey}`}
-                className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 text-sm font-medium hover:bg-fuchsia-500"
-              >
-                View profile
-              </Link>
-              <Link
-                to={`/app/chats/${pubkey}`}
-                className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 text-sm font-medium hover:bg-fuchsia-500"
-              >
-                Message
-              </Link>
-            </div>
          </div>
-        </Popover.Panel>
-      </Transition>
-    </Popover>
+          <div className="flex items-center gap-2 px-3 py-3">
+            <Link
+              to={`/app/users/${pubkey}`}
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              View profile
+            </Link>
+            <Link
+              to={`/app/chats/${pubkey}`}
+              className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-medium hover:bg-fuchsia-500"
+            >
+              Message
+            </Link>
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
  );
 }