✨ ags(workspaces): show last used client(window) on workspaces

ags/style/_bar.scss

@@ -51,18 +51,25 @@
 
   .workspaces {
     @include mixins.reset-props;
-    padding: 2px 2px;
+    padding: 1px 1px;
 
     & button {
+      @include mixins.reset-props;
+      
       border-radius: 16px;
       transition: 80ms linear;
-      padding: 12px 12px;
+      min-width: 12px;
+      padding: 0 6px;
       background: colors.$bg-tertiary;
       margin: 1px 2px;
 
       &.focus {
         background: colors.$fg-primary;
-        padding: 12px 20px;
+        min-width: 31px;
+      }
+
+      & icon {
+        font-size: 16px;
       }
     }
   }
@@ -180,6 +187,21 @@
         margin: 0 2px;
       }
 
+      & trough {
+        min-width: 65px;
+        min-height: 10px;
+        margin-right: 4px;
+      }
+
+      & slider {
+        min-width: 10px;
+        min-height: 10px;
+      }
+
+      & highlight {
+        min-height: 10px;
+      }
+
       & .nf {
         margin: {
           right: 3px;

ags/widget/bar/Workspaces.ts

@@ -1,31 +1,42 @@
-import { bind } from "astal";
+import { bind, Variable } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalHyprland from "gi://AstalHyprland";
+import { getAppIcon } from "../../scripts/apps";
 
 const hyprland = AstalHyprland.get_default();
 
 export function Workspaces(): Gtk.Widget {
-    const workspacesEventBox = new Widget.EventBox({
+
+    return new Widget.EventBox({
         onScroll: (_, event) => 
             event.delta_y > 0 ? hyprland.dispatch("workspace", "e-1") : hyprland.dispatch("workspace", "e+1"),
-
         child: new Widget.Box({
             className: "workspaces",
-            vexpand: false,
-            valign: Gtk.Align.CENTER,
             children: bind(hyprland, "workspaces").as((workspaces) => {
-                const sortedWorkspaces = workspaces.sort((a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id());
+                const sortedWorkspaces = workspaces.sort(
+                    (a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id());
+
                 return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => 
                     new Widget.Button({
-                        className: bind(hyprland, "focusedWorkspace").as((focusedWs: AstalHyprland.Workspace) => workspace === focusedWs ? "focus" : ""),
+                        className: bind(hyprland, "focusedWorkspace").as(
+                            (focusedWs: AstalHyprland.Workspace) => workspace.id === focusedWs.id ? "focus" : ""),
                         visible: true,
+                        child: new Widget.Icon({
+                            className: "last-app-icon",
+                            visible: Variable.derive([
+                                bind(workspace, "lastClient"),
+                                bind(hyprland, "focusedWorkspace")
+                            ], (lastClient, focusedWorkspace) => focusedWorkspace?.id === workspace.id ?
+                                 false : Boolean(lastClient))(),
+                            icon: bind(workspace, "lastClient").as((lastClient) =>
+                                lastClient ? 
+                                    getAppIcon(lastClient.initialClass) || "image-missing"
+                                : "image-missing")
+                        } as Widget.IconProps),
                         onClicked: () => workspace.focus()
                     } as Widget.ButtonProps)
                 )
             })
         } as Widget.BoxProps)
     } as Widget.EventBoxProps);
-
-
-    return workspacesEventBox;
 }