wip(frontend): adding more information

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import Fuse from "fuse.js";
 import { createEffect, createResource, createSignal, For } from "solid-js";
 import { getUserImages } from "./network";
+import { ImageViewer } from "./components/ImageViewer";
 
 type UserImages = Awaited<ReturnType<typeof getUserImages>>;
 
@@ -18,7 +19,6 @@ function App() {
     const nav = useNavigate();
 
     let fuze = new Fuse<NonNullable<UserImages[number]["Text"]>[number]>([], {
-        keys: ["Text.ImageText"],
         keys: ["ImageText"],
     });
 
@@ -26,7 +26,6 @@ function App() {
     createEffect(() => {
         const userImages = images();
 
-        console.log(userImages);
         if (userImages == null) {
             return;
         }
@@ -98,23 +97,24 @@ function App() {
                         </Search.Indicator>
                         <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
                     </Search.Control>
+                    <Search.Portal>
+                        <Search.Content
+                            class="h-[254px] overflow-scroll scrollbar-hide"
+                            onCloseAutoFocus={(e) => e.preventDefault()}
+                        >
+                            <Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
+                            <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
+                                No results found
+                            </Search.NoResult>
+                        </Search.Content>
+                    </Search.Portal>
                 </Search>
             </div>
             {/* <div class="mt-4 text-base leading-none">
         Emoji selected: {emoji()?.emoji} {emoji()?.name}
       </div> */}
-            {/* <ImageViewer /> */}
+            <ImageViewer />
             <div class="px-4 mt-4 bg-white rounded-t-2xl">
-                <Search.Content
-                    class="h-[254px] overflow-scroll scrollbar-hide"
-                    onCloseAutoFocus={(e) => e.preventDefault()}
-                >
-                    <Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
-                    <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
-                        No results found
-                    </Search.NoResult>
-                </Search.Content>
-
                 <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
                 <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
                 <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />

frontend/src/ImagePage.tsx

@@ -25,10 +25,41 @@ export function ImagePage() {
         <Suspense fallback={<>Loading...</>}>
             <A href="/">Back</A>
             <h1 class="text-2xl font-bold">{image()?.Image.ImageName}</h1>
-            <img src={`http://localhost:3040/image/${image()?.ID}`} />
+            <img
+                src={`http://localhost:3040/image/${image()?.ID}`}
+                alt="link"
+            />
             <div class="flex flex-col">
+                <h2 class="text-xl font-bold">Tags</h2>
                 <For each={image()?.Tags ?? []}>
-                    {(tag) => <div>{tag.Tag}</div>}
+                    {(tag) => <div>{tag.Tag.Tag}</div>}
+                </For>
+
+                <h2 class="text-xl font-bold">Locations</h2>
+                <For each={image()?.Locations ?? []}>
+                    {(location) => (
+                        <ul>
+                            <li>{location.Name}</li>
+                            {location.Address && <li>{location.Address}</li>}
+                            {location.Coordinates && (
+                                <li>{location.Coordinates}</li>
+                            )}
+                            {location.Description && (
+                                <li>{location.Description}</li>
+                            )}
+                        </ul>
+                    )}
+                </For>
+
+                <h2 class="text-xl font-bold">Events</h2>
+                <For each={image()?.Events ?? []}>
+                    {(event) => (
+                        <ul>
+                            <li>{event.Name}</li>
+                            {event.Location && <li>{event.Location.Name}</li>}
+                            {event.Description && <li>{event.Description}</li>}
+                        </ul>
+                    )}
                 </For>
             </div>
         </Suspense>

frontend/src/network/index.ts

@@ -7,6 +7,7 @@ import {
     parse,
     pipe,
     string,
+    undefinedable,
     uuid,
 } from "valibot";
 
@@ -82,7 +83,7 @@ const getUserImagesResponseValidator = array(
             array(
                 object({
                     ID: pipe(string(), uuid()),
-                    Links: string(),
+                    Link: string(),
                     ImageID: pipe(string(), uuid()),
                 }),
             ),