☰

8chanSS

Userscript to style 8chan

当前为 2025-04-24 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         8chanSS
  3. // @version      1.27
  4. // @namespace    8chanSS
  5. // @description  Userscript to style 8chan
  6. // @author       otakudude
  7. // @minGMVer     4.3
  8. // @minFFVer     121
  9. // @license      MIT; https://github.com/otacoo/8chanSS/blob/main/LICENSE 
  10. // @match        *://8chan.moe/*
  11. // @match        *://8chan.se/*
  12. // @exclude      *://8chan.moe/login.html
  13. // @exclude      *://8chan.se/login.html
  14. // @grant        GM.getValue
  15. // @grant        GM.setValue
  16. // @grant        GM.deleteValue
  17. // @grant        GM.listValues
  18. // @run-at       document-start
  19. // ==/UserScript==
  20.  
  21. (function () {
  22.     const userTheme = localStorage.selectedTheme;
  23.     if (!userTheme) return;
  24.     const swapTheme = () => {
  25.         const themeLink = Array.from(
  26.             document.getElementsByTagName("link")
  27.         ).find(
  28.             (link) =>
  29.                 link.rel === "stylesheet" &&
  30.                 /\/\.static\/css\/themes\//.test(link.href)
  31.         );
  32.         if (themeLink) {
  33.             const themeBase = themeLink.href.replace(/\/[^\/]+\.css$/, "/");
  34.             themeLink.href = themeBase + userTheme + ".css";
  35.         }
  36.     };
  37.     swapTheme();
  38.     document.addEventListener("DOMContentLoaded", swapTheme);
  39.     document.addEventListener("DOMContentLoaded", function () {
  40.         const themeSelector = document.getElementById("themeSelector");
  41.         if (themeSelector) {
  42.             for (let i = 0; i < themeSelector.options.length; i++) {
  43.                 if (
  44.                     themeSelector.options[i].value === userTheme ||
  45.                     themeSelector.options[i].text === userTheme
  46.                 ) {
  47.                     themeSelector.selectedIndex = i;
  48.                     break;
  49.                 }
  50.             }
  51.         }
  52.     });
  53. })();
  54. (function () {
  55.     try {
  56.         localStorage.removeItem("hoveringImage");
  57.     } catch (e) {
  58.     }
  59. })();
  60. function onReady(fn) {
  61.     if (document.readyState === "loading") {
  62.         document.addEventListener("DOMContentLoaded", fn, { once: true });
  63.     } else {
  64.         fn();
  65.     }
  66. }
  67. onReady(async function () {
  68.     const scriptSettings = {
  69.         site: {
  70.             alwaysShowTW: { label: "Pin Thread Watcher", default: false },
  71.             enableHeaderCatalogLinks: {
  72.                 label: "Header Catalog Links",
  73.                 default: true,
  74.                 subOptions: {
  75.                     openInNewTab: {
  76.                         label: "Always open in new tab",
  77.                         default: false,
  78.                     },
  79.                 },
  80.             },
  81.             enableBottomHeader: { label: "Bottom Header", default: false },
  82.             enableScrollSave: { label: "Save Scroll Position", default: true },
  83.             enableScrollArrows: { label: "Show Up/Down Arrows", default: false, },
  84.             hoverVideoVolume: { label: "Hover Media Volume (0-100%)", default: 50, type: "number", min: 0, max: 100, },
  85.         },
  86.         threads: {
  87.             enableThreadImageHover: { label: "Thread Image Hover", default: true, },
  88.             watchThreadOnReply: { label: "Watch Thread on Reply", default: true, },
  89.             beepOnYou: { label: "Beep on (You)", default: false },
  90.             notifyOnYou: { label: "Notify when (You) (!)", default: true },
  91.             highlightOnYou: { label: "Highlight (You) posts", default: true },
  92.             hideHiddenPostStub: { label: "Hide Stubs of Hidden Posts", default: false, },
  93.             blurSpoilers: {
  94.                 label: "Blur Spoilers",
  95.                 default: false,
  96.                 subOptions: {
  97.                     removeSpoilers: {
  98.                         label: "Remove Spoilers",
  99.                         default: false,
  100.                     },
  101.                 },
  102.             },
  103.             deleteSavedName: { label: "Delete Name Checkbox", default: true },
  104.         },
  105.         catalog: {
  106.             enableCatalogImageHover: { label: "Catalog Image Hover", default: true, },
  107.         },
  108.         styling: {
  109.             enableStickyQR: { label: "Enable Sticky Quick Reply", default: false, },
  110.             enableFitReplies: { label: "Fit Replies", default: false },
  111.             enableSidebar: { label: "Enable Sidebar", default: false },
  112.             hideAnnouncement: { label: "Hide Announcement", default: false },
  113.             hidePanelMessage: { label: "Hide Panel Message", default: false },
  114.             hidePostingForm: {
  115.                 label: "Hide Posting Form",
  116.                 default: false,
  117.                 subOptions: {
  118.                     showCatalogForm: {
  119.                         label: "Don't Hide in Catalog",
  120.                         default: false,
  121.                     },
  122.                 },
  123.             },
  124.             hideBanner: { label: "Hide Board Banners", default: false },
  125.         },
  126.     };
  127.     const flatSettings = {};
  128.     function flattenSettings() {
  129.         Object.keys(scriptSettings).forEach((category) => {
  130.             Object.keys(scriptSettings[category]).forEach((key) => {
  131.                 flatSettings[key] = scriptSettings[category][key];
  132.                 if (scriptSettings[category][key].subOptions) {
  133.                     Object.keys(scriptSettings[category][key].subOptions).forEach(
  134.                         (subKey) => {
  135.                             const fullKey = `${key}_${subKey}`;
  136.                             flatSettings[fullKey] =
  137.                                 scriptSettings[category][key].subOptions[subKey];
  138.                         }
  139.                     );
  140.                 }
  141.             });
  142.         });
  143.     }
  144.     flattenSettings();
  145.     async function getSetting(key) {
  146.         if (!flatSettings[key]) {
  147.             console.warn(`Setting key not found: ${key}`);
  148.             return false;
  149.         }
  150.         let val = await GM.getValue("8chanSS_" + key, null);
  151.         if (val === null) return flatSettings[key].default;
  152.         if (flatSettings[key].type === "number") return Number(val);
  153.         return val === "true";
  154.     }
  155.  
  156.     async function setSetting(key, value) {
  157.         await GM.setValue("8chanSS_" + key, String(value));
  158.     }
  159.     async function featureCssClassToggles() {
  160.         document.documentElement.classList.add("8chanSS");
  161.         const classToggles = {
  162.             enableFitReplies: "fit-replies",
  163.             enableSidebar: "ss-sidebar",
  164.             enableStickyQR: "sticky-qr",
  165.             enableBottomHeader: "bottom-header",
  166.             hideHiddenPostStub: "hide-stub",
  167.             hideBanner: "disable-banner",
  168.             hidePostingForm: "hide-posting-form",
  169.             hidePostingForm_showCatalogForm: "show-catalog-form",
  170.             hideAnnouncement: "hide-announcement",
  171.             hidePanelMessage: "hide-panelmessage",
  172.             highlightOnYou: "highlight-you",
  173.         };
  174.         for (const [settingKey, className] of Object.entries(classToggles)) {
  175.             if (await getSetting(settingKey)) {
  176.                 document.documentElement.classList.add(className);
  177.             } else {
  178.                 document.documentElement.classList.remove(className);
  179.             }
  180.         }
  181.         const urlClassMap = [
  182.             { pattern: /\/catalog\.html$/i, className: "is-catalog" },
  183.             { pattern: /\/res\/[^/]+\.html$/i, className: "is-thread" },
  184.             { pattern: /^\/$/, className: "is-index" },
  185.         ];
  186.         const currentPath = window.location.pathname.toLowerCase();
  187.         urlClassMap.forEach(({ pattern, className }) => {
  188.             if (pattern.test(currentPath)) {
  189.                 document.documentElement.classList.add(className);
  190.             } else {
  191.                 document.documentElement.classList.remove(className);
  192.             }
  193.         });
  194.     }
  195.     featureCssClassToggles();
  196.     const themeSelector = document.getElementById("themesBefore");
  197.     let link = null;
  198.     let bracketSpan = null;
  199.     if (themeSelector) {
  200.         bracketSpan = document.createElement("span");
  201.         bracketSpan.textContent = "] [ ";
  202.         link = document.createElement("a");
  203.         link.id = "8chanSS-icon";
  204.         link.href = "#";
  205.         link.textContent = "8chanSS";
  206.         link.style.fontWeight = "bold";
  207.  
  208.         themeSelector.parentNode.insertBefore(
  209.             bracketSpan,
  210.             themeSelector.nextSibling
  211.         );
  212.         themeSelector.parentNode.insertBefore(link, bracketSpan.nextSibling);
  213.     }
  214.     function createShortcutsTab() {
  215.         const container = document.createElement("div");
  216.         const title = document.createElement("h3");
  217.         title.textContent = "Keyboard Shortcuts";
  218.         title.style.margin = "0 0 15px 0";
  219.         title.style.fontSize = "16px";
  220.         container.appendChild(title);
  221.         const table = document.createElement("table");
  222.         table.style.width = "100%";
  223.         table.style.borderCollapse = "collapse";
  224.         const tableStyles = {
  225.             th: {
  226.                 textAlign: "left",
  227.                 padding: "8px 5px",
  228.                 borderBottom: "1px solid #444",
  229.                 fontSize: "14px",
  230.                 fontWeight: "bold",
  231.             },
  232.             td: {
  233.                 padding: "8px 5px",
  234.                 borderBottom: "1px solid #333",
  235.                 fontSize: "13px",
  236.             },
  237.             kbd: {
  238.                 background: "#333",
  239.                 border: "1px solid #555",
  240.                 borderRadius: "3px",
  241.                 padding: "2px 5px",
  242.                 fontSize: "12px",
  243.                 fontFamily: "monospace",
  244.             },
  245.         };
  246.         const headerRow = document.createElement("tr");
  247.         const shortcutHeader = document.createElement("th");
  248.         shortcutHeader.textContent = "Shortcut";
  249.         Object.assign(shortcutHeader.style, tableStyles.th);
  250.         headerRow.appendChild(shortcutHeader);
  251.  
  252.         const actionHeader = document.createElement("th");
  253.         actionHeader.textContent = "Action";
  254.         Object.assign(actionHeader.style, tableStyles.th);
  255.         headerRow.appendChild(actionHeader);
  256.  
  257.         table.appendChild(headerRow);
  258.         const shortcuts = [
  259.             { keys: ["Ctrl", "F1"], action: "Open 8chanSS settings" },
  260.             { keys: ["Ctrl", "Q"], action: "Toggle Quick Reply" },
  261.             { keys: ["Ctrl", "Enter"], action: "Submit post" },
  262.             { keys: ["Ctrl", "W"], action: "Watch Thread" },
  263.             { keys: ["Escape"], action: "Clear textarea and hide Quick Reply" },
  264.             { keys: ["Ctrl", "B"], action: "Bold text" },
  265.             { keys: ["Ctrl", "I"], action: "Italic text" },
  266.             { keys: ["Ctrl", "U"], action: "Underline text" },
  267.             { keys: ["Ctrl", "S"], action: "Spoiler text" },
  268.             { keys: ["Ctrl", "D"], action: "Doom text" },
  269.             { keys: ["Ctrl", "M"], action: "Moe text" },
  270.             { keys: ["Alt", "C"], action: "Code block" },
  271.         ];
  272.         shortcuts.forEach((shortcut) => {
  273.             const row = document.createElement("tr");
  274.             const shortcutCell = document.createElement("td");
  275.             Object.assign(shortcutCell.style, tableStyles.td);
  276.             shortcut.keys.forEach((key, index) => {
  277.                 const kbd = document.createElement("kbd");
  278.                 kbd.textContent = key;
  279.                 Object.assign(kbd.style, tableStyles.kbd);
  280.                 shortcutCell.appendChild(kbd);
  281.                 if (index < shortcut.keys.length - 1) {
  282.                     const plus = document.createTextNode(" + ");
  283.                     shortcutCell.appendChild(plus);
  284.                 }
  285.             });
  286.  
  287.             row.appendChild(shortcutCell);
  288.             const actionCell = document.createElement("td");
  289.             actionCell.textContent = shortcut.action;
  290.             Object.assign(actionCell.style, tableStyles.td);
  291.             row.appendChild(actionCell);
  292.  
  293.             table.appendChild(row);
  294.         });
  295.  
  296.         container.appendChild(table);
  297.         const note = document.createElement("p");
  298.         note.textContent =
  299.             "Text formatting shortcuts work when text is selected or when inserting at cursor position.";
  300.         note.style.fontSize = "12px";
  301.         note.style.marginTop = "15px";
  302.         note.style.opacity = "0.7";
  303.         note.style.fontStyle = "italic";
  304.         container.appendChild(note);
  305.  
  306.         return container;
  307.     }
  308.     function addCustomCSS(css) {
  309.         if (!css) return;
  310.         const style = document.createElement("style");
  311.         style.type = "text/css";
  312.         style.id = "8chSS";
  313.         style.appendChild(document.createTextNode(css));
  314.         document.head.appendChild(style);
  315.     }
  316.     const currentPath = window.location.pathname.toLowerCase();
  317.     const currentHost = window.location.hostname.toLowerCase();
  318.     if (/^8chan\.(se|moe)$/.test(currentHost)) {
  319.         const css = ":not(.is-catalog) body{margin:0}:root.ss-sidebar #mainPanel{margin-right:305px}#sideCatalogDiv{z-index:200;background:var(--background-gradient)}#navFadeEnd,#navFadeMid,#navTopBoardsSpan,:root.hide-announcement #dynamicAnnouncement,:root.hide-panelmessage #panelMessage,:root.hide-posting-form #postingForm{display:none}:root.is-catalog.show-catalog-form #postingForm{display:block!important}footer{visibility:hidden;height:0}nav.navHeader{z-index:300}:not(:root.bottom-header) .navHeader{box-shadow:0 1px 2px rgba(0,0,0,.15)}:root.bottom-header nav.navHeader{top:auto!important;bottom:0!important;box-shadow:0 -1px 2px rgba(0,0,0,.15)}.watchButton.watched-active::before{color:#dd003e!important}#watchedMenu{font-size:smaller;padding:5px!important;box-shadow:-3px 3px 2px 0 rgba(0,0,0,.19)}#watchedMenu,#watchedMenu .floatingContainer{min-width:200px}#watchedMenu .watchedCellLabel>a:after{content:' - ' attr(href);filter:saturate(50%);font-style:italic;font-weight:700}#watchedMenu .watchedCellLabel>a::after{visibility:hidden}td.watchedCell>label.watchedCellLabel{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:180px;display:block}td.watchedCell>label.watchedCellLabel:hover{overflow:unset;width:auto;white-space:normal}.watchedNotification::before{padding-right:2px}.scroll-arrow-btn{position:fixed;right:50px;width:36px;height:35px;background:#222;color:#fff;border:none;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:22px;cursor:pointer;opacity:.7;z-index:800;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s}:root.ss-sidebar .scroll-arrow-btn{right:330px!important}.scroll-arrow-btn:hover{opacity:1;background:#444}#scroll-arrow-up{bottom:80px}#scroll-arrow-down{bottom:32px}.innerUtility.top{margin-top:2em;background-color:transparent!important;color:var(--link-color)!important}.innerUtility.top a{color:var(--link-color)!important}.bumpLockIndicator::after{padding-right:3px}";
  320.         addCustomCSS(css);
  321.     }
  322.     if (/\/res\/[^/]+\.html$/.test(currentPath)) {
  323.         const css = ":root.sticky-qr #quick-reply{display:block;top:auto!important;bottom:0;left:auto!important;position:fixed;right:0!important}:root.sticky-qr #qrbody{resize:vertical;max-height:50vh;height:130px}#qrbody{min-width:300px}:root.bottom-header #quick-reply{bottom:28px!important}#quick-reply{padding:0;opacity:.7;transition:opacity .3s ease}#quick-reply:focus-within,#quick-reply:hover{opacity:1}.floatingMenu{padding:0!important}#qrFilesBody{max-width:300px}#unread-line{height:2px;border:none!important;pointer-events:none!important;background-image:linear-gradient(to left,rgba(185,185,185,.2),var(--text-color),rgba(185,185,185,.2));margin:-3px auto 0 auto;width:60%}:root.disable-banner #bannerImage{display:none}:root.ss-sidebar #bannerImage{width:305px;right:0;position:fixed;top:26px}:root.ss-sidebar.bottom-header #bannerImage{top:0!important}.quoteTooltip{z-index:999}.inlineQuote .replyPreview{margin-left:20px;border-left:1px solid #ccc;padding-left:10px}.nestedQuoteLink{text-decoration:underline dashed!important}:root.hide-stub .unhideButton{display:none}.quoteTooltip .innerPost{overflow:hidden;box-shadow:-3px 3px 2px 0 rgba(0,0,0,.19)}:root.fit-replies :not(.hidden).innerPost{margin-left:10px;display:flow-root}:root.fit-replies .quoteTooltip{display:table!important}:root.highlight-you .innerPost:has(.youName){border-left:dashed #68b723 3px}:root.highlight-you .innerPost:not(:has(.youName)):has(.quoteLink.you){border-left:solid #dd003e 3px}.originalNameLink{display:inline;overflow-wrap:anywhere;white-space:normal}.multipleUploads .uploadCell:not(.expandedCell){max-width:215px}.postCell::before{display:inline!important;height:auto!important}";
  324.         addCustomCSS(css);
  325.     }
  326.     if (/\/catalog\.html$/.test(currentPath)) {
  327.         const css = "#dynamicAnnouncement{display:none}#postingForm{margin:2em auto}";
  328.         addCustomCSS(css);
  329.     }
  330.     async function createSettingsMenu() {
  331.         let menu = document.getElementById("8chanSS-menu");
  332.         if (menu) return menu;
  333.         menu = document.createElement("div");
  334.         menu.id = "8chanSS-menu";
  335.         menu.style.position = "fixed";
  336.         menu.style.top = "80px";
  337.         menu.style.left = "30px";
  338.         menu.style.zIndex = 99999;
  339.         menu.style.background = "#222";
  340.         menu.style.color = "#fff";
  341.         menu.style.padding = "0";
  342.         menu.style.borderRadius = "8px";
  343.         menu.style.boxShadow = "0 4px 16px rgba(0,0,0,0.25)";
  344.         menu.style.display = "none";
  345.         menu.style.minWidth = "220px";
  346.         menu.style.width = "100%";
  347.         menu.style.maxWidth = "365px";
  348.         menu.style.fontFamily = "sans-serif";
  349.         menu.style.userSelect = "none";
  350.         let isDragging = false,
  351.             dragOffsetX = 0,
  352.             dragOffsetY = 0;
  353.         const header = document.createElement("div");
  354.         header.style.display = "flex";
  355.         header.style.justifyContent = "space-between";
  356.         header.style.alignItems = "center";
  357.         header.style.marginBottom = "0";
  358.         header.style.cursor = "move";
  359.         header.style.background = "#333";
  360.         header.style.padding = "5px 18px 5px";
  361.         header.style.borderTopLeftRadius = "8px";
  362.         header.style.borderTopRightRadius = "8px";
  363.         header.addEventListener("mousedown", function (e) {
  364.             isDragging = true;
  365.             const rect = menu.getBoundingClientRect();
  366.             dragOffsetX = e.clientX - rect.left;
  367.             dragOffsetY = e.clientY - rect.top;
  368.             document.body.style.userSelect = "none";
  369.         });
  370.         document.addEventListener("mousemove", function (e) {
  371.             if (!isDragging) return;
  372.             let newLeft = e.clientX - dragOffsetX;
  373.             let newTop = e.clientY - dragOffsetY;
  374.             const menuRect = menu.getBoundingClientRect();
  375.             const menuWidth = menuRect.width;
  376.             const menuHeight = menuRect.height;
  377.             const viewportWidth = window.innerWidth;
  378.             const viewportHeight = window.innerHeight;
  379.             newLeft = Math.max(0, Math.min(newLeft, viewportWidth - menuWidth));
  380.             newTop = Math.max(0, Math.min(newTop, viewportHeight - menuHeight));
  381.             menu.style.left = newLeft + "px";
  382.             menu.style.top = newTop + "px";
  383.             menu.style.right = "auto";
  384.         });
  385.         document.addEventListener("mouseup", function () {
  386.             isDragging = false;
  387.             document.body.style.userSelect = "";
  388.         });
  389.         const title = document.createElement("span");
  390.         title.textContent = "8chanSS Settings";
  391.         title.style.fontWeight = "bold";
  392.         header.appendChild(title);
  393.  
  394.         const closeBtn = document.createElement("button");
  395.         closeBtn.textContent = "✕";
  396.         closeBtn.style.background = "none";
  397.         closeBtn.style.border = "none";
  398.         closeBtn.style.color = "#fff";
  399.         closeBtn.style.fontSize = "18px";
  400.         closeBtn.style.cursor = "pointer";
  401.         closeBtn.style.marginLeft = "10px";
  402.         closeBtn.addEventListener("click", () => {
  403.             menu.style.display = "none";
  404.         });
  405.         header.appendChild(closeBtn);
  406.  
  407.         menu.appendChild(header);
  408.         const tabNav = document.createElement("div");
  409.         tabNav.style.display = "flex";
  410.         tabNav.style.borderBottom = "1px solid #444";
  411.         tabNav.style.background = "#2a2a2a";
  412.         const tabContent = document.createElement("div");
  413.         tabContent.style.padding = "15px 18px";
  414.         tabContent.style.maxHeight = "60vh";
  415.         tabContent.style.overflowY = "auto";
  416.         const tempSettings = {};
  417.         await Promise.all(
  418.             Object.keys(flatSettings).map(async (key) => {
  419.                 tempSettings[key] = await getSetting(key);
  420.             })
  421.         );
  422.         const tabs = {
  423.             site: {
  424.                 label: "Site",
  425.                 content: createTabContent("site", tempSettings),
  426.             },
  427.             threads: {
  428.                 label: "Threads",
  429.                 content: createTabContent("threads", tempSettings),
  430.             },
  431.             catalog: {
  432.                 label: "Catalog",
  433.                 content: createTabContent("catalog", tempSettings),
  434.             },
  435.             styling: {
  436.                 label: "Style",
  437.                 content: createTabContent("styling", tempSettings),
  438.             },
  439.             shortcuts: {
  440.                 label: "⌨️",
  441.                 content: createShortcutsTab(),
  442.             },
  443.         };
  444.         Object.keys(tabs).forEach((tabId, index, arr) => {
  445.             const tab = tabs[tabId];
  446.             const tabButton = document.createElement("button");
  447.             tabButton.textContent = tab.label;
  448.             tabButton.dataset.tab = tabId;
  449.             tabButton.style.background = index === 0 ? "#333" : "transparent";
  450.             tabButton.style.border = "none";
  451.             tabButton.style.borderRight = "1px solid #444";
  452.             tabButton.style.color = "#fff";
  453.             tabButton.style.padding = "8px 15px";
  454.             tabButton.style.margin = "5px 0 0 0";
  455.             tabButton.style.cursor = "pointer";
  456.             tabButton.style.flex = "1";
  457.             tabButton.style.fontSize = "14px";
  458.             tabButton.style.transition = "background 0.2s";
  459.             if (index === 0) {
  460.                 tabButton.style.borderTopLeftRadius = "8px";
  461.                 tabButton.style.margin = "5px 0 0 5px";
  462.             }
  463.             if (index === arr.length - 1) {
  464.                 tabButton.style.borderTopRightRadius = "8px";
  465.                 tabButton.style.margin = "5px 5px 0 0";
  466.                 tabButton.style.borderRight = "none"; 
  467.             }
  468.  
  469.             tabButton.addEventListener("click", () => {
  470.                 Object.values(tabs).forEach((t) => {
  471.                     t.content.style.display = "none";
  472.                 });
  473.                 tab.content.style.display = "block";
  474.                 tabNav.querySelectorAll("button").forEach((btn) => {
  475.                     btn.style.background = "transparent";
  476.                 });
  477.                 tabButton.style.background = "#333";
  478.             });
  479.  
  480.             tabNav.appendChild(tabButton);
  481.         });
  482.  
  483.         menu.appendChild(tabNav);
  484.         Object.values(tabs).forEach((tab, index) => {
  485.             tab.content.style.display = index === 0 ? "block" : "none";
  486.             tabContent.appendChild(tab.content);
  487.         });
  488.  
  489.         menu.appendChild(tabContent);
  490.         const buttonContainer = document.createElement("div");
  491.         buttonContainer.style.display = "flex";
  492.         buttonContainer.style.gap = "10px";
  493.         buttonContainer.style.padding = "0 18px 15px";
  494.         const saveBtn = document.createElement("button");
  495.         saveBtn.textContent = "Save";
  496.         saveBtn.style.background = "#4caf50";
  497.         saveBtn.style.color = "#fff";
  498.         saveBtn.style.border = "none";
  499.         saveBtn.style.borderRadius = "4px";
  500.         saveBtn.style.padding = "8px 18px";
  501.         saveBtn.style.fontSize = "15px";
  502.         saveBtn.style.cursor = "pointer";
  503.         saveBtn.style.flex = "1";
  504.         saveBtn.addEventListener("click", async function () {
  505.             for (const key of Object.keys(tempSettings)) {
  506.                 await setSetting(key, tempSettings[key]);
  507.             }
  508.             saveBtn.textContent = "Saved!";
  509.             setTimeout(() => {
  510.                 saveBtn.textContent = "Save";
  511.             }, 900);
  512.             setTimeout(() => {
  513.                 window.location.reload();
  514.             }, 400);
  515.         });
  516.         buttonContainer.appendChild(saveBtn);
  517.         const resetBtn = document.createElement("button");
  518.         resetBtn.textContent = "Reset";
  519.         resetBtn.style.background = "#dd3333";
  520.         resetBtn.style.color = "#fff";
  521.         resetBtn.style.border = "none";
  522.         resetBtn.style.borderRadius = "4px";
  523.         resetBtn.style.padding = "8px 18px";
  524.         resetBtn.style.fontSize = "15px";
  525.         resetBtn.style.cursor = "pointer";
  526.         resetBtn.style.flex = "1";
  527.         resetBtn.addEventListener("click", async function () {
  528.             if (confirm("Reset all 8chanSS settings to defaults?")) {
  529.                 const keys = await GM.listValues();
  530.                 for (const key of keys) {
  531.                     if (key.startsWith("8chanSS_")) {
  532.                         await GM.deleteValue(key);
  533.                     }
  534.                 }
  535.                 resetBtn.textContent = "Reset!";
  536.                 setTimeout(() => {
  537.                     resetBtn.textContent = "Reset";
  538.                 }, 900);
  539.                 setTimeout(() => {
  540.                     window.location.reload();
  541.                 }, 400);
  542.             }
  543.         });
  544.         buttonContainer.appendChild(resetBtn);
  545.  
  546.         menu.appendChild(buttonContainer);
  547.         const info = document.createElement("div");
  548.         info.style.fontSize = "11px";
  549.         info.style.padding = "0 18px 12px";
  550.         info.style.opacity = "0.7";
  551.         info.style.textAlign = "center";
  552.         info.textContent = "Press Save to apply changes. Page will reload.";
  553.         menu.appendChild(info);
  554.  
  555.         document.body.appendChild(menu);
  556.         return menu;
  557.     }
  558.     function createTabContent(category, tempSettings) {
  559.         const container = document.createElement("div");
  560.         const categorySettings = scriptSettings[category];
  561.  
  562.         Object.keys(categorySettings).forEach((key) => {
  563.             const setting = categorySettings[key];
  564.             const parentRow = document.createElement("div");
  565.             parentRow.style.display = "flex";
  566.             parentRow.style.alignItems = "center";
  567.             parentRow.style.marginBottom = "0px";
  568.             if (key === "hoverVideoVolume" && setting.type === "number") {
  569.                 const label = document.createElement("label");
  570.                 label.htmlFor = "setting_" + key;
  571.                 label.textContent = setting.label + ": ";
  572.                 label.style.flex = "1";
  573.  
  574.                 const sliderContainer = document.createElement("div");
  575.                 sliderContainer.style.display = "flex";
  576.                 sliderContainer.style.alignItems = "center";
  577.                 sliderContainer.style.flex = "1";
  578.  
  579.                 const slider = document.createElement("input");
  580.                 slider.type = "range";
  581.                 slider.id = "setting_" + key;
  582.                 slider.min = setting.min;
  583.                 slider.max = setting.max;
  584.                 slider.value = Number(tempSettings[key]);
  585.                 slider.style.flex = "unset";
  586.                 slider.style.width = "100px";
  587.                 slider.style.marginRight = "10px";
  588.  
  589.                 const valueLabel = document.createElement("span");
  590.                 valueLabel.textContent = slider.value + "%";
  591.                 valueLabel.style.minWidth = "40px";
  592.                 valueLabel.style.textAlign = "right";
  593.  
  594.                 slider.addEventListener("input", function () {
  595.                     let val = Number(slider.value);
  596.                     if (isNaN(val)) val = setting.default;
  597.                     val = Math.max(setting.min, Math.min(setting.max, val));
  598.                     slider.value = val;
  599.                     tempSettings[key] = val;
  600.                     valueLabel.textContent = val + "%";
  601.                 });
  602.  
  603.                 sliderContainer.appendChild(slider);
  604.                 sliderContainer.appendChild(valueLabel);
  605.  
  606.                 parentRow.appendChild(label);
  607.                 parentRow.appendChild(sliderContainer);
  608.                 const wrapper = document.createElement("div");
  609.                 wrapper.style.marginBottom = "10px";
  610.                 wrapper.appendChild(parentRow);
  611.                 container.appendChild(wrapper);
  612.                 return; 
  613.             }
  614.             const checkbox = document.createElement("input");
  615.             checkbox.type = "checkbox";
  616.             checkbox.id = "setting_" + key;
  617.             checkbox.checked =
  618.                 tempSettings[key] === true || tempSettings[key] === "true";
  619.             checkbox.style.marginRight = "8px";
  620.             const label = document.createElement("label");
  621.             label.htmlFor = checkbox.id;
  622.             label.textContent = setting.label;
  623.             label.style.flex = "1";
  624.             let chevron = null;
  625.             let subOptionsContainer = null;
  626.             if (setting.subOptions) {
  627.                 chevron = document.createElement("span");
  628.                 chevron.className = "ss-chevron";
  629.                 chevron.innerHTML = "&#9654;"; 
  630.                 chevron.style.display = "inline-block";
  631.                 chevron.style.transition = "transform 0.2s";
  632.                 chevron.style.marginLeft = "6px";
  633.                 chevron.style.fontSize = "12px";
  634.                 chevron.style.userSelect = "none";
  635.                 chevron.style.transform = checkbox.checked
  636.                     ? "rotate(90deg)"
  637.                     : "rotate(0deg)";
  638.             }
  639.             checkbox.addEventListener("change", function () {
  640.                 tempSettings[key] = checkbox.checked;
  641.                 if (setting.subOptions && subOptionsContainer) {
  642.                     subOptionsContainer.style.display = checkbox.checked
  643.                         ? "block"
  644.                         : "none";
  645.                     if (chevron) {
  646.                         chevron.style.transform = checkbox.checked
  647.                             ? "rotate(90deg)"
  648.                             : "rotate(0deg)";
  649.                     }
  650.                 }
  651.             });
  652.  
  653.             parentRow.appendChild(checkbox);
  654.             parentRow.appendChild(label);
  655.             if (chevron) parentRow.appendChild(chevron);
  656.             const wrapper = document.createElement("div");
  657.             wrapper.style.marginBottom = "10px";
  658.  
  659.             wrapper.appendChild(parentRow);
  660.             if (setting.subOptions) {
  661.                 subOptionsContainer = document.createElement("div");
  662.                 subOptionsContainer.style.marginLeft = "25px";
  663.                 subOptionsContainer.style.marginTop = "5px";
  664.                 subOptionsContainer.style.display = checkbox.checked ? "block" : "none";
  665.  
  666.                 Object.keys(setting.subOptions).forEach((subKey) => {
  667.                     const subSetting = setting.subOptions[subKey];
  668.                     const fullKey = `${key}_${subKey}`;
  669.  
  670.                     const subWrapper = document.createElement("div");
  671.                     subWrapper.style.marginBottom = "5px";
  672.  
  673.                     const subCheckbox = document.createElement("input");
  674.                     subCheckbox.type = "checkbox";
  675.                     subCheckbox.id = "setting_" + fullKey;
  676.                     subCheckbox.checked = tempSettings[fullKey];
  677.                     subCheckbox.style.marginRight = "8px";
  678.  
  679.                     subCheckbox.addEventListener("change", function () {
  680.                         tempSettings[fullKey] = subCheckbox.checked;
  681.                     });
  682.  
  683.                     const subLabel = document.createElement("label");
  684.                     subLabel.htmlFor = subCheckbox.id;
  685.                     subLabel.textContent = subSetting.label;
  686.  
  687.                     subWrapper.appendChild(subCheckbox);
  688.                     subWrapper.appendChild(subLabel);
  689.                     subOptionsContainer.appendChild(subWrapper);
  690.                 });
  691.  
  692.                 wrapper.appendChild(subOptionsContainer);
  693.             }
  694.  
  695.             container.appendChild(wrapper);
  696.         });
  697.         if (!document.getElementById("ss-chevron-style")) {
  698.             const style = document.createElement("style");
  699.             style.id = "ss-chevron-style";
  700.             style.textContent = `
  701.                       .ss-chevron {
  702.                           transition: transform 0.2s;
  703.                           margin-left: 6px;
  704.                           font-size: 12px;
  705.                           display: inline-block;
  706.                       }
  707.                   `;
  708.             document.head.appendChild(style);
  709.         }
  710.  
  711.         return container;
  712.     }
  713.     if (link) {
  714.         let menu = await createSettingsMenu();
  715.         link.style.cursor = "pointer";
  716.         link.title = "Open 8chanSS settings";
  717.         link.addEventListener("click", async function (e) {
  718.             e.preventDefault();
  719.             let menu = await createSettingsMenu();
  720.             menu.style.display = menu.style.display === "none" ? "block" : "none";
  721.         });
  722.     }
  723.     async function featureHeaderCatalogLinks() {
  724.         async function appendCatalogToLinks() {
  725.             const navboardsSpan = document.getElementById("navBoardsSpan");
  726.             if (navboardsSpan) {
  727.                 const links = navboardsSpan.getElementsByTagName("a");
  728.                 const openInNewTab = await getSetting(
  729.                     "enableHeaderCatalogLinks_openInNewTab"
  730.                 );
  731.  
  732.                 for (let link of links) {
  733.                     if (link.href && !link.href.endsWith("/catalog.html")) {
  734.                         link.href += "/catalog.html";
  735.                         if (openInNewTab) {
  736.                             link.target = "_blank";
  737.                             link.rel = "noopener noreferrer"; 
  738.                         } else {
  739.                             link.target = "";
  740.                             link.rel = "";
  741.                         }
  742.                     }
  743.                 }
  744.             }
  745.         }
  746.  
  747.         appendCatalogToLinks();
  748.         const observer = new MutationObserver(appendCatalogToLinks);
  749.         const config = { childList: true, subtree: true };
  750.         const navboardsSpan = document.getElementById("navBoardsSpan");
  751.         if (navboardsSpan) {
  752.             observer.observe(navboardsSpan, config);
  753.         }
  754.     }
  755.     async function featureImageHover() {
  756.         function getFullMediaSrcFromMime(thumbNode, filemime) {
  757.             if (!thumbNode || !filemime) return null;
  758.             const thumbnailSrc = thumbNode.getAttribute("src");
  759.             if (/\/t_/.test(thumbnailSrc)) {
  760.                 let base = thumbnailSrc.replace(/\/t_/, "/");
  761.                 base = base.replace(/\.(jpe?g|png|gif|webp|webm|mp4|webm|ogg|mp3|m4a|wav)$/i, "");
  762.                 const mimeToExt = {
  763.                     "image/jpeg": ".jpg",
  764.                     "image/jpg": ".jpg",
  765.                     "image/png": ".png",
  766.                     "image/gif": ".gif",
  767.                     "image/webp": ".webp",
  768.                     "image/bmp": ".bmp",
  769.                     "video/mp4": ".mp4",
  770.                     "video/webm": ".webm",
  771.                     "audio/ogg": ".ogg",
  772.                     "audio/mpeg": ".mp3",
  773.                     "audio/x-m4a": ".m4a",
  774.                     "audio/wav": ".wav",
  775.                 };
  776.                 const ext = mimeToExt[filemime.toLowerCase()];
  777.                 if (!ext) return null;
  778.                 return base + ext;
  779.             }
  780.             if (
  781.                 /\/spoiler\.png$/i.test(thumbnailSrc) ||
  782.                 /\/custom\.spoiler$/i.test(thumbnailSrc) ||
  783.                 /\/audioGenericThumb\.png$/i.test(thumbnailSrc)
  784.             ) {
  785.                 const parentA = thumbNode.closest("a.linkThumb, a.imgLink");
  786.                 if (parentA && parentA.getAttribute("href")) {
  787.                     return parentA.getAttribute("href");
  788.                 }
  789.                 return null;
  790.             }
  791.             return null;
  792.         }
  793.         if (!document.getElementById("audio-preview-indicator-style")) {
  794.             const style = document.createElement("style");
  795.             style.id = "audio-preview-indicator-style";
  796.             style.textContent = `
  797.                 a.imgLink[data-filemime^="audio/"], 
  798.                 a.originalNameLink[href$=".mp3"],
  799.                 a.originalNameLink[href$=".ogg"],
  800.                 a.originalNameLink[href$=".m4a"],
  801.                 a.originalNameLink[href$=".wav"] {
  802.                     position: relative;
  803.                 }
  804.                 
  805.                 .audio-preview-indicator {
  806.                     display: none;
  807.                     position: absolute;
  808.                     background: rgba(0, 0, 0, 0.7);
  809.                     color: #ffffff;
  810.                     padding: 5px;
  811.                     font-size: 12px;
  812.                     border-radius: 3px;
  813.                     z-index: 1000;
  814.                     left: 0;
  815.                     top: 0;
  816.                     white-space: nowrap;
  817.                     pointer-events: none;
  818.                 }
  819.                 
  820.                 a[data-filemime^="audio/"]:hover .audio-preview-indicator,
  821.                 a.originalNameLink:hover .audio-preview-indicator {
  822.                     display: block;
  823.                 }
  824.             `;
  825.             document.head.appendChild(style);
  826.         }
  827.  
  828.         let floatingMedia = null;
  829.         let removeListeners = null;
  830.         let hoverTimeout = null;
  831.         let lastThumb = null;
  832.         let isStillHovering = false;
  833.  
  834.         function cleanupFloatingMedia() {
  835.             if (hoverTimeout) {
  836.                 clearTimeout(hoverTimeout);
  837.                 hoverTimeout = null;
  838.             }
  839.  
  840.             if (removeListeners) {
  841.                 removeListeners();
  842.                 removeListeners = null;
  843.             }
  844.  
  845.             if (floatingMedia) {
  846.                 if (
  847.                     floatingMedia.tagName === "VIDEO" ||
  848.                     floatingMedia.tagName === "AUDIO"
  849.                 ) {
  850.                     try {
  851.                         floatingMedia.pause();
  852.                         floatingMedia.removeAttribute("src");
  853.                         floatingMedia.load();
  854.                     } catch (e) {
  855.                     }
  856.                 }
  857.  
  858.                 if (floatingMedia.parentNode) {
  859.                     floatingMedia.parentNode.removeChild(floatingMedia);
  860.                 }
  861.             }
  862.             const indicators = document.querySelectorAll(".audio-preview-indicator");
  863.             indicators.forEach((indicator) => {
  864.                 if (indicator.parentNode) {
  865.                     indicator.parentNode.removeChild(indicator);
  866.                 }
  867.             });
  868.  
  869.             floatingMedia = null;
  870.             lastThumb = null;
  871.             isStillHovering = false;
  872.             document.removeEventListener("mousemove", onMouseMove);
  873.         }
  874.  
  875.         function onMouseMove(event) {
  876.             if (!floatingMedia) return;
  877.  
  878.             const viewportWidth = window.innerWidth;
  879.             const viewportHeight = window.innerHeight;
  880.             let mediaWidth = 0,
  881.                 mediaHeight = 0;
  882.  
  883.             if (floatingMedia.tagName === "IMG") {
  884.                 mediaWidth =
  885.                     floatingMedia.naturalWidth ||
  886.                     floatingMedia.width ||
  887.                     floatingMedia.offsetWidth ||
  888.                     0;
  889.                 mediaHeight =
  890.                     floatingMedia.naturalHeight ||
  891.                     floatingMedia.height ||
  892.                     floatingMedia.offsetHeight ||
  893.                     0;
  894.             } else if (floatingMedia.tagName === "VIDEO") {
  895.                 mediaWidth = floatingMedia.videoWidth || floatingMedia.offsetWidth || 0;
  896.                 mediaHeight =
  897.                     floatingMedia.videoHeight || floatingMedia.offsetHeight || 0;
  898.             } else if (floatingMedia.tagName === "AUDIO") {
  899.                 return;
  900.             }
  901.  
  902.             mediaWidth = Math.min(mediaWidth, viewportWidth * 0.9);
  903.             mediaHeight = Math.min(mediaHeight, viewportHeight * 0.9);
  904.  
  905.             let newX = event.clientX + 10;
  906.             let newY = event.clientY + 10;
  907.  
  908.             if (newX + mediaWidth > viewportWidth) {
  909.                 newX = viewportWidth - mediaWidth - 10;
  910.             }
  911.             if (newY + mediaHeight > viewportHeight) {
  912.                 newY = viewportHeight - mediaHeight - 10;
  913.             }
  914.  
  915.             newX = Math.max(newX, 0);
  916.             newY = Math.max(newY, 0);
  917.  
  918.             floatingMedia.style.left = `${newX}px`;
  919.             floatingMedia.style.top = `${newY}px`;
  920.             floatingMedia.style.maxWidth = "90vw";
  921.             floatingMedia.style.maxHeight = "90vh";
  922.         }
  923.  
  924.         async function onThumbEnter(e) {
  925.             const thumb = e.currentTarget;
  926.             if (lastThumb === thumb) return;
  927.             lastThumb = thumb;
  928.  
  929.             cleanupFloatingMedia();
  930.             isStillHovering = true;
  931.             const container =
  932.                 thumb.tagName === "IMG"
  933.                     ? thumb.closest("a.linkThumb, a.imgLink")
  934.                     : thumb;
  935.  
  936.             function onLeave() {
  937.                 isStillHovering = false;
  938.                 cleanupFloatingMedia();
  939.             }
  940.  
  941.             thumb.addEventListener("mouseleave", onLeave, { once: true });
  942.  
  943.             hoverTimeout = setTimeout(async () => {
  944.                 hoverTimeout = null;
  945.                 if (!isStillHovering) return;
  946.  
  947.                 let filemime = null;
  948.                 let fullSrc = null;
  949.                 if (thumb.tagName === "IMG") {
  950.                     const parentA = thumb.closest("a.linkThumb, a.imgLink");
  951.                     if (!parentA) return;
  952.  
  953.                     const href = parentA.getAttribute("href");
  954.                     if (!href) return;
  955.  
  956.                     const ext = href.split(".").pop().toLowerCase();
  957.                     filemime =
  958.                         parentA.getAttribute("data-filemime") ||
  959.                         {
  960.                             jpg: "image/jpeg",
  961.                             jpeg: "image/jpeg",
  962.                             png: "image/png",
  963.                             gif: "image/gif",
  964.                             webp: "image/webp",
  965.                             bmp: "image/bmp",
  966.                             mp4: "video/mp4",
  967.                             webm: "video/webm",
  968.                             ogg: "audio/ogg",
  969.                             mp3: "audio/mpeg",
  970.                             m4a: "audio/x-m4a",
  971.                             wav: "audio/wav",
  972.                         }[ext];
  973.  
  974.                     fullSrc = getFullMediaSrcFromMime(thumb, filemime);
  975.                 }
  976.                 else if (thumb.classList.contains("originalNameLink")) {
  977.                     const href = thumb.getAttribute("href");
  978.                     if (!href) return;
  979.  
  980.                     const ext = href.split(".").pop().toLowerCase();
  981.                     if (["mp3", "ogg", "m4a", "wav"].includes(ext)) {
  982.                         filemime = {
  983.                             ogg: "audio/ogg",
  984.                             mp3: "audio/mpeg",
  985.                             m4a: "audio/x-m4a",
  986.                             wav: "audio/wav",
  987.                         }[ext];
  988.                         fullSrc = href;
  989.                     }
  990.                 }
  991.  
  992.                 if (!fullSrc || !filemime) return;
  993.  
  994.                 let loaded = false;
  995.                 function setCommonStyles(el) {
  996.                     el.style.position = "fixed";
  997.                     el.style.zIndex = 9999;
  998.                     el.style.pointerEvents = "none";
  999.                     el.style.maxWidth = "95vw";
  1000.                     el.style.maxHeight = "95vh";
  1001.                     el.style.transition = "opacity 0.15s";
  1002.                     el.style.opacity = "0";
  1003.                     el.style.left = "-9999px";
  1004.                 }
  1005.                 removeListeners = function () {
  1006.                     window.removeEventListener("scroll", cleanupFloatingMedia, true);
  1007.                 };
  1008.                 window.addEventListener("scroll", cleanupFloatingMedia, true);
  1009.  
  1010.                 if (filemime.startsWith("image/")) {
  1011.                     floatingMedia = document.createElement("img");
  1012.                     setCommonStyles(floatingMedia);
  1013.  
  1014.                     floatingMedia.onload = function () {
  1015.                         if (!loaded && floatingMedia && isStillHovering) {
  1016.                             loaded = true;
  1017.                             floatingMedia.style.opacity = "1";
  1018.                             document.body.appendChild(floatingMedia);
  1019.                             document.addEventListener("mousemove", onMouseMove);
  1020.                             onMouseMove(e);
  1021.                         }
  1022.                     };
  1023.  
  1024.                     floatingMedia.onerror = cleanupFloatingMedia;
  1025.                     floatingMedia.src = fullSrc;
  1026.                 } else if (filemime.startsWith("video/")) {
  1027.                     floatingMedia = document.createElement("video");
  1028.                     setCommonStyles(floatingMedia);
  1029.  
  1030.                     floatingMedia.autoplay = true;
  1031.                     floatingMedia.loop = true;
  1032.                     floatingMedia.muted = false;
  1033.                     floatingMedia.playsInline = true;
  1034.                     floatingMedia.controls = false; 
  1035.                     let volume = 50;
  1036.                     try {
  1037.                         if (typeof getSetting === "function") {
  1038.                             const v = await getSetting("hoverVideoVolume");
  1039.                             if (typeof v === "number" && !isNaN(v)) {
  1040.                                 volume = v;
  1041.                             }
  1042.                         }
  1043.                     } catch (e) {
  1044.                         volume = 50;
  1045.                     }
  1046.                     floatingMedia.volume = Math.max(0, Math.min(1, volume / 100));
  1047.  
  1048.                     floatingMedia.onloadeddata = function () {
  1049.                         if (!loaded && floatingMedia && isStillHovering) {
  1050.                             loaded = true;
  1051.                             floatingMedia.style.opacity = "1";
  1052.                             document.body.appendChild(floatingMedia);
  1053.                             document.addEventListener("mousemove", onMouseMove);
  1054.                             onMouseMove(e);
  1055.                         }
  1056.                     };
  1057.  
  1058.                     floatingMedia.onerror = cleanupFloatingMedia;
  1059.                     floatingMedia.src = fullSrc;
  1060.                 } else if (filemime.startsWith("audio/")) {
  1061.                     const oldIndicator = container.querySelector(
  1062.                         ".audio-preview-indicator"
  1063.                     );
  1064.                     if (oldIndicator) oldIndicator.remove();
  1065.                     if (container && !container.style.position) {
  1066.                         container.style.position = "relative";
  1067.                     }
  1068.  
  1069.                     floatingMedia = document.createElement("audio");
  1070.                     floatingMedia.src = fullSrc;
  1071.                     floatingMedia.controls = false; 
  1072.                     floatingMedia.style.display = "none"; 
  1073.                     let volume = 50;
  1074.                     try {
  1075.                         if (typeof getSetting === "function") {
  1076.                             const v = await getSetting("hoverVideoVolume");
  1077.                             if (typeof v === "number" && !isNaN(v)) {
  1078.                                 volume = v;
  1079.                             }
  1080.                         }
  1081.                     } catch (e) {
  1082.                         volume = 50;
  1083.                     }
  1084.                     floatingMedia.volume = Math.max(0, Math.min(1, volume / 100));
  1085.  
  1086.                     document.body.appendChild(floatingMedia);
  1087.                     const indicator = document.createElement("div");
  1088.                     indicator.classList.add("audio-preview-indicator");
  1089.                     indicator.textContent = "▶ Playing audio...";
  1090.                     container.appendChild(indicator);
  1091.  
  1092.                     floatingMedia.play().catch((error) => {
  1093.                         console.error("Audio playback failed:", error);
  1094.                     });
  1095.                     function removeAudioAndIndicator() {
  1096.                         if (floatingMedia) {
  1097.                             floatingMedia.pause();
  1098.                             floatingMedia.currentTime = 0;
  1099.                             floatingMedia.remove();
  1100.                             floatingMedia = null;
  1101.                         }
  1102.                         if (indicator) {
  1103.                             indicator.remove();
  1104.                         }
  1105.                     }
  1106.  
  1107.                     container.addEventListener("click", removeAudioAndIndicator, {
  1108.                         once: true,
  1109.                     });
  1110.                 }
  1111.             }, 120); 
  1112.         }
  1113.  
  1114.         function attachThumbListeners(root = document) {
  1115.             const thumbs = root.querySelectorAll(
  1116.                 "a.linkThumb > img, a.imgLink > img"
  1117.             );
  1118.             thumbs.forEach((thumb) => {
  1119.                 if (!thumb._fullImgHoverBound) {
  1120.                     thumb.addEventListener("mouseenter", onThumbEnter);
  1121.                     thumb._fullImgHoverBound = true;
  1122.                 }
  1123.             });
  1124.             const audioLinks = root.querySelectorAll("a.originalNameLink");
  1125.             audioLinks.forEach((link) => {
  1126.                 const href = link.getAttribute("href") || "";
  1127.                 const ext = href.split(".").pop().toLowerCase();
  1128.                 if (
  1129.                     ["mp3", "wav", "ogg", "m4a"].includes(ext) &&
  1130.                     !link._audioHoverBound
  1131.                 ) {
  1132.                     link.addEventListener("mouseenter", onThumbEnter);
  1133.                     link._audioHoverBound = true;
  1134.                 }
  1135.             });
  1136.         }
  1137.         attachThumbListeners();
  1138.         const observer = new MutationObserver((mutations) => {
  1139.             for (const mutation of mutations) {
  1140.                 for (const node of mutation.addedNodes) {
  1141.                     if (node.nodeType === Node.ELEMENT_NODE) {
  1142.                         attachThumbListeners(node);
  1143.                     }
  1144.                 }
  1145.             }
  1146.         });
  1147.  
  1148.         observer.observe(document.body, { childList: true, subtree: true });
  1149.     }
  1150.     function featureBlurSpoilers() {
  1151.         function revealSpoilers() {
  1152.             const spoilerLinks = document.querySelectorAll("a.imgLink");
  1153.             spoilerLinks.forEach(async (link) => {
  1154.                 const img = link.querySelector("img");
  1155.                 if (img) {
  1156.                     const isCustomSpoiler = img.src.includes("/custom.spoiler");
  1157.                     const isNotThumbnail = !img.src.includes("/.media/t_");
  1158.  
  1159.                     if (isNotThumbnail || isCustomSpoiler) {
  1160.                         let href = link.getAttribute("href");
  1161.                         if (href) {
  1162.                             const match = href.match(/\/\.media\/([^\/]+)\.[a-zA-Z0-9]+$/);
  1163.                             if (match) {
  1164.                                 const transformedSrc = `/\.media/t_${match[1]}`;
  1165.                                 img.src = transformedSrc;
  1166.                                 if (await getSetting("blurSpoilers_removeSpoilers")) {
  1167.                                     img.style.filter = "";
  1168.                                     img.style.transition = "";
  1169.                                     img.onmouseover = null;
  1170.                                     img.onmouseout = null;
  1171.                                     return;
  1172.                                 } else {
  1173.                                     img.style.filter = "blur(5px)";
  1174.                                     img.style.transition = "filter 0.3s ease";
  1175.                                     img.addEventListener("mouseover", () => {
  1176.                                         img.style.filter = "none";
  1177.                                     });
  1178.                                     img.addEventListener("mouseout", () => {
  1179.                                         img.style.filter = "blur(5px)";
  1180.                                     });
  1181.                                 }
  1182.                             }
  1183.                         }
  1184.                     }
  1185.                 }
  1186.             });
  1187.         }
  1188.         revealSpoilers();
  1189.         const observer = new MutationObserver(revealSpoilers);
  1190.         observer.observe(document.body, { childList: true, subtree: true });
  1191.     }
  1192.     async function featureWatchThreadOnReply() {
  1193.         function getWatchButton() {
  1194.             return document.querySelector(".watchButton");
  1195.         }
  1196.         function isThreadWatched() {
  1197.             const btn = getWatchButton();
  1198.             return btn && btn.classList.contains("watched-active");
  1199.         }
  1200.         function watchThreadIfNotWatched() {
  1201.             const btn = getWatchButton();
  1202.             if (btn && !isThreadWatched()) {
  1203.                 btn.click(); 
  1204.                 setTimeout(() => {
  1205.                     btn.classList.add("watched-active");
  1206.                 }, 100);
  1207.             }
  1208.         }
  1209.         const submitButton = document.getElementById("qrbutton");
  1210.         if (submitButton) {
  1211.             submitButton.addEventListener("click", async function () {
  1212.                 if (await getSetting("watchThreadOnReply")) {
  1213.                     setTimeout(watchThreadIfNotWatched, 500); 
  1214.                 }
  1215.             });
  1216.         }
  1217.         function updateWatchButtonClass() {
  1218.             const btn = getWatchButton();
  1219.             if (!btn) return;
  1220.             if (isThreadWatched()) {
  1221.                 btn.classList.add("watched-active");
  1222.             } else {
  1223.                 btn.classList.remove("watched-active");
  1224.             }
  1225.         }
  1226.         updateWatchButtonClass();
  1227.         const btn = getWatchButton();
  1228.         if (btn) {
  1229.             btn.addEventListener("click", function () {
  1230.                 setTimeout(updateWatchButtonClass, 100);
  1231.             });
  1232.         }
  1233.     }
  1234.     document.addEventListener("keydown", async function (event) {
  1235.         if (
  1236.             event.altKey &&
  1237.             !event.ctrlKey &&
  1238.             !event.shiftKey &&
  1239.             !event.metaKey &&
  1240.             (event.key === "w" || event.key === "W")
  1241.         ) {
  1242.             event.preventDefault();
  1243.             if (
  1244.                 typeof getSetting === "function" &&
  1245.                 (await getSetting("watchThreadOnReply"))
  1246.             ) {
  1247.                 const btn = document.querySelector(".watchButton");
  1248.                 if (btn && !btn.classList.contains("watched-active")) {
  1249.                     btn.click();
  1250.                     setTimeout(() => {
  1251.                         btn.classList.add("watched-active");
  1252.                     }, 100);
  1253.                 }
  1254.             }
  1255.         }
  1256.     });
  1257.     async function featureAlwaysShowTW() {
  1258.         if (!(await getSetting("alwaysShowTW"))) return;
  1259.  
  1260.         function showThreadWatcher() {
  1261.             const watchedMenu = document.getElementById("watchedMenu");
  1262.             if (watchedMenu) {
  1263.                 watchedMenu.style.display = "flex";
  1264.             }
  1265.         }
  1266.  
  1267.         function addCloseListener() {
  1268.             const watchedMenu = document.getElementById("watchedMenu");
  1269.             if (!watchedMenu) return;
  1270.             const closeBtn = watchedMenu.querySelector(".close-btn");
  1271.             if (closeBtn) {
  1272.                 closeBtn.addEventListener("click", () => {
  1273.                     watchedMenu.style.display = "none";
  1274.                 });
  1275.             }
  1276.         }
  1277.         if (document.readyState === "loading") {
  1278.             document.addEventListener("DOMContentLoaded", () => {
  1279.                 showThreadWatcher();
  1280.                 addCloseListener();
  1281.             });
  1282.         } else {
  1283.             showThreadWatcher();
  1284.             addCloseListener();
  1285.         }
  1286.     }
  1287.     function processWatchedLabels() {
  1288.         document.querySelectorAll('.watchedCellLabel').forEach(label => {
  1289.             if (!label.isConnected) return;
  1290.  
  1291.             const notif = label.querySelector('.watchedNotification');
  1292.             const link = label.querySelector('a');
  1293.             if (!notif || !link) return;
  1294.             if (label.firstElementChild !== notif) {
  1295.                 label.prepend(notif);
  1296.             }
  1297.             const match = link.getAttribute('href').match(/^\/([^\/]+)\//);
  1298.             if (!match) return;
  1299.             const board = `/${match[1]}/`;
  1300.             link.textContent = link.textContent.replace(/^\([^)]+\)\s*-\s*|^\/[^\/]+\/\s*-\s*/i, '');
  1301.             link.textContent = `${board} - ${link.textContent}`;
  1302.         });
  1303.     }
  1304.     processWatchedLabels();
  1305.     function getWatchedContainer() {
  1306.         return document.querySelector('.floatingContainer, #watchedThreads, .watchedThreads');
  1307.     }
  1308.  
  1309.     const container = getWatchedContainer();
  1310.     if (container) {
  1311.         const observer = new MutationObserver(() => {
  1312.             processWatchedLabels();
  1313.         });
  1314.         observer.observe(container, { childList: true, subtree: true });
  1315.     }
  1316.     window.addEventListener('DOMContentLoaded', processWatchedLabels);
  1317.     window.addEventListener('load', processWatchedLabels);
  1318.     function featureScrollArrows() {
  1319.         if (
  1320.             document.getElementById("scroll-arrow-up") ||
  1321.             document.getElementById("scroll-arrow-down")
  1322.         )
  1323.             return;
  1324.         const upBtn = document.createElement("button");
  1325.         upBtn.id = "scroll-arrow-up";
  1326.         upBtn.className = "scroll-arrow-btn";
  1327.         upBtn.title = "Scroll to top";
  1328.         upBtn.innerHTML = "▲";
  1329.         upBtn.addEventListener("click", () => {
  1330.             window.scrollTo({ top: 0, behavior: "smooth" });
  1331.         });
  1332.         const downBtn = document.createElement("button");
  1333.         downBtn.id = "scroll-arrow-down";
  1334.         downBtn.className = "scroll-arrow-btn";
  1335.         downBtn.title = "Scroll to bottom";
  1336.         downBtn.innerHTML = "▼";
  1337.         downBtn.addEventListener("click", () => {
  1338.             const footer = document.getElementById("footer");
  1339.             if (footer) {
  1340.                 footer.scrollIntoView({ behavior: "smooth", block: "end" });
  1341.             } else {
  1342.                 window.scrollTo({
  1343.                     top: document.body.scrollHeight,
  1344.                     behavior: "smooth",
  1345.                 });
  1346.             }
  1347.         });
  1348.  
  1349.         document.body.appendChild(upBtn);
  1350.         document.body.appendChild(downBtn);
  1351.     }
  1352.     async function featureSaveScroll() {
  1353.         if (document.documentElement.classList.contains("is-index")) return;
  1354.  
  1355.         const MAX_PAGES = 50;
  1356.         const currentPage = window.location.href;
  1357.         const excludedPagePatterns = [
  1358.             /\/catalog\.html$/i,
  1359.             /\/.media\/$/i,
  1360.             /\/boards\.js$/i,
  1361.             /\/login\.html$/i,
  1362.             /\/overboard$/i,
  1363.             /\/sfw$/i
  1364.         ];
  1365.  
  1366.         function isExcludedPage(url) {
  1367.             return excludedPagePatterns.some((pattern) => pattern.test(url));
  1368.         }
  1369.  
  1370.         async function saveScrollPosition() {
  1371.             if (isExcludedPage(currentPage)) return;
  1372.  
  1373.             const scrollPosition = window.scrollY;
  1374.             const timestamp = Date.now();
  1375.             await GM.setValue(
  1376.                 `8chanSS_scrollPosition_${currentPage}`,
  1377.                 JSON.stringify({
  1378.                     position: scrollPosition,
  1379.                     timestamp: timestamp,
  1380.                 })
  1381.             );
  1382.  
  1383.             await manageScrollStorage();
  1384.         }
  1385.  
  1386.         async function manageScrollStorage() {
  1387.             const allKeys = await GM.listValues();
  1388.             const scrollKeys = allKeys.filter((key) =>
  1389.                 key.startsWith("8chanSS_scrollPosition_")
  1390.             );
  1391.  
  1392.             if (scrollKeys.length > MAX_PAGES) {
  1393.                 const keyData = await Promise.all(
  1394.                     scrollKeys.map(async (key) => {
  1395.                         let data;
  1396.                         try {
  1397.                             const savedValue = await GM.getValue(key, null);
  1398.                             data = savedValue ? JSON.parse(savedValue) : { position: 0, timestamp: 0 };
  1399.                         } catch (e) {
  1400.                             data = { position: 0, timestamp: 0 };
  1401.                         }
  1402.                         return {
  1403.                             key: key,
  1404.                             timestamp: data.timestamp || 0,
  1405.                         };
  1406.                     })
  1407.                 );
  1408.                 keyData.sort((a, b) => a.timestamp - b.timestamp);
  1409.                 const keysToRemove = keyData.slice(0, keyData.length - MAX_PAGES);
  1410.                 for (const item of keysToRemove) {
  1411.                     await GM.deleteValue(item.key);
  1412.                 }
  1413.             }
  1414.         }
  1415.  
  1416.         async function addUnreadLine() {
  1417.             if (window.location.hash && window.location.hash.length > 1) {
  1418.                 return;
  1419.             }
  1420.  
  1421.             const savedData = await GM.getValue(
  1422.                 `8chanSS_scrollPosition_${currentPage}`,
  1423.                 null
  1424.             );
  1425.  
  1426.             if (savedData) {
  1427.                 let position;
  1428.                 try {
  1429.                     const data = JSON.parse(savedData);
  1430.                     position = data.position;
  1431.                     await GM.setValue(
  1432.                         `8chanSS_scrollPosition_${currentPage}`,
  1433.                         JSON.stringify({
  1434.                             position: position,
  1435.                             timestamp: Date.now(),
  1436.                         })
  1437.                     );
  1438.                 } catch (e) {
  1439.                     return;
  1440.                 }
  1441.  
  1442.                 if (!isNaN(position)) {
  1443.                     window.scrollTo(0, position);
  1444.                     setTimeout(addUnreadLineAtViewportCenter, 100);
  1445.                 }
  1446.             }
  1447.         }
  1448.         function addUnreadLineAtViewportCenter() {
  1449.             const divPosts = document.querySelector(".divPosts");
  1450.             if (!divPosts) return;
  1451.             const centerX = window.innerWidth / 2;
  1452.             const centerY = window.innerHeight / 2;
  1453.             let el = document.elementFromPoint(centerX, centerY);
  1454.             while (el && el !== divPosts && (!el.classList || !el.classList.contains("postCell"))) {
  1455.                 el = el.parentElement;
  1456.             }
  1457.             if (!el || el === divPosts || !el.id) return;
  1458.             if (el.parentElement !== divPosts) return;
  1459.             const oldMarker = document.getElementById("unread-line");
  1460.             if (oldMarker && oldMarker.parentNode) {
  1461.                 oldMarker.parentNode.removeChild(oldMarker);
  1462.             }
  1463.             const marker = document.createElement("hr");
  1464.             marker.id = "unread-line";
  1465.             if (el.nextSibling) {
  1466.                 divPosts.insertBefore(marker, el.nextSibling);
  1467.             } else {
  1468.                 divPosts.appendChild(marker);
  1469.             }
  1470.         }
  1471.         window.addEventListener("beforeunload", () => {
  1472.             saveScrollPosition();
  1473.         });
  1474.         window.addEventListener("load", async () => {
  1475.             await addUnreadLine();
  1476.         });
  1477.         await addUnreadLine();
  1478.     }
  1479.     featureSaveScroll();
  1480.     function featureDeleteNameCheckbox() {
  1481.         const checkbox = document.createElement("input");
  1482.         checkbox.type = "checkbox";
  1483.         checkbox.id = "saveNameCheckbox";
  1484.         checkbox.classList.add("postingCheckbox");
  1485.         const label = document.createElement("label");
  1486.         label.htmlFor = "saveNameCheckbox";
  1487.         label.textContent = "Delete Name";
  1488.         label.title = "Delete Name on refresh";
  1489.         const alwaysUseBypassCheckbox = document.getElementById("qralwaysUseBypassCheckBox");
  1490.         if (alwaysUseBypassCheckbox) {
  1491.             alwaysUseBypassCheckbox.parentNode.insertBefore(checkbox, alwaysUseBypassCheckbox);
  1492.             alwaysUseBypassCheckbox.parentNode.insertBefore(label, checkbox.nextSibling);
  1493.             const savedCheckboxState = localStorage.getItem("8chanSS_deleteNameCheckbox") === "true";
  1494.             checkbox.checked = savedCheckboxState;
  1495.  
  1496.             const nameInput = document.getElementById("qrname");
  1497.             if (nameInput) {
  1498.                 if (checkbox.checked) {
  1499.                     nameInput.value = "";
  1500.                     localStorage.removeItem("name");
  1501.                 }
  1502.                 checkbox.addEventListener("change", function () {
  1503.                     localStorage.setItem("8chanSS_deleteNameCheckbox", checkbox.checked);
  1504.                 });
  1505.             }
  1506.         }
  1507.     }
  1508.     function featureBeepOnYou() {
  1509.         const beep = new Audio(
  1510.             "data:audio/wav;base64,UklGRjQDAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAc21wbDwAAABBAAADAAAAAAAAAAA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkYXRhzAIAAGMms8em0tleMV4zIpLVo8nhfSlcPR102Ki+5JspVEkdVtKzs+K1NEhUIT7DwKrcy0g6WygsrM2k1NpiLl0zIY/WpMrjgCdbPhxw2Kq+5Z4qUkkdU9K1s+K5NkVTITzBwqnczko3WikrqM+l1NxlLF0zIIvXpsnjgydZPhxs2ay95aIrUEkdUdC3suK8N0NUIjq+xKrcz002WioppdGm091pK1w0IIjYp8jkhydXPxxq2K295aUrTkoeTs65suK+OUFUIzi7xqrb0VA0WSoootKm0t5tKlo1H4TYqMfkiydWQBxm16+85actTEseS8y7seHAPD9TIza5yKra01QyWSson9On0d5wKVk2H4DYqcfkjidUQB1j1rG75KsvSkseScu8seDCPz1TJDW2yara1FYxWSwnm9Sn0N9zKVg2H33ZqsXkkihSQR1g1bK65K0wSEsfR8i+seDEQTxUJTOzy6rY1VowWC0mmNWoz993KVc3H3rYq8TklSlRQh1d1LS647AyR0wgRMbAsN/GRDpTJTKwzKrX1l4vVy4lldWpzt97KVY4IXbUr8LZljVPRCxhw7W3z6ZISkw1VK+4sMWvXEhSPk6buay9sm5JVkZNiLWqtrJ+TldNTnquqbCwilZXU1BwpKirrpNgWFhTaZmnpquZbFlbVmWOpaOonHZcXlljhaGhpZ1+YWBdYn2cn6GdhmdhYGN3lp2enIttY2Jjco+bnJuOdGZlZXCImJqakHpoZ2Zug5WYmZJ/bGlobX6RlpeSg3BqaW16jZSVkoZ0bGtteImSk5KIeG5tbnaFkJKRinxxbm91gY2QkIt/c3BwdH6Kj4+LgnZxcXR8iI2OjIR5c3J0e4WLjYuFe3VzdHmCioyLhn52dHR5gIiKioeAeHV1eH+GiYqHgXp2dnh9hIiJh4J8eHd4fIKHiIeDfXl4eHyBhoeHhH96eHmA"
  1511.         );
  1512.         const originalTitle = document.title;
  1513.         let isNotifying = false;
  1514.         const observer = new MutationObserver((mutations) => {
  1515.             mutations.forEach((mutation) => {
  1516.                 mutation.addedNodes.forEach(async (node) => {
  1517.                     if (
  1518.                         node.nodeType === 1 &&
  1519.                         node.querySelector &&
  1520.                         node.querySelector("a.quoteLink.you")
  1521.                     ) {
  1522.                         if (await getSetting("beepOnYou")) {
  1523.                             playBeep();
  1524.                         }
  1525.                         if (await getSetting("notifyOnYou")) {
  1526.                             featureNotifyOnYou();
  1527.                         }
  1528.                     }
  1529.                 });
  1530.             });
  1531.         });
  1532.  
  1533.         observer.observe(document.body, { childList: true, subtree: true });
  1534.         function playBeep() {
  1535.             if (beep.paused) {
  1536.                 beep.play().catch((e) => console.warn("Beep failed:", e));
  1537.             } else {
  1538.                 beep.addEventListener("ended", () => beep.play(), { once: true });
  1539.             }
  1540.         }
  1541.         function featureNotifyOnYou() {
  1542.             if (!window.originalTitle) {
  1543.                 window.originalTitle = document.title;
  1544.             }
  1545.             if (!window.isNotifying && !document.hasFocus()) {
  1546.                 window.isNotifying = true;
  1547.                 document.title = "(!) " + window.originalTitle;
  1548.                 if (!window.notifyFocusListenerAdded) {
  1549.                     window.addEventListener("focus", () => {
  1550.                         if (window.isNotifying) {
  1551.                             document.title = window.originalTitle;
  1552.                             window.isNotifying = false;
  1553.                         }
  1554.                     });
  1555.                     window.notifyFocusListenerAdded = true;
  1556.                 }
  1557.             }
  1558.         }
  1559.         function addNotificationToTitle() {
  1560.             if (!isNotifying && !document.hasFocus()) {
  1561.                 isNotifying = true;
  1562.                 document.title = "(!) " + originalTitle;
  1563.             }
  1564.         }
  1565.         window.addEventListener("focus", () => {
  1566.             if (isNotifying) {
  1567.                 document.title = originalTitle;
  1568.                 isNotifying = false;
  1569.             }
  1570.         });
  1571.     }
  1572.  
  1573.     if (await getSetting("enableScrollSave")) {
  1574.         featureSaveScroll();
  1575.     }
  1576.     if (await getSetting("watchThreadOnReply")) {
  1577.         featureWatchThreadOnReply();
  1578.     }
  1579.     if (await getSetting("blurSpoilers")) {
  1580.         featureBlurSpoilers();
  1581.     }
  1582.     if (await getSetting("enableHeaderCatalogLinks")) {
  1583.         featureHeaderCatalogLinks();
  1584.     }
  1585.     if (await getSetting("deleteSavedName")) {
  1586.         featureDeleteNameCheckbox();
  1587.     }
  1588.     if (await getSetting("enableScrollArrows")) {
  1589.         featureScrollArrows();
  1590.     }
  1591.     if ((await getSetting("beepOnYou")) || (await getSetting("notifyOnYou"))) {
  1592.         featureBeepOnYou();
  1593.     }
  1594.     if (await getSetting("alwaysShowTW")) {
  1595.         featureAlwaysShowTW();
  1596.     }
  1597.     const isCatalogPage = /\/catalog\.html$/.test(
  1598.         window.location.pathname.toLowerCase()
  1599.     );
  1600.     if (
  1601.         (isCatalogPage && (await getSetting("enableCatalogImageHover"))) ||
  1602.         (!isCatalogPage && (await getSetting("enableThreadImageHover")))
  1603.     ) {
  1604.         featureImageHover();
  1605.     }
  1606.     document.addEventListener("keydown", async function (event) {
  1607.         if (event.ctrlKey && event.key === "F1") {
  1608.             event.preventDefault();
  1609.             let menu =
  1610.                 document.getElementById("8chanSS-menu") ||
  1611.                 (await createSettingsMenu());
  1612.             menu.style.display =
  1613.                 menu.style.display === "none" || menu.style.display === ""
  1614.                     ? "block"
  1615.                     : "none";
  1616.         }
  1617.     });
  1618.     async function submitWithCtrlEnter(event) {
  1619.         if (event.ctrlKey && event.key === "Enter") {
  1620.             event.preventDefault();
  1621.             const submitButton = document.getElementById("qrbutton");
  1622.             if (submitButton) {
  1623.                 submitButton.click();
  1624.                 if (await getSetting("watchThreadOnReply")) {
  1625.                     setTimeout(() => {
  1626.                         const btn = document.querySelector(".watchButton");
  1627.                         if (btn && !btn.classList.contains("watched-active")) {
  1628.                             btn.click();
  1629.                             setTimeout(() => {
  1630.                                 btn.classList.add("watched-active");
  1631.                             }, 100);
  1632.                         }
  1633.                     }, 500);
  1634.                 }
  1635.             }
  1636.         }
  1637.     }
  1638.     const replyTextarea = document.getElementById("qrbody");
  1639.     if (replyTextarea) {
  1640.         replyTextarea.addEventListener("keydown", submitWithCtrlEnter);
  1641.     }
  1642.     function toggleQR(event) {
  1643.         if (event.ctrlKey && (event.key === "q" || event.key === "Q")) {
  1644.             const hiddenDiv = document.getElementById("quick-reply");
  1645.             if (
  1646.                 hiddenDiv.style.display === "none" ||
  1647.                 hiddenDiv.style.display === ""
  1648.             ) {
  1649.                 hiddenDiv.style.display = "block"; 
  1650.                 setTimeout(() => {
  1651.                     const textarea = document.getElementById("qrbody");
  1652.                     if (textarea) {
  1653.                         textarea.focus();
  1654.                     }
  1655.                 }, 50);
  1656.             } else {
  1657.                 hiddenDiv.style.display = "none"; 
  1658.             }
  1659.         }
  1660.     }
  1661.     document.addEventListener("keydown", toggleQR);
  1662.     function clearTextarea(event) {
  1663.         if (event.key === "Escape") {
  1664.             const textarea = document.getElementById("qrbody");
  1665.             if (textarea) {
  1666.                 textarea.value = ""; 
  1667.             }
  1668.             const quickReply = document.getElementById("quick-reply");
  1669.             if (quickReply) {
  1670.                 quickReply.style.display = "none"; 
  1671.             }
  1672.         }
  1673.     }
  1674.     document.addEventListener("keydown", clearTextarea);
  1675.     const bbCodeCombinations = new Map([
  1676.         ["s", ["[spoiler]", "[/spoiler]"]],
  1677.         ["b", ["'''", "'''"]],
  1678.         ["u", ["__", "__"]],
  1679.         ["i", ["''", "''"]],
  1680.         ["d", ["[doom]", "[/doom]"]],
  1681.         ["m", ["[moe]", "[/moe]"]],
  1682.         ["c", ["[code]", "[/code]"]],
  1683.     ]);
  1684.  
  1685.     function replyKeyboardShortcuts(ev) {
  1686.         const key = ev.key.toLowerCase();
  1687.         if (
  1688.             key === "c" &&
  1689.             ev.altKey &&
  1690.             !ev.ctrlKey &&
  1691.             bbCodeCombinations.has(key)
  1692.         ) {
  1693.             ev.preventDefault();
  1694.             const textBox = ev.target;
  1695.             const [openTag, closeTag] = bbCodeCombinations.get(key);
  1696.             const { selectionStart, selectionEnd, value } = textBox;
  1697.             if (selectionStart === selectionEnd) {
  1698.                 const before = value.slice(0, selectionStart);
  1699.                 const after = value.slice(selectionEnd);
  1700.                 const newCursor = selectionStart + openTag.length;
  1701.                 textBox.value = before + openTag + closeTag + after;
  1702.                 textBox.selectionStart = textBox.selectionEnd = newCursor;
  1703.             } else {
  1704.                 const before = value.slice(0, selectionStart);
  1705.                 const selected = value.slice(selectionStart, selectionEnd);
  1706.                 const after = value.slice(selectionEnd);
  1707.                 textBox.value = before + openTag + selected + closeTag + after;
  1708.                 textBox.selectionStart = selectionStart + openTag.length;
  1709.                 textBox.selectionEnd = selectionEnd + openTag.length;
  1710.             }
  1711.             return;
  1712.         }
  1713.         if (
  1714.             ev.ctrlKey &&
  1715.             !ev.altKey &&
  1716.             bbCodeCombinations.has(key) &&
  1717.             key !== "c"
  1718.         ) {
  1719.             ev.preventDefault();
  1720.             const textBox = ev.target;
  1721.             const [openTag, closeTag] = bbCodeCombinations.get(key);
  1722.             const { selectionStart, selectionEnd, value } = textBox;
  1723.             if (selectionStart === selectionEnd) {
  1724.                 const before = value.slice(0, selectionStart);
  1725.                 const after = value.slice(selectionEnd);
  1726.                 const newCursor = selectionStart + openTag.length;
  1727.                 textBox.value = before + openTag + closeTag + after;
  1728.                 textBox.selectionStart = textBox.selectionEnd = newCursor;
  1729.             } else {
  1730.                 const before = value.slice(0, selectionStart);
  1731.                 const selected = value.slice(selectionStart, selectionEnd);
  1732.                 const after = value.slice(selectionEnd);
  1733.                 textBox.value = before + openTag + selected + closeTag + after;
  1734.                 textBox.selectionStart = selectionStart + openTag.length;
  1735.                 textBox.selectionEnd = selectionEnd + openTag.length;
  1736.             }
  1737.             return;
  1738.         }
  1739.     }
  1740.     document
  1741.         .getElementById("qrbody")
  1742.         ?.addEventListener("keydown", replyKeyboardShortcuts);
  1743. });