✨ feat: peek workspace numbers when SUPER is pressed

ags/scripts/arg-handler.ts

@@ -2,9 +2,9 @@ import { Gtk } from "astal/gtk3";
 import { Windows } from "../windows";
 import { restartInstance } from "./reload-handler";
 import { Wireplumber } from "./volume";
-import { AskPopup } from "../widget/AskPopup";
-import { execAsync } from "astal";
 import { startRunnerDefault } from "../runner/Runner";
+import { showWorkspaceNumbers } from "../widget/bar/Workspaces";
+import { timeout } from "astal";
 
 export function handleArguments(request: string): any {
     const args: Array<string> = request.split(" ");
@@ -29,12 +29,10 @@ export function handleArguments(request: string): any {
             startRunnerDefault();
             return "Opening runner..."
 
-        case "test":
-            return AskPopup({
-                onAccept: () => execAsync("notify-send -u normal haha dumb"),
-                text: "Would you accept?",
-                title: "Dumb Question"
-            });
+        case "show-ws-numbers":
+            showWorkspaceNumbers.set(true);
+            timeout(2000, () => showWorkspaceNumbers.set(false));
+            return "Showing numbers";
 
         default:
             return "command not found! try checking help";
@@ -158,6 +156,7 @@ Options:
   reload: creates a new astal instance and removes this one.
   volume: wireplumber volume controller, see "volume help".
   runner: open the application runner.
+  (show|hide)-ws-numbers: show or hide workspace numbers in bar.
   help, -h, --help: shows this help message.
 
 2025 (c) retrozinndev's Hyprland-Dots, licensed under the MIT License.

ags/style/_bar.scss

@@ -66,6 +66,16 @@
       &.focus {
         background: colors.$fg-primary;
         min-width: 31px;
+
+        & label.id {
+          color: colors.$fg-light;
+          margin-right: 0;
+        }
+      }
+
+      & label.id {
+        font-weight: 600;
+        margin-right: 4px;
       }
 
       & icon {

ags/widget/bar/Workspaces.ts

@@ -4,6 +4,7 @@ import AstalHyprland from "gi://AstalHyprland";
 import { getAppIcon } from "../../scripts/apps";
 
 const hyprland = AstalHyprland.get_default();
+export const showWorkspaceNumbers = new Variable<boolean>(false);
 
 export function Workspaces(): Gtk.Widget {
 
@@ -26,18 +27,33 @@ export function Workspaces(): Gtk.Widget {
                                 `${lastClient.get_class()}: `
                             : ""
                         } ${lastClient.title}` : "" }`),
-                        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),
+                        child: new Widget.Box({
+                            children: [
+                                new Widget.Revealer({
+                                    transitionDuration: 120,
+                                    transitionType: Gtk.RevealerTransitionType.SLIDE_LEFT,
+                                    revealChild: showWorkspaceNumbers(),
+                                    child: new Widget.Label({
+                                        label: bind(workspace, "id").as(String),
+                                        className: "id",
+                                        xalign: 0.5,
+                                        hexpand: true,
+                                    } as Widget.LabelProps)
+                                } as Widget.RevealerProps),
+                                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),
+                            ]
+                        } as Widget.BoxProps),
                         onClicked: () => workspace.focus()
                     } as Widget.ButtonProps)
                 )