chore: organize imports

web/src/components/codemirror-editor.tsx

@@ -1,5 +1,5 @@
+import { useUiMode } from "@/hooks/use-ui-mode";
 import { markdown } from "@codemirror/lang-markdown";
-import { oneDark } from "@codemirror/theme-one-dark";
 import { StreamLanguage } from "@codemirror/language";
 import { dockerFile } from "@codemirror/legacy-modes/mode/dockerfile";
 import {
@@ -8,10 +8,10 @@ import {
 	type Extension,
 	type StateEffect,
 } from "@codemirror/state";
+import { oneDark } from "@codemirror/theme-one-dark";
 import { vim } from "@replit/codemirror-vim";
 import { EditorView, basicSetup } from "codemirror";
 import { useEffect, useRef } from "react";
-import { useUiMode } from "@/hooks/use-ui-mode";
 
 type CodeMirrorEditorSupportedLanguage = "markdown" | "dockerfile";
 

web/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import {type ClassValue, clsx} from "clsx"
+import { type ClassValue, clsx } from "clsx";
-import {twMerge} from "tailwind-merge"
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }

web/src/main.tsx

@@ -1,13 +1,20 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { rootRoute } from "@/root-route.tsx";
 import { workspacesRoutes } from "@/workspaces/routes.ts";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import "./index.css";
-import {templateEditorRoute, templatesDashboardRoute} from "@/templates/routes.tsx";
+import {
+	templateEditorRoute,
+	templatesDashboardRoute,
+} from "@/templates/routes.tsx";
 
 const router = createRouter({
-	routeTree: rootRoute.addChildren([workspacesRoutes, templatesDashboardRoute, templateEditorRoute]),
+	routeTree: rootRoute.addChildren([
+		workspacesRoutes,
+		templatesDashboardRoute,
+		templateEditorRoute,
+	]),
 });
 
 createRoot(document.getElementById("root")!).render(

web/src/templates/api.ts

@@ -1,13 +1,13 @@
+import { type ApiError, fetchApi } from "@/api";
+import { promiseOrThrow } from "@/lib/errors";
 import { useCallback, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
 import type {
-	Template,
-	TemplateMeta,
-	TemplateImage,
 	BaseTemplate,
+	Template,
+	TemplateImage,
+	TemplateMeta,
 } from "./types";
-import { ApiError, fetchApi } from "@/api";
-import { promiseOrThrow } from "@/lib/errors";
 
 function useTemplates() {
 	return useSWR(

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

@@ -1,28 +1,28 @@
-import { useCallback, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
-	DialogHeader,
-	DialogFooter,
-	DialogContent,
-	DialogTitle,
-	DialogDescription,
 	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
 } from "@/components/ui/dialog";
 import {
 	Form,
+	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
-	FormControl,
-	FormDescription,
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { superstructResolver } from "@hookform/resolvers/superstruct";
-import { useFieldArray, useForm } from "react-hook-form";
-import { array, object, pattern, string, type Infer } from "superstruct";
-import { useTemplateEditorStore } from "./template-editor-store";
 import { Check, Pencil, Plus, Trash2, X } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { type Infer, array, object, pattern, string } from "superstruct";
+import { useTemplateEditorStore } from "./template-editor-store";
 
 interface BuildArg {
 	argName: string;

web/src/templates/dashboard.tsx

@@ -19,9 +19,9 @@ import { ToastAction } from "@radix-ui/react-toast";
 import { Link } from "@tanstack/react-router";
 import dayjs from "dayjs";
 import { Pencil, Plus, Trash2 } from "lucide-react";
+import React from "react";
 import { useDeleteTemplate, useTemplates } from "./api";
 import { NewTemplateDialog } from "./new-template-dialog";
-import React from "react";
 
 function TemplatesDashboard() {
 	return (

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

@@ -1,26 +1,21 @@
 import { Button } from "@/components/ui/button";
-import { DialogHeader, DialogFooter } from "@/components/ui/dialog";
+import { DialogFooter, DialogHeader } from "@/components/ui/dialog";
+import {
+	DialogContent,
+	DialogDescription,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import {
 	Form,
+	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
-	FormControl,
-	FormDescription,
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { superstructResolver } from "@hookform/resolvers/superstruct";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
-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,
@@ -28,10 +23,15 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
-import type { BaseTemplate } from "./types";
-import { useEffect } from "react";
 import { useToast } from "@/hooks/use-toast";
+import { superstructResolver } from "@hookform/resolvers/superstruct";
+import { useRouter } from "@tanstack/react-router";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { type Infer, nonempty, object, pattern, string } from "superstruct";
+import { useBaseTemplates, useCreateTemplate } from "./api";
+import type { BaseTemplate } from "./types";
 
 const NewTemplateForm = object({
 	baseTemplate: nonempty(string()),

web/src/templates/routes.tsx

@@ -1,7 +1,7 @@
-import { createRoute } from "@tanstack/react-router";
 import { rootRoute } from "@/root-route.tsx";
 import { TemplatesDashboard } from "@/templates/dashboard.tsx";
 import { TemplateEditor } from "@/templates/template-editor.tsx";
+import { createRoute } from "@tanstack/react-router";
 
 const templatesDashboardRoute = createRoute({
 	getParentRoute: () => rootRoute,

web/src/templates/template-editor-store.tsx

@@ -1,8 +1,8 @@
-import { createStore, useStore } from "zustand";
+import { type ApiErrorDetails, isApiErrorResponse } from "@/api";
-import type { Template } from "./types";
 import { createContext, useContext } from "react";
+import { createStore, useStore } from "zustand";
 import { buildTemplate } from "./api";
-import { isApiErrorResponse, type ApiErrorResponse } from "@/api";
+import type { Template } from "./types";
 
 interface TemplateEditorState {
 	template: Template;
@@ -11,7 +11,7 @@ interface TemplateEditorState {
 	isBuildOutputVisible: boolean;
 	isVimModeEnabled: boolean;
 	buildOutput: string;
-	buildError: ApiErrorResponse | null;
+	buildError: ApiErrorDetails | null;
 
 	startBuild: ({
 		imageTag,

web/src/templates/template-editor-top-bar.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@/components/ui/button";
-import { Loader2, Hammer } from "lucide-react";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Hammer, Loader2 } from "lucide-react";
 import { useEffect, useId } from "react";
 import { BuildTemplateDialog } from "./build-template-dialog";
 import { useTemplateEditorStore } from "./template-editor-store";
-import { Dialog, DialogTrigger } from "@/components/ui/dialog";
-import { Switch } from "@/components/ui/switch";
-import { Label } from "@/components/ui/label";
 
 function TemplateEditorTopBar() {
 	const currentFilePath = useTemplateEditorStore(

web/src/workspaces/api.ts

@@ -1,13 +1,13 @@
 import { fetchApi } from "@/api";
+import type { QueryStatus } from "@/lib/query";
+import { useCallback, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
 import {
-	WorkspaceStatus,
 	type Workspace,
 	type WorkspacePortMapping,
 	type WorkspaceRuntime,
+	WorkspaceStatus,
 } from "./types";
-import { useCallback, useState } from "react";
-import type { QueryStatus } from "@/lib/query";
 
 interface CreateWorkspaceConfig {
 	workspaceName: string;

web/src/workspaces/dashboard.tsx

@@ -7,8 +7,8 @@ import { SidebarProvider } from "@/components/ui/sidebar.tsx";
 import { Toaster } from "@/components/ui/toaster";
 import { Plus } from "lucide-react";
 import { useCallback, useState } from "react";
-import { WorkspaceTable } from "./workspace-table";
 import { NewWorkspaceDialog } from "./new-workspace-dialog";
+import { WorkspaceTable } from "./workspace-table";
 
 function WorkspaceDashboard() {
 	return (

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

@@ -1,36 +1,36 @@
-import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { API_ERROR_WORKSPACE_EXISTS, isApiErrorResponse } from "@/api";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { DialogFooter, DialogHeader } from "@/components/ui/dialog";
+import { DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
 	Form,
+	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
-	FormControl,
-	FormDescription,
 	FormMessage,
 } from "@/components/ui/form";
-import {
-	Select,
-	SelectTrigger,
-	SelectValue,
-	SelectContent,
-	SelectItem,
-} from "@/components/ui/select";
-import { ToastAction } from "@/components/ui/toast";
-import { DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { ToastAction } from "@/components/ui/toast";
 import { useToast } from "@/hooks/use-toast";
 import { useTemplateImages } from "@/templates/api";
-import { superstructResolver } from "@hookform/resolvers/superstruct";
-import { useRef, useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { nonempty, object, pattern, string, type Infer } from "superstruct";
-import { useCreateWorkspace, useWorkspaceRuntimes } from "./api";
 import type { TemplateImage } from "@/templates/types";
+import { superstructResolver } from "@hookform/resolvers/superstruct";
+import { useEffect, useRef } from "react";
+import { useForm } from "react-hook-form";
+import { type Infer, nonempty, object, pattern, string } from "superstruct";
+import { useCreateWorkspace, useWorkspaceRuntimes } from "./api";
 import type { WorkspaceRuntime } from "./types";
-import { API_ERROR_WORKSPACE_EXISTS, isApiErrorResponse } from "@/api";
 
 interface NewWorkspaceDialogProps {
 	onCreateSuccess: () => void;

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

@@ -4,10 +4,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
-import { useContext } from "react";
-import { WorkspaceTableRowContext } from "./workspace-table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useContext } from "react";
 import { PortInfoTab } from "./workspace-port-info-tab";
+import { WorkspaceTableRowContext } from "./workspace-table";
 
 function WorkspaceInfoDialog() {
 	const workspace = useContext(WorkspaceTableRowContext);

web/src/workspaces/workspace-port-info-tab.tsx

@@ -1,23 +1,23 @@
 import { Button } from "@/components/ui/button";
-import { FormField, FormItem, FormControl, Form } from "@/components/ui/form";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
-	TableHeader,
+	Table,
-	TableRow,
-	TableHead,
 	TableBody,
 	TableCell,
-	Table,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import { superstructResolver } from "@hookform/resolvers/superstruct";
 import { Check, Trash2, X } from "lucide-react";
 import { useContext, useId } from "react";
 import { useForm } from "react-hook-form";
-import { object, pattern, string, size, number, type Infer } from "superstruct";
+import { type Infer, number, object, pattern, size, string } from "superstruct";
-import { WorkspaceTableRowContext } from "./workspace-table";
 import { create } from "zustand";
 import { useAddWorkspacePort } from "./api";
-import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { WorkspaceTableRowContext } from "./workspace-table";
 
 interface PortInfoTabStore {
 	isAddingPort: boolean;