LWS-244: Filter sort

lxl-web/package.json

@@ -34,6 +34,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@types/eslint": "^9.6.0",
 		"@types/jmespath": "^0.15.2",
+		"@types/js-cookie": "^3.0.6",
 		"autoprefixer": "^10.4.20",
 		"cssnano": "^7.0.5",
 		"eslint": "^9.9.0",
@@ -42,6 +43,7 @@
 		"globals": "^15.9.0",
 		"husky": "^9.1.4",
 		"jmespath": "^0.16.0",
+		"js-cookie": "^3.0.5",
 		"lint-staged": "^15.2.9",
 		"lxljs": "file:../lxljs",
 		"magic-string": "^0.30.11",

lxl-web/src/app.d.ts

@@ -1,16 +1,23 @@
 // 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>>;
+			userSettings: UserSettings;
 		}
 		interface PageState {
 			expandedInstances?: string[];

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/lib/assets/json/display-web.json

@@ -417,7 +417,7 @@
 			"@type": "fresnel:Format",
 			"fresnel:classFormatDomain": ["Contribution"],
 			"fresnel:propertyFormatDomain": ["role"],
-			"fresnel:propertyStyle": ["secondary", "small"],
+			"fresnel:propertyStyle": ["text-secondary", "text-sm"],
 			"fresnel:propertyFormat": {
 				"fresnel:contentBefore": " (",
 				"fresnel:contentFirst": "(",
@@ -671,7 +671,7 @@
 			"@type": "fresnel:Format",
 			"fresnel:classFormatDomain": ["Collection"],
 			"fresnel:propertyFormatDomain": ["sigel"],
-			"fresnel:propertyStyle": ["secondary", "small"],
+			"fresnel:propertyStyle": ["text-secondary", "text-sm"],
 			"fresnel:propertyFormat": {
 				"fresnel:contentBefore": " (",
 				"fresnel:contentFirst": "(",

lxl-web/src/lib/components/DecoratedData.svelte

@@ -264,14 +264,6 @@
 		@apply underline decoration-dotted;
 	}
 
-	.small {
-		@apply text-sm;
-	}
-
-	.secondary {
-		@apply text-secondary;
-	}
-
 	.pill {
 		@apply mb-1 mr-1 inline-block rounded-full bg-pill/8 px-3 py-1 no-underline;
 	}