From c293786e9de6eb0ba3ae9f09e0be594d4c239fdf Mon Sep 17 00:00:00 2001
From: "arunkumar.a" <arunkumar.a@juspay.in>
Date: Sat, 23 May 2026 23:29:29 +0530
Subject: [PATCH 1/2] Add vertical tray layout toggle

---
 src/components/launch/LaunchWindow.tsx | 65 +++++++++++++++++++++++---
 src/i18n/locales/ar/launch.json        |  4 +-
 src/i18n/locales/en/launch.json        |  4 +-
 src/i18n/locales/es/launch.json        |  4 +-
 src/i18n/locales/fr/launch.json        |  4 +-
 src/i18n/locales/it/launch.json        |  4 +-
 src/i18n/locales/ja-JP/launch.json     |  4 +-
 src/i18n/locales/ko-KR/launch.json     |  4 +-
 src/i18n/locales/ru/launch.json        |  4 +-
 src/i18n/locales/tr/launch.json        |  4 +-
 src/i18n/locales/vi/launch.json        |  4 +-
 src/i18n/locales/zh-CN/launch.json     |  4 +-
 src/i18n/locales/zh-TW/launch.json     |  4 +-
 src/lib/userPreferences.test.ts        | 22 ++++++++-
 src/lib/userPreferences.ts             |  7 +++
 15 files changed, 121 insertions(+), 21 deletions(-)

diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 570ec2809..5b3b4af7f 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -1,4 +1,4 @@
-import { Check, ChevronDown, Languages } from "lucide-react";
+import { Check, ChevronDown, Columns3, Languages, Rows3 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BsPauseCircle, BsPlayCircle, BsRecordCircle } from "react-icons/bs";
@@ -27,6 +27,7 @@ import { useCameraDevices } from "../../hooks/useCameraDevices";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
 import { useScreenRecorder } from "../../hooks/useScreenRecorder";
 import { requestCameraAccess } from "../../lib/requestCameraAccess";
+import { loadUserPreferences, saveUserPreferences } from "../../lib/userPreferences";
 import { formatTimePadded } from "../../utils/timeUtils";
 import { AudioLevelMeter } from "../ui/audio-level-meter";
 import { Button } from "../ui/button";
@@ -77,6 +78,8 @@ const windowBtnClasses =
 	"flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150 cursor-pointer opacity-50 hover:opacity-90 hover:bg-white/[0.08]";
 
 const hudSidebarClasses = "ml-0.5 pl-1.5 border-l border-white/10 flex items-center gap-0.5";
+const hudSidebarVerticalClasses =
+	"mt-0.5 pt-1.5 border-t border-white/10 flex flex-col items-center gap-0.5";
 
 export function LaunchWindow() {
 	const t = useScopedT("launch");
@@ -128,6 +131,9 @@ export function LaunchWindow() {
 	const [isWebcamFocused, setIsWebcamFocused] = useState(false);
 	const webcamExpanded = isWebcamHovered || isWebcamFocused;
 	const [isLanguageMenuOpen, setIsLanguageMenuOpen] = useState(false);
+	const [trayLayout, setTrayLayout] = useState<"horizontal" | "vertical">(
+		() => loadUserPreferences().trayLayout,
+	);
 	const [supportsCursorModeToggle, setSupportsCursorModeToggle] = useState(false);
 	const languageTriggerRef = useRef<HTMLButtonElement | null>(null);
 	const languageMenuPanelRef = useRef<HTMLDivElement | null>(null);
@@ -365,6 +371,11 @@ export function LaunchWindow() {
 			window.electronAPI.hudOverlayClose();
 		}
 	};
+	const toggleTrayLayout = () => {
+		const nextLayout = trayLayout === "horizontal" ? "vertical" : "horizontal";
+		setTrayLayout(nextLayout);
+		saveUserPreferences({ trayLayout: nextLayout });
+	};
 
 	const toggleMicrophone = () => {
 		if (!recording) {
@@ -589,7 +600,12 @@ export function LaunchWindow() {
 			{/* HUD bar — fixed at bottom center, viewport-relative, never moves */}
 			<div
 				data-hud-interactive="true"
-				className={`fixed bottom-5 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-2xl border border-white/[0.10] bg-[#07080a]/90 px-2 py-1.5 shadow-[0_20px_60px_rgba(0,0,0,0.42),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-2xl backdrop-saturate-[140%]`}
+				data-tray-layout={trayLayout}
+				className={`fixed bottom-5 left-1/2 -translate-x-1/2 flex rounded-2xl border border-white/[0.10] bg-[#07080a]/90 shadow-[0_20px_60px_rgba(0,0,0,0.42),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-2xl backdrop-saturate-[140%] ${
+					trayLayout === "vertical"
+						? "max-h-[calc(100vh-2.5rem)] flex-col items-center gap-1.5 overflow-y-auto px-1.5 py-2"
+						: "items-center gap-1.5 px-2 py-1.5"
+				}`}
 				onPointerEnter={() => setHudMouseEventsEnabled(true)}
 				onPointerDown={() => setHudMouseEventsEnabled(true)}
 				onMouseEnter={() => setHudMouseEventsEnabled(true)}
@@ -610,6 +626,33 @@ export function LaunchWindow() {
 					{getIcon("drag", "text-white/30")}
 				</div>
 
+				<Tooltip
+					content={
+						trayLayout === "horizontal"
+							? t("tooltips.useVerticalTray")
+							: t("tooltips.useHorizontalTray")
+					}
+				>
+					<button
+						data-testid="launch-tray-layout-button"
+						type="button"
+						aria-label={
+							trayLayout === "horizontal"
+								? t("tooltips.useVerticalTray")
+								: t("tooltips.useHorizontalTray")
+						}
+						aria-pressed={trayLayout === "vertical"}
+						className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+						onClick={toggleTrayLayout}
+					>
+						{trayLayout === "horizontal" ? (
+							<Columns3 size={ICON_SIZE} className="text-white/60" />
+						) : (
+							<Rows3 size={ICON_SIZE} className="text-white/60" />
+						)}
+					</button>
+				</Tooltip>
+
 				{/* Source selector */}
 				<button
 					className={`${hudGroupClasses} h-8 px-2.5 ${styles.electronNoDrag}`}
@@ -624,7 +667,9 @@ export function LaunchWindow() {
 				</button>
 
 				{/* Audio controls group */}
-				<div className={`${hudGroupClasses} ${styles.electronNoDrag}`}>
+				<div
+					className={`${hudGroupClasses} ${trayLayout === "vertical" ? "flex-col py-1" : ""} ${styles.electronNoDrag}`}
+				>
 					<button
 						data-testid="launch-system-audio-button"
 						className={`${hudIconBtnClasses} ${systemAudioEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
@@ -697,7 +742,7 @@ export function LaunchWindow() {
 				{/* Record/Stop group */}
 				<button
 					data-testid="launch-record-button"
-					className={`flex items-center justify-center rounded-full p-2 transition-[min-width,background-color] duration-150 ${recording ? "min-w-[78px]" : "min-w-[36px]"} ${styles.electronNoDrag} ${
+					className={`flex items-center justify-center rounded-full p-2 transition-[min-width,background-color] duration-150 ${recording ? "min-w-[78px]" : "min-w-[36px]"} ${trayLayout === "vertical" ? "min-h-9" : ""} ${styles.electronNoDrag} ${
 						recording
 							? paused
 								? "bg-amber-500/10 hover:bg-amber-500/15"
@@ -723,7 +768,9 @@ export function LaunchWindow() {
 				</button>
 
 				{recording && (
-					<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
+					<div
+						className={`flex items-center gap-0.5 ${trayLayout === "vertical" ? "flex-col" : ""} ${styles.electronNoDrag}`}
+					>
 						{canPauseRecording && (
 							<Tooltip
 								content={paused ? t("tooltips.resumeRecording") : t("tooltips.pauseRecording")}
@@ -776,7 +823,9 @@ export function LaunchWindow() {
 				)}
 
 				{/* Right sidebar controls */}
-				<div className={`${hudSidebarClasses} ${styles.electronNoDrag}`}>
+				<div
+					className={`${trayLayout === "vertical" ? hudSidebarVerticalClasses : hudSidebarClasses} ${styles.electronNoDrag}`}
+				>
 					<div className={`${styles.languageMenuContainer} ${styles.electronNoDrag}`}>
 						<button
 							ref={languageTriggerRef}
@@ -841,7 +890,9 @@ export function LaunchWindow() {
 						: null}
 
 					{/* Window controls */}
-					<div className="flex items-center gap-0.5">
+					<div
+						className={`flex items-center gap-0.5 ${trayLayout === "vertical" ? "flex-col" : ""}`}
+					>
 						<button
 							className={windowBtnClasses}
 							title={t("tooltips.hideHUD")}
diff --git a/src/i18n/locales/ar/launch.json b/src/i18n/locales/ar/launch.json
index 449872f8d..ef000a875 100644
--- a/src/i18n/locales/ar/launch.json
+++ b/src/i18n/locales/ar/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "إيقاف التسجيل مؤقتاً",
 		"resumeRecording": "استئناف التسجيل",
 		"openVideoFile": "فتح ملف فيديو",
-		"openProject": "فتح مشروع"
+		"openProject": "فتح مشروع",
+		"useVerticalTray": "استخدام الشريط العمودي",
+		"useHorizontalTray": "استخدام الشريط الأفقي"
 	},
 	"audio": {
 		"enableSystemAudio": "تفعيل صوت النظام",
diff --git a/src/i18n/locales/en/launch.json b/src/i18n/locales/en/launch.json
index 133a96127..c9dddfde3 100644
--- a/src/i18n/locales/en/launch.json
+++ b/src/i18n/locales/en/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Pause recording",
 		"resumeRecording": "Resume recording",
 		"openVideoFile": "Open video file",
-		"openProject": "Open project"
+		"openProject": "Open project",
+		"useVerticalTray": "Use vertical tray",
+		"useHorizontalTray": "Use horizontal tray"
 	},
 	"audio": {
 		"enableSystemAudio": "Enable system audio",
diff --git a/src/i18n/locales/es/launch.json b/src/i18n/locales/es/launch.json
index e0d2c3c6c..bc6ba52a8 100644
--- a/src/i18n/locales/es/launch.json
+++ b/src/i18n/locales/es/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Pausar grabación",
 		"resumeRecording": "Reanudar grabación",
 		"openVideoFile": "Abrir archivo de video",
-		"openProject": "Abrir proyecto"
+		"openProject": "Abrir proyecto",
+		"useVerticalTray": "Usar bandeja vertical",
+		"useHorizontalTray": "Usar bandeja horizontal"
 	},
 	"audio": {
 		"enableSystemAudio": "Activar audio del sistema",
diff --git a/src/i18n/locales/fr/launch.json b/src/i18n/locales/fr/launch.json
index 33e623660..0a89376c2 100644
--- a/src/i18n/locales/fr/launch.json
+++ b/src/i18n/locales/fr/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Mettre en pause l'enregistrement",
 		"resumeRecording": "Reprendre l'enregistrement",
 		"openVideoFile": "Ouvrir un fichier vidéo",
-		"openProject": "Ouvrir un projet"
+		"openProject": "Ouvrir un projet",
+		"useVerticalTray": "Utiliser la barre verticale",
+		"useHorizontalTray": "Utiliser la barre horizontale"
 	},
 	"audio": {
 		"enableSystemAudio": "Activer l'audio système",
diff --git a/src/i18n/locales/it/launch.json b/src/i18n/locales/it/launch.json
index fc7019e50..66c18bc9d 100644
--- a/src/i18n/locales/it/launch.json
+++ b/src/i18n/locales/it/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Metti in pausa registrazione",
 		"resumeRecording": "Riprendi registrazione",
 		"openVideoFile": "Apri file video",
-		"openProject": "Apri progetto"
+		"openProject": "Apri progetto",
+		"useVerticalTray": "Usa barra verticale",
+		"useHorizontalTray": "Usa barra orizzontale"
 	},
 	"audio": {
 		"enableSystemAudio": "Abilita audio di sistema",
diff --git a/src/i18n/locales/ja-JP/launch.json b/src/i18n/locales/ja-JP/launch.json
index 601cf2d8b..66fd8ee6b 100644
--- a/src/i18n/locales/ja-JP/launch.json
+++ b/src/i18n/locales/ja-JP/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "録画を一時停止",
 		"resumeRecording": "録画を再開",
 		"openVideoFile": "動画ファイルを開く",
-		"openProject": "プロジェクトを開く"
+		"openProject": "プロジェクトを開く",
+		"useVerticalTray": "縦型トレイを使用",
+		"useHorizontalTray": "横型トレイを使用"
 	},
 	"audio": {
 		"enableSystemAudio": "システム音声を有効にする",
diff --git a/src/i18n/locales/ko-KR/launch.json b/src/i18n/locales/ko-KR/launch.json
index 07e063283..361ce8657 100644
--- a/src/i18n/locales/ko-KR/launch.json
+++ b/src/i18n/locales/ko-KR/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "녹화 일시정지",
 		"resumeRecording": "녹화 재개",
 		"openVideoFile": "비디오 파일 열기",
-		"openProject": "프로젝트 열기"
+		"openProject": "프로젝트 열기",
+		"useVerticalTray": "세로 트레이 사용",
+		"useHorizontalTray": "가로 트레이 사용"
 	},
 	"audio": {
 		"enableSystemAudio": "시스템 오디오 활성화",
diff --git a/src/i18n/locales/ru/launch.json b/src/i18n/locales/ru/launch.json
index 7582a6923..9b3361296 100644
--- a/src/i18n/locales/ru/launch.json
+++ b/src/i18n/locales/ru/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Приостановить запись",
 		"resumeRecording": "Возобновить запись",
 		"openVideoFile": "Открыть видеофайл",
-		"openProject": "Открыть проект"
+		"openProject": "Открыть проект",
+		"useVerticalTray": "Использовать вертикальную панель",
+		"useHorizontalTray": "Использовать горизонтальную панель"
 	},
 	"audio": {
 		"enableSystemAudio": "Включить системное аудио",
diff --git a/src/i18n/locales/tr/launch.json b/src/i18n/locales/tr/launch.json
index 39a91be5c..921a52634 100644
--- a/src/i18n/locales/tr/launch.json
+++ b/src/i18n/locales/tr/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Kaydı duraklat",
 		"resumeRecording": "Kayda devam et",
 		"openVideoFile": "Video dosyası aç",
-		"openProject": "Proje aç"
+		"openProject": "Proje aç",
+		"useVerticalTray": "Dikey araç çubuğunu kullan",
+		"useHorizontalTray": "Yatay araç çubuğunu kullan"
 	},
 	"audio": {
 		"enableSystemAudio": "Sistem sesini etkinleştir",
diff --git a/src/i18n/locales/vi/launch.json b/src/i18n/locales/vi/launch.json
index 84146d10c..efbaad5d4 100644
--- a/src/i18n/locales/vi/launch.json
+++ b/src/i18n/locales/vi/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "Tạm dừng ghi hình",
 		"resumeRecording": "Tiếp tục ghi hình",
 		"openVideoFile": "Mở tệp video",
-		"openProject": "Mở dự án"
+		"openProject": "Mở dự án",
+		"useVerticalTray": "Dùng khay dọc",
+		"useHorizontalTray": "Dùng khay ngang"
 	},
 	"audio": {
 		"enableSystemAudio": "Bật âm thanh hệ thống",
diff --git a/src/i18n/locales/zh-CN/launch.json b/src/i18n/locales/zh-CN/launch.json
index ae399e3f5..c08996585 100644
--- a/src/i18n/locales/zh-CN/launch.json
+++ b/src/i18n/locales/zh-CN/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "暂停录制",
 		"resumeRecording": "继续录制",
 		"openVideoFile": "打开视频文件",
-		"openProject": "打开项目"
+		"openProject": "打开项目",
+		"useVerticalTray": "使用竖向托盘",
+		"useHorizontalTray": "使用横向托盘"
 	},
 	"audio": {
 		"enableSystemAudio": "启用系统音频",
diff --git a/src/i18n/locales/zh-TW/launch.json b/src/i18n/locales/zh-TW/launch.json
index 9629c86f7..42ba52a7f 100644
--- a/src/i18n/locales/zh-TW/launch.json
+++ b/src/i18n/locales/zh-TW/launch.json
@@ -7,7 +7,9 @@
 		"pauseRecording": "暫停錄製",
 		"resumeRecording": "繼續錄製",
 		"openVideoFile": "開啟影片檔案",
-		"openProject": "開啟專案"
+		"openProject": "開啟專案",
+		"useVerticalTray": "使用直向工具列",
+		"useHorizontalTray": "使用橫向工具列"
 	},
 	"audio": {
 		"enableSystemAudio": "啟用系統音訊",
diff --git a/src/lib/userPreferences.test.ts b/src/lib/userPreferences.test.ts
index 5ba9fceb1..87ed259f2 100644
--- a/src/lib/userPreferences.test.ts
+++ b/src/lib/userPreferences.test.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { parentDirectoryOf } from "./userPreferences";
+import { beforeEach, describe, expect, it } from "vitest";
+import { loadUserPreferences, parentDirectoryOf, saveUserPreferences } from "./userPreferences";
 
 describe("parentDirectoryOf", () => {
 	it("returns the directory for a POSIX path", () => {
@@ -24,3 +24,21 @@ describe("parentDirectoryOf", () => {
 		expect(parentDirectoryOf("")).toBeNull();
 	});
 });
+
+describe("user preferences", () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	it("persists the tray layout preference", () => {
+		saveUserPreferences({ trayLayout: "vertical" });
+
+		expect(loadUserPreferences().trayLayout).toBe("vertical");
+	});
+
+	it("falls back to the default tray layout for invalid stored values", () => {
+		localStorage.setItem("openscreen_user_preferences", JSON.stringify({ trayLayout: "diagonal" }));
+
+		expect(loadUserPreferences().trayLayout).toBe("horizontal");
+	});
+});
diff --git a/src/lib/userPreferences.ts b/src/lib/userPreferences.ts
index 28a45068e..a14b64625 100644
--- a/src/lib/userPreferences.ts
+++ b/src/lib/userPreferences.ts
@@ -29,6 +29,8 @@ export interface UserPreferences {
 	exportFormat: ExportFormat;
 	/** Folder used for the most recent successful export, if any */
 	exportFolder: string | null;
+	/** Recording HUD control layout */
+	trayLayout: "horizontal" | "vertical";
 }
 
 export const DEFAULT_PREFS: UserPreferences = {
@@ -37,6 +39,7 @@ export const DEFAULT_PREFS: UserPreferences = {
 	exportQuality: DEFAULT_EXPORT_SETTINGS.quality,
 	exportFormat: DEFAULT_EXPORT_SETTINGS.format,
 	exportFolder: null,
+	trayLayout: "horizontal",
 };
 
 function safeJsonParse(text: string | null): Record<string, unknown> | null {
@@ -87,6 +90,10 @@ export function loadUserPreferences(): UserPreferences {
 			typeof raw.exportFolder === "string" && raw.exportFolder.length > 0
 				? raw.exportFolder
 				: DEFAULT_PREFS.exportFolder,
+		trayLayout:
+			raw.trayLayout === "horizontal" || raw.trayLayout === "vertical"
+				? raw.trayLayout
+				: DEFAULT_PREFS.trayLayout,
 	};
 }
 

From 9fc047f2cdb1209c9b5b9db641d42741cb37854b Mon Sep 17 00:00:00 2001
From: "arunkumar.a" <arunkumar.a@juspay.in>
Date: Sat, 23 May 2026 23:52:21 +0530
Subject: [PATCH 2/2] Improve tray layout documentation

---
 src/components/launch/LaunchWindow.tsx | 3 +++
 src/i18n/locales/zh-TW/launch.json     | 4 ++--
 src/lib/userPreferences.ts             | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 5b3b4af7f..328db39d8 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -60,6 +60,7 @@ const ICON_CONFIG = {
 
 type IconName = keyof typeof ICON_CONFIG;
 
+/** Renders the configured icon for a HUD control. */
 function getIcon(name: IconName, className?: string) {
 	const { icon: Icon, size } = ICON_CONFIG[name];
 	return <Icon size={size} className={className} />;
@@ -81,6 +82,7 @@ const hudSidebarClasses = "ml-0.5 pl-1.5 border-l border-white/10 flex items-cen
 const hudSidebarVerticalClasses =
 	"mt-0.5 pt-1.5 border-t border-white/10 flex flex-col items-center gap-0.5";
 
+/** Launches the floating recording HUD and its recorder controls. */
 export function LaunchWindow() {
 	const t = useScopedT("launch");
 	const availableLocales = getAvailableLocales();
@@ -371,6 +373,7 @@ export function LaunchWindow() {
 			window.electronAPI.hudOverlayClose();
 		}
 	};
+	/** Switches the HUD between horizontal and vertical tray layouts. */
 	const toggleTrayLayout = () => {
 		const nextLayout = trayLayout === "horizontal" ? "vertical" : "horizontal";
 		setTrayLayout(nextLayout);
diff --git a/src/i18n/locales/zh-TW/launch.json b/src/i18n/locales/zh-TW/launch.json
index 42ba52a7f..d0b529ebe 100644
--- a/src/i18n/locales/zh-TW/launch.json
+++ b/src/i18n/locales/zh-TW/launch.json
@@ -8,8 +8,8 @@
 		"resumeRecording": "繼續錄製",
 		"openVideoFile": "開啟影片檔案",
 		"openProject": "開啟專案",
-		"useVerticalTray": "使用直向工具列",
-		"useHorizontalTray": "使用橫向工具列"
+		"useVerticalTray": "使用直向托盤",
+		"useHorizontalTray": "使用橫向托盤"
 	},
 	"audio": {
 		"enableSystemAudio": "啟用系統音訊",
diff --git a/src/lib/userPreferences.ts b/src/lib/userPreferences.ts
index a14b64625..128eb73b8 100644
--- a/src/lib/userPreferences.ts
+++ b/src/lib/userPreferences.ts
@@ -42,6 +42,7 @@ export const DEFAULT_PREFS: UserPreferences = {
 	trayLayout: "horizontal",
 };
 
+/** Parses stored preferences without throwing on malformed JSON. */
 function safeJsonParse(text: string | null): Record<string, unknown> | null {
 	if (!text) return null;
 	try {