merging

.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

biome.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+    "organizeImports": {
+        "enabled": true
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true
+        }
+    },
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 4
+    }
+}

frontend/biome.json

@@ -1,12 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
-	"organizeImports": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true
-		}
-	}
-}

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>
                     )}
@@ -77,7 +86,10 @@ function App() {
                             class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
                             loadingComponent={
                                 <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
-                                    <IconRefresh size={20} class="m-auto animate-spin" />
+                                    <IconRefresh
+                                        size={20}
+                                        class="m-auto animate-spin"
+                                    />
                                 </Search.Icon>
                             }
                         >
@@ -87,26 +99,23 @@ function App() {
                         </Search.Indicator>
                         <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
                     </Search.Control>
-                    <Search.Portal>
-                        <Search.Content
-                            class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
-                            onCloseAutoFocus={(e) => e.preventDefault()}
-                        >
-                            <Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-col justify-start gap-1.5 leading-none focus:outline-none" />
-                            <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
-                                😬 No emoji found
-                            </Search.NoResult>
-                        </Search.Content>
-                    </Search.Portal>
                 </Search>
             </div>
             {/* <div class="mt-4 text-base leading-none">
         Emoji selected: {emoji()?.emoji} {emoji()?.name}
       </div> */}
-            <ImageViewer />
+            {/* <ImageViewer /> */}
             <div class="px-4 mt-4 bg-white rounded-t-2xl">
-                <div class="h-[254px] overflow-scroll scrollbar-hide">
+                <Search.Content
-                    <div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
+                    class="h-[254px] overflow-scroll scrollbar-hide"
+                    onCloseAutoFocus={(e) => e.preventDefault()}
+                >
+                    <Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
+                    <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
+                        No results found
+                    </Search.NoResult>
+                </Search.Content>
+
                 <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" />
@@ -114,13 +123,18 @@ function App() {
                 <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" />
-                        <For each={images()}>
+                {/* {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>
+                        </For> */}
-                    </div>
-                </div>
             </div>
             <div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
                 footer

frontend/src/ImagePage.tsx

@@ -1,14 +1,14 @@
-import { A, useParams } from "@solidjs/router"
+import { A, useParams } from "@solidjs/router";
-import { createEffect, createResource, For, Suspense } from "solid-js"
+import { createEffect, createResource, For, Suspense } from "solid-js";
-import { getUserImages } from "./network"
+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) => (
+                    {(tag) => <div>{tag.Tag}</div>}
-                    <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,7 @@
 import {
-	array,
+    type InferOutput,
-	InferOutput,
     null as Null,
+    array,
     nullable,
     object,
     parse,

frontend/src/network/sample-data.ts

@@ -0,0 +1,88 @@
+import type { DataArray } from "./types";
+
+export const sampleData: DataArray = [
+    {
+        type: "Event",
+        data: {
+            title: "Startup Mixer",
+            dateTime: {
+                start: "2025-06-01T19:00:00+01:00",
+                end: "2025-06-01T23:00:00+01:00",
+            },
+            location: "The Kings Arms, 27 Ropemaker St, London EC2Y 9LY",
+            description:
+                "Casual networking event for tech entrepreneurs and investors in London.",
+            organizer: {
+                name: "London Startup Network",
+                email: "events@londonstartupnetwork.co.uk",
+            },
+            attendees: ["Alex Smith", "Sofia Rodriguez"],
+            category: "Networking",
+        },
+    },
+    {
+        type: "Contact",
+        data: {
+            name: "João Silva",
+            phoneNumber: "+351 912 345 678",
+            emailAddress: "joao.silva@example.pt",
+            address: "Rua do Carmo 12, 1200-161 Lisboa, Portugal",
+            organization: "PortoTech Solutions",
+            title: "Marketing Manager",
+            notes: "Met at Web Summit Lisbon 2024",
+        },
+    },
+    {
+        type: "Location",
+        data: {
+            name: "Barman Dictat",
+            address: "14 Khreshchatyk St., Kyiv, Ukraine",
+            category: "Bar",
+            description:
+                "Stylish cocktail bar in the heart of Kyiv with an extensive menu of craft cocktails and a sophisticated atmosphere",
+        },
+    },
+    {
+        type: "Note",
+        data: {
+            title: "Q2 2025 Marketing Strategy",
+            keywords: ["strategy", "digital marketing", "Q2", "2025"],
+            content:
+                "## Executive Summary\n\nOur Q2 2025 marketing strategy focuses on expanding our digital presence and increasing customer engagement across all platforms. We will leverage AI-driven personalization to enhance user experience and implement a multi-channel approach to reach our target demographics more effectively.\n\n### Key Objectives\n\n1. Increase website traffic by 30% through SEO optimization and content marketing.\n2. Boost social media engagement rates by 25% using interactive campaigns and influencer partnerships.\n3. Implement a new customer loyalty program to improve retention rates by 15%.\n\nBy aligning our marketing efforts with emerging trends and customer preferences, we aim to solidify our market position and drive sustainable growth throughout Q2 and beyond.",
+        },
+    },
+    {
+        type: "Website",
+        data: {
+            url: "https://www.attio.com",
+            title: "Attio",
+            description:
+                "Attio is the AI-native CRM that builds, scales and grows your company to the next level.",
+            category: "SaaS",
+        },
+    },
+    {
+        type: "Receipt",
+        data: {
+            receiptDate: "2025-03-12T20:15:30+01:00",
+            orderNumber: "ORD12345",
+            amount: 49.99,
+            currency: "GBP",
+            vendor: "Zara Online Store",
+            items: [
+                {
+                    name: "Slim Fit Dress Shirt",
+                    quantity: 1,
+                    price: 49.99,
+                    currency: "GBP",
+                },
+            ],
+            paymentMethod: "Visa",
+            shippingAddress: {
+                name: "Alex Smith",
+                address: "123 High St, London, EC2A 3AZ",
+            },
+            category: "Online Shopping",
+        },
+    },
+];

frontend/src/network/types.ts

@@ -0,0 +1,103 @@
+interface DateTime {
+    start: string;
+    end: string;
+}
+
+interface Address {
+    name: string;
+    address: string;
+}
+
+interface Organizer {
+    name: string;
+    email: string;
+}
+
+interface ReceiptItem {
+    name: string;
+    quantity: number;
+    price: number;
+    currency: string;
+}
+
+interface DataItemType<T extends string, D> {
+    type: T;
+    data: D;
+}
+
+interface EventData {
+    title: string;
+    dateTime: DateTime;
+    location: string;
+    description: string;
+    organizer: Organizer;
+    attendees: string[];
+    category: string;
+}
+
+interface ContactData {
+    name: string;
+    phoneNumber: string;
+    emailAddress: string;
+    address: string;
+    organization: string;
+    title: string;
+    notes: string;
+}
+
+interface LocationData {
+    name: string;
+    address: string;
+    category: string;
+    description: string;
+}
+
+interface NoteData {
+    title: string;
+    keywords: string[];
+    content: string;
+}
+
+interface WebsiteData {
+    url: string;
+    title: string;
+    description: string;
+    category: string;
+}
+
+interface ReceiptData {
+    receiptDate: string;
+    orderNumber: string;
+    amount: number;
+    currency: string;
+    vendor: string;
+    items: ReceiptItem[];
+    paymentMethod: string;
+    shippingAddress: Address;
+    category: string;
+}
+
+type Event = DataItemType<"Event", EventData>;
+type Contact = DataItemType<"Contact", ContactData>;
+type Location = DataItemType<"Location", LocationData>;
+type Note = DataItemType<"Note", NoteData>;
+type Website = DataItemType<"Website", WebsiteData>;
+type Receipt = DataItemType<"Receipt", ReceiptData>;
+
+type DataItem = Event | Contact | Location | Note | Website | Receipt;
+type DataArray = DataItem[];
+
+export type {
+    DateTime,
+    Address,
+    Organizer,
+    ReceiptItem,
+    Event,
+    Contact,
+    Location,
+    Note,
+    Website,
+    Receipt,
+    DataItem,
+    DataArray,
+};