wip: refactor chats to use zustand

src/app/chat/components/self.tsx

@@ -1,52 +0,0 @@
-import { Image } from "@shared/image";
-import { useActiveAccount } from "@stores/accounts";
-import { DEFAULT_AVATAR } from "@stores/constants";
-import { usePageContext } from "@utils/hooks/usePageContext";
-import { shortenKey } from "@utils/shortenKey";
-import { twMerge } from "tailwind-merge";
-
-export default function ChatsListSelfItem() {
-	const pageContext = usePageContext();
-
-	const searchParams: any = pageContext.urlParsed.search;
-	const pagePubkey = searchParams.pubkey;
-
-	const account = useActiveAccount((state: any) => state.account);
-
-	return (
-		<>
-			{!account ? (
-				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
-					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
-					<div>
-						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
-					</div>
-				</div>
-			) : (
-				<a
-					href={`/app/chat?pubkey=${account.pubkey}`}
-					className={twMerge(
-						"inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
-						pagePubkey === account.pubkey
-							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-							: "",
-					)}
-				>
-					<div className="relative h-5 w-5 shrink-0 rounded">
-						<Image
-							src={account?.picture || DEFAULT_AVATAR}
-							alt={account.pubkey}
-							className="h-5 w-5 rounded bg-white object-cover"
-						/>
-					</div>
-					<div className="inline-flex items-baseline">
-						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
-							{account?.nip05 || account?.name || shortenKey(account.pubkey)}
-						</h5>
-						<span className="text-zinc-600">(you)</span>
-					</div>
-				</a>
-			)}
-		</>
-	);
-}