From 191ca503aa33e2b9a0ff54c6d296a54aa48730d4 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Thu, 7 Dec 2023 20:58:25 +1100 Subject: [PATCH] Unify sidebar styling (#1874) * consisten top of sidebar padding * only show navigation buttons in tauri * ignore non-idle router events on web --- apps/web/src/App.tsx | 3 ++ .../$libraryId/Layout/Sidebar/Contents.tsx | 43 ++++++++----------- .../app/$libraryId/Layout/Sidebar/index.tsx | 5 +-- interface/app/$libraryId/TopBar/index.tsx | 5 ++- interface/app/$libraryId/settings/Sidebar.tsx | 8 ++-- 5 files changed, 32 insertions(+), 32 deletions(-) diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 567ee1930..0f9176b1d 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -133,6 +133,9 @@ function useRouter() { const router = createBrowserRouter(routes); router.subscribe((event) => { + // we don't care about non-idle events as those are artifacts of form mutations + suspense + if (event.navigation.state !== 'idle') return; + setRouter((router) => { const currentIndex: number | undefined = history.state?.idx; if (currentIndex === undefined) return router; diff --git a/interface/app/$libraryId/Layout/Sidebar/Contents.tsx b/interface/app/$libraryId/Layout/Sidebar/Contents.tsx index 344d6e115..7ae51afd9 100644 --- a/interface/app/$libraryId/Layout/Sidebar/Contents.tsx +++ b/interface/app/$libraryId/Layout/Sidebar/Contents.tsx @@ -1,8 +1,5 @@ -import { ArrowsClockwise, Cloud, Planet } from '@phosphor-icons/react'; -import { useNavigate } from 'react-router'; +import { ArrowsClockwise, Cloud } from '@phosphor-icons/react'; import { LibraryContextProvider, useClientContext, useFeatureFlag } from '@sd/client'; -import { Tooltip } from '@sd/ui'; -import { useKeysMatcher, useShortcut } from '~/hooks'; import { EphemeralSection } from './EphemeralSection'; import Icon from './Icon'; @@ -11,13 +8,6 @@ import SidebarLink from './Link'; export default () => { const { library } = useClientContext(); - const navigate = useNavigate(); - const symbols = useKeysMatcher(['Meta', 'Shift']); - - // useShortcut('navToOverview', (e) => { - // e.stopPropagation(); - // navigate('overview'); - // }); return (
@@ -30,20 +20,23 @@ export default () => { Imports */} -
- {useFeatureFlag('syncRoute') && ( - - - Sync - - )} - {useFeatureFlag('cloud') && ( - - - Cloud - - )} -
+ {useFeatureFlag('syncRoute') || + (useFeatureFlag('cloud') && ( +
+ {useFeatureFlag('syncRoute') && ( + + + Sync + + )} + {useFeatureFlag('cloud') && ( + + + Cloud + + )} +
+ ))} {library && ( diff --git a/interface/app/$libraryId/Layout/Sidebar/index.tsx b/interface/app/$libraryId/Layout/Sidebar/index.tsx index 7750c3851..3a68a1b61 100644 --- a/interface/app/$libraryId/Layout/Sidebar/index.tsx +++ b/interface/app/$libraryId/Layout/Sidebar/index.tsx @@ -31,8 +31,7 @@ export default () => { 'relative flex min-h-full w-44 shrink-0 grow-0 flex-col gap-2.5 border-r border-sidebar-divider bg-sidebar px-2.5 pb-2 transition-[padding-top] ease-linear motion-reduce:transition-none', os === 'macOS' && windowState.isFullScreen ? '-mt-2 pt-[8.75px] duration-100' - : 'pt-1 duration-75', - + : 'pt-2.5 duration-75', os === 'macOS' || showControls.transparentBg ? 'bg-opacity-[0.65]' : 'bg-opacity-[1]' @@ -45,7 +44,7 @@ export default () => { data-tauri-drag-region className={clsx( 'w-full shrink-0 transition-[height] ease-linear motion-reduce:transition-none', - windowState.isFullScreen ? 'h-0 duration-100' : 'h-5 duration-75' + windowState.isFullScreen ? 'h-0 duration-100' : 'h-4 duration-75' )} /> )} diff --git a/interface/app/$libraryId/TopBar/index.tsx b/interface/app/$libraryId/TopBar/index.tsx index 4359faa76..5dc2a521a 100644 --- a/interface/app/$libraryId/TopBar/index.tsx +++ b/interface/app/$libraryId/TopBar/index.tsx @@ -7,6 +7,7 @@ import { Tooltip } from '@sd/ui'; import { useKeyMatcher, useOperatingSystem, useShowControls } from '~/hooks'; import { useRoutingContext } from '~/RoutingContext'; import { useTabsContext } from '~/TabsContext'; +import { usePlatform } from '~/util/Platform'; import { useExplorerStore } from '../Explorer/store'; import { useTopBarContext } from './Layout'; @@ -36,6 +37,8 @@ const TopBar = () => { ctx.setTopBarHeight.call(undefined, height); }, [ctx.setTopBarHeight]); + const platform = usePlatform(); + return (
{ data-tauri-drag-region className="flex flex-1 items-center gap-3.5 overflow-hidden" > - + {platform.platform === 'tauri' && }
diff --git a/interface/app/$libraryId/settings/Sidebar.tsx b/interface/app/$libraryId/settings/Sidebar.tsx index 3ba990e8a..b859fa2ef 100644 --- a/interface/app/$libraryId/settings/Sidebar.tsx +++ b/interface/app/$libraryId/settings/Sidebar.tsx @@ -15,10 +15,10 @@ import { TagSimple, User } from '@phosphor-icons/react'; -import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'; import { useFeatureFlag } from '@sd/client'; import { tw } from '@sd/ui'; -import { useOperatingSystem } from '~/hooks/useOperatingSystem'; +import { useOperatingSystem } from '~/hooks'; +import { usePlatform } from '~/util/Platform'; import Icon from '../Layout/Sidebar/Icon'; import SidebarLink from '../Layout/Sidebar/Link'; @@ -28,13 +28,15 @@ const Heading = tw.div`mb-1 ml-1 text-xs font-semibold text-gray-400`; const Section = tw.div`space-y-0.5`; export default () => { + const { platform } = usePlatform(); const os = useOperatingSystem(); + // const isPairingEnabled = useFeatureFlag('p2pPairing'); const isBackupsEnabled = useFeatureFlag('backups'); return (
- {os !== 'browser' ? ( + {platform === 'tauri' ? (