From d1018ba8d189c1bdcde3d25176d0b50167ae66c1 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Sat, 2 Nov 2024 13:43:13 +0700
Subject: [PATCH] feat: remove mica effect and support windows 10

---
 src-tauri/src/commands/window.rs  |  6 ------
 src-tauri/tauri.windows.conf.json |  7 +------
 src/routes/__root.tsx             | 14 ++++++++++++--
 src/routes/_app.lazy.tsx          | 11 ++++++++++-
 src/routes/new.lazy.tsx           | 10 +++++++++-
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src-tauri/src/commands/window.rs b/src-tauri/src/commands/window.rs
index c034a162..85a55703 100644
--- a/src-tauri/src/commands/window.rs
+++ b/src-tauri/src/commands/window.rs
@@ -228,12 +228,6 @@ pub fn open_window(window: NewWindow, app_handle: tauri::AppHandle) -> Result<St
         .transparent(true)
         .decorations(false)
         .closable(window.closable)
-        .effects(WindowEffectsConfig {
-            state: None,
-            effects: vec![Effect::Mica],
-            radius: None,
-            color: None,
-        })
         .build()
         .unwrap();
 
diff --git a/src-tauri/tauri.windows.conf.json b/src-tauri/tauri.windows.conf.json
index 9739fbce..eefa57bf 100644
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@@ -10,12 +10,7 @@
 				"minWidth": 480,
 				"minHeight": 700,
 				"transparent": true,
-				"decorations": false,
-				"windowEffects": {
-					"effects": [
-						"mica"
-					]
-				}
+				"decorations": false
 			}
 		]
 	}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index b2dc41d4..2e732af5 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,4 +1,5 @@
 import { commands } from "@/commands.gen";
+import { cn } from "@/commons";
 import { Spinner } from "@/components";
 import type { Metadata, NostrEvent } from "@/types";
 import { type QueryClient, queryOptions } from "@tanstack/react-query";
@@ -36,7 +37,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function Screen() {
-	const { queryClient } = Route.useRouteContext();
+	const { queryClient, platform } = Route.useRouteContext();
 
 	useEffect(() => {
 		const unlisten = getCurrentWindow().listen<string>(
@@ -60,7 +61,16 @@ function Screen() {
 		};
 	}, []);
 
-	return <Outlet />;
+	return (
+		<div
+			className={cn(
+				"size-full",
+				platform === "windows" ? "bg-neutral-100 dark:bg-neutral-900" : "",
+			)}
+		>
+			<Outlet />
+		</div>
+	);
 }
 
 function Pending() {
diff --git a/src/routes/_app.lazy.tsx b/src/routes/_app.lazy.tsx
index 6471b709..2d389a09 100644
--- a/src/routes/_app.lazy.tsx
+++ b/src/routes/_app.lazy.tsx
@@ -22,10 +22,19 @@ export const Route = createLazyFileRoute("/_app")({
 });
 
 function Layout() {
+	const { platform } = Route.useRouteContext();
+
 	return (
 		<div className="flex flex-col w-screen h-screen">
 			<Topbar />
-			<div className="flex-1 bg-neutral-100 dark:bg-neutral-900 border-t-[.5px] border-black/20 dark:border-white/30">
+			<div
+				className={cn(
+					"flex-1 bg-neutral-100 dark:bg-neutral-900 border-t-[.5px]",
+					platform === "windows"
+						? "border-black/10 dark:border-white/10"
+						: "border-black/20 dark:border-white/30",
+				)}
+			>
 				<Outlet />
 			</div>
 		</div>
diff --git a/src/routes/new.lazy.tsx b/src/routes/new.lazy.tsx
index 7b6d84dd..41f4cfa6 100644
--- a/src/routes/new.lazy.tsx
+++ b/src/routes/new.lazy.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/commons";
 import { createLazyFileRoute } from "@tanstack/react-router";
 
 export const Route = createLazyFileRoute("/new")({
@@ -5,10 +6,17 @@ export const Route = createLazyFileRoute("/new")({
 });
 
 function Screen() {
+	const { platform } = Route.useRouteContext();
+
 	return (
 		<div
 			data-tauri-drag-region
-			className="bg-white/50 dark:bg-black/50 relative size-full flex items-center justify-center"
+			className={cn(
+				"relative size-full flex items-center justify-center",
+				platform === "windows"
+					? "bg-neutral-200 dark:bg-neutral-900"
+					: "bg-white/20 dark:bg-black/20",
+			)}
 		>
 			<div className="w-[350px] flex flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center">