refactor: unify backend and frontend servers

.dockerignore

@@ -12,12 +12,10 @@
 !**/build.ts
 !**/components.json
 
-!apps/**/src/**
+!src/**
-!apps/**/drizzle/**
+!drizzle/**
-!apps/**/app/**
+!app/**
-!apps/**/public/**
+!public/**
-
-!packages/**/src/**
 
 # License files and attributions
 !LICENSE

.gitignore

@@ -1,47 +1,11 @@
-# If you prefer the allow list template instead of the deny list, see community template:
+.DS_Store
-# https://github.com/github/gitignore/blob/main/community/Golang/Go.AllowList.gitignore
+/node_modules/
-#
-# Binaries for programs and plugins
-*.exe
-*.exe~
-*.dll
-*.so
-*.dylib
 
-# Test binary, built with `go test -c`
+# React Router
-*.test
+/.react-router/
+/build/
+/dist/
 
-# Code coverage profiles and other test artifacts
-*.out
-coverage.*
-*.coverprofile
-profile.cov
-
-# Dependency directories (remove the comment below to include it)
-# vendor/
-
-# Go workspace file
-go.work
-go.work.sum
-
-# env file
 .env
-
-# Editor/IDE
-# .idea/
-# .vscode/
-ironmount
-out/
-*.db
-tmp/
-
-node_modules/
-.env*
-
 .turbo
-
-mutagen.yml.lock
-
-data/
-
 CLAUDE.md

Dockerfile

@@ -45,9 +45,6 @@ WORKDIR /app
 COPY --from=deps /deps/restic /usr/local/bin/restic
 COPY --from=deps /deps/rclone /usr/local/bin/rclone
 COPY ./package.json ./bun.lock ./
-COPY ./packages/schemas/package.json ./packages/schemas/package.json
-COPY ./apps/client/package.json ./apps/client/package.json
-COPY ./apps/server/package.json ./apps/server/package.json
 
 RUN bun install --frozen-lockfile
 
@@ -84,14 +81,15 @@ WORKDIR /app
 
 COPY --from=deps /deps/restic /usr/local/bin/restic
 COPY --from=deps /deps/rclone /usr/local/bin/rclone
-COPY --from=builder /app/apps/server/dist ./
+COPY --from=builder /app/dist/client ./dist/client
-COPY --from=builder /app/apps/server/drizzle ./assets/migrations
+COPY --from=builder /app/dist/server ./dist/server
-COPY --from=builder /app/apps/client/dist/client ./assets/frontend
+COPY --from=builder /app/drizzle ./assets/migrations
+COPY --from=builder /app/package.json ./
 
 # Include third-party licenses and attribution
 COPY ./LICENSES ./LICENSES
 COPY ./NOTICES.md ./NOTICES.md
 COPY ./LICENSE ./LICENSE.md
 
-CMD ["bun", "./index.js"]
+CMD ["bun", "run", "start"]
 

app/client/components/app-breadcrumb.tsx

@@ -6,8 +6,8 @@ import {
 	BreadcrumbList,
 	BreadcrumbPage,
 	BreadcrumbSeparator,
-} from "~/components/ui/breadcrumb";
+} from "~/client/components/ui/breadcrumb";
-import { useBreadcrumbs } from "~/lib/breadcrumbs";
+import { useBreadcrumbs } from "~/client/lib/breadcrumbs";
 
 export function AppBreadcrumb() {
 	const breadcrumbs = useBreadcrumbs();

app/client/components/app-sidebar.tsx

@@ -10,9 +10,9 @@ import {
 	SidebarMenuButton,
 	SidebarMenuItem,
 	useSidebar,
-} from "~/components/ui/sidebar";
+} from "~/client/components/ui/sidebar";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 const items = [
 	{

app/client/components/create-repository-dialog.tsx

@@ -3,7 +3,7 @@ import { Plus } from "lucide-react";
 import { useId } from "react";
 import { toast } from "sonner";
 import { createRepositoryMutation } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
 import { CreateRepositoryForm } from "./create-repository-form";
 import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";

app/client/components/create-repository-form.tsx

@@ -1,9 +1,8 @@
 import { arktypeResolver } from "@hookform/resolvers/arktype";
-import { COMPRESSION_MODES, repositoryConfigSchema } from "@ironmount/schemas/restic";
 import { type } from "arktype";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { cn, slugify } from "~/lib/utils";
+import { cn, slugify } from "~/client/lib/utils";
 import { deepClean } from "~/utils/object";
 import { Button } from "./ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
@@ -14,7 +13,8 @@ import { useQuery } from "@tanstack/react-query";
 import { Alert, AlertDescription } from "./ui/alert";
 import { ExternalLink } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
-import { useSystemInfo } from "~/hooks/use-system-info";
+import { useSystemInfo } from "~/client/hooks/use-system-info";
+import { COMPRESSION_MODES, repositoryConfigSchema } from "~/schemas/restic";
 
 export const formSchema = type({
 	name: "2<=string<=32",

app/client/components/create-volume-dialog.tsx

@@ -3,7 +3,7 @@ import { Plus } from "lucide-react";
 import { useId } from "react";
 import { toast } from "sonner";
 import { createVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
 import { CreateVolumeForm } from "./create-volume-form";
 import { Button } from "./ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";

app/client/components/create-volume-form.tsx

@@ -1,18 +1,18 @@
 import { arktypeResolver } from "@hookform/resolvers/arktype";
-import { volumeConfigSchema } from "@ironmount/schemas";
 import { useMutation } from "@tanstack/react-query";
 import { type } from "arktype";
 import { CheckCircle, Loader2, XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
-import { cn, slugify } from "~/lib/utils";
+import { cn, slugify } from "~/client/lib/utils";
 import { deepClean } from "~/utils/object";
 import { DirectoryBrowser } from "./directory-browser";
 import { Button } from "./ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
 import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { volumeConfigSchema } from "~/schemas/volumes";
 
 export const formSchema = type({
 	name: "2<=string<=32",

app/client/components/file-tree.tsx

@@ -10,8 +10,8 @@
 
 import { ChevronDown, ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen, Loader2 } from "lucide-react";
 import { memo, type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { Checkbox } from "~/components/ui/checkbox";
+import { Checkbox } from "~/client/components/ui/checkbox";
 
 const NODE_PADDING_LEFT = 12;
 

app/client/components/grid-background.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 interface GridBackgroundProps {
 	children: ReactNode;

app/client/components/onoff.tsx

@@ -1,4 +1,4 @@
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 import { Switch } from "./ui/switch";
 
 type Props = {

app/client/components/repository-icon.tsx

@@ -1,5 +1,5 @@
-import type { RepositoryBackend } from "@ironmount/schemas/restic";
 import { Database, HardDrive, Cloud } from "lucide-react";
+import type { RepositoryBackend } from "~/schemas/restic";
 
 type Props = {
 	backend: RepositoryBackend;

app/client/components/snapshots-table.tsx

@@ -1,9 +1,9 @@
 import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react";
 import { useNavigate } from "react-router";
 import type { ListSnapshotsResponse } from "~/api-client/types.gen";
-import { ByteSize } from "~/components/bytes-size";
+import { ByteSize } from "~/client/components/bytes-size";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
 import { formatDuration } from "~/utils/utils";
 
 type Snapshot = ListSnapshotsResponse[number];

app/client/components/status-dot.tsx

@@ -1,5 +1,5 @@
-import type { VolumeStatus } from "~/lib/types";
+import type { VolumeStatus } from "~/client/lib/types";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export const StatusDot = ({ status }: { status: VolumeStatus }) => {

app/client/components/ui/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import type * as React from "react";
-import { buttonVariants } from "~/components/ui/button";
+import { buttonVariants } from "~/client/components/ui/button";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
 	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;

app/client/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 const alertVariants = cva(
 	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

app/client/components/ui/breadcrumb.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-words sm:gap-2.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props} />
+	);
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			className={cn("text-foreground font-normal", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("[&>svg]:size-3.5", className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("flex size-9 items-center justify-center", className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};

app/client/components/ui/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 const buttonVariants = cva(
 	"inline-flex cursor-pointer uppercase rounded-sm items-center justify-center gap-2 whitespace-nowrap text-xs font-semibold tracking-wide transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring border-0",

app/client/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Card({ className, children, ...props }: React.ComponentProps<"div">) {
 	return (

app/client/components/ui/chart.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;

app/client/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="grid place-content-center text-current transition-none"
+			>
+				<CheckIcon className="size-3.5" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
+}
+
+export { Checkbox };

app/client/components/ui/dialog.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

app/client/components/ui/form.tsx

@@ -11,8 +11,8 @@ import {
 	type FieldValues,
 } from "react-hook-form";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { Label } from "~/components/ui/label";
+import { Label } from "~/client/components/ui/label";
 
 const Form = FormProvider;
 

app/client/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (

app/client/components/ui/label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "~/client/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

app/client/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
 	return (

app/client/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "~/client/lib/utils";
+
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
+		<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+}
+
+function ScrollBar({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				"flex touch-none p-px transition-colors select-none",
+				orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+				orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+				className,
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
+}
+
+export { ScrollArea, ScrollBar };

app/client/components/ui/select.tsx

@@ -2,23 +2,17 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
-function Select({
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
 	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
 	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
 	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
@@ -83,10 +77,7 @@ function SelectContent({
 	);
 }
 
-function SelectLabel({
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
 	return (
 		<SelectPrimitive.Label
 			data-slot="select-label"
@@ -96,11 +87,7 @@ function SelectLabel({
 	);
 }
 
-function SelectItem({
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-	className,
-	children,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
 	return (
 		<SelectPrimitive.Item
 			data-slot="select-item"
@@ -120,10 +107,7 @@ function SelectItem({
 	);
 }
 
-function SelectSeparator({
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
 	return (
 		<SelectPrimitive.Separator
 			data-slot="select-separator"
@@ -133,17 +117,11 @@ function SelectSeparator({
 	);
 }
 
-function SelectScrollUpButton({
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-	className,
-	...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
 	return (
 		<SelectPrimitive.ScrollUpButton
 			data-slot="select-scroll-up-button"
-			className={cn(
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
-				"flex cursor-default items-center justify-center py-1",
-				className,
-			)}
 			{...props}
 		>
 			<ChevronUpIcon className="size-4" />
@@ -158,10 +136,7 @@ function SelectScrollDownButton({
 	return (
 		<SelectPrimitive.ScrollDownButton
 			data-slot="select-scroll-down-button"
-			className={cn(
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
-				"flex cursor-default items-center justify-center py-1",
-				className,
-			)}
 			{...props}
 		>
 			<ChevronDownIcon className="size-4" />

app/client/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "~/client/lib/utils";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };

app/client/components/ui/sheet.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "~/client/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left";
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };

app/client/components/ui/sidebar.tsx

@@ -5,14 +5,14 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 
-import { useIsMobile } from "~/hooks/use-mobile";
+import { useIsMobile } from "~/client/hooks/use-mobile";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
-import { Separator } from "~/components/ui/separator";
+import { Separator } from "~/client/components/ui/separator";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/ui/sheet";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/client/components/ui/sheet";
-import { Skeleton } from "~/components/ui/skeleton";
+import { Skeleton } from "~/client/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;

app/client/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from "~/client/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="skeleton" className={cn("bg-accent animate-pulse rounded-md", className)} {...props} />;
+}
+
+export { Skeleton };

app/client/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
 	return (

app/client/components/ui/table.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+
+import { cn } from "~/client/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div data-slot="table-container" className="relative w-full overflow-x-auto">
+			<table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+	return (
+		<caption data-slot="table-caption" className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
+	);
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

app/client/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import type * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
 	return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />;

app/client/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 	return (

app/client/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "~/client/lib/utils";
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

app/client/components/volume-file-browser.tsx

@@ -2,7 +2,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { FolderOpen } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { listFilesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { FileTree } from "~/components/file-tree";
+import { FileTree } from "~/client/components/file-tree";
 
 interface FileEntry {
 	name: string;

app/client/components/volume-icon.tsx

@@ -1,5 +1,5 @@
-import type { BackendType } from "@ironmount/schemas";
 import { Cloud, Folder, Server, Share2 } from "lucide-react";
+import type { BackendType } from "~/schemas/volumes";
 
 type VolumeIconProps = {
 	backend: BackendType;

app/client/modules/auth/routes/download-recovery-key.tsx

@@ -4,11 +4,11 @@ import { useState } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { downloadResticPasswordMutation } from "~/api-client/@tanstack/react-query.gen";
-import { AuthLayout } from "~/components/auth-layout";
+import { AuthLayout } from "~/client/components/auth-layout";
-import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "~/client/components/ui/alert";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
-import { Label } from "~/components/ui/label";
+import { Label } from "~/client/components/ui/label";
 import { authMiddleware } from "~/middleware/auth";
 import type { Route } from "./+types/download-recovery-key";
 

app/client/modules/auth/routes/login.tsx

@@ -5,10 +5,10 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { loginMutation } from "~/api-client/@tanstack/react-query.gen";
-import { AuthLayout } from "~/components/auth-layout";
+import { AuthLayout } from "~/client/components/auth-layout";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
 import { authMiddleware } from "~/middleware/auth";
 import type { Route } from "./+types/login";
 

app/client/modules/auth/routes/onboarding.tsx

@@ -5,12 +5,20 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { registerMutation } from "~/api-client/@tanstack/react-query.gen";
-import { AuthLayout } from "~/components/auth-layout";
+import {
-import { Button } from "~/components/ui/button";
+	Form,
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+	FormControl,
-import { Input } from "~/components/ui/input";
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
 import { authMiddleware } from "~/middleware/auth";
 import type { Route } from "./+types/onboarding";
+import { AuthLayout } from "~/client/components/auth-layout";
+import { Input } from "~/client/components/ui/input";
+import { Button } from "~/client/components/ui/button";
 
 export const clientMiddleware = [authMiddleware];
 

app/client/modules/backups/components/backup-progress-card.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { ByteSize, formatBytes } from "~/components/bytes-size";
+import { ByteSize, formatBytes } from "~/client/components/bytes-size";
-import { Card } from "~/components/ui/card";
+import { Card } from "~/client/components/ui/card";
-import { Progress } from "~/components/ui/progress";
+import { Progress } from "~/client/components/ui/progress";
-import { type BackupProgressEvent, useServerEvents } from "~/hooks/use-server-events";
+import { type BackupProgressEvent, useServerEvents } from "~/client/hooks/use-server-events";
 import { formatDuration } from "~/utils/utils";
 
 type Props = {

app/client/modules/backups/components/backup-status-dot.tsx

@@ -1,5 +1,5 @@
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
 
 type BackupStatus = "active" | "paused" | "error" | "in_progress";
 
@@ -7,7 +7,11 @@ export const BackupStatusDot = ({
 	enabled,
 	hasError,
 	isInProgress,
-}: { enabled: boolean; hasError?: boolean; isInProgress?: boolean }) => {
+}: {
+	enabled: boolean;
+	hasError?: boolean;
+	isInProgress?: boolean;
+}) => {
 	let status: BackupStatus = "paused";
 	if (isInProgress) {
 		status = "in_progress";

app/client/modules/backups/components/create-schedule-form.tsx

@@ -4,14 +4,22 @@ import { type } from "arktype";
 import { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
 import { listRepositoriesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { RepositoryIcon } from "~/components/repository-icon";
+import { RepositoryIcon } from "~/client/components/repository-icon";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+import {
-import { Input } from "~/components/ui/input";
+	Form,
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+	FormControl,
-import { Textarea } from "~/components/ui/textarea";
+	FormDescription,
-import { VolumeFileBrowser } from "~/components/volume-file-browser";
+	FormField,
-import type { BackupSchedule, Volume } from "~/lib/types";
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
+import { Input } from "~/client/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Textarea } from "~/client/components/ui/textarea";
+import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
+import type { BackupSchedule, Volume } from "~/client/lib/types";
 import { deepClean } from "~/utils/object";
 
 const internalFormSchema = type({

app/client/modules/backups/components/schedule-summary.tsx

@@ -1,8 +1,8 @@
 import { Pencil, Play, Square, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
-import { OnOff } from "~/components/onoff";
+import { OnOff } from "~/client/components/onoff";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -11,8 +11,8 @@ import {
 	AlertDialogDescription,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
+} from "~/client/components/ui/alert-dialog";
-import type { BackupSchedule } from "~/lib/types";
+import type { BackupSchedule } from "~/client/lib/types";
 import { BackupProgressCard } from "./backup-progress-card";
 
 type Props = {

app/client/modules/backups/components/snapshot-file-browser.tsx

@@ -2,11 +2,11 @@ import { useCallback, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { FileIcon } from "lucide-react";
 import { listSnapshotFilesOptions, restoreSnapshotMutation } from "~/api-client/@tanstack/react-query.gen";
-import { FileTree, type FileEntry } from "~/components/file-tree";
+import { FileTree, type FileEntry } from "~/client/components/file-tree";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Checkbox } from "~/components/ui/checkbox";
+import { Checkbox } from "~/client/components/ui/checkbox";
-import { Label } from "~/components/ui/label";
+import { Label } from "~/client/components/ui/label";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -16,9 +16,9 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
+} from "~/client/components/ui/alert-dialog";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
-import type { Snapshot, Volume } from "~/lib/types";
+import type { Snapshot, Volume } from "~/client/lib/types";
 import { toast } from "sonner";
 
 interface Props {

app/client/modules/backups/components/snapshot-timeline.tsx

@@ -1,7 +1,7 @@
 import type { ListSnapshotsResponse } from "~/api-client/types.gen";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { Card } from "~/components/ui/card";
+import { Card } from "~/client/components/ui/card";
-import { ByteSize } from "~/components/bytes-size";
+import { ByteSize } from "~/client/components/bytes-size";
 import { useEffect } from "react";
 
 interface Props {

app/client/modules/backups/routes/backup-details.tsx

@@ -2,7 +2,7 @@ import { useId, useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { redirect, useNavigate } from "react-router";
 import { toast } from "sonner";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
 import {
 	getBackupScheduleOptions,
 	runBackupNowMutation,
@@ -11,7 +11,7 @@ import {
 	updateBackupScheduleMutation,
 	stopBackupMutation,
 } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
 import { getCronExpression } from "~/utils/utils";
 import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
 import { ScheduleSummary } from "../components/schedule-summary";

app/client/modules/backups/routes/backups.tsx

@@ -4,9 +4,9 @@ import { Link } from "react-router";
 import { listBackupSchedules } from "~/api-client";
 import { listBackupSchedulesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { BackupStatusDot } from "../components/backup-status-dot";
-import { EmptyState } from "~/components/empty-state";
+import { EmptyState } from "~/client/components/empty-state";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
 import type { Route } from "./+types/backups";
 
 export function meta(_: Route.MetaArgs) {

app/client/modules/backups/routes/create-backup.tsx

@@ -1,5 +1,5 @@
 import { useId, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { Database, HardDrive } from "lucide-react";
 import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -8,11 +8,11 @@ import {
 	listRepositoriesOptions,
 	listVolumesOptions,
 } from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card, CardContent } from "~/components/ui/card";
+import { Card, CardContent } from "~/client/components/ui/card";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
-import { EmptyState } from "~/components/empty-state";
+import { EmptyState } from "~/client/components/empty-state";
 import { getCronExpression } from "~/utils/utils";
 import { CreateScheduleForm, type BackupScheduleFormValues } from "../components/create-schedule-form";
 import type { Route } from "./+types/create-backup";

app/client/modules/repositories/components/restore-snapshot-dialog.tsx

@@ -3,8 +3,8 @@ import { RotateCcw } from "lucide-react";
 import { useId, useState } from "react";
 import { toast } from "sonner";
 import { restoreSnapshotMutation } from "~/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -13,8 +13,8 @@ import {
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
-} from "~/components/ui/dialog";
+} from "~/client/components/ui/dialog";
-import { ScrollArea } from "~/components/ui/scroll-area";
+import { ScrollArea } from "~/client/components/ui/scroll-area";
 import { RestoreSnapshotForm, type RestoreSnapshotFormValues } from "./restore-snapshot-form";
 
 type Props = {

app/client/modules/repositories/components/restore-snapshot-form.tsx

@@ -1,8 +1,16 @@
 import { arktypeResolver } from "@hookform/resolvers/arktype";
 import { type } from "arktype";
 import { useForm } from "react-hook-form";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+import {
-import { Input } from "~/components/ui/input";
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "~/client/components/ui/form";
+import { Input } from "~/client/components/ui/input";
 
 const restoreSnapshotFormSchema = type({
 	path: "string?",

app/client/modules/repositories/routes/repositories.tsx

@@ -4,16 +4,16 @@ import { useState } from "react";
 import { useNavigate } from "react-router";
 import { listRepositories } from "~/api-client/sdk.gen";
 import { listRepositoriesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { CreateRepositoryDialog } from "~/components/create-repository-dialog";
+import { CreateRepositoryDialog } from "~/client/components/create-repository-dialog";
-import { RepositoryIcon } from "~/components/repository-icon";
+import { RepositoryIcon } from "~/client/components/repository-icon";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card } from "~/components/ui/card";
+import { Card } from "~/client/components/ui/card";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
 import type { Route } from "./+types/repositories";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { EmptyState } from "~/components/empty-state";
+import { EmptyState } from "~/client/components/empty-state";
 
 export function meta(_: Route.MetaArgs) {
 	return [

app/client/modules/repositories/routes/repository-details.tsx

@@ -8,7 +8,7 @@ import {
 	getRepositoryOptions,
 	listSnapshotsOptions,
 } from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -17,12 +17,12 @@ import {
 	AlertDialogDescription,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
+} from "~/client/components/ui/alert-dialog";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
 import { getRepository } from "~/api-client/sdk.gen";
 import type { Route } from "./+types/repository-details";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
 import { RepositoryInfoTabContent } from "../tabs/info";
 import { RepositorySnapshotsTabContent } from "../tabs/snapshots";
 import { Loader2 } from "lucide-react";

app/client/modules/repositories/routes/snapshot-details.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { redirect, useParams } from "react-router";
 import { listSnapshotFilesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
 import { RestoreSnapshotDialog } from "../components/restore-snapshot-dialog";
-import { SnapshotFileBrowser } from "~/modules/backups/components/snapshot-file-browser";
+import { SnapshotFileBrowser } from "~/client/modules/backups/components/snapshot-file-browser";
 import { getSnapshotDetails } from "~/api-client";
 import type { Route } from "./+types/snapshot-details";
 

app/client/modules/repositories/tabs/info.tsx

@@ -1,5 +1,5 @@
-import { Card } from "~/components/ui/card";
+import { Card } from "~/client/components/ui/card";
-import type { Repository } from "~/lib/types";
+import type { Repository } from "~/client/lib/types";
 
 type Props = {
 	repository: Repository;

app/client/modules/repositories/tabs/snapshots.tsx

@@ -2,12 +2,12 @@ import { useQuery } from "@tanstack/react-query";
 import { Database } from "lucide-react";
 import { useState } from "react";
 import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
-import { SnapshotsTable } from "~/components/snapshots-table";
+import { SnapshotsTable } from "~/client/components/snapshots-table";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
-import { Table, TableBody, TableCell, TableRow } from "~/components/ui/table";
+import { Table, TableBody, TableCell, TableRow } from "~/client/components/ui/table";
-import type { Repository, Snapshot } from "~/lib/types";
+import type { Repository, Snapshot } from "~/client/lib/types";
 
 type Props = {
 	repository: Repository;

app/client/modules/settings/routes/settings.tsx

@@ -8,8 +8,8 @@ import {
 	downloadResticPasswordMutation,
 	logoutMutation,
 } from "~/api-client/@tanstack/react-query.gen";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card, CardContent, CardDescription, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardTitle } from "~/client/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -18,9 +18,9 @@ import {
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
-} from "~/components/ui/dialog";
+} from "~/client/components/ui/dialog";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
-import { Label } from "~/components/ui/label";
+import { Label } from "~/client/components/ui/label";
 import { appContext } from "~/context";
 import type { Route } from "./+types/settings";
 

app/client/modules/volumes/components/healthchecks-card.tsx

@@ -3,10 +3,10 @@ import { formatDistanceToNow } from "date-fns";
 import { HeartIcon } from "lucide-react";
 import { toast } from "sonner";
 import { healthCheckVolumeMutation, updateVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
-import { OnOff } from "~/components/onoff";
+import { OnOff } from "~/client/components/onoff";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import type { Volume } from "~/lib/types";
+import type { Volume } from "~/client/lib/types";
 
 type Props = {
 	volume: Volume;

app/client/modules/volumes/components/storage-chart.tsx

@@ -3,10 +3,10 @@
 import { HardDrive, Unplug } from "lucide-react";
 import * as React from "react";
 import { Label, Pie, PieChart } from "recharts";
-import { ByteSize } from "~/components/bytes-size";
+import { ByteSize } from "~/client/components/bytes-size";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/components/ui/chart";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/client/components/ui/chart";
-import type { StatFs } from "~/lib/types";
+import type { StatFs } from "~/client/lib/types";
 
 type Props = {
 	statfs: StatFs;

app/client/modules/volumes/routes/volume-details.tsx

@@ -8,9 +8,9 @@ import {
 	mountVolumeMutation,
 	unmountVolumeMutation,
 } from "~/api-client/@tanstack/react-query.gen";
-import { StatusDot } from "~/components/status-dot";
+import { StatusDot } from "~/client/components/status-dot";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -19,17 +19,17 @@ import {
 	AlertDialogDescription,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
+} from "~/client/components/ui/alert-dialog";
-import { VolumeIcon } from "~/components/volume-icon";
+import { VolumeIcon } from "~/client/components/volume-icon";
-import { parseError } from "~/lib/errors";
+import { parseError } from "~/client/lib/errors";
-import { cn } from "~/lib/utils";
+import { cn } from "~/client/lib/utils";
 import type { Route } from "./+types/volume-details";
 import { getVolume } from "~/api-client";
 import { VolumeInfoTabContent } from "../tabs/info";
 import { FilesTabContent } from "../tabs/files";
 import { DockerTabContent } from "../tabs/docker";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
-import { useSystemInfo } from "~/hooks/use-system-info";
+import { useSystemInfo } from "~/client/hooks/use-system-info";
 
 export function meta({ params }: Route.MetaArgs) {
 	return [
@@ -42,7 +42,7 @@ export function meta({ params }: Route.MetaArgs) {
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const volume = await getVolume({ path: { name: params.name ?? "" } });
+	const volume = await getVolume({ path: { name: params.name } });
 	if (volume.data) return volume.data;
 };
 

app/client/modules/volumes/routes/volumes.tsx

@@ -4,15 +4,15 @@ import { useState } from "react";
 import { useNavigate } from "react-router";
 import { listVolumes } from "~/api-client";
 import { listVolumesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { CreateVolumeDialog } from "~/components/create-volume-dialog";
+import { CreateVolumeDialog } from "~/client/components/create-volume-dialog";
-import { EmptyState } from "~/components/empty-state";
+import { EmptyState } from "~/client/components/empty-state";
-import { StatusDot } from "~/components/status-dot";
+import { StatusDot } from "~/client/components/status-dot";
-import { Button } from "~/components/ui/button";
+import { Button } from "~/client/components/ui/button";
-import { Card } from "~/components/ui/card";
+import { Card } from "~/client/components/ui/card";
-import { Input } from "~/components/ui/input";
+import { Input } from "~/client/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
-import { VolumeIcon } from "~/components/volume-icon";
+import { VolumeIcon } from "~/client/components/volume-icon";
 import type { Route } from "./+types/volumes";
 
 export function meta(_: Route.MetaArgs) {

app/client/modules/volumes/tabs/docker.tsx

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { Unplug } from "lucide-react";
 import * as YML from "yaml";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { getContainersUsingVolumeOptions } from "~/api-client/@tanstack/react-query.gen";
-import { CodeBlock } from "~/components/ui/code-block";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
+import { CodeBlock } from "~/client/components/ui/code-block";
-import type { Volume } from "~/lib/types";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
-import { getContainersUsingVolumeOptions } from "../../../api-client/@tanstack/react-query.gen";
+import type { Volume } from "~/client/lib/types";
 
 type Props = {
 	volume: Volume;

app/client/modules/volumes/tabs/files.tsx

@@ -1,7 +1,7 @@
 import { FolderOpen } from "lucide-react";
-import { VolumeFileBrowser } from "~/components/volume-file-browser";
+import { VolumeFileBrowser } from "~/client/components/volume-file-browser";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import type { Volume } from "~/lib/types";
+import type { Volume } from "~/client/lib/types";
 
 type Props = {
 	volume: Volume;

app/client/modules/volumes/tabs/info.tsx

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
 import { updateVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
-import { CreateVolumeForm, type FormValues } from "~/components/create-volume-form";
+import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -12,9 +12,9 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
-} from "~/components/ui/alert-dialog";
+} from "~/client/components/ui/alert-dialog";
-import { Card } from "~/components/ui/card";
+import { Card } from "~/client/components/ui/card";
-import type { StatFs, Volume } from "~/lib/types";
+import type { StatFs, Volume } from "~/client/lib/types";
 import { HealthchecksCard } from "../components/healthchecks-card";
 import { StorageChart } from "../components/storage-chart";
 

app/client/routes/root.tsx

@@ -1,5 +1,9 @@
 import { redirect } from "react-router";
 
+export const loader = async () => {
+	return redirect("/volumes");
+};
+
 export const clientLoader = async () => {
 	return redirect("/volumes");
 };

app/context.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react-router";
-import type { User } from "./lib/types";
+import type { User } from "./client/lib/types";
 
 type AppContext = {
 	user: User | null;