RHL-015 feat(explorer): enable PDF opening in a new tab with dynamic URL generation

components/explorer/levels/FilesExplorer.jsx

@@ -14,6 +14,7 @@ import { sortFilesByNameAsc } from "@/lib/frontend/explorer/sorters";
 import { mapExplorerError } from "@/lib/frontend/explorer/errorMapping";
 import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";
 import { useExplorerQuery } from "@/lib/frontend/hooks/useExplorerQuery";
+import { buildPdfUrl } from "@/lib/frontend/explorer/pdfUrl";
 
 import ExplorerBreadcrumbs from "@/components/explorer/breadcrumbs/ExplorerBreadcrumbs";
 import ExplorerPageShell from "@/components/explorer/ExplorerPageShell";
@@ -227,7 +228,7 @@ export default function FilesExplorer({ branch, year, month, day }) {
 				) : (
 					<Table>
 						<TableCaption>
-							Hinweis: Die PDF-Ansicht folgt in einem späteren Ticket (RHL-023).
+							Hinweis: PDFs werden in einem neuen Tab geöffnet.
 						</TableCaption>
 
 						<TableHeader>
@@ -239,40 +240,52 @@ export default function FilesExplorer({ branch, year, month, day }) {
 						</TableHeader>
 
 						<TableBody>
-							{sorted.map((f) => (
-								<TableRow key={f.relativePath || f.name}>
-									<TableCell className="min-w-0">
-										<div className="flex min-w-0 items-start gap-2">
-											<FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-											<div className="min-w-0">
-												<p className="truncate font-medium">{f.name}</p>
-												<p className="truncate text-xs text-muted-foreground md:hidden">
-													{f.relativePath}
-												</p>
+							{sorted.map((f) => {
+								const pdfUrl = buildPdfUrl({
+									branch,
+									year,
+									month,
+									day,
+									filename: f.name,
+								});
+
+								return (
+									<TableRow key={f.relativePath || f.name}>
+										<TableCell className="min-w-0">
+											<div className="flex min-w-0 items-start gap-2">
+												<FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+												<div className="min-w-0">
+													<p className="truncate font-medium">{f.name}</p>
+													<p className="truncate text-xs text-muted-foreground md:hidden">
+														{f.relativePath}
+													</p>
+												</div>
 											</div>
-										</div>
-									</TableCell>
+										</TableCell>
 
-									<TableCell className="hidden md:table-cell">
-										<span className="text-xs text-muted-foreground">
-											{f.relativePath}
-										</span>
-									</TableCell>
+										<TableCell className="hidden md:table-cell">
+											<span className="text-xs text-muted-foreground">
+												{f.relativePath}
+											</span>
+										</TableCell>
 
-									<TableCell className="text-right">
-										<Button
-											variant="outline"
-											size="sm"
-											disabled
-											aria-disabled="true"
-											title="PDF-Ansicht kommt bald"
-										>
-											<Eye className="h-4 w-4" />
-											Öffnen
-										</Button>
-									</TableCell>
-								</TableRow>
-							))}
+										<TableCell className="text-right">
+											<Button variant="outline" size="sm" asChild>
+												<a
+													href={pdfUrl}
+													target="_blank"
+													rel="noopener noreferrer"
+													aria-label={`PDF öffnen: ${f.name}`}
+													title={`PDF öffnen: ${f.name}`}
+												>
+													<Eye className="h-4 w-4" />
+													Öffnen
+												</a>
+											</Button>
+										</TableCell>
+									</TableRow>
+								);
+							})}
 						</TableBody>
 					</Table>
 				)}