keep connection sort direction

src/renderer/src/pages/connections.tsx

@@ -8,22 +8,25 @@ import { Virtuoso } from 'react-virtuoso'
 import dayjs from 'dayjs'
 import ConnectionDetailModal from '@renderer/components/connections/connection-detail-modal'
 import { CgClose } from 'react-icons/cg'
+import { useAppConfig } from '@renderer/hooks/use-app-config'
+import { HiSortAscending, HiSortDescending } from 'react-icons/hi'
 
 let preData: IMihomoConnectionDetail[] = []
 
 const Connections: React.FC = () => {
   const [filter, setFilter] = useState('')
+  const { appConfig, patchAppConfig } = useAppConfig()
+  const { connectionDirection = 'asc', connectionOrderBy = 'time' } = appConfig || {}
   const [connectionsInfo, setConnectionsInfo] = useState<IMihomoConnectionsInfo>()
   const [connections, setConnections] = useState<IMihomoConnectionDetail[]>([])
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
   const [selected, setSelected] = useState<IMihomoConnectionDetail>()
-  const [direction, setDirection] = useState(true)
+
-  const [sortBy, setSortBy] = useState('time')
   const filteredConnections = useMemo(() => {
-    if (sortBy) {
+    if (connectionOrderBy) {
       connections.sort((a, b) => {
-        if (direction) {
+        if (connectionDirection === 'asc') {
-          switch (sortBy) {
+          switch (connectionOrderBy) {
             case 'time':
               return dayjs(b.start).unix() - dayjs(a.start).unix()
             case 'upload':
@@ -35,9 +38,8 @@ const Connections: React.FC = () => {
             case 'downloadSpeed':
               return (a.downloadSpeed || 0) - (b.downloadSpeed || 0)
           }
-          return 0
         } else {
-          switch (sortBy) {
+          switch (connectionOrderBy) {
             case 'time':
               return dayjs(a.start).unix() - dayjs(b.start).unix()
             case 'upload':
@@ -49,7 +51,6 @@ const Connections: React.FC = () => {
             case 'downloadSpeed':
               return (b.downloadSpeed || 0) - (a.downloadSpeed || 0)
           }
-          return 0
         }
       })
     }
@@ -58,7 +59,7 @@ const Connections: React.FC = () => {
       const raw = JSON.stringify(connection)
       return raw.includes(filter)
     })
-  }, [connections, filter])
+  }, [connections, filter, connectionDirection, connectionOrderBy])
 
   useEffect(() => {
     window.electron.ipcRenderer.on('mihomoConnections', (_e, info: IMihomoConnectionsInfo) => {
@@ -135,9 +136,16 @@ const Connections: React.FC = () => {
           <Select
             size="sm"
             className="w-[180px]"
-            selectedKeys={new Set([sortBy])}
+            selectedKeys={new Set([connectionOrderBy])}
             onSelectionChange={async (v) => {
-              setSortBy(v.currentKey as string)
+              await patchAppConfig({
+                connectionOrderBy: v.currentKey as
+                  | 'time'
+                  | 'upload'
+                  | 'download'
+                  | 'uploadSpeed'
+                  | 'downloadSpeed'
+              })
             }}
           >
             <SelectItem key="upload">上传量</SelectItem>
@@ -148,11 +156,19 @@ const Connections: React.FC = () => {
           </Select>
           <Button
             size="sm"
-            onPress={() => {
+            isIconOnly
-              setDirection((pre) => !pre)
+            className="bg-content2"
+            onPress={async () => {
+              patchAppConfig({
+                connectionDirection: connectionDirection === 'asc' ? 'desc' : 'asc'
+              })
             }}
           >
-            {direction ? '升序' : '降序'}
+            {connectionDirection === 'asc' ? (
+              <HiSortAscending className="text-lg" />
+            ) : (
+              <HiSortDescending className="text-lg" />
+            )}
           </Button>
         </div>
         <Divider />

src/renderer/src/pages/logs.tsx

@@ -3,6 +3,7 @@ import LogItem from '@renderer/components/logs/log-item'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Divider, Input } from '@nextui-org/react'
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
+import { IoLocationSharp } from 'react-icons/io5'
 
 const Logs: React.FC = () => {
   const [logs, setLogs] = useState<IMihomoLogInfo[]>([])
@@ -53,6 +54,7 @@ const Logs: React.FC = () => {
           />
           <Button
             size="sm"
+            isIconOnly
             className="ml-2"
             color={trace ? 'primary' : 'default'}
             variant={trace ? 'solid' : 'bordered'}
@@ -60,7 +62,7 @@ const Logs: React.FC = () => {
               setTrace((prev) => !prev)
             }}
           >
-            追踪
+            <IoLocationSharp className="text-lg" />
           </Button>
         </div>
         <Divider />

src/shared/types.d.ts

@@ -217,6 +217,8 @@ interface IAppConfig {
   proxyDisplayOrder: 'default' | 'delay' | 'name'
   envType?: 'bash' | 'cmd' | 'powershell'
   proxyCols: 'auto' | '1' | '2' | '3' | '4'
+  connectionDirection: 'asc' | 'desc'
+  connectionOrderBy: 'time' | 'upload' | 'download' | 'uploadSpeed' | 'downloadSpeed'
   autoSetDNS?: boolean
   originDNS?: string
   useWindowFrame: boolean