Redmine

// Redmine History Timeline Navigator — Quick Jump (v1.9.10)

// - Panel docks left/right via CONFIG.SIDE

// - Separate bottom offsets for Quick Jump trigger vs. panel

// - Minimal custom styling to blend with page theme

// - Configurable pill border-radius (CONFIG.PILL_RADIUS)

// - Configurable highlight colors via CONFIG.HIGHLIGHT_COLOR / HIGHLIGHT_SOFT_COLOR

// - All UI text configurable via CONFIG.TEXT (except console output)

// - Configurable z-index base via CONFIG.ZINDEX_BASE (all layers offset from this)

// - Panel width/height fixed via CONFIG.PANEL_WIDTH / CONFIG.PANEL_HEIGHT

// - Preview opens to the opposite side of the panel (left when panel is on the right)

// - Panel & preview & slider thumb reuse nearest non-transparent background color

// - No visual highlight on first init (only internal mark)

// - Preview de-dup (no heading if missing/duplicated)

// - Pills: overflow-x:hidden + ellipsis, always stacked (no spreading)

// - "Only notes" hides journals with only .has-details (no .has-notes) and hidden journals

// - "Only jump to long notes" uses CONFIG.LONG_NOTES_CHARACTER_THRESHOLD

// - Slider & counter respect filters (including "no results" → 0/0)

// - No "bounce" when scrolling active pill into view

(function () {

  const CONFIG = {

    PANEL_WIDTH: 280,

    PANEL_HEIGHT: 380,

    // 'left' | 'right'

    SIDE: 'left',

    // Horizontal offset from chosen side

    SIDE_OFFSET: 6,

    // Bottom offsets

    BOTTOM_OFFSET_QUICK: 60,  // Quick Jump button / hover zone

    BOTTOM_OFFSET_PANEL: 60,  // Panel

    // Pill appearance

    PILL_RADIUS: 999,         // px, e.g. 999 for capsule, 6 for rounded

    // Threshold for "long notes" (characters)

    LONG_NOTES_CHARACTER_THRESHOLD: 500,

    NOTE_TARGET_PAD: 80,

    PREVIEW_MAX_CHARS: 220,

    PREVIEW_IMG_MAX_W: 160,

    PREVIEW_IMG_MAX_H: 100,

    // Highlight colors

    HIGHLIGHT_COLOR: 'rgba(37,99,235,0.85)',

    HIGHLIGHT_SOFT_COLOR: 'rgba(37,99,235,0.6)',

    HIGHLIGHT_FADE_MS: 700,

    // Base z-index (all other layers are relative to this)

    // hoverzone:      ZINDEX_BASE

    // launcher:       ZINDEX_BASE + 1

    // panel:          ZINDEX_BASE + 2

    // preview-popup:  ZINDEX_BASE + 3

    // hint-tooltip:   ZINDEX_BASE + 4

    ZINDEX_BASE: 9990,

    // All user-visible text (except console)

    TEXT: {

      LAUNCHER_LABEL: 'Quick jump',

      PANEL_TITLE: 'History timeline',

      CLOSE_LABEL: 'Close',

      CLOSE_TITLE: 'Close',

      PREV_BUTTON: '⟨',

      PREV_TITLE: 'Previous (p/k)',

      NEXT_BUTTON: '⟩',

      NEXT_TITLE: 'Next (n/j)',

      EDGE_OLDEST: 'Oldest',

      EDGE_NEWEST: 'Newest',

      ONLY_NOTES_LABEL: 'Only notes',

      ONLY_NOTES_TITLE: 'Checked = show only journals with notes (has-notes) and ignore hidden journals. Unchecked = include all entries.',

      ONLY_LONG_LABEL: 'Only jump to long notes',

      FILTER_PLACEHOLDER: 'Filter: author, date or #',

      PILLS_ARIA_LABEL: 'Quick jump',

      HELP_HTML: 'Keyboard shortcuts:<br><b>n/j</b> next, <b>p/k</b> previous, <b>g</b> go to #',

      NO_RESULTS: 'No results match the filter.',

      PROMPT_GOTO: 'Go to comment # (e.g. 10):',

      ALERT_GOTO_NOT_FOUND_PREFIX: 'Could not find #',

      HINT_JUMP_PREFIX: 'Jump to '

    }

  };

  const HISTORY_SEL = '#tab-content-history';

  // const NOTE_SEL = '.note[id^="note-"]';  // Redmine 6

  const NOTE_SEL = 'div[id^="note-"]';       // older Redmine

  const JOURNAL_SEL = '.journal';

  const PANEL_ID = 'qj-history-timeline-panel';

  const STYLE_ID = PANEL_ID + '-style';

  const LAUNCH_ID = 'qj-history-launcher';

  const HOVERZONE_ID = 'qj-history-hoverzone';

  const PREVIEW_ID = 'qj-history-preview';

  const HINT_ID = 'qj-history-hint';

  const NOTE_HL_CLASS = 'qj-note-highlight';

  if (window.__QJ_HistoryTimeline?.destroy) {

    try { window.__QJ_HistoryTimeline.destroy(); } catch (e) {}

  }

  function ready(fn) {

    if (document.readyState === 'complete' || document.readyState === 'interactive') {

      setTimeout(fn, 0);

    } else {

      document.addEventListener('DOMContentLoaded', fn, { once: true });

    }

  }

  ready(bootstrap);

  let retryTimer = null;

  function bootstrap() {

    const tryInit = () => {

      const historyRoot = document.querySelector(HISTORY_SEL);

      if (!historyRoot) return false;

      init(historyRoot);

      return true;

    };

    if (!tryInit()) {

      let tries = 0;

      retryTimer = setInterval(() => {

        tries++;

        if (tryInit() || tries > 50) { clearInterval(retryTimer); retryTimer = null; }

      }, 200);

    }

  }

  // Find closest non-transparent background color starting from a given element.

  function findEffectiveBackgroundColor(rootEl) {

    const isTransparent = (bg) => {

      if (!bg) return true;

      bg = bg.trim().toLowerCase();

      if (bg === 'transparent') return true;

      return /^rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)$/.test(bg);

    };

    let el = rootEl;

    while (el) {

      const cs = window.getComputedStyle(el);

      const bg = cs && cs.backgroundColor;

      if (!isTransparent(bg)) return bg;

      el = el.parentElement;

    }

    const htmlBg = window.getComputedStyle(document.documentElement).backgroundColor;

    if (!isTransparent(htmlBg)) return htmlBg;

    const bodyBg = window.getComputedStyle(document.body).backgroundColor;

    if (!isTransparent(bodyBg)) return bodyBg;

    return '#ffffff';

  }

  function init(historyRoot) {

    [PANEL_ID, STYLE_ID, LAUNCH_ID, HOVERZONE_ID, PREVIEW_ID, HINT_ID].forEach(id => document.getElementById(id)?.remove());

    document.querySelectorAll('.' + NOTE_HL_CLASS).forEach(el => el.classList.remove(NOTE_HL_CLASS));

    const esc = (s) => (s || '').replace(/[&<>"]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[m]));

    const by = (sel, root = document) => root.querySelector(sel);

    function jumpTo(el) {

      if (!el) return;

      const journal = el.closest(JOURNAL_SEL);

      if (journal && journal.style && journal.style.display === 'none') journal.style.display = '';

      const rect = el.getBoundingClientRect();

      const y = window.scrollY + rect.top - CONFIG.NOTE_TARGET_PAD;

      window.scrollTo({ top: Math.max(0, y), behavior: 'smooth' });

      highlight(el);

      setActiveIndex(indexOf(el));

    }

    const HIGHLIGHT_RING = '0 0 0 2px ' + CONFIG.HIGHLIGHT_COLOR;

    function highlight(el, silent = false) {

      document.querySelectorAll('.' + NOTE_HL_CLASS).forEach(e => e.classList.remove(NOTE_HL_CLASS));

      if (silent) return;

      el.classList.add(NOTE_HL_CLASS);

      el.style.transition = 'box-shadow 0.6s ease';

      el.style.boxShadow = HIGHLIGHT_RING;

      setTimeout(() => {

        el.style.boxShadow = '0 0 0 0 transparent';

      }, CONFIG.HIGHLIGHT_FADE_MS);

    }

    function extractWhenFromHeader(header) {

      if (!header) return '';

      const links = Array.from(header.querySelectorAll('a[title]'));

      const dateLike = links.find(a => /\d{4}-\d{2}-\d{2}/.test(a.getAttribute('title') || ''));

      if (dateLike) return dateLike.getAttribute('title') || dateLike.textContent.trim();

      const act = links.find(a => /activity\?from=/.test(a.getAttribute('href') || ''));

      if (act) return act.getAttribute('title') || act.textContent.trim();

      const last = links[links.length - 1];

      return last ? (last.getAttribute('title') || last.textContent.trim()) : '';

    }

    function getSummaryAndBody(wikiEl) {

      const firstHeading = wikiEl.querySelector('h1,h2,h3,h4,h5,h6');

      const headingText = firstHeading?.innerText?.trim() || '';

      let bodyText = (wikiEl.innerText || '').replace(/\s+/g, ' ').trim();

      const norm = s => (s || '').toLowerCase().replace(/[\s\p{P}\p{S}]+/gu, ' ').trim();

      if (headingText && norm(bodyText).startsWith(norm(headingText))) {

        const idx = bodyText.toLowerCase().indexOf(headingText.toLowerCase());

        if (idx === 0) bodyText = bodyText.slice(headingText.length).trim();

      }

      const showTitle = !!headingText && !norm(bodyText.slice(0, 100)).includes(norm(headingText));

      const summary = showTitle ? headingText : '';

      return { summary, bodyText };

    }

    const collectNotes = (excludeHiddenJournals, onlyNotesFlag) => {

      const notes = Array.from(historyRoot.querySelectorAll(NOTE_SEL))

        .filter(n => {

          const j = n.closest(JOURNAL_SEL);

          // Hide hidden journals if requested

          if (excludeHiddenJournals && j && j.style && j.style.display === 'none') {

            return false;

          }

          // If we only want "real notes":

          // skip journals that are only .has-details and NOT .has-notes

          if (onlyNotesFlag && j) {

            const jc = j.classList;

            if (jc.contains('has-details') && !jc.contains('has-notes')) {

              return false;

            }

          }

          return true;

        })

        .sort((a, b) => {

          const an = parseInt(a.id.replace('note-', ''), 10);

          const bn = parseInt(b.id.replace('note-', ''), 10);

          if (!isNaN(an) && !isNaN(bn)) return an - bn;

          return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;

        });

      return notes.map((note, i) => {

        const num = parseInt(note.id.replace('note-', ''), 10);

        const journal = note.closest(JOURNAL_SEL);

        const header = note.querySelector('.note-header') || journal?.querySelector('.note-header');

        const author = header?.querySelector('a.user')?.textContent?.trim() || 'Unknown';

        const linkTxt = journal?.querySelector('.journal-link')?.textContent?.trim() || ('#' + (isNaN(num) ? (i + 1) : num));

        const when = extractWhenFromHeader(header);

        const wiki = note.querySelector('.wiki') || note;

        const { summary, bodyText } = getSummaryAndBody(wiki);

        const imgSrc = (wiki.querySelector('img')?.getAttribute('src')) || null;

        return { el: note, num, author, linkTxt, when, textLen: bodyText.length, imgSrc, summary, fullText: bodyText };

      });

    };

    let excludeHidden = true;

    let onlyNotes = true;

    let notes = collectNotes(excludeHidden, onlyNotes);

    if (!notes.length) { console.warn('QuickJump: No notes found.'); return; }

    const indexOf = (el) => notes.findIndex(n => n.el === el);

    let activeIndex = 0;

    const bottomQuick = CONFIG.BOTTOM_OFFSET_QUICK ?? CONFIG.BOTTOM_OFFSET ?? 60;

    const bottomPanel = CONFIG.BOTTOM_OFFSET_PANEL ?? CONFIG.BOTTOM_OFFSET ?? bottomQuick;

    const sideOffset = CONFIG.SIDE_OFFSET ?? 6;

    const side = (CONFIG.SIDE === 'right') ? 'right' : 'left';

    const zBase = CONFIG.ZINDEX_BASE ?? 9990;

    const zHover = zBase;

    const zLaunch = zBase + 1;

    const zPanel = zBase + 2;

    const zPreview = zBase + 3;

    const zHint = zBase + 4;

    const css = document.createElement('style');

    css.id = STYLE_ID;

    css.textContent = `

      :root {

        --qj-width: ${CONFIG.PANEL_WIDTH}px;

        --qj-height: ${CONFIG.PANEL_HEIGHT}px;

        --qj-bottom-quick: ${bottomQuick}px;

        --qj-bottom-panel: ${bottomPanel}px;

        --qj-side-offset: ${sideOffset}px;

        --qj-bg: #ffffff;

        --qj-highlight: ${CONFIG.HIGHLIGHT_COLOR};

        --qj-highlight-soft: ${CONFIG.HIGHLIGHT_SOFT_COLOR};

      }

      #${HOVERZONE_ID} {

        position: fixed;

        left: 50%;

        transform: translateX(-50%);

        bottom: var(--qj-bottom-quick);

        width: 360px;

        height: 42px;

        z-index: ${zHover};

      }

      #${LAUNCH_ID} {

        position: fixed;

        left: 50%;

        transform: translateX(-50%);

        bottom: calc(var(--qj-bottom-quick) - 10px);

        z-index: ${zLaunch};

        opacity: 0;

        transition: opacity .2s ease, transform .2s ease;

        cursor: pointer;

        padding: 4px 10px;

        font-size: 0.95em;

        white-space: nowrap;

      }

      #${HOVERZONE_ID}:hover + #${LAUNCH_ID},

      #${LAUNCH_ID}:hover {

        opacity: 1;

        transform: translateX(-50%) translateY(-2px);

      }

      #${PANEL_ID} {

        position: fixed;

        width: var(--qj-width);

        height: var(--qj-height);

        bottom: calc(var(--qj-bottom-panel) + 14px);

        max-width: calc(100vw - 24px);

        border: 1px solid rgba(0,0,0,0.12);

        border-radius: 10px;

        box-shadow: 0 8px 24px rgba(0,0,0,0.15);

        overflow: hidden;

        user-select: none;

        z-index: ${zPanel};

        opacity: 0;

        pointer-events: none;

        transition: transform .2s ease, opacity .2s ease;

        background-color: var(--qj-bg);

        display: flex;

        flex-direction: column;

      }

      #${PANEL_ID}.side-left {

        left: var(--qj-side-offset);

        right: auto;

        transform: translate(-120%, 0);

      }

      #${PANEL_ID}.side-right {

        right: var(--qj-side-offset);

        left: auto;

        transform: translate(120%, 0);

      }

      #${PANEL_ID}.open {

        transform: translate(0, 0);

        opacity: 1;

        pointer-events: auto;

      }

      #${PANEL_ID} .qj-hdr {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 6px 10px;

        border-bottom: 1px solid rgba(0,0,0,0.08);

        font-size: 0.95em;

      }

      #${PANEL_ID} .qj-title {

        font-weight: 600;

      }

      #${PANEL_ID} .qj-counter {

        opacity: 0.8;

        font-variant-numeric: tabular-nums;

      }

      #${PANEL_ID} .qj-close {

        font-size: 0.9em;

        padding: 2px 6px;

        cursor: pointer;

      }

      #${PANEL_ID} .qj-controls {

        display: grid;

        grid-template-columns: auto 1fr auto;

        gap: 6px;

        align-items: center;

        padding: 6px 10px;

        font-size: 0.95em;

      }

      #${PANEL_ID} .qj-btn {

        cursor: pointer;

        padding: 2px 6px;

        font-size: 0.95em;

      }

      #${PANEL_ID} .qj-slider-wrap {

        display: flex;

        align-items: center;

        gap: 6px;

      }

      #${PANEL_ID} .qj-edge {

        font-size: 0.85em;

        opacity: 0.8;

        user-select: none;

      }

      #${PANEL_ID} .qj-slider {

        -webkit-appearance: none;

        appearance: none;

        width: 100%;

        height: 16px;

        background: transparent;

      }

      #${PANEL_ID} .qj-slider::-webkit-slider-runnable-track {

        height: 3px;

        background: rgba(0,0,0,0.12);

        border-radius: 999px;

      }

      #${PANEL_ID} .qj-slider::-moz-range-track {

        height: 3px;

        background: rgba(0,0,0,0.12);

        border-radius: 999px;

      }

      #${PANEL_ID} .qj-slider::-webkit-slider-thumb {

        -webkit-appearance: none;

        width: 12px;

        height: 12px;

        border-radius: 50%;

        border: 1px solid rgba(0,0,0,0.3);

        margin-top: -5px;

        background-color: var(--qj-bg);

      }

      #${PANEL_ID} .qj-slider::-moz-range-thumb {

        width: 12px;

        height: 12px;

        border-radius: 50%;

        border: 1px solid rgba(0,0,0,0.3);

        background-color: var(--qj-bg);

      }

      #${PANEL_ID} .qj-toggles {

        display: flex;

        gap: 8px;

        align-items: center;

        padding: 0 10px 6px 10px;

        flex-wrap: wrap;

        font-size: 0.95em;

      }

      #${PANEL_ID} .qj-toggles label {

        display: flex;

        gap: 4px;

        align-items: center;

      }

      #${PANEL_ID} .qj-filter {

        flex: 1;

        min-width: 120px;

        padding: 2px 6px;

        font-size: 0.95em;

      }

      #${PANEL_ID} .qj-pills {

        display: flex;

        flex-wrap: wrap;

        justify-content: flex-start;

        align-content: flex-start;

        gap: 4px;

        padding: 0 10px 8px 10px;

        overflow-y: auto;

        overflow-x: hidden;

        flex: 1 1 auto;

      }

      #${PANEL_ID} .qj-pill {

        font-size: 0.9em;

        padding: 2px 8px;

        border-radius: ${CONFIG.PILL_RADIUS}px;

        cursor: pointer;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        border: 1px solid rgba(0,0,0,0.18);

      }

      #${PANEL_ID} .qj-pill.active {

        outline: 1px solid var(--qj-highlight-soft);

        outline-offset: 0;

      }

      #${PANEL_ID} .qj-help {

        font-size: 0.85em;

        opacity: 0.8;

        padding: 0 10px 8px 10px;

      }

      .${NOTE_HL_CLASS} { border-radius: inherit !important; }

      .${NOTE_HL_CLASS}::before { border-color: var(--qj-highlight) !important; }

      #${PREVIEW_ID} {

        position: fixed;

        z-index: ${zPreview};

        pointer-events: none;

        max-width: 340px;

        border: 1px solid rgba(0,0,0,0.12);

        border-radius: 8px;

        box-shadow: 0 8px 24px rgba(0,0,0,0.18);

        padding: 6px;

        font-size: 0.85em;

        display: none;

        background-color: var(--qj-bg);

      }

      #${PREVIEW_ID} .ttl { font-weight: 600; margin-bottom: 4px; }

      #${PREVIEW_ID} .txt { line-height: 1.3; }

      #${PREVIEW_ID} .row {

        display: flex;

        gap: 6px;

        align-items: flex-start;

      }

      #${PREVIEW_ID} img {

        display: block;

        max-width: ${CONFIG.PREVIEW_IMG_MAX_W}px;

        max-height: ${CONFIG.PREVIEW_IMG_MAX_H}px;

        border-radius: 4px;

        border: 1px solid rgba(0,0,0,0.1);

      }

      #${HINT_ID} {

        position: fixed;

        z-index: ${zHint};

        pointer-events: none;

        background: #111;

        color: #fff;

        border-radius: 4px;

        padding: 2px 6px;

        font-size: 0.8em;

        box-shadow: 0 6px 18px rgba(0,0,0,0.2);

        display: none;

        white-space: nowrap;

      }

    `;

    document.head.appendChild(css);

    const hoverZone = document.createElement('div'); hoverZone.id = HOVERZONE_ID;

    const launcher = document.createElement('button'); launcher.id = LAUNCH_ID; launcher.textContent = CONFIG.TEXT.LAUNCHER_LABEL;

    document.body.appendChild(hoverZone); document.body.appendChild(launcher);

    const panel = document.createElement('div');

    panel.id = PANEL_ID;

    panel.className = (side === 'right') ? 'side-right' : 'side-left';

    panel.innerHTML = `

      <div class="qj-hdr">

        <span class="qj-title">${esc(CONFIG.TEXT.PANEL_TITLE)}</span>

        <span class="qj-counter"></span>

        <button class="qj-close" title="${esc(CONFIG.TEXT.CLOSE_TITLE)}">${esc(CONFIG.TEXT.CLOSE_LABEL)}</button>

      </div>

      <div class="qj-controls">

        <button class="qj-btn qj-prev" title="${esc(CONFIG.TEXT.PREV_TITLE)}">${esc(CONFIG.TEXT.PREV_BUTTON)}</button>

        <div class="qj-slider-wrap">

          <span class="qj-edge">${esc(CONFIG.TEXT.EDGE_OLDEST)}</span>

          <input type="range" class="qj-slider" min="0" value="0" step="1">

          <span class="qj-edge">${esc(CONFIG.TEXT.EDGE_NEWEST)}</span>

        </div>

        <button class="qj-btn qj-next" title="${esc(CONFIG.TEXT.NEXT_TITLE)}">${esc(CONFIG.TEXT.NEXT_BUTTON)}</button>

      </div>

      <div class="qj-toggles">

        <label title="${esc(CONFIG.TEXT.ONLY_NOTES_TITLE)}">

          <input type="checkbox" class="qj-toggle-onlynotes" checked> ${esc(CONFIG.TEXT.ONLY_NOTES_LABEL)}

        </label>

        <label><input type="checkbox" class="qj-toggle-long"> ${esc(CONFIG.TEXT.ONLY_LONG_LABEL)}</label>

        <input type="text" class="qj-filter" placeholder="${esc(CONFIG.TEXT.FILTER_PLACEHOLDER)}">

      </div>

      <div class="qj-pills" role="listbox" aria-label="${esc(CONFIG.TEXT.PILLS_ARIA_LABEL)}"></div>

      <div class="qj-help">${CONFIG.TEXT.HELP_HTML}</div>

    `;

    document.body.appendChild(panel);

    const preview = document.createElement('div'); preview.id = PREVIEW_ID; document.body.appendChild(preview);

    const hint = document.createElement('div'); hint.id = HINT_ID; document.body.appendChild(hint);

    // Apply effective background color from nearest ancestor to CSS variable

    const baseBg = findEffectiveBackgroundColor(historyRoot);

    document.documentElement.style.setProperty('--qj-bg', baseBg);

    const slider = by('.qj-slider', panel);

    const btnPrev = by('.qj-prev', panel);

    const btnNext = by('.qj-next', panel);

    const counter = by('.qj-counter', panel);

    const pills = by('.qj-pills', panel);

    const closeBtn = by('.qj-close', panel);

    const toggleOnlyNotes = by('.qj-toggle-onlynotes', panel);

    const toggleLong = by('.qj-toggle-long', panel);

    const filterInput = by('.qj-filter', panel);

    let filteredIdxList = [];

    let pillEls = [];

    function formatLabel(n) {

      const when = n.when ? n.when.replace(/\s+/g, ' ').trim() : '—';

      const numTxt = isNaN(n.num) ? n.linkTxt : `#${n.num}`;

      return `${numTxt} · ${when} · ${n.author}`;

    }

    function buildPreviewHTML(n) {

      const useTitle = !!n.summary;

      const ttl = useTitle ? esc(n.summary) : '';

      const text = esc(n.fullText.slice(0, CONFIG.PREVIEW_MAX_CHARS));

      const textHTML = `<div class="txt">${text}${n.fullText.length > CONFIG.PREVIEW_MAX_CHARS ? '…' : ''}</div>`;

      return n.imgSrc

        ? `<div class="row"><img src="${n.imgSrc}"><div style="flex:1 1 auto;">${useTitle ? `<div class="ttl">${ttl}</div>` : ''}${textHTML}</div></div>`

        : `${useTitle ? `<div class="ttl">${ttl}</div>` : ''}${textHTML}`;

    }

    function showHint(e, text) {

      hint.textContent = text;

      hint.style.display = 'block';

      const rectW = hint.offsetWidth || 120;

      const x = Math.min(window.innerWidth - rectW - 8, Math.max(8, e.clientX - rectW / 2));

      const y = Math.max(8, e.clientY - 26);

      hint.style.left = `${x}px`;

      hint.style.top = `${y}px`;

    }

    function hideHint() { hint.style.display = 'none'; }

    function attachPillPreview(pill, n) {

      pill.removeAttribute('title');

      pill.addEventListener('mouseenter', (e) => {

        preview.innerHTML = buildPreviewHTML(n);

        preview.style.display = 'block';

        movePreview(e);

        const label = `${CONFIG.TEXT.HINT_JUMP_PREFIX}${isNaN(n.num) ? n.linkTxt : ('#' + n.num)}`;

        showHint(e, label);

      });

      pill.addEventListener('mousemove', (e) => { movePreview(e); showHint(e, hint.textContent); });

      pill.addEventListener('mouseleave', () => { preview.style.display = 'none'; hideHint(); });

      function movePreview(e) {

        const pad = 12;

        const vw = window.innerWidth, vh = window.innerHeight;

        const rectW = preview.offsetWidth || 320;

        const rectH = preview.offsetHeight || 140;

        let x;

        let y = e.clientY + pad;

        if (side === 'right') {

          x = e.clientX - pad - rectW;

        } else {

          x = e.clientX + pad;

        }

        if (x < 8) x = 8;

        if (x + rectW + 8 > vw) x = vw - rectW - 8;

        if (y + rectH + 8 > vh) y = vh - rectH - 8;

        if (y < 8) y = 8;

        preview.style.left = `${x}px`;

        preview.style.top = `${y}px`;

      }

    }

    function rebuildPills() {

      pills.innerHTML = '';

      pillEls = [];

      const term = filterInput.value.trim().toLowerCase();

      const useFilter = !!term;

      filteredIdxList = [];

      notes.forEach((n, idx) => {

        if (toggleLong.checked && n.textLen < CONFIG.LONG_NOTES_CHARACTER_THRESHOLD) return;

        if (useFilter) {

          const hay = `${n.author} ${n.num} ${n.linkTxt} ${n.when}`.toLowerCase();

          if (!hay.includes(term)) return;

        }

        filteredIdxList.push(idx);

        const pill = document.createElement('button');

        pill.className = 'qj-pill';

        pill.setAttribute('role', 'option');

        pill.textContent = formatLabel(n);

        pill.addEventListener('click', () => { setActiveIndex(idx); jumpTo(n.el); });

        attachPillPreview(pill, n);

        pills.appendChild(pill);

        pillEls[idx] = pill;

      });

      if (!filteredIdxList.length) {

        const none = document.createElement('div');

        none.style.opacity = '0.7';

        none.style.fontSize = '0.9em';

        none.textContent = CONFIG.TEXT.NO_RESULTS;

        pills.appendChild(none);

      }

      setActiveIndex(Math.min(activeIndex, notes.length - 1));

    }

    // Returns the current "active" index list (filtered or full)

    function getActiveIndexList() {

      const hasFilter =

        toggleLong.checked || (filterInput.value.trim().length > 0);

      if (!hasFilter) {

        return notes.map((_, i) => i);

      }

      if (filteredIdxList && filteredIdxList.length) {

        return filteredIdxList.slice();

      }

      return [];

    }

    function ensureActivePillVisible() {

      const pill = pillEls[activeIndex];

      if (!pill) return;

      pill.classList.add('active');

      pillEls.forEach((p, i) => { if (p && i !== activeIndex) p.classList.remove('active'); });

      pillEls.forEach((p, i) => p && p.setAttribute('aria-selected', i === activeIndex ? 'true' : 'false'));

      if (pill.scrollIntoView) {

        pill.scrollIntoView({ block: 'nearest', inline: 'nearest' });

      } else {

        const c = pills, pTop = pill.offsetTop, pBottom = pTop + pill.offsetHeight + 4;

        if (pTop < c.scrollTop) c.scrollTop = pTop - 4;

        else if (pBottom > c.scrollTop + c.clientHeight) c.scrollTop = pBottom - c.clientHeight;

      }

    }

    function setActiveIndex(noteIdx) {

      if (!notes.length) return;

      const maxIdx = notes.length - 1;

      activeIndex = Math.max(0, Math.min(maxIdx, noteIdx));

      const activeList = getActiveIndexList();

      if (!activeList.length) {

        slider.max = '0';

        slider.value = '0';

        counter.textContent = `0/0`;

        return;

      }

      let logicalIndex = activeList.indexOf(activeIndex);

      if (logicalIndex === -1) {

        let nearest = activeList[0];

        let best = Math.abs(nearest - activeIndex);

        for (const idx of activeList) {

          const d = Math.abs(idx - activeIndex);

          if (d < best) { best = d; nearest = idx; }

        }

        activeIndex = nearest;

        logicalIndex = activeList.indexOf(activeIndex);

      }

      slider.max = String(Math.max(0, activeList.length - 1));

      slider.value = String(Math.max(0, logicalIndex));

      counter.textContent = `${logicalIndex + 1}/${activeList.length}`;

      ensureActivePillVisible();

    }

    function rebuildAll() {

      notes = collectNotes(excludeHidden, onlyNotes);

      rebuildPills();

    }

    function move(delta) {

      const activeList = getActiveIndexList();

      if (!activeList.length) return;

      const currPos = activeIndex === -1 ? -1 : activeList.indexOf(activeIndex);

      const currentLogical = currPos === -1 ? 0 : currPos;

      const nextPos = Math.max(0, Math.min(activeList.length - 1, currentLogical + delta));

      const nextIdx = activeList[nextPos];

      setActiveIndex(nextIdx);

      const n = notes[activeIndex];

      if (n) jumpTo(n.el);

    }

    const sliderInput = () => {

      const activeList = getActiveIndexList();

      if (!activeList.length) return;

      const logical = Math.max(0, Math.min(activeList.length - 1, parseInt(slider.value, 10) || 0));

      const idx = activeList[logical];

      setActiveIndex(idx);

    };

    slider.addEventListener('input', sliderInput);

    slider.addEventListener('change', () => {

      const n = notes[activeIndex];

      if (n) jumpTo(n.el);

    });

    btnPrev.addEventListener('click', () => move(-1));

    btnNext.addEventListener('click', () => move(1));

    toggleOnlyNotes.addEventListener('change', () => {

      onlyNotes = toggleOnlyNotes.checked;

      excludeHidden = toggleOnlyNotes.checked; // "Only notes" also ignores hidden journals

      rebuildAll();

    });

    toggleLong.addEventListener('change', rebuildPills);

    filterInput.addEventListener('input', rebuildPills);

    closeBtn.addEventListener('click', () => panel.classList.remove('open'));

    const launcherClick = () => {

      panel.classList.toggle('open');

      if (panel.classList.contains('open')) selectClosest(false);

    };

    launcher.addEventListener('click', launcherClick);

    const onKey = (e) => {

      if (!panel.classList.contains('open')) return;

      const tag = (e.target.tagName || '').toLowerCase();

      const isTyping = (tag === 'input' || tag === 'textarea' || tag === 'select');

      if (isTyping && e.target !== filterInput) return;

      if (e.key === 'j' || e.key === 'n') { e.preventDefault(); move(1); }

      else if (e.key === 'k' || e.key === 'p') { e.preventDefault(); move(-1); }

      else if (e.key.toLowerCase() === 'g') {

        e.preventDefault();

        const s = prompt(CONFIG.TEXT.PROMPT_GOTO); if (!s) return;

        const targetNum = parseInt(s, 10); if (isNaN(targetNum)) return;

        const idx = notes.findIndex(n => n.num === targetNum);

        if (idx >= 0) { setActiveIndex(idx); jumpTo(notes[idx].el); }

        else alert(CONFIG.TEXT.ALERT_GOTO_NOT_FOUND_PREFIX + targetNum);

      }

    };

    window.addEventListener('keydown', onKey);

    function selectClosest(suppressHighlight = false) {

      const viewportMid = window.scrollY + window.innerHeight / 2;

      let bestIdx = 0, bestDist = Infinity;

      notes.forEach((n, i) => {

        const rect = n.el.getBoundingClientRect();

        const y = window.scrollY + rect.top;

        const d = Math.abs(y - viewportMid);

        if (d < bestDist) { bestDist = d; bestIdx = i; }

      });

      setActiveIndex(bestIdx);

      highlight(notes[bestIdx].el, suppressHighlight);

    }

    rebuildAll();

    selectClosest(true);

    const mo = new MutationObserver(() => {

      clearTimeout(mo._t);

      mo._t = setTimeout(() => {

        const now = collectNotes(excludeHidden, onlyNotes);

        const beforeIds = notes.map(n => n.el.id).join(',');

        const afterIds = now.map(n => n.el.id).join(',');

        if (beforeIds !== afterIds) { notes = now; rebuildPills(); }

      }, 200);

    });

    mo.observe(historyRoot, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });

    window.__QJ_HistoryTimeline = {

      refresh: rebuildAll,

      open: () => panel.classList.add('open'),

      close: () => panel.classList.remove('open'),

      setWidth: (px) => {

        document.documentElement.style.setProperty('--qj-width', px + 'px');

      },

      setHeight: (px) => {

        document.documentElement.style.setProperty('--qj-height', px + 'px');

      },

      setLeft: (px) => {

        document.documentElement.style.setProperty('--qj-side-offset', px + 'px');

      },

      setBottom: (px) => {

        document.documentElement.style.setProperty('--qj-bottom-quick', px + 'px');

        document.documentElement.style.setProperty('--qj-bottom-panel', px + 'px');

      },

      setBottomQuick: (px) => {

        document.documentElement.style.setProperty('--qj-bottom-quick', px + 'px');

      },

      setBottomPanel: (px) => {

        document.documentElement.style.setProperty('--qj-bottom-panel', px + 'px');

      },

      setSide: (sideVal) => {

        const isRight = (String(sideVal).toLowerCase() === 'right');

        panel.classList.toggle('side-right', isRight);

        panel.classList.toggle('side-left', !isRight);

      },

      setPillRadius: (px) => {

        const styleEl = document.getElementById(STYLE_ID);

        if (!styleEl) return;

        styleEl.textContent = styleEl.textContent.replace(

          /border-radius:\s*\d+px;(?=.*\.qj-pill)/,

          `border-radius: ${px}px;`

        );

      },

      destroy: () => {

        mo.disconnect();

        [panel, launcher, hoverZone, css, preview, hint].forEach(el => el?.remove());

        window.removeEventListener('keydown', onKey);

      }

    };

  }

})();