Skip to content

refactor(devtools): drive the sidebar from a configurable visible-tabs list - #8826

Merged
wmertens merged 1 commit into
QwikDev:build/v2from
Aejkatappaja:feat/customizable-sidebar-tabs-foundation
Jul 14, 2026
Merged

wmertens merged 1 commit into
QwikDev:build/v2from
Aejkatappaja:feat/customizable-sidebar-tabs-foundation

Conversation

@Aejkatappaja

@Aejkatappaja Aejkatappaja commented Jul 13, 2026 •

Copy link
Copy Markdown
Member

Context

Foundation (PR 1 of ~4) for the Customizable Sidebar Tabs feature. This PR is intentionally behavior-preserving: it introduces the data model the later PRs build on, with no visible change yet.

Change

  • Add an ordered visibleTabIds: DevtoolsTabId[] to DevtoolsState, defaulting to every tab in registry order.
  • New sidebar-tabs.ts model: getDefaultVisibleTabIds() and getVisibleTabs(visibleTabIds, isExtension), which resolves the ordered ids to their configs (via a private tabsById map) and applies the existing extension vite-only filter.
  • DevtoolsSidebar renders getVisibleTabs(state.visibleTabIds, state.isExtension) instead of iterating the registry directly.

The default (all tabs, registry order) makes the rendered sidebar identical to today, including the extension's vite-only filtering.

Follow-up PRs (this is an epic, split for reviewability)

This PR ships the model only. The rest of the feature lands in separate PRs on top of it:

  • PR 2 — More panel + "Customize" entry point + fixed bottom actions grouping.
  • PR 3 — Customize Tabs overlay modal (Visible / Available lists, checkbox toggle, Apply/Cancel), plus preference persistence.
  • PR 4 — drag-and-drop reordering + usability polish.

The customization UI in PRs 2 to 4 is gated to the Vite overlay (!state.isExtension); the extension keeps the default sidebar.

Verification

  • tsc on the devtools UI passes (0 errors); the model is fully typed with no casts.
  • New sidebar-tabs.unit.ts covers the default list, order preservation, and vite-only filtering in overlay vs extension.
  • eslint 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.
@Aejkatappaja
Aejkatappaja requested a review from a team as a code owner July 13, 2026 00:42
@changeset-bot

changeset-bot Bot commented Jul 13, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: df94da4

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 Patch

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

@qwik.dev/router

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

eslint-plugin-qwik

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

create-qwik

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

@qwik.dev/optimizer

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

@qwik.dev/devtools

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

commit: df94da4

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

@JerryWu1234

Copy link
Copy Markdown
Contributor

@wmertens @maiieul done

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

3 participants