refactor(frontent): move components and ts to lib folder

control/frontend/src/lib/components/DisplayObject.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import {
+		current_height,
+		get_selectable_color_classes,
+		pinned_display_id
+	} from '../ts/stores/ui_behavior';
+	import DNDGrip from './DNDGrip.svelte';
+	import { Menu, Pin, PinOff, VideoOff } from 'lucide-svelte';
+	import OnlineState from './OnlineState.svelte';
+	import type { Display, MenuOption } from '../ts/types';
+	import { is_selected, select, selected_display_ids } from '../ts/stores/select';
+	import { screenshot_loop } from '../ts/stores/displays';
+	import { change_file_path, current_file_path } from '../ts/stores/files';
+
+	let {
+		display,
+		get_display_menu_options,
+		close_pinned_display
+	}: {
+		display: Display;
+		get_display_menu_options: (display_id: string) => MenuOption[];
+		close_pinned_display: () => void;
+	} = $props();
+
+	let hovering_unselectable = $state(false);
+
+	async function onclick(e: Event) {
+		e.stopPropagation();
+		select(selected_display_ids, display.id, 'toggle');
+
+		// force file view update
+		await change_file_path($current_file_path);
+	}
+
+	async function on_preview_click(e: MouseEvent) {
+		if ($pinned_display_id === display.id) {
+			close_pinned_display();
+		} else {
+			$pinned_display_id = display.id;
+		}
+		await screenshot_loop(display.id);
+		e.stopPropagation();
+	}
+</script>
+
+<div
+	data-testid="display"
+	role="button"
+	tabindex="0"
+	onkeydown={(e) => {
+		if (e.key === 'Enter' || e.key === ' ') onclick(e);
+	}}
+	{onclick}
+	class="p-1 {get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+		bg: true,
+		hover: true,
+		active: !hovering_unselectable,
+		text: true
+	})} rounded-xl flex flex-row justify-between h-{$current_height.display} transition-colors duration-100 gap-2 cursor-pointer w-full text-stone-200"
+>
+	<div class="flex flex-row gap-4 min-w-0 flex-1">
+		<!-- Left Preview Screen -->
+		<button
+			class="group relative aspect-video bg-stone-800 h-full rounded-lg overflow-hidden cursor-pointer text-stone-200 transition-colors duration-200"
+			onmouseenter={() => (hovering_unselectable = true)}
+			onmouseleave={() => (hovering_unselectable = false)}
+			onclick={on_preview_click}
+		>
+			<div class="flex h-full w-full items-center justify-center">
+				{#if $pinned_display_id === display.id}
+					<div class="size-[50%]">
+						<Pin class="size-full" />
+					</div>
+				{:else if display.preview.url}
+					<img src={display.preview.url} alt="preview" class="w-full object-cover bg-black" />
+				{:else}
+					<!-- No Signal -->
+					<div class="size-full bg-black flex justify-center items-center">
+						<VideoOff class="size-[30%]" />
+					</div>
+				{/if}
+			</div>
+
+			<!-- Hover Effect -->
+			<span
+				class="pointer-events-none absolute inset-0 {$pinned_display_id === display.id
+					? 'bg-stone-700'
+					: 'bg-stone-700/70'} opacity-0 transition-opacity duration-200 flex items-center justify-center group-hover:opacity-100"
+			>
+				{#if $pinned_display_id === display.id}
+					<PinOff class="size-[50%]" aria-hidden="true" />
+				{:else}
+					<Pin class="size-[50%]" aria-hidden="true" />
+				{/if}
+			</span>
+		</button>
+		<!-- Middle Text Block -->
+		<div
+			class="h-full flex flex-col justify-center gap-1 select-none
+                min-w-0 basis-0 flex-1"
+		>
+			<div class="text-xl font-bold truncate w-full" title={display.name}>
+				{display.name}
+			</div>
+
+			<OnlineState
+				selected={is_selected(display.id, $selected_display_ids)}
+				status={display.status}
+			/>
+		</div>
+	</div>
+	<!-- Right Controls -->
+	<div class="flex flex-row h-full items-center gap-2 pr-3">
+		<DNDGrip
+			bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+				bg: true
+			})}
+		/>
+
+		<div
+			role="figure"
+			onmouseenter={() => (hovering_unselectable = true)}
+			onmouseleave={() => (hovering_unselectable = false)}
+		>
+			<Button
+				bg="bg-transparent"
+				hover_bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+					bg: true
+				})}
+				active_bg={get_selectable_color_classes(is_selected(display.id, $selected_display_ids), {
+					bg: true
+				})}
+				click_function={(e) => {
+					e.stopPropagation();
+				}}
+				menu_options={get_display_menu_options(display.id)}
+			>
+				<Menu />
+			</Button>
+		</div>
+	</div>
+</div>