feat: UX improvements for list handling

public/app.js

@@ -1,4 +1,5 @@
 const API_BASE = '/api/links';
+const LISTS_API_BASE = '/api/lists';
 
 // DOM elements
 const linkForm = document.getElementById('linkForm');
@@ -15,21 +16,44 @@ const addLinkToggle = document.getElementById('addLinkToggle');
 const addLinkWrapper = document.getElementById('addLinkWrapper');
 const layoutToggle = document.getElementById('layoutToggle');
 const layoutDropdown = document.getElementById('layoutDropdown');
+const listsToggle = document.getElementById('listsToggle');
+const listsModal = document.getElementById('listsModal');
+const closeListsModal = document.getElementById('closeListsModal');
+const listsList = document.getElementById('listsList');
+const newListName = document.getElementById('newListName');
+const createListBtn = document.getElementById('createListBtn');
+const listSelectionOverlay = document.getElementById('listSelectionOverlay');
+const listSelectionBody = document.getElementById('listSelectionBody');
+const closeListSelection = document.getElementById('closeListSelection');
+const listFilterWrapper = document.getElementById('listFilterWrapper');
+const listFilterChips = document.getElementById('listFilterChips');
+const clearListFilters = document.getElementById('clearListFilters');
+const editListsBtn = document.getElementById('editListsBtn');
 
 // State
 let allLinks = [];
+let allLists = [];
 let searchTimeout = null;
 let showArchived = false;
 let currentLayout = localStorage.getItem('linkdingLayout') || 'masonry'; // Load from localStorage or default
+let selectedListFilters = [];
+let currentLinkForListSelection = null;
 
 // Initialize app
 document.addEventListener('DOMContentLoaded', () => {
     loadLinks();
+    loadLists().then(() => {
+        // After lists are loaded, check URL for list filter
+        checkUrlForListFilter();
+    });
     setupEventListeners();
     setupScrollToTop();
     setupMobileSearch();
     setupMobileAddLink();
     setupLayoutToggle();
+    setupListsManagement();
+    setupListFiltering();
+    setupUrlNavigation();
     applyLayout(currentLayout);
     registerServiceWorker();
 });
@@ -202,10 +226,11 @@ async function loadLinks() {
         if (!response.ok) throw new Error('Failed to load links');
         
         allLinks = await response.json();
-        // Ensure all links have archived property
+        // Ensure all links have archived and listIds properties
         allLinks = allLinks.map(link => ({
             ...link,
-            archived: link.archived || false
+            archived: link.archived || false,
+            listIds: link.listIds || []
         }));
         displayLinks(getFilteredLinks());
     } catch (error) {
@@ -214,11 +239,20 @@ async function loadLinks() {
     }
 }
 
-// Get filtered links based on archived status
+// Get filtered links based on archived status and list filters
 function getFilteredLinks() {
     return allLinks.filter(link => {
         const isArchived = link.archived === true;
-        return showArchived ? isArchived : !isArchived;
+        const matchesArchiveFilter = showArchived ? isArchived : !isArchived;
+        
+        // Filter by selected lists
+        if (selectedListFilters.length > 0) {
+            const linkListIds = link.listIds || [];
+            const matchesListFilter = selectedListFilters.some(listId => linkListIds.includes(listId));
+            return matchesArchiveFilter && matchesListFilter;
+        }
+        
+        return matchesArchiveFilter;
     });
 }
 
@@ -251,8 +285,31 @@ async function handleAddLink(e) {
             throw new Error(data.error || 'Failed to add link');
         }
         
-        // Ensure archived property exists
+        // Ensure archived and listIds properties exist
         data.archived = data.archived || false;
+        data.listIds = data.listIds || [];
+        
+        // If there are active list filters, automatically assign the link to those lists
+        if (selectedListFilters.length > 0) {
+            try {
+                const listResponse = await fetch(`${API_BASE}/${data.id}/lists`, {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ listIds: selectedListFilters })
+                });
+                
+                if (listResponse.ok) {
+                    const updatedLink = await listResponse.json();
+                    data.listIds = updatedLink.listIds || selectedListFilters;
+                }
+            } catch (error) {
+                // If assigning to lists fails, continue anyway - link is still added
+                console.error('Error assigning link to lists:', error);
+            }
+        }
+        
         // Add to beginning of array
         allLinks.unshift(data);
         displayLinks(getFilteredLinks());
@@ -288,12 +345,21 @@ function handleSearch(e) {
             if (!response.ok) throw new Error('Search failed');
             
             const filteredLinks = await response.json();
-            // Filter by archived status
+            // Filter by archived status and list filters
-            const archivedFiltered = filteredLinks.filter(link => {
+            const filtered = filteredLinks.filter(link => {
                 const isArchived = link.archived === true;
-                return showArchived ? isArchived : !isArchived;
+                const matchesArchiveFilter = showArchived ? isArchived : !isArchived;
+                
+                // Filter by selected lists
+                if (selectedListFilters.length > 0) {
+                    const linkListIds = link.listIds || [];
+                    const matchesListFilter = selectedListFilters.some(listId => linkListIds.includes(listId));
+                    return matchesArchiveFilter && matchesListFilter;
+                }
+                
+                return matchesArchiveFilter;
             });
-            displayLinks(archivedFiltered);
+            displayLinks(filtered);
         } catch (error) {
             showMessage('Search failed', 'error');
             console.error('Error searching:', error);
@@ -350,6 +416,14 @@ function displayLinks(links) {
             handleArchiveLink(linkId);
         });
     });
+    
+    // Add add-to-list event listeners
+    document.querySelectorAll('.add-to-list-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const linkId = e.target.closest('.link-card').dataset.id;
+            handleAddToLists(linkId);
+        });
+    });
 }
 
 // Create link card HTML
@@ -381,6 +455,16 @@ function createLinkCard(link) {
                 <div class="link-footer">
                     <span class="link-date">${formattedDate}</span>
                     <div class="link-actions">
+                        <button class="add-to-list-btn" data-tooltip="Add to lists">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="5" y1="6" x2="19" y2="6"></line>
+                                <line x1="5" y1="12" x2="19" y2="12"></line>
+                                <line x1="5" y1="18" x2="19" y2="18"></line>
+                                <line x1="2" y1="6" x2="2.01" y2="6"></line>
+                                <line x1="2" y1="12" x2="2.01" y2="12"></line>
+                                <line x1="2" y1="18" x2="2.01" y2="18"></line>
+                            </svg>
+                        </button>
                         <button class="archive-btn" data-tooltip="${link.archived ? 'Unarchive' : 'Archive'}">
                             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                 ${link.archived 
@@ -414,6 +498,7 @@ function updateLinkCard(link) {
     if (newCard) {
         const deleteBtn = newCard.querySelector('.delete-btn');
         const archiveBtn = newCard.querySelector('.archive-btn');
+        const addToListBtn = newCard.querySelector('.add-to-list-btn');
         
         if (deleteBtn) {
             deleteBtn.addEventListener('click', () => handleDeleteLink(link.id));
@@ -421,6 +506,9 @@ function updateLinkCard(link) {
         if (archiveBtn) {
             archiveBtn.addEventListener('click', () => handleArchiveLink(link.id));
         }
+        if (addToListBtn) {
+            addToListBtn.addEventListener('click', () => handleAddToLists(link.id));
+        }
     }
 }
 
@@ -550,6 +638,488 @@ function showMessage(text, type = 'success') {
     }, 3000);
 }
 
+// Load all lists
+async function loadLists() {
+    try {
+        const response = await fetch(LISTS_API_BASE);
+        if (!response.ok) throw new Error('Failed to load lists');
+        
+        allLists = await response.json();
+        // Ensure all lists have public property
+        allLists = allLists.map(list => ({
+            ...list,
+            public: list.public || false
+        }));
+        // Only update filter chips if the filter section is visible
+        if (listFilterWrapper.classList.contains('show')) {
+            updateListFilterChips();
+        }
+        return allLists;
+    } catch (error) {
+        showMessage('Failed to load lists', 'error');
+        console.error('Error loading lists:', error);
+        return [];
+    }
+}
+
+// Setup lists management
+function setupListsManagement() {
+    // Toggle filter section visibility
+    listsToggle.addEventListener('click', () => {
+        const isVisible = listFilterWrapper.classList.contains('show');
+        if (isVisible) {
+            listFilterWrapper.classList.remove('show');
+            listsToggle.classList.remove('active');
+            // Reset filters when hiding the section
+            selectedListFilters = [];
+            updateUrlForListFilter();
+            updateListFilterChips();
+            displayLinks(getFilteredLinks());
+        } else {
+            listFilterWrapper.classList.add('show');
+            listsToggle.classList.add('active');
+            // Update filter chips when showing the section
+            updateListFilterChips();
+        }
+    });
+    
+    // Open lists modal from edit button
+    editListsBtn.addEventListener('click', () => {
+        listsModal.classList.add('show');
+        renderListsList();
+    });
+    
+    // Close lists modal
+    closeListsModal.addEventListener('click', () => {
+        listsModal.classList.remove('show');
+    });
+    
+    // Close on backdrop click
+    listsModal.addEventListener('click', (e) => {
+        if (e.target === listsModal) {
+            listsModal.classList.remove('show');
+        }
+    });
+    
+    // Create list
+    createListBtn.addEventListener('click', handleCreateList);
+    newListName.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            handleCreateList();
+        }
+    });
+    
+    // List selection overlay
+    closeListSelection.addEventListener('click', () => {
+        listSelectionOverlay.classList.remove('show');
+        currentLinkForListSelection = null;
+    });
+    
+    // Close on backdrop click
+    listSelectionOverlay.addEventListener('click', (e) => {
+        if (e.target === listSelectionOverlay) {
+            listSelectionOverlay.classList.remove('show');
+            currentLinkForListSelection = null;
+        }
+    });
+}
+
+// Render lists in the modal
+function renderListsList() {
+    if (allLists.length === 0) {
+        listsList.innerHTML = '<p class="empty-lists-message">No lists yet. Create your first list!</p>';
+        return;
+    }
+    
+    listsList.innerHTML = allLists.map(list => {
+        // Ensure public property exists and defaults to false (private)
+        const isPublic = list.public === true;
+        return `
+        <div class="list-item" data-id="${list.id}">
+            <input type="text" class="list-name-input" value="${escapeHtml(list.name)}" data-id="${list.id}">
+            <div class="list-item-actions">
+                <button class="toggle-public-btn ${isPublic ? '' : 'active'}" data-id="${list.id}" title="${isPublic ? 'Make private' : 'Make public'}">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        ${isPublic 
+                            ? '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>'
+                            : '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line>'
+                        }
+                    </svg>
+                </button>
+                <button class="public-url-btn" data-id="${list.id}" title="Open public URL">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                        <polyline points="15 3 21 3 21 9"></polyline>
+                        <line x1="10" y1="14" x2="21" y2="3"></line>
+                    </svg>
+                </button>
+                <button class="delete-list-btn" data-id="${list.id}" title="Delete">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <polyline points="3 6 5 6 21 6"></polyline>
+                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    `;
+    }).join('');
+    
+    // Add event listeners
+    listsList.querySelectorAll('.toggle-public-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const listId = e.target.closest('.toggle-public-btn').dataset.id;
+            handleTogglePublic(listId);
+        });
+    });
+    
+    listsList.querySelectorAll('.public-url-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const listId = e.target.closest('.public-url-btn').dataset.id;
+            const listUrl = `${window.location.origin}${window.location.pathname}#list=${listId}`;
+            window.open(listUrl, '_blank');
+        });
+    });
+    
+    listsList.querySelectorAll('.delete-list-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const listId = e.target.closest('.delete-list-btn').dataset.id;
+            handleDeleteList(listId);
+        });
+    });
+    
+    listsList.querySelectorAll('.list-name-input').forEach(input => {
+        // Auto-save on blur (when input loses focus)
+        input.addEventListener('blur', (e) => {
+            const listId = e.target.dataset.id;
+            handleUpdateList(listId);
+        });
+        
+        // Also save on Enter key
+        input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                e.target.blur(); // Trigger blur which will auto-save
+            }
+        });
+    });
+}
+
+// Handle create list
+async function handleCreateList() {
+    const name = newListName.value.trim();
+    if (!name) {
+        showMessage('Please enter a list name', 'error');
+        return;
+    }
+    
+    try {
+        const response = await fetch(LISTS_API_BASE, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ name })
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to create list');
+        }
+        
+        allLists.push(data);
+        newListName.value = '';
+        renderListsList();
+        // Only update filter chips if the filter section is visible
+        if (listFilterWrapper.classList.contains('show')) {
+            updateListFilterChips();
+        }
+        showMessage('List created successfully!', 'success');
+    } catch (error) {
+        showMessage(error.message, 'error');
+        console.error('Error creating list:', error);
+    }
+}
+
+// Handle update list
+async function handleUpdateList(listId) {
+    const input = listsList.querySelector(`.list-name-input[data-id="${listId}"]`);
+    const name = input.value.trim();
+    
+    if (!name) {
+        showMessage('List name cannot be empty', 'error');
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${LISTS_API_BASE}/${listId}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ name })
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to update list');
+        }
+        
+        const listIndex = allLists.findIndex(l => l.id === listId);
+        if (listIndex !== -1) {
+            allLists[listIndex] = data;
+        }
+        
+        renderListsList();
+        // Only update filter chips if the filter section is visible
+        if (listFilterWrapper.classList.contains('show')) {
+            updateListFilterChips();
+        }
+        showMessage('List updated successfully!', 'success');
+    } catch (error) {
+        showMessage(error.message, 'error');
+        console.error('Error updating list:', error);
+    }
+}
+
+// Handle toggle public status
+async function handleTogglePublic(listId) {
+    const list = allLists.find(l => l.id === listId);
+    if (!list) return;
+    
+    // Current state: false/undefined = private, true = public
+    // Toggle: if currently private (false), make it public (true)
+    //         if currently public (true), make it private (false)
+    const currentIsPublic = list.public === true;
+    const newPublicStatus = !currentIsPublic;
+    
+    try {
+        const response = await fetch(`${LISTS_API_BASE}/${listId}/public`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ public: newPublicStatus })
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error(data.error || 'Failed to update list public status');
+        }
+        
+        // Update local array
+        const listIndex = allLists.findIndex(l => l.id === listId);
+        if (listIndex !== -1) {
+            allLists[listIndex].public = newPublicStatus;
+        }
+        
+        renderListsList();
+        showMessage(newPublicStatus ? 'List is now public' : 'List is now private', 'success');
+    } catch (error) {
+        showMessage('Failed to update list public status', 'error');
+        console.error('Error updating list public status:', error);
+    }
+}
+
+// Handle delete list
+async function handleDeleteList(listId) {
+    if (!confirm('Are you sure you want to delete this list? Links assigned to this list will be unassigned.')) {
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${LISTS_API_BASE}/${listId}`, {
+            method: 'DELETE'
+        });
+        
+        if (!response.ok) throw new Error('Failed to delete list');
+        
+        allLists = allLists.filter(list => list.id !== listId);
+        selectedListFilters = selectedListFilters.filter(id => id !== listId);
+        
+        renderListsList();
+        // Only update filter chips if the filter section is visible
+        if (listFilterWrapper.classList.contains('show')) {
+            updateListFilterChips();
+        }
+        displayLinks(getFilteredLinks());
+        showMessage('List deleted successfully', 'success');
+    } catch (error) {
+        showMessage('Failed to delete list', 'error');
+        console.error('Error deleting list:', error);
+    }
+}
+
+// Handle add to lists
+function handleAddToLists(linkId) {
+    currentLinkForListSelection = linkId;
+    const link = allLinks.find(l => l.id === linkId);
+    const linkListIds = link?.listIds || [];
+    
+    // Render list checkboxes
+    if (allLists.length === 0) {
+        listSelectionBody.innerHTML = '<p class="empty-lists-message">No lists available. Create a list first!</p>';
+    } else {
+        listSelectionBody.innerHTML = allLists.map(list => `
+            <label class="list-checkbox-item">
+                <input type="checkbox" value="${list.id}" ${linkListIds.includes(list.id) ? 'checked' : ''}>
+                <span>${escapeHtml(list.name)}</span>
+            </label>
+        `).join('');
+        
+        // Add event listeners to checkboxes for auto-save
+        listSelectionBody.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+            checkbox.addEventListener('change', () => {
+                handleCheckboxChange(linkId);
+            });
+        });
+    }
+    
+    listSelectionOverlay.classList.add('show');
+}
+
+// Handle checkbox change (auto-save)
+async function handleCheckboxChange(linkId) {
+    if (!linkId) return;
+    
+    const checkboxes = listSelectionBody.querySelectorAll('input[type="checkbox"]:checked');
+    const selectedListIds = Array.from(checkboxes).map(cb => cb.value);
+    
+    try {
+        const response = await fetch(`${API_BASE}/${linkId}/lists`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ listIds: selectedListIds })
+        });
+        
+        const data = await response.json();
+        
+        if (!response.ok) {
+            throw new Error('Failed to update link lists');
+        }
+        
+        // Update local array
+        const linkIndex = allLinks.findIndex(l => l.id === linkId);
+        if (linkIndex !== -1) {
+            allLinks[linkIndex].listIds = selectedListIds;
+        }
+        
+        // No need to refresh the display - the link is already visible
+        // Only update if the link's visibility might have changed due to list filters
+        // But since we're just assigning lists, not changing visibility, we skip the refresh
+    } catch (error) {
+        showMessage('Failed to update link lists', 'error');
+        console.error('Error updating link lists:', error);
+        // Revert checkbox state on error
+        const link = allLinks.find(l => l.id === linkId);
+        const linkListIds = link?.listIds || [];
+        listSelectionBody.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+            checkbox.checked = linkListIds.includes(checkbox.value);
+        });
+    }
+}
+
+// Setup list filtering
+function setupListFiltering() {
+    clearListFilters.addEventListener('click', () => {
+        selectedListFilters = [];
+        updateUrlForListFilter();
+        updateListFilterChips();
+        displayLinks(getFilteredLinks());
+    });
+}
+
+// Setup URL navigation for lists
+function setupUrlNavigation() {
+    // Listen for hash changes (browser back/forward)
+    window.addEventListener('hashchange', () => {
+        checkUrlForListFilter();
+    });
+}
+
+// Check URL for list filter parameter
+function checkUrlForListFilter() {
+    const hash = window.location.hash;
+    if (!hash) {
+        return;
+    }
+    
+    // Parse hash like #list=LIST_ID or #list=ID1,ID2,ID3
+    const listMatch = hash.match(/^#list=(.+)$/);
+    if (listMatch) {
+        const listIds = listMatch[1].split(',').filter(id => id.trim());
+        
+        // Validate that all list IDs exist
+        const validListIds = listIds.filter(id => allLists.some(list => list.id === id));
+        
+        if (validListIds.length > 0) {
+            selectedListFilters = validListIds;
+            
+            // Don't show filter section when loading from URL - just apply the filter silently
+            // The user can manually toggle it if they want to see/modify filters
+            
+            displayLinks(getFilteredLinks());
+        }
+    }
+}
+
+// Update URL based on current list filters
+function updateUrlForListFilter() {
+    if (selectedListFilters.length > 0) {
+        const listIds = selectedListFilters.join(',');
+        window.location.hash = `list=${listIds}`;
+    } else {
+        // Remove hash if no filters
+        if (window.location.hash.startsWith('#list=')) {
+            window.history.replaceState(null, '', window.location.pathname + window.location.search);
+        }
+    }
+}
+
+// Update list filter chips
+function updateListFilterChips() {
+    if (allLists.length === 0) {
+        // Don't hide the wrapper if it's already shown, just show empty state
+        listFilterChips.innerHTML = '<p class="empty-lists-message" style="padding: 0.5rem 0; color: var(--text-muted); font-size: 0.875rem;">No lists available. Click Edit to create lists.</p>';
+        return;
+    }
+    
+    // Only show the wrapper if it has the 'show' class (user has toggled it)
+    if (!listFilterWrapper.classList.contains('show')) {
+        return;
+    }
+    
+    listFilterChips.innerHTML = allLists.map(list => {
+        const isSelected = selectedListFilters.includes(list.id);
+        return `
+            <button class="list-filter-chip ${isSelected ? 'active' : ''}" data-id="${list.id}">
+                ${escapeHtml(list.name)}
+            </button>
+        `;
+    }).join('');
+    
+    // Add event listeners
+    listFilterChips.querySelectorAll('.list-filter-chip').forEach(chip => {
+        chip.addEventListener('click', () => {
+            const listId = chip.dataset.id;
+            const index = selectedListFilters.indexOf(listId);
+            
+            if (index > -1) {
+                selectedListFilters.splice(index, 1);
+            } else {
+                selectedListFilters.push(listId);
+            }
+            
+            updateUrlForListFilter();
+            updateListFilterChips();
+            displayLinks(getFilteredLinks());
+        });
+    });
+}
+
 // Escape HTML to prevent XSS
 function escapeHtml(text) {
     const div = document.createElement('div');

public/index.html

@@ -29,6 +29,16 @@
                         <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                     </svg>
                 </button>
+                <button id="listsToggle" class="lists-toggle-btn" title="Manage lists">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="5" y1="6" x2="19" y2="6"></line>
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <line x1="5" y1="18" x2="19" y2="18"></line>
+                        <line x1="2" y1="6" x2="2.01" y2="6"></line>
+                        <line x1="2" y1="12" x2="2.01" y2="12"></line>
+                        <line x1="2" y1="18" x2="2.01" y2="18"></line>
+                    </svg>
+                </button>
                 <button id="archiveToggle" class="archive-toggle-btn" title="Toggle archived links">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
@@ -112,10 +122,75 @@
                         autocomplete="off"
                     >
                 </div>
+                <div class="list-filter-wrapper" id="listFilterWrapper">
+                    <div class="list-filter-header">
+                        <span class="list-filter-label"><b>Lists</b></span>
+                        <div class="list-filter-actions">
+                            <button id="editListsBtn" class="edit-lists-btn" title="Manage lists">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                                </svg>
+                                <span>Edit</span>
+                            </button>
+                            <button id="clearListFilters" class="clear-list-filters-btn" title="Clear filters">Clear</button>
+                        </div>
+                    </div>
+                    <div class="list-filter-chips" id="listFilterChips">
+                        <!-- List filter chips will be inserted here -->
+                    </div>
+                </div>
             </div>
         </div>
     </header>
 
+    <!-- Lists Management Modal -->
+    <div id="listsModal" class="lists-modal">
+        <div class="lists-modal-content">
+            <div class="lists-modal-header">
+                <h2>Manage Lists</h2>
+                <button id="closeListsModal" class="close-modal-btn">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <div class="lists-modal-body">
+                <div class="create-list-form">
+                    <input 
+                        type="text" 
+                        id="newListName" 
+                        placeholder="Enter list name..." 
+                        autocomplete="off"
+                    >
+                    <button id="createListBtn" class="btn-create-list">Create List</button>
+                </div>
+                <div class="lists-list" id="listsList">
+                    <!-- Lists will be inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- List Selection Overlay -->
+    <div id="listSelectionOverlay" class="list-selection-overlay">
+        <div class="list-selection-content">
+            <div class="list-selection-header">
+                <h3>Add to Lists</h3>
+                <button id="closeListSelection" class="close-overlay-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
+            <div class="list-selection-body" id="listSelectionBody">
+                <!-- List checkboxes will be inserted here -->
+            </div>
+        </div>
+    </div>
+
     <div class="container">
         <div id="linksContainer" class="links-container">
             <div class="empty-state">

public/styles.css

@@ -1181,3 +1181,600 @@ body {
     }
 }
 
+/* Lists Toggle Button */
+.lists-toggle-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    padding: 0.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.lists-toggle-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.lists-toggle-btn.active {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.lists-toggle-btn svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+
+/* List Filter Section */
+.list-filter-wrapper {
+    width: 100%;
+    padding: 0.75rem 0;
+    margin-top: 8px;
+    border-top: 1px solid var(--border);
+    display: none;
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
+}
+
+.list-filter-wrapper.show {
+    display: block;
+    opacity: 1;
+    max-height: 500px;
+}
+
+.list-filter-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.list-filter-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.edit-lists-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 0.875rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+
+.edit-lists-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.edit-lists-btn svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+.list-filter-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.clear-list-filters-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 0.875rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.clear-list-filters-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.list-filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.list-filter-chip {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    padding: 0.375rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.list-filter-chip:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.list-filter-chip.active {
+    background: rgba(99, 102, 241, 0.1);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+/* Lists Management Modal */
+.lists-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.lists-modal.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.lists-modal-content {
+    background: var(--surface);
+    border-radius: 1rem;
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 20px 60px var(--shadow-lg);
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+}
+
+.lists-modal.show .lists-modal-content {
+    transform: scale(1);
+}
+
+.lists-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.lists-modal-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: var(--text-primary);
+}
+
+.close-modal-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    width: 36px;
+    height: 36px;
+}
+
+.close-modal-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.lists-modal-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.create-list-form {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.create-list-form input {
+    flex: 1;
+    background: var(--background);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+}
+
+.create-list-form input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+.btn-create-list {
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+}
+
+.btn-create-list:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+}
+
+.btn-create-list:active {
+    transform: translateY(0);
+}
+
+.lists-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.list-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--background);
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    min-width: 0;
+    overflow: hidden;
+}
+
+.list-name-input {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 1rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.list-name-input:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.list-item-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+
+.toggle-public-btn,
+.public-url-btn,
+.save-list-btn,
+.delete-list-btn {
+    background: transparent;
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+    padding: 0.375rem;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.toggle-public-btn svg,
+.public-url-btn svg,
+.save-list-btn svg,
+.delete-list-btn svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2;
+}
+
+.toggle-public-btn {
+    color: var(--text-secondary);
+    border-color: rgba(156, 163, 175, 0.3);
+}
+
+.toggle-public-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--text-secondary);
+    color: var(--text-primary);
+}
+
+.toggle-public-btn.active {
+    color: var(--secondary-color);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+.toggle-public-btn.active:hover {
+    background: rgba(139, 92, 246, 0.2);
+    border-color: var(--secondary-color);
+    color: var(--secondary-color);
+}
+
+.public-url-btn {
+    color: var(--primary-color);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.public-url-btn:hover {
+    background: rgba(99, 102, 241, 0.2);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.save-list-btn {
+    color: var(--success);
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.save-list-btn:hover {
+    background: rgba(16, 185, 129, 0.2);
+    border-color: var(--success);
+    color: var(--success);
+}
+
+.delete-list-btn {
+    color: var(--error);
+    border-color: rgba(239, 68, 68, 0.3);
+}
+
+.delete-list-btn:hover {
+    background: rgba(239, 68, 68, 0.2);
+    border-color: var(--error);
+    color: var(--error);
+}
+
+.empty-lists-message {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 2rem;
+}
+
+/* List Selection Overlay */
+.list-selection-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1001;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.list-selection-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.list-selection-content {
+    background: var(--surface);
+    border-radius: 1rem;
+    width: 90%;
+    max-width: 500px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 20px 60px var(--shadow-lg);
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+}
+
+.list-selection-overlay.show .list-selection-content {
+    transform: scale(1);
+}
+
+.list-selection-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.list-selection-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: var(--text-primary);
+}
+
+.close-overlay-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    width: 36px;
+    height: 36px;
+}
+
+.close-overlay-btn:hover {
+    background: var(--surface-light);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.list-selection-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    max-height: 400px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.list-checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--background);
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.list-checkbox-item:hover {
+    background: var(--surface-light);
+}
+
+.list-checkbox-item input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--primary-color);
+}
+
+.list-checkbox-item span {
+    color: var(--text-primary);
+    flex: 1;
+}
+
+
+/* Add to List Button in Link Cards */
+.add-to-list-btn {
+    background: transparent;
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+    padding: 0.375rem;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    position: relative;
+    width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+}
+
+.add-to-list-btn svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2;
+    flex-shrink: 0;
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+
+.add-to-list-btn {
+    color: var(--primary-color);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.add-to-list-btn:hover {
+    background: rgba(99, 102, 241, 0.2);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+    .lists-modal-content,
+    .list-selection-content {
+        width: 95%;
+        max-height: 90vh;
+    }
+
+    .create-list-form {
+        flex-direction: column;
+    }
+
+    .list-item {
+        gap: 0.5rem;
+        padding: 0.5rem;
+    }
+
+    .list-name-input {
+        font-size: 0.9rem;
+        padding: 0.25rem;
+    }
+
+    .list-item-actions {
+        gap: 0.25rem;
+    }
+
+    .toggle-public-btn,
+    .public-url-btn,
+    .save-list-btn,
+    .delete-list-btn {
+        padding: 0.25rem;
+        min-width: 28px;
+        width: 28px;
+        height: 28px;
+    }
+
+    .toggle-public-btn svg,
+    .public-url-btn svg,
+    .save-list-btn svg,
+    .delete-list-btn svg {
+        width: 14px;
+        height: 14px;
+    }
+}
+

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'linkding-v1';
+const CACHE_NAME = 'linkding-v2';
 const urlsToCache = [
   '/',
   '/index.html',
@@ -36,12 +36,14 @@ self.addEventListener('activate', (event) => {
           }
         })
       );
+    }).then(() => {
+      // Claim all clients immediately to ensure new service worker takes control
+      return self.clients.claim();
     })
   );
-  return self.clients.claim();
 });
 
-// Fetch event - serve from cache, fallback to network
+// Fetch event - network first for HTML/CSS/JS, cache first for images
 self.addEventListener('fetch', (event) => {
   // API requests - always fetch from network, don't cache
   if (event.request.url.includes('/api/')) {
@@ -49,12 +51,17 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // Static assets - cache first, then network
+  const url = new URL(event.request.url);
-  event.respondWith(
+  const isHTML = event.request.destination === 'document' || url.pathname === '/' || url.pathname.endsWith('.html');
-    caches.match(event.request)
+  const isCSS = url.pathname.endsWith('.css');
-      .then((response) => {
+  const isJS = url.pathname.endsWith('.js');
-        // Return cached version or fetch from network
+  const isImage = event.request.destination === 'image' || url.pathname.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/i);
-        return response || fetch(event.request).then((response) => {
+
+  // For HTML, CSS, and JS: Network first, then cache (for offline support)
+  if (isHTML || isCSS || isJS) {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
           // Don't cache non-successful responses
           if (!response || response.status !== 200 || response.type !== 'basic') {
             return response;
@@ -69,14 +76,55 @@ self.addEventListener('fetch', (event) => {
             });
 
           return response;
-        });
+        })
-      })
+        .catch(() => {
-      .catch(() => {
+          // Network failed, try cache
-        // If both cache and network fail, return offline page if available
+          return caches.match(event.request).then((response) => {
-        if (event.request.destination === 'document') {
+            // If it's a document request and cache fails, return index.html
-          return caches.match('/index.html');
+            if (!response && isHTML) {
-        }
+              return caches.match('/index.html');
-      })
+            }
-  );
+            return response;
+          });
+        })
+    );
+    return;
+  }
+
+  // For images and other static assets: Cache first, then network
+  if (isImage) {
+    event.respondWith(
+      caches.match(event.request)
+        .then((response) => {
+          // Return cached version or fetch from network
+          return response || fetch(event.request).then((response) => {
+            // Don't cache non-successful responses
+            if (!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+
+            // Clone the response
+            const responseToCache = response.clone();
+
+            caches.open(CACHE_NAME)
+              .then((cache) => {
+                cache.put(event.request, responseToCache);
+              });
+
+            return response;
+          });
+        })
+        .catch(() => {
+          // If both cache and network fail, return offline page if available
+          if (event.request.destination === 'document') {
+            return caches.match('/index.html');
+          }
+        })
+    );
+    return;
+  }
+
+  // For other requests: Network first
+  event.respondWith(fetch(event.request));
 });
 

server.js

@@ -64,6 +64,7 @@ function findChromeExecutable() {
 const app = express();
 const PORT = process.env.PORT || 3000;
 const DATA_FILE = path.join(__dirname, 'data', 'links.json');
+const LISTS_FILE = path.join(__dirname, 'data', 'lists.json');
 
 // Middleware
 app.use(cors());
@@ -83,6 +84,11 @@ async function ensureDataDir() {
   } catch {
     await fs.writeFile(DATA_FILE, JSON.stringify([]));
   }
+  try {
+    await fs.access(LISTS_FILE);
+  } catch {
+    await fs.writeFile(LISTS_FILE, JSON.stringify([]));
+  }
 }
 
 // Read links from file
@@ -100,6 +106,21 @@ async function writeLinks(links) {
   await fs.writeFile(DATA_FILE, JSON.stringify(links, null, 2));
 }
 
+// Read lists from file
+async function readLists() {
+  try {
+    const data = await fs.readFile(LISTS_FILE, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    return [];
+  }
+}
+
+// Write lists to file
+async function writeLists(lists) {
+  await fs.writeFile(LISTS_FILE, JSON.stringify(lists, null, 2));
+}
+
 // Extract metadata using Puppeteer (for JavaScript-heavy sites)
 async function extractMetadataWithPuppeteer(url) {
   const pptr = await getPuppeteer();
@@ -686,6 +707,162 @@ app.delete('/api/links/:id', async (req, res) => {
   }
 });
 
+// Update link's lists
+app.patch('/api/links/:id/lists', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { listIds } = req.body;
+    
+    if (!Array.isArray(listIds)) {
+      return res.status(400).json({ error: 'listIds must be an array' });
+    }
+    
+    const links = await readLinks();
+    const linkIndex = links.findIndex(link => link.id === id);
+    
+    if (linkIndex === -1) {
+      return res.status(404).json({ error: 'Link not found' });
+    }
+    
+    links[linkIndex].listIds = listIds;
+    await writeLinks(links);
+    
+    res.json(links[linkIndex]);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to update link lists' });
+  }
+});
+
+// Lists API Routes
+
+// Get all lists
+app.get('/api/lists', async (req, res) => {
+  try {
+    const lists = await readLists();
+    res.json(lists);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to read lists' });
+  }
+});
+
+// Create a new list
+app.post('/api/lists', async (req, res) => {
+  try {
+    const { name } = req.body;
+    
+    if (!name || typeof name !== 'string' || name.trim().length === 0) {
+      return res.status(400).json({ error: 'List name is required' });
+    }
+    
+    const lists = await readLists();
+    
+    // Check if list with same name already exists
+    const existingList = lists.find(list => list.name.toLowerCase() === name.trim().toLowerCase());
+    if (existingList) {
+      return res.status(409).json({ error: 'List with this name already exists' });
+    }
+    
+    const newList = {
+      id: Date.now().toString(),
+      name: name.trim(),
+      createdAt: new Date().toISOString(),
+      public: false
+    };
+    
+    lists.push(newList);
+    await writeLists(lists);
+    
+    res.status(201).json(newList);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to create list' });
+  }
+});
+
+// Update a list
+app.put('/api/lists/:id', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { name } = req.body;
+    
+    if (!name || typeof name !== 'string' || name.trim().length === 0) {
+      return res.status(400).json({ error: 'List name is required' });
+    }
+    
+    const lists = await readLists();
+    const listIndex = lists.findIndex(list => list.id === id);
+    
+    if (listIndex === -1) {
+      return res.status(404).json({ error: 'List not found' });
+    }
+    
+    // Check if another list with same name exists
+    const existingList = lists.find(list => list.id !== id && list.name.toLowerCase() === name.trim().toLowerCase());
+    if (existingList) {
+      return res.status(409).json({ error: 'List with this name already exists' });
+    }
+    
+    lists[listIndex].name = name.trim();
+    await writeLists(lists);
+    
+    res.json(lists[listIndex]);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to update list' });
+  }
+});
+
+// Toggle list public status
+app.patch('/api/lists/:id/public', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const { public: isPublic } = req.body;
+    
+    if (typeof isPublic !== 'boolean') {
+      return res.status(400).json({ error: 'public must be a boolean' });
+    }
+    
+    const lists = await readLists();
+    const listIndex = lists.findIndex(list => list.id === id);
+    
+    if (listIndex === -1) {
+      return res.status(404).json({ error: 'List not found' });
+    }
+    
+    lists[listIndex].public = isPublic;
+    await writeLists(lists);
+    
+    res.json(lists[listIndex]);
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to update list public status' });
+  }
+});
+
+// Delete a list
+app.delete('/api/lists/:id', async (req, res) => {
+  try {
+    const { id } = req.params;
+    const lists = await readLists();
+    const filtered = lists.filter(list => list.id !== id);
+    
+    if (filtered.length === lists.length) {
+      return res.status(404).json({ error: 'List not found' });
+    }
+    
+    // Remove this list from all links
+    const links = await readLinks();
+    links.forEach(link => {
+      if (link.listIds && Array.isArray(link.listIds)) {
+        link.listIds = link.listIds.filter(listId => listId !== id);
+      }
+    });
+    await writeLinks(links);
+    
+    await writeLists(filtered);
+    res.json({ message: 'List deleted successfully' });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to delete list' });
+  }
+});
+
 // Helper function to validate URL
 function isValidUrl(string) {
   try {