wip

src/app.tsx

@@ -1,3 +1,4 @@
+import '@fontsource-variable/inter/slnt.css';
 import { message } from '@tauri-apps/api/dialog';
 import { fetch } from '@tauri-apps/api/http';
 import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
@@ -12,14 +13,13 @@ import { ExploreScreen } from '@app/explore';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { Frame } from '@shared/frame';
 import { LoaderIcon } from '@shared/icons';
 import { AppLayout } from '@shared/layouts/app';
 import { AuthLayout } from '@shared/layouts/auth';
 import { NoteLayout } from '@shared/layouts/note';
 import { SettingsLayout } from '@shared/layouts/settings';
 
-import './index.css';
+import './app.css';
 
 export default function App() {
   const { db } = useStorage();
@@ -331,9 +331,9 @@ export default function App() {
     <RouterProvider
       router={router}
       fallbackElement={
-        <Frame className="flex h-full w-full items-center justify-center">
+        <div className="flex h-full w-full items-center justify-center">
           <LoaderIcon className="h-6 w-6 animate-spin text-white" />
-        </Frame>
+        </div>
       }
       future={{ v7_startTransition: true }}
     />

src/app/error.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useRouteError } from 'react-router-dom';
 
-import { Frame } from '@shared/frame';
-
 interface RouteError {
   statusText: string;
   message: string;
@@ -46,7 +44,7 @@ export function ErrorScreen() {
   }, []);
 
   return (
-    <Frame className="flex h-full items-center justify-center">
+    <div className="flex h-full items-center justify-center">
       <div className="flex w-full flex-col gap-4 px-4 md:max-w-lg md:px-0">
         <div className="flex flex-col">
           <h1 className="mb-1 text-2xl font-semibold text-white">
@@ -88,6 +86,6 @@ export function ErrorScreen() {
           </button>
         </div>
       </div>
-    </Frame>
+    </div>
   );
 }

src/shared/accounts/active.tsx

@@ -68,12 +68,12 @@ export function ActiveAccount() {
           className="h-9 w-9 shrink-0 rounded-lg object-cover"
         />
         <div className="flex flex-col items-start">
-          <p className="max-w-[10rem] truncate text-base font-semibold leading-none text-white">
+          <div className="max-w-[10rem] truncate text-sm font-semibold text-white">
             {user?.name || user?.display_name || user?.displayName}
-          </p>
-          <span className="max-w-[7rem] truncate text-sm leading-none text-white/50">
+          </div>
+          <div className="max-w-[7rem] truncate text-sm text-white/50">
             {user?.nip05 || displayNpub(db.account.pubkey, 12)}
-          </span>
+          </div>
         </div>
       </Link>
       <div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">

src/shared/frame.tsx

@@ -1,28 +0,0 @@
-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':
-        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,6 +1,5 @@
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 
-import { Frame } from '@shared/frame';
 import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
@@ -9,14 +8,14 @@ export function AppLayout() {
       <div className="shrink-0">
         <Navigation />
       </div>
-      <Frame className="h-full w-full flex-1">
+      <div className="h-full w-full flex-1">
         <Outlet />
         <ScrollRestoration
           getKey={(location) => {
             return location.pathname;
           }}
         />
-      </Frame>
+      </div>
     </div>
   );
 }

src/shared/layouts/auth.tsx

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

src/shared/layouts/note.tsx

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

src/shared/layouts/settings.tsx

@@ -1,13 +1,12 @@
 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">
-      <Frame className="relative flex h-full w-[232px] flex-col" lighter>
+      <div className="relative flex h-full w-[232px] flex-col">
         <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">
@@ -56,7 +55,7 @@ export function SettingsLayout() {
             </NavLink>
           </div>
         </div>
-      </Frame>
+      </div>
       <div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
         <Outlet />
         <ScrollRestoration

src/shared/navigation.tsx

@@ -5,7 +5,6 @@ import { useStorage } from '@libs/storage/provider';
 
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
-import { Frame } from '@shared/frame';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
@@ -21,10 +20,7 @@ export function Navigation() {
   const navigate = useNavigate();
 
   return (
-    <Frame
-      className="relative flex h-full w-[232px] flex-col border-r border-white/5"
-      lighter
-    >
+    <div className="relative flex h-full w-[232px] flex-col border-r border-white/5">
       <div
         data-tauri-drag-region
         className="inline-flex h-16 w-full items-center justify-between px-3"
@@ -147,6 +143,6 @@ export function Navigation() {
       <div className="relative shrink-0">
         <ActiveAccount />
       </div>
-    </Frame>
+    </div>
   );
 }