Use handle hook instead of layout load to get cookie

lxl-web/src/app.d.ts

@@ -1,14 +1,19 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 import type { UserSettings } from '$lib/types/userSettings';
+import type { DisplayUtil, VocabUtil } from '$lib/utils/xl';
 import 'unplugin-icons/types/svelte';
 
 declare global {
 	namespace App {
 		interface Error {
 			status?: string;
 		}
-		// interface Locals {}
+		interface Locals {
+			vocab: VocabUtil;
+			display: DisplayUtil;
+			userSettings: UserSettings;
+		}
 		interface PageData {
 			locale: import('$lib/i18n/locales').LocaleCode;
 			t: Awaited<ReturnType<typeof import('$lib/i18n').getTranslator>>;

lxl-web/src/hooks.server.ts

@@ -4,6 +4,7 @@ import { DisplayUtil, VocabUtil } from '$lib/utils/xl';
 import fs from 'fs';
 import { DERIVED_LENSES } from '$lib/types/display';
 import displayWeb from '$lib/assets/json/display-web.json';
+import type { UserSettings } from '$lib/types/userSettings';
 
 let utilCache;
 
@@ -12,6 +13,18 @@ export const handle = async ({ event, resolve }) => {
 	event.locals.vocab = vocabUtil;
 	event.locals.display = displayUtil;
 
+	// Get the settings cookie
+	let userSettings: UserSettings;
+	const settingsCookie = event.cookies.get('userSettings');
+	if (settingsCookie) {
+		try {
+			userSettings = JSON.parse(settingsCookie);
+		} catch (e) {
+			console.warn('Failed to parse user settings', e);
+		}
+	}
+	event.locals.userSettings = userSettings;
+
 	// set HTML lang
 	// https://github.com/sveltejs/kit/issues/3091#issuecomment-1112589090
 	const path = event.url.pathname;

lxl-web/src/routes/(app)/[[lang=lang]]/[fnurgel=fnurgel]/+page.server.ts

@@ -8,7 +8,7 @@ import { LxlLens } from '$lib/types/display';
 import { type ApiError } from '$lib/types/api.js';
 import type { PartialCollectionView, SearchResult } from '$lib/types/search.js';
 
-import { DisplayUtil, pickProperty, toString, VocabUtil, asArray } from '$lib/utils/xl.js';
+import { pickProperty, toString, asArray } from '$lib/utils/xl.js';
 import { getImages, toSecure } from '$lib/utils/auxd';
 import addDefaultSearchParams from '$lib/utils/addDefaultSearchParams.js';
 import getSortedSearchParams from '$lib/utils/getSortedSearchParams.js';
@@ -22,9 +22,10 @@ import {
 } from '$lib/utils/holdings.js';
 
 export const load = async ({ params, url, locals, fetch }) => {
-	const displayUtil: DisplayUtil = locals.display;
-	const vocabUtil: VocabUtil = locals.vocab;
+	const displayUtil = locals.display;
+	const vocabUtil = locals.vocab;
 	const locale = getSupportedLocale(params?.lang);
+	const userSettings = locals.userSettings;
 
 	let resourceId: null | string = null;
 	let searchPromise: Promise<SearchResult | null> | null = null;
@@ -78,7 +79,8 @@ export const load = async ({ params, url, locals, fetch }) => {
 		holdersByType,
 		full: overview,
 		images,
-		searchResult: searchPromise ? await searchPromise : null
+		searchResult: searchPromise ? await searchPromise : null,
+		userSettings
 	};
 
 	async function getRelated() {

lxl-web/src/routes/(app)/[[lang=lang]]/find/+page.server.ts

@@ -4,13 +4,13 @@ import { getSupportedLocale } from '$lib/i18n/locales.js';
 
 import { type ApiError } from '$lib/types/api.js';
 import type { PartialCollectionView } from '$lib/types/search.js';
-import { DisplayUtil, VocabUtil } from '$lib/utils/xl.js';
 import { asResult } from '$lib/utils/search';
 
 export const load = async ({ params, url, locals, fetch }) => {
-	const displayUtil: DisplayUtil = locals.display;
-	const vocabUtil: VocabUtil = locals.vocab;
+	const displayUtil = locals.display;
+	const vocabUtil = locals.vocab;
 	const locale = getSupportedLocale(params?.lang);
+	const userSettings = locals.userSettings;
 
 	if (!url.searchParams.size) {
 		redirect(303, `/`); // redirect to home page if no search params are given
@@ -49,5 +49,5 @@ export const load = async ({ params, url, locals, fetch }) => {
 		url.pathname
 	);
 
-	return { searchResult };
+	return { searchResult, userSettings };
 };

lxl-web/src/routes/+layout.ts

@@ -1,10 +1,9 @@
 import { getTranslator } from '$lib/i18n/index.js';
 import { getSupportedLocale, defaultLocale } from '$lib/i18n/locales';
 
-export async function load({ params, data }) {
+export async function load({ params }) {
 	const locale = getSupportedLocale(params?.lang); // will use default locale if no lang param
 	const t = await getTranslator(locale);
 	const base = locale === defaultLocale ? '/' : `/${locale}/`;
-	const userSettings = data.userSettings;
-	return { locale, t, base, userSettings };
+	return { locale, t, base };
 }