From 62c0cd9a634f768a970afc66e15968f5f8821c5a Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sun, 29 Oct 2023 20:02:10 +0800
Subject: [PATCH] feat(proxy): add back the render proxies in two columns
 option, closes #360

---
 src/components/ProxiesSettingsModal.tsx | 15 +++++++++++++++
 src/components/ProxyPreviewBar.tsx      | 10 +++++-----
 src/pages/Proxies.tsx                   | 20 +++++++++++++++-----
 src/signals/config.ts                   |  6 ++++++
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/ProxiesSettingsModal.tsx b/src/components/ProxiesSettingsModal.tsx
index 75e091b..2d8873e 100644
--- a/src/components/ProxiesSettingsModal.tsx
+++ b/src/components/ProxiesSettingsModal.tsx
@@ -9,11 +9,13 @@ import {
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
+  renderProxiesInTwoColumns,
   setAutoCloseConns,
   setHideUnAvailableProxies,
   setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
+  setRenderProxiesInTwoColumns,
   setUrlForLatencyTest,
   setUrlIPv6SupportTest,
   urlForIPv6SupportTest,
@@ -113,6 +115,19 @@ export const ProxiesSettingsModal: Component<{
           </div>
         </div>
 
+        <div>
+          <ConfigTitle withDivider>{t('renderInTwoColumns')}</ConfigTitle>
+
+          <div class="flex w-full justify-center">
+            <input
+              class="toggle"
+              type="checkbox"
+              checked={renderProxiesInTwoColumns()}
+              onChange={(e) => setRenderProxiesInTwoColumns(e.target.checked)}
+            />
+          </div>
+        </div>
+
         <div>
           <ConfigTitle withDivider>{t('proxiesPreviewType')}</ConfigTitle>
 
diff --git a/src/components/ProxyPreviewBar.tsx b/src/components/ProxyPreviewBar.tsx
index ece2de2..5c9549c 100644
--- a/src/components/ProxyPreviewBar.tsx
+++ b/src/components/ProxyPreviewBar.tsx
@@ -42,27 +42,27 @@ export const ProxyPreviewBar = (props: {
 
   return (
     <div class="flex items-center gap-2 py-2">
-      <div class="flex flex-1 overflow-hidden rounded-2xl">
+      <div class="flex h-4 flex-1 items-center justify-center">
         <div
-          class="h-2 bg-success"
+          class="h-2 overflow-hidden rounded-2xl bg-success"
           style={{
             width: `${(good() * 100) / all()}%`, // cant use tw class, otherwise dynamic classname won't be generated
           }}
         />
         <div
-          class="h-2 bg-warning"
+          class="h-2 overflow-hidden rounded-2xl bg-warning"
           style={{
             width: `${(middle() * 100) / all()}%`,
           }}
         />
         <div
-          class="h-2 bg-error"
+          class="h-2 overflow-hidden rounded-2xl bg-error"
           style={{
             width: `${(slow() * 100) / all()}%`,
           }}
         />
         <div
-          class="h-2 bg-neutral"
+          class="h-2 overflow-hidden rounded-2xl bg-neutral"
           style={{
             width: `${(notConnected() * 100) / all()}%`,
           }}
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index f8a9aab..a246106 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -11,7 +11,6 @@ import {
   ProxiesSettingsModal,
   ProxyNodeCard,
   ProxyNodePreview,
-  RenderInTwoColumns,
   SubscriptionInfo,
 } from '~/components'
 import {
@@ -23,6 +22,7 @@ import {
   formatTimeFromNow,
   hideUnAvailableProxies,
   proxiesOrderingType,
+  renderProxiesInTwoColumns,
   useProxies,
 } from '~/signals'
 
@@ -143,7 +143,12 @@ export default () => {
 
       <div class="flex-1 overflow-y-auto">
         <Show when={activeTab() === ActiveTab.proxies}>
-          <RenderInTwoColumns>
+          <div
+            class={twMerge(
+              'grid grid-cols-1 place-items-start gap-2',
+              renderProxiesInTwoColumns() ? 'sm:grid-cols-2' : 'sm:grid-cols-1',
+            )}
+          >
             <For each={proxies()}>
               {(proxyGroup) => {
                 const sortedProxyNames = createMemo(() =>
@@ -222,11 +227,16 @@ export default () => {
                 )
               }}
             </For>
-          </RenderInTwoColumns>
+          </div>
         </Show>
 
         <Show when={activeTab() === ActiveTab.proxyProviders}>
-          <RenderInTwoColumns>
+          <div
+            class={twMerge(
+              'grid grid-cols-1 place-items-start gap-2',
+              renderProxiesInTwoColumns() ? 'sm:grid-cols-2' : 'sm:grid-cols-1',
+            )}
+          >
             <For each={proxyProviders()}>
               {(proxyProvider) => {
                 const sortedProxyNames = createMemo(() =>
@@ -318,7 +328,7 @@ export default () => {
                 )
               }}
             </For>
-          </RenderInTwoColumns>
+          </div>
         </Show>
       </div>
 
diff --git a/src/signals/config.ts b/src/signals/config.ts
index 1d4dd0a..bad4500 100644
--- a/src/signals/config.ts
+++ b/src/signals/config.ts
@@ -32,6 +32,12 @@ export const [hideUnAvailableProxies, setHideUnAvailableProxies] =
     storage: localStorage,
   })
 
+export const [renderProxiesInTwoColumns, setRenderProxiesInTwoColumns] =
+  makePersisted(createSignal(true), {
+    name: 'renderProxiesInTwoColumns',
+    storage: localStorage,
+  })
+
 export const [urlForLatencyTest, setUrlForLatencyTest] = makePersisted(
   createSignal('https://www.gstatic.com/generate_204'),
   { name: 'urlForLatencyTest', storage: localStorage },