@eventcatalog/core 3.29.2 → 3.30.0

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

@@ -10,88 +10,91 @@ interface SchemaListItemProps {
   itemRef?: React.Ref<HTMLButtonElement>;
 }
 
-// Derive a namespace from available data
 function getNamespace(message: SchemaItem): string | null {
   const producers = message.data.producers || [];
   const firstProducer = producers[0];
 
   if (firstProducer) {
     const serviceName = extractServiceName(firstProducer.id);
-    return `${serviceName}.${message.collection}`;
+    return serviceName;
   }
 
-  // For services, use the service ID + spec type
   if (message.collection === 'services' && message.specType) {
-    return `${message.specType}`;
+    return `${message.specType} specification`;
   }
 
-  // For data products
   if (message.collection === 'data-products' && message.dataProductId) {
-    return `${extractServiceName(message.dataProductId)}.contracts`;
+    return extractServiceName(message.dataProductId);
   }
 
   return null;
 }
 
 export default function SchemaListItem({ message, isSelected, versions, onClick, itemRef }: SchemaListItemProps) {
-  const hasMultipleVersions = versions.length > 1;
   const ext = message.schemaExtension?.toLowerCase() || '';
   const iconSpec = ICON_SPECS[ext];
   const { label: formatLabel, color: formatColor } = getFormatBadge(ext);
   const namespace = getNamespace(message);
+  const summary = message.data.summary || `Browse the ${message.data.name} schema.`;
+  const versionLabel = `v${message.data.version}`;
 
   return (
     <button
       ref={itemRef}
       onClick={onClick}
-      className={`w-full text-left px-3 py-2 transition-all duration-100 group ${
+      className={`group w-full rounded-lg border px-2.5 py-2 text-left transition-all duration-150 ${
         isSelected
-          ? 'bg-[rgb(var(--ec-accent-subtle))] border-l-2 border-l-[rgb(var(--ec-accent))]'
-          : 'hover:bg-[rgb(var(--ec-content-hover))] border-l-2 border-l-transparent'
+          ? 'border-[rgb(var(--ec-accent)/0.55)] bg-[rgb(var(--ec-accent)/0.1)] shadow-[0_0_0_1px_rgb(var(--ec-accent)/0.3),0_18px_40px_rgb(var(--ec-accent)/0.12)]'
+          : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg)/0.66)] hover:border-[rgb(var(--ec-page-text-muted)/0.3)] hover:bg-[rgb(var(--ec-content-hover)/0.5)]'
       }`}
     >
-      <div className="flex items-center gap-2.5">
-        {/* Schema Format Badge */}
-        <div className="flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-md bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border)/0.5)]">
+      <div className="flex items-start justify-between gap-2">
+        <div className="mt-0.5 flex h-4.5 w-4.5 flex-shrink-0 items-center justify-center rounded-sm border border-[rgb(var(--ec-page-border)/0.55)] bg-[rgb(var(--ec-content-hover))]">
           {iconSpec ? (
-            <img src={buildUrl(`/icons/${iconSpec}.svg`, true)} alt={`${ext} icon`} className="h-4 w-4 schema-icon" />
+            <img src={buildUrl(`/icons/${iconSpec}.svg`, true)} alt={`${ext} icon`} className="schema-icon h-2.5 w-2.5" />
           ) : (
-            <span className={`text-[10px] font-bold font-mono ${formatColor}`}>{formatLabel}</span>
+            <span className={`font-mono text-[6px] font-bold uppercase ${formatColor}`}>{formatLabel}</span>
           )}
         </div>
 
-        {/* Content */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-baseline justify-between gap-2">
-            <span className="text-[13px] font-medium text-[rgb(var(--ec-page-text))] truncate leading-tight">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-2">
+            <h3 className="min-w-0 pr-1 text-[11px] font-semibold leading-4 text-[rgb(var(--ec-page-text))] break-words">
               {message.data.name}
-            </span>
-            <span className="flex-shrink-0 text-[11px] tabular-nums text-[rgb(var(--ec-page-text-muted))] font-mono">
-              v{message.data.version}
+            </h3>
+            <span
+              className={`mt-0.5 flex-shrink-0 rounded-sm border px-1.5 py-0.5 font-mono text-[8px] font-semibold tabular-nums ${
+                isSelected
+                  ? 'border-[rgb(var(--ec-accent)/0.35)] bg-[rgb(var(--ec-accent)/0.15)] text-[rgb(var(--ec-page-text))]'
+                  : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))]'
+              }`}
+            >
+              {versionLabel}
             </span>
           </div>
-          <div className="flex items-center gap-1.5 mt-0.5">
-            <span className="text-[11px] text-[rgb(var(--ec-page-text-muted))]">
+        </div>
+      </div>
+
+      <p className="mt-1.5 text-[10px] leading-4 text-[rgb(var(--ec-page-text-muted))] line-clamp-2">{summary}</p>
+
+      <div className="mt-1.5 flex items-end justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[9px] text-[rgb(var(--ec-page-text-muted))]">
+            <span className="font-medium text-[rgb(var(--ec-page-text-muted))]">
               {getSchemaTypeLabel(message.schemaExtension)}
             </span>
             {namespace && (
               <>
-                <span className="text-[rgb(var(--ec-page-text-muted))] opacity-40">&middot;</span>
-                <span className="text-[11px] text-[rgb(var(--ec-page-text-muted))] truncate font-mono opacity-70">
-                  {namespace}
-                </span>
-              </>
-            )}
-            {hasMultipleVersions && (
-              <>
-                <span className="text-[rgb(var(--ec-page-text-muted))] opacity-40">&middot;</span>
-                <span className="text-[11px] tabular-nums text-[rgb(var(--ec-page-text-muted))] opacity-70">
-                  {versions.length}v
-                </span>
+                <span className="opacity-35">&rsaquo;</span>
+                <span className="truncate">{namespace}</span>
               </>
             )}
           </div>
         </div>
+
+        <span className="flex-shrink-0 text-[9px] font-medium tabular-nums text-[rgb(var(--ec-page-text-muted))]">
+          {versions.length}
+        </span>
       </div>
     </button>
   );

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

@@ -11,7 +11,7 @@ import SearchModal from './SearchModal.tsx';
       name="search"
       placeholder="Search EventCatalog"
       autocomplete="off"
-      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10! text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-dropdown-bg))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6"
+      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10! text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-header-bg))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-[rgb(var(--ec-icon-color))]" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">

package/eventcatalog/src/components/Seo.astro

@@ -25,7 +25,7 @@ if (typeof _image === 'string') {
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="viewport" content="width=device-width" />
-<link rel="icon" type="image/svg+xml" href={buildUrl('/favicon.ico', true)} />
+<link rel="icon" type="image/png" href={buildUrl('/logo.png', true)} />
 
 <SEO
   title={title}

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

@@ -181,7 +181,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
   return (
     <>
       {/* Search Input */}
-      <div className="px-3 py-2 bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))]">
+      <div className="px-4 py-3 bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))]">
         <div className="flex gap-2">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[rgb(var(--ec-input-placeholder))]" />
@@ -190,7 +190,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               placeholder="Search resources..."
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
-              className="w-full pl-9! pr-8! py-2! text-sm! bg-[rgb(var(--ec-input-bg))]! border! border-[rgb(var(--ec-input-border))]! rounded-lg! focus:outline-hidden! focus:ring-2! focus:ring-[rgb(var(--ec-accent))]! focus:border-transparent! text-[rgb(var(--ec-input-text))]! placeholder:text-[rgb(var(--ec-input-placeholder))]!"
+              className="w-full pl-9! pr-8! py-2.5! text-sm! bg-[rgb(var(--ec-input-bg))]! border! border-[rgb(var(--ec-input-border))]! rounded-xl! focus:outline-hidden! focus:ring-2! focus:ring-[rgb(var(--ec-accent))]! focus:border-transparent! text-[rgb(var(--ec-input-text))]! placeholder:text-[rgb(var(--ec-input-placeholder))]!"
             />
             {searchQuery && (
               <button
@@ -207,7 +207,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
             <button
               onClick={() => setShowFilterDropdown(!showFilterDropdown)}
               className={cn(
-                'flex items-center justify-center w-10 h-10 rounded-lg border transition-colors',
+                'flex items-center justify-center w-10 h-10 rounded-xl border transition-colors',
                 searchFilters.size > 0
                   ? 'bg-[rgb(var(--ec-accent)/0.1)] border-[rgb(var(--ec-accent)/0.3)] text-[rgb(var(--ec-accent))]'
                   : 'bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-content-hover))]'