refactor: flatten opal card layouts, add children to CardHeaderLayout (#9907)

web/lib/opal/src/layouts/cards/CardHeaderLayout.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { CardHeaderLayout } from "@opal/layouts";
+import { Card } from "@opal/layouts";
 import { Button } from "@opal/components";
 import {
   SvgArrowExchange,
@@ -18,14 +18,14 @@ const withTooltipProvider: Decorator = (Story) => (
 );
 
 const meta = {
-  title: "Layouts/CardHeaderLayout",
-  component: CardHeaderLayout,
+  title: "Layouts/Card.Header",
+  component: Card.Header,
   tags: ["autodocs"],
   decorators: [withTooltipProvider],
   parameters: {
     layout: "centered",
   },
-} satisfies Meta<typeof CardHeaderLayout>;
+} satisfies Meta<typeof Card.Header>;
 
 export default meta;
 
@@ -38,7 +38,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: () => (
     <div className="w-[28rem] border rounded-16">
-      <CardHeaderLayout
+      <Card.Header
         sizePreset="main-ui"
         variant="section"
         icon={SvgGlobe}
@@ -57,7 +57,7 @@ export const Default: Story = {
 export const WithBothSlots: Story = {
   render: () => (
     <div className="w-[28rem] border rounded-16">
-      <CardHeaderLayout
+      <Card.Header
         sizePreset="main-ui"
         variant="section"
         icon={SvgGlobe}
@@ -92,7 +92,7 @@ export const WithBothSlots: Story = {
 export const RightChildrenOnly: Story = {
   render: () => (
     <div className="w-[28rem] border rounded-16">
-      <CardHeaderLayout
+      <Card.Header
         sizePreset="main-ui"
         variant="section"
         icon={SvgGlobe}
@@ -111,7 +111,7 @@ export const RightChildrenOnly: Story = {
 export const NoRightChildren: Story = {
   render: () => (
     <div className="w-[28rem] border rounded-16">
-      <CardHeaderLayout
+      <Card.Header
         sizePreset="main-ui"
         variant="section"
         icon={SvgGlobe}
@@ -125,7 +125,7 @@ export const NoRightChildren: Story = {
 export const LongContent: Story = {
   render: () => (
     <div className="w-[28rem] border rounded-16">
-      <CardHeaderLayout
+      <Card.Header
         sizePreset="main-ui"
         variant="section"
         icon={SvgGlobe}

web/lib/opal/src/layouts/cards/README.md

@@ -0,0 +1,116 @@
+# Card
+
+**Import:** `import { Card } from "@opal/layouts";`
+
+A namespace of card layout primitives. Each sub-component handles a specific region of a card.
+
+## Card.Header
+
+A card header layout that pairs a [`Content`](../content/README.md) block with a right-side column and an optional full-width children slot.
+
+### Why Card.Header?
+
+[`ContentAction`](../content-action/README.md) provides a single `rightChildren` slot. Card headers typically need two distinct right-side regions — a primary action on top and secondary actions on the bottom. `Card.Header` provides this with `rightChildren` and `bottomRightChildren` slots, plus a `children` slot for full-width content below the header row (e.g., search bars, expandable tool lists).
+
+### Props
+
+Inherits **all** props from [`Content`](../content/README.md) (icon, title, description, sizePreset, variant, editable, onTitleChange, suffix, etc.) plus:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `rightChildren` | `ReactNode` | `undefined` | Content rendered to the right of the Content block (top of right column). |
+| `bottomRightChildren` | `ReactNode` | `undefined` | Content rendered below `rightChildren` in the same column. Laid out as `flex flex-row`. |
+| `children` | `ReactNode` | `undefined` | Content rendered below the full header row, spanning the entire width. |
+
+### Layout Structure
+
+```
++---------------------------------------------------------+
+| [Content (p-2, self-start)]    [rightChildren]          |
+|  icon + title + description    [bottomRightChildren]    |
++---------------------------------------------------------+
+| [children — full width]                                 |
++---------------------------------------------------------+
+```
+
+- Outer wrapper: `flex flex-col w-full`
+- Header row: `flex flex-row items-stretch w-full`
+- Content area: `flex-1 min-w-0 self-start p-2` — top-aligned with fixed padding
+- Right column: `flex flex-col items-end shrink-0` — no padding, no gap
+- `bottomRightChildren` wrapper: `flex flex-row` — lays children out horizontally
+- `children` wrapper: `w-full` — only rendered when children are provided
+
+### Usage
+
+#### Card with primary and secondary actions
+
+```tsx
+import { Card } from "@opal/layouts";
+import { Button } from "@opal/components";
+import { SvgGlobe, SvgSettings, SvgUnplug, SvgCheckSquare } from "@opal/icons";
+
+<Card.Header
+  icon={SvgGlobe}
+  title="Google Search"
+  description="Web search provider"
+  sizePreset="main-ui"
+  variant="section"
+  rightChildren={
+    <Button icon={SvgCheckSquare} variant="action" prominence="tertiary">
+      Current Default
+    </Button>
+  }
+  bottomRightChildren={
+    <>
+      <Button icon={SvgUnplug} size="sm" prominence="tertiary" tooltip="Disconnect" />
+      <Button icon={SvgSettings} size="sm" prominence="tertiary" tooltip="Edit" />
+    </>
+  }
+/>
+```
+
+#### Card with only a connect action
+
+```tsx
+<Card.Header
+  icon={SvgCloud}
+  title="OpenAI"
+  description="Not configured"
+  sizePreset="main-ui"
+  variant="section"
+  rightChildren={
+    <Button rightIcon={SvgArrowExchange} prominence="tertiary">
+      Connect
+    </Button>
+  }
+/>
+```
+
+#### Card with expandable children
+
+```tsx
+<Card.Header
+  icon={SvgServer}
+  title="MCP Server"
+  description="12 tools available"
+  sizePreset="main-ui"
+  variant="section"
+  rightChildren={<Button icon={SvgSettings} prominence="tertiary" />}
+>
+  <SearchBar placeholder="Search tools..." />
+</Card.Header>
+```
+
+#### No right children
+
+```tsx
+<Card.Header
+  icon={SvgInfo}
+  title="Section Header"
+  description="Description text"
+  sizePreset="main-content"
+  variant="section"
+/>
+```
+
+When both `rightChildren` and `bottomRightChildren` are omitted and no `children` are provided, the component renders only the padded `Content`.

web/lib/opal/src/layouts/cards/components.tsx

@@ -4,16 +4,23 @@ import { Content, type ContentProps } from "@opal/layouts/content/components";
 // Types
 // ---------------------------------------------------------------------------
 
-type CardHeaderLayoutProps = ContentProps & {
+type CardHeaderProps = ContentProps & {
   /** Content rendered to the right of the Content block. */
   rightChildren?: React.ReactNode;
 
   /** Content rendered below `rightChildren` in the same column. */
   bottomRightChildren?: React.ReactNode;
+
+  /**
+   * Content rendered below the header row, full-width.
+   * Use for expandable sections, search bars, or any content
+   * that should appear beneath the icon/title/actions row.
+   */
+  children?: React.ReactNode;
 };
 
 // ---------------------------------------------------------------------------
-// CardHeaderLayout
+// Card.Header
 // ---------------------------------------------------------------------------
 
 /**
@@ -24,9 +31,12 @@ type CardHeaderLayoutProps = ContentProps & {
  * `rightChildren` on top, `bottomRightChildren` below — with no
  * padding or gap between them.
  *
+ * The optional `children` slot renders below the full header row,
+ * spanning the entire width.
+ *
  * @example
  * ```tsx
- * <CardHeaderLayout
+ * <Card.Header
  *   icon={SvgGlobe}
  *   title="Google"
  *   description="Search engine"
@@ -42,32 +52,42 @@ type CardHeaderLayoutProps = ContentProps & {
  * />
  * ```
  */
-function CardHeaderLayout({
+function Header({
   rightChildren,
   bottomRightChildren,
+  children,
   ...contentProps
-}: CardHeaderLayoutProps) {
+}: CardHeaderProps) {
   const hasRight = rightChildren || bottomRightChildren;
 
   return (
-    <div className="flex flex-row items-stretch w-full">
-      <div className="flex-1 min-w-0 self-start p-2">
-        <Content {...contentProps} />
-      </div>
-      {hasRight && (
-        <div className="flex flex-col items-end shrink-0">
-          {rightChildren && <div className="flex-1">{rightChildren}</div>}
-          {bottomRightChildren && (
-            <div className="flex flex-row">{bottomRightChildren}</div>
-          )}
+    <div className="flex flex-col w-full">
+      <div className="flex flex-row items-stretch w-full">
+        <div className="flex-1 min-w-0 self-start p-2">
+          <Content {...contentProps} />
         </div>
-      )}
+        {hasRight && (
+          <div className="flex flex-col items-end shrink-0">
+            {rightChildren && <div className="flex-1">{rightChildren}</div>}
+            {bottomRightChildren && (
+              <div className="flex flex-row">{bottomRightChildren}</div>
+            )}
+          </div>
+        )}
+      </div>
+      {children && <div className="w-full">{children}</div>}
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Card namespace
+// ---------------------------------------------------------------------------
+
+const Card = { Header };
+
 // ---------------------------------------------------------------------------
 // Exports
 // ---------------------------------------------------------------------------
 
-export { CardHeaderLayout, type CardHeaderLayoutProps };
+export { Card, type CardHeaderProps };

web/lib/opal/src/layouts/cards/header-layout/README.md

@@ -1,94 +0,0 @@
-# CardHeaderLayout
-
-**Import:** `import { CardHeaderLayout, type CardHeaderLayoutProps } from "@opal/layouts";`
-
-A card header layout that pairs a [`Content`](../../content/README.md) block with a right-side column of vertically stacked children.
-
-## Why CardHeaderLayout?
-
-[`ContentAction`](../../content-action/README.md) provides a single `rightChildren` slot. Card headers typically need two distinct right-side regions — a primary action on top and secondary actions on the bottom. `CardHeaderLayout` provides this with `rightChildren` and `bottomRightChildren` slots, with no padding or gap between them so the caller has full control over spacing.
-
-## Props
-
-Inherits **all** props from [`Content`](../../content/README.md) (icon, title, description, sizePreset, variant, etc.) plus:
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `rightChildren` | `ReactNode` | `undefined` | Content rendered to the right of the Content block (top of right column). |
-| `bottomRightChildren` | `ReactNode` | `undefined` | Content rendered below `rightChildren` in the same column. Laid out as `flex flex-row`. |
-
-## Layout Structure
-
-```
-┌──────────────────────────────────────────────────────┐
-│ [Content (p-2, self-start)]  [rightChildren]         │
-│  icon + title + description  [bottomRightChildren]   │
-└──────────────────────────────────────────────────────┘
-```
-
-- Outer wrapper: `flex flex-row items-stretch w-full`
-- Content area: `flex-1 min-w-0 self-start p-2` — top-aligned with fixed padding
-- Right column: `flex flex-col items-end justify-between shrink-0` — no padding, no gap
-- `bottomRightChildren` wrapper: `flex flex-row` — lays children out horizontally
-
-The right column uses `justify-between` so when both slots are present, `rightChildren` sits at the top and `bottomRightChildren` at the bottom.
-
-## Usage
-
-### Card with primary and secondary actions
-
-```tsx
-import { CardHeaderLayout } from "@opal/layouts";
-import { Button } from "@opal/components";
-import { SvgGlobe, SvgSettings, SvgUnplug, SvgCheckSquare } from "@opal/icons";
-
-<CardHeaderLayout
-  icon={SvgGlobe}
-  title="Google Search"
-  description="Web search provider"
-  sizePreset="main-ui"
-  variant="section"
-  rightChildren={
-    <Button icon={SvgCheckSquare} variant="action" prominence="tertiary">
-      Current Default
-    </Button>
-  }
-  bottomRightChildren={
-    <>
-      <Button icon={SvgUnplug} size="sm" prominence="tertiary" tooltip="Disconnect" />
-      <Button icon={SvgSettings} size="sm" prominence="tertiary" tooltip="Edit" />
-    </>
-  }
-/>
-```
-
-### Card with only a connect action
-
-```tsx
-<CardHeaderLayout
-  icon={SvgCloud}
-  title="OpenAI"
-  description="Not configured"
-  sizePreset="main-ui"
-  variant="section"
-  rightChildren={
-    <Button rightIcon={SvgArrowExchange} prominence="tertiary">
-      Connect
-    </Button>
-  }
-/>
-```
-
-### No right children
-
-```tsx
-<CardHeaderLayout
-  icon={SvgInfo}
-  title="Section Header"
-  description="Description text"
-  sizePreset="main-content"
-  variant="section"
-/>
-```
-
-When both `rightChildren` and `bottomRightChildren` are omitted, the component renders only the padded `Content`.

web/lib/opal/src/layouts/index.ts

@@ -12,11 +12,8 @@ export {
   type ContentActionProps,
 } from "@opal/layouts/content-action/components";
 
-/* CardHeaderLayout */
-export {
-  CardHeaderLayout,
-  type CardHeaderLayoutProps,
-} from "@opal/layouts/cards/header-layout/components";
+/* Card */
+export { Card, type CardHeaderProps } from "@opal/layouts/cards/components";
 
 /* IllustrationContent */
 export {

web/src/refresh-pages/admin/CodeInterpreterPage/index.tsx

@@ -13,7 +13,7 @@ import {
 import { ADMIN_ROUTES } from "@/lib/admin-routes";
 import { Section } from "@/layouts/general-layouts";
 import { Button, SelectCard } from "@opal/components";
-import { CardHeaderLayout } from "@opal/layouts";
+import { Card } from "@opal/layouts";
 import { Disabled, Hoverable } from "@opal/core";
 import Text from "@/refresh-components/texts/Text";
 import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
@@ -113,7 +113,7 @@ export default function CodeInterpreterPage() {
         {isEnabled || isLoading ? (
           <Hoverable.Root group="code-interpreter/Card">
             <SelectCard state="filled" padding="sm" rounding="lg">
-              <CardHeaderLayout
+              <Card.Header
                 sizePreset="main-ui"
                 variant="section"
                 icon={SvgTerminal}
@@ -161,7 +161,7 @@ export default function CodeInterpreterPage() {
             rounding="lg"
             onClick={() => handleToggle(true)}
           >
-            <CardHeaderLayout
+            <Card.Header
               sizePreset="main-ui"
               variant="section"
               icon={SvgTerminal}

web/src/refresh-pages/admin/ImageGenerationPage/ImageGenerationContent.tsx

@@ -23,7 +23,7 @@ import Message from "@/refresh-components/messages/Message";
 import ConfirmationModalLayout from "@/refresh-components/layouts/ConfirmationModalLayout";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
 import { Button, SelectCard, Text } from "@opal/components";
-import { Content, CardHeaderLayout } from "@opal/layouts";
+import { Content, Card } from "@opal/layouts";
 import { Hoverable } from "@opal/core";
 import {
   SvgArrowExchange,
@@ -260,7 +260,7 @@ export default function ImageGenerationContent() {
                           : undefined
                     }
                   >
-                    <CardHeaderLayout
+                    <Card.Header
                       sizePreset="main-ui"
                       variant="section"
                       icon={() => (

web/src/refresh-pages/admin/LLMConfigurationPage.tsx

@@ -8,7 +8,7 @@ import {
   useWellKnownLLMProviders,
 } from "@/hooks/useLLMProviders";
 import { ThreeDotsLoader } from "@/components/Loading";
-import { Content, CardHeaderLayout } from "@opal/layouts";
+import { Content, Card } from "@opal/layouts";
 import { Button, SelectCard } from "@opal/components";
 import { Hoverable } from "@opal/core";
 import { SvgArrowExchange, SvgSettings, SvgTrash } from "@opal/icons";
@@ -24,7 +24,7 @@ import { refreshLlmProviderCaches } from "@/lib/llmConfig/cache";
 import { deleteLlmProvider, setDefaultLlmModel } from "@/lib/llmConfig/svc";
 import Text from "@/refresh-components/texts/Text";
 import { Horizontal as HorizontalInput } from "@/layouts/input-layouts";
-import Card from "@/refresh-components/cards/Card";
+import LegacyCard from "@/refresh-components/cards/Card";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
 import Message from "@/refresh-components/messages/Message";
 import ConfirmationModalLayout from "@/refresh-components/layouts/ConfirmationModalLayout";
@@ -217,7 +217,7 @@ function ExistingProviderCard({
           rounding="lg"
           onClick={() => setIsOpen(true)}
         >
-          <CardHeaderLayout
+          <Card.Header
             icon={getProviderIcon(provider.provider)}
             title={provider.name}
             description={getProviderDisplayName(provider.provider)}
@@ -292,7 +292,7 @@ function NewProviderCard({
       rounding="lg"
       onClick={() => setIsOpen(true)}
     >
-      <CardHeaderLayout
+      <Card.Header
         icon={getProviderIcon(provider.name)}
         title={getProviderProductName(provider.name)}
         description={getProviderDisplayName(provider.name)}
@@ -336,7 +336,7 @@ function NewCustomProviderCard({
       rounding="lg"
       onClick={() => setIsOpen(true)}
     >
-      <CardHeaderLayout
+      <Card.Header
         icon={getProviderIcon("custom")}
         title={getProviderProductName("custom")}
         description={getProviderDisplayName("custom")}
@@ -424,7 +424,7 @@ export default function LLMConfigurationPage() {
 
       <SettingsLayouts.Body>
         {hasProviders ? (
-          <Card>
+          <LegacyCard>
             <HorizontalInput
               title="Default Model"
               description="This model will be used by Onyx by default in your chats."
@@ -455,7 +455,7 @@ export default function LLMConfigurationPage() {
                 </InputSelect.Content>
               </InputSelect>
             </HorizontalInput>
-          </Card>
+          </LegacyCard>
         ) : (
           <Message
             info

web/src/refresh-pages/admin/WebSearchPage/index.tsx

@@ -6,7 +6,7 @@ import { InfoIcon } from "@/components/icons/icons";
 import Text from "@/refresh-components/texts/Text";
 import { Section } from "@/layouts/general-layouts";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
-import { Content, CardHeaderLayout } from "@opal/layouts";
+import { Content, Card } from "@opal/layouts";
 import useSWR from "swr";
 import { errorHandlingFetcher, FetchError } from "@/lib/fetcher";
 import { SWR_KEYS } from "@/lib/swr-keys";
@@ -275,7 +275,7 @@ function ProviderCard({
               : undefined
         }
       >
-        <CardHeaderLayout
+        <Card.Header
           sizePreset="main-ui"
           variant="section"
           icon={icon}

web/src/sections/admin/ProviderCard.tsx

@@ -2,7 +2,7 @@
 
 import type { IconFunctionComponent } from "@opal/types";
 import { Button, SelectCard } from "@opal/components";
-import { Content, CardHeaderLayout } from "@opal/layouts";
+import { Content, Card } from "@opal/layouts";
 import {
   SvgArrowExchange,
   SvgArrowRightCircle,
@@ -15,7 +15,7 @@ import {
  * ProviderCard — a stateful card for selecting / connecting / disconnecting
  * an external service provider (LLM, search engine, voice model, etc.).
  *
- * Built on opal `SelectCard` + `CardHeaderLayout`. Maps a three-state
+ * Built on opal `SelectCard` + `Card.Header`. Maps a three-state
  * status model to the `SelectCard` state system:
  *
  * | Status         | SelectCard state | Right action           |
@@ -92,7 +92,7 @@ export default function ProviderCard({
       aria-label={ariaLabel}
       onClick={isDisconnected && onConnect ? onConnect : undefined}
     >
-      <CardHeaderLayout
+      <Card.Header
         sizePreset="main-ui"
         variant="section"
         icon={icon}

web/src/sections/sidebar/AdminSidebar.tsx

@@ -328,8 +328,12 @@ function AdminSidebarInner({
       </SidebarLayouts.Body>
 
       <SidebarLayouts.Footer>
-        <Separator noPadding className="px-2" />
-        <Spacer rem={0.5} />
+        {!folded && (
+          <>
+            <Separator noPadding className="px-2" />
+            <Spacer rem={0.5} />
+          </>
+        )}
         <SidebarTab
           icon={SvgX}
           href="/app"
@@ -338,7 +342,7 @@ function AdminSidebarInner({
         >
           Exit Admin Panel
         </SidebarTab>
-        <AccountPopover />
+        <AccountPopover folded={folded} />
       </SidebarLayouts.Footer>
     </>
   );