feat(dialogs): add option to cancel replacing the queue

Author: D3SOX

src/dialogs.ts

@@ -6,6 +6,8 @@ type ConfirmDialogOptions = {
   confirmLabel?: string;
   cancelLabel?: string;
   tone?: ButtonTone;
+  extraLabel?: string;
+  extraTone?: ButtonTone;
 };
 
 type PromptDialogOptions = {
@@ -38,10 +40,12 @@ function createDialogContainer(backdrop: HTMLDivElement): HTMLDivElement {
   return dialog;
 }
 
-export function showConfirmDialog(options: ConfirmDialogOptions): Promise<boolean> {
-  if (dialogOpen) return Promise.resolve(false);
+type ConfirmDialogResult = "confirm" | "cancel" | "extra";
+
+export function showConfirmDialog(options: ConfirmDialogOptions): Promise<ConfirmDialogResult> {
+  if (dialogOpen) return Promise.resolve("cancel");
   dialogOpen = true;
-  const { title, message, confirmLabel = "Confirm", cancelLabel = "Cancel", tone } = options;
+  const { title, message, confirmLabel = "Confirm", cancelLabel = "Cancel", tone, extraLabel, extraTone } = options;
 
   return new Promise(resolve => {
     const backdrop = createBackdrop();
@@ -76,13 +80,29 @@ export function showConfirmDialog(options: ConfirmDialogOptions): Promise<boolea
     confirmBtn.className = confirmClasses.join(" ");
     confirmBtn.textContent = confirmLabel;
 
-    actionsEl.append(cancelBtn, confirmBtn);
+    let extraBtn: HTMLButtonElement | null = null;
+    if (extraLabel) {
+      extraBtn = document.createElement("button");
+      extraBtn.type = "button";
+      const extraToneClass = getToneClass(extraTone);
+      const extraClasses = ["qs-btn"];
+      if (extraToneClass === "default") extraClasses.push("subtle");
+      else extraClasses.push(extraToneClass);
+      extraBtn.className = extraClasses.join(" ");
+      extraBtn.textContent = extraLabel;
+    }
+
+    if (extraBtn) {
+      actionsEl.append(cancelBtn, extraBtn, confirmBtn);
+    } else {
+      actionsEl.append(cancelBtn, confirmBtn);
+    }
     dialog.appendChild(actionsEl);
 
     const prevFocused = document.activeElement as HTMLElement | null;
     let resolved = false;
 
-    function cleanup(result: boolean) {
+    function cleanup(result: ConfirmDialogResult) {
       if (resolved) return;
       resolved = true;
       backdrop.remove();
@@ -95,17 +115,20 @@ export function showConfirmDialog(options: ConfirmDialogOptions): Promise<boolea
     function onKeyDown(ev: KeyboardEvent) {
       if (ev.key === "Escape") {
         ev.preventDefault();
-        cleanup(false);
+        cleanup("cancel");
       } else if (ev.key === "Enter" && document.activeElement === confirmBtn) {
         ev.preventDefault();
-        cleanup(true);
+        cleanup("confirm");
       }
     }
 
-    cancelBtn.addEventListener("click", () => cleanup(false));
-    confirmBtn.addEventListener("click", () => cleanup(true));
+    cancelBtn.addEventListener("click", () => cleanup("cancel"));
+    confirmBtn.addEventListener("click", () => cleanup("confirm"));
+    if (extraBtn) {
+      extraBtn.addEventListener("click", () => cleanup("extra"));
+    }
     backdrop.addEventListener("click", ev => {
-      if (ev.target === backdrop) cleanup(false);
+      if (ev.target === backdrop) cleanup("cancel");
     });
     document.addEventListener("keydown", onKeyDown, true);
 
@@ -219,5 +242,5 @@ export function showPromptDialog(options: PromptDialogOptions): Promise<string |
   });
 }
 
-export type { ConfirmDialogOptions, PromptDialogOptions };
+export type { ConfirmDialogOptions, ConfirmDialogResult, PromptDialogOptions };
 

src/ui.ts

@@ -9,7 +9,7 @@ import { createManualSnapshot, exportSnapshotToPlaylist } from "./exporter";
 import { replaceQueueWithSnapshot } from "./exporter";
 import { APP_CHANNEL, APP_NAME, APP_VERSION } from "./appInfo";
 import { getSortedSnapshots } from "./storage";
-import { showConfirmDialog } from "./dialogs";
+import { showConfirmDialog, ConfirmDialogResult } from "./dialogs";
 
 export type UIHandlers = {
   getSettings: () => Settings;
@@ -19,7 +19,6 @@ export type UIHandlers = {
 let boundClickHandler: ((e: MouseEvent) => void) | null = null;
 let boundChangeHandler: ((e: Event) => void) | null = null;
 const exportingIds = new Set<string>();
-let notificationWatcher: number | null = null;
 
 type InlineEditState = {
   input: HTMLInputElement;
@@ -504,9 +503,14 @@ export function openManagerModal(ui: UIHandlers): void {
             message: "Create a manual snapshot of the current queue before replacing it?",
             confirmLabel: "Save snapshot",
             cancelLabel: "Skip",
+            extraLabel: "Cancel",
+            extraTone: "subtle",
             tone: "primary",
           });
-          if (shouldSave) {
+          if (shouldSave === "extra") {
+            return;
+          }
+          if (shouldSave === "confirm") {
             await createManualSnapshot();
             renderList();
           }
@@ -518,16 +522,13 @@ export function openManagerModal(ui: UIHandlers): void {
       return;
     }
     if (action === "delete") {
-      const confirmDelete = await showConfirmDialog({
+      const confirmDelete: ConfirmDialogResult = await showConfirmDialog({
         title: "Delete snapshot",
         message: "Delete this snapshot? This cannot be undone.",
         confirmLabel: "Delete",
         tone: "danger",
       });
-      if (!confirmDelete) {
-        exportingIds.delete(id);
-        return;
-      }
+      if (confirmDelete !== "confirm") return;
       const snapshotName = getSnapshotDisplayName(snap);
       const remaining = snapshots.filter(s => s.id !== id);
       saveSnapshots(remaining);