convex-cms 0.0.15 → 0.0.16

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

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "../../lib/cn"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "~/lib/cn"
+import { cn } from "../../lib/cn"
 
 function TooltipProvider({
   delayDuration = 0,

package/admin/src/contexts/SettingsConfigContext.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "convex/react";
 import type { FunctionReference } from "convex/server";
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import type { AdminConfig } from "~/lib/admin-config";
+import type { AdminConfig } from "../lib/admin-config";
 import { AdminConfigProvider } from "./AdminConfigContext";
 
 /**

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

@@ -7,6 +7,8 @@
 import { ChevronLeft, Bell, HelpCircle, User, LogOut, Moon, Sun } from "lucide-react";
 import { useAdminConfig, useTheme, useAuth } from "../../contexts";
 import { useEmbedNavigation } from "../navigation";
+import { SidebarTrigger } from "../../components/ui/sidebar";
+import { Separator } from "../../components/ui/separator";
 
 export function EmbedHeader() {
   const { goBack, canGoBack, currentRoute } = useEmbedNavigation();
@@ -28,8 +30,10 @@ export function EmbedHeader() {
   const title = routeTitles[currentRoute.route] || "Dashboard";
 
   return (
-    <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background px-6">
-      <div className="flex items-center gap-4">
+    <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background px-3 md:px-6">
+      <div className="flex items-center gap-2 md:gap-4">
+        <SidebarTrigger className="md:hidden" />
+        <Separator orientation="vertical" className="data-[orientation=vertical]:h-4 md:hidden" />
         {canGoBack && (
           <button
             type="button"
@@ -37,13 +41,13 @@ export function EmbedHeader() {
             className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
           >
             <ChevronLeft className="size-4" />
-            Back
+            <span className="hidden sm:inline">Back</span>
           </button>
         )}
-        <h1 className="text-lg font-semibold text-foreground">{title}</h1>
+        <h1 className="text-base font-semibold text-foreground md:text-lg">{title}</h1>
       </div>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-1 md:gap-2">
         {canToggleDarkMode && (
           <button
             type="button"
@@ -57,7 +61,7 @@ export function EmbedHeader() {
 
         <button
           type="button"
-          className="flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="hidden items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground md:flex md:size-9"
           title="Notifications"
         >
           <Bell className="size-5" />
@@ -65,14 +69,14 @@ export function EmbedHeader() {
 
         <button
           type="button"
-          className="flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="hidden items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground md:flex md:size-9"
           title="Help"
         >
           <HelpCircle className="size-5" />
         </button>
 
         {isAuthenticated && user && (
-          <div className="ml-2 flex items-center gap-2 border-l border-border pl-4">
+          <div className="ml-1 flex items-center gap-2 border-l border-border pl-2 md:ml-2 md:pl-4">
             <div className="flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
               {user.avatarUrl ? (
                 <img
@@ -85,7 +89,7 @@ export function EmbedHeader() {
               )}
             </div>
             {user.name && (
-              <span className="text-sm font-medium text-foreground">
+              <span className="hidden text-sm font-medium text-foreground md:inline">
                 {user.name}
               </span>
             )}

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

@@ -9,6 +9,7 @@ import type { ReactNode } from "react";
 import { EmbedSidebar } from "./EmbedSidebar";
 import { EmbedHeader } from "./EmbedHeader";
 import { useAdminConfig } from "../../contexts";
+import { SidebarProvider, SidebarInset } from "../../components/ui/sidebar";
 
 interface EmbedLayoutProps {
   children: ReactNode;
@@ -18,12 +19,19 @@ export function EmbedLayout({ children }: EmbedLayoutProps) {
   const { layout } = useAdminConfig();
 
   return (
-    <div className="flex min-h-screen bg-background">
+    <SidebarProvider
+      defaultOpen={true}
+      style={
+        {
+          "--sidebar-width": `${layout.sidebarWidth}px`,
+        } as React.CSSProperties
+      }
+    >
       <EmbedSidebar />
-      <div className="flex flex-1 flex-col" style={{ marginLeft: layout.sidebarWidth }}>
+      <SidebarInset>
         <EmbedHeader />
-        <main className="flex-1 overflow-auto p-6">{children}</main>
-      </div>
-    </div>
+        <div className="flex-1 overflow-auto p-3 md:p-6">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }

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

@@ -6,9 +6,9 @@
  */
 
 import { useState } from "react";
+import { version } from "../../../../package.json";
 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";
@@ -18,6 +18,21 @@ import {
   CollapsibleTrigger,
   CollapsibleContent,
 } from "../../components/ui/collapsible";
+import {
+  Sidebar as ShadcnSidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  useSidebar,
+} from "../../components/ui/sidebar";
 import { ContentTypeFormModal } from "../../components/ContentTypeFormModal";
 import type { NavItem } from "../../lib/admin-config";
 
@@ -28,6 +43,7 @@ function pathToRoute(path: string): EmbedRoute {
   if (path.startsWith("/content")) return "content";
   if (path.startsWith("/media")) return "media";
   if (path.startsWith("/taxonomies")) return "taxonomies";
+  if (path.startsWith("/users")) return "users";
   if (path.startsWith("/settings")) return "settings";
   if (path.startsWith("/trash")) return "trash";
   return "dashboard";
@@ -36,8 +52,9 @@ function pathToRoute(path: string): EmbedRoute {
 export function EmbedSidebar() {
   const { currentPath, navigate, navigateToContentType } = useEmbedNavigation();
   const config = useAdminConfig();
-  const { navItems, branding, layout } = config;
+  const { navItems, branding } = config;
   const api = useApi();
+  const { setOpenMobile, isMobile } = useSidebar();
 
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
@@ -61,9 +78,14 @@ export function EmbedSidebar() {
     normalizedPath.startsWith("/entries/new/") ||
     normalizedPath.startsWith("/entries/");
 
+  const closeMobileSheet = () => {
+    if (isMobile) setOpenMobile(false);
+  };
+
   const handleNavClick = (item: NavItem) => {
     const route = pathToRoute(item.path);
     navigate(route);
+    closeMobileSheet();
   };
 
   const renderNavItem = (item: NavItem) => {
@@ -72,99 +94,86 @@ export function EmbedSidebar() {
     }
 
     return (
-      <button
-        key={item.id}
-        type="button"
-        onClick={() => handleNavClick(item)}
-        className={cn(
-          "flex w-full hover:cursor-pointer 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>
+      <SidebarMenuItem key={item.id}>
+        <SidebarMenuButton
+          isActive={isActive(item.path, item.exact)}
+          onClick={() => handleNavClick(item)}
+        >
+          <Icon name={item.icon} className="size-5" />
+          <span>{item.label}</span>
+          {item.badge && (
+            <span className="ml-auto rounded-full bg-sidebar-primary px-2 py-0.5 text-xs text-sidebar-primary-foreground">
+              {item.badge}
+            </span>
+          )}
+        </SidebarMenuButton>
+      </SidebarMenuItem>
     );
   };
 
   const renderContentMenu = (item: NavItem) => (
-    <Collapsible key={item.id} defaultOpen={isContentActive}>
-      <CollapsibleTrigger
-        className={cn(
-          "flex w-full hover:cursor-pointer 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 hover:cursor-pointer 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"
+    <Collapsible key={item.id} defaultOpen={isContentActive} className="group/collapsible">
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton isActive={isContentActive}>
+            <Icon name={item.icon} className="size-5" />
+            <span>{item.label}</span>
+            <ChevronDown className="ml-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            <SidebarMenuSubItem>
+              <SidebarMenuSubButton
+                isActive={normalizedPath === "/content"}
+                onClick={() => {
+                  navigate("content");
+                  closeMobileSheet();
+                }}
+              >
+                All Entries
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+            {contentTypes.map((type) => (
+              <SidebarMenuSubItem key={type._id}>
+                <SidebarMenuSubButton
+                  isActive={normalizedPath === `/entries/type/${type._id}`}
+                  onClick={() => {
+                    navigateToContentType(type._id);
+                    closeMobileSheet();
+                  }}
+                >
+                  {type.displayName}
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+            {contentTypes.length === 0 && contentTypesResult !== undefined && (
+              <SidebarMenuSubItem>
+                <SidebarMenuSubButton
+                  onClick={() => setIsCreateModalOpen(true)}
+                  className="text-sidebar-foreground/60"
+                >
+                  + Create content type
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
             )}
-          >
-            All Entries
-          </button>
-          {contentTypes.map((type) => (
-            <button
-              key={type._id}
-              type="button"
-              onClick={() => navigateToContentType(type._id)}
-              className={cn(
-                "flex w-full hover:cursor-pointer 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>
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
     </Collapsible>
   );
 
-  const sidebarWidth = layout.sidebarWidth;
-
   return (
     <>
-      <aside
-        className="fixed inset-y-0 left-0 z-50 flex flex-col border-r bg-sidebar"
-        style={{ width: sidebarWidth }}
-      >
-        <div className="flex h-14 items-center gap-2 px-4">
+      <ShadcnSidebar collapsible="offcanvas" className="bg-sidebar">
+        <SidebarHeader className="border-none">
           <button
             type="button"
-            onClick={() => navigate("dashboard")}
-            className="flex items-center gap-2 font-semibold text-sidebar-foreground"
+            onClick={() => {
+              navigate("dashboard");
+              closeMobileSheet();
+            }}
+            className="flex h-14 items-center gap-2 px-2 font-semibold text-sidebar-foreground"
           >
             {branding.logo ? (
               <img src={branding.logo} alt={branding.appName} className="size-8 bg-primary" />
@@ -175,35 +184,31 @@ export function EmbedSidebar() {
             )}
             <span className="text-base">{branding.appName}</span>
           </button>
-        </div>
+        </SidebarHeader>
 
-        <nav className="flex-1 space-y-6 overflow-y-auto p-4">
+        <SidebarContent>
           {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>
+            <SidebarGroup>
+              <SidebarGroupLabel>Main</SidebarGroupLabel>
+              <SidebarMenu>{navItems.main.map(renderNavItem)}</SidebarMenu>
+            </SidebarGroup>
           )}
 
           {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>
+            <SidebarGroup>
+              <SidebarGroupLabel>Configuration</SidebarGroupLabel>
+              <SidebarMenu>{navItems.config.map(renderNavItem)}</SidebarMenu>
+            </SidebarGroup>
           )}
-        </nav>
+        </SidebarContent>
 
-        <div className="p-4">
+        <SidebarFooter className="border-t border-sidebar-border">
           <div className="flex items-center justify-between text-xs text-sidebar-foreground/60">
             <span>Version</span>
-            <span className="font-mono">0.0.11</span>
+            <span className="font-mono">{version}</span>
           </div>
-        </div>
-      </aside>
+        </SidebarFooter>
+      </ShadcnSidebar>
 
       <ContentTypeFormModal
         isOpen={isCreateModalOpen}

package/admin/src/embed/contexts/ApiContext.tsx

@@ -7,7 +7,7 @@
  */
 
 import { createContext, useContext, type ReactNode } from "react";
-import type { BaseAdminAPI } from "~/lib/cmsExports";
+import type { BaseAdminAPI } from "../../lib/cmsExports";
 
 // CmsAdminApi accepts BaseAdminAPI with optional namespaced exports.
 // This allows the API to work with Convex's FilterApi which removes

package/admin/src/embed/index.tsx

@@ -1,41 +1,16 @@
 /**
  * Embeddable CMS Admin Component
  *
- * Use this component to embed the CMS admin UI into your existing React app.
- * Provides a fully functional admin interface with router-agnostic navigation.
+ * Prerequisites:
+ * 1. Render inside a ConvexProvider.
+ * 2. Add Tailwind v4 source scanning in your CSS (see admin-ui-setup guide).
+ * 3. Pass className="h-screen" for correct layout height.
  *
- * IMPORTANT: The CmsAdmin component must be rendered within a ConvexProvider.
- * Your app should already have this if you're using Convex.
- *
- * @example
- * ```tsx
- * import { CmsAdmin } from "convex-cms/admin";
- * import { api } from "./convex/_generated/api";
- *
- * function App() {
- *   return (
- *     <ConvexProvider client={convex}>
- *       <CmsAdmin
- *         api={api.admin}
- *         auth={{
- *           getUser: () => currentUser,
- *           getUserRole: (userId) => userRoles[userId] ?? null,
- *           onLogout: () => signOut(),
- *         }}
- *         config={{
- *           branding: { appName: "My CMS" },
- *           navigation: { showTaxonomies: false },
- *         }}
- *         basePath="/admin"
- *       />
- *     </ConvexProvider>
- *   );
- * }
- * ```
+ * See docs/guides/admin-ui-setup.md for full setup instructions.
  */
 
-import { useConvex } from "convex/react";
-import { useMemo } from "react";
+import { useConvex, useMutation } from "convex/react";
+import { useMemo, useEffect, useRef } from "react";
 import { cn } from "../lib/cn";
 import { SettingsConfigProvider } from "../contexts/SettingsConfigContext";
 import {
@@ -66,6 +41,7 @@ import {
   EmbedTaxonomies,
   EmbedNewEntry,
   EmbedEntry,
+  EmbedUsers,
 } from "./pages";
 
 function adaptAuthConfig(auth: CmsAdminAuthConfig): {
@@ -99,6 +75,8 @@ function EmbedRouter() {
         return <EmbedTaxonomies />;
       case "trash":
         return <EmbedTrash />;
+      case "users":
+        return <EmbedUsers />;
       case "entries": {
         // Handle new entry action
         if (currentRoute.params.action === "new") {
@@ -144,6 +122,27 @@ export function CmsAdmin({
     [api]
   );
 
+  // Auto-register the current user's profile in CMS on mount
+  const registerSelf = api.registerSelf ? useMutation(api.registerSelf) : null;
+  const hasRegistered = useRef(false);
+  useEffect(() => {
+    if (hasRegistered.current || !registerSelf) return;
+    hasRegistered.current = true;
+
+    // Get user profile from the auth config and send to server
+    Promise.resolve(auth.getUser()).then((user) => {
+      if (user) {
+        registerSelf({
+          displayName: user.name,
+          email: user.email,
+          avatarUrl: user.avatarUrl,
+        }).catch(() => {
+          // Non-critical — profile registration failed silently
+        });
+      }
+    });
+  }, [registerSelf, auth]);
+
   if (!convex) {
     return (
       <div

package/admin/src/embed/navigation.tsx

@@ -20,6 +20,7 @@ export type EmbedRoute =
   | "content-types"
   | "media"
   | "taxonomies"
+  | "users"
   | "settings"
   | "trash"
   | "entries";
@@ -56,6 +57,8 @@ function routeToPath(route: EmbedRoute, params: Record<string, string>): string
       return "/media";
     case "taxonomies":
       return "/taxonomies";
+    case "users":
+      return "/users";
     case "settings":
       return "/settings";
     case "trash":