update ui consistent for cross platform

src/app.tsx

@@ -5,6 +5,7 @@ import { AuthImportScreen } from '@app/auth/import';
 import { OnboardingScreen } from '@app/auth/onboarding';
 import { ErrorScreen } from '@app/error';
 
+import { Frame } from '@shared/frame';
 import { LoaderIcon } from '@shared/icons';
 import { AppLayout } from '@shared/layouts/app';
 import { AuthLayout } from '@shared/layouts/auth';
@@ -261,9 +262,9 @@ export default function App() {
     <RouterProvider
       router={router}
       fallbackElement={
-        <div className="flex h-full w-full items-center justify-center bg-black/90 backdrop-blur-xl">
+        <Frame className="flex h-full w-full items-center justify-center">
           <LoaderIcon className="h-6 w-6 animate-spin text-white" />
-        </div>
+        </Frame>
       }
     />
   );

src/app/chats/components/modal.tsx

@@ -35,7 +35,7 @@ export function NewMessageModal() {
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">

src/app/chats/components/unknowns.tsx

@@ -35,7 +35,7 @@ export function UnknownsModal({ data }: { data: string[] }) {
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">

src/app/error.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useRouteError } from 'react-router-dom';
 
+import { Frame } from '@shared/frame';
+
 interface IRouteError {
   statusText: string;
   message: string;
@@ -33,7 +35,7 @@ export function ErrorScreen() {
   }, []);
 
   return (
-    <div className="flex h-full items-center justify-center bg-black/90 backdrop-blur-xl">
+    <Frame className="flex h-full items-center justify-center">
       <div className="flex max-w-lg flex-col gap-4">
         <div className="flex flex-col">
           <h1 className="mb-1 text-2xl font-semibold text-white">
@@ -75,6 +77,6 @@ export function ErrorScreen() {
           </button>
         </div>
       </div>
-    </div>
+    </Frame>
   );
 }

src/app/users/components/modal.tsx

@@ -131,7 +131,7 @@ export function EditProfileModal() {
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">

src/app/users/components/profile.tsx

@@ -58,7 +58,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             className="h-full w-full object-cover"
           />
         ) : (
-          <div className="h-full w-full bg-black/50" />
+          <div className="h-full w-full bg-black" />
         )}
       </div>
       <div className="-mt-7 flex w-full flex-col items-center px-5">

src/libs/storage/instance.ts

@@ -1,5 +1,6 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { BaseDirectory, removeFile } from '@tauri-apps/api/fs';
+import { Platform } from '@tauri-apps/api/os';
 import Database from 'tauri-plugin-sql-api';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
 
@@ -7,11 +8,13 @@ import { Account, DBEvent, Relays, Widget } from '@utils/types';
 
 export class LumeStorage {
   public db: Database;
+  public platform: Platform;
   public secureDB: Stronghold;
   public account: Account | null = null;
 
-  constructor(sqlite: Database, stronghold?: Stronghold) {
+  constructor(sqlite: Database, platform: Platform, stronghold?: Stronghold) {
     this.db = sqlite;
+    this.platform = platform ?? undefined;
     this.secureDB = stronghold ?? undefined;
     this.account = null;
   }

src/libs/storage/provider.tsx

@@ -1,4 +1,5 @@
 import { message } from '@tauri-apps/api/dialog';
+import { platform } from '@tauri-apps/api/os';
 import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
@@ -18,7 +19,8 @@ const StorageProvider = ({ children }: PropsWithChildren<object>) => {
   async function initLumeStorage() {
     try {
       const sqlite = await Database.load('sqlite:lume.db');
-      const lumeStorage = new LumeStorage(sqlite);
+      const platformName = await platform();
+      const lumeStorage = new LumeStorage(sqlite, platformName);
 
       if (!lumeStorage.account) await lumeStorage.getActiveAccount();
       setDB(lumeStorage);

src/shared/composer/modal.tsx

@@ -37,7 +37,7 @@ export function ComposerModal() {
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div
             className={twMerge(

src/shared/frame.tsx

@@ -0,0 +1,29 @@
+import { HTMLProps, ReactNode, useCallback } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { useStorage } from '@libs/storage/provider';
+
+export function Frame({
+  children,
+  className,
+  lighter,
+}: {
+  children: ReactNode;
+  className: HTMLProps<HTMLElement>['className'];
+  lighter?: boolean;
+}) {
+  const { db } = useStorage();
+
+  const platformStyles = useCallback(() => {
+    switch (db.platform) {
+      case 'darwin':
+      case 'win32':
+        if (lighter) return 'bg-black/80';
+        return 'bg-black/90';
+      default:
+        return 'bg-black';
+    }
+  }, []);
+
+  return <div className={twMerge(className, platformStyles())}>{children}</div>;
+}

src/shared/layouts/app.tsx

@@ -1,5 +1,6 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 
+import { Frame } from '@shared/frame';
 import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
@@ -8,14 +9,14 @@ export function AppLayout() {
       <div className="shrink-0">
         <Navigation />
       </div>
-      <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
+      <Frame className="h-full w-full flex-1">
         <Outlet />
         <ScrollRestoration
           getKey={(location) => {
             return location.pathname;
           }}
         />
-      </div>
+      </Frame>
     </div>
   );
 }

src/shared/layouts/auth.tsx

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

src/shared/layouts/note.tsx

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

src/shared/layouts/settings.tsx

@@ -1,12 +1,13 @@
 import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
+import { Frame } from '@shared/frame';
 import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons';
 
 export function SettingsLayout() {
   return (
     <div className="flex h-screen w-screen">
-      <div className="relative flex h-full w-[232px] flex-col bg-black/80">
+      <Frame className="relative flex h-full w-[232px] flex-col" lighter>
         <div data-tauri-drag-region className="h-11 w-full shrink-0" />
         <div className="scrollbar-hide flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32">
           <div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
@@ -55,7 +56,7 @@ export function SettingsLayout() {
             </NavLink>
           </div>
         </div>
-      </div>
+      </Frame>
       <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
         <ScrollRestoration

src/shared/navigation.tsx

@@ -6,6 +6,7 @@ import { ChatsList } from '@app/chats/components/list';
 
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
+import { Frame } from '@shared/frame';
 import { BellIcon, NavArrowDownIcon, SpaceIcon } from '@shared/icons';
 
 import { useSidebar } from '@stores/sidebar';
@@ -14,7 +15,7 @@ export function Navigation() {
   const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
 
   return (
-    <div className="relative flex h-full w-[232px] flex-col bg-black/80">
+    <Frame className="relative flex h-full w-[232px] flex-col" lighter>
       <div data-tauri-drag-region className="h-11 w-full shrink-0" />
       <div className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pb-32">
         <div className="flex flex-col pr-2">
@@ -80,6 +81,6 @@ export function Navigation() {
       <div className="shrink-0">
         <ActiveAccount />
       </div>
-    </div>
+    </Frame>
   );
 }

src/shared/notes/actions/repost.tsx

@@ -44,7 +44,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
         </Tooltip.Portal>
       </Tooltip.Root>
       <AlertDialog.Portal className="relative z-10">
-        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <AlertDialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <AlertDialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="flex flex-col gap-2 border-b border-white/5 px-5 py-4">

src/shared/notes/actions/zap.tsx

@@ -38,7 +38,7 @@ export function NoteZap({ id }: { id: string }) {
         </button>
       </Dialog.Trigger>
       <Dialog.Portal className="relative z-10">
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
         <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
           <div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
             <div className="relative h-min w-full shrink-0 border-b border-white/5 bg-white/5 px-5 py-5">