@eventcatalog/core 3.0.0-beta.9 → 3.1.0

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import * as LucideIcons from 'lucide-react';
 import { ChevronRight, ChevronLeft, ChevronDown, Home, Star, FileQuestion } from 'lucide-react';
-import type { NavigationData, NavNode, ChildRef } from './sidebar-builder';
+import type { NavNode, ChildRef } from '@stores/sidebar-store/state';
 import SearchBar from './SearchBar';
 import { saveState, loadState, saveCollapsedSections, loadCollapsedSections } from './storage';
 import { useStore } from '@nanostores/react';
@@ -13,21 +13,21 @@ import { favoritesStore, toggleFavorite as toggleFavoriteAction, type FavoriteIt
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
 
 // ============================================
-// Badge color mapping
+// Badge color mapping (uses CSS variables from theme.css)
 // ============================================
 
 const getBadgeClasses = (badge: string): string => {
   const badgeColors: Record<string, string> = {
-    domain: 'bg-blue-100 text-blue-700',
-    service: 'bg-green-100 text-green-700',
-    event: 'bg-amber-100 text-amber-700',
-    command: 'bg-pink-100 text-pink-700',
-    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',
+    domain: 'bg-[rgb(var(--ec-badge-domain-bg))] text-[rgb(var(--ec-badge-domain-text))]',
+    service: 'bg-[rgb(var(--ec-badge-service-bg))] text-[rgb(var(--ec-badge-service-text))]',
+    event: 'bg-[rgb(var(--ec-badge-event-bg))] text-[rgb(var(--ec-badge-event-text))]',
+    command: 'bg-[rgb(var(--ec-badge-command-bg))] text-[rgb(var(--ec-badge-command-text))]',
+    query: 'bg-[rgb(var(--ec-badge-query-bg))] text-[rgb(var(--ec-badge-query-text))]',
+    message: 'bg-[rgb(var(--ec-badge-message-bg))] text-[rgb(var(--ec-badge-message-text))]',
+    design: 'bg-[rgb(var(--ec-badge-design-bg))] text-[rgb(var(--ec-badge-design-text))]',
+    channel: 'bg-[rgb(var(--ec-badge-channel-bg))] text-[rgb(var(--ec-badge-channel-text))]',
   };
-  return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
+  return badgeColors[badge.toLowerCase()] || 'bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]';
 };
 
 // ============================================
@@ -472,9 +472,45 @@ export default function NestedSideBar() {
   // Show loading state if no data yet
   if (!data || roots.length === 0) {
     return (
-      <aside className="w-[315px] h-screen flex flex-col bg-gray-50 border-r border-gray-200">
-        <div className="px-3 py-2 bg-white border-b border-gray-200">
-          <span className="text-sm font-semibold text-gray-900">Loading...</span>
+      <aside className="w-[315px] h-full flex flex-col font-sans">
+        {/* Search skeleton */}
+        <div className="px-3 py-3 border-b border-[rgb(var(--ec-content-border))]">
+          <div className="h-9 bg-[rgb(var(--ec-content-hover))] rounded-lg animate-pulse" />
+        </div>
+        {/* Content skeleton */}
+        <div className="p-3 space-y-3">
+          {/* Group header skeleton */}
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="w-3.5 h-3.5 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse" />
+            <div className="h-4 w-24 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse" />
+          </div>
+          {/* Item skeletons */}
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="flex items-center gap-2.5 px-3 py-1.5 ml-3.5 border-l border-[rgb(var(--ec-content-border))]">
+              <div className="w-4 h-4 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse" />
+              <div
+                className="h-4 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse"
+                style={{ width: `${60 + ((i * 15) % 40)}%` }}
+              />
+            </div>
+          ))}
+          {/* Second group skeleton */}
+          <div className="flex items-center gap-2 px-2 py-1.5 mt-4">
+            <div className="w-3.5 h-3.5 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse" />
+            <div className="h-4 w-20 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse" />
+          </div>
+          {[1, 2, 3].map((i) => (
+            <div
+              key={`g2-${i}`}
+              className="flex items-center gap-2.5 px-3 py-1.5 ml-3.5 border-l border-[rgb(var(--ec-content-border))]"
+            >
+              <div className="w-4 h-4 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse" />
+              <div
+                className="h-4 bg-[rgb(var(--ec-content-hover))] rounded animate-pulse"
+                style={{ width: `${50 + ((i * 20) % 35)}%` }}
+              />
+            </div>
+          ))}
         </div>
       </aside>
     );
@@ -698,32 +734,36 @@ export default function NestedSideBar() {
 
     const headerContent = (
       <>
-        <div className="flex items-center">
+        <div className="flex items-center gap-2">
           {GroupIcon && (
-            <span className="mr-2 text-gray-900">
-              <GroupIcon className="w-3.5 h-3.5" />
+            <span className="flex items-center justify-center w-5 h-5 rounded bg-[rgb(var(--ec-group-icon-bg))] text-[rgb(var(--ec-group-icon-text))]">
+              <GroupIcon className="w-3 h-3" />
             </span>
           )}
-          <span className="text-sm text-black font-semibold">{group.title}</span>
+          <span className="text-[13px] text-[rgb(var(--ec-content-text))] font-semibold tracking-tight">{group.title}</span>
         </div>
-        {canCollapse && <ChevronDown className={cn('w-4 h-4 text-gray-400 transition-transform', isCollapsed && '-rotate-90')} />}
+        {canCollapse && (
+          <ChevronDown
+            className={cn('w-4 h-4 text-[rgb(var(--ec-icon-color))] transition-transform', isCollapsed && '-rotate-90')}
+          />
+        )}
       </>
     );
 
     return (
-      <div key={`group-${groupKey || index}`} className="mb-4 last:mb-2">
+      <div key={`group-${groupKey || index}`} className="mb-5 last:mb-2">
         {canCollapse ? (
           <button
             onClick={() => toggleSectionCollapse(groupId)}
-            className="flex items-center justify-between w-full px-2 py-1.5 pb-1.5 hover:bg-gray-100 rounded transition-colors cursor-pointer"
+            className="flex items-center justify-between w-full px-2 py-1.5 hover:bg-[rgb(var(--ec-content-hover))] rounded-md transition-colors cursor-pointer"
           >
             {headerContent}
           </button>
         ) : (
-          <div className="flex items-center justify-between px-2 py-1.5 pb-1.5">{headerContent}</div>
+          <div className="flex items-center justify-between px-2 py-1.5">{headerContent}</div>
         )}
         {!isCollapsed && (
-          <div className="flex flex-col gap-0.5 border-l ml-3.5 border-gray-100">
+          <div className="flex flex-col gap-0.5 border-l ml-4 mt-1 border-[rgb(var(--ec-content-border))]">
             {visibleChildren.map((childRef, childIndex) => {
               const child = resolveRef(childRef);
               if (!child) return null;
@@ -735,7 +775,10 @@ export default function NestedSideBar() {
                 if (!hasVisibleChildren(child)) return null;
 
                 return (
-                  <div key={`nested-group-${childKey || childIndex}`} className="ml-3 mt-1.5 pl-3 border-l border-gray-200">
+                  <div
+                    key={`nested-group-${childKey || childIndex}`}
+                    className="ml-3 mt-1.5 pl-3 border-l border-[rgb(var(--ec-content-border))]"
+                  >
                     {renderGroup(child, childKey, childIndex)}
                   </div>
                 );
@@ -771,15 +814,21 @@ 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-black' : 'text-gray-500')}
+              className={cn(
+                'flex items-center justify-center w-5 h-5 flex-shrink-0',
+                isActive ? 'text-[rgb(var(--ec-content-text))]' : 'text-[rgb(var(--ec-content-text-muted))]'
+              )}
             >
               <IconComponent className="w-4 h-4" />
             </span>
           )}
+          {item.leftIcon && <img src={item.leftIcon} alt="" className="w-4 h-4 flex-shrink-0" />}
           <span
             className={cn(
               'text-[13px] truncate',
-              isActive ? 'text-black font-medium' : 'text-gray-600 group-hover:text-gray-900'
+              isActive
+                ? 'text-[rgb(var(--ec-content-text))] font-medium'
+                : 'text-[rgb(var(--ec-content-text-secondary))] group-hover:text-[rgb(var(--ec-content-text))]'
             )}
           >
             {item.title}
@@ -793,14 +842,14 @@ export default function NestedSideBar() {
                 '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'
+                  : 'text-[rgb(var(--ec-content-text-muted))] opacity-0 group-hover:opacity-100 hover:text-amber-400'
               )}
             >
               <Star className={cn('w-3.5 h-3.5', isFav && 'fill-current')} />
             </div>
           )}
           {itemHasChildren && (
-            <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">
+            <span className="flex items-center justify-center w-5 h-5 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-content-text))] group-hover:translate-x-0.5 transition-transform">
               <ChevronRight className="w-4 h-4" />
             </span>
           )}
@@ -809,9 +858,11 @@ 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';
+      'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
-    const activeClasses = isActive ? 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none' : '';
+    const activeClasses = isActive
+      ? 'bg-[rgb(var(--ec-content-active))] hover:bg-[rgb(var(--ec-content-active))] border-l-2 border-[rgb(var(--ec-accent))] rounded-l-none'
+      : '';
 
     // Leaf item with href → render as link
     if (item.href && !itemHasChildren) {
@@ -856,7 +907,7 @@ export default function NestedSideBar() {
         <>
           {!isTopLevel && (
             <div
-              className="px-3 py-2 bg-white border-b border-gray-200 sticky top-0 z-10"
+              className="px-3 py-2 bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))] sticky top-0 z-10"
               onMouseEnter={() => !isTopLevel && setShowPathPreview(true)}
               onMouseLeave={() => {
                 setShowPathPreview(false);
@@ -868,20 +919,20 @@ export default function NestedSideBar() {
                 disabled={isTopLevel}
                 className={cn(
                   'flex items-center gap-2 w-full px-2 py-1.5 -mx-2 rounded-md transition-colors',
-                  !isTopLevel && 'hover:bg-gray-100 cursor-pointer',
+                  !isTopLevel && 'hover:bg-[rgb(var(--ec-content-hover))] cursor-pointer',
                   isTopLevel && 'cursor-default'
                 )}
               >
                 <span
                   className={cn(
-                    'flex items-center justify-center w-5 h-5 text-gray-500 transition-all',
+                    'flex items-center justify-center w-5 h-5 text-[rgb(var(--ec-icon-color))] transition-all',
                     isTopLevel && 'opacity-0',
                     !isTopLevel && 'group-hover:-translate-x-0.5'
                   )}
                 >
                   <ChevronLeft className="w-4 h-4" />
                 </span>
-                <span className="text-sm font-semibold text-gray-900 truncate">{currentLevel.title}</span>
+                <span className="text-sm font-semibold text-[rgb(var(--ec-content-text))] truncate">{currentLevel.title}</span>
                 {currentLevel.badge && (
                   <span
                     className={cn(
@@ -896,9 +947,11 @@ export default function NestedSideBar() {
 
               {/* Path Preview Dropdown */}
               {showPathPreview && navigationStack.length > 1 && (
-                <div className="absolute left-0 right-0 top-full bg-white border-b border-gray-200 shadow-lg z-20">
+                <div className="absolute left-0 right-0 top-full bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))] shadow-lg z-20">
                   <div className="px-3 py-2">
-                    <div className="text-[10px] font-medium text-gray-400 uppercase tracking-wide mb-2">Navigation Path</div>
+                    <div className="text-[10px] font-medium text-[rgb(var(--ec-content-text-muted))] uppercase tracking-wide mb-2">
+                      Navigation Path
+                    </div>
                     <div className="flex flex-col gap-0.5">
                       {(() => {
                         const SHOW_FIRST = 2; // Show first N items
@@ -916,18 +969,23 @@ export default function NestedSideBar() {
                               disabled={isCurrentLevel}
                               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-gray-200 cursor-default'
+                                !isCurrentLevel && 'hover:bg-[rgb(var(--ec-content-hover))] cursor-pointer',
+                                isCurrentLevel && 'bg-[rgb(var(--ec-content-hover))] cursor-default'
                               )}
                               style={{ paddingLeft: `${displayIndex * 12 + 8}px` }}
                             >
                               {index === 0 ? (
-                                <Home className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
+                                <Home className="w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))] flex-shrink-0" />
                               ) : (
-                                <ChevronRight className="w-3.5 h-3.5 text-gray-300 flex-shrink-0" />
+                                <ChevronRight className="w-3.5 h-3.5 text-[rgb(var(--ec-content-text-muted))] flex-shrink-0" />
                               )}
                               <span
-                                className={cn('text-sm truncate', isCurrentLevel ? 'font-medium text-black' : 'text-gray-600')}
+                                className={cn(
+                                  'text-sm truncate',
+                                  isCurrentLevel
+                                    ? 'font-medium text-[rgb(var(--ec-content-text))]'
+                                    : 'text-[rgb(var(--ec-content-text-secondary))]'
+                                )}
                               >
                                 {level.title}
                               </span>
@@ -957,16 +1015,16 @@ export default function NestedSideBar() {
                                   e.stopPropagation();
                                   setShowFullPath(true);
                                 }}
-                                className="flex items-center gap-2 px-2 py-1.5 rounded text-left transition-colors hover:bg-gray-100 cursor-pointer"
+                                className="flex items-center gap-2 px-2 py-1.5 rounded text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] cursor-pointer"
                                 style={{ paddingLeft: `${SHOW_FIRST * 12 + 8}px` }}
                               >
-                                <span className="flex items-center justify-center w-3.5 h-3.5 text-gray-400">
+                                <span className="flex items-center justify-center w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]">
                                   <span className="text-xs">•••</span>
                                 </span>
-                                <span className="text-sm text-gray-500">
+                                <span className="text-sm text-[rgb(var(--ec-content-text-muted))]">
                                   {hiddenCount} more level{hiddenCount > 1 ? 's' : ''}
                                 </span>
-                                <ChevronDown className="w-3.5 h-3.5 text-gray-400 ml-auto" />
+                                <ChevronDown className="w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))] ml-auto" />
                               </button>
 
                               {/* Last N items */}
@@ -994,15 +1052,15 @@ export default function NestedSideBar() {
             className={cn('flex-1 overflow-y-auto overflow-x-hidden p-3', getAnimationClass())}
             style={{
               scrollbarWidth: 'thin',
-              scrollbarColor: '#e5e7eb transparent',
+              scrollbarColor: 'rgb(var(--ec-content-border)) transparent',
             }}
           >
             {/* Favorites Section */}
             {favorites.length > 0 && isTopLevel && (
               <div className="mb-6">
-                <div className="flex items-center px-2 py-2 pb-2">
+                <div className="flex items-center px-2 py-1.5">
                   <Star className="w-3.5 h-3.5 mr-2 text-amber-400 fill-current" />
-                  <span className="text-sm text-black font-semibold">Favorites</span>
+                  <span className="text-sm text-[rgb(var(--ec-content-text))] font-semibold">Favorites</span>
                 </div>
                 <div className="flex flex-col gap-0.5 border-l ml-3.5 border-amber-200">
                   {favorites.map((fav, index) => {
@@ -1014,15 +1072,18 @@ export default function NestedSideBar() {
                         key={`fav-${index}`}
                         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-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none'
+                          'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-amber-500/10 active:bg-amber-500/20',
+                          isActive &&
+                            'bg-[rgb(var(--ec-content-active))] hover:bg-[rgb(var(--ec-content-active))] border-l-2 border-[rgb(var(--ec-accent))] rounded-l-none'
                         )}
                       >
                         <div className="flex items-center gap-2.5 min-w-0 flex-1">
                           <span
                             className={cn(
                               'text-[14px] truncate',
-                              isActive ? 'text-black font-medium' : 'text-gray-600 group-hover:text-gray-900'
+                              isActive
+                                ? 'text-[rgb(var(--ec-content-text))] font-medium'
+                                : 'text-[rgb(var(--ec-content-text-secondary))] group-hover:text-[rgb(var(--ec-content-text))]'
                             )}
                           >
                             {fav.title}
@@ -1049,7 +1110,7 @@ export default function NestedSideBar() {
                             <Star className="w-3.5 h-3.5 fill-current" />
                           </div>
                           {node?.pages && node.pages.length > 0 && (
-                            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black">
+                            <span className="flex items-center justify-center w-5 h-5 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-content-text))]">
                               <ChevronRight className="w-4 h-4" />
                             </span>
                           )}
@@ -1064,11 +1125,11 @@ export default function NestedSideBar() {
             {/* 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 className="mb-4 p-3 rounded-full bg-[rgb(var(--ec-group-icon-bg))]">
+                  <FileQuestion className="w-8 h-8 text-[rgb(var(--ec-icon-color))]" />
                 </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]">
+                <h3 className="text-sm font-semibold text-[rgb(var(--ec-content-text))] mb-2">Your catalog is empty</h3>
+                <p className="text-xs text-[rgb(var(--ec-content-text-muted))] leading-relaxed max-w-[240px]">
                   Navigation will appear here when you add resources to your EventCatalog.
                 </p>
               </div>

package/eventcatalog/src/components/SideNav/SideNav.astro

@@ -2,26 +2,11 @@
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
-import { getNestedSideBarData } from './NestedSideBar/sidebar-builder';
 import NestedSideBar from './NestedSideBar';
 import { ClientRouter } from 'astro:transitions';
-
-const props = await getNestedSideBarData();
 ---
 
 <div {...Astro.props}>
   <ClientRouter />
   <NestedSideBar client:only="react" />
 </div>
-
-<script is:inline define:vars={{ props }}>
-  window.sidebarData = props;
-</script>
-
-<script>
-  import { setSidebarData } from '@stores/sidebar-store';
-  const data = (window as any).sidebarData;
-  if (data) {
-    setSidebarData(data);
-  }
-</script>

package/eventcatalog/src/components/Tables/Table.tsx

@@ -11,6 +11,7 @@ import {
   type ColumnFiltersState,
 } from '@tanstack/react-table';
 import DebouncedInput from './DebouncedInput';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, SearchX } from 'lucide-react';
 
 import { getColumnsByCollection } from './columns';
 import { useEffect, useMemo, useState } from 'react';
@@ -240,23 +241,26 @@ export const Table = <T extends TCollectionTypes>({
     },
   });
 
+  const totalResults = table.getPrePaginationRowModel().rows.length;
+  const hasResults = table.getRowModel().rows.length > 0;
+
   return (
     <div>
-      {/* <div className='text-right text-gray-400'>{table.getPrePaginationRowModel().rows.length} results</div> */}
-      <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
-        <table className="min-w-full divide-y divide-gray-200 rounded-md ">
-          <thead className="bg-gray-200/50">
+      <div className="rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden">
+        <table className="min-w-full divide-y divide-[rgb(var(--ec-page-border))]">
+          <thead className="bg-[rgb(var(--ec-content-hover))] sticky top-0 z-10">
             {table.getHeaderGroups().map((headerGroup, index) => (
-              <tr key={`${headerGroup}-${index}`} className="rounded-tl-lg">
+              <tr key={`${headerGroup}-${index}`}>
                 {headerGroup.headers.map((header) => (
-                  <th key={`${header.id}`} className="pl-4 pr-3 text-left text-sm font-semibold text-gray-800 sm:pl-0  ">
-                    <div className="flex flex-col justify-start px-2 py-2 space-y-2">
-                      <div className="text-md">
-                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                      </div>
-                      <div className="">
+                  <th
+                    key={`${header.id}`}
+                    className="px-4 py-3 text-left text-xs font-semibold text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider"
+                  >
+                    <div className="flex flex-col gap-2">
+                      <div>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</div>
+                      <div>
                         {header.column.columnDef.meta?.showFilter !== false && <Filter column={header.column} />}
-                        {header.column.columnDef.meta?.showFilter == false && <div className="h-10" />}
+                        {header.column.columnDef.meta?.showFilter == false && <div className="h-9" />}
                       </div>
                     </div>
                   </th>
@@ -265,80 +269,95 @@ export const Table = <T extends TCollectionTypes>({
             ))}
           </thead>
 
-          <tbody className="divide-y divide-gray-300 ">
-            {table.getRowModel().rows.map((row, index) => (
-              <tr key={`${row.id}-${index}`}>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    className={` py-4 pl-4 pr-3 text-sm font-medium text-gray-900  ${cell.column.columnDef.meta?.className}`}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
+          <tbody className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] divide-y divide-[rgb(var(--ec-page-border))]">
+            {hasResults ? (
+              table.getRowModel().rows.map((row, index) => (
+                <tr key={`${row.id}-${index}`} className="hover:bg-[rgb(var(--ec-content-hover))] transition-colors">
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      className={`px-4 py-3 text-sm text-[rgb(var(--ec-page-text))] ${cell.column.columnDef.meta?.className || ''}`}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={table.getAllColumns().length} className="px-4 py-12 text-center">
+                  <div className="flex flex-col items-center justify-center text-[rgb(var(--ec-page-text-muted))]">
+                    <SearchX className="w-10 h-10 text-[rgb(var(--ec-icon-color))] mb-3 opacity-50" />
+                    <p className="text-sm font-medium text-[rgb(var(--ec-page-text-muted))]">No results found</p>
+                    <p className="text-xs text-[rgb(var(--ec-icon-color))] mt-1">Try adjusting your search or filters</p>
+                  </div>
+                </td>
               </tr>
-            ))}
+            )}
           </tbody>
         </table>
       </div>
-      <div>
-        <div className="h-8" />
-        <div className="flex items-center gap-2 justify-end px-4  ">
-          <button
-            className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            {'<<'}
-          </button>
-          <button
-            className="relative inline-flex items-center  bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            {'<'}
-          </button>
-          <button
-            className="relative inline-flex items-center  bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            {'>'}
-          </button>
-          <button
-            className="relative inline-flex items-center rounded-r-md bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            {'>>'}
-          </button>
-          <span className="flex items-center gap-1">
-            <div>Page</div>
-            <strong>
-              {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-            </strong>
-          </span>
-          <span className="flex items-center gap-1">
-            | Go to page:
-            <input
-              type="number"
-              defaultValue={table.getState().pagination.pageIndex + 1}
-              onChange={(e) => {
-                const page = e.target.value ? Number(e.target.value) - 1 : 0;
-                table.setPageIndex(page);
-              }}
-              className="border border-gray-300 p-1 rounded w-16"
-            />
-          </span>
+
+      {/* Pagination */}
+      <div className="flex items-center justify-between px-1 py-4">
+        <div className="text-sm text-[rgb(var(--ec-page-text-muted))]">
+          {totalResults > 0 && (
+            <span>
+              Showing <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getRowModel().rows.length}</span> of{' '}
+              <span className="font-medium text-[rgb(var(--ec-page-text))]">{totalResults}</span> results
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
+            <button
+              className="p-2 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors rounded-l-lg"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+              title="First page"
+            >
+              <ChevronsLeft className="w-4 h-4" />
+            </button>
+            <button
+              className="p-2 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors border-l border-[rgb(var(--ec-page-border))]"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+              title="Previous page"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <span className="px-3 py-2 text-sm text-[rgb(var(--ec-page-text-muted))] border-l border-r border-[rgb(var(--ec-page-border))] min-w-[100px] text-center">
+              Page{' '}
+              <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getState().pagination.pageIndex + 1}</span> of{' '}
+              <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getPageCount() || 1}</span>
+            </span>
+            <button
+              className="p-2 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors border-r border-[rgb(var(--ec-page-border))]"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+              title="Next page"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+            <button
+              className="p-2 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-colors rounded-r-lg"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+              title="Last page"
+            >
+              <ChevronsRight className="w-4 h-4" />
+            </button>
+          </div>
           <select
             value={table.getState().pagination.pageSize}
             onChange={(e) => {
               table.setPageSize(Number(e.target.value));
             }}
+            className="px-3 py-2 text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg hover:border-[rgb(var(--ec-icon-color))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] transition-colors"
           >
             {[10, 20, 30, 40, 50].map((pageSize) => (
               <option key={pageSize} value={pageSize}>
-                Show {pageSize}
+                {pageSize} per page
               </option>
             ))}
           </select>
@@ -394,6 +413,8 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
     return Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 2000);
   }, [column.getFacetedUniqueValues(), filterVariant]);
 
+  const uniqueCount = column.getFacetedUniqueValues().size;
+
   return (
     <div>
       {/* Autocomplete suggestions from faceted values feature */}
@@ -406,11 +427,10 @@ function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T
         type="text"
         value={(columnFilterValue ?? '') as string}
         onChange={(value) => column.setFilterValue(value)}
-        placeholder={`Search... ${!column?.columnDef?.meta?.filterVariant ? `(${column.getFacetedUniqueValues().size})` : ''}`}
-        className="w-full p-2 border shadow rounded"
+        placeholder={!column?.columnDef?.meta?.filterVariant ? `Search (${uniqueCount})...` : 'Search...'}
+        className="w-full px-3 py-2 text-sm bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-input-border))] rounded-lg placeholder:text-[rgb(var(--ec-input-placeholder))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.2)] focus:border-[rgb(var(--ec-accent))] transition-colors"
         list={column.id + 'list'}
       />
-      <div className="h-1" />
     </div>
   );
 }