navbar: add mediadisplay toggle

Also better error message for visualiser

src/modules/mediadisplay/visualiser.tsx

@@ -33,7 +33,7 @@ export default () => (
                     // Show error text if cava unavailable
                     const fg = self.get_style_context().get_color(Gtk.StateFlags.NORMAL);
                     cr.setSourceRGBA(fg.red, fg.green, fg.blue, fg.alpha);
-                    const layout = self.create_pango_layout("Visualiser unavailable");
+                    const layout = self.create_pango_layout("Visualiser module requires Cava");
                     const [w, h] = layout.get_pixel_size();
                     cr.moveTo((width - w) / 2, (height - h) / 2);
                     cr.setAntialias(cairo.Antialias.BEST);

src/modules/navbar.tsx

@@ -2,12 +2,15 @@ import type { Monitor } from "@/services/monitors";
 import { capitalize } from "@/utils/strings";
 import type { AstalWidget } from "@/utils/types";
 import { bind, execAsync, Variable } from "astal";
-import { Astal, Gtk } from "astal/gtk3";
+import { App, 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 layerNames = ["mediadisplay"] as const;
+type LayerName = `${(typeof layerNames)[number]}${number}`;
+
 const specialWsNames = ["sysmon", "communication", "music", "todo"] as const;
 type SpecialWsName = (typeof specialWsNames)[number];
 
@@ -20,6 +23,10 @@ const getPaneIcon = (name: PaneName) => {
     return "date_range";
 };
 
+const getLayerIcon = (name: LayerName) => {
+    return "graphic_eq";
+};
+
 const getSpecialWsIcon = (name: SpecialWsName) => {
     if (name === "sysmon") return "speed";
     if (name === "communication") return "communication";
@@ -76,6 +83,36 @@ const PaneButton = ({
     </button>
 );
 
+const LayerButton = ({ name }: { name: LayerName }) => (
+    <button
+        cursor="pointer"
+        onClicked={() => App.toggle_window(name)}
+        setup={self =>
+            self.hook(App, "window-toggled", (_, window) => {
+                if (window.name === name) self.toggleClassName("current", window.visible);
+            })
+        }
+    >
+        <box vertical className="nav-button">
+            <label className="icon" label={getLayerIcon(name)} />
+            <revealer
+                transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
+                transitionDuration={150}
+                setup={self => {
+                    let visible = false;
+                    self.hook(config.showLabels, (_, v) => self.toggleClassName(v && visible));
+                    self.hook(App, "window-toggled", (_, window) => {
+                        if (window.name === name)
+                            self.toggleClassName("current", config.showLabels.get() && window.visible);
+                    });
+                }}
+            >
+                <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} />
+            </revealer>
+        </box>
+    </button>
+);
+
 const SpecialWsButton = ({ name }: { name: SpecialWsName }) => {
     const revealChild = Variable.derive(
         [config.showLabels, bind(AstalHyprland.get_default(), "focusedClient")],
@@ -152,6 +189,9 @@ export default ({ monitor }: { monitor: Monitor }) => {
                     {paneNames.map(n => (
                         <PaneButton monitor={monitor} name={n} sidebar={sidebar} />
                     ))}
+                    {layerNames.map(n => (
+                        <LayerButton name={`${n}${monitor.id}`} />
+                    ))}
                     <box vexpand />
                     {specialWsNames.map(n => (
                         <SpecialWsButton name={n} />