move settings into app shell (#9047)

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
Signed-off-by: Douwe Osinga <douwe@squareup.com>
Co-authored-by: Douwe Osinga <douwe@squareup.com>

ui/goose2/src/shared/i18n/locales/en/settings.json

@@ -1,4 +1,5 @@
 {
+  "navigationLabel": "Settings navigation",
   "about": {
     "buildModes": {
       "development": "Development",

ui/goose2/src/shared/i18n/locales/en/sidebar.json

@@ -1,5 +1,6 @@
 {
   "actions": {
+    "backToMainNavigation": "Back",
     "collapse": "Collapse sidebar",
     "expand": "Expand sidebar",
     "newChat": "New chat",
@@ -14,6 +15,7 @@
     "agents": "Agents",
     "extensions": "Extensions",
     "home": "Home",
+    "main": "Main navigation",
     "sessionHistory": "Session history",
     "skills": "Skills"
   },

ui/goose2/src/shared/i18n/locales/es/settings.json

@@ -1,4 +1,5 @@
 {
+  "navigationLabel": "Navegación de configuración",
   "about": {
     "buildModes": {
       "development": "Desarrollo",

ui/goose2/src/shared/i18n/locales/es/sidebar.json

@@ -1,5 +1,6 @@
 {
   "actions": {
+    "backToMainNavigation": "Atrás",
     "collapse": "Contraer barra lateral",
     "expand": "Expandir barra lateral",
     "newChat": "Nuevo chat",
@@ -14,6 +15,7 @@
     "agents": "Agentes",
     "extensions": "Extensiones",
     "home": "Inicio",
+    "main": "Navegación principal",
     "sessionHistory": "Historial de sesiones",
     "skills": "Habilidades"
   },

ui/goose2/src/shared/ui/SettingsPage.tsx

@@ -23,7 +23,7 @@ export function SettingsPage({
   return (
     <div className={cn("min-h-full", className)}>
       <div className="sticky top-0 z-20 -mx-6 border-b bg-background px-6 py-4">
-        <div className="flex items-center justify-between gap-3 pr-12">
+        <div className="flex items-center justify-between gap-3">
           <div className="min-w-0 flex-1">
             <h3 className="max-w-prose truncate font-display text-sm font-semibold leading-5 tracking-tight">
               {title}
@@ -40,7 +40,7 @@ export function SettingsPage({
             </div>
           ) : null}
         </div>
-        {controls ? <div className="mt-3 pr-12">{controls}</div> : null}
+        {controls ? <div className="mt-3">{controls}</div> : null}
       </div>
       {children ? (
         <div className={cn("py-3", contentClassName)}>{children}</div>

ui/goose2/src/shared/ui/page-shell.tsx

@@ -6,6 +6,7 @@ interface ShellProps {
   children: ReactNode;
   className?: string;
   contentClassName?: string;
+  contentWidth?: "default" | "narrow";
 }
 
 interface PageHeaderProps {
@@ -27,13 +28,17 @@ export function PageShell({
   children,
   className,
   contentClassName,
+  contentWidth = "default",
 }: ShellProps) {
+  const widthClassName = contentWidth === "narrow" ? "max-w-3xl" : "max-w-5xl";
+
   return (
     <MainPanelLayout className={className}>
       <div className="min-h-0 flex-1 overflow-y-scroll [scrollbar-gutter:stable]">
         <div
           className={cn(
-            "mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 py-8 page-transition",
+            "mx-auto flex w-full flex-col gap-8 px-6 py-8 page-transition",
+            widthClassName,
             contentClassName,
           )}
         >
@@ -48,13 +53,17 @@ export function DetailPageShell({
   children,
   className,
   contentClassName,
+  contentWidth = "default",
 }: ShellProps) {
+  const widthClassName = contentWidth === "narrow" ? "max-w-3xl" : "max-w-5xl";
+
   return (
     <MainPanelLayout className={className}>
       <div className="min-h-0 flex-1 overflow-y-scroll [scrollbar-gutter:stable]">
         <div
           className={cn(
-            "mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 py-8 page-transition",
+            "mx-auto flex w-full flex-col gap-8 px-6 py-8 page-transition",
+            widthClassName,
             contentClassName,
           )}
         >