Function renderSourceItem

src/components/launch/SourceSelector.tsx:86–129

(source: DesktopSource, index: number)

}: Pick<SourceSelectorProps, "screenSources" | "windowSources" | "selectedSource" | "loading" | "onSourceSelect">) => {
	const t = useScopedT("launch");
	const renderSourceItem = (source: DesktopSource, index: number) => {
		const isSelected = selectedSource === source.name;
		return (
			<button
				key={`${source.id}-${index}`}
				type="button"
				className={cn(
					"source-selector-item group min-h-[46px] w-full rounded-[11px] px-3 py-2.5 text-left font-medium flex items-center justify-start gap-3",
					isSelected && "source-selector-item-selected",
				)}
				onClick={() => onSourceSelect(source)}
			>
				<div className="relative flex-shrink-0">
					{source.thumbnail ? (
						<img
							src={source.thumbnail}
							alt=""
							className="w-12 h-8 rounded-[8px] object-cover bg-black/50"
							onError={(e) => {
								(e.target as HTMLImageElement).style.display = "none";
							}}
						/>
					) : (
						<div className="source-selector-thumb-fallback w-12 h-8 rounded-[8px] flex items-center justify-center">
							{source.sourceType === "window" ? (
								<AppWindowIcon className="w-5 h-5 source-selector-muted" />
							) : (
								<MonitorIcon className="w-5 h-5 source-selector-muted" />
							)}
						</div>
					)}
				</div>

					<div className="flex-1 min-w-0 flex flex-col items-start text-left">
					<div className="text-sm font-medium source-selector-text w-full">
						<MarqueeText text={source.windowTitle || source.name} />
					</div>
					<div className="text-xs source-selector-subtle truncate w-full text-left">
						{source.sourceType === "screen" ? t("recording.screen") : t("recording.window")}
					</div>
				</div>
			</button>
		);
	};

	const hasAnySources = screenSources.length > 0 || windowSources.length > 0;