From e4bf1ccfc1d3c0e08e3222940e8dd9f58d88ae95 Mon Sep 17 00:00:00 2001
From: 2mal3 <56305732+2mal3@users.noreply.github.com>
Date: Mon, 29 Dec 2025 18:57:43 +0100
Subject: [PATCH] refactor(frontend): split true components from modules

---
 .../frontend/src/lib/components/Button.svelte |  4 ++--
 control/frontend/src/lib/index.ts             |  1 -
 control/frontend/src/routes/+layout.svelte    |  2 +-
 control/frontend/src/routes/+page.svelte      |  6 +++---
 .../components => routes}/ControlView.svelte  | 12 +++++------
 .../DisplayGroupObject.svelte                 | 10 +++++-----
 .../DisplayObject.svelte                      | 14 ++++++-------
 .../components => routes}/DisplayView.svelte  | 12 +++++------
 .../components => routes}/FileView.svelte     | 20 +++++++++----------
 .../components => routes}/InodeElement.svelte |  2 +-
 .../components => routes}/KeyInput.svelte     |  2 +-
 .../components => routes}/Notification.svelte |  2 +-
 .../components => routes}/OnlineState.svelte  |  0
 .../{lib/components => routes}/PathBar.svelte |  2 +-
 .../components => routes}/RefreshPlay.svelte  |  0
 .../components => routes}/TipTapInput.svelte  |  2 +-
 16 files changed, 45 insertions(+), 46 deletions(-)
 delete mode 100644 control/frontend/src/lib/index.ts
 rename control/frontend/src/{lib/components => routes}/ControlView.svelte (91%)
 rename control/frontend/src/{lib/components => routes}/DisplayGroupObject.svelte (93%)
 rename control/frontend/src/{lib/components => routes}/DisplayObject.svelte (90%)
 rename control/frontend/src/{lib/components => routes}/DisplayView.svelte (96%)
 rename control/frontend/src/{lib/components => routes}/FileView.svelte (95%)
 rename control/frontend/src/{lib/components => routes}/InodeElement.svelte (99%)
 rename control/frontend/src/{lib/components => routes}/KeyInput.svelte (96%)
 rename control/frontend/src/{lib/components => routes}/Notification.svelte (96%)
 rename control/frontend/src/{lib/components => routes}/OnlineState.svelte (100%)
 rename control/frontend/src/{lib/components => routes}/PathBar.svelte (98%)
 rename control/frontend/src/{lib/components => routes}/RefreshPlay.svelte (100%)
 rename control/frontend/src/{lib/components => routes}/TipTapInput.svelte (99%)

diff --git a/control/frontend/src/lib/components/Button.svelte b/control/frontend/src/lib/components/Button.svelte
index 26923f1..eac7cd5 100644
--- a/control/frontend/src/lib/components/Button.svelte
+++ b/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 {
diff --git a/control/frontend/src/lib/index.ts b/control/frontend/src/lib/index.ts
deleted file mode 100644
index 856f2b6..0000000
--- a/control/frontend/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/control/frontend/src/routes/+layout.svelte b/control/frontend/src/routes/+layout.svelte
index 1827b7d..14b298e 100644
--- a/control/frontend/src/routes/+layout.svelte
+++ b/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>
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index 79864e0..46381a3 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/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';
diff --git a/control/frontend/src/lib/components/ControlView.svelte b/control/frontend/src/routes/ControlView.svelte
similarity index 91%
rename from control/frontend/src/lib/components/ControlView.svelte
rename to control/frontend/src/routes/ControlView.svelte
index bc78615..09cebd4 100644
--- a/control/frontend/src/lib/components/ControlView.svelte
+++ b/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({
diff --git a/control/frontend/src/lib/components/DisplayGroupObject.svelte b/control/frontend/src/routes/DisplayGroupObject.svelte
similarity index 93%
rename from control/frontend/src/lib/components/DisplayGroupObject.svelte
rename to control/frontend/src/routes/DisplayGroupObject.svelte
index e312916..6d68171 100644
--- a/control/frontend/src/lib/components/DisplayGroupObject.svelte
+++ b/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 {
diff --git a/control/frontend/src/lib/components/DisplayObject.svelte b/control/frontend/src/routes/DisplayObject.svelte
similarity index 90%
rename from control/frontend/src/lib/components/DisplayObject.svelte
rename to control/frontend/src/routes/DisplayObject.svelte
index bdb9455..34a87d4 100755
--- a/control/frontend/src/lib/components/DisplayObject.svelte
+++ b/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,
diff --git a/control/frontend/src/lib/components/DisplayView.svelte b/control/frontend/src/routes/DisplayView.svelte
similarity index 96%
rename from control/frontend/src/lib/components/DisplayView.svelte
rename to control/frontend/src/routes/DisplayView.svelte
index eebff14..55263a2 100755
--- a/control/frontend/src/lib/components/DisplayView.svelte
+++ b/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 {
diff --git a/control/frontend/src/lib/components/FileView.svelte b/control/frontend/src/routes/FileView.svelte
similarity index 95%
rename from control/frontend/src/lib/components/FileView.svelte
rename to control/frontend/src/routes/FileView.svelte
index 70f7629..871395d 100755
--- a/control/frontend/src/lib/components/FileView.svelte
+++ b/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('');
diff --git a/control/frontend/src/lib/components/InodeElement.svelte b/control/frontend/src/routes/InodeElement.svelte
similarity index 99%
rename from control/frontend/src/lib/components/InodeElement.svelte
rename to control/frontend/src/routes/InodeElement.svelte
index d20ced7..1732082 100755
--- a/control/frontend/src/lib/components/InodeElement.svelte
+++ b/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 {
diff --git a/control/frontend/src/lib/components/KeyInput.svelte b/control/frontend/src/routes/KeyInput.svelte
similarity index 96%
rename from control/frontend/src/lib/components/KeyInput.svelte
rename to control/frontend/src/routes/KeyInput.svelte
index ef878e6..30e90db 100644
--- a/control/frontend/src/lib/components/KeyInput.svelte
+++ b/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';
diff --git a/control/frontend/src/lib/components/Notification.svelte b/control/frontend/src/routes/Notification.svelte
similarity index 96%
rename from control/frontend/src/lib/components/Notification.svelte
rename to control/frontend/src/routes/Notification.svelte
index ebaf9a1..08d0b9b 100644
--- a/control/frontend/src/lib/components/Notification.svelte
+++ b/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>
diff --git a/control/frontend/src/lib/components/OnlineState.svelte b/control/frontend/src/routes/OnlineState.svelte
similarity index 100%
rename from control/frontend/src/lib/components/OnlineState.svelte
rename to control/frontend/src/routes/OnlineState.svelte
diff --git a/control/frontend/src/lib/components/PathBar.svelte b/control/frontend/src/routes/PathBar.svelte
similarity index 98%
rename from control/frontend/src/lib/components/PathBar.svelte
rename to control/frontend/src/routes/PathBar.svelte
index 864da83..35b1b52 100644
--- a/control/frontend/src/lib/components/PathBar.svelte
+++ b/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';
diff --git a/control/frontend/src/lib/components/RefreshPlay.svelte b/control/frontend/src/routes/RefreshPlay.svelte
similarity index 100%
rename from control/frontend/src/lib/components/RefreshPlay.svelte
rename to control/frontend/src/routes/RefreshPlay.svelte
diff --git a/control/frontend/src/lib/components/TipTapInput.svelte b/control/frontend/src/routes/TipTapInput.svelte
similarity index 99%
rename from control/frontend/src/lib/components/TipTapInput.svelte
rename to control/frontend/src/routes/TipTapInput.svelte
index 8f218e0..b371a74 100644
--- a/control/frontend/src/lib/components/TipTapInput.svelte
+++ b/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';