From a4cf65e7c27e7f2fdcc4d0c45c812cd28b33a344 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 3 Sep 2023 07:43:38 +0700
Subject: [PATCH] update ui consistent for cross platform

---
 src/app.tsx                           |  5 +++--
 src/app/chats/components/modal.tsx    |  2 +-
 src/app/chats/components/unknowns.tsx |  2 +-
 src/app/error.tsx                     |  6 ++++--
 src/app/users/components/modal.tsx    |  2 +-
 src/app/users/components/profile.tsx  |  2 +-
 src/libs/storage/instance.ts          |  5 ++++-
 src/libs/storage/provider.tsx         |  4 +++-
 src/shared/composer/modal.tsx         |  2 +-
 src/shared/frame.tsx                  | 29 +++++++++++++++++++++++++++
 src/shared/layouts/app.tsx            |  5 +++--
 src/shared/layouts/auth.tsx           |  6 ++++--
 src/shared/layouts/note.tsx           |  6 ++++--
 src/shared/layouts/settings.tsx       |  5 +++--
 src/shared/navigation.tsx             |  5 +++--
 src/shared/notes/actions/repost.tsx   |  2 +-
 src/shared/notes/actions/zap.tsx      |  2 +-
 17 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 src/shared/frame.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 9429edb9..533b6582 100644
--- a/src/app.tsx
+++ b/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>
       }
     />
   );
diff --git a/src/app/chats/components/modal.tsx b/src/app/chats/components/modal.tsx
index 44f0c0e4..c932a6d7 100644
--- a/src/app/chats/components/modal.tsx
+++ b/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">
diff --git a/src/app/chats/components/unknowns.tsx b/src/app/chats/components/unknowns.tsx
index 56e7b9ab..03ebeefe 100644
--- a/src/app/chats/components/unknowns.tsx
+++ b/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">
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 53d3be69..ee1e99d3 100644
--- a/src/app/error.tsx
+++ b/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>
   );
 }
diff --git a/src/app/users/components/modal.tsx b/src/app/users/components/modal.tsx
index e5cf815b..d11dec4f 100644
--- a/src/app/users/components/modal.tsx
+++ b/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">
diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx
index 07a0a68e..645e5bc4 100644
--- a/src/app/users/components/profile.tsx
+++ b/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">
diff --git a/src/libs/storage/instance.ts b/src/libs/storage/instance.ts
index 2e08795d..bacc9416 100644
--- a/src/libs/storage/instance.ts
+++ b/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;
   }
diff --git a/src/libs/storage/provider.tsx b/src/libs/storage/provider.tsx
index 8f034d68..3eb1f01a 100644
--- a/src/libs/storage/provider.tsx
+++ b/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);
diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx
index 364a43e5..0169d0be 100644
--- a/src/shared/composer/modal.tsx
+++ b/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(
diff --git a/src/shared/frame.tsx b/src/shared/frame.tsx
new file mode 100644
index 00000000..01cf3586
--- /dev/null
+++ b/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>;
+}
diff --git a/src/shared/layouts/app.tsx b/src/shared/layouts/app.tsx
index 0f5e5b8f..bb0bff26 100644
--- a/src/shared/layouts/app.tsx
+++ b/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>
   );
 }
diff --git a/src/shared/layouts/auth.tsx b/src/shared/layouts/auth.tsx
index 99abfffb..c3854207 100644
--- a/src/shared/layouts/auth.tsx
+++ b/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>
   );
 }
diff --git a/src/shared/layouts/note.tsx b/src/shared/layouts/note.tsx
index 4fdb5938..4e70ef4c 100644
--- a/src/shared/layouts/note.tsx
+++ b/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>
   );
 }
diff --git a/src/shared/layouts/settings.tsx b/src/shared/layouts/settings.tsx
index d6df0c4d..ac74034a 100644
--- a/src/shared/layouts/settings.tsx
+++ b/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
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 5f6f8500..c27c29b6 100644
--- a/src/shared/navigation.tsx
+++ b/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>
   );
 }
diff --git a/src/shared/notes/actions/repost.tsx b/src/shared/notes/actions/repost.tsx
index f6f4fbe5..4389d7e6 100644
--- a/src/shared/notes/actions/repost.tsx
+++ b/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">
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index 04851084..60bf7247 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/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">