create-aron-app 0.1.7 → 0.1.8

package/templates/apps/web/src/libs/convex_query_client.ts

@@ -0,0 +1,11 @@
+import { ConvexQueryClient } from "@convex-dev/react-query";
+import { ConvexReactClient } from "convex/react";
+
+const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string, {
+  expectAuth: true,
+  logger: true,
+});
+
+const convexQueryClient = new ConvexQueryClient(convex);
+
+export { convex, convexQueryClient };

package/templates/apps/web/src/libs/react_query_client.ts

@@ -0,0 +1,17 @@
+import { QueryClient } from "@tanstack/react-query";
+
+import { convexQueryClient } from "@/web/libs/convex_query_client";
+
+const reactQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: convexQueryClient.queryFn(),
+      gcTime: 0,
+      staleTime: 0,
+    },
+  },
+});
+
+convexQueryClient.connect(reactQueryClient);
+
+export { reactQueryClient };

package/templates/apps/web/src/libs/server/auth.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { getAuth } from "@clerk/react-router/server";
+import { ConvexHttpClient } from "convex/browser";
+import type { LoaderFunctionArgs } from "react-router";
+import { redirect } from "react-router";
+
+const CONVEX_URL = process.env.VITE_CONVEX_URL;
+
+if (!CONVEX_URL) {
+  throw new Error("VITE_CONVEX_URL is not set");
+}
+
+export const createConvexClient = async (args: LoaderFunctionArgs): Promise<ConvexHttpClient> => {
+  try {
+    const auth = await getAuth(args);
+    if (!auth.isAuthenticated) {
+      throw redirect(`/sign-in?redirect_url=${encodeURIComponent(args.request.url)}`);
+    }
+    const token = await auth.getToken({ template: "convex" });
+    const client = new ConvexHttpClient(CONVEX_URL);
+    if (token) {
+      client.setAuth(token);
+    }
+    return client;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

package/templates/apps/web/src/libs/server/protected.ts

@@ -0,0 +1,17 @@
+import { getAuth } from "@clerk/react-router/server";
+import { type MiddlewareFunction, redirect } from "react-router";
+
+const PUBLIC_ROUTES = ["/sign-in"];
+
+export const protectedRoute: MiddlewareFunction<Response> = async ({ request, context }, next) => {
+  const { pathname } = new URL(request.url);
+  const isPublic = PUBLIC_ROUTES.some((route) => pathname.startsWith(route));
+
+  if (!isPublic) {
+    const auth = await getAuth({ request, context } as Parameters<typeof getAuth>[0]);
+    if (!auth.isAuthenticated) {
+      throw redirect(`/sign-in?redirect_url=${encodeURIComponent(request.url)}`);
+    }
+  }
+  return next();
+};

package/templates/apps/web/src/providers/api_auth_provider.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { ClerkProvider, useAuth } from "@clerk/react-router";
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { Route } from "apps/web/.react-router/types/src/+types/root";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+
+import { convex } from "@/web/libs/convex_query_client";
+import { reactQueryClient } from "@/web/libs/react_query_client";
+
+type ApiAuthProviderProps = {
+  children: React.ReactNode;
+  loaderData: Route.ComponentProps["loaderData"];
+};
+
+export const ApiAuthProvider = ({ children, loaderData }: ApiAuthProviderProps) => {
+  return (
+    <ClerkProvider signInUrl="/sign-in" loaderData={loaderData}>
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        <QueryClientProvider client={reactQueryClient}>{children}</QueryClientProvider>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+};

package/templates/apps/web/src/providers/global_provider.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { ReactNode } from "react";
+import { createContext, useContext } from "react";
+
+export type GlobalContextValue = Record<string, never>;
+
+const GlobalContext = createContext<GlobalContextValue | undefined>(undefined);
+
+type GlobalProviderProps = {
+  children: ReactNode;
+};
+
+export const GlobalProvider = ({ children }: GlobalProviderProps) => {
+  return <GlobalContext.Provider value={{}}>{children}</GlobalContext.Provider>;
+};
+
+export const useGlobal = (): GlobalContextValue => {
+  const context = useContext(GlobalContext);
+
+  if (context === undefined) {
+    throw new Error("useGlobal must be used within a GlobalProvider");
+  }
+
+  return context;
+};

package/templates/apps/web/src/providers/navigation_loading_bar_provider.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useRef } from "react";
+import { useNavigation } from "react-router";
+import { LoadingBarContainer, useLoadingBar } from "react-top-loading-bar";
+
+export type NavigationLoadingBarApi = {
+  start: () => void;
+  complete: () => void;
+};
+
+const NavigationLoadingBarContext = createContext<NavigationLoadingBarApi | null>(null);
+
+type NavigationLoadingBarProviderProps = {
+  children: ReactNode;
+};
+
+const NavigationLoadingBarInner = ({ children }: NavigationLoadingBarProviderProps) => {
+  const navigation = useNavigation();
+
+  const { start, complete } = useLoadingBar({
+    color: "hsl(var(--primary))",
+    height: 2,
+    shadow: true,
+  });
+
+  const api = useMemo((): NavigationLoadingBarApi => {
+    return { start, complete };
+  }, [start, complete]);
+
+  const skippedInitialIdle = useRef(false);
+
+  useEffect(() => {
+    if (navigation.state !== "idle") {
+      start();
+      return;
+    }
+
+    if (!skippedInitialIdle.current) {
+      skippedInitialIdle.current = true;
+      return;
+    }
+
+    complete();
+  }, [navigation.state, start, complete]);
+
+  return (
+    <NavigationLoadingBarContext.Provider value={api}>
+      {children}
+    </NavigationLoadingBarContext.Provider>
+  );
+};
+
+export const NavigationLoadingBarProvider = ({ children }: NavigationLoadingBarProviderProps) => {
+  return (
+    <LoadingBarContainer>
+      <NavigationLoadingBarInner>{children}</NavigationLoadingBarInner>
+    </LoadingBarContainer>
+  );
+};
+
+export const useNavigationLoadingBar = (): NavigationLoadingBarApi => {
+  const ctx = useContext(NavigationLoadingBarContext);
+
+  if (!ctx) {
+    throw new Error("useNavigationLoadingBar must be used within NavigationLoadingBarProvider");
+  }
+
+  return ctx;
+};

package/templates/apps/web/src/root.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import "./app.css";
+
+import { clerkMiddleware, rootAuthLoader } from "@clerk/react-router/server";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import { Toaster } from "sonner";
+
+import { protectedRoute } from "@/web/libs/server/protected";
+import { ApiAuthProvider } from "@/web/providers/api_auth_provider";
+import { GlobalProvider } from "@/web/providers/global_provider";
+import { NavigationLoadingBarProvider } from "@/web/providers/navigation_loading_bar_provider";
+
+import type { Route } from "./+types/root";
+
+export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware(), protectedRoute];
+export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args);
+
+export const links: Route.LinksFunction = () => {
+  return [
+    {
+      rel: "preconnect",
+      href: "https://fonts.googleapis.com",
+    },
+    {
+      rel: "preconnect",
+      href: "https://fonts.gstatic.com",
+      crossOrigin: "anonymous",
+    },
+    {
+      rel: "stylesheet",
+      href: "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap",
+    },
+  ];
+};
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App({ loaderData }: Route.ComponentProps) {
+  return (
+    <NavigationLoadingBarProvider>
+      <ApiAuthProvider loaderData={loaderData}>
+        <GlobalProvider>
+          <Outlet />
+          <Toaster richColors position="top-center" />
+        </GlobalProvider>
+      </ApiAuthProvider>
+    </NavigationLoadingBarProvider>
+  );
+}

package/templates/apps/web/src/routes/(dashboard)/(todos)/[id].tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { createConvexClient } from "@/web/libs/server/auth";
+import { bootstrapSingleTodo } from "@/web/surfaces/todos/single_todo/bootstrap";
+import { SingleTodo } from "@/web/surfaces/todos/single_todo/single_todo";
+
+import type { Route } from "./+types/[id]";
+
+export async function loader(args: Route.LoaderArgs) {
+  const client = await createConvexClient(args);
+  return bootstrapSingleTodo({ params: args.params, client });
+}
+
+export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
+  return serverLoader();
+}
+
+export function meta({ loaderData: bootstrap }: Route.MetaArgs) {
+  if (!bootstrap) {
+    return [{ title: "Todo" }];
+  }
+
+  return [
+    { title: `${bootstrap.todo.title} - Todos` },
+    { name: "description", content: bootstrap.todo.description ?? "Todo details" },
+  ];
+}
+
+export default function TodoPage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <SingleTodo bootstrap={bootstrap} />;
+}

package/templates/apps/web/src/routes/(dashboard)/(todos)/index.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { createConvexClient } from "@/web/libs/server/auth";
+import { AllTodos } from "@/web/surfaces/todos/all_todos/all_todos";
+import { bootstrapAllTodos } from "@/web/surfaces/todos/all_todos/bootstrap";
+
+import type { Route } from "./+types/index";
+
+export async function loader(args: Route.LoaderArgs) {
+  const client = await createConvexClient(args);
+  return bootstrapAllTodos({ client });
+}
+
+export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
+  return serverLoader();
+}
+
+export function meta(_args: Route.MetaArgs) {
+  return [{ title: "Todos" }, { name: "description", content: "Manage your todos" }];
+}
+
+export default function TodosPage({ loaderData: bootstrap }: Route.ComponentProps) {
+  return <AllTodos bootstrap={bootstrap} />;
+}

package/templates/apps/web/src/routes/(dashboard)/(todos)/layout.tsx

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import { Outlet } from "react-router";
+
+export default function TodosLayout() {
+  return <Outlet />;
+}

package/templates/apps/{react-router → web}/src/routes/(dashboard)/index.tsx

@@ -2,9 +2,10 @@
  * Copyright (c) Aron Weston 2026.
  */
 
+import { bootstrapHome } from "@/web/surfaces/home/bootstrap";
+import { Home } from "@/web/surfaces/home/home";
+
 import type { Route } from "./+types/index";
-import { Home } from "../../surfaces/home/home";
-import { bootstrapHome } from "../../surfaces/home/bootstrap";
 
 export async function clientLoader(_args: Route.ClientLoaderArgs) {
   return bootstrapHome();

package/templates/apps/web/src/routes/(dashboard)/layout.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Aron Weston 2026.
+ */
+
+import type { CSSProperties } from "react";
+import { Outlet } from "react-router";
+
+import { SidebarInset, SidebarProvider } from "@/ui/base/side_bar";
+import { Sidebar } from "@/web/surfaces/sidebar/sidebar";
+
+export default function DashboardLayout() {
+  return (
+    <SidebarProvider style={{ "--sidebar-width": "265px" } as CSSProperties} defaultOpen={true}>
+      <Sidebar />
+      <SidebarInset className="bg-white">
+        <Outlet />
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/templates/apps/{react-router → web}/src/routes.ts

@@ -5,8 +5,10 @@ export default [
   layout("./routes/(dashboard)/layout.tsx", [
     index("./routes/(dashboard)/index.tsx"),
     ...prefix("todos", [
-      index("./routes/(dashboard)/todos/index.tsx"),
-      route(":id", "./routes/(dashboard)/todos/[id].tsx"),
+      layout("./routes/(dashboard)/(todos)/layout.tsx", [
+        index("./routes/(dashboard)/(todos)/index.tsx"),
+        route(":id", "./routes/(dashboard)/(todos)/[id].tsx"),
+      ]),
     ]),
   ]),
 ] satisfies RouteConfig;

package/templates/apps/{nextjs → web}/src/surfaces/sidebar/install.tsx

@@ -10,11 +10,7 @@ type InstallSidebarOpts = {
 
 export const installSidebar = ({ layout }: InstallSidebarOpts) => {
   import("@/web/surfaces/sidebar/nav_main/create").then(({ createNavMain }) => {
-    layout.setNavMain(createNavMain());
-  });
-
-  import("@/web/surfaces/sidebar/nav_secondary/create").then(({ createNavSecondary }) => {
-    layout.setNavSecondary(createNavSecondary());
+    layout.setNavLinks(createNavMain());
   });
 
   import("@/web/surfaces/sidebar/user_menu/create").then(({ createUserMenu }) => {

package/templates/apps/{react-router → web}/src/surfaces/sidebar/layout.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) Aron Weston 2026.
  */
 
+import { Plus } from "lucide-react";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react-lite";
 import type { ComponentType } from "react";
@@ -20,22 +21,14 @@ import { Skeleton } from "@/ui/base/skeleton";
 
 export class SidebarLayoutController {
   @observable.ref
-  accessor NavMain: ComponentType | undefined = undefined;
-
-  @observable.ref
-  accessor NavSecondary: ComponentType | undefined = undefined;
+  accessor NavLinks: ComponentType | undefined = undefined;
 
   @observable.ref
   accessor UserMenu: ComponentType | undefined = undefined;
 
   @action
-  setNavMain(NavMain: ComponentType) {
-    this.NavMain = NavMain;
-  }
-
-  @action
-  setNavSecondary(NavSecondary: ComponentType) {
-    this.NavSecondary = NavSecondary;
+  setNavLinks(NavLinks: ComponentType) {
+    this.NavLinks = NavLinks;
   }
 
   @action
@@ -81,8 +74,7 @@ export const createSidebarLayout = () => {
   return {
     layout,
     Layout: observer(() => {
-      const NavMain = layout.NavMain;
-      const NavSecondary = layout.NavSecondary;
+      const NavLinks = layout.NavLinks;
       const UserMenu = layout.UserMenu;
 
       return (
@@ -95,10 +87,27 @@ export const createSidebarLayout = () => {
             <BrandLink />
           </SidebarHeader>
           <SidebarContent className="flex flex-1 flex-col gap-4 overflow-hidden px-2">
-            {NavMain ? <NavMain /> : <Skeleton className="h-24 bg-sidebar-accent" />}
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  size="sm"
+                  tooltip="Create a new todo"
+                  className="bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90 active:bg-sidebar-primary/80 justify-center font-semibold shadow-sm"
+                  asChild
+                >
+                  <Link
+                    to="/todos"
+                    className="flex items-center gap-2"
+                  >
+                    <Plus className="size-4" />
+                    <span>New Todo</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
           </SidebarContent>
           <SidebarFooter className="gap-2">
-            {NavSecondary ? <NavSecondary /> : <Skeleton className="h-10 bg-sidebar-accent" />}
+            {NavLinks ? <NavLinks /> : <Skeleton className="h-10 bg-sidebar-accent" />}
             {UserMenu ? <UserMenu /> : <Skeleton className="h-12 bg-sidebar-accent" />}
           </SidebarFooter>
         </BaseSidebar>

package/templates/apps/{react-router → web}/src/surfaces/todos/all_todos/all_todos.tsx

@@ -13,7 +13,7 @@ export type AllTodosProps = {
 };
 
 export const AllTodos = ({ bootstrap }: AllTodosProps) => {
-  const { layout, Layout } = useMemo(() => createLayout(), []);
+  const { layout, Layout } = useMemo(createLayout, []);
   const installed = useRef(false);
 
   if (!installed.current) {

package/templates/apps/{react-router → web}/src/surfaces/todos/all_todos/all_todos_controller.ts

@@ -6,7 +6,7 @@ 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";
+import { convex } from "@/web/libs/convex_query_client";
 
 export class AllTodosController {
   @observable

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/{react-router → web}/src/surfaces/todos/single_todo/bootstrap.ts

@@ -2,15 +2,15 @@
  * Copyright (c) Aron Weston 2026.
  */
 
-import { convexQuery } from "@convex-dev/react-query";
+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";
-import { queryClient } from "@/web/providers/api_auth_provider";
 
 export type SingleTodoBootstrapArgs = {
   params: { id?: string };
+  client: ConvexHttpClient;
 };
 
 export type SingleTodoBootstrap = {
@@ -20,15 +20,14 @@ export type SingleTodoBootstrap = {
 
 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 queryClient.ensureQueryData(
-      convexQuery(api.todos.crud.getTodo, { todoId }),
-    );
+    const todo = await client.query(api.todos.crud.getTodo, { todoId });
     return { todoId, todo };
   } catch {
     throw redirect("/todos");

package/templates/apps/{nextjs → web}/src/surfaces/todos/single_todo/header/create.tsx

@@ -2,23 +2,21 @@
  * Copyright (c) Aron Weston 2026.
  */
 
-"use client";
-
 import { observer } from "mobx-react-lite";
-import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import type { NavigateFunction } from "react-router";
 
 import { Header } from "@/web/surfaces/todos/single_todo/header/header";
 
 export type CreateHeaderOpts = {
-  router: AppRouterInstance;
+  navigate: NavigateFunction;
 };
 
-export const createHeader = ({ router }: CreateHeaderOpts) => {
+export const createHeader = ({ navigate }: CreateHeaderOpts) => {
   return observer(() => {
     return (
       <Header
         onBack={() => {
-          router.push("/todos");
+          navigate("/todos");
         }}
       />
     );

package/templates/apps/{react-router → web}/src/surfaces/todos/single_todo/single_todo_controller.ts

@@ -6,7 +6,7 @@ import { action } from "mobx";
 
 import { api } from "@/api/_generated/api";
 import type { TodoId } from "@/api/todos/types";
-import { convex } from "@/web/providers/api_auth_provider";
+import { convex } from "@/web/libs/convex_query_client";
 
 export class SingleTodoController {
   @action

package/templates/biome.json

@@ -56,6 +56,11 @@
       "!**/*/tmp",
       "!convex/_generated/**/*",
       "!convex/_generated/**/*.d.ts",
+      "!**/next.config.js",
+      "!**/next.config.mjs",
+      "!**/next.config.cjs",
+      "!**/next.config.ts",
+      "!**/next.config.mts",
       "!package.json"
     ]
   },