fix: switch highlight to global store instead of URL params

URL param timing was unreliable with SvelteKit client-side routing.
Now CrossLink calls requestHighlight(id) setting a global variable
before goto(), and highlightFromUrl() reads it after data loads.
Double requestAnimationFrame ensures DOM has rendered after loaded=true.
Falls back to ?highlight= URL param for direct links.
This commit is contained in:
2026-03-22 00:11:32 +03:00
parent f47df934ed
commit 88e21e41e2
2 changed files with 49 additions and 40 deletions
+6 -8
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import MdiIcon from './MdiIcon.svelte';
import { requestHighlight } from '$lib/highlight';
let {
href,
@@ -16,20 +17,17 @@
title?: string;
} = $props();
const targetHref = $derived(
entityId != null
? `${href.split('?')[0]}?highlight=${entityId}${href.includes('?') ? '&' + href.split('?')[1] : ''}`
: href
);
function navigate(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
goto(targetHref);
if (entityId != null) {
requestHighlight(entityId);
}
goto(href);
}
</script>
<a href={targetHref} class="crosslink" title={title || label} onclick={navigate}>
<a {href} class="crosslink" title={title || label} onclick={navigate}>
<MdiIcon name={icon} size={12} />
<span>{label}</span>
</a>