mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-15 19:32:21 +02:00
refactor(notes): decompose Notes into feature-owned modules (#6713)
* refactor(notes): decompose Notes into feature-owned modules * fix(notes): avoid HTML interpolation in reminder picker * docs(notes): drop checkpoint archives, session logs and publication drafts The N0-N6 tarballs and raw pytest/node logs are not read by any script or test, and the logs carry absolute home-directory paths. Once squashed into dev they would stay in history for good. notes-pr.md and notes-issue.md were the drafts used to open #6712 and #6713, not documentation. notes-validation.md keeps the counts, the checkpoint hashes and implementation.sha256 as the record; local interpreter paths and the local Docker image name are replaced with portable placeholders. * fix(notes): keep the state store raw and stop masonry re-observing after close - state: writes built from views (filter, spread, splice) stored nested read-only views in the store, so structuredClone on a stored note threw DataCloneError. Store writes now unwrap nested views. - layout: a save that resolves after closePanel re-renders the leaving pane and re-created the masonry ResizeObserver that teardown had disposed. Skip creating it once Notes is closed. - index.js: drop 30 imported or declared names that were never used and group the imports at the top. Import order is unchanged. - Revert unrelated punctuation edits in .gitattributes and keep the header comment and docstring first in compare/vote.js and test_notes_dom_xss_helpers.py. Both fixes have a node test that fails on the previous head. * test(notes): make script rejection assertion case-insensitive Address CodeQL js/bad-tag-filter alert #1150 in test-only assertion and refresh Notes evidence manifest checksum. --------- Co-authored-by: Léo <leograndcontact@gmail.com>
This commit is contained in:
Alexandre Teixeira
co-authored by
Léo
Léo
parent
9f8eae72fd
commit
f1a47f3812
@@ -0,0 +1,148 @@
|
||||
/** Card checklist editing and Today-step interactions. */
|
||||
export function createCardChecklist({
|
||||
checklistOperations,
|
||||
_editNote,
|
||||
_renderNotes,
|
||||
app,
|
||||
spawnConfetti,
|
||||
state
|
||||
}) {
|
||||
function _wireCardChecklist(body) {
|
||||
// Remove a single checklist item (hover X)
|
||||
body.querySelectorAll('.note-checkbox-rm').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (state.selectMode) return;
|
||||
const noteId = btn.dataset.noteId;
|
||||
const idx = parseInt(btn.dataset.idx);
|
||||
checklistOperations.removeItem(noteId, idx);
|
||||
});
|
||||
});
|
||||
|
||||
function _startChecklistItemEdit(noteId, idx, span) {
|
||||
if (span.isContentEditable) return;
|
||||
const note = state.notes.find(n => n.id === noteId);
|
||||
if (!note || !Array.isArray(note.items) || !note.items[idx]) return;
|
||||
|
||||
span.textContent = note.items[idx].text || '';
|
||||
span.contentEditable = "true";
|
||||
span.spellcheck = false;
|
||||
span.focus();
|
||||
|
||||
const selection = window.getSelection();
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(span);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
|
||||
const save = () => {
|
||||
if (!span.isContentEditable) return;
|
||||
span.contentEditable = "false";
|
||||
const newText = span.textContent.trim();
|
||||
checklistOperations.editItem(note, idx, newText);
|
||||
};
|
||||
|
||||
const onKeydown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
save();
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
span.contentEditable = "false";
|
||||
_renderNotes();
|
||||
}
|
||||
};
|
||||
|
||||
span.addEventListener('blur', save, { once: true });
|
||||
span.addEventListener('keydown', onKeydown);
|
||||
}
|
||||
|
||||
// Edit a single checklist item (hover Edit button)
|
||||
body.querySelectorAll('.note-checkbox-edit').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
if (state.selectMode) return;
|
||||
const noteId = btn.dataset.noteId;
|
||||
const idx = parseInt(btn.dataset.idx);
|
||||
const span = btn.parentElement.querySelector('.note-check-text');
|
||||
if (span) _startChecklistItemEdit(noteId, idx, span);
|
||||
});
|
||||
});
|
||||
|
||||
// Prevent clicks from toggling the row while actively editing inline
|
||||
body.querySelectorAll('.note-check-text').forEach(span => {
|
||||
span.addEventListener('click', (e) => {
|
||||
if (span.isContentEditable) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Quick-add new checklist item (hover input at bottom of todo cards)
|
||||
body.querySelectorAll('.note-cl-quickadd-input').forEach(input => {
|
||||
input.addEventListener('click', (e) => e.stopPropagation());
|
||||
input.addEventListener('keydown', async (e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key !== 'Enter') return;
|
||||
e.preventDefault();
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
const noteId = input.dataset.noteId;
|
||||
const persist = checklistOperations.addItem(noteId, text, () => { input.value = ''; });
|
||||
if (!persist) return;
|
||||
// Refocus the input on the same card
|
||||
setTimeout(() => {
|
||||
const next = document.querySelector(`.note-cl-quickadd-input[data-note-id="${noteId}"]`);
|
||||
if (next) next.focus();
|
||||
}, 0);
|
||||
persist();
|
||||
});
|
||||
});
|
||||
|
||||
// Checkboxes (dot toggle, optimistic) : disabled in select mode
|
||||
body.querySelectorAll('.note-checkbox').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
if (state.selectMode) return; // let card-level handler take over
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const noteId = el.dataset.noteId;
|
||||
const idx = parseInt(el.dataset.idx);
|
||||
checklistOperations.toggleItem(noteId, idx, done => el.classList.toggle('done', done), () => {
|
||||
const card = el.closest('.note-card');
|
||||
if (card) { const r = card.getBoundingClientRect(); spawnConfetti(r.left + r.width / 2, r.top + r.height / 2, 60); }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function _wireTodayView(body) {
|
||||
body.querySelectorAll('.notes-today-row .note-check-dot').forEach(dot => {
|
||||
dot.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
const id = dot.dataset.noteId;
|
||||
const idx = parseInt(dot.dataset.idx);
|
||||
const row = dot.closest('.notes-today-row');
|
||||
await checklistOperations.toggleTodayStep(id, idx, () => row?.classList.add('done'), () => {
|
||||
const r = (row || dot).getBoundingClientRect();
|
||||
spawnConfetti(r.left + r.width / 2, r.top + r.height / 2, 60);
|
||||
});
|
||||
});
|
||||
});
|
||||
body.querySelectorAll('.notes-today-title').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
const id = el.dataset.noteId;
|
||||
if (!id) return;
|
||||
// Drop the Today filter first so the regular card list is rendered;
|
||||
// _editNote needs to find a .note-card in the DOM to replace with
|
||||
// the editor form.
|
||||
app.setActiveFilter(null);
|
||||
_renderNotes();
|
||||
_editNote(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return { _wireCardChecklist, _wireTodayView };
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
/** Card taps, pin/color controls, menus and archive animation. */
|
||||
export function createCardInteractions({
|
||||
cardOperations,
|
||||
COLORS,
|
||||
_archiveNoteById,
|
||||
_bindLongPressDrag,
|
||||
_customColorStyle,
|
||||
_dotBg,
|
||||
_dotIsActive,
|
||||
_editNote,
|
||||
_isBgImage,
|
||||
_isNotesMobileMode,
|
||||
_openMobileFullscreenEdit,
|
||||
_openNoteCornerMenu,
|
||||
_pickCustomBgImage,
|
||||
_renderNotes,
|
||||
_setReminderCardGlow,
|
||||
_smoothScrollToNoteCard,
|
||||
_updateBulkBar,
|
||||
_wireCardChecklist,
|
||||
_wireCardReorder,
|
||||
app,
|
||||
spawnConfetti,
|
||||
state,
|
||||
uiModule
|
||||
}) {
|
||||
function _bindCardEvents(body) {
|
||||
// Skip completed leading rows so the first unfinished checklist item is
|
||||
// visible when a note preview has its own scroll area.
|
||||
requestAnimationFrame(() => {
|
||||
body.querySelectorAll('.note-checklist-preview').forEach(preview => {
|
||||
const firstPending = preview.querySelector('.note-checkbox:not(.done)');
|
||||
if (firstPending) preview.scrollTop = Math.max(0, firstPending.offsetTop - 4);
|
||||
});
|
||||
});
|
||||
const tapToEditOrSelect = (cardEl) => {
|
||||
const id = cardEl.dataset.noteId;
|
||||
// A long-press enters select mode and re-renders the card. Ignore the
|
||||
// synthetic click that mobile browsers emit when that same touch ends.
|
||||
if (state.suppressNextNoteTapId === id) {
|
||||
app.setSuppressNextNoteTapId(null);
|
||||
return;
|
||||
}
|
||||
if (state.selectMode) {
|
||||
const cb = cardEl.querySelector('.note-card-cb');
|
||||
if (cb) {
|
||||
cb.checked = !cb.checked;
|
||||
cb.dispatchEvent(new Event('change'));
|
||||
}
|
||||
} else if (_isNotesMobileMode()) {
|
||||
// Mobile: open the per-note fullscreen edit overlay instead of the
|
||||
// in-place form. Tiles on mobile are read-only previews.
|
||||
_openMobileFullscreenEdit(id, cardEl);
|
||||
} else {
|
||||
_editNote(id);
|
||||
}
|
||||
};
|
||||
// Mobile: long-press anywhere on a note card → enter Select mode and
|
||||
// select that card. Cancelled by movement (so it doesn't interfere with
|
||||
// vertical scrolling) or by lifting the finger before the timer fires.
|
||||
if (_isNotesMobileMode()) {
|
||||
body.querySelectorAll('.note-card').forEach(card => _bindLongPressDrag(card));
|
||||
}
|
||||
body.querySelectorAll('.note-card.note-card-reminder-fired-sticky').forEach(card => {
|
||||
card.addEventListener('click', () => _setReminderCardGlow(card.dataset.noteId, false), true);
|
||||
});
|
||||
// Click title : edit, or toggle select in select mode
|
||||
body.querySelectorAll('.note-card-title[data-action="edit"]').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
_smoothScrollToNoteCard(el.closest('.note-card'));
|
||||
tapToEditOrSelect(el.closest('.note-card'));
|
||||
});
|
||||
});
|
||||
// Click content : edit, or toggle select in select mode
|
||||
body.querySelectorAll('.note-content-preview').forEach(el => {
|
||||
el.addEventListener('click', (e) => { e.stopPropagation(); tapToEditOrSelect(el.closest('.note-card')); });
|
||||
});
|
||||
// A saved drawing is the note's primary content. Open its editor directly
|
||||
// when the preview is clicked, matching title/content preview behavior.
|
||||
body.querySelectorAll('.note-card-drawing .note-card-image').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
tapToEditOrSelect(el.closest('.note-card'));
|
||||
});
|
||||
});
|
||||
// Click empty area of checklist preview (not on checkbox/X) : edit
|
||||
body.querySelectorAll('.note-checklist-preview').forEach(el => {
|
||||
el.addEventListener('wheel', (e) => {
|
||||
const atTop = el.scrollTop <= 0;
|
||||
const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
|
||||
if ((e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
|
||||
const pane = el.closest('.notes-pane-body');
|
||||
if (pane) {
|
||||
pane.scrollTop += e.deltaY;
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}, { passive: false });
|
||||
el.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.note-checkbox, .note-checkbox-rm, .note-cl-quickadd, input')) return;
|
||||
e.stopPropagation();
|
||||
tapToEditOrSelect(el.closest('.note-card'));
|
||||
});
|
||||
});
|
||||
// Clicking todo item text now toggles its checkbox : let the click bubble
|
||||
// up to the parent .note-checkbox row handler. To open the editor, the
|
||||
// user clicks the pencil corner.
|
||||
// (No-op block kept as a marker : removing the listener entirely means
|
||||
// clicks naturally bubble to the row toggle below.)
|
||||
// In select mode, clicking anywhere on the card toggles selection
|
||||
if (state.selectMode) {
|
||||
body.querySelectorAll('.note-card').forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.note-card-cb')) return; // checkbox handles itself
|
||||
e.stopPropagation();
|
||||
tapToEditOrSelect(card);
|
||||
});
|
||||
});
|
||||
}
|
||||
// Mobile, non-select: tapping anywhere on the card body (not on an
|
||||
// interactive child : buttons, pin, checkbox, color dot, reminder pill,
|
||||
// agent tag, links) opens the fullscreen editor. Previously only the
|
||||
// title / content preview triggered edit, so padding + empty gutters were
|
||||
// dead zones that felt broken on mobile.
|
||||
if (_isNotesMobileMode() && !state.selectMode) {
|
||||
const _INTERACTIVE = 'button, a, input, label, .note-card-color-dot, .note-checkbox, .note-checkbox-rm, .note-cl-quickadd, .note-agent-tag, .note-card-pin, .note-card-corner-trash, .note-card-corner-menu, .note-card-corner-unarchive, .note-card-edit-corner, .note-card-reminder, .note-card-cb';
|
||||
body.querySelectorAll('.note-card').forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
if (e.target.closest(_INTERACTIVE)) return;
|
||||
e.stopPropagation();
|
||||
tapToEditOrSelect(card);
|
||||
});
|
||||
});
|
||||
}
|
||||
// Multi-select checkbox (only in select mode)
|
||||
body.querySelectorAll('.note-card-cb').forEach(cb => {
|
||||
cb.addEventListener('click', (e) => e.stopPropagation());
|
||||
cb.addEventListener('change', () => {
|
||||
const id = cb.dataset.noteId;
|
||||
if (cb.checked) app.selectId(id);
|
||||
else app.deselectId(id);
|
||||
cb.closest('.note-card').classList.toggle('note-card-selected', cb.checked);
|
||||
_updateBulkBar();
|
||||
});
|
||||
});
|
||||
// Pin toggle (optimistic)
|
||||
body.querySelectorAll('.note-card-pin').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
cardOperations.togglePin(id);
|
||||
});
|
||||
});
|
||||
// Color picker
|
||||
const _applyCardColor = async (card, id, newColor) => {
|
||||
const isBg = _isBgImage(newColor);
|
||||
COLORS.forEach(c => { if (c.value && c.value !== 'custom') card.classList.remove('note-color-' + c.value); });
|
||||
if (newColor && !isBg) card.classList.add('note-color-' + newColor);
|
||||
if (isBg) card.setAttribute('style', _customColorStyle(newColor));
|
||||
else card.removeAttribute('style');
|
||||
card.querySelectorAll('.note-card-color-dot').forEach(d => {
|
||||
d.classList.toggle('active', _dotIsActive(d.dataset.color, newColor));
|
||||
d.style.background = _dotBg(d.dataset.color, newColor);
|
||||
});
|
||||
await cardOperations.updateColor(id, newColor);
|
||||
};
|
||||
body.querySelectorAll('.note-card-color-dot').forEach(dot => {
|
||||
dot.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const card = dot.closest('.note-card');
|
||||
const id = card.dataset.noteId;
|
||||
if (dot.dataset.color === 'custom') {
|
||||
_pickCustomBgImage().then(url => { if (url) _applyCardColor(card, id, 'bg:' + url); });
|
||||
return;
|
||||
}
|
||||
_applyCardColor(card, id, dot.dataset.color);
|
||||
});
|
||||
});
|
||||
// Plain pencil corner → open editor. The unarchive corner shares the
|
||||
// .note-card-edit-corner class for styling, so :not() keeps the edit
|
||||
// handler off it.
|
||||
body.querySelectorAll('.note-card-edit-corner:not(.note-card-unarchive-corner)').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
if (id) _editNote(id);
|
||||
});
|
||||
});
|
||||
// Copy corner : bottom-right, just left of the Done check. Shared with
|
||||
// the Ctrl/Cmd+C shortcut wired further down so both code paths run the
|
||||
// same serializer + feedback flash.
|
||||
// ⋯ corner menu : Copy + Agent (solve-this-todo).
|
||||
body.querySelectorAll('.note-card-corner-menu').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
_openNoteCornerMenu(btn);
|
||||
});
|
||||
});
|
||||
body.querySelectorAll('.note-card-label-chip').forEach(chip => {
|
||||
chip.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const label = chip.dataset.noteLabelFilter;
|
||||
if (!label) return;
|
||||
if (state.activeLabel === label && state.activeFilter === null) {
|
||||
app.setActiveLabel(null);
|
||||
} else {
|
||||
app.setActiveFilter(null);
|
||||
app.setActiveLabel(label);
|
||||
}
|
||||
_renderNotes();
|
||||
});
|
||||
});
|
||||
// Done (✓) at bottom-right : only visible on hover for active notes.
|
||||
body.querySelectorAll('.note-card-done').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
const card = btn.closest('.note-card');
|
||||
const idx = state.notes.findIndex(n => n.id === id);
|
||||
if (idx < 0) return;
|
||||
// Celebrate completion : same confetti shower the bulk-archive uses.
|
||||
if (card) {
|
||||
const r = card.getBoundingClientRect();
|
||||
spawnConfetti(r.left + r.width / 2, r.top + r.height / 2, 80);
|
||||
}
|
||||
const finish = cardOperations.stageArchive(id);
|
||||
if (!finish) return;
|
||||
if (card) {
|
||||
card.classList.add('note-card-sliding-out');
|
||||
let done = false;
|
||||
const once = () => { if (done) return; done = true; finish(); };
|
||||
card.addEventListener('transitionend', once, { once: true });
|
||||
setTimeout(once, 400);
|
||||
} else {
|
||||
finish();
|
||||
}
|
||||
});
|
||||
});
|
||||
// Unarchive corner : only visible in archive view.
|
||||
body.querySelectorAll('.note-card-corner-unarchive').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
cardOperations.unarchive(id);
|
||||
});
|
||||
});
|
||||
// Trash corner : archive view only. Permanent delete, no confirmation.
|
||||
body.querySelectorAll('.note-card-corner-trash').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
cardOperations.deleteOptimistically(id, true);
|
||||
});
|
||||
});
|
||||
|
||||
body.querySelectorAll('.note-card-archive').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
if (!id) return;
|
||||
const card = btn.closest('.note-card');
|
||||
let done = false;
|
||||
const finishRemove = () => {
|
||||
if (done) return;
|
||||
done = true;
|
||||
_archiveNoteById(id, { card, celebrate: true });
|
||||
};
|
||||
if (card) {
|
||||
card.classList.add('note-card-sliding-out');
|
||||
card.addEventListener('transitionend', finishRemove, { once: true });
|
||||
setTimeout(finishRemove, 400);
|
||||
} else {
|
||||
finishRemove();
|
||||
}
|
||||
});
|
||||
});
|
||||
// Unarchive (optimistic) : only present in archive view
|
||||
body.querySelectorAll('.note-card-unarchive').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
cardOperations.unarchive(id);
|
||||
});
|
||||
});
|
||||
// Delete (optimistic)
|
||||
body.querySelectorAll('.note-card-delete, .note-card-x').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
cardOperations.deleteOptimistically(id);
|
||||
});
|
||||
});
|
||||
// Copy entire checklist (title + items, markdown-style)
|
||||
body.querySelectorAll('.note-card-copy').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
const id = btn.dataset.noteId;
|
||||
const note = state.notes.find(n => n.id === id);
|
||||
if (!note) return;
|
||||
const lines = [];
|
||||
if (note.title) lines.push(note.title);
|
||||
if (note.content) lines.push(note.content);
|
||||
if (lines.length) lines.push('');
|
||||
for (const it of (note.items || [])) {
|
||||
if (!it || !(it.text || '').trim()) continue;
|
||||
lines.push(`- [${it.done ? 'x' : ' '}] ${(it.text || '').trim()}`);
|
||||
}
|
||||
const text = lines.join('\n').trim();
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
uiModule.showToast?.(`Copied ${(note.items || []).filter(i => (i?.text || '').trim()).length} items`);
|
||||
} catch {
|
||||
// Fallback for browsers blocking the async API
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed'; ta.style.left = '-9999px';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { document.execCommand('copy'); uiModule.showToast?.('Copied'); }
|
||||
catch { uiModule.showError?.('Copy failed'); }
|
||||
ta.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
_wireCardChecklist(body);
|
||||
_wireCardReorder(body);
|
||||
|
||||
}
|
||||
|
||||
return { _bindCardEvents };
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
/** Render note cards from application queries and read-only state. */
|
||||
import { _nextGoalStep, _goalProgress, _hasItems, _standardVisualVariant, _visibleNoteTags } from '../domain/noteRules.js';
|
||||
import { _hasTimeComponent, _formatRepeatLabel } from '../domain/recurrence.js';
|
||||
export function createCardRendering({
|
||||
COLORS,
|
||||
COLOR_HEX,
|
||||
_animateReflow,
|
||||
_applyMasonry,
|
||||
_bindCardEvents,
|
||||
_captureCardPositions,
|
||||
_customColorStyle,
|
||||
_dotBg,
|
||||
_dotIsActive,
|
||||
_esc,
|
||||
_formatDueDate,
|
||||
_formatReminderTag,
|
||||
_hasActiveReminder,
|
||||
_isBgImage,
|
||||
_isDueOverdue,
|
||||
_isNotesMobileMode,
|
||||
_linkify,
|
||||
_loadActiveHighlights,
|
||||
_renderLabelsInto,
|
||||
_renderQuickAdd,
|
||||
_safeImgSrc,
|
||||
_sortedVisibleNotes,
|
||||
_updateRailBadge,
|
||||
_wireTodayView,
|
||||
state,
|
||||
uiModule
|
||||
}) {
|
||||
function _renderLoadingSkeleton() {
|
||||
const body = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (!body) return;
|
||||
body.innerHTML = '';
|
||||
_renderLabelsInto(body);
|
||||
_renderQuickAdd(body);
|
||||
const skel = document.createElement('div');
|
||||
skel.className = 'notes-skeleton';
|
||||
skel.innerHTML = `
|
||||
<div class="notes-skeleton-card"></div>
|
||||
<div class="notes-skeleton-card"></div>
|
||||
<div class="notes-skeleton-card short"></div>
|
||||
<div class="notes-skeleton-card"></div>
|
||||
`;
|
||||
body.appendChild(skel);
|
||||
}
|
||||
|
||||
function _renderNotes() {
|
||||
_updateRailBadge();
|
||||
const body = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (!body) return;
|
||||
const prevPositions = _captureCardPositions();
|
||||
const activeReminderHighlights = _loadActiveHighlights();
|
||||
|
||||
const sorted = _sortedVisibleNotes();
|
||||
|
||||
let html = '';
|
||||
// Today view: render a compact card listing the next-unchecked step from
|
||||
// each active goal. Tapping a step toggles it done (same idx-based wiring
|
||||
// as regular checkboxes). Tapping the title opens the goal note for full
|
||||
// editing.
|
||||
if (state.activeFilter === 'today') {
|
||||
body.innerHTML = '';
|
||||
_renderLabelsInto(body);
|
||||
_renderQuickAdd(body);
|
||||
if (sorted.length === 0) {
|
||||
body.insertAdjacentHTML('beforeend', `<div class="notes-empty">All caught up — no pending goal steps right now.</div>`);
|
||||
} else {
|
||||
let todayHtml = `<div class="notes-today-wrap">
|
||||
<div class="notes-today-header">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
<span>Today · one step per goal</span>
|
||||
</div>
|
||||
<div class="notes-today-list">`;
|
||||
for (const note of sorted) {
|
||||
const next = _nextGoalStep(note);
|
||||
if (!next) continue;
|
||||
const progress = _goalProgress(note).trim();
|
||||
todayHtml += `<div class="notes-today-row" data-note-id="${note.id}">
|
||||
<span class="note-check-dot" data-note-id="${note.id}" data-idx="${next.idx}" title="Mark step done"></span>
|
||||
<div class="notes-today-text">
|
||||
<div class="notes-today-title" data-action="edit" data-note-id="${note.id}">${_esc(note.title || '(untitled goal)')}</div>
|
||||
<div class="notes-today-step">${_linkify(next.item.text || '')}</div>
|
||||
</div>
|
||||
<span class="notes-today-progress">${_esc(progress)}</span>
|
||||
</div>`;
|
||||
}
|
||||
todayHtml += `</div></div>`;
|
||||
body.insertAdjacentHTML('beforeend', todayHtml);
|
||||
}
|
||||
_wireTodayView(body);
|
||||
return;
|
||||
}
|
||||
for (const note of sorted) {
|
||||
if (state.editingId === note.id) continue; // skip : form is shown instead
|
||||
const borderColor = COLOR_HEX[note.color || ''] || 'var(--border)';
|
||||
const dueFmt = _formatDueDate(note.due_date);
|
||||
const overdue = _isDueOverdue(note.due_date);
|
||||
|
||||
let contentHtml = '';
|
||||
if (_hasItems(note) && Array.isArray(note.items)) {
|
||||
// Goal notes can carry a free-form description above the step list :
|
||||
// todos rarely do, but the same render works for both.
|
||||
if (note.note_type === 'goal' && (note.content || '').trim()) {
|
||||
const fullText = note.content || '';
|
||||
const preview = fullText.length > 300 ? fullText.slice(0, 300) + '…' : fullText;
|
||||
contentHtml += `<div class="note-goal-desc">${_esc(preview)}</div>`;
|
||||
}
|
||||
contentHtml += '<div class="note-checklist-preview">';
|
||||
// Show ALL items : the preview container is scrollable (CSS caps
|
||||
// its max-height + overflow-y:auto), so there's no need to truncate.
|
||||
for (let i = 0; i < note.items.length; i++) {
|
||||
const item = note.items[i];
|
||||
const doneClass = item.done ? ' done' : '';
|
||||
const indent = Math.min(item.indent || 0, 3);
|
||||
contentHtml += `<div class="note-checkbox${doneClass}" data-note-id="${note.id}" data-idx="${i}" style="padding-left:${indent * 16}px">
|
||||
<span class="note-check-dot" title="Mark done"></span>
|
||||
<span class="note-check-text">${_linkify(item.text)}</span>
|
||||
<button class="note-checkbox-edit" data-note-id="${note.id}" data-idx="${i}" title="Edit item">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
</button>
|
||||
<button class="note-checkbox-rm" data-note-id="${note.id}" data-idx="${i}" title="Delete item">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>`;
|
||||
}
|
||||
contentHtml += '</div>';
|
||||
} else {
|
||||
const fullText = note.content || '';
|
||||
const preview = fullText.length > 600 ? fullText.slice(0, 600) + '…' : fullText;
|
||||
// _linkify already calls _esc internally, so URLs become clickable
|
||||
// anchors (used by e.g. the "remind me to reply" email deep-link).
|
||||
contentHtml = preview ? `<div class="note-content-preview">${_linkify(preview)}</div>` : '';
|
||||
}
|
||||
|
||||
const isBg = _isBgImage(note.color);
|
||||
const cc = (note.color && !isBg) ? ' note-color-' + note.color : '';
|
||||
const cardStyle = isBg ? ` style="${_customColorStyle(note.color)}"` : '';
|
||||
const isStandard = !note.note_type || note.note_type === 'note';
|
||||
const visualClass = isStandard && !note.color ? ` note-standard note-standard-v${_standardVisualVariant(note)}` : '';
|
||||
const sel = state.selectedIds.has(note.id) ? ' note-card-selected' : '';
|
||||
const reminderTagHtml = note.due_date && _hasTimeComponent(note.due_date)
|
||||
? `<div class="note-card-reminder${overdue ? ' overdue' : ''}">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span>${_esc(_formatReminderTag(note.due_date))}${note.repeat && note.repeat !== 'none' ? ' · ' + _esc(_formatRepeatLabel(note.repeat, new Date(note.due_date))) : ''}</span>
|
||||
</div>`
|
||||
: '';
|
||||
const noteTags = _visibleNoteTags(note);
|
||||
const dueBadge = dueFmt && !_hasTimeComponent(note.due_date) ? `<span class="note-due-inline${overdue ? ' note-due-overdue' : ''}">${dueFmt}</span>` : '';
|
||||
const colorDots = COLORS.map(c => `<span class="note-card-color-dot${_dotIsActive(c.value, note.color) ? ' active' : ''}" data-color="${c.value}" style="background:${_dotBg(c.value, note.color)}" title="${c.name || 'default'}"></span>`).join('');
|
||||
const goalClass = note.note_type === 'goal' ? ' note-card-goal' : '';
|
||||
const reminderGlowClass = activeReminderHighlights.has(note.id) && _hasActiveReminder(note) ? ' note-card-reminder-fired-sticky' : '';
|
||||
const goalPill = note.note_type === 'goal'
|
||||
? `<span class="note-goal-pill" title="AI-broken-down goal">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>
|
||||
Goal${_goalProgress(note)}
|
||||
</span>`
|
||||
: '';
|
||||
const drawingClass = note.note_type === 'draw' ? ' note-card-drawing' : '';
|
||||
html += `<div class="note-card${note.pinned ? ' note-card-pinned' : ''}${cc}${visualClass}${sel}${goalClass}${drawingClass}${reminderGlowClass}${state.selectMode ? ' note-card-selectmode' : ''}" draggable="${(state.selectMode || _isNotesMobileMode()) ? 'false' : 'true'}" data-note-id="${note.id}"${cardStyle}>
|
||||
${state.selectMode ? `<input type="checkbox" class="memory-select-cb note-card-cb" data-note-id="${note.id}" ${state.selectedIds.has(note.id) ? 'checked' : ''} />` : ''}
|
||||
${goalPill}
|
||||
<button class="note-card-pin${note.pinned ? ' active' : ''}" data-note-id="${note.id}" title="${note.pinned ? 'Unpin' : 'Pin'}">
|
||||
<svg width="16" height="16" viewBox="0 0 24 28" fill="${note.pinned ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${note.pinned ? ' style="color:var(--accent,var(--red));"' : ''}><g transform="rotate(${note.pinned ? 0 : 45} 12 14)" style="transition:transform 0.2s ease;"><line x1="12" y1="17" x2="12" y2="27"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17z"/></g></svg>
|
||||
</button>
|
||||
${state.showingArchived
|
||||
? `<button class="note-card-corner-trash" data-note-id="${note.id}" title="Delete forever" aria-label="Delete forever">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
||||
</button>
|
||||
<button class="note-card-corner-unarchive" data-note-id="${note.id}" title="Unarchive" aria-label="Unarchive note">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14l-5-5 5-5"/><path d="M4 9h11a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5H9"/></svg>
|
||||
</button>`
|
||||
: `<button class="note-card-done" data-note-id="${note.id}" title="Mark done" aria-label="Mark done">
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</button>
|
||||
${_hasItems(note) ? `<button class="note-card-copy note-card-copy-corner" data-note-id="${note.id}" title="Copy all items" aria-label="Copy all items">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
</button>` : ''}`}
|
||||
<div class="note-card-header">
|
||||
<div class="note-card-title${note.title ? '' : ' empty'}" data-action="edit">${_esc(note.title || '')}</div>
|
||||
${dueBadge}
|
||||
</div>
|
||||
${_safeImgSrc(note.image_url) ? `<img class="note-card-image" src="${_esc(_safeImgSrc(note.image_url))}" alt="" draggable="false" />` : ''}
|
||||
${contentHtml}
|
||||
${_hasItems(note) ? `<div class="note-cl-quickadd"><input type="text" class="note-cl-quickadd-input" placeholder="+ Add item" data-note-id="${note.id}" /></div>` : ''}
|
||||
${reminderTagHtml}
|
||||
${noteTags.length ? `<div class="note-card-label">${noteTags.map(t => `<button type="button" class="note-card-label-chip" data-note-label-filter="${_esc(t)}" title="Filter #${_esc(t)}">#${_esc(t)}</button>`).join(' ')}</div>` : ''}
|
||||
<div class="note-card-actions">
|
||||
<div class="note-card-colors">${colorDots}</div>
|
||||
<span style="flex:1"></span>
|
||||
${state.showingArchived ? `
|
||||
<button class="note-card-action note-card-delete" data-note-id="${note.id}" title="Delete permanently">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
||||
</button>
|
||||
<button class="note-card-action note-card-unarchive" data-note-id="${note.id}" title="Unarchive">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><polyline points="3 4 3 10 9 10"/></svg>
|
||||
</button>` : `
|
||||
${_hasItems(note) ? `
|
||||
<button class="note-card-action note-card-copy" data-note-id="${note.id}" title="Copy all items">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
</button>` : ''}
|
||||
<button class="note-card-action note-card-archive" data-note-id="${note.id}" title="Save (archive)">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
|
||||
</button>
|
||||
<button class="note-card-action note-card-delete" data-note-id="${note.id}" title="Delete">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
<button class="note-card-action note-card-corner-menu" data-note-id="${note.id}" title="More" aria-label="More actions">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/></svg>
|
||||
</button>`}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Always render quick-add at top (collapsed unless user is typing)
|
||||
const existingForm = body.querySelector('.note-form');
|
||||
if (existingForm && state.editingId === '__new__') {
|
||||
// Keep the expanded form, replace cards after it
|
||||
const next = [...body.children].filter(c => c !== existingForm);
|
||||
next.forEach(c => c.remove());
|
||||
if (sorted.length === 0) {
|
||||
body.insertAdjacentHTML('beforeend', '<div class="notes-empty-msg">No notes <span style="vertical-align:-3px;margin-left:4px;">' + uiModule.emptyStateIcon('smiley') + '</span></div>');
|
||||
} else {
|
||||
existingForm.insertAdjacentHTML('afterend', html);
|
||||
}
|
||||
} else {
|
||||
body.innerHTML = '';
|
||||
_renderLabelsInto(body);
|
||||
_renderQuickAdd(body);
|
||||
if (sorted.length === 0) {
|
||||
body.insertAdjacentHTML('beforeend', '<div class="notes-empty-msg">No notes yet <span style="vertical-align:-3px;margin-left:4px;">' + uiModule.emptyStateIcon('smiley') + '</span></div>');
|
||||
} else {
|
||||
body.insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
}
|
||||
|
||||
_bindCardEvents(body);
|
||||
_animateReflow(prevPositions);
|
||||
_applyMasonry(body);
|
||||
}
|
||||
|
||||
return { _renderLoadingSkeleton, _renderNotes };
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/** Desktop and large-touch-device card reorder gestures. */
|
||||
export function createCardReorder({
|
||||
lifecycle,
|
||||
_isNotesMobileMode,
|
||||
persistOrder,
|
||||
state
|
||||
}) {
|
||||
function _wireCardReorder(body) {
|
||||
lifecycle.release(body);
|
||||
// Drag-reorder notes on pointer/mouse devices. Mobile uses the custom
|
||||
// placeholder sorter below `_bindLongPressDrag`; native HTML5 dragging is
|
||||
// unreliable on touch browsers and can compete with the long-press flow.
|
||||
if (!_isNotesMobileMode()) {
|
||||
body.querySelectorAll('.note-card').forEach(card => {
|
||||
card.addEventListener('dragstart', (e) => {
|
||||
if (e.target.closest('.note-checkbox, .note-card-x, .note-card-select, .note-card-pin, .note-card-action, .note-card-color-dot, .note-card-title, .note-card-edit, .note-card-edit-corner, .note-card-done, .note-card-corner-menu, .note-agent-tag, .note-card-label-chip')) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
card.classList.add('dragging');
|
||||
body.classList.add('drag-active');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
try { e.dataTransfer.setData('text/plain', card.dataset.noteId); } catch {}
|
||||
});
|
||||
card.addEventListener('dragend', async () => {
|
||||
card.classList.remove('dragging');
|
||||
body.classList.remove('drag-active');
|
||||
body.querySelectorAll('.drop-before, .drop-after').forEach(el => el.classList.remove('drop-before', 'drop-after'));
|
||||
const ids = [...body.querySelectorAll('.note-card')].map(c => c.dataset.noteId);
|
||||
try { await persistOrder(ids); }
|
||||
catch {}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Track which card we last swapped with so a single hover-over triggers
|
||||
// one swap, not a jitter as the pointer keeps moving inside the same card.
|
||||
let _lastSwapId = null;
|
||||
function _maybeSwap(dragging, clientX, clientY) {
|
||||
const target = document.elementFromPoint(clientX, clientY)?.closest('.note-card');
|
||||
if (!target || target === dragging || !body.contains(target)) return;
|
||||
const id = target.dataset.noteId;
|
||||
if (id === _lastSwapId) return;
|
||||
// FLIP across ALL siblings. In list view only `target` moves visually, but
|
||||
// in grid view (2-col) and when the pinned-section grid-column-start rule
|
||||
// shifts, several cards reflow at once. Capture every card's pre-swap rect,
|
||||
// do the DOM swap, then animate any that actually moved. The dragging card
|
||||
// is excluded : it's already finger-tracked via translate3d.
|
||||
const cards = [...body.querySelectorAll('.note-card')].filter(c => c !== dragging);
|
||||
const prevRects = new Map(cards.map(c => [c, c.getBoundingClientRect()]));
|
||||
const draggingNext = dragging.nextSibling === target ? dragging : dragging.nextSibling;
|
||||
body.insertBefore(dragging, target);
|
||||
body.insertBefore(target, draggingNext);
|
||||
for (const c of cards) {
|
||||
const prev = prevRects.get(c);
|
||||
const next = c.getBoundingClientRect();
|
||||
const dx = prev.left - next.left;
|
||||
const dy = prev.top - next.top;
|
||||
if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;
|
||||
c.style.transition = 'none';
|
||||
c.style.transform = `translate(${dx}px, ${dy}px)`;
|
||||
requestAnimationFrame(() => {
|
||||
c.style.transition = 'transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1)';
|
||||
c.style.transform = '';
|
||||
c.addEventListener('transitionend', () => { c.style.transition = ''; }, { once: true });
|
||||
});
|
||||
}
|
||||
_lastSwapId = id;
|
||||
}
|
||||
lifecycle.listen(body, body, 'dragover', (e) => {
|
||||
e.preventDefault();
|
||||
const dragging = body.querySelector('.note-card.dragging');
|
||||
if (!dragging) return;
|
||||
_maybeSwap(dragging, e.clientX, e.clientY);
|
||||
});
|
||||
lifecycle.listen(body, body, 'dragend', () => { _lastSwapId = null; });
|
||||
|
||||
// Legacy touch drag for larger touch devices only. Phone-sized Notes uses
|
||||
// the placeholder sorter wired by `_bindLongPressDrag`; running both flows
|
||||
// makes one press start two independent drag sessions.
|
||||
if (!_isNotesMobileMode() && 'ontouchstart' in window) {
|
||||
let dragCard = null;
|
||||
let isDragging = false;
|
||||
let longPressTimer = null;
|
||||
let startX = 0, startY = 0;
|
||||
const LONG_PRESS_MS = 350;
|
||||
const MOVE_THRESHOLD_PX = 8;
|
||||
const _selectorSkip = '.note-checkbox, .note-card-x, .note-card-select, .note-card-pin, .note-card-action, .note-card-color-dot, .note-card-title, .note-card-edit, .note-card-edit-corner, .note-card-done, .note-card-corner-menu, .note-agent-tag, .note-card-label-chip, input, textarea, button, a';
|
||||
|
||||
// Anchor for the finger-follow transform. Recomputed after every swap so
|
||||
// the card stays under the finger across reorderings.
|
||||
let anchorX = 0, anchorY = 0;
|
||||
const _follow = (clientX, clientY) => {
|
||||
if (!dragCard) return;
|
||||
const dx = clientX - anchorX;
|
||||
const dy = clientY - anchorY;
|
||||
// Compose with the CSS .dragging transform (scale + rotate).
|
||||
dragCard.style.transform = `translate3d(${dx}px, ${dy}px, 0) scale(1.03) rotate(-0.6deg)`;
|
||||
};
|
||||
const _reanchor = (clientX, clientY) => {
|
||||
if (!dragCard) return;
|
||||
// Clear any prior translate so the card resettles in its natural slot,
|
||||
// then anchor at the finger's current position. Subsequent _follow calls
|
||||
// translate by (finger - anchor), keeping the finger at the same relative
|
||||
// spot on the card it had when we re-anchored.
|
||||
dragCard.style.transform = '';
|
||||
anchorX = clientX;
|
||||
anchorY = clientY;
|
||||
};
|
||||
|
||||
const _endDrag = (committed) => {
|
||||
clearTimeout(longPressTimer);
|
||||
longPressTimer = null;
|
||||
if (dragCard) {
|
||||
dragCard.classList.remove('dragging');
|
||||
dragCard.style.transform = '';
|
||||
}
|
||||
body.classList.remove('drag-active');
|
||||
_lastSwapId = null;
|
||||
if (isDragging) {
|
||||
document.documentElement.style.touchAction = '';
|
||||
if (committed) {
|
||||
const ids = [...body.querySelectorAll('.note-card')].map(c => c.dataset.noteId);
|
||||
persistOrder(ids).catch(() => {});
|
||||
}
|
||||
}
|
||||
dragCard = null;
|
||||
isDragging = false;
|
||||
};
|
||||
lifecycle.onDispose(body, () => _endDrag(false));
|
||||
|
||||
lifecycle.listen(body, body, 'touchstart', (e) => {
|
||||
if (state.selectMode) return;
|
||||
const card = e.target.closest('.note-card');
|
||||
if (!card) return;
|
||||
if (e.target.closest(_selectorSkip)) return;
|
||||
const t = e.touches[0];
|
||||
startX = t.clientX; startY = t.clientY;
|
||||
dragCard = card;
|
||||
longPressTimer = setTimeout(() => {
|
||||
if (!dragCard) return;
|
||||
isDragging = true;
|
||||
dragCard.classList.add('dragging');
|
||||
body.classList.add('drag-active');
|
||||
document.documentElement.style.touchAction = 'none';
|
||||
_reanchor(startX, startY);
|
||||
try { if (navigator.vibrate) navigator.vibrate(15); } catch {}
|
||||
}, LONG_PRESS_MS);
|
||||
}, { passive: true });
|
||||
|
||||
lifecycle.listen(body, body, 'touchmove', (e) => {
|
||||
if (!dragCard) return;
|
||||
const t = e.touches[0];
|
||||
if (!isDragging) {
|
||||
// Movement before long-press fires = user is scrolling; cancel pickup.
|
||||
if (Math.abs(t.clientX - startX) > MOVE_THRESHOLD_PX || Math.abs(t.clientY - startY) > MOVE_THRESHOLD_PX) {
|
||||
clearTimeout(longPressTimer);
|
||||
longPressTimer = null;
|
||||
dragCard = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
// Live-follow the finger first, then check for a swap. After a swap the
|
||||
// card's natural slot moves, so we re-anchor and re-apply the offset.
|
||||
_follow(t.clientX, t.clientY);
|
||||
const before = dragCard.parentNode && [...dragCard.parentNode.children].indexOf(dragCard);
|
||||
_maybeSwap(dragCard, t.clientX, t.clientY);
|
||||
const after = dragCard.parentNode && [...dragCard.parentNode.children].indexOf(dragCard);
|
||||
if (before !== after) {
|
||||
_reanchor(t.clientX, t.clientY);
|
||||
_follow(t.clientX, t.clientY);
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
lifecycle.listen(body, body, 'touchend', () => _endDrag(true));
|
||||
lifecycle.listen(body, body, 'touchcancel', () => _endDrag(false));
|
||||
}
|
||||
}
|
||||
|
||||
return { _wireCardReorder };
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
/** Checklist rows, goal forms, keyboard input and item collection. */
|
||||
export function createChecklist({
|
||||
_esc,
|
||||
_uid,
|
||||
spawnConfetti
|
||||
}) {
|
||||
function _buildGoalHtml(note, items) {
|
||||
const desc = (note?.content || '').toString();
|
||||
return `
|
||||
<div class="note-form-goal">
|
||||
<textarea class="note-form-goal-desc" placeholder="Description (optional)" rows="3">${_esc(desc)}</textarea>
|
||||
${_buildChecklistHtml(items)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function _wireGoalForm(form, container) {
|
||||
if (!container) return;
|
||||
// _wireHashtag is a closure inside _buildForm : out of scope here. Inline
|
||||
// the same behavior (type "#foo " in the description → tag added to the
|
||||
// form's label input) so editing a goal note doesn't ReferenceError.
|
||||
const desc = container.querySelector('.note-form-goal-desc');
|
||||
const labelInput = form?.querySelector('.note-form-label');
|
||||
if (desc && labelInput) {
|
||||
const tagRe = /(^|\s)#([A-Za-z0-9][\w-]*)\s$/;
|
||||
desc.addEventListener('input', () => {
|
||||
const m = tagRe.exec(desc.value);
|
||||
if (!m) return;
|
||||
const tag = m[2];
|
||||
// Same dedup-after-stripping fix as the plain note hashtag handler.
|
||||
const existing = labelInput.value.trim().split(/\s+/).filter(Boolean);
|
||||
const stripped = existing.map(t => t.replace(/^#+/, ''));
|
||||
if (!stripped.includes(tag)) {
|
||||
existing.push('#' + tag);
|
||||
labelInput.value = existing.join(' ');
|
||||
labelInput.classList.add('flash-once');
|
||||
setTimeout(() => labelInput.classList.remove('flash-once'), 600);
|
||||
}
|
||||
const cut = desc.value.length - m[0].length + m[1].length;
|
||||
desc.value = desc.value.slice(0, cut);
|
||||
});
|
||||
}
|
||||
// Always wire the checklist. The previous gate on a `note-form-goal-fresh`
|
||||
// class was dead code : nothing ever set that class, so the editor never
|
||||
// hooked up add/drag/Tab.
|
||||
_wireChecklist(container);
|
||||
}
|
||||
|
||||
function _buildChecklistHtml(items) {
|
||||
let html = '<div class="note-checklist-inputs">';
|
||||
for (const item of items) {
|
||||
const indent = Math.min(item.indent || 0, 3);
|
||||
html += `<div class="note-cl-row${item.done ? ' done' : ''}" draggable="true" data-item-id="${item.id || _uid()}" data-indent="${indent}" style="padding-left:${indent * 16}px">
|
||||
<span class="note-cl-grip" title="Drag to reorder">⋮⋮</span>
|
||||
<span class="note-cl-dot"></span>
|
||||
<input type="text" class="note-cl-text" value="${_esc(item.text)}" placeholder="Item..." />
|
||||
<button type="button" class="note-cl-rm">×</button>
|
||||
</div>`;
|
||||
}
|
||||
// `type="button"` matters on mobile : without it some browsers treat
|
||||
// bare <button> as form-submit and the click handler never fires inside
|
||||
// certain containers. Also bumped tap target so fingers don't miss.
|
||||
html += `<button type="button" class="note-cl-add">+ Add</button></div>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
function _wireRow(row, container) {
|
||||
row.querySelector('.note-cl-rm')?.addEventListener('click', () => row.remove());
|
||||
row.querySelector('.note-cl-dot')?.addEventListener('click', () => {
|
||||
const wasDone = row.classList.contains('done');
|
||||
row.classList.toggle('done');
|
||||
// The custom dot has no native input/change event. Notify the form so
|
||||
// mobile edit mode switches its action from Archive back to Update.
|
||||
container.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
const becameDone = !wasDone; // we just flipped it
|
||||
const dot = row.querySelector('.note-cl-dot');
|
||||
const dRect = (dot || row).getBoundingClientRect();
|
||||
// Small confetti burst on each fresh check so the user gets a
|
||||
// "well done" beat per item, not just the grand-finale on all-done.
|
||||
if (becameDone) {
|
||||
spawnConfetti(dRect.left + dRect.width / 2, dRect.top + dRect.height / 2, 16);
|
||||
}
|
||||
// Bigger burst when the whole list is now done.
|
||||
const rows = [...container.querySelectorAll('.note-cl-row')];
|
||||
const hasText = rows.some(r => (r.querySelector('.note-cl-text')?.value || '').trim().length > 0);
|
||||
if (hasText && rows.every(r => r.classList.contains('done') || !(r.querySelector('.note-cl-text')?.value || '').trim())) {
|
||||
spawnConfetti(dRect.left + dRect.width / 2, dRect.top + dRect.height / 2, 60);
|
||||
}
|
||||
});
|
||||
const txt = row.querySelector('.note-cl-text');
|
||||
txt?.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); container.querySelector('.note-cl-add')?.click(); }
|
||||
else if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const cur = parseInt(row.dataset.indent || '0');
|
||||
const next = e.shiftKey ? Math.max(0, cur - 1) : Math.min(3, cur + 1);
|
||||
row.dataset.indent = String(next);
|
||||
row.style.paddingLeft = (next * 16) + 'px';
|
||||
} else if (e.key === 'Backspace' && txt.value === '') {
|
||||
e.preventDefault();
|
||||
const prev = row.previousElementSibling;
|
||||
row.remove();
|
||||
if (prev && prev.classList.contains('note-cl-row')) prev.querySelector('.note-cl-text')?.focus();
|
||||
}
|
||||
});
|
||||
// Drag handlers
|
||||
row.addEventListener('dragstart', (e) => {
|
||||
row.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
try { e.dataTransfer.setData('text/plain', row.dataset.itemId); } catch {}
|
||||
});
|
||||
row.addEventListener('dragend', () => {
|
||||
row.classList.remove('dragging');
|
||||
container.querySelectorAll('.drop-before, .drop-after').forEach(el => el.classList.remove('drop-before', 'drop-after'));
|
||||
});
|
||||
}
|
||||
|
||||
function _wireChecklist(container) {
|
||||
if (!container) return;
|
||||
// Delegate the + Add click off the container so re-renders + mobile
|
||||
// touch quirks don't leave the button dead. The previous direct
|
||||
// `addEventListener` on the button silently broke on mobile when
|
||||
// _wireChecklist ran more than once (or before the button was in DOM).
|
||||
if (!container._addDelegated) {
|
||||
container._addDelegated = true;
|
||||
container.addEventListener('click', (ev) => {
|
||||
const addBtn = ev.target.closest('.note-cl-add');
|
||||
if (!addBtn || !container.contains(addBtn)) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const inputs = container.querySelector('.note-checklist-inputs');
|
||||
if (!inputs) return;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'note-cl-row';
|
||||
row.draggable = true;
|
||||
row.dataset.itemId = _uid();
|
||||
row.dataset.indent = '0';
|
||||
row.innerHTML = `<span class="note-cl-grip" title="Drag">⋮⋮</span><span class="note-cl-dot"></span><input type="text" class="note-cl-text" placeholder="Item..." /><button type="button" class="note-cl-rm">×</button>`;
|
||||
inputs.insertBefore(row, addBtn);
|
||||
row.querySelector('.note-cl-text').focus();
|
||||
_wireRow(row, container);
|
||||
});
|
||||
}
|
||||
container.querySelectorAll('.note-cl-row').forEach(row => _wireRow(row, container));
|
||||
|
||||
// Drag-over handler on the inputs container
|
||||
const inputs = container.querySelector('.note-checklist-inputs');
|
||||
if (inputs) {
|
||||
inputs.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
const dragging = inputs.querySelector('.note-cl-row.dragging');
|
||||
if (!dragging) return;
|
||||
inputs.querySelectorAll('.drop-before, .drop-after').forEach(el => el.classList.remove('drop-before', 'drop-after'));
|
||||
const rows = [...inputs.querySelectorAll('.note-cl-row:not(.dragging)')];
|
||||
const after = rows.find(r => {
|
||||
const box = r.getBoundingClientRect();
|
||||
return e.clientY < box.top + box.height / 2;
|
||||
});
|
||||
if (after) {
|
||||
after.classList.add('drop-before');
|
||||
inputs.insertBefore(dragging, after);
|
||||
} else if (rows.length) {
|
||||
rows[rows.length - 1].classList.add('drop-after');
|
||||
inputs.insertBefore(dragging, container.querySelector('.note-cl-add'));
|
||||
}
|
||||
});
|
||||
inputs.addEventListener('dragleave', (e) => {
|
||||
if (!inputs.contains(e.relatedTarget)) {
|
||||
inputs.querySelectorAll('.drop-before, .drop-after').forEach(el => el.classList.remove('drop-before', 'drop-after'));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function _collectItems(form) {
|
||||
const items = [];
|
||||
form.querySelectorAll('.note-cl-row').forEach(row => {
|
||||
const text = row.querySelector('.note-cl-text')?.value?.trim();
|
||||
if (text) items.push({
|
||||
id: row.dataset.itemId || _uid(),
|
||||
text,
|
||||
done: row.classList.contains('done'),
|
||||
indent: parseInt(row.dataset.indent || '0'),
|
||||
});
|
||||
});
|
||||
return items;
|
||||
}
|
||||
|
||||
return { _buildGoalHtml, _wireGoalForm, _buildChecklistHtml, _wireRow, _wireChecklist, _collectItems };
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/** Mobile checklist grip dragging and document listener ownership. */
|
||||
export function createChecklistReorder({
|
||||
lifecycle
|
||||
}) {
|
||||
let _clDrag = null;
|
||||
|
||||
let _clDocBound = false;
|
||||
let _clOwner = null;
|
||||
|
||||
function _wireChecklistTouchReorder(form) {
|
||||
const container = form.querySelector('.note-checklist-inputs');
|
||||
if (!container) return;
|
||||
container.querySelectorAll('.note-cl-grip').forEach(grip => {
|
||||
if (grip.dataset.touchBound === '1') return;
|
||||
grip.dataset.touchBound = '1';
|
||||
grip.addEventListener('touchstart', (e) => {
|
||||
if (e.touches.length !== 1) return;
|
||||
e.preventDefault();
|
||||
const row = grip.closest('.note-cl-row');
|
||||
if (!row) return;
|
||||
_beginChecklistGrab(row, container, e.touches[0]);
|
||||
}, { passive: false });
|
||||
});
|
||||
if (!_clDocBound || _clOwner !== form) {
|
||||
if (_clOwner) lifecycle.release(_clOwner);
|
||||
_clOwner = form;
|
||||
lifecycle.listen(form, document, 'touchmove', _onClTouchMove, { passive: false });
|
||||
lifecycle.listen(form, document, 'touchend', _onClTouchEnd, { passive: true });
|
||||
lifecycle.listen(form, document, 'touchcancel', _onClTouchEnd, { passive: true });
|
||||
_clDocBound = true;
|
||||
}
|
||||
}
|
||||
|
||||
function _beginChecklistGrab(row, container, touch) {
|
||||
if (_clDrag) return;
|
||||
const rect = row.getBoundingClientRect();
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.className = 'note-cl-row-placeholder';
|
||||
placeholder.style.height = rect.height + 'px';
|
||||
container.insertBefore(placeholder, row);
|
||||
|
||||
row.classList.add('note-cl-row-dragging');
|
||||
row.style.position = 'fixed';
|
||||
row.style.left = rect.left + 'px';
|
||||
row.style.top = rect.top + 'px';
|
||||
row.style.width = rect.width + 'px';
|
||||
row.style.zIndex = '10002';
|
||||
row.style.pointerEvents = 'none';
|
||||
|
||||
_clDrag = {
|
||||
row, placeholder, container,
|
||||
grabOffsetX: touch.clientX - rect.left,
|
||||
grabOffsetY: touch.clientY - rect.top,
|
||||
};
|
||||
try { navigator.vibrate?.(8); } catch {}
|
||||
}
|
||||
|
||||
function _onClTouchMove(e) {
|
||||
if (!_clDrag) return;
|
||||
if (e.touches.length !== 1) return;
|
||||
e.preventDefault();
|
||||
const t = e.touches[0];
|
||||
const { row, placeholder, container } = _clDrag;
|
||||
row.style.left = (t.clientX - _clDrag.grabOffsetX) + 'px';
|
||||
row.style.top = (t.clientY - _clDrag.grabOffsetY) + 'px';
|
||||
|
||||
const under = document.elementFromPoint(t.clientX, t.clientY);
|
||||
const target = under && under.closest
|
||||
? under.closest('.note-cl-row:not(.note-cl-row-dragging)')
|
||||
: null;
|
||||
if (!target || target === row) return;
|
||||
if (target.parentNode !== container) return;
|
||||
|
||||
const tRect = target.getBoundingClientRect();
|
||||
const targetMidY = tRect.top + tRect.height / 2;
|
||||
if (t.clientY < targetMidY) {
|
||||
if (placeholder.nextElementSibling !== target) {
|
||||
container.insertBefore(placeholder, target);
|
||||
}
|
||||
} else {
|
||||
if (target.nextElementSibling !== placeholder) {
|
||||
container.insertBefore(placeholder, target.nextElementSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _onClTouchEnd() {
|
||||
if (!_clDrag) return;
|
||||
const { row, placeholder } = _clDrag;
|
||||
_clDrag = null;
|
||||
const phRect = placeholder.getBoundingClientRect();
|
||||
row.style.transition = 'left 0.18s ease, top 0.18s ease';
|
||||
row.style.left = phRect.left + 'px';
|
||||
row.style.top = phRect.top + 'px';
|
||||
setTimeout(() => {
|
||||
placeholder.parentNode.insertBefore(row, placeholder);
|
||||
placeholder.remove();
|
||||
row.classList.remove('note-cl-row-dragging');
|
||||
row.style.cssText = '';
|
||||
// Order is persisted as part of the form's normal save (rows are
|
||||
// re-serialized in DOM order via _collectItems).
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (_clDrag) _onClTouchEnd();
|
||||
_clDocBound = false;
|
||||
_clOwner = null;
|
||||
}
|
||||
return { dispose, _wireChecklistTouchReorder, _beginChecklistGrab, _onClTouchMove, _onClTouchEnd };
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/** Note clipboard feedback and the Copy/Agent corner menu. */
|
||||
import { _serializeNoteForCopy } from '../domain/noteRules.js';
|
||||
export function createClipboard({
|
||||
_agentSolveNote,
|
||||
bindMenuDismiss,
|
||||
dismissOrRemove,
|
||||
state,
|
||||
topPortalZ,
|
||||
uiModule
|
||||
}) {
|
||||
function _openNoteCornerMenu(btn) {
|
||||
document.querySelectorAll('.note-corner-menu-dropdown').forEach(dismissOrRemove);
|
||||
const id = btn.dataset.noteId;
|
||||
const note = state.notes.find(n => n.id === id);
|
||||
if (!note) return;
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'note-corner-menu-dropdown';
|
||||
menu.innerHTML = `
|
||||
<button type="button" class="ncm-item" data-act="copy">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
<button type="button" class="ncm-item" data-act="agent">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect x="4" y="8" width="16" height="12" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg>
|
||||
<span>${note.agent_session_id ? 'Re-run agent' : 'Agent: solve this'}</span>
|
||||
</button>`;
|
||||
document.body.appendChild(menu);
|
||||
const r = btn.getBoundingClientRect();
|
||||
// Right-align to the ⋯ button, clamped to the viewport.
|
||||
const mw = 168;
|
||||
let left = Math.min(r.right - mw, window.innerWidth - mw - 8);
|
||||
left = Math.max(8, left);
|
||||
// Drop down by default; flip up if there isn't room below (the button
|
||||
// sits at the card's bottom edge now).
|
||||
const mh = menu.offsetHeight || 96;
|
||||
const below = window.innerHeight - r.bottom;
|
||||
const top = (below < mh + 8 && r.top > mh + 8) ? (r.top - mh - 4) : (r.bottom + 4);
|
||||
menu.style.cssText += `position:fixed;z-index:${topPortalZ()};top:${Math.round(top)}px;left:${Math.round(left)}px;`;
|
||||
const close = bindMenuDismiss(menu, () => { menu.remove(); });
|
||||
menu.querySelector('[data-act="copy"]').addEventListener('click', () => { close(); _copyNote(id, btn); });
|
||||
menu.querySelector('[data-act="agent"]').addEventListener('click', () => { close(); _agentSolveNote(id); });
|
||||
}
|
||||
|
||||
async function _copyNote(noteId, btnEl) {
|
||||
const note = state.notes.find(n => n.id === noteId);
|
||||
if (!note) return false;
|
||||
const text = _serializeNoteForCopy(note);
|
||||
if (!text) return false;
|
||||
let ok = false;
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
ok = true;
|
||||
} catch {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed'; ta.style.left = '-9999px';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { ok = document.execCommand('copy'); } catch { ok = false; }
|
||||
ta.remove();
|
||||
}
|
||||
if (ok) {
|
||||
if (btnEl && !btnEl._copyFlashing) {
|
||||
const original = btnEl.innerHTML;
|
||||
btnEl._copyFlashing = true;
|
||||
btnEl.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
||||
btnEl.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
btnEl.innerHTML = original;
|
||||
btnEl.classList.remove('copied');
|
||||
btnEl._copyFlashing = false;
|
||||
}, 1200);
|
||||
}
|
||||
uiModule.showToast?.('Copied');
|
||||
} else {
|
||||
uiModule.showError?.('Copy failed');
|
||||
}
|
||||
return ok;
|
||||
}
|
||||
|
||||
return { _openNoteCornerMenu, _copyNote };
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/** Note colors, custom background selection and form color controls. */
|
||||
export function createColors({
|
||||
api
|
||||
}) {
|
||||
const COLORS = [
|
||||
{ name: 'none', value: '' },
|
||||
{ name: 'red', value: 'red' },
|
||||
{ name: 'orange', value: 'orange' },
|
||||
{ name: 'yellow', value: 'yellow' },
|
||||
{ name: 'green', value: 'green' },
|
||||
{ name: 'blue', value: 'blue' },
|
||||
{ name: 'purple', value: 'purple' },
|
||||
{ name: 'custom', value: 'custom' }, // sentinel : clicking opens native color picker
|
||||
];
|
||||
|
||||
const COLOR_HEX = {
|
||||
'': 'var(--border)',
|
||||
// Pale/pastel palette : matches the calendar event color picker.
|
||||
red: '#f0b5ba',
|
||||
orange: '#e8ccb2',
|
||||
yellow: '#f2dfbd',
|
||||
green: '#cce0bc',
|
||||
blue: '#b0d7f7',
|
||||
purple: '#e2bcee',
|
||||
};
|
||||
|
||||
const _CUSTOM_GRADIENT = 'conic-gradient(from 0deg, #e06c75, #d19a66, #e5c07b, #98c379, #61afef, #c678dd, #e06c75)';
|
||||
|
||||
function _isBgImage(c) { return typeof c === 'string' && c.startsWith('bg:'); }
|
||||
|
||||
function _bgImageUrl(c) { return _isBgImage(c) ? c.slice(3) : ''; }
|
||||
|
||||
function _dotBg(value, noteColor) {
|
||||
if (value === 'custom') {
|
||||
const url = _bgImageUrl(noteColor);
|
||||
return url ? `center/cover no-repeat url('${url}')` : _CUSTOM_GRADIENT;
|
||||
}
|
||||
return COLOR_HEX[value];
|
||||
}
|
||||
|
||||
function _dotIsActive(value, noteColor) {
|
||||
if (value === 'custom') return _isBgImage(noteColor);
|
||||
return value === (noteColor || '');
|
||||
}
|
||||
|
||||
function _customColorStyle(c) {
|
||||
if (!_isBgImage(c)) return '';
|
||||
const url = _bgImageUrl(c);
|
||||
return `background-image: linear-gradient(color-mix(in srgb, var(--panel) 60%, transparent), color-mix(in srgb, var(--panel) 60%, transparent)), url('${url}'); background-size: cover; background-position: center; border-color: color-mix(in srgb, var(--fg) 25%, var(--border));`;
|
||||
}
|
||||
|
||||
function _pickCustomBgImage() {
|
||||
return new Promise(resolve => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
input.style.cssText = 'position:fixed; left:-9999px; top:-9999px;';
|
||||
document.body.appendChild(input);
|
||||
let done = false;
|
||||
const finish = (v) => { if (done) return; done = true; input.remove(); resolve(v); };
|
||||
input.addEventListener('change', async () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) return finish(null);
|
||||
const fd = new FormData();
|
||||
fd.append('files', file);
|
||||
try {
|
||||
const res = await api.upload(fd);
|
||||
const data = await res.json();
|
||||
const fileId = data.files?.[0]?.id;
|
||||
if (!fileId) throw new Error('Upload failed');
|
||||
finish(api.uploadUrl(fileId));
|
||||
} catch { finish(null); }
|
||||
});
|
||||
// Best-effort cleanup if user dismisses the dialog.
|
||||
setTimeout(() => { if (!done && !input.files?.length) finish(null); }, 30000);
|
||||
input.click();
|
||||
});
|
||||
}
|
||||
|
||||
function _wireFormColors(form, setColor) {
|
||||
// Color dots : apply to entire form immediately
|
||||
const _applyFormColor = (newColor) => {
|
||||
const currentColor = newColor || '';
|
||||
setColor(currentColor);
|
||||
form.dataset.noteColor = currentColor;
|
||||
const isBg = _isBgImage(currentColor);
|
||||
COLORS.forEach(c => { if (c.value && c.value !== 'custom') form.classList.remove('note-color-' + c.value); });
|
||||
if (currentColor && !isBg) form.classList.add('note-color-' + currentColor);
|
||||
if (isBg) form.setAttribute('style', _customColorStyle(currentColor));
|
||||
else form.removeAttribute('style');
|
||||
form.querySelectorAll('.note-color-dot').forEach(d => {
|
||||
d.classList.toggle('active', _dotIsActive(d.dataset.color, currentColor));
|
||||
d.style.background = _dotBg(d.dataset.color, currentColor);
|
||||
});
|
||||
form.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
};
|
||||
form.querySelectorAll('.note-color-dot').forEach(dot => {
|
||||
dot.addEventListener('click', () => {
|
||||
if (dot.dataset.color === 'custom') {
|
||||
_pickCustomBgImage().then(url => { if (url) _applyFormColor('bg:' + url); });
|
||||
return;
|
||||
}
|
||||
_applyFormColor(dot.dataset.color);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
return { COLORS, COLOR_HEX, _isBgImage, _bgImageUrl, _dotBg, _dotIsActive, _customColorStyle, _pickCustomBgImage, _wireFormColors };
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/** Collect editor drafts, restore them and wire the autosave workflow. */
|
||||
export function createDraftEditor({
|
||||
bindDraft,
|
||||
_collectItems,
|
||||
_loadDraft
|
||||
}) {
|
||||
function _collectFormDraft(form) {
|
||||
if (!form) return null;
|
||||
const type = form.querySelector('.note-form-type-pill.active')?.dataset.type || form.dataset.noteType || 'note';
|
||||
const d = {
|
||||
_ts: Date.now(),
|
||||
note_type: type,
|
||||
color: form.dataset.noteColor || '',
|
||||
title: form.querySelector('.note-form-title')?.value || '',
|
||||
label: form.querySelector('.note-form-label')?.value || '',
|
||||
due_date: form.querySelector('.note-form-due')?.value || null,
|
||||
repeat: form.querySelector('.note-form-repeat')?.value || 'none',
|
||||
};
|
||||
if (type === 'note') d.content = form.querySelector('.note-form-content')?.value || '';
|
||||
else if (type === 'goal') { d.content = form.querySelector('.note-form-goal-desc')?.value || ''; d.items = _collectItems(form); }
|
||||
else d.items = _collectItems(form);
|
||||
return d;
|
||||
}
|
||||
|
||||
function _isDraftEmpty(d) {
|
||||
if (!d) return true;
|
||||
if ((d.title || '').trim()) return false;
|
||||
if ((d.content || '').trim()) return false;
|
||||
if (Array.isArray(d.items) && d.items.some(it => (it.text || '').trim())) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function _wireDraftAutosave(form, id) {
|
||||
const view = {
|
||||
get failed() { return form._autosaveFailed; },
|
||||
set failed(value) { form._autosaveFailed = value; },
|
||||
};
|
||||
const draft = bindDraft({ collect: () => _collectFormDraft(form), id, view });
|
||||
form._flushDraft = draft.flush;
|
||||
form._stopDraftAutosave = draft.stop;
|
||||
form.addEventListener('input', draft.schedule);
|
||||
form.addEventListener('change', draft.schedule);
|
||||
form.addEventListener('click', event => {
|
||||
if (event.target.closest('.note-cl-dot, .note-cl-rm')) draft.schedule();
|
||||
});
|
||||
}
|
||||
|
||||
function _commitOpenInPlaceEditor() {
|
||||
const form = document.querySelector('#notes-pane .note-form');
|
||||
if (!form) return;
|
||||
const d = _collectFormDraft(form);
|
||||
if (_isDraftEmpty(d)) { form.querySelector('.note-form-cancel')?.click(); return; }
|
||||
form.querySelector('.note-form-save')?.click();
|
||||
}
|
||||
|
||||
function _applyDraftToNote(note, id) {
|
||||
const d = _loadDraft(id);
|
||||
if (!d) return { note, restored: false };
|
||||
const merged = { ...(note || {}) };
|
||||
['note_type', 'color', 'title', 'label', 'due_date', 'repeat', 'content', 'items'].forEach(k => {
|
||||
if (d[k] !== undefined) merged[k] = d[k];
|
||||
});
|
||||
return { note: merged, restored: true };
|
||||
}
|
||||
|
||||
return { _collectFormDraft, _isDraftEmpty, _wireDraftAutosave, _commitOpenInPlaceEditor, _applyDraftToNote };
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
/** Canvas drawing tools, local drawing undo and PNG uploads. */
|
||||
export function createDrawing({
|
||||
lifecycle,
|
||||
_safeImgSrc,
|
||||
api,
|
||||
attachColorPicker
|
||||
}) {
|
||||
function _buildDrawHtml() {
|
||||
return `
|
||||
<div class="note-form-draw-wrap">
|
||||
<canvas class="note-form-canvas" width="600" height="320"></canvas>
|
||||
<div class="note-form-draw-toolbar">
|
||||
<input type="color" class="note-form-draw-color" title="Stroke color" value="#222222" />
|
||||
<label class="note-form-draw-tool note-form-draw-size-wrap" title="Stroke size">
|
||||
<input type="range" class="note-form-draw-size" min="1" max="24" value="3" />
|
||||
</label>
|
||||
<div class="note-form-draw-be" role="group">
|
||||
<button type="button" class="note-form-draw-be-btn note-form-draw-brush active" data-mode="pen" title="Brush">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.06 11.9l8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/><path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04 0-1.67-1.34-3.02-3-3.02z"/></svg>
|
||||
</button>
|
||||
<button type="button" class="note-form-draw-be-btn note-form-draw-eraser" data-mode="eraser" title="Eraser">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="note-form-draw-undo" title="Undo" aria-label="Undo">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"></polyline><path d="M4 9h11a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5H9"></path></svg>
|
||||
</button>
|
||||
<button type="button" class="note-form-draw-text" title="Add text — click to cycle size" aria-label="Add text">T<span class="note-form-draw-text-badge"></span></button>
|
||||
<button type="button" class="note-form-draw-line" title="Line — click to cycle size">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="20" x2="20" y2="4"/></svg>
|
||||
<span class="note-form-draw-shape-badge"></span>
|
||||
</button>
|
||||
<button type="button" class="note-form-draw-circle" title="Circle — click to cycle size">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>
|
||||
<span class="note-form-draw-shape-badge"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function _wireCanvas(container, initialImageUrl) {
|
||||
const canvas = container.querySelector('.note-form-canvas');
|
||||
if (!canvas) return;
|
||||
const resolveThemeColor = (expression, fallback) => {
|
||||
const probe = document.createElement('span');
|
||||
probe.style.color = expression;
|
||||
probe.style.position = 'fixed';
|
||||
probe.style.visibility = 'hidden';
|
||||
document.body.appendChild(probe);
|
||||
const resolved = getComputedStyle(probe).color || fallback;
|
||||
probe.remove();
|
||||
return resolved;
|
||||
};
|
||||
const colorToHex = (color, fallback) => {
|
||||
try {
|
||||
const probe = document.createElement('canvas');
|
||||
probe.width = probe.height = 1;
|
||||
const probeCtx = probe.getContext('2d');
|
||||
probeCtx.fillStyle = color;
|
||||
probeCtx.fillRect(0, 0, 1, 1);
|
||||
const [r, g, b] = probeCtx.getImageData(0, 0, 1, 1).data;
|
||||
return `#${[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')}`;
|
||||
} catch { return fallback; }
|
||||
};
|
||||
const surfaceColor = resolveThemeColor('var(--panel, var(--bg))', '#282c34');
|
||||
const surfaceColorHex = colorToHex(surfaceColor, '#282c34');
|
||||
const highlightColor = colorToHex(
|
||||
resolveThemeColor('var(--accent, var(--red))', '#e06c75'),
|
||||
'#e06c75',
|
||||
);
|
||||
const colorInput = container.querySelector('.note-form-draw-color');
|
||||
if (colorInput) colorInput.value = highlightColor;
|
||||
// Bump the backing-store resolution for retina displays so strokes stay
|
||||
// crisp. Set only style.width : leaving style.height to auto so the canvas
|
||||
// scales uniformly via its intrinsic aspect ratio. If both CSS dimensions
|
||||
// are pinned, max-width:100% shrinks the width only, leaving rasterized
|
||||
// glyphs visibly stretched relative to their on-screen input.
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
const cssW = canvas.width;
|
||||
const cssH = canvas.height;
|
||||
// Fill the container up to the logical width (don't pin a hard 600px,
|
||||
// which on a narrow phone forces the card wider than the viewport and
|
||||
// pushes the drawing outside the note). _pos() scales pointer coords by
|
||||
// the actual displayed width, so accuracy is preserved at any size.
|
||||
canvas.style.width = '100%';
|
||||
canvas.style.maxWidth = cssW + 'px';
|
||||
canvas.style.height = 'auto';
|
||||
canvas.style.aspectRatio = cssW + ' / ' + cssH;
|
||||
canvas.width = cssW * dpr;
|
||||
canvas.height = cssH * dpr;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.scale(dpr, dpr);
|
||||
ctx.fillStyle = surfaceColor;
|
||||
ctx.fillRect(0, 0, cssW, cssH);
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
// Load prior drawing as starting point so consecutive edits compose.
|
||||
const safeInitialImageUrl = _safeImgSrc(initialImageUrl);
|
||||
if (safeInitialImageUrl) {
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => { try { ctx.drawImage(img, 0, 0, cssW, cssH); } catch {} };
|
||||
img.src = safeInitialImageUrl;
|
||||
// Float an X over the canvas so the user can blank it out and go back to
|
||||
// a clean draw surface. Removes itself once clicked.
|
||||
const wrap = container.querySelector('.note-form-draw-wrap');
|
||||
if (wrap && !wrap.querySelector('.note-form-draw-bg-rm')) {
|
||||
const rm = document.createElement('button');
|
||||
rm.type = 'button';
|
||||
rm.className = 'note-form-draw-bg-rm';
|
||||
rm.title = 'Clear photo (regular draw)';
|
||||
rm.innerHTML = '×';
|
||||
rm.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
ctx.fillStyle = surfaceColor;
|
||||
ctx.fillRect(0, 0, cssW, cssH);
|
||||
rm.remove();
|
||||
});
|
||||
wrap.appendChild(rm);
|
||||
}
|
||||
}
|
||||
|
||||
// Swap the native browser color dialog for the in-house HSV picker
|
||||
// (same one used by Themes + the gallery editor). Existing `input` event
|
||||
// listeners + .value reads keep working : see colorPicker.js.
|
||||
if (colorInput) attachColorPicker(colorInput);
|
||||
const sizeInput = container.querySelector('.note-form-draw-size');
|
||||
const beSeg = container.querySelector('.note-form-draw-be');
|
||||
const brushBtn = container.querySelector('.note-form-draw-brush');
|
||||
const eraserBtn = container.querySelector('.note-form-draw-eraser');
|
||||
const textBtn = container.querySelector('.note-form-draw-text');
|
||||
const lineBtn = container.querySelector('.note-form-draw-line');
|
||||
const circleBtn = container.querySelector('.note-form-draw-circle');
|
||||
const undoBtn = container.querySelector('.note-form-draw-undo');
|
||||
// Single source of truth for what clicks/drags do. Other booleans are
|
||||
// derived from this so we never end up with conflicting "eraser AND text"
|
||||
// states (the bug that made T appear broken after using the eraser).
|
||||
// Modes: 'pen' | 'eraser' | 'text-s' | 'text-m' | 'text-l' | 'line' | 'circle'
|
||||
let mode = 'pen';
|
||||
let drawing = false;
|
||||
let last = null;
|
||||
// The text tool has three preset sizes (CSS px font-size).
|
||||
const TEXT_SIZES = { 's': 16, 'm': 26, 'l': 40 };
|
||||
// Line / circle stroke widths in logical pixels : three crisp options.
|
||||
const SHAPE_WIDTHS = { 's': 2, 'm': 5, 'l': 10 };
|
||||
// Snapshot taken at the start of a shape drag so the preview can repaint
|
||||
// cleanly on each move without accumulating intermediate strokes.
|
||||
let _shapeSnapshot = null;
|
||||
|
||||
// Per-canvas undo stack. We snapshot the bitmap (as ImageData) BEFORE each
|
||||
// operation : stroke, text commit, or future operations : and pop+restore
|
||||
// on Undo. Cap to 30 to keep memory bounded.
|
||||
const _undoStack = [];
|
||||
const UNDO_LIMIT = 30;
|
||||
const _syncUndoButton = () => {
|
||||
const available = _undoStack.length > 0;
|
||||
undoBtn?.classList.toggle('has-undo', available);
|
||||
undoBtn?.toggleAttribute('disabled', !available);
|
||||
undoBtn?.setAttribute('aria-disabled', available ? 'false' : 'true');
|
||||
};
|
||||
const _markCanvasDirty = () => container.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
const _snapshot = () => {
|
||||
try {
|
||||
const w = canvas.width, h = canvas.height;
|
||||
_undoStack.push(ctx.getImageData(0, 0, w, h));
|
||||
if (_undoStack.length > UNDO_LIMIT) _undoStack.shift();
|
||||
_syncUndoButton();
|
||||
} catch {}
|
||||
};
|
||||
const _undo = () => {
|
||||
const prev = _undoStack.pop();
|
||||
if (!prev) { _syncUndoButton(); return; }
|
||||
// Restore against the raw backing store: temporarily reset the active
|
||||
// ctx scale, paint the snapshot 1:1, then reapply our standard transform.
|
||||
ctx.save();
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.putImageData(prev, 0, 0);
|
||||
ctx.restore();
|
||||
_markCanvasDirty();
|
||||
_syncUndoButton();
|
||||
};
|
||||
|
||||
const _pos = (e) => {
|
||||
// CSS can shrink the canvas (max-width:100%) without changing its logical
|
||||
// size, so compute the displayed-to-logical scale per axis. Pointer coords
|
||||
// are in CSS pixels; the dpr-scaled ctx expects logical (cssW × cssH).
|
||||
const r = canvas.getBoundingClientRect();
|
||||
const sx = cssW / r.width;
|
||||
const sy = cssH / r.height;
|
||||
const t = e.touches ? e.touches[0] : e;
|
||||
return { x: (t.clientX - r.left) * sx, y: (t.clientY - r.top) * sy };
|
||||
};
|
||||
const _begin = (e) => {
|
||||
if (mode.startsWith('text-')) {
|
||||
// Stop the event so the browser doesn't synthesize a follow-up click
|
||||
// that would blur the input we're about to create.
|
||||
e.preventDefault?.();
|
||||
e.stopPropagation?.();
|
||||
_openTextInput(e);
|
||||
return;
|
||||
}
|
||||
_snapshot();
|
||||
last = _pos(e);
|
||||
drawing = true;
|
||||
if (mode.startsWith('line-') || mode.startsWith('circle-')) {
|
||||
// Capture the backing pixels so the preview can replay each move from
|
||||
// the same starting state (otherwise live shapes accumulate).
|
||||
try { _shapeSnapshot = ctx.getImageData(0, 0, canvas.width, canvas.height); } catch {}
|
||||
return;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(last.x, last.y);
|
||||
};
|
||||
|
||||
// Drop an HTML input at the click position so the user can type, then
|
||||
// rasterize the text onto the canvas at blur/Enter. Mirrors how PDF form
|
||||
// annotations work in our doc editor.
|
||||
let _activeTextInput = null;
|
||||
const _openTextInput = (e) => {
|
||||
// Commit any prior pending input before starting a new one : otherwise
|
||||
// the first click leaves an orphaned input the user thinks "didn't work".
|
||||
if (_activeTextInput) { try { _activeTextInput.blur(); } catch {} }
|
||||
const r = canvas.getBoundingClientRect();
|
||||
const t = e.touches ? e.touches[0] : e;
|
||||
// Position is anchored to the wrap, not the canvas; since the canvas is
|
||||
// the first child of the wrap and the wrap has no padding, they share an
|
||||
// origin, so we offset from the canvas rect directly.
|
||||
const px = t.clientX - r.left;
|
||||
const py = t.clientY - r.top;
|
||||
const logical = _pos(e);
|
||||
// Size is decided by which T variant is active (S/M/L), not the stroke
|
||||
// slider : those are independent dials.
|
||||
const sizeKey = mode.startsWith('text-') ? mode.slice(-1) : 'm';
|
||||
const sizeCss = TEXT_SIZES[sizeKey] || TEXT_SIZES.m;
|
||||
const wrap = container.querySelector('.note-form-draw-wrap');
|
||||
if (!wrap) return;
|
||||
if (getComputedStyle(wrap).position === 'static') wrap.style.position = 'relative';
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'note-form-draw-textinput';
|
||||
input.placeholder = 'type then Enter';
|
||||
const color = colorInput?.value || '#222';
|
||||
const maxW = Math.max(120, Math.floor(r.width - px - 4));
|
||||
input.style.cssText = [
|
||||
'position:absolute',
|
||||
`left:${px}px`,
|
||||
`top:${Math.max(0, py - sizeCss * 0.7)}px`,
|
||||
`font:${sizeCss}px Arial, sans-serif`,
|
||||
`color:${color}`,
|
||||
'background:#ffffff',
|
||||
'border:2px solid var(--accent)',
|
||||
'border-radius:4px',
|
||||
'outline:none',
|
||||
'padding:2px 6px',
|
||||
'min-width:120px',
|
||||
`max-width:${maxW}px`,
|
||||
'z-index:1000',
|
||||
'box-shadow:0 2px 8px rgba(0,0,0,0.25)',
|
||||
'pointer-events:auto',
|
||||
].join(';');
|
||||
wrap.appendChild(input);
|
||||
_activeTextInput = input;
|
||||
// Focus synchronously so the call still counts as inside the user gesture
|
||||
// on iOS / Android, then re-focus on the next frame in case a competing
|
||||
// synthetic event (touch → click) moved focus away.
|
||||
input.focus();
|
||||
requestAnimationFrame(() => { if (document.activeElement !== input) input.focus(); });
|
||||
let committed = false;
|
||||
const commit = () => {
|
||||
if (committed) return;
|
||||
committed = true;
|
||||
const text = input.value;
|
||||
if (_activeTextInput === input) _activeTextInput = null;
|
||||
input.remove();
|
||||
if (!text) return;
|
||||
// Snapshot BEFORE rasterizing so Undo removes the text in one step.
|
||||
_snapshot();
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.fillStyle = color;
|
||||
// Canvas now scales uniformly (style.height: auto), so a single ratio
|
||||
// suffices for picking the logical font size that matches what the
|
||||
// user just saw in the HTML input.
|
||||
const sx = cssW / r.width;
|
||||
const logicalSize = sizeCss * sx;
|
||||
ctx.font = `${logicalSize}px sans-serif`;
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText(text, logical.x, logical.y - logicalSize * 0.7);
|
||||
ctx.restore();
|
||||
_markCanvasDirty();
|
||||
};
|
||||
input.addEventListener('blur', commit);
|
||||
input.addEventListener('keydown', (ev) => {
|
||||
if (ev.key === 'Enter') { ev.preventDefault(); input.blur(); }
|
||||
else if (ev.key === 'Escape') { input.value = ''; input.blur(); }
|
||||
});
|
||||
};
|
||||
const _move = (e) => {
|
||||
if (!drawing) return;
|
||||
e.preventDefault?.();
|
||||
const p = _pos(e);
|
||||
if (mode.startsWith('line-') || mode.startsWith('circle-')) {
|
||||
// Restore the pre-shape bitmap, then redraw the preview shape from
|
||||
// anchor → current pointer.
|
||||
if (_shapeSnapshot) {
|
||||
ctx.save();
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.putImageData(_shapeSnapshot, 0, 0);
|
||||
ctx.restore();
|
||||
}
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.strokeStyle = colorInput?.value || '#222';
|
||||
const sizeKey = mode.slice(-1);
|
||||
ctx.lineWidth = SHAPE_WIDTHS[sizeKey] || SHAPE_WIDTHS.m;
|
||||
ctx.beginPath();
|
||||
if (mode.startsWith('line-')) {
|
||||
ctx.moveTo(last.x, last.y);
|
||||
ctx.lineTo(p.x, p.y);
|
||||
} else {
|
||||
const dx = p.x - last.x;
|
||||
const dy = p.y - last.y;
|
||||
const radius = Math.hypot(dx, dy);
|
||||
ctx.arc(last.x, last.y, radius, 0, Math.PI * 2);
|
||||
}
|
||||
ctx.stroke();
|
||||
return;
|
||||
}
|
||||
const erasing = mode === 'eraser';
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
ctx.strokeStyle = erasing ? surfaceColor : (colorInput?.value || highlightColor);
|
||||
ctx.lineWidth = Number(sizeInput?.value || 3) * (erasing ? 2.5 : 1);
|
||||
ctx.lineTo(p.x, p.y);
|
||||
ctx.stroke();
|
||||
last = p;
|
||||
};
|
||||
const _end = () => {
|
||||
if (drawing) _markCanvasDirty();
|
||||
drawing = false; last = null; _shapeSnapshot = null;
|
||||
};
|
||||
|
||||
canvas.addEventListener('mousedown', _begin);
|
||||
canvas.addEventListener('mousemove', _move);
|
||||
lifecycle.listen(canvas, window, 'mouseup', _end);
|
||||
// Non-passive so text mode can preventDefault : otherwise the synthetic
|
||||
// mousedown/click that follows a touch can blur the freshly-created text
|
||||
// input on iOS Safari, making T look like a no-op.
|
||||
canvas.addEventListener('touchstart', (e) => { if (mode.startsWith('text-')) e.preventDefault(); _begin(e); }, { passive: false });
|
||||
canvas.addEventListener('touchmove', _move, { passive: false });
|
||||
canvas.addEventListener('touchend', _end);
|
||||
canvas.addEventListener('touchcancel', _end);
|
||||
|
||||
// Single mode setter : keeps the toolbar, swatch, and cursor in sync, and
|
||||
// makes sure exiting the eraser restores the user's chosen color whether
|
||||
// they exit by clicking another tool or by toggling eraser off.
|
||||
let _preEraseColor = null;
|
||||
const _setMode = (next) => {
|
||||
const wasEraser = mode === 'eraser';
|
||||
mode = next;
|
||||
const isEraser = next === 'eraser';
|
||||
const isPen = next === 'pen';
|
||||
const isText = next.startsWith('text-');
|
||||
// Swatch: theme surface while erasing, restored when leaving that mode.
|
||||
if (isEraser && !wasEraser && colorInput) {
|
||||
_preEraseColor = colorInput.value;
|
||||
colorInput.value = surfaceColorHex;
|
||||
} else if (!isEraser && wasEraser && colorInput && _preEraseColor) {
|
||||
colorInput.value = _preEraseColor;
|
||||
_preEraseColor = null;
|
||||
}
|
||||
// Brush/Eraser segmented pill : slides to the active side. When a non-
|
||||
// pen/eraser tool (T / line / circle) is active, neither half is
|
||||
// highlighted, but the pill still indicates which side the user was on
|
||||
// last so they can return with one click.
|
||||
const isLine = next.startsWith('line-');
|
||||
const isCircle = next.startsWith('circle-');
|
||||
beSeg?.classList.toggle('is-eraser', isEraser);
|
||||
brushBtn?.classList.toggle('active', isPen);
|
||||
eraserBtn?.classList.toggle('active', isEraser);
|
||||
textBtn?.classList.toggle('active', isText);
|
||||
lineBtn?.classList.toggle('active', isLine);
|
||||
circleBtn?.classList.toggle('active', isCircle);
|
||||
// Per-button size badges (S/M/L), driven off the mode suffix.
|
||||
const tBadge = textBtn?.querySelector('.note-form-draw-text-badge');
|
||||
if (tBadge) tBadge.textContent = isText ? next.slice(-1).toUpperCase() : '';
|
||||
const lBadge = lineBtn?.querySelector('.note-form-draw-shape-badge');
|
||||
if (lBadge) lBadge.textContent = isLine ? next.slice(-1).toUpperCase() : '';
|
||||
const cBadge = circleBtn?.querySelector('.note-form-draw-shape-badge');
|
||||
if (cBadge) cBadge.textContent = isCircle ? next.slice(-1).toUpperCase() : '';
|
||||
// Reflect the chosen size in the icon itself : thicker line/circle stroke
|
||||
// for M+L, larger T glyph for M+L. CSS rules read `.size-s/.size-m/.size-l`.
|
||||
const _sz = next.slice(-1);
|
||||
[textBtn, lineBtn, circleBtn].forEach(b => b?.classList.remove('size-s', 'size-m', 'size-l'));
|
||||
if (isText && /[sml]/.test(_sz)) textBtn?.classList.add('size-' + _sz);
|
||||
if (isLine && /[sml]/.test(_sz)) lineBtn?.classList.add('size-' + _sz);
|
||||
if (isCircle && /[sml]/.test(_sz)) circleBtn?.classList.add('size-' + _sz);
|
||||
canvas.style.cursor = isText ? 'text' : 'crosshair';
|
||||
};
|
||||
brushBtn?.addEventListener('click', () => _setMode('pen'));
|
||||
eraserBtn?.addEventListener('click', () => _setMode('eraser'));
|
||||
// T / Line / Circle: each cycles its own three sizes, then back to pen.
|
||||
const _cycle = (prefix) => {
|
||||
const seq = ['s', 'm', 'l'];
|
||||
if (!mode.startsWith(prefix)) return prefix + 's';
|
||||
const cur = mode.slice(-1);
|
||||
const next = seq[seq.indexOf(cur) + 1];
|
||||
return next ? prefix + next : 'pen';
|
||||
};
|
||||
textBtn?.addEventListener('click', () => _setMode(_cycle('text-')));
|
||||
lineBtn?.addEventListener('click', () => _setMode(_cycle('line-')));
|
||||
circleBtn?.addEventListener('click', () => _setMode(_cycle('circle-')));
|
||||
undoBtn?.addEventListener('click', () => _undo());
|
||||
_syncUndoButton();
|
||||
|
||||
// Stash so the save handler can read it later without re-resolving DOM.
|
||||
canvas._cssW = cssW;
|
||||
canvas._cssH = cssH;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
async function _uploadCanvasAsPng(canvas, galleryId = null) {
|
||||
if (!canvas) return null;
|
||||
const blob = await new Promise(r => canvas.toBlob(r, 'image/png'));
|
||||
if (!blob) return null;
|
||||
const fd = new FormData();
|
||||
fd.append('files', blob, 'drawing.png');
|
||||
if (galleryId) fd.append('gallery_id', galleryId);
|
||||
try {
|
||||
const res = await api.upload(fd);
|
||||
const data = await res.json();
|
||||
const id = data.files?.[0]?.id;
|
||||
return id ? {
|
||||
url: api.uploadUrl(id),
|
||||
galleryId: data.files?.[0]?.gallery_id || null,
|
||||
} : null;
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
return { _buildDrawHtml, _wireCanvas, _uploadCanvasAsPng };
|
||||
}
|
||||
@@ -0,0 +1,518 @@
|
||||
/** Build and wire note, checklist, goal and drawing editor forms. */
|
||||
export function createEditor({
|
||||
deleteFromEditor,
|
||||
submitNote,
|
||||
COLORS,
|
||||
_applyMasonry,
|
||||
_archiveNoteById,
|
||||
_buildChecklistHtml,
|
||||
_buildDrawHtml,
|
||||
_buildGoalHtml,
|
||||
_collectItems,
|
||||
_customColorStyle,
|
||||
_dotBg,
|
||||
_dotIsActive,
|
||||
_esc,
|
||||
_isBgImage,
|
||||
_renderNotes,
|
||||
_safeImgSrc,
|
||||
_uid,
|
||||
_uploadCanvasAsPng,
|
||||
_wireCanvas,
|
||||
_wireChecklist,
|
||||
_wireDraftAutosave,
|
||||
_wireFormColors,
|
||||
_wireGoalForm,
|
||||
_wireReminderPicker,
|
||||
api,
|
||||
app,
|
||||
state,
|
||||
uiModule
|
||||
}) {
|
||||
function _buildForm(note = null) {
|
||||
const isEdit = note && note.id;
|
||||
const type = note?.note_type === 'checklist' ? 'todo' : (note?.note_type || 'note');
|
||||
const color = note?.color || '';
|
||||
const items = note?.items || [{ id: _uid(), text: '', done: false }];
|
||||
|
||||
const form = document.createElement('div');
|
||||
form.className = 'note-form';
|
||||
form.dataset.noteType = type;
|
||||
form.dataset.noteColor = color || '';
|
||||
if (color && !_isBgImage(color)) form.classList.add('note-color-' + color);
|
||||
if (_isBgImage(color)) form.setAttribute('style', _customColorStyle(color));
|
||||
let currentImageUrl = _safeImgSrc(note?.image_url || '');
|
||||
form.innerHTML = `
|
||||
<div class="note-form-header">
|
||||
<input type="text" class="note-form-title" placeholder="Title" value="${_esc(note?.title || '')}" />
|
||||
<button type="button" class="note-form-icon-btn note-form-remind-btn${note?.due_date ? ' has-date' : ''}" title="Remind me">
|
||||
<svg width="31" height="31" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
</button>
|
||||
<input type="hidden" class="note-form-due" value="${note?.due_date || ''}" />
|
||||
<input type="hidden" class="note-form-repeat" value="${note?.repeat || 'none'}" />
|
||||
</div>
|
||||
${currentImageUrl && type !== 'draw' ? `<div class="note-form-image-wrap"><img class="note-form-image" src="${_esc(currentImageUrl)}" draggable="false" /><button class="note-form-image-rm" title="Remove">×</button></div>` : ''}
|
||||
<div class="note-form-body">
|
||||
${type === 'note'
|
||||
? `<textarea class="note-form-content" placeholder="Take a note..." rows="4">${_esc(note?.content || '')}</textarea>`
|
||||
: type === 'draw'
|
||||
? _buildDrawHtml()
|
||||
: type === 'goal'
|
||||
? _buildGoalHtml(note, items)
|
||||
: _buildChecklistHtml(items)}
|
||||
</div>
|
||||
<div class="note-form-reminder-tags"></div>
|
||||
<div class="note-form-meta">
|
||||
<div class="note-form-type-seg${type === 'todo' ? ' is-todo' : type === 'draw' ? ' is-draw' : ''}" role="group">
|
||||
<button type="button" class="note-form-type-pill${type === 'note' ? ' active' : ''}" data-type="note">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg>
|
||||
<span>Note</span>
|
||||
</button>
|
||||
<button type="button" class="note-form-type-pill${type === 'todo' ? ' active' : ''}" data-type="todo">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
<span>Todo</span>
|
||||
</button>
|
||||
<button type="button" class="note-form-type-pill${type === 'draw' ? ' active' : ''}" data-type="draw">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
|
||||
<span>Draw</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="note-form-photo-btn" title="Attach photo">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||||
</button>
|
||||
<input type="file" class="note-form-photo-input" accept="image/*" capture="environment" style="display:none" />
|
||||
<div class="note-color-picker">
|
||||
${COLORS.map(c => `<span class="note-color-dot${_dotIsActive(c.value, color) ? ' active' : ''}" data-color="${c.value}" style="background:${_dotBg(c.value, color)}" title="${c.name || 'default'}"></span>`).join('')}
|
||||
</div>
|
||||
<input type="text" class="note-form-label" value="${_esc(note?.label || '')}" placeholder="#tag1 #tag2" title="Tag(s) — space-separated" />
|
||||
<div class="note-form-actions-group">
|
||||
${isEdit ? `
|
||||
<button type="button" class="note-form-text-btn note-form-archive-btn note-form-collapsible" title="Archive">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8"/><path d="M10 12h4"/></svg><span class="nft-label">Archive</span>
|
||||
</button>
|
||||
<button type="button" class="note-form-text-btn note-form-delete-btn note-form-collapsible danger" title="Delete">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg><span class="nft-label">Delete</span>
|
||||
</button>
|
||||
` : ''}
|
||||
<span class="note-form-actions-spacer"></span>
|
||||
<button class="note-form-cancel note-form-text-btn note-form-collapsible" title="Close (keep changes)">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg><span class="nft-label">Close</span>
|
||||
</button>
|
||||
<button class="note-form-save note-form-text-btn" title="${isEdit ? 'Update' : 'Save'}">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg><span class="nft-label">${isEdit ? 'Update' : 'Save'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let currentType = type;
|
||||
let currentColor = color;
|
||||
// Stash original-form values so round-trips (Note→Todo→Note) restore the
|
||||
// user's hand-formatted text instead of a join of generated items. Same the
|
||||
// other way: if you started in todo, switch to note, switch back, items
|
||||
// come back unchanged.
|
||||
let _stashedNoteText = (type === 'note') ? (note?.content || '') : null;
|
||||
let _stashedTodoItems = (type === 'todo' && Array.isArray(note?.items)) ? note.items.slice() : null;
|
||||
// Goal mode kept its own pair of stashes (description + steps) so a
|
||||
// Todo→Goal→Todo round-trip wouldn't lose either side. The Goal pill in
|
||||
// the type picker was later removed, so the only entry point now is
|
||||
// *editing* an existing goal-typed note : but the switch handler still
|
||||
// accepts Goal→Todo/Note transitions (downgrading legacy goals), so
|
||||
// these stashes still earn their keep.
|
||||
let _stashedGoalDesc = (type === 'goal') ? (note?.content || '') : null;
|
||||
let _stashedGoalItems = (type === 'goal' && Array.isArray(note?.items)) ? note.items.slice() : null;
|
||||
|
||||
// Drawing also stashes the saved image URL so it survives Note↔Draw flips.
|
||||
let _stashedDrawUrl = (type === 'draw') ? (_safeImgSrc(note?.image_url) || null) : null;
|
||||
const _refreshFormLayout = () => {
|
||||
const body = form.closest('.notes-pane-body');
|
||||
if (!body) return;
|
||||
_applyMasonry(body);
|
||||
requestAnimationFrame(() => {
|
||||
_applyMasonry(body);
|
||||
requestAnimationFrame(() => _applyMasonry(body));
|
||||
});
|
||||
};
|
||||
|
||||
// Type segmented control : Note | Todo | Draw
|
||||
form.querySelectorAll('.note-form-type-pill').forEach(pill => {
|
||||
pill.addEventListener('click', () => {
|
||||
const newType = pill.dataset.type;
|
||||
if (newType === currentType) return;
|
||||
const bodyEl = form.querySelector('.note-form-body');
|
||||
// Stash whatever the user has in the current mode before swapping it
|
||||
// out, so a subsequent flip back restores their work.
|
||||
if (currentType === 'note') {
|
||||
_stashedNoteText = form.querySelector('.note-form-content')?.value || '';
|
||||
} else if (currentType === 'todo') {
|
||||
_stashedTodoItems = _collectItems(form);
|
||||
} else if (currentType === 'goal') {
|
||||
_stashedGoalDesc = form.querySelector('.note-form-goal-desc')?.value || '';
|
||||
_stashedGoalItems = _collectItems(form);
|
||||
} else if (currentType === 'draw') {
|
||||
const c = form.querySelector('.note-form-canvas');
|
||||
if (c) { try { _stashedDrawUrl = c.toDataURL('image/png'); } catch {} }
|
||||
}
|
||||
// Render the new mode's body and re-wire its inputs.
|
||||
if (newType === 'todo') {
|
||||
let nextItems;
|
||||
if (_stashedTodoItems && _stashedTodoItems.length) {
|
||||
nextItems = _stashedTodoItems;
|
||||
} else if (_stashedGoalItems && _stashedGoalItems.length) {
|
||||
// Going Goal→Todo keeps the AI-generated steps as a plain checklist.
|
||||
nextItems = _stashedGoalItems;
|
||||
} else if (_stashedNoteText) {
|
||||
const lines = _stashedNoteText.split('\n').map(s => s.trim()).filter(Boolean);
|
||||
nextItems = lines.length ? lines.map(t => ({ id: _uid(), text: t, done: false })) : [{ id: _uid(), text: '', done: false }];
|
||||
} else {
|
||||
nextItems = [{ id: _uid(), text: '', done: false }];
|
||||
}
|
||||
bodyEl.innerHTML = _buildChecklistHtml(nextItems);
|
||||
_wireChecklist(bodyEl);
|
||||
} else if (newType === 'draw') {
|
||||
bodyEl.innerHTML = _buildDrawHtml();
|
||||
// If the user just attached a photo (via the photo button) and then
|
||||
// toggled to Draw, paint that photo onto the canvas so they can draw
|
||||
// on top of it. _stashedDrawUrl wins if they were drawing earlier in
|
||||
// the same edit session.
|
||||
_wireCanvas(bodyEl, _stashedDrawUrl || currentImageUrl || _safeImgSrc(note?.image_url) || null);
|
||||
} else {
|
||||
const text = (_stashedNoteText !== null && _stashedNoteText !== undefined && _stashedNoteText !== '')
|
||||
? _stashedNoteText
|
||||
: (_stashedGoalDesc && _stashedGoalDesc)
|
||||
|| (_stashedTodoItems || _stashedGoalItems || []).map(i => i.text).join('\n');
|
||||
bodyEl.innerHTML = `<textarea class="note-form-content" placeholder="Take a note..." rows="4">${_esc(text)}</textarea>`;
|
||||
_wireHashtag(bodyEl.querySelector('.note-form-content'));
|
||||
}
|
||||
const focusEl = newType === 'note'
|
||||
? bodyEl.querySelector('.note-form-content')
|
||||
: newType === 'todo'
|
||||
? bodyEl.querySelector('.note-cl-text')
|
||||
: null;
|
||||
if (focusEl) {
|
||||
requestAnimationFrame(() => {
|
||||
focusEl.focus({ preventScroll: true });
|
||||
try {
|
||||
const end = focusEl.value.length;
|
||||
focusEl.setSelectionRange(end, end);
|
||||
} catch {}
|
||||
});
|
||||
}
|
||||
currentType = newType;
|
||||
const seg = form.querySelector('.note-form-type-seg');
|
||||
seg?.classList.toggle('is-todo', newType === 'todo');
|
||||
seg?.classList.toggle('is-draw', newType === 'draw');
|
||||
form.querySelectorAll('.note-form-type-pill').forEach(p => p.classList.toggle('active', p.dataset.type === newType));
|
||||
// The standalone image preview (form-image-wrap) and the canvas would
|
||||
// otherwise both show the same image_url when editing a drawn note.
|
||||
// Hide it in draw mode, restore it when leaving draw mode.
|
||||
const imgWrap = form.querySelector('.note-form-image-wrap');
|
||||
if (imgWrap) imgWrap.style.display = (newType === 'draw') ? 'none' : '';
|
||||
// The background-color dots set the note card's bg : they make no sense
|
||||
// for a drawn note (the canvas image IS the card content), so hide them.
|
||||
const bgPicker = form.querySelector('.note-color-picker');
|
||||
if (bgPicker) bgPicker.style.display = (newType === 'draw') ? 'none' : '';
|
||||
if (form.closest('.notes-pane.notes-view-grid') && window.matchMedia('(max-width: 768px)').matches) {
|
||||
form.style.gridColumn = '1 / -1';
|
||||
form.style.gridRowEnd = newType === 'draw' ? 'span 152' : 'span 64';
|
||||
}
|
||||
_refreshFormLayout();
|
||||
});
|
||||
});
|
||||
|
||||
// Slide a finger across the Note/Todo/Draw control to switch modes (mobile).
|
||||
// On touchmove we find the pill under the finger and click it : reusing the
|
||||
// pill click handler above, so the body re-renders + content stashing all
|
||||
// work. Only fires when crossing into a *different* pill.
|
||||
const _typeSeg = form.querySelector('.note-form-type-seg');
|
||||
if (_typeSeg) {
|
||||
let _sliding = false;
|
||||
const _activateAt = (x, y) => {
|
||||
const pill = document.elementFromPoint(x, y)?.closest?.('.note-form-type-pill');
|
||||
if (pill && !pill.classList.contains('active')) pill.click();
|
||||
};
|
||||
_typeSeg.addEventListener('touchstart', () => { _sliding = true; }, { passive: true });
|
||||
_typeSeg.addEventListener('touchmove', (e) => {
|
||||
if (_sliding && e.touches[0]) _activateAt(e.touches[0].clientX, e.touches[0].clientY);
|
||||
}, { passive: true });
|
||||
_typeSeg.addEventListener('touchend', () => { _sliding = false; });
|
||||
_typeSeg.addEventListener('touchcancel', () => { _sliding = false; });
|
||||
}
|
||||
|
||||
_wireFormColors(form, value => { currentColor = value; });
|
||||
|
||||
if (currentType === 'todo') _wireChecklist(form.querySelector('.note-form-body'));
|
||||
if (currentType === 'goal') _wireGoalForm(form, form.querySelector('.note-form-body'));
|
||||
if (currentType === 'draw') {
|
||||
_wireCanvas(form.querySelector('.note-form-body'), _safeImgSrc(note?.image_url) || null);
|
||||
// Same hides we apply on type-switch : keep them consistent on initial open.
|
||||
const _ip = form.querySelector('.note-form-image-wrap'); if (_ip) _ip.style.display = 'none';
|
||||
const _cp = form.querySelector('.note-color-picker'); if (_cp) _cp.style.display = 'none';
|
||||
}
|
||||
|
||||
// Auto-grow the plain-note textarea so editing longer notes is
|
||||
// comfortable : it expands with the content (up to a cap) instead of
|
||||
// staying a cramped 4-row box. The user can still drag-resize too.
|
||||
const _contentTa = form.querySelector('.note-form-content');
|
||||
if (_contentTa) {
|
||||
const _grow = () => {
|
||||
_contentTa.style.height = 'auto';
|
||||
// Inline form: cap at ~50vh so a huge note doesn't push the action
|
||||
// buttons off-screen. Fullscreen mobile overlay: the body scrolls and
|
||||
// there are no inline buttons crowding, so allow nearly the full height
|
||||
// : capping at 50vh there clipped longer notes ("part disappears").
|
||||
const inFullscreen = !!_contentTa.closest('.note-fullscreen-overlay');
|
||||
const max = Math.round(window.innerHeight * (inFullscreen ? 0.9 : 0.5));
|
||||
_contentTa.style.height = Math.min(_contentTa.scrollHeight, max) + 'px';
|
||||
};
|
||||
_contentTa.addEventListener('input', _grow);
|
||||
// Grow on open so existing content is fully visible. Run again after the
|
||||
// fullscreen overlay's open animation settles : measuring mid-animation
|
||||
// (the overlay starts scaled/transitioning) can under-size the box.
|
||||
setTimeout(_grow, 0);
|
||||
setTimeout(_grow, 360);
|
||||
}
|
||||
|
||||
_wireReminderPicker(form);
|
||||
|
||||
// Photo upload
|
||||
const photoBtn = form.querySelector('.note-form-photo-btn');
|
||||
const photoInput = form.querySelector('.note-form-photo-input');
|
||||
if (photoBtn && photoInput) {
|
||||
photoBtn.addEventListener('click', () => photoInput.click());
|
||||
photoInput.addEventListener('change', async () => {
|
||||
const file = photoInput.files?.[0];
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append('files', file);
|
||||
try {
|
||||
const res = await api.upload(fd);
|
||||
const data = await res.json();
|
||||
const fileId = data.files?.[0]?.id;
|
||||
if (!fileId) throw new Error('Upload failed');
|
||||
currentImageUrl = api.uploadUrl(fileId);
|
||||
// Only ever keep the latest attached photo : drop any existing wrap
|
||||
// before inserting a fresh one. Picking a second photo replaces the
|
||||
// first instead of stacking.
|
||||
form.querySelector('.note-form-image-wrap')?.remove();
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'note-form-image-wrap';
|
||||
wrap.innerHTML = `<img class="note-form-image" draggable="false" /><button class="note-form-image-rm" title="Remove">×</button>`;
|
||||
// Insert AFTER the whole header (a flex-row), not after the
|
||||
// title input itself : otherwise the image lands as a sibling
|
||||
// of the title inside the header and flex puts them side-by-side.
|
||||
form.querySelector('.note-form-header').after(wrap);
|
||||
wrap.querySelector('.note-form-image-rm').addEventListener('click', () => { wrap.remove(); currentImageUrl = ''; });
|
||||
wrap.querySelector('img').src = currentImageUrl;
|
||||
} catch (err) { uiModule.showError('Image upload failed'); }
|
||||
photoInput.value = '';
|
||||
});
|
||||
}
|
||||
// Existing image remove
|
||||
form.querySelector('.note-form-image-rm')?.addEventListener('click', () => {
|
||||
form.querySelector('.note-form-image-wrap')?.remove();
|
||||
currentImageUrl = '';
|
||||
});
|
||||
|
||||
// Title Enter -> focus body (textarea or first checklist item)
|
||||
form.querySelector('.note-form-title').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
|
||||
e.preventDefault();
|
||||
const ta = form.querySelector('.note-form-content');
|
||||
if (ta) { ta.focus(); return; }
|
||||
const firstItem = form.querySelector('.note-cl-text');
|
||||
if (firstItem) firstItem.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Hashtag → label: typing "#foo " in title/content appends "foo" to the
|
||||
// space-separated tag list. Repeats are deduplicated, so #foo #foo only
|
||||
// keeps one. Tags already present in the label field are left alone.
|
||||
const labelInput = form.querySelector('.note-form-label');
|
||||
const _hashtagRe = /(^|\s)#([A-Za-z0-9][\w-]*)\s$/;
|
||||
function _wireHashtag(el) {
|
||||
if (!el || !labelInput) return;
|
||||
el.addEventListener('input', () => {
|
||||
const m = _hashtagRe.exec(el.value);
|
||||
if (!m) return;
|
||||
const tag = m[2];
|
||||
// Dedup against the stripped form : labelInput may already hold `#tag`
|
||||
// (after Enter normalised), so includes(tag) on the raw split would
|
||||
// miss the duplicate and append a bare `tag` next to `#tag`.
|
||||
const existing = labelInput.value.trim().split(/\s+/).filter(Boolean);
|
||||
const stripped = existing.map(t => t.replace(/^#+/, ''));
|
||||
if (!stripped.includes(tag)) {
|
||||
existing.push('#' + tag);
|
||||
labelInput.value = existing.join(' ');
|
||||
labelInput.classList.add('flash-once');
|
||||
setTimeout(() => labelInput.classList.remove('flash-once'), 600);
|
||||
}
|
||||
const cut = el.value.length - m[0].length + m[1].length;
|
||||
el.value = el.value.slice(0, cut);
|
||||
});
|
||||
}
|
||||
_wireHashtag(form.querySelector('.note-form-title'));
|
||||
_wireHashtag(form.querySelector('.note-form-content'));
|
||||
// Pressing Enter in the tag field commits the current word as its own tag
|
||||
// and parks the cursor after a trailing space, so the next word becomes a
|
||||
// separate tag rather than overwriting the previous one.
|
||||
labelInput?.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Enter' || e.shiftKey || e.ctrlKey || e.metaKey) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// Strip any leading #s the user typed, dedupe, then re-prepend exactly
|
||||
// one #. So typing "foo" or "#foo" both end up as "#foo " in the input;
|
||||
// the save handler keeps stripping #s before storing so DB stays clean.
|
||||
const tags = [...new Set(labelInput.value.split(/\s+/).map(t => t.replace(/^#+/, '').trim()).filter(Boolean))];
|
||||
if (!tags.length) return;
|
||||
labelInput.value = tags.map(t => '#' + t).join(' ') + ' ';
|
||||
labelInput.setSelectionRange(labelInput.value.length, labelInput.value.length);
|
||||
labelInput.classList.add('flash-once');
|
||||
setTimeout(() => labelInput.classList.remove('flash-once'), 600);
|
||||
});
|
||||
|
||||
// Shift+Enter (or Cmd/Ctrl+Enter) anywhere in the form -> save
|
||||
// Escape -> cancel edit
|
||||
form.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
form.querySelector('.note-form-save')?.click();
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.querySelector('.note-form-cancel')?.click();
|
||||
}
|
||||
});
|
||||
|
||||
// Save. Prevent the button from stealing focus on press: on mobile, the
|
||||
// first tap would otherwise just blur the focused textarea/input (closing
|
||||
// the keyboard and shifting layout), so the tap never reached the button and
|
||||
// you had to tap "Done" twice. mousedown preventDefault keeps focus put while
|
||||
// still letting the click fire.
|
||||
const _saveBtnEl0 = form.querySelector('.note-form-save');
|
||||
_saveBtnEl0.addEventListener('mousedown', (e) => e.preventDefault());
|
||||
_saveBtnEl0.addEventListener('click', async () => {
|
||||
// Guard against spam-clicks: the drawing save AWAITS a canvas upload before
|
||||
// the optimistic re-render removes the form, so without this a slow upload
|
||||
// let repeated clicks create duplicate notes.
|
||||
const _saveBtn = form.querySelector('.note-form-save');
|
||||
if (_saveBtn._saving) return;
|
||||
// Mobile: when an existing note is opened and closed without edits, the
|
||||
// Update (✓) button morphs into Archive (set up below). Route the click
|
||||
// directly through the archive flow. Using a DOM .click() proxy here was
|
||||
// fragile on mobile because the real archive button can move from the
|
||||
// footer to the fullscreen header.
|
||||
if (_saveBtn.classList.contains('archive-mode')) {
|
||||
_archiveNoteById(note?.id);
|
||||
return;
|
||||
}
|
||||
_saveBtn._saving = true; _saveBtn.disabled = true; _saveBtn.style.opacity = '0.5';
|
||||
try {
|
||||
form._flushDraft?.();
|
||||
await form._stopDraftAutosave?.();
|
||||
form._flushDraft?.();
|
||||
const title = form.querySelector('.note-form-title').value.trim();
|
||||
// Normalize tag input: split on whitespace, strip leading #s, dedupe,
|
||||
// re-join with single spaces. Empty → null.
|
||||
const _rawLabel = form.querySelector('.note-form-label')?.value || '';
|
||||
const _tags = [...new Set(_rawLabel.split(/\s+/).map(t => t.replace(/^#+/, '').trim()).filter(Boolean))];
|
||||
if (form.querySelector('.note-form-due').value && !_tags.includes('reminder')) _tags.push('reminder');
|
||||
const labelVal = _tags.length ? _tags.join(' ') : null;
|
||||
const payload = {
|
||||
title,
|
||||
note_type: currentType,
|
||||
color: currentColor,
|
||||
label: labelVal,
|
||||
due_date: form.querySelector('.note-form-due').value || null,
|
||||
repeat: form.querySelector('.note-form-repeat')?.value || 'none',
|
||||
image_url: currentImageUrl || null,
|
||||
};
|
||||
if (currentType === 'note') {
|
||||
payload.content = form.querySelector('.note-form-content')?.value || '';
|
||||
} else if (currentType === 'draw') {
|
||||
// Upload the canvas PNG before saving so image_url points to a
|
||||
// persistent file. We block the save until upload completes : drawings
|
||||
// can't be re-rendered later without the URL.
|
||||
const canvas = form.querySelector('.note-form-canvas');
|
||||
const upload = await _uploadCanvasAsPng(canvas, note?.gallery_id || null);
|
||||
if (!upload?.url) { uiModule.showError('Failed to save drawing'); return; }
|
||||
payload.image_url = upload.url;
|
||||
if (upload.galleryId) payload.gallery_id = upload.galleryId;
|
||||
} else if (currentType === 'goal') {
|
||||
// Legacy: existing goal-type notes still edit through this branch.
|
||||
// No AI involvement : save as a normal note with description + items.
|
||||
payload.content = form.querySelector('.note-form-goal-desc')?.value || '';
|
||||
payload.items = _collectItems(form);
|
||||
} else {
|
||||
payload.items = _collectItems(form);
|
||||
}
|
||||
if (isEdit) payload.id = note.id;
|
||||
submitNote(payload, note, isEdit);
|
||||
} finally {
|
||||
// Re-enable on early returns / errors. On success the form is removed by
|
||||
// the optimistic re-render, so re-enabling the detached button is a no-op.
|
||||
_saveBtn._saving = false; _saveBtn.disabled = false; _saveBtn.style.opacity = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile-only: when editing an existing note, the Update (✓) button starts in
|
||||
// archive-mode (visually + behaviorally) and flips to Update on the first
|
||||
// edit. Lets the user tap a note to skim, then tap ✓ to archive without ever
|
||||
// touching a separate Archive button.
|
||||
if (isEdit && window.innerWidth <= 768) {
|
||||
const _saveLabelEl = _saveBtnEl0.querySelector('.nft-label');
|
||||
const _isFinishedTodo = () => {
|
||||
if (currentType !== 'todo') return false;
|
||||
const rows = [...form.querySelectorAll('.note-cl-row')];
|
||||
const withText = rows.filter(row => (row.querySelector('.note-cl-text')?.value || '').trim());
|
||||
return withText.length > 0 && withText.every(row => row.classList.contains('done'));
|
||||
};
|
||||
const _enterArchive = () => {
|
||||
_saveBtnEl0.classList.add('archive-mode');
|
||||
const label = _isFinishedTodo() ? 'Finish' : 'Archive';
|
||||
if (_saveLabelEl) _saveLabelEl.textContent = label;
|
||||
_saveBtnEl0.title = label;
|
||||
};
|
||||
const _enterUpdate = () => {
|
||||
if (!_saveBtnEl0.classList.contains('archive-mode')) return;
|
||||
_saveBtnEl0.classList.remove('archive-mode');
|
||||
if (_saveLabelEl) _saveLabelEl.textContent = 'Update';
|
||||
_saveBtnEl0.title = 'Update';
|
||||
};
|
||||
_enterArchive();
|
||||
form.addEventListener('input', _enterUpdate, true);
|
||||
form.addEventListener('change', _enterUpdate, true);
|
||||
// Checklist dots use a custom control and dispatch their update before
|
||||
// this click bubbles. Re-evaluate afterward so a fully completed todo
|
||||
// offers Finish (which archives/removes it from the active list).
|
||||
form.addEventListener('click', (event) => {
|
||||
if (!event.target.closest('.note-cl-dot')) return;
|
||||
setTimeout(() => {
|
||||
if (_isFinishedTodo()) _enterArchive();
|
||||
else _enterUpdate();
|
||||
}, 0);
|
||||
}, true);
|
||||
}
|
||||
|
||||
// Cancel
|
||||
form.querySelector('.note-form-cancel').addEventListener('click', () => { form._flushDraft?.(); app.setEditingId(null); _renderNotes(); });
|
||||
|
||||
// Archive / Delete : edit-mode-only buttons, mirror the (now-hidden) card actions.
|
||||
form.querySelector('.note-form-archive-btn')?.addEventListener('click', () => {
|
||||
if (!isEdit) return;
|
||||
_archiveNoteById(note.id);
|
||||
});
|
||||
form.querySelector('.note-form-delete-btn')?.addEventListener('click', () => {
|
||||
if (!isEdit) return;
|
||||
return deleteFromEditor(note.id);
|
||||
});
|
||||
|
||||
// Autosave a draft to persistence on every change so unsaved edits
|
||||
// survive connection loss / reload / accidental close.
|
||||
_wireDraftAutosave(form, isEdit ? note.id : '__new__');
|
||||
|
||||
return form;
|
||||
}
|
||||
|
||||
return { _buildForm };
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/** Label chips, reminder/goal filters and collapsed tag-strip rendering. */
|
||||
import { _visibleNoteTags, _nextGoalStep } from '../domain/noteRules.js';
|
||||
import { _hasTimeComponent } from '../domain/recurrence.js';
|
||||
export function createFilters({
|
||||
NOTES_LABELS_COLLAPSED_KEY,
|
||||
_clearPastReminders,
|
||||
_esc,
|
||||
_isPastReminder,
|
||||
_renderNotes,
|
||||
_userVisibleNotes,
|
||||
app,
|
||||
persistence,
|
||||
state
|
||||
}) {
|
||||
function _renderLabels(root = document) {
|
||||
const bar = root.querySelector?.('.notes-labels-bar') || document.querySelector('.notes-labels-bar');
|
||||
if (!bar) return;
|
||||
if (state.labelsCollapsed) {
|
||||
bar.innerHTML = '';
|
||||
bar.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
const visibleNotes = _userVisibleNotes();
|
||||
const labels = new Set();
|
||||
for (const n of visibleNotes) for (const t of _visibleNoteTags(n)) labels.add(t);
|
||||
const sortedLabels = [...labels].sort();
|
||||
// Count active reminders (not archived, has datetime due_date)
|
||||
const reminderCount = visibleNotes.filter(n => !n.archived && n.due_date && _hasTimeComponent(n.due_date)).length;
|
||||
const pastReminderCount = visibleNotes.filter(n => !n.archived && _isPastReminder(n)).length;
|
||||
const defaultCount = visibleNotes.filter(n => !n.archived && _visibleNoteTags(n).length === 0).length;
|
||||
// Active goals = non-archived goal notes. Today view lists pending steps
|
||||
// from each, so we surface the count next to the chip.
|
||||
const goalCount = visibleNotes.filter(n => n.note_type === 'goal' && !n.archived).length;
|
||||
const todayCount = visibleNotes.filter(n => n.note_type === 'goal' && !n.archived && _nextGoalStep(n)).length;
|
||||
const hasUsefulFilters = sortedLabels.length > 0 || reminderCount > 0 || goalCount > 0;
|
||||
const hasActiveFilter = state.activeLabel !== null || state.activeFilter !== null;
|
||||
if (!hasUsefulFilters && !hasActiveFilter) {
|
||||
bar.innerHTML = '';
|
||||
bar.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
bar.style.display = '';
|
||||
const allActive = state.activeLabel === null && state.activeFilter === null;
|
||||
let html = `<button class="notes-label-chip${allActive ? ' active' : ''}" data-action="all">All</button>`;
|
||||
html += `<button class="notes-label-chip${state.activeFilter === 'default' ? ' active' : ''}" data-action="default" title="Show notes without tags">Default <span class="notes-label-chip-count">${defaultCount}</span></button>`;
|
||||
if (todayCount > 0) {
|
||||
const isOn = state.activeFilter === 'today';
|
||||
const icon = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:2px"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>';
|
||||
html += `<button class="notes-label-chip notes-label-chip-today${isOn ? ' active' : ''}" data-action="today" title="Next step from every goal">${icon}Today <span class="notes-label-chip-count">${todayCount}</span></button>`;
|
||||
}
|
||||
if (goalCount > 0) {
|
||||
const isOn = state.activeFilter === 'goals';
|
||||
const icon = '<svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:-1px;margin-right:2px"><path d="M12 0L14.59 8.41L23 12L14.59 15.59L12 24L9.41 15.59L1 12L9.41 8.41Z"/></svg>';
|
||||
html += `<button class="notes-label-chip notes-label-chip-goals${isOn ? ' active' : ''}" data-action="goals" title="Show only goals">${icon}Goals <span class="notes-label-chip-count">${goalCount}</span></button>`;
|
||||
}
|
||||
const isReminderOn = state.activeFilter === 'reminders';
|
||||
const isReminderOff = state.activeFilter === 'no-reminders';
|
||||
const reminderCls = `notes-label-chip notes-label-chip-reminders${isReminderOn ? ' active' : ''}${isReminderOff ? ' active negated' : ''}`;
|
||||
const reminderIcon = isReminderOff
|
||||
// bell-off icon
|
||||
? '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:2px"><path d="M13.73 21a2 2 0 0 1-3.46 0"/><path d="M18.63 13A17.89 17.89 0 0 1 18 8"/><path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"/><path d="M18 8a6 6 0 0 0-9.33-5"/><line x1="1" y1="1" x2="23" y2="23"/></svg>'
|
||||
: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:2px"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>';
|
||||
html += `<button class="${reminderCls}" data-action="reminders" title="${isReminderOn ? 'Showing only reminders — click to show all' : isReminderOff ? 'Hiding reminders — click to show only reminders' : 'Click to filter reminders'}">${reminderIcon}Reminders <span class="notes-label-chip-count">${reminderCount}</span></button>`;
|
||||
const showingReminders = state.activeFilter === 'reminders';
|
||||
if (showingReminders && pastReminderCount > 0) {
|
||||
html += `<button class="notes-label-chip notes-label-clear-past" data-action="clear-past-reminders" title="Delete reminders whose time has passed"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>Clear past <span class="notes-label-chip-count">${pastReminderCount}</span></button>`;
|
||||
}
|
||||
for (const lbl of sortedLabels) {
|
||||
html += `<button class="notes-label-chip${state.activeLabel === lbl ? ' active' : ''}" data-label="${_esc(lbl)}">#${_esc(lbl)}</button>`;
|
||||
}
|
||||
bar.innerHTML = html;
|
||||
bar.querySelectorAll('.notes-label-chip').forEach(chip => {
|
||||
chip.addEventListener('click', () => {
|
||||
if (chip.dataset.action === 'all') {
|
||||
app.setActiveLabel(null);
|
||||
app.setActiveFilter(null);
|
||||
} else if (chip.dataset.action === 'today') {
|
||||
app.setActiveLabel(null);
|
||||
app.setActiveFilter((state.activeFilter === 'today') ? null : 'today');
|
||||
} else if (chip.dataset.action === 'goals') {
|
||||
app.setActiveLabel(null);
|
||||
app.setActiveFilter((state.activeFilter === 'goals') ? null : 'goals');
|
||||
} else if (chip.dataset.action === 'default') {
|
||||
app.setActiveLabel(null);
|
||||
app.setActiveFilter((state.activeFilter === 'default') ? null : 'default');
|
||||
} else if (chip.dataset.action === 'reminders') {
|
||||
app.setActiveLabel(null);
|
||||
// Cycle: null → reminders → null → no-reminders → null → reminders → ...
|
||||
if (state.activeFilter === null) {
|
||||
app.setActiveFilter(state.reminderChipNext);
|
||||
app.setReminderChipNext((state.reminderChipNext === 'reminders') ? 'no-reminders' : 'reminders');
|
||||
} else {
|
||||
app.setActiveFilter(null);
|
||||
}
|
||||
} else if (chip.dataset.action === 'clear-past-reminders') {
|
||||
_clearPastReminders();
|
||||
return;
|
||||
} else {
|
||||
app.setActiveFilter(null);
|
||||
app.setActiveLabel(chip.dataset.label || null);
|
||||
}
|
||||
_renderNotes();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _renderLabelsInto(_body) {
|
||||
if (!_body) return;
|
||||
const pane = _body.closest('.notes-pane');
|
||||
const toggleHost = pane?.querySelector('.notes-search-bar') || _body;
|
||||
let toggle = toggleHost.querySelector(':scope > .notes-label-toggle');
|
||||
if (!toggle) {
|
||||
toggle = document.createElement('button');
|
||||
toggle.type = 'button';
|
||||
toggle.className = 'notes-label-toggle cal-filter-toggle';
|
||||
toggle.addEventListener('click', () => {
|
||||
app.setLabelsCollapsed(!state.labelsCollapsed);
|
||||
try { persistence.setItem(NOTES_LABELS_COLLAPSED_KEY, state.labelsCollapsed ? '1' : '0'); } catch {}
|
||||
_renderNotes();
|
||||
});
|
||||
const selectButton = toggleHost.querySelector('#notes-select-btn');
|
||||
toggleHost.insertBefore(toggle, selectButton || null);
|
||||
}
|
||||
toggle.textContent = state.labelsCollapsed ? '+ Tags' : '− Tags';
|
||||
toggle.title = state.labelsCollapsed ? 'Show tags' : 'Hide tags';
|
||||
toggle.setAttribute('aria-expanded', state.labelsCollapsed ? 'false' : 'true');
|
||||
|
||||
// The shared chip scroller wraps this row once it is mounted.
|
||||
let bar = _body.querySelector('.notes-labels-bar');
|
||||
if (!bar) {
|
||||
bar = document.createElement('div');
|
||||
bar.className = 'notes-labels-bar';
|
||||
_body.appendChild(bar);
|
||||
}
|
||||
_renderLabels(_body);
|
||||
}
|
||||
|
||||
return { _renderLabels, _renderLabelsInto };
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
/** Card reflow animation and the owned masonry resize observer. */
|
||||
export function createLayout({ isOpen = () => true } = {}) {
|
||||
function _captureCardPositions() {
|
||||
const body = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (!body) return null;
|
||||
const positions = new Map();
|
||||
body.querySelectorAll('.note-card').forEach(card => {
|
||||
const id = card.dataset.noteId;
|
||||
if (id) positions.set(id, card.getBoundingClientRect());
|
||||
});
|
||||
return positions;
|
||||
}
|
||||
|
||||
function _animateReflow(prevPositions) {
|
||||
if (!prevPositions || !prevPositions.size) return;
|
||||
const body = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (!body || !body.isConnected) return;
|
||||
body.querySelectorAll('.note-card').forEach(card => {
|
||||
const id = card.dataset.noteId;
|
||||
const prev = prevPositions.get(id);
|
||||
if (!prev) return;
|
||||
const next = card.getBoundingClientRect();
|
||||
const dx = prev.left - next.left;
|
||||
const dy = prev.top - next.top;
|
||||
if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return;
|
||||
// Invert: jump back to old position
|
||||
card.style.transition = 'none';
|
||||
card.style.transform = `translate(${dx}px, ${dy}px)`;
|
||||
// Play: animate to 0
|
||||
requestAnimationFrame(() => {
|
||||
card.style.transition = 'transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1)';
|
||||
card.style.transform = '';
|
||||
card.addEventListener('transitionend', () => {
|
||||
card.style.transition = '';
|
||||
}, { once: true });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _applyMasonry(body) {
|
||||
if (!body || !body.isConnected) return;
|
||||
const pane = body.closest('.notes-pane');
|
||||
const isGrid = pane?.classList.contains('notes-view-grid');
|
||||
const isMobileGrid = isGrid && window.matchMedia('(max-width: 768px)').matches;
|
||||
// Tear down any prior observer (defensive : _renderNotes wipes body.innerHTML).
|
||||
if (_masonryObserver) { try { _masonryObserver.disconnect(); } catch {} _masonryObserver = null; }
|
||||
// A save that resolves after close re-renders the leaving pane; don't
|
||||
// re-create the observer that panel teardown already disposed.
|
||||
if (!isOpen()) return;
|
||||
if (!isGrid) {
|
||||
// Clear any leftover inline spans so list view lays out normally.
|
||||
body.querySelectorAll('.note-card, .notes-label-toggle, .notes-labels-bar, .notes-quick-add, .note-form, .doclib-chip-scroll-frame:has(> .notes-labels-bar)').forEach(c => { c.style.gridRowEnd = ''; });
|
||||
return;
|
||||
}
|
||||
const ROW_PX = 4;
|
||||
const spanForHeight = (h) => Math.max(1, Math.ceil(h / ROW_PX));
|
||||
const recomputeFullRows = () => {
|
||||
const quickAdd = body.querySelector('.notes-quick-add');
|
||||
const labelsToggle = body.querySelector('.notes-label-toggle');
|
||||
const labelsBar = body.querySelector('.notes-labels-bar');
|
||||
const labelsLayout = labelsBar?.parentElement?.classList.contains('doclib-chip-scroll-frame')
|
||||
? labelsBar.parentElement
|
||||
: labelsBar;
|
||||
if (labelsToggle && getComputedStyle(labelsToggle).display !== 'none') {
|
||||
labelsToggle.style.gridRowEnd = `span ${Math.max(1, spanForHeight(labelsToggle.scrollHeight))}`;
|
||||
}
|
||||
if (labelsLayout && getComputedStyle(labelsLayout).display !== 'none') {
|
||||
const shave = isMobileGrid ? 4 : 0;
|
||||
labelsLayout.style.gridRowEnd = `span ${Math.max(1, spanForHeight(labelsLayout.scrollHeight) - shave)}`;
|
||||
}
|
||||
if (quickAdd) {
|
||||
const shave = isMobileGrid ? 4 : 0;
|
||||
quickAdd.style.gridRowEnd = `span ${Math.max(1, spanForHeight(quickAdd.scrollHeight + 10) - shave)}`;
|
||||
}
|
||||
body.querySelectorAll('.note-form').forEach(form => {
|
||||
form.style.gridColumn = '1 / -1';
|
||||
const isDrawForm = !!form.querySelector('.note-form-type-seg.is-draw');
|
||||
const minSpan = isMobileGrid ? (isDrawForm ? 104 : 64) : 1;
|
||||
const renderedHeight = form.getBoundingClientRect?.().height || 0;
|
||||
const drawReserve = isDrawForm && isMobileGrid ? 12 : 12;
|
||||
const measuredHeight = Math.max(form.scrollHeight, renderedHeight) + drawReserve;
|
||||
form.style.gridRowEnd = `span ${Math.max(minSpan, spanForHeight(measuredHeight))}`;
|
||||
});
|
||||
};
|
||||
const recompute = (card) => {
|
||||
// scrollHeight returns the natural content height : card.getBoundingClientRect()
|
||||
// would return the grid cell height (collapsed to 4px until the span is set,
|
||||
// which is the value we're trying to compute).
|
||||
const h = card.scrollHeight + (isMobileGrid ? 6 : 8);
|
||||
if (h <= 0) return;
|
||||
card.style.gridRowEnd = `span ${spanForHeight(h)}`;
|
||||
};
|
||||
recomputeFullRows();
|
||||
body.querySelectorAll('.note-card').forEach(recompute);
|
||||
// Watch masonry participants : content can grow (image load, todo edits,
|
||||
// quick-add/form expansion), and stale spans are what cause visual merging.
|
||||
if ('ResizeObserver' in window) {
|
||||
_masonryObserver = new ResizeObserver(entries => {
|
||||
let fullRowsChanged = false;
|
||||
for (const e of entries) {
|
||||
if (e.target.classList.contains('note-card')) recompute(e.target);
|
||||
else fullRowsChanged = true;
|
||||
}
|
||||
if (fullRowsChanged) recomputeFullRows();
|
||||
});
|
||||
body.querySelectorAll('.note-card').forEach(c => _masonryObserver.observe(c));
|
||||
body.querySelectorAll('.notes-label-toggle, .notes-quick-add, .note-form').forEach(c => _masonryObserver.observe(c));
|
||||
const labelsBar = body.querySelector('.notes-labels-bar');
|
||||
const labelsLayout = labelsBar?.parentElement?.classList.contains('doclib-chip-scroll-frame')
|
||||
? labelsBar.parentElement
|
||||
: labelsBar;
|
||||
if (labelsLayout) _masonryObserver.observe(labelsLayout);
|
||||
}
|
||||
}
|
||||
|
||||
let _masonryObserver = null;
|
||||
|
||||
function dispose() {
|
||||
_masonryObserver?.disconnect();
|
||||
_masonryObserver = null;
|
||||
}
|
||||
return { dispose, _captureCardPositions, _animateReflow, _applyMasonry };
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/** Notes-owned document/window listeners. Detached editor/menu owners release their resources. */
|
||||
export function createNotesLifecycle() {
|
||||
const owners = new Map();
|
||||
let observer = null;
|
||||
function release(owner) {
|
||||
const entry = owners.get(owner);
|
||||
if (!entry) return;
|
||||
owners.delete(owner);
|
||||
for (const remove of entry.removers) remove();
|
||||
if (!owners.size) { observer?.disconnect(); observer = null; }
|
||||
}
|
||||
function onDispose(owner, remove) {
|
||||
if (!owner) throw new Error('Notes listener needs a lifecycle owner');
|
||||
let entry = owners.get(owner);
|
||||
if (!entry) {
|
||||
entry = { connected: owner.isConnected, removers: [] };
|
||||
owners.set(owner, entry);
|
||||
}
|
||||
entry.removers.push(remove);
|
||||
if (!observer) {
|
||||
observer = new MutationObserver(() => {
|
||||
for (const [node, scope] of owners) {
|
||||
if (node.isConnected) scope.connected = true;
|
||||
else if (scope.connected) release(node);
|
||||
}
|
||||
});
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
}
|
||||
function listen(owner, target, event, listener, options) {
|
||||
onDispose(owner, () => target.removeEventListener(event, listener, options));
|
||||
target.addEventListener(event, listener, options);
|
||||
}
|
||||
function dispose() { for (const owner of [...owners.keys()]) release(owner); }
|
||||
return { listen, onDispose, release, dispose };
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
/** Mobile fullscreen editing, link reader mode and return to the panel. */
|
||||
export function createMobileEditor({
|
||||
_applyDraftToNote,
|
||||
_buildForm,
|
||||
_fetchNotes,
|
||||
_linkify,
|
||||
_renderNotes,
|
||||
_uid,
|
||||
_wireChecklistTouchReorder,
|
||||
_wireRow,
|
||||
app,
|
||||
state,
|
||||
uiModule
|
||||
}) {
|
||||
function _isNotesMobileMode() {
|
||||
return ('ontouchstart' in window) && window.innerWidth <= 768;
|
||||
}
|
||||
|
||||
let _mobileFsOverlay = null;
|
||||
|
||||
let _mobileFsNoteId = null;
|
||||
|
||||
function _openMobileFullscreenEdit(id, fromCard) {
|
||||
const note = state.notes.find(n => n.id === id);
|
||||
if (!note) return;
|
||||
// Tear down any previous overlay (defensive).
|
||||
_closeMobileFullscreenEdit({ save: false });
|
||||
_mobileFsNoteId = id;
|
||||
app.setEditingId(id);
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'note-fullscreen-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="note-fullscreen-header">
|
||||
<button type="button" class="note-fullscreen-back" title="Back">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
||||
</button>
|
||||
<div class="note-fullscreen-actions"></div>
|
||||
</div>
|
||||
<div class="note-fullscreen-body"></div>
|
||||
`;
|
||||
const body = overlay.querySelector('.note-fullscreen-body');
|
||||
// Reuse the same edit form the in-place flow builds. Save buttons,
|
||||
// checklist toggles, etc. all work as-is. Restore any unsaved draft.
|
||||
const { note: _n, restored } = _applyDraftToNote(note, id);
|
||||
const form = _buildForm(_n);
|
||||
body.appendChild(form);
|
||||
if (restored) uiModule.showToast('Restored unsaved changes');
|
||||
document.body.appendChild(overlay);
|
||||
_mobileFsOverlay = overlay;
|
||||
|
||||
// Animate up from the tapped tile's position so the transition reads
|
||||
// as a zoom rather than a hard cut.
|
||||
if (fromCard) {
|
||||
const r = fromCard.getBoundingClientRect();
|
||||
const vw = window.innerWidth, vh = window.innerHeight;
|
||||
overlay.style.transformOrigin =
|
||||
`${((r.left + r.width / 2) / vw) * 100}% ${((r.top + r.height / 2) / vh) * 100}%`;
|
||||
}
|
||||
overlay.classList.add('opening');
|
||||
requestAnimationFrame(() => overlay.classList.add('open'));
|
||||
|
||||
// Wire the back button : saves whatever the form has and closes.
|
||||
// mousedown preventDefault so it doesn't blur the input on first tap (which
|
||||
// would eat the tap and require a second one).
|
||||
const _backBtn = overlay.querySelector('.note-fullscreen-back');
|
||||
_backBtn.addEventListener('mousedown', (e) => e.preventDefault());
|
||||
_backBtn.addEventListener('click', () => {
|
||||
_closeMobileFullscreenEdit({ save: true });
|
||||
});
|
||||
|
||||
// The form's built-in Cancel only resets the in-place edit state; in
|
||||
// the overlay context it does nothing visible. Replace its handler so
|
||||
// Cancel actually dismisses the overlay without saving.
|
||||
const cancelBtn = form.querySelector('.note-form-cancel');
|
||||
if (cancelBtn) {
|
||||
const fresh = cancelBtn.cloneNode(true);
|
||||
cancelBtn.parentNode.replaceChild(fresh, cancelBtn);
|
||||
fresh.addEventListener('mousedown', (e) => e.preventDefault());
|
||||
fresh.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
_closeMobileFullscreenEdit({ save: false });
|
||||
});
|
||||
}
|
||||
// The built-in Save handler does the API call + refresh, but doesn't
|
||||
// dismiss our overlay. Augment it (do NOT replace : the original is
|
||||
// async and we'd lose the API call) to schedule a close once the
|
||||
// save+render has had time to complete.
|
||||
const saveBtn = form.querySelector('.note-form-save');
|
||||
if (saveBtn) {
|
||||
saveBtn.addEventListener('click', () => {
|
||||
setTimeout(() => _closeMobileFullscreenEdit({ save: false }), 350);
|
||||
});
|
||||
}
|
||||
// Make the checklist row drag handle (⋮⋮) actually work on touch.
|
||||
// The form's default uses HTML5 native draggable which never fires
|
||||
// on iOS/Android. Wire touch-based reorder for any row inside the
|
||||
// overlay's checklist.
|
||||
_wireChecklistTouchReorder(form);
|
||||
|
||||
// For each todo row whose text contains a URL, swap the bare <input>
|
||||
// for a linkified <span> so URLs are tappable. Tapping anywhere that
|
||||
// ISN'T a link flips back to the input for editing.
|
||||
form.querySelectorAll('.note-cl-row').forEach(_addRowReadMode);
|
||||
|
||||
// Move only Delete from the form's footer actions row into the header.
|
||||
// Archive intentionally stays out of the header: the footer Update button
|
||||
// already morphs into the mobile Archive action for an untouched note.
|
||||
const headerActions = overlay.querySelector('.note-fullscreen-actions');
|
||||
const archiveBtn = form.querySelector('.note-form-archive-btn');
|
||||
const deleteBtn = form.querySelector('.note-form-delete-btn');
|
||||
if (headerActions && deleteBtn) {
|
||||
deleteBtn.classList.remove('note-form-collapsible');
|
||||
headerActions.appendChild(deleteBtn);
|
||||
}
|
||||
// The built-in archive/delete handlers re-render the notes grid but
|
||||
// leave THIS overlay sitting in front of it : looks like nothing
|
||||
// happened. Add follow-up listeners that close the overlay so the
|
||||
// user sees the action take effect.
|
||||
if (archiveBtn) {
|
||||
archiveBtn.addEventListener('click', () => {
|
||||
setTimeout(() => _closeMobileFullscreenEdit({ save: false }), 200);
|
||||
});
|
||||
}
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', () => {
|
||||
// Delete shows a styled confirm : give it room to resolve before
|
||||
// we try to dismiss the overlay.
|
||||
setTimeout(() => _closeMobileFullscreenEdit({ save: false }), 500);
|
||||
});
|
||||
}
|
||||
|
||||
// Tuck the tags input into the bottom actions row (Cancel / Update),
|
||||
// pinned to the LEFT. Frees the meta row of an extra wrapping line
|
||||
// and groups all the "exit" controls together.
|
||||
const actionsGroup = form.querySelector('.note-form-actions-group');
|
||||
const tagsInput = form.querySelector('.note-form-label');
|
||||
if (actionsGroup && tagsInput) {
|
||||
actionsGroup.insertBefore(tagsInput, actionsGroup.firstChild);
|
||||
}
|
||||
|
||||
// For checklist-type notes, move the photo (attach image) button into
|
||||
// the same row as the + Add button (right side) : keeps the meta row
|
||||
// tidy and puts the camera within thumb-reach of the active edit.
|
||||
const addBtn = form.querySelector('.note-cl-add');
|
||||
const photoBtn = form.querySelector('.note-form-photo-btn');
|
||||
if (addBtn && photoBtn) {
|
||||
const addRow = document.createElement('div');
|
||||
addRow.className = 'note-cl-add-row';
|
||||
addBtn.parentNode.insertBefore(addRow, addBtn);
|
||||
addRow.appendChild(addBtn);
|
||||
addRow.appendChild(photoBtn);
|
||||
// Tapping anywhere on the row (the empty gap, the dashed border,
|
||||
// the "+ Add" label) triggers add. The photo button keeps its own
|
||||
// click target so attach-image isn't ambushed.
|
||||
addRow.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.note-form-photo-btn')) return;
|
||||
if (e.target === addBtn || addBtn.contains(e.target)) return;
|
||||
addBtn.click();
|
||||
});
|
||||
// The form's delegated "+ Add" handler does
|
||||
// inputs.insertBefore(newRow, addBtn)
|
||||
// : but addBtn is no longer a direct child of `.note-checklist-inputs`
|
||||
// now that we wrapped it. Bind a fresh handler that does the same
|
||||
// thing but inserts before the WRAPPING row, and stop propagation
|
||||
// so the broken delegate never runs.
|
||||
addBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const inputs = form.querySelector('.note-checklist-inputs');
|
||||
if (!inputs) return;
|
||||
const newRow = document.createElement('div');
|
||||
newRow.className = 'note-cl-row';
|
||||
newRow.draggable = true;
|
||||
newRow.dataset.itemId = _uid();
|
||||
newRow.dataset.indent = '0';
|
||||
newRow.innerHTML = '<span class="note-cl-grip" title="Drag">⋮⋮</span><span class="note-cl-dot"></span><input type="text" class="note-cl-text" placeholder="Item..." /><button type="button" class="note-cl-rm">×</button>';
|
||||
inputs.insertBefore(newRow, addRow);
|
||||
_wireRow(newRow, inputs);
|
||||
// Touch reorder on the freshly-added row's grip.
|
||||
_wireChecklistTouchReorder(form);
|
||||
newRow.querySelector('.note-cl-text')?.focus();
|
||||
}, { capture: true });
|
||||
}
|
||||
|
||||
// Read-mode overlay for plain notes: render the content as a div with
|
||||
// clickable hyperlinks, layered above the textarea. Tapping anywhere
|
||||
// in the overlay that ISN'T a link hides the overlay and focuses the
|
||||
// textarea so the user can start editing. Tapping a link opens it.
|
||||
const ta = form.querySelector('.note-form-content');
|
||||
if (ta && (note.content || '').trim()) {
|
||||
const reader = document.createElement('div');
|
||||
reader.className = 'note-form-content-reader';
|
||||
reader.innerHTML = _linkify(note.content || '');
|
||||
ta.style.display = 'none';
|
||||
ta.insertAdjacentElement('beforebegin', reader);
|
||||
reader.addEventListener('click', (e) => {
|
||||
if (e.target.closest('a')) return; // let links open normally
|
||||
reader.remove();
|
||||
ta.style.display = '';
|
||||
// Let the browser place the cursor naturally : forcing
|
||||
// setSelectionRange right after focus() raced with the underlying
|
||||
// tap event and produced inconsistent cursor positions on mobile.
|
||||
ta.focus({ preventScroll: true });
|
||||
});
|
||||
}
|
||||
|
||||
// Opening an EXISTING note → read mode, no keyboard pop. Only a
|
||||
// brand-new note (created via the + button) should auto-focus an
|
||||
// input field. The user can tap the content to switch to edit.
|
||||
// (New-note creation flows through _createNote, not this function.)
|
||||
}
|
||||
|
||||
function _closeMobileFullscreenEdit(opts = {}) {
|
||||
if (!_mobileFsOverlay) return;
|
||||
const overlay = _mobileFsOverlay;
|
||||
overlay.querySelector('.note-form')?._flushDraft?.();
|
||||
_mobileFsOverlay = null;
|
||||
// If the form has a Save button, click it on close so edits aren't lost
|
||||
// when the user uses the back arrow instead of an explicit Save.
|
||||
if (opts.save) {
|
||||
const saveBtn = overlay.querySelector('.note-form-save, [data-action="save"]');
|
||||
if (saveBtn) try { saveBtn.click(); } catch {}
|
||||
}
|
||||
overlay.classList.remove('open');
|
||||
overlay.classList.add('closing');
|
||||
setTimeout(() => {
|
||||
if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
|
||||
_mobileFsNoteId = null;
|
||||
app.setEditingId(null);
|
||||
// Refresh the grid so any save the user made is reflected.
|
||||
if (opts.save !== false) { _fetchNotes().then(_renderNotes).catch(() => {}); }
|
||||
}, 220);
|
||||
}
|
||||
|
||||
function _addRowReadMode(row) {
|
||||
const txt = row.querySelector('.note-cl-text');
|
||||
if (!txt) return;
|
||||
const val = txt.value || '';
|
||||
if (!/(https?:\/\/|www\.)/i.test(val)) return;
|
||||
if (row.querySelector('.note-cl-text-reader')) return; // already wired
|
||||
const span = document.createElement('span');
|
||||
span.className = 'note-cl-text-reader';
|
||||
span.innerHTML = _linkify(val);
|
||||
txt.style.display = 'none';
|
||||
txt.insertAdjacentElement('beforebegin', span);
|
||||
span.addEventListener('click', (e) => {
|
||||
if (e.target.closest('a')) return; // let the link open
|
||||
span.remove();
|
||||
txt.style.display = '';
|
||||
txt.focus({ preventScroll: true });
|
||||
});
|
||||
}
|
||||
|
||||
return { _isNotesMobileMode, _openMobileFullscreenEdit, _closeMobileFullscreenEdit, _addRowReadMode };
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
/** Mobile card long press, placeholder drag and reorder persistence. */
|
||||
export function createMobileReorder({
|
||||
lifecycle,
|
||||
_applyMasonry,
|
||||
_enterSelectMode,
|
||||
commitMobileOrder,
|
||||
app,
|
||||
}) {
|
||||
function _bindLongPressDrag(card) {
|
||||
let pressTimer = null;
|
||||
let startX = 0, startY = 0;
|
||||
let armed = false;
|
||||
const CANCEL_PX = 8;
|
||||
const HOLD_MS = 450;
|
||||
|
||||
card.addEventListener('touchstart', (e) => {
|
||||
// Don't fight scroll on touchpoints over real interactive children
|
||||
// (in mobile-mode they're CSS-hidden anyway, but be defensive).
|
||||
if (e.target.closest('button, input, a, .note-form')) return;
|
||||
if (e.touches.length !== 1) return;
|
||||
armed = true;
|
||||
startX = e.touches[0].clientX;
|
||||
startY = e.touches[0].clientY;
|
||||
pressTimer = setTimeout(() => {
|
||||
if (!armed) return;
|
||||
try { navigator.vibrate?.(15); } catch {}
|
||||
app.setSuppressNextNoteTapId(card.dataset.noteId);
|
||||
_enterSelectMode(card.dataset.noteId);
|
||||
}, HOLD_MS);
|
||||
}, { passive: true });
|
||||
card.addEventListener('touchmove', (e) => {
|
||||
if (!armed) return;
|
||||
const t = e.touches[0];
|
||||
if (Math.abs(t.clientX - startX) > CANCEL_PX || Math.abs(t.clientY - startY) > CANCEL_PX) {
|
||||
armed = false;
|
||||
if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; }
|
||||
}
|
||||
}, { passive: true });
|
||||
const cancel = () => {
|
||||
armed = false;
|
||||
if (pressTimer) { clearTimeout(pressTimer); pressTimer = null; }
|
||||
};
|
||||
lifecycle.onDispose(card, cancel);
|
||||
card.addEventListener('touchend', cancel, { passive: true });
|
||||
card.addEventListener('touchcancel', cancel, { passive: true });
|
||||
}
|
||||
|
||||
let _dragState = null;
|
||||
|
||||
let _docDragHandlersBound = false;
|
||||
|
||||
function _enterDragMode(initialCard, initialTouch) {
|
||||
document.body.classList.add('notes-drag-mode');
|
||||
document.querySelectorAll('.note-card').forEach(_setupDragForCard);
|
||||
if (!_docDragHandlersBound) {
|
||||
lifecycle.listen(document.getElementById('notes-pane'), document, 'touchmove', _onDocTouchMove, { passive: false });
|
||||
lifecycle.listen(document.getElementById('notes-pane'), document, 'touchend', _onDocTouchEnd, { passive: true });
|
||||
lifecycle.listen(document.getElementById('notes-pane'), document, 'touchcancel', _onDocTouchEnd, { passive: true });
|
||||
_docDragHandlersBound = true;
|
||||
}
|
||||
// Auto-grab the card the user long-pressed : they're already holding
|
||||
// their finger on it, so begin the drag straight away. Releasing
|
||||
// (touchend) commits the reorder AND exits drag mode in one motion.
|
||||
if (initialCard && initialTouch) {
|
||||
_beginGrab(initialCard, initialTouch);
|
||||
}
|
||||
}
|
||||
|
||||
function _exitDragMode() {
|
||||
document.body.classList.remove('notes-drag-mode');
|
||||
if (_dragState) {
|
||||
// Defensive: if exit fires while a drag is in flight, snap the card back.
|
||||
_onDocTouchEnd();
|
||||
}
|
||||
// Leave _docDragHandlersBound true so re-entering drag mode reuses them.
|
||||
}
|
||||
|
||||
function _setupDragForCard(card) {
|
||||
if (card.dataset.dragBound === '1') return;
|
||||
card.dataset.dragBound = '1';
|
||||
card.addEventListener('touchstart', (e) => {
|
||||
if (!document.body.classList.contains('notes-drag-mode')) return;
|
||||
if (e.touches.length !== 1) return;
|
||||
if (_dragState) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
_beginGrab(card, e.touches[0]);
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
function _beginGrab(card, touch) {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const prevStyle = card.getAttribute('style') || '';
|
||||
// Placeholder fills the card's old slot so the grid layout doesn't reflow.
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.className = 'note-card-placeholder';
|
||||
placeholder.style.width = rect.width + 'px';
|
||||
placeholder.style.height = rect.height + 'px';
|
||||
placeholder.style.margin = getComputedStyle(card).margin;
|
||||
if (card.style.gridRowEnd) placeholder.style.gridRowEnd = card.style.gridRowEnd;
|
||||
const grid = card.parentNode;
|
||||
grid.insertBefore(placeholder, card);
|
||||
|
||||
// Detach the card visually : fixed-position, anchored to the finger.
|
||||
card.classList.add('note-card-dragging');
|
||||
card.style.position = 'fixed';
|
||||
card.style.left = rect.left + 'px';
|
||||
card.style.top = rect.top + 'px';
|
||||
card.style.width = rect.width + 'px';
|
||||
card.style.height = rect.height + 'px';
|
||||
card.style.margin = '0';
|
||||
card.style.zIndex = '10001';
|
||||
// pointer-events:none so elementFromPoint sees the card BENEATH the finger
|
||||
card.style.pointerEvents = 'none';
|
||||
|
||||
_dragState = {
|
||||
card, placeholder, grid, prevStyle,
|
||||
grabOffsetX: touch.clientX - rect.left,
|
||||
grabOffsetY: touch.clientY - rect.top,
|
||||
};
|
||||
try { navigator.vibrate?.(8); } catch {}
|
||||
}
|
||||
|
||||
function _onDocTouchMove(e) {
|
||||
if (!_dragState) return;
|
||||
if (e.touches.length !== 1) return;
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
const { card, placeholder, grid } = _dragState;
|
||||
card.style.left = (touch.clientX - _dragState.grabOffsetX) + 'px';
|
||||
const quickAdd = grid.querySelector('.notes-quick-add');
|
||||
const minTop = quickAdd ? quickAdd.getBoundingClientRect().bottom + 4 : grid.getBoundingClientRect().top;
|
||||
const maxTop = Math.max(minTop, window.innerHeight - card.getBoundingClientRect().height - 8);
|
||||
const nextTop = Math.max(minTop, Math.min(maxTop, touch.clientY - _dragState.grabOffsetY));
|
||||
card.style.top = nextTop + 'px';
|
||||
|
||||
const hitY = Math.max(minTop + 1, Math.min(window.innerHeight - 1, touch.clientY));
|
||||
const under = document.elementFromPoint(touch.clientX, hitY);
|
||||
const target = under && under.closest
|
||||
? under.closest('.note-card:not(.note-card-dragging)')
|
||||
: null;
|
||||
if (!target || target === card) return;
|
||||
if (target.parentNode !== grid) return;
|
||||
|
||||
// Move the PLACEHOLDER (not the card) above or below the target depending
|
||||
// on which half of the target the finger is in. This is the hysteresis
|
||||
// that stops the oscillation : once the placeholder moves past a card,
|
||||
// the cursor has to cross THAT card's midpoint in the other direction
|
||||
// to swap back.
|
||||
const tRect = target.getBoundingClientRect();
|
||||
const targetMidY = tRect.top + tRect.height / 2;
|
||||
if (touch.clientY < targetMidY) {
|
||||
if (placeholder.nextElementSibling !== target) {
|
||||
grid.insertBefore(placeholder, target);
|
||||
}
|
||||
} else {
|
||||
if (target.nextElementSibling !== placeholder) {
|
||||
grid.insertBefore(placeholder, target.nextElementSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function _onDocTouchEnd() {
|
||||
if (!_dragState) return;
|
||||
const { card, placeholder, grid, prevStyle } = _dragState;
|
||||
_dragState = null;
|
||||
// Animate the card from its current fixed position to where the
|
||||
// placeholder sits, then re-parent and clear inline styles. Drag
|
||||
// mode auto-exits once the snap finishes : release = done.
|
||||
const phRect = placeholder.getBoundingClientRect();
|
||||
card.style.transition = 'left 0.2s ease, top 0.2s ease';
|
||||
card.style.left = phRect.left + 'px';
|
||||
card.style.top = phRect.top + 'px';
|
||||
setTimeout(() => {
|
||||
placeholder.parentNode.insertBefore(card, placeholder);
|
||||
placeholder.remove();
|
||||
card.classList.remove('note-card-dragging');
|
||||
// Restore the card's pre-drag inline styles. Mobile masonry stores
|
||||
// grid-row-end inline, and custom backgrounds use inline style too; wiping
|
||||
// cssText made dropped cards collapse into neighboring notes in grid view.
|
||||
if (prevStyle) card.setAttribute('style', prevStyle);
|
||||
else card.removeAttribute('style');
|
||||
_applyMasonry(grid);
|
||||
_commitNoteReorder();
|
||||
// One drag, one exit : release ends the rearrange session entirely.
|
||||
if (document.body.classList.contains('notes-drag-mode')) {
|
||||
document.body.classList.remove('notes-drag-mode');
|
||||
}
|
||||
}, 210);
|
||||
}
|
||||
|
||||
async function _commitNoteReorder() {
|
||||
const grid = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (!grid) return;
|
||||
const ids = Array.from(grid.querySelectorAll('.note-card')).map(c => c.dataset.noteId).filter(Boolean);
|
||||
if (!ids.length) return;
|
||||
await commitMobileOrder(ids);
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (_dragState) {
|
||||
const { card, placeholder, prevStyle } = _dragState;
|
||||
_dragState = null;
|
||||
placeholder.parentNode?.insertBefore(card, placeholder);
|
||||
placeholder.remove();
|
||||
card.classList.remove('note-card-dragging');
|
||||
if (prevStyle) card.setAttribute('style', prevStyle);
|
||||
else card.removeAttribute('style');
|
||||
}
|
||||
document.body.classList.remove('notes-drag-mode');
|
||||
_docDragHandlersBound = false;
|
||||
}
|
||||
return { dispose, _bindLongPressDrag, _enterDragMode, _exitDragMode, _setupDragForCard, _beginGrab, _onDocTouchMove, _onDocTouchEnd, _commitNoteReorder };
|
||||
}
|
||||
@@ -0,0 +1,506 @@
|
||||
/** Panel mounting, keyboard handlers, minimization and note navigation. */
|
||||
export function createPanel({
|
||||
wireToolbar,
|
||||
wireSelectionActions,
|
||||
_wireNotesWindow,
|
||||
_restoreNotesSidebarDock,
|
||||
_bringNotesToFront,
|
||||
disposeUI,
|
||||
lifecycle,
|
||||
Modals,
|
||||
NOTES_FIRST_OPEN_HINT_KEY,
|
||||
REMINDER_DISMISSED_AT_KEY,
|
||||
_clearViewedReminderGlows,
|
||||
_closeMobileFullscreenEdit,
|
||||
_commitOpenInPlaceEditor,
|
||||
_copyNote,
|
||||
_enterSelectMode,
|
||||
_exitSelectMode,
|
||||
_fetchNotes,
|
||||
_flushPendingHighlights,
|
||||
_isNotesMobileMode,
|
||||
_popAndRunUndo,
|
||||
_renderLoadingSkeleton,
|
||||
_renderNotes,
|
||||
_startReminderLoop,
|
||||
app,
|
||||
bindTourHintDismiss,
|
||||
dismissOrRemove,
|
||||
persistence,
|
||||
state,
|
||||
workflows
|
||||
}) {
|
||||
function _forceCloseNotesPanel() {
|
||||
app.setOpen(false);
|
||||
app.setEditingId(null);
|
||||
try { _commitOpenInPlaceEditor(); } catch {}
|
||||
try { _closeMobileFullscreenEdit({ save: true }); } catch {}
|
||||
try { _clearViewedReminderGlows(); } catch {}
|
||||
if (_notesKeydownHandler) {
|
||||
document.removeEventListener('keydown', _notesKeydownHandler);
|
||||
_notesKeydownHandler = null;
|
||||
}
|
||||
if (_notesSelectEscHandler) {
|
||||
document.removeEventListener('keydown', _notesSelectEscHandler, true);
|
||||
_notesSelectEscHandler = null;
|
||||
}
|
||||
disposeOwnedPortals();
|
||||
disposeUI();
|
||||
document.body.classList.remove('notes-view', 'notes-mobile-mode', 'notes-drag-mode');
|
||||
document.getElementById('tool-notes-btn')?.classList.remove('active');
|
||||
try { Modals.unregister('notes-panel'); } catch {}
|
||||
try { document.getElementById('notes-pane')?.remove(); } catch {}
|
||||
try { document.getElementById('notes-pane-backdrop')?.remove(); } catch {}
|
||||
try { window._restoreSidebarIfRouteCollapsed?.(); } catch {}
|
||||
}
|
||||
|
||||
function _showNotesFirstOpenHint(pane) {
|
||||
if (!pane || typeof persistence === 'undefined') return;
|
||||
try {
|
||||
if (persistence.getItem(NOTES_FIRST_OPEN_HINT_KEY)) return;
|
||||
persistence.setItem(NOTES_FIRST_OPEN_HINT_KEY, '1');
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
dismissOrRemove(document.getElementById('notes-first-open-hint'));
|
||||
const hint = document.createElement('div');
|
||||
hint.id = 'notes-first-open-hint';
|
||||
hint.className = 'tour-hint';
|
||||
hint.innerHTML = `
|
||||
<div class="tour-hint-text"><b>Notes</b> is your basic todo list, and also where reminders are managed.</div>
|
||||
<button type="button" class="tour-hint-dismiss">OK</button>
|
||||
`;
|
||||
document.body.appendChild(hint);
|
||||
|
||||
const place = () => {
|
||||
const r = pane.getBoundingClientRect();
|
||||
const hw = hint.offsetWidth || 260;
|
||||
hint.style.top = Math.max(12, r.top + 58) + 'px';
|
||||
hint.style.left = Math.min(window.innerWidth - hw - 12, Math.max(12, r.left + 18)) + 'px';
|
||||
};
|
||||
requestAnimationFrame(() => {
|
||||
place();
|
||||
hint.classList.add('tour-hint-in');
|
||||
});
|
||||
lifecycle.listen(hint, window, 'resize', place);
|
||||
bindTourHintDismiss(hint, {
|
||||
timeout: 6500,
|
||||
fade: 180,
|
||||
onDismiss: () => window.removeEventListener('resize', place),
|
||||
});
|
||||
}
|
||||
|
||||
function _ensureNotesChipRegistered() {
|
||||
if (Modals.isRegistered('notes-panel')) return;
|
||||
Modals.register('notes-panel', {
|
||||
railBtnId: 'rail-notes',
|
||||
sidebarBtnId: 'tool-notes-btn',
|
||||
restoreFn: () => { openPanel(); },
|
||||
closeFn: () => { _forceCloseNotesPanel(); },
|
||||
});
|
||||
}
|
||||
|
||||
function openPanel() {
|
||||
if (state.open) {
|
||||
_bringNotesToFront();
|
||||
return;
|
||||
}
|
||||
// Notes and the document editor occupy the same primary workspace. Preserve
|
||||
// an open document as a dock chip instead of allowing the two panes to stack
|
||||
// into a broken layout (or closing the user's document outright).
|
||||
try {
|
||||
if (window.documentModule?.isPanelOpen?.()) {
|
||||
window.documentModule.closePanel('down');
|
||||
}
|
||||
} catch (_) {}
|
||||
app.setOpen(true);
|
||||
app.setEditingId(null);
|
||||
app.setSearchQuery('');
|
||||
_clearViewedReminderGlows();
|
||||
app.setFiredDotDismissedAt(Date.now());
|
||||
try { persistence.setItem(REMINDER_DISMISSED_AT_KEY, String(state.firedDotDismissedAt)); } catch {}
|
||||
|
||||
const container = document.getElementById('chat-container');
|
||||
if (!container) return;
|
||||
|
||||
document.body.classList.add('notes-view');
|
||||
|
||||
// On mobile the notes panel takes the whole screen : auto-close the
|
||||
// sidebar so the panel isn't cropped underneath it.
|
||||
if (window.innerWidth <= 768) {
|
||||
const sb = document.getElementById('sidebar');
|
||||
if (sb) sb.classList.add('hidden');
|
||||
document.body.classList.add('sidebar-collapsed');
|
||||
}
|
||||
// Mobile mode: tiles become read-only previews (no inline checkbox /
|
||||
// edit / archive / etc.), tap opens a fullscreen edit overlay,
|
||||
// long-press enters drag-to-reorder mode. See _bindCardEvents +
|
||||
// .notes-mobile-mode CSS rules.
|
||||
if (_isNotesMobileMode()) document.body.classList.add('notes-mobile-mode');
|
||||
|
||||
// Toggle button state
|
||||
const btn = document.getElementById('tool-notes-btn');
|
||||
if (btn) btn.classList.add('active');
|
||||
|
||||
// Create panel
|
||||
const pane = document.createElement('div');
|
||||
pane.id = 'notes-pane';
|
||||
pane.className = 'notes-pane';
|
||||
pane.innerHTML = `
|
||||
<div class="notes-mobile-grabber" id="notes-mobile-grabber" aria-hidden="true"></div>
|
||||
<div class="notes-pane-header">
|
||||
<h4 class="notes-pane-title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2.5px;margin-right:6px"><path d="M5 3h10l4 4v14H5z"/><path d="M15 3v5h5"/><path d="M8 17.5 15.5 10l2.5 2.5L10.5 20H8z"/></svg>Notes</h4>
|
||||
<span style="flex:1"></span>
|
||||
<button id="notes-archive-toggle" class="doc-action-icon-btn notes-header-text-btn" title="View archive" style="opacity:0.8;gap:5px;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8"/><path d="M10 12h4"/></svg>
|
||||
<span class="notes-header-btn-label">Archive</span>
|
||||
</button>
|
||||
<button id="notes-view-toggle" class="doc-action-icon-btn notes-header-text-btn" title="Toggle view" style="opacity:0.8;gap:5px;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
||||
<span class="notes-header-btn-label">Toggle</span>
|
||||
</button>
|
||||
<button id="notes-minimize-btn" class="modal-minimize-btn" title="Minimize" aria-label="Minimize notes" style="position:relative;left:2px;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="18" x2="18" y2="18"/></svg></button>
|
||||
</div>
|
||||
<div class="notes-search-bar">
|
||||
<input type="text" id="notes-search" class="memory-search-input" placeholder="Search notes…" autocomplete="off" />
|
||||
<button id="notes-select-btn" class="notes-select-trigger" type="button">Select</button>
|
||||
</div>
|
||||
<div id="notes-bulk-bar" class="memory-bulk-bar hidden">
|
||||
<label class="memory-bulk-check-all"><input type="checkbox" id="notes-select-all" /> All</label>
|
||||
<span id="notes-selected-count">0 Selected</span>
|
||||
<span style="flex:1"></span>
|
||||
<button id="notes-send-agent" class="memory-toolbar-btn" disabled><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:5px;opacity:0.6"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>Send to Agent</button>
|
||||
<button id="notes-bulk-archive" class="memory-toolbar-btn" disabled>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8"/><path d="M10 12h4"/></svg>Archive
|
||||
</button>
|
||||
<button id="notes-bulk-delete" class="memory-toolbar-btn danger" disabled>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>Delete
|
||||
</button>
|
||||
<button id="notes-bulk-cancel" class="memory-toolbar-btn active" title="Cancel selection" aria-label="Cancel selection">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="notes-pane-body"></div>
|
||||
`;
|
||||
|
||||
// On mobile open as a full-screen bottom sheet (slide up), not the desktop
|
||||
// side panel. Set inline so it wins over the base .notes-pane rule regardless
|
||||
// of cascade specifics (the CSS @media override wasn't reliably applying,
|
||||
// which left it as a side panel squeezing the chat).
|
||||
if (window.innerWidth <= 768) {
|
||||
pane.style.position = 'fixed';
|
||||
pane.style.inset = '0';
|
||||
pane.style.width = '100%';
|
||||
pane.style.maxWidth = '100%';
|
||||
pane.style.zIndex = '170';
|
||||
pane.style.borderRadius = '14px 14px 0 0';
|
||||
pane.style.animation = 'sheet-enter 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both';
|
||||
pane.style.transformOrigin = 'bottom center';
|
||||
}
|
||||
|
||||
// Mount on body so Notes can behave like the other draggable windows. On
|
||||
// desktop it is immediately docked to the right by _restoreNotesSidebarDock.
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'notes-pane-backdrop';
|
||||
backdrop.id = 'notes-pane-backdrop';
|
||||
backdrop.addEventListener('click', (ev) => {
|
||||
if (ev.target === backdrop) closePanel('down');
|
||||
});
|
||||
backdrop.appendChild(pane);
|
||||
document.body.appendChild(backdrop);
|
||||
_wireNotesWindow(pane);
|
||||
_restoreNotesSidebarDock(pane);
|
||||
_bringNotesToFront(pane);
|
||||
|
||||
// Events
|
||||
// (Close chevron removed : swipe down on mobile, tool-rail toggle on desktop.)
|
||||
|
||||
// Mobile: swipe the grab handle / header down to dismiss (minimise to chip).
|
||||
// Mirrors the document sheet gesture : finger-following, velocity-based
|
||||
// dismiss, rubber-band on up-drag, spring snap-back.
|
||||
_wireNotesSwipeDismiss(pane.querySelector('.notes-mobile-grabber'), pane);
|
||||
_wireNotesSwipeDismiss(pane.querySelector('.notes-pane-header'), pane);
|
||||
|
||||
pane.addEventListener('pointerdown', () => _bringNotesToFront(pane), true);
|
||||
pane.addEventListener('focusin', () => _bringNotesToFront(pane), true);
|
||||
|
||||
const minBtn = document.getElementById('notes-minimize-btn');
|
||||
if (minBtn) minBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
closePanel('down');
|
||||
});
|
||||
wireToolbar(pane);
|
||||
// Select mode
|
||||
document.getElementById('notes-select-btn').addEventListener('click', () => {
|
||||
if (state.selectMode) _exitSelectMode(); else _enterSelectMode();
|
||||
});
|
||||
// Esc cancels select mode. Notes uses a toggle "Select" button rather
|
||||
// than a *-bulk-cancel button, so the global Esc-cancel handler in
|
||||
// keyboard-shortcuts.js can't reach it : handle it here. Capture phase
|
||||
// + stopPropagation so Esc cancels select instead of closing the panel.
|
||||
if (_notesSelectEscHandler) {
|
||||
document.removeEventListener('keydown', _notesSelectEscHandler, true);
|
||||
}
|
||||
_notesSelectEscHandler = (e) => {
|
||||
if (e.key === 'Escape' && state.selectMode) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
_exitSelectMode();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', _notesSelectEscHandler, true);
|
||||
wireSelectionActions();
|
||||
// Escape: exit select mode first (if active), otherwise close the panel.
|
||||
// Skip when the user is editing a form field : those have their own
|
||||
// ESC-to-cancel handlers and we don't want to nuke the whole panel
|
||||
// mid-edit.
|
||||
// Idempotent: remove any previous handler from a prior openPanel so
|
||||
// re-opening doesn't stack multiple handlers.
|
||||
if (_notesKeydownHandler) {
|
||||
document.removeEventListener('keydown', _notesKeydownHandler);
|
||||
_notesKeydownHandler = null;
|
||||
}
|
||||
_notesKeydownHandler = (e) => {
|
||||
if (!state.open) return;
|
||||
const t = e.target;
|
||||
const inField = t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable);
|
||||
// Ctrl/Cmd+Z anywhere in the panel : undo the last note action. Skip when
|
||||
// typing in a field so the browser's normal text-undo still works.
|
||||
if ((e.ctrlKey || e.metaKey) && (e.key === 'z' || e.key === 'Z') && !e.shiftKey) {
|
||||
if (inField) return;
|
||||
if (workflows.undoCount() === 0) return;
|
||||
e.preventDefault();
|
||||
_popAndRunUndo();
|
||||
return;
|
||||
}
|
||||
// Ctrl/Cmd+C while hovering a note card → copy that note. Skip when the
|
||||
// user is editing or has an active text selection (let the browser handle
|
||||
// a real text copy in that case).
|
||||
if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'C') && !e.shiftKey && !e.altKey) {
|
||||
if (inField) return;
|
||||
const sel = window.getSelection?.();
|
||||
if (sel && sel.toString && sel.toString().length > 0) return;
|
||||
const hovered = document.querySelector('.note-card:hover');
|
||||
if (!hovered) return;
|
||||
const id = hovered.dataset.noteId;
|
||||
if (!id) return;
|
||||
e.preventDefault();
|
||||
// Flash the ⋯ menu button (copy now lives in that menu).
|
||||
const btn = hovered.querySelector('.note-card-corner-menu');
|
||||
_copyNote(id, btn);
|
||||
return;
|
||||
}
|
||||
if (e.key !== 'Escape') return;
|
||||
if (inField) return;
|
||||
if (state.selectMode) { _exitSelectMode(); return; }
|
||||
if (state.showingArchived) {
|
||||
// Mirror the archive toggle button: flip back to active notes.
|
||||
document.getElementById('notes-archive-toggle')?.click();
|
||||
return;
|
||||
}
|
||||
_forceCloseNotesPanel();
|
||||
};
|
||||
document.addEventListener('keydown', _notesKeydownHandler);
|
||||
|
||||
// Load : show skeleton immediately, then fetch
|
||||
_renderLoadingSkeleton();
|
||||
// Defer the highlight flush to the next frame so it runs *after* the cards
|
||||
// are committed to the DOM (and any FLIP animations have settled), giving
|
||||
// the querySelector lookups inside something to find.
|
||||
_fetchNotes().then(() => {
|
||||
if (!pane.isConnected || !state.open) { _startReminderLoop(); return; }
|
||||
_renderNotes();
|
||||
requestAnimationFrame(() => _flushPendingHighlights());
|
||||
_startReminderLoop();
|
||||
_showNotesFirstOpenHint(pane);
|
||||
});
|
||||
}
|
||||
|
||||
function closePanel(direction) {
|
||||
if (!state.open) return;
|
||||
app.setOpen(false);
|
||||
app.setEditingId(null);
|
||||
_clearViewedReminderGlows();
|
||||
const _minimize = direction === 'down';
|
||||
if (_minimize) {
|
||||
_ensureNotesChipRegistered();
|
||||
} else if (Modals.isRegistered('notes-panel')) {
|
||||
Modals.unregister('notes-panel');
|
||||
}
|
||||
|
||||
// Drop panel-owned keydown listeners. The reminder interval is page-owned.
|
||||
if (_notesKeydownHandler) {
|
||||
document.removeEventListener('keydown', _notesKeydownHandler);
|
||||
_notesKeydownHandler = null;
|
||||
}
|
||||
if (_notesSelectEscHandler) {
|
||||
document.removeEventListener('keydown', _notesSelectEscHandler, true);
|
||||
_notesSelectEscHandler = null;
|
||||
}
|
||||
|
||||
disposeOwnedPortals();
|
||||
disposeUI();
|
||||
document.body.classList.remove('notes-view');
|
||||
document.body.classList.remove('notes-mobile-mode');
|
||||
document.body.classList.remove('notes-drag-mode');
|
||||
// Closing the panel should PRESERVE in-progress edits, not drop them.
|
||||
// Commit any open in-place editor, and close the mobile fullscreen
|
||||
// overlay with save=true so the note is persisted.
|
||||
try { _commitOpenInPlaceEditor(); } catch {}
|
||||
_closeMobileFullscreenEdit({ save: true });
|
||||
// /notes route may have collapsed the wide sidebar to a rail; restore.
|
||||
try { window._restoreSidebarIfRouteCollapsed?.(); } catch (_) {}
|
||||
|
||||
const btn = document.getElementById('tool-notes-btn');
|
||||
if (btn) btn.classList.remove('active');
|
||||
|
||||
const pane = document.getElementById('notes-pane');
|
||||
const backdrop = document.getElementById('notes-pane-backdrop');
|
||||
if (pane) {
|
||||
// Scale-out + fade. Match the enter animation duration so close feels
|
||||
// like the same gesture played backwards.
|
||||
pane.classList.add('notes-pane-leaving');
|
||||
const _cleanup = () => {
|
||||
try { pane.remove(); } catch {}
|
||||
try { backdrop?.remove(); } catch {}
|
||||
};
|
||||
pane.addEventListener('animationend', _cleanup, { once: true });
|
||||
// Belt-and-braces: if animation is skipped (reduced motion / detached
|
||||
// tab) the listener won't fire; remove after the expected duration.
|
||||
setTimeout(_cleanup, 220);
|
||||
} else if (backdrop) {
|
||||
backdrop.remove();
|
||||
}
|
||||
// Show the dock chip for a swipe-down minimize (tap it to reopen).
|
||||
if (_minimize) { try { Modals.minimize('notes-panel'); } catch {} }
|
||||
}
|
||||
|
||||
function togglePanel() {
|
||||
if (state.open) closePanel();
|
||||
else openPanel();
|
||||
}
|
||||
|
||||
function isPanelOpen() { return state.open; }
|
||||
|
||||
async function openNote(noteId) {
|
||||
const wasOpen = !!(isPanelOpen && isPanelOpen());
|
||||
app.setShowingArchived(false);
|
||||
app.setActiveLabel(null);
|
||||
app.setActiveFilter(null);
|
||||
app.setSearchQuery('');
|
||||
if (!wasOpen) {
|
||||
openPanel();
|
||||
} else {
|
||||
_bringNotesToFront();
|
||||
const searchEl = document.getElementById('notes-search');
|
||||
if (searchEl) searchEl.value = '';
|
||||
const pane = document.getElementById('notes-pane');
|
||||
if (pane) pane.classList.remove('notes-pane-archive');
|
||||
const archiveBtn = document.getElementById('notes-archive-toggle');
|
||||
if (archiveBtn) archiveBtn.classList.remove('active');
|
||||
await _fetchNotes();
|
||||
_renderNotes();
|
||||
}
|
||||
// openPanel() kicks off _fetchNotes() asynchronously, so the cards for
|
||||
// newly-created notes may not be in the DOM yet. Poll until the card exists.
|
||||
if (!noteId) return;
|
||||
let tries = 0;
|
||||
const findAndFlash = () => {
|
||||
const card = document.querySelector(`.note-card[data-note-id="${noteId}"]`)
|
||||
|| document.querySelector(`.note-card[data-note-id^="${noteId.slice(0, 8)}"]`);
|
||||
if (card) {
|
||||
_smoothScrollToNoteCard(card);
|
||||
card.classList.add('note-card-flash');
|
||||
setTimeout(() => card.classList.remove('note-card-flash'), 1600);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const tryNext = () => {
|
||||
if (findAndFlash()) return;
|
||||
if (++tries < 20) setTimeout(tryNext, 200);
|
||||
};
|
||||
setTimeout(tryNext, 120);
|
||||
}
|
||||
|
||||
let _notesKeydownHandler = null;
|
||||
|
||||
let _notesSelectEscHandler = null;
|
||||
|
||||
function _wireNotesSwipeDismiss(el, pane) {
|
||||
if (!el || !pane) return;
|
||||
const DISMISS_THRESHOLD = 50, VELOCITY_THRESHOLD = 0.3, RUBBER = 0.35;
|
||||
let startY = 0, startX = 0, lastY = 0, lastT = 0, velocity = 0;
|
||||
let dragging = false, cancelled = false;
|
||||
|
||||
el.addEventListener('touchstart', (e) => {
|
||||
if (window.innerWidth > 768 || e.touches.length !== 1) return;
|
||||
if (e.target.closest('button, input, select, label, textarea')) return;
|
||||
const t = e.touches[0];
|
||||
startY = t.clientY; startX = t.clientX; lastY = startY; lastT = e.timeStamp;
|
||||
velocity = 0; dragging = false; cancelled = false;
|
||||
}, { passive: true });
|
||||
|
||||
el.addEventListener('touchmove', (e) => {
|
||||
if (cancelled || window.innerWidth > 768) return;
|
||||
const t = e.touches[0];
|
||||
const dx = Math.abs(t.clientX - startX);
|
||||
const dy = t.clientY - startY;
|
||||
if (!dragging) {
|
||||
if (dx > 40 && dx > Math.abs(dy) * 2) { cancelled = true; return; }
|
||||
if (Math.abs(dy) > 8) {
|
||||
dragging = true;
|
||||
pane.style.animation = 'none';
|
||||
pane.style.transition = 'none';
|
||||
pane.style.willChange = 'transform';
|
||||
} else return;
|
||||
}
|
||||
const dt = e.timeStamp - lastT;
|
||||
if (dt > 0) velocity = velocity * 0.6 + ((t.clientY - lastY) / dt) * 0.4;
|
||||
lastY = t.clientY; lastT = e.timeStamp;
|
||||
e.preventDefault();
|
||||
pane.style.transform = dy > 0 ? `translateY(${dy}px)` : `translateY(${dy * RUBBER}px)`;
|
||||
}, { passive: false });
|
||||
|
||||
const endSwipe = () => {
|
||||
if (!dragging) return;
|
||||
dragging = false;
|
||||
pane.style.willChange = '';
|
||||
const dy = lastY - startY;
|
||||
if (dy > DISMISS_THRESHOLD || (dy > 20 && velocity > VELOCITY_THRESHOLD)) {
|
||||
// Slide fully off-screen, then minimise. Keep it translated down (don't
|
||||
// reset) so it doesn't flash back before closePanel removes it.
|
||||
pane.style.transition = 'transform 0.2s cubic-bezier(0.2, 0, 0.4, 1)';
|
||||
pane.style.transform = 'translateY(100%)';
|
||||
setTimeout(() => closePanel('down'), 200);
|
||||
} else {
|
||||
pane.style.transition = 'transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.05)';
|
||||
pane.style.transform = '';
|
||||
setTimeout(() => { pane.style.transition = ''; }, 260);
|
||||
}
|
||||
};
|
||||
el.addEventListener('touchend', endSwipe, { passive: true });
|
||||
el.addEventListener('touchcancel', endSwipe, { passive: true });
|
||||
}
|
||||
|
||||
function _smoothScrollToNoteCard(card) {
|
||||
if (!card) return;
|
||||
const scroller = card.closest('.notes-pane-body');
|
||||
if (!scroller) {
|
||||
try { card.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (_) {}
|
||||
return;
|
||||
}
|
||||
const scrollerRect = scroller.getBoundingClientRect();
|
||||
const cardRect = card.getBoundingClientRect();
|
||||
const delta = (cardRect.top - scrollerRect.top) - (scroller.clientHeight - cardRect.height) / 2;
|
||||
scroller.scrollTo({ top: Math.max(0, scroller.scrollTop + delta), behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function disposeOwnedPortals() {
|
||||
document.querySelectorAll('.note-reminder-menu, .note-corner-menu-dropdown, #notes-first-open-hint').forEach(dismissOrRemove);
|
||||
}
|
||||
|
||||
return { _forceCloseNotesPanel, openPanel, closePanel, togglePanel, isPanelOpen, openNote, _smoothScrollToNoteCard };
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
/** Quick-add expansion, draft restoration and opening inline editors. */
|
||||
export function createQuickAdd({
|
||||
_applyDraftToNote,
|
||||
_applyMasonry,
|
||||
_buildForm,
|
||||
app,
|
||||
openPanel,
|
||||
state,
|
||||
uiModule
|
||||
}) {
|
||||
function _renderQuickAdd(body) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'notes-quick-add';
|
||||
// 2-pill Note/Todo toggle mirrors the full form's type-seg (minus Draw :
|
||||
// drawing happens in the expanded form). The pill that's active steers
|
||||
// both the placeholder and the type the form opens in.
|
||||
wrap.innerHTML = `
|
||||
<div class="notes-quick-type-seg is-todo" role="group" aria-label="New item type">
|
||||
<button type="button" class="notes-quick-type-pill" data-type="note" aria-label="Note" aria-pressed="false" title="Note">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg>
|
||||
</button>
|
||||
<button type="button" class="notes-quick-type-pill active" data-type="todo" aria-label="To-do" aria-pressed="true" title="To-do">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="notes-quick-input" placeholder="Add a to-do…" />
|
||||
<button class="notes-quick-icon" data-action="photo" title="Attach photo">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||||
</button>
|
||||
`;
|
||||
body.appendChild(wrap);
|
||||
|
||||
const input = wrap.querySelector('.notes-quick-input');
|
||||
const seg = wrap.querySelector('.notes-quick-type-seg');
|
||||
let currentType = 'todo';
|
||||
const setType = (t) => {
|
||||
if (t !== 'note' && t !== 'todo') return;
|
||||
currentType = t;
|
||||
seg.classList.toggle('is-todo', t === 'todo');
|
||||
seg.classList.toggle('is-note', t === 'note');
|
||||
seg.querySelectorAll('.notes-quick-type-pill').forEach(p => {
|
||||
const on = p.dataset.type === t;
|
||||
p.classList.toggle('active', on);
|
||||
p.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
});
|
||||
input.placeholder = t === 'note' ? 'Add a note…' : 'Add a to-do…';
|
||||
};
|
||||
seg.querySelectorAll('.notes-quick-type-pill').forEach(p => {
|
||||
p.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
setType(p.dataset.type);
|
||||
});
|
||||
});
|
||||
// Click input or type → expand to full form
|
||||
const expandToForm = (initialType = 'note', initialText = '') => {
|
||||
app.setEditingId('__new__');
|
||||
const form = _buildForm({ note_type: initialType });
|
||||
form.classList.add('note-form-new');
|
||||
if (initialText) {
|
||||
const titleEl = form.querySelector('.note-form-title');
|
||||
if (titleEl) titleEl.value = initialText;
|
||||
}
|
||||
const mobileGrid = body.closest('.notes-pane')?.classList.contains('notes-view-grid')
|
||||
&& window.matchMedia('(max-width: 768px)').matches;
|
||||
if (mobileGrid) {
|
||||
form.style.gridColumn = '1 / -1';
|
||||
form.style.gridRowEnd = 'span 64';
|
||||
}
|
||||
wrap.replaceWith(form);
|
||||
_applyMasonry(body);
|
||||
requestAnimationFrame(() => _applyMasonry(body));
|
||||
const titleEl = form.querySelector('.note-form-title');
|
||||
if (titleEl) {
|
||||
titleEl.focus();
|
||||
// Move caret to end
|
||||
titleEl.setSelectionRange(titleEl.value.length, titleEl.value.length);
|
||||
}
|
||||
};
|
||||
// Expand only on real intent: a click directly on the input, or actual
|
||||
// typing. Focus alone : including focus stolen from a missed nearby
|
||||
// click : no longer creates an empty form.
|
||||
input.addEventListener('click', () => expandToForm(currentType, input.value));
|
||||
input.addEventListener('input', () => expandToForm(currentType, input.value));
|
||||
wrap.querySelector('[data-action="photo"]').addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
expandToForm(currentType);
|
||||
// Trigger photo input on the new form
|
||||
setTimeout(() => document.querySelector('.note-form-photo-btn')?.click(), 50);
|
||||
});
|
||||
}
|
||||
|
||||
function _createNote(type = 'todo') {
|
||||
const body = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (!body || state.editingId === '__new__') return;
|
||||
app.setEditingId('__new__');
|
||||
// Restore an unsaved new-note draft if one survived a prior close/loss.
|
||||
const { note: _n, restored } = _applyDraftToNote({ note_type: type }, '__new__');
|
||||
const form = _buildForm(_n);
|
||||
form.classList.add('note-form-new');
|
||||
body.prepend(form);
|
||||
const initialField = type === 'note'
|
||||
? form.querySelector('.note-form-content')
|
||||
: form.querySelector('.note-cl-text, .note-form-title');
|
||||
initialField?.focus();
|
||||
if (restored) uiModule.showToast('Restored unsaved note');
|
||||
}
|
||||
|
||||
function newNote() {
|
||||
if (!state.open) openPanel();
|
||||
requestAnimationFrame(() => _createNote('note'));
|
||||
}
|
||||
|
||||
function _editNote(id) {
|
||||
const note = state.notes.find(n => n.id === id);
|
||||
if (!note) return;
|
||||
app.setEditingId(id);
|
||||
const card = document.querySelector(`.note-card[data-note-id="${id}"]`);
|
||||
if (!card) return;
|
||||
// Restore an unsaved draft (from a prior connection loss / close) over
|
||||
// the saved note so the user picks up where they left off.
|
||||
const { note: _n, restored } = _applyDraftToNote(note, id);
|
||||
const form = _buildForm(_n);
|
||||
card.replaceWith(form);
|
||||
if (restored) uiModule.showToast('Restored unsaved changes');
|
||||
// Pinned notes live in the first masonry column : the edit form has
|
||||
// column-span:all, which can leave the form rendered above the fold or
|
||||
// visually buried under neighboring pinned cards. Bring it into view
|
||||
// (and onto a higher stacking context) so editing a pinned note always
|
||||
// pops to the top.
|
||||
form.style.position = 'relative';
|
||||
form.style.zIndex = '5';
|
||||
// Grid view: the form keeps the CSS default `grid-row-end: span 16` (64px)
|
||||
// after replaceWith, which is much shorter than the actual form. Recompute
|
||||
// masonry so the form gets the correct row span and cards below stop
|
||||
// overlapping it. ResizeObserver inside _applyMasonry keeps it in sync as
|
||||
// the user types / adds checklist items.
|
||||
const _body = form.closest('.notes-pane-body');
|
||||
if (_body) {
|
||||
_applyMasonry(_body);
|
||||
requestAnimationFrame(() => _applyMasonry(_body));
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
try { form.scrollIntoView({ block: 'center', behavior: 'smooth' }); }
|
||||
catch { form.scrollIntoView(); }
|
||||
});
|
||||
// Pick the most useful field to focus. On phones especially, the user
|
||||
// taps Edit to type : landing in the title when there's already a title
|
||||
// (and likely a body to extend) loses momentum. Prefer the body textarea
|
||||
// for plain notes, the first checklist item for todos, fall back to title.
|
||||
const _focusBest = () => {
|
||||
if (note.note_type === 'note' || !note.note_type) {
|
||||
const ta = form.querySelector('.note-form-content');
|
||||
if (ta) { ta.focus(); try { ta.setSelectionRange(ta.value.length, ta.value.length); } catch {} return; }
|
||||
}
|
||||
if (note.note_type === 'todo' || note.note_type === 'goal' || note.note_type === 'checklist') {
|
||||
// Last non-empty checklist row, or the first row if all empty.
|
||||
const rows = form.querySelectorAll('.note-cl-row .note-cl-text');
|
||||
let target = null;
|
||||
for (const inp of rows) { if ((inp.value || '').trim()) target = inp; }
|
||||
target = target || rows[0];
|
||||
if (target) { target.focus(); try { target.setSelectionRange(target.value.length, target.value.length); } catch {} return; }
|
||||
}
|
||||
const titleEl = form.querySelector('.note-form-title');
|
||||
if (titleEl) titleEl.focus();
|
||||
};
|
||||
_focusBest();
|
||||
}
|
||||
|
||||
return { _renderQuickAdd, _createNote, newNote, _editNote };
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
/** Reminder badges, sticky card highlights and entry scrolling. */
|
||||
import { _isNoteFullyDone } from '../domain/noteRules.js';
|
||||
import { _hasTimeComponent } from '../domain/recurrence.js';
|
||||
export function createReminderDisplay({
|
||||
_countFiredReminders,
|
||||
_hasActiveReminder,
|
||||
_loadActiveHighlights,
|
||||
_loadGlowedReminders,
|
||||
_loadPendingHighlights,
|
||||
_saveActiveHighlights,
|
||||
_saveGlowedReminders,
|
||||
_savePendingHighlights,
|
||||
_smoothScrollToNoteCard,
|
||||
state
|
||||
}) {
|
||||
function _clearViewedReminderGlows() {
|
||||
const active = _loadActiveHighlights();
|
||||
if (!active.size) return;
|
||||
_saveActiveHighlights(new Set());
|
||||
document.querySelectorAll('.note-card-reminder-fired-sticky').forEach(card => {
|
||||
card.classList.remove('note-card-reminder-fired-sticky');
|
||||
});
|
||||
}
|
||||
|
||||
function _setReminderCardGlow(noteId, on = true) {
|
||||
if (!noteId) return;
|
||||
const active = _loadActiveHighlights();
|
||||
if (on) active.add(noteId);
|
||||
else active.delete(noteId);
|
||||
_saveActiveHighlights(active);
|
||||
document.querySelectorAll(`.note-card[data-note-id="${noteId}"]`).forEach(card => {
|
||||
card.classList.toggle('note-card-reminder-fired-sticky', on);
|
||||
});
|
||||
}
|
||||
|
||||
function _queuePendingHighlight(noteId) {
|
||||
const set = _loadPendingHighlights();
|
||||
set.add(noteId);
|
||||
_savePendingHighlights(set);
|
||||
}
|
||||
|
||||
function _flushPendingHighlights() {
|
||||
// Fresh firings (queued by the background loop while the panel was closed)
|
||||
// glow unconditionally : a notification just told the user something
|
||||
// happened, so we always point at the note even if it was glowed before.
|
||||
const queued = _loadPendingHighlights();
|
||||
const glowed = _loadGlowedReminders();
|
||||
const toGlow = new Set(queued);
|
||||
// For notes that are merely overdue at open time (no fresh firing event),
|
||||
// only glow the ones we haven't already shown : otherwise reopening the
|
||||
// panel keeps lighting up old reminders forever.
|
||||
for (const n of state.notes) {
|
||||
if (!_hasActiveReminder(n) || !_hasTimeComponent(n.due_date)) continue;
|
||||
if (queued.has(n.id) || !glowed.has(n.id)) toGlow.add(n.id);
|
||||
}
|
||||
// Always consume the queue.
|
||||
_savePendingHighlights(new Set());
|
||||
if (!toGlow.size) return;
|
||||
let firstCard = null;
|
||||
for (const id of toGlow) {
|
||||
const card = document.querySelector(`.note-card[data-note-id="${id}"]`);
|
||||
if (!card) continue;
|
||||
_setReminderCardGlow(id, true);
|
||||
if (!firstCard) firstCard = card;
|
||||
glowed.add(id);
|
||||
}
|
||||
_saveGlowedReminders(glowed);
|
||||
// Bring the first one into view so it can't get buried below the fold.
|
||||
if (firstCard) {
|
||||
requestAnimationFrame(() => {
|
||||
_smoothScrollToNoteCard(firstCard);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function _updateRailBadge() {
|
||||
const fired = _countFiredReminders();
|
||||
// Rail (mini sidebar) : only show the count when reminders have ACTUALLY
|
||||
// fired since the last dismissal (i.e. you haven't opened notes yet).
|
||||
// Showing every overdue note forever made the badge feel permanent.
|
||||
const railBtn = document.getElementById('rail-notes');
|
||||
if (railBtn) {
|
||||
let badge = railBtn.querySelector('.rail-notes-badge');
|
||||
if (fired > 0) {
|
||||
if (!badge) {
|
||||
badge = document.createElement('span');
|
||||
badge.className = 'rail-notes-badge';
|
||||
railBtn.appendChild(badge);
|
||||
}
|
||||
badge.textContent = fired > 99 ? '99+' : String(fired);
|
||||
badge.classList.add('fired');
|
||||
} else if (badge) {
|
||||
badge.remove();
|
||||
}
|
||||
}
|
||||
// Main sidebar button
|
||||
const sidebarBtn = document.getElementById('tool-notes-btn');
|
||||
if (sidebarBtn) {
|
||||
let dot = sidebarBtn.querySelector('.tool-notes-dot');
|
||||
if (fired > 0) {
|
||||
if (!dot) {
|
||||
dot = document.createElement('span');
|
||||
dot.className = 'tool-notes-dot';
|
||||
const newNoteBtn = sidebarBtn.querySelector('#notes-new-note-btn');
|
||||
sidebarBtn.insertBefore(dot, newNoteBtn || null);
|
||||
}
|
||||
} else if (dot) {
|
||||
dot.remove();
|
||||
}
|
||||
}
|
||||
// Individual note cards : pulse ones with fired reminders
|
||||
document.querySelectorAll('.note-card').forEach(card => {
|
||||
const id = card.dataset.noteId;
|
||||
const note = state.notes.find(n => n.id === id);
|
||||
if (!note || note.archived || _isNoteFullyDone(note)) {
|
||||
card.classList.remove('note-card-reminder-due');
|
||||
return;
|
||||
}
|
||||
if (note.due_date && _hasTimeComponent(note.due_date)) {
|
||||
const t = new Date(note.due_date).getTime();
|
||||
card.classList.toggle('note-card-reminder-due', !isNaN(t) && t <= Date.now());
|
||||
} else {
|
||||
card.classList.remove('note-card-reminder-due');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return { _clearViewedReminderGlows, _setReminderCardGlow, _queuePendingHighlight, _flushPendingHighlights, _updateRailBadge };
|
||||
}
|
||||
@@ -0,0 +1,335 @@
|
||||
/** Reminder date presets and recurrence picker interactions. */
|
||||
import { _formatRepeatLabel, _toLocalDatetimeStr, _normalizeRepeat, _DAYS, _ORDINALS } from '../domain/recurrence.js';
|
||||
export function createReminderPicker({
|
||||
lifecycle,
|
||||
_ensureNotificationPermission,
|
||||
_esc,
|
||||
_formatReminderTag,
|
||||
_laterTodayDate,
|
||||
_nextWeekDate,
|
||||
_snapToRepeat,
|
||||
_tomorrowDate,
|
||||
bindMenuDismiss,
|
||||
dismissOrRemove
|
||||
}) {
|
||||
function _wireReminderPicker(form) {
|
||||
// Reminder bell : opens dropdown menu
|
||||
const remindBtn = form.querySelector('.note-form-remind-btn');
|
||||
const dueInput = form.querySelector('.note-form-due');
|
||||
const repeatInput = form.querySelector('.note-form-repeat');
|
||||
const tagsEl = form.querySelector('.note-form-reminder-tags');
|
||||
|
||||
function _renderReminderTag() {
|
||||
if (!tagsEl) return;
|
||||
const v = dueInput.value;
|
||||
const rep = repeatInput.value || 'none';
|
||||
if (!v) { tagsEl.innerHTML = ''; return; }
|
||||
const label = _formatReminderTag(v);
|
||||
const repLabel = rep !== 'none' ? ` · ${_formatRepeatLabel(rep, new Date(v))}` : '';
|
||||
tagsEl.innerHTML = `<button class="note-reminder-tag" type="button" title="Edit reminder">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span>${_esc(label)}${_esc(repLabel)}</span>
|
||||
<span class="note-reminder-tag-x" title="Remove">×</span>
|
||||
</button>`;
|
||||
tagsEl.querySelector('.note-reminder-tag').addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('note-reminder-tag-x')) {
|
||||
dueInput.value = '';
|
||||
repeatInput.value = 'none';
|
||||
_renderReminderTag();
|
||||
return;
|
||||
}
|
||||
_openReminderMenu(remindBtn || tagsEl, true);
|
||||
});
|
||||
}
|
||||
|
||||
function _openReminderMenu(anchor, isEdit = false) {
|
||||
// Close any existing menu
|
||||
document.querySelectorAll('.note-reminder-menu').forEach(m => m.remove());
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'note-reminder-menu';
|
||||
document.body.appendChild(menu);
|
||||
|
||||
const presetItems = [
|
||||
{ label: 'Later today', sub: _laterTodayDate().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), action: () => _setReminder(_toLocalDatetimeStr(_laterTodayDate())) },
|
||||
{ label: 'Tomorrow', sub: _tomorrowDate().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), action: () => _setReminder(_toLocalDatetimeStr(_tomorrowDate())) },
|
||||
{ label: 'Next week', sub: _nextWeekDate().toLocaleDateString([], { weekday: 'short' }) + ' ' + _nextWeekDate().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }), action: () => _setReminder(_toLocalDatetimeStr(_nextWeekDate())) },
|
||||
{ label: 'Select date and time', sub: '', action: () => _pickCustomDate() },
|
||||
];
|
||||
|
||||
// Sub-page state for the repeat picker. null = top page.
|
||||
// 'weekly' | 'monthly' | 'monthly_nth'
|
||||
let subMode = null;
|
||||
// Temporary state for monthly_nth so user can click N then weekday (or vice versa)
|
||||
// before committing.
|
||||
let nthDraft = { n: 0, w: -1 };
|
||||
|
||||
const DAY_SHORT = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
||||
|
||||
function getNorm() {
|
||||
if (!dueInput.value) return 'none';
|
||||
return _normalizeRepeat(repeatInput.value || 'none', new Date(dueInput.value));
|
||||
}
|
||||
|
||||
function commit(val) {
|
||||
repeatInput.value = val;
|
||||
_renderReminderTag();
|
||||
menu.remove();
|
||||
}
|
||||
|
||||
// Like commit, but first snaps dueInput.value forward to the next matching
|
||||
// slot for the chosen recurrence. Use for weekly/monthly variants where the
|
||||
// current due date may not match the chosen pattern (e.g. user picks
|
||||
// "weekly on Mondays" while the date is a Wednesday).
|
||||
function snapAndCommit(val) {
|
||||
if (dueInput.value) {
|
||||
const cur = new Date(dueInput.value);
|
||||
const norm = _normalizeRepeat(val, cur);
|
||||
const snapped = _snapToRepeat(cur, norm);
|
||||
if (snapped) {
|
||||
dueInput.value = _toLocalDatetimeStr(snapped);
|
||||
if (remindBtn) remindBtn.classList.add('has-date');
|
||||
}
|
||||
}
|
||||
commit(val);
|
||||
}
|
||||
|
||||
function reposition() {
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const mw = menu.offsetWidth || 220;
|
||||
const mh = menu.offsetHeight || 280;
|
||||
let top = rect.bottom + 4;
|
||||
let left = rect.left;
|
||||
if (top + mh > vh - 8) top = Math.max(8, rect.top - mh - 4);
|
||||
if (left + mw > vw - 8) left = Math.max(8, vw - mw - 8);
|
||||
if (left < 8) left = 8;
|
||||
menu.style.top = top + 'px';
|
||||
menu.style.left = left + 'px';
|
||||
}
|
||||
|
||||
function render() {
|
||||
let html = '';
|
||||
|
||||
if (subMode === null) {
|
||||
html += '<div class="note-reminder-menu-title">Remind me later</div>';
|
||||
for (let i = 0; i < presetItems.length; i++) {
|
||||
const it = presetItems[i];
|
||||
html += `<button class="note-reminder-menu-item" data-action="preset" data-i="${i}"><span>${it.label}</span><span class="note-reminder-menu-sub">${it.sub}</span></button>`;
|
||||
}
|
||||
if (isEdit && dueInput.value) {
|
||||
const norm = getNorm();
|
||||
html += '<div class="note-reminder-menu-divider"></div>';
|
||||
html += '<div class="note-reminder-menu-title">Repeat</div>';
|
||||
// None
|
||||
html += `<button class="note-reminder-menu-item${norm === 'none' ? ' active' : ''}" data-action="set" data-val="none"><span>Doesn't repeat</span>${norm === 'none' ? '<span class="note-reminder-menu-check">✓</span>' : ''}</button>`;
|
||||
// Daily
|
||||
html += `<button class="note-reminder-menu-item${norm === 'daily' ? ' active' : ''}" data-action="set" data-val="daily"><span>Daily</span>${norm === 'daily' ? '<span class="note-reminder-menu-check">✓</span>' : ''}</button>`;
|
||||
// Weekly →
|
||||
{
|
||||
const isW = norm.startsWith('weekly:');
|
||||
const wd = isW ? parseInt(norm.split(':')[1], 10) : null;
|
||||
const sub = isW && !isNaN(wd) ? `<span class="note-reminder-menu-sub">${_DAYS[wd]}</span>` : '';
|
||||
html += `<button class="note-reminder-menu-item${isW ? ' active' : ''}" data-action="sub" data-sub="weekly"><span>Weekly</span>${sub}<span class="note-reminder-menu-arrow">›</span></button>`;
|
||||
}
|
||||
// Monthly →
|
||||
{
|
||||
const isM = norm.startsWith('monthly:');
|
||||
const sub = isM ? `<span class="note-reminder-menu-sub">${_monthlyShortDescriptor(norm)}</span>` : '';
|
||||
html += `<button class="note-reminder-menu-item${isM ? ' active' : ''}" data-action="sub" data-sub="monthly"><span>Monthly</span>${sub}<span class="note-reminder-menu-arrow">›</span></button>`;
|
||||
}
|
||||
// Yearly
|
||||
html += `<button class="note-reminder-menu-item${norm === 'yearly' ? ' active' : ''}" data-action="set" data-val="yearly"><span>Yearly</span>${norm === 'yearly' ? '<span class="note-reminder-menu-check">✓</span>' : ''}</button>`;
|
||||
}
|
||||
} else if (subMode === 'weekly') {
|
||||
const norm = getNorm();
|
||||
const curWd = norm.startsWith('weekly:') ? parseInt(norm.split(':')[1], 10) : -1;
|
||||
html += `<button class="note-reminder-menu-back" data-action="back"><span class="note-reminder-menu-arrow-back">‹</span> Repeat</button>`;
|
||||
html += '<div class="note-reminder-menu-title">Weekly on…</div>';
|
||||
html += '<div class="note-reminder-weekday-row">';
|
||||
for (let i = 0; i < 7; i++) {
|
||||
html += `<button class="note-reminder-day-chip${curWd === i ? ' active' : ''}" data-action="weekly-pick" data-wd="${i}" title="${_DAYS[i]}">${DAY_SHORT[i]}</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
} else if (subMode === 'monthly') {
|
||||
const norm = getNorm();
|
||||
const dueDate = new Date(dueInput.value);
|
||||
const dayN = dueDate.getDate();
|
||||
html += `<button class="note-reminder-menu-back" data-action="back"><span class="note-reminder-menu-arrow-back">‹</span> Repeat</button>`;
|
||||
html += '<div class="note-reminder-menu-title">Monthly on…</div>';
|
||||
// Day N : uses the chosen date's day. Always offered.
|
||||
const dayVal = `monthly:day:${dayN}`;
|
||||
html += `<button class="note-reminder-menu-item${norm === dayVal ? ' active' : ''}" data-action="set" data-val="${dayVal}"><span>Day ${dayN} every month</span>${norm === dayVal ? '<span class="note-reminder-menu-check">✓</span>' : ''}</button>`;
|
||||
// Nth weekday →
|
||||
{
|
||||
const isNth = norm.startsWith('monthly:nth:');
|
||||
const sub = isNth ? `<span class="note-reminder-menu-sub">${_monthlyShortDescriptor(norm)}</span>` : '';
|
||||
html += `<button class="note-reminder-menu-item${isNth ? ' active' : ''}" data-action="sub" data-sub="monthly_nth"><span>Nth weekday</span>${sub}<span class="note-reminder-menu-arrow">›</span></button>`;
|
||||
}
|
||||
} else if (subMode === 'monthly_nth') {
|
||||
// Pick ordinal (1..4) and weekday (0..6); commit when both chosen.
|
||||
html += `<button class="note-reminder-menu-back" data-action="back-monthly"><span class="note-reminder-menu-arrow-back">‹</span> Monthly</button>`;
|
||||
html += '<div class="note-reminder-menu-title">Nth weekday of month</div>';
|
||||
html += '<div class="note-reminder-menu-sublabel">Which one</div>';
|
||||
html += '<div class="note-reminder-weekday-row">';
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
html += `<button class="note-reminder-day-chip wide${nthDraft.n === i ? ' active' : ''}" data-action="nth-n" data-n="${i}">${_ORDINALS[i - 1]}</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="note-reminder-menu-sublabel">Weekday</div>';
|
||||
html += '<div class="note-reminder-weekday-row">';
|
||||
for (let i = 0; i < 7; i++) {
|
||||
html += `<button class="note-reminder-day-chip${nthDraft.w === i ? ' active' : ''}" data-action="nth-w" data-wd="${i}" title="${_DAYS[i]}">${DAY_SHORT[i]}</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="note-reminder-menu-divider"></div>';
|
||||
const ready = nthDraft.n > 0 && nthDraft.w >= 0;
|
||||
const lbl = ready ? `Save: ${_ORDINALS[nthDraft.n - 1]} ${_DAYS[nthDraft.w]}` : 'Pick week and weekday';
|
||||
html += `<button class="note-reminder-menu-item note-reminder-menu-confirm${ready ? '' : ' disabled'}" data-action="nth-save" ${ready ? '' : 'disabled'}><span>${lbl}</span></button>`;
|
||||
}
|
||||
|
||||
menu.innerHTML = html;
|
||||
reposition();
|
||||
wire();
|
||||
}
|
||||
|
||||
function wire() {
|
||||
menu.querySelectorAll('[data-action]').forEach(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const a = el.dataset.action;
|
||||
if (a === 'preset') {
|
||||
const it = presetItems[parseInt(el.dataset.i, 10)];
|
||||
it.action();
|
||||
menu.remove();
|
||||
} else if (a === 'set') {
|
||||
snapAndCommit(el.dataset.val);
|
||||
} else if (a === 'sub') {
|
||||
subMode = el.dataset.sub;
|
||||
// Seed nth draft from saved value only on first entry : preserve
|
||||
// in-progress picks across back-trips (Nth → back → Nth again).
|
||||
if (subMode === 'monthly_nth' && nthDraft.n === 0 && nthDraft.w === -1) {
|
||||
const norm = getNorm();
|
||||
const m = norm.match(/^monthly:nth:(\d):(\d)$/);
|
||||
if (m) nthDraft = { n: parseInt(m[1], 10), w: parseInt(m[2], 10) };
|
||||
}
|
||||
render();
|
||||
} else if (a === 'back') {
|
||||
subMode = null;
|
||||
render();
|
||||
} else if (a === 'back-monthly') {
|
||||
subMode = 'monthly';
|
||||
render();
|
||||
} else if (a === 'weekly-pick') {
|
||||
snapAndCommit(`weekly:${el.dataset.wd}`);
|
||||
} else if (a === 'nth-n') {
|
||||
nthDraft.n = parseInt(el.dataset.n, 10);
|
||||
render();
|
||||
} else if (a === 'nth-w') {
|
||||
nthDraft.w = parseInt(el.dataset.wd, 10);
|
||||
render();
|
||||
} else if (a === 'nth-save') {
|
||||
if (nthDraft.n > 0 && nthDraft.w >= 0) {
|
||||
snapAndCommit(`monthly:nth:${nthDraft.n}:${nthDraft.w}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render();
|
||||
// Click outside to close (single global handler attached after first paint)
|
||||
setTimeout(() => {
|
||||
const close = (e) => {
|
||||
if (!menu.isConnected) { document.removeEventListener('click', close); return; }
|
||||
if (!menu.contains(e.target)) { menu.remove(); document.removeEventListener('click', close); }
|
||||
};
|
||||
if (menu.isConnected) lifecycle.listen(menu, document, 'click', close);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function _monthlyShortDescriptor(norm) {
|
||||
const parts = norm.split(':');
|
||||
if (parts[1] === 'day') return `Day ${parts[2]}`;
|
||||
if (parts[1] === 'nth') {
|
||||
const n = parseInt(parts[2], 10);
|
||||
const wd = parseInt(parts[3], 10);
|
||||
return `${_ORDINALS[n - 1] || `${n}th`} ${_DAYS[wd].slice(0, 3)}`;
|
||||
}
|
||||
if (parts[1] === 'last') {
|
||||
const wd = parseInt(parts[2], 10);
|
||||
return `Last ${_DAYS[wd].slice(0, 3)}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function _setReminder(datetimeLocalStr) {
|
||||
dueInput.value = datetimeLocalStr;
|
||||
if (remindBtn) {
|
||||
remindBtn.classList.add('has-date');
|
||||
// Jingle the bell. CSS handles the animation; remove + reflow + re-add
|
||||
// so it replays every time the user sets/changes a reminder.
|
||||
const _bell = remindBtn.querySelector('svg');
|
||||
if (_bell) {
|
||||
_bell.classList.remove('jingling');
|
||||
void _bell.offsetWidth;
|
||||
_bell.classList.add('jingling');
|
||||
setTimeout(() => _bell.classList.remove('jingling'), 700);
|
||||
}
|
||||
}
|
||||
_renderReminderTag();
|
||||
_ensureNotificationPermission();
|
||||
}
|
||||
|
||||
function _pickCustomDate() {
|
||||
// Replace the dropdown menu with a small inline picker
|
||||
document.querySelectorAll('.note-reminder-menu').forEach(dismissOrRemove);
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'note-reminder-menu';
|
||||
const initial = dueInput.value || _toLocalDatetimeStr(_tomorrowDate());
|
||||
menu.innerHTML = `
|
||||
<div class="note-reminder-menu-title">Pick date and time</div>
|
||||
<div class="note-reminder-menu-picker">
|
||||
<input type="datetime-local" class="note-reminder-date-input" />
|
||||
</div>
|
||||
<div class="note-reminder-menu-divider"></div>
|
||||
<button class="note-reminder-menu-item note-reminder-menu-confirm">
|
||||
<span>Save</span>
|
||||
</button>
|
||||
`;
|
||||
document.body.appendChild(menu);
|
||||
// Position next to the bell button
|
||||
const anchor = remindBtn || form.querySelector('.note-form-reminder-tags');
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const mw = menu.offsetWidth || 240;
|
||||
const mh = menu.offsetHeight || 200;
|
||||
let top = rect.bottom + 4;
|
||||
let left = rect.left;
|
||||
if (top + mh > vh - 8) top = Math.max(8, rect.top - mh - 4);
|
||||
if (left + mw > vw - 8) left = Math.max(8, vw - mw - 8);
|
||||
if (left < 8) left = 8;
|
||||
menu.style.top = top + 'px';
|
||||
menu.style.left = left + 'px';
|
||||
const dInput = menu.querySelector('.note-reminder-date-input');
|
||||
dInput.value = initial;
|
||||
dInput.focus();
|
||||
if (typeof dInput.showPicker === 'function') {
|
||||
try { dInput.showPicker(); } catch {}
|
||||
}
|
||||
const close = bindMenuDismiss(menu, () => { menu.remove(); });
|
||||
menu.querySelector('.note-reminder-menu-confirm').addEventListener('click', () => {
|
||||
if (dInput.value) _setReminder(dInput.value);
|
||||
close();
|
||||
});
|
||||
}
|
||||
|
||||
if (remindBtn) remindBtn.addEventListener('click', (e) => { e.stopPropagation(); _openReminderMenu(remindBtn, !!dueInput.value); });
|
||||
_renderReminderTag();
|
||||
|
||||
|
||||
}
|
||||
|
||||
return { _wireReminderPicker };
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/** Selection controls and view feedback for accepted attachments. */
|
||||
export function createSelection({
|
||||
operations,
|
||||
_renderNotes,
|
||||
app,
|
||||
state
|
||||
}) {
|
||||
function _enterSelectMode(initialId = null) {
|
||||
app.setSelectMode(true);
|
||||
app.clearSelection();
|
||||
if (initialId) app.selectId(initialId);
|
||||
const bar = document.getElementById('notes-bulk-bar');
|
||||
const btn = document.getElementById('notes-select-btn');
|
||||
if (bar) bar.classList.remove('hidden');
|
||||
if (btn) { btn.classList.add('active'); btn.textContent = 'Cancel'; }
|
||||
_renderNotes();
|
||||
_updateBulkBar();
|
||||
}
|
||||
|
||||
function _exitSelectMode() {
|
||||
app.setSelectMode(false);
|
||||
app.clearSelection();
|
||||
const bar = document.getElementById('notes-bulk-bar');
|
||||
const btn = document.getElementById('notes-select-btn');
|
||||
const all = document.getElementById('notes-select-all');
|
||||
if (bar) bar.classList.add('hidden');
|
||||
if (btn) { btn.classList.remove('active'); btn.textContent = 'Select'; }
|
||||
if (all) all.checked = false;
|
||||
_renderNotes();
|
||||
}
|
||||
|
||||
function _updateBulkBar() {
|
||||
const count = state.selectedIds.size;
|
||||
const countEl = document.getElementById('notes-selected-count');
|
||||
const sendAgentBtn = document.getElementById('notes-send-agent');
|
||||
const archiveBtn = document.getElementById('notes-bulk-archive');
|
||||
const deleteBtn = document.getElementById('notes-bulk-delete');
|
||||
const allEl = document.getElementById('notes-select-all');
|
||||
if (countEl) countEl.textContent = `${count} Selected`;
|
||||
if (sendAgentBtn) sendAgentBtn.disabled = count === 0;
|
||||
if (archiveBtn) archiveBtn.disabled = count === 0;
|
||||
if (deleteBtn) deleteBtn.disabled = count === 0;
|
||||
if (allEl) allEl.checked = state.notes.length > 0 && state.notes.every(n => state.selectedIds.has(n.id));
|
||||
// Toggle select-mode class so todo dots don't react to hover
|
||||
const pane = document.getElementById('notes-pane');
|
||||
if (pane) pane.classList.toggle('notes-select-mode', count > 0);
|
||||
}
|
||||
|
||||
function wireSelectionActions() {
|
||||
document.getElementById('notes-select-all').addEventListener('change', e => {
|
||||
if (e.target.checked) state.notes.forEach(n => app.selectId(n.id));
|
||||
else app.clearSelection();
|
||||
_renderNotes(); _updateBulkBar();
|
||||
});
|
||||
document.getElementById('notes-send-agent').addEventListener('click', operations.attachSelected);
|
||||
document.getElementById('notes-bulk-archive').addEventListener('click', operations.archiveSelected);
|
||||
document.getElementById('notes-bulk-delete').addEventListener('click', operations.deleteSelected);
|
||||
document.getElementById('notes-bulk-cancel').addEventListener('click', _exitSelectMode);
|
||||
}
|
||||
return { wireSelectionActions, _enterSelectMode, _exitSelectMode, _updateBulkBar };
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/** Escaping, safe image sources and link rendering. */
|
||||
export function createText({
|
||||
uiModule
|
||||
}) {
|
||||
function _esc(s) { return uiModule.esc ? uiModule.esc(s || '') : (s || '').replace(/</g, '<').replace(/>/g, '>'); }
|
||||
|
||||
function _attrEsc(s) {
|
||||
return String(s || '')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/`/g, '`');
|
||||
}
|
||||
|
||||
function _safeImgSrc(s) {
|
||||
const v = (s || '').trim();
|
||||
if (!v) return '';
|
||||
if (v.startsWith('/') || v.startsWith('./') || v.startsWith('../')) return v;
|
||||
if (/^https?:\/\//i.test(v) || /^data:image\/(?:png|jpe?g|gif|webp);base64,/i.test(v)) return v;
|
||||
return '';
|
||||
}
|
||||
|
||||
function _linkify(s) {
|
||||
const escaped = _esc(s);
|
||||
const urlRe = /\b((?:https?:\/\/|www\.)[^\s<>"']+[^\s<>"'.,;:!?\]])/g;
|
||||
return escaped.replace(urlRe, (m) => {
|
||||
let url = m;
|
||||
// Trim a trailing ')' that doesn't have a matching '(' inside the URL
|
||||
if (url.endsWith(')') && (url.match(/\(/g) || []).length < (url.match(/\)/g) || []).length) {
|
||||
url = url.slice(0, -1);
|
||||
}
|
||||
const href = url.startsWith('www.') ? `https://${url}` : url;
|
||||
return `<a href="${_attrEsc(href)}" class="note-link" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">${url}</a>` + (url !== m ? m.slice(url.length) : '');
|
||||
});
|
||||
}
|
||||
|
||||
return { _esc, _attrEsc, _safeImgSrc, _linkify };
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/** Panel search, archive and list/grid controls. */
|
||||
export function createToolbar({
|
||||
app,
|
||||
state,
|
||||
persistence,
|
||||
_renderNotes,
|
||||
_fetchNotes,
|
||||
_applyMasonry
|
||||
}) {
|
||||
function wireToolbar(pane) {
|
||||
// Search
|
||||
const searchEl = document.getElementById('notes-search');
|
||||
if (searchEl) {
|
||||
searchEl.addEventListener('input', () => {
|
||||
app.setSearchQuery(searchEl.value.trim().toLowerCase());
|
||||
_renderNotes();
|
||||
});
|
||||
}
|
||||
|
||||
// View toggle
|
||||
const archiveBtn = document.getElementById('notes-archive-toggle');
|
||||
if (archiveBtn) {
|
||||
const ARCHIVE_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 002 2h12a2 2 0 002-2V8"/><path d="M10 12h4"/></svg><span class="notes-header-btn-label">Archive</span>';
|
||||
const CLOSE_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg><span class="notes-header-btn-label">Archive</span>';
|
||||
const syncArchiveBtn = () => {
|
||||
archiveBtn.classList.toggle('active', state.showingArchived);
|
||||
archiveBtn.title = state.showingArchived ? 'Exit archive' : 'View archive';
|
||||
archiveBtn.style.opacity = state.showingArchived ? '1' : '0.8';
|
||||
// Swap to an X while in archive view so it doubles as a close-back-
|
||||
// to-active-notes toggle.
|
||||
archiveBtn.innerHTML = state.showingArchived ? CLOSE_ICON : ARCHIVE_ICON;
|
||||
// Tint the whole pane so it's obvious you're not in the active list.
|
||||
pane.classList.toggle('notes-pane-archive', state.showingArchived);
|
||||
};
|
||||
syncArchiveBtn();
|
||||
archiveBtn.addEventListener('click', async () => {
|
||||
app.setShowingArchived(!state.showingArchived);
|
||||
app.clearSelection();
|
||||
syncArchiveBtn();
|
||||
// Brief fade so the body content swap doesn't snap : the bg-tint
|
||||
// change is already eased by CSS transitions on .notes-pane*.
|
||||
const _bodyEl = document.querySelector('#notes-pane .notes-pane-body');
|
||||
if (_bodyEl) {
|
||||
_bodyEl.style.transition = 'opacity 0.18s ease';
|
||||
_bodyEl.style.opacity = '0.25';
|
||||
}
|
||||
await _fetchNotes();
|
||||
_renderNotes();
|
||||
if (_bodyEl) {
|
||||
requestAnimationFrame(() => {
|
||||
_bodyEl.style.opacity = '';
|
||||
_bodyEl.addEventListener('transitionend', () => { _bodyEl.style.transition = ''; }, { once: true });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
const viewBtn = document.getElementById('notes-view-toggle');
|
||||
if (viewBtn) {
|
||||
pane.classList.toggle('notes-view-grid', state.viewMode === 'grid');
|
||||
// Label shows what you'll switch TO : "Grid" while in list, "List" while in grid.
|
||||
const _setViewLabel = () => {
|
||||
const lbl = viewBtn.querySelector('.notes-header-btn-label');
|
||||
if (lbl) lbl.textContent = state.viewMode === 'grid' ? 'List' : 'Grid';
|
||||
};
|
||||
_setViewLabel();
|
||||
requestAnimationFrame(() => _applyMasonry(document.querySelector('#notes-pane .notes-pane-body')));
|
||||
viewBtn.addEventListener('click', () => {
|
||||
app.setViewMode(state.viewMode === 'grid' ? 'list' : 'grid');
|
||||
try { persistence.setItem('odysseus-notes-view', state.viewMode); } catch {}
|
||||
pane.classList.toggle('notes-view-grid', state.viewMode === 'grid');
|
||||
_setViewLabel();
|
||||
requestAnimationFrame(() => _applyMasonry(document.querySelector('#notes-pane .notes-pane-body')));
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
return { wireToolbar };
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
/** Shared-window integration: safe fullscreen bounds, docking and stacking. */
|
||||
export function createWindowLayout({
|
||||
makeWindowDraggable,
|
||||
snapModalToZone,
|
||||
clearDockSide,
|
||||
applyEdgeDock,
|
||||
topToolWindowZ
|
||||
}) {
|
||||
function _notesFullscreenSafeRect() {
|
||||
const vw = window.innerWidth || document.documentElement.clientWidth || 0;
|
||||
const vh = window.innerHeight || document.documentElement.clientHeight || 0;
|
||||
let left = 0;
|
||||
let right = vw;
|
||||
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const rail = document.getElementById('icon-rail');
|
||||
const hamburgerRight = document.body.classList.contains('hamburger-right')
|
||||
|| sidebar?.classList.contains('right-side')
|
||||
|| rail?.classList.contains('right-side');
|
||||
|
||||
const reserve = (el) => {
|
||||
if (!el || getComputedStyle(el).display === 'none') return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width <= 0 || rect.height <= 0) return;
|
||||
if (hamburgerRight) right = Math.min(right, rect.left);
|
||||
else left = Math.max(left, rect.right);
|
||||
};
|
||||
|
||||
if (sidebar && !sidebar.classList.contains('hidden')) reserve(sidebar);
|
||||
reserve(rail);
|
||||
|
||||
// The fixed hamburger can remain visible even when the rail/sidebar is
|
||||
// collapsed. Reserve its strip too so fullscreen Notes does not sit beneath it.
|
||||
const hamburger = document.getElementById('hamburger-btn');
|
||||
if (hamburger && getComputedStyle(hamburger).display !== 'none') {
|
||||
const rect = hamburger.getBoundingClientRect();
|
||||
const pad = 8;
|
||||
if (hamburgerRight) right = Math.min(right, rect.left - pad);
|
||||
else left = Math.max(left, rect.right + pad);
|
||||
}
|
||||
|
||||
left = Math.max(0, Math.min(left, vw - 80));
|
||||
right = Math.max(left + 80, Math.min(right, vw));
|
||||
return { left, top: 0, width: right - left, height: vh };
|
||||
}
|
||||
|
||||
function _wireNotesWindow(pane) {
|
||||
if (!pane || pane.dataset.windowDragWired === '1') return;
|
||||
const header = pane.querySelector('.notes-pane-header');
|
||||
if (!header) return;
|
||||
pane.dataset.windowDragWired = '1';
|
||||
makeWindowDraggable(pane, {
|
||||
content: pane,
|
||||
header,
|
||||
fsClass: 'notes-window-fullscreen',
|
||||
skipSelector: 'button, input, select, textarea, label, .notes-mobile-grabber',
|
||||
enableDock: true,
|
||||
enableLeftDock: true,
|
||||
onEnterFullscreen: () => {
|
||||
pane.classList.add('notes-window-fullscreen');
|
||||
snapModalToZone(pane, {
|
||||
name: 'fullscreen',
|
||||
rect: _notesFullscreenSafeRect(),
|
||||
});
|
||||
},
|
||||
onExitFullscreen: () => {
|
||||
_restoreNotesSidebarDock(pane);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function _clearNotesSnapStyles(pane) {
|
||||
if (!pane) return;
|
||||
const hadLeft = pane.classList.contains('modal-left-docked');
|
||||
const hadRight = pane.classList.contains('modal-right-docked');
|
||||
pane.classList.remove('notes-window-fullscreen', 'modal-left-docked', 'modal-right-docked');
|
||||
if (hadLeft) clearDockSide('left', pane);
|
||||
if (hadRight) clearDockSide('right', pane);
|
||||
['position', 'left', 'top', 'right', 'bottom', 'width', 'max-width', 'height',
|
||||
'max-height', 'margin', 'transform', 'border-radius']
|
||||
.forEach((prop) => pane.style.removeProperty(prop));
|
||||
delete pane.dataset._tilePreSnap;
|
||||
delete pane.dataset._tileZone;
|
||||
delete pane._preDockSnapshot;
|
||||
delete pane._dockSide;
|
||||
delete pane._dockSuspended;
|
||||
}
|
||||
|
||||
function _restoreNotesSidebarDock(pane) {
|
||||
if (!pane || window.innerWidth <= 768) return;
|
||||
_clearNotesSnapStyles(pane);
|
||||
if (!pane.isConnected) return;
|
||||
applyEdgeDock(pane, 'right');
|
||||
}
|
||||
|
||||
function _topToolWindowZ(exclude = null) {
|
||||
return topToolWindowZ({ exclude });
|
||||
}
|
||||
|
||||
function _bringNotesToFront(pane = document.getElementById('notes-pane')) {
|
||||
if (!pane) return;
|
||||
const backdrop = document.getElementById('notes-pane-backdrop') || pane.parentElement;
|
||||
const z = _topToolWindowZ(backdrop) + 1;
|
||||
if (backdrop) backdrop.style.setProperty('z-index', String(z), 'important');
|
||||
try {
|
||||
window.dispatchEvent(new CustomEvent('odysseus:modal-opened', {
|
||||
detail: { id: 'notes-panel', modal: pane },
|
||||
}));
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
|
||||
return { _wireNotesWindow, _restoreNotesSidebarDock, _bringNotesToFront };
|
||||
}
|
||||
Reference in New Issue
Block a user