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

refactor: image processing notifications

Browse Source
This commit is contained in:
John Costa
2025-07-18 15:43:06 +01:00
parent 6e2c6acd9d
commit 510cb3012b
6 changed files with 60 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App.tsx
View File

@ -12,6 +12,7 @@ import { SearchImageContextProvider } from "@contexts/SearchImageContext";
import { WithNotifications } from "@contexts/Notifications";
import { ProtectedRoute } from "@components/protected-route";
import { AppWrapper } from "@components/app-wrapper";
import { WithTopbarAndDock } from "@components/app-wrapper/with-topbar-and-dock";
export const App = () => {
onAndroidMount();
@ -24,11 +25,13 @@ export const App = () => {
<Route path="/" component={ProtectedRoute}>
<Route path="/" component={WithNotifications}>
<Route path="/" component={WithTopbarAndDock}>
<Route path="/" component={FrontPage} />
<Route path="/image/:imageId" component={ImagePage} />
<Route path="/entity/:entityId" component={Entity} />
<Route path="/gallery/:entity" component={Gallery} />
</Route>
</Route>
<Route path="/settings" component={Settings} />
</Route>
</Route>

2
frontend/src/components/app-wrapper/dock.tsx
View File

@ -4,7 +4,7 @@ import { Component } from "solid-js";
export const Dock: Component = () => {
return (
<div class="w-full mt-auto h-16 bg-white flex justify-between m-4 rounded-xl">
<div class="w-full mt-auto h-16 bg-white flex justify-between rounded-xl">
<A href="/" class="w-full flex justify-center items-center">
<IconHome />
</A>

6
frontend/src/components/app-wrapper/index.tsx
View File

@ -1,14 +1,10 @@
import { Component, ParentProps } from "solid-js";
import { Topbar } from "./topbar";
import { Dock } from "./dock";
export const AppWrapper: Component<ParentProps> = (props) => {
return (
<div class="w-full flex flex-col items-center h-screen">
<div class="container flex flex-col w-full h-full">
<Topbar />
<div class="container flex flex-col w-full h-full gap-4 m-4">
{props.children}
<Dock />
</div>
</div>
);

13
frontend/src/components/app-wrapper/topbar.tsx
View File

@ -1,16 +1,23 @@
import { useNavigate } from "@solidjs/router";
import { ProcessingImages } from "@components/notifications/ProcessingImage";
import { useLocation, useNavigate } from "@solidjs/router";
import { IconArrowLeft } from "@tabler/icons-solidjs";
import { Component } from "solid-js";
import { Component, Show } from "solid-js";
export const Topbar: Component = () => {
const nav = useNavigate();
const location = useLocation();
return (
<div class="w-full flex items-center bg-white rounded-xl h-16">
<div class="w-full flex items-center bg-white rounded-xl h-16 px-4 gap-4">
<Show when={location.pathname !== "/"}>
<div class="cursor-pointer" onClick={() => nav(-1)}>
<IconArrowLeft />
</div>
</Show>
<h1 class="font-bold text-2xl">Haystack</h1>
<div class="ml-auto">
<ProcessingImages />
</div>
</div>
);
};

13
frontend/src/components/app-wrapper/with-topbar-and-dock.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Component, ParentProps } from "solid-js";
import { Topbar } from "./topbar";
import { Dock } from "./dock";
export const WithTopbarAndDock: Component<ParentProps> = (props) => {
return (
<>
<Topbar />
{props.children}
<Dock />
</>
);
};

18
frontend/src/components/notifications/ProcessingImage.tsx
View File

@ -11,13 +11,9 @@ export const ProcessingImages: Component = () => {
Object.keys(notifications.state.ProcessingImages).length;
return (
<Show when={processingNumber() > 0}>
<Popover sameWidth gutter={4}>
<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
<Show
when={processingNumber() > 0}
fallback={<p class="text-md">No images to process</p>}
>
<Popover.Trigger class="w-full flex justify-between rounded-xl px-4 py-2">
<Show when={processingNumber() > 0}>
<p class="text-md">
Processing {processingNumber()}{" "}
{processingNumber() === 1 ? "image" : "images"}
@ -31,7 +27,13 @@ export const ProcessingImages: Component = () => {
</Show>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-white rounded-xl p-2">
<Show
when={
Object.entries(notifications.state.ProcessingImages).length > 0
}
fallback={<p>No images to process</p>}
>
<For each={Object.entries(notifications.state.ProcessingImages)}>
{([id, _image]) => (
<Show when={_image}>
@ -54,9 +56,9 @@ export const ProcessingImages: Component = () => {
</Show>
)}
</For>
</Show>
</Popover.Content>
</Popover.Portal>
</Popover>
</Show>
);
};