From 4d19e6809d54db349d6845de9f0c5a1aa09ea6d0 Mon Sep 17 00:00:00 2001
From: Evert Prants <evert@lunasqu.ee>
Date: Tue, 11 Jun 2024 16:53:31 +0300
Subject: [PATCH] Stop sending theme to server

---
 src/hooks.server.ts                 |  8 +++-----
 src/lib/components/Paginator.svelte |  9 +++------
 src/lib/constants.ts                |  1 +
 src/lib/theme-mode.ts               | 14 ++++----------
 src/routes/+page.server.ts          |  5 +++--
 5 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 67a2a88..a45179d 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -21,14 +21,12 @@ if (AUTO_MIGRATE === 'true') {
 await runSeeds();
 
 const handleThemeHook = (async ({ resolve, event }) => {
-	// Take the theme from the query parameters or from the cookies
-	const newTheme = event.url.searchParams.get('themeMode') as ThemeModeType;
+	// Take the theme from the cookies
 	const cookieTheme = event.cookies.get('themeMode') as ThemeModeType;
 
-	const theme: ThemeModeType = newTheme || cookieTheme;
-	if (theme) {
+	if (cookieTheme) {
 		return await resolve(event, {
-			transformPageChunk: ({ html }) => html.replace(/theme-base=""/g, `theme-base="${theme}"`)
+			transformPageChunk: ({ html }) => html.replace('theme-base=""', `theme-base="${cookieTheme}"`)
 		});
 	}
 
diff --git a/src/lib/components/Paginator.svelte b/src/lib/components/Paginator.svelte
index 4fbdf9a..aa990e8 100644
--- a/src/lib/components/Paginator.svelte
+++ b/src/lib/components/Paginator.svelte
@@ -21,8 +21,7 @@
 		class="page-button page-prev {firstPage ? 'disabled' : ''}"
 		href={`?${makePageUrl($page.url.searchParams, pageNum - 1)}`}
 		tabindex={firstPage ? -1 : 0}
-		aria-label={$t('common.previous')}
-		aria-disabled={firstPage}>&lt;</a
+		aria-label={$t('common.previous')}>&lt;</a
 	>
 
 	{#each pageButtons as buttonNumber}
@@ -31,8 +30,7 @@
 			class="page-button page-link {active ? 'disabled' : ''}"
 			href={`?${makePageUrl($page.url.searchParams, buttonNumber)}`}
 			tabindex={active ? -1 : 0}
-			aria-label={`${$t('common.page')} ${buttonNumber}`}
-			aria-disabled={active}>{buttonNumber}</a
+			aria-label={`${$t('common.page')} ${buttonNumber}`}>{buttonNumber}</a
 		>
 	{/each}
 
@@ -40,8 +38,7 @@
 		class="page-button page-prev {lastPage ? 'disabled' : ''}"
 		tabindex={lastPage ? -1 : 0}
 		href={`?${makePageUrl($page.url.searchParams, pageNum + 1)}`}
-		aria-label={$t('common.next')}
-		aria-disabled={lastPage}>&gt;</a
+		aria-label={$t('common.next')}>&gt;</a
 	>
 </nav>
 
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 82bcf7c..5166310 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -2,3 +2,4 @@ export const ALLOWED_IMAGES = ['image/png', 'image/jpg', 'image/jpeg'];
 export const OAUTH2_MAX_REDIRECTS = 5;
 export const OAUTH2_MAX_URLS = 1;
 export const MAX_FILE_SIZE_MB = 10;
+export const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
diff --git a/src/lib/theme-mode.ts b/src/lib/theme-mode.ts
index 45e8cb3..ad786db 100644
--- a/src/lib/theme-mode.ts
+++ b/src/lib/theme-mode.ts
@@ -1,6 +1,7 @@
 import { browser } from '$app/environment';
 import { onMount } from 'svelte';
 import { writable } from 'svelte/store';
+import { THEME_COOKIE_MAX_AGE } from './constants';
 
 export type ThemeModeType = 'light' | 'dark';
 
@@ -14,15 +15,8 @@ export const themeMode = writable<ThemeModeType>('light', (set) => {
  * Send a theme to the server so that it can be saved as a cookie.
  * @param theme - theme to send to server
  */
-export const forwardThemeToServer = async (theme: ThemeModeType) =>
-	fetch(`/?/setTheme&themeMode=${theme}`, {
-		method: 'POST',
-		body: new FormData(),
-		credentials: 'include',
-		headers: {
-			'x-sveltekit-action': 'true'
-		}
-	});
+export const setThemeCookie = async (theme: ThemeModeType) =>
+	(document.cookie = `themeMode=${theme}; path=/; SameSite=Lax; Max-Age=${THEME_COOKIE_MAX_AGE}`);
 
 export const forwardInitialTheme = () =>
 	onMount(() => {
@@ -40,7 +34,7 @@ export const forwardInitialTheme = () =>
 
 		const unsubscribeForward = themeMode.subscribe(async (theme) => {
 			document.documentElement.setAttribute('theme-base', theme);
-			await forwardThemeToServer(theme);
+			await setThemeCookie(theme);
 		});
 
 		uaTheme?.addEventListener?.('change', uaSetter);
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 67cba26..75d7741 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,4 +1,5 @@
 import { env } from '$env/dynamic/private';
+import { THEME_COOKIE_MAX_AGE } from '$lib/constants.js';
 import { redirect } from '@sveltejs/kit';
 
 export const actions = {
@@ -7,8 +8,8 @@ export const actions = {
 		const themeMode = url.searchParams.get('themeMode');
 		if (themeMode) {
 			cookies.set('themeMode', themeMode, {
-				maxAge: 60 * 60 * 24 * 365,
-				httpOnly: true,
+				maxAge: THEME_COOKIE_MAX_AGE,
+				httpOnly: false,
 				secure: env.SESSION_SECURE === 'true',
 				sameSite: 'lax',
 				path: '/'