feat(connections): shorten the tab names

src/components/ConnectionsTableDetailsModal.tsx

@@ -5,7 +5,10 @@ export const ConnectionsTableDetailsModal: Component<{
   selectedConnectionID?: string
 }> = (props) => {
   return (
-    <dialog id="connections-table-details-modal" class="modal">
+    <dialog
+      id="connections-table-details-modal"
+      class="modal modal-bottom sm:modal-middle"
+    >
       <div class="modal-box">
         <Show when={props.selectedConnectionID}>
           <pre>

src/components/ConnectionsTableOrderingModal.tsx

@@ -95,8 +95,11 @@ export const ConnectionsTableOrderingModal = (props: {
   }
 
   return (
-    <dialog id="connections-table-ordering-modal" class="modal">
+    <dialog
-      <div class="modal-box w-80" onContextMenu={(e) => e.preventDefault()}>
+      id="connections-table-ordering-modal"
+      class="modal modal-bottom sm:modal-middle"
+    >
+      <div class="modal-box" onContextMenu={(e) => e.preventDefault()}>
         <DragDropProvider
           onDragStart={onDragStart}
           onDragEnd={onDragEnd as DragEventHandler}
@@ -115,6 +118,7 @@ export const ConnectionsTableOrderingModal = (props: {
           </DragOverlay>
         </DragDropProvider>
 
+        <div class="modal-action">
           <Button
             class="btn-neutral btn-sm ml-auto mt-4 block"
             onClick={() => {
@@ -125,6 +129,7 @@ export const ConnectionsTableOrderingModal = (props: {
             {t('reset')}
           </Button>
         </div>
+      </div>
 
       <form method="dialog" class="modal-backdrop">
         <button />

src/i18n/en.ts

@@ -68,7 +68,6 @@ export default {
   switchEndpoint: 'Switch Endpoint',
   switchLanguage: 'Switch Language',
   latencyTestTimeoutDuration: 'Latency Test Timeout Duration',
-  closedConnections: 'Closed Connections',
   all: 'All',
   sequence: 'Sequence',
   payload: 'Payload',
@@ -78,4 +77,6 @@ export default {
   global: 'Global',
   rule: 'Rule',
   direct: 'Direct',
+  active: 'Active',
+  closed: 'Closed',
 }

src/i18n/zh.ts

@@ -68,7 +68,6 @@ export default {
   switchEndpoint: '切换后端',
   switchLanguage: '切换语言',
   latencyTestTimeoutDuration: '测速超时时间',
-  closedConnections: '已关闭连接',
   all: '全部',
   sequence: '序列号',
   payload: '内容',
@@ -78,4 +77,6 @@ export default {
   global: '全局',
   rule: '规则',
   direct: '直连',
+  active: '活动',
+  closed: '已关闭',
 }

src/pages/Connections.tsx

@@ -2,13 +2,13 @@ import { writeClipboard } from '@solid-primitives/clipboard'
 import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
 import {
-  IconCircleX,
+  IconInfoSmall,
-  IconInfoCircle,
   IconPlayerPause,
   IconPlayerPlay,
   IconSettings,
   IconSortAscending,
   IconSortDescending,
+  IconX,
   IconZoomInFilled,
   IconZoomOutFilled,
 } from '@tabler/icons-solidjs'
@@ -113,7 +113,7 @@ export default () => {
               modal?.showModal()
             }}
           >
-            <IconInfoCircle size="16" />
+            <IconInfoSmall size="16" />
           </Button>
         </div>
       ),
@@ -131,7 +131,7 @@ export default () => {
             class="btn-circle btn-xs"
             onClick={() => closeSingleConnectionAPI(row.original.id)}
           >
-            <IconCircleX size="16" />
+            <IconX size="16" />
           </Button>
         </div>
       ),
@@ -293,12 +293,12 @@ export default () => {
   const tabs = createMemo(() => [
     {
       type: ActiveTab.activeConnections,
-      name: t('activeConnections'),
+      name: t('active'),
       count: activeConnections().length,
     },
     {
       type: ActiveTab.closedConnections,
-      name: t('closedConnections'),
+      name: t('closed'),
       count: closedConnections().length,
     },
   ])
@@ -350,7 +350,7 @@ export default () => {
               }
             }}
           >
-            <IconCircleX />
+            <IconX />
           </Button>
 
           <Button