feat(aurora): add serviceBanner slot

Author: taymoor89

.changeset/service-banner-slot.md

@@ -0,0 +1,5 @@
+---
+"@cobaltcore-dev/aurora": minor
+---
+
+Add `serviceBanner` slot — renders below the page title divider on service pages, receives `auroraContext.currentService`

packages/aurora/README.md

@@ -167,10 +167,11 @@ function MyFooter(_props: SlotProps) {
 | `login`                 | Replaces the default login form — use in OIDC environments                   | —                              | No                    |
 | `serviceBadge`          | Inline next to each service label in the side nav and project home cards     | `currentService` (service key) | No                    |
 | `servicePageActions`    | Beside the page title in the service page header                             | `currentService` (service key) | No                    |
+| `serviceBanner`         | Below the page title divider on every service page                           | `currentService` (service key) | No                    |
 | `projectsBanner`        | Below the "Projects" heading on the projects list page                       | —                              | No                    |
 | `projectOverviewBanner` | Below the project description on the project overview page (`/projects/:id`) | —                              | No                    |
 
-The `serviceBadge` and `servicePageActions` slots receive `auroraContext.currentService` — a string identifying which service is being rendered (e.g. `"images"`, `"ceph-containers"`). Return `null` from these slots to suppress rendering for specific services.
+The `serviceBadge`, `servicePageActions`, and `serviceBanner` slots receive `auroraContext.currentService` — a string identifying which service is being rendered (e.g. `"images"`, `"ceph-containers"`). Return `null` from these slots to suppress rendering for specific services.
 
 **Service key reference:** `"images"`, `"flavors"`, `"securitygroups"`, `"floatingips"`, `"containers"`, `"ceph-containers"`, `"pca"`
 

packages/aurora/src/client/AuroraApp.tsx

@@ -30,6 +30,8 @@ export type Slots = {
   projectsBanner?: FC<SlotProps>
   /** Rendered below the project description on the project overview page (/projects/$projectId). Renders outside shadow DOM. */
   projectOverviewBanner?: FC<SlotProps>
+  /** Rendered below the page title divider on every service page. Receives `auroraContext.currentService`. Renders outside shadow DOM. */
+  serviceBanner?: FC<SlotProps>
 }
 
 /**

packages/aurora/src/client/components/ContentHeader/ContentHeader.tsx

@@ -30,6 +30,10 @@ export function ContentHeader({ title, projectId, description, actions, badges }
     <Slot component={slots.servicePageActions} useShadowDOM={false} currentService={currentService} />
   ) : null
 
+  const serviceBanner = slots?.serviceBanner ? (
+    <Slot component={slots.serviceBanner} useShadowDOM={false} currentService={currentService} />
+  ) : null
+
   return (
     <header className="mb-8">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
@@ -46,6 +50,7 @@ export function ContentHeader({ title, projectId, description, actions, badges }
       </div>
       {description && <p className="text-sm font-normal">{description}</p>}
       <Divider className="mt-4" />
+      {serviceBanner}
       {(badges || actions) && (
         <div className="mt-3 flex items-start justify-between">
           <div className="flex items-center gap-2">{badges} </div>