clean up messy code

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

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>
-  );
-}

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>
-  );
-}

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>
-  );
-}

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

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" />

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">

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>

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

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}

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

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"

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>

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} />

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

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>