web: rename DownloadManager to ProcessingQueue

also replaced the download icon with a blender (to be updated, maybe)

web/src/components/queue/ProcessingQueue.svelte

@@ -4,17 +4,18 @@
     import type { QueueItem } from "$lib/types/queue";
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
-    import DownloadStatus from "$components/downloads/DownloadStatus.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
-    import DownloadItem from "$components/downloads/DownloadItem.svelte";
+    import ProcessingStatus from "$components/queue/ProcessingStatus.svelte";
+    import ProcessingQueueItem from "$components/queue/ProcessingQueueItem.svelte";
 
     import IconX from "@tabler/icons-svelte/IconX.svelte";
 
     import IconGif from "@tabler/icons-svelte/IconGif.svelte";
-    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
+    import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
+
     let popover: SvelteComponent;
     $: expanded = false;
 
@@ -30,7 +31,7 @@
     };
 
     // dummy data for testing ui rn
-    const downloadQueue: QueueItem[] = [
+    const processingQueue: QueueItem[] = [
         {
             id: "fake id",
             type: "video",
@@ -80,8 +81,8 @@
     });
 </script>
 
-<div id="downloads-manager">
+<div id="processing-manager">
-    <DownloadStatus
+    <ProcessingStatus
         {indeterminate}
         {progress}
         expandAction={popover?.showPopover}
@@ -89,33 +90,33 @@
 
     <PopoverContainer
         bind:this={popover}
-        id="downloads-popover"
+        id="processing-popover"
         {expanded}
         {popoverAction}
         expandStart="right"
     >
-        <div id="downloads-header">
+        <div id="processing-header">
-            <div class="downloads-header-title">downloads</div>
+            <div class="header-title">processing queue</div>
-            {#if downloadQueue.length > 0}
+            {#if processingQueue.length > 0}
-                <button class="downloads-clear-button">
+                <button class="clear-button">
                     <IconX />
                     clear
                 </button>
             {/if}
         </div>
-        <div id="downloads-list">
+        <div id="processing-list">
-            {#each downloadQueue as item}
+            {#each processingQueue as item}
-                <DownloadItem
+                <ProcessingQueueItem
                     filename={item.filename}
                     status={item.status}
                     progress={item.progress}
                     icon={itemIcons[item.type]}
                 />
             {/each}
-            {#if downloadQueue.length === 0}
+            {#if processingQueue.length === 0}
                 <div class="list-stub">
                     <Meowbalt emotion="think" />
-                    <span>your downloads will appear here!</span>
+                    <span>downloads will appear here!</span>
                 </div>
             {/if}
         </div>
@@ -123,7 +124,7 @@
 </div>
 
 <style>
-    #downloads-manager {
+    #processing-manager {
         position: absolute;
         right: 0;
         display: flex;
@@ -135,24 +136,24 @@
         padding: 16px;
     }
 
-    #downloads-manager :global(#downloads-popover) {
+    #processing-manager :global(#processing-popover) {
         padding: 16px;
         max-width: 425px;
         gap: 12px;
     }
 
-    #downloads-header {
+    #processing-header {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
 
-    .downloads-header-title {
+    .header-title {
         font-size: 15px;
         font-weight: 500;
     }
 
-    .downloads-clear-button {
+    .clear-button {
         font-size: 13px;
         font-weight: 500;
         color: var(--red);
@@ -162,12 +163,12 @@
         box-shadow: none;
     }
 
-    .downloads-clear-button :global(svg) {
+    .clear-button :global(svg) {
         height: 16px;
         width: 16px;
     }
 
-    #downloads-list {
+    #processing-list {
         display: flex;
         flex-direction: column;
 
@@ -193,7 +194,7 @@
     }
 
     @media screen and (max-width: 535px) {
-        #downloads-manager {
+        #processing-manager {
             top: calc(env(safe-area-inset-top) - var(--padding) + 4px);
         }
     }

web/src/components/queue/ProcessingQueueItem.svelte

@@ -8,10 +8,10 @@
     export let icon: ConstructorOfATypedSvelteComponent;
 </script>
 
-<div class="download-item">
+<div class="processing-item">
-    <div class="download-info">
+    <div class="processing-info">
         <div class="file-title">
-            <div class="download-type">
+            <div class="processing-type">
                 <svelte:component this={icon} />
             </div>
             <span>
@@ -37,7 +37,7 @@
 </div>
 
 <style>
-    .download-item,
+    .processing-item,
     .file-actions {
         display: flex;
         flex-direction: row;
@@ -46,24 +46,24 @@
         position: relative;
     }
 
-    .download-item {
+    .processing-item {
         width: 425px;
         padding: 8px 0;
         gap: 8px;
         border-bottom: 1.5px var(--button-elevated) solid;
     }
 
-    .download-type {
+    .processing-type {
         display: flex;
     }
 
-    .download-type :global(svg) {
+    .processing-type :global(svg) {
         width: 18px;
         height: 18px;
         stroke-width: 1.5px;
     }
 
-    .download-info {
+    .processing-info {
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -122,7 +122,7 @@
             );
         }
 
-        .download-item:hover .file-actions {
+        .processing-item:hover .file-actions {
             visibility: visible;
             opacity: 1;
         }
@@ -140,11 +140,11 @@
         stroke-width: 1.5px;
     }
 
-    .download-item:first-child {
+    .processing-item:first-child {
         padding-top: 0;
     }
 
-    .download-item:last-child {
+    .processing-item:last-child {
         padding-bottom: 0;
         border: none;
     }

web/src/components/queue/ProcessingStatus.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import IconArrowDown from "@tabler/icons-svelte/IconArrowDown.svelte";
+    import IconBlender from "@tabler/icons-svelte/IconBlender.svelte";
 
     export let indeterminate = false;
     export let progress: number = 0;
@@ -10,7 +10,7 @@
 </script>
 
 <button
-    id="downloads-status"
+    id="processing-status"
     on:click={expandAction}
     class:completed={progress >= 100}
 >
@@ -30,35 +30,35 @@
         />
     </svg>
     <div class="icon-holder">
-        <IconArrowDown />
+        <IconBlender />
     </div>
 </button>
 
 <style>
-    #downloads-status {
+    #processing-status {
-        --download-status-glow: 0 0 8px 0px var(--button-elevated-hover);
+        --processing-status-glow: 0 0 8px 0px var(--button-elevated-hover);
 
         pointer-events: all;
         padding: 7px;
         border-radius: 30px;
         box-shadow:
             var(--button-box-shadow),
-            var(--download-status-glow);
+            var(--processing-status-glow);
 
         transition: box-shadow 0.2s, background-color 0.2s;
     }
 
-    #downloads-status.completed {
+    #processing-status.completed {
         box-shadow:
             0 0 0 2px var(--blue) inset,
-            var(--download-status-glow);
+            var(--processing-status-glow);
     }
 
-    :global([data-theme="light"]) #downloads-status.completed {
+    :global([data-theme="light"]) #processing-status.completed {
         background-color: #e0eeff;
     }
 
-    :global([data-theme="dark"]) #downloads-status.completed {
+    :global([data-theme="dark"]) #processing-status.completed {
         background-color: #1f3249;
     }
 

web/src/routes/+layout.svelte

@@ -24,8 +24,8 @@
     import Turnstile from "$components/misc/Turnstile.svelte";
     import NotchSticker from "$components/misc/NotchSticker.svelte";
     import DialogHolder from "$components/dialog/DialogHolder.svelte";
+    import ProcessingQueue from "$components/queue/ProcessingQueue.svelte";
     import UpdateNotification from "$components/misc/UpdateNotification.svelte";
-    import DownloadManager from "$components/downloads/DownloadManager.svelte";
 
     $: reduceMotion =
         $settings.appearance.reduceMotion || device.prefers.reducedMotion;
@@ -85,7 +85,7 @@
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
         {/if}
-        <DownloadManager />
+        <ProcessingQueue />
         <DialogHolder />
         <Sidebar />
         {#if $updated}