From 4fa8bfb7bd5f5533f1bceaca05d22e89059b9f95 Mon Sep 17 00:00:00 2001
From: John Costa <johncosta027@gmail.com>
Date: Wed, 7 May 2025 10:36:36 +0100
Subject: [PATCH] fix: UI for images

---
 frontend/src/App.tsx   |  6 +++---
 frontend/src/Image.tsx | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f5b69ec..ac04e58 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { Route, Router } from "@solidjs/router";
+import { Navigate, Route, Router } from "@solidjs/router";
 import type { PluginListener } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { readFile } from "@tauri-apps/plugin-fs";
@@ -97,7 +97,7 @@ export const App = () => {
                     <Route path="/" component={ProtectedRoute}>
                         <Route path="/" component={WithEntityDialog}>
                             <Route path="/" component={Search} />
-                            <Route path="/image/imageId" component={Image} />
+                            <Route path="/image/:imageId" component={Image} />
                         </Route>
                         <Route path="/settings" component={Settings} />
                     </Route>
@@ -105,7 +105,7 @@ export const App = () => {
                 <Route
                     path="*"
                     component={() => {
-                        return <p>{window.location.href}</p>;
+                        return <Navigate href="/" />;
                     }}
                 />
             </Router>
diff --git a/frontend/src/Image.tsx b/frontend/src/Image.tsx
index ce98c45..395cc90 100644
--- a/frontend/src/Image.tsx
+++ b/frontend/src/Image.tsx
@@ -4,6 +4,7 @@ import { base, type UserImage } from "./network";
 import { useSearchImageContext } from "./contexts/SearchImageContext";
 import { SearchCard } from "./components/search-card/SearchCard";
 import { IconArrowLeft } from "@tabler/icons-solidjs";
+import { useSetEntity } from "./WithEntityDialog";
 
 export const Image: Component = () => {
     const { imageId } = useParams<{ imageId: string }>();
@@ -15,6 +16,8 @@ export const Image: Component = () => {
             ([id]) => id === imageId,
         )?.[1];
 
+    const setEntity = useSetEntity();
+
     return (
         <main class="flex flex-col items-center">
             <nav>
@@ -23,11 +26,19 @@ export const Image: Component = () => {
                 </A>
             </nav>
             <img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
-            <div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
+            <div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
                 <Show when={imageProperties()}>
                     {(image) => (
                         <For each={image()}>
-                            {(property) => <SearchCard item={property} />}
+                            {(property) => (
+                                <div
+                                    onKeyDown={() => setEntity(property)}
+                                    onClick={() => setEntity(property)}
+                                    class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
+                                >
+                                    <SearchCard item={property} />
+                                </div>
+                            )}
                         </For>
                     )}
                 </Show>