feat: gallery for each category

frontend/src/App.tsx

@@ -22,6 +22,7 @@ import { SearchImageContextProvider } from "./contexts/SearchImageContext";
 import { sendImageFile } from "./network";
 import { Image } from "./Image";
 import { WithEntityDialog } from "./WithEntityDialog";
+import { Gallery } from "./gallery";
 
 const currentPlatform = platform();
 console.log("Current Platform: ", currentPlatform);
@@ -52,8 +53,7 @@ export const App = () => {
 		const setupListener = async () => {
 			console.log("Setting up listener");
 
-            listener = await listenForShareEvents(
-                async (intent: ShareEvent) => {
+			listener = await listenForShareEvents(async (intent: ShareEvent) => {
 				console.log(intent);
 				const contents = await readFile(intent.stream ?? "").catch(
 					(error: Error) => {
@@ -67,8 +67,7 @@ export const App = () => {
 				});
 
 				sendImageFile(f.name, f);
-                },
-            );
+			});
 		};
 
 		setupListener();
@@ -88,6 +87,7 @@ export const App = () => {
 						<Route path="/" component={WithEntityDialog}>
 							<Route path="/" component={Search} />
 							<Route path="/image/:imageId" component={Image} />
+							<Route path="/gallery/:entity" component={Gallery} />
 						</Route>
 						<Route path="/settings" component={Settings} />
 					</Route>

frontend/src/front/index.tsx

@@ -1,9 +1,11 @@
-import { Component, createEffect, For } from "solid-js";
+import { Component, For } from "solid-js";
 import {
 	SearchImageStore,
 	useSearchImageContext,
 } from "../contexts/SearchImageContext";
+import { A } from "@solidjs/router";
 
+// TODO: lots of stuff to do with Entities, this could be seperated into a centralized place.
 const CategoryColor: Record<
 	keyof ReturnType<SearchImageStore["categories"]>,
 	string
@@ -21,7 +23,8 @@ export const Categories: Component = () => {
 		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-4 rounded-xl bg-white p-4">
 			<For each={Object.entries(categories())}>
 				{([category, group]) => (
-					<div
+					<A
+						href={`/gallery/${category}`}
 						class={
 							"col-span-2 flex flex-col justify-center items-center rounded-lg p-4 border border-neutral-200 " +
 							"capitalize " +
@@ -32,7 +35,7 @@ export const Categories: Component = () => {
 					>
 						<p class="text-xl font-bold">{category}s</p>
 						<p class="text-lg">{group.length}</p>
-					</div>
+					</A>
 				)}
 			</For>
 		</div>

frontend/src/gallery/index.tsx

@@ -0,0 +1,50 @@
+import { Component, For, Show } from "solid-js";
+import { useParams } from "@solidjs/router";
+import { union, literal, safeParse, InferOutput, parse } from "valibot";
+import { useSearchImageContext } from "../contexts/SearchImageContext";
+import { SearchCard } from "../components/search-card/SearchCard";
+
+const entityValidator = union([
+	literal("event"),
+	literal("note"),
+	literal("location"),
+	literal("contact"),
+]);
+
+const EntityGallery: Component<{
+	entity: InferOutput<typeof entityValidator>;
+}> = (props) => {
+	// Just to be doubly sure.
+	parse(entityValidator, props.entity);
+
+	// These names are being silly. Entity or Category?
+	const { images } = useSearchImageContext();
+
+	const filteredCategories = () =>
+		images().filter((i) => i.type === props.entity);
+
+	return (
+		<div class="flex flex-col gap-4 capitalize">
+			<h2>{props.entity}s</h2>
+			<div class="grid grid-cols-3">
+				<For each={filteredCategories()}>
+					{(category) => <SearchCard item={category} />}
+				</For>
+			</div>
+		</div>
+	);
+};
+
+export const Gallery: Component = () => {
+	const params = useParams();
+	const validated = safeParse(entityValidator, params.entity);
+
+	return (
+		<Show
+			when={validated.success}
+			fallback={<p>Sorry, this entity is not supported</p>}
+		>
+			<EntityGallery entity={validated.output as any} />
+		</Show>
+	);
+};