zwave-js / zwave-js-ui / 22344900083

19%

push

github

feat(ui): add setting to show labels on all navigation tabs (#4563)

The navigation tabs option only displayed text labels on the active tab,
requiring users to recognize icons or click tabs to identify them. This
adds a setting to show labels on all tabs when tab navigation is
enabled.

## Changes

**Type definitions**
- Added `showTabLabels?: boolean` to `UiConfig` interface

**State management** 
- Added `showTabLabels` to UI store state with localStorage persistence
- Added `setShowTabLabels()` action

**UI components**
- Settings page: New toggle "Show labels on all tabs" (disabled when
tabs navigation is off)
- App navigation: Updated tab rendering to conditionally show labels
based on setting

```vue
<!-- Before: Labels only on active tab -->
<span v-if="item.path === $route.path">
  {{ item.title }}
</span>

<!-- After: Labels on all tabs when enabled -->
<span v-if="item.path === $route.path || showTabLabels">
  {{ item.title }}
</span>
```

## Screenshots

**Default behavior** (labels on active tab only):
![Default
tabs](https://github.com/user-attachments/assets/7c1342ef-1cbf-4b64-aeb3-a8a43187f211)

**New setting enabled** (labels on all tabs):
![All tabs with
labels](https://github.com/user-attachments/assets/ce0aeae7-2085-4cc8-b884-39fd6104af41)

> [!WARNING]
>
> <details>
> <summary>Firewall rules blocked me from connecting to one or more
addresses (expand for details)</summary>
>
> #### I tried to connect to the following addresses, but was blocked by
firewall rules:
>
> - `224.0.0.251`
>   - Triggering command: `REDACTED, pid is -1` (packet block)
>
> If you need me to access, download, or install something from one of
these locations, you can either:
>
> - Configure [Actions setup
steps](https://gh.io/copilot/actions-setup-steps) to set up my
environment, which run before the firewall is enabled
> - Add the appropriate URLs or hosts to the custom allowlist in this
repository's [Copilot coding agent
settings](https://github.com/zwave-... (continued)

334 of 444 branches covered (75.23%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 2 files covered. (0.0%)

4052 of 22353 relevant lines covered (18.13%)

1.13 hits per line