update channel

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

@@ -1,25 +1,61 @@
-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 { 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 { MentionNote } from "@app/note/components/mentions/note";
+import ImagePreview from "@app/note/components/preview/image";
+import VideoPreview from "@app/note/components/preview/video";
 import { noteParser } from "@utils/parser";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 export function ChannelMessageItem({ data }: { data: any }) {
 	const content = useMemo(() => noteParser(data), [data]);
+	const [hide, setHide] = useState(data.hide);
+
+	const toggleHide = () => {
+		setHide((prev) => !prev);
+	};
+
+	if (data.mute) return null;
 
 	return (
 		<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-[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>
+					{hide ? (
+						<>
+							<p className="leading-tight italic text-zinc-400">
+								[hided message]
+							</p>
+							<button type="button" onClick={() => toggleHide()}>
+								show
+							</button>
+						</>
+					) : (
+						<>
+							<p className="whitespace-pre-line break-words text-base leading-tight">
+								{content.parsed}
+							</p>
+							{Array.isArray(content.images) && content.images.length ? (
+								<ImagePreview urls={content.images} />
+							) : (
+								<></>
+							)}
+							{Array.isArray(content.videos) && content.videos.length ? (
+								<VideoPreview urls={content.videos} />
+							) : (
+								<></>
+							)}
+							{Array.isArray(content.notes) && content.notes.length ? (
+								content.notes.map((note: string) => (
+									<MentionNote key={note} id={note} />
+								))
+							) : (
+								<></>
+							)}
+						</>
+					)}
 				</div>
 			</div>
 			<div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">