convex-cms 0.0.7-alpha.0 → 0.0.8

package/admin/src/components/fields/TagField.tsx

@@ -315,7 +315,7 @@ export function TagField({
         <div className="border-t px-3 py-1.5 text-xs text-muted-foreground">
           {value?.length ?? 0} tag{(value?.length ?? 0) !== 1 ? 's' : ''}
           {minTags && (value?.length ?? 0) < minTags && (
-            <span className="text-amber-600"> (minimum {minTags})</span>
+            <span className="text-warning"> (minimum {minTags})</span>
           )}
           {maxTags && <span> / {maxTags} max</span>}
         </div>

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -1,10 +1,14 @@
 import { useQuery } from "convex/react";
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { api } from "../../convex/_generated/api";
+import { api as localApi } from "../../convex/_generated/api";
 import type { AdminConfig } from "~/lib/admin-config";
 import { AdminConfigProvider } from "./AdminConfigContext";
 
-type Settings = NonNullable<typeof api.admin.getSettings._returnType>;
+type Settings = NonNullable<typeof localApi.admin.getSettings._returnType>;
+
+type SettingsApi = {
+  getSettings: typeof localApi.admin.getSettings;
+};
 
 interface SettingsConfigContextValue {
   baseConfig: AdminConfig;
@@ -16,11 +20,14 @@ const SettingsConfigContext = createContext<SettingsConfigContextValue | null>(n
 export function SettingsConfigProvider({
   baseConfig,
   children,
+  api,
 }: {
   baseConfig: AdminConfig;
   children: ReactNode;
+  api?: SettingsApi;
 }) {
-  const settings = useQuery(api.admin.getSettings);
+  const resolvedApi = api ?? localApi.admin;
+  const settings = useQuery(resolvedApi.getSettings);
 
   const mergedConfig = useMemo((): AdminConfig => {
     if (!settings) return baseConfig;

package/admin/src/embed/index.tsx

@@ -30,7 +30,7 @@
 
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { useMemo, type ReactNode } from "react";
-import { AdminConfigProvider } from "../contexts/AdminConfigContext";
+import { SettingsConfigProvider } from "../contexts/SettingsConfigContext";
 import {
   AuthProvider,
   type GetUserHook,
@@ -51,11 +51,14 @@ import { EmbedLayout } from "./components/EmbedLayout";
 import {
   EmbedDashboard,
   EmbedContent,
+  EmbedContentTypeEntries,
   EmbedContentTypes,
   EmbedMedia,
   EmbedSettings,
   EmbedTrash,
   EmbedTaxonomies,
+  EmbedNewEntry,
+  EmbedEntry,
 } from "./pages";
 
 function adaptAuthConfig(auth: CmsAdminAuthConfig): {
@@ -85,11 +88,11 @@ function ConvexProviderWrapper({
   if (!convex) {
     return (
       <div className="flex min-h-full 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 valid convexUrl prop to the CmsAdmin component.
           </p>
         </div>
@@ -119,8 +122,21 @@ function EmbedRouter() {
         return <EmbedTaxonomies />;
       case "trash":
         return <EmbedTrash />;
-      case "entries":
+      case "entries": {
+        // Handle new entry action
+        if (currentRoute.params.action === "new") {
+          return <EmbedNewEntry />;
+        }
+        // Handle existing entry edit
+        if (currentRoute.params.entryId) {
+          return <EmbedEntry />;
+        }
+        // Handle content type specific entries
+        if (currentRoute.params.contentTypeId) {
+          return <EmbedContentTypeEntries contentTypeId={currentRoute.params.contentTypeId} />;
+        }
         return <EmbedContent />;
+      }
       default:
         return <EmbedDashboard />;
     }
@@ -144,13 +160,17 @@ export function CmsAdmin({
 }) {
   const adminConfig = useMemo(() => resolveAdminConfig(config), [config]);
   const authConfig = useMemo(() => adaptAuthConfig(auth), [auth]);
+  const settingsApi = useMemo(
+    () => (api.getSettings ? { getSettings: api.getSettings } : undefined),
+    [api]
+  );
 
   return (
     <div className={className}>
       <ApiProvider api={api}>
         <ThemeProvider>
-          <AdminConfigProvider config={adminConfig}>
-            <ConvexProviderWrapper convexUrl={convexUrl}>
+          <ConvexProviderWrapper convexUrl={convexUrl}>
+            <SettingsConfigProvider baseConfig={adminConfig} api={settingsApi}>
               <AuthProvider
                 getUser={authConfig.getUser}
                 getUserRole={authConfig.getUserRole}
@@ -168,8 +188,8 @@ export function CmsAdmin({
                   </RouteGuard>
                 </EmbedNavigationProvider>
               </AuthProvider>
-            </ConvexProviderWrapper>
-          </AdminConfigProvider>
+            </SettingsConfigProvider>
+          </ConvexProviderWrapper>
         </ThemeProvider>
       </ApiProvider>
     </div>

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

@@ -0,0 +1,25 @@
+/**
+ * Embed Content Type Entries Page
+ *
+ * Thin wrapper around the shared ContentTypeEntriesPage component.
+ * Provides embed navigation and API access.
+ */
+
+import { useApi } from "../contexts/ApiContext";
+import { useEmbedNavigation } from "../navigation";
+import { useEmbedAdapter } from "../../lib/embed-adapter";
+import { ContentTypeEntriesPage } from "../../pages";
+
+export function EmbedContentTypeEntries({ contentTypeId }: { contentTypeId: string }) {
+	const api = useApi();
+	const embedNav = useEmbedNavigation();
+	const navigation = useEmbedAdapter(embedNav);
+
+	return (
+		<ContentTypeEntriesPage
+			api={api}
+			navigation={navigation}
+			contentTypeId={contentTypeId}
+		/>
+	);
+}

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";
@@ -57,6 +57,21 @@ 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;