⛹️‍♂️ Simplifies layout handling

app/src/lib/stores/application.ts

@@ -0,0 +1,67 @@
+import { persistentStore } from '$lib/utilities';
+import { get, type Writable } from 'svelte/store';
+
+import Visualization from '$lib/components/Visualization.svelte';
+import Stream from '$lib/components/Stream.svelte';
+import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
+
+export interface WidgetConfig {
+	id: string | number;
+	component: keyof typeof WidgetComponents;
+	props?: Record<string, any>;
+}
+
+export interface WidgetContainerConfig {
+	id: string | number;
+	layout?: 'row' | 'column' | 'wrap';
+	header?: string;
+	widgets: Array<WidgetConfig | WidgetContainerConfig>;
+}
+
+export const isWidgetConfig = (
+	widget: WidgetConfig | WidgetContainerConfig
+): widget is WidgetConfig => 'component' in widget;
+
+export const WidgetComponents = {
+	Visualization,
+	Stream,
+	ChartWidget
+};
+
+interface View {
+	name: string;
+	content: WidgetContainerConfig;
+}
+
+const defaultViews: View[] = [
+	{
+		name: 'Stream',
+		content: {
+			id: 'root',
+			layout: 'column',
+			widgets: [{ id: 2, component: 'Stream' }]
+		}
+	},
+	{
+		name: '3D representation',
+		content: {
+			id: 'root',
+			layout: 'column',
+			widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
+		}
+	},
+	{
+		name: 'Split screen',
+		content: {
+			id: 'root',
+			widgets: [
+				{ id: 2, component: 'Stream' },
+				{ id: 2, component: 'Visualization', props: { debug: true } }
+			]
+		}
+	}
+];
+
+export const views: Writable<View[]> = persistentStore('views', defaultViews);
+
+export const selectedView = persistentStore('selected_view', get(views)[0].name);

app/src/lib/stores/fullscreen.ts

@@ -0,0 +1,24 @@
+import { writable } from 'svelte/store';
+
+export const isFullscreen = writable(false);
+
+export function toggleFullscreen() {
+	isFullscreen.update((state) => {
+		!state ? document.documentElement.requestFullscreen() : document.exitFullscreen();
+		return !state;
+	});
+}
+
+export function enterFullscreen() {
+	if (!document.fullscreenElement) {
+		document.documentElement.requestFullscreen();
+		isFullscreen.set(true);
+	}
+}
+
+export function exitFullscreen() {
+	if (document.fullscreenElement) {
+		document.exitFullscreen();
+		isFullscreen.set(false);
+	}
+}

app/src/lib/stores/index.ts

@@ -2,3 +2,4 @@ export * from './socket-store';
 export * from './logging-store';
 export * from './model-store';
 export * from './socket';
+export * from './fullscreen';