feat: navigation for image and entities instead of a modal

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { A, Navigate, Route, Router } from "@solidjs/router";
+import { A, Navigate, Route, Router, useNavigate } 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";
@@ -23,7 +23,13 @@ import { sendImageFile } from "./network";
 import { Image } from "./Image";
 import { WithEntityDialog } from "./WithEntityDialog";
 import { Gallery } from "./gallery";
-import { IconHome, IconPhoto, IconSearch } from "@tabler/icons-solidjs";
+import {
+	IconArrowLeft,
+	IconHome,
+	IconPhoto,
+	IconSearch,
+} from "@tabler/icons-solidjs";
+import { Entity } from "./Entity";
 
 const currentPlatform = platform();
 console.log("Current Platform: ", currentPlatform);
@@ -35,8 +41,14 @@ const AppWrapper: Component<ParentProps> = (props) => {
 };
 
 const WithDock: Component<ParentProps> = (props) => {
+	const nav = useNavigate();
+
 	return (
 		<div class="w-full flex flex-col items-center">
+			{/* TODO: this should only show up when NOT on the home page. */}
+			<div class="cursor-pointer" onClick={() => nav(-1)}>
+				<IconArrowLeft />
+			</div>
 			{props.children}
 			<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
 				<A href="/" class="w-full flex justify-center items-center">
@@ -110,6 +122,7 @@ export const App = () => {
 							<Route path="/" component={WithEntityDialog}>
 								<Route path="/" component={Search} />
 								<Route path="/image/:imageId" component={Image} />
+								<Route path="/entity/:entityId" component={Entity} />
 								<Route path="/gallery/:entity" component={Gallery} />
 							</Route>
 							<Route path="/settings" component={Settings} />

frontend/src/Entity.tsx

@@ -0,0 +1,28 @@
+import { useParams } from "@solidjs/router";
+import { Component, For, Show } from "solid-js";
+import { ConcreteItemModal } from "./components/item-modal/ItemModal";
+import { useSearchImageContext } from "./contexts/SearchImageContext";
+
+export const Entity: Component = () => {
+	const params = useParams<{ entityId: string }>();
+
+	const { images } = useSearchImageContext();
+
+	const entity = () => images().find((i) => i.data.ID === params.entityId);
+
+	return (
+		<div>
+			<Show
+				when={entity()}
+				fallback={<>Sorry, this entity could not be found</>}
+			>
+				{(e) => (
+					<div>
+						<ConcreteItemModal item={e()} />
+						<For each={e().data.Images}>{(imageId) => <p>{imageId}</p>}</For>
+					</div>
+				)}
+			</Show>
+		</div>
+	);
+};

frontend/src/components/item-modal/ItemModal.tsx

@@ -4,92 +4,89 @@ import { Show, type Component } from "solid-js";
 import SolidjsMarkdown from "solidjs-markdown";
 
 type Props = {
-    item: UserImage;
-    onClose: () => void;
+	item: UserImage;
+	onClose: () => void;
 };
 
 const NullableParagraph: Component<{
-    item: string | null;
-    itemTitle: string;
+	item: string | null;
+	itemTitle: string;
 }> = (props) => {
-    return (
-        <Show when={props.item}>
-            {(item) => (
-                <>
-                    <p class="font-semibold text-xl">{props.itemTitle}</p>
-                    <p class="text-md">{item()}</p>
-                </>
-            )}
-        </Show>
-    );
+	return (
+		<Show when={props.item}>
+			{(item) => (
+				<>
+					<p class="font-semibold text-xl">{props.itemTitle}</p>
+					<p class="text-md">{item()}</p>
+				</>
+			)}
+		</Show>
+	);
 };
 
-const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
-    switch (props.item.type) {
-        case "note":
-            return (
-                <SolidjsMarkdown>
-                    {props.item.data.Content.slice(
-                        "```markdown".length,
-                        props.item.data.Content.length - "```".length,
-                    )}
-                </SolidjsMarkdown>
-            );
-        case "location":
-            return (
-                <div class="flex flex-col gap-2">
-                    <p class="font-semibold text-xl">Address</p>
-                    <p class="text-md">{props.item.data.Address}</p>
-                </div>
-            );
-        case "event":
-            return (
-                <div class="flex flex-col gap-2">
-                    <p class="font-semibold text-xl">Event</p>
-                    <p class="text-md">{props.item.data.Name}</p>
+export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
+	switch (props.item.type) {
+		case "note":
+			return (
+				<SolidjsMarkdown>
+					{props.item.data.Content.slice(
+						"```markdown".length,
+						props.item.data.Content.length - "```".length,
+					)}
+				</SolidjsMarkdown>
+			);
+		case "location":
+			return (
+				<div class="flex flex-col gap-2">
+					<p class="font-semibold text-xl">Address</p>
+					<p class="text-md">{props.item.data.Address}</p>
+				</div>
+			);
+		case "event":
+			return (
+				<div class="flex flex-col gap-2">
+					<p class="font-semibold text-xl">Event</p>
+					<p class="text-md">{props.item.data.Name}</p>
 
-                    <NullableParagraph
-                        itemTitle="Start Time"
-                        item={props.item.data.StartDateTime}
-                    />
-                    <NullableParagraph
-                        itemTitle="End Time"
-                        item={props.item.data.EndDateTime}
-                    />
-                </div>
-            );
-        case "contact":
-            return (
-                <div class="flex flex-col gap-2">
-                    <p class="font-semibold text-xl">Contact</p>
-                    <p class="text-md">{props.item.data.Name}</p>
+					<NullableParagraph
+						itemTitle="Start Time"
+						item={props.item.data.StartDateTime}
+					/>
+					<NullableParagraph
+						itemTitle="End Time"
+						item={props.item.data.EndDateTime}
+					/>
+				</div>
+			);
+		case "contact":
+			return (
+				<div class="flex flex-col gap-2">
+					<p class="font-semibold text-xl">Contact</p>
+					<p class="text-md">{props.item.data.Name}</p>
 
-                    <NullableParagraph
-                        itemTitle="Email"
-                        item={props.item.data.Email}
-                    />
+					<NullableParagraph itemTitle="Email" item={props.item.data.Email} />
 
-                    <NullableParagraph
-                        itemTitle="Phone Number"
-                        item={props.item.data.PhoneNumber}
-                    />
-                </div>
-            );
-    }
+					<NullableParagraph
+						itemTitle="Phone Number"
+						item={props.item.data.PhoneNumber}
+					/>
+				</div>
+			);
+	}
 };
 
 export const ItemModal: Component<Props> = (props) => {
-    return (
-        <div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
-            <div class="flex justify-between">
-                <h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
-                <button type="button" onClick={props.onClose}>
-                    <IconX size={24} class="text-neutral-500" />
-                </button>
-            </div>
-            <div class="flex flex-col gap-2 mb-2">
-                <ConcreteItemModal item={props.item} />
-            </div>
-        </div>
-    );
+	return (
+		<div class="fixed z-10 inset-2 rounded-2xl p-4 bg-white border border-neutral-300">
+			<div class="flex justify-between">
+				<h1 class="text-2xl font-bold">{props.item.data.Name}</h1>
+				<button type="button" onClick={props.onClose}>
+					<IconX size={24} class="text-neutral-500" />
+				</button>
+			</div>
+			<div class="flex flex-col gap-2 mb-2">
+				<ConcreteItemModal item={props.item} />
+			</div>
+		</div>
+	);
 };

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

@@ -1,3 +1,4 @@
+import { A } from "@solidjs/router";
 import type { UserImage } from "../../network";
 import { SearchCardContact } from "./SearchCardContact";
 import { SearchCardEvent } from "./SearchCardEvent";
@@ -23,8 +24,11 @@ const UnwrappedSearchCard = (props: { item: UserImage }) => {
 
 export const SearchCard = (props: { item: UserImage }) => {
 	return (
-		<div class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl">
+		<A
+			href={`/entity/${props.item.data.ID}`}
+			class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
+		>
 			<UnwrappedSearchCard item={props.item} />
-		</div>
+		</A>
 	);
 };