refactor(repo-details): design layout

app/client/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 				className,
 			)}
 			{...props}

app/client/modules/repositories/components/doctor-report.tsx

@@ -44,14 +44,14 @@ export const DoctorReport = ({
 								<CollapsibleContent className="border-t bg-muted/50">
 									<div className="p-2 space-y-3">
 										{step.output && (
-											<pre className="text-xs font-mono bg-background/50 p-3 rounded border overflow-auto max-h-50 whitespace-pre-wrap">
+											<pre className="text-xs font-mono bg-background/50 p-3 border overflow-auto max-h-50 whitespace-pre-wrap">
 												{step.output.startsWith("{") ? JSON.stringify(JSON.parse(step.output), null, 2) : step.output}
 											</pre>
 										)}
 										{step.error && (
 											<div className="space-y-1.5">
 												<div className="text-[10px] uppercase font-bold text-red-500/70 px-1">Error</div>
-												<pre className="text-xs font-mono bg-red-500/5 text-red-500 p-3 rounded border border-red-500/20 overflow-auto whitespace-pre-wrap">
+												<pre className="text-xs font-mono bg-red-500/5 text-red-500 p-3 border border-red-500/20 overflow-auto whitespace-pre-wrap">
 													{step.error}
 												</pre>
 											</div>
@@ -67,20 +67,20 @@ export const DoctorReport = ({
 				</div>
 			)}
 			<div
-				className={cn("mt-2 bg-muted/30 border rounded-lg p-6 text-center", {
+				className={cn("mt-2 bg-muted/30 border p-6 text-center", {
 					hidden: result !== null || repositoryStatus === "doctor",
 				})}
 			>
 				<p className="text-sm text-muted-foreground">No doctor report available.</p>
 			</div>
 			<div
-				className={cn("mt-2 border rounded-lg p-6 text-center", {
+				className={cn("mt-2 border p-6 text-center", {
 					hidden: repositoryStatus !== "doctor",
 				})}
 			>
 				<div className="flex items-center justify-center gap-2">
 					<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-					<p className="text-sm ">Doctor operation is currently running...</p>
+					<p className="text-sm ">Doctor operation running...</p>
 				</div>
 			</div>
 		</div>

app/client/modules/repositories/components/repository-forms/advanced-tls-form.tsx

@@ -33,7 +33,7 @@ export const AdvancedForm = ({ form }: Props) => {
 			<CollapsibleContent className="pb-4 space-y-4">
 				<div className="space-y-4 mt-4">
 					<div className="grid gap-6">
-						<div className="space-y-4 rounded-lg border bg-background/50 p-4">
+						<div className="space-y-4 border p-4">
 							<FormField
 								control={form.control}
 								name="uploadLimit.enabled"
@@ -109,7 +109,7 @@ export const AdvancedForm = ({ form }: Props) => {
 						</div>
 					</div>
 
-					<div className="rounded-lg border bg-background/50 p-4">
+					<div className="border bg-background/50 p-4">
 						<FormField
 							control={form.control}
 							name="downloadLimit.enabled"
@@ -191,7 +191,7 @@ export const AdvancedForm = ({ form }: Props) => {
 					control={form.control}
 					name="insecureTls"
 					render={({ field }) => (
-						<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+						<FormItem className="flex flex-row items-start space-x-3 space-y-0 border p-4">
 							<FormControl>
 								<Tooltip delayDuration={500}>
 									<TooltipTrigger asChild>

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

@@ -1,32 +1,12 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { redirect, useNavigate, useSearchParams } from "react-router";
+import { redirect, useSearchParams } from "react-router";
-import { toast } from "sonner";
+import { useEffect } from "react";
-import { useState, useEffect } from "react";
+import { getRepositoryOptions, listSnapshotsOptions } from "~/client/api-client/@tanstack/react-query.gen";
-import {
-	cancelDoctorMutation,
-	deleteRepositoryMutation,
-	getRepositoryOptions,
-	listSnapshotsOptions,
-	startDoctorMutation,
-} from "~/client/api-client/@tanstack/react-query.gen";
-import { Button } from "~/client/components/ui/button";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "~/client/components/ui/alert-dialog";
-import { parseError } from "~/client/lib/errors";
 import { getRepository } from "~/client/api-client/sdk.gen";
 import type { Route } from "./+types/repository-details";
-import { cn } from "~/client/lib/utils";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
 import { RepositoryInfoTabContent } from "../tabs/info";
 import { RepositorySnapshotsTabContent } from "../tabs/snapshots";
-import { Square, Stethoscope, Trash2 } from "lucide-react";
 
 export const handle = {
 	breadcrumb: (match: Route.MetaArgs) => [
@@ -53,9 +33,7 @@ export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 };
 
 export default function RepositoryDetailsPage({ loaderData }: Route.ComponentProps) {
-	const navigate = useNavigate();
 	const queryClient = useQueryClient();
-	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const activeTab = searchParams.get("tab") || "info";
@@ -69,79 +47,8 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 		void queryClient.prefetchQuery(listSnapshotsOptions({ path: { id: data.id } }));
 	}, [queryClient, data.id]);
 
-	const deleteRepo = useMutation({
-		...deleteRepositoryMutation(),
-		onSuccess: () => {
-			toast.success("Repository deleted successfully");
-			void navigate("/repositories");
-		},
-		onError: (error) => {
-			toast.error("Failed to delete repository", {
-				description: parseError(error)?.message,
-			});
-		},
-	});
-
-	const startDoctor = useMutation({
-		...startDoctorMutation(),
-		onError: (error) => {
-			toast.error("Failed to start doctor", {
-				description: parseError(error)?.message,
-			});
-		},
-	});
-
-	const cancelDoctor = useMutation({
-		...cancelDoctorMutation(),
-		onSuccess: () => {
-			toast.info("Doctor operation cancelled");
-		},
-		onError: (error) => {
-			toast.error("Failed to cancel doctor", {
-				description: parseError(error)?.message,
-			});
-		},
-	});
-
-	const handleConfirmDelete = () => {
-		setShowDeleteConfirm(false);
-		deleteRepo.mutate({ path: { id: data.id } });
-	};
-
 	return (
 		<>
-			<div className="flex items-center justify-between mb-4">
-				<div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
-					<span
-						className={cn("inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500", {
-							"bg-green-500/10 text-green-500": data.status === "healthy",
-							"bg-red-500/10 text-red-500": data.status === "error",
-							"bg-blue-500/10 text-blue-500": data.status === "doctor",
-						})}
-					>
-						{data.status || "unknown"}
-					</span>
-					<span className="text-xs bg-primary/10 rounded-md px-2 py-1">{data.type}</span>
-				</div>
-				<div className="flex gap-4">
-					{data.status === "doctor" ? (
-						<Button variant="destructive" onClick={() => cancelDoctor.mutate({ path: { id: data.id } })}>
-							<Square className="h-4 w-4 mr-2" />
-							<span>Cancel doctor</span>
-						</Button>
-					) : (
-						<Button onClick={() => startDoctor.mutate({ path: { id: data.id } })} disabled={startDoctor.isPending}>
-							<Stethoscope className="h-4 w-4 mr-2" />
-							Run doctor
-						</Button>
-					)}
-					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteRepo.isPending}>
-						<Trash2 className="h-4 w-4 mr-2" />
-						Delete
-					</Button>
-				</div>
-			</div>
-
 			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })}>
 				<TabsList className="mb-2">
 					<TabsTrigger value="info">Configuration</TabsTrigger>
@@ -154,31 +61,6 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 					<RepositorySnapshotsTabContent repository={data} />
 				</TabsContent>
 			</Tabs>
-
-			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Delete repository?</AlertDialogTitle>
-						<AlertDialogDescription>
-							Are you sure you want to delete the repository <strong>{data.name}</strong>? This will not remove the
-							actual data from the backend storage, only the repository configuration will be deleted.
-							<br />
-							<br />
-							All backup schedules associated with this repository will also be removed.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<div className="flex gap-3 justify-end">
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={handleConfirmDelete}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-						>
-							<Trash2 className="h-4 w-4 mr-2" />
-							Delete repository
-						</AlertDialogAction>
-					</div>
-				</AlertDialogContent>
-			</AlertDialog>
 		</>
 	);
 }

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

@@ -1,7 +1,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
-import { Check, Save } from "lucide-react";
+import { Check, Save, Square, Stethoscope, Trash2 } from "lucide-react";
 import { Card } from "~/client/components/ui/card";
 import { Button } from "~/client/components/ui/button";
 import { Input } from "~/client/components/ui/input";
@@ -20,9 +20,16 @@ import {
 import type { Repository } from "~/client/lib/types";
 import { REPOSITORY_BASE } from "~/client/lib/constants";
 import { formatDateTime, formatTimeAgo } from "~/client/lib/datetime";
-import { updateRepositoryMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import {
+	cancelDoctorMutation,
+	deleteRepositoryMutation,
+	startDoctorMutation,
+	updateRepositoryMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
 import type { CompressionMode, RepositoryConfig } from "~/schemas/restic";
 import { DoctorReport } from "../components/doctor-report";
+import { parseError } from "~/client/lib/errors";
+import { useNavigate } from "react-router";
 
 type Props = {
 	repository: Repository;
@@ -42,10 +49,10 @@ const getEffectiveLocalPath = (repository: Repository): string | null => {
 
 export const RepositoryInfoTabContent = ({ repository }: Props) => {
 	const [name, setName] = useState(repository.name);
-	const [compressionMode, setCompressionMode] = useState<CompressionMode>(
+	const [compressionMode, setCompressionMode] = useState<CompressionMode>(repository.compressionMode || "off");
-		(repository.compressionMode as CompressionMode) || "off",
-	);
 	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const navigate = useNavigate();
 
 	const effectiveLocalPath = getEffectiveLocalPath(repository);
 
@@ -61,6 +68,40 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 		},
 	});
 
+	const deleteRepo = useMutation({
+		...deleteRepositoryMutation(),
+		onSuccess: () => {
+			toast.success("Repository deleted successfully");
+			void navigate("/repositories");
+		},
+		onError: (error) => {
+			toast.error("Failed to delete repository", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const startDoctor = useMutation({
+		...startDoctorMutation(),
+		onError: (error) => {
+			toast.error("Failed to start doctor", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const cancelDoctor = useMutation({
+		...cancelDoctorMutation(),
+		onSuccess: () => {
+			toast.info("Doctor operation cancelled");
+		},
+		onError: (error) => {
+			toast.error("Failed to cancel doctor", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault();
 		setShowConfirmDialog(true);
@@ -73,6 +114,11 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 		});
 	};
 
+	const handleConfirmDelete = () => {
+		setShowDeleteConfirm(false);
+		deleteRepo.mutate({ path: { id: repository.id } });
+	};
+
 	const hasChanges =
 		name !== repository.name || compressionMode !== ((repository.compressionMode as CompressionMode) || "off");
 
@@ -82,35 +128,67 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 		<>
 			<Card className="p-6">
 				<form onSubmit={handleSubmit} className="space-y-6">
-					<div>
+					<div className="flex flex-col sm:flex-row items-center justify-between gap-2">
-						<h3 className="text-lg font-semibold mb-4">Repository Settings</h3>
+						<div>
-						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+							<span className="text-lg font-semibold mb-4">Repository Settings</span>
-							<div className="space-y-2">
+						</div>
-								<Label htmlFor="name">Name</Label>
+						<div className="flex gap-4">
-								<Input
+							{repository.status === "doctor" ? (
-									id="name"
+								<Button
-									value={name}
+									type="button"
-									onChange={(e) => setName(e.target.value)}
+									variant="destructive"
-									placeholder="Repository name"
+									onClick={() => cancelDoctor.mutate({ path: { id: repository.id } })}
-									maxLength={32}
+								>
-									minLength={2}
+									<Square className="h-4 w-4 mr-2" />
-								/>
+									<span>Cancel doctor</span>
-								<p className="text-sm text-muted-foreground">Unique identifier for the repository.</p>
+								</Button>
-							</div>
+							) : (
-							<div className="space-y-2">
+								<Button
-								<Label htmlFor="compressionMode">Compression mode</Label>
+									type="button"
-								<Select value={compressionMode} onValueChange={(val) => setCompressionMode(val as CompressionMode)}>
+									onClick={() => startDoctor.mutate({ path: { id: repository.id } })}
-									<SelectTrigger id="compressionMode">
+									disabled={startDoctor.isPending}
-										<SelectValue placeholder="Select compression mode" />
+								>
-									</SelectTrigger>
+									<Stethoscope className="h-4 w-4 mr-2" />
-									<SelectContent>
+									Run doctor
-										<SelectItem value="off">Off</SelectItem>
+								</Button>
-										<SelectItem value="auto">Auto</SelectItem>
+							)}
-										<SelectItem value="max">Max</SelectItem>
+							<Button
-									</SelectContent>
+								type="button"
-								</Select>
+								variant="destructive"
-								<p className="text-sm text-muted-foreground">Compression level for new data.</p>
+								onClick={() => setShowDeleteConfirm(true)}
-							</div>
+								disabled={deleteRepo.isPending}
+							>
+								<Trash2 className="h-4 w-4 mr-2" />
+								Delete
+							</Button>
+						</div>
+					</div>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<Label htmlFor="name">Name</Label>
+							<Input
+								id="name"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								placeholder="Repository name"
+								maxLength={32}
+								minLength={2}
+							/>
+							<p className="text-sm text-muted-foreground">Unique identifier for the repository.</p>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="compressionMode">Compression mode</Label>
+							<Select value={compressionMode} onValueChange={(val) => setCompressionMode(val as CompressionMode)}>
+								<SelectTrigger id="compressionMode">
+									<SelectValue placeholder="Select compression mode" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="off">Off</SelectItem>
+									<SelectItem value="auto">Auto</SelectItem>
+									<SelectItem value="max">Max</SelectItem>
+								</SelectContent>
+							</Select>
+							<p className="text-sm text-muted-foreground">Compression level for new data.</p>
 						</div>
 					</div>
 
@@ -206,6 +284,31 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
+
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete repository?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete the repository <strong>{repository.name}</strong>? This will not remove
+							the actual data from the backend storage, only the repository configuration will be deleted.
+							<br />
+							<br />
+							All backup schedules associated with this repository will also be removed.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<div className="flex gap-3 justify-end">
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							<Trash2 className="h-4 w-4 mr-2" />
+							Delete repository
+						</AlertDialogAction>
+					</div>
+				</AlertDialogContent>
+			</AlertDialog>
 		</>
 	);
 };