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 6f938a34e3
commit 2c279bb68f
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 tauri::AppHandle;
use tauri::Emitter;
use tauri::TitleBarStyle;
use tauri::{WebviewUrl, WebviewWindowBuilder};
struct WatcherState {

49
frontend/src/App.tsx
View File

@ -1,11 +1,10 @@
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 clsx from "clsx";
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 { ImageViewer } from "./components/ImageViewer";
type UserImages = Awaited<ReturnType<typeof getUserImages>>;
@ -46,7 +45,6 @@ function App() {
return (
<main class="container pt-2">
<div class="px-4">
<Search
triggerMode="focus"
options={searchResults() ?? []}
@ -65,10 +63,7 @@ function App() {
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",
)}
class="col-span-3 row-span-3 bg-red-200 rounded-xl"
>
<Search.ItemLabel class="mx-[-100px]">
{props.item.rawValue.ImageText ?? ""}
@ -76,10 +71,8 @@ function App() {
</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"
>
<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
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={
@ -97,24 +90,16 @@ function App() {
</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="h-[254px] 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">
No results 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] mt-4 overflow-scroll scrollbar-hide">
<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">
No results found
</Search.NoResult> */}
</div>
</Search>
{/* <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-green-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-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}`}>
@ -134,8 +119,8 @@ function App() {
</A>
)}
</For>
</div>
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
</div> */}
<div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
footer
</div>
</main>