feat: Move "Small websites" filter to settings dialog

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/App.js

@@ -25,6 +25,7 @@ function App() {
 	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 updateCache = useCallback((key, value) => {
 		cache.current[key] = value;
@@ -50,6 +51,12 @@ function App() {
 		localStorage.setItem('theme', 'red');
 	};
 
+	const handleFilterChange = e => {
+		const isChecked = e.target.checked;
+		setFilterSmallweb(isChecked);
+		localStorage.setItem('filterSmallweb', isChecked);
+	};
+
 	const changeBodyFont = (font) => {
 		setBodyFont(font);
 		localStorage.setItem('bodyFont', font);
@@ -164,6 +171,13 @@ function App() {
 							<button className={theme === 'black' ? 'active' : ''} onClick={() => { black() }}>Black</button>
 							<button className={theme === 'red' ? 'active' : ''} onClick={() => { red() }}>Red</button>
 						</div>
+						<div className="setting-group">
+							<h4>Feed</h4>
+							<div className="font-option">
+								<input className="checkbox" type="checkbox" id="filter-smallweb" checked={filterSmallweb} onChange={handleFilterChange} />
+								<label htmlFor="filter-smallweb">Small websites</label>
+							</div>
+						</div>
 						<div className="setting-group">
 							<h4>Font Size</h4>
 							<button onClick={() => changeBodyFontSize(-0.05)}>-</button>
@@ -237,7 +251,7 @@ function App() {
 					<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} />} />
 				<Switch>
 					<Route path='/search' component={Results} />
 					<Route path='/:id' exact render={(props) => <Article {...props} cache={cache.current} />} />

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 }) {
 	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 => {
-		const isChecked = e.target.checked;
-		setStories(false);
-		setFilterSmallweb(isChecked);
-		localStorage.setItem('filterSmallweb', isChecked);
-	};
+	useEffect(() => {
+		if (isInitialMount.current) {
+			isInitialMount.current = false;
+		} else {
+			setStories(false);
+		}
+	}, [filterSmallweb]);
 
 	useEffect(() => {
 		const controller = new AbortController();
@@ -125,11 +126,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>