feat: config for icon height and margin-right (#1041)

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>
   )

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',
 }

src/i18n/zh.ts

@@ -115,4 +115,6 @@ export default {
   zh: '中文',
   port: '{{ name }} 端口',
   quickFilter: '快速过滤',
+  iconHeight: '图标高度',
+  iconMarginRight: '图标右边距',
 } satisfies Dict

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">

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 },
+)