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

@@ -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<void> {
   await page.getByTestId("sidebar-help").click();

packages/app/src/components/sidebar/sidebar-help-menu.tsx

@@ -68,9 +68,10 @@ function HostVersionHint({ host }: { host: HostProfile }) {
   return (
     <DropdownMenuHint
       style={styles.versionHint}
+      trailing={version}
       testID={`sidebar-help-host-version-${host.serverId}`}
     >
-      {host.label} {version}
+      {host.label}
     </DropdownMenuHint>
   );
 }
@@ -167,8 +168,12 @@ export function SidebarHelpMenu() {
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <View style={styles.versionList}>
-          <DropdownMenuHint style={styles.versionHint} testID="sidebar-help-version">
-            {t("sidebar.help.version", { version })}
+          <DropdownMenuHint
+            style={styles.versionHint}
+            trailing={version}
+            testID="sidebar-help-version"
+          >
+            {t("sidebar.help.appName")}
           </DropdownMenuHint>
           {hosts.map((host) => (
             <HostVersionHint key={host.serverId} host={host} />

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 (
     <View style={hintContainerStyle} testID={testID}>
-      <Text style={styles.hintText}>{children}</Text>
+      <Text style={styles.hintText} numberOfLines={1}>
+        {children}
+      </Text>
+      {trailing === undefined ? null : (
+        <Text style={styles.hintText} numberOfLines={1}>
+          {trailing}
+        </Text>
+      )}
     </View>
   );
 }
@@ -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,

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: "السجل",

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",

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",

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",

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: "履歴",

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: "기록",

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",

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: "История",

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: "历史",