Make eslint happy (#2198)

* eslint maxing

* @sd/ui too

apps/mobile/src/components/overview/OverviewStats.tsx

@@ -31,7 +31,7 @@ const StatItem = ({ title, bytes, isLoading, style }: StatItemProps) => {
 	return (
 		<View
 			style={twStyle(
-				'border-app-line/50 bg-app-box/50 flex flex-col items-center justify-center rounded-md border p-2',
+				'flex flex-col items-center justify-center rounded-md border border-app-line/50 bg-app-box/50 p-2',
 				style,
 				{
 					hidden: isLoading

apps/mobile/src/components/primitive/Button.tsx

@@ -13,7 +13,7 @@ const button = cva(['items-center justify-center rounded-md border shadow-sm'],
 			accent: ['border-accent-deep bg-accent shadow-md shadow-app-shade/10'],
 			outline: ['border-sidebar-line/60 bg-mobile-screen'],
 			transparent: ['border-0 bg-mobile-screen shadow-none'],
-			dashed: ['border-dashed border border-app-line bg-transparent']
+			dashed: ['border border-dashed border-app-line bg-transparent']
 		},
 		size: {
 			default: ['py-1.5', 'px-3'],

interface/app/$libraryId/404.tsx

@@ -11,7 +11,7 @@ export const Component = () => {
 		<div className="w-full bg-app/80">
 			<div
 				role="alert"
-				className="flex h-full w-full flex-col items-center justify-center rounded-lg p-4"
+				className="flex size-full flex-col items-center justify-center rounded-lg p-4"
 			>
 				<p className="m-3 text-sm font-semibold uppercase text-ink-faint">Error: 404</p>
 				<h1 className="text-4xl font-bold">There's nothing here.</h1>

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

@@ -155,7 +155,7 @@ const Tags = ({ items, parentRef }: Props & { parentRef: RefObject<HTMLDivElemen
 			{sortedTags.length > 0 ? (
 				<div
 					ref={parentRef}
-					className="h-full w-full overflow-auto"
+					className="size-full overflow-auto"
 					style={{ maxHeight: `400px` }}
 				>
 					<div
@@ -234,7 +234,7 @@ const Tags = ({ items, parentRef }: Props & { parentRef: RefObject<HTMLDivElemen
 									}}
 								>
 									<div
-										className="mr-0.5 h-[15px] w-[15px] shrink-0 rounded-full border"
+										className="mr-0.5 size-[15px] shrink-0 rounded-full border"
 										style={{
 											backgroundColor:
 												objectsWithTag &&

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

@@ -10,14 +10,14 @@ import { useExplorerContext } from './Context';
 
 const MediaViewIcon = () => {
 	return (
-		<div className="relative ml-3 mr-10 h-14 w-14 shrink-0">
+		<div className="relative ml-3 mr-10 size-14 shrink-0">
 			<Icon
 				name="Image"
-				className="absolute -top-1 left-6 h-14 w-14 rotate-6 overflow-hidden"
+				className="absolute -top-1 left-6 size-14 rotate-6 overflow-hidden"
 			/>
 			<Icon
 				name="Video"
-				className="absolute top-2 z-10 h-14 w-14 -rotate-6 overflow-hidden"
+				className="absolute top-2 z-10 size-14 -rotate-6 overflow-hidden"
 			/>
 		</div>
 	);
@@ -25,7 +25,7 @@ const MediaViewIcon = () => {
 
 const CollectionIcon = () => {
 	return (
-		<div className="ml-3 mr-4 h-14 w-14 shrink-0">
+		<div className="ml-3 mr-4 size-14 shrink-0">
 			<Icon name="Collection" />
 		</div>
 	);

interface/app/$libraryId/Explorer/FilePath/Original.tsx

@@ -82,7 +82,7 @@ const TEXT_RENDERER: OriginalRenderer = (props) => (
 		onLoad={props.onLoad}
 		onError={props.onError}
 		className={clsx(
-			'textviewer-scroll h-full w-full overflow-y-auto whitespace-pre-wrap break-words px-4 font-mono',
+			'textviewer-scroll size-full overflow-y-auto whitespace-pre-wrap break-words px-4 font-mono',
 			!props.mediaControls ? 'overflow-hidden' : 'overflow-auto',
 			props.className,
 			props.frame && [props.frameClassName, '!bg-none p-2']
@@ -112,7 +112,7 @@ const ORIGINAL_RENDERERS: {
 			src={props.src}
 			onLoad={props.onLoad}
 			onError={props.onError}
-			className={clsx('h-full w-full', props.className, props.frame && props.frameClassName)}
+			className={clsx('size-full', props.className, props.frame && props.frameClassName)}
 			crossOrigin="anonymous" // Here it is ok, because it is not a react attr
 		/>
 	),

interface/app/$libraryId/Explorer/FilePath/Thumb.tsx

@@ -200,7 +200,7 @@ export const FileThumb = forwardRef<HTMLImageElement, ThumbProps>((props, ref) =
 			className={clsx(
 				'relative flex shrink-0 items-center justify-center',
 				// !loaded && 'invisible',
-				!props.size && 'h-full w-full',
+				!props.size && 'size-full',
 				props.cover && 'overflow-hidden',
 				props.className
 			)}

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

@@ -30,7 +30,7 @@ export default function FavoriteButton(props: Props) {
 
 	return (
 		<Button onClick={toggleFavorite} size="icon">
-			<Heart weight={favorite ? 'fill' : 'regular'} className="h-[18px] w-[18px]" />
+			<Heart weight={favorite ? 'fill' : 'regular'} className="size-[18px]" />
 		</Button>
 	);
 }

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

@@ -291,12 +291,12 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
 
 					<Tooltip label={t('encrypt')}>
 						<Button size="icon">
-							<Lock className="h-[18px] w-[18px]" />
+							<Lock className="size-[18px]" />
 						</Button>
 					</Tooltip>
 					<Tooltip label={t('share')}>
 						<Button size="icon">
-							<Link className="h-[18px] w-[18px]" />
+							<Link className="size-[18px]" />
 						</Button>
 					</Tooltip>
 				</div>

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

@@ -98,7 +98,7 @@ const Image = memo(({ item, active }: { item: ExplorerItem; active: boolean }) =
 			<div
 				onClick={() => explorer.resetSelectedItems([item])}
 				className={clsx(
-					'relative h-full w-full rounded-md border bg-app-lightBox/20',
+					'relative size-full rounded-md border bg-app-lightBox/20',
 					explorer.selectedItems.size > 1 && !selected && 'opacity-25',
 					selected ? 'border-2 border-accent' : 'border-1 border-white/5',
 					selected && !active && 'border-white/5'

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

@@ -46,7 +46,7 @@ export const GridItem = ({ children, item, index, ...props }: Props) => {
 		<div
 			{...props}
 			{...attributes}
-			className="h-full w-full"
+			className="size-full"
 			// Prevent explorer view onMouseDown event from
 			// being executed and resetting the selection
 			onMouseDown={(e) => {

interface/app/$libraryId/Explorer/View/GridView/Item/index.tsx

@@ -35,7 +35,7 @@ export const GridViewItem = memo((props: GridViewItemProps) => {
 
 	return (
 		<GridViewItemContext.Provider value={props}>
-			<ViewItem data={props.data} className={clsx('h-full w-full', isHidden && 'opacity-50')}>
+			<ViewItem data={props.data} className={clsx('size-full', isHidden && 'opacity-50')}>
 				<ExplorerDroppable
 					droppable={{
 						data: { type: 'explorer-item', data: props.data },

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

@@ -21,7 +21,7 @@ export const MediaViewItem = memo(({ data, selected, cut, cover }: Props) => {
 		<ViewItem
 			data={data}
 			className={clsx(
-				'group relative h-full w-full border-2 hover:bg-app-selectedItem',
+				'group relative size-full border-2 hover:bg-app-selectedItem',
 				selected ? 'border-accent bg-app-selectedItem' : 'border-transparent'
 			)}
 		>

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

@@ -146,7 +146,7 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 					explorer.selectedItems.size !== 0 && explorer.resetSelectedItems();
 				}}
 			>
-				<div ref={setDroppableRef} className="h-full w-full">
+				<div ref={setDroppableRef} className="size-full">
 					{explorer.items === null || (explorer.items && explorer.items.length > 0) ? (
 						<>
 							{layoutMode === 'grid' && <GridView />}

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

@@ -5,8 +5,8 @@ import { useLibraryQuery } from '~/../packages/client/src';
 export default () => {
 	const { data: isActive } = useLibraryQuery(['jobs.isActive']);
 	return isActive ? (
-		<Loader className="h-[20px] w-[20px]" />
+		<Loader className="size-[20px]" />
 	) : (
-		<CheckCircle className="h-5 w-5" />
+		<CheckCircle className="size-5" />
 	);
 };

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

@@ -207,7 +207,7 @@ function Options({
 					variant="outline"
 				>
 					<Tooltip label={t('resume')}>
-						<Play className="h-4 w-4 cursor-pointer" />
+						<Play className="size-4 cursor-pointer" />
 					</Tooltip>
 				</Button>
 			)}
@@ -218,7 +218,7 @@ function Options({
 					button={
 						<Tooltip label={t('actions')}>
 							<Button className="!px-1" variant="outline">
-								<DotsThreeVertical className="h-4 w-4 cursor-pointer" />
+								<DotsThreeVertical className="size-4 cursor-pointer" />
 							</Button>
 						</Tooltip>
 					}
@@ -255,7 +255,7 @@ function Options({
 							size="icon"
 							variant="outline"
 						>
-							<Pause className="h-4 w-4 cursor-pointer" />
+							<Pause className="size-4 cursor-pointer" />
 						</Button>
 					</Tooltip>
 					<Tooltip label={t('stop')}>
@@ -267,7 +267,7 @@ function Options({
 							size="icon"
 							variant="outline"
 						>
-							<Stop className="h-4 w-4 cursor-pointer" />
+							<Stop className="size-4 cursor-pointer" />
 						</Button>
 					</Tooltip>
 				</>

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

@@ -87,12 +87,12 @@ export function JobManager() {
 						<PopoverClose asChild>
 							<Check
 								onClick={clearAllJobsHandler}
-								className="h-3 w-3 transition-opacity duration-300 hover:opacity-70"
+								className="size-3 transition-opacity duration-300 hover:opacity-70"
 								color={isDark ? 'white' : 'black'}
 							/>
 						</PopoverClose>
 						<X
-							className="h-3 w-3 transition-opacity hover:opacity-70"
+							className="size-3 transition-opacity hover:opacity-70"
 							onClick={() => setToggleConfirmation((t) => !t)}
 						/>
 					</div>
@@ -103,14 +103,14 @@ export function JobManager() {
 						size="icon"
 					>
 						<Tooltip label={t('clear_finished_jobs')}>
-							<Trash className="h-4 w-4" />
+							<Trash className="size-4" />
 						</Tooltip>
 					</Button>
 				)}
 				<PopoverClose asChild>
 					<Button className="opacity-70" size="icon">
 						<Tooltip label={t('close')}>
-							<X className="h-4 w-4" />
+							<X className="size-4" />
 						</Tooltip>
 					</Button>
 				</PopoverClose>

interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Footer.tsx

@@ -57,7 +57,7 @@ export default () => {
 							label={t('settings')}
 							keybinds={[symbols.Shift.icon, symbols.Meta.icon, 'T']}
 						>
-							<Gear className="h-5 w-5" />
+							<Gear className="size-5" />
 						</Tooltip>
 					</ButtonLink>
 					<JobManagerContextProvider>

interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Icon.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
 
 export default ({ component: Icon, ...props }: any) => (
-	<Icon weight="bold" {...props} className={clsx('mr-2 h-4 w-4', props.className)} />
+	<Icon weight="bold" {...props} className={clsx('mr-2 size-4', props.className)} />
 );

interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx

@@ -15,7 +15,7 @@ export default function DevicesSection() {
 		<Section name={t('devices')}>
 			{node && (
 				<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
-					<Icon name="Laptop" className="mr-1 h-5 w-5" />
+					<Icon name="Laptop" className="mr-1 size-5" />
 					<span className="truncate">{node.name}</span>
 				</SidebarLink>
 			)}

interface/app/$libraryId/Layout/Sidebar/sections/Local/index.tsx

@@ -22,7 +22,7 @@ const EjectButton = ({ className }: { className?: string }) => (
 		variant="subtle"
 		onClick={() => toast.info('Eject button coming soon')}
 	>
-		<EjectSimple weight="fill" size={18} className="h-3 w-3 opacity-70" />
+		<EjectSimple weight="fill" size={18} className="size-3 opacity-70" />
 	</Button>
 );
 

interface/app/$libraryId/Layout/Sidebar/sections/Locations/index.tsx

@@ -77,7 +77,7 @@ const Location = ({ location, online }: { location: LocationType; online: boolea
 					<Icon name="Folder" size={18} />
 					<div
 						className={clsx(
-							'absolute bottom-0.5 right-0 h-1.5 w-1.5 rounded-full',
+							'absolute bottom-0.5 right-0 size-1.5 rounded-full',
 							online ? 'bg-green-500' : 'bg-red-500'
 						)}
 					/>

interface/app/$libraryId/Layout/Sidebar/sections/Tags/index.tsx

@@ -61,7 +61,7 @@ const Tag = ({ tag }: { tag: Tag }) => {
 				)}
 			>
 				<div
-					className="h-[12px] w-[12px] shrink-0 rounded-full"
+					className="size-[12px] shrink-0 rounded-full"
 					style={{ backgroundColor: tag.color || '#efefef' }}
 				/>
 				<span className="ml-1.5 truncate text-sm">{tag.name}</span>

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

@@ -45,7 +45,7 @@ export default forwardRef<HTMLButtonElement, TopBarButtonProps>(
 			>
 				{props.children}
 				{checkIcon && active && (
-					<Check className="absolute right-2 m-0.5 h-5 w-5 text-ink-dull" />
+					<Check className="absolute right-2 m-0.5 size-5 text-ink-dull" />
 				)}
 			</Button>
 		);

interface/app/$libraryId/debug/actors.tsx

@@ -18,7 +18,7 @@ export const Component = () => {
 	}, [data]);
 
 	return (
-		<div className="h-full w-full">
+		<div className="size-full">
 			<table>
 				<tr>
 					<th>Name</th>

interface/app/$libraryId/debug/cloud.tsx

@@ -18,7 +18,7 @@ export const Component = () => {
 	};
 
 	return (
-		<div className="flex h-full w-full flex-col items-start p-4">{authSensitiveChild()}</div>
+		<div className="flex size-full flex-col items-start p-4">{authSensitiveChild()}</div>
 	);
 };
 

interface/app/$libraryId/debug/dnd.tsx

@@ -30,5 +30,5 @@ export function DragAndDropDebug() {
 		};
 	}, [platform, ref]);
 
-	return <div ref={ref} className="absolute z-[500] hidden h-10 w-10 bg-red-500"></div>;
+	return <div ref={ref} className="absolute z-[500] hidden size-10 bg-red-500"></div>;
 }

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

@@ -161,7 +161,7 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
 				</TopBarPortal>
 			</SearchContextProvider>
 			{isLocationIndexing ? (
-				<div className="flex h-full w-full items-center justify-center">
+				<div className="flex size-full items-center justify-center">
 					<Loader />
 				</div>
 			) : !preferences.isLoading ? (

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

@@ -55,7 +55,7 @@ export default function LocationOptions({ location, path }: { location: Location
 					popover={usePopover()}
 					trigger={
 						<Button className="!p-[5px]" variant="subtle">
-							<Ellipsis className="h-3 w-3" />
+							<Ellipsis className="size-3" />
 						</Button>
 					}
 				>

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

@@ -80,7 +80,7 @@ const KindItem = ({ kind, name, icon, items, selected, onClick, disabled }: Kind
 					disabled && 'cursor-not-allowed opacity-30'
 				)}
 			>
-				<Icon name={icon as any} className="mr-3 h-12 w-12" />
+				<Icon name={icon as any} className="mr-3 size-12" />
 				<div className="pr-5">
 					<h2 className="text-sm font-medium">{name}</h2>
 					{items !== undefined && (

interface/app/$libraryId/overview/Layout/HorizontalScroll.tsx

@@ -66,7 +66,7 @@ const HorizontalScroll = ({ children, className }: { children: ReactNode; classN
 				onClick={() => handleArrowOnClick('right')}
 				className={clsx('left-3', scroll === 0 && 'pointer-events-none opacity-0')}
 			>
-				<ArrowLeft weight="bold" className="h-4 w-4 text-ink" />
+				<ArrowLeft weight="bold" className="size-4 text-ink" />
 			</ArrowButton>
 			<div
 				ref={ref}
@@ -88,7 +88,7 @@ const HorizontalScroll = ({ children, className }: { children: ReactNode; classN
 					onClick={() => handleArrowOnClick('left')}
 					className={clsx('right-3', lastItemVisible && 'pointer-events-none opacity-0')}
 				>
-					<ArrowRight weight="bold" className="h-4 w-4 text-ink" />
+					<ArrowRight weight="bold" className="size-4 text-ink" />
 				</ArrowButton>
 			)}
 		</div>

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

@@ -63,7 +63,7 @@ const StatItem = (props: StatItemProps) => {
 					<Tooltip label={props.info}>
 						<Info
 							weight="fill"
-							className="-mt-0.5 ml-1 inline h-3 w-3 text-ink-faint opacity-0 transition-opacity group-hover/stat:opacity-70"
+							className="-mt-0.5 ml-1 inline size-3 text-ink-faint opacity-0 transition-opacity group-hover/stat:opacity-70"
 						/>
 					</Tooltip>
 				)}

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

@@ -37,7 +37,7 @@ const LocationCard = ({ icon, name, connectionType, ...stats }: LocationCardProp
 				<Pill className="uppercase">{connectionType || 'Local'}</Pill>
 				<div className="grow" />
 				<Button size="icon" variant="outline">
-					<Ellipsis className="h-3 w-3 opacity-50" />
+					<Ellipsis className="size-3 opacity-50" />
 				</Button>
 			</div>
 		</Card>

interface/app/$libraryId/saved-search/$id.tsx

@@ -92,7 +92,7 @@ export const Component = () => {
 			<Explorer
 				emptyNotice={
 					<EmptyNotice
-						icon={<img className="h-32 w-32" src={getIcon(iconNames.FolderNoSpace)} />}
+						icon={<img className="size-32" src={getIcon(iconNames.FolderNoSpace)} />}
 						message={
 							search.search
 								? `No results found for "${search.search}"`

interface/app/$libraryId/search/AppliedFilters.tsx

@@ -24,7 +24,7 @@ export const CloseTab = forwardRef<HTMLDivElement, { onClick: () => void }>(({ o
 			className="flex h-full items-center rounded-r border-l border-app-darkerBox/70 px-1.5 py-0.5 text-sm hover:bg-app-lightBox/30"
 			onClick={onClick}
 		>
-			<RenderIcon className="h-3 w-3" icon={X} />
+			<RenderIcon className="size-3" icon={X} />
 		</div>
 	);
 });
@@ -37,7 +37,7 @@ export const AppliedFilters = ({ allowRemove = true }: { allowRemove?: boolean }
 			{search.search && (
 				<FilterContainer>
 					<StaticSection>
-						<RenderIcon className="h-4 w-4" icon={MagnifyingGlass} />
+						<RenderIcon className="size-4" icon={MagnifyingGlass} />
 						<FilterText>{search.search}</FilterText>
 					</StaticSection>
 					{allowRemove && <CloseTab onClick={() => search.setSearch('')} />}
@@ -89,7 +89,7 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
 	return (
 		<FilterContainer>
 			<StaticSection>
-				<RenderIcon className="h-4 w-4" icon={filter.icon} />
+				<RenderIcon className="size-4" icon={filter.icon} />
 				<FilterText>{filter.name}</FilterText>
 			</StaticSection>
 			<InteractiveSection className="border-l">
@@ -103,7 +103,7 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
 				{activeOptions && (
 					<>
 						{activeOptions.length === 1 ? (
-							<RenderIcon className="h-4 w-4" icon={activeOptions[0]!.icon} />
+							<RenderIcon className="size-4" icon={activeOptions[0]!.icon} />
 						) : (
 							<div className="relative flex gap-0.5 self-center">
 								{activeOptions.map((option, index) => (
@@ -113,7 +113,7 @@ export function FilterArg({ arg, onDelete }: { arg: SearchFilterArgs; onDelete?:
 											zIndex: activeOptions.length - index
 										}}
 									>
-										<RenderIcon className="h-4 w-4" icon={option.icon} />
+										<RenderIcon className="size-4" icon={option.icon} />
 									</div>
 								))}
 							</div>

interface/app/$libraryId/search/SearchOptions.tsx

@@ -163,7 +163,7 @@ const SearchResults = memo(
 							<div className="mr-4 flex flex-row items-center gap-2.5">
 								<div className="flex items-center gap-1">
 									<RenderIcon
-										className="h-[13px] w-[13px] opacity-80"
+										className="size-[13px] opacity-80"
 										icon={filter.icon}
 									/>
 									<span className="text-xs text-ink-dull opacity-80">

interface/app/$libraryId/search/util.tsx

@@ -36,7 +36,7 @@ export const RenderIcon = ({
 	if (typeof icon === 'string' && icon.startsWith('#')) {
 		return (
 			<div
-				className={clsx('mr-0.5 h-[15px] w-[15px] shrink-0 rounded-full border', className)}
+				className={clsx('mr-0.5 size-[15px] shrink-0 rounded-full border', className)}
 				style={{
 					backgroundColor: icon ? icon : 'transparent',
 					borderColor: icon || '#efefef'

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

@@ -37,7 +37,7 @@ const BackButton = () => {
 
 	return (
 		<Button variant="outline" size="icon" onClick={() => navigate(-1)}>
-			<div className="flex h-4 w-4 justify-center">
+			<div className="flex size-4 justify-center">
 				<CaretLeft weight="bold" className="w-[12px] text-ink-dull " aria-hidden="true" />
 			</div>
 		</Button>

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

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router';
 
 export const Component = () => (
-	<div className="custom-scroll page-scroll relative flex h-full max-h-screen w-full grow-0 pt-6">
+	<div className="custom-scroll page-scroll relative flex size-full max-h-screen grow-0 pt-6">
 		<div className="flex w-full max-w-4xl flex-col space-y-6 px-12 pb-5 pt-2">
 			<Outlet />
 			<div className="block h-4 shrink-0" />

interface/app/$libraryId/settings/client/account.tsx

@@ -43,8 +43,8 @@ const Profile = ({ email, authStore }: { email?: string; authStore: { status: st
 		<Card className="relative flex w-full flex-col items-center justify-center !p-6 lg:max-w-[320px]">
 			<AuthRequiredOverlay />
 			<div
-				className="flex h-[90px] w-[90px] items-center justify-center
+				className="flex size-[90px] items-center justify-center rounded-full
-	 rounded-full border border-app-line bg-app-input"
+	 border border-app-line bg-app-input"
 			>
 				<User weight="fill" className="mx-auto text-4xl text-ink-faint" />
 			</div>

interface/app/$libraryId/settings/client/backups.tsx

@@ -53,7 +53,7 @@ export const Component = () => {
 
 			{backups.data?.backups.map((backup) => (
 				<Card key={backup.id} className="hover:bg-app-box/70">
-					<Database className="mr-3 h-10 w-10 self-center" />
+					<Database className="mr-3 size-10 self-center" />
 					<div className="grid min-w-[110px] grid-cols-1">
 						<h1 className="truncate pt-0.5 text-sm font-semibold">
 							{dayjs(backup.timestamp).toString()}

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

@@ -141,7 +141,7 @@ export const Component = () => {
 
 					<hr className="mb-4 mt-2 flex w-full border-app-line" />
 					<div className="flex w-full items-center gap-5">
-						<Icon name="Laptop" className="mt-2 h-14 w-14" />
+						<Icon name="Laptop" className="mt-2 size-14" />
 						<div className="flex flex-col">
 							<NodeSettingLabel>{t('node_name')}</NodeSettingLabel>
 							<Input

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

@@ -98,7 +98,7 @@ const EditLocationForm = () => {
 	const { t } = useLocale();
 
 	return (
-		<Form form={form} onSubmit={onSubmit} className="h-full w-full">
+		<Form form={form} onSubmit={onSubmit} className="size-full">
 			<ModalLayout
 				title={t('edit_location')}
 				topRight={
@@ -200,7 +200,7 @@ const EditLocationForm = () => {
 								size="sm"
 								variant="outline"
 							>
-								<ArrowsClockwise className="-mt-0.5 mr-1.5 inline h-4 w-4" />
+								<ArrowsClockwise className="-mt-0.5 mr-1.5 inline size-4" />
 								{t('full_reindex')}
 							</Button>
 						</div>
@@ -213,7 +213,7 @@ const EditLocationForm = () => {
 								size="sm"
 								variant="outline"
 							>
-								<Archive className="-mt-0.5 mr-1.5 inline h-4 w-4" />
+								<Archive className="-mt-0.5 mr-1.5 inline size-4" />
 								{t('archive')}
 							</Button>
 						</div>
@@ -236,7 +236,7 @@ const EditLocationForm = () => {
 									));
 								}}
 							>
-								<Trash className="-mt-0.5 mr-1.5 inline h-4 w-4" />
+								<Trash className="-mt-0.5 mr-1.5 inline size-4" />
 								{t('delete')}
 							</Button>
 						</div>

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

@@ -71,7 +71,7 @@ export const AddLocationButton = ({
 				{...props}
 			>
 				{path ? (
-					<div className="flex h-full w-full flex-row items-end whitespace-nowrap font-mono text-sm">
+					<div className="flex size-full flex-row items-end whitespace-nowrap font-mono text-sm">
 						<FolderSimplePlus size={22} className="shrink-0" />
 						<div className="ml-1 overflow-hidden">
 							<motion.span

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

@@ -252,7 +252,7 @@ const RulesForm = ({ onSubmitted }: Props) => {
 								/>
 								{index !== 0 && (
 									<Button
-										className="flex h-[32px] w-[32px] items-center justify-self-end"
+										className="flex size-[32px] items-center justify-self-end"
 										variant="gray"
 										onClick={() => remove(index)}
 									>

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

@@ -84,7 +84,7 @@ export default function IndexerRuleEditor<T extends IndexerRuleIdFieldType>({
 								disableDelete || 'border-red-500 bg-red-500'
 							)}
 						>
-							<Trash className="-mt-0.5 mr-1.5 inline h-4 w-4" />
+							<Trash className="-mt-0.5 mr-1.5 inline size-4" />
 							Delete
 						</Button>
 						<Button

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

@@ -39,7 +39,7 @@ export default ({ location }: Props) => {
 				navigate(`${location.id}`);
 			}}
 		>
-			<Icon size={24} name="Folder" className="mr-3 h-10 w-10 self-center" />
+			<Icon size={24} name="Folder" className="mr-3 size-10 self-center" />
 			<div className="grid min-w-[110px] grid-cols-1">
 				<h1 className="truncate pt-0.5 text-sm font-semibold">{location.name}</h1>
 
@@ -74,7 +74,7 @@ export default ({ location }: Props) => {
 					>
 						<div
 							className={clsx(
-								'h-2 w-2 rounded-full',
+								'size-2 rounded-full',
 								online ? 'bg-green-500' : 'bg-red-500'
 							)}
 						/>
@@ -110,7 +110,7 @@ export default ({ location }: Props) => {
 					}}
 				>
 					<Tooltip label={t('delete_location')}>
-						<Trash className="h-4 w-4" />
+						<Trash className="size-4" />
 					</Tooltip>
 				</Button>
 				<Button
@@ -123,7 +123,7 @@ export default ({ location }: Props) => {
 					}}
 				>
 					<Tooltip label={t('rescan_location')}>
-						<Repeat className="h-4 w-4" />
+						<Repeat className="size-4" />
 					</Tooltip>
 				</Button>
 				{/* <Button variant="gray" className="!p-1.5">

interface/app/$libraryId/settings/library/saved-searches/index.tsx

@@ -105,7 +105,7 @@ function EditForm({ savedSearch, onDelete }: { savedSearch: SavedSearch; onDelet
 						}}
 					>
 						<Tooltip label={t('delete_tag')}>
-							<Trash className="h-4 w-4" />
+							<Trash className="size-4" />
 						</Tooltip>
 					</Button>
 				</div>

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

@@ -67,7 +67,7 @@ export default ({ tag, onDelete }: Props) => {
 					}
 				>
 					<Tooltip label={t('delete_tag')}>
-						<Trash className="h-4 w-4" />
+						<Trash className="size-4" />
 					</Tooltip>
 				</Button>
 			</div>

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

@@ -41,7 +41,7 @@ export default (props: Props) => {
 					variant="gray"
 				>
 					<Tooltip label={t('edit_library')}>
-						<Pencil className="h-4 w-4" />
+						<Pencil className="size-4" />
 					</Tooltip>
 				</ButtonLink>
 				<Button
@@ -54,7 +54,7 @@ export default (props: Props) => {
 					}}
 				>
 					<Tooltip label={t('delete_library')}>
-						<Trash className="h-4 w-4" />
+						<Trash className="size-4" />
 					</Tooltip>
 				</Button>
 			</div>

interface/app/$libraryId/settings/resources/about.tsx

@@ -22,7 +22,7 @@ export const Component = () => {
 			<div className="flex flex-row items-center">
 				<img
 					src={AppLogo}
-					className="mr-8 h-[88px] w-[88px]"
+					className="mr-8 size-[88px]"
 					draggable="false"
 					onClick={onClick}
 				/>
@@ -46,7 +46,7 @@ export const Component = () => {
 					className="flex w-fit gap-2"
 					variant="gray"
 				>
-					<Discord className="h-4 w-4 fill-ink" />
+					<Discord className="size-4 fill-ink" />
 					{t('join_discord')}
 				</Button>
 				<Button
@@ -55,7 +55,7 @@ export const Component = () => {
 					className="flex w-fit gap-2"
 					variant="accent"
 				>
-					<Github className="h-4 w-4 fill-white" />
+					<Github className="size-4 fill-white" />
 					{t('star_on_github')}
 				</Button>
 				<Button
@@ -65,7 +65,7 @@ export const Component = () => {
 					className="flex w-fit gap-1"
 					variant="accent"
 				>
-					<Globe className="h-4 w-4" />
+					<Globe className="size-4" />
 					{t('website')}
 				</Button>
 			</div>

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

@@ -66,7 +66,7 @@ export function Component() {
 					left={
 						<div className="flex flex-row items-center gap-2">
 							<div
-								className="h-[14px] w-[14px] shrink-0 rounded-full"
+								className="size-[14px] shrink-0 rounded-full"
 								style={{ backgroundColor: tag!.color || '#efefef' }}
 							/>
 							<span className="truncate text-sm font-medium">{tag?.name}</span>

interface/app/onboarding/Progress.tsx

@@ -40,7 +40,7 @@ export default function OnboardingProgress() {
 							disabled={!obStore.unlockedScreens.includes(path)}
 							onClick={() => navigate(path, { replace: true })}
 							className={clsx(
-								'h-2 w-2 rounded-full transition hover:bg-ink disabled:opacity-10',
+								'size-2 rounded-full transition hover:bg-ink disabled:opacity-10',
 								currentScreen === path ? 'bg-ink' : 'bg-ink-faint'
 							)}
 						/>

interface/app/onboarding/alpha.tsx

@@ -22,7 +22,7 @@ export default function OnboardingAlpha() {
 				/>
 				<div className="relative z-10 flex flex-col gap-5">
 					<div className="mb-5 flex w-full items-center justify-center gap-2">
-						<img src={AppLogo} alt="Spacedrive" className="h-8 w-8" />
+						<img src={AppLogo} alt="Spacedrive" className="size-8" />
 						<h1 className="text-[25px] font-semibold">Spacedrive</h1>
 					</div>
 					<h1 className="text-[40px] font-bold">{t('alpha_release_title')}</h1>
@@ -35,7 +35,7 @@ export default function OnboardingAlpha() {
 							className="flex gap-2"
 							variant="gray"
 						>
-							<Discord className="h-4 w-4 fill-ink" />
+							<Discord className="size-4 fill-ink" />
 							{t('join_discord')}
 						</Button>
 						<ButtonLink to="../new-library" replace variant="accent">

interface/app/onboarding/locations.tsx

@@ -36,7 +36,7 @@ const LocationIcon = (props: { location: SystemLocation; active?: boolean }) =>
 	const LocationIcon = icons[props.location];
 
 	return (
-		<div className="absolute -bottom-9 -right-9 h-28 w-28">
+		<div className="absolute -bottom-9 -right-9 size-28">
 			<Icon name="Folder" />
 			<LocationIcon
 				weight="fill"

interface/components/AlertDialog.tsx

@@ -42,7 +42,7 @@ const AlertDialog = (props: Props) => {
 							}}
 							size="icon"
 						>
-							<Clipboard className="h-4 w-4" />
+							<Clipboard className="size-4" />
 						</Button>
 					}
 				/>

interface/components/ColorPicker.tsx

@@ -15,7 +15,7 @@ export const ColorPicker = <T extends FieldValues>({ className, ...props }: Prop
 			popover={usePopover()}
 			trigger={
 				<div
-					className={clsx('h-4 w-4 rounded-full shadow', className)}
+					className={clsx('size-4 rounded-full shadow', className)}
 					style={{ backgroundColor: field.value }}
 				/>
 			}

interface/components/Loader.tsx

@@ -15,7 +15,7 @@ export function Loader({ className }: Props) {
 			strokeOpacity={4}
 			strokeWidth={5}
 			speed={1}
-			className={clsx('h-7 w-7', className)}
+			className={clsx('size-7', className)}
 		/>
 	);
 }

interface/components/MultiCheckbox.tsx

@@ -80,7 +80,7 @@ export default ({ items, headerArea }: SelectorProps) => {
 								>
 									{item.color && (
 										<div
-											className="mr-0.5 h-[15px] w-[15px] shrink-0 rounded-full border"
+											className="mr-0.5 size-[15px] shrink-0 rounded-full border"
 											style={{
 												backgroundColor: item.selected
 													? item.color

interface/components/SubtleButton.tsx

@@ -7,7 +7,7 @@ export const SubtleButton = (props: { icon?: React.FC }) => {
 	return (
 		<Button className="!p-[5px]" variant="subtle">
 			{/* @ts-expect-error */}
-			<Icon weight="bold" className="h-3 w-3" />
+			<Icon weight="bold" className="size-3" />
 		</Button>
 	);
 };

interface/components/TrafficLights.tsx

@@ -55,7 +55,7 @@ function TrafficLight(props: TrafficLightProps) {
 		<div
 			onClick={onClick}
 			className={clsx(
-				'box-content flex h-[12px] w-[12px] items-center justify-center rounded-full border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F]',
+				'box-content flex size-[12px] items-center justify-center rounded-full border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F]',
 				{
 					'border-red-900 !bg-[#EC6A5E] active:hover:!bg-red-700 dark:active:hover:!bg-red-300':
 						type === 'close' && colorful,

packages/ui/src/CheckBox.tsx

@@ -8,7 +8,7 @@ import { ComponentProps, forwardRef } from 'react';
 
 const styles = cva(
 	[
-		'form-check-input float-left mr-2 mt-1 h-4 w-4 appearance-none rounded-sm border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200',
+		'form-check-input float-left mr-2 mt-1 size-4 appearance-none rounded-sm border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200',
 		'checked:border-accent checked:bg-accent checked:hover:bg-accent/80 focus:outline-none'
 	],
 	{ variants: {} }
@@ -31,8 +31,8 @@ export interface RadixCheckboxProps extends ComponentProps<typeof Checkbox.Root>
 export const RadixCheckbox = ({ className, labelClassName, ...props }: RadixCheckboxProps) => (
 	<div className={clsx('flex items-center', className)}>
 		<Checkbox.Root
-			className="flex h-[17px] w-[17px] shrink-0 items-center justify-center
+			className="flex size-[17px] shrink-0 items-center justify-center rounded-[4px]
-			 rounded-[4px] border border-gray-300/10 bg-app-selected radix-state-checked:bg-accent"
+			 border border-gray-300/10 bg-app-selected radix-state-checked:bg-accent"
 			id={props.name}
 			{...props}
 		>

packages/ui/src/ContextMenu.tsx

@@ -156,7 +156,7 @@ const CheckboxItem = ({
 	return (
 		<RadixCM.CheckboxItem className={contextMenuItemClassNames} {...props}>
 			<ContextMenuDivItem variant={variant} className={className}>
-				<span className="flex h-3.5 w-3.5 items-center justify-center">
+				<span className="flex size-3.5 items-center justify-center">
 					<RadixCM.ItemIndicator>
 						<Check weight="bold" />
 					</RadixCM.ItemIndicator>

packages/ui/src/Dropdown.tsx

@@ -28,7 +28,7 @@ const itemStyles = cva(
 	}
 );
 
-const itemIconStyles = cva('mr-2 h-4 w-4', {
+const itemIconStyles = cva('mr-2 size-4', {
 	variants: {}
 });
 

packages/ui/src/Input.tsx

@@ -175,7 +175,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, Props>((props, ref) =>
 					size="icon"
 					className={clsx(props.buttonClassnames)}
 				>
-					<CurrentEyeIcon className="!pointer-events-none h-4 w-4" />
+					<CurrentEyeIcon className="!pointer-events-none size-4" />
 				</Button>
 			}
 		/>

packages/ui/src/Loader.tsx

@@ -8,7 +8,7 @@ export function Loader(props: { className?: string }) {
 			strokeOpacity={4}
 			strokeWidth={5}
 			speed={1}
-			className={clsx('h-7 w-7', props.className)}
+			className={clsx('size-7', props.className)}
 		/>
 	);
 }

packages/ui/src/RadioGroup.tsx

@@ -32,7 +32,7 @@ export const Item = ({ children, ...props }: ItemProps) => {
 			<RadioGroup.Item
 				id={'radio' + props.value}
 				className={clsx(
-					'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-app-line',
+					'peer relative mr-1 mt-1 size-4 flex-shrink-0 rounded-full border border-app-line',
 					'radix-state-checked:bg-accent',
 					'radix-state-unchecked:bg-app-input',
 					'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800'
@@ -40,7 +40,7 @@ export const Item = ({ children, ...props }: ItemProps) => {
 				{...props}
 			>
 				<RadioGroup.Indicator className="leading-0 absolute inset-0 flex items-center justify-center">
-					<div className="h-1.5 w-1.5 rounded-full bg-white"></div>
+					<div className="size-1.5 rounded-full bg-white"></div>
 				</RadioGroup.Indicator>
 			</RadioGroup.Item>
 			<label className="" htmlFor={'radio' + props.value}>

packages/ui/src/Select.tsx

@@ -87,7 +87,7 @@ export function SelectOption(props: PropsWithChildren<{ value: string; default?:
 		>
 			<RS.ItemText>{props.children}</RS.ItemText>
 			<RS.ItemIndicator className="absolute left-1 inline-flex items-center">
-				<Check className="h-4 w-4" />
+				<Check className="size-4" />
 			</RS.ItemIndicator>
 		</RS.Item>
 	);

packages/ui/src/Slider.tsx

@@ -12,7 +12,7 @@ export const Slider = (props: SliderPrimitive.SliderProps) => (
 			<SliderPrimitive.Range className="absolute h-full rounded-full bg-accent outline-none" />
 		</SliderPrimitive.Track>
 		<SliderPrimitive.Thumb
-			className="z-50 block h-5 w-5 rounded-full bg-accent font-bold shadow-lg shadow-black/20 outline-none ring-accent/30 transition focus:ring-4"
+			className="z-50 block size-5 rounded-full bg-accent font-bold shadow-lg shadow-black/20 outline-none ring-accent/30 transition focus:ring-4"
 			data-tip="1.0"
 		/>
 	</SliderPrimitive.Root>

packages/ui/src/Switch.tsx

@@ -30,13 +30,13 @@ const switchStyles = cva(
 	}
 );
 const thumbStyles = cva(
-	['inline-block h-4 w-4 transition', 'rounded-full bg-white', 'shadow-sm shadow-app-shade/40'],
+	['inline-block size-4 transition', 'rounded-full bg-white', 'shadow-sm shadow-app-shade/40'],
 	{
 		variants: {
 			size: {
-				sm: 'h-[12px] w-[12px] radix-state-checked:translate-x-[14px]',
+				sm: 'size-[12px] radix-state-checked:translate-x-[14px]',
-				md: 'h-[19px] w-[19px] radix-state-checked:translate-x-[20px]',
+				md: 'size-[19px] radix-state-checked:translate-x-[20px]',
-				lg: 'h-6 w-6 radix-state-checked:translate-x-[23px]'
+				lg: 'size-6 radix-state-checked:translate-x-[23px]'
 			}
 		},
 		defaultVariants: {

packages/ui/src/forms/Form.tsx

@@ -88,7 +88,7 @@ export const ErrorMessage = ({ name, variant, className }: ErrorMessageProps) =>
 				const message = error?.message;
 				return typeof message === 'string' ? (
 					<animated.div style={styles} className={errorStyles({ variant, className })}>
-						<Warning className="h-4 w-4" />
+						<Warning className="size-4" />
 						<p>{message}</p>
 					</animated.div>
 				) : null;