big mess

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(

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 = [
-    {
+    ...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"],
-    },
     ...(platform() === "windows" || platform() === "macos"
       ? [
           {

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";

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;

src/lib/components/modals/ProcessDetailsModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Modal } from "$lib/components/modals";
+  import { Modal } from "$lib/components";
-  import { formatStatus, formatUptime } from "$lib/utils";
+  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">
+            <span class="detail-value">{currentProcess.status}</span>
-              {@html formatStatus(currentProcess.status)}
-            </span>
           </div>
         </div>
       </section>

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 { ProcessIcon, ActionButtons } from "$lib/components";
-  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;
 

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 { TableHeader, ProcessRow } from "$lib/components";
-  import ProcessRow from "./ProcessRow.svelte";
 
   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}

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 { PanelHeader, ProgressBar } from "$lib/components";
-  import ProgressBar from "./ProgressBar.svelte";
   import { formatPercentage } from "$lib/utils";
 
   export let cpuUsage: number[];

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 { PanelHeader, ProgressBar, StatItem } from "$lib/components";
-  import ProgressBar from "./ProgressBar.svelte";
-  import StatItem from "./StatItem.svelte";
   import { formatMemorySize, formatPercentage } from "$lib/utils";
 
   export let memoryTotal: number;

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 { PanelHeader, StatItem } from "$lib/components";
-  import StatItem from "./StatItem.svelte";
+  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">

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>

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 {
-  import MemoryPanel from "./MemoryPanel.svelte";
+    CpuPanel,
-  import StoragePanel from "./StoragePanel.svelte";
+    MemoryPanel,
-  import SystemPanel from "./SystemPanel.svelte";
+    StoragePanel,
-  import NetworkPanel from "./NetworkPanel.svelte";
+    SystemPanel,
+    NetworkPanel,
+  } from "$lib/components";
 
   export let systemStats: SystemStats | null = null;
 </script>

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 { PanelHeader, StatItem } from "$lib/components";
-  import StatItem from "./StatItem.svelte";
+  import { formatBytes, formatPercentage } from "$lib/utils";
-  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>
 

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 { PanelHeader, StatItem } from "$lib/components";
-  import StatItem from "./StatItem.svelte";
   import { formatUptime } from "$lib/utils";
 
   export let uptime: number;

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 { settingsStore } from "$lib/stores";
-  import type { AppConfig } from "$lib/types/config";
 
   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,
         },
       },

src/lib/components/toolbar/PaginationControls.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-  import type { AppConfig } from "$lib/types/config";
+  import type { AppConfig } from "$lib/types";
-  import { configStore } from "$lib/stores/config";
+  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>

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 type { AppConfig } from "$lib/types";
-  import { configStore } from "$lib/stores/config";
+  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>

src/lib/components/toolbar/StatusFilter.svelte

@@ -1,22 +1,14 @@
 <script lang="ts">
-  import { statusMap } from "$lib/utils";
+  import { STATUS_OPTIONS } from "$lib/constants";
-  import type { AppConfig } from "$lib/types/config";
+  import type { AppConfig } from "$lib/types";
-  import { configStore } from "$lib/stores/config";
+  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>

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";

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"],
+  },
+];

src/lib/constants/toolbar.ts

@@ -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" },
-];

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
+    },
+  },
+];

src/lib/definitions/index.ts

@@ -0,0 +1,3 @@
+export * from "./columns";
+export * from "./settings";
+export * from "./themes";

src/lib/definitions/settings.ts

@@ -1,13 +1,4 @@
-export interface AppConfig {
+import type { AppConfig } from "$lib/types";
-  appearance: {
-    columnVisibility: Record<string, boolean>;
-  };
-  behavior: {
-    itemsPerPage: number;
-    refreshRate: number;
-    defaultStatusFilter: string;
-  };
-}
 
 export const DEFAULT_CONFIG: AppConfig = {
   appearance: {

src/lib/definitions/themes.ts

@@ -1,30 +1,4 @@
-export interface Theme {
+import type { Theme } from "$lib/types";
-  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 const themes: Record<string, Theme> = {
   catppuccin: {

src/lib/stores/index.ts

@@ -1,58 +1,3 @@
-import { writable } from "svelte/store";
+export * from "./processes";
-import { themes, type Theme } from "$lib/styles";
+export * from "./theme";
-
+export * from "./settings";
-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();

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();

src/lib/stores/settings.ts

@@ -1,8 +1,8 @@
 import { writable } from "svelte/store";
-import type { AppConfig } from "$lib/types/config";
+import type { AppConfig } from "$lib/types";
-import { DEFAULT_CONFIG } from "$lib/types/config";
+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();

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();

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";
+}

src/lib/types/toolbar.ts

@@ -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;
-}

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));
+  });
+}

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 {
-  import { ToolBar } from "$lib/components/toolbar";
+    StatsBar,
-  import { ProcessTable } from "$lib/components/process";
+    ToolBar,
-  import { ProcessDetailsModal } from "$lib/components/modals";
+    TitleBar,
-  import { KillProcessModal } from "$lib/components/modals";
+    ProcessTable,
-  import { formatMemorySize, formatStatus } from "$lib/utils";
+    ProcessDetailsModal,
-  import { themeStore } from "$lib/stores";
+    KillProcessModal,
-  import type { Process, SystemStats, Column } from "$lib/types";
+  } from "$lib/components/index";
-  import TitleBar from "$lib/components/TitleBar.svelte";
+  import { themeStore, settingsStore, processStore } from "$lib/stores/index";
-  import { configStore } from "$lib/stores/config";
+  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[] = [
+  $: columns = column_definitions.map((col) => ({
-    { 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) => ({
     ...col,
     visible:
       col.required ||
-      ($configStore.appearance.columnVisibility[col.id] ?? col.visible),
+      ($settingsStore.appearance.columnVisibility[col.id] ?? col.visible),
   }));
-  $: itemsPerPage = $configStore.behavior.itemsPerPage;
+  $: itemsPerPage = $settingsStore.behavior.itemsPerPage;
-  $: refreshRate = $configStore.behavior.refreshRate;
+  $: refreshRate = $settingsStore.behavior.refreshRate;
-  $: statusFilter = $configStore.behavior.defaultStatusFilter;
+  $: statusFilter = $settingsStore.behavior.defaultStatusFilter;
 
-  let sortConfig = {
+  $: filteredProcesses = filterProcesses(processes, searchTerm, statusFilter);
-    field: "cpu_usage" as keyof Process,
-    direction: "desc" as "asc" | "desc",
-  };
 
-  $: filteredProcesses = processes.filter((process) => {
+  $: sortedProcesses = sortProcesses(
-    let matchesSearch = searchTerm.length === 0;
+    filteredProcesses,
-    searchTerm
+    sortConfig,
-      .split(",")
+    pinnedProcesses,
-      .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));
-  });
 
   $: 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}
+        onToggleSort={processStore.toggleSort}
-        onTogglePin={togglePin}
+        onTogglePin={processStore.togglePin}
-        onShowDetails={showProcessDetails}
+        onShowDetails={processStore.showProcessDetails}
-        onKillProcess={confirmKillProcess}
+        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={() => {
+  onClose={processStore.closeConfirmKill}
-    showConfirmModal = false;
+  onConfirm={processStore.handleConfirmKill}
-    processToKill = null;
-  }}
-  onConfirm={handleConfirmKill}
 />
 
 <style>