add paths page to check volume accessibility after scan

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 10:31:05 +01:00
parent 923f9afafc
commit da668b2d36
5 changed files with 119 additions and 0 deletions
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { api } from '~/shared/lib/api';
+import { Badge } from '~/shared/components/ui/badge';
+import { Button } from '~/shared/components/ui/button';
+
+interface PathInfo {
+	prefix: string;
+	itemCount: number;
+	accessible: boolean;
+}
+
+export function PathsPage() {
+	const [paths, setPaths] = useState<PathInfo[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	const load = () => {
+		setLoading(true);
+		api.get<{ paths: PathInfo[] }>('/api/paths')
+			.then((d) => setPaths(d.paths))
+			.finally(() => setLoading(false));
+	};
+
+	useEffect(() => { load(); }, []);
+
+	return (
+		<div>
+			<div className="flex items-center gap-3 mb-4">
+				<h1 className="text-lg font-bold">Paths</h1>
+				<Button variant="secondary" size="sm" onClick={load} disabled={loading}>
+					{loading ? 'Checking…' : 'Refresh'}
+				</Button>
+			</div>
+
+			{paths.length === 0 && !loading && (
+				<p className="text-gray-500">No media items scanned yet. Run a scan first.</p>
+			)}
+
+			{paths.length > 0 && (
+				<>
+					<table className="w-full text-left border-collapse">
+						<thead>
+							<tr className="border-b border-gray-200 text-xs text-gray-500 uppercase tracking-wide">
+								<th className="py-2 pr-4">Path</th>
+								<th className="py-2 pr-4 text-right">Items</th>
+								<th className="py-2">Status</th>
+							</tr>
+						</thead>
+						<tbody>
+							{paths.map((p) => (
+								<tr key={p.prefix} className="border-b border-gray-100">
+									<td className="py-2 pr-4 font-mono text-sm">{p.prefix}</td>
+									<td className="py-2 pr-4 text-right tabular-nums">{p.itemCount}</td>
+									<td className="py-2">
+										{p.accessible ? (
+											<Badge variant="keep">Accessible</Badge>
+										) : (
+											<Badge variant="error">Not mounted</Badge>
+										)}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+
+					{paths.some((p) => !p.accessible) && (
+						<p className="mt-4 text-xs text-gray-500">
+							Paths marked "Not mounted" are not reachable from the container.
+							Add a Docker volume mount for the missing path, or configure a path mapping in Settings to translate the Jellyfin path to a local path.
+						</p>
+					)}
+				</>
+			)}
+		</div>
+	);
+}