feat: Proxy settings

src/client/components/AppInput.tsx

@@ -26,7 +26,7 @@ export default function AppInput() {
       <input
         type="url"
         name="url"
-        className="w-full text-sm p-1"
+        className="w-full text-sm p-1 focus-visible:outline-none"
         placeholder="Enter URL to Start"
         ref={inputRef}
         onKeyUp={handleEnter}

src/client/components/Content/Setting/GeneralSetting.tsx

@@ -1,7 +1,66 @@
-const GeneralSetting = () => {
+import type { IConfig } from '@/client/hooks/useDataStore';
+
+type Props = {
+  config: IConfig;
+  setConfig: React.Dispatch<React.SetStateAction<IConfig>>;
+};
+
+const GeneralSetting: React.FC<Props> = ({ config, setConfig }) => {
   return (
     <div className="w-full mt-2">
-      <div className="p-4 text-lg font-bold">General Setting</div>
+      <div className="p-4 text-lg font-bold">General Settings</div>
+
+      <div className="px-4 flex flex-col *:p-2">
+        <div className="font-bold before:content-['#'] before:pr-2">
+          Proxy Setting
+        </div>
+        <div>
+          <input
+            type="radio"
+            id="proxy-direct"
+            value={undefined}
+            checked={!config.proxy}
+            className="ml-4 mr-2 inline-block"
+            onClick={() => setConfig({ ...config, proxy: '' })}
+            readOnly
+          />
+          <label htmlFor="proxy-direct">Direct</label>
+        </div>
+
+        <div>
+          <input
+            type="radio"
+            id="proxy-system"
+            value="system"
+            checked={config.proxy === 'system'}
+            className="ml-4 mr-2 inline-block"
+            onClick={() => setConfig({ ...config, proxy: 'system' })}
+            readOnly
+          />
+          <label htmlFor="proxy-system">System proxy</label>
+        </div>
+
+        <div>
+          <input
+            type="radio"
+            id="proxy-custom"
+            value="custom"
+            checked={!!config.proxy && config.proxy !== 'system'}
+            className="ml-4 mr-2 inline-block"
+            onClick={() =>
+              setConfig({ ...config, proxy: 'socks5:127.0.0.1:1080' })
+            }
+            readOnly
+          />
+          <label htmlFor="proxy-custom">Custom</label>
+          <input
+            className="border border-solid ml-2 shadow-sm rounded w-64 focus-within:outline-blue-300"
+            value={config.proxy === 'system' ? '' : config.proxy}
+            onChange={(e) => setConfig({ ...config, proxy: e.target.value })}
+            spellCheck={false}
+          />
+        </div>
+      </div>
     </div>
   );
 };

src/client/components/Content/Setting/index.tsx

@@ -4,27 +4,46 @@ import Tabs, { ITabOption } from '@client/components/common/Tabs';
 import SettingButton from './SettingButton';
 import GeneralSetting from './GeneralSetting';
 import About from './About';
+import useDataStore from '@client/hooks/useDataStore';
 
 export default function Setting(): React.ReactNode {
   const [open, setOpen] = useState(false);
-  if (!open) return <SettingButton cb={() => setOpen(true)} />;
+
+  const config = useDataStore((state) => state.config);
+  const setConfig = useDataStore((state) => state.setConfig);
+  const [tmpConfig, setTmpConfig] = useState(config);
 
   const options: ITabOption[] = [
     {
       label: 'General',
-      render: <GeneralSetting />,
+      render: <GeneralSetting config={tmpConfig} setConfig={setTmpConfig} />,
     },
     {
       label: 'About',
       render: <About />,
     },
   ];
 
+  const handleAccept = () => {
+    console.log(config, tmpConfig);
+    setConfig(tmpConfig);
+    setOpen(false);
+  };
+
+  if (!open)
+    return (
+      <SettingButton
+        cb={() => {
+          setTmpConfig(config);
+          setOpen(true);
+        }}
+      />
+    );
   return (
     <div className="absolute inset-0 w-full h-full flex bg-white z-30">
       <Tabs options={options}></Tabs>
       <div className="flex justify-end absolute bottom-0 w-full gap-2 p-4 bg-white border-t shadow-md">
-        <Button cb={() => setOpen(false)} label="Accept" type="primary" />
+        <Button cb={handleAccept} label="Accept" type="primary" />
         <Button cb={() => setOpen(false)} label="Cancel" type="secondary" />
       </div>
     </div>

src/client/components/common/MenuContext.tsx

@@ -41,7 +41,7 @@ export default function MenuContext({ children, context }: Props) {
       {children}
       {showContext && (
         <div
-          className="absolute bg-white rounded-lg p-2 shadow-lg border-solid border z-50"
+          className="fixed bg-white rounded-lg p-2 shadow-lg border-solid border z-50"
           style={{ top: point.y, left: point.x }}
           ref={insideRef}
         >

src/client/global.css

@@ -9,7 +9,3 @@
 .no-drag {
   -webkit-app-region: no-drag;
 }
-
-input {
-  all: unset;
-}

src/client/hooks/useDataStore.ts

@@ -2,8 +2,8 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import type { IData } from '@client/types';
 
-type IConfig = {
-  proxy?: 'system' | string;
+export type IConfig = {
+  proxy: '' | 'system' | string;
 };
 
 interface State {
@@ -16,6 +16,7 @@ interface State {
   removeRecent: (value: IData) => void;
   removeFavorite: (value: IData) => void;
   config: IConfig;
+  setConfig: (value: IConfig) => void;
 }
 
 const useDataStore = create<State>()(
@@ -63,7 +64,7 @@ const useDataStore = create<State>()(
           }),
         }));
       },
-      config: {},
+      config: { proxy: '' },
       setConfig: (value: IConfig) => {
         set((_) => ({ config: value }));
       },
@@ -74,6 +75,7 @@ const useDataStore = create<State>()(
       partialize: (state) => ({
         recent: state.recent,
         favorite: state.favorite,
+        config: state.config,
       }),
     },
   ),