From f6a656045df7042ed7182ddc7b2e1b85d6abf907 Mon Sep 17 00:00:00 2001 From: "Anthony Fu (via agent)" Date: Mon, 2 Nov 2026 03:53:30 +0000 Subject: [PATCH 1/2] feat(hub-ui): add a setting to expand the group sidebar Show each tool's title next to its icon in the group sidebar when the new expandGroupSidebar setting is on. It is off by default. Refs nuxt/devtools#1147 --- .../components/dock/DockGroupSidebar.vue | 47 ++++++++++++++----- .../views-builtin/SettingsAppearance.vue | 18 +++++++ .../hub-ui/src/client/i18n/locales/de.json | 2 + .../hub-ui/src/client/i18n/locales/en.json | 2 + .../hub-ui/src/client/i18n/locales/es.json | 2 + .../hub-ui/src/client/i18n/locales/fr.json | 2 + .../hub-ui/src/client/i18n/locales/ja.json | 2 + .../hub-ui/src/client/i18n/locales/ko.json | 2 + .../hub-ui/src/client/i18n/locales/pt-BR.json | 2 + .../hub-ui/src/client/i18n/locales/ru.json | 2 + .../hub-ui/src/client/i18n/locales/zh-CN.json | 2 + .../hub-ui/src/client/i18n/locales/zh-TW.json | 2 + .../src/client/state/settings-defaults.ts | 4 +- packages/hub-ui/src/client/types.ts | 5 ++ 14 files changed, 81 insertions(+), 13 deletions(-) diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue index 7592961c..ce0cdf5d 100644 --- a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue +++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue @@ -32,6 +32,10 @@ const RESERVED_HEIGHT = 53 const settings = useSettings(props.context) +// Expanded: a wider rail with each member's title next to its icon. Row +// heights stay the same, so the capacity math below holds in both modes. +const expanded = computed(() => settings.value.expandGroupSidebar) + // Members split by in-group sub-category so the sidebar can divide sections. const memberGroups = computed(() => getGroupMembersGrouped( props.context.docks.entries, @@ -179,32 +183,42 @@ const moreButtonActive = computed(() => selectedInOverflow.value || isOverflowPa so the anchor + selected members' text-primary/bg-active render accent. -->
+ {{ group.title }}
-
+
diff --git a/packages/hub-ui/src/client/i18n/locales/de.json b/packages/hub-ui/src/client/i18n/locales/de.json index 0a956007..9e142be5 100644 --- a/packages/hub-ui/src/client/i18n/locales/de.json +++ b/packages/hub-ui/src/client/i18n/locales/de.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "Zuletzt verwendete Tools in der Dock-Leiste", "appearance.recentDocksHint": "Zuletzt aus einer Gruppe oder dem Überlaufmenü geöffnete Tools in der Dock-Leiste behalten (nur im Float-Modus).", "appearance.recentDocksOff": "Aus", + "appearance.expandSidebar": "Gruppen-Seitenleiste erweitern", + "appearance.expandSidebarHint": "Zeigt in der Gruppen-Seitenleiste die Namen der Tools neben ihren Symbolen.", "docks.intro": "Sichtbarkeit und Reihenfolge der Dock-Einträge verwalten. Ausgeblendete Einträge erscheinen nicht in der Dock-Leiste.", "docks.resetOrder": "Eigene Reihenfolge zurücksetzen", diff --git a/packages/hub-ui/src/client/i18n/locales/en.json b/packages/hub-ui/src/client/i18n/locales/en.json index ac1f1ade..8d75de47 100644 --- a/packages/hub-ui/src/client/i18n/locales/en.json +++ b/packages/hub-ui/src/client/i18n/locales/en.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "Recent tools on the dock bar", "appearance.recentDocksHint": "Keep the tools you last opened from a group or the overflow menu on the dock bar (float mode only).", "appearance.recentDocksOff": "Off", + "appearance.expandSidebar": "Expand group sidebar", + "appearance.expandSidebarHint": "Show tool names next to their icons in the group sidebar.", "docks.intro": "Manage visibility and order of dock entries. Hidden entries will not appear in the dock bar.", "docks.resetOrder": "Reset custom order", diff --git a/packages/hub-ui/src/client/i18n/locales/es.json b/packages/hub-ui/src/client/i18n/locales/es.json index 0ae5159f..d00adfa6 100644 --- a/packages/hub-ui/src/client/i18n/locales/es.json +++ b/packages/hub-ui/src/client/i18n/locales/es.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "Herramientas recientes en la barra", "appearance.recentDocksHint": "Mantén en la barra las herramientas que abriste por última vez desde un grupo o el menú de desbordamiento (solo en modo flotante).", "appearance.recentDocksOff": "Desactivado", + "appearance.expandSidebar": "Expandir la barra lateral del grupo", + "appearance.expandSidebarHint": "Muestra el nombre de cada herramienta junto a su icono en la barra lateral del grupo.", "docks.intro": "Gestiona la visibilidad y el orden de los paneles. Los paneles ocultos no aparecerán en la barra.", "docks.resetOrder": "Restablecer orden personalizado", diff --git a/packages/hub-ui/src/client/i18n/locales/fr.json b/packages/hub-ui/src/client/i18n/locales/fr.json index 58168b38..646facf6 100644 --- a/packages/hub-ui/src/client/i18n/locales/fr.json +++ b/packages/hub-ui/src/client/i18n/locales/fr.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "Outils récents dans la barre", "appearance.recentDocksHint": "Garder dans la barre les derniers outils ouverts depuis un groupe ou le menu de débordement (mode flottant uniquement).", "appearance.recentDocksOff": "Désactivé", + "appearance.expandSidebar": "Développer la barre latérale du groupe", + "appearance.expandSidebarHint": "Affiche le nom des outils à côté de leur icône dans la barre latérale du groupe.", "docks.intro": "Gérez la visibilité et l'ordre des panneaux. Les panneaux masqués n'apparaissent pas dans la barre.", "docks.resetOrder": "Réinitialiser l'ordre personnalisé", diff --git a/packages/hub-ui/src/client/i18n/locales/ja.json b/packages/hub-ui/src/client/i18n/locales/ja.json index 4a47d4d0..f1e34d30 100644 --- a/packages/hub-ui/src/client/i18n/locales/ja.json +++ b/packages/hub-ui/src/client/i18n/locales/ja.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "ドックバーの最近使ったツール", "appearance.recentDocksHint": "グループやオーバーフローメニューから最後に開いたツールをドックバーに表示します（フロートモードのみ）。", "appearance.recentDocksOff": "オフ", + "appearance.expandSidebar": "グループサイドバーを展開", + "appearance.expandSidebarHint": "グループサイドバーでアイコンの横にツール名を表示します。", "docks.intro": "ドック項目の表示と順序を管理します。非表示の項目はドックバーに表示されません。", "docks.resetOrder": "カスタム順序をリセット", diff --git a/packages/hub-ui/src/client/i18n/locales/ko.json b/packages/hub-ui/src/client/i18n/locales/ko.json index 8f2eef45..5ea48578 100644 --- a/packages/hub-ui/src/client/i18n/locales/ko.json +++ b/packages/hub-ui/src/client/i18n/locales/ko.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "도크 바의 최근 도구", "appearance.recentDocksHint": "그룹이나 오버플로 메뉴에서 마지막으로 연 도구를 도크 바에 유지합니다 (플로트 모드 전용).", "appearance.recentDocksOff": "끄기", + "appearance.expandSidebar": "그룹 사이드바 펼치기", + "appearance.expandSidebarHint": "그룹 사이드바에서 아이콘 옆에 도구 이름을 표시합니다.", "docks.intro": "도크 항목의 표시 여부와 순서를 관리합니다. 숨긴 항목은 도크 바에 나타나지 않습니다.", "docks.resetOrder": "사용자 지정 순서 초기화", diff --git a/packages/hub-ui/src/client/i18n/locales/pt-BR.json b/packages/hub-ui/src/client/i18n/locales/pt-BR.json index ac367dac..ac6a8035 100644 --- a/packages/hub-ui/src/client/i18n/locales/pt-BR.json +++ b/packages/hub-ui/src/client/i18n/locales/pt-BR.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "Ferramentas recentes na barra", "appearance.recentDocksHint": "Manter na barra as ferramentas abertas por último a partir de um grupo ou do menu de excedentes (somente no modo flutuante).", "appearance.recentDocksOff": "Desativado", + "appearance.expandSidebar": "Expandir a barra lateral do grupo", + "appearance.expandSidebarHint": "Mostra o nome de cada ferramenta ao lado do ícone na barra lateral do grupo.", "docks.intro": "Gerencie a visibilidade e a ordem dos painéis. Painéis ocultos não aparecem na barra.", "docks.resetOrder": "Redefinir ordem personalizada", diff --git a/packages/hub-ui/src/client/i18n/locales/ru.json b/packages/hub-ui/src/client/i18n/locales/ru.json index 09388704..4b4a7dc6 100644 --- a/packages/hub-ui/src/client/i18n/locales/ru.json +++ b/packages/hub-ui/src/client/i18n/locales/ru.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "Недавние инструменты на панели", "appearance.recentDocksHint": "Оставлять на панели инструменты, недавно открытые из группы или меню переполнения (только в плавающем режиме).", "appearance.recentDocksOff": "Выкл.", + "appearance.expandSidebar": "Развернуть боковую панель группы", + "appearance.expandSidebarHint": "Показывать названия инструментов рядом со значками на боковой панели группы.", "docks.intro": "Управляйте видимостью и порядком панелей. Скрытые панели не отображаются на панели инструментов.", "docks.resetOrder": "Сбросить пользовательский порядок", diff --git a/packages/hub-ui/src/client/i18n/locales/zh-CN.json b/packages/hub-ui/src/client/i18n/locales/zh-CN.json index e9ad918c..b1333621 100644 --- a/packages/hub-ui/src/client/i18n/locales/zh-CN.json +++ b/packages/hub-ui/src/client/i18n/locales/zh-CN.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "停靠栏中的最近工具", "appearance.recentDocksHint": "在停靠栏中保留最近从分组或溢出菜单打开的工具（仅浮动模式）。", "appearance.recentDocksOff": "关闭", + "appearance.expandSidebar": "展开分组侧边栏", + "appearance.expandSidebarHint": "在分组侧边栏中，于图标旁显示工具名称。", "docks.intro": "管理工具面板条目的可见性和顺序。隐藏的条目不会出现在工具栏中。", "docks.resetOrder": "重置自定义顺序", diff --git a/packages/hub-ui/src/client/i18n/locales/zh-TW.json b/packages/hub-ui/src/client/i18n/locales/zh-TW.json index 3e535262..3f3f2ec2 100644 --- a/packages/hub-ui/src/client/i18n/locales/zh-TW.json +++ b/packages/hub-ui/src/client/i18n/locales/zh-TW.json @@ -72,6 +72,8 @@ "appearance.recentDocks": "停靠列中的最近工具", "appearance.recentDocksHint": "在停靠列中保留最近從群組或溢出選單開啟的工具（僅限浮動模式）。", "appearance.recentDocksOff": "關閉", + "appearance.expandSidebar": "展開群組側邊欄", + "appearance.expandSidebarHint": "在群組側邊欄中，於圖示旁顯示工具名稱。", "docks.intro": "管理工具面板項目的可見性和順序。隱藏的項目不會出現在工具列中。", "docks.resetOrder": "重設自訂順序", diff --git a/packages/hub-ui/src/client/state/settings-defaults.ts b/packages/hub-ui/src/client/state/settings-defaults.ts index c405e2d6..e115b80d 100644 --- a/packages/hub-ui/src/client/state/settings-defaults.ts +++ b/packages/hub-ui/src/client/state/settings-defaults.ts @@ -9,7 +9,7 @@ import '../types' /** The subset of {@link DevframeDocksUserSettings} hub-ui itself contributes. */ export type HubUiSettings = Pick< DevframeDocksUserSettings, - 'showIframeAddressBar' | 'closeOnOutsideClick' | 'autoCollapseEdgeToolbar' | 'showDevframeInspector' | 'docksRecentLimit' + 'showIframeAddressBar' | 'closeOnOutsideClick' | 'autoCollapseEdgeToolbar' | 'showDevframeInspector' | 'docksRecentLimit' | 'expandGroupSidebar' > /** @@ -41,6 +41,8 @@ const HUB_UI_SETTINGS_DEFAULTS: Required = Object.freeze({ showDevframeInspector: false, /** The float bar keeps the last three docks opened from beyond it. */ docksRecentLimit: 3, + /** The group sidebar stays an icon-only rail. */ + expandGroupSidebar: false, }) /** diff --git a/packages/hub-ui/src/client/types.ts b/packages/hub-ui/src/client/types.ts index fdfecfc5..356dc3c2 100644 --- a/packages/hub-ui/src/client/types.ts +++ b/packages/hub-ui/src/client/types.ts @@ -38,6 +38,11 @@ declare module '@devframes/hub/types' { * off. */ docksRecentLimit?: number + /** + * Widen the group sidebar so each member shows its title next to its + * icon, instead of an icon-only rail with hover tooltips. + */ + expandGroupSidebar?: boolean } } From 3e913be442af07bbf654bc3215de21dacd74be2f Mon Sep 17 00:00:00 2001 From: "Anthony Fu (via agent)" Date: Mon, 2 Nov 2026 03:54:01 +0000 Subject: [PATCH 2/2] docs(hub-ui): add stories for the expanded group sidebar --- .../dock/DockGroupSidebar.stories.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts index d1bf13aa..e179a96a 100644 --- a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts +++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts @@ -73,3 +73,42 @@ export const Overflow: Story = { ), }), } + +/** + * `expandGroupSidebar` on: a wider rail that shows each member's title next + * to its icon, so tools are findable without hovering for tooltips. + */ +export const Expanded: Story = { + render: () => ({ + setup: () => mountWithContext( + { + entries: groupedEntries, + selectedId: 'nuxt:overview', + settings: { expandGroupSidebar: true }, + }, + ctx => stage(shell(h(DockGroupSidebar, { + context: ctx, + group: nuxtGroup, + selectedId: ctx.docks.selectedId, + }))), + ), + }), +} + +/** Expanded with overflow: the show-more row keeps its label and count. */ +export const ExpandedOverflow: Story = { + render: () => ({ + setup: () => mountWithContext( + { + entries: subcategorizedGroupEntries, + selectedId: 'tools:graph', + settings: { expandGroupSidebar: true }, + }, + ctx => stage(shell(h(DockGroupSidebar, { + context: ctx, + group: toolsGroup, + selectedId: ctx.docks.selectedId, + }), 'h-44')), + ), + }), +}