navbar: add special workspace toggles

scss/navbar.scss

@@ -21,36 +21,37 @@
         }
 
         &.current {
-            .pane-button {
+            .nav-button {
                 background-color: scheme.$primary;
                 color: color.change(scheme.$base, $alpha: 1);
             }
 
-            &:hover .pane-button,
-            &:focus .pane-button {
+            &:hover .nav-button,
+            &:focus .nav-button {
                 background-color: color.mix(scheme.$primary, scheme.$base, 80%);
             }
 
-            &:active .pane-button {
+            &:active .nav-button {
                 background-color: color.mix(scheme.$primary, scheme.$base, 70%);
             }
         }
 
-        &:first-child .pane-button {
+        &:first-child .nav-button {
             margin-top: lib.s(10);
         }
 
-        &:last-child .pane-button {
+        &:last-child .nav-button {
             margin-bottom: lib.s(10);
         }
     }
 
-    .pane-button {
+    .nav-button {
         @include lib.rounded(20);
         @include lib.element-decel;
 
         padding: lib.s(10) lib.s(8);
         margin: lib.s(5) lib.s(8);
+        min-width: lib.s(40);
 
         .icon {
             font-size: lib.s(28);

src/modules/navbar.tsx

@@ -1,11 +1,16 @@
 import type { Monitor } from "@/services/monitors";
+import { capitalize } from "@/utils/strings";
 import type { AstalWidget } from "@/utils/types";
-import { Variable } from "astal";
+import { bind, execAsync, Variable } from "astal";
 import { Astal, Gtk } from "astal/gtk3";
 import { navbar as config } from "config";
 import AstalHyprland from "gi://AstalHyprland";
+import Pango from "gi://Pango";
 import SideBar, { awaitSidebar, paneNames, switchPane, type PaneName } from "./sidebar";
 
+const specialWsNames = ["sysmon", "communication", "music", "todo"] as const;
+type SpecialWsName = (typeof specialWsNames)[number];
+
 const getPaneIcon = (name: PaneName) => {
     if (name === "dashboard") return "dashboard";
     if (name === "audio") return "tune";
@@ -15,13 +20,11 @@ const getPaneIcon = (name: PaneName) => {
     return "date_range";
 };
 
-const getPaneName = (name: PaneName) => {
-    if (name === "dashboard") return "Dash";
-    if (name === "audio") return "Audio";
-    if (name === "connectivity") return "Conn";
-    if (name === "packages") return "Pkgs";
-    if (name === "notifpane") return "Alrts";
-    return "Time";
+const getSpecialWsIcon = (name: SpecialWsName) => {
+    if (name === "sysmon") return "speed";
+    if (name === "communication") return "communication";
+    if (name === "music") return "music_note";
+    return "checklist";
 };
 
 const hookIsCurrent = (
@@ -50,17 +53,40 @@ const PaneButton = ({
 }) => (
     <button
         cursor="pointer"
-        onClick={() => switchPane(monitor, name)}
+        onClicked={() => switchPane(monitor, name)}
         setup={self => hookIsCurrent(self, sidebar, name, c => self.toggleClassName("current", c))}
     >
-        <box vertical className="pane-button">
+        <box vertical className="nav-button">
             <label className="icon" label={getPaneIcon(name)} />
             <revealer
                 transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
                 transitionDuration={150}
                 setup={self => hookIsCurrent(self, sidebar, name, c => self.set_reveal_child(c))}
             >
-                <label className="label" label={getPaneName(name)} />
+                <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} />
+            </revealer>
+        </box>
+    </button>
+);
+
+const SpecialWsButton = ({ name }: { name: SpecialWsName }) => (
+    <button
+        className={bind(AstalHyprland.get_default(), "focusedClient").as(c =>
+            c?.get_workspace().get_name() === `special:${name}` ? "current" : ""
+        )}
+        cursor="pointer"
+        onClicked={() => execAsync(`caelestia toggle ${name}`).catch(console.error)}
+    >
+        <box vertical className="nav-button">
+            <label className="icon" label={getSpecialWsIcon(name)} />
+            <revealer
+                transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
+                transitionDuration={150}
+                revealChild={bind(AstalHyprland.get_default(), "focusedClient").as(
+                    c => c?.get_workspace().get_name() === `special:${name}`
+                )}
+            >
+                <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} />
             </revealer>
         </box>
     </button>
@@ -113,6 +139,10 @@ export default ({ monitor }: { monitor: Monitor }) => {
                     {paneNames.map(n => (
                         <PaneButton monitor={monitor} name={n} sidebar={sidebar} />
                     ))}
+                    <box vexpand />
+                    {specialWsNames.map(n => (
+                        <SpecialWsButton name={n} />
+                    ))}
                 </box>
             </eventbox>
         </window>