@flaredev/cli 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "The flare command-line tool: create, generate, migrate, and deploy Flare apps",
   "license": "MIT",
   "author": "Muke Johnbaptist",
@@ -41,7 +41,7 @@
     "jiti": "^2.7.0",
     "jsonc-parser": "^3.3.1",
     "picocolors": "^1.1.1",
-    "@flaredev/core": "0.3.0"
+    "@flaredev/core": "0.4.1"
   },
   "engines": {
     "node": ">=22"

package/templates/app/app/dashboard/account/layout.tsx

@@ -0,0 +1,30 @@
+import { AccountNav } from "@/components/account/account-nav";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { twoFactorAvailable, authConfig } from "@/lib/auth-config";
+import { enabledSocialProviders } from "@/lib/auth";
+import { requireSession } from "@/lib/session";
+
+/** The frame the account's pages share: one header, one set of links. */
+export default async function AccountLayout({ children }: { children: React.ReactNode }) {
+  await requireSession("/dashboard/account");
+  const security = twoFactorAvailable || authConfig.passkeys || enabledSocialProviders().length > 0;
+
+  return (
+    <>
+      <PageHeader
+        title="Account"
+        description="Your profile, how you sign in, and where you're signed in."
+        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Account" }]}
+      />
+      <AccountNav
+        links={[
+          { href: "/dashboard/account", label: "Profile" },
+          { href: "/dashboard/account/password", label: "Password" },
+          ...(security ? [{ href: "/dashboard/account/security", label: "Security" }] : []),
+          { href: "/dashboard/account/sessions", label: "Devices" },
+        ]}
+      />
+      <div className="flex max-w-3xl flex-col gap-6">{children}</div>
+    </>
+  );
+}

package/templates/app/app/dashboard/account/page.tsx

@@ -1,40 +1,18 @@
-import { and, eq } from "drizzle-orm";
-import { SecuritySettings } from "@/components/account/security-settings";
-import { PageHeader } from "@/components/dashboard/page-header";
-import { getDb } from "@/db";
-import { account } from "@/db/auth-schema";
-import { enabledSocialProviders } from "@/lib/auth";
-import { authConfig } from "@/lib/auth-config";
+import { Profile } from "@/components/account/sections";
 import { requireSession } from "@/lib/session";
 
-export const metadata = { title: "Account" };
+export const metadata = { title: "Profile" };
 
-export default async function AccountPage() {
+export default async function ProfilePage() {
   const { user } = await requireSession("/dashboard/account");
-  const credential = await getDb()
-    .select({ id: account.id })
-    .from(account)
-    .where(and(eq(account.userId, user.id), eq(account.providerId, "credential")))
-    .get();
-
   return (
-    <>
-      <PageHeader
-        title="Account"
-        description="Your profile, how you sign in, and where you're signed in."
-        crumbs={[{ label: "Dashboard", href: "/dashboard" }, { label: "Account" }]}
-      />
-      <SecuritySettings
-        user={{
-          name: user.name,
-          email: user.email,
-          emailVerified: user.emailVerified,
-          twoFactorEnabled: Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled),
-        }}
-        hasPassword={Boolean(credential)}
-        methods={{ passkeys: authConfig.passkeys, twoFactor: authConfig.twoFactor }}
-        socialProviders={enabledSocialProviders()}
-      />
-    </>
+    <Profile
+      user={{
+        name: user.name,
+        email: user.email,
+        emailVerified: user.emailVerified,
+        twoFactorEnabled: Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled),
+      }}
+    />
   );
 }

package/templates/app/app/dashboard/account/password/page.tsx

@@ -0,0 +1,22 @@
+import { and, eq } from "drizzle-orm";
+import { Password } from "@/components/account/sections";
+import { getDb } from "@/db";
+import { account } from "@/db/auth-schema";
+import { requireSession } from "@/lib/session";
+
+export const metadata = { title: "Password" };
+
+/** Whether this person signs in with a password at all: social and passkey accounts have none. */
+async function hasPassword(userId: string) {
+  const credential = await getDb()
+    .select({ id: account.id })
+    .from(account)
+    .where(and(eq(account.userId, userId), eq(account.providerId, "credential")))
+    .get();
+  return Boolean(credential);
+}
+
+export default async function PasswordPage() {
+  const { user } = await requireSession("/dashboard/account/password");
+  return <Password hasPassword={await hasPassword(user.id)} email={user.email} />;
+}

package/templates/app/app/dashboard/account/security/page.tsx

@@ -0,0 +1,34 @@
+import { and, eq } from "drizzle-orm";
+import { ConnectedAccounts, Passkeys, TwoFactor } from "@/components/account/sections";
+import { getDb } from "@/db";
+import { account } from "@/db/auth-schema";
+import { enabledSocialProviders } from "@/lib/auth";
+import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
+import { requireSession } from "@/lib/session";
+
+export const metadata = { title: "Security" };
+
+/** Two-factor, passkeys and the accounts you can sign in with. */
+export default async function SecurityPage() {
+  const { user } = await requireSession("/dashboard/account/security");
+  const credential = await getDb()
+    .select({ id: account.id })
+    .from(account)
+    .where(and(eq(account.userId, user.id), eq(account.providerId, "credential")))
+    .get();
+  const providers = enabledSocialProviders();
+
+  return (
+    <>
+      {twoFactorAvailable && (
+        <TwoFactor
+          enabled={Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled)}
+          hasPassword={Boolean(credential)}
+          methods={authConfig.twoFactor}
+        />
+      )}
+      {authConfig.passkeys && <Passkeys />}
+      {providers.length > 0 && <ConnectedAccounts providers={providers} />}
+    </>
+  );
+}

package/templates/app/app/dashboard/account/sessions/page.tsx

@@ -0,0 +1,9 @@
+import { Sessions } from "@/components/account/sections";
+import { requireSession } from "@/lib/session";
+
+export const metadata = { title: "Devices" };
+
+export default async function SessionsPage() {
+  await requireSession("/dashboard/account/sessions");
+  return <Sessions />;
+}

package/templates/app/app/dashboard/actions.ts

@@ -4,9 +4,13 @@ import { revalidatePath } from "next/cache";
 import { createObjectKey, fileKeyPrefix, fileMaxBytes, matchesContentType, mimeTypesFor, type FileField } from "@flaredev/core";
 import type { FieldIssue } from "@flaredev/core/server";
 import { diffFields, recordAudit } from "@/lib/audit";
+import { listViews, MAX_VIEWS } from "@/lib/views";
+import { and, eq } from "drizzle-orm";
+import { getDb } from "@/db";
+import { savedView } from "@/db/flare-schema";
 import { toCsv } from "@/lib/csv";
 import { storage } from "@/lib/storage";
-import { can, storedFields, type PolicyAction } from "@flaredev/core";
+import { can, storedFields, type PolicyAction, type Resource } from "@flaredev/core";
 import { resourcePath, dashboardSession, dashboardStore, policyFor } from "@/lib/dashboard";
 
 export type ActionResult<T = unknown> =
@@ -22,6 +26,23 @@ async function allowed(resourceName: string, action: PolicyAction): Promise<Acti
   if (!can(policyFor(resourceName), role, action)) return forbidden(`Your role can't ${action} this record.`);
 }
 
+/**
+ * Take a deleted record's uploads out of storage.
+ *
+ * The row is gone, so nothing can point at those objects again, and an app that never
+ * removes them pays to keep files no one can reach. A failure here is swallowed on
+ * purpose: the record is already deleted, and a stray object is a smaller problem than
+ * an action that reports failure after having done the work.
+ */
+async function removeUploads(resource: Resource, record: Record<string, unknown> | null | undefined): Promise<void> {
+  if (!record) return;
+  for (const [key, def] of storedFields(resource)) {
+    if (def.kind !== "file") continue;
+    const value = record[key];
+    if (typeof value === "string" && value) await storage.delete(value).catch(() => undefined);
+  }
+}
+
 export async function deleteRecordAction(resourceName: string, id: string): Promise<ActionResult<{ id: string }>> {
   const denied = await allowed(resourceName, "delete");
   if (denied) return denied;
@@ -30,6 +51,7 @@ export async function deleteRecordAction(resourceName: string, id: string): Prom
   const existing = await store.get(id);
   const result = await store.delete(id);
   if (result.ok) {
+    await removeUploads(store.resource, existing.ok ? existing.data : null);
     await recordAudit({
       action: "delete",
       resource: resourceName,
@@ -63,10 +85,15 @@ export async function deleteManyAction(resourceName: string, ids: string[]): Pro
   // at it) shouldn't take the rest of the batch with it.
   let deleted = 0;
   let failed = 0;
+  const hasFiles = storedFields(store.resource).some(([, def]) => def.kind === "file");
   for (const id of ids) {
+    // Only read the record first when there's an upload to clean up afterwards.
+    const existing = hasFiles ? await store.get(id) : null;
     const result = await store.delete(id);
-    if (result.ok) deleted++;
-    else failed++;
+    if (result.ok) {
+      deleted++;
+      if (existing?.ok) await removeUploads(store.resource, existing.data);
+    } else failed++;
   }
   if (deleted > 0) {
     await recordAudit({ action: "bulk-delete", resource: resourceName, changes: { deleted, failed } });
@@ -109,6 +136,37 @@ export async function exportRecordsAction(resourceName: string, query: string):
   return { ok: true, data: { csv, rows: rows.length, truncated } };
 }
 
+/** Keep the table's current query as a named view, for this person. */
+export async function saveViewAction(resourceName: string, name: string, query: string): Promise<ActionResult<{ id: string }>> {
+  const denied = await allowed(resourceName, "read");
+  if (denied) return denied;
+  const { session } = await dashboardSession();
+  if (!session) return { ok: false, status: 401, error: "Sign in to save a view." };
+
+  const label = name.trim().slice(0, 60);
+  if (!label) return { ok: false, status: 400, error: "Give the view a name." };
+  const existing = await listViews(resourceName);
+  if (existing.length >= MAX_VIEWS) {
+    return { ok: false, status: 400, error: `That's ${MAX_VIEWS} views for ${resourceName}. Delete one first.` };
+  }
+
+  const [row] = await getDb()
+    .insert(savedView)
+    .values({ userId: session.user.id, resource: resourceName, name: label, query: query.replace(/^\?/, "").slice(0, 2000) })
+    .returning({ id: savedView.id });
+  revalidatePath("/dashboard", "layout");
+  return { ok: true, data: { id: row!.id } };
+}
+
+/** Views belong to the person who saved them, so only they can remove one. */
+export async function deleteViewAction(id: string): Promise<ActionResult<{ id: string }>> {
+  const { session } = await dashboardSession();
+  if (!session) return { ok: false, status: 401, error: "Sign in first." };
+  await getDb().delete(savedView).where(and(eq(savedView.id, id), eq(savedView.userId, session.user.id)));
+  revalidatePath("/dashboard", "layout");
+  return { ok: true, data: { id } };
+}
+
 export async function createRecordAction(resourceName: string, input: unknown): Promise<ActionResult<Record<string, unknown>>> {
   const denied = await allowed(resourceName, "create");
   if (denied) return denied;
@@ -198,7 +256,17 @@ export async function createUploadUrlAction(
  * field's prefix are signed, and only for roles that can work with the resource, so a
  * guessed or borrowed key can't be read through a resource the role can't see.
  */
-export async function createReadUrlAction(resourceName: string, fieldKey: string, key: string): Promise<ActionResult<{ url: string }>> {
+export async function createReadUrlAction(
+  resourceName: string,
+  fieldKey: string,
+  key: string,
+  /**
+   * Serve the file as a download with this name instead of showing it in the tab. Object
+   * keys carry an id to keep them unique, so without this a download arrives called
+   * `3f1c…-invoice.pdf` — pass the name the record holds.
+   */
+  downloadAs?: string,
+): Promise<ActionResult<{ url: string }>> {
   const denied = await allowed(resourceName, "read");
   // Someone creating or editing a record can view what they just uploaded.
   if (denied && (await allowed(resourceName, "create")) && (await allowed(resourceName, "update"))) return denied;
@@ -207,5 +275,5 @@ export async function createReadUrlAction(resourceName: string, fieldKey: string
   if ("failure" in target) return target.failure;
   if (!key.startsWith(target.prefix)) return { ok: false, status: 403, error: "That file doesn't belong to this field.", field: fieldKey };
 
-  return { ok: true, data: { url: await storage.createReadUrl({ key }) } };
+  return { ok: true, data: { url: await storage.createReadUrl({ key, downloadAs: downloadAs || undefined }) } };
 }

package/templates/app/app/dashboard/layout.tsx

@@ -1,15 +1,20 @@
 import { cookies } from "next/headers";
+import { count, eq } from "drizzle-orm";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
-import { DashboardHeader, type Theme } from "@/components/dashboard/dashboard-header";
+import { DashboardHeader, type Notice, type Theme } from "@/components/dashboard/dashboard-header";
 import { DashboardSidebar } from "@/components/dashboard/dashboard-sidebar";
+import { getDb } from "@/db";
+import { passkey } from "@/db/auth-schema";
+import { authConfig, twoFactorAvailable } from "@/lib/auth-config";
 import { dashboardLinks } from "@/lib/dashboard-nav";
 import { ADMIN_ROLES, visibleResources } from "@/lib/dashboard";
 import { requireSession } from "@/lib/session";
+import { listViews } from "@/lib/views";
 
 /**
  * The frame around every signed-in page: the app's resources in the sidebar, the
- * account menu in the header.
+ * account menu in the header and in the sidebar's footer.
  *
  * Everyone signed in gets a dashboard. What's in it depends on the policies: the
  * sidebar lists only the resources this person may read, and the sections that manage
@@ -22,18 +27,37 @@ export default async function DashboardLayout({ children }: { children: React.Re
   const collapsed = jar.get("sidebar_state")?.value === "false";
   const role = (user as { role?: string | null }).role ?? "";
 
+  const views = await listViews();
   const resources = (await visibleResources()).map((resource) => ({
     name: resource.name,
     pluralLabel: resource.pluralLabel,
     slug: resource.slug,
     icon: resource.icon,
+    group: resource.group,
+    views: views.filter((view) => view.resource === resource.name).map(({ id, name, query }) => ({ id, name, query })),
   }));
 
+  // What the bell has to say: the things about this account that aren't done yet.
+  const [{ passkeys } = { passkeys: 0 }] = await getDb().select({ passkeys: count() }).from(passkey).where(eq(passkey.userId, user.id));
+  const notices: Notice[] = [
+    ...(user.emailVerified
+      ? []
+      : [{ id: "verify-email", title: "Verify your email address", description: "We'll send a new link or code.", href: "/verify-email", tone: "warning" as const }]),
+    ...(twoFactorAvailable && !(user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled
+      ? [{ id: "two-factor", title: "Turn on two-factor authentication", description: "A second step after your password.", href: "/dashboard/account/security" }]
+      : []),
+    ...(authConfig.passkeys && passkeys === 0
+      ? [{ id: "passkey", title: "Add a passkey", description: "Sign in with Face ID, Touch ID or Windows Hello.", href: "/dashboard/account/security" }]
+      : []),
+  ];
+
+  const account = { name: user.name, email: user.email, image: (user as { image?: string | null }).image };
+
   return (
     <SidebarProvider defaultOpen={!collapsed}>
-      <DashboardSidebar appName="__APP_NAME__" resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(role)} />
+      <DashboardSidebar appName="__APP_NAME__" resources={resources} links={dashboardLinks} isAdmin={ADMIN_ROLES.includes(role)} user={account} />
       <SidebarInset>
-        <DashboardHeader user={{ name: user.name, email: user.email }} initialTheme={theme} />
+        <DashboardHeader user={account} initialTheme={theme} notices={notices} />
         <main className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">{children}</main>
       </SidebarInset>
       <Toaster theme={theme} />

package/templates/app/app/dashboard/observability/page.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { PageHeader } from "@/components/dashboard/page-header";
+import { LocalTime } from "@/components/dashboard/local-time";
 import { StatCards, type Stat } from "@/components/dashboard/stat-card";
 import { TrafficChart } from "@/components/dashboard/traffic-chart";
 import { auditCount, recentAudit } from "@/lib/audit";
@@ -23,8 +24,6 @@ const ACTION_TONE: Record<string, "secondary" | "destructive" | "outline"> = {
   import: "secondary",
 };
 
-const when = (date: Date) => new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
-
 /** How the app is behaving: traffic from Cloudflare, size from the database, and who changed what. */
 export default async function ObservabilityPage() {
   await requireDashboard("/dashboard/observability");
@@ -151,7 +150,9 @@ export default async function ObservabilityPage() {
                         </TableCell>
                         <TableCell className="max-w-56 truncate">{entry.recordLabel ?? describeBulk(entry.changes)}</TableCell>
                         <TableCell className="max-w-48 truncate text-muted-foreground">{entry.userEmail ?? "—"}</TableCell>
-                        <TableCell className="text-right whitespace-nowrap text-muted-foreground tabular-nums">{when(entry.createdAt)}</TableCell>
+                        <TableCell className="text-right whitespace-nowrap text-muted-foreground tabular-nums">
+                          <LocalTime value={entry.createdAt} />
+                        </TableCell>
                       </TableRow>
                     ))}
                   </TableBody>

package/templates/app/app/dashboard/page.tsx

@@ -44,8 +44,8 @@ export default async function DashboardPage() {
   const twoFactorOn = Boolean((user as { twoFactorEnabled?: boolean | null }).twoFactorEnabled);
   const steps = [
     { done: user.emailVerified, label: "Verify your email address", href: "/verify-email" },
-    ...(twoFactorAvailable ? [{ done: twoFactorOn, label: "Turn on two-factor authentication", href: "/dashboard/account#two-factor" }] : []),
-    ...(authConfig.passkeys ? [{ done: passkeys > 0, label: "Add a passkey for one-tap sign-in", href: "/dashboard/account#passkeys" }] : []),
+    ...(twoFactorAvailable ? [{ done: twoFactorOn, label: "Turn on two-factor authentication", href: "/dashboard/account/security" }] : []),
+    ...(authConfig.passkeys ? [{ done: passkeys > 0, label: "Add a passkey for one-tap sign-in", href: "/dashboard/account/security" }] : []),
   ];
   const remaining = steps.filter((step) => !step.done).length;
 

package/templates/app/app/globals.css

@@ -1,11 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-/* One typeface per theme (self-hosted; only the active theme's font is downloaded). */
-@import "@fontsource-variable/inter";
-@import "@fontsource-variable/plus-jakarta-sans";
-@import "@fontsource-variable/noto-sans";
-@import "@fontsource-variable/geist";
-@import "@fontsource-variable/figtree";
 
 /*
  * Dark mode: the `dark` class on <html> (set from the theme cookie) or, with no

package/templates/app/app/layout.tsx

@@ -1,28 +1,37 @@
-import type { Metadata } from "next";
-import { site } from "@/lib/site";
-import { activeTheme } from "@/lib/theme";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: { default: site.name, template: `%s · ${site.name}` },
-  description: site.description,
-};
-
-/**
- * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
- * first paint. It runs in the browser rather than reading cookies() here: a layout
- * that reads cookies makes every page under it dynamic, and dynamic pages can never
- * be served from the CDN cache.
- */
-const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
-
-export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  return (
-    <html lang="en" data-theme={activeTheme} suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
+import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { activeTheme } from "@/lib/theme";
+import "./globals.css";
+// One typeface per theme, self-hosted; the browser only downloads the one in use.
+// These are imported here rather than from globals.css because Tailwind inlines a CSS
+// @import, and the font files' relative URLs are then resolved against the wrong file
+// and never emitted — which shows up only in a build, as every font 404ing.
+import "@fontsource-variable/inter";
+import "@fontsource-variable/plus-jakarta-sans";
+import "@fontsource-variable/noto-sans";
+import "@fontsource-variable/geist";
+import "@fontsource-variable/figtree";
+
+export const metadata: Metadata = {
+  title: { default: site.name, template: `%s · ${site.name}` },
+  description: site.description,
+};
+
+/**
+ * Applies the saved theme (the `flare-theme` cookie the admin's toggle writes) before
+ * first paint. It runs in the browser rather than reading cookies() here: a layout
+ * that reads cookies makes every page under it dynamic, and dynamic pages can never
+ * be served from the CDN cache.
+ */
+const themeScript = `(function(){try{var m=document.cookie.match(/(?:^|; )flare-theme=(light|dark)/);if(m)document.documentElement.classList.add(m[1]);}catch(e){}})();`;
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" data-theme={activeTheme} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/app/components/account/account-nav.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+export interface AccountLink {
+  href: string;
+  label: string;
+}
+
+/**
+ * The account's own navigation. Each part of an account is its own page: a single page
+ * of everything means scrolling past two-factor to reach your devices, and no way to
+ * send someone straight to the part that needs their attention.
+ */
+export function AccountNav({ links }: { links: AccountLink[] }) {
+  const pathname = usePathname();
+  return (
+    <nav aria-label="Account" className="-mb-px flex gap-1 overflow-x-auto border-b">
+      {links.map((link) => {
+        const current = pathname === link.href;
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            aria-current={current ? "page" : undefined}
+            className={cn(
+              "border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors",
+              current ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {link.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}