wip: cross platform ui

src/shared/layouts/app.tsx

@@ -8,7 +8,7 @@ export function AppLayout() {
       <div className="shrink-0">
         <Navigation />
       </div>
-      <div className="h-full w-full flex-1 bg-black/90">
+      <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
         <ScrollRestoration
           getKey={(location) => {

src/shared/layouts/auth.tsx

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 export function AuthLayout() {
   return (
-    <div className="relative h-screen w-screen bg-black/90">
+    <div className="relative h-screen w-screen bg-black/90 backdrop-blur-xl">
       <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
       <Outlet />
     </div>

src/shared/layouts/note.tsx

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 export function NoteLayout() {
   return (
-    <div className="relative h-screen w-screen bg-black/90">
+    <div className="relative h-screen w-screen bg-black/90 backdrop-blur-xl">
       <div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
       <Outlet />
     </div>

src/shared/layouts/settings.tsx

@@ -21,7 +21,9 @@ export function SettingsLayout() {
                   className={({ isActive }) =>
                     twMerge(
                       'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                      isActive
+                        ? 'bg-white/10 text-white backdrop-blur-xl'
+                        : 'text-white/80'
                     )
                   }
                 >
@@ -32,7 +34,9 @@ export function SettingsLayout() {
                   className={({ isActive }) =>
                     twMerge(
                       'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                      isActive
+                        ? 'bg-white/10 text-white backdrop-blur-xl'
+                        : 'text-white/80'
                     )
                   }
                 >
@@ -43,7 +47,9 @@ export function SettingsLayout() {
                   className={({ isActive }) =>
                     twMerge(
                       'flex h-9 items-center gap-2.5 rounded-md px-2.5',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
+                      isActive
+                        ? 'bg-white/10 text-white backdrop-blur-xl'
+                        : 'text-white/80'
                     )
                   }
                 >
@@ -57,7 +63,7 @@ export function SettingsLayout() {
           <LumeBar />
         </div>
       </div>
-      <div className="h-full w-full flex-1 bg-black/90">
+      <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
         <ScrollRestoration
           getKey={(location) => {