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

refactor(frontend): clean up App component and improve search functionality

Browse Source
This commit is contained in:
Dmytro Kondakov
2025-03-23 19:10:18 +01:00
parent 410df01b4d
commit 4c85f1de79
2 changed files with 42 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src-tauri/src/lib.rs
View File

@ -7,6 +7,7 @@ use std::sync::Arc;
use std::sync::Mutex; use std::sync::Mutex;
use tauri::AppHandle; use tauri::AppHandle;
use tauri::Emitter; use tauri::Emitter;
use tauri::TitleBarStyle;
use tauri::{WebviewUrl, WebviewWindowBuilder}; use tauri::{WebviewUrl, WebviewWindowBuilder};
struct WatcherState { struct WatcherState {

97
frontend/src/App.tsx
View File

@ -1,11 +1,10 @@
import { Search } from "@kobalte/core/search"; import { Search } from "@kobalte/core/search";
import { A, useNavigate } from "@solidjs/router"; import { useNavigate } from "@solidjs/router";
import { IconRefresh, IconSearch } from "@tabler/icons-solidjs"; import { IconRefresh, IconSearch } from "@tabler/icons-solidjs";
import clsx from "clsx"; import clsx from "clsx";
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import { createEffect, createResource, createSignal, For } from "solid-js"; import { createEffect, createResource, createSignal } from "solid-js";
import { getUserImages } from "./network"; import { getUserImages } from "./network";
import { ImageViewer } from "./components/ImageViewer";
type UserImages = Awaited<ReturnType<typeof getUserImages>>; type UserImages = Awaited<ReturnType<typeof getUserImages>>;
@ -46,40 +45,34 @@ function App() {
return ( return (
<main class="container pt-2"> <main class="container pt-2">
<div class="px-4"> <Search
<Search triggerMode="focus"
triggerMode="focus" options={searchResults() ?? []}
options={searchResults() ?? []} onInputChange={onInputChange}
onInputChange={onInputChange} onChange={(item) => {
onChange={(item) => { if (item?.ImageID == null) {
if (item?.ImageID == null) { console.error("ImageID was null");
console.error("ImageID was null"); return;
return; }
}
nav(`/image/${item.ImageID}`); nav(`/image/${item.ImageID}`);
}} }}
optionValue="ID" optionValue="ID"
optionLabel="ImageText" optionLabel="ImageText"
placeholder="Search for stuff..." placeholder="Search for stuff..."
itemComponent={(props) => ( itemComponent={(props) => (
<Search.Item <Search.Item
item={props.item} item={props.item}
class={clsx( class="col-span-3 row-span-3 bg-red-200 rounded-xl"
"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.ItemLabel class="mx-[-100px]">
{props.item.rawValue.ImageText ?? ""}
</Search.ItemLabel>
</Search.Item>
)}
>
<div class="px-4">
<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">
<Search.Indicator <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" 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={
@ -97,24 +90,16 @@ 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> </div>
<Search.Content
class="h-[254px] overflow-scroll scrollbar-hide" <div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
onCloseAutoFocus={(e) => e.preventDefault()} <Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" />
> {/* <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
<Search.Listbox class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4" /> No results found
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600"> </Search.NoResult> */}
No results found </div>
</Search.NoResult> </Search>
</Search.Content> {/* <div class="px-4 mt-4 bg-white rounded-t-2xl">
</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="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" />
@ -122,7 +107,7 @@ function App() {
<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" />
{/* {JSON.stringify(images())} */}
<For each={images()}> <For each={images()}>
{(image) => ( {(image) => (
<A href={`/image/${image.ID}`}> <A href={`/image/${image.ID}`}>
@ -134,8 +119,8 @@ function App() {
</A> </A>
)} )}
</For> </For>
</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 flex items-center border-neutral-100">
footer footer
</div> </div>
</main> </main>