From 1137ccfd3b18667952b27cdec6c0ead4f485bd0f Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 7 Mar 2025 21:03:50 +0600
Subject: [PATCH] web/ProcessingQueue: open the queue popover when new item is
 added

---
 .../components/queue/ProcessingQueue.svelte   | 24 +++++++++----------
 web/src/lib/queen-bee/queue.ts                | 14 +++++++----
 web/src/lib/state/queue-visibility.ts         | 10 ++++++++
 3 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 web/src/lib/state/queue-visibility.ts

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 5da1a39b..c19e3e09 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -5,6 +5,8 @@
 
     import { formatFileSize } from "$lib/util";
     import { clearFileStorage, getStorageQuota } from "$lib/storage";
+
+    import { queueVisible } from "$lib/state/queue-visibility";
     import { currentTasks } from "$lib/state/queen-bee/current-tasks";
     import { clearQueue, queue as readableQueue } from "$lib/state/queen-bee/queue";
 
@@ -17,10 +19,6 @@
     import IconX from "@tabler/icons-svelte/IconX.svelte";
 
     let popover: SvelteComponent;
-    $: expanded = false;
-
-    $: queue = Object.entries($readableQueue);
-
     let quotaUsage = 0;
 
     const updateQuota = async () => {
@@ -28,10 +26,16 @@
         quotaUsage = storageInfo?.usage || 0;
     }
 
+    const popoverAction = () => {
+        $queueVisible = !$queueVisible;
+    };
+
     const totalItemProgress = (completed: number, current: number, total: number) => {
         return (completed * 100 + current) / total
     }
 
+    $: queue = Object.entries($readableQueue);
+
     $: totalProgress = queue.length ? queue.map(([, item]) => {
         if (item.state === "done" || item.state === "error") {
             return 100;
@@ -47,16 +51,12 @@
 
     $: indeterminate = queue.length > 0 && totalProgress === 0;
 
-    const popoverAction = () => {
-        expanded = !expanded;
-    };
-
-    $: if (expanded) {
+    $: if ($queueVisible) {
         updateQuota();
     }
 
     onNavigate(() => {
-        expanded = false;
+        $queueVisible = false;
     });
 
     onMount(() => {
@@ -65,7 +65,7 @@
     });
 </script>
 
-<div id="processing-queue" class:expanded>
+<div id="processing-queue" class:expanded={$queueVisible}>
     <ProcessingStatus
         progress={totalProgress * 100}
         {indeterminate}
@@ -75,7 +75,7 @@
     <PopoverContainer
         bind:this={popover}
         id="processing-popover"
-        {expanded}
+        expanded={$queueVisible}
         expandStart="right"
     >
         <div id="processing-header">
diff --git a/web/src/lib/queen-bee/queue.ts b/web/src/lib/queen-bee/queue.ts
index 12f4684e..dcfab73b 100644
--- a/web/src/lib/queen-bee/queue.ts
+++ b/web/src/lib/queen-bee/queue.ts
@@ -1,6 +1,8 @@
 import mime from "mime";
 
 import { addItem } from "$lib/state/queen-bee/queue";
+import { showQueuePopover } from "$lib/state/queue-visibility";
+
 import type { CobaltPipelineItem } from "$lib/types/workers";
 import type { CobaltLocalProcessingResponse, CobaltSaveRequestBody } from "$lib/types/api";
 
@@ -46,7 +48,9 @@ export const createRemuxPipeline = (file: File) => {
             filename: file.name,
             mimeType: file.type,
             mediaType,
-        })
+        });
+
+        showQueuePopover();
     }
 }
 
@@ -65,7 +69,7 @@ export const createSavePipeline = (info: CobaltLocalProcessingResponse, request:
             workerArgs: {
                 url: tunnel,
             },
-        })
+        });
     }
 
     pipeline.push({
@@ -83,7 +87,7 @@ export const createSavePipeline = (info: CobaltLocalProcessingResponse, request:
                 format: info.filename.split(".").pop(),
             },
         },
-    })
+    });
 
     addItem({
         id: parentId,
@@ -94,5 +98,7 @@ export const createSavePipeline = (info: CobaltLocalProcessingResponse, request:
         filename: info.filename,
         mimeType: mime.getType(info.filename) || undefined,
         mediaType: "video",
-    })
+    });
+
+    showQueuePopover();
 }
diff --git a/web/src/lib/state/queue-visibility.ts b/web/src/lib/state/queue-visibility.ts
new file mode 100644
index 00000000..468aef1b
--- /dev/null
+++ b/web/src/lib/state/queue-visibility.ts
@@ -0,0 +1,10 @@
+import { get, writable } from "svelte/store";
+
+export const queueVisible = writable(false);
+
+export const showQueuePopover = () => {
+    const visible = get(queueVisible);
+    if (!visible) {
+        return queueVisible.update(v => !v);
+    }
+}