fix(record-modal): implement ScreenSelector SolidJS component (#114)

apps/desktop/src/components/record-modal/screen-selector.tsx

@@ -0,0 +1,45 @@
+import { createSignal, createResource, For, Show } from "solid-js";
+import { invoke } from "@tauri-apps/api/core";
+
+interface MonitorInfo {
+	id: string;
+	name: string;
+	width: number;
+	height: number;
+	is_primary: boolean;
+}
+
+export function ScreenSelector(props: { onSelect: (screenName: string) => void }) {
+	const [isOpen, setIsOpen] = createSignal(false);
+	const [monitors] = createResource<MonitorInfo[]>(async () => {
+		return await invoke("get_available_monitors");
+	});
+
+	return (
+		<div class="relative inline-block">
+			<button
+				type="button"
+				class="flex items-center gap-2 rounded-lg bg-neutral-800 px-3 py-1.5 text-xs text-white hover:bg-neutral-700 transition"
+				onClick={() => setIsOpen(!isOpen())}
+			>
+				<span>Select Display</span>
+			</button>
+
+			<Show when={isOpen()}>
+				<div class="absolute bottom-full mb-2 left-0 w-64 rounded-xl border border-neutral-700 bg-neutral-900 p-2 shadow-xl z-50">
+					<For each={monitors()}>
+						{(m) => (
+							<button
+								type="button"
+								class="w-full flex items-center justify-between rounded-lg px-2 py-1.5 text-left text-xs text-neutral-200 hover:bg-neutral-800 transition"
+								onClick={() => { props.onSelect(m.name); setIsOpen(false); }}
+							>
+								<span>{m.name} ({m.width}x{m.height})</span>
+							</button>
+						)}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+}

apps/desktop/src/routes/target-select-overlay.tsx

@@ -57,6 +57,7 @@ import {
 	type Ratio,
 } from "~/components/Cropper";
 import ModeSelect from "~/components/ModeSelect";
+import ScreenSelector from "~/components/record-modal/screen-selector";
 import SelectionHint from "~/components/selection-hint";
 import {
 	authStore,
@@ -2387,6 +2388,9 @@ function RecordingControls(props: {
 				</Show>
 			</div>
 			<div class="flex justify-center items-center w-full">
+				<Show when={props.target.variant === "display"}>
+					<ScreenSelector class="justify-center" />
+				</Show>
 				<div
 					onClick={() => props.setToggleModeSelect?.(true)}
 					class="flex gap-1 justify-center items-center self-center mb-5 transition-opacity duration-200 w-fit hover:opacity-60"