Some misc fixes (#836)

* Fix setup-system breaking in macOS due to unavailable envvar
 - Remove unused docker build-arg from ffmpeg workflow
 - Fix Overview Explorer extending below inspector
 - Fix some left behind formatting problems

* Some more formatting

.github/actions/setup-rust/action.yaml

@@ -24,7 +24,7 @@ runs:
       with:
         key: ${{ inputs.targets }}
         save-if: ${{ inputs.save-cache }}
-        prefix-key: "v0"
+        prefix-key: 'v0'
         shared-key: rust-deps
         # Windows is having disk related problems with target caching
         cache-targets: ${{ runner.os != 'Windows' }}

.github/scripts/setup-system.sh

@@ -316,7 +316,7 @@ elif [ "$SYSNAME" = "Darwin" ]; then
   for _lib in "${_frameworks_dir}/FFMpeg.framework/Libraries/"*; do
     if [ -f "$_lib" ]; then
       # Sign the lib with the local machine certificate (Required for it to work on macOS 13+)
-      if ! codesign -s "$APPLE_SIGNING_IDENTITY" -f "$_lib" 1>/dev/null 2>&1; then
+      if ! codesign -s "${APPLE_SIGNING_IDENTITY:--}" -f "$_lib" 1>/dev/null 2>&1; then
         err "Failed to sign: ${_lib#"$_frameworks_dir"}" \
           'Please open an issue on https://github.com/spacedriveapp/spacedrive/issues'
       fi

.github/workflows/ffmpeg.yml

@@ -45,7 +45,7 @@ jobs:
         run: |
           set -euxo pipefail
           cd .github/scripts/ffmpeg-macos
-          docker build --build-arg FFMPEG_VERSION=$FFMPEG_VERSION --build-arg APPLE_SIGNING_IDENTITY="${{ secrets.APPLE_SIGNING_IDENTITY }}" -o . .
+          docker build --build-arg FFMPEG_VERSION=$FFMPEG_VERSION -o . .
           export XZ_OPT='-T0 -9'
           tar -cJf "ffmpeg-${FFMPEG_VERSION}-x86_64.tar.xz" -C ffmpeg/x86_64 .
           tar -cJf "ffmpeg-${FFMPEG_VERSION}-arm64.tar.xz" -C ffmpeg/aarch64 .

.github/workflows/release.yml

@@ -51,7 +51,7 @@ jobs:
       - name: Install Codesigning Certificate
         if: ${{ runner.os == 'macOS' }}
         uses: apple-actions/import-codesign-certs@v2
-        with: 
+        with:
           p12-file-base64: ${{ secrets.APPLE_CERTIFICATE }}
           p12-password: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
 

apps/desktop/src-tauri/Cargo.toml

@@ -9,11 +9,7 @@ repository.workspace = true
 edition.workspace = true
 
 [dependencies]
-tauri = { version = "1.3.0", features = [
-	"api-all",
-	"linux-protocol-headers",
-	"macos-private-api",
-] }
+tauri = { version = "1.3.0", features = ["api-all", "linux-protocol-headers", "macos-private-api"] }
 rspc = { workspace = true, features = ["tauri"] }
 httpz = { workspace = true, features = [
 	"axum",

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

@@ -22,9 +22,8 @@ import {
 	useLibraryQuery
 } from '@sd/client';
 import { ContextMenu, dialogManager } from '@sd/ui';
-import { showAlertDialog } from '~/components/AlertDialog';
-import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
-import { useOperatingSystem } from '~/hooks/useOperatingSystem';
+import { showAlertDialog } from '~/components';
+import { getExplorerStore, useExplorerStore, useOperatingSystem } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 import AssignTagMenuItems from '../AssignTagMenuItems';
 import { OpenInNativeExplorer } from '../ContextMenu';
@@ -231,15 +230,23 @@ export default ({ data, className, ...props }: Props) => {
 						<ContextMenu.Item label="PNG" />
 						<ContextMenu.Item label="WebP" />
 					</ContextMenu.SubMenu>
-					<ContextMenu.Item onClick={() => {
-						fullRescan.mutate(getExplorerStore().locationId!);
-					}} label="Rescan Directory" icon={Package} />
-					<ContextMenu.Item onClick={() => {
-						generateThumbnails.mutate({
-							id: getExplorerStore().locationId!,
-							path: '/'
-						});
-					}} label="Regen Thumbnails" icon={Package} />
+					<ContextMenu.Item
+						onClick={() => {
+							fullRescan.mutate(getExplorerStore().locationId!);
+						}}
+						label="Rescan Directory"
+						icon={Package}
+					/>
+					<ContextMenu.Item
+						onClick={() => {
+							generateThumbnails.mutate({
+								id: getExplorerStore().locationId!,
+								path: '/'
+							});
+						}}
+						label="Regen Thumbnails"
+						icon={Package}
+					/>
 					<ContextMenu.Item
 						variant="danger"
 						label="Secure delete"

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

@@ -1,7 +1,12 @@
-import { useState } from 'react';
 import { RadixCheckbox, Select, SelectOption, Slider, tw } from '@sd/ui';
-import { ExplorerDirection, ExplorerOrderByKeys, getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
-import { getExplorerConfigStore, useExplorerConfigStore } from '~/hooks/useExplorerConfigStore';
+import {
+	ExplorerDirection,
+	ExplorerOrderByKeys,
+	getExplorerConfigStore,
+	getExplorerStore,
+	useExplorerConfigStore,
+	useExplorerStore
+} from '~/hooks';
 
 const Heading = tw.div`text-ink-dull text-xs font-semibold`;
 const Subheading = tw.div`text-ink-dull mb-1 text-xs font-medium`;
@@ -49,7 +54,14 @@ export default () => {
 			<div className="my-2 mt-4 grid grid-cols-2 gap-2">
 				<div className="flex flex-col">
 					<Subheading>Sort by</Subheading>
-					<Select value={explorerStore.orderBy} size="sm" className='w-full' onChange={(value) => getExplorerStore().orderBy = value as ExplorerOrderByKeys}>
+					<Select
+						value={explorerStore.orderBy}
+						size="sm"
+						className="w-full"
+						onChange={(value) =>
+							(getExplorerStore().orderBy = value as ExplorerOrderByKeys)
+						}
+					>
 						{Object.entries(sortOptions).map(([value, text]) => (
 							<SelectOption key={value} value={value}>
 								{text}
@@ -59,7 +71,14 @@ export default () => {
 				</div>
 				<div className="flex flex-col">
 					<Subheading>Direction</Subheading>
-					<Select value={explorerStore.orderByDirection} size="sm" className='w-full' onChange={(value) => getExplorerStore().orderByDirection = value as ExplorerDirection}>
+					<Select
+						value={explorerStore.orderByDirection}
+						size="sm"
+						className="w-full"
+						onChange={(value) =>
+							(getExplorerStore().orderByDirection = value as ExplorerDirection)
+						}
+					>
 						<SelectOption value="asc">Asc</SelectOption>
 						<SelectOption value="desc">Desc</SelectOption>
 					</Select>
@@ -91,9 +110,13 @@ export default () => {
 				)}
 				<div>
 					<Subheading>Double click action</Subheading>
-					<Select className='w-full' value={explorerConfig.openOnDoubleClick ? "openFile" : "quickPreview"} onChange={(value) => {
-						getExplorerConfigStore().openOnDoubleClick = value === "openFile";
-					}}>
+					<Select
+						className="w-full"
+						value={explorerConfig.openOnDoubleClick ? 'openFile' : 'quickPreview'}
+						onChange={(value) => {
+							getExplorerConfigStore().openOnDoubleClick = value === 'openFile';
+						}}
+					>
 						<SelectOption value="openFile">Open File</SelectOption>
 						<SelectOption value="quickPreview">Quick Preview</SelectOption>
 					</Select>

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

@@ -1,8 +1,9 @@
-import { ExplorerItem, isPath, useLibraryContext, useLibraryMutation } from '@sd/client';
 import clsx from 'clsx';
 import { HTMLAttributes, PropsWithChildren, memo, useRef } from 'react';
 import { createSearchParams, useMatch, useNavigate } from 'react-router-dom';
-import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
+import { ExplorerItem, isPath, useLibraryContext, useLibraryMutation } from '@sd/client';
+import { getExplorerStore, useExplorerConfigStore, useExplorerStore } from '~/hooks';
+import { usePlatform } from '~/util/Platform';
 import { TOP_BAR_HEIGHT } from '../TopBar';
 import DismissibleNotice from './DismissibleNotice';
 import ContextMenu from './File/ContextMenu';
@@ -11,8 +12,6 @@ import ListView from './ListView';
 import MediaView from './MediaView';
 import { ViewContext } from './ViewContext';
 import { getExplorerItemData, getItemFilePath } from './util';
-import { usePlatform } from '~/util/Platform';
-import { useExplorerConfigStore } from '~/hooks/useExplorerConfigStore';
 
 interface ViewItemProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {
 	data: ExplorerItem;
@@ -40,11 +39,12 @@ export const ViewItem = ({
 		if (isPath(data) && data.item.is_dir) {
 			navigate({
 				pathname: `/${library.uuid}/location/${getItemFilePath(data)?.location_id}`,
-				search: createSearchParams({ path: `${data.item.materialized_path}${data.item.name}/` }).toString()
+				search: createSearchParams({
+					path: `${data.item.materialized_path}${data.item.name}/`
+				}).toString()
 			});
 
 			getExplorerStore().selectedRowIndex = null;
-
 		} else if (openFilePath && filePath && explorerConfig.openOnDoubleClick) {
 			data.type === 'Path' &&
 				data.item.object_id &&
@@ -84,7 +84,6 @@ interface Props {
 	hasNextPage?: boolean;
 	isFetchingNextPage?: boolean;
 	viewClassName?: string;
-	scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export default memo((props: Props) => {
@@ -98,7 +97,7 @@ export default memo((props: Props) => {
 
 	return (
 		<div
-			ref={props.scrollRef || scrollRef}
+			ref={scrollRef}
 			className={clsx(
 				'custom-scroll explorer-scroll h-screen',
 				layoutMode === 'grid' && 'overflow-x-hidden',
@@ -111,7 +110,7 @@ export default memo((props: Props) => {
 			<ViewContext.Provider
 				value={{
 					data: props.data,
-					scrollRef: props.scrollRef || scrollRef,
+					scrollRef: scrollRef,
 					onLoadMore: props.onLoadMore,
 					hasNextPage: props.hasNextPage,
 					isFetchingNextPage: props.isFetchingNextPage

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

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { ReactNode, useEffect, useMemo } from 'react';
 import { useKey } from 'rooks';
 import { ExplorerItem, useLibrarySubscription } from '@sd/client';
-import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
+import { getExplorerStore, useExplorerStore } from '~/hooks';
 import ExplorerContextMenu from './ContextMenu';
 import { Inspector } from './Inspector';
 import View from './View';
@@ -20,7 +20,6 @@ interface Props {
 	children?: ReactNode;
 	inspectorClassName?: string;
 	explorerClassName?: string;
-	scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export default function Explorer(props: Props) {
@@ -69,17 +68,13 @@ export default function Explorer(props: Props) {
 								hasNextPage={props.hasNextPage}
 								isFetchingNextPage={props.isFetchingNextPage}
 								viewClassName={props.viewClassName}
-								scrollRef={props.scrollRef}
 							/>
 						)}
 					</ExplorerContextMenu>
 				</div>
 				{expStore.showInspector && (
 					<div className="w-[260px] shrink-0">
-						<Inspector
-							className={props.inspectorClassName}
-							data={selectedItem}
-						/>
+						<Inspector className={props.inspectorClassName} data={selectedItem} />
 					</div>
 				)}
 			</div>

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

@@ -2,7 +2,7 @@ import { Spinner } from 'phosphor-react';
 import { useState } from 'react';
 import { useLibraryMutation, useLibraryQuery } from '@sd/client';
 import { Button, PasswordInput } from '@sd/ui';
-import { showAlertDialog } from '~/components/AlertDialog';
+import { showAlertDialog } from '~/components';
 
 // TODO: Should be a form
 export default () => {
@@ -31,7 +31,6 @@ export default () => {
 				disabled={isUnlocking}
 			/>
 
-
 			<Button
 				className="w-full"
 				variant="accent"
@@ -53,7 +52,6 @@ export default () => {
 					'Unlock'
 				)}
 			</Button>
-
 		</div>
 	);
 };

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

@@ -1,6 +1,6 @@
 import { Gear, Lock, MagnifyingGlass, X } from 'phosphor-react';
 import { useLibraryContext, useLibraryMutation, useLibraryQuery } from '@sd/client';
-import { Button, ButtonLink, Input, Tabs } from '@sd/ui';
+import { Button, Tabs } from '@sd/ui';
 import KeyList from './List';
 import KeyMounter from './Mounter';
 import NotSetup from './NotSetup';
@@ -34,12 +34,7 @@ const Unlocked = () => {
 						<Tabs.Trigger className="!rounded-md text-sm font-medium" value="keys">
 							Keys
 						</Tabs.Trigger> */}
-						<Button
-
-							size="icon"
-							variant="subtle"
-							className="text-ink-faint"
-						>
+						<Button size="icon" variant="subtle" className="text-ink-faint">
 							<MagnifyingGlass className="h-4 w-4 text-ink-faint" />
 						</Button>
 						<div className="grow" />
@@ -56,18 +51,10 @@ const Unlocked = () => {
 						>
 							<Lock className="h-4 w-4 text-ink-faint" />
 						</Button>
-						<Button
-							size="icon"
-							variant="subtle"
-							className="text-ink-faint"
-						>
+						<Button size="icon" variant="subtle" className="text-ink-faint">
 							<Gear className="h-4 w-4 text-ink-faint" />
 						</Button>
-						<Button
-							size="icon"
-							variant="subtle"
-							className="text-ink-faint"
-						>
+						<Button size="icon" variant="subtle" className="text-ink-faint">
 							<X className="h-4 w-4 text-ink-faint" />
 						</Button>
 					</Tabs.List>

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

@@ -26,7 +26,7 @@ export default () => {
 			}
 			// we override the sidebar dropdown item's hover styles
 			// because the dark style clashes with the sidebar
-			className="mt-1 shadow-none data-[side=bottom]:slide-in-from-top-2 dark:divide-menu-selected/30 dark:border-sidebar-line dark:bg-sidebar-box"
+			className="data-[side=bottom]:slide-in-from-top-2 mt-1 shadow-none dark:divide-menu-selected/30 dark:border-sidebar-line dark:bg-sidebar-box"
 			alignToTrigger
 		>
 			{libraries.data?.map((lib) => (

interface/app/$libraryId/location/$id.tsx

@@ -1,12 +1,15 @@
-import { useLibraryContext, useLibraryMutation, useRspcLibraryContext } from '@sd/client';
-import { dialogManager } from '@sd/ui';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useEffect, useMemo } from 'react';
 import { useKey } from 'rooks';
 import { z } from 'zod';
-import { useZodRouteParams } from '~/hooks';
-import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
-import { useExplorerTopBarOptions } from '~/hooks/useExplorerTopBarOptions';
+import { useLibraryContext, useLibraryMutation, useRspcLibraryContext } from '@sd/client';
+import { dialogManager } from '@sd/ui';
+import {
+	getExplorerStore,
+	useExplorerStore,
+	useExplorerTopBarOptions,
+	useZodRouteParams
+} from '~/hooks';
 import Explorer from '../Explorer';
 import DeleteDialog from '../Explorer/File/DeleteDialog';
 import { useExplorerOrder, useExplorerSearchParams } from '../Explorer/util';
@@ -19,7 +22,8 @@ const PARAMS = z.object({
 export const Component = () => {
 	const [{ path }] = useExplorerSearchParams();
 	const { id: location_id } = useZodRouteParams(PARAMS);
-	const { explorerViewOptions, explorerControlOptions, explorerToolOptions } = useExplorerTopBarOptions();
+	const { explorerViewOptions, explorerControlOptions, explorerToolOptions } =
+		useExplorerTopBarOptions();
 
 	// we destructure this since `mutate` is a stable reference but the object it's in is not
 	const { mutate: quickRescan } = useLibraryMutation('locations.quickRescan');
@@ -51,7 +55,9 @@ export const Component = () => {
 
 	return (
 		<>
-			<TopBarChildren toolOptions={[explorerViewOptions, explorerToolOptions, explorerControlOptions,]} />
+			<TopBarChildren
+				toolOptions={[explorerViewOptions, explorerToolOptions, explorerControlOptions]}
+			/>
 			<div className="relative flex w-full flex-col">
 				<Explorer
 					items={items}
@@ -64,8 +70,6 @@ export const Component = () => {
 	);
 };
 
-
-
 const useItems = () => {
 	const { id: locationId } = useZodRouteParams(PARAMS);
 	const [{ path, take }] = useExplorerSearchParams();

interface/app/$libraryId/overview/CategoryButton.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 
 interface CategoryButtonProps {
 	category: string;
@@ -28,8 +28,7 @@ export default ({ category, icon, items, selected, onClick }: CategoryButtonProp
 			</div>
 		</div>
 	);
-}
-
+};
 
 function numberWithCommas(x: number) {
 	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

interface/app/$libraryId/overview/Statistics.tsx

@@ -1,9 +1,9 @@
-import { Statistics, useLibraryContext, useLibraryQuery } from "@sd/client";
-import byteSize from "byte-size";
-import clsx from "clsx";
-import Skeleton from "react-loading-skeleton";
-import useCounter from '~/hooks/useCounter';
-import { usePlatform } from "~/util/Platform";
+import byteSize from 'byte-size';
+import clsx from 'clsx';
+import Skeleton from 'react-loading-skeleton';
+import { Statistics, useLibraryContext, useLibraryQuery } from '@sd/client';
+import { useCounter } from '~/hooks';
+import { usePlatform } from '~/util/Platform';
 
 interface StatItemProps {
 	title: string;
@@ -30,7 +30,6 @@ const EMPTY_STATISTICS = {
 	total_unique_bytes: '0'
 };
 
-
 const displayableStatItems = Object.keys(StatItemNames) as unknown as keyof typeof StatItemNames;
 
 let mounted = false;
@@ -77,7 +76,6 @@ const StatItem = (props: StatItemProps) => {
 	);
 };
 
-
 export default () => {
 	const platform = usePlatform();
 	const { library } = useLibraryContext();
@@ -103,5 +101,5 @@ export default () => {
 				})}
 			</div>
 		</div>
-	)
-}
+	);
+};

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

@@ -131,7 +131,6 @@ export const Component = () => {
 				onLoadMore={query.fetchNextPage}
 				hasNextPage={query.hasNextPage}
 				isFetchingNextPage={query.isFetchingNextPage}
-				scrollRef={page?.ref}
 			>
 				<Statistics />
 				<div className="no-scrollbar sticky top-0 z-50 mt-2 flex space-x-[1px] overflow-x-scroll bg-app/90 px-5 py-1.5 backdrop-blur">

interface/app/$libraryId/search.tsx

@@ -2,9 +2,12 @@ import { MagnifyingGlass } from 'phosphor-react';
 import { Suspense, memo, useDeferredValue, useEffect, useMemo } from 'react';
 import { z } from 'zod';
 import { useLibraryQuery } from '@sd/client';
-import { useZodSearchParams } from '~/hooks';
-import { getExplorerStore, useExplorerStore } from '~/hooks/useExplorerStore';
-import { useExplorerTopBarOptions } from '~/hooks/useExplorerTopBarOptions';
+import {
+	getExplorerStore,
+	useExplorerStore,
+	useExplorerTopBarOptions,
+	useZodSearchParams
+} from '~/hooks';
 import Explorer from './Explorer';
 import { getExplorerItemData } from './Explorer/util';
 import TopBarChildren from './TopBar/TopBarChildren';
@@ -19,7 +22,8 @@ export type SearchArgs = z.infer<typeof SEARCH_PARAMS>;
 
 const ExplorerStuff = memo((props: { args: SearchArgs }) => {
 	const explorerStore = useExplorerStore();
-	const { explorerViewOptions, explorerControlOptions, explorerToolOptions } = useExplorerTopBarOptions();
+	const { explorerViewOptions, explorerControlOptions, explorerToolOptions } =
+		useExplorerTopBarOptions();
 
 	const query = useLibraryQuery(['search.paths', props.args], {
 		suspense: true,
@@ -45,7 +49,13 @@ const ExplorerStuff = memo((props: { args: SearchArgs }) => {
 		<>
 			{items && items.length > 0 ? (
 				<>
-					<TopBarChildren toolOptions={[explorerViewOptions, explorerToolOptions, explorerControlOptions]} />
+					<TopBarChildren
+						toolOptions={[
+							explorerViewOptions,
+							explorerToolOptions,
+							explorerControlOptions
+						]}
+					/>
 					<Explorer items={items} />
 				</>
 			) : (

interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/RuleInput.tsx

@@ -125,19 +125,19 @@ export const RuleInput = memo(
 							try {
 								const path = await openDirectoryPickerDialog(platform);
 								const event = {
-								  target: {
-									value: path
-								  }
+									target: {
+										value: path
+									}
 								} as ChangeEvent<HTMLInputElement>;
 								if (path) {
-								  props.onChange?.(event);
+									props.onChange?.(event);
 								}
-							  } catch (error) {
+							} catch (error) {
 								showAlertDialog({
-								  title: 'Error',
-								  value: String(error)
+									title: 'Error',
+									value: String(error)
 								});
-							  }
+							}
 						}}
 						{...props}
 					/>

interface/app/$libraryId/spacedrop.tsx

@@ -1,8 +1,8 @@
 import { GoogleDrive, Mega, iCloud } from '@sd/assets/images';
 import clsx from 'clsx';
-import { DeviceMobile, HardDrives, Icon, Laptop, User } from 'phosphor-react';
+import { Icon, User } from 'phosphor-react';
 import { tw } from '@sd/ui';
-import { SubtleButton, SubtleButtonContainer } from '~/components/SubtleButton';
+import { SubtleButton, SubtleButtonContainer } from '~/components';
 import { OperatingSystem } from '~/util/Platform';
 import classes from './spacedrop.module.scss';
 
@@ -164,9 +164,7 @@ export const Component = () => {
 		<>
 			{/* <TemporarySpacedropDemo /> */}
 			<div className={classes.honeycombOuter}>
-				<div className={clsx(classes.honeycombContainer, 'mt-8')}>
-
-				</div>
+				<div className={clsx(classes.honeycombContainer, 'mt-8')}></div>
 			</div>
 		</>
 	);

interface/app/onboarding/alpha.tsx

@@ -12,7 +12,7 @@ export default function OnboardingAlpha() {
 		<OnboardingContainer>
 			<img src={AlphaBg} alt="Alpha Background" className="absolute top-[120px] z-0" />
 			<div className="z-1 relative mx-auto mt-14 w-full max-w-[450px] text-center">
-				<div className="flex w-full items-center mb-5 justify-center gap-2">
+				<div className="mb-5 flex w-full items-center justify-center gap-2">
 					<img src={AppLogo} alt="Spacedrive" className="h-8 w-8" />
 					<h1 className="text-[25px] font-semibold">Spacedrive</h1>
 				</div>

interface/hooks/useCounter.ts

@@ -33,7 +33,13 @@ type UseCounterProps = {
 	saveState?: boolean;
 };
 
-const useCounter = ({ name, start = 0, end, duration = 2, saveState = true }: UseCounterProps) => {
+export const useCounter = ({
+	name,
+	start = 0,
+	end,
+	duration = 2,
+	saveState = true
+}: UseCounterProps) => {
 	const { lastValue, setLastValue } = useCounterState(name);
 
 	if (saveState && lastValue) {
@@ -60,5 +66,3 @@ const useCounter = ({ name, start = 0, end, duration = 2, saveState = true }: Us
 
 	return value;
 };
-
-export default useCounter;

interface/hooks/useExplorerTopBarOptions.tsx

@@ -12,8 +12,8 @@ import {
 } from 'phosphor-react';
 import OptionsPanel from '~/app/$libraryId/Explorer/OptionsPanel';
 import { TOP_BAR_ICON_STYLE, ToolOption } from '~/app/$libraryId/TopBar';
-import { getExplorerStore, useExplorerStore } from './useExplorerStore';
 import { KeyManager } from '../app/$libraryId/KeyManager';
+import { getExplorerStore, useExplorerStore } from './useExplorerStore';
 
 export const useExplorerTopBarOptions = () => {
 	const explorerStore = useExplorerStore();

packages/ui/src/RadioGroup.tsx

@@ -3,7 +3,7 @@ import { cx } from 'class-variance-authority';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 
-export interface RootProps extends RadioGroup.RadioGroupProps { }
+export interface RootProps extends RadioGroup.RadioGroupProps {}
 export const Root = forwardRef<HTMLDivElement, RootProps>(
 	({ children, className, ...props }, ref) => {
 		return (
@@ -18,7 +18,7 @@ export const Root = forwardRef<HTMLDivElement, RootProps>(
 // 	RadioGroup.Item
 // )`rounded-md border border-app-line bg-app-box px-4 py-2 flex items-center space-x-2`;
 
-export interface ItemProps extends RadioGroup.RadioGroupItemProps { }
+export interface ItemProps extends RadioGroup.RadioGroupItemProps {}
 export const Item = ({ children, ...props }: ItemProps) => {
 	return (
 		<div className="flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3">