From 42433dc30b1d0ea1a731f6e696ed7692ddc70bff Mon Sep 17 00:00:00 2001
From: sudacode <suda@sudacode.com>
Date: Mon, 6 Jul 2026 00:29:21 -0700
Subject: [PATCH] feat(stats): persist trend title visibility and add per-chart
 title limit

Hidden-title selections in the Trends tab now survive relaunches via
localStorage, and a 'Top N per chart' selector (All/3/5/7/10, also
persisted) restores the old top-N declutter behavior on demand.
---
 .../trends/StackedTrendChart.test.ts          | 13 +++
 .../components/trends/StackedTrendChart.tsx   | 19 +++-
 .../src/components/trends/TrendsTab.test.tsx  | 20 +++++
 stats/src/components/trends/TrendsTab.tsx     | 86 +++++++++++++++----
 .../trends/anime-visibility.test.ts           | 70 +++++++++++++++
 .../src/components/trends/anime-visibility.ts | 57 ++++++++++++
 6 files changed, 243 insertions(+), 22 deletions(-)

diff --git a/stats/src/components/trends/StackedTrendChart.test.ts b/stats/src/components/trends/StackedTrendChart.test.ts
index 7902389e..142a8425 100644
--- a/stats/src/components/trends/StackedTrendChart.test.ts
+++ b/stats/src/components/trends/StackedTrendChart.test.ts
@@ -22,6 +22,19 @@ test('buildLineData keeps every title as a series instead of capping at the top
   }
 });
 
+test('buildLineData caps series at maxSeries when set, keeping the top titles', () => {
+  const { points, seriesKeys } = buildLineData(makePoints(17), 7);
+
+  assert.equal(seriesKeys.length, 7);
+  assert.deepEqual(
+    seriesKeys,
+    Array.from({ length: 7 }, (_, i) => `Title ${i}`),
+  );
+  for (const row of points) {
+    assert.ok(!('Title 16' in row));
+  }
+});
+
 test('buildLineData orders series by total value descending', () => {
   const { seriesKeys } = buildLineData([
     { epochDay: 20_000, animeTitle: 'Small', value: 1 },
diff --git a/stats/src/components/trends/StackedTrendChart.tsx b/stats/src/components/trends/StackedTrendChart.tsx
index 5b3b634e..71eb1d85 100644
--- a/stats/src/components/trends/StackedTrendChart.tsx
+++ b/stats/src/components/trends/StackedTrendChart.tsx
@@ -20,6 +20,7 @@ interface StackedTrendChartProps {
   title: string;
   data: PerAnimeDataPoint[];
   colorPalette?: string[];
+  maxSeries?: number | null;
 }
 
 const DEFAULT_LINE_COLORS = [
@@ -33,18 +34,23 @@ const DEFAULT_LINE_COLORS = [
   '#f4dbd6',
 ];
 
-export function buildLineData(raw: PerAnimeDataPoint[]) {
+export function buildLineData(raw: PerAnimeDataPoint[], maxSeries?: number | null) {
   const totalByAnime = new Map<string, number>();
   for (const entry of raw) {
     totalByAnime.set(entry.animeTitle, (totalByAnime.get(entry.animeTitle) ?? 0) + entry.value);
   }
 
-  const seriesKeys = [...totalByAnime.entries()]
+  let seriesKeys = [...totalByAnime.entries()]
     .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
     .map(([title]) => title);
+  if (typeof maxSeries === 'number' && maxSeries > 0) {
+    seriesKeys = seriesKeys.slice(0, maxSeries);
+  }
+  const seriesSet = new Set(seriesKeys);
 
   const byDay = new Map<number, Record<string, number>>();
   for (const entry of raw) {
+    if (!seriesSet.has(entry.animeTitle)) continue;
     const row = byDay.get(entry.epochDay) ?? {};
     row[entry.animeTitle] = (row[entry.animeTitle] ?? 0) + Math.round(entry.value * 10) / 10;
     byDay.set(entry.epochDay, row);
@@ -68,8 +74,13 @@ export function buildLineData(raw: PerAnimeDataPoint[]) {
   return { points, seriesKeys };
 }
 
-export function StackedTrendChart({ title, data, colorPalette }: StackedTrendChartProps) {
-  const { points, seriesKeys } = buildLineData(data);
+export function StackedTrendChart({
+  title,
+  data,
+  colorPalette,
+  maxSeries,
+}: StackedTrendChartProps) {
+  const { points, seriesKeys } = buildLineData(data, maxSeries);
   const colors = colorPalette ?? DEFAULT_LINE_COLORS;
 
   if (points.length === 0) {
diff --git a/stats/src/components/trends/TrendsTab.test.tsx b/stats/src/components/trends/TrendsTab.test.tsx
index e6a55727..23b0a34c 100644
--- a/stats/src/components/trends/TrendsTab.test.tsx
+++ b/stats/src/components/trends/TrendsTab.test.tsx
@@ -8,9 +8,11 @@ test('AnimeVisibilityFilter uses title visibility wording', () => {
     <AnimeVisibilityFilter
       animeTitles={['KonoSuba']}
       hiddenAnime={new Set()}
+      maxTitles={null}
       onShowAll={() => {}}
       onHideAll={() => {}}
       onToggleAnime={() => {}}
+      onMaxTitlesChange={() => {}}
     />,
   );
 
@@ -18,6 +20,24 @@ test('AnimeVisibilityFilter uses title visibility wording', () => {
   assert.doesNotMatch(markup, /Anime Visibility/);
 });
 
+test('AnimeVisibilityFilter offers a per-chart title limit selector', () => {
+  const markup = renderToStaticMarkup(
+    <AnimeVisibilityFilter
+      animeTitles={['KonoSuba']}
+      hiddenAnime={new Set()}
+      maxTitles={7}
+      onShowAll={() => {}}
+      onHideAll={() => {}}
+      onToggleAnime={() => {}}
+      onMaxTitlesChange={() => {}}
+    />,
+  );
+
+  assert.match(markup, /per chart/);
+  assert.match(markup, /<option value="all">All<\/option>/);
+  assert.match(markup, /<option value="7" selected="">/);
+});
+
 test('TrendsTab source labels words per minute without reading speed wording', async () => {
   const source = await Bun.file(new URL('./TrendsTab.tsx', import.meta.url)).text();
 
diff --git a/stats/src/components/trends/TrendsTab.tsx b/stats/src/components/trends/TrendsTab.tsx
index 91987836..e092f03e 100644
--- a/stats/src/components/trends/TrendsTab.tsx
+++ b/stats/src/components/trends/TrendsTab.tsx
@@ -4,9 +4,14 @@ import { DateRangeSelector } from './DateRangeSelector';
 import { TrendChart } from './TrendChart';
 import { StackedTrendChart } from './StackedTrendChart';
 import {
+  MAX_TITLES_OPTIONS,
   buildAnimeVisibilityOptions,
   filterHiddenAnimeData,
+  loadHiddenTitles,
+  loadMaxTitles,
   pruneHiddenAnime,
+  saveHiddenTitles,
+  saveMaxTitles,
 } from './anime-visibility';
 import { LibrarySummarySection } from './LibrarySummarySection';
 
@@ -24,17 +29,21 @@ function SectionHeader({ children }: { children: React.ReactNode }) {
 interface AnimeVisibilityFilterProps {
   animeTitles: string[];
   hiddenAnime: ReadonlySet<string>;
+  maxTitles: number | null;
   onShowAll: () => void;
   onHideAll: () => void;
   onToggleAnime: (title: string) => void;
+  onMaxTitlesChange: (value: number | null) => void;
 }
 
 export function AnimeVisibilityFilter({
   animeTitles,
   hiddenAnime,
+  maxTitles,
   onShowAll,
   onHideAll,
   onToggleAnime,
+  onMaxTitlesChange,
 }: AnimeVisibilityFilterProps) {
   if (animeTitles.length === 0) {
     return null;
@@ -48,10 +57,28 @@ export function AnimeVisibilityFilter({
             Title Visibility
           </h4>
           <p className="mt-1 text-xs text-ctp-overlay1">
-            Shared across all anime trend charts. Default: show everything.
+            Shared across all anime trend charts. Default: show everything. Selections are saved.
           </p>
         </div>
         <div className="flex items-center gap-2">
+          <label className="flex items-center gap-1 text-[11px] text-ctp-subtext0">
+            Top
+            <select
+              className="rounded-md border border-ctp-surface2 bg-ctp-surface0 px-1.5 py-1 text-[11px] font-medium text-ctp-text transition hover:border-ctp-blue"
+              value={maxTitles === null ? 'all' : String(maxTitles)}
+              onChange={(event) =>
+                onMaxTitlesChange(event.target.value === 'all' ? null : Number(event.target.value))
+              }
+            >
+              <option value="all">All</option>
+              {MAX_TITLES_OPTIONS.map((count) => (
+                <option key={count} value={count}>
+                  {count}
+                </option>
+              ))}
+            </select>
+            per chart
+          </label>
           <button
             type="button"
             className="rounded-md border border-ctp-surface2 px-2 py-1 text-[11px] font-medium text-ctp-text transition hover:border-ctp-blue hover:text-ctp-blue"
@@ -96,8 +123,18 @@ export function AnimeVisibilityFilter({
 export function TrendsTab() {
   const [range, setRange] = useState<TimeRange>('30d');
   const [groupBy, setGroupBy] = useState<GroupBy>('day');
-  const [hiddenAnime, setHiddenAnime] = useState<Set<string>>(() => new Set());
+  const [hiddenAnime, setHiddenAnime] = useState<Set<string>>(() => loadHiddenTitles());
+  const [maxTitles, setMaxTitles] = useState<number | null>(() => loadMaxTitles());
   const { data, loading, error } = useTrends(range, groupBy);
+
+  const updateHiddenAnime = (next: Set<string>) => {
+    setHiddenAnime(next);
+    saveHiddenTitles(next);
+  };
+  const updateMaxTitles = (value: number | null) => {
+    setMaxTitles(value);
+    saveMaxTitles(value);
+  };
   const cardsMinedColor = 'var(--color-ctp-cards-mined)';
   const cardsMinedStackedColors = [
     cardsMinedColor,
@@ -246,28 +283,41 @@ export function TrendsTab() {
         <AnimeVisibilityFilter
           animeTitles={animeTitles}
           hiddenAnime={activeHiddenAnime}
-          onShowAll={() => setHiddenAnime(new Set())}
-          onHideAll={() => setHiddenAnime(new Set(animeTitles))}
-          onToggleAnime={(title) =>
-            setHiddenAnime((current) => {
-              const next = new Set(current);
-              if (next.has(title)) {
-                next.delete(title);
-              } else {
-                next.add(title);
-              }
-              return next;
-            })
-          }
+          maxTitles={maxTitles}
+          onShowAll={() => updateHiddenAnime(new Set())}
+          onHideAll={() => updateHiddenAnime(new Set(animeTitles))}
+          onToggleAnime={(title) => {
+            const next = new Set(hiddenAnime);
+            if (next.has(title)) {
+              next.delete(title);
+            } else {
+              next.add(title);
+            }
+            updateHiddenAnime(next);
+          }}
+          onMaxTitlesChange={updateMaxTitles}
+        />
+        <StackedTrendChart
+          title="Watch Time Progress (min)"
+          data={filteredWatchTimeProgress}
+          maxSeries={maxTitles}
+        />
+        <StackedTrendChart
+          title="Episodes Progress"
+          data={filteredAnimeProgress}
+          maxSeries={maxTitles}
         />
-        <StackedTrendChart title="Watch Time Progress (min)" data={filteredWatchTimeProgress} />
-        <StackedTrendChart title="Episodes Progress" data={filteredAnimeProgress} />
         <StackedTrendChart
           title="Cards Mined Progress"
           data={filteredCardsProgress}
           colorPalette={cardsMinedStackedColors}
+          maxSeries={maxTitles}
+        />
+        <StackedTrendChart
+          title="Words Seen Progress"
+          data={filteredWordsProgress}
+          maxSeries={maxTitles}
         />
-        <StackedTrendChart title="Words Seen Progress" data={filteredWordsProgress} />
 
         <SectionHeader>Library — Summary</SectionHeader>
         <LibrarySummarySection rows={data.librarySummary} hiddenTitles={activeHiddenAnime} />
diff --git a/stats/src/components/trends/anime-visibility.test.ts b/stats/src/components/trends/anime-visibility.test.ts
index 1519ffa9..846f734c 100644
--- a/stats/src/components/trends/anime-visibility.test.ts
+++ b/stats/src/components/trends/anime-visibility.test.ts
@@ -5,9 +5,36 @@ import type { PerAnimeDataPoint } from './StackedTrendChart';
 import {
   buildAnimeVisibilityOptions,
   filterHiddenAnimeData,
+  loadHiddenTitles,
+  loadMaxTitles,
   pruneHiddenAnime,
+  saveHiddenTitles,
+  saveMaxTitles,
 } from './anime-visibility';
 
+function installLocalStorage(initial: Record<string, string> = {}) {
+  const previous = Object.getOwnPropertyDescriptor(globalThis, 'localStorage');
+  const values = new Map(Object.entries(initial));
+  Object.defineProperty(globalThis, 'localStorage', {
+    configurable: true,
+    value: {
+      getItem: (key: string) => values.get(key) ?? null,
+      setItem: (key: string, value: string) => values.set(key, value),
+      removeItem: (key: string) => values.delete(key),
+    },
+  });
+  return {
+    values,
+    restore: () => {
+      if (previous) {
+        Object.defineProperty(globalThis, 'localStorage', previous);
+      } else {
+        delete (globalThis as { localStorage?: unknown }).localStorage;
+      }
+    },
+  };
+}
+
 const SAMPLE_POINTS: PerAnimeDataPoint[] = [
   { epochDay: 1, animeTitle: 'KonoSuba', value: 5 },
   { epochDay: 2, animeTitle: 'KonoSuba', value: 10 },
@@ -45,3 +72,46 @@ test('pruneHiddenAnime drops titles that are no longer available', () => {
 
   assert.deepEqual([...hidden], ['KonoSuba']);
 });
+
+test('hidden titles round-trip through localStorage', () => {
+  const { restore } = installLocalStorage();
+  try {
+    saveHiddenTitles(new Set(['KonoSuba', 'One Piece']));
+    assert.deepEqual([...loadHiddenTitles()], ['KonoSuba', 'One Piece']);
+  } finally {
+    restore();
+  }
+});
+
+test('loadHiddenTitles tolerates missing or malformed stored values', () => {
+  const { restore } = installLocalStorage({
+    'subminer-stats-trends-hidden-titles': '{"not":"an array"}',
+  });
+  try {
+    assert.deepEqual([...loadHiddenTitles()], []);
+  } finally {
+    restore();
+  }
+});
+
+test('max titles preference round-trips and clears when set to null', () => {
+  const { values, restore } = installLocalStorage();
+  try {
+    saveMaxTitles(7);
+    assert.equal(loadMaxTitles(), 7);
+    saveMaxTitles(null);
+    assert.equal(loadMaxTitles(), null);
+    assert.equal(values.has('subminer-stats-trends-max-titles'), false);
+  } finally {
+    restore();
+  }
+});
+
+test('loadMaxTitles rejects non-positive or non-numeric stored values', () => {
+  const { restore } = installLocalStorage({ 'subminer-stats-trends-max-titles': 'banana' });
+  try {
+    assert.equal(loadMaxTitles(), null);
+  } finally {
+    restore();
+  }
+});
diff --git a/stats/src/components/trends/anime-visibility.ts b/stats/src/components/trends/anime-visibility.ts
index 42ac0f68..b7099d9a 100644
--- a/stats/src/components/trends/anime-visibility.ts
+++ b/stats/src/components/trends/anime-visibility.ts
@@ -1,5 +1,62 @@
 import type { PerAnimeDataPoint } from './StackedTrendChart';
 
+const HIDDEN_TITLES_KEY = 'subminer-stats-trends-hidden-titles';
+const MAX_TITLES_KEY = 'subminer-stats-trends-max-titles';
+
+export const MAX_TITLES_OPTIONS = [3, 5, 7, 10] as const;
+
+function getStorage(): Storage | null {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function loadHiddenTitles(): Set<string> {
+  try {
+    const raw = getStorage()?.getItem(HIDDEN_TITLES_KEY);
+    const parsed: unknown = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(parsed)) return new Set();
+    return new Set(parsed.filter((value): value is string => typeof value === 'string'));
+  } catch {
+    return new Set();
+  }
+}
+
+export function saveHiddenTitles(hidden: ReadonlySet<string>): void {
+  try {
+    getStorage()?.setItem(HIDDEN_TITLES_KEY, JSON.stringify([...hidden]));
+  } catch {
+    // Storage can be blocked in private/restricted contexts; keep the in-memory choice.
+  }
+}
+
+export function loadMaxTitles(): number | null {
+  try {
+    const raw = getStorage()?.getItem(MAX_TITLES_KEY);
+    if (raw === null || raw === undefined) return null;
+    const value = Number(raw);
+    return Number.isInteger(value) && value > 0 ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveMaxTitles(value: number | null): void {
+  try {
+    const storage = getStorage();
+    if (!storage) return;
+    if (value === null) {
+      storage.removeItem(MAX_TITLES_KEY);
+    } else {
+      storage.setItem(MAX_TITLES_KEY, String(value));
+    }
+  } catch {
+    // Storage can be blocked in private/restricted contexts; keep the in-memory choice.
+  }
+}
+
 export function buildAnimeVisibilityOptions(datasets: PerAnimeDataPoint[][]): string[] {
   const totals = new Map<string, number>();
   for (const dataset of datasets) {