wip
This commit is contained in:
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -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"
|
||||
},
|
||||
|
||||
@ -21,6 +21,8 @@ services:
|
||||
env_file: .env.docker
|
||||
ports:
|
||||
- 3040:3040
|
||||
volumes:
|
||||
- ./.env.docker:/app/.env
|
||||
depends_on:
|
||||
database:
|
||||
condition: service_healthy
|
||||
|
||||
@ -8,5 +8,10 @@
|
||||
"rules": {
|
||||
"recommended": true
|
||||
}
|
||||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space",
|
||||
"indentWidth": 4
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
{
|
||||
"name": "haystack",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"tauri": "tauri",
|
||||
"lint": "bunx @biomejs/biome lint .",
|
||||
"format": "bunx @biomejs/biome format . --write"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kobalte/core": "^0.13.9",
|
||||
"@kobalte/tailwindcss": "^0.9.0",
|
||||
"@solidjs/router": "^0.15.3",
|
||||
"@tabler/icons-solidjs": "^3.30.0",
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-dialog": "~2",
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"clsx": "^2.1.1",
|
||||
"fuse.js": "^7.1.0",
|
||||
"solid-js": "^1.9.3",
|
||||
"tailwind-scrollbar-hide": "^2.0.0",
|
||||
"valibot": "^1.0.0-rc.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1.9.4",
|
||||
"@tauri-apps/cli": "^2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"tailwindcss": "3.4.0",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.3",
|
||||
"vite-plugin-solid": "^2.11.0"
|
||||
}
|
||||
"name": "haystack",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview",
|
||||
"tauri": "tauri",
|
||||
"lint": "bunx @biomejs/biome lint .",
|
||||
"format": "bunx @biomejs/biome format . --write"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kobalte/core": "^0.13.9",
|
||||
"@kobalte/tailwindcss": "^0.9.0",
|
||||
"@solidjs/router": "^0.15.3",
|
||||
"@tabler/icons-solidjs": "^3.30.0",
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-dialog": "~2",
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"clsx": "^2.1.1",
|
||||
"fuse.js": "^7.1.0",
|
||||
"solid-js": "^1.9.3",
|
||||
"tailwind-scrollbar-hide": "^2.0.0",
|
||||
"valibot": "^1.0.0-rc.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "^1.9.4",
|
||||
"@tauri-apps/cli": "^2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"tailwindcss": "3.4.0",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.3",
|
||||
"vite-plugin-solid": "^2.11.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "default",
|
||||
"description": "Capability for the main window",
|
||||
"windows": ["main"],
|
||||
"permissions": [
|
||||
"core:default",
|
||||
"opener:default",
|
||||
"dialog:default",
|
||||
"core:window:allow-start-dragging"
|
||||
]
|
||||
"$schema": "../gen/schemas/desktop-schema.json",
|
||||
"identifier": "default",
|
||||
"description": "Capability for the main window",
|
||||
"windows": ["main"],
|
||||
"permissions": [
|
||||
"core:default",
|
||||
"opener:default",
|
||||
"dialog:default",
|
||||
"core:window:allow-start-dragging"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "haystack",
|
||||
"version": "0.1.0",
|
||||
"identifier": "com.haystack.app",
|
||||
"build": {
|
||||
"beforeDevCommand": "bun run dev",
|
||||
"devUrl": "http://localhost:1420",
|
||||
"beforeBuildCommand": "bun run build",
|
||||
"frontendDist": "../dist"
|
||||
},
|
||||
"app": {
|
||||
"windows": [],
|
||||
"macOSPrivateApi": true,
|
||||
"security": {
|
||||
"csp": null
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
]
|
||||
}
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "haystack",
|
||||
"version": "0.1.0",
|
||||
"identifier": "com.haystack.app",
|
||||
"build": {
|
||||
"beforeDevCommand": "bun run dev",
|
||||
"devUrl": "http://localhost:1420",
|
||||
"beforeBuildCommand": "bun run build",
|
||||
"frontendDist": "../dist"
|
||||
},
|
||||
"app": {
|
||||
"windows": [],
|
||||
"macOSPrivateApi": true,
|
||||
"security": {
|
||||
"csp": null
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,132 +1,148 @@
|
||||
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 [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?
|
||||
createEffect(() => {
|
||||
const userImages = images();
|
||||
if (userImages == null) {
|
||||
return;
|
||||
}
|
||||
// TODO: there's probably a better way?
|
||||
createEffect(() => {
|
||||
const userImages = images();
|
||||
|
||||
const imageText = userImages.flatMap(i => i.Text ?? []);
|
||||
console.log(userImages);
|
||||
if (userImages == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
fuze = new Fuse(imageText, { keys: ["ImageText"], threshold: 0.3 });
|
||||
});
|
||||
const imageText = userImages.flatMap((i) => i.Text ?? []);
|
||||
|
||||
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));
|
||||
}
|
||||
fuze = new Fuse(imageText, {
|
||||
keys: ["ImageText"],
|
||||
threshold: 0.3,
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<main class="container pt-2">
|
||||
<div class="px-4">
|
||||
<Search
|
||||
triggerMode="focus"
|
||||
options={searchResults() ?? []}
|
||||
onInputChange={onInputChange}
|
||||
onChange={(item) => {
|
||||
if (item?.ImageID == null) {
|
||||
console.error("ImageID was null");
|
||||
return;
|
||||
}
|
||||
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));
|
||||
};
|
||||
|
||||
nav(`/image/${item.ImageID}`);
|
||||
}}
|
||||
optionValue="ID"
|
||||
optionLabel="ImageText"
|
||||
placeholder="Search for stuff..."
|
||||
itemComponent={(props) => (
|
||||
<Search.Item
|
||||
item={props.item}
|
||||
class={clsx(
|
||||
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-full box-border",
|
||||
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<Search.ItemLabel class="mx-[-100px]">
|
||||
{props.item.rawValue.ImageText ?? ''}
|
||||
</Search.ItemLabel>
|
||||
</Search.Item>
|
||||
)}
|
||||
>
|
||||
<Search.Control
|
||||
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
|
||||
aria-label="Emoji"
|
||||
>
|
||||
<Search.Indicator
|
||||
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" />
|
||||
</Search.Icon>
|
||||
}
|
||||
>
|
||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||
<IconSearch class="m-auto size-5 text-gray-600" />
|
||||
</Search.Icon>
|
||||
</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">
|
||||
return (
|
||||
<main class="container pt-2">
|
||||
<div class="px-4">
|
||||
<Search
|
||||
triggerMode="focus"
|
||||
options={searchResults() ?? []}
|
||||
onInputChange={onInputChange}
|
||||
onChange={(item) => {
|
||||
if (item?.ImageID == null) {
|
||||
console.error("ImageID was null");
|
||||
return;
|
||||
}
|
||||
|
||||
nav(`/image/${item.ImageID}`);
|
||||
}}
|
||||
optionValue="ID"
|
||||
optionLabel="ImageText"
|
||||
placeholder="Search for stuff..."
|
||||
itemComponent={(props) => (
|
||||
<Search.Item
|
||||
item={props.item}
|
||||
class={clsx(
|
||||
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-full box-border",
|
||||
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<Search.ItemLabel class="mx-[-100px]">
|
||||
{props.item.rawValue.ImageText ?? ""}
|
||||
</Search.ItemLabel>
|
||||
</Search.Item>
|
||||
)}
|
||||
>
|
||||
<Search.Control
|
||||
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
|
||||
aria-label="Emoji"
|
||||
>
|
||||
<Search.Indicator
|
||||
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" />
|
||||
</Search.Icon>
|
||||
}
|
||||
>
|
||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||
<IconSearch class="m-auto size-5 text-gray-600" />
|
||||
</Search.Icon>
|
||||
</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 />
|
||||
<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-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" />
|
||||
<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>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
||||
footer
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
<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">
|
||||
{/* <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) => (
|
||||
<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>
|
||||
</div>
|
||||
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
||||
footer
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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...</>}>
|
||||
<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>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Suspense>)
|
||||
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>}
|
||||
</For>
|
||||
</div>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,47 +3,47 @@ import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
export function FolderPicker() {
|
||||
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
||||
const [status, setStatus] = createSignal<string>("");
|
||||
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
||||
const [status, setStatus] = createSignal<string>("");
|
||||
|
||||
const handleFolderSelect = async () => {
|
||||
try {
|
||||
const selected = await open({
|
||||
directory: true,
|
||||
multiple: false,
|
||||
});
|
||||
const handleFolderSelect = async () => {
|
||||
try {
|
||||
const selected = await open({
|
||||
directory: true,
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
setSelectedPath(selected as string);
|
||||
// Send the path to Rust
|
||||
const response = await invoke("handle_selected_folder", {
|
||||
path: selected,
|
||||
});
|
||||
setStatus(`Folder processed: ${response}`);
|
||||
}
|
||||
} catch (error) {
|
||||
setStatus(`Error: ${error}`);
|
||||
}
|
||||
};
|
||||
if (selected) {
|
||||
setSelectedPath(selected as string);
|
||||
// Send the path to Rust
|
||||
const response = await invoke("handle_selected_folder", {
|
||||
path: selected,
|
||||
});
|
||||
setStatus(`Folder processed: ${response}`);
|
||||
}
|
||||
} catch (error) {
|
||||
setStatus(`Error: ${error}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFolderSelect}
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Select Folder
|
||||
</button>
|
||||
return (
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFolderSelect}
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Select Folder
|
||||
</button>
|
||||
|
||||
{selectedPath() && (
|
||||
<div class="text-left max-w-md">
|
||||
<p class="font-semibold">Selected folder:</p>
|
||||
<p class="text-sm break-all">{selectedPath()}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedPath() && (
|
||||
<div class="text-left max-w-md">
|
||||
<p class="font-semibold">Selected folder:</p>
|
||||
<p class="text-sm break-all">{selectedPath()}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
||||
</div>
|
||||
);
|
||||
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,21 +3,21 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Manrope";
|
||||
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
@apply bg-neutral-100 text-black rounded-xl;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
@apply bg-neutral-100 text-black rounded-xl;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
@ -5,9 +5,12 @@ import "./index.css";
|
||||
import { Route, Router } from "@solidjs/router";
|
||||
import { ImagePage } from "./ImagePage";
|
||||
|
||||
render(() => (
|
||||
<Router>
|
||||
<Route path="/" component={App} />
|
||||
<Route path="/image/:imageId" component={ImagePage} />
|
||||
</Router>
|
||||
), document.getElementById("root") as HTMLElement);
|
||||
render(
|
||||
() => (
|
||||
<Router>
|
||||
<Route path="/" component={App} />
|
||||
<Route path="/image/:imageId" component={ImagePage} />
|
||||
</Router>
|
||||
),
|
||||
document.getElementById("root") as HTMLElement,
|
||||
);
|
||||
|
||||
@ -1,96 +1,81 @@
|
||||
import {
|
||||
array,
|
||||
InferOutput,
|
||||
null as Null,
|
||||
nullable,
|
||||
object,
|
||||
parse,
|
||||
pipe,
|
||||
string,
|
||||
uuid,
|
||||
type InferOutput,
|
||||
null as Null,
|
||||
any,
|
||||
array,
|
||||
nullable,
|
||||
object,
|
||||
parse,
|
||||
pipe,
|
||||
string,
|
||||
uuid,
|
||||
} from "valibot";
|
||||
|
||||
type BaseRequestParams = Partial<{
|
||||
path: string;
|
||||
body: RequestInit["body"];
|
||||
method: "GET" | "POST";
|
||||
path: string;
|
||||
body: RequestInit["body"];
|
||||
method: "GET" | "POST";
|
||||
}>;
|
||||
|
||||
const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
|
||||
return new Request(`http://localhost:3040/${path}`, {
|
||||
headers: { userId: "fcc22dbb-7792-4595-be8e-d0439e13990a" },
|
||||
body,
|
||||
method,
|
||||
});
|
||||
return new Request(`http://localhost:3040/${path}`, {
|
||||
headers: { userId: "fcc22dbb-7792-4595-be8e-d0439e13990a" },
|
||||
body,
|
||||
method,
|
||||
});
|
||||
};
|
||||
|
||||
const sendImageResponseValidator = object({
|
||||
ID: pipe(string(), uuid()),
|
||||
ImageID: pipe(string(), uuid()),
|
||||
UserID: pipe(string(), uuid()),
|
||||
ID: pipe(string(), uuid()),
|
||||
ImageID: pipe(string(), uuid()),
|
||||
UserID: pipe(string(), uuid()),
|
||||
});
|
||||
|
||||
export const sendImage = async (
|
||||
imageName: string,
|
||||
base64Image: string,
|
||||
imageName: string,
|
||||
base64Image: string,
|
||||
): Promise<InferOutput<typeof sendImageResponseValidator>> => {
|
||||
const request = getBaseRequest({
|
||||
path: `image/${imageName}`,
|
||||
body: base64Image,
|
||||
method: "POST",
|
||||
});
|
||||
const request = getBaseRequest({
|
||||
path: `image/${imageName}`,
|
||||
body: base64Image,
|
||||
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(
|
||||
object({
|
||||
ID: pipe(string(), uuid()),
|
||||
Image: object({
|
||||
ID: pipe(string(), uuid()),
|
||||
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()),
|
||||
}),
|
||||
),
|
||||
),
|
||||
Text: nullable(
|
||||
array(
|
||||
object({
|
||||
ID: pipe(string(), uuid()),
|
||||
ImageText: string(),
|
||||
ImageID: pipe(string(), uuid()),
|
||||
}),
|
||||
),
|
||||
),
|
||||
}),
|
||||
object({
|
||||
ID: pipe(string(), uuid()),
|
||||
Image: object({
|
||||
ID: pipe(string(), uuid()),
|
||||
ImageName: string(),
|
||||
Image: Null(),
|
||||
}),
|
||||
Tags: any(),
|
||||
Links: any(),
|
||||
Text: nullable(
|
||||
array(
|
||||
object({
|
||||
ID: pipe(string(), uuid()),
|
||||
ImageText: string(),
|
||||
ImageID: pipe(string(), uuid()),
|
||||
}),
|
||||
),
|
||||
),
|
||||
}),
|
||||
);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Manrope", "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@kobalte/tailwindcss"),
|
||||
require("tailwind-scrollbar-hide"),
|
||||
],
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Manrope", "sans-serif"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("@kobalte/tailwindcss"),
|
||||
require("tailwind-scrollbar-hide"),
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -8,31 +8,31 @@ const host = process.env.TAURI_DEV_HOST;
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(async () => ({
|
||||
plugins: [solid()],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwindcss, autoprefixer],
|
||||
},
|
||||
},
|
||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||
//
|
||||
// 1. prevent vite from obscuring rust errors
|
||||
clearScreen: false,
|
||||
// 2. tauri expects a fixed port, fail if that port is not available
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
host: host || false,
|
||||
hmr: host
|
||||
? {
|
||||
protocol: "ws",
|
||||
host,
|
||||
port: 1421,
|
||||
}
|
||||
: undefined,
|
||||
watch: {
|
||||
// 3. tell vite to ignore watching `src-tauri`
|
||||
ignored: ["**/src-tauri/**"],
|
||||
},
|
||||
},
|
||||
plugins: [solid()],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwindcss, autoprefixer],
|
||||
},
|
||||
},
|
||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||
//
|
||||
// 1. prevent vite from obscuring rust errors
|
||||
clearScreen: false,
|
||||
// 2. tauri expects a fixed port, fail if that port is not available
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
host: host || false,
|
||||
hmr: host
|
||||
? {
|
||||
protocol: "ws",
|
||||
host,
|
||||
port: 1421,
|
||||
}
|
||||
: undefined,
|
||||
watch: {
|
||||
// 3. tell vite to ignore watching `src-tauri`
|
||||
ignored: ["**/src-tauri/**"],
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user