code formatting with prettier

2025-07-14 05:23:32 +03:00
parent eb1e4fe0c3
commit 5cdc5075f8
58 changed files with 5163 additions and 1846 deletions
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -1,4 +1,10 @@
-import React, { useMemo, useRef, useState, useCallback, useEffect } from "react";
+import React, {
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
 import { useLockFn } from "ahooks";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
@@ -14,16 +20,48 @@ import { cn } from "@root/lib/utils";
 import { BaseEmpty } from "@/components/base";
 import { ConnectionItem } from "@/components/connection/connection-item";
 import { ConnectionTable } from "@/components/connection/connection-table";
-import { ConnectionDetail, ConnectionDetailRef } from "@/components/connection/connection-detail";
-import { BaseSearchBox, type SearchState } from "@/components/base/base-search-box";
+import {
+  ConnectionDetail,
+  ConnectionDetailRef,
+} from "@/components/connection/connection-detail";
+import {
+  BaseSearchBox,
+  type SearchState,
+} from "@/components/base/base-search-box";
 import { Button } from "@/components/ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";

 // Иконки
-import { List, Table2, PlayCircle, PauseCircle, ArrowDown, ArrowUp, Menu } from "lucide-react";
+import {
+  List,
+  Table2,
+  PlayCircle,
+  PauseCircle,
+  ArrowDown,
+  ArrowUp,
+  Menu,
+} from "lucide-react";

 const initConn: IConnections = {
  uploadTotal: 0,
@@ -44,9 +82,15 @@ const ConnectionsPage = () => {
  const isTableLayout = setting.layout === "table";

  const orderOpts: Record<string, OrderFunc> = {
-    Default: (list) => list.sort((a, b) => new Date(b.start || "0").getTime()! - new Date(a.start || "0").getTime()!),
+    Default: (list) =>
+      list.sort(
+        (a, b) =>
+          new Date(b.start || "0").getTime()! -
+          new Date(a.start || "0").getTime()!,
+      ),
    "Upload Speed": (list) => list.sort((a, b) => b.curUpload! - a.curUpload!),
-    "Download Speed": (list) => list.sort((a, b) => b.curDownload! - a.curDownload!),
+    "Download Speed": (list) =>
+      list.sort((a, b) => b.curDownload! - a.curDownload!),
  };

  const [isPaused, setIsPaused] = useState(false);
@@ -54,7 +98,11 @@ const ConnectionsPage = () => {

  const displayData = useMemo(() => {
    if (!pageVisible) return initConn;
-    const currentData = { uploadTotal: connections.uploadTotal, downloadTotal: connections.downloadTotal, connections: connections.data };
+    const currentData = {
+      uploadTotal: connections.uploadTotal,
+      downloadTotal: connections.downloadTotal,
+      connections: connections.data,
+    };
    if (isPaused) return frozenData ?? currentData;
    return currentData;
  }, [isPaused, frozenData, connections, pageVisible]);
@@ -63,37 +111,54 @@ const ConnectionsPage = () => {
    const orderFunc = orderOpts[curOrderOpt];
    let conns = displayData.connections.filter((conn) => {
      const { host, destinationIP, process } = conn.metadata;
-      return match(host || "") || match(destinationIP || "") || match(process || "");
+      return (
+        match(host || "") || match(destinationIP || "") || match(process || "")
+      );
    });
    if (orderFunc) conns = orderFunc(conns);
    return conns;
  }, [displayData, match, curOrderOpt]);

-  const [scrollingElement, setScrollingElement] = useState<HTMLElement | Window | null>(null);
+  const [scrollingElement, setScrollingElement] = useState<
+    HTMLElement | Window | null
+  >(null);
  const [isScrolled, setIsScrolled] = useState(false);

-  const scrollerRefCallback = useCallback((node: HTMLElement | Window | null) => {
-    setScrollingElement(node);
-  }, []);
+  const scrollerRefCallback = useCallback(
+    (node: HTMLElement | Window | null) => {
+      setScrollingElement(node);
+    },
+    [],
+  );

  useEffect(() => {
    if (!scrollingElement) return;
    const handleScroll = () => {
-      const scrollTop = scrollingElement instanceof Window ? scrollingElement.scrollY : scrollingElement.scrollTop;
+      const scrollTop =
+        scrollingElement instanceof Window
+          ? scrollingElement.scrollY
+          : scrollingElement.scrollTop;
      setIsScrolled(scrollTop > 5);
    };

-    scrollingElement.addEventListener('scroll', handleScroll);
-    return () => scrollingElement.removeEventListener('scroll', handleScroll);
+    scrollingElement.addEventListener("scroll", handleScroll);
+    return () => scrollingElement.removeEventListener("scroll", handleScroll);
  }, [scrollingElement]);

  const onCloseAll = useLockFn(closeAllConnections);
  const detailRef = useRef<ConnectionDetailRef>(null!);
-  const handleSearch = useCallback((m: (content: string) => boolean) => setMatch(() => m), []);
+  const handleSearch = useCallback(
+    (m: (content: string) => boolean) => setMatch(() => m),
+    [],
+  );
  const handlePauseToggle = useCallback(() => {
    setIsPaused((prev) => {
      if (!prev) {
-        setFrozenData({ uploadTotal: connections.uploadTotal, downloadTotal: connections.downloadTotal, connections: connections.data });
+        setFrozenData({
+          uploadTotal: connections.uploadTotal,
+          downloadTotal: connections.downloadTotal,
+          connections: connections.data,
+        });
      } else {
        setFrozenData(null);
      }
@@ -112,41 +177,118 @@ const ConnectionsPage = () => {

  return (
    <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={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">
-          <h2 className="text-2xl font-semibold tracking-tight">{t("Connections")}</h2>
+          <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 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>
-                <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>
-                <DropdownMenu>
-                <DropdownMenuTrigger asChild><Button variant="ghost" size="icon" title={t("Menu")}><Menu className="h-5 w-5" /></Button></DropdownMenuTrigger>
+                <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>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" title={t("Menu")}>
+                    <Menu className="h-5 w-5" />
+                  </Button>
+                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>{t("Menu")}</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    {menuItems.map((item) => (<DropdownMenuItem key={item.path} onSelect={() => navigate(item.path)} disabled={location.pathname === item.path}>{item.label}</DropdownMenuItem>))}
+                  <DropdownMenuLabel>{t("Menu")}</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  {menuItems.map((item) => (
+                    <DropdownMenuItem
+                      key={item.path}
+                      onSelect={() => navigate(item.path)}
+                      disabled={location.pathname === item.path}
+                    >
+                      {item.label}
+                    </DropdownMenuItem>
+                  ))}
                </DropdownMenuContent>
-                </DropdownMenu>
+              </DropdownMenu>
            </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
+              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 className="flex-1">
+            <BaseSearchBox onSearch={handleSearch} />
+          </div>
        </div>
      </div>

@@ -156,9 +298,9 @@ const ConnectionsPage = () => {
        ) : isTableLayout ? (
          <div className="p-4 pt-0 h-full w-full">
            <ConnectionTable
-                connections={filterConn}
-                onShowDetail={(detail) => detailRef.current?.open(detail)}
-                scrollerRef={scrollerRefCallback}
+              connections={filterConn}
+              onShowDetail={(detail) => detailRef.current?.open(detail)}
+              scrollerRef={scrollerRefCallback}
            />
          </div>
        ) : (
@@ -166,7 +308,12 @@ const ConnectionsPage = () => {
            scrollerRef={scrollerRefCallback}
            data={filterConn}
            className="h-full w-full"
-            itemContent={(_, item) => <ConnectionItem value={item} onShowDetail={() => detailRef.current?.open(item)} />}
+            itemContent={(_, item) => (
+              <ConnectionItem
+                value={item}
+                onShowDetail={() => detailRef.current?.open(item)}
+              />
+            )}
          />
        )}
        <ConnectionDetail ref={detailRef} />