add report selection via url hash

src/routes/admin/reports/+page.svelte

@@ -11,10 +11,13 @@
 	import HeaderBar from './HeaderBar.svelte';
 	import { IconOutline } from 'svelte-heros-v2';
 	import NewReportModal from './NewReportModal.svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 
 	export let data: PageData;
 
 	let currentPageReports: (typeof Report.prototype.dataValues)[] = [];
+	let currentPageReportsRequest: Promise<any> = Promise.resolve();
 	let reportsPerPage = 50;
 	let reportPage = 0;
 	let reportFilter = { draft: false, status: null, reporter: null, reported: null };
@@ -22,8 +25,8 @@
 
 	async function fetchPageReports(
 		page: number,
-		filter: any
-	): Promise<(typeof Report.prototype.dataValues)[]> {
+		filter: typeof reportFilter | { hash: string }
+	): Promise<typeof currentPageReports> {
 		if (!browser) return [];
 
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/reports`, {
@@ -31,10 +34,46 @@
 			body: JSON.stringify({ ...filter, limit: reportsPerPage, from: reportPage * page })
 		});
 
+		if (activeReport) {
+			activeReport = null;
+			await goto(window.location.href.split('#')[0], { replaceState: true });
+		}
+
 		return await response.json();
 	}
 
-	$: fetchPageReports(reportPage, reportFilter).then((r) => (currentPageReports = r));
+	$: currentPageReportsRequest = fetchPageReports(reportPage, reportFilter).then((r) => {
+		currentPageReports = r;
+	});
+
+	async function openHashReport() {
+		if (!window.location.hash) return;
+
+		const requestedHash = window.location.hash.substring(1);
+		let report = currentPageReports.find((r) => r.url_hash === requestedHash);
+		if (!report) {
+			const hashReport = (await fetchPageReports(0, { hash: requestedHash }))[0];
+			if (hashReport) {
+				currentPageReports = [hashReport, ...currentPageReports];
+				report = hashReport;
+			} else {
+				await goto(window.location.href.split('#')[0], { replaceState: true });
+				return;
+			}
+		}
+
+		activeReport = report;
+		activeReport.originalStatus = report;
+	}
+	onMount(async () => {
+		await currentPageReportsRequest;
+		await openHashReport();
+
+		if (browser) window.addEventListener('hashchange', openHashReport);
+	});
+	onDestroy(() => {
+		if (browser) window.removeEventListener('hashchange', openHashReport);
+	});
 
 	async function updateActiveReport() {
 		await fetch(`${env.PUBLIC_BASE_PATH}/admin/reports`, {
@@ -80,8 +119,11 @@
 				{#each currentPageReports as report}
 					<tr
 						class="hover [&>*]:text-sm cursor-pointer"
-						class:bg-base-200={activeReport === report}
+						class:bg-base-200={activeReport?.url_hash === report.url_hash}
 						on:click={() => {
+							goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
+								replaceState: true
+							});
 							activeReport = report;
 							activeReport.originalStatus = report.status;
 						}}
@@ -158,6 +200,15 @@
 						class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-max"
 					>
 						<li>
+							<button
+								on:click={() => {
+									navigator.clipboard.writeText(
+										`${window.location.protocol}//${window.location.host}${env.PUBLIC_BASE_PATH}/admin/reports#${activeReport.url_hash}`
+									);
+								}}
+							>
+								Internen Link kopieren
+							</button>
 							<button
 								on:click={() =>
 									navigator.clipboard.writeText(
@@ -167,8 +218,12 @@
 						</li>
 					</ul>
 				</form>
-				<button class="btn btn-sm btn-circle btn-ghost" on:click={() => (activeReport = null)}
-					>✕</button
+				<button
+					class="btn btn-sm btn-circle btn-ghost"
+					on:click={() => {
+						activeReport = null;
+						goto(window.location.href.split('#')[0], { replaceState: true });
+					}}>✕</button
 				>
 			</div>
 			<h3 class="font-roboto font-semibold text-2xl">Report</h3>