convex-cms 0.0.7-alpha.0 → 0.0.8

package/admin/src/pages/ContentTypeEntriesPage.tsx

@@ -0,0 +1,466 @@
+/**
+ * Shared Content Type Entries Page Component
+ *
+ * Lists entries for a specific content type with search, filtering, and actions.
+ * Used by both CLI routes and embed pages.
+ */
+
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { useQuery, useMutation } from "convex/react";
+import { usePermissions } from "~/hooks";
+import { CmsPageHeader } from "~/components/cmsds/CmsPageHeader";
+import { CmsToolbar } from "~/components/cmsds/CmsToolbar";
+import { CmsButton } from "~/components/cmsds/CmsButton";
+import { CmsStatusBadge, type ContentStatus } from "~/components/cmsds/CmsStatusBadge";
+import { CmsEmptyState } from "~/components/cmsds/CmsEmptyState";
+import { CmsConfirmDialog } from "~/components/cmsds/CmsDialog";
+import { Input } from "~/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import {
+  Search,
+  Plus,
+  FileText,
+  ChevronUp,
+  ChevronDown,
+  ArrowUpDown,
+} from "lucide-react";
+import type { AdminNavigation } from "~/lib/navigation";
+import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
+
+type SortField = "title" | "status" | "updatedAt" | "createdAt";
+type SortDirection = "asc" | "desc";
+
+export interface ContentTypeEntriesPageProps {
+  api: CmsAdminApi;
+  navigation: AdminNavigation;
+  contentTypeId: string;
+}
+
+export function ContentTypeEntriesPage({
+  api,
+  navigation,
+  contentTypeId,
+}: ContentTypeEntriesPageProps) {
+  const [selectedStatus, setSelectedStatus] = useState<ContentStatus | "all">("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [sortField, setSortField] = useState<SortField>("updatedAt");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
+  const [currentPage, setCurrentPage] = useState(0);
+  const pageSize = 25;
+
+  const { canCreate, canUpdate, canDelete } = usePermissions();
+
+  const deleteEntry = useMutation(api.deleteEntry);
+
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [entryToDelete, setEntryToDelete] = useState<{ _id: string; title: string } | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+      setCurrentPage(0);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const contentType = useQuery(api.getContentType, { id: contentTypeId });
+
+  const entriesResult = useQuery(api.listEntries, {
+    contentTypeName: contentType?.name,
+    status: selectedStatus === "all" ? undefined : selectedStatus,
+    search: debouncedSearch || undefined,
+    paginationOpts: { numItems: 250, cursor: null },
+  });
+  const allEntries = entriesResult?.page ?? [];
+
+  const getEntryTitle = useCallback(
+    (entry: { data: Record<string, unknown> }) => {
+      const titleField = contentType?.titleField ?? "title";
+      const title = entry.data[titleField];
+      return typeof title === "string" && title ? title : "Untitled";
+    },
+    [contentType?.titleField]
+  );
+
+  const sortedEntries = useMemo(() => {
+    const entries = [...allEntries];
+
+    entries.sort((a, b) => {
+      let comparison = 0;
+
+      switch (sortField) {
+        case "title": {
+          const titleA = getEntryTitle(a).toLowerCase();
+          const titleB = getEntryTitle(b).toLowerCase();
+          comparison = titleA.localeCompare(titleB);
+          break;
+        }
+        case "status":
+          comparison = a.status.localeCompare(b.status);
+          break;
+        case "updatedAt": {
+          const updatedA = a.lastPublishedAt ?? a._creationTime ?? 0;
+          const updatedB = b.lastPublishedAt ?? b._creationTime ?? 0;
+          comparison = updatedA - updatedB;
+          break;
+        }
+        case "createdAt":
+          comparison = (a._creationTime ?? 0) - (b._creationTime ?? 0);
+          break;
+        default:
+          comparison = 0;
+      }
+
+      return sortDirection === "desc" ? -comparison : comparison;
+    });
+
+    return entries;
+  }, [allEntries, sortField, sortDirection, getEntryTitle]);
+
+  const paginatedEntries = useMemo(() => {
+    const start = currentPage * pageSize;
+    return sortedEntries.slice(start, start + pageSize);
+  }, [sortedEntries, currentPage, pageSize]);
+
+  const totalPages = Math.ceil(sortedEntries.length / pageSize);
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("desc");
+    }
+  };
+
+  const getSortIcon = (field: SortField) => {
+    if (sortField !== field) {
+      return <ArrowUpDown className="size-3.5 text-muted-foreground/50" />;
+    }
+    return sortDirection === "asc" ? (
+      <ChevronUp className="size-3.5" />
+    ) : (
+      <ChevronDown className="size-3.5" />
+    );
+  };
+
+  const handleDeleteClick = useCallback(
+    (entry: { _id: string; data: Record<string, unknown> }) => {
+      const title = getEntryTitle(entry);
+      setEntryToDelete({ _id: entry._id, title });
+      setDeleteError(null);
+      setDeleteModalOpen(true);
+    },
+    [getEntryTitle]
+  );
+
+  const handleDeleteConfirm = useCallback(async () => {
+    if (!entryToDelete) return;
+
+    setIsDeleting(true);
+    setDeleteError(null);
+
+    try {
+      await deleteEntry({
+        id: entryToDelete._id,
+        hardDelete: false,
+      });
+      setDeleteModalOpen(false);
+      setEntryToDelete(null);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to delete entry";
+      setDeleteError(message);
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [entryToDelete, deleteEntry]);
+
+  const handleDeleteModalClose = useCallback(
+    (open: boolean) => {
+      if (!open && !isDeleting) {
+        setDeleteModalOpen(false);
+        setEntryToDelete(null);
+        setDeleteError(null);
+      }
+    },
+    [isDeleting]
+  );
+
+  const clearFilters = useCallback(() => {
+    setSearchQuery("");
+    setDebouncedSearch("");
+    setSelectedStatus("all");
+    setCurrentPage(0);
+  }, []);
+
+  if (contentType === undefined || entriesResult === undefined) {
+    return (
+      <div className="space-y-6 p-6">
+        <div className="flex flex-col items-center justify-center py-12">
+          <div className="size-8 animate-spin rounded-full border-2 border-muted border-t-primary" />
+          <p className="mt-4 text-sm text-muted-foreground">Loading entries...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (contentType === null) {
+    return (
+      <div className="space-y-6 p-6">
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title="Content Type Not Found"
+          description="The content type you're looking for doesn't exist or has been deleted."
+          action={{
+            label: "Back to Content Types",
+            onClick: () => navigation.navigate("/content-types"),
+          }}
+        />
+      </div>
+    );
+  }
+
+  const hasFilters = searchQuery || selectedStatus !== "all";
+
+  return (
+    <div className="space-y-6 p-6">
+      <CmsPageHeader
+        title={contentType.displayName}
+        description={contentType.description}
+        actions={
+          canCreate("contentEntries") && (
+            <CmsButton onClick={() => navigation.navigateToNewEntry(contentTypeId)}>
+              <Plus className="size-4" />
+              Create {contentType.displayName}
+            </CmsButton>
+          )
+        }
+      />
+
+      <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="search"
+                placeholder="Search entries..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-64 pl-9"
+              />
+            </div>
+            <Select
+              value={selectedStatus}
+              onValueChange={(value) => {
+                setSelectedStatus(value as ContentStatus | "all");
+                setCurrentPage(0);
+              }}
+            >
+              <SelectTrigger className="w-36">
+                <SelectValue placeholder="All Statuses" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Statuses</SelectItem>
+                <SelectItem value="draft">Draft</SelectItem>
+                <SelectItem value="published">Published</SelectItem>
+                <SelectItem value="scheduled">Scheduled</SelectItem>
+                <SelectItem value="archived">Archived</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        }
+        right={
+          <span className="text-sm text-muted-foreground">
+            {sortedEntries.length} {sortedEntries.length === 1 ? "entry" : "entries"}
+          </span>
+        }
+      />
+
+      {sortedEntries.length === 0 ? (
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title={hasFilters ? "No matching entries" : `No ${contentType.displayName} entries yet`}
+          description={
+            hasFilters
+              ? "Try adjusting your search or filter criteria."
+              : `Click "Create ${contentType.displayName}" to add your first entry.`
+          }
+          action={
+            hasFilters
+              ? { label: "Clear Filters", onClick: clearFilters, variant: "secondary" }
+              : undefined
+          }
+        />
+      ) : (
+        <>
+          <div className="rounded-lg border bg-card">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b">
+                  <th className="p-3 text-left">
+                    <button
+                      className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground"
+                      onClick={() => handleSort("title")}
+                    >
+                      Title
+                      {getSortIcon("title")}
+                    </button>
+                  </th>
+                  <th className="p-3 text-left">
+                    <button
+                      className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground"
+                      onClick={() => handleSort("status")}
+                    >
+                      Status
+                      {getSortIcon("status")}
+                    </button>
+                  </th>
+                  <th className="p-3 text-left">
+                    <button
+                      className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground"
+                      onClick={() => handleSort("updatedAt")}
+                    >
+                      Updated
+                      {getSortIcon("updatedAt")}
+                    </button>
+                  </th>
+                  <th className="p-3 text-left text-sm font-medium text-muted-foreground">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedEntries.map((entry) => (
+                  <tr
+                    key={entry._id}
+                    className="border-b last:border-0 transition-colors hover:bg-muted/50"
+                  >
+                    <td className="p-3">
+                      <button
+                        type="button"
+                        onClick={() => navigation.navigateToEntry(entry._id)}
+                        className="text-left font-medium text-foreground hover:text-primary hover:underline"
+                      >
+                        {getEntryTitle(entry)}
+                      </button>
+                      <p className="text-xs text-muted-foreground">{entry.slug}</p>
+                    </td>
+                    <td className="p-3">
+                      <CmsStatusBadge status={entry.status as ContentStatus} />
+                    </td>
+                    <td className="p-3 text-sm text-muted-foreground">
+                      {formatDate(entry.lastPublishedAt ?? entry._creationTime)}
+                    </td>
+                    <td className="p-3">
+                      <div className="flex items-center gap-2">
+                        <CmsButton
+                          variant="outline"
+                          size="sm"
+                          onClick={() => navigation.navigateToEntry(entry._id)}
+                        >
+                          {canUpdate("contentEntries") ? "Edit" : "View"}
+                        </CmsButton>
+                        {canDelete("contentEntries") && (
+                          <CmsButton
+                            variant="danger"
+                            size="sm"
+                            onClick={() => handleDeleteClick(entry)}
+                          >
+                            Delete
+                          </CmsButton>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {totalPages > 1 && (
+            <div className="flex items-center justify-center gap-2">
+              <CmsButton
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(0)}
+                disabled={currentPage === 0}
+              >
+                First
+              </CmsButton>
+              <CmsButton
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+                disabled={currentPage === 0}
+              >
+                Previous
+              </CmsButton>
+              <span className="px-3 text-sm text-muted-foreground">
+                Page {currentPage + 1} of {totalPages}
+              </span>
+              <CmsButton
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+                disabled={currentPage >= totalPages - 1}
+              >
+                Next
+              </CmsButton>
+              <CmsButton
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(totalPages - 1)}
+                disabled={currentPage >= totalPages - 1}
+              >
+                Last
+              </CmsButton>
+            </div>
+          )}
+        </>
+      )}
+
+      {sortedEntries.length > 0 && (
+        <p className="text-center text-sm text-muted-foreground">
+          Showing {paginatedEntries.length} of {sortedEntries.length}{" "}
+          {sortedEntries.length === 1 ? "entry" : "entries"}
+        </p>
+      )}
+
+      <CmsConfirmDialog
+        open={deleteModalOpen}
+        onOpenChange={handleDeleteModalClose}
+        title="Delete Entry"
+        description={
+          entryToDelete
+            ? `Are you sure you want to delete "${entryToDelete.title}"? It will be moved to the trash and can be restored within the retention period.`
+            : "Are you sure you want to delete this entry?"
+        }
+        confirmLabel="Delete"
+        variant="danger"
+        onConfirm={handleDeleteConfirm}
+        isLoading={isDeleting}
+        error={deleteError}
+      />
+    </div>
+  );
+}

package/admin/src/pages/ContentTypesPage.tsx

@@ -273,7 +273,7 @@ export function ContentTypesPage({ api, navigation }: ContentTypesPageProps) {
 									{contentType.singleton && (
 										<Badge
 											variant="secondary"
-											className="border-amber-200 bg-amber-50 text-xs font-normal text-amber-700"
+											className="border-diff-modified-border bg-diff-modified-bg text-xs font-normal text-diff-modified-foreground"
 										>
 											Singleton
 										</Badge>
@@ -422,7 +422,7 @@ export function ContentTypesPage({ api, navigation }: ContentTypesPageProps) {
 												className={cn(
 													"text-xs font-normal",
 													contentType.isActive &&
-														"border-emerald-200 bg-emerald-50 text-emerald-700",
+														"border-diff-added-border bg-diff-added-bg text-diff-added-foreground",
 												)}
 											>
 												{contentType.isActive ? "Active" : "Inactive"}
@@ -430,7 +430,7 @@ export function ContentTypesPage({ api, navigation }: ContentTypesPageProps) {
 											{contentType.singleton && (
 												<Badge
 													variant="secondary"
-													className="border-amber-200 bg-amber-50 text-xs font-normal text-amber-700"
+													className="border-diff-modified-border bg-diff-modified-bg text-xs font-normal text-diff-modified-foreground"
 												>
 													Singleton
 												</Badge>

package/admin/src/pages/DashboardPage.tsx

@@ -15,6 +15,7 @@ import {
 } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
 import { CmsPageHeader } from "~/components/cmsds";
+import { SchemaDriftWarning } from "~/components/SchemaDriftWarning";
 import { FileText, Image, Layers, Settings, TrendingUp } from "lucide-react";
 import type { AdminNavigation } from "~/lib/navigation";
 import type { CmsAdminApi } from "~/embed/contexts/ApiContext";
@@ -36,6 +37,8 @@ export function DashboardPage({ api, navigation }: DashboardPageProps) {
 				description="Welcome to Convex CMS Admin. Manage your content, media, and publishing workflows."
 			/>
 
+			<SchemaDriftWarning api={api} />
+
 			<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
 				<DashboardCard
 					title="Content Entries"

package/admin/src/pages/SettingsPage.tsx

@@ -135,7 +135,7 @@ export function SettingsPage({
 	const adminConfig = useAdminConfig();
 
 	const isConfigured = useMemo(() => {
-		return typeof api.getSettings === "function";
+		return api.getSettings != null;
 	}, [api]);
 
 	const settings = useQuery(
@@ -371,7 +371,7 @@ export function SettingsPage({
 							{feedbackStatus === "saved" && (
 								<Badge
 									variant="secondary"
-									className="gap-1 bg-emerald-100 text-emerald-700"
+									className="gap-1 bg-diff-added-bg text-diff-added-foreground"
 								>
 									<Check className="size-3" />
 									Settings saved successfully
@@ -517,9 +517,9 @@ export function SettingsPage({
 					{canEdit && api.resetSettings && (
 						<CmsSurface
 							elevation="base"
-							className="border-red-200 p-6 dark:border-red-900"
+							className="border-destructive/50 p-6"
 						>
-							<h2 className="mb-4 text-lg font-semibold text-red-600">
+							<h2 className="mb-4 text-lg font-semibold text-destructive">
 								Danger Zone
 							</h2>
 							<div className="flex items-center justify-between">

package/admin/src/pages/index.ts

@@ -6,6 +6,7 @@
  */
 
 export { ContentPage, type ContentPageProps } from "./ContentPage";
+export { ContentTypeEntriesPage, type ContentTypeEntriesPageProps } from "./ContentTypeEntriesPage";
 export { ContentTypesPage, type ContentTypesPageProps } from "./ContentTypesPage";
 export { DashboardPage } from "./DashboardPage";
 export { MediaPage, type MediaPageProps } from "./MediaPage";

package/admin/src/routes/__root.tsx

@@ -185,40 +185,40 @@ function ConvexProviderWrapper({
   if (!convex) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background p-6">
-        <div className="max-w-lg space-y-4 rounded-lg border border-amber-200 bg-amber-50 p-6 text-center">
-          <h2 className="text-xl font-semibold text-amber-900">
+        <div className="diff-modified max-w-lg space-y-4 rounded-lg border p-6 text-center">
+          <h2 className="text-xl font-semibold text-diff-modified">
             Convex Configuration Required
           </h2>
-          <p className="text-sm text-amber-800">
+          <p className="text-sm text-diff-modified-foreground">
             Please provide a Convex deployment URL to connect to your backend.
           </p>
-          <div className="space-y-2 text-left text-sm text-amber-700">
+          <div className="space-y-2 text-left text-sm text-diff-modified-foreground">
             <p className="font-medium">Options:</p>
             <ul className="list-inside list-disc space-y-1">
               <li>
                 Run with URL:{" "}
-                <code className="rounded bg-amber-100 px-1">
+                <code className="rounded bg-diff-modified-bg/50 px-1">
                   npx convex-cms admin --url YOUR_URL
                 </code>
               </li>
               <li>
                 Set environment variable:{" "}
-                <code className="rounded bg-amber-100 px-1">
+                <code className="rounded bg-diff-modified-bg/50 px-1">
                   CONVEX_URL=YOUR_URL
                 </code>
               </li>
               <li>
                 Add to{" "}
-                <code className="rounded bg-amber-100 px-1">.env.local</code>:{" "}
-                <code className="rounded bg-amber-100 px-1">
+                <code className="rounded bg-diff-modified-bg/50 px-1">.env.local</code>:{" "}
+                <code className="rounded bg-diff-modified-bg/50 px-1">
                   CONVEX_URL=YOUR_URL
                 </code>
               </li>
             </ul>
           </div>
-          <p className="text-sm text-amber-700">
+          <p className="text-sm text-diff-modified-foreground">
             Run{" "}
-            <code className="rounded bg-amber-100 px-1">npx convex dev</code> to
+            <code className="rounded bg-diff-modified-bg/50 px-1">npx convex dev</code> to
             start Convex and get your URL.
           </p>
         </div>

package/admin/src/styles/globals.css

@@ -21,21 +21,47 @@
 }
 
 @layer utilities {
-  /* Status badge colors */
+  /* Status badge colors - using semantic variables */
   .status-draft {
-    @apply bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300;
+    @apply bg-muted text-muted-foreground;
   }
 
   .status-published {
-    @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400;
+    @apply bg-diff-added-bg text-diff-added-foreground;
   }
 
   .status-scheduled {
-    @apply bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400;
+    @apply bg-info-bg text-info-foreground;
   }
 
   .status-archived {
-    @apply bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400;
+    @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;
   }
 
   /* Surface elevations */

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

@@ -71,4 +71,29 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Diff colors */
+  --color-diff-added: var(--diff-added);
+  --color-diff-added-bg: var(--diff-added-bg);
+  --color-diff-added-border: var(--diff-added-border);
+  --color-diff-added-foreground: var(--diff-added-foreground);
+
+  --color-diff-removed: var(--diff-removed);
+  --color-diff-removed-bg: var(--diff-removed-bg);
+  --color-diff-removed-border: var(--diff-removed-border);
+  --color-diff-removed-foreground: var(--diff-removed-foreground);
+
+  --color-diff-modified: var(--diff-modified);
+  --color-diff-modified-bg: var(--diff-modified-bg);
+  --color-diff-modified-border: var(--diff-modified-border);
+  --color-diff-modified-foreground: var(--diff-modified-foreground);
+
+  /* Semantic states */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
+  --color-info-foreground: var(--info-foreground);
 }