feat: implement base template support

web/src/templates/api.ts

@@ -1,6 +1,11 @@
 import { useCallback, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
-import type { Template, TemplateMeta, TemplateImage } from "./types";
+import type {
+	Template,
+	TemplateMeta,
+	TemplateImage,
+	BaseTemplate,
+} from "./types";
 import { fetchApi } from "@/api";
 
 function useTemplates() {
@@ -47,11 +52,16 @@ function useCreateTemplate() {
 		async ({
 			name,
 			description,
-		}: { name: string; description: string }): Promise<Template | null> => {
+			baseTemplate,
+		}: {
+			name: string;
+			description: string;
+			baseTemplate: string;
+		}): Promise<Template | null> => {
 			try {
 				const res = await fetchApi(`/templates/${name}`, {
 					method: "POST",
-					body: JSON.stringify({ description }),
+					body: JSON.stringify({ description, baseTemplate }),
 					headers: {
 						"Content-Type": "application/json",
 					},
@@ -150,6 +160,14 @@ function useTemplateImages() {
 	);
 }
 
+function useBaseTemplates() {
+	return useSWR(
+		"/base-templates",
+		(): Promise<BaseTemplate[]> =>
+			fetchApi("/base-templates").then((res) => res.json()),
+	);
+}
+
 export {
 	useTemplates,
 	useTemplate,
@@ -159,4 +177,5 @@ export {
 	buildTemplate,
 	useDeleteTemplate,
 	useTemplateImages,
+	useBaseTemplates,
 };

web/src/templates/dashboard.tsx

@@ -1,51 +1,26 @@
-import { PageHeader } from "@/components/ui/page-header.tsx";
+import { MainSidebar } from "@/components/main-sidebar.tsx";
 import { Button } from "@/components/ui/button.tsx";
-import { Info, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { PageHeader } from "@/components/ui/page-header.tsx";
 import { Page } from "@/components/ui/page.tsx";
 import { SidebarProvider } from "@/components/ui/sidebar.tsx";
-import { MainSidebar } from "@/components/main-sidebar.tsx";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
-	TableHeader,
-	TableRow,
-	TableHead,
 	TableBody,
 	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
-import {
-	Dialog,
-	DialogTrigger,
-	DialogContent,
-	DialogHeader,
-	DialogTitle,
-	DialogDescription,
-	DialogFooter,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Link, useRouter } from "@tanstack/react-router";
-import { object, pattern, string, type Infer } from "superstruct";
-import { useForm } from "react-hook-form";
-import { superstructResolver } from "@hookform/resolvers/superstruct";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { useCreateTemplate, useDeleteTemplate, useTemplates } from "./api";
-import { Skeleton } from "@/components/ui/skeleton";
-import dayjs from "dayjs";
-import { ToastAction } from "@radix-ui/react-toast";
-import { useToast } from "@/hooks/use-toast";
 import { Toaster } from "@/components/ui/toaster";
-
-const NewTemplateForm = object({
-	templateName: pattern(string(), /^[\w-]+$/),
-	templateDescription: string(),
-});
+import { useToast } from "@/hooks/use-toast";
+import { ToastAction } from "@radix-ui/react-toast";
+import { Link } from "@tanstack/react-router";
+import dayjs from "dayjs";
+import { Info, Pencil, Plus, Trash2 } from "lucide-react";
+import { useDeleteTemplate, useTemplates } from "./api";
+import { NewTemplateDialog } from "./new-template-dialog";
 
 function TemplatesDashboard() {
 	return (
@@ -172,83 +147,4 @@ function TemplateTable() {
 	);
 }
 
-function NewTemplateDialog() {
-	const router = useRouter();
-	const { createTemplate, isCreatingTemplate } = useCreateTemplate();
-
-	const form = useForm({
-		resolver: superstructResolver(NewTemplateForm),
-		disabled: isCreatingTemplate,
-		defaultValues: {
-			templateName: "",
-			templateDescription: "",
-		},
-	});
-
-	async function onSubmit(values: Infer<typeof NewTemplateForm>) {
-		const createdTemplate = await createTemplate({
-			name: values.templateName,
-			description: values.templateDescription,
-		});
-		if (createdTemplate) {
-			router.navigate({ to: `/templates/${createdTemplate.name}` });
-		}
-	}
-
-	return (
-		<DialogContent>
-			<DialogHeader>
-				<DialogTitle>New template</DialogTitle>
-				<DialogDescription>
-					Create a new template for workspaces
-				</DialogDescription>
-			</DialogHeader>
-			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-					<FormField
-						control={form.control}
-						name="templateName"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Template name</FormLabel>
-								<FormControl>
-									<Input placeholder="my-template" {...field} />
-								</FormControl>
-								<FormDescription>
-									Must only contain alphanumeric characters and "-".
-								</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<FormField
-						control={form.control}
-						name="templateDescription"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Description</FormLabel>
-								<FormControl>
-									<Input {...field} />
-								</FormControl>
-								<FormDescription>
-									Optional description for this template
-								</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<DialogFooter>
-						<Button disabled={isCreatingTemplate} type="submit">
-							{isCreatingTemplate ? <Loader2 className="animate-spin" /> : null}
-							Create
-						</Button>
-					</DialogFooter>
-				</form>
-			</Form>
-		</DialogContent>
-	);
-}
-
 export { TemplatesDashboard };

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

@@ -0,0 +1,168 @@
+import { Button } from "@/components/ui/button";
+import { DialogHeader, DialogFooter } from "@/components/ui/dialog";
+import {
+	Form,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { superstructResolver } from "@hookform/resolvers/superstruct";
+import {
+	DialogContent,
+	DialogTitle,
+	DialogDescription,
+} from "@/components/ui/dialog";
+import { useRouter } from "@tanstack/react-router";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { nonempty, object, pattern, string, type Infer } from "superstruct";
+import { useBaseTemplates, useCreateTemplate } from "./api";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+
+const NewTemplateForm = object({
+	baseTemplate: nonempty(string()),
+	templateName: pattern(string(), /^[\w-]+$/),
+	templateDescription: string(),
+});
+
+function NewTemplateDialog() {
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>New template</DialogTitle>
+				<DialogDescription>
+					Create a new template for workspaces
+				</DialogDescription>
+			</DialogHeader>
+			<TemplateForm />
+		</DialogContent>
+	);
+}
+
+function TemplateForm() {
+	const router = useRouter();
+	const { createTemplate, isCreatingTemplate } = useCreateTemplate();
+	const form = useForm({
+		resolver: superstructResolver(NewTemplateForm),
+		disabled: isCreatingTemplate,
+		defaultValues: {
+			baseTemplate: "empty",
+			templateName: "",
+			templateDescription: "",
+		},
+	});
+
+	async function onSubmit(values: Infer<typeof NewTemplateForm>) {
+		const createdTemplate = await createTemplate({
+			name: values.templateName,
+			description: values.templateDescription,
+			baseTemplate: values.baseTemplate,
+		});
+		if (createdTemplate) {
+			router.navigate({ to: `/templates/${createdTemplate.name}` });
+		}
+	}
+
+	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">
+				<FormField
+					control={form.control}
+					name="baseTemplate"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Base template</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a base template" />
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									<SelectItem value="empty">Empty</SelectItem>
+									{baseTemplates.map((template) => (
+										<SelectItem key={template.id} value={template.id}>
+											{template.name}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="templateName"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Template name</FormLabel>
+							<FormControl>
+								<Input placeholder="my-template" {...field} />
+							</FormControl>
+							<FormDescription>
+								Must only contain alphanumeric characters and "-".
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="templateDescription"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Description</FormLabel>
+							<FormControl>
+								<Input {...field} />
+							</FormControl>
+							<FormDescription>
+								Optional description for this template
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<DialogFooter>
+					<Button disabled={isCreatingTemplate} type="submit">
+						{isCreatingTemplate ? <Loader2 className="animate-spin" /> : null}
+						Create
+					</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	);
+}
+
+export { NewTemplateDialog };

web/src/templates/types.ts

@@ -19,4 +19,15 @@ interface FileInTemplate {
 	content: string;
 }
 
-export type { TemplateMeta, Template, FileInTemplate, TemplateImage };
+interface BaseTemplate {
+	name: string;
+	id: string;
+}
+
+export type {
+	TemplateMeta,
+	Template,
+	FileInTemplate,
+	TemplateImage,
+	BaseTemplate,
+};