app.js

// app.js
import * as store from './store.js';
import { t, setLanguage, detectLanguage, saveLanguage } from './i18n.js';
import { renderNotesPanel, BRAND_MARK } from './notes-ui.js';
import { renderEditor } from './editor.js';

import { renderHistoryPanel } from './history-ui.js';
import { initSync } from './sync.js';

let currentNoteId = null;
let currentNoteRev = 0; // set by Task 18's editor via onRevChange; flush() target for lifecycle events
let savedRefreshTimer = null; // debounce for the note-list refresh on 'saved' events

// Set once renderNotesPanel has run, so the note-changed subscriber below
// (registered before the panel exists) can reach its `refresh()`.

let notesPanelHandle = null;
let syncNoteDeletedHandler = null;

const STORAGE_REASON_KEYS = {
  blocked: 'error.storageBlocked',
  corrupt: 'error.storageCorrupt',
  unavailable: 'error.storageUnavailable',
  'migration-failed': 'error.storageUnavailable',
  'version-change': 'error.storageVersionChange',
};

// A dedicated container the editor never owns (unlike the old showAlert,
// which wrote into #editor-panel and was wiped by the next renderEditor()
// call — see final-review Fix 8). Uses textContent, not innerHTML: every
// caller passes an already-translated i18n literal today, but this keeps it
// safe even if that ever changes.
//
// `tone` matters here for the same reason the brand brief keeps "durable
// save" and "browser retention" visually separate: coral is reserved for a
// save failure or a destructive action, and using it for a calm, standing
// informational notice (e.g. the Safari retention notice) would itself be
// the kind of conflation this product is built to avoid.
function addNotice(message, tone = 'error') {
  const container = document.getElementById('app-notices');
  if (!container) return;
  // Guards against the same notice stacking forever — e.g. a commitVersion
  // failure recurring on every idle-timer tick while the underlying problem
  // persists.
  const last = container.lastElementChild;
  if (last && last.textContent === message) return;
  const div = document.createElement('div');
  div.className = tone === 'info' ? 'app-notice tone-info' : 'app-notice';
  div.textContent = message;
  container.appendChild(div);
}

// Not Chrome/Chromium/Edge (which also contain "Safari" in their UA string).
// See design doc "Safari and retention": ordinary Safari is supported but
// declared non-durable, with a standing notice — this is what detects that
// case. Deliberately does NOT attempt to detect Private Browsing specifically:
// a successful storage write probe there is not proof of durability, and the
// design is explicit that such a probe must never be read as one.
function isSafari() {
  const ua = navigator.userAgent || '';
  if (!/Safari/.test(ua) || /Chrome|Chromium|Edg/.test(ua)) return false;
  // An installed Home Screen / Dock web app is the one documented exemption:
  // its storage is separate from ordinary Safari's, so the notice there would
  // be a false alarm rather than a missed warning. navigator.standalone is a
  // declarative property — reading it is not the write probe the design
  // forbids as proof of durability.
  if (navigator.standalone === true) return false;
  return true;
}

// The last phrase handed to the screen-reader announcer. Kept so an unchanged
// state is not re-announced: 'saving' and 'saved' fire on every debounced
// flush, and repeating "Saved locally" into a live region on each one would
// talk over someone who is simply typing.
let lastAnnounced = '';

function announceStatus(phrase) {
  if (phrase === lastAnnounced) return;
  lastAnnounced = phrase;
  const el = document.getElementById('status-a11y');
  if (el) el.textContent = phrase;
}

function renderStatus(event) {
  const revisionEl = document.getElementById('status-revision');
  const retentionEl = document.getElementById('status-retention');
  const noticeEl = document.getElementById('status-notice');

  if (event.type === 'saved') {
    revisionEl.className = 'state-saved';
    revisionEl.textContent = `${t('status.saved')} · ${new Date(event.completedAt).toLocaleTimeString()}`;
    // Outcome states only — 'saving' is deliberately not announced. Announcing
    // it would make every flush a two-phrase alternation ("Saving…", "Saved
    // locally"), which defeats the de-duplication and interrupts typing.
    announceStatus(t('status.saved'));
    // Titles are user-set now and never change on save — but rows still show
    // "last modified" and sort by updatedAt, which every durable save bumps.
    // Refresh the list then, debounced so a burst of flushes is one repaint.
    if (notesPanelHandle) {
      if (savedRefreshTimer) clearTimeout(savedRefreshTimer);
      savedRefreshTimer = setTimeout(() => {
        savedRefreshTimer = null;
        notesPanelHandle.refresh();
      }, 400);
    }
  } else if (event.type === 'saving') {
    revisionEl.className = '';
    revisionEl.textContent = t('status.saving');
  } else if (event.type === 'memory-only') {
    revisionEl.className = 'state-failed';
    revisionEl.textContent = t('status.notSaved');
    announceStatus(t('status.notSaved'));
  } else if (event.type === 'save-failed') {
    // An ordinary transient failure: the visible text is unchanged and no
    // rescue buffer was populated (that is what 'memory-only' is for), so
    // this must not borrow that event's wording — see final-review Fix 4.
    revisionEl.className = 'state-failed';
    revisionEl.textContent = t('status.saveFailed');
    announceStatus(t('status.saveFailed'));
  } else if (event.type === 'retention-changed') {
    const key = { persistent: 'retention.persistent', 'best-effort': 'retention.bestEffort', 'session-only': 'retention.sessionOnly', unknown: 'retention.unknown' }[event.retention] || 'retention.unknown';
    retentionEl.className = event.retention === 'best-effort' || event.retention === 'session-only' ? 'state-warning' : 'state-info';
    retentionEl.textContent = `${t('retention.label')}: ${t(key)}`;
  } else if (event.type === 'quota-warning') {
    noticeEl.hidden = false;
    noticeEl.className = 'state-warning';
    noticeEl.textContent = t('status.quotaWarning');
  } else if (event.type === 'storage-unavailable') {
    // Post-boot occurrence (e.g. another tab's upgrade force-closed this
    // connection) — the initial boot-time case is handled directly in boot()
    // before this subscriber even exists.
    addNotice(t(STORAGE_REASON_KEYS[event.reason] || 'error.storageUnavailable'));

  } else if (event.type === 'note-deleted') {
    if (syncNoteDeletedHandler) syncNoteDeletedHandler(event.noteId);
    if (notesPanelHandle) notesPanelHandle.refresh();
  } else if (event.type === 'note-changed') {
    // Emitted by setPinned/trashNote/restoreNote/purgeNote/restoreVersion/
    // renameNote. None of those carry enough information here to update the
    // list in place, and none of them fire anywhere near per-keystroke
    // frequency, so a full list refresh on each is cheap and correct.
    if (notesPanelHandle) notesPanelHandle.refresh();
  }
}

async function boot() {
  const lang = detectLanguage();
  setLanguage(lang);
  document.documentElement.lang = lang;

  let status;
  try {
    status = await store.open({});
  } catch (error) {
    // store.open() throws (rather than resolving with available:false) only
    // for a version-mismatch: this page is older than the database on disk.
    // That must never be silent — an unhandled rejection here would leave the
    // status bar blank forever with no explanation.
    addNotice(t('error.versionMismatch'));
    return;
  }

  store.subscribe(renderStatus);

  // Only render retention at boot when it is a definitive answer. Painting
  // "Browser retention: Unknown" on every load — for a product whose whole
  // pitch is that notes stay put — reads as an alarm, then flickers to
  // "Persistent" a moment later. The '—' placeholder is quieter than a
  // scary word, and the real state arrives via retention-changed shortly.
  if (status.retention && status.retention !== 'unknown') {
    renderStatus({ type: 'retention-changed', retention: status.retention });
  }

  if (!status.available) {
    addNotice(t(STORAGE_REASON_KEYS[status.reason] || 'error.storageUnavailable'));
  } else if (isSafari()) {
    // Standing notice, not a transient one: shown once at boot and left
    // visible for the session, regardless of what retention-changed later
    // reports (persist() granting 'persistent' on Safari is not understood
    // to be an exemption from its storage caps — see design doc). 'info'
    // tone: this is retention information, not a failure.
    addNotice(t('notice.safariNonDurable'), 'info');
  }

  let activeEditor = null;
  // History is closed by default (brand brief §6: "Version panel: closed by
  // default"); the preference persists for the session, so switching notes
  // keeps whichever state the user last chose.
  let historyOpen = false;

  // --- Mobile single-pane view state (redesign-plan §4) -------------------
  // Below 768px only one pane shows at a time: the list is the root view and
  // opening a note pushes the editor over it. CSS reads #app[data-view];
  // from 768px up both panes are always visible and this state is inert.
  const appEl = document.getElementById('app');
  const mobileLayout = window.matchMedia('(max-width: 767px)');
  appEl.dataset.view = 'list';

  // --- Browser tab title (docs/filename-plan.md §1.5) ---------------------
  // "{name} | Heldnote" while a note is on screen; the index.html baseline
  // otherwise. On a phone the list view counts as "no note on screen" even
  // though a note is loaded behind it.
  const DEFAULT_DOC_TITLE = document.title;
  let currentNoteTitle = null;

  function applyDocTitle() {
    const onList = mobileLayout.matches && appEl.dataset.view !== 'editor';
    document.title = currentNoteTitle && !onList
      ? `${currentNoteTitle} | Heldnote`
      : DEFAULT_DOC_TITLE;
  }

  function setView(view) {
    appEl.dataset.view = view;
    applyDocTitle();
  }

  // Opening a note on a phone gets a real history entry, so the device back
  // gesture returns to the list instead of leaving the app. Only one entry
  // is ever pushed: while in the editor the list is off screen, so a second
  // push can't happen before popstate or the back control pops this one.
  function enterEditorView() {
    if (
      mobileLayout.matches
      && appEl.dataset.view !== 'editor'
      && !(history.state && history.state.heldnoteView === 'editor')
    ) {
      try { history.pushState({ heldnoteView: 'editor' }, ''); } catch (e) { /* history may be sandboxed */ }
    }
    setView('editor');
  }

  function leaveEditorView() {
    if (history.state && history.state.heldnoteView === 'editor') {
      history.back(); // the popstate handler below performs the switch
    } else {
      setView('list');
    }
  }

  // Escape closes the history sheet. Every other dismissible surface honours
  // Escape (the find bar, the rename field); this one silently did not, which
  // reads as the app ignoring you. The find-bar guard matters: editor.js has
  // its own document-level Escape handler, and without this check one keypress
  // would close both. The find bar is the innermost surface, so it wins.
  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Escape' || !historyOpen) return;
    const findBar = document.getElementById('find-bar');
    if (findBar && !findBar.hidden) return;
    historyOpen = false;
    renderHistoryForCurrent();
    if (activeEditor) activeEditor.setHistoryOpen(false);
    const toggle = document.getElementById('toggle-history');
    if (toggle) toggle.focus(); // return focus to the control that opened it
  });

  window.addEventListener('popstate', (event) => {
    const toEditor = event.state && event.state.heldnoteView === 'editor';
    setView(toEditor ? 'editor' : 'list');
    // The history sheet floats above both views; leaving the editor while
    // it is open would strand it over the list.
    if (!toEditor && historyOpen) {
      historyOpen = false;
      renderHistoryForCurrent();
      if (activeEditor) activeEditor.setHistoryOpen(false);
    }
  });

  // Strings are baked into innerHTML when each panel renders, so a language
  // change has to re-render everything — the sidebar, the editor toolbar, the
  // history sheet and the status bar. A reload is the honest way to do that
  // without hunting every string, and it is safe: the pagehide handler below
  // flushes the open draft before the page goes away.
  function changeLanguage(lang) {
    const resolved = saveLanguage(lang);
    document.documentElement.lang = resolved;
    location.reload();
  }

  function toggleTheme() {
    const root = document.documentElement;
    const systemPrefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
    const current = root.dataset.theme || (systemPrefersLight ? 'light' : 'dark');
    const next = current === 'dark' ? 'light' : 'dark';
    root.dataset.theme = next;
    try { localStorage.setItem('heldnote-theme', next); } catch (e) { /* non-fatal */ }
  }

  function renderHistoryForCurrent() {
    const panel = document.getElementById('history-panel');
    if (!historyOpen || !currentNoteId) {
      panel.hidden = true;
      return;
    }
    const id = currentNoteId;
    // A restore changes the note's draft text underneath the editor, so the
    // editor must reload from store rather than keep showing the pre-restore
    // text; re-opening it (same as a fresh selection) is the simplest way to
    // pick up what restoreVersion just wrote.
    //
    // But history-ui.js's restore-in-progress retry loop can take up to
    // ~1.2s to settle, and the user may have selected a different note by
    // then. onRestore fires against whatever note it was created for (`id`,
    // captured here), so it must check that note is still the one on screen
    // before touching the editor — otherwise a slow retry for note A that
    // resolves after the user has already switched to note B would yank B's
    // editor out from under them and silently swap in A's.
    renderHistoryPanel(panel, id, {
      onRestore: () => { if (id === currentNoteId) openEditor(id); },
      // On small screens the sheet covers the toggle that opened it, so the
      // panel carries its own close control.
      onClose: () => {
        historyOpen = false;
        renderHistoryForCurrent();
        if (activeEditor) activeEditor.setHistoryOpen(false);
      },
    });
  }

  function openEditor(id) {
    currentNoteId = id;
    currentNoteRev = 0;
    if (activeEditor) activeEditor.destroy();
    activeEditor = renderEditor(document.getElementById('editor-panel'), id, {
      onRevChange: (rev) => { currentNoteRev = rev; },
      // Fires on load (with the stored name) and once per confirmed rename.
      // Tab title only: the sidebar already refreshes via the note-changed
      // event renameNote emits — a second refresh here would be redundant.
      onTitleChange: (title) => {
        currentNoteTitle = title;
        applyDocTitle();
      },
      onError: addNotice,
      historyOpen,
      onToggleHistory: () => {
        historyOpen = !historyOpen;
        renderHistoryForCurrent();
        return historyOpen;
      },
      onBack: leaveEditorView,
    });
    renderHistoryForCurrent();
  }

  function renderEmptyState() {
    const panel = document.getElementById('editor-panel');
    panel.innerHTML = `
      <div class="editor-empty">
        ${BRAND_MARK.replace('width="22" height="22"', 'width="44" height="44"')}
        <h2>${t('empty.title')}</h2>
        <p>${t('empty.body')}</p>
        <button id="empty-new-note">${t('empty.cta')}</button>
      </div>
    `;
    panel.querySelector('#empty-new-note').addEventListener('click', async () => {
      const note = await store.createNote();
      if (notesPanelHandle) notesPanelHandle.refresh();
      selectNote(note.id);
    });
  }

  function closeEditor() {
    currentNoteId = null;
    currentNoteRev = 0;
    currentNoteTitle = null;
    if (activeEditor) { activeEditor.destroy(); activeEditor = null; }
    renderEmptyState();
    document.getElementById('history-panel').hidden = true;
    if (notesPanelHandle) notesPanelHandle.setActive(null);
    // The note this view was showing is gone; on a phone that means back to
    // the list, not an empty sheet. setView also restores the tab title.
    setView('list');
  }

  // switchView: false keeps the current pane on phones — used when a note is
  // (re)opened as a side effect (boot, import reload) rather than by a tap.
  function selectNote(id, { switchView = true } = {}) {
    openEditor(id);
    if (notesPanelHandle) notesPanelHandle.setActive(id);
    if (switchView) enterEditorView();
  }

  // Called after any import completes. 'replace' wipes the database
  // wholesale, so the note open in the editor (if any) very likely no longer
  // exists; 'copy' never removes the original, but reloading is still cheap
  // and correct either way, in case the id happened to collide.
  async function handleImportComplete() {
    if (!currentNoteId) return;
    const id = currentNoteId;
    try {
      await store.getNote(id);
      // Reload in place: imports run from the sidebar, so on a phone the
      // user is on the list — do not yank them into the editor.
      selectNote(id, { switchView: false });
    } catch (error) {
      closeEditor();
    }
  }

  // Called after a trash purge. Unlike the other note-changed sources,
  // a purge can remove the very note the editor has open, and that is not
  // something a plain list refresh fixes.

  function handleNoteDeleted(id) {
    if (id === currentNoteId) closeEditor();
  }
  syncNoteDeletedHandler = handleNoteDeleted;


  notesPanelHandle = renderNotesPanel(document.getElementById('notes-panel'), {
    onSelect: selectNote,
    onImportComplete: handleImportComplete,
    onNoteDeleted: handleNoteDeleted,
    onToggleTheme: toggleTheme,
    onChangeLanguage: changeLanguage,
  });

  // A merge can replace the durable draft underneath an open editor. Reload
  // only when that editor's note was actually applied; fence-skipped notes
  // keep the user's newer in-memory view and will be merged next round.
  store.subscribe((event) => {

    if (event.type !== 'sync-applied' || !currentNoteId) return;
    if ((event.deletedNoteIds || []).includes(currentNoteId)) {
      handleNoteDeleted(currentNoteId);
      return;
    }
    const change = (event.changes || []).find((entry) => entry.noteId === currentNoteId);
    if (change && change.textChanged) {
      selectNote(currentNoteId, { switchView: false });
    }
  });

  initSync();

  // First paint: an invitation to act, never a blank pane. If notes already
  // exist, open the most recent one so returning users land back in their
  // writing; on a truly first visit, show the empty state.
  try {
    const existing = await store.listNotes({});
    if (existing.length > 0) {
      // "Return anytime" means returning to where you left off: open the
      // most recently edited note, not whichever pinned note sorts first.
      // switchView false: on a phone the list is the root view — the note
      // is loaded and one tap away, not pushed over the list unasked.
      const mostRecent = existing.reduce((best, note) => (note.updatedAt > best.updatedAt ? note : best));
      selectNote(mostRecent.id, { switchView: false });
    } else {
      renderEmptyState();
    }
  } catch (error) {
    renderEmptyState();
  }

  window.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden' && currentNoteId) {
      store.flush(currentNoteId, currentNoteRev).catch(() => {});
    }
  });
  window.addEventListener('pagehide', () => {
    if (currentNoteId) store.flush(currentNoteId, currentNoteRev).catch(() => {});
  });
}

boot().catch((error) => {
  console.error('heldnote: boot failed', error);
});

export { currentNoteId, currentNoteRev };