multi columns layout

src/app/chat/components/item.tsx

@@ -44,7 +44,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
 						/>
 					</div>
 					<div>
-						<h5 className="truncate font-medium text-zinc-400 group-hover:text-white">
+						<h5 className="truncate font-medium text-zinc-200 group-hover:text-white">
 							{user.nip05 || user.name || shortenKey(pubkey)}
 						</h5>
 					</div>

src/app/chat/components/list.tsx

@@ -16,7 +16,7 @@ export default function ChatsList() {
 	);
 
 	return (
-		<div className="flex flex-col gap-px">
+		<div className="flex flex-col gap-1">
 			<ChatsListSelfItem />
 			{!chats || error ? (
 				<>

src/app/chat/components/self.tsx

@@ -45,7 +45,7 @@ export default function ChatsListSelfItem() {
 						/>
 					</div>
 					<div>
-						<h5 className="truncate font-medium text-zinc-400">
+						<h5 className="truncate font-medium text-zinc-200">
 							{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}{" "}
 							<span className="text-zinc-600">(you)</span>
 						</h5>

src/app/chat/layout.tsx

@@ -4,22 +4,12 @@ import Navigation from "@shared/navigation";
 
 export function LayoutChat({ children }: { children: React.ReactNode }) {
 	return (
-		<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white">
-			<div className="flex h-screen w-full flex-col">
-				<div
-					data-tauri-drag-region
-					className="relative h-9 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
-				>
-					<AppHeader />
-				</div>
-				<div className="relative flex min-h-0 w-full flex-1">
-					<div className="relative flex flex-row flex-wrap shrink-0">
-						<MultiAccounts />
-						<Navigation />
-					</div>
-					<div className="w-full h-full">{children}</div>
-				</div>
+		<div className="flex w-screen h-screen">
+			<div className="relative flex flex-row flex-wrap shrink-0">
+				<MultiAccounts />
+				<Navigation />
 			</div>
+			<div className="w-full h-full">{children}</div>
 		</div>
 	);
 }