Improved Processing UX

package.json

@@ -47,6 +47,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^4.1.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/lucene": "^2.1.7",
     "@vitest/coverage-v8": "^2.1.4",
     "chromatic": "^9.1.0",

src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap

@@ -12,7 +12,7 @@ exports[`Mailkey 1`] = `
         class="svelte-65lbzd"
       >
         <button
-          class="primary normal ghost svelte-141617s"
+          class="primary normal ghost svelte-12ugz1l"
           title=""
           type="button"
         >
@@ -74,7 +74,7 @@ exports[`Mailkey 1`] = `
           style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
         >
           <button
-            class="primary normal minW svelte-141617s"
+            class="primary normal minW svelte-12ugz1l"
             title=""
             type="button"
           >
@@ -83,7 +83,7 @@ exports[`Mailkey 1`] = `
 
 
           <button
-            class="danger normal minW svelte-141617s"
+            class="danger normal minW svelte-12ugz1l"
             title=""
             type="button"
           >
@@ -109,7 +109,7 @@ exports[`Mailkey 2`] = `
         class="svelte-65lbzd"
       >
         <button
-          class="primary normal ghost svelte-141617s"
+          class="primary normal ghost svelte-12ugz1l"
           title=""
           type="button"
         >
@@ -176,7 +176,7 @@ exports[`Mailkey 2`] = `
           style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
         >
           <button
-            class="primary normal minW svelte-141617s"
+            class="primary normal minW svelte-12ugz1l"
             title=""
             type="button"
           >
@@ -185,7 +185,7 @@ exports[`Mailkey 2`] = `
 
 
           <button
-            class="danger normal minW svelte-141617s"
+            class="danger normal minW svelte-12ugz1l"
             title=""
             type="button"
           >

src/lib/components/common/Button.svelte

@@ -12,6 +12,7 @@
   export let minW = true;
 
   export let disabled = false;
+  export let hover = false; // force hover state
 
   export let title: string = "";
   export let type: "submit" | "reset" | "button" = "button";
@@ -40,6 +41,7 @@
     class:ghost
     class:full
     class:minW
+    class:hover
     {...$$restProps}
   >
     <slot>{label}</slot>
@@ -57,6 +59,7 @@
     class:ghost
     class:full
     class:minW
+    class:hover
     {...$$restProps}
   >
     <slot>{label}</slot>
@@ -123,7 +126,8 @@
     fill: var(--fill, var(--gray-4, #5c717c));
   }
 
-  .ghost:hover {
+  .ghost:hover,
+  .ghost.hover {
     background: var(--background, var(--gray-1, #eef3f9));
   }
 
@@ -132,7 +136,8 @@
     fill: var(--blue-3, #1367d0);
   }
 
-  .ghost.primary:hover {
+  .ghost.primary:hover,
+  .ghost.primary.hover {
     background: var(--blue-1, #eef3f9);
   }
 
@@ -141,7 +146,8 @@
     fill: var(--orange-3, #ec7b6b);
   }
 
-  .ghost.danger:hover {
+  .ghost.danger:hover,
+  .ghost.danger.hover {
     background: var(--orange-1, #fff0ee);
   }
 
@@ -152,7 +158,9 @@
   }
 
   .ghost.premium:hover,
-  .ghost.success:hover {
+  .ghost.premium.hover,
+  .ghost.success:hover,
+  .ghost.success.hover {
     background: var(--green-1, #ebf9f6);
   }
 
@@ -161,15 +169,17 @@
     fill: var(--red-3);
   }
 
-  .ghost.failure:hover {
+  .ghost.failure:hover,
+  .ghost.failure.hover {
     background: var(--red-1);
   }
 
   .ghost.small {
     box-shadow: none;
   }
 
-  .ghost:hover {
+  .ghost:hover,
+  .ghost.hover {
     background: var(--background, var(--blue-1, #eef3f9));
   }
 
@@ -179,7 +189,8 @@
     box-shadow: inset var(--shadow-3);
   }
 
-  .small:hover {
+  .small:hover,
+  .small.hover {
     box-shadow: none;
   }
 
@@ -188,7 +199,8 @@
   }
 
   @media (hover: none) {
-    .ghost:hover {
+    .ghost:hover,
+    .ghost.hover {
       background: transparent;
     }
   }
@@ -203,7 +215,8 @@
     color: var(--gray-4, #5c717c);
     fill: var(--gray-4, #5c717c);
   }
-  .ghost:disabled:hover {
+  .ghost:disabled:hover,
+  .ghost:disabled.hover {
     background: transparent;
   }
 

src/lib/components/documents/Metadata.svelte

@@ -68,6 +68,6 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    padding: 0 0.5rem;
+    padding: 0 0.5rem 1rem 0;
   }
 </style>

src/lib/components/documents/sidebar/Notes.svelte

@@ -53,6 +53,7 @@
   ol {
     list-style: none;
     padding: 0;
+    margin-bottom: 1rem;
   }
 
   span.page_number {

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 { getProcessLoader } from "../processing/ProcessContext.svelte";
 
   export let files: File[] = getFilesToUpload();
   export let projects: Project[] = [];
@@ -84,6 +85,9 @@ progress through the three-part upload process.
   let STATUS: Record<string, UploadStatus> = {};
   let loading = false; // are requests in flight?
 
+  // Get load function from processing context
+  const loadProcessing = getProcessLoader();
+
   // fields
   let access: Access = "private";
   let language: { value: string; label: string } = {
@@ -281,6 +285,8 @@ progress through the three-part upload process.
     if (error) {
       STATUS[id].error = error;
     }
+    // trigger process load request
+    loadProcessing?.();
   }
 </script>
 

src/lib/components/layouts/AddOnLayout.svelte

@@ -32,6 +32,7 @@
   import Tab from "../common/Tab.svelte";
 
   import { schedules } from "../addons/ScheduledEvent.svelte";
+  import { getProcessLoader } from "../processing/ProcessContext.svelte";
 
   export let addon: AddOnListItem;
   export let event: Event | null = null;
@@ -70,6 +71,8 @@
     }
   }
 
+  const load = getProcessLoader();
+
   // go to the correct tab after submitting
   function onDispatch({ detail }) {
     if (detail.type === "event") {
@@ -78,6 +81,8 @@
 
     if (detail.type === "run") {
       currentTab = "history";
+      // load processing data
+      load?.();
     }
   }
 </script>

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}