refactor(frontend): split true components from modules

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { get_shifted_color } from '../ts/stores/ui_behavior';
-	import type { MenuOption } from '../ts/types';
+	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
+	import type { MenuOption } from '$lib/ts/types';
 	import { fade } from 'svelte/transition';
 
 	let {

control/frontend/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

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

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

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Monitor, Plus, Radio, Settings, Trash2, X } from 'lucide-svelte';
 	import Button from '$lib/components/Button.svelte';
-	import FileView from '$lib/components/FileView.svelte';
-	import ControlView from '$lib/components/ControlView.svelte';
-	import DisplayView from '$lib/components/DisplayView.svelte';
+	import FileView from './FileView.svelte';
+	import ControlView from './ControlView.svelte';
+	import DisplayView from './DisplayView.svelte';
 	import PopUp from '$lib/components/PopUp.svelte';
 	import { type PopupContent } from '$lib/ts/types';
 	import TextInput from '$lib/components/TextInput.svelte';

control/frontend/src/routes/ControlView.svelte

@@ -12,13 +12,13 @@
 		TrafficCone
 	} from 'lucide-svelte';
 	import { onMount } from 'svelte';
-	import Button from './Button.svelte';
-	import PopUp from './PopUp.svelte';
-	import type { PopupContent } from '../ts/types';
+	import Button from '$lib/components/Button.svelte';
+	import PopUp from '$lib/components/PopUp.svelte';
+	import type { PopupContent } from '$lib/ts/types';
 	import KeyInput from './KeyInput.svelte';
-	import { send_keyboard_input, show_blackscreen } from '../ts/api_handler';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
-	import { selected_display_ids } from '../ts/stores/select';
+	import { send_keyboard_input, show_blackscreen } from '$lib/ts/api_handler';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import { selected_display_ids } from '$lib/ts/stores/select';
 	import TipTapInput from './TipTapInput.svelte';
 
 	let popup_content: PopupContent = $state({

control/frontend/src/routes/DisplayGroupObject.svelte

@@ -5,7 +5,7 @@
 		get_selectable_color_classes,
 		is_display_drag,
 		is_group_drag
-	} from '../ts/stores/ui_behavior';
+	} from '$lib/ts/stores/ui_behavior';
 	import { cubicOut } from 'svelte/easing';
 	import { flip } from 'svelte/animate';
 	import DisplayObject from './DisplayObject.svelte';
@@ -14,11 +14,11 @@
 		get_display_ids_in_group,
 		select_all_of_group,
 		set_new_display_order
-	} from '../ts/stores/displays';
-	import DNDGrip from './DNDGrip.svelte';
+	} from '$lib/ts/stores/displays';
+	import DNDGrip from '$lib/components/DNDGrip.svelte';
 	import { fade } from 'svelte/transition';
-	import type { MenuOption } from '../ts/types';
-	import { selected_display_ids } from '../ts/stores/select';
+	import type { MenuOption } from '$lib/ts/types';
+	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { liveQuery } from 'dexie';
 
 	let {

control/frontend/src/routes/DisplayObject.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import Button from './Button.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import {
 		current_height,
 		get_selectable_color_classes,
 		pinned_display_id
-	} from '../ts/stores/ui_behavior';
-	import DNDGrip from './DNDGrip.svelte';
+	} from '$lib/ts/stores/ui_behavior';
+	import DNDGrip from '$lib/components/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';
+	import type { Display, MenuOption } from '$lib/ts/types';
+	import { is_selected, select, selected_display_ids } from '$lib/ts/stores/select';
+	import { screenshot_loop } from '$lib/ts/stores/displays';
+	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
 
 	let {
 		display,

control/frontend/src/routes/DisplayView.svelte

@@ -6,7 +6,7 @@
 		get_display_groups,
 		select_all_of_group,
 		set_new_display_group_order
-	} from '../ts/stores/displays';
+	} from '$lib/ts/stores/displays';
 	import {
 		change_height,
 		current_height,
@@ -16,18 +16,18 @@
 		is_group_drag,
 		next_height_step_size,
 		pinned_display_id
-	} from '../ts/stores/ui_behavior';
-	import { type Display, type DisplayGroup, type MenuOption } from '../ts/types';
-	import Button from './Button.svelte';
+	} from '$lib/ts/stores/ui_behavior';
+	import { type Display, type DisplayGroup, type MenuOption } from '$lib/ts/types';
+	import Button from '$lib/components/Button.svelte';
 	import OnlineState from './OnlineState.svelte';
 	import { cubicOut } from 'svelte/easing';
 	import { Menu, Pencil, PinOff, Settings, Trash2, VideoOff, ZoomIn, ZoomOut } from 'lucide-svelte';
-	import { selected_display_ids } from '../ts/stores/select';
+	import { selected_display_ids } from '$lib/ts/stores/select';
 	import { dragHandleZone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import DisplayGroupObject from './DisplayGroupObject.svelte';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
-	import HighlightedText from './HighlightedText.svelte';
+	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery, type Observable } from 'dexie';
 
 	let {

control/frontend/src/routes/FileView.svelte

@@ -11,10 +11,10 @@
 		ZoomIn,
 		ZoomOut
 	} from 'lucide-svelte';
-	import { change_height, current_height, next_height_step_size } from '../ts/stores/ui_behavior';
-	import Button from './Button.svelte';
+	import { change_height, current_height, next_height_step_size } from '$lib/ts/stores/ui_behavior';
+	import Button from '$lib/components/Button.svelte';
 	import PathBar from './PathBar.svelte';
-	import { selected_display_ids, selected_file_ids } from '../ts/stores/select';
+	import { selected_display_ids, selected_file_ids } from '$lib/ts/stores/select';
 	import {
 		current_file_path,
 		get_current_folder_elements,
@@ -23,15 +23,15 @@
 		update_current_folder_on_selected_displays,
 		get_displays_where_path_exists,
 		create_folder_on_all_selected_displays
-	} from '../ts/stores/files';
+	} from '$lib/ts/stores/files';
 	import { slide } from 'svelte/transition';
 	import InodeElement from './InodeElement.svelte';
-	import PopUp from './PopUp.svelte';
-	import { get_file_primary_key, type Inode, type PopupContent } from '../ts/types';
-	import TextInput from './TextInput.svelte';
-	import { is_valid_name } from '../ts/utils';
-	import { delete_files, rename_file } from '../ts/api_handler';
-	import HighlightedText from './HighlightedText.svelte';
+	import PopUp from '$lib/components/PopUp.svelte';
+	import { get_file_primary_key, type Inode, type PopupContent } from '$lib/ts/types';
+	import TextInput from '$lib/components/TextInput.svelte';
+	import { is_valid_name } from '$lib/ts/utils';
+	import { delete_files, rename_file } from '$lib/ts/api_handler';
+	import HighlightedText from '$lib/components/HighlightedText.svelte';
 	import { liveQuery } from 'dexie';
 
 	let current_name: string = $state('');

control/frontend/src/routes/InodeElement.svelte

@@ -5,7 +5,7 @@
 		get_selectable_color_classes,
 		get_shifted_color
 	} from '$lib/ts/stores/ui_behavior';
-	import Button from './Button.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { supported_file_type_icon, type Inode, get_file_primary_key } from '$lib/ts/types';
 
 	import {

control/frontend/src/routes/KeyInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
 	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 '$lib/ts/stores/displays';
 	import { send_keyboard_input } from '$lib/ts/api_handler';

control/frontend/src/routes/Notification.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import Button from './Button.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { X } from 'lucide-svelte';
 	import { notifications } from '$lib/ts/stores/notification';
 </script>

control/frontend/src/routes/PathBar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ChevronRight, House } from 'lucide-svelte';
-	import Button from './Button.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import type { MenuOption } from '$lib/ts/types';
 	import { change_file_path, current_file_path } from '$lib/ts/stores/files';

control/frontend/src/routes/TipTapInput.svelte

@@ -12,7 +12,7 @@
 		QrCode,
 		Strikethrough
 	} from 'lucide-svelte';
-	import Button from './Button.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
 	import { show_html } from '$lib/ts/api_handler';
 	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';