@actuate-media/cms-admin 0.21.1 → 0.22.0

package/src/components/forms/NotificationsPanel.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+/**
+ * Notifications tab of the Form Schema drawer. Persists per-form notification
+ * settings (recipients, reply-to, subject/message templates, field inclusion,
+ * autoresponder). Actual email/webhook delivery + the "send test" action are
+ * wired in a later phase (PR 6); this panel owns the configuration only.
+ */
+import { useEffect, useState } from 'react'
+import * as Switch from '@radix-ui/react-switch'
+import { toast } from 'sonner'
+import {
+  fetchNotificationSettings,
+  updateNotificationSettings,
+  type FormNotificationSettings,
+} from '../../lib/forms-service.js'
+import { emitFormsChanged } from '../../lib/forms-events.js'
+import { FormsErrorState, FormsLoading, btnPrimary } from './primitives.js'
+
+const inputCls =
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function NotificationsPanel({
+  formId,
+  onChanged,
+}: {
+  formId: string
+  /** Called after a successful save so the list can refresh the notify state. */
+  onChanged?: () => void
+}) {
+  const [settings, setSettings] = useState<FormNotificationSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    fetchNotificationSettings(formId)
+      .then((s) => {
+        if (active) setSettings(s)
+      })
+      .catch((e: unknown) => {
+        if (active)
+          setError(e instanceof Error ? e.message : 'Failed to load notification settings')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  function patch(p: Partial<FormNotificationSettings>) {
+    setSettings((cur) => (cur ? { ...cur, ...p } : cur))
+  }
+
+  async function save() {
+    if (!settings) return
+    setSaving(true)
+    const res = await updateNotificationSettings(formId, settings)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) setSettings(res.data)
+    toast.success('Notification settings saved.')
+    emitFormsChanged()
+    onChanged?.()
+  }
+
+  if (loading) return <FormsLoading label="Loading notification settings…" />
+  if (error) return <FormsErrorState message={error} />
+  if (!settings) return null
+
+  return (
+    <div className="space-y-4">
+      <ToggleRow
+        label="Enable notifications"
+        help="Email the recipients below when a new entry arrives."
+        checked={settings.enabled}
+        onChange={(v) => patch({ enabled: v })}
+      />
+
+      <fieldset
+        disabled={!settings.enabled}
+        className="space-y-4 transition-opacity disabled:opacity-50"
+      >
+        <Field label="Recipients" hint="Comma-separated email addresses">
+          <input
+            type="text"
+            value={settings.recipients.join(', ')}
+            onChange={(e) =>
+              patch({
+                recipients: e.target.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              })
+            }
+            placeholder="team@example.com"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field label="Reply-to field key" hint="Field whose value is used as the reply-to address">
+          <input
+            type="text"
+            value={settings.replyToFieldKey ?? ''}
+            onChange={(e) => patch({ replyToFieldKey: e.target.value || null })}
+            placeholder="email"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field label="Subject template">
+          <input
+            type="text"
+            value={settings.subjectTemplate ?? ''}
+            onChange={(e) => patch({ subjectTemplate: e.target.value })}
+            placeholder="New submission from {{name}}"
+            className={inputCls}
+          />
+        </Field>
+
+        <Field label="Message template">
+          <textarea
+            rows={3}
+            value={settings.messageTemplate ?? ''}
+            onChange={(e) => patch({ messageTemplate: e.target.value })}
+            className={inputCls}
+          />
+        </Field>
+
+        <ToggleRow
+          label="Include all fields"
+          help="Append every submitted field to the notification body."
+          checked={settings.includeFields ?? true}
+          onChange={(v) => patch({ includeFields: v })}
+        />
+        <ToggleRow
+          label="Exclude sensitive fields"
+          help="Omit fields marked as sensitive/PII from the email."
+          checked={settings.excludeSensitiveFields ?? false}
+          onChange={(v) => patch({ excludeSensitiveFields: v })}
+        />
+
+        <div className="border-border border-t pt-4">
+          <ToggleRow
+            label="Auto-response email"
+            help="Send a confirmation email back to the submitter."
+            checked={settings.autoresponderEnabled ?? false}
+            onChange={(v) => patch({ autoresponderEnabled: v })}
+          />
+          {settings.autoresponderEnabled && (
+            <div className="mt-3 space-y-3">
+              <Field label="Auto-response subject">
+                <input
+                  type="text"
+                  value={settings.autoresponderSubject ?? ''}
+                  onChange={(e) => patch({ autoresponderSubject: e.target.value })}
+                  className={inputCls}
+                />
+              </Field>
+              <Field label="Auto-response body">
+                <textarea
+                  rows={3}
+                  value={settings.autoresponderBody ?? ''}
+                  onChange={(e) => patch({ autoresponderBody: e.target.value })}
+                  className={inputCls}
+                />
+              </Field>
+            </div>
+          )}
+        </div>
+      </fieldset>
+
+      <p className="text-muted-foreground text-xs">
+        Email &amp; webhook delivery (including the test action) is wired in an upcoming release.
+        Settings saved here apply automatically once delivery is enabled.
+      </p>
+
+      <div className="flex justify-end">
+        <button className={btnPrimary} onClick={save} disabled={saving}>
+          {saving ? 'Saving…' : 'Save notifications'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function ToggleRow({
+  label,
+  help,
+  checked,
+  onChange,
+}: {
+  label: string
+  help: string
+  checked: boolean
+  onChange: (v: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="min-w-0">
+        <span className="text-foreground block text-sm font-medium">{label}</span>
+        <span className="text-muted-foreground block text-sm">{help}</span>
+      </span>
+      <Switch.Root
+        checked={checked}
+        onCheckedChange={onChange}
+        aria-label={label}
+        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
+      >
+        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
+      </Switch.Root>
+    </div>
+  )
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: string
+  children: React.ReactNode
+}) {
+  return (
+    <label className="block">
+      <span className="text-foreground mb-1 block text-sm font-medium">{label}</span>
+      {children}
+      {hint && <span className="text-muted-foreground mt-1 block text-xs">{hint}</span>}
+    </label>
+  )
+}

package/src/components/forms/primitives.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+/**
+ * Shared Forms UI primitives — token-only, accessible building blocks used
+ * across the Forms list, schema drawer, and (later) the entries views. No raw
+ * palette colours: field-type and status hues map onto the theme's semantic
+ * tokens (success / warning / info / destructive / primary / muted) so they
+ * track light/dark mode and brand overrides automatically.
+ */
+import type { ReactNode } from 'react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
+
+// ─── Field-type badges ─────────────────────────────────────────────────────
+
+/** Map a field type onto a semantic colour pair (background + text). */
+function fieldTypeTone(type: FormFieldType): string {
+  switch (type) {
+    case 'email':
+    case 'url':
+    case 'date':
+    case 'number':
+      return 'bg-info/10 text-info'
+    case 'phone':
+    case 'textarea':
+      return 'bg-primary/10 text-primary'
+    case 'select':
+    case 'multiselect':
+    case 'radio':
+      return 'bg-warning/10 text-warning'
+    case 'checkbox':
+    case 'consent':
+      return 'bg-success/10 text-success'
+    case 'file':
+      return 'bg-destructive/10 text-destructive'
+    default:
+      return 'bg-muted text-muted-foreground'
+  }
+}
+
+const FIELD_TYPE_LABELS: Partial<Record<FormFieldType, string>> = {
+  text: 'TEXT',
+  email: 'EMAIL',
+  phone: 'PHONE',
+  textarea: 'TEXTAREA',
+  select: 'SELECT',
+  multiselect: 'MULTI',
+  radio: 'RADIO',
+  checkbox: 'CHECKBOX',
+  date: 'DATE',
+  number: 'NUMBER',
+  url: 'URL',
+  hidden: 'HIDDEN',
+  file: 'FILE',
+  consent: 'CONSENT',
+  richtext: 'CONTENT',
+  divider: 'DIVIDER',
+  honeypot: 'HONEYPOT',
+}
+
+export function FieldTypeBadge({ type }: { type: FormFieldType }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium tracking-wide uppercase ${fieldTypeTone(type)}`}
+    >
+      {FIELD_TYPE_LABELS[type] ?? type}
+    </span>
+  )
+}
+
+// ─── Status badges ─────────────────────────────────────────────────────────
+
+const STATUS_META: Record<FormStatus, { label: string; cls: string; dot: string }> = {
+  active: { label: 'Active', cls: 'bg-success/10 text-success', dot: 'bg-success' },
+  draft: { label: 'Draft', cls: 'bg-warning/10 text-warning', dot: 'bg-warning' },
+  archived: {
+    label: 'Archived',
+    cls: 'bg-muted text-muted-foreground',
+    dot: 'bg-muted-foreground',
+  },
+}
+
+export function FormStatusBadge({ status }: { status: FormStatus }) {
+  const meta = STATUS_META[status] ?? STATUS_META.draft
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.cls}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+      {meta.label}
+    </span>
+  )
+}
+
+/** Small red count badge for unread submissions. Hidden when count is 0. */
+export function UnreadBadge({ count, className = '' }: { count: number; className?: string }) {
+  if (count <= 0) return null
+  return (
+    <span
+      className={`bg-destructive text-destructive-foreground inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums ${className}`}
+      aria-label={`${count} unread`}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  )
+}
+
+// ─── Summary chips ───────────────────────────────────────────────────────
+
+export function SummaryChip({
+  value,
+  label,
+  tone = 'neutral',
+}: {
+  value: ReactNode
+  label: string
+  tone?: 'neutral' | 'success' | 'warning' | 'destructive'
+}) {
+  const valueCls =
+    tone === 'success'
+      ? 'text-success'
+      : tone === 'warning'
+        ? 'text-warning'
+        : tone === 'destructive'
+          ? 'text-destructive'
+          : 'text-foreground'
+  return (
+    <div className="border-border bg-card flex items-baseline gap-1.5 rounded-lg border px-3 py-2">
+      <span className={`text-base font-medium tabular-nums ${valueCls}`}>{value}</span>
+      <span className="text-muted-foreground text-sm">{label}</span>
+    </div>
+  )
+}
+
+// ─── States ──────────────────────────────────────────────────────────────
+
+export function FormsLoading({ label = 'Loading…' }: { label?: string }) {
+  return (
+    <div className="flex h-64 items-center justify-center" role="status" aria-live="polite">
+      <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+      <span className="sr-only">{label}</span>
+    </div>
+  )
+}
+
+export function FormsEmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+}) {
+  return (
+    <div className="border-border flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-12 text-center">
+      {icon && (
+        <div className="text-muted-foreground mb-3" aria-hidden>
+          {icon}
+        </div>
+      )}
+      <h3 className="text-foreground text-base font-medium">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 max-w-md text-sm">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
+
+export function FormsErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
+  return (
+    <div
+      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-3"
+      role="alert"
+    >
+      <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />
+      <span className="text-destructive flex-1 text-sm">{message}</span>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm transition-colors"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ─── Button helpers (token-only) ─────────────────────────────────────────
+
+export const btnPrimary =
+  'inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnSecondary =
+  'inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card px-4 py-2 text-base font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnGhostIcon =
+  'inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'

package/src/layout/Sidebar.tsx

@@ -1,8 +1,10 @@
 'use client'
 
-import { useRef, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useTheme } from '../components/ThemeProvider.js'
+import { fetchFormsSidebarCounts } from '../lib/forms-service.js'
+import { onFormsChanged } from '../lib/forms-events.js'
 import {
   LayoutDashboard,
   FileText,
@@ -175,7 +177,8 @@ export function Sidebar({
   onNavigate,
   config,
 }: SidebarProps) {
-  const navItems = buildNavItems(config)
+  const formsUnread = useFormsUnread()
+  const navItems = applyFormsBadge(buildNavItems(config), formsUnread)
 
   return (
     <aside
@@ -223,6 +226,45 @@ export function Sidebar({
   )
 }
 
+// ─── Dynamic Forms unread badge ───────────────────────────────────────────
+
+/**
+ * Live total of unread submissions across active forms, surfaced on the Forms
+ * nav item. Refreshes on mount and whenever a forms/entries mutation fires the
+ * shared event (mark read, archive, notify toggle, …). Best-effort: a failed
+ * fetch simply leaves the badge unset rather than surfacing an error in nav.
+ */
+function useFormsUnread(): number {
+  const [unread, setUnread] = useState(0)
+
+  useEffect(() => {
+    let active = true
+    const load = () => {
+      fetchFormsSidebarCounts()
+        .then((counts) => {
+          if (active) setUnread(counts.reduce((sum, c) => sum + (c.unread ?? 0), 0))
+        })
+        .catch(() => {
+          /* keep the last known value; nav must never break on a fetch error */
+        })
+    }
+    load()
+    const off = onFormsChanged(load)
+    return () => {
+      active = false
+      off()
+    }
+  }, [])
+
+  return unread
+}
+
+/** Return a copy of the nav tree with the live unread count on the Forms item. */
+function applyFormsBadge(items: NavItem[], unread: number): NavItem[] {
+  if (unread <= 0) return items
+  return items.map((item) => (item.path === '/forms' ? { ...item, badge: unread } : item))
+}
+
 // ─── Rendering ──────────────────────────────────────────────────────────────
 
 interface NavRenderContext {
@@ -384,6 +426,8 @@ function NavLink({
   const Icon = item.icon
   const isActive = isPathActive(ctx.currentPath, item.path)
 
+  const badge = item.badge && item.badge > 0 ? item.badge : 0
+
   const button = (
     <button
       onClick={() => ctx.onNavigate(item.path)}
@@ -397,15 +441,32 @@ function NavLink({
       title={ctx.collapsed ? item.label : ''}
       aria-current={isActive ? 'page' : undefined}
     >
-      {!nested && <Icon className="h-5 w-5 shrink-0" aria-hidden />}
-      {nested && !ctx.collapsed && (
-        <Icon className="text-sidebar-foreground/60 h-4 w-4 shrink-0" aria-hidden />
-      )}
+      <span className="relative flex shrink-0 items-center">
+        {!nested && <Icon className="h-5 w-5 shrink-0" aria-hidden />}
+        {nested && !ctx.collapsed && (
+          <Icon className="text-sidebar-foreground/60 h-4 w-4 shrink-0" aria-hidden />
+        )}
+        {/* Collapsed rail: a dot signals unread without room for a number. */}
+        {ctx.collapsed && badge > 0 && (
+          <span
+            className="bg-destructive absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full"
+            aria-hidden
+          />
+        )}
+      </span>
       {!ctx.collapsed && (
         <span className={`truncate font-medium ${nested ? 'text-[13px]' : 'text-sm'}`}>
           {item.label}
         </span>
       )}
+      {!ctx.collapsed && badge > 0 && (
+        <span
+          className="bg-destructive text-destructive-foreground ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
+          aria-label={`${badge} unread`}
+        >
+          {badge > 99 ? '99+' : badge}
+        </span>
+      )}
     </button>
   )
 
@@ -561,6 +622,11 @@ export interface NavItem {
   group?: string
   /** Indented children rendered immediately after this item. */
   children?: NavItem[]
+  /**
+   * Optional unread/notification count. Rendered as a red pill (expanded)
+   * or a dot (collapsed). Falsy / zero values render nothing.
+   */
+  badge?: number
 }
 
 /**

package/src/lib/forms-events.ts

@@ -0,0 +1,32 @@
+/**
+ * Forms event bus — a minimal pub/sub so views that mutate submission state
+ * (mark read/unread, star, archive) or form state (create, notify toggle,
+ * archive) can tell the sidebar to refresh its unread badges immediately,
+ * without threading a refresh callback through the whole component tree.
+ *
+ * Deliberately tiny and dependency-free: one event, synchronous fan-out,
+ * SSR-safe. Subscribers must unsubscribe on unmount via the returned
+ * disposer to avoid leaks.
+ */
+type Listener = () => void
+
+const listeners = new Set<Listener>()
+
+/** Subscribe to "forms data changed" notifications. Returns an unsubscribe fn. */
+export function onFormsChanged(listener: Listener): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+/** Notify all subscribers that forms/submission counts may have changed. */
+export function emitFormsChanged(): void {
+  for (const listener of listeners) {
+    try {
+      listener()
+    } catch {
+      // A misbehaving subscriber must not break sibling subscribers.
+    }
+  }
+}