From d3d1157a4efa70d771a3ce864fb22d8db1d1593a Mon Sep 17 00:00:00 2001
From: arkohut <39525455+arkohut@users.noreply.github.com>
Date: Fri, 12 Jul 2024 00:43:23 +0800
Subject: [PATCH] feat(web): show id

---
 web/src/lib/Figure.svelte   | 13 ++++++++++++-
 web/src/routes/+page.svelte |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/Figure.svelte b/web/src/lib/Figure.svelte
index 123e842..41b8b7f 100644
--- a/web/src/lib/Figure.svelte
+++ b/web/src/lib/Figure.svelte
@@ -2,12 +2,17 @@
 <script>
 	import OCRTable from './OCRTable.svelte';
 	import { marked } from 'marked';
+	
+	/**
+	 * @type {string}
+	 */
+	export let id;
 	/**
 	 * @type {any}
 	 */
 	export let image;
 	/**
-	 * @type {any}
+	 * @type {string}
 	 */
 	export let title;
 	/**
@@ -88,6 +93,12 @@
 			</div>
 			<!-- Description container -->
 			<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full">
+				<div class="mb-2 mr-2 pb-2 border-b border-gray-300">
+					<span class="uppercase tracking-wide text-sm text-indigo-600 font-bold">ID</span>
+					<span class="mt-1 text-sm leading-tight font-medium text-gray-500 font-mono">
+						{id}
+					</span>
+				</div>
 				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
 				<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
 					{title}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 3b52191..b2a1f30 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -142,11 +142,11 @@
 
 {#if searchResults.length && showModal}
 	<Figure
+		id={searchResults[selectedImage].id}
 		image={`${apiEndpoint}/files/${searchResults[selectedImage].filepath}`}
 		title={filename(searchResults[selectedImage].filepath)}
 		tags={searchResults[selectedImage].tags}
 		metadata_entries={searchResults[selectedImage].metadata_entries}
-		content={''}
 		onClose={closeModal}
 		onNext={() => openModal((selectedImage + 1) % searchResults.length)}
 		onPrevious={() => openModal((selectedImage - 1 + searchResults.length) % searchResults.length)}