bar: add optional labels for workspaces

Also can customise labels

scss/bar.scss

@@ -40,20 +40,43 @@
         }
     }
 
-    .workspaces > * {
+    .workspaces {
-        @include lib.rounded(100);
+        & > button {
-        @include lib.element-decel;
+            @include lib.rounded(100);
+            @include lib.element-decel;
 
-        min-width: lib.s(8);
+            font-size: lib.s(13);
-        min-height: lib.s(8);
+            font-weight: bold;
-        background-color: scheme.$surface1;
 
-        &.occupied {
+            &.focused {
-            background-color: scheme.$overlay1;
+                background-color: scheme.$mauve;
+            }
         }
 
-        &.focused {
+        &:not(.labels-shown) > button {
-            background-color: scheme.$mauve;
+            min-width: lib.s(8);
+            min-height: lib.s(8);
+            background-color: scheme.$surface1;
+
+            &.occupied {
+                background-color: scheme.$overlay1;
+            }
+
+            &.focused {
+                background-color: scheme.$mauve;
+            }
+        }
+
+        &.labels-shown > button {
+            color: color.change(scheme.$overlay1, $alpha: 1);
+
+            &.occupied {
+                color: color.mix(scheme.$text, scheme.$mauve, 50%);
+            }
+
+            &.focused {
+                color: color.change(scheme.$base, $alpha: 1);
+            }
         }
     }
 
@@ -126,13 +149,21 @@
         }
 
         .workspaces {
-            padding: lib.s(3) lib.s(18);
-
             @include lib.spacing(10);
 
             & > .focused {
                 min-width: lib.s(30);
             }
+
+            &.labels-shown > button {
+                padding: lib.s(3) lib.s(8);
+
+                &.focused {
+                    min-width: 0;
+                    padding-left: lib.s(20);
+                    padding-right: lib.s(20);
+                }
+            }
         }
 
         .tray {
@@ -167,13 +198,21 @@
         }
 
         .workspaces {
-            padding: lib.s(18) lib.s(3);
-
             @include lib.spacing(10, true);
 
             & > .focused {
                 min-height: lib.s(30);
             }
+
+            &.labels-shown > button {
+                padding: lib.s(3) lib.s(8);
+
+                &.focused {
+                    min-height: 0;
+                    padding-top: lib.s(15);
+                    padding-bottom: lib.s(15);
+                }
+            }
         }
 
         .tray {
@@ -222,10 +261,18 @@
 
         &.horizontal {
             @include bar-spacing;
+
+            .workspaces {
+                padding: lib.s(6) lib.s(15);
+            }
         }
 
         &.vertical {
             @include bar-spacing(true);
+
+            .workspaces {
+                padding: lib.s(15) lib.s(6);
+            }
         }
     }
 

src/config/defaults.ts

@@ -46,6 +46,9 @@ export default {
         modules: {
             workspaces: {
                 shown: 5,
+                showLabels: false,
+                labels: ["󰮯", "󰮯", "󰮯", "󰮯", "󰮯"],
+                xalign: -1,
             },
             dateTime: {
                 format: "%d/%m/%y %R",

src/config/types.ts

@@ -34,6 +34,9 @@ export default {
     "bar.layout.centerbox.end": ARR(barModules),
     "bar.layout.flowbox": ARR(barModules),
     "bar.modules.workspaces.shown": NUM,
+    "bar.modules.workspaces.showLabels": BOOL,
+    "bar.modules.workspaces.labels": ARR(STR),
+    "bar.modules.workspaces.xalign": NUM,
     "bar.modules.dateTime.format": STR,
     "bar.modules.dateTime.detailedFormat": STR,
     // Launcher

src/modules/bar.tsx

@@ -209,6 +209,7 @@ const Workspace = ({ idx }: { idx: number }) => {
               config.modules.workspaces.shown.get() +
           idx
         : idx;
+
     return (
         <button
             halign={Gtk.Align.CENTER}
@@ -239,31 +240,39 @@ const Workspace = ({ idx }: { idx: number }) => {
                 self.toggleClassName("focused", hyprland.focusedWorkspace?.id === wsId);
                 update();
             }}
-        />
+        >
+            <label
+                visible={bind(config.modules.workspaces.showLabels)}
+                css={bind(config.modules.workspaces.xalign).as(a => `margin-left: ${a}px; margin-right: ${-a}px;`)}
+                label={bind(config.modules.workspaces.labels).as(l => l[idx - 1] ?? String(idx))}
+            />
+        </button>
     );
 };
 
-const Workspaces = ({ monitor, ...props }: ModuleProps) => (
+const Workspaces = ({ monitor, ...props }: ModuleProps) => {
-    <eventbox
+    const className = Variable.derive(
-        onScroll={(_, event) => {
+        [config.modules.workspaces.shown, config.modules.workspaces.showLabels],
-            const activeWs = hyprland.focusedClient?.workspace.name;
+        (s, l) => `module workspaces ${s % 2 === 0 ? "even" : "odd"} ${l ? "labels-shown" : ""} ${getClassName(props)}`
-            if (activeWs?.startsWith("special:")) hyprland.dispatch("togglespecialworkspace", activeWs.slice(8));
+    );
-            else if (event.delta_y > 0 || hyprland.focusedWorkspace?.id > 1)
+
-                hyprland.dispatch("workspace", (event.delta_y < 0 ? "-" : "+") + 1);
+    return (
-        }}
+        <eventbox
-    >
+            onScroll={(_, event) => {
-        <box
+                const activeWs = hyprland.focusedClient?.workspace.name;
-            vertical={bind(config.vertical)}
+                if (activeWs?.startsWith("special:")) hyprland.dispatch("togglespecialworkspace", activeWs.slice(8));
-            className={bind(config.modules.workspaces.shown).as(
+                else if (event.delta_y > 0 || hyprland.focusedWorkspace?.id > 1)
-                s => `module workspaces ${s % 2 === 0 ? "even" : "odd"} ${getClassName(props)}`
+                    hyprland.dispatch("workspace", (event.delta_y < 0 ? "-" : "+") + 1);
-            )}
+            }}
         >
-            {bind(config.modules.workspaces.shown).as(
+            <box vertical={bind(config.vertical)} className={bind(className)} onDestroy={() => className.drop()}>
-                n => Array.from({ length: n }).map((_, idx) => <Workspace idx={idx + 1} />) // Start from 1
+                {bind(config.modules.workspaces.shown).as(
-            )}
+                    n => Array.from({ length: n }).map((_, idx) => <Workspace idx={idx + 1} />) // Start from 1
-        </box>
+                )}
-    </eventbox>
+            </box>
-);
+        </eventbox>
+    );
+};
 
 const TrayItem = (item: AstalTray.TrayItem) => (
     <menubutton