refactor: format code with prettier and fix quotation marks

src/pages/connections.tsx

@@ -22,9 +22,7 @@ import {
   ConnectionDetail,
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
-import {
-  BaseSearchBox,
-} from "@/components/base/base-search-box";
+import { BaseSearchBox } from "@/components/base/base-search-box";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -50,7 +48,7 @@ import {
   ArrowDown,
   ArrowUp,
 } from "lucide-react";
-import {SidebarTrigger} from "@/components/ui/sidebar";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 
 interface IConnectionsItem {
   id: string;
@@ -91,14 +89,15 @@ const ConnectionsPage = () => {
 
   const orderOpts: Record<string, OrderFunc> = {
     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 ?? 0) - (a.curUpload ?? 0)),
+      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 ?? 0) - (a.curUpload ?? 0)),
     "Download Speed": (list) =>
-        list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
+      list.sort((a, b) => (b.curDownload ?? 0) - (a.curDownload ?? 0)),
   };
 
   const [isPaused, setIsPaused] = useState(false);
@@ -121,7 +120,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);
@@ -129,24 +128,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) => {
-        setScrollingElement(node);
-      },
-      [],
+    (node: HTMLElement | Window | null) => {
+      setScrollingElement(node);
+    },
+    [],
   );
 
   useEffect(() => {
     if (!scrollingElement) return;
     const handleScroll = () => {
       const scrollTop =
-          scrollingElement instanceof Window
-              ? scrollingElement.scrollY
-              : scrollingElement.scrollTop;
+        scrollingElement instanceof Window
+          ? scrollingElement.scrollY
+          : scrollingElement.scrollTop;
       setIsScrolled(scrollTop > 5);
     };
 
@@ -157,8 +156,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) => {
@@ -179,135 +178,135 @@ const ConnectionsPage = () => {
   const headerHeight = "7rem";
 
   return (
-      <div className="relative h-full w-full">
-        <div
-            className="absolute top-0 left-0 right-0 z-20 p-4 bg-background/80 backdrop-blur-sm"
-            style={{ height: headerHeight }}
-        >
-          <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 className="relative h-full w-full">
+      <div
+        className="absolute top-0 left-0 right-0 z-20 p-4 bg-background/80 backdrop-blur-sm"
+        style={{ height: headerHeight }}
+      >
+        <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>
-                <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} />
+              <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>
-          </div>
+          </TooltipProvider>
         </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)}
-                      />
-                  )}
-              />
+        <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>
           )}
-          <ConnectionDetail ref={detailRef} />
+          <div className="flex-1">
+            <BaseSearchBox onSearch={handleSearch} />
+          </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>
   );
 };
 
-export default ConnectionsPage;
+export default ConnectionsPage;