feat: add settings page

Author: airscripts

src/components/browse-filters.tsx

@@ -1,9 +1,10 @@
 import { Search, X } from 'lucide-react';
 import { PAGE_SIZE } from '@/lib/config';
-import { useState, useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { LGTMEntry, Rarity } from '@/lib/lgtm';
+import { useState, useMemo, useEffect } from 'react';
 import { Pagination } from '@/components/pagination';
+import { SETTINGS_KEY, loadSettings } from '@/lib/settings';
 import { RARITY_LABELS, CATEGORY_LABELS, getAllRarities } from '@/lib/lgtm';
 import { CATEGORY_COLORS, RARITY_COLORS, RARITY_ORDER } from '@/lib/content';
 
@@ -119,12 +120,26 @@ export function BrowseFilters({ entries }: BrowseFiltersProps) {
   const allCategories = useMemo(() => [...new Set(entries.map((entry) => entry.category))].sort(), [entries]);
 
   const allRarities = getAllRarities();
+  const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const [search, setSearch] = useState('');
   const [activeCategories, setActiveCategories] = useState<Set<string>>(new Set());
   const [activeRarities, setActiveRarities] = useState<Set<string>>(new Set());
   const [sort, setSort] = useState<SortOption>('alpha');
   const [page, setPage] = useState(1);
 
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setPageSize(loadSettings().pageSize);
+
+    function onStorage(e: StorageEvent) {
+      if (e.key !== SETTINGS_KEY) return;
+      setPageSize(loadSettings().pageSize);
+    }
+
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
   function toggleCategory(category: string) {
     setActiveCategories((prev) => {
       const next = new Set(prev);
@@ -193,10 +208,10 @@ export function BrowseFilters({ entries }: BrowseFiltersProps) {
     });
   }, [entries, search, activeCategories, activeRarities, sort]);
 
-  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
   const clampedPage = Math.min(page, totalPages);
-  const pageStart = (clampedPage - 1) * PAGE_SIZE;
-  const paginated = filtered.slice(pageStart, pageStart + PAGE_SIZE);
+  const pageStart = (clampedPage - 1) * pageSize;
+  const paginated = filtered.slice(pageStart, pageStart + pageSize);
   const hasFilters = isFiltered(search, activeCategories, activeRarities);
 
   function clearAll() {
@@ -332,7 +347,7 @@ export function BrowseFilters({ entries }: BrowseFiltersProps) {
       >
         <p style={{ color: 'var(--color-text-muted)' }} className="m-0 text-sm">
           <strong style={{ color: 'var(--color-text)' }}>{filtered.length}</strong> of {entries.length} entries
-          {filtered.length > PAGE_SIZE && (
+          {filtered.length > pageSize && (
             <span style={{ color: 'var(--color-text-faint)' }} className="ml-2">
               page {clampedPage} of {totalPages}
             </span>

src/components/category-entries.tsx

@@ -1,17 +1,33 @@
-import { useState } from 'react';
 import { PAGE_SIZE } from '@/lib/config';
+import { useState, useEffect } from 'react';
 import type { LGTMEntry } from '@/lib/lgtm';
 import { Pagination } from '@/components/pagination';
+import { SETTINGS_KEY, loadSettings } from '@/lib/settings';
 
 export type CategoryEntriesProps = {
   entries: LGTMEntry[];
 };
 
 export function CategoryEntries({ entries }: CategoryEntriesProps) {
+  const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const [page, setPage] = useState(1);
-  const totalPages = Math.ceil(entries.length / PAGE_SIZE);
-  const start = (page - 1) * PAGE_SIZE;
-  const slice = entries.slice(start, start + PAGE_SIZE);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setPageSize(loadSettings().pageSize);
+
+    function onStorage(e: StorageEvent) {
+      if (e.key !== SETTINGS_KEY) return;
+      setPageSize(loadSettings().pageSize);
+    }
+
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
+  const totalPages = Math.ceil(entries.length / pageSize);
+  const start = (page - 1) * pageSize;
+  const slice = entries.slice(start, start + pageSize);
 
   function handlePageChange(pageNumber: number) {
     setPage(pageNumber);
@@ -25,11 +41,8 @@ export function CategoryEntries({ entries }: CategoryEntriesProps) {
           <a
             key={entry.id}
             href={`/lgtm/${entry.id}`}
+            style={{ color: 'inherit', borderColor: 'var(--color-border)' }}
             className="flex items-start gap-4 py-4 border-b no-underline transition-colors duration-150"
-            style={{
-              color: 'inherit',
-              borderColor: 'var(--color-border)',
-            }}
           >
             <span
               className="flex-shrink-0 text-xs pt-[0.2rem] min-w-[2.5rem]"

src/components/legendary-effect.tsx

@@ -1,8 +1,11 @@
 import { useEffect } from 'react';
 import confetti from 'canvas-confetti';
+import { loadSettings } from '@/lib/settings';
 
 export function LegendaryEffect() {
   useEffect(() => {
+    if (!loadSettings().confetti) return;
+
     confetti({
       spread: 90,
       particleCount: 120,

src/components/mascot.tsx

@@ -1,6 +1,7 @@
 import type { Rarity } from '@/lib/lgtm';
 import type { CSSProperties } from 'react';
 import type { MascotContext } from '@/lib/mascot-lines';
+import { SETTINGS_KEY, loadSettings } from '@/lib/settings';
 import { pickLine, contextFromPath } from '@/lib/mascot-lines';
 import { useRef, useState, useEffect, useCallback, Fragment } from 'react';
 
@@ -315,6 +316,21 @@ function cursorStyle(visible: boolean): CSSProperties {
 }
 
 export function Mascot({ rarity, isIndex }: MascotProps) {
+  const [enabled, setEnabled] = useState(true);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setEnabled(loadSettings().mascot);
+
+    function onStorage(e: StorageEvent) {
+      if (e.key !== SETTINGS_KEY) return;
+      setEnabled(loadSettings().mascot);
+    }
+
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
+
   const [pos, setPos] = useState<Pos>(() => {
     const saved = loadSavedPos();
     return saved && isPosInViewport(saved) ? saved : defaultPos();
@@ -499,6 +515,8 @@ export function Mascot({ rarity, isIndex }: MascotProps) {
   const bobY = prefersReducedMotion ? 0 : bobOffset(idleTick);
   const showCursor = isTalking && isStillTyping(shownLine, fullLine);
 
+  if (!enabled) return null;
+
   return (
     <Fragment>
       <div style={bubbleFixedStyle(isTalking, isDragging, pos)}>