From 5e197ad0cf314df519b63ba841aa93346fb88a00 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Fri, 7 Aug 2026 20:28:27 +0200 Subject: [PATCH] style(app): align help menu versions on a right rail The app and host version lines ran as one sentence, so the versions ragged with the length of each name and were hard to compare. Menu hints now take an optional trailing cell and lay out as key/value across the row. Renaming the string to a plain name drops its interpolation, so every locale carries the same untranslated product name it already had. MenuHint renders in one place today (this menu), so the row layout in the shared component changes nothing else. --- packages/app/e2e/browser/sidebar-help.spec.ts | 4 +++- .../components/sidebar/sidebar-help-menu.tsx | 11 ++++++--- .../app/src/components/ui/menu/menu-item.tsx | 23 +++++++++++++++++-- packages/app/src/i18n/resources/ar.ts | 2 +- packages/app/src/i18n/resources/en.ts | 2 +- packages/app/src/i18n/resources/es.ts | 2 +- packages/app/src/i18n/resources/fr.ts | 2 +- packages/app/src/i18n/resources/ja.ts | 2 +- packages/app/src/i18n/resources/ko.ts | 2 +- packages/app/src/i18n/resources/pt-BR.ts | 2 +- packages/app/src/i18n/resources/ru.ts | 2 +- packages/app/src/i18n/resources/zh-CN.ts | 2 +- 12 files changed, 41 insertions(+), 15 deletions(-) diff --git a/packages/app/e2e/browser/sidebar-help.spec.ts b/packages/app/e2e/browser/sidebar-help.spec.ts index 5e3ccf74c..2c9359271 100644 --- a/packages/app/e2e/browser/sidebar-help.spec.ts +++ b/packages/app/e2e/browser/sidebar-help.spec.ts @@ -7,7 +7,9 @@ const DISCORD_DESTINATION = const GITHUB_ISSUE_DESTINATION = /^https:\/\/github\.com\/(?:getpaseo\/paseo\/issues\/new(?:\/choose)?(?:[/?#]|$)|login\?return_to=https%3A%2F%2Fgithub\.com%2Fgetpaseo%2Fpaseo%2Fissues%2Fnew$)/; const CHANGELOG_DESTINATION = /^https:\/\/paseo\.sh\/changelog(?:[/?#]|$)/; -const APP_VERSION = /^Paseo v\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/; +// The name and the version are separate cells of a key/value row, so they meet with no space +// between them in the row's text content. +const APP_VERSION = /^Paseo\s*v\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/; async function openHelpMenu(page: Page): Promise { await page.getByTestId("sidebar-help").click(); diff --git a/packages/app/src/components/sidebar/sidebar-help-menu.tsx b/packages/app/src/components/sidebar/sidebar-help-menu.tsx index 538b61749..9d7acbaf9 100644 --- a/packages/app/src/components/sidebar/sidebar-help-menu.tsx +++ b/packages/app/src/components/sidebar/sidebar-help-menu.tsx @@ -68,9 +68,10 @@ function HostVersionHint({ host }: { host: HostProfile }) { return ( - {host.label} {version} + {host.label} ); } @@ -167,8 +168,12 @@ export function SidebarHelpMenu() { - - {t("sidebar.help.version", { version })} + + {t("sidebar.help.appName")} {hosts.map((host) => ( diff --git a/packages/app/src/components/ui/menu/menu-item.tsx b/packages/app/src/components/ui/menu/menu-item.tsx index 562d2fdfa..c1072db72 100644 --- a/packages/app/src/components/ui/menu/menu-item.tsx +++ b/packages/app/src/components/ui/menu/menu-item.tsx @@ -103,13 +103,25 @@ export function MenuSeparator({ export function MenuHint({ children, + trailing, style, testID, -}: PropsWithChildren<{ style?: ViewStyle | ViewStyle[]; testID?: string }>): ReactElement { +}: PropsWithChildren<{ + trailing?: ReactNode; + style?: ViewStyle | ViewStyle[]; + testID?: string; +}>): ReactElement { const hintContainerStyle = useMemo(() => [styles.hintContainer, style], [style]); return ( - {children} + + {children} + + {trailing === undefined ? null : ( + + {trailing} + + )} ); } @@ -310,13 +322,20 @@ const styles = StyleSheet.create((theme) => ({ marginVertical: theme.spacing[1], backgroundColor: theme.colors.borderAccent, }, + // A hint with `trailing` is a key on the left edge and its value on the right, so the values + // line up down the menu's right rail instead of ragging with the length of each key. hintContainer: { paddingHorizontal: theme.spacing[3], paddingVertical: theme.spacing[2], + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + gap: theme.spacing[2], }, hintText: { fontSize: theme.fontSize.xs, color: theme.colors.foregroundMuted, + flexShrink: 1, }, tooltipText: { fontSize: theme.fontSize.sm, diff --git a/packages/app/src/i18n/resources/ar.ts b/packages/app/src/i18n/resources/ar.ts index c0732e5ba..f65391b2b 100644 --- a/packages/app/src/i18n/resources/ar.ts +++ b/packages/app/src/i18n/resources/ar.ts @@ -949,7 +949,7 @@ export const ar: TranslationResources = { discord: "Discord", github: "إنشاء مشكلة على GitHub", whatsNew: "ما الجديد", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "السجل", diff --git a/packages/app/src/i18n/resources/en.ts b/packages/app/src/i18n/resources/en.ts index 31857bb63..1b0fad67a 100644 --- a/packages/app/src/i18n/resources/en.ts +++ b/packages/app/src/i18n/resources/en.ts @@ -959,7 +959,7 @@ export const en = { discord: "Discord", github: "Create GitHub issue", whatsNew: "What's new", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "History", diff --git a/packages/app/src/i18n/resources/es.ts b/packages/app/src/i18n/resources/es.ts index aa03f762d..1d408c45f 100644 --- a/packages/app/src/i18n/resources/es.ts +++ b/packages/app/src/i18n/resources/es.ts @@ -980,7 +980,7 @@ export const es: TranslationResources = { discord: "Discord", github: "Crear incidencia en GitHub", whatsNew: "Novedades", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "Historial", diff --git a/packages/app/src/i18n/resources/fr.ts b/packages/app/src/i18n/resources/fr.ts index b9e96aa87..027027527 100644 --- a/packages/app/src/i18n/resources/fr.ts +++ b/packages/app/src/i18n/resources/fr.ts @@ -979,7 +979,7 @@ export const fr: TranslationResources = { discord: "Discord", github: "Créer un ticket GitHub", whatsNew: "Nouveautés", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "Historique", diff --git a/packages/app/src/i18n/resources/ja.ts b/packages/app/src/i18n/resources/ja.ts index 9478fb7be..aa024e30c 100644 --- a/packages/app/src/i18n/resources/ja.ts +++ b/packages/app/src/i18n/resources/ja.ts @@ -960,7 +960,7 @@ export const ja: TranslationResources = { discord: "Discord", github: "GitHub Issueを作成", whatsNew: "新着情報", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "履歴", diff --git a/packages/app/src/i18n/resources/ko.ts b/packages/app/src/i18n/resources/ko.ts index 23988147a..e1c98ce4f 100644 --- a/packages/app/src/i18n/resources/ko.ts +++ b/packages/app/src/i18n/resources/ko.ts @@ -956,7 +956,7 @@ export const ko: TranslationResources = { discord: "Discord", github: "GitHub 이슈 만들기", whatsNew: "새로운 소식", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "기록", diff --git a/packages/app/src/i18n/resources/pt-BR.ts b/packages/app/src/i18n/resources/pt-BR.ts index 5234f475c..5ddd452e5 100644 --- a/packages/app/src/i18n/resources/pt-BR.ts +++ b/packages/app/src/i18n/resources/pt-BR.ts @@ -971,7 +971,7 @@ export const ptBR: TranslationResources = { discord: "Discord", github: "Criar issue no GitHub", whatsNew: "Novidades", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "Histórico", diff --git a/packages/app/src/i18n/resources/ru.ts b/packages/app/src/i18n/resources/ru.ts index d8c7a486f..af30f3a94 100644 --- a/packages/app/src/i18n/resources/ru.ts +++ b/packages/app/src/i18n/resources/ru.ts @@ -971,7 +971,7 @@ export const ru: TranslationResources = { discord: "Discord", github: "Создать issue в GitHub", whatsNew: "Что нового", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "История", diff --git a/packages/app/src/i18n/resources/zh-CN.ts b/packages/app/src/i18n/resources/zh-CN.ts index f51b61a34..a54eeba58 100644 --- a/packages/app/src/i18n/resources/zh-CN.ts +++ b/packages/app/src/i18n/resources/zh-CN.ts @@ -941,7 +941,7 @@ export const zhCN: TranslationResources = { discord: "Discord", github: "创建 GitHub Issue", whatsNew: "新功能", - version: "Paseo {{version}}", + appName: "Paseo", }, sections: { sessions: "历史",