From 0358fc7101fb6f551ff5ffd9f7be8f4a9788a40d Mon Sep 17 00:00:00 2001
From: shm <m11c3.sh@gmail.com>
Date: Tue, 31 Dec 2024 18:26:17 +0900
Subject: [PATCH] Add: Network Info Table

---
 package-lock.json               |  62 +++++++++++
 package.json                    |   1 +
 src/components/ui/accordion.tsx |  58 +++++++++++
 src/i18n/en.json                |   1 +
 src/i18n/ja.json                |   1 +
 src/template/Dashboard.tsx      | 177 ++++++++++++++++++++++++--------
 6 files changed, 259 insertions(+), 41 deletions(-)
 create mode 100644 src/components/ui/accordion.tsx

diff --git a/package-lock.json b/package-lock.json
index 054bf55..c87d591 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@hookform/resolvers": "^3.9.1",
         "@phosphor-icons/react": "^2.1.7",
+        "@radix-ui/react-accordion": "^1.2.2",
         "@radix-ui/react-checkbox": "^1.1.3",
         "@radix-ui/react-dialog": "^1.1.3",
         "@radix-ui/react-label": "^2.1.1",
@@ -1117,6 +1118,37 @@
       "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.2.tgz",
+      "integrity": "sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collapsible": "1.1.2",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz",
@@ -1170,6 +1202,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.2.tgz",
+      "integrity": "sha512-PliMB63vxz7vggcyq0IxNYk8vGDrLXVWw4+W4B8YnwI1s18x7YZYqlG9PLX7XxAJUi0g2DxP4XKJMFHh/iVh9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz",
diff --git a/package.json b/package.json
index aa12429..084606b 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-label": "^2.1.1",
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..14142a8
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:opacity-60 [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-6 w-6 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1db2d38..af38f64 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -20,6 +20,7 @@
     "process": "Process",
     "reset": "Reset",
     "storage": "Storage",
+    "network": "Network",
     "driveName": "Drive Name",
     "driveType": "Drive Type",
     "driveTotalSpace": "Drive Total Space",
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
index 61b7deb..d3cde45 100644
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@@ -20,6 +20,7 @@
     "process": "プロセス",
     "reset": "リセット",
     "storage": "ストレージ",
+    "network": "ネットワーク",
     "driveName": "ドライブ名",
     "driveType": "ドライブタイプ",
     "driveTotalSpace": "ドライブ容量",
diff --git a/src/template/Dashboard.tsx b/src/template/Dashboard.tsx
index d41ed0a..360cddc 100644
--- a/src/template/Dashboard.tsx
+++ b/src/template/Dashboard.tsx
@@ -12,6 +12,12 @@ import {
 } from "@/components/charts/Bar";
 import { DoughnutChart } from "@/components/charts/DoughnutChart";
 import { ProcessesTable } from "@/components/charts/ProcessTable";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { minOpacity } from "@/consts";
 import type { StorageInfo } from "@/rspc/bindings";
 import type { NameValues } from "@/types/hardwareDataType";
@@ -226,7 +232,8 @@ const StorageDataInfo = () => {
 };
 
 const NetworkInfo = () => {
-  const { t } = useTranslation();
+  //const { t } = useTranslation();
+  const { settings } = useSettingsAtom();
   const { networkInfo, initNetwork } = useHardwareInfoAtom();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -238,26 +245,112 @@ const NetworkInfo = () => {
     <>
       {networkInfo.map((network) => {
         return (
-          <div key={network.description} className="mt-4">
-            <InfoTable
-              data={{
-                description: network.description ?? "",
-                mac_address: network.macAddress ?? "",
-                ipv4: network.ipV4.join(", "),
-                ipv6: network.ipV6.join(", "),
-                linkLocalIpV6: network.linkLocalIpV6.join(", "),
-                ip_subnet: network.ipSubnet.join(", "),
-                gatewayV4: network.defaultIpv4Gateway.join(", "),
-                gatewayV6: network.defaultIpv6Gateway.join(", "),
+          <>
+            <div
+              key={network.description}
+              className="mt-4 mb-2 px-4 pt-2 pb-2 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-white"
+              style={{
+                opacity:
+                  settings.selectedBackgroundImg != null
+                    ? Math.max(
+                        (1 - settings.backgroundImgOpacity / 100) ** 2,
+                        minOpacity,
+                      )
+                    : 1,
               }}
-            />
-          </div>
+            >
+              <Accordion type="single" collapsible className="w-full">
+                <AccordionItem value="item-1" className="border-none">
+                  <AccordionTrigger>
+                    <div className="w-full flex items-center justify-between">
+                      <p>{network.description ?? "No description"}</p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400 mr-2 w-24 text-left ">
+                        {network.ipV4[0] ?? "No IP Address"}
+                      </p>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <table className="w-full text-left text-base">
+                      <tbody>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">
+                            MAC Address
+                          </th>
+                          <td className="py-2">
+                            {network.macAddress ?? "No MAC Address"}
+                          </td>
+                        </tr>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">IPv4</th>
+                          <td className="py-2">
+                            {network.ipV4.map((ip) => (
+                              <p key={ip}>{ip}</p>
+                            ))}
+                          </td>
+                        </tr>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">
+                            IPv4 Subnet Mask
+                          </th>
+                          <td className="py-2">
+                            {network.ipSubnet.map((subnet) => (
+                              <p key={subnet}>{subnet}</p>
+                            ))}
+                          </td>
+                        </tr>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">
+                            IPv4 Gateway
+                          </th>
+                          <td className="py-2">
+                            {network.defaultIpv4Gateway.map((gateway) => (
+                              <p key={gateway}>{gateway}</p>
+                            ))}
+                          </td>
+                        </tr>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">IPv6</th>
+                          <td className="py-2">
+                            {network.ipV6.map((ip) => (
+                              <p key={ip}>{ip}</p>
+                            ))}
+                          </td>
+                        </tr>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">
+                            Link Local IPv6
+                          </th>
+                          <td className="py-2">
+                            {network.linkLocalIpV6.map((ip) => (
+                              <p key={ip}>{ip}</p>
+                            ))}
+                          </td>
+                        </tr>
+                        <tr className="border-b border-gray-700">
+                          <th className="pr-4 py-2 dark:text-gray-400">
+                            IPv6 Gateway
+                          </th>
+                          <td className="py-2">
+                            {network.defaultIpv6Gateway.map((gateway) => (
+                              <p key={gateway}>{gateway}</p>
+                            ))}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          </>
         );
       })}
     </>
   );
 };
 
+type DataTypeKey = "cpu" | "memory" | "storage" | "gpu" | "network" | "process";
+
 const Dashboard = () => {
   const { hardwareInfo } = useHardwareInfoAtom();
   const { init } = useHardwareInfoAtom();
@@ -268,34 +361,36 @@ const Dashboard = () => {
     init();
   }, []);
 
-  const hardwareInfoListLeft: { key: string; component: JSX.Element }[] = [
-    hardwareInfo.cpu && { key: "cpuInfo", component: <CPUInfo /> },
-    hardwareInfo.memory && { key: "memoryInfo", component: <MemoryInfo /> },
-    hardwareInfo.storage && hardwareInfo.storage.length > 0
-      ? {
-          key: "storageInfo",
-          component: <StorageDataInfo />,
-        }
-      : undefined,
-  ].filter((x) => x != null);
-
-  const hardwareInfoListRight: { key: string; component: JSX.Element }[] = [
-    hardwareInfo.gpus && { key: "gpuInfo", component: <GPUInfo /> },
-    {
-      key: "processesTable",
-      component: <ProcessesTable />,
+  const hardwareInfoListLeft: { key: DataTypeKey; component: JSX.Element }[] = [
+    hardwareInfo.cpu && { key: "cpu", component: <CPUInfo /> },
+    hardwareInfo.memory && { key: "memory", component: <MemoryInfo /> },
+    hardwareInfo.storage.length > 0 && {
+      key: "storage",
+      component: <StorageDataInfo />,
     },
-    {
-      key: "networkInfo",
-      component: <NetworkInfo />,
-    },
-  ].filter((x) => x != null);
+  ].filter((x): x is { key: DataTypeKey; component: JSX.Element } => x != null);
+
+  const hardwareInfoListRight: { key: DataTypeKey; component: JSX.Element }[] =
+    [
+      hardwareInfo.gpus && { key: "gpu", component: <GPUInfo /> },
+      {
+        key: "process",
+        component: <ProcessesTable />,
+      },
+      {
+        key: "network",
+        component: <NetworkInfo />,
+      },
+    ].filter(
+      (x): x is { key: DataTypeKey; component: JSX.Element } => x != null,
+    );
 
-  const dataAreaKey2Title: Record<string, string> = {
-    cpuInfo: "CPU",
-    memoryInfo: "RAM",
-    storageInfo: t("shared.storage"),
-    gpuInfo: "GPU",
+  const dataAreaKey2Title: Partial<Record<DataTypeKey, string>> = {
+    cpu: "CPU",
+    memory: "RAM",
+    storage: t("shared.storage"),
+    gpu: "GPU",
+    network: t("shared.network"),
   };
 
   return (
@@ -312,7 +407,7 @@ const Dashboard = () => {
           <DataArea
             key={key}
             title={dataAreaKey2Title[key]}
-            border={key !== "processesTable"}
+            border={key !== "process"}
           >
             {component}
           </DataArea>