@flaredev/cli 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flaredev/cli",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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.0"
   },
   "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,6 +4,10 @@ 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";
@@ -109,6 +113,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;

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/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>
+  );
+}