Render ProcessDropdown in Navigation

src/lib/components/forms/DocumentUpload.svelte

@@ -67,6 +67,7 @@ progress through the three-part upload process.
     isWithinSizeLimit,
   } from "$lib/utils/files";
   import { getCsrfToken } from "$lib/utils/api";
+  import { load } from "../processing/ProcessContext.svelte";
 
   export let files: File[] = getFilesToUpload();
   export let projects: Project[] = [];
@@ -189,6 +190,8 @@ progress through the three-part upload process.
           form,
         ),
       );
+    // Try to load processing context after all uploads are triggered
+    load();
 
     // errors are handled within each promise, so we can just wait for all to be settled
     await Promise.allSettled(promises);

src/lib/components/layouts/AppLayout.svelte

@@ -2,7 +2,6 @@
   import Navigation from "./Navigation.svelte";
   import PlausibleTracker from "../common/PlausibleTracker.svelte";
   import ProcessContext from "../processing/ProcessContext.svelte";
-  import ProcessDrawer from "../processing/ProcessDrawer.svelte";
   import Toaster from "./Toaster.svelte";
 </script>
 
@@ -15,7 +14,6 @@
         </div>
       </Navigation>
       <Toaster />
-      <ProcessDrawer />
     </div>
   </ProcessContext>
 </PlausibleTracker>

src/lib/components/layouts/Navigation.svelte

@@ -18,6 +18,7 @@
   import TipOfDay from "../common/TipOfDay.svelte";
   import UserMenu from "../accounts/UserMenu.svelte";
 
+  import ProcessDropdown from "$lib/components/processing/ProcessDropdown.svelte";
   import Portal from "./Portal.svelte";
   import Modal from "./Modal.svelte";
   import UserFeedback from "../forms/UserFeedback.svelte";
@@ -49,6 +50,7 @@
     <slot name="breadcrumbs">
       <Breadcrumbs trail={$page.data.breadcrumbs} />
     </slot>
+    <ProcessDropdown />
     {#if !BREAKPOINTS.BOTTOM_NAV}
       <SignedIn>
         {#if $me}

src/lib/components/processing/AddOns.svelte

@@ -16,44 +16,11 @@ This component should update on a timer.
   import Flex from "../common/Flex.svelte";
   import Process from "./Process.svelte";
 
-  import { history, dismiss, cancel, rate } from "$lib/api/addons";
+  import { dismiss, cancel, rate } from "$lib/api/addons";
   import { getCsrfToken } from "$lib/utils/api";
   import { getRunningAddons } from "./ProcessContext.svelte";
-  import type { Nullable } from "$lib/api/types";
-
-  let timeout: Nullable<string | number | NodeJS.Timeout>;
 
   const running = getRunningAddons();
-  /* 
-  onMount(async () => {
-    if ($running.length === 0) {
-      await load();
-    }
-  });
-
-  afterUpdate(() => {
-    if ($running.length > 0) {
-      timeout = setTimeout(load, POLL_INTERVAL);
-    }
-  });
-
-  onDestroy(() => {
-    stop();
-  });
- */
-  function stop() {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = null;
-    }
-  }
-
-  async function load() {
-    const { data, error } = await history({ dismissed: false, per_page: 100 });
-    if (!error) {
-      $running = data?.results;
-    }
-  }
 
   async function rateRun(rating: number, run: Run) {
     const csrftoken = getCsrfToken();
@@ -73,12 +40,13 @@ This component should update on a timer.
   }
 
   async function dismissRun(run: Run) {
+    run = { ...run, dismissed: true }; // optimistic update
     const csrftoken = getCsrfToken();
     if (!csrftoken) {
       console.error("No CSRF token");
+      run = { ...run, dismissed: false }; // put it back
       return;
     }
-    run = { ...run, dismissed: true }; // optimistic update
     const { data, error } = await dismiss(run.uuid, csrftoken);
     if (error || !data) {
       console.error(error?.errors ?? "No data");