From 5b2dd7573d7ac2bd1b4ff06094a2dfd480ed24a4 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 22 Aug 2024 15:38:57 +0200
Subject: [PATCH] feat(frontend): Add a toggle to disable breakpoints in the
 App editor (#4274)

* feat(frontend): Add a toggle to disable breakpoints in the App editor

* feat(frontend): improve UI

* feat(frontend): fix build

* feat(frontend): fix build

* feat(frontend): fix how mobileViewOnSmallerScreens works for older apps

* feat(frontend): fix build
---
 frontend/src/lib/components/Dev.svelte        |  3 +-
 .../components/apps/editor/AppEditor.svelte   | 35 +++++++++++++++++-
 .../apps/editor/AppEditorHeader.svelte        | 26 +++++++++----
 .../components/apps/editor/AppPreview.svelte  |  5 ++-
 frontend/src/lib/components/apps/types.ts     |  1 +
 .../toggleButton-v2/ToggleEnable.svelte       | 37 +++++++++++++++++++
 .../(root)/(logged)/apps/add/+page.svelte     |  1 +
 .../(logged)/apps/get/[...path]/+page.svelte  |  3 +-
 .../[workspace]/[...secret]/+page.svelte      |  2 +-
 9 files changed, 98 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/lib/components/common/toggleButton-v2/ToggleEnable.svelte

diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 55a6bb80a6..f6054f7184 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -456,7 +456,8 @@
 		testStepStore,
 		saveDraft: () => {},
 		initialPath: '',
-		flowInputsStore: writable<FlowInput>({})
+		flowInputsStore: writable<FlowInput>({}),
+		customUi: {}
 	})
 
 	$: updateFlow($flowStore)
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 8649b9b146..72a83f02e1 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -35,7 +35,7 @@
 	import VariableEditor from '$lib/components/VariableEditor.svelte'
 	import { VariableService, type Policy } from '$lib/gen'
 	import { initHistory } from '$lib/history'
-	import { Component, Minus, Paintbrush, Plus } from 'lucide-svelte'
+	import { Component, Minus, Paintbrush, Plus, Smartphone } from 'lucide-svelte'
 	import { findGridItem, findGridItemParentGrid } from './appUtils'
 	import ComponentNavigation from './component/ComponentNavigation.svelte'
 	import CssSettings from './componentsPanel/CssSettings.svelte'
@@ -222,7 +222,10 @@
 
 	$: context.mode = $mode == 'dnd' ? 'editor' : 'viewer'
 
-	$: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full'
+	$: width =
+		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+			? 'min-w-[400px] max-w-[656px]'
+			: 'min-w-[710px] w-full'
 
 	let selectedTab: 'insert' | 'settings' | 'css' = 'insert'
 
@@ -670,6 +673,34 @@
 												<GridEditor {policy} />
 											</div>
 										{/if}
+										{#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
+											<div
+												class="absolute inset-0 flex bg-surface center-center z-10000 bg-opacity-60"
+											>
+												<div
+													class="bg-surface shadow-md rounded-md p-4 max-w-sm flex flex-col gap-2"
+												>
+													<div class="text-sm font-semibold"> Mobile View </div>
+													<div class="text-xs">
+														Enabling mobile view allows you to adjust component placement for
+														smaller screens.
+													</div>
+													<Button
+														color="light"
+														variant="border"
+														size="xs"
+														on:click={() => {
+															$appStore.mobileViewOnSmallerScreens = true
+														}}
+														startIcon={{
+															icon: Smartphone
+														}}
+													>
+														Add mobile view on smaller screens
+													</Button>
+												</div>
+											</div>
+										{/if}
 									</div>
 								</div>
 							</Pane>
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 0cff2b872f..dd3467df78 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -83,6 +83,7 @@
 	import { getDeleteInput } from '../components/display/dbtable/queries/delete'
 	import { collectOneOfFields } from './appUtils'
 	import Summary from '$lib/components/Summary.svelte'
+	import ToggleEnable from '$lib/components/common/toggleButton-v2/ToggleEnable.svelte'
 
 	async function hash(message) {
 		try {
@@ -1293,20 +1294,29 @@
 					/>
 				</ToggleButtonGroup>
 			{/if}
-			<div>
+			<div class="flex flex-row gap-2">
 				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
-					<ToggleButton
-						tooltip="Mobile View"
-						icon={Smartphone}
-						value="sm"
-						iconProps={{ size: 16 }}
-					/>
 					<ToggleButton
 						tooltip="Computer View"
 						icon={Laptop2}
-						value="lg"
+						value={'lg'}
 						iconProps={{ size: 16 }}
 					/>
+					<ToggleButton
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value={'sm'}
+						iconProps={{ size: 16 }}
+					/>
+					{#if $breakpoint === 'sm'}
+						<ToggleEnable
+							tooltip="Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view"
+							label="Enable mobile view for smaller screens"
+							bind:checked={$app.mobileViewOnSmallerScreens}
+							iconProps={{ size: 16 }}
+							iconOnly={false}
+						/>
+					{/if}
 				</ToggleButtonGroup>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index 0012a31843..74762ba031 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -153,7 +153,10 @@
 			.filter((x) => x != undefined) as string[]
 	}
 
-	$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]'
+	$: width =
+		$breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
+			? 'max-w-[640px]'
+			: 'w-full min-w-[768px]'
 	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 	function onThemeChange() {
 		$darkMode = document.documentElement.classList.contains('dark')
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 4ce6979aa5..aa19e57b6b 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -161,6 +161,7 @@ export type App = {
 	subgrids?: Record<string, GridItem[]>
 	theme: AppTheme | undefined
 	hideLegacyTopBar?: boolean | undefined
+	mobileViewOnSmallerScreens?: boolean | undefined
 }
 
 export type ConnectingInput = {
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleEnable.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleEnable.svelte
new file mode 100644
index 0000000000..54b5a44d3c
--- /dev/null
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleEnable.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Tab } from '@rgossiaux/svelte-headlessui'
+	import { twMerge } from 'tailwind-merge'
+
+	import Toggle from '$lib/components/Toggle.svelte'
+
+	export let label: string | undefined = undefined
+	export let tooltip: string | undefined = undefined
+	export let disabled: boolean = false
+	export let small = false
+	export let light = false
+	export let checked: boolean = false
+	export let id: string | undefined = undefined
+</script>
+
+<div {id} class="flex">
+	<Tab
+		{disabled}
+		class={twMerge(
+			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+			light ? 'font-medium' : '',
+			'bg-surface-secondary ',
+			$$props.class
+		)}
+	>
+		<Toggle
+			size="xs"
+			options={{
+				right: label,
+				rightTooltip: tooltip
+			}}
+			textClass="text-2xs whitespace-nowrap white !w-full"
+			bind:checked
+		/>
+	</Tab>
+</div>
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
index 9e5d9ed267..56c4ec8921 100644
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -143,6 +143,7 @@
 			setUpTopBarComponentContent(id, value)
 
 			value.hideLegacyTopBar = true
+			value.mobileViewOnSmallerScreens = false
 
 			value = value
 		}
diff --git a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
index b1fdf13279..b81f8d0710 100644
--- a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto, replaceState } from '$app/navigation'
+	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
@@ -66,7 +66,6 @@
 					goto(path)
 				}}
 				gotoFn={(path, opt) => {
-					console.log(path, opt)
 					goto(path, opt)
 				}}
 			/>
diff --git a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
index 9e90e19548..9c4fc9006c 100644
--- a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
+++ b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
@@ -18,7 +18,7 @@
 	import Login from '$lib/components/Login.svelte'
 	import { getUserExt } from '$lib/user'
 	import { User, UserRoundX } from 'lucide-svelte'
-	import { goto, replaceState } from '$app/navigation'
+	import { goto } from '$app/navigation'
 	import { sendUserToast } from '$lib/toast'
 
 	let app: (AppWithLastVersion & { value: any }) | undefined = undefined