the connections page has been slightly revised.

src/components/connection/connection-table.tsx

@@ -1,15 +1,14 @@
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import React, { useMemo, useState, useEffect, RefObject } from "react";
+import React, { useMemo, useState, useEffect, useRef } from "react";
 import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
   useReactTable,
-  Row,
+  Header,
   ColumnSizingState,
 } from "@tanstack/react-table";
-import { TableVirtuoso, TableComponents } from "react-virtuoso";
 
 import {
   Table,
@@ -27,7 +26,30 @@ import { cn } from "@root/lib/utils";
 
 dayjs.extend(relativeTime);
 
-// Интерфейс для строки данных, которую использует react-table
+interface IConnectionsItem {
+  id: string;
+  metadata: {
+    host: string;
+    destinationIP: string;
+    destinationPort: string;
+    remoteDestination: string;
+    process?: string;
+    processPath?: string;
+    sourceIP: string;
+    sourcePort: string;
+    type: string;
+    network: string;
+  };
+  rule: string;
+  rulePayload?: string;
+  chains: string[];
+  download: number;
+  upload: number;
+  curDownload?: number;
+  curUpload?: number;
+  start: string;
+}
+
 interface ConnectionRow {
   id: string;
   host: string;
@@ -45,29 +67,81 @@ interface ConnectionRow {
   connectionData: IConnectionsItem;
 }
 
-// Интерфейс для пропсов, которые компонент получает от родителя
 interface Props {
   connections: IConnectionsItem[];
   onShowDetail: (data: IConnectionsItem) => void;
   scrollerRef: (element: HTMLElement | Window | null) => void;
 }
 
+const ColumnResizer = ({ header }: { header: Header<ConnectionRow, unknown> }) => {
+  return (
+      <div
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          className={cn(
+              "absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none",
+              "bg-transparent hover:bg-primary/50 active:bg-primary",
+              "transition-colors duration-150",
+              header.column.getIsResizing() && "bg-primary"
+          )}
+          style={{
+            transform: header.column.getIsResizing() ? `translateX(0px)` : "",
+          }}
+      />
+  );
+};
+
 export const ConnectionTable = (props: Props) => {
   const { connections, onShowDetail, scrollerRef } = props;
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (tableContainerRef.current && scrollerRef) {
+      scrollerRef(tableContainerRef.current);
+    }
+  }, [scrollerRef]);
 
   const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(() => {
     try {
       const saved = localStorage.getItem("connection-table-widths");
-      return saved ? JSON.parse(saved) : {};
+      return saved
+          ? JSON.parse(saved)
+          : {
+            host: 220,
+            download: 88,
+            upload: 88,
+            dlSpeed: 88,
+            ulSpeed: 88,
+            chains: 340,
+            rule: 280,
+            process: 220,
+            time: 120,
+            source: 200,
+            remoteDestination: 200,
+            type: 160,
+          };
     } catch {
-      return {};
+      return {
+        host: 220,
+        download: 88,
+        upload: 88,
+        dlSpeed: 88,
+        ulSpeed: 88,
+        chains: 340,
+        rule: 280,
+        process: 220,
+        time: 120,
+        source: 200,
+        remoteDestination: 200,
+        type: 160,
+      };
     }
   });
 
   useEffect(() => {
     localStorage.setItem(
-      "connection-table-widths",
+        "connection-table-widths",
-      JSON.stringify(columnSizing),
+        JSON.stringify(columnSizing)
     );
   }, [columnSizing]);
 
@@ -77,13 +151,13 @@ export const ConnectionTable = (props: Props) => {
       const chains = [...each.chains].reverse().join(" / ");
       const rule = rulePayload ? `${each.rule}(${rulePayload})` : each.rule;
       const Destination = metadata.destinationIP
-        ? `${metadata.destinationIP}:${metadata.destinationPort}`
+          ? `${metadata.destinationIP}:${metadata.destinationPort}`
-        : `${metadata.remoteDestination}:${metadata.destinationPort}`;
+          : `${metadata.remoteDestination}:${metadata.destinationPort}`;
       return {
         id: each.id,
         host: metadata.host
-          ? `${metadata.host}:${metadata.destinationPort}`
+            ? `${metadata.host}:${metadata.destinationPort}`
-          : `${metadata.remoteDestination}:${metadata.destinationPort}`,
+            : `${metadata.remoteDestination}:${metadata.destinationPort}`,
         download: each.download,
         upload: each.upload,
         dlSpeed: each.curDownload ?? 0,
@@ -101,102 +175,118 @@ export const ConnectionTable = (props: Props) => {
   }, [connections]);
 
   const columns = useMemo<ColumnDef<ConnectionRow>[]>(
-    () => [
+      () => [
-      {
+        {
-        accessorKey: "host",
+          accessorKey: "host",
-        header: () => t("Host"),
+          header: () => t("Host"),
-        size: columnSizing?.host || 220,
+          size: columnSizing?.host || 220,
-        minSize: 180,
+          minSize: 180,
-      },
+          maxSize: 400,
-      {
+        },
-        accessorKey: "download",
+        {
-        header: () => t("Downloaded"),
+          accessorKey: "download",
-        size: columnSizing?.download || 88,
+          header: () => t("Downloaded"),
-        cell: ({ getValue }) => (
+          size: columnSizing?.download || 88,
-          <div className="text-right">
+          minSize: 80,
-            {parseTraffic(getValue<number>()).join(" ")}
+          maxSize: 150,
-          </div>
+          cell: ({ getValue }) => (
-        ),
+              <div className="text-right font-mono text-sm">
-      },
+                {parseTraffic(getValue<number>()).join(" ")}
-      {
+              </div>
-        accessorKey: "upload",
+          ),
-        header: () => t("Uploaded"),
+        },
-        size: columnSizing?.upload || 88,
+        {
-        cell: ({ getValue }) => (
+          accessorKey: "upload",
-          <div className="text-right">
+          header: () => t("Uploaded"),
-            {parseTraffic(getValue<number>()).join(" ")}
+          size: columnSizing?.upload || 88,
-          </div>
+          minSize: 80,
-        ),
+          maxSize: 150,
-      },
+          cell: ({ getValue }) => (
-      {
+              <div className="text-right font-mono text-sm">
-        accessorKey: "dlSpeed",
+                {parseTraffic(getValue<number>()).join(" ")}
-        header: () => t("DL Speed"),
+              </div>
-        size: columnSizing?.dlSpeed || 88,
+          ),
-        cell: ({ getValue }) => (
+        },
-          <div className="text-right">
+        {
-            {parseTraffic(getValue<number>()).join(" ")}/s
+          accessorKey: "dlSpeed",
-          </div>
+          header: () => t("DL Speed"),
-        ),
+          size: columnSizing?.dlSpeed || 88,
-      },
+          minSize: 80,
-      {
+          maxSize: 150,
-        accessorKey: "ulSpeed",
+          cell: ({ getValue }) => (
-        header: () => t("UL Speed"),
+              <div className="text-right font-mono text-sm">
-        size: columnSizing?.ulSpeed || 88,
+                {parseTraffic(getValue<number>()).join(" ")}/s
-        cell: ({ getValue }) => (
+              </div>
-          <div className="text-right">
+          ),
-            {parseTraffic(getValue<number>()).join(" ")}/s
+        },
-          </div>
+        {
-        ),
+          accessorKey: "ulSpeed",
-      },
+          header: () => t("UL Speed"),
-      {
+          size: columnSizing?.ulSpeed || 88,
-        accessorKey: "chains",
+          minSize: 80,
-        header: () => t("Chains"),
+          maxSize: 150,
-        size: columnSizing?.chains || 340,
+          cell: ({ getValue }) => (
-        minSize: 180,
+              <div className="text-right font-mono text-sm">
-      },
+                {parseTraffic(getValue<number>()).join(" ")}/s
-      {
+              </div>
-        accessorKey: "rule",
+          ),
-        header: () => t("Rule"),
+        },
-        size: columnSizing?.rule || 280,
+        {
-        minSize: 180,
+          accessorKey: "chains",
-      },
+          header: () => t("Chains"),
-      {
+          size: columnSizing?.chains || 340,
-        accessorKey: "process",
+          minSize: 180,
-        header: () => t("Process"),
+          maxSize: 500,
-        size: columnSizing?.process || 220,
+        },
-        minSize: 180,
+        {
-      },
+          accessorKey: "rule",
-      {
+          header: () => t("Rule"),
-        accessorKey: "time",
+          size: columnSizing?.rule || 280,
-        header: () => t("Time"),
+          minSize: 180,
-        size: columnSizing?.time || 120,
+          maxSize: 400,
-        minSize: 100,
+        },
-        cell: ({ getValue }) => (
+        {
-          <div className="text-right">
+          accessorKey: "process",
-            {dayjs(getValue<string>()).fromNow()}
+          header: () => t("Process"),
-          </div>
+          size: columnSizing?.process || 220,
-        ),
+          minSize: 180,
-      },
+          maxSize: 350,
-      {
+        },
-        accessorKey: "source",
+        {
-        header: () => t("Source"),
+          accessorKey: "time",
-        size: columnSizing?.source || 200,
+          header: () => t("Time"),
-        minSize: 130,
+          size: columnSizing?.time || 120,
-      },
+          minSize: 100,
-      {
+          maxSize: 180,
-        accessorKey: "remoteDestination",
+          cell: ({ getValue }) => (
-        header: () => t("Destination"),
+              <div className="text-right font-mono text-sm">
-        size: columnSizing?.remoteDestination || 200,
+                {dayjs(getValue<string>()).fromNow()}
-        minSize: 130,
+              </div>
-      },
+          ),
-      {
+        },
-        accessorKey: "type",
+        {
-        header: () => t("Type"),
+          accessorKey: "source",
-        size: columnSizing?.type || 160,
+          header: () => t("Source"),
-        minSize: 100,
+          size: columnSizing?.source || 200,
-      },
+          minSize: 130,
-    ],
+          maxSize: 300,
-    [columnSizing],
+        },
+        {
+          accessorKey: "remoteDestination",
+          header: () => t("Destination"),
+          size: columnSizing?.remoteDestination || 200,
+          minSize: 130,
+          maxSize: 300,
+        },
+        {
+          accessorKey: "type",
+          header: () => t("Type"),
+          size: columnSizing?.type || 160,
+          minSize: 100,
+          maxSize: 220,
+        },
+      ],
+      [columnSizing]
   );
 
   const table = useReactTable({
@@ -206,92 +296,91 @@ export const ConnectionTable = (props: Props) => {
     onColumnSizingChange: setColumnSizing,
     getCoreRowModel: getCoreRowModel(),
     columnResizeMode: "onChange",
+    enableColumnResizing: true,
   });
 
-  const VirtuosoTableComponents = useMemo<TableComponents<Row<ConnectionRow>>>(
+  const totalTableWidth = useMemo(() => {
-    () => ({
+    return table.getCenterTotalSize();
-      // Явно типизируем `ref` для каждого компонента
+  }, [table.getState().columnSizing]);
-      Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
+
-        <div className="h-full" {...props} ref={ref} />
+  if (connRows.length === 0) {
-      )),
+    return (
-      Table: (props) => <Table {...props} className="w-full border-collapse" />,
+        <div className="flex h-full items-center justify-center">
-      TableHead: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
+          <p className="text-muted-foreground">{t("No connections")}</p>
-        <TableHeader {...props} ref={ref} />
+        </div>
-      )),
+    );
-      // Явно типизируем пропсы и `ref` для TableRow
+  }
-      TableRow: React.forwardRef<
-        HTMLTableRowElement,
-        { item: Row<ConnectionRow> } & React.HTMLAttributes<HTMLTableRowElement>
-      >(({ item: row, ...props }, ref) => {
-        // `Virtuoso` передает нам готовую строку `row` в пропсе `item`.
-        // Больше не нужно искать ее по индексу!
-        return (
-          <TableRow
-            {...props}
-            ref={ref}
-            data-state={row.getIsSelected() && "selected"}
-            className="cursor-pointer hover:bg-muted/50"
-            onClick={() => onShowDetail(row.original.connectionData)}
-          />
-        );
-      }),
-      TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
-        <TableBody {...props} ref={ref} />
-      )),
-    }),
-    [],
-  );
 
   return (
-    <div className="h-full rounded-md border overflow-hidden">
+      <div className="rounded-md border relative bg-background">
-      {connRows.length > 0 ? (
+        <Table
-        <TableVirtuoso
+            className="w-full border-collapse table-fixed"
-          scrollerRef={scrollerRef}
+            style={{
-          data={table.getRowModel().rows}
+              width: totalTableWidth,
-          components={VirtuosoTableComponents}
+              minWidth: "100%",
-          fixedHeaderContent={() =>
+            }}
-            table.getHeaderGroups().map((headerGroup) => (
+        >
-              <TableRow
+          <TableHeader>
-                key={headerGroup.id}
+            {table.getHeaderGroups().map((headerGroup) => (
-                className="hover:bg-transparent bg-background/95 backdrop-blur"
+                <TableRow
-              >
+                    key={headerGroup.id}
-                {headerGroup.headers.map((header) => (
+                    className="hover:bg-transparent border-b-0 h-10"
-                  <TableHead
-                    key={header.id}
-                    style={{ width: header.getSize() }}
-                    className="p-2"
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))
-          }
-          itemContent={(index, row) => (
-            <>
-              {row.getVisibleCells().map((cell) => (
-                <TableCell
-                  key={cell.id}
-                  style={{ width: cell.column.getSize() }}
-                  className="p-2 whitespace-nowrap"
-                  onClick={() => onShowDetail(row.original.connectionData)}
                 >
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  {headerGroup.headers.map((header) => (
-                </TableCell>
+                      <TableHead
-              ))}
+                          key={header.id}
-            </>
+                          className={cn(
-          )}
+                              "sticky top-0 z-10",
-        />
+                              "p-2 text-xs font-semibold select-none border-r last:border-r-0 bg-background h-10"
-      ) : (
+                          )}
-        <div className="flex h-full items-center justify-center">
+                          style={{
-          <p>No results.</p>
+                            width: header.getSize(),
-        </div>
+                            minWidth: header.column.columnDef.minSize,
-      )}
+                            maxWidth: header.column.columnDef.maxSize,
-    </div>
+                          }}
+                      >
+                        <div className="flex items-center justify-between h-full">
+                          {header.isPlaceholder
+                              ? null
+                              : flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                              )}
+                        </div>
+                        {header.column.getCanResize() && (
+                            <ColumnResizer header={header} />
+                        )}
+                      </TableHead>
+                  ))}
+                </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody>
+            {table.getRowModel().rows.map((row) => (
+                <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    className="cursor-pointer hover:bg-muted/50 transition-colors"
+                    onClick={() => onShowDetail(row.original.connectionData)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                          key={cell.id}
+                          className="p-2 whitespace-nowrap overflow-hidden text-ellipsis text-sm border-r last:border-r-0"
+                          style={{
+                            width: cell.column.getSize(),
+                            minWidth: cell.column.columnDef.minSize,
+                            maxWidth: cell.column.columnDef.maxSize,
+                          }}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                  ))}
+                </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
   );
-};
+};

src/pages/connections.tsx

@@ -49,18 +49,37 @@ import {
   PauseCircle,
   ArrowDown,
   ArrowUp,
-  Menu,
 } from "lucide-react";
 import {SidebarTrigger} from "@/components/ui/sidebar";
 
+interface IConnectionsItem {
+  id: string;
+  metadata: {
+    host: string;
+    destinationIP: string;
+    process?: string;
+  };
+  start?: string;
+  curUpload?: number;
+  curDownload?: number;
+}
+
+interface IConnections {
+  uploadTotal: number;
+  downloadTotal: number;
+  connections: IConnectionsItem[];
+  data: IConnectionsItem[];
+}
+
+type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
+
 const initConn: IConnections = {
   uploadTotal: 0,
   downloadTotal: 0,
   connections: [],
+  data: [],
 };
 
-type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
-
 const ConnectionsPage = () => {
   const { t } = useTranslation();
   const pageVisible = useVisibility();
@@ -72,14 +91,14 @@ const ConnectionsPage = () => {
 
   const orderOpts: Record<string, OrderFunc> = {
     Default: (list) =>
-      list.sort(
+        list.sort(
-        (a, b) =>
+            (a, b) =>
-          new Date(b.start || "0").getTime()! -
+                new Date(b.start || "0").getTime()! -
-          new Date(a.start || "0").getTime()!,
+                new Date(a.start || "0").getTime()!,
-      ),
+        ),
-    "Upload Speed": (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
+    "Upload Speed": (list) => list.sort((a, b) => (b.curUpload ?? 0) - (a.curUpload ?? 0)),
     "Download Speed": (list) =>
-      list.sort((a, b) => b.curDownload! - a.curDownload!),
+        list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
   };
 
   const [isPaused, setIsPaused] = useState(false);
@@ -91,6 +110,7 @@ const ConnectionsPage = () => {
       uploadTotal: connections.uploadTotal,
       downloadTotal: connections.downloadTotal,
       connections: connections.data,
+      data: connections.data,
     };
     if (isPaused) return frozenData ?? currentData;
     return currentData;
@@ -101,7 +121,7 @@ const ConnectionsPage = () => {
     let conns = displayData.connections.filter((conn) => {
       const { host, destinationIP, process } = conn.metadata;
       return (
-        match(host || "") || match(destinationIP || "") || match(process || "")
+          match(host || "") || match(destinationIP || "") || match(process || "")
       );
     });
     if (orderFunc) conns = orderFunc(conns);
@@ -109,24 +129,24 @@ const ConnectionsPage = () => {
   }, [displayData, match, curOrderOpt]);
 
   const [scrollingElement, setScrollingElement] = useState<
-    HTMLElement | Window | null
+      HTMLElement | Window | null
   >(null);
   const [isScrolled, setIsScrolled] = useState(false);
 
   const scrollerRefCallback = useCallback(
-    (node: HTMLElement | Window | null) => {
+      (node: HTMLElement | Window | null) => {
-      setScrollingElement(node);
+        setScrollingElement(node);
-    },
+      },
-    [],
+      [],
   );
 
   useEffect(() => {
     if (!scrollingElement) return;
     const handleScroll = () => {
       const scrollTop =
-        scrollingElement instanceof Window
+          scrollingElement instanceof Window
-          ? scrollingElement.scrollY
+              ? scrollingElement.scrollY
-          : scrollingElement.scrollTop;
+              : scrollingElement.scrollTop;
       setIsScrolled(scrollTop > 5);
     };
 
@@ -137,8 +157,8 @@ const ConnectionsPage = () => {
   const onCloseAll = useLockFn(closeAllConnections);
   const detailRef = useRef<ConnectionDetailRef>(null!);
   const handleSearch = useCallback(
-    (m: (content: string) => boolean) => setMatch(() => m),
+      (m: (content: string) => boolean) => setMatch(() => m),
-    [],
+      [],
   );
   const handlePauseToggle = useCallback(() => {
     setIsPaused((prev) => {
@@ -147,6 +167,7 @@ const ConnectionsPage = () => {
           uploadTotal: connections.uploadTotal,
           downloadTotal: connections.downloadTotal,
           connections: connections.data,
+          data: connections.data,
         });
       } else {
         setFrozenData(null);
@@ -155,134 +176,138 @@ const ConnectionsPage = () => {
     });
   }, [connections]);
 
-  return (
+  const headerHeight = "7rem";
-    <div className="h-full w-full relative">
-      <div
-        className={cn(
-          "absolute top-0 left-0 right-0 z-10 p-4 transition-all duration-200",
-          { "bg-background/80 backdrop-blur-sm shadow-sm": isScrolled },
-        )}
-      >
-        <div className="flex justify-between items-center">
-          <div className="w-10">
-            <SidebarTrigger />
-          </div>
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {t("Connections")}
-          </h2>
-          <TooltipProvider delayDuration={100}>
-            <div className="flex items-center gap-2">
-              <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                <div className="flex items-center gap-1">
-                  <ArrowDown className="h-4 w-4 text-green-500" />
-                  {parseTraffic(displayData.downloadTotal)}
-                </div>
-                <div className="flex items-center gap-1">
-                  <ArrowUp className="h-4 w-4 text-sky-500" />
-                  {parseTraffic(displayData.uploadTotal)}
-                </div>
-              </div>
-              <Separator orientation="vertical" className="h-6 mx-2" />
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() =>
-                      setSetting((o) =>
-                        o?.layout !== "table"
-                          ? { ...o, layout: "table" }
-                          : { ...o, layout: "list" },
-                      )
-                    }
-                  >
-                    {isTableLayout ? (
-                      <List className="h-5 w-5" />
-                    ) : (
-                      <Table2 className="h-5 w-5" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{isTableLayout ? t("List View") : t("Table View")}</p>
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={handlePauseToggle}
-                  >
-                    {isPaused ? (
-                      <PlayCircle className="h-5 w-5" />
-                    ) : (
-                      <PauseCircle className="h-5 w-5" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{isPaused ? t("Resume") : t("Pause")}</p>
-                </TooltipContent>
-              </Tooltip>
-              <Button size="sm" variant="destructive" onClick={onCloseAll}>
-                {t("Close All")}
-              </Button>
-            </div>
-          </TooltipProvider>
-        </div>
-        <div className="flex items-center gap-2 mt-2">
-          {!isTableLayout && (
-            <Select
-              value={curOrderOpt}
-              onValueChange={(value) => setOrderOpt(value)}
-            >
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder={t("Sort by")} />
-              </SelectTrigger>
-              <SelectContent>
-                {Object.keys(orderOpts).map((opt) => (
-                  <SelectItem key={opt} value={opt}>
-                    {t(opt)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-          <div className="flex-1">
-            <BaseSearchBox onSearch={handleSearch} />
-          </div>
-        </div>
-      </div>
 
-      <div className="absolute top-0 left-0 right-0 bottom-0 pt-28">
+  return (
-        {filterConn.length === 0 ? (
+      <div className="relative h-full w-full">
-          <BaseEmpty />
+        <div
-        ) : isTableLayout ? (
+            className="absolute top-0 left-0 right-0 z-20 p-4 bg-background/80 backdrop-blur-sm"
-          <div className="p-4 pt-0 h-full w-full">
+            style={{ height: headerHeight }}
-            <ConnectionTable
+        >
-              connections={filterConn}
+          <div className="flex justify-between items-center">
-              onShowDetail={(detail) => detailRef.current?.open(detail)}
+            <div className="w-10">
-              scrollerRef={scrollerRefCallback}
+              <SidebarTrigger />
-            />
+            </div>
+            <h2 className="text-2xl font-semibold tracking-tight">
+              {t("Connections")}
+            </h2>
+            <TooltipProvider delayDuration={100}>
+              <div className="flex items-center gap-2">
+                <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                  <div className="flex items-center gap-1">
+                    <ArrowDown className="h-4 w-4 text-green-500" />
+                    {parseTraffic(displayData.downloadTotal)}
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <ArrowUp className="h-4 w-4 text-sky-500" />
+                    {parseTraffic(displayData.uploadTotal)}
+                  </div>
+                </div>
+                <Separator orientation="vertical" className="h-6 mx-2" />
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() =>
+                            setSetting((o) =>
+                                o?.layout !== "table"
+                                    ? { ...o, layout: "table" }
+                                    : { ...o, layout: "list" },
+                            )
+                        }
+                    >
+                      {isTableLayout ? (
+                          <List className="h-5 w-5" />
+                      ) : (
+                          <Table2 className="h-5 w-5" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{isTableLayout ? t("List View") : t("Table View")}</p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={handlePauseToggle}
+                    >
+                      {isPaused ? (
+                          <PlayCircle className="h-5 w-5" />
+                      ) : (
+                          <PauseCircle className="h-5 w-5" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{isPaused ? t("Resume") : t("Pause")}</p>
+                  </TooltipContent>
+                </Tooltip>
+                <Button size="sm" variant="destructive" onClick={onCloseAll}>
+                  {t("Close All")}
+                </Button>
+              </div>
+            </TooltipProvider>
           </div>
-        ) : (
+          <div className="flex items-center gap-2 mt-2">
-          <Virtuoso
+            {!isTableLayout && (
-            scrollerRef={scrollerRefCallback}
+                <Select
-            data={filterConn}
+                    value={curOrderOpt}
-            className="h-full w-full"
+                    onValueChange={(value) => setOrderOpt(value)}
-            itemContent={(_, item) => (
+                >
-              <ConnectionItem
+                  <SelectTrigger className="w-[180px]">
-                value={item}
+                    <SelectValue placeholder={t("Sort by")} />
-                onShowDetail={() => detailRef.current?.open(item)}
+                  </SelectTrigger>
-              />
+                  <SelectContent>
+                    {Object.keys(orderOpts).map((opt) => (
+                        <SelectItem key={opt} value={opt}>
+                          {t(opt)}
+                        </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
             )}
-          />
+            <div className="flex-1">
-        )}
+              <BaseSearchBox onSearch={handleSearch} />
-        <ConnectionDetail ref={detailRef} />
+            </div>
+          </div>
+        </div>
+
+        <div
+            ref={scrollerRefCallback}
+            className="absolute left-0 right-0 bottom-0 overflow-y-auto"
+            style={{ top: headerHeight }}
+        >
+          {filterConn.length === 0 ? (
+              <BaseEmpty />
+          ) : isTableLayout ? (
+              <div className="p-4 pt-0">
+                <ConnectionTable
+                    connections={filterConn}
+                    onShowDetail={(detail) => detailRef.current?.open(detail)}
+                    scrollerRef={scrollerRefCallback}
+                />
+              </div>
+          ) : (
+              <Virtuoso
+                  scrollerRef={scrollerRefCallback}
+                  data={filterConn}
+                  className="h-full w-full"
+                  itemContent={(_, item) => (
+                      <ConnectionItem
+                          value={item}
+                          onShowDetail={() => detailRef.current?.open(item)}
+                      />
+                  )}
+              />
+          )}
+          <ConnectionDetail ref={detailRef} />
+        </div>
       </div>
-    </div>
   );
 };
 
-export default ConnectionsPage;
+export default ConnectionsPage;

src/services/types.d.ts

@@ -154,7 +154,7 @@ interface IConnectionsItem {
   start: string;
   chains: string[];
   rule: string;
-  rulePayload: string;
+  rulePayload?: string;
   curUpload?: number; // upload speed, calculate at runtime
   curDownload?: number; // download speed, calculate at runtime
 }