From c53d71fc286e204ba3748b6578e112240fc1410f Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sun, 5 Jul 2026 23:44:54 +0800
Subject: [PATCH] feat(settings): move device management into settings

---
 .../src/components/AppAuthenticatedShell.tsx  |  8 +-
 webapp/src/components/AppMainRoutes.tsx       | 78 +++++++++++--------
 webapp/src/styles.css                         | 42 ++++++++++
 3 files changed, 91 insertions(+), 37 deletions(-)

diff --git a/webapp/src/components/AppAuthenticatedShell.tsx b/webapp/src/components/AppAuthenticatedShell.tsx
index 69fe065..67352b4 100644
--- a/webapp/src/components/AppAuthenticatedShell.tsx
+++ b/webapp/src/components/AppAuthenticatedShell.tsx
@@ -1,4 +1,4 @@
-import { ArrowUpDown, Check, ChevronDown, Clock3, Cloud, FileClock, Folder as FolderIcon, Globe2, KeyRound, Lock, LogOut, MonitorSmartphone, Send as SendIcon, Settings as SettingsIcon, ShieldUser, SlidersHorizontal, Users } from 'lucide-preact';
+import { ArrowUpDown, Check, ChevronDown, Clock3, Cloud, FileClock, Folder as FolderIcon, KeyRound, Lock, LogOut, MonitorSmartphone, Send as SendIcon, Settings as SettingsIcon, ShieldUser, SlidersHorizontal, Users } from 'lucide-preact';
 import type { ComponentChildren } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Link } from 'wouter';
@@ -57,7 +57,8 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
   const isAdmin = isAdminProfile(props.profile);
   const vaultActive = props.location === '/vault' || props.location === '/vault/totp';
   const deviceManagementActive = props.location === DEVICE_MANAGEMENT_ROUTE || props.location === LEGACY_DEVICE_MANAGEMENT_ROUTE;
-  const settingsActive = props.location === props.settingsAccountRoute || props.location === '/settings/domain-rules' || deviceManagementActive;
+  const settingsActive = props.location === '/settings' || props.location === props.settingsAccountRoute || props.location === '/settings/domain-rules' || deviceManagementActive;
+  const flatSettingsActive = settingsActive && !deviceManagementActive;
   const dataActive = props.location === '/backup' || props.isImportRoute;
   const managementActive = props.location === '/admin' || props.location === '/logs';
   const [navLayoutMode, setNavLayoutMode] = useState<NavLayoutMode>(readNavLayoutMode);
@@ -175,8 +176,7 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
       {renderSideLink('/vault', props.location === '/vault', <KeyRound size={16} />, t('nav_vault_items'))}
       {renderSideLink('/vault/totp', props.location === '/vault/totp', <Clock3 size={16} />, t('txt_verification_code'))}
       {renderSideLink('/sends', props.location === '/sends', <SendIcon size={16} />, t('nav_sends'))}
-      {renderSideLink(props.settingsAccountRoute, props.location === props.settingsAccountRoute, <SettingsIcon size={16} />, t('nav_account_settings'))}
-      {renderSideLink('/settings/domain-rules', props.location === '/settings/domain-rules', <Globe2 size={16} />, t('nav_domain_rules'))}
+      {renderSideLink('/settings', flatSettingsActive, <SettingsIcon size={16} />, t('txt_settings'))}
       {renderSideLink(DEVICE_MANAGEMENT_ROUTE, deviceManagementActive, <MonitorSmartphone size={16} />, t('nav_device_management'))}
       {isAdmin && renderSideLink('/backup', props.location === '/backup', <Cloud size={16} />, t('nav_backup_strategy'))}
       {renderSideLink(props.importRoute, props.isImportRoute, <ArrowUpDown size={16} />, t('nav_import_export'))}
diff --git a/webapp/src/components/AppMainRoutes.tsx b/webapp/src/components/AppMainRoutes.tsx
index 8fed21d..a2ce516 100644
--- a/webapp/src/components/AppMainRoutes.tsx
+++ b/webapp/src/components/AppMainRoutes.tsx
@@ -320,43 +320,55 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
       </Route>
       <Route path="/settings">
         {props.profile ? (
-          <section className="card mobile-settings-card">
-            <div className="mobile-settings-links">
-              <Link href={props.settingsAccountRoute} className="mobile-settings-link">
-                <SettingsIcon size={18} />
-                <span>{t('nav_account_settings')}</span>
-              </Link>
-              <Link href="/settings/security/device-management" className="mobile-settings-link">
-                <Shield size={18} />
-                <span>{t('nav_device_management')}</span>
-              </Link>
-              <Link href="/settings/domain-rules" className="mobile-settings-link">
-                <Globe2 size={18} />
-                <span>{t('nav_domain_rules')}</span>
-              </Link>
-              <Link href={props.importRoute} className="mobile-settings-link">
-                <ArrowUpDown size={18} />
-                <span>{t('nav_import_export')}</span>
-              </Link>
-              {isAdmin && (
-                <Link href="/admin" className="mobile-settings-link">
-                  <ShieldUser size={18} />
-                  <span>{t('nav_admin_panel')}</span>
+          <section className="card mobile-settings-card settings-home-card">
+            <div className="settings-home-section">
+              <h3>{t('txt_settings')}</h3>
+              <div className="mobile-settings-links">
+                <Link href={props.settingsAccountRoute} className="mobile-settings-link">
+                  <SettingsIcon size={18} />
+                  <span>{t('nav_account_settings')}</span>
                 </Link>
-              )}
-              {isAdmin && (
-                <Link href="/logs" className="mobile-settings-link">
-                  <FileClock size={18} />
-                  <span>{t('nav_log_center')}</span>
+                <Link href="/settings/security/device-management" className="mobile-settings-link">
+                  <Shield size={18} />
+                  <span>{t('nav_device_management')}</span>
                 </Link>
-              )}
-              {isAdmin && (
-                <Link href="/backup" className="mobile-settings-link">
-                  <Cloud size={18} />
-                  <span>{t('nav_backup_strategy')}</span>
+                <Link href="/settings/domain-rules" className="mobile-settings-link">
+                  <Globe2 size={18} />
+                  <span>{t('nav_domain_rules')}</span>
                 </Link>
-              )}
+              </div>
             </div>
+            <div className="settings-home-section">
+              <h3>{t('nav_group_data_backup')}</h3>
+              <div className="mobile-settings-links">
+                <Link href={props.importRoute} className="mobile-settings-link">
+                  <ArrowUpDown size={18} />
+                  <span>{t('nav_import_export')}</span>
+                </Link>
+                {isAdmin && (
+                  <Link href="/backup" className="mobile-settings-link">
+                    <Cloud size={18} />
+                    <span>{t('nav_backup_strategy')}</span>
+                  </Link>
+                )}
+              </div>
+            </div>
+            {isAdmin && (
+              <div className="settings-home-section">
+                <h3>{t('nav_group_management')}</h3>
+                <div className="mobile-settings-links">
+                  <Link href="/admin" className="mobile-settings-link">
+                    <ShieldUser size={18} />
+                    <span>{t('nav_admin_panel')}</span>
+                  </Link>
+                  <Link href="/logs" className="mobile-settings-link">
+                    <FileClock size={18} />
+                    <span>{t('nav_log_center')}</span>
+                  </Link>
+                </div>
+              </div>
+            )}
+            <div className="settings-home-spacer" />
             <button type="button" className="btn btn-secondary mobile-settings-logout" onClick={props.onLogout}>
               <LogOut size={14} className="btn-icon" />
               {t('txt_sign_out')}
diff --git a/webapp/src/styles.css b/webapp/src/styles.css
index db743e3..3894de2 100644
--- a/webapp/src/styles.css
+++ b/webapp/src/styles.css
@@ -424,6 +424,48 @@ h4 {
   padding: 24px;
 }
 
+.settings-home-card {
+  min-height: min(640px, calc(100dvh - 180px));
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.settings-home-section {
+  display: grid;
+  gap: 10px;
+}
+
+.settings-home-section h3 {
+  margin: 0;
+  color: var(--text);
+  font-size: var(--font-md);
+}
+
+.settings-home-spacer {
+  flex: 1;
+  min-height: 4px;
+}
+
+.mobile-settings-links {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.mobile-settings-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 46px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 700;
+}
+
 .auth-card h1,
 .standalone-title {
   font-size: 26px;