From 2bd871e820922fcd7edeec15583ba21bd6e8bedf Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Tue, 3 Nov 2026 15:24:20 -0500
Subject: [PATCH] Keep in-page view switches in the page body on tab-group
 pages

Fleet, Config templates, Cloud provision, FTP and Status pages put their
SegControl in the top bar, which crowded the group tabs. Move it to the top
of the body (same pattern as Jobs) and keep only real actions in the bar.
---
 frontend/src/pages/AgentFleet.jsx             | 28 ++++++++++---------
 frontend/src/pages/CloudProvision.jsx         | 22 ++++++++-------
 frontend/src/pages/FTPServer.jsx              | 26 ++++++++---------
 frontend/src/pages/ServerTemplates.jsx        | 20 +++++++------
 frontend/src/pages/StatusPages.jsx            | 24 ++++++++--------
 .../src/styles/components/_design-system.scss | 16 +++++++++++
 6 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/AgentFleet.jsx b/frontend/src/pages/AgentFleet.jsx
index ac8a0869..57394581 100644
--- a/frontend/src/pages/AgentFleet.jsx
+++ b/frontend/src/pages/AgentFleet.jsx
@@ -107,19 +107,6 @@ const AgentFleet = () => {
     // re-registers on the values the node reads so spinner/counts stay in sync.
     useTopbarActions(() => (
         <>
-            <SegControl
-                aria-label={t('app.agentFleet.views', 'Fleet views')}
-                value={activeTab}
-                onChange={setActiveTab}
-                options={[
-                    { value: 'dashboard', icon: <Activity size={16} />, label: t('app.agentFleet.dashboard', 'Dashboard') },
-                    { value: 'versions', icon: <Package size={16} />, label: t('app.agentFleet.versions', 'Versions') },
-                    { value: 'rollouts', icon: <Zap size={16} />, label: t('app.agentFleet.rollouts', 'Rollouts') },
-                    { value: 'queue', icon: <Clock size={16} />, label: t('app.agentFleet.commandQueue', 'Command queue'), count: queuedCommands.length || undefined },
-                    { value: 'discovery', icon: <Search size={16} />, label: t('app.agentFleet.discovery', 'Discovery') },
-                    { value: 'approvals', icon: <Shield size={16} />, label: t('app.agentFleet.approvals', 'Approvals'), count: pendingServers.length || undefined },
-                ]}
-            />
             <Button size="sm" onClick={fetchData} disabled={loading}>
                 <RefreshCw size={18} className={loading ? 'fleet-refresh-spinner' : ''} />
                 {t('common.actions.refresh', 'Refresh')}
@@ -474,6 +461,21 @@ const AgentFleet = () => {
 
     return (
         <div className="sk-tabgroup__inner">
+            <div className="sk-viewswitch">
+                <SegControl
+                    aria-label={t('app.agentFleet.views', 'Fleet views')}
+                    value={activeTab}
+                    onChange={setActiveTab}
+                    options={[
+                        { value: 'dashboard', icon: <Activity size={16} />, label: t('app.agentFleet.dashboard', 'Dashboard') },
+                        { value: 'versions', icon: <Package size={16} />, label: t('app.agentFleet.versions', 'Versions') },
+                        { value: 'rollouts', icon: <Zap size={16} />, label: t('app.agentFleet.rollouts', 'Rollouts') },
+                        { value: 'queue', icon: <Clock size={16} />, label: t('app.agentFleet.commandQueue', 'Command queue'), count: queuedCommands.length || undefined },
+                        { value: 'discovery', icon: <Search size={16} />, label: t('app.agentFleet.discovery', 'Discovery') },
+                        { value: 'approvals', icon: <Shield size={16} />, label: t('app.agentFleet.approvals', 'Approvals'), count: pendingServers.length || undefined },
+                    ]}
+                />
+            </div>
             {loadError && !tabHasData ? (
                 <ErrorState
                     title={t('app.agentFleet.couldntLoadFleetData', "Couldn't load fleet data.")}
diff --git a/frontend/src/pages/CloudProvision.jsx b/frontend/src/pages/CloudProvision.jsx
index 1fc56304..9eaed093 100644
--- a/frontend/src/pages/CloudProvision.jsx
+++ b/frontend/src/pages/CloudProvision.jsx
@@ -58,16 +58,6 @@ const CloudProvision = () => {
     // Publish the admin actions to the shared tab-group top bar.
     useTopbarActions(() => (
         <>
-            <SegControl
-                aria-label={t('app.cloudProvision.views', 'Cloud views')}
-                value={view}
-                onChange={setView}
-                options={[
-                    { value: 'servers', label: t('common.labels.servers', 'Servers') },
-                    { value: 'providers', label: t('app.cloudProvision.providers', 'Providers') },
-                    { value: 'costs', label: t('app.cloudProvision.costs', 'Costs') },
-                ]}
-            />
             {user?.is_admin && (
                 <>
                     <Button size="sm" variant="outline" onClick={() => setShowCreateProvider(true)}>{t('app.cloudProvision.addProvider', 'Add provider')}</Button>
@@ -125,6 +115,18 @@ const CloudProvision = () => {
 
     return (
         <div className="sk-tabgroup__inner cloud-provision-page">
+            <div className="sk-viewswitch">
+                <SegControl
+                    aria-label={t('app.cloudProvision.views', 'Cloud views')}
+                    value={view}
+                    onChange={setView}
+                    options={[
+                        { value: 'servers', label: t('common.labels.servers', 'Servers') },
+                        { value: 'providers', label: t('app.cloudProvision.providers', 'Providers') },
+                        { value: 'costs', label: t('app.cloudProvision.costs', 'Costs') },
+                    ]}
+                />
+            </div>
             <Tabs value={view} onValueChange={setView}>
                 <TabsContent value="servers">
                     <div className="cloud-servers-grid">
diff --git a/frontend/src/pages/FTPServer.jsx b/frontend/src/pages/FTPServer.jsx
index 2d90c271..5a2d8b0c 100644
--- a/frontend/src/pages/FTPServer.jsx
+++ b/frontend/src/pages/FTPServer.jsx
@@ -506,19 +506,6 @@ function FTPServer() {
 
     useTopbarActions(() =>
         <>
-        {isInstalled && (
-            <SegControl
-                aria-label={t('app.fTPServer.views', 'FTP views')}
-                value={activeTab}
-                onChange={selectTab}
-                options={[
-                    { value: 'overview', label: t('common.labels.overview', 'Overview') },
-                    { value: 'users', label: t('app.fTPServer.users', 'Users') },
-                    { value: 'connections', label: t('app.fTPServer.connections', 'Connections') },
-                    { value: 'logs', label: t('common.labels.logs', 'Logs') },
-                ]}
-            />
-        )}
         {!isInstalled ? (
             <Button onClick={() => setShowInstallModal(true)}>
                 {t('app.fTPServer.installFtpServer', 'Install FTP server')}
@@ -620,6 +607,19 @@ function FTPServer() {
                         />
                     </KpiBand>
 
+                    <div className="sk-viewswitch">
+                    <SegControl
+                        aria-label={t('app.fTPServer.views', 'FTP views')}
+                        value={activeTab}
+                        onChange={selectTab}
+                        options={[
+                            { value: 'overview', label: t('common.labels.overview', 'Overview') },
+                            { value: 'users', label: t('app.fTPServer.users', 'Users') },
+                            { value: 'connections', label: t('app.fTPServer.connections', 'Connections') },
+                            { value: 'logs', label: t('common.labels.logs', 'Logs') },
+                        ]}
+                    />
+                    </div>
                     <Tabs value={activeTab} onValueChange={selectTab}>
                         <TabsContent value="overview">
                             <div className="overview-tab">
diff --git a/frontend/src/pages/ServerTemplates.jsx b/frontend/src/pages/ServerTemplates.jsx
index 2ed20889..ff9b8388 100644
--- a/frontend/src/pages/ServerTemplates.jsx
+++ b/frontend/src/pages/ServerTemplates.jsx
@@ -340,15 +340,6 @@ const ServerTemplates = () => {
     // on a fresh panel Templates is empty; the default follows the data.
     useTopbarActions(() => (
         <>
-            <SegControl
-                aria-label={t('app.serverTemplates.views', 'Template views')}
-                value={activeTab || 'library'}
-                onChange={setActiveTab}
-                options={[
-                    { value: 'library', label: t('app.serverTemplates.library', 'Library') },
-                    { value: 'templates', label: t('app.serverTemplates.templates', 'Templates'), count: templates.length || undefined },
-                ]}
-            />
             {user?.is_admin && (
                 <Button size="sm" onClick={() => setShowCreateModal(true)}>{t('app.serverTemplates.createTemplate', 'Create template')}</Button>
             )}
@@ -566,6 +557,17 @@ const ServerTemplates = () => {
 
     return (
         <div className="sk-tabgroup__inner server-templates-page">
+            <div className="sk-viewswitch">
+                <SegControl
+                    aria-label={t('app.serverTemplates.views', 'Template views')}
+                    value={activeTab || 'library'}
+                    onChange={setActiveTab}
+                    options={[
+                        { value: 'library', label: t('app.serverTemplates.library', 'Library') },
+                        { value: 'templates', label: t('app.serverTemplates.templates', 'Templates'), count: templates.length || undefined },
+                    ]}
+                />
+            </div>
             {topbarChrome}
             <Tabs value={activeTab || 'library'} onValueChange={setActiveTab}>
                 <TabsContent value="templates">
diff --git a/frontend/src/pages/StatusPages.jsx b/frontend/src/pages/StatusPages.jsx
index b18c4f01..81159b51 100644
--- a/frontend/src/pages/StatusPages.jsx
+++ b/frontend/src/pages/StatusPages.jsx
@@ -332,18 +332,6 @@ const StatusPages = () => {
     useTopbarActions(() =>
         (
             <>
-                {selectedPage && (
-                    <SegControl
-                        aria-label={t('app.statusPages.views', 'Status page views')}
-                        value={detailTab}
-                        onChange={setDetailTab}
-                        options={[
-                            { value: 'components', label: t('app.statusPages.components', 'Components') },
-                            { value: 'incidents', label: t('app.statusPages.incidents', 'Incidents') },
-                            { value: 'settings', label: t('app.statusPages.page', 'Page') },
-                        ]}
-                    />
-                )}
                 <Button size="sm" variant="outline" onClick={loadPages}>
                     <RefreshCw size={16} />
                     {t('common.actions.refresh', 'Refresh')}
@@ -436,6 +424,18 @@ const StatusPages = () => {
                             </div>
                         </div>
 
+                        <div className="sk-viewswitch">
+                            <SegControl
+                                aria-label={t('app.statusPages.views', 'Status page views')}
+                                value={detailTab}
+                                onChange={setDetailTab}
+                                options={[
+                                    { value: 'components', label: t('app.statusPages.components', 'Components') },
+                                    { value: 'incidents', label: t('app.statusPages.incidents', 'Incidents') },
+                                    { value: 'settings', label: t('app.statusPages.page', 'Page') },
+                                ]}
+                            />
+                        </div>
                         <Tabs value={detailTab} onValueChange={setDetailTab}>
                             <TabsContent value="components">
                                 <div className="status-actions-bar">
diff --git a/frontend/src/styles/components/_design-system.scss b/frontend/src/styles/components/_design-system.scss
index 24431b3d..2a836513 100644
--- a/frontend/src/styles/components/_design-system.scss
+++ b/frontend/src/styles/components/_design-system.scss
@@ -2037,3 +2037,19 @@ $sk-tones: ('accent', 'green', 'cyan', 'amber', 'red', 'violet');
         }
     }
 }
+
+// In-page view switch for a tab-group child ("Dashboard / Versions / …" on one
+// page): the group's bar owns the tab row, so the page's own sub-views are a
+// SegControl at the top of the body — the same pattern Jobs uses. Scrolls
+// sideways rather than wrapping when the views don't fit a phone.
+.sk-viewswitch {
+    display: flex;
+    margin-bottom: $space-4;
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar { display: none; }
+
+    .sk-seg { flex-shrink: 0; }
+}