From d49a811d16770ae48e64d090ea15e301808d0671 Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Mon, 7 Apr 2025 15:49:40 +1000
Subject: bar: show windows on each workspace

---
 scss/bar.scss          | 25 +++++++++++++++++
 src/config/defaults.ts |  1 +
 src/config/types.ts    |  1 +
 src/modules/bar.tsx    | 74 ++++++++++++++++++++++++++++++--------------------
 4 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/scss/bar.scss b/scss/bar.scss
index a01e8ee..7a58b8a 100644
--- a/scss/bar.scss
+++ b/scss/bar.scss
@@ -70,12 +70,21 @@
         &.labels-shown > button {
             color: color.change(scheme.$overlay1, $alpha: 1);
 
+            .icon {
+                font-size: lib.s(13);
+                color: color.change(scheme.$subtext0, $alpha: 1);
+            }
+
             &.occupied {
                 color: color.mix(scheme.$text, scheme.$mauve, 50%);
             }
 
             &.focused {
                 color: color.change(scheme.$base, $alpha: 1);
+
+                .icon {
+                    color: color.change(scheme.$surface0, $alpha: 1);
+                }
             }
         }
     }
@@ -163,6 +172,14 @@
                     padding-left: lib.s(20);
                     padding-right: lib.s(20);
                 }
+
+                .icon {
+                    margin-left: lib.s(5);
+
+                    &:nth-child(2) {
+                        margin-left: lib.s(12);
+                    }
+                }
             }
         }
 
@@ -212,6 +229,14 @@
                     padding-top: lib.s(15);
                     padding-bottom: lib.s(15);
                 }
+
+                .icon {
+                    margin-top: lib.s(2);
+
+                    &:nth-child(2) {
+                        margin-top: lib.s(3);
+                    }
+                }
             }
         }
 
diff --git a/src/config/defaults.ts b/src/config/defaults.ts
index 7532d7f..f256265 100644
--- a/src/config/defaults.ts
+++ b/src/config/defaults.ts
@@ -49,6 +49,7 @@ export default {
                 showLabels: false,
                 labels: ["󰮯", "󰮯", "󰮯", "󰮯", "󰮯"],
                 xalign: -1,
+                showWindows: false,
             },
             dateTime: {
                 format: "%d/%m/%y %R",
diff --git a/src/config/types.ts b/src/config/types.ts
index 0a30145..eea8738 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -37,6 +37,7 @@ export default {
     "bar.modules.workspaces.showLabels": BOOL,
     "bar.modules.workspaces.labels": ARR(STR),
     "bar.modules.workspaces.xalign": NUM,
+    "bar.modules.workspaces.showWindows": BOOL,
     "bar.modules.dateTime.format": STR,
     "bar.modules.dateTime.detailedFormat": STR,
     // Launcher
diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index 97ce4d5..447b69d 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -204,47 +204,61 @@ const MediaPlaying = ({ monitor, ...props }: ModuleProps) => {
 };
 
 const Workspace = ({ idx }: { idx: number }) => {
-    let wsId = hyprland.focusedWorkspace
-        ? Math.floor((hyprland.focusedWorkspace.id - 1) / config.modules.workspaces.shown.get()) *
-              config.modules.workspaces.shown.get() +
-          idx
-        : idx;
+    const wsId = Variable.derive([bind(hyprland, "focusedWorkspace"), config.modules.workspaces.shown], (f, s) =>
+        f ? Math.floor((f.id - 1) / s) * s + idx : idx
+    );
+
+    const label = (
+        <label
+            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))}
+        />
+    );
 
     return (
         <button
             halign={Gtk.Align.CENTER}
             valign={Gtk.Align.CENTER}
-            onClicked={() => hyprland.dispatch("workspace", String(wsId))}
+            onClicked={() => hyprland.dispatch("workspace", String(wsId.get()))}
             setup={self => {
-                const update = () =>
-                    self.toggleClassName(
-                        "occupied",
-                        hyprland.clients.some(c => c.workspace?.id === wsId)
-                    );
-                const updateWs = () => {
-                    if (!hyprland.focusedWorkspace) return;
-                    wsId =
-                        Math.floor((hyprland.focusedWorkspace.id - 1) / config.modules.workspaces.shown.get()) *
-                            config.modules.workspaces.shown.get() +
-                        idx;
-                    self.toggleClassName("focused", hyprland.focusedWorkspace.id === wsId);
-                    update();
+                const updateOccupied = () => {
+                    const occupied = hyprland.clients.some(c => c.workspace?.id === wsId.get());
+                    self.toggleClassName("occupied", occupied);
+                };
+                const updateFocused = () => {
+                    self.toggleClassName("focused", hyprland.focusedWorkspace?.id === wsId.get());
+                    updateOccupied();
                 };
 
-                self.hook(config.modules.workspaces.shown, updateWs);
-                self.hook(hyprland, "notify::focused-workspace", updateWs);
-                self.hook(hyprland, "client-added", update);
-                self.hook(hyprland, "client-moved", update);
-                self.hook(hyprland, "client-removed", update);
-
-                self.toggleClassName("focused", hyprland.focusedWorkspace?.id === wsId);
-                update();
+                self.hook(hyprland, "client-added", updateOccupied);
+                self.hook(hyprland, "client-moved", updateOccupied);
+                self.hook(hyprland, "client-removed", updateOccupied);
+                self.hook(hyprland, "notify::focused-workspace", updateFocused);
+                updateFocused();
             }}
+            onDestroy={() => wsId.drop()}
         >
-            <label
+            <box
                 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))}
+                vertical={bind(config.vertical)}
+                setup={self => {
+                    const update = () => {
+                        if (config.modules.workspaces.showWindows.get()) {
+                            const clients = hyprland.clients.filter(c => c.workspace?.id === wsId.get());
+                            self.children = [
+                                label,
+                                ...clients.map(c => (
+                                    <label className="icon" label={bind(c, "class").as(getAppCategoryIcon)} />
+                                )),
+                            ];
+                        } else self.children = [label];
+                    };
+                    self.hook(wsId, update);
+                    self.hook(hyprland, "client-added", update);
+                    self.hook(hyprland, "client-moved", update);
+                    self.hook(hyprland, "client-removed", update);
+                    update();
+                }}
             />
         </button>
     );
-- 
cgit v1.2.3-freya