add indicator when there are new items added

src/lib/components/UserCard.svelte

@@ -10,6 +10,7 @@
 			items: number;
 		};
 	};
+	export let newItems = false;
 </script>
 
 <a class="card" data-sveltekit-preload-data href="/wishlists/{user.username}">
@@ -25,6 +26,13 @@
 					<span>
 						{!hideCount && user._count ? `${user._count.items}/` : ""}{user.items.length}
 					</span>
+					{#if newItems}
+						<iconify-icon
+							class="text-primary-700-200-token opacity-40"
+							icon="ion:ellipse-sharp"
+							width="10px"
+						/>
+					{/if}
 				</div>
 			</div>
 		</div>

src/lib/stores/viewed-items.ts

@@ -0,0 +1,19 @@
+import type { Item } from "@prisma/client";
+import { localStorageStore } from "@skeletonlabs/skeleton";
+import type { Writable } from "svelte/store";
+
+export const viewedItems: Writable<Record<string, string>> = localStorageStore("viewedItems", {});
+
+export const hashItems = async (items: Partial<Item>[]): Promise<string> => {
+	const itemIds = items
+		.map(({ id }) => id)
+		.toSorted()
+		.join("");
+	return await hash(itemIds);
+};
+
+export const hash = async (data: string): Promise<string> => {
+	const encoder = new TextEncoder();
+	const digest = await crypto.subtle.digest("SHA-256", encoder.encode(data));
+	return btoa(String.fromCharCode(...new Uint8Array(digest)));
+};

src/routes/+page.server.ts

@@ -59,6 +59,7 @@ export const load = (async ({ locals }) => {
 			}
 		},
 		select: {
+			id: true,
 			username: true,
 			name: true,
 			picture: true,

src/routes/+page.svelte

@@ -3,16 +3,30 @@
 	import UserCard from "$lib/components/UserCard.svelte";
 	import { fade } from "svelte/transition";
 	import ApprovalAlert from "$lib/components/wishlists/ApprovalAlert.svelte";
+	import { hash, hashItems, viewedItems } from "$lib/stores/viewed-items";
 
 	export let data: PageData;
+	type PageUserData = (typeof data)["users"][0];
+
+	const hasNewItems = async (user: PageUserData) => {
+		if (user.items.length === 0) return false;
+		const userHash = await hash(user.id);
+		const currentHash = await hashItems(user.items);
+		const viewedHash = $viewedItems[userHash];
+		return currentHash !== viewedHash;
+	};
 </script>
 
 <div class="flex flex-col space-y-4" in:fade>
 	<ApprovalAlert approvalCount={data.me._count.items} />
 	<UserCard hideCount user={data.me} />
 
 	{#each data.users as user}
-		<UserCard {user} />
+		{#await hasNewItems(user)}
+			<UserCard {user} />
+		{:then newItems}
+			<UserCard {newItems} {user} />
+		{/await}
 	{/each}
 </div>
 

src/routes/wishlists/[username]/+page.server.ts

@@ -90,20 +90,21 @@ export const load: PageServerLoad = async ({ locals, params, depends, url }) =>
 		}
 	});
 
-	const listOwner = await client.user.findUnique({
+	const listOwner = await client.user.findUniqueOrThrow({
 		where: {
 			username: params.username
 		},
 		select: {
-			name: true
+			name: true,
+			id: true
 		}
 	});
 
 	return {
 		user: session.user,
 		listOwner: {
 			isMe: params.username === session.user.username,
-			name: listOwner?.name
+			...listOwner
 		},
 		items: wishlistItems.filter((item) => item.approved),
 		approvals: wishlistItems.filter((item) => !item.approved),

src/routes/wishlists/[username]/+page.svelte

@@ -12,6 +12,7 @@
 	import { isInstalled } from "$lib/stores/is-installed";
 	import empty from "$lib/assets/no_wishes.svg";
 	import SortBy from "$lib/components/wishlists/chips/SortBy.svelte";
+	import { hash, hashItems, viewedItems } from "$lib/stores/viewed-items";
 
 	export let data: PageData;
 
@@ -54,7 +55,11 @@
 		}, 5000);
 	};
 
-	onMount(pollUpdate);
+	onMount(async () => {
+		const userHash = await hash(data.listOwner.id);
+		$viewedItems[userHash] = await hashItems(data.items);
+		pollUpdate();
+	});
 	onDestroy(() => clearTimeout(pollTimeout));
 
 	$: if (!$idle && !polling) {