feat: add wide layout support

src/lib/store/store-keys.ts

@@ -12,4 +12,5 @@ export enum StoreKey {
 	AlwaysLoop = 'kurosearch:always-loop',
 	CookiesAccepted = 'kurosearch:cookies-accepted',
 	HighResolutionEnabled = 'kurosearch:high-resolution-enabled',
+	WideLayoutEnabled = 'kurosearch:wide-layout-enabled'
 }

src/lib/store/wide-layout-enabled-store.ts

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

src/routes/+layout.svelte

@@ -6,7 +6,9 @@
 	import CodiconLink from '$lib/components/pure/icon-link/CodiconLink.svelte';
 	import CodiconTextLink from '$lib/components/pure/icon-link/CodiconTextLink.svelte';
 	import theme from '$lib/store/theme-store';
+	import wideLayoutEnabled from '$lib/store/wide-layout-enabled-store';
 	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
 	import './reset.css';
 	import './fonts.css';
 	import './defaults.css';
@@ -51,7 +53,7 @@
 	</nav>
 </header>
 
-<main>
+<main class:extra-wide={$wideLayoutEnabled && $page.url.pathname === '/'}>
 	<slot />
 </main>
 
@@ -91,6 +93,10 @@
 		max-width: var(--body-width);
 	}
 
+	main.extra-wide {
+		max-width: 90vw;
+	}
+
 	header,
 	footer {
 		padding: var(--grid-gap);

src/routes/preferences/+page.svelte

@@ -16,6 +16,7 @@
 	import resultsStore from '$lib/store/results-store';
 	import activeTagsStore from '$lib/store/active-tags-store';
 	import activeSupertagsStore from '$lib/store/active-supertags-store';
+	import wideLayoutEnabled from '$lib/store/wide-layout-enabled-store';
 
 	let resetDialog: HTMLDialogElement;
 
@@ -41,6 +42,7 @@
 		resultColumns.reset();
 		cookiesAccepted.reset();
 		highResolutionEnabled.reset();
+		wideLayoutEnabled.reset();
 	};
 </script>
 
@@ -63,7 +65,7 @@
 		<Checkbox id="checkbox-localstorage-enabled" bind:checked={$localstorageEnabled}>
 			{$localstorageEnabled ? 'Save' : "Don't save"}
 		</Checkbox>
-		<div>
+		<div class="button-row">
 			<TextButton title="Reset Posts" type="secondary" on:click={() => resultsStore.reset()}>
 				Reset Posts
 			</TextButton>
@@ -101,7 +103,12 @@
 	</Preference>
 
 	<Preference title="Result layout" description="Save active tags and posts between sessions.">
-		<Select bind:value={$resultColumns} options={RESULT_COLUMNS_OPTIONS} />
+		<div class="flex">
+			<Select bind:value={$resultColumns} options={RESULT_COLUMNS_OPTIONS} />
+			<Checkbox id="checkbox-wide-layout" bind:checked={$wideLayoutEnabled}>
+				{$wideLayoutEnabled ? 'Extra wide' : 'Default width'}
+			</Checkbox>
+		</div>
 	</Preference>
 
 	<Preference
@@ -136,10 +143,16 @@
 		padding-inline: var(--grid-gap);
 	}
 
-	div {
+	.button-row {
 		display: flex;
 		padding-block-start: var(--grid-gap);
 		flex-wrap: wrap;
 		gap: var(--grid-gap);
 	}
+
+	.flex {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--grid-gap);
+	}
 </style>