Redmine

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

// - 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 / CONFIG.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

// - Highlight also styles the tab header, TITLE for "long notes"

// - Lazy Load override with progress indicator (OVERRIDE_DEFAULT_LAZY_LOAD / LOAD_*)

// - Loading indicator is embedded in header (no layout jump)

(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: 65,  // 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,

    // Lazy-load policy

    // false  = do nothing extra, respect Redmine's lazy load (default, unchanged behavior)

    // true = QuickJump will trigger loading more history in steps + show indicator

    OVERRIDE_DEFAULT_LAZY_LOAD: false,

    // How aggressively we click "show more" in steps

    // (per run of loadAllLazyHistory; set higher if you have LOTS of journals)

    LOAD_ALL_MAX_STEPS: 80,

    LOAD_ALL_STEP_DELAY_MS: 400,

    // 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',

      ONLY_LONG_TITLE: 'Checked = only jump to notes longer than {N} characters.',

      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 ',

      LOAD_LABEL: 'Reading history…',

      LOAD_DONE: 'History reading done.'

    }

  };

  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';

  const NOTE_HEADER_HL_CLASS = 'qj-note-header-highlight';

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

  // Clean up previous instance if present

  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) {

    // Remove any previous instances of our elements

    [PANEL_ID, STYLE_ID, LAUNCH_ID, HOVERZONE_ID, PREVIEW_ID, HINT_ID].forEach(id => {

      const el = document.getElementById(id);

      if (el) el.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);

    // ----------------------------------------------------

    // Lazy-scroll mot note (tar hänsyn till lazy load)

    // ----------------------------------------------------

    const LAZY_SCROLL_CHECK_DELAY_MS = 1000;  // ~1 sekund mellan varje koll

    const LAZY_SCROLL_MAX_ATTEMPTS = 15;      // max antal försök (~15 sek totalt)

    let lazyScrollJob = null;

    function cancelLazyScroll() {

      if (lazyScrollJob && lazyScrollJob.timer) {

        clearTimeout(lazyScrollJob.timer);

      }

      lazyScrollJob = null;

    }

    // Cancel auto-scroll if the user is actively scrolling (wheel/touch/scroll keys)

    const userOverrideScroll = () => {

      if (!lazyScrollJob) return;

      cancelLazyScroll();

    };

    const userScrollKeyHandler = (e) => {

      if (!lazyScrollJob) return;

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

      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;

      const scrollKeys = ['PageUp', 'PageDown', 'Home', 'End', 'ArrowUp', 'ArrowDown', ' '];

      if (scrollKeys.includes(e.key)) {

        cancelLazyScroll();

      }

    };

    window.addEventListener('wheel', userOverrideScroll, { passive: true });

    window.addEventListener('touchmove', userOverrideScroll, { passive: true });

    window.addEventListener('keydown', userScrollKeyHandler);

    function isNoteInTargetViewport(el) {

      if (!el) return false;

      const rect = el.getBoundingClientRect();

      const vh = window.innerHeight || document.documentElement.clientHeight;

      const targetTop = CONFIG.NOTE_TARGET_PAD;

      const topOk = rect.top >= targetTop - 5 && rect.top <= targetTop + 5;

      const bottomOk = rect.bottom <= vh - 8;

      return topOk && bottomOk;

    }

    function scrollNoteTowardsTarget(el, behavior) {

      if (!el) return;

      const rect = el.getBoundingClientRect();

      const targetTop = CONFIG.NOTE_TARGET_PAD;

      const delta = rect.top - targetTop;

      if (Math.abs(delta) < 3) return;

      window.scrollTo({

        top: window.scrollY + delta,

        behavior: behavior || 'auto'

      });

    }

    function highlight(el, silent = false) {

      // Remove any existing highlight classes

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

      document.querySelectorAll('.' + NOTE_HEADER_HL_CLASS).forEach(h => h.classList.remove(NOTE_HEADER_HL_CLASS));

      // Also clear any previous box-shadow so we don't stack effects

      document.querySelectorAll(NOTE_SEL).forEach(e => {

        e.style.boxShadow = 'none';

        e.style.transition = '';

      });

      if (silent) return;

      // Mark current note (for CSS hooks)

      el.classList.add(NOTE_HL_CLASS);

      // Add temporary highlight on the header "tab" of this note

      const header = el.querySelector('h4');

      if (header) {

        header.classList.add(NOTE_HEADER_HL_CLASS);

      }

      // Add a box-shadow ring around the whole note and fade it out

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

      el.style.boxShadow = HIGHLIGHT_RING;

      setTimeout(() => {

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

        if (header) {

          header.classList.remove(NOTE_HEADER_HL_CLASS);

        }

      }, CONFIG.HIGHLIGHT_FADE_MS);

    }

    function jumpTo(el) {

      if (!el) return;

      const journal = el.closest(JOURNAL_SEL);

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

        journal.style.display = '';

      }

      // Cancel any previous job

      cancelLazyScroll();

      const startIndex = indexOf(el);

      // First “rough” scroll

      scrollNoteTowardsTarget(el, 'smooth');

      lazyScrollJob = {

        el,

        attempts: 0,

        timer: null

      };

      const tick = () => {

        if (!lazyScrollJob || lazyScrollJob.el !== el) return;

        // Never force the user back if the panel is closed

        if (!panel.classList.contains('open')) {

          cancelLazyScroll();

          return;

        }

        lazyScrollJob.attempts++;

        if (isNoteInTargetViewport(el) || lazyScrollJob.attempts >= LAZY_SCROLL_MAX_ATTEMPTS) {

          const idxNow = indexOf(el);

          if (idxNow >= 0) {

            setActiveIndex(idxNow);

          } else if (startIndex >= 0) {

            setActiveIndex(startIndex);

          }

          highlight(el);

          cancelLazyScroll();

          return;

        }

        // Redmine may have lazy-loaded more → adjust again

        scrollNoteTowardsTarget(el, 'smooth');

        lazyScrollJob.timer = setTimeout(tick, LAZY_SCROLL_CHECK_DELAY_MS);

      };

      lazyScrollJob.timer = setTimeout(tick, LAZY_SCROLL_CHECK_DELAY_MS);

    }

    // ----------------------------------------------------

    // Lazy-load handling (show more / load all history)

    // ----------------------------------------------------

    function findLazyLoadTrigger() {

      const selectors = [

        'a.show_more',

        'a[data-remote="true"].show-more',

        'a[data-remote="true"].load-more-journals',

        'a[href*="last_journal_id"]'

      ];

      for (const sel of selectors) {

        const link = historyRoot.querySelector(sel);

        if (link && link.offsetParent !== null) {

          return link;

        }

      }

      return null;

    }

    let historyFullyLoaded = false;

    let loadIndicator = null;

    let loadProgress = null;

    let loadLabelEl = null;

    function setLoadIndicator(active, text) {

      if (!loadIndicator) return;

      if (text && loadProgress) {

        loadProgress.textContent = text;

      } else if (loadProgress && !text) {

        loadProgress.textContent = '';

      }

      if (active) {

        loadIndicator.classList.add('active');

      } else {

        loadIndicator.classList.remove('active');

        // Rensa text när vi inte är aktiva för att inte visa "gammal" info

        if (loadLabelEl) loadLabelEl.textContent = '';

        if (loadProgress) loadProgress.textContent = '';

      }

    }

    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 = [];

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

    let activeIndex = 0;

    function loadAllLazyHistory(onDone) {

      // If we should respect lazy load → do nothing extra

      if (CONFIG.OVERRIDE_DEFAULT_LAZY_LOAD) {

        if (onDone) onDone();

        return;

      }

      if (historyFullyLoaded) {

        if (onDone) onDone();

        return;

      }

      const maxSteps = CONFIG.LOAD_ALL_MAX_STEPS || 80;

      const delay = CONFIG.LOAD_ALL_STEP_DELAY_MS || 400;

      let steps = 0;

      let lastCount = collectNotes(excludeHidden, onlyNotes).length;

      if (loadLabelEl) {

        loadLabelEl.textContent = CONFIG.TEXT.LOAD_LABEL || 'Reading history…';

      }

      setLoadIndicator(true, `${lastCount} noter`);

      const step = () => {

        const link = findLazyLoadTrigger();

        // CASE 1: no links left → we are truly done

        if (!link) {

          historyFullyLoaded = true;

          rebuildAll();

          if (loadLabelEl) {

            loadLabelEl.textContent = CONFIG.TEXT.LOAD_DONE || 'History reading done..';

          }

          setTimeout(() => setLoadIndicator(false), 800);

          if (onDone) onDone();

          return;

        }

		// CASE 2: we reached the max steps but there is still a link

		// → we stop, but do NOT mark historyFullyLoaded (a new run can continue)

        if (steps >= maxSteps) {

          console.warn('QuickJump: reached LOAD_ALL_MAX_STEPS, more history may remain. Increase CONFIG.LOAD_ALL_MAX_STEPS if needed.');

          rebuildAll();

          if (loadLabelEl) {

            loadLabelEl.textContent = CONFIG.TEXT.LOAD_DONE || 'History reading done..';

          }

          setTimeout(() => setLoadIndicator(false), 800);

          if (onDone) onDone();

          return;

        }

        steps++;

        try {

          link.click();

        } catch (e) {

          console.warn('QuickJump: lazy-load click error', e);

          // Don't know if everything is loaded → do NOT set historyFullyLoaded

          rebuildAll();

          if (loadLabelEl) {

            loadLabelEl.textContent = CONFIG.TEXT.LOAD_DONE || 'History reading done..';

          }

          setTimeout(() => setLoadIndicator(false), 800);

          if (onDone) onDone();

          return;

        }

        setTimeout(() => {

          const currCount = collectNotes(excludeHidden, onlyNotes).length;

          const diff = currCount - lastCount;

          lastCount = currCount;

          if (loadProgress) {

            // We don't know the total count, but we show how many notes we have so far

            loadProgress.textContent = `${currCount} noter${diff > 0 ? ` (+${diff})` : ''}`;

          }

          step();

        }, delay);

      };

      step();

    }

    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: flex-start;

        justify-content: space-between;

        padding: 6px 10px 4px 10px;

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

        font-size: 0.95em;

      }

      #${PANEL_ID} .qj-hdr-main {

        display: flex;

        flex-direction: column;

        gap: 1px;

      }

      #${PANEL_ID} .qj-title {

        font-weight: 600;

        line-height: 1.2;

      }

      #${PANEL_ID} .qj-load-indicator {

        font-size: 0.5em;

        opacity: 0;

        transition: opacity .18s ease;

        min-height: 0.6em;

      }

      #${PANEL_ID} .qj-load-indicator.active {

        opacity: 0.85;

      }

      #${PANEL_ID} .qj-load-indicator .qj-load-progress {

        margin-left: 4px;

        font-variant-numeric: tabular-nums;

      }

      #${PANEL_ID} .qj-counter {

        opacity: 0.8;

        font-variant-numeric: tabular-nums;

        margin-right: 4px;

        margin-top: 2px;

      }

      #${PANEL_ID} .qj-close {

        font-size: 0.9em;

        padding: 2px 6px;

        cursor: pointer;

        margin-top: 0;

      }

      #${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_HEADER_HL_CLASS}::before {

        border-right-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';

    const longTitle = (CONFIG.TEXT.ONLY_LONG_TITLE || '').replace('{N}', CONFIG.LONG_NOTES_CHARACTER_THRESHOLD);

    panel.innerHTML = `

      <div class="qj-hdr">

        <div class="qj-hdr-main">

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

          <div class="qj-load-indicator">

            <span class="qj-load-label">${esc(CONFIG.TEXT.LOAD_LABEL)}</span>

            <span class="qj-load-progress"></span>

          </div>

        </div>

        <div style="display:flex;align-items:flex-start;gap:6px;">

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

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

        </div>

      </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 title="${esc(longTitle)}">

          <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);

    // Initialize lazy load indicator references now that panel exists

    loadIndicator = by('.qj-load-indicator', panel);

    loadProgress = loadIndicator?.querySelector('.qj-load-progress') || null;

    loadLabelEl = loadIndicator?.querySelector('.qj-load-label') || null;

    // 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;

        // Preview appears on the opposite side of the panel

        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);

      }

      if (notes.length) {

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

      } else {

        counter.textContent = '0/0';

        slider.max = '0';

        slider.value = '0';

      }

    }

    // 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() {

      // Do nothing if the panel is closed → no internal scrolling when the panel is not visible

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

      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) => {

        if (p) p.setAttribute('aria-selected', i === activeIndex ? 'true' : 'false');

      });

      if (pill.scrollIntoView) {

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

      } else {

        const c = pills;

        const pTop = pill.offsetTop;

        const 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;

      // "Only notes" also ignores hidden journals

      excludeHidden = toggleOnlyNotes.checked;

      rebuildAll();

    });

    toggleLong.addEventListener('change', rebuildPills);

    filterInput.addEventListener('input', rebuildPills);

    closeBtn.addEventListener('click', () => {

      panel.classList.remove('open');

      cancelLazyScroll();

    });

    const launcherClick = () => {

      const willOpen = !panel.classList.contains('open');

      panel.classList.toggle('open');

      if (!panel.classList.contains('open')) {

        // We just closed

        cancelLazyScroll();

        return;

      }

      // Panel is being opened

      if (willOpen && !CONFIG.OVERRIDE_DEFAULT_LAZY_LOAD) {

        // Load history in steps and show progress indicator

        loadAllLazyHistory(() => {

          if (notes.length) selectClosest(false);

        });

      } else if (willOpen) {

        // Default behavior: no auto-load

        if (notes.length) 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) {

      if (!notes.length) return;

      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);

    }

    // Initial build

    rebuildAll();

    if (notes.length) {

      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: (forceLoad) => {

        const wasClosed = !panel.classList.contains('open');

        panel.classList.add('open');

        if (!wasClosed) return;

        if ((forceLoad || !CONFIG.OVERRIDE_DEFAULT_LAZY_LOAD)) {

          loadAllLazyHistory(() => {

            if (notes.length) selectClosest(false);

          });

        } else {

          if (notes.length) selectClosest(false);

        }

      },

      close: () => {

        panel.classList.remove('open');

        cancelLazyScroll();

      },

      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);

        window.removeEventListener('wheel', userOverrideScroll);

        window.removeEventListener('touchmove', userOverrideScroll);

        window.removeEventListener('keydown', userScrollKeyHandler);

      }

    };

  }

})();