@flaredev/cli 0.3.0 → 0.4.0

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

@@ -0,0 +1,66 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Columns3Icon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { hrefWith } from "./query";
+
+export interface ColumnOption {
+  key: string;
+  label: string;
+}
+
+/**
+ * Which columns the table shows. The choice goes in the URL (`?columns=name,email`)
+ * rather than into storage, so a view someone sends you looks the way it looked to them.
+ */
+export function ColumnMenu({ columns, visible }: { columns: ColumnOption[]; visible: string[] }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = new URLSearchParams(useSearchParams().toString());
+  const shown = new Set(visible);
+
+  const toggle = (key: string) => {
+    const next = new Set(shown);
+    if (!next.delete(key)) next.add(key);
+    // Nothing selected would leave a table of empty rows; keep at least one column.
+    if (next.size === 0) return;
+    const all = columns.every((column) => next.has(column.key));
+    router.push(hrefWith(pathname, params, { columns: all ? null : columns.filter((column) => next.has(column.key)).map((column) => column.key).join(",") }));
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" aria-label="Choose columns">
+          <Columns3Icon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuLabel>Columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {columns.map((column) => (
+            <DropdownMenuCheckboxItem
+              key={column.key}
+              checked={shown.has(column.key)}
+              onCheckedChange={() => toggle(column.key)}
+              onSelect={(event) => event.preventDefault()}
+            >
+              {column.label}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/app/components/dashboard/dashboard-header.tsx

@@ -1,78 +1,115 @@
-"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>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { BellIcon, MoonIcon, SunIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { UserAvatar, UserMenuItems, type DashboardUser } from "./user-menu";
+
+export type Theme = "light" | "dark" | "system";
+
+export interface Notice {
+  id: string;
+  title: string;
+  description?: string;
+  href?: string;
+  /** "warning" marks the bell, so it only pulls the eye when something needs doing. */
+  tone?: "info" | "warning";
+}
+
+/** 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, notices = [] }: { user: DashboardUser; initialTheme: Theme; notices?: Notice[] }) {
+  const [theme, setTheme] = useState<Theme>(initialTheme);
+  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  const needsAttention = notices.some((notice) => notice.tone === "warning");
+
+  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">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label={notices.length ? `Notifications (${notices.length})` : "Notifications"} className="relative">
+              <BellIcon />
+              {notices.length > 0 && (
+                <span
+                  aria-hidden="true"
+                  className={cn("absolute top-1.5 right-1.5 size-2 rounded-full ring-2 ring-background", needsAttention ? "bg-warning" : "bg-primary")}
+                />
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-80 p-0">
+            <div className="border-b px-4 py-3 text-sm font-medium">Notifications</div>
+            {notices.length === 0 ? (
+              <p className="px-4 py-6 text-center text-sm text-muted-foreground">Nothing needs you right now.</p>
+            ) : (
+              <ul className="max-h-80 overflow-y-auto">
+                {notices.map((notice) => {
+                  const body = (
+                    <>
+                      <span className="flex items-center gap-2 text-sm font-medium">
+                        <span className={cn("size-1.5 shrink-0 rounded-full", notice.tone === "warning" ? "bg-warning" : "bg-primary")} aria-hidden="true" />
+                        {notice.title}
+                      </span>
+                      {notice.description && <span className="block pl-3.5 text-xs text-muted-foreground">{notice.description}</span>}
+                    </>
+                  );
+                  return (
+                    <li key={notice.id} className="border-b last:border-b-0">
+                      {notice.href ? (
+                        <Link href={notice.href} className="block px-4 py-3 hover:bg-muted">
+                          {body}
+                        </Link>
+                      ) : (
+                        <div className="px-4 py-3">{body}</div>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </PopoverContent>
+        </Popover>
+
+        <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="icon" aria-label="Account" className="rounded-full">
+              <UserAvatar user={user} className="size-7" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-60">
+            <UserMenuItems user={user} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

package/templates/app/components/dashboard/dashboard-sidebar.tsx

@@ -1,11 +1,14 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { ActivityIcon, LayoutDashboardIcon, UserCircleIcon } from "lucide-react";
+import { ChevronsUpDownIcon } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
@@ -13,16 +16,36 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
 } from "@/components/ui/sidebar";
 import { resourceIcon } from "./resource-icon";
+import { UserAvatar, UserMenuItems, type DashboardUser } from "./user-menu";
 
 export interface NavResource {
   name: string;
   pluralLabel: string;
   slug: string;
   icon?: string;
+  /** Heading it sits under, from the descriptor's `group`. */
+  group?: string;
   /** Optional count badge (off by default). */
   badge?: number;
+  /** This person's saved views of the resource, as "?q=…&filter[…]=…". */
+  views?: { id: string; name: string; query: string }[];
+}
+
+/** Resources in the order given, under their headings; ungrouped ones come first. */
+function byGroup(resources: NavResource[]): [string, NavResource[]][] {
+  const groups = new Map<string, NavResource[]>();
+  for (const resource of resources) {
+    const heading = resource.group?.trim() || "Resources";
+    const existing = groups.get(heading);
+    if (existing) existing.push(resource);
+    else groups.set(heading, [resource]);
+  }
+  return [...groups];
 }
 
 /**
@@ -41,6 +64,7 @@ export function DashboardSidebar({
   resources,
   links = [],
   isAdmin = false,
+  user,
 }: {
   appName: string;
   resources: NavResource[];
@@ -48,8 +72,11 @@ export function DashboardSidebar({
   links?: Array<{ label: string; href: string; icon: string }>;
   /** Whether to show the sections that manage the app itself. */
   isAdmin?: boolean;
+  user: DashboardUser;
 }) {
   const pathname = usePathname();
+  // A saved view is the query it was saved with, so the one you're on is the one that matches.
+  const search = useSearchParams().toString();
   const manage = [...ACCOUNT_LINKS, ...(isAdmin ? ADMIN_LINKS : [])];
 
   return (
@@ -85,29 +112,42 @@ export function DashboardSidebar({
           </SidebarGroupContent>
         </SidebarGroup>
 
-        {resources.length > 0 && (
-        <SidebarGroup>
-          <SidebarGroupLabel>Resources</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {resources.map((resource) => {
-                const href = `/dashboard/${resource.slug}`;
-                const Icon = resourceIcon(resource.icon);
-                return (
-                  <SidebarMenuItem key={resource.name}>
-                    <SidebarMenuButton asChild isActive={pathname === href || pathname.startsWith(`${href}/`)} tooltip={resource.pluralLabel}>
-                      <Link href={href}>
-                        <Icon />
-                        <span>{resource.pluralLabel}</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        )}
+        {byGroup(resources).map(([heading, group]) => (
+          <SidebarGroup key={heading}>
+            <SidebarGroupLabel>{heading}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.map((resource) => {
+                  const href = `/dashboard/${resource.slug}`;
+                  const Icon = resourceIcon(resource.icon);
+                  return (
+                    <SidebarMenuItem key={resource.name}>
+                      <SidebarMenuButton asChild isActive={pathname === href || pathname.startsWith(`${href}/`)} tooltip={resource.pluralLabel}>
+                        <Link href={href}>
+                          <Icon />
+                          <span>{resource.pluralLabel}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                      {resource.views && resource.views.length > 0 && (
+                        <SidebarMenuSub>
+                          {resource.views.map((view) => (
+                            <SidebarMenuSubItem key={view.id}>
+                              <SidebarMenuSubButton asChild isActive={pathname === href && search === view.query}>
+                                <Link href={`${href}?${view.query}`}>
+                                  <span>{view.name}</span>
+                                </Link>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      )}
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
 
         <SidebarGroup>
           <SidebarGroupLabel>Manage</SidebarGroupLabel>
@@ -161,6 +201,28 @@ export function DashboardSidebar({
           </SidebarGroup>
         )}
       </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton size="lg" tooltip={user.email}>
+                  <UserAvatar user={user} className="size-8 rounded-md" />
+                  <span className="grid min-w-0 flex-1 text-left leading-tight">
+                    <span className="truncate text-sm font-medium">{user.name || "Signed in"}</span>
+                    <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+                  </span>
+                  <ChevronsUpDownIcon className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="top" align="start" className="w-60">
+                <UserMenuItems user={user} />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
     </Sidebar>
   );
 }

package/templates/app/components/dashboard/dropzone.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useRef, useState, type DragEvent } from "react";
+import { UploadCloudIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  /** Called with the files that were dropped or picked. */
+  onFiles: (files: File[]) => void;
+  /** `accept` for the hidden input, e.g. ".csv,text/csv" or "image/*". */
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** The line under the heading: what this one takes. */
+  hint?: string;
+  label?: string;
+  className?: string;
+  /** Shown inside the zone instead of the prompt, e.g. a preview or a progress bar. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Drop a file, or click to pick one.
+ *
+ * The input stays in the markup and keeps doing the work — it's what makes the keyboard,
+ * screen readers and the file picker behave — while the drop target is the label around
+ * it. Dragging over the page doesn't open the browser's own download of the file because
+ * both dragover and drop are cancelled here.
+ */
+export function Dropzone({ onFiles, accept, multiple = false, disabled, hint, label = "Drop a file here", className, children }: Props) {
+  const input = useRef<HTMLInputElement>(null);
+  const [over, setOver] = useState(false);
+
+  const take = (list: FileList | null) => {
+    const files = [...(list ?? [])];
+    if (files.length > 0) onFiles(multiple ? files : files.slice(0, 1));
+  };
+
+  const stop = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return (
+    <label
+      onDragOver={(event) => {
+        stop(event);
+        if (!disabled) setOver(true);
+      }}
+      onDragLeave={(event) => {
+        stop(event);
+        setOver(false);
+      }}
+      onDrop={(event) => {
+        stop(event);
+        setOver(false);
+        if (!disabled) take(event.dataTransfer.files);
+      }}
+      className={cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors",
+        over ? "border-primary bg-primary/5" : "border-border hover:border-primary/50 hover:bg-muted/50",
+        disabled && "pointer-events-none opacity-60",
+        className,
+      )}
+    >
+      <input
+        ref={input}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="sr-only"
+        onChange={(event) => {
+          take(event.target.files);
+          // Picking the same file twice in a row should still fire a change.
+          event.target.value = "";
+        }}
+      />
+      {children ?? (
+        <>
+          <span className="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+            <UploadCloudIcon className="size-5" />
+          </span>
+          <span className="text-sm font-medium">
+            {label} <span className="text-muted-foreground">or click to choose</span>
+          </span>
+          {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
+        </>
+      )}
+    </label>
+  );
+}

package/templates/app/components/dashboard/editable.ts

@@ -0,0 +1,12 @@
+import type { StoredField } from "@flaredev/core";
+
+/**
+ * Kinds worth editing in place: one control, one value, no picker or upload.
+ *
+ * Kept out of inline-cell.tsx because that file is a client component, and a server
+ * component can't call a function exported from one.
+ */
+export function isInlineEditable(def: StoredField): boolean {
+  if (def.kind === "string") return !def.format;
+  return ["int", "float", "boolean", "enum"].includes(def.kind);
+}