Hide Notice and some tweaks (#782)

* Hide notice on overview and
- Removed prettier/recommended from eslint
- Optimized imports

* move overview check to parent

* don't show recents if there is none

* use useMatch

.prettierignore

@@ -1,12 +1,20 @@
 # built product/cache
 target/
 dist/
+
 # macOS/iOS product/cache
 .build/
 Pods/
+
 # just in case it tries to parse for some reason
 *.rs
+
 # we plainly don't need a lockfile to look nice
 pnpm-lock.yaml
+
+# Import order is important
+apps/desktop/src/index.tsx
+
 # codegen from rspc -- not supposed to look nice
 /packages/client/src/core.ts
+apps/desktop/src/commands.ts

apps/desktop/src/commands.ts

@@ -1,23 +1,19 @@
 // This file was generated by [tauri-specta](https://github.com/oscartbeaumont/tauri-specta). Do not edit this file manually.
 
 declare global {
-	interface Window {
-		__TAURI_INVOKE__<T>(cmd: string, args?: Record<string, unknown>): Promise<T>;
-	}
+    interface Window {
+        __TAURI_INVOKE__<T>(cmd: string, args?: Record<string, unknown>): Promise<T>;
+    }
 }
 
 const invoke = window.__TAURI_INVOKE__;
 
 export function appReady() {
-	return invoke<null>('app_ready');
+    return invoke<null>("app_ready")
 }
 
 export function openFilePath(library: string, id: number) {
-	return invoke<OpenFilePathResult>('open_file_path', { library, id });
+    return invoke<OpenFilePathResult>("open_file_path", { library,id })
 }
 
-export type OpenFilePathResult =
-	| { t: 'NoLibrary' }
-	| { t: 'NoFile' }
-	| { t: 'OpenError'; c: string }
-	| { t: 'AllGood' };
+export type OpenFilePathResult = { t: "NoLibrary" } | { t: "NoFile" } | { t: "OpenError"; c: string } | { t: "AllGood" }

apps/desktop/src/index.tsx

@@ -1,14 +1,14 @@
-// WARNING: BE CAREFUL SAVING THIS FILE WITH A FORMATTER ENABLED. The import order is important and goes against prettier's recommendations.
-import React, { Suspense } from 'react';
+// WARNING: Import order is important in this file. Make sure ~/patches comes before App.
+import { StrictMode, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import '~/patches';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-	<React.StrictMode>
+	<StrictMode>
 		<Suspense>
 			<App />
 		</Suspense>
-	</React.StrictMode>
+	</StrictMode>
 );

apps/landing/src/style.scss

@@ -169,7 +169,7 @@ html {
 }
 
 .slot-block {
-	@apply mb-2 rounded border-l-4 border-app-line bg-app-box py-3 px-4;
+	@apply mb-2 rounded border-l-4 border-app-line bg-app-box px-4 py-3;
 }
 .slot-block.note {
 	@apply border-yellow-400 bg-yellow-300/20;
@@ -184,7 +184,7 @@ html {
 	@apply m-0 text-sm font-bold uppercase text-white;
 }
 .slot-block-content {
-	@apply my-1 mx-0 mb-0 text-white;
+	@apply mx-0 my-1 mb-0 text-white;
 }
 .slot-block-title-icon {
 	@apply my-0 h-5 w-5 text-white;

apps/mobile/metro.config.js

@@ -34,21 +34,13 @@ const metroConfig = makeMetroConfig({
 		resolveRequest: (context, moduleName, platform) => {
 			if (moduleName.startsWith('@rspc/client/v2')) {
 				return {
-					filePath: path.resolve(
-						rspcClientPath,
-						'dist',
-						'v2.js'
-					),
+					filePath: path.resolve(rspcClientPath, 'dist', 'v2.js'),
 					type: 'sourceFile'
 				};
 			}
 			if (moduleName.startsWith('@rspc/react/v2')) {
 				return {
-					filePath: path.resolve(
-						rspcReactPath,
-						'dist',
-						'v2.js'
-					),
+					filePath: path.resolve(rspcReactPath, 'dist', 'v2.js'),
 					type: 'sourceFile'
 				};
 			}

interface/app/$libraryId/Explorer/DismissibleNotice.tsx

@@ -52,9 +52,11 @@ const notices = {
 
 export default () => {
 	const { layoutMode } = useExplorerStore();
+
 	const notice = notices[layoutMode];
 
 	if (!notice) return null;
+
 	return (
 		<DismissibleNotice
 			title={

interface/app/$libraryId/Explorer/File/DecryptDialog.tsx

@@ -1,8 +1,7 @@
 import { RadioGroup } from '@headlessui/react';
 import { Info } from 'phosphor-react';
 import { useLibraryMutation, useLibraryQuery } from '@sd/client';
-import { Button, Dialog, UseDialogProps, useDialog } from '@sd/ui';
-import { Tooltip } from '@sd/ui';
+import { Button, Dialog, Tooltip, UseDialogProps, useDialog } from '@sd/ui';
 import { PasswordInput, Switch, useZodForm, z } from '@sd/ui/src/forms';
 import { showAlertDialog } from '~/components/AlertDialog';
 import { usePlatform } from '~/util/Platform';

interface/app/$libraryId/Explorer/GridView.tsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useKey, useOnWindowResize } from 'rooks';
 import { ExplorerItem, formatBytes } from '@sd/client';
-import { Button } from '@sd/ui';
 import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
 import RenameTextBox from './File/RenameTextBox';
 import Thumb from './File/Thumb';

interface/app/$libraryId/Explorer/Inspector/FavoriteButton.tsx

@@ -1,7 +1,6 @@
 import { Heart } from 'phosphor-react';
 import { useEffect, useState } from 'react';
-import { useLibraryMutation } from '@sd/client';
-import { Object as SDObject } from '@sd/client';
+import { Object as SDObject, useLibraryMutation } from '@sd/client';
 import { Button } from '@sd/ui';
 
 interface Props {

interface/app/$libraryId/Explorer/Inspector/index.tsx

@@ -2,7 +2,7 @@
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { Barcode, CircleWavyCheck, Clock, Cube, Hash, Link, Lock, Snowflake } from 'phosphor-react';
-import { ComponentProps, useEffect, useRef, useState } from 'react';
+import { ComponentProps, useEffect, useState } from 'react';
 import {
 	ExplorerContext,
 	ExplorerItem,

interface/app/$libraryId/Explorer/MediaView.tsx

@@ -1,7 +1,7 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
 import { ArrowsOutSimple } from 'phosphor-react';
-import { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 import { useKey, useOnWindowResize } from 'rooks';
 import { ExplorerItem } from '@sd/client';

interface/app/$libraryId/Explorer/QuickPreview.tsx

@@ -2,8 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import { XCircle } from 'phosphor-react';
 import { useEffect, useRef, useState } from 'react';
-import { useTransition } from 'react-spring';
-import { animated } from 'react-spring';
+import { animated, useTransition } from 'react-spring';
 import { subscribeKey } from 'valtio/utils';
 import { ExplorerItem } from '~/../packages/client/src';
 import { showAlertDialog } from '~/components/AlertDialog';

interface/app/$libraryId/Explorer/View.tsx

@@ -8,7 +8,7 @@ import {
 	useContext,
 	useRef
 } from 'react';
-import { createSearchParams, useNavigate } from 'react-router-dom';
+import { createSearchParams, useMatch, useNavigate } from 'react-router-dom';
 import { ExplorerItem, isPath, useLibraryContext } from '@sd/client';
 import { Button } from '@sd/ui';
 import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
@@ -90,6 +90,9 @@ export default memo((props: Props) => {
 
 	const scrollRef = useRef<HTMLDivElement>(null);
 
+	// Hide notice on overview page
+	const isOverview = useMatch('/:libraryId/overview');
+
 	return (
 		<div
 			ref={scrollRef}
@@ -101,7 +104,7 @@ export default memo((props: Props) => {
 			style={{ paddingTop: TOP_BAR_HEIGHT }}
 			onClick={() => (getExplorerStore().selectedRowIndex = -1)}
 		>
-			<DismissibleNotice />
+			{!isOverview && <DismissibleNotice />}
 			<context.Provider value={{ data: props.data, scrollRef }}>
 				{layoutMode === 'grid' && <GridView />}
 				{layoutMode === 'rows' && <ListView />}

interface/app/$libraryId/Explorer/index.tsx

@@ -1,11 +1,6 @@
 import { useEffect } from 'react';
 import { useKey } from 'rooks';
-import {
-	ExplorerData,
-	useBridgeSubscription,
-	useLibraryContext,
-	useLibrarySubscription
-} from '@sd/client';
+import { ExplorerData, useLibrarySubscription } from '@sd/client';
 import { dialogManager } from '~/../packages/ui/src';
 import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
 import { Inspector } from '../Explorer/Inspector';

interface/app/$libraryId/KeyManager/Mounter.tsx

@@ -9,9 +9,9 @@ import {
 	SelectOption,
 	Slider,
 	Switch,
+	Tooltip,
 	tw
 } from '@sd/ui';
-import { Tooltip } from '@sd/ui';
 import { generatePassword } from '~/util';
 
 const KeyHeading = tw(CategoryHeading)`mb-1`;

interface/app/$libraryId/Layout/Sidebar/Job.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import {
-	ArrowsClockwise,
 	Camera,
 	Copy,
 	Eye,
@@ -9,7 +8,6 @@ import {
 	Folder,
 	LockSimple,
 	LockSimpleOpen,
-	Pause,
 	Question,
 	Scissors,
 	Trash,

interface/app/$libraryId/Layout/Sidebar/JobManager.tsx

@@ -2,7 +2,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Trash, X } from 'phosphor-react';
 import { useCallback } from 'react';
 import { useLibraryMutation, useLibraryQuery } from '@sd/client';
-import { JobReport } from '@sd/client';
 import { Button, CategoryHeading, PopoverClose, Tooltip } from '@sd/ui';
 import { showAlertDialog } from '~/components/AlertDialog';
 import GroupedJobs from './GroupedJobs';

interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx

@@ -1,11 +1,9 @@
 import clsx from 'clsx';
-import { ArrowsClockwise } from 'phosphor-react';
 import { Link, NavLink } from 'react-router-dom';
 import { arraysEqual, useLibraryQuery, useOnlineLocations } from '@sd/client';
 import { Folder } from '@sd/ui';
 import { AddLocationButton } from '~/app/$libraryId/settings/library/locations/AddLocationButton';
 import { SubtleButton } from '~/components/SubtleButton';
-import Icon from './Icon';
 import SidebarLink from './Link';
 import Section from './Section';
 

interface/app/$libraryId/Layout/Sidebar/Link.tsx

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
-import { NavLink, NavLinkProps, useMatch } from 'react-router-dom';
+import { NavLink, NavLinkProps } from 'react-router-dom';
 import { useOperatingSystem } from '~/hooks/useOperatingSystem';
 
 const styles = cva(

interface/app/$libraryId/TopBar/SearchBar.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { useEffect, useState, useTransition } from 'react';
-import { useRef } from 'react';
+import { useEffect, useRef, useState, useTransition } from 'react';
 import { useLocation, useNavigate, useResolvedPath } from 'react-router';
 import { createSearchParams, useSearchParams } from 'react-router-dom';
 import { useKey, useKeys } from 'rooks';
@@ -40,6 +39,7 @@ export default () => {
 
 	useEffect(() => {
 		if (searchPath.pathname === location.pathname) updateParams(value);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [value]);
 
 	useKeys([os === 'macOS' ? 'Meta' : 'Ctrl', 'f'], () => searchRef.current?.focus());

interface/app/$libraryId/TopBar/TopBarChildren.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { useContext, useLayoutEffect } from 'react';
-import { useState } from 'react';
+import { useContext, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Popover, Tooltip } from '@sd/ui';
 import { ToolOption } from '.';

interface/app/$libraryId/TopBar/TopBarMobile.tsx

@@ -1,6 +1,5 @@
 import { DotsThreeCircle } from 'phosphor-react';
-import { HTMLAttributes, forwardRef } from 'react';
-import React from 'react';
+import React, { HTMLAttributes, forwardRef } from 'react';
 import { Popover } from '@sd/ui';
 import { TOP_BAR_ICON_STYLE, ToolOption } from '.';
 import TopBarButton, { TopBarButtonProps } from './TopBarButton';

interface/app/$libraryId/debug.tsx

@@ -1,4 +1,4 @@
-import { useBridgeQuery, useLibraryMutation, useLibraryQuery } from '@sd/client';
+import { useBridgeQuery, useLibraryQuery } from '@sd/client';
 import { CodeBlock } from '~/components/Codeblock';
 import { usePlatform } from '~/util/Platform';
 
@@ -14,7 +14,7 @@ export const Component = () => {
 	//     alert('Database purged');
 	//   }
 	// });
-	const { mutate: identifyFiles } = useLibraryMutation('jobs.identifyUniqueFiles');
+	// const { mutate: identifyFiles } = useLibraryMutation('jobs.identifyUniqueFiles');
 	return (
 		<div className="flex flex-col space-y-5 p-5 pb-7 pt-2">
 			<h1 className="text-lg font-bold ">Developer Debugger</h1>

interface/app/$libraryId/overview.tsx

@@ -88,7 +88,7 @@ export const Component = () => {
 		initialData: { ...EMPTY_STATISTICS }
 	});
 	const { explorerViewOptions } = useExplorerTopBarOptions();
-	const { data: items } = useLibraryQuery(['files.getRecent', 50]);
+	const recentFiles = useLibraryQuery(['files.getRecent', 50]);
 
 	overviewMounted = true;
 
@@ -136,8 +136,13 @@ export const Component = () => {
 				<b>Note: </b>&nbsp; This is a pre-alpha build of Spacedrive, many features are yet
 				to be functional.
 			</Card> */}
-				<ScreenHeading className="mt-3">Recents</ScreenHeading>
-				<Explorer viewClassName="!pl-0 !pt-2" items={items} />
+				{/* Recents */}
+				{(recentFiles.data?.length || 0) > 0 && (
+					<>
+						<ScreenHeading className="mt-3">Recents</ScreenHeading>
+						<Explorer viewClassName="!pl-0 !pt-2" items={recentFiles.data} />
+					</>
+				)}
 			</div>
 		</div>
 	);

interface/app/$libraryId/settings/Sidebar.tsx

@@ -2,9 +2,7 @@ import {
 	Books,
 	FlyingSaucer,
 	GearSix,
-	Graph,
 	HardDrive,
-	Heart,
 	Key,
 	KeyReturn,
 	PaintBrush,

interface/app/$libraryId/settings/library/general.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { useBridgeMutation, useLibraryContext } from '@sd/client';
-import { Button, Input, Switch, dialogManager } from '@sd/ui';
+import { Button, Input, dialogManager } from '@sd/ui';
 import { useDebouncedFormWatch } from '~/hooks/useDebouncedForm';
 import { Heading } from '../Layout';
 import Setting from '../Setting';

interface/app/$libraryId/settings/library/keys/BackupRestoreDialog.tsx

@@ -1,8 +1,7 @@
 import { Eye, EyeSlash } from 'phosphor-react';
 import { useState } from 'react';
 import { useLibraryMutation } from '@sd/client';
-import { Button, Dialog, UseDialogProps, useDialog } from '@sd/ui';
-import { forms } from '@sd/ui';
+import { Button, Dialog, UseDialogProps, forms, useDialog } from '@sd/ui';
 import { showAlertDialog } from '~/components/AlertDialog';
 import { usePlatform } from '~/util/Platform';
 

interface/app/$libraryId/settings/library/locations/$id.tsx

@@ -2,11 +2,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Archive, ArrowsClockwise, Info, Trash } from 'phosphor-react';
 import { useState } from 'react';
 import { Controller } from 'react-hook-form';
-import { useParams } from 'react-router';
-import { useNavigate } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
 import { useLibraryMutation, useLibraryQuery } from '@sd/client';
-import { Button, Divider, forms, tw } from '@sd/ui';
-import { Tooltip } from '@sd/ui';
+import { Button, Divider, Tooltip, forms, tw } from '@sd/ui';
 import { showAlertDialog } from '~/components/AlertDialog';
 import ModalLayout from '../../ModalLayout';
 import { IndexerRuleEditor } from './IndexerRuleEditor';

interface/app/$libraryId/settings/library/locations/DeleteDialog.tsx

@@ -1,7 +1,6 @@
 import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
 import { Dialog, UseDialogProps, useDialog } from '@sd/ui';
 import { useZodForm } from '@sd/ui/src/forms';
-import { usePlatform } from '~/util/Platform';
 
 interface Props extends UseDialogProps {
 	onSuccess: () => void;

interface/app/$libraryId/settings/library/locations/ListItem.tsx

@@ -2,8 +2,7 @@ import clsx from 'clsx';
 import { Repeat, Trash } from 'phosphor-react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { arraysEqual, useLibraryMutation, useOnlineLocations } from '@sd/client';
-import { Location, Node } from '@sd/client';
+import { Location, Node, arraysEqual, useLibraryMutation, useOnlineLocations } from '@sd/client';
 import { Button, Card, Folder, Tooltip, dialogManager } from '@sd/ui';
 import DeleteDialog from './DeleteDialog';
 

interface/app/$libraryId/settings/library/tags/CreateDialog.tsx

@@ -2,7 +2,6 @@ import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
 import { Dialog, UseDialogProps, useDialog } from '@sd/ui';
 import { Input, useZodForm, z } from '@sd/ui/src/forms';
 import ColorPicker from '~/components/ColorPicker';
-import { usePlatform } from '~/util/Platform';
 
 export default (props: UseDialogProps & { assignToObject?: number }) => {
 	const dialog = useDialog(props);

interface/app/$libraryId/settings/library/tags/DeleteDialog.tsx

@@ -1,7 +1,6 @@
 import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
 import { Dialog, UseDialogProps, useDialog } from '@sd/ui';
 import { useZodForm } from '@sd/ui/src/forms';
-import { usePlatform } from '~/util/Platform';
 
 interface Props extends UseDialogProps {
 	tagId: number;

interface/app/$libraryId/settings/node/libraries/DeleteDialog.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useBridgeMutation, usePlausibleEvent, useTelemetryState } from '@sd/client';
-import { Dialog, UseDialogProps, useDialog } from '@sd/ui';
-import { forms } from '@sd/ui';
-import { usePlatform } from '~/util/Platform';
+import { useBridgeMutation, usePlausibleEvent } from '@sd/client';
+import { Dialog, UseDialogProps, forms, useDialog } from '@sd/ui';
 
 const { useZodForm, z } = forms;
 

interface/app/$libraryId/spacedrop.tsx

@@ -1,14 +1,12 @@
 import { GoogleDrive, Mega, iCloud } from '@sd/assets/images';
 import clsx from 'clsx';
 import { DeviceMobile, HardDrives, Icon, Laptop, User } from 'phosphor-react';
-import { useState } from 'react';
-import { Button, ScreenHeading, Select, SelectOption, forms, tw } from '@sd/ui';
-import { PeerMetadata, useBridgeMutation, useBridgeSubscription } from '~/../packages/client/src';
+import { tw } from '@sd/ui';
 import { SubtleButton, SubtleButtonContainer } from '~/components/SubtleButton';
 import { OperatingSystem } from '~/util/Platform';
 import classes from './spacedrop.module.scss';
 
-const { Form, Input, useZodForm, z } = forms;
+// const { Form, Input, useZodForm, z } = forms;
 
 // TODO: move this to UI, copied from Inspector
 const Pill = tw.span`mt-1 inline border border-transparent px-0.5 text-[9px] font-medium shadow shadow-app-shade/5 bg-app-selected rounded text-ink-dull`;

interface/app/$libraryId/spaces.tsx

@@ -1,5 +1,3 @@
-import { ScreenHeading } from '@sd/ui';
-
 export const Component = () => {
 	return <div></div>;
 };

interface/app/$libraryId/sync.tsx

@@ -1,10 +1,4 @@
-import {
-	CRDTOperation,
-	useBridgeSubscription,
-	useLibraryContext,
-	useLibraryQuery,
-	useLibrarySubscription
-} from '@sd/client';
+import { CRDTOperation, useLibraryQuery, useLibrarySubscription } from '@sd/client';
 import { tw } from '@sd/ui';
 
 const Label = tw.span`text-gray-300`;

interface/app/onboarding/creating-library.tsx

@@ -2,7 +2,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
 import {
-	HASHING_ALGOS,
 	resetOnboardingStore,
 	telemetryStore,
 	useBridgeMutation,

packages/config/eslint/base.js

@@ -15,7 +15,7 @@ module.exports = {
 		'plugin:@typescript-eslint/recommended',
 		'turbo',
 		'plugin:editorconfig/all',
-		'plugin:prettier/recommended'
+		'prettier'
 	],
 	plugins: ['react', 'editorconfig'],
 	rules: {