refactor: Extract settings modal to dedicated component

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
feat: Add settings component
2026-01-06 20:08:43 +00:00 · 2026-01-06 20:08:40 +00:00 · 2026-01-06 20:03:59 +00:00 · 2026-01-06 19:58:31 +00:00 · 2026-01-06 19:10:07 +00:00 · 2026-01-06 18:48:35 +00:00
9 changed files with 565 additions and 166 deletions
--- a/apiserver/server.py
+++ b/apiserver/server.py
@@ -76,8 +76,12 @@ cors = CORS(flask_app)
 def api():
    skip = request.args.get('skip', 0)
    limit = request.args.get('limit', settings.FEED_LENGTH)
    is_smallweb_filter = request.args.get('smallweb') == 'true' and smallweb_set
    sources_filter = request.args.getlist('source')
-    if request.args.get('smallweb') == 'true' and smallweb_set:
+    if not is_smallweb_filter and not sources_filter:
        stories = database.get_stories(limit, skip)
    else:
        limit = int(limit)
        skip = int(skip)
        filtered_stories = []
@@ -90,24 +94,28 @@ def api():
            for story_str in stories_batch:
                story = json.loads(story_str)
-                story_url = story.get('url') or story.get('link') or ''
+
-                if not story_url:
+                if is_smallweb_filter:
-                    continue
+                    story_url = story.get('url') or story.get('link') or ''
-                hostname = urlparse(story_url).hostname
+                    if not story_url:
-                if hostname:
+                        continue
-                    hostname = hostname.replace('www.', '')
+                    hostname = urlparse(story_url).hostname
-                    if hostname in smallweb_set:
+                    if not hostname or hostname.replace('www.', '') not in smallweb_set:
-                        filtered_stories.append(story_str)
+                        continue
-                        if len(filtered_stories) == limit:
+                
-                            break
+                if sources_filter:
                    if story.get('source') not in sources_filter:
                        continue
                filtered_stories.append(story_str)
                if len(filtered_stories) == limit:
                    break
            if len(filtered_stories) == limit:
                break
            current_skip += limit
        stories = filtered_stories
    else:
        stories = database.get_stories(limit, skip)
    # hacky nested json
    res = Response('{"stories":[' + ','.join(stories) + ']}')
--- a/webclient/public/index.html
+++ b/webclient/public/index.html
@@ -30,7 +30,11 @@
 		-->
 		<title>{{ title }}</title>
 		<script>document.documentElement.className = 'js-enabled';</script>
 		<style>
 			.js-enabled .static-content {
 				display: none;
 			}
 			html {
 				overflow-y: scroll;
 			}
@@ -41,98 +45,119 @@
 	</head>
 	<body>
 		<script>
 			(function() {
 				try {
 					var theme = localStorage.getItem('theme');
 					if (theme === 'dark') {
 						document.body.style.backgroundColor = '#1a1a1a';
 					} else if (theme === 'black' || theme === 'red') {
 						document.body.style.backgroundColor = '#000';
 					}
 				} catch (e) {}
 			})();
 		</script>
 		<div id="root">
-			<div class="container menu">
+			<div class="static-content">
 				<p>
 					<a href="/">QotNews</a>
 					<br />
 					<span class="slogan">Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
 				</p>
 			</div>
 			{% if story %}
 				<div class="{% if show_comments %}container{% else %}article-container{% endif %}">
 					<div class="article">
 						<h1>{{ story.title }}</h1>
-						{% if show_comments %}
+				{% if False %}
-							<div class="info">
+				<noscript>
-								<a href="/{{ story.id }}">View article</a>
+					<meta http-equiv="refresh" content="0;url=?/no.script">
-							</div>
+				</noscript>
-						{% else %}
+				{% endif %}
 							<div class="info">
 								Source: <a class="source" href="{{ story.url or story.link }}">{{ url }}</a>
 							</div>
 						{% endif %}
-						<div class="info">
+				<div class="container menu">
-							{{ story.score }} points
+					<p>
-							by <a href="{{ story.author_link }}">{{ story.author }}</a>
+						<a href="/">QotNews</a>
-							{{ story.date | fromnow }}
+						<br />
-							on <a href="{{ story.link }}">{{ story.source }}</a> |
+						<span class="slogan">Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
-							<a href="/{{ story.id }}/c">
+					</p>
 								{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
 							</a>
 						</div>
 						{% if not show_comments and story.text %}
 							<div class="story-text">{{ story.text | safe }}</div>
 						{% elif show_comments %}
 							{% macro render_comment(comment, level) %}
 								<dt></dt>
 								<dd class="comment{% if level > 0 %} lined{% endif %}">
 									<div class="info">
 										<p>
 											{% if comment.author == story.author %}[OP] {% endif %}{{ comment.author or '[Deleted]' }} | <a href="#{{ comment.author }}{{ comment.date }}" id="{{ comment.author }}{{ comment.date }}">{{ comment.date | fromnow }}</a>
 										</p>
 									</div>
 									<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
 									{% if comment.comments %}
 										<dl>
 											{% for reply in comment.comments %}
 												{{ render_comment(reply, level + 1) }}
 											{% endfor %}
 										</dl>
 									{% endif %}
 								</dd>
 							{% endmacro %}
 							<dl class="comments">
 								{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
 							</dl>
 						{% endif %}
 					</div>
 					<div class='dot toggleDot'>
 						<div class='button'>
 							<a href="/{{ story.id }}{{ '/c' if not show_comments else '' }}">
 								{{ '' if not show_comments else '' }}
 							</a>
 						</div>
 					</div>
 				</div>
-			{% elif stories %}
+				{% if story %}
-				<div class="container">
+					<div class="{% if show_comments %}container{% else %}article-container{% endif %}">
-					{% for story in stories %}
+						<div class="article">
-						<div class='item'>
+							<h1>{{ story.title }}</h1>
-							<div class='title'>
+
-								<a class='link' href='/{{ story.id }}'>
+							{% if show_comments %}
-									<img class='source-logo' src='/logos/{{ story.source }}.png' alt='{{ story.source }}:' /> {{ story.title }}
+								<div class="info">
-								</a>
+									<a href="/{{ story.id }}">View article</a>
-								<span class='source'>
+								</div>
-									(<a class='source' href='{{ story.url or story.link }}'>{{ story.hostname }}</a>)
+							{% else %}
-								</span>
+								<div class="info">
-							</div>
+									Source: <a class="source" href="{{ story.url or story.link }}">{{ url }}</a>
-							<div class='info'>
+								</div>
 							{% endif %}
 							<div class="info">
 								{{ story.score }} points
 								by <a href="{{ story.author_link }}">{{ story.author }}</a>
 								{{ story.date | fromnow }}
 								on <a href="{{ story.link }}">{{ story.source }}</a> |
-								<a class="{{ 'hot' if story.num_comments > 99 else '' }}" href="/{{ story.id }}/c">
+								<a href="/{{ story.id }}/c">
 									{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
 								</a>
 							</div>
 							{% if not show_comments and story.text %}
 								<div class="story-text">{{ story.text | safe }}</div>
 							{% elif show_comments %}
 								{% macro render_comment(comment, level) %}
 									<dt></dt>
 									<dd class="comment{% if level > 0 %} lined{% endif %}">
 										<div class="info">
 											<p>
 												{% if comment.author == story.author %}[OP] {% endif %}{{ comment.author or '[Deleted]' }} | <a href="#{{ comment.author }}{{ comment.date }}" id="{{ comment.author }}{{ comment.date }}">{{ comment.date | fromnow }}</a>
 											</p>
 										</div>
 										<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
 										{% if comment.comments %}
 											<dl>
 												{% for reply in comment.comments %}
 													{{ render_comment(reply, level + 1) }}
 												{% endfor %}
 											</dl>
 										{% endif %}
 									</dd>
 								{% endmacro %}
 								<dl class="comments">
 									{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
 								</dl>
 							{% endif %}
 						</div>
-					{% endfor %}
+						<div class='dot toggleDot'>
-				</div>
+							<div class='button'>
-			{% endif %}
+								<a href="/{{ story.id }}{{ '/c' if not show_comments else '' }}">
 									{{ '' if not show_comments else '' }}
 								</a>
 							</div>
 						</div>
 					</div>
 				{% elif stories %}
 					<div class="container">
 						{% for story in stories %}
 							<div class='item'>
 								<div class='title'>
 									<a class='link' href='/{{ story.id }}'>
 										<img class='source-logo' src='/logos/{{ story.source }}.png' alt='{{ story.source }}:' /> {{ story.title }}
 									</a>
 									<span class='source'>
 										(<a class='source' href='{{ story.url or story.link }}'>{{ story.hostname }}</a>)
 									</span>
 								</div>
 								<div class='info'>
 									{{ story.score }} points
 									by <a href="{{ story.author_link }}">{{ story.author }}</a>
 									{{ story.date | fromnow }}
 									on <a href="{{ story.link }}">{{ story.source }}</a> |
 									<a class="{{ 'hot' if story.num_comments > 99 else '' }}" href="/{{ story.id }}/c">
 										{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
 									</a>
 								</div>
 							</div>
 						{% endfor %}
 					</div>
 				{% endif %}
 			</div>
 		</div>
 		<!--
 			This HTML file is a template.
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useLayoutEffect, useEffect, useRef, useCallback } from 'react';
 import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
 import localForage from 'localforage';
 import './Style-light.css';
@@ -14,37 +14,33 @@ import Search from './Search.js';
 import Submit from './Submit.js';
 import Results from './Results.js';
 import ScrollToTop from './ScrollToTop.js';
 import Settings from './Settings.js';
 function App() {
 	const [theme, setTheme] = useState(localStorage.getItem('theme') || '');
 	const cache = useRef({});
 	const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement);
 	const [waitingWorker, setWaitingWorker] = useState(null);
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const defaultBodyFontSize = 1.0;
 	const [bodyFontSize, setBodyFontSize] = useState(Number(localStorage.getItem('bodyFontSize')) || defaultBodyFontSize);
 	const [bodyFont, setBodyFont] = useState(localStorage.getItem('bodyFont') || 'Sans Serif');
 	const [articleFont, setArticleFont] = useState(localStorage.getItem('articleFont') || 'Apparatus SIL');
 	const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
 	const [feedSources, setFeedSources] = useState(() => {
 		const saved = localStorage.getItem('feedSources');
 		return saved ? JSON.parse(saved) : {
 			hackernews: true,
 			reddit: true,
 			lobsters: true,
 			tildes: true,
 		};
 	});
 	const updateCache = useCallback((key, value) => {
 		cache.current[key] = value;
 	}, []);
 	const light = () => {
 		setTheme('');
 		localStorage.setItem('theme', '');
 	};
 	const dark = () => {
 		setTheme('dark');
 		localStorage.setItem('theme', 'dark');
 	};
 	const black = () => {
 		setTheme('black');
 		localStorage.setItem('theme', 'black');
 	};
 	const red = () => {
 		setTheme('red');
 		localStorage.setItem('theme', 'red');
 	};
 	useEffect(() => {
 		const onSWUpdate = e => {
 			setWaitingWorker(e.detail.waiting);
@@ -63,24 +59,13 @@ function App() {
 		}
 	}, [updateCache]);
 	const goFullScreen = () => {
 		if ('wakeLock' in navigator) {
 			navigator.wakeLock.request('screen');
 		}
 		document.body.requestFullscreen({ navigationUI: 'hide' });
 	};
 	const exitFullScreen = () => {
 		document.exitFullscreen();
 	};
 	useEffect(() => {
 		const onFullScreenChange = () => setIsFullScreen(!!document.fullscreenElement);
 		document.addEventListener('fullscreenchange', onFullScreenChange);
 		return () => document.removeEventListener('fullscreenchange', onFullScreenChange);
 	}, []);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (theme === 'dark') {
 			document.body.style.backgroundColor = '#1a1a1a';
 		} else if (theme === 'black') {
@@ -92,20 +77,66 @@ function App() {
 		}
 	}, [theme]);
-	const fullScreenAvailable = document.fullscreenEnabled ||
+	useEffect(() => {
-		document.mozFullscreenEnabled ||
+		document.documentElement.style.fontSize = `${bodyFontSize}rem`;
-		document.webkitFullscreenEnabled ||
+	}, [bodyFontSize]);
-		document.msFullscreenEnabled;
+
 	const fontMap = {
 		'Sans Serif': 'sans-serif',
 		'Serif': 'serif',
 		'Apparatus SIL': "'Apparatus SIL', sans-serif"
 	};
 	useEffect(() => {
 		document.body.style.fontFamily = fontMap[bodyFont];
 	}, [bodyFont]);
 	useEffect(() => {
 		const styleId = 'article-font-family-style';
 		let style = document.getElementById(styleId);
 		if (!style) {
 			style = document.createElement('style');
 			style.id = styleId;
 			document.head.appendChild(style);
 		}
 		style.innerHTML = `.story-text { font-family: ${fontMap[articleFont]} !important; }`;
 	}, [articleFont]);
 	return (
 		<div className={theme}>
 			<Settings
 				settingsOpen={settingsOpen}
 				setSettingsOpen={setSettingsOpen}
 				theme={theme}
 				setTheme={setTheme}
 				isFullScreen={isFullScreen}
 				filterSmallweb={filterSmallweb}
 				setFilterSmallweb={setFilterSmallweb}
 				feedSources={feedSources}
 				setFeedSources={setFeedSources}
 				bodyFontSize={bodyFontSize}
 				setBodyFontSize={setBodyFontSize}
 				defaultBodyFontSize={defaultBodyFontSize}
 				bodyFont={bodyFont}
 				setBodyFont={setBodyFont}
 				articleFont={articleFont}
 				setArticleFont={setArticleFont}
 			/>
 			{waitingWorker &&
 				<div className='update-banner'>
 					Client version mismatch, please refresh:{' '}
 					<button onClick={() => {
 						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
-						navigator.serviceWorker.addEventListener('controllerchange', () => {
+						const reload = () => window.location.reload();
-							window.location.reload();
+						navigator.serviceWorker.addEventListener('controllerchange', reload, { once: true });
 						// Fallback for when the controller has already changed (ie. in another tab)
 						navigator.serviceWorker.getRegistration().then(reg => {
 							if (!reg || !reg.waiting) {
 								reload();
 							}
 						});
 					}}>
 						Refresh
@@ -117,22 +148,15 @@ function App() {
 					<p>
 						<Link to='/'>QotNews</Link>
-						<span className='theme'><a href='#' onClick={() => light()}>Light</a> - <a href='#' onClick={() => dark()}>Dark</a> - <a href='#' onClick={() => black()}>Black</a> - <a href='#' onClick={() => red()}>Red</a></span>
+						<button className="settings-button" onClick={() => setSettingsOpen(true)}>Settings</button>
 						<br />
 						<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
 					</p>
 					{fullScreenAvailable &&
 						<Route path='/(|search)' render={() => !isFullScreen ?
 							<button className='fullscreen' onClick={() => goFullScreen()}>Enter Fullscreen</button>
 						:
 							<button className='fullscreen' onClick={() => exitFullScreen()}>Exit Fullscreen</button>
 						} />
 					}
 					<Route path='/(|search)' component={Search} />
 					<Route path='/(|search)' component={Submit} />
 				</div>
-				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} />} />
+				<Route path='/' exact render={(props) => <Feed {...props} updateCache={updateCache} filterSmallweb={filterSmallweb} feedSources={feedSources} />} />
 				<Switch>
 					<Route path='/search' component={Results} />
 					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />
--- a/webclient/src/Feed.js
+++ b/webclient/src/Feed.js
@@ -1,21 +1,22 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, logos } from './utils.js';
-function Feed({ updateCache }) {
+function Feed({ updateCache, filterSmallweb, feedSources }) {
 	const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false);
 	const [error, setError] = useState('');
 	const [loadingStatus, setLoadingStatus] = useState(null);
-	const [filterSmallweb, setFilterSmallweb] = useState(() => localStorage.getItem('filterSmallweb') === 'true');
+	const isInitialMount = useRef(true);
-	const handleFilterChange = e => {
+	useEffect(() => {
-		const isChecked = e.target.checked;
+		if (isInitialMount.current) {
-		setStories(false);
+			isInitialMount.current = false;
-		setFilterSmallweb(isChecked);
+		} else {
-		localStorage.setItem('filterSmallweb', isChecked);
+			setStories(false);
-	};
+		}
 	}, [filterSmallweb, feedSources]);
 	useEffect(() => {
 		const controller = new AbortController();
@@ -29,7 +30,20 @@ function Feed({ updateCache }) {
 			});
 		}
-		fetch(filterSmallweb ? '/api?smallweb=true' : '/api', { signal: controller.signal })
+		const params = new URLSearchParams();
 		if (filterSmallweb) {
 			params.append('smallweb', 'true');
 		}
 		const allSources = Object.keys(feedSources);
 		const enabledSources = allSources.filter(key => feedSources[key]);
 		if (enabledSources.length > 0 && enabledSources.length < allSources.length) {
 			enabledSources.forEach(source => params.append('source', source));
 		}
 		const apiUrl = `/api?${params.toString()}`;
 		fetch(apiUrl, { signal: controller.signal })
 			.then(res => {
 				if (!res.ok) {
 					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
@@ -40,7 +54,7 @@ function Feed({ updateCache }) {
 				async (result) => {
 					const newApiStories = result.stories;
-					const updated = !stories || !stories.length || stories[0].id !== newApiStories[0].id;
+					const updated = !stories || stories.map(s => s.id).join() !== newApiStories.map(s => s.id).join();
 					console.log('New stories available:', updated);
 					if (!updated) return;
@@ -116,7 +130,7 @@ function Feed({ updateCache }) {
 			);
 		return () => controller.abort();
-	}, [updateCache, filterSmallweb]);
+	}, [updateCache, filterSmallweb, feedSources]);
 	return (
 		<div className='container'>
@@ -125,11 +139,6 @@ function Feed({ updateCache }) {
 				<meta name="robots" content="index" />
 			</Helmet>
 			<div style={{marginBottom: '1rem'}}>
 				<input type="checkbox" id="filter-smallweb" className="checkbox" checked={filterSmallweb} onChange={handleFilterChange} />
 				<label htmlFor="filter-smallweb">Small websites</label>
 			</div>
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>
--- a/webclient/src/Settings.js
+++ b/webclient/src/Settings.js
@@ -0,0 +1,191 @@
 import React from 'react';
 function Settings({
 	settingsOpen,
 	setSettingsOpen,
 	theme,
 	setTheme,
 	isFullScreen,
 	filterSmallweb,
 	setFilterSmallweb,
 	feedSources,
 	setFeedSources,
 	bodyFontSize,
 	setBodyFontSize,
 	defaultBodyFontSize,
 	bodyFont,
 	setBodyFont,
 	articleFont,
 	setArticleFont,
 }) {
 	const light = () => {
 		setTheme('');
 		localStorage.setItem('theme', '');
 	};
 	const dark = () => {
 		setTheme('dark');
 		localStorage.setItem('theme', 'dark');
 	};
 	const black = () => {
 		setTheme('black');
 		localStorage.setItem('theme', 'black');
 	};
 	const red = () => {
 		setTheme('red');
 		localStorage.setItem('theme', 'red');
 	};
 	const handleFilterChange = e => {
 		const isChecked = e.target.checked;
 		setFilterSmallweb(isChecked);
 		localStorage.setItem('filterSmallweb', isChecked);
 	};
 	const handleFeedSourceChange = (source) => {
 		setFeedSources(prevSources => {
 			const newSources = { ...prevSources, [source]: !prevSources[source] };
 			localStorage.setItem('feedSources', JSON.stringify(newSources));
 			return newSources;
 		});
 	};
 	const changeBodyFont = (font) => {
 		setBodyFont(font);
 		localStorage.setItem('bodyFont', font);
 	};
 	const changeArticleFont = (font) => {
 		setArticleFont(font);
 		localStorage.setItem('articleFont', font);
 	};
 	const changeBodyFontSize = (amount) => {
 		const newSize = bodyFontSize + amount;
 		setBodyFontSize(parseFloat(newSize.toFixed(2)));
 		localStorage.setItem('bodyFontSize', newSize.toFixed(2));
 	};
 	const resetBodyFontSize = () => {
 		setBodyFontSize(defaultBodyFontSize);
 		localStorage.removeItem('bodyFontSize');
 	};
 	const bodyFontSettingsChanged = bodyFontSize !== defaultBodyFontSize;
 	const goFullScreen = () => {
 		if ('wakeLock' in navigator) {
 			navigator.wakeLock.request('screen');
 		}
 		document.body.requestFullscreen({ navigationUI: 'hide' });
 	};
 	const exitFullScreen = () => {
 		document.exitFullscreen();
 	};
 	const fullScreenAvailable = document.fullscreenEnabled ||
 		document.mozFullscreenEnabled ||
 		document.webkitFullscreenEnabled ||
 		document.msFullscreenEnabled;
 	if (!settingsOpen) {
 		return null;
 	}
 	return (
 		<>
 			<div className="modal-overlay" onClick={() => setSettingsOpen(false)}></div>
 			<div className="modal-content" onClick={e => e.stopPropagation()}>
 				<button className="close-modal-button" onClick={() => setSettingsOpen(false)}>&times;</button>
 				<h3>Settings</h3>
 				<div className="setting-group">
 					<h4>Theme</h4>
 					<button className={theme === '' ? 'active' : ''} onClick={() => { light(); setSettingsOpen(false); }}>Light</button>
 					<button className={theme === 'dark' ? 'active' : ''} onClick={() => { dark(); setSettingsOpen(false); }}>Dark</button>
 					<button className={theme === 'black' ? 'active' : ''} onClick={() => { black(); setSettingsOpen(false); }}>Black</button>
 					<button className={theme === 'red' ? 'active' : ''} onClick={() => { red(); setSettingsOpen(false); }}>Red</button>
 					{fullScreenAvailable &&
 						<div style={{ marginTop: '0.5rem' }}>
 							{!isFullScreen ?
 								<button onClick={() => { goFullScreen(); setSettingsOpen(false); }}>Enter Fullscreen</button>
 								:
 								<button onClick={() => { exitFullScreen(); setSettingsOpen(false); }}>Exit Fullscreen</button>
 							}
 						</div>
 					}
 				</div>
 				<div className="setting-group">
 					<h4>Feed</h4>
 					<div className="font-option gap">
 						<input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} />
 						<label htmlFor="filter-smallweb">Small websites only</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="checkbox" id="filter-hackernews" name="feed-source" checked={feedSources.hackernews} onChange={() => handleFeedSourceChange('hackernews')} />
 						<label htmlFor="filter-hackernews">Hacker News</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="checkbox" id="filter-reddit" name="feed-source" checked={feedSources.reddit} onChange={() => handleFeedSourceChange('reddit')} />
 						<label htmlFor="filter-reddit">Reddit</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="checkbox" id="filter-lobsters" name="feed-source" checked={feedSources.lobsters} onChange={() => handleFeedSourceChange('lobsters')} />
 						<label htmlFor="filter-lobsters">Lobsters</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="checkbox" id="filter-tildes" name="feed-source" checked={feedSources.tildes} onChange={() => handleFeedSourceChange('tildes')} />
 						<label htmlFor="filter-tildes">Tildes</label>
 					</div>
 				</div>
 				<div className="setting-group">
 					<h4>Font Size</h4>
 					<button onClick={() => changeBodyFontSize(-0.05)}>-</button>
 					<span className="font-size-display">{bodyFontSize.toFixed(2)}</span>
 					<button onClick={() => changeBodyFontSize(0.05)}>+</button>
 					<button onClick={resetBodyFontSize} disabled={!bodyFontSettingsChanged}>Reset</button>
 				</div>
 				<div className="setting-group">
 					<h4>Body Font</h4>
 					<div className="font-option">
 						<input className="checkbox" type="radio" id="body-sans-serif" name="body-font" value="Sans Serif" checked={bodyFont === 'Sans Serif'} onChange={() => changeBodyFont('Sans Serif')} />
 						<label htmlFor="body-sans-serif">Sans Serif *</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="radio" id="body-serif" name="body-font" value="Serif" checked={bodyFont === 'Serif'} onChange={() => changeBodyFont('Serif')} />
 						<label htmlFor="body-serif">Serif</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="radio" id="body-apparatus" name="body-font" value="Apparatus SIL" checked={bodyFont === 'Apparatus SIL'} onChange={() => changeBodyFont('Apparatus SIL')} />
 						<label htmlFor="body-apparatus">Apparatus SIL</label>
 					</div>
 				</div>
 				<div className="setting-group">
 					<h4>Article Font</h4>
 					<div className="font-option">
 						<input className="checkbox" type="radio" id="article-sans-serif" name="article-font" value="Sans Serif" checked={articleFont === 'Sans Serif'} onChange={() => changeArticleFont('Sans Serif')} />
 						<label htmlFor="article-sans-serif">Sans Serif</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="radio" id="article-serif" name="article-font" value="Serif" checked={articleFont === 'Serif'} onChange={() => changeArticleFont('Serif')} />
 						<label htmlFor="article-serif">Serif</label>
 					</div>
 					<div className="font-option">
 						<input className="checkbox" type="radio" id="article-apparatus" name="article-font" value="Apparatus SIL" checked={articleFont === 'Apparatus SIL'} onChange={() => changeArticleFont('Apparatus SIL')} />
 						<label htmlFor="article-apparatus">Apparatus SIL *</label>
 					</div>
 				</div>
 			</div>
 		</>
 	);
 }
 export default Settings;
--- a/webclient/src/Style-black.css
+++ b/webclient/src/Style-black.css
@@ -13,7 +13,7 @@
 .black .menu button,
 .black .story-text button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -82,7 +82,22 @@
 }
 .black .update-banner button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
 .black .modal-content {
 	background: #222;
 	border-color: #828282;
 	color: #ddd;
 }
 .black .modal-content button {
 	background-color: #222222;
 	border-color: #bbb;
 }
 .black .modal-content button.active {
 	background-color: #555;
 }
--- a/webclient/src/Style-dark.css
+++ b/webclient/src/Style-dark.css
@@ -13,7 +13,7 @@
 .dark .menu button,
 .dark .story-text button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
@@ -78,7 +78,22 @@
 }
 .dark .update-banner button {
-	background-color: #444444;
+	background-color: #222222;
 	border-color: #bbb;
 	color: #ddd;
 }
 .dark .modal-content {
 	background: #222;
 	border-color: #828282;
 	color: #ddd;
 }
 .dark .modal-content button {
 	background-color: #222222;
 	border-color: #bbb;
 }
 .dark .modal-content button.active {
 	background-color: #555;
 }
--- a/webclient/src/Style-light.css
+++ b/webclient/src/Style-light.css
@@ -1,6 +1,7 @@
 body {
 	text-rendering: optimizeLegibility;
-	font: 1rem/1.3 sans-serif;
+	font-size: 1rem;
 	line-height: 1.3;
 	color: #000000;
 	word-break: break-word;
 	font-kerning: normal;
@@ -85,6 +86,7 @@ pre {
 .slogan {
 	color: #828282;
 	margin-bottom: 0.5rem;
 }
 .theme {
@@ -198,7 +200,8 @@ span.source {
 }
 .story-text {
-	font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
+	font-size: 1.2rem;
 	line-height: 1.5;
 	margin-top: 1em;
 }
@@ -405,3 +408,97 @@ button.comment {
 	visibility: visible;
 	opacity: 1;
 }
 .settings-button {
 	float: right;
 	background: none;
 	border: none;
 	padding: 0;
 	cursor: pointer;
 	color: inherit;
 	font: inherit;
 }
 .modal-overlay {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0,0,0,0.5);
 	z-index: 100;
 }
 .modal-content {
 	position: absolute;
 	top: 1rem;
 	right: 1rem;
 	background: #eee;
 	color: #000;
 	padding: 1rem;
 	border-radius: 4px;
 	z-index: 101;
 	min-width: 250px;
 	border: 1px solid #828282;
 }
 .modal-content h3, .modal-content h4 {
 	margin-top: 0;
 	margin-bottom: 0.5rem;
 }
 .modal-content .setting-group {
 	margin-bottom: 1rem;
 }
 .modal-content button {
 	margin-right: 0.5rem;
 	padding: 0.25rem 0.75rem;
 	border: 1px solid #828282;
 	border-radius: 4px;
 	background-color: transparent;
 	cursor: pointer;
 	font: inherit;
 	color: inherit;
 }
 .modal-content button:last-child {
 	margin-right: 0;
 }
 .modal-content button.active {
 	background-color: #ccc;
 }
 .modal-content button:disabled {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
 .modal-content .font-size-display {
 	display: inline-block;
 	width: 50px;
 	text-align: center;
 	margin: 0 0.25rem;
 }
 .modal-content .font-option {
 	margin-bottom: 0.25rem;
 }
 .modal-content .gap {
 	margin-bottom: 0.75rem;
 }
 .close-modal-button {
 	position: absolute;
 	top: 0.5rem;
 	right: 0.75rem;
 	background: transparent;
 	border: none;
 	font-size: 1.5rem;
 	line-height: 1;
 	padding: 0;
 	cursor: pointer;
 	color: inherit;
 }
--- a/webclient/src/Style-red.css
+++ b/webclient/src/Style-red.css
@@ -22,7 +22,7 @@
 .red .menu button,
 .red .story-text button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 	color: #b00;
 }
@@ -100,7 +100,22 @@
 }
 .red .update-banner button {
-	background-color: #440000;
+	background-color: #220000;
 	border-color: #b00;
 	color: #d00;
 }
 .red .modal-content {
 	background: #100;
 	border-color: #690000;
 	color: #b00;
 }
 .red .modal-content button {
 	background-color: #220000;
 	border-color: #b00;
 }
 .red .modal-content button.active {
 	background-color: #550000;
 }
Author	SHA1	Message	Date
Tanner Collin	09ea2535e0	refactor: Extract settings modal to dedicated component Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-06 20:08:43 +00:00
Tanner Collin	6b6e36d880	feat: Add settings component	2026-01-06 20:08:40 +00:00
Tanner Collin	cf789b1518	fix: Make update banner refresh button robust Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-06 20:03:59 +00:00
Tanner Collin	fc4eb077f0	Close settings modal on theme change or fullscreen	2026-01-06 19:58:31 +00:00
Tanner Collin	3120207bd9	Switch noscript redirect query param This will match the blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/], in serviceWorker.js	2026-01-06 19:10:07 +00:00
Tanner Collin	d7c35c18a7	fix: Hide visible template tags by moving noscript block Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-06 18:48:35 +00:00
Tanner Collin	0111263163	fix: Reload cached index.html when JavaScript is disabled Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-06 18:13:06 +00:00
Tanner Collin	98955a1ce7	Style fixes	2026-01-03 23:26:56 +00:00
Tanner Collin	83cc49e7ec	style: Make settings button appear as plain text Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 19:51:18 +00:00
Tanner Collin	82d96f3b7b	style: Refine settings button style	2026-01-03 19:51:16 +00:00
Tanner Collin	9d5ba84f0d	fix: Fix modal overlay positioning	2026-01-03 00:50:34 +00:00
Tanner Collin	5214e5676f	style: Style settings modal for dark, black, and red themes Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 00:43:31 +00:00
Tanner Collin	fa030a069c	fix: Allow modal to scroll with page content Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 00:22:36 +00:00
Tanner Collin	7faebe346e	feat: Add X close button to settings modal Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 00:19:14 +00:00
Tanner Collin	fcb78b9803	style: Add spacing to settings modal for readability	2026-01-03 00:19:12 +00:00
Tanner Collin	d133383c06	feat: Move fullscreen toggle to settings modal Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 00:15:44 +00:00
Tanner Collin	4240ff07df	style: Adjust feed filter label and spacing	2026-01-03 00:15:41 +00:00
Tanner Collin	5554b58f93	fix: Make feed update check more robust by comparing all story IDs Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 00:09:25 +00:00
Tanner Collin	ab15868397	feat: Add feed source filtering to settings and API Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-03 00:01:46 +00:00
Tanner Collin	93903eedf9	feat: Move "Small websites" filter to settings dialog Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 23:51:23 +00:00
Tanner Collin	e0f523cc1c	feat: Add body and article font selection settings Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 22:11:28 +00:00
Tanner Collin	cf35bd53bf	style: Remove redundant font inheritance from comment button	2026-01-02 22:11:26 +00:00
Tanner Collin	0fd3589313	feat: Consolidate font size settings; adjust increment to 0.05 Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 22:06:39 +00:00
Tanner Collin	6dce141862	fix: Use em unit for story font size	2026-01-02 22:06:35 +00:00
Tanner Collin	a8a794bc65	refactor: Standardize font size units to rem and add per-setting resets Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 21:49:07 +00:00
Tanner Collin	656c322249	feat: Keep settings menu open after theme selection	2026-01-02 21:49:02 +00:00
Tanner Collin	cde095169f	feat: Implement settings modal with theme and font size adjustments Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 21:39:54 +00:00
Tanner Collin	649b8a0da4	fix: Prevent React app flash by hiding static content with display: none Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 20:52:07 +00:00
Tanner Collin	407c995d9f	fix: Prevent content and dark mode background flashes on load Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>	2026-01-02 20:44:10 +00:00