svelte and rust code formatting checks

.github/workflows/format-check.yml

@@ -0,0 +1,25 @@
+name: Format Check
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+          
+      - name: Install dependencies
+        run: npm ci
+        
+      - name: Check formatting
+        run: npm run format:check

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "macos-task-manager",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "macos-task-manager",
-      "version": "1.0.8",
+      "version": "1.0.9",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
@@ -20,6 +20,8 @@
         "@sveltejs/kit": "^2.7.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@tauri-apps/cli": "^2.0.4",
+        "prettier": "^3.3.3",
+        "prettier-plugin-svelte": "^3.2.7",
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
         "typescript": "^5.5.0",
@@ -1401,6 +1403,33 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.7.tgz",
+      "integrity": "sha512-/Dswx/ea0lV34If1eDcG3nulQ63YNr5KPDfMsjbdtpSWOxKKJ7nAc2qlVuYwEvCr4raIuredNoR7K4JCkmTGaQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",

package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "format": "prettier --write ./src && cargo fmt --manifest-path src-tauri/Cargo.toml",
+    "format:check": "prettier --check ./src && cargo fmt --manifest-path src-tauri/Cargo.toml -- --check"
   },
   "license": "MIT",
   "dependencies": {
@@ -24,6 +26,8 @@
     "@sveltejs/kit": "^2.7.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tauri-apps/cli": "^2.0.4",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.7",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "typescript": "^5.5.0",

src-tauri/src/main.rs

@@ -1,21 +1,13 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use std::collections::HashMap;
+use std::sync::Mutex;
+use std::time::{Instant, SystemTime, UNIX_EPOCH};
 use sysinfo::{
-    System,
-    ProcessStatus,
-    NetworksExt,
-    NetworkExt,
-    Disk,
-    DiskExt,
+    CpuExt, Disk, DiskExt, NetworkExt, NetworksExt, PidExt, ProcessExt, ProcessStatus, System,
     SystemExt,
-    CpuExt,
-    ProcessExt,
-    PidExt,
 };
 use tauri::State;
-use std::sync::Mutex;
-use std::collections::HashMap;
-use std::time::{Instant, SystemTime, UNIX_EPOCH};
 
 struct AppState {
     sys: Mutex<System>,
@@ -29,8 +21,16 @@ impl AppState {
         sys.refresh_all();
 
         // Initialize network stats
-        let initial_rx = sys.networks().iter().map(|(_, data)| data.total_received()).sum();
-        let initial_tx = sys.networks().iter().map(|(_, data)| data.total_transmitted()).sum();
+        let initial_rx = sys
+            .networks()
+            .iter()
+            .map(|(_, data)| data.total_received())
+            .sum();
+        let initial_tx = sys
+            .networks()
+            .iter()
+            .map(|(_, data)| data.total_transmitted())
+            .sum();
 
         Self {
             sys: Mutex::new(sys),
@@ -63,7 +63,7 @@ struct ProcessInfo {
     virtual_memory: u64,
     start_time: u64,
     run_time: u64,
-    disk_usage: (u64, u64),  // (read_bytes, written_bytes)
+    disk_usage: (u64, u64), // (read_bytes, written_bytes)
     session_id: Option<u32>,
 }
 
@@ -86,11 +86,13 @@ pub struct SystemStats {
 // Assume MacOS or Linux
 #[cfg(not(target_os = "windows"))]
 fn filter_disks(disks: &[Disk]) -> Vec<&sysinfo::Disk> {
-    disks.iter().filter(|disk| {
-        // Filter for physical disks - typically those mounted at "/"
-        disk.mount_point() == std::path::Path::new("/")
-    })
-    .collect()
+    disks
+        .iter()
+        .filter(|disk| {
+            // Filter for physical disks - typically those mounted at "/"
+            disk.mount_point() == std::path::Path::new("/")
+        })
+        .collect()
 }
 
 #[cfg(target_os = "windows")]
@@ -99,7 +101,9 @@ fn filter_disks(disks: &[Disk]) -> Vec<&sysinfo::Disk> {
 }
 
 #[tauri::command]
-async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>, SystemStats), String> {
+async fn get_processes(
+    state: State<'_, AppState>,
+) -> Result<(Vec<ProcessInfo>, SystemStats), String> {
     let processes_data;
     let system_stats;
 
@@ -111,7 +115,10 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
 
     // Scope for system lock
     {
-        let mut sys = state.sys.lock().map_err(|_| "Failed to lock system state")?;
+        let mut sys = state
+            .sys
+            .lock()
+            .map_err(|_| "Failed to lock system state")?;
         sys.refresh_all();
         sys.refresh_networks();
         sys.refresh_disks_list();
@@ -142,7 +149,7 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
                     process.root().to_string_lossy().into_owned(),
                     process.virtual_memory(),
                     start_time,
-                    run_time,  // Use calculated run_time
+                    run_time, // Use calculated run_time
                     process.disk_usage().read_bytes,
                     process.disk_usage().written_bytes,
                     process.session_id().map(|id| id.as_u32()),
@@ -151,12 +158,23 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
             .collect::<Vec<_>>();
 
         // Calculate total network I/O
-        let mut last_update = state.last_network_update.lock().map_err(|_| "Failed to lock network state")?;
+        let mut last_update = state
+            .last_network_update
+            .lock()
+            .map_err(|_| "Failed to lock network state")?;
         let elapsed = last_update.0.elapsed().as_secs_f64();
         let current_time = Instant::now();
 
-        let current_rx: u64 = sys.networks().iter().map(|(_, data)| data.total_received()).sum();
-        let current_tx: u64 = sys.networks().iter().map(|(_, data)| data.total_transmitted()).sum();
+        let current_rx: u64 = sys
+            .networks()
+            .iter()
+            .map(|(_, data)| data.total_received())
+            .sum();
+        let current_tx: u64 = sys
+            .networks()
+            .iter()
+            .map(|(_, data)| data.total_transmitted())
+            .sum();
 
         let network_stats = (
             ((current_rx - last_update.1) as f64 / elapsed) as u64,
@@ -172,7 +190,7 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
                 (
                     acc.0 + disk.total_space(),
                     acc.1 + disk.total_space() - disk.available_space(),
-                    acc.2 + disk.available_space()
+                    acc.2 + disk.available_space(),
                 )
             });
 
@@ -181,9 +199,14 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
             memory_total: sys.total_memory(),
             memory_used: sys.used_memory(),
             memory_free: sys.total_memory() - sys.used_memory(),
-            memory_cached: sys.total_memory() - (sys.used_memory() + (sys.total_memory() - sys.used_memory())),
+            memory_cached: sys.total_memory()
+                - (sys.used_memory() + (sys.total_memory() - sys.used_memory())),
             uptime: sys.uptime(),
-            load_avg: [sys.load_average().one, sys.load_average().five, sys.load_average().fifteen],
+            load_avg: [
+                sys.load_average().one,
+                sys.load_average().five,
+                sys.load_average().fifteen,
+            ],
             network_rx_bytes: network_stats.0,
             network_tx_bytes: network_stats.1,
             disk_total_bytes: disk_stats.0,
@@ -193,48 +216,68 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
     } // sys lock is automatically dropped here
 
     // Now lock the process cache
-    let mut process_cache = state.process_cache.lock().map_err(|_| "Failed to lock process cache")?;
+    let mut process_cache = state
+        .process_cache
+        .lock()
+        .map_err(|_| "Failed to lock process cache")?;
 
     // Build the process info list
     let processes = processes_data
         .into_iter()
-        .map(|(pid, name, cmd, user_id, cpu_usage, memory, status, ppid, 
-               environ, root, virtual_memory, start_time, run_time, 
-               disk_read, disk_written, session_id)| {
-            let static_info = process_cache.entry(pid).or_insert_with(|| {
-                ProcessStaticInfo {
-                    name: name.clone(),
-                    command: cmd.join(" "),
-                    user: user_id.unwrap_or_else(|| "-".to_string()),
-                }
-            });
-
-            let status_str = match status {
-                ProcessStatus::Run => "Running",
-                ProcessStatus::Sleep => "Sleeping",
-                ProcessStatus::Idle => "Idle",
-                _ => "Unknown"
-            };
-
-            ProcessInfo {
+        .map(
+            |(
                 pid,
-                ppid: ppid.unwrap_or(0),
-                name: static_info.name.clone(),
+                name,
+                cmd,
+                user_id,
                 cpu_usage,
-                memory_usage: memory,
-                status: status_str.to_string(),
-                user: static_info.user.clone(),
-                command: static_info.command.clone(),
-                threads: None,
+                memory,
+                status,
+                ppid,
                 environ,
                 root,
                 virtual_memory,
                 start_time,
                 run_time,
-                disk_usage: (disk_read, disk_written),
+                disk_read,
+                disk_written,
                 session_id,
-            }
-        })
+            )| {
+                let static_info = process_cache
+                    .entry(pid)
+                    .or_insert_with(|| ProcessStaticInfo {
+                        name: name.clone(),
+                        command: cmd.join(" "),
+                        user: user_id.unwrap_or_else(|| "-".to_string()),
+                    });
+
+                let status_str = match status {
+                    ProcessStatus::Run => "Running",
+                    ProcessStatus::Sleep => "Sleeping",
+                    ProcessStatus::Idle => "Idle",
+                    _ => "Unknown",
+                };
+
+                ProcessInfo {
+                    pid,
+                    ppid: ppid.unwrap_or(0),
+                    name: static_info.name.clone(),
+                    cpu_usage,
+                    memory_usage: memory,
+                    status: status_str.to_string(),
+                    user: static_info.user.clone(),
+                    command: static_info.command.clone(),
+                    threads: None,
+                    environ,
+                    root,
+                    virtual_memory,
+                    start_time,
+                    run_time,
+                    disk_usage: (disk_read, disk_written),
+                    session_id,
+                }
+            },
+        )
         .collect();
 
     Ok((processes, system_stats))
@@ -242,7 +285,10 @@ async fn get_processes(state: State<'_, AppState>) -> Result<(Vec<ProcessInfo>,
 
 #[tauri::command]
 async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result<bool, String> {
-    let sys = state.sys.lock().map_err(|_| "Failed to lock system state")?;
+    let sys = state
+        .sys
+        .lock()
+        .map_err(|_| "Failed to lock system state")?;
     if let Some(process) = sys.process(sysinfo::Pid::from(pid as usize)) {
         Ok(process.kill())
     } else {
@@ -253,10 +299,7 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result<bool, Stri
 fn main() {
     tauri::Builder::default()
         .manage(AppState::new())
-        .invoke_handler(tauri::generate_handler![
-            get_processes,
-            kill_process
-        ])
+        .invoke_handler(tauri::generate_handler![get_processes, kill_process])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src/app.html

@@ -1,16 +1,14 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    <title>NeoHtop</title>
+    %sveltekit.head%
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-  <meta name="viewport" content="width=device-width" />
-  <title>NeoHtop</title>
-  %sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
-</body>
-
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>

src/lib/stores/config.ts

@@ -1,6 +1,6 @@
-import { writable } from 'svelte/store';
-import type { AppConfig } from '$lib/types/config';
-import { DEFAULT_CONFIG } from '$lib/types/config';
+import { writable } from "svelte/store";
+import type { AppConfig } from "$lib/types/config";
+import { DEFAULT_CONFIG } from "$lib/types/config";
 
 function createConfigStore() {
   const { subscribe, set, update } = writable<AppConfig>(DEFAULT_CONFIG);
@@ -8,28 +8,28 @@ function createConfigStore() {
   return {
     subscribe,
     init: () => {
-      if (typeof window !== 'undefined') {
-        const stored = localStorage.getItem('neohtop_config');
+      if (typeof window !== "undefined") {
+        const stored = localStorage.getItem("neohtop_config");
         if (stored) {
           try {
             const config = JSON.parse(stored);
             set({ ...DEFAULT_CONFIG, ...config });
           } catch (e) {
-            console.error('Failed to parse stored config:', e);
+            console.error("Failed to parse stored config:", e);
             set(DEFAULT_CONFIG);
           }
         }
       }
     },
     updateConfig: (newConfig: Partial<AppConfig>) => {
-      update(config => {
+      update((config) => {
         const updated = { ...config, ...newConfig };
-        if (typeof window !== 'undefined') {
-          localStorage.setItem('neohtop_config', JSON.stringify(updated));
+        if (typeof window !== "undefined") {
+          localStorage.setItem("neohtop_config", JSON.stringify(updated));
         }
         return updated;
       });
-    }
+    },
   };
 }
 

src/lib/stores/index.ts

@@ -1,5 +1,5 @@
-import { writable } from 'svelte/store';
-import { themes, type Theme } from '$lib/styles';
+import { writable } from "svelte/store";
+import { themes, type Theme } from "$lib/styles";
 
 function createThemeStore() {
   // Default theme
@@ -9,8 +9,8 @@ function createThemeStore() {
   const { subscribe, set } = writable<Theme>(defaultTheme);
 
   // Initialize theme on client-side only
-  if (typeof window !== 'undefined') {
-    const storedTheme = localStorage.getItem('theme');
+  if (typeof window !== "undefined") {
+    const storedTheme = localStorage.getItem("theme");
     if (storedTheme && themes[storedTheme]) {
       set(themes[storedTheme]);
     }
@@ -21,25 +21,24 @@ function createThemeStore() {
     setTheme: (themeName: string) => {
       const theme = themes[themeName];
       if (theme) {
-        if (typeof window !== 'undefined') {
-          localStorage.setItem('theme', themeName);
+        if (typeof window !== "undefined") {
+          localStorage.setItem("theme", themeName);
         }
         set(theme);
         applyTheme(theme);
       }
     },
     init: () => {
-      const storedTheme = typeof window !== 'undefined' 
-        ? localStorage.getItem('theme') 
-        : null;
+      const storedTheme =
+        typeof window !== "undefined" ? localStorage.getItem("theme") : null;
       const theme = (storedTheme && themes[storedTheme]) || defaultTheme;
       applyTheme(theme);
-    }
+    },
   };
 }
 
 function applyTheme(theme: Theme) {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     const root = document.documentElement;
     Object.entries(theme.colors).forEach(([key, value]) => {
       root.style.setProperty(`--${key}`, value);

src/lib/styles/index.ts

@@ -28,516 +28,516 @@ export interface Theme {
 
 export const themes: Record<string, Theme> = {
   catppuccin: {
-    name: 'catppuccin',
-    label: 'Catppuccin',
+    name: "catppuccin",
+    label: "Catppuccin",
     colors: {
-      base: '#1e1e2e',
-      mantle: '#181825',
-      crust: '#11111b',
-      text: '#cdd6f4',
-      subtext0: '#a6adc8',
-      subtext1: '#bac2de',
-      surface0: '#313244',
-      surface1: '#45475a',
-      surface2: '#585b70',
-      overlay0: '#6c7086',
-      overlay1: '#7f849c',
-      blue: '#89b4fa',
-      lavender: '#b4befe',
-      sapphire: '#74c7ec',
-      sky: '#89dceb',
-      red: '#f38ba8',
-      maroon: '#eba0ac',
-      peach: '#fab387',
-      yellow: '#f9e2af',
-      green: '#a6e3a1',
-      teal: '#94e2d5',
+      base: "#1e1e2e",
+      mantle: "#181825",
+      crust: "#11111b",
+      text: "#cdd6f4",
+      subtext0: "#a6adc8",
+      subtext1: "#bac2de",
+      surface0: "#313244",
+      surface1: "#45475a",
+      surface2: "#585b70",
+      overlay0: "#6c7086",
+      overlay1: "#7f849c",
+      blue: "#89b4fa",
+      lavender: "#b4befe",
+      sapphire: "#74c7ec",
+      sky: "#89dceb",
+      red: "#f38ba8",
+      maroon: "#eba0ac",
+      peach: "#fab387",
+      yellow: "#f9e2af",
+      green: "#a6e3a1",
+      teal: "#94e2d5",
     },
   },
   dracula: {
-    name: 'dracula',
-    label: 'Dracula',
+    name: "dracula",
+    label: "Dracula",
     colors: {
-      base: '#282a36',
-      mantle: '#1e1f29',
-      crust: '#191a21',
-      text: '#f8f8f2',
-      subtext0: '#bfbfbf',
-      subtext1: '#e6e6e6',
-      surface0: '#44475a',
-      surface1: '#6272a4',
-      surface2: '#7970a9',
-      overlay0: '#6272a4',
-      overlay1: '#7970a9',
-      blue: '#8be9fd',
-      lavender: '#bd93f9',
-      sapphire: '#62d6e8',
-      sky: '#89ddff',
-      red: '#ff5555',
-      maroon: '#ff6e6e',
-      peach: '#ffb86c',
-      yellow: '#f1fa8c',
-      green: '#50fa7b',
-      teal: '#8be9fd',
+      base: "#282a36",
+      mantle: "#1e1f29",
+      crust: "#191a21",
+      text: "#f8f8f2",
+      subtext0: "#bfbfbf",
+      subtext1: "#e6e6e6",
+      surface0: "#44475a",
+      surface1: "#6272a4",
+      surface2: "#7970a9",
+      overlay0: "#6272a4",
+      overlay1: "#7970a9",
+      blue: "#8be9fd",
+      lavender: "#bd93f9",
+      sapphire: "#62d6e8",
+      sky: "#89ddff",
+      red: "#ff5555",
+      maroon: "#ff6e6e",
+      peach: "#ffb86c",
+      yellow: "#f1fa8c",
+      green: "#50fa7b",
+      teal: "#8be9fd",
     },
   },
   monokaiPro: {
-    name: 'monokaiPro',
-    label: 'Monokai Pro',
+    name: "monokaiPro",
+    label: "Monokai Pro",
     colors: {
-      base: '#2d2a2e',
-      mantle: '#221f22',
-      crust: '#1b1b1b',
-      text: '#fcfcfa',
-      subtext0: '#939293',
-      subtext1: '#c1c0c0',
-      surface0: '#403e41',
-      surface1: '#565457',
-      surface2: '#69676c',
-      overlay0: '#727072',
-      overlay1: '#848486',
-      blue: '#78dce8',
-      lavender: '#ab9df2',
-      sapphire: '#66d9ef',
-      sky: '#78dce8',
-      red: '#ff6188',
-      maroon: '#ff6188',
-      peach: '#fc9867',
-      yellow: '#ffd866',
-      green: '#a9dc76',
-      teal: '#78dce8',
+      base: "#2d2a2e",
+      mantle: "#221f22",
+      crust: "#1b1b1b",
+      text: "#fcfcfa",
+      subtext0: "#939293",
+      subtext1: "#c1c0c0",
+      surface0: "#403e41",
+      surface1: "#565457",
+      surface2: "#69676c",
+      overlay0: "#727072",
+      overlay1: "#848486",
+      blue: "#78dce8",
+      lavender: "#ab9df2",
+      sapphire: "#66d9ef",
+      sky: "#78dce8",
+      red: "#ff6188",
+      maroon: "#ff6188",
+      peach: "#fc9867",
+      yellow: "#ffd866",
+      green: "#a9dc76",
+      teal: "#78dce8",
     },
   },
   tokyoNight: {
-    name: 'tokyoNight',
-    label: 'Tokyo Night',
+    name: "tokyoNight",
+    label: "Tokyo Night",
     colors: {
-      base: '#1a1b26',
-      mantle: '#16161e',
-      crust: '#13131a',
-      text: '#a9b1d6',
-      subtext0: '#9aa5ce',
-      subtext1: '#9aa5ce',
-      surface0: '#232433',
-      surface1: '#2a2b3d',
-      surface2: '#32344a',
-      overlay0: '#565f89',
-      overlay1: '#6b7089',
-      blue: '#7aa2f7',
-      lavender: '#bb9af7',
-      sapphire: '#7dcfff',
-      sky: '#7dcfff',
-      red: '#f7768e',
-      maroon: '#ff9e64',
-      peach: '#ff9e64',
-      yellow: '#e0af68',
-      green: '#9ece6a',
-      teal: '#2ac3de',
+      base: "#1a1b26",
+      mantle: "#16161e",
+      crust: "#13131a",
+      text: "#a9b1d6",
+      subtext0: "#9aa5ce",
+      subtext1: "#9aa5ce",
+      surface0: "#232433",
+      surface1: "#2a2b3d",
+      surface2: "#32344a",
+      overlay0: "#565f89",
+      overlay1: "#6b7089",
+      blue: "#7aa2f7",
+      lavender: "#bb9af7",
+      sapphire: "#7dcfff",
+      sky: "#7dcfff",
+      red: "#f7768e",
+      maroon: "#ff9e64",
+      peach: "#ff9e64",
+      yellow: "#e0af68",
+      green: "#9ece6a",
+      teal: "#2ac3de",
     },
   },
   gruvbox: {
-    name: 'gruvbox',
-    label: 'Gruvbox Dark',
+    name: "gruvbox",
+    label: "Gruvbox Dark",
     colors: {
-      base: '#282828',
-      mantle: '#1d2021',
-      crust: '#1b1b1b',
-      text: '#ebdbb2',
-      subtext0: '#a89984',
-      subtext1: '#bdae93',
-      surface0: '#3c3836',
-      surface1: '#504945',
-      surface2: '#665c54',
-      overlay0: '#7c6f64',
-      overlay1: '#928374',
-      blue: '#83a598',
-      lavender: '#d3869b',
-      sapphire: '#83a598',
-      sky: '#8ec07c',
-      red: '#fb4934',
-      maroon: '#cc241d',
-      peach: '#fe8019',
-      yellow: '#fabd2f',
-      green: '#b8bb26',
-      teal: '#8ec07c',
+      base: "#282828",
+      mantle: "#1d2021",
+      crust: "#1b1b1b",
+      text: "#ebdbb2",
+      subtext0: "#a89984",
+      subtext1: "#bdae93",
+      surface0: "#3c3836",
+      surface1: "#504945",
+      surface2: "#665c54",
+      overlay0: "#7c6f64",
+      overlay1: "#928374",
+      blue: "#83a598",
+      lavender: "#d3869b",
+      sapphire: "#83a598",
+      sky: "#8ec07c",
+      red: "#fb4934",
+      maroon: "#cc241d",
+      peach: "#fe8019",
+      yellow: "#fabd2f",
+      green: "#b8bb26",
+      teal: "#8ec07c",
     },
   },
   nord: {
-    name: 'nord',
-    label: 'Nord',
+    name: "nord",
+    label: "Nord",
     colors: {
-      base: '#2e3440',
-      mantle: '#272c36',
-      crust: '#242933',
-      text: '#eceff4',
-      subtext0: '#d8dee9',
-      subtext1: '#e5e9f0',
-      surface0: '#3b4252',
-      surface1: '#434c5e',
-      surface2: '#4c566a',
-      overlay0: '#616e88',
-      overlay1: '#7b88a1',
-      blue: '#88c0d0',
-      lavender: '#b48ead',
-      sapphire: '#81a1c1',
-      sky: '#88c0d0',
-      red: '#bf616a',
-      maroon: '#d08770',
-      peach: '#d08770',
-      yellow: '#ebcb8b',
-      green: '#a3be8c',
-      teal: '#8fbcbb',
+      base: "#2e3440",
+      mantle: "#272c36",
+      crust: "#242933",
+      text: "#eceff4",
+      subtext0: "#d8dee9",
+      subtext1: "#e5e9f0",
+      surface0: "#3b4252",
+      surface1: "#434c5e",
+      surface2: "#4c566a",
+      overlay0: "#616e88",
+      overlay1: "#7b88a1",
+      blue: "#88c0d0",
+      lavender: "#b48ead",
+      sapphire: "#81a1c1",
+      sky: "#88c0d0",
+      red: "#bf616a",
+      maroon: "#d08770",
+      peach: "#d08770",
+      yellow: "#ebcb8b",
+      green: "#a3be8c",
+      teal: "#8fbcbb",
     },
   },
   oneDark: {
-    name: 'oneDark',
-    label: 'One Dark',
+    name: "oneDark",
+    label: "One Dark",
     colors: {
-      base: '#282c34',
-      mantle: '#21252b',
-      crust: '#1b1f23',
-      text: '#abb2bf',
-      subtext0: '#828997',
-      subtext1: '#9da5b4',
-      surface0: '#31353f',
-      surface1: '#393f4a',
-      surface2: '#4b5263',
-      overlay0: '#636d83',
-      overlay1: '#767d8d',
-      blue: '#61afef',
-      lavender: '#c678dd',
-      sapphire: '#56b6c2',
-      sky: '#56b6c2',
-      red: '#e06c75',
-      maroon: '#be5046',
-      peach: '#d19a66',
-      yellow: '#e5c07b',
-      green: '#98c379',
-      teal: '#56b6c2',
+      base: "#282c34",
+      mantle: "#21252b",
+      crust: "#1b1f23",
+      text: "#abb2bf",
+      subtext0: "#828997",
+      subtext1: "#9da5b4",
+      surface0: "#31353f",
+      surface1: "#393f4a",
+      surface2: "#4b5263",
+      overlay0: "#636d83",
+      overlay1: "#767d8d",
+      blue: "#61afef",
+      lavender: "#c678dd",
+      sapphire: "#56b6c2",
+      sky: "#56b6c2",
+      red: "#e06c75",
+      maroon: "#be5046",
+      peach: "#d19a66",
+      yellow: "#e5c07b",
+      green: "#98c379",
+      teal: "#56b6c2",
     },
   },
   highContrast: {
-    name: 'highContrast',
-    label: 'High Contrast',
+    name: "highContrast",
+    label: "High Contrast",
     colors: {
-      base: '#000000',          // Pure black background
-      mantle: '#0a0a0a',        // Slightly lighter black for layering
-      crust: '#141414',         // Even lighter black for depth
-      text: '#ffffff',          // Pure white text
-      subtext0: '#e0e0e0',      // Very light grey for secondary text
-      subtext1: '#f0f0f0',      // Almost white for important secondary text
-      surface0: '#1a1a1a',      // Dark surface for contrast
-      surface1: '#2a2a2a',      // Lighter surface for hover states
-      surface2: '#3a3a3a',      // Even lighter surface for active states
-      overlay0: '#4a4a4a',      // Medium grey for overlays
-      overlay1: '#5a5a5a',      // Lighter grey for overlay hover states
-      blue: '#00ffff',          // Cyan for primary actions
-      lavender: '#ff00ff',      // Magenta for accents
-      sapphire: '#00ccff',      // Bright blue for links
-      sky: '#00ffee',           // Bright cyan for highlights
-      red: '#ff0000',           // Pure red for errors/warnings
-      maroon: '#ff3333',        // Lighter red for secondary warnings
-      peach: '#ffaa00',         // Bright orange for notifications
-      yellow: '#ffff00',        // Pure yellow for important highlights
-      green: '#00ff00',         // Pure green for success states
-      teal: '#00ffcc',          // Bright teal for special actions
+      base: "#000000", // Pure black background
+      mantle: "#0a0a0a", // Slightly lighter black for layering
+      crust: "#141414", // Even lighter black for depth
+      text: "#ffffff", // Pure white text
+      subtext0: "#e0e0e0", // Very light grey for secondary text
+      subtext1: "#f0f0f0", // Almost white for important secondary text
+      surface0: "#1a1a1a", // Dark surface for contrast
+      surface1: "#2a2a2a", // Lighter surface for hover states
+      surface2: "#3a3a3a", // Even lighter surface for active states
+      overlay0: "#4a4a4a", // Medium grey for overlays
+      overlay1: "#5a5a5a", // Lighter grey for overlay hover states
+      blue: "#00ffff", // Cyan for primary actions
+      lavender: "#ff00ff", // Magenta for accents
+      sapphire: "#00ccff", // Bright blue for links
+      sky: "#00ffee", // Bright cyan for highlights
+      red: "#ff0000", // Pure red for errors/warnings
+      maroon: "#ff3333", // Lighter red for secondary warnings
+      peach: "#ffaa00", // Bright orange for notifications
+      yellow: "#ffff00", // Pure yellow for important highlights
+      green: "#00ff00", // Pure green for success states
+      teal: "#00ffcc", // Bright teal for special actions
     },
   },
   githubLight: {
-    name: 'githubLight',
-    label: 'GitHub Light',
+    name: "githubLight",
+    label: "GitHub Light",
     colors: {
-      base: '#ffffff',
-      mantle: '#f6f8fa',
-      crust: '#eaeef2',
-      text: '#24292f',
-      subtext0: '#57606a',
-      subtext1: '#6e7781',
-      surface0: '#f3f6fa',
-      surface1: '#eaeef2',
-      surface2: '#d0d7de',
-      overlay0: '#8c959f',
-      overlay1: '#6e7781',
-      blue: '#0969da',
-      lavender: '#8250df',
-      sapphire: '#0550ae',
-      sky: '#218bff',
-      red: '#cf222e',
-      maroon: '#a40e26',
-      peach: '#bc4c00',
-      yellow: '#9a6700',
-      green: '#1a7f37',
-      teal: '#0969da',
+      base: "#ffffff",
+      mantle: "#f6f8fa",
+      crust: "#eaeef2",
+      text: "#24292f",
+      subtext0: "#57606a",
+      subtext1: "#6e7781",
+      surface0: "#f3f6fa",
+      surface1: "#eaeef2",
+      surface2: "#d0d7de",
+      overlay0: "#8c959f",
+      overlay1: "#6e7781",
+      blue: "#0969da",
+      lavender: "#8250df",
+      sapphire: "#0550ae",
+      sky: "#218bff",
+      red: "#cf222e",
+      maroon: "#a40e26",
+      peach: "#bc4c00",
+      yellow: "#9a6700",
+      green: "#1a7f37",
+      teal: "#0969da",
     },
   },
   solarizedLight: {
-    name: 'solarizedLight',
-    label: 'Solarized Light',
+    name: "solarizedLight",
+    label: "Solarized Light",
     colors: {
-      base: '#fdf6e3',
-      mantle: '#eee8d5',
-      crust: '#e4dcc9',
-      text: '#657b83',
-      subtext0: '#839496',
-      subtext1: '#93a1a1',
-      surface0: '#f7f2e4',
-      surface1: '#eee8d5',
-      surface2: '#dcd4c4',
-      overlay0: '#93a1a1',
-      overlay1: '#839496',
-      blue: '#268bd2',
-      lavender: '#6c71c4',
-      sapphire: '#2aa198',
-      sky: '#2aa198',
-      red: '#dc322f',
-      maroon: '#cb4b16',
-      peach: '#cb4b16',
-      yellow: '#b58900',
-      green: '#859900',
-      teal: '#2aa198',
+      base: "#fdf6e3",
+      mantle: "#eee8d5",
+      crust: "#e4dcc9",
+      text: "#657b83",
+      subtext0: "#839496",
+      subtext1: "#93a1a1",
+      surface0: "#f7f2e4",
+      surface1: "#eee8d5",
+      surface2: "#dcd4c4",
+      overlay0: "#93a1a1",
+      overlay1: "#839496",
+      blue: "#268bd2",
+      lavender: "#6c71c4",
+      sapphire: "#2aa198",
+      sky: "#2aa198",
+      red: "#dc322f",
+      maroon: "#cb4b16",
+      peach: "#cb4b16",
+      yellow: "#b58900",
+      green: "#859900",
+      teal: "#2aa198",
     },
   },
   oneLight: {
-    name: 'oneLight',
-    label: 'One Light',
+    name: "oneLight",
+    label: "One Light",
     colors: {
-      base: '#fafafa',
-      mantle: '#f0f0f0',
-      crust: '#e5e5e5',
-      text: '#383a42',
-      subtext0: '#4f525e',
-      subtext1: '#696c77',
-      surface0: '#f2f2f2',
-      surface1: '#e5e5e5',
-      surface2: '#d4d4d4',
-      overlay0: '#a0a1a7',
-      overlay1: '#696c77',
-      blue: '#4078f2',
-      lavender: '#a626a4',
-      sapphire: '#0184bc',
-      sky: '#0997b3',
-      red: '#e45649',
-      maroon: '#ca1243',
-      peach: '#d75f00',
-      yellow: '#c18401',
-      green: '#50a14f',
-      teal: '#0184bc',
+      base: "#fafafa",
+      mantle: "#f0f0f0",
+      crust: "#e5e5e5",
+      text: "#383a42",
+      subtext0: "#4f525e",
+      subtext1: "#696c77",
+      surface0: "#f2f2f2",
+      surface1: "#e5e5e5",
+      surface2: "#d4d4d4",
+      overlay0: "#a0a1a7",
+      overlay1: "#696c77",
+      blue: "#4078f2",
+      lavender: "#a626a4",
+      sapphire: "#0184bc",
+      sky: "#0997b3",
+      red: "#e45649",
+      maroon: "#ca1243",
+      peach: "#d75f00",
+      yellow: "#c18401",
+      green: "#50a14f",
+      teal: "#0184bc",
     },
   },
   bubblegum: {
-    name: 'bubblegum',
-    label: 'Bubblegum',
+    name: "bubblegum",
+    label: "Bubblegum",
     colors: {
-      base: '#ff9ac1',      // Light pink background
-      mantle: '#ffa7cc',    // Slightly darker pink
-      crust: '#ffb4d8',     // Even darker pink for depth
-      text: '#2d1c2d',      // Dark purple text
-      subtext0: '#4b384b',  // Medium purple for secondary text
-      subtext1: '#5c465c',  // Lighter purple for tertiary text
-      surface0: '#ffc1e0',  // Light pink surface
-      surface1: '#ffcee7',  // Lighter pink surface
-      surface2: '#ffdaf0',  // Even lighter pink surface
-      overlay0: '#7e5c7e',  // Muted purple overlay
-      overlay1: '#6e4f6e',  // Darker purple overlay
-      blue: '#7287fd',      // Soft blue
-      lavender: '#b4befe',  // Soft lavender
-      sapphire: '#89dceb',  // Soft cyan
-      sky: '#89dceb',       // Matching cyan
-      red: '#ff8089',       // Soft red
-      maroon: '#ff9999',    // Soft maroon
-      peach: '#ffb4a1',     // Soft peach
-      yellow: '#ffe5a0',    // Soft yellow
-      green: '#a6e3a1',     // Soft green
-      teal: '#94e2d5',      // Soft teal
+      base: "#ff9ac1", // Light pink background
+      mantle: "#ffa7cc", // Slightly darker pink
+      crust: "#ffb4d8", // Even darker pink for depth
+      text: "#2d1c2d", // Dark purple text
+      subtext0: "#4b384b", // Medium purple for secondary text
+      subtext1: "#5c465c", // Lighter purple for tertiary text
+      surface0: "#ffc1e0", // Light pink surface
+      surface1: "#ffcee7", // Lighter pink surface
+      surface2: "#ffdaf0", // Even lighter pink surface
+      overlay0: "#7e5c7e", // Muted purple overlay
+      overlay1: "#6e4f6e", // Darker purple overlay
+      blue: "#7287fd", // Soft blue
+      lavender: "#b4befe", // Soft lavender
+      sapphire: "#89dceb", // Soft cyan
+      sky: "#89dceb", // Matching cyan
+      red: "#ff8089", // Soft red
+      maroon: "#ff9999", // Soft maroon
+      peach: "#ffb4a1", // Soft peach
+      yellow: "#ffe5a0", // Soft yellow
+      green: "#a6e3a1", // Soft green
+      teal: "#94e2d5", // Soft teal
     },
   },
   rosePine: {
-    name: 'rosePine',
-    label: 'Rosé Pine',
+    name: "rosePine",
+    label: "Rosé Pine",
     colors: {
-      base: '#191724',      // Deep purple base
-      mantle: '#1f1d2e',    // Slightly lighter purple
-      crust: '#26233a',     // Even lighter purple
-      text: '#e0def4',      // Soft white text
-      subtext0: '#908caa',  // Muted purple text
-      subtext1: '#6e6a86',  // Darker muted text
-      surface0: '#2a2837',  // Surface purple
-      surface1: '#343145',  // Lighter surface
-      surface2: '#3e3b54',  // Even lighter surface
-      overlay0: '#524f67',  // Overlay purple
-      overlay1: '#6e6a86',  // Lighter overlay
-      blue: '#9ccfd8',      // Soft blue
-      lavender: '#c4a7e7',  // Soft lavender
-      sapphire: '#31748f',  // Deep blue
-      sky: '#9ccfd8',       // Light blue
-      red: '#eb6f92',       // Soft pink
-      maroon: '#ebbcba',    // Soft rose
-      peach: '#f6c177',     // Soft peach
-      yellow: '#f6c177',    // Gold
-      green: '#31748f',     // Sage
-      teal: '#9ccfd8',      // Soft teal
+      base: "#191724", // Deep purple base
+      mantle: "#1f1d2e", // Slightly lighter purple
+      crust: "#26233a", // Even lighter purple
+      text: "#e0def4", // Soft white text
+      subtext0: "#908caa", // Muted purple text
+      subtext1: "#6e6a86", // Darker muted text
+      surface0: "#2a2837", // Surface purple
+      surface1: "#343145", // Lighter surface
+      surface2: "#3e3b54", // Even lighter surface
+      overlay0: "#524f67", // Overlay purple
+      overlay1: "#6e6a86", // Lighter overlay
+      blue: "#9ccfd8", // Soft blue
+      lavender: "#c4a7e7", // Soft lavender
+      sapphire: "#31748f", // Deep blue
+      sky: "#9ccfd8", // Light blue
+      red: "#eb6f92", // Soft pink
+      maroon: "#ebbcba", // Soft rose
+      peach: "#f6c177", // Soft peach
+      yellow: "#f6c177", // Gold
+      green: "#31748f", // Sage
+      teal: "#9ccfd8", // Soft teal
     },
   },
   cottonCandy: {
-    name: 'cottonCandy',
-    label: 'Cotton Candy',
+    name: "cottonCandy",
+    label: "Cotton Candy",
     colors: {
-      base: '#f5d1eb',      // Light pink
-      mantle: '#f7d7ee',    // Slightly darker pink
-      crust: '#fae1f3',     // Even darker pink
-      text: '#2d0c3a',      // Deep purple text
-      subtext0: '#4a1259',  // Medium purple text
-      subtext1: '#671878',  // Light purple text
-      surface0: '#f9def1',  // Surface pink
-      surface1: '#fde9f5',  // Lighter surface
-      surface2: '#fff2fa',  // Even lighter surface
-      overlay0: '#b87dd3',  // Purple overlay
-      overlay1: '#9c5fb8',  // Darker overlay
-      blue: '#79c7ff',      // Baby blue
-      lavender: '#d5a6ff',  // Soft purple
-      sapphire: '#7cb8ff',  // Light blue
-      sky: '#89dcff',       // Bright blue
-      red: '#ff9ed2',       // Soft pink
-      maroon: '#ff8ac4',    // Darker pink
-      peach: '#ffb2c7',     // Peachy pink
-      yellow: '#ffffc2',    // Pastel yellow
-      green: '#b6ffd7',     // Mint green
-      teal: '#89ffea',      // Turquoise
+      base: "#f5d1eb", // Light pink
+      mantle: "#f7d7ee", // Slightly darker pink
+      crust: "#fae1f3", // Even darker pink
+      text: "#2d0c3a", // Deep purple text
+      subtext0: "#4a1259", // Medium purple text
+      subtext1: "#671878", // Light purple text
+      surface0: "#f9def1", // Surface pink
+      surface1: "#fde9f5", // Lighter surface
+      surface2: "#fff2fa", // Even lighter surface
+      overlay0: "#b87dd3", // Purple overlay
+      overlay1: "#9c5fb8", // Darker overlay
+      blue: "#79c7ff", // Baby blue
+      lavender: "#d5a6ff", // Soft purple
+      sapphire: "#7cb8ff", // Light blue
+      sky: "#89dcff", // Bright blue
+      red: "#ff9ed2", // Soft pink
+      maroon: "#ff8ac4", // Darker pink
+      peach: "#ffb2c7", // Peachy pink
+      yellow: "#ffffc2", // Pastel yellow
+      green: "#b6ffd7", // Mint green
+      teal: "#89ffea", // Turquoise
     },
   },
   synthwave: {
-    name: 'synthwave',
-    label: 'Synthwave',
+    name: "synthwave",
+    label: "Synthwave",
     colors: {
-      base: '#2b213a',      // Deep purple
-      mantle: '#2f2444',    // Slightly lighter purple
-      crust: '#33274f',     // Even lighter purple
-      text: '#ff7edb',      // Neon pink text
-      subtext0: '#e58ee0',  // Softer pink text
-      subtext1: '#cb9ee6',  // Lavender text
-      surface0: '#392662',  // Surface purple
-      surface1: '#443773',  // Lighter surface
-      surface2: '#504785',  // Even lighter surface
-      overlay0: '#625997',  // Purple overlay
-      overlay1: '#7267aa',  // Lighter overlay
-      blue: '#36f9f6',      // Cyan
-      lavender: '#ff7edb',  // Pink
-      sapphire: '#72f1b8',  // Mint
-      sky: '#36f9f6',       // Bright cyan
-      red: '#fe4450',       // Hot red
-      maroon: '#ff558f',    // Hot pink
-      peach: '#ff8b39',     // Orange
-      yellow: '#fede5d',    // Yellow
-      green: '#72f1b8',     // Neon green
-      teal: '#36f9f6',      // Bright teal
+      base: "#2b213a", // Deep purple
+      mantle: "#2f2444", // Slightly lighter purple
+      crust: "#33274f", // Even lighter purple
+      text: "#ff7edb", // Neon pink text
+      subtext0: "#e58ee0", // Softer pink text
+      subtext1: "#cb9ee6", // Lavender text
+      surface0: "#392662", // Surface purple
+      surface1: "#443773", // Lighter surface
+      surface2: "#504785", // Even lighter surface
+      overlay0: "#625997", // Purple overlay
+      overlay1: "#7267aa", // Lighter overlay
+      blue: "#36f9f6", // Cyan
+      lavender: "#ff7edb", // Pink
+      sapphire: "#72f1b8", // Mint
+      sky: "#36f9f6", // Bright cyan
+      red: "#fe4450", // Hot red
+      maroon: "#ff558f", // Hot pink
+      peach: "#ff8b39", // Orange
+      yellow: "#fede5d", // Yellow
+      green: "#72f1b8", // Neon green
+      teal: "#36f9f6", // Bright teal
     },
   },
   candyfloss: {
-    name: 'candyfloss',
-    label: 'Candyfloss',
+    name: "candyfloss",
+    label: "Candyfloss",
     colors: {
-      base: '#f8e2ff',      // Light purple
-      mantle: '#ffe2f8',    // Pink tint
-      crust: '#ffe9f3',     // Lighter pink
-      text: '#5c1b99',      // Deep purple text
-      subtext0: '#7a3aaf',  // Medium purple text
-      subtext1: '#944bc6',  // Light purple text
-      surface0: '#ffeaf8',  // Surface pink
-      surface1: '#fff2fb',  // Lighter surface
-      surface2: '#fff7fd',  // Even lighter surface
-      overlay0: '#d59bff',  // Purple overlay
-      overlay1: '#c77dff',  // Darker overlay
-      blue: '#79baff',      // Soft blue
-      lavender: '#cc8fff',  // Light purple
-      sapphire: '#85a5ff',  // Periwinkle
-      sky: '#8aceff',       // Light blue
-      red: '#ff8fab',       // Soft red
-      maroon: '#ff7fa6',    // Pink
-      peach: '#ffb2c7',     // Peach
-      yellow: '#fff3b2',    // Soft yellow
-      green: '#b8ffda',     // Mint
-      teal: '#8affef',      // Aqua
+      base: "#f8e2ff", // Light purple
+      mantle: "#ffe2f8", // Pink tint
+      crust: "#ffe9f3", // Lighter pink
+      text: "#5c1b99", // Deep purple text
+      subtext0: "#7a3aaf", // Medium purple text
+      subtext1: "#944bc6", // Light purple text
+      surface0: "#ffeaf8", // Surface pink
+      surface1: "#fff2fb", // Lighter surface
+      surface2: "#fff7fd", // Even lighter surface
+      overlay0: "#d59bff", // Purple overlay
+      overlay1: "#c77dff", // Darker overlay
+      blue: "#79baff", // Soft blue
+      lavender: "#cc8fff", // Light purple
+      sapphire: "#85a5ff", // Periwinkle
+      sky: "#8aceff", // Light blue
+      red: "#ff8fab", // Soft red
+      maroon: "#ff7fa6", // Pink
+      peach: "#ffb2c7", // Peach
+      yellow: "#fff3b2", // Soft yellow
+      green: "#b8ffda", // Mint
+      teal: "#8affef", // Aqua
     },
   },
   terminal: {
-    name: 'terminal',
-    label: 'Green Terminal',
+    name: "terminal",
+    label: "Green Terminal",
     colors: {
-      base: '#0D1117',        // Deep black background
-      mantle: '#161B22',      // Slightly lighter black
-      crust: '#1B2127',       // Terminal border color
-      text: '#00FF00',        // Classic terminal green
-      subtext0: '#00D700',    // Dimmer green
-      subtext1: '#00BB00',    // Even dimmer green
-      surface0: '#1C2128',    // Slightly lifted surface
-      surface1: '#21262D',    // Terminal input area
-      surface2: '#282E35',    // Selected area
-      overlay0: '#008800',    // Darker green for overlays
-      overlay1: '#006600',    // Even darker green
-      blue: '#00FF00',        // Keep everything in green shades
-      lavender: '#00FF66',    // Slight variation
-      sapphire: '#00DD88',    // Another variation
-      sky: '#00FFBB',         // Lighter green
-      red: '#FF0000',         // Error red (keep for errors)
-      maroon: '#AA0000',      // Darker error
-      peach: '#00FF99',       // Another green variation
-      yellow: '#FFFF00',      // Warning yellow (keep for warnings)
-      green: '#00FF00',       // Main green
-      teal: '#00FFCC',        // Cyan-ish green
+      base: "#0D1117", // Deep black background
+      mantle: "#161B22", // Slightly lighter black
+      crust: "#1B2127", // Terminal border color
+      text: "#00FF00", // Classic terminal green
+      subtext0: "#00D700", // Dimmer green
+      subtext1: "#00BB00", // Even dimmer green
+      surface0: "#1C2128", // Slightly lifted surface
+      surface1: "#21262D", // Terminal input area
+      surface2: "#282E35", // Selected area
+      overlay0: "#008800", // Darker green for overlays
+      overlay1: "#006600", // Even darker green
+      blue: "#00FF00", // Keep everything in green shades
+      lavender: "#00FF66", // Slight variation
+      sapphire: "#00DD88", // Another variation
+      sky: "#00FFBB", // Lighter green
+      red: "#FF0000", // Error red (keep for errors)
+      maroon: "#AA0000", // Darker error
+      peach: "#00FF99", // Another green variation
+      yellow: "#FFFF00", // Warning yellow (keep for warnings)
+      green: "#00FF00", // Main green
+      teal: "#00FFCC", // Cyan-ish green
     },
   },
   amber: {
-    name: 'amber',
-    label: 'Amber Terminal',
+    name: "amber",
+    label: "Amber Terminal",
     colors: {
-      base: '#0D0904',        // Deep black with amber tint
-      mantle: '#160E06',      // Slightly lighter black
-      crust: '#1B1109',       // Terminal border color
-      text: '#FFB000',        // Classic amber
-      subtext0: '#CC8800',    // Dimmer amber
-      subtext1: '#995500',    // Even dimmer amber
-      surface0: '#1C1409',    // Slightly lifted surface
-      surface1: '#211909',    // Terminal input area
-      surface2: '#281E0A',    // Selected area
-      overlay0: '#663300',    // Darker amber for overlays
-      overlay1: '#442200',    // Even darker amber
-      blue: '#FFB000',        // Keep everything in amber shades
-      lavender: '#FFAA00',    // Slight variation
-      sapphire: '#FF9500',    // Another variation
-      sky: '#FFB000',         // Main amber
-      red: '#FF3300',         // Error red (keep for errors)
-      maroon: '#CC3300',      // Darker error
-      peach: '#FFAA55',       // Lighter amber
-      yellow: '#FFDD00',      // Warning yellow
-      green: '#FFB000',       // Main amber
-      teal: '#FFC000',        // Lighter amber
+      base: "#0D0904", // Deep black with amber tint
+      mantle: "#160E06", // Slightly lighter black
+      crust: "#1B1109", // Terminal border color
+      text: "#FFB000", // Classic amber
+      subtext0: "#CC8800", // Dimmer amber
+      subtext1: "#995500", // Even dimmer amber
+      surface0: "#1C1409", // Slightly lifted surface
+      surface1: "#211909", // Terminal input area
+      surface2: "#281E0A", // Selected area
+      overlay0: "#663300", // Darker amber for overlays
+      overlay1: "#442200", // Even darker amber
+      blue: "#FFB000", // Keep everything in amber shades
+      lavender: "#FFAA00", // Slight variation
+      sapphire: "#FF9500", // Another variation
+      sky: "#FFB000", // Main amber
+      red: "#FF3300", // Error red (keep for errors)
+      maroon: "#CC3300", // Darker error
+      peach: "#FFAA55", // Lighter amber
+      yellow: "#FFDD00", // Warning yellow
+      green: "#FFB000", // Main amber
+      teal: "#FFC000", // Lighter amber
     },
   },
   ibmPC: {
-    name: 'ibmPC',
-    label: 'IBM PC',
+    name: "ibmPC",
+    label: "IBM PC",
     colors: {
-      base: '#000000',        // Classic black background
-      mantle: '#0A0A0A',      // Slightly lighter black
-      crust: '#141414',       // Border color
-      text: '#AAAAAA',        // Light gray text
-      subtext0: '#888888',    // Dimmer text
-      subtext1: '#666666',    // Even dimmer text
-      surface0: '#1C1C1C',    // Slightly lifted surface
-      surface1: '#212121',    // Input area
-      surface2: '#282828',    // Selected area
-      overlay0: '#444444',    // Overlay
-      overlay1: '#333333',    // Darker overlay
-      blue: '#5555FF',        // CGA blue
-      lavender: '#FF55FF',    // CGA magenta
-      sapphire: '#5555FF',    // Another blue
-      sky: '#55FFFF',         // CGA cyan
-      red: '#FF5555',         // CGA red
-      maroon: '#AA0000',      // Darker red
-      peach: '#FF5555',       // Another red shade
-      yellow: '#FFFF55',      // CGA yellow
-      green: '#55FF55',       // CGA green
-      teal: '#55FFFF',        // Another cyan
+      base: "#000000", // Classic black background
+      mantle: "#0A0A0A", // Slightly lighter black
+      crust: "#141414", // Border color
+      text: "#AAAAAA", // Light gray text
+      subtext0: "#888888", // Dimmer text
+      subtext1: "#666666", // Even dimmer text
+      surface0: "#1C1C1C", // Slightly lifted surface
+      surface1: "#212121", // Input area
+      surface2: "#282828", // Selected area
+      overlay0: "#444444", // Overlay
+      overlay1: "#333333", // Darker overlay
+      blue: "#5555FF", // CGA blue
+      lavender: "#FF55FF", // CGA magenta
+      sapphire: "#5555FF", // Another blue
+      sky: "#55FFFF", // CGA cyan
+      red: "#FF5555", // CGA red
+      maroon: "#AA0000", // Darker red
+      peach: "#FF5555", // Another red shade
+      yellow: "#FFFF55", // CGA yellow
+      green: "#55FF55", // CGA green
+      teal: "#55FFFF", // Another cyan
     },
   },
 };

src/lib/types/config.ts

@@ -26,12 +26,12 @@ export const DEFAULT_CONFIG: AppConfig = {
       environ: false,
       session_id: false,
       start_time: false,
-      run_time: true
-    }
+      run_time: true,
+    },
   },
   behavior: {
     itemsPerPage: 15,
     refreshRate: 1000,
-    defaultStatusFilter: 'all'
-  }
+    defaultStatusFilter: "all",
+  },
 };

src/lib/types/index.ts

@@ -14,7 +14,7 @@ export interface Process {
   virtual_memory: number;
   start_time: number;
   run_time: number;
-  disk_usage: [number, number];  // [read_bytes, written_bytes]
+  disk_usage: [number, number]; // [read_bytes, written_bytes]
   session_id?: number;
 }
 

src/lib/utils/index.ts

@@ -5,22 +5,22 @@ export interface ProcessStatus {
 }
 
 export const statusMap: Record<string, ProcessStatus> = {
-  "Running": {
+  Running: {
     label: "Running",
     emoji: "🏃",
     color: "var(--green)",
   },
-  "Sleeping": {
+  Sleeping: {
     label: "Sleeping",
     emoji: "😴",
     color: "var(--blue)",
   },
-  "Idle": {
+  Idle: {
     label: "Idle",
     emoji: "⌛",
     color: "var(--overlay0)",
   },
-  "Unknown": {
+  Unknown: {
     label: "Unknown",
     emoji: "❓",
     color: "var(--overlay0)",