Код:

<script type="module">
/* ========================================
   🎨 CSS с регулируемыми параметрами
======================================== */
const style = document.createElement('style');
style.textContent = `
:root {
  --topiclist-count: 10;             
  --topiclist-session: 1;            
  --topiclist-touch-device: 0;       
  --topiclist-select-action: click;  
  --topiclist-template-click: "<img src='https://forumstatic.ru/files/001c/36/f3/86140.png' alt='Список тем' style='width:16px;height:16px;vertical-align:middle'>";  
}

.topicslist {
  position: absolute;
  background-color: #faf1ed;
  border: 1px solid rgba(0,0,0,.35);
  margin-top: 3px;
  padding: 10px;
  box-shadow: 0 4px 4px -2px rgba(0,0,0,.35);
  border-radius: 3px;
  max-width: 90vw;
  z-index: 110;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.topicslist.show { opacity: 1; }
.topicslist .sticky a { font-weight: bold; color: #f00; }
.topicslist .closed a { color: #a9a9a9; }
.topicslist .load { animation: slow-load-blink 2s ease-in-out infinite; }
.clickt { cursor: pointer; user-select: none; }
.clickt img { border: 0; line-height: 1; max-height: 16px; max-width: 16px; vertical-align: middle; }
@keyframes slow-load-blink{0%,100%{opacity:1}50%{opacity:.3}}
`;
document.head.appendChild(style);

/* ========================================
   ⚙️ Настройки из CSS
======================================== */
function getParams() {
  const root = getComputedStyle(document.documentElement);
  return {
    count: parseInt(root.getPropertyValue('--topiclist-count')) || 10,
    useSession: root.getPropertyValue('--topiclist-session').trim() === '1',
    touchDevice: root.getPropertyValue('--topiclist-touch-device').trim() === '1' || ('ontouchstart' in window || navigator.maxTouchPoints > 0),
    selectAction: root.getPropertyValue('--topiclist-select-action').trim() || 'click',
    templateClick: root.getPropertyValue('--topiclist-template-click').replace(/['"]/g,'') || ' >'
  };
}

/* ========================================
   🌐 Переводы
======================================== */
const lang = document.documentElement.lang === 'ru' ? 'ru' : 'en';
const translations = {
  en: { showTopics:"Show list of topics", loadTopics:"Loading topics...", noTopics:"No topics", errorLoad:"Error loading topics.<br>Refresh page."},
  ru: { showTopics:"Показать список тем", loadTopics:"Загружаю список...", noTopics:"Тем нет", errorLoad:"Ошибка при загрузке.<br>Обновите страницу."}
};

/* ========================================
   🏗 Загрузка и отображение тем
======================================== */
let currentForumId = null;
let closeTimeout = null;

async function loadTopics(container, forumId) {
  const params = getParams();
  const key = `fid${forumId}_storage`;
  const now = Date.now();

  if (params.useSession && sessionStorage.getItem(key)) {
    const cached = JSON.parse(sessionStorage.getItem(key));
    if (now - cached.timestamp < 600000) return renderTopics(container, cached.data);
    sessionStorage.removeItem(key);
  }

  try {
    const res = await fetch(`/api.php?method=topic.get&forum_id=${forumId}&sort_by=last_post&sort_dir=desc&sticky_first=1&limit=${params.count}`);
    const data = await res.json();
    if (data?.response?.length > 0) {
      const topics = data.response.map(t => ({
        subject: t.subject,
        url: `/viewtopic.php?id=${t.id}`,
        class: `tid${t.id}` + (t.sticky ? " sticky" : "") + (t.closed ? " closed" : "")
      }));
      renderTopics(container, topics);
      if (params.useSession) sessionStorage.setItem(key, JSON.stringify({ data: topics, timestamp: now }));
    } else renderMessage(container, translations[lang].noTopics);
  } catch (e) {
    renderMessage(container, translations[lang].errorLoad);
  }
}

function renderTopics(container, topics) {
  const ul = container.querySelector("ul");
  ul.innerHTML = "";
  topics.forEach(t => {
    const li = document.createElement("li");
    li.className = t.class;
    li.innerHTML = `<a href="${t.url}">${t.subject}</a>`;
    ul.appendChild(li);
  });
  container.classList.add('show'); // Плавное появление
}

function renderMessage(container, message) {
  const ul = container.querySelector("ul");
  ul.innerHTML = `<li>${message}</li>`;
  container.classList.add('show'); // Плавное появление
}

/* ========================================
   🎛 Показ блока тем
======================================== */
function showTopics(trigger) {
  const tr = trigger.closest("tr");
  const forumId = tr.id.match(/\d+/)[0];
  if (currentForumId === forumId && tr.querySelector(".topicslist")) return;

  document.querySelectorAll(".topicslist").forEach(el => el.remove());

  const header = tr.querySelector("h3");
  const box = document.createElement("div");
  box.className = "topicslist";
  box.innerHTML = `<ul><li class="load">${translations[lang].loadTopics}</li></ul>`;
  header.insertAdjacentElement("afterend", box);

  positionBox(trigger, box);
  loadTopics(box, forumId);
  currentForumId = forumId;

  if (getParams().selectAction === "hover" && !getParams().touchDevice) resetCloseTimeout(box);
}

function resetCloseTimeout(box) {
  clearTimeout(closeTimeout);
  closeTimeout = setTimeout(() => {
    box.remove();
    currentForumId = null;
  }, 2000);
}

/* ========================================
   📌 Позиционирование блока справа
======================================== */
function positionBox(button, box) {
  const rect = button.getBoundingClientRect();
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const scrollLeft = window.scrollX || document.documentElement.scrollLeft;

  box.style.position = 'absolute';
  box.style.left = `${rect.right + scrollLeft + 5}px`; // справа с отступом
  box.style.top = `${rect.top + scrollTop}px`;          // по верхнему краю кнопки

  const maxRight = window.innerWidth - 10;
  if (rect.right + 5 + box.offsetWidth > maxRight) {
    box.style.left = `${maxRight - box.offsetWidth}px`;
  }
}

/* ========================================
   🚀 Инициализация кнопок и слушателей
======================================== */
function initListeners() {
  document.querySelectorAll(".tclcon h3 a").forEach(a => {
    const btn = document.createElement("span");
    btn.className = "clickt";
    btn.title = translations[lang].showTopics;
    btn.innerHTML = getParams().templateClick; // ← картинка вместо стрелки
    a.insertAdjacentElement("afterend", btn);

    btn.addEventListener("click", e => {
      e.stopPropagation();
      const row = btn.closest("tr");
      const forumId = row.id.match(/\d+/)[0];
      const box = row.querySelector(".topicslist");

      if (currentForumId === forumId && box) { box.remove(); currentForumId = null; }
      else showTopics(btn);
    });
  });

  document.addEventListener("click", e => {
    if (!e.target.closest(".topicslist") && !e.target.closest(".clickt")) {
      document.querySelectorAll(".topicslist").forEach(el => el.remove());
      currentForumId = null;
    }
  });
}

document.addEventListener("DOMContentLoaded", initListeners);
</script>