From d464775c4ac08ced896a14394b420fccd5c06500 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 03:16:45 +0100
Subject: [PATCH 01/14] ui refactoring

---
 src/lib/components/ProcessTable.svelte        | 430 ----------------
 src/lib/components/StatsBar.svelte            | 461 ------------------
 .../components/process/ActionButtons.svelte   | 147 ++++++
 src/lib/components/process/ProcessIcon.svelte |  70 +++
 src/lib/components/process/ProcessRow.svelte  |  60 +++
 .../components/process/ProcessTable.svelte    |  86 ++++
 src/lib/components/process/TableHeader.svelte | 136 ++++++
 .../process/cells/ProcessCell.svelte          | 289 +++++++++++
 src/lib/components/process/index.ts           |   6 +
 src/lib/components/stats/CpuPanel.svelte      |  60 +++
 src/lib/components/stats/MemoryPanel.svelte   |  58 +++
 src/lib/components/stats/NetworkPanel.svelte  |  47 ++
 src/lib/components/stats/PanelHeader.svelte   |  50 ++
 src/lib/components/stats/ProgressBar.svelte   |  80 +++
 src/lib/components/stats/StatItem.svelte      |  30 ++
 src/lib/components/stats/StatPanel.svelte     |  34 ++
 src/lib/components/stats/StatsBar.svelte      |  50 ++
 src/lib/components/stats/StoragePanel.svelte  |  56 +++
 src/lib/components/stats/SystemPanel.svelte   |  38 ++
 src/lib/components/stats/index.ts             |   9 +
 src/routes/+page.svelte                       |   6 +-
 21 files changed, 1309 insertions(+), 894 deletions(-)
 delete mode 100644 src/lib/components/ProcessTable.svelte
 delete mode 100644 src/lib/components/StatsBar.svelte
 create mode 100644 src/lib/components/process/ActionButtons.svelte
 create mode 100644 src/lib/components/process/ProcessIcon.svelte
 create mode 100644 src/lib/components/process/ProcessRow.svelte
 create mode 100644 src/lib/components/process/ProcessTable.svelte
 create mode 100644 src/lib/components/process/TableHeader.svelte
 create mode 100644 src/lib/components/process/cells/ProcessCell.svelte
 create mode 100644 src/lib/components/process/index.ts
 create mode 100644 src/lib/components/stats/CpuPanel.svelte
 create mode 100644 src/lib/components/stats/MemoryPanel.svelte
 create mode 100644 src/lib/components/stats/NetworkPanel.svelte
 create mode 100644 src/lib/components/stats/PanelHeader.svelte
 create mode 100644 src/lib/components/stats/ProgressBar.svelte
 create mode 100644 src/lib/components/stats/StatItem.svelte
 create mode 100644 src/lib/components/stats/StatPanel.svelte
 create mode 100644 src/lib/components/stats/StatsBar.svelte
 create mode 100644 src/lib/components/stats/StoragePanel.svelte
 create mode 100644 src/lib/components/stats/SystemPanel.svelte
 create mode 100644 src/lib/components/stats/index.ts

diff --git a/src/lib/components/ProcessTable.svelte b/src/lib/components/ProcessTable.svelte
deleted file mode 100644
index e0d5d2f..0000000
--- a/src/lib/components/ProcessTable.svelte
+++ /dev/null
@@ -1,430 +0,0 @@
-<script lang="ts">
-  import {
-    faThumbtack,
-    faInfoCircle,
-    faXmark,
-  } from "@fortawesome/free-solid-svg-icons";
-  import Fa from "svelte-fa";
-  import type { Process, Column } from "$lib/types";
-  import * as SimpleIcons from "simple-icons";
-
-  export let processes: Process[];
-  export let columns: Column[];
-  export let systemStats: { memory_total: number } | null;
-  export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
-  export let pinnedProcesses: Set<string>;
-
-  export let onToggleSort: (field: keyof Process) => void;
-  export let onTogglePin: (command: string) => void;
-  export let onShowDetails: (process: Process) => void;
-  export let onKillProcess: (process: Process) => void;
-
-  function getSortIndicator(field: keyof Process) {
-    if (sortConfig.field !== field) return "↕";
-    return sortConfig.direction === "asc" ? "↑" : "↓";
-  }
-
-  function handleImageError(event: Event) {
-    const img = event.target as HTMLImageElement;
-    img.src = getIconForProcess("default"); // Fallback to default icon
-    img.onerror = null; // Prevent infinite loop if default icon also fails
-  }
-
-  function getIconForProcess(name: string): string {
-    // First try with com.company.something pattern
-    if (name.startsWith("com.")) {
-      const companyName = name.replace(/^com\.([^.]+)\..*$/, "$1");
-      const formattedCompanyName =
-        companyName.charAt(0).toUpperCase() + companyName.slice(1);
-      const companyIconKey = `si${formattedCompanyName}`;
-      const companyIcon =
-        SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
-
-      if (companyIcon) {
-        // Use theme color instead of brand color
-        const color = getComputedStyle(document.documentElement)
-          .getPropertyValue("--text")
-          .trim();
-        const svg =
-          typeof companyIcon === "object" && "svg" in companyIcon
-            ? companyIcon.svg
-            : "";
-        const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
-        return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
-      }
-    }
-
-    // If no company icon found, fall back to original implementation
-    const cleanName = name
-      .replace(/\.(app|exe)$/i, "")
-      .replace(/[-_./\\]/g, " ")
-      .split(" ")[0]
-      .trim()
-      .toLowerCase();
-
-    const formattedName =
-      cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
-    const iconKey = `si${formattedName}`;
-    let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons];
-
-    // Default icon if no match found
-    if (!simpleIcon) {
-      simpleIcon = SimpleIcons.siGhostery;
-    }
-
-    // Use theme color instead of brand color
-    const color = getComputedStyle(document.documentElement)
-      .getPropertyValue("--text")
-      .trim();
-
-    const svg =
-      typeof simpleIcon === "object" && "svg" in simpleIcon
-        ? simpleIcon.svg
-        : "";
-    const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
-    return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
-  }
-</script>
-
-<div class="table-container">
-  <table>
-    <thead>
-      <tr>
-        {#each columns.filter((col) => col.visible) as column}
-          <th class="sortable" on:click={() => onToggleSort(column.id)}>
-            <div class="th-content">
-              {column.label}
-              <span
-                class="sort-indicator"
-                class:active={sortConfig.field === column.id}
-              >
-                {getSortIndicator(column.id)}
-              </span>
-            </div>
-          </th>
-        {/each}
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each processes as process (process.pid)}
-        <tr
-          class:high-usage={process.cpu_usage > 50 ||
-            process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
-          class:pinned={pinnedProcesses.has(process.command)}
-        >
-          {#each columns.filter((col) => col.visible) as column}
-            <td class="truncate">
-              {#if column.id === "name"}
-                <div class="name-cell">
-                  <img
-                    class="process-icon"
-                    src={getIconForProcess(process.name)}
-                    alt=""
-                    height="16"
-                    width="16"
-                    on:error={handleImageError}
-                  />
-                  <span class="process-name">{process.name}</span>
-                </div>
-              {:else if column.format}
-                {@html column.format(process[column.id])}
-              {:else}
-                {process[column.id]}
-              {/if}
-            </td>
-          {/each}
-          <td class="col-actions">
-            <div class="action-buttons">
-              <button
-                class="btn-action pin-btn"
-                class:pinned={pinnedProcesses.has(process.command)}
-                on:click={() => onTogglePin(process.command)}
-                title={pinnedProcesses.has(process.command) ? "Unpin" : "Pin"}
-              >
-                <Fa icon={faThumbtack} />
-              </button>
-              <button
-                class="btn-action info-btn"
-                on:click={() => onShowDetails(process)}
-                title="Show Details"
-              >
-                <Fa icon={faInfoCircle} />
-              </button>
-              <button
-                class="btn-action kill-btn"
-                on:click={() => onKillProcess(process)}
-                title="End Process"
-              >
-                <Fa icon={faXmark} />
-              </button>
-            </div>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-<style>
-  .table-container {
-    flex: 1;
-    overflow-x: auto;
-    overflow-y: auto;
-
-    /* Scrollbar styles */
-    scrollbar-width: thin; /* Firefox */
-    scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
-  }
-
-  /* Webkit scrollbar styles (Chrome, Safari, Edge) */
-  .table-container::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .table-container::-webkit-scrollbar-track {
-    background: var(--mantle);
-    border-radius: 4px;
-  }
-
-  .table-container::-webkit-scrollbar-thumb {
-    background: var(--surface2);
-    border-radius: 4px;
-    transition: background 0.2s ease;
-  }
-
-  .table-container::-webkit-scrollbar-thumb:hover {
-    background: var(--surface1);
-  }
-
-  .table-container::-webkit-scrollbar-corner {
-    background: var(--mantle);
-  }
-
-  /* When both scrollbars are present, add some padding to prevent overlap */
-  .table-container::-webkit-scrollbar-corner {
-    background-color: var(--mantle);
-  }
-
-  table {
-    width: max-content;
-    min-width: 100%;
-    table-layout: fixed;
-    border-collapse: collapse;
-    font-size: 13px;
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    background: var(--mantle);
-    text-align: left;
-    padding: 8px 12px;
-    font-weight: 500;
-    color: var(--subtext0);
-    border-bottom: 1px solid var(--surface0);
-    transition: background-color 0.2s ease;
-    z-index: 3;
-  }
-
-  td {
-    padding: 6px 12px;
-    border-bottom: 1px solid var(--surface0);
-    color: var(--text);
-    z-index: 1;
-  }
-
-  tr:hover {
-    background-color: var(--surface0);
-  }
-
-  .truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 0;
-  }
-
-  .sortable {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .th-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .sort-indicator {
-    color: var(--overlay0);
-    font-size: 12px;
-    opacity: 0.5;
-    transition: all 0.2s ease;
-  }
-
-  .sort-indicator.active {
-    color: var(--blue);
-    opacity: 1;
-  }
-
-  .sortable:hover .sort-indicator {
-    opacity: 1;
-  }
-
-  .high-usage {
-    background-color: color-mix(in srgb, var(--red) 10%, transparent);
-  }
-
-  .high-usage:hover {
-    background-color: color-mix(in srgb, var(--red) 15%, transparent);
-  }
-
-  tr.pinned {
-    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
-  }
-
-  tr.pinned:hover {
-    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
-  }
-
-  th:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-  }
-
-  td:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-    padding: 6px 8px;
-  }
-
-  .col-actions {
-    position: sticky;
-    right: 0;
-    z-index: 2;
-    background: var(--base);
-    border-left: 1px solid var(--surface0);
-    width: 120px;
-  }
-
-  .action-buttons {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    border-radius: 6px;
-    width: 28px;
-    height: 28px;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .btn-action::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.1;
-    transition: opacity 0.2s ease;
-  }
-
-  .btn-action:hover::before {
-    opacity: 0.15;
-  }
-
-  .pin-btn {
-    color: var(--sapphire);
-  }
-
-  .pin-btn::before {
-    background: var(--sapphire);
-  }
-
-  .pin-btn.pinned {
-    color: var(--blue);
-    transform: rotate(45deg);
-  }
-
-  .pin-btn.pinned::before {
-    background: var(--blue);
-    opacity: 0.15;
-  }
-
-  .info-btn {
-    color: var(--lavender);
-  }
-
-  .info-btn::before {
-    background: var(--lavender);
-  }
-
-  .kill-btn {
-    color: var(--red);
-    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
-  }
-
-  .kill-btn:hover {
-    color: var(--base);
-    background: var(--red);
-  }
-
-  .kill-btn:hover::before {
-    opacity: 1;
-  }
-
-  .btn-action:hover {
-    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
-  }
-
-  .btn-action:active {
-    transform: translateY(1px);
-  }
-
-  .pin-btn.pinned:active {
-    transform: rotate(45deg) translateY(1px);
-  }
-
-  .btn-action:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
-  }
-
-  .btn-action:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .btn-action:disabled:hover {
-    transform: none;
-    box-shadow: none;
-  }
-
-  .btn-action:disabled::before {
-    display: none;
-  }
-
-  .process-icon {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-  }
-
-  .name-cell {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>
diff --git a/src/lib/components/StatsBar.svelte b/src/lib/components/StatsBar.svelte
deleted file mode 100644
index 034c00b..0000000
--- a/src/lib/components/StatsBar.svelte
+++ /dev/null
@@ -1,461 +0,0 @@
-<script lang="ts">
-  import Fa from "svelte-fa";
-  import {
-    faMicrochip,
-    faMemory,
-    faServer,
-    faNetworkWired,
-    faHardDrive,
-  } from "@fortawesome/free-solid-svg-icons";
-  import type { SystemStats } from "$lib/types";
-  import {
-    formatUptime,
-    formatMemorySize,
-    formatPercentage,
-    getUsageClass,
-  } from "$lib/utils";
-
-  export let systemStats: SystemStats | null = null;
-  $: memoryPercentage = systemStats
-    ? (systemStats.memory_used / systemStats.memory_total) * 100
-    : 0;
-
-  function formatBytes(bytes: number): string {
-    const units = ["B", "KB", "MB", "GB", "TB"];
-    let value = bytes;
-    let unitIndex = 0;
-
-    while (value >= 1024 && unitIndex < units.length - 1) {
-      value /= 1024;
-      unitIndex++;
-    }
-
-    return `${value.toFixed(1)} ${units[unitIndex]}`;
-  }
-
-  $: diskUsagePercentage = systemStats
-    ? (systemStats.disk_used_bytes / systemStats.disk_total_bytes) * 100
-    : 0;
-</script>
-
-<div class="dashboard-stats">
-  {#if systemStats}
-    <div class="stats-layout">
-      <!-- CPU Panel -->
-      <div class="stat-panel">
-        <div class="panel-header">
-          <Fa icon={faMicrochip} />
-          <h3>CPU Usage</h3>
-          <div class="usage-pill">
-            {formatPercentage(
-              systemStats.cpu_usage.reduce((a, b) => a + b, 0) /
-                systemStats.cpu_usage.length,
-            )}
-          </div>
-        </div>
-        <div class="stats-content cpu-grid">
-          {#each systemStats.cpu_usage as usage, i}
-            <div class="stat-item with-progress">
-              <div class="progress-container">
-                <span class="label">Core {i}</span>
-                <div class="bar-container">
-                  <div
-                    class="usage-bar {getUsageClass(usage)}"
-                    style="transform: translateX({usage - 100}%);"
-                  ></div>
-                </div>
-                <span class="value">{Math.round(usage)}%</span>
-              </div>
-            </div>
-          {/each}
-        </div>
-      </div>
-
-      <!-- Memory Panel -->
-      <div class="stat-panel">
-        <div class="panel-header">
-          <Fa icon={faMemory} />
-          <h3>Memory</h3>
-          <div class="usage-pill">{formatPercentage(memoryPercentage)}</div>
-        </div>
-        <div class="stats-content">
-          <div class="stat-item with-progress">
-            <div class="memory-progress-container">
-              <span class="label">Memory usage</span>
-              <div class="bar-container">
-                <div
-                  class="usage-bar {getUsageClass(memoryPercentage)}"
-                  style="transform: translateX({memoryPercentage - 100}%);"
-                ></div>
-              </div>
-              <span class="value">{formatPercentage(memoryPercentage)}</span>
-            </div>
-          </div>
-          <div class="stat-item">
-            <span>Total</span>
-            <span>{formatMemorySize(systemStats.memory_total)}</span>
-          </div>
-          <div class="stat-item">
-            <span>Used</span>
-            <span>{formatMemorySize(systemStats.memory_used)}</span>
-          </div>
-          <div class="stat-item">
-            <span>Free</span>
-            <span>{formatMemorySize(systemStats.memory_free)}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Storage Panel -->
-      <div class="stat-panel">
-        <div class="panel-header">
-          <Fa icon={faHardDrive} />
-          <h3>Storage</h3>
-          <div class="usage-pill">
-            {formatPercentage(diskUsagePercentage)}
-          </div>
-        </div>
-        <div class="stats-content">
-          <div class="stat-item">
-            <span>Total</span>
-            <span>{formatBytes(systemStats.disk_total_bytes)}</span>
-          </div>
-          <div class="stat-item">
-            <span>Used</span>
-            <span>{formatBytes(systemStats.disk_used_bytes)}</span>
-          </div>
-          <div class="stat-item">
-            <span>Free</span>
-            <span>{formatBytes(systemStats.disk_free_bytes)}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- System Panel -->
-      <div class="stat-panel">
-        <div class="panel-header">
-          <Fa icon={faServer} />
-          <h3>System</h3>
-        </div>
-        <div class="system-grid">
-          <div class="stat-item">
-            <span>Uptime</span>
-            <span>{formatUptime(systemStats.uptime)}</span>
-          </div>
-          <div class="stat-item">
-            <span>1m Load</span>
-            <span>{systemStats.load_avg[0].toFixed(2)}</span>
-          </div>
-          <div class="stat-item">
-            <span>5m Load</span>
-            <span>{systemStats.load_avg[1].toFixed(2)}</span>
-          </div>
-          <div class="stat-item">
-            <span>15m Load</span>
-            <span>{systemStats.load_avg[2].toFixed(2)}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Network Panel -->
-      <div class="stat-panel">
-        <div class="panel-header">
-          <Fa icon={faNetworkWired} />
-          <h3>Network I/O</h3>
-        </div>
-        <div class="network-stats">
-          <div class="stat-item">
-            <span>↓ Receiving</span>
-            <span>{formatBytes(systemStats.network_rx_bytes)}/s</span>
-          </div>
-          <div class="stat-item">
-            <span>↑ Sending</span>
-            <span>{formatBytes(systemStats.network_tx_bytes)}/s</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .dashboard-stats {
-    padding: 0.5rem;
-    overflow-x: auto;
-  }
-
-  .stats-layout {
-    display: flex;
-    gap: 0.75rem;
-    width: 100%;
-  }
-
-  .stat-panel {
-    flex: 1;
-    min-width: 0;
-    background-color: var(--mantle);
-    border-radius: 6px;
-    padding: 0.75rem;
-    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
-    display: flex;
-    flex-direction: column;
-  }
-
-  .panel-header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--surface0);
-    flex-shrink: 0;
-  }
-
-  .panel-header h3 {
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin: 0;
-    color: var(--text);
-  }
-
-  .panel-header :global(svg) {
-    color: var(--blue);
-    width: 0.8rem;
-    height: 0.8rem;
-  }
-
-  .usage-pill {
-    margin-left: auto;
-    background: var(--surface0);
-    padding: 0.15rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.7rem;
-    font-weight: 500;
-  }
-
-  .cpu-layout {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.75rem;
-    overflow-y: auto;
-    padding-right: 0.25rem;
-  }
-
-  .cpu-row {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-  }
-
-  .cpu-info {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.7rem;
-  }
-
-  .bar-container {
-    height: 8px;
-    background: var(--surface0);
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .bar-container.main-bar {
-    height: 6px;
-    margin-bottom: 0.5rem;
-  }
-
-  .usage-bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    transition: transform 0.3s ease;
-    transform-origin: left;
-  }
-
-  .usage-bar.low {
-    background: var(--blue);
-  }
-  .usage-bar.medium {
-    background: var(--yellow);
-  }
-  .usage-bar.high {
-    background: var(--peach);
-  }
-  .usage-bar.critical {
-    background: var(--red);
-  }
-
-  .memory-grid,
-  .disk-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.75rem;
-    align-content: start;
-  }
-
-  .system-grid,
-  .network-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    flex: 1;
-  }
-
-  .load-stats {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-
-  .network-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .stat-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.7rem;
-    line-height: 1.2;
-    margin: 0;
-    padding: 0;
-  }
-
-  .stat-item span:first-child {
-    color: var(--subtext0);
-  }
-
-  .stat-item span:last-child {
-    color: var(--text);
-    font-weight: 500;
-  }
-
-  .full-width {
-    grid-column: 1 / -1;
-  }
-
-  .network-stats {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-
-  .stats-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-
-  .stat-item.with-progress {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-  }
-
-  .stat-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.7rem;
-    gap: 1rem;
-  }
-
-  .progress-container {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 4rem 1fr 3rem;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.7rem;
-  }
-
-  .memory-progress-container {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 5rem 1fr 2.5rem;
-    align-items: center;
-    gap: 0.3rem;
-    font-size: 0.7rem;
-  }
-
-  .memory-progress-container .label {
-    color: var(--subtext0);
-    white-space: nowrap;
-  }
-
-  .memory-progress-container .value {
-    color: var(--text);
-    text-align: right;
-    white-space: nowrap;
-  }
-
-  .progress-container .label {
-    color: var(--subtext0);
-    white-space: nowrap;
-  }
-
-  .progress-container .value {
-    color: var(--text);
-    text-align: right;
-    white-space: nowrap;
-  }
-
-  .bar-container {
-    height: 8px;
-    background: var(--surface0);
-    border-radius: 4px;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .usage-bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    transition: transform 0.3s ease;
-    transform-origin: left;
-  }
-
-  .cpu-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.4rem 2rem;
-    height: auto;
-    overflow: visible;
-  }
-
-  .progress-container {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 2.5rem 1fr 2.5rem;
-    align-items: center;
-    gap: 0.3rem;
-    font-size: 0.7rem;
-  }
-
-  /* Make CPU panel take more space */
-  .stat-panel:first-child {
-    flex: 2;
-  }
-
-  /* Customize flex distribution for each panel */
-  .stat-panel:nth-child(1) {
-    flex: 2.5; /* CPU: more space for 2 columns */
-  }
-  .stat-panel:nth-child(2) {
-    flex: 2; /* Memory: more space for details */
-  }
-  .stat-panel:nth-child(3),
-  .stat-panel:nth-child(4),
-  .stat-panel:nth-child(5) {
-    flex: 0.8; /* Storage, System, and Network: less space */
-    min-width: 125px;
-  }
-</style>
diff --git a/src/lib/components/process/ActionButtons.svelte b/src/lib/components/process/ActionButtons.svelte
new file mode 100644
index 0000000..e219821
--- /dev/null
+++ b/src/lib/components/process/ActionButtons.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import {
+    faThumbtack,
+    faInfoCircle,
+    faXmark,
+  } from "@fortawesome/free-solid-svg-icons";
+  import Fa from "svelte-fa";
+  import type { Process } from "$lib/types";
+
+  export let process: Process;
+  export let isPinned: boolean;
+  export let onTogglePin: (command: string) => void;
+  export let onShowDetails: (process: Process) => void;
+  export let onKillProcess: (process: Process) => void;
+</script>
+
+<div class="action-buttons">
+  <button
+    class="btn-action pin-btn"
+    class:pinned={isPinned}
+    on:click={() => onTogglePin(process.command)}
+    title={isPinned ? "Unpin" : "Pin"}
+  >
+    <Fa icon={faThumbtack} />
+  </button>
+  <button
+    class="btn-action info-btn"
+    on:click={() => onShowDetails(process)}
+    title="Show Details"
+  >
+    <Fa icon={faInfoCircle} />
+  </button>
+  <button
+    class="btn-action kill-btn"
+    on:click={() => onKillProcess(process)}
+    title="End Process"
+  >
+    <Fa icon={faXmark} />
+  </button>
+</div>
+
+<style>
+  .action-buttons {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-action::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.1;
+    transition: opacity 0.2s ease;
+  }
+
+  .btn-action:hover::before {
+    opacity: 0.15;
+  }
+
+  .pin-btn {
+    color: var(--sapphire);
+  }
+
+  .pin-btn::before {
+    background: var(--sapphire);
+  }
+
+  .pin-btn.pinned {
+    color: var(--blue);
+    transform: rotate(45deg);
+  }
+
+  .pin-btn.pinned::before {
+    background: var(--blue);
+    opacity: 0.15;
+  }
+
+  .info-btn {
+    color: var(--lavender);
+  }
+
+  .info-btn::before {
+    background: var(--lavender);
+  }
+
+  .kill-btn {
+    color: var(--red);
+    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
+  }
+
+  .kill-btn:hover {
+    color: var(--base);
+    background: var(--red);
+  }
+
+  .kill-btn:hover::before {
+    opacity: 1;
+  }
+
+  .btn-action:hover {
+    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  .btn-action:active {
+    transform: translateY(1px);
+  }
+
+  .pin-btn.pinned:active {
+    transform: rotate(45deg) translateY(1px);
+  }
+
+  .btn-action:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
+  }
+
+  .btn-action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-action:disabled:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .btn-action:disabled::before {
+    display: none;
+  }
+</style>
diff --git a/src/lib/components/process/ProcessIcon.svelte b/src/lib/components/process/ProcessIcon.svelte
new file mode 100644
index 0000000..660134a
--- /dev/null
+++ b/src/lib/components/process/ProcessIcon.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import * as SimpleIcons from "simple-icons";
+
+  export let processName: string;
+
+  function handleImageError(event: Event) {
+    const img = event.target as HTMLImageElement;
+    img.src = getIconForProcess("default");
+    img.onerror = null;
+  }
+
+  function getIconForProcess(name: string): string {
+    // First try with com.company.something pattern
+    if (name.startsWith("com.")) {
+      const companyName = name.replace(/^com\.([^.]+)\..*$/, "$1");
+      const formattedCompanyName =
+        companyName.charAt(0).toUpperCase() + companyName.slice(1);
+      const companyIconKey = `si${formattedCompanyName}`;
+      const companyIcon =
+        SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
+
+      if (companyIcon) {
+        return createSvgDataUrl(companyIcon);
+      }
+    }
+
+    // Fall back to process name icon
+    const cleanName = name
+      .replace(/\.(app|exe)$/i, "")
+      .replace(/[-_./\\]/g, " ")
+      .split(" ")[0]
+      .trim()
+      .toLowerCase();
+
+    const formattedName =
+      cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
+    const iconKey = `si${formattedName}`;
+    const simpleIcon =
+      SimpleIcons[iconKey as keyof typeof SimpleIcons] ||
+      SimpleIcons.siGhostery;
+
+    return createSvgDataUrl(simpleIcon);
+  }
+
+  function createSvgDataUrl(icon: any): string {
+    const color = getComputedStyle(document.documentElement)
+      .getPropertyValue("--text")
+      .trim();
+    const svg = typeof icon === "object" && "svg" in icon ? icon.svg : "";
+    const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
+    return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
+  }
+</script>
+
+<img
+  class="process-icon"
+  src={getIconForProcess(processName)}
+  alt=""
+  height="16"
+  width="16"
+  on:error={handleImageError}
+/>
+
+<style>
+  .process-icon {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+  }
+</style>
diff --git a/src/lib/components/process/ProcessRow.svelte b/src/lib/components/process/ProcessRow.svelte
new file mode 100644
index 0000000..d79481c
--- /dev/null
+++ b/src/lib/components/process/ProcessRow.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Process, Column } from "$lib/types";
+  import ProcessCell from "./cells/ProcessCell.svelte";
+  import ActionButtons from "./ActionButtons.svelte";
+
+  export let process: Process;
+  export let columns: Column[];
+  export let isPinned: boolean;
+  export let isHighUsage: boolean;
+  export let onTogglePin: (command: string) => void;
+  export let onShowDetails: (process: Process) => void;
+  export let onKillProcess: (process: Process) => void;
+</script>
+
+<tr class:high-usage={isHighUsage} class:pinned={isPinned}>
+  {#each columns.filter((col) => col.visible) as column}
+    <ProcessCell {process} field={column.id} format={column.format} />
+  {/each}
+  <td class="col-actions">
+    <ActionButtons
+      {process}
+      {isPinned}
+      {onTogglePin}
+      {onShowDetails}
+      {onKillProcess}
+    />
+  </td>
+</tr>
+
+<style>
+  tr:hover {
+    background-color: var(--surface0);
+  }
+
+  .high-usage {
+    background-color: color-mix(in srgb, var(--red) 10%, transparent);
+  }
+
+  .high-usage:hover {
+    background-color: color-mix(in srgb, var(--red) 15%, transparent);
+  }
+
+  tr.pinned {
+    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
+  }
+
+  tr.pinned:hover {
+    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
+  }
+
+  .col-actions {
+    position: sticky;
+    right: 0;
+    z-index: 2;
+    background: var(--base);
+    border-left: 1px solid var(--surface0);
+    width: 120px;
+    padding: 6px 8px;
+  }
+</style>
diff --git a/src/lib/components/process/ProcessTable.svelte b/src/lib/components/process/ProcessTable.svelte
new file mode 100644
index 0000000..dfbb576
--- /dev/null
+++ b/src/lib/components/process/ProcessTable.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { Process, Column } from "$lib/types";
+  import TableHeader from "./TableHeader.svelte";
+  import ProcessRow from "./ProcessRow.svelte";
+
+  export let processes: Process[];
+  export let columns: Column[];
+  export let systemStats: { memory_total: number } | null;
+  export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
+  export let pinnedProcesses: Set<string>;
+
+  export let onToggleSort: (field: keyof Process) => void;
+  export let onTogglePin: (command: string) => void;
+  export let onShowDetails: (process: Process) => void;
+  export let onKillProcess: (process: Process) => void;
+</script>
+
+<div class="table-container">
+  <table>
+    <TableHeader {columns} {sortConfig} {onToggleSort} />
+    <tbody>
+      {#each processes as process (process.pid)}
+        <ProcessRow
+          {process}
+          {columns}
+          isPinned={pinnedProcesses.has(process.command)}
+          isHighUsage={process.cpu_usage > 50 ||
+            process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
+          {onTogglePin}
+          {onShowDetails}
+          {onKillProcess}
+        />
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .table-container {
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: auto;
+
+    /* Scrollbar styles */
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
+  }
+
+  /* Webkit scrollbar styles (Chrome, Safari, Edge) */
+  .table-container::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .table-container::-webkit-scrollbar-track {
+    background: var(--mantle);
+    border-radius: 4px;
+  }
+
+  .table-container::-webkit-scrollbar-thumb {
+    background: var(--surface2);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+
+  .table-container::-webkit-scrollbar-thumb:hover {
+    background: var(--surface1);
+  }
+
+  .table-container::-webkit-scrollbar-corner {
+    background: var(--mantle);
+  }
+
+  /* When both scrollbars are present, add some padding to prevent overlap */
+  .table-container::-webkit-scrollbar-corner {
+    background-color: var(--mantle);
+  }
+
+  table {
+    width: max-content;
+    min-width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+</style>
diff --git a/src/lib/components/process/TableHeader.svelte b/src/lib/components/process/TableHeader.svelte
new file mode 100644
index 0000000..9d90706
--- /dev/null
+++ b/src/lib/components/process/TableHeader.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+  import type { Process, Column } from "$lib/types";
+
+  export let columns: Column[];
+  export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
+  export let onToggleSort: (field: keyof Process) => void;
+
+  function getSortIndicator(field: keyof Process) {
+    if (sortConfig.field !== field) return "↕";
+    return sortConfig.direction === "asc" ? "↑" : "↓";
+  }
+</script>
+
+<thead>
+  <tr>
+    {#each columns.filter((col) => col.visible) as column}
+      <th
+        class="sortable"
+        data-column={column.id}
+        on:click={() => onToggleSort(column.id)}
+      >
+        <div class="th-content">
+          {column.label}
+          <span
+            class="sort-indicator"
+            class:active={sortConfig.field === column.id}
+          >
+            {getSortIndicator(column.id)}
+          </span>
+        </div>
+      </th>
+    {/each}
+    <th>Actions</th>
+  </tr>
+</thead>
+
+<style>
+  th {
+    position: sticky;
+    top: 0;
+    background: var(--mantle);
+    text-align: left;
+    padding: 8px 12px;
+    font-weight: 500;
+    color: var(--subtext0);
+    border-bottom: 1px solid var(--surface0);
+    transition: background-color 0.2s ease;
+    z-index: 3;
+  }
+
+  th:last-child {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+  }
+
+  .sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .th-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sort-indicator {
+    color: var(--overlay0);
+    font-size: 12px;
+    opacity: 0.5;
+    transition: all 0.2s ease;
+  }
+
+  .sort-indicator.active {
+    color: var(--blue);
+    opacity: 1;
+  }
+
+  .sortable:hover .sort-indicator {
+    opacity: 1;
+  }
+
+  /* Column-specific widths */
+  th[data-column="name"] {
+    width: 200px;
+    min-width: 200px;
+  }
+
+  th[data-column="pid"] {
+    width: 70px;
+    min-width: 70px;
+  }
+
+  th[data-column="status"] {
+    width: 90px;
+    min-width: 90px;
+  }
+
+  th[data-column="user"] {
+    width: 100px;
+    min-width: 100px;
+  }
+
+  th[data-column="cpu_usage"] {
+    width: 80px;
+    min-width: 80px;
+  }
+
+  th[data-column="memory_usage"],
+  th[data-column="virtual_memory"] {
+    width: 90px;
+    min-width: 90px;
+  }
+
+  th[data-column="disk_usage"] {
+    width: 100px;
+    min-width: 100px;
+  }
+
+  th[data-column="command"],
+  th[data-column="environ"] {
+    width: 200px;
+    min-width: 200px;
+  }
+
+  th[data-column="start_time"] {
+    width: 150px;
+    min-width: 150px;
+  }
+
+  th[data-column="run_time"] {
+    width: 100px;
+    min-width: 100px;
+  }
+</style>
diff --git a/src/lib/components/process/cells/ProcessCell.svelte b/src/lib/components/process/cells/ProcessCell.svelte
new file mode 100644
index 0000000..107fb3d
--- /dev/null
+++ b/src/lib/components/process/cells/ProcessCell.svelte
@@ -0,0 +1,289 @@
+<script lang="ts">
+  import type { Process } from "$lib/types";
+  import ProcessIcon from "../ProcessIcon.svelte";
+
+  export let process: Process;
+  export let field: keyof Process;
+  export let format: ((value: any) => string) | undefined = undefined;
+
+  function formatValue(value: any): string | undefined {
+    if (format) {
+      return format(value);
+    }
+    return String(value);
+  }
+</script>
+
+<td class="truncate" data-column={field}>
+  {#if field === "name"}
+    <div class="name-cell">
+      <ProcessIcon processName={process.name} />
+      <span class="process-name">{process.name}</span>
+    </div>
+  {:else}
+    {formatValue(process[field])}
+  {/if}
+</td>
+
+<style>
+  .table-container {
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: auto;
+
+    /* Scrollbar styles */
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
+  }
+
+  /* Webkit scrollbar styles (Chrome, Safari, Edge) */
+  .table-container::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .table-container::-webkit-scrollbar-track {
+    background: var(--mantle);
+    border-radius: 4px;
+  }
+
+  .table-container::-webkit-scrollbar-thumb {
+    background: var(--surface2);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+
+  .table-container::-webkit-scrollbar-thumb:hover {
+    background: var(--surface1);
+  }
+
+  .table-container::-webkit-scrollbar-corner {
+    background: var(--mantle);
+  }
+
+  /* When both scrollbars are present, add some padding to prevent overlap */
+  .table-container::-webkit-scrollbar-corner {
+    background-color: var(--mantle);
+  }
+
+  table {
+    width: max-content;
+    min-width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  th {
+    position: sticky;
+    top: 0;
+    background: var(--mantle);
+    text-align: left;
+    padding: 8px 12px;
+    font-weight: 500;
+    color: var(--subtext0);
+    border-bottom: 1px solid var(--surface0);
+    transition: background-color 0.2s ease;
+    z-index: 3;
+  }
+
+  td {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--surface0);
+    color: var(--text);
+    z-index: 1;
+  }
+
+  tr:hover {
+    background-color: var(--surface0);
+  }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 0;
+  }
+
+  .sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .th-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sort-indicator {
+    color: var(--overlay0);
+    font-size: 12px;
+    opacity: 0.5;
+    transition: all 0.2s ease;
+  }
+
+  .sort-indicator.active {
+    color: var(--blue);
+    opacity: 1;
+  }
+
+  .sortable:hover .sort-indicator {
+    opacity: 1;
+  }
+
+  .high-usage {
+    background-color: color-mix(in srgb, var(--red) 10%, transparent);
+  }
+
+  .high-usage:hover {
+    background-color: color-mix(in srgb, var(--red) 15%, transparent);
+  }
+
+  tr.pinned {
+    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
+  }
+
+  tr.pinned:hover {
+    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
+  }
+
+  th:last-child {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+  }
+
+  td:last-child {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+    padding: 6px 8px;
+  }
+
+  .col-actions {
+    position: sticky;
+    right: 0;
+    z-index: 2;
+    background: var(--base);
+    border-left: 1px solid var(--surface0);
+    width: 120px;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-action::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.1;
+    transition: opacity 0.2s ease;
+  }
+
+  .btn-action:hover::before {
+    opacity: 0.15;
+  }
+
+  .pin-btn {
+    color: var(--sapphire);
+  }
+
+  .pin-btn::before {
+    background: var(--sapphire);
+  }
+
+  .pin-btn.pinned {
+    color: var(--blue);
+    transform: rotate(45deg);
+  }
+
+  .pin-btn.pinned::before {
+    background: var(--blue);
+    opacity: 0.15;
+  }
+
+  .info-btn {
+    color: var(--lavender);
+  }
+
+  .info-btn::before {
+    background: var(--lavender);
+  }
+
+  .kill-btn {
+    color: var(--red);
+    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
+  }
+
+  .kill-btn:hover {
+    color: var(--base);
+    background: var(--red);
+  }
+
+  .kill-btn:hover::before {
+    opacity: 1;
+  }
+
+  .btn-action:hover {
+    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  .btn-action:active {
+    transform: translateY(1px);
+  }
+
+  .pin-btn.pinned:active {
+    transform: rotate(45deg) translateY(1px);
+  }
+
+  .btn-action:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
+  }
+
+  .btn-action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-action:disabled:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .btn-action:disabled::before {
+    display: none;
+  }
+
+  .process-icon {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+  }
+
+  .name-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>
diff --git a/src/lib/components/process/index.ts b/src/lib/components/process/index.ts
new file mode 100644
index 0000000..76c3579
--- /dev/null
+++ b/src/lib/components/process/index.ts
@@ -0,0 +1,6 @@
+export { default as ProcessTable } from "./ProcessTable.svelte";
+export { default as ProcessRow } from "./ProcessRow.svelte";
+export { default as TableHeader } from "./TableHeader.svelte";
+export { default as ProcessCell } from "./cells/ProcessCell.svelte";
+export { default as ActionButtons } from "./ActionButtons.svelte";
+export { default as ProcessIcon } from "./ProcessIcon.svelte";
diff --git a/src/lib/components/stats/CpuPanel.svelte b/src/lib/components/stats/CpuPanel.svelte
new file mode 100644
index 0000000..2111940
--- /dev/null
+++ b/src/lib/components/stats/CpuPanel.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
+  import PanelHeader from "./PanelHeader.svelte";
+  import ProgressBar from "./ProgressBar.svelte";
+  import { formatPercentage } from "$lib/utils";
+
+  export let cpuUsage: number[];
+
+  $: averageUsage = formatPercentage(
+    cpuUsage.reduce((a, b) => a + b, 0) / cpuUsage.length,
+  );
+</script>
+
+<div class="stat-panel">
+  <PanelHeader icon={faMicrochip} title="CPU Usage" usageValue={averageUsage} />
+  <div class="stats-content cpu-grid">
+    {#each cpuUsage as usage, i}
+      <div class="stat-item with-progress">
+        <ProgressBar
+          label={`Core ${i}`}
+          value={usage}
+          labelWidth="2.5rem"
+          valueWidth="2.5rem"
+        />
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .stat-panel {
+    flex: 2.5;
+    min-width: 0;
+    background-color: var(--mantle);
+    border-radius: 6px;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stats-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .cpu-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.4rem 2rem;
+    height: auto;
+    overflow: visible;
+  }
+
+  .stat-item.with-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+</style>
diff --git a/src/lib/components/stats/MemoryPanel.svelte b/src/lib/components/stats/MemoryPanel.svelte
new file mode 100644
index 0000000..08f2930
--- /dev/null
+++ b/src/lib/components/stats/MemoryPanel.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { faMemory } from "@fortawesome/free-solid-svg-icons";
+  import PanelHeader from "./PanelHeader.svelte";
+  import ProgressBar from "./ProgressBar.svelte";
+  import StatItem from "./StatItem.svelte";
+  import { formatMemorySize, formatPercentage } from "$lib/utils";
+
+  export let memoryTotal: number;
+  export let memoryUsed: number;
+  export let memoryFree: number;
+
+  $: memoryPercentage = (memoryUsed / memoryTotal) * 100;
+</script>
+
+<div class="stat-panel">
+  <PanelHeader
+    icon={faMemory}
+    title="Memory"
+    usageValue={formatPercentage(memoryPercentage)}
+  />
+  <div class="stats-content">
+    <div class="stat-item with-progress">
+      <ProgressBar
+        label="Memory usage"
+        value={memoryPercentage}
+        labelWidth="5rem"
+        valueWidth="2.5rem"
+      />
+    </div>
+    <StatItem label="Total" value={formatMemorySize(memoryTotal)} />
+    <StatItem label="Used" value={formatMemorySize(memoryUsed)} />
+    <StatItem label="Free" value={formatMemorySize(memoryFree)} />
+  </div>
+</div>
+
+<style>
+  .stat-panel {
+    flex: 2;
+    min-width: 0;
+    background-color: var(--mantle);
+    border-radius: 6px;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stats-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .stat-item.with-progress {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+</style>
diff --git a/src/lib/components/stats/NetworkPanel.svelte b/src/lib/components/stats/NetworkPanel.svelte
new file mode 100644
index 0000000..e373e51
--- /dev/null
+++ b/src/lib/components/stats/NetworkPanel.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { faNetworkWired } from "@fortawesome/free-solid-svg-icons";
+  import PanelHeader from "./PanelHeader.svelte";
+  import StatItem from "./StatItem.svelte";
+
+  export let networkRxBytes: number;
+  export let networkTxBytes: number;
+
+  function formatBytes(bytes: number): string {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let value = bytes;
+    let unitIndex = 0;
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+      value /= 1024;
+      unitIndex++;
+    }
+
+    return `${value.toFixed(1)} ${units[unitIndex]}/s`;
+  }
+</script>
+
+<div class="stat-panel">
+  <PanelHeader icon={faNetworkWired} title="Network I/O" />
+  <div class="network-stats">
+    <StatItem label="↓ Receiving" value={formatBytes(networkRxBytes)} />
+    <StatItem label="↑ Sending" value={formatBytes(networkTxBytes)} />
+  </div>
+</div>
+
+<style>
+  .stat-panel {
+    flex: 0.8;
+    min-width: 125px;
+    background-color: var(--mantle);
+    border-radius: 6px;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .network-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+</style>
diff --git a/src/lib/components/stats/PanelHeader.svelte b/src/lib/components/stats/PanelHeader.svelte
new file mode 100644
index 0000000..11798df
--- /dev/null
+++ b/src/lib/components/stats/PanelHeader.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Fa from "svelte-fa";
+  import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+  export let icon: IconDefinition;
+  export let title: string;
+  export let usageValue: string | null = null;
+</script>
+
+<div class="panel-header">
+  <Fa {icon} />
+  <h3>{title}</h3>
+  {#if usageValue}
+    <div class="usage-pill">{usageValue}</div>
+  {/if}
+</div>
+
+<style>
+  .panel-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--surface0);
+    flex-shrink: 0;
+  }
+
+  .panel-header h3 {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--text);
+  }
+
+  .panel-header :global(svg) {
+    color: var(--blue);
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+
+  .usage-pill {
+    margin-left: auto;
+    background: var(--surface0);
+    padding: 0.15rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+  }
+</style>
diff --git a/src/lib/components/stats/ProgressBar.svelte b/src/lib/components/stats/ProgressBar.svelte
new file mode 100644
index 0000000..0834121
--- /dev/null
+++ b/src/lib/components/stats/ProgressBar.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  export let label: string;
+  export let value: number;
+  export let labelWidth = "2.5rem";
+  export let valueWidth = "2.5rem";
+
+  function getUsageClass(usage: number): string {
+    if (usage > 90) return "critical";
+    if (usage > 75) return "high";
+    if (usage > 50) return "medium";
+    return "low";
+  }
+</script>
+
+<div
+  class="progress-container"
+  style="--label-width: {labelWidth}; --value-width: {valueWidth}"
+>
+  <span class="label">{label}</span>
+  <div class="bar-container">
+    <div
+      class="usage-bar {getUsageClass(value)}"
+      style="transform: translateX({value - 100}%);"
+    />
+  </div>
+  <span class="value">{Math.round(value)}%</span>
+</div>
+
+<style>
+  .progress-container {
+    width: 100%;
+    display: grid;
+    grid-template-columns: var(--label-width) 1fr var(--value-width);
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.7rem;
+  }
+
+  .label {
+    color: var(--subtext0);
+    white-space: nowrap;
+  }
+
+  .value {
+    color: var(--text);
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .bar-container {
+    height: 8px;
+    background: var(--surface0);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .usage-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    transition: transform 0.3s ease;
+    transform-origin: left;
+  }
+
+  .usage-bar.low {
+    background: var(--blue);
+  }
+  .usage-bar.medium {
+    background: var(--yellow);
+  }
+  .usage-bar.high {
+    background: var(--peach);
+  }
+  .usage-bar.critical {
+    background: var(--red);
+  }
+</style>
diff --git a/src/lib/components/stats/StatItem.svelte b/src/lib/components/stats/StatItem.svelte
new file mode 100644
index 0000000..d575317
--- /dev/null
+++ b/src/lib/components/stats/StatItem.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let label: string;
+  export let value: string;
+</script>
+
+<div class="stat-item">
+  <span>{label}</span>
+  <span>{value}</span>
+</div>
+
+<style>
+  .stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.7rem;
+    line-height: 1.2;
+    margin: 0;
+    padding: 0;
+  }
+
+  .stat-item span:first-child {
+    color: var(--subtext0);
+  }
+
+  .stat-item span:last-child {
+    color: var(--text);
+    font-weight: 500;
+  }
+</style>
diff --git a/src/lib/components/stats/StatPanel.svelte b/src/lib/components/stats/StatPanel.svelte
new file mode 100644
index 0000000..90cdc20
--- /dev/null
+++ b/src/lib/components/stats/StatPanel.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let title: string;
+  export let flex = 1;
+</script>
+
+<div class="stat-panel" style="--flex: {flex}">
+  <h3 class="panel-title">{title}</h3>
+  <div class="panel-content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .stat-panel {
+    flex: var(--flex);
+    min-width: 125px;
+    background: var(--mantle);
+    border-radius: 8px;
+    padding: 12px;
+  }
+
+  .panel-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--subtext0);
+    margin: 0 0 12px 0;
+  }
+
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+</style>
diff --git a/src/lib/components/stats/StatsBar.svelte b/src/lib/components/stats/StatsBar.svelte
new file mode 100644
index 0000000..949d770
--- /dev/null
+++ b/src/lib/components/stats/StatsBar.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { SystemStats } from "$lib/types";
+  import CpuPanel from "./CpuPanel.svelte";
+  import MemoryPanel from "./MemoryPanel.svelte";
+  import StoragePanel from "./StoragePanel.svelte";
+  import SystemPanel from "./SystemPanel.svelte";
+  import NetworkPanel from "./NetworkPanel.svelte";
+
+  export let systemStats: SystemStats | null = null;
+</script>
+
+<div class="dashboard-stats">
+  {#if systemStats}
+    <div class="stats-layout">
+      <CpuPanel cpuUsage={systemStats.cpu_usage} />
+
+      <MemoryPanel
+        memoryTotal={systemStats.memory_total}
+        memoryUsed={systemStats.memory_used}
+        memoryFree={systemStats.memory_free}
+      />
+
+      <StoragePanel
+        diskTotalBytes={systemStats.disk_total_bytes}
+        diskUsedBytes={systemStats.disk_used_bytes}
+        diskFreeBytes={systemStats.disk_free_bytes}
+      />
+
+      <SystemPanel uptime={systemStats.uptime} loadAvg={systemStats.load_avg} />
+
+      <NetworkPanel
+        networkRxBytes={systemStats.network_rx_bytes}
+        networkTxBytes={systemStats.network_tx_bytes}
+      />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dashboard-stats {
+    padding: 0.5rem;
+    overflow-x: auto;
+  }
+
+  .stats-layout {
+    display: flex;
+    gap: 0.75rem;
+    width: 100%;
+  }
+</style>
diff --git a/src/lib/components/stats/StoragePanel.svelte b/src/lib/components/stats/StoragePanel.svelte
new file mode 100644
index 0000000..cf1fae1
--- /dev/null
+++ b/src/lib/components/stats/StoragePanel.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { faHardDrive } from "@fortawesome/free-solid-svg-icons";
+  import PanelHeader from "./PanelHeader.svelte";
+  import StatItem from "./StatItem.svelte";
+  import { formatPercentage } from "$lib/utils";
+
+  export let diskTotalBytes: number;
+  export let diskUsedBytes: number;
+  export let diskFreeBytes: number;
+
+  function formatBytes(bytes: number): string {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let value = bytes;
+    let unitIndex = 0;
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+      value /= 1024;
+      unitIndex++;
+    }
+
+    return `${value.toFixed(1)} ${units[unitIndex]}`;
+  }
+
+  $: diskUsagePercentage = (diskUsedBytes / diskTotalBytes) * 100;
+</script>
+
+<div class="stat-panel">
+  <PanelHeader
+    icon={faHardDrive}
+    title="Storage"
+    usageValue={formatPercentage(diskUsagePercentage)}
+  />
+  <div class="stats-content">
+    <StatItem label="Total" value={formatBytes(diskTotalBytes)} />
+    <StatItem label="Used" value={formatBytes(diskUsedBytes)} />
+    <StatItem label="Free" value={formatBytes(diskFreeBytes)} />
+  </div>
+</div>
+
+<style>
+  .stat-panel {
+    flex: 0.8;
+    min-width: 125px;
+    background-color: var(--mantle);
+    border-radius: 6px;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stats-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+</style>
diff --git a/src/lib/components/stats/SystemPanel.svelte b/src/lib/components/stats/SystemPanel.svelte
new file mode 100644
index 0000000..d8faf32
--- /dev/null
+++ b/src/lib/components/stats/SystemPanel.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { faServer } from "@fortawesome/free-solid-svg-icons";
+  import PanelHeader from "./PanelHeader.svelte";
+  import StatItem from "./StatItem.svelte";
+  import { formatUptime } from "$lib/utils";
+
+  export let uptime: number;
+  export let loadAvg: [number, number, number];
+</script>
+
+<div class="stat-panel">
+  <PanelHeader icon={faServer} title="System" />
+  <div class="system-grid">
+    <StatItem label="Uptime" value={formatUptime(uptime)} />
+    <StatItem label="1m Load" value={loadAvg[0].toFixed(2)} />
+    <StatItem label="5m Load" value={loadAvg[1].toFixed(2)} />
+    <StatItem label="15m Load" value={loadAvg[2].toFixed(2)} />
+  </div>
+</div>
+
+<style>
+  .stat-panel {
+    flex: 0.8;
+    min-width: 125px;
+    background-color: var(--mantle);
+    border-radius: 6px;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .system-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    flex: 1;
+  }
+</style>
diff --git a/src/lib/components/stats/index.ts b/src/lib/components/stats/index.ts
new file mode 100644
index 0000000..e79623e
--- /dev/null
+++ b/src/lib/components/stats/index.ts
@@ -0,0 +1,9 @@
+export { default as StatsBar } from "./StatsBar.svelte";
+export { default as CpuPanel } from "./CpuPanel.svelte";
+export { default as MemoryPanel } from "./MemoryPanel.svelte";
+export { default as StoragePanel } from "./StoragePanel.svelte";
+export { default as SystemPanel } from "./SystemPanel.svelte";
+export { default as NetworkPanel } from "./NetworkPanel.svelte";
+export { default as PanelHeader } from "./PanelHeader.svelte";
+export { default as ProgressBar } from "./ProgressBar.svelte";
+export { default as StatItem } from "./StatItem.svelte";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1e35955..ae5ff10 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
   import { onMount, onDestroy } from "svelte";
-  import StatsBar from "$lib/components/StatsBar.svelte";
+  import { StatsBar } from "$lib/components/stats";
   import ToolBar from "$lib/components/ToolBar.svelte";
-  import ProcessTable from "$lib/components/ProcessTable.svelte";
+  import ProcessTable from "$lib/components/process/ProcessTable.svelte";
   import ProcessDetailsModal from "$lib/components/ProcessDetailsModal.svelte";
   import KillProcessModal from "$lib/components/KillProcessModal.svelte";
   import { formatMemorySize, formatStatus } from "$lib/utils";
@@ -35,7 +35,7 @@
       id: "status",
       label: "Status",
       visible: true,
-      format: formatStatus,
+      format: (v) => v,
     },
     { id: "user", label: "User", visible: true },
     {

From 73ada67432f77c0b2d09f9ebe54b9d192442fa03 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 13:50:11 +0100
Subject: [PATCH 02/14] extracting ProcessIcon component

---
 .../components/process/ActionButtons.svelte   | 147 ---------
 src/lib/components/process/ProcessIcon.svelte |  36 ++-
 src/lib/components/process/ProcessRow.svelte  |  60 ----
 .../components/process/ProcessTable.svelte    | 294 +++++++++++++++++-
 src/lib/components/process/TableHeader.svelte | 136 --------
 .../process/cells/ProcessCell.svelte          | 289 -----------------
 6 files changed, 307 insertions(+), 655 deletions(-)

diff --git a/src/lib/components/process/ActionButtons.svelte b/src/lib/components/process/ActionButtons.svelte
index e219821..e69de29 100644
--- a/src/lib/components/process/ActionButtons.svelte
+++ b/src/lib/components/process/ActionButtons.svelte
@@ -1,147 +0,0 @@
-<script lang="ts">
-  import {
-    faThumbtack,
-    faInfoCircle,
-    faXmark,
-  } from "@fortawesome/free-solid-svg-icons";
-  import Fa from "svelte-fa";
-  import type { Process } from "$lib/types";
-
-  export let process: Process;
-  export let isPinned: boolean;
-  export let onTogglePin: (command: string) => void;
-  export let onShowDetails: (process: Process) => void;
-  export let onKillProcess: (process: Process) => void;
-</script>
-
-<div class="action-buttons">
-  <button
-    class="btn-action pin-btn"
-    class:pinned={isPinned}
-    on:click={() => onTogglePin(process.command)}
-    title={isPinned ? "Unpin" : "Pin"}
-  >
-    <Fa icon={faThumbtack} />
-  </button>
-  <button
-    class="btn-action info-btn"
-    on:click={() => onShowDetails(process)}
-    title="Show Details"
-  >
-    <Fa icon={faInfoCircle} />
-  </button>
-  <button
-    class="btn-action kill-btn"
-    on:click={() => onKillProcess(process)}
-    title="End Process"
-  >
-    <Fa icon={faXmark} />
-  </button>
-</div>
-
-<style>
-  .action-buttons {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    border-radius: 6px;
-    width: 28px;
-    height: 28px;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .btn-action::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.1;
-    transition: opacity 0.2s ease;
-  }
-
-  .btn-action:hover::before {
-    opacity: 0.15;
-  }
-
-  .pin-btn {
-    color: var(--sapphire);
-  }
-
-  .pin-btn::before {
-    background: var(--sapphire);
-  }
-
-  .pin-btn.pinned {
-    color: var(--blue);
-    transform: rotate(45deg);
-  }
-
-  .pin-btn.pinned::before {
-    background: var(--blue);
-    opacity: 0.15;
-  }
-
-  .info-btn {
-    color: var(--lavender);
-  }
-
-  .info-btn::before {
-    background: var(--lavender);
-  }
-
-  .kill-btn {
-    color: var(--red);
-    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
-  }
-
-  .kill-btn:hover {
-    color: var(--base);
-    background: var(--red);
-  }
-
-  .kill-btn:hover::before {
-    opacity: 1;
-  }
-
-  .btn-action:hover {
-    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
-  }
-
-  .btn-action:active {
-    transform: translateY(1px);
-  }
-
-  .pin-btn.pinned:active {
-    transform: rotate(45deg) translateY(1px);
-  }
-
-  .btn-action:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
-  }
-
-  .btn-action:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .btn-action:disabled:hover {
-    transform: none;
-    box-shadow: none;
-  }
-
-  .btn-action:disabled::before {
-    display: none;
-  }
-</style>
diff --git a/src/lib/components/process/ProcessIcon.svelte b/src/lib/components/process/ProcessIcon.svelte
index 660134a..a4c71a6 100644
--- a/src/lib/components/process/ProcessIcon.svelte
+++ b/src/lib/components/process/ProcessIcon.svelte
@@ -2,6 +2,7 @@
   import * as SimpleIcons from "simple-icons";
 
   export let processName: string;
+  export let size: number = 16;
 
   function handleImageError(event: Event) {
     const img = event.target as HTMLImageElement;
@@ -20,11 +21,20 @@
         SimpleIcons[companyIconKey as keyof typeof SimpleIcons];
 
       if (companyIcon) {
-        return createSvgDataUrl(companyIcon);
+        // Use theme color instead of brand color
+        const color = getComputedStyle(document.documentElement)
+          .getPropertyValue("--text")
+          .trim();
+        const svg =
+          typeof companyIcon === "object" && "svg" in companyIcon
+            ? companyIcon.svg
+            : "";
+        const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
+        return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
       }
     }
 
-    // Fall back to process name icon
+    // If no company icon found, fall back to original implementation
     const cleanName = name
       .replace(/\.(app|exe)$/i, "")
       .replace(/[-_./\\]/g, " ")
@@ -35,18 +45,22 @@
     const formattedName =
       cleanName.charAt(0).toUpperCase() + cleanName.slice(1);
     const iconKey = `si${formattedName}`;
-    const simpleIcon =
-      SimpleIcons[iconKey as keyof typeof SimpleIcons] ||
-      SimpleIcons.siGhostery;
+    let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons];
 
-    return createSvgDataUrl(simpleIcon);
-  }
+    // Default icon if no match found
+    if (!simpleIcon) {
+      simpleIcon = SimpleIcons.siGhostery;
+    }
 
-  function createSvgDataUrl(icon: any): string {
+    // Use theme color instead of brand color
     const color = getComputedStyle(document.documentElement)
       .getPropertyValue("--text")
       .trim();
-    const svg = typeof icon === "object" && "svg" in icon ? icon.svg : "";
+
+    const svg =
+      typeof simpleIcon === "object" && "svg" in simpleIcon
+        ? simpleIcon.svg
+        : "";
     const svgWithColor = svg.replace("<svg", `<svg fill="${color}"`);
     return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
   }
@@ -56,8 +70,8 @@
   class="process-icon"
   src={getIconForProcess(processName)}
   alt=""
-  height="16"
-  width="16"
+  height={size}
+  width={size}
   on:error={handleImageError}
 />
 
diff --git a/src/lib/components/process/ProcessRow.svelte b/src/lib/components/process/ProcessRow.svelte
index d79481c..e69de29 100644
--- a/src/lib/components/process/ProcessRow.svelte
+++ b/src/lib/components/process/ProcessRow.svelte
@@ -1,60 +0,0 @@
-<script lang="ts">
-  import type { Process, Column } from "$lib/types";
-  import ProcessCell from "./cells/ProcessCell.svelte";
-  import ActionButtons from "./ActionButtons.svelte";
-
-  export let process: Process;
-  export let columns: Column[];
-  export let isPinned: boolean;
-  export let isHighUsage: boolean;
-  export let onTogglePin: (command: string) => void;
-  export let onShowDetails: (process: Process) => void;
-  export let onKillProcess: (process: Process) => void;
-</script>
-
-<tr class:high-usage={isHighUsage} class:pinned={isPinned}>
-  {#each columns.filter((col) => col.visible) as column}
-    <ProcessCell {process} field={column.id} format={column.format} />
-  {/each}
-  <td class="col-actions">
-    <ActionButtons
-      {process}
-      {isPinned}
-      {onTogglePin}
-      {onShowDetails}
-      {onKillProcess}
-    />
-  </td>
-</tr>
-
-<style>
-  tr:hover {
-    background-color: var(--surface0);
-  }
-
-  .high-usage {
-    background-color: color-mix(in srgb, var(--red) 10%, transparent);
-  }
-
-  .high-usage:hover {
-    background-color: color-mix(in srgb, var(--red) 15%, transparent);
-  }
-
-  tr.pinned {
-    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
-  }
-
-  tr.pinned:hover {
-    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
-  }
-
-  .col-actions {
-    position: sticky;
-    right: 0;
-    z-index: 2;
-    background: var(--base);
-    border-left: 1px solid var(--surface0);
-    width: 120px;
-    padding: 6px 8px;
-  }
-</style>
diff --git a/src/lib/components/process/ProcessTable.svelte b/src/lib/components/process/ProcessTable.svelte
index dfbb576..b658ed9 100644
--- a/src/lib/components/process/ProcessTable.svelte
+++ b/src/lib/components/process/ProcessTable.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
+  import {
+    faThumbtack,
+    faInfoCircle,
+    faXmark,
+  } from "@fortawesome/free-solid-svg-icons";
+  import Fa from "svelte-fa";
   import type { Process, Column } from "$lib/types";
-  import TableHeader from "./TableHeader.svelte";
-  import ProcessRow from "./ProcessRow.svelte";
+  import ProcessIcon from "./ProcessIcon.svelte";
 
   export let processes: Process[];
   export let columns: Column[];
@@ -13,23 +18,81 @@
   export let onTogglePin: (command: string) => void;
   export let onShowDetails: (process: Process) => void;
   export let onKillProcess: (process: Process) => void;
+
+  function getSortIndicator(field: keyof Process) {
+    if (sortConfig.field !== field) return "↕";
+    return sortConfig.direction === "asc" ? "↑" : "↓";
+  }
 </script>
 
 <div class="table-container">
   <table>
-    <TableHeader {columns} {sortConfig} {onToggleSort} />
+    <thead>
+      <tr>
+        {#each columns.filter((col) => col.visible) as column}
+          <th class="sortable" on:click={() => onToggleSort(column.id)}>
+            <div class="th-content">
+              {column.label}
+              <span
+                class="sort-indicator"
+                class:active={sortConfig.field === column.id}
+              >
+                {getSortIndicator(column.id)}
+              </span>
+            </div>
+          </th>
+        {/each}
+        <th>Actions</th>
+      </tr>
+    </thead>
     <tbody>
       {#each processes as process (process.pid)}
-        <ProcessRow
-          {process}
-          {columns}
-          isPinned={pinnedProcesses.has(process.command)}
-          isHighUsage={process.cpu_usage > 50 ||
+        <tr
+          class:high-usage={process.cpu_usage > 50 ||
             process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
-          {onTogglePin}
-          {onShowDetails}
-          {onKillProcess}
-        />
+          class:pinned={pinnedProcesses.has(process.command)}
+        >
+          {#each columns.filter((col) => col.visible) as column}
+            <td class="truncate">
+              {#if column.id === "name"}
+                <div class="name-cell">
+                  <ProcessIcon processName={process.name} />
+                  <span class="process-name">{process.name}</span>
+                </div>
+              {:else if column.format}
+                {@html column.format(process[column.id])}
+              {:else}
+                {process[column.id]}
+              {/if}
+            </td>
+          {/each}
+          <td class="col-actions">
+            <div class="action-buttons">
+              <button
+                class="btn-action pin-btn"
+                class:pinned={pinnedProcesses.has(process.command)}
+                on:click={() => onTogglePin(process.command)}
+                title={pinnedProcesses.has(process.command) ? "Unpin" : "Pin"}
+              >
+                <Fa icon={faThumbtack} />
+              </button>
+              <button
+                class="btn-action info-btn"
+                on:click={() => onShowDetails(process)}
+                title="Show Details"
+              >
+                <Fa icon={faInfoCircle} />
+              </button>
+              <button
+                class="btn-action kill-btn"
+                on:click={() => onKillProcess(process)}
+                title="End Process"
+              >
+                <Fa icon={faXmark} />
+              </button>
+            </div>
+          </td>
+        </tr>
       {/each}
     </tbody>
   </table>
@@ -83,4 +146,211 @@
     border-collapse: collapse;
     font-size: 13px;
   }
+
+  th {
+    position: sticky;
+    top: 0;
+    background: var(--mantle);
+    text-align: left;
+    padding: 8px 12px;
+    font-weight: 500;
+    color: var(--subtext0);
+    border-bottom: 1px solid var(--surface0);
+    transition: background-color 0.2s ease;
+    z-index: 3;
+  }
+
+  td {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--surface0);
+    color: var(--text);
+    z-index: 1;
+  }
+
+  tr:hover {
+    background-color: var(--surface0);
+  }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 0;
+  }
+
+  .sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .th-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sort-indicator {
+    color: var(--overlay0);
+    font-size: 12px;
+    opacity: 0.5;
+    transition: all 0.2s ease;
+  }
+
+  .sort-indicator.active {
+    color: var(--blue);
+    opacity: 1;
+  }
+
+  .sortable:hover .sort-indicator {
+    opacity: 1;
+  }
+
+  .high-usage {
+    background-color: color-mix(in srgb, var(--red) 10%, transparent);
+  }
+
+  .high-usage:hover {
+    background-color: color-mix(in srgb, var(--red) 15%, transparent);
+  }
+
+  tr.pinned {
+    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
+  }
+
+  tr.pinned:hover {
+    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
+  }
+
+  th:last-child {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+  }
+
+  td:last-child {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+    padding: 6px 8px;
+  }
+
+  .col-actions {
+    position: sticky;
+    right: 0;
+    z-index: 2;
+    background: var(--base);
+    border-left: 1px solid var(--surface0);
+    width: 120px;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-action::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.1;
+    transition: opacity 0.2s ease;
+  }
+
+  .btn-action:hover::before {
+    opacity: 0.15;
+  }
+
+  .pin-btn {
+    color: var(--sapphire);
+  }
+
+  .pin-btn::before {
+    background: var(--sapphire);
+  }
+
+  .pin-btn.pinned {
+    color: var(--blue);
+    transform: rotate(45deg);
+  }
+
+  .pin-btn.pinned::before {
+    background: var(--blue);
+    opacity: 0.15;
+  }
+
+  .info-btn {
+    color: var(--lavender);
+  }
+
+  .info-btn::before {
+    background: var(--lavender);
+  }
+
+  .kill-btn {
+    color: var(--red);
+    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
+  }
+
+  .kill-btn:hover {
+    color: var(--base);
+    background: var(--red);
+  }
+
+  .kill-btn:hover::before {
+    opacity: 1;
+  }
+
+  .btn-action:hover {
+    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  .btn-action:active {
+    transform: translateY(1px);
+  }
+
+  .pin-btn.pinned:active {
+    transform: rotate(45deg) translateY(1px);
+  }
+
+  .btn-action:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
+  }
+
+  .btn-action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-action:disabled:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .btn-action:disabled::before {
+    display: none;
+  }
+
+  .name-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
 </style>
diff --git a/src/lib/components/process/TableHeader.svelte b/src/lib/components/process/TableHeader.svelte
index 9d90706..e69de29 100644
--- a/src/lib/components/process/TableHeader.svelte
+++ b/src/lib/components/process/TableHeader.svelte
@@ -1,136 +0,0 @@
-<script lang="ts">
-  import type { Process, Column } from "$lib/types";
-
-  export let columns: Column[];
-  export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
-  export let onToggleSort: (field: keyof Process) => void;
-
-  function getSortIndicator(field: keyof Process) {
-    if (sortConfig.field !== field) return "↕";
-    return sortConfig.direction === "asc" ? "↑" : "↓";
-  }
-</script>
-
-<thead>
-  <tr>
-    {#each columns.filter((col) => col.visible) as column}
-      <th
-        class="sortable"
-        data-column={column.id}
-        on:click={() => onToggleSort(column.id)}
-      >
-        <div class="th-content">
-          {column.label}
-          <span
-            class="sort-indicator"
-            class:active={sortConfig.field === column.id}
-          >
-            {getSortIndicator(column.id)}
-          </span>
-        </div>
-      </th>
-    {/each}
-    <th>Actions</th>
-  </tr>
-</thead>
-
-<style>
-  th {
-    position: sticky;
-    top: 0;
-    background: var(--mantle);
-    text-align: left;
-    padding: 8px 12px;
-    font-weight: 500;
-    color: var(--subtext0);
-    border-bottom: 1px solid var(--surface0);
-    transition: background-color 0.2s ease;
-    z-index: 3;
-  }
-
-  th:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-  }
-
-  .sortable {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .th-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .sort-indicator {
-    color: var(--overlay0);
-    font-size: 12px;
-    opacity: 0.5;
-    transition: all 0.2s ease;
-  }
-
-  .sort-indicator.active {
-    color: var(--blue);
-    opacity: 1;
-  }
-
-  .sortable:hover .sort-indicator {
-    opacity: 1;
-  }
-
-  /* Column-specific widths */
-  th[data-column="name"] {
-    width: 200px;
-    min-width: 200px;
-  }
-
-  th[data-column="pid"] {
-    width: 70px;
-    min-width: 70px;
-  }
-
-  th[data-column="status"] {
-    width: 90px;
-    min-width: 90px;
-  }
-
-  th[data-column="user"] {
-    width: 100px;
-    min-width: 100px;
-  }
-
-  th[data-column="cpu_usage"] {
-    width: 80px;
-    min-width: 80px;
-  }
-
-  th[data-column="memory_usage"],
-  th[data-column="virtual_memory"] {
-    width: 90px;
-    min-width: 90px;
-  }
-
-  th[data-column="disk_usage"] {
-    width: 100px;
-    min-width: 100px;
-  }
-
-  th[data-column="command"],
-  th[data-column="environ"] {
-    width: 200px;
-    min-width: 200px;
-  }
-
-  th[data-column="start_time"] {
-    width: 150px;
-    min-width: 150px;
-  }
-
-  th[data-column="run_time"] {
-    width: 100px;
-    min-width: 100px;
-  }
-</style>
diff --git a/src/lib/components/process/cells/ProcessCell.svelte b/src/lib/components/process/cells/ProcessCell.svelte
index 107fb3d..e69de29 100644
--- a/src/lib/components/process/cells/ProcessCell.svelte
+++ b/src/lib/components/process/cells/ProcessCell.svelte
@@ -1,289 +0,0 @@
-<script lang="ts">
-  import type { Process } from "$lib/types";
-  import ProcessIcon from "../ProcessIcon.svelte";
-
-  export let process: Process;
-  export let field: keyof Process;
-  export let format: ((value: any) => string) | undefined = undefined;
-
-  function formatValue(value: any): string | undefined {
-    if (format) {
-      return format(value);
-    }
-    return String(value);
-  }
-</script>
-
-<td class="truncate" data-column={field}>
-  {#if field === "name"}
-    <div class="name-cell">
-      <ProcessIcon processName={process.name} />
-      <span class="process-name">{process.name}</span>
-    </div>
-  {:else}
-    {formatValue(process[field])}
-  {/if}
-</td>
-
-<style>
-  .table-container {
-    flex: 1;
-    overflow-x: auto;
-    overflow-y: auto;
-
-    /* Scrollbar styles */
-    scrollbar-width: thin; /* Firefox */
-    scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
-  }
-
-  /* Webkit scrollbar styles (Chrome, Safari, Edge) */
-  .table-container::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  .table-container::-webkit-scrollbar-track {
-    background: var(--mantle);
-    border-radius: 4px;
-  }
-
-  .table-container::-webkit-scrollbar-thumb {
-    background: var(--surface2);
-    border-radius: 4px;
-    transition: background 0.2s ease;
-  }
-
-  .table-container::-webkit-scrollbar-thumb:hover {
-    background: var(--surface1);
-  }
-
-  .table-container::-webkit-scrollbar-corner {
-    background: var(--mantle);
-  }
-
-  /* When both scrollbars are present, add some padding to prevent overlap */
-  .table-container::-webkit-scrollbar-corner {
-    background-color: var(--mantle);
-  }
-
-  table {
-    width: max-content;
-    min-width: 100%;
-    table-layout: fixed;
-    border-collapse: collapse;
-    font-size: 13px;
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    background: var(--mantle);
-    text-align: left;
-    padding: 8px 12px;
-    font-weight: 500;
-    color: var(--subtext0);
-    border-bottom: 1px solid var(--surface0);
-    transition: background-color 0.2s ease;
-    z-index: 3;
-  }
-
-  td {
-    padding: 6px 12px;
-    border-bottom: 1px solid var(--surface0);
-    color: var(--text);
-    z-index: 1;
-  }
-
-  tr:hover {
-    background-color: var(--surface0);
-  }
-
-  .truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 0;
-  }
-
-  .sortable {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .th-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .sort-indicator {
-    color: var(--overlay0);
-    font-size: 12px;
-    opacity: 0.5;
-    transition: all 0.2s ease;
-  }
-
-  .sort-indicator.active {
-    color: var(--blue);
-    opacity: 1;
-  }
-
-  .sortable:hover .sort-indicator {
-    opacity: 1;
-  }
-
-  .high-usage {
-    background-color: color-mix(in srgb, var(--red) 10%, transparent);
-  }
-
-  .high-usage:hover {
-    background-color: color-mix(in srgb, var(--red) 15%, transparent);
-  }
-
-  tr.pinned {
-    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
-  }
-
-  tr.pinned:hover {
-    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
-  }
-
-  th:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-  }
-
-  td:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-    padding: 6px 8px;
-  }
-
-  .col-actions {
-    position: sticky;
-    right: 0;
-    z-index: 2;
-    background: var(--base);
-    border-left: 1px solid var(--surface0);
-    width: 120px;
-  }
-
-  .action-buttons {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    border-radius: 6px;
-    width: 28px;
-    height: 28px;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .btn-action::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.1;
-    transition: opacity 0.2s ease;
-  }
-
-  .btn-action:hover::before {
-    opacity: 0.15;
-  }
-
-  .pin-btn {
-    color: var(--sapphire);
-  }
-
-  .pin-btn::before {
-    background: var(--sapphire);
-  }
-
-  .pin-btn.pinned {
-    color: var(--blue);
-    transform: rotate(45deg);
-  }
-
-  .pin-btn.pinned::before {
-    background: var(--blue);
-    opacity: 0.15;
-  }
-
-  .info-btn {
-    color: var(--lavender);
-  }
-
-  .info-btn::before {
-    background: var(--lavender);
-  }
-
-  .kill-btn {
-    color: var(--red);
-    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
-  }
-
-  .kill-btn:hover {
-    color: var(--base);
-    background: var(--red);
-  }
-
-  .kill-btn:hover::before {
-    opacity: 1;
-  }
-
-  .btn-action:hover {
-    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
-  }
-
-  .btn-action:active {
-    transform: translateY(1px);
-  }
-
-  .pin-btn.pinned:active {
-    transform: rotate(45deg) translateY(1px);
-  }
-
-  .btn-action:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
-  }
-
-  .btn-action:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .btn-action:disabled:hover {
-    transform: none;
-    box-shadow: none;
-  }
-
-  .btn-action:disabled::before {
-    display: none;
-  }
-
-  .process-icon {
-    width: 16px;
-    height: 16px;
-    object-fit: contain;
-  }
-
-  .name-cell {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>

From bbe778e1204a686d414ce28774325a3cebedce96 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 13:56:49 +0100
Subject: [PATCH 03/14] TableHeader component

---
 .../components/process/ProcessTable.svelte    | 71 +----------------
 src/lib/components/process/TableHeader.svelte | 79 +++++++++++++++++++
 2 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/src/lib/components/process/ProcessTable.svelte b/src/lib/components/process/ProcessTable.svelte
index b658ed9..0c6f576 100644
--- a/src/lib/components/process/ProcessTable.svelte
+++ b/src/lib/components/process/ProcessTable.svelte
@@ -7,6 +7,7 @@
   import Fa from "svelte-fa";
   import type { Process, Column } from "$lib/types";
   import ProcessIcon from "./ProcessIcon.svelte";
+  import TableHeader from "./TableHeader.svelte";
 
   export let processes: Process[];
   export let columns: Column[];
@@ -18,33 +19,11 @@
   export let onTogglePin: (command: string) => void;
   export let onShowDetails: (process: Process) => void;
   export let onKillProcess: (process: Process) => void;
-
-  function getSortIndicator(field: keyof Process) {
-    if (sortConfig.field !== field) return "↕";
-    return sortConfig.direction === "asc" ? "↑" : "↓";
-  }
 </script>
 
 <div class="table-container">
   <table>
-    <thead>
-      <tr>
-        {#each columns.filter((col) => col.visible) as column}
-          <th class="sortable" on:click={() => onToggleSort(column.id)}>
-            <div class="th-content">
-              {column.label}
-              <span
-                class="sort-indicator"
-                class:active={sortConfig.field === column.id}
-              >
-                {getSortIndicator(column.id)}
-              </span>
-            </div>
-          </th>
-        {/each}
-        <th>Actions</th>
-      </tr>
-    </thead>
+    <TableHeader {columns} {sortConfig} {onToggleSort} />
     <tbody>
       {#each processes as process (process.pid)}
         <tr
@@ -147,19 +126,6 @@
     font-size: 13px;
   }
 
-  th {
-    position: sticky;
-    top: 0;
-    background: var(--mantle);
-    text-align: left;
-    padding: 8px 12px;
-    font-weight: 500;
-    color: var(--subtext0);
-    border-bottom: 1px solid var(--surface0);
-    transition: background-color 0.2s ease;
-    z-index: 3;
-  }
-
   td {
     padding: 6px 12px;
     border-bottom: 1px solid var(--surface0);
@@ -178,33 +144,6 @@
     max-width: 0;
   }
 
-  .sortable {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .th-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .sort-indicator {
-    color: var(--overlay0);
-    font-size: 12px;
-    opacity: 0.5;
-    transition: all 0.2s ease;
-  }
-
-  .sort-indicator.active {
-    color: var(--blue);
-    opacity: 1;
-  }
-
-  .sortable:hover .sort-indicator {
-    opacity: 1;
-  }
-
   .high-usage {
     background-color: color-mix(in srgb, var(--red) 10%, transparent);
   }
@@ -221,12 +160,6 @@
     background-color: color-mix(in srgb, var(--blue) 15%, transparent);
   }
 
-  th:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-  }
-
   td:last-child {
     width: 120px;
     min-width: 120px;
diff --git a/src/lib/components/process/TableHeader.svelte b/src/lib/components/process/TableHeader.svelte
index e69de29..58bdea4 100644
--- a/src/lib/components/process/TableHeader.svelte
+++ b/src/lib/components/process/TableHeader.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { Process, Column } from "$lib/types";
+
+  export let columns: Column[];
+  export let sortConfig: { field: keyof Process; direction: "asc" | "desc" };
+  export let onToggleSort: (field: keyof Process) => void;
+
+  function getSortIndicator(field: keyof Process) {
+    if (sortConfig.field !== field) return "↕";
+    return sortConfig.direction === "asc" ? "↑" : "↓";
+  }
+</script>
+
+<thead>
+  <tr>
+    {#each columns.filter((col) => col.visible) as column}
+      <th class="sortable" on:click={() => onToggleSort(column.id)}>
+        <div class="th-content">
+          {column.label}
+          <span
+            class="sort-indicator"
+            class:active={sortConfig.field === column.id}
+          >
+            {getSortIndicator(column.id)}
+          </span>
+        </div>
+      </th>
+    {/each}
+    <th>Actions</th>
+  </tr>
+</thead>
+
+<style>
+  th {
+    position: sticky;
+    top: 0;
+    background: var(--mantle);
+    text-align: left;
+    padding: 8px 12px;
+    font-weight: 500;
+    color: var(--subtext0);
+    border-bottom: 1px solid var(--surface0);
+    transition: background-color 0.2s ease;
+    z-index: 3;
+  }
+
+  th:last-child {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+  }
+
+  .sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .th-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .sort-indicator {
+    color: var(--overlay0);
+    font-size: 12px;
+    opacity: 0.5;
+    transition: all 0.2s ease;
+  }
+
+  .sort-indicator.active {
+    color: var(--blue);
+    opacity: 1;
+  }
+
+  .sortable:hover .sort-indicator {
+    opacity: 1;
+  }
+</style>

From 44cb0c965e516b43b73ad6716869314377aaedbd Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:06:00 +0100
Subject: [PATCH 04/14] ActionButtons component

---
 .../components/process/ActionButtons.svelte   | 164 ++++++++++++++++++
 .../components/process/ProcessTable.svelte    | 154 +---------------
 2 files changed, 172 insertions(+), 146 deletions(-)

diff --git a/src/lib/components/process/ActionButtons.svelte b/src/lib/components/process/ActionButtons.svelte
index e69de29..2c28fd5 100644
--- a/src/lib/components/process/ActionButtons.svelte
+++ b/src/lib/components/process/ActionButtons.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import {
+    faThumbtack,
+    faInfoCircle,
+    faXmark,
+  } from "@fortawesome/free-solid-svg-icons";
+  import Fa from "svelte-fa";
+  import type { Process } from "$lib/types";
+
+  export let process: Process;
+  export let isPinned: boolean;
+  export let onTogglePin: (command: string) => void;
+  export let onShowDetails: (process: Process) => void;
+  export let onKillProcess: (process: Process) => void;
+</script>
+
+<td class="col-actions">
+  <div class="action-buttons">
+    <button
+      class="btn-action pin-btn"
+      class:pinned={isPinned}
+      on:click={() => onTogglePin(process.command)}
+      title={isPinned ? "Unpin" : "Pin"}
+    >
+      <Fa icon={faThumbtack} />
+    </button>
+    <button
+      class="btn-action info-btn"
+      on:click={() => onShowDetails(process)}
+      title="Show Details"
+    >
+      <Fa icon={faInfoCircle} />
+    </button>
+    <button
+      class="btn-action kill-btn"
+      on:click={() => onKillProcess(process)}
+      title="End Process"
+    >
+      <Fa icon={faXmark} />
+    </button>
+  </div>
+</td>
+
+<style>
+  td {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--surface0);
+    color: var(--text);
+    z-index: 1;
+  }
+  .col-actions {
+    position: sticky;
+    right: 0;
+    z-index: 2;
+    background: var(--base);
+    border-left: 1px solid var(--surface0);
+    width: 120px;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-action::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.1;
+    transition: opacity 0.2s ease;
+  }
+
+  .btn-action:hover::before {
+    opacity: 0.15;
+  }
+
+  .pin-btn {
+    color: var(--sapphire);
+  }
+
+  .pin-btn::before {
+    background: var(--sapphire);
+  }
+
+  .pin-btn.pinned {
+    color: var(--blue);
+    transform: rotate(45deg);
+  }
+
+  .pin-btn.pinned::before {
+    background: var(--blue);
+    opacity: 0.15;
+  }
+
+  .info-btn {
+    color: var(--lavender);
+  }
+
+  .info-btn::before {
+    background: var(--lavender);
+  }
+
+  .kill-btn {
+    color: var(--red);
+    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
+  }
+
+  .kill-btn:hover {
+    color: var(--base);
+    background: var(--red);
+  }
+
+  .kill-btn:hover::before {
+    opacity: 1;
+  }
+
+  .btn-action:hover {
+    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  .btn-action:active {
+    transform: translateY(1px);
+  }
+
+  .pin-btn.pinned:active {
+    transform: rotate(45deg) translateY(1px);
+  }
+
+  .btn-action:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
+  }
+
+  .btn-action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-action:disabled:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .btn-action:disabled::before {
+    display: none;
+  }
+</style>
diff --git a/src/lib/components/process/ProcessTable.svelte b/src/lib/components/process/ProcessTable.svelte
index 0c6f576..b26327c 100644
--- a/src/lib/components/process/ProcessTable.svelte
+++ b/src/lib/components/process/ProcessTable.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
-  import {
-    faThumbtack,
-    faInfoCircle,
-    faXmark,
-  } from "@fortawesome/free-solid-svg-icons";
-  import Fa from "svelte-fa";
   import type { Process, Column } from "$lib/types";
   import ProcessIcon from "./ProcessIcon.svelte";
   import TableHeader from "./TableHeader.svelte";
+  import ActionButtons from "./ActionButtons.svelte";
 
   export let processes: Process[];
   export let columns: Column[];
@@ -45,32 +40,13 @@
               {/if}
             </td>
           {/each}
-          <td class="col-actions">
-            <div class="action-buttons">
-              <button
-                class="btn-action pin-btn"
-                class:pinned={pinnedProcesses.has(process.command)}
-                on:click={() => onTogglePin(process.command)}
-                title={pinnedProcesses.has(process.command) ? "Unpin" : "Pin"}
-              >
-                <Fa icon={faThumbtack} />
-              </button>
-              <button
-                class="btn-action info-btn"
-                on:click={() => onShowDetails(process)}
-                title="Show Details"
-              >
-                <Fa icon={faInfoCircle} />
-              </button>
-              <button
-                class="btn-action kill-btn"
-                on:click={() => onKillProcess(process)}
-                title="End Process"
-              >
-                <Fa icon={faXmark} />
-              </button>
-            </div>
-          </td>
+          <ActionButtons
+            {process}
+            isPinned={pinnedProcesses.has(process.command)}
+            {onTogglePin}
+            {onShowDetails}
+            {onKillProcess}
+          />
         </tr>
       {/each}
     </tbody>
@@ -167,120 +143,6 @@
     padding: 6px 8px;
   }
 
-  .col-actions {
-    position: sticky;
-    right: 0;
-    z-index: 2;
-    background: var(--base);
-    border-left: 1px solid var(--surface0);
-    width: 120px;
-  }
-
-  .action-buttons {
-    display: flex;
-    gap: 4px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    border-radius: 6px;
-    width: 28px;
-    height: 28px;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .btn-action::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.1;
-    transition: opacity 0.2s ease;
-  }
-
-  .btn-action:hover::before {
-    opacity: 0.15;
-  }
-
-  .pin-btn {
-    color: var(--sapphire);
-  }
-
-  .pin-btn::before {
-    background: var(--sapphire);
-  }
-
-  .pin-btn.pinned {
-    color: var(--blue);
-    transform: rotate(45deg);
-  }
-
-  .pin-btn.pinned::before {
-    background: var(--blue);
-    opacity: 0.15;
-  }
-
-  .info-btn {
-    color: var(--lavender);
-  }
-
-  .info-btn::before {
-    background: var(--lavender);
-  }
-
-  .kill-btn {
-    color: var(--red);
-    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
-  }
-
-  .kill-btn:hover {
-    color: var(--base);
-    background: var(--red);
-  }
-
-  .kill-btn:hover::before {
-    opacity: 1;
-  }
-
-  .btn-action:hover {
-    box-shadow: 0 0 12px color-mix(in srgb, currentColor 20%, transparent);
-  }
-
-  .btn-action:active {
-    transform: translateY(1px);
-  }
-
-  .pin-btn.pinned:active {
-    transform: rotate(45deg) translateY(1px);
-  }
-
-  .btn-action:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
-  }
-
-  .btn-action:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .btn-action:disabled:hover {
-    transform: none;
-    box-shadow: none;
-  }
-
-  .btn-action:disabled::before {
-    display: none;
-  }
-
   .name-cell {
     display: flex;
     align-items: center;

From 5aa6a7a8e709faed9ff0e402302dda02d864798d Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:08:29 +0100
Subject: [PATCH 05/14] ProcessRow component

---
 src/lib/components/process/ProcessRow.svelte  | 81 +++++++++++++++
 .../components/process/ProcessTable.svelte    | 98 +++----------------
 .../process/cells/ProcessCell.svelte          |  0
 3 files changed, 94 insertions(+), 85 deletions(-)
 delete mode 100644 src/lib/components/process/cells/ProcessCell.svelte

diff --git a/src/lib/components/process/ProcessRow.svelte b/src/lib/components/process/ProcessRow.svelte
index e69de29..07ea55b 100644
--- a/src/lib/components/process/ProcessRow.svelte
+++ b/src/lib/components/process/ProcessRow.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Process, Column } from "$lib/types";
+  import ProcessIcon from "./ProcessIcon.svelte";
+  import ActionButtons from "./ActionButtons.svelte";
+
+  export let process: Process;
+  export let columns: Column[];
+  export let systemStats: { memory_total: number } | null;
+  export let isPinned: boolean;
+  export let isHighUsage: boolean;
+
+  export let onTogglePin: (command: string) => void;
+  export let onShowDetails: (process: Process) => void;
+  export let onKillProcess: (process: Process) => void;
+</script>
+
+<tr class:high-usage={isHighUsage} class:pinned={isPinned}>
+  {#each columns.filter((col) => col.visible) as column}
+    <td class="truncate">
+      {#if column.id === "name"}
+        <div class="name-cell">
+          <ProcessIcon processName={process.name} />
+          <span class="process-name">{process.name}</span>
+        </div>
+      {:else if column.format}
+        {@html column.format(process[column.id])}
+      {:else}
+        {process[column.id]}
+      {/if}
+    </td>
+  {/each}
+  <ActionButtons
+    {process}
+    {isPinned}
+    {onTogglePin}
+    {onShowDetails}
+    {onKillProcess}
+  />
+</tr>
+
+<style>
+  td {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--surface0);
+    color: var(--text);
+    z-index: 1;
+  }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 0;
+  }
+
+  tr:hover {
+    background-color: var(--surface0);
+  }
+
+  .high-usage {
+    background-color: color-mix(in srgb, var(--red) 10%, transparent);
+  }
+
+  .high-usage:hover {
+    background-color: color-mix(in srgb, var(--red) 15%, transparent);
+  }
+
+  tr.pinned {
+    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
+  }
+
+  tr.pinned:hover {
+    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
+  }
+
+  .name-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>
diff --git a/src/lib/components/process/ProcessTable.svelte b/src/lib/components/process/ProcessTable.svelte
index b26327c..7291e9f 100644
--- a/src/lib/components/process/ProcessTable.svelte
+++ b/src/lib/components/process/ProcessTable.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import type { Process, Column } from "$lib/types";
-  import ProcessIcon from "./ProcessIcon.svelte";
   import TableHeader from "./TableHeader.svelte";
-  import ActionButtons from "./ActionButtons.svelte";
+  import ProcessRow from "./ProcessRow.svelte";
 
   export let processes: Process[];
   export let columns: Column[];
@@ -21,33 +20,17 @@
     <TableHeader {columns} {sortConfig} {onToggleSort} />
     <tbody>
       {#each processes as process (process.pid)}
-        <tr
-          class:high-usage={process.cpu_usage > 50 ||
+        <ProcessRow
+          {process}
+          {columns}
+          {systemStats}
+          isPinned={pinnedProcesses.has(process.command)}
+          isHighUsage={process.cpu_usage > 50 ||
             process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
-          class:pinned={pinnedProcesses.has(process.command)}
-        >
-          {#each columns.filter((col) => col.visible) as column}
-            <td class="truncate">
-              {#if column.id === "name"}
-                <div class="name-cell">
-                  <ProcessIcon processName={process.name} />
-                  <span class="process-name">{process.name}</span>
-                </div>
-              {:else if column.format}
-                {@html column.format(process[column.id])}
-              {:else}
-                {process[column.id]}
-              {/if}
-            </td>
-          {/each}
-          <ActionButtons
-            {process}
-            isPinned={pinnedProcesses.has(process.command)}
-            {onTogglePin}
-            {onShowDetails}
-            {onKillProcess}
-          />
-        </tr>
+          {onTogglePin}
+          {onShowDetails}
+          {onKillProcess}
+        />
       {/each}
     </tbody>
   </table>
@@ -58,13 +41,10 @@
     flex: 1;
     overflow-x: auto;
     overflow-y: auto;
-
-    /* Scrollbar styles */
-    scrollbar-width: thin; /* Firefox */
-    scrollbar-color: var(--surface2) var(--mantle); /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--surface2) var(--mantle);
   }
 
-  /* Webkit scrollbar styles (Chrome, Safari, Edge) */
   .table-container::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -89,11 +69,6 @@
     background: var(--mantle);
   }
 
-  /* When both scrollbars are present, add some padding to prevent overlap */
-  .table-container::-webkit-scrollbar-corner {
-    background-color: var(--mantle);
-  }
-
   table {
     width: max-content;
     min-width: 100%;
@@ -101,51 +76,4 @@
     border-collapse: collapse;
     font-size: 13px;
   }
-
-  td {
-    padding: 6px 12px;
-    border-bottom: 1px solid var(--surface0);
-    color: var(--text);
-    z-index: 1;
-  }
-
-  tr:hover {
-    background-color: var(--surface0);
-  }
-
-  .truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 0;
-  }
-
-  .high-usage {
-    background-color: color-mix(in srgb, var(--red) 10%, transparent);
-  }
-
-  .high-usage:hover {
-    background-color: color-mix(in srgb, var(--red) 15%, transparent);
-  }
-
-  tr.pinned {
-    background-color: color-mix(in srgb, var(--blue) 10%, transparent);
-  }
-
-  tr.pinned:hover {
-    background-color: color-mix(in srgb, var(--blue) 15%, transparent);
-  }
-
-  td:last-child {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-    padding: 6px 8px;
-  }
-
-  .name-cell {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
 </style>
diff --git a/src/lib/components/process/cells/ProcessCell.svelte b/src/lib/components/process/cells/ProcessCell.svelte
deleted file mode 100644
index e69de29..0000000

From 040fd47ef3494fe3c29d9b6629ac0378ff902d35 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:15:34 +0100
Subject: [PATCH 06/14] modals

---
 src/lib/components/TitleBar.svelte                 | 14 --------------
 .../{ => modals}/KillProcessModal.svelte           |  2 +-
 src/lib/components/{ => modals}/Modal.svelte       |  0
 .../{ => modals}/ProcessDetailsModal.svelte        |  7 +------
 src/lib/components/modals/index.ts                 |  3 +++
 src/lib/components/process/index.ts                |  1 -
 src/routes/+page.svelte                            |  6 +++---
 7 files changed, 8 insertions(+), 25 deletions(-)
 rename src/lib/components/{ => modals}/KillProcessModal.svelte (97%)
 rename src/lib/components/{ => modals}/Modal.svelte (100%)
 rename src/lib/components/{ => modals}/ProcessDetailsModal.svelte (97%)
 create mode 100644 src/lib/components/modals/index.ts

diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index d9293c4..eb8bb78 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -1,18 +1,4 @@
 <script lang="ts">
-  import { Window } from "@tauri-apps/api/window";
-
-  const appWindow = new Window("main");
-  let isMaximized = false;
-
-  async function toggleMaximize() {
-    isMaximized = await appWindow.isMaximized();
-    if (isMaximized) {
-      await appWindow.unmaximize();
-    } else {
-      await appWindow.maximize();
-    }
-    isMaximized = await appWindow.isMaximized();
-  }
 </script>
 
 <div class="title-bar" data-tauri-drag-region>
diff --git a/src/lib/components/KillProcessModal.svelte b/src/lib/components/modals/KillProcessModal.svelte
similarity index 97%
rename from src/lib/components/KillProcessModal.svelte
rename to src/lib/components/modals/KillProcessModal.svelte
index 6ca601c..c8d736a 100644
--- a/src/lib/components/KillProcessModal.svelte
+++ b/src/lib/components/modals/KillProcessModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Modal from "./Modal.svelte";
+  import { Modal } from "$lib/components/modals";
 
   interface Process {
     pid: number;
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/modals/Modal.svelte
similarity index 100%
rename from src/lib/components/Modal.svelte
rename to src/lib/components/modals/Modal.svelte
diff --git a/src/lib/components/ProcessDetailsModal.svelte b/src/lib/components/modals/ProcessDetailsModal.svelte
similarity index 97%
rename from src/lib/components/ProcessDetailsModal.svelte
rename to src/lib/components/modals/ProcessDetailsModal.svelte
index c1635cf..3bf7df1 100644
--- a/src/lib/components/ProcessDetailsModal.svelte
+++ b/src/lib/components/modals/ProcessDetailsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Modal from "./Modal.svelte";
+  import { Modal } from "$lib/components/modals";
   import { formatStatus, formatUptime } from "$lib/utils";
   import type { Process } from "$lib/types";
   import Fa from "svelte-fa";
@@ -8,7 +8,6 @@
     faMemory,
     faMicrochip,
     faHardDrive,
-    faNetworkWired,
   } from "@fortawesome/free-solid-svg-icons";
 
   export let show = false;
@@ -17,10 +16,6 @@
 
   $: currentProcess = process;
 
-  function formatMemory(bytes: number) {
-    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-  }
-
   function formatBytes(bytes: number) {
     if (bytes < 1024) return `${bytes} B`;
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
diff --git a/src/lib/components/modals/index.ts b/src/lib/components/modals/index.ts
new file mode 100644
index 0000000..1de7682
--- /dev/null
+++ b/src/lib/components/modals/index.ts
@@ -0,0 +1,3 @@
+export { default as Modal } from "./Modal.svelte";
+export { default as ProcessDetailsModal } from "./ProcessDetailsModal.svelte";
+export { default as KillProcessModal } from "./KillProcessModal.svelte";
diff --git a/src/lib/components/process/index.ts b/src/lib/components/process/index.ts
index 76c3579..0dbed06 100644
--- a/src/lib/components/process/index.ts
+++ b/src/lib/components/process/index.ts
@@ -1,6 +1,5 @@
 export { default as ProcessTable } from "./ProcessTable.svelte";
 export { default as ProcessRow } from "./ProcessRow.svelte";
 export { default as TableHeader } from "./TableHeader.svelte";
-export { default as ProcessCell } from "./cells/ProcessCell.svelte";
 export { default as ActionButtons } from "./ActionButtons.svelte";
 export { default as ProcessIcon } from "./ProcessIcon.svelte";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ae5ff10..25c7bf5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,9 +3,9 @@
   import { onMount, onDestroy } from "svelte";
   import { StatsBar } from "$lib/components/stats";
   import ToolBar from "$lib/components/ToolBar.svelte";
-  import ProcessTable from "$lib/components/process/ProcessTable.svelte";
-  import ProcessDetailsModal from "$lib/components/ProcessDetailsModal.svelte";
-  import KillProcessModal from "$lib/components/KillProcessModal.svelte";
+  import { ProcessTable } from "$lib/components/process";
+  import { ProcessDetailsModal } from "$lib/components/modals";
+  import { KillProcessModal } from "$lib/components/modals";
   import { formatMemorySize, formatStatus } from "$lib/utils";
   import { themeStore } from "$lib/stores";
   import type { Process, SystemStats, Column } from "$lib/types";

From 596fc19b29995392040eeb0908592480078c9503 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:43:15 +0100
Subject: [PATCH 07/14] status filter

---
 .../components/toolbar/ColumnToggle.svelte    |  0
 .../toolbar/PaginationControls.svelte         |  0
 .../components/toolbar/RefreshControls.svelte |  0
 src/lib/components/toolbar/SearchBox.svelte   |  0
 .../components/toolbar/StatusFilter.svelte    | 68 +++++++++++++++++++
 .../components/{ => toolbar}/ToolBar.svelte   | 16 +----
 src/lib/components/toolbar/index.ts           |  6 ++
 src/lib/constants/toolbar.ts                  |  9 +++
 src/lib/types/toolbar.ts                      | 28 ++++++++
 src/routes/+page.svelte                       |  2 +-
 10 files changed, 115 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/toolbar/ColumnToggle.svelte
 create mode 100644 src/lib/components/toolbar/PaginationControls.svelte
 create mode 100644 src/lib/components/toolbar/RefreshControls.svelte
 create mode 100644 src/lib/components/toolbar/SearchBox.svelte
 create mode 100644 src/lib/components/toolbar/StatusFilter.svelte
 rename src/lib/components/{ => toolbar}/ToolBar.svelte (96%)
 create mode 100644 src/lib/components/toolbar/index.ts
 create mode 100644 src/lib/constants/toolbar.ts
 create mode 100644 src/lib/types/toolbar.ts

diff --git a/src/lib/components/toolbar/ColumnToggle.svelte b/src/lib/components/toolbar/ColumnToggle.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/PaginationControls.svelte b/src/lib/components/toolbar/PaginationControls.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/RefreshControls.svelte b/src/lib/components/toolbar/RefreshControls.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/SearchBox.svelte b/src/lib/components/toolbar/SearchBox.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/toolbar/StatusFilter.svelte b/src/lib/components/toolbar/StatusFilter.svelte
new file mode 100644
index 0000000..e234844
--- /dev/null
+++ b/src/lib/components/toolbar/StatusFilter.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { statusMap } from "$lib/utils";
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let statusFilter: string = "all";
+
+  const statusOptions = [
+    { value: "all", label: "All Statuses" },
+    ...Object.values(statusMap).map((status) => ({
+      value: status.label,
+      label: status.label,
+    })),
+  ];
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="toolbar-group">
+  <select
+    bind:value={statusFilter}
+    on:change={() => updateBehaviorConfig("defaultStatusFilter", statusFilter)}
+    class="select-input"
+  >
+    {#each statusOptions as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .select-input {
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    background: var(--surface0);
+    color: var(--text);
+    font-size: 13px;
+    cursor: pointer;
+    appearance: none;
+    padding-right: 24px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+
+  .select-input:hover {
+    background-color: var(--surface1);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--blue);
+  }
+
+  .select-input:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>
diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
similarity index 96%
rename from src/lib/components/ToolBar.svelte
rename to src/lib/components/toolbar/ToolBar.svelte
index 80c16ff..419d7b6 100644
--- a/src/lib/components/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AppInfo from "./AppInfo.svelte";
+  import AppInfo from "../AppInfo.svelte";
   import { statusMap } from "$lib/utils";
   import Fa from "svelte-fa";
   import {
@@ -10,6 +10,7 @@
   } from "@fortawesome/free-solid-svg-icons";
   import { configStore } from "$lib/stores/config";
   import type { AppConfig } from "$lib/types/config";
+  import StatusFilter from "./StatusFilter.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -87,18 +88,7 @@
         {/if}
       </div>
     </div>
-    <div class="toolbar-group">
-      <select
-        bind:value={statusFilter}
-        on:change={() =>
-          updateBehaviorConfig("defaultStatusFilter", statusFilter)}
-        class="select-input"
-      >
-        {#each statusOptions as option}
-          <option value={option.value}>{option.label}</option>
-        {/each}
-      </select>
-    </div>
+    <StatusFilter bind:statusFilter />
 
     <div class="toolbar-spacer"></div>
 
diff --git a/src/lib/components/toolbar/index.ts b/src/lib/components/toolbar/index.ts
new file mode 100644
index 0000000..880daaa
--- /dev/null
+++ b/src/lib/components/toolbar/index.ts
@@ -0,0 +1,6 @@
+export { default as ToolBar } from "./ToolBar.svelte";
+export { default as SearchBox } from "./SearchBox.svelte";
+export { default as StatusFilter } from "./StatusFilter.svelte";
+export { default as PaginationControls } from "./PaginationControls.svelte";
+export { default as ColumnToggle } from "./ColumnToggle.svelte";
+export { default as RefreshControls } from "./RefreshControls.svelte";
diff --git a/src/lib/constants/toolbar.ts b/src/lib/constants/toolbar.ts
new file mode 100644
index 0000000..5c63397
--- /dev/null
+++ b/src/lib/constants/toolbar.ts
@@ -0,0 +1,9 @@
+export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
+
+export const REFRESH_RATE_OPTIONS = [
+  { value: 1000, label: "1s" },
+  { value: 2000, label: "2s" },
+  { value: 5000, label: "5s" },
+  { value: 10000, label: "10s" },
+  { value: 30000, label: "30s" },
+];
diff --git a/src/lib/types/toolbar.ts b/src/lib/types/toolbar.ts
new file mode 100644
index 0000000..6d4e9f1
--- /dev/null
+++ b/src/lib/types/toolbar.ts
@@ -0,0 +1,28 @@
+export interface ColumnDefinition {
+  id: string;
+  label: string;
+  visible: boolean;
+  required?: boolean;
+}
+
+export interface StatusOption {
+  value: string;
+  label: string;
+}
+
+export interface RefreshRateOption {
+  value: number;
+  label: string;
+}
+
+export interface ToolBarProps {
+  searchTerm: string;
+  statusFilter: string;
+  itemsPerPage: number;
+  currentPage: number;
+  totalPages: number;
+  totalResults: number;
+  columns: ColumnDefinition[];
+  refreshRate: number;
+  isFrozen: boolean;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 25c7bf5..eb9b360 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   import { invoke } from "@tauri-apps/api/core";
   import { onMount, onDestroy } from "svelte";
   import { StatsBar } from "$lib/components/stats";
-  import ToolBar from "$lib/components/ToolBar.svelte";
+  import { ToolBar } from "$lib/components/toolbar";
   import { ProcessTable } from "$lib/components/process";
   import { ProcessDetailsModal } from "$lib/components/modals";
   import { KillProcessModal } from "$lib/components/modals";

From b5e4acf13f856f9acf63deff6d7663a36ed98f0d Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:46:17 +0100
Subject: [PATCH 08/14] searchbar

---
 src/lib/components/toolbar/SearchBox.svelte | 90 +++++++++++++++++++++
 src/lib/components/toolbar/ToolBar.svelte   | 17 +---
 2 files changed, 92 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/toolbar/SearchBox.svelte b/src/lib/components/toolbar/SearchBox.svelte
index e69de29..cb5acdf 100644
--- a/src/lib/components/toolbar/SearchBox.svelte
+++ b/src/lib/components/toolbar/SearchBox.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  export let searchTerm: string;
+</script>
+
+<div class="search-box">
+  <div class="search-input-wrapper">
+    <input
+      type="text"
+      placeholder="Search processes"
+      bind:value={searchTerm}
+      class="search-input"
+    />
+    {#if searchTerm}
+      <button class="btn-clear" on:click={() => (searchTerm = "")}>
+        Clear
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .search-box {
+    width: 240px;
+  }
+
+  .search-input-wrapper {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .search-input {
+    width: 100%;
+    height: 28px;
+    padding: 0 12px;
+    padding-right: 70px;
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    font-size: 12px;
+    background-color: var(--surface0);
+    color: var(--text);
+    transition: all 0.2s ease;
+  }
+
+  .btn-clear {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 4px 8px;
+    font-size: 11px;
+    color: var(--subtext0);
+    background: var(--surface1);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-clear:hover {
+    background: var(--surface2);
+    color: var(--text);
+  }
+
+  .search-input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    height: 14px;
+    width: 14px;
+    margin-right: 4px;
+    background: var(--overlay0);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
+      no-repeat 50% 50%;
+    cursor: pointer;
+  }
+
+  .search-input::-webkit-search-cancel-button:hover {
+    background: var(--text);
+  }
+
+  .search-input:hover {
+    background-color: var(--surface1);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
+  }
+</style>
diff --git a/src/lib/components/toolbar/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
index 419d7b6..68d3243 100644
--- a/src/lib/components/toolbar/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -11,6 +11,7 @@
   import { configStore } from "$lib/stores/config";
   import type { AppConfig } from "$lib/types/config";
   import StatusFilter from "./StatusFilter.svelte";
+  import SearchBox from "./SearchBox.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -73,21 +74,7 @@
 
 <div class="toolbar">
   <div class="toolbar-content">
-    <div class="search-box">
-      <div class="search-input-wrapper">
-        <input
-          type="text"
-          placeholder="Search processes"
-          bind:value={searchTerm}
-          class="search-input"
-        />
-        {#if searchTerm}
-          <button class="btn-clear" on:click={() => (searchTerm = "")}>
-            Clear
-          </button>
-        {/if}
-      </div>
-    </div>
+    <SearchBox bind:searchTerm />
     <StatusFilter bind:statusFilter />
 
     <div class="toolbar-spacer"></div>

From b9515c8ae35fa28c90d303ef06e7d1007f555f46 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:50:25 +0100
Subject: [PATCH 09/14] refresh controls

---
 .../components/toolbar/RefreshControls.svelte | 117 ++++++++++++++++++
 src/lib/components/toolbar/ToolBar.svelte     |  36 +-----
 2 files changed, 119 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/toolbar/RefreshControls.svelte b/src/lib/components/toolbar/RefreshControls.svelte
index e69de29..b679dcf 100644
--- a/src/lib/components/toolbar/RefreshControls.svelte
+++ b/src/lib/components/toolbar/RefreshControls.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+  import Fa from "svelte-fa";
+  import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let refreshRate: number;
+  export let isFrozen: boolean;
+
+  const refreshRateOptions = [
+    { value: 1000, label: "1s" },
+    { value: 2000, label: "2s" },
+    { value: 5000, label: "5s" },
+    { value: 10000, label: "10s" },
+    { value: 30000, label: "30s" },
+  ];
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="refresh-controls">
+  <select
+    class="select-input"
+    bind:value={refreshRate}
+    on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
+    disabled={isFrozen}
+  >
+    {#each refreshRateOptions as option}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+  <button
+    class="btn-action"
+    class:frozen={isFrozen}
+    on:click={() => (isFrozen = !isFrozen)}
+    title={isFrozen ? "Resume Updates" : "Pause Updates"}
+  >
+    {#if isFrozen}
+      <Fa icon={faPlay} />
+    {:else}
+      <Fa icon={faPause} />
+    {/if}
+  </button>
+</div>
+
+<style>
+  .refresh-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .refresh-controls :global(svg) {
+    font-size: 14px;
+    color: var(--subtext0);
+  }
+
+  .btn-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: var(--surface0);
+    color: var(--text);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-action:hover {
+    background: var(--surface1);
+  }
+
+  .btn-action.frozen {
+    background: var(--blue);
+    color: var(--base);
+  }
+
+  .select-input {
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    background: var(--surface0);
+    color: var(--text);
+    font-size: 13px;
+    cursor: pointer;
+    appearance: none;
+    padding-right: 24px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+
+  .select-input:hover {
+    background-color: var(--surface1);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--blue);
+  }
+
+  .select-input:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>
diff --git a/src/lib/components/toolbar/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
index 68d3243..a615e2f 100644
--- a/src/lib/components/toolbar/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -12,6 +12,7 @@
   import type { AppConfig } from "$lib/types/config";
   import StatusFilter from "./StatusFilter.svelte";
   import SearchBox from "./SearchBox.svelte";
+  import RefreshControls from "./RefreshControls.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -37,14 +38,6 @@
     })),
   ];
 
-  const refreshRateOptions = [
-    { value: 1000, label: "1s" },
-    { value: 2000, label: "2s" },
-    { value: 5000, label: "5s" },
-    { value: 10000, label: "10s" },
-    { value: 30000, label: "30s" },
-  ];
-
   function changePage(page: number) {
     if (page >= 1 && page <= totalPages) {
       currentPage = page;
@@ -166,32 +159,7 @@
       {/if}
     </div>
 
-    <div class="toolbar-group">
-      <div class="refresh-controls">
-        <select
-          class="select-input"
-          bind:value={refreshRate}
-          on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
-          disabled={isFrozen}
-        >
-          {#each refreshRateOptions as option}
-            <option value={option.value}>{option.label}</option>
-          {/each}
-        </select>
-        <button
-          class="btn-action"
-          class:frozen={isFrozen}
-          on:click={() => (isFrozen = !isFrozen)}
-          title={isFrozen ? "Resume Updates" : "Pause Updates"}
-        >
-          {#if isFrozen}
-            <Fa icon={faPlay} />
-          {:else}
-            <Fa icon={faPause} />
-          {/if}
-        </button>
-      </div>
-    </div>
+    <RefreshControls bind:refreshRate bind:isFrozen />
 
     <AppInfo />
   </div>

From d516169dee7cf2a07d3b53ee51d582f9ec4a5bf9 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:53:18 +0100
Subject: [PATCH 10/14] pagination controls

---
 .../toolbar/PaginationControls.svelte         | 149 ++++++++++++++++++
 src/lib/components/toolbar/ToolBar.svelte     | 134 +---------------
 2 files changed, 156 insertions(+), 127 deletions(-)

diff --git a/src/lib/components/toolbar/PaginationControls.svelte b/src/lib/components/toolbar/PaginationControls.svelte
index e69de29..fea258d 100644
--- a/src/lib/components/toolbar/PaginationControls.svelte
+++ b/src/lib/components/toolbar/PaginationControls.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  import type { AppConfig } from "$lib/types/config";
+  import { configStore } from "$lib/stores/config";
+
+  export let itemsPerPage: number;
+  export let currentPage: number;
+  export let totalPages: number;
+  export let totalResults: number;
+
+  const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
+
+  function changePage(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage = page;
+    }
+  }
+
+  function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
+    configStore.updateConfig({
+      behavior: {
+        ...$configStore.behavior,
+        [key]: value,
+      },
+    });
+  }
+</script>
+
+<div class="pagination-controls">
+  <select
+    class="select-input"
+    bind:value={itemsPerPage}
+    on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
+    aria-label="Items per page"
+  >
+    {#each itemsPerPageOptions as option}
+      <option value={option}>{option} per page</option>
+    {/each}
+  </select>
+
+  <div class="pagination">
+    <button
+      class="btn-page"
+      disabled={currentPage === 1}
+      on:click={() => changePage(1)}
+    >
+      ««
+    </button>
+    <button
+      class="btn-page"
+      disabled={currentPage === 1}
+      on:click={() => changePage(currentPage - 1)}
+    >
+      «
+    </button>
+    <div class="page-info">
+      <span>Page {currentPage} of {totalPages}</span>
+      <span class="results-info">({totalResults} processes)</span>
+    </div>
+    <button
+      class="btn-page"
+      disabled={currentPage === totalPages}
+      on:click={() => changePage(currentPage + 1)}
+    >
+      »
+    </button>
+    <button
+      class="btn-page"
+      disabled={currentPage === totalPages}
+      on:click={() => changePage(totalPages)}
+    >
+      »»
+    </button>
+  </div>
+</div>
+
+<style>
+  .pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .select-input {
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--text);
+    background: var(--surface0);
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    cursor: pointer;
+    appearance: none;
+    padding-right: 24px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+  }
+
+  .select-input:hover {
+    background-color: var(--surface1);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--blue);
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .btn-page {
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text);
+    background: var(--surface0);
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-page:hover:not(:disabled) {
+    background: var(--surface1);
+  }
+
+  .btn-page:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .page-info {
+    font-size: 12px;
+    color: var(--subtext0);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .page-info span {
+    display: block;
+  }
+
+  .results-info {
+    color: var(--overlay0);
+  }
+</style>
diff --git a/src/lib/components/toolbar/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
index a615e2f..0073ab3 100644
--- a/src/lib/components/toolbar/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -13,6 +13,7 @@
   import StatusFilter from "./StatusFilter.svelte";
   import SearchBox from "./SearchBox.svelte";
   import RefreshControls from "./RefreshControls.svelte";
+  import PaginationControls from "./PaginationControls.svelte";
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -28,7 +29,6 @@
   export let refreshRate: number;
   export let isFrozen: boolean;
 
-  const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
   let showColumnMenu = false;
   const statusOptions = [
     { value: "all", label: "All Statuses" },
@@ -38,12 +38,6 @@
     })),
   ];
 
-  function changePage(page: number) {
-    if (page >= 1 && page <= totalPages) {
-      currentPage = page;
-    }
-  }
-
   function handleColumnVisibilityChange(columnId: string, visible: boolean) {
     configStore.updateConfig({
       appearance: {
@@ -72,53 +66,12 @@
 
     <div class="toolbar-spacer"></div>
 
-    <div class="pagination-controls">
-      <select
-        class="select-input"
-        bind:value={itemsPerPage}
-        on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
-        aria-label="Items per page"
-      >
-        {#each itemsPerPageOptions as option}
-          <option value={option}>{option} per page</option>
-        {/each}
-      </select>
-
-      <div class="pagination">
-        <button
-          class="btn-page"
-          disabled={currentPage === 1}
-          on:click={() => changePage(1)}
-        >
-          ««
-        </button>
-        <button
-          class="btn-page"
-          disabled={currentPage === 1}
-          on:click={() => changePage(currentPage - 1)}
-        >
-          «
-        </button>
-        <div class="page-info">
-          <span>Page {currentPage} of {totalPages}</span>
-          <span class="results-info">({totalResults} processes)</span>
-        </div>
-        <button
-          class="btn-page"
-          disabled={currentPage === totalPages}
-          on:click={() => changePage(currentPage + 1)}
-        >
-          »
-        </button>
-        <button
-          class="btn-page"
-          disabled={currentPage === totalPages}
-          on:click={() => changePage(totalPages)}
-        >
-          »»
-        </button>
-      </div>
-    </div>
+    <PaginationControls
+      bind:itemsPerPage
+      bind:currentPage
+      {totalPages}
+      {totalResults}
+    />
     <div class="toolbar-spacer"></div>
 
     <div class="column-toggle">
@@ -255,79 +208,6 @@
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
   }
 
-  .pagination-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .select-input {
-    padding: 6px 12px;
-    font-size: 12px;
-    color: var(--text);
-    background: var(--surface0);
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    cursor: pointer;
-    appearance: none;
-    padding-right: 24px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cdd6f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 8px center;
-  }
-
-  .select-input:hover {
-    background-color: var(--surface1);
-  }
-
-  .select-input:focus {
-    outline: none;
-    border-color: var(--blue);
-  }
-
-  .pagination {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .btn-page {
-    padding: 6px 10px;
-    font-size: 12px;
-    color: var(--text);
-    background: var(--surface0);
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .btn-page:hover:not(:disabled) {
-    background: var(--surface1);
-  }
-
-  .btn-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .page-info {
-    font-size: 12px;
-    color: var(--subtext0);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-shrink: 0;
-  }
-
-  .page-info span {
-    display: block;
-  }
-
-  .results-info {
-    color: var(--overlay0);
-  }
-
   .column-toggle {
     position: relative;
   }

From c2afdfeaef0d86e0399ff1ed0a9b78faf16275e9 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 14:59:07 +0100
Subject: [PATCH 11/14] column toggle

---
 .../components/toolbar/ColumnToggle.svelte    | 173 ++++++++++
 src/lib/components/toolbar/ToolBar.svelte     | 315 +-----------------
 2 files changed, 181 insertions(+), 307 deletions(-)

diff --git a/src/lib/components/toolbar/ColumnToggle.svelte b/src/lib/components/toolbar/ColumnToggle.svelte
index e69de29..57704b6 100644
--- a/src/lib/components/toolbar/ColumnToggle.svelte
+++ b/src/lib/components/toolbar/ColumnToggle.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+  import Fa from "svelte-fa";
+  import {
+    faChevronDown,
+    faChevronRight,
+  } from "@fortawesome/free-solid-svg-icons";
+  import { configStore } from "$lib/stores/config";
+  import type { AppConfig } from "$lib/types/config";
+
+  export let columns: Array<{
+    id: string;
+    label: string;
+    visible: boolean;
+    required?: boolean;
+  }>;
+
+  let showColumnMenu = false;
+
+  function handleColumnVisibilityChange(columnId: string, visible: boolean) {
+    configStore.updateConfig({
+      appearance: {
+        columnVisibility: {
+          ...$configStore.appearance.columnVisibility,
+          [columnId]: visible,
+        },
+      },
+    });
+  }
+</script>
+
+<div class="column-toggle">
+  <button
+    class="btn-toggle"
+    on:click={() => (showColumnMenu = !showColumnMenu)}
+    aria-label="Toggle columns"
+  >
+    Columns
+    <span class="icon">
+      {#if showColumnMenu}
+        <Fa icon={faChevronDown} />
+      {:else}
+        <Fa icon={faChevronRight} />
+      {/if}
+    </span>
+  </button>
+
+  {#if showColumnMenu}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="column-menu" on:mouseleave={() => (showColumnMenu = false)}>
+      {#each columns as column}
+        <label class="column-option">
+          <input
+            type="checkbox"
+            checked={column.visible}
+            disabled={column.required}
+            on:change={(e) =>
+              handleColumnVisibilityChange(column.id, e.currentTarget.checked)}
+          />
+          <span>{column.label}</span>
+        </label>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .column-toggle {
+    position: relative;
+  }
+
+  .btn-toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--text);
+    background: var(--surface0);
+    border: 1px solid var(--surface1);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-toggle:hover {
+    background: var(--surface1);
+  }
+
+  .icon {
+    font-size: 10px;
+    color: var(--subtext0);
+  }
+
+  .column-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 4px;
+    padding: 8px;
+    background: var(--base);
+    border: 1px solid var(--surface0);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 100;
+    max-height: 300px;
+    overflow-y: auto;
+    min-width: 200px;
+  }
+
+  .column-menu::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .column-menu::-webkit-scrollbar-track {
+    background: var(--mantle);
+    border-radius: 4px;
+  }
+
+  .column-menu::-webkit-scrollbar-thumb {
+    background: var(--surface2);
+    border-radius: 4px;
+  }
+
+  .column-menu::-webkit-scrollbar-thumb:hover {
+    background: var(--surface1);
+  }
+
+  .column-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    font-size: 12px;
+    color: var(--text);
+    cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .column-option:hover {
+    background: var(--surface0);
+  }
+
+  .column-option input[type="checkbox"] {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--surface2);
+    border-radius: 4px;
+    background: var(--mantle);
+    cursor: pointer;
+    position: relative;
+  }
+
+  .column-option input[type="checkbox"]:checked {
+    background: var(--blue);
+    border-color: var(--blue);
+  }
+
+  .column-option input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    color: var(--base);
+    font-size: 12px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .column-option input[type="checkbox"]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>
diff --git a/src/lib/components/toolbar/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
index 0073ab3..1962066 100644
--- a/src/lib/components/toolbar/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -1,19 +1,13 @@
 <script lang="ts">
   import AppInfo from "../AppInfo.svelte";
-  import { statusMap } from "$lib/utils";
-  import Fa from "svelte-fa";
   import {
-    faPlay,
-    faPause,
-    faChevronDown,
-    faChevronRight,
-  } from "@fortawesome/free-solid-svg-icons";
-  import { configStore } from "$lib/stores/config";
-  import type { AppConfig } from "$lib/types/config";
-  import StatusFilter from "./StatusFilter.svelte";
-  import SearchBox from "./SearchBox.svelte";
-  import RefreshControls from "./RefreshControls.svelte";
-  import PaginationControls from "./PaginationControls.svelte";
+    StatusFilter,
+    SearchBox,
+    RefreshControls,
+    PaginationControls,
+    ColumnToggle,
+  } from "$lib/components/toolbar";
+
   export let searchTerm: string;
   export let statusFilter: string = "all";
   export let itemsPerPage: number;
@@ -28,35 +22,6 @@
   }>;
   export let refreshRate: number;
   export let isFrozen: boolean;
-
-  let showColumnMenu = false;
-  const statusOptions = [
-    { value: "all", label: "All Statuses" },
-    ...Object.values(statusMap).map((status) => ({
-      value: status.label,
-      label: status.label,
-    })),
-  ];
-
-  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">
@@ -74,43 +39,7 @@
     />
     <div class="toolbar-spacer"></div>
 
-    <div class="column-toggle">
-      <button
-        class="btn-toggle"
-        on:click={() => (showColumnMenu = !showColumnMenu)}
-        aria-label="Toggle columns"
-      >
-        Columns
-        <span class="icon">
-          {#if showColumnMenu}
-            <Fa icon={faChevronDown} />
-          {:else}
-            <Fa icon={faChevronRight} />
-          {/if}
-        </span>
-      </button>
-
-      {#if showColumnMenu}
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="column-menu" on:mouseleave={() => (showColumnMenu = false)}>
-          {#each columns as column}
-            <label class="column-option">
-              <input
-                type="checkbox"
-                checked={column.visible}
-                disabled={column.required}
-                on:change={(e) =>
-                  handleColumnVisibilityChange(
-                    column.id,
-                    e.currentTarget.checked,
-                  )}
-              />
-              <span>{column.label}</span>
-            </label>
-          {/each}
-        </div>
-      {/if}
-    </div>
+    <ColumnToggle {columns} />
 
     <RefreshControls bind:refreshRate bind:isFrozen />
 
@@ -136,232 +65,4 @@
   .toolbar-spacer {
     flex: 1;
   }
-
-  .search-box {
-    width: 240px;
-  }
-
-  .search-input-wrapper {
-    position: relative;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .search-input {
-    width: 240px;
-    height: 28px;
-    padding: 0 12px;
-    padding-right: 70px;
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    font-size: 12px;
-    background-color: var(--surface0);
-    color: var(--text);
-    transition: all 0.2s ease;
-  }
-
-  .btn-clear {
-    position: absolute;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 4px 8px;
-    font-size: 11px;
-    color: var(--subtext0);
-    background: var(--surface1);
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .btn-clear:hover {
-    background: var(--surface2);
-    color: var(--text);
-  }
-
-  .search-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    height: 14px;
-    width: 14px;
-    margin-right: 4px;
-    background: var(--overlay0);
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
-      no-repeat 50% 50%;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
-      no-repeat 50% 50%;
-    cursor: pointer;
-  }
-
-  .search-input::-webkit-search-cancel-button:hover {
-    background: var(--text);
-  }
-
-  .search-input:hover {
-    background-color: var(--surface1);
-  }
-
-  .search-input:focus {
-    outline: none;
-    border-color: var(--blue);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
-  }
-
-  .column-toggle {
-    position: relative;
-  }
-
-  .btn-toggle {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    font-size: 12px;
-    color: var(--text);
-    background: var(--surface0);
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .btn-toggle:hover {
-    background: var(--surface1);
-  }
-
-  .icon {
-    font-size: 10px;
-    color: var(--subtext0);
-  }
-
-  .column-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 4px;
-    padding: 8px;
-    background: var(--base);
-    border: 1px solid var(--surface0);
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    z-index: 100;
-    max-height: 300px;
-    overflow-y: auto;
-    min-width: 200px;
-  }
-
-  .column-menu::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  .column-menu::-webkit-scrollbar-track {
-    background: var(--mantle);
-    border-radius: 4px;
-  }
-
-  .column-menu::-webkit-scrollbar-thumb {
-    background: var(--surface2);
-    border-radius: 4px;
-  }
-
-  .column-menu::-webkit-scrollbar-thumb:hover {
-    background: var(--surface1);
-  }
-
-  .column-option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 8px;
-    font-size: 12px;
-    color: var(--text);
-    cursor: pointer;
-    border-radius: 4px;
-  }
-
-  .column-option:hover {
-    background: var(--surface0);
-  }
-
-  .column-option input[type="checkbox"] {
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    border: 1px solid var(--surface2);
-    border-radius: 4px;
-    background: var(--mantle);
-    cursor: pointer;
-    position: relative;
-  }
-
-  .column-option input[type="checkbox"]:checked {
-    background: var(--blue);
-    border-color: var(--blue);
-  }
-
-  .column-option input[type="checkbox"]:checked::after {
-    content: "✓";
-    position: absolute;
-    color: var(--base);
-    font-size: 12px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .column-option input[type="checkbox"]:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .refresh-controls {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .refresh-controls :global(svg) {
-    font-size: 14px;
-    color: var(--subtext0);
-  }
-
-  .btn-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    background: var(--surface0);
-    color: var(--text);
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .btn-action:hover {
-    background: var(--surface1);
-  }
-
-  .btn-action.frozen {
-    background: var(--blue);
-    color: var(--base);
-  }
-
-  .select-input {
-    height: 28px;
-    padding: 0 8px;
-    border: 1px solid var(--surface1);
-    border-radius: 6px;
-    background: var(--surface0);
-    color: var(--text);
-    font-size: 13px;
-    cursor: pointer;
-  }
-
-  .select-input:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
 </style>

From c909ec9ee470c712fb1aff96d350d886471a32cf Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 16:58:53 +0100
Subject: [PATCH 12/14] big mess

---
 src/lib/components/AppInfo.svelte             |  19 +-
 src/lib/components/ThemeSwitcher.svelte       |  45 +--
 src/lib/components/index.ts                   |   7 +
 .../components/modals/KillProcessModal.svelte |   2 +-
 .../modals/ProcessDetailsModal.svelte         |  20 +-
 src/lib/components/process/ProcessRow.svelte  |   4 +-
 .../components/process/ProcessTable.svelte    |   4 +-
 src/lib/components/stats/CpuPanel.svelte      |   3 +-
 src/lib/components/stats/MemoryPanel.svelte   |   4 +-
 src/lib/components/stats/NetworkPanel.svelte  |  17 +-
 src/lib/components/stats/ProgressBar.svelte   |   2 +-
 src/lib/components/stats/StatsBar.svelte      |  12 +-
 src/lib/components/stats/StoragePanel.svelte  |  18 +-
 src/lib/components/stats/SystemPanel.svelte   |   3 +-
 .../components/toolbar/ColumnToggle.svelte    |   7 +-
 .../toolbar/PaginationControls.svelte         |  13 +-
 .../components/toolbar/RefreshControls.svelte |  20 +-
 .../components/toolbar/StatusFilter.svelte    |  20 +-
 src/lib/components/toolbar/ToolBar.svelte     |   4 +-
 src/lib/constants/index.ts                    |  71 +++++
 src/lib/constants/toolbar.ts                  |   9 -
 src/lib/definitions/columns.ts                |  61 ++++
 src/lib/definitions/index.ts                  |   3 +
 .../config.ts => definitions/settings.ts}     |  11 +-
 .../index.ts => definitions/themes.ts}        |  28 +-
 src/lib/stores/index.ts                       |  61 +---
 src/lib/stores/processes.ts                   | 186 +++++++++++
 src/lib/stores/{config.ts => settings.ts}     |   8 +-
 src/lib/stores/theme.ts                       |  58 ++++
 src/lib/types/index.ts                        |  73 +++++
 src/lib/types/toolbar.ts                      |  28 --
 src/lib/utils/index.ts                        | 110 +++++--
 src/routes/+page.svelte                       | 294 ++++--------------
 33 files changed, 650 insertions(+), 575 deletions(-)
 create mode 100644 src/lib/components/index.ts
 create mode 100644 src/lib/constants/index.ts
 delete mode 100644 src/lib/constants/toolbar.ts
 create mode 100644 src/lib/definitions/columns.ts
 create mode 100644 src/lib/definitions/index.ts
 rename src/lib/{types/config.ts => definitions/settings.ts} (72%)
 rename src/lib/{styles/index.ts => definitions/themes.ts} (97%)
 create mode 100644 src/lib/stores/processes.ts
 rename src/lib/stores/{config.ts => settings.ts} (82%)
 create mode 100644 src/lib/stores/theme.ts
 delete mode 100644 src/lib/types/toolbar.ts

diff --git a/src/lib/components/AppInfo.svelte b/src/lib/components/AppInfo.svelte
index 9a4f77d..8fac7f6 100644
--- a/src/lib/components/AppInfo.svelte
+++ b/src/lib/components/AppInfo.svelte
@@ -1,31 +1,16 @@
 <script lang="ts">
   import { getVersion } from "@tauri-apps/api/app";
   import { onMount } from "svelte";
-  import ThemeSwitcher from "./ThemeSwitcher.svelte";
+  import { ThemeSwitcher } from "$lib/components";
   import { faInfo } from "@fortawesome/free-solid-svg-icons";
   import Fa from "svelte-fa";
+  import { ASCII_ART, APP_INFO } from "$lib/constants";
 
   let version = "";
   let latestVersion = "";
   let showInfo = false;
   let hasUpdate = false;
 
-  const ASCII_ART = `
-    ███╗   ██╗███████╗ ██████╗ ██╗  ██╗████████╗ ██████╗ ██████╗ 
-    ████╗  ██║██╔════╝██╔═══██╗██║  ██║╚══██╔══╝██╔═══██╗██╔══██╗
-    ██╔██╗ ██║█████╗  ██║   ██║███████║   ██║   ██║   ██║██████╔╝
-    ██║╚██╗██║██╔══╝  ██║   ██║██╔══██║   ██║   ██║   ██║██╔═══╝ 
-    ██║ ╚████║███████╗╚██████╔╝██║  ██║   ██║   ╚██████╔╝██║     
-    ╚═╝  ╚═══╝╚══════╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝     
-  `;
-
-  const APP_INFO = {
-    name: "NeoHtop",
-    developer: "Abdenasser",
-    github: "https://github.com/Abdenasser/neohtop",
-    stack: ["Tauri", "Rust", "Svelte", "TypeScript"],
-  };
-
   async function checkLatestVersion() {
     try {
       const response = await fetch(
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
index 80e070e..7d2595b 100644
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { themeStore } from "$lib/stores";
-  import { themes } from "$lib/styles";
+  import { themes } from "$lib/definitions";
   import { fade } from "svelte/transition";
   import Fa from "svelte-fa";
   import {
@@ -8,51 +8,12 @@
     faChevronRight,
   } from "@fortawesome/free-solid-svg-icons";
   import { platform } from "@tauri-apps/plugin-os";
+  import { THEME_GROUPS } from "$lib/constants";
 
   let showMenu = false;
 
   const themeGroups = [
-    {
-      label: "Dark",
-      themes: [
-        "catppuccin",
-        "dracula",
-        "monokaiPro",
-        "tokyoNight",
-        "ayuDark",
-        "ayuMirage",
-      ],
-    },
-    {
-      label: "Light",
-      themes: ["githubLight", "solarizedLight", "oneLight", "ayuLight"],
-    },
-    {
-      label: "Warm",
-      themes: ["gruvbox"],
-    },
-    {
-      label: "Cool",
-      themes: ["nord", "oneDark"],
-    },
-    {
-      label: "Fun",
-      themes: [
-        "bubblegum",
-        "rosePine",
-        "cottonCandy",
-        "synthwave",
-        "candyfloss",
-      ],
-    },
-    {
-      label: "Retro",
-      themes: ["terminal", "amber", "ibmPC"],
-    },
-    {
-      label: "Accessibility",
-      themes: ["highContrast"],
-    },
+    ...THEME_GROUPS,
     ...(platform() === "windows" || platform() === "macos"
       ? [
           {
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..774315a
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1,7 @@
+export * from "./toolbar";
+export * from "./process";
+export * from "./stats";
+export * from "./modals";
+export { default as AppInfo } from "./AppInfo.svelte";
+export { default as TitleBar } from "./TitleBar.svelte";
+export { default as ThemeSwitcher } from "./ThemeSwitcher.svelte";
diff --git a/src/lib/components/modals/KillProcessModal.svelte b/src/lib/components/modals/KillProcessModal.svelte
index c8d736a..6d69517 100644
--- a/src/lib/components/modals/KillProcessModal.svelte
+++ b/src/lib/components/modals/KillProcessModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Modal } from "$lib/components/modals";
+  import { Modal } from "$lib/components";
 
   interface Process {
     pid: number;
diff --git a/src/lib/components/modals/ProcessDetailsModal.svelte b/src/lib/components/modals/ProcessDetailsModal.svelte
index 3bf7df1..5090fc5 100644
--- a/src/lib/components/modals/ProcessDetailsModal.svelte
+++ b/src/lib/components/modals/ProcessDetailsModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Modal } from "$lib/components/modals";
-  import { formatStatus, formatUptime } from "$lib/utils";
+  import { Modal } from "$lib/components";
+  import { formatUptime, formatBytes, formatDate } from "$lib/utils";
   import type { Process } from "$lib/types";
   import Fa from "svelte-fa";
   import {
@@ -15,18 +15,6 @@
   export let onClose: () => void;
 
   $: currentProcess = process;
-
-  function formatBytes(bytes: number) {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024)
-      return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-  }
-
-  function formatDate(timestamp: number) {
-    return new Date(timestamp * 1000).toLocaleString();
-  }
 </script>
 
 <Modal {show} title="Process Details" maxWidth="700px" {onClose}>
@@ -54,9 +42,7 @@
           </div>
           <div class="detail-row">
             <span class="detail-label">Status:</span>
-            <span class="detail-value">
-              {@html formatStatus(currentProcess.status)}
-            </span>
+            <span class="detail-value">{currentProcess.status}</span>
           </div>
         </div>
       </section>
diff --git a/src/lib/components/process/ProcessRow.svelte b/src/lib/components/process/ProcessRow.svelte
index 07ea55b..1f60e0e 100644
--- a/src/lib/components/process/ProcessRow.svelte
+++ b/src/lib/components/process/ProcessRow.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
   import type { Process, Column } from "$lib/types";
-  import ProcessIcon from "./ProcessIcon.svelte";
-  import ActionButtons from "./ActionButtons.svelte";
+  import { ProcessIcon, ActionButtons } from "$lib/components";
 
   export let process: Process;
   export let columns: Column[];
-  export let systemStats: { memory_total: number } | null;
   export let isPinned: boolean;
   export let isHighUsage: boolean;
 
diff --git a/src/lib/components/process/ProcessTable.svelte b/src/lib/components/process/ProcessTable.svelte
index 7291e9f..f98932e 100644
--- a/src/lib/components/process/ProcessTable.svelte
+++ b/src/lib/components/process/ProcessTable.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { Process, Column } from "$lib/types";
-  import TableHeader from "./TableHeader.svelte";
-  import ProcessRow from "./ProcessRow.svelte";
+  import { TableHeader, ProcessRow } from "$lib/components";
 
   export let processes: Process[];
   export let columns: Column[];
@@ -23,7 +22,6 @@
         <ProcessRow
           {process}
           {columns}
-          {systemStats}
           isPinned={pinnedProcesses.has(process.command)}
           isHighUsage={process.cpu_usage > 50 ||
             process.memory_usage / (systemStats?.memory_total || 0) > 0.1}
diff --git a/src/lib/components/stats/CpuPanel.svelte b/src/lib/components/stats/CpuPanel.svelte
index 2111940..4a88f62 100644
--- a/src/lib/components/stats/CpuPanel.svelte
+++ b/src/lib/components/stats/CpuPanel.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { faMicrochip } from "@fortawesome/free-solid-svg-icons";
-  import PanelHeader from "./PanelHeader.svelte";
-  import ProgressBar from "./ProgressBar.svelte";
+  import { PanelHeader, ProgressBar } from "$lib/components";
   import { formatPercentage } from "$lib/utils";
 
   export let cpuUsage: number[];
diff --git a/src/lib/components/stats/MemoryPanel.svelte b/src/lib/components/stats/MemoryPanel.svelte
index 08f2930..e329670 100644
--- a/src/lib/components/stats/MemoryPanel.svelte
+++ b/src/lib/components/stats/MemoryPanel.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import { faMemory } from "@fortawesome/free-solid-svg-icons";
-  import PanelHeader from "./PanelHeader.svelte";
-  import ProgressBar from "./ProgressBar.svelte";
-  import StatItem from "./StatItem.svelte";
+  import { PanelHeader, ProgressBar, StatItem } from "$lib/components";
   import { formatMemorySize, formatPercentage } from "$lib/utils";
 
   export let memoryTotal: number;
diff --git a/src/lib/components/stats/NetworkPanel.svelte b/src/lib/components/stats/NetworkPanel.svelte
index e373e51..2e2d0a7 100644
--- a/src/lib/components/stats/NetworkPanel.svelte
+++ b/src/lib/components/stats/NetworkPanel.svelte
@@ -1,23 +1,10 @@
 <script lang="ts">
   import { faNetworkWired } from "@fortawesome/free-solid-svg-icons";
-  import PanelHeader from "./PanelHeader.svelte";
-  import StatItem from "./StatItem.svelte";
+  import { PanelHeader, StatItem } from "$lib/components";
+  import { formatBytes } from "$lib/utils";
 
   export let networkRxBytes: number;
   export let networkTxBytes: number;
-
-  function formatBytes(bytes: number): string {
-    const units = ["B", "KB", "MB", "GB", "TB"];
-    let value = bytes;
-    let unitIndex = 0;
-
-    while (value >= 1024 && unitIndex < units.length - 1) {
-      value /= 1024;
-      unitIndex++;
-    }
-
-    return `${value.toFixed(1)} ${units[unitIndex]}/s`;
-  }
 </script>
 
 <div class="stat-panel">
diff --git a/src/lib/components/stats/ProgressBar.svelte b/src/lib/components/stats/ProgressBar.svelte
index 0834121..830d21d 100644
--- a/src/lib/components/stats/ProgressBar.svelte
+++ b/src/lib/components/stats/ProgressBar.svelte
@@ -21,7 +21,7 @@
     <div
       class="usage-bar {getUsageClass(value)}"
       style="transform: translateX({value - 100}%);"
-    />
+    ></div>
   </div>
   <span class="value">{Math.round(value)}%</span>
 </div>
diff --git a/src/lib/components/stats/StatsBar.svelte b/src/lib/components/stats/StatsBar.svelte
index 949d770..b4fa191 100644
--- a/src/lib/components/stats/StatsBar.svelte
+++ b/src/lib/components/stats/StatsBar.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import type { SystemStats } from "$lib/types";
-  import CpuPanel from "./CpuPanel.svelte";
-  import MemoryPanel from "./MemoryPanel.svelte";
-  import StoragePanel from "./StoragePanel.svelte";
-  import SystemPanel from "./SystemPanel.svelte";
-  import NetworkPanel from "./NetworkPanel.svelte";
+  import {
+    CpuPanel,
+    MemoryPanel,
+    StoragePanel,
+    SystemPanel,
+    NetworkPanel,
+  } from "$lib/components";
 
   export let systemStats: SystemStats | null = null;
 </script>
diff --git a/src/lib/components/stats/StoragePanel.svelte b/src/lib/components/stats/StoragePanel.svelte
index cf1fae1..9ed0431 100644
--- a/src/lib/components/stats/StoragePanel.svelte
+++ b/src/lib/components/stats/StoragePanel.svelte
@@ -1,26 +1,12 @@
 <script lang="ts">
   import { faHardDrive } from "@fortawesome/free-solid-svg-icons";
-  import PanelHeader from "./PanelHeader.svelte";
-  import StatItem from "./StatItem.svelte";
-  import { formatPercentage } from "$lib/utils";
+  import { PanelHeader, StatItem } from "$lib/components";
+  import { formatBytes, formatPercentage } from "$lib/utils";
 
   export let diskTotalBytes: number;
   export let diskUsedBytes: number;
   export let diskFreeBytes: number;
 
-  function formatBytes(bytes: number): string {
-    const units = ["B", "KB", "MB", "GB", "TB"];
-    let value = bytes;
-    let unitIndex = 0;
-
-    while (value >= 1024 && unitIndex < units.length - 1) {
-      value /= 1024;
-      unitIndex++;
-    }
-
-    return `${value.toFixed(1)} ${units[unitIndex]}`;
-  }
-
   $: diskUsagePercentage = (diskUsedBytes / diskTotalBytes) * 100;
 </script>
 
diff --git a/src/lib/components/stats/SystemPanel.svelte b/src/lib/components/stats/SystemPanel.svelte
index d8faf32..b5fd204 100644
--- a/src/lib/components/stats/SystemPanel.svelte
+++ b/src/lib/components/stats/SystemPanel.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { faServer } from "@fortawesome/free-solid-svg-icons";
-  import PanelHeader from "./PanelHeader.svelte";
-  import StatItem from "./StatItem.svelte";
+  import { PanelHeader, StatItem } from "$lib/components";
   import { formatUptime } from "$lib/utils";
 
   export let uptime: number;
diff --git a/src/lib/components/toolbar/ColumnToggle.svelte b/src/lib/components/toolbar/ColumnToggle.svelte
index 57704b6..e055a74 100644
--- a/src/lib/components/toolbar/ColumnToggle.svelte
+++ b/src/lib/components/toolbar/ColumnToggle.svelte
@@ -4,8 +4,7 @@
     faChevronDown,
     faChevronRight,
   } from "@fortawesome/free-solid-svg-icons";
-  import { configStore } from "$lib/stores/config";
-  import type { AppConfig } from "$lib/types/config";
+  import { settingsStore } from "$lib/stores";
 
   export let columns: Array<{
     id: string;
@@ -17,10 +16,10 @@
   let showColumnMenu = false;
 
   function handleColumnVisibilityChange(columnId: string, visible: boolean) {
-    configStore.updateConfig({
+    settingsStore.updateConfig({
       appearance: {
         columnVisibility: {
-          ...$configStore.appearance.columnVisibility,
+          ...$settingsStore.appearance.columnVisibility,
           [columnId]: visible,
         },
       },
diff --git a/src/lib/components/toolbar/PaginationControls.svelte b/src/lib/components/toolbar/PaginationControls.svelte
index fea258d..a9b05ae 100644
--- a/src/lib/components/toolbar/PaginationControls.svelte
+++ b/src/lib/components/toolbar/PaginationControls.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-  import type { AppConfig } from "$lib/types/config";
-  import { configStore } from "$lib/stores/config";
+  import type { AppConfig } from "$lib/types";
+  import { settingsStore } from "$lib/stores";
+  import { ITEMS_PER_PAGE_OPTIONS } from "$lib/constants";
 
   export let itemsPerPage: number;
   export let currentPage: number;
   export let totalPages: number;
   export let totalResults: number;
 
-  const itemsPerPageOptions = [15, 25, 50, 100, 250, 500];
-
   function changePage(page: number) {
     if (page >= 1 && page <= totalPages) {
       currentPage = page;
@@ -16,9 +15,9 @@
   }
 
   function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
-    configStore.updateConfig({
+    settingsStore.updateConfig({
       behavior: {
-        ...$configStore.behavior,
+        ...$settingsStore.behavior,
         [key]: value,
       },
     });
@@ -32,7 +31,7 @@
     on:change={() => updateBehaviorConfig("itemsPerPage", itemsPerPage)}
     aria-label="Items per page"
   >
-    {#each itemsPerPageOptions as option}
+    {#each ITEMS_PER_PAGE_OPTIONS as option}
       <option value={option}>{option} per page</option>
     {/each}
   </select>
diff --git a/src/lib/components/toolbar/RefreshControls.svelte b/src/lib/components/toolbar/RefreshControls.svelte
index b679dcf..b9d66b2 100644
--- a/src/lib/components/toolbar/RefreshControls.svelte
+++ b/src/lib/components/toolbar/RefreshControls.svelte
@@ -1,24 +1,16 @@
 <script lang="ts">
   import Fa from "svelte-fa";
   import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";
-  import type { AppConfig } from "$lib/types/config";
-  import { configStore } from "$lib/stores/config";
-
+  import type { AppConfig } from "$lib/types";
+  import { settingsStore } from "$lib/stores";
+  import { REFRESH_RATE_OPTIONS } from "$lib/constants";
   export let refreshRate: number;
   export let isFrozen: boolean;
 
-  const refreshRateOptions = [
-    { value: 1000, label: "1s" },
-    { value: 2000, label: "2s" },
-    { value: 5000, label: "5s" },
-    { value: 10000, label: "10s" },
-    { value: 30000, label: "30s" },
-  ];
-
   function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
-    configStore.updateConfig({
+    settingsStore.updateConfig({
       behavior: {
-        ...$configStore.behavior,
+        ...$settingsStore.behavior,
         [key]: value,
       },
     });
@@ -32,7 +24,7 @@
     on:change={() => updateBehaviorConfig("refreshRate", refreshRate)}
     disabled={isFrozen}
   >
-    {#each refreshRateOptions as option}
+    {#each REFRESH_RATE_OPTIONS as option}
       <option value={option.value}>{option.label}</option>
     {/each}
   </select>
diff --git a/src/lib/components/toolbar/StatusFilter.svelte b/src/lib/components/toolbar/StatusFilter.svelte
index e234844..0925f5e 100644
--- a/src/lib/components/toolbar/StatusFilter.svelte
+++ b/src/lib/components/toolbar/StatusFilter.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
-  import { statusMap } from "$lib/utils";
-  import type { AppConfig } from "$lib/types/config";
-  import { configStore } from "$lib/stores/config";
+  import { STATUS_OPTIONS } from "$lib/constants";
+  import type { AppConfig } from "$lib/types";
+  import { settingsStore } from "$lib/stores";
 
   export let statusFilter: string = "all";
 
-  const statusOptions = [
-    { value: "all", label: "All Statuses" },
-    ...Object.values(statusMap).map((status) => ({
-      value: status.label,
-      label: status.label,
-    })),
-  ];
-
   function updateBehaviorConfig(key: keyof AppConfig["behavior"], value: any) {
-    configStore.updateConfig({
+    settingsStore.updateConfig({
       behavior: {
-        ...$configStore.behavior,
+        ...$settingsStore.behavior,
         [key]: value,
       },
     });
@@ -29,7 +21,7 @@
     on:change={() => updateBehaviorConfig("defaultStatusFilter", statusFilter)}
     class="select-input"
   >
-    {#each statusOptions as option}
+    {#each STATUS_OPTIONS as option}
       <option value={option.value}>{option.label}</option>
     {/each}
   </select>
diff --git a/src/lib/components/toolbar/ToolBar.svelte b/src/lib/components/toolbar/ToolBar.svelte
index 1962066..c740517 100644
--- a/src/lib/components/toolbar/ToolBar.svelte
+++ b/src/lib/components/toolbar/ToolBar.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import AppInfo from "../AppInfo.svelte";
   import {
+    AppInfo,
     StatusFilter,
     SearchBox,
     RefreshControls,
     PaginationControls,
     ColumnToggle,
-  } from "$lib/components/toolbar";
+  } from "$lib/components";
 
   export let searchTerm: string;
   export let statusFilter: string = "all";
diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts
new file mode 100644
index 0000000..f8b24ba
--- /dev/null
+++ b/src/lib/constants/index.ts
@@ -0,0 +1,71 @@
+export const ASCII_ART = `
+███╗   ██╗███████╗ ██████╗ ██╗  ██╗████████╗ ██████╗ ██████╗ 
+████╗  ██║██╔════╝██╔═══██╗██║  ██║╚══██╔══╝██╔═══██╗██╔══██╗
+██╔██╗ ██║█████╗  ██║   ██║███████║   ██║   ██║   ██║██████╔╝
+██║╚██╗██║██╔══╝  ██║   ██║██╔══██║   ██║   ██║   ██║██╔═══╝ 
+██║ ╚████║███████╗╚██████╔╝██║  ██║   ██║   ╚██████╔╝██║     
+╚═╝  ╚═══╝╚══════╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝     
+`;
+
+export const APP_INFO = {
+  name: "NeoHtop",
+  developer: "Abdenasser",
+  github: "https://github.com/Abdenasser/neohtop",
+  stack: ["Tauri", "Rust", "Svelte", "TypeScript"],
+};
+
+export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
+
+export const REFRESH_RATE_OPTIONS = [
+  { value: 1000, label: "1s" },
+  { value: 2000, label: "2s" },
+  { value: 5000, label: "5s" },
+  { value: 10000, label: "10s" },
+  { value: 30000, label: "30s" },
+];
+
+export const STATUS_OPTIONS = [
+  { value: "all", label: "All Statuses" },
+  { value: "running", label: "Running" },
+  { value: "sleeping", label: "Sleeping" },
+  { value: "idle", label: "Idle" },
+  { value: "unknown", label: "Unknown" },
+];
+
+export const THEME_GROUPS = [
+  {
+    label: "Dark",
+    themes: [
+      "catppuccin",
+      "dracula",
+      "monokaiPro",
+      "tokyoNight",
+      "ayuDark",
+      "ayuMirage",
+    ],
+  },
+  {
+    label: "Light",
+    themes: ["githubLight", "solarizedLight", "oneLight", "ayuLight"],
+  },
+  {
+    label: "Warm",
+    themes: ["gruvbox"],
+  },
+  {
+    label: "Cool",
+    themes: ["nord", "oneDark"],
+  },
+  {
+    label: "Fun",
+    themes: ["bubblegum", "rosePine", "cottonCandy", "synthwave", "candyfloss"],
+  },
+  {
+    label: "Retro",
+    themes: ["terminal", "amber", "ibmPC"],
+  },
+  {
+    label: "Accessibility",
+    themes: ["highContrast"],
+  },
+];
diff --git a/src/lib/constants/toolbar.ts b/src/lib/constants/toolbar.ts
deleted file mode 100644
index 5c63397..0000000
--- a/src/lib/constants/toolbar.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const ITEMS_PER_PAGE_OPTIONS = [15, 25, 50, 100, 250, 500];
-
-export const REFRESH_RATE_OPTIONS = [
-  { value: 1000, label: "1s" },
-  { value: 2000, label: "2s" },
-  { value: 5000, label: "5s" },
-  { value: 10000, label: "10s" },
-  { value: 30000, label: "30s" },
-];
diff --git a/src/lib/definitions/columns.ts b/src/lib/definitions/columns.ts
new file mode 100644
index 0000000..61b86d6
--- /dev/null
+++ b/src/lib/definitions/columns.ts
@@ -0,0 +1,61 @@
+import type { Column } from "$lib/types";
+import { formatMemorySize } from "$lib/utils";
+
+export let column_definitions: Column[] = [
+  { id: "name", label: "Process Name", visible: true, required: true },
+  { id: "pid", label: "PID", visible: true, required: false },
+  {
+    id: "status",
+    label: "Status",
+    visible: true,
+  },
+  { id: "user", label: "User", visible: true },
+  {
+    id: "cpu_usage",
+    label: "CPU %",
+    visible: true,
+    format: (v) => v.toFixed(1) + "%",
+  },
+  {
+    id: "memory_usage",
+    label: "RAM",
+    visible: true,
+    format: (v) => (v / (1024 * 1024)).toFixed(1) + " MB",
+  },
+  {
+    id: "virtual_memory",
+    label: "VIRT",
+    visible: true,
+    format: (v) => formatMemorySize(v),
+  },
+  {
+    id: "disk_usage",
+    label: "Disk R/W",
+    visible: true,
+    format: (v) =>
+      `${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
+  },
+  { id: "ppid", label: "Parent PID", visible: false },
+  { id: "root", label: "Root", visible: false },
+  { id: "command", label: "Command", visible: false },
+  { id: "environ", label: "Environment Variables", visible: false },
+  { id: "session_id", label: "Session ID", visible: false },
+  {
+    id: "start_time",
+    label: "Start Time",
+    visible: false,
+    format: (v) => new Date(v * 1000).toLocaleString(), // v is the time where the process was started (in seconds) from epoch
+  },
+  {
+    id: "run_time",
+    label: "Run Time",
+    visible: true,
+    format: (v) => {
+      const seconds = v; // v is the time the process has been running in seconds
+      const hours = Math.floor(seconds / 3600);
+      const minutes = Math.floor((seconds % 3600) / 60);
+      const remainingSeconds = seconds % 60;
+      return `${hours}h ${minutes}m ${remainingSeconds}s`; // Format as HH:MM:SS
+    },
+  },
+];
diff --git a/src/lib/definitions/index.ts b/src/lib/definitions/index.ts
new file mode 100644
index 0000000..bdc4c1b
--- /dev/null
+++ b/src/lib/definitions/index.ts
@@ -0,0 +1,3 @@
+export * from "./columns";
+export * from "./settings";
+export * from "./themes";
diff --git a/src/lib/types/config.ts b/src/lib/definitions/settings.ts
similarity index 72%
rename from src/lib/types/config.ts
rename to src/lib/definitions/settings.ts
index 9affb5f..fcd489b 100644
--- a/src/lib/types/config.ts
+++ b/src/lib/definitions/settings.ts
@@ -1,13 +1,4 @@
-export interface AppConfig {
-  appearance: {
-    columnVisibility: Record<string, boolean>;
-  };
-  behavior: {
-    itemsPerPage: number;
-    refreshRate: number;
-    defaultStatusFilter: string;
-  };
-}
+import type { AppConfig } from "$lib/types";
 
 export const DEFAULT_CONFIG: AppConfig = {
   appearance: {
diff --git a/src/lib/styles/index.ts b/src/lib/definitions/themes.ts
similarity index 97%
rename from src/lib/styles/index.ts
rename to src/lib/definitions/themes.ts
index 8143a4f..4fc7188 100644
--- a/src/lib/styles/index.ts
+++ b/src/lib/definitions/themes.ts
@@ -1,30 +1,4 @@
-export interface Theme {
-  name: string;
-  label: string;
-  colors: {
-    base: string;
-    mantle: string;
-    crust: string;
-    text: string;
-    subtext0: string;
-    subtext1: string;
-    surface0: string;
-    surface1: string;
-    surface2: string;
-    overlay0: string;
-    overlay1: string;
-    blue: string;
-    lavender: string;
-    sapphire: string;
-    sky: string;
-    red: string;
-    maroon: string;
-    peach: string;
-    yellow: string;
-    green: string;
-    teal: string;
-  };
-}
+import type { Theme } from "$lib/types";
 
 export const themes: Record<string, Theme> = {
   catppuccin: {
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 6087dbb..d8836d7 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -1,58 +1,3 @@
-import { writable } from "svelte/store";
-import { themes, type Theme } from "$lib/styles";
-
-function createThemeStore() {
-  // Default theme
-  const defaultTheme = themes.catppuccin;
-
-  // Initialize with default theme
-  const { subscribe, set } = writable<Theme>(defaultTheme);
-
-  // Initialize theme on client-side only
-  if (typeof window !== "undefined") {
-    const storedTheme = localStorage.getItem("theme");
-    if (storedTheme && themes[storedTheme]) {
-      set(themes[storedTheme]);
-    }
-  }
-
-  return {
-    subscribe,
-    setTheme: (themeName: string) => {
-      const theme = themes[themeName];
-      if (theme) {
-        if (typeof window !== "undefined") {
-          localStorage.setItem("theme", themeName);
-          // Add this line to set the data-theme attribute
-          document.documentElement.setAttribute("data-theme", themeName);
-        }
-        set(theme);
-        applyTheme(theme);
-      }
-    },
-    init: () => {
-      const storedTheme =
-        typeof window !== "undefined" ? localStorage.getItem("theme") : null;
-      const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
-      if (typeof window !== "undefined") {
-        // Add this line to set the data-theme attribute on init
-        document.documentElement.setAttribute(
-          "data-theme",
-          storedTheme || "catppuccin",
-        );
-      }
-      applyTheme(theme);
-    },
-  };
-}
-
-function applyTheme(theme: Theme) {
-  if (typeof window !== "undefined") {
-    const root = document.documentElement;
-    Object.entries(theme.colors).forEach(([key, value]) => {
-      root.style.setProperty(`--${key}`, value);
-    });
-  }
-}
-
-export const themeStore = createThemeStore();
+export * from "./processes";
+export * from "./theme";
+export * from "./settings";
diff --git a/src/lib/stores/processes.ts b/src/lib/stores/processes.ts
new file mode 100644
index 0000000..96d34d9
--- /dev/null
+++ b/src/lib/stores/processes.ts
@@ -0,0 +1,186 @@
+import { writable, derived } from "svelte/store";
+import type { Process, SystemStats } from "$lib/types";
+import { invoke } from "@tauri-apps/api/core";
+
+interface ProcessStore {
+  processes: Process[];
+  systemStats: SystemStats | null;
+  error: string | null;
+  isLoading: boolean;
+  searchTerm: string;
+  currentPage: number;
+  pinnedProcesses: Set<string>;
+  selectedProcess: Process | null;
+  showInfoModal: boolean;
+  showConfirmModal: boolean;
+  processToKill: Process | null;
+  isKilling: boolean;
+  isFrozen: boolean;
+  selectedProcessPid: number | null;
+  sortConfig: {
+    field: keyof Process;
+    direction: "asc" | "desc";
+  };
+}
+
+const initialState: ProcessStore = {
+  processes: [],
+  systemStats: null,
+  error: null,
+  isLoading: true,
+  searchTerm: "",
+  currentPage: 1,
+  pinnedProcesses: new Set(),
+  selectedProcess: null,
+  showInfoModal: false,
+  showConfirmModal: false,
+  processToKill: null,
+  isKilling: false,
+  isFrozen: false,
+  selectedProcessPid: null,
+  sortConfig: {
+    field: "cpu_usage",
+    direction: "desc",
+  },
+};
+
+function createProcessStore() {
+  const { subscribe, set, update } = writable<ProcessStore>(initialState);
+
+  return {
+    subscribe,
+    set,
+    update,
+
+    setIsLoading: (isLoading: boolean) =>
+      update((state) => ({ ...state, isLoading })),
+
+    async getProcesses() {
+      try {
+        const result = await invoke<[Process[], SystemStats]>("get_processes");
+        update((state) => ({
+          ...state,
+          processes: result[0],
+          systemStats: result[1],
+          error: null,
+        }));
+      } 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 };
+      });
+    },
+
+    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,
+        selectedProcess: process,
+        showInfoModal: true,
+      }));
+    },
+
+    closeProcessDetails() {
+      update((state) => ({
+        ...state,
+        showInfoModal: false,
+        selectedProcess: null,
+        selectedProcessPid: null,
+      }));
+    },
+
+    confirmKillProcess(process: Process) {
+      update((state) => ({
+        ...state,
+        processToKill: process,
+        showConfirmModal: true,
+      }));
+    },
+
+    closeConfirmKill() {
+      update((state) => ({
+        ...state,
+        showConfirmModal: false,
+        processToKill: null,
+      }));
+    },
+
+    async handleConfirmKill() {
+      update((state) => ({ ...state, isKilling: true }));
+
+      try {
+        const pid = this.getState().processToKill?.pid;
+        if (pid) {
+          await this.killProcess(pid);
+        }
+      } finally {
+        update((state) => ({
+          ...state,
+          isKilling: false,
+          showConfirmModal: false,
+          processToKill: null,
+        }));
+      }
+    },
+
+    // Helper to get current state
+    getState() {
+      let currentState: ProcessStore | undefined;
+      subscribe((state) => {
+        currentState = state;
+      })();
+      return currentState!;
+    },
+  };
+}
+
+export const processStore = createProcessStore();
diff --git a/src/lib/stores/config.ts b/src/lib/stores/settings.ts
similarity index 82%
rename from src/lib/stores/config.ts
rename to src/lib/stores/settings.ts
index 55037b9..f7e500f 100644
--- a/src/lib/stores/config.ts
+++ b/src/lib/stores/settings.ts
@@ -1,8 +1,8 @@
 import { writable } from "svelte/store";
-import type { AppConfig } from "$lib/types/config";
-import { DEFAULT_CONFIG } from "$lib/types/config";
+import type { AppConfig } from "$lib/types";
+import { DEFAULT_CONFIG } from "$lib/definitions/settings";
 
-function createConfigStore() {
+function createSettingsStore() {
   const { subscribe, set, update } = writable<AppConfig>(DEFAULT_CONFIG);
 
   return {
@@ -33,4 +33,4 @@ function createConfigStore() {
   };
 }
 
-export const configStore = createConfigStore();
+export const settingsStore = createSettingsStore();
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
new file mode 100644
index 0000000..735f874
--- /dev/null
+++ b/src/lib/stores/theme.ts
@@ -0,0 +1,58 @@
+import { writable } from "svelte/store";
+import { themes } from "$lib/definitions/themes";
+import type { Theme } from "$lib/types";
+function createThemeStore() {
+  // Default theme
+  const defaultTheme = themes.catppuccin;
+
+  // Initialize with default theme
+  const { subscribe, set } = writable<Theme>(defaultTheme);
+
+  // Initialize theme on client-side only
+  if (typeof window !== "undefined") {
+    const storedTheme = localStorage.getItem("theme");
+    if (storedTheme && themes[storedTheme]) {
+      set(themes[storedTheme]);
+    }
+  }
+
+  return {
+    subscribe,
+    setTheme: (themeName: string) => {
+      const theme = themes[themeName];
+      if (theme) {
+        if (typeof window !== "undefined") {
+          localStorage.setItem("theme", themeName);
+          // Add this line to set the data-theme attribute
+          document.documentElement.setAttribute("data-theme", themeName);
+        }
+        set(theme);
+        applyTheme(theme);
+      }
+    },
+    init: () => {
+      const storedTheme =
+        typeof window !== "undefined" ? localStorage.getItem("theme") : null;
+      const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
+      if (typeof window !== "undefined") {
+        // Add this line to set the data-theme attribute on init
+        document.documentElement.setAttribute(
+          "data-theme",
+          storedTheme || "catppuccin",
+        );
+      }
+      applyTheme(theme);
+    },
+  };
+}
+
+function applyTheme(theme: Theme) {
+  if (typeof window !== "undefined") {
+    const root = document.documentElement;
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      root.style.setProperty(`--${key}`, value);
+    });
+  }
+}
+
+export const themeStore = createThemeStore();
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index d9f3f2d..9305937 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -40,3 +40,76 @@ export interface Column {
   required?: boolean;
   format?: (value: any) => string;
 }
+
+export interface Theme {
+  name: string;
+  label: string;
+  colors: {
+    base: string;
+    mantle: string;
+    crust: string;
+    text: string;
+    subtext0: string;
+    subtext1: string;
+    surface0: string;
+    surface1: string;
+    surface2: string;
+    overlay0: string;
+    overlay1: string;
+    blue: string;
+    lavender: string;
+    sapphire: string;
+    sky: string;
+    red: string;
+    maroon: string;
+    peach: string;
+    yellow: string;
+    green: string;
+    teal: string;
+  };
+}
+
+export interface AppConfig {
+  appearance: {
+    columnVisibility: Record<string, boolean>;
+  };
+  behavior: {
+    itemsPerPage: number;
+    refreshRate: number;
+    defaultStatusFilter: string;
+  };
+}
+
+export interface ColumnDefinition {
+  id: string;
+  label: string;
+  visible: boolean;
+  required?: boolean;
+}
+
+export interface StatusOption {
+  value: string;
+  label: string;
+}
+
+export interface RefreshRateOption {
+  value: number;
+  label: string;
+}
+
+export interface ToolBarProps {
+  searchTerm: string;
+  statusFilter: string;
+  itemsPerPage: number;
+  currentPage: number;
+  totalPages: number;
+  totalResults: number;
+  columns: ColumnDefinition[];
+  refreshRate: number;
+  isFrozen: boolean;
+}
+
+export interface SortConfig {
+  field: keyof Process;
+  direction: "asc" | "desc";
+}
diff --git a/src/lib/types/toolbar.ts b/src/lib/types/toolbar.ts
deleted file mode 100644
index 6d4e9f1..0000000
--- a/src/lib/types/toolbar.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export interface ColumnDefinition {
-  id: string;
-  label: string;
-  visible: boolean;
-  required?: boolean;
-}
-
-export interface StatusOption {
-  value: string;
-  label: string;
-}
-
-export interface RefreshRateOption {
-  value: number;
-  label: string;
-}
-
-export interface ToolBarProps {
-  searchTerm: string;
-  statusFilter: string;
-  itemsPerPage: number;
-  currentPage: number;
-  totalPages: number;
-  totalResults: number;
-  columns: ColumnDefinition[];
-  refreshRate: number;
-  isFrozen: boolean;
-}
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 15dedd1..fd3a730 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1,39 +1,12 @@
+import type { Process } from "$lib/types";
+import type { SortConfig } from "$lib/types";
+
 export interface ProcessStatus {
   label: string;
   emoji: string;
   color: string;
 }
 
-export const statusMap: Record<string, ProcessStatus> = {
-  Running: {
-    label: "Running",
-    emoji: "🏃",
-    color: "var(--green)",
-  },
-  Sleeping: {
-    label: "Sleeping",
-    emoji: "😴",
-    color: "var(--blue)",
-  },
-  Idle: {
-    label: "Idle",
-    emoji: "⌛",
-    color: "var(--overlay0)",
-  },
-  Unknown: {
-    label: "Unknown",
-    emoji: "❓",
-    color: "var(--overlay0)",
-  },
-};
-
-export function formatStatus(status: string): string {
-  const processStatus = statusMap[status] || statusMap.Unknown;
-  return `<span class="status-badge" style="--status-color: ${processStatus.color}">
-    ${processStatus.label}
-  </span>`;
-}
-
 export function formatMemorySize(bytes: number): string {
   const gb = bytes / (1024 * 1024 * 1024);
   return `${gb.toFixed(1)} GB`;
@@ -56,3 +29,80 @@ export function getUsageClass(percentage: number): string {
   if (percentage >= 30) return "medium";
   return "low";
 }
+
+export function formatBytes(bytes: number): string {
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+
+  return `${value.toFixed(1)} ${units[unitIndex]}`;
+}
+
+export function formatDate(timestamp: number) {
+  return new Date(timestamp * 1000).toLocaleString();
+}
+
+export function filterProcesses(
+  processes: Process[],
+  searchTerm: string,
+  statusFilter: string,
+): Process[] {
+  return processes.filter((process) => {
+    let matchesSearch = searchTerm.length === 0;
+    searchTerm
+      .split(",")
+      .map((term) => term.trim())
+      .forEach((term) => {
+        const nameSubstringMatch = process.name
+          .toLowerCase()
+          .includes(term.toLowerCase());
+        const nameRegexMatch = (() => {
+          try {
+            return new RegExp(term, "i").test(process.name);
+          } catch {
+            return false;
+          }
+        })();
+        const commandMatch = process.command
+          .toLowerCase()
+          .includes(term.toLowerCase());
+        const pidMatch = process.pid.toString().includes(term);
+        matchesSearch ||=
+          nameSubstringMatch || nameRegexMatch || commandMatch || pidMatch;
+      });
+
+    const matchesStatus =
+      statusFilter === "all"
+        ? true
+        : process.status.toLowerCase() === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+}
+
+export function sortProcesses(
+  processes: Process[],
+  sortConfig: SortConfig,
+  pinnedProcesses: Set<string>,
+): Process[] {
+  return [...processes].sort((a, b) => {
+    const aPin = pinnedProcesses.has(a.command);
+    const bPin = pinnedProcesses.has(b.command);
+    if (aPin && !bPin) return -1;
+    if (!aPin && bPin) return 1;
+
+    const aValue = a[sortConfig.field];
+    const bValue = b[sortConfig.field];
+    const direction = sortConfig.direction === "asc" ? 1 : -1;
+
+    if (typeof aValue === "string" && typeof bValue === "string") {
+      return direction * aValue.localeCompare(bValue);
+    }
+    return direction * (Number(aValue) - Number(bValue));
+  });
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index eb9b360..a1ca4fe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,154 +1,53 @@
 <script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
   import { onMount, onDestroy } from "svelte";
-  import { StatsBar } from "$lib/components/stats";
-  import { ToolBar } from "$lib/components/toolbar";
-  import { ProcessTable } from "$lib/components/process";
-  import { ProcessDetailsModal } from "$lib/components/modals";
-  import { KillProcessModal } from "$lib/components/modals";
-  import { formatMemorySize, formatStatus } from "$lib/utils";
-  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";
+  import {
+    StatsBar,
+    ToolBar,
+    TitleBar,
+    ProcessTable,
+    ProcessDetailsModal,
+    KillProcessModal,
+  } from "$lib/components/index";
+  import { themeStore, settingsStore, processStore } from "$lib/stores/index";
+  import { column_definitions } from "$lib/definitions/columns";
+  import { filterProcesses, sortProcesses } from "$lib/utils";
+
+  $: ({
+    processes,
+    systemStats,
+    error,
+    searchTerm,
+    isLoading,
+    currentPage,
+    pinnedProcesses,
+    selectedProcess,
+    showInfoModal,
+    showConfirmModal,
+    processToKill,
+    isKilling,
+    isFrozen,
+    sortConfig,
+  } = $processStore);
 
-  let processes: Process[] = [];
-  let systemStats: SystemStats | null = null;
   let intervalId: number;
-  let error: string | null = null;
-  let searchTerm = "";
-  let isLoading = true;
-  let currentPage = 1;
-  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 isFrozen = false;
-  let selectedProcessPid: number | null = null;
 
-  let columnDefinitions: Column[] = [
-    { id: "name", label: "Process Name", visible: true, required: true },
-    { id: "pid", label: "PID", visible: true, required: false },
-    {
-      id: "status",
-      label: "Status",
-      visible: true,
-      format: (v) => v,
-    },
-    { id: "user", label: "User", visible: true },
-    {
-      id: "cpu_usage",
-      label: "CPU %",
-      visible: true,
-      format: (v) => v.toFixed(1) + "%",
-    },
-    {
-      id: "memory_usage",
-      label: "RAM",
-      visible: true,
-      format: (v) => (v / (1024 * 1024)).toFixed(1) + " MB",
-    },
-    {
-      id: "virtual_memory",
-      label: "VIRT",
-      visible: true,
-      format: (v) => formatMemorySize(v),
-    },
-    {
-      id: "disk_usage",
-      label: "Disk R/W",
-      visible: true,
-      format: (v) =>
-        `${(v[0] / (1024 * 1024)).toFixed(1)} / ${(v[1] / (1024 * 1024)).toFixed(1)} MB`,
-    },
-    { id: "ppid", label: "Parent PID", visible: false },
-    { id: "root", label: "Root", visible: false },
-    { id: "command", label: "Command", visible: false },
-    { id: "environ", label: "Environment Variables", visible: false },
-    { id: "session_id", label: "Session ID", visible: false },
-    {
-      id: "start_time",
-      label: "Start Time",
-      visible: false,
-      format: (v) => new Date(v * 1000).toLocaleString(), // v is the time where the process was started (in seconds) from epoch
-    },
-    {
-      id: "run_time",
-      label: "Run Time",
-      visible: true,
-      format: (v) => {
-        const seconds = v; // v is the time the process has been running in seconds
-        const hours = Math.floor(seconds / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const remainingSeconds = seconds % 60;
-        return `${hours}h ${minutes}m ${remainingSeconds}s`; // Format as HH:MM:SS
-      },
-    },
-  ];
-
-  // Merge column definitions with stored visibility
-  $: columns = columnDefinitions.map((col) => ({
+  $: columns = column_definitions.map((col) => ({
     ...col,
     visible:
       col.required ||
-      ($configStore.appearance.columnVisibility[col.id] ?? col.visible),
+      ($settingsStore.appearance.columnVisibility[col.id] ?? col.visible),
   }));
-  $: itemsPerPage = $configStore.behavior.itemsPerPage;
-  $: refreshRate = $configStore.behavior.refreshRate;
-  $: statusFilter = $configStore.behavior.defaultStatusFilter;
+  $: itemsPerPage = $settingsStore.behavior.itemsPerPage;
+  $: refreshRate = $settingsStore.behavior.refreshRate;
+  $: statusFilter = $settingsStore.behavior.defaultStatusFilter;
 
-  let sortConfig = {
-    field: "cpu_usage" as keyof Process,
-    direction: "desc" as "asc" | "desc",
-  };
+  $: filteredProcesses = filterProcesses(processes, searchTerm, statusFilter);
 
-  $: filteredProcesses = processes.filter((process) => {
-    let matchesSearch = searchTerm.length === 0;
-    searchTerm
-      .split(",")
-      .map((term) => term.trim())
-      .forEach((term) => {
-        const nameSubstringMatch = process.name
-          .toLowerCase()
-          .includes(term.toLowerCase());
-        const nameRegexMatch = (() => {
-          try {
-            return new RegExp(term, "i").test(process.name);
-          } catch {
-            return false;
-          }
-        })();
-        const commandMatch = process.command
-          .toLowerCase()
-          .includes(term.toLowerCase());
-        const pidMatch = process.pid.toString().includes(term);
-        matchesSearch ||=
-          nameSubstringMatch || nameRegexMatch || commandMatch || pidMatch;
-      });
-
-    const matchesStatus =
-      statusFilter === "all" ? true : process.status === statusFilter;
-
-    return matchesSearch && matchesStatus;
-  });
-
-  $: sortedProcesses = filteredProcesses.sort((a, b) => {
-    const aPin = pinnedProcesses.has(a.command);
-    const bPin = pinnedProcesses.has(b.command);
-    if (aPin && !bPin) return -1;
-    if (!aPin && bPin) return 1;
-
-    const aValue = a[sortConfig.field];
-    const bValue = b[sortConfig.field];
-    const direction = sortConfig.direction === "asc" ? 1 : -1;
-
-    if (typeof aValue === "string" && typeof bValue === "string") {
-      return direction * aValue.localeCompare(bValue);
-    }
-    return direction * (Number(aValue) - Number(bValue));
-  });
+  $: sortedProcesses = sortProcesses(
+    filteredProcesses,
+    sortConfig,
+    pinnedProcesses,
+  );
 
   $: totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
   $: paginatedProcesses = sortedProcesses.slice(
@@ -157,7 +56,6 @@
   );
 
   $: {
-    // Reset to first page when filtering or changing items per page
     if (searchTerm || itemsPerPage) {
       currentPage = 1;
     }
@@ -167,104 +65,21 @@
     if (intervalId) clearInterval(intervalId);
     if (!isFrozen) {
       intervalId = setInterval(() => {
-        getProcesses();
+        processStore.getProcesses();
       }, refreshRate);
     }
   }
 
-  $: if (selectedProcessPid && processes.length > 0) {
-    selectedProcess =
-      processes.find((p) => p.pid === selectedProcessPid) || null;
-  }
-
-  async function getProcesses() {
-    try {
-      const result = await invoke<[Process[], SystemStats]>("get_processes");
-      processes = result[0];
-      systemStats = result[1];
-      error = null;
-    } catch (e: unknown) {
-      if (e instanceof Error) {
-        error = e.message;
-      } else {
-        error = String(e);
-      }
-    }
-  }
-
-  async function killProcess(pid: number) {
-    try {
-      const success = await invoke<boolean>("kill_process", { pid });
-      if (success) {
-        await getProcesses();
-      }
-    } catch (e: unknown) {
-      if (e instanceof Error) {
-        error = e.message;
-      } else {
-        error = String(e);
-      }
-    }
-  }
-
-  function toggleSort(field: keyof Process) {
-    if (sortConfig.field === field) {
-      sortConfig.direction = sortConfig.direction === "asc" ? "desc" : "asc";
-    } else {
-      sortConfig.field = field;
-      sortConfig.direction = "desc";
-    }
-  }
-
-  function togglePin(command: string) {
-    if (pinnedProcesses.has(command)) {
-      pinnedProcesses.delete(command);
-    } else {
-      pinnedProcesses.add(command);
-    }
-    pinnedProcesses = pinnedProcesses; // Trigger reactivity
-  }
-
-  function showProcessDetails(process: Process) {
-    selectedProcessPid = process.pid;
-    selectedProcess = process;
-    showInfoModal = true;
-  }
-
-  function confirmKillProcess(process: Process) {
-    processToKill = process;
-    showConfirmModal = true;
-  }
-
-  async function handleConfirmKill() {
-    if (processToKill) {
-      isKilling = true;
-      try {
-        await killProcess(processToKill.pid);
-      } finally {
-        isKilling = false;
-        showConfirmModal = false;
-        processToKill = null;
-      }
-    }
-  }
-
-  function handleModalClose() {
-    showInfoModal = false;
-    selectedProcess = null;
-    selectedProcessPid = null;
-  }
-
   onMount(async () => {
     try {
-      await getProcesses();
+      await processStore.getProcesses();
     } catch (error) {
       console.error("Failed to load processes:", error);
     } finally {
-      isLoading = false;
+      processStore.setIsLoading(false);
     }
 
-    configStore.init();
+    settingsStore.init();
     themeStore.init();
   });
 
@@ -288,12 +103,12 @@
       {/if}
 
       <ToolBar
-        bind:searchTerm
+        bind:searchTerm={$processStore.searchTerm}
         bind:statusFilter
         bind:itemsPerPage
-        bind:currentPage
+        bind:currentPage={$processStore.currentPage}
         bind:refreshRate
-        bind:isFrozen
+        bind:isFrozen={$processStore.isFrozen}
         {totalPages}
         totalResults={filteredProcesses.length}
         bind:columns
@@ -309,10 +124,10 @@
         {systemStats}
         {sortConfig}
         {pinnedProcesses}
-        onToggleSort={toggleSort}
-        onTogglePin={togglePin}
-        onShowDetails={showProcessDetails}
-        onKillProcess={confirmKillProcess}
+        onToggleSort={processStore.toggleSort}
+        onTogglePin={processStore.togglePin}
+        onShowDetails={processStore.showProcessDetails}
+        onKillProcess={processStore.confirmKillProcess}
       />
     </main>
   </div>
@@ -321,18 +136,15 @@
 <ProcessDetailsModal
   show={showInfoModal}
   process={selectedProcess}
-  onClose={handleModalClose}
+  onClose={processStore.closeProcessDetails}
 />
 
 <KillProcessModal
   show={showConfirmModal}
   process={processToKill}
   {isKilling}
-  onClose={() => {
-    showConfirmModal = false;
-    processToKill = null;
-  }}
-  onConfirm={handleConfirmKill}
+  onClose={processStore.closeConfirmKill}
+  onConfirm={processStore.handleConfirmKill}
 />
 
 <style>

From 821f67105bfd523e1fdaf75d3f8e0f67088a26a0 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 17:38:07 +0100
Subject: [PATCH 13/14] improve sorting and filtering

---
 src/lib/utils/index.ts | 114 +++++++++++++++++++++++++++++------------
 1 file changed, 80 insertions(+), 34 deletions(-)

diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index fd3a730..d3aecaa 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -47,61 +47,107 @@ export function formatDate(timestamp: number) {
   return new Date(timestamp * 1000).toLocaleString();
 }
 
+// Cache for compiled regex patterns
+const regexCache = new Map<string, RegExp>();
+
 export function filterProcesses(
   processes: Process[],
   searchTerm: string,
   statusFilter: string,
 ): Process[] {
+  // Early return for empty search and "all" status
+  if (searchTerm.length === 0 && statusFilter === "all") {
+    return processes;
+  }
+
+  // Pre-process search terms once
+  const terms =
+    searchTerm.length > 0
+      ? searchTerm.split(",").map((term) => term.trim())
+      : [];
+
   return processes.filter((process) => {
-    let matchesSearch = searchTerm.length === 0;
-    searchTerm
-      .split(",")
-      .map((term) => term.trim())
-      .forEach((term) => {
-        const nameSubstringMatch = process.name
-          .toLowerCase()
-          .includes(term.toLowerCase());
-        const nameRegexMatch = (() => {
-          try {
-            return new RegExp(term, "i").test(process.name);
-          } catch {
-            return false;
-          }
-        })();
-        const commandMatch = process.command
-          .toLowerCase()
-          .includes(term.toLowerCase());
-        const pidMatch = process.pid.toString().includes(term);
-        matchesSearch ||=
-          nameSubstringMatch || nameRegexMatch || commandMatch || pidMatch;
-      });
+    // Early status check
+    if (
+      statusFilter !== "all" &&
+      process.status.toLowerCase() !== statusFilter
+    ) {
+      return false;
+    }
 
-    const matchesStatus =
-      statusFilter === "all"
-        ? true
-        : process.status.toLowerCase() === statusFilter;
+    // Skip search if no terms
+    if (terms.length === 0) {
+      return true;
+    }
 
-    return matchesSearch && matchesStatus;
+    // Cache lowercase values
+    const processNameLower = process.name.toLowerCase();
+    const processCommandLower = process.command.toLowerCase();
+    const processPidString = process.pid.toString();
+
+    // Check each term
+    return terms.some((term) => {
+      const termLower = term.toLowerCase();
+
+      // Try exact matches first (faster)
+      if (
+        processNameLower.includes(termLower) ||
+        processCommandLower.includes(termLower) ||
+        processPidString.includes(term)
+      ) {
+        return true;
+      }
+
+      // Try regex match last (slower)
+      try {
+        let regex = regexCache.get(term);
+        if (!regex) {
+          regex = new RegExp(term, "i");
+          regexCache.set(term, regex);
+        }
+        return regex.test(process.name);
+      } catch {
+        return false;
+      }
+    });
   });
 }
 
+// Create a Map for quick pinned status lookup
+const isPinned = new Map<string, boolean>();
+
 export function sortProcesses(
   processes: Process[],
   sortConfig: SortConfig,
   pinnedProcesses: Set<string>,
 ): Process[] {
   return [...processes].sort((a, b) => {
-    const aPin = pinnedProcesses.has(a.command);
-    const bPin = pinnedProcesses.has(b.command);
-    if (aPin && !bPin) return -1;
-    if (!aPin && bPin) return 1;
+    // Cache pinned status
+    let aPin = isPinned.get(a.command);
+    if (aPin === undefined) {
+      aPin = pinnedProcesses.has(a.command);
+      isPinned.set(a.command, aPin);
+    }
 
+    let bPin = isPinned.get(b.command);
+    if (bPin === undefined) {
+      bPin = pinnedProcesses.has(b.command);
+      isPinned.set(b.command, bPin);
+    }
+
+    // Quick pin comparison
+    if (aPin !== bPin) {
+      return aPin ? -1 : 1;
+    }
+
+    // Only compute direction once
+    const direction = sortConfig.direction === "asc" ? 1 : -1;
     const aValue = a[sortConfig.field];
     const bValue = b[sortConfig.field];
-    const direction = sortConfig.direction === "asc" ? 1 : -1;
 
-    if (typeof aValue === "string" && typeof bValue === "string") {
-      return direction * aValue.localeCompare(bValue);
+    // Type-specific comparisons
+    if (typeof aValue === "string") {
+      return direction * aValue.localeCompare(bValue as string);
     }
     return direction * (Number(aValue) - Number(bValue));
   });

From a93ae705df708d9e2443d28b49c7a5a02d6c01cb Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Wed, 13 Nov 2024 18:32:44 +0100
Subject: [PATCH 14/14] small fixes

---
 .../modals/ProcessDetailsModal.svelte         |  42 ++-
 src/lib/stores/processes.ts                   | 254 ++++++++++--------
 src/lib/utils/index.ts                        |  17 +-
 3 files changed, 170 insertions(+), 143 deletions(-)

diff --git a/src/lib/components/modals/ProcessDetailsModal.svelte b/src/lib/components/modals/ProcessDetailsModal.svelte
index 5090fc5..e0480eb 100644
--- a/src/lib/components/modals/ProcessDetailsModal.svelte
+++ b/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}%"
-                  class:high={currentProcess.cpu_usage > 50}
-                  class:critical={currentProcess.cpu_usage > 80}
+                  style="width: {process.cpu_usage}%"
+                  class:high={process.cpu_usage > 50}
+                  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>Virtual: {formatBytes(currentProcess.virtual_memory)}</div>
+              <div>Physical: {formatBytes(process.memory_usage)}</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>Written: {formatBytes(currentProcess.disk_usage[1])}</div>
+              <div>Read: {formatBytes(process.disk_usage[0])}</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>Running: {formatUptime(currentProcess.run_time)}</div>
+              <div>Started: {formatDate(process.start_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>
diff --git a/src/lib/stores/processes.ts b/src/lib/stores/processes.ts
index 96d34d9..ec263f0 100644
--- a/src/lib/stores/processes.ts
+++ b/src/lib/stores/processes.ts
@@ -47,139 +47,171 @@ const initialState: ProcessStore = {
 function createProcessStore() {
   const { subscribe, set, update } = writable<ProcessStore>(initialState);
 
-  return {
-    subscribe,
-    set,
-    update,
+  // Define all methods first
+  const setIsLoading = (isLoading: boolean) =>
+    update((state) => ({ ...state, isLoading }));
 
-    setIsLoading: (isLoading: boolean) =>
-      update((state) => ({ ...state, isLoading })),
+  const getProcesses = async () => {
+    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() {
-      try {
-        const result = await invoke<[Process[], SystemStats]>("get_processes");
-        update((state) => ({
+        return {
           ...state,
           processes: result[0],
           systemStats: result[1],
           error: null,
-        }));
-      } 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 };
+          selectedProcess: updatedSelectedProcess,
+        };
       });
-    },
-
-    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) {
+    } catch (e: unknown) {
       update((state) => ({
         ...state,
-        selectedProcessPid: process.pid,
-        selectedProcess: process,
-        showInfoModal: true,
+        error: e instanceof Error ? e.message : String(e),
       }));
-    },
+    }
+  };
 
-    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,
-        selectedProcess: null,
-        selectedProcessPid: null,
+        error: e instanceof Error ? e.message : String(e),
       }));
-    },
+    } finally {
+      update((state) => ({ ...state, isKilling: false }));
+    }
+  };
 
-    confirmKillProcess(process: Process) {
-      update((state) => ({
-        ...state,
-        processToKill: process,
-        showConfirmModal: true,
-      }));
-    },
+  const toggleSort = (field: keyof Process) => {
+    update((state) => ({
+      ...state,
+      sortConfig: {
+        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() {
-      update((state) => ({ ...state, isKilling: true }));
-
-      try {
-        const pid = this.getState().processToKill?.pid;
-        if (pid) {
-          await this.killProcess(pid);
-        }
-      } finally {
-        update((state) => ({
-          ...state,
-          isKilling: false,
-          showConfirmModal: false,
-          processToKill: null,
-        }));
-      }
-    },
-
-    // Helper to get current state
-    getState() {
-      let currentState: ProcessStore | undefined;
-      subscribe((state) => {
-        currentState = state;
-      })();
-      return currentState!;
-    },
+  // Return all methods
+  return {
+    subscribe,
+    set,
+    update,
+    setIsLoading,
+    getProcesses,
+    killProcess,
+    toggleSort,
+    togglePin,
+    setSearchTerm,
+    setIsFrozen,
+    setCurrentPage,
+    showProcessDetails,
+    closeProcessDetails,
+    confirmKillProcess,
+    closeConfirmKill,
+    handleConfirmKill,
   };
 }
 
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index d3aecaa..80c1e4f 100644
--- a/src/lib/utils/index.ts
+++ b/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);
-    if (aPin === undefined) {
-      aPin = pinnedProcesses.has(a.command);
-      isPinned.set(a.command, aPin);
-    }
+    let aPin = pinnedProcesses.has(a.command);
+    isPinned.set(a.command, aPin);
 
-    let bPin = isPinned.get(b.command);
-    if (bPin === undefined) {
-      bPin = pinnedProcesses.has(b.command);
-      isPinned.set(b.command, bPin);
-    }
+    let bPin = pinnedProcesses.has(b.command);
+    isPinned.set(b.command, bPin);
 
     // Quick pin comparison
     if (aPin !== bPin) {