refactor: image processing notifications

frontend/src/components/app-wrapper/dock.tsx

@@ -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>

frontend/src/components/app-wrapper/index.tsx

@@ -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>
 	);

frontend/src/components/app-wrapper/topbar.tsx

@@ -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="cursor-pointer" onClick={() => nav(-1)}>
-				<IconArrowLeft />
-			</div>
+		<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>
 	);
 };

frontend/src/components/app-wrapper/with-topbar-and-dock.tsx

@@ -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 />
+		</>
+	);
+};