Added an option to define custom window title mappings. (#149)

lib/types/options.d.ts

@@ -34,6 +34,7 @@ export type RowProps<T> = {
     disabledBinding?: Variable<boolean>
     exportData?: ThemeExportData
     subtitle?: string | VarType<any> | Opt,
+    subtitleLink?: string,
     dependencies?: string[],
     increment?: number
 }

modules/bar/window_title/index.ts

@@ -1,8 +1,12 @@
 const hyprland = await Service.import("hyprland");
+import options from 'options';
 import { ActiveClient } from 'types/service/hyprland'
 
 const filterTitle = (windowtitle: ActiveClient) => {
     const windowTitleMap = [
+        // user provided values
+        ...options.bar.windowtitle.title_map.value,
+        // Original Entries
         ["kitty", "󰄛", "Kitty Terminal"],
         ["firefox", "󰈹", "Firefox"],
         ["microsoft-edge", "󰇩", "Edge"],
@@ -12,7 +16,93 @@ const filterTitle = (windowtitle: ActiveClient) => {
         ["steam", "", "Steam"],
         ["spotify", "󰓇", "Spotify"],
         ["obsidian", "󱓧", "Obsidian"],
+
+        // Browsers
+        ["google-chrome", "", "Google Chrome"],
+        ["brave-browser", "󰖟", "Brave Browser"],
+        ["chromium", "", "Chromium"],
+        ["opera", "", "Opera"],
+        ["vivaldi", "󰖟", "Vivaldi"],
+        ["waterfox", "󰖟", "Waterfox"],
+        ["thorium", "󰖟", "Waterfox"],
+        ["tor-browser", "", "Tor Browser"],
+
+        // Terminals
+        ["gnome-terminal", "", "GNOME Terminal"],
+        ["konsole", "", "Konsole"],
+        ["alacritty", "", "Alacritty"],
+        ["wezterm", "", "Wezterm"],
+        ["foot", "󰽒", "Foot Terminal"],
+        ["tilix", "", "Tilix"],
+        ["xterm", "", "XTerm"],
+        ["urxvt", "", "URxvt"],
+        ["st", "", "st Terminal"],
+
+        // Development Tools
+        ["code", "󰨞", "Visual Studio Code"],
+        ["vscode", "󰨞", "VS Code"],
+        ["sublime-text", "", "Sublime Text"],
+        ["atom", "", "Atom"],
+        ["android-studio", "󰀴", "Android Studio"],
+        ["intellij-idea", "", "IntelliJ IDEA"],
+        ["pycharm", "󱃖", "PyCharm"],
+        ["webstorm", "󱃖", "WebStorm"],
+        ["phpstorm", "󱃖", "PhpStorm"],
+        ["eclipse", "", "Eclipse"],
+        ["netbeans", "", "NetBeans"],
+        ["docker", "", "Docker"],
+        ["vim", "", "Vim"],
+        ["neovim", "", "Neovim"],
+        ["emacs", "", "Emacs"],
+
+        // Communication Tools
+        ["slack", "󰒱", "Slack"],
+        ["telegram-desktop", "", "Telegram"],
+        ["whatsapp", "󰖣", "WhatsApp"],
+        ["teams", "󰊻", "Microsoft Teams"],
+        ["skype", "󰒯", "Skype"],
+        ["thunderbird", "", "Thunderbird"],
+
+        // File Managers
+        ["nautilus", "󰝰", "Files (Nautilus)"],
+        ["thunar", "󰝰", "Thunar"],
+        ["pcmanfm", "󰝰", "PCManFM"],
+        ["nemo", "󰝰", "Nemo"],
+        ["ranger", "󰝰", "Ranger"],
+        ["doublecmd", "󰝰", "Double Commander"],
+        ["krusader", "󰝰", "Krusader"],
+
+        // Media Players
+        ["vlc", "󰕼", "VLC Media Player"],
+        ["mpv", "", "MPV"],
+        ["rhythmbox", "󰓃", "Rhythmbox"],
+
+        // Graphics Tools
+        ["gimp", "", "GIMP"],
+        ["inkscape", "", "Inkscape"],
+        ["krita", "", "Krita"],
+        ["blender", "󰂫", "Blender"],
+
+        // Video Editing
+        ["kdenlive", "", "Kdenlive"],
+
+        // Games and Gaming Platforms
+        ["lutris", "󰺵", "Lutris"],
+        ["heroic", "󰺵", "Heroic Games Launcher"],
+        ["minecraft", "󰍳", "Minecraft"],
+        ["csgo", "󰺵", "CS:GO"],
+        ["dota2", "󰺵", "Dota 2"],
+
+        // Office and Productivity
+        ["evernote", "", "Evernote"],
+
+        // Cloud Services and Sync
+        ["dropbox", "󰇣", "Dropbox"],
+
+        // Desktop
         ["^$", "󰇄", "Desktop"],
+
+        // Fallback icon
         ["(.+)", "󰣆", `${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
     ];
 
@@ -20,10 +110,19 @@ const filterTitle = (windowtitle: ActiveClient) => {
         RegExp(wt[0]).test(windowtitle.class.toLowerCase()),
     );
 
+    // return the default icon if no match is found or
+    // if the array element matched is not of size 3
+    if (!foundMatch || foundMatch.length !== 3) {
+        return {
+            icon: windowTitleMap[windowTitleMap.length - 1][1],
+            label: windowTitleMap[windowTitleMap.length - 1][2],
+        };
+    }
+
     return {
         icon: foundMatch ? foundMatch[1] : windowTitleMap[windowTitleMap.length - 1][1],
         label: foundMatch ? foundMatch[2] : windowTitleMap[windowTitleMap.length - 1][2]
-    }
+    };
 };
 
 const ClientTitle = () => {

options.ts

@@ -669,6 +669,9 @@ const options = mkOptions(OPTIONS, {
         launcher: {
             icon: opt("󰣇"),
         },
+        windowtitle: {
+            title_map: opt([]),
+        },
         workspaces: {
             show_icons: opt(false),
             show_numbered: opt(false),

scss/style/settings/dialog.scss

@@ -171,6 +171,19 @@ window.settings-dialog {
     color: $bar-menus-dimtext;
   }
 
+  .options-sublabel-link {
+
+    label {
+      font-size: 0.75em;
+      margin-top: 0.2em;
+      color: $bar-menus-dimtext;
+    }
+
+    &:hover label {
+      color: $bar-menus-listitems-active;
+    }
+  }
+
   .inputter-container {
     border-radius: $bar-menus-border-radius * 0.5;
 

widget/settings/pages/config/bar/index.ts

@@ -12,7 +12,7 @@ export const BarSettings = () => {
             vertical: true,
             children: [
                 Header('Layouts'),
-                Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Please refer to the github README for instructions: https://github.com/Jas-SinghFSU/HyprPanel', type: 'object' }, 'bar-layout-input'),
+                Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#layouts', type: 'object', subtitleLink: 'https://hyprpanel.com/configuration/panel.html#layouts' }, 'bar-layout-input'),
 
                 Header('Spacing'),
                 Option({ opt: options.theme.bar.outer_spacing, title: 'Outer Spacing', subtitle: 'Spacing on the outer left and right edges of the bar.', type: 'string' }),
@@ -46,6 +46,7 @@ export const BarSettings = () => {
 
                 Header('Window Titles'),
                 Option({ opt: options.theme.bar.buttons.windowtitle.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
+                Option({ opt: options.bar.windowtitle.title_map, title: 'Window Title Mappings', subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings', type: 'object', subtitleLink: 'https://hyprpanel.com/configuration/panel.html#window-title-mappings' }),
 
                 Header('Volume'),
                 Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),

widget/settings/shared/Label.ts

@@ -1,4 +1,22 @@
-export const Label = (name: string, sub = "") => {
+export const Label = (name: string, sub = "", subtitleLink = '') => {
+    const subTitle = () => {
+        if (subtitleLink.length) {
+            return Widget.Button({
+                hpack: "start",
+                vpack: "center",
+                class_name: "options-sublabel-link",
+                label: sub,
+                // run a bash command to open the link in the default browswer
+                on_primary_click: () => Utils.execAsync(`bash -c 'xdg-open ${subtitleLink}'`),
+            })
+        }
+        return Widget.Label({
+            hpack: "start",
+            vpack: "center",
+            class_name: "options-sublabel",
+            label: sub
+        })
+    }
     return Widget.Box({
         vertical: true,
         hpack: "start",
@@ -9,12 +27,7 @@ export const Label = (name: string, sub = "") => {
                 class_name: "options-label",
                 label: name
             }),
-            Widget.Label({
+            subTitle()
-                hpack: "start",
-                vpack: "center",
-                class_name: "options-sublabel",
-                label: sub
-            }),
         ]
     })
 }

widget/settings/shared/Option.ts

@@ -14,7 +14,7 @@ export const Option = <T>(props: RowProps<T>, className: string = '') => {
                 hpack: "start",
                 vpack: "center",
                 hexpand: true,
-                child: Label(props.title, props.subtitle || ""),
+                child: Label(props.title, props.subtitle || "", props.subtitleLink),
             }),
             Inputter(props, className, isUnsaved),
             Widget.Button({