From 1c2e89bb79a46fbd14de065cc1896f9caff85989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Wed, 28 Feb 2024 18:09:03 +0100
Subject: [PATCH] refactor: create layout groups

---
 src/lib/Spinner.svelte                        | 22 --------
 src/lib/TestCard.svelte                       |  8 +--
 .../+layout.svelte}                           |  3 ++
 src/routes/(fullscreen)/card/+page.svelte     |  5 ++
 .../mouse}/+page.svelte                       |  0
 src/routes/(pages)/+layout.svelte             | 50 +++++++++++++++++++
 src/routes/{ => (pages)}/+page.svelte         |  2 +-
 src/routes/{ => (pages)}/+page.ts             |  0
 .../audio/(channels)/+layout.svelte           |  0
 .../(channels)/channels-5.1/+page.svelte      |  0
 .../(channels)/channels-7.1/+page.svelte      |  0
 .../audio/(channels)/cycle-button.svelte      |  0
 .../audio/(channels)/speaker.svelte           |  0
 .../audio/(channels)/stereo-test.svelte       |  0
 src/routes/{ => (pages)}/audio/+layout.svelte |  0
 src/routes/{ => (pages)}/audio/+page.svelte   |  0
 src/routes/{ => (pages)}/audio/phase.svelte   |  0
 src/routes/{ => (pages)}/av-sync/+page.svelte |  0
 src/routes/{ => (pages)}/camera/+page.svelte  |  0
 src/routes/{ => (pages)}/gamepad/+page.svelte |  0
 .../{ => (pages)}/keyboard/+page.svelte       |  0
 .../microphone}/+page.svelte                  |  0
 src/routes/{ => (pages)}/sensors/+page.svelte |  0
 src/routes/+layout.svelte                     | 48 +-----------------
 src/routes/card/+page.ts                      |  7 ---
 src/routes/video/+page.svelte                 |  0
 26 files changed, 64 insertions(+), 81 deletions(-)
 delete mode 100644 src/lib/Spinner.svelte
 rename src/routes/{card/+page.svelte => (fullscreen)/+layout.svelte} (94%)
 create mode 100644 src/routes/(fullscreen)/card/+page.svelte
 rename src/routes/{microphone => (fullscreen)/mouse}/+page.svelte (100%)
 create mode 100644 src/routes/(pages)/+layout.svelte
 rename src/routes/{ => (pages)}/+page.svelte (96%)
 rename src/routes/{ => (pages)}/+page.ts (100%)
 rename src/routes/{ => (pages)}/audio/(channels)/+layout.svelte (100%)
 rename src/routes/{ => (pages)}/audio/(channels)/channels-5.1/+page.svelte (100%)
 rename src/routes/{ => (pages)}/audio/(channels)/channels-7.1/+page.svelte (100%)
 rename src/routes/{ => (pages)}/audio/(channels)/cycle-button.svelte (100%)
 rename src/routes/{ => (pages)}/audio/(channels)/speaker.svelte (100%)
 rename src/routes/{ => (pages)}/audio/(channels)/stereo-test.svelte (100%)
 rename src/routes/{ => (pages)}/audio/+layout.svelte (100%)
 rename src/routes/{ => (pages)}/audio/+page.svelte (100%)
 rename src/routes/{ => (pages)}/audio/phase.svelte (100%)
 rename src/routes/{ => (pages)}/av-sync/+page.svelte (100%)
 rename src/routes/{ => (pages)}/camera/+page.svelte (100%)
 rename src/routes/{ => (pages)}/gamepad/+page.svelte (100%)
 rename src/routes/{ => (pages)}/keyboard/+page.svelte (100%)
 rename src/routes/{mouse => (pages)/microphone}/+page.svelte (100%)
 rename src/routes/{ => (pages)}/sensors/+page.svelte (100%)
 delete mode 100644 src/routes/card/+page.ts
 delete mode 100644 src/routes/video/+page.svelte

diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
deleted file mode 100644
index 9c56791..0000000
--- a/src/lib/Spinner.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-	import { IconSpiral } from '@tabler/icons-svelte';
-	export let size = 32;
-</script>
-
-<div class="spinner"><IconSpiral {size} class="spinner-icon" /></div>
-
-<style>
-	.spinner {
-		text-align: center;
-	}
-
-	:global(.spinner-icon) {
-		animation: spin 1s linear infinite;
-	}
-
-	@keyframes spin {
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-</style>
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index 1d9016f..8a04d59 100644
--- a/src/lib/TestCard.svelte
+++ b/src/lib/TestCard.svelte
@@ -7,7 +7,7 @@
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher<{ focus: void }>();
 
-	export let full = false;
+	export let bg = false;
 
 	let sizes = {
 		blockSize: 64,
@@ -28,7 +28,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="test-card"
-	class:full
+	class:bg
 	style="--block-size: {sizes.blockSize}px;
 				 --horizontal-margin: {sizes.horizontalMargin}px;
 				 --vertical-margin: {sizes.verticalMargin}px;
@@ -38,7 +38,7 @@
          --left-column: {leftColumn};"
 	on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
 >
-	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
+	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
 
 	<div class="axes">
 		<Axes />
@@ -141,7 +141,7 @@
 		}
 	}
 
-	.test-card:not(.full) {
+	.test-card.bg {
 		& .info,
 		& .column,
 		& .axes,
diff --git a/src/routes/card/+page.svelte b/src/routes/(fullscreen)/+layout.svelte
similarity index 94%
rename from src/routes/card/+page.svelte
rename to src/routes/(fullscreen)/+layout.svelte
index 8c6400f..b2cdd7e 100644
--- a/src/routes/card/+page.svelte
+++ b/src/routes/(fullscreen)/+layout.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> {$i18n.t('Back')}</a>
+<slot />
 
 <style>
 	a {
@@ -22,5 +23,7 @@
 		align-items: center;
 
 		text-decoration: none;
+
+		z-index: 99;
 	}
 </style>
diff --git a/src/routes/(fullscreen)/card/+page.svelte b/src/routes/(fullscreen)/card/+page.svelte
new file mode 100644
index 0000000..eb7b750
--- /dev/null
+++ b/src/routes/(fullscreen)/card/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import TestCard from '$lib/TestCard.svelte';
+</script>
+
+<TestCard />
diff --git a/src/routes/microphone/+page.svelte b/src/routes/(fullscreen)/mouse/+page.svelte
similarity index 100%
rename from src/routes/microphone/+page.svelte
rename to src/routes/(fullscreen)/mouse/+page.svelte
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte
new file mode 100644
index 0000000..136a390
--- /dev/null
+++ b/src/routes/(pages)/+layout.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import TestCard from '$lib/TestCard.svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { i18n } from '$lib/i18n';
+</script>
+
+<TestCard bg on:focus={() => goto('/card')} />
+<main class:sub={!$page.data.root}>
+	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
+	<slot />
+</main>
+
+<style>
+	main {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgba(0, 0, 0, 0.8);
+		border-radius: 0.5rem;
+		border: 1px solid white;
+
+		padding: 1rem;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	main.sub {
+		height: 90vh;
+		width: 90vw;
+	}
+
+	.button-back {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		opacity: 0.66;
+		transition: opacity 0.3s;
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	main:not(.sub) .button-back {
+		display: none;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/(pages)/+page.svelte
similarity index 96%
rename from src/routes/+page.svelte
rename to src/routes/(pages)/+page.svelte
index c4cde9c..9ac1bc0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/(pages)/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { version } from '../../package.json';
+	import { version } from '../../../package.json';
 	import { i18n } from '$lib/i18n';
 </script>
 
diff --git a/src/routes/+page.ts b/src/routes/(pages)/+page.ts
similarity index 100%
rename from src/routes/+page.ts
rename to src/routes/(pages)/+page.ts
diff --git a/src/routes/audio/(channels)/+layout.svelte b/src/routes/(pages)/audio/(channels)/+layout.svelte
similarity index 100%
rename from src/routes/audio/(channels)/+layout.svelte
rename to src/routes/(pages)/audio/(channels)/+layout.svelte
diff --git a/src/routes/audio/(channels)/channels-5.1/+page.svelte b/src/routes/(pages)/audio/(channels)/channels-5.1/+page.svelte
similarity index 100%
rename from src/routes/audio/(channels)/channels-5.1/+page.svelte
rename to src/routes/(pages)/audio/(channels)/channels-5.1/+page.svelte
diff --git a/src/routes/audio/(channels)/channels-7.1/+page.svelte b/src/routes/(pages)/audio/(channels)/channels-7.1/+page.svelte
similarity index 100%
rename from src/routes/audio/(channels)/channels-7.1/+page.svelte
rename to src/routes/(pages)/audio/(channels)/channels-7.1/+page.svelte
diff --git a/src/routes/audio/(channels)/cycle-button.svelte b/src/routes/(pages)/audio/(channels)/cycle-button.svelte
similarity index 100%
rename from src/routes/audio/(channels)/cycle-button.svelte
rename to src/routes/(pages)/audio/(channels)/cycle-button.svelte
diff --git a/src/routes/audio/(channels)/speaker.svelte b/src/routes/(pages)/audio/(channels)/speaker.svelte
similarity index 100%
rename from src/routes/audio/(channels)/speaker.svelte
rename to src/routes/(pages)/audio/(channels)/speaker.svelte
diff --git a/src/routes/audio/(channels)/stereo-test.svelte b/src/routes/(pages)/audio/(channels)/stereo-test.svelte
similarity index 100%
rename from src/routes/audio/(channels)/stereo-test.svelte
rename to src/routes/(pages)/audio/(channels)/stereo-test.svelte
diff --git a/src/routes/audio/+layout.svelte b/src/routes/(pages)/audio/+layout.svelte
similarity index 100%
rename from src/routes/audio/+layout.svelte
rename to src/routes/(pages)/audio/+layout.svelte
diff --git a/src/routes/audio/+page.svelte b/src/routes/(pages)/audio/+page.svelte
similarity index 100%
rename from src/routes/audio/+page.svelte
rename to src/routes/(pages)/audio/+page.svelte
diff --git a/src/routes/audio/phase.svelte b/src/routes/(pages)/audio/phase.svelte
similarity index 100%
rename from src/routes/audio/phase.svelte
rename to src/routes/(pages)/audio/phase.svelte
diff --git a/src/routes/av-sync/+page.svelte b/src/routes/(pages)/av-sync/+page.svelte
similarity index 100%
rename from src/routes/av-sync/+page.svelte
rename to src/routes/(pages)/av-sync/+page.svelte
diff --git a/src/routes/camera/+page.svelte b/src/routes/(pages)/camera/+page.svelte
similarity index 100%
rename from src/routes/camera/+page.svelte
rename to src/routes/(pages)/camera/+page.svelte
diff --git a/src/routes/gamepad/+page.svelte b/src/routes/(pages)/gamepad/+page.svelte
similarity index 100%
rename from src/routes/gamepad/+page.svelte
rename to src/routes/(pages)/gamepad/+page.svelte
diff --git a/src/routes/keyboard/+page.svelte b/src/routes/(pages)/keyboard/+page.svelte
similarity index 100%
rename from src/routes/keyboard/+page.svelte
rename to src/routes/(pages)/keyboard/+page.svelte
diff --git a/src/routes/mouse/+page.svelte b/src/routes/(pages)/microphone/+page.svelte
similarity index 100%
rename from src/routes/mouse/+page.svelte
rename to src/routes/(pages)/microphone/+page.svelte
diff --git a/src/routes/sensors/+page.svelte b/src/routes/(pages)/sensors/+page.svelte
similarity index 100%
rename from src/routes/sensors/+page.svelte
rename to src/routes/(pages)/sensors/+page.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 97bbb08..9a771c5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,11 +4,7 @@
 	import '@fontsource/b612/700.css';
 	import '@tabler/icons-webfont/tabler-icons.css';
 	import '../index.css';
-	import TestCard from '$lib/TestCard.svelte';
-	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
-	import { i18n } from '$lib/i18n';
 
 	let idleTimeout: NodeJS.Timeout | undefined;
 	onMount(() => {
@@ -20,53 +16,11 @@
 			}, 3000);
 		});
 	});
-
-	$: onlyCard = $page.data.card;
 </script>
 
-<TestCard full={onlyCard} on:focus={() => goto('/card')} />
-<main class:content={!onlyCard} class:sub={!$page.data.root && !onlyCard}>
-	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
-	<slot />
-</main>
+<slot />
 
 <style>
-	main.content {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background: rgba(0, 0, 0, 0.8);
-		border-radius: 0.5rem;
-		border: 1px solid white;
-
-		padding: 1rem;
-
-		display: flex;
-		flex-direction: column;
-	}
-
-	main.sub {
-		height: 90vh;
-		width: 90vw;
-	}
-
-	.button-back {
-		position: absolute;
-		top: 1rem;
-		right: 1rem;
-
-		opacity: 0.66;
-		transition: opacity 0.3s;
-		&:hover {
-			opacity: 1;
-		}
-	}
-
-	main:not(.sub) .button-back {
-		display: none;
-	}
-
 	:global(.hide-idle) {
 		transition: opacity 1s;
 		opacity: 1;
diff --git a/src/routes/card/+page.ts b/src/routes/card/+page.ts
deleted file mode 100644
index f5def39..0000000
--- a/src/routes/card/+page.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = () => {
-	return {
-		card: true
-	};
-};
diff --git a/src/routes/video/+page.svelte b/src/routes/video/+page.svelte
deleted file mode 100644
index e69de29..0000000