feat(stats): add library entry merge and episode move

- Add multi-select "Merge Selected" flow to fold duplicate library cards into one, preserving sessions, mined cards, and watch time
- Add per-episode "move to another entry" action for reassigning stray episodes, pruning the source entry when emptied
- Auto-merge library entries that resolve to the same AniList id when their parsed seasons are compatible
- Add mergeAnime/moveVideoToAnime service methods, stats-server routes, and HTTP contract types
This commit is contained in:
2026-08-10 22:52:34 -07:00
parent 2fefc83e3f
commit 5938095d92
19 changed files with 1629 additions and 9 deletions
+66 -1
View File
@@ -9,6 +9,7 @@ import {
} from '../../lib/library-card-size';
import { AnimeCard } from './AnimeCard';
import { AnimeDetailView } from './AnimeDetailView';
import { AnimeMergeDialog } from './AnimeMergeDialog';
type SortKey = 'lastWatched' | 'watchTime' | 'cards' | 'episodes';
@@ -62,6 +63,21 @@ export function AnimeTab({
),
);
const [selectedAnimeId, setSelectedAnimeId] = useState<number | null>(null);
const [selectionMode, setSelectionMode] = useState(false);
const [checkedAnimeIds, setCheckedAnimeIds] = useState<number[]>([]);
const [showMergeDialog, setShowMergeDialog] = useState(false);
function toggleChecked(animeId: number): void {
setCheckedAnimeIds((ids) =>
ids.includes(animeId) ? ids.filter((id) => id !== animeId) : [...ids, animeId],
);
}
function exitSelectionMode(): void {
setSelectionMode(false);
setCheckedAnimeIds([]);
setShowMergeDialog(false);
}
function handleCardSizeChange(size: LibraryCardSize): void {
setCardSize(size);
@@ -86,6 +102,9 @@ export function AnimeTab({
}, [anime, search, sortKey]);
const totalMs = anime.reduce((sum, a) => sum + a.totalActiveMs, 0);
const checkedEntries = checkedAnimeIds
.map((animeId) => anime.find((entry) => entry.animeId === animeId))
.filter((entry): entry is (typeof anime)[number] => entry !== undefined);
if (selectedAnimeId !== null) {
return (
@@ -100,6 +119,7 @@ export function AnimeTab({
}
onAnimeDeleted={reload}
onAnilistRelinked={reload}
onEpisodeMoved={reload}
/>
);
}
@@ -143,11 +163,41 @@ export function AnimeTab({
</button>
))}
</div>
<button
type="button"
onClick={() => (selectionMode ? exitSelectionMode() : setSelectionMode(true))}
title="Select several entries to merge them into one"
className={`px-2 py-2 rounded-lg border text-xs shrink-0 transition-colors ${
selectionMode
? 'bg-ctp-blue/15 border-ctp-blue/40 text-ctp-blue'
: 'bg-ctp-surface0 border-ctp-surface1 text-ctp-overlay2 hover:text-ctp-subtext0'
}`}
>
{selectionMode ? 'Cancel' : 'Select'}
</button>
<div className="text-xs text-ctp-overlay2 shrink-0">
{filtered.length} titles · {formatDuration(totalMs)}
</div>
</div>
{selectionMode && (
<div className="flex items-center justify-between gap-3 bg-ctp-surface0 border border-ctp-surface1 rounded-lg px-3 py-2">
<div className="text-xs text-ctp-overlay2">
{checkedEntries.length === 0
? 'Pick the duplicate entries to combine'
: `${checkedEntries.length} selected`}
</div>
<button
type="button"
disabled={checkedEntries.length < 2}
onClick={() => setShowMergeDialog(true)}
className="px-3 py-1.5 rounded-lg bg-ctp-blue/15 border border-ctp-blue/40 text-xs text-ctp-blue hover:bg-ctp-blue/25 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
>
Merge Selected
</button>
</div>
)}
{filtered.length === 0 ? (
<div className="text-sm text-ctp-overlay2 p-4">No titles found</div>
) : (
@@ -156,11 +206,26 @@ export function AnimeTab({
<AnimeCard
key={item.animeId}
anime={item}
onClick={() => setSelectedAnimeId(item.animeId)}
selectable={selectionMode}
selected={checkedAnimeIds.includes(item.animeId)}
onClick={() =>
selectionMode ? toggleChecked(item.animeId) : setSelectedAnimeId(item.animeId)
}
/>
))}
</div>
)}
{showMergeDialog && checkedEntries.length >= 2 && (
<AnimeMergeDialog
entries={checkedEntries}
onClose={() => setShowMergeDialog(false)}
onMerged={() => {
exitSelectionMode();
reload();
}}
/>
)}
</div>
);
}