@flaredev/cli 0.3.0 → 0.4.0

package/templates/app/components/dashboard/row-actions.tsx

@@ -1,144 +1,156 @@
-"use client";
-
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useTransition } from "react";
-import { MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
-import { toast } from "sonner";
-import type { Resource } from "@flaredev/core";
-import { deleteRecordAction } from "@/app/dashboard/actions";
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Spinner } from "@/components/ui/spinner";
-import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
-
-/**
- * Edit and delete for one row. Edit opens a dialog when the row's record came with it
- * (site.dashboard.forms is "modal"), and otherwise goes to the form page.
- */
-export function RowActions({
-  resource,
-  id,
-  record,
-  relations = {},
-  listHref,
-  editHref,
-  canUpdate = true,
-  canDelete = true,
-}: {
-  resource: Resource;
-  id: string;
-  /** The record itself, when the form opens in a dialog. */
-  record?: Record<string, unknown>;
-  relations?: FormRelations;
-  listHref: string;
-  editHref: string;
-  canUpdate?: boolean;
-  canDelete?: boolean;
-}) {
-  const router = useRouter();
-  const [confirming, setConfirming] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [pending, startTransition] = useTransition();
-  const { name: resourceName, label } = resource;
-
-  function onDelete() {
-    startTransition(async () => {
-      const result = await deleteRecordAction(resourceName, id);
-      if (result.ok) {
-        toast.success(`${label} deleted.`);
-        setConfirming(false);
-        router.refresh();
-      } else {
-        toast.error(result.error);
-      }
-    });
-  }
-
-  if (!canUpdate && !canDelete) return null;
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" aria-label="Row actions">
-            <MoreHorizontalIcon />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {canUpdate && (
-            <DropdownMenuGroup>
-              {record ? (
-                <DropdownMenuItem onSelect={() => setEditing(true)}>
-                  <PencilIcon />
-                  Edit
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem asChild>
-                  <Link href={editHref}>
-                    <PencilIcon />
-                    Edit
-                  </Link>
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuGroup>
-          )}
-          {canUpdate && canDelete && <DropdownMenuSeparator />}
-          {canDelete && (
-            <DropdownMenuGroup>
-              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
-                <Trash2Icon />
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {record && canUpdate && (
-        <ResourceFormDialog
-          resource={resource}
-          relations={relations}
-          listHref={listHref}
-          mode="edit"
-          id={id}
-          record={record}
-          open={editing}
-          onOpenChange={setEditing}
-        />
-      )}
-
-      <AlertDialog open={confirming} onOpenChange={setConfirming}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
-            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
-            <Button variant="destructive" onClick={onDelete} disabled={pending}>
-              {pending && <Spinner data-icon="inline-start" />}
-              Delete
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { ExternalLinkIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { toast } from "sonner";
+import type { Resource } from "@flaredev/core";
+import { deleteRecordAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+
+/**
+ * Edit and delete for one row. Edit opens a dialog when the row's record came with it
+ * (site.dashboard.forms is "modal"), and otherwise goes to the form page.
+ */
+export function RowActions({
+  resource,
+  id,
+  record,
+  relations = {},
+  listHref,
+  editHref,
+  detailHref,
+  canUpdate = true,
+  canDelete = true,
+}: {
+  resource: Resource;
+  id: string;
+  /** The record itself, when the form opens in a dialog. */
+  record?: Record<string, unknown>;
+  relations?: FormRelations;
+  listHref: string;
+  editHref: string;
+  /** The record's own page. */
+  detailHref: string;
+  canUpdate?: boolean;
+  canDelete?: boolean;
+}) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [pending, startTransition] = useTransition();
+  const { name: resourceName, label } = resource;
+
+  function onDelete() {
+    startTransition(async () => {
+      const result = await deleteRecordAction(resourceName, id);
+      if (result.ok) {
+        toast.success(`${label} deleted.`);
+        setConfirming(false);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" aria-label="Row actions">
+            <MoreHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuGroup>
+            <DropdownMenuItem asChild>
+              <Link href={detailHref}>
+                <ExternalLinkIcon />
+                Open
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          {canUpdate && (
+            <DropdownMenuGroup>
+              {record ? (
+                <DropdownMenuItem onSelect={() => setEditing(true)}>
+                  <PencilIcon />
+                  Edit
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem asChild>
+                  <Link href={editHref}>
+                    <PencilIcon />
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuGroup>
+          )}
+          {canUpdate && canDelete && <DropdownMenuSeparator />}
+          {canDelete && (
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive" onSelect={() => setConfirming(true)}>
+                <Trash2Icon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {record && canUpdate && (
+        <ResourceFormDialog
+          resource={resource}
+          relations={relations}
+          listHref={listHref}
+          mode="edit"
+          id={id}
+          record={record}
+          open={editing}
+          onOpenChange={setEditing}
+        />
+      )}
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={onDelete} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/templates/app/components/dashboard/save-view-button.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { BookmarkPlusIcon } from "lucide-react";
+import { toast } from "sonner";
+import { saveViewAction } from "@/app/dashboard/actions";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Keep this search, these filters, this sort and these columns as a named view.
+ *
+ * Only offered once the table is actually filtered — saving "all of them" as a view is
+ * saving the list you're already on.
+ */
+export function SaveViewButton({ resourceName, label }: { resourceName: string; label: string }) {
+  const params = useSearchParams();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [pending, startTransition] = useTransition();
+
+  const query = new URLSearchParams(params.toString());
+  query.delete("page");
+  query.delete("cursor");
+  if ([...query.keys()].length === 0) return null;
+
+  const save = () => {
+    startTransition(async () => {
+      const result = await saveViewAction(resourceName, name, query.toString());
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      setOpen(false);
+      setName("");
+      toast.success(`Saved "${name.trim()}" to the sidebar.`);
+      router.refresh();
+    });
+  };
+
+  return (
+    <>
+      <Button variant="outline" size="icon" aria-label="Save this view" onClick={() => setOpen(true)}>
+        <BookmarkPlusIcon />
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Save this view</DialogTitle>
+            <DialogDescription>It appears under {label.toLowerCase()} in the sidebar, for you.</DialogDescription>
+          </DialogHeader>
+          <Field>
+            <FieldLabel htmlFor="view-name">Name</FieldLabel>
+            <Input
+              id="view-name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Overdue invoices"
+              maxLength={60}
+              autoFocus
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && name.trim()) save();
+              }}
+            />
+            <FieldDescription>Keeps the search, filters, sorting and columns you have now.</FieldDescription>
+          </Field>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)} disabled={pending}>
+              Cancel
+            </Button>
+            <Button onClick={save} disabled={pending || !name.trim()}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Save view
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/templates/app/components/dashboard/user-menu.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import { KeyRoundIcon, LogOutIcon, MonitorSmartphoneIcon, ShieldCheckIcon, UserIcon } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+
+export interface DashboardUser {
+  name?: string | null;
+  email: string;
+  image?: string | null;
+}
+
+/** "Ada Lovelace" → "AL"; an address falls back to its first letter. */
+export function initials(user: DashboardUser): string {
+  const source = user.name?.trim() || user.email;
+  const parts = source.split(/[\s@._-]+/).filter(Boolean);
+  return (parts.length > 1 ? `${parts[0]![0]}${parts[1]![0]}` : source.slice(0, 2)).toUpperCase();
+}
+
+export function UserAvatar({ user, className }: { user: DashboardUser; className?: string }) {
+  return (
+    <Avatar className={className}>
+      {user.image && <AvatarImage src={user.image} alt="" />}
+      <AvatarFallback className="bg-primary/10 text-xs font-medium text-primary">{initials(user)}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+/**
+ * What's inside the account menu, wherever it's opened from — the header's avatar and
+ * the sidebar's footer both show this, so there's one list of account actions, not two.
+ */
+export function UserMenuItems({ user }: { user: DashboardUser }) {
+  const signOut = async () => {
+    await authClient.signOut();
+    window.location.assign("/sign-in");
+  };
+
+  return (
+    <>
+      <DropdownMenuLabel className="flex items-center gap-2 font-normal">
+        <UserAvatar user={user} className="size-8" />
+        <span className="grid min-w-0">
+          <span className="truncate text-sm font-medium">{user.name || "Signed in"}</span>
+          <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+        </span>
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem asChild>
+          <Link href="/dashboard/account">
+            <UserIcon />
+            Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href="/dashboard/account/password">
+            <KeyRoundIcon />
+            Password
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href="/dashboard/account/security">
+            <ShieldCheckIcon />
+            Security
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href="/dashboard/account/sessions">
+            <MonitorSmartphoneIcon />
+            Devices
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem variant="destructive" onSelect={signOut}>
+          <LogOutIcon />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </>
+  );
+}

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

@@ -1,20 +1,23 @@
-"use client"
+"use client";
 
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
-// The theme comes from the admin layout (cookie-backed), so no theme provider is needed.
+/**
+ * Toasts in the app's theme.
+ *
+ * The colours come from the theme tokens (app/globals.css), so success is the theme's
+ * green, an error is its red, and the corner radius matches everything else — switch
+ * the theme and the toasts switch with it. Light or dark comes from the dashboard
+ * layout's cookie, so there's no theme provider in the tree.
+ */
 const Toaster = ({ theme = "system", ...props }: ToasterProps) => {
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      position="bottom-right"
+      closeButton
       icons={{
         success: <CircleCheckIcon className="size-4" />,
         info: <InfoIcon className="size-4" />,
@@ -22,17 +25,34 @@ const Toaster = ({ theme = "system", ...props }: ToasterProps) => {
         error: <OctagonXIcon className="size-4" />,
         loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
+      toastOptions={{
+        classNames: {
+          // A tinted left edge and a matching icon: the tone reads at a glance without
+          // colouring the whole toast, which would fight the page behind it.
+          toast:
+            "group toast border-l-4 shadow-lg data-[type=success]:border-l-success data-[type=error]:border-l-danger data-[type=warning]:border-l-warning data-[type=info]:border-l-link",
+          icon: "group-data-[type=success]:text-success group-data-[type=error]:text-danger group-data-[type=warning]:text-warning group-data-[type=info]:text-link",
+          title: "text-sm font-medium",
+          description: "text-xs text-muted-foreground",
+          actionButton: "bg-primary text-primary-foreground",
+          cancelButton: "bg-muted text-muted-foreground",
+        },
+      }}
       style={
         {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
           "--border-radius": "var(--radius)",
+          "--success-bg": "var(--popover)",
+          "--success-text": "var(--popover-foreground)",
+          "--error-bg": "var(--popover)",
+          "--error-text": "var(--popover-foreground)",
         } as React.CSSProperties
       }
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };

package/templates/app/db/flare-schema.ts

@@ -45,3 +45,25 @@ export const auditLog = sqliteTable(
   },
   (table) => [index("audit_log_created_at_idx").on(table.createdAt), index("audit_log_resource_idx").on(table.resource)],
 );
+
+/**
+ * A filtered, sorted, column-picked view of a resource that someone wanted to keep, like
+ * "Overdue invoices". The query is the table's own URL query string, so saving a view is
+ * saving what's in the address bar — nothing about the table has to know views exist.
+ */
+export const savedView = sqliteTable(
+  "saved_view",
+  {
+    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    userId: text("user_id").notNull(),
+    /** The resource's descriptor name, e.g. "Invoice". */
+    resource: text("resource").notNull(),
+    name: text("name").notNull(),
+    /** "q=ada&filter[status]=lead&sort=-createdAt", without the leading "?". */
+    query: text("query").notNull(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .notNull()
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
+  },
+  (table) => [index("saved_view_user_idx").on(table.userId, table.resource)],
+);

package/templates/app/lib/api.ts

@@ -1,8 +1,20 @@
+import { headers } from "next/headers";
 import { can, type Policy } from "@flaredev/core";
 import type { Authorize } from "@flaredev/core/server";
 import { policies } from "@/policies";
 import { auth } from "./auth";
 
+/**
+ * Who is making this request, for a resource's hooks (`hooks.beforeCreate` and friends
+ * in the descriptor). Reads the session the same way everything else does.
+ */
+export async function currentUser() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return null;
+  const { id, email } = session.user;
+  return { id, email, role: (session.user as { role?: string | null }).role ?? null };
+}
+
 /**
  * Authorization for every generated resource API (`app/api/<resource>/...`).
  * Return a Response to deny the request; return nothing to allow it.