From bf26a539bce4a995bf254f1653d98c3b5f1c0a22 Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+YetAnotherZephyruso@users.noreply.github.com>
Date: Sun, 29 Sep 2024 10:46:22 +0800
Subject: [PATCH] feat: config for icon height and margin-right (#1041)

---
 src/components/ProxiesSettingsModal.tsx | 24 ++++++++++++++++++++++++
 src/i18n/en.ts                          |  2 ++
 src/i18n/zh.ts                          |  2 ++
 src/pages/Proxies.tsx                   | 10 +++++++++-
 src/signals/config.ts                   | 10 ++++++++++
 5 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/ProxiesSettingsModal.tsx b/src/components/ProxiesSettingsModal.tsx
index 91388bce..6915b094 100644
--- a/src/components/ProxiesSettingsModal.tsx
+++ b/src/components/ProxiesSettingsModal.tsx
@@ -6,12 +6,16 @@ import { useI18n } from '~/i18n'
 import {
   autoCloseConns,
   hideUnAvailableProxies,
+  iconHeight,
+  iconMarginRight,
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
   renderProxiesInTwoColumns,
   setAutoCloseConns,
   setHideUnAvailableProxies,
+  setIconHeight,
+  setIconMarginRight,
   setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
@@ -143,6 +147,26 @@ export const ProxiesSettingsModal: Component<{
             </For>
           </select>
         </div>
+
+        <div>
+          <ConfigTitle withDivider>{t('iconHeight')}</ConfigTitle>
+
+          <input
+            type="number"
+            class="input input-bordered w-full"
+            value={iconHeight()}
+            onChange={(e) => setIconHeight(Number(e.target.value))}
+          />
+
+          <ConfigTitle withDivider>{t('iconMarginRight')}</ConfigTitle>
+
+          <input
+            type="number"
+            class="input input-bordered w-full"
+            value={iconMarginRight()}
+            onChange={(e) => setIconMarginRight(Number(e.target.value))}
+          />
+        </div>
       </div>
     </Modal>
   )
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 2ad29297..25ff3340 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -113,4 +113,6 @@ export default {
   zh: 'Chinese',
   port: '{{ name }} Port',
   quickFilter: 'Quick Filter',
+  iconHeight: 'Icon Height',
+  iconMarginRight: 'Icon Margin Right',
 }
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index d56150a7..d40bbff8 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -115,4 +115,6 @@ export default {
   zh: '中文',
   port: '{{ name }} 端口',
   quickFilter: '快速过滤',
+  iconHeight: '图标高度',
+  iconMarginRight: '图标右边距',
 } satisfies Dict
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 5179c32c..636eef03 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -23,6 +23,8 @@ import {
   endpoint,
   formatTimeFromNow,
   hideUnAvailableProxies,
+  iconHeight,
+  iconMarginRight,
   proxiesOrderingType,
   renderProxiesInTwoColumns,
   useConnections,
@@ -191,7 +193,13 @@ export default () => {
                     <div class="flex items-center justify-between pr-8">
                       <div class="flex items-center">
                         <Show when={proxyGroup.icon}>
-                          <img src={proxyGroup.icon} class="h-8" />
+                          <img
+                            src={proxyGroup.icon}
+                            style={{
+                              height: `${iconHeight()}px`,
+                              'margin-right': `${iconMarginRight()}px`,
+                            }}
+                          />
                         </Show>
                         <span>{proxyGroup.name}</span>
                         <div class="badge badge-sm ml-2">
diff --git a/src/signals/config.ts b/src/signals/config.ts
index 85ed6177..91135804 100644
--- a/src/signals/config.ts
+++ b/src/signals/config.ts
@@ -148,3 +148,13 @@ export const isLatencyTestByHttps = () =>
 
 export const latencyQualityMap = () =>
   isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP
+
+export const [iconHeight, setIconHeight] = makePersisted(createSignal(24), {
+  name: 'iconHeight',
+  storage: localStorage,
+})
+
+export const [iconMarginRight, setIconMarginRight] = makePersisted(
+  createSignal(8),
+  { name: 'iconMarginRight', storage: localStorage },
+)