feat: show connections with table layout

src/services/states.ts

@@ -21,14 +21,45 @@ export const atomEnableLog = atom<boolean>({
     ({ setSelf, onSet }) => {
       const key = "enable-log";
 
-      setSelf(localStorage.getItem(key) !== "false");
+      try {
+        setSelf(localStorage.getItem(key) !== "false");
+      } catch {}
 
       onSet((newValue, _, isReset) => {
-        if (isReset) {
-          localStorage.removeItem(key);
-        } else {
-          localStorage.setItem(key, newValue.toString());
-        }
+        try {
+          if (isReset) {
+            localStorage.removeItem(key);
+          } else {
+            localStorage.setItem(key, newValue.toString());
+          }
+        } catch {}
+      });
+    },
+  ],
+});
+
+interface IConnectionSetting {
+  layout: "table" | "list";
+}
+
+export const atomConnectionSetting = atom<IConnectionSetting>({
+  key: "atomConnectionSetting",
+  effects: [
+    ({ setSelf, onSet }) => {
+      const key = "connections-setting";
+
+      try {
+        const value = localStorage.getItem(key);
+        const data = value == null ? { layout: "list" } : JSON.parse(value);
+        setSelf(data);
+      } catch {
+        setSelf({ layout: "list" });
+      }
+
+      onSet((newValue) => {
+        try {
+          localStorage.setItem(key, JSON.stringify(newValue));
+        } catch {}
       });
     },
   ],

src/services/types.d.ts

@@ -68,6 +68,7 @@ declare namespace ApiType {
       destinationPort: string;
       destinationIP?: string;
       process?: string;
+      processPath?: string;
     };
     upload: number;
     download: number;