Added Smart Highlighting for mapped workspaces. (#288)

* Improved workspace highlighting and added smart highlight option

* Added to default workspace variant.

* Remove hover effects

* Remove unused functions.

* Remove unused hover properties

* Remove unused variable from utils.

* Make hideUnoccupied the default option

modules/bar/workspaces/utils.ts

@@ -1,8 +1,14 @@
 import { WorkspaceIconMap } from 'lib/types/workspace';
 import { isValidGjsColor } from 'lib/utils';
+import options from 'options';
 
 const hyprland = await Service.import('hyprland');
 
+const { monochrome, background } = options.theme.bar.buttons;
+const { background: wsBackground, active } = options.theme.bar.buttons.workspaces;
+
+const { showWsIcons } = options.bar.workspaces;
+
 const getWsIcon = (wsIconMap: WorkspaceIconMap, i: number): string => {
     const iconEntry = wsIconMap[i];
 
@@ -23,16 +29,26 @@ const getWsIcon = (wsIconMap: WorkspaceIconMap, i: number): string => {
     return `${i}`;
 };
 
-export const getWsColor = (wsIconMap: WorkspaceIconMap, i: number): string => {
+export const getWsColor = (wsIconMap: WorkspaceIconMap, i: number, smartHighlight: boolean): string => {
     const iconEntry = wsIconMap[i];
+    const hasColor = typeof iconEntry === 'object' && 'color' in iconEntry && isValidGjsColor(iconEntry.color);
     if (!iconEntry) {
         return '';
     }
 
-    const hasColor = typeof iconEntry === 'object' && 'color' in iconEntry && iconEntry.color !== '';
+    if (showWsIcons.value && smartHighlight && hyprland.active.workspace.id === i) {
+        const iconColor = monochrome.value ? background : wsBackground;
+        const iconBackground = hasColor && isValidGjsColor(iconEntry.color) ? iconEntry.color : active.value;
+        const colorCss = `color: ${iconColor};`;
+        const backgroundCss = `background: ${iconBackground};`;
+
+        return colorCss + backgroundCss;
+    }
+
     if (hasColor && isValidGjsColor(iconEntry.color)) {
         return `color: ${iconEntry.color}; border-bottom-color: ${iconEntry.color};`;
     }
+
     return '';
 };
 
@@ -41,21 +57,23 @@ export const renderClassnames = (
     showNumbered: boolean,
     numberedActiveIndicator: string,
     showWsIcons: boolean,
+    smartHighlight: boolean,
     i: number,
 ): string => {
     if (showIcons) {
-        return `workspace-icon txt-icon bar`;
+        return 'workspace-icon txt-icon bar';
     }
+
     if (showNumbered || showWsIcons) {
-        const numActiveInd = hyprland.active.workspace.id === i ? `${numberedActiveIndicator}` : '';
+        const numActiveInd = hyprland.active.workspace.id === i ? numberedActiveIndicator : '';
+        const wsIconClass = showWsIcons ? 'txt-icon' : '';
+        const smartHighlightClass = smartHighlight ? 'smart-highlight' : '';
 
-        const className =
-            `workspace-number can_${numberedActiveIndicator} ` +
-            `${numActiveInd} ` +
-            `${showWsIcons ? 'txt-icon' : ''}`;
+        const className = `workspace-number can_${numberedActiveIndicator} ${numActiveInd} ${wsIconClass} ${smartHighlightClass}`;
 
-        return className;
+        return className.trim();
     }
+
     return 'default';
 };
 

modules/bar/workspaces/variants/default.ts

@@ -41,16 +41,19 @@ export const defaultWses = (monitor: number): BoxWidget => {
                                         options.bar.workspaces.showWsIcons.bind('value'),
                                         options.bar.workspaces.workspaceIconMap.bind('value'),
                                         options.theme.matugen.bind('value'),
+                                        options.theme.bar.buttons.workspaces.smartHighlight.bind('value'),
+                                        hyprland.active.workspace.bind('id'),
                                     ],
                                     (
                                         sp: number,
                                         showWsIcons: boolean,
                                         workspaceIconMap: WorkspaceIconMap,
                                         matugen: boolean,
+                                        smartHighlight: boolean,
                                     ) => {
                                         return (
                                             `margin: 0rem ${0.375 * sp}rem;` +
-                                            `${showWsIcons && !matugen ? getWsColor(workspaceIconMap, i) : ''}`
+                                            `${showWsIcons && !matugen ? getWsColor(workspaceIconMap, i, smartHighlight) : ''}`
                                         );
                                     },
                                 ),
@@ -60,6 +63,7 @@ export const defaultWses = (monitor: number): BoxWidget => {
                                         options.bar.workspaces.show_numbered.bind('value'),
                                         options.bar.workspaces.numbered_active_indicator.bind('value'),
                                         options.bar.workspaces.showWsIcons.bind('value'),
+                                        options.theme.bar.buttons.workspaces.smartHighlight.bind('value'),
                                         options.bar.workspaces.icons.available.bind('value'),
                                         options.bar.workspaces.icons.active.bind('value'),
                                         hyprland.active.workspace.bind('id'),
@@ -69,12 +73,14 @@ export const defaultWses = (monitor: number): BoxWidget => {
                                         showNumbered: boolean,
                                         numberedActiveIndicator: string,
                                         showWsIcons: boolean,
+                                        smartHighlight: boolean,
                                     ) => {
                                         return renderClassnames(
                                             showIcons,
                                             showNumbered,
                                             numberedActiveIndicator,
                                             showWsIcons,
+                                            smartHighlight,
                                             i,
                                         );
                                     },

modules/bar/workspaces/variants/occupied.ts

@@ -28,6 +28,7 @@ export const occupiedWses = (monitor: number): BoxWidget => {
                 options.bar.workspaces.workspaceIconMap.bind('value'),
                 options.bar.workspaces.showWsIcons.bind('value'),
                 options.theme.matugen.bind('value'),
+                options.theme.bar.buttons.workspaces.smartHighlight.bind('value'),
                 ignored.bind('value'),
             ],
             (
@@ -46,6 +47,7 @@ export const occupiedWses = (monitor: number): BoxWidget => {
                 wsIconMap: WorkspaceIconMap,
                 showWsIcons: boolean,
                 matugen: boolean,
+                smartHighlight: boolean,
             ) => {
                 let allWkspcs = range(totalWkspcs || 8);
 
@@ -104,12 +106,13 @@ export const occupiedWses = (monitor: number): BoxWidget => {
                                 vpack: 'center',
                                 css:
                                     `margin: 0rem ${0.375 * spacing}rem;` +
-                                    `${showWsIcons && !matugen ? getWsColor(wsIconMap, i) : ''}`,
+                                    `${showWsIcons && !matugen ? getWsColor(wsIconMap, i, smartHighlight) : ''}`,
                                 class_name: renderClassnames(
                                     showIcons,
                                     showNumbered,
                                     numberedActiveIndicator,
                                     showWsIcons,
+                                    smartHighlight,
                                     i,
                                 ),
                                 label: renderLabel(