+
@@ -499,16 +519,63 @@
let autoSaveTimer = null, syncTimer = null, flashTimer = null;
const $ = id => document.getElementById(id);
- const notepad = $('notepad');
- const mdView = $('md-view');
- const canvasWrap = $('canvas-wrap');
- const canvas = $('drawing-canvas');
- const drawCtrls = $('draw-controls');
- const sidebar = $('sidebar');
- const notesList = $('notes-list');
- const saveFlash = $('save-flash');
- const wordCount = $('word-count');
- const syncStatus = $('sync-status');
+ const notepad = $('notepad');
+ const mdView = $('md-view');
+ const canvasWrap = $('canvas-wrap');
+ const canvas = $('drawing-canvas');
+ const drawCtrls = $('draw-controls');
+ const sidebar = $('sidebar');
+ const notesList = $('notes-list');
+ const saveFlash = $('save-flash');
+ const wordCount = $('word-count');
+ const syncStatus = $('sync-status');
+ const titleDisplay = $('note-title-display');
+ const titleInput = $('note-title-input');
+
+ // ── Title display & rename ────────────────────────────────────────────────
+ function setTitleDisplay(title) {
+ titleDisplay.textContent = title || 'Untitled';
+ }
+
+ titleDisplay.addEventListener('click', () => {
+ titleDisplay.style.display = 'none';
+ titleInput.style.display = '';
+ titleInput.value = notes[currentId]?.title || '';
+ titleInput.focus();
+ titleInput.select();
+ });
+
+ titleInput.addEventListener('blur', commitTitleInput);
+ titleInput.addEventListener('keydown', e => {
+ if (e.key === 'Enter') titleInput.blur();
+ if (e.key === 'Escape') { renderTitle(); titleInput.style.display = 'none'; titleDisplay.style.display = ''; }
+ });
+
+ function commitTitleInput() {
+ if (!notes[currentId]) return;
+ notes[currentId].title = titleInput.value.trim();
+ notes[currentId].updatedAt = Date.now();
+ persist();
+ renderTitle();
+ renderList();
+ titleInput.style.display = 'none';
+ titleDisplay.style.display = '';
+ scheduleSync();
+ }
+
+ function renderTitle() {
+ setTitleDisplay(notes[currentId]?.title || '');
+ }
+
+ function autoTitleFromContent() {
+ const n = notes[currentId];
+ if (!n) return;
+ const firstLine = notepad.value.split('\n')[0].trim();
+ n.title = firstLine;
+ n.updatedAt = Date.now();
+ renderTitle();
+ renderList();
+ }
// ── Persist ──────────────────────────────────────────────────────────────
function persist() { localStorage.setItem('noted_notes', JSON.stringify(notes)); }
@@ -622,6 +689,7 @@
$('text-color').value = n.textColor || '#000000';
updateWordCount();
renderMd();
+ renderTitle();
undoStack = []; redoStack = [];
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -664,7 +732,7 @@
clearTimeout(autoSaveTimer);
autoSaveTimer = setTimeout(() => saveNote(), 3000);
}
- notepad.addEventListener('input', () => { updateWordCount(); renderMd(); scheduleAutoSave(); });
+ notepad.addEventListener('input', () => { updateWordCount(); renderMd(); autoTitleFromContent(); scheduleAutoSave(); });
// ── Markdown ──────────────────────────────────────────────────────────────
function renderMd() { if (isMd) mdView.innerHTML = marked.parse(notepad.value || ''); }