feat: rename volumes & repositories

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

@@ -115,8 +115,6 @@ export const CreateRepositoryForm = ({
 									onChange={(e) => field.onChange(slugify(e.target.value))}
 									max={32}
 									min={2}
-									disabled={mode === "update"}
-									className={mode === "update" ? "bg-gray-50" : ""}
 								/>
 							</FormControl>
 							<FormDescription>Unique identifier for the repository.</FormDescription>

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

@@ -104,8 +104,6 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 									onChange={(e) => field.onChange(slugify(e.target.value))}
 									max={32}
 									min={1}
-									disabled={mode === "update"}
-									className={mode === "update" ? "bg-gray-50" : ""}
 								/>
 							</FormControl>
 							<FormDescription>Unique identifier for the volume.</FormDescription>

app/client/modules/notifications/components/create-notification-form.tsx

@@ -114,8 +114,6 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
 									onChange={(e) => field.onChange(slugify(e.target.value))}
 									max={32}
 									min={2}
-									disabled={mode === "update"}
-									className={mode === "update" ? "bg-gray-50" : ""}
 								/>
 							</FormControl>
 							<FormDescription>Unique identifier for this notification destination.</FormDescription>

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

@@ -1,36 +1,122 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useNavigate } from "react-router";
 import { Card } from "~/client/components/ui/card";
+import { Button } from "~/client/components/ui/button";
+import { Input } from "~/client/components/ui/input";
+import { Label } from "~/client/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
 import type { Repository } from "~/client/lib/types";
+import { slugify } from "~/client/lib/utils";
+import { updateRepositoryMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import type { UpdateRepositoryResponse } from "~/client/api-client/types.gen";
+
+type CompressionMode = "off" | "auto" | "fastest" | "better" | "max";
 
 type Props = {
 	repository: Repository;
 };
 
 export const RepositoryInfoTabContent = ({ repository }: Props) => {
+	const navigate = useNavigate();
+	const [name, setName] = useState(repository.name);
+	const [compressionMode, setCompressionMode] = useState<CompressionMode>(
+		(repository.compressionMode as CompressionMode) || "off",
+	);
+	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+
+	const updateMutation = useMutation({
+		...updateRepositoryMutation(),
+		onSuccess: (data: UpdateRepositoryResponse) => {
+			toast.success("Repository updated successfully");
+			setShowConfirmDialog(false);
+
+			if (data.name !== repository.name) {
+				navigate(`/repositories/${data.name}`);
+			}
+		},
+		onError: (error) => {
+			toast.error("Failed to update repository", { description: error.message, richColors: true });
+			setShowConfirmDialog(false);
+		},
+	});
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		setShowConfirmDialog(true);
+	};
+
+	const confirmUpdate = () => {
+		updateMutation.mutate({
+			path: { name: repository.name },
+			body: { name, compressionMode },
+		});
+	};
+
+	const hasChanges =
+		name !== repository.name || compressionMode !== ((repository.compressionMode as CompressionMode) || "off");
+
 	return (
+		<>
 			<Card className="p-6">
-			<div className="space-y-6">
+				<form onSubmit={handleSubmit} className="space-y-6">
+					<div>
+						<h3 className="text-lg font-semibold mb-4">Repository Settings</h3>
+						<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(slugify(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>
+					</div>
+
 					<div>
 						<h3 className="text-lg font-semibold mb-4">Repository Information</h3>
 						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div>
-							<div className="text-sm font-medium text-muted-foreground">Name</div>
-							<p className="mt-1 text-sm">{repository.name}</p>
-						</div>
 							<div>
 								<div className="text-sm font-medium text-muted-foreground">Backend</div>
 								<p className="mt-1 text-sm">{repository.type}</p>
 							</div>
-						<div>
-							<div className="text-sm font-medium text-muted-foreground">Compression Mode</div>
-							<p className="mt-1 text-sm">{repository.compressionMode || "off"}</p>
-						</div>
 							<div>
 								<div className="text-sm font-medium text-muted-foreground">Status</div>
 								<p className="mt-1 text-sm">{repository.status || "unknown"}</p>
 							</div>
 							<div>
 								<div className="text-sm font-medium text-muted-foreground">Created At</div>
-							<p className="mt-1 text-sm">{new Date(repository.createdAt).toLocaleString()}</p>
+								<p className="mt-1 text-sm">{new Date(repository.createdAt * 1000).toLocaleString()}</p>
 							</div>
 							<div>
 								<div className="text-sm font-medium text-muted-foreground">Last Checked</div>
@@ -40,24 +126,45 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 							</div>
 						</div>
 					</div>
+
 					{repository.lastError && (
 						<div>
 							<div className="flex items-center justify-between mb-4">
 								<h3 className="text-lg font-semibold text-red-500">Last Error</h3>
 							</div>
-
 							<div className="bg-red-500/10 border border-red-500/20 rounded-md p-4">
 								<p className="text-sm text-red-500">{repository.lastError}</p>
 							</div>
 						</div>
 					)}
+
 					<div>
 						<h3 className="text-lg font-semibold mb-4">Configuration</h3>
 						<div className="bg-muted/50 rounded-md p-4">
 							<pre className="text-sm overflow-auto">{JSON.stringify(repository.config, null, 2)}</pre>
 						</div>
 					</div>
+
+					<div className="flex justify-end pt-4 border-t">
+						<Button type="submit" disabled={!hasChanges || updateMutation.isPending} loading={updateMutation.isPending}>
+							Save Changes
+						</Button>
 					</div>
+				</form>
 			</Card>
+
+			<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Update Repository</AlertDialogTitle>
+						<AlertDialogDescription>Are you sure you want to update the repository settings?</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={confirmUpdate}>Update</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	);
 };

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

@@ -1,5 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
+import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
 import {
@@ -17,6 +18,7 @@ import type { StatFs, Volume } from "~/client/lib/types";
 import { HealthchecksCard } from "../components/healthchecks-card";
 import { StorageChart } from "../components/storage-chart";
 import { updateVolumeMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import type { UpdateVolumeResponse } from "~/client/api-client/types.gen";
 
 type Props = {
 	volume: Volume;
@@ -24,12 +26,18 @@ type Props = {
 };
 
 export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
+	const navigate = useNavigate();
+
 	const updateMutation = useMutation({
 		...updateVolumeMutation(),
-		onSuccess: (_) => {
+		onSuccess: (data: UpdateVolumeResponse) => {
 			toast.success("Volume updated successfully");
 			setOpen(false);
 			setPendingValues(null);
+
+			if (data.name !== volume.name) {
+				navigate(`/volumes/${data.name}`);
+			}
 		},
 		onError: (error) => {
 			toast.error("Failed to update volume", { description: error.message });
@@ -50,7 +58,7 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 		if (pendingValues) {
 			updateMutation.mutate({
 				path: { name: volume.name },
-				body: { config: pendingValues },
+				body: { name: pendingValues.name, config: pendingValues },
 			});
 		}
 	};