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

@@ -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;

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 (
 		<div className="no-scrollbar mask-fade-out flex grow flex-col space-y-5 overflow-x-hidden overflow-y-scroll pb-10">
@@ -30,20 +20,23 @@ export default () => {
 					<Icon component={ArchiveBox} />
 					Imports
 				</SidebarLink> */}
-			<div className="space-y-0.5">
-				{useFeatureFlag('syncRoute') && (
-					<SidebarLink to="sync">
-						<Icon component={ArrowsClockwise} />
-						Sync
-					</SidebarLink>
-				)}
-				{useFeatureFlag('cloud') && (
-					<SidebarLink to="cloud">
-						<Icon component={Cloud} />
-						Cloud
-					</SidebarLink>
-				)}
-			</div>
+			{useFeatureFlag('syncRoute') ||
+				(useFeatureFlag('cloud') && (
+					<div className="space-y-0.5">
+						{useFeatureFlag('syncRoute') && (
+							<SidebarLink to="sync">
+								<Icon component={ArrowsClockwise} />
+								Sync
+							</SidebarLink>
+						)}
+						{useFeatureFlag('cloud') && (
+							<SidebarLink to="cloud">
+								<Icon component={Cloud} />
+								Cloud
+							</SidebarLink>
+						)}
+					</div>
+				))}
 			<EphemeralSection />
 			{library && (
 				<LibraryContextProvider library={library}>

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'
 					)}
 				/>
 			)}

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 (
 		<div
 			ref={ref}
@@ -57,7 +60,7 @@ const TopBar = () => {
 					data-tauri-drag-region
 					className="flex flex-1 items-center gap-3.5 overflow-hidden"
 				>
-					<NavigationButtons />
+					{platform.platform === 'tauri' && <NavigationButtons />}
 					<div ref={ctx.setLeft} className="overflow-hidden" />
 				</div>
 

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 (
 		<div className="custom-scroll no-scrollbar h-full w-60 max-w-[180px] shrink-0 border-r border-app-line/50 pb-5">
-			{os !== 'browser' ? (
+			{platform === 'tauri' ? (
 				<div
 					data-tauri-drag-region={os === 'macOS'}
 					className="mb-3 h-3 w-full p-3 pl-[14px] pt-[10px]"