add results and document view UI

package.json

@@ -29,6 +29,7 @@
 	},
 	"dependencies": {
 		"flexsearch": "^0.7.43",
+		"mirador": "^3.3.0",
 		"vite-plugin-commonjs": "^0.10.4"
 	},
 	"optionalDependencies": {

src/lib/components/Header.svelte

@@ -19,6 +19,6 @@
 	</div>
 
 	<div class="px-12">
-		<h1>M/S Corpus UI (v1-Sample)</h1>
+		<Link href="{base}"><h1>M/S Corpus UI (v1-Sample)</h1></Link>
 	</div>
 </header>

src/lib/components/SearchTabs.svelte

@@ -7,7 +7,7 @@
 	import G325ASearch from '$lib/components/search/G325A.svelte';
 	import NatCertSearch from '$lib/components/search/NatCert.svelte';
 
-	import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+	import { Tabs, Tab, TabContent, Button } from 'carbon-components-svelte';
 	import { onMount } from 'svelte';
 
 	export let scope;

src/lib/components/search/AFile.svelte

@@ -3,6 +3,7 @@
 	import { addDocument, search } from '$lib/search';
 	import { base } from '$app/paths';
 
+	import ButtonControls from './forms/ButtonControls.svelte';
 	import { FolderShared as AFileIcon } from 'carbon-icons-svelte';
 	import {
 		Form,
@@ -12,8 +13,6 @@
 		RadioButton,
 		MultiSelect,
 		TextInput,
-		Button,
-		ButtonSet,
 		Link
 	} from 'carbon-components-svelte';
 
@@ -173,8 +172,6 @@
 			<RadioButton labelText="M" value="M" />
 		</RadioButtonGroup>
 	</FormGroup>
-	<ButtonSet>
-		<Button kind="secondary">Reset</Button>
-		<Button on:click={handleSearch}>Submit</Button>
-	</ButtonSet>
+
+	<ButtonControls />
 </Form>

src/lib/components/search/G325A.svelte

@@ -1,14 +1,13 @@
 <script>
 	import { base } from '$app/paths';
+	import ButtonControls from './forms/ButtonControls.svelte';
 	import { Identification as G325AIcon } from 'carbon-icons-svelte';
 
 	import {
 		Form,
 		FormGroup,
 		MultiSelect,
 		TextInput,
-		Button,
-		ButtonSet,
 		Link
 	} from 'carbon-components-svelte';
 
@@ -65,8 +64,6 @@
 			</div>
 		</div>
 	</FormGroup>
-	<ButtonSet>
-		<Button kind="secondary">Reset</Button>
-		<Button>Submit</Button>
-	</ButtonSet>
+
+	<ButtonControls />
 </Form>

src/lib/components/search/NatCert.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { base } from '$app/paths';
+	import ButtonControls from './forms/ButtonControls.svelte';
 	import { Policy as NatCertIcon } from 'carbon-icons-svelte';
 
 	import {
@@ -8,8 +9,6 @@
 		MultiSelect,
 		TextInput,
 		NumberInput,
-		Button,
-		ButtonSet,
 		Link
 	} from 'carbon-components-svelte';
 
@@ -93,8 +92,6 @@
 			</div>
 		</div>
 	</FormGroup>
-	<ButtonSet>
-		<Button kind="secondary">Reset</Button>
-		<Button>Submit</Button>
-	</ButtonSet>
+
+	<ButtonControls />
 </Form>

src/lib/components/search/Page.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { addDocument, search } from '$lib/search';
 	import { base } from '$app/paths';
-
+	import ButtonControls from './forms/ButtonControls.svelte';
 	import { Document as PageIcon } from 'carbon-icons-svelte';
 	import {
 		Form,
@@ -12,8 +12,6 @@
 		RadioButton,
 		MultiSelect,
 		TextInput,
-		Button,
-		ButtonSet,
 		Link
 	} from 'carbon-components-svelte';
 
@@ -131,8 +129,5 @@
 		</RadioButtonGroup>
 	</FormGroup>
 
-	<ButtonSet>
-		<Button kind="secondary">Reset</Button>
-		<Button>Submit</Button>
-	</ButtonSet>
+	<ButtonControls />
 </Form>

src/lib/components/search/forms/ButtonControls.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { base } from '$app/paths';
+  
+  import { Button, ButtonSet } from 'carbon-components-svelte';
+</script>
+
+<ButtonSet>
+  <Button kind="secondary">Reset</Button>
+  <Button href={`${base}/results`}>Submit</Button>
+</ButtonSet>

src/routes/results/+page.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { base } from '$app/paths';
+  import { ClickableTile, Pagination } from "carbon-components-svelte";
+  
+  let currentPage = 1;
+  const itemsPerPage = 10;
+  const totalItems = 52; // Example total items, replace with actual data count
+
+  const getPageItems = (page) => {
+    // Replace with actual logic to fetch items for the current page
+    return Array.from({ length: itemsPerPage }, (_, index) => ({
+      id: index + (page - 1) * itemsPerPage,
+      matchedText: "Duis malesuada ut eros sit amet dignissim. Vestibulum vitae mauris quis justo lacinia dictum. Praesent gravida justo quam, quis tristique elit pellentesque sit amet. Donec urna lacus, pharetra in nulla vel, laoreet fringilla elit. Vivamus quis neque id justo porta consectetur a vitae enim. Phasellus blandit ligula ut imperdiet volutpat. Quisque maximus hendrerit magna at aliquam. Donec ipsum nisi, ultrices sed maximus blandit, bibendum sit amet magna. Nulla hendrerit, felis eu fermentum aliquet, sem elit suscipit arcu, a blandit mauris.",
+      thumbnail: `https://dctn4zjpwgdwdiiy5odjv7o2se0bqgjb.lambda-url.us-east-1.on.aws/iiif/3/og-2024-sf-nara_A002249550_0000/square/250,/0/default.jpg`,
+      url: `${base}/view/afile/${index}`,
+      pageCount: 100,
+    }));
+  };
+
+  $: items = getPageItems(currentPage);
+
+  function handlePaginationChange(event) {
+    currentPage = event.detail.page;
+    items = getPageItems(currentPage);
+  }
+</script>
+
+<h2 class="mb-6">Search Results</h2>
+
+<Pagination
+  class="mb-6"
+  totalItems={totalItems}
+  pageSizes={[10, 50]}
+  on:change={handlePaginationChange}
+/>
+
+<div class="space-y-4">
+  {#each items as item}
+    <ClickableTile href={item.url} class="p-4 border rounded-lg shadow hover:shadow-lg transition-shadow duration-200">
+      <div class="flex items-center">
+        <img src={item.thumbnail} alt={item.title} class="w-24 h-32 object-cover rounded mr-4" />
+        <div>
+          <div class="text-lg font-semibold">A-File #{item.id}</div>
+          <div class="text-sm text-gray-500">{item.pageCount} pages</div>
+          <div class="text-sm text-gray-700 my-1">{item.matchedText}</div>
+        </div>
+      </div>
+    </ClickableTile>
+  {/each}
+</div>

src/routes/view/afile/[id]/+page.js

@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+  return {
+      id: params.id
+  }
+}

src/routes/view/afile/[id]/+page.svelte

@@ -0,0 +1,84 @@
+<script>
+  import { onMount } from 'svelte';
+  import Mirador from 'mirador';
+  import { writable } from 'svelte/store';
+  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
+
+  let { data } = $props();
+  const currentPage = writable(0);
+	const numPages = writable(0);
+
+  onMount(() => {
+    const miradorInstance = Mirador.viewer({
+      id: 'mirador',
+      window: {
+        allowClose: false,
+        allowFullscreen: true,
+        hideWindowTitle: true,
+        allowMaximize: false,
+        allowTopMenuButton: false,
+        allowWindowSideBar: false,
+      },
+      windows: [{
+        manifestId: 'https://mats-aperitiiif-presenation-api-store-v1.s3.us-east-1.amazonaws.com/og-2024-sf-nara/A002475884/manifest.json',
+        canvasId: 'https://mats-aperitiiif-presenation-api-store-v1.s3.us-east-1.amazonaws.com/canvas/og-2024-sf-nara_A002475884_0006.json'
+      }],
+      thumbnailNavigation: {
+        defaultPosition: 'far-right',
+      },
+      workspaceControlPanel: {
+        enabled: false,
+      }
+    });
+
+    // Subscribe to Mirador store to listen for changes in the canvas
+    miradorInstance.store.subscribe(() => {
+      const state = miradorInstance.store.getState();
+      const windows = state.windows;
+      const windowId = Object.keys(windows)[0];
+      const currentCanvas = windows[windowId];
+      const currentManifestId = currentCanvas.manifestId;
+      const currentCanvasId = currentCanvas.canvasId;
+      const canvases = state.manifests[currentManifestId].json.sequences[0].canvases;
+
+      // Find the index of the current canvas
+      const currentCanvasIndex = canvases.findIndex(canvas => canvas['@id'] === currentCanvasId);
+
+      // Update the current page based on the canvas index
+      currentPage.set(currentCanvasIndex + 1);
+			numPages.set(canvases.length);
+
+      console.log('Current Canvas Index:', currentCanvasIndex);
+      console.log('Current Page:', currentCanvasIndex + 1);
+    });
+  });
+</script>
+
+<div class="flex gap-6 md:flex-nowrap flex-wrap">
+  <div class="basis-1/2 h-[60vh] border-none relative">
+    <div id="mirador"></div>
+  </div>
+  <div class="basis-1/2 h-[60vh] pb-12">
+    <Tabs autoWidth type="container" class="h-full">
+      <Tab id="afile" label="About this A-File" />
+      <Tab id="page" label="About this Page ({$currentPage}/{$numPages})" />
+      <svelte:fragment slot="content">
+        <TabContent class="bg-white scroll-y h-full">
+          <dl class="text-lg">
+            <dt class="font-extrabold">A-Number</dt>
+            <dd>{data.id}</dd>
+            <dt class="font-extrabold">Page Count</dt>
+            <dd>50</dd>
+            <dt class="font-extrabold">First Name</dt>
+            <dd>NATSU</dd>
+            <dt class="font-extrabold">Last Name</dt>
+            <dd>MIYANISI</dd>
+          </dl>
+        </TabContent>
+        <TabContent class="bg-white scroll-y h-full">
+          I'm loading info for page {$currentPage}
+        </TabContent>
+      </svelte:fragment>
+    </Tabs>
+  </div>
+</div>