convex-cms 0.0.6 → 0.0.7

package/admin/src/embed/pages/Entry.tsx

@@ -0,0 +1,114 @@
+/**
+ * Embed Entry Page
+ *
+ * Renders the entry editor for editing an existing content entry.
+ */
+
+import { useApi } from "../contexts/ApiContext";
+import { useEmbedNavigation, useEmbedParams } from "../navigation";
+import { useQuery } from "convex/react";
+import { ContentEntryEditor } from "../../components/ContentEntryEditor";
+import type { ContentType, ContentEntry } from "../../components/ContentEntryEditor";
+import { CmsEmptyState } from "../../components/cmsds/CmsEmptyState";
+import { FileText } from "lucide-react";
+import { usePermissions } from "../../hooks";
+
+export function EmbedEntry() {
+  const api = useApi();
+  const params = useEmbedParams();
+  const { navigate } = useEmbedNavigation();
+  const { canDelete } = usePermissions();
+
+  const entryId = params.entryId;
+
+  const entry = useQuery(api.getEntry, entryId ? { id: entryId } : "skip");
+
+  const contentType = useQuery(
+    api.getContentType,
+    entry ? { name: entry.contentTypeName } : "skip"
+  );
+
+  if (!entryId) {
+    return (
+      <div className="space-y-6 p-6">
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title="No Entry Selected"
+          description="Please select an entry to edit."
+          action={{
+            label: "Go to Content",
+            onClick: () => navigate("content"),
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (entry === undefined || (entry && contentType === 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 entry...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (entry === null) {
+    return (
+      <div className="space-y-6 p-6">
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title="Entry Not Found"
+          description="The content entry you're looking for doesn't exist or has been deleted."
+          action={{
+            label: "Back to Content",
+            onClick: () => navigate("content"),
+          }}
+        />
+      </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 for this entry doesn't exist or has been deleted."
+          action={{
+            label: "Back to Content",
+            onClick: () => navigate("content"),
+          }}
+        />
+      </div>
+    );
+  }
+
+  const handleSave = (_savedEntry: ContentEntry) => {
+    // Stay on page - ContentEntryEditor handles success feedback
+  };
+
+  const handleCancel = () => {
+    navigate("content");
+  };
+
+  const handleDelete = () => {
+    navigate("content");
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <ContentEntryEditor
+        contentType={contentType as ContentType}
+        entry={entry as ContentEntry}
+        onSave={handleSave}
+        onCancel={handleCancel}
+        onDelete={handleDelete}
+        canDelete={canDelete("contentEntries")}
+      />
+    </div>
+  );
+}

package/admin/src/embed/pages/Media.tsx

@@ -8,12 +8,14 @@
 import { useApi } from "../contexts/ApiContext";
 import { useEmbedNavigation } from "../navigation";
 import { useEmbedAdapter } from "../../lib/embed-adapter";
+import { useSettingsConfig } from "../../contexts";
 import { MediaPage } from "../../pages";
 
 export function EmbedMedia() {
 	const api = useApi();
 	const embedNav = useEmbedNavigation();
 	const navigation = useEmbedAdapter(embedNav);
+	const { settings } = useSettingsConfig();
 
-	return <MediaPage api={api} navigation={navigation} />;
+	return <MediaPage api={api} navigation={navigation} settings={settings} />;
 }

package/admin/src/embed/pages/NewEntry.tsx

@@ -0,0 +1,83 @@
+/**
+ * Embed New Entry Page
+ *
+ * Renders the entry editor for creating a new content entry.
+ */
+
+import { useApi } from "../contexts/ApiContext";
+import { useEmbedNavigation, useEmbedParams } from "../navigation";
+import { useQuery } from "convex/react";
+import { ContentEntryEditor } from "../../components/ContentEntryEditor";
+import type { ContentType, ContentEntry } from "../../components/ContentEntryEditor";
+import { CmsEmptyState } from "../../components/cmsds/CmsEmptyState";
+import { FileText } from "lucide-react";
+
+export function EmbedNewEntry() {
+  const api = useApi();
+  const params = useEmbedParams();
+  const { navigate, navigateToEntry, navigateToContentType } = useEmbedNavigation();
+
+  const contentTypeId = params.contentTypeId;
+  const contentType = useQuery(api.getContentType, contentTypeId ? { id: contentTypeId } : "skip");
+
+  if (!contentTypeId) {
+    return (
+      <div className="space-y-6 p-6">
+        <CmsEmptyState
+          icon={<FileText className="size-6" />}
+          title="No Content Type Selected"
+          description="Please select a content type to create an entry."
+          action={{
+            label: "Go to Content",
+            onClick: () => navigate("content"),
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (contentType === 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 content type...</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: () => navigate("content-types"),
+          }}
+        />
+      </div>
+    );
+  }
+
+  const handleSave = (entry: ContentEntry) => {
+    navigateToEntry(entry._id);
+  };
+
+  const handleCancel = () => {
+    navigateToContentType(contentTypeId);
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <ContentEntryEditor
+        contentType={contentType as ContentType}
+        onSave={handleSave}
+        onCancel={handleCancel}
+      />
+    </div>
+  );
+}

package/admin/src/embed/pages/index.ts

@@ -1,7 +1,10 @@
 export { EmbedDashboard } from "./Dashboard";
 export { EmbedContent } from "./Content";
+export { EmbedContentTypeEntries } from "./ContentTypeEntries";
 export { EmbedContentTypes } from "./ContentTypes";
 export { EmbedMedia } from "./Media";
 export { EmbedSettings } from "./Settings";
 export { EmbedTrash } from "./Trash";
 export { EmbedTaxonomies } from "./Taxonomies";
+export { EmbedNewEntry } from "./NewEntry";
+export { EmbedEntry } from "./Entry";

package/admin/src/pages/ContentPage.tsx

@@ -5,7 +5,7 @@
  * Used by both CLI routes and embed pages.
  */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { useQuery } from "convex/react";
 import { usePermissions } from "~/hooks";
 import { BulkActionBar } from "~/components/BulkActionBar";
@@ -39,19 +39,11 @@ import { CmsAdminApi } from "~/embed/contexts/ApiContext";
 
 type ContentType = {
   _id: string;
+  name: string;
   displayName: string;
   titleField?: string;
 };
 
-type Entry = {
-  _id: string;
-  contentTypeId: string;
-  slug?: string;
-  status: string;
-  data: Record<string, unknown>;
-  _creationTime: number;
-};
-
 export interface ContentPageProps {
   api: CmsAdminApi
   navigation: AdminNavigation;
@@ -65,17 +57,32 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
 
   const { canCreate, canUpdate } = usePermissions();
 
+  // Sync with navigation params when contentTypeId changes
+  useEffect(() => {
+    const contentTypeId = navigation.params?.contentTypeId;
+    if (contentTypeId) {
+      // Extract slug from contentTypeId (handles "code:slug" format)
+      const slug = contentTypeId.startsWith("code:")
+        ? contentTypeId.slice(5)
+        : contentTypeId;
+      setSelectedTypeId(slug);
+    } else {
+      // Clear selection when navigating to "All Entries"
+      setSelectedTypeId("");
+    }
+  }, [navigation.params?.contentTypeId]);
+
   const contentTypesResult = useQuery(api.listContentTypes, { isActive: true });
   const contentTypes: ContentType[] = contentTypesResult?.page ?? [];
   const isLoadingContentTypes = contentTypesResult === undefined;
 
   const entriesResult = useQuery(api.listEntries, {
-    contentTypeId: selectedTypeId || undefined,
+    contentTypeName: selectedTypeId || undefined,
     status: selectedStatus || undefined,
     search: searchQuery.trim() || undefined,
     paginationOpts: { numItems: 50, cursor: null },
   });
-  const entries: Entry[] = entriesResult?.page ?? [];
+  const entries = entriesResult?.page ?? [];
   const isLoadingEntries = entriesResult === undefined;
 
   const isLoading = isLoadingContentTypes || isLoadingEntries;
@@ -84,16 +91,16 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
     navigation.navigateToNewEntry(contentTypeId);
   };
 
-  const getContentTypeName = (contentTypeId: string) => {
-    const type = contentTypes.find((t) => t._id === contentTypeId);
-    return type?.displayName ?? "Unknown";
+  const getContentTypeDisplayName = (contentTypeName: string) => {
+    const type = contentTypes.find((t) => t.name === contentTypeName);
+    return type?.displayName ?? contentTypeName;
   };
 
   const getEntryTitle = (
     entry: { data: Record<string, unknown> },
-    contentTypeId: string
+    contentTypeName: string
   ) => {
-    const type = contentTypes.find((t) => t._id === contentTypeId);
+    const type = contentTypes.find((t) => t.name === contentTypeName);
     const titleField = type?.titleField ?? "title";
     const title = entry.data[titleField];
     return typeof title === "string" && title ? title : "Untitled";
@@ -291,7 +298,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
                       onCheckedChange={(checked) =>
                         handleSelectItem(entry._id, checked as boolean)
                       }
-                      aria-label={`Select ${getEntryTitle(entry, entry.contentTypeId)}`}
+                      aria-label={`Select ${getEntryTitle(entry, entry.contentTypeName)}`}
                     />
                   </td>
                   <td className="p-3">
@@ -301,7 +308,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
                       className="block text-left"
                     >
                       <span className="font-medium text-foreground hover:text-primary">
-                        {getEntryTitle(entry, entry.contentTypeId)}
+                        {getEntryTitle(entry, entry.contentTypeName)}
                       </span>
                       <span className="block text-xs text-muted-foreground">
                         {entry.slug}
@@ -309,7 +316,7 @@ export function ContentPage({ api, navigation }: ContentPageProps) {
                     </button>
                   </td>
                   <td className="p-3 text-sm text-muted-foreground">
-                    {getContentTypeName(entry.contentTypeId)}
+                    {getContentTypeDisplayName(entry.contentTypeName)}
                   </td>
                   <td className="p-3">
                     <CmsStatusBadge status={entry.status as ContentStatus} />