convex-cms 0.0.15 → 0.0.16

package/admin/src/components/ContentTypeFormModal.tsx

@@ -1,20 +1,20 @@
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { useMutation } from "convex/react";
-import { useApi } from "~/embed/contexts/ApiContext";
-import type { FieldType, ContentType } from "~/lib/cmsExports";
-import { CmsDialog } from "~/components/cmsds/CmsDialog";
-import { CmsButton } from "~/components/cmsds/CmsButton";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
-import { Textarea } from "~/components/ui/textarea";
-import { Checkbox } from "~/components/ui/checkbox";
+import { useApi } from "../embed/contexts/ApiContext";
+import type { FieldType, ContentType } from "../lib/cmsExports";
+import { CmsDialog } from "./cmsds/CmsDialog";
+import { CmsButton } from "./cmsds/CmsButton";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { Checkbox } from "./ui/checkbox";
 import {
 	Select,
 	SelectContent,
 	SelectItem,
 	SelectTrigger,
 	SelectValue,
-} from "~/components/ui/select";
+} from "./ui/select";
 import {
 	Plus,
 	X,
@@ -33,8 +33,9 @@ import {
 	Tag,
 	FolderOpen,
 	Code2,
+	DollarSign,
 } from "lucide-react";
-import { cn } from "~/lib/cn";
+import { cn } from "../lib/cn";
 import { BreakingChangesWarningDialog } from "./BreakingChangesWarningDialog";
 
 interface SelectOption {
@@ -133,6 +134,16 @@ const FIELD_TYPE_INFO: Record<
 		icon: <FolderOpen className="size-4" />,
 		description: "Taxonomy category selection",
 	},
+	money: {
+		label: "Money",
+		icon: <DollarSign className="size-4" />,
+		description: "Currency amount in minor units",
+	},
+	arrayObject: {
+		label: "Array of Objects",
+		icon: <List className="size-4" />,
+		description: "Repeatable structured items",
+	},
 };
 
 interface ContentTypeFormModalProps {
@@ -555,11 +566,11 @@ export function ContentTypeFormModal({
 					)
 				}
 			>
-				<form onSubmit={handleSubmit} className="space-y-6">
+				<form onSubmit={handleSubmit} className="flex flex-col gap-6">
 					{isCodeDefined && (
 						<div className="flex items-start gap-3 rounded-lg border border-violet-200 bg-violet-50 p-3">
 							<Code2 className="mt-0.5 size-5 shrink-0 text-violet-600" />
-							<div className="space-y-1">
+							<div className="flex flex-col gap-1">
 								<p className="text-sm font-medium text-violet-900">
 									Managed by Code
 								</p>
@@ -573,12 +584,12 @@ export function ContentTypeFormModal({
 					)}
 
 					{/* Basic Info Section */}
-					<div className="space-y-4">
+					<div className="flex flex-col gap-4">
 						<h4 className="text-sm font-semibold text-foreground">
 							Basic Information
 						</h4>
 
-						<div className="space-y-2">
+						<div className="flex flex-col gap-2">
 							<Label htmlFor="displayName">
 								Display Name <span className="text-destructive">*</span>
 							</Label>
@@ -593,7 +604,7 @@ export function ContentTypeFormModal({
 							/>
 						</div>
 
-						<div className="space-y-2">
+						<div className="flex flex-col gap-2">
 							<Label htmlFor="machineName">
 								System Name <span className="text-destructive">*</span>
 							</Label>
@@ -617,7 +628,7 @@ export function ContentTypeFormModal({
 							</p>
 						</div>
 
-						<div className="space-y-2">
+						<div className="flex flex-col gap-2">
 							<Label htmlFor="description">Description</Label>
 							<Textarea
 								id="description"
@@ -643,7 +654,7 @@ export function ContentTypeFormModal({
 					</div>
 
 					{/* Fields Section */}
-					<div className="space-y-4">
+					<div className="flex flex-col gap-4">
 						<div className="flex items-center justify-between">
 							<h4 className="text-sm font-semibold text-foreground">Fields</h4>
 							{!isReadOnly && (
@@ -661,7 +672,7 @@ export function ContentTypeFormModal({
 							)}
 						</div>
 
-						<div className="space-y-2">
+						<div className="flex flex-col gap-2">
 							{fields.map((field, index) => (
 								<div
 									key={index}
@@ -760,8 +771,8 @@ export function ContentTypeFormModal({
 									</button>
 								</div>
 
-								<div className="space-y-4">
-									<div className="space-y-2">
+								<div className="flex flex-col gap-4">
+									<div className="flex flex-col gap-2">
 										<Label htmlFor="fieldLabel">
 											Label <span className="text-destructive">*</span>
 										</Label>
@@ -782,7 +793,7 @@ export function ContentTypeFormModal({
 										/>
 									</div>
 
-									<div className="space-y-2">
+									<div className="flex flex-col gap-2">
 										<Label htmlFor="fieldName">
 											Name <span className="text-destructive">*</span>
 										</Label>
@@ -801,7 +812,7 @@ export function ContentTypeFormModal({
 										/>
 									</div>
 
-									<div className="space-y-2">
+									<div className="flex flex-col gap-2">
 										<Label htmlFor="fieldType">
 											Type <span className="text-destructive">*</span>
 										</Label>
@@ -850,7 +861,7 @@ export function ContentTypeFormModal({
 										</Label>
 									</div>
 
-									<div className="space-y-2">
+									<div className="flex flex-col gap-2">
 										<Label htmlFor="fieldDescription">Help Text</Label>
 										<Input
 											id="fieldDescription"
@@ -884,12 +895,12 @@ export function ContentTypeFormModal({
 
 					{/* Display Settings */}
 					{textFields.length > 0 && (
-						<div className="space-y-4">
+						<div className="flex flex-col gap-4">
 							<h4 className="text-sm font-semibold text-foreground">
 								Display Settings
 							</h4>
 
-							<div className="space-y-2">
+							<div className="flex flex-col gap-2">
 								<Label htmlFor="titleField">Title Field</Label>
 								<Select
 									value={titleField || "none"}
@@ -913,7 +924,7 @@ export function ContentTypeFormModal({
 								</p>
 							</div>
 
-							<div className="space-y-2">
+							<div className="flex flex-col gap-2">
 								<Label htmlFor="slugField">Slug Field</Label>
 								<Select
 									value={slugField || "none"}
@@ -993,11 +1004,11 @@ function SelectOptionsEditor({
 	};
 
 	return (
-		<div className="space-y-2">
+		<div className="flex flex-col gap-2">
 			<Label>
 				Options <span className="text-destructive">*</span>
 			</Label>
-			<div className="space-y-2">
+			<div className="flex flex-col gap-2">
 				{options.map((option, index) => (
 					<div key={index} className="flex items-center gap-2">
 						<Input

package/admin/src/components/FieldGroupSection.tsx

@@ -0,0 +1,178 @@
+import { useState } from 'react'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './ui/collapsible'
+import { FieldRenderer } from './fields/FieldRenderer'
+import type { FieldDefinition, FieldError } from './fields/types'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../lib/cn'
+
+export interface FieldGroup {
+  name: string
+  label: string
+  fields: FieldDefinition[]
+}
+
+interface FieldGroupSectionProps {
+  group: FieldGroup
+  formData: Record<string, unknown>
+  fieldErrors: Record<string, FieldError | undefined>
+  isSubmitting: boolean
+  onFieldChange: (fieldName: string, value: unknown) => void
+  initialOpen?: boolean
+}
+
+/**
+ * Determines if a field is "compact" — boolean toggles and simple numbers
+ * that can be rendered side-by-side in a 2-column grid.
+ */
+function isCompactField(field: FieldDefinition): boolean {
+  if (field.type === 'boolean') return true
+  if (field.type === 'number' && !field.description) return true
+  return false
+}
+
+/**
+ * Groups consecutive compact fields into pairs for grid layout,
+ * while keeping non-compact fields full-width.
+ */
+function layoutFields(
+  fields: FieldDefinition[]
+): Array<{ type: 'full'; field: FieldDefinition } | { type: 'grid'; fields: FieldDefinition[] }> {
+  const layout: Array<
+    { type: 'full'; field: FieldDefinition } | { type: 'grid'; fields: FieldDefinition[] }
+  > = []
+
+  let compactBatch: FieldDefinition[] = []
+
+  function flushCompactBatch() {
+    if (compactBatch.length > 0) {
+      layout.push({ type: 'grid', fields: compactBatch })
+      compactBatch = []
+    }
+  }
+
+  for (const field of fields) {
+    if (isCompactField(field)) {
+      compactBatch.push(field)
+    } else {
+      flushCompactBatch()
+      layout.push({ type: 'full', field })
+    }
+  }
+  flushCompactBatch()
+
+  return layout
+}
+
+export function FieldGroupSection({
+  group,
+  formData,
+  fieldErrors,
+  isSubmitting,
+  onFieldChange,
+  initialOpen = false,
+}: FieldGroupSectionProps) {
+  const [isOpen, setIsOpen] = useState(initialOpen)
+
+  const errorCount = group.fields.filter((f) => fieldErrors[f.name]).length
+  const layout = layoutFields(group.fields)
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'flex w-full items-center justify-between rounded-lg px-4 py-2.5 text-left transition-colors',
+            'bg-muted/40 hover:bg-muted/60',
+            errorCount > 0 && 'ring-1 ring-destructive/20'
+          )}
+        >
+          <span className="text-sm font-semibold tracking-tight text-foreground">
+            {group.label}
+          </span>
+          <div className="flex items-center gap-2">
+            {errorCount > 0 && (
+              <span className="rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive">
+                {errorCount}
+              </span>
+            )}
+            <ChevronDown
+              className={cn(
+                'size-4 text-muted-foreground transition-transform duration-200',
+                isOpen && 'rotate-180'
+              )}
+            />
+          </div>
+        </button>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <div className="flex flex-col gap-4 px-1 pt-4">
+          {layout.map((item, i) => {
+            if (item.type === 'grid') {
+              return (
+                <div key={`grid-${i}`} className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  {item.fields.map((field) => (
+                    <FieldRenderer
+                      key={field.name}
+                      field={field}
+                      value={formData[field.name]}
+                      onChange={(value) => onFieldChange(field.name, value)}
+                      error={fieldErrors[field.name]}
+                      disabled={isSubmitting}
+                    />
+                  ))}
+                </div>
+              )
+            }
+            return (
+              <FieldRenderer
+                key={item.field.name}
+                field={item.field}
+                value={formData[item.field.name]}
+                onChange={(value) => onFieldChange(item.field.name, value)}
+                error={fieldErrors[item.field.name]}
+                disabled={isSubmitting}
+              />
+            )
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+/**
+ * Groups fields by their `group` property.
+ * Fields without a group go into a "__default__" group.
+ * Groups appear in the order they're first encountered.
+ */
+export function groupFields(fields: FieldDefinition[]): FieldGroup[] {
+  const groups: FieldGroup[] = []
+  const map = new Map<string, FieldGroup>()
+
+  for (const field of fields) {
+    const key = field.group ?? '__default__'
+    if (!map.has(key)) {
+      const group: FieldGroup = {
+        name: key,
+        label:
+          key === '__default__'
+            ? 'General'
+            : key
+                .replace(/[_-]/g, ' ')
+                .replace(/\b\w/g, (c) => c.toUpperCase()),
+        fields: [],
+      }
+      map.set(key, group)
+      groups.push(group)
+    }
+    map.get(key)!.fields.push(field)
+  }
+
+  return groups
+}

package/admin/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useRouterState, useNavigate, Link } from '@tanstack/react-router'
-import { useAuth, useAdminConfig, useBreadcrumbContext } from '~/contexts'
-import { getRole } from '~/lib/cmsExports'
+import { useAuth, useAdminConfig, useBreadcrumbContext } from '../contexts'
+import { getRole } from '../lib/cmsExports'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -8,7 +8,9 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '~/components/ui/breadcrumb'
+} from './ui/breadcrumb'
+import { SidebarTrigger } from './ui/sidebar'
+import { Separator } from './ui/separator'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,14 +18,14 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu'
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
-import { Button } from '~/components/ui/button'
+} from './ui/dropdown-menu'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { Button } from './ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '~/components/ui/popover'
+} from './ui/popover'
 import {
   Bell,
   HelpCircle,
@@ -37,7 +39,7 @@ import {
   Code,
   MessageSquare,
 } from 'lucide-react'
-import { cn as _cn } from '~/lib/cn'
+import { cn as _cn } from '../lib/cn'
 import { Fragment } from 'react'
 
 interface BreadcrumbData {
@@ -158,6 +160,10 @@ export function Header() {
 
   return (
     <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background/95 px-6 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex items-center gap-2">
+        <SidebarTrigger className="md:hidden" />
+        <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4 md:hidden" />
+      </div>
       <Breadcrumb>
         <BreadcrumbList>
           {breadcrumbs.map((crumb, index) => (
@@ -211,10 +217,10 @@ export function Header() {
             <div className="pb-2">
               <h4 className="font-medium">Help & Resources</h4>
             </div>
-            <div className="space-y-4">
+            <div className="flex flex-col gap-4">
               <div>
                 <h5 className="mb-2 text-xs font-medium text-muted-foreground">Keyboard Shortcuts</h5>
-                <div className="space-y-1">
+                <div className="flex flex-col gap-1">
                   {KEYBOARD_SHORTCUTS.map((shortcut, index) => (
                     <div key={index} className="flex items-center justify-between text-sm">
                       <span className="text-muted-foreground">{shortcut.description}</span>
@@ -234,7 +240,7 @@ export function Header() {
               </div>
               <div>
                 <h5 className="mb-2 text-xs font-medium text-muted-foreground">Resources</h5>
-                <div className="space-y-1">
+                <div className="flex flex-col gap-1">
                   {HELP_RESOURCES.map((resource) => (
                     <a
                       key={resource.label}
@@ -267,7 +273,7 @@ export function Header() {
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
             <DropdownMenuLabel className="font-normal">
-              <div className="flex flex-col space-y-1">
+              <div className="flex flex-col gap-1">
                 <p className="text-sm font-medium">{userDisplayName}</p>
                 {user?.email && (
                   <p className="text-xs text-muted-foreground">{user.email}</p>

package/admin/src/components/RouteGuard.tsx

@@ -27,7 +27,7 @@
 
 import type { ReactNode } from 'react';
 import { useAuth, type PermissionCheck } from '../contexts/AuthContext';
-import type { RoleName } from '~/lib/cmsExports';
+import type { RoleName } from '../lib/cmsExports';
 import { Loader2 } from 'lucide-react';
 
 // =============================================================================

package/admin/src/components/SchemaDriftWarning.tsx

@@ -6,10 +6,10 @@
  */
 
 import { useQuery, useMutation } from "convex/react";
-import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
-import { Button } from "~/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
 import { AlertTriangle, RefreshCw, XCircle, AlertCircle } from "lucide-react";
-import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
+import type { CmsAdminApi } from "../embed/contexts/ApiContext";
 import { useState } from "react";
 
 interface DriftIssue {
@@ -31,6 +31,7 @@ export function SchemaDriftWarning({ api }: SchemaDriftWarningProps) {
 	const [syncResult, setSyncResult] = useState<{
 		created: number;
 		updated: number;
+		removedOrphans: number;
 	} | null>(null);
 
 	if (driftResults === undefined) {
@@ -38,7 +39,7 @@ export function SchemaDriftWarning({ api }: SchemaDriftWarningProps) {
 	}
 
 	if (!driftResults || driftResults.length === 0) {
-		if (syncResult && (syncResult.created > 0 || syncResult.updated > 0)) {
+		if (syncResult && (syncResult.created > 0 || syncResult.updated > 0 || syncResult.removedOrphans > 0)) {
 			return (
 				<Alert className="border-success/50 bg-success/10">
 					<AlertCircle className="size-4 text-success" />
@@ -50,7 +51,10 @@ export function SchemaDriftWarning({ api }: SchemaDriftWarningProps) {
 							<span>{syncResult.created} content type(s) created. </span>
 						)}
 						{syncResult.updated > 0 && (
-							<span>{syncResult.updated} content type(s) updated.</span>
+							<span>{syncResult.updated} content type(s) updated. </span>
+						)}
+						{syncResult.removedOrphans > 0 && (
+							<span>{syncResult.removedOrphans} orphaned type(s) removed.</span>
 						)}
 					</AlertDescription>
 				</Alert>
@@ -87,7 +91,7 @@ export function SchemaDriftWarning({ api }: SchemaDriftWarningProps) {
 				Schema Drift Detected
 			</AlertTitle>
 			<AlertDescription className={errors.length === 0 ? "text-diff-modified-foreground/80" : ""}>
-				<div className="space-y-2">
+				<div className="flex flex-col gap-2">
 					{errors.length > 0 && (
 						<p>
 							<strong>{errors.length} error(s)</strong>:{" "}