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 5e3ccf74c9..2c9359271e 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 538b61749f..9d7acbaf99 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 562d2fdfa3..c1072db725 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 c0732e5ba3..f65391b2b1 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 31857bb631..1b0fad67a5 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 aa03f762d3..1d408c45ff 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 b9e96aa87d..0270275274 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 9478fb7be8..aa024e30c5 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 23988147a0..e1c98ce4f7 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 5234f475c2..5ddd452e54 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 d8c7a486f5..af30f3a94a 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 f51b61a342..a54eeba588 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: "历史",