wip: migrate channel to zustand

src/app/channel/components/messageList.tsx

@@ -1,37 +1,34 @@
-import ChannelMessageItem from "@app/channel/components/messages/item";
-
-import { sortedChannelMessagesAtom } from "@stores/channel";
-
+import { ChannelMessageItem } from "@app/channel/components/messages/item";
+import { useChannelMessages } from "@stores/channels";
 import { getHourAgo } from "@utils/date";
-
-import { useAtomValue } from "jotai";
 import { useCallback, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 
-export default function ChannelMessageList() {
+export function ChannelMessageList() {
 	const now = useRef(new Date());
 	const virtuosoRef = useRef(null);
-	const data = useAtomValue(sortedChannelMessagesAtom);
+
+	const messages = useChannelMessages((state: any) => state.messages);
 
 	const itemContent: any = useCallback(
 		(index: string | number) => {
-			return <ChannelMessageItem data={data[index]} />;
+			return <ChannelMessageItem data={messages[index]} />;
 		},
-		[data],
+		[messages],
 	);
 
 	const computeItemKey = useCallback(
 		(index: string | number) => {
-			return data[index].id;
+			return messages[index].id;
 		},
-		[data],
+		[messages],
 	);
 
 	return (
 		<div className="h-full w-full">
 			<Virtuoso
 				ref={virtuosoRef}
-				data={data}
+				data={messages}
 				itemContent={itemContent}
 				components={{
 					Header: () => (
@@ -66,7 +63,7 @@ export default function ChannelMessageList() {
 					),
 				}}
 				computeItemKey={computeItemKey}
-				initialTopMostItemIndex={data.length - 1}
+				initialTopMostItemIndex={messages.length - 1}
 				alignToBottom={true}
 				followOutput={true}
 				overscan={50}

src/app/channel/components/messages/item.tsx

@@ -1,28 +1,24 @@
 import MessageHideButton from "@app/channel/components/messages/hideButton";
 import MessageMuteButton from "@app/channel/components/messages/muteButton";
 import MessageReplyButton from "@app/channel/components/messages/replyButton";
-import ChannelMessageUser from "@app/channel/components/messages/user";
-
+import { ChannelMessageUser } from "@app/channel/components/messages/user";
 import { noteParser } from "@utils/parser";
-
 import { useMemo } from "react";
 
-export default function ChannelMessageItem({ data }: { data: any }) {
+export function ChannelMessageItem({ data }: { data: any }) {
 	const content = useMemo(() => noteParser(data), [data]);
 
 	return (
-		<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+		<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
 			<div className="flex flex-col">
 				<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} />
-				<div className="-mt-[17px] pl-[48px]">
-					<div className="flex flex-col gap-2">
-						<div className="whitespace-pre-line break-words text-base leading-tight">
-							{data.hide ? (
-								<span className="italic text-zinc-400">[hided message]</span>
-							) : (
-								content.parsed
-							)}
-						</div>
+				<div className="-mt-[20px] pl-[49px]">
+					<div className="whitespace-pre-line break-words text-base leading-tight">
+						{data.hide ? (
+							<span className="italic text-zinc-400">[hided message]</span>
+						) : (
+							content.parsed
+						)}
 					</div>
 				</div>
 			</div>

src/app/channel/components/messages/user.tsx

@@ -7,7 +7,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 
 dayjs.extend(relativeTime);
 
-export default function ChannelMessageUser({
+export function ChannelMessageUser({
 	pubkey,
 	time,
 }: { pubkey: string; time: number }) {
@@ -17,7 +17,7 @@ export default function ChannelMessageUser({
 		<div className="group flex items-start gap-3">
 			{isError || isLoading ? (
 				<>
-					<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
+					<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
 					<div className="flex w-full flex-1 items-start justify-between">
 						<div className="flex items-baseline gap-2 text-base">
 							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
@@ -26,17 +26,17 @@ export default function ChannelMessageUser({
 				</>
 			) : (
 				<>
-					<div className="relative h-9 w-9 shrink rounded-md">
+					<div className="relative h-11 w-11 shrink rounded-md">
 						<Image
 							src={user?.picture || DEFAULT_AVATAR}
 							alt={pubkey}
-							className="h-9 w-9 rounded-md object-cover"
+							className="h-11 w-11 rounded-md object-cover"
 						/>
 					</div>
 					<div className="flex w-full flex-1 items-start justify-between">
 						<div className="flex items-baseline gap-2 text-base">
 							<span className="font-semibold leading-none text-white group-hover:underline">
-								{user?.display_name || user?.name || shortenKey(pubkey)}
+								{user?.nip05 || user?.name || shortenKey(pubkey)}
 							</span>
 							<span className="leading-none text-zinc-500">·</span>
 							<span className="leading-none text-zinc-500">