feat(connections): reduce default visible columns

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@commitlint/config-conventional": "^19.5.0",
+    "@corvu/accordion": "^0.2.3",
+    "@corvu/tailwind": "^0.1.5",
     "@corvu/tooltip": "^0.2.1",
     "@eslint/js": "^9.12.0",
     "@felte/solid": "^1.2.13",

pnpm-lock.yaml

@@ -10,6 +10,12 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^19.5.0
         version: 19.5.0
+      '@corvu/accordion':
+        specifier: ^0.2.3
+        version: 0.2.3(solid-js@1.9.2)
+      '@corvu/tailwind':
+        specifier: ^0.1.5
+        version: 0.1.5(tailwindcss@3.4.13)
       '@corvu/tooltip':
         specifier: ^0.2.1
         version: 0.2.1(solid-js@1.9.2)
@@ -1260,6 +1266,30 @@ packages:
       }
     engines: { node: '>=v18' }
 
+  '@corvu/accordion@0.2.3':
+    resolution:
+      {
+        integrity: sha512-M+qDysE1bKXeCmVsaHVs4FbrIWzQfffOrQ2H2yYYuGQfZINi5783rBcLTn7eNhUknOfdwVcjs2rnODeIomVC3A==,
+      }
+    peerDependencies:
+      solid-js: ^1.8
+
+  '@corvu/disclosure@0.2.0':
+    resolution:
+      {
+        integrity: sha512-+SkGXXcah8CiXQeM1qrYgikEEX6CFGZ8AOAEDHHkxFkQHC8ll0wAdGAkqT11quPvE9O6/f1ulfWNWdrX4Lqmnw==,
+      }
+    peerDependencies:
+      solid-js: ^1.8
+
+  '@corvu/tailwind@0.1.5':
+    resolution:
+      {
+        integrity: sha512-+rTTveZVTfUM6z6w83A2IWCSob33EFxAuazn1bzd8/T1t1FhpzV1Jt/Sn3awH4muDAuDaZujzebueB/t3u03hw==,
+      }
+    peerDependencies:
+      tailwindcss: ^3
+
   '@corvu/tooltip@0.2.1':
     resolution:
       {
@@ -1268,6 +1298,14 @@ packages:
     peerDependencies:
       solid-js: ^1.8
 
+  '@corvu/utils@0.3.2':
+    resolution:
+      {
+        integrity: sha512-ZWlyWEE8qV9+CB9OAyo2bTrZGXQN9ZeM+JfYv89zoR+lRACKTDuoOZEdiyL8Uc7U5dUSH1uTqKhTTnaHWb+wZA==,
+      }
+    peerDependencies:
+      solid-js: ^1.8
+
   '@corvu/utils@0.4.2':
     resolution:
       {
@@ -5382,6 +5420,14 @@ packages:
         integrity: sha512-fe/K03nV+kMFJYhAOE8AIQHcGxB4rMIEoEyrulbtmf217NffbbwBqJnJI4ovt16e+kaIt0czE2WA7mP/pYN9yg==,
       }
 
+  solid-list@0.3.0:
+    resolution:
+      {
+        integrity: sha512-t4hx/F/l8Vmq+ib9HtZYl7Z9F1eKxq3eKJTXlvcm7P7yI4Z8O7QSOOEVHb/K6DD7M0RxzVRobK/BS5aSfLRwKg==,
+      }
+    peerDependencies:
+      solid-js: ^1.8
+
   solid-presence@0.1.8:
     resolution:
       {
@@ -7281,6 +7327,23 @@ snapshots:
       '@types/conventional-commits-parser': 5.0.0
       chalk: 5.3.0
 
+  '@corvu/accordion@0.2.3(solid-js@1.9.2)':
+    dependencies:
+      '@corvu/disclosure': 0.2.0(solid-js@1.9.2)
+      '@corvu/utils': 0.4.2(solid-js@1.9.2)
+      solid-js: 1.9.2
+      solid-list: 0.3.0(solid-js@1.9.2)
+
+  '@corvu/disclosure@0.2.0(solid-js@1.9.2)':
+    dependencies:
+      '@corvu/utils': 0.3.2(solid-js@1.9.2)
+      solid-js: 1.9.2
+      solid-presence: 0.1.8(solid-js@1.9.2)
+
+  '@corvu/tailwind@0.1.5(tailwindcss@3.4.13)':
+    dependencies:
+      tailwindcss: 3.4.13
+
   '@corvu/tooltip@0.2.1(solid-js@1.9.2)':
     dependencies:
       '@corvu/utils': 0.4.2(solid-js@1.9.2)
@@ -7289,6 +7352,11 @@ snapshots:
       solid-js: 1.9.2
       solid-presence: 0.1.8(solid-js@1.9.2)
 
+  '@corvu/utils@0.3.2(solid-js@1.9.2)':
+    dependencies:
+      '@floating-ui/dom': 1.6.11
+      solid-js: 1.9.2
+
   '@corvu/utils@0.4.2(solid-js@1.9.2)':
     dependencies:
       '@floating-ui/dom': 1.6.11
@@ -9583,6 +9651,11 @@ snapshots:
       seroval: 1.1.0
       seroval-plugins: 1.1.0(seroval@1.1.0)
 
+  solid-list@0.3.0(solid-js@1.9.2):
+    dependencies:
+      '@corvu/utils': 0.4.2(solid-js@1.9.2)
+      solid-js: 1.9.2
+
   solid-presence@0.1.8(solid-js@1.9.2):
     dependencies:
       '@corvu/utils': 0.4.2(solid-js@1.9.2)

src/components/ConnectionsSettingsModal.tsx

@@ -249,12 +249,13 @@ export const ConnectionsSettingsModal = (props: {
       <div class="flex flex-col gap-4">
         <div>
           <ConfigTitle withDivider>{t('quickFilter')}</ConfigTitle>
+
           <input
             type="text"
             class="input input-bordered w-full"
             onInput={(e) => setQuickFilterRegex(e.target.value)}
             value={quickFilterRegex()}
-          ></input>
+          />
         </div>
 
         <div>

src/constants/index.ts

@@ -119,10 +119,10 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   Process = 'process',
   Host = 'host',
   SniffHost = 'sniffHost',
-  Rule = 'rules',
+  Rule = 'rule',
   Chains = 'chains',
   DlSpeed = 'dlSpeed',
-  ULSpeed = 'ulSpeed',
+  UlSpeed = 'ulSpeed',
   Download = 'dl',
   Upload = 'ul',
   ConnectTime = 'connectTime',
@@ -140,9 +140,16 @@ export const CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER = Object.values(
 
 export const CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY = {
   ...Object.fromEntries(
-    CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER.map((i) => [i, true]),
+    CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER.map((i) => [i, false]),
   ),
-  [CONNECTIONS_TABLE_ACCESSOR_KEY.ID]: false,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.Details]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.Close]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.Host]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.Rule]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.Chains]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.UlSpeed]: true,
+  [CONNECTIONS_TABLE_ACCESSOR_KEY.SourceIP]: true,
 }
 
 export enum TAILWINDCSS_SIZE {

src/i18n/en.ts

@@ -4,7 +4,6 @@ export default {
   overview: 'Overview',
   proxies: 'Proxies',
   proxiesSettings: 'Proxies Settings',
-  rules: 'Rules',
   connections: 'Connections',
   connectionsSettings: 'Connections Settings',
   connectionsDetails: 'Connections Details',

src/i18n/zh.ts

@@ -6,7 +6,6 @@ export default {
   overview: '概览',
   proxies: '代理',
   proxiesSettings: '代理设置',
-  rules: '规则',
   connections: '连接',
   connectionsSettings: '连接设置',
   connectionsDetails: '连接详情',

src/pages/Connections.tsx

@@ -176,7 +176,7 @@ export default () => {
       accessorFn: (original) => original.metadata.sniffHost || '-',
     },
     {
-      header: () => t('rules'),
+      header: () => t('rule'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Rule,
       accessorFn: (original) =>
         !original.rulePayload
@@ -208,7 +208,7 @@ export default () => {
     {
       header: () => t('ulSpeed'),
       enableGrouping: false,
-      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ULSpeed,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.UlSpeed,
       accessorFn: (original) => `${byteSize(original.uploadSpeed)}/s`,
       sortingFn: (prev, next) =>
         prev.original.uploadSpeed - next.original.uploadSpeed,

tailwind.config.ts

@@ -1,9 +1,10 @@
+import corvu from '@corvu/tailwind'
 import daisyui from 'daisyui'
 import { Config } from 'tailwindcss'
 
 export default {
   content: ['src/**/*.{css,ts,tsx}'],
-  plugins: [daisyui],
+  plugins: [daisyui, corvu],
   daisyui: { themes: true },
   theme: {
     extend: {