Files

T

funman300 67fbea93a4 waybar: drop unused children-class from tray drawer

No CSS rule targets .tray-drawer-child — speculative key with no
consumer. YAGNI cleanup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-30 21:30:35 -07:00

3.6 KiB

Raw Blame History

Waybar Tray Drawer Design

Date: 2026-04-30 Status: Approved

Summary

Add a Windows-style "show hidden icons" arrow to the waybar system tray. By default the tray icons are collapsed behind a single chevron glyph; clicking the chevron expands them inline to its right with a short slide animation. Clicking again collapses them back. No custom scripting — implemented entirely with waybar's built-in group/drawer module.

Current Behaviour

The tray module sits at the rightmost end of modules-right and always shows every status-icon a running program emits. When several apps are running (Discord, Steam, mouse manager, syncthing, etc.) the tray takes up significant horizontal space.

Target Behaviour

collapsed:    ... battery   [>]
expanded:     ... battery   [<] [icon][icon][icon]

Default state on bar startup: collapsed (only the arrow visible).
Click the arrow → tray icons appear to its right, ~200 ms slide.
Click the arrow again → tray icons collapse.
Tray icons keep their normal click/scroll behaviour while expanded.
State is per-bar-session; no persistence across waybar restarts.

Implementation

`waybar/config.jsonc`

Replace "tray" in modules-right with "group/tray-drawer". Add the group definition and the chevron module:

"modules-right": [
  "cpu", "temperature", "custom/power-profile", "custom/fan-profile",
  "pulseaudio", "network", "battery", "custom/mouse-battery",
  "group/tray-drawer"
],

"group/tray-drawer": {
  "orientation": "horizontal",
  "drawer": {
    "transition-duration": 200,
    "transition-left-to-right": true,
    "click-to-reveal": true
  },
  "modules": ["custom/tray-arrow", "tray"]
},

"custom/tray-arrow": {
  "format": "",
  "tooltip": false
}

The arrow is the first module in the group, so it stays visible when collapsed; tray is revealed/hidden by the drawer.

Glyph `` is nf-fa-chevron_right from Nerd Fonts. Pointing right when collapsed reads as "more stuff is hidden over here — click to reveal". The arrow does not rotate when expanded — GTK 3 CSS (which waybar uses) does not support the transform property and treats it as a fatal parse error. Instead, the chevron's color brightens from muted to full foreground as visual feedback that the drawer is open.

`waybar/style.css`

Add a base style for the chevron and a brightened-color rule keyed off the drawer's expanded state:

#custom-tray-arrow {
  padding: 0 12px;
  color: @tn-fg-muted;
  transition: color 200ms ease;
}

#group-tray-drawer.expanded #custom-tray-arrow {
  color: @tn-fg;
}

@tn-fg-muted matches the unfocused-workspace color elsewhere in the bar — the chevron reads as an inactive control, not a status icon. When the drawer is open, the arrow brightens to @tn-fg (full foreground) over 200 ms — same duration as the drawer's slide. This matches the existing style.css pattern of using color shifts (not transforms) to convey state, e.g. battery.warning, cpu.critical, temperature.warm.

Compatibility

click-to-reveal was added in waybar 0.10. Installed version is 0.15.0 — supported.

Files Touched

waybar/config.jsonc — replace tray entry, add two module definitions
waybar/style.css — add #custom-tray-arrow rules

Out of Scope

Persisting expanded/collapsed state across waybar restarts
Per-icon hide/show (waybar's tray module is monolithic — all icons or none)
Animating the surrounding modules; they shift left to make room as the drawer opens, which is unavoidable with waybar's drawer
Extending the same pattern to other right-side modules

3.6 KiB Raw Blame History