@eventcatalog/core 2.65.0 → 3.0.0-beta.0

package/eventcatalog/src/components/SideBars/MessageSideBar.astro

@@ -1,248 +0,0 @@
----
-import type { CollectionEntry } from 'astro:content';
-import PillListFlat from '@components/Lists/PillListFlat';
-import OwnersList from '@components/Lists/OwnersList';
-import type { CollectionMessageTypes } from '@types';
-import * as path from 'path';
-import VersionList from '@components/Lists/VersionList.astro';
-import { buildUrl } from '@utils/url-builder';
-import { FileDownIcon, ScrollText, Workflow, RssIcon } from 'lucide-react';
-import RepositoryList from '@components/Lists/RepositoryList.astro';
-import { getOwner } from '@utils/collections/owners';
-import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
-import config from '@config';
-import { getSchemaFormatFromURL } from '@utils/collections/schemas';
-import { isChangelogEnabled } from '@utils/feature';
-interface Props {
-  message: CollectionEntry<CollectionMessageTypes>;
-}
-
-const { message } = Astro.props;
-
-const producers = (message.data.producers as CollectionEntry<'services'>[]) || [];
-const consumers = (message.data.consumers as CollectionEntry<'services'>[]) || [];
-const channels = (message.data.messageChannels as CollectionEntry<'channels'>[]) || [];
-
-const ownersRaw = message.data?.owners || [];
-const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
-const filteredOwners = owners.filter((o) => o !== undefined);
-
-const resourceGroups = message.data?.resourceGroups || [];
-
-const attachments = message.data.attachments || [];
-
-const attachmentsList = attachments.map((a) => {
-  const attachmentIsURL = typeof a === 'string';
-  return {
-    label: attachmentIsURL ? a : (a.title ?? a.url),
-    href: attachmentIsURL ? a : a.url,
-    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
-    target: '_blank' as const,
-    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
-  };
-});
-
-const producerList = producers.map((p) => ({
-  label: `${p.data.name}`,
-  tag: `v${p.data.version}`,
-  collection: p.collection,
-  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
-}));
-
-const consumerList = consumers.map((p) => ({
-  label: `${p.data.name}`,
-  tag: `v${p.data.version}`,
-  collection: p.collection,
-  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
-}));
-
-const ownersList = filteredOwners.map((o) => ({
-  label: o.data.name,
-  type: o.collection,
-  badge: o.collection === 'users' ? o.data.role : 'Team',
-  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
-}));
-
-const channelList = channels.map((c) => ({
-  label: `${c.data.name}`,
-  tag: `v${c.data.version}`,
-  collection: c.collection,
-  href: buildUrl(`/docs/channels/${c.data.id}/${c.data.version}`),
-}));
-
-const getType = (type: string) => {
-  switch (type) {
-    case 'queries':
-      return 'Query';
-    default:
-      return message.collection.slice(0, -1);
-  }
-};
-
-const getProducerEmptyMessage = (type: string) => {
-  const value = type.toLowerCase();
-  switch (value) {
-    case 'query':
-    case 'command':
-      return `This ${value} does not get invoked by any services.`;
-    default:
-      return `This ${value} does not get produced by any services.`;
-  }
-};
-
-const getConsumerEmptyMessage = (type: string) => {
-  const value = type.toLowerCase();
-  switch (value) {
-    case 'query':
-    case 'command':
-      return `This ${value} does not invoke any service.`;
-    default:
-      return `This ${value} does not get consumed by any services.`;
-  }
-};
-
-const type = getType(message.collection);
-
-const isRSSEnabled = config.rss?.enabled;
-
-// @ts-ignore
-const publicPath = message?.catalog?.publicPath;
-
-const schemaFilePath = message?.data?.schemaPath;
-const schemaURL = path.join(publicPath, schemaFilePath || '');
-
-const shouldRenderSideBarSection = (section: string) => {
-  if (!message.data.detailsPanel) {
-    return true;
-  }
-  // @ts-ignore
-  return message.data.detailsPanel[section]?.visible ?? true;
-};
----
-
-<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
-  <div class="">
-    {
-      resourceGroups
-        .filter((section) => section.items.length > 0 && section.sidebar)
-        .map((section) => <CustomSideBarSectionList section={section} />)
-    }
-    {
-      producerList.length > 0 && shouldRenderSideBarSection('producers') && (
-        <PillListFlat
-          color="pink"
-          title={`Producers (${producerList.length})`}
-          pills={producerList}
-          emptyMessage={getProducerEmptyMessage(type)}
-          client:load
-        />
-      )
-    }
-    {
-      consumerList.length > 0 && shouldRenderSideBarSection('consumers') && (
-        <PillListFlat
-          color="pink"
-          title={`Consumers (${consumerList.length})`}
-          pills={consumerList}
-          emptyMessage={getConsumerEmptyMessage(type)}
-          client:load
-        />
-      )
-    }
-    {
-      channelList.length > 0 && shouldRenderSideBarSection('channels') && (
-        <PillListFlat color="pink" title={`Channels (${channelList.length})`} pills={channelList} client:load />
-      )
-    }
-
-    {
-      message.data.versions && shouldRenderSideBarSection('versions') && (
-        <VersionList
-          title={`Versions (${message.data.versions?.length})`}
-          versions={message.data.versions}
-          collectionItem={message}
-        />
-      )
-    }
-
-    {
-      message.data.attachments && shouldRenderSideBarSection('attachments') && (
-        <PillListFlat
-          title={`Attachments (${attachmentsList.length})`}
-          pills={attachmentsList}
-          emptyMessage={`This ${type} does not have any attachments.`}
-          color="pink"
-          client:load
-        />
-      )
-    }
-
-    {
-      ownersList.length > 0 && shouldRenderSideBarSection('owners') && (
-        <OwnersList
-          title={`Owners (${ownersList.length})`}
-          owners={ownersList}
-          emptyMessage={`This ${type} does not have any documented owners.`}
-          client:load
-        />
-      )
-    }
-
-    {
-      message.data.repository && shouldRenderSideBarSection('repository') && (
-        <RepositoryList repository={message.data.repository?.url} language={message.data.repository?.language} />
-      )
-    }
-
-    {
-      isRSSEnabled && (
-        <div class="mx-auto pb-8 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
-          <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">{type} RSS Feed</span>
-          <ul role="list" class="space-y-2 mt-2">
-            <li class="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
-              <a class={`flex items-center space-x-2`} target="_blank" href={buildUrl(`/rss/${message.collection}/rss.xml`)}>
-                <RssIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
-                <span class="font-light text-sm truncate">RSS Feed</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      )
-    }
-
-    <div class="space-y-2">
-      {
-        message?.data?.schemaPath && (
-          <a
-            href={buildUrl(schemaURL, true)}
-            download={`${message.data.name}(${message.data.version})-${schemaFilePath}`}
-            class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-          >
-            <FileDownIcon strokeWidth={2} size={16} />
-            <span>Download {getSchemaFormatFromURL(schemaURL)?.toUpperCase()} schema</span>
-          </a>
-        )
-      }
-      <a
-        href={buildUrl(`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`)}
-        class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-      >
-        <Workflow strokeWidth={2} size={16} />
-        <span class="block">View in visualiser</span>
-      </a>
-
-      {
-        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
-          <a
-            href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.latestVersion}/changelog`)}
-            class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-          >
-            <ScrollText strokeWidth={2} size={16} />
-            <span class="block">Read changelog</span>
-          </a>
-        )
-      }
-    </div>
-  </div>
-</aside>

package/eventcatalog/src/components/SideBars/ServiceSideBar.astro

@@ -1,294 +0,0 @@
----
-import OwnersList from '@components/Lists/OwnersList';
-import PillListFlat from '@components/Lists/PillListFlat';
-import RepositoryList from '@components/Lists/RepositoryList.astro';
-import SpecificationsList from '@components/Lists/SpecificationsList.astro';
-import CustomSideBarSectionList from '@components/Lists/CustomSideBarSectionList.astro';
-import VersionList from '@components/Lists/VersionList.astro';
-import { buildUrl } from '@utils/url-builder';
-import { getOwner } from '@utils/collections/owners';
-import type { CollectionEntry } from 'astro:content';
-import { ScrollText, Workflow, FileDownIcon, Code, Link, RssIcon } from 'lucide-react';
-import { join } from 'node:path';
-import config from '@config';
-import { getDomainsForService } from '@utils/collections/domains';
-import { isChangelogEnabled } from '@utils/feature';
-interface Props {
-  service: CollectionEntry<'services'>;
-}
-
-const { service } = Astro.props;
-
-// @ts-ignore
-const sends = (service.data.sends as CollectionEntry<'events'>[]) || [];
-// @ts-ignore
-const receives = (service.data.receives as CollectionEntry<'events'>[]) || [];
-
-// @ts-ignore
-const writesTo = (service.data.writesTo as CollectionEntry<'containers'>[]) || [];
-// @ts-ignore
-const readsFrom = (service.data.readsFrom as CollectionEntry<'containers'>[]) || [];
-
-// @ts-ignore
-const entities = (service.data.entities as CollectionEntry<'entities'>[]) || [];
-
-const ownersRaw = service.data?.owners || [];
-const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
-const filteredOwners = owners.filter((o) => o !== undefined);
-
-const resourceGroups = service.data?.resourceGroups || [];
-
-const domainsServiceBelongsTo = await getDomainsForService(service);
-
-const attachments = service.data.attachments || [];
-
-const attachmentsList = attachments.map((a) => {
-  const attachmentIsURL = typeof a === 'string';
-  return {
-    label: attachmentIsURL ? a : (a.title ?? a.url),
-    href: attachmentIsURL ? a : a.url,
-    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
-    target: '_blank' as const,
-    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
-  };
-});
-
-const sendsList = sends
-  .sort((a, b) => a.collection.localeCompare(b.collection))
-  .map((p) => ({
-    label: p.data.name,
-    badge: p.collection,
-    color: p.collection === 'events' ? 'orange' : 'blue',
-    collection: p.collection,
-    tag: `v${p.data.version}`,
-    href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-  }));
-
-const receivesList = receives
-  .sort((a, b) => a.collection.localeCompare(b.collection))
-  .map((p) => ({
-    label: p.data.name,
-    badge: p.collection,
-    color: p.collection === 'events' ? 'orange' : 'blue',
-    tag: `v${p.data.version}`,
-    collection: p.collection,
-    href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-  }));
-
-const writesToList = writesTo.map((p) => ({
-  label: p.data.name,
-  badge: p.collection,
-  color: p.collection === 'containers' ? 'green' : 'blue',
-  collection: p.collection,
-  tag: `v${p.data.version}`,
-  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-}));
-
-const readsFromList = readsFrom.map((p) => ({
-  label: p.data.name,
-  badge: p.collection,
-  color: p.collection === 'containers' ? 'green' : 'blue',
-  collection: p.collection,
-  tag: `v${p.data.version}`,
-  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-}));
-
-const ownersList = filteredOwners.map((o) => ({
-  label: o.data.name,
-  type: o.collection,
-  badge: o.collection === 'users' ? o.data.role : 'Team',
-  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
-}));
-
-const domainList = domainsServiceBelongsTo.map((d) => ({
-  label: d.data.name,
-  badge: d.collection,
-  tag: `v${d.data.version}`,
-  collection: d.collection,
-  href: buildUrl(`/docs/${d.collection}/${d.data.id}/${d.data.version}`),
-}));
-
-const entityList = entities.map((p) => ({
-  label: p.data.name,
-  badge: p.collection,
-  tag: `v${p.data.version}`,
-  collection: p.collection,
-  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
-}));
-
-const isRSSEnabled = config.rss?.enabled;
-
-// @ts-ignore
-const publicPath = service?.catalog?.publicPath;
-const schemaFilePath = service?.data?.schemaPath;
-const schemaURL = join(publicPath, schemaFilePath || '');
-
-const shouldRenderSideBarSection = (section: string) => {
-  if (!service.data.detailsPanel) {
-    return true;
-  }
-  // @ts-ignore
-  return service.data.detailsPanel[section]?.visible ?? true;
-};
----
-
-<aside class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
-  <div id="sidebar-cta-portal" class="">
-    {
-      resourceGroups
-        .filter((section) => section.items.length > 0 && section.sidebar)
-        .map((section) => <CustomSideBarSectionList section={section} />)
-    }
-    {
-      domainList.length > 0 && shouldRenderSideBarSection('domains') && (
-        <PillListFlat
-          title={`Domains (${domainList.length})`}
-          pills={domainList}
-          emptyMessage={`This service does not belong to any domains.`}
-          color="orange"
-          client:load
-        />
-      )
-    }
-    {
-      shouldRenderSideBarSection('messages') && (
-        <>
-          <PillListFlat
-            title={`Receives Messages (${receivesList.length})`}
-            pills={receivesList}
-            emptyMessage={`This service does not receive any messages.`}
-            color="orange"
-            client:load
-          />
-          <PillListFlat
-            title={`Sends Messages (${sendsList.length})`}
-            pills={sendsList}
-            emptyMessage={`This service does not send any messages.`}
-            color="orange"
-            client:load
-          />
-        </>
-      )
-    }
-    <>
-      <PillListFlat
-        title={`Writes to (${writesToList.length})`}
-        pills={writesToList}
-        emptyMessage={`This service does not receive any messages.`}
-        color="orange"
-        client:load
-      />
-    </>
-    <>
-      <PillListFlat
-        title={`Reads from (${readsFromList.length})`}
-        pills={readsFromList}
-        emptyMessage={`This service does not read from any containers.`}
-        color="orange"
-        client:load
-      />
-    </>
-    {
-      service.data.versions && shouldRenderSideBarSection('versions') && (
-        <VersionList versions={service.data.versions} collectionItem={service} />
-      )
-    }
-
-    {
-      service.data.attachments && shouldRenderSideBarSection('attachments') && (
-        <PillListFlat
-          title={`Attachments (${attachmentsList.length})`}
-          pills={attachmentsList}
-          emptyMessage={`This service does not have any attachments.`}
-          color="pink"
-          client:load
-        />
-      )
-    }
-
-    {
-      service.data.specifications && shouldRenderSideBarSection('specifications') && (
-        <SpecificationsList collectionItem={service} />
-      )
-    }
-
-    {
-      entities.length > 0 && shouldRenderSideBarSection('entities') && (
-        <PillListFlat
-          title={`Entities (${entities.length})`}
-          pills={entityList}
-          emptyMessage={`This service does not contain any entities.`}
-          color="pink"
-          client:load
-        />
-      )
-    }
-
-    {
-      shouldRenderSideBarSection('owners') && (
-        <OwnersList
-          title={`Owners (${ownersList.length})`}
-          owners={ownersList}
-          emptyMessage={`This service does not have any documented owners.`}
-          client:load
-        />
-      )
-    }
-
-    {
-      service.data.repository && shouldRenderSideBarSection('repository') && (
-        <RepositoryList repository={service.data.repository?.url} language={service.data.repository?.language} />
-      )
-    }
-
-    {
-      isRSSEnabled && (
-        <div class="mx-auto pb-4 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 border-b border-gray-100 mb-4">
-          <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">Services RSS Feed</span>
-          <ul role="list" class="space-y-2 mt-2">
-            <li class="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
-              <a class={`flex items-center space-x-2`} target="_blank" href={buildUrl(`/rss/services/rss.xml`)}>
-                <RssIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
-                <span class="font-light text-sm truncate">RSS</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      )
-    }
-
-    <div class="space-y-2">
-      {
-        service?.data?.schemaPath && (
-          <a
-            href={buildUrl(schemaURL, true)}
-            download={`${service.data.name}(${service.data.version})-${schemaFilePath}`}
-            class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-          >
-            <FileDownIcon strokeWidth={2} size={16} />
-            <span>Download schema</span>
-          </a>
-        )
-      }
-      <a
-        href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)}
-        class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-      >
-        <Workflow strokeWidth={2} size={16} />
-        <span class="block">View in visualiser</span>
-      </a>
-      {
-        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
-          <a
-            href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.latestVersion}/changelog`)}
-            class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-          >
-            <ScrollText strokeWidth={2} size={16} />
-            <span class="block">Read changelog</span>
-          </a>
-        )
-      }
-    </div>
-  </div>
-</aside>

package/eventcatalog/src/components/SideNav/ListViewSideBar/components/CollapsibleGroup.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-
-interface CollapsibleGroupProps {
-  isCollapsed: boolean;
-  onToggle: () => void;
-  title: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-}
-
-const CollapsibleGroup: React.FC<CollapsibleGroupProps> = ({ isCollapsed, onToggle, title, children, className = '' }) => (
-  <div className={className}>
-    <div className="flex items-center">
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          onToggle();
-        }}
-        className="p-1 hover:bg-gray-100 rounded-md"
-      >
-        <div className={`transition-transform duration-150 ${isCollapsed ? '' : 'rotate-180'}`}>
-          <ChevronDownIcon className="h-3 w-3 text-gray-500" />
-        </div>
-      </button>
-      {typeof title === 'string' ? (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggle();
-          }}
-          className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md"
-        >
-          {title}
-        </button>
-      ) : (
-        title
-      )}
-    </div>
-    <div className={`overflow-hidden transition-[height] duration-150 ease-out ${isCollapsed ? 'h-0' : 'h-auto'}`}>
-      {children}
-    </div>
-  </div>
-);
-
-export default CollapsibleGroup;

package/eventcatalog/src/components/SideNav/ListViewSideBar/components/MessageList.tsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { getMessageColorByCollection, getMessageCollectionName } from '../index';
-
-interface MessageListProps {
-  messages: any[];
-  decodedCurrentPath: string;
-  searchTerm?: string;
-}
-
-const HighlightedText = React.memo(({ text, searchTerm }: { text: string; searchTerm?: string }) => {
-  if (!searchTerm) return <>{text}</>;
-
-  const regex = new RegExp(`(${searchTerm})`, 'gi');
-  const parts = text.split(regex);
-
-  return (
-    <>
-      {parts.map((part, index) =>
-        regex.test(part) ? (
-          <span key={index} className="bg-yellow-200 text-gray-900 font-semibold">
-            {part}
-          </span>
-        ) : (
-          <span key={index}>{part}</span>
-        )
-      )}
-    </>
-  );
-});
-
-const getMessageColorByLabelOrCollection = (collection: string, badge?: string) => {
-  if (!badge) {
-    return getMessageColorByCollection(collection);
-  }
-
-  // Will try and match the label against HTTP verbs
-  const httpVerbs = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'];
-  if (badge && httpVerbs.includes(badge.toUpperCase())) {
-    if (badge.toUpperCase() === 'GET') return 'bg-blue-50 text-blue-600';
-    if (badge.toUpperCase() === 'POST') return 'bg-green-50 text-green-600';
-    if (badge.toUpperCase() === 'PUT') return 'bg-yellow-50 text-yellow-600';
-    if (badge.toUpperCase() === 'DELETE') return 'bg-red-50 text-red-600';
-    if (badge.toUpperCase() === 'PATCH') return 'bg-purple-50 text-purple-600';
-    if (badge.toUpperCase() === 'HEAD') return 'bg-gray-50 text-gray-600';
-    if (badge.toUpperCase() === 'OPTIONS') return 'bg-orange-50 text-orange-600';
-  }
-
-  return getMessageColorByCollection(collection);
-};
-
-const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath, searchTerm }) => (
-  <ul className="space-y-0.5 border-l border-gray-200/80 ml-[9px] pl-4">
-    {messages.map((message: any) => (
-      <li key={message.id} data-active={decodedCurrentPath === message.href}>
-        <a
-          href={message.href}
-          data-active={decodedCurrentPath === message.href}
-          className={`flex items-center justify-between px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-            decodedCurrentPath.includes(message.href) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
-          }`}
-          title={message.data?.sidebar?.label || message.data.name}
-        >
-          <span className="truncate">
-            <HighlightedText text={message.data?.sidebar?.label || message.data.name} searchTerm={searchTerm} />
-            <span className="text-xs text-gray-400">{message.data.draft ? ' (DRAFT)' : ''}</span>
-          </span>
-          <span
-            className={`ml-2 text-[10px]  flex items-center gap-1 font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByLabelOrCollection(message.collection, message.data?.sidebar?.badge)} ${message.data?.sidebar?.backgroundColor}`}
-          >
-            {message.data?.sidebar?.badge || getMessageCollectionName(message.collection, message)}
-          </span>
-        </a>
-      </li>
-    ))}
-  </ul>
-);
-
-export default MessageList;