Skip to content

feat(devtools): add the Customize Tabs overlay to the sidebar - #8831

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

wmertens merged 2 commits into
QwikDev:build/v2from
Aejkatappaja:feat/customizable-sidebar-tabs-modal

Conversation

@Aejkatappaja

@Aejkatappaja Aejkatappaja commented Jul 13, 2026 •

Copy link
Copy Markdown
Member

Context

PR 2 of the Customizable Sidebar Tabs feature, stacked on #8826 (the visible-tabs model). Because it is a fork branch, this PR currently also contains #8826's commit; review/merge #8826 first and GitHub will reduce this diff to just the overlay commit. Review the top commit feat(devtools): add the Customize Tabs overlay to the sidebar. The customization UI is gated to the Vite overlay (!state.isExtension); the extension is unaffected.

CleanShot 2026-07-14 at 12  16 16

Change

  • A "Customize" entry (adjustments icon) in the sidebar bottom actions opens a CustomizeTabsPanel overlay above the content (backdrop, no layout shift).
  • The overlay shows a Visible in Sidebar list and an Available in More Panel list; checkboxes move tabs between them. Edits are pending until Apply, which commits state.visibleTabIds and persists it to localStorage; Cancel or closing discards them.
  • Persistence is restored on load (overlay only); an empty list (all tabs hidden) is honored.
  • Adds IconAdjustmentsHorizontal; extends sidebar-tabs.ts with getAvailableTabIds, setTabVisible, resolveTabs, and load/save helpers.

Not in this PR (later stacked PRs)

  • Drag-and-drop reordering of visible tabs.
  • The sidebar More panel to actually open hidden tabs (today a hidden tab is reachable only by re-showing it in Customize).
  • Usability polish (drag handles, refined states).

Verification

  • tsc on the devtools UI passes (0 errors); no as casts.
  • sidebar-tabs.unit.ts covers available/toggle derivation and load/save/normalize (including honored empty and dropped unknown/duplicate ids).
  • The devtools package builds through the Qwik optimizer, and the overlay was exercised in the docs host: toggling moves tabs between the two lists, Apply updates the sidebar, and the choice survives reload.
  • 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.
@Aejkatappaja
Aejkatappaja requested a review from a team as a code owner July 13, 2026 22:11
@changeset-bot

changeset-bot Bot commented Jul 13, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: bc90c3b

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@8831

@qwik.dev/router

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

eslint-plugin-qwik

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

create-qwik

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

@qwik.dev/optimizer

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

@qwik.dev/devtools

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

commit: bc90c3b

@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 bc90c3b

@wmertens
wmertens merged commit bc90c3b 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