[pull] main from siddharthvaddem:main

src/components/launch/LaunchWindow.tsx

@@ -19,6 +19,7 @@ import { RxDragHandleDots2 } from "react-icons/rx";
 import { useI18n, useScopedT } from "@/contexts/I18nContext";
 import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
 import { getLocaleName } from "@/i18n/loader";
+import { isMac as getIsMac } from "@/utils/platformUtils";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
 import { useScreenRecorder } from "../../hooks/useScreenRecorder";
@@ -67,6 +68,11 @@ const windowBtnClasses =
 export function LaunchWindow() {
 	const t = useScopedT("launch");
 	const { locale, setLocale } = useI18n();
+	const [isMac, setIsMac] = useState(false);
+
+	useEffect(() => {
+		getIsMac().then(setIsMac);
+	}, []);
 
 	const {
 		recording,
@@ -196,7 +202,7 @@ export function LaunchWindow() {
 		<div className="w-full h-full flex items-end justify-center bg-transparent relative">
 			{/* Language switcher — top-left, beside traffic lights */}
 			<div
-				className={`absolute top-2 left-[72px] flex items-center gap-1 px-2 py-1 rounded-md text-white/50 hover:text-white/90 hover:bg-white/10 transition-all duration-150 ${styles.electronNoDrag}`}
+				className={`absolute top-2 flex items-center gap-1 px-2 py-1 rounded-md text-white/50 hover:text-white/90 hover:bg-white/10 transition-all duration-150 ${isMac ? "left-[72px]" : "left-2"} ${styles.electronNoDrag}`}
 			>
 				<Languages size={14} />
 				<select

src/components/video-editor/SettingsPanel.tsx

@@ -4,11 +4,9 @@ import {
 	Crop,
 	Download,
 	Film,
-	FolderOpen,
 	Image,
 	Lock,
 	Palette,
-	Save,
 	Sparkles,
 	Star,
 	Trash2,
@@ -41,7 +39,7 @@ import { WEBCAM_LAYOUT_PRESETS } from "@/lib/compositeLayout";
 import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
 import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
 import { cn } from "@/lib/utils";
-import { type AspectRatio } from "@/utils/aspectRatioUtils";
+import { type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
 import { getTestId } from "@/utils/getTestId";
 import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
 import { CropControl } from "./CropControl";
@@ -128,8 +126,6 @@ interface SettingsPanelProps {
 	gifSizePreset?: GifSizePreset;
 	onGifSizePresetChange?: (preset: GifSizePreset) => void;
 	gifOutputDimensions?: { width: number; height: number };
-	onSaveProject?: () => void;
-	onLoadProject?: () => void;
 	onExport?: () => void;
 	unsavedExport?: { arrayBuffer: ArrayBuffer; fileName: string; format: string } | null;
 	onSaveUnsavedExport?: () => void;
@@ -198,8 +194,6 @@ export function SettingsPanel({
 	gifSizePreset = "medium",
 	onGifSizePresetChange,
 	gifOutputDimensions = { width: 1280, height: 720 },
-	onSaveProject,
-	onLoadProject,
 	onExport,
 	unsavedExport,
 	onSaveUnsavedExport,
@@ -615,7 +609,11 @@ export function SettingsPanel({
 											<SelectValue placeholder={t("layout.selectPreset")} />
 										</SelectTrigger>
 										<SelectContent>
-											{WEBCAM_LAYOUT_PRESETS.map((preset) => (
+											{WEBCAM_LAYOUT_PRESETS.filter(
+												(preset) =>
+													preset.value === "picture-in-picture" ||
+													isPortraitAspectRatio(aspectRatio),
+											).map((preset) => (
 												<SelectItem key={preset.value} value={preset.value} className="text-xs">
 													{preset.value === "picture-in-picture"
 														? t("layout.pictureInPicture")
@@ -706,20 +704,25 @@ export function SettingsPanel({
 										className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
 									/>
 								</div>
-								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+								<div
+									className={`p-2 rounded-lg bg-white/5 border border-white/5 ${webcamLayoutPreset === "vertical-stack" ? "opacity-40 pointer-events-none" : ""}`}
+								>
 									<div className="flex items-center justify-between mb-1">
 										<div className="text-[10px] font-medium text-slate-300">
 											{t("effects.padding")}
 										</div>
-										<span className="text-[10px] text-slate-500 font-mono">{padding}%</span>
+										<span className="text-[10px] text-slate-500 font-mono">
+											{webcamLayoutPreset === "vertical-stack" ? "—" : `${padding}%`}
+										</span>
 									</div>
 									<Slider
-										value={[padding]}
+										value={[webcamLayoutPreset === "vertical-stack" ? 0 : padding]}
 										onValueChange={(values) => onPaddingChange?.(values[0])}
 										onValueCommit={() => onPaddingCommit?.()}
 										min={0}
 										max={100}
 										step={1}
+										disabled={webcamLayoutPreset === "vertical-stack"}
 										className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
 									/>
 								</div>
@@ -1145,27 +1148,6 @@ export function SettingsPanel({
 					</div>
 				)}
 
-				<div className="grid grid-cols-2 gap-2 mb-2">
-					<Button
-						type="button"
-						variant="outline"
-						onClick={onLoadProject}
-						className="h-8 text-[10px] font-medium gap-1.5 bg-white/5 border-white/10 text-slate-300 hover:bg-white/10"
-					>
-						<FolderOpen className="w-3.5 h-3.5" />
-						{t("project.load")}
-					</Button>
-					<Button
-						type="button"
-						variant="outline"
-						onClick={onSaveProject}
-						className="h-8 text-[10px] font-medium gap-1.5 bg-white/5 border-white/10 text-slate-300 hover:bg-white/10"
-					>
-						<Save className="w-3.5 h-3.5" />
-						{t("project.save")}
-					</Button>
-				</div>
-
 				{unsavedExport && (
 					<Button
 						type="button"