From 21ed03960b833475c349feb9416690f631a443f1 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Mon, 10 Feb 2025 19:24:59 +0300
Subject: [PATCH] chore: componetize stuff in +layout.svelte

---
 .../{visual => layout}/Footer.svelte          |  19 +-
 src/lib/components/layout/Gradients.svelte    |  71 ++++++
 src/lib/components/layout/MobileLogo.svelte   |  18 ++
 .../Navbar/Base.svelte}                       |  66 ++++-
 .../components/layout/Navbar/Desktop.svelte   |   7 +
 .../components/layout/Navbar/Mobile.svelte    |   9 +
 src/lib/components/layout/Navbar/index.ts     |   2 +
 src/lib/components/layout/PageContent.svelte  |  44 ++++
 src/lib/components/layout/index.ts            |   4 +
 src/lib/store/index.svelte.ts                 |   1 +
 src/routes/+layout.svelte                     | 238 ++----------------
 11 files changed, 243 insertions(+), 236 deletions(-)
 rename src/lib/components/{visual => layout}/Footer.svelte (63%)
 create mode 100644 src/lib/components/layout/Gradients.svelte
 create mode 100644 src/lib/components/layout/MobileLogo.svelte
 rename src/lib/components/{functional/Navbar.svelte => layout/Navbar/Base.svelte} (74%)
 create mode 100644 src/lib/components/layout/Navbar/Desktop.svelte
 create mode 100644 src/lib/components/layout/Navbar/Mobile.svelte
 create mode 100644 src/lib/components/layout/Navbar/index.ts
 create mode 100644 src/lib/components/layout/PageContent.svelte
 create mode 100644 src/lib/components/layout/index.ts

diff --git a/src/lib/components/visual/Footer.svelte b/src/lib/components/layout/Footer.svelte
similarity index 63%
rename from src/lib/components/visual/Footer.svelte
rename to src/lib/components/layout/Footer.svelte
index 58fe494..40bb5d6 100644
--- a/src/lib/components/visual/Footer.svelte
+++ b/src/lib/components/layout/Footer.svelte
@@ -1,22 +1,23 @@
 <script lang="ts">
-	type Props = {
-		class: string;
-		items: { [name: string]: string };
-	};
+	import { GITHUB_URL_VERT, DISCORD_URL } from "$lib/consts";
 
-	const { class: classList, items }: Props = $props();
+	const items = Object.entries({
+		//"Privacy policy": "#",
+		"Source code": GITHUB_URL_VERT,
+		"Discord server": DISCORD_URL,
+	});
 
 	const year = new Date().getFullYear();
-
-	const links = $derived(Object.entries(items));
 </script>
 
-<footer class={classList}>
+<footer
+	class="hidden md:block w-full h-14 border-t border-separator fixed bottom-0 mt-12"
+>
 	<div
 		class="w-full h-full flex items-center justify-center text-muted gap-3 relative"
 	>
 		<p>© {year} VERT.</p>
-		{#each links as [name, url] (name)}
+		{#each items as [name, url] (name)}
 			<!-- bullet point -->
 			<p>•</p>
 			<a
diff --git a/src/lib/components/layout/Gradients.svelte b/src/lib/components/layout/Gradients.svelte
new file mode 100644
index 0000000..c62e77b
--- /dev/null
+++ b/src/lib/components/layout/Gradients.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { duration } from "$lib/animation";
+	import VertVBig from "$lib/assets/vert-bg.svg?component";
+	import { files, gradientColor, showGradient } from "$lib/store/index.svelte";
+	import { quintOut } from "svelte/easing";
+	import { fade } from "svelte/transition";
+</script>
+
+{#if page.url.pathname === "/"}
+	<div
+		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
+	>
+		<VertVBig
+			class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
+		/>
+	</div>
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient);"
+	></div>
+{:else if page.url.pathname === "/convert" && $showGradient}
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
+	></div>
+{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
+	<div
+		class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
+	>
+		<div
+			class="w-full relative"
+			transition:fade={{
+				duration,
+				easing: quintOut,
+			}}
+		>
+			<img
+				class="object-cover w-full h-full blur-md"
+				src={files.files[0].blobUrl}
+				alt={files.files[0].name}
+			/>
+			<div
+				class="absolute top-0 left-0 w-full h-full"
+				style="background: var(--bg-gradient-image);"
+			></div>
+			<!-- <div class="absolute bottom-0 left-0 w-full h-full">
+				<ProgressiveBlur
+					direction="bottom"
+					endIntensity={256}
+					iterations={8}
+					fadeTo="var(--bg)"
+				/>
+			</div> -->
+		</div>
+	</div>
+{:else if page.url.pathname === "/settings"}
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-blue);"
+	></div>
+{:else if page.url.pathname === "/about"}
+	<div
+		id="gradient-bg"
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-pink);"
+	></div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/layout/MobileLogo.svelte b/src/lib/components/layout/MobileLogo.svelte
new file mode 100644
index 0000000..1336c6c
--- /dev/null
+++ b/src/lib/components/layout/MobileLogo.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Logo from "$lib/components/visual/svg/Logo.svelte";
+</script>
+
+<div class="flex md:hidden justify-center items-center pb-8 pt-4">
+    <a
+        class="flex items-center justify-center bg-panel p-2 rounded-[20px] shadow-panel"
+        href="/"
+    >
+        <div
+            class="h-14 bg-accent rounded-[14px] flex items-center justify-center"
+        >
+            <div class="w-28 h-5">
+                <Logo />
+            </div>
+        </div>
+    </a>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/layout/Navbar/Base.svelte
similarity index 74%
rename from src/lib/components/functional/Navbar.svelte
rename to src/lib/components/layout/Navbar/Base.svelte
index 0b23cda..7413414 100644
--- a/src/lib/components/functional/Navbar.svelte
+++ b/src/lib/components/layout/Navbar/Base.svelte
@@ -2,24 +2,56 @@
 	import { browser } from "$app/environment";
 	import { page } from "$app/state";
 	import { duration, fade } from "$lib/animation";
-	import { effects, setTheme } from "$lib/store/index.svelte";
+	import { effects, files, goingLeft, setTheme } from "$lib/store/index.svelte";
 	import clsx from "clsx";
-	import { MoonIcon, SunIcon } from "lucide-svelte";
+	import {
+		InfoIcon,
+		MoonIcon,
+		RefreshCw,
+		SettingsIcon,
+		SunIcon,
+		UploadIcon,
+	} from "lucide-svelte";
 	import { quintOut } from "svelte/easing";
-	import Panel from "../visual/Panel.svelte";
-	import Logo from "../visual/svg/Logo.svelte";
+	import Panel from "../../visual/Panel.svelte";
+	import Logo from "../../visual/svg/Logo.svelte";
+	import { beforeNavigate } from "$app/navigation";
 
-	type Props = {
-		items: {
+	const items = $derived<
+		{
 			name: string;
 			url: string;
 			activeMatch: (pathname: string) => boolean;
 			icon: any;
 			badge?: number;
-		}[];
-	};
-
-	let { items }: Props = $props();
+		}[]
+	>([
+		{
+			name: "Upload",
+			url: "/",
+			activeMatch: (pathname) => pathname === "/",
+			icon: UploadIcon,
+		},
+		{
+			name: "Convert",
+			url: "/convert",
+			activeMatch: (pathname) => pathname === "/convert",
+			icon: RefreshCw,
+			badge: files.files.length,
+		},
+		{
+			name: "Settings",
+			url: "/settings",
+			activeMatch: (pathname) => pathname.startsWith("/settings"),
+			icon: SettingsIcon,
+		},
+		{
+			name: "About",
+			url: "/about",
+			activeMatch: (pathname) => pathname.startsWith("/about"),
+			icon: InfoIcon,
+		},
+	]);
 
 	let links = $state<HTMLAnchorElement[]>([]);
 	let container = $state<HTMLDivElement>();
@@ -33,6 +65,20 @@
 	const selectedIndex = $derived(
 		items.findIndex((i) => i.activeMatch(page.url.pathname)),
 	);
+
+	beforeNavigate((e) => {
+		const oldIndex = items.findIndex((i) =>
+			i.activeMatch(e.from?.url.pathname || ""),
+		);
+		const newIndex = items.findIndex((i) =>
+			i.activeMatch(e.to?.url.pathname || ""),
+		);
+		if (newIndex < oldIndex) {
+			goingLeft.set(true)
+		} else {
+			goingLeft.set(false)
+		}
+	});
 </script>
 
 {#snippet link(item: (typeof items)[0], index: number)}
diff --git a/src/lib/components/layout/Navbar/Desktop.svelte b/src/lib/components/layout/Navbar/Desktop.svelte
new file mode 100644
index 0000000..18b54aa
--- /dev/null
+++ b/src/lib/components/layout/Navbar/Desktop.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Navbar from "./Base.svelte";
+</script>
+
+<div class="hidden md:flex p-8 w-screen justify-center">
+    <Navbar />
+</div>
\ No newline at end of file
diff --git a/src/lib/components/layout/Navbar/Mobile.svelte b/src/lib/components/layout/Navbar/Mobile.svelte
new file mode 100644
index 0000000..89ff7a9
--- /dev/null
+++ b/src/lib/components/layout/Navbar/Mobile.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Navbar from "./Base.svelte";
+</script>
+
+<div class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50">
+	<div class="flex flex-col justify-center items-center">
+		<Navbar />
+	</div>
+</div>
diff --git a/src/lib/components/layout/Navbar/index.ts b/src/lib/components/layout/Navbar/index.ts
new file mode 100644
index 0000000..e7fc632
--- /dev/null
+++ b/src/lib/components/layout/Navbar/index.ts
@@ -0,0 +1,2 @@
+export { default as Desktop } from "./Desktop.svelte";
+export { default as Mobile } from "./Mobile.svelte";
\ No newline at end of file
diff --git a/src/lib/components/layout/PageContent.svelte b/src/lib/components/layout/PageContent.svelte
new file mode 100644
index 0000000..1845511
--- /dev/null
+++ b/src/lib/components/layout/PageContent.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { duration } from "$lib/animation";
+	import { goingLeft, isMobile } from "$lib/store/index.svelte";
+	import { quintOut } from "svelte/easing";
+	import { fly, fade } from "$lib/animation";
+
+    let { children } = $props();
+</script>
+
+<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
+	{#key page.url.pathname}
+		<div
+			class="row-start-1 col-start-1"
+			in:fly={{
+				x: $goingLeft ? -window.innerWidth : window.innerWidth,
+				duration,
+				easing: quintOut,
+				delay: 25,
+			}}
+			out:fly={{
+				x: $goingLeft ? window.innerWidth : -window.innerWidth,
+				duration,
+				easing: quintOut,
+			}}
+		>
+			<div
+				class="flex flex-col h-full pb-32"
+				in:fade={{
+					duration,
+					easing: quintOut,
+					delay: $isMobile ? 0 : 100,
+				}}
+				out:fade={{
+					duration,
+					easing: quintOut,
+					delay: $isMobile ? 0 : 200,
+				}}
+			>
+				{@render children()}
+			</div>
+		</div>
+	{/key}
+</div>
diff --git a/src/lib/components/layout/index.ts b/src/lib/components/layout/index.ts
new file mode 100644
index 0000000..7d3c8fc
--- /dev/null
+++ b/src/lib/components/layout/index.ts
@@ -0,0 +1,4 @@
+export { default as Footer } from './Footer.svelte';
+export { default as Gradients } from './Gradients.svelte';
+export { default as MobileLogo } from './MobileLogo.svelte';
+export { default as PageContent } from './PageContent.svelte';
\ No newline at end of file
diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts
index d6d8a03..02f3d7d 100644
--- a/src/lib/store/index.svelte.ts
+++ b/src/lib/store/index.svelte.ts
@@ -229,6 +229,7 @@ export function setEffects(effectsEnabled: boolean) {
 export const files = new Files();
 export const showGradient = writable(true);
 export const gradientColor = writable("");
+export const goingLeft = writable(false);
 
 export const isMobile = writable(false);
 export const effects = writable(true);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4d05a33..5de561c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,82 +1,31 @@
 <script lang="ts">
-	import { page } from "$app/state";
-	import { beforeNavigate, goto } from "$app/navigation";
-	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
-	import { duration, fly } from "$lib/animation";
-	import VertVBig from "$lib/assets/vert-bg.svg?component";
-	import featuredImage from "$lib/assets/VERT_Feature.webp";
-	import Navbar from "$lib/components/functional/Navbar.svelte";
-	import Footer from "$lib/components/visual/Footer.svelte";
-	import Logo from "$lib/components/visual/svg/Logo.svelte";
-
-	import { fade } from "$lib/animation";
-	import {
-		files,
-		gradientColor,
-		isMobile,
-		effects,
-		showGradient,
-		theme,
-	} from "$lib/store/index.svelte";
-	import {
-		InfoIcon,
-		RefreshCw,
-		SettingsIcon,
-		UploadIcon,
-	} from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
-	import "../app.scss";
-	import { DISCORD_URL, GITHUB_URL_VERT, VERT_NAME } from "$lib/consts";
-	import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
+	import { goto } from "$app/navigation";
+
+	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
+	import { duration } from "$lib/animation";
+	import featuredImage from "$lib/assets/VERT_Feature.webp";
+	import * as Layout from "$lib/components/layout";
+	import * as Navbar from "$lib/components/layout/Navbar";
 	import Toast from "$lib/components/visual/Toast.svelte";
+
+	import { fade } from "$lib/animation";
+	import { files, isMobile, effects, theme } from "$lib/store/index.svelte";
+	import { VERT_NAME } from "$lib/consts";
+	import { type Toast as ToastType, toasts } from "$lib/store/ToastProvider";
 	import { Settings } from "$lib/sections/settings/index.svelte";
+	import "../app.scss";
+	
 	let { children } = $props();
 
 	let dropping = $state(false);
-	let goingLeft = $state(false);
 	let toastList = $state<ToastType[]>([]);
 
 	toasts.subscribe((value) => {
 		toastList = value as ToastType[];
 	});
 
-	const items = $derived<
-		{
-			name: string;
-			url: string;
-			activeMatch: (pathname: string) => boolean;
-			icon: any;
-			badge?: number;
-		}[]
-	>([
-		{
-			name: "Upload",
-			url: "/",
-			activeMatch: (pathname) => pathname === "/",
-			icon: UploadIcon,
-		},
-		{
-			name: "Convert",
-			url: "/convert",
-			activeMatch: (pathname) => pathname === "/convert",
-			icon: RefreshCw,
-			badge: files.files.length,
-		},
-		{
-			name: "Settings",
-			url: "/settings",
-			activeMatch: (pathname) => pathname.startsWith("/settings"),
-			icon: SettingsIcon,
-		},
-		{
-			name: "About",
-			url: "/about",
-			activeMatch: (pathname) => pathname.startsWith("/about"),
-			icon: InfoIcon,
-		},
-	]);
-
 	const dropFiles = (e: DragEvent) => {
 		e.preventDefault();
 		dropping = false;
@@ -103,20 +52,6 @@
 
 		Settings.instance.load();
 	});
-
-	beforeNavigate((e) => {
-		const oldIndex = items.findIndex((i) =>
-			i.activeMatch(e.from?.url.pathname || ""),
-		);
-		const newIndex = items.findIndex((i) =>
-			i.activeMatch(e.to?.url.pathname || ""),
-		);
-		if (newIndex < oldIndex) {
-			goingLeft = true;
-		} else {
-			goingLeft = false;
-		}
-	});
 </script>
 
 <svelte:head>
@@ -158,6 +93,7 @@
 	<script src="/coi-serviceworker.min.js"></script>
 </svelte:head>
 
+<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
 <div
 	class="flex flex-col min-h-screen h-full"
 	ondrop={dropFiles}
@@ -179,64 +115,12 @@
 		></div>
 	{/if}
 
-	<!-- FIXME: if user resizes between desktop/mobile, highlight of page disappears (only shows on original size) -->
 	<div>
-		<!-- Mobile logo -->
-		<div class="flex md:hidden justify-center items-center pb-8 pt-4">
-			<a
-				class="flex items-center justify-center bg-panel p-2 rounded-[20px] shadow-panel"
-				href="/"
-			>
-				<div
-					class="h-14 bg-accent rounded-[14px] flex items-center justify-center"
-				>
-					<div class="w-28 h-5">
-						<Logo />
-					</div>
-				</div>
-			</a>
-		</div>
-
-		<!-- Desktop navbar -->
-		<div class="hidden md:flex p-8 w-screen justify-center">
-			<Navbar {items} />
-		</div>
+		<Layout.MobileLogo />
+		<Navbar.Desktop />
 	</div>
 
-	<div class="grid grid-rows-1 grid-cols-1 h-full flex-grow">
-		{#key page.url.pathname}
-			<div
-				class="row-start-1 col-start-1"
-				in:fly={{
-					x: goingLeft ? -window.innerWidth : window.innerWidth,
-					duration,
-					easing: quintOut,
-					delay: 25,
-				}}
-				out:fly={{
-					x: goingLeft ? window.innerWidth : -window.innerWidth,
-					duration,
-					easing: quintOut,
-				}}
-			>
-				<div
-					class="flex flex-col h-full pb-32"
-					in:fade={{
-						duration,
-						easing: quintOut,
-						delay: $isMobile ? 0 : 100,
-					}}
-					out:fade={{
-						duration,
-						easing: quintOut,
-						delay: $isMobile ? 0 : 200,
-					}}
-				>
-					{@render children()}
-				</div>
-			</div>
-		{/key}
-	</div>
+	<Layout.PageContent {children} />
 
 	<div class="fixed bottom-28 md:bottom-0 right-0 p-4 space-y-4 z-50">
 		{#each toastList as { id, type, message, durations }}
@@ -245,93 +129,13 @@
 	</div>
 
 	<div>
-		<div
-			class="hidden md:block w-full h-14 border-t border-separator fixed bottom-0 mt-12"
-		>
-			<Footer
-				class="w-full h-full"
-				items={{
-					//"Privacy policy": "#",
-					"Source code": GITHUB_URL_VERT,
-					"Discord server": DISCORD_URL,
-				}}
-			/>
-		</div>
-
-		<!-- Mobile navbar -->
-		<div
-			class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50"
-		>
-			<div class="flex flex-col justify-center items-center">
-				<Navbar {items} />
-			</div>
-		</div>
+		<Layout.Footer />
+		<Navbar.Mobile />
 	</div>
 </div>
 
 <!-- Gradients placed here to prevent it overlapping in transitions -->
-{#if page.url.pathname === "/"}
-	<div
-		class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
-	>
-		<VertVBig
-			class="fill-[--fg] opacity-10 dynadark:opacity-5 scale-[200%] md:scale-[80%]"
-		/>
-	</div>
-	<div
-		id="gradient-bg"
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient);"
-	></div>
-{:else if page.url.pathname === "/convert" && $showGradient}
-	<div
-		id="gradient-bg"
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
-	></div>
-{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
-	<div
-		class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1 scale-105"
-	>
-		<div
-			class="w-full relative"
-			transition:fade={{
-				duration,
-				easing: quintOut,
-			}}
-		>
-			<img
-				class="object-cover w-full h-full blur-md"
-				src={files.files[0].blobUrl}
-				alt={files.files[0].name}
-			/>
-			<div
-				class="absolute top-0 left-0 w-full h-full"
-				style="background: var(--bg-gradient-image);"
-			></div>
-			<!-- <div class="absolute bottom-0 left-0 w-full h-full">
-				<ProgressiveBlur
-					direction="bottom"
-					endIntensity={256}
-					iterations={8}
-					fadeTo="var(--bg)"
-				/>
-			</div> -->
-		</div>
-	</div>
-{:else if page.url.pathname === "/settings"}
-	<div
-		id="gradient-bg"
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient-blue);"
-	></div>
-{:else if page.url.pathname === "/about"}
-	<div
-		id="gradient-bg"
-		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
-		style="background: var(--bg-gradient-pink);"
-	></div>
-{/if}
+<Layout.Gradients />
 
 <style>
 	.dragoverlay {