feat: Sort and scroll search results, preserving scroll position

mapper/src/App.js

@@ -315,6 +315,23 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 	const [showRange, setShowRange] = useState(false);
 	const [isSearching, setIsSearching] = useState(false);
 	const [searchResults, setSearchResults] = useState(null);
+	const scrollContainerRef = useRef(null);
+	const scrollPositionRef = useRef(0);
+
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (container) {
+			// Restore scroll position when results are shown
+			container.scrollTop = scrollPositionRef.current;
+		}
+
+		return () => {
+			// Save scroll position when results are hidden
+			if (container) {
+				scrollPositionRef.current = container.scrollTop;
+			}
+		};
+	}, [searchResults]);
 
 	const chooseDuration = (x) => {
 		setSubmenu(false);
@@ -648,10 +665,12 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 								)}
 							</div>
 							{searchResults ? (
-								<>
+								<div ref={scrollContainerRef} style={{ maxHeight: '50vh', overflowY: 'auto' }}>
 									{searchResults.length > 0 ? (
 										(() => {
-											const groupedResults = searchResults.reduce((acc, result) => {
+											const sortedResults = [...searchResults].sort((a, b) => b.start - a.start);
+
+											const groupedResults = sortedResults.reduce((acc, result) => {
 												const groupKey = moment.unix(result.start).format('YYYY');
 												if (!acc[groupKey]) {
 													acc[groupKey] = [];
@@ -669,7 +688,9 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 												}
 											};
 
-											return Object.entries(groupedResults).map(([groupKey, results]) => (
+											return Object.entries(groupedResults)
+												.sort(([yearA], [yearB]) => yearB - yearA)
+												.map(([groupKey, results]) => (
 												<div key={groupKey}>
 													<h3 style={{ color: 'white', margin: '0.5em 0 0.25em', fontSize: '1em', fontWeight: 'normal', textAlign: 'center' }}>{groupKey}</h3>
 													{results.map((result, index) => (
@@ -683,7 +704,7 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 									) : (
 										<p style={{color: 'white', textAlign: 'center', padding: '1em 0'}}>No results found.</p>
 									)}
-								</>
+								</div>
 							) : (
 								<>
 									<label className="submenu-checkbox-label">