markdown-converter/src/sidebar/snippets-panel.js

function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippet, onInsert }) {
    container.innerHTML = `
        <div class="snippets-panel">
            <div class="snippets-toolbar">
                <input type="text" class="snippets-search" id="snippets-search" placeholder="Search snippets...">
                <button class="snippets-add-btn" id="snippets-add" title="Add snippet">+</button>
            </div>
            <div class="snippets-list" id="snippets-list"></div>
        </div>
    `;

    let snippets = [];

    async function loadSnippets() {
        snippets = await getSnippets() || [];
        renderList(document.getElementById('snippets-search')?.value || '');
    }

    function renderList(query) {
        const list = document.getElementById('snippets-list');
        if (!list) return;

        const filtered = query
            ? snippets.filter(s => s.name.toLowerCase().includes(query.toLowerCase()) || (s.language || '').toLowerCase().includes(query.toLowerCase()))
            : snippets;

        list.innerHTML = filtered.length ? filtered.map(s => `
            <div class="snippet-item" data-id="${s.id}">
                <div class="snippet-header">
                    <span class="snippet-name">${s.name}</span>
                    <span class="snippet-lang">${s.language || 'text'}</span>
                </div>
                <pre class="snippet-preview"><code>${(s.code || '').substring(0, 100)}${(s.code || '').length > 100 ? '...' : ''}</code></pre>
                <div class="snippet-actions">
                    <button class="snippet-insert" data-id="${s.id}" title="Insert">Insert</button>
                    <button class="snippet-delete" data-id="${s.id}" title="Delete">&times;</button>
                </div>
            </div>
        `).join('') : '<p class="git-info">No snippets yet. Click + to add one.</p>';

        list.querySelectorAll('.snippet-insert').forEach(btn => {
            btn.addEventListener('click', () => {
                const s = snippets.find(sn => sn.id === btn.dataset.id);
                if (s) onInsert(s.code);
            });
        });

        list.querySelectorAll('.snippet-delete').forEach(btn => {
            btn.addEventListener('click', async () => {
                await deleteSnippet(btn.dataset.id);
                loadSnippets();
            });
        });
    }

    document.getElementById('snippets-search')?.addEventListener('input', (e) => renderList(e.target.value));

    document.getElementById('snippets-add')?.addEventListener('click', () => {
        const name = prompt('Snippet name:');
        if (!name) return;
        const language = prompt('Language (e.g., javascript, python, html):') || 'text';
        const code = prompt('Paste your code snippet:');
        if (!code) return;

        saveSnippet({ id: Date.now().toString(), name, language, code }).then(() => loadSnippets());
    });

    loadSnippets();
}

module.exports = { renderSnippetsPanel };