web: an active saving dialog highlights the selected item from the picker dialog

web/src/components/dialog/DialogContainer.svelte

@@ -6,6 +6,7 @@
 
     export let id: string;
     export let dismissable = true;
+    export let onclose: (e: Event) => void = () => {}
 
     let dialogParent: HTMLDialogElement;
 
@@ -36,7 +37,7 @@
     }
 </script>
 
-<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
+<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open {onclose}>
     <slot></slot>
     <DialogBackdropClose closeFunc={dismissable ? close : () => {}} />
 </dialog>

web/src/components/dialog/PickerItem.svelte

@@ -47,6 +47,7 @@
             downloadFile({
                 url: item.url,
                 urlType: isTunnel ? "tunnel" : "redirect",
+                id: number
             });
         }
     }}
@@ -91,6 +92,10 @@
         border-radius: inherit;
     }
 
+    :global(.picker-item-active) {
+        opacity: 0.5;
+    }
+
     :global(.picker-image) {
         width: 100%;
         height: 100%;

web/src/components/dialog/SavingDialog.svelte

@@ -43,9 +43,11 @@
             copied = false;
         }, 1500);
     }
+
+    if (!id.endsWith('0')) document.querySelector(`.picker-item:has(img[alt$="${id.slice(7)}"])`)?.classList.add('picker-item-active')
 </script>
 
-<DialogContainer {id} {dismissable} bind:close>
+<DialogContainer {id} {dismissable} bind:close onclose={() => { if (!id.endsWith('0')) document.querySelector(`.picker-item:has(img[alt$="${id.slice(7)}"])`)?.classList.remove('picker-item-active') }}>
     <div class="dialog-body popup-body">
         <div class="meowbalt-container">
             <Meowbalt emotion="question" />

web/src/lib/download.ts

@@ -13,6 +13,7 @@ type DownloadFileParams = {
     url?: string,
     file?: File,
     urlType?: CobaltFileUrlType,
+    id: number
 }
 
 type SavingDialogParams = {
@@ -20,12 +21,13 @@ type SavingDialogParams = {
     file?: File,
     body?: string,
     urlType?: CobaltFileUrlType,
+    fileId: number
 }
 
-const openSavingDialog = ({ url, file, body, urlType }: SavingDialogParams) => {
+const openSavingDialog = ({ url, file, body, urlType, fileId }: SavingDialogParams) => {
     const dialogData: DialogInfo = {
         type: "saving",
-        id: "saving",
+        id: `saving-${fileId}`,
         file,
         url,
         urlType,
@@ -62,7 +64,8 @@ export const openURL = (url: string) => {
     if (!open) {
         return openSavingDialog({
             url,
-            body: get(t)("dialog.saving.blocked")
+            body: get(t)("dialog.saving.blocked"),
+            fileId: 0
         });
     }
 }
@@ -75,13 +78,13 @@ export const copyURL = async (url: string) => {
     return await navigator?.clipboard?.writeText(url);
 }
 
-export const downloadFile = ({ url, file, urlType }: DownloadFileParams) => {
+export const downloadFile = ({ url, file, urlType, id }: DownloadFileParams) => {
     if (!url && !file) throw new Error("attempted to download void");
 
     const pref = get(settings).save.savingMethod;
 
     if (pref === "ask") {
-        return openSavingDialog({ url, file, urlType });
+        return openSavingDialog({ url, file, urlType, fileId: id });
     }
 
     /*
@@ -100,7 +103,8 @@ export const downloadFile = ({ url, file, urlType }: DownloadFileParams) => {
             url,
             file,
             body: get(t)("dialog.saving.timeout"),
-            urlType
+            urlType,
+            fileId: id
         });
     }
 
@@ -139,5 +143,5 @@ export const downloadFile = ({ url, file, urlType }: DownloadFileParams) => {
         }
     } catch { /* catch & ignore */ }
 
-    return openSavingDialog({ url, file, urlType });
+    return openSavingDialog({ url, file, urlType, fileId: id });
 }