clean up messy code

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"