@eventcatalog/core 3.0.0-beta.0 → 3.0.0-beta.10

package/eventcatalog/src/components/Header.astro

@@ -13,7 +13,7 @@ if (isAuthEnabled()) {
 }
 
 const logo = {
-  src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'),
+  src: ('/' + (catalog?.logo?.src || '')).replace(/^\/+/, '/'),
   alt: catalog?.logo?.alt || 'Event Catalog',
   text: catalog?.logo?.text || 'EventCatalog',
 };
@@ -30,7 +30,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
       <div class="flex-shrink-0 flex items-center w-3/12">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center group">
           {
-            logo.src && (
+            logo.src && logo.src !== '/' && (
               <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8 h-8 transition-transform group-hover:scale-105" />
             )
           }
@@ -42,7 +42,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow w-6/12 px-10">
+      <div class="hidden lg:block flex-grow -ml-1">
         <Search />
       </div>
 
@@ -118,10 +118,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         href="https://discord.com/invite/3rjaZMmrAm"
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
                       >
-                        <img
-                          src={buildUrl('/icons/discord.svg', true)}
-                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
-                        />
+                        <img src={buildUrl('/icons/discord.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
                       </a>
                     </li>
                     <li>
@@ -129,10 +126,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         href="https://github.com/event-catalog/eventcatalog"
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
                       >
-                        <img
-                          src={buildUrl('/icons/github.svg', true)}
-                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
-                        />
+                        <img src={buildUrl('/icons/github.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
                       </a>
                     </li>
                   </ul>

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -19,7 +19,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import { ExternalLink, HistoryIcon } from 'lucide-react';
 import { toPng } from 'html-to-image';
-import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -135,6 +135,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
 
   // Check if there are channels to determine if we need the visualizer functionality
@@ -349,6 +350,30 @@ const NodeGraphBuilder = ({
     setIsStudioModalOpen(true);
   };
 
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
+        console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      setTimeout(() => {
+        fitView({ duration: 800 });
+      }, 100);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [fitView]);
+
   const handleExportVisual = useCallback(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
@@ -563,7 +588,7 @@ const NodeGraphBuilder = ({
   const isFlowVisualization = edges.some((edge: Edge) => edge.type === 'flow-edge');
 
   return (
-    <div ref={reactFlowWrapperRef} className="w-full h-full">
+    <div ref={reactFlowWrapperRef} className="w-full h-full bg-gray-50">
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -583,7 +608,7 @@ const NodeGraphBuilder = ({
         <Panel position="top-center" className="w-full pr-6 ">
           <div className="flex space-x-2 justify-between items-center">
             <div className="flex space-x-2 ml-4">
-              <div>
+              <div className="relative group">
                 <button
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                   className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
@@ -591,6 +616,23 @@ const NodeGraphBuilder = ({
                 >
                   <CogIcon className="h-5 w-5 text-gray-600" />
                 </button>
+                <div className="absolute top-full left-0 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  Settings
+                </div>
+              </div>
+              <div className="relative group">
+                <button
+                  onClick={toggleFullScreen}
+                  className={`py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
+                    isFullscreen ? 'bg-purple-50 text-purple-600' : ''
+                  }`}
+                  aria-label={isFullscreen ? 'Exit presentation mode' : 'Enter presentation mode'}
+                >
+                  <PresentationChartLineIcon className={`h-5 w-5 ${isFullscreen ? 'text-purple-600' : 'text-gray-600'}`} />
+                </button>
+                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  {isFullscreen ? 'Exit Presentation Mode' : 'Presentation Mode'}
+                </div>
               </div>
 
               {title && (

package/eventcatalog/src/components/SchemaExplorer/SchemaExplorer.tsx

@@ -314,16 +314,6 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
-      {/* Compact Header */}
-      <div className="flex-shrink-0 border-b border-gray-200 pb-2 mb-3">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">Schema Explorer</h1>
-          <p className="mt-0.5 text-xs text-gray-600">
-            {filteredMessages.length} schema{filteredMessages.length !== 1 ? 's' : ''} available
-          </p>
-        </div>
-      </div>
-
       {/* Split View */}
       <div className="flex-1 flex gap-4 overflow-hidden">
         {/* Left: Filters + Schema List */}

package/eventcatalog/src/components/Search/Search.astro

@@ -4,7 +4,7 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center">
+  <div class="relative flex items-center w-10/12">
     <input
       id="search-dummy-input"
       type="text"
@@ -13,7 +13,7 @@ import SearchModal from './SearchModal.tsx';
       autocomplete="off"
       class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
-    <MagnifyingGlassIcon className="absolute inset-y-0 -left-1 h-9 w-8 flex items-center pl-4 text-gray-400" />
+    <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-gray-400" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
       <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -20,6 +20,7 @@ import {
   ArrowUturnLeftIcon,
   StarIcon,
   Square2StackIcon,
+  ArrowsRightLeftIcon,
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarIconSolid, CircleStackIcon } from '@heroicons/react/24/solid';
 import { useStore } from '@nanostores/react';
@@ -33,7 +34,7 @@ const typeIcons: any = {
   Command: ChatBubbleLeftIcon,
   Query: QueryIcon,
   Entity: CubeIcon,
-  Channel: QueueListIcon,
+  Channel: ArrowsRightLeftIcon,
   Team: UserGroupIcon,
   User: UserIcon,
   Language: BookOpenIcon,
@@ -68,8 +69,6 @@ function classNames(...classes: (string | boolean | undefined)[]) {
 
 // Helper to construct URL from key if href is missing
 const getUrlForItem = (node: any, key: string) => {
-  if (node.href) return node.href;
-
   const parts = key.split(':');
   if (parts.length < 2) return null; // Need at least type:id
 
@@ -83,8 +82,16 @@ const getUrlForItem = (node: any, key: string) => {
   // Only show items that have a version to avoid duplicates
   if (!version) return null;
 
+  // If node has href, use it, otherwise construct from key
+  if (node.href) return node.href;
+
   // Pluralize type for URL if needed
-  const pluralType = ['event', 'command', 'query', 'domain', 'service', 'flow', 'container'].includes(type) ? type + 's' : type; // users/teams already have href usually, but safe fallback
+  let pluralType = type;
+  if (['event', 'command', 'domain', 'service', 'flow', 'container', 'channel'].includes(type)) {
+    pluralType = type + 's';
+  } else if (type === 'query') {
+    pluralType = 'queries';
+  }
 
   return `/docs/${pluralType}/${id}/${version}`;
 };
@@ -171,6 +178,7 @@ export default function SearchModal() {
       Team: 0,
       Container: 0,
       Design: 0,
+      Channel: 0,
     };
 
     itemsToCount.forEach((item) => {
@@ -195,6 +203,7 @@ export default function SearchModal() {
     if (counts.Service > 0) dynamicFilters.push({ id: 'Service', name: `Services (${counts.Service})` });
     if (counts.Message > 0) dynamicFilters.push({ id: 'Message', name: `Messages (${counts.Message})` });
     if (counts.Container > 0) dynamicFilters.push({ id: 'Container', name: `Containers (${counts.Container})` });
+    if (counts.Channel > 0) dynamicFilters.push({ id: 'Channel', name: `Channels (${counts.Channel})` });
     if (counts.Design > 0) dynamicFilters.push({ id: 'Design', name: `Designs (${counts.Design})` });
     if (counts.Team > 0) dynamicFilters.push({ id: 'Team', name: `Teams & Users (${counts.Team})` });
 
@@ -224,7 +233,7 @@ export default function SearchModal() {
   const filteredItems = useMemo(() => {
     if (query === '') {
       // Show favorites when search is empty
-      if (favorites.length > 0) {
+      if (favorites.length > 0 && activeFilter === 'all') {
         return favorites
           .slice(0, 5)
           .map((fav) => {
@@ -375,14 +384,14 @@ export default function SearchModal() {
                                   <p className={classNames('text-sm font-medium', active ? 'text-gray-900' : 'text-gray-700')}>
                                     {item.name}
                                   </p>
-                                  <div className="flex items-start gap-2">
+                                  <div className="flex items-center gap-2">
                                     <p
                                       className={classNames('text-sm flex-shrink-0', active ? 'text-gray-700' : 'text-gray-500')}
                                     >
                                       {item.type}
                                     </p>
                                     {item.rawNode.summary && (
-                                      <p className={classNames('text-xs truncate', active ? 'text-gray-600' : 'text-gray-400')}>
+                                      <p className={classNames('text-sm truncate', active ? 'text-gray-600' : 'text-gray-400')}>
                                         • {item.rawNode.summary}
                                       </p>
                                     )}

package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx

@@ -14,6 +14,8 @@ import {
   Database,
   Waypoints,
   SquareMousePointer,
+  ListOrdered,
+  ArrowLeftRight,
 } from 'lucide-react';
 import type { NavNode } from './sidebar-builder';
 
@@ -28,6 +30,7 @@ const getBadgeClasses = (badge: string): string => {
     query: 'bg-purple-100 text-purple-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
+    channel: 'bg-indigo-100 text-indigo-700',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
 };
@@ -77,6 +80,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
   };
 
   const filterTypes = [
+    { key: 'channel', label: 'Channels', badge: 'Channel', icon: ArrowLeftRight },
     { key: 'command', label: 'Commands', badge: 'Command', icon: MessageSquare },
     { key: 'container', label: 'Data Stores', badge: 'Container', icon: Database },
     { key: 'design', label: 'Designs', badge: 'Design', icon: SquareMousePointer },

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { ChevronRight, ChevronLeft, ChevronDown, Home, Star } from 'lucide-react';
+import { ChevronRight, ChevronLeft, ChevronDown, Home, Star, FileQuestion } from 'lucide-react';
 import type { NavigationData, NavNode, ChildRef } from './sidebar-builder';
 import SearchBar from './SearchBar';
 import { saveState, loadState, saveCollapsedSections, loadCollapsedSections } from './storage';
@@ -25,6 +25,7 @@ const getBadgeClasses = (badge: string): string => {
     query: 'bg-purple-100 text-purple-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
+    channel: 'bg-indigo-100 text-indigo-700',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
 };
@@ -42,13 +43,15 @@ type NavigationLevel = {
 
 export default function NestedSideBar() {
   const data = useStore(sidebarStore);
+  const favorites = useStore(favoritesStore);
 
   // Guard against undefined data (e.g., during hydration)
-  const roots = data?.roots ?? [];
-  const nodes = data?.nodes ?? {};
+  // Use useMemo to ensure stable references for roots and nodes
+  const roots = useMemo(() => data?.roots ?? [], [data?.roots]);
+  const nodes = useMemo(() => data?.nodes ?? {}, [data?.nodes]);
 
-  const [navigationStack, setNavigationStack] = useState<NavigationLevel[]>([
-    { key: null, entries: roots, title: 'Documentation' },
+  const [navigationStack, setNavigationStack] = useState<NavigationLevel[]>(() => [
+    { key: null, entries: [], title: 'Documentation' },
   ]);
   const [animationKey, setAnimationKey] = useState(0);
   const [slideDirection, setSlideDirection] = useState<'forward' | 'backward' | null>(null);
@@ -57,7 +60,6 @@ export default function NestedSideBar() {
   const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set());
   const [showPathPreview, setShowPathPreview] = useState(false);
   const [showFullPath, setShowFullPath] = useState(false);
-  const favorites = useStore(favoritesStore);
   const [isSearching, setIsSearching] = useState(false);
 
   // Build a lookup map for faster URL navigation
@@ -113,6 +115,21 @@ export default function NestedSideBar() {
     }
   }, []);
 
+  /**
+   * Update navigation stack when roots become available
+   */
+  useEffect(() => {
+    if (roots.length > 0) {
+      setNavigationStack((prevStack) => {
+        // Only update if the current stack has no entries (initial state)
+        if (prevStack.length === 1 && prevStack[0].entries.length === 0) {
+          return [{ key: null, entries: roots, title: 'Documentation' }];
+        }
+        return prevStack;
+      });
+    }
+  }, [roots]);
+
   /**
    * Populate the store with the data when the component mounts or data changes
    */
@@ -300,43 +317,47 @@ export default function NestedSideBar() {
       const foundNodeKey = findNodeKeyByUrl(url);
 
       if (foundNodeKey) {
-        // Try to connect to current stack first
-        const connectedStack = tryConnectStack(foundNodeKey, navigationStack);
+        setNavigationStack((currentStack) => {
+          // Try to connect to current stack first
+          const connectedStack = tryConnectStack(foundNodeKey, currentStack);
 
-        if (connectedStack) {
-          setNavigationStack(connectedStack);
-          return true;
-        }
+          if (connectedStack) {
+            return connectedStack;
+          }
 
-        const foundNode = nodes[foundNodeKey];
-        if (foundNode && foundNode.pages && foundNode.pages.length > 0) {
-          // Fallback: Flattened navigation
-          setNavigationStack([
-            { key: null, entries: roots, title: 'Documentation' },
-            { key: foundNodeKey, entries: foundNode.pages, title: foundNode.title, badge: foundNode.badge },
-          ]);
-          return true;
-        }
+          const foundNode = nodes[foundNodeKey];
+          if (foundNode && foundNode.pages && foundNode.pages.length > 0) {
+            // Fallback: Flattened navigation
+            return [
+              { key: null, entries: roots, title: 'Documentation' },
+              { key: foundNodeKey, entries: foundNode.pages, title: foundNode.title, badge: foundNode.badge },
+            ];
+          }
+
+          return currentStack;
+        });
+        return true;
       } else if (url === '/' || url === '') {
         // Reset to root if we are on homepage
-        if (navigationStack.length > 1) {
-          setSlideDirection('backward');
-          setAnimationKey((prev) => prev + 1);
-        }
-        setNavigationStack([{ key: null, entries: roots, title: 'Documentation' }]);
+        setNavigationStack((currentStack) => {
+          if (currentStack.length > 1) {
+            setSlideDirection('backward');
+            setAnimationKey((prev) => prev + 1);
+          }
+          return [{ key: null, entries: roots, title: 'Documentation' }];
+        });
         return true;
       }
       return false;
     },
-    [findNodeKeyByUrl, tryConnectStack, navigationStack, nodes, roots]
+    [findNodeKeyByUrl, tryConnectStack, nodes, roots]
   );
 
   /**
    * Restore state from localStorage on mount, or navigate to URL
    */
   useEffect(() => {
-    if (!data || roots.length === 0) return;
-    if (isInitialized) return;
+    if (!data || roots.length === 0 || isInitialized) return;
 
     const currentUrl = window.location.pathname;
 
@@ -387,7 +408,7 @@ export default function NestedSideBar() {
     }
 
     setIsInitialized(true);
-  }, [data, roots, buildStackFromPath, isInitialized, findNodeKeyByUrl, tryConnectStack, nodes]);
+  }, [data, roots, nodes, isInitialized, buildStackFromPath, findNodeKeyByUrl, tryConnectStack]);
 
   /**
    * Save state whenever navigation changes
@@ -750,10 +771,7 @@ export default function NestedSideBar() {
         <div className="flex items-center gap-2.5 min-w-0 flex-1 ">
           {IconComponent && (
             <span
-              className={cn(
-                'flex items-center justify-center w-5 h-5 flex-shrink-0',
-                isActive ? 'text-purple-600' : 'text-gray-500'
-              )}
+              className={cn('flex items-center justify-center w-5 h-5 flex-shrink-0', isActive ? 'text-black' : 'text-gray-500')}
             >
               <IconComponent className="w-4 h-4" />
             </span>
@@ -761,7 +779,7 @@ export default function NestedSideBar() {
           <span
             className={cn(
               'text-[13px] truncate',
-              isActive ? 'text-purple-600 font-medium' : 'text-gray-600 group-hover:text-gray-900'
+              isActive ? 'text-black font-medium' : 'text-gray-600 group-hover:text-gray-900'
             )}
           >
             {item.title}
@@ -769,20 +787,20 @@ export default function NestedSideBar() {
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
           {canFavorite && (
-            <button
+            <div
               onClick={handleStarClick}
               className={cn(
-                'flex items-center justify-center w-5 h-5 rounded transition-colors',
+                'flex items-center justify-center w-5 h-5 rounded transition-colors cursor-pointer',
                 isFav
                   ? 'text-amber-400 hover:text-amber-500'
                   : 'text-gray-300 opacity-0 group-hover:opacity-100 hover:text-amber-400'
               )}
             >
               <Star className={cn('w-3.5 h-3.5', isFav && 'fill-current')} />
-            </button>
+            </div>
           )}
           {itemHasChildren && (
-            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-purple-500 group-hover:translate-x-0.5 transition-transform">
+            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black group-hover:translate-x-0.5 transition-transform">
               <ChevronRight className="w-4 h-4" />
             </span>
           )}
@@ -793,7 +811,7 @@ export default function NestedSideBar() {
     const baseClasses =
       'group flex items-center justify-between w-full px-3 py-1 rounded-lg cursor-pointer text-left transition-colors hover:bg-gray-100 active:bg-gray-200';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
-    const activeClasses = isActive ? 'bg-purple-100 hover:bg-purple-100 border-l-4 border-purple-600 rounded-l-none' : '';
+    const activeClasses = isActive ? 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none' : '';
 
     // Leaf item with href → render as link
     if (item.href && !itemHasChildren) {
@@ -899,7 +917,7 @@ export default function NestedSideBar() {
                               className={cn(
                                 'flex items-center gap-2 px-2 py-1.5 rounded text-left transition-colors',
                                 !isCurrentLevel && 'hover:bg-gray-100 cursor-pointer',
-                                isCurrentLevel && 'bg-purple-50 cursor-default'
+                                isCurrentLevel && 'bg-gray-200 cursor-default'
                               )}
                               style={{ paddingLeft: `${displayIndex * 12 + 8}px` }}
                             >
@@ -909,10 +927,7 @@ export default function NestedSideBar() {
                                 <ChevronRight className="w-3.5 h-3.5 text-gray-300 flex-shrink-0" />
                               )}
                               <span
-                                className={cn(
-                                  'text-sm truncate',
-                                  isCurrentLevel ? 'font-medium text-purple-700' : 'text-gray-600'
-                                )}
+                                className={cn('text-sm truncate', isCurrentLevel ? 'font-medium text-black' : 'text-gray-600')}
                               >
                                 {level.title}
                               </span>
@@ -1000,14 +1015,14 @@ export default function NestedSideBar() {
                         onClick={() => navigateToFavorite(fav)}
                         className={cn(
                           'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-amber-50 active:bg-amber-100',
-                          isActive && 'bg-purple-100 hover:bg-purple-100 border-l-4 border-purple-600 rounded-l-none'
+                          isActive && 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none'
                         )}
                       >
                         <div className="flex items-center gap-2.5 min-w-0 flex-1">
                           <span
                             className={cn(
                               'text-[14px] truncate',
-                              isActive ? 'text-purple-600 font-medium' : 'text-gray-600 group-hover:text-gray-900'
+                              isActive ? 'text-black font-medium' : 'text-gray-600 group-hover:text-gray-900'
                             )}
                           >
                             {fav.title}
@@ -1024,17 +1039,17 @@ export default function NestedSideBar() {
                               {fav.badge}
                             </span>
                           )}
-                          <button
+                          <div
                             onClick={(e) => {
                               e.stopPropagation();
                               if (node) toggleFavorite(fav.nodeKey, node);
                             }}
-                            className="flex items-center justify-center w-5 h-5 text-amber-400 hover:text-amber-500 rounded transition-colors"
+                            className="flex items-center justify-center w-5 h-5 text-amber-400 hover:text-amber-500 rounded transition-colors cursor-pointer"
                           >
                             <Star className="w-3.5 h-3.5 fill-current" />
-                          </button>
+                          </div>
                           {node?.pages && node.pages.length > 0 && (
-                            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-purple-500">
+                            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black">
                               <ChevronRight className="w-4 h-4" />
                             </span>
                           )}
@@ -1046,7 +1061,20 @@ export default function NestedSideBar() {
               </div>
             )}
 
-            {renderEntries(currentLevel.entries)}
+            {/* Empty State */}
+            {currentLevel.entries.length === 0 && favorites.length === 0 && (
+              <div className="flex flex-col items-center justify-center px-6 py-12 text-center">
+                <div className="mb-4 p-3 rounded-full bg-gray-100">
+                  <FileQuestion className="w-8 h-8 text-gray-400" />
+                </div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-2">Your catalog is empty</h3>
+                <p className="text-xs text-gray-500 leading-relaxed max-w-[240px]">
+                  Navigation will appear here when you add resources to your EventCatalog.
+                </p>
+              </div>
+            )}
+
+            {currentLevel.entries.length > 0 && renderEntries(currentLevel.entries)}
           </nav>
         </>
       )}