feat: remove mica effect and support windows 10

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();
 

src-tauri/tauri.windows.conf.json

@@ -10,12 +10,7 @@
 				"minWidth": 480,
 				"minHeight": 700,
 				"transparent": true,
-				"decorations": false,
-				"windowEffects": {
-					"effects": [
-						"mica"
-					]
-				}
+				"decorations": false
 			}
 		]
 	}

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() {

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>

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">