web/DownloadManager: item component & type

web/src/components/downloads/DownloadItem.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import IconX from "@tabler/icons-svelte/IconX.svelte";
+    import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+
+    export let filename: string;
+    export let status: string;
+    export let progress: number = 0;
+    export let icon: ConstructorOfATypedSvelteComponent;
+</script>
+
+<div class="download-item">
+    <div class="download-info">
+        <div class="file-title">
+            <div class="download-type">
+                <svelte:component this={icon} />
+            </div>
+            <span>
+                {filename}
+            </span>
+        </div>
+        <div class="file-progress">
+            <div
+                class="progress"
+                style="width: {Math.min(100, progress)}%"
+            ></div>
+        </div>
+        <div class="file-status">{status}</div>
+    </div>
+    <div class="file-actions">
+        <button class="action-button">
+            <IconDownload />
+        </button>
+        <button class="action-button">
+            <IconX />
+        </button>
+    </div>
+</div>
+
+<style>
+    .download-item,
+    .file-actions {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .download-item {
+        width: 425px;
+        padding: 8px 0;
+        gap: 8px;
+        border-bottom: 1.5px var(--button-elevated) solid;
+    }
+
+    .download-type {
+        display: flex;
+    }
+
+    .download-type :global(svg) {
+        width: 18px;
+        height: 18px;
+        stroke-width: 1.5px;
+    }
+
+    .download-info {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-size: 13px;
+        gap: 4px;
+        font-weight: 500;
+    }
+
+    .file-progress {
+        width: 100%;
+        background-color: var(--button-elevated);
+    }
+
+    .file-progress,
+    .file-progress .progress {
+        height: 6px;
+        border-radius: 10px;
+    }
+
+    .file-progress .progress {
+        background-color: var(--blue);
+    }
+
+    .file-title {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+    }
+
+    .file-status {
+        font-size: 12px;
+        color: var(--gray);
+        line-break: anywhere;
+    }
+
+    .file-actions {
+        gap: 4px;
+    }
+
+    @media (hover: hover) {
+        .file-actions {
+            position: absolute;
+            right: 0;
+            background-color: var(--button);
+            height: 90%;
+            padding-left: 18px;
+
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.2s;
+
+            mask-image: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(0, 0, 0, 1) 20%
+            );
+        }
+
+        .download-item:hover .file-actions {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+
+    .action-button {
+        padding: 8px;
+        height: auto;
+        box-shadow: none;
+    }
+
+    .action-button :global(svg) {
+        width: 18px;
+        height: 18px;
+        stroke-width: 1.5px;
+    }
+
+    .download-item:first-child {
+        padding-top: 0;
+    }
+
+    .download-item:last-child {
+        padding-bottom: 0;
+        border: none;
+    }
+</style>

web/src/components/downloads/DownloadManager.svelte

@@ -1,17 +1,73 @@
 <script lang="ts">
     import { onNavigate } from "$app/navigation";
     import type { SvelteComponent } from "svelte";
+    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 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 IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
     let popover: SvelteComponent;
     $: expanded = false;
 
     $: progress = 0;
     $: indeterminate = false;
 
+    const itemIcons = {
+        video: IconMovie,
+        audio: IconMusic,
+        mute: IconVolume3,
+        image: IconPhoto,
+        gif: IconGif,
+    };
+
+    // dummy data for testing ui rn
+    const downloadQueue: QueueItem[] = [
+        {
+            id: "fake id",
+            type: "video",
+            filename: "placeholder.mp4",
+            status: "processing: 69%",
+            progress: 69,
+        },
+        {
+            id: "fake id",
+            type: "audio",
+            filename: "placeholder.mp3",
+            status: "processing: 3%",
+            progress: 3,
+        },
+        {
+            id: "fake id",
+            type: "mute",
+            filename: "placeholder.mp4",
+            status: "processing: 55%",
+            progress: 55,
+        },
+        {
+            id: "fake id",
+            type: "image",
+            filename: "placeholder.jpg",
+            status: "processing: 21%",
+            progress: 22,
+        },
+        {
+            id: "fake id",
+            type: "gif",
+            filename: "placeholder.gif",
+            status: "processing: 82%",
+            progress: 82,
+        },
+    ];
+
     const popoverAction = async () => {
         expanded = !expanded;
         if (expanded) {
@@ -40,12 +96,28 @@
     >
         <div id="downloads-header">
             <div class="downloads-header-title">downloads</div>
+            {#if downloadQueue.length > 0}
+                <button class="downloads-clear-button">
+                    <IconX />
+                    clear
+                </button>
+            {/if}
         </div>
         <div id="downloads-list">
-            <div class="list-stub">
+            {#each downloadQueue as item}
-                <Meowbalt emotion="think" />
+                <DownloadItem
-                <span>your downloads will appear here!</span>
+                    filename={item.filename}
-            </div>
+                    status={item.status}
+                    progress={item.progress}
+                    icon={itemIcons[item.type]}
+                />
+            {/each}
+            {#if downloadQueue.length === 0}
+                <div class="list-stub">
+                    <Meowbalt emotion="think" />
+                    <span>your downloads will appear here!</span>
+                </div>
+            {/if}
         </div>
     </PopoverContainer>
 </div>
@@ -66,6 +138,7 @@
     #downloads-manager :global(#downloads-popover) {
         padding: 16px;
         max-width: 425px;
+        gap: 12px;
     }
 
     #downloads-header {
@@ -75,13 +148,31 @@
     }
 
     .downloads-header-title {
-        font-size: 14px;
+        font-size: 15px;
         font-weight: 500;
     }
 
+    .downloads-clear-button {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--red);
+
+        padding: 0;
+        background: none;
+        box-shadow: none;
+    }
+
+    .downloads-clear-button :global(svg) {
+        height: 16px;
+        width: 16px;
+    }
+
     #downloads-list {
         display: flex;
         flex-direction: column;
+
+        max-height: 60vh;
+        overflow: scroll;
     }
 
     .list-stub {

web/src/lib/types/queue.ts

@@ -0,0 +1,7 @@
+export type QueueItem = {
+    id: string,
+    type: "video" | "audio" | "mute" | "image" | "gif",
+    filename: string,
+    status: string,
+    progress: number,
+}