116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
// Embermarks - Shared UI Logic
|
|
|
|
// Get favicon URL for a bookmark
|
|
function getFaviconUrl(url) {
|
|
try {
|
|
const urlObj = new URL(url);
|
|
return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}&sz=32`;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Format days ago
|
|
function formatDaysAgo(days) {
|
|
if (days === null) return "Unknown";
|
|
if (days === 0) return "Today";
|
|
if (days === 1) return "Yesterday";
|
|
if (days < 30) return `${days}d ago`;
|
|
if (days < 365) return `${Math.floor(days / 30)}mo ago`;
|
|
return `${Math.floor(days / 365)}y ago`;
|
|
}
|
|
|
|
// Escape HTML
|
|
function escapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Create a bookmark card element
|
|
function createBookmarkCard(bookmark) {
|
|
const card = document.createElement("a");
|
|
card.className = "bookmark-card";
|
|
card.href = bookmark.url;
|
|
card.target = "_blank";
|
|
card.rel = "noopener";
|
|
|
|
const faviconUrl = getFaviconUrl(bookmark.url);
|
|
|
|
card.innerHTML = `
|
|
<div class="bookmark-favicon">
|
|
${faviconUrl ? `<img src="${faviconUrl}" alt="">` : "🔖"}
|
|
</div>
|
|
<div class="bookmark-info">
|
|
<div class="bookmark-title" title="${escapeHtml(bookmark.title)}">${escapeHtml(bookmark.title)}</div>
|
|
<div class="bookmark-meta">
|
|
${bookmark.visitCount} visit${bookmark.visitCount !== 1 ? "s" : ""} · Added ${formatDaysAgo(bookmark.daysSinceAdded)}
|
|
</div>
|
|
${bookmark.path ? `<div class="bookmark-folder">${escapeHtml(bookmark.path)}</div>` : ""}
|
|
</div>
|
|
`;
|
|
|
|
return card;
|
|
}
|
|
|
|
// Show empty state
|
|
function showEmptyState(container, reason = "none") {
|
|
const messages = {
|
|
none: {
|
|
icon: "✓",
|
|
title: "No forgotten bookmarks",
|
|
text: "You're on top of things!",
|
|
},
|
|
allDismissed: {
|
|
icon: "✓",
|
|
title: "All caught up",
|
|
text: "Refresh to see more",
|
|
},
|
|
};
|
|
|
|
const msg = messages[reason] || messages.none;
|
|
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="icon">${msg.icon}</div>
|
|
<h2>${msg.title}</h2>
|
|
<p>${msg.text}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Show loading state
|
|
function showLoading(container) {
|
|
container.innerHTML = '<div class="loading"></div>';
|
|
}
|
|
|
|
// Load and display bookmarks
|
|
async function loadBookmarks(container) {
|
|
showLoading(container);
|
|
|
|
try {
|
|
const bookmarks = await browser.runtime.sendMessage({
|
|
action: "getForgottenBookmarks",
|
|
});
|
|
|
|
container.innerHTML = "";
|
|
|
|
if (!bookmarks || bookmarks.length === 0) {
|
|
showEmptyState(container, "none");
|
|
return;
|
|
}
|
|
|
|
for (const bookmark of bookmarks) {
|
|
container.appendChild(createBookmarkCard(bookmark));
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load bookmarks:", error);
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="icon">!</div>
|
|
<h2>Oops</h2>
|
|
<p>Failed to load bookmarks</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|