wip

.vscode/settings.json

@@ -1,13 +1,10 @@
 {
 	"biome.enabled": true,
 	"editor.defaultFormatter": "biomejs.biome",
-	"[typescript]": {
-		"editor.defaultFormatter": "biomejs.biome"
-	},
-	"[typescriptreact]": {
-		"editor.defaultFormatter": "biomejs.biome"
-	},
 	"editor.formatOnSave": true,
+	"editor.codeActionsOnSave": {
+		"source.organizeImports.biome": "explicit"
+	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
 	},

backend/docker-compose.yml

@@ -21,6 +21,8 @@ services:
     env_file: .env.docker
     ports:
       - 3040:3040
+    volumes:
+      - ./.env.docker:/app/.env
     depends_on:
       database:
         condition: service_healthy

frontend/biome.json

@@ -8,5 +8,10 @@
 		"rules": {
 			"recommended": true
 		}
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 4
 	}
 }

frontend/src/App.tsx

@@ -1,41 +1,50 @@
-import { createEffect, createResource, createSignal, For } from "solid-js";
 import { Search } from "@kobalte/core/search";
-import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
+import { A, useNavigate } from "@solidjs/router";
+import { IconRefresh, IconSearch } from "@tabler/icons-solidjs";
+import { image } from "@tauri-apps/api";
 import clsx from "clsx";
+import Fuse from "fuse.js";
+import { For, createEffect, createResource, createSignal } from "solid-js";
 import { ImageViewer } from "./components/ImageViewer";
 import { getUserImages } from "./network";
-import { image } from "@tauri-apps/api";
-import { A, useNavigate } from "@solidjs/router";
-import Fuse from "fuse.js";
 
 type UserImages = Awaited<ReturnType<typeof getUserImages>>;
 
 function App() {
-    const [searchResults, setSearchResults] = createSignal<UserImages[number]['Text']>([]);
+	const [searchResults, setSearchResults] = createSignal<
+		UserImages[number]["Text"]
+	>([]);
 
 	const [images] = createResource(getUserImages);
 
 	const nav = useNavigate();
 
-    let fuze = new Fuse<NonNullable<UserImages[number]['Text']>[number]>([], { keys: ["Text.ImageText"] });
+	let fuze = new Fuse<NonNullable<UserImages[number]["Text"]>[number]>([], {
+		keys: ["Text.ImageText"],
+	});
 
 	// TODO: there's probably a better way?
 	createEffect(() => {
 		const userImages = images();
+
+		console.log(userImages);
 		if (userImages == null) {
 			return;
 		}
 
-        const imageText = userImages.flatMap(i => i.Text ?? []);
+		const imageText = userImages.flatMap((i) => i.Text ?? []);
 
-        fuze = new Fuse(imageText, { keys: ["ImageText"], threshold: 0.3 });
+		fuze = new Fuse(imageText, {
+			keys: ["ImageText"],
+			threshold: 0.3,
+		});
 	});
 
 	const onInputChange = (query: string) => {
 		// TODO: we can migrate this searching to Rust, so we don't abuse the main thread.
 		// But, it's not too bad as is.
-        setSearchResults(fuze.search(query).flatMap(s => s.item));
-    }
+		setSearchResults(fuze.search(query).flatMap((s) => s.item));
+	};
 
 	return (
 		<main class="container pt-2">
@@ -64,7 +73,7 @@ function App() {
 							)}
 						>
 							<Search.ItemLabel class="mx-[-100px]">
-                                {props.item.rawValue.ImageText ?? ''}
+								{props.item.rawValue.ImageText ?? ""}
 							</Search.ItemLabel>
 						</Search.Item>
 					)}
@@ -107,16 +116,23 @@ function App() {
 			<div class="px-4 mt-4 bg-white rounded-t-2xl">
 				<div class="h-[254px] overflow-scroll scrollbar-hide">
 					<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
-                        <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
+						{/* <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
 						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
 						<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
 						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
 						<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
 						<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
-                        <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
+						<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" /> */}
+						{/* {JSON.stringify(images())} */}
 						<For each={images()}>
 							{(image) => (
-                                <A href={`/image/${image.ID}`}><img src={`http://localhost:3040/image/${image.ID}`} class="col-span-3 row-span-3 rounded-xl" /></A>
+								<A href={`/image/${image.ID}`}>
+									<img
+										src={`http://localhost:3040/image/${image.ID}`}
+										class="col-span-3 row-span-3 rounded-xl"
+										alt=""
+									/>
+								</A>
 							)}
 						</For>
 					</div>

frontend/src/ImagePage.tsx

@@ -1,14 +1,14 @@
-import { A, useParams } from "@solidjs/router"
-import { createEffect, createResource, For, Suspense } from "solid-js"
-import { getUserImages } from "./network"
+import { A, useParams } from "@solidjs/router";
+import { createEffect, createResource, For, Suspense } from "solid-js";
+import { getUserImages } from "./network";
 
 export function ImagePage() {
-    const { imageId } = useParams<{ imageId: string }>()
+    const { imageId } = useParams<{ imageId: string }>();
 
     const [image] = createResource(async () => {
         const userImages = await getUserImages();
 
-        const currentImage = userImages.find(image => image.ID === imageId);
+        const currentImage = userImages.find((image) => image.ID === imageId);
         if (currentImage == null) {
             // TODO: this error handling.
             throw new Error("must be valid");
@@ -19,18 +19,18 @@ export function ImagePage() {
 
     createEffect(() => {
         console.log(image());
-    })
+    });
 
-    return (<Suspense fallback={<>Loading...</>}>
+    return (
+        <Suspense fallback={<>Loading...</>}>
             <A href="/">Back</A>
             <h1 class="text-2xl font-bold">{image()?.Image.ImageName}</h1>
             <img src={`http://localhost:3040/image/${image()?.ID}`} />
             <div class="flex flex-col">
                 <For each={image()?.Tags ?? []}>
-                {(tag) => (
-                    <div>{tag.Tag}</div>
-                )}
+                    {(tag) => <div>{tag.Tag}</div>}
                 </For>
             </div>
-    </Suspense>)
+        </Suspense>
+    );
 }

frontend/src/index.tsx

@@ -5,9 +5,12 @@ import "./index.css";
 import { Route, Router } from "@solidjs/router";
 import { ImagePage } from "./ImagePage";
 
-render(() => (
+render(
+    () => (
         <Router>
             <Route path="/" component={App} />
             <Route path="/image/:imageId" component={ImagePage} />
         </Router>
-), document.getElementById("root") as HTMLElement);
+    ),
+    document.getElementById("root") as HTMLElement,
+);

frontend/src/network/index.ts

@@ -1,7 +1,8 @@
 import {
-    array,
-    InferOutput,
+	type InferOutput,
 	null as Null,
+	any,
+	array,
 	nullable,
 	object,
 	parse,
@@ -55,24 +56,8 @@ const getUserImagesResponseValidator = array(
 			ImageName: string(),
 			Image: Null(),
 		}),
-        Tags: nullable(
-            array(
-                object({
-                    ID: pipe(string(), uuid()),
-                    Tag: string(),
-                    ImageID: pipe(string(), uuid()),
-                }),
-            ),
-        ),
-        Links: nullable(
-            array(
-                object({
-                    ID: pipe(string(), uuid()),
-                    Links: string(),
-                    ImageID: pipe(string(), uuid()),
-                }),
-            ),
-        ),
+		Tags: any(),
+		Links: any(),
 		Text: nullable(
 			array(
 				object({