diff --git a/package-lock.json b/package-lock.json index 27a98d1..01d3a61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fortawesome/free-solid-svg-icons": "^6.6.0", "@tauri-apps/api": "^1.5.3", "@tauri-apps/plugin-shell": "^2", + "simple-icons": "^13.15.0", "svelte-fa": "^4.0.3" }, "devDependencies": { @@ -1513,6 +1514,19 @@ "dev": true, "license": "MIT" }, + "node_modules/simple-icons": { + "version": "13.15.0", + "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.15.0.tgz", + "integrity": "sha512-8SzFj9CvPlDnjDLISsAWTvpCs7om2zbSJZ1hNLRo6quWKLqFwjCD9opS24Q/yD0bdsnVHPpF0N3hitpHrY5u9w==", + "license": "CC0-1.0", + "engines": { + "node": ">=0.12.18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/simple-icons" + } + }, "node_modules/sirv": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz", diff --git a/package.json b/package.json index d486ee7..babd2f5 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@fortawesome/free-solid-svg-icons": "^6.6.0", "@tauri-apps/api": "^1.5.3", "@tauri-apps/plugin-shell": "^2", + "simple-icons": "^13.15.0", "svelte-fa": "^4.0.3" }, "devDependencies": { diff --git a/src/lib/components/ProcessTable.svelte b/src/lib/components/ProcessTable.svelte index 32da0d1..301fa47 100644 --- a/src/lib/components/ProcessTable.svelte +++ b/src/lib/components/ProcessTable.svelte @@ -6,6 +6,7 @@ } from "@fortawesome/free-solid-svg-icons"; import Fa from "svelte-fa"; import type { Process, Column } from "$lib/types"; + import * as SimpleIcons from "simple-icons"; export let processes: Process[]; export let columns: Column[]; @@ -22,6 +23,47 @@ if (sortConfig.field !== field) return "↕"; return sortConfig.direction === "asc" ? "↑" : "↓"; } + + function handleImageError(event: Event) { + const img = event.target as HTMLImageElement; + img.src = getIconForProcess("default"); // Fallback to default icon + img.onerror = null; // Prevent infinite loop if default icon also fails + } + + function getIconForProcess(name: string): string { + const cleanName = name + // Remove common app suffixes + .replace(/\.(app|exe)$/i, "") + // Replace separators with spaces + .replace(/[-_./\\]/g, " ") + // Get first word, trim, and lowercase + .split(" ")[0] + .trim() + .toLowerCase(); + + // Convert to SimpleIcons format (capitalize first word) + const formattedName = + cleanName.charAt(0).toUpperCase() + cleanName.slice(1); + const iconKey = `si${formattedName}`; + let simpleIcon = SimpleIcons[iconKey as keyof typeof SimpleIcons]; + + // Default icon if no match found + if (!simpleIcon) { + simpleIcon = SimpleIcons.siGhostery; + } + + // Use theme color instead of brand color + const color = getComputedStyle(document.documentElement) + .getPropertyValue("--text") + .trim(); + + const svg = + typeof simpleIcon === "object" && "svg" in simpleIcon + ? simpleIcon.svg + : ""; + const svgWithColor = svg.replace("
@@ -53,7 +95,19 @@ > {#each columns.filter((col) => col.visible) as column} - {#if column.format} + {#if column.id === "name"} +
+ + {process.name} +
+ {:else if column.format} {@html column.format(process[column.id])} {:else} {process[column.id]} @@ -345,4 +399,16 @@ .btn-action:disabled::before { display: none; } + + .process-icon { + width: 16px; + height: 16px; + object-fit: contain; + } + + .name-cell { + display: flex; + align-items: center; + gap: 8px; + } diff --git a/src/lib/styles/index.ts b/src/lib/styles/index.ts index b327c87..7a49a20 100644 --- a/src/lib/styles/index.ts +++ b/src/lib/styles/index.ts @@ -117,7 +117,7 @@ export const themes: Record = { crust: '#13131a', text: '#a9b1d6', subtext0: '#9aa5ce', - subtext1: '#b4f9f8', + subtext1: '#9aa5ce', surface0: '#232433', surface1: '#2a2b3d', surface2: '#32344a', diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts index dd38d33..9c72a61 100644 --- a/src/lib/utils/index.ts +++ b/src/lib/utils/index.ts @@ -73,12 +73,8 @@ export const statusMap: Record = { }; export function formatStatus(status: string): string { - // Log the incoming status for debugging - console.log('Process status:', status); - const processStatus = statusMap[status] || statusMap.Unknown; return ` - ${processStatus.emoji} ${processStatus.label} `; }