feat: extract sticky header into own advanced feature toggle

assets/resources.json

@@ -1,5 +1,6 @@
 {
   "css-above_queue_btns": "style/aboveQueueBtns.css",
+  "css-above_queue_btns_sticky": "style/aboveQueueBtnsSticky.css",
   "css-anchor_improvements": "style/anchorImprovements.css",
   "css-auto_like": "style/autoLike.css",
   "css-fix_hdr": "style/fixHDR.css",

assets/style/aboveQueueBtns.css

@@ -1,5 +1,4 @@
 #side-panel ytmusic-tab-renderer ytmusic-queue-header-renderer {
-  position: sticky;
   align-items: center;
   top: 0;
   z-index: 2;

assets/style/aboveQueueBtnsSticky.css

@@ -0,0 +1,3 @@
+#side-panel ytmusic-tab-renderer ytmusic-queue-header-renderer {
+  position: sticky;
+}

changelog.md

@@ -1,6 +1,25 @@
 <!-- I messed up with the changelog parsing so this first split marker will just have to be here forever now -->
 <div class="split"></div>
 
+<!-- #region 2.2.1 -->
+## 2.2.1
+- **Changes:**
+  - The above-queue-button container's sticky positioning can now be turned off with a new advanced feature toggle in the config menu
+
+<!-- <details><summary>Click to expand internal and plugin changes</summary>
+
+- **Internal Changes:**
+  - 
+
+</details> -->
+
+<div class="pr-link-cont">
+  <a href="https://github.com/Sv443/BetterYTM/pull/121" rel="noopener noreferrer">See pull request for more info</a>
+</div>
+
+<div class="split"></div>
+<br>
+
 <!-- #region 2.2.0 -->
 ## 2.2.0
 - **Changes:**

src/config.ts

@@ -131,6 +131,10 @@ export const migrations: DataMigrationsDict = {
       // "autoLikePlayerBarToggleBtn",
     ]);
   },
+  // 9 -> 10 (v2.2.1)
+  10: (oldData: FeatureConfig) => useDefaultConfig(oldData, [
+    "aboveQueueBtnsSticky",
+  ]),
 } 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

@@ -392,6 +392,13 @@ export const featInfo = {
     default: true,
     textAdornment: adornments.reload,
   },
+  aboveQueueBtnsSticky: {
+    type: "toggle",
+    category: "songLists",
+    default: true,
+    advanced: true,
+    textAdornment: () => combineAdornments([adornments.advanced, adornments.reload]),
+  },
 
   //#region cat:behavior
   disableBeforeUnloadPopup: {

src/features/layout.ts

@@ -370,6 +370,8 @@ export async function initAboveQueueBtns() {
 
   if(!await addStyleFromResource("css-above_queue_btns"))
     error("Couldn't add CSS for above queue buttons");
+  else if(getFeature("aboveQueueBtnsSticky"))
+    addStyleFromResource("css-above_queue_btns_sticky");
 
   const contBtns = [
     {

src/types.ts

@@ -563,6 +563,8 @@ export interface FeatureConfig {
   rememberSongTimeReduction: number;
   /** Minimum time in seconds the song needs to be played before it is remembered */
   rememberSongTimeMinPlayTime: number;
+  /** Whether the above queue button container should use sticky positioning */
+  aboveQueueBtnsSticky: boolean;
 
   //#region input
   /** Arrow keys skip forwards and backwards */