From f2ede26af7649b42a917a2ad99270e66c84b251f Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Mon, 2 Feb 2026 20:34:37 +0100
Subject: [PATCH] fix(create-repo): directory selection

---
 .../local-repository-form.tsx                 | 156 ++++++++++--------
 1 file changed, 83 insertions(+), 73 deletions(-)

diff --git a/app/client/modules/repositories/components/repository-forms/local-repository-form.tsx b/app/client/modules/repositories/components/repository-forms/local-repository-form.tsx
index ecc1122b..b310c8eb 100644
--- a/app/client/modules/repositories/components/repository-forms/local-repository-form.tsx
+++ b/app/client/modules/repositories/components/repository-forms/local-repository-form.tsx
@@ -3,7 +3,7 @@ import type { UseFormReturn } from "react-hook-form";
 import { Check, Pencil, X, AlertTriangle } from "lucide-react";
 import { REPOSITORY_BASE } from "~/client/lib/constants";
 import { Button } from "../../../../components/ui/button";
-import { FormItem, FormLabel, FormDescription } from "../../../../components/ui/form";
+import { FormItem, FormLabel, FormDescription, FormField, FormControl } from "../../../../components/ui/form";
 import { DirectoryBrowser } from "../../../../components/directory-browser";
 import {
 	AlertDialog,
@@ -26,79 +26,89 @@ export const LocalRepositoryForm = ({ form }: Props) => {
 	const [showPathWarning, setShowPathWarning] = useState(false);
 
 	return (
-		<>
-			<FormItem>
-				<FormLabel>Repository Directory</FormLabel>
-				<div className="flex items-center gap-2">
-					<div className="flex-1 text-sm font-mono bg-muted px-3 py-2 rounded-md border">
-						{form.watch("path") || REPOSITORY_BASE}
-					</div>
-					<Button type="button" variant="outline" onClick={() => setShowPathWarning(true)} size="sm">
-						<Pencil className="h-4 w-4 mr-2" />
-						Change
-					</Button>
-				</div>
-				<FormDescription>The directory where the repository will be stored.</FormDescription>
-			</FormItem>
+		<FormField
+			control={form.control}
+			name="path"
+			render={({ field }) => (
+				<>
+					<FormItem>
+						<FormLabel>Repository Directory</FormLabel>
+						<FormControl>
+							<div className="flex items-center gap-2">
+								<div className="flex-1 text-sm font-mono bg-muted px-3 py-2 rounded-md border">
+									{field.value || REPOSITORY_BASE}
+								</div>
+								<Button type="button" variant="outline" onClick={() => setShowPathWarning(true)} size="sm">
+									<Pencil className="h-4 w-4 mr-2" />
+									Change
+								</Button>
+							</div>
+						</FormControl>
+						<FormDescription>The directory where the repository will be stored.</FormDescription>
+					</FormItem>
 
-			<AlertDialog open={showPathWarning} onOpenChange={setShowPathWarning}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle className="flex items-center gap-2">
-							<AlertTriangle className="h-5 w-5 text-yellow-500" />
-							Important: Host mount required
-						</AlertDialogTitle>
-						<AlertDialogDescription className="space-y-3">
-							<p>When selecting a custom path, ensure it is mounted from the host machine into the container.</p>
-							<p className="font-medium">
-								If the path is not a host mount, you will lose your repository data when the container restarts.
-							</p>
-							<p className="text-sm text-muted-foreground">
-								The default path <code className="bg-muted px-1 rounded">{REPOSITORY_BASE}</code> is safe to use if you
-								followed the recommended Docker Compose setup.
-							</p>
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={() => {
-								setShowPathBrowser(true);
-								setShowPathWarning(false);
-							}}
-						>
-							I Understand, Continue
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+					<AlertDialog open={showPathWarning} onOpenChange={setShowPathWarning}>
+						<AlertDialogContent>
+							<AlertDialogHeader>
+								<AlertDialogTitle className="flex items-center gap-2">
+									<AlertTriangle className="h-5 w-5 text-yellow-500" />
+									Important: Host mount required
+								</AlertDialogTitle>
+								<AlertDialogDescription className="space-y-3">
+									<p>When selecting a custom path, ensure it is mounted from the host machine into the container.</p>
+									<p className="font-medium">
+										If the path is not a host mount, you will lose your repository data when the container restarts.
+									</p>
+									<p className="text-sm text-muted-foreground">
+										The default path <code className="bg-muted px-1 rounded">{REPOSITORY_BASE}</code> is safe to use if
+										you followed the recommended Docker Compose setup.
+									</p>
+								</AlertDialogDescription>
+							</AlertDialogHeader>
+							<AlertDialogFooter>
+								<AlertDialogCancel>Cancel</AlertDialogCancel>
+								<AlertDialogAction
+									onClick={() => {
+										setShowPathBrowser(true);
+										setShowPathWarning(false);
+									}}
+								>
+									I Understand, Continue
+								</AlertDialogAction>
+							</AlertDialogFooter>
+						</AlertDialogContent>
+					</AlertDialog>
 
-			<AlertDialog open={showPathBrowser} onOpenChange={setShowPathBrowser}>
-				<AlertDialogContent className="max-w-2xl">
-					<AlertDialogHeader>
-						<AlertDialogTitle>Select Repository Directory</AlertDialogTitle>
-						<AlertDialogDescription>
-							Choose a directory from the filesystem to store the repository.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<div className="py-4">
-						<DirectoryBrowser
-							onSelectPath={(path) => form.setValue("path", path)}
-							selectedPath={form.watch("path") || REPOSITORY_BASE}
-						/>
-					</div>
-					<AlertDialogFooter>
-						<AlertDialogCancel>
-							<X className="h-4 w-4 mr-2" />
-							Cancel
-						</AlertDialogCancel>
-						<AlertDialogAction onClick={() => setShowPathBrowser(false)}>
-							<Check className="h-4 w-4 mr-2" />
-							Done
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</>
+					<AlertDialog open={showPathBrowser} onOpenChange={setShowPathBrowser}>
+						<AlertDialogContent className="max-w-2xl">
+							<AlertDialogHeader>
+								<AlertDialogTitle>Select Repository Directory</AlertDialogTitle>
+								<AlertDialogDescription>
+									Choose a directory from the filesystem to store the repository.
+								</AlertDialogDescription>
+							</AlertDialogHeader>
+							<div className="py-4">
+								<DirectoryBrowser
+									onSelectPath={(path) => {
+										field.onChange(path);
+									}}
+									selectedPath={field.value || REPOSITORY_BASE}
+								/>
+							</div>
+							<AlertDialogFooter>
+								<AlertDialogCancel>
+									<X className="h-4 w-4 mr-2" />
+									Cancel
+								</AlertDialogCancel>
+								<AlertDialogAction onClick={() => setShowPathBrowser(false)}>
+									<Check className="h-4 w-4 mr-2" />
+									Done
+								</AlertDialogAction>
+							</AlertDialogFooter>
+						</AlertDialogContent>
+					</AlertDialog>
+				</>
+			)}
+		/>
 	);
 };