feat: drop ForTwoColumns renderer

src/components/Collapse.tsx

@@ -1,6 +1,5 @@
-import { JSX, ParentComponent, Show, createMemo } from 'solid-js'
+import { JSX, ParentComponent, Show } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { proxiesRenderInTwoColumns } from '~/signals'
 
 type Props = {
   title: JSX.Element
@@ -26,19 +25,11 @@ export const Collapse: ParentComponent<Props> = (props) => {
     return props.isOpen ? openedClassName : closedClassName
   }
 
-  const mediaQueryClassName = createMemo(() => {
-    if (proxiesRenderInTwoColumns()) {
-      return 'lg:grid-cols-3 xl:grid-cols-4'
-    } else {
-      return 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7'
-    }
-  })
-
   return (
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow mb-2 select-none border-secondary bg-base-200',
+        'collapse collapse-arrow select-none border-secondary bg-base-200',
       )}
     >
       <div
@@ -50,7 +41,6 @@ export const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          mediaQueryClassName(),
           'collapse-content grid grid-cols-2 gap-2 transition-opacity duration-1000',
         )}
       >

src/components/ForTwoColumns.tsx

@@ -1,25 +0,0 @@
-import { createWindowSize } from '@solid-primitives/resize-observer'
-import { JSX, Show, createMemo } from 'solid-js'
-import { proxiesRenderInTwoColumns } from '~/signals'
-
-export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
-  const windowSize = createWindowSize()
-  const isShowTwoColumns = createMemo(
-    () => windowSize.width >= 640 && proxiesRenderInTwoColumns(),
-  ) // 640 is sm size in daisyui
-  const leftColumns = createMemo(() =>
-    props.subChild.filter((_, index) => index % 2 === 0 || !isShowTwoColumns()),
-  )
-  const rightColumns = createMemo(() =>
-    props.subChild.filter((_, index) => index % 2 === 1),
-  )
-
-  return (
-    <div class="flex">
-      <div class="flex flex-1 flex-col">{leftColumns()}</div>
-      <Show when={isShowTwoColumns()}>
-        <div class="ml-2 flex flex-1 flex-col">{rightColumns()}</div>
-      </Show>
-    </div>
-  )
-}

src/components/ProxiesSettingsModal.tsx

@@ -8,13 +8,11 @@ import {
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
-  proxiesRenderInTwoColumns,
   setAutoCloseConns,
   setHideUnAvailableProxies,
   setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
-  setProxiesRenderInTwoColumns,
   setUrlForLatencyTest,
   urlForLatencyTest,
 } from '~/signals'
@@ -114,19 +112,6 @@ export const ProxiesSettingsModal = () => {
             </For>
           </select>
         </div>
-
-        <div>
-          <ConfigTitle withDivider>{t('renderInTwoColumns')}</ConfigTitle>
-
-          <div class="flex w-full justify-center">
-            <input
-              type="checkbox"
-              class="toggle"
-              checked={proxiesRenderInTwoColumns()}
-              onChange={(e) => setProxiesRenderInTwoColumns(e.target.checked)}
-            />
-          </div>
-        </div>
       </div>
 
       <form method="dialog" class="modal-backdrop">

src/components/RulesSettingsModal.tsx

@@ -1,34 +0,0 @@
-import { useI18n } from '@solid-primitives/i18n'
-import { ConfigTitle } from '~/components'
-import { MODAL } from '~/constants'
-import { rulesRenderInTwoColumns, setRulesRenderInTwoColumns } from '~/signals'
-
-export const RulesSettingsModal = () => {
-  const [t] = useI18n()
-
-  return (
-    <dialog
-      id={MODAL.RULES_SETTINGS}
-      class="modal modal-bottom sm:modal-middle"
-    >
-      <div class="modal-box flex flex-col gap-4">
-        <div>
-          <ConfigTitle withDivider>{t('renderInTwoColumns')}</ConfigTitle>
-
-          <div class="flex w-full justify-center">
-            <input
-              type="checkbox"
-              class="toggle"
-              checked={rulesRenderInTwoColumns()}
-              onChange={(e) => setRulesRenderInTwoColumns(e.target.checked)}
-            />
-          </div>
-        </div>
-      </div>
-
-      <form method="dialog" class="modal-backdrop">
-        <button />
-      </form>
-    </dialog>
-  )
-}

src/components/index.ts

@@ -3,7 +3,6 @@ export * from './Collapse'
 export * from './ConfigTitle'
 export * from './ConnectionsSettingsModal'
 export * from './ConnectionsTableDetailsModal'
-export * from './ForTwoColumns'
 export * from './Header'
 export * from './Latency'
 export * from './LogoText'
@@ -14,5 +13,4 @@ export * from './ProxyNodeCard'
 export * from './ProxyNodePreview'
 export * from './ProxyPreviewBar'
 export * from './ProxyPreviewDots'
-export * from './RulesSettingsModal'
 export * from './SubscriptionInfo'

src/pages/Proxies.tsx

@@ -9,7 +9,6 @@ import { twMerge } from 'tailwind-merge'
 import {
   Button,
   Collapse,
-  ForTwoColumns,
   ProxiesSettingsModal,
   ProxyCardGroups,
   ProxyNodePreview,
@@ -152,8 +151,9 @@ export default () => {
 
       <div class="flex-1 overflow-y-auto">
         <Show when={activeTab() === ActiveTab.proxies}>
-          <ForTwoColumns
+          <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
-            subChild={proxies().map((proxy) => {
+            <For each={proxies()}>
+              {(proxy) => {
                 const sortedProxyNames = filterProxiesByAvailability(
                   sortProxiesByOrderingType(
                     proxy.all ?? [],
@@ -215,13 +215,15 @@ export default () => {
                     onCollapse={(val) => setCollapsedMap(proxy.name, val)}
                   />
                 )
-            })}
+              }}
-          />
+            </For>
+          </div>
         </Show>
 
         <Show when={activeTab() === ActiveTab.proxyProviders}>
-          <ForTwoColumns
+          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-            subChild={proxyProviders().map((proxyProvider) => {
+            <For each={proxyProviders()}>
+              {(proxyProvider) => {
                 const sortedProxyNames = filterProxiesByAvailability(
                   sortProxiesByOrderingType(
                     proxyProvider.proxies.map((i) => i.name) ?? [],
@@ -295,11 +297,14 @@ export default () => {
                     isOpen={collapsedMap()[proxyProvider.name]}
                     title={title}
                     content={<ProxyCardGroups proxyNames={sortedProxyNames} />}
-                  onCollapse={(val) => setCollapsedMap(proxyProvider.name, val)}
+                    onCollapse={(val) =>
+                      setCollapsedMap(proxyProvider.name, val)
+                    }
                   />
                 )
-            })}
+              }}
-          />
+            </For>
+          </div>
         </Show>
       </div>
 

src/pages/Rules.tsx

@@ -1,11 +1,10 @@
 import { useI18n } from '@solid-primitives/i18n'
-import { IconReload, IconSettings } from '@tabler/icons-solidjs'
+import { IconReload } from '@tabler/icons-solidjs'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { Button, RulesSettingsModal } from '~/components'
+import { Button } from '~/components'
-import { MODAL } from '~/constants'
 import { formatTimeFromNow, useStringBooleanMap } from '~/helpers'
-import { rulesRenderInTwoColumns, useRules } from '~/signals'
+import { useRules } from '~/signals'
 
 enum ActiveTab {
   ruleProviders = 'ruleProviders',
@@ -60,7 +59,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <div class="flex items-center gap-2">
-        <div class="tabs-boxed tabs gap-2">
+        <div class="tabs tabs-boxed gap-2">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -90,31 +89,11 @@ export default () => {
             />
           </Button>
         </Show>
-
-        <div class="ml-auto">
-          <Button
-            class="btn-circle btn-sm sm:btn-md"
-            onClick={() => {
-              const modal = document.querySelector(
-                `#${MODAL.RULES_SETTINGS}`,
-              ) as HTMLDialogElement | null
-
-              modal?.showModal()
-            }}
-          >
-            <IconSettings />
-          </Button>
-        </div>
       </div>
 
       <div class="flex-1 overflow-y-auto">
         <Show when={activeTab() === ActiveTab.rules}>
-          <div
+          <div class="grid gap-2">
-            class="grid gap-2"
-            classList={{
-              'grid-cols-2': rulesRenderInTwoColumns(),
-            }}
-          >
             <For each={rules()}>
               {(rule) => (
                 <div class="card card-bordered card-compact bg-base-200 p-4">
@@ -136,12 +115,7 @@ export default () => {
         </Show>
 
         <Show when={activeTab() === ActiveTab.ruleProviders}>
-          <div
+          <div class="grid gap-2">
-            class="grid gap-2"
-            classList={{
-              'grid-cols-2': rulesRenderInTwoColumns(),
-            }}
-          >
             <For each={ruleProviders()}>
               {(ruleProvider) => (
                 <div class="card card-bordered card-compact bg-base-200 p-4">
@@ -173,8 +147,6 @@ export default () => {
           </div>
         </Show>
       </div>
-
-      <RulesSettingsModal />
     </div>
   )
 }

src/signals/config.ts

@@ -51,16 +51,6 @@ export const [favNightTheme, setFavNightTheme] = makePersisted(
   createSignal('night'),
   { name: 'favNightTheme', storage: localStorage },
 )
-export const [proxiesRenderInTwoColumns, setProxiesRenderInTwoColumns] =
-  makePersisted(createSignal(true), {
-    name: 'proxiesRenderInTwoColumns',
-    storage: localStorage,
-  })
-export const [rulesRenderInTwoColumns, setRulesRenderInTwoColumns] =
-  makePersisted(createSignal(true), {
-    name: 'rulesRenderInTwoColumns',
-    storage: localStorage,
-  })
 export const [connectionsTableSize, setConnectionsTableSize] = makePersisted(
   createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
   { name: 'connectionsTableSize', storage: localStorage },