feat(frontend): slice 2 — migrate 11 shared components to shadcn/Tailwind

Web UI rework. Shared-components slice (drift prevention):
- Migrate SectionCard, SelectionRailCard, TabbedCard, MetricCard,
  DiskSpaceCard, HoverEditButton, DialogFooter, ConfirmDialog,
  LibraryOverview, NowPlaying, SessionActivityPanel off @mui
- HoverEditButton: MUI IconButton + EditOutlined -> Button + lucide Pencil
- Status mapping uses the success Badge variant (chart-2) for healthy
- Exported APIs preserved so consuming pages still compile (no page edits)
- 11 behavioral Vitest component tests added

Gate: build + lint + test green.

frontend/src/components/LibraryOverview.tsx

@@ -1,56 +1,57 @@
-import { Card, CardContent, Grid, Stack, Typography } from "@mui/material";
+import { Card, CardContent } from "@/components/ui/card";
 import type { LibraryCount } from "../types";
 
 interface Props {
 	libraries: LibraryCount[];
 }
 
+/**
+ * Two-column overview of movie and TV libraries on a responsive CSS grid
+ * (`grid grid-cols-1 md:grid-cols-2 gap-4`). Same exported props as the MUI
+ * version; the per-library counts render verbatim.
+ */
 export function LibraryOverview({ libraries }: Props) {
 	const movieLibs = libraries.filter((l) => l.type === "movies");
 	const tvLibs = libraries.filter((l) => l.type === "tvshows");
 
 	return (
-		<Grid container spacing={2}>
-			<Grid size={{ xs: 12, md: 6 }}>
-				<Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1 }}>
+		<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+			<div className="flex flex-col gap-4">
+				<h4 className="text-sm font-semibold text-muted-foreground">
 					Movie libraries
-				</Typography>
-				<Stack spacing={1.5}>
+				</h4>
+				<div className="flex flex-col gap-4">
 					{movieLibs.map((lib) => (
-						<Card key={lib.library} variant="outlined">
-							<CardContent>
-								<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-									{lib.library}
-								</Typography>
-								<Typography variant="body2" color="text.secondary">
+						<Card key={lib.library}>
+							<CardContent className="flex flex-col gap-1">
+								<span className="text-base font-semibold">{lib.library}</span>
+								<span className="text-sm text-muted-foreground">
 									Total: {lib.total.toLocaleString()} | Movies:{" "}
 									{lib.movies.toLocaleString()}
-								</Typography>
+								</span>
 							</CardContent>
 						</Card>
 					))}
-				</Stack>
-			</Grid>
-			<Grid size={{ xs: 12, md: 6 }}>
-				<Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1 }}>
+				</div>
+			</div>
+			<div className="flex flex-col gap-4">
+				<h4 className="text-sm font-semibold text-muted-foreground">
 					TV libraries
-				</Typography>
-				<Stack spacing={1.5}>
+				</h4>
+				<div className="flex flex-col gap-4">
 					{tvLibs.map((lib) => (
-						<Card key={lib.library} variant="outlined">
-							<CardContent>
-								<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-									{lib.library}
-								</Typography>
-								<Typography variant="body2" color="text.secondary">
+						<Card key={lib.library}>
+							<CardContent className="flex flex-col gap-1">
+								<span className="text-base font-semibold">{lib.library}</span>
+								<span className="text-sm text-muted-foreground">
 									Total: {lib.total.toLocaleString()} | Series:{" "}
 									{lib.series.toLocaleString()}
-								</Typography>
+								</span>
 							</CardContent>
 						</Card>
 					))}
-				</Stack>
-			</Grid>
-		</Grid>
+				</div>
+			</div>
+		</div>
 	);
 }