feat: recent displayed on front page

frontend/src/Image.tsx

@@ -1,9 +1,8 @@
-import { A, useParams } from "@solidjs/router";
+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";
-import { IconArrowLeft } from "@tabler/icons-solidjs";
 
 export const Image: Component = () => {
 	const { imageId } = useParams<{ imageId: string }>();
@@ -15,11 +14,6 @@ export const Image: Component = () => {
 
 	return (
 		<main class="flex flex-col items-center">
-			<nav class="self-start">
-				<A href="/">
-					<IconArrowLeft />
-				</A>
-			</nav>
 			<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
 			<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
 				<Show when={imageProperties()}>

frontend/src/Recent.tsx

@@ -0,0 +1,22 @@
+import { Component, For } from "solid-js";
+import { useSearchImageContext } from "./contexts/SearchImageContext";
+import { Image } from "./components/image";
+
+export const Recent: Component = () => {
+	const { userImages } = useSearchImageContext();
+
+	const latestImages = () =>
+		userImages()
+			.sort(
+				(a, b) =>
+					new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
+			)
+			.slice(0, 10);
+
+	return (
+		<div>
+			<h2>Recent</h2>
+			<For each={latestImages()}>{(image) => <Image ID={image.ImageID} />}</For>
+		</div>
+	);
+};

frontend/src/Search.tsx

@@ -19,6 +19,7 @@ import { A } from "@solidjs/router";
 import { useSetEntity } from "./WithEntityDialog";
 import { ProcessingImages } from "./notifications/ProcessingImages";
 import { Categories } from "./front";
+import { Recent } from "./Recent";
 
 export const Search = () => {
 	const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
@@ -103,6 +104,8 @@ export const Search = () => {
 
 				<Categories />
 
+				<Recent />
+
 				<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">

frontend/src/components/image/index.tsx

@@ -1,6 +1,11 @@
 import { Component } from "solid-js";
 import { base } from "../../network";
+import { A } from "@solidjs/router";
 
 export const Image: Component<{ ID: string }> = (props) => {
-	return <img src={`${base}/image/${props.ID}`} />;
+	return (
+		<A href={`/image/${props.ID}`}>
+			<img src={`${base}/image/${props.ID}`} />
+		</A>
+	);
 };

frontend/src/contexts/SearchImageContext.tsx

@@ -7,7 +7,11 @@ import {
 	createResource,
 	useContext,
 } from "solid-js";
-import { CategoryUnion, getUserImages } from "../network";
+import {
+	CategoryUnion,
+	getUserImages,
+	JustTheImageWhatAreTheseNames,
+} from "../network";
 import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";
 
 export type ImageWithRawData = Awaited<
@@ -28,6 +32,8 @@ type CategoriesSpecificData = {
 export type SearchImageStore = {
 	images: Accessor<ImageWithRawData[]>;
 
+	userImages: Accessor<JustTheImageWhatAreTheseNames>;
+
 	imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
 	processingImages: Accessor<
 		Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined
@@ -122,6 +128,7 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
 			value={{
 				images: imageData,
 				imagesWithProperties: imagesWithProperties,
+				userImages: () => data()?.UserImages ?? [],
 				processingImages,
 				onRefetchImages: refetch,
 				categories,

frontend/src/network/index.ts

@@ -192,6 +192,10 @@ const imageRequestValidator = strictObject({
 	ProcessingImages: array(userProcessingImageValidator),
 });
 
+export type JustTheImageWhatAreTheseNames = InferOutput<
+	typeof userImageValidator
+>[];
+
 export const getUserImages = async (): Promise<
 	InferOutput<typeof imageRequestValidator>
 > => {