update design

src/shared/appHeader.tsx

@@ -2,7 +2,16 @@ import ArrowLeftIcon from "@icons/arrowLeft";
 import ArrowRightIcon from "@icons/arrowRight";
 import RefreshIcon from "@icons/refresh";
 
+import useSWR from "swr";
+
+const fetcher = async () => {
+	const { platform } = await import("@tauri-apps/api/os");
+	return await platform();
+};
+
 export default function AppHeader() {
+	const { data: platform } = useSWR("platform", fetcher);
+
 	const goBack = () => {
 		window.history.back();
 	};
@@ -21,54 +30,43 @@ export default function AppHeader() {
 			className="flex h-full w-full flex-1 items-center px-2"
 		>
 			<div
-				data-tauri-drag-region
-				className="flex w-full items-center justify-center gap-2"
+				className={`flex h-full items-center gap-2 ${
+					platform === "darwin" ? "pl-[68px]" : ""
+				}`}
 			>
-				<div className="flex h-full items-center gap-2">
-					<button
-						type="button"
-						onClick={() => goBack()}
-						className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-					>
-						<ArrowLeftIcon
-							width={14}
-							height={14}
-							className="text-zinc-500 group-hover:text-zinc-300"
-						/>
-					</button>
-					<button
-						type="button"
-						onClick={() => goForward()}
-						className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-					>
-						<ArrowRightIcon
-							width={14}
-							height={14}
-							className="text-zinc-500 group-hover:text-zinc-300"
-						/>
-					</button>
-				</div>
-				<div>
-					<input
-						autoCapitalize="none"
-						autoCorrect="off"
-						placeholder="Search..."
-						className="h-6 w-[453px] rounded border border-zinc-800 bg-zinc-900 px-2.5 text-center text-[11px] text-sm leading-5 text-zinc-500 placeholder:leading-5 placeholder:text-zinc-600 focus:outline-none"
+				<button
+					type="button"
+					onClick={() => goBack()}
+					className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+				>
+					<ArrowLeftIcon
+						width={14}
+						height={14}
+						className="text-zinc-500 group-hover:text-zinc-300"
 					/>
-				</div>
-				<div className="flex h-full items-center gap-2">
-					<button
-						type="button"
-						onClick={() => reload()}
-						className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
-					>
-						<RefreshIcon
-							width={14}
-							height={14}
-							className="text-zinc-500 group-hover:text-zinc-300"
-						/>
-					</button>
-				</div>
+				</button>
+				<button
+					type="button"
+					onClick={() => goForward()}
+					className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+				>
+					<ArrowRightIcon
+						width={14}
+						height={14}
+						className="text-zinc-500 group-hover:text-zinc-300"
+					/>
+				</button>
+				<button
+					type="button"
+					onClick={() => reload()}
+					className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+				>
+					<RefreshIcon
+						width={14}
+						height={14}
+						className="text-zinc-500 group-hover:text-zinc-300"
+					/>
+				</button>
 			</div>
 		</div>
 	);

src/shared/multiAccounts.tsx

@@ -18,7 +18,7 @@ export default function MultiAccounts() {
 	const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pb-4 pt-3">
+		<div className="flex shrink-0 w-[68px] h-full flex-col items-center justify-between border-r border-zinc-900 pb-4 pt-3">
 			<div className="flex flex-col items-center">
 				<div className="flex flex-col gap-2">
 					<>

src/shared/navigation.tsx

@@ -14,7 +14,7 @@ import { Disclosure } from "@headlessui/react";
 
 export default function Navigation() {
 	return (
-		<div className="relative flex h-full flex-col gap-3 pt-1.5">
+		<div className="flex w-[232px] h-full flex-col gap-3 pt-1.5">
 			<div className="flex h-11 items-center justify-between px-3.5">
 				<ComposerModal />
 				<EventCollector />
@@ -28,14 +28,14 @@ export default function Navigation() {
 				</div>
 				<div className="flex flex-col text-zinc-400">
 					<ActiveLink
-						href="/app/today"
+						href="/app/space"
 						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
 						activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
 					>
 						<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
 							<WorldIcon width={12} height={12} className="text-zinc-200" />
 						</span>
-						<span>Today</span>
+						<span>Space</span>
 					</ActiveLink>
 					<ActiveLink
 						href="/app/threads"
@@ -47,16 +47,6 @@ export default function Navigation() {
 						</span>
 						<span>Threads</span>
 					</ActiveLink>
-					<ActiveLink
-						href="/app/space"
-						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
-						activeClassName=""
-					>
-						<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
-							<MyspaceIcon width={12} height={12} className="text-zinc-200" />
-						</span>
-						<span>Space</span>
-					</ActiveLink>
 				</div>
 			</div>
 			{/* Channels */}