ref!: actually I changed my mind

src/config.ts

@@ -94,15 +94,10 @@ export const migrations: DataMigrationsDict = {
   // TODO(v2.2): set autoLikeChannels to true on migration once feature is fully implemented
 
   // 6 -> 7 (v2.2)
-  7: (oldData: FeatureConfig) => {
-    const newData = useDefaultConfig(oldData, [
-      "showToastOnGenericError", "sponsorBlockIntegration",
-      "themeSongIntegration", "themeSongLightness",
-    ]);
-    if("clearQueueBtn" in newData)
-      delete newData.clearQueueBtn;
-    return newData;
-  },
+  7: (oldData: FeatureConfig) => useDefaultConfig(oldData, [
+    "showToastOnGenericError", "sponsorBlockIntegration",
+    "themeSongIntegration", "themeSongLightness",
+  ]),
 } as const satisfies DataMigrationsDict;
 
 /** Uses the default config as the base, then overwrites all values with the passed {@linkcode baseData}, then sets all passed {@linkcode resetKeys} to their default values */

src/features/index.ts

@@ -380,6 +380,12 @@ export const featInfo = {
     default: true,
     textAdornment: adornments.reloadRequired,
   },
+  clearQueueBtn: {
+    type: "toggle",
+    category: "songLists",
+    default: true,
+    textAdornment: adornments.reloadRequired,
+  },
 
   //#region behavior
   disableBeforeUnloadPopup: {

src/features/layout.ts

@@ -2,7 +2,7 @@ import { addParent, autoPlural, debounce, fetchAdvanced, pauseFor } from "@sv443
 import { getFeature, getFeatures } from "../config.js";
 import { siteEvents } from "../siteEvents.js";
 import { addSelectorListener } from "../observers.js";
-import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, currentMediaType, domLoaded, waitVideoElementReady, addStyleFromResource, fetchVideoVotes, getWatchId, getLocale, tp } from "../utils/index.js";
+import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, currentMediaType, domLoaded, waitVideoElementReady, addStyleFromResource, fetchVideoVotes, getWatchId, getLocale, tp, getVideoTime } from "../utils/index.js";
 import { mode, scriptInfo } from "../constants.js";
 import { openCfgMenu } from "../menu/menu_old.js";
 import { createCircularBtn, createRipple } from "../components/index.js";
@@ -365,7 +365,7 @@ export async function fixSpacing() {
 //#region ab.queue btns
 
 export async function initAboveQueueBtns() {
-  const { scrollToActiveSongBtn } = getFeatures();
+  const { scrollToActiveSongBtn, clearQueueBtn } = getFeatures();
 
   const contBtns = [
     {
@@ -385,6 +385,26 @@ export async function initAboveQueueBtns() {
         });
       },
     },
+    {
+      condition: clearQueueBtn,
+      id: "clear-queue",
+      resourceName: "icon-clear_list",
+      titleKey: "clear_list",
+      async interaction(evt: KeyboardEvent | MouseEvent) {
+        try {
+          // TODO: better confirmation dialog?
+          if(evt.shiftKey || confirm(t("clear_list_confirm"))) {
+            const url = new URL(location.href);
+            url.searchParams.delete("list");
+            url.searchParams.set("time_continue", String(await getVideoTime(0)));
+            location.assign(url);
+          }
+        }
+        catch(err) {
+          error("Couldn't clear queue due to an error:", err);
+        }
+      },
+    },
   ];
 
   if(!contBtns.some(b => Boolean(b.condition)))

src/types.ts

@@ -511,6 +511,8 @@ export interface FeatureConfig {
   listButtonsPlacement: "queueOnly" | "everywhere";
   /** Add a button above the queue to scroll to the currently playing song */
   scrollToActiveSongBtn: boolean;
+  /** Add a button above the queue to clear it */
+  clearQueueBtn: boolean;
 
   //#region behavior
   /** Whether to completely disable the popup that sometimes appears before leaving the site */