wip: refactor

src/app/chats/components/list.tsx

@@ -6,24 +6,22 @@ import { NewMessageModal } from '@app/chats/components/modal';
 import { ChatsListSelfItem } from '@app/chats/components/self';
 import { UnknownsModal } from '@app/chats/components/unknowns';
 
+import { useNDK } from '@libs/ndk/provider';
 import { getChats } from '@libs/storage';
+import { useStorage } from '@libs/storage/provider';
 
-import { useAccount } from '@utils/hooks/useAccount';
 import { Chats } from '@utils/types';
 
 export function ChatsList() {
-  const { account } = useAccount();
-  const {
-    status,
-    data: chats,
-    isFetching,
-  } = useQuery(['chats'], async () => {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+  const { status, data: chats } = useQuery(['chats'], async () => {
     return await getChats();
   });
 
   const renderItem = useCallback(
     (item: Chats) => {
-      if (account?.pubkey !== item.sender_pubkey) {
+      if (db.account.pubkey !== item.sender_pubkey) {
         return <ChatsListItem key={item.sender_pubkey} data={item} />;
       }
     },
@@ -47,21 +45,8 @@ export function ChatsList() {
 
   return (
     <div className="flex flex-col">
-      {account ? (
-        <ChatsListSelfItem data={account} />
-      ) : (
-        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
-        </div>
-      )}
+      <ChatsListSelfItem pubkey={db.account.pubkey} />
       {chats.follows.map((item) => renderItem(item))}
-      {isFetching && (
-        <div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2">
-          <div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-white/10" />
-          <div className="h-3 w-full animate-pulse rounded-sm bg-white/10" />
-        </div>
-      )}
       {chats.unknowns.length > 0 && <UnknownsModal data={chats.unknowns} />}
       <NewMessageModal />
     </div>

src/app/chats/components/modal.tsx

@@ -4,15 +4,15 @@ import { useNavigate } from 'react-router-dom';
 
 import { User } from '@app/auth/components/user';
 
-import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
+import { useStorage } from '@libs/storage/provider';
 
-import { useAccount } from '@utils/hooks/useAccount';
+import { CancelIcon, LoaderIcon, PlusIcon } from '@shared/icons';
 
 export function NewMessageModal() {
   const navigate = useNavigate();
 
   const [open, setOpen] = useState(false);
-  const { status, account } = useAccount();
+  const { db } = useStorage();
 
   const openChat = (pubkey: string) => {
     setOpen(false);
@@ -59,7 +59,7 @@ export function NewMessageModal() {
                   <LoaderIcon className="h-5 w-5 animate-spin text-white" />
                 </div>
               ) : (
-                account?.follows?.map((follow) => (
+                db.account?.follows?.map((follow) => (
                   <div
                     key={follow}
                     className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"

src/app/chats/components/self.tsx

@@ -8,8 +8,8 @@ import { DEFAULT_AVATAR } from '@stores/constants';
 import { useProfile } from '@utils/hooks/useProfile';
 import { displayNpub } from '@utils/shortenKey';
 
-export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
-  const { status, user } = useProfile(data.pubkey);
+export function ChatsListSelfItem({ pubkey }: { pubkey: string }) {
+  const { status, user } = useProfile(pubkey);
 
   if (status === 'loading') {
     return (
@@ -22,7 +22,7 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
 
   return (
     <NavLink
-      to={`/chats/${data.pubkey}`}
+      to={`/chats/${pubkey}`}
       preventScrollReset={true}
       className={({ isActive }) =>
         twMerge(
@@ -34,12 +34,12 @@ export function ChatsListSelfItem({ data }: { data: { pubkey: string } }) {
       <Image
         src={user?.picture || user?.image}
         fallback={DEFAULT_AVATAR}
-        alt={data.pubkey}
+        alt={pubkey}
         className="h-6 w-6 shrink-0 rounded bg-white object-cover"
       />
       <div className="inline-flex items-baseline gap-1">
         <h5 className="max-w-[10rem] truncate">
-          {user?.nip05 || user?.name || displayNpub(data.pubkey, 16)}
+          {user?.nip05 || user?.name || displayNpub(pubkey, 16)}
         </h5>
         <span className="text-white/50">(you)</span>
       </div>