refactor: more refactoring

src/App.tsx

@@ -1,7 +1,7 @@
 import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
 import { Show, createEffect, lazy, onMount } from 'solid-js'
 import { Header } from '~/components'
-import { ROUTE } from '~/constants'
+import { ROUTES } from '~/constants'
 import {
   curTheme,
   endpoint,
@@ -46,14 +46,14 @@ export const App = () => {
       <div class="flex-1 overflow-y-auto overflow-x-hidden p-2 sm:p-4">
         <Routes>
           <Show when={selectedEndpoint()}>
-            <Route path={ROUTE.Overview} component={Overview} />
+            <Route path={ROUTES.Overview} component={Overview} />
-            <Route path={ROUTE.Proxies} component={Proxies} />
+            <Route path={ROUTES.Proxies} component={Proxies} />
-            <Route path={ROUTE.Proxyprovider} component={ProxyProvider} />
+            <Route path={ROUTES.Proxyprovider} component={ProxyProvider} />
-            <Route path={ROUTE.Rules} component={Rules} />
+            <Route path={ROUTES.Rules} component={Rules} />
-            <Route path={ROUTE.Conns} component={Connections} />
+            <Route path={ROUTES.Conns} component={Connections} />
-            <Route path={ROUTE.Log} component={Logs} />
+            <Route path={ROUTES.Log} component={Logs} />
-            <Route path={ROUTE.Config} component={Config} />
+            <Route path={ROUTES.Config} component={Config} />
-            <Route path="*" element={<Navigate href={ROUTE.Overview} />} />
+            <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
           </Show>
 
           <Route path="/setup" component={Setup} />

src/components/ConnectionsModal.tsx

@@ -13,23 +13,29 @@ import {
   createSortable,
   useDragDropContext,
 } from '@thisbeyond/solid-dnd'
-import { For, Show, createSignal } from 'solid-js'
+import { Component, For, Show, createSignal } from 'solid-js'
 import { Button } from '~/components'
-import { AccessorKey, initColumnOrder, initColumnVisibility } from '~/constants'
+import {
+  CONNECTIONS_TABLE_ACCESSOR_KEY,
+  CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
+  CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
+} from '~/constants'
 
-type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
+type ColumnVisibility = Partial<Record<CONNECTIONS_TABLE_ACCESSOR_KEY, boolean>>
-type ColumnOrder = AccessorKey[]
+type ColumnOrder = CONNECTIONS_TABLE_ACCESSOR_KEY[]
 
-export const ConnectionsModal = (props: {
+export const ConnectionsTableOrderingModal = (props: {
   order: ColumnOrder
   visible: ColumnVisibility
   onOrderChange: (value: ColumnOrder) => void
   onVisibleChange: (value: ColumnVisibility) => void
 }) => {
   const [t] = useI18n()
-  const [activeKey, setActiveKey] = createSignal<AccessorKey | null>(null)
+  const [activeKey, setActiveKey] =
+    createSignal<CONNECTIONS_TABLE_ACCESSOR_KEY | null>(null)
+
   const onDragStart = ({ draggable }: { draggable: Draggable }) =>
-    setActiveKey(draggable.id as AccessorKey)
+    setActiveKey(draggable.id as CONNECTIONS_TABLE_ACCESSOR_KEY)
   const onDragEnd = ({
     draggable,
     droppable,
@@ -39,8 +45,12 @@ export const ConnectionsModal = (props: {
   }) => {
     if (draggable && droppable) {
       const currentItems = props.order
-      const fromIndex = currentItems.indexOf(draggable.id as AccessorKey)
+      const fromIndex = currentItems.indexOf(
-      const toIndex = currentItems.indexOf(droppable.id as AccessorKey)
+        draggable.id as CONNECTIONS_TABLE_ACCESSOR_KEY,
+      )
+      const toIndex = currentItems.indexOf(
+        droppable.id as CONNECTIONS_TABLE_ACCESSOR_KEY,
+      )
 
       if (fromIndex !== toIndex) {
         const updatedItems = currentItems.slice()
@@ -51,8 +61,9 @@ export const ConnectionsModal = (props: {
     }
   }
 
-  const FormRow = (p: { key: AccessorKey }) => {
+  const FormRow: Component<{
-    const key = p.key
+    key: CONNECTIONS_TABLE_ACCESSOR_KEY
+  }> = ({ key }) => {
     const sortable = createSortable(key)
     const [state] = useDragDropContext()!
 
@@ -109,8 +120,8 @@ export const ConnectionsModal = (props: {
           <Button
             class="btn-neutral btn-sm ml-auto mt-4 block"
             onClick={() => {
-              props.onOrderChange(initColumnOrder)
+              props.onOrderChange(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER)
-              props.onVisibleChange(initColumnVisibility)
+              props.onVisibleChange(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY)
             }}
           >
             {t('reset')}

src/components/Header.tsx

@@ -16,7 +16,7 @@ import {
 import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/components'
-import { LANG, ROUTE, themes } from '~/constants'
+import { LANG, ROUTES, themes } from '~/constants'
 import { setCurTheme, setSelectedEndpoint, useProxies } from '~/signals'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
@@ -70,32 +70,32 @@ export const Header = () => {
   const navs = createMemo(() => {
     const list = [
       {
-        href: ROUTE.Overview,
+        href: ROUTES.Overview,
         name: t('overview'),
         icon: <IconHome />,
       },
       {
-        href: ROUTE.Proxies,
+        href: ROUTES.Proxies,
         name: t('proxies'),
         icon: <IconGlobe />,
       },
       {
-        href: ROUTE.Rules,
+        href: ROUTES.Rules,
         name: t('rules'),
         icon: <IconRuler />,
       },
       {
-        href: ROUTE.Conns,
+        href: ROUTES.Conns,
         name: t('connections'),
         icon: <IconNetwork />,
       },
       {
-        href: ROUTE.Log,
+        href: ROUTES.Log,
         name: t('logs'),
         icon: <IconFileStack />,
       },
       {
-        href: ROUTE.Config,
+        href: ROUTES.Config,
         name: t('config'),
         icon: <IconSettings />,
       },
@@ -103,7 +103,7 @@ export const Header = () => {
 
     if (proxyProviders().length > 0) {
       list.splice(2, 0, {
-        href: ROUTE.Proxyprovider,
+        href: ROUTES.Proxyprovider,
         name: t('proxyProviders'),
         icon: <IconGlobeFilled />,
       })

src/constants.ts

@@ -30,7 +30,7 @@ export const themes = [
   'winter',
 ]
 
-export enum ROUTE {
+export enum ROUTES {
   Overview = '/overview',
   Proxies = '/proxies',
   Proxyprovider = '/proxyprovider',
@@ -40,22 +40,6 @@ export enum ROUTE {
   Config = '/config',
 }
 
-export enum AccessorKey {
-  Close = 'close',
-  ID = 'ID',
-  Type = 'type',
-  Process = 'process',
-  Host = 'host',
-  Rule = 'rules',
-  Chains = 'chains',
-  DlSpeed = 'dlSpeed',
-  ULSpeed = 'ulSpeed',
-  Download = 'dl',
-  Upload = 'ul',
-  Source = 'source',
-  Destination = 'destination',
-}
-
 export enum DELAY {
   NOT_CONNECTED = 0,
   MEDIUM = 200,
@@ -82,8 +66,28 @@ export enum LANG {
   ZH = 'zh-CN',
 }
 
-export const initColumnOrder = Object.values(AccessorKey)
+export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
-export const initColumnVisibility = {
+  Close = 'close',
-  ...Object.fromEntries(initColumnOrder.map((i) => [i, true])),
+  ID = 'ID',
-  [AccessorKey.ID]: false,
+  Type = 'type',
+  Process = 'process',
+  Host = 'host',
+  Rule = 'rules',
+  Chains = 'chains',
+  DlSpeed = 'dlSpeed',
+  ULSpeed = 'ulSpeed',
+  Download = 'dl',
+  Upload = 'ul',
+  Source = 'source',
+  Destination = 'destination',
+}
+
+export const CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER = Object.values(
+  CONNECTIONS_TABLE_ACCESSOR_KEY,
+)
+export const CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY = {
+  ...Object.fromEntries(
+    CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER.map((i) => [i, true]),
+  ),
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false,
 }

src/pages/Connections.tsx

@@ -20,8 +20,12 @@ import byteSize from 'byte-size'
 import { isIPv6 } from 'is-ip'
 import { For, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { Button, ConnectionsModal } from '~/components'
+import { Button, ConnectionsTableOrderingModal } from '~/components'
-import { AccessorKey, initColumnOrder, initColumnVisibility } from '~/constants'
+import {
+  CONNECTIONS_TABLE_ACCESSOR_KEY,
+  CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
+  CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
+} from '~/constants'
 import { secret, useRequest, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
@@ -30,20 +34,20 @@ type ConnectionWithSpeed = Connection & {
   uploadSpeed: number
 }
 
-type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
+type ColumnVisibility = Partial<Record<CONNECTIONS_TABLE_ACCESSOR_KEY, boolean>>
-type ColumnOrder = AccessorKey[]
+type ColumnOrder = CONNECTIONS_TABLE_ACCESSOR_KEY[]
 
 export default () => {
   const [t] = useI18n()
   const [columnVisibility, setColumnVisibility] = makePersisted(
-    createSignal<ColumnVisibility>(initColumnVisibility),
+    createSignal<ColumnVisibility>(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY),
     {
       name: 'columnVisibility',
       storage: localStorage,
     },
   )
   const [columnOrder, setColumnOrder] = makePersisted(
-    createSignal<ColumnOrder>(initColumnOrder),
+    createSignal<ColumnOrder>(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER),
     {
       name: 'columnOrder',
       storage: localStorage,
@@ -104,7 +108,7 @@ export default () => {
 
   const columns: ColumnDef<ConnectionWithSpeed>[] = [
     {
-      accessorKey: AccessorKey.Close,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Close,
       header: () => (
         <div class="flex h-full items-center">
           <Button
@@ -127,68 +131,68 @@ export default () => {
       ),
     },
     {
-      accessorKey: AccessorKey.ID,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ID,
       accessorFn: (row) => row.id,
     },
     {
-      accessorKey: AccessorKey.Type,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Type,
       accessorFn: (row) => `${row.metadata.type}(${row.metadata.network})`,
     },
     {
-      accessorKey: AccessorKey.Process,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Process,
       accessorFn: (row) =>
         row.metadata.process ||
         row.metadata.processPath.replace(/^.*[/\\](.*)$/, '$1') ||
         '-',
     },
     {
-      accessorKey: AccessorKey.Host,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Host,
       accessorFn: (row) =>
         `${
           row.metadata.host ? row.metadata.host : row.metadata.destinationIP
         }:${row.metadata.destinationPort}`,
     },
     {
-      accessorKey: AccessorKey.Rule,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Rule,
       accessorFn: (row) =>
         !row.rulePayload ? row.rule : `${row.rule} :: ${row.rulePayload}`,
     },
     {
-      accessorKey: AccessorKey.Chains,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Chains,
       accessorFn: (row) => row.chains.slice().reverse().join(' :: '),
     },
     {
-      accessorKey: AccessorKey.DlSpeed,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed,
       accessorFn: (row) => `${byteSize(row.downloadSpeed)}/s`,
       sortingFn: (prev, next) =>
         prev.original.downloadSpeed - next.original.downloadSpeed,
     },
     {
-      accessorKey: AccessorKey.ULSpeed,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ULSpeed,
       accessorFn: (row) => `${byteSize(row.uploadSpeed)}/s`,
       sortingFn: (prev, next) =>
         prev.original.uploadSpeed - next.original.uploadSpeed,
     },
     {
-      accessorKey: AccessorKey.Download,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Download,
       accessorFn: (row) => byteSize(row.download),
       sortingFn: (prev, next) =>
         prev.original.download - next.original.download,
     },
     {
-      accessorKey: AccessorKey.Upload,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Upload,
       accessorFn: (row) => byteSize(row.upload),
       sortingFn: (prev, next) => prev.original.upload - next.original.upload,
     },
     {
-      accessorKey: AccessorKey.Source,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Source,
       accessorFn: (row) =>
         isIPv6(row.metadata.sourceIP)
           ? `[${row.metadata.sourceIP}]:${row.metadata.sourcePort}`
           : `${row.metadata.sourceIP}:${row.metadata.sourcePort}`,
     },
     {
-      accessorKey: AccessorKey.Destination,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Destination,
       accessorFn: (row) =>
         row.metadata.remoteDestination ||
         row.metadata.destinationIP ||
@@ -243,7 +247,7 @@ export default () => {
           <IconSettings />
         </label>
 
-        <ConnectionsModal
+        <ConnectionsTableOrderingModal
           order={columnOrder()}
           visible={columnVisibility()}
           onOrderChange={(data: ColumnOrder) => {
@@ -272,7 +276,8 @@ export default () => {
                           )}
                           onClick={header.column.getToggleSortingHandler()}
                         >
-                          {header.column.id === AccessorKey.Close ? (
+                          {header.column.id ===
+                          CONNECTIONS_TABLE_ACCESSOR_KEY.Close ? (
                             flexRender(
                               header.column.columnDef.header,
                               header.getContext(),