From 55266c2fac5544be977c3c0295cad06269582983 Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Thu, 28 Dec 2023 15:19:21 +0100
Subject: [PATCH] fix: add Svelte's key value for '#each' blocks to ensure
 reactivity of nested components; fix import

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 src/lib/components/BookmarkCard/BookmarkCard.svelte        | 2 +-
 .../components/BookmarkListItem/BookmarkListItem.svelte    | 2 +-
 src/lib/components/BookmarksList/BookmarkList.svelte       | 4 ++--
 src/lib/components/CategoryTree/CategoryTree.svelte        | 7 +++----
 .../ShowBookmarkContent/ShowBookmarkContent.svelte         | 2 +-
 src/routes/+layout.svelte                                  | 2 +-
 src/routes/admin/+page.svelte                              | 2 +-
 src/routes/profile/+page.svelte                            | 2 +-
 8 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/BookmarkCard/BookmarkCard.svelte b/src/lib/components/BookmarkCard/BookmarkCard.svelte
index b4de293..2bf2c2d 100644
--- a/src/lib/components/BookmarkCard/BookmarkCard.svelte
+++ b/src/lib/components/BookmarkCard/BookmarkCard.svelte
@@ -266,7 +266,7 @@
 			<div class="card-actions justify-end px-2 font-medium tracking-tight gap-1">
 				<span class="font-sans font-semibold text-xs">#</span>
 				{#if bookmark.tags}
-					{#each bookmark.tags as tag}
+					{#each bookmark.tags as tag (tag.id)}
 						<a href={`/tags/${tag.name}`} class="link font-sans text-xs">{tag.name}</a>
 					{/each}
 				{/if}
diff --git a/src/lib/components/BookmarkListItem/BookmarkListItem.svelte b/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
index 37ed935..4d8d21e 100644
--- a/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
+++ b/src/lib/components/BookmarkListItem/BookmarkListItem.svelte
@@ -139,7 +139,7 @@
 			<div class="flex w-full gap-1">
 				<span class="font-sans font-semibold text-xs">#</span>
 				{#if bookmark.tags}
-					{#each bookmark.tags as tag}
+					{#each bookmark.tags as tag (tag.id)}
 						<a
 							href={`/tags/${tag.name}`}
 							class="link font-sans text-xs w-full whitespace-nowrap max-w-[8rem] hover:text-secondary"
diff --git a/src/lib/components/BookmarksList/BookmarkList.svelte b/src/lib/components/BookmarksList/BookmarkList.svelte
index 215b9fd..0a71c47 100644
--- a/src/lib/components/BookmarksList/BookmarkList.svelte
+++ b/src/lib/components/BookmarksList/BookmarkList.svelte
@@ -13,13 +13,13 @@
 	{#if $page.data.bookmarks.length > 0}
 		{#if $userSettingsStore.bookmarksView === 'grid'}
 			<div class="w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-				{#each bookmarks as bookmark}
+				{#each bookmarks as bookmark (bookmark.id)}
 					<BookmarkCard {bookmark} />
 				{/each}
 			</div>
 		{:else if $userSettingsStore.bookmarksView === 'list'}
 			<div class="flex flex-col w-full gap-2">
-				{#each bookmarks as bookmark}
+				{#each bookmarks as bookmark (bookmark.id)}
 					<BookmarkListItem {bookmark} />
 				{/each}
 			</div>
diff --git a/src/lib/components/CategoryTree/CategoryTree.svelte b/src/lib/components/CategoryTree/CategoryTree.svelte
index 068a51c..8118c04 100644
--- a/src/lib/components/CategoryTree/CategoryTree.svelte
+++ b/src/lib/components/CategoryTree/CategoryTree.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { editCategoryStore } from '$lib/stores/edit-category.store';
 	import Icon from '$lib/components/Icon/Icon.svelte';
-	import type { Category } from '$lib/interfaces/Category.interface';
+	import type { Category } from '$lib/types/Category.type';
 
 	export let categories: (Category & { children?: Category[] })[] | [] = [];
 </script>
 
-{#each categories as category}
+{#each categories as category (category.id)}
 	<div class="flex flex-col">
 		<div class="flex items-center">
 			{#if !category.icon}
@@ -23,7 +22,7 @@
 		</div>
 
 		{#if category.children}
-			{#each category.children as categoryChild}
+			{#each category.children as categoryChild (categoryChild.id)}
 				<div class="flex items-center ml-4">
 					{#if !categoryChild.icon}
 						<div
diff --git a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
index 23d0a92..e26e838 100644
--- a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
+++ b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
@@ -63,7 +63,7 @@
 							<h3 class="text-xl">Tags</h3>
 							<div class="flex flex-wrap gap-2 m-1">
 								{#if $bookmark.tags?.length}
-									{#each $bookmark.tags as tag}
+									{#each $bookmark.tags as tag (tag.id)}
 										<span class="badge badge-outline badge-sm whitespace-nowrap">{tag.name}</span>
 									{/each}
 								{:else}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 48c524a..1505f61 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -155,7 +155,7 @@
 							<div>
 								<h3 class="text-xl">Tags</h3>
 								<div class="flex flex-wrap p-2">
-									{#each $page.data.tags as tag}
+									{#each $page.data.tags as tag (tag.id)}
 										{#if tag.bookmarks.length > 0}
 											<a href={`/tags/${tag.slug}`} class="link m-1 hover:text-secondary"
 												>#{tag.name}</a
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index ceadde4..0bd12d2 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -67,7 +67,7 @@
 									</thead>
 									<!-- body -->
 									<tbody>
-										{#each data.adminData.users as user}
+										{#each data.adminData.users as user (user.id)}
 											<tr>
 												<td>{user.id}</td>
 												<td>{user.name}</td>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 30fc7a1..a9fb9b2 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -82,7 +82,7 @@
 				<h2 class="card-title">Latest bookmarks</h2>
 				{#if $page.data.bookmarks.length > 0}
 					<div class="flex flex-col w-full columns-sm gap-2">
-						{#each $page.data.bookmarks.slice(0, 3) as bookmark}
+						{#each $page.data.bookmarks.slice(0, 3) as bookmark (bookmark.id)}
 							<a
 								href={bookmark.url}
 								title={bookmark.url}