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

fix: UI for images

Browse Source
This commit is contained in:
John Costa
2025-05-07 10:36:36 +01:00
parent ac4fd30b0a
commit 4fa8bfb7bd
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.tsx
View File

@ -1,4 +1,4 @@
import { Route, Router } from "@solidjs/router"; import { Navigate, Route, Router } from "@solidjs/router";
import type { PluginListener } from "@tauri-apps/api/core"; import type { PluginListener } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event"; import { listen } from "@tauri-apps/api/event";
import { readFile } from "@tauri-apps/plugin-fs"; import { readFile } from "@tauri-apps/plugin-fs";
@ -97,7 +97,7 @@ export const App = () => {
<Route path="/" component={ProtectedRoute}> <Route path="/" component={ProtectedRoute}>
<Route path="/" component={WithEntityDialog}> <Route path="/" component={WithEntityDialog}>
<Route path="/" component={Search} /> <Route path="/" component={Search} />
<Route path="/image/imageId" component={Image} /> <Route path="/image/:imageId" component={Image} />
</Route> </Route>
<Route path="/settings" component={Settings} /> <Route path="/settings" component={Settings} />
</Route> </Route>
@ -105,7 +105,7 @@ export const App = () => {
<Route <Route
path="*" path="*"
component={() => { component={() => {
return <p>{window.location.href}</p>; return <Navigate href="/" />;
}} }}
/> />
</Router> </Router>

15
frontend/src/Image.tsx
View File

@ -4,6 +4,7 @@ import { base, type UserImage } from "./network";
import { useSearchImageContext } from "./contexts/SearchImageContext"; import { useSearchImageContext } from "./contexts/SearchImageContext";
import { SearchCard } from "./components/search-card/SearchCard"; import { SearchCard } from "./components/search-card/SearchCard";
import { IconArrowLeft } from "@tabler/icons-solidjs"; import { IconArrowLeft } from "@tabler/icons-solidjs";
import { useSetEntity } from "./WithEntityDialog";
export const Image: Component = () => { export const Image: Component = () => {
const { imageId } = useParams<{ imageId: string }>(); const { imageId } = useParams<{ imageId: string }>();
@ -15,6 +16,8 @@ export const Image: Component = () => {
([id]) => id === imageId, ([id]) => id === imageId,
)?.[1]; )?.[1];
const setEntity = useSetEntity();
return ( return (
<main class="flex flex-col items-center"> <main class="flex flex-col items-center">
<nav> <nav>
@ -23,11 +26,19 @@ export const Image: Component = () => {
</A> </A>
</nav> </nav>
<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} /> <img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4"> <div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<Show when={imageProperties()}> <Show when={imageProperties()}>
{(image) => ( {(image) => (
<For each={image()}> <For each={image()}>
{(property) => <SearchCard item={property} />} {(property) => (
<div
onKeyDown={() => setEntity(property)}
onClick={() => setEntity(property)}
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
>
<SearchCard item={property} />
</div>
)}
</For> </For>
)} )}
</Show> </Show>