From 2ea6df9fbe0d023d42374c4f64e417d535c65020 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 5 Feb 2024 15:40:03 +0100
Subject: [PATCH] feat: particle mode switcher and linting

---
 .../src/lib/components/site/icons/index.ts    |  2 +-
 .../src/lib/components/site/icons/logo.svelte |  4 +-
 .../src/lib/components/site/particles.svelte  | 51 +++++++++++--------
 .../src/routes/(auth)/login/+page.server.ts   |  2 +-
 apps/web/src/routes/(auth)/login/+page.svelte | 11 ++--
 apps/web/src/routes/+layout.server.ts         |  2 +-
 apps/web/src/routes/+page.svelte              |  4 +-
 7 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/lib/components/site/icons/index.ts b/apps/web/src/lib/components/site/icons/index.ts
index ecd7398..b1ab459 100644
--- a/apps/web/src/lib/components/site/icons/index.ts
+++ b/apps/web/src/lib/components/site/icons/index.ts
@@ -31,5 +31,5 @@ export const Icons = {
 	facebook: FacebookLogo,
 	google: GoogleLogo,
 	instagram: InstagramLogo,
-	twitter: TwitterLogo,
+	twitter: TwitterLogo
 };
diff --git a/apps/web/src/lib/components/site/icons/logo.svelte b/apps/web/src/lib/components/site/icons/logo.svelte
index 474c673..60e545a 100644
--- a/apps/web/src/lib/components/site/icons/logo.svelte
+++ b/apps/web/src/lib/components/site/icons/logo.svelte
@@ -3,8 +3,8 @@
 		topleft: '#FF6C22',
 		topright: '#FF9209',
 		bottomleft: '#2B3499',
-		bottomright: '#FFD099',
-	}
+		bottomright: '#FFD099'
+	};
 </script>
 
 <svg
diff --git a/apps/web/src/lib/components/site/particles.svelte b/apps/web/src/lib/components/site/particles.svelte
index eb0c75a..6fc5880 100644
--- a/apps/web/src/lib/components/site/particles.svelte
+++ b/apps/web/src/lib/components/site/particles.svelte
@@ -21,7 +21,8 @@
 	export let vx = 0;
 	export let vy = 0;
 
-	export let color = $mode === 'dark' ? '#ffffff' : '#000000';
+	let color = '#ffffff';
+	let rgb = hexToRgb(color);
 
 	/**
 	 * @type {HTMLCanvasElement}
@@ -56,6 +57,33 @@
 		return [red, green, blue];
 	}
 
+	mode.subscribe((value) => {
+		console.log('value', value);
+		color = value === 'dark' ? '#ffffff' : '#000000';
+
+		// Move the `rgb` calculation inside the `mode.subscribe` callback
+		rgb = hexToRgb(color);
+	});
+
+	/**
+	 * @param {{ x: any; y: any; translateX: any; translateY: any; size: any; alpha: any; targetAlpha?: number; dx?: number; dy?: number; magnetism?: number; }} circle
+	 */
+	function drawCircle(circle, update = false) {
+		if (context) {
+			const { x, y, translateX, translateY, size, alpha } = circle;
+			context.translate(translateX, translateY);
+			context.beginPath();
+			context.arc(x, y, size, 0, 2 * Math.PI);
+			context.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`;
+			context.fill();
+			context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+			if (!update) {
+				circles.push(circle);
+			}
+		}
+	}
+
 	function initCanvas() {
 		resizeCanvas();
 		drawParticles();
@@ -113,27 +141,6 @@
 		};
 	}
 
-	const rgb = hexToRgb(color);
-
-	/**
-	 * @param {{ x: any; y: any; translateX: any; translateY: any; size: any; alpha: any; targetAlpha?: number; dx?: number; dy?: number; magnetism?: number; }} circle
-	 */
-	function drawCircle(circle, update = false) {
-		if (context) {
-			const { x, y, translateX, translateY, size, alpha } = circle;
-			context.translate(translateX, translateY);
-			context.beginPath();
-			context.arc(x, y, size, 0, 2 * Math.PI);
-			context.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`;
-			context.fill();
-			context.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-			if (!update) {
-				circles.push(circle);
-			}
-		}
-	}
-
 	function clearContext() {
 		if (context) {
 			context.clearRect(0, 0, canvasSize.w, canvasSize.h);
diff --git a/apps/web/src/routes/(auth)/login/+page.server.ts b/apps/web/src/routes/(auth)/login/+page.server.ts
index 5535651..ea72fd7 100644
--- a/apps/web/src/routes/(auth)/login/+page.server.ts
+++ b/apps/web/src/routes/(auth)/login/+page.server.ts
@@ -29,4 +29,4 @@ export const actions: Actions = {
 		console.log('provider: ', provider);
 		await locals.pocketBase.collection('users').authWithOAuth2({ provider: provider });
 	}
-}
\ No newline at end of file
+};
diff --git a/apps/web/src/routes/(auth)/login/+page.svelte b/apps/web/src/routes/(auth)/login/+page.svelte
index c8f3ef7..9c3e645 100644
--- a/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/web/src/routes/(auth)/login/+page.svelte
@@ -18,6 +18,7 @@
 	const { providers } = data;
 	const providersWithIcons = providers.map((provider) => ({
 		...provider,
+		/* eslint-disable  @typescript-eslint/no-explicit-any */
 		icon: (Icons as { [key: string]: any })[provider.name] || undefined
 	}));
 	let currentProvider = providersWithIcons[0];
@@ -27,7 +28,7 @@
 	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
 		<div class="flex flex-col space-y-2 text-center">
 			<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
-			<p class="text-muted-foreground text-sm">
+			<p class="text-sm text-muted-foreground">
 				Enter your email and password below to log into your account
 			</p>
 		</div>
@@ -90,11 +91,11 @@
 							<span class="w-full border-t" />
 						</div>
 						<div class="relative flex justify-center text-xs uppercase">
-							<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
+							<span class="bg-background px-2 py-6 text-muted-foreground"> Or continue with </span>
 						</div>
 					</div>
 					<div
-						class="bg-secondary text-secondary-foreground flex items-center justify-between rounded-md"
+						class="flex items-center justify-between rounded-md bg-secondary text-secondary-foreground"
 					>
 						<input type="hidden" name="provider" bind:value={currentProvider.name} />
 						<div class="flex w-full items-center justify-center space-x-2">
@@ -125,7 +126,7 @@
 								<DropdownMenu.Root>
 									<DropdownMenu.Trigger asChild let:builder>
 										<Button builders={[builder]} variant="secondary" class="px-2 shadow-none">
-											<ChevronDown class="text-secondary-foreground h-4 w-4" />
+											<ChevronDown class="h-4 w-4 text-secondary-foreground" />
 										</Button>
 									</DropdownMenu.Trigger>
 									<DropdownMenu.Content class="w-80" align="end">
@@ -157,7 +158,7 @@
 				{/if}
 			</form>
 		</div>
-		<p class="text-muted-foreground px-8 text-center text-sm">
+		<p class="px-8 text-center text-sm text-muted-foreground">
 			Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
 			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 		</p>
diff --git a/apps/web/src/routes/+layout.server.ts b/apps/web/src/routes/+layout.server.ts
index b71d50b..acffcc6 100644
--- a/apps/web/src/routes/+layout.server.ts
+++ b/apps/web/src/routes/+layout.server.ts
@@ -17,6 +17,6 @@ export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals })
 	return {
 		authenticated: locals.pocketBase.authStore.isValid,
 		user,
-		providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders,
+		providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders
 	};
 };
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 0fa944f..4835b3d 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -11,7 +11,7 @@
 <div class="pb-16 pt-52 md:pb-32 md:pt-60">
 	<div class="container mx-auto text-center">
 		<h1
-			class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl font-extrabold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60"
+			class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-4xl font-extrabold tracking-tight text-transparent dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60 sm:text-5xl md:text-6xl lg:text-7xl"
 		>
 			<span class="inline-block text-balance align-top decoration-inherit">
 				One Dashboard
@@ -19,7 +19,7 @@
 				Countless Solutions
 			</span>
 		</h1>
-		<p class="mb-8 text-sm text-zinc-800 md:text-xl dark:text-zinc-300">
+		<p class="mb-8 text-sm text-zinc-800 dark:text-zinc-300 md:text-xl">
 			Tame ticket overload and keep your operations teams sane
 		</p>
 		<div