refactor frontend and backend modules

frontend/src/pages/Media.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { DataGrid } from "@mui/x-data-grid";
 import type { GridColDef } from "@mui/x-data-grid";
@@ -26,6 +26,7 @@ import {
 	useStopBuildIndex,
 	useForceStopBuildIndex,
 } from "../hooks/useMedia";
+import { usePersistentState } from "../hooks/usePersistentState";
 import type { MediaItem } from "../types";
 
 function formatDuration(seconds: number | null | undefined): string {
@@ -39,6 +40,28 @@ function formatDuration(seconds: number | null | undefined): string {
 	return `${secs}s`;
 }
 
+const MEDIA_TAB_STATE_KEY = "manage.media.tabState";
+
+type MediaTabState = {
+	search: string;
+	types: string;
+	hdrFilter: string;
+	sortKey: string;
+	sortOrder: string;
+	offset: number;
+};
+
+function defaultMediaTabState(): MediaTabState {
+	return {
+		search: "",
+		types: "Movie,Episode",
+		hdrFilter: "All",
+		sortKey: "title",
+		sortOrder: "Ascending",
+		offset: 0,
+	};
+}
+
 export function Media() {
 	const navigate = useNavigate();
 	const isMobile = useMediaQuery("(max-width: 900px)");
@@ -47,13 +70,14 @@ export function Media() {
 	const stopBuildIndex = useStopBuildIndex();
 	const forceStopBuildIndex = useForceStopBuildIndex();
 
-	const [search, setSearch] = useState("");
-	const [types, setTypes] = useState("Movie,Episode");
-	const [hdrFilter, setHdrFilter] = useState("All");
-	const [sortKey, setSortKey] = useState("title");
-	const [sortOrder, setSortOrder] = useState("Ascending");
-	const [limit] = useState(100);
-	const [offset, setOffset] = useState(0);
+	const [mediaState, setMediaState] = usePersistentState<MediaTabState>(
+		MEDIA_TAB_STATE_KEY,
+		defaultMediaTabState,
+	);
+	const { search, types, hdrFilter, sortKey, sortOrder, offset } = mediaState;
+	const updateMediaState = (patch: Partial<MediaTabState>) =>
+		setMediaState((current) => ({ ...current, ...patch }));
+	const limit = 100;
 
 	const { data: queryResult, isLoading } = useMediaDataQuery({
 		types,
@@ -256,8 +280,7 @@ export function Media() {
 								size="small"
 								value={search}
 								onChange={(e) => {
-									setSearch(e.target.value);
-									setOffset(0);
+									updateMediaState({ search: e.target.value, offset: 0 });
 								}}
 							/>
 						</Grid>
@@ -268,8 +291,7 @@ export function Media() {
 									label="Types"
 									value={types}
 									onChange={(e) => {
-										setTypes(e.target.value);
-										setOffset(0);
+										updateMediaState({ types: e.target.value, offset: 0 });
 									}}
 								>
 									<MenuItem value="Movie,Episode">Movies + Episodes</MenuItem>
@@ -286,8 +308,7 @@ export function Media() {
 									label="HDR"
 									value={hdrFilter}
 									onChange={(e) => {
-										setHdrFilter(e.target.value);
-										setOffset(0);
+										updateMediaState({ hdrFilter: e.target.value, offset: 0 });
 									}}
 								>
 									<MenuItem value="All">All</MenuItem>
@@ -302,7 +323,9 @@ export function Media() {
 								<Select
 									label="Sort"
 									value={sortKey}
-									onChange={(e) => setSortKey(e.target.value)}
+									onChange={(e) =>
+										updateMediaState({ sortKey: e.target.value })
+									}
 								>
 									{[
 										["title", "Title"],
@@ -327,7 +350,9 @@ export function Media() {
 								<Select
 									label="Order"
 									value={sortOrder}
-									onChange={(e) => setSortOrder(e.target.value)}
+									onChange={(e) =>
+										updateMediaState({ sortOrder: e.target.value })
+									}
 								>
 									<MenuItem value="Ascending">Ascending</MenuItem>
 									<MenuItem value="Descending">Descending</MenuItem>
@@ -398,7 +423,9 @@ export function Media() {
 					<Button
 						variant="outlined"
 						size="small"
-						onClick={() => setOffset(Math.max(0, offset - limit))}
+						onClick={() =>
+							updateMediaState({ offset: Math.max(0, offset - limit) })
+						}
 						disabled={page <= 1}
 					>
 						Prev
@@ -409,7 +436,7 @@ export function Media() {
 					<Button
 						variant="outlined"
 						size="small"
-						onClick={() => setOffset(offset + limit)}
+						onClick={() => updateMediaState({ offset: offset + limit })}
 						disabled={page >= totalPages}
 					>
 						Next