Skip to content

Commit b2d3041

Browse files
pascalandrpascalandr
committed
fix(ui): polish right panel customization
Tighten the right panel customization UI after review by adding contextual move labels for assistive tech, making the drawer layout fit the narrow 200px panel, and removing newly introduced rounded styling. Complete the customization translation keys for German and Nepali and add the contextual move labels to all supported locales. Restore the default Status section order so Yolo mode remains before provider usage while keeping user reordering intact. Validated with the focused registry test, UI typecheck, diff whitespace check, UI build, and a final gatekeeper pass.
1 parent b660c82 commit b2d3041

13 files changed

Lines changed: 115 additions & 29 deletions

File tree

‎packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -931,7 +931,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
931931
</div>
932932
<button
933933
type="button"
934-
class="button-tertiary px-2 py-1 text-xs"
934+
class="right-panel-customization-button"
935935
onClick={() => updateRightPanelCustomization(() => parseRightPanelCustomization(null))}
936936
>
937937
{props.t("instanceShell.rightPanel.customize.reset")}
@@ -943,6 +943,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
943943
<div class="right-panel-customization-group-title">{props.t("instanceShell.rightPanel.customize.tabs")}</div>
944944
<For each={orderedRightPanelTabs()}>
945945
{(tab) => {
946+
const label = () => props.t(tab.labelKey)
946947
const visible = () => !rightPanelCustomization().hiddenTabIds.includes(tab.id)
947948
const disableHide = () => visible() && visibleRightPanelTabs().length <= 1
948949
return (
@@ -959,12 +960,14 @@ const RightPanel: Component<RightPanelProps> = (props) => {
959960
}))
960961
}
961962
/>
962-
<span>{props.t(tab.labelKey)}</span>
963+
<span>{label()}</span>
963964
</label>
964965
<div class="right-panel-customization-actions">
965966
<button
966967
type="button"
967-
class="button-tertiary px-2 py-1 text-xs"
968+
class="right-panel-customization-button"
969+
aria-label={props.t("instanceShell.rightPanel.customize.moveTabUp", { label: label() })}
970+
title={props.t("instanceShell.rightPanel.customize.moveTabUp", { label: label() })}
968971
onClick={() =>
969972
updateRightPanelCustomization((current) => ({
970973
...current,
@@ -976,7 +979,9 @@ const RightPanel: Component<RightPanelProps> = (props) => {
976979
</button>
977980
<button
978981
type="button"
979-
class="button-tertiary px-2 py-1 text-xs"
982+
class="right-panel-customization-button"
983+
aria-label={props.t("instanceShell.rightPanel.customize.moveTabDown", { label: label() })}
984+
title={props.t("instanceShell.rightPanel.customize.moveTabDown", { label: label() })}
980985
onClick={() =>
981986
updateRightPanelCustomization((current) => ({
982987
...current,
@@ -997,6 +1002,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
9971002
<div class="right-panel-customization-group-title">{props.t("instanceShell.rightPanel.customize.statusSections")}</div>
9981003
<For each={orderedStatusSections()}>
9991004
{(section) => {
1005+
const label = () => props.t(section.labelKey)
10001006
const visible = () => !rightPanelCustomization().hiddenStatusSectionIds.includes(section.id)
10011007
const disableHide = () => visible() && visibleStatusSections().length <= 1
10021008
return (
@@ -1017,12 +1023,14 @@ const RightPanel: Component<RightPanelProps> = (props) => {
10171023
}))
10181024
}
10191025
/>
1020-
<span>{props.t(section.labelKey)}</span>
1026+
<span>{label()}</span>
10211027
</label>
10221028
<div class="right-panel-customization-actions">
10231029
<button
10241030
type="button"
1025-
class="button-tertiary px-2 py-1 text-xs"
1031+
class="right-panel-customization-button"
1032+
aria-label={props.t("instanceShell.rightPanel.customize.moveStatusSectionUp", { label: label() })}
1033+
title={props.t("instanceShell.rightPanel.customize.moveStatusSectionUp", { label: label() })}
10261034
onClick={() =>
10271035
updateRightPanelCustomization((current) => ({
10281036
...current,
@@ -1039,7 +1047,9 @@ const RightPanel: Component<RightPanelProps> = (props) => {
10391047
</button>
10401048
<button
10411049
type="button"
1042-
class="button-tertiary px-2 py-1 text-xs"
1050+
class="right-panel-customization-button"
1051+
aria-label={props.t("instanceShell.rightPanel.customize.moveStatusSectionDown", { label: label() })}
1052+
title={props.t("instanceShell.rightPanel.customize.moveStatusSectionDown", { label: label() })}
10431053
onClick={() =>
10441054
updateRightPanelCustomization((current) => ({
10451055
...current,

‎packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -188,20 +188,20 @@ const StatusTab: Component<StatusTabProps> = (props) => {
188188

189189
const statusSections = createMemo<RightPanelSectionModule[]>(() => {
190190
const sections: RightPanelSectionModule[] = [
191-
{
192-
id: "provider-usage",
193-
labelKey: "providerUsage.title",
194-
tooltipKey: "providerUsage.tooltip",
195-
order: 10,
196-
render: renderProviderUsage,
197-
},
198191
{
199192
id: "yolo-mode",
200193
labelKey: "instanceShell.rightPanel.sections.yoloMode",
201194
tooltipKey: "instanceShell.rightPanel.sections.yoloMode.tooltip",
202-
order: 20,
195+
order: 10,
203196
render: renderYoloModeSection,
204197
},
198+
{
199+
id: "provider-usage",
200+
labelKey: "providerUsage.title",
201+
tooltipKey: "providerUsage.tooltip",
202+
order: 20,
203+
render: renderProviderUsage,
204+
},
205205
{
206206
id: "plan",
207207
labelKey: "instanceShell.rightPanel.sections.plan",

‎packages/ui/src/components/instance/shell/right-panel/tabs/status-sections.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import type { RightPanelItem } from "../registry"
22

33
export const CORE_STATUS_SECTION_ITEMS: readonly (RightPanelItem & { tooltipKey: string; defaultExpanded?: boolean })[] = [
4-
{
5-
id: "provider-usage",
6-
labelKey: "providerUsage.title",
7-
tooltipKey: "providerUsage.tooltip",
8-
order: 10,
9-
},
104
{
115
id: "yolo-mode",
126
labelKey: "instanceShell.rightPanel.sections.yoloMode",
137
tooltipKey: "instanceShell.rightPanel.sections.yoloMode.tooltip",
8+
order: 10,
9+
},
10+
{
11+
id: "provider-usage",
12+
labelKey: "providerUsage.title",
13+
tooltipKey: "providerUsage.tooltip",
1414
order: 20,
1515
},
1616
{

‎packages/ui/src/lib/i18n/messages/de/instance.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,18 @@ export const instanceMessages = {
9393
"instanceShell.rightPanel.tabs.files": "Dateien",
9494
"instanceShell.rightPanel.tabs.status": "Status",
9595
"instanceShell.rightPanel.tabs.ariaLabel": "Tabs im rechten Panel",
96+
"instanceShell.rightPanel.customize.toggle": "Rechtes Panel anpassen",
97+
"instanceShell.rightPanel.customize.title": "Rechtes Panel anpassen",
98+
"instanceShell.rightPanel.customize.description": "Tabs und Statusabschnitte anzeigen, ausblenden und neu anordnen.",
99+
"instanceShell.rightPanel.customize.reset": "Zurücksetzen",
100+
"instanceShell.rightPanel.customize.tabs": "Tabs",
101+
"instanceShell.rightPanel.customize.statusSections": "Statusabschnitte",
102+
"instanceShell.rightPanel.customize.moveUp": "Nach oben",
103+
"instanceShell.rightPanel.customize.moveDown": "Nach unten",
104+
"instanceShell.rightPanel.customize.moveTabUp": "Tab {label} nach oben verschieben",
105+
"instanceShell.rightPanel.customize.moveTabDown": "Tab {label} nach unten verschieben",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "Statusabschnitt {label} nach oben verschieben",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "Statusabschnitt {label} nach unten verschieben",
96108
"instanceShell.rightPanel.actions.refresh": "Aktualisieren",
97109
"instanceShell.rightPanel.actions.save": "Speichern (Ctrl+S)",
98110
"instanceShell.rightPanel.actions.saveConfirm.message": "Möchten Sie die Änderungen an \"{path}\" speichern, bevor Sie wechseln?",

‎packages/ui/src/lib/i18n/messages/en/instance.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const instanceMessages = {
101101
"instanceShell.rightPanel.customize.statusSections": "Status sections",
102102
"instanceShell.rightPanel.customize.moveUp": "Up",
103103
"instanceShell.rightPanel.customize.moveDown": "Down",
104+
"instanceShell.rightPanel.customize.moveTabUp": "Move {label} tab up",
105+
"instanceShell.rightPanel.customize.moveTabDown": "Move {label} tab down",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "Move {label} status section up",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "Move {label} status section down",
104108
"instanceShell.rightPanel.actions.refresh": "Refresh",
105109
"instanceShell.rightPanel.actions.save": "Save (Ctrl+S)",
106110
"instanceShell.rightPanel.actions.saveConfirm.message": "Do you want to save changes to \"{path}\" before switching?",

‎packages/ui/src/lib/i18n/messages/es/instance.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const instanceMessages = {
101101
"instanceShell.rightPanel.customize.statusSections": "Secciones de estado",
102102
"instanceShell.rightPanel.customize.moveUp": "Subir",
103103
"instanceShell.rightPanel.customize.moveDown": "Bajar",
104+
"instanceShell.rightPanel.customize.moveTabUp": "Subir pestaña {label}",
105+
"instanceShell.rightPanel.customize.moveTabDown": "Bajar pestaña {label}",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "Subir sección de estado {label}",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "Bajar sección de estado {label}",
104108
"instanceShell.rightPanel.actions.refresh": "Actualizar",
105109
"instanceShell.rightPanel.actions.save": "Guardar (Ctrl+S)",
106110
"instanceShell.rightPanel.actions.saveConfirm.message": "¿Deseas guardar los cambios en \"{path}\" antes de cambiar?",

‎packages/ui/src/lib/i18n/messages/fr/instance.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const instanceMessages = {
101101
"instanceShell.rightPanel.customize.statusSections": "Sections de statut",
102102
"instanceShell.rightPanel.customize.moveUp": "Monter",
103103
"instanceShell.rightPanel.customize.moveDown": "Descendre",
104+
"instanceShell.rightPanel.customize.moveTabUp": "Monter l'onglet {label}",
105+
"instanceShell.rightPanel.customize.moveTabDown": "Descendre l'onglet {label}",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "Monter la section de statut {label}",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "Descendre la section de statut {label}",
104108
"instanceShell.rightPanel.actions.refresh": "Actualiser",
105109
"instanceShell.rightPanel.actions.save": "Enregistrer (Ctrl+S)",
106110
"instanceShell.rightPanel.actions.saveConfirm.message": "Voulez-vous enregistrer les modifications de \"{path}\" avant de changer ?",

‎packages/ui/src/lib/i18n/messages/he/instance.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const instanceMessages = {
101101
"instanceShell.rightPanel.customize.statusSections": "מקטעי סטטוס",
102102
"instanceShell.rightPanel.customize.moveUp": "למעלה",
103103
"instanceShell.rightPanel.customize.moveDown": "למטה",
104+
"instanceShell.rightPanel.customize.moveTabUp": "העברת הכרטיסייה {label} למעלה",
105+
"instanceShell.rightPanel.customize.moveTabDown": "העברת הכרטיסייה {label} למטה",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "העברת מקטע הסטטוס {label} למעלה",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "העברת מקטע הסטטוס {label} למטה",
104108
"instanceShell.rightPanel.actions.refresh": "רענן",
105109
"instanceShell.rightPanel.actions.save": "שמור (Ctrl+S)",
106110
"instanceShell.rightPanel.actions.saveConfirm.message": "האם ברצונך לשמור את השינויים ב-\"{path}\" לפני המעבר?",

‎packages/ui/src/lib/i18n/messages/ja/instance.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const instanceMessages = {
101101
"instanceShell.rightPanel.customize.statusSections": "ステータスセクション",
102102
"instanceShell.rightPanel.customize.moveUp": "上へ",
103103
"instanceShell.rightPanel.customize.moveDown": "下へ",
104+
"instanceShell.rightPanel.customize.moveTabUp": "{label} タブを上へ移動",
105+
"instanceShell.rightPanel.customize.moveTabDown": "{label} タブを下へ移動",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "{label} ステータスセクションを上へ移動",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "{label} ステータスセクションを下へ移動",
104108
"instanceShell.rightPanel.actions.refresh": "更新",
105109
"instanceShell.rightPanel.actions.save": "保存 (Ctrl+S)",
106110
"instanceShell.rightPanel.actions.saveConfirm.message": "「{path}」への変更を切り替え前に保存しますか？",

‎packages/ui/src/lib/i18n/messages/ne/instance.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,18 @@ export const instanceMessages = {
9393
"instanceShell.rightPanel.tabs.files": "फाइलहरू",
9494
"instanceShell.rightPanel.tabs.status": "स्थिति",
9595
"instanceShell.rightPanel.tabs.ariaLabel": "दायाँ प्यानल ट्याबहरू",
96+
"instanceShell.rightPanel.customize.toggle": "दायाँ प्यानल अनुकूलन गर्नुहोस्",
97+
"instanceShell.rightPanel.customize.title": "दायाँ प्यानल अनुकूलन गर्नुहोस्",
98+
"instanceShell.rightPanel.customize.description": "ट्याबहरू र स्थिति खण्डहरू देखाउनुहोस्, लुकाउनुहोस् र पुनःक्रमबद्ध गर्नुहोस्।",
99+
"instanceShell.rightPanel.customize.reset": "रिसेट गर्नुहोस्",
100+
"instanceShell.rightPanel.customize.tabs": "ट्याबहरू",
101+
"instanceShell.rightPanel.customize.statusSections": "स्थिति खण्डहरू",
102+
"instanceShell.rightPanel.customize.moveUp": "माथि",
103+
"instanceShell.rightPanel.customize.moveDown": "तल",
104+
"instanceShell.rightPanel.customize.moveTabUp": "{label} ट्याब माथि सार्नुहोस्",
105+
"instanceShell.rightPanel.customize.moveTabDown": "{label} ट्याब तल सार्नुहोस्",
106+
"instanceShell.rightPanel.customize.moveStatusSectionUp": "{label} स्थिति खण्ड माथि सार्नुहोस्",
107+
"instanceShell.rightPanel.customize.moveStatusSectionDown": "{label} स्थिति खण्ड तल सार्नुहोस्",
96108
"instanceShell.rightPanel.actions.refresh": "रिफ्रेस",
97109
"instanceShell.rightPanel.actions.save": "बचत (Ctrl+S)",
98110
"instanceShell.rightPanel.actions.saveConfirm.message": "परिवर्तन गर्नु अघि \"{path}\" मा गरिएका परिवर्तनहरू बचत गर्न चाहनुहुन्छ?",

0 commit comments

Comments
 (0)