Visitar URL original
feat(hub-ui): pin group members to the dock bar and keep recent tools by antfubot · Pull Request #470 · devframes/devframe · GitHub
Skip to content

feat(hub-ui): pin group members to the dock bar and keep recent tools - #470

Open
antfubot wants to merge 1 commit into
mainfrom
feat/dock-pin-recent
Open

feat(hub-ui): pin group members to the dock bar and keep recent tools#470
antfubot wants to merge 1 commit into
mainfrom
feat/dock-pin-recent

Conversation

@antfubot

@antfubot antfubot commented Oct 30, 2026

Copy link
Copy Markdown
Collaborator

Why

Nuxt DevTools v4 puts about 20 tools in one dock group ("Nuxt"). After the 4.0.0 release, a user asked:

It would be great if recently used tools could appear directly in the toolbar, with an option to pin frequently used tools. For example, right-clicking a tool to pin it could help keep the interface clean while still allowing quick access to commonly used features.

Before this PR:

  • Users could pin only from Settings > Docks. The dock context menu had Hide, Refresh, Float/Edge and Popup, but no Pin.
  • Group popover and group sidebar rows had no context menu.
  • Pinning a group member only moved it to the top of its group. It never showed on the bar.
  • The float bar had one "recent" slot. It showed only when the bar overflowed, so a recent group member never showed on a short bar like Nuxt's.

What changes

1. Context menu: Pin / Unpin

  • Pin / Unpin is the first item in the dock context menu.
  • Right-click now also works on group popover rows and group sidebar rows.
  • Keyboard: Shift+F10 or the Menu key on a focused dock button opens the menu. The first item takes focus. Arrow keys, Home and End move between items. Escape closes the menu and returns focus to the button. Tab closes the menu.
  • The global shortcut listener now skips keys from inside the menu. Before, Escape closed the whole panel and left the menu open.

2. A pinned group member gets its own bar button

Decision: this is what "pin" means for a group member. There is no new setting.

Reasons:

  • Users see one idea: "pin = keep it on the toolbar". A separate "Show in bar" item next to "Pin" would be two words for almost the same thing.
  • Before this PR, pinning a member only reordered it inside a popover the user had to open first. That gave little value, and the user feedback shows people expect more.
  • docksPinned keeps its shape. Settings that already exist get the new behavior with no migration.

How it works:

  • docksGroupByCategories has a new liftPinnedMembers option. Only the bar's groupedEntries sets it. A pinned member then goes into the ~pinned bucket on the bar. It also still leads inside its group.
  • The Settings > Docks list does not set the option, so members stay listed only under their group.
  • Opening the pinned button opens that member. The group button shows as active, the same as when the member is opened from the popover.

3. Recent tools: up to N slots, default 3

  • A tool opened from a group popover or the overflow menu takes a slot after the bar items, newest first. Up to docksRecentLimit tools keep a slot.
  • Recent slots are added on top of maxVisibleItems. The default capacity is 5. If 3 recent slots came out of that capacity, most tools would move into the overflow. With extra slots, the main bar items never move when the user opens a tool.
  • A tool that is already on the bar (a visible top-level entry or a pinned member) does not take a slot. This removes duplicates with pinned tools.
  • Opening a tool that already has a recent slot does not reorder the slots, so icons do not move under the cursor.
  • Recent group members now show even when the bar does not overflow. This is the Nuxt case.

Default: on, with a limit of 3. Reasons: the bar already had a recent slot that was on by default, so this raises its limit. A slot shows only after the user opens a tool from beyond the bar, so a bar that nobody has used looks the same as before. Users can set the limit to 0 to turn the slots off.

The list stays per browser tab in the session store, as before (recentDockIds, newest first). recentDockId is deprecated. It is still read once, so a tab that saved the old field keeps its recent tool after an upgrade.

The edge-mode toolbar shows pinned members but no recent slots. This is the same as before for recent slots.

New keys

Key Where Type Default
docksRecentLimit user settings (devframe:user-settings, hub-ui augmentation) number (0 turns slots off) 3
recentDockIds DockSessionStorage (@devframes/hub/client) string[] []

recentDockId on DockSessionStorage is now @deprecated.

The control is in Settings > Appearance > Recent tools on the dock bar (Off, 1 to 5). The label is translated for all 10 locales.

For integrators (Nuxt DevTools)

You do not need to change anything. Group members need no flag. Pinning and recent slots work for every groupId member.

Screenshots

I checked the changes in Storybook with Playwright. The Dock/Shell/Float Bar > With Pinned And Recent Members story shows Nuxt > Components pinned at the front of the bar, and Nuxt > Pages in a recent slot at the end. In With Groups, right-click on a Playground popover row opens Pin / Hide / Refresh / Edge Mode / Popup with focus on Pin. Pin puts "Two" on the bar. Shift+F10 on that button opens the menu with "Unpin". ArrowDown moves focus to Hide. Escape closes the menu and returns focus to the button. I could not attach the image files from the CLI. Run pnpm -C packages/hub-ui storybook to see the stories.

Tests

  • dock-settings.test.ts: multi-slot split, the lone-overflow fold, member slots without overflow, the limit and 0, slots that keep their order, liftPinnedMembers, and a pinned recent member that renders in place.
  • I updated the @devframes/hub/client export snapshot for recentDockIds.
  • pnpm lint && pnpm knip && pnpm test && pnpm typecheck && pnpm build all pass.

🤖 Generated with Claude Code

@antfubot @claude
feat(hub-ui): pin group members to the dock bar and keep recent tools
f324c4a 
- Add Pin/Unpin to the dock context menu, and open the menu on group
  popover and group sidebar members. The menu takes focus, supports
  arrow keys, and Escape closes it and returns focus to the trigger.
- A pinned group member now also gets its own dock bar button, so a
  tool such as Nuxt > Components is one click away.
- The float bar keeps up to `docksRecentLimit` (default 3) tools last
  opened from a group popover or the overflow menu, in slots after the
  bar items. Recent group members show even when the bar does not
  overflow. The session store gains `recentDockIds`; `recentDockId` is
  deprecated and still read.

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

vercel Bot commented Oct 30, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated
devframe Ready Ready Preview Oct 30, 2026 12:24am UTC

@github-actions

github-actions Bot commented Oct 30, 2026

Copy link
Copy Markdown

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

raw result

💭 analyzed by vercel-ai-gateway/anthropic/claude-sonnet-5
🕰️ 2026-10-30 00:24 UTC
🔗 head f324c4a
🤖 automated by pulls.review

{
  "headSha": "f324c4ac7cfddbb81c39f58252250ea4036b0a73",
  "result": {
    "overallSummary": "Adds a \"Pin\" item to the dock context menu (now also usable via right-click on group popover/sidebar rows and via keyboard) and redefines pinning a group member as giving it its own bar button. It also generalizes the float bar's single \"recent dock\" slot into up to `docksRecentLimit` (default 3) slots that work even when the bar doesn't overflow, fixing the case where Nuxt DevTools' ~20-member group never surfaced a recent tool. The changes span core split/grouping logic, UI components, a new settings control, translations, tests/stories, and documentation.",
    "groups": [
      {
        "key": "core-pin-recent-logic",
        "label": "Pin & recent dock logic",
        "summary": "Core domain logic for the feature: `docksGroupByCategories` gains `liftPinnedMembers` so a pinned group member gets its own bar bucket, the recent-dock slot is generalized from a single entry (`recentDockId`) to a capped list (`recentDockIds`, `docksRecentLimit`), and the new setting/session fields are declared across the `@devframes/hub` and `hub-ui` type augmentations.",
        "category": "core",
        "filePaths": [
          "packages/hub-ui/src/client/state/dock-settings.ts",
          "packages/hub-ui/src/client/state/docks.ts",
          "packages/hub-ui/src/client/state/context.ts",
          "packages/hub-ui/src/client/state/settings-defaults.ts",
          "packages/hub-ui/src/client/types.ts",
          "packages/hub/src/client/docks.ts",
          "tests/__snapshots__/tsnapi/@devframes/hub/client.snapshot.d.ts"
        ],
        "fileNotes": [
          {
            "path": "packages/hub-ui/src/client/state/dock-settings.ts",
            "text": "Main algorithm changes: capacity-aware recent-slot reservation now supports multiple entries and lifting pinned members onto the bar without displacing visible bar items."
          },
          {
            "path": "packages/hub/src/client/docks.ts",
            "text": "`recentDockId` is deprecated in favor of `recentDockIds`; both fields stay on the interface for backward compatibility."
          }
        ]
      },
      {
        "key": "ui-context-menu-and-bar",
        "label": "Dock context menu & bar UI",
        "summary": "User-facing pieces: a Pin/Unpin item is added to the dock context menu (now keyboard-navigable and reachable from group popover/sidebar rows too), the float bar renders multiple recent slots alongside pinned member buttons, and a new Settings > Appearance control lets users set the recent-tools limit.",
        "category": "ui",
        "filePaths": [
          "packages/hub-ui/src/client/components/dock/Dock.vue",
          "packages/hub-ui/src/client/components/dock/DockContextMenu.ts",
          "packages/hub-ui/src/client/components/dock/DockGroupPopover.vue",
          "packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue",
          "packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue",
          "packages/hub-ui/src/client/state/commands.ts"
        ],
        "critical": true,
        "fileNotes": [
          {
            "path": "packages/hub-ui/src/client/components/dock/DockContextMenu.ts",
            "text": "Adds a focus-managed menu component (Shift+F10/Menu key support, arrow/Home/End navigation, Escape/Tab handling) plus the Pin/Unpin action and visibility rule."
          },
          {
            "path": "packages/hub-ui/src/client/state/commands.ts",
            "text": "The global shortcut listener now ignores keys originating inside the open dock menu, so Escape closes only the menu instead of the whole panel."
          }
        ]
      },
      {
        "key": "tests-and-stories",
        "label": "Tests and stories",
        "summary": "Unit tests rewritten for the new multi-entry recent-slot and pinned-member behavior, plus a new Storybook story demonstrating a pinned member and a recent slot together.",
        "category": "tests",
        "filePaths": [
          "packages/hub-ui/src/client/state/dock-settings.test.ts",
          "packages/hub-ui/src/client/components/dock/Dock.stories.ts"
        ]
      },
      {
        "key": "i18n-locales",
        "label": "Locale strings",
        "summary": "Adds translated labels for the new 'Recent tools on the dock bar' appearance setting across all supported locales.",
        "category": "i18n",
        "filePaths": [
          "packages/hub-ui/src/client/i18n/locales/de.json",
          "packages/hub-ui/src/client/i18n/locales/en.json",
          "packages/hub-ui/src/client/i18n/locales/es.json",
          "packages/hub-ui/src/client/i18n/locales/fr.json",
          "packages/hub-ui/src/client/i18n/locales/ja.json",
          "packages/hub-ui/src/client/i18n/locales/ko.json",
          "packages/hub-ui/src/client/i18n/locales/pt-BR.json",
          "packages/hub-ui/src/client/i18n/locales/ru.json",
          "packages/hub-ui/src/client/i18n/locales/zh-CN.json",
          "packages/hub-ui/src/client/i18n/locales/zh-TW.json"
        ]
      },
      {
        "key": "docs-guide",
        "label": "Guide documentation",
        "summary": "Documents the new pin and recent-tools behavior for hub-ui and the integrator-facing note that no group config changes are needed.",
        "category": "docs",
        "filePaths": [
          "docs/content/1.guide/16.hub.md"
        ]
      }
    ],
    "schemaVersion": 1,
    "source": "llm",
    "generatedAt": "2026-10-30T00:24:43.410Z",
    "model": "vercel-ai-gateway/anthropic/claude-sonnet-5",
    "locale": "en"
  }
}

This branch was successfully deployed

1 active deployment
Preview — f324c4ac Deployed Oct 30, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@antfubot