astal: major changes

packages/ags/custom/widget/Bar.tsx

@@ -94,18 +94,21 @@ function Workspaces() {
     const hypr = Hyprland.get_default()
 
     return <box className="Workspaces">
-        {bind(hypr, "workspaces").as(wss => wss
-            .filter(ws => !(ws.id >= -99 && ws.id <= -2)) // filter out special workspaces
-            .sort((a, b) => a.id - b.id)
-            .map(ws => (
-                <button
-                    className={bind(hypr, "focusedWorkspace").as(fw =>
-                        ws === fw ? "focused" : "")}
-                    onClicked={() => ws.focus()}>
-                    {ws.id}
+        {bind(hypr, "focusedWorkspace").as(fw => {
+            if (!fw) return null
+
+            const currentChunkStart = Math.floor((fw.id - 1) / 5) * 5 + 1
+            const visibleIds = Array.from({ length: 5 }, (_, i) => currentChunkStart + i)
+
+            return visibleIds.map(id => {
+                const ws = hypr.workspaces.find(w => w.id === id)
+                return <button
+                    className={fw.id === id ? "focused" : ""}
+                    onClick={() => ws?.focus()}>
+                    {id}
                 </button>
-            ))
-        )}
+            })
+        })}
     </box>
 }
 
@@ -122,7 +125,7 @@ function FocusedClient() {
     </box>
 }
 
-function Time({ format = "%H:%M - %A %e" }) {
+function Time({ format = "%H:%M  %a %b %e" }) {
     const time = Variable<string>("").poll(1000, () =>
         GLib.DateTime.new_now_local().format(format)!)
 
@@ -143,18 +146,16 @@ export default function Bar(monitor: Gdk.Monitor) {
         anchor={TOP | LEFT | RIGHT}>
         <centerbox>
             <box hexpand halign={Gtk.Align.START}>
-                <Workspaces />
-                <FocusedClient />
+                <Time />
             </box>
             <box>
-                <Media />
+                <Workspaces />
             </box>
             <box hexpand halign={Gtk.Align.END} >
                 <SysTray />
                 <Wifi />
                 <AudioSlider />
                 <BatteryLevel />
-                <Time />
             </box>
         </centerbox>
     </window>