From eff8837eb94682e54cda3009af94c7e91d187379 Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Sat, 9 Mar 2024 14:31:15 +0100
Subject: [PATCH 1/4] chore: prepare screenshot URL

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 src/routes/+layout.server.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index a7c6295..49015d0 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -101,6 +101,7 @@ export const load = (async ({ locals, url }) => {
 				...bookmark,
 				icon: getFileUrl('bookmarks', bookmark.id, bookmark.icon),
 				main_image: getFileUrl('bookmarks', bookmark.id, bookmark.main_image),
+				screenshot: getFileUrl('bookmarks', bookmark.id, bookmark.screenshot),
 				...bookmark.expand
 			}))
 		),

From cf42f941bba8e3ec745bb3fc2d5739b0eb7245c4 Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Sat, 9 Mar 2024 14:32:09 +0100
Subject: [PATCH 2/4] feat: if available, display screenshot on mouseover; use
 screenshot if main image is not available

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 .../BookmarkCard/BookmarkCard.svelte          | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/BookmarkCard/BookmarkCard.svelte b/src/lib/components/BookmarkCard/BookmarkCard.svelte
index eb4f08b..58c1422 100644
--- a/src/lib/components/BookmarkCard/BookmarkCard.svelte
+++ b/src/lib/components/BookmarkCard/BookmarkCard.svelte
@@ -1,26 +1,24 @@
 <script lang="ts">
 	import type { Bookmark } from '$lib/types/Bookmark.type';
 
-	import { enhance, applyAction } from '$app/forms';
+	import { applyAction, enhance } from '$app/forms';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
+	import { searchEngine } from '$lib/stores/search.store';
+	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
+	import { userSettingsStore } from '$lib/stores/user-settings.store';
+	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
+	import { showToast } from '$lib/utils/show-toast';
 	import {
-		IconEyeCheck,
-		IconEyeClosed,
-		IconBookmarkFilled,
 		IconBookmark,
+		IconBookmarkFilled,
+		IconClipboardText,
 		IconDots,
-		IconPhotoX,
 		IconExternalLink,
-		IconClipboardText
+		IconEyeCheck,
+		IconEyeClosed,
+		IconPhotoX
 	} from '@tabler/icons-svelte';
-	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
-	import { invalidate } from '$app/navigation';
-	import { showToast } from '$lib/utils/show-toast';
-	import { user } from '$lib/pb';
-	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
-	import { searchEngine } from '$lib/stores/search.store';
-	import { bookmarksStore } from '$lib/stores/bookmarks.store';
-	import { userSettingsStore } from '$lib/stores/user-settings.store';
 
 	export let bookmark: Bookmark = {} as Bookmark;
 	let importanceForm: HTMLFormElement;
@@ -53,8 +51,19 @@
 			on:keydown={onShowBookmark}
 		>
 			<div class="w-full h-36 flex items-center justify-center bg-base hover:bg-base-100">
-				{#if (!bookmark.main_image.endsWith('/') && bookmark.main_image) || bookmark.main_image_url}
+				{#if ((!bookmark.main_image.endsWith('/') && bookmark.main_image) || bookmark.main_image_url) && !bookmark.screenshot.endsWith('/') && bookmark.screenshot}
+					<img
+						src={bookmark.main_image || bookmark.main_image_url}
+						on:mouseover={(e) => (e.target.src = bookmark.screenshot)}
+						on:mouseleave={(e) => (e.target.src = bookmark.main_image || bookmark.main_image_url)}
+						on:focus={(e) => (e.target.src = bookmark.screenshot)}
+						class="w-full h-full object-cover transition duration-300 ease-in-out"
+						alt="Main"
+					/>
+				{:else if (!bookmark.main_image.endsWith('/') && bookmark.main_image) || bookmark.main_image_url}
 					<img src={bookmark.main_image || bookmark.main_image_url} alt="Main" />
+				{:else if !bookmark.screenshot.endsWith('/') || bookmark.screenshot}
+					<img src={bookmark.screenshot} alt="Screenshot" />
 				{:else}
 					<IconPhotoX class="m-auto my-16" />
 				{/if}

From cdde6950c8d98e219005153dd814985715b63c2e Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Sat, 9 Mar 2024 14:32:53 +0100
Subject: [PATCH 3/4] feat: add carousel for main image and screenshot, if both
 available

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 .../ShowBookmarkContent.svelte                | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
index ba76cb3..d9cdda0 100644
--- a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
+++ b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
@@ -8,6 +8,9 @@
 
 	export let closeModal: () => void;
 	let contentTab = writable<'text' | 'html'>('html');
+	let imageTab = writable<'main' | 'screenshot'>(
+		$showBookmarkStore.main_image || $showBookmarkStore.main_image_url ? 'main' : 'screenshot'
+	);
 
 	function onEditBookmark() {
 		closeModal();
@@ -50,12 +53,31 @@
 							<p class="badge badge-ghost">{$bookmark.domain}</p>
 						</div>
 						<div class="">
-							{#if ($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url}
-								<img
-									src={$bookmark.main_image || $bookmark.main_image_url}
-									alt="Main"
-									class="rounded-md max-w-[70vw] md:max-w-sm"
-								/>
+							<div class="carousel rounded-md max-w-[70vw] md:max-w-sm">
+								{#if ($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url}
+									<div id="main-image" class="carousel-item w-full">
+										<img
+											src={$bookmark.main_image || $bookmark.main_image_url}
+											class="w-full object-contain"
+											alt="Main"
+										/>
+									</div>
+								{/if}
+								{#if $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
+									<div id="screenshot" class="carousel-item w-full">
+										<img
+											src={$bookmark.screenshot}
+											class="w-full object-contain"
+											alt="Screenshot"
+										/>
+									</div>
+								{/if}
+							</div>
+							{#if (($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url) && $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
+								<div class="flex justify-center w-full py-2 gap-2">
+									<a href="#main-image" class="btn btn-xs">Main image</a>
+									<a href="#screenshot" class="btn btn-xs">Screenshot</a>
+								</div>
 							{/if}
 						</div>
 						<div>

From 649d38c6bcf84ce781678aa9a8d40d8448f979d7 Mon Sep 17 00:00:00 2001
From: Robert Goniszewski <robertgoniszewski@outlook.com>
Date: Thu, 14 Mar 2024 18:45:52 +0100
Subject: [PATCH 4/4] chore: improve styling; update types

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>
---
 .../ShowBookmarkContent.svelte                | 51 ++++++++++---------
 src/lib/stores/show-bookmark.store.ts         |  2 +-
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
index d9cdda0..f718bab 100644
--- a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
+++ b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { writable, type Writable } from 'svelte/store';
-	import { page } from '$app/stores';
 
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
@@ -8,17 +7,12 @@
 
 	export let closeModal: () => void;
 	let contentTab = writable<'text' | 'html'>('html');
-	let imageTab = writable<'main' | 'screenshot'>(
-		$showBookmarkStore.main_image || $showBookmarkStore.main_image_url ? 'main' : 'screenshot'
-	);
 
 	function onEditBookmark() {
 		closeModal();
 		editBookmarkStore.set($bookmark);
 	}
-	const bookmark = writable<Partial<Bookmark>>({});
-
-	$: $bookmark = { ...$showBookmarkStore };
+	const bookmark = writable<Bookmark>();
 
 	const bookmarkTagsInput: Writable<
 		| {
@@ -29,6 +23,7 @@
 		| null
 	> = writable(null);
 
+	$: $bookmark = { ...$showBookmarkStore };
 	$: $bookmarkTagsInput = $bookmark.tags?.map((t) => ({ value: t.id, label: t.name })) || null;
 </script>
 
@@ -52,34 +47,42 @@
 							{/if}
 							<p class="badge badge-ghost">{$bookmark.domain}</p>
 						</div>
-						<div class="">
-							<div class="carousel rounded-md max-w-[70vw] md:max-w-sm">
-								{#if ($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url}
-									<div id="main-image" class="carousel-item w-full">
+						<div
+							class="carousel carousel-center max-w-md space-x-4 bg-neutral rounded-box mx-auto h-72 p-1"
+						>
+							{#if ($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url}
+								<div id="main-image" class="carousel-item w-full">
+									<a
+										href={$bookmark.main_image || $bookmark.main_image_url}
+										target="_blank"
+										class="flex w-full"
+									>
 										<img
 											src={$bookmark.main_image || $bookmark.main_image_url}
-											class="w-full object-contain"
+											class="w-full object-scale-down justify-self-center"
 											alt="Main"
 										/>
-									</div>
-								{/if}
-								{#if $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
-									<div id="screenshot" class="carousel-item w-full">
+									</a>
+								</div>
+							{/if}
+							{#if $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
+								<div id="screenshot" class="carousel-item w-full">
+									<a href={$bookmark.screenshot} target="_blank" class="flex w-full">
 										<img
 											src={$bookmark.screenshot}
-											class="w-full object-contain"
+											class="w-full object-scale-down justify-self-center"
 											alt="Screenshot"
 										/>
-									</div>
-								{/if}
-							</div>
-							{#if (($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url) && $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
-								<div class="flex justify-center w-full py-2 gap-2">
-									<a href="#main-image" class="btn btn-xs">Main image</a>
-									<a href="#screenshot" class="btn btn-xs">Screenshot</a>
+									</a>
 								</div>
 							{/if}
 						</div>
+						{#if (($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url) && $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
+							<div class="flex justify-center w-full py-2 gap-2">
+								<a href="#main-image" class="btn btn-xs">Main image</a>
+								<a href="#screenshot" class="btn btn-xs">Screenshot</a>
+							</div>
+						{/if}
 						<div>
 							<h3 class="text-xl">Tags</h3>
 							<div class="flex flex-wrap gap-2 m-1">
diff --git a/src/lib/stores/show-bookmark.store.ts b/src/lib/stores/show-bookmark.store.ts
index 3939c1c..cbbcb1c 100644
--- a/src/lib/stores/show-bookmark.store.ts
+++ b/src/lib/stores/show-bookmark.store.ts
@@ -1,4 +1,4 @@
 import type { Bookmark } from '$lib/types/Bookmark.type';
 import { writable } from 'svelte/store';
 
-export const showBookmarkStore = writable<Partial<Bookmark>>({});
+export const showBookmarkStore = writable<Bookmark>();