wip: different UI

fix

frontend/src/Search.tsx

@@ -18,6 +18,7 @@ import { useSearchImageContext } from "./contexts/SearchImageContext";
 import { A } from "@solidjs/router";
 import { useSetEntity } from "./WithEntityDialog";
 import { ProcessingImages } from "./notifications/ProcessingImages";
+import { Categories } from "./front";
 
 export const Search = () => {
 	const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
@@ -98,13 +99,14 @@ export const Search = () => {
 	return (
 		<>
 			<main class="container pt-2">
+				<ProcessingImages />
+
+				<Categories />
+
 				<div class="px-4 flex items-center">
 					<div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
 						<div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
-                            <IconSearch
-                                size={20}
-                                class="m-auto size-5 text-neutral-600"
-                            />
+							<IconSearch size={20} class="m-auto size-5 text-neutral-600" />
 						</div>
 						<input
 							ref={searchInputRef}
@@ -153,9 +155,7 @@ export const Search = () => {
 											}}
 											class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
 										>
-                                            <span class="sr-only">
-                                                {item.data.Name}
-                                            </span>
+											<span class="sr-only">{item.data.Name}</span>
 											<SearchCard item={item} />
 										</div>
 									)}
@@ -165,8 +165,6 @@ export const Search = () => {
 					</div>
 				</div>
 
-                <ProcessingImages />
-
 				<h2 class="text-xl">Images</h2>
 
 				<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
@@ -184,10 +182,7 @@ export const Search = () => {
 
 				<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
 					<p class="text-sm text-neutral-700">
-                        Use{" "}
-                        {shortcut().length > 0
-                            ? shortcut().join("+")
-                            : "shortcut"}{" "}
+						Use {shortcut().length > 0 ? shortcut().join("+") : "shortcut"}{" "}
 						globally to toggle and reload this window
 					</p>
 				</div>

frontend/src/contexts/SearchImageContext.tsx

@@ -7,7 +7,7 @@ import {
 	createResource,
 	useContext,
 } from "solid-js";
-import { getUserImages } from "../network";
+import { CategoryUnion, getUserImages } from "../network";
 import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";
 
 export type ImageWithRawData = Awaited<
@@ -16,7 +16,16 @@ export type ImageWithRawData = Awaited<
 	rawData: string[];
 };
 
-type SearchImageStore = {
+type TaggedCategory<T extends CategoryUnion["type"]> = Extract<
+	CategoryUnion,
+	{ type: T }
+>["data"];
+
+type CategoriesSpecificData = {
+	[K in CategoryUnion["type"]]: Array<TaggedCategory<K>>;
+};
+
+export type SearchImageStore = {
 	images: Accessor<ImageWithRawData[]>;
 
 	imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
@@ -24,6 +33,8 @@ type SearchImageStore = {
 		Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined
 	>;
 
+	categories: Accessor<CategoriesSpecificData>;
+
 	onRefetchImages: () => void;
 };
 
@@ -87,6 +98,25 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
 		return groupPropertiesWithImage(d);
 	});
 
+	const categories = createMemo(() => {
+		const c: ReturnType<SearchImageStore["categories"]> = {
+			contact: [],
+			event: [],
+			location: [],
+			note: [],
+		};
+
+		for (const category of data()?.ImageProperties ?? []) {
+			if (category.type === "location" || category.type === "contact") {
+				continue;
+			}
+
+			c[category.type].push(category.data as any);
+		}
+
+		return c;
+	});
+
 	return (
 		<SearchImageContext.Provider
 			value={{
@@ -94,6 +124,7 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
 				imagesWithProperties: imagesWithProperties,
 				processingImages,
 				onRefetchImages: refetch,
+				categories,
 			}}
 		>
 			{props.children}

frontend/src/front/index.tsx

@@ -0,0 +1,44 @@
+import { Component, createEffect, For } from "solid-js";
+import {
+	SearchImageStore,
+	useSearchImageContext,
+} from "../contexts/SearchImageContext";
+
+const CategoryColor: Record<
+	keyof ReturnType<SearchImageStore["categories"]>,
+	string
+> = {
+	contact: "bg-red-500",
+	location: "bg-green-500",
+	event: "bg-blue-500",
+	note: "bg-purple-500",
+};
+
+export const Categories: Component = () => {
+	const { categories } = useSearchImageContext();
+
+	createEffect(() => {
+		console.log(categories());
+	});
+
+	return (
+		<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-2">
+			<For each={Object.entries(categories())}>
+				{([category, group]) => (
+					<div
+						class={
+							"col-span-2 flex flex-col " +
+							CategoryColor[category as keyof typeof CategoryColor] +
+							" " +
+							(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
+						}
+					>
+						<p class="uppercase">
+							{category}: {group.length}
+						</p>
+					</div>
+				)}
+			</For>
+		</div>
+	);
+};

frontend/src/network/index.ts

@@ -154,6 +154,8 @@ const dataTypeValidator = variant("type", [
 	contactDataType,
 ]);
 
+export type CategoryUnion = InferOutput<typeof dataTypeValidator>;
+
 const userImageValidator = strictObject({
 	ID: pipe(string(), uuid()),
 	CreatedAt: pipe(string()),