navbar: config show labels

Hide labels by default

src/config/defaults.ts

@@ -120,6 +120,7 @@ export default {
     navbar: {
         persistent: false, // Whether to show all the time or only on hover
         appearWidth: 10, // The width in pixels of the hover area for the navbar to show up
+        showLabels: false, // Whether to show labels for active buttons
     },
     // Services
     math: {

src/config/types.ts

@@ -61,6 +61,7 @@ export default {
     // Navbar
     "navbar.persistent": BOOL,
     "navbar.appearWidth": NUM,
+    "navbar.showLabels": BOOL,
     // Services
     "math.maxHistory": NUM,
     "updates.interval": NUM,

src/modules/navbar.tsx

@@ -61,7 +61,14 @@ const PaneButton = ({
             <revealer
                 transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
                 transitionDuration={150}
-                setup={self => hookIsCurrent(self, sidebar, name, c => self.set_reveal_child(c))}
+                setup={self => {
+                    let isCurrent = false;
+                    hookIsCurrent(self, sidebar, name, c => {
+                        isCurrent = c;
+                        self.set_reveal_child(config.showLabels.get() && c);
+                    });
+                    self.hook(config.showLabels, (_, v) => self.set_reveal_child(v && isCurrent));
+                }}
             >
                 <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} />
             </revealer>
@@ -69,7 +76,13 @@ const PaneButton = ({
     </button>
 );
 
-const SpecialWsButton = ({ name }: { name: SpecialWsName }) => (
+const SpecialWsButton = ({ name }: { name: SpecialWsName }) => {
+    const revealChild = Variable.derive(
+        [config.showLabels, bind(AstalHyprland.get_default(), "focusedClient")],
+        (l, c) => l && c?.get_workspace().get_name() === `special:${name}`
+    );
+
+    return (
         <button
             className={bind(AstalHyprland.get_default(), "focusedClient").as(c =>
                 c?.get_workspace().get_name() === `special:${name}` ? "current" : ""
@@ -82,15 +95,15 @@ const SpecialWsButton = ({ name }: { name: SpecialWsName }) => (
                 <revealer
                     transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
                     transitionDuration={150}
-                revealChild={bind(AstalHyprland.get_default(), "focusedClient").as(
+                    revealChild={bind(revealChild)}
-                    c => c?.get_workspace().get_name() === `special:${name}`
+                    onDestroy={() => revealChild.drop()}
-                )}
                 >
                     <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} />
                 </revealer>
             </box>
         </button>
-);
+    );
+};
 
 export default ({ monitor }: { monitor: Monitor }) => {
     const sidebar = Variable<SideBar | null>(null);