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')), + ), + }), +} 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 } }