This commit is contained in:
2025-03-19 09:46:52 +00:00
20 changed files with 569 additions and 357 deletions

View File

@ -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"
},

View File

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

17
biome.json Normal file
View File

@ -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
}
}

View File

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

View File

@ -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">
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
<Search.Content
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>
</div>
</div>
</For> */}
</div>
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
footer

View File

@ -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>
);
}

View File

@ -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,
);

View File

@ -1,7 +1,7 @@
import {
array,
InferOutput,
type InferOutput,
null as Null,
array,
nullable,
object,
parse,

View File

@ -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",
},
},
];

View File

@ -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,
};