feat(likes): show avatar on hover

4 files changed, 46 insertions, 5 deletions

diff --git a/src/lib/AniList/activity.ts b/src/lib/AniList/activity.ts
index 58af2fd0..0b0929d6 100644
--- a/src/lib/AniList/activity.ts
+++ b/src/lib/AniList/activity.ts
@@ -268,9 +268,9 @@ export const activityLikes = async (id: number): Promise<Partial<User>[]> => {
 				query: `{
 				Activity(id: ${id}) {
 					__typename
-					... on TextActivity { likes { name } }
-					... on ListActivity { likes { name } }
-					... on MessageActivity { likes { name } }
+					... on TextActivity { likes { name avatar { large } } }
+					... on ListActivity { likes { name avatar { large } } }
+					... on MessageActivity { likes { name avatar { large } } }
 				}
 			}`
 			})
diff --git a/src/lib/AniList/follow.ts b/src/lib/AniList/follow.ts
index da477b6a..3601d510 100644
--- a/src/lib/AniList/follow.ts
+++ b/src/lib/AniList/follow.ts
@@ -5,6 +5,9 @@ export interface User {
 	name: string;
 	isFollowing: boolean;
 	isFollower: boolean;
+	avatar: {
+		large: string;
+	};
 }
 
 export const toggleFollow = async (
diff --git a/src/lib/AniList/forum.ts b/src/lib/AniList/forum.ts
index 46d569b4..5a1bfc25 100644
--- a/src/lib/AniList/forum.ts
+++ b/src/lib/AniList/forum.ts
@@ -67,7 +67,7 @@ export const threadLikes = async (id: number): Promise<Partial<User>[]> => {
 				'Content-Type': 'application/json',
 				Accept: 'application/json'
 			},
-			body: JSON.stringify({ query: `{ Thread(id: ${id}) { likes { name } } }` })
+			body: JSON.stringify({ query: `{ Thread(id: ${id}) { likes { name avatar { large } } } }` })
 		})
 	).json();
 
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} />