diff --git a/assets/svg/filter.svg b/assets/svg/filter.svg new file mode 100644 index 00000000..3ee413c7 --- /dev/null +++ b/assets/svg/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/search.svg b/assets/svg/search.svg new file mode 100644 index 00000000..1de56661 --- /dev/null +++ b/assets/svg/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/disclaimer.html b/components/disclaimer.html index 6c798689..a8db34ff 100644 --- a/components/disclaimer.html +++ b/components/disclaimer.html @@ -125,7 +125,7 @@ -
+
+ + + + +
+ diff --git a/js/app.js b/js/app.js index 882cf31f..16195666 100644 --- a/js/app.js +++ b/js/app.js @@ -692,12 +692,22 @@ class Application { }; this.boundVideoModalZapOpenHandler = (event) => { const requiresLogin = Boolean(event?.detail?.requiresLogin); - if (requiresLogin) { - this.pendingModalZapOpen = true; - } else { - this.pendingModalZapOpen = false; + this.pendingModalZapOpen = requiresLogin; + + const openResult = this.zapController?.open({ requiresLogin }); + if (!openResult) { + event?.preventDefault?.(); + if (!requiresLogin) { + this.pendingModalZapOpen = false; + } + this.videoModal?.closeZapDialog?.({ + silent: true, + restoreFocus: false, + }); + return; } - this.zapController?.open({ requiresLogin }); + + this.pendingModalZapOpen = false; }; this.boundVideoModalZapCloseHandler = () => { this.zapController?.close(); @@ -3029,7 +3039,19 @@ class Application { } isUserLoggedIn() { - return Boolean(this.normalizeHexPubkey(this.pubkey)); + const normalizedPubkey = this.normalizeHexPubkey(this.pubkey); + if (!normalizedPubkey) { + return false; + } + + const sessionActorPubkey = this.normalizeHexPubkey( + nostrClient?.sessionActor?.pubkey, + ); + if (sessionActorPubkey && sessionActorPubkey === normalizedPubkey) { + return false; + } + + return true; } async updateActiveNwcSettings(partial = {}) { diff --git a/js/index.js b/js/index.js index b253923c..b8adfc44 100644 --- a/js/index.js +++ b/js/index.js @@ -276,6 +276,34 @@ async function bootstrapInterface() { label: "Sidebar DNS link", }); + const headerSearchForm = document.getElementById("headerSearchForm"); + if (headerSearchForm) { + headerSearchForm.addEventListener("submit", async (event) => { + event.preventDefault(); + + try { + await applicationReadyPromise; + } catch (error) { + userLogger.info("Search function is coming soon."); + return; + } + + if (application && typeof application.showStatus === "function") { + try { + application.showStatus("Search function is coming soon.", { + autoHideMs: 3500, + showSpinner: false, + }); + return; + } catch (error) { + // fall through to logger fallback + } + } + + userLogger.info("Search function is coming soon."); + }); + } + const sidebar = document.getElementById("sidebar"); const collapseToggle = document.getElementById("sidebarCollapseToggle"); if (sidebar && !sidebar.hasAttribute("data-footer-state")) { diff --git a/js/services/authService.js b/js/services/authService.js index c8fec37c..22dc8ffb 100644 --- a/js/services/authService.js +++ b/js/services/authService.js @@ -119,8 +119,13 @@ export default class AuthService { hydrateFromStorage() { hydrateProfileCacheFromStorage(); - const { profiles } = hydrateSavedProfilesFromStorage(); - if (!getActiveProfilePubkey() && Array.isArray(profiles) && profiles.length) { + const { profiles, hasExplicitActiveProfile } = hydrateSavedProfilesFromStorage(); + if ( + !getActiveProfilePubkey() && + !hasExplicitActiveProfile && + Array.isArray(profiles) && + profiles.length + ) { const first = profiles[0]?.pubkey || null; if (first) { setActiveProfilePubkey(first, { persist: true }); diff --git a/js/state/cache.js b/js/state/cache.js index b34206c4..fc30d477 100644 --- a/js/state/cache.js +++ b/js/state/cache.js @@ -34,6 +34,7 @@ function sanitizeProfileString(value) { let savedProfiles = []; let activeProfilePubkey = null; +let hadExplicitActiveProfile = false; const profileCache = new Map(); const urlHealthCache = new Map(); const urlHealthInFlight = new Map(); @@ -297,14 +298,23 @@ export function persistSavedProfiles({ persistActive = true } = {}) { export function loadSavedProfilesFromStorage() { savedProfiles = []; activeProfilePubkey = null; + hadExplicitActiveProfile = false; if (typeof localStorage === "undefined") { - return { profiles: getSavedProfiles(), activePubkey: activeProfilePubkey }; + return { + profiles: getSavedProfiles(), + activePubkey: activeProfilePubkey, + hasExplicitActiveProfile: hadExplicitActiveProfile, + }; } const raw = localStorage.getItem(SAVED_PROFILES_STORAGE_KEY); if (!raw) { - return { profiles: getSavedProfiles(), activePubkey: activeProfilePubkey }; + return { + profiles: getSavedProfiles(), + activePubkey: activeProfilePubkey, + hasExplicitActiveProfile: hadExplicitActiveProfile, + }; } let needsRewrite = false; @@ -352,17 +362,28 @@ export function loadSavedProfilesFromStorage() { savedProfiles.push(entry); } - const activeCandidate = - typeof parsed.activePubkey === "string" - ? parsed.activePubkey - : typeof parsed.activePubKey === "string" - ? parsed.activePubKey - : null; - const normalizedActive = normalizeHexPubkey(activeCandidate); - if (normalizedActive && seenPubkeys.has(normalizedActive)) { - activeProfilePubkey = normalizedActive; - } else if (activeCandidate) { - needsRewrite = true; + let hasActiveField = false; + let activeCandidate; + if (Object.prototype.hasOwnProperty.call(parsed, "activePubkey")) { + hasActiveField = true; + activeCandidate = parsed.activePubkey; + } else if (Object.prototype.hasOwnProperty.call(parsed, "activePubKey")) { + hasActiveField = true; + activeCandidate = parsed.activePubKey; + } + + if (hasActiveField) { + hadExplicitActiveProfile = true; + if (typeof activeCandidate === "string") { + const normalizedActive = normalizeHexPubkey(activeCandidate); + if (normalizedActive && seenPubkeys.has(normalizedActive)) { + activeProfilePubkey = normalizedActive; + } else if (activeCandidate) { + needsRewrite = true; + } + } else if (activeCandidate !== null && activeCandidate !== undefined) { + needsRewrite = true; + } } } else if (raw) { needsRewrite = true; @@ -372,7 +393,7 @@ export function loadSavedProfilesFromStorage() { needsRewrite = true; } - if (!activeProfilePubkey && savedProfiles.length) { + if (!activeProfilePubkey && savedProfiles.length && !hadExplicitActiveProfile) { activeProfilePubkey = savedProfiles[0].pubkey; needsRewrite = true; } @@ -381,7 +402,11 @@ export function loadSavedProfilesFromStorage() { persistSavedProfiles(); } - return { profiles: getSavedProfiles(), activePubkey: activeProfilePubkey }; + return { + profiles: getSavedProfiles(), + activePubkey: activeProfilePubkey, + hasExplicitActiveProfile: hadExplicitActiveProfile, + }; } export function syncSavedProfileFromCache(pubkey, { persist = false } = {}) { diff --git a/js/ui/components/VideoModal.js b/js/ui/components/VideoModal.js index cb3cc0b2..9ee79189 100644 --- a/js/ui/components/VideoModal.js +++ b/js/ui/components/VideoModal.js @@ -128,9 +128,14 @@ export class VideoModal { this.eventTarget.removeEventListener(type, listener, options); } - dispatch(type, detail) { - const event = new CustomEvent(type, { detail }); - this.eventTarget.dispatchEvent(event); + dispatch(type, detail, options = {}) { + const config = + options && typeof options === "object" ? { ...options } : Object.create(null); + const event = new CustomEvent(type, { + detail, + cancelable: Boolean(config.cancelable), + }); + return this.eventTarget.dispatchEvent(event); } getRoot() { @@ -420,17 +425,18 @@ export class VideoModal { } if (this.modalZapRequiresLogin) { - this.dispatch("zap:open", { - video: this.activeVideo, - requiresLogin: true, - }); + this.dispatch( + "zap:open", + { + video: this.activeVideo, + requiresLogin: true, + }, + { cancelable: false }, + ); return; } - const popoverIsOpen = - typeof this.modalZapPopover?.isOpen === "function" - ? this.modalZapPopover.isOpen() - : this.modalZapDialogOpen === true; + const popoverIsOpen = this.isZapDialogOpen(); if (this.modalZapOpenPromise) { this.modalZapPendingToggle = "close"; @@ -446,9 +452,17 @@ export class VideoModal { return; } + const allowed = this.dispatch( + "zap:open", + { video: this.activeVideo }, + { cancelable: true }, + ); + if (allowed === false) { + return; + } + this.modalZapPendingToggle = null; this.openZapDialog(); - this.dispatch("zap:open", { video: this.activeVideo }); }); } @@ -584,6 +598,9 @@ export class VideoModal { this.modalZapDialog.hidden = false; this.modalZapDialog.setAttribute("aria-hidden", "false"); this.modalZapDialogOpen = true; + if (this.modalZapBtn) { + this.modalZapBtn.setAttribute("aria-expanded", "true"); + } this.focusZapAmount(); } return result; @@ -603,6 +620,9 @@ export class VideoModal { this.modalZapDialog.setAttribute("aria-hidden", "true"); this.modalZapDialog.hidden = true; this.modalZapDialogOpen = false; + if (this.modalZapBtn) { + this.modalZapBtn.setAttribute("aria-expanded", "false"); + } if (!silent) { this.dispatch("zap:close", { video: this.activeVideo }); } @@ -1054,6 +1074,10 @@ export class VideoModal { } async openZapDialog() { + if (this.modalZapRequiresLogin) { + return Promise.resolve(false); + } + if (this.modalZapOpenPromise) { return this.modalZapOpenPromise; } @@ -1112,7 +1136,25 @@ export class VideoModal { if (restoreFocus !== undefined) { options.restoreFocus = restoreFocus; } - this.modalZapPopover.close(options); + const closeResult = this.modalZapPopover.close(options); + + if ( + closeResult !== true && + this.modalZapDialog && + this.modalZapDialogOpen + ) { + this.modalZapDialog.dataset.state = "closed"; + this.modalZapDialog.setAttribute("aria-hidden", "true"); + this.modalZapDialog.hidden = true; + this.modalZapDialogOpen = false; + if (this.modalZapBtn) { + this.modalZapBtn.setAttribute("aria-expanded", "false"); + } + if (!silent) { + this.dispatch("zap:close", { video: this.activeVideo }); + } + } + return; } @@ -1134,9 +1176,27 @@ export class VideoModal { } isZapDialogOpen() { - if (typeof this.modalZapPopover?.isOpen === "function") { - return this.modalZapPopover.isOpen(); + const popoverIsOpen = + typeof this.modalZapPopover?.isOpen === "function" + ? this.modalZapPopover.isOpen() + : null; + + if (popoverIsOpen === true) { + return true; } + + if (popoverIsOpen === false && this.modalZapDialogOpen) { + return true; + } + + if (this.modalZapDialog?.dataset?.state === "open") { + return true; + } + + if (this.modalZapDialog && this.modalZapDialog.hidden === false) { + return true; + } + return !!this.modalZapDialogOpen; } diff --git a/tests/video-modal-accessibility.test.mjs b/tests/video-modal-accessibility.test.mjs index 81893fe8..c54d2324 100644 --- a/tests/video-modal-accessibility.test.mjs +++ b/tests/video-modal-accessibility.test.mjs @@ -39,6 +39,19 @@ async function setupModal({ lazyLoad = false } = {}) { applyDesignSystemAttributes(document); + if (!window.ResizeObserver) { + class ResizeObserverStub { + constructor(callback) { + this.callback = callback; + } + observe() {} + unobserve() {} + disconnect() {} + } + window.ResizeObserver = ResizeObserverStub; + globalThis.ResizeObserver = ResizeObserverStub; + } + let restoreFetch = null; if (lazyLoad) { const originalFetch = globalThis.fetch; @@ -730,7 +743,25 @@ for (const _ of [0]) { assert.equal(zapDialog.dataset.state, "open"); assert.equal(zapDialog.getAttribute("aria-hidden"), "false"); assert.equal(zapButton.getAttribute("aria-expanded"), "true"); - assert.strictEqual(document.activeElement, amountInput); + + zapButton.dispatchEvent( + new window.MouseEvent("click", { bubbles: true, cancelable: true }) + ); + + assert.equal(zapDialog.hidden, true); + assert.equal(zapDialog.dataset.state, "closed"); + assert.equal(zapDialog.getAttribute("aria-hidden"), "true"); + assert.equal(zapButton.getAttribute("aria-expanded"), "false"); + + zapButton.dispatchEvent( + new window.MouseEvent("click", { bubbles: true, cancelable: true }) + ); + await Promise.resolve(); + + assert.equal(zapDialog.hidden, false); + assert.equal(zapDialog.dataset.state, "open"); + assert.equal(zapDialog.getAttribute("aria-hidden"), "false"); + assert.equal(zapButton.getAttribute("aria-expanded"), "true"); const closeButton = document.getElementById("modalZapCloseBtn"); assert.ok(closeButton, "zap close button should exist"); diff --git a/tests/video-modal-zap.test.mjs b/tests/video-modal-zap.test.mjs index e97639b6..bd21c978 100644 --- a/tests/video-modal-zap.test.mjs +++ b/tests/video-modal-zap.test.mjs @@ -182,10 +182,26 @@ function createVideoModalStub() { return { setCopyEnabled: noop, setShareEnabled: noop, - setZapVisibility: noop, + setWalletPromptVisible: noop, + zapVisibilityCalls: [], + setZapVisibility(config) { + const payload = + config && typeof config === "object" + ? { ...config } + : { visible: Boolean(config) }; + this.zapVisibilityCalls.push(payload); + this.lastZapVisibility = payload; + }, + dialogOpen: false, + closeZapDialogCalls: [], + closeZapDialog(options = {}) { + this.closeZapDialogCalls.push(options); + this.dialogOpen = false; + }, resetStats: noop, updateViewCountLabel: noop, setViewCountPointer: noop, + completedStates: [], addEventListener(type, handler) { listeners.set(type, handler); }, @@ -202,6 +218,9 @@ function createVideoModalStub() { setZapPending(value) { this.setZapPendingCalls.push(Boolean(value)); }, + setZapCompleted(value) { + this.completedStates.push(Boolean(value)); + }, setZapStatus(message, tone) { this.statusMessages.push({ message, tone }); }, @@ -297,6 +316,132 @@ async function createApp({ splitAndZap }) { return { app, modalStub, creatorAddress, platformAddress }; } +await (async () => { + // Test: logged-out zap request closes modal and queues reopen + const { app, modalStub } = await createApp({ + splitAndZap: async () => ({ receipts: [] }), + }); + + let loginNotificationCount = 0; + app.zapController.notifyLoginRequired = () => { + loginNotificationCount += 1; + }; + + modalStub.dialogOpen = true; + modalStub.closeZapDialogCalls = []; + + app.pendingModalZapOpen = false; + + app.boundVideoModalZapOpenHandler({ detail: { requiresLogin: true } }); + + assert.equal( + loginNotificationCount, + 1, + "should request login notification when zapping logged out", + ); + assert.equal( + app.pendingModalZapOpen, + true, + "zap should remain pending for post-login reopen", + ); + assert.equal( + modalStub.closeZapDialogCalls.length, + 1, + "zap dialog should close immediately when login required", + ); + assert.deepEqual(modalStub.closeZapDialogCalls[0], { + silent: true, + restoreFocus: false, + }); + assert.equal(modalStub.dialogOpen, false, "zap dialog should be closed"); + + app.destroy(); +})(); + +await (async () => { + // Test: preventDefault is called when zap opening is rejected post-dispatch + const { app, modalStub } = await createApp({ + splitAndZap: async () => ({ receipts: [] }), + }); + + let loginNotificationCount = 0; + app.zapController.notifyLoginRequired = () => { + loginNotificationCount += 1; + }; + + app.zapController.isUserLoggedIn = () => false; + + modalStub.closeZapDialogCalls = []; + + const preventCalls = []; + const event = { + detail: { requiresLogin: false }, + preventDefault: () => { + preventCalls.push(true); + }, + }; + + app.pendingModalZapOpen = true; + + app.boundVideoModalZapOpenHandler(event); + + assert.equal( + loginNotificationCount, + 1, + "should notify login requirement when zap open is rejected", + ); + assert.equal( + preventCalls.length, + 1, + "should prevent default zap opening when controller rejects it", + ); + assert.equal( + app.pendingModalZapOpen, + false, + "pending zap reopen flag should clear when rejection wasn't login-gated", + ); + assert.deepEqual(modalStub.closeZapDialogCalls[0], { + silent: true, + restoreFocus: false, + }); + + app.destroy(); +})(); + +await (async () => { + // Test: session actors should not be treated as logged-in users for zaps + const { app, modalStub } = await createApp({ + splitAndZap: async () => ({ receipts: [] }), + }); + + const { nostrClient } = await import("../js/nostr.js"); + const originalSessionActor = nostrClient.sessionActor; + const sessionPubkey = "a".repeat(64); + nostrClient.sessionActor = { pubkey: sessionPubkey, privateKey: "priv" }; + + app.pubkey = sessionPubkey; + + modalStub.zapVisibilityCalls = []; + app.zapController.setVisibility(true); + + const lastVisibility = + modalStub.zapVisibilityCalls[modalStub.zapVisibilityCalls.length - 1]; + assert.deepEqual( + lastVisibility, + { visible: true, requiresLogin: true }, + "zap controller should require login when only a session actor is present", + ); + assert.equal( + app.isUserLoggedIn(), + false, + "session actor pubkeys should not count as logged-in users", + ); + + app.pubkey = null; + nostrClient.sessionActor = originalSessionActor; + app.destroy(); +})(); + await (async () => { // Test: wallet required before zapping const splitCalls = [];