@postxl/generators 1.3.0 → 1.4.0

package/dist/frontend-admin/generators/admin-sidebar.generator.js

@@ -45,145 +45,153 @@ function generateAdminSidebar({ context }) {
         .from(Generator.toBackendModuleLocation('@ui/admin/AdminSidebar'))
         .addImport({
         from: Generator.toPackageName('react'),
-        items: [Generator.toFunctionName('useState')],
+        items: [Generator.toFunctionName('ComponentProps')],
     })
         .addImport({
-        from: Generator.toPackageName('@radix-ui/react-icons'),
-        items: [
-            Generator.toFunctionName('ChevronRightIcon'),
-            Generator.toFunctionName('ChevronDownIcon'),
-            Generator.toFunctionName('ChevronLeftIcon'),
-        ],
+        from: Generator.toPackageName('lucide-react'),
+        items: [Generator.toFunctionName('ChevronRight'), Generator.toFunctionName('Home')],
     });
     const { schemas: sortedSchemas, modelsBySchema } = (0, utils_1.groupAndSortModelsBySchema)(context);
+    // Generate schema keys for collapse state (lowercase for valid JS identifiers)
+    const schemaKeys = sortedSchemas.map((schema) => schema.toLowerCase());
+    // Generate the CollapseState type properties
+    const collapseStateTypeProps = [...schemaKeys, 'advanced'].map((key) => `  ${key}: boolean`).join('\n');
+    // Generate the defaultCollapseState properties
+    const defaultCollapseStateProps = [...schemaKeys, 'advanced'].map((key) => `  ${key}: true,`).join('\n');
     // Generate the schema sections
     const schemaSections = sortedSchemas
         .map((schema) => {
         const models = modelsBySchema.get(schema);
         const modelLinks = models
             .map((model) => `
-          <li key="${model.name}">
-            <Link
-              to="${model.route}"
-              className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-            >
-              ${model.userFriendlyName}
-            </Link>
-          </li>`)
+            <SidebarMenuSubItem key="${model.name}">
+              <SidebarMenuSubButton asChild>
+                <Link
+                  to="${model.route}"
+                  className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                >
+                  ${model.userFriendlyName}
+                </Link>
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          `)
             .join('');
+        const schemaKey = schema.toLowerCase();
         return `
-    <div key="${schema}" className="mb-4">
-      <button
-        onClick={() => toggleSchema('${schema}')}
-        className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
-      >
-        <span>${schema}</span>
-        {expandedSchemas['${schema}'] ? (
-          <ChevronDownIcon className="w-4 h-4" />
-        ) : (
-          <ChevronRightIcon className="w-4 h-4" />
-        )}
-      </button>
-      {expandedSchemas['${schema}'] && (
-        <ul className="mt-2 ml-2 space-y-1">
-          ${modelLinks}
-        </ul>
-      )}
-    </div>`;
+        <Collapse open={collapseState.${schemaKey}} onOpenChange={setOpen('${schemaKey}')} className="group/collapsible-${schemaKey}" key="${schemaKey}">
+          <SidebarGroup>
+            <SidebarGroupLabel asChild>
+              <CollapseTrigger asChild>
+                <SidebarMenuButton>
+                  ${schema}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible-${schemaKey}:rotate-90" />
+                </SidebarMenuButton>
+              </CollapseTrigger>
+            </SidebarGroupLabel>
+
+            <CollapseContent>
+              <SidebarGroupContent>
+                <SidebarMenuSub>
+                    ${modelLinks}
+                </SidebarMenuSub>
+              </SidebarGroupContent>
+            </CollapseContent>
+          </SidebarGroup>
+        </Collapse>`;
     })
         .join('');
     return `
 import { Link } from '@tanstack/react-router'
+import useSessionStorageState from 'use-session-storage-state'
+import {
+  Collapse,
+  CollapseContent,
+  CollapseTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@postxl/ui-components'
 ${imports.generate()}
 
-export function AdminSidebar() {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isCollapsed, setIsCollapsed] = useState(false)
-  const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({
-    ${sortedSchemas.map((schema) => `'${schema}': true`).join(',\n    ')},
-    'Advanced': true
+const STORAGE_KEY = 'admin-sidebar-collapse-state'
+
+type CollapseState = {
+${collapseStateTypeProps}
+}
+
+const defaultCollapseState: CollapseState = {
+${defaultCollapseStateProps}
+}
+
+export function AdminSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
+  const [collapseState, setCollapseState] = useSessionStorageState<CollapseState>(STORAGE_KEY, {
+    defaultValue: defaultCollapseState,
   })
 
-  const toggleSchema = (schema: string) => {
-    setExpandedSchemas((prev) => ({
-      ...prev,
-      [schema]: !prev[schema],
-    }))
+  const setOpen = (key: keyof CollapseState) => (open: boolean) => {
+    setCollapseState((prev) => ({ ...prev, [key]: open }))
   }
-
+  
   return (
-    <>
-      {/* Mobile toggle button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="fixed top-4 left-4 z-50 md:hidden p-2 bg-sidebar rounded shadow-lg border border-sidebar-border"
-        aria-label="Toggle admin menu"
-      >
-        {isOpen ? <ChevronDownIcon className="w-6 h-6" /> : <ChevronRightIcon className="w-6 h-6" />}
-      </button>
-
-      {/* Sidebar */}
-      <aside
-        className={\`
-          fixed md:sticky top-0 left-0 h-screen bg-sidebar border-r border-sidebar-border
-          overflow-y-auto transition-all duration-300 z-40
-          \${isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
-          \${isCollapsed ? 'w-16 min-w-16' : 'w-64 min-w-64'}
-        \`}
-      >
-        <div className="p-4">
-          <div className="flex items-center justify-between mb-4">
-            {!isCollapsed && (
-              <Link to="/admin" className="text-lg font-bold hover:text-sidebar-primary transition-colors">
-                Admin
+    <Sidebar className="h-svh border-r" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link to="/admin" className="hover:text-sidebar-primary transition-colors">
+                <Home size={16} className="mr-2" />
+                <span className="text-lg font-bold">Admin</span>
               </Link>
-            )}
-            <button
-              onClick={() => setIsCollapsed(!isCollapsed)}
-              className="hidden md:block p-1 hover:bg-sidebar-accent rounded transition-colors ml-auto"
-              aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-            >
-              {isCollapsed ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
-            </button>
-          </div>
-          {!isCollapsed && (
-            <nav>
-              ${schemaSections}
-              {import.meta.env.NEXT_PUBLIC_ALLOW_ADMIN === 'true' && (
-                <div key="Advanced" className="mb-4">
-                  <button
-                    onClick={() => toggleSchema('Advanced')}
-                    className="flex items-center justify-between w-full px-4 py-2 font-semibold text-left hover:bg-sidebar-accent rounded transition-colors"
-                  >
-                    <span>Advanced</span>
-                    {expandedSchemas['Advanced'] ? (
-                      <ChevronDownIcon className="w-4 h-4" />
-                    ) : (
-                      <ChevronRightIcon className="w-4 h-4" />
-                    )}
-                  </button>
-                  {expandedSchemas['Advanced'] && (
-                    <ul className="mt-2 ml-2 space-y-1">
-                      <li key="DataManagement">
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        ${schemaSections}
+        
+        {import.meta.env.VITE_PUBLIC_ALLOW_ADMIN === 'true' && (
+          <Collapse open={collapseState.advanced} onOpenChange={setOpen('advanced')} className="group/collapsible-advanced">
+            <SidebarGroup>
+              <SidebarGroupLabel asChild>
+                <CollapseTrigger asChild>
+                  <SidebarMenuButton>
+                    Advanced
+                    <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible-advanced:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapseTrigger>
+              </SidebarGroupLabel>
+
+              <CollapseContent>
+                <SidebarGroupContent>
+                  <SidebarMenuSub>
+                    <SidebarMenuSubItem key="DataManagement">
+                      <SidebarMenuSubButton asChild>
                         <Link
                           to="/admin/data-management"
                           className="block px-4 py-2 hover:bg-sidebar-accent rounded transition-colors"
                         >
                           Data Management
                         </Link>
-                      </li>
-                    </ul>
-                  )}
-                </div>
-              )}
-            </nav>
-          )}
-        </div>
-      </aside>
-
-      {/* Overlay for mobile */}
-      {isOpen && <div role="button" className="fixed inset-0 bg-sidebar/20 z-30 md:hidden h-full" onClick={() => setIsOpen(false)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { setIsOpen(false) } }} tabIndex={-1} />}
-    </>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  </SidebarMenuSub>
+                </SidebarGroupContent>
+              </CollapseContent>
+            </SidebarGroup>
+          </Collapse>
+        )}
+      </SidebarContent>
+    </Sidebar>
   )
 }
 `;

package/dist/frontend-admin/generators/admin-sidebar.generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin-sidebar.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/admin-sidebar.generator.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,oDA0JC;AAlKD,6DAA8C;AAG9C,oCAAqD;AAErD;;GAEG;AACH,SAAgB,oBAAoB,CAAC,EAAE,OAAO,EAA8B;IAC1E,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe;QACvC,EAAE;SACD,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,wBAAwB,CAAC,CAAC;SACjE,SAAS,CAAC;QACT,IAAI,EAAE,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC;QACtC,KAAK,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;KAC9C,CAAC;SACD,SAAS,CAAC;QACT,IAAI,EAAE,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC;QACtD,KAAK,EAAE;YACL,SAAS,CAAC,cAAc,CAAC,kBAAkB,CAAC;YAC5C,SAAS,CAAC,cAAc,CAAC,iBAAiB,CAAC;YAC3C,SAAS,CAAC,cAAc,CAAC,iBAAiB,CAAC;SAC5C;KACF,CAAC,CAAA;IAEJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,IAAA,kCAA0B,EAAC,OAAO,CAAC,CAAA;IAEtF,+BAA+B;IAC/B,MAAM,cAAc,GAAG,aAAa;SACjC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACd,MAAM,MAAM,GAAG,cAAc,CAAC,GAAG,CAAC,MAAM,CAAE,CAAA;QAC1C,MAAM,UAAU,GAAG,MAAM;aACtB,GAAG,CACF,CAAC,KAAK,EAAE,EAAE,CAAC;qBACA,KAAK,CAAC,IAAI;;oBAEX,KAAK,CAAC,KAAK;;;gBAGf,KAAK,CAAC,gBAAgB;;gBAEtB,CACP;aACA,IAAI,CAAC,EAAE,CAAC,CAAA;QAEX,OAAO;gBACG,MAAM;;uCAEiB,MAAM;;;gBAG7B,MAAM;4BACM,MAAM;;;;;;0BAMR,MAAM;;YAEpB,UAAU;;;WAGX,CAAA;IACP,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAA;IAEX,OAAO;;EAEP,OAAO,CAAC,QAAQ,EAAE;;;;;;MAMd,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAgDxD,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC7B,CAAA;AACD,CAAC"}
+{"version":3,"file":"admin-sidebar.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/admin-sidebar.generator.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,oDAqKC;AA7KD,6DAA8C;AAG9C,oCAAqD;AAErD;;GAEG;AACH,SAAgB,oBAAoB,CAAC,EAAE,OAAO,EAA8B;IAC1E,MAAM,OAAO,GAAG,SAAS,CAAC,eAAe;QACvC,EAAE;SACD,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,wBAAwB,CAAC,CAAC;SACjE,SAAS,CAAC;QACT,IAAI,EAAE,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC;QACtC,KAAK,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;KACpD,CAAC;SACD,SAAS,CAAC;QACT,IAAI,EAAE,SAAS,CAAC,aAAa,CAAC,cAAc,CAAC;QAC7C,KAAK,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;KACpF,CAAC,CAAA;IAEJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,IAAA,kCAA0B,EAAC,OAAO,CAAC,CAAA;IAEtF,+EAA+E;IAC/E,MAAM,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAA;IAEtE,6CAA6C;IAC7C,MAAM,sBAAsB,GAAG,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAEvG,+CAA+C;IAC/C,MAAM,yBAAyB,GAAG,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAExG,+BAA+B;IAC/B,MAAM,cAAc,GAAG,aAAa;SACjC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACd,MAAM,MAAM,GAAG,cAAc,CAAC,GAAG,CAAC,MAAM,CAAE,CAAA;QAC1C,MAAM,UAAU,GAAG,MAAM;aACtB,GAAG,CACF,CAAC,KAAK,EAAE,EAAE,CAAC;uCACkB,KAAK,CAAC,IAAI;;;wBAGzB,KAAK,CAAC,KAAK;;;oBAGf,KAAK,CAAC,gBAAgB;;;;WAI/B,CACF;aACA,IAAI,CAAC,EAAE,CAAC,CAAA;QAEX,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;QACtC,OAAO;wCAC2B,SAAS,4BAA4B,SAAS,oCAAoC,SAAS,UAAU,SAAS;;;;;oBAKlI,MAAM;8GACoF,SAAS;;;;;;;;sBAQjG,UAAU;;;;;oBAKZ,CAAA;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAA;IAEX,OAAO;;;;;;;;;;;;;;;;;;;;EAoBP,OAAO,CAAC,QAAQ,EAAE;;;;;EAKlB,sBAAsB;;;;EAItB,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4BjB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCvB,CAAA;AACD,CAAC"}

package/dist/frontend-admin/generators/audit-log-sidebar.generator.js

@@ -46,6 +46,7 @@ function generateAuditLogSidebar({ context }) {
         .addImport({
         from: Generator.toPackageName('react'),
         items: [
+            Generator.toFunctionName('ComponentProps'),
             Generator.toFunctionName('useState'),
             Generator.toFunctionName('useMemo'),
             Generator.toFunctionName('useCallback'),
@@ -55,10 +56,9 @@ function generateAuditLogSidebar({ context }) {
         from: Generator.toPackageName('@radix-ui/react-icons'),
         items: [
             Generator.toFunctionName('ChevronRightIcon'),
-            Generator.toFunctionName('ChevronLeftIcon'),
-            Generator.toFunctionName('ReloadIcon'),
-            Generator.toFunctionName('PersonIcon'),
             Generator.toFunctionName('ClockIcon'),
+            Generator.toFunctionName('PersonIcon'),
+            Generator.toFunctionName('ReloadIcon'),
         ],
     })
         .addImport({
@@ -80,6 +80,25 @@ function generateAuditLogSidebar({ context }) {
     }
     return `
 ${imports.generate()}
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarSeparator,
+  useSidebar,
+} from '@postxl/ui-components'
 
 /**
  * Map of custom action labels from the schema
@@ -371,39 +390,60 @@ function BreadcrumbNavigation({
   const entityCountText = getEntityCountText(entityCount)
 
   return (
-    <div className="px-4 py-2 border-b border-sidebar-border flex items-center gap-1 text-xs">
-      <button onClick={onClearEntity} className="text-sidebar-primary hover:underline">
-        All {model}s
-      </button>
-      {hasEntityFilter && (
-        <>
-          <ChevronRightIcon className="w-3 h-3 text-muted-foreground" />
-          {hasFieldFilter ? (
-            <button onClick={onClearField} className="text-sidebar-primary hover:underline">
-              {entityCountText}
+    <Breadcrumb>
+      <BreadcrumbList className="text-xs">
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <button onClick={onClearEntity} className="hover:underline">
+              All {model}s
             </button>
-          ) : (
-            <span className="text-sidebar-accent-foreground">{entityCountText}</span>
-          )}
-        </>
-      )}
-      {hasFieldFilter && (
-        <>
-          <ChevronRightIcon className="w-3 h-3 text-muted-foreground" />
-          <span className="text-sidebar-accent-foreground">{field}</span>
-        </>
-      )}
-    </div>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        {hasEntityFilter && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              {hasFieldFilter ? (
+                <BreadcrumbLink asChild>
+                  <button onClick={onClearField} className="hover:underline">
+                    {entityCountText}
+                  </button>
+                </BreadcrumbLink>
+              ) : (
+                <BreadcrumbPage>{entityCountText}</BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+          </>
+        )}
+        {hasFieldFilter && (
+          <>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{field}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
   )
 }
 
 /**
  * Audit Log Sidebar component for admin pages
  */
-export function AuditLogSidebar({ model, entityId, entityIds, field, labelField: _labelField = 'name', onClearField, onClearEntity }: AuditLogSidebarProps) {
-  const [isOpen, setIsOpen] = useState(false)
+export function AuditLogSidebar({
+  model,
+  entityId,
+  entityIds,
+  field,
+  labelField: _labelField = 'name',
+  onClearField,
+  onClearEntity,
+  ...props
+}: AuditLogSidebarProps & ComponentProps<typeof Sidebar>) {
   const [limit, setLimit] = useState(20)
   const [expandedEntries, setExpandedEntries] = useState<Set<string>>(new Set())
+  const { open: isOpen } = useSidebar()
 
   const trpc = ${context.trpcClient.name}()
   const queryClient = useQueryClient()
@@ -484,127 +524,117 @@ export function AuditLogSidebar({ model, entityId, entityIds, field, labelField:
   const showBreadcrumbs = hasEntityFilter || hasFieldFilter
 
   return (
-    <>
-      {/* Toggle button - fixed on right edge */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={\`
-          fixed right-0 top-1/2 -translate-y-1/2 z-40
-          flex items-center justify-center
-          w-6 h-24 bg-sidebar
-          border border-r-0 border-sidebar-border
-          rounded-l-lg shadow-lg
-          hover:bg-sidebar-accent
-          transition-colors
-          \${isOpen ? 'right-80' : 'right-0'}
-        \`}
-        aria-label={isOpen ? 'Close audit log' : 'Open audit log'}
-      >
-        {isOpen ? (
-          <ChevronRightIcon className="w-4 h-4 text-sidebar-accent-foreground" />
-        ) : (
-          <ChevronLeftIcon className="w-4 h-4 text-sidebar-accent-foreground" />
-        )}
-      </button>
-
-      {/* Sidebar */}
-      <aside
-        className={\`
-          fixed right-0 top-0 h-screen w-80 bg-sidebar
-          border-l border-sidebar-border
-          overflow-hidden transition-transform duration-300 z-30
-          \${isOpen ? 'translate-x-0' : 'translate-x-full'}
-        \`}
-      >
-        <div className="flex flex-col h-full">
-          {/* Header */}
-          <div className="p-4 border-b border-sidebar-border">
+  <Sidebar {...props}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent className="p-2">
             <div className="flex items-center justify-between">
               <h3 className="text-lg font-semibold text-sidebar-foreground">Audit Log</h3>
               <button
                 onClick={() => void refetch()}
                 disabled={isFetching}
-                className="p-1 hover:bg-sidebar-accent rounded transition-colors disabled:opacity-50"
+                className="hover:bg-sidebar-accent rounded transition-colors disabled:opacity-50"
                 aria-label="Refresh"
               >
                 <ReloadIcon className={\`w-4 h-4 \${isFetching ? 'animate-spin' : ''}\`} />
               </button>
             </div>
+
             <p className="mt-1 text-sm text-muted-foreground">{filterDescription}</p>
             {data && (
               <p className="mt-1 text-xs text-muted-foreground">
                 {data.total} {data.total === 1 ? 'change' : 'changes'} found
               </p>
             )}
-          </div>
-          {/* Breadcrumb navigation */}
-          {showBreadcrumbs && (
-            <BreadcrumbNavigation
-              model={model}
-              hasEntityFilter={hasEntityFilter}
-              hasFieldFilter={hasFieldFilter}
-              entityCount={entityCount}
-              field={field}
-              onClearEntity={handleClearEntity}
-              onClearField={handleClearField}
-            />
-          )}
-
-          {/* Limit selector */}
-          <div className="px-4 py-2 border-b border-sidebar-border">
-            <label className="text-xs text-muted-foreground">
-              Show:{' '}
-              <select
-                value={limit}
-                onChange={(e) => setLimit(Number(e.target.value))}
-                className="ml-1 px-2 py-1 text-xs border border-sidebar-border rounded bg-background"
-              >
-                <option value={10}>10</option>
-                <option value={20}>20</option>
-                <option value={50}>50</option>
-                <option value={100}>100</option>
-              </select>
-            </label>
-          </div>
-          {/* Content */}
-          <div className="flex-1 overflow-y-auto">
-            {isLoading && (
-              <div className="flex items-center justify-center h-32">
-                <ReloadIcon className="w-6 h-6 animate-spin text-muted-foreground" />
-              </div>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarSeparator className="mx-0" />
+
+        <SidebarGroup>
+          <SidebarGroupContent className="p-2">
+            <p className="font-bold mb-2">Breadcrumb navigation</p>
+            {showBreadcrumbs && (
+              <BreadcrumbNavigation
+                model={model}
+                hasEntityFilter={hasEntityFilter}
+                hasFieldFilter={hasFieldFilter}
+                entityCount={entityCount}
+                field={field}
+                onClearEntity={handleClearEntity}
+                onClearField={handleClearField}
+              />
             )}
-            {!isLoading && data?.entries.length === 0 && (
-              <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
-                <p className="text-sm">No changes found</p>
-                <p className="text-xs mt-1">Changes will appear here when entities are modified</p>
-              </div>
-            )}
-            {!isLoading && data && data.entries.length > 0 && (
-              <div>
-                {data.entries.map((entry: AuditLogEntry) => (
-                  <AuditLogEntryCard
-                    key={entry.id}
-                    entry={entry}
-                    isExpanded={expandedEntries.has(entry.id)}
-                    onToggle={() => toggleEntry(entry.id)}
-                  />
-                ))}
-                {data.hasMore && (
-                  <div className="p-3">
-                    <button
-                      onClick={loadMore}
-                      className="w-full py-2 text-sm text-primary hover:bg-sidebar-accent rounded transition-colors"
-                    >
-                      Load more...
-                    </button>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </aside>
-    </>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarSeparator className="mx-0" />
+
+        <SidebarGroup>
+          <SidebarGroupContent className="p-2">
+            <p className="font-bold mb-2">Limit selector</p>
+            <label className="flex gap-2 items-center text-xs text-muted-foreground">
+              <span>Show:</span>
+              <Select defaultValue={limit.toString()}>
+                <SelectTrigger className="w-[70px]" variant="simple" size="xs">
+                  <SelectValue placeholder="Limit" />
+                </SelectTrigger>
+                <SelectContent>
+                  {[10, 20, 50, 100].map((option) => (
+                    <SelectItem key={option} value={option.toString()}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarSeparator className="mx-0" />
+
+        <SidebarGroup>
+          <SidebarGroupContent className="p-2">
+            <p className="font-bold mb-2">Content</p>
+            <div className="flex-1 overflow-y-auto">
+              {isLoading && (
+                <div className="flex items-center justify-center h-32">
+                  <ReloadIcon className="w-6 h-6 animate-spin text-muted-foreground" />
+                </div>
+              )}
+              {!isLoading && data?.entries.length === 0 && (
+                <div className="flex flex-col text-muted-foreground">
+                  <p className="text-sm font-bold">No changes found</p>
+                  <p className="text-sm mt-1">Changes will appear here when entities are modified</p>
+                </div>
+              )}
+              {!isLoading && data && data.entries.length > 0 && (
+                <div>
+                  {data.entries.map((entry: AuditLogEntry) => (
+                    <AuditLogEntryCard
+                      key={entry.id}
+                      entry={entry}
+                      isExpanded={expandedEntries.has(entry.id)}
+                      onToggle={() => toggleEntry(entry.id)}
+                    />
+                  ))}
+                  {data.hasMore && (
+                    <div className="p-3">
+                      <button
+                        onClick={loadMore}
+                        className="w-full py-2 text-sm text-primary hover:bg-sidebar-accent rounded transition-colors"
+                      >
+                        Load more...
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
   )
 }
 `;

package/dist/frontend-admin/generators/audit-log-sidebar.generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"audit-log-sidebar.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/audit-log-sidebar.generator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"audit-log-sidebar.generator.js","sourceRoot":"","sources":["../../../src/frontend-admin/generators/audit-log-sidebar.generator.ts"],"names":[],"mappings":"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"}