feat/add preference to set high resolution in multi column mode

src/lib/components/kurosearch/fullscreen-post/FullscreenImage.svelte

@@ -4,7 +4,7 @@
 	import LoadingAnimation from '$lib/components/pure/loading-animation/LoadingAnimation.svelte';
 	import { getGifSources } from '$lib/logic/media-utils';
 	import autoplayFullscreenEnabled from '$lib/store/autoplay-fullscreen-enabled-store';
-	import highResolutionEnabled from '$lib/store/high-resolution-enabled';
+	import highResolutionEnabled from '$lib/store/high-resolution-single-col-enabled';
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
 

src/lib/components/kurosearch/media-image/Image.svelte

@@ -2,7 +2,7 @@
 	import { base } from '$app/paths';
 	import { clickOnEnter } from '$lib/logic/keyboard-utils';
 	import { postobserve } from '$lib/logic/use/postobserve';
-	import highResolutionEnabled from '$lib/store/high-resolution-enabled';
+	import highResolutionSingleColEnabled from '$lib/store/high-resolution-single-col-enabled';
 	import { calculateAspectRatio, calculateAspectRatioCss } from '../post/ratio';
 
 	export let post: kurosearch.Post;
@@ -12,7 +12,7 @@
 
 	let open: boolean;
 
-	$: src = highResolutionEnabled ? post.file_url : post.sample_url;
+	$: src = highResolutionSingleColEnabled ? post.file_url : post.sample_url;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

src/lib/components/kurosearch/post/MosaicPost.svelte

@@ -3,6 +3,7 @@
 	import { getPostId } from '$lib/logic/id-utils';
 	import { isEnter } from '$lib/logic/keyboard-utils';
 	import { calculateAspectRatio } from './ratio';
+	import highResolutionMultiColEnabled from "$lib/store/high-resolution-multi-col-enabled.js"
 
 	export let post: kurosearch.Post;
 
@@ -14,7 +15,11 @@
 	const isImage = (src: string) =>
 		src.endsWith('.jpg') || src.endsWith('.jpeg') || src.endsWith('.png') || src.endsWith('.webp');
 
-	$: previewSrc = isImage(post.sample_url) ? post.sample_url : post.preview_url;
+	$: previewSrc = highResolutionMultiColEnabled
+			? post.file_url
+			: isImage(post.sample_url)
+					? post.sample_url
+					: post.preview_url;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

src/lib/store/high-resolution-enabled.ts → src/lib/store/high-resolution-multi-col-enabled.ts

@@ -1,15 +1,15 @@
 import { boolParser, boolSerializer, persistentWritable } from './persistent-store';
 import { StoreKey } from './store-keys';
 
-const createHighResolutionEnabledStore = () => {
+const createHighResolutionMultiColEnabledStore = () => {
 	const initial = false;
 	const { subscribe, set } = persistentWritable(
-		StoreKey.HighResolutionEnabled,
+		StoreKey.HighResolutionMultiColEnabled,
 		initial,
 		boolSerializer,
 		boolParser
 	);
 	return { subscribe, set, reset: () => set(initial) };
 };
 
-export default createHighResolutionEnabledStore();
+export default createHighResolutionMultiColEnabledStore();

src/lib/store/high-resolution-single-col-enabled.ts

@@ -0,0 +1,15 @@
+import { boolParser, boolSerializer, persistentWritable } from './persistent-store';
+import { StoreKey } from './store-keys';
+
+const createHighResolutionSingleColEnabledStore = () => {
+	const initial = false;
+	const { subscribe, set } = persistentWritable(
+		StoreKey.HighResolutionSingleColEnabled,
+		initial,
+		boolSerializer,
+		boolParser
+	);
+	return { subscribe, set, reset: () => set(initial) };
+};
+
+export default createHighResolutionSingleColEnabledStore();

src/lib/store/store-keys.ts

@@ -11,7 +11,8 @@ export enum StoreKey {
 	Theme = 'kurosearch:theme',
 	AlwaysLoop = 'kurosearch:always-loop',
 	CookiesAccepted = 'kurosearch:cookies-accepted',
-	HighResolutionEnabled = 'kurosearch:high-resolution-enabled',
+	HighResolutionSingleColEnabled = 'kurosearch:high-resolution-single-col-enabled',
+	HighResolutionMultiColEnabled = 'kurosearch:high-resolution-multi-col-enabled',
 	WideLayoutEnabled = 'kurosearch:wide-layout-enabled',
 	FullscreenHintDone = 'kurosearch:fullscreen-hint-done',
 	AutoplayFullscreenEnabled = 'kurosearch:autoplay-fullscreen-enabled-done',

src/routes/preferences/+page.svelte

@@ -28,7 +28,7 @@
 	import resultColumns from '$lib/store/result-columns-store';
 	import ConfirmDialog from '$lib/components/kurosearch/dialog-confirm/ConfirmDialog.svelte';
 	import cookiesAccepted from '$lib/store/cookies-accepted-store';
-	import highResolutionEnabled from '$lib/store/high-resolution-enabled';
+	import highResolutionSingleColEnabled from '$lib/store/high-resolution-single-col-enabled';
 	import resultsStore from '$lib/store/results-store';
 	import activeTagsStore from '$lib/store/active-tags-store';
 	import autoplayFullscreenEnabled from '$lib/store/autoplay-fullscreen-enabled-store';
@@ -38,6 +38,7 @@
 	import { addHistory } from '$lib/logic/use/onpopstate';
 	import NumberInput from '$lib/components/kurosearch/dialog-sort-filter/NumberInput.svelte';
 	import openTagsOnPostClick from '$lib/store/tags-shortcut-store';
+	import highResolutionMultiColEnabled from "$lib/store/high-resolution-multi-col-enabled"
 
 	let resetDialog: HTMLDialogElement;
 
@@ -48,7 +49,7 @@
 		alwaysLoop.reset();
 		resultColumns.reset();
 		cookiesAccepted.reset();
-		highResolutionEnabled.reset();
+		highResolutionSingleColEnabled.reset();
 		wideLayoutEnabled.reset();
 	};
 </script>
@@ -122,7 +123,7 @@
 		</div>
 	</Preference>
 
-	<Preference title="Result layout" description="Save active tags and posts between sessions.">
+	<Preference title="Result layout" description="Change posts grid in result layout.">
 		<div class="flex">
 			<Select bind:value={$resultColumns} options={RESULT_COLUMNS_OPTIONS} />
 			<Checkbox id="checkbox-wide-layout" bind:checked={$wideLayoutEnabled}>
@@ -135,8 +136,14 @@
 		title="Higher Resolution"
 		description="When enabled, the app will always load the highest resolution available. This causes increased network consumption and can impact performance."
 	>
-		<Checkbox id="checkbox-high-resolution-enabled" bind:checked={$highResolutionEnabled}>
-			{$highResolutionEnabled ? 'Enabled' : 'Disabled'}
+		<p>{"For single column mode"}</p>
+		<Checkbox id="checkbox-high-resolution-single-col-enabled" bind:checked={$highResolutionSingleColEnabled}>
+			{$highResolutionSingleColEnabled ? 'Enabled' : 'Disabled'}
+		</Checkbox>
+		<br>
+		<p>{"For multi column mode"}</p>
+		<Checkbox id="checkbox-high-resolution-multi-col-enabled" bind:checked={$highResolutionMultiColEnabled}>
+			{$highResolutionMultiColEnabled ? 'Enabled' : 'Disabled'}
 		</Checkbox>
 	</Preference>