# 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:

```jsonc
"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:

```css
#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