From 74a8128d8555040d111d3be66afb9f17190a6d6f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 23 Aug 2024 14:36:23 -0700
Subject: fix(SequelCatcher): tooltips

---
 src/lib/List/MediaTitleDisplay.svelte | 101 +++++++++++++++++++---------------
 src/lib/Tooltip/LinkedTooltip.svelte  |   6 ++
 2 files changed, 64 insertions(+), 43 deletions(-)

(limited to 'src')

diff --git a/src/lib/List/MediaTitleDisplay.svelte b/src/lib/List/MediaTitleDisplay.svelte
index 932e5c1e..edf41120 100644
--- a/src/lib/List/MediaTitleDisplay.svelte
+++ b/src/lib/List/MediaTitleDisplay.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { MediaTitle } from '$lib/Data/AniList/media';
-	import * as tooltipper from '$lib/Tooltip/tooltip';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 	import { abbreviate as abbreviated } from '$lib/Utility/string';
 	import settings from '$stores/settings';
+	import { compressToBase64 } from 'lz-string';
 	import * as wanakana from 'wanakana';
 
 	export let title: MediaTitle;
@@ -11,50 +12,64 @@
 	export let tooltip = false;
 </script>
 
-{#if $settings.displayTitleFormat === 'native'}
-	{#if $settings.displayFurigana}
-		{@const kana = abbreviate
-			? abbreviated(wanakana.toKana(title.native), abbreviateTo)
-			: wanakana.toKana(title.native)}
-		{@const native = abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
+<span id={`title-display-${compressToBase64(title.native)}`}>
+	{#if $settings.displayTitleFormat === 'native'}
+		{#if $settings.displayFurigana}
+			{@const kana = abbreviate
+				? abbreviated(wanakana.toKana(title.native), abbreviateTo)
+				: wanakana.toKana(title.native)}
+			{@const native = abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
 
-		<span
-			title={title.english || title.romaji || title.native}
-			use:tooltipper.default
-			data-tooltip-disable={!tooltip}
-		>
-			{#if kana === native}
-				{native}
-			{:else}
-				<ruby>
+			<LinkedTooltip
+				content={title.english || title.romaji || title.native}
+				disable={tooltip}
+				pin={`title-display-${compressToBase64(title.native)}`}
+				relative
+				ignoreAnchorStyling
+			>
+				{#if kana === native}
 					{native}
-					<rt>
-						{kana}
-					</rt>
-				</ruby>
-			{/if}
-		</span>
+				{:else}
+					<ruby>
+						{native}
+						<rt>
+							{kana}
+						</rt>
+					</ruby>
+				{/if}
+			</LinkedTooltip>
+		{:else}
+			<LinkedTooltip
+				content={title.english || title.romaji || title.native}
+				disable={tooltip}
+				pin={`title-display-${compressToBase64(title.native)}`}
+				relative
+				ignoreAnchorStyling
+			>
+				{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
+			</LinkedTooltip>
+		{/if}
+	{:else if $settings.displayTitleFormat === 'romaji'}
+		<LinkedTooltip
+			content={title.english || title.romaji || title.native}
+			disable={tooltip}
+			pin={`title-display-${compressToBase64(title.native)}`}
+			relative
+			ignoreAnchorStyling
+		>
+			{abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji}
+		</LinkedTooltip>
 	{:else}
-		<span
-			title={title.english || title.romaji || title.native}
-			use:tooltipper.default
-			data-tooltip-disable={!tooltip}
+		<LinkedTooltip
+			content={title.romaji || title.native}
+			disable={tooltip}
+			pin={`title-display-${compressToBase64(title.native)}`}
+			relative
+			ignoreAnchorStyling
 		>
-			{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
-		</span>
+			{abbreviate
+				? abbreviated(title.english || title.romaji || title.native, abbreviateTo)
+				: title.english || title.romaji || title.native}
+		</LinkedTooltip>
 	{/if}
-{:else if $settings.displayTitleFormat === 'romaji'}
-	<span
-		title={title.english || title.romaji || title.native}
-		use:tooltipper.default
-		data-tooltip-disable={!tooltip}
-	>
-		{abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji}
-	</span>
-{:else}
-	<span title={title.romaji || title.native} use:tooltipper.default data-tooltip-disable={!tooltip}>
-		{abbreviate
-			? abbreviated(title.english || title.romaji || title.native, abbreviateTo)
-			: title.english || title.romaji || title.native}
-	</span>
-{/if}
+</span>
diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
index 9ec92cf9..096e4291 100644
--- a/src/lib/Tooltip/LinkedTooltip.svelte
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -13,6 +13,7 @@
 	export let debounceDelay = 100;
 	export let tooltipOpacityTransitionTime = 200;
 	export let relative = false;
+	export let ignoreAnchorStyling = false;
 
 	let tooltipDiv: HTMLDivElement | null = null;
 	let hideTimeout: number | null = null;
@@ -218,6 +219,7 @@
 			<span
 				in:fade={{ duration: tooltipTransitionTime }}
 				out:fade={{ duration: tooltipTransitionTime }}
+				class:ignore-anchor-styling={ignoreAnchorStyling}
 			>
 				{@html content.replace(/\n/g, '<br>')}
 			</span>
@@ -235,4 +237,8 @@
 	}
 
 	/* fix line break slot */
+
+	.ignore-anchor-styling {
+		color: var(--fg);
+	}
 </style>
-- 
cgit v1.2.3