Merge branch 'main' into resizable-columns

src/lib/components/ProcessTable.svelte

@@ -13,10 +13,10 @@
   export let columns: Column[];
   export let systemStats: { memory_total: number } | null;
   export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
-  export let pinnedProcesses: Set<number>;
+  export let pinnedProcesses: Set<string>;
 
   export let onToggleSort: (field: keyof Process) => void;
-  export let onTogglePin: (pid: number) => void;
+  export let onTogglePin: (command: string) => void;
   export let onShowDetails: (process: Process) => void;
   export let onKillProcess: (process: Process) => void;
 
@@ -212,7 +212,7 @@
         <tr
           class:high-usage={process.cpu_usage > 50 ||
             process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
-          class:pinned={pinnedProcesses.has(process.pid)}
+          class:pinned={pinnedProcesses.has(process.command)}
         >
           {#each columns.filter((col) => col.visible) as column}
             <td class="truncate">
@@ -239,9 +239,9 @@
             <div class="action-buttons">
               <button
                 class="btn-action pin-btn"
-                class:pinned={pinnedProcesses.has(process.pid)}
-                on:click={() => onTogglePin(process.pid)}
-                title={pinnedProcesses.has(process.pid) ? "Unpin" : "Pin"}
+                class:pinned={pinnedProcesses.has(process.command)}
+                on:click={() => onTogglePin(process.command)}
+                title={pinnedProcesses.has(process.command) ? "Unpin" : "Pin"}
               >
                 <Fa icon={faThumbtack} />
               </button>

src/routes/+page.svelte

@@ -18,7 +18,7 @@
   let isLoading = true;
   let currentPage = 1;
   let itemsPerPage = 15;
-  let pinnedProcesses: Set<number> = new Set();
+  let pinnedProcesses: Set<string> = new Set();
   let selectedProcess: Process | null = null;
   let showInfoModal = false;
   let showConfirmModal = false;
@@ -125,8 +125,8 @@
   });
 
   $: sortedProcesses = filteredProcesses.sort((a, b) => {
-    const aPin = pinnedProcesses.has(a.pid);
-    const bPin = pinnedProcesses.has(b.pid);
+    const aPin = pinnedProcesses.has(a.command);
+    const bPin = pinnedProcesses.has(b.command);
     if (aPin && !bPin) return -1;
     if (!aPin && bPin) return 1;
 
@@ -206,11 +206,11 @@
     }
   }
 
-  function togglePin(pid: number) {
-    if (pinnedProcesses.has(pid)) {
-      pinnedProcesses.delete(pid);
+  function togglePin(command: string) {
+    if (pinnedProcesses.has(command)) {
+      pinnedProcesses.delete(command);
     } else {
-      pinnedProcesses.add(pid);
+      pinnedProcesses.add(command);
     }
     pinnedProcesses = pinnedProcesses; // Trigger reactivity
   }