Refactor backend list/switch page

package.json

@@ -29,7 +29,7 @@
   "license": "MIT",
   "dependencies": {
     "@fontsource/roboto-mono": "5.0.8",
-    "@reach/menu-button": "0.18.0",
+    "@radix-ui/react-menubar": "^1.0.4",
     "@reach/tooltip": "0.18.0",
     "@reach/visually-hidden": "0.18.0",
     "@tanstack/react-query": "4.35.3",
@@ -59,6 +59,7 @@
     "react-tiny-fab": "4.0.4",
     "react-window": "^1.8.9",
     "reselect": "4.1.8",
+    "sonner": "^1.0.3",
     "tslib": "2.6.2",
     "use-asset": "1.0.4",
     "workbox-core": "7.0.0",

src/api/fetch.ts

@@ -0,0 +1,6 @@
+export function req(url: string, init: RequestInit) {
+  if (import.meta.env.DEV) {
+    return import('./mock').then((mod) => mod.mock(url, init));
+  }
+  return fetch(url, init);
+}

src/api/mock.ts

@@ -0,0 +1,70 @@
+const MOCK_HANDLERS = [
+  {
+    key: 'GET/',
+    enabled: false,
+    handler: (_u: string, _i: RequestInit) => {
+      // throw new Error();
+      return deserializeError();
+      // return json({ hello: 'clash' });
+    },
+  },
+  {
+    key: 'GET/configs',
+    enabled: false,
+    handler: (_u: string, _i: RequestInit) =>
+      json({
+        port: 0,
+        'socks-port': 7891,
+        'redir-port': 0,
+        'tproxy-port': 0,
+        'mixed-port': 7890,
+        'allow-lan': true,
+        'bind-address': '*',
+        mode: 'rule',
+        'log-level': 'info',
+        authentication: [],
+        ipv6: false,
+      }),
+  },
+];
+
+export async function mock(url: string, init: RequestInit) {
+  const method = init.method || 'GET';
+  const pathname = new URL(url).pathname;
+  const key = `${method}${pathname}`;
+  const item = MOCK_HANDLERS.find((h) => {
+    if (h.enabled && h.key === key) return h;
+  });
+  if (item) {
+    console.warn('Using mocked API', key);
+    return (await item?.handler(url, init)) as Response;
+  }
+  return fetch(url, init);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function json<T = any>(data: T) {
+  await sleep(1);
+  return {
+    ok: true,
+    json: async () => {
+      await sleep(16);
+      return data;
+    },
+  };
+}
+
+async function deserializeError() {
+  await sleep(1);
+  return {
+    ok: true,
+    json: async () => {
+      await sleep(16);
+      throw new Error();
+    },
+  };
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

src/components/Config.tsx

@@ -3,7 +3,7 @@ import { useAtom } from 'jotai';
 import * as React from 'react';
 import { LogOut } from 'react-feather';
 import { useTranslation } from 'react-i18next';
-import { redirect } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 import { updateConfigs } from '$src/api/configs';
 import * as logsApi from '$src/api/logs';
@@ -65,6 +65,7 @@ type ConfigImplProps = {
 };
 
 function Config({ configs }: ConfigImplProps) {
+  const navigate = useNavigate();
   const [latencyTestUrl, setLatencyTestUrl] = useAtom(latencyTestUrlAtom);
   const [selectedChartStyleIndex, setSelectedChartStyleIndex] = useAtom(
     selectedChartStyleIndexAtom,
@@ -78,12 +79,6 @@ function Config({ configs }: ConfigImplProps) {
     }
     refConfigs.current = configs;
   }, [configs]);
-
-  const openAPIConfigModal = useCallback(() => {
-    redirect('/backend');
-    // dispatch(openModal('apiConfig'));
-  }, []);
-
   const setConfigState = useCallback(
     (name: keyof ClashGeneralConfig, val: ClashGeneralConfig[keyof ClashGeneralConfig]) => {
       setConfigStateInternal({ ...configState, [name]: val });
@@ -141,12 +136,6 @@ function Config({ configs }: ConfigImplProps) {
     (e) => handleChangeValue(e.target),
     [handleChangeValue],
   );
-  const selectChartStyleIndex = useCallback(
-    (idx: number) => {
-      setSelectedChartStyleIndex(idx);
-    },
-    [setSelectedChartStyleIndex],
-  );
 
   const handleInputOnBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(
     (e) => {
@@ -259,7 +248,7 @@ function Config({ configs }: ConfigImplProps) {
             OptionComponent={TrafficChartSample}
             optionPropsList={propsList}
             selectedIndex={selectedChartStyleIndex}
-            onChange={selectChartStyleIndex}
+            onChange={(v: string) => setSelectedChartStyleIndex(parseInt(v, 10))}
           />
         </div>
         <div>
@@ -271,7 +260,7 @@ function Config({ configs }: ConfigImplProps) {
           <Button
             start={<LogOut size={16} />}
             label={t('switch_backend')}
-            onClick={openAPIConfigModal}
+            onClick={() => navigate('/backend')}
           />
         </div>
         <div className={s0.item}>

src/components/Root.tsx

@@ -6,6 +6,7 @@ import { useAtom } from 'jotai';
 import * as React from 'react';
 import { RouteObject } from 'react-router';
 import { HashRouter as Router, useRoutes } from 'react-router-dom';
+import { Toaster } from 'sonner';
 import { About } from 'src/components/about/About';
 import Loading from 'src/components/Loading';
 import { Head } from 'src/components/shared/Head';
@@ -15,16 +16,14 @@ import { AppConfigSideEffect } from '$src/components/fn/AppConfigSideEffect';
 import { darkModePureBlackToggleAtom } from '$src/store/app';
 
 import { actions, initialState } from '../store';
-import APIConfig from './APIConfig';
-import APIDiscovery from './APIDiscovery';
+import { Backend } from './backend/Backend';
 import { MutableConnRefCtx } from './conns/ConnCtx';
 import ErrorBoundary from './ErrorBoundary';
 import Home from './Home';
 import Loading2 from './Loading2';
 import s0 from './Root.module.scss';
 import SideBar from './SideBar';
 import StateProvider from './StateProvider';
-import StyleGuide from './StyleGuide';
 
 const { lazy, Suspense } = React;
 
@@ -33,6 +32,7 @@ const Config = lazy(() => import('./Config'));
 const Logs = lazy(() => import('./Logs'));
 const Proxies = lazy(() => import('./proxies/Proxies'));
 const Rules = lazy(() => import('./Rules'));
+const StyleGuide = lazy(() => import('$src/components/style/StyleGuide'))
 
 const routes = [
   { path: '/', element: <Home /> },
@@ -59,7 +59,6 @@ function RouteInnerApp() {
 function SideBarApp() {
   return (
     <>
-      <APIDiscovery />
       <SideBar />
       <div className={s0.content}>
         <Suspense fallback={<Loading2 />}>
@@ -72,15 +71,20 @@ function SideBarApp() {
 
 function App() {
   return useRoutes([
-    { path: '/backend', element: <APIConfig /> },
+    { path: '/backend', element: <Backend /> },
     { path: '*', element: <SideBarApp /> },
   ]);
 }
 
 function AppShell({ children }: { children: React.ReactNode }) {
   const [pureBlackDark] = useAtom(darkModePureBlackToggleAtom);
   const clazz = cx(s0.app, { pureBlackDark });
-  return <div className={clazz}>{children}</div>;
+  return (
+    <>
+      <Toaster richColors />
+      <div className={clazz}>{children}</div>
+    </>
+  );
 }
 
 const Root = () => (

src/components/SideBar.tsx

@@ -5,8 +5,8 @@ import { Info } from 'react-feather';
 import { useTranslation } from 'react-i18next';
 import { FcAreaChart, FcDocument, FcGlobe, FcLink, FcRuler, FcSettings } from 'react-icons/fc';
 import { Link, useLocation } from 'react-router-dom';
-import { ThemeSwitcher } from 'src/components/shared/ThemeSwitcher';
 
+import { ThemeSwitcher } from './shared/ThemeSwitcher';
 import s from './SideBar.module.scss';
 
 const icons = {

src/components/SvgYacd.tsx

@@ -9,18 +9,20 @@ type Props = {
   animate?: boolean;
   c0?: string;
   c1?: string;
-  stroke?: string;
+  shapeStroke?: string;
   eye?: string;
+  eyeStroke?: string;
   mouth?: string;
 };
 
-function SvgYacd({
+export default function SvgYacd({
   width = 320,
   height = 320,
   animate = false,
   c0 = 'currentColor',
-  stroke = '#eee',
+  shapeStroke = '#eee',
   eye = '#eee',
+  eyeStroke = '#eee',
   mouth = '#eee',
 }: Props) {
   const faceClassName = cx({ [s.path]: animate });
@@ -30,14 +32,14 @@ function SvgYacd({
         {/* face */}
         <path
           d="M71.689 53.055c9.23-1.487 25.684 27.263 41.411 56.663 18.572-8.017 71.708-7.717 93.775 0 4.714-15.612 31.96-57.405 41.626-56.663 3.992.088 13.07 31.705 23.309 94.96 2.743 16.949 7.537 47.492 14.38 91.63-42.339 17.834-84.37 26.751-126.095 26.751-41.724 0-83.756-8.917-126.095-26.751C52.973 116.244 65.536 54.047 71.689 53.055z"
-          stroke={stroke}
+          stroke={shapeStroke}
           strokeWidth="4"
           strokeLinecap="round"
           fill={c0}
           className={faceClassName}
         />
-        <circle fill={eye} cx="216.5" cy="181.5" r="14.5" />
-        <circle fill={eye} cx="104.5" cy="181.5" r="14.5" />
+        <circle fill={eye} cx="216.5" cy="181.5" r="14.5" strokeWidth="4" stroke={eyeStroke} />
+        <circle fill={eye} cx="104.5" cy="181.5" r="14.5" strokeWidth="4" stroke={eyeStroke} />
         {/* mouth */}
         <g stroke={mouth} strokeLinecap="round" strokeWidth="4">
           <path d="M175.568 218.694c-2.494 1.582-5.534 2.207-8.563 1.508-3.029-.7-5.487-2.594-7.035-5.11M143.981 218.694c2.494 1.582 5.534 2.207 8.563 1.508 3.03-.7 5.488-2.594 7.036-5.11" />
@@ -46,5 +48,3 @@ function SvgYacd({
     </svg>
   );
 }
-
-export default SvgYacd;

src/components/APIConfig.module.scss → src/components/backend/APIConfig.module.scss

@@ -11,9 +11,10 @@
   align-items: center;
 
   .icon {
-    --stroke: #f3f3f3;
+    --stroke: var(--color-text-secondary);
+
     color: #20497e;
-    opacity: 0.7;
+    opacity: 0.4;
     transition: opacity 400ms;
     &:hover {
       opacity: 1;