spotnotes.app/static/assets/js/sidebar.js

window.SpotNotes = window.SpotNotes || {};

window.SpotNotes.initSidebar = function() {
    const sidebar = document.getElementById('sidebar');
    const toggleBtn = document.getElementById('sidebar-toggle');

    toggleBtn.addEventListener('click', () => {
        sidebar.classList.toggle('collapsed');
        // Change arrow direction based on state
        if (sidebar.classList.contains('collapsed')) {
            const sections = document.querySelectorAll('.list-section');
            sections.forEach(section => {
                const content = section.querySelector('.list-section-content');
                if (content) content.style.display = 'none';
            });
            toggleBtn.innerHTML = '<'; // Point left (open)
        } else {
            toggleBtn.innerHTML = '>'; // Point right (close)
        }
    });

    const centerBtn = document.getElementById('btn-center-user');
    if (centerBtn) {
        centerBtn.addEventListener('click', () => {
            window.SpotNotes.isTracking = true;
            window.SpotNotes.updateTrackingUI();
            if (window.SpotNotes.userLocation) {
                window.SpotNotes.map.setView([window.SpotNotes.userLocation.lat, window.SpotNotes.userLocation.lng], 16);
            }
        });
    }
};

window.SpotNotes.setupPublicToggle = function() {
    const btn = document.getElementById('btn-toggle-public');
    const list = document.getElementById('public-notepads-list');
    
    if (!btn || !list) return;

    btn.addEventListener('click', async () => {
        if (list.style.display === 'none') {
            list.style.display = 'block';
            btn.innerHTML = 'Public Notepads ▾';
            
            // Lazy load if empty
            if (list.innerHTML === '') {
                list.innerHTML = '<p style="padding:10px; color:#666;">Loading...</p>';
                try {
                    const res = await fetch('/api/notepads?type=public');
                    const pads = await res.json();
                    window.SpotNotes.renderNotepadList(pads, 'public-notepads-list');
                } catch (err) {
                    list.innerHTML = '<p style="color:red; padding:10px;">Error loading public pads.</p>';
                }
            }
        } else {
            list.style.display = 'none';
            btn.innerHTML = 'Public Notepads &#9656;';
        }
    });
};

window.SpotNotes.renderNotepadList = function(pads, containerId, isFavorite) {
    const container = document.getElementById(containerId);
    if (!container) return;
    container.innerHTML = '';
    
    if (pads.length === 0) {
        container.innerHTML = '<p style="padding: 15px; color: var(--text-muted); font-style: italic; font-size: 0.9rem;">No notepads found.</p>';
        return;
    }

    pads.forEach(pad => {
        const item = document.createElement('div');
        item.className = 'notepad-card';
        
        let icon = pad.is_public ? '🌍' : '🔒';

        let favButton = '';
        const editBtn = (window.SpotNotes.currentUser && pad.owner_id === window.SpotNotes.currentUser.id) ?
            `<button class="btn-action-icon" onclick="event.stopPropagation(); openEditPadModal(${pad.id}, '${window.SpotNotes.escapeHtml(pad.name)}', ${pad.is_public}, '${pad.color || '#3388ff'}')" title="Edit Notepad">✏️</button>`
            : '';

        const isOwner = window.SpotNotes.currentUser && pad.owner_id === window.SpotNotes.currentUser.id;
        const manageShareBtn = isOwner ?
            `<button class="btn-action-icon" onclick="event.stopPropagation(); openShareSettingsModal(${pad.id}, '${window.SpotNotes.escapeHtml(pad.name)}')" title="Manage Sharing">⚙️</button>`
            : '';

        if(window.SpotNotes.isLoggedIn){
            const action = isFavorite ? 'unfavorite' : 'favorite';
            const label = isFavorite ? '&hearts;' : '♡';
            favButton = `<button class="btn-action-icon btn-action-fav" onclick="event.stopPropagation(); window.SpotNotes.toggleFavorite(${pad.id}, '${action}')" title="${action === 'favorite' ? 'Favorite' : 'Unfavorite'}">${label}</button>`;
        }

        const deleteBtn = isOwner ? 
            `<button class="btn-action-icon btn-action-delete" onclick="event.stopPropagation(); window.SpotNotes.deleteNotepad(${pad.id})" title="Delete Notepad">&times;</button>` 
            : '';

        const shareToken = pad.share_token || '';
        const shareBtn = `<button class="btn-action-icon" onclick="event.stopPropagation(); window.SpotNotes.shareNotepad(${pad.id}, '${shareToken}')" title="Share Notepad">🔗</button>`;

        item.innerHTML = `
            <div class="notepad-card-header">
                <div class="notepad-info">
                    <span class="notepad-color-dot" style="background-color: ${pad.color || '#3388ff'}"></span>
                    <span>${icon} ${window.SpotNotes.escapeHtml(pad.name)}</span>
                </div>
                <div class="notepad-actions">
                    ${editBtn} ${manageShareBtn} ${shareBtn} ${favButton} ${deleteBtn}
                </div>
            </div>
            <div class="notepad-card-footer">
                <span class="badge-count">${pad.note_count || 0} notes</span>
            </div>
        `;

        item.addEventListener('click', () => window.SpotNotes.loadNotesForPad(pad.id, pad.name, pad.is_public, pad.owner_id, false, null, pad.can_write));
        container.appendChild(item);
    });
};

window.SpotNotes.toggleSection = function(event) {
    const section = event.target.closest('.list-section');
    const content = section.querySelector('.list-section-content');
    const isCollapsed = content.style.display === 'none';
    content.style.display = isCollapsed ? 'block' : 'none';
    event.target.innerHTML = isCollapsed ? event.target.innerHTML.replace('&#9656;', '&#9662;') : event.target.innerHTML.replace('&#9662;', '&#9656;');
};