multi columns layout

src/app/channel/components/createModal.tsx

@@ -92,7 +92,7 @@ export default function ChannelCreateModal() {
 					<PlusIcon width={12} height={12} className="text-zinc-500" />
 				</div>
 				<div>
-					<h5 className="text-[13px] font-semibold text-zinc-500 group-hover:text-zinc-400">
+					<h5 className="font-semibold text-zinc-400 group-hover:text-zinc-200">
 						Add a new channel
 					</h5>
 				</div>

src/app/channel/components/item.tsx

@@ -32,7 +32,7 @@ export default function ChannelsListItem({ data }: { data: any }) {
 				<span className="text-base text-white">#</span>
 			</div>
 			<div>
-				<h5 className="truncate font-medium text-zinc-400">{channel?.name}</h5>
+				<h5 className="truncate font-medium text-zinc-200">{channel?.name}</h5>
 			</div>
 		</a>
 	);

src/app/channel/components/list.tsx

@@ -11,7 +11,7 @@ export default function ChannelsList() {
 	const { data, error }: any = useSWR("channels", fetcher);
 
 	return (
-		<div className="flex flex-col gap-px">
+		<div className="flex flex-col gap-1">
 			{!data || error ? (
 				<>
 					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">

src/app/channel/layout.tsx

@@ -4,22 +4,12 @@ import Navigation from "@shared/navigation";
 
 export function LayoutChannel({ 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>
 	);
 }