merging
This commit is contained in:
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -1,13 +1,10 @@
|
|||||||
{
|
{
|
||||||
"biome.enabled": true,
|
"biome.enabled": true,
|
||||||
"editor.defaultFormatter": "biomejs.biome",
|
"editor.defaultFormatter": "biomejs.biome",
|
||||||
"[typescript]": {
|
|
||||||
"editor.defaultFormatter": "biomejs.biome"
|
|
||||||
},
|
|
||||||
"[typescriptreact]": {
|
|
||||||
"editor.defaultFormatter": "biomejs.biome"
|
|
||||||
},
|
|
||||||
"editor.formatOnSave": true,
|
"editor.formatOnSave": true,
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.organizeImports.biome": "explicit"
|
||||||
|
},
|
||||||
"[rust]": {
|
"[rust]": {
|
||||||
"editor.defaultFormatter": "rust-lang.rust-analyzer"
|
"editor.defaultFormatter": "rust-lang.rust-analyzer"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -21,6 +21,8 @@ services:
|
|||||||
env_file: .env.docker
|
env_file: .env.docker
|
||||||
ports:
|
ports:
|
||||||
- 3040:3040
|
- 3040:3040
|
||||||
|
volumes:
|
||||||
|
- ./.env.docker:/app/.env
|
||||||
depends_on:
|
depends_on:
|
||||||
database:
|
database:
|
||||||
condition: service_healthy
|
condition: service_healthy
|
||||||
|
|||||||
17
biome.json
Normal file
17
biome.json
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
|
|
||||||
"organizeImports": {
|
|
||||||
"enabled": true
|
|
||||||
},
|
|
||||||
"linter": {
|
|
||||||
"enabled": true,
|
|
||||||
"rules": {
|
|
||||||
"recommended": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,41 +1,41 @@
|
|||||||
{
|
{
|
||||||
"name": "haystack",
|
"name": "haystack",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"serve": "vite preview",
|
"serve": "vite preview",
|
||||||
"tauri": "tauri",
|
"tauri": "tauri",
|
||||||
"lint": "bunx @biomejs/biome lint .",
|
"lint": "bunx @biomejs/biome lint .",
|
||||||
"format": "bunx @biomejs/biome format . --write"
|
"format": "bunx @biomejs/biome format . --write"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kobalte/core": "^0.13.9",
|
"@kobalte/core": "^0.13.9",
|
||||||
"@kobalte/tailwindcss": "^0.9.0",
|
"@kobalte/tailwindcss": "^0.9.0",
|
||||||
"@solidjs/router": "^0.15.3",
|
"@solidjs/router": "^0.15.3",
|
||||||
"@tabler/icons-solidjs": "^3.30.0",
|
"@tabler/icons-solidjs": "^3.30.0",
|
||||||
"@tauri-apps/api": "^2",
|
"@tauri-apps/api": "^2",
|
||||||
"@tauri-apps/plugin-dialog": "~2",
|
"@tauri-apps/plugin-dialog": "~2",
|
||||||
"@tauri-apps/plugin-opener": "^2",
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"fuse.js": "^7.1.0",
|
"fuse.js": "^7.1.0",
|
||||||
"solid-js": "^1.9.3",
|
"solid-js": "^1.9.3",
|
||||||
"tailwind-scrollbar-hide": "^2.0.0",
|
"tailwind-scrollbar-hide": "^2.0.0",
|
||||||
"valibot": "^1.0.0-rc.2"
|
"valibot": "^1.0.0-rc.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@biomejs/biome": "^1.9.4",
|
"@biomejs/biome": "^1.9.4",
|
||||||
"@tauri-apps/cli": "^2",
|
"@tauri-apps/cli": "^2",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"postcss-cli": "^11.0.0",
|
"postcss-cli": "^11.0.0",
|
||||||
"tailwindcss": "3.4.0",
|
"tailwindcss": "3.4.0",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
"vite": "^6.0.3",
|
"vite": "^6.0.3",
|
||||||
"vite-plugin-solid": "^2.11.0"
|
"vite-plugin-solid": "^2.11.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
export default {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"$schema": "../gen/schemas/desktop-schema.json",
|
"$schema": "../gen/schemas/desktop-schema.json",
|
||||||
"identifier": "default",
|
"identifier": "default",
|
||||||
"description": "Capability for the main window",
|
"description": "Capability for the main window",
|
||||||
"windows": ["main"],
|
"windows": ["main"],
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"core:default",
|
"core:default",
|
||||||
"opener:default",
|
"opener:default",
|
||||||
"dialog:default",
|
"dialog:default",
|
||||||
"core:window:allow-start-dragging"
|
"core:window:allow-start-dragging"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,30 +1,30 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://schema.tauri.app/config/2",
|
"$schema": "https://schema.tauri.app/config/2",
|
||||||
"productName": "haystack",
|
"productName": "haystack",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"identifier": "com.haystack.app",
|
"identifier": "com.haystack.app",
|
||||||
"build": {
|
"build": {
|
||||||
"beforeDevCommand": "bun run dev",
|
"beforeDevCommand": "bun run dev",
|
||||||
"devUrl": "http://localhost:1420",
|
"devUrl": "http://localhost:1420",
|
||||||
"beforeBuildCommand": "bun run build",
|
"beforeBuildCommand": "bun run build",
|
||||||
"frontendDist": "../dist"
|
"frontendDist": "../dist"
|
||||||
},
|
},
|
||||||
"app": {
|
"app": {
|
||||||
"windows": [],
|
"windows": [],
|
||||||
"macOSPrivateApi": true,
|
"macOSPrivateApi": true,
|
||||||
"security": {
|
"security": {
|
||||||
"csp": null
|
"csp": null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"bundle": {
|
"bundle": {
|
||||||
"active": true,
|
"active": true,
|
||||||
"targets": "all",
|
"targets": "all",
|
||||||
"icon": [
|
"icon": [
|
||||||
"icons/32x32.png",
|
"icons/32x32.png",
|
||||||
"icons/128x128.png",
|
"icons/128x128.png",
|
||||||
"icons/128x128@2x.png",
|
"icons/128x128@2x.png",
|
||||||
"icons/icon.icns",
|
"icons/icon.icns",
|
||||||
"icons/icon.ico"
|
"icons/icon.ico"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,41 +1,50 @@
|
|||||||
import { createEffect, createResource, createSignal, For } from "solid-js";
|
|
||||||
import { Search } from "@kobalte/core/search";
|
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 clsx from "clsx";
|
||||||
|
import Fuse from "fuse.js";
|
||||||
|
import { For, createEffect, createResource, createSignal } from "solid-js";
|
||||||
import { ImageViewer } from "./components/ImageViewer";
|
import { ImageViewer } from "./components/ImageViewer";
|
||||||
import { getUserImages } from "./network";
|
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>>;
|
type UserImages = Awaited<ReturnType<typeof getUserImages>>;
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [searchResults, setSearchResults] = createSignal<UserImages[number]['Text']>([]);
|
const [searchResults, setSearchResults] = createSignal<
|
||||||
|
UserImages[number]["Text"]
|
||||||
|
>([]);
|
||||||
|
|
||||||
const [images] = createResource(getUserImages);
|
const [images] = createResource(getUserImages);
|
||||||
|
|
||||||
const nav = useNavigate();
|
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?
|
// TODO: there's probably a better way?
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
const userImages = images();
|
const userImages = images();
|
||||||
|
|
||||||
|
console.log(userImages);
|
||||||
if (userImages == null) {
|
if (userImages == null) {
|
||||||
return;
|
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) => {
|
const onInputChange = (query: string) => {
|
||||||
// TODO: we can migrate this searching to Rust, so we don't abuse the main thread.
|
// TODO: we can migrate this searching to Rust, so we don't abuse the main thread.
|
||||||
// But, it's not too bad as is.
|
// 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 (
|
return (
|
||||||
<main class="container pt-2">
|
<main class="container pt-2">
|
||||||
@ -64,7 +73,7 @@ function App() {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Search.ItemLabel class="mx-[-100px]">
|
<Search.ItemLabel class="mx-[-100px]">
|
||||||
{props.item.rawValue.ImageText ?? ''}
|
{props.item.rawValue.ImageText ?? ""}
|
||||||
</Search.ItemLabel>
|
</Search.ItemLabel>
|
||||||
</Search.Item>
|
</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"
|
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={
|
loadingComponent={
|
||||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
<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>
|
</Search.Icon>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -87,40 +99,42 @@ function App() {
|
|||||||
</Search.Indicator>
|
</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.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.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>
|
</Search>
|
||||||
</div>
|
</div>
|
||||||
{/* <div class="mt-4 text-base leading-none">
|
{/* <div class="mt-4 text-base leading-none">
|
||||||
Emoji selected: {emoji()?.emoji} {emoji()?.name}
|
Emoji selected: {emoji()?.emoji} {emoji()?.name}
|
||||||
</div> */}
|
</div> */}
|
||||||
<ImageViewer />
|
{/* <ImageViewer /> */}
|
||||||
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
<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"
|
||||||
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
|
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||||
<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" />
|
<Search.Listbox 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-green-200 rounded-xl" />
|
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
|
||||||
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
|
No results found
|
||||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
</Search.NoResult>
|
||||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
</Search.Content>
|
||||||
<For each={images()}>
|
|
||||||
|
<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" />
|
||||||
|
{/* {JSON.stringify(images())} */}
|
||||||
|
{/* <For each={images()}>
|
||||||
{(image) => (
|
{(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>
|
||||||
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
||||||
footer
|
footer
|
||||||
|
|||||||
@ -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() {
|
export function ImagePage() {
|
||||||
const { imageId } = useParams<{ imageId: string }>()
|
const { imageId } = useParams<{ imageId: string }>();
|
||||||
|
|
||||||
const [image] = createResource(async () => {
|
const [image] = createResource(async () => {
|
||||||
const userImages = await getUserImages();
|
const userImages = await getUserImages();
|
||||||
|
|
||||||
const currentImage = userImages.find(image => image.ID === imageId);
|
const currentImage = userImages.find((image) => image.ID === imageId);
|
||||||
if (currentImage == null) {
|
if (currentImage == null) {
|
||||||
// TODO: this error handling.
|
// TODO: this error handling.
|
||||||
throw new Error("must be valid");
|
throw new Error("must be valid");
|
||||||
@ -19,18 +19,18 @@ export function ImagePage() {
|
|||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
console.log(image());
|
console.log(image());
|
||||||
})
|
});
|
||||||
|
|
||||||
return (<Suspense fallback={<>Loading...</>}>
|
return (
|
||||||
<A href="/">Back</A>
|
<Suspense fallback={<>Loading...</>}>
|
||||||
<h1 class="text-2xl font-bold">{image()?.Image.ImageName}</h1>
|
<A href="/">Back</A>
|
||||||
<img src={`http://localhost:3040/image/${image()?.ID}`} />
|
<h1 class="text-2xl font-bold">{image()?.Image.ImageName}</h1>
|
||||||
<div class="flex flex-col">
|
<img src={`http://localhost:3040/image/${image()?.ID}`} />
|
||||||
<For each={image()?.Tags ?? []}>
|
<div class="flex flex-col">
|
||||||
{(tag) => (
|
<For each={image()?.Tags ?? []}>
|
||||||
<div>{tag.Tag}</div>
|
{(tag) => <div>{tag.Tag}</div>}
|
||||||
)}
|
</For>
|
||||||
</For>
|
</div>
|
||||||
</div>
|
</Suspense>
|
||||||
</Suspense>)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,47 +3,47 @@ import { open } from "@tauri-apps/plugin-dialog";
|
|||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
|
||||||
export function FolderPicker() {
|
export function FolderPicker() {
|
||||||
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
||||||
const [status, setStatus] = createSignal<string>("");
|
const [status, setStatus] = createSignal<string>("");
|
||||||
|
|
||||||
const handleFolderSelect = async () => {
|
const handleFolderSelect = async () => {
|
||||||
try {
|
try {
|
||||||
const selected = await open({
|
const selected = await open({
|
||||||
directory: true,
|
directory: true,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
setSelectedPath(selected as string);
|
setSelectedPath(selected as string);
|
||||||
// Send the path to Rust
|
// Send the path to Rust
|
||||||
const response = await invoke("handle_selected_folder", {
|
const response = await invoke("handle_selected_folder", {
|
||||||
path: selected,
|
path: selected,
|
||||||
});
|
});
|
||||||
setStatus(`Folder processed: ${response}`);
|
setStatus(`Folder processed: ${response}`);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setStatus(`Error: ${error}`);
|
setStatus(`Error: ${error}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="flex flex-col items-center gap-4">
|
<div class="flex flex-col items-center gap-4">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleFolderSelect}
|
onClick={handleFolderSelect}
|
||||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||||
>
|
>
|
||||||
Select Folder
|
Select Folder
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{selectedPath() && (
|
{selectedPath() && (
|
||||||
<div class="text-left max-w-md">
|
<div class="text-left max-w-md">
|
||||||
<p class="font-semibold">Selected folder:</p>
|
<p class="font-semibold">Selected folder:</p>
|
||||||
<p class="text-sm break-all">{selectedPath()}</p>
|
<p class="text-sm break-all">{selectedPath()}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,21 +3,21 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Manrope";
|
font-family: "Manrope";
|
||||||
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
||||||
font-weight: 100 900;
|
font-weight: 100 900;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@apply bg-neutral-100 text-black rounded-xl;
|
@apply bg-neutral-100 text-black rounded-xl;
|
||||||
font-family: Manrope, sans-serif;
|
font-family: Manrope, sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-synthesis: none;
|
font-synthesis: none;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,9 +5,12 @@ import "./index.css";
|
|||||||
import { Route, Router } from "@solidjs/router";
|
import { Route, Router } from "@solidjs/router";
|
||||||
import { ImagePage } from "./ImagePage";
|
import { ImagePage } from "./ImagePage";
|
||||||
|
|
||||||
render(() => (
|
render(
|
||||||
<Router>
|
() => (
|
||||||
<Route path="/" component={App} />
|
<Router>
|
||||||
<Route path="/image/:imageId" component={ImagePage} />
|
<Route path="/" component={App} />
|
||||||
</Router>
|
<Route path="/image/:imageId" component={ImagePage} />
|
||||||
), document.getElementById("root") as HTMLElement);
|
</Router>
|
||||||
|
),
|
||||||
|
document.getElementById("root") as HTMLElement,
|
||||||
|
);
|
||||||
|
|||||||
@ -1,102 +1,102 @@
|
|||||||
import {
|
import {
|
||||||
array,
|
type InferOutput,
|
||||||
InferOutput,
|
null as Null,
|
||||||
null as Null,
|
array,
|
||||||
nullable,
|
nullable,
|
||||||
object,
|
object,
|
||||||
parse,
|
parse,
|
||||||
pipe,
|
pipe,
|
||||||
string,
|
string,
|
||||||
uuid,
|
uuid,
|
||||||
} from "valibot";
|
} from "valibot";
|
||||||
|
|
||||||
type BaseRequestParams = Partial<{
|
type BaseRequestParams = Partial<{
|
||||||
path: string;
|
path: string;
|
||||||
body: RequestInit["body"];
|
body: RequestInit["body"];
|
||||||
method: "GET" | "POST";
|
method: "GET" | "POST";
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
|
const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
|
||||||
return new Request(`http://localhost:3040/${path}`, {
|
return new Request(`http://localhost:3040/${path}`, {
|
||||||
headers: { userId: "fcc22dbb-7792-4595-be8e-d0439e13990a" },
|
headers: { userId: "fcc22dbb-7792-4595-be8e-d0439e13990a" },
|
||||||
body,
|
body,
|
||||||
method,
|
method,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const sendImageResponseValidator = object({
|
const sendImageResponseValidator = object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
ImageID: pipe(string(), uuid()),
|
ImageID: pipe(string(), uuid()),
|
||||||
UserID: pipe(string(), uuid()),
|
UserID: pipe(string(), uuid()),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const sendImage = async (
|
export const sendImage = async (
|
||||||
imageName: string,
|
imageName: string,
|
||||||
base64Image: string,
|
base64Image: string,
|
||||||
): Promise<InferOutput<typeof sendImageResponseValidator>> => {
|
): Promise<InferOutput<typeof sendImageResponseValidator>> => {
|
||||||
const request = getBaseRequest({
|
const request = getBaseRequest({
|
||||||
path: `image/${imageName}`,
|
path: `image/${imageName}`,
|
||||||
body: base64Image,
|
body: base64Image,
|
||||||
method: "POST",
|
method: "POST",
|
||||||
});
|
});
|
||||||
|
|
||||||
request.headers.set("Content-Type", "application/base64");
|
request.headers.set("Content-Type", "application/base64");
|
||||||
|
|
||||||
const res = await fetch(request).then((res) => res.json());
|
const res = await fetch(request).then((res) => res.json());
|
||||||
|
|
||||||
return parse(sendImageResponseValidator, res);
|
return parse(sendImageResponseValidator, res);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getUserImagesResponseValidator = array(
|
const getUserImagesResponseValidator = array(
|
||||||
object({
|
object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
Image: object({
|
Image: object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
ImageName: string(),
|
ImageName: string(),
|
||||||
Image: Null(),
|
Image: Null(),
|
||||||
}),
|
}),
|
||||||
Tags: nullable(
|
Tags: nullable(
|
||||||
array(
|
array(
|
||||||
object({
|
object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
TagID: pipe(string(), uuid()),
|
TagID: pipe(string(), uuid()),
|
||||||
ImageID: pipe(string(), uuid()),
|
ImageID: pipe(string(), uuid()),
|
||||||
|
|
||||||
Tag: object({
|
Tag: object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
Tag: string(),
|
Tag: string(),
|
||||||
UserID: pipe(string(), uuid()),
|
UserID: pipe(string(), uuid()),
|
||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Links: nullable(
|
Links: nullable(
|
||||||
array(
|
array(
|
||||||
object({
|
object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
Links: string(),
|
Links: string(),
|
||||||
ImageID: pipe(string(), uuid()),
|
ImageID: pipe(string(), uuid()),
|
||||||
}),
|
}),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Text: nullable(
|
Text: nullable(
|
||||||
array(
|
array(
|
||||||
object({
|
object({
|
||||||
ID: pipe(string(), uuid()),
|
ID: pipe(string(), uuid()),
|
||||||
ImageText: string(),
|
ImageText: string(),
|
||||||
ImageID: pipe(string(), uuid()),
|
ImageID: pipe(string(), uuid()),
|
||||||
}),
|
}),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
export const getUserImages = async (): Promise<
|
export const getUserImages = async (): Promise<
|
||||||
InferOutput<typeof getUserImagesResponseValidator>
|
InferOutput<typeof getUserImagesResponseValidator>
|
||||||
> => {
|
> => {
|
||||||
const request = getBaseRequest({ path: "image" });
|
const request = getBaseRequest({ path: "image" });
|
||||||
|
|
||||||
const res = await fetch(request).then((res) => res.json());
|
const res = await fetch(request).then((res) => res.json());
|
||||||
|
|
||||||
return parse(getUserImagesResponseValidator, res);
|
return parse(getUserImagesResponseValidator, res);
|
||||||
};
|
};
|
||||||
|
|||||||
88
frontend/src/network/sample-data.ts
Normal file
88
frontend/src/network/sample-data.ts
Normal 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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
103
frontend/src/network/types.ts
Normal file
103
frontend/src/network/types.ts
Normal 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,
|
||||||
|
};
|
||||||
@ -1,15 +1,15 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ["Manrope", "sans-serif"],
|
sans: ["Manrope", "sans-serif"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@kobalte/tailwindcss"),
|
require("@kobalte/tailwindcss"),
|
||||||
require("tailwind-scrollbar-hide"),
|
require("tailwind-scrollbar-hide"),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"jsxImportSource": "solid-js",
|
"jsxImportSource": "solid-js",
|
||||||
|
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": ["src"],
|
"include": ["src"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowSyntheticDefaultImports": true
|
"allowSyntheticDefaultImports": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts"]
|
"include": ["vite.config.ts"]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,31 +8,31 @@ const host = process.env.TAURI_DEV_HOST;
|
|||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig(async () => ({
|
export default defineConfig(async () => ({
|
||||||
plugins: [solid()],
|
plugins: [solid()],
|
||||||
css: {
|
css: {
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: [tailwindcss, autoprefixer],
|
plugins: [tailwindcss, autoprefixer],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||||
//
|
//
|
||||||
// 1. prevent vite from obscuring rust errors
|
// 1. prevent vite from obscuring rust errors
|
||||||
clearScreen: false,
|
clearScreen: false,
|
||||||
// 2. tauri expects a fixed port, fail if that port is not available
|
// 2. tauri expects a fixed port, fail if that port is not available
|
||||||
server: {
|
server: {
|
||||||
port: 1420,
|
port: 1420,
|
||||||
strictPort: true,
|
strictPort: true,
|
||||||
host: host || false,
|
host: host || false,
|
||||||
hmr: host
|
hmr: host
|
||||||
? {
|
? {
|
||||||
protocol: "ws",
|
protocol: "ws",
|
||||||
host,
|
host,
|
||||||
port: 1421,
|
port: 1421,
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
watch: {
|
watch: {
|
||||||
// 3. tell vite to ignore watching `src-tauri`
|
// 3. tell vite to ignore watching `src-tauri`
|
||||||
ignored: ["**/src-tauri/**"],
|
ignored: ["**/src-tauri/**"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user