Skip to content

feat(devtools): reach hidden tabs from a sidebar More panel - #8832

Merged
wmertens merged 3 commits into
QwikDev:build/v2from
Aejkatappaja:feat/customizable-sidebar-tabs-more-panel
Jul 14, 2026
Merged

wmertens merged 3 commits into
QwikDev:build/v2from
Aejkatappaja:feat/customizable-sidebar-tabs-more-panel

Conversation

@Aejkatappaja

@Aejkatappaja Aejkatappaja commented Jul 13, 2026 •

Copy link
Copy Markdown
Member

Context

PR 3 of the Customizable Sidebar Tabs feature, stacked on #8831 (Customize overlay), which stacks on #8826 (model). As a fork branch this PR also contains the two parent commits; review/merge #8826 then #8831 first and GitHub reduces this diff to just the More-panel commit. Review the top commit feat(devtools): reach hidden tabs from a sidebar More panel.

CleanShot 2026-07-14 at 12  59 09@2x

Change

  • A More button (ellipsis) in the sidebar bottom actions opens a popover listing the currently hidden tabs; selecting one activates it, so hiding a tab no longer makes its content unreachable.
  • The button appears only when tabs are hidden and highlights when a hidden tab is the active one. Click-away closes the popover.
  • Extracts a shared SidebarIconButton (used by More + Customize) and a getAvailableTabs helper (reused by the Customize overlay), and uses the existing glass-panel utility for the popover surface.

Not in this PR (later stacked PR)

  • Drag-and-drop reordering of visible tabs.
  • Usability polish (drag handles, refined states).

Known follow-up

glass-bg is a no-op class (only --color-glass-bg exists, no rule); the modal relies on it plus a dimming backdrop. The new popover uses the real glass-panel utility. Standardizing the modal on glass-panel and removing the dead glass-bg is a separate cleanup.

Verification

  • tsc on the devtools UI passes (0 errors); no as casts.
  • sidebar-tabs.unit.ts still green (available/toggle/persistence).
  • Built through the Qwik optimizer and exercised in the docs host: hiding tabs surfaces the More button, its popover lists them, and clicking a hidden tab renders its content.
  • eslint (incl. eslint-plugin-qwik) passes on the touched files.

References

QwikDev project board, feature "Support Customizable Sidebar Tabs".

…s list

Add an ordered visibleTabIds list to devtools state (defaulting to every tab in
registry order) and render the sidebar from it via a getVisibleTabs helper that
resolves ids and applies the extension vite-only filter.

Behavior-preserving foundation for the upcoming customizable sidebar tabs; the
default keeps the sidebar identical to today.
Add a sidebar entry (Vite overlay only) that opens a Customize Tabs overlay: a
Visible in Sidebar list and an Available in More Panel list with checkboxes to
choose which tools show. Edits stay pending until Apply, which persists the
visible-tabs list to localStorage; Cancel or closing discards them.
Add a More button to the sidebar bottom actions that opens a popover listing the
hidden tabs; selecting one activates it, so hiding a tab no longer makes it
unreachable. The button shows only when tabs are hidden and highlights when a
hidden tab is active. Extract a shared SidebarIconButton and a getAvailableTabs
helper reused by the Customize overlay.
@Aejkatappaja
Aejkatappaja requested a review from a team as a code owner July 13, 2026 23:12
@changeset-bot

changeset-bot Bot commented Jul 13, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 8ac85e9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@qwik.dev/devtools Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Jul 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@qwik.dev/core

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8832

@qwik.dev/router

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8832

eslint-plugin-qwik

npm i https://pkg.pr.new/QwikDev/qwik/eslint-plugin-qwik@8832

create-qwik

npm i https://pkg.pr.new/QwikDev/qwik/create-qwik@8832

@qwik.dev/optimizer

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/optimizer@8832

@qwik.dev/devtools

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/devtools@8832

commit: 8ac85e9

@github-actions

github-actions Bot commented Jul 13, 2026 •

Copy link
Copy Markdown
Contributor
built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
qwik-docs ✅ Ready (View Log) Visit Preview 8ac85e9

@wmertens
wmertens merged commit 8ac85e9 into QwikDev:build/v2 Jul 14, 2026
49 checks passed
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