wip

src/app/channel/components/createModal.tsx

@@ -167,7 +167,7 @@ export function ChannelCreateModal() {
 								<div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
 									<form
 										onSubmit={handleSubmit(onSubmit)}
-										className="flex h-full w-full flex-col gap-4"
+										className="flex h-full w-full flex-col gap-4 mb-0"
 									>
 										<input
 											type={"hidden"}

src/app/channel/components/item.tsx

@@ -7,6 +7,7 @@ export function ChannelsListItem({ data }: { data: any }) {
 	return (
 		<NavLink
 			to={`/app/channel/${data.event_id}`}
+			preventScrollReset={true}
 			className={({ isActive }) =>
 				twMerge(
 					"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",

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

@@ -3,18 +3,19 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import { CancelIcon, HideIcon } from "@shared/icons";
 import { RelayContext } from "@shared/relayProvider";
 import { Tooltip } from "@shared/tooltip";
-import { useActiveAccount } from "@stores/accounts";
 import { useChannelMessages } from "@stores/channels";
 import { dateToUnix } from "@utils/date";
+import { useAccount } from "@utils/hooks/useAccount";
 import { Fragment, useContext, useState } from "react";
 
 export function MessageHideButton({ id }: { id: string }) {
 	const ndk = useContext(RelayContext);
-	const account = useActiveAccount((state: any) => state.account);
 	const hide = useChannelMessages((state: any) => state.hideMessage);
 
 	const [isOpen, setIsOpen] = useState(false);
 
+	const { account } = useAccount();
+
 	const closeModal = () => {
 		setIsOpen(false);
 	};

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

@@ -15,7 +15,7 @@ export function ChannelMessageItem({ data }: { data: LumeEvent }) {
 	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">
-				<User pubkey={data.pubkey} time={data.created_at} />
+				<User pubkey={data.pubkey} time={data.created_at} isChat={true} />
 				<div className="-mt-[20px] pl-[49px]">
 					<p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
 						{content.parsed}

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

@@ -3,18 +3,19 @@ import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import { CancelIcon, MuteIcon } from "@shared/icons";
 import { RelayContext } from "@shared/relayProvider";
 import { Tooltip } from "@shared/tooltip";
-import { useActiveAccount } from "@stores/accounts";
 import { useChannelMessages } from "@stores/channels";
 import { dateToUnix } from "@utils/date";
+import { useAccount } from "@utils/hooks/useAccount";
 import { Fragment, useContext, useState } from "react";
 
 export function MessageMuteButton({ pubkey }: { pubkey: string }) {
 	const ndk = useContext(RelayContext);
-	const account = useActiveAccount((state: any) => state.account);
 	const mute = useChannelMessages((state: any) => state.muteUser);
 
 	const [isOpen, setIsOpen] = useState(false);
 
+	const { account } = useAccount();
+
 	const closeModal = () => {
 		setIsOpen(false);
 	};

src/app/channel/index.tsx

@@ -109,29 +109,31 @@ export function ChannelScreen() {
 				>
 					<h3 className="font-semibold text-zinc-100">Public Channel</h3>
 				</div>
-				<div className="w-full flex-1 p-3">
-					<div className="flex h-full flex-col justify-between rounded-md bg-zinc-900">
-						{!messages ? (
-							<p>Loading...</p>
-						) : (
-							<Virtuoso
-								ref={virtuosoRef}
-								data={messages}
-								itemContent={itemContent}
-								computeItemKey={computeItemKey}
-								initialTopMostItemIndex={messages.length - 1}
-								alignToBottom={true}
-								followOutput={true}
-								overscan={50}
-								increaseViewportBy={{ top: 200, bottom: 200 }}
-								className="scrollbar-hide overflow-y-auto h-full w-full"
-								components={{
-									Header: () => Header,
-									EmptyPlaceholder: () => Empty,
-								}}
-							/>
-						)}
-						<div className="w-full inline-flex shrink-0 px-5 py-3 border-t border-zinc-800">
+				<div className="w-full h-full flex-1 p-3">
+					<div className="h-full flex flex-col justify-between rounded-xl border-t border-zinc-800/50 bg-zinc-900 overflow-hidden">
+						<div className="flex-1 w-full h-full">
+							{!messages ? (
+								<p>Loading...</p>
+							) : (
+								<Virtuoso
+									ref={virtuosoRef}
+									data={messages}
+									itemContent={itemContent}
+									computeItemKey={computeItemKey}
+									initialTopMostItemIndex={messages.length - 1}
+									alignToBottom={true}
+									followOutput={true}
+									overscan={50}
+									increaseViewportBy={{ top: 200, bottom: 200 }}
+									className="scrollbar-hide overflow-y-auto"
+									components={{
+										Header: () => Header,
+										EmptyPlaceholder: () => Empty,
+									}}
+								/>
+							)}
+						</div>
+						<div className="shrink-0 px-5 p-3 rounded-b-xl border-t border-zinc-800 bg-zinc-900 z-50">
 							<ChannelMessageForm channelID={id} />
 						</div>
 					</div>