align extensions page styling (#9003)

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>

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 { FilterRow, PageHeader } from "@/shared/ui/page-shell";
-import { SettingsPage } from "@/shared/ui/SettingsPage";
 import { useExtensionsSettings } from "../hooks/useExtensionsSettings";
 import {
   EXTENSION_CATEGORIES,
@@ -113,50 +112,52 @@ export function ExtensionsSettings() {
   };
 
   return (
-    <SettingsPage
+    <>
-      title={t("extensions.title")}
+      <PageHeader
-      actions={
+        title={t("extensions.title")}
-        <Button
+        description={t("extensions.description")}
-          type="button"
+        titleClassName="font-normal text-foreground"
-          variant="outline-flat"
+        actions={
-          size="xs"
+          <Button
-          onClick={handleAdd}
+            type="button"
-        >
+            variant="outline-flat"
-          <IconPlus className="size-3.5" />
+            size="xs"
-          {t("extensions.addExtension")}
+            onClick={handleAdd}
-        </Button>
+          >
-      }
+            <IconPlus className="size-3.5" />
-      controls={
+            {t("extensions.addExtension")}
-        <div className="space-y-3">
+          </Button>
-          <SearchBar
+        }
-            value={searchTerm}
+      />
-            onChange={setSearchTerm}
+
-            placeholder={t("extensions.search")}
+      <div className="space-y-3">
-            aria-label={t("extensions.search")}
+        <SearchBar
-            size="compact"
+          value={searchTerm}
-          />
+          onChange={setSearchTerm}
-          <FilterRow>
+          placeholder={t("extensions.search")}
-            <FilterButton
+          aria-label={t("extensions.search")}
-              active={activeFilter === "all"}
+        />
-              onClick={() => setActiveFilter("all")}
+        <FilterRow>
-            >
+          <FilterButton
-              {t("extensions.filters.all")}
+            active={activeFilter === "all"}
-            </FilterButton>
+            onClick={() => setActiveFilter("all")}
-            {EXTENSION_CATEGORIES.map((category) =>
+          >
-              categoryCounts[category] > 0 ? (
+            {t("extensions.filters.all")}
-                <FilterButton
+          </FilterButton>
-                  key={category}
+          {EXTENSION_CATEGORIES.map((category) =>
-                  active={activeFilter === category}
+            categoryCounts[category] > 0 ? (
-                  onClick={() => setActiveFilter(category)}
+              <FilterButton
-                >
+                key={category}
-                  {t(`extensions.categories.${category}`)}
+                active={activeFilter === category}
-                </FilterButton>
+                onClick={() => setActiveFilter(category)}
-              ) : null,
+              >
-            )}
+                {t(`extensions.categories.${category}`)}
-          </FilterRow>
+              </FilterButton>
-        </div>
+            ) : 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>
+    </>
   );
 }

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.",

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.",