refactor(wrapped): options categories

1 files changed, 66 insertions, 51 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 9741e205..4f05626f 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -635,60 +635,75 @@
 				<a href={'#'} on:click={screenshot} data-umami-event="Generate Wrapped">Generate image</a>
 			</p>
 
-			<details>
+			<details open>
 				<summary>Options</summary>
 				<div id="options">
-					<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
-					<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
-					<input type="checkbox" bind:checked={lightMode} />
-					Enable light mode<br />
-					<input type="checkbox" bind:checked={topGenresTags} />
-					Enable top genres and tags<br />
-					<input type="checkbox" bind:checked={disableActivityHistory} /> Disable activity history<br
-					/>
-					<input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest rated
-					media percentage<br />
-					<input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest rated
-					genre and tag percentage<br />
-					<input type="checkbox" bind:checked={useFullActivityHistory} />
-					Enable full-year activity<br />
-					<SettingHint>
-						If you have many activities, you may rate-limited and you may need multiple attempts to
-						fully populate your local activity history database.<br />If you get rate-limited, wait
-						one minute, then try again.
-						<a href={'#'} on:click={pruneFullYear}>Refresh data</a>
-					</SettingHint><br />
+					<details open>
+						<summary>Display</summary>
+
+						<input type="checkbox" bind:checked={watermark} /> Show watermark<br />
+						<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br
+						/>
+						<input type="checkbox" bind:checked={lightMode} />
+						Enable light mode<br />
+						<input type="checkbox" bind:checked={topGenresTags} />
+						Show top genres and tags<br />
+						<input type="checkbox" bind:checked={disableActivityHistory} /> Hide activity history<br
+						/>
+						<input type="checkbox" bind:checked={highestRatedMediaPercentage} /> Show highest rated
+						media percentages<br />
+						<input type="checkbox" bind:checked={highestRatedGenreTagPercentage} /> Show highest
+						rated genre and tag percentages<br />
+						<select bind:value={highestRatedCount}>
+							{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
+								<option value={count}>{count}</option>
+							{/each}
+						</select>
+						Highest rated media count<br />
+						<select bind:value={genreTagCount}>
+							{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
+								<option value={count}>{count}</option>
+							{/each}
+						</select>
+						Highest genre and tag count<br />
+						<button on:click={updateWidth}>Find best fit</button>
+						<button on:click={() => (width -= 25)}>-25px</button>
+						<button on:click={() => (width += 25)}>+25px</button>
+						Width adjustment<br />
+					</details>
+
 					<p />
-					<input type="checkbox" bind:checked={includeMusic} /> Include music<br />
-					<input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br />
-					<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
-					<select bind:value={highestRatedCount}>
-						{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
-							<option value={count}>{count}</option>
-						{/each}
-					</select>
-					Highest rated media count<br />
-					<select bind:value={genreTagCount}>
-						{#each [3, 4, 5, 6, 7, 8, 9, 10] as count}
-							<option value={count}>{count}</option>
-						{/each}
-					</select>
-					Highest genre and tag count<br />
-					<button on:click={updateWidth}>Find best fit</button>
-					<button on:click={() => (width -= 25)}>-25px</button>
-					<button on:click={() => (width += 25)}>+25px</button>
-					Width adjustment<br />
-					<input
-						type="text"
-						bind:value={excludedKeywordsInput}
-						on:keypress={(e) => {
-							e.key === 'Enter' && submitExcludedKeywords();
-						}}
-					/>
-					Excluded keywords
-					<a href={`#`} on:click={submitExcludedKeywords} title="Or click your Enter key">Submit</a>
-					<br />
-					<SettingHint>Comma separated list (e.g., "My Hero, Kaguya")</SettingHint>
+
+					<details open>
+						<summary>Calculation</summary>
+
+						<input type="checkbox" bind:checked={useFullActivityHistory} />
+						Enable full-year activity<br />
+						<SettingHint>
+							If you have many activities, you may rate-limited and you may need multiple attempts
+							to fully populate your local activity history database.<br />If you get rate-limited,
+							wait one minute, then try again.
+							<a href={'#'} on:click={pruneFullYear}>Refresh data</a>
+						</SettingHint><br />
+						<p />
+						<input type="checkbox" bind:checked={includeMusic} /> Include music<br />
+						<input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br
+						/>
+						<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
+						<input
+							type="text"
+							bind:value={excludedKeywordsInput}
+							on:keypress={(e) => {
+								e.key === 'Enter' && submitExcludedKeywords();
+							}}
+						/>
+						Excluded keywords
+						<a href={`#`} on:click={submitExcludedKeywords} title="Or click your Enter key"
+							>Submit</a
+						>
+						<br />
+						<SettingHint>Comma separated list (e.g., "My Hero, Kaguya")</SettingHint>
+					</details>
 				</div>
 			</details>