Merge pull request #41 from Shtian/feat/hide-new-badge

Hide new badge when seen

.changeset/angry-points-applaud.md

@@ -0,0 +1,5 @@
+---
+"authenticlash": minor
+---
+
+Remove new badge when hovered and store status in local storage

src/lib/stores/PersistantStorage.ts

@@ -0,0 +1,31 @@
+import { browser } from '$app/environment';
+import type { Writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
+
+const storage = <T>(key: string, initValue: T): Writable<T> => {
+	const store = writable(initValue);
+	if (!browser) return store;
+
+	const storedValueStr = localStorage.getItem(key);
+	if (storedValueStr != null) store.set(JSON.parse(storedValueStr));
+
+	store.subscribe((val) => {
+		if (val === null || val === undefined) {
+			localStorage.removeItem(key);
+		} else {
+			localStorage.setItem(key, JSON.stringify(val));
+		}
+	});
+
+	window.addEventListener('storage', () => {
+		const storedValueStr = localStorage.getItem(key);
+		if (storedValueStr == null) return;
+
+		const localValue: T = JSON.parse(storedValueStr);
+		if (localValue !== get(store)) store.set(localValue);
+	});
+
+	return store;
+};
+
+export default storage;

src/lib/stores/SeenBadgesStore.ts

@@ -0,0 +1,3 @@
+import storage from './PersistantStorage';
+
+export const seenBadges = storage<Array<string>>('seenBadges', []);

src/routes/badges/+page.server.ts

@@ -51,7 +51,6 @@ export const load: PageServerLoad = async ({ locals: { getSession } }) => {
 	}
 
 	const badges: Array<UserBadge> = allBadges.map((badge) => {
-		console.log('console.log', unlockedBadges);
 		const unlockedBadge = unlockedBadges.find((ub) => ub.badge_id === badge.id);
 		const awardedOn = unlockedBadge?.awarded_on ? new Date(unlockedBadge.awarded_on) : undefined;
 		const fiveDays = 1000 * 60 * 60 * 24 * 5;

src/routes/badges/UserBadge.svelte

@@ -1,13 +1,37 @@
 <script lang="ts">
 	import type { UserBadge } from './+page.server';
+	import { seenBadges } from '$lib/stores/SeenBadgesStore';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
 	export let badge: UserBadge;
 
 	// Only show custom image if its NOT a secret badge or if the secret badge is unlocked
 	const showBadgeCustomImage =
 		(badge.image && !badge.secret) || (badge.image && badge.unlocked && badge.secret);
+
+	$: showBadge = false;
+
+	onMount(() => {
+		showBadge = !$seenBadges.includes(badge.slug);
+	});
+
+	function markBadgeAsSeen() {
+		if (!badge.unlocked) return;
+		seenBadges.update((badges) => {
+			if (!badges.includes(badge.slug)) {
+				showBadge = false;
+				return [...badges, badge.slug];
+			}
+			return badges;
+		});
+	}
 </script>
 
-<li class="group relative flex gap-x-4 rounded-lg border-[1px] p-4">
+<li
+	class="group relative flex gap-x-4 rounded-lg border-[1px] p-4"
+	on:mouseover={() => markBadgeAsSeen()}
+	on:focus={() => markBadgeAsSeen()}
+>
 	<div class=" inline-flex size-16 flex-shrink-0 items-center overflow-hidden rounded-full">
 		{#if showBadgeCustomImage}
 			<img
@@ -52,9 +76,11 @@
 			</p>
 		{/if}
 	</div>
-	{#if badge.isNew}
-		<span class="absolute -left-2 -top-2 rounded bg-clash-400 px-2 py-1 text-xs text-white"
-			>NEW</span
+	{#if badge.isNew && showBadge}
+		<span
+			in:fade={{ duration: 150 }}
+			out:fade={{ duration: 150 }}
+			class="absolute -left-2 -top-2 rounded bg-clash-400 px-2 py-1 text-xs text-white">NEW</span
 		>
 	{/if}
 </li>