feat: settings per-page

src/components/ConfigTitle.tsx

@@ -0,0 +1,14 @@
+import { children, ParentComponent } from 'solid-js'
+
+export const ConfigTitle: ParentComponent<{ withDivider?: boolean }> = (
+  props,
+) => (
+  <div
+    class="pb-4 text-lg font-semibold"
+    classList={{
+      divider: props.withDivider,
+    }}
+  >
+    {children(() => props.children)()}
+  </div>
+)

src/components/ConnectionsTableOrderingModal.tsx → src/components/ConnectionsSettingsModal.tsx

@@ -14,17 +14,20 @@ import {
   useDragDropContext,
 } from '@thisbeyond/solid-dnd'
 import { Component, For, Show, createSignal } from 'solid-js'
-import { Button } from '~/components'
+import { Button, ConfigTitle } from '~/components'
 import {
   CONNECTIONS_TABLE_ACCESSOR_KEY,
   CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
   CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
+  MODAL,
+  TAILWINDCSS_SIZE,
 } from '~/constants'
+import { connectionsTableSize, setConnectionsTableSize } from '~/signals'
 
 type ColumnVisibility = Partial<Record<CONNECTIONS_TABLE_ACCESSOR_KEY, boolean>>
 type ColumnOrder = CONNECTIONS_TABLE_ACCESSOR_KEY[]
 
-export const ConnectionsTableOrderingModal = (props: {
+export const ConnectionsSettingsModal = (props: {
   order: ColumnOrder
   visible: ColumnVisibility
   onOrderChange: (value: ColumnOrder) => void
@@ -76,8 +79,9 @@ export const ConnectionsTableOrderingModal = (props: {
           'transition-transform': !!state.active.draggable,
         }}
       >
-        <div class="my-1 flex cursor-grab justify-between p-1">
+        <div class="flex cursor-grab justify-between py-2">
           <span class="select-none">{t(key)}</span>
+
           <input
             type="checkbox"
             class="toggle"
@@ -96,27 +100,50 @@ export const ConnectionsTableOrderingModal = (props: {
 
   return (
     <dialog
-      id="connections-table-ordering-modal"
+      id={MODAL.CONNECTIONS_SETTINGS}
       class="modal modal-bottom sm:modal-middle"
     >
-      <div class="modal-box" onContextMenu={(e) => e.preventDefault()}>
-        <DragDropProvider
-          onDragStart={onDragStart}
-          onDragEnd={onDragEnd as DragEventHandler}
-          collisionDetector={closestCenter}
-        >
-          <DragDropSensors />
-
-          <SortableProvider ids={props.order}>
-            <For each={props.order}>{(key) => <FormRow key={key} />}</For>
-          </SortableProvider>
-
-          <DragOverlay>
-            <Show when={activeKey()}>
-              <div>{t(activeKey()!)}</div>
-            </Show>
-          </DragOverlay>
-        </DragDropProvider>
+      <div
+        class="modal-box flex flex-col gap-4"
+        onContextMenu={(e) => e.preventDefault()}
+      >
+        <div>
+          <ConfigTitle withDivider>{t('tableSize')}</ConfigTitle>
+
+          <select
+            class="select select-bordered w-full"
+            value={connectionsTableSize()}
+            onChange={(e) =>
+              setConnectionsTableSize(e.target.value as TAILWINDCSS_SIZE)
+            }
+          >
+            <For each={Object.values(TAILWINDCSS_SIZE)}>
+              {(value) => <option value={value}>{t(value)}</option>}
+            </For>
+          </select>
+        </div>
+
+        <div>
+          <ConfigTitle withDivider>{t('sort')}</ConfigTitle>
+
+          <DragDropProvider
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd as DragEventHandler}
+            collisionDetector={closestCenter}
+          >
+            <DragDropSensors />
+
+            <SortableProvider ids={props.order}>
+              <For each={props.order}>{(key) => <FormRow key={key} />}</For>
+            </SortableProvider>
+
+            <DragOverlay>
+              <Show when={activeKey()}>
+                <div>{t(activeKey()!)}</div>
+              </Show>
+            </DragOverlay>
+          </DragDropProvider>
+        </div>
 
         <div class="modal-action">
           <Button

src/components/ConnectionsTableDetailsModal.tsx

@@ -1,12 +1,13 @@
 import { Component, Show } from 'solid-js'
+import { MODAL } from '~/constants'
 import { allConnections } from '~/signals'
 
 export const ConnectionsTableDetailsModal: Component<{
   selectedConnectionID?: string
 }> = (props) => {
   return (
     <dialog
-      id="connections-table-details-modal"
+      id={MODAL.CONNECTIONS_TABLE_DETAILS}
       class="modal modal-bottom sm:modal-middle"
     >
       <div class="modal-box">

src/components/LogsSettingsModal.tsx

@@ -0,0 +1,81 @@
+import { useI18n } from '@solid-primitives/i18n'
+import { For } from 'solid-js'
+import { ConfigTitle } from '~/components'
+import {
+  LOG_LEVEL,
+  LOGS_TABLE_MAX_ROWS_LIST,
+  MODAL,
+  TAILWINDCSS_SIZE,
+} from '~/constants'
+import {
+  logMaxRows,
+  logsTableSize,
+  setLogLevel,
+  setLogMaxRows,
+  setLogsTableSize,
+} from '~/signals'
+
+export const LogsSettingsModal = () => {
+  const [t] = useI18n()
+
+  return (
+    <dialog id={MODAL.LOGS_SETTINGS} class="modal modal-bottom sm:modal-middle">
+      <div class="modal-box flex flex-col gap-4">
+        <div>
+          <ConfigTitle withDivider>{t('tableSize')}</ConfigTitle>
+
+          <select
+            class="select select-bordered w-full"
+            value={logsTableSize()}
+            onChange={(e) =>
+              setLogsTableSize(e.target.value as TAILWINDCSS_SIZE)
+            }
+          >
+            <For each={Object.values(TAILWINDCSS_SIZE)}>
+              {(value) => <option value={value}>{t(value)}</option>}
+            </For>
+          </select>
+        </div>
+
+        <div>
+          <ConfigTitle withDivider>{t('logLevel')}</ConfigTitle>
+
+          <select
+            class="select select-bordered w-full"
+            onChange={(e) => setLogLevel(e.target.value as LOG_LEVEL)}
+          >
+            <For
+              each={[
+                LOG_LEVEL.Info,
+                LOG_LEVEL.Error,
+                LOG_LEVEL.Warning,
+                LOG_LEVEL.Debug,
+                LOG_LEVEL.Silent,
+              ]}
+            >
+              {(level) => <option value={level}>{t(level)}</option>}
+            </For>
+          </select>
+        </div>
+
+        <div>
+          <ConfigTitle withDivider>{t('logMaxRows')}</ConfigTitle>
+
+          <select
+            class="select select-bordered w-full"
+            value={logMaxRows()}
+            onChange={(e) => setLogMaxRows(parseInt(e.target.value))}
+          >
+            <For each={LOGS_TABLE_MAX_ROWS_LIST}>
+              {(rows) => <option value={rows}>{rows}</option>}
+            </For>
+          </select>
+        </div>
+      </div>
+
+      <form method="dialog" class="modal-backdrop">
+        <button />
+      </form>
+    </dialog>
+  )
+}

src/components/ProxiesSettingsModal.tsx

@@ -0,0 +1,107 @@
+import { useI18n } from '@solid-primitives/i18n'
+import { For } from 'solid-js'
+import { ConfigTitle } from '~/components'
+import { MODAL, PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE } from '~/constants'
+import {
+  autoCloseConns,
+  latencyTestTimeoutDuration,
+  proxiesOrderingType,
+  proxiesPreviewType,
+  setAutoCloseConns,
+  setLatencyTestTimeoutDuration,
+  setProxiesOrderingType,
+  setProxiesPreviewType,
+  setUrlForLatencyTest,
+  urlForLatencyTest,
+} from '~/signals'
+
+export const ProxiesSettingsModal = () => {
+  const [t] = useI18n()
+
+  return (
+    <dialog
+      id={MODAL.PROXIES_SETTINGS}
+      class="modal modal-bottom sm:modal-middle"
+    >
+      <div class="modal-box flex flex-col gap-4">
+        <div>
+          <ConfigTitle withDivider>{t('autoCloseConns')}</ConfigTitle>
+
+          <div class="flex w-full justify-center">
+            <input
+              class="toggle"
+              type="checkbox"
+              checked={autoCloseConns()}
+              onChange={(e) => setAutoCloseConns(e.target.checked)}
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col">
+          <ConfigTitle withDivider>{t('urlForLatencyTest')}</ConfigTitle>
+
+          <input
+            class="input input-bordered w-full"
+            value={urlForLatencyTest()}
+            onChange={(e) => setUrlForLatencyTest(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <ConfigTitle withDivider>
+            {t('latencyTestTimeoutDuration')} ({t('ms')})
+          </ConfigTitle>
+
+          <input
+            type="number"
+            class="input input-bordered w-full"
+            value={latencyTestTimeoutDuration()}
+            onChange={(e) =>
+              setLatencyTestTimeoutDuration(Number(e.target.value))
+            }
+          />
+        </div>
+
+        <div>
+          <ConfigTitle withDivider>{t('proxiesSorting')}</ConfigTitle>
+
+          <select
+            class="select select-bordered w-full"
+            value={proxiesOrderingType()}
+            onChange={(e) =>
+              setProxiesOrderingType(e.target.value as PROXIES_ORDERING_TYPE)
+            }
+          >
+            <For each={Object.values(PROXIES_ORDERING_TYPE)}>
+              {(value) => (
+                <option class="flex items-center gap-2" value={value}>
+                  {t(value)}
+                </option>
+              )}
+            </For>
+          </select>
+        </div>
+
+        <div>
+          <ConfigTitle withDivider>{t('proxiesPreviewType')}</ConfigTitle>
+
+          <select
+            class="select select-bordered w-full"
+            value={proxiesPreviewType()}
+            onChange={(e) =>
+              setProxiesPreviewType(e.target.value as PROXIES_PREVIEW_TYPE)
+            }
+          >
+            <For each={Object.values(PROXIES_PREVIEW_TYPE)}>
+              {(value) => <option value={value}>{t(value)}</option>}
+            </For>
+          </select>
+        </div>
+      </div>
+
+      <form method="dialog" class="modal-backdrop">
+        <button />
+      </form>
+    </dialog>
+  )
+}

src/components/index.ts

@@ -1,11 +1,14 @@
 export * from './Button'
 export * from './Collapse'
+export * from './ConfigTitle'
+export * from './ConnectionsSettingsModal'
 export * from './ConnectionsTableDetailsModal'
-export * from './ConnectionsTableOrderingModal'
 export * from './ForTwoColumns'
 export * from './Header'
 export * from './Latency'
 export * from './LogoText'
+export * from './LogsSettingsModal'
+export * from './ProxiesSettingsModal'
 export * from './ProxyCardGroups'
 export * from './ProxyNodeCard'
 export * from './ProxyNodePreview'

src/constants/index.ts

@@ -163,3 +163,11 @@ export enum LOG_LEVEL {
 }
 
 export const LOGS_TABLE_MAX_ROWS_LIST = [200, 300, 500, 800, 1000]
+
+export enum MODAL {
+  PROXIES_SETTINGS = 'proxies-settings',
+  RULES_SETTINGS = 'rules-settings',
+  CONNECTIONS_SETTINGS = 'connections-settings',
+  CONNECTIONS_TABLE_DETAILS = 'connections-table-details',
+  LOGS_SETTINGS = 'logs-settings',
+}

src/i18n/en.ts

@@ -59,15 +59,14 @@ export default {
   orderName_desc: 'By name alphabetically (Z-A)',
   ms: 'ms',
   updated: 'Updated',
-  renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
   tableSize: 'Table size',
   logLevel: 'Log Level',
   info: 'info',
   silent: 'silent',
   debug: 'debug',
   warning: 'warning',
   error: 'error',
-  logMaxRows: 'Log Maxinum Reserved Rows',
+  logMaxRows: 'Log Maximum Reserved Rows',
   xs: 'Extra small size',
   sm: 'Small size',
   md: 'Normal size',
@@ -86,4 +85,5 @@ export default {
   direct: 'Direct',
   active: 'Active',
   closed: 'Closed',
+  sort: 'Sort',
 }

src/i18n/zh.ts

@@ -59,7 +59,6 @@ export default {
   orderName_desc: '按名称字母排序 (Z-A)',
   ms: '毫秒',
   updated: '更新于',
-  renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
   tableSize: '表格大小',
   logLevel: '日志等级',
   info: '信息',
@@ -86,4 +85,5 @@ export default {
   direct: '直连',
   active: '活动',
   closed: '已关闭',
+  sort: '排序',
 }