Hide Open chapter in definition popover on the term's own chapter (#39)

Only show the popover's Open chapter link when the reader is viewing a
different chapter than the one that defines the glossary term.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: John Solly <jsolly@users.noreply.github.com>

Author: jsolly

src/components/app/ChapterView.svelte

@@ -113,7 +113,7 @@
 				{chapter.title}
 			</h1>
 			<p class="mt-3 text-sm leading-6 text-muted-foreground sm:text-base sm:leading-7">
-				<TermRichText segments={linkedCopy.intro} />
+				<TermRichText segments={linkedCopy.intro} currentChapterId={chapter.id} />
 			</p>
 		</header>
 
@@ -152,7 +152,7 @@
 
 					<p class="mt-4 text-sm leading-6 sm:text-base sm:leading-7">
 						{#if linked}
-							<TermRichText segments={linked.teach} />
+							<TermRichText segments={linked.teach} currentChapterId={chapter.id} />
 						{:else}
 							{piece.teach}
 						{/if}
@@ -165,7 +165,10 @@
 							</p>
 							<p class="mt-1 text-sm leading-6 sm:text-base sm:leading-7">
 								{#if linked?.watchFor}
-									<TermRichText segments={linked.watchFor} />
+									<TermRichText
+										segments={linked.watchFor}
+										currentChapterId={chapter.id}
+									/>
 								{:else}
 									{piece.watchFor}
 								{/if}
@@ -234,7 +237,10 @@
 		<section class="mt-10 border-t pt-8 sm:mt-12">
 			{#if chapter.closing && linkedCopy.closing}
 				<p class="text-sm leading-6 text-muted-foreground sm:text-base sm:leading-7">
-					<TermRichText segments={linkedCopy.closing} />
+					<TermRichText
+						segments={linkedCopy.closing}
+						currentChapterId={chapter.id}
+					/>
 				</p>
 			{/if}
 			<div

src/components/app/TermDefinitionPopover.svelte

@@ -8,10 +8,13 @@
 	let {
 		term,
 		triggerClass,
+		currentChapterId,
 		children,
 	}: {
 		term: GlossaryTerm;
 		triggerClass: string;
+		/** When set, hide "Open chapter" if the term is defined in this chapter. */
+		currentChapterId?: string;
 		children: Snippet;
 	} = $props();
 
@@ -21,6 +24,9 @@
 	let titleEl: HTMLElement | null = $state(null);
 
 	let chapter = $derived(term.chapterId ? chapterById(term.chapterId) : undefined);
+	let showOpenChapter = $derived(
+		Boolean(chapter && term.chapterId && term.chapterId !== currentChapterId),
+	);
 
 	function onOpenAutoFocus(event: Event) {
 		event.preventDefault();
@@ -54,7 +60,7 @@
 				{term.definition}
 			</Popover.Description>
 		</Popover.Header>
-		{#if chapter}
+		{#if showOpenChapter && chapter}
 			<a
 				class="mt-2 inline-block text-sm font-medium text-primary underline-offset-4 hover:underline"
 				href={learnChapterPath(chapter.unitId, chapter.id)}

src/components/app/TermRichText.svelte

@@ -5,8 +5,11 @@
 
 	let {
 		segments,
+		currentChapterId,
 	}: {
 		segments: TextSegment[];
+		/** Chapter the reader is currently viewing, if any. */
+		currentChapterId?: string;
 	} = $props();
 </script>
 
@@ -18,6 +21,7 @@
 		{#if term}
 			<TermDefinitionPopover
 				{term}
+				{currentChapterId}
 				triggerClass="cursor-pointer rounded-sm text-primary underline decoration-dotted decoration-primary/70 underline-offset-2 outline-none hover:decoration-solid focus-visible:ring-2 focus-visible:ring-ring"
 			>
 				{segment.text}