tutorial.js

/* First-install animated tutorial. Self-contained. */
(function () {
  const FLAG_KEY = 'docbase_tutorial_seen_v1';

  function getFlag() {
    return new Promise((resolve) => {
      try {
        if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
          chrome.storage.local.get(FLAG_KEY, (r) => resolve(!!(r && r[FLAG_KEY])));
          return;
        }
      } catch (_) {}
      resolve(localStorage.getItem(FLAG_KEY) === '1');
    });
  }
  function setFlag() {
    try {
      if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
        chrome.storage.local.set({ [FLAG_KEY]: true });
      }
    } catch (_) {}
    try { localStorage.setItem(FLAG_KEY, '1'); } catch (_) {}
  }

  const STEPS = [
    {
      target: null,
      title: 'Welcome to Docbase',
      body: 'A fully offline document search engine — every file lives on your device. Let me show you around in 30 seconds.',
      placement: 'center',
    },
    {
      target: '#search-box',
      title: 'Search everything',
      body: 'Type to instantly search across every document. Use quotes for exact filename matches, and multiple words to find sections containing all of them.',
      placement: 'bottom',
    },
    {
      target: '#toggle-multi-sidebar',
      title: 'Multi-Search',
      body: 'Opens a sidebar that finds documents whose filenames match your query — handy for quickly locating specific files while your main search keeps exploring content.',
      placement: 'bottom',
    },
    {
      target: '#set-filter-container',
      title: 'Filter by Set',
      body: 'Group your databases into Sets, then narrow searches to just the Sets and Databases you care about.',
      placement: 'bottom',
    },
    {
      target: '#open-manager-btn',
      title: 'Manage Databases',
      body: 'Upload .docx files, create Sets, rename or delete databases, and import/export ZIP backups — all stored locally.',
      placement: 'bottom',
    },
    {
      target: '#settings-btn',
      title: 'Make it yours',
      body: 'Swap themes, try dark mode, cycle through RGB, or go basic. Your choice persists across tabs.',
      placement: 'bottom',
    },
    {
      target: null,
      title: 'Pro tips',
      body: 'Press "/" anytime to jump to search. Press "Esc" to close any modal. Click a result snippet to preview the source document inline.',
      placement: 'center',
    },
    {
      target: null,
      title: 'You are ready',
      body: 'Head to Manage Databases to upload your first .docx files. Enjoy!',
      placement: 'center',
      isFinal: true,
    },
  ];

  let stepIdx = 0;
  let root, maskT, maskR, maskB, maskL, ring, card, titleEl, bodyEl, dotsEl, nextBtn, backBtn, skipBtn, counterEl;

  function injectStyles() {
    if (document.getElementById('docbase-tutorial-styles')) return;
    const s = document.createElement('style');
    s.id = 'docbase-tutorial-styles';
    s.textContent = `
      .dbt-root { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none;
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        opacity: 0; transition: opacity 320ms ease; }
      .dbt-root.dbt-show { opacity: 1; }
      .dbt-mask { position: fixed; background: rgba(8,10,14,0.72); pointer-events: auto;
        transition: top 420ms cubic-bezier(.22,1,.36,1), left 420ms cubic-bezier(.22,1,.36,1),
                    width 420ms cubic-bezier(.22,1,.36,1), height 420ms cubic-bezier(.22,1,.36,1),
                    background 240ms ease;
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
      .dbt-ring { position: fixed; border: 2px solid #22d3ee; border-radius: 12px;
        box-shadow: 0 0 0 4px rgba(34,211,238,0.18), 0 0 40px rgba(34,211,238,0.35);
        pointer-events: none; transition: all 420ms cubic-bezier(.22,1,.36,1);
        opacity: 0; }
      .dbt-ring.dbt-ring-show { opacity: 1; animation: dbtPulse 2.2s ease-in-out infinite; }
      @keyframes dbtPulse {
        0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,0.18), 0 0 40px rgba(34,211,238,0.35); }
        50%     { box-shadow: 0 0 0 8px rgba(34,211,238,0.10), 0 0 60px rgba(34,211,238,0.55); }
      }
      .dbt-card { position: fixed; pointer-events: auto; max-width: 360px; width: calc(100vw - 32px);
        background: #1e1e1e; color: #f3f4f6; border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.6);
        transition: top 420ms cubic-bezier(.22,1,.36,1), left 420ms cubic-bezier(.22,1,.36,1),
                    transform 320ms cubic-bezier(.22,1,.36,1), opacity 320ms ease;
        opacity: 0; transform: translateY(8px) scale(0.98); }
      .dbt-card.dbt-card-show { opacity: 1; transform: translateY(0) scale(1); }
      .dbt-counter { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
        color: #22d3ee; font-weight: 600; margin-bottom: 8px; }
      .dbt-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
      .dbt-body { font-size: 14px; line-height: 1.55; color: #d1d5db; margin: 0 0 18px; }
      .dbt-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .dbt-dots { display: flex; gap: 6px; }
      .dbt-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18);
        transition: background 240ms ease, transform 240ms ease; }
      .dbt-dot.dbt-dot-active { background: #22d3ee; transform: scale(1.4); }
      .dbt-buttons { display: flex; gap: 8px; }
      .dbt-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px;
        border-radius: 8px; border: 1px solid transparent; cursor: pointer;
        transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease; }
      .dbt-btn:active { transform: translateY(1px); }
      .dbt-btn-ghost { background: transparent; color: #9ca3af; }
      .dbt-btn-ghost:hover { color: #f3f4f6; }
      .dbt-btn-secondary { background: transparent; color: #e5e7eb; border-color: rgba(255,255,255,0.14); }
      .dbt-btn-secondary:hover { background: rgba(255,255,255,0.06); }
      .dbt-btn-primary { background: #22d3ee; color: #0a0f14; }
      .dbt-btn-primary:hover { background: #67e8f9; }
      .dbt-skip { position: fixed; top: 18px; right: 20px; z-index: 1;
        pointer-events: auto; background: rgba(30,30,30,0.85); color: #e5e7eb;
        border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
        padding: 8px 14px; font: 600 12px Inter, sans-serif; cursor: pointer;
        backdrop-filter: blur(8px); transition: background 160ms ease, color 160ms ease; }
      .dbt-skip:hover { background: rgba(60,60,60,0.95); color: #fff; }
      @media (prefers-reduced-motion: reduce) {
        .dbt-root, .dbt-card, .dbt-mask, .dbt-ring { transition: opacity 120ms ease; animation: none !important; }
      }
    `;
    document.head.appendChild(s);
  }

  function build() {
    injectStyles();
    root = document.createElement('div');
    root.className = 'dbt-root';
    root.innerHTML = `
      <div class="dbt-mask" data-m="t"></div>
      <div class="dbt-mask" data-m="r"></div>
      <div class="dbt-mask" data-m="b"></div>
      <div class="dbt-mask" data-m="l"></div>
      <div class="dbt-ring"></div>
      <button class="dbt-skip" type="button">Skip tutorial</button>
      <div class="dbt-card" role="dialog" aria-modal="true" aria-label="Tutorial">
        <div class="dbt-counter"></div>
        <h2 class="dbt-title"></h2>
        <p class="dbt-body"></p>
        <div class="dbt-actions">
          <div class="dbt-dots"></div>
          <div class="dbt-buttons">
            <button type="button" class="dbt-btn dbt-btn-secondary dbt-back">Back</button>
            <button type="button" class="dbt-btn dbt-btn-primary dbt-next">Next</button>
          </div>
        </div>
      </div>
    `;
    document.body.appendChild(root);
    maskT = root.querySelector('[data-m="t"]');
    maskR = root.querySelector('[data-m="r"]');
    maskB = root.querySelector('[data-m="b"]');
    maskL = root.querySelector('[data-m="l"]');
    ring = root.querySelector('.dbt-ring');
    card = root.querySelector('.dbt-card');
    titleEl = root.querySelector('.dbt-title');
    bodyEl = root.querySelector('.dbt-body');
    dotsEl = root.querySelector('.dbt-dots');
    counterEl = root.querySelector('.dbt-counter');
    nextBtn = root.querySelector('.dbt-next');
    backBtn = root.querySelector('.dbt-back');
    skipBtn = root.querySelector('.dbt-skip');

    STEPS.forEach((_, i) => {
      const d = document.createElement('div');
      d.className = 'dbt-dot';
      dotsEl.appendChild(d);
    });

    nextBtn.addEventListener('click', () => {
      if (stepIdx >= STEPS.length - 1) finish();
      else go(stepIdx + 1);
    });
    backBtn.addEventListener('click', () => { if (stepIdx > 0) go(stepIdx - 1); });
    skipBtn.addEventListener('click', finish);
    document.addEventListener('keydown', onKey);
    window.addEventListener('resize', onResize, { passive: true });
    window.addEventListener('scroll', onResize, { passive: true });
  }

  function onKey(e) {
    if (!root) return;
    if (e.key === 'Escape') finish();
    else if (e.key === 'ArrowRight' || e.key === 'Enter') nextBtn.click();
    else if (e.key === 'ArrowLeft') backBtn.click();
  }
  function onResize() { if (root) render(); }

  function rectFor(target) {
    if (!target) return null;
    const el = document.querySelector(target);
    if (!el) return null;
    const r = el.getBoundingClientRect();
    if (r.width === 0 && r.height === 0) return null;
    const pad = 8;
    return { x: r.left - pad, y: r.top - pad, w: r.width + pad * 2, h: r.height + pad * 2 };
  }

  function render() {
    const step = STEPS[stepIdx];
    const vw = window.innerWidth, vh = window.innerHeight;
    const rect = rectFor(step.target);

    counterEl.textContent = `Step ${stepIdx + 1} of ${STEPS.length}`;
    titleEl.textContent = step.title;
    bodyEl.textContent = step.body;
    backBtn.style.visibility = stepIdx === 0 ? 'hidden' : 'visible';
    nextBtn.textContent = step.isFinal ? 'Get started' : (stepIdx === STEPS.length - 1 ? 'Done' : 'Next');
    Array.from(dotsEl.children).forEach((d, i) =>
      d.classList.toggle('dbt-dot-active', i === stepIdx)
    );

    if (rect) {
      // 4 masks around the cut-out
      Object.assign(maskT.style, { top: '0px', left: '0px', width: vw + 'px', height: Math.max(0, rect.y) + 'px' });
      Object.assign(maskB.style, { top: (rect.y + rect.h) + 'px', left: '0px', width: vw + 'px', height: Math.max(0, vh - (rect.y + rect.h)) + 'px' });
      Object.assign(maskL.style, { top: rect.y + 'px', left: '0px', width: Math.max(0, rect.x) + 'px', height: rect.h + 'px' });
      Object.assign(maskR.style, { top: rect.y + 'px', left: (rect.x + rect.w) + 'px', width: Math.max(0, vw - (rect.x + rect.w)) + 'px', height: rect.h + 'px' });
      Object.assign(ring.style, { top: rect.y + 'px', left: rect.x + 'px', width: rect.w + 'px', height: rect.h + 'px' });
      ring.classList.add('dbt-ring-show');

      // place card below if room, else above, else center
      const cardW = Math.min(360, vw - 32);
      const cardH = card.offsetHeight || 180;
      const gap = 16;
      let top, left;
      if (rect.y + rect.h + gap + cardH < vh - 16) {
        top = rect.y + rect.h + gap;
      } else if (rect.y - gap - cardH > 16) {
        top = rect.y - gap - cardH;
      } else {
        top = Math.max(16, (vh - cardH) / 2);
      }
      left = Math.min(Math.max(16, rect.x + rect.w / 2 - cardW / 2), vw - cardW - 16);
      Object.assign(card.style, { top: top + 'px', left: left + 'px' });
    } else {
      // single full-screen mask, centered card
      Object.assign(maskT.style, { top: '0px', left: '0px', width: vw + 'px', height: vh + 'px' });
      Object.assign(maskR.style, { top: '0px', left: '0px', width: '0px', height: '0px' });
      Object.assign(maskB.style, { top: '0px', left: '0px', width: '0px', height: '0px' });
      Object.assign(maskL.style, { top: '0px', left: '0px', width: '0px', height: '0px' });
      ring.classList.remove('dbt-ring-show');
      const cardW = Math.min(420, vw - 32);
      const cardH = card.offsetHeight || 200;
      Object.assign(card.style, {
        top: Math.max(16, (vh - cardH) / 2) + 'px',
        left: ((vw - cardW) / 2) + 'px',
      });
      card.style.maxWidth = cardW + 'px';
    }
  }

  function go(i) {
    stepIdx = i;
    card.classList.remove('dbt-card-show');
    setTimeout(() => {
      render();
      requestAnimationFrame(() => card.classList.add('dbt-card-show'));
    }, 140);
  }

  function start() {
    build();
    requestAnimationFrame(() => {
      render();
      root.classList.add('dbt-show');
      requestAnimationFrame(() => card.classList.add('dbt-card-show'));
    });
  }

  function finish() {
    if (!root) return;
    setFlag();
    root.classList.remove('dbt-show');
    card.classList.remove('dbt-card-show');
    document.removeEventListener('keydown', onKey);
    window.removeEventListener('resize', onResize);
    window.removeEventListener('scroll', onResize);
    setTimeout(() => { root && root.remove(); root = null; }, 360);
  }

  // Public: allow manual replay via console / future settings button
  window.docbaseTutorial = { start: () => { stepIdx = 0; start(); }, reset: () => { try { localStorage.removeItem(FLAG_KEY); } catch(_){} try { chrome.storage.local.remove(FLAG_KEY); } catch(_){} } };

  function maybeAutoStart() {
    getFlag().then((seen) => {
      if (seen) return;
      // delay a beat so the app's own init finishes
      setTimeout(start, 600);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', maybeAutoStart);
  } else {
    maybeAutoStart();
  }
})();