From f49032fe1445795bce9c65a9dd42af5c6ff93697 Mon Sep 17 00:00:00 2001
From: kurozenzen <kurozenzen@gmail.com>
Date: Sat, 27 Jan 2024 22:29:42 +0100
Subject: [PATCH] feat: add wide layout support

---
 src/lib/store/store-keys.ts                |  1 +
 src/lib/store/wide-layout-enabled-store.ts | 15 +++++++++++++++
 src/routes/+layout.svelte                  |  8 +++++++-
 src/routes/preferences/+page.svelte        | 19 ++++++++++++++++---
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/store/wide-layout-enabled-store.ts

diff --git a/src/lib/store/store-keys.ts b/src/lib/store/store-keys.ts
index c8b95bab..31cdac3d 100644
--- a/src/lib/store/store-keys.ts
+++ b/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'
 }
diff --git a/src/lib/store/wide-layout-enabled-store.ts b/src/lib/store/wide-layout-enabled-store.ts
new file mode 100644
index 00000000..00dde12e
--- /dev/null
+++ b/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();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 68218dc8..7f7164c3 100644
--- a/src/routes/+layout.svelte
+++ b/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);
diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte
index 94398238..4bfa7e92 100644
--- a/src/routes/preferences/+page.svelte
+++ b/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>