Skip to content

FEAT: group tabs in the top bar - #184

Merged
decay71 merged 2 commits into
mainfrom
feat/grouped-nav
Oct 21, 2026
Merged

decay71 merged 2 commits into
mainfrom
feat/grouped-nav

Conversation

@stefanodangelo

Copy link
Copy Markdown
Collaborator

As discussed in #181: the top bar can now group tabs, with a second row for the children of the open group. This is the structure for the Print Hub (Control, History, Queue, Favorites) that I plan to add, one tab per PR.

What changes

  • navItems entries may carry a group key. The top bar shows one entry per group that has at least one child (placed before Spools), and a second row lists the children while one of them is open.
  • Choosing a group opens the child you used last (remembered per browser), or its first child.
  • The group is defined as Print Hub (ui.tabs.print_hub, added in en, de and zh) and stays hidden until it has a child, so nothing changes visibly in this PR. The first tab PR makes it appear.
  • The second row is styled in classic, dark and light with the existing theme tokens, scrolls horizontally on phones and keeps a 44 px touch height. Panel mode is untouched.
  • The Dashboard tab and its name are unchanged, and the page width is unchanged (at 1024 px all four toolhead cards stay in one row).

To try it: add items.push({key: "queue", group: "printhub", label: "Queue"}) to navItems and add "queue" to _validTabs. The screenshots below were taken with three such temporary tabs.

Known limits: the second row is not sticky, only the top bar stays pinned while scrolling.

navItems entries may now carry a group key. The top bar shows one entry
for each group that has at least one child (Print Hub, placed before
Spools), and a second row lists the children while one of them is open.
Choosing a group opens the child that was open last, or its first child.
A group without children is not shown, so nothing changes visibly until
a feature adds its first tab to Print Hub.
The second row uses the same underline marker as the top bar in the new
design (theme tokens only, so the light shade follows) and the existing
button look in classic. On phones the row scrolls horizontally and the
buttons keep a 44px touch height.
@stefanodangelo

Copy link
Copy Markdown
Collaborator Author

Classic Theme:
grouped-bar-classic

Dark Theme:
grouped-bar-dark

Light Theme:
grouped-bar-light

Mobile View (Dark):
grouped-bar-phone_dark

@decay71
decay71 merged commit f21baa1 into main Oct 21, 2026
7 checks passed
@decay71
decay71 deleted the feat/grouped-nav branch October 21, 2026 09:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants