fix library nav highlight

.changeset/six-foxes-camp.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+fix library nav highlight

src/lib/Library_Primary_Nav.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import {page} from '$app/stores';
 	import {is_iframed} from '@ryanatkn/belt/dom.js';
 	import type {Snippet} from 'svelte';
 	import type {Package_Meta} from '@ryanatkn/gro/package_meta.js';
@@ -14,10 +13,6 @@
 
 	const {pkg, breadcrumb_children, children}: Props = $props();
 
-	// TODO this could be a prop passed by `Breadcrumb`, is commonly needed
-	const {pathname} = $derived($page.url);
-	const selected_root = $derived(pathname === '/');
-
 	const iframed = is_iframed();
 	const enabled = !iframed;
 
@@ -31,7 +26,7 @@
 	<div class="library_primary_nav" class:scrolled>
 		<div class="background" aria-hidden="true"></div>
 		<div class="content">
-			<nav aria-label="Primary" class:selected_root>
+			<nav aria-label="Primary">
 				<Breadcrumb>
 					{#if breadcrumb_children}
 						{@render breadcrumb_children(true)}
@@ -95,8 +90,4 @@
 			--size: var(--size_md);
 		}
 	}
-
-	.selected_root {
-		--text_decoration_selected: none;
-	}
 </style>

src/lib/Tome_Content.svelte

@@ -1,38 +1,56 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
 	import {slugify} from '@ryanatkn/belt/path.js';
+	import {page} from '$app/stores';
+	import {base} from '$app/paths';
 
 	import Tome_Header from '$lib/Tome_Header.svelte';
 	import {set_tome, type Tome} from '$lib/tome.js';
-	import {get_library_links} from '$lib/library_helpers.svelte.js';
+	import {DEFAULT_LIBRARY_PATH, get_library_links} from '$lib/library_helpers.svelte.js';
 	import {intersect} from '$lib/intersect.js';
 
 	interface Props {
 		tome: Tome;
+		library_path?: string;
 		header?: Snippet;
 		children: Snippet;
 	}
 
-	const {tome, header, children}: Props = $props();
+	const {tome, library_path = DEFAULT_LIBRARY_PATH, header, children}: Props = $props();
 
 	const library_links = get_library_links();
 
 	set_tome(tome); // TODO make reactive?
 
 	const slug = slugify(tome.name);
+
+	const at_root = $derived($page.url.pathname === base + library_path);
 </script>
 
 <section
 	class="tome_content width_md mb_xl9"
-	use:intersect={({intersecting}) => {
-		if (intersecting) {
-			library_links.slugs_onscreen.add(slug);
-		} else {
-			library_links.slugs_onscreen.delete(slug);
-		}
-	}}
+	use:intersect={at_root
+		? ({intersecting}) => {
+				if (intersecting) {
+					library_links.slugs_onscreen.add(slug);
+				} else {
+					library_links.slugs_onscreen.delete(slug);
+				}
+			}
+		: null}
 >
-	<header class="mb_xl3">
+	<header
+		class="mb_xl3"
+		use:intersect={at_root
+			? null
+			: ({intersecting}) => {
+					if (intersecting) {
+						library_links.slugs_onscreen.add(slug);
+					} else {
+						library_links.slugs_onscreen.delete(slug);
+					}
+				}}
+	>
 		{#if header}
 			{@render header()}
 		{:else}

src/lib/Tome_Link.svelte

@@ -6,23 +6,32 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import {get_tome_by_name} from '$lib/tome.js';
+	import {DEFAULT_LIBRARY_PATH} from '$lib/library_helpers.svelte.js';
 
 	interface Props {
 		name: string; // TODO type, generate from `tomes`?
+		library_path?: string;
 		hash?: string;
 		chip?: boolean;
 		attrs?: SvelteHTMLElements['a'];
 		children?: Snippet;
 	}
 
-	const {name, hash, chip = true, attrs, children}: Props = $props();
+	const {
+		name,
+		library_path = DEFAULT_LIBRARY_PATH,
+		hash,
+		chip = true,
+		attrs,
+		children,
+	}: Props = $props();
 
 	if (DEV) get_tome_by_name(name); // throws if not found
 
 	// TODO add contextmenu behavior
 </script>
 
-<a {...attrs} class:chip href="{base}/library/{slugify(name)}{hash ? `#${hash}` : ''}"
+<a {...attrs} class:chip href="{base}{library_path}/{slugify(name)}{hash ? `#${hash}` : ''}"
 	>{#if children}{@render children()}{:else}{name}{/if}</a
 >
 

src/lib/intersect.ts

@@ -26,7 +26,7 @@ export interface Intersect_Params {
 export type Intersect_Params_Or_Callback = On_Intersect | Intersect_Params;
 
 // TODO how to forward generic `el` type?
-export const intersect: Action<HTMLElement | SVGElement, Intersect_Params_Or_Callback> = (
+export const intersect: Action<HTMLElement | SVGElement, Intersect_Params_Or_Callback | null> = (
 	el,
 	initial_params,
 ) => {
@@ -37,35 +37,30 @@ export const intersect: Action<HTMLElement | SVGElement, Intersect_Params_Or_Cal
 	let intersecting: boolean;
 	let intersections: number;
 	let observer: IntersectionObserver | null;
+	let current_params: Intersect_Params_Or_Callback | null;
 
-	const set_params = (params: Intersect_Params_Or_Callback): void => {
+	const set_params = (params: Intersect_Params_Or_Callback | null): void => {
+		current_params = params;
 		// TODO not sure about this? should there be a `reset` API?
 		intersections = 0;
 		if (typeof params === 'function') {
 			onintersect = params;
 			ondisconnect = undefined;
 			count = undefined;
 			options = undefined;
-		} else {
+		} else if (params) {
 			onintersect = params.onintersect;
 			ondisconnect = params.ondisconnect;
 			count = params.count;
 			options = params.options;
 		}
-	};
-	const disconnect = (): void => {
-		if (!observer) return;
-		observer.disconnect();
-		if (ondisconnect) {
-			ondisconnect({intersecting, intersections, el, observer});
-		}
-		observer = null;
+		observe();
 	};
 	const observe = (): void => {
 		if (observer) {
 			disconnect();
 		}
-		if (count === 0) return; // disable when `count` is `0`, no need to create the observer
+		if (current_params === null || count === 0) return; // disable when `count` is `0`, no need to create the observer
 		observer = new IntersectionObserver((entries) => {
 			intersecting = entries[0].isIntersecting;
 			if (onintersect && observer) {
@@ -83,14 +78,20 @@ export const intersect: Action<HTMLElement | SVGElement, Intersect_Params_Or_Cal
 		}, options);
 		observer.observe(el);
 	};
+	const disconnect = (): void => {
+		if (!observer) return;
+		observer.disconnect();
+		if (ondisconnect) {
+			ondisconnect({intersecting, intersections, el, observer});
+		}
+		observer = null;
+	};
 
 	set_params(initial_params);
-	observe();
 
 	return {
 		update: (params) => {
 			set_params(params);
-			observe();
 		},
 		destroy: disconnect,
 	};

src/lib/tome.ts

@@ -3,6 +3,8 @@ import {slugify} from '@ryanatkn/belt/path.js';
 import {getContext, setContext} from 'svelte';
 import {z} from 'zod';
 
+import {DEFAULT_LIBRARY_PATH} from '$lib/library_helpers.svelte.js';
+
 export const Tome = z.object({
 	name: z.string(),
 	// TODO ? summary: z.string(),
@@ -13,8 +15,11 @@ export const Tome = z.object({
 });
 export type Tome = z.infer<typeof Tome>;
 
-export const to_tome_pathname = (item: Tome, path_prefix = '/library', base_path = base): string =>
-	base_path + path_prefix + '/' + slugify(item.name);
+export const to_tome_pathname = (
+	item: Tome,
+	library_path = DEFAULT_LIBRARY_PATH,
+	base_path = base,
+): string => base_path + library_path + '/' + slugify(item.name);
 
 const TOMES_KEY = Symbol();
 export const get_tomes = (): Map<string, Tome> => getContext(TOMES_KEY);