Add preference for comment collapsing

src/components/Comment.svelte

@@ -7,6 +7,7 @@
 	import { getContext, setContext } from 'svelte';
 	import { modNames, symbols, type FetchedKids } from '../hacker-news/api';
 	import type { DeletedHNItem, HNComment } from '../hacker-news/types';
+	import { collapseLongThreads } from '../preferences';
 	import Content from './Content.svelte';
 	import ExpandCollapseIcon from './ExpandCollapseIcon.svelte';
 	import Timestamp from './Timestamp.svelte';
@@ -79,7 +80,7 @@
 
 	{#if symbols.resolvedKids in comment && comment[symbols.resolvedKids].length > 0}
 		<div class="child-comments" hidden={collapsed}>
-			{#if depth === 6 && countChildComments(comment) > 1}
+			{#if $collapseLongThreads && depth === 5 && countChildComments(comment) > 1}
 				<a class="more-comments" href="item?id={comment.id}">
 					{countChildComments(comment)} More Comments &rarr;
 				</a>

src/components/PreferencesModal.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { highlightThreshold, maxStories, resetPreferences, showCounters } from '../preferences';
+	import {
+		highlightThreshold,
+		maxStories,
+		resetPreferences,
+		showCounters,
+		collapseLongThreads,
+	} from '../preferences';
 
 	/** Whether or not the modal is open. */
 	export let open: boolean;
@@ -37,7 +43,7 @@
 	<h2>Preferences</h2>
 
 	<form method="dialog" on:reset|preventDefault={onReset}>
-		<label id="showCountersSelect">
+		<label>
 			<input type="checkbox" bind:checked={$showCounters} />
 			Show counters in story lists
 		</label>
@@ -56,6 +62,11 @@
 			{/each}
 		</select>
 
+		<label>
+			<input type="checkbox" bind:checked={$collapseLongThreads} />
+			Collapse long comment threads
+		</label>
+
 		<div class="actions">
 			<button type="submit">Done</button>
 			<button type="reset">Reset</button>

src/preferences.ts

@@ -3,9 +3,11 @@ import { persistedStore } from './utils';
 export const showCounters = persistedStore<boolean>('pref:showCounters', false);
 export const maxStories = persistedStore<number>('pref:maxStories', 30);
 export const highlightThreshold = persistedStore<number>('pref:highlightThreshold', 200);
+export const collapseLongThreads = persistedStore<boolean>('pref:collapseLongThreads', true);
 
 export function resetPreferences() {
 	showCounters.unset();
 	maxStories.unset();
 	highlightThreshold.unset();
+	collapseLongThreads.unset();
 }