From d7008f754db38e8982593d7433266e7b51792318 Mon Sep 17 00:00:00 2001
From: Abdenasser <nasser.elidrissi065@gmail.com>
Date: Fri, 1 Nov 2024 03:36:48 +0100
Subject: [PATCH] adds processes icons
---
package-lock.json | 14 ++++++
package.json | 1 +
src/lib/components/ProcessTable.svelte | 68 +++++++++++++++++++++++++-
src/lib/styles/index.ts | 2 +-
src/lib/utils/index.ts | 4 --
5 files changed, 83 insertions(+), 6 deletions(-)
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("<svg", `<svg fill="${color}"`);
+ return `data:image/svg+xml;base64,${btoa(svgWithColor)}`;
+ }
</script>
<div class="table-container">
@@ -53,7 +95,19 @@
>
{#each columns.filter((col) => col.visible) as column}
<td class="truncate">
- {#if column.format}
+ {#if column.id === "name"}
+ <div class="name-cell">
+ <img
+ class="process-icon"
+ src={getIconForProcess(process.name)}
+ alt=""
+ height="16"
+ width="16"
+ on:error={handleImageError}
+ />
+ <span class="process-name">{process.name}</span>
+ </div>
+ {:else if column.format}
{@html column.format(process[column.id])}
{:else}
{process[column.id]}
@@ -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;
+ }
</style>
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<string, Theme> = {
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<string, ProcessStatus> = {
};
export function formatStatus(status: string): string {
- // Log the incoming status for debugging
- console.log('Process status:', status);
-
const processStatus = statusMap[status] || statusMap.Unknown;
return `<span class="status-badge" style="--status-color: ${processStatus.color}">
- <span class="status-emoji">${processStatus.emoji}</span>
${processStatus.label}
</span>`;
}