From 2fcc4dead104c1597c233a5f2c228665595e1471 Mon Sep 17 00:00:00 2001 From: reya Date: Thu, 14 Dec 2023 13:22:03 +0700 Subject: [PATCH] feat(router): restructure --- package.json | 2 +- pnpm-lock.yaml | 22 +- src/app.tsx | 454 ++++++++++++++---------------- src/app/auth/finish.tsx | 83 +----- src/app/auth/tutorials/finish.tsx | 87 +----- src/main.jsx | 3 +- src/shared/layouts/app.tsx | 32 +-- src/shared/layouts/auth.tsx | 20 +- src/shared/layouts/composer.tsx | 52 ++++ src/shared/layouts/home.tsx | 13 + src/shared/layouts/new.tsx | 75 ----- src/shared/layouts/note.tsx | 21 -- src/shared/layouts/settings.tsx | 183 ++++++------ 13 files changed, 404 insertions(+), 643 deletions(-) create mode 100644 src/shared/layouts/composer.tsx create mode 100644 src/shared/layouts/home.tsx delete mode 100644 src/shared/layouts/new.tsx delete mode 100644 src/shared/layouts/note.tsx diff --git a/package.json b/package.json index bda59738..53ffdccf 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.49.0", "react-hotkeys-hook": "^4.4.1", - "react-router-dom": "^6.20.1", + "react-router-dom": "^6.21.0", "react-string-replace": "^1.1.1", "sonner": "^1.2.4", "tippy.js": "^6.3.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c14908d..99828e71 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -186,8 +186,8 @@ dependencies: specifier: ^4.4.1 version: 4.4.1(react-dom@18.2.0)(react@18.2.0) react-router-dom: - specifier: ^6.20.1 - version: 6.20.1(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.21.0 + version: 6.21.0(react-dom@18.2.0)(react@18.2.0) react-string-replace: specifier: ^1.1.1 version: 1.1.1 @@ -1774,8 +1774,8 @@ packages: type-fest: 2.19.0 dev: false - /@remix-run/router@1.13.1: - resolution: {integrity: sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==} + /@remix-run/router@1.14.0: + resolution: {integrity: sha512-WOHih+ClN7N8oHk9N4JUiMxQJmRVaOxcg8w7F/oHUXzJt920ekASLI/7cYX8XkntDWRhLZtsk6LbGrkgOAvi5A==} engines: {node: '>=14.0.0'} dev: false @@ -5272,26 +5272,26 @@ packages: use-sidecar: 1.1.2(@types/react@18.2.43)(react@18.2.0) dev: false - /react-router-dom@6.20.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==} + /react-router-dom@6.21.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-1dUdVj3cwc1npzJaf23gulB562ESNvxf7E4x8upNJycqyUm5BRRZ6dd3LrlzhtLaMrwOCO8R0zoiYxdaJx4LlQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.13.1 + '@remix-run/router': 1.14.0 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-router: 6.20.1(react@18.2.0) + react-router: 6.21.0(react@18.2.0) dev: false - /react-router@6.20.1(react@18.2.0): - resolution: {integrity: sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==} + /react-router@6.21.0(react@18.2.0): + resolution: {integrity: sha512-hGZ0HXbwz3zw52pLZV3j3+ec+m/PQ9cTpBvqjFQmy2XVUWGn5MD+31oXHb6dVTxYzmAeaiUBYjkoNz66n3RGCg==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.13.1 + '@remix-run/router': 1.14.0 react: 18.2.0 dev: false diff --git a/src/app.tsx b/src/app.tsx index baea42e6..1bf1064a 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,24 +1,17 @@ import { fetch } from '@tauri-apps/plugin-http'; import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom'; -import { ChatsScreen } from '@app/chats'; import { ErrorScreen } from '@app/error'; import { useArk } from '@libs/ark'; import { LoaderIcon } from '@shared/icons'; import { AppLayout } from '@shared/layouts/app'; import { AuthLayout } from '@shared/layouts/auth'; -import { NewLayout } from '@shared/layouts/new'; -import { NoteLayout } from '@shared/layouts/note'; +import { ComposerLayout } from '@shared/layouts/composer'; +import { HomeLayout } from '@shared/layouts/home'; import { SettingsLayout } from '@shared/layouts/settings'; -import './app.css'; export default function App() { const ark = useArk(); - const accountLoader = async () => { - if (!ark.account) return redirect('/auth/welcome'); - return null; - }; - const relayLoader = async ({ params }) => { return defer({ relay: fetch(`https://${params.url}`, { @@ -32,249 +25,234 @@ export default function App() { const router = createBrowserRouter([ { - path: '/', - element: , - errorElement: , - loader: accountLoader, + element: , children: [ { - path: '', - async lazy() { - const { HomeScreen } = await import('@app/home'); - return { Component: HomeScreen }; + path: '/', + element: , + errorElement: , + loader: async () => { + if (!ark.account) return redirect('auth/welcome'); + return null; }, + children: [ + { + index: true, + async lazy() { + const { HomeScreen } = await import('@app/home'); + return { Component: HomeScreen }; + }, + }, + { + path: 'nwc', + async lazy() { + const { NWCScreen } = await import('@app/nwc'); + return { Component: NWCScreen }; + }, + }, + { + path: 'relays', + async lazy() { + const { RelaysScreen } = await import('@app/relays'); + return { Component: RelaysScreen }; + }, + }, + { + path: 'relays/:url', + loader: relayLoader, + async lazy() { + const { RelayScreen } = await import('@app/relays/relay'); + return { Component: RelayScreen }; + }, + }, + { + path: 'users/:pubkey', + async lazy() { + const { UserScreen } = await import('@app/users'); + return { Component: UserScreen }; + }, + }, + { + path: 'events/:id', + async lazy() { + const { TextNoteScreen } = await import('@app/notes/text'); + return { Component: TextNoteScreen }; + }, + }, + { + path: 'new', + element: , + children: [ + { + index: true, + async lazy() { + const { NewPostScreen } = await import('@app/new/post'); + return { Component: NewPostScreen }; + }, + }, + { + path: 'article', + async lazy() { + const { NewArticleScreen } = await import('@app/new/article'); + return { Component: NewArticleScreen }; + }, + }, + { + path: 'file', + async lazy() { + const { NewFileScreen } = await import('@app/new/file'); + return { Component: NewFileScreen }; + }, + }, + { + path: 'privkey', + async lazy() { + const { NewPrivkeyScreen } = await import('@app/new/privkey'); + return { Component: NewPrivkeyScreen }; + }, + }, + ], + }, + ], }, { - path: 'users/:pubkey', - async lazy() { - const { UserScreen } = await import('@app/users'); - return { Component: UserScreen }; - }, - }, - { - path: 'nwc', - async lazy() { - const { NWCScreen } = await import('@app/nwc'); - return { Component: NWCScreen }; - }, - }, - { - path: 'relays', - async lazy() { - const { RelaysScreen } = await import('@app/relays'); - return { Component: RelaysScreen }; - }, - }, - { - path: 'relays/:url', - loader: relayLoader, - async lazy() { - const { RelayScreen } = await import('@app/relays/relay'); - return { Component: RelayScreen }; - }, - }, - { - path: 'chats', - element: , + path: 'auth', + element: , errorElement: , children: [ { - path: 'chat/:pubkey', + path: 'welcome', async lazy() { - const { ChatScreen } = await import('@app/chats/chat'); - return { Component: ChatScreen }; + const { WelcomeScreen } = await import('@app/auth/welcome'); + return { Component: WelcomeScreen }; + }, + }, + { + path: 'create', + async lazy() { + const { CreateAccountScreen } = await import('@app/auth/create'); + return { Component: CreateAccountScreen }; + }, + }, + { + path: 'import', + async lazy() { + const { ImportAccountScreen } = await import('@app/auth/import'); + return { Component: ImportAccountScreen }; + }, + }, + { + path: 'onboarding', + async lazy() { + const { OnboardingScreen } = await import('@app/auth/onboarding'); + return { Component: OnboardingScreen }; + }, + }, + { + path: 'follow', + async lazy() { + const { FollowScreen } = await import('@app/auth/follow'); + return { Component: FollowScreen }; + }, + }, + { + path: 'finish', + async lazy() { + const { FinishScreen } = await import('@app/auth/finish'); + return { Component: FinishScreen }; + }, + }, + { + path: 'tutorials/note', + async lazy() { + const { TutorialNoteScreen } = await import('@app/auth/tutorials/note'); + return { Component: TutorialNoteScreen }; + }, + }, + { + path: 'tutorials/widget', + async lazy() { + const { TutorialWidgetScreen } = await import( + '@app/auth/tutorials/widget' + ); + return { Component: TutorialWidgetScreen }; + }, + }, + { + path: 'tutorials/posting', + async lazy() { + const { TutorialPostingScreen } = await import( + '@app/auth/tutorials/posting' + ); + return { Component: TutorialPostingScreen }; + }, + }, + { + path: 'tutorials/finish', + async lazy() { + const { TutorialFinishScreen } = await import( + '@app/auth/tutorials/finish' + ); + return { Component: TutorialFinishScreen }; }, }, ], }, - ], - }, - { - path: '/new', - element: , - errorElement: , - children: [ { - path: '', - async lazy() { - const { NewPostScreen } = await import('@app/new/post'); - return { Component: NewPostScreen }; - }, - }, - { - path: 'article', - async lazy() { - const { NewArticleScreen } = await import('@app/new/article'); - return { Component: NewArticleScreen }; - }, - }, - { - path: 'file', - async lazy() { - const { NewFileScreen } = await import('@app/new/file'); - return { Component: NewFileScreen }; - }, - }, - { - path: 'privkey', - async lazy() { - const { NewPrivkeyScreen } = await import('@app/new/privkey'); - return { Component: NewPrivkeyScreen }; - }, - }, - ], - }, - { - path: '/notes', - element: , - errorElement: , - children: [ - { - path: 'text/:id', - async lazy() { - const { TextNoteScreen } = await import('@app/notes/text'); - return { Component: TextNoteScreen }; - }, - }, - { - path: 'article/:id', - async lazy() { - const { ArticleNoteScreen } = await import('@app/notes/article'); - return { Component: ArticleNoteScreen }; - }, - }, - ], - }, - { - path: '/auth', - element: , - errorElement: , - children: [ - { - path: 'welcome', - async lazy() { - const { WelcomeScreen } = await import('@app/auth/welcome'); - return { Component: WelcomeScreen }; - }, - }, - { - path: 'create', - async lazy() { - const { CreateAccountScreen } = await import('@app/auth/create'); - return { Component: CreateAccountScreen }; - }, - }, - { - path: 'import', - async lazy() { - const { ImportAccountScreen } = await import('@app/auth/import'); - return { Component: ImportAccountScreen }; - }, - }, - { - path: 'onboarding', - async lazy() { - const { OnboardingScreen } = await import('@app/auth/onboarding'); - return { Component: OnboardingScreen }; - }, - }, - { - path: 'follow', - async lazy() { - const { FollowScreen } = await import('@app/auth/follow'); - return { Component: FollowScreen }; - }, - }, - { - path: 'finish', - async lazy() { - const { FinishScreen } = await import('@app/auth/finish'); - return { Component: FinishScreen }; - }, - }, - { - path: 'tutorials/note', - async lazy() { - const { TutorialNoteScreen } = await import('@app/auth/tutorials/note'); - return { Component: TutorialNoteScreen }; - }, - }, - { - path: 'tutorials/widget', - async lazy() { - const { TutorialWidgetScreen } = await import('@app/auth/tutorials/widget'); - return { Component: TutorialWidgetScreen }; - }, - }, - { - path: 'tutorials/posting', - async lazy() { - const { TutorialPostingScreen } = await import('@app/auth/tutorials/posting'); - return { Component: TutorialPostingScreen }; - }, - }, - { - path: 'tutorials/finish', - async lazy() { - const { TutorialFinishScreen } = await import('@app/auth/tutorials/finish'); - return { Component: TutorialFinishScreen }; - }, - }, - ], - }, - { - path: '/settings', - element: , - errorElement: , - children: [ - { - path: '', - async lazy() { - const { UserSettingScreen } = await import('@app/settings'); - return { Component: UserSettingScreen }; - }, - }, - { - path: 'edit-profile', - async lazy() { - const { EditProfileScreen } = await import('@app/settings/editProfile'); - return { Component: EditProfileScreen }; - }, - }, - { - path: 'edit-contact', - async lazy() { - const { EditContactScreen } = await import('@app/settings/editContact'); - return { Component: EditContactScreen }; - }, - }, - { - path: 'general', - async lazy() { - const { GeneralSettingScreen } = await import('@app/settings/general'); - return { Component: GeneralSettingScreen }; - }, - }, - { - path: 'backup', - async lazy() { - const { BackupSettingScreen } = await import('@app/settings/backup'); - return { Component: BackupSettingScreen }; - }, - }, - { - path: 'advanced', - async lazy() { - const { AdvancedSettingScreen } = await import('@app/settings/advanced'); - return { Component: AdvancedSettingScreen }; - }, - }, - { - path: 'about', - async lazy() { - const { AboutScreen } = await import('@app/settings/about'); - return { Component: AboutScreen }; - }, + path: 'settings', + element: , + errorElement: , + children: [ + { + index: true, + async lazy() { + const { UserSettingScreen } = await import('@app/settings'); + return { Component: UserSettingScreen }; + }, + }, + { + path: 'edit-profile', + async lazy() { + const { EditProfileScreen } = await import('@app/settings/editProfile'); + return { Component: EditProfileScreen }; + }, + }, + { + path: 'edit-contact', + async lazy() { + const { EditContactScreen } = await import('@app/settings/editContact'); + return { Component: EditContactScreen }; + }, + }, + { + path: 'general', + async lazy() { + const { GeneralSettingScreen } = await import('@app/settings/general'); + return { Component: GeneralSettingScreen }; + }, + }, + { + path: 'backup', + async lazy() { + const { BackupSettingScreen } = await import('@app/settings/backup'); + return { Component: BackupSettingScreen }; + }, + }, + { + path: 'advanced', + async lazy() { + const { AdvancedSettingScreen } = await import('@app/settings/advanced'); + return { Component: AdvancedSettingScreen }; + }, + }, + { + path: 'about', + async lazy() { + const { AboutScreen } = await import('@app/settings/about'); + return { Component: AboutScreen }; + }, + }, + ], }, ], }, diff --git a/src/app/auth/finish.tsx b/src/app/auth/finish.tsx index 781db3e4..741df4d0 100644 --- a/src/app/auth/finish.tsx +++ b/src/app/auth/finish.tsx @@ -1,78 +1,6 @@ -import { NDKKind } from '@nostr-dev-kit/ndk'; -import { useQueryClient } from '@tanstack/react-query'; -import { useState } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import { useArk } from '@libs/ark'; -import { LoaderIcon } from '@shared/icons'; -import { FETCH_LIMIT } from '@utils/constants'; +import { Link } from 'react-router-dom'; export function FinishScreen() { - const ark = useArk(); - const [loading, setLoading] = useState(false); - - const queryClient = useQueryClient(); - const navigate = useNavigate(); - - const prefetch = async () => { - if (!ark.account.contacts.length) return navigate('/'); - - try { - setLoading(true); - - // prefetch newsfeed - await queryClient.prefetchInfiniteQuery({ - queryKey: ['newsfeed'], - initialPageParam: 0, - queryFn: async ({ - signal, - pageParam, - }: { - signal: AbortSignal; - pageParam: number; - }) => { - return await ark.getInfiniteEvents({ - filter: { - kinds: [NDKKind.Text, NDKKind.Repost], - authors: !ark.account.contacts.length - ? [ark.account.pubkey] - : ark.account.contacts, - }, - limit: FETCH_LIMIT, - pageParam, - signal, - }); - }, - }); - - // prefetch notification - await queryClient.prefetchInfiniteQuery({ - queryKey: ['notification'], - initialPageParam: 0, - queryFn: async ({ - signal, - pageParam, - }: { - signal: AbortSignal; - pageParam: number; - }) => { - return await ark.getInfiniteEvents({ - filter: { - kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap], - '#p': [ark.account.pubkey], - }, - limit: FETCH_LIMIT, - pageParam, - signal, - }); - }, - }); - - navigate('/'); - } catch (e) { - console.error(e); - } - }; - return (
@@ -89,13 +17,12 @@ export function FinishScreen() { > Start tutorial - + Skip +

You need to restart app to make changes in previous step take effect or you can continue with Lume default settings diff --git a/src/app/auth/tutorials/finish.tsx b/src/app/auth/tutorials/finish.tsx index 241043a1..576c5c9a 100644 --- a/src/app/auth/tutorials/finish.tsx +++ b/src/app/auth/tutorials/finish.tsx @@ -1,78 +1,6 @@ -import { NDKKind } from '@nostr-dev-kit/ndk'; -import { useQueryClient } from '@tanstack/react-query'; -import { useState } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import { useArk } from '@libs/ark'; -import { LoaderIcon } from '@shared/icons'; -import { FETCH_LIMIT } from '@utils/constants'; +import { Link } from 'react-router-dom'; export function TutorialFinishScreen() { - const ark = useArk(); - const [loading, setLoading] = useState(false); - - const queryClient = useQueryClient(); - const navigate = useNavigate(); - - const prefetch = async () => { - if (!ark.account.contacts.length) return navigate('/'); - - try { - setLoading(true); - - // prefetch newsfeed - await queryClient.prefetchInfiniteQuery({ - queryKey: ['newsfeed'], - initialPageParam: 0, - queryFn: async ({ - signal, - pageParam, - }: { - signal: AbortSignal; - pageParam: number; - }) => { - return await ark.getInfiniteEvents({ - filter: { - kinds: [NDKKind.Text, NDKKind.Repost], - authors: !ark.account.contacts.length - ? [ark.account.pubkey] - : ark.account.contacts, - }, - limit: FETCH_LIMIT, - pageParam, - signal, - }); - }, - }); - - // prefetch notification - await queryClient.prefetchInfiniteQuery({ - queryKey: ['notification'], - initialPageParam: 0, - queryFn: async ({ - signal, - pageParam, - }: { - signal: AbortSignal; - pageParam: number; - }) => { - return await ark.getInfiniteEvents({ - filter: { - kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Reaction, NDKKind.Zap], - '#p': [ark.account.pubkey], - }, - limit: FETCH_LIMIT, - pageParam, - signal, - }); - }, - }); - - navigate('/'); - } catch (e) { - console.error(e); - } - }; - return (

@@ -83,17 +11,12 @@ export function TutorialFinishScreen() {
- + Start using Lume + - + diff --git a/src/shared/layouts/app.tsx b/src/shared/layouts/app.tsx index 669a8f20..a3e43142 100644 --- a/src/shared/layouts/app.tsx +++ b/src/shared/layouts/app.tsx @@ -1,38 +1,24 @@ +import { type Platform } from '@tauri-apps/plugin-os'; import { Outlet, ScrollRestoration } from 'react-router-dom'; import { twMerge } from 'tailwind-merge'; -import { useArk } from '@libs/ark'; -import { Navigation } from '@shared/navigation'; import { WindowTitleBar } from '@shared/titlebar'; -export function AppLayout() { - const ark = useArk(); - +export function AppLayout({ platform }: { platform: Platform }) { return (
- {ark.platform !== 'macos' ? ( - + {platform !== 'macos' ? ( + ) : ( -
+
)} -
-
- -
-
- - -
+
+ +
); diff --git a/src/shared/layouts/auth.tsx b/src/shared/layouts/auth.tsx index 242168c6..21dfecaf 100644 --- a/src/shared/layouts/auth.tsx +++ b/src/shared/layouts/auth.tsx @@ -1,22 +1,10 @@ -import { Outlet, ScrollRestoration } from 'react-router-dom'; -import { useArk } from '@libs/ark'; -import { WindowTitleBar } from '@shared/titlebar'; +import { Outlet } from 'react-router-dom'; export function AuthLayout() { - const ark = useArk(); - return ( -
- {ark.platform !== 'macos' ? ( - - ) : ( -
- )} -
-
- - -
+
+
+
); diff --git a/src/shared/layouts/composer.tsx b/src/shared/layouts/composer.tsx new file mode 100644 index 00000000..b8bf6499 --- /dev/null +++ b/src/shared/layouts/composer.tsx @@ -0,0 +1,52 @@ +import { NavLink, Outlet, useLocation } from 'react-router-dom'; +import { twMerge } from 'tailwind-merge'; + +export function ComposerLayout() { + const location = useLocation(); + + return ( +
+
+ {location.pathname !== '/new/privkey' ? ( +
+ + twMerge( + 'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium', + isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent' + ) + } + > + Post + + + twMerge( + 'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium', + isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent' + ) + } + > + Article + + + twMerge( + 'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium', + isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent' + ) + } + > + File Sharing + +
+ ) : null} +
+ +
+ ); +} diff --git a/src/shared/layouts/home.tsx b/src/shared/layouts/home.tsx new file mode 100644 index 00000000..b8806015 --- /dev/null +++ b/src/shared/layouts/home.tsx @@ -0,0 +1,13 @@ +import { Outlet } from 'react-router-dom'; +import { Navigation } from '@shared/navigation'; + +export function HomeLayout() { + return ( +
+ +
+ +
+
+ ); +} diff --git a/src/shared/layouts/new.tsx b/src/shared/layouts/new.tsx deleted file mode 100644 index e8738896..00000000 --- a/src/shared/layouts/new.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { Link, NavLink, Outlet, useLocation } from 'react-router-dom'; -import { twMerge } from 'tailwind-merge'; -import { useArk } from '@libs/ark'; -import { ArrowLeftIcon } from '@shared/icons'; -import { WindowTitleBar } from '@shared/titlebar'; - -export function NewLayout() { - const ark = useArk(); - const location = useLocation(); - - return ( -
- {ark.platform !== 'macos' ? ( - - ) : ( -
- )} -
-
-
- - - -
-
-
- {location.pathname !== '/new/privkey' ? ( -
- - twMerge( - 'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium', - isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent' - ) - } - > - Post - - - twMerge( - 'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium', - isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent' - ) - } - > - Article - - - twMerge( - 'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium', - isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent' - ) - } - > - File Sharing - -
- ) : null} -
- -
-
-
-
- ); -} diff --git a/src/shared/layouts/note.tsx b/src/shared/layouts/note.tsx deleted file mode 100644 index a056ab11..00000000 --- a/src/shared/layouts/note.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Outlet, ScrollRestoration } from 'react-router-dom'; -import { useArk } from '@libs/ark'; -import { WindowTitleBar } from '@shared/titlebar'; - -export function NoteLayout() { - const ark = useArk(); - - return ( -
- {ark.platform !== 'macos' ? ( - - ) : ( -
- )} -
- - -
-
- ); -} diff --git a/src/shared/layouts/settings.tsx b/src/shared/layouts/settings.tsx index eca98c4b..975800f4 100644 --- a/src/shared/layouts/settings.tsx +++ b/src/shared/layouts/settings.tsx @@ -1,6 +1,5 @@ -import { NavLink, Outlet, ScrollRestoration, useNavigate } from 'react-router-dom'; +import { NavLink, Outlet, useNavigate } from 'react-router-dom'; import { twMerge } from 'tailwind-merge'; -import { useArk } from '@libs/ark'; import { AdvancedSettingsIcon, ArrowLeftIcon, @@ -9,108 +8,98 @@ import { SettingsIcon, UserIcon, } from '@shared/icons'; -import { WindowTitleBar } from '@shared/titlebar'; export function SettingsLayout() { - const ark = useArk(); const navigate = useNavigate(); return ( -
- {ark.platform !== 'macos' ? ( - - ) : ( -
- )} -
-
-
- -
-
- - twMerge( - 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', - isActive - ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800' - : '' - ) - } - > - -

User

- - - twMerge( - 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', - isActive - ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800' - : '' - ) - } - > - -

General

- - - twMerge( - 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', - isActive - ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800' - : '' - ) - } - > - -

Backup

- - - twMerge( - 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', - isActive - ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800' - : '' - ) - } - > - -

Advanced

- - - twMerge( - 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', - isActive - ? 'bg-neutral-100 text-blue-500 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800' - : '' - ) - } - > - -

About

- -
-
+
+
+
+
- - +
+ + twMerge( + 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', + isActive + ? 'bg-neutral-50 text-blue-500 hover:bg-neutral-100 dark:bg-neutral-950 dark:hover:bg-neutral-900' + : '' + ) + } + > + +

User

+ + + twMerge( + 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', + isActive + ? 'bg-neutral-50 text-blue-500 hover:bg-neutral-100 dark:bg-neutral-950 dark:hover:bg-neutral-900' + : '' + ) + } + > + +

General

+ + + twMerge( + 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', + isActive + ? 'bg-neutral-50 text-blue-500 hover:bg-neutral-100 dark:bg-neutral-950 dark:hover:bg-neutral-900' + : '' + ) + } + > + +

Backup

+ + + twMerge( + 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', + isActive + ? 'bg-neutral-50 text-blue-500 hover:bg-neutral-100 dark:bg-neutral-950 dark:hover:bg-neutral-900' + : '' + ) + } + > + +

Advanced

+ + + twMerge( + 'flex w-20 shrink-0 flex-col items-center justify-center rounded-lg px-2 py-2 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-900', + isActive + ? 'bg-neutral-50 text-blue-500 hover:bg-neutral-100 dark:bg-neutral-950 dark:hover:bg-neutral-900' + : '' + ) + } + > + +

About

+ +
+
+
); }