Add vertical tray layout toggle

[Arunsiva003]

Summary

• Add a HUD tray layout toggle that switches between horizontal and vertical controls.
• Persist the selected tray layout in user preferences.
• Add localized tooltip labels and preference coverage for the new setting.

Why

This gives users a vertical tray option for presentation, screen sharing, and different monitor layouts while keeping the existing horizontal tray as the default.

Tests

• npm test
• npm run lint
• npm run build-vite
• Browser visual check at http://127.0.0.1:5173/?windowType=hud-overlay: toggled to vertical layout and confirmed the preference persisted after reload.
• npm run i18n:check currently fails on an existing unrelated missing key: it/settings.json is missing zoom.previewHold.

Closes #571

Summary by CodeRabbit

• New Features

  • Added a tray layout toggle to switch between vertical and horizontal orientations; HUD and controls adapt (stacking/scrolling) to the selected layout.
  • Tray layout preference is persisted across sessions.

• Documentation

  • Added localized tooltip translations for the tray layout control in multiple languages.

• Tests

  • Added tests to verify tray layout persistence and fallback to the default when invalid.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bca247ca-de36-4698-8980-fc90fa2ae49d

📥 Commits

Reviewing files that changed from the base of the PR and between c293786 and 9fc047f.

📒 Files selected for processing (3)

• src/components/launch/LaunchWindow.tsx
• src/i18n/locales/zh-TW/launch.json
• src/lib/userPreferences.ts

✅ Files skipped from review due to trivial changes (1)

• src/i18n/locales/zh-TW/launch.json

---

📝 Walkthrough

Walkthrough

This PR adds a persisted trayLayout preference, a HUD toggle to switch horizontal/vertical layouts, conditional styling across HUD sections, and localized tooltip strings in 12 locales.

Changes

Vertical Tray Layout Toggle with Persistence

Layer / File(s)	Summary
Tray layout preference contract and persistence src/lib/userPreferences.ts, src/lib/userPreferences.test.ts	UserPreferences adds `trayLayout: "horizontal"
Tray layout toggle UI and conditional styling src/components/launch/LaunchWindow.tsx	Adds trayLayout state initialized from preferences, toggleTrayLayout() that flips and saves the value, data-tray-layout on the HUD, a Tooltip-wrapped toggle button (data-testid="launch-tray-layout-button") switching Columns3/Rows3 icons and ARIA/tooltip text, and conditional flex-col/stacking/scrolling styles for audio controls, record button, action icons, sidebar, and window controls when vertical.
Internationalization for tray layout tooltips src/i18n/locales/{ar,en,es,fr,it,ja-JP,ko-KR,ru,tr,vi,zh-CN,zh-TW}/launch.json	Adds useVerticalTray and useHorizontalTray tooltip keys to tooltips across all listed locales.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• siddharthvaddem/openscreen#362: overlaps HUD/recording controls layout changes that may intersect with this tray-layout styling.

Suggested reviewers

• siddharthvaddem

Poem

trays flipped, preferences kept, a toggle that’s not cursed,
vertical stacks now stand tall or stay wide as rehearsed,
twelve tongues whisper tooltips, localStorage nods yes,
click once, layout persists — lowkey neat, no stress. 🎛️✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title directly describes the main change: adding a vertical tray layout toggle with clear, specific phrasing.
Description check	✅ Passed	Description covers summary, motivation, tests, and issue closure, though it omits the formal template structure (Type of Change checkboxes, Related Issue link, Screenshots section headers).
Linked Issues check	✅ Passed	PR fulfills #571 requirements: toggle switch between horizontal/vertical [LaunchWindow.tsx], vertical layout stacks controls [LaunchWindow.tsx], persists preference [userPreferences.ts], adapted spacing/alignment for vertical [LaunchWindow.tsx], localized strings added [all i18n files].
Out of Scope Changes check	✅ Passed	All changes directly support tray layout toggle: UI component updates, preference persistence, i18n strings, and test coverage. No unrelated refactoring or scope creep detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/i18n/locales/zh-TW/launch.json (1)

11-12: ⚡ Quick win

terminology drift across locales – might wanna unify

so i noticed the translations use different concepts for "tray" across languages:

• ja-JP, ko-KR, vi, zh-CN: "tray" (トレイ, 트레이, khay, 托盘)
• ru: "panel" (панель)
• tr, zh-TW: "toolbar" (araç çubuğunu, 工具列)

lowkey inconsistent, especially zh-CN (托盘 = tray) vs zh-TW (工具列 = toolbar) since those should typically align for UI elements. could be intentional localization choices but worth verifying with native speakers that these all convey the same UI concept.

not blocking since translations are functional, just might confuse multilingual users or make docs harder to maintain.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/i18n/locales/zh-TW/launch.json` around lines 11 - 12, The locale strings
for useVerticalTray and useHorizontalTray use inconsistent terminology across
locales (e.g., zh-TW uses "工具列" while zh-CN uses "托盘"); update the translations
for the keys useVerticalTray and useHorizontalTray to use a consistent term
across all locales (pick the correct UI term—"tray" vs "toolbar"), verify the
chosen term with native speakers for each language (especially zh-TW vs zh-CN),
and then replace the differing strings in the affected locale files so all
locales convey the same UI concept for these keys.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/i18n/locales/zh-TW/launch.json`:
- Around line 11-12: The locale strings for useVerticalTray and
useHorizontalTray use inconsistent terminology across locales (e.g., zh-TW uses
"工具列" while zh-CN uses "托盘"); update the translations for the keys
useVerticalTray and useHorizontalTray to use a consistent term across all
locales (pick the correct UI term—"tray" vs "toolbar"), verify the chosen term
with native speakers for each language (especially zh-TW vs zh-CN), and then
replace the differing strings in the affected locale files so all locales convey
the same UI concept for these keys.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8244e14d-2556-4601-aaf5-4406b07454f0

📥 Commits

Reviewing files that changed from the base of the PR and between 34340c2 and c293786.

📒 Files selected for processing (15)

• src/components/launch/LaunchWindow.tsx
• src/i18n/locales/ar/launch.json
• src/i18n/locales/en/launch.json
• src/i18n/locales/es/launch.json
• src/i18n/locales/fr/launch.json
• src/i18n/locales/it/launch.json
• src/i18n/locales/ja-JP/launch.json
• src/i18n/locales/ko-KR/launch.json
• src/i18n/locales/ru/launch.json
• src/i18n/locales/tr/launch.json
• src/i18n/locales/vi/launch.json
• src/i18n/locales/zh-CN/launch.json
• src/i18n/locales/zh-TW/launch.json
• src/lib/userPreferences.test.ts
• src/lib/userPreferences.ts