fix: use Select value instead of defaultValue

when defaultValue is used to pass the current value of Select, a warning
is produced in the console: "cannot update a component while rendering a
different component `Controller`". an unrelated issue
(https://github.com/shadcn-ui/ui/issues/1253) that suggested using the
value prop instead of defaultValue somehow fixed this problem

web/src/templates/new-template-dialog.tsx

@@ -29,6 +29,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import type { BaseTemplate } from "./types";
 
 const NewTemplateForm = object({
 	baseTemplate: nonempty(string()),
@@ -45,12 +46,34 @@ function NewTemplateDialog() {
 					Create a new template for workspaces
 				</DialogDescription>
 			</DialogHeader>
-			<TemplateForm />
+			<TemplateFormContainer />
 		</DialogContent>
 	);
 }
 
-function TemplateForm() {
+function TemplateFormContainer() {
+	const { data: baseTemplates, isLoading, error } = useBaseTemplates();
+
+	if (isLoading) {
+		return (
+			<div className="w-full flex items-center justify-center">
+				<LoadingSpinner />
+			</div>
+		);
+	}
+
+	if (error || !baseTemplates) {
+		return (
+			<p className="opacity-80">
+				An error occurred when fetching available options.
+			</p>
+		);
+	}
+
+	return <TemplateForm baseTemplates={baseTemplates} />;
+}
+
+function TemplateForm({ baseTemplates }: { baseTemplates: BaseTemplate[] }) {
 	const router = useRouter();
 	const { createTemplate, isCreatingTemplate } = useCreateTemplate();
 	const form = useForm({
@@ -74,24 +97,6 @@ function TemplateForm() {
 		}
 	}
 
-	const { data: baseTemplates, isLoading, error } = useBaseTemplates();
-
-	if (isLoading) {
-		return (
-			<div className="w-full flex items-center justify-center">
-				<LoadingSpinner />
-			</div>
-		);
-	}
-
-	if (error || !baseTemplates) {
-		return (
-			<p className="opacity-80">
-				An error occurred when fetching available options.
-			</p>
-		);
-	}
-
 	return (
 		<Form {...form}>
 			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
@@ -101,7 +106,7 @@ function TemplateForm() {
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Base template</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
+							<Select onValueChange={field.onChange} value={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select a base template" />

web/src/templates/template-editor.tsx

@@ -34,6 +34,8 @@ import {
 	useTemplateEditorStore,
 } from "./template-editor-store";
 import type { Template } from "./types";
+import { useToast } from "@/hooks/use-toast";
+import { ToastAction } from "@/components/ui/toast";
 
 function TemplateEditor() {
 	const { templateName, _splat } = templateEditorRoute.useParams();
@@ -134,7 +136,18 @@ function Editor() {
 		error,
 	} = useTemplateFile(templateName, currentPath);
 	const saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-	const { updateTemplateFile } = useUpdateTemplateFile(templateName);
+	const { updateTemplateFile, error: updateError } =
+		useUpdateTemplateFile(templateName);
+	const { toast } = useToast();
+
+	useEffect(() => {
+		if (updateError) {
+			toast({
+				variant: "destructive",
+				title: "Failed to save template",
+			});
+		}
+	}, [updateError, toast]);
 
 	useEffect(
 		() => () => {

web/src/workspaces/new-workspace-dialog.tsx

@@ -192,7 +192,7 @@ function NewWorkspaceForm({
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Image for this workspace</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
+							<Select onValueChange={field.onChange} value={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select an image" />
@@ -217,7 +217,7 @@ function NewWorkspaceForm({
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Docker runtime</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
+							<Select onValueChange={field.onChange} value={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select a Docker runtime" />