Skip to content

fix(hub-ui): hide the panel while a toggle action is on - #477

Merged
antfu merged 1 commit into
mainfrom
fix/toggle-action-hide-panel
Nov 1, 2026
Merged

antfu merged 1 commit into
mainfrom
fix/toggle-action-hide-panel

Conversation

@antfubot

@antfubot antfubot commented Nov 1, 2026

Copy link
Copy Markdown
Collaborator

Fixes a bug in #469 (toggle dock actions, released in 1.3.0).

Problem

When a toggle action turns on, the hub sets panel.session.open to false and keeps the selection. The floating panel in DockPanel.vue showed whenever a dock was selected. It did not read session.open, so the panel stayed on the page over the tool. Edge mode already read session.open, so only the floating dock had the bug.

Fix

  • The floating panel and the edge panel now use one helper, getPanelViewEntry(context). It returns the selected view only while session.open is true.
  • The selection stays, and the iframe stays mounted. When the tool turns off, the same view, route, and sub-tab come back.
  • While the panel is hidden, the dock bar does not mark the selected view as active. A click on that view opens it again. Before, the click cleared the selection.
  • The guide for hub UI providers now says that a provider must show the panel only while panel.session.open is true.

I did not change the hub to save and restore the selection. That approach unmounts the view and loses the iframe state.

I looked for code that needs "open is false but the panel shows". I found none. Outside click and Escape already clear the selection. Dock auto-hide treats open: false as closed. Edge mode already hid the panel. The standalone viewer does not use session.open. The two custom hub examples have no floating panel.

Verification

  • New test in client-script.integration.test.ts. It turns the tool on and off in three ways: a second click, setActionActive(id, false), and the Escape command. After each one, it checks that the panel view is hidden and that the same view and route come back. The test fails without the fix.
  • Real browser (Chromium, hub-ui playground ?embedded, with a temporary toggle action):
Step Before After
Open a view panel shows panel shows
Tool on panel still shows (open: false) panel hidden
Escape panel shows panel shows, same view
Tool on, then click it again panel never hid hidden, then shows, same view
Tool on, then setActionActive(id, false) panel never hid hidden, then shows, same view
Click the view while the tool is on selection cleared view opens, tool off
  • pnpm lint, pnpm knip, pnpm typecheck, and pnpm build pass. pnpm test: 1813 tests pass. Two devframe tests fail in my sandbox ([::1] loopback through an HTTP proxy). They are not related to this change.

🤖 Generated with Claude Code

The floating dock panel showed whenever a dock was selected, so a toggle
action set `session.open` to false but the panel stayed on the page. The
panel now shows only while `session.open` is true, like edge mode. The
selection stays, so the same view and route come back when the tool
turns off.

While the panel is hidden, the dock bar no longer marks the selected
view as active. A click on that view now opens it again, instead of
clearing the selection.

Refs #469

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Nov 1, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
devframe Ready Ready Preview Nov 1, 2026 12:57pm UTC

@github-actions

github-actions Bot commented Nov 1, 2026

Copy link
Copy Markdown

👁️‍🗨️ Review this pull request with grouped, summarized diffs at:
👉 https://pulls.review/gh/devframes/devframe/477?from=github-actions[bot]

raw result

💭 analyzed by vercel-ai-gateway/anthropic/claude-sonnet-5
🕰️ 2026-11-01 12:56 UTC
🔗 head 43cfb85
🤖 automated by pulls.review

{
  "headSha": "43cfb85e528d9775b2e7f227b6cdd0523309d409",
  "result": {
    "overallSummary": "Fixes the floating dock panel (DockPanel.vue) not hiding while a toggle action is on, by giving it and the edge panel a shared `getPanelViewEntry` helper that respects `panel.session.open`, plus a matching test and a doc clarification for hub UI providers.",
    "groups": [
      {
        "key": "panel-visibility-fix",
        "label": "Panel visibility fix",
        "summary": "Introduces a shared `getPanelViewEntry(context)` helper so both the floating panel and the edge panel hide whenever `panel.session.open` is `false` (e.g. while a toggle action is on), while the selection and iframe stay mounted. Also makes the dock bar stop marking the selection as active while the panel is hidden, so a click on it reopens the view instead of clearing the selection.",
        "category": "core",
        "filePaths": [
          "packages/hub-ui/src/client/state/dock-settings.ts",
          "packages/hub-ui/src/client/components/dock/DockPanel.vue",
          "packages/hub-ui/src/client/components/dock/DockEdge.vue",
          "packages/hub-ui/src/client/components/dock/Dock.vue"
        ],
        "critical": true,
        "fileNotes": [
          {
            "path": "packages/hub-ui/src/client/state/dock-settings.ts",
            "text": "New shared helper: panel content shows only when `session.open` is true and the selected entry isn't an action; used by both DockPanel and DockEdge to fix the inconsistency."
          },
          {
            "path": "packages/hub-ui/src/client/components/dock/DockPanel.vue",
            "text": "Previously `v-show` only checked that a non-action entry was selected, ignoring `session.open`; now it uses the shared helper, fixing the reported bug."
          }
        ]
      },
      {
        "key": "tests",
        "label": "Tests",
        "summary": "Adds an integration test covering the three ways a toggle action can turn off (click, `setActionActive(false)`, Escape command), asserting the panel hides while on and the same view/route return when off.",
        "category": "tests",
        "filePaths": [
          "packages/hub-ui/src/client/state/client-script.integration.test.ts"
        ]
      },
      {
        "key": "docs",
        "label": "Hub UI provider guide",
        "summary": "Clarifies that custom hub UI providers must show the panel only while `panel.session.open` is `true`, matching the fixed behavior.",
        "category": "docs",
        "filePaths": [
          "docs/content/1.guide/22.build-your-own-hub-ui.md"
        ]
      }
    ],
    "schemaVersion": 1,
    "source": "llm",
    "generatedAt": "2026-11-01T12:56:34.001Z",
    "model": "vercel-ai-gateway/anthropic/claude-sonnet-5",
    "locale": "en"
  }
}

@antfu
antfu merged commit d7071d9 into main Nov 1, 2026
13 of 14 checks passed
@antfu
antfu deleted the fix/toggle-action-hide-panel branch November 1, 2026 12:57
antfubot added a commit to nuxt/devtools that referenced this pull request Nov 1, 2026
Includes the fix for toggle dock actions not hiding the panel
(devframes/devframe#477). Also exclude `@devframes/agentic` from the
minimum release age by name, like the rest of the devframe packages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch was successfully deployed

1 active deployment
Preview — 43cfb85e Deployed Nov 1, 2026 by vercel[bot]
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