diff --git a/apps/landing/src/components/NavBar.tsx b/apps/landing/src/components/NavBar.tsx index 1c36dccd9..ad9c7101b 100644 --- a/apps/landing/src/components/NavBar.tsx +++ b/apps/landing/src/components/NavBar.tsx @@ -142,6 +142,7 @@ export default function NavBar() { buttonIcon={} buttonProps={{ className: '!p-1 ml-[140px] hover:!bg-transparent' }} /> +
diff --git a/packages/client/package.json b/packages/client/package.json index 9f8fd64dc..6e0ca3c10 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -20,7 +20,6 @@ "@rspc/client": "^0.1.2", "@rspc/react": "^0.1.2", "@sd/config": "workspace:*", - "@sd/interface": "workspace:*", "@tanstack/react-query": "^4.10.1", "eventemitter3": "^4.0.7", "immer": "^9.0.15", diff --git a/packages/interface/package.json b/packages/interface/package.json index 387b62f82..bc17a2b6a 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -18,6 +18,7 @@ "@fontsource/inter": "^4.5.13", "@headlessui/react": "^1.7.3", "@heroicons/react": "^2.0.12", + "@loadable/component": "^5.15.2", "@radix-ui/react-dialog": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", "@radix-ui/react-icons": "^1.1.1", @@ -77,6 +78,7 @@ "@sd/config": "workspace:*", "@types/babel-core": "^6.25.7", "@types/byte-size": "^8.1.0", + "@types/loadable__component": "^5.13.4", "@types/lodash": "^4.14.186", "@types/node": "^18.8.2", "@types/pretty-bytes": "^5.2.0", diff --git a/packages/interface/src/AppRouter.tsx b/packages/interface/src/AppRouter.tsx index db5b6a7a2..d3149b853 100644 --- a/packages/interface/src/AppRouter.tsx +++ b/packages/interface/src/AppRouter.tsx @@ -1,42 +1,44 @@ +import loadable from '@loadable/component'; import { useCurrentLibrary, useInvalidateQuery } from '@sd/client'; -import { Suspense, lazy } from 'react'; +import { Suspense } from 'react'; import { Navigate, Route, Routes } from 'react-router-dom'; import { AppLayout } from './AppLayout'; import { useKeybindHandler } from './hooks/useKeyboardHandler'; -const DebugScreen = lazy(() => import('./screens/Debug')); -const SettingsScreen = lazy(() => import('./screens/settings/Settings')); -const TagExplorer = lazy(() => import('./screens/TagExplorer')); -const PhotosScreen = lazy(() => import('./screens/Photos')); -const OverviewScreen = lazy(() => import('./screens/Overview')); -const ContentScreen = lazy(() => import('./screens/Content')); -const LocationExplorer = lazy(() => import('./screens/LocationExplorer')); -const OnboardingScreen = lazy(() => import('./components/onboarding/Onboarding')); -const NotFound = lazy(() => import('./NotFound')); +// Using React.lazy breaks hot reload so we don't use it. +const DebugScreen = loadable(() => import('./screens/Debug')); +const SettingsScreen = loadable(() => import('./screens/settings/Settings')); +const TagExplorer = loadable(() => import('./screens/TagExplorer')); +const PhotosScreen = loadable(() => import('./screens/Photos')); +const OverviewScreen = loadable(() => import('./screens/Overview')); +const ContentScreen = loadable(() => import('./screens/Content')); +const LocationExplorer = loadable(() => import('./screens/LocationExplorer')); +const OnboardingScreen = loadable(() => import('./components/onboarding/Onboarding')); +const NotFound = loadable(() => import('./NotFound')); -const AppearanceSettings = lazy(() => import('./screens/settings/client/AppearanceSettings')); -const ExtensionSettings = lazy(() => import('./screens/settings/client/ExtensionsSettings')); -const GeneralSettings = lazy(() => import('./screens/settings/client/GeneralSettings')); -const KeybindingSettings = lazy(() => import('./screens/settings/client/KeybindingSettings')); -const PrivacySettings = lazy(() => import('./screens/settings/client/PrivacySettings')); -const AboutSpacedrive = lazy(() => import('./screens/settings/info/AboutSpacedrive')); -const Changelog = lazy(() => import('./screens/settings/info/Changelog')); -const Support = lazy(() => import('./screens/settings/info/Support')); -const ContactsSettings = lazy(() => import('./screens/settings/library/ContactsSettings')); -const KeysSettings = lazy(() => import('./screens/settings/library/KeysSetting')); -const LibraryGeneralSettings = lazy( +const AppearanceSettings = loadable(() => import('./screens/settings/client/AppearanceSettings')); +const ExtensionSettings = loadable(() => import('./screens/settings/client/ExtensionsSettings')); +const GeneralSettings = loadable(() => import('./screens/settings/client/GeneralSettings')); +const KeybindingSettings = loadable(() => import('./screens/settings/client/KeybindingSettings')); +const PrivacySettings = loadable(() => import('./screens/settings/client/PrivacySettings')); +const AboutSpacedrive = loadable(() => import('./screens/settings/info/AboutSpacedrive')); +const Changelog = loadable(() => import('./screens/settings/info/Changelog')); +const Support = loadable(() => import('./screens/settings/info/Support')); +const ContactsSettings = loadable(() => import('./screens/settings/library/ContactsSettings')); +const KeysSettings = loadable(() => import('./screens/settings/library/KeysSetting')); +const LibraryGeneralSettings = loadable( () => import('./screens/settings/library/LibraryGeneralSettings') ); -const LocationSettings = lazy(() => import('./screens/settings/library/LocationSettings')); -const NodesSettings = lazy(() => import('./screens/settings/library/NodesSettings')); -const SecuritySettings = lazy(() => import('./screens/settings/library/SecuritySettings')); -const SharingSettings = lazy(() => import('./screens/settings/library/SharingSettings')); -const SyncSettings = lazy(() => import('./screens/settings/library/SyncSettings')); -const TagsSettings = lazy(() => import('./screens/settings/library/TagsSettings')); -const ExperimentalSettings = lazy(() => import('./screens/settings/node/ExperimentalSettings')); -const LibrarySettings = lazy(() => import('./screens/settings/node/LibrariesSettings')); -const P2PSettings = lazy(() => import('./screens/settings/node/P2PSettings')); +const LocationSettings = loadable(() => import('./screens/settings/library/LocationSettings')); +const NodesSettings = loadable(() => import('./screens/settings/library/NodesSettings')); +const SecuritySettings = loadable(() => import('./screens/settings/library/SecuritySettings')); +const SharingSettings = loadable(() => import('./screens/settings/library/SharingSettings')); +const SyncSettings = loadable(() => import('./screens/settings/library/SyncSettings')); +const TagsSettings = loadable(() => import('./screens/settings/library/TagsSettings')); +const ExperimentalSettings = loadable(() => import('./screens/settings/node/ExperimentalSettings')); +const LibrarySettings = loadable(() => import('./screens/settings/node/LibrariesSettings')); +const P2PSettings = loadable(() => import('./screens/settings/node/P2PSettings')); export function AppRouter() { const { library } = useCurrentLibrary(); diff --git a/packages/interface/src/components/dialog/CreateLibraryDialog.tsx b/packages/interface/src/components/dialog/CreateLibraryDialog.tsx index 6ee5faa54..6195dac6f 100644 --- a/packages/interface/src/components/dialog/CreateLibraryDialog.tsx +++ b/packages/interface/src/components/dialog/CreateLibraryDialog.tsx @@ -17,8 +17,6 @@ export default function CreateLibraryDialog({ 'library.create', { onSuccess: (library: any) => { - console.log('SUBMITTING'); - setOpenCreateModal(false); queryClient.setQueryData(['library.list'], (libraries: any) => [ diff --git a/packages/interface/src/components/layout/Modal.tsx b/packages/interface/src/components/layout/Modal.tsx index 4f0d7989b..675ae4326 100644 --- a/packages/interface/src/components/layout/Modal.tsx +++ b/packages/interface/src/components/layout/Modal.tsx @@ -1,8 +1,7 @@ import { Transition } from '@headlessui/react'; import { XMarkIcon } from '@heroicons/react/24/solid'; -import { Button } from '@sd/ui'; +import { ButtonLink } from '@sd/ui'; import clsx from 'clsx'; -import { useNavigate } from 'react-router-dom'; export interface ModalProps { full?: boolean; @@ -10,7 +9,6 @@ export interface ModalProps { } export const Modal: React.FC = (props) => { - const navigate = useNavigate(); return (
= (props) => { >
navigate('/')} className="absolute top-0 left-0 w-screen h-screen bg-white -z-50 rounded-2xl dark:bg-gray-800 bg-opacity-90" /> - + navigate('settings/library') + to: 'settings/library' }, { name: 'Add Library', diff --git a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx index 3d8665755..a213a72ba 100644 --- a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx +++ b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx @@ -1,10 +1,9 @@ import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline'; import { useBridgeMutation, useBridgeQuery } from '@sd/client'; import { LibraryConfigWrapped } from '@sd/client'; -import { Button } from '@sd/ui'; +import { Button, ButtonLink } from '@sd/ui'; import { DotsSixVertical } from 'phosphor-react'; import { useState } from 'react'; -import { useNavigate } from 'react-router'; import CreateLibraryDialog from '../../../components/dialog/CreateLibraryDialog'; import DeleteLibraryDialog from '../../../components/dialog/DeleteLibraryDialog'; @@ -13,7 +12,6 @@ import { SettingsContainer } from '../../../components/settings/SettingsContaine import { SettingsHeader } from '../../../components/settings/SettingsHeader'; function LibraryListItem(props: { library: LibraryConfigWrapped }) { - const navigate = useNavigate(); const [openDeleteModal, setOpenDeleteModal] = useState(false); const { mutate: deleteLib, isLoading: libDeletePending } = useBridgeMutation('library.delete', { @@ -22,14 +20,6 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) { } }); - function handleEditLibrary() { - // switch library if requesting to edit non-current library - navigate('/settings/library'); - // if (props.library.uuid !== store.currentLibraryUuid) { - // switchLibrary(props.library.uuid); - // } - } - return ( @@ -38,9 +28,9 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {

{props.library.uuid}

- + + {button.to ? ( + + {button.icon && ( + + )} + {button.name} + + ) : ( + + )} ); }} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 018a6fe2e..969a41028 100644 Binary files a/pnpm-lock.yaml and b/pnpm-lock.yaml differ