working notifications across backend and frontend

frontend/src/components/notifications/ProcessingImage.tsx

@@ -8,7 +8,8 @@ export const ProcessingImages: Component = () => {
 	const notifications = useNotifications();
 
 	const processingNumber = () =>
-		Object.keys(notifications.state.ProcessingImages).length;
+		Object.keys(notifications.state.ProcessingImages).length +
+		Object.keys(notifications.state.ProcessingLists).length;
 
 	return (
 		<Popover sameWidth gutter={4}>
@@ -16,7 +17,7 @@ export const ProcessingImages: Component = () => {
 				<Show when={processingNumber() > 0}>
 					<p class="text-md">
 						Processing {processingNumber()}{" "}
-						{processingNumber() === 1 ? "image" : "images"}
+						{processingNumber() === 1 ? "item" : "items"}
 						...
 					</p>
 				</Show>
@@ -30,10 +31,8 @@ export const ProcessingImages: Component = () => {
 			<Popover.Portal>
 				<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>}
+						when={processingNumber() > 0}
+						fallback={<p>No items to process</p>}
 					>
 						<For each={Object.entries(notifications.state.ProcessingImages)}>
 							{([id, _image]) => (
@@ -57,6 +56,24 @@ export const ProcessingImages: Component = () => {
 								</Show>
 							)}
 						</For>
+
+						<For each={Object.entries(notifications.state.ProcessingLists)}>
+							{([, _list]) => (
+								<Show when={_list}>
+									{(list) => (
+										<div class="flex gap-2 w-full justify-center">
+											<div class="flex flex-col gap-1">
+												<p class="text-slate-900">New Stack: {list().Name}</p>
+											</div>
+											<LoadingCircle
+												status="loading"
+												class="ml-auto self-center"
+											/>
+										</div>
+									)}
+								</Show>
+							)}
+						</For>
 					</Show>
 				</Popover.Content>
 			</Popover.Portal>