convex-cms 0.0.15 → 0.0.16

package/admin/src/components/Sidebar.tsx

@@ -1,183 +1,201 @@
 import { useState } from "react";
+import { version } from "../../../package.json";
 import { Link, useRouterState } from "@tanstack/react-router";
 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 { useApi } from "~/embed/contexts/ApiContext";
+import { useAdminConfig } from "../contexts";
+import { Icon } from "../lib/icons";
+import { useApi } from "../embed/contexts/ApiContext";
 import {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "~/components/ui/collapsible";
-import { ContentTypeFormModal } from "~/components/ContentTypeFormModal";
-import type { NavItem } from "~/lib/admin-config";
+	Collapsible,
+	CollapsibleTrigger,
+	CollapsibleContent,
+} from "./ui/collapsible";
+import {
+	Sidebar as ShadcnSidebar,
+	SidebarHeader,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuItem,
+	SidebarMenuButton,
+	SidebarMenuSub,
+	SidebarMenuSubItem,
+	SidebarMenuSubButton,
+	useSidebar,
+} from "./ui/sidebar";
+import { ContentTypeFormModal } from "./ContentTypeFormModal";
+import type { NavItem } from "../lib/admin-config";
 
 export function Sidebar() {
-  const routerState = useRouterState();
-  const currentPath = routerState.location.pathname;
-  const config = useAdminConfig();
-  const { navItems, branding, layout } = config;
-  const api = useApi();
+	const routerState = useRouterState();
+	const currentPath = routerState.location.pathname;
+	const config = useAdminConfig();
+	const { navItems, branding } = config;
+	const api = useApi();
+	const { setOpenMobile, isMobile } = useSidebar();
 
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const contentTypesResult = useQuery(api.listContentTypes, {
-    isActive: true,
-  });
-  const contentTypes = contentTypesResult?.page ?? [];
+	const contentTypesResult = useQuery(api.listContentTypes, {
+		isActive: true,
+	});
+	const contentTypes = contentTypesResult?.page ?? [];
 
-  const isActive = (to: string, exact?: boolean) => {
-    if (exact) {
-      return currentPath === to;
-    }
-    return currentPath.startsWith(to);
-  };
+	const isActive = (to: string, exact?: boolean) => {
+		if (exact) {
+			return currentPath === to;
+		}
+		return currentPath.startsWith(to);
+	};
 
-  const isContentActive =
-    currentPath === "/content" ||
-    currentPath.startsWith("/entries/type/") ||
-    currentPath.startsWith("/entries/new/") ||
-    currentPath.startsWith("/entries/");
+	const isContentActive =
+		currentPath === "/content" ||
+		currentPath.startsWith("/entries/type/") ||
+		currentPath.startsWith("/entries/new/") ||
+		currentPath.startsWith("/entries/");
 
-  const renderNavItem = (item: NavItem) => {
-    if (item.id === "content") {
-      return renderContentMenu(item);
-    }
+	const closeMobileSheet = () => {
+		if (isMobile) setOpenMobile(false);
+	};
 
-    return (
-      <Link
-        key={item.id}
-        to={item.path}
-        className={cn(
-          "flex items-center gap-3 rounded-md px-2 py-2 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>
-        )}
-      </Link>
-    );
-  };
+	const renderNavItem = (item: NavItem) => {
+		if (item.id === "content") {
+			return renderContentMenu(item);
+		}
 
-  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">
-          <Link
-            to="/content"
-            className={cn(
-              "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-              currentPath === "/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
-          </Link>
-          {contentTypes.map((type) => (
-            <Link
-              key={type._id}
-              to="/entries/type/$contentTypeId"
-              params={{ contentTypeId: type._id }}
-              className={cn(
-                "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-                currentPath === `/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}
-            </Link>
-          ))}
-          {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>
-  );
+		return (
+			<SidebarMenuItem key={item.id}>
+				<SidebarMenuButton
+					asChild
+					isActive={isActive(item.path, item.exact)}
+					onClick={closeMobileSheet}
+				>
+					<Link to={item.path}>
+						<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>
+						)}
+					</Link>
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+		);
+	};
 
-  const sidebarWidth = layout.sidebarWidth;
+	const renderContentMenu = (item: NavItem) => (
+		<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
+								asChild
+								isActive={currentPath === "/content"}
+								onClick={closeMobileSheet}
+							>
+								<Link to="/content">All Entries</Link>
+							</SidebarMenuSubButton>
+						</SidebarMenuSubItem>
+						{contentTypes.map((type) => (
+							<SidebarMenuSubItem key={type._id}>
+								<SidebarMenuSubButton
+									asChild
+									isActive={currentPath === `/entries/type/${type._id}`}
+									onClick={closeMobileSheet}
+								>
+									<Link
+										to="/entries/type/$contentTypeId"
+										params={{ contentTypeId: type._id }}
+									>
+										{type.displayName}
+									</Link>
+								</SidebarMenuSubButton>
+							</SidebarMenuSubItem>
+						))}
+						{contentTypes.length === 0 && contentTypesResult !== undefined && (
+							<SidebarMenuSubItem>
+								<SidebarMenuSubButton
+									onClick={() => setIsCreateModalOpen(true)}
+									className="text-sidebar-foreground/60"
+								>
+									+ Create content type
+								</SidebarMenuSubButton>
+							</SidebarMenuSubItem>
+						)}
+					</SidebarMenuSub>
+				</CollapsibleContent>
+			</SidebarMenuItem>
+		</Collapsible>
+	);
 
-  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">
-          <Link to="/" 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>
-          </Link>
-        </div>
+	return (
+		<>
+			<ShadcnSidebar collapsible="offcanvas" className="bg-sidebar">
+				<SidebarHeader className="border-none">
+					<Link
+						to="/"
+						className="flex h-14 items-center gap-2 px-2 font-semibold text-sidebar-foreground"
+						onClick={closeMobileSheet}
+					>
+						{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>
+					</Link>
+				</SidebarHeader>
 
-        <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>
-          )}
+				<SidebarContent>
+					{navItems.main.length > 0 && (
+						<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>
-          )}
-        </nav>
+					{navItems.config.length > 0 && (
+						<SidebarGroup>
+							<SidebarGroupLabel>Configuration</SidebarGroupLabel>
+							<SidebarMenu>{navItems.config.map(renderNavItem)}</SidebarMenu>
+						</SidebarGroup>
+					)}
+				</SidebarContent>
 
-        <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>
-      </aside>
+				<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">{version}</span>
+					</div>
+				</SidebarFooter>
+			</ShadcnSidebar>
 
-      <ContentTypeFormModal
-        isOpen={isCreateModalOpen}
-        onClose={() => setIsCreateModalOpen(false)}
-      />
-    </>
-  );
+			<ContentTypeFormModal
+				isOpen={isCreateModalOpen}
+				onClose={() => setIsCreateModalOpen(false)}
+			/>
+		</>
+	);
 }

package/admin/src/components/TaxonomyEditor.tsx

@@ -1,12 +1,12 @@
 import { useState, useCallback, useEffect } from 'react'
 import { useMutation } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
-import { CmsDialog } from '~/components/cmsds/CmsDialog'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { Input } from '~/components/ui/input'
-import { Label } from '~/components/ui/label'
-import { Textarea } from '~/components/ui/textarea'
-import { Checkbox } from '~/components/ui/checkbox'
+import { useApi } from '../embed/contexts/ApiContext'
+import { CmsDialog } from './cmsds/CmsDialog'
+import { CmsButton } from './cmsds/CmsButton'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import { Textarea } from './ui/textarea'
+import { Checkbox } from './ui/checkbox'
 
 interface Taxonomy {
   _id: string
@@ -186,14 +186,14 @@ export function TaxonomyEditor({
         </>
       }
     >
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
         {submitError && (
           <div className="diff-removed rounded-lg border px-3 py-2 text-sm">
             {submitError}
           </div>
         )}
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <Label htmlFor="displayName">
             Display Name <span className="text-destructive">*</span>
           </Label>
@@ -210,7 +210,7 @@ export function TaxonomyEditor({
           )}
         </div>
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <Label htmlFor="name">
             Slug <span className="text-destructive">*</span>
           </Label>
@@ -235,7 +235,7 @@ export function TaxonomyEditor({
           )}
         </div>
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <Label htmlFor="description">Description</Label>
           <Textarea
             id="description"
@@ -248,7 +248,7 @@ export function TaxonomyEditor({
         </div>
 
         <div className="grid grid-cols-2 gap-4">
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <Label htmlFor="icon">Icon</Label>
             <Input
               id="icon"
@@ -260,7 +260,7 @@ export function TaxonomyEditor({
             <p className="text-xs text-muted-foreground">Emoji or icon name</p>
           </div>
 
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <Label htmlFor="sortOrder">Sort Order</Label>
             <Input
               id="sortOrder"
@@ -274,7 +274,7 @@ export function TaxonomyEditor({
           </div>
         </div>
 
-        <div className="space-y-4 pt-2">
+        <div className="flex flex-col gap-4 pt-2">
           <div className="flex items-start gap-3">
             <Checkbox
               id="isHierarchical"
@@ -284,7 +284,7 @@ export function TaxonomyEditor({
               }
               disabled={isSubmitting || isEditing}
             />
-            <div className="space-y-0.5">
+            <div className="flex flex-col gap-0.5">
               <Label
                 htmlFor="isHierarchical"
                 className="cursor-pointer font-medium"
@@ -311,7 +311,7 @@ export function TaxonomyEditor({
               }
               disabled={isSubmitting}
             />
-            <div className="space-y-0.5">
+            <div className="flex flex-col gap-0.5">
               <Label
                 htmlFor="allowInlineCreation"
                 className="cursor-pointer font-medium"
@@ -333,7 +333,7 @@ export function TaxonomyEditor({
               }
               disabled={isSubmitting}
             />
-            <div className="space-y-0.5">
+            <div className="flex flex-col gap-0.5">
               <Label htmlFor="isActive" className="cursor-pointer font-medium">
                 Active
               </Label>

package/admin/src/components/TermTree.tsx

@@ -1,14 +1,14 @@
 import { useState, useCallback } from 'react'
 import { useQuery, useMutation } from 'convex/react'
-import { useApi } from '~/embed/contexts/ApiContext'
-import { CmsDialog, CmsConfirmDialog } from '~/components/cmsds/CmsDialog'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { CmsEmptyState } from '~/components/cmsds/CmsEmptyState'
-import { Input } from '~/components/ui/input'
-import { Label } from '~/components/ui/label'
-import { Textarea } from '~/components/ui/textarea'
+import { useApi } from '../embed/contexts/ApiContext'
+import { CmsDialog, CmsConfirmDialog } from './cmsds/CmsDialog'
+import { CmsButton } from './cmsds/CmsButton'
+import { CmsEmptyState } from './cmsds/CmsEmptyState'
+import { Input } from './ui/input'
+import { Label } from './ui/label'
+import { Textarea } from './ui/textarea'
 import { ChevronRight, ChevronDown, Plus, Pencil, Trash2, Tags } from 'lucide-react'
-import { cn } from '~/lib/cn'
+import { cn } from '../lib/cn'
 
 interface Term {
   _id: string
@@ -187,7 +187,7 @@ export function TermTree({
   }
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-foreground">Terms</h3>
         <CmsButton variant="secondary" size="sm" onClick={() => handleCreateTerm()}>
@@ -436,14 +436,14 @@ function TermEditModal({
         </>
       }
     >
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
         {submitError && (
           <div className="diff-removed rounded-lg border px-3 py-2 text-sm">
             {submitError}
           </div>
         )}
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <Label htmlFor="termName">
             Name <span className="text-destructive">*</span>
           </Label>
@@ -460,7 +460,7 @@ function TermEditModal({
           )}
         </div>
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <Label htmlFor="termSlug">
             Slug <span className="text-destructive">*</span>
           </Label>
@@ -480,7 +480,7 @@ function TermEditModal({
           )}
         </div>
 
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <Label htmlFor="termDescription">Description</Label>
           <Textarea
             id="termDescription"
@@ -493,7 +493,7 @@ function TermEditModal({
         </div>
 
         <div className="grid grid-cols-3 gap-3">
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <Label htmlFor="termColor">Color</Label>
             <Input
               id="termColor"
@@ -505,7 +505,7 @@ function TermEditModal({
             />
           </div>
 
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <Label htmlFor="termIcon">Icon</Label>
             <Input
               id="termIcon"
@@ -516,7 +516,7 @@ function TermEditModal({
             />
           </div>
 
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <Label htmlFor="termSortOrder">Sort Order</Label>
             <Input
               id="termSortOrder"

package/admin/src/components/UploadDropzone.tsx

@@ -3,10 +3,10 @@ import {
   useMediaUploadQueue,
   type UploadQueueFile,
   type UploadQueueFileStatus,
-} from '~/lib/cmsExports'
+} from '../lib/cmsExports'
 import type { FunctionReference } from 'convex/server'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { cn } from '~/lib/cn'
+import { CmsButton } from './cmsds/CmsButton'
+import { cn } from '../lib/cn'
 import { Upload, Check, X, RefreshCw, AlertCircle } from 'lucide-react'
 
 export interface UploadDropzoneProps {
@@ -116,16 +116,25 @@ export function UploadDropzone({
     [validateFile, queue]
   )
 
+  // Use a counter to handle drag enter/leave on child elements.
+  // dragenter fires when entering children, dragleave fires when leaving them.
+  // Only deactivate when the counter reaches 0 (fully left the dropzone).
+  const dragCounterRef = useRef(0)
+
   const handleDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
+    dragCounterRef.current++
     setIsDragActive(true)
   }, [])
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    setIsDragActive(false)
+    dragCounterRef.current--
+    if (dragCounterRef.current === 0) {
+      setIsDragActive(false)
+    }
   }, [])
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -137,6 +146,7 @@ export function UploadDropzone({
     (e: React.DragEvent) => {
       e.preventDefault()
       e.stopPropagation()
+      dragCounterRef.current = 0
       setIsDragActive(false)
       if (e.dataTransfer.files?.length) {
         addFiles(e.dataTransfer.files)
@@ -178,12 +188,12 @@ export function UploadDropzone({
   const hasCompletedOrFailed = completedCount > 0 || errorCount > 0
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
       {validationErrors.size > 0 && (
         <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
           <div className="flex items-start gap-2">
             <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" />
-            <div className="flex-1 space-y-1">
+            <div className="flex flex-col gap-1 flex-1">
               {Array.from(validationErrors.entries()).map(([filename, error]) => (
                 <p key={filename} className="text-sm text-destructive">
                   <span className="font-medium">{filename}:</span> {error}
@@ -233,7 +243,7 @@ export function UploadDropzone({
       )}
 
       {queue.files.length > 0 && (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2 text-sm">
               <span className="font-medium">
@@ -287,7 +297,7 @@ export function UploadDropzone({
             </div>
           )}
 
-          <div className="space-y-2">
+          <div className="flex max-h-64 flex-col gap-2 overflow-y-auto">
             {queue.files.map((uploadFile: UploadQueueFile) => (
               <div
                 key={uploadFile.id}