← Notes results

Notes

lfm2 24b a2b · basic

Initial view of Notes

Reviews & generation details

Reviews

No human review yet. Unreviewed does not mean unsuccessful.

Generation context

Imported historical artifact. Its exact original instructions and lineage are not known.

Generation prompt · exact text unavailable

See the current prompt for reference. It may differ from the instructions used to generate this artifact.

Inspect original source 26,025 bytes · SHA-256 6429fc5fb51d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notes App</title>
<style>
:root {
    --bg-dark: #1e1e1e;
    --bg-light: #f5f5f5;
    --text-dark: #111;
    --text-light: #222;
    --accent: #4a90e2;
    --border: #e0e0e0;
    --card-bg: #fff;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --font-sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-serif: Georgia, serif;
    --radius: 6px;
    --spacing: 1rem;
    --transition: all 0.2s ease;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg-dark);
    color: var(--text-light);
    display: flex;
    height: 100vh;
    overflow: hidden;
}
/* Layout */
#app {
    display: flex;
    width: 100%;
    height: 100vh;
}
/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--bg-dark);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    transition: width var(--transition);
    position: relative;
}
.sidebar.collapsed {
    width: 60px;
}
.sidebar-header {
    padding: var(--spacing);
    background: #2d2d2d;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.sidebar-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 100%;
    overflow-y: auto;
}
.sidebar-note {
    padding: .5rem .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}
.sidebar-note:hover, .sidebar-note.selected {
    background: #2a2a2a;
    color: #fff;
}
.sidebar-note.collapsible {
    padding-left: 1.3rem;
    font-size: 0.85rem;
}
.sidebar-note.collapsible::after {
    content: '+';
    display: inline-block;
    width: 1.2em;
    text-align: center;
    transition: transform var(--transition);
}
.sidebar-note.collapsible.expanded::after {
    content: '-';
}
.sidebar-note.full {
    padding-left: 2rem;
}
.trash-note {
    background: #e0e0e0;
    color: #b00;
}
.trash-note:hover {
    background: #d0d0d0;
}
.trash-icon {
    width: 1.2em;
    margin-right: .5rem;
    cursor: pointer;
}
/* Main */
.main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing);
    padding: var(--spacing);
    overflow: hidden;
}
.editor-wrapper {
    background: var(--bg-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.editor-toolbar {
    display: flex;
    gap: .5rem;
    padding: .5rem .75rem;
    background: #f0f0f0;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) 0 0 0;
}
.editor-toolbar button {
    background: none;
    border: none;
    font-size: .9rem;
    cursor: pointer;
    color: #555;
    transition: color var(--transition);
}
.editor-toolbar button.active { color: var(--accent); }
.editor-toolbar input[type="text"] {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .4rem .6rem;
    outline: none;
}
.editor {
    min-height: 400px;
    padding: .5rem .75rem;
    margin: 0;
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* Controls */
.controls {
    display: flex;
    gap: .5rem;
    padding: .5rem .75rem;
    background: #fafafa;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
}
.controls button {
    background: none;
    border: none;
    font-size: .9rem;
    cursor: pointer;
    color: #555;
    transition: color var(--transition);
}
.controls button:hover { color: var(--accent); }
/* Search */
.search-bar {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-size: .95rem;
    margin-bottom: .5rem;
    outline: none;
}
.search-bar input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 1rem;
    padding: .3rem .5rem;
}
/* Empty states */
.empty-state {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #888;
    font-style: italic;
    padding: .5rem .75rem;
}
.empty-state span {
    font-weight: 500;
}
/* Themes */
.dark-mode { background: var(--bg-dark); color: #eee; }
.light-mode { background: var(--bg-light); color: #111; }
/* Responsive */
@media (max-width: 900px) {
    .main { grid-template-columns: 1fr auto; }
    .sidebar { width: 60px; }
    .main { grid-template-columns: 1fr; }
    .sidebar.collapsed { display: none; }
}
</style>
</head>
<body>
<div id="app">
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header" id="sidebar-header">
            <span class="sidebar-title">Notebooks</span>
            <button id="toggle-sidebar" aria-label="Toggle sidebar">&#9776;</button>
        </div>
        <ul id="notebook-list" class="sidebar-list"></ul>
        <div id="trash-section" style="display:none;">
            <div class="trash-note" id="trash-note">
                <span class="trash-icon" onclick="toggleTrash()">&#10004;</span>
                <span>Trash</span>
            </div>
            <ul id="trash-list"></ul>
        </div>
    </div>
    <div class="main">
        <div class="controls">
            <button onclick="toggleSearch()"><span class="editor-toolbar">🔍</span></button>
            <input id="search-input" class="search-bar" type="text" placeholder="Search notes...">
            <button onclick="toggleTheme()"><span class="editor-toolbar">🌓</span></button>
        </div>
        <div class="editor-wrapper">
            <div id="toolbar">
                <button onclick="toggleBold()"><span class="editor-toolbar">&textbf;</span></button>
                <button onclick="toggleItalic()"><span class="editor-toolbar">*</span></button>
                <button onclick="toggleUnderline()"><span class="editor-toolbar">__</span></button>
                <button onclick="toggleStrike()"><span class="editor-toolbar">~~</span></button>
                <button onclick="toggleCode()"><span class="editor-toolbar">`</span></button>
                <button onclick="toggleListBullet()"><span class="editor-toolbar">•</span></button>
                <button onclick="toggleListNumber()"><span class="editor-toolbar">1.</span></button>
                <button onclick="toggleCheckbox()"><span class="editor-toolbar">✓</span></button>
                <button onclick="toggleQuote()"><span class="editor-toolbar">> </span></button>
                <button onclick="toggleBlockquote()"><span class="editor-toolbar">“ ”</span></button>
                <button onclick="toggleListContinuation()">⌥+Enter</button>
                <button onclick="undo()"><span class="editor-toolbar">⌫</span></button>
                <button onclick="redo()"><span class="editor-toolbar">⇧⌘+Y</span></button>
            </div>
            <div id="note-list" class="note-list"></div>
            <div id="editor" contenteditable="true" placeholder="Start writing..."></div>
        </div>
    </div>
    <script>
/* ==== CONFIG ====
 * Auto-save debounce ms
 * Snippet length (chars) for preview
 * Theme: light/dark
 * Layout state (collapsed, open sidebar)
 * */
const CONFIG = {
    AUTO_SAVE: 1500,
    SNAPSHOT_DELAY: 500,
    MIN_SNIPPET_LEN: 3,
    THEME: 'light',
    LAYOUT: {sidebarCollapsed: false, theme: 'light'},
    SELECTION: null,
    EDITOR: null,
    NOTES: [],
    CURRENT_NOTE: null,
    TRASH: [],
    SEARCH_TERM: '',
    SEARCH_RESULTS: [],
    FORMATTING_STATE: {bold: false, italic: false, underline: false, strikethrough: false, code: false, h1: false, h2: false, h3: false, listBullet: false, listNumber: false, checklist: false, blockquote: false},
    SEARCH_FILTERED: [],
    THEME_ICON: '',
    FONT_SERIF: 'Georgia, serif'
};
let lastSaved = Date.now();
let autoSaveTimer = null;
let searchTimer = null;

/* ==== DATA MODEL ==== */
function findNoteIndex(notes, id) {
    return notes.findIndex(n => n.id === id);
}
function getNote(notes, id) {
    return notes.find(n => n.id === id);
}
function saveNotes() {
    localStorage.setItem('notesApp', JSON.stringify(CONFIG.NOTES || CONFIG.NOTES || []));
    localStorage.setItem('notesApp:selected', CONFIG.SELECTED_NOTE_ID);
    localStorage.setItem('notesApp:theme', CONFIG.THEME);
    localStorage.setItem('notesApp:layout', JSON.stringify(CONFIG.LAYOUT));
    localStorage.setItem('notesApp:search', CONFIG.SEARCH_TERM);
    localStorage.setItem('notesApp:searchResults', JSON.stringify(CONFIG.SEARCH_RESULTS));
    localStorage.setItem('notesApp:trash', CONFIG.TRASH);
    localStorage.setItem('notesApp:sortOrder', JSON.stringify(CONFIG.SORT_ORDER || 'created'));
    lastSaved = Date.now();
}
function loadNotes() {
    const nb = localStorage.getItem('notesApp');
    if (nb) CONFIG.NOTES = JSON.parse(nb);
    const ts = localStorage.getItem('notesApp:theme');
    if (ts) CONFIG.THEME = ts;
    const layout = localStorage.getItem('notesApp:layout');
    if (layout) CONFIG.LAYOUT = JSON.parse(layout);
    const search = localStorage.getItem('notesApp:search');
    if (search) CONFIG.SEARCH_TERM = search;
    const results = localStorage.getItem('notesApp:searchResults');
    if (results) CONFIG.SEARCH_RESULTS = JSON.parse(results);
    const trash = localStorage.getItem('notesApp:trash');
    if (trash) CONFIG.TRASH = JSON.parse(trash);
    const sort = localStorage.getItem('notesApp:sortOrder');
    if (sort) CONFIG.SORT_ORDER = sort;
    render();
}
function setSelectedNote(id) {
    CONFIG.SELECTED_NOTE_ID = id;
    updateEditor();
}
function setCurrentNote(note) {
    CONFIG.CURRENT_NOTE = note;
    updateEditor();
}
function setSearch(term) {
    CONFIG.SEARCH_TERM = term;
    CONFIG.SEARCH_RESULTS = [];
    if (!term) return;
    const all = CONFIG.NOTES.concat(CONFIG.TRASH);
    for (const n of all) {
        if (n.title.toLowerCase().includes(term.toLowerCase()) ||
            n.body.toLowerCase().includes(term.toLowerCase())) {
            CONFIG.SEARCH_RESULTS.push(n);
        }
    }
    updateSearchResults();
}
function updateSearchResults() {
    const term = CONFIG.SEARCH_TERM;
    if (!term) { CONFIG.SEARCH_RESULTS = []; return; }
    const all = CONFIG.NOTES.concat(CONFIG.TRASH);
    CONFIG.SEARCH_RESULTS = [];
    for (const n of all) {
        if (n.title.toLowerCase().includes(term.toLowerCase()) ||
            n.body.toLowerCase().includes(term.toLowerCase())) {
            CONFIG.SEARCH_RESULTS.push(n);
        }
    }
    updateSearchResultsUI();
}
function updateSearchResultsUI() {
    const list = document.getElementById('note-list');
    list.innerHTML = '';
    if (CONFIG.SEARCH_RESULTS.length === 0) {
        const item = document.createElement('li');
        item.textContent = 'No results';
        item.style.padding = '.3rem .5rem';
        item.style.color = '#888';
        list.appendChild(item);
        return;
    }
    CONFIG.SEARCH_RESULTS.forEach(n => {
        const li = document.createElement('li');
        li.textContent = n.title;
        li.style.padding = '.2rem .5rem';
        li.style.cursor = 'pointer';
        li.onclick = () => setSelectedNote(n.id);
        list.appendChild(li);
    });
}
function render() {
    // Sidebar
    const sidebar = document.getElementById('sidebar');
    const nbList = document.getElementById('notebook-list');
    const trashSection = document.getElementById('trash-section');
    const trashList = document.getElementById('trash-list');
    // Notebooks
    if (CONFIG.NOTES.length === 0) {
        nbList.innerHTML = `<li class="sidebar-title">No notebooks</li>`;
        return;
    }
    const nbMap = {};
    CONFIG.NOTES.forEach(n => {
        nbMap[n.id] = n;
        const li = document.createElement('li');
        li.className = 'sidebar-note' + (n.folded ? ' collapsible' : '');
        if (n.id === CONFIG.SELECTED_NOTE_ID) {
            li.classList.add('selected');
        }
        if (n.trash && !CONFIG.TRASH.includes(n.id)) {
            li.classList.add('trash-note');
        }
        // Folded
        if (n.folded) {
            li.innerHTML = `<span class="sidebar-note-full">${n.title}</span>`;
            li.onclick = () => toggleCollapse(n.id);
        } else {
            li.innerHTML = `<span>${n.title}</span>`;
            li.onclick = () => setSelectedNote(n.id);
            // Checklist
            if (n.checklist && n.checklist && n.checked) {
                li.innerHTML = `<input type="checkbox" class="checkbox" checked><span>${n.title}</span>`;
            }
            // Checkbox toggle
            if (n.checklist && !n.checked) {
                li.onclick = e => { e.stopPropagation(); toggleCheckbox(n.id); };
            }
        }
        nbList.appendChild(li);
        // Trash
        if (n.trash && !CONFIG.TRASH.includes(n.id)) {
            trashList.innerHTML += `<li class="trash-note" id="trash-${n.id}"><span class="trash-icon" onclick="toggleTrash(${n.id})">&#10004;</span><span>${n.title}</span></li>`;
        }
    });
    // Collapse if needed
    if (CONFIG.LAYOUT.sidebarCollapsed) {
        sidebar.classList.add('collapsed');
        const nb = sidebar.querySelector('.sidebar-title');
        nb.style.flex = '0 0 auto';
        nb.style.overflow = 'hidden';
        // Hide all notes
        document.querySelectorAll('.sidebar-note').forEach(el => el.style.display = 'none');
    } else {
        sidebar.classList.remove('collapsed');
        document.querySelectorAll('.sidebar-note').forEach(el => el.style.display = '');
    }
    // Editor
    const editor = document.getElementById('editor');
    editor.innerHTML = CONFIG.CURRENT_NOTE ? CONFIG.CURRENT_NOTE.body : '<p>Start writing...</p>';
    // Toolbar
    document.querySelectorAll('.editor-toolbar button').forEach(btn => {
        btn.onclick = () => {
            if (btn.textContent.includes('B')) toggleBold();
            else if (btn.textContent.includes('I')) toggleItalic();
            else if (btn.textContent.includes('U')) toggleUnderline();
            else if (btn.textContent.includes('S')) toggleStrike();
            else if (btn.textContent.includes('`')) toggleCode();
            else if (btn.textContent.includes('•')) toggleListBullet();
            else if (btn.textContent.includes('1.')) toggleListNumber();
            else if (btn.textContent.includes('✓')) toggleCheckbox();
            else if (btn.textContent.includes('“')) toggleQuote();
            else if (btn.textContent.includes('“ ‘')) toggleBlockquote();
            else if (btn.textContent.includes('⌥+Enter')) toggleListContinuation();
            else if (btn.textContent.includes('⌫')) undo();
            else if (btn.textContent.includes('⇧⌘+Y')) redo();
        };
    });
    // Controls
    document.getElementById('toggleSidebar').onclick = () => {
        CONFIG.LAYOUT.sidebarCollapsed = !CONFIG.LAYOUT.sidebarCollapsed;
        render();
    };
    document.getElementById('toggleTheme').onclick = toggleTheme();
    document.getElementById('toggleSearch').onclick = () => { document.querySelector('.search-bar').focus(); };
    // Editor
    editor.contentEditable = true;
    editor.focus();
    editor.oninput = debounce(() => {
        saveNotes();
        updateEditor();
    }, CONFIG.AUTO_SAVE);
    editor.onkeydown = e => handleKey(e, editor);
    editor.onfocusout = () => setSelectedNote(CONFIG.CURRENT_NOTE?.id || null);
    // Sort order
    document.querySelector('.sort-order-btn').onclick = () => {
        const order = CONFIG.SORT_ORDER === 'created' ? 'modified' : 'created';
        CONFIG.SORT_ORDER = order;
        sortNotes(CONFIG.NOTES, order);
        saveNotes();
        updateEditor();
    };
    // Move notes
    editor.ondragover = e => e.preventDefault();
    editor.ondrop = e => {
        e.preventDefault();
        if (!CONFIG.CURRENT_NOTE) return;
        const id = CONFIG.CURRENT_NOTE.id;
        const data = {id, target: e.target.closest('.sidebar-note')?.id };
        if (data.target) {
            moveNote(id, data.target);
            saveNotes();
        }
    };
    // Trash
    function toggleTrash(id) {
        const note = CONFIG.NOTES.find(n => n.id === id);
        if (!note) return;
        note.trash = !note.trash;
        if (note.trash) {
            CONFIG.TRASH.push(note.id);
            CONFIG.NOTES = CONFIG.NOTES.filter(n => !note.trash);
        } else {
            CONFIG.NOTES.push(note);
            CONFIG.TRASH = CONFIG.TRASH.filter(tid => tid !== note.id);
        }
        saveNotes();
        updateTrashList();
    }
    function updateTrashList() {
        const list = document.getElementById('trash-list');
        list.innerHTML = '';
        CONFIG.TRASH.forEach(id => {
            const n = CONFIG.NOTES.find(n => n.id === id);
            if (!n) return;
            const li = document.createElement('li');
            li.className = 'trash-note';
            li.id = `trash-${id}`;
            li.innerHTML = `<span class="trash-icon" onclick="toggleTrash(${id})">&#10004;</span><span>${n.title}</span>`;
            list.appendChild(li);
        });
    }
    // Search
    function updateSearchResultsUI() {
        const list = document.getElementById('note-list');
        list.innerHTML = '';
        CONFIG.SEARCH_RESULTS.forEach(n => {
            const li = document.createElement('li');
            li.textContent = n.title;
            li.style.padding = '.2rem .5rem';
            li.style.cursor = 'pointer';
            li.onclick = () => setSelectedNote(n.id);
            list.appendChild(li);
        });
    }
    // Helpers
    function toggleBold() {
        CONFIG.FORMATTING_STATE.bold = !CONFIG.FORMATTING_STATE.bold;
        updateToolbar();
        applyFormatting('bold');
    }
    function toggleItalic() {
        CONFIG.FORMATTING_STATE.italic = !CONFIG.FORMATTING_STATE.italic;
        updateToolbar();
        applyFormatting('italic');
    }
    function toggleUnderline() {
        CONFIG.FORMATTING_STATE.underline = !CONFIG.FORMATTING_STATE.underline;
        updateToolbar();
        applyFormatting('underline');
    }
    function toggleStrikethrough() {
        CONFIG.FORMATTING_STATE.strikethrough = !CONFIG.FORMATTING_STATE.strikethrough;
        updateToolbar();
        applyFormatting('strike');
    }
    function toggleCode() {
        CONFIG.FORMATTING_STATE.code = !CONFIG.FORMATTING_STATE.code;
        updateToolbar();
        applyFormatting('code');
    }
    function toggleListBullet() {
        CONFIG.FORMATTING_STATE.listBullet = !CONFIG.FORMATTING_STATE.listBullet;
        updateToolbar();
        applyFormatting('bullet');
    }
    function toggleListNumber() {
        CONFIG.FORMATTING_STATE.listNumber = !CONFIG.FORMATTING_STATE.listNumber;
        updateToolbar();
        applyFormatting('number');
    }
    function toggleCheckbox() {
        const el = editor.querySelector('.checkbox');
        if (el) el.checked = !el.checked;
        else {
            const sel = CONFIG.CURRENT_NOTE;
            if (!sel) return;
            let check = false;
            if (sel.checklist) {
                check = !sel.checklist;
                sel.checklist = check;
            } else {
                check = !!el.checked;
                sel.checklist = check;
            }
        }
        saveNotes();
        updateEditor();
    }
    function toggleQuote() {
        CONFIG.FORMATTING_STATE.blockquote = !CONFIG.FORMATTING_STATE.blockquote;
        updateToolbar();
        applyFormatting('blockquote');
    }
    function toggleBlockquote() {
        CONFIG.FORMATTING_STATE.blockquote = !CONFIG.FORMATTING_STATE.blockquote;
        updateToolbar();
        applyFormatting('blockquote');
    }
    function toggleListContinuation(e) {
        e.preventDefault();
        if (!CONFIG.CURRENT_NOTE) return;
        const sel = document.querySelector('.note-list .selected');
        if (sel) {
            const next = document.querySelector('.note-list li:not(.selected)');
            if (next) {
                CONFIG.NOTES.push({...CONFIG.CURRENT_NOTE, id: null, parentId: CONFIG.NOTES.findIndex(n => n.id === CONFIG.CURRENT_NOTE.id) + 1});
                setSelectedNote(CONFIG.NOTES[CONFIG.NOTES.length - 1].id);
            }
        }
    }
    function undo() {
        document.execCommand('undo');
        saveNotes();
        updateEditor();
    }
    function redo() {
        document.execCommand('redo');
        saveNotes();
        updateEditor();
    }
    function handleKey(e, el) {
        // Formatting shortcuts
        if (e.key === 'b') { e.preventDefault(); toggleBold(); }
        else if (e.key === 'i') { e.preventDefault(); toggleItalic(); }
        else if (e.key === 'u') { e.preventDefault(); toggleUnderline(); }
        else if (e.key === 's') { e.preventDefault(); toggleStrikethrough(); }
        else if (e.key === '`') { e.preventDefault(); toggleCode(); }
        else if (e.key === 'Enter' && !e.shiftKey) {
            // List item
            const sel = document.querySelector('.note-list li.selected');
            if (sel) {
                const next = document.querySelector('.note-list li:not(.selected)');
                if (next) {
                    e.preventDefault();
                    setSelectedNote(CONFIG.NOTES.findIndex(n => n.id === CONFIG.CURRENT_NOTE.id) + 1);
                } else {
                    // New item
                    const id = CONFIG.CURRENT_NOTE ? CONFIG.CURRENT_NOTE.id : null;
                    if (!id) {
                        const newNote = { ...CONFIG.CURRENT_NOTE, id: Date.now(), title: '', body: '' };
                        CONFIG.NOTES.push(newNote);
                        setSelectedNote(newNote.id);
                    }
                }
            } else if (e.target && e.target.tagName === 'SPAN') {
                // Inline formatting
                const sel = document.querySelector('.note-list li.selected');
                if (sel) {
                    const text = el.textContent;
                    let formatted = '';
                    if (text.startsWith('#')) {
                        formatted = `<h1>${text.slice(1)}</h1>`;
                    } else if (text.startsWith('-')) {
                        formatted = `<ul><li>${text.slice(1).trim()}</li></ul>`;
                    } else if (text.startsWith('[') && text.endsWith(']')) {
                        formatted = `<span class="checklist">${text.slice(1, -1)}</span>`;
                    } else if (text.startsWith('>')) {
                        formatted = `<blockquote><p>${text.slice(1).trim()}</p></blockquote>`;
                    } else if (text.includes('`')) {
                        formatted = `<code>${text}</code>`;
                    } else {
                        formatted = text;
                    }
                    el.textContent = formatted;
                }
            }
        }
        // Selection
        if (e.key === 'ArrowDown') { selectNote(el); e.preventDefault(); }
        else if (e.key === 'ArrowUp') { selectNote(el); e.preventDefault(); }
        else if (e.key === 'ArrowLeft') { document.execCommand('cut'); }
        else if (e.key === 'ArrowRight') { document.execCommand('copy'); }
        else if (e.key === 'Escape') { clearSelection(); }
    }
    function selectNote(el) {
        const note = CONFIG.NOTES.find(n => n.id === CONFIG.SELECTED_NOTE_ID);
        if (!note) return;
        setSelectedNote(note.id);
        // Scroll
        const rect = el.getBoundingClientRect();
        const editor = document.getElementById('editor');
        editor.scrollIntoView(rect);
    }
    function clearSelection() {
        document.querySelector('.note-list li.selected')?.classList.remove('selected');
    }
    function moveNote(id, targetId) {
        const from = CONFIG.NOTES.find(n => n.id === id);
        const to = CONFIG.NOTES.find(n => n.id === targetId);
        if (!from || !to) return;
        // Remove
        CONFIG.NOTES = CONFIG.NOTES.filter(n => n.id !== id);
        // Insert
        if (to.parentId) {
            to.parentId.children.push(from);
        } else {
            to.parentId = from;
        }
    }
    function saveNotes() {
        localStorage.setItem('notesApp', JSON.stringify(CONFIG.NOTES));
        localStorage.setItem('notesApp:selected', CONFIG.SELECTED_NOTE_ID);
        localStorage.setItem('notesApp:theme', CONFIG.THEME);
        localStorage.setItem('notesApp:layout', JSON.stringify(CONFIG.LAYOUT));
        localStorage.setItem('notesApp:search', CONFIG.SEARCH_TERM);
        localStorage.setItem('notesApp:searchResults', JSON.stringify(CONFIG.SEARCH_RESULTS));
        localStorage.setItem('notesApp:trash', CONFIG.TRASH);
        localStorage.setItem('notesApp:sortOrder', JSON.stringify(CONFIG.SORT_ORDER));
    }
    function renderSidebar() {
        const sidebar = document.getElementById('sidebar');
        const nbList = document.getElementById('notebook-list');
        const trashSection = document.getElementById('trash-section');
        const trashList = document.getElementById('trash-list');
        // Notebooks
        if (
<!-- agent-meta {"model":"liquid/lfm2-24b-a2b","provider":"lmstudio","persona":"basic","sessionId":"996b8c73-8251-4ed6-86b1-4ad41e23e8c4","tokensIn":1291,"tokensOut":7221,"tokensTotal":8512,"cost":0,"turns":1,"toolCalls":0,"failedToolCalls":0,"timestamp":"2026-08-01T04:50:04.283Z"} -->