convex-cms 0.0.5-alpha.3 → 0.0.5-alpha.5

package/admin/src/components/media/MediaTaxonomyPicker.tsx

@@ -42,14 +42,14 @@ export function MediaTaxonomyPicker({
   const suggestionsRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const currentTerms = useQuery(api.taxonomies.getTermsByMedia, {
+  const currentTerms = useQuery(api.admin.getTermsByMedia, {
     mediaId,
     taxonomyId,
   })
 
   const selectedTermIds = currentTerms?.map((t: TaxonomyTermDisplay) => t._id) ?? []
 
-  const suggestionsResult = useQuery(api.taxonomies.suggestTerms, {
+  const suggestionsResult = useQuery(api.admin.suggestTerms, {
     taxonomyId,
     query: inputValue,
     limit: 10,
@@ -57,8 +57,8 @@ export function MediaTaxonomyPicker({
   })
   const suggestions = (suggestionsResult ?? []) as TaxonomyTermDisplay[]
 
-  const setMediaTermsMutation = useMutation(api.taxonomies.setMediaTerms)
-  const createTermMutation = useMutation(api.taxonomies.createTermAndAddToMedia)
+  const setMediaTermsMutation = useMutation(api.admin.setMediaTerms)
+  const createTermMutation = useMutation(api.admin.createTermAndAddToMedia)
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {

package/admin/src/components/ui/collapsible.tsx

@@ -0,0 +1,7 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -4,7 +4,7 @@ import { api } from "../../convex/_generated/api";
 import type { AdminConfig } from "~/lib/admin-config";
 import { AdminConfigProvider } from "./AdminConfigContext";
 
-type Settings = NonNullable<typeof api.settings.get._returnType>;
+type Settings = NonNullable<typeof api.admin.getSettings._returnType>;
 
 interface SettingsConfigContextValue {
   baseConfig: AdminConfig;
@@ -20,7 +20,7 @@ export function SettingsConfigProvider({
   baseConfig: AdminConfig;
   children: ReactNode;
 }) {
-  const settings = useQuery(api.settings.get);
+  const settings = useQuery(api.admin.getSettings);
 
   const mergedConfig = useMemo((): AdminConfig => {
     if (!settings) return baseConfig;

package/admin/src/embed/components/EmbedSidebar.tsx

@@ -5,11 +5,20 @@
  * the EmbedNavigation context for navigation instead of TanStack Router.
  */
 
-import { Layers } from "lucide-react";
+import { useState } from "react";
+import { useQuery } from "convex/react";
+import { Layers, ChevronDown } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { useAdminConfig } from "../../contexts";
 import { Icon } from "../../lib/icons";
 import { useEmbedNavigation, type EmbedRoute } from "../navigation";
+import { useApi } from "../contexts/ApiContext";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../../components/ui/collapsible";
+import { ContentTypeFormModal } from "../../components/ContentTypeFormModal";
 import type { NavItem } from "../../lib/admin-config";
 
 function pathToRoute(path: string): EmbedRoute {
@@ -25,95 +34,181 @@ function pathToRoute(path: string): EmbedRoute {
 }
 
 export function EmbedSidebar() {
-  const { currentPath, navigate } = useEmbedNavigation();
+  const { currentPath, navigate, navigateToContentType } = useEmbedNavigation();
   const config = useAdminConfig();
   const { navItems, branding, layout } = config;
+  const api = useApi();
+
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+  const contentTypesResult = useQuery(api.listContentTypes, {
+    isActive: true,
+  });
+  const contentTypes = contentTypesResult?.page ?? [];
+
+  const normalizedPath = currentPath.replace(/^\/admin/, "");
 
   const isActive = (path: string, exact?: boolean) => {
-    const normalizedCurrent = currentPath.replace(/^\/admin/, "");
     if (exact) {
-      return normalizedCurrent === path;
+      return normalizedPath === path;
     }
-    return normalizedCurrent.startsWith(path);
+    return normalizedPath.startsWith(path);
   };
 
+  const isContentActive =
+    normalizedPath === "/content" ||
+    normalizedPath.startsWith("/entries/type/") ||
+    normalizedPath.startsWith("/entries/new/") ||
+    normalizedPath.startsWith("/entries/");
+
   const handleNavClick = (item: NavItem) => {
     const route = pathToRoute(item.path);
     navigate(route);
   };
 
-  const renderNavItem = (item: NavItem) => (
-    <button
-      key={item.id}
-      type="button"
-      onClick={() => handleNavClick(item)}
-      className={cn(
-        "flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm font-medium transition-colors",
-        isActive(item.path, item.exact)
-          ? "bg-sidebar-accent text-sidebar-accent-foreground"
-          : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground"
-      )}
-    >
-      <Icon name={item.icon} className="size-5" />
-      <span className="flex-1">{item.label}</span>
-      {item.badge && (
-        <span className="rounded-full bg-sidebar-primary px-2 py-0.5 text-xs text-sidebar-primary-foreground">
-          {item.badge}
-        </span>
-      )}
-    </button>
+  const renderNavItem = (item: NavItem) => {
+    if (item.id === "content") {
+      return renderContentMenu(item);
+    }
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        onClick={() => handleNavClick(item)}
+        className={cn(
+          "flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm font-medium transition-colors",
+          isActive(item.path, item.exact)
+            ? "bg-sidebar-accent text-sidebar-accent-foreground"
+            : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground"
+        )}
+      >
+        <Icon name={item.icon} className="size-5" />
+        <span className="flex-1">{item.label}</span>
+        {item.badge && (
+          <span className="rounded-full bg-sidebar-primary px-2 py-0.5 text-xs text-sidebar-primary-foreground">
+            {item.badge}
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  const renderContentMenu = (item: NavItem) => (
+    <Collapsible key={item.id} defaultOpen={isContentActive}>
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-3 rounded-md px-2 py-2 text-sm font-medium transition-colors",
+          isContentActive
+            ? "bg-sidebar-accent text-sidebar-accent-foreground"
+            : "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
+          "group"
+        )}
+      >
+        <Icon name={item.icon} className="size-5" />
+        <span className="flex-1 text-left">{item.label}</span>
+        <ChevronDown className="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="ml-5 mt-1 space-y-1 border-l border-sidebar-border pl-3">
+          <button
+            type="button"
+            onClick={() => navigate("content")}
+            className={cn(
+              "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+              normalizedPath === "/content"
+                ? "bg-sidebar-accent/60 text-sidebar-accent-foreground"
+                : "text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground"
+            )}
+          >
+            All Entries
+          </button>
+          {contentTypes.map((type) => (
+            <button
+              key={type._id}
+              type="button"
+              onClick={() => navigateToContentType(type._id)}
+              className={cn(
+                "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+                normalizedPath === `/entries/type/${type._id}`
+                  ? "bg-sidebar-accent/60 text-sidebar-accent-foreground"
+                  : "text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground"
+              )}
+            >
+              {type.displayName}
+            </button>
+          ))}
+          {contentTypes.length === 0 && contentTypesResult !== undefined && (
+            <button
+              type="button"
+              onClick={() => setIsCreateModalOpen(true)}
+              className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-sidebar-foreground/60 hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground"
+            >
+              + Create content type
+            </button>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 
   const sidebarWidth = layout.sidebarWidth;
 
   return (
-    <aside
-      className="fixed inset-y-0 left-0 z-50 flex flex-col border-r border-sidebar-border bg-sidebar"
-      style={{ width: sidebarWidth }}
-    >
-      <div className="flex h-14 items-center gap-2 border-b border-sidebar-border px-4">
-        <button
-          type="button"
-          onClick={() => navigate("dashboard")}
-          className="flex items-center gap-2 font-semibold text-sidebar-foreground"
-        >
-          {branding.logo ? (
-            <img src={branding.logo} alt={branding.appName} className="size-8" />
-          ) : (
-            <div className="flex size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-              <Layers className="size-4" />
+    <>
+      <aside
+        className="fixed inset-y-0 left-0 z-50 flex flex-col border-r border-sidebar-border bg-sidebar"
+        style={{ width: sidebarWidth }}
+      >
+        <div className="flex h-14 items-center gap-2 border-b border-sidebar-border px-4">
+          <button
+            type="button"
+            onClick={() => navigate("dashboard")}
+            className="flex items-center gap-2 font-semibold text-sidebar-foreground"
+          >
+            {branding.logo ? (
+              <img src={branding.logo} alt={branding.appName} className="size-8" />
+            ) : (
+              <div className="flex size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <Layers className="size-4" />
+              </div>
+            )}
+            <span className="text-base">{branding.appName}</span>
+          </button>
+        </div>
+
+        <nav className="flex-1 space-y-6 overflow-y-auto p-4">
+          {navItems.main.length > 0 && (
+            <div className="space-y-1">
+              <span className="px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60">
+                Main
+              </span>
+              <div className="space-y-1 pt-2">{navItems.main.map(renderNavItem)}</div>
             </div>
           )}
-          <span className="text-base">{branding.appName}</span>
-        </button>
-      </div>
-
-      <nav className="flex-1 space-y-6 overflow-y-auto p-4">
-        {navItems.main.length > 0 && (
-          <div className="space-y-1">
-            <span className="px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60">
-              Main
-            </span>
-            <div className="space-y-1 pt-2">{navItems.main.map(renderNavItem)}</div>
-          </div>
-        )}
 
-        {navItems.config.length > 0 && (
-          <div className="space-y-1">
-            <span className="px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60">
-              Configuration
-            </span>
-            <div className="space-y-1 pt-2">{navItems.config.map(renderNavItem)}</div>
-          </div>
-        )}
-      </nav>
+          {navItems.config.length > 0 && (
+            <div className="space-y-1">
+              <span className="px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/60">
+                Configuration
+              </span>
+              <div className="space-y-1 pt-2">{navItems.config.map(renderNavItem)}</div>
+            </div>
+          )}
+        </nav>
 
-      <div className="border-t border-sidebar-border p-4">
-        <div className="flex items-center justify-between text-xs text-sidebar-foreground/60">
-          <span>Version</span>
-          <span className="font-mono">0.1.0</span>
+        <div className="border-t border-sidebar-border p-4">
+          <div className="flex items-center justify-between text-xs text-sidebar-foreground/60">
+            <span>Version</span>
+            <span className="font-mono">0.1.0</span>
+          </div>
         </div>
-      </div>
-    </aside>
+      </aside>
+
+      <ContentTypeFormModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+      />
+    </>
   );
 }