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

@@ -24,7 +24,7 @@ const NullableParagraph: Component<{
 	);
 };
 
-const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
+export const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
 	switch (props.item.type) {
 		case "note":
 			return (
@@ -64,10 +64,7 @@ const ConcreteItemModal: Component<Pick<Props, "item">> = (props) => {
 					<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"

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>
 	);
 };