From 2ce87ea66c6dac11f7396393bdab4965e3b4d80f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 1 Feb 2024 22:57:46 -0800
Subject: feat(likes): show avatar on hover

---
 src/lib/Tools/Likes.svelte | 40 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

(limited to 'src/lib/Tools/Likes.svelte')

diff --git a/src/lib/Tools/Likes.svelte b/src/lib/Tools/Likes.svelte
index 52faa1c3..2c26b4bb 100644
--- a/src/lib/Tools/Likes.svelte
+++ b/src/lib/Tools/Likes.svelte
@@ -3,9 +3,17 @@
 	import { threadLikes } from '$lib/AniList/forum';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
+	import {
+		onMouseEnter,
+		type HoverCoverResponse,
+		onMouseLeave,
+		onMouseMove
+	} from '$lib/Media/Cover/hoverCover';
 	import InputTemplate from './InputTemplate.svelte';
 
 	let submission = '';
+	let hoverCoverState: HoverCoverResponse = {};
 
 	$: normalisedSubmission = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$2');
 	$: submissionType = submission.replace(/.*\/(activity|thread)\/(\d+).*/, '$1');
@@ -31,7 +39,35 @@
 				<ul>
 					{#each likes as like}
 						<li>
-							<a href={`https://anilist.co/user/${like.name}`} target="_blank">
+							<a
+								href={`https://anilist.co/user/${like.name}`}
+								target="_blank"
+								on:mouseenter={() => {
+									const response = onMouseEnter({
+										coverImage: {
+											extraLarge:
+												like?.avatar?.large ??
+												'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png'
+										}
+									});
+
+									hoverCoverState.hovering = response.hovering;
+									hoverCoverState.item = response.item;
+									hoverCoverState.media = response.media;
+								}}
+								on:mouseleave={() => {
+									const response = onMouseLeave();
+
+									hoverCoverState.hovering = response.hovering;
+									hoverCoverState.item = response.item;
+									hoverCoverState.media = response.media;
+								}}
+								on:mousemove={(e) => {
+									const response = onMouseMove(e, 300);
+
+									hoverCoverState.style = response.style;
+								}}
+							>
 								{like.name}
 							</a>
 						</li>
@@ -47,3 +83,5 @@
 		Please enter a valid Activity or Thread URL.
 	{/if}
 </InputTemplate>
+
+<HoverCover options={hoverCoverState} width={300} />
-- 
cgit v1.2.3