create-aron-app 0.1.6 → 0.1.8

package/templates/apps/web/src/surfaces/todos/all_todos/all_todos_controller.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { action, observable } from "mobx";
+
+import { api } from "@/api/_generated/api";
+import type { TodoId } from "@/api/todos/types";
+import { convex } from "@/web/libs/convex_query_client";
+
+export class AllTodosController {
+  @observable
+  accessor createTodoPending = false;
+
+  @observable
+  accessor isNewTodoSheetOpen = false;
+
+  @action
+  openNewTodoSheet() {
+    this.isNewTodoSheetOpen = true;
+  }
+
+  @action
+  closeNewTodoSheet() {
+    this.isNewTodoSheetOpen = false;
+  }
+
+  @action
+  async updateTodo(args: { todoId: TodoId; isCompleted: boolean }) {
+    await convex.mutation(api.todos.crud.updateTodo, args);
+  }
+
+  @action
+  async deleteTodo(args: { todoId: TodoId }) {
+    await convex.mutation(api.todos.crud.deleteTodo, args);
+  }
+
+  @action
+  async createTodo(args: { title: string; description?: string }) {
+    this.createTodoPending = true;
+    try {
+      await convex.mutation(api.todos.crud.createTodo, args);
+    } finally {
+      this.createTodoPending = false;
+    }
+  }
+}

package/templates/apps/web/src/surfaces/todos/all_todos/bootstrap.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { ConvexHttpClient } from "convex/browser";
+
+import { api } from "@/api/_generated/api";
+import type { Todo } from "@/api/todos/types";
+
+export type AllTodosBootstrap = {
+  todos: Todo[];
+};
+
+export type AllTodosBootstrapArgs = {
+  client: ConvexHttpClient;
+};
+
+export const bootstrapAllTodos = async ({ client }: AllTodosBootstrapArgs): Promise<AllTodosBootstrap> => {
+  const todos = await client.query(api.todos.crud.listTodos, {});
+  return { todos };
+};

package/templates/apps/web/src/surfaces/todos/all_todos/header/create.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+
+export type CreateHeaderOpts = {
+  NewTodoSheet: ComponentType;
+};
+
+export const createHeader = ({ NewTodoSheet }: CreateHeaderOpts) => {
+  return observer(() => {
+    return (
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-semibold">Todos</h1>
+        <NewTodoSheet />
+      </div>
+    );
+  });
+};

package/templates/apps/web/src/surfaces/todos/all_todos/install.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { AllTodosController } from "@/web/surfaces/todos/all_todos/all_todos_controller";
+import type { AllTodosBootstrap } from "@/web/surfaces/todos/all_todos/bootstrap";
+import type { AllTodosLayoutController } from "@/web/surfaces/todos/all_todos/layout";
+
+export type InstallAllTodosOpts = {
+  layout: AllTodosLayoutController;
+  bootstrap: AllTodosBootstrap;
+};
+
+export const installAllTodos = ({ layout, bootstrap }: InstallAllTodosOpts) => {
+  const controller = new AllTodosController();
+
+  import("@/web/surfaces/todos/all_todos/main/create").then(({ createMain }) => {
+    layout.setMain(createMain({ controller, bootstrap }));
+  });
+};

package/templates/apps/web/src/surfaces/todos/all_todos/layout.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { action, observable } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class AllTodosLayoutController {
+  @observable.ref
+  accessor Main: ComponentType | undefined = undefined;
+
+  @action
+  setMain(Main: ComponentType) {
+    this.Main = Main;
+  }
+}
+
+export const createLayout = () => {
+  const layout = new AllTodosLayoutController();
+  return {
+    layout,
+    Layout: observer(() => {
+      const Main = layout.Main;
+
+      return (
+        <div className="flex w-full flex-1 flex-col">
+          {Main ? <Main /> : <Skeleton className="h-64 w-full rounded-md" />}
+        </div>
+      );
+    }),
+  };
+};

package/templates/apps/web/src/surfaces/todos/all_todos/main/create.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { convexQuery } from "@convex-dev/react-query";
+import { useQuery } from "@tanstack/react-query";
+import { observer } from "mobx-react-lite";
+
+import { api } from "@/api/_generated/api";
+import type { AllTodosController } from "@/web/surfaces/todos/all_todos/all_todos_controller";
+import type { AllTodosBootstrap } from "@/web/surfaces/todos/all_todos/bootstrap";
+import { createHeader } from "@/web/surfaces/todos/all_todos/header/create";
+import { Main } from "@/web/surfaces/todos/all_todos/main/main";
+import { createNewTodoSheet } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/create";
+
+export type CreateMainOpts = {
+  controller: AllTodosController;
+  bootstrap: AllTodosBootstrap;
+};
+
+export const createMain = ({ controller, bootstrap }: CreateMainOpts) => {
+  const NewTodoSheet = createNewTodoSheet({ controller });
+  const Header = createHeader({ NewTodoSheet });
+
+  return observer(() => {
+    const { data: todos, isPending } = useQuery({
+      ...convexQuery(api.todos.crud.listTodos, {}),
+      initialData: bootstrap.todos as never,
+    });
+
+    return (
+      <main className="flex flex-1 flex-col overflow-auto p-6">
+        <Header />
+        <Main
+          todos={todos}
+          isPending={isPending}
+          onToggle={(todoId, isCompleted) => {
+            void controller.updateTodo({ todoId, isCompleted });
+          }}
+          onDelete={(todoId) => {
+            void controller.deleteTodo({ todoId });
+          }}
+        />
+      </main>
+    );
+  });
+};

package/templates/apps/web/src/surfaces/todos/all_todos/main/main.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { Trash2 } from "lucide-react";
+import { Link } from "react-router";
+
+import type { Todo, TodoId } from "@/api/todos/types";
+import { Button } from "@/ui/base/button";
+import { Checkbox } from "@/ui/base/checkbox";
+import { Spinner } from "@/ui/base/spinner";
+
+type MainProps = {
+  todos: Todo[] | undefined;
+  isPending: boolean;
+  onToggle: (todoId: TodoId, isCompleted: boolean) => void;
+  onDelete: (todoId: TodoId) => void;
+};
+
+export const Main = ({ todos, isPending, onToggle, onDelete }: MainProps) => {
+  if (isPending) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (!todos?.length) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
+        <p>No todos yet.</p>
+        <p className="text-sm">Use New Todo above to add one.</p>
+      </div>
+    );
+  }
+
+  return (
+    <ul className="flex max-w-2xl flex-col gap-2">
+      {todos.map((todo) => (
+        <li key={todo._id} className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3">
+          <Checkbox
+            checked={todo.isCompleted}
+            onCheckedChange={(checked) => onToggle(todo._id, !!checked)}
+          />
+          <Link
+            to={`/todos/${todo._id}`}
+            className="flex-1 truncate text-sm hover:underline"
+            style={{
+              textDecoration: todo.isCompleted ? "line-through" : undefined,
+            }}
+          >
+            {todo.title}
+          </Link>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 shrink-0 text-muted-foreground hover:text-destructive"
+            type="button"
+            onClick={() => onDelete(todo._id)}
+          >
+            <Trash2 className="size-4" />
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+};

package/templates/apps/web/src/surfaces/todos/all_todos/main/new_todo_sheet/create.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { observer } from "mobx-react-lite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import type { AllTodosController } from "@/web/surfaces/todos/all_todos/all_todos_controller";
+import { NewTodoSheet } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/new_todo_sheet";
+import { type NewTodoSchema, newTodoSchema } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/schema";
+
+export type CreateNewTodoSheetOpts = {
+  controller: AllTodosController;
+};
+
+export const createNewTodoSheet = ({ controller }: CreateNewTodoSheetOpts) => {
+  return observer(() => {
+    const form = useForm<NewTodoSchema>({
+      resolver: zodResolver(newTodoSchema),
+      defaultValues: {
+        title: "",
+        description: "",
+      },
+    });
+
+    const handleSubmit = form.handleSubmit(async (values) => {
+      await controller.createTodo({
+        title: values.title.trim(),
+        description: values.description?.trim() || undefined,
+      });
+
+      form.reset();
+      controller.closeNewTodoSheet();
+    });
+
+    return (
+      <FormProvider {...form}>
+        <NewTodoSheet
+          isPending={controller.createTodoPending}
+          onSubmit={handleSubmit}
+          open={controller.isNewTodoSheetOpen}
+          onOpenChange={(open) => {
+            if (open) {
+              controller.openNewTodoSheet();
+            } else {
+              controller.closeNewTodoSheet();
+            }
+          }}
+        />
+      </FormProvider>
+    );
+  });
+};

package/templates/apps/web/src/surfaces/todos/all_todos/main/new_todo_sheet/new_todo_sheet.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { PlusIcon } from "lucide-react";
+import { useFormContext } from "react-hook-form";
+
+import { Button } from "@/ui/base/button";
+import { DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/ui/base/dialog";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/base/form";
+import { Input } from "@/ui/base/input";
+import { Sheet, SheetContent, SheetTrigger } from "@/ui/base/sheet";
+import { TextArea } from "@/ui/base/text_area";
+import type { NewTodoSchema } from "@/web/surfaces/todos/all_todos/main/new_todo_sheet/schema";
+
+type NewTodoSheetProps = {
+  isPending: boolean;
+  onSubmit: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export const NewTodoSheet = ({
+  isPending,
+  onSubmit,
+  open,
+  onOpenChange,
+}: NewTodoSheetProps) => {
+  const form = useFormContext<NewTodoSchema>();
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild>
+        <Button type="button">
+          <PlusIcon className="mr-2 size-4" />
+          New Todo
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="sm:max-w-[440px]">
+        <DialogHeader>
+          <DialogTitle>Create Todo</DialogTitle>
+          <DialogDescription>Add a new item to your todo list.</DialogDescription>
+        </DialogHeader>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            onSubmit();
+          }}
+          className="flex flex-col gap-4 pt-4"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              onSubmit();
+            }
+          }}
+        >
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input placeholder="Buy groceries..." {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <TextArea
+                    placeholder="Optional details..."
+                    className="resize-none"
+                    rows={3}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <DialogFooter>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Creating..." : "Create Todo"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+};

package/templates/apps/web/src/surfaces/todos/all_todos/main/new_todo_sheet/schema.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { z } from "zod";
+
+export type NewTodoSchema = z.infer<typeof newTodoSchema>;
+export const newTodoSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  description: z.string().optional(),
+});

package/templates/apps/web/src/surfaces/todos/single_todo/bootstrap.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { ConvexHttpClient } from "convex/browser";
+import { redirect } from "react-router";
+
+import { api } from "@/api/_generated/api";
+import type { Todo, TodoId } from "@/api/todos/types";
+
+export type SingleTodoBootstrapArgs = {
+  params: { id?: string };
+  client: ConvexHttpClient;
+};
+
+export type SingleTodoBootstrap = {
+  todoId: TodoId;
+  todo: Todo;
+};
+
+export const bootstrapSingleTodo = async ({
+  params,
+  client,
+}: SingleTodoBootstrapArgs): Promise<SingleTodoBootstrap> => {
+  if (!params.id) {
+    throw redirect("/todos");
+  }
+  const todoId = params.id as TodoId;
+  try {
+    const todo = await client.query(api.todos.crud.getTodo, { todoId });
+    return { todoId, todo };
+  } catch {
+    throw redirect("/todos");
+  }
+};

package/templates/apps/web/src/surfaces/todos/single_todo/header/create.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { observer } from "mobx-react-lite";
+import type { NavigateFunction } from "react-router";
+
+import { Header } from "@/web/surfaces/todos/single_todo/header/header";
+
+export type CreateHeaderOpts = {
+  navigate: NavigateFunction;
+};
+
+export const createHeader = ({ navigate }: CreateHeaderOpts) => {
+  return observer(() => {
+    return (
+      <Header
+        onBack={() => {
+          navigate("/todos");
+        }}
+      />
+    );
+  });
+};

package/templates/apps/web/src/surfaces/todos/single_todo/header/header.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { ArrowLeft } from "lucide-react";
+
+import { Button } from "@/ui/base/button";
+
+type HeaderProps = {
+  onBack: () => void;
+};
+
+export const Header = ({ onBack }: HeaderProps) => {
+  return (
+    <Button
+      variant="ghost"
+      className="-ml-2 w-fit text-muted-foreground"
+      type="button"
+      onClick={onBack}
+    >
+      <ArrowLeft className="mr-2 size-4" />
+      Back
+    </Button>
+  );
+};

package/templates/apps/web/src/surfaces/todos/single_todo/install.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { NavigateFunction } from "react-router";
+
+import type { SingleTodoBootstrap } from "@/web/surfaces/todos/single_todo/bootstrap";
+import type { SingleTodoLayoutController } from "@/web/surfaces/todos/single_todo/layout";
+import { SingleTodoController } from "@/web/surfaces/todos/single_todo/single_todo_controller";
+
+export type InstallSingleTodoOpts = {
+  layout: SingleTodoLayoutController;
+  bootstrap: SingleTodoBootstrap;
+  navigate: NavigateFunction;
+};
+
+export const installSingleTodo = ({ layout, bootstrap, navigate }: InstallSingleTodoOpts) => {
+  const controller = new SingleTodoController();
+
+  import("@/web/surfaces/todos/single_todo/header/create").then(({ createHeader }) => {
+    layout.setHeader(createHeader({ navigate }));
+  });
+
+  import("@/web/surfaces/todos/single_todo/main/create").then(({ createMain }) => {
+    layout.setMain(createMain({ controller, bootstrap }));
+  });
+};

package/templates/apps/web/src/surfaces/todos/single_todo/layout.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { action, observable } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class SingleTodoLayoutController {
+  @observable.ref
+  accessor Header: ComponentType | undefined = undefined;
+
+  @observable.ref
+  accessor Main: ComponentType | undefined = undefined;
+
+  @action
+  setHeader(Header: ComponentType) {
+    this.Header = Header;
+  }
+
+  @action
+  setMain(Main: ComponentType) {
+    this.Main = Main;
+  }
+}
+
+export const createLayout = () => {
+  const layout = new SingleTodoLayoutController();
+  return {
+    layout,
+    Layout: observer(() => {
+      const Header = layout.Header;
+      const Main = layout.Main;
+
+      return (
+        <div className="flex w-full flex-1 flex-col gap-4">
+          {Header ? <Header /> : <Skeleton className="h-10 w-48 rounded-md" />}
+          {Main ? <Main /> : <Skeleton className="h-64 w-full max-w-2xl rounded-md" />}
+        </div>
+      );
+    }),
+  };
+};

package/templates/apps/web/src/surfaces/todos/single_todo/main/create.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { convexQuery } from "@convex-dev/react-query";
+import { useQuery } from "@tanstack/react-query";
+import { observer } from "mobx-react-lite";
+
+import { api } from "@/api/_generated/api";
+import type { SingleTodoBootstrap } from "@/web/surfaces/todos/single_todo/bootstrap";
+import type { SingleTodoController } from "@/web/surfaces/todos/single_todo/single_todo_controller";
+import { Main } from "@/web/surfaces/todos/single_todo/main/main";
+
+export type CreateMainOpts = {
+  controller: SingleTodoController;
+  bootstrap: SingleTodoBootstrap;
+};
+
+export const createMain = ({ controller, bootstrap }: CreateMainOpts) => {
+  return observer(() => {
+    const { data: todo } = useQuery({
+      ...convexQuery(api.todos.crud.getTodo, { todoId: bootstrap.todoId }),
+      initialData: bootstrap.todo as never,
+    });
+
+    return (
+      <Main
+        todo={todo}
+        onToggle={(todoId, isCompleted) => {
+          void controller.updateTodo({ todoId, isCompleted });
+        }}
+      />
+    );
+  });
+};

package/templates/apps/web/src/surfaces/todos/single_todo/main/main.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { Todo, TodoId } from "@/api/todos/types";
+import { Badge } from "@/ui/base/badge";
+import { Checkbox } from "@/ui/base/checkbox";
+
+type MainProps = {
+  todo: Todo | undefined;
+  onToggle: (todoId: TodoId, isCompleted: boolean) => void;
+};
+
+export const Main = ({ todo, onToggle }: MainProps) => {
+  if (!todo) {
+    return null;
+  }
+
+  return (
+    <main className="flex max-w-2xl flex-1 flex-col gap-6 overflow-auto p-6">
+      <div className="flex items-start gap-3">
+        <Checkbox
+          className="mt-1"
+          checked={todo.isCompleted}
+          onCheckedChange={(checked) =>
+            onToggle(todo._id, !!checked)
+          }
+        />
+        <div className="flex flex-col gap-2">
+          <h1
+            className="text-2xl font-semibold"
+            style={{
+              textDecoration: todo.isCompleted ? "line-through" : undefined,
+            }}
+          >
+            {todo.title}
+          </h1>
+          <Badge variant={todo.isCompleted ? "secondary" : "default"}>
+            {todo.isCompleted ? "Completed" : "In progress"}
+          </Badge>
+        </div>
+      </div>
+
+      {todo.description ? <p className="text-muted-foreground">{todo.description}</p> : null}
+    </main>
+  );
+};