From 4319f04d15fea1ec610cde51648709ae3d77248b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 2 Feb 2024 04:12:16 -0800
Subject: feat(schedule): shorten long titles

---
 src/lib/List/MediaTitleDisplay.svelte | 39 +++++++++++++++++++++++++++--------
 src/lib/Schedule/CoverBypass.svelte   | 16 ++++++++++++--
 src/lib/Utility/string.ts             |  2 ++
 3 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/Utility/string.ts

(limited to 'src/lib')

diff --git a/src/lib/List/MediaTitleDisplay.svelte b/src/lib/List/MediaTitleDisplay.svelte
index 118d9b2c..5463d009 100644
--- a/src/lib/List/MediaTitleDisplay.svelte
+++ b/src/lib/List/MediaTitleDisplay.svelte
@@ -1,32 +1,53 @@
 <script lang="ts">
 	import type { MediaTitle } from '$lib/AniList/media';
+	import * as tooltipper from '$lib/Tooltip/tooltip';
+	import { abbreviate as abbreviated } from '$lib/Utility/string';
 	import settings from '$stores/settings';
 	import * as wanakana from 'wanakana';
 
 	export let title: MediaTitle;
+	export let abbreviate = false;
+	export let abbreviateTo = 20;
+	export let tooltip = false;
 </script>
 
 {#if $settings.displayTitleFormat === 'native'}
 	{#if $settings.displayFurigana}
-		<span title={title.english || title.romaji || title.native}>
+		<span
+			title={title.english || title.romaji || title.native}
+			use:tooltipper.default
+			data-tooltip-disable={tooltip}
+		>
 			<ruby>
-				{title.native}
+				{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
 				<rt>
-					{wanakana.toKana(title.romaji)}
+					{abbreviate
+						? abbreviated(wanakana.toKana(title.native), abbreviateTo)
+						: wanakana.toKana(title.native)}
 				</rt>
 			</ruby>
 		</span>
 	{:else}
-		<span title={title.english || title.romaji || title.native}>
-			{title.native}
+		<span
+			title={title.english || title.romaji || title.native}
+			use:tooltipper.default
+			data-tooltip-disable={tooltip}
+		>
+			{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
 		</span>
 	{/if}
 {:else if $settings.displayTitleFormat === 'romaji'}
-	<span title={title.english || title.romaji || title.native}>
-		{title.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}>
-		{title.english || title.romaji || title.native}
+	<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}
diff --git a/src/lib/Schedule/CoverBypass.svelte b/src/lib/Schedule/CoverBypass.svelte
index 235979c1..6aa47701 100644
--- a/src/lib/Schedule/CoverBypass.svelte
+++ b/src/lib/Schedule/CoverBypass.svelte
@@ -11,6 +11,8 @@
 	} from '$lib/Media/Cover/hoverCover';
 
 	import { outboundLink } from '$lib/Media/links';
+	import tooltip from '$lib/Tooltip/tooltip';
+	import { abbreviate } from '$lib/Utility/string';
 	import settings from '$stores/settings';
 
 	export let media: Media | null;
@@ -18,6 +20,7 @@
 	export let cover = true;
 
 	let hoverCoverState: HoverCoverResponse = {};
+	const abbreviateTo = 40;
 
 	const titleSelect = (media: Media | null) =>
 		media ? media.title.english || media.title.romaji || media.title.native : null;
@@ -55,9 +58,18 @@
 	}}
 >
 	{#if media}
-		<MediaTitleDisplay title={media.title} />
+		<MediaTitleDisplay
+			title={media.title}
+			abbreviate
+			{abbreviateTo}
+			tooltip={media.title.english?.length > abbreviateTo ||
+				media.title.romaji?.length > abbreviateTo ||
+				media.title.native?.length > abbreviateTo}
+		/>
 	{:else}
-		{entry.title}
+		<span title={entry.title} use:tooltip>
+			{abbreviate(entry.title, abbreviateTo)}
+		</span>
 	{/if}
 </a>
 
diff --git a/src/lib/Utility/string.ts b/src/lib/Utility/string.ts
new file mode 100644
index 00000000..8cfc4ee5
--- /dev/null
+++ b/src/lib/Utility/string.ts
@@ -0,0 +1,2 @@
+export const abbreviate = (title: string, maxLength: number) =>
+	title.length > maxLength ? `${title.slice(0, maxLength)}...` : title;
-- 
cgit v1.2.3