create-aron-app 0.1.5 → 0.1.7

package/templates/apps/nextjs/src/surfaces/sidebar/nav_main/create.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { observer } from "mobx-react-lite";
+
+import { useSidebar } from "@/ui/base/side_bar";
+import { navMainItems } from "@/web/surfaces/sidebar/nav_main/nav_config";
+import { NavMain } from "@/web/surfaces/sidebar/nav_main/nav_main";
+
+export const createNavMain = () => {
+  return observer(() => {
+    const { setOpenMobile } = useSidebar();
+
+    return <NavMain items={navMainItems} onNavigate={() => setOpenMobile(false)} />;
+  });
+};

package/templates/apps/nextjs/src/surfaces/sidebar/nav_main/nav_config.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { CheckSquareIcon, HomeIcon } from "lucide-react";
+
+import type { SidebarNavItem } from "@/web/surfaces/sidebar/ui/sidebar_nav_link";
+
+export const navMainItems: SidebarNavItem[] = [
+  {
+    id: "dashboard",
+    title: "Dashboard",
+    url: "/",
+    icon: HomeIcon,
+  },
+  {
+    id: "todos",
+    title: "Todos",
+    url: "/todos",
+    icon: CheckSquareIcon,
+  },
+];

package/templates/apps/nextjs/src/surfaces/sidebar/nav_main/nav_main.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { SidebarMenu } from "@/ui/base/side_bar";
+
+import type { SidebarNavItem } from "@/web/surfaces/sidebar/ui/sidebar_nav_link";
+import { SidebarNavLink } from "@/web/surfaces/sidebar/ui/sidebar_nav_link";
+
+type NavMainProps = {
+  items: SidebarNavItem[];
+  onNavigate: () => void;
+};
+
+export const NavMain = ({ items, onNavigate }: NavMainProps) => {
+  return (
+    <SidebarMenu>
+      {items.map((item) => (
+        <SidebarNavLink key={item.id} item={item} onNavigate={onNavigate} />
+      ))}
+    </SidebarMenu>
+  );
+};

package/templates/apps/nextjs/src/surfaces/sidebar/nav_secondary/create.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { observer } from "mobx-react-lite";
+import { usePathname } from "next/navigation";
+
+import { useSidebar } from "@/ui/base/side_bar";
+
+import { NavSecondary } from "@/web/surfaces/sidebar/nav_secondary/nav_secondary";
+
+export const createNavSecondary = () => {
+  return observer(() => {
+    const pathname = usePathname();
+    const { setOpenMobile } = useSidebar();
+
+    return <NavSecondary pathname={pathname} onNavigate={() => setOpenMobile(false)} />;
+  });
+};

package/templates/apps/nextjs/src/surfaces/sidebar/nav_secondary/nav_secondary.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { SettingsIcon } from "lucide-react";
+import Link from "next/link";
+
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/ui/base/side_bar";
+
+type NavSecondaryProps = {
+  pathname: string;
+  onNavigate: () => void;
+};
+
+export const NavSecondary = ({ pathname, onNavigate }: NavSecondaryProps) => {
+  const settingsPath = "/settings";
+  const isActive = pathname === settingsPath || pathname.startsWith(`${settingsPath}/`);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton isActive={isActive} asChild onClick={onNavigate}>
+          <Link href={settingsPath}>
+            <SettingsIcon className="size-4" />
+            <span>Settings</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};

package/templates/apps/nextjs/src/surfaces/sidebar/sidebar.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useMemo, useRef } from "react";
+
+import { installSidebar } from "@/web/surfaces/sidebar/install";
+import { createSidebarLayout } from "@/web/surfaces/sidebar/layout";
+
+export const Sidebar = () => {
+  const { layout, Layout } = useMemo(createSidebarLayout, []);
+
+  const installed = useRef(false);
+
+  if (!installed.current) {
+    installed.current = true;
+    installSidebar({ layout });
+  }
+
+  return <Layout />;
+};

package/templates/{nextjs/src/ui/sidebar/nav_link.tsx → apps/nextjs/src/surfaces/sidebar/ui/sidebar_nav_link.tsx}

@@ -10,24 +10,27 @@ import { usePathname } from "next/navigation";
 
 import { SidebarMenuButton, SidebarMenuItem } from "@/ui/base/side_bar";
 
-type NavLinkProps = {
-  item: {
-    id: string;
-    title: string;
-    url: string;
-    icon: LucideIcon;
-  };
+export type SidebarNavItem = {
+  id: string;
+  title: string;
+  url: string;
+  icon: LucideIcon;
 };
 
-export const NavLink = ({ item }: NavLinkProps) => {
+type SidebarNavLinkProps = {
+  item: SidebarNavItem;
+  onNavigate: () => void;
+};
+
+export const SidebarNavLink = ({ item, onNavigate }: SidebarNavLinkProps) => {
   const pathname = usePathname();
   const isActive = pathname === item.url;
 
   return (
     <SidebarMenuItem>
-      <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
+      <SidebarMenuButton asChild isActive={isActive} tooltip={item.title} onClick={onNavigate}>
         <Link href={item.url}>
-          <item.icon />
+          <item.icon className="size-4" />
           <span>{item.title}</span>
         </Link>
       </SidebarMenuButton>

package/templates/apps/nextjs/src/surfaces/sidebar/user_menu/create.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useUser } from "@clerk/nextjs";
+import { observer } from "mobx-react-lite";
+
+import { UserMenu } from "@/web/surfaces/sidebar/user_menu/user_menu";
+
+export const createUserMenu = () => {
+  return observer(() => {
+    const { user, isLoaded } = useUser();
+
+    if (isLoaded && !user) {
+      return null;
+    }
+
+    return (
+      <UserMenu
+        isLoaded={isLoaded}
+        fullName={user?.fullName}
+        email={user?.emailAddresses[0]?.emailAddress}
+      />
+    );
+  });
+};

package/templates/apps/nextjs/src/surfaces/sidebar/user_menu/user_menu.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { UserButton } from "@clerk/nextjs";
+
+import { SidebarMenu, SidebarMenuItem } from "@/ui/base/side_bar";
+import { Skeleton } from "@/ui/base/skeleton";
+
+type UserMenuProps = {
+  isLoaded: boolean;
+  fullName: string | null | undefined;
+  email: string | null | undefined;
+};
+
+export const UserMenu = ({ isLoaded, fullName, email }: UserMenuProps) => {
+  if (!isLoaded) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem className="w-full">
+          <Skeleton className="h-12 w-full rounded-lg border" />
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem className="w-full">
+        <div className="flex w-full items-start gap-2 rounded-md border px-2 py-2 shadow-sm">
+          <UserButton />
+          <div className="flex w-fit min-w-0 flex-col gap-0 text-left leading-tight">
+            <span className="truncate text-sm font-medium break-words">{fullName}</span>
+            <span className="truncate text-xs font-light">{email}</span>
+          </div>
+        </div>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};

package/templates/apps/nextjs/src/surfaces/todos/all_todos/all_todos.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { useConvex } from "convex/react";
+import { useMemo, useRef } from "react";
+
+import type { AllTodosBootstrap } from "@/web/surfaces/todos/all_todos/bootstrap";
+import { installAllTodos } from "@/web/surfaces/todos/all_todos/install";
+import { createLayout } from "@/web/surfaces/todos/all_todos/layout";
+
+export type AllTodosProps = {
+  bootstrap: AllTodosBootstrap;
+};
+
+export const AllTodos = ({ bootstrap }: AllTodosProps) => {
+  const convex = useConvex();
+  const { layout, Layout } = useMemo(createLayout, []);
+  const installed = useRef(false);
+
+  if (!installed.current) {
+    installed.current = true;
+    installAllTodos({ layout, bootstrap, convex });
+  }
+
+  return <Layout />;
+};

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

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { ConvexReactClient } from "convex/react";
+import { action, makeObservable, observable, runInAction } from "mobx";
+
+import { api } from "@/api/_generated/api";
+import type { TodoId } from "@/api/todos/types";
+
+type AllTodosControllerOpts = {
+  convex: ConvexReactClient;
+};
+
+export class AllTodosController {
+  private readonly convex: ConvexReactClient;
+
+  public isPending = false;
+  public isNewTodoSheetOpen = false;
+
+  constructor({ convex }: AllTodosControllerOpts) {
+    this.convex = convex;
+
+    makeObservable(this, {
+      isPending: observable,
+      isNewTodoSheetOpen: observable,
+      openNewTodoSheet: action,
+      closeNewTodoSheet: action,
+      createTodo: action,
+    });
+  }
+
+  openNewTodoSheet() {
+    this.isNewTodoSheetOpen = true;
+  }
+
+  closeNewTodoSheet() {
+    this.isNewTodoSheetOpen = false;
+  }
+
+  async updateTodo(args: { todoId: TodoId; isCompleted: boolean }) {
+    await this.convex.mutation(api.todos.crud.updateTodo, args);
+  }
+
+  async deleteTodo(args: { todoId: TodoId }) {
+    await this.convex.mutation(api.todos.crud.deleteTodo, args);
+  }
+
+  async createTodo(args: { title: string; description?: string }) {
+    runInAction(() => {
+      this.isPending = true;
+    });
+    try {
+      await this.convex.mutation(api.todos.crud.createTodo, args);
+    } finally {
+      runInAction(() => {
+        this.isPending = false;
+      });
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use server";
+
+import { fetchQuery } from "convex/nextjs";
+
+import { api } from "@/api/_generated/api";
+import type { Todo } from "@/api/todos/types";
+import { getAuthToken } from "@/web/utils/auth";
+
+export type AllTodosBootstrap = {
+  todos: Todo[];
+};
+
+export const bootstrapAllTodos = async (): Promise<AllTodosBootstrap> => {
+  const token = await getAuthToken();
+  const todos = await fetchQuery(api.todos.crud.listTodos, {}, { token });
+  return { todos };
+};

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+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/nextjs/src/surfaces/todos/all_todos/install.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { ConvexReactClient } from "convex/react";
+
+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;
+  convex: ConvexReactClient;
+};
+
+export const installAllTodos = ({ layout, bootstrap, convex }: InstallAllTodosOpts) => {
+  const controller = new AllTodosController({ convex });
+
+  import("@/web/surfaces/todos/all_todos/main/create").then(({ createMain }) => {
+    layout.setMain(createMain({ controller, bootstrap }));
+  });
+};

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { makeObservable, observable, action, runInAction } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class AllTodosLayoutController {
+  Main: ComponentType | undefined = undefined;
+
+  constructor() {
+    makeObservable(this, {
+      Main: observable.ref,
+      setMain: action,
+    });
+  }
+
+  setMain(Main: ComponentType) {
+    runInAction(() => {
+      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/nextjs/src/surfaces/todos/all_todos/main/create.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+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/nextjs/src/surfaces/todos/all_todos/main/main.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+import { Trash2 } from "lucide-react";
+import Link from "next/link";
+
+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
+            href={`/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/nextjs/src/surfaces/todos/all_todos/main/new_todo_sheet/create.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+"use client";
+
+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>
+    );
+  });
+};