Fix blinking badge not working (pt. 3)

For good this time I hope

Author: WarningImHack3r

src/lib/components/BlinkingBadge.svelte

@@ -1,26 +1,30 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import { get } from "svelte/store";
-	import { browser } from "$app/environment";
 	import { localStorageStore } from "$lib/localStorageStore";
 
 	/**
 	 * The name of the localStorage item to get the date from.
 	 */
 	export let storedDateItem: string;
+	/**
+	 * Whether to show the pulse animation.
+	 */
+	export let show = false;
 
-	let showPulse = false;
+	let shouldShowPulse = false;
 
-	$: if (storedDateItem && browser) {
+	onMount(() => {
 		const storedDateStore = localStorageStore(storedDateItem, "");
-		const storedDate = get(storedDateStore);
+		const storedDate = get(storedDateStore).replace(/"/g, "");
 		const lastVisitItem = localStorage.getItem("lastVisit");
 		if (storedDate && lastVisitItem) {
-			showPulse = new Date(storedDate) > new Date(lastVisitItem);
+			shouldShowPulse = new Date(storedDate) > new Date(lastVisitItem);
 		}
-	}
+	});
 </script>
 
-{#if showPulse}
+{#if show && shouldShowPulse}
 	<div class="relative inline-flex">
 		<slot />
 		<span class="absolute right-0 top-0 -mr-0.5 -mt-0.5 flex size-2.5">

src/routes/+page.svelte

@@ -262,23 +262,17 @@
 		>
 			<Tabs.List class="bg-input dark:bg-muted">
 				{#each typedEntries(repos) as [id, { name }]}
-					{#if !visitedTabs.includes(id) && id !== currentRepo}
-						<BlinkingBadge storedDateItem="{id.toLowerCase()}MostRecentUpdate">
-							<Tabs.Trigger
-								class="data-[state=inactive]:text-foreground/60 data-[state=inactive]:hover:bg-background/50 data-[state=active]:hover:text-foreground/75 data-[state=inactive]:hover:text-foreground dark:data-[state=inactive]:hover:bg-background/25"
-								value={id}
-							>
-								{name}
-							</Tabs.Trigger>
-						</BlinkingBadge>
-					{:else}
+					<BlinkingBadge
+						storedDateItem="{id.toLowerCase()}MostRecentUpdate"
+						show={!visitedTabs.includes(id) && id !== currentRepo}
+					>
 						<Tabs.Trigger
 							class="data-[state=inactive]:text-foreground/60 data-[state=inactive]:hover:bg-background/50 data-[state=active]:hover:text-foreground/75 data-[state=inactive]:hover:text-foreground dark:data-[state=inactive]:hover:bg-background/25"
 							value={id}
 						>
 							{name}
 						</Tabs.Trigger>
-					{/if}
+					</BlinkingBadge>
 				{/each}
 			</Tabs.List>
 			<div class="ml-auto flex items-center space-x-2 xs:ml-0">