keep detail

src/renderer/src/components/connections/connection-item.tsx

@@ -1,28 +1,34 @@
 import { Button, Card, CardFooter, CardHeader, Chip } from '@nextui-org/react'
 import { calcTraffic } from '@renderer/utils/calc'
 import dayjs from 'dayjs'
-import React, { useState } from 'react'
+import React, { useEffect } from 'react'
 import { CgClose } from 'react-icons/cg'
-import ConnectionDetailModal from './connection-detail-modal'
 
 interface Props {
   index: number
   info: IMihomoConnectionDetail
+  selected: IMihomoConnectionDetail | undefined
+  setSelected: React.Dispatch<React.SetStateAction<IMihomoConnectionDetail | undefined>>
+  setIsDetailModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   close: (id: string) => Promise<void>
 }
 
 const ConnectionItem: React.FC<Props> = (props) => {
-  const { index, info } = props
+  const { index, info, close, selected, setSelected, setIsDetailModalOpen } = props
-  const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
+
+  useEffect(() => {
+    if (selected?.id === info.id) {
+      setSelected(info)
+    }
+  }, [info])
+
   return (
     <div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
-      {isDetailModalOpen && (
-        <ConnectionDetailModal onClose={() => setIsDetailModalOpen(false)} connection={info} />
-      )}
       <Card
         isPressable
         className="w-full"
         onPress={() => {
+          setSelected(info)
           setIsDetailModalOpen(true)
         }}
       >
@@ -75,7 +81,7 @@ const ConnectionItem: React.FC<Props> = (props) => {
             isIconOnly
             className="mr-2 my-auto"
             onPress={() => {
-              props.close(info.id)
+              close(info.id)
             }}
           >
             <CgClose className="text-lg" />

src/renderer/src/pages/connections.tsx

@@ -11,6 +11,7 @@ import { calcTraffic } from '@renderer/utils/calc'
 import ConnectionItem from '@renderer/components/connections/connection-item'
 import { Virtuoso } from 'react-virtuoso'
 import dayjs from 'dayjs'
+import ConnectionDetailModal from '@renderer/components/connections/connection-detail-modal'
 
 let preData: IMihomoConnectionDetail[] = []
 
@@ -18,6 +19,8 @@ const Connections: React.FC = () => {
   const [filter, setFilter] = useState('')
   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(() => {
@@ -117,6 +120,9 @@ const Connections: React.FC = () => {
         </div>
       }
     >
+      {isDetailModalOpen && selected && (
+        <ConnectionDetailModal onClose={() => setIsDetailModalOpen(false)} connection={selected} />
+      )}
       <div className="overflow-x-auto sticky top-[49px] z-40">
         <div className="flex p-2 gap-2">
           <Input
@@ -158,6 +164,9 @@ const Connections: React.FC = () => {
           data={filteredConnections}
           itemContent={(i, connection) => (
             <ConnectionItem
+              setSelected={setSelected}
+              setIsDetailModalOpen={setIsDetailModalOpen}
+              selected={selected}
               close={mihomoCloseConnection}
               index={i}
               key={connection.id}