create-nextblock 0.14.0 → 0.14.2

package/templates/nextblock-template/app/cms/components/FeedbackModal.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useAuth } from '../../../context/AuthContext';
 import { usePathname } from "next/navigation"
 import { toast } from "react-hot-toast"
@@ -29,18 +29,18 @@ interface FeedbackModalProps {
   sidebarOpen?: boolean
 }
 
-export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
-  const [mounted, setMounted] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [subject, setSubject] = useState("suggestion")
+export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
+  const [mounted, setMounted] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [subject, setSubject] = useState("suggestion")
   const [message, setMessage] = useState("")
-  const { user, profile } = useAuth()
-  const pathname = usePathname()
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+  const { user, profile } = useAuth()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -73,30 +73,30 @@ export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
     } finally {
       setLoading(false)
     }
-  }
-
-  const trigger = (
-    <button
-      className={cn(
-        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
-        "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
-      )}
-      type="button"
-    >
-      <MessageSquarePlus className="h-5 w-5" />
-      {sidebarOpen && <span>Feedback</span>}
-    </button>
-  )
-
-  if (!mounted) {
-    return trigger
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        {trigger}
-      </DialogTrigger>
+  }
+
+  const trigger = (
+    <button
+      className={cn(
+        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
+        "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
+      )}
+      type="button"
+    >
+      <MessageSquarePlus className="h-5 w-5" />
+      {sidebarOpen && <span>Feedback</span>}
+    </button>
+  )
+
+  if (!mounted) {
+    return trigger
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger}
+      </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Send Feedback</DialogTitle>

package/templates/nextblock-template/app/cms/components/SystemAlertsBanner.tsx

@@ -1,112 +1,112 @@
-'use client';
-
-import { useState, useTransition } from 'react';
-import { AlertTriangle, ArrowUpCircle, ExternalLink, X } from 'lucide-react';
-import { Button } from '@nextblock-cms/ui';
-import { resolveSystemAlert } from './system-alerts-actions';
-
-export interface SystemAlertItem {
-  id: string;
-  alert_type: string;
-  title: string;
-  message: string;
-  metadata: Record<string, unknown> | null;
-}
-
-function readString(metadata: Record<string, unknown> | null, key: string): string | undefined {
-  const value = metadata?.[key];
-  return typeof value === 'string' && value.length > 0 ? value : undefined;
-}
-
-/**
- * Dashboard banner for unresolved system_alerts. High-visibility, developer-facing:
- *   - merge_conflict           -> amber, links to GitHub to resolve the sync (Track A).
- *   - runtime_update_available -> indigo, links to the release download (Track B).
- * Dismissing persists is_resolved=true (ADMIN-only via RLS) and hides the alert.
- */
-export default function SystemAlertsBanner({ alerts }: { alerts: SystemAlertItem[] }) {
-  const [dismissed, setDismissed] = useState<Set<string>>(new Set());
-  const [isPending, startTransition] = useTransition();
-
-  const visible = alerts.filter((a) => !dismissed.has(a.id));
-  if (visible.length === 0) return null;
-
-  const dismiss = (id: string) => {
-    setDismissed((prev) => new Set(prev).add(id));
-    startTransition(() => {
-      void resolveSystemAlert(id);
-    });
-  };
-
-  return (
-    <div className="mb-6 flex flex-col gap-3">
-      {visible.map((alert) => {
-        const isConflict = alert.alert_type === 'merge_conflict';
-        const Icon = isConflict ? AlertTriangle : ArrowUpCircle;
-
-        const tone = isConflict
-          ? 'border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200'
-          : 'border-indigo-300 bg-indigo-50 text-indigo-900 dark:border-indigo-700/60 dark:bg-indigo-900/20 dark:text-indigo-200';
-        const ctaBorder = isConflict
-          ? 'border-amber-400 dark:border-amber-600'
-          : 'border-indigo-400 dark:border-indigo-600';
-
-        // Track A (conflict) deep-links to GitHub; Track B (update) to the download.
-        const primaryHref = isConflict
-          ? readString(alert.metadata, 'action_url')
-          : readString(alert.metadata, 'download_url');
-        const primaryLabel = isConflict ? 'Resolve on GitHub' : 'Download latest';
-        const secondaryHref = isConflict
-          ? readString(alert.metadata, 'run_url')
-          : readString(alert.metadata, 'html_url');
-        const secondaryLabel = isConflict ? 'View workflow run' : 'Release notes';
-
-        return (
-          <div
-            key={alert.id}
-            className={`flex items-start gap-3 rounded-lg border px-4 py-3 ${tone}`}
-            role="alert"
-          >
-            <Icon className="mt-0.5 h-5 w-5 shrink-0" />
-            <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium">{alert.title}</p>
-              <p className="text-xs opacity-90">{alert.message}</p>
-              {(primaryHref || secondaryHref) && (
-                <div className="mt-2 flex flex-wrap items-center gap-2">
-                  {primaryHref && (
-                    <Button asChild size="sm" variant="outline" className={ctaBorder}>
-                      <a href={primaryHref} target="_blank" rel="noopener noreferrer">
-                        {primaryLabel}
-                        <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
-                      </a>
-                    </Button>
-                  )}
-                  {secondaryHref && (
-                    <a
-                      href={secondaryHref}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-xs font-medium underline underline-offset-2 opacity-80 hover:opacity-100"
-                    >
-                      {secondaryLabel}
-                    </a>
-                  )}
-                </div>
-              )}
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => dismiss(alert.id)}
-              disabled={isPending}
-              aria-label="Dismiss alert"
-              className="h-8 w-8 shrink-0"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useTransition } from 'react';
+import { AlertTriangle, ArrowUpCircle, ExternalLink, X } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { resolveSystemAlert } from './system-alerts-actions';
+
+export interface SystemAlertItem {
+  id: string;
+  alert_type: string;
+  title: string;
+  message: string;
+  metadata: Record<string, unknown> | null;
+}
+
+function readString(metadata: Record<string, unknown> | null, key: string): string | undefined {
+  const value = metadata?.[key];
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+/**
+ * Dashboard banner for unresolved system_alerts. High-visibility, developer-facing:
+ *   - merge_conflict           -> amber, links to GitHub to resolve the sync (Track A).
+ *   - runtime_update_available -> indigo, links to the release download (Track B).
+ * Dismissing persists is_resolved=true (ADMIN-only via RLS) and hides the alert.
+ */
+export default function SystemAlertsBanner({ alerts }: { alerts: SystemAlertItem[] }) {
+  const [dismissed, setDismissed] = useState<Set<string>>(new Set());
+  const [isPending, startTransition] = useTransition();
+
+  const visible = alerts.filter((a) => !dismissed.has(a.id));
+  if (visible.length === 0) return null;
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => new Set(prev).add(id));
+    startTransition(() => {
+      void resolveSystemAlert(id);
+    });
+  };
+
+  return (
+    <div className="mb-6 flex flex-col gap-3">
+      {visible.map((alert) => {
+        const isConflict = alert.alert_type === 'merge_conflict';
+        const Icon = isConflict ? AlertTriangle : ArrowUpCircle;
+
+        const tone = isConflict
+          ? 'border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200'
+          : 'border-indigo-300 bg-indigo-50 text-indigo-900 dark:border-indigo-700/60 dark:bg-indigo-900/20 dark:text-indigo-200';
+        const ctaBorder = isConflict
+          ? 'border-amber-400 dark:border-amber-600'
+          : 'border-indigo-400 dark:border-indigo-600';
+
+        // Track A (conflict) deep-links to GitHub; Track B (update) to the download.
+        const primaryHref = isConflict
+          ? readString(alert.metadata, 'action_url')
+          : readString(alert.metadata, 'download_url');
+        const primaryLabel = isConflict ? 'Resolve on GitHub' : 'Download latest';
+        const secondaryHref = isConflict
+          ? readString(alert.metadata, 'run_url')
+          : readString(alert.metadata, 'html_url');
+        const secondaryLabel = isConflict ? 'View workflow run' : 'Release notes';
+
+        return (
+          <div
+            key={alert.id}
+            className={`flex items-start gap-3 rounded-lg border px-4 py-3 ${tone}`}
+            role="alert"
+          >
+            <Icon className="mt-0.5 h-5 w-5 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium">{alert.title}</p>
+              <p className="text-xs opacity-90">{alert.message}</p>
+              {(primaryHref || secondaryHref) && (
+                <div className="mt-2 flex flex-wrap items-center gap-2">
+                  {primaryHref && (
+                    <Button asChild size="sm" variant="outline" className={ctaBorder}>
+                      <a href={primaryHref} target="_blank" rel="noopener noreferrer">
+                        {primaryLabel}
+                        <ExternalLink className="ml-1.5 h-3.5 w-3.5" />
+                      </a>
+                    </Button>
+                  )}
+                  {secondaryHref && (
+                    <a
+                      href={secondaryHref}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs font-medium underline underline-offset-2 opacity-80 hover:opacity-100"
+                    >
+                      {secondaryLabel}
+                    </a>
+                  )}
+                </div>
+              )}
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => dismiss(alert.id)}
+              disabled={isPending}
+              aria-label="Dismiss alert"
+              className="h-8 w-8 shrink-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/TwoFactorReminderBanner.tsx

@@ -1,45 +1,45 @@
-'use client';
-
-import Link from 'next/link';
-import { useState } from 'react';
-import { Button } from '@nextblock-cms/ui';
-import { ShieldAlert, X } from 'lucide-react';
-
-/**
- * In-app reminder for staff (ADMIN/WRITER) who have not enrolled a second factor,
- * shown when the "Encourage staff to enable 2FA" policy is on. Dismissible for the
- * session (state lives in the persistent CMS layout, so it survives client-side
- * navigation but reappears on the next full load until 2FA is set up).
- */
-export default function TwoFactorReminderBanner() {
-  const [dismissed, setDismissed] = useState(false);
-  if (dismissed) return null;
-
-  return (
-    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
-      <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0" />
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium">
-          Your account doesn&rsquo;t have two-factor authentication enabled.
-        </p>
-        <p className="text-xs opacity-90">
-          Protect your CMS account by adding a second factor (authenticator app or email code).
-        </p>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <Button asChild size="sm" variant="outline" className="border-amber-400">
-          <Link href="/cms/settings/security">Set up 2FA</Link>
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setDismissed(true)}
-          aria-label="Dismiss for now"
-          className="h-8 w-8"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@nextblock-cms/ui';
+import { ShieldAlert, X } from 'lucide-react';
+
+/**
+ * In-app reminder for staff (ADMIN/WRITER) who have not enrolled a second factor,
+ * shown when the "Encourage staff to enable 2FA" policy is on. Dismissible for the
+ * session (state lives in the persistent CMS layout, so it survives client-side
+ * navigation but reappears on the next full load until 2FA is set up).
+ */
+export default function TwoFactorReminderBanner() {
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+
+  return (
+    <div className="mb-6 flex items-start gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-700/60 dark:bg-amber-900/20 dark:text-amber-200">
+      <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium">
+          Your account doesn&rsquo;t have two-factor authentication enabled.
+        </p>
+        <p className="text-xs opacity-90">
+          Protect your CMS account by adding a second factor (authenticator app or email code).
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button asChild size="sm" variant="outline" className="border-amber-400">
+          <Link href="/cms/settings/security">Set up 2FA</Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setDismissed(true)}
+          aria-label="Dismiss for now"
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/github-connect-actions.ts

@@ -1,102 +1,102 @@
-'use server';
-
-import { cookies } from 'next/headers';
-import { revalidatePath } from 'next/cache';
-import { createClient } from '@nextblock-cms/db/server';
-import {
-  startDeviceFlow,
-  pollDeviceFlowOnce,
-  installSyncWorkflow,
-} from '../../../lib/updates/github-device';
-import { markSyncWorkflowInstalled } from '../../../lib/updates/check-upstream';
-
-const DEVICE_COOKIE = 'nb_gh_device';
-
-/** ADMIN gate, mirroring the rest of the CMS server entry points. */
-async function isAdmin(): Promise<boolean> {
-  const supabase = createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-  if (!user) return false;
-  const { data: profile, error } = await supabase
-    .from('profiles')
-    .select('role')
-    .eq('id', user.id)
-    .single();
-  return !error && profile?.role === 'ADMIN';
-}
-
-export interface StartConnectResult {
-  ok: boolean;
-  userCode?: string;
-  verificationUri?: string;
-  interval?: number;
-  expiresIn?: number;
-  error?: string;
-}
-
-/** Begin the device flow; stash the device code in an httpOnly cookie for polling. */
-export async function startGithubConnect(): Promise<StartConnectResult> {
-  if (!(await isAdmin())) return { ok: false, error: 'Administrator role required.' };
-
-  try {
-    const flow = await startDeviceFlow();
-    const store = await cookies();
-    store.set(DEVICE_COOKIE, flow.deviceCode, {
-      httpOnly: true,
-      secure: process.env.NODE_ENV === 'production',
-      sameSite: 'lax',
-      path: '/cms',
-      maxAge: flow.expiresIn,
-    });
-    return {
-      ok: true,
-      userCode: flow.userCode,
-      verificationUri: flow.verificationUri,
-      interval: flow.interval,
-      expiresIn: flow.expiresIn,
-    };
-  } catch (caught) {
-    return { ok: false, error: caught instanceof Error ? caught.message : 'Could not start GitHub connect.' };
-  }
-}
-
-export type PollConnectResult =
-  | { status: 'installed'; htmlUrl?: string }
-  | { status: 'pending'; slowDown?: boolean }
-  | { status: 'error'; error: string };
-
-/** Poll once; on authorization, install the workflow and clear the device cookie. */
-export async function pollGithubConnect(): Promise<PollConnectResult> {
-  if (!(await isAdmin())) return { status: 'error', error: 'Administrator role required.' };
-
-  const store = await cookies();
-  const deviceCode = store.get(DEVICE_COOKIE)?.value;
-  if (!deviceCode) {
-    return { status: 'error', error: 'Connect session expired — start again.' };
-  }
-
-  const poll = await pollDeviceFlowOnce(deviceCode);
-
-  if (poll.status === 'pending') return { status: 'pending', slowDown: poll.slowDown };
-
-  if (poll.status === 'authorized') {
-    const install = await installSyncWorkflow(poll.token);
-    store.delete({ name: DEVICE_COOKIE, path: '/cms' });
-    if (install.ok) {
-      // We just installed the workflow — flip the onboarding state now instead of waiting
-      // for the throttled background poll / GitHub's registration lag.
-      await markSyncWorkflowInstalled();
-      revalidatePath('/cms', 'layout');
-      return { status: 'installed', htmlUrl: install.htmlUrl };
-    }
-    return { status: 'error', error: install.error ?? 'Could not install the workflow.' };
-  }
-
-  // expired / denied / error — clear the session.
-  store.delete({ name: DEVICE_COOKIE, path: '/cms' });
-  if (poll.status === 'expired') return { status: 'error', error: 'Authorization timed out — start again.' };
-  if (poll.status === 'denied') return { status: 'error', error: 'Authorization was declined.' };
-  return { status: 'error', error: poll.error };
-}
+'use server';
+
+import { cookies } from 'next/headers';
+import { revalidatePath } from 'next/cache';
+import { createClient } from '@nextblock-cms/db/server';
+import {
+  startDeviceFlow,
+  pollDeviceFlowOnce,
+  installSyncWorkflow,
+} from '../../../lib/updates/github-device';
+import { markSyncWorkflowInstalled } from '../../../lib/updates/check-upstream';
+
+const DEVICE_COOKIE = 'nb_gh_device';
+
+/** ADMIN gate, mirroring the rest of the CMS server entry points. */
+async function isAdmin(): Promise<boolean> {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return false;
+  const { data: profile, error } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+  return !error && profile?.role === 'ADMIN';
+}
+
+export interface StartConnectResult {
+  ok: boolean;
+  userCode?: string;
+  verificationUri?: string;
+  interval?: number;
+  expiresIn?: number;
+  error?: string;
+}
+
+/** Begin the device flow; stash the device code in an httpOnly cookie for polling. */
+export async function startGithubConnect(): Promise<StartConnectResult> {
+  if (!(await isAdmin())) return { ok: false, error: 'Administrator role required.' };
+
+  try {
+    const flow = await startDeviceFlow();
+    const store = await cookies();
+    store.set(DEVICE_COOKIE, flow.deviceCode, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/cms',
+      maxAge: flow.expiresIn,
+    });
+    return {
+      ok: true,
+      userCode: flow.userCode,
+      verificationUri: flow.verificationUri,
+      interval: flow.interval,
+      expiresIn: flow.expiresIn,
+    };
+  } catch (caught) {
+    return { ok: false, error: caught instanceof Error ? caught.message : 'Could not start GitHub connect.' };
+  }
+}
+
+export type PollConnectResult =
+  | { status: 'installed'; htmlUrl?: string }
+  | { status: 'pending'; slowDown?: boolean }
+  | { status: 'error'; error: string };
+
+/** Poll once; on authorization, install the workflow and clear the device cookie. */
+export async function pollGithubConnect(): Promise<PollConnectResult> {
+  if (!(await isAdmin())) return { status: 'error', error: 'Administrator role required.' };
+
+  const store = await cookies();
+  const deviceCode = store.get(DEVICE_COOKIE)?.value;
+  if (!deviceCode) {
+    return { status: 'error', error: 'Connect session expired — start again.' };
+  }
+
+  const poll = await pollDeviceFlowOnce(deviceCode);
+
+  if (poll.status === 'pending') return { status: 'pending', slowDown: poll.slowDown };
+
+  if (poll.status === 'authorized') {
+    const install = await installSyncWorkflow(poll.token);
+    store.delete({ name: DEVICE_COOKIE, path: '/cms' });
+    if (install.ok) {
+      // We just installed the workflow — flip the onboarding state now instead of waiting
+      // for the throttled background poll / GitHub's registration lag.
+      await markSyncWorkflowInstalled();
+      revalidatePath('/cms', 'layout');
+      return { status: 'installed', htmlUrl: install.htmlUrl };
+    }
+    return { status: 'error', error: install.error ?? 'Could not install the workflow.' };
+  }
+
+  // expired / denied / error — clear the session.
+  store.delete({ name: DEVICE_COOKIE, path: '/cms' });
+  if (poll.status === 'expired') return { status: 'error', error: 'Authorization timed out — start again.' };
+  if (poll.status === 'denied') return { status: 'error', error: 'Authorization was declined.' };
+  return { status: 'error', error: poll.error };
+}