@eventcatalog/core 3.29.2 → 3.31.1

package/eventcatalog/src/layouts/DirectoryLayout.astro

@@ -1,15 +1,8 @@
 ---
 import { Table, type TData, type TCollectionTypes } from '@components/Tables/Table';
-import { buildUrl } from '@utils/url-builder';
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
-import { User, Users } from 'lucide-react';
-import { getUsers } from '@utils/collections/users';
-import { getTeams } from '@utils/collections/teams';
 import config from '@config';
 
-const users = await getUsers();
-const teams = await getTeams();
-
 export interface Props<T extends TCollectionTypes> {
   title: string;
   subtitle: string;
@@ -18,91 +11,33 @@ export interface Props<T extends TCollectionTypes> {
 }
 
 const { title, subtitle, data, type } = Astro.props;
-const currentPath = Astro.url.pathname;
 
 const checkboxLatestId = 'latest-only';
 const checkboxDraftsId = 'drafts-only';
 
 // @ts-ignore
 const tableConfiguration = config[type as keyof typeof config]?.tableConfiguration ?? { columns: {} };
-
-const tabs = [
-  {
-    label: `Users (${users.length})`,
-    href: buildUrl('/directory/users'),
-    isActive: currentPath === '/directory/users',
-    icon: User,
-    activeColor: 'orange',
-    enabled: users.length > 0,
-    visible: users.length > 0,
-  },
-  {
-    label: `Teams (${teams.length})`,
-    href: buildUrl('/directory/teams'),
-    isActive: currentPath === '/directory/teams',
-    icon: Users,
-    activeColor: 'blue',
-    enabled: teams.length > 0,
-    visible: teams.length > 0,
-  },
-];
 ---
 
 <VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
-  <main class="ml-0 bg-[rgb(var(--ec-page-bg))]">
-    <div id="discover-collection-tabs">
-      <div class="hidden sm:block">
-        <div class="border-b border-[rgb(var(--ec-page-border))]">
-          <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
-            {
-              tabs
-                .filter((tab) => tab.visible)
-                .map((tab) => (
-                  <a
-                    href={tab.href}
-                    class:list={[
-                      'group inline-flex items-center py-4 px-1 text-sm font-light text-[rgb(var(--ec-page-text))]',
-                      tab.isActive && 'border-b-[2px] border-[rgb(var(--ec-accent))] text-[rgb(var(--ec-accent))]',
-                      !tab.isActive && 'opacity-70 hover:opacity-100',
-                      !tab.enabled && 'disabled',
-                    ]}
-                    aria-current="page"
-                  >
-                    <tab.icon
-                      className={`w-6 h-6 -ml-0.5 mr-2 ${tab.isActive ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
-                    />
-                    <span>{tab.label}</span>
-                  </a>
-                ))
-            }
-          </nav>
-        </div>
+  <main
+    class="ml-0 bg-[rgb(var(--ec-page-bg))]"
+    style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);"
+  >
+    <div class="p-8 pb-20">
+      <div class="min-w-0">
+        <h1 class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] capitalize md:text-4xl">{title}</h1>
+        <p class="max-w-3xl pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">{subtitle}</p>
       </div>
-    </div>
-
-    <!-- Table -->
-    <div class="pb-20 ml-6 md:pr-10">
-      <div>
-        <div class="sm:flex sm:items-end py-4 pb-4" id="discover-title">
-          <div class="sm:flex-auto space-y-2">
-            <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] capitalize">{title}</h1>
-            <p class="text-md text-[rgb(var(--ec-page-text-muted))]">{subtitle}</p>
-          </div>
-        </div>
-        <div class="mt-4 flow-root">
-          <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-            <div class="inline-block min-w-full align-middle sm:px-6 lg:px-8">
-              <Table
-                checkboxLatestId={checkboxLatestId}
-                checkboxDraftsId={checkboxDraftsId}
-                data={data}
-                collection={type}
-                tableConfiguration={tableConfiguration}
-                client:load
-              />
-            </div>
-          </div>
-        </div>
+      <div class="mt-2 min-w-0">
+        <Table
+          checkboxLatestId={checkboxLatestId}
+          checkboxDraftsId={checkboxDraftsId}
+          data={data}
+          collection={type}
+          tableConfiguration={tableConfiguration}
+          client:load
+        />
       </div>
     </div>
   </main>
@@ -112,10 +47,4 @@ const tabs = [
   .ec-align-top {
     vertical-align: top !important;
   }
-
-  a.disabled {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.25;
-  }
 </style>

package/eventcatalog/src/layouts/SettingsLayout.astro

@@ -0,0 +1,116 @@
+---
+import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { Settings, Server, Bot, FileText, CreditCard } from 'lucide-react';
+
+export type SettingsSection = 'general' | 'mcp' | 'assistant' | 'llm-access' | 'billing';
+
+interface Props {
+  title: string;
+  active: SettingsSection;
+}
+
+const { title, active } = Astro.props;
+
+interface SectionItem {
+  id: SettingsSection;
+  label: string;
+  href: string;
+  icon: any;
+}
+
+interface SectionGroup {
+  label: string;
+  items: SectionItem[];
+}
+
+const groups: SectionGroup[] = [
+  {
+    label: 'Project Settings',
+    items: [
+      {
+        id: 'general',
+        label: 'General',
+        href: buildUrl('/settings/general'),
+        icon: Settings,
+      },
+    ],
+  },
+  {
+    label: 'AI Settings',
+    items: [
+      {
+        id: 'mcp',
+        label: 'MCP',
+        href: buildUrl('/settings/mcp'),
+        icon: Server,
+      },
+      {
+        id: 'assistant',
+        label: 'Agent',
+        href: buildUrl('/settings/assistant'),
+        icon: Bot,
+      },
+      {
+        id: 'llm-access',
+        label: 'LLM Access',
+        href: buildUrl('/settings/llm-access'),
+        icon: FileText,
+      },
+    ],
+  },
+  {
+    label: 'Workspace',
+    items: [
+      {
+        id: 'billing',
+        label: 'Billing',
+        href: buildUrl('/settings/billing'),
+        icon: CreditCard,
+      },
+    ],
+  },
+];
+---
+
+<VerticalSideBarLayout title={`${title} | Settings`} showNestedSideBar={true}>
+  <Fragment slot="sidebar-content">
+    <div class="settings-rail flex h-full flex-col bg-[rgb(var(--ec-rail-bg))]">
+      <nav class="flex flex-1 flex-col gap-4 overflow-y-auto px-3 pt-6 pb-4">
+        {
+          groups.map((group) => (
+            <div class="space-y-1">
+              <p class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-sidebar-text)/0.5)]">
+                {group.label}
+              </p>
+              <div class="flex flex-col gap-1">
+                {group.items.map((item) => {
+                  const isActive = item.id === active;
+                  return (
+                    <a
+                      href={item.href}
+                      aria-current={isActive ? 'page' : undefined}
+                      class:list={[
+                        'nav-secondary-item flex items-center gap-3 px-3 py-2.5 text-[13px] font-medium transition-colors duration-150',
+                        isActive
+                          ? 'font-semibold text-[rgb(var(--ec-page-text))]'
+                          : 'text-[rgb(var(--ec-sidebar-text))] hover:text-[rgb(var(--ec-page-text))]',
+                      ]}
+                    >
+                      <item.icon className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+                      <span class="nav-item-label">{item.label}</span>
+                    </a>
+                  );
+                })}
+              </div>
+            </div>
+          ))
+        }
+      </nav>
+    </div>
+  </Fragment>
+
+  <div class="settings-page w-full px-8 py-8">
+    <slot />
+  </div>
+</VerticalSideBarLayout>