`;
itemPreview = `
`;
}
return `
${displayContent}
Loading activity...
';
}
loading = true;
currentPage = 1;
hasMore = true;
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const res = await fetch(`/activity?json=true&page=1&mode=${mode}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
if (data.success && data.comments && data.comments.length > 0) {
window._sidebarActivityCache = data.comments.map(c => ({
...c,
body: c.content || c.body
}));
hasMore = data.hasMore === true;
renderFromCache();
// Also check after a delay to account for image/emoji loading shifts
setTimeout(checkOverflow, 500);
} else if (container.innerHTML.includes('loading')) {
container.innerHTML = 'No recent activity.
';
hasMore = false;
}
} catch (e) {
console.error("Sidebar Activity: Failed to load activity", e);
if (container.innerHTML.includes('loading')) {
container.innerHTML = 'Failed to load.
';
}
hasMore = false;
} finally {
loading = false;
}
};
const loadMoreActivity = async () => {
const container = document.getElementById('sidebar-activity-container');
if (!container || loading || loadingMore || !hasMore) return;
loadingMore = true;
const nextPage = currentPage + 1;
// Show a subtle loading row at the bottom
const sentinel = document.createElement('div');
sentinel.id = 'sidebar-load-more-sentinel';
sentinel.style.cssText = 'text-align:center;padding:8px 0;font-size:0.78em;color:#666;';
sentinel.textContent = 'Loading…';
container.appendChild(sentinel);
try {
const mode = typeof window.activeMode !== 'undefined' ? window.activeMode : '';
const res = await fetch(`/activity?json=true&page=${nextPage}&mode=${mode}`, {
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
const data = await res.json();
// Remove sentinel before inserting real content
const s = document.getElementById('sidebar-load-more-sentinel');
if (s) s.remove();
if (data.success && data.comments && data.comments.length > 0) {
currentPage = nextPage;
hasMore = data.hasMore === true;
// Append only comments not already in the cache
const existingIds = new Set(window._sidebarActivityCache.map(c => String(c.id)));
const newComments = data.comments.filter(c => !existingIds.has(String(c.id))).map(c => ({
...c,
body: c.content || c.body
}));
window._sidebarActivityCache.push(...newComments);
// Append new items to DOM
let html = '';
newComments.forEach(c => { html += renderActivityItem(c); });
if (html) {
const temp = document.createElement('div');
if (window.Sanitizer) {
temp.innerHTML = window.Sanitizer.clean(html);
} else {
temp.innerHTML = html;
}
while (temp.firstElementChild) {
container.appendChild(temp.firstElementChild);
}
// Keep the IO sentinel at the very end so it triggers on the next scroll
if (ioSentinel) container.appendChild(ioSentinel);
checkOverflow();
}
} else {
hasMore = false;
// Show end-of-feed indicator
const end = document.createElement('div');
end.style.cssText = 'text-align:center;padding:8px 0;font-size:0.75em;color:#444;';
end.textContent = '─ end of activity ─';
container.appendChild(end);
}
} catch (e) {
console.error("Sidebar Activity: Failed to load more", e);
const s = document.getElementById('sidebar-load-more-sentinel');
if (s) s.remove();
} finally {
loadingMore = false;
}
};
const handleNewActivity = (data) => {
const container = document.getElementById('sidebar-activity-container');
// 1. Deduplicate: check if this comment ID is already in the cache
if (window._sidebarActivityCache.some(c => parseInt(c.id) === parseInt(data.id))) {
console.log("Sidebar Activity: Duplicate comment ignored", data.id);
return;
}
// 2. Update cache (prepend, no hard cap — infinite scroll handles depth)
const newItem = {
...data,
body: data.body || data.content,
timeago: (window.f0ckI18n && window.f0ckI18n.timeago_just_now) || 'just now'
};
window._sidebarActivityCache.unshift(newItem);
// Update DOM if visible
if (container) {
const html = renderActivityItem(newItem);
const temp = document.createElement('div');
if (window.Sanitizer) {
temp.innerHTML = window.Sanitizer.clean(html);
} else {
temp.innerHTML = html;
}
const node = temp.firstElementChild;
if (node) {
node.classList.add('new-item-fade');
container.prepend(node);
checkOverflow();
}
}
};
const init = async () => {
await loadEmojis();
loadActivity();
};
// Listen for live activity from f0ckm.js
document.addEventListener('f0ck:activityReceived', (e) => {
console.log("Sidebar Activity: Live update received", e.detail);
handleNewActivity(e.detail);
});
const handleLiveEdit = (data) => {
const container = document.getElementById('sidebar-activity-container');
// 1. Update cache
if (window._sidebarActivityCache) {
const comment = window._sidebarActivityCache.find(c => String(c.id) === String(data.comment_id));
if (comment) {
comment.content = data.content;
comment.body = data.content;
}
}
// 2. Update DOM if visible
if (container) {
const el = document.getElementById('sc' + data.comment_id);
if (el) {
const inner = el.querySelector('.comment-content-inner');
if (inner) {
inner.innerHTML = renderCommentContent(data.content);
el.classList.remove('new-item-fade');
void el.offsetWidth;
el.classList.add('new-item-fade');
checkOverflow();
}
}
}
};
window.addEventListener('f0ck:comment_edited', (e) => {
console.log("Sidebar Activity: Live edit received", e.detail);
handleLiveEdit(e.detail);
});
let lastBoundMode = typeof window.activeMode !== 'undefined' ? window.activeMode : null;
// Handle AJAX item loads
document.addEventListener('f0ck:contentLoaded', () => {
const currentMode = typeof window.activeMode !== 'undefined' ? window.activeMode : null;
const modeChanged = lastBoundMode !== null && lastBoundMode !== currentMode;
lastBoundMode = currentMode;
console.log("Sidebar Activity: Page transition detected", modeChanged ? "(Mode changed)" : "");
if (modeChanged) {
window._sidebarActivityCache = [];
currentPage = 1;
hasMore = true;
loadActivity(false); // Force reload with loading state
} else {
// Immediately render from cache to avoid flicker
renderFromCache();
// Background sync
loadActivity(true);
}
});
// Sync sidebar and comments-list layout on initial page load (Legacy View Only)
if (typeof syncSidebarAndComments === 'function') {
syncSidebarAndComments();
}
// Handle explicit mode changes (e.g. from item page where full transition doesn't occur)
document.addEventListener('f0ck:modeChanged', (e) => {
console.log("Sidebar Activity: Mode change detected", e.detail.mode);
lastBoundMode = e.detail.mode;
window._sidebarActivityCache = [];
currentPage = 1;
hasMore = true;
loadActivity(false);
});
// When the current user posts a comment, silently refresh sidebar to show it
document.addEventListener('f0ck:commentPosted', () => {
console.log("Sidebar Activity: Own comment posted, refreshing...");
loadActivity(true);
});
// Infinite scroll: load older comments when scrolling near the bottom
const bindScrollListener = () => {
const container = document.getElementById('sidebar-activity-container');
if (!container) return;
// Use IntersectionObserver if available (performant), fallback to scroll event
if (typeof IntersectionObserver !== 'undefined') {
// Create the sentinel once at module level so re-renders can re-append the same node
if (!ioSentinel) {
ioSentinel = document.createElement('div');
ioSentinel.id = 'sidebar-io-sentinel';
ioSentinel.style.height = '1px';
container.appendChild(ioSentinel);
}
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
loadMoreActivity();
}
}, { root: container, rootMargin: '0px 0px 80px 0px', threshold: 0 });
observer.observe(ioSentinel);
} else {
container.addEventListener('scroll', () => {
if (loading || loadingMore || !hasMore) return;
const nearBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 100;
if (nearBottom) loadMoreActivity();
}, { passive: true });
}
};
// Initial load
const _origInit = init;
const initWithScroll = async () => {
await _origInit();
bindScrollListener();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initWithScroll);
} else {
initWithScroll();
}
// Live updates are handled via SSE (f0ck:activityReceived event)
})();