From d62ba6f7b15f1f46a20d4ea19ac813b5bdd9c209 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:59:52 -0500
Subject: [PATCH 1/6] Added support for blank placeholder spaces.

---
 src/lib/Main/Content.svelte            |   3 +
 src/lib/Main/Placeholder.svelte        | 123 +++++++++++++++++++++++++
 src/lib/Modal/MainItemConfig.svelte    |  12 +++
 src/lib/Modal/PlaceholderConfig.svelte |  29 ++++++
 src/lib/Types.ts                       |   4 +
 5 files changed, 171 insertions(+)
 create mode 100644 src/lib/Main/Placeholder.svelte
 create mode 100644 src/lib/Modal/PlaceholderConfig.svelte

diff --git a/src/lib/Main/Content.svelte b/src/lib/Main/Content.svelte
index 9d71a647..e89882d0 100644
--- a/src/lib/Main/Content.svelte
+++ b/src/lib/Main/Content.svelte
@@ -4,6 +4,7 @@
 	import Media from '$lib/Main/Media.svelte';
 	import Camera from '$lib/Main/Camera.svelte';
 	import Configure from '$lib/Main/Configure.svelte';
+	import Placeholder from '$lib/Main/Placeholder.svelte';
 
 	export let item: any;
 	export let sectionName: string | undefined = undefined;
@@ -21,6 +22,8 @@
 	<Media sel={item} />
 {:else if item?.type === 'camera'}
 	<Camera sel={item} />
+{:else if item?.type === 'placeholder'}
+	<Placeholder sel={item} />
 {/if}
 
 <style>
diff --git a/src/lib/Main/Placeholder.svelte b/src/lib/Main/Placeholder.svelte
new file mode 100644
index 00000000..87adf4fd
--- /dev/null
+++ b/src/lib/Main/Placeholder.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { editMode, itemHeight, ripple } from '$lib/Stores';
+	import { openModal } from 'svelte-modals';
+	import Ripple from 'svelte-ripple';
+
+	export let sel: any;
+
+	let container: HTMLDivElement;
+
+	/**
+	 * Delegate to handleEvent
+	 */
+	function handlePointer() {
+		handleEvent({ type: 'preload' });
+	}
+
+	/**
+	 * handleEvent
+	 * pointerenter | pointerdown | click
+	 */
+	async function handleEvent(event: any) {
+		if (event.type === 'click') {
+			await handleClickEvent();
+		} else {
+			await handlePointerEvent();
+		}
+	}
+
+	/**
+	 * Handle click events
+	 * Opens modal for specified domain
+	 */
+	async function handleClickEvent() {
+		if ($editMode) {
+			console.log('clicked Event in edit');
+			openModal(() => import('$lib/Modal/PlaceholderConfig.svelte'), { sel });
+		}
+	}
+
+	/**
+	 * Preloads module before click event
+	 */
+	async function handlePointerEvent() {
+		let module;
+
+		if ($editMode) {
+			module = await import('$lib/Modal/Unknown.svelte');
+		}
+		if (module) module.default;
+	}
+</script>
+
+{#if $editMode}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		on:click|stopPropagation={handleEvent}
+		class="container edit-mode"
+		bind:this={container}
+		tabindex="-1"
+		style={!$editMode ? 'cursor: pointer;' : ''}
+		style:height="{$itemHeight}px"
+		on:pointerenter={handlePointer}
+		on:pointerdown={handlePointer}
+		use:Ripple={{ ...$ripple, color: !$editMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0)' }}
+	>
+		<div class="contents" style:height="{$itemHeight}px">Placeholder</div>
+	</div>
+{:else}
+	<div
+		class="container no-visible"
+		bind:this={container}
+		tabindex="-1"
+		style:height="{$itemHeight}px"
+		on:pointerenter={handlePointer}
+		on:pointerdown={handlePointer}
+	></div>
+{/if}
+
+<style>
+	.no-visible {
+		background-color: var(--theme-button-background-color-off);
+		opacity: 0;
+		font-family: inherit;
+		width: 14.5rem;
+		/* display: grid; */
+		border-radius: 0.65rem;
+		margin: 0;
+		/* grid-template-columns: min-content auto;
+		grid-auto-flow: row;
+		grid-template-areas: 'left right'; */
+		/* --container-padding: 0.8rem; */
+
+		/* fix ripple */
+		transform: translateZ(0);
+		overflow: hidden;
+	}
+
+	.edit-mode {
+		background-color: var(--theme-button-background-color-off);
+		font-family: inherit;
+		width: '100%';
+		border-radius: 0.65rem;
+		margin: 0;
+	}
+
+	.contents {
+		display: grid;
+		align-items: center;
+		text-align: center;
+		font-weight: 500;
+		color: inherit;
+		color: var(--theme-button-name-color-off);
+		font-size: var(--sidebar-font-size);
+	}
+
+	/* Phone and Tablet (portrait) */
+	@media all and (max-width: 768px) {
+		.container {
+			width: calc(50vw - 1.45rem);
+		}
+	}
+</style>
diff --git a/src/lib/Modal/MainItemConfig.svelte b/src/lib/Modal/MainItemConfig.svelte
index 97e90c20..eb363f03 100644
--- a/src/lib/Modal/MainItemConfig.svelte
+++ b/src/lib/Modal/MainItemConfig.svelte
@@ -11,6 +11,7 @@
 
 	import Button from '$lib/Main/Button.svelte';
 	import Camera from '$lib/Main/Camera.svelte';
+	import Placeholder from '$lib/Main/Placeholder.svelte';
 	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
 	import Ripple from 'svelte-ripple';
 
@@ -64,6 +65,14 @@
 				demo: $demo.camera,
 				sel
 			}
+		},
+		{
+			id: 'placeholder',
+			type: $lang('placeholder'),
+			component: Placeholder,
+			props: {
+				sel
+			}
 		}
 		// {
 		// 	id: 'media',
@@ -98,6 +107,9 @@
 					sel
 				});
 				break;
+			case 'placeholder':
+				openModal(() => import('$lib/Modal/PlaceholderConfig.svelte'), { sel });
+				break;
 			default:
 				openModal(() => import('$lib/Modal/MainItemConfig.svelte'), { sel });
 		}
diff --git a/src/lib/Modal/PlaceholderConfig.svelte b/src/lib/Modal/PlaceholderConfig.svelte
new file mode 100644
index 00000000..6cb43c21
--- /dev/null
+++ b/src/lib/Modal/PlaceholderConfig.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { record, lang } from '$lib/Stores';
+	import { onDestroy } from 'svelte';
+	import type { PlaceholderItem } from '$lib/Types';
+	import Modal from '$lib/Modal/Index.svelte';
+	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
+	import Placeholder from '$lib/Main/Placeholder.svelte';
+
+	export let isOpen: boolean;
+	export let sel: PlaceholderItem;
+
+	onDestroy(() => $record());
+</script>
+
+{#if isOpen}
+	<Modal>
+		<h1 slot="title">{$lang('placeholder')}</h1>
+		<h2>{$lang('preview')}</h2>
+
+		<div style:pointer-events="none">
+			<Placeholder {sel} />
+		</div>
+
+		<ConfigButtons {sel} />
+	</Modal>
+{/if}
+
+<style>
+</style>
diff --git a/src/lib/Types.ts b/src/lib/Types.ts
index b181aa20..eb604a5e 100644
--- a/src/lib/Types.ts
+++ b/src/lib/Types.ts
@@ -57,6 +57,10 @@ export interface ViewItem {
 	sections?: any[];
 }
 
+export interface PlaceholderItem {
+	id?: number;
+}
+
 export interface ButtonItem {
 	type?: string;
 	id?: number;

From 8893c56808271b3fb06cac59b36ff121751bd981 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@users.noreply.github.com>
Date: Mon, 29 Jan 2024 23:02:50 -0500
Subject: [PATCH 2/6] Fixed hardcoded string value.

---
 src/lib/Main/Placeholder.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/Main/Placeholder.svelte b/src/lib/Main/Placeholder.svelte
index 87adf4fd..43c6e6a3 100644
--- a/src/lib/Main/Placeholder.svelte
+++ b/src/lib/Main/Placeholder.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { editMode, itemHeight, ripple } from '$lib/Stores';
+	import { editMode, itemHeight, ripple, lang } from '$lib/Stores';
 	import { openModal } from 'svelte-modals';
 	import Ripple from 'svelte-ripple';
 
@@ -64,7 +64,7 @@
 		on:pointerdown={handlePointer}
 		use:Ripple={{ ...$ripple, color: !$editMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0)' }}
 	>
-		<div class="contents" style:height="{$itemHeight}px">Placeholder</div>
+		<div class="contents" style:height="{$itemHeight}px">{$lang('placeholder')}</div>
 	</div>
 {:else}
 	<div

From b2fa031daf71cd0d7c4b6cb46eeb38d42d404954 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@users.noreply.github.com>
Date: Mon, 29 Jan 2024 23:06:17 -0500
Subject: [PATCH 3/6] Fixed commented CSS

---
 src/lib/Main/Placeholder.svelte | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/lib/Main/Placeholder.svelte b/src/lib/Main/Placeholder.svelte
index 43c6e6a3..1aaae61e 100644
--- a/src/lib/Main/Placeholder.svelte
+++ b/src/lib/Main/Placeholder.svelte
@@ -83,17 +83,8 @@
 		opacity: 0;
 		font-family: inherit;
 		width: 14.5rem;
-		/* display: grid; */
 		border-radius: 0.65rem;
 		margin: 0;
-		/* grid-template-columns: min-content auto;
-		grid-auto-flow: row;
-		grid-template-areas: 'left right'; */
-		/* --container-padding: 0.8rem; */
-
-		/* fix ripple */
-		transform: translateZ(0);
-		overflow: hidden;
 	}
 
 	.edit-mode {

From e3581509d0ae5d014473daa482b3f01ee7411159 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@users.noreply.github.com>
Date: Wed, 31 Jan 2024 20:04:30 -0500
Subject: [PATCH 4/6] refactored to internal empty, moved to white style and
 remove title during editing.

---
 src/lib/Main/Content.svelte                   |  6 ++---
 .../Main/{Placeholder.svelte => Empty.svelte} | 25 +++++--------------
 ...holderConfig.svelte => EmptyConfig.svelte} | 10 ++++----
 src/lib/Modal/MainItemConfig.svelte           | 12 ++++-----
 src/lib/Types.ts                              |  2 +-
 5 files changed, 21 insertions(+), 34 deletions(-)
 rename src/lib/Main/{Placeholder.svelte => Empty.svelte} (79%)
 rename src/lib/Modal/{PlaceholderConfig.svelte => EmptyConfig.svelte} (67%)

diff --git a/src/lib/Main/Content.svelte b/src/lib/Main/Content.svelte
index e89882d0..26b5177d 100644
--- a/src/lib/Main/Content.svelte
+++ b/src/lib/Main/Content.svelte
@@ -4,7 +4,7 @@
 	import Media from '$lib/Main/Media.svelte';
 	import Camera from '$lib/Main/Camera.svelte';
 	import Configure from '$lib/Main/Configure.svelte';
-	import Placeholder from '$lib/Main/Placeholder.svelte';
+	import Empty from '$lib/Main/Empty.svelte';
 
 	export let item: any;
 	export let sectionName: string | undefined = undefined;
@@ -22,8 +22,8 @@
 	<Media sel={item} />
 {:else if item?.type === 'camera'}
 	<Camera sel={item} />
-{:else if item?.type === 'placeholder'}
-	<Placeholder sel={item} />
+{:else if item?.type === 'empty'}
+	<Empty sel={item} />
 {/if}
 
 <style>
diff --git a/src/lib/Main/Placeholder.svelte b/src/lib/Main/Empty.svelte
similarity index 79%
rename from src/lib/Main/Placeholder.svelte
rename to src/lib/Main/Empty.svelte
index 1aaae61e..ee97ecf1 100644
--- a/src/lib/Main/Placeholder.svelte
+++ b/src/lib/Main/Empty.svelte
@@ -33,7 +33,7 @@
 	async function handleClickEvent() {
 		if ($editMode) {
 			console.log('clicked Event in edit');
-			openModal(() => import('$lib/Modal/PlaceholderConfig.svelte'), { sel });
+			openModal(() => import('$lib/Modal/EmptyConfig.svelte'), { sel });
 		}
 	}
 
@@ -63,9 +63,7 @@
 		on:pointerenter={handlePointer}
 		on:pointerdown={handlePointer}
 		use:Ripple={{ ...$ripple, color: !$editMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0)' }}
-	>
-		<div class="contents" style:height="{$itemHeight}px">{$lang('placeholder')}</div>
-	</div>
+	></div>
 {:else}
 	<div
 		class="container no-visible"
@@ -88,21 +86,10 @@
 	}
 
 	.edit-mode {
-		background-color: var(--theme-button-background-color-off);
-		font-family: inherit;
-		width: '100%';
-		border-radius: 0.65rem;
-		margin: 0;
-	}
-
-	.contents {
-		display: grid;
-		align-items: center;
-		text-align: center;
-		font-weight: 500;
-		color: inherit;
-		color: var(--theme-button-name-color-off);
-		font-size: var(--sidebar-font-size);
+		border-radius: 0.6rem;
+		background-color: rgba(255, 255, 255, 0.25);
+		outline: 2px dashed #fff;
+		outline-offset: -2px;
 	}
 
 	/* Phone and Tablet (portrait) */
diff --git a/src/lib/Modal/PlaceholderConfig.svelte b/src/lib/Modal/EmptyConfig.svelte
similarity index 67%
rename from src/lib/Modal/PlaceholderConfig.svelte
rename to src/lib/Modal/EmptyConfig.svelte
index 6cb43c21..3c248403 100644
--- a/src/lib/Modal/PlaceholderConfig.svelte
+++ b/src/lib/Modal/EmptyConfig.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
 	import { record, lang } from '$lib/Stores';
 	import { onDestroy } from 'svelte';
-	import type { PlaceholderItem } from '$lib/Types';
+	import type { EmptyItem } from '$lib/Types';
 	import Modal from '$lib/Modal/Index.svelte';
 	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
-	import Placeholder from '$lib/Main/Placeholder.svelte';
+	import Empty from '$lib/Main/Empty.svelte';
 
 	export let isOpen: boolean;
-	export let sel: PlaceholderItem;
+	export let sel: EmptyItem;
 
 	onDestroy(() => $record());
 </script>
 
 {#if isOpen}
 	<Modal>
-		<h1 slot="title">{$lang('placeholder')}</h1>
+		<h1 slot="title">{$lang('empty')}</h1>
 		<h2>{$lang('preview')}</h2>
 
 		<div style:pointer-events="none">
-			<Placeholder {sel} />
+			<Empty {sel} />
 		</div>
 
 		<ConfigButtons {sel} />
diff --git a/src/lib/Modal/MainItemConfig.svelte b/src/lib/Modal/MainItemConfig.svelte
index eb363f03..43891cf6 100644
--- a/src/lib/Modal/MainItemConfig.svelte
+++ b/src/lib/Modal/MainItemConfig.svelte
@@ -11,7 +11,7 @@
 
 	import Button from '$lib/Main/Button.svelte';
 	import Camera from '$lib/Main/Camera.svelte';
-	import Placeholder from '$lib/Main/Placeholder.svelte';
+	import Empty from '$lib/Main/Empty.svelte';
 	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
 	import Ripple from 'svelte-ripple';
 
@@ -67,9 +67,9 @@
 			}
 		},
 		{
-			id: 'placeholder',
-			type: $lang('placeholder'),
-			component: Placeholder,
+			id: 'empty',
+			type: $lang('empty'),
+			component: Empty,
 			props: {
 				sel
 			}
@@ -107,8 +107,8 @@
 					sel
 				});
 				break;
-			case 'placeholder':
-				openModal(() => import('$lib/Modal/PlaceholderConfig.svelte'), { sel });
+			case 'empty':
+				openModal(() => import('$lib/Modal/EmptyConfig.svelte'), { sel });
 				break;
 			default:
 				openModal(() => import('$lib/Modal/MainItemConfig.svelte'), { sel });
diff --git a/src/lib/Types.ts b/src/lib/Types.ts
index eb604a5e..fc4c369c 100644
--- a/src/lib/Types.ts
+++ b/src/lib/Types.ts
@@ -57,7 +57,7 @@ export interface ViewItem {
 	sections?: any[];
 }
 
-export interface PlaceholderItem {
+export interface EmptyItem {
 	id?: number;
 }
 

From 04819c8462c921aa267093b9de329bff7f472b92 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@users.noreply.github.com>
Date: Thu, 1 Feb 2024 04:08:11 -0500
Subject: [PATCH 5/6] Update src/lib/Modal/EmptyConfig.svelte

Co-authored-by: Mattias Persson <36163594+matt8707@users.noreply.github.com>
---
 src/lib/Modal/EmptyConfig.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/Modal/EmptyConfig.svelte b/src/lib/Modal/EmptyConfig.svelte
index 3c248403..55dba7b2 100644
--- a/src/lib/Modal/EmptyConfig.svelte
+++ b/src/lib/Modal/EmptyConfig.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { record, lang } from '$lib/Stores';
-	import { onDestroy } from 'svelte';
+	import { lang } from '$lib/Stores';
 	import type { EmptyItem } from '$lib/Types';
 	import Modal from '$lib/Modal/Index.svelte';
 	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
@@ -8,8 +7,6 @@
 
 	export let isOpen: boolean;
 	export let sel: EmptyItem;
-
-	onDestroy(() => $record());
 </script>
 
 {#if isOpen}
@@ -17,7 +14,7 @@
 		<h1 slot="title">{$lang('empty')}</h1>
 		<h2>{$lang('preview')}</h2>
 
-		<div style:pointer-events="none">
+		<div>
 			<Empty {sel} />
 		</div>
 
@@ -26,4 +23,8 @@
 {/if}
 
 <style>
+	div {
+		pointer-events: none;
+	}
 </style>
+

From 4e2094f92472cc1fb9c61ff3b2d7e17b68ec1885 Mon Sep 17 00:00:00 2001
From: Eric Rolf <xrolfex@users.noreply.github.com>
Date: Thu, 1 Feb 2024 04:08:26 -0500
Subject: [PATCH 6/6] Update src/lib/Main/Empty.svelte

Co-authored-by: Mattias Persson <36163594+matt8707@users.noreply.github.com>
---
 src/lib/Main/Empty.svelte | 87 +++++++--------------------------------
 1 file changed, 15 insertions(+), 72 deletions(-)

diff --git a/src/lib/Main/Empty.svelte b/src/lib/Main/Empty.svelte
index ee97ecf1..57abc285 100644
--- a/src/lib/Main/Empty.svelte
+++ b/src/lib/Main/Empty.svelte
@@ -1,93 +1,35 @@
 <script lang="ts">
-	import { editMode, itemHeight, ripple, lang } from '$lib/Stores';
+	import { editMode, itemHeight, motion } from '$lib/Stores';
 	import { openModal } from 'svelte-modals';
-	import Ripple from 'svelte-ripple';
 
 	export let sel: any;
 
-	let container: HTMLDivElement;
-
-	/**
-	 * Delegate to handleEvent
-	 */
-	function handlePointer() {
-		handleEvent({ type: 'preload' });
-	}
-
 	/**
-	 * handleEvent
-	 * pointerenter | pointerdown | click
+	 * Handle click
 	 */
-	async function handleEvent(event: any) {
-		if (event.type === 'click') {
-			await handleClickEvent();
-		} else {
-			await handlePointerEvent();
-		}
-	}
-
-	/**
-	 * Handle click events
-	 * Opens modal for specified domain
-	 */
-	async function handleClickEvent() {
+	async function handleClick() {
 		if ($editMode) {
-			console.log('clicked Event in edit');
 			openModal(() => import('$lib/Modal/EmptyConfig.svelte'), { sel });
 		}
 	}
-
-	/**
-	 * Preloads module before click event
-	 */
-	async function handlePointerEvent() {
-		let module;
-
-		if ($editMode) {
-			module = await import('$lib/Modal/Unknown.svelte');
-		}
-		if (module) module.default;
-	}
 </script>
 
-{#if $editMode}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		on:click|stopPropagation={handleEvent}
-		class="container edit-mode"
-		bind:this={container}
-		tabindex="-1"
-		style={!$editMode ? 'cursor: pointer;' : ''}
-		style:height="{$itemHeight}px"
-		on:pointerenter={handlePointer}
-		on:pointerdown={handlePointer}
-		use:Ripple={{ ...$ripple, color: !$editMode ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0)' }}
-	></div>
-{:else}
-	<div
-		class="container no-visible"
-		bind:this={container}
-		tabindex="-1"
-		style:height="{$itemHeight}px"
-		on:pointerenter={handlePointer}
-		on:pointerdown={handlePointer}
-	></div>
-{/if}
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	on:click={handleClick}
+	class="container"
+	style:height="{$itemHeight}px"
+	style:opacity={$editMode ? '1' : '0'}
+	style:transition="opacity {$motion}ms ease"
+/>
 
 <style>
-	.no-visible {
-		background-color: var(--theme-button-background-color-off);
-		opacity: 0;
-		font-family: inherit;
+	.container {
 		width: 14.5rem;
+		background-color: rgba(255, 255, 255, 0.25);
 		border-radius: 0.65rem;
 		margin: 0;
-	}
-
-	.edit-mode {
-		border-radius: 0.6rem;
-		background-color: rgba(255, 255, 255, 0.25);
 		outline: 2px dashed #fff;
 		outline-offset: -2px;
 	}
@@ -99,3 +41,4 @@
 		}
 	}
 </style>
+