minor updates

src/app/channel/components/messageList.tsx

@@ -9,7 +9,6 @@ export function ChannelMessageList() {
 	const virtuosoRef = useRef(null);
 
 	const messages = useChannelMessages((state: any) => state.messages);
-	const sorted = messages;
 
 	const itemContent: any = useCallback(
 		(index: string | number) => {

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

@@ -1,6 +1,5 @@
 import UserReply from "@app/channel/components/messages/userReply";
 import CancelIcon from "@icons/cancel";
-import { ImagePicker } from "@shared/form/imagePicker";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
 import { useChannelMessages } from "@stores/channels";
@@ -11,7 +10,7 @@ import { useContext, useState } from "react";
 
 export default function ChannelMessageForm({
 	channelID,
-}: { channelID: string | string[] }) {
+}: { channelID: string }) {
 	const pool: any = useContext(RelayContext);
 	const account = useActiveAccount((state: any) => state.account);
 
@@ -22,7 +21,7 @@ export default function ChannelMessageForm({
 	]);
 
 	const submitEvent = () => {
-		let tags: any[][];
+		let tags: string[][];
 
 		if (replyTo.id !== null) {
 			tags = [
@@ -34,23 +33,21 @@ export default function ChannelMessageForm({
 			tags = [["e", channelID, "", "root"]];
 		}
 
-		if (account) {
+		const event: any = {
-			const event: any = {
+			content: value,
-				content: value,
+			created_at: dateToUnix(),
-				created_at: dateToUnix(),
+			kind: 42,
-				kind: 42,
+			pubkey: account.pubkey,
-				pubkey: account.pubkey,
+			tags: tags,
-				tags: tags,
+		};
-			};
 
-			event.id = getEventHash(event);
+		event.id = getEventHash(event);
-			event.sig = getSignature(event, account.privkey);
+		event.sig = getSignature(event, account.privkey);
 
-			// publish note
+		// publish note
-			pool.publish(event, WRITEONLY_RELAYS);
+		pool.publish(event, WRITEONLY_RELAYS);
-		} else {
+		// reset state
-			console.log("error");
+		setValue("");
-		}
 	};
 
 	const handleEnterPress = (e) => {
@@ -68,15 +65,15 @@ export default function ChannelMessageForm({
 		<div
 			className={`relative ${
 				replyTo.id ? "h-36" : "h-24"
-			} w-full overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20`}
+			} w-full overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[6px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20`}
 		>
 			{replyTo.id && (
-				<div className="absolute left-0 top-0 z-10 h-14 w-full p-[2px]">
+				<div className="absolute left-0 top-0 z-10 h-16 w-full p-[2px]">
 					<div className="flex h-full w-full items-center justify-between rounded-t-md border-b border-zinc-700/70 bg-zinc-900 px-3">
 						<div className="flex w-full flex-col">
 							<UserReply pubkey={replyTo.pubkey} />
-							<div className="-mt-3.5 pl-[32px]">
+							<div className="-mt-5 pl-[38px]">
-								<div className="text-base text-white">{replyTo.content}</div>
+								<div className="text-base text-zinc-100">{replyTo.content}</div>
 							</div>
 						</div>
 						<button

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

@@ -7,22 +7,22 @@ export default function UserReply({ pubkey }: { pubkey: string }) {
 	const { user, isError, isLoading } = useProfile(pubkey);
 
 	return (
-		<div className="group flex items-start gap-1">
+		<div className="group flex items-start gap-2">
 			{isError || isLoading ? (
 				<>
-					<div className="relative h-7 w-7 shrink animate-pulse overflow-hidden rounded bg-zinc-800" />
+					<div className="relative h-9 w-9 shrink animate-pulse overflow-hidden rounded bg-zinc-800" />
 					<span className="h-2 w-10 animate-pulse rounded bg-zinc-800 text-base font-medium leading-none text-zinc-500" />
 				</>
 			) : (
 				<>
-					<div className="relative h-7 w-7 shrink overflow-hidden rounded">
+					<div className="relative h-9 w-9 shrink overflow-hidden rounded">
 						<Image
 							src={user?.picture || DEFAULT_AVATAR}
 							alt={pubkey}
-							className="h-7 w-7 rounded object-cover"
+							className="h-9 w-9 rounded object-cover"
 						/>
 					</div>
-					<span className="text-base font-medium leading-none text-zinc-500">
+					<span className="text-sm font-medium leading-none text-zinc-500">
 						Replying to {user?.name || shortenKey(pubkey)}
 					</span>
 				</>

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

@@ -37,7 +37,10 @@ export function Page() {
 	const channelPubkey = searchParams.channelpub;
 
 	const account: any = useActiveAccount((state: any) => state.account);
-	const addMessage = useChannelMessages((state: any) => state.add);
+	const [addMessage, clear] = useChannelMessages((state: any) => [
+		state.add,
+		state.clear,
+	]);
 
 	const { data: muted } = useSWR(
 		account ? ["muted", account.id] : null,
@@ -88,6 +91,7 @@ export function Page() {
 
 			return () => {
 				unsubscribe();
+				clear();
 			};
 		},
 	);

src/app/chat/components/messages/form.tsx

@@ -69,6 +69,17 @@ export function ChatMessageForm({
 				placeholder="Message"
 				className="relative h-11 w-full resize-none rounded-md px-5 !outline-none bg-zinc-800 placeholder:text-zinc-500"
 			/>
+			<div className="absolute right-2 top-0 h-11">
+				<div className="h-full flex items-center justify-end">
+					<button
+						type="button"
+						onClick={submit}
+						className="inline-flex items-center gap-1 text-zinc-500 leading-none"
+					>
+						Send
+					</button>
+				</div>
+			</div>
 		</div>
 	);
 }

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

@@ -18,9 +18,10 @@ export function Page() {
 	const searchParams: any = pageContext.urlParsed.search;
 	const pubkey = searchParams.pubkey;
 
-	const [fetchMessages, addMessage] = useChatMessages((state: any) => [
+	const [fetchMessages, addMessage, clear] = useChatMessages((state: any) => [
 		state.fetch,
 		state.add,
+		state.clear,
 	]);
 
 	useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
@@ -52,6 +53,10 @@ export function Page() {
 
 	useEffect(() => {
 		fetchMessages(account.pubkey, pubkey);
+
+		return () => {
+			clear();
+		};
 	}, [pubkey]);
 
 	return (

src/stores/channels.tsx

@@ -13,7 +13,6 @@ export const useChannels = create((set) => ({
 export const useChannelMessages = create(
 	immer((set) => ({
 		messages: [],
-		members: new Set(),
 		replyTo: { id: null, pubkey: null, content: null },
 		add: (message: any) => {
 			set((state: any) => ({ messages: [...state.messages, message] }));
@@ -36,5 +35,11 @@ export const useChannelMessages = create(
 				state.messages[target]["mute"] = true;
 			});
 		},
+		clear: () => {
+			set(() => ({
+				messages: [],
+				replyTo: { id: null, pubkey: null, content: null },
+			}));
+		},
 	})),
 );

src/stores/chats.tsx

@@ -18,4 +18,7 @@ export const useChatMessages = create((set) => ({
 	add: (message: any) => {
 		set((state: any) => ({ messages: [...state.messages, message] }));
 	},
+	clear: () => {
+		set(() => ({ messages: [] }));
+	},
 }));

src/stores/constants.tsx

@@ -5,18 +5,16 @@ export const DEFAULT_AVATAR = "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp";
 export const DEFAULT_CHANNEL_BANNER =
 	"https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg";
 
-// metadata service
-export const METADATA_SERVICE = "https://us.rbr.bio";
-
 // read-only relay list
 export const READONLY_RELAYS = [
 	"wss://welcome.nostr.wine",
 	"wss://relay.nostr.band",
+	"wss://relay.damus.io",
 ];
 
 // write-only relay list
 export const WRITEONLY_RELAYS = [
-	"wss://nostr.mutinywallet.com",
+	"wss://relay.damus.io",
 	"wss://relay.nostr.band",
 ];
 
@@ -27,5 +25,5 @@ export const METADATA_RELAY = ["wss://relay.nostr.band"];
 export const FULL_RELAYS = [
 	"wss://welcome.nostr.wine",
 	"wss://relay.nostr.band",
-	"wss://nostr.mutinywallet.com",
+	"wss://relay.damus.io",
 ];