feat(proxy): add back the render proxies in two columns option, closes #360

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>
 

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()}%`,
           }}

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>
 

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