wip: migrate to zustand

src/app/chat/components/list.tsx

@@ -1,25 +1,23 @@
 import ChatsListItem from "@app/chat/components/item";
 import ChatsListSelfItem from "@app/chat/components/self";
-
-import { useActiveAccount } from "@utils/hooks/useActiveAccount";
-import { getChatsByPubkey } from "@utils/storage";
-
-import useSWR from "swr";
-
-const fetcher = ([, pubkey]) => getChatsByPubkey(pubkey);
+import { useActiveAccount } from "@stores/accounts";
+import { useChats } from "@stores/chats";
+import { useEffect } from "react";
 
 export default function ChatsList() {
-	const { account, isLoading, isError } = useActiveAccount();
+	const account = useActiveAccount((state: any) => state.account);
+	const chats = useChats((state: any) => state.chats);
+	const fetchChats = useChats((state: any) => state.fetch);
 
-	const { data: chats, error }: any = useSWR(
-		!isLoading && !isError && account ? ["chats", account.pubkey] : null,
-		fetcher,
-	);
+	useEffect(() => {
+		if (!account) return;
+		fetchChats(account.pubkey);
+	}, [fetchChats]);
 
 	return (
 		<div className="flex flex-col gap-1">
 			<ChatsListSelfItem />
-			{!chats || error ? (
+			{!chats ? (
 				<>
 					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
 						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />