[antfubot]

Summary

Nuxt DevTools v3 had an "Expand sidebar" option, and v4 lost it. Without it, users must hover over each icon in the group sidebar to find a tool (nuxt/devtools#1147).

This PR adds an Expand group sidebar setting under Settings → Appearance in hub-ui. When the setting is on, the group sidebar grows from w-12 to w-44 and shows each tool's title next to its icon. Any devframe that renders in a group gets this, not only Nuxt. The setting is off by default, so the current icon-only sidebar does not change.

• New optional field expandGroupSidebar on DevframeDocksUserSettings. Its default (false) lives in HUB_UI_SETTINGS_DEFAULTS, so "reset all settings" turns it off again.
• DockGroupSidebar.vue: in expanded mode, the group header, each tool row and the "Show more" row show a label. Badges move inline at the end of the row. Rows stay h-8, so the code that decides how many tools fit before "Show more" works the same in both modes. Tooltips stay on, so descriptions and cut-off titles are still readable.
• The toggle uses the same markup as the existing Appearance toggles. Its two new i18n keys are in all 10 locale files.
• New Expanded and ExpandedOverflow stories.

The issue also asks for a bigger click area on the docked icon and for font size and color contrast rules. This PR does not cover those.

Refs nuxt/devtools#1147

Visual changes

Storybook, dark theme. The warning-triangle icons appear because Iconify icons could not load in the capture sandbox. They are not part of the change.

Before (setting off, the default)	After (setting on)
Dock/Group/Sidebar → Default	Dock/Group/Sidebar → Expanded

Expanded with overflow, and the new toggle:

Expanded + overflow	Settings → Appearance

Verification

• pnpm vitest run packages/hub-ui: 16 files, 163 tests pass (this includes the i18n test that checks all locale files have the same keys).
• pnpm -C packages/hub-ui typecheck: passes. pnpm lint: passes.
• pnpm -C packages/hub-ui build:css: the shadow-root stylesheet contains the new classes (w-44, items-stretch, min-w-0).
• Storybook: switching the toggle on in Views/Builtin/Settings → Embedded updates the setting.
• pnpm knip fails with Unused files: starter/playground/single/main.ts. The same failure is on main (this branch's base equals origin/main), and this PR does not touch starter/.
• pnpm test (the full suite) had 26 failures in other packages (tests/exports, @devframes/vite, @devframes/hub initiate, shiki, starter) while Storybook was also running. Each of those files passes when run alone. Some loopback/port tests in devframe fail in my sandbox because of its network setup.
• Not checked: the setting in a real hub host (float, edge, popup, standalone). I checked it only in Storybook.

This PR was written with help from an AI agent (Claude).

[vercel]

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

Project	Deployment	Actions	Updated
devframe	Ready	Preview	Nov 2, 2026 3:57am UTC

[github-actions]

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

raw result

💭 analyzed by vercel-ai-gateway/anthropic/claude-sonnet-5
🕰️ 2026-11-02 03:56 UTC
🔗 head 3e913be
🤖 automated by pulls.review

{
  "headSha": "3e913be442af07bbf654bc3215de21dacd74be2f",
  "result": {
    "overallSummary": "Reintroduces the Nuxt DevTools v3 \\\"expand sidebar\\\" option, missing in v4, as a new hub-ui setting. When `expandGroupSidebar` is on, the group sidebar widens and shows each tool's title next to its icon instead of relying on hover tooltips; it's off by default so current behavior is unchanged. The change is split into the core implementation (types, defaults, component, settings toggle), new Storybook stories covering the expanded/overflow states, and the i18n strings for the toggle across all locales.",
    "groups": [
      {
        "key": "feature",
        "label": "Expand group sidebar setting",
        "summary": "Adds the `expandGroupSidebar` setting (type, default value) and wires it into the group sidebar component, which now renders a wider rail with tool titles next to icons when enabled, plus a new toggle in Settings → Appearance.",
        "category": "ui",
        "filePaths": [
          "packages/hub-ui/src/client/types.ts",
          "packages/hub-ui/src/client/state/settings-defaults.ts",
          "packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue",
          "packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue"
        ],
        "fileNotes": [
          {
            "path": "packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue",
            "text": "Row heights stay `h-8` in both modes so the existing overflow/\"show more\" capacity math is unaffected; only widths, alignment and an extra label span change."
          }
        ]
      },
      {
        "key": "stories",
        "label": "Storybook stories",
        "summary": "New `Expanded` and `ExpandedOverflow` stories to visually cover the new expanded sidebar mode and its overflow behavior.",
        "category": "tests",
        "filePaths": [
          "packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts"
        ]
      },
      {
        "key": "i18n",
        "label": "Locale strings",
        "summary": "Adds the two new `appearance.expandSidebar*` translation keys to all 10 supported locales for the new toggle.",
        "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"
        ]
      }
    ],
    "schemaVersion": 1,
    "source": "llm",
    "generatedAt": "2026-11-02T03:56:55.986Z",
    "model": "vercel-ai-gateway/anthropic/claude-sonnet-5",
    "locale": "en"
  }
}