navbar: config show labels

Hide labels by default

3 files changed, 38 insertions, 23 deletions

diff --git a/src/config/defaults.ts b/src/config/defaults.ts
index 9b4bf1c..21ba436 100644
--- a/src/config/defaults.ts
+++ b/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: {
diff --git a/src/config/types.ts b/src/config/types.ts
index 6127e6f..5e7415a 100644
--- a/src/config/types.ts
+++ b/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,
diff --git a/src/modules/navbar.tsx b/src/modules/navbar.tsx
index 3ad94f6..3e2b1c9 100644
--- a/src/modules/navbar.tsx
+++ b/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,28 +76,34 @@ const PaneButton = ({
     </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>
-);
+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" : ""
+            )}
+            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(revealChild)}
+                    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);