refactor layout, support windows and linux

src/shared/appHeader.tsx

@@ -1,6 +1,17 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@shared/icons";
+import useSWR from "swr";
+
+const fetcher = async () => {
+	const { platform } = await import("@tauri-apps/api/os");
+	return platform();
+};
 
 export function AppHeader() {
+	const { data: platform } = useSWR(
+		typeof window !== "undefined" ? "platform" : null,
+		fetcher,
+	);
+
 	const goBack = () => {
 		window.history.back();
 	};
@@ -12,7 +23,9 @@ export function AppHeader() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="flex h-11 w-full items-center justify-between border-b border-zinc-900 px-3 gap-2.5"
+			className={`flex h-11 w-full px-3 border-b border-zinc-900 items-center ${
+				platform === "darwin" ? "justify-end" : "justify-start"
+			}`}
 		>
 			<div className="flex gap-2.5">
 				<button

src/shared/layout.tsx

@@ -0,0 +1,27 @@
+import { Navigation } from "@shared/navigation";
+import useSWR from "swr";
+
+const fetcher = async () => {
+	const { platform } = await import("@tauri-apps/api/os");
+	return platform();
+};
+
+export function DefaultLayout({ children }: { children: React.ReactNode }) {
+	const { data: platform } = useSWR(
+		typeof window !== "undefined" ? "platform" : null,
+		fetcher,
+	);
+
+	return (
+		<div
+			className={`flex w-screen h-screen ${
+				platform === "darwin" ? "flex-row" : "flex-row-reverse"
+			}`}
+		>
+			<div className="relative flex flex-row shrink-0">
+				<Navigation />
+			</div>
+			<div className="w-full h-full">{children}</div>
+		</div>
+	);
+}

src/shared/navigation.tsx

@@ -55,7 +55,7 @@ export function Navigation() {
 				<Disclosure defaultOpen={true}>
 					{({ open }) => (
 						<div className="flex flex-col gap-0.5 px-1.5">
-							<Disclosure.Button className="flex items-center gap-1 px-2.5">
+							<Disclosure.Button className="flex items-center gap-1 px-3">
 								<div
 									className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
 										open ? "" : "rotate-180"
@@ -81,7 +81,7 @@ export function Navigation() {
 				<Disclosure defaultOpen={true}>
 					{({ open }) => (
 						<div className="flex flex-col gap-0.5 px-1.5 pb-6">
-							<Disclosure.Button className="flex items-center gap-1 px-2.5">
+							<Disclosure.Button className="flex items-center gap-1 px-3">
 								<div
 									className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
 										open ? "" : "rotate-180"