small fixes

src/lib/components/modals/ProcessDetailsModal.svelte

@@ -13,12 +13,10 @@
   export let show = false;
   export let process: Process | null = null;
   export let onClose: () => void;
-
-  $: currentProcess = process;
 </script>
 
 <Modal {show} title="Process Details" maxWidth="700px" {onClose}>
-  {#if currentProcess}
+  {#if process}
     <div class="process-details">
       <!-- Basic Info Section -->
       <section class="detail-section">
@@ -26,23 +24,23 @@
         <div class="detail-grid">
           <div class="detail-row">
             <span class="detail-label">Name:</span>
-            <span class="detail-value">{currentProcess.name}</span>
+            <span class="detail-value">{process.name}</span>
           </div>
           <div class="detail-row">
             <span class="detail-label">PID:</span>
-            <span class="detail-value">{currentProcess.pid}</span>
+            <span class="detail-value">{process.pid}</span>
           </div>
           <div class="detail-row">
             <span class="detail-label">Parent PID:</span>
-            <span class="detail-value">{currentProcess.ppid}</span>
+            <span class="detail-value">{process.ppid}</span>
           </div>
           <div class="detail-row">
             <span class="detail-label">User:</span>
-            <span class="detail-value">{currentProcess.user}</span>
+            <span class="detail-value">{process.user}</span>
           </div>
           <div class="detail-row">
             <span class="detail-label">Status:</span>
-            <span class="detail-value">{currentProcess.status}</span>
+            <span class="detail-value">{process.status}</span>
           </div>
         </div>
       </section>
@@ -61,12 +59,12 @@
               <div class="progress-bar">
                 <div
                   class="progress-fill"
-                  style="width: {currentProcess.cpu_usage}%"
+                  style="width: {process.cpu_usage}%"
-                  class:high={currentProcess.cpu_usage > 50}
+                  class:high={process.cpu_usage > 50}
-                  class:critical={currentProcess.cpu_usage > 80}
+                  class:critical={process.cpu_usage > 80}
                 ></div>
               </div>
-              <span>{currentProcess.cpu_usage.toFixed(1)}%</span>
+              <span>{process.cpu_usage.toFixed(1)}%</span>
             </div>
           </div>
 
@@ -77,8 +75,8 @@
               <span>Memory Usage</span>
             </div>
             <div class="resource-stats">
-              <div>Physical: {formatBytes(currentProcess.memory_usage)}</div>
+              <div>Physical: {formatBytes(process.memory_usage)}</div>
-              <div>Virtual: {formatBytes(currentProcess.virtual_memory)}</div>
+              <div>Virtual: {formatBytes(process.virtual_memory)}</div>
             </div>
           </div>
 
@@ -89,8 +87,8 @@
               <span>Disk I/O</span>
             </div>
             <div class="resource-stats">
-              <div>Read: {formatBytes(currentProcess.disk_usage[0])}</div>
+              <div>Read: {formatBytes(process.disk_usage[0])}</div>
-              <div>Written: {formatBytes(currentProcess.disk_usage[1])}</div>
+              <div>Written: {formatBytes(process.disk_usage[1])}</div>
             </div>
           </div>
 
@@ -101,8 +99,8 @@
               <span>Time Information</span>
             </div>
             <div class="resource-stats">
-              <div>Started: {formatDate(currentProcess.start_time)}</div>
+              <div>Started: {formatDate(process.start_time)}</div>
-              <div>Running: {formatUptime(currentProcess.run_time)}</div>
+              <div>Running: {formatUptime(process.run_time)}</div>
             </div>
           </div>
         </div>
@@ -114,17 +112,17 @@
         <div class="detail-grid">
           <div class="detail-row full-width">
             <span class="detail-label">Command:</span>
-            <span class="detail-value command">{currentProcess.command}</span>
+            <span class="detail-value command">{process.command}</span>
           </div>
           <div class="detail-row full-width">
             <span class="detail-label">Root:</span>
-            <span class="detail-value path">{currentProcess.root}</span>
+            <span class="detail-value path">{process.root}</span>
           </div>
-          {#if currentProcess.environ.length > 0}
+          {#if process.environ.length > 0}
             <div class="detail-row full-width">
               <span class="detail-label">Environment:</span>
               <div class="detail-value env-vars">
-                {#each currentProcess.environ as env}
+                {#each process.environ as env}
                   <div class="env-var">{env}</div>
                 {/each}
               </div>

src/lib/stores/processes.ts

@@ -47,139 +47,171 @@ const initialState: ProcessStore = {
 function createProcessStore() {
   const { subscribe, set, update } = writable<ProcessStore>(initialState);
 
-  return {
+  // Define all methods first
-    subscribe,
+  const setIsLoading = (isLoading: boolean) =>
-    set,
+    update((state) => ({ ...state, isLoading }));
-    update,
 
-    setIsLoading: (isLoading: boolean) =>
+  const getProcesses = async () => {
-      update((state) => ({ ...state, isLoading })),
+    try {
+      const result = await invoke<[Process[], SystemStats]>("get_processes");
+      update((state) => {
+        let updatedSelectedProcess = state.selectedProcess;
+        if (state.selectedProcessPid) {
+          updatedSelectedProcess =
+            result[0].find((p) => p.pid === state.selectedProcessPid) || null;
+        }
 
-    async getProcesses() {
+        return {
-      try {
-        const result = await invoke<[Process[], SystemStats]>("get_processes");
-        update((state) => ({
           ...state,
           processes: result[0],
           systemStats: result[1],
           error: null,
-        }));
+          selectedProcess: updatedSelectedProcess,
-      } catch (e: unknown) {
+        };
-        update((state) => ({
-          ...state,
-          error: e instanceof Error ? e.message : String(e),
-        }));
-      }
-    },
-
-    async killProcess(pid: number) {
-      try {
-        const success = await invoke<boolean>("kill_process", { pid });
-        if (success) {
-          await this.getProcesses();
-        }
-      } catch (e: unknown) {
-        update((state) => ({
-          ...state,
-          error: e instanceof Error ? e.message : String(e),
-        }));
-      }
-    },
-
-    toggleSort(field: keyof Process) {
-      update((state) => ({
-        ...state,
-        sortConfig: {
-          field,
-          direction:
-            state.sortConfig.field === field
-              ? state.sortConfig.direction === "asc"
-                ? "desc"
-                : "asc"
-              : "desc",
-        },
-      }));
-    },
-
-    togglePin(command: string) {
-      update((state) => {
-        const newPinnedProcesses = new Set(state.pinnedProcesses);
-        if (newPinnedProcesses.has(command)) {
-          newPinnedProcesses.delete(command);
-        } else {
-          newPinnedProcesses.add(command);
-        }
-        return { ...state, pinnedProcesses: newPinnedProcesses };
       });
-    },
+    } catch (e: unknown) {
-
-    setSearchTerm: (searchTerm: string) =>
-      update((state) => ({ ...state, searchTerm, currentPage: 1 })),
-    setIsFrozen: (isFrozen: boolean) =>
-      update((state) => ({ ...state, isFrozen })),
-    setCurrentPage: (currentPage: number) =>
-      update((state) => ({ ...state, currentPage })),
-
-    showProcessDetails(process: Process) {
       update((state) => ({
         ...state,
-        selectedProcessPid: process.pid,
+        error: e instanceof Error ? e.message : String(e),
-        selectedProcess: process,
-        showInfoModal: true,
       }));
-    },
+    }
+  };
 
-    closeProcessDetails() {
+  const killProcess = async (pid: number) => {
+    try {
+      update((state) => ({ ...state, isKilling: true }));
+      const success = await invoke<boolean>("kill_process", { pid });
+      if (success) {
+        await getProcesses();
+      } else {
+        throw new Error("Failed to kill process");
+      }
+    } catch (e: unknown) {
       update((state) => ({
         ...state,
-        showInfoModal: false,
+        error: e instanceof Error ? e.message : String(e),
-        selectedProcess: null,
-        selectedProcessPid: null,
       }));
-    },
+    } finally {
+      update((state) => ({ ...state, isKilling: false }));
+    }
+  };
 
-    confirmKillProcess(process: Process) {
+  const toggleSort = (field: keyof Process) => {
-      update((state) => ({
+    update((state) => ({
-        ...state,
+      ...state,
-        processToKill: process,
+      sortConfig: {
-        showConfirmModal: true,
+        field,
-      }));
+        direction:
-    },
+          state.sortConfig.field === field
+            ? state.sortConfig.direction === "asc"
+              ? "desc"
+              : "asc"
+            : "desc",
+      },
+    }));
+  };
 
-    closeConfirmKill() {
+  const togglePin = (command: string) => {
+    update((state) => {
+      const newPinnedProcesses = new Set(state.pinnedProcesses);
+      if (newPinnedProcesses.has(command)) {
+        newPinnedProcesses.delete(command);
+      } else {
+        newPinnedProcesses.add(command);
+      }
+      return { ...state, pinnedProcesses: newPinnedProcesses };
+    });
+  };
+
+  const setSearchTerm = (searchTerm: string) =>
+    update((state) => ({ ...state, searchTerm, currentPage: 1 }));
+
+  const setIsFrozen = (isFrozen: boolean) =>
+    update((state) => ({ ...state, isFrozen }));
+
+  const setCurrentPage = (currentPage: number) =>
+    update((state) => ({ ...state, currentPage }));
+
+  const showProcessDetails = (process: Process) => {
+    update((state) => ({
+      ...state,
+      selectedProcessPid: process.pid,
+      selectedProcess: process,
+      showInfoModal: true,
+    }));
+  };
+
+  const closeProcessDetails = () => {
+    update((state) => ({
+      ...state,
+      showInfoModal: false,
+      selectedProcess: null,
+      selectedProcessPid: null,
+    }));
+  };
+
+  const confirmKillProcess = (process: Process) => {
+    update((state) => ({
+      ...state,
+      processToKill: process,
+      showConfirmModal: true,
+    }));
+  };
+
+  const closeConfirmKill = () => {
+    update((state) => ({
+      ...state,
+      showConfirmModal: false,
+      processToKill: null,
+    }));
+  };
+
+  const handleConfirmKill = async () => {
+    let processToKill: Process | null = null;
+
+    let currentState: ProcessStore | undefined;
+    const unsubscribe = subscribe((state) => {
+      currentState = state;
+    });
+    unsubscribe();
+
+    if (currentState?.processToKill && "pid" in currentState.processToKill) {
+      processToKill = currentState.processToKill;
+    }
+
+    if (!processToKill?.pid) {
+      return;
+    }
+
+    try {
+      await killProcess(processToKill.pid);
+    } finally {
       update((state) => ({
         ...state,
         showConfirmModal: false,
         processToKill: null,
       }));
-    },
+    }
+  };
 
-    async handleConfirmKill() {
+  // Return all methods
-      update((state) => ({ ...state, isKilling: true }));
+  return {
-
+    subscribe,
-      try {
+    set,
-        const pid = this.getState().processToKill?.pid;
+    update,
-        if (pid) {
+    setIsLoading,
-          await this.killProcess(pid);
+    getProcesses,
-        }
+    killProcess,
-      } finally {
+    toggleSort,
-        update((state) => ({
+    togglePin,
-          ...state,
+    setSearchTerm,
-          isKilling: false,
+    setIsFrozen,
-          showConfirmModal: false,
+    setCurrentPage,
-          processToKill: null,
+    showProcessDetails,
-        }));
+    closeProcessDetails,
-      }
+    confirmKillProcess,
-    },
+    closeConfirmKill,
-
+    handleConfirmKill,
-    // Helper to get current state
-    getState() {
-      let currentState: ProcessStore | undefined;
-      subscribe((state) => {
-        currentState = state;
-      })();
-      return currentState!;
-    },
   };
 }
 

src/lib/utils/index.ts

@@ -121,19 +121,16 @@ export function sortProcesses(
   sortConfig: SortConfig,
   pinnedProcesses: Set<string>,
 ): Process[] {
+  // Clear the cache before sorting
+  isPinned.clear();
+
   return [...processes].sort((a, b) => {
     // Cache pinned status
-    let aPin = isPinned.get(a.command);
+    let aPin = pinnedProcesses.has(a.command);
-    if (aPin === undefined) {
+    isPinned.set(a.command, aPin);
-      aPin = pinnedProcesses.has(a.command);
-      isPinned.set(a.command, aPin);
-    }
 
-    let bPin = isPinned.get(b.command);
+    let bPin = pinnedProcesses.has(b.command);
-    if (bPin === undefined) {
+    isPinned.set(b.command, bPin);
-      bPin = pinnedProcesses.has(b.command);
-      isPinned.set(b.command, bPin);
-    }
 
     // Quick pin comparison
     if (aPin !== bPin) {