script.js

// Update the renderBookmarks function to fix the event handlers
function renderBookmarks(bookmarks) {
    const bookmarksList = document.getElementById('custom-bookmarks-list');
    bookmarksList.innerHTML = bookmarks.map(bookmark => `
        <li class="tool-item" data-id="${bookmark.id}">
            <div class="tool-header">
                <img src="${getFaviconUrl(bookmark.url)}" alt="Favicon" class="tool-favicon" 
                     onerror="this.src='https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://example.com&size=256';">
                <a href="${bookmark.url}" target="_blank" class="tool-link">${bookmark.title}</a>
                <div class="bookmark-actions">
                    <button class="edit-bookmark-btn" title="Edit bookmark">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="delete-bookmark-btn" class="delete-btn" title="Delete bookmark">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </li>
    `).join('');

    // Add event listeners after rendering
    attachBookmarkEventListeners();
}

// Add this new function to handle event listeners
function attachBookmarkEventListeners() {
    // Delete button handlers
    document.querySelectorAll('.delete-bookmark-btn').forEach(button => {
        button.addEventListener('click', (e) => {
            const bookmarkItem = e.target.closest('.tool-item');
            const bookmarkId = parseInt(bookmarkItem.dataset.id);
            deleteBookmark(bookmarkId);
        });
    });

    // Edit button handlers
    document.querySelectorAll('.edit-bookmark-btn').forEach(button => {
        button.addEventListener('click', (e) => {
            const bookmarkItem = e.target.closest('.tool-item');
            const bookmarkId = parseInt(bookmarkItem.dataset.id);
            editBookmark(bookmarkId);
        });
    });
}

// Function to get bookmarks from local storage
function getBookmarks() {
    const storedBookmarks = localStorage.getItem('bookmarks');
    return storedBookmarks ? JSON.parse(storedBookmarks) : [];
}

// Function to save bookmarks to local storage
function saveBookmarks(bookmarks) {
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

// Initialize bookmarks from localStorage or empty array
let bookmarks = getBookmarks();
renderBookmarks(bookmarks);

// Add event listener for the bookmark form
const bookmarkForm = document.getElementById('bookmark-form');
bookmarkForm.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission
    const titleInput = document.getElementById('bookmark-title');
    const urlInput = document.getElementById('bookmark-url');
    const title = titleInput.value.trim();
    const url = urlInput.value.trim();

    if (title && url) {
        addBookmark(title, url);
        titleInput.value = '';
        urlInput.value = '';
    } else {
        alert('Please enter both title and URL.');
    }
});

// Add a new function to add bookmarks
function addBookmark(title, url) {
    const newBookmark = {
        id: Date.now(), // Generate a unique ID
        title: title,
        url: url
    };
    bookmarks.push(newBookmark);
    saveBookmarks(bookmarks);
    renderBookmarks(bookmarks);
}


// Update the editBookmark function to handle the dialog better
function editBookmark(id) {
    const bookmarks = getBookmarks();
    const bookmark = bookmarks.find(b => b.id === id);
    
    if (bookmark) {
        // Create and show custom dialog
        const newTitle = prompt('Edit bookmark title:', bookmark.title);
        if (newTitle === null) return; // User clicked Cancel

        const newUrl = prompt('Edit bookmark URL:', bookmark.url);
        if (newUrl === null) return; // User clicked Cancel

        // Validate inputs
        if (newTitle.trim() && newUrl.trim()) {
            // Update bookmark
            bookmark.title = newTitle.trim();
            bookmark.url = newUrl.trim();
            saveBookmarks(bookmarks);
            renderBookmarks(bookmarks);
        } else {
            alert('Title and URL cannot be empty!');
        }
    }
}

// Update the deleteBookmark function to add confirmation
function deleteBookmark(id) {
    if (confirm('Are you sure you want to delete this bookmark?')) {
        const bookmarks = getBookmarks().filter(bookmark => bookmark.id !== id);
        saveBookmarks(bookmarks);
        renderBookmarks(bookmarks);
    }
}

// ... (rest of your existing JavaScript remains the same) ...
const sections = {
    ai: {
        list: document.getElementById('ai-tools-list'),
        loading: document.getElementById('ai-loading')
    },
    dev: {
        list: document.getElementById('dev-tools-list'),
        loading: document.getElementById('dev-loading')
    },
    productivity: {
        list: document.getElementById('productivity-tools-list'),
        loading: document.getElementById('productivity-loading')
    },
    social: {
        list: document.getElementById('social-tools-list'),
        loading: document.getElementById('social-loading')
    }
};

const searchInput = document.getElementById('search-input');
const ITEMS_TO_SHOW = 5;

let cachedTools = {
    ai: [],
    dev: [],
    productivity: [],
    social: []
};

// Fetch tools from the API
async function fetchTools(endpoint) {
    try {
        const response = await fetch(`https://devyar-ext.milaadfarzian.workers.dev/devtools/${endpoint}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error(`Error fetching ${endpoint} tools:`, error);
        return [];
    }
}

function getFaviconUrl(url) {
    return `https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${encodeURIComponent(url)}&size=256`;
}

function createToolElement(tool) {
    return `
        <li class="tool-item">
            <div class="tool-header">
                <img src="${getFaviconUrl(tool.url)}" alt="Favicon" class="tool-favicon" 
                     onerror="this.src='https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://example.com&size=256';">
                <a href="${tool.url}" target="_blank" class="tool-link">${tool.title}</a>
            </div>
            <p class="tool-description">${tool.description}</p>
        </li>
    `;
}

function renderTools(tools, section, showAll = false) {
    const { list, loading } = sections[section];
    
    if (!tools || tools.length === 0) {
        loading.textContent = 'No tools found';
        return;
    }

    loading.style.display = 'none';
    const toolsToRender = showAll ? tools : tools.slice(0, ITEMS_TO_SHOW);
    list.innerHTML = toolsToRender.map(createToolElement).join('');

    // Show/hide expand button
    const expandButton = list.closest('.tool-section').querySelector('.expand-button');
    expandButton.classList.toggle('visible', tools.length > ITEMS_TO_SHOW);
}

function filterTools(tools, searchTerm) {
    return tools.filter(tool => 
        tool.title.toLowerCase().includes(searchTerm) || 
        tool.description.toLowerCase().includes(searchTerm)
    );
}

function setupSearch() {
    searchInput.addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        
        Object.entries(cachedTools).forEach(([section, tools]) => {
            const filteredTools = filterTools(tools, searchTerm);
            renderTools(filteredTools, section, true);
        });
    });
}

function setupExpandButtons() {
    document.querySelectorAll('.expand-button').forEach(button => {
        button.addEventListener('click', () => {
            const section = button.dataset.section;
            const sectionElement = button.closest('.tool-section');
            const isExpanded = sectionElement.classList.toggle('expanded');
            
            const sectionKey = section.replace('-tools', '');
            renderTools(cachedTools[sectionKey], sectionKey, isExpanded);
        });
    });
}

async function init() {
    try {
        // Fetch all tools simultaneously
        const [aiTools, devTools, productivityTools, socialTools] = await Promise.all([
            fetchTools('ai'),
            fetchTools('tools'),
            fetchTools('productivity'),
            fetchTools('social')
        ]);

        // Cache the results
        cachedTools = {
            ai: aiTools,
            dev: devTools,
            productivity: productivityTools,
            social: socialTools
        };

        // Render all sections
        Object.entries(cachedTools).forEach(([section, tools]) => {
            renderTools(tools, section);
        });

        // Setup interactions
        setupSearch();
        setupExpandButtons();
    } catch (error) {
        console.error('Initialization error:', error);
        Object.values(sections).forEach(({ loading }) => {
            loading.textContent = 'Error loading tools. Please refresh the page.';
        });
    }
}

// Start the application
init();