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

wip: different UI

Browse Source 
fix
This commit is contained in:
John Costa
2025-07-02 16:24:25 +01:00
parent a65ef5f548
commit a94c7255c6
4 changed files with 235 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
frontend/src/Search.tsx
View File

@ -3,12 +3,12 @@ import { IconRefresh, IconSearch, IconSettings } from "@tabler/icons-solidjs";
import { listen } from "@tauri-apps/api/event"; import { listen } from "@tauri-apps/api/event";
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import { import {
For, For,
Show, Show,
createEffect, createEffect,
createSignal, createSignal,
onCleanup, onCleanup,
onMount, onMount,
} from "solid-js"; } from "solid-js";
import { SearchCard } from "./components/search-card/SearchCard"; import { SearchCard } from "./components/search-card/SearchCard";
import { invoke } from "@tauri-apps/api/core"; import { invoke } from "@tauri-apps/api/core";
@ -18,180 +18,175 @@ import { useSearchImageContext } from "./contexts/SearchImageContext";
import { A } from "@solidjs/router"; import { A } from "@solidjs/router";
import { useSetEntity } from "./WithEntityDialog"; import { useSetEntity } from "./WithEntityDialog";
import { ProcessingImages } from "./notifications/ProcessingImages"; import { ProcessingImages } from "./notifications/ProcessingImages";
import { Categories } from "./front";
export const Search = () => { export const Search = () => {
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]); const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
const [searchQuery, setSearchQuery] = createSignal(""); const [searchQuery, setSearchQuery] = createSignal("");
const setEntity = useSetEntity(); const setEntity = useSetEntity();
const { images, imagesWithProperties, onRefetchImages } = const { images, imagesWithProperties, onRefetchImages } =
useSearchImageContext(); useSearchImageContext();
let fuze = new Fuse<UserImage>(images(), { let fuze = new Fuse<UserImage>(images(), {
keys: [ keys: [
{ name: "rawData", weight: 1 }, { name: "rawData", weight: 1 },
{ name: "title", weight: 1 }, { name: "title", weight: 1 },
], ],
threshold: 0.4, threshold: 0.4,
}); });
createEffect(() => { createEffect(() => {
setSearchResults(images()); setSearchResults(images());
fuze = new Fuse<UserImage>(images(), { fuze = new Fuse<UserImage>(images(), {
keys: [ keys: [
{ name: "data.Name", weight: 2 }, { name: "data.Name", weight: 2 },
{ name: "rawData", weight: 1 }, { name: "rawData", weight: 1 },
], ],
threshold: 0.6, threshold: 0.6,
}); });
}); });
const onInputChange = (event: InputEvent) => { const onInputChange = (event: InputEvent) => {
const query = (event.target as HTMLInputElement).value; const query = (event.target as HTMLInputElement).value;
if (query.length === 0) { if (query.length === 0) {
setSearchResults(images()); setSearchResults(images());
} else { } else {
setSearchQuery(query); setSearchQuery(query);
setSearchResults(fuze.search(query).map((s) => s.item)); setSearchResults(fuze.search(query).map((s) => s.item));
} }
}; };
let searchInputRef: HTMLInputElement | undefined; let searchInputRef: HTMLInputElement | undefined;
onMount(() => { onMount(() => {
if (searchInputRef) { if (searchInputRef) {
searchInputRef.focus(); searchInputRef.focus();
} }
}); });
createEffect(() => { createEffect(() => {
// Listen for the focus-search event from Tauri // Listen for the focus-search event from Tauri
const unlisten = listen("focus-search", () => { const unlisten = listen("focus-search", () => {
if (searchInputRef) { if (searchInputRef) {
searchInputRef.focus(); searchInputRef.focus();
} }
}); });
onCleanup(() => { onCleanup(() => {
unlisten.then((fn) => fn()); unlisten.then((fn) => fn());
}); });
}); });
const [shortcut, setShortcut] = createSignal<Shortcut>([]); const [shortcut, setShortcut] = createSignal<Shortcut>([]);
async function getCurrentShortcut() { async function getCurrentShortcut() {
try { try {
const res: string = await invoke("get_current_shortcut"); const res: string = await invoke("get_current_shortcut");
console.log("DBG: ", res); console.log("DBG: ", res);
setShortcut(res?.split("+")); setShortcut(res?.split("+"));
} catch (err) { } catch (err) {
console.error("Failed to fetch shortcut:", err); console.error("Failed to fetch shortcut:", err);
} }
} }
onMount(() => { onMount(() => {
getCurrentShortcut(); getCurrentShortcut();
}); });
return ( return (
<> <>
<main class="container pt-2"> <main class="container pt-2">
<div class="px-4 flex items-center"> <ProcessingImages />
<div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
<div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
<IconSearch
size={20}
class="m-auto size-5 text-neutral-600"
/>
</div>
<input
ref={searchInputRef}
type="text"
value={searchQuery()}
onInput={onInputChange}
placeholder="Search for stuff..."
autofocus
class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600"
/>
</div>
<Button
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
onClick={onRefetchImages}
>
<IconRefresh size={20} />
</Button>
<Button
as="a"
href="/settings"
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
>
<IconSettings size={20} />
</Button>
</div>
<div class="px-4 mt-4 bg-white rounded-t-2xl"> <Categories />
<div class="mt-4 overflow-scroll scrollbar-hide">
<Show
when={searchResults().length > 0}
fallback={
<div class="text-center text-lg m-auto mt-6 text-neutral-700">
No results found
</div>
}
>
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<For each={searchResults()}>
{(item) => (
<div
onClick={() => setEntity(item)}
onKeyDown={(e) => {
if (e.key === "Enter") {
setEntity(item);
}
}}
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
>
<span class="sr-only">
{item.data.Name}
</span>
<SearchCard item={item} />
</div>
)}
</For>
</div>
</Show>
</div>
</div>
<ProcessingImages /> <div class="px-4 flex items-center">
<div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
<div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
<IconSearch size={20} class="m-auto size-5 text-neutral-600" />
</div>
<input
ref={searchInputRef}
type="text"
value={searchQuery()}
onInput={onInputChange}
placeholder="Search for stuff..."
autofocus
class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600"
/>
</div>
<Button
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
onClick={onRefetchImages}
>
<IconRefresh size={20} />
</Button>
<Button
as="a"
href="/settings"
class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
>
<IconSettings size={20} />
</Button>
</div>
<h2 class="text-xl">Images</h2> <div class="px-4 mt-4 bg-white rounded-t-2xl">
<div class="mt-4 overflow-scroll scrollbar-hide">
<Show
when={searchResults().length > 0}
fallback={
<div class="text-center text-lg m-auto mt-6 text-neutral-700">
No results found
</div>
}
>
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<For each={searchResults()}>
{(item) => (
<div
onClick={() => setEntity(item)}
onKeyDown={(e) => {
if (e.key === "Enter") {
setEntity(item);
}
}}
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
>
<span class="sr-only">{item.data.Name}</span>
<SearchCard item={item} />
</div>
)}
</For>
</div>
</Show>
</div>
</div>
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4"> <h2 class="text-xl">Images</h2>
<For each={Object.keys(imagesWithProperties())}>
{(imageId) => (
<A href={`/image/${imageId}`}>
<img
alt="One of the users images"
src={`${base}/image/${imageId}`}
/>
</A>
)}
</For>
</div>
<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100"> <div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<p class="text-sm text-neutral-700"> <For each={Object.keys(imagesWithProperties())}>
Use{" "} {(imageId) => (
{shortcut().length > 0 <A href={`/image/${imageId}`}>
? shortcut().join("+") <img
: "shortcut"}{" "} alt="One of the users images"
globally to toggle and reload this window src={`${base}/image/${imageId}`}
</p> />
</div> </A>
</main> )}
</> </For>
); </div>
<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
<p class="text-sm text-neutral-700">
Use {shortcut().length > 0 ? shortcut().join("+") : "shortcut"}{" "}
globally to toggle and reload this window
</p>
</div>
</main>
</>
);
}; };

35
frontend/src/contexts/SearchImageContext.tsx
View File

@ -7,7 +7,7 @@ import {
createResource, createResource,
useContext, useContext,
} from "solid-js"; } from "solid-js";
import { getUserImages } from "../network"; import { CategoryUnion, getUserImages } from "../network";
import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage"; import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";
export type ImageWithRawData = Awaited< export type ImageWithRawData = Awaited<
@ -16,7 +16,16 @@ export type ImageWithRawData = Awaited<
rawData: string[]; rawData: string[];
}; };
type SearchImageStore = { type TaggedCategory<T extends CategoryUnion["type"]> = Extract<
CategoryUnion,
{ type: T }
>["data"];
type CategoriesSpecificData = {
[K in CategoryUnion["type"]]: Array<TaggedCategory<K>>;
};
export type SearchImageStore = {
images: Accessor<ImageWithRawData[]>; images: Accessor<ImageWithRawData[]>;
imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>; imagesWithProperties: Accessor<ReturnType<typeof groupPropertiesWithImage>>;
@ -24,6 +33,8 @@ type SearchImageStore = {
Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined Awaited<ReturnType<typeof getUserImages>>["ProcessingImages"] | undefined
>; >;
categories: Accessor<CategoriesSpecificData>;
onRefetchImages: () => void; onRefetchImages: () => void;
}; };
@ -87,6 +98,25 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
return groupPropertiesWithImage(d); return groupPropertiesWithImage(d);
}); });
const categories = createMemo(() => {
const c: ReturnType<SearchImageStore["categories"]> = {
contact: [],
event: [],
location: [],
note: [],
};
for (const category of data()?.ImageProperties ?? []) {
if (category.type === "location" || category.type === "contact") {
continue;
}
c[category.type].push(category.data as any);
}
return c;
});
return ( return (
<SearchImageContext.Provider <SearchImageContext.Provider
value={{ value={{
@ -94,6 +124,7 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
imagesWithProperties: imagesWithProperties, imagesWithProperties: imagesWithProperties,
processingImages, processingImages,
onRefetchImages: refetch, onRefetchImages: refetch,
categories,
}} }}
> >
{props.children} {props.children}

44
frontend/src/front/index.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Component, createEffect, For } from "solid-js";
import {
SearchImageStore,
useSearchImageContext,
} from "../contexts/SearchImageContext";
const CategoryColor: Record<
keyof ReturnType<SearchImageStore["categories"]>,
string
> = {
contact: "bg-red-500",
location: "bg-green-500",
event: "bg-blue-500",
note: "bg-purple-500",
};
export const Categories: Component = () => {
const { categories } = useSearchImageContext();
createEffect(() => {
console.log(categories());
});
return (
<div class="w-full grid grid-cols-4 auto-rows-[minmax(100px,1fr)] gap-2">
<For each={Object.entries(categories())}>
{([category, group]) => (
<div
class={
"col-span-2 flex flex-col " +
CategoryColor[category as keyof typeof CategoryColor] +
" " +
(group.length === 0 ? "row-span-1 order-10" : "row-span-2")
}
>
<p class="uppercase">
{category}: {group.length}
</p>
</div>
)}
</For>
</div>
);
};

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

@ -154,6 +154,8 @@ const dataTypeValidator = variant("type", [
contactDataType, contactDataType,
]); ]);
export type CategoryUnion = InferOutput<typeof dataTypeValidator>;
const userImageValidator = strictObject({ const userImageValidator = strictObject({
ID: pipe(string(), uuid()), ID: pipe(string(), uuid()),
CreatedAt: pipe(string()), CreatedAt: pipe(string()),