From e82c4fdcb7bd678fbc1e418c8a66b26275ea7807 Mon Sep 17 00:00:00 2001
From: morgmart <98432065+morgmart@users.noreply.github.com>
Date: Mon, 4 May 2026 15:45:54 -0700
Subject: [PATCH] align extensions page styling (#9003)

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
---
 .../extensions/ui/ExtensionsSettings.tsx      | 95 ++++++++++---------
 .../src/shared/i18n/locales/en/settings.json  |  1 +
 .../src/shared/i18n/locales/es/settings.json  |  1 +
 3 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/ui/goose2/src/features/extensions/ui/ExtensionsSettings.tsx b/ui/goose2/src/features/extensions/ui/ExtensionsSettings.tsx
index ff6263841b..7c74a33628 100644
--- a/ui/goose2/src/features/extensions/ui/ExtensionsSettings.tsx
+++ b/ui/goose2/src/features/extensions/ui/ExtensionsSettings.tsx
@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
 import { IconChevronDown, IconPlus } from "@tabler/icons-react";
 import { Button } from "@/shared/ui/button";
 import { SearchBar } from "@/shared/ui/SearchBar";
-import { FilterRow } from "@/shared/ui/page-shell";
-import { SettingsPage } from "@/shared/ui/SettingsPage";
+import { FilterRow, PageHeader } from "@/shared/ui/page-shell";
 import { useExtensionsSettings } from "../hooks/useExtensionsSettings";
 import {
   EXTENSION_CATEGORIES,
@@ -113,50 +112,52 @@ export function ExtensionsSettings() {
   };
 
   return (
-    <SettingsPage
-      title={t("extensions.title")}
-      actions={
-        <Button
-          type="button"
-          variant="outline-flat"
-          size="xs"
-          onClick={handleAdd}
-        >
-          <IconPlus className="size-3.5" />
-          {t("extensions.addExtension")}
-        </Button>
-      }
-      controls={
-        <div className="space-y-3">
-          <SearchBar
-            value={searchTerm}
-            onChange={setSearchTerm}
-            placeholder={t("extensions.search")}
-            aria-label={t("extensions.search")}
-            size="compact"
-          />
-          <FilterRow>
-            <FilterButton
-              active={activeFilter === "all"}
-              onClick={() => setActiveFilter("all")}
-            >
-              {t("extensions.filters.all")}
-            </FilterButton>
-            {EXTENSION_CATEGORIES.map((category) =>
-              categoryCounts[category] > 0 ? (
-                <FilterButton
-                  key={category}
-                  active={activeFilter === category}
-                  onClick={() => setActiveFilter(category)}
-                >
-                  {t(`extensions.categories.${category}`)}
-                </FilterButton>
-              ) : null,
-            )}
-          </FilterRow>
-        </div>
-      }
-    >
+    <>
+      <PageHeader
+        title={t("extensions.title")}
+        description={t("extensions.description")}
+        titleClassName="font-normal text-foreground"
+        actions={
+          <Button
+            type="button"
+            variant="outline-flat"
+            size="xs"
+            onClick={handleAdd}
+          >
+            <IconPlus className="size-3.5" />
+            {t("extensions.addExtension")}
+          </Button>
+        }
+      />
+
+      <div className="space-y-3">
+        <SearchBar
+          value={searchTerm}
+          onChange={setSearchTerm}
+          placeholder={t("extensions.search")}
+          aria-label={t("extensions.search")}
+        />
+        <FilterRow>
+          <FilterButton
+            active={activeFilter === "all"}
+            onClick={() => setActiveFilter("all")}
+          >
+            {t("extensions.filters.all")}
+          </FilterButton>
+          {EXTENSION_CATEGORIES.map((category) =>
+            categoryCounts[category] > 0 ? (
+              <FilterButton
+                key={category}
+                active={activeFilter === category}
+                onClick={() => setActiveFilter(category)}
+              >
+                {t(`extensions.categories.${category}`)}
+              </FilterButton>
+            ) : null,
+          )}
+        </FilterRow>
+      </div>
+
       {isLoading ? (
         <div className="grid gap-x-12 sm:grid-cols-2">
           {[1, 2, 3, 4, 5, 6].map((i) => (
@@ -225,6 +226,6 @@ export function ExtensionsSettings() {
           onClose={handleModalClose}
         />
       )}
-    </SettingsPage>
+    </>
   );
 }
diff --git a/ui/goose2/src/shared/i18n/locales/en/settings.json b/ui/goose2/src/shared/i18n/locales/en/settings.json
index adb94f0d6a..86ae746d03 100644
--- a/ui/goose2/src/shared/i18n/locales/en/settings.json
+++ b/ui/goose2/src/shared/i18n/locales/en/settings.json
@@ -82,6 +82,7 @@
   },
   "extensions": {
     "title": "Extensions",
+    "description": "Connect Goose to apps, services, and built-in capabilities.",
     "search": "Search extensions...",
     "empty": "No extensions configured.",
     "noResults": "No extensions match your search.",
diff --git a/ui/goose2/src/shared/i18n/locales/es/settings.json b/ui/goose2/src/shared/i18n/locales/es/settings.json
index 44013a033c..a4df6ceca8 100644
--- a/ui/goose2/src/shared/i18n/locales/es/settings.json
+++ b/ui/goose2/src/shared/i18n/locales/es/settings.json
@@ -82,6 +82,7 @@
   },
   "extensions": {
     "title": "Extensiones",
+    "description": "Conecta Goose con apps, servicios y capacidades integradas.",
     "search": "Buscar extensiones...",
     "empty": "No hay extensiones configuradas.",
     "noResults": "Ninguna extensión coincide con tu búsqueda.",