refactor layout, support windows and linux

src-tauri/src/main.rs

@@ -28,7 +28,7 @@ fn main() {
       let main_window = app.get_window("main").unwrap();
 
       #[cfg(target_os = "macos")]
-      main_window.position_traffic_lights(8.0, 16.0); // set inset for traffic lights (macos)
+      main_window.position_traffic_lights(13.0, 17.0); // set inset for traffic lights (macos)
 
       Ok(())
     })
@@ -37,7 +37,7 @@ fn main() {
       let apply_offset = || {
         let win = e.window();
         // keep inset for traffic lights when window resize (macos)
-        win.position_traffic_lights(8.0, 16.0);
+        win.position_traffic_lights(13.0, 17.0);
       };
       #[cfg(target_os = "macos")]
       match e.event() {

src/app/channel/_default.page.tsx

@@ -1 +1 @@
-export { LayoutChannel as Layout } from "./layout";
+export { DefaultLayout as Layout } from "@shared/layout";

src/app/channel/layout.tsx

@@ -1,14 +0,0 @@
-import { MultiAccounts } from "@shared/multiAccounts";
-import { Navigation } from "@shared/navigation";
-
-export function LayoutChannel({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="flex w-screen h-screen">
-			<div className="relative flex flex-row shrink-0">
-				<MultiAccounts />
-				<Navigation />
-			</div>
-			<div className="w-full h-full">{children}</div>
-		</div>
-	);
-}

src/app/chat/_default.page.tsx

@@ -1 +1 @@
-export { LayoutChat as Layout } from "./layout";
+export { DefaultLayout as Layout } from "@shared/layout";

src/app/chat/layout.tsx

@@ -1,14 +0,0 @@
-import { MultiAccounts } from "@shared/multiAccounts";
-import { Navigation } from "@shared/navigation";
-
-export function LayoutChat({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="flex w-screen h-screen">
-			<div className="relative flex flex-row shrink-0">
-				<MultiAccounts />
-				<Navigation />
-			</div>
-			<div className="w-full h-full">{children}</div>
-		</div>
-	);
-}

src/app/space/_default.page.tsx

@@ -1 +1 @@
-export { LayoutSpace as Layout } from "./layout";
+export { DefaultLayout as Layout } from "@shared/layout";

src/app/space/layout.tsx

@@ -1,14 +0,0 @@
-import { MultiAccounts } from "@shared/multiAccounts";
-import { Navigation } from "@shared/navigation";
-
-export function LayoutSpace({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="flex w-screen h-screen">
-			<div className="relative flex flex-row shrink-0">
-				<MultiAccounts />
-				<Navigation />
-			</div>
-			<div className="w-full h-full">{children}</div>
-		</div>
-	);
-}

src/app/trending/_default.page.tsx

@@ -1 +1 @@
-export { LayoutTrending as Layout } from "./layout";
+export { DefaultLayout as Layout } from "@shared/layout";

src/app/trending/layout.tsx

@@ -1,14 +0,0 @@
-import { MultiAccounts } from "@shared/multiAccounts";
-import { Navigation } from "@shared/navigation";
-
-export function LayoutTrending({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="flex w-screen h-screen">
-			<div className="relative flex flex-row shrink-0">
-				<MultiAccounts />
-				<Navigation />
-			</div>
-			<div className="w-full h-full">{children}</div>
-		</div>
-	);
-}

src/app/user/_default.page.tsx

@@ -1 +1 @@
-export { LayoutUser as Layout } from "./layout";
+export { DefaultLayout as Layout } from "@shared/layout";

src/app/user/layout.tsx

@@ -1,14 +0,0 @@
-import { MultiAccounts } from "@shared/multiAccounts";
-import { Navigation } from "@shared/navigation";
-
-export function LayoutUser({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="flex w-screen h-screen">
-			<div className="relative flex flex-row shrink-0">
-				<MultiAccounts />
-				<Navigation />
-			</div>
-			<div className="w-full h-full">{children}</div>
-		</div>
-	);
-}

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"