From 3fd7f28d7e2a73f38a18520d33da92d3f3b3a493 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sun, 18 Aug 2024 01:41:54 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Adds=20wrap=20mode=20for=20phone?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/layout/DynamicLayout.svelte |  8 +++++---
 app/src/lib/components/layout/LayoutManager.ts     | 14 +++++++++++++-
 app/src/lib/components/layout/Widget.svelte        |  2 +-
 app/src/routes/controller/+layout.svelte           |  4 ++--
 app/src/routes/controller/Controls.svelte          |  2 +-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/src/lib/components/layout/DynamicLayout.svelte b/app/src/lib/components/layout/DynamicLayout.svelte
index d68fec4..2a60f4c 100644
--- a/app/src/lib/components/layout/DynamicLayout.svelte
+++ b/app/src/lib/components/layout/DynamicLayout.svelte
@@ -5,10 +5,11 @@
 	export let container: WidgetContainerConfig;
 </script>
 
-<div class="w-full h-full flex flex-col">
+<div class="w-full h-full flex flex-col overflow-hidden">
 	{#if container.header}
-		<div class="bg-base-300">
-			<div class="bg-base-100 p-2 w-min">{container.header}</div>
+		<div role="tablist" class="tabs tabs-lifted w-min">
+			<a role="tab" class="tab">{container.header}</a>
+			<a role="tab" class="tab tab-active">{container.header}</a>
 		</div>
 	{/if}
 
@@ -16,6 +17,7 @@
 		class="flex w-full h-full"
 		class:flex-row={container.layout === 'column'}
 		class:flex-col={container.layout === 'row'}
+		class:flex-wrap={container.layout === 'wrap'}
 	>
 		{#each container.widgets as widget, index (widget.id + '-' + index)}
 			<Widget size={widget.size ?? 1}>
diff --git a/app/src/lib/components/layout/LayoutManager.ts b/app/src/lib/components/layout/LayoutManager.ts
index e5187de..687668f 100644
--- a/app/src/lib/components/layout/LayoutManager.ts
+++ b/app/src/lib/components/layout/LayoutManager.ts
@@ -13,7 +13,7 @@ export interface WidgetConfig {
 
 export interface WidgetContainerConfig {
 	id: string | number;
-	layout: 'row' | 'column';
+	layout: 'row' | 'column' | 'wrap';
 	header?: string;
 	size?: number;
 	widgets: Array<WidgetConfig | WidgetContainerConfig>;
@@ -29,6 +29,18 @@ export const WidgetComponents = {
 	CpuUsageChart
 };
 
+export const phoneControllerLayout: Writable<WidgetContainerConfig> = persistentStore(
+	'phone_controller_layout',
+	{
+		id: 'root',
+		layout: 'wrap',
+		widgets: [
+			{ id: 2, component: 'Stream' },
+			{ id: 1, component: 'Visualization', props: { debug: true } }
+		]
+	} as WidgetContainerConfig
+);
+
 export const controllerLayout: Writable<WidgetContainerConfig> = persistentStore(
 	'controller_layout',
 	{
diff --git a/app/src/lib/components/layout/Widget.svelte b/app/src/lib/components/layout/Widget.svelte
index 6e4c0f7..42a289b 100644
--- a/app/src/lib/components/layout/Widget.svelte
+++ b/app/src/lib/components/layout/Widget.svelte
@@ -2,6 +2,6 @@
     export let size = 1;
 </script>
 
-<div class="box-border overflow-hidden" style="flex: {size}">
+<div class="box-border overflow-hidden min-w-96" style="flex: {size}">
     <slot></slot>
 </div>
diff --git a/app/src/routes/controller/+layout.svelte b/app/src/routes/controller/+layout.svelte
index f0e7d8a..39f318a 100644
--- a/app/src/routes/controller/+layout.svelte
+++ b/app/src/routes/controller/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Controls from './Controls.svelte';
 	import WidgetContainer from '$lib/components/layout/DynamicLayout.svelte';
-	import { controllerLayout} from '$lib/components/layout/LayoutManager';
+	import { controllerLayout, phoneControllerLayout} from '$lib/components/layout/LayoutManager';
 </script>
 
 <div class="absolute top-0 select-none w-screen h-screen">
 	<Controls />
 	<!-- <button class="absolute z-20 btn" on:click={addWidget}>Add Widget</button> -->
 	<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-		<WidgetContainer container={$controllerLayout} />
+		<WidgetContainer container={$phoneControllerLayout} />
 	</div>
 </div>
diff --git a/app/src/routes/controller/Controls.svelte b/app/src/routes/controller/Controls.svelte
index 17a4483..7346323 100644
--- a/app/src/routes/controller/Controls.svelte
+++ b/app/src/routes/controller/Controls.svelte
@@ -113,7 +113,7 @@
 			<VerticalSlider min={0} max={100} on:input={(e) => handleRange(e, 'height')} />
 			<label for="height">Ht</label>
 		</div>
-		<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3">
+		<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden">
 			<div class="join">
 				{#each modes as modeValue}
 					<button