1129 lines
41 KiB
JavaScript
1129 lines
41 KiB
JavaScript
const API_BASE = '/api/links';
|
|
const LISTS_API_BASE = '/api/lists';
|
|
|
|
// DOM elements
|
|
const linkForm = document.getElementById('linkForm');
|
|
const linkInput = document.getElementById('linkInput');
|
|
const addButton = document.getElementById('addButton');
|
|
const searchInput = document.getElementById('searchInput');
|
|
const linksContainer = document.getElementById('linksContainer');
|
|
const toastContainer = document.getElementById('toastContainer');
|
|
const archiveToggle = document.getElementById('archiveToggle');
|
|
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
|
|
const searchToggle = document.getElementById('searchToggle');
|
|
const searchWrapper = document.getElementById('searchWrapper');
|
|
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();
|
|
});
|
|
|
|
// Register service worker for PWA
|
|
function registerServiceWorker() {
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js')
|
|
.then((registration) => {
|
|
console.log('Service Worker registered successfully:', registration.scope);
|
|
})
|
|
.catch((error) => {
|
|
console.log('Service Worker registration failed:', error);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
function setupEventListeners() {
|
|
linkForm.addEventListener('submit', handleAddLink);
|
|
searchInput.addEventListener('input', handleSearch);
|
|
archiveToggle.addEventListener('click', handleToggleArchive);
|
|
}
|
|
|
|
// Setup search toggle (works on both desktop and mobile)
|
|
function setupMobileSearch() {
|
|
if (!searchToggle || !searchWrapper) return;
|
|
|
|
searchToggle.addEventListener('click', () => {
|
|
const isVisible = searchWrapper.classList.contains('show');
|
|
|
|
if (isVisible) {
|
|
// Hide search
|
|
searchWrapper.classList.remove('show');
|
|
searchToggle.classList.remove('active');
|
|
// Hide add link if visible
|
|
if (addLinkWrapper && addLinkWrapper.classList.contains('show')) {
|
|
addLinkWrapper.classList.remove('show');
|
|
if (addLinkToggle) addLinkToggle.classList.remove('active');
|
|
}
|
|
// Clear search and reset if needed
|
|
if (searchInput.value.trim()) {
|
|
searchInput.value = '';
|
|
loadLinks();
|
|
}
|
|
} else {
|
|
// Hide add link if visible
|
|
if (addLinkWrapper && addLinkWrapper.classList.contains('show')) {
|
|
addLinkWrapper.classList.remove('show');
|
|
if (addLinkToggle) addLinkToggle.classList.remove('active');
|
|
}
|
|
// Show search
|
|
searchWrapper.classList.add('show');
|
|
searchToggle.classList.add('active');
|
|
// Focus the input after a brief delay for animation
|
|
setTimeout(() => {
|
|
searchInput.focus();
|
|
}, 100);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Setup add link toggle (works on both desktop and mobile)
|
|
function setupMobileAddLink() {
|
|
if (!addLinkToggle || !addLinkWrapper) return;
|
|
|
|
addLinkToggle.addEventListener('click', () => {
|
|
const isVisible = addLinkWrapper.classList.contains('show');
|
|
|
|
if (isVisible) {
|
|
// Hide add link
|
|
addLinkWrapper.classList.remove('show');
|
|
addLinkToggle.classList.remove('active');
|
|
// Clear input if needed
|
|
if (linkInput.value.trim()) {
|
|
linkInput.value = '';
|
|
}
|
|
} else {
|
|
// Hide search if visible
|
|
if (searchWrapper && searchWrapper.classList.contains('show')) {
|
|
searchWrapper.classList.remove('show');
|
|
if (searchToggle) searchToggle.classList.remove('active');
|
|
if (searchInput.value.trim()) {
|
|
searchInput.value = '';
|
|
loadLinks();
|
|
}
|
|
}
|
|
// Show add link
|
|
addLinkWrapper.classList.add('show');
|
|
addLinkToggle.classList.add('active');
|
|
// Focus the input after a brief delay for animation
|
|
setTimeout(() => {
|
|
linkInput.focus();
|
|
}, 100);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Setup layout toggle
|
|
function setupLayoutToggle() {
|
|
if (!layoutToggle || !layoutDropdown) return;
|
|
|
|
// Toggle dropdown on button click
|
|
layoutToggle.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
layoutDropdown.classList.toggle('show');
|
|
layoutToggle.classList.toggle('active');
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!layoutToggle.contains(e.target) && !layoutDropdown.contains(e.target)) {
|
|
layoutDropdown.classList.remove('show');
|
|
layoutToggle.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Handle layout option clicks
|
|
layoutDropdown.querySelectorAll('.layout-option').forEach(option => {
|
|
option.addEventListener('click', () => {
|
|
const layout = option.dataset.layout;
|
|
applyLayout(layout);
|
|
layoutDropdown.classList.remove('show');
|
|
layoutToggle.classList.remove('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Apply layout
|
|
function applyLayout(layout) {
|
|
currentLayout = layout;
|
|
linksContainer.className = 'links-container';
|
|
linksContainer.classList.add(`layout-${layout}`);
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem('linkdingLayout', layout);
|
|
|
|
// Update active state in dropdown
|
|
layoutDropdown.querySelectorAll('.layout-option').forEach(option => {
|
|
option.classList.toggle('active', option.dataset.layout === layout);
|
|
});
|
|
}
|
|
|
|
// Setup scroll to top button
|
|
function setupScrollToTop() {
|
|
// Show/hide button based on scroll position
|
|
window.addEventListener('scroll', () => {
|
|
if (window.pageYOffset > 300) {
|
|
scrollToTopBtn.classList.add('show');
|
|
} else {
|
|
scrollToTopBtn.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Scroll to top when button is clicked
|
|
scrollToTopBtn.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Load all links
|
|
async function loadLinks() {
|
|
try {
|
|
const response = await fetch(API_BASE);
|
|
if (!response.ok) throw new Error('Failed to load links');
|
|
|
|
allLinks = await response.json();
|
|
// Ensure all links have archived and listIds properties
|
|
allLinks = allLinks.map(link => ({
|
|
...link,
|
|
archived: link.archived || false,
|
|
listIds: link.listIds || []
|
|
}));
|
|
displayLinks(getFilteredLinks());
|
|
} catch (error) {
|
|
showMessage('Failed to load links', 'error');
|
|
console.error('Error loading links:', error);
|
|
}
|
|
}
|
|
|
|
// Get filtered links based on archived status and list filters
|
|
function getFilteredLinks() {
|
|
return allLinks.filter(link => {
|
|
const isArchived = link.archived === true;
|
|
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;
|
|
});
|
|
}
|
|
|
|
// Handle add link form submission
|
|
async function handleAddLink(e) {
|
|
e.preventDefault();
|
|
|
|
const url = linkInput.value.trim();
|
|
if (!url) return;
|
|
|
|
// Disable form
|
|
addButton.disabled = true;
|
|
const btnText = addButton.querySelector('.btn-text');
|
|
const btnLoader = addButton.querySelector('.btn-loader');
|
|
if (btnText) btnText.style.display = 'none';
|
|
if (btnLoader) btnLoader.style.display = 'flex';
|
|
|
|
try {
|
|
const response = await fetch(API_BASE, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ url })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to add link');
|
|
}
|
|
|
|
// 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());
|
|
|
|
// Clear input
|
|
linkInput.value = '';
|
|
showMessage('Link added successfully!', 'success');
|
|
} catch (error) {
|
|
showMessage(error.message, 'error');
|
|
console.error('Error adding link:', error);
|
|
} finally {
|
|
// Re-enable form
|
|
addButton.disabled = false;
|
|
if (btnText) btnText.style.display = 'inline';
|
|
if (btnLoader) btnLoader.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Handle search input
|
|
function handleSearch(e) {
|
|
const query = e.target.value.trim();
|
|
|
|
// Debounce search
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(async () => {
|
|
if (!query) {
|
|
displayLinks(getFilteredLinks());
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/search?q=${encodeURIComponent(query)}`);
|
|
if (!response.ok) throw new Error('Search failed');
|
|
|
|
const filteredLinks = await response.json();
|
|
// Filter by archived status and list filters
|
|
const filtered = filteredLinks.filter(link => {
|
|
const isArchived = link.archived === true;
|
|
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(filtered);
|
|
} catch (error) {
|
|
showMessage('Search failed', 'error');
|
|
console.error('Error searching:', error);
|
|
}
|
|
}, 300);
|
|
}
|
|
|
|
// Handle archive toggle
|
|
function handleToggleArchive() {
|
|
showArchived = !showArchived;
|
|
archiveToggle.classList.toggle('active', showArchived);
|
|
|
|
// Re-filter and display links
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
// Re-run search with new filter
|
|
handleSearch({ target: searchInput });
|
|
} else {
|
|
displayLinks(getFilteredLinks());
|
|
}
|
|
}
|
|
|
|
// Display links
|
|
function displayLinks(links) {
|
|
if (links.length === 0) {
|
|
const filteredCount = getFilteredLinks().length;
|
|
const totalCount = allLinks.length;
|
|
const message = showArchived
|
|
? (totalCount === 0 ? 'Add your first link to get started!' : 'No archived links found.')
|
|
: (totalCount === 0 ? 'Add your first link to get started!' : (filteredCount === 0 ? 'No active links found. Try a different search term or toggle to view archived links.' : 'Try a different search term.'));
|
|
linksContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<p>No links found. ${message}</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
linksContainer.innerHTML = links.map(link => createLinkCard(link)).join('');
|
|
applyLayout(currentLayout);
|
|
|
|
// Add delete event listeners
|
|
document.querySelectorAll('.delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const linkId = e.target.closest('.link-card').dataset.id;
|
|
handleDeleteLink(linkId);
|
|
});
|
|
});
|
|
|
|
// Add archive event listeners
|
|
document.querySelectorAll('.archive-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const linkId = e.target.closest('.link-card').dataset.id;
|
|
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
|
|
function createLinkCard(link) {
|
|
const date = new Date(link.createdAt);
|
|
const formattedDate = date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
|
|
const imageHtml = link.image
|
|
? `<img src="${escapeHtml(link.image)}" alt="${escapeHtml(link.title)}" onerror="this.parentElement.textContent='No image available'">`
|
|
: '<span>No image available</span>';
|
|
|
|
return `
|
|
<div class="link-card" data-id="${link.id}">
|
|
<div class="link-image">
|
|
<a href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-image-link">
|
|
${imageHtml}
|
|
</a>
|
|
</div>
|
|
<div class="link-content">
|
|
<h3 class="link-title">${escapeHtml(link.title)}</h3>
|
|
${link.description ? `<p class="link-description">${escapeHtml(link.description)}</p>` : ''}
|
|
<a href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url">
|
|
${escapeHtml(link.url)}
|
|
</a>
|
|
<div class="link-footer">
|
|
<span class="link-date">${formattedDate}</span>
|
|
<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
|
|
? '<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"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/><path d="M9 12l3 3 3-3"/>'
|
|
: '<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"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>'
|
|
}
|
|
</svg>
|
|
</button>
|
|
<button class="delete-btn" data-tooltip="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"/><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"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Update a single link card in place
|
|
function updateLinkCard(link) {
|
|
const linkCard = document.querySelector(`.link-card[data-id="${link.id}"]`);
|
|
if (!linkCard) return;
|
|
|
|
// Replace the card content
|
|
linkCard.outerHTML = createLinkCard(link);
|
|
|
|
// Re-attach event listeners to the new card
|
|
const newCard = document.querySelector(`.link-card[data-id="${link.id}"]`);
|
|
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));
|
|
}
|
|
if (archiveBtn) {
|
|
archiveBtn.addEventListener('click', () => handleArchiveLink(link.id));
|
|
}
|
|
if (addToListBtn) {
|
|
addToListBtn.addEventListener('click', () => handleAddToLists(link.id));
|
|
}
|
|
}
|
|
}
|
|
|
|
// Remove a single link card
|
|
function removeLinkCard(id) {
|
|
const linkCard = document.querySelector(`.link-card[data-id="${id}"]`);
|
|
if (linkCard) {
|
|
linkCard.remove();
|
|
|
|
// Check if we need to show empty state
|
|
const remainingCards = document.querySelectorAll('.link-card');
|
|
if (remainingCards.length === 0) {
|
|
const filteredCount = getFilteredLinks().length;
|
|
const totalCount = allLinks.length;
|
|
const message = showArchived
|
|
? (totalCount === 0 ? 'Add your first link to get started!' : 'No archived links found.')
|
|
: (totalCount === 0 ? 'Add your first link to get started!' : (filteredCount === 0 ? 'No active links found. Try a different search term or toggle to view archived links.' : 'Try a different search term.'));
|
|
linksContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<p>No links found. ${message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Check if a link should be visible based on current filters
|
|
function shouldLinkBeVisible(link) {
|
|
const isArchived = link.archived === true;
|
|
const matchesArchiveFilter = showArchived ? isArchived : !isArchived;
|
|
|
|
const query = searchInput.value.trim();
|
|
if (query) {
|
|
const queryLower = query.toLowerCase();
|
|
const titleMatch = link.title?.toLowerCase().includes(queryLower);
|
|
const descMatch = link.description?.toLowerCase().includes(queryLower);
|
|
const urlMatch = link.url?.toLowerCase().includes(queryLower);
|
|
const matchesSearch = titleMatch || descMatch || urlMatch;
|
|
return matchesArchiveFilter && matchesSearch;
|
|
}
|
|
|
|
return matchesArchiveFilter;
|
|
}
|
|
|
|
// Handle archive link
|
|
async function handleArchiveLink(id) {
|
|
try {
|
|
const link = allLinks.find(l => l.id === id);
|
|
if (!link) return;
|
|
|
|
const newArchivedStatus = !link.archived;
|
|
|
|
const response = await fetch(`${API_BASE}/${id}/archive`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ archived: newArchivedStatus })
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to archive link');
|
|
|
|
// Update local array
|
|
link.archived = newArchivedStatus;
|
|
|
|
// Update or remove the link card without refreshing the whole list
|
|
if (shouldLinkBeVisible(link)) {
|
|
// Link should still be visible, update it in place
|
|
updateLinkCard(link);
|
|
} else {
|
|
// Link should no longer be visible, remove it
|
|
removeLinkCard(id);
|
|
}
|
|
|
|
showMessage(newArchivedStatus ? 'Link archived successfully' : 'Link unarchived successfully', 'success');
|
|
} catch (error) {
|
|
showMessage('Failed to archive link', 'error');
|
|
console.error('Error archiving link:', error);
|
|
}
|
|
}
|
|
|
|
// Handle delete link
|
|
async function handleDeleteLink(id) {
|
|
if (!confirm('Are you sure you want to delete this link?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to delete link');
|
|
|
|
// Remove from local array
|
|
allLinks = allLinks.filter(link => link.id !== id);
|
|
displayLinks(getFilteredLinks());
|
|
showMessage('Link deleted successfully', 'success');
|
|
} catch (error) {
|
|
showMessage('Failed to delete link', 'error');
|
|
console.error('Error deleting link:', error);
|
|
}
|
|
}
|
|
|
|
// Show toast message
|
|
function showMessage(text, type = 'success') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast toast-${type}`;
|
|
toast.textContent = text;
|
|
|
|
// Add to container
|
|
toastContainer.appendChild(toast);
|
|
|
|
// Trigger animation
|
|
requestAnimationFrame(() => {
|
|
toast.classList.add('show');
|
|
});
|
|
|
|
// Remove after delay
|
|
setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
setTimeout(() => {
|
|
if (toast.parentNode) {
|
|
toast.parentNode.removeChild(toast);
|
|
}
|
|
}, 300); // Wait for fade-out animation
|
|
}, 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');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|