convex-cms 0.0.9-alpha.8 → 0.0.9-alpha.9

package/admin/src/pages/DashboardPage.tsx

@@ -13,8 +13,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "~/components/ui/card";
-import { Skeleton } from "~/components/ui/skeleton";
-import { CmsPageHeader } from "~/components/cmsds";
+import { CmsPageHeader, CmsStatCard } from "~/components/cmsds";
 import { SchemaDriftWarning } from "~/components/SchemaDriftWarning";
 import { FileText, Image, Layers, Settings, TrendingUp } from "lucide-react";
 import type { AdminNavigation } from "~/lib/navigation";
@@ -72,40 +71,24 @@ export function DashboardPage({ api, navigation }: DashboardPageProps) {
 					<h2 className="text-lg font-semibold">Quick Stats</h2>
 				</div>
 				<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-					<StatCard
-						label="Content Types"
-						value={
-							isLoading
-								? undefined
-								: hasError
-								? "—"
-								: String(stats.contentTypes)
-						}
+					<CmsStatCard
+						title="Content Types"
+						value={hasError ? "—" : String(stats?.contentTypes ?? 0)}
 						isLoading={isLoading}
 					/>
-					<StatCard
-						label="Content Entries"
-						value={
-							isLoading
-								? undefined
-								: hasError
-								? "—"
-								: String(stats.contentEntries)
-						}
+					<CmsStatCard
+						title="Content Entries"
+						value={hasError ? "—" : String(stats?.contentEntries ?? 0)}
 						isLoading={isLoading}
 					/>
-					<StatCard
-						label="Media Assets"
-						value={
-							isLoading ? undefined : hasError ? "—" : String(stats.mediaAssets)
-						}
+					<CmsStatCard
+						title="Media Assets"
+						value={hasError ? "—" : String(stats?.mediaAssets ?? 0)}
 						isLoading={isLoading}
 					/>
-					<StatCard
-						label="Published"
-						value={
-							isLoading ? undefined : hasError ? "—" : String(stats.published)
-						}
+					<CmsStatCard
+						title="Published"
+						value={hasError ? "—" : String(stats?.published ?? 0)}
 						isLoading={isLoading}
 					/>
 				</div>
@@ -142,25 +125,3 @@ function DashboardCard({
 	);
 }
 
-function StatCard({
-	label,
-	value,
-	isLoading = false,
-}: {
-	label: string;
-	value?: string;
-	isLoading?: boolean;
-}) {
-	return (
-		<Card>
-			<CardContent className="p-4">
-				{isLoading ? (
-					<Skeleton className="mb-1 h-8 w-16" />
-				) : (
-					<div className="text-2xl font-bold">{value}</div>
-				)}
-				<div className="text-sm text-muted-foreground">{label}</div>
-			</CardContent>
-		</Card>
-	);
-}

package/admin/src/pages/MediaPage.tsx

@@ -8,10 +8,12 @@
 import { useState, useMemo, useCallback, useEffect } from "react";
 import { useQuery, useMutation } from "convex/react";
 import { UploadDropzone, type UploadedFile } from "~/components/UploadDropzone";
-import { CmsPageHeader } from "~/components/cmsds/CmsPageHeader";
-import { CmsToolbar } from "~/components/cmsds/CmsToolbar";
-import { CmsEmptyState } from "~/components/cmsds/CmsEmptyState";
-import { CmsButton } from "~/components/cmsds/CmsButton";
+import {
+  CmsPageHeader,
+  CmsEmptyState,
+  CmsButton,
+  CmsFilterBar,
+} from "~/components/cmsds";
 import { TaxonomyFilter } from "~/components/filters/TaxonomyFilter";
 import {
   Dialog,
@@ -22,13 +24,6 @@ import {
 } from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
 import { Checkbox } from "~/components/ui/checkbox";
 import { cn } from "~/lib/cn";
 import {
@@ -43,7 +38,6 @@ import {
   FolderPlus,
   Upload,
   Search,
-  X,
   Trash2,
   RotateCcw,
 } from "lucide-react";
@@ -544,48 +538,31 @@ export function MediaPage({ api, navigation, settings }: MediaPageProps) {
         </nav>
       )}
 
-      <CmsToolbar
-        left={
+      <CmsFilterBar
+        search={{
+          value: searchQuery,
+          onChange: setSearchQuery,
+          placeholder: "Search files...",
+          className: "w-64",
+        }}
+        filters={[
+          {
+            key: "type",
+            value: typeFilter || "all",
+            onChange: (v) => setTypeFilter(v === "all" ? "" : (v as MediaType)),
+            options: [
+              { value: "all", label: "All Types" },
+              { value: "image", label: "Images" },
+              { value: "video", label: "Videos" },
+              { value: "audio", label: "Audio" },
+              { value: "document", label: "Documents" },
+              { value: "other", label: "Other" },
+            ],
+            className: "w-36",
+          },
+        ]}
+        actions={
           <div className="flex items-center gap-3">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search files..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-64 pl-9"
-              />
-              {searchQuery && (
-                <button
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-muted"
-                  onClick={() => setSearchQuery("")}
-                  aria-label="Clear search"
-                >
-                  <X className="size-4 text-muted-foreground" />
-                </button>
-              )}
-            </div>
-
-            <Select
-              value={typeFilter || "all"}
-              onValueChange={(v) =>
-                setTypeFilter(v === "all" ? "" : (v as MediaType))
-              }
-            >
-              <SelectTrigger className="w-36">
-                <SelectValue placeholder="All Types" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Types</SelectItem>
-                <SelectItem value="image">Images</SelectItem>
-                <SelectItem value="video">Videos</SelectItem>
-                <SelectItem value="audio">Audio</SelectItem>
-                <SelectItem value="document">Documents</SelectItem>
-                <SelectItem value="other">Other</SelectItem>
-              </SelectContent>
-            </Select>
-
             <TaxonomyFilter
               selectedTermIds={selectedTermIds}
               onChange={setSelectedTermIds}
@@ -606,10 +583,7 @@ export function MediaPage({ api, navigation, settings }: MediaPageProps) {
                 Selection Mode
               </label>
             )}
-          </div>
-        }
-        right={
-          <div className="flex items-center gap-2">
+
             {isSelectionMode && selectedAssets.size > 0 && (
               <span className="text-sm text-muted-foreground">
                 {selectedAssets.size} selected

package/admin/src/pages/SettingsPage.tsx

@@ -84,7 +84,11 @@ const THEME_OPTIONS: {
 ];
 
 function AppearanceSection() {
-	const { theme, setTheme } = useTheme();
+	const { theme, setTheme, canToggleDarkMode } = useTheme();
+
+	if (!canToggleDarkMode) {
+		return null;
+	}
 
 	return (
 		<CmsSurface elevation="base" className="p-6">

package/admin/src/pages/TrashPage.tsx

@@ -5,27 +5,21 @@
  * Used by both CLI routes and embed pages.
  */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useQuery, useMutation } from "convex/react";
-import { CmsPageHeader } from "~/components/cmsds/CmsPageHeader";
-import { CmsToolbar } from "~/components/cmsds/CmsToolbar";
-import { CmsEmptyState } from "~/components/cmsds/CmsEmptyState";
-import { CmsSurface } from "~/components/cmsds/CmsSurface";
-import { CmsButton } from "~/components/cmsds/CmsButton";
-import { CmsConfirmDialog } from "~/components/cmsds/CmsDialog";
-import { Input } from "~/components/ui/input";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "~/components/ui/select";
-import { Checkbox } from "~/components/ui/checkbox";
+	CmsPageHeader,
+	CmsEmptyState,
+	CmsSurface,
+	CmsButton,
+	CmsConfirmDialog,
+	CmsFilterBar,
+	CmsTable,
+	type CmsTableColumn,
+} from "~/components/cmsds";
 import { Badge } from "~/components/ui/badge";
 import { Alert, AlertDescription } from "~/components/ui/alert";
-import { cn } from "~/lib/cn";
-import { Search, Trash2, RotateCcw, AlertTriangle, X } from "lucide-react";
+import { Trash2, RotateCcw, AlertTriangle, X } from "lucide-react";
 import type { AdminNavigation } from "~/lib/navigation";
 import { CmsAdminApi } from "~/embed/contexts/ApiContext";
 
@@ -77,26 +71,6 @@ export function TrashPage({ api, navigation: _navigation }: TrashPageProps) {
 	const config = configQuery;
 	const stats = statsQuery;
 
-	const handleSelectItem = useCallback((itemId: string, selected: boolean) => {
-		setSelectedItems((prev) => {
-			const next = new Set(prev);
-			if (selected) {
-				next.add(itemId);
-			} else {
-				next.delete(itemId);
-			}
-			return next;
-		});
-	}, []);
-
-	const handleSelectAll = useCallback(() => {
-		if (selectedItems.size === trashItems.length) {
-			setSelectedItems(new Set());
-		} else {
-			setSelectedItems(new Set(trashItems.map((item) => item._id)));
-		}
-	}, [selectedItems.size, trashItems]);
-
 	const handleRestore = useCallback(
 		async (ids: string[]) => {
 			setIsRestoring(true);
@@ -166,6 +140,79 @@ export function TrashPage({ api, navigation: _navigation }: TrashPageProps) {
 		return item.slug || item._id;
 	};
 
+	const trashColumns: CmsTableColumn<TrashItem>[] = useMemo(
+		() => [
+			{
+				key: "name",
+				header: "Name",
+				cell: (item) => (
+					<>
+						<span className="font-medium text-foreground">{getItemTitle(item)}</span>
+						{item.slug && (
+							<span className="block text-xs text-muted-foreground">{item.slug}</span>
+						)}
+					</>
+				),
+			},
+			{
+				key: "type",
+				header: "Type",
+				cell: (item) => (
+					<span className="text-sm text-muted-foreground">
+						{item.contentTypeName || "Unknown"}
+					</span>
+				),
+			},
+			{
+				key: "deleted",
+				header: "Deleted",
+				cell: (item) => (
+					<>
+						<span className="text-sm text-muted-foreground">
+							{formatDate(item.deletedAt)}
+						</span>
+						{item.deletedBy && (
+							<span className="block text-xs text-muted-foreground">
+								by {item.deletedBy}
+							</span>
+						)}
+					</>
+				),
+			},
+			{
+				key: "expires",
+				header: "Expires In",
+				cell: (item) => {
+					const daysLeft = getDaysUntilDeletion(item.deletedAt);
+					return daysLeft !== null ? (
+						<Badge
+							variant={daysLeft <= 3 ? "destructive" : "secondary"}
+							className="font-normal"
+						>
+							{daysLeft} {daysLeft === 1 ? "day" : "days"}
+						</Badge>
+					) : null;
+				},
+			},
+			{
+				key: "actions",
+				header: "Actions",
+				cell: (item) => (
+					<CmsButton
+						variant="outline"
+						size="sm"
+						onClick={() => handleRestore([item._id])}
+						loading={isRestoring}
+					>
+						<RotateCcw className="size-4" />
+						Restore
+					</CmsButton>
+				),
+			},
+		],
+		[isRestoring, handleRestore, config?.retentionDays]
+	);
+
 	return (
 		<div className="space-y-6 p-6">
 			<div className="flex items-start justify-between">
@@ -200,39 +247,28 @@ export function TrashPage({ api, navigation: _navigation }: TrashPageProps) {
 				</div>
 			)}
 
-			<CmsToolbar
-				left={
-					<div className="flex items-center gap-3">
-						<div className="relative">
-							<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-							<Input
-								type="text"
-								placeholder="Search deleted items..."
-								value={searchQuery}
-								onChange={(e) => setSearchQuery(e.target.value)}
-								className="w-64 pl-9"
-							/>
-						</div>
-						<Select
-							value={selectedContentType || "all"}
-							onValueChange={(v) =>
-								setSelectedContentType(v === "all" ? "" : v)
-							}
-						>
-							<SelectTrigger className="w-48">
-								<SelectValue placeholder="All Content Types" />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="all">All Content Types</SelectItem>
-								{contentTypes.map((type: any) => (
-									<SelectItem key={type._id} value={type._id}>
-										{type.displayName}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-					</div>
-				}
+			<CmsFilterBar
+				search={{
+					value: searchQuery,
+					onChange: setSearchQuery,
+					placeholder: "Search deleted items...",
+					className: "w-64",
+				}}
+				filters={[
+					{
+						key: "contentType",
+						value: selectedContentType || "all",
+						onChange: (v) => setSelectedContentType(v === "all" ? "" : v),
+						options: [
+							{ value: "all", label: "All Content Types" },
+							...contentTypes.map((type: { _id: string; displayName: string }) => ({
+								value: type._id,
+								label: type.displayName,
+							})),
+						],
+						className: "w-48",
+					},
+				]}
 			/>
 
 			{restoreError && (
@@ -304,106 +340,15 @@ export function TrashPage({ api, navigation: _navigation }: TrashPageProps) {
 					description="Deleted items will appear here"
 				/>
 			) : (
-				<div className="rounded-lg border bg-card">
-					<table className="w-full">
-						<thead>
-							<tr className="border-b">
-								<th className="w-10 p-3 text-left">
-									<Checkbox
-										checked={
-											selectedItems.size === trashItems.length &&
-											trashItems.length > 0
-										}
-										onCheckedChange={handleSelectAll}
-									/>
-								</th>
-								<th className="p-3 text-left text-sm font-medium text-muted-foreground">
-									Name
-								</th>
-								<th className="p-3 text-left text-sm font-medium text-muted-foreground">
-									Type
-								</th>
-								<th className="p-3 text-left text-sm font-medium text-muted-foreground">
-									Deleted
-								</th>
-								<th className="p-3 text-left text-sm font-medium text-muted-foreground">
-									Expires In
-								</th>
-								<th className="p-3 text-left text-sm font-medium text-muted-foreground">
-									Actions
-								</th>
-							</tr>
-						</thead>
-						<tbody>
-							{trashItems.map((item) => {
-								const daysLeft = getDaysUntilDeletion(item.deletedAt);
-
-								return (
-									<tr
-										key={item._id}
-										className={cn(
-											"border-b last:border-0 transition-colors hover:bg-muted/50",
-											selectedItems.has(item._id) && "bg-primary/5",
-										)}
-									>
-										<td className="p-3">
-											<Checkbox
-												checked={selectedItems.has(item._id)}
-												onCheckedChange={(checked) =>
-													handleSelectItem(item._id, checked as boolean)
-												}
-											/>
-										</td>
-										<td className="p-3">
-											<span className="font-medium text-foreground">
-												{getItemTitle(item)}
-											</span>
-											{item.slug && (
-												<span className="block text-xs text-muted-foreground">
-													{item.slug}
-												</span>
-											)}
-										</td>
-										<td className="p-3 text-sm text-muted-foreground">
-											{item.contentTypeName || "Unknown"}
-										</td>
-										<td className="p-3">
-											<span className="text-sm text-muted-foreground">
-												{formatDate(item.deletedAt)}
-											</span>
-											{item.deletedBy && (
-												<span className="block text-xs text-muted-foreground">
-													by {item.deletedBy}
-												</span>
-											)}
-										</td>
-										<td className="p-3">
-											{daysLeft !== null && (
-												<Badge
-													variant={daysLeft <= 3 ? "destructive" : "secondary"}
-													className="font-normal"
-												>
-													{daysLeft} {daysLeft === 1 ? "day" : "days"}
-												</Badge>
-											)}
-										</td>
-										<td className="p-3">
-											<CmsButton
-												variant="outline"
-												size="sm"
-												onClick={() => handleRestore([item._id])}
-												loading={isRestoring}
-											>
-												<RotateCcw className="size-4" />
-												Restore
-											</CmsButton>
-										</td>
-									</tr>
-								);
-							})}
-						</tbody>
-					</table>
-				</div>
+				<CmsTable
+					columns={trashColumns}
+					data={trashItems}
+					getRowId={(item) => item._id}
+					selectable
+					selectedIds={selectedItems}
+					onSelectionChange={setSelectedItems}
+					emptyMessage="No items in trash"
+				/>
 			)}
 
 			<CmsConfirmDialog

package/admin/src/styles/globals.css

@@ -20,7 +20,7 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  /* Embedded mode - scope styles to container */
+  /* Embedded mode - scoped base styles */
   [data-cms-admin] {
     @apply bg-background text-foreground;
     font-feature-settings: 'rlig' 1, 'calt' 1;
@@ -30,47 +30,25 @@
 }
 
 @layer utilities {
-  /* Status badge colors - using semantic variables */
+  /* Status badge colors - using CSS variables for theme consistency */
   .status-draft {
-    @apply bg-muted text-muted-foreground;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
   }
 
   .status-published {
-    @apply bg-diff-added-bg text-diff-added-foreground;
+    background-color: var(--diff-added-bg);
+    color: var(--diff-added-foreground);
   }
 
   .status-scheduled {
-    @apply bg-info-bg text-info-foreground;
+    background-color: var(--info-bg);
+    color: var(--info-foreground);
   }
 
   .status-archived {
-    @apply bg-diff-modified-bg text-diff-modified-foreground;
-  }
-
-  /* Diff change indicators */
-  .diff-added {
-    @apply bg-diff-added-bg border-diff-added-border text-diff-added-foreground;
-  }
-
-  .diff-removed {
-    @apply bg-diff-removed-bg border-diff-removed-border text-diff-removed-foreground;
-  }
-
-  .diff-modified {
-    @apply bg-diff-modified-bg border-diff-modified-border text-diff-modified-foreground;
-  }
-
-  /* Icon badges for diff */
-  .diff-icon-added {
-    @apply bg-diff-added/20 text-diff-added;
-  }
-
-  .diff-icon-removed {
-    @apply bg-diff-removed/20 text-diff-removed;
-  }
-
-  .diff-icon-modified {
-    @apply bg-diff-modified/20 text-diff-modified;
+    background-color: var(--diff-modified-bg);
+    color: var(--diff-modified-foreground);
   }
 
   /* Surface elevations */

package/admin/src/styles/tailwind-config.css

@@ -96,4 +96,16 @@
   --color-info: var(--info);
   --color-info-bg: var(--info-bg);
   --color-info-foreground: var(--info-foreground);
+
+  /* Purple (workflow states) */
+  --color-purple: var(--purple);
+  --color-purple-bg: var(--purple-bg);
+  --color-purple-foreground: var(--purple-foreground);
+
+  /* Chart colors */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
 }