minor updates

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

@@ -2,6 +2,7 @@ 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 { ChannelMessageUserMute } from "@app/channel/components/messages/userMute";
 import { MentionNote } from "@app/note/components/mentions/note";
 import { ImagePreview } from "@app/note/components/preview/image";
 import { VideoPreview } from "@app/note/components/preview/video";
@@ -16,7 +17,12 @@ export function ChannelMessageItem({ data }: { data: any }) {
 		setHide((prev) => !prev);
 	};
 
-	if (data.mute) return null;
+	if (data.mute)
+		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">
+				<ChannelMessageUserMute pubkey={data.pubkey} />
+			</div>
+		);
 
 	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">

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

@@ -0,0 +1,41 @@
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { useProfile } from "@utils/hooks/useProfile";
+
+export function ChannelMessageUserMute({
+	pubkey,
+}: {
+	pubkey: string;
+}) {
+	const { user, isError, isLoading } = useProfile(pubkey);
+
+	return (
+		<div className="flex items-center gap-3">
+			{isError || isLoading ? (
+				<>
+					<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
+					<div className="flex w-full flex-1 items-center justify-between">
+						<div className="flex items-baseline gap-2 text-base">
+							<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
+						</div>
+					</div>
+				</>
+			) : (
+				<>
+					<div className="relative h-11 w-11 shrink-0 rounded-md">
+						<Image
+							src={user?.picture || DEFAULT_AVATAR}
+							alt={pubkey}
+							className="h-11 w-11 rounded-md object-cover"
+						/>
+					</div>
+					<div className="flex w-full flex-1 items-center justify-between">
+						<span className="leading-none text-zinc-300">
+							You has been muted this user
+						</span>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

src/app/channel/pages/index.page.tsx

@@ -55,12 +55,12 @@ export function Page() {
 
 	useSWRSubscription(
 		account && channelID && muted && hided ? ["channel", channelID] : null,
-		([, key]) => {
+		() => {
 			// subscribe to channel
 			const unsubscribe = pool.subscribe(
 				[
 					{
-						"#e": [key],
+						"#e": [channelID],
 						kinds: [42],
 						since: dateToUnix(getHourAgo(24, now.current)),
 						limit: 20,