toolz/linkding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lists

Browse Source
This commit is contained in:
0x1d
2025-11-15 19:11:07 +01:00
parent 3ab8cdcc37
commit 3378a13fe4
5 changed files with 1550 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

587
public/app.js
View File

@@ -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,46 @@ 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 saveListSelection = document.getElementById('saveListSelection');
const cancelListSelection = document.getElementById('cancelListSelection');
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 +228,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 +241,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 +287,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 +347,21 @@ function handleSearch(e) {
if (!response.ok) throw new Error('Search failed');
const filteredLinks = await response.json();
// Filter by archived status
const archivedFiltered = filteredLinks.filter(link => {
// Filter by archived status and list filters
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 +418,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 +457,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 +500,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 +508,9 @@ function updateLinkCard(link) {
if (archiveBtn) {
archiveBtn.addEventListener('click', () => handleArchiveLink(link.id));
}
if (addToListBtn) {
addToListBtn.addEventListener('click', () => handleAddToLists(link.id));
}
}
}
@@ -550,6 +640,485 @@ 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;
});
cancelListSelection.addEventListener('click', () => {
listSelectionOverlay.classList.remove('show');
currentLinkForListSelection = null;
});
saveListSelection.addEventListener('click', handleSaveListSelection);
// 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('');
}
listSelectionOverlay.classList.add('show');
}
// Handle save list selection
async function handleSaveListSelection() {
if (!currentLinkForListSelection) 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}/${currentLinkForListSelection}/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 === currentLinkForListSelection);
if (linkIndex !== -1) {
allLinks[linkIndex].listIds = selectedListIds;
}
// Update display
displayLinks(getFilteredLinks());
listSelectionOverlay.classList.remove('show');
currentLinkForListSelection = null;
showMessage('Link lists updated successfully!', 'success');
} catch (error) {
showMessage('Failed to update link lists', 'error');
console.error('Error updating link lists:', error);
}
}
// 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');

79
public/index.html
View File

@@ -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,79 @@
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 class="list-selection-footer">
<button id="saveListSelection" class="btn-save-lists">Save</button>
<button id="cancelListSelection" class="btn-cancel-lists">Cancel</button>
</div>
</div>
</div>
<div class="container">
<div id="linksContainer" class="links-container">
<div class="empty-state">

650
public/styles.css
View File

@@ -1181,3 +1181,653 @@ 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;
}
.list-selection-footer {
display: flex;
gap: 0.75rem;
padding: 1.5rem;
border-top: 1px solid var(--border);
justify-content: flex-end;
}
.btn-save-lists,
.btn-cancel-lists {
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
border: none;
}
.btn-save-lists {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.btn-save-lists:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.btn-save-lists:active {
transform: translateY(0);
}
.btn-cancel-lists {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-cancel-lists:hover {
background: var(--surface-light);
border-color: var(--primary-color);
color: var(--primary-color);
}
/* 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-selection-footer {
flex-direction: column;
}
.btn-save-lists,
.btn-cancel-lists {
width: 100%;
}
.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;
}
}

84
public/sw.js
View File

@@ -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
event.respondWith(
caches.match(event.request)
.then((response) => {
// Return cached version or fetch from network
return response || fetch(event.request).then((response) => {
const url = new URL(event.request.url);
const isHTML = event.request.destination === 'document' || url.pathname === '/' || url.pathname.endsWith('.html');
const isCSS = url.pathname.endsWith('.css');
const isJS = url.pathname.endsWith('.js');
const isImage = event.request.destination === 'image' || url.pathname.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/i);
// 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(() => {
// If both cache and network fail, return offline page if available
if (event.request.destination === 'document') {
return caches.match('/index.html');
}
})
);
})
.catch(() => {
// Network failed, try cache
return caches.match(event.request).then((response) => {
// If it's a document request and cache fails, return 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));
});

177
server.js
View File

@@ -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 {