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

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

@@ -11,6 +11,7 @@
 		TextAlignStart,
 		TrafficCone
 	} from 'lucide-svelte';
+	import { onMount } from 'svelte';
 	import Button from './Button.svelte';
 	import PopUp from './PopUp.svelte';
 	import type { PopupContent } from '../ts/types';

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

@@ -4,26 +4,26 @@
 		current_height,
 		get_selectable_color_classes,
 		get_shifted_color
-	} from '../ts/stores/ui_behavior';
+	} from '$lib/ts/stores/ui_behavior';
 	import Button from './Button.svelte';
-	import { supported_file_type_icon, type Inode, get_file_primary_key } from '../ts/types';
+	import { supported_file_type_icon, type Inode, get_file_primary_key } from '$lib/ts/types';
 
 	import {
 		is_selected,
 		select,
 		selected_display_ids,
 		selected_file_ids
-	} from '../ts/stores/select';
+	} from '$lib/ts/stores/select';
 	import {
 		change_file_path,
 		current_file_path,
 		get_missing_colliding_display_ids
-	} from '../ts/stores/files';
+	} from '$lib/ts/stores/files';
 	import RefreshPlay from './RefreshPlay.svelte';
-	import { get_file_size_display_string, get_file_type } from '../ts/utils';
+	import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
-	import { open_file } from '../ts/api_handler';
+	import { open_file } from '$lib/ts/api_handler';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
-	import { get_thumbnail_url } from '../ts/stores/thumbnails';
+	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
 	import { liveQuery } from 'dexie';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
-	import { get_selectable_color_classes } from '../ts/stores/ui_behavior';
+	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';
-	import key_map_json from './../../../../shared/keys.json';
+	import key_map_json from './../../../../../shared/keys.json';
 	import { fade } from 'svelte/transition';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
-	import { send_keyboard_input } from '../ts/api_handler';
+	import { send_keyboard_input } from '$lib/ts/api_handler';
 
 	const key_map: Record<string, string> = key_map_json as Record<string, string>;
 

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

@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import Button from './Button.svelte';
 	import { X } from 'lucide-svelte';
-	import { notifications } from '../ts/stores/notification';
+	import { notifications } from '$lib/ts/stores/notification';
 </script>
 
 <div

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { type DisplayStatus } from '../ts/types';
+	import { type DisplayStatus } from '$lib/ts/types';
-	import { display_status_to_info } from '../ts/utils';
+	import { display_status_to_info } from '$lib/ts/utils';
 
 	let {
 		selected,

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

@@ -2,8 +2,8 @@
 	import { ChevronRight, House } from 'lucide-svelte';
 	import Button from './Button.svelte';
 	import { onDestroy, onMount } from 'svelte';
-	import type { MenuOption } from '../ts/types';
+	import type { MenuOption } from '$lib/ts/types';
-	import { change_file_path, current_file_path } from '../ts/stores/files';
+	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
 	import { flip } from 'svelte/animate';
 	import { cubicOut } from 'svelte/easing';
 

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

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { X } from 'lucide-svelte';
 	import Button from './Button.svelte';
-	import type { PopupContent } from '../ts/types';
+	import type { PopupContent } from '$lib/ts/types';
 	import { fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
 
 	let {
 		content,

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { get_shifted_color } from '../ts/stores/ui_behavior';
+	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
 	import { onMount } from 'svelte';
-	import { selected_display_ids } from '../ts/stores/select';
+	import { selected_display_ids } from '$lib/ts/stores/select';
 
 	let {
 		current_value = $bindable(),

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

@@ -13,9 +13,9 @@
 		Strikethrough
 	} from 'lucide-svelte';
 	import Button from './Button.svelte';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
-	import { show_html } from '../ts/api_handler';
+	import { show_html } from '$lib/ts/api_handler';
-	import { get_selectable_color_classes } from '../ts/stores/ui_behavior';
+	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';
 	import { TextStyle } from '@tiptap/extension-text-style';
 	import { Color } from '@tiptap/extension-text-style';
 	import Highlight from '@tiptap/extension-highlight';

control/frontend/src/lib/ts/utils.ts

@@ -1,5 +1,5 @@
 import type { DisplayStatus, Inode, SupportedFileType } from './types';
-import supported_file_types_json from './../../../../shared/supported_file_types.json';
+import supported_file_types_json from './../../../../../shared/supported_file_types.json';
 
 const supported_file_types: Record<string, SupportedFileType> = supported_file_types_json as Record<
 	string,

control/frontend/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '../app.css';
-	import Notification from '../components/Notification.svelte';
+	import Notification from '$lib/components/Notification.svelte';
 
 	let { children } = $props();
 </script>

control/frontend/src/routes/+page.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
 	import { Monitor, Plus, Radio, Settings, Trash2, X } from 'lucide-svelte';
-	import Button from '../components/Button.svelte';
+	import Button from '$lib/components/Button.svelte';
-	import FileView from '../components/FileView.svelte';
+	import FileView from '$lib/components/FileView.svelte';
-	import ControlView from '../components/ControlView.svelte';
+	import ControlView from '$lib/components/ControlView.svelte';
-	import DisplayView from '../components/DisplayView.svelte';
+	import DisplayView from '$lib/components/DisplayView.svelte';
-	import SplashScreen from './../../../../shared/splash_screen.html?raw';
+	import PopUp from '$lib/components/PopUp.svelte';
-	import PopUp from '../components/PopUp.svelte';
+	import { type PopupContent } from '$lib/ts/types';
-	import { type PopupContent } from '../ts/types';
+	import TextInput from '$lib/components/TextInput.svelte';
-	import TextInput from '../components/TextInput.svelte';
 	import {
 		add_display,
 		edit_display_data,
 		get_display_by_id,
 		is_display_name_taken,
 		remove_display
-	} from '../ts/stores/displays';
+	} from '$lib/ts/stores/displays';
 	import { text } from '@sveltejs/kit';
-	import { notifications } from '../ts/stores/notification';
+	import { notifications } from '$lib/ts/stores/notification';
-	import { ping_ip } from '../ts/api_handler';
+	import { ping_ip } from '$lib/ts/api_handler';
 	import { onMount } from 'svelte';
-	import { on_start } from '../ts/main';
+	import { on_start } from '$lib/ts/main';
-	import { display_status_to_info } from '../ts/utils';
+	import { display_status_to_info } from '$lib/ts/utils';
-	import HighlightedText from '../components/HighlightedText.svelte';
+	import HighlightedText from '$lib/components/HighlightedText.svelte';
 
 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;