wip: UI to show image and associated properties

wip

fix

frontend/src/App.tsx

@@ -22,6 +22,7 @@ import { ImageViewer } from "./components/ImageViewer";
 import { ImageStatus } from "./components/image-status/ImageStatus";
 import { SearchImageContextProvider } from "./contexts/SearchImageContext";
 import { type sendImage, sendImageFile } from "./network";
+import { Image } from "./Image";
 
 const currentPlatform = platform();
 console.log("Current Platform: ", currentPlatform);
@@ -94,9 +95,16 @@ export const App = () => {
 
                     <Route path="/" component={ProtectedRoute}>
                         <Route path="/" component={Search} />
+                        <Route path="/image/:imageId" component={Image} />
                         <Route path="/settings" component={Settings} />
                     </Route>
                 </Route>
+                <Route
+                    path="*"
+                    component={() => {
+                        return <p>{window.location.href}</p>;
+                    }}
+                />
             </Router>
         </SearchImageContextProvider>
     );

frontend/src/Image.tsx

@@ -0,0 +1,31 @@
+import { useParams } from "@solidjs/router";
+import { For, Show, type Component } from "solid-js";
+import { base, type UserImage } from "./network";
+import { useSearchImageContext } from "./contexts/SearchImageContext";
+import { SearchCard } from "./components/search-card/SearchCard";
+
+export const Image: Component = () => {
+    const { imageId } = useParams<{ imageId: string }>();
+
+    const { imagesWithProperties } = useSearchImageContext();
+
+    const imageProperties = (): UserImage[] | undefined =>
+        Object.entries(imagesWithProperties()).find(
+            ([id]) => id === imageId,
+        )?.[1];
+
+    return (
+        <main class="flex flex-col items-center">
+            <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">
+                <Show when={imageProperties()}>
+                    {(image) => (
+                        <For each={image()}>
+                            {(property) => <SearchCard item={property} />}
+                        </For>
+                    )}
+                </Show>
+            </div>
+        </main>
+    );
+};

frontend/src/Search.tsx

@@ -16,6 +16,7 @@ import { ItemModal } from "./components/item-modal/ItemModal";
 import type { Shortcut } from "./components/shortcuts/hooks/useShortcutEditor";
 import { base, type UserImage } from "./network";
 import { useSearchImageContext } from "./contexts/SearchImageContext";
+import { A } from "@solidjs/router";
 
 export const Search = () => {
     const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
@@ -170,12 +171,12 @@ export const Search = () => {
                 <div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
                     <For each={Object.keys(imagesWithProperties())}>
                         {(imageId) => (
-                            <div>
+                            <A href={`/image/${imageId}`}>
                                 <img
                                     alt="One of the users images"
                                     src={`${base}/image/${imageId}`}
                                 />
-                            </div>
+                            </A>
                         )}
                     </For>
                 </div>

frontend/src/components/search-card/SearchCard.tsx

@@ -6,6 +6,7 @@ import { SearchCardNote } from "./SearchCardNote";
 
 export const SearchCard = (props: { item: UserImage }) => {
     const { item } = props;
+    console.log(item);
 
     switch (item.type) {
         case "location":

frontend/src/components/search-card/SearchCardContact.tsx

@@ -11,7 +11,7 @@ export const SearchCardContact = ({ item }: Props) => {
     const { data } = item;
 
     return (
-        <div class="absolute inset-0 p-3 bg-orange-50">
+        <div class="inset-0 p-3 bg-orange-50">
             <div class="flex mb-1 items-center gap-1">
                 <IconUser size={14} class="text-neutral-500" />
                 <p class="text-xs text-neutral-500">Contact</p>

frontend/src/components/search-card/SearchCardEvent.tsx

@@ -9,7 +9,7 @@ export const SearchCardEvent = ({ item }: Props) => {
     const { data } = item;
 
     return (
-        <div class="absolute inset-0 p-3 bg-purple-50">
+        <div class="inset-0 p-3 bg-purple-50">
             <div class="flex mb-1 items-center gap-1">
                 <IconCalendar size={14} class="text-neutral-500" />
                 <p class="text-xs text-neutral-500">Event</p>

frontend/src/components/search-card/SearchCardLocation.tsx

@@ -9,7 +9,7 @@ export const SearchCardLocation = ({ item }: Props) => {
     const { data } = item;
 
     return (
-        <div class="absolute inset-0 p-3 bg-red-50">
+        <div class="inset-0 p-3 bg-red-50">
             <div class="flex mb-1 items-center gap-1">
                 <IconMapPin size={14} class="text-neutral-500" />
                 <p class="text-xs text-neutral-500">Location</p>

frontend/src/components/search-card/SearchCardNote.tsx

@@ -12,7 +12,7 @@ export const SearchCardNote = ({ item }: Props) => {
     const { data } = item;
 
     return (
-        <div class="absolute inset-0 p-3 bg-green-50">
+        <div class="inset-0 p-3 bg-green-50">
             <div class="flex mb-1 items-center gap-1">
                 <IconNote size={14} class="text-neutral-500" />
                 <p class="text-xs text-neutral-500">Note</p>

frontend/src/components/search-card/SearchCardReceipt.tsx

@@ -11,7 +11,7 @@ export const SearchCardReceipt = ({ item }: Props) => {
     const { data } = item;
 
     return (
-        <div class="absolute inset-0 p-3 bg-yellow-50">
+        <div class="inset-0 p-3 bg-yellow-50">
             <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
                 <p class="text-sm text-neutral-900 font-bold">
                     {data.orderNumber} - {data.vendor}

frontend/src/components/search-card/SearchCardWebsite.tsx

@@ -11,7 +11,7 @@ export const SearchCardWebsite = ({ item }: Props) => {
     const { data } = item;
 
     return (
-        <div class="absolute inset-0 p-3 bg-blue-50">
+        <div class="inset-0 p-3 bg-blue-50">
             <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
                 <p class="text-sm text-neutral-900 font-bold">{data.title}</p>
                 <IconLink size={20} class="text-neutral-500 mt-1" />