This commit is contained in:
2025-03-17 21:00:52 +01:00
parent e505a1617e
commit 5a766b8371
17 changed files with 419 additions and 411 deletions

View File

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

View File

@@ -1,14 +1,14 @@
import { A, useParams } from "@solidjs/router"
import { createEffect, createResource, For, Suspense } from "solid-js"
import { getUserImages } from "./network"
import { A, useParams } from "@solidjs/router";
import { createEffect, createResource, For, Suspense } from "solid-js";
import { getUserImages } from "./network";
export function ImagePage() {
const { imageId } = useParams<{ imageId: string }>()
const { imageId } = useParams<{ imageId: string }>();
const [image] = createResource(async () => {
const userImages = await getUserImages();
const currentImage = userImages.find(image => image.ID === imageId);
const currentImage = userImages.find((image) => image.ID === imageId);
if (currentImage == null) {
// TODO: this error handling.
throw new Error("must be valid");
@@ -19,18 +19,18 @@ export function ImagePage() {
createEffect(() => {
console.log(image());
})
});
return (<Suspense fallback={<>Loading...</>}>
<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>
);
}

View File

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

View File

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

View File

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

View File

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