@flaredev/cli 0.1.2 → 0.3.0

package/templates/app/components/auth/ui.tsx

@@ -0,0 +1,96 @@
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+/*
+ * The auth screens' controls. They read the theme tokens (--brand, --button-radius,
+ * --radius, --font-theme), so the same markup takes each theme's shape and colour.
+ */
+
+export const AuthInput = forwardRef<HTMLInputElement, React.ComponentProps<"input">>(function AuthInput({ className, ...props }, ref) {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        "h-11 w-full rounded-[calc(var(--radius)-2px)] border border-border bg-surface px-3.5 text-[15px] text-foreground outline-none transition-[border-color,box-shadow]",
+        "placeholder:text-foreground-muted/80 focus-visible:border-brand focus-visible:ring-[3px] focus-visible:ring-brand/20",
+        "aria-invalid:border-danger aria-invalid:ring-danger/15 disabled:opacity-60",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export function AuthLabel({ className, ...props }: React.ComponentProps<"label">) {
+  return <label className={cn("text-sm font-medium text-foreground", className)} {...props} />;
+}
+
+export function PrimaryButton({ className, pending, children, ...props }: React.ComponentProps<"button"> & { pending?: boolean }) {
+  return (
+    <button
+      className={cn(
+        "relative inline-flex h-11 w-full items-center justify-center gap-2 rounded-[var(--button-radius)] bg-brand px-4 text-[15px] font-medium text-brand-foreground",
+        "[background-image:var(--brand-gradient,none)] transition-[filter,opacity] hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-60",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+        className,
+      )}
+      disabled={pending || props.disabled}
+      {...props}
+    >
+      {pending && <span className="size-4 animate-spin rounded-full border-2 border-current border-r-transparent" aria-hidden="true" />}
+      {children}
+    </button>
+  );
+}
+
+export function SecondaryButton({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={cn(
+        "inline-flex h-11 w-full items-center justify-center gap-2.5 rounded-[var(--button-radius)] border border-border bg-surface px-4 text-[15px] font-medium text-foreground",
+        "transition-colors hover:bg-surface-muted disabled:cursor-not-allowed disabled:opacity-60",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand",
+        className,
+      )}
+      type="button"
+      {...props}
+    />
+  );
+}
+
+export function TextButton({ className, ...props }: React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      className={cn("text-sm font-medium text-link underline-offset-4 hover:underline focus-visible:underline focus-visible:outline-none disabled:opacity-60", className)}
+      {...props}
+    />
+  );
+}
+
+export function Divider({ children = "or" }: { children?: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3 text-xs text-foreground-muted uppercase" role="separator">
+      <span className="h-px flex-1 bg-border" />
+      {children}
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+export function FormMessage({ tone = "error", children }: { tone?: "error" | "info" | "success"; children: React.ReactNode }) {
+  if (!children) return null;
+  return (
+    <p
+      role={tone === "error" ? "alert" : "status"}
+      className={cn(
+        "rounded-[calc(var(--radius)-2px)] px-3 py-2.5 text-sm",
+        tone === "error" && "bg-danger/10 text-danger",
+        tone === "info" && "bg-surface-muted text-foreground",
+        tone === "success" && "bg-success/10 text-success",
+      )}
+    >
+      {children}
+    </p>
+  );
+}

package/templates/app/components/auth/use-resend.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * "Send a new code", with a countdown so it can't be hammered.
+ *
+ * Asking again doesn't invalidate the code already sitting in the inbox — people press
+ * resend, then find the first email. The server keeps both valid until they expire.
+ */
+export function useResend(send: () => Promise<unknown>, seconds = 30) {
+  const [remaining, setRemaining] = useState(0);
+  const [sending, setSending] = useState(false);
+  const timer = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  useEffect(() => () => clearInterval(timer.current), []);
+
+  const resend = useCallback(async () => {
+    if (remaining > 0 || sending) return;
+    setSending(true);
+    try {
+      await send();
+    } finally {
+      setSending(false);
+    }
+    setRemaining(seconds);
+    clearInterval(timer.current);
+    timer.current = setInterval(() => {
+      setRemaining((value) => {
+        if (value <= 1) clearInterval(timer.current);
+        return Math.max(0, value - 1);
+      });
+    }, 1000);
+  }, [remaining, sending, send, seconds]);
+
+  return {
+    resend,
+    sending,
+    remaining,
+    /** "Send a new code" → "Send a new code in 24s" */
+    label: remaining > 0 ? `Send a new code in ${remaining}s` : "Send a new code",
+    disabled: remaining > 0 || sending,
+  };
+}

package/templates/app/components/auth/verify-email-form.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle2Icon, MailIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import { OtpInput } from "./otp-input";
+import { authErrorMessage } from "./sign-in-flow";
+import { useResend } from "./use-resend";
+import { AuthInput, AuthLabel, Divider, FormMessage, PrimaryButton, SecondaryButton, TextButton } from "./ui";
+
+interface Props {
+  /** The address to verify; empty when they arrived without one. */
+  initialEmail: string;
+  /** Whether emailed codes are switched on, as well as the link. */
+  codes: boolean;
+  next: string;
+}
+
+/**
+ * Verify an email address, by the code in the message or by the link in it.
+ *
+ * People land here from the "check your email" step, from the account page, or by
+ * opening a link whose token has expired — so the page has to work without one.
+ */
+export function VerifyEmailForm({ initialEmail, codes, next }: Props) {
+  const [email, setEmail] = useState(initialEmail);
+  const [code, setCode] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const send = async () => {
+    setError(null);
+    if (!email) return setError("Enter the email address you signed up with.");
+    const { error } = codes
+      ? await authClient.emailOtp.sendVerificationOtp({ email, type: "email-verification" })
+      : await authClient.sendVerificationEmail({ email, callbackURL: next });
+    if (error) return setError(authErrorMessage(error));
+    setSent(true);
+  };
+
+  const resend = useResend(send);
+
+  const verify = async (value = code) => {
+    if (value.length !== 6) return;
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.emailOtp.verifyEmail({ email, otp: value });
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    setDone(true);
+    window.location.href = next;
+  };
+
+  if (done) {
+    return (
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="grid size-12 place-items-center rounded-full bg-success/15 text-success">
+          <CheckCircle2Icon className="size-6" />
+        </span>
+        <p className="text-base font-medium">Email verified</p>
+        <p className="text-sm text-foreground-muted">Taking you to your account…</p>
+      </div>
+    );
+  }
+
+  // Nothing sent yet: ask where to send it.
+  if (!sent) {
+    return (
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={async (event) => {
+          event.preventDefault();
+          setPending(true);
+          await send();
+          setPending(false);
+        }}
+      >
+        <p className="text-sm text-foreground-muted">
+          {codes ? "We'll email you a 6-digit code to confirm this address." : "We'll email you a link to confirm this address."}
+        </p>
+        <div className="flex flex-col gap-2">
+          <AuthLabel htmlFor="email">Email</AuthLabel>
+          <AuthInput
+            id="email"
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoFocus={!initialEmail}
+          />
+        </div>
+        <FormMessage>{error}</FormMessage>
+        <PrimaryButton type="submit" pending={pending}>
+          {codes ? "Send me a code" : "Send me a link"}
+        </PrimaryButton>
+      </form>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="grid size-12 place-items-center rounded-full bg-brand/15 text-link">
+          <MailIcon className="size-6" />
+        </span>
+        <p className="text-sm text-foreground-muted">
+          {codes ? "Enter the 6-digit code we sent to " : "Open the link we sent to "}
+          <span className="font-medium text-foreground">{email}</span>.
+        </p>
+      </div>
+
+      {codes && (
+        <>
+          <OtpInput value={code} onChange={setCode} onComplete={(value) => void verify(value)} label="Verification code" autoFocus disabled={pending} />
+          <FormMessage>{error}</FormMessage>
+          <PrimaryButton type="button" onClick={() => void verify()} pending={pending} disabled={code.length !== 6}>
+            Verify email
+          </PrimaryButton>
+          <Divider />
+        </>
+      )}
+      {!codes && <FormMessage>{error}</FormMessage>}
+
+      <div className="flex flex-col items-center gap-2">
+        <SecondaryButton onClick={() => void resend.resend()} disabled={resend.disabled}>
+          {resend.label.replace("code", codes ? "code" : "link")}
+        </SecondaryButton>
+        <TextButton onClick={() => setSent(false)}>Use a different email</TextButton>
+      </div>
+    </div>
+  );
+}

package/templates/app/components/{admin/admin-header.tsx → dashboard/dashboard-header.tsx}

@@ -1,78 +1,78 @@
-"use client";
-
-import { useState } from "react";
-import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
-import { authClient } from "@/lib/auth-client";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Separator } from "@/components/ui/separator";
-import { SidebarTrigger } from "@/components/ui/sidebar";
-
-export type Theme = "light" | "dark" | "system";
-
-/** Persist the choice for SSR (so the first paint matches) and apply it now. */
-function applyTheme(theme: Theme) {
-  document.cookie = `flare-theme=${theme}; path=/; max-age=31536000; samesite=lax`;
-  const root = document.documentElement;
-  root.classList.remove("light", "dark");
-  if (theme !== "system") root.classList.add(theme);
-}
-
-export function AdminHeader({ user, initialTheme }: { user: { name?: string | null; email: string }; initialTheme: Theme }) {
-  const [theme, setTheme] = useState<Theme>(initialTheme);
-  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
-
-  return (
-    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
-      <SidebarTrigger />
-      <Separator orientation="vertical" className="mr-1 h-4" />
-      <div className="ml-auto flex items-center gap-1">
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
-          onClick={() => {
-            const next: Theme = dark ? "light" : "dark";
-            setTheme(next);
-            applyTheme(next);
-          }}
-        >
-          {dark ? <SunIcon /> : <MoonIcon />}
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" className="gap-2">
-              <span className="max-w-40 truncate">{user.name || user.email}</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel className="font-normal">
-              <span className="block truncate text-sm font-medium">{user.name || "Signed in"}</span>
-              <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem
-                onSelect={async () => {
-                  await authClient.signOut();
-                  window.location.assign("/sign-in");
-                }}
-              >
-                <LogOutIcon />
-                Sign out
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </header>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+
+export type Theme = "light" | "dark" | "system";
+
+/** Persist the choice for SSR (so the first paint matches) and apply it now. */
+function applyTheme(theme: Theme) {
+  document.cookie = `flare-theme=${theme}; path=/; max-age=31536000; samesite=lax`;
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  if (theme !== "system") root.classList.add(theme);
+}
+
+export function DashboardHeader({ user, initialTheme }: { user: { name?: string | null; email: string }; initialTheme: Theme }) {
+  const [theme, setTheme] = useState<Theme>(initialTheme);
+  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+  return (
+    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
+      <SidebarTrigger />
+      <Separator orientation="vertical" className="mr-1 h-4" />
+      <div className="ml-auto flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
+          onClick={() => {
+            const next: Theme = dark ? "light" : "dark";
+            setTheme(next);
+            applyTheme(next);
+          }}
+        >
+          {dark ? <SunIcon /> : <MoonIcon />}
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="gap-2">
+              <span className="max-w-40 truncate">{user.name || user.email}</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="font-normal">
+              <span className="block truncate text-sm font-medium">{user.name || "Signed in"}</span>
+              <span className="block truncate text-xs text-muted-foreground">{user.email}</span>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                onSelect={async () => {
+                  await authClient.signOut();
+                  window.location.assign("/sign-in");
+                }}
+              >
+                <LogOutIcon />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

package/templates/app/components/{admin/resource-nav.tsx → dashboard/dashboard-sidebar.tsx}

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { LayoutDashboardIcon } from "lucide-react";
+import { ActivityIcon, LayoutDashboardIcon, UserCircleIcon } from "lucide-react";
 import {
   Sidebar,
   SidebarContent,
@@ -30,17 +30,27 @@ export interface NavResource {
  * descriptor's `icon`, the label from its plural label, and the active item from the
  * current path.
  */
-export function ResourceNav({
+/** Sections every dashboard has, whatever resources the app defines. */
+const ACCOUNT_LINKS = [{ href: "/dashboard/account", label: "Account", icon: UserCircleIcon }];
+// Security has its own page once `flare gen security` runs, which adds its link to
+// lib/dashboard-nav.ts; observability ships with every app.
+const ADMIN_LINKS = [{ href: "/dashboard/observability", label: "Observability", icon: ActivityIcon }];
+
+export function DashboardSidebar({
   appName,
   resources,
   links = [],
+  isAdmin = false,
 }: {
   appName: string;
   resources: NavResource[];
-  /** Extra pages (see lib/admin-nav.ts), shown under "Platform". */
+  /** Extra pages (see lib/dashboard-nav.ts), shown under "Platform". */
   links?: Array<{ label: string; href: string; icon: string }>;
+  /** Whether to show the sections that manage the app itself. */
+  isAdmin?: boolean;
 }) {
   const pathname = usePathname();
+  const manage = [...ACCOUNT_LINKS, ...(isAdmin ? ADMIN_LINKS : [])];
 
   return (
     <Sidebar collapsible="icon">
@@ -48,7 +58,7 @@ export function ResourceNav({
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton asChild size="lg" tooltip={appName}>
-              <Link href="/admin">
+              <Link href="/dashboard">
                 <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
                   <LayoutDashboardIcon className="size-4" />
                 </div>
@@ -60,12 +70,28 @@ export function ResourceNav({
       </SidebarHeader>
 
       <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "/dashboard"} tooltip="Overview">
+                  <Link href="/dashboard">
+                    <LayoutDashboardIcon />
+                    <span>Overview</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {resources.length > 0 && (
         <SidebarGroup>
           <SidebarGroupLabel>Resources</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {resources.map((resource) => {
-                const href = `/admin/${resource.slug}`;
+                const href = `/dashboard/${resource.slug}`;
                 const Icon = resourceIcon(resource.icon);
                 return (
                   <SidebarMenuItem key={resource.name}>
@@ -81,6 +107,26 @@ export function ResourceNav({
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
+        )}
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Manage</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {manage.map((link) => (
+                <SidebarMenuItem key={link.href}>
+                  <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
+                    <Link href={link.href}>
+                      <link.icon />
+                      <span>{link.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
         {links.length > 0 && (
           <SidebarGroup>
             <SidebarGroupLabel>Platform</SidebarGroupLabel>
@@ -88,13 +134,24 @@ export function ResourceNav({
               <SidebarMenu>
                 {links.map((link) => {
                   const Icon = resourceIcon(link.icon);
+                  // Route handlers (/api/...) and other sites are whole pages: open them in a new tab.
+                  const external = link.href.startsWith("/api/") || /^https?:\/\//.test(link.href);
+                  const content = (
+                    <>
+                      <Icon />
+                      <span>{link.label}</span>
+                    </>
+                  );
                   return (
                     <SidebarMenuItem key={link.href}>
                       <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
-                        <Link href={link.href}>
-                          <Icon />
-                          <span>{link.label}</span>
-                        </Link>
+                        {external ? (
+                          <a href={link.href} target="_blank" rel="noreferrer">
+                            {content}
+                          </a>
+                        ) : (
+                          <Link href={link.href}>{content}</Link>
+                        )}
                       </SidebarMenuButton>
                     </SidebarMenuItem>
                   );

package/templates/app/components/dashboard/export-button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useTransition } from "react";
+import { useSearchParams } from "next/navigation";
+import { DownloadIcon } from "lucide-react";
+import { toast } from "sonner";
+import { exportRecordsAction } from "@/app/dashboard/actions";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { downloadCsv } from "./table-selection";
+
+/**
+ * Exports what the table is showing — the same search, filters and sort, not just the
+ * page on screen. The server builds the CSV because the browser only ever holds one page.
+ */
+export function ExportButton({ resourceName, pluralLabel }: { resourceName: string; pluralLabel: string }) {
+  const params = useSearchParams();
+  const [pending, startTransition] = useTransition();
+
+  const run = () =>
+    startTransition(async () => {
+      const query = new URLSearchParams(params.toString());
+      query.delete("page");
+      const result = await exportRecordsAction(resourceName, query.toString());
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      const { csv, rows, truncated } = result.data;
+      downloadCsv(`${resourceName.toLowerCase()}-${new Date().toISOString().slice(0, 10)}.csv`, csv);
+      if (truncated) toast.warning(`Exported the first ${rows.toLocaleString()} ${pluralLabel.toLowerCase()}. Filter down for the rest.`);
+      else toast.success(`Exported ${rows.toLocaleString()} ${pluralLabel.toLowerCase()}.`);
+    });
+
+  return (
+    <Button variant="outline" onClick={run} disabled={pending}>
+      {pending ? <Spinner data-icon="inline-start" /> : <DownloadIcon data-icon="inline-start" />}
+      Export
+    </Button>
+  );
+}