clean up messy code

2024-09-14 09:13:31 +00:00 · 2023-09-18 09:50:15 +07:00 · 2023-09-18 09:50:15 +07:00 · 53aa13c8aa
commit 53aa13c8aa
parent 13f5190ba1
31 changed files with 256 additions and 373 deletions
--- a/src/app/auth/complete.tsx
+++ b/src/app/auth/complete.tsx
@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';

 export function CompleteScreen() {
  const navigate = useNavigate();
-  const [count, setCount] = useState(3);
+  const [count, setCount] = useState(5);

  useEffect(() => {
    let counter: NodeJS.Timeout;
@ -26,7 +26,6 @@ export function CompleteScreen() {
      <div className="mx-auto flex max-w-xl flex-col gap-1.5 text-center">
        <h1 className="text-2xl font-light leading-none text-white">
          <span className="font-semibold">You&apos;re ready</span>, redirecting in {count}
-          ...
        </h1>
        <p className="text-white/70">
          Thank you for using Lume. Lume doesn&apos;t use telemetry. If you encounter any
--- a/src/app/auth/components/user.tsx
+++ b/src/app/auth/components/user.tsx
@ -1,54 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { WorldIcon } from '@shared/icons';
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-
-export function User({ pubkey, fallback }: { pubkey: string; fallback?: string }) {
-  const { status, user } = useProfile(pubkey, fallback);
-
-  if (status === 'loading') {
-    return (
-      <div className="flex items-center gap-2">
-        <div className="relative h-14 w-14 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
-        <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
-          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full w-full flex-col gap-2.5">
-      <Image
-        src={user?.picture || user?.image}
-        alt={pubkey}
-        className="h-14 w-14 shrink-0 rounded-lg object-cover"
-      />
-      <div className="flex h-full flex-col items-start justify-between">
-        <div className="flex flex-col items-start gap-1 text-start">
-          <p className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
-            {user?.name || user?.display_name}
-          </p>
-          <p className="line-clamp-6 break-all text-white/70">
-            {user?.about || user?.bio || 'No bio'}
-          </p>
-        </div>
-        <div className="flex flex-col gap-2">
-          {user?.website ? (
-            <Link
-              to={user?.website}
-              target="_blank"
-              className="inline-flex items-center gap-2 text-sm text-white/70"
-            >
-              <WorldIcon className="h-4 w-4" />
-              <p className="max-w-[10rem] truncate">{user.website}</p>
-            </Link>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/components/userImport.tsx
+++ b/src/app/auth/components/userImport.tsx
@ -1,38 +0,0 @@
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
-
-export function UserImport({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
-
-  if (status === 'loading') {
-    return (
-      <div className="flex items-center gap-2.5">
-        <div className="12 12 relative shrink-0 animate-pulse rounded-lg bg-white/10 backdrop-blur-xl" />
-        <div className="flex flex-col gap-1">
-          <span className="h-5 w-1/2 animate-pulse rounded bg-white/10" />
-          <span className="h-4 w-1/3 animate-pulse rounded bg-white/10" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2.5">
-      <Image
-        src={user?.picture || user?.image}
-        alt={pubkey}
-        className="h-12 w-12 shrink-0 rounded-lg object-cover"
-      />
-      <div className="flex w-full flex-col gap-1">
-        <h3 className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
-          {user?.name || user?.display_name}
-        </h3>
-        <p className="leading-none text-white/70">
-          {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
-        </p>
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/components/userRelay.tsx
+++ b/src/app/auth/components/userRelay.tsx
@ -1,36 +0,0 @@
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
-
-export function UserRelay({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
-
-  if (status === 'loading') {
-    return (
-      <div className="flex items-center gap-2">
-        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded-md bg-white/10 backdrop-blur-xl" />
-        <div className="flex w-full flex-1 flex-col items-start gap-1 text-start">
-          <span className="h-4 w-1/2 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-          <span className="h-3 w-1/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="inline-flex items-center gap-2 text-white/50">
-      <span className="text-sm">Use by</span>
-      <div className="inline-flex items-center gap-1">
-        <Image
-          src={user?.picture || user?.image}
-          alt={pubkey}
-          className="h-5 w-5 shrink-0 rounded object-cover"
-        />
-        <span className="truncate text-sm font-medium leading-none text-white">
-          {user?.name || user?.display_name || displayNpub(pubkey, 16)}
-        </span>
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/import/step-3.tsx
+++ b/src/app/auth/import/step-3.tsx
@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';

-import { UserImport } from '@app/auth/components/userImport';
-
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { useOnboarding } from '@stores/onboarding';
 import { WidgetKinds } from '@stores/widgets';
@ -60,7 +59,7 @@ export function ImportStep3Screen() {
      </div>
      <div className="flex flex-col gap-3">
        <div className="rounded-lg border-t border-white/10 bg-white/20 px-3 py-3">
-          <UserImport pubkey={db.account.pubkey} />
+          <User pubkey={db.account.pubkey} variant="simple" />
        </div>
        <div className="flex flex-col gap-2">
          <button
--- a/src/app/auth/onboarding/step-1.tsx
+++ b/src/app/auth/onboarding/step-1.tsx
@ -2,11 +2,10 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';

-import { User } from '@app/auth/components/user';
-
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { useOnboarding } from '@stores/onboarding';

@ -92,7 +91,11 @@ export function OnboardStep1Screen() {
              onClick={() => toggleFollow(item.pubkey)}
              className="relative h-[300px] shrink-0 grow-0 basis-[250px] rounded-lg border-t border-white/10 bg-white/20 px-4 py-4 hover:bg-white/30"
            >
-              <User pubkey={item.pubkey} fallback={item.profile?.content} />
+              <User
+                pubkey={item.pubkey}
+                variant="large"
+                embedProfile={item.profile?.content}
+              />
              {follows.includes(item.pubkey) && (
                <div className="absolute right-2 top-2">
                  <CheckCircleIcon className="h-4 w-4 text-green-400" />
--- a/src/app/auth/onboarding/step-3.tsx
+++ b/src/app/auth/onboarding/step-3.tsx
@ -2,12 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';

-import { UserRelay } from '@app/auth/components/userRelay';
-
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { FULL_RELAYS } from '@stores/constants';
 import { useOnboarding } from '@stores/onboarding';
@ -136,7 +135,7 @@ export function OnboardStep3Screen() {
              >
                <div className="flex flex-col items-start gap-1">
                  <p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p>
-                  <UserRelay pubkey={data.get(item)} />
+                  <User pubkey={data.get(item)} variant="mention" />
                </div>
                {relays.has(item) && (
                  <div className="pt-1.5">
--- a/src/app/auth/reset.tsx
+++ b/src/app/auth/reset.tsx
@ -116,28 +116,28 @@ export function ResetScreen() {
        </div>
        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
          <div className="flex flex-col gap-1">
-            <label htmlFor="privkey" className="font-medium text-white/50">
+            <label htmlFor="privkey" className="font-medium text-white">
              Private key
            </label>
            <div className="relative">
              <input
                {...register('privkey', { required: true })}
                type="text"
-                placeholder="nsec..."
-                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+                placeholder="nsec1..."
+                className="relative h-12 w-full rounded-lg border-t border-white/10 bg-white/20 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/70"
              />
            </div>
          </div>
          <div className="flex flex-col gap-1">
-            <label htmlFor="password" className="font-medium text-white/50">
+            <label htmlFor="password" className="font-medium text-white">
              Set a new password to protect your key
            </label>
            <div className="relative">
              <input
                {...register('password', { required: true })}
                type={passwordInput}
-                placeholder="min. 4 characters"
-                className="relative h-12 w-full rounded-lg bg-white/10 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+                placeholder="Min. 4 characters"
+                className="relative h-12 w-full rounded-lg border-t border-white/10 bg-white/20 px-3.5 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/70"
              />
              <button
                type="button"
@ -169,7 +169,7 @@ export function ResetScreen() {
            </button>
            <Link
              to="/auth/unlock"
-              className="mt-1 inline-flex h-11 w-full items-center justify-center rounded-lg text-center text-white/50 hover:bg-white/10"
+              className="mt-1 inline-flex h-12 w-full items-center justify-center rounded-lg text-center text-white/70 hover:bg-white/20"
            >
              Back
            </Link>
--- a/src/app/auth/unlock.tsx
+++ b/src/app/auth/unlock.tsx
@ -4,11 +4,10 @@ import { Resolver, useForm } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import { Stronghold } from 'tauri-plugin-stronghold-api';

-import { UserImport } from '@app/auth/components/userImport';
-
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { useStronghold } from '@stores/stronghold';

@ -82,7 +81,7 @@ export function UnlockScreen() {
        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col">
          <div className="flex flex-col rounded-lg bg-white/5">
            <div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
-              <UserImport pubkey={db.account.pubkey} />
+              <User pubkey={db.account.pubkey} variant="simple" />
            </div>
            <div className="relative">
              <input
--- a/src/app/chats/components/messages/item.tsx
+++ b/src/app/chats/components/messages/item.tsx
@ -22,7 +22,7 @@ export function ChatMessageItem({
  return (
    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 backdrop-blur-xl hover:bg-white/10">
      <div className="flex flex-col">
-        <User pubkey={message.pubkey} time={message.created_at} isChat={true} />
+        <User pubkey={message.pubkey} time={message.created_at} variant="chat" />
        <div className="-mt-[20px] pl-[49px]">
          <p className="select-text whitespace-pre-line break-words text-base text-white">
            {message.content}
--- a/src/app/chats/components/modal.tsx
+++ b/src/app/chats/components/modal.tsx
@ -2,11 +2,10 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';

-import { User } from '@app/auth/components/user';
-
 import { useStorage } from '@libs/storage/provider';

 import { CancelIcon, PlusIcon } from '@shared/icons';
+import { User } from '@shared/user';

 export function NewMessageModal() {
  const navigate = useNavigate();
@ -54,16 +53,16 @@ export function NewMessageModal() {
              </div>
            </div>
            <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-2 pt-2">
-              {db.account?.follows?.map((follow) => (
+              {db.account?.follows?.map((pubkey) => (
                <div
-                  key={follow}
+                  key={pubkey}
                  className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
                >
-                  <User pubkey={follow} />
+                  <User pubkey={pubkey} variant="simple" />
                  <div>
                    <button
                      type="button"
-                      onClick={() => openChat(follow)}
+                      onClick={() => openChat(pubkey)}
                      className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
                    >
                      Chat
--- a/src/app/chats/components/unknowns.tsx
+++ b/src/app/chats/components/unknowns.tsx
@ -2,9 +2,8 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';

-import { User } from '@app/auth/components/user';
-
 import { CancelIcon, StrangersIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { compactNumber } from '@utils/number';

@ -59,7 +58,7 @@ export function UnknownsModal({ data }: { data: string[] }) {
                  key={pubkey}
                  className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
                >
-                  <User pubkey={pubkey} />
+                  <User pubkey={pubkey} variant="simple" />
                  <div>
                    <button
                      type="button"
--- a/src/app/notes/article.tsx
+++ b/src/app/notes/article.tsx
@ -13,11 +13,11 @@ import {
  NoteActions,
  NoteReplyForm,
  NoteStats,
-  ThreadUser,
  UnknownNote,
 } from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
+import { User } from '@shared/user';

 import { useEvent } from '@utils/hooks/useEvent';

@ -100,21 +100,27 @@ export function ArticleNoteScreen() {
                </div>
              </div>
            ) : (
-              <div className="h-min w-full px-3">
-                <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
-                  <ThreadUser pubkey={data.pubkey} time={data.created_at} />
-                  <div className="mt-2">{renderKind(data)}</div>
-                  <div>
-                    <NoteActions id={data.id} pubkey={data.pubkey} extraButtons={false} />
-                    <NoteStats id={data.id} />
+              <>
+                <div className="h-min w-full px-3">
+                  <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
+                    <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
+                    <div className="mt-2">{renderKind(data)}</div>
+                    <div>
+                      <NoteActions
+                        id={data.id}
+                        pubkey={data.pubkey}
+                        extraButtons={false}
+                      />
+                      <NoteStats id={data.id} />
+                    </div>
                  </div>
                </div>
-              </div>
+                <div ref={replyRef} className="px-3">
+                  <NoteReplyForm id={data.id} pubkey={db.account.pubkey} />
+                  <RepliesList id={data.id} />
+                </div>
+              </>
            )}
-            <div ref={replyRef} className="px-3">
-              <NoteReplyForm id={data?.id} pubkey={db.account.pubkey} />
-              <RepliesList id={data?.id} />
-            </div>
          </div>
          <div className="col-span-1" />
        </div>
--- a/src/app/notes/text.tsx
+++ b/src/app/notes/text.tsx
@ -15,11 +15,11 @@ import {
  NoteReplyForm,
  NoteStats,
  TextNote,
-  ThreadUser,
  UnknownNote,
 } from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
+import { User } from '@shared/user';

 import { useEvent } from '@utils/hooks/useEvent';

@ -106,7 +106,7 @@ export function TextNoteScreen() {
            ) : (
              <div className="h-min w-full px-3">
                <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
-                  <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+                  <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
                  <div className="mt-2">{renderKind(data)}</div>
                  <div>
                    <NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
--- a/src/app/notifications/components/simpleNote.tsx
+++ b/src/app/notifications/components/simpleNote.tsx
@ -48,7 +48,7 @@ export const SimpleNote = memo(function SimpleNote({ id }: { id: string }) {
      tabIndex={0}
      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
    >
-      <User pubkey={data.pubkey} time={data.created_at} size="small" />
+      <User pubkey={data.pubkey} time={data.created_at} variant="mention" />
      <div className="markdown">
        <p>
          {data.content.length > 200
--- a/src/app/nwc/index.tsx
+++ b/src/app/nwc/index.tsx
@ -27,13 +27,13 @@ export function NWCScreen() {
          <h3 className="text-2xl font-bold leading-tight">
            Nostr Wallet Connect (Beta)
          </h3>
-          <p className="leading-tight text-white/50">
+          <p className="leading-tight text-white/70">
            Sending tips easily via Bitcoin Lightning.
          </p>
        </div>
        <div className="mx-auto max-w-lg">
          {!walletConnectURL ? (
-            <div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl bg-white/10 p-3">
+            <div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl border-t border-white/10 bg-white/20 p-3">
              <NWCAlby />
              <NWCOther />
            </div>
@ -61,12 +61,12 @@ export function NWCScreen() {
          )}
          <div className="mt-5 flex flex-col gap-4">
            <div className="flex flex-col gap-1.5">
-              <h5 className="text-sm font-bold text-white/80">Introduction</h5>
-              <p className="text-sm text-white/50">
+              <h5 className="text-sm font-bold text-white">Introduction</h5>
+              <p className="text-sm text-white/70">
                Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to
                access a remote Lightning wallet through a standardized protocol.
              </p>
-              <p className="text-sm text-white/50">
+              <p className="text-sm text-white/70">
                To learn more about the details have a look at{' '}
                <a
                  href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
@ -79,15 +79,15 @@ export function NWCScreen() {
              </p>
            </div>
            <div className="flex flex-col gap-1.5">
-              <h5 className="text-sm font-bold text-white/80">About tipping</h5>
-              <p className="text-sm text-white/50">
+              <h5 className="text-sm font-bold text-white">About tipping</h5>
+              <p className="text-sm text-white/70">
                Also known as Zap in other Nostr client.
              </p>
-              <p className="text-sm text-white/50">
+              <p className="text-sm text-white/70">
                Lume doesn&apos;t take any commission or platform fees when you tip
                someone.
              </p>
-              <p className="text-sm text-white/50">Lume doesn&apos;t hold your Bitcoin</p>
+              <p className="text-sm text-white/70">Lume doesn&apos;t hold your Bitcoin</p>
            </div>
          </div>
        </div>
--- a/src/index.css
+++ b/src/index.css
@ -12,7 +12,7 @@
 }

 .markdown {
-  @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
+  @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
 }

 .ProseMirror p.is-empty::before {
--- a/src/shared/nip05.tsx
+++ b/src/shared/nip05.tsx
@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetch } from '@tauri-apps/api/http';
+import { memo } from 'react';
 import { twMerge } from 'tailwind-merge';

 import { UnverifiedIcon, VerifiedIcon } from '@shared/icons';
@ -10,7 +11,7 @@ interface NIP05 {
  };
 }

-export function NIP05({
+export const NIP05 = memo(function NIP05({
  pubkey,
  nip05,
  className,
@ -71,4 +72,4 @@ export function NIP05({
      </div>
    </div>
  );
-}
+});
--- a/src/shared/notes/actions/more.tsx
+++ b/src/shared/notes/actions/more.tsx
@ -44,7 +44,7 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
        </Tooltip.Portal>
      </Tooltip.Root>
      <DropdownMenu.Portal>
-        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/10 p-2 backdrop-blur-3xl focus:outline-none">
+        <DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/20 p-2 backdrop-blur-3xl focus:outline-none">
          <DropdownMenu.Item asChild>
            <button
              type="button"
--- a/src/shared/notes/index.ts
+++ b/src/shared/notes/index.ts
@ -17,9 +17,6 @@ export * from './kinds/article';
 export * from './kinds/articleDetail';
 export * from './kinds/unknown';
 export * from './metadata';
-export * from './users/mini';
-export * from './users/repost';
-export * from './users/thread';
 export * from './kinds/repost';
 export * from './child';
 export * from './skeleton';
--- a/src/shared/notes/kinds/repost.tsx
+++ b/src/shared/notes/kinds/repost.tsx
@ -12,7 +12,6 @@ import {
  LinkPreview,
  NoteActions,
  NoteSkeleton,
-  RepostUser,
  TextNote,
  UnknownNote,
 } from '@shared/notes';
@ -23,14 +22,14 @@ export function Repost({ event }: { event: NDKEvent }) {
    event.content.length > 0 ? JSON.parse(event.content) : null;

  const { ndk } = useNDK();
-  const { status, data } = useQuery(
+  const { status, isError, data } = useQuery(
    ['repost', event.id],
    async () => {
      const id = event.tags.find((el) => el[0] === 'e')[1];
-      if (id === undefined) throw new Error('wrong id');
+      if (!id) throw new Error('wrong id');

      const ndkEvent = await ndk.fetchEvent(id);
-      if (!ndkEvent) throw new Error('Event not found');
+      if (!ndkEvent) return Promise.reject(new Error('event not found'));

      return ndkEvent;
    },
@ -56,17 +55,11 @@ export function Repost({ event }: { event: NDKEvent }) {
  if (embedEvent) {
    return (
      <div className="h-min w-full px-3 pb-3">
-        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <div className="relative flex flex-col gap-3 overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+          <User pubkey={event.pubkey} variant="repost" />
          <div className="relative flex flex-col">
-            <div className="isolate flex flex-col -space-y-4">
-              <RepostUser pubkey={event.pubkey} />
-              <User
-                pubkey={embedEvent.pubkey}
-                time={embedEvent.created_at}
-                isRepost={true}
-              />
-            </div>
-            <div className="-mt-2 flex items-start gap-3">
+            <User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
+            <div className="-mt-6 flex items-start gap-3">
              <div className="w-11 shrink-0" />
              <div className="relative z-20 flex-1">
                {renderKind(embedEvent)}
@ -89,32 +82,38 @@ export function Repost({ event }: { event: NDKEvent }) {
    );
  }

-  if (status === 'error') {
-    // @ts-expect-error, root_id isn't exist on NDKEvent
-    const noteLink = `https://njump.me/${nip19.noteEncode(event.root_id)}`;
+  if (isError) {
+    const noteLink = `https://njump.me/${nip19.noteEncode(
+      event.tags.find((el) => el[0] === 'e')[1]
+    )}`;
+
    return (
-      <div className="relative mb-5 flex flex-col">
-        <div className="relative z-10 flex items-start gap-3">
-          <div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
-            <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
-          </div>
-          <h5 className="truncate font-semibold leading-none text-white">
-            Lume <span className="text-green-500">(System)</span>
-          </h5>
-        </div>
-        <div className="-mt-6 flex items-start gap-3">
-          <div className="w-11 shrink-0" />
-          <div>
-            <div className="relative z-20 mt-1 flex-1 select-text">
-              <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
-                Lume cannot find this post with your current relays, but you can view it
-                via njump.me.{' '}
-                <Link to={noteLink} className="text-fuchsia-500">
-                  Learn more
-                </Link>
+      <div className="h-min w-full px-3 pb-3">
+        <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+          <div className="relative flex flex-col">
+            <div className="relative z-10 flex items-start gap-3">
+              <div className="inline-flex h-11 w-11 items-end justify-center rounded-lg bg-black pb-1">
+                <img src="/lume.png" alt="lume" className="h-auto w-1/3" />
+              </div>
+              <h5 className="truncate font-semibold leading-none text-white">
+                Lume <span className="text-green-500">(System)</span>
+              </h5>
+            </div>
+            <div className="-mt-6 flex items-start gap-3">
+              <div className="w-11 shrink-0" />
+              <div>
+                <div className="relative z-20 mt-1 flex-1 select-text">
+                  <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
+                    Lume cannot find this post with your current relays, but you can view
+                    it via njump.me.{' '}
+                    <Link to={noteLink} className="text-fuchsia-500">
+                      Learn more
+                    </Link>
+                  </div>
+                </div>
+                <LinkPreview urls={[noteLink]} />
              </div>
            </div>
-            <LinkPreview urls={[noteLink]} />
          </div>
        </div>
      </div>
@ -124,11 +123,9 @@ export function Repost({ event }: { event: NDKEvent }) {
  return (
    <div className="h-min w-full px-3 pb-3">
      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
+        <User pubkey={event.pubkey} variant="repost" />
        <div className="relative flex flex-col">
-          <div className="isolate flex flex-col -space-y-4">
-            <RepostUser pubkey={event.pubkey} />
-            <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
-          </div>
+          <User pubkey={data.pubkey} time={data.created_at} />
          <div className="-mt-2 flex items-start gap-3">
            <div className="w-11 shrink-0" />
            <div className="relative z-20 flex-1">
--- a/src/shared/notes/mentions/note.tsx
+++ b/src/shared/notes/mentions/note.tsx
@ -89,7 +89,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
      tabIndex={0}
      className="mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3 backdrop-blur-xl"
    >
-      <User pubkey={data.pubkey} time={data.created_at} size="small" />
+      <User pubkey={data.pubkey} time={data.created_at} variant="mention" />
      <div className="mt-1">{renderKind(data)}</div>
    </div>
  );
--- a/src/shared/notes/metadata.tsx
+++ b/src/shared/notes/metadata.tsx
@ -6,7 +6,7 @@ import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';

 import { LoaderIcon } from '@shared/icons';
-import { MiniUser } from '@shared/notes/users/mini';
+import { User } from '@shared/user';

 import { WidgetKinds, useWidgets } from '@stores/widgets';

@ -86,7 +86,7 @@ export function NoteMetadata({ id }: { id: string }) {
            <div className="mt-2 inline-flex h-6 w-11 shrink-0 items-center justify-center">
              <div className="isolate flex -space-x-1">
                {data.users?.map((user, index) => (
-                  <MiniUser key={user + index} pubkey={user} />
+                  <User key={user + index} pubkey={user} />
                ))}
              </div>
            </div>
--- a/src/shared/notes/replies/list.tsx
+++ b/src/shared/notes/replies/list.tsx
@ -1,4 +1,3 @@
-import { NDKKind } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';

 import { NoteSkeleton, Reply } from '@shared/notes';
@ -21,7 +20,6 @@ export function RepliesList({ id }: { id: string }) {
      // subscribe for new replies
      sub(
        {
-          kinds: [NDKKind.Text],
          '#e': [id],
          since: Math.floor(Date.now() / 1000),
        },
@ -50,7 +48,7 @@ export function RepliesList({ id }: { id: string }) {

  return (
    <div className="mt-5 pb-10">
-      <h5 className="mb-5 text-lg font-semibold text-white">
+      <h5 className="mb-2 text-lg font-semibold text-white">
        {data?.length || 0} replies
      </h5>
      <div className="flex flex-col gap-3">
--- a/src/shared/notes/users/mini.tsx
+++ b/src/shared/notes/users/mini.tsx
@ -1,19 +0,0 @@
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-
-export function MiniUser({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
-
-  if (status === 'loading') {
-    return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
-  }
-
-  return (
-    <Image
-      src={user?.picture || user?.image}
-      alt={pubkey}
-      className="relative z-20 inline-block h-4 w-4 rounded ring-1 ring-black"
-    />
-  );
-}
--- a/src/shared/notes/users/repost.tsx
+++ b/src/shared/notes/users/repost.tsx
@ -1,28 +0,0 @@
-import { Image } from '@shared/image';
-
-import { useProfile } from '@utils/hooks/useProfile';
-import { shortenKey } from '@utils/shortenKey';
-
-export function RepostUser({ pubkey }: { pubkey: string }) {
-  const { status, user } = useProfile(pubkey);
-
-  if (status === 'loading') {
-    return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
-  }
-
-  return (
-    <div className="flex gap-2 pl-6">
-      <Image
-        src={user?.picture || user?.image}
-        alt={pubkey}
-        className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-black"
-      />
-      <div className="inline-flex items-baseline gap-1">
-        <h5 className="max-w-[13rem] truncate text-sm text-white/50">
-          {user?.name || user?.display_name || shortenKey(pubkey)}
-        </h5>
-        <span className="text-sm text-white/50">reposted</span>
-      </div>
-    </div>
-  );
-}
--- a/src/shared/notes/users/thread.tsx
+++ b/src/shared/notes/users/thread.tsx
@ -1,34 +0,0 @@
-import { Image } from '@shared/image';
-
-import { formatCreatedAt } from '@utils/createdAt';
-import { useProfile } from '@utils/hooks/useProfile';
-import { displayNpub } from '@utils/shortenKey';
-
-export function ThreadUser({ pubkey, time }: { pubkey: string; time: number }) {
-  const { status, user } = useProfile(pubkey);
-  const createdAt = formatCreatedAt(time);
-
-  if (status === 'loading') {
-    return <div className="h-4 w-4 animate-pulse rounded bg-white/10"></div>;
-  }
-
-  return (
-    <div className="flex items-center gap-3">
-      <Image
-        src={user.picture || user.image}
-        alt={pubkey}
-        className="relative z-20 inline-block h-11 w-11 rounded-lg"
-      />
-      <div className="flex flex-1 flex-col gap-2">
-        <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
-          {user.display_name || user.name}
-        </h5>
-        <div className="inline-flex items-center gap-2">
-          <span className="leading-none text-white/50">{createdAt}</span>
-          <span className="leading-none text-white/50">·</span>
-          <span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@ -1,7 +1,8 @@
 import * as Popover from '@radix-ui/react-popover';
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';

+import { WorldIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 import { NIP05 } from '@shared/nip05';

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

-export function User({
+export const User = memo(function User({
  pubkey,
  time,
-  size,
-  isRepost = false,
-  isChat = false,
+  variant = 'default',
+  embedProfile,
 }: {
  pubkey: string;
-  time: number;
-  size?: string;
-  isRepost?: boolean;
-  isChat?: boolean;
+  time?: number;
+  variant?: 'default' | 'simple' | 'mention' | 'repost' | 'chat' | 'large' | 'thread';
+  embedProfile?: string;
 }) {
-  const { status, user } = useProfile(pubkey);
-
-  const createdAt = formatCreatedAt(time, isChat);
-  const avatarWidth = size === 'small' ? 'w-6' : 'w-11';
-  const avatarHeight = size === 'small' ? 'h-6' : 'h-11';
+  const { status, user } = useProfile(pubkey, embedProfile);
+  const createdAt = time ? formatCreatedAt(time, variant === 'chat') : 0;

  if (status === 'loading') {
-    return (
-      <div
-        className={`relative flex gap-3 ${
-          size === 'small' ? 'items-center' : 'items-start'
-        }`}
-      >
-        <div
-          className={`${avatarWidth} ${avatarHeight}  ${
-            size === 'small' ? 'rounded' : 'rounded-lg'
-          } relative z-10 shrink-0 animate-pulse overflow-hidden bg-white/10 backdrop-blur-xl`}
-        />
-        <div className="flex flex-wrap items-baseline gap-1">
+    if (variant === 'mention') {
+      return (
+        <div className="relative flex items-center gap-3">
+          <div className="relative z-10 h-6 w-6 shrink-0 animate-pulse overflow-hidden rounded bg-white/10 backdrop-blur-xl" />
          <div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
        </div>
+      );
+    }
+
+    return (
+      <div className="relative flex items-start gap-3">
+        <div className="relative z-10 h-11 w-11 shrink-0 animate-pulse overflow-hidden rounded-lg bg-white/10 backdrop-blur-xl" />
+        <div className="h-3.5 w-36 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
+      </div>
+    );
+  }
+
+  if (variant === 'mention') {
+    return (
+      <div className="relative z-10 flex items-center gap-2">
+        <button type="button" className="relative z-40 h-6 w-6 shrink-0 overflow-hidden">
+          <Image
+            src={user?.picture || user?.image}
+            alt={pubkey}
+            className="h-6 w-6 rounded object-cover"
+          />
+        </button>
+        <div className="flex flex-1 items-baseline gap-2">
+          <h5 className="max-w-[10rem] truncate font-semibold leading-none text-white">
+            {user?.display_name || user?.name || displayNpub(pubkey, 16)}
+          </h5>
+          <span className="leading-none text-white/50">·</span>
+          <span className="leading-none text-white/50">{createdAt}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'large') {
+    return (
+      <div className="flex h-full w-full flex-col gap-2.5">
+        <Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          className="h-14 w-14 shrink-0 rounded-lg object-cover"
+        />
+        <div className="flex h-full flex-col items-start justify-between">
+          <div className="flex flex-col items-start gap-1 text-start">
+            <p className="max-w-[15rem] truncate text-lg font-semibold leading-none text-white">
+              {user?.name || user?.display_name}
+            </p>
+            <p className="line-clamp-6 break-all text-white/70">
+              {user?.about || user?.bio || 'No bio'}
+            </p>
+          </div>
+          <div className="flex flex-col gap-2">
+            {user?.website ? (
+              <Link
+                to={user?.website}
+                target="_blank"
+                className="inline-flex items-center gap-2 text-sm text-white/70"
+              >
+                <WorldIcon className="h-4 w-4" />
+                <p className="max-w-[10rem] truncate">{user.website}</p>
+              </Link>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'simple') {
+    return (
+      <div className="flex items-center gap-2.5">
+        <Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          className="h-12 w-12 shrink-0 rounded-lg object-cover"
+        />
+        <div className="flex w-full flex-col gap-1">
+          <h3 className="max-w-[15rem] truncate font-medium leading-none text-white">
+            {user?.name || user?.display_name}
+          </h3>
+          <p className="text-sm leading-none text-white/70">
+            {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'repost') {
+    return (
+      <div className="flex gap-3">
+        <Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          className="relative z-20 inline-block h-11 w-11 rounded-lg"
+        />
+        <div className="inline-flex items-baseline gap-1">
+          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+            {user?.display_name || user?.name || displayNpub(pubkey, 16)}
+          </h5>
+          <span className="font-semibold text-fuchsia-500">reposted</span>
+          <span className="leading-none text-white/50">·</span>
+          <span className="leading-none text-white/50">{createdAt}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === 'thread') {
+    return (
+      <div className="flex items-center gap-3">
+        <Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          className="relative z-20 inline-block h-11 w-11 rounded-lg"
+        />
+        <div className="flex flex-1 flex-col gap-2">
+          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+            {user?.display_name || user?.name}
+          </h5>
+          <div className="inline-flex items-center gap-2">
+            <span className="leading-none text-white/50">{createdAt}</span>
+            <span className="leading-none text-white/50">·</span>
+            <span className="leading-none text-white/50">{displayNpub(pubkey, 16)}</span>
+          </div>
+        </div>
      </div>
    );
  }

  return (
    <Popover.Root>
-      <div
-        className={twMerge(
-          'relative z-10 flex',
-          size === 'small' ? 'items-center gap-2' : 'items-start gap-3'
-        )}
-      >
+      <div className="relative z-10 flex items-start gap-3">
        <Popover.Trigger asChild>
          <button
            type="button"
-            className={`${avatarWidth} ${avatarHeight} relative z-40 shrink-0 overflow-hidden`}
+            className="relative z-40 h-11 w-11 shrink-0 overflow-hidden"
          >
            <Image
              src={user?.picture || user?.image}
              alt={pubkey}
-              className={twMerge(
-                `object-cover ${avatarWidth} ${avatarHeight}`,
-                size === 'small' ? 'rounded' : 'rounded-lg',
-                isRepost ? 'ring-1 ring-black' : ''
-              )}
+              className="h-11 w-11 rounded-lg object-cover"
            />
          </button>
        </Popover.Trigger>
-        <div
-          className={twMerge('flex flex-1 items-baseline gap-2', isRepost ? 'mt-4' : '')}
-        >
-          <h5
-            className={twMerge(
-              'truncate font-semibold leading-none text-white',
-              size === 'small' ? 'max-w-[10rem]' : 'max-w-[15rem]'
-            )}
-          >
+        <div className="flex flex-1 items-baseline gap-2">
+          <h5 className="max-w-[15rem] truncate font-semibold leading-none text-white">
            {user?.display_name || user?.name || displayNpub(pubkey, 16)}
          </h5>
          <span className="leading-none text-white/50">·</span>
@ -139,4 +235,4 @@ export function User({
      </Popover.Portal>
    </Popover.Root>
  );
-}
+});
--- a/src/shared/widgets/local/thread.tsx
+++ b/src/shared/widgets/local/thread.tsx
@ -10,12 +10,12 @@ import {
  NoteReplyForm,
  NoteStats,
  TextNote,
-  ThreadUser,
  UnknownNote,
 } from '@shared/notes';
 import { RepliesList } from '@shared/notes/replies/list';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
+import { User } from '@shared/user';

 import { useEvent } from '@utils/hooks/useEvent';
 import { Widget } from '@utils/types';
@ -53,7 +53,7 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
        ) : (
          <div className="h-min w-full px-3 pt-1.5">
            <div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
-              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
              <div className="mt-2">{renderKind(data)}</div>
              <NoteActions
                id={params.content}
--- a/src/shared/widgets/tmp/feeds.tsx
+++ b/src/shared/widgets/tmp/feeds.tsx
@ -1,10 +1,9 @@
 import { useState } from 'react';

-import { User } from '@app/auth/components/user';
-
 import { useStorage } from '@libs/storage/provider';

 import { ArrowRightCircleIcon, CheckCircleIcon } from '@shared/icons';
+import { User } from '@shared/user';

 import { WidgetKinds, useWidgets } from '@stores/widgets';

@ -65,7 +64,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
                onClick={() => toggleGroup(item)}
                className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/20"
              >
-                <User pubkey={item} />
+                <User pubkey={item} variant="simple" />
                {groups.includes(item) && (
                  <div>
                    <CheckCircleIcon className="h-4 w-4 text-green-400" />
--- a/src/utils/hooks/useEvent.ts
+++ b/src/utils/hooks/useEvent.ts
@ -25,6 +25,7 @@ export function useEvent(
          authors: [naddr.pubkey],
        });
        const rEvent = [...rEvents].slice(-1)[0];
+        if (!rEvent) return Promise.reject(new Error('event not found'));
        return rEvent;
      }

@ -40,7 +41,7 @@ export function useEvent(

      // get event from relay if event in db not present
      const event = await ndk.fetchEvent(id);
-      if (!event) throw new Error(`Event not found: ${id}`);
+      if (!event) return Promise.reject(new Error('event not found'));

      const rawEvent = toRawEvent(event);
      await db.createEvent(rawEvent);