create-aron-app 0.1.6 → 0.1.7

package/templates/apps/react-router/src/surfaces/sidebar/layout.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { action, observable } from "mobx";
+import { observer } from "mobx-react-lite";
+import type { ComponentType } from "react";
+import { Link } from "react-router";
+
+import {
+  Sidebar as BaseSidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/ui/base/side_bar";
+import { Skeleton } from "@/ui/base/skeleton";
+
+export class SidebarLayoutController {
+  @observable.ref
+  accessor NavMain: ComponentType | undefined = undefined;
+
+  @observable.ref
+  accessor NavSecondary: ComponentType | undefined = undefined;
+
+  @observable.ref
+  accessor UserMenu: ComponentType | undefined = undefined;
+
+  @action
+  setNavMain(NavMain: ComponentType) {
+    this.NavMain = NavMain;
+  }
+
+  @action
+  setNavSecondary(NavSecondary: ComponentType) {
+    this.NavSecondary = NavSecondary;
+  }
+
+  @action
+  setUserMenu(UserMenu: ComponentType) {
+    this.UserMenu = UserMenu;
+  }
+}
+
+const BrandLink = () => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="h-auto flex-col items-start gap-0.5 p-0"
+          asChild
+        >
+          <Link
+            to="/"
+            className="flex flex-row w-full items-center gap-3 px-2 py-2 transition-opacity hover:opacity-80 active:opacity-70 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:[&>div:last-child]:hidden"
+          >
+            <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-sidebar-brand text-sm text-white font-semibold group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:text-xs">
+              A
+            </div>
+            <div className="flex min-w-0 flex-col">
+              <span className="truncate text-base font-bold text-sidebar-foreground">
+                App
+              </span>
+              <span className="truncate text-xs text-sidebar-muted-foreground">
+                Template
+              </span>
+            </div>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
+
+export const createSidebarLayout = () => {
+  const layout = new SidebarLayoutController();
+
+  return {
+    layout,
+    Layout: observer(() => {
+      const NavMain = layout.NavMain;
+      const NavSecondary = layout.NavSecondary;
+      const UserMenu = layout.UserMenu;
+
+      return (
+        <BaseSidebar
+          data-slot="app-sidebar"
+          className="shadow-sm"
+          collapsible="icon"
+        >
+          <SidebarHeader>
+            <BrandLink />
+          </SidebarHeader>
+          <SidebarContent className="flex flex-1 flex-col gap-4 overflow-hidden px-2">
+            {NavMain ? <NavMain /> : <Skeleton className="h-24 bg-sidebar-accent" />}
+          </SidebarContent>
+          <SidebarFooter className="gap-2">
+            {NavSecondary ? <NavSecondary /> : <Skeleton className="h-10 bg-sidebar-accent" />}
+            {UserMenu ? <UserMenu /> : <Skeleton className="h-12 bg-sidebar-accent" />}
+          </SidebarFooter>
+        </BaseSidebar>
+      );
+    }),
+  };
+};
+
+export type SidebarLayoutControllerType = SidebarLayoutController;

package/templates/apps/react-router/src/surfaces/sidebar/nav_main/create.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { CheckSquare, Home } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { useLocation } from "react-router";
+
+import { useSidebar } from "@/ui/base/side_bar";
+
+import { NavMain } from "@/web/surfaces/sidebar/nav_main/nav_main";
+
+const NAV_ITEMS = [
+  { to: "/", label: "Home", icon: Home, exact: true },
+  { to: "/todos", label: "Todos", icon: CheckSquare, exact: false },
+] as const;
+
+export const createNavMain = () => {
+  return observer(() => {
+    const location = useLocation();
+    const { setOpenMobile } = useSidebar();
+
+    return (
+      <NavMain
+        items={[...NAV_ITEMS]}
+        pathname={location.pathname}
+        onNavigate={() => setOpenMobile(false)}
+      />
+    );
+  });
+};

package/templates/apps/react-router/src/surfaces/sidebar/nav_main/nav_main.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import { Link } from "react-router";
+
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/ui/base/side_bar";
+
+export type NavMainItem = {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  exact: boolean;
+};
+
+type NavMainProps = {
+  items: NavMainItem[];
+  pathname: string;
+  onNavigate: () => void;
+};
+
+export const NavMain = ({ items, pathname, onNavigate }: NavMainProps) => {
+  return (
+    <SidebarMenu>
+      {items.map(({ to, label, icon: Icon, exact }) => {
+        const isActive = exact ? pathname === to : pathname.startsWith(to);
+
+        return (
+          <SidebarMenuItem key={to}>
+            <SidebarMenuButton isActive={isActive} asChild onClick={onNavigate}>
+              <Link to={to}>
+                <Icon className="size-4" />
+                <span>{label}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        );
+      })}
+    </SidebarMenu>
+  );
+};

package/templates/apps/react-router/src/surfaces/sidebar/nav_secondary/create.tsx

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

package/templates/apps/react-router/src/surfaces/sidebar/nav_secondary/nav_secondary.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { Settings } from "lucide-react";
+import { Link } from "react-router";
+
+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 to={settingsPath}>
+            <Settings className="size-4" />
+            <span>Settings</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};

package/templates/apps/react-router/src/surfaces/sidebar/sidebar.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { useEffect, useMemo } from "react";
+
+import { installSidebar } from "@/web/surfaces/sidebar/install";
+import { createSidebarLayout } from "@/web/surfaces/sidebar/layout";
+
+export const Sidebar = () => {
+  const { layout, Layout } = useMemo(() => createSidebarLayout(), []);
+
+  useEffect(() => {
+    installSidebar({ layout });
+  }, [layout]);
+
+  return <Layout />;
+};

package/templates/apps/react-router/src/surfaces/sidebar/user_menu/create.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { useUser } from "@clerk/react-router";
+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?.primaryEmailAddress?.emailAddress}
+      />
+    );
+  });
+};

package/templates/{react-router/src/layouts/sidebar/sidebar_aside → apps/react-router/src/surfaces/sidebar/user_menu}/user_menu.tsx

@@ -1,11 +1,19 @@
-import { UserButton, useUser } from "@clerk/react-router";
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { UserButton } from "@clerk/react-router";
 
 import { SidebarMenu, SidebarMenuItem } from "@/ui/base/side_bar";
 import { Skeleton } from "@/ui/base/skeleton";
 
-export const UserMenu = () => {
-  const { user, isLoaded } = useUser();
+type UserMenuProps = {
+  isLoaded: boolean;
+  fullName: string | null | undefined;
+  email: string | null | undefined;
+};
 
+export const UserMenu = ({ isLoaded, fullName, email }: UserMenuProps) => {
   if (!isLoaded) {
     return (
       <SidebarMenu>
@@ -16,18 +24,14 @@ export const UserMenu = () => {
     );
   }
 
-  if (!user) return null;
-
   return (
     <SidebarMenu>
       <SidebarMenuItem className="w-full">
         <div className="flex w-full items-center gap-2 rounded-md border px-2 py-2">
           <UserButton />
           <div className="flex min-w-0 flex-col">
-            <span className="truncate text-sm font-medium">{user.fullName}</span>
-            <span className="truncate text-xs text-muted-foreground">
-              {user.primaryEmailAddress?.emailAddress}
-            </span>
+            <span className="truncate text-sm font-medium">{fullName}</span>
+            <span className="truncate text-xs text-muted-foreground">{email}</span>
           </div>
         </div>
       </SidebarMenuItem>

package/templates/apps/react-router/src/surfaces/todos/all_todos/all_todos.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+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 { layout, Layout } = useMemo(() => createLayout(), []);
+  const installed = useRef(false);
+
+  if (!installed.current) {
+    installed.current = true;
+    installAllTodos({ layout, bootstrap });
+  }
+
+  return <Layout />;
+};

package/templates/apps/react-router/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/providers/api_auth_provider";
+
+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/react-router/src/surfaces/todos/all_todos/bootstrap.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { convexQuery } from "@convex-dev/react-query";
+
+import { api } from "@/api/_generated/api";
+import type { Todo } from "@/api/todos/types";
+import { queryClient } from "@/web/providers/api_auth_provider";
+
+export type AllTodosBootstrap = {
+  todos: Todo[];
+};
+
+export const bootstrapAllTodos = async (): Promise<AllTodosBootstrap> => {
+  const todos = await queryClient.ensureQueryData(convexQuery(api.todos.crud.listTodos, {}));
+  return { todos };
+};

package/templates/apps/react-router/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/react-router/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/react-router/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/react-router/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/react-router/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/react-router/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>
+    );
+  });
+};