@veiag/payload-enhanced-sidebar 0.1.1 → 0.2.0

package/README.md

@@ -10,9 +10,12 @@ An enhanced sidebar plugin for [Payload CMS](https://payloadcms.com) that adds a
 - **Vertical Tab Bar** - Icon-based tabs on the left side of the sidebar
 - **Link Support** - Add navigation links (like Dashboard) alongside tabs
 - **Custom Items** - Add custom navigation items that can be merged into existing groups
+- **Badges** - Show notification badges on tabs and navigation items (API-based or reactive provider)
 - **i18n Support** - Full localization support for labels and groups
 - **Lucide Icons** - Use any [Lucide icon](https://lucide.dev/icons) for tabs and links
 
+![Showcase](docs/showcase.gif)
+
 ## Installation
 
 ```bash
@@ -44,6 +47,8 @@ This will add:
 - A default tab showing all collections and globals
 - A logout button at the bottom
 
+![Default Config](docs/default-config.png)
+
 ## Configuration
 
 ### Full Configuration Example
@@ -150,9 +155,11 @@ Array of tabs and links to show in the sidebar.
 | `collections` | `CollectionSlug[]` | No | Collections to show in this tab |
 | `globals` | `GlobalSlug[]` | No | Globals to show in this tab |
 | `customItems` | `SidebarTabItem[]` | No | Custom navigation items |
+| `badge` | `BadgeConfig` | No | Badge configuration for the tab icon |
 
 > If neither `collections` nor `globals` are specified, the tab shows all collections and globals.
 
+
 **Link (`type: 'link'`)**
 
 | Property | Type | Required | Description |
@@ -163,6 +170,10 @@ Array of tabs and links to show in the sidebar.
 | `label` | `LocalizedString` | Yes | Link tooltip/label |
 | `href` | `string` | Yes | URL |
 | `isExternal` | `boolean` | No | If true, `href` is absolute URL, if not, `href` is relative to admin route |
+| `badge` | `BadgeConfig` | No | Badge configuration for the link icon |
+
+
+![Tab and Link active difference](docs/tab-link-active.png)
 
 ### `customItems`
 
@@ -183,6 +194,174 @@ Custom items can be added to any tab:
 - If `group` doesn't match any existing group, a new group is created
 - If `group` is not specified, the item appears at the bottom as ungrouped
 
+
+## Badges
+
+Badges allow you to show notification counts on tabs and navigation items. There are three ways to configure badges:
+
+<!-- [screenshot - Badges showcase: show sidebar with multiple badges - on tab icon (red "5"), on nav item (blue "12"), maybe one with "99+". Show different colors: error (red), primary (blue), warning (yellow)] -->
+
+### Badge on Tabs/Links
+
+Add a `badge` property to any tab or link in the `tabs` array:
+
+```typescript
+tabs: [
+  {
+    id: 'orders',
+    type: 'tab',
+    icon: 'ShoppingCart',
+    label: 'Orders',
+    collections: ['orders'],
+    // Badge on the tab icon
+    badge: {
+      type: 'collection-count',
+      collectionSlug: 'orders',
+      color: 'error',
+    },
+  },
+]
+```
+
+### Badges on Navigation Items
+
+Use the `badges` configuration to add badges to any sidebar item (collections, globals, or custom items):
+
+```typescript
+payloadEnhancedSidebar({
+  badges: {
+    // Show document count for posts collection
+    posts: { type: 'collection-count', color: 'primary' },
+    // Custom API endpoint
+    orders: {
+      type: 'api',
+      endpoint: '/api/orders/pending',
+      responseKey: 'count',
+      color: 'error',
+    },
+    // Provider-based (reactive)
+    notifications: { type: 'provider', color: 'warning' },
+  },
+})
+```
+
+### Badge Types
+
+#### `collection-count`
+
+Automatically fetches document count from a collection.
+
+```typescript
+{
+  type: 'collection-count',
+  collectionSlug?: string,  // Defaults to item's slug
+  color?: BadgeColor,       // 'default' | 'primary' | 'success' | 'warning' | 'error'
+  where?: object,           // Optional filter query
+}
+```
+
+#### `api`
+
+Fetches badge value from a custom API endpoint.
+
+```typescript
+{
+  type: 'api',
+  endpoint: string,         // API URL (relative or absolute)
+  method?: 'GET' | 'POST',  // Default: 'GET'
+  responseKey?: string,     // Key to extract from response. Default: 'count'
+  color?: BadgeColor,
+}
+```
+
+#### `provider`
+
+Uses reactive values from `BadgeProvider` context. Values update automatically when the provider changes.
+
+```typescript
+{
+  type: 'provider',
+  slug?: string,            // Key in provider values. Defaults to item's slug/id
+  color?: BadgeColor,
+}
+```
+
+### Using BadgeProvider
+
+For reactive badges (real-time updates, websockets, etc.), use the `BadgeProvider`:
+
+1. Create a provider component:
+
+```typescript
+// components/MyBadgeProvider.tsx
+'use client'
+
+import { BadgeProvider } from '@veiag/payload-enhanced-sidebar'
+import { useEffect, useState } from 'react'
+
+export const MyBadgeProvider = ({ children }) => {
+  const [counts, setCounts] = useState({
+    orders: 0,
+    notifications: 0,
+  })
+
+  useEffect(() => {
+    // Fetch initial counts, subscribe to websocket, etc.
+    const ws = new WebSocket('wss://your-api/counts')
+    ws.onmessage = (e) => setCounts(JSON.parse(e.data))
+    return () => ws.close()
+  }, [])
+
+  return <BadgeProvider values={counts}>{children}</BadgeProvider>
+}
+```
+
+2. Add it to Payload's providers:
+
+```typescript
+// payload.config.ts
+export default buildConfig({
+  admin: {
+    components: {
+      providers: ['./components/MyBadgeProvider#MyBadgeProvider'],
+    },
+  },
+})
+```
+
+3. Configure badges to use the provider:
+
+```typescript
+payloadEnhancedSidebar({
+  badges: {
+    orders: { type: 'provider', color: 'error' },
+  },
+  tabs: [
+    {
+      id: 'notifications',
+      type: 'link',
+      href: '/notifications',
+      icon: 'Bell',
+      label: 'Notifications',
+      badge: { type: 'provider', slug: 'notifications', color: 'warning' },
+    },
+  ],
+})
+```
+
+### Badge Colors
+
+Available colors: `default`, `primary`, `success`, `warning`, `error`
+
+![Badge Colors](docs/badge-colors.png)
+
+### Badge Display
+
+- Numbers up to 99 are shown as-is
+- Numbers > 99 are shown as "99+"
+- Zero or undefined values hide the badge
+- Provider values can also be React nodes for custom rendering
+
 ### `showLogout`
 
 Show/hide the logout button at the bottom of the tabs bar.
@@ -211,12 +390,10 @@ label: {
 }
 ```
 
-## TODO
-
-The following features are planned but not yet implemented:
+## Payload Features Support
 
-- [ ] **Browse by Folder Button** - Support for the folder view button (requires Payload v3.41.0+)
-- [ ] **Settings Menu Items** - Support for Payload's SettingsMenu items (requires Payload v3.60.0+)
+- **Browse by Folder Button** - Automatically shows folder view button when Payload folders are enabled (requires Payload v3.41.0+)
+- **Settings Menu Items** - Integrates with Payload's SettingsMenu components (requires Payload v3.60.0+)
 
 ## Contributing
 

package/dist/components/EnhancedSidebar/Badge/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { BadgeColor } from '../../../types';
+import './index.scss';
+export type BadgeProps = {
+    /**
+     * Badge color variant
+     * @default 'default'
+     */
+    color?: BadgeColor;
+    /**
+     * Position modifier
+     * - 'absolute': positioned at top-right corner (for icons)
+     * - 'inline': inline with margin (for nav items)
+     */
+    position?: 'absolute' | 'inline';
+    /**
+     * Badge value - number or React node
+     * Numbers > 99 will be displayed as "99+"
+     */
+    value: number | React.ReactNode;
+};
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/EnhancedSidebar/Badge/index.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'sidebar-badge';
+/**
+ * Format badge value - show up to 2 digits, 99+ for larger numbers
+ */ const formatValue = (value)=>{
+    if (typeof value === 'number') {
+        return value > 99 ? '99+' : value;
+    }
+    return value;
+};
+export const Badge = ({ color = 'default', position, value })=>{
+    // Don't render if value is 0 or falsy (except for React nodes)
+    if (value === 0 || value === null || typeof value !== 'object' && !value) {
+        return null;
+    }
+    const classes = [
+        baseClass,
+        `${baseClass}--${color}`,
+        position && `${baseClass}--${position}`
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ _jsx("span", {
+        className: classes,
+        children: formatValue(value)
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/EnhancedSidebar/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/Badge/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { BadgeColor } from '../../../types'\n\nimport './index.scss'\n\nconst baseClass = 'sidebar-badge'\n\nexport type BadgeProps = {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * Position modifier\n   * - 'absolute': positioned at top-right corner (for icons)\n   * - 'inline': inline with margin (for nav items)\n   */\n  position?: 'absolute' | 'inline'\n  /**\n   * Badge value - number or React node\n   * Numbers > 99 will be displayed as \"99+\"\n   */\n  value: number | React.ReactNode\n}\n\n/**\n * Format badge value - show up to 2 digits, 99+ for larger numbers\n */\nconst formatValue = (value: number | React.ReactNode): React.ReactNode => {\n  if (typeof value === 'number') {\n    return value > 99 ? '99+' : value\n  }\n  return value\n}\n\nexport const Badge: React.FC<BadgeProps> = ({ color = 'default', position, value }) => {\n  // Don't render if value is 0 or falsy (except for React nodes)\n  if (value === 0 || value === null || (typeof value !== 'object' && !value)) {\n    return null\n  }\n\n  const classes = [baseClass, `${baseClass}--${color}`, position && `${baseClass}--${position}`]\n    .filter(Boolean)\n    .join(' ')\n\n  return <span className={classes}>{formatValue(value)}</span>\n}\n"],"names":["React","baseClass","formatValue","value","Badge","color","position","classes","filter","Boolean","join","span","className"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAIzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAqBlB;;CAEC,GACD,MAAMC,cAAc,CAACC;IACnB,IAAI,OAAOA,UAAU,UAAU;QAC7B,OAAOA,QAAQ,KAAK,QAAQA;IAC9B;IACA,OAAOA;AACT;AAEA,OAAO,MAAMC,QAA8B,CAAC,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEH,KAAK,EAAE;IAChF,+DAA+D;IAC/D,IAAIA,UAAU,KAAKA,UAAU,QAAS,OAAOA,UAAU,YAAY,CAACA,OAAQ;QAC1E,OAAO;IACT;IAEA,MAAMI,UAAU;QAACN;QAAW,GAAGA,UAAU,EAAE,EAAEI,OAAO;QAAEC,YAAY,GAAGL,UAAU,EAAE,EAAEK,UAAU;KAAC,CAC3FE,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBAAO,KAACC;QAAKC,WAAWL;kBAAUL,YAAYC;;AAChD,EAAC"}

package/dist/components/EnhancedSidebar/Badge/index.scss

@@ -0,0 +1,65 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .sidebar-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 base(0.25);
+    border-radius: 9px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+
+    // Color variants - using fixed colors for consistent contrast in both themes
+    &--default {
+      background: var(--theme-elevation-200);
+      color: var(--theme-elevation-800);
+    }
+
+    &--primary {
+      background: #3b82f6; // Blue
+      color: #fff;
+    }
+
+    &--success {
+      background: #22c55e; // Green
+      color: #fff;
+    }
+
+    &--warning {
+      background: #f59e0b; // Amber
+      color: #000;
+    }
+
+    &--error {
+      background: #ef4444; // Red
+      color: #fff;
+    }
+
+    // Position modifier for absolute positioning (used on icons)
+    &--absolute {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+
+      [dir='rtl'] & {
+        right: auto;
+        left: -4px;
+      }
+    }
+
+    // Inline modifier (used in nav items)
+    &--inline {
+      margin-left: base(0.5);
+
+      [dir='rtl'] & {
+        margin-left: 0;
+        margin-right: base(0.5);
+      }
+    }
+  }
+}

package/dist/components/EnhancedSidebar/BadgeProvider/index.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { BadgeValues } from '../../../types';
+type BadgeContextValue = {
+    values: BadgeValues;
+};
+export type BadgeProviderProps = {
+    children: React.ReactNode;
+    /**
+     * Badge values object.
+     * Keys are slugs (collection slug, global slug, or custom item slug).
+     * Values can be numbers or React nodes.
+     *
+     * Values are merged with any parent BadgeProvider values.
+     * This provider's values take priority over parent values.
+     *
+     * @example
+     * ```tsx
+     * <BadgeProvider values={{ orders: 5, notifications: <CustomBadge /> }}>
+     *   {children}
+     * </BadgeProvider>
+     * ```
+     */
+    values: BadgeValues;
+};
+/**
+ * Provider for badge values.
+ * Wrap your app with this provider and pass badge values.
+ * Values are reactive - changes will update badges automatically.
+ *
+ * Values are merged with any parent BadgeProvider (e.g., InternalBadgeProvider).
+ * This provider's values take priority, allowing you to override internal values.
+ *
+ * @example
+ * ```tsx
+ * // In your admin.components.providers
+ * import { BadgeProvider } from '@veiag/payload-enhanced-sidebar'
+ *
+ * export const MyProvider = ({ children }) => {
+ *   const [counts, setCounts] = useState({ orders: 0 })
+ *
+ *   useEffect(() => {
+ *     // Fetch counts, subscribe to realtime updates, etc.
+ *   }, [])
+ *
+ *   return (
+ *     <BadgeProvider values={counts}>
+ *       {children}
+ *     </BadgeProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare const BadgeProvider: React.FC<BadgeProviderProps>;
+/**
+ * Hook to access badge values from context.
+ * Returns the full values object from BadgeProvider.
+ */
+export declare const useBadgeContext: () => BadgeContextValue;
+/**
+ * Hook to get a specific badge value by slug.
+ * Returns the value for the given slug, or undefined if not found.
+ */
+export declare const useBadgeValue: (slug: string) => number | React.ReactNode | undefined;
+export {};

package/dist/components/EnhancedSidebar/BadgeProvider/index.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo } from 'react';
+const BadgeContext = /*#__PURE__*/ createContext({
+    values: {}
+});
+/**
+ * Provider for badge values.
+ * Wrap your app with this provider and pass badge values.
+ * Values are reactive - changes will update badges automatically.
+ *
+ * Values are merged with any parent BadgeProvider (e.g., InternalBadgeProvider).
+ * This provider's values take priority, allowing you to override internal values.
+ *
+ * @example
+ * ```tsx
+ * // In your admin.components.providers
+ * import { BadgeProvider } from '@veiag/payload-enhanced-sidebar'
+ *
+ * export const MyProvider = ({ children }) => {
+ *   const [counts, setCounts] = useState({ orders: 0 })
+ *
+ *   useEffect(() => {
+ *     // Fetch counts, subscribe to realtime updates, etc.
+ *   }, [])
+ *
+ *   return (
+ *     <BadgeProvider values={counts}>
+ *       {children}
+ *     </BadgeProvider>
+ *   )
+ * }
+ * ```
+ */ export const BadgeProvider = ({ children, values })=>{
+    // Get parent context values (if any)
+    const parentContext = useContext(BadgeContext);
+    // Merge parent values with this provider's values (this provider wins)
+    const mergedValues = useMemo(()=>({
+            ...parentContext.values,
+            ...values
+        }), [
+        parentContext.values,
+        values
+    ]);
+    return /*#__PURE__*/ _jsx(BadgeContext.Provider, {
+        value: {
+            values: mergedValues
+        },
+        children: children
+    });
+};
+/**
+ * Hook to access badge values from context.
+ * Returns the full values object from BadgeProvider.
+ */ export const useBadgeContext = ()=>{
+    return useContext(BadgeContext);
+};
+/**
+ * Hook to get a specific badge value by slug.
+ * Returns the value for the given slug, or undefined if not found.
+ */ export const useBadgeValue = (slug)=>{
+    const { values } = useBadgeContext();
+    return values[slug];
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/EnhancedSidebar/BadgeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/BadgeProvider/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { createContext, useContext, useMemo } from 'react'\n\nimport type { BadgeValues } from '../../../types'\n\ntype BadgeContextValue = {\n  values: BadgeValues\n}\n\nconst BadgeContext = createContext<BadgeContextValue>({ values: {} })\n\nexport type BadgeProviderProps = {\n  children: React.ReactNode\n  /**\n   * Badge values object.\n   * Keys are slugs (collection slug, global slug, or custom item slug).\n   * Values can be numbers or React nodes.\n   *\n   * Values are merged with any parent BadgeProvider values.\n   * This provider's values take priority over parent values.\n   *\n   * @example\n   * ```tsx\n   * <BadgeProvider values={{ orders: 5, notifications: <CustomBadge /> }}>\n   *   {children}\n   * </BadgeProvider>\n   * ```\n   */\n  values: BadgeValues\n}\n\n/**\n * Provider for badge values.\n * Wrap your app with this provider and pass badge values.\n * Values are reactive - changes will update badges automatically.\n *\n * Values are merged with any parent BadgeProvider (e.g., InternalBadgeProvider).\n * This provider's values take priority, allowing you to override internal values.\n *\n * @example\n * ```tsx\n * // In your admin.components.providers\n * import { BadgeProvider } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyProvider = ({ children }) => {\n *   const [counts, setCounts] = useState({ orders: 0 })\n *\n *   useEffect(() => {\n *     // Fetch counts, subscribe to realtime updates, etc.\n *   }, [])\n *\n *   return (\n *     <BadgeProvider values={counts}>\n *       {children}\n *     </BadgeProvider>\n *   )\n * }\n * ```\n */\nexport const BadgeProvider: React.FC<BadgeProviderProps> = ({ children, values }) => {\n  // Get parent context values (if any)\n  const parentContext = useContext(BadgeContext)\n\n  // Merge parent values with this provider's values (this provider wins)\n  const mergedValues = useMemo(\n    () => ({\n      ...parentContext.values,\n      ...values,\n    }),\n    [parentContext.values, values],\n  )\n\n  return <BadgeContext.Provider value={{ values: mergedValues }}>{children}</BadgeContext.Provider>\n}\n\n/**\n * Hook to access badge values from context.\n * Returns the full values object from BadgeProvider.\n */\nexport const useBadgeContext = (): BadgeContextValue => {\n  return useContext(BadgeContext)\n}\n\n/**\n * Hook to get a specific badge value by slug.\n * Returns the value for the given slug, or undefined if not found.\n */\nexport const useBadgeValue = (slug: string): number | React.ReactNode | undefined => {\n  const { values } = useBadgeContext()\n  return values[slug]\n}\n"],"names":["React","createContext","useContext","useMemo","BadgeContext","values","BadgeProvider","children","parentContext","mergedValues","Provider","value","useBadgeContext","useBadgeValue","slug"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,QAAO;AAQjE,MAAMC,6BAAeH,cAAiC;IAAEI,QAAQ,CAAC;AAAE;AAsBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,gBAA8C,CAAC,EAAEC,QAAQ,EAAEF,MAAM,EAAE;IAC9E,qCAAqC;IACrC,MAAMG,gBAAgBN,WAAWE;IAEjC,uEAAuE;IACvE,MAAMK,eAAeN,QACnB,IAAO,CAAA;YACL,GAAGK,cAAcH,MAAM;YACvB,GAAGA,MAAM;QACX,CAAA,GACA;QAACG,cAAcH,MAAM;QAAEA;KAAO;IAGhC,qBAAO,KAACD,aAAaM,QAAQ;QAACC,OAAO;YAAEN,QAAQI;QAAa;kBAAIF;;AAClE,EAAC;AAED;;;CAGC,GACD,OAAO,MAAMK,kBAAkB;IAC7B,OAAOV,WAAWE;AACpB,EAAC;AAED;;;CAGC,GACD,OAAO,MAAMS,gBAAgB,CAACC;IAC5B,MAAM,EAAET,MAAM,EAAE,GAAGO;IACnB,OAAOP,MAAM,CAACS,KAAK;AACrB,EAAC"}

package/dist/components/EnhancedSidebar/InternalBadgeProvider/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { EnhancedSidebarConfig } from '../../../types';
+export type InternalBadgeProviderProps = {
+    children: React.ReactNode;
+    /**
+     * Sidebar configuration containing badge configs
+     */
+    sidebarConfig: EnhancedSidebarConfig;
+};
+/**
+ * Internal provider that fetches all API-based badges once on mount.
+ * This provider is automatically injected by the plugin.
+ * Values are stored in context and don't refetch on navigation.
+ */
+export declare const InternalBadgeProvider: React.FC<InternalBadgeProviderProps>;

package/dist/components/EnhancedSidebar/InternalBadgeProvider/index.js

@@ -0,0 +1,132 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useConfig } from '@payloadcms/ui';
+import { stringify } from 'qs-esm';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { BadgeProvider } from '../BadgeProvider';
+/**
+ * Internal provider that fetches all API-based badges once on mount.
+ * This provider is automatically injected by the plugin.
+ * Values are stored in context and don't refetch on navigation.
+ */ export const InternalBadgeProvider = ({ children, sidebarConfig })=>{
+    const [values, setValues] = useState({});
+    const { config: { routes: { api: apiRoute }, serverURL } } = useConfig();
+    // Collect all badges that need to be fetched (api and collection-count types)
+    const badgesToFetch = useMemo(()=>{
+        const badges = [];
+        // From tabs
+        if (sidebarConfig.tabs) {
+            for (const tab of sidebarConfig.tabs){
+                if (tab.badge && tab.badge.type !== 'provider') {
+                    badges.push({
+                        slug: tab.id,
+                        config: tab.badge
+                    });
+                }
+            }
+        }
+        // From badges config
+        if (sidebarConfig.badges) {
+            for (const [slug, config] of Object.entries(sidebarConfig.badges)){
+                if (config.type !== 'provider') {
+                    badges.push({
+                        slug,
+                        config
+                    });
+                }
+            }
+        }
+        return badges;
+    }, [
+        sidebarConfig
+    ]);
+    // Fetch a single badge value
+    const fetchBadge = useCallback(async (badge)=>{
+        const { slug, config } = badge;
+        try {
+            let url;
+            let responseKey;
+            if (config.type === 'api') {
+                url = config.endpoint;
+                responseKey = config.responseKey ?? 'count';
+                // If endpoint is relative, prepend serverURL
+                if (!url.startsWith('http')) {
+                    url = `${serverURL || ''}${url}`;
+                }
+            } else if (config.type === 'collection-count') {
+                const collectionSlug = config.collectionSlug ?? slug;
+                const baseUrl = `${serverURL || ''}${apiRoute}/${collectionSlug}`;
+                if (config.where) {
+                    const whereParams = stringify({
+                        where: config.where
+                    });
+                    url = `${baseUrl}?${whereParams}`;
+                } else {
+                    url = `${baseUrl}`;
+                }
+                responseKey = 'totalDocs';
+            } else {
+                return {
+                    slug,
+                    value: undefined
+                };
+            }
+            const response = await fetch(url, {
+                credentials: 'include',
+                method: config.type === 'api' ? config.method ?? 'GET' : 'GET'
+            });
+            if (response.ok) {
+                const data = await response.json();
+                // Extract value from nested key (e.g., "data.count")
+                const keys = responseKey.split('.');
+                let value = data;
+                for (const key of keys){
+                    value = value?.[key];
+                }
+                return {
+                    slug,
+                    value: typeof value === 'number' ? value : undefined
+                };
+            }
+        } catch (error) {
+            //eslint-disable-next-line no-console
+            console.error(`Failed to fetch badge data for ${slug}:`, error);
+        }
+        return {
+            slug,
+            value: undefined
+        };
+    }, [
+        apiRoute,
+        serverURL
+    ]);
+    // Fetch all badges on mount
+    useEffect(()=>{
+        if (badgesToFetch.length === 0) {
+            return;
+        }
+        const fetchAll = async ()=>{
+            const results = await Promise.all(badgesToFetch.map(fetchBadge));
+            const newValues = {};
+            for (const result of results){
+                if (result.value !== undefined) {
+                    newValues[result.slug] = result.value;
+                }
+            }
+            setValues(newValues);
+        };
+        fetchAll().catch((err)=>{
+            //eslint-disable-next-line no-console
+            console.error('Error fetching badge data:', err);
+        });
+    }, [
+        badgesToFetch,
+        fetchBadge
+    ]);
+    return /*#__PURE__*/ _jsx(BadgeProvider, {
+        values: values,
+        children: children
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/EnhancedSidebar/InternalBadgeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/InternalBadgeProvider/index.tsx"],"sourcesContent":["'use client'\n\nimport { useConfig } from '@payloadcms/ui'\nimport { stringify } from 'qs-esm'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { BadgeConfig, BadgeValues, EnhancedSidebarConfig } from '../../../types'\n\nimport { BadgeProvider } from '../BadgeProvider'\n\ntype BadgeToFetch = {\n  config: BadgeConfig\n  slug: string\n}\n\nexport type InternalBadgeProviderProps = {\n  children: React.ReactNode\n  /**\n   * Sidebar configuration containing badge configs\n   */\n  sidebarConfig: EnhancedSidebarConfig\n}\n\n/**\n * Internal provider that fetches all API-based badges once on mount.\n * This provider is automatically injected by the plugin.\n * Values are stored in context and don't refetch on navigation.\n */\nexport const InternalBadgeProvider: React.FC<InternalBadgeProviderProps> = ({\n  children,\n  sidebarConfig,\n}) => {\n  const [values, setValues] = useState<BadgeValues>({})\n\n  const {\n    config: {\n      routes: { api: apiRoute },\n      serverURL,\n    },\n  } = useConfig()\n\n  // Collect all badges that need to be fetched (api and collection-count types)\n  const badgesToFetch = useMemo(() => {\n    const badges: BadgeToFetch[] = []\n\n    // From tabs\n    if (sidebarConfig.tabs) {\n      for (const tab of sidebarConfig.tabs) {\n        if (tab.badge && tab.badge.type !== 'provider') {\n          badges.push({ slug: tab.id, config: tab.badge })\n        }\n      }\n    }\n\n    // From badges config\n    if (sidebarConfig.badges) {\n      for (const [slug, config] of Object.entries(sidebarConfig.badges)) {\n        if (config.type !== 'provider') {\n          badges.push({ slug, config })\n        }\n      }\n    }\n\n    return badges\n  }, [sidebarConfig])\n\n  // Fetch a single badge value\n  const fetchBadge = useCallback(\n    async (badge: BadgeToFetch): Promise<{ slug: string; value: number | undefined }> => {\n      const { slug, config } = badge\n\n      try {\n        let url: string\n        let responseKey: string\n\n        if (config.type === 'api') {\n          url = config.endpoint\n          responseKey = config.responseKey ?? 'count'\n\n          // If endpoint is relative, prepend serverURL\n          if (!url.startsWith('http')) {\n            url = `${serverURL || ''}${url}`\n          }\n        } else if (config.type === 'collection-count') {\n          const collectionSlug = config.collectionSlug ?? slug\n          const baseUrl = `${serverURL || ''}${apiRoute}/${collectionSlug}`\n\n          if (config.where) {\n            const whereParams = stringify({\n              where: config.where,\n            })\n            url = `${baseUrl}?${whereParams}`\n          } else {\n            url = `${baseUrl}`\n          }\n\n          responseKey = 'totalDocs'\n        } else {\n          return { slug, value: undefined }\n        }\n\n        const response = await fetch(url, {\n          credentials: 'include',\n          method: config.type === 'api' ? (config.method ?? 'GET') : 'GET',\n        })\n\n        if (response.ok) {\n          const data = await response.json()\n          // Extract value from nested key (e.g., \"data.count\")\n          const keys = responseKey.split('.')\n          let value = data\n          for (const key of keys) {\n            value = value?.[key]\n          }\n          return { slug, value: typeof value === 'number' ? value : undefined }\n        }\n      } catch (error) {\n        //eslint-disable-next-line no-console\n        console.error(`Failed to fetch badge data for ${slug}:`, error)\n      }\n\n      return { slug, value: undefined }\n    },\n    [apiRoute, serverURL],\n  )\n\n  // Fetch all badges on mount\n  useEffect(() => {\n    if (badgesToFetch.length === 0) {\n      return\n    }\n\n    const fetchAll = async () => {\n      const results = await Promise.all(badgesToFetch.map(fetchBadge))\n\n      const newValues: BadgeValues = {}\n      for (const result of results) {\n        if (result.value !== undefined) {\n          newValues[result.slug] = result.value\n        }\n      }\n\n      setValues(newValues)\n    }\n\n    fetchAll().catch((err) => {\n      //eslint-disable-next-line no-console\n      console.error('Error fetching badge data:', err)\n    })\n  }, [badgesToFetch, fetchBadge])\n\n  return <BadgeProvider values={values}>{children}</BadgeProvider>\n}\n"],"names":["useConfig","stringify","React","useCallback","useEffect","useMemo","useState","BadgeProvider","InternalBadgeProvider","children","sidebarConfig","values","setValues","config","routes","api","apiRoute","serverURL","badgesToFetch","badges","tabs","tab","badge","type","push","slug","id","Object","entries","fetchBadge","url","responseKey","endpoint","startsWith","collectionSlug","baseUrl","where","whereParams","value","undefined","response","fetch","credentials","method","ok","data","json","keys","split","key","error","console","length","fetchAll","results","Promise","all","map","newValues","result","catch","err"],"mappings":"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"}

package/dist/components/EnhancedSidebar/NavItem/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BadgeConfig, ExtendedEntity } from '../../../types';
+export type NavItemProps = {
+    badgeConfig?: BadgeConfig;
+    entity: ExtendedEntity;
+    href: string;
+    id: string;
+    isActive: boolean;
+    isCurrentPage: boolean;
+};
+export declare const NavItem: React.FC<NavItemProps>;