feat: shift-click to open mgmt dialog

contributing.md

@@ -545,7 +545,7 @@ The usage and example blocks on each are written in TypeScript but can be used i
 >
 > Description:  
 > Adds accessible event listeners to the specified element for button or link-like keyboard and mouse interactions.  
-> All events passed to the callback function automatically have the default behavior prevented and stop immediate propagation, meaning no other listener of the same type will be called.  
+> All events passed to the callback function automatically have the default behavior prevented and stop propagation, meaning no other listener of the same type will be called.  
 > For keyboard events this only happens as long as the captured key is a valid interaction key (Space, Enter).  
 >   
 > Arguments:

src/components/longButton.ts

@@ -24,7 +24,7 @@ type LongBtnOptions = (
     /** Initial state of the button if `toggle` is `true` - defaults to `false` */
     toggleInitialState?: boolean;
     /** Callback function to execute when the button is toggled */
-    onToggle: (enabled: boolean) => void;
+    onToggle: (enabled: boolean, event: MouseEvent | KeyboardEvent) => void;
   }
 ) & (
   {
@@ -65,14 +65,11 @@ export async function createLongBtn({
       btnElem.classList.add("toggled");
   }
 
-  onInteraction(btnElem, () => {
+  onInteraction(btnElem, (evt) => {
     if("onClick" in rest && rest.onClick)
-      rest.onClick && onInteraction(btnElem, rest.onClick);
-    if("toggle" in rest && rest.toggle && "onToggle" in rest && rest.onToggle) {
-      const enabled = btnElem.classList.toggle("toggled");
-      //@ts-ignore
-      rest.onToggle(enabled);
-    }
+      rest.onClick(evt);
+    if("toggle" in rest && rest.toggle && "onToggle" in rest && rest.onToggle)
+      rest.onToggle(btnElem.classList.toggle("toggled"), evt);
   });
 
   btnElem.classList.add("bytm-generic-btn", "long");

src/features/input.ts

@@ -9,7 +9,7 @@ import { getFeatures } from "../config";
 import { compressionFormat } from "../constants";
 import { addSelectorListener } from "../observers";
 import { createLongBtn } from "../components/longButton";
-import { initAutoLikeChannelsStore } from "../dialogs";
+import { getAutoLikeChannelsDialog, initAutoLikeChannelsStore } from "../dialogs";
 import "./input.css";
 
 export const inputIgnoreTagNames = ["INPUT", "TEXTAREA", "SELECT", "BUTTON", "A"];
@@ -245,7 +245,13 @@ async function addAutoLikeToggleBtn(sibling: HTMLElement, chanId: string, chanNa
     title: t("auto_like_channel_toggle"),
     toggle: true,
     toggleInitialState: chan?.enabled ?? false,
-    async onToggle(toggled) {
+    async onToggle(toggled, evt) {
+      if(evt.shiftKey) {
+        buttonEl.classList.toggle("toggled");
+        getAutoLikeChannelsDialog().then((dlg) => dlg.open());
+        return;
+      }
+
       const imgEl = buttonEl.querySelector<HTMLElement>(".bytm-generic-btn-img");
       const imgHtml = await resourceToHTMLString(`icon-auto_like_${toggled ? "enabled" : "disabled"}`);
       if(imgEl && imgHtml)

src/utils/dom.ts

@@ -147,7 +147,7 @@ const interactionKeys = ["Enter", " ", "Space"];
 
 /**
  * Adds generic, accessible interaction listeners to the passed element.  
- * All listeners have the default behavior prevented and stop immediate propagation (for keyboard events only as long as the captured key is valid).
+ * All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
  * @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
  */
 export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: AddEventListenerOptions) {
@@ -155,13 +155,13 @@ export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener:
     if(e instanceof KeyboardEvent) {
       if(interactionKeys.includes(e.key)) {
         e.preventDefault();
-        e.stopImmediatePropagation();
+        e.stopPropagation();
       }
       else return;
     }
     else if(e instanceof MouseEvent) {
       e.preventDefault();
-      e.stopImmediatePropagation();
+      e.stopPropagation();
     }
 
     // clean up the other listener that isn't automatically removed if `once` is set