linkding/public/app.js

const API_BASE = '/api/links';

// DOM elements
const linkForm = document.getElementById('linkForm');
const linkInput = document.getElementById('linkInput');
const addButton = document.getElementById('addButton');
const searchInput = document.getElementById('searchInput');
const linksContainer = document.getElementById('linksContainer');
const messageDiv = document.getElementById('message');

// State
let allLinks = [];
let searchTimeout = null;

// Initialize app
document.addEventListener('DOMContentLoaded', () => {
    loadLinks();
    setupEventListeners();
});

// Event listeners
function setupEventListeners() {
    linkForm.addEventListener('submit', handleAddLink);
    searchInput.addEventListener('input', handleSearch);
}

// Load all links
async function loadLinks() {
    try {
        const response = await fetch(API_BASE);
        if (!response.ok) throw new Error('Failed to load links');
        
        allLinks = await response.json();
        displayLinks(allLinks);
    } catch (error) {
        showMessage('Failed to load links', 'error');
        console.error('Error loading links:', error);
    }
}

// Handle add link form submission
async function handleAddLink(e) {
    e.preventDefault();
    
    const url = linkInput.value.trim();
    if (!url) return;
    
    // Disable form
    addButton.disabled = true;
    const btnText = addButton.querySelector('.btn-text');
    const btnLoader = addButton.querySelector('.btn-loader');
    if (btnText) btnText.style.display = 'none';
    if (btnLoader) btnLoader.style.display = 'flex';
    
    try {
        const response = await fetch(API_BASE, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ url })
        });
        
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.error || 'Failed to add link');
        }
        
        // Add to beginning of array
        allLinks.unshift(data);
        displayLinks(allLinks);
        
        // Clear input
        linkInput.value = '';
        showMessage('Link added successfully!', 'success');
    } catch (error) {
        showMessage(error.message, 'error');
        console.error('Error adding link:', error);
    } finally {
        // Re-enable form
        addButton.disabled = false;
        if (btnText) btnText.style.display = 'inline';
        if (btnLoader) btnLoader.style.display = 'none';
    }
}

// Handle search input
function handleSearch(e) {
    const query = e.target.value.trim();
    
    // Debounce search
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(async () => {
        if (!query) {
            displayLinks(allLinks);
            return;
        }
        
        try {
            const response = await fetch(`${API_BASE}/search?q=${encodeURIComponent(query)}`);
            if (!response.ok) throw new Error('Search failed');
            
            const filteredLinks = await response.json();
            displayLinks(filteredLinks);
        } catch (error) {
            showMessage('Search failed', 'error');
            console.error('Error searching:', error);
        }
    }, 300);
}

// Display links
function displayLinks(links) {
    if (links.length === 0) {
        linksContainer.innerHTML = `
            <div class="empty-state">
                <p>No links found. ${allLinks.length === 0 ? 'Add your first link to get started!' : 'Try a different search term.'}</p>
            </div>
        `;
        return;
    }
    
    linksContainer.innerHTML = links.map(link => createLinkCard(link)).join('');
    
    // Add delete event listeners
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const linkId = e.target.closest('.link-card').dataset.id;
            handleDeleteLink(linkId);
        });
    });
}

// Create link card HTML
function createLinkCard(link) {
    const date = new Date(link.createdAt);
    const formattedDate = date.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
    });
    
    const imageHtml = link.image 
        ? `<img src="${escapeHtml(link.image)}" alt="${escapeHtml(link.title)}" onerror="this.parentElement.textContent='No image available'">`
        : '<span>No image available</span>';
    
    return `
        <div class="link-card" data-id="${link.id}">
            <div class="link-image">
                ${imageHtml}
            </div>
            <div class="link-content">
                <h3 class="link-title">${escapeHtml(link.title)}</h3>
                ${link.description ? `<p class="link-description">${escapeHtml(link.description)}</p>` : ''}
                <a href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url">
                    ${escapeHtml(link.url)}
                </a>
                <div class="link-footer">
                    <span class="link-date">${formattedDate}</span>
                    <button class="delete-btn">Delete</button>
                </div>
            </div>
        </div>
    `;
}

// Handle delete link
async function handleDeleteLink(id) {
    if (!confirm('Are you sure you want to delete this link?')) {
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/${id}`, {
            method: 'DELETE'
        });
        
        if (!response.ok) throw new Error('Failed to delete link');
        
        // Remove from local array
        allLinks = allLinks.filter(link => link.id !== id);
        displayLinks(allLinks);
        showMessage('Link deleted successfully', 'success');
    } catch (error) {
        showMessage('Failed to delete link', 'error');
        console.error('Error deleting link:', error);
    }
}

// Show message
function showMessage(text, type = 'success') {
    messageDiv.textContent = text;
    messageDiv.className = `message ${type}`;
    messageDiv.style.display = 'block';
    
    setTimeout(() => {
        messageDiv.style.display = 'none';
    }, 3000);
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}