☰

Traderie Tools

A browsing companion for traderie.com with bookmarking, adblock, and Diablo 2 price history

// ==UserScript==
// Filename: traderie-tools.user.js
// ==UserScript==
// @name         Traderie Tools
// @namespace    http://tampermonkey.net/
// @version      2025-05v2
// @description  A browsing companion for traderie.com with bookmarking, adblock, and Diablo 2 price history
// @match        *://*.traderie.com/*
// @grant        GM_xmlhttpRequest
// @connect      raw.githubusercontent.com
// @license MIT
// ==/UserScript==

(function() {
  'use strict';

  /**********************
   * Traderie Adblocker *
   **********************/
  const STORAGE_KEY = 'traderie-adblock-groups';
  const ENABLED_KEY = 'traderie-adblock-enabled';
  let adBlockObserver = null;

  const SELECTOR_GROUPS = {
    google: ['.GoogleActiveViewElement', '[id^="google_ads_iframe"]', 'iframe[src*="googlesyndication"]', 'iframe[src*="2mdn"]'],
    generic: ['[id*="anchor"]', '[id*="ad_unit"]', '[data-ad^="leaderboard-"]', 'div[data-ad="left-rail-3"]'],
    video: ['iframe[src*="anyclip"]', 'video[id^="ac-lre-vjs-"]', '.ac-player-wrapper'],
    styled: ['div.sc-gfoqjT.gXykUj', 'div[class*="gfoqjT"]', 'div.ns-08pl9-l-square-gmb', 'div.sc-eyvILC.pvcVG', '.sc-kbousE.dRxaoW', 'div.sc-bpUBKd.jVYraK.cool-slot'],
    tracking: ['script[src*="doubleverify"]'],
    misc: ['a[href="/akrewpro"]', 'span[style*="justify-content: space-between"]', 'svg[style*="left: 160px"]', 'svg[style*="right: 160px"]', 'div.container > div.banner-slider']
  };
  const DEFAULT_ENABLED_GROUPS = Object.keys(SELECTOR_GROUPS);
  const CRITICAL_SELECTORS = ['html', 'head', 'body', 'main', 'nav', '[class*="app"]', '[class*="root"]', '[class*="page"]', '[class*="content"]', '[class*="listing"]', '[class*="trade"]', '[class*="navigation"]', '[class*="header"]', '[class*="menu"]', '[class*="sidebar"]'];
  const BLOCKLIST_EXCEPTIONS = ['.listing-row', '.listing-wrapper', '.listing-container', '#listing-root', '[class*="listing"]', '.sc-etKGGb'];

  function isAdblockEnabled() {
    return localStorage.getItem(ENABLED_KEY) !== 'false';
  }

  function setAdblockEnabled(val) {
    localStorage.setItem(ENABLED_KEY, val ? 'true' : 'false');
  }

  function getEnabledGroups() {
    const stored = localStorage.getItem(STORAGE_KEY);
    return stored ? JSON.parse(stored) : DEFAULT_ENABLED_GROUPS;
  }

  function getActiveSelectors() {
    return getEnabledGroups().flatMap(group => SELECTOR_GROUPS[group] || []);
  }

  function injectAdBlockCSS() {
    const style = document.createElement('style');
    style.id = 'traderie-instant-adblock';
    style.textContent = getActiveSelectors().map(sel => `${sel} { display: none !important; }`).join('\n');
    document.head?.appendChild(style);
  }

  function isCriticalElement(el) {
    if (!el || !el.matches) return true;
    try {
      return CRITICAL_SELECTORS.some(sel => el.matches(sel));
    } catch {
      return true;
    }
  }

  function removeEmptyAncestors(el) {
    let parent = el?.parentNode;
    while (parent && parent !== document.body) {
      if (parent.children.length === 0 && parent.textContent.trim() === '') {
        const next = parent.parentNode;
        parent.remove();
        parent = next;
      } else {
        break;
      }
    }
  }

  function safeRemoveStyled(el) {
    if (!el || !el.parentNode) return false;
    const container = el.closest('[class*="ad"], [id*="ad"], [data-ad]') || el;
    if (BLOCKLIST_EXCEPTIONS.some(skip => container.matches?.(skip))) return false;
    if (isCriticalElement(container)) return false;
    try {
      container.remove();
      removeEmptyAncestors(container);
      return true;
    } catch {
      return false;
    }
  }

  function removeAdsFromContainer(container = document.body) {
    const selectors = getActiveSelectors();
    selectors.forEach(selector => {
      try {
        container.querySelectorAll(selector).forEach(el => {
          safeRemoveStyled(el);
        });
      } catch {}
    });

    container.querySelectorAll('div.sc-gfoqjT.gXykUj').forEach(el => {
      if (el.textContent?.trim() === 'Traderie is supported by ads') {
        const wrapper = el.closest('.sc-eqUAAy.sc-eyvILC');
        if (wrapper && !isCriticalElement(wrapper)) {
          wrapper.remove();
        }
      }
    });
  }

  function performInitialCleanup() {
    setTimeout(() => removeAdsFromContainer(), 500);
    setTimeout(() => removeAdsFromContainer(), 1000);
    setTimeout(() => removeAdsFromContainer(), 1500);
  }

  function startAdblockObserver() {
    adBlockObserver = new MutationObserver(mutations => {
      mutations.forEach(m => {
        m.addedNodes.forEach(n => {
          if (n.nodeType === 1) {
            if (getActiveSelectors().some(sel => n.matches?.(sel))) {
              safeRemoveStyled(n);
            } else {
              removeAdsFromContainer(n);
            }
          }
        });
      });
    });
    adBlockObserver.observe(document.body, { childList: true, subtree: true });
  }

  function initAdblocker() {
    injectAdBlockCSS();
    performInitialCleanup();
    setTimeout(startAdblockObserver, 200);
    setInterval(() => removeAdsFromContainer(), 5000);
  }

  function disableAdblocker() {
    document.getElementById('traderie-instant-adblock')?.remove();
    adBlockObserver?.disconnect();
  }

  window.traderieAdblock = {
    enable: () => { setAdblockEnabled(true); initAdblocker(); },
    disable: () => { setAdblockEnabled(false); disableAdblocker(); },
    isEnabled: isAdblockEnabled
  };

  /*******************************
   * Rune Pricing Functionality *
   *******************************/
  const PRICE_URL = 'https://raw.githubusercontent.com/wguDataNinja/TraderieTools/main/rune_prices.json';
  const RUNE_ENABLED_KEY = 'traderie-rune-pricing-enabled';

  let runePrices = null;
  let runeObserver = null;

  function isRunePricingEnabled() {
    return localStorage.getItem(RUNE_ENABLED_KEY) === 'true';
  }

  function setRunePricingEnabled(val) {
    localStorage.setItem(RUNE_ENABLED_KEY, val ? 'true' : 'false');
  }

  function getServerSlug() {
    const p = new URLSearchParams(window.location.search);
    const plat = (p.get('prop_Platform') || 'pc').toLowerCase();
    const mode = p.get('prop_Mode') === 'hardcore' ? 'hc' : 'sc';
    const lad = p.get('prop_Ladder') === 'true' ? 'l' : 'nl';
    return `${plat}_${mode}_${lad}`;
  }

  function parseRune(el) {
    if (!el) return null;
    const c = el.cloneNode(true);
    Array.from(c.children).forEach(ch => c.removeChild(ch));
    const m = c.textContent.trim().match(/(\d+)\s*[xX]\s*(.+)/);
    return m ? { quantity: +m[1], item: m[2].trim() } : null;
  }

  function parseAskGroups(container) {
    const lines = [...container.querySelectorAll('.price-line, .tooltiptext .price-line')];
    const groups = []; let curr = [];
    lines.forEach((ln, i) => {
      const txt = ln.textContent.trim().toUpperCase();
      const or = txt === 'OR';
      const items = [...ln.querySelectorAll('a')].map(parseRune).filter(Boolean);
      if (items.length) curr.push(...items);
      if (or || (i + 1 < lines.length && lines[i + 1].textContent.trim().toUpperCase() === 'OR')) {
        if (curr.length) { groups.push({ items: curr, element: ln }); curr = []; }
      }
    });
    if (curr.length) groups.push({ items: curr, element: lines[lines.length - 1] });
    return groups;
  }

  function buildTooltipText(offer, asks, prices, slug) {
    const val = r => prices[slug]?.[r.item]?.ist_value ?? null;
    const oVal = val(offer); if (oVal == null) return '';
    const askLines = asks.map(r => {
      const v = val(r);
      return `${r.quantity} x ${r.item} (${v != null ? (r.quantity * v).toFixed(2) : '--'} Ist)`;
    });
    const total = asks.every(r => val(r) != null) ? asks.reduce((s, r) => s + r.quantity * val(r), 0).toFixed(2) : '--';
    return `Offer: ${offer.quantity} x ${offer.item} (${(offer.quantity * oVal).toFixed(2)} Ist)\n` +
      `Ask: ${askLines.join(' + ')}${total !== '--' ? ` = ${total} Ist` : ''}`;
  }

  function showTooltip(el, txt) {
    let tip = document.getElementById('rune-tooltip');
    if (!tip) { tip = document.createElement('div'); tip.id = 'rune-tooltip'; document.body.appendChild(tip); }
    tip.textContent = txt; tip.style.display = 'block';
    const r = el.getBoundingClientRect(), w = tip.offsetWidth;
    tip.style.top = `${window.scrollY + r.top}px`;
    tip.style.left = `${window.scrollX + r.left - w - 10}px`;
  }

  function hideTooltip() { const t = document.getElementById('rune-tooltip'); if (t) t.style.display = 'none'; }

  function injectPercentAndTooltip(off, group, prices, slug) {
    const container = group.element.querySelector('div:first-child');
    if (!container || container.querySelector('.percent-injected')) return;
    const getVal = r => prices[slug]?.[r.item]?.ist_value ?? null;
    const oV = getVal(off); if (oV == null) return;
    container.style.position = 'relative';
    const allAsk = group.items.every(r => getVal(r) != null);
    const span = document.createElement('span');
    span.className = 'percent-injected';
    span.style.left = '-60px';
    span.textContent = allAsk
      ? (() => {
        const askTotal = group.items.reduce((s, r) => s + r.quantity * getVal(r), 0);
        const diff = ((off.quantity * oV - askTotal) / (off.quantity * oV)) * 100;
        return `${diff >= 0 ? '+' : ''}${Math.round(diff)}%`;
      })()
      : '(--)';
    span.style.color = allAsk
      ? (off.quantity * oV - group.items.reduce((s, r) => s + r.quantity * getVal(r), 0) >= 0
        ? 'rgb(0,200,0)' : 'rgb(220,80,80)')
      : 'gray';
    container.appendChild(span);
    const tipText = buildTooltipText(off, group.items, prices, slug);
    span.addEventListener('mouseenter', () => showTooltip(span, tipText));
    span.addEventListener('mouseleave', hideTooltip);
  }

  function injectAll(prices) {
    const slug = getServerSlug();
    document.querySelectorAll('a.listing-name.selling-listing:not([data-injected])').forEach(a => {
      a.setAttribute('data-injected', 'true');
      const cnt = a.closest('div[class*="sc-eqUAAy"]');
      if (!cnt) return;
      const off = parseRune(a);
      if (!off || prices[slug]?.[off.item]?.ist_value == null) return;
      parseAskGroups(cnt).forEach(g => injectPercentAndTooltip(off, g, prices, slug));
    });
  }

  function fetchRunePrices(cb) {
    GM_xmlhttpRequest({
      method: 'GET',
      url: PRICE_URL,
      onload(resp) {
        try {
          cb(JSON.parse(resp.responseText));
        } catch (e) {
          console.error('Failed to parse rune prices', e);
        }
      },
      onerror(err) {
        console.error('Failed to fetch rune prices', err);
      }
    });
  }

  function setupRuneObserver() {
    if (runeObserver) runeObserver.disconnect();
    runeObserver = new MutationObserver(() => {
      if (isRunePricingEnabled() && runePrices) {
        injectAll(runePrices);
      }
    });
    runeObserver.observe(document.body, { childList: true, subtree: true });
    if (isRunePricingEnabled() && runePrices) {
      if (document.readyState !== 'loading') {
        injectAll(runePrices);
      } else {
        document.addEventListener('DOMContentLoaded', () => injectAll(runePrices));
      }
    }
  }

  function startRunePricing() {
    setRunePricingEnabled(true);
    if (!runePrices) {
      fetchRunePrices(prices => {
        runePrices = prices;
        setupRuneObserver();
      });
    } else {
      setupRuneObserver();
    }
  }

  function stopRunePricing() {
    setRunePricingEnabled(false);
    runeObserver?.disconnect();
    runeObserver = null;
    document.querySelectorAll('.percent-injected').forEach(e => e.remove());
    document.querySelectorAll('[data-injected]').forEach(e => e.removeAttribute('data-injected'));
    hideTooltip();
  }

  /***********************
   * UI & Bookmarking   *
   ***********************/
  const font = document.createElement('link');
  font.href = 'https://fonts.googleapis.com/css2?family=Alegreya+Sans&display=swap';
  font.rel = 'stylesheet';
  document.head.appendChild(font);

  const style = document.createElement('style');
  style.textContent = `
    .traderie-tools {
      position: fixed;
      top: 120px;
      left: 20px;
      width: 300px;
      background: #202224;
      color: #e4e6eb;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      font-family: 'Alegreya Sans', sans-serif;
      z-index: 9999;
      resize: both;
      overflow: auto;
    }
    .tools-header {
      background: #2a2b2e;
      padding: 10px 14px;
      border-radius: 20px 20px 0 0;
      cursor: move;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 17px;
      font-weight: bold;
      user-select: none;
    }
    .tools-toggle {
      cursor: pointer;
      background: none !important;
      border: none;
      color: inherit;
      font-size: 18px;
    }
    .tools-toggle:hover {
      background: none !important;
    }
    .tools-content {
      padding: 12px 14px;
      display: none;
    }
    .tools-content.show {
      display: block;
    }
    .tab-buttons {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }
    .tab-buttons button {
      flex: 1;
      padding: 6px;
      border: none;
      border-radius: 12px;
      background: #2f3135;
      color: #e4e6eb;
      cursor: pointer;
      font-family: inherit;
    }
    .tab-buttons button.active {
      background: #444;
      font-weight: bold;
    }
    .tab-pane {
      display: none;
    }
    .tab-pane.active {
      display: block;
    }
    .tools-options {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      margin-bottom: 12px !important;
      align-items: flex-start !important;
    }
    .tools-options label {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      width: auto !important;
      text-align: left !important;
      font-size: 14px;
      margin: 0 !important;
      padding: 0 !important;
    }
    .tools-options input[type="checkbox"] {
      margin: 0 !important;
      padding: 0 !important;
      flex: 0 0 auto !important;
      width: auto !important;
    }
    .bookmark-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      margin-bottom: 6px;
      font-weight: normal;
      font-size: 14px;
    }
    .bookmark-header .arrow {
      transition: transform 0.2s ease;
    }
    .bookmark-header.expanded .arrow {
      transform: rotate(0deg);
    }
    .bookmark-header.collapsed .arrow {
      transform: rotate(-90deg);
    }
    .bookmark-section {
      display: none;
      flex-direction: column;
      gap: 6px;
      margin-left: 10px;
    }
    .bookmark-label {
      font-weight: bold;
      margin-top: 10px;
      margin-left: 10px;
    }
    .bookmark-item {
      display: flex;
      align-items: center;
      background: #2f3135;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 14px;
      justify-content: space-between;
    }
    .bookmark-item span.text {
      flex-grow: 1;
      cursor: pointer;
      margin-right: 10px;
    }
    .edit-btn, .delete-btn {
      color: #fff;
      font-size: 13px;
      margin-left: 6px;
      cursor: pointer;
    }
    .delete-btn {
      font-weight: bold;
    }
    .bookmark-edit-input {
      width: 100%;
      padding: 2px 6px;
      background: #444;
      color: #fff;
      border: none;
      border-radius: 4px;
    }
    .bookmark-name-input {
      width: 100%;
      padding: 6px;
      border-radius: 6px;
      background: #333;
      color: #fff;
      border: none;
      margin-bottom: 8px;
      display: none;
    }
    #rune-tooltip {
      position: absolute;
      background: #222;
      color: #fff;
      padding: 6px;
      border-radius: 4px;
      font-size: 12px;
      white-space: pre;
      z-index: 9999;
      max-width: 300px;
      display: none;
    }
    .percent-injected {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      text-align: right;
      font-size: 14px;
      font-family: 'Alegreya Sans', sans-serif;
      white-space: nowrap;
    }
    .traderie-tools.collapsed {
      height: auto !important;
      overflow: hidden !important;
      resize: none !important;
    }

    .traderie-tools.collapsed .tools-content {
      display: none !important;
    }
  `;
  document.head.appendChild(style);

  const STORAGE_KEY_OPEN = 'traderieAppOpen';
  const STORAGE_BOOKMARKS = 'traderieBookmarks';
  const STORAGE_SIZE = 'traderieAppSize';
  const STORAGE_POSITION = 'traderieAppPosition';
  const STORAGE_BOOKMARKS_OPEN = 'traderieBookmarksOpen';

  const panel = document.createElement('div');
  panel.className = 'traderie-tools';
  panel.innerHTML = `
    <div class="tools-header" id="dragHandle">
      <span>🔖 Traderie Tools</span>
      <button class="tools-toggle" id="expandBtn">➕</button>
    </div>
    <div class="tools-content" id="panelContent">
      <div class="tab-buttons">
        <button class="tab-btn active" data-tab="mainTab">Bookmarks</button>
        <button class="tab-btn" data-tab="optionsTab">Options</button>
      </div>
      <div id="mainTab" class="tab-pane active">
        <div class="bookmark-header collapsed" id="bookmarkToggle">
          <span>
            <svg class="arrow" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em">
              <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
            </svg> Bookmarks
          </span>
          <button id="saveSearchBtn" style="background: none; border: none; color: #e4e6eb; font-size: 14px; cursor: pointer;">＋ Add to bookmarks</button>
        </div>
        <input id="bookmarkName" class="bookmark-name-input" placeholder="Name bookmark...">
        <div id="bookmarkSection" class="bookmark-section">
          <div class="bookmark-label">Listings</div>
          <div id="listingList"></div>
          <div class="bookmark-label">Searches</div>
          <div id="searchList"></div>
        </div>
      </div>
      <div id="optionsTab" class="tab-pane">
        <div class="tools-options">
          <label><input type="checkbox" id="cb1"> Remove Ads</label>
          <label><input type="checkbox" id="cb2"> Inject Rune Pricing</label>
        </div>
      </div>
    </div>
  `;
  document.body.appendChild(panel);

  const saveSize = () => {
    localStorage.setItem(STORAGE_SIZE, JSON.stringify({
      width: panel.style.width,
      height: panel.style.height
    }));
  };
  const loadSize = () => {
    const size = JSON.parse(localStorage.getItem(STORAGE_SIZE) || '{}');
    if (size.width) panel.style.width = size.width;
    if (size.height) panel.style.height = size.height;
  };

  const savePosition = () => {
    localStorage.setItem(STORAGE_POSITION, JSON.stringify({
      left: panel.style.left,
      top: panel.style.top
    }));
  };
  const loadPosition = () => {
    const pos = JSON.parse(localStorage.getItem(STORAGE_POSITION) || '{}');
    if (pos.left) panel.style.left = pos.left;
    if (pos.top) panel.style.top = pos.top;
  };

  const saveBookmarkToggle = (state) => {
    localStorage.setItem(STORAGE_BOOKMARKS_OPEN, JSON.stringify(state));
  };
  const loadBookmarkToggle = () => {
    return JSON.parse(localStorage.getItem(STORAGE_BOOKMARKS_OPEN) || 'false');
  };

  loadSize();
  loadPosition();

  const expandBtn = document.getElementById('expandBtn');
  const content = document.getElementById('panelContent');
  const saveState = () => localStorage.setItem(STORAGE_KEY_OPEN, content.classList.contains('show'));
  const loadState = () => localStorage.getItem(STORAGE_KEY_OPEN) === 'true';

  if (loadState()) {
    content.classList.add('show');
    expandBtn.textContent = '➖';
  }

    expandBtn.onclick = () => {
      const isCollapsed = panel.classList.toggle('collapsed');
      expandBtn.textContent = isCollapsed ? '➕' : '➖';
      saveState();
    };

  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.onclick = () => {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
      btn.classList.add('active');
      document.getElementById(btn.dataset.tab).classList.add('active');
    };
  });

  const bookmarkToggle = document.getElementById('bookmarkToggle');
  const bookmarkSection = document.getElementById('bookmarkSection');
  bookmarkToggle.addEventListener('click', () => {
    const expanded = bookmarkToggle.classList.toggle('expanded');
    bookmarkToggle.classList.toggle('collapsed', !expanded);
    bookmarkSection.style.display = expanded ? 'flex' : 'none';
    saveBookmarkToggle(expanded);
  });

  if (loadBookmarkToggle()) {
    bookmarkToggle.classList.add('expanded');
    bookmarkToggle.classList.remove('collapsed');
    bookmarkSection.style.display = 'flex';
  }

  const getBookmarks = () => JSON.parse(localStorage.getItem(STORAGE_BOOKMARKS) || '[]');
  const saveBookmarks = (bms) => localStorage.setItem(STORAGE_BOOKMARKS, JSON.stringify(bms));

  const createEditButton = (callback) => {
    const btn = document.createElement('span');
    btn.className = 'edit-btn';
    btn.textContent = '✎';
    btn.onclick = callback;
    return btn;
  };

  const createDeleteButton = (callback) => {
    const btn = document.createElement('span');
    btn.className = 'delete-btn';
    btn.textContent = '🗑';
    btn.onclick = callback;
    return btn;
  };

  const renderBookmarks = () => {
    const bookmarks = getBookmarks();
    const listings = bookmarks.filter(b => b.type === 'listing');
    const searches = bookmarks.filter(b => b.type === 'search');
    const listingList = document.getElementById('listingList');
    const searchList = document.getElementById('searchList');
    listingList.innerHTML = '';
    searchList.innerHTML = '';

    const makeItem = (b, idx, all) => {
      const item = document.createElement('div');
      item.className = 'bookmark-item';

      const text = document.createElement('span');
      text.className = 'text';
      text.textContent = b.name;
      text.onclick = () => window.location.href = b.url;

      const edit = createEditButton(() => {
        const input = document.createElement('input');
        input.className = 'bookmark-edit-input';
        input.value = b.name;
        input.onkeypress = (e) => {
          if (e.key === 'Enter') {
            all[idx].name = input.value.trim();
            saveBookmarks(all);
            renderBookmarks();
          }
        };
        item.innerHTML = '';
        item.appendChild(input);
        input.focus();
        input.select();
      });

      const del = createDeleteButton(() => {
        const index = all.findIndex(x => x.name === b.name && x.url === b.url && x.type === b.type);
        if (index !== -1) {
          all.splice(index, 1);
          saveBookmarks(all);
          renderBookmarks();
        }
      });

      item.appendChild(text);
      item.appendChild(edit);
      item.appendChild(del);
      return item;
    };

    listings.forEach((b, i) => listingList.appendChild(makeItem(b, i, bookmarks)));
    searches.forEach((b, i) => searchList.appendChild(makeItem(b, i + listings.length, bookmarks)));
  };

  renderBookmarks();

  const input = document.getElementById('bookmarkName');
  const saveSearchBtn = document.getElementById('saveSearchBtn');

  saveSearchBtn.onclick = () => {
    input.style.display = 'block';
    input.value = '';
    input.focus();
    input.select();
  };

  input.onkeypress = (e) => {
    if (e.key === 'Enter') {
      const name = input.value.trim();
      if (!name) return;
      const url = window.location.href;
      const isSearch = !url.includes('/listing');
      const bookmarks = getBookmarks();
      bookmarks.push({
        type: isSearch ? 'search' : 'listing',
        name,
        url
      });
      saveBookmarks(bookmarks);
      renderBookmarks();
      input.style.display = 'none';
      if (!bookmarkSection.style.display || bookmarkSection.style.display === 'none') {
        bookmarkToggle.classList.add('expanded');
        bookmarkToggle.classList.remove('collapsed');
        bookmarkSection.style.display = 'flex';
        saveBookmarkToggle(true);
      }
    }
  };

  // Adblock & Rune checkbox logic
  const adBox = document.getElementById('cb1');
  const runeBox = document.getElementById('cb2');

  adBox.checked = window.traderieAdblock.isEnabled();
  runeBox.checked = isRunePricingEnabled();

  if (adBox.checked) window.traderieAdblock.enable(); else window.traderieAdblock.disable();
  if (runeBox.checked) startRunePricing();

  adBox.addEventListener('change', () => {
    if (adBox.checked) window.traderieAdblock.enable(); else window.traderieAdblock.disable();
  });
  runeBox.addEventListener('change', () => {
    if (runeBox.checked) startRunePricing(); else stopRunePricing();
  });

  // Drag & resize persistence
  const dragHandle = document.getElementById('dragHandle');
  let isDragging = false, offsetX = 0, offsetY = 0;

  dragHandle.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - panel.offsetLeft;
    offsetY = e.clientY - panel.offsetTop;
    e.preventDefault();
  });

  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      panel.style.left = `${e.clientX - offsetX}px`;
      panel.style.top = `${e.clientY - offsetY}px`;
    }
  });

  document.addEventListener('mouseup', () => {
    if (isDragging) savePosition();
    isDragging = false;
  });

  panel.addEventListener('mouseup', saveSize);
})();