Compare commits
5 Commits
0a986f4293
...
1.0.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 3c372878a3 | |||
| 3378a13fe4 | |||
| 3ab8cdcc37 | |||
| bd4ada7c18 | |||
| 3f0fbed557 |
657
public/app.js
657
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');
|
||||
@@ -13,21 +14,65 @@ 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 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);
|
||||
@@ -109,6 +154,51 @@ function setupMobileAddLink() {
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
@@ -136,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) {
|
||||
@@ -148,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;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -185,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());
|
||||
@@ -222,12 +345,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);
|
||||
@@ -267,6 +399,7 @@ function displayLinks(links) {
|
||||
}
|
||||
|
||||
linksContainer.innerHTML = links.map(link => createLinkCard(link)).join('');
|
||||
applyLayout(currentLayout);
|
||||
|
||||
// Add delete event listeners
|
||||
document.querySelectorAll('.delete-btn').forEach(btn => {
|
||||
@@ -283,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
|
||||
@@ -301,7 +442,9 @@ function createLinkCard(link) {
|
||||
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>
|
||||
@@ -312,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
|
||||
@@ -345,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));
|
||||
@@ -352,6 +506,9 @@ function updateLinkCard(link) {
|
||||
if (archiveBtn) {
|
||||
archiveBtn.addEventListener('click', () => handleArchiveLink(link.id));
|
||||
}
|
||||
if (addToListBtn) {
|
||||
addToListBtn.addEventListener('click', () => handleAddToLists(link.id));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -481,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');
|
||||
|
||||
BIN
public/icon-192.png
Normal file
BIN
public/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
public/icon-512.png
Normal file
BIN
public/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
22
public/icon.svg
Normal file
22
public/icon.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Transparent background -->
|
||||
<rect width="512" height="512" fill="none"/>
|
||||
<!-- Square with gradient, no rounded corners -->
|
||||
<rect x="0" y="0" width="512" height="512" fill="url(#grad)"/>
|
||||
<g transform="translate(256, 256)">
|
||||
<!-- Link icon - two connected circles -->
|
||||
<circle cx="-60" cy="0" r="50" fill="none" stroke="white" stroke-width="40" stroke-linecap="round"/>
|
||||
<circle cx="60" cy="0" r="50" fill="none" stroke="white" stroke-width="40" stroke-linecap="round"/>
|
||||
<!-- Connecting lines -->
|
||||
<line x1="-10" y1="0" x2="10" y2="0" stroke="white" stroke-width="40" stroke-linecap="round"/>
|
||||
<!-- Small detail circles inside -->
|
||||
<circle cx="-60" cy="0" r="20" fill="white" opacity="0.3"/>
|
||||
<circle cx="60" cy="0" r="20" fill="white" opacity="0.3"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -2,8 +2,15 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="description" content="LinkDing - Your Link Collection">
|
||||
<meta name="theme-color" content="#6366f1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="LinkDing">
|
||||
<title>LinkDing - Your Link Collection</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="apple-touch-icon" href="/icon-192.png">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
@@ -22,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"/>
|
||||
@@ -29,6 +46,36 @@
|
||||
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="layout-toggle-wrapper">
|
||||
<button id="layoutToggle" class="layout-toggle-btn" title="Change layout">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7"></rect>
|
||||
<rect x="14" y="3" width="7" height="7"></rect>
|
||||
<rect x="14" y="14" width="7" height="7"></rect>
|
||||
<rect x="3" y="14" width="7" height="7"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="layout-dropdown" id="layoutDropdown">
|
||||
<button class="layout-option" data-layout="masonry">
|
||||
<span>Masonry</span>
|
||||
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="layout-option" data-layout="detail">
|
||||
<span>Detail</span>
|
||||
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="layout-option" data-layout="list">
|
||||
<span>List</span>
|
||||
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="searchToggle" class="search-toggle-btn" title="Toggle search">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
@@ -75,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">
|
||||
|
||||
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "LinkDing",
|
||||
"short_name": "LinkDing",
|
||||
"description": "Your Link Collection",
|
||||
"start_url": "/",
|
||||
"display": "fullscreen",
|
||||
"background_color": "#0f172a",
|
||||
"theme_color": "#6366f1",
|
||||
"orientation": "portrait-primary",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -144,6 +144,103 @@ body {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Layout Toggle Button */
|
||||
.layout-toggle-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-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;
|
||||
}
|
||||
|
||||
.layout-toggle-btn:hover {
|
||||
background: var(--surface-light);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.layout-toggle-btn.active {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.layout-toggle-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Layout Dropdown */
|
||||
.layout-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px var(--shadow-lg);
|
||||
min-width: 140px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-dropdown.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.layout-option {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.625rem 0.875rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.layout-option:hover {
|
||||
background: var(--surface-light);
|
||||
}
|
||||
|
||||
.layout-option.active {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.layout-option .check-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.layout-option.active .check-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem;
|
||||
@@ -546,6 +643,128 @@ body {
|
||||
animation: fadeIn 1s ease-out;
|
||||
}
|
||||
|
||||
/* Layout: Masonry */
|
||||
.links-container.layout-masonry {
|
||||
display: block;
|
||||
column-count: auto;
|
||||
column-width: 280px;
|
||||
column-gap: 1.5rem;
|
||||
animation: fadeIn 1s ease-out;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-image-link {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
max-height: 400px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-content {
|
||||
flex: 0 1 auto;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-title {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-url {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .link-footer {
|
||||
margin-top: auto;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.links-container.layout-masonry .empty-state {
|
||||
column-span: all;
|
||||
}
|
||||
|
||||
/* Layout: Detail (default - current layout) */
|
||||
.links-container.layout-detail {
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
/* Layout: List */
|
||||
.links-container.layout-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-card {
|
||||
flex-direction: row;
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-content {
|
||||
padding: 0.75rem 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-title {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.375rem;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-description {
|
||||
font-size: 0.875rem;
|
||||
-webkit-line-clamp: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-url {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-footer {
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.links-container.layout-list .link-date {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
@@ -582,12 +801,25 @@ body {
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link-image-link {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link-content {
|
||||
@@ -816,6 +1048,14 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layout-toggle-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-dropdown {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.add-link-wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@@ -941,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
130
public/sw.js
Normal file
130
public/sw.js
Normal file
@@ -0,0 +1,130 @@
|
||||
const CACHE_NAME = 'linkding-v2';
|
||||
const urlsToCache = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/styles.css',
|
||||
'/app.js',
|
||||
'/manifest.json',
|
||||
'/icon-192.png',
|
||||
'/icon-512.png'
|
||||
];
|
||||
|
||||
// Install event - cache resources
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then((cache) => {
|
||||
console.log('Opened cache');
|
||||
return cache.addAll(urlsToCache);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Cache install failed:', error);
|
||||
})
|
||||
);
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
// Activate event - clean up old caches
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((cacheNames) => {
|
||||
return Promise.all(
|
||||
cacheNames.map((cacheName) => {
|
||||
if (cacheName !== CACHE_NAME) {
|
||||
console.log('Deleting old cache:', cacheName);
|
||||
return caches.delete(cacheName);
|
||||
}
|
||||
})
|
||||
);
|
||||
}).then(() => {
|
||||
// Claim all clients immediately to ensure new service worker takes control
|
||||
return self.clients.claim();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// 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/')) {
|
||||
event.respondWith(fetch(event.request));
|
||||
return;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// Clone the response
|
||||
const responseToCache = response.clone();
|
||||
|
||||
caches.open(CACHE_NAME)
|
||||
.then((cache) => {
|
||||
cache.put(event.request, responseToCache);
|
||||
});
|
||||
|
||||
return response;
|
||||
})
|
||||
.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
177
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 {
|
||||
|
||||
Reference in New Issue
Block a user