fix: improve icon handling (#5)

* check for title aswell (useful for windows applications) * default check applicationframehost (win apps) * add more icons
adriankarlen · Aug 27, 2024 · 52c5afa · 52c5afa
1 parent 6a43007
commit 52c5afa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/config.yaml b/config.yaml
@@ -115,7 +115,7 @@ window/bar:
           @for (child of glazewm.focusedWorkspace.children) {
             @if (child.state.type != "minimized") {
               <span class="process {{ child.hasFocus && "current"}}">
-                <i class="ti" data-process-name="{{ child.processName.toLowerCase() }}"></i>
+                <i class="ti" data-title="{{ child.title.toLowerCase() }}" data-process-name="{{ child.processName.toLowerCase() }}"></i>
               </span> 
             }
           }

diff --git a/scripts/glazewm.js b/scripts/glazewm.js
@@ -1,22 +1,35 @@
-const processIconMap = {
+const iconMap = {
   // Terminals
   "wezterm-gui": { icon: "ti-terminal-2" },
   alacritty: { icon: "ti-terminal-2" },
-  WindowsTerminal: { icon: "ti-terminal-2" },
+  windowsterminal: { icon: "ti-terminal-2" },
 
   // Editors
   code: { icon: "ti-brand-vscode" }, // VS Code
   devenv: { icon: "ti-brand-visual-studio" }, // Visual Studio
 
   // Communication
   "ms-teams": { icon: "ti-brand-teams" },
-  olk: { icon: "ti-mail" }, //Outlook
+  olk: { icon: "ti-mail" }, // Outlook
 
   // VPN
-  applicationframehost: { icon: "ti-spy" }, // Azure VPN Client
+  "azure vpn client": { icon: "ti-spy" }, // Azure VPN Client
 
   // Browsers
   zen: { icon: "ti-circle-letter-z" },
+  msedge: { icon: "ti-brand-edge" },
+
+  // Utils
+  snippingtool: { icon: "ti-screenshot" },
+  "control panel": { icon: "ti-settings" },
+  explorer: { icon: "ti-folder" },
+  photos: { icon: "ti-photo" },
+  sound: { icon: "ti-headphones" },
+  excel: { icon: "ti-file-spreadsheet" },
+  onenote: { icon: "ti-note" },
+  powerpnt: { icon: "ti-presentation" },
+  winword: { icon: "ti-file-word" },
+  mspaint: { icon: "ti-palette" },
 
   // Ignore
   msedgewebview2: { ignore: true },
@@ -36,17 +49,22 @@ const addProcessIconCallback = (mutationsList) => {
 
         iconNodes.forEach((iconNode) => {
           const processName = iconNode.getAttribute("data-process-name");
+          const title = iconNode.getAttribute("data-title");
 
-          if (!processName) return;
-
-          const process = processIconMap[processName];
-
+          if (!processName && !title) return;
+          const process = iconMap[processName] || iconMap[title];
           const unmapped = process == null;
           if (!unmapped && process.ignore) {
             iconNode.remove();
             return;
           }
 
+          /** INFO: Edge case, all Windows apps has this process name,
+           * to avoid some manual mapping, use title without brand */
+          if (unmapped && processName == "applicationframehost") {
+            iconNode.classList.add(`ti-${title}`);
+          }
+
           iconNode.classList.add(
             unmapped ? `ti-brand-${processName}` : process.icon,
           );
@@ -64,4 +82,3 @@ if (parentNode) {
 } else {
   console.error("Parent node #glazewm-workspaces not found.");
 }
-;