Add Mac client mode and simplify local proxy UI

src/web/App.jsx

@@ -6,6 +6,7 @@ import { Topbar } from './components/Topbar.jsx';
 import { Sidebar } from './components/Sidebar.jsx';
 import { StatusPane } from './components/StatusPane.jsx';
 import { OverviewPage } from './components/OverviewPage.jsx';
+import { ClientOverviewPage } from './components/ClientOverviewPage.jsx';
 import { ServersPage } from './components/ServersPage.jsx';
 import { RoutingPage } from './components/RoutingPage.jsx';
 import { LogsPage } from './components/LogsPage.jsx';
@@ -87,6 +88,12 @@ function App() {
     return () => clearInterval(timer);
   }, []);
 
+  useEffect(() => {
+    if (state?.mode === 'client' && page !== 'overview') {
+      navigate('overview');
+    }
+  }, [state?.mode, page]);
+
   useEffect(() => () => {
     if (rulesSaveTimerRef.current) clearTimeout(rulesSaveTimerRef.current);
     if (rollbackTimerRef.current) clearTimeout(rollbackTimerRef.current);
@@ -352,6 +359,7 @@ function App() {
     () => servers.find((s) => s.tag === state?.selectedTag) || null,
     [servers, state?.selectedTag],
   );
+  const isClientMode = state?.mode === 'client';
 
   const dirtyRules = rulesSaveStatus === 'pending' || rulesSaveStatus === 'saving';
   const dirtyDevices = Boolean(
@@ -380,24 +388,42 @@ function App() {
         onTryApply={rollback}
       />
 
-      <div className="app-body">
-        <Sidebar active={page} onChange={navigate} badges={sidebarBadges} />
+      <div className={`app-body${isClientMode ? ' client-mode' : ''}`}>
+        {!isClientMode && <Sidebar active={page} onChange={navigate} badges={sidebarBadges} mode={state?.mode} />}
 
         <main className="app-main">
-          {page === 'overview' && (
-            <OverviewPage
-              state={state}
-              status={status}
-              busy={busy}
-              onRestart={restartSingbox}
-              onStop={stopSingbox}
-              onShowConfig={() => setConfigOpen(true)}
-              onNav={navigate}
-              onBypassToggle={toggleBypass}
-              onFlushDirectCache={flushDirectCache}
-            />
+          {(page === 'overview' || isClientMode) && (
+            isClientMode ? (
+              <ClientOverviewPage
+                state={state}
+                status={status}
+                activeServer={activeServer}
+                busy={busy}
+                subscriptionUrl={subscriptionUrl}
+                setSubscriptionUrl={setSubscriptionUrl}
+                servers={servers}
+                pendingTag={pendingTag}
+                setPendingTag={setPendingTag}
+                onFetchSubscription={fetchSubscription}
+                onApply={applyServer}
+                onRestart={restartSingbox}
+                onStop={stopSingbox}
+              />
+            ) : (
+              <OverviewPage
+                state={state}
+                status={status}
+                busy={busy}
+                onRestart={restartSingbox}
+                onStop={stopSingbox}
+                onShowConfig={() => setConfigOpen(true)}
+                onNav={navigate}
+                onBypassToggle={toggleBypass}
+                onFlushDirectCache={flushDirectCache}
+              />
+            )
           )}
-          {page === 'servers' && (
+          {page === 'servers' && !isClientMode && (
             <ServersPage
               state={state}
               servers={servers}
@@ -413,7 +439,7 @@ function App() {
               pushToast={pushToast}
             />
           )}
-          {page === 'routing' && (
+          {page === 'routing' && !isClientMode && (
             <RoutingPage
               rules={customRules}
               saveStatus={rulesSaveStatus}
@@ -431,8 +457,8 @@ function App() {
               onRemoveDevice={removeDevice}
             />
           )}
-          {page === 'logs' && <LogsPage devices={devicesConfig.devices} />}
-          {page === 'settings' && (
+          {page === 'logs' && !isClientMode && <LogsPage devices={devicesConfig.devices} />}
+          {page === 'settings' && !isClientMode && (
             <SettingsPage
               state={state}
               subscriptionUrl={subscriptionUrl}
@@ -489,13 +515,15 @@ function App() {
           )}
         </main>
 
-        <StatusPane
-          state={state}
-          busy={busy}
-          onStop={stopSingbox}
-          onRestart={restartSingbox}
-          onShowConfig={() => setConfigOpen(true)}
-        />
+        {!isClientMode && (
+          <StatusPane
+            state={state}
+            busy={busy}
+            onStop={stopSingbox}
+            onRestart={restartSingbox}
+            onShowConfig={() => setConfigOpen(true)}
+          />
+        )}
       </div>
 
       <ConfigViewer open={configOpen} onClose={() => setConfigOpen(false)} />