1a17bef1ac
Task 1.2: Append-only rendering for notifications page
- Extracted buildNotificationRow(item) helper from renderNotifications()
- Added prependNotificationRow(item) with sorted insertion by created_at
- addNotificationFromEvent uses prepend when DOM has children
Task 1.3: Fix notification document.click listener leak
- Removed per-row document.addEventListener('click') that leaked on every render
- Added single delegated click listener in main() using .notif-menu-panel class
- Menu panels still close when clicking outside .notif-right
Task 1.4: Cap posts[] and postIds with rolling eviction
- Added MAX_STORED_POSTS=500 constant to feed.html and post.html
- Added prunePostsArray() that sorts, slices, rebuilds postIds/renderedPostIds
- Called in upsertFeedPost/upsertPost with +50 batch threshold
- post.html skips pruning in event mode
Task 1.5: Cap notificationsById/unreadNotificationsById with periodic pruning
- Added MAX_STORED_NOTIFICATIONS=500, MAX_POST_IMAGE_CACHE=200
- Added pruneNotificationMaps() that prunes both Maps and LRU-caps postImageCache
- Called in addNotificationFromEvent, hydrateNotificationsFromCache/Relays
Updated plan checklist marking all Phase 1 tasks complete.
816 lines
26 KiB
HTML
816 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<html lang="en" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>FEED</title>
|
|
|
|
<link rel="stylesheet" href="./css/client.css" />
|
|
<link rel="stylesheet" href="./css/post-composer.css" />
|
|
<link rel="stylesheet" href="./css/dot-menu.css" />
|
|
|
|
<script>
|
|
(function () {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark') {
|
|
document.documentElement.classList.add('dark-mode');
|
|
if (document.body) document.body.classList.add('dark-mode');
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="./favicon/favicon-dots2.ico" />
|
|
<script src="./js/vendor/svg.min.js"></script>
|
|
|
|
<style>
|
|
#divBody {
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: center !important;
|
|
justify-content: flex-start !important;
|
|
align-content: flex-start !important;
|
|
gap: 10px;
|
|
overflow-y: auto;
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
#divHint,
|
|
#divFeed,
|
|
#btnSeeMore {
|
|
width: 80%;
|
|
min-width: 300px;
|
|
max-width: 700px;
|
|
}
|
|
|
|
#divHint {
|
|
text-align: center;
|
|
color: var(--muted-color);
|
|
font-size: 80%;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#divFeed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#btnSeeMore {
|
|
display: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
.divPostItem .post-composer-wrapper {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="divSvgHam" class="divHeaderButtons"></div>
|
|
|
|
<div id="divHeader">
|
|
<div id="divHeaderFlexLeft"></div>
|
|
<div id="divHeaderFlexCenter">
|
|
<div class="divHeaderText">FEED</div>
|
|
</div>
|
|
<div id="divHeaderFlexRight"></div>
|
|
</div>
|
|
|
|
<div id="divBody">
|
|
<div id="divHint">Loading follows…</div>
|
|
<div id="divFeed"></div>
|
|
<button id="btnSeeMore" class="btn">See More</button>
|
|
</div>
|
|
|
|
<div id="divFooter">
|
|
<div id="divFooterLeft" class="divFooterBox"></div>
|
|
<div id="divFooterCenter" class="divFooterBox"></div>
|
|
<div id="divFooterRight" class="divFooterBox"></div>
|
|
<div id="divFooterBalance" class="divFooterBox">0 sats</div>
|
|
</div>
|
|
|
|
<div id="divSideNav">
|
|
<div id="divSideNavHeader"></div>
|
|
<div id="divSideNavBody">
|
|
<div id="divFiles"></div>
|
|
<div id="divFeedSettings" class="sidenavSection">
|
|
<div class="sidenavSectionTitle">Feed</div>
|
|
<label class="sidenavRowToggle" for="chkAutoplayVideos">
|
|
<span>Autoplay videos</span>
|
|
<input id="chkAutoplayVideos" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="divAiSection" class="sidenavSection">
|
|
<div id="divAiSectionTitle" class="sidenavSectionTitle">AI</div>
|
|
<div id="divAiList" class="sidenavSectionList">
|
|
<div id="divAiProvidersList">No saved providers yet.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="divRelaySection">
|
|
<div id="divRelaySectionTitle">リレー</div>
|
|
<div id="divRelayList">Loading relays...</div>
|
|
</div>
|
|
|
|
<div id="divBlossomSection">
|
|
<div id="divBlossomSectionTitle">ブロッサム</div>
|
|
<div id="divBlossomList">Loading blossom servers...</div>
|
|
</div>
|
|
|
|
<div id="divVersionBar">
|
|
<span id="versionDisplay">loading...</span>
|
|
<div id="divVersionBarButtons">
|
|
<button id="themeToggleButton" title="Toggle Dark/Light Mode">
|
|
<div id="themeToggleHamburgerContainer"></div>
|
|
</button>
|
|
<button id="logoutButton" title="Logout">
|
|
<div id="logoutHamburgerContainer"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./nostr.bundle.js"></script>
|
|
<script src="/nostr-login-lite/nostr-lite.js"></script>
|
|
|
|
<script type="module">
|
|
import {
|
|
initNDKPage,
|
|
getPubkey,
|
|
injectHeaderAvatar,
|
|
subscribe,
|
|
disconnect,
|
|
getVersion,
|
|
queryCache,
|
|
ndkFetchEvents,
|
|
fetchCachedProfile,
|
|
storeProfile,
|
|
publishEvent,
|
|
walletPayInvoice,
|
|
walletSendNutzap,
|
|
walletFetchMintList,
|
|
walletGetBalance,
|
|
walletGetMints,
|
|
getRelayData,
|
|
getUserSettings,
|
|
patchUserSettings,
|
|
onUserSettings,
|
|
ensureMuteListLoaded,
|
|
isEventMuted,
|
|
addMute,
|
|
warmOutbox
|
|
} from './js/init-ndk.mjs';
|
|
import { HamburgerMorphing } from './hamburger_morphing/hamburger.mjs';
|
|
import { initFooterRelayStatus, updateFooterRelayStatus, initSidenavRelaySection, updateSidenavRelaySection, setRelayActivityState } from './js/relay-ui.mjs';
|
|
import { initBlossomSection, updateBlossomSection } from './js/blossom-ui.mjs';
|
|
|
|
import { initAiSectionWithLocalConfig } from './js/ai-ui.mjs';
|
|
import { initPostCards } from './js/post-interactions2.mjs';
|
|
import { mountComposer } from './js/post-composer.mjs';
|
|
|
|
const INITIAL_POSTS_LOAD = 10;
|
|
const SEE_MORE_INCREMENT = 20;
|
|
const MIN_BOOTSTRAP_POSTS = 10;
|
|
const FEED_BOOTSTRAP_WINDOWS_SECONDS = [3600, 6 * 3600, 24 * 3600, 7 * 24 * 3600, 30 * 24 * 3600];
|
|
const FEED_BOOTSTRAP_WINDOW_LIMIT = 120;
|
|
const MAX_STORED_POSTS = 500;
|
|
|
|
let currentPubkey = null;
|
|
let updateIntervalId = null;
|
|
|
|
let unsubscribeUserSettings = null;
|
|
|
|
let hamburgerInstance = null;
|
|
let logoutHamburger = null;
|
|
let themeToggleHamburger = null;
|
|
let isDarkMode = false;
|
|
let isNavOpen = false;
|
|
|
|
const posts = [];
|
|
const postIds = new Set();
|
|
const renderedPostIds = new Set();
|
|
let displayCount = INITIAL_POSTS_LOAD;
|
|
|
|
let followedPubkeys = [];
|
|
const feedPubkeys = new Set();
|
|
|
|
const divBody = document.getElementById('divBody');
|
|
const divSideNav = document.getElementById('divSideNav');
|
|
const divFooterRight = document.getElementById('divFooterRight');
|
|
const divFeed = document.getElementById('divFeed');
|
|
const divHint = document.getElementById('divHint');
|
|
const btnSeeMore = document.getElementById('btnSeeMore');
|
|
const chkAutoplayVideos = document.getElementById('chkAutoplayVideos');
|
|
|
|
let autoplayVideosEnabled = false;
|
|
let liveFeedSubscriptionKey = '';
|
|
|
|
const inlineComposerInstances = new Map(); // postId -> { hostEl, instance, tags }
|
|
|
|
let isBootstrappingFeed = false;
|
|
let hasBootstrappedFeed = false;
|
|
const bufferedFeedEvents = [];
|
|
|
|
function toNostrNoteRef(postId) {
|
|
try {
|
|
return window?.NostrTools?.nip19?.noteEncode
|
|
? window.NostrTools.nip19.noteEncode(postId)
|
|
: postId;
|
|
} catch (_) {
|
|
return postId;
|
|
}
|
|
}
|
|
|
|
function focusInlineComposer(hostEl, content = '') {
|
|
if (!hostEl) return false;
|
|
hostEl.innerText = content || '';
|
|
hostEl.focus();
|
|
document.dispatchEvent(new Event('selectionchange'));
|
|
hostEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
window.requestAnimationFrame(() => {
|
|
hostEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
});
|
|
return true;
|
|
}
|
|
|
|
function getOrCreateInlineComposer(postId, postEl) {
|
|
if (!postId || !postEl) return null;
|
|
|
|
const existing = inlineComposerInstances.get(postId);
|
|
if (existing?.hostEl?.isConnected && existing?.instance) {
|
|
return existing;
|
|
}
|
|
|
|
const hostEl = document.createElement('div');
|
|
hostEl.className = 'inlinePostComposerInput';
|
|
hostEl.dataset.inlineComposerFor = postId;
|
|
postEl.appendChild(hostEl);
|
|
|
|
const entry = {
|
|
hostEl,
|
|
tags: [],
|
|
instance: null
|
|
};
|
|
|
|
const instance = mountComposer(hostEl, {
|
|
currentPubkey,
|
|
followedProfiles: [],
|
|
showUploadIcon: true,
|
|
showPreview: true,
|
|
autoHideOnSubmit: true,
|
|
hideOnEscape: true,
|
|
onSubmit: async (content) => {
|
|
const text = String(content || '').trim();
|
|
if (!text) return;
|
|
|
|
await publishEvent({
|
|
kind: 1,
|
|
content: text,
|
|
tags: entry.tags,
|
|
created_at: Math.floor(Date.now() / 1000)
|
|
});
|
|
}
|
|
});
|
|
|
|
entry.instance = instance;
|
|
inlineComposerInstances.set(postId, entry);
|
|
return entry;
|
|
}
|
|
|
|
function handleComposerCommentIntent({ postId }) {
|
|
if (!postId) return false;
|
|
window.open('./post-feed.html?event=' + encodeURIComponent(postId), '_blank');
|
|
return true;
|
|
}
|
|
|
|
function handleComposerQuoteIntent({ postId, postPubkey }) {
|
|
const postEl = document.querySelector(`.divPostItem[data-post-id="${postId}"]`);
|
|
if (!postEl) return false;
|
|
|
|
const noteRef = toNostrNoteRef(postId);
|
|
const entry = getOrCreateInlineComposer(postId, postEl);
|
|
if (!entry) return false;
|
|
entry.tags = [
|
|
['e', postId, '', 'mention'],
|
|
['p', postPubkey],
|
|
['q', postId]
|
|
];
|
|
if (entry.instance?.show) entry.instance.show();
|
|
return focusInlineComposer(entry.hostEl, `nostr:${noteRef}`);
|
|
}
|
|
|
|
async function handleMuteIntent({ eventData }) {
|
|
const targetPubkey = String(eventData?.pubkey || '').trim();
|
|
if (!targetPubkey || targetPubkey === currentPubkey) return;
|
|
|
|
const ok = window.confirm(`Mute ${targetPubkey.slice(0, 8)}…${targetPubkey.slice(-4)}?`);
|
|
if (!ok) return;
|
|
|
|
await addMute('p', targetPubkey, false);
|
|
|
|
for (let i = posts.length - 1; i >= 0; i -= 1) {
|
|
if (posts[i]?.pubkey === targetPubkey) {
|
|
postIds.delete(posts[i]?.id);
|
|
posts.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
renderFeed();
|
|
}
|
|
|
|
const cards = initPostCards({
|
|
subscribe,
|
|
publishEvent,
|
|
getPubkey,
|
|
ndkFetchEvents,
|
|
queryCache,
|
|
fetchCachedProfile,
|
|
storeProfile,
|
|
walletPayInvoice,
|
|
walletSendNutzap,
|
|
walletFetchMintList,
|
|
walletGetBalance,
|
|
walletGetMints,
|
|
getRelayData,
|
|
getUserSettings,
|
|
patchUserSettings,
|
|
onCommentIntent: handleComposerCommentIntent,
|
|
onQuoteIntent: handleComposerQuoteIntent,
|
|
onMuteIntent: handleMuteIntent
|
|
});
|
|
|
|
// Disable inline comment rendering — the new feed shows posts only.
|
|
// Comments are viewed on the post-feed.html thread page (new tab).
|
|
if (typeof cards.setCommentsVisible === 'function') {
|
|
cards.setCommentsVisible(false);
|
|
}
|
|
|
|
function initHamburgerMenu() {
|
|
hamburgerInstance = new HamburgerMorphing('#divSvgHam', {
|
|
foreground: 'var(--primary-color)',
|
|
background: 'var(--secondary-color)',
|
|
hover: 'var(--accent-color)'
|
|
});
|
|
hamburgerInstance.animateTo('burger');
|
|
}
|
|
|
|
function openNav() {
|
|
divSideNav.style.zIndex = 3;
|
|
divSideNav.style.width = 'clamp(400px, 50vw, 600px)';
|
|
isNavOpen = true;
|
|
if (hamburgerInstance) hamburgerInstance.animateTo('arrow_left');
|
|
|
|
if (!logoutHamburger) {
|
|
logoutHamburger = new HamburgerMorphing('#logoutHamburgerContainer', {
|
|
size: 24,
|
|
foreground: 'var(--primary-color)',
|
|
background: 'var(--secondary-color)',
|
|
hover: 'var(--accent-color)'
|
|
});
|
|
logoutHamburger.animateTo('x');
|
|
}
|
|
|
|
if (!themeToggleHamburger) {
|
|
themeToggleHamburger = new HamburgerMorphing('#themeToggleHamburgerContainer', {
|
|
size: 24,
|
|
foreground: 'var(--primary-color)',
|
|
background: 'var(--secondary-color)',
|
|
hover: 'var(--accent-color)'
|
|
});
|
|
const savedTheme = localStorage.getItem('theme');
|
|
isDarkMode = savedTheme === 'dark' || document.body.classList.contains('dark-mode');
|
|
themeToggleHamburger.animateTo(isDarkMode ? 'moon' : 'circle');
|
|
}
|
|
}
|
|
|
|
function closeNav() {
|
|
divSideNav.style.width = '0vw';
|
|
divSideNav.style.zIndex = -1;
|
|
isNavOpen = false;
|
|
if (hamburgerInstance) hamburgerInstance.animateTo('burger');
|
|
}
|
|
|
|
function toggleNav() {
|
|
isNavOpen ? closeNav() : openNav();
|
|
}
|
|
|
|
function isOriginalPost(event) {
|
|
const eTags = event.tags?.filter(t => t[0] === 'e') || [];
|
|
if (eTags.length === 0) return true;
|
|
return eTags.every(t => t[3] === 'mention');
|
|
}
|
|
|
|
function applyVideoAutoplaySetting(enabled) {
|
|
autoplayVideosEnabled = !!enabled;
|
|
if (chkAutoplayVideos) chkAutoplayVideos.checked = autoplayVideosEnabled;
|
|
|
|
const videoEls = Array.from(divFeed.querySelectorAll('video'));
|
|
videoEls.forEach((videoEl) => {
|
|
videoEl.controls = true;
|
|
videoEl.playsInline = true;
|
|
videoEl.setAttribute('playsinline', '');
|
|
videoEl.preload = 'metadata';
|
|
|
|
if (autoplayVideosEnabled) {
|
|
videoEl.autoplay = true;
|
|
videoEl.muted = true;
|
|
videoEl.setAttribute('autoplay', '');
|
|
videoEl.setAttribute('muted', '');
|
|
const playPromise = videoEl.play?.();
|
|
if (playPromise?.catch) playPromise.catch(() => {});
|
|
} else {
|
|
videoEl.autoplay = false;
|
|
videoEl.muted = false;
|
|
videoEl.removeAttribute('autoplay');
|
|
videoEl.removeAttribute('muted');
|
|
}
|
|
});
|
|
}
|
|
|
|
function applySettings(settings) {
|
|
const nextAutoplayEnabled = !!settings?.feed?.videoAutoplay;
|
|
applyVideoAutoplaySetting(nextAutoplayEnabled);
|
|
}
|
|
|
|
async function persistAutoplaySetting(enabled) {
|
|
try {
|
|
await patchUserSettings({
|
|
feed: {
|
|
videoAutoplay: !!enabled
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.warn('[feed.html] Failed to persist feed autoplay setting:', error?.message || error);
|
|
}
|
|
}
|
|
|
|
function prunePostsArray() {
|
|
posts.sort((a, b) => (b.created_at || 0) - (a.created_at || 0));
|
|
if (posts.length > MAX_STORED_POSTS) {
|
|
posts.length = MAX_STORED_POSTS;
|
|
postIds.clear();
|
|
posts.forEach((p) => postIds.add(p.id));
|
|
for (const id of Array.from(renderedPostIds)) {
|
|
if (!postIds.has(id)) renderedPostIds.delete(id);
|
|
}
|
|
}
|
|
}
|
|
|
|
function upsertFeedPost(evt) {
|
|
if (!evt?.id || postIds.has(evt.id) || !isOriginalPost(evt)) return false;
|
|
if (isEventMuted(evt)) return false;
|
|
postIds.add(evt.id);
|
|
posts.push(evt);
|
|
if (posts.length > MAX_STORED_POSTS + 50) prunePostsArray();
|
|
return true;
|
|
}
|
|
|
|
function renderFeed() {
|
|
posts.sort((a, b) => (b.created_at || 0) - (a.created_at || 0));
|
|
const toShow = posts.slice(0, displayCount);
|
|
|
|
divFeed.innerHTML = '';
|
|
renderedPostIds.clear();
|
|
|
|
toShow.forEach((post) => {
|
|
const postEl = cards.createCard(post, { currentPubkey, autoWire: false, autoplayVideo: autoplayVideosEnabled });
|
|
divFeed.appendChild(postEl);
|
|
renderedPostIds.add(post.id);
|
|
});
|
|
|
|
cards.wireInteractions(toShow.map(p => p.id), { currentPubkey });
|
|
|
|
btnSeeMore.style.display = posts.length > displayCount ? 'block' : 'none';
|
|
divHint.textContent = followedPubkeys.length > 0
|
|
? `${posts.length} posts from ${followedPubkeys.length} follows`
|
|
: 'Follow users to populate your feed.';
|
|
divFooterRight.textContent = `${posts.length} posts`;
|
|
}
|
|
|
|
function prependPostCard(post) {
|
|
if (!post?.id || renderedPostIds.has(post.id)) return false;
|
|
|
|
// If feed is empty or not yet rendered, fall back to full rebuild.
|
|
if (divFeed.children.length === 0 || renderedPostIds.size === 0) {
|
|
renderFeed();
|
|
return false;
|
|
}
|
|
|
|
const postCreatedAt = post.created_at || 0;
|
|
|
|
// Find the correct insertion point by scanning visible children's created_at.
|
|
// Posts are displayed newest-first, so we insert before the first child
|
|
// that is older than (or equal to) the new post.
|
|
const postEl = cards.createCard(post, { currentPubkey, autoWire: false, autoplayVideo: autoplayVideosEnabled });
|
|
let inserted = false;
|
|
|
|
for (const child of divFeed.children) {
|
|
const childId = child.getAttribute('data-post-id');
|
|
if (!childId) continue;
|
|
const childPost = posts.find((p) => p.id === childId);
|
|
if (!childPost) continue;
|
|
const childCreatedAt = childPost.created_at || 0;
|
|
if (postCreatedAt >= childCreatedAt) {
|
|
divFeed.insertBefore(postEl, child);
|
|
inserted = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!inserted) {
|
|
// Post is older than all visible posts — append at the bottom.
|
|
divFeed.appendChild(postEl);
|
|
}
|
|
|
|
renderedPostIds.add(post.id);
|
|
cards.wireInteractions([post.id], { currentPubkey });
|
|
|
|
// Trim DOM to displayCount.
|
|
while (divFeed.children.length > displayCount) {
|
|
const lastChild = divFeed.lastElementChild;
|
|
if (!lastChild) break;
|
|
const removedId = lastChild.getAttribute('data-post-id');
|
|
if (removedId) renderedPostIds.delete(removedId);
|
|
divFeed.removeChild(lastChild);
|
|
}
|
|
|
|
btnSeeMore.style.display = posts.length > displayCount ? 'block' : 'none';
|
|
divHint.textContent = followedPubkeys.length > 0
|
|
? `${posts.length} posts from ${followedPubkeys.length} follows`
|
|
: 'Follow users to populate your feed.';
|
|
divFooterRight.textContent = `${posts.length} posts`;
|
|
|
|
return true;
|
|
}
|
|
|
|
async function fetchFeedWindow(authors, { since, limit = FEED_BOOTSTRAP_WINDOW_LIMIT, renderAfterCache = false } = {}) {
|
|
if (!Array.isArray(authors) || authors.length === 0) return;
|
|
const filters = { kinds: [1], authors, limit };
|
|
if (typeof since === 'number' && Number.isFinite(since) && since > 0) {
|
|
filters.since = since;
|
|
}
|
|
|
|
const cached = await queryCache(filters).catch(() => []);
|
|
cached.forEach((evt1) => {
|
|
upsertFeedPost(evt1);
|
|
});
|
|
|
|
if (renderAfterCache && posts.length > 0) {
|
|
renderFeed();
|
|
}
|
|
|
|
void ndkFetchEvents(filters).then((fresh) => {
|
|
(Array.isArray(fresh) ? fresh : []).forEach((evt1) => {
|
|
upsertFeedPost(evt1);
|
|
});
|
|
// Only do a full re-render if the feed hasn't been rendered yet.
|
|
// If the feed is already rendered, the posts are in the array and
|
|
// will appear when the user clicks "See More" or on next full render.
|
|
// This prevents the relay fetch callback from wiping prepended live posts.
|
|
if (posts.length > 0 && renderedPostIds.size === 0) {
|
|
renderFeed();
|
|
}
|
|
}).catch(() => {});
|
|
}
|
|
|
|
async function bootstrapFeedPosts(authors) {
|
|
if (!Array.isArray(authors) || authors.length === 0) {
|
|
hasBootstrappedFeed = true;
|
|
renderFeed();
|
|
return;
|
|
}
|
|
|
|
isBootstrappingFeed = true;
|
|
const now = Math.floor(Date.now() / 1000);
|
|
|
|
await Promise.allSettled(
|
|
FEED_BOOTSTRAP_WINDOWS_SECONDS.map((windowSeconds) =>
|
|
fetchFeedWindow(authors, {
|
|
since: now - windowSeconds,
|
|
limit: FEED_BOOTSTRAP_WINDOW_LIMIT,
|
|
renderAfterCache: true
|
|
})
|
|
)
|
|
);
|
|
|
|
if (posts.length < MIN_BOOTSTRAP_POSTS) {
|
|
await fetchFeedWindow(authors, {
|
|
since: 0,
|
|
limit: FEED_BOOTSTRAP_WINDOW_LIMIT * 2,
|
|
renderAfterCache: true
|
|
});
|
|
}
|
|
|
|
bufferedFeedEvents.forEach((evt1) => {
|
|
if (feedPubkeys.has(evt1.pubkey)) {
|
|
upsertFeedPost(evt1);
|
|
}
|
|
});
|
|
bufferedFeedEvents.length = 0;
|
|
|
|
isBootstrappingFeed = false;
|
|
hasBootstrappedFeed = true;
|
|
renderFeed();
|
|
}
|
|
|
|
function ensureLiveFeedSubscription() {
|
|
const authors = Array.from(feedPubkeys).filter(Boolean);
|
|
if (authors.length === 0) return;
|
|
|
|
const key = authors.slice().sort().join(',');
|
|
if (key === liveFeedSubscriptionKey) return;
|
|
|
|
const newestKnown = posts.reduce((max, p) => Math.max(max, p?.created_at || 0), 0);
|
|
const now = Math.floor(Date.now() / 1000);
|
|
const since = newestKnown > 0 ? Math.max(0, newestKnown - 30) : (now - 3600);
|
|
|
|
// NDK.subscribe already calls outboxTracker.trackUsers internally,
|
|
// so no explicit warmOutbox call is needed here.
|
|
|
|
subscribe(
|
|
{ kinds: [1], authors, since },
|
|
{ closeOnEose: false, cacheUsage: 'CACHE_FIRST' }
|
|
);
|
|
|
|
liveFeedSubscriptionKey = key;
|
|
console.log('[feed.html] Live feed subscription active', { authors: authors.length, since });
|
|
}
|
|
|
|
async function ingestContactList(evt) {
|
|
if (!evt || evt.kind !== 3 || evt.pubkey !== currentPubkey) return;
|
|
const pTags = evt.tags?.filter(tag => tag[0] === 'p' && tag[1]) || [];
|
|
followedPubkeys = pTags.map(tag => tag[1]);
|
|
|
|
const newAuthors = followedPubkeys.filter((pk) => !feedPubkeys.has(pk));
|
|
newAuthors.forEach((pk) => feedPubkeys.add(pk));
|
|
|
|
ensureLiveFeedSubscription();
|
|
|
|
const allAuthors = Array.from(feedPubkeys);
|
|
|
|
if (!hasBootstrappedFeed) {
|
|
// Pre-warm the outbox tracker so NDK knows each follow's write relays
|
|
// before the short-lived bootstrap fetchEvents calls fire.
|
|
try {
|
|
await warmOutbox(followedPubkeys);
|
|
} catch (e) {
|
|
console.warn('[feed.html] warmOutbox failed (non-blocking):', e?.message || e);
|
|
}
|
|
await bootstrapFeedPosts(allAuthors);
|
|
return;
|
|
}
|
|
|
|
if (newAuthors.length > 0) {
|
|
// NDK's fetchEvents/subscribe already calls outboxTracker.trackUsers
|
|
// internally for author-based filters, so no explicit warmOutbox needed.
|
|
try {
|
|
await fetchFeedWindow(newAuthors, { limit: INITIAL_POSTS_LOAD });
|
|
renderFeed();
|
|
} catch (_) {
|
|
renderFeed();
|
|
}
|
|
} else {
|
|
renderFeed();
|
|
}
|
|
}
|
|
|
|
async function logout() {
|
|
if (updateIntervalId) {
|
|
clearInterval(updateIntervalId);
|
|
updateIntervalId = null;
|
|
}
|
|
cards.destroy();
|
|
disconnect();
|
|
if (window.NOSTR_LOGIN_LITE?.logout) {
|
|
await window.NOSTR_LOGIN_LITE.logout();
|
|
}
|
|
if (unsubscribeUserSettings) {
|
|
unsubscribeUserSettings();
|
|
unsubscribeUserSettings = null;
|
|
}
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
location.reload(true);
|
|
}
|
|
|
|
async function updateFooter() {
|
|
try {
|
|
await updateFooterRelayStatus();
|
|
await updateSidenavRelaySection();
|
|
await updateBlossomSection();
|
|
} catch (_) {}
|
|
}
|
|
|
|
(async function main() {
|
|
try {
|
|
const versionInfo = await getVersion();
|
|
document.getElementById('versionDisplay').textContent = versionInfo.VERSION;
|
|
|
|
initHamburgerMenu();
|
|
document.getElementById('divSvgHam')?.addEventListener('click', toggleNav);
|
|
|
|
document.getElementById('themeToggleButton')?.addEventListener('click', () => {
|
|
isDarkMode = !isDarkMode;
|
|
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
|
|
document.documentElement.classList.toggle('dark-mode', isDarkMode);
|
|
document.body.classList.toggle('dark-mode', isDarkMode);
|
|
if (themeToggleHamburger) {
|
|
themeToggleHamburger.animateTo(isDarkMode ? 'moon' : 'circle');
|
|
}
|
|
});
|
|
|
|
document.getElementById('logoutButton')?.addEventListener('click', logout);
|
|
|
|
btnSeeMore.addEventListener('click', () => {
|
|
displayCount += SEE_MORE_INCREMENT;
|
|
renderFeed();
|
|
});
|
|
|
|
chkAutoplayVideos?.addEventListener('change', async () => {
|
|
const nextEnabled = !!chkAutoplayVideos.checked;
|
|
applyVideoAutoplaySetting(nextEnabled);
|
|
await persistAutoplaySetting(nextEnabled);
|
|
});
|
|
|
|
await initNDKPage();
|
|
currentPubkey = await getPubkey();
|
|
await injectHeaderAvatar(currentPubkey);
|
|
|
|
await ensureMuteListLoaded();
|
|
|
|
try {
|
|
const settings = await getUserSettings();
|
|
applySettings(settings || {});
|
|
} catch (error) {
|
|
console.warn('[feed.html] Failed to load user settings:', error?.message || error);
|
|
applySettings({});
|
|
}
|
|
|
|
if (!unsubscribeUserSettings) {
|
|
unsubscribeUserSettings = onUserSettings((settings) => {
|
|
applySettings(settings || {});
|
|
});
|
|
}
|
|
|
|
initFooterRelayStatus();
|
|
initSidenavRelaySection();
|
|
await initBlossomSection();
|
|
initAiSectionWithLocalConfig();
|
|
await updateFooter();
|
|
updateIntervalId = setInterval(updateFooter, 1000);
|
|
|
|
window.addEventListener('ndkRelayActivity', (e) => {
|
|
setRelayActivityState(e.detail.relayUrl, e.detail.activity);
|
|
});
|
|
|
|
window.addEventListener('ndkEvent', async (e) => {
|
|
const evt = e.detail;
|
|
if (!evt) return;
|
|
|
|
if (evt.kind === 3 && evt.pubkey === currentPubkey) {
|
|
await ingestContactList(evt);
|
|
return;
|
|
}
|
|
|
|
if (evt.kind === 1 && feedPubkeys.has(evt.pubkey) && isOriginalPost(evt)) {
|
|
if (isBootstrappingFeed) {
|
|
bufferedFeedEvents.push(evt);
|
|
return;
|
|
}
|
|
if (!upsertFeedPost(evt)) return;
|
|
if (renderedPostIds.size > 0 && divFeed.children.length > 0) {
|
|
prependPostCard(evt);
|
|
} else {
|
|
renderFeed();
|
|
}
|
|
}
|
|
});
|
|
|
|
subscribe({ kinds: [3], authors: [currentPubkey], limit: 1 }, { closeOnEose: false, cacheUsage: 'CACHE_FIRST' });
|
|
|
|
const cachedContactEvents = await queryCache({ kinds: [3], authors: [currentPubkey], limit: 1 }).catch(() => []);
|
|
if (cachedContactEvents.length > 0) {
|
|
const latest = cachedContactEvents.sort((a, b) => (b.created_at || 0) - (a.created_at || 0))[0];
|
|
await ingestContactList(latest);
|
|
}
|
|
|
|
if (feedPubkeys.size === 0) {
|
|
divHint.textContent = 'Follow users to populate your feed.';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('[feed.html] Initialization failed:', error);
|
|
divBody.innerHTML = `<div style="text-align:center;padding:50px;"><div style="font-size:24px;margin-bottom:20px;color:var(--primary-color);">❌ Error</div><div style="font-size:16px;color:var(--muted-color);">${error.message}</div></div>`;
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|