JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Dmytro Kondakov
2025-03-17 21:00:52 +01:00
parent e505a1617e
commit 5a766b8371
17 changed files with 419 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.vscode/settings.json vendored
View File

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

2
backend/docker-compose.yml
View File

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

5
frontend/biome.json
View File

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

78
frontend/package.json
View File

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

8
frontend/postcss.config.js
View File

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
}; };

20
frontend/src-tauri/capabilities/default.json
View File

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

56
frontend/src-tauri/tauri.conf.json
View File

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

236
frontend/src/App.tsx
View File

@ -1,132 +1,148 @@
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();
if (userImages == null) {
return;
}
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) => { fuze = new Fuse(imageText, {
// TODO: we can migrate this searching to Rust, so we don't abuse the main thread. keys: ["ImageText"],
// But, it's not too bad as is. threshold: 0.3,
setSearchResults(fuze.search(query).flatMap(s => s.item)); });
} });
return ( const onInputChange = (query: string) => {
<main class="container pt-2"> // TODO: we can migrate this searching to Rust, so we don't abuse the main thread.
<div class="px-4"> // But, it's not too bad as is.
<Search setSearchResults(fuze.search(query).flatMap((s) => s.item));
triggerMode="focus" };
options={searchResults() ?? []}
onInputChange={onInputChange}
onChange={(item) => {
if (item?.ImageID == null) {
console.error("ImageID was null");
return;
}
nav(`/image/${item.ImageID}`); return (
}} <main class="container pt-2">
optionValue="ID" <div class="px-4">
optionLabel="ImageText" <Search
placeholder="Search for stuff..." triggerMode="focus"
itemComponent={(props) => ( options={searchResults() ?? []}
<Search.Item onInputChange={onInputChange}
item={props.item} onChange={(item) => {
class={clsx( if (item?.ImageID == null) {
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-full box-border", console.error("ImageID was null");
"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", return;
)} }
>
<Search.ItemLabel class="mx-[-100px]"> nav(`/image/${item.ImageID}`);
{props.item.rawValue.ImageText ?? ''} }}
</Search.ItemLabel> optionValue="ID"
</Search.Item> optionLabel="ImageText"
)} placeholder="Search for stuff..."
> itemComponent={(props) => (
<Search.Control <Search.Item
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" item={props.item}
aria-label="Emoji" 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",
<Search.Indicator "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",
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"> <Search.ItemLabel class="mx-[-100px]">
<IconRefresh size={20} class="m-auto animate-spin" /> {props.item.rawValue.ImageText ?? ""}
</Search.Icon> </Search.ItemLabel>
} </Search.Item>
> )}
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none"> >
<IconSearch class="m-auto size-5 text-gray-600" /> <Search.Control
</Search.Icon> 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"
</Search.Indicator> aria-label="Emoji"
<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.Indicator
<Search.Portal> 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"
<Search.Content loadingComponent={
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" <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
onCloseAutoFocus={(e) => e.preventDefault()} <IconRefresh size={20} class="m-auto animate-spin" />
> </Search.Icon>
<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.Icon class="h-5 w-5 grid justify-items-center flex-none">
</Search.NoResult> <IconSearch class="m-auto size-5 text-gray-600" />
</Search.Content> </Search.Icon>
</Search.Portal> </Search.Indicator>
</Search> <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" />
</div> </Search.Control>
{/* <div class="mt-4 text-base leading-none"> <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} 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"> <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="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" /> {/* <div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" /> <div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" /> <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-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-blue-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-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" /> <div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" /> */}
<For each={images()}> {/* {JSON.stringify(images())} */}
{(image) => ( <For each={images()}>
<A href={`/image/${image.ID}`}><img src={`http://localhost:3040/image/${image.ID}`} class="col-span-3 row-span-3 rounded-xl" /></A> {(image) => (
)} <A href={`/image/${image.ID}`}>
</For> <img
</div> src={`http://localhost:3040/image/${image.ID}`}
</div> class="col-span-3 row-span-3 rounded-xl"
</div> alt=""
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100"> />
footer </A>
</div> )}
</main> </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; export default App;

36
frontend/src/ImagePage.tsx
View File

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

76
frontend/src/components/FolderPicker.tsx
View File

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

28
frontend/src/index.css
View File

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

15
frontend/src/index.tsx
View File

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

123
frontend/src/network/index.ts
View File

@ -1,96 +1,81 @@
import { import {
array, type InferOutput,
InferOutput, null as Null,
null as Null, any,
nullable, array,
object, nullable,
parse, object,
pipe, parse,
string, pipe,
uuid, string,
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: any(),
array( Links: any(),
object({ Text: nullable(
ID: pipe(string(), uuid()), array(
Tag: string(), object({
ImageID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
}), ImageText: 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()),
}),
),
),
}),
); );
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);
}; };

24
frontend/tailwind.config.js
View File

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

44
frontend/tsconfig.json
View File

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

16
frontend/tsconfig.node.json
View File

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

54
frontend/vite.config.ts
View File

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