From 5634a8d3558716b2a8858b446d36ab5876bb2996 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Sat, 9 Nov 2024 20:22:05 +0100
Subject: [PATCH] persistent config between sessions"

---
 package-lock.json                 |  4 ++--
 src/lib/components/ToolBar.svelte | 38 +++++++++++++++++++++++++++++--
 src/lib/stores/config.ts          | 36 +++++++++++++++++++++++++++++
 src/lib/types/config.ts           | 37 ++++++++++++++++++++++++++++++
 src/routes/+page.svelte           | 18 +++++++++++----
 vite.config.js                    |  1 -
 6 files changed, 125 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/stores/config.ts
 create mode 100644 src/lib/types/config.ts

diff --git a/package-lock.json b/package-lock.json
index cabd2f6..0bc1c33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "macos-task-manager",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "macos-task-manager",
-      "version": "1.0.5",
+      "version": "1.0.8",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/ToolBar.svelte
index 8238b54..80c16ff 100644
--- a/src/lib/components/ToolBar.svelte
+++ b/src/lib/components/ToolBar.svelte
@@ -8,6 +8,8 @@
     faChevronDown,
     faChevronRight,
   } from "@fortawesome/free-solid-svg-icons";
+  import { configStore } from "$lib/stores/config";
+  import type { AppConfig } from "$lib/types/config";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -46,6 +48,26 @@
       currentPage = page;
     }
   }
+
+  function handleColumnVisibilityChange(columnId: string, visible: boolean) {
+    configStore.updateConfig({
+      appearance: {
+        columnVisibility: {
+          ...$configStore.appearance.columnVisibility,
+          [columnId]: visible,
+        },
+      },
+    });
+  }
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
 </script>
 
 <div class="toolbar">
@@ -66,7 +88,12 @@
       </div>
     </div>
     <div class="toolbar-group">
-      <select bind:value={statusFilter} class="select-input">
+      <select
+        bind:value={statusFilter}
+        on:change={() =>
+          updateBehaviorConfig("defaultStatusFilter", statusFilter)}
+        class="select-input"
+      >
         {#each statusOptions as option}
           <option value={option.value}>{option.label}</option>
         {/each}
@@ -79,6 +106,7 @@
       <select
         class="select-input"
         bind:value={itemsPerPage}
+        on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
         aria-label="Items per page"
       >
         {#each itemsPerPageOptions as option}
@@ -146,8 +174,13 @@
             <label class="column-option">
               <input
                 type="checkbox"
-                bind:checked={column.visible}
+                checked={column.visible}
                 disabled={column.required}
+                on:change={(e) =>
+                  handleColumnVisibilityChange(
+                    column.id,
+                    e.currentTarget.checked,
+                  )}
               />
               <span>{column.label}</span>
             </label>
@@ -161,6 +194,7 @@
         <select
           class="select-input"
           bind:value={refreshRate}
+          on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
           disabled={isFrozen}
         >
           {#each refreshRateOptions as option}
diff --git a/src/lib/stores/config.ts b/src/lib/stores/config.ts
new file mode 100644
index 0000000..abb0ed2
--- /dev/null
+++ b/src/lib/stores/config.ts
@@ -0,0 +1,36 @@
+import { writable } from 'svelte/store';
+import type { AppConfig } from '$lib/types/config';
+import { DEFAULT_CONFIG } from '$lib/types/config';
+
+function createConfigStore() {
+  const { subscribe, set, update } = writable<AppConfig>(DEFAULT_CONFIG);
+
+  return {
+    subscribe,
+    init: () => {
+      if (typeof window !== 'undefined') {
+        const stored = localStorage.getItem('neohtop_config');
+        if (stored) {
+          try {
+            const config = JSON.parse(stored);
+            set({ ...DEFAULT_CONFIG, ...config });
+          } catch (e) {
+            console.error('Failed to parse stored config:', e);
+            set(DEFAULT_CONFIG);
+          }
+        }
+      }
+    },
+    updateConfig: (newConfig: Partial<AppConfig>) => {
+      update(config => {
+        const updated = { ...config, ...newConfig };
+        if (typeof window !== 'undefined') {
+          localStorage.setItem('neohtop_config', JSON.stringify(updated));
+        }
+        return updated;
+      });
+    }
+  };
+}
+
+export const configStore = createConfigStore(); 
\ No newline at end of file
diff --git a/src/lib/types/config.ts b/src/lib/types/config.ts
new file mode 100644
index 0000000..366d190
--- /dev/null
+++ b/src/lib/types/config.ts
@@ -0,0 +1,37 @@
+export interface AppConfig {
+  appearance: {
+    columnVisibility: Record<string, boolean>;
+  };
+  behavior: {
+    itemsPerPage: number;
+    refreshRate: number;
+    defaultStatusFilter: string;
+  };
+}
+
+export const DEFAULT_CONFIG: AppConfig = {
+  appearance: {
+    columnVisibility: {
+      name: true,
+      pid: true,
+      status: true,
+      user: true,
+      cpu_usage: true,
+      memory_usage: true,
+      virtual_memory: true,
+      disk_usage: true,
+      ppid: false,
+      root: false,
+      command: false,
+      environ: false,
+      session_id: false,
+      start_time: false,
+      run_time: true
+    }
+  },
+  behavior: {
+    itemsPerPage: 15,
+    refreshRate: 1000,
+    defaultStatusFilter: 'all'
+  }
+}; 
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2d1181a..4ead24f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
   import { themeStore } from "$lib/stores";
   import type { Process, SystemStats, Column } from "$lib/types";
   import TitleBar from "$lib/components/TitleBar.svelte";
+  import { configStore } from "$lib/stores/config";
 
   let processes: Process[] = [];
   let systemStats: SystemStats | null = null;
@@ -18,19 +19,16 @@
   let searchTerm = "";
   let isLoading = true;
   let currentPage = 1;
-  let itemsPerPage = 15;
   let pinnedProcesses: Set<string> = new Set();
   let selectedProcess: Process | null = null;
   let showInfoModal = false;
   let showConfirmModal = false;
   let processToKill: Process | null = null;
   let isKilling = false;
-  let statusFilter = "all";
-  let refreshRate = 1000;
   let isFrozen = false;
   let selectedProcessPid: number | null = null;
 
-  let columns: Column[] = [
+  let columnDefinitions: Column[] = [
     { id: "name", label: "Process Name", visible: true, required: true },
     { id: "pid", label: "PID", visible: true, required: false },
     {
@@ -90,6 +88,17 @@
     },
   ];
 
+  // Merge column definitions with stored visibility
+  $: columns = columnDefinitions.map((col) => ({
+    ...col,
+    visible:
+      col.required ||
+      ($configStore.appearance.columnVisibility[col.id] ?? col.visible),
+  }));
+  $: itemsPerPage = $configStore.behavior.itemsPerPage;
+  $: refreshRate = $configStore.behavior.refreshRate;
+  $: statusFilter = $configStore.behavior.defaultStatusFilter;
+
   let sortConfig = {
     field: "cpu_usage" as keyof Process,
     direction: "desc" as "asc" | "desc",
@@ -262,6 +271,7 @@
       isLoading = false;
     }
 
+    configStore.init();
     themeStore.init();
   });
 
diff --git a/vite.config.js b/vite.config.js
index b7b0090..197b87c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 
-// @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/