diff --git a/package.json b/package.json index 04c77369..1b31d19c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.174", + "version": "0.18.175", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/views/settings/notifications.view.js b/src/js/views/settings/notifications.view.js index 7f81c702..88799b20 100644 --- a/src/js/views/settings/notifications.view.js +++ b/src/js/views/settings/notifications.view.js @@ -63,7 +63,7 @@ class SettingsNotificationsView extends View { const isDenied = permissionState === "denied"; let description = - "Get notified when you have new activity while Impro is open in a tab or window."; + "Get notified of new activity while Impro is open in a tab or window."; if (!isSupported) { description = "Not supported on this device."; } else if (isDenied) { -- knotmirror 0.0.1 From ad2073f8025d7378333d1d7bf5525b3f49937b9a Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 16:30:30 -0500 Subject: [PATCH 02/25] Update skeleton styles --- package.json | 2 +- src/css/style.css | 14 +++++--------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 1b31d19c..4722464f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.175", + "version": "0.18.176", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 31c1547b..e2b6c029 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -767,7 +767,6 @@ input[type="color"]::-moz-color-swatch { width: var(--avatar-size-post); height: var(--avatar-size-post); border-radius: var(--avatar-border-radius); - background-color: var(--skeleton-color); } .skeleton-content { @@ -784,21 +783,18 @@ input[type="color"]::-moz-color-swatch { width: 100%; height: 10px; border-radius: var(--skeleton-border-radius); - background-color: var(--skeleton-color); } .skeleton-line-short { width: 10em; height: 12px; border-radius: var(--skeleton-border-radius); - background-color: var(--skeleton-color); } .skeleton-line-shorter { width: 7em; height: 12px; border-radius: var(--skeleton-border-radius); - background-color: var(--skeleton-color); } .skeleton-actions { @@ -821,8 +817,7 @@ input[type="color"]::-moz-color-swatch { .skeleton-action .skeleton-action-icon { width: 18px; height: 18px; - color: var(--post-action-icon-color); - opacity: 0.4; + color: var(--skeleton-color); display: flex; align-items: center; justify-content: center; @@ -2041,6 +2036,10 @@ container-link { gap: 6px; } +.no-unauthenticated-skeleton-text .skeleton-line { + background-color: var(--skeleton-color); +} + .no-unauthenticated-message-large { font-size: 18px; } @@ -6178,14 +6177,12 @@ button.profile-list-item-button.is-disabled { width: 30px; height: 30px; border-radius: var(--list-avatar-border-radius); - background-color: var(--skeleton-color); } .feeds-list-item-skeleton-title { height: 14px; width: 45%; border-radius: var(--skeleton-border-radius); - background-color: var(--skeleton-color); margin-bottom: 6px; margin-top: 2px; } @@ -6194,7 +6191,6 @@ button.profile-list-item-button.is-disabled { height: 12px; width: 30%; border-radius: var(--skeleton-border-radius); - background-color: var(--skeleton-color); } .post-composer.bottom-sheet { -- knotmirror 0.0.1 From 900159149043f9a5e33c387d35eba6559bd14965 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 16:38:16 -0500 Subject: [PATCH 03/25] Update readme links --- README.md | 4 +++- plugins.md | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9493ff7d..a2496b8c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Impro is: - **Web-first**: Impro was built from scratch for the web, with no heavy cross-platform frameworks or libraries. - **Familiar by default:** Out of the box, Impro offers the same feature set as the main Bluesky client. -- **Extensible by design:** If you want additional functionality, you can use [Community Plugins](/plugins.md) to customize your experience. +- **Extensible by design:** If you want additional functionality, you can use [Community Plugins](https://impro.social/plugins/community) to customize your experience. - **Better about blocking**: Unlike the main client's "nuclear block", thread context is preserved for non-blocked users. ## Issues and feature requests @@ -34,6 +34,8 @@ The icons are from the [Majesticons](https://github.com/halfmage/majesticons) fr ## Development +_Interested in developing a plugin for Impro? See our [plugin development guide](/plugins.md)._ + Impro is a single-page app built with [Eleventy](https://www.11ty.dev/). To run the development server, run: ```bash diff --git a/plugins.md b/plugins.md index 5056eef9..5ecd0b00 100644 --- a/plugins.md +++ b/plugins.md @@ -24,6 +24,8 @@ To publish a plugin version, tag a commit with the version number (e.g. "0.1.0", ## API surface +Autogenerated documentation for the plugin SDK can be found [here](/impro-plugin/docs/docs.md). + Plugins are currently in **beta** as the API surface is being expanded. However, here are some basic guidelines about what plugins can do: ### Plugins CAN: -- knotmirror 0.0.1 From 85805030218ce8a739ff64ccf432cfd74fec6d9e Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 16:45:08 -0500 Subject: [PATCH 04/25] Allow authorization header for plugin requests --- package.json | 2 +- src/js/plugins/pluginRequests.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4722464f..cc613c0d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.176", + "version": "0.18.177", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/plugins/pluginRequests.js b/src/js/plugins/pluginRequests.js index 208d7d17..fc83645e 100644 --- a/src/js/plugins/pluginRequests.js +++ b/src/js/plugins/pluginRequests.js @@ -2,7 +2,7 @@ import { isFetchAllowed } from "/js/plugins/pluginPermissions.js"; const ALLOWED_METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD"]; -const FORBIDDEN_HEADERS = ["authorization", "cookie"]; +const FORBIDDEN_HEADERS = ["cookie"]; const MAX_BODY_CHARS = 1_000_000; export const MAX_RESPONSE_BYTES = 100_000_000; -- knotmirror 0.0.1 From 8db381eda2d863c17fe9ac10dac0f06668dc5046 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 16:51:45 -0500 Subject: [PATCH 05/25] Support http for localhost plugin requests --- package.json | 2 +- src/js/plugins/pluginPermissions.js | 50 +++++++++++++++++-- .../specs/plugins/pluginPermissions.test.js | 48 ++++++++++++++++++ 3 files changed, 94 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index cc613c0d..e5dd42a8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.177", + "version": "0.18.178", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/plugins/pluginPermissions.js b/src/js/plugins/pluginPermissions.js index 7c9b8e94..0b3ddbfd 100644 --- a/src/js/plugins/pluginPermissions.js +++ b/src/js/plugins/pluginPermissions.js @@ -62,7 +62,10 @@ export function isFetchAllowed(url, permissions) { } catch { return false; } - if (parsedUrl.protocol !== "https:") return false; + if (parsedUrl.protocol !== "https:") { + if (parsedUrl.protocol !== "http:") return false; + if (!isLoopbackHost(parsedUrl.hostname)) return false; + } return (permissions.fetch ?? []).some((pattern) => matchesPattern(parsedUrl, pattern), ); @@ -73,6 +76,8 @@ export function isFetchAllowed(url, permissions) { // https://example.com/path/* — exact host, path prefix // https://*.example.com/* — example.com and any subdomain // https://example.com/* — exact host, any path +// https://example.com:8443/* — exact port; without one, any port +// http://localhost:11434/* — http is loopback-only function matchesPattern(parsedUrl, pattern) { let parsedPattern = null; @@ -83,8 +88,10 @@ function matchesPattern(parsedUrl, pattern) { console.warn(`invalid permission: ${pattern}`); return false; } - const { host, path } = parsedPattern; + const { scheme, host, port, path } = parsedPattern; + if (scheme !== parsedUrl.protocol.slice(0, -1)) return false; if (!hostMatches(parsedUrl.hostname, host)) return false; + if (port !== null && port !== effectivePort(parsedUrl)) return false; if (!pathMatches(parsedUrl.pathname, path)) return false; return true; } @@ -94,15 +101,48 @@ function parsePattern(pattern) { const schemeSep = pattern.indexOf("://"); if (schemeSep === -1) throw new Error("no protocol found"); const scheme = pattern.slice(0, schemeSep); - if (scheme !== "https") throw new Error("https required"); + if (scheme !== "https" && scheme !== "http") { + throw new Error("https required"); + } const rest = pattern.slice(schemeSep + 3); const pathStart = rest.indexOf("/"); - const host = ( + const authority = ( pathStart === -1 ? rest : rest.slice(0, pathStart) ).toLowerCase(); const path = pathStart === -1 ? "/*" : rest.slice(pathStart); + const { host, port } = splitHostPort(authority); if (!host) throw new Error("no host found"); - return { host, path }; + if (scheme === "http" && !isLoopbackHost(host)) { + throw new Error("http is only allowed for loopback hosts"); + } + return { scheme, host, port, path }; +} + +function splitHostPort(authority) { + const portSep = authority.startsWith("[") + ? authority.indexOf(":", authority.indexOf("]")) + : authority.lastIndexOf(":"); + if (portSep === -1) return { host: authority, port: null }; + const port = authority.slice(portSep + 1); + if (!/^\d+$/.test(port)) throw new Error("invalid port"); + return { host: authority.slice(0, portSep), port }; +} + +function effectivePort(parsedUrl) { + if (parsedUrl.port) return parsedUrl.port; + return parsedUrl.protocol === "https:" ? "443" : "80"; +} + +// Mirrors the "potentially trustworthy origin" hosts browsers exempt from +// mixed-content blocking. Note Safari does not honor the exemption, so http +// loopback fetches fail there when the app itself is served over https. +function isLoopbackHost(host) { + const normalized = host.toLowerCase().replace(/^\[|\]$/g, ""); + if (normalized === "localhost" || normalized.endsWith(".localhost")) { + return true; + } + if (normalized === "::1") return true; + return /^127(?:\.\d{1,3}){3}$/.test(normalized); } function hostMatches(actualHost, patternHost) { diff --git a/tests/unit/specs/plugins/pluginPermissions.test.js b/tests/unit/specs/plugins/pluginPermissions.test.js index d7223142..904cf119 100644 --- a/tests/unit/specs/plugins/pluginPermissions.test.js +++ b/tests/unit/specs/plugins/pluginPermissions.test.js @@ -188,6 +188,54 @@ describe("isFetchAllowed", () => { assert(!isFetchAllowed("http://example.com/", permissions)); }); + it("rejects http patterns for non-loopback hosts", () => { + const permissions = { fetch: ["http://example.com/*"] }; + assert(!isFetchAllowed("http://example.com/", permissions)); + }); + + it("allows http for loopback hosts", () => { + const permissions = { + fetch: [ + "http://localhost:11434/*", + "http://127.0.0.1:1234/*", + "http://[::1]:8080/*", + "http://ollama.localhost/*", + ], + }; + assert(isFetchAllowed("http://localhost:11434/api/generate", permissions)); + assert(isFetchAllowed("http://127.0.0.1:1234/v1/chat", permissions)); + assert(isFetchAllowed("http://[::1]:8080/v1/chat", permissions)); + assert(isFetchAllowed("http://ollama.localhost/api", permissions)); + }); + + it("does not let an https pattern authorize an http url", () => { + const permissions = { fetch: ["https://localhost/*"] }; + assert(!isFetchAllowed("http://localhost/", permissions)); + }); + + it("does not let an http loopback pattern authorize a remote host", () => { + const permissions = { fetch: ["http://localhost/*"] }; + assert(!isFetchAllowed("http://localhost.evil.com/", permissions)); + assert(!isFetchAllowed("http://notlocalhost/", permissions)); + }); + + it("enforces the port when the pattern specifies one", () => { + const permissions = { fetch: ["http://localhost:11434/*"] }; + assert(!isFetchAllowed("http://localhost:1234/api", permissions)); + assert(!isFetchAllowed("http://localhost/api", permissions)); + }); + + it("matches any port when the pattern omits one", () => { + const permissions = { fetch: ["https://example.com/*"] }; + assert(isFetchAllowed("https://example.com/foo", permissions)); + assert(isFetchAllowed("https://example.com:8443/foo", permissions)); + }); + + it("treats a default port in the url as matching an explicit pattern port", () => { + const permissions = { fetch: ["https://example.com:443/*"] }; + assert(isFetchAllowed("https://example.com/foo", permissions)); + }); + it("denies everything when the fetch key is missing", () => { assert(!isFetchAllowed("https://example.com/", {})); }); -- knotmirror 0.0.1 From 622187712a4908f6ff0a8dbe4d876b8c712d1f4b Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 18:42:32 -0500 Subject: [PATCH 06/25] Allow plugins to request fetch permissions at runtime --- impro-plugin/docs/docs.md | 48 +++- impro-plugin/main.d.ts | 29 +- impro-plugin/main.js | 39 ++- src/css/style.css | 56 ++++ src/js/plugins/pluginModal.js | 36 ++- src/js/plugins/pluginPermissions.js | 52 +++- src/js/plugins/pluginPreferencesManager.js | 23 ++ src/js/plugins/pluginService.js | 96 ++++++- src/js/views/installedPlugins.view.js | 3 +- src/js/views/pluginSettings.view.js | 88 +++++- .../specs/views/installedPlugins.view.test.js | 31 ++- .../specs/views/pluginSettings.view.test.js | 117 ++++++++ tests/e2e/testPlugins.js | 18 ++ tests/unit/specs/plugins/pluginModal.test.js | 39 +++ .../specs/plugins/pluginPermissions.test.js | 169 +++++++++++ .../unit/specs/plugins/pluginService.test.js | 262 ++++++++++++++++++ 16 files changed, 1069 insertions(+), 37 deletions(-) diff --git a/impro-plugin/docs/docs.md b/impro-plugin/docs/docs.md index 40bbd91a..77f1fecf 100644 --- a/impro-plugin/docs/docs.md +++ b/impro-plugin/docs/docs.md @@ -2699,8 +2699,9 @@ One token in a rich-text stream — `text`, `facet`, `inline`, or `block`. > **fetch**(`url`, `init?`): `Promise`\<[`PluginResponse`](#pluginresponse)\> -Proxied fetch through the host. Requires the `"networkRequest"` permission -scope and the target URL must be covered by the plugin's manifest allowlist. +Proxied fetch through the host. The target URL must match one of the +`permissions.fetch` URL patterns declared in the plugin's manifest, which +the user grants at install. `init` accepts `method`, `headers` (plain object, `Headers`, `Map`, or `[name, value]` iterable), and a string `body`. Resolves to a [PluginResponse](#pluginresponse). @@ -2733,3 +2734,46 @@ Convenience wrapper that returns a new [FlattenedTokens](#flattenedtokens) for ` #### Returns [`FlattenedTokens`](#flattenedtokens) + +*** + +### getUserGrantedFetchOrigins() + +> **getUserGrantedFetchOrigins**(): `Promise`\<`string`[]\> + +The origins the user has granted this plugin, as fetch patterns +(`https://example.com/*`). Manifest-declared permissions are not included. + +#### Returns + +`Promise`\<`string`[]\> + +*** + +### requestFetchPermission() + +> **requestFetchPermission**(`url`): `Promise`\<`boolean`\> + +Asks the user to grant this plugin network access to `url`'s origin — for +endpoints the plugin can't know in advance, such as a user-supplied API +provider. Requires `permissions.userFetch` in the manifest. + +Grants are origin-scoped (scheme, host, and port; the path is ignored) and +persist until the user revokes them in the app's plugin settings. Resolves +`true` without prompting if the origin is already permitted, so it is safe +to call before every request. Resolves `false` if the user declines, if +`url` can't be an origin, or if a prompt for this plugin is already open. + +Any credential for the endpoint is the plugin's to hold — use +[Plugin.saveLocalData](#savelocaldata) rather than [Plugin.saveData](#savedata), which +syncs through the user's account preferences. + +#### Parameters + +| Parameter | Type | +| ------ | ------ | +| `url` | `string` | + +#### Returns + +`Promise`\<`boolean`\> diff --git a/impro-plugin/main.d.ts b/impro-plugin/main.d.ts index d2713ca4..54d48cb1 100644 --- a/impro-plugin/main.d.ts +++ b/impro-plugin/main.d.ts @@ -1,6 +1,7 @@ /** - * Proxied fetch through the host. Requires the `"networkRequest"` permission - * scope and the target URL must be covered by the plugin's manifest allowlist. + * Proxied fetch through the host. The target URL must match one of the + * `permissions.fetch` URL patterns declared in the plugin's manifest, which + * the user grants at install. * `init` accepts `method`, `headers` (plain object, `Headers`, `Map`, or * `[name, value]` iterable), and a string `body`. Resolves to a * {@link PluginResponse}. @@ -9,6 +10,30 @@ * @returns {Promise} */ export function fetch(url: string, init?: PluginFetchInit): Promise; +/** + * Asks the user to grant this plugin network access to `url`'s origin — for + * endpoints the plugin can't know in advance, such as a user-supplied API + * provider. Requires `permissions.userFetch` in the manifest. + * + * Grants are origin-scoped (scheme, host, and port; the path is ignored) and + * persist until the user revokes them in the app's plugin settings. Resolves + * `true` without prompting if the origin is already permitted, so it is safe + * to call before every request. Resolves `false` if the user declines, if + * `url` can't be an origin, or if a prompt for this plugin is already open. + * + * Any credential for the endpoint is the plugin's to hold — use + * {@link Plugin.saveLocalData} rather than {@link Plugin.saveData}, which + * syncs through the user's account preferences. + * @param {string} url + * @returns {Promise} + */ +export function requestFetchPermission(url: string): Promise; +/** + * The origins the user has granted this plugin, as fetch patterns + * (`https://example.com/*`). Manifest-declared permissions are not included. + * @returns {Promise} + */ +export function getUserGrantedFetchOrigins(): Promise; /** * Convenience wrapper that returns a new {@link FlattenedTokens} for `tokens`. * @param {RichTextToken[]} tokens diff --git a/impro-plugin/main.js b/impro-plugin/main.js index 84e43327..7a4b7214 100644 --- a/impro-plugin/main.js +++ b/impro-plugin/main.js @@ -539,8 +539,9 @@ export class App { } /** - * Proxied fetch through the host. Requires the `"networkRequest"` permission - * scope and the target URL must be covered by the plugin's manifest allowlist. + * Proxied fetch through the host. The target URL must match one of the + * `permissions.fetch` URL patterns declared in the plugin's manifest, which + * the user grants at install. * `init` accepts `method`, `headers` (plain object, `Headers`, `Map`, or * `[name, value]` iterable), and a string `body`. Resolves to a * {@link PluginResponse}. @@ -555,6 +556,40 @@ export async function fetch(url, init = {}) { return new PluginResponse(result); } +/** + * Asks the user to grant this plugin network access to `url`'s origin — for + * endpoints the plugin can't know in advance, such as a user-supplied API + * provider. Requires `permissions.userFetch` in the manifest. + * + * Grants are origin-scoped (scheme, host, and port; the path is ignored) and + * persist until the user revokes them in the app's plugin settings. Resolves + * `true` without prompting if the origin is already permitted, so it is safe + * to call before every request. Resolves `false` if the user declines, if + * `url` can't be an origin, or if a prompt for this plugin is already open. + * + * Any credential for the endpoint is the plugin's to hold — use + * {@link Plugin.saveLocalData} rather than {@link Plugin.saveData}, which + * syncs through the user's account preferences. + * @param {string} url + * @returns {Promise} + */ +export async function requestFetchPermission(url) { + return /** @type {boolean} */ ( + await hostCall("requestFetchPermission", { url }) + ); +} + +/** + * The origins the user has granted this plugin, as fetch patterns + * (`https://example.com/*`). Manifest-declared permissions are not included. + * @returns {Promise} + */ +export async function getUserGrantedFetchOrigins() { + return /** @type {string[]} */ ( + await hostCall("getUserGrantedFetchOrigins", {}) + ); +} + /** * @param {unknown} value * @returns {value is { forEach: (callback: (value: string, name: string) => void) => void }} diff --git a/src/css/style.css b/src/css/style.css index e2b6c029..c98b8bcb 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -7350,6 +7350,13 @@ context-menu-item-group > context-menu-item > button { word-break: break-all; } +.permission-prompt-note { + display: block; + margin-top: 12px; + font-size: 13px; + color: var(--text-color-muted); +} + @media (hover: hover) { .modal-dialog-message a:hover { text-decoration: underline; @@ -10638,6 +10645,55 @@ rendered-markdown ul:has(> li > input[type="checkbox"]) { color: var(--text-color); } +.plugin-system-settings { + display: block; + margin-top: 16px; +} + +.plugin-system-settings-bar { + padding: 8px 16px; + background-color: var(--background-color-secondary); + border-top: 1px solid var(--generic-border-color); + border-bottom: 1px solid var(--generic-border-color); + color: var(--text-color-muted); +} + +.plugin-system-settings-body { + padding: 16px; +} + +.plugin-network-access-title { + font-size: 15px; + font-weight: 600; +} + +.plugin-network-access-description { + margin-top: 4px; + font-size: 13px; + color: var(--text-color-muted); +} + +.plugin-network-access-list { + margin-top: 12px; + list-style: none; + display: flex; + flex-direction: column; + gap: 8px; +} + +.plugin-network-access-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.plugin-network-access-item code { + font-family: var(--monospace-font, monospace); + font-size: 13px; + word-break: break-all; +} + .plugin-content { --plugin-prose-inset: 0px; } diff --git a/src/js/plugins/pluginModal.js b/src/js/plugins/pluginModal.js index 89aff693..be29de55 100644 --- a/src/js/plugins/pluginModal.js +++ b/src/js/plugins/pluginModal.js @@ -118,13 +118,15 @@ const ACTION_LABELS = { 'Send feed feedback (e.g. "show fewer/more like this") on your behalf', }; -function permissionsSectionTemplate({ title, items }) { +function permissionsSectionTemplate({ title, items = [] }) { return html`
${title}
-
    - ${items.map((item) => html`
  • ${item}
    • `)} -
+ ${items.length > 0 + ? html`
    + ${items.map((item) => html`
  • ${item}
    • `)} +
` + : ""}
`; } @@ -140,6 +142,13 @@ function permissionsListTemplate({ permissions }) { }), ); } + if (permissions.userFetch) { + sections.push( + permissionsSectionTemplate({ + title: "Send network requests to user-specified domains", + }), + ); + } const actionScopes = permissions.actions ?? []; if (actionScopes.length > 0) { sections.push( @@ -169,6 +178,25 @@ export async function showPluginInstallPermissionsModal({ ); } +export async function showPluginFetchPermissionModal({ pluginName, origin }) { + const name = pluginName ?? "This plugin"; + return confirmModal( + html` + ${name} wants permission to: +
+ ${permissionsSectionTemplate({ + title: "Send network requests to:", + items: [html`${origin}`], + })} +
`, + { + title: "Allow network access?", + confirmButtonText: "Allow", + }, + ); +} + export async function showPluginUpdatePermissionsModal({ pluginName, pluginVersion, diff --git a/src/js/plugins/pluginPermissions.js b/src/js/plugins/pluginPermissions.js index 0b3ddbfd..771bfaa8 100644 --- a/src/js/plugins/pluginPermissions.js +++ b/src/js/plugins/pluginPermissions.js @@ -17,6 +17,7 @@ export function parsePermissions(permissions) { ); if (fetchPatterns.length > 0) parsed.fetch = fetchPatterns; } + if (permissions.userFetch === true) parsed.userFetch = true; if (permissions.actions) { const actionsArray = Array.isArray(permissions.actions) ? permissions.actions @@ -39,8 +40,17 @@ export function diffPermissions(current, next) { const diff = {}; let hasAny = false; for (const key of Object.keys(next)) { - const have = new Set(current[key] ?? []); - const added = (next[key] ?? []).filter((entry) => !have.has(entry)); + const nextValue = next[key]; + // Scope flags (userFetch) are booleans, not pattern lists + if (!Array.isArray(nextValue)) { + if (nextValue && !current[key]) { + diff[key] = nextValue; + hasAny = true; + } + continue; + } + const have = new Set(Array.isArray(current[key]) ? current[key] : []); + const added = nextValue.filter((entry) => !have.has(entry)); if (added.length > 0) { diff[key] = added; hasAny = true; @@ -50,11 +60,45 @@ export function diffPermissions(current, next) { } export function isEmptyPermissions(obj) { - return Object.values(obj).every( - (entries) => !Array.isArray(entries) || entries.length === 0, + return Object.values(obj).every((value) => + Array.isArray(value) ? value.length === 0 : !value, ); } +export function isUserFetchAllowed(permissions) { + return permissions.userFetch === true; +} + +// Canonicalizes a plugin-supplied URL into an origin-scoped fetch pattern, +// or null if it can't be one. User grants cover a whole origin: path is +// discarded, port kept. +export function normalizeFetchOrigin(url) { + let parsedUrl = null; + try { + parsedUrl = new URL(url); + } catch { + return null; + } + if (parsedUrl.username || parsedUrl.password) return null; + const host = parsedUrl.hostname.toLowerCase(); + if (!host || host.includes("*")) return null; + if (parsedUrl.protocol === "http:") { + if (!isLoopbackHost(host)) return null; + } else if (parsedUrl.protocol !== "https:") { + return null; + } + const port = parsedUrl.port ? `:${parsedUrl.port}` : ""; + return `${parsedUrl.protocol}//${host}${port}/*`; +} + +// Sanitizes stored user-granted origins into canonical fetch patterns. The +// installed-plugins list lives in the user's preferences record, we need to +// sanitize before using it. +export function parseUserGrantedFetchOrigins(origins) { + if (!Array.isArray(origins)) return []; + return unique(origins.map(normalizeFetchOrigin).filter(Boolean)); +} + export function isFetchAllowed(url, permissions) { let parsedUrl = null; try { diff --git a/src/js/plugins/pluginPreferencesManager.js b/src/js/plugins/pluginPreferencesManager.js index 63a8829c..770aac7f 100644 --- a/src/js/plugins/pluginPreferencesManager.js +++ b/src/js/plugins/pluginPreferencesManager.js @@ -1,4 +1,5 @@ import { Signal, ReactiveStore, ComputedMap } from "/js/signals.js"; +import { parseUserGrantedFetchOrigins } from "/js/plugins/pluginPermissions.js"; // Handles persisting plugin settings in user preferences export class PluginPreferencesManager extends ReactiveStore { @@ -81,6 +82,28 @@ export class PluginPreferencesManager extends ReactiveStore { })); } + // User-granted fetch origins are kept apart from the manifest permissions. + async addUserGrantedFetchOrigin(pluginId, origin) { + await this.updateInstalledPlugin(pluginId, (entry) => { + const granted = parseUserGrantedFetchOrigins( + entry.userGrantedFetchOrigins, + ); + if (granted.includes(origin)) { + return { ...entry, userGrantedFetchOrigins: granted }; + } + return { ...entry, userGrantedFetchOrigins: [...granted, origin] }; + }); + } + + async removeUserGrantedFetchOrigin(pluginId, origin) { + await this.updateInstalledPlugin(pluginId, (entry) => ({ + ...entry, + userGrantedFetchOrigins: parseUserGrantedFetchOrigins( + entry.userGrantedFetchOrigins, + ).filter((granted) => granted !== origin), + })); + } + readSettingsForPlugin(pluginId) { return this.preferencesProvider .requirePreferences() diff --git a/src/js/plugins/pluginService.js b/src/js/plugins/pluginService.js index 8dc4416b..7263f2e4 100644 --- a/src/js/plugins/pluginService.js +++ b/src/js/plugins/pluginService.js @@ -5,6 +5,7 @@ import { hidePluginModal, showPluginInstallPermissionsModal, showPluginUpdatePermissionsModal, + showPluginFetchPermissionModal, } from "/js/plugins/pluginModal.js"; import { showPluginToast, hidePluginToast, showToast } from "/js/toasts.js"; import { PluginRenderer } from "/js/plugins/pluginRendering.js"; @@ -31,6 +32,9 @@ import { diffPermissions, isEmptyPermissions, isActionAllowed, + isUserFetchAllowed, + parseUserGrantedFetchOrigins, + normalizeFetchOrigin, } from "/js/plugins/pluginPermissions.js"; import { compareVersions, groupBy, isDev, sortBy } from "/js/utils.js"; import { Signal, SignalMap, SignalSet, ReactiveStore } from "/js/signals.js"; @@ -48,6 +52,17 @@ function requireHostMethodArg(method, name, value) { export const PLUGIN_PREVIEW_QUERY_PARAM = "plugin-preview"; +function getGrantedOriginsForPlugin(entry) { + return parseUserGrantedFetchOrigins(entry?.userGrantedFetchOrigins); +} + +// Whether the plugin's settings page has a host-owned section to render. +// Keyed off the same normalization the section uses, so the settings link +// can't point at an empty section. +function hasSystemSettings(entry) { + return getGrantedOriginsForPlugin(entry).length > 0; +} + // Page id must also be a valid URL segment const PAGE_ID_PATTERN = /^[a-z0-9-]+$/; @@ -173,6 +188,7 @@ export class PluginService extends ReactiveStore { author: entry.author, enabled: entry.enabled, hasSettings: this.$settingTabs.get(entry.id) !== null, + hasSystemSettings: hasSystemSettings(entry), })); }); this.$settingTabs = new SignalMap(); @@ -205,6 +221,7 @@ export class PluginService extends ReactiveStore { ? new PluginLocalDataStore(session.did) : new PluginMemoryDataStore(); this.isPreviewMode = false; + this._pendingFetchPermissionRequests = new Set(); this._dataLayer = dataLayer; this._hiddenFeedItemsStore = hiddenFeedItemsStore; this._setupRegistries(); @@ -521,6 +538,15 @@ export class PluginService extends ReactiveStore { return pluginFetch(permissions, url, init); }); + this.pluginBridge.addHostMethod( + "requestFetchPermission", + (plugin, { url }) => this._requestFetchPermission(plugin.pluginId, url), + ); + + this.pluginBridge.addHostMethod("getUserGrantedFetchOrigins", (plugin) => + this.getUserGrantedFetchOrigins(plugin.pluginId), + ); + this.pluginBridge.addHostMethod("getPost", async (plugin, { uri }) => { try { return await this._dataLayer.declarative.ensurePost(uri); @@ -671,7 +697,50 @@ export class PluginService extends ReactiveStore { _getPermissionsForPlugin(pluginId) { const entry = this.prefManager.$installedPlugin.get(pluginId); - return parsePermissions(entry?.permissions ?? {}); + const permissions = parsePermissions(entry?.permissions ?? {}); + if (!isUserFetchAllowed(permissions)) return permissions; + const granted = this.getUserGrantedFetchOrigins(pluginId); + if (granted.length === 0) return permissions; + return { + ...permissions, + fetch: [...(permissions.fetch ?? []), ...granted], + }; + } + + async _requestFetchPermission(pluginId, url) { + const entry = this.prefManager.$installedPlugin.get(pluginId); + if (!isUserFetchAllowed(parsePermissions(entry?.permissions ?? {}))) { + throw new Error(`"${pluginId}" does not have the "userFetch" permission`); + } + const origin = normalizeFetchOrigin(url); + if (!origin) return false; + if (this._getPermissionsForPlugin(pluginId).fetch?.includes(origin)) { + return true; + } + if (this._pendingFetchPermissionRequests.has(pluginId)) return false; + this._pendingFetchPermissionRequests.add(pluginId); + let granted = false; + try { + granted = await showPluginFetchPermissionModal({ + pluginName: entry?.name ?? null, + origin, + }); + } finally { + this._pendingFetchPermissionRequests.delete(pluginId); + } + if (!granted) return false; + await this.prefManager.addUserGrantedFetchOrigin(pluginId, origin); + return true; + } + + async revokeUserGrantedFetchOrigin(pluginId, origin) { + await this.prefManager.removeUserGrantedFetchOrigin(pluginId, origin); + } + + getUserGrantedFetchOrigins(pluginId) { + return getGrantedOriginsForPlugin( + this.prefManager.$installedPlugin.get(pluginId), + ); } _requireActionPermission(plugin, action) { @@ -1022,14 +1091,23 @@ export class PluginService extends ReactiveStore { if (!accepted) throw new PermissionsDeclinedError(); } const { name, version, author, description } = liveManifest; - await this.prefManager.updateInstalledPlugin(pluginId, (entry) => ({ - ...entry, - name, - version, - author, - description, - permissions, - })); + const keepUserGrantedFetch = isUserFetchAllowed(permissions); + await this.prefManager.updateInstalledPlugin(pluginId, (entry) => { + const next = { + ...entry, + name, + version, + author, + description, + permissions, + }; + // Drop stored grants when the new manifest no longer requests + // userFetch, so a later manifest that re-adds the scope starts fresh. + if (!keepUserGrantedFetch && next.userGrantedFetchOrigins) { + delete next.userGrantedFetchOrigins; + } + return next; + }); await this.pluginBridge.reloadPlugin( pluginId, version, diff --git a/src/js/views/installedPlugins.view.js b/src/js/views/installedPlugins.view.js index d5f572b1..510bbcea 100644 --- a/src/js/views/installedPlugins.view.js +++ b/src/js/views/installedPlugins.view.js @@ -304,7 +304,8 @@ class InstalledPluginsView extends View { : "Update"} ` : ""} - ${plugin.enabled && plugin.hasSettings + ${plugin.enabled && + (plugin.hasSettings || plugin.hasSystemSettings) ? html` +
+ +
+ `; +} + +function systemSettingsTemplate({ origins, onRevoke }) { + return html`
+
System settings
+
+

Network access

+

+ You granted this plugin permission to send requests to these addresses. +

+
    + ${origins.map( + (origin) => + html`
  • + ${origin} + +
    • `, + )} +
+
+
`; +} class PluginSettingsView extends View { async render({ root, router, layout, params, context: { pluginService } }) { @@ -74,25 +123,40 @@ class PluginSettingsView extends View { ${pluginLoadError.message ?? "This plugin failed to load."}

`; } + const grantedOrigins = + pluginService.getUserGrantedFetchOrigins(pluginId); if (!settingTab) { if (pluginLoading) { return html`
`; } - return html`

- This plugin has no settings. -

`; + if (grantedOrigins.length === 0) { + return html`

+ This plugin has no settings. +

`; + } } - return html`
- -
`; + return html`${settingTab + ? pluginOwnedSettingsTemplate({ pluginService, settingTab }) + : ""} + ${grantedOrigins.length > 0 + ? systemSettingsTemplate({ + origins: grantedOrigins, + onRevoke: (origin) => + pluginService + .revokeUserGrantedFetchOrigin(pluginId, origin) + .catch((e) => { + console.error(e); + showToast("Failed to revoke access", { + style: "error", + }); + }), + }) + : ""}`; })()} `, diff --git a/tests/e2e/specs/views/installedPlugins.view.test.js b/tests/e2e/specs/views/installedPlugins.view.test.js index 758ee692..10b6b3cb 100644 --- a/tests/e2e/specs/views/installedPlugins.view.test.js +++ b/tests/e2e/specs/views/installedPlugins.view.test.js @@ -1,7 +1,11 @@ import { test, expect } from "../../base.js"; import { login } from "../../helpers.js"; import { MockServer } from "../../mockServer.js"; -import { TEST_PLUGIN_ID, TEST_PLUGIN_MANIFEST } from "../../testPlugins.js"; +import { + TEST_PLUGIN_ID, + TEST_PLUGIN_MANIFEST, + getNoSettingsPluginSource, +} from "../../testPlugins.js"; function seedInstalled(mockServer) { mockServer.installedPlugins = [{ ...TEST_PLUGIN_MANIFEST, enabled: false }]; @@ -94,6 +98,31 @@ test.describe("Installed plugins view", () => { }); }); + test("shows the Settings link for a plugin whose only settings are system-owned", async ({ + page, + }) => { + const mockServer = new MockServer(); + mockServer.localPluginSource = getNoSettingsPluginSource(); + await mockServer.setup(page); + await login(page); + mockServer.installedPlugins = [ + { + ...TEST_PLUGIN_MANIFEST, + enabled: true, + permissions: { userFetch: true }, + userGrantedFetchOrigins: ["https://api.example.com/*"], + }, + ]; + + await page.goto("/plugins/installed"); + const sampleItem = page.locator(".plugin-list-item", { + hasText: "Test Plugin", + }); + await expect(sampleItem.locator(".plugin-settings-link")).toBeVisible({ + timeout: 10000, + }); + }); + test("uninstall button removes the plugin after confirmation", async ({ page, }) => { diff --git a/tests/e2e/specs/views/pluginSettings.view.test.js b/tests/e2e/specs/views/pluginSettings.view.test.js index f5b4811d..34514598 100644 --- a/tests/e2e/specs/views/pluginSettings.view.test.js +++ b/tests/e2e/specs/views/pluginSettings.view.test.js @@ -12,6 +12,8 @@ import { getFailingPluginSource, getNoSettingsPluginSource, getTestPluginSource, + getFetchPermissionPluginSource, + REQUESTED_FETCH_ORIGIN, } from "../../testPlugins.js"; const PLUGIN_ID = TEST_PLUGIN_ID; @@ -337,6 +339,121 @@ test.describe("Plugin settings view", () => { ).toBeVisible({ timeout: 10000 }); }); + test.describe("User-granted fetch origins", () => { + function seedPromptingPlugin(mockServer) { + mockServer.installedPlugins = [ + { + ...TEST_PLUGIN_MANIFEST, + enabled: true, + permissions: { userFetch: true }, + }, + ]; + } + + test("grants an origin from the prompt and lists it in settings", async ({ + page, + }) => { + const mockServer = new MockServer(); + mockServer.localPluginSource = getFetchPermissionPluginSource(); + await mockServer.setup(page); + await login(page); + seedPromptingPlugin(mockServer); + + await page.goto(`/plugin/${PLUGIN_ID}/settings`); + await expect( + page.locator('[data-testid="fetch-permission-prompt"]'), + ).toBeVisible({ timeout: 10000 }); + await page.locator('[data-testid="modal-confirm-button"]').click(); + + const networkAccess = page.locator( + '[data-testid="plugin-network-access"]', + ); + await expect(networkAccess).toBeVisible({ timeout: 10000 }); + await expect(networkAccess).toContainText(REQUESTED_FETCH_ORIGIN); + }); + + test("revoking removes the origin", async ({ page }) => { + const mockServer = new MockServer(); + mockServer.localPluginSource = getFetchPermissionPluginSource(); + await mockServer.setup(page); + await login(page); + seedPromptingPlugin(mockServer); + + await page.goto(`/plugin/${PLUGIN_ID}/settings`); + await page + .locator('[data-testid="modal-confirm-button"]') + .click({ timeout: 10000 }); + const networkAccess = page.locator( + '[data-testid="plugin-network-access"]', + ); + await expect(networkAccess).toBeVisible({ timeout: 10000 }); + + await networkAccess + .locator('[data-testid="revoke-fetch-origin"]') + .click(); + await expect(networkAccess).toBeHidden({ timeout: 10000 }); + }); + + test("renders plugin-owned and system-owned settings as separate sections", async ({ + page, + }) => { + const mockServer = new MockServer(); + mockServer.localPluginSource = getTestPluginSource(); + await mockServer.setup(page); + await login(page); + mockServer.installedPlugins = [ + { + ...TEST_PLUGIN_MANIFEST, + enabled: true, + permissions: { userFetch: true }, + userGrantedFetchOrigins: [REQUESTED_FETCH_ORIGIN], + }, + ]; + + await page.goto(`/plugin/${PLUGIN_ID}/settings`); + await expect( + page.locator('[data-testid="plugin-owned-settings"]'), + ).toBeVisible({ timeout: 10000 }); + await expect( + page.locator('[data-testid="plugin-system-settings"]'), + ).toBeVisible(); + }); + + test("omits the system section when nothing is granted", async ({ + page, + }) => { + const mockServer = new MockServer(); + mockServer.localPluginSource = getTestPluginSource(); + await mockServer.setup(page); + await login(page); + seedEnabled(mockServer); + + await page.goto(`/plugin/${PLUGIN_ID}/settings`); + await expect( + page.locator('[data-testid="plugin-owned-settings"]'), + ).toBeVisible({ timeout: 10000 }); + await expect( + page.locator('[data-testid="plugin-system-settings"]'), + ).toBeHidden(); + }); + + test("declining leaves nothing granted", async ({ page }) => { + const mockServer = new MockServer(); + mockServer.localPluginSource = getFetchPermissionPluginSource(); + await mockServer.setup(page); + await login(page); + seedPromptingPlugin(mockServer); + + await page.goto(`/plugin/${PLUGIN_ID}/settings`); + await page + .locator('[data-testid="modal-cancel-button"]') + .click({ timeout: 10000 }); + await expect( + page.locator('[data-testid="plugin-network-access"]'), + ).toBeHidden(); + }); + }); + test.describe("Logged-out behavior", () => { test("redirects to /login when not authenticated", async ({ page }) => { await page.goto(`/plugin/${PLUGIN_ID}/settings`); diff --git a/tests/e2e/testPlugins.js b/tests/e2e/testPlugins.js index c92b6299..1d6bcacd 100644 --- a/tests/e2e/testPlugins.js +++ b/tests/e2e/testPlugins.js @@ -256,6 +256,20 @@ class TestPlugin extends Plugin { TestPlugin.register(); `; +// Asks for a user-granted fetch origin as soon as it loads, so the host's +// permission prompt appears without needing plugin-rendered UI to trigger it. +export const REQUESTED_FETCH_ORIGIN = "https://api.example.com/*"; + +const FETCH_PERMISSION_PLUGIN_BODY = /* js */ ` +class TestPlugin extends Plugin { + async onload() { + await requestFetchPermission("https://api.example.com/v1/chat"); + } +} + +TestPlugin.register(); +`; + // A plugin that seeds the composer with a signature string on every open // (post and reply). Used by composer-init e2e tests. const POST_COMPOSER_INIT_PLUGIN_BODY = /* js */ ` @@ -348,6 +362,10 @@ export function getNoSettingsPluginSource() { return getWorkerSource() + "\n" + NO_SETTINGS_PLUGIN_BODY; } +export function getFetchPermissionPluginSource() { + return getWorkerSource() + "\n" + FETCH_PERMISSION_PLUGIN_BODY; +} + export function getPostComposerInitPluginSource() { return getWorkerSource() + "\n" + POST_COMPOSER_INIT_PLUGIN_BODY; } diff --git a/tests/unit/specs/plugins/pluginModal.test.js b/tests/unit/specs/plugins/pluginModal.test.js index 61b9afec..3b90267d 100644 --- a/tests/unit/specs/plugins/pluginModal.test.js +++ b/tests/unit/specs/plugins/pluginModal.test.js @@ -4,8 +4,11 @@ import { showPluginModal as _showPluginModal, updatePluginModal as _updatePluginModal, hidePluginModal, + showPluginInstallPermissionsModal, + showPluginFetchPermissionModal, } from "/js/plugins/pluginModal.js"; import { PluginRenderer } from "/js/plugins/pluginRendering.js"; +import { respondToConfirm, waitFor } from "../../testHelpers.js"; function showPluginModal(opts) { const pluginRenderer = new PluginRenderer(null, opts.pluginId); @@ -442,3 +445,39 @@ describe("hidePluginModal", () => { assert.deepEqual(onDismiss.mock.callCount(), 0); }); }); + +describe("permission prompts", () => { + it("describes a userFetch scope in the install prompt", async () => { + const prompting = showPluginInstallPermissionsModal({ + pluginName: "Alpha", + permissions: { userFetch: true }, + }); + await waitFor(() => + document.querySelector('[data-testid="permission-prompt"]'), + ); + const prompt = document.querySelector('[data-testid="permission-prompt"]'); + // A userFetch-only manifest must not render an empty permission list + assert(prompt.querySelector(".permission-prompt-section")); + await respondToConfirm(false); + await prompting; + }); + + it("renders the requested origin in the fetch prompt", async () => { + const prompting = showPluginFetchPermissionModal({ + pluginName: "Alpha", + origin: "https://api.example.com/*", + }); + await waitFor(() => + document.querySelector('[data-testid="fetch-permission-prompt"]'), + ); + const prompt = document.querySelector( + '[data-testid="fetch-permission-prompt"]', + ); + assert.equal( + prompt.querySelector("code").textContent, + "https://api.example.com/*", + ); + await respondToConfirm(false); + assert.equal(await prompting, false); + }); +}); diff --git a/tests/unit/specs/plugins/pluginPermissions.test.js b/tests/unit/specs/plugins/pluginPermissions.test.js index 904cf119..afc20c8b 100644 --- a/tests/unit/specs/plugins/pluginPermissions.test.js +++ b/tests/unit/specs/plugins/pluginPermissions.test.js @@ -6,6 +6,9 @@ import { isEmptyPermissions, isFetchAllowed, isActionAllowed, + isUserFetchAllowed, + normalizeFetchOrigin, + parseUserGrantedFetchOrigins, } from "/js/plugins/pluginPermissions.js"; describe("parsePermissions", () => { @@ -137,6 +140,38 @@ describe("diffPermissions", () => { }); }); +describe("diffPermissions (boolean scopes)", () => { + it("reports a newly declared userFetch", () => { + assert.deepEqual(diffPermissions({}, { userFetch: true }), { + userFetch: true, + }); + }); + + it("does not report a userFetch that was already granted", () => { + assert.equal( + diffPermissions({ userFetch: true }, { userFetch: true }), + null, + ); + }); + + it("diffs patterns alongside a boolean scope", () => { + assert.deepEqual( + diffPermissions( + { fetch: ["https://a.com/*"] }, + { fetch: ["https://a.com/*", "https://b.com/*"], userFetch: true }, + ), + { fetch: ["https://b.com/*"], userFetch: true }, + ); + }); + + it("survives a stored value whose shape doesn't match the manifest", () => { + assert.deepEqual( + diffPermissions({ fetch: true }, { fetch: ["https://a.com/*"] }), + { fetch: ["https://a.com/*"] }, + ); + }); +}); + describe("isEmptyPermissions (missing-key shape)", () => { it("returns true for an empty object", () => { assert(isEmptyPermissions({})); @@ -151,6 +186,140 @@ describe("isEmptyPermissions", () => { it("returns false when any array is non-empty", () => { assert(!isEmptyPermissions({ fetch: ["https://a.com/*"] })); }); + + // Load-bearing: this is what keeps a prompting plugin out of preview + // installs, and userFetch is a boolean rather than an array. + it("returns false for a userFetch grant", () => { + assert(!isEmptyPermissions({ userFetch: true })); + }); + + it("returns true for a falsy userFetch", () => { + assert(isEmptyPermissions({ userFetch: false })); + }); +}); + +describe("parsePermissions (userFetch)", () => { + it("keeps a literal true", () => { + assert.deepEqual(parsePermissions({ userFetch: true }), { + userFetch: true, + }); + }); + + it("drops truthy non-boolean values", () => { + assert.deepEqual(parsePermissions({ userFetch: "yes" }), {}); + assert.deepEqual(parsePermissions({ userFetch: 1 }), {}); + assert.deepEqual(parsePermissions({ userFetch: false }), {}); + }); +}); + +describe("isUserFetchAllowed", () => { + it("requires the parsed flag", () => { + assert(isUserFetchAllowed({ userFetch: true })); + assert(!isUserFetchAllowed({})); + assert(!isUserFetchAllowed({ fetch: ["https://a.com/*"] })); + }); +}); + +describe("parseUserGrantedFetchOrigins", () => { + it("normalizes and de-duplicates stored origins", () => { + assert.deepEqual( + parseUserGrantedFetchOrigins([ + "https://api.example.com/v1", + "https://api.example.com/v2", + "http://localhost:11434/api", + ]), + ["https://api.example.com/*", "http://localhost:11434/*"], + ); + }); + + // The preferences record is writable by anything holding the account's + // credentials, so stored values are untrusted input + it("drops anything that isn't a normalizable origin", () => { + assert.deepEqual( + parseUserGrantedFetchOrigins([ + "https://*/*", + "http://evil.example.com/*", + "not a url", + 42, + null, + ]), + [], + ); + }); + + it("returns an empty array for a non-array value", () => { + assert.deepEqual(parseUserGrantedFetchOrigins(undefined), []); + assert.deepEqual(parseUserGrantedFetchOrigins("https://a.com/*"), []); + assert.deepEqual(parseUserGrantedFetchOrigins(null), []); + }); +}); + +describe("normalizeFetchOrigin", () => { + it("discards the path and keeps the origin", () => { + assert.equal( + normalizeFetchOrigin("https://api.example.com/v1/chat?key=1#x"), + "https://api.example.com/*", + ); + }); + + it("preserves an explicit port", () => { + assert.equal( + normalizeFetchOrigin("http://localhost:11434/api/generate"), + "http://localhost:11434/*", + ); + }); + + it("drops a default port, matching URL normalization", () => { + assert.equal( + normalizeFetchOrigin("https://example.com:443/foo"), + "https://example.com/*", + ); + }); + + it("lowercases the host", () => { + assert.equal( + normalizeFetchOrigin("https://API.Example.COM/foo"), + "https://api.example.com/*", + ); + }); + + it("allows http only for loopback", () => { + assert.equal( + normalizeFetchOrigin("http://127.0.0.1:8080/"), + "http://127.0.0.1:8080/*", + ); + assert.equal( + normalizeFetchOrigin("http://[::1]:8080/"), + "http://[::1]:8080/*", + ); + assert.equal(normalizeFetchOrigin("http://example.com/"), null); + }); + + it("rejects embedded credentials", () => { + assert.equal(normalizeFetchOrigin("https://user:pass@example.com/"), null); + assert.equal(normalizeFetchOrigin("https://user@example.com/"), null); + }); + + it("rejects non-http(s) schemes", () => { + assert.equal(normalizeFetchOrigin("ftp://example.com/"), null); + assert.equal(normalizeFetchOrigin("javascript:alert(1)"), null); + assert.equal(normalizeFetchOrigin("data:text/plain,hi"), null); + }); + + it("rejects unparseable input", () => { + assert.equal(normalizeFetchOrigin("not a url"), null); + assert.equal(normalizeFetchOrigin(""), null); + assert.equal(normalizeFetchOrigin(null), null); + }); + + it("produces a pattern that isFetchAllowed accepts for that origin only", () => { + const permissions = { + fetch: [normalizeFetchOrigin("https://api.example.com/v1")], + }; + assert(isFetchAllowed("https://api.example.com/other", permissions)); + assert(!isFetchAllowed("https://evil.example.com/", permissions)); + assert(!isFetchAllowed("http://api.example.com/", permissions)); + }); }); describe("isFetchAllowed", () => { diff --git a/tests/unit/specs/plugins/pluginService.test.js b/tests/unit/specs/plugins/pluginService.test.js index 951725d9..4f34b34b 100644 --- a/tests/unit/specs/plugins/pluginService.test.js +++ b/tests/unit/specs/plugins/pluginService.test.js @@ -9,6 +9,7 @@ import { EventEmitter } from "/js/eventEmitter.js"; import { HiddenFeedItemsStore } from "/js/dataLayer/hiddenFeedItemsStore.js"; import { Constellation } from "/js/constellation.js"; import { respondToConfirm } from "../../testHelpers.js"; +import { isFetchAllowed } from "/js/plugins/pluginPermissions.js"; function emptyDataLayer() { const dataLayer = new EventEmitter(); @@ -822,6 +823,44 @@ describe("$pluginsInfo", () => { assert.deepEqual(info[0].id, "alpha"); }); + it("flags hasSystemSettings from granted fetch origins", () => { + const { service, state } = makeService({}); + state.installedPlugins = [ + { id: "alpha", name: "Alpha", version: "1.0.0", enabled: true }, + { + id: "beta", + name: "Beta", + version: "1.0.0", + enabled: true, + userGrantedFetchOrigins: ["https://api.example.com/*"], + }, + ]; + const info = service.$pluginsInfo.get(); + assert.equal( + info.find((plugin) => plugin.id === "alpha").hasSystemSettings, + false, + ); + assert.equal( + info.find((plugin) => plugin.id === "beta").hasSystemSettings, + true, + ); + }); + + it("does not flag hasSystemSettings for stored origins that can't be normalized", () => { + const { service, state } = makeService({}); + state.installedPlugins = [ + { + id: "alpha", + name: "Alpha", + version: "1.0.0", + enabled: true, + userGrantedFetchOrigins: ["https://*/*", 42], + }, + ]; + // Otherwise the settings link would point at an empty system section + assert.equal(service.$pluginsInfo.get()[0].hasSystemSettings, false); + }); + it("includes __LOCAL plugins when localPluginsEnabled is true", () => { const { service, state } = makeService({ localListings: [] }); state.installedPlugins = [ @@ -2590,3 +2629,226 @@ describe("getPostComposerInit", () => { }); }); }); + +describe("user-granted fetch origins", () => { + async function makeInstalledService({ + permissions = { userFetch: true }, + } = {}) { + const { state, provider } = makeProvider(); + const service = makeServiceWithRealBridge({ provider }); + await service.prefManager.addInstalledPlugin({ + id: "alpha", + name: "Alpha", + version: "1.0.0", + author: "Someone", + repo: "ow/alpha", + enabled: true, + permissions, + }); + return { service, state }; + } + + function callRequest(service, url) { + return service.pluginBridge._hostCallHandlers.get("requestFetchPermission")( + { pluginId: "alpha" }, + { url }, + ); + } + + function storedEntry(state) { + return state.installedPlugins.find((plugin) => plugin.id === "alpha"); + } + + it("throws for a plugin without the userFetch permission", async () => { + const { service } = await makeInstalledService({ permissions: {} }); + await assert.rejects( + () => callRequest(service, "https://api.example.com/v1"), + /userFetch/, + ); + }); + + it("grants the origin when the user confirms", async () => { + const { service, state } = await makeInstalledService(); + const requesting = callRequest(service, "https://api.example.com/v1/chat"); + await respondToConfirm(true); + assert.equal(await requesting, true); + assert.deepEqual(storedEntry(state).userGrantedFetchOrigins, [ + "https://api.example.com/*", + ]); + assert( + isFetchAllowed( + "https://api.example.com/anything", + service._getPermissionsForPlugin("alpha"), + ), + ); + }); + + it("does not write the grant into the manifest permissions", async () => { + const { service, state } = await makeInstalledService(); + const requesting = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(true); + await requesting; + // Laundering a user grant into entry.permissions would make a later + // manifest claiming the same host diff to nothing. + assert.deepEqual(storedEntry(state).permissions, { userFetch: true }); + }); + + it("resolves true without prompting when already granted", async () => { + const { service } = await makeInstalledService(); + const requesting = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(true); + await requesting; + assert.equal( + await callRequest(service, "https://api.example.com/other"), + true, + ); + assert.equal( + document.querySelector('[data-testid="fetch-permission-prompt"]'), + null, + ); + }); + + it("resolves false without prompting for a url that can't be an origin", async () => { + const { service } = await makeInstalledService(); + assert.equal(await callRequest(service, "http://example.com/"), false); + assert.equal(await callRequest(service, "not a url"), false); + assert.equal( + document.querySelector('[data-testid="fetch-permission-prompt"]'), + null, + ); + }); + + it("grants nothing when the user declines", async () => { + const { service, state } = await makeInstalledService(); + const requesting = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(false); + assert.equal(await requesting, false); + assert.equal(storedEntry(state).userGrantedFetchOrigins, undefined); + }); + + it("prompts again after a decline", async () => { + const { service, state } = await makeInstalledService(); + const declining = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(false); + await declining; + + const retrying = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(true); + assert.equal(await retrying, true); + assert.deepEqual(storedEntry(state).userGrantedFetchOrigins, [ + "https://api.example.com/*", + ]); + }); + + it("refuses a second request while a prompt is open", async () => { + const { service } = await makeInstalledService(); + const first = callRequest(service, "https://api.example.com/v1"); + const second = await callRequest(service, "https://other.example.com/v1"); + assert.equal(second, false); + await respondToConfirm(true); + assert.equal(await first, true); + }); + + it("ignores a stored grant that isn't a normalizable origin", async () => { + const { service } = await makeInstalledService(); + await service.prefManager.updateInstalledPlugin("alpha", (entry) => ({ + ...entry, + userGrantedFetchOrigins: ["https://*/*", "http://evil.example.com/*", 42], + })); + const permissions = service._getPermissionsForPlugin("alpha"); + assert.deepEqual(permissions.fetch ?? [], []); + assert(!isFetchAllowed("https://evil.example.com/", permissions)); + }); + + it("merges user grants with manifest patterns", async () => { + const { service } = await makeInstalledService({ + permissions: { userFetch: true, fetch: ["https://declared.example/*"] }, + }); + const requesting = callRequest(service, "https://granted.example/v1"); + await respondToConfirm(true); + await requesting; + const permissions = service._getPermissionsForPlugin("alpha"); + assert(isFetchAllowed("https://declared.example/x", permissions)); + assert(isFetchAllowed("https://granted.example/x", permissions)); + }); + + it("revokes a granted origin", async () => { + const { service } = await makeInstalledService(); + const requesting = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(true); + await requesting; + await service.revokeUserGrantedFetchOrigin( + "alpha", + "https://api.example.com/*", + ); + assert.deepEqual(service.getUserGrantedFetchOrigins("alpha"), []); + assert( + !isFetchAllowed( + "https://api.example.com/x", + service._getPermissionsForPlugin("alpha"), + ), + ); + }); + + it("exposes granted origins to the plugin", async () => { + const { service } = await makeInstalledService(); + const requesting = callRequest(service, "https://api.example.com/v1"); + await respondToConfirm(true); + await requesting; + const origins = await service.pluginBridge._hostCallHandlers.get( + "getUserGrantedFetchOrigins", + )({ pluginId: "alpha" }, {}); + assert.deepEqual(origins, ["https://api.example.com/*"]); + }); +}); + +describe("preview installs and userFetch", () => { + // Preview's guarantee is "runs with nothing granted"; a plugin that can + // prompt for origins at runtime must not slip through it. + it("refuses to preview a plugin declaring userFetch", async () => { + const { state, provider } = makeProvider(); + const service = makeServiceWithRealBridge({ provider }); + service.remoteRegistry = { + getListing: async () => ({ id: "alpha", repo: "ow/alpha" }), + getListings: async () => [{ id: "alpha", repo: "ow/alpha" }], + }; + service.sourceProvider = { + getLiveManifest: async () => ({ + id: "alpha", + name: "Alpha", + version: "1.0.0", + permissions: { userFetch: true }, + }), + }; + + await service._installPreviewPlugin("alpha"); + + assert.deepEqual(state.installedPlugins, []); + }); +}); + +describe("updating a plugin that adds userFetch", () => { + it("prompts with the new scope and stores it", async () => { + const { service, state } = makeService({ + remoteListings: [{ id: "alpha", repo: "ow/alpha" }], + liveManifests: { + alpha: { id: "alpha", name: "Alpha", version: "1.0.0" }, + }, + }); + await service.installPlugin("alpha"); + service.sourceProvider.getLiveManifest = async () => ({ + id: "alpha", + name: "Alpha", + version: "1.1.0", + permissions: { userFetch: true }, + }); + + const updating = service.updatePlugin("alpha"); + await respondToConfirm(true); + assert.deepEqual(await updating, { updated: true, version: "1.1.0" }); + const entry = state.installedPlugins.find( + (plugin) => plugin.id === "alpha", + ); + assert.deepEqual(entry.permissions, { userFetch: true }); + }); +}); -- knotmirror 0.0.1 From 54b6bc6ef0c44850ef4a23fae3d2e6d3f20e950f Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 18:46:42 -0500 Subject: [PATCH 07/25] Shorten delay for showing global loading spinner --- package.json | 2 +- src/index.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index e5dd42a8..52552395 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.178", + "version": "0.18.179", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/index.html b/src/index.html index 669f8079..2a9860c6 100644 --- a/src/index.html +++ b/src/index.html @@ -34,13 +34,13 @@ `; } - // Show loading state if the app hasn't loaded within 2 seconds, and show an error state if it hasn't loaded within 10 seconds. + // Show loading state if the app hasn't loaded within 1 second, and show an error state if it hasn't loaded within 10 seconds. setTimeout(() => { if (window.hasLoaded || window.hasErrored) { return; } showGlobalLoadingState(); - }, 2000); + }, 1000); setTimeout(() => { if (window.hasLoaded || window.hasErrored) { -- knotmirror 0.0.1 From f9f342d18322cc6b07e0a59734875c2973307076 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 18:51:45 -0500 Subject: [PATCH 08/25] Update plugin input styles --- package.json | 2 +- src/css/style.css | 40 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 52552395..87fd2c8c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.179", + "version": "0.18.180", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index e2b6c029..79b97ee3 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -10751,17 +10751,49 @@ h2.setting-item-name { } .setting-item-dropdown, -.plugin-content textarea { +.setting-item-text-input, +.setting-item-textarea, +.plugin-content textarea, +.plugin-content + :is( + input:not([type]), + input[type="text"], + input[type="search"], + input[type="email"], + input[type="url"], + input[type="tel"], + input[type="password"], + input[type="number"] + ) { font-size: 16px; - padding: 8px 10px; + font-family: inherit; + padding: 10px 12px; border-radius: var(--text-input-border-radius); - border: var(--hair) solid var(--generic-border-color); + border: var(--hair) solid var(--post-border-color); background: var(--text-input-background-color); color: var(--text-color); } +.setting-item-text-input:focus, +.setting-item-textarea:focus, +.plugin-content textarea:focus, +.plugin-content + :is( + input:not([type]), + input[type="text"], + input[type="search"], + input[type="email"], + input[type="url"], + input[type="tel"], + input[type="password"], + input[type="number"] + ):focus { + outline: 2px solid var(--highlight-color); + outline-offset: -1px; +} + +.setting-item-textarea, .plugin-content textarea { - font-family: inherit; resize: vertical; } -- knotmirror 0.0.1 From 9d59916d3f8e513a4da4e890a22f14a05aaf8705 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 23:41:53 -0500 Subject: [PATCH 09/25] Update label styles --- package.json | 2 +- src/css/style.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 87fd2c8c..3da236ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.180", + "version": "0.18.181", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 79b97ee3..8683cc89 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1864,6 +1864,8 @@ container-link { color: var(--text-color-muted); width: fit-content; border-radius: var(--label-badge-border-radius); + border: none; + background-color: inherit; } .label-badge-image { -- knotmirror 0.0.1 From 7fcee921965c4c71ae962496cf77d53eadff10ae Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Thu, 13 Aug 2026 23:47:01 -0500 Subject: [PATCH 10/25] Remove home view opacity hack --- package.json | 2 +- src/js/views/home.view.js | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/package.json b/package.json index 3da236ad..949411a4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.181", + "version": "0.18.182", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js index 42e9f4e7..1cf4bade 100644 --- a/src/js/views/home.view.js +++ b/src/js/views/home.view.js @@ -416,13 +416,7 @@ class HomeView extends View { root.addEventListener("page-restore", (e) => { const scrollY = e.detail?.scrollY ?? 0; - root.style.opacity = "0"; window.scrollTo(0, scrollY); - requestAnimationFrame(() => { - requestAnimationFrame(() => { - root.style.opacity = "1"; - }); - }); for (const observer of postSeenObservers.values()) { observer.connect(); } -- knotmirror 0.0.1 From dc732d6e450ca32a4b5b48346e02622133250a85 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 00:16:41 -0500 Subject: [PATCH 11/25] Update icons --- package.json | 2 +- src/css/style.css | 4 ++-- src/img/icons/custom/inbox.svg | 2 +- src/img/icons/custom/message-plus-line.svg | 2 +- src/img/icons/custom/reply.svg | 2 +- src/img/icons/custom/repost.svg | 2 +- src/js/templates/icons/inboxIcon.template.js | 16 ++++++++++++---- .../templates/icons/messagePlusIcon.template.js | 16 ++++++++++++---- src/js/templates/icons/replyIcon.template.js | 9 +++++++-- src/js/templates/icons/repostIcon.template.js | 16 ++++++++++++++-- 10 files changed, 52 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 949411a4..b582033e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.182", + "version": "0.18.183", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 8683cc89..870ec5f8 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1950,7 +1950,7 @@ container-link { } .small-post .repost-label .icon path { - fill: var(--text-color-muted); + stroke: var(--text-color-muted); } .small-post .missing-post-indicator { @@ -3346,7 +3346,7 @@ image-carousel { } .notification-icon .repost-icon path { - fill: var(--highlight-color); + stroke: var(--highlight-color); } .notification-icon.verified-icon svg { diff --git a/src/img/icons/custom/inbox.svg b/src/img/icons/custom/inbox.svg index 888a6bdc..0b8665d3 100644 --- a/src/img/icons/custom/inbox.svg +++ b/src/img/icons/custom/inbox.svg @@ -1 +1 @@ - + diff --git a/src/img/icons/custom/message-plus-line.svg b/src/img/icons/custom/message-plus-line.svg index d8e4c8f1..69134f19 100644 --- a/src/img/icons/custom/message-plus-line.svg +++ b/src/img/icons/custom/message-plus-line.svg @@ -1 +1 @@ - + diff --git a/src/img/icons/custom/reply.svg b/src/img/icons/custom/reply.svg index d5a509aa..a8a3b16d 100644 --- a/src/img/icons/custom/reply.svg +++ b/src/img/icons/custom/reply.svg @@ -1 +1 @@ - + diff --git a/src/img/icons/custom/repost.svg b/src/img/icons/custom/repost.svg index f3620b1d..e759385d 100644 --- a/src/img/icons/custom/repost.svg +++ b/src/img/icons/custom/repost.svg @@ -1 +1 @@ - + diff --git a/src/js/templates/icons/inboxIcon.template.js b/src/js/templates/icons/inboxIcon.template.js index b9adaef8..2a7c12f7 100644 --- a/src/js/templates/icons/inboxIcon.template.js +++ b/src/js/templates/icons/inboxIcon.template.js @@ -11,10 +11,18 @@ export function inboxIconTemplate() { fill="none" > + `; diff --git a/src/js/templates/icons/messagePlusIcon.template.js b/src/js/templates/icons/messagePlusIcon.template.js index 9d8c9eea..97e939ac 100644 --- a/src/js/templates/icons/messagePlusIcon.template.js +++ b/src/js/templates/icons/messagePlusIcon.template.js @@ -11,10 +11,18 @@ export function messagePlusIconTemplate() { fill="none" > + `; diff --git a/src/js/templates/icons/replyIcon.template.js b/src/js/templates/icons/replyIcon.template.js index 5ab7cba5..397ecee4 100644 --- a/src/js/templates/icons/replyIcon.template.js +++ b/src/js/templates/icons/replyIcon.template.js @@ -1,16 +1,21 @@ import { html } from "/js/lib/lit-html.js"; +// Source: src/img/icons/custom/reply.svg export function replyIconTemplate() { return html` `; } diff --git a/src/js/templates/icons/repostIcon.template.js b/src/js/templates/icons/repostIcon.template.js index bd5fe3a2..97e98f0c 100644 --- a/src/js/templates/icons/repostIcon.template.js +++ b/src/js/templates/icons/repostIcon.template.js @@ -1,16 +1,28 @@ import { html } from "/js/lib/lit-html.js"; +// Source: src/img/icons/custom/repost.svg export function repostIconTemplate() { return html` + `; } -- knotmirror 0.0.1 From c77316365c563c83aa38aa5ed58e82261b2c5e7c Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 00:24:40 -0500 Subject: [PATCH 12/25] Share scroll restore logic --- package.json | 2 +- src/js/app.js | 8 +- src/js/router.js | 14 ++ src/js/views/bookmarks.view.js | 10 +- src/js/views/chat.view.js | 10 +- src/js/views/chatRequests.view.js | 10 +- src/js/views/communityPluginListing.view.js | 4 - src/js/views/communityPlugins.view.js | 1 - src/js/views/feedDetail.view.js | 10 +- src/js/views/feeds.view.js | 10 +- src/js/views/groupChatDetails.view.js | 12 +- src/js/views/hashtag.view.js | 5 - src/js/views/home.view.js | 4 +- src/js/views/installedPlugins.view.js | 12 -- src/js/views/listDetail.view.js | 10 +- src/js/views/lists.view.js | 10 +- src/js/views/notifications.view.js | 1 - src/js/views/pluginPage.view.js | 4 - src/js/views/pluginSettings.view.js | 4 - src/js/views/postLikes.view.js | 12 +- src/js/views/postQuotes.view.js | 12 +- src/js/views/postReposts.view.js | 12 +- src/js/views/profile.view.js | 9 -- src/js/views/profileFollowers.view.js | 12 +- src/js/views/profileFollowing.view.js | 12 +- src/js/views/profileKnownFollowers.view.js | 12 +- src/js/views/settings.view.js | 4 - src/js/views/settings/advanced.view.js | 4 - src/js/views/settings/appearance.view.js | 4 - src/js/views/settings/blockedAccounts.view.js | 4 - src/js/views/settings/mutedAccounts.view.js | 4 - src/js/views/settings/mutedWords.view.js | 4 - src/js/views/settings/notifications.view.js | 4 - tests/e2e/specs/concerns/scroll.test.js | 60 ++++++++ tests/unit/specs/router.test.js | 133 +++++++++++++++--- 35 files changed, 223 insertions(+), 220 deletions(-) diff --git a/package.json b/package.json index b582033e..cc75a890 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.183", + "version": "0.18.184", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/app.js b/src/js/app.js index 9adceb0d..28d79496 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -255,10 +255,12 @@ export async function main() { router.addRoute(["/", "/intent/compose"], () => homeView, { layoutOptions: { activeNavItem: "home" }, + scrollRestore: "always", }); router.addRoute("/login", () => loginView, { layout: false }); router.addRoute("/notifications", () => notificationsView, { layoutOptions: { activeNavItem: "notifications" }, + scrollRestore: "always", }); router.addRoute("/messages/inbox", () => chatRequestsView, { layoutOptions: { activeNavItem: "chat" }, @@ -268,6 +270,7 @@ export async function main() { }); router.addRoute("/messages/:convoId", () => chatDetailView, { layoutOptions: { activeNavItem: "chat" }, + scrollRestore: "manual", }); router.addRoute("/messages", () => chatView, { layoutOptions: { activeNavItem: "chat" }, @@ -283,6 +286,7 @@ export async function main() { }); router.addRoute("/search", () => searchView, { layoutOptions: { activeNavItem: "search" }, + scrollRestore: "manual", }); router.addRoute("/hashtag/:tag", () => hashtagView); router.addRoute("/profile/:handleOrDid/feed/:rkey", () => feedDetailView); @@ -299,7 +303,9 @@ export async function main() { "/profile/:handleOrDid/post/:rkey/reposts", () => postRepostsView, ); - router.addRoute("/profile/:handleOrDid/post/:rkey", () => postThreadView); + router.addRoute("/profile/:handleOrDid/post/:rkey", () => postThreadView, { + scrollRestore: "manual", + }); router.addRoute( "/profile/:handleOrDid/known-followers", () => profileKnownFollowersView, diff --git a/src/js/router.js b/src/js/router.js index 08250ced..9f273eeb 100644 --- a/src/js/router.js +++ b/src/js/router.js @@ -272,6 +272,20 @@ export class Router extends EventEmitter { const scrollY = this.scrollStates.get(path) ?? 0; this.currentPage.classList.remove("page-hidden"); this.currentPage.classList.add("page-visible"); + // Scroll before dispatching so a "manual" view's own scroll wins + const scrollRestore = routeInfo.options.scrollRestore ?? "back"; + switch (scrollRestore) { + case "always": + window.scrollTo(0, scrollY); + break; + case "back": + window.scrollTo(0, isBack ? scrollY : 0); + break; + case "manual": + break; + default: + console.warn(`unknown scrollRestore type: ${scrollRestore}`); + } this.currentPage.dispatchEvent( new CustomEvent("page-restore", { detail: { diff --git a/src/js/views/bookmarks.view.js b/src/js/views/bookmarks.view.js index 81a3db6a..03f4e102 100644 --- a/src/js/views/bookmarks.view.js +++ b/src/js/views/bookmarks.view.js @@ -66,14 +66,8 @@ class BookmarksView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await loadBookmarks({ reload: true }); - } + if (e.detail?.isBack) return; + await loadBookmarks({ reload: true }); }); } } diff --git a/src/js/views/chat.view.js b/src/js/views/chat.view.js index 6aef6ced..0f218525 100644 --- a/src/js/views/chat.view.js +++ b/src/js/views/chat.view.js @@ -283,14 +283,8 @@ class ChatView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await loadConvoList({ reload: true }); - } + if (e.detail?.isBack) return; + await loadConvoList({ reload: true }); }); } } diff --git a/src/js/views/chatRequests.view.js b/src/js/views/chatRequests.view.js index 7fc4530c..631c35f5 100644 --- a/src/js/views/chatRequests.view.js +++ b/src/js/views/chatRequests.view.js @@ -261,14 +261,8 @@ class ChatRequestsView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadConvoRequestList({ reload: true }); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadConvoRequestList({ reload: true }); }); } } diff --git a/src/js/views/communityPluginListing.view.js b/src/js/views/communityPluginListing.view.js index c76ff5ff..e167eaa6 100644 --- a/src/js/views/communityPluginListing.view.js +++ b/src/js/views/communityPluginListing.view.js @@ -285,10 +285,6 @@ class CommunityPluginListingView extends View { await loadListings(); await loadDetails(); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/communityPlugins.view.js b/src/js/views/communityPlugins.view.js index 9f61c77b..239d9dd3 100644 --- a/src/js/views/communityPlugins.view.js +++ b/src/js/views/communityPlugins.view.js @@ -152,7 +152,6 @@ class CommunityPluginsView extends View { }); root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); loadListings(); }); } diff --git a/src/js/views/feedDetail.view.js b/src/js/views/feedDetail.view.js index eb02ec45..5cd446e8 100644 --- a/src/js/views/feedDetail.view.js +++ b/src/js/views/feedDetail.view.js @@ -145,14 +145,8 @@ class FeedDetailView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await loadFeed({ reload: true }); - } + if (e.detail?.isBack) return; + await loadFeed({ reload: true }); }); } } diff --git a/src/js/views/feeds.view.js b/src/js/views/feeds.view.js index 9ce672d6..460b46a6 100644 --- a/src/js/views/feeds.view.js +++ b/src/js/views/feeds.view.js @@ -303,14 +303,8 @@ class FeedsView extends View { root.addEventListener("page-restore", async (e) => { resetEditingState(); - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadPinnedItems(); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadPinnedItems(); }); } } diff --git a/src/js/views/groupChatDetails.view.js b/src/js/views/groupChatDetails.view.js index e424fee7..adec59be 100644 --- a/src/js/views/groupChatDetails.view.js +++ b/src/js/views/groupChatDetails.view.js @@ -340,16 +340,8 @@ class GroupChatDetailsView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await loadConvoDetails({ reload: true }); - } + if (e.detail?.isBack) return; + await loadConvoDetails({ reload: true }); }); } } diff --git a/src/js/views/hashtag.view.js b/src/js/views/hashtag.view.js index bde96bcd..20ddada4 100644 --- a/src/js/views/hashtag.view.js +++ b/src/js/views/hashtag.view.js @@ -119,11 +119,6 @@ class HashtagView extends View { root.addEventListener("page-enter", async () => { await loadCurrentFeed(); }); - - root.addEventListener("page-restore", (e) => { - const scrollY = e.detail?.scrollY ?? 0; - window.scrollTo(0, scrollY); - }); } } diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js index 1cf4bade..fd933638 100644 --- a/src/js/views/home.view.js +++ b/src/js/views/home.view.js @@ -414,9 +414,7 @@ class HomeView extends View { await loadCurrentFeed(); }); - root.addEventListener("page-restore", (e) => { - const scrollY = e.detail?.scrollY ?? 0; - window.scrollTo(0, scrollY); + root.addEventListener("page-restore", () => { for (const observer of postSeenObservers.values()) { observer.connect(); } diff --git a/src/js/views/installedPlugins.view.js b/src/js/views/installedPlugins.view.js index d5f572b1..993758b8 100644 --- a/src/js/views/installedPlugins.view.js +++ b/src/js/views/installedPlugins.view.js @@ -344,18 +344,6 @@ class InstalledPluginsView extends View { root, ); }); - - root.addEventListener("page-restore", (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - } - }); } } diff --git a/src/js/views/listDetail.view.js b/src/js/views/listDetail.view.js index 474d0dfd..23c1a1fa 100644 --- a/src/js/views/listDetail.view.js +++ b/src/js/views/listDetail.view.js @@ -431,14 +431,8 @@ class ListDetailView extends View { root.addEventListener("page-restore", async (e) => { userHasScrolled = false; - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await loadListAndFeeds({ reload: true }); - } + if (e.detail?.isBack) return; + await loadListAndFeeds({ reload: true }); }); } } diff --git a/src/js/views/lists.view.js b/src/js/views/lists.view.js index 22d9a000..479c8ee5 100644 --- a/src/js/views/lists.view.js +++ b/src/js/views/lists.view.js @@ -92,14 +92,8 @@ class ListsView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - await loadLists({ reload: true }); - } + if (e.detail?.isBack) return; + await loadLists({ reload: true }); }); } } diff --git a/src/js/views/notifications.view.js b/src/js/views/notifications.view.js index ea657d15..9bc506b5 100644 --- a/src/js/views/notifications.view.js +++ b/src/js/views/notifications.view.js @@ -841,7 +841,6 @@ class NotificationsView extends View { root.addEventListener("page-restore", async (e) => { const scrollY = e.detail?.scrollY ?? 0; - window.scrollTo(0, scrollY); if (scrollY <= 200) { await loadNotifications({ reload: true }); } diff --git a/src/js/views/pluginPage.view.js b/src/js/views/pluginPage.view.js index 9ff70f50..4b327c57 100644 --- a/src/js/views/pluginPage.view.js +++ b/src/js/views/pluginPage.view.js @@ -100,10 +100,6 @@ class PluginPageView extends View { root, ); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/pluginSettings.view.js b/src/js/views/pluginSettings.view.js index fd7502b0..b87169b7 100644 --- a/src/js/views/pluginSettings.view.js +++ b/src/js/views/pluginSettings.view.js @@ -99,10 +99,6 @@ class PluginSettingsView extends View { root, ); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/postLikes.view.js b/src/js/views/postLikes.view.js index 07b5ce07..923e8e0a 100644 --- a/src/js/views/postLikes.view.js +++ b/src/js/views/postLikes.view.js @@ -100,16 +100,8 @@ class PostLikesView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadPostLikes(postUri); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadPostLikes(postUri); }); } } diff --git a/src/js/views/postQuotes.view.js b/src/js/views/postQuotes.view.js index 8ab37509..f2d9268c 100644 --- a/src/js/views/postQuotes.view.js +++ b/src/js/views/postQuotes.view.js @@ -103,16 +103,8 @@ class PostQuotesView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadPostQuotes(postUri); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadPostQuotes(postUri); }); } } diff --git a/src/js/views/postReposts.view.js b/src/js/views/postReposts.view.js index 2320b86b..2ecfd88f 100644 --- a/src/js/views/postReposts.view.js +++ b/src/js/views/postReposts.view.js @@ -99,16 +99,8 @@ class PostRepostsView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadPostReposts(postUri); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadPostReposts(postUri); }); } } diff --git a/src/js/views/profile.view.js b/src/js/views/profile.view.js index 5d8c7b1b..ed329c12 100644 --- a/src/js/views/profile.view.js +++ b/src/js/views/profile.view.js @@ -581,15 +581,6 @@ class ProfileView extends View { dataLayer.requests.loadProfileChatStatus(profile.did); } }); - - root.addEventListener("page-restore", (e) => { - const { isBack, scrollY } = e.detail; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - window.scrollTo(0, 0); - } - }); } } diff --git a/src/js/views/profileFollowers.view.js b/src/js/views/profileFollowers.view.js index 89cfaaad..76430194 100644 --- a/src/js/views/profileFollowers.view.js +++ b/src/js/views/profileFollowers.view.js @@ -110,16 +110,8 @@ class ProfileFollowersView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadProfileFollowers(profileDid); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadProfileFollowers(profileDid); }); } } diff --git a/src/js/views/profileFollowing.view.js b/src/js/views/profileFollowing.view.js index ad0bb90b..368f05ef 100644 --- a/src/js/views/profileFollowing.view.js +++ b/src/js/views/profileFollowing.view.js @@ -108,16 +108,8 @@ class ProfileFollowingView extends View { }); root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadProfileFollows(profileDid); - } + if (e.detail?.isBack) return; + await dataLayer.requests.loadProfileFollows(profileDid); }); } } diff --git a/src/js/views/profileKnownFollowers.view.js b/src/js/views/profileKnownFollowers.view.js index 52848b11..1ddcd33f 100644 --- a/src/js/views/profileKnownFollowers.view.js +++ b/src/js/views/profileKnownFollowers.view.js @@ -96,16 +96,8 @@ class ProfileKnownFollowersView extends View { }); root.addEventListener("page-restore", async (event) => { - const scrollY = event.detail?.scrollY ?? 0; - const isBack = event.detail?.isBack ?? false; - if (isBack) { - if (scrollY > 0) { - window.scrollTo(0, scrollY); - } - } else { - window.scrollTo(0, 0); - await dataLayer.requests.loadKnownFollowers(profileDid); - } + if (event.detail?.isBack) return; + await dataLayer.requests.loadKnownFollowers(profileDid); }); } } diff --git a/src/js/views/settings.view.js b/src/js/views/settings.view.js index b8291fa0..a2792b79 100644 --- a/src/js/views/settings.view.js +++ b/src/js/views/settings.view.js @@ -396,10 +396,6 @@ class SettingsView extends View { loadOtherAccounts(); }); - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); - // Account actions navigate away with the pending spinner showing; if the // user comes back via the back/forward cache the document is restored // as-is, so reset the stuck pending state. diff --git a/src/js/views/settings/advanced.view.js b/src/js/views/settings/advanced.view.js index bc3c3007..2f0ac0b4 100644 --- a/src/js/views/settings/advanced.view.js +++ b/src/js/views/settings/advanced.view.js @@ -277,10 +277,6 @@ class SettingsAdvancedView extends View { root, ); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/settings/appearance.view.js b/src/js/views/settings/appearance.view.js index d22a0385..d2bbc1ce 100644 --- a/src/js/views/settings/appearance.view.js +++ b/src/js/views/settings/appearance.view.js @@ -147,10 +147,6 @@ class SettingsAppearanceView extends View { root, ); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/settings/blockedAccounts.view.js b/src/js/views/settings/blockedAccounts.view.js index 01737c2d..89c599d5 100644 --- a/src/js/views/settings/blockedAccounts.view.js +++ b/src/js/views/settings/blockedAccounts.view.js @@ -81,10 +81,6 @@ class SettingsBlockedAccountsView extends View { root.addEventListener("page-enter", async () => { await loadMore(); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/settings/mutedAccounts.view.js b/src/js/views/settings/mutedAccounts.view.js index 708f8dce..f469709b 100644 --- a/src/js/views/settings/mutedAccounts.view.js +++ b/src/js/views/settings/mutedAccounts.view.js @@ -78,10 +78,6 @@ class SettingsMutedAccountsView extends View { root.addEventListener("page-enter", async () => { await loadMore(); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/settings/mutedWords.view.js b/src/js/views/settings/mutedWords.view.js index f3ef7c0a..c571705b 100644 --- a/src/js/views/settings/mutedWords.view.js +++ b/src/js/views/settings/mutedWords.view.js @@ -358,10 +358,6 @@ class SettingsMutedWordsView extends View { root, ); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/src/js/views/settings/notifications.view.js b/src/js/views/settings/notifications.view.js index 88799b20..6d560de5 100644 --- a/src/js/views/settings/notifications.view.js +++ b/src/js/views/settings/notifications.view.js @@ -103,10 +103,6 @@ class SettingsNotificationsView extends View { root, ); }); - - root.addEventListener("page-restore", () => { - window.scrollTo(0, 0); - }); } } diff --git a/tests/e2e/specs/concerns/scroll.test.js b/tests/e2e/specs/concerns/scroll.test.js index cf5e17b2..a99add73 100644 --- a/tests/e2e/specs/concerns/scroll.test.js +++ b/tests/e2e/specs/concerns/scroll.test.js @@ -55,4 +55,64 @@ test.describe("Scroll position restoration", () => { // Verify the post we scrolled to is still visible (scroll position restored) await expect(targetPost).toBeVisible({ timeout: 10000 }); }); + + test.describe("on a settings subpage", () => { + test.use({ viewport: { width: 375, height: 667 } }); + + test("should restore on back and reset to the top on a forward visit", async ({ + page, + }) => { + const mockServer = new MockServer(); + mockServer.mutedWords = Array.from({ length: 40 }, (_, i) => ({ + value: `mutedword${i + 1}`, + targets: ["content"], + })); + await mockServer.setup(page); + + await login(page); + await page.goto("/settings"); + + const openMutedWords = () => + page.locator('[data-testid="settings-nav-muted-words"]').click(); + const view = page.locator("#settings-muted-words-view"); + + await openMutedWords(); + await expect(view.locator('[data-testid="muted-word-list"]')).toBeVisible( + { + timeout: 10000, + }, + ); + + await view + .locator('[data-testid="muted-word-item"]') + .last() + .scrollIntoViewIfNeeded(); + const scrollY = await page.evaluate(() => window.scrollY); + expect(scrollY).toBeGreaterThan(0); + + await page.goBack(); + await expect(page.locator("#settings-view")).toBeVisible({ + timeout: 10000, + }); + + // Forward navigation to the cached page starts at the top + await openMutedWords(); + await expect(view).toBeVisible({ timeout: 10000 }); + await expect.poll(() => page.evaluate(() => window.scrollY)).toBe(0); + + // ...and the position saved for that visit is restored on back + await view + .locator('[data-testid="muted-word-item"]') + .last() + .scrollIntoViewIfNeeded(); + await page.goBack(); + await expect(page.locator("#settings-view")).toBeVisible({ + timeout: 10000, + }); + await page.goForward(); + await expect + .poll(() => page.evaluate(() => window.scrollY)) + .toBe(scrollY); + }); + }); }); diff --git a/tests/unit/specs/router.test.js b/tests/unit/specs/router.test.js index cb417aa6..92af5eaa 100644 --- a/tests/unit/specs/router.test.js +++ b/tests/unit/specs/router.test.js @@ -28,6 +28,27 @@ function mountRouter(router, { layout = null } = {}) { }; } +// JSDOM's window.scrollY is a read-only getter, so temporarily override it to +// simulate the page being scrolled before we navigate away. +function withScrollY(value, callback) { + const original = Object.getOwnPropertyDescriptor(window, "scrollY"); + Object.defineProperty(window, "scrollY", { + value, + configurable: true, + }); + return (async () => { + try { + return await callback(); + } finally { + if (original) { + Object.defineProperty(window, "scrollY", original); + } else { + delete window.scrollY; + } + } + })(); +} + describe("constructor and initialization", () => { it("should initialize with empty routes", () => { const router = new Router(); @@ -1088,27 +1109,6 @@ describe("page cache", () => { }); describe("scroll position persistence", () => { - // JSDOM's window.scrollY is a read-only getter, so temporarily override it to - // simulate the page being scrolled before we navigate away. - function withScrollY(value, callback) { - const original = Object.getOwnPropertyDescriptor(window, "scrollY"); - Object.defineProperty(window, "scrollY", { - value, - configurable: true, - }); - return (async () => { - try { - return await callback(); - } finally { - if (original) { - Object.defineProperty(window, "scrollY", original); - } else { - delete window.scrollY; - } - } - })(); - } - function createRouter() { const router = new Router(); mountRouter(router); @@ -1168,3 +1168,94 @@ describe("scroll position persistence", () => { assert.deepEqual(restoredScrollY, 175); }); }); + +describe("scrollRestore", () => { + let scrollTo; + + beforeEach(() => { + scrollTo = mock.method(window, "scrollTo", () => {}); + }); + + afterEach(() => { + scrollTo.mock.restore(); + }); + + function scrollCalls() { + return scrollTo.mock.calls.map((call) => call.arguments); + } + + function createRouter(scrollRestore) { + const router = new Router(); + mountRouter(router); + router.addRoute( + "/a", + () => Promise.resolve({}), + scrollRestore ? { scrollRestore } : {}, + ); + router.addRoute("/b", () => Promise.resolve({})); + router.renderRoute(() => {}); + return router; + } + + // Returns to /a after leaving it scrolled to 175 + async function revisit(router, { isBack }) { + await router.load("/a"); + await withScrollY(175, () => router.load("/b")); + scrollTo.mock.resetCalls(); + await router.load("/a", { isBack }); + } + + it("restores the saved position on back navigation by default", async () => { + const router = createRouter(); + + await revisit(router, { isBack: true }); + + assert.deepEqual(scrollCalls(), [[0, 175]]); + }); + + it("scrolls to the top on forward navigation by default", async () => { + const router = createRouter(); + + await revisit(router, { isBack: false }); + + assert.deepEqual(scrollCalls(), [[0, 0]]); + }); + + it("restores the saved position on forward navigation when set to always", async () => { + const router = createRouter("always"); + + await revisit(router, { isBack: false }); + + assert.deepEqual(scrollCalls(), [[0, 175]]); + }); + + it("still restores the saved position on back navigation when set to always", async () => { + const router = createRouter("always"); + + await revisit(router, { isBack: true }); + + assert.deepEqual(scrollCalls(), [[0, 175]]); + }); + + it("does not touch the scroll position when set to manual", async () => { + const router = createRouter("manual"); + + await revisit(router, { isBack: false }); + await revisit(router, { isBack: true }); + + assert.deepEqual(scrollCalls(), []); + }); + + it("scrolls before dispatching page-restore so a view can override it", async () => { + const router = createRouter(); + await router.load("/a"); + let scrolledBeforeDispatch = null; + router.pages.get("/a").el.addEventListener("page-restore", () => { + scrolledBeforeDispatch = scrollCalls(); + }); + + await revisit(router, { isBack: true }); + + assert.deepEqual(scrolledBeforeDispatch, [[0, 175]]); + }); +}); -- knotmirror 0.0.1 From 1020db31977c75eb3149734b6a1d7c9724ab2237 Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 00:57:22 -0500 Subject: [PATCH 13/25] Update avatar styles --- package.json | 2 +- src/css/style.css | 29 +++++++------ src/js/components/account-switcher-dialog.js | 4 +- src/js/templates/avatarGroup.template.js | 4 +- src/js/templates/footer.template.js | 2 +- src/js/views/chatDetail.view.js | 1 - .../templates/avatarGroup.template.test.js | 43 +++++++++++++++++++ 7 files changed, 64 insertions(+), 21 deletions(-) create mode 100644 tests/unit/specs/templates/avatarGroup.template.test.js diff --git a/package.json b/package.json index cc75a890..e8628ecc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.184", + "version": "0.18.185", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 870ec5f8..2febc4ff 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -874,7 +874,8 @@ input[type="color"]::-moz-color-swatch { width: var(--avatar-size-post); height: var(--avatar-size-post); border-radius: var(--avatar-border-radius); - background-color: var(--generic-border-color); + border: var(--hair) solid var(--post-border-color); + background-color: var(--skeleton-color); } header { @@ -1216,12 +1217,6 @@ tab-bar:not([full-width]) { border: var(--hair) solid var(--post-border-color); } -.sidebar-profile-avatar .avatar-placeholder { - border-radius: var(--avatar-border-radius); - background-color: var(--skeleton-color); - border: var(--hair) solid var(--post-border-color); -} - .sidebar-profile-info { margin-bottom: 12px; } @@ -1556,12 +1551,9 @@ button.sidebar-plugin-nav-item { height: var(--avatar-size-footer-nav); } -.footer-nav-item .avatar-image-placeholder { +.footer-nav-item .avatar-placeholder { width: var(--avatar-size-footer-nav); height: var(--avatar-size-footer-nav); - border-radius: var(--avatar-border-radius); - background-color: var(--skeleton-color); - border: var(--hair) solid var(--post-border-color); } .footer-nav-item[disabled] { @@ -3568,7 +3560,8 @@ image-carousel { flex-shrink: 0; } -.convo-avatar .avatar-image-frame { +.convo-avatar .avatar-image-frame, +.convo-avatar .avatar-placeholder { width: var(--avatar-size-convo); height: var(--avatar-size-convo); } @@ -3579,10 +3572,16 @@ image-carousel { height: var(--avatar-size-convo); } +.avatar-group > .avatar-placeholder { + width: 100%; + height: 100%; +} + .avatar-group-item { position: absolute; } +.avatar-group-item .avatar, .avatar-group-item .avatar-image-frame { display: block; width: 100%; @@ -4122,7 +4121,8 @@ image-carousel { align-self: flex-start; } -.message-avatar .avatar-image-frame { +.message-avatar .avatar-image-frame, +.message-avatar .avatar-placeholder { width: var(--avatar-size-message); height: var(--avatar-size-message); } @@ -5071,6 +5071,7 @@ chat-input .rich-text-input-placeholder { .reaction-row-avatar .avatar, .reaction-row-avatar .avatar-image-frame, +.reaction-row-avatar .avatar-placeholder, .reaction-row-avatar .avatar-image { width: 42px; height: 42px; @@ -8486,7 +8487,7 @@ context-menu-item-group > context-menu-item > button { } .account-switcher-item .avatar, -.account-switcher-item .avatar-image-placeholder, +.account-switcher-item .avatar-placeholder, .account-switcher-item .skeleton-avatar { width: 40px; height: 40px; diff --git a/src/js/components/account-switcher-dialog.js b/src/js/components/account-switcher-dialog.js index 5042448c..9da2ba3f 100644 --- a/src/js/components/account-switcher-dialog.js +++ b/src/js/components/account-switcher-dialog.js @@ -181,9 +181,7 @@ class AccountSwitcherDialog extends Component { author: profile, clickAction: "none", }) - : html`
`} + : html`
`}
@@ -187,6 +193,7 @@ export function sidebarTemplate({ isAuthenticated, currentUser, activeNavItem = null, + isNavItemPage = false, numNotifications = 0, numChatNotifications = 0, onClickActiveItem, @@ -197,6 +204,7 @@ export function sidebarTemplate({ if (!isAuthenticated) { return loggedOutSidebarTemplate({ activeNavItem, + isNavItemPage, onClickActiveItem, }); } @@ -348,6 +356,7 @@ export function sidebarTemplate({ ${sidebarNavTemplate({ menuItems, activeNavItem, + isNavItemPage, onClickActiveItem, pluginSidebarItems, })} diff --git a/src/js/views/bookmarks.view.js b/src/js/views/bookmarks.view.js index 2cd1b53c..677f4431 100644 --- a/src/js/views/bookmarks.view.js +++ b/src/js/views/bookmarks.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; import { auth } from "/js/auth.js"; @@ -6,69 +5,54 @@ import { headerTemplate } from "/js/templates/header.template.js"; import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; import { BOOKMARKS_PAGE_SIZE } from "/js/config.js"; -class BookmarksView extends View { - async render({ - root, - layout, - context: { dataLayer, isAuthenticated, pluginService, interactionHandlers }, - }) { - await auth.requireAuth(); - - const { postInteractionHandler } = interactionHandlers; - - async function scrollAndReloadBookmarks() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadBookmarks({ reload: true }); - } - - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - scrollAndReloadBookmarks(); - }); - - bindPageTitle(root, () => "Saved Posts"); - - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const bookmarks = dataLayer.derived.$hydratedBookmarks.get(); - - render( - html`
- ${headerTemplate({ title: "Saved Posts" })} -
- ${postFeedTemplate({ - feed: bookmarks, - currentUser, - isAuthenticated, - onLoadMore: () => loadBookmarks(), - postInteractionHandler, - emptyMessage: "No saved posts yet!", - pluginService, - })} -
-
`, - root, - ); - }); - - async function loadBookmarks({ reload = false } = {}) { - await dataLayer.requests.loadBookmarks({ - reload, - limit: BOOKMARKS_PAGE_SIZE + 1, - }); - } - - root.addEventListener("page-enter", async () => { - await loadBookmarks(); +export default async function bookmarksView({ + root, + layout, + context: { dataLayer, isAuthenticated, pluginService, interactionHandlers }, +}) { + await auth.requireAuth(); + + const { postInteractionHandler } = interactionHandlers; + + root.addEventListener("page-enter", () => loadPageData()); + + bindToPage(root, layout, "active-nav-click", () => { + loadPageData(); + }); + + bindPageTitle(root, () => "Saved Posts"); + + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const bookmarks = dataLayer.derived.$hydratedBookmarks.get(); + + render( + html`
+ ${headerTemplate({ title: "Saved Posts" })} +
+ ${postFeedTemplate({ + feed: bookmarks, + currentUser, + isAuthenticated, + onLoadMore: () => loadBookmarks(), + postInteractionHandler, + emptyMessage: "No saved posts yet!", + pluginService, + })} +
+
`, + root, + ); + }); + + async function loadBookmarks({ reload = false } = {}) { + await dataLayer.requests.loadBookmarks({ + reload, + limit: BOOKMARKS_PAGE_SIZE + 1, }); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await loadBookmarks({ reload: true }); - }); + function loadPageData() { + loadBookmarks({ reload: true }); } } - -export default new BookmarksView(); diff --git a/src/js/views/chat.view.js b/src/js/views/chat.view.js index 0f218525..563cc941 100644 --- a/src/js/views/chat.view.js +++ b/src/js/views/chat.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; @@ -21,272 +20,256 @@ import "/js/components/container-link.js"; import "/js/components/new-chat-dialog.js"; import "/js/components/app-icon.js"; -class ChatView extends View { - async render({ - root, - router, - layout, - context: { dataLayer, chatNotificationService }, - }) { - await auth.requireAuth(); +export default async function chatView({ + root, + router, + layout, + context: { dataLayer, chatNotificationService }, +}) { + await auth.requireAuth(); - async function handleMenuClick() { - layout.openSidebar(); - } + async function handleMenuClick() { + layout.openSidebar(); + } - function handleNewChatClick() { - const dialog = document.createElement("new-chat-dialog"); - dialog.dataLayer = dataLayer; - dialog.addEventListener("dialog-closed", () => { - dialog.remove(); - }); - document.body.appendChild(dialog); - dialog.open(); - } + function handleNewChatClick() { + const dialog = document.createElement("new-chat-dialog"); + dialog.dataLayer = dataLayer; + dialog.addEventListener("dialog-closed", () => { + dialog.remove(); + }); + document.body.appendChild(dialog); + dialog.open(); + } - function newChatButtonTemplate() { - return html` - - `; - } + function newChatButtonTemplate() { + return html` + + `; + } - function convoItemTemplate({ convo, currentUser }) { - const groupDetails = getGroupConvoDetails(convo); - const lastInteraction = getLastInteraction(convo); - const otherMembers = convo.members.filter( - (member) => member.did !== currentUser?.did, - ); - const otherUser = groupDetails ? null : otherMembers[0]; - const timeAgo = lastInteraction - ? displayRelativeTime(getInteractionTimestamp(lastInteraction)) - : ""; - const isUnread = convo.unreadCount > 0; - return html` - -
- ${(() => { - if (groupDetails) { - return avatarGroupTemplate({ authors: otherMembers }); - } - return otherUser - ? avatarTemplate({ author: otherUser }) - : html`
`; - })()} -
-
-
-
- ${groupDetails ? groupDetails.name : getDisplayName(otherUser)} - ${convo.muted - ? html`` - : ""} -
- ${timeAgo ? html`
${timeAgo}
` : ""} -
-
- ${!groupDetails && - otherUser?.handle && - otherUser?.handle !== MISSING_HANDLE - ? `@${otherUser.handle}` + function convoItemTemplate({ convo, currentUser }) { + const groupDetails = getGroupConvoDetails(convo); + const lastInteraction = getLastInteraction(convo); + const otherMembers = convo.members.filter( + (member) => member.did !== currentUser?.did, + ); + const otherUser = groupDetails ? null : otherMembers[0]; + const timeAgo = lastInteraction + ? displayRelativeTime(getInteractionTimestamp(lastInteraction)) + : ""; + const isUnread = convo.unreadCount > 0; + return html` + +
+ ${(() => { + if (groupDetails) { + return avatarGroupTemplate({ authors: otherMembers }); + } + return otherUser + ? avatarTemplate({ author: otherUser }) + : html`
`; + })()} +
+
+
+
+ ${groupDetails ? groupDetails.name : getDisplayName(otherUser)} + ${convo.muted + ? html`` : ""}
-
- ${lastInteraction - ? getConvoPreviewText(lastInteraction, { - currentUser, - convo, - profiles: dataLayer.derived.$convoProfiles.get(convo.id), - }) - : "No messages yet"} -
+ ${timeAgo ? html`
${timeAgo}
` : ""}
- - `; - } +
+ ${!groupDetails && + otherUser?.handle && + otherUser?.handle !== MISSING_HANDLE + ? `@${otherUser.handle}` + : ""} +
+
+ ${lastInteraction + ? getConvoPreviewText(lastInteraction, { + currentUser, + convo, + profiles: dataLayer.derived.$convoProfiles.get(convo.id), + }) + : "No messages yet"} +
+
+ + `; + } - function convoSkeletonTemplate() { - return html` - ${Array.from({ length: 8 }).map( - () => html` -
-
-
-
-
-
-
-
-
-
+ function convoSkeletonTemplate() { + return html` + ${Array.from({ length: 8 }).map( + () => html` +
+
+
+
+
+
+
+
+
- `, - )} - `; - } - - function inboxButtonTemplate({ hasUnreadRequests }) { - return html` - - ${inboxIconTemplate()} - ${hasUnreadRequests - ? html`
` - : ""} - - `; - } +
+ `, + )} + `; + } - function convosTemplate({ convos, hasMore, currentUser }) { - if (convos.length === 0) { - return html`
-
No conversations yet!
- -
`; - } + function inboxButtonTemplate({ hasUnreadRequests }) { + return html` + + ${inboxIconTemplate()} + ${hasUnreadRequests + ? html`
` + : ""} + + `; + } - return html` - { - if (hasMore) { - await loadConvoList(); - e.detail.resume(); - } - }} + function convosTemplate({ convos, hasMore, currentUser }) { + if (convos.length === 0) { + return html`
+
No conversations yet!
+
`; } - async function scrollAndReloadConvos() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadConvoList({ reload: true }); - } + return html` + { + if (hasMore) { + await loadConvoList(); + e.detail.resume(); + } + }} + > + ${convos.map((convo) => convoItemTemplate({ convo, currentUser }))} + ${hasMore ? convoSkeletonTemplate() : ""} + + `; + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - scrollAndReloadConvos(); - }); + function convosErrorTemplate({ error }) { + console.error(error); + return html`
+
There was an error loading conversations.
+ +
`; + } - bindPageTitle(root, () => "Messages"); + async function loadPageData() { + await loadConvoList({ reload: true }); + } - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const convos = dataLayer.derived.$convoList.get(); - const convosRequestStatus = - dataLayer.requests.statusStore.$statuses.get("loadConvoList"); - const cursor = dataLayer.derived.$convoListCursor.get(); - const hasMore = !!cursor; - const hasUnreadRequests = - (chatNotificationService?.$numUnreadRequestConvos.get() ?? 0) > 0; + root.addEventListener("page-enter", () => loadPageData()); - render( - html`
- ${headerTemplate({ - title: "Chats", - showLoadingSpinner: convosRequestStatus.loading && !!convos, - leftButton: "menu", - onClickMenuButton: () => handleMenuClick(), - rightItemTemplate: () => html` -
- ${inboxButtonTemplate({ hasUnreadRequests })} - ${newChatButtonTemplate()} -
- `, - })} -
- ${(() => { - if (convosRequestStatus.error) { - return convosErrorTemplate({ - error: convosRequestStatus.error, - }); - } else if (convos && currentUser) { - const acceptedConvos = convos.filter( - (convo) => convo.status === "accepted", - ); - return convosTemplate({ - currentUser, - convos: acceptedConvos, - hasMore, - }); - } else { - return convoSkeletonTemplate(); - } - })()} -
- -
`, - root, - ); - }); + bindToPage(root, layout, "active-nav-click", () => { + loadPageData(); + }); - async function loadConvoList({ reload = false } = {}) { - await dataLayer.requests.loadConvoList({ - reload, - limit: 30, - }); - } + bindPageTitle(root, () => "Messages"); - root.addEventListener("page-enter", async () => { - await dataLayer.declarative.ensureCurrentUser(); - await loadConvoList({ reload: true }); - }); + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const convos = dataLayer.derived.$convoList.get(); + const convosRequestStatus = + dataLayer.requests.statusStore.$statuses.get("loadConvoList"); + const cursor = dataLayer.derived.$convoListCursor.get(); + const hasMore = !!cursor; + const hasUnreadRequests = + (chatNotificationService?.$numUnreadRequestConvos.get() ?? 0) > 0; - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await loadConvoList({ reload: true }); + render( + html`
+ ${headerTemplate({ + title: "Chats", + showLoadingSpinner: convosRequestStatus.loading && !!convos, + leftButton: "menu", + onClickMenuButton: () => handleMenuClick(), + rightItemTemplate: () => html` +
+ ${inboxButtonTemplate({ hasUnreadRequests })} + ${newChatButtonTemplate()} +
+ `, + })} +
+ ${(() => { + if (convosRequestStatus.error) { + return convosErrorTemplate({ + error: convosRequestStatus.error, + }); + } else if (convos && currentUser) { + const acceptedConvos = convos.filter( + (convo) => convo.status === "accepted", + ); + return convosTemplate({ + currentUser, + convos: acceptedConvos, + hasMore, + }); + } else { + return convoSkeletonTemplate(); + } + })()} +
+ +
`, + root, + ); + }); + + async function loadConvoList({ reload = false } = {}) { + await dataLayer.requests.loadConvoList({ + reload, + limit: 30, }); } } - -export default new ChatView(); diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js index 714e23a9..d9bad5dc 100644 --- a/src/js/views/chatDetail.view.js +++ b/src/js/views/chatDetail.view.js @@ -1,5 +1,4 @@ -import { View } from "/js/views/view.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { html, render, ref } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { richTextTemplate } from "/js/templates/richText.template.js"; @@ -57,1692 +56,1661 @@ import "/js/components/context-menu.js"; import "/js/components/context-menu-item.js"; import "/js/components/context-menu-item-group.js"; import "/js/components/app-icon.js"; -class ChatDetailView extends View { - async render({ - root, - params, - router, - layout, - context: { - dataLayer, - chatNotificationService, - identityResolver, - pluginService, - }, - }) { - await auth.requireAuth(); - - const canViewGroupDetails = await auth.hasScope( - "rpc:chat.bsky.convo.getConvoMembers", - ); - - const convoId = params.convoId; - - const state = new ReactiveStore("chatDetailView"); - state.$loadingEnabled = new Signal.State(false); - state.$isSendingMessage = new Signal.State(false); - state.$isMuteSaving = new Signal.State(false); - state.$activeMessageId = new Signal.State(null); - state.$paletteMessageId = new Signal.State(null); - state.$reactionsDialogMessageId = new Signal.State(null); - state.$stagedReply = new Signal.State(null); - // null | { url, record, status: "loading" | "ready" | "error" } - state.$stagedRecordEmbed = new Signal.State(null); - const rejectedRecordLinks = new Set(); - - function setReply(message) { - if (!message) return; - state.$stagedReply.set(message); - raf().then(() => focusChatInput()); - } +export default async function chatDetailView({ + root, + params, + router, + layout, + context: { + dataLayer, + chatNotificationService, + identityResolver, + pluginService, + }, +}) { + await auth.requireAuth(); + + const canViewGroupDetails = await auth.hasScope( + "rpc:chat.bsky.convo.getConvoMembers", + ); + + const convoId = params.convoId; + + const state = new ReactiveStore("chatDetailView"); + state.$loadingEnabled = new Signal.State(false); + state.$isSendingMessage = new Signal.State(false); + state.$isMuteSaving = new Signal.State(false); + state.$activeMessageId = new Signal.State(null); + state.$paletteMessageId = new Signal.State(null); + state.$reactionsDialogMessageId = new Signal.State(null); + state.$stagedReply = new Signal.State(null); + // null | { url, record, status: "loading" | "ready" | "error" } + state.$stagedRecordEmbed = new Signal.State(null); + const rejectedRecordLinks = new Set(); + + function setReply(message) { + if (!message) return; + state.$stagedReply.set(message); + raf().then(() => focusChatInput()); + } - function clearReply() { - state.$stagedReply.set(null); - } + function clearReply() { + state.$stagedReply.set(null); + } - function handleComposerInput({ text, inputType }) { - const commit = - text.endsWith(" ") || - text.endsWith("\n") || - inputType === "insertFromPaste"; - const urls = getLinkUrlsFromText(text); - for (const rejectedUrl of rejectedRecordLinks) { - if (!urls.includes(rejectedUrl)) { - rejectedRecordLinks.delete(rejectedUrl); - } - } - if (!commit || state.$stagedRecordEmbed.get()) return; - for (const url of urls) { - if (rejectedRecordLinks.has(url) || !parseRecordLink(url)) continue; - state.$stagedRecordEmbed.set({ url, record: null, status: "loading" }); - loadStagedRecordEmbed(url); - break; + function handleComposerInput({ text, inputType }) { + const commit = + text.endsWith(" ") || + text.endsWith("\n") || + inputType === "insertFromPaste"; + const urls = getLinkUrlsFromText(text); + for (const rejectedUrl of rejectedRecordLinks) { + if (!urls.includes(rejectedUrl)) { + rejectedRecordLinks.delete(rejectedUrl); } } + if (!commit || state.$stagedRecordEmbed.get()) return; + for (const url of urls) { + if (rejectedRecordLinks.has(url) || !parseRecordLink(url)) continue; + state.$stagedRecordEmbed.set({ url, record: null, status: "loading" }); + loadStagedRecordEmbed(url); + break; + } + } - async function loadStagedRecordEmbed(url) { - try { - const record = await resolveRecordFromLink(url, { - identityResolver, - dataLayer, - }); - // the embed may have been removed while the record was loading - if (state.$stagedRecordEmbed.get()?.url !== url) return; - state.$stagedRecordEmbed.set({ url, record, status: "ready" }); - } catch (error) { - console.warn("Error loading record embed from link: ", error); - if (state.$stagedRecordEmbed.get()?.url === url) { - state.$stagedRecordEmbed.set({ url, record: null, status: "error" }); - } + async function loadStagedRecordEmbed(url) { + try { + const record = await resolveRecordFromLink(url, { + identityResolver, + dataLayer, + }); + // the embed may have been removed while the record was loading + if (state.$stagedRecordEmbed.get()?.url !== url) return; + state.$stagedRecordEmbed.set({ url, record, status: "ready" }); + } catch (error) { + console.warn("Error loading record embed from link: ", error); + if (state.$stagedRecordEmbed.get()?.url === url) { + state.$stagedRecordEmbed.set({ url, record: null, status: "error" }); } } + } - function clearStagedRecordEmbed() { - const staged = state.$stagedRecordEmbed.get(); - if (staged) { - rejectedRecordLinks.add(staged.url); - } - state.$stagedRecordEmbed.set(null); + function clearStagedRecordEmbed() { + const staged = state.$stagedRecordEmbed.get(); + if (staged) { + rejectedRecordLinks.add(staged.url); } + state.$stagedRecordEmbed.set(null); + } - function stagedEmbedPreviewTemplate({ staged }) { - const { record, status } = staged; - let body; - if (status === "loading") { - body = html`
- -
`; - } else if (status === "error") { - body = html`
- Couldn't load embed -
`; - } else { - body = html`
- ${recordEmbedTemplate({ - record, - isAuthenticated: true, - condensed: true, - pluginService, - })} -
`; - } - return html`
- - ${body} + function stagedEmbedPreviewTemplate({ staged }) { + const { record, status } = staged; + let body; + if (status === "loading") { + body = html`
+ +
`; + } else if (status === "error") { + body = html`
+ Couldn't load embed +
`; + } else { + body = html`
+ ${recordEmbedTemplate({ + record, + isAuthenticated: true, + condensed: true, + pluginService, + })}
`; } - - function messageReplyPreviewTemplate({ staged, senderProfile }) { - const senderName = senderProfile - ? getDisplayName(senderProfile) - : "Unknown"; - const { text: previewText, muted } = getReplyQuotePreviewText(staged); - return html`
+ + ${body} +
`; + } + + function messageReplyPreviewTemplate({ staged, senderProfile }) { + const senderName = senderProfile + ? getDisplayName(senderProfile) + : "Unknown"; + const { text: previewText, muted } = getReplyQuotePreviewText(staged); + return html`
+ +
+
+ Replying to ${senderName}
- -
`; - } + ${previewText} +
+
+ +
`; + } - function messageContextMenuTemplate({ message }) { - return html` - setReply(message)} - > - Reply - - `; - } + function messageContextMenuTemplate({ message }) { + return html` + setReply(message)} + > + Reply + + `; + } - function openMessageContextMenu(event, { message }) { - const menu = document.createElement("context-menu"); - menu.classList.add("message-context-menu"); - const itemHolder = document.createElement("div"); - render(messageContextMenuTemplate({ message }), itemHolder); - while (itemHolder.firstChild) menu.appendChild(itemHolder.firstChild); - document.body.appendChild(menu); - menu.open(event.clientX, event.clientY); - // Keep the message marked active while the menu is open so the - // trigger button doesn't lose :hover visibility behind the modal. - const previousActiveId = state.$activeMessageId.get(); - state.$activeMessageId.set(message.id); - menu.querySelector("dialog").addEventListener( - "close", - () => { - menu.remove(); - if (state.$activeMessageId.get() === message.id) { - state.$activeMessageId.set(previousActiveId); - } - }, - { once: true }, - ); - } + function openMessageContextMenu(event, { message }) { + const menu = document.createElement("context-menu"); + menu.classList.add("message-context-menu"); + const itemHolder = document.createElement("div"); + render(messageContextMenuTemplate({ message }), itemHolder); + while (itemHolder.firstChild) menu.appendChild(itemHolder.firstChild); + document.body.appendChild(menu); + menu.open(event.clientX, event.clientY); + // Keep the message marked active while the menu is open so the + // trigger button doesn't lose :hover visibility behind the modal. + const previousActiveId = state.$activeMessageId.get(); + state.$activeMessageId.set(message.id); + menu.querySelector("dialog").addEventListener( + "close", + () => { + menu.remove(); + if (state.$activeMessageId.get() === message.id) { + state.$activeMessageId.set(previousActiveId); + } + }, + { once: true }, + ); + } - function triggerHighlightAnimation(messageEl) { - messageEl.classList.remove("message-highlighted"); - // Force a reflow - void messageEl.offsetWidth; - messageEl.classList.add("message-highlighted"); - messageEl.addEventListener( - "animationend", - () => messageEl.classList.remove("message-highlighted"), - { once: true }, - ); - } + function triggerHighlightAnimation(messageEl) { + messageEl.classList.remove("message-highlighted"); + // Force a reflow + void messageEl.offsetWidth; + messageEl.classList.add("message-highlighted"); + messageEl.addEventListener( + "animationend", + () => messageEl.classList.remove("message-highlighted"), + { once: true }, + ); + } - function scrollToAndHighlightMessage(messageId) { - const wrapper = root.querySelector( - `.message-wrapper[data-message-id="${CSS.escape(messageId)}"]`, - ); - if (!wrapper) { - return; - } - wrapper.scrollIntoView({ block: "center", behavior: "smooth" }); - triggerHighlightAnimation(wrapper); + function scrollToAndHighlightMessage(messageId) { + const wrapper = root.querySelector( + `.message-wrapper[data-message-id="${CSS.escape(messageId)}"]`, + ); + if (!wrapper) { + return; } + wrapper.scrollIntoView({ block: "center", behavior: "smooth" }); + triggerHighlightAnimation(wrapper); + } - function focusChatInput() { - const chatInput = root.querySelector("chat-input"); - if (chatInput) { - chatInput.focus(); - } + function focusChatInput() { + const chatInput = root.querySelector("chat-input"); + if (chatInput) { + chatInput.focus(); } + } - function getMessageScroller() { - return root.querySelector(".chat-detail-main infinite-scroll-container"); - } + function getMessageScroller() { + return root.querySelector(".chat-detail-main infinite-scroll-container"); + } - function scrollToBottom({ onlyIfNeeded = false } = {}) { - const scroller = getMessageScroller(); - if (!scroller) { - return; - } - if (scroller.scrollHeight <= scroller.clientHeight) { - return; - } - if (onlyIfNeeded) { - const messageList = scroller.querySelector(".message-list"); - if (messageList) { - const lastMessage = [ - ...messageList.querySelectorAll(".message-bubble"), - ].at(-1); - if (lastMessage) { - const lastMessageBottom = - lastMessage.getBoundingClientRect().bottom; - const scrollerBottom = scroller.getBoundingClientRect().bottom; - if (lastMessageBottom <= scrollerBottom) { - return; - } + function scrollToBottom({ onlyIfNeeded = false } = {}) { + const scroller = getMessageScroller(); + if (!scroller) { + return; + } + if (scroller.scrollHeight <= scroller.clientHeight) { + return; + } + if (onlyIfNeeded) { + const messageList = scroller.querySelector(".message-list"); + if (messageList) { + const lastMessage = [ + ...messageList.querySelectorAll(".message-bubble"), + ].at(-1); + if (lastMessage) { + const lastMessageBottom = lastMessage.getBoundingClientRect().bottom; + const scrollerBottom = scroller.getBoundingClientRect().bottom; + if (lastMessageBottom <= scrollerBottom) { + return; } } } - scroller.scrollTop = scroller.scrollHeight; } + scroller.scrollTop = scroller.scrollHeight; + } - // Scroll to bottom, re-forcing it every frame for the duration so late - // layout shifts (images, fonts, embeds) can't leave the view short - function pinScrollToBottom({ durationMs = 1000 } = {}) { - const scroller = getMessageScroller(); - if (!scroller) { - return; - } - pinScrollPosition({ - targetY: () => scroller.scrollHeight - scroller.clientHeight, - durationMs, - scroller, - // If the position moved above where we last pinned it, the user - // (or other code, e.g. a reply-jump scrollIntoView) scrolled up - - // stop fighting them - shouldStop: (currentY, lastPinnedY) => - lastPinnedY !== null && currentY < lastPinnedY - 1, - }); + // Scroll to bottom, re-forcing it every frame for the duration so late + // layout shifts (images, fonts, embeds) can't leave the view short + function pinScrollToBottom({ durationMs = 1000 } = {}) { + const scroller = getMessageScroller(); + if (!scroller) { + return; } + pinScrollPosition({ + targetY: () => scroller.scrollHeight - scroller.clientHeight, + durationMs, + scroller, + // If the position moved above where we last pinned it, the user + // (or other code, e.g. a reply-jump scrollIntoView) scrolled up - + // stop fighting them + shouldStop: (currentY, lastPinnedY) => + lastPinnedY !== null && currentY < lastPinnedY - 1, + }); + } - function isScrolledToBottom() { - const scroller = getMessageScroller(); - if (!scroller) { - return false; - } - return ( - scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight <= 60 - ); + function isScrolledToBottom() { + const scroller = getMessageScroller(); + if (!scroller) { + return false; } + return ( + scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight <= 60 + ); + } - // Tracked via the scroller's scroll events so when the input bar grows - // we can pin using PRE-resize state. By the time the height-change event - // fires the scroller has already shrunk, so a post-hoc check is unreliable. - let wasAtBottom = true; - let scrollListenerEl = null; + // Tracked via the scroller's scroll events so when the input bar grows + // we can pin using PRE-resize state. By the time the height-change event + // fires the scroller has already shrunk, so a post-hoc check is unreliable. + let wasAtBottom = true; + let scrollListenerEl = null; - function onScroll() { - wasAtBottom = isScrolledToBottom(); - } + function onScroll() { + wasAtBottom = isScrolledToBottom(); + } - function attachScrollListener() { - const scroller = getMessageScroller(); - if (scroller === scrollListenerEl) { - return; - } - if (scrollListenerEl) { - scrollListenerEl.removeEventListener("scroll", onScroll); - } - scrollListenerEl = scroller; - if (scroller) { - scroller.addEventListener("scroll", onScroll, { passive: true }); - } + function attachScrollListener() { + const scroller = getMessageScroller(); + if (scroller === scrollListenerEl) { + return; } + if (scrollListenerEl) { + scrollListenerEl.removeEventListener("scroll", onScroll); + } + scrollListenerEl = scroller; + if (scroller) { + scroller.addEventListener("scroll", onScroll, { passive: true }); + } + } - function handleInputHeightChange(e) { - const height = e.detail?.height; - const main = root.querySelector(".chat-detail-main"); - if (main && typeof height === "number") { - main.style.setProperty("--input-bar-height", height + "px"); - } - if (wasAtBottom) { - scrollToBottom(); - } + function handleInputHeightChange(e) { + const height = e.detail?.height; + const main = root.querySelector(".chat-detail-main"); + if (main && typeof height === "number") { + main.style.setProperty("--input-bar-height", height + "px"); } + if (wasAtBottom) { + scrollToBottom(); + } + } - class MessageFetcher { - constructor(dataLayer, convoId) { - this.dataLayer = dataLayer; - this.convoId = convoId; - this._isPolling = false; - this._cursor = ""; - } + class MessageFetcher { + constructor(dataLayer, convoId) { + this.dataLayer = dataLayer; + this.convoId = convoId; + this._isPolling = false; + this._cursor = ""; + } - start() { - if (this._isPolling) { - return; - } - this._isPolling = true; - this.runLoop(); + start() { + if (this._isPolling) { + return; } + this._isPolling = true; + this.runLoop(); + } - stop() { - this._isPolling = false; - } + stop() { + this._isPolling = false; + } - async runLoop() { - while (this._isPolling) { - this._cursor = await this.dataLayer.requests.pollConvoMessages( - this.convoId, - { cursor: this._cursor }, - ); - await wait(5000); - } + async runLoop() { + while (this._isPolling) { + this._cursor = await this.dataLayer.requests.pollConvoMessages( + this.convoId, + { cursor: this._cursor }, + ); + await wait(5000); } } + } - const messageFetcher = new MessageFetcher(dataLayer, convoId); + const messageFetcher = new MessageFetcher(dataLayer, convoId); - function clearMessageSelection() { - state.$activeMessageId.set(null); - state.$paletteMessageId.set(null); - } + function clearMessageSelection() { + state.$activeMessageId.set(null); + state.$paletteMessageId.set(null); + } - function getMessage(messageId) { - return dataLayer.derived.$hydratedConvoMessages - .get(convoId) - ?.messages.find((message) => message.id === messageId); - } + function getMessage(messageId) { + return dataLayer.derived.$hydratedConvoMessages + .get(convoId) + ?.messages.find((message) => message.id === messageId); + } - const EMOJI_REACTION_LIMIT = 5; + const EMOJI_REACTION_LIMIT = 5; - function getUserDistinctReactionValues(message, currentUserDid) { - const values = new Set(); - for (const reaction of message.reactions || []) { - if (reaction.sender.did === currentUserDid) { - values.add(reaction.value); - } + function getUserDistinctReactionValues(message, currentUserDid) { + const values = new Set(); + for (const reaction of message.reactions || []) { + if (reaction.sender.did === currentUserDid) { + values.add(reaction.value); } - return values; } + return values; + } - function hasAlreadyReacted(message, currentUserDid, emoji) { - return (message.reactions || []).some( - (reaction) => - reaction.sender.did === currentUserDid && reaction.value === emoji, - ); - } + function hasAlreadyReacted(message, currentUserDid, emoji) { + return (message.reactions || []).some( + (reaction) => + reaction.sender.did === currentUserDid && reaction.value === emoji, + ); + } + + function hasReachedReactionLimit(message, currentUserDid) { + return ( + getUserDistinctReactionValues(message, currentUserDid).size >= + EMOJI_REACTION_LIMIT + ); + } - function hasReachedReactionLimit(message, currentUserDid) { - return ( - getUserDistinctReactionValues(message, currentUserDid).size >= - EMOJI_REACTION_LIMIT + async function handleEmojiSelect(emoji, messageId, currentUserDid) { + const message = getMessage(messageId); + if ( + message && + !hasAlreadyReacted(message, currentUserDid, emoji) && + hasReachedReactionLimit(message, currentUserDid) + ) { + showToast( + `You cannot add more than ${EMOJI_REACTION_LIMIT} emoji reactions`, + { style: "info" }, ); + return; } - - async function handleEmojiSelect(emoji, messageId, currentUserDid) { - const message = getMessage(messageId); - if ( - message && - !hasAlreadyReacted(message, currentUserDid, emoji) && - hasReachedReactionLimit(message, currentUserDid) - ) { - showToast( - `You cannot add more than ${EMOJI_REACTION_LIMIT} emoji reactions`, - { style: "info" }, - ); - return; - } - try { - await dataLayer.mutations.addMessageReaction( - convoId, - messageId, - emoji, - currentUserDid, - ); - clearMessageSelection(); - } catch (error) { - console.error(error); - showToast("Failed to add emoji reaction", { style: "error" }); - } + try { + await dataLayer.mutations.addMessageReaction( + convoId, + messageId, + emoji, + currentUserDid, + ); + clearMessageSelection(); + } catch (error) { + console.error(error); + showToast("Failed to add emoji reaction", { style: "error" }); } + } - async function handleReactionRemove(emoji, messageId, currentUserDid) { - try { - await dataLayer.mutations.removeMessageReaction( - convoId, - messageId, - emoji, - currentUserDid, - ); - } catch (error) { - console.error(error); - showToast("Failed to remove emoji reaction", { style: "error" }); - } + async function handleReactionRemove(emoji, messageId, currentUserDid) { + try { + await dataLayer.mutations.removeMessageReaction( + convoId, + messageId, + emoji, + currentUserDid, + ); + } catch (error) { + console.error(error); + showToast("Failed to remove emoji reaction", { style: "error" }); } + } - function handleMessageClick(messageId) { - if (!isMobileViewport() && canHover()) { - return; - } - const current = state.$activeMessageId.get(); - if (current === messageId) { - clearMessageSelection(); - } else { - state.$activeMessageId.set(messageId); - state.$paletteMessageId.set(null); - } + function handleMessageClick(messageId) { + if (!isMobileViewport() && canHover()) { + return; } - - function handleEmojiTriggerClick(messageId) { - const current = state.$paletteMessageId.get(); + const current = state.$activeMessageId.get(); + if (current === messageId) { + clearMessageSelection(); + } else { state.$activeMessageId.set(messageId); - state.$paletteMessageId.set(current === messageId ? null : messageId); + state.$paletteMessageId.set(null); } + } - // Clear active message / palette on outside click - function handleRootClick(event) { - if ( - state.$activeMessageId.get() === null && - state.$paletteMessageId.get() === null - ) { - return; - } - if ( - event.target.closest(".message") || - event.target.closest(".reaction-palette") || - event.target.closest(".message-emoji-trigger") || - event.target.closest(".message-more-trigger") - ) { - return; - } - clearMessageSelection(); + function handleEmojiTriggerClick(messageId) { + const current = state.$paletteMessageId.get(); + state.$activeMessageId.set(messageId); + state.$paletteMessageId.set(current === messageId ? null : messageId); + } + + // Clear active message / palette on outside click + function handleRootClick(event) { + if ( + state.$activeMessageId.get() === null && + state.$paletteMessageId.get() === null + ) { + return; + } + if ( + event.target.closest(".message") || + event.target.closest(".reaction-palette") || + event.target.closest(".message-emoji-trigger") || + event.target.closest(".message-more-trigger") + ) { + return; } + clearMessageSelection(); + } - async function handleSendMessage(messageText, onSuccess) { - state.$isSendingMessage.set(true); - const stagedReply = state.$stagedReply.get(); - try { - const staged = state.$stagedRecordEmbed.get(); - let text = messageText; - let embed = null; - if (staged) { - let record = staged.record; - if (!record) { - try { - record = await resolveRecordFromLink(staged.url, { - identityResolver, - dataLayer, - }); - } catch (error) { - console.warn("Error resolving record embed at send: ", error); - } - } - if (record) { - text = stripLeadingOrTrailingLink(text, staged.url); - embed = { - $type: "app.bsky.embed.record", - record: { uri: record.uri, cid: record.cid }, - }; - } else if (!text.trim()) { - showToast("Couldn't load embed", { style: "error" }); - return; + async function handleSendMessage(messageText, onSuccess) { + state.$isSendingMessage.set(true); + const stagedReply = state.$stagedReply.get(); + try { + const staged = state.$stagedRecordEmbed.get(); + let text = messageText; + let embed = null; + if (staged) { + let record = staged.record; + if (!record) { + try { + record = await resolveRecordFromLink(staged.url, { + identityResolver, + dataLayer, + }); + } catch (error) { + console.warn("Error resolving record embed at send: ", error); } } - const facets = await getFacetsFromText(text, identityResolver); - await dataLayer.mutations.createMessage(convoId, { - text, - facets, - replyTo: stagedReply ? { messageId: stagedReply.id } : null, - embed, - }); - state.$stagedReply.set(null); - state.$stagedRecordEmbed.set(null); - rejectedRecordLinks.clear(); - onSuccess(); - await raf(); - await raf(); - scrollToBottom(); - } catch (error) { - console.error(error); - const serverMessage = error?.data?.message ?? error?.message ?? ""; - const errorMessage = /block between recipient and sender/i.test( - serverMessage, - ) - ? "Can't send: block between you and recipient" - : "Failed to send message"; - showToast(errorMessage, { style: "error" }); - } finally { - state.$isSendingMessage.set(false); - await raf(); - focusChatInput(); + if (record) { + text = stripLeadingOrTrailingLink(text, staged.url); + embed = { + $type: "app.bsky.embed.record", + record: { uri: record.uri, cid: record.cid }, + }; + } else if (!text.trim()) { + showToast("Couldn't load embed", { style: "error" }); + return; + } } + const facets = await getFacetsFromText(text, identityResolver); + await dataLayer.mutations.createMessage(convoId, { + text, + facets, + replyTo: stagedReply ? { messageId: stagedReply.id } : null, + embed, + }); + state.$stagedReply.set(null); + state.$stagedRecordEmbed.set(null); + rejectedRecordLinks.clear(); + onSuccess(); + await raf(); + await raf(); + scrollToBottom(); + } catch (error) { + console.error(error); + const serverMessage = error?.data?.message ?? error?.message ?? ""; + const errorMessage = /block between recipient and sender/i.test( + serverMessage, + ) + ? "Can't send: block between you and recipient" + : "Failed to send message"; + showToast(errorMessage, { style: "error" }); + } finally { + state.$isSendingMessage.set(false); + await raf(); + focusChatInput(); } + } - async function handleToggleMute(convo, muted) { - state.$isMuteSaving.set(true); - try { - await dataLayer.mutations.setConvoMuted(convo, muted); - showToast(muted ? "Conversation muted" : "Conversation unmuted"); - } catch (err) { - console.error(err); - showToast( - muted - ? "Failed to mute conversation" - : "Failed to unmute conversation", - { style: "error" }, - ); - } finally { - state.$isMuteSaving.set(false); - } + async function handleToggleMute(convo, muted) { + state.$isMuteSaving.set(true); + try { + await dataLayer.mutations.setConvoMuted(convo, muted); + showToast(muted ? "Conversation muted" : "Conversation unmuted"); + } catch (err) { + console.error(err); + showToast( + muted ? "Failed to mute conversation" : "Failed to unmute conversation", + { style: "error" }, + ); + } finally { + state.$isMuteSaving.set(false); } + } - async function handleLeave(convo) { - const didLeave = await confirmModal( - "Are you sure you want to leave this conversation? It will be removed from your inbox.", - { - title: "Leave conversation", - confirmButtonText: "Leave conversation", - confirmButtonStyle: "danger", - pendingText: "Leaving", - onConfirm: async () => { - try { - await dataLayer.mutations.leaveConvo(convo); - } catch (err) { - if ( - err instanceof ApiError && - err.data?.error === "InvalidConvo" - ) { - showToast("Conversation not found.", { style: "error" }); - throw err; - } - console.error(err); - showToast("Could not leave conversation", { style: "error" }); + async function handleLeave(convo) { + const didLeave = await confirmModal( + "Are you sure you want to leave this conversation? It will be removed from your inbox.", + { + title: "Leave conversation", + confirmButtonText: "Leave conversation", + confirmButtonStyle: "danger", + pendingText: "Leaving", + onConfirm: async () => { + try { + await dataLayer.mutations.leaveConvo(convo); + } catch (err) { + if (err instanceof ApiError && err.data?.error === "InvalidConvo") { + showToast("Conversation not found.", { style: "error" }); throw err; } - }, + console.error(err); + showToast("Could not leave conversation", { style: "error" }); + throw err; + } }, - ); - if (didLeave) { - router.go("/messages"); - showToast("Left conversation"); - } + }, + ); + if (didLeave) { + router.go("/messages"); + showToast("Left conversation"); } + } - function groupMessages(messages, currentUserDid) { - const groups = []; - let currentGroup = null; - - for (const message of messages) { - if (message.$type === "chat.bsky.convo.defs#systemMessageView") { - // System messages render standalone and break up sender clusters - currentGroup = null; - groups.push({ - isSystemMessage: true, - message, - lastSentAt: message.sentAt, - }); - continue; - } - const senderDid = message.sender.did; - const isCurrentUser = senderDid === currentUserDid; - if ( - !currentGroup || - currentGroup.senderDid !== senderDid || - differenceInMinutes(currentGroup.lastSentAt, message.sentAt) > 5 || - message.replyTo - ) { - // Start a new group - currentGroup = { - isCurrentUser, - senderDid, - messages: [message], - lastSentAt: message.sentAt, - }; - groups.push(currentGroup); - } else { - // Add to current group - currentGroup.messages.push(message); - currentGroup.lastSentAt = message.sentAt; - } + function groupMessages(messages, currentUserDid) { + const groups = []; + let currentGroup = null; + + for (const message of messages) { + if (message.$type === "chat.bsky.convo.defs#systemMessageView") { + // System messages render standalone and break up sender clusters + currentGroup = null; + groups.push({ + isSystemMessage: true, + message, + lastSentAt: message.sentAt, + }); + continue; } - - return groups; - } - - function getMemberProfile(convo, memberDid) { - if (!convo) { - return null; + const senderDid = message.sender.did; + const isCurrentUser = senderDid === currentUserDid; + if ( + !currentGroup || + currentGroup.senderDid !== senderDid || + differenceInMinutes(currentGroup.lastSentAt, message.sentAt) > 5 || + message.replyTo + ) { + // Start a new group + currentGroup = { + isCurrentUser, + senderDid, + messages: [message], + lastSentAt: message.sentAt, + }; + groups.push(currentGroup); + } else { + // Add to current group + currentGroup.messages.push(message); + currentGroup.lastSentAt = message.sentAt; } - const profiles = dataLayer.derived.$convoProfiles.get(convo.id); - return profiles.find((profile) => profile.did === memberDid) ?? null; } - function getDateFromTimestamp(timestamp) { - // Get date by setting the time to 00:00:00 - return new Date(new Date(timestamp).setHours(0, 0, 0, 0)); - } + return groups; + } - function getDayOfWeek(date) { - return date.toLocaleDateString("en-US", { weekday: "long" }); + function getMemberProfile(convo, memberDid) { + if (!convo) { + return null; } + const profiles = dataLayer.derived.$convoProfiles.get(convo.id); + return profiles.find((profile) => profile.did === memberDid) ?? null; + } - function isSameDate(date1, date2) { - return ( - date1.getFullYear() === date2.getFullYear() && - date1.getMonth() === date2.getMonth() && - date1.getDate() === date2.getDate() - ); - } + function getDateFromTimestamp(timestamp) { + // Get date by setting the time to 00:00:00 + return new Date(new Date(timestamp).setHours(0, 0, 0, 0)); + } - function groupMessageGroupsByDay(messageGroups) { - const days = []; - let currentDay = null; - for (const group of messageGroups) { - const groupDate = getDateFromTimestamp(group.lastSentAt); - if (!currentDay || !isSameDate(currentDay.date, groupDate)) { - currentDay = { - date: groupDate, - messageGroups: [group], - }; - days.push(currentDay); - } else { - currentDay.messageGroups.push(group); - } + function getDayOfWeek(date) { + return date.toLocaleDateString("en-US", { weekday: "long" }); + } + + function isSameDate(date1, date2) { + return ( + date1.getFullYear() === date2.getFullYear() && + date1.getMonth() === date2.getMonth() && + date1.getDate() === date2.getDate() + ); + } + + function groupMessageGroupsByDay(messageGroups) { + const days = []; + let currentDay = null; + for (const group of messageGroups) { + const groupDate = getDateFromTimestamp(group.lastSentAt); + if (!currentDay || !isSameDate(currentDay.date, groupDate)) { + currentDay = { + date: groupDate, + messageGroups: [group], + }; + days.push(currentDay); + } else { + currentDay.messageGroups.push(group); } - return days; } + return days; + } - function reactionBubblesTemplate({ - message, - isCurrentUser, - currentUserDid, - isGroup, - convo, - }) { - const reactions = message.reactions || []; - if (reactions.length === 0) { - return ""; - } - const groupedReactions = groupReactions(reactions); - const selfReacted = reactions.some( - (reaction) => reaction.sender.did === currentUserDid, - ); - const showTotalCount = - reactions.length > 1 && - (groupedReactions.length !== reactions.length || - groupedReactions.length > 10); - - function describeReactions() { - if (reactions.length === 1) { - const [reaction] = reactions; - if (reaction.sender.did === currentUserDid) { - return `You reacted ${reaction.value}`; - } - const profile = getMemberProfile(convo, reaction.sender.did); - return `${profile ? getDisplayName(profile) : "Someone"} reacted ${reaction.value}`; + function reactionBubblesTemplate({ + message, + isCurrentUser, + currentUserDid, + isGroup, + convo, + }) { + const reactions = message.reactions || []; + if (reactions.length === 0) { + return ""; + } + const groupedReactions = groupReactions(reactions); + const selfReacted = reactions.some( + (reaction) => reaction.sender.did === currentUserDid, + ); + const showTotalCount = + reactions.length > 1 && + (groupedReactions.length !== reactions.length || + groupedReactions.length > 10); + + function describeReactions() { + if (reactions.length === 1) { + const [reaction] = reactions; + if (reaction.sender.did === currentUserDid) { + return `You reacted ${reaction.value}`; } - const senderCount = new Set( - reactions.map((reaction) => reaction.sender.did), - ).size; - return `${senderCount === 1 ? "1 person" : `${senderCount} people`} reacted – ${groupedReactions - .map((group) => group.value) - .join(" ")}`; + const profile = getMemberProfile(convo, reaction.sender.did); + return `${profile ? getDisplayName(profile) : "Someone"} reacted ${reaction.value}`; } + const senderCount = new Set( + reactions.map((reaction) => reaction.sender.did), + ).size; + return `${senderCount === 1 ? "1 person" : `${senderCount} people`} reacted – ${groupedReactions + .map((group) => group.value) + .join(" ")}`; + } - return html` -
{ + if (!isGroup) return; + e.stopPropagation(); + state.$reactionsDialogMessageId.set(message.id); + }} + aria-label=${isGroup + ? `${describeReactions()}. Tap to view reactions` + : describeReactions()} + > + ${groupedReactions.slice(0, 10).map((group) => { + const isOwnReaction = group.senders.some( + (sender) => sender.did === currentUserDid, + ); + return html` + + ${group.value} + + `; + })} + ${showTotalCount + ? html`${reactions.length}` + : ""} +
+ `; + } + + function reactionPaletteTemplate({ message, currentUserDid }) { + const emojis = ["❤️", "👍", "😆", "👀", "😢"]; + const limitReached = hasReachedReactionLimit(message, currentUserDid); + return html` +
e.stopPropagation()} + > + ${emojis.map((emoji) => { + const isActive = hasAlreadyReacted(message, currentUserDid, emoji); + const isDisabled = limitReached && !isActive; + return html` + + `; + })} +
- `; - } + ... + + { + handleEmojiSelect(e.detail.emoji, message.id, currentUserDid); + }} + > +
+ `; + } - function reactionPaletteTemplate({ message, currentUserDid }) { - const emojis = ["❤️", "👍", "😆", "👀", "😢"]; - const limitReached = hasReachedReactionLimit(message, currentUserDid); - return html` -
e.stopPropagation()} - > - ${emojis.map((emoji) => { - const isActive = hasAlreadyReacted(message, currentUserDid, emoji); - const isDisabled = limitReached && !isActive; - return html` - - `; - })} - - { - handleEmojiSelect(e.detail.emoji, message.id, currentUserDid); - }} - > -
- `; + function getReplyQuotePreviewText(replyTo) { + const text = replyTo?.text; + if (text && text.trim()) { + return { text, muted: false }; } - - function getReplyQuotePreviewText(replyTo) { - const text = replyTo?.text; - if (text && text.trim()) { - return { text, muted: false }; - } - const embedType = replyTo?.embed?.$type; - if (embedType === "app.bsky.embed.record#view") { - return { text: "(quoted post)", muted: true }; - } - if (embedType === "chat.bsky.embed.joinLink#view") { - return { text: "(chat invite link)", muted: true }; - } - return { text: "No text", muted: true }; + const embedType = replyTo?.embed?.$type; + if (embedType === "app.bsky.embed.record#view") { + return { text: "(quoted post)", muted: true }; } + if (embedType === "chat.bsky.embed.joinLink#view") { + return { text: "(chat invite link)", muted: true }; + } + return { text: "No text", muted: true }; + } - function messageReplyQuoteTemplate({ - replyTo, - senderProfile, - isCurrentUser, - }) { - if (!replyTo) return null; - const { text, muted } = getReplyQuotePreviewText(replyTo); - const senderName = senderProfile - ? getDisplayName(senderProfile) - : "Unknown"; - return html`
{ - event.stopPropagation(); - scrollToAndHighlightMessage(replyTo.id); - }} + function messageReplyQuoteTemplate({ + replyTo, + senderProfile, + isCurrentUser, + }) { + if (!replyTo) return null; + const { text, muted } = getReplyQuotePreviewText(replyTo); + const senderName = senderProfile + ? getDisplayName(senderProfile) + : "Unknown"; + return html`
{ + event.stopPropagation(); + scrollToAndHighlightMessage(replyTo.id); + }} + > +
+ ${senderName} +
+
-
- ${senderName} -
-
- ${text} -
-
`; - } + ${text} +
+
`; + } - function messageReplyCaptionTemplate({ - replyTo, - replierProfile, - originalSenderProfile, - isCurrentUserReplier, - isOriginalSenderCurrentUser, - }) { - const originalName = isOriginalSenderCurrentUser - ? isCurrentUserReplier - ? "yourself" - : "you" - : originalSenderProfile - ? getDisplayName(originalSenderProfile) - : "someone"; - const captionText = isCurrentUserReplier - ? `You replied to ${originalName}` - : `${ - replierProfile ? getDisplayName(replierProfile) : "Someone" - } replied to ${originalName}`; - return html`
{ - event.stopPropagation(); - scrollToAndHighlightMessage(replyTo.id); - }} + function messageReplyCaptionTemplate({ + replyTo, + replierProfile, + originalSenderProfile, + isCurrentUserReplier, + isOriginalSenderCurrentUser, + }) { + const originalName = isOriginalSenderCurrentUser + ? isCurrentUserReplier + ? "yourself" + : "you" + : originalSenderProfile + ? getDisplayName(originalSenderProfile) + : "someone"; + const captionText = isCurrentUserReplier + ? `You replied to ${originalName}` + : `${ + replierProfile ? getDisplayName(replierProfile) : "Someone" + } replied to ${originalName}`; + return html`
{ + event.stopPropagation(); + scrollToAndHighlightMessage(replyTo.id); + }} + > + - - ${captionText} -
`; - } + ${captionText} +
`; + } - function isEmojiOnlyMessage(message) { - return isOnlyEmoji(message?.text ?? "") && !message?.facets?.length; - } + function isEmojiOnlyMessage(message) { + return isOnlyEmoji(message?.text ?? "") && !message?.facets?.length; + } - function messageTemplate({ - message, - isCurrentUser, - currentUserDid, - showAvatar, - author, - isActive, - isPaletteOpen, - isGroup, - canReactNow, - convo, - }) { - const replyTo = message.replyTo; - const replySenderProfile = - replyTo && replyTo.sender - ? getMemberProfile(convo, replyTo.sender.did) - : null; - const isEmojiOnly = isEmojiOnlyMessage(message); - return html` + function messageTemplate({ + message, + isCurrentUser, + currentUserDid, + showAvatar, + author, + isActive, + isPaletteOpen, + isGroup, + canReactNow, + convo, + }) { + const replyTo = message.replyTo; + const replySenderProfile = + replyTo && replyTo.sender + ? getMemberProfile(convo, replyTo.sender.did) + : null; + const isEmojiOnly = isEmojiOnlyMessage(message); + return html` +
handleMessageClick(message.id)} + class="message ${isCurrentUser ? "message-sent" : "message-received"}" > -
handleMessageClick(message.id)} - class="message ${isCurrentUser - ? "message-sent" - : "message-received"}" - > - ${!isCurrentUser && showAvatar - ? html`
- ${author - ? avatarTemplate({ author }) - : html`
`} + ${!isCurrentUser && showAvatar + ? html`
+ ${author + ? avatarTemplate({ author }) + : html`
`} +
` + : !isCurrentUser && !showAvatar + ? html`
` + : ""} +
+ ${message.embed + ? html`
+ ${postEmbedTemplate({ + embed: message.embed, + isAuthenticated: true, + currentConvoId: convoId, + pluginService, + })}
` - : !isCurrentUser && !showAvatar - ? html`
` - : ""} -
- ${message.embed - ? html`
- ${postEmbedTemplate({ - embed: message.embed, - isAuthenticated: true, - currentConvoId: convoId, - pluginService, + : null} + ${message.text + ? html`
+ ${replyTo && !isEmojiOnly + ? messageReplyQuoteTemplate({ + replyTo, + senderProfile: replySenderProfile, + isCurrentUser, + }) + : null} +
+ ${richTextTemplate({ + text: message.text, + facets: message.facets, + truncateUrls: true, })} -
` - : null} - ${message.text - ? html`
- ${replyTo && !isEmojiOnly - ? messageReplyQuoteTemplate({ - replyTo, - senderProfile: replySenderProfile, - isCurrentUser, - }) - : null} -
- ${richTextTemplate({ - text: message.text, - facets: message.facets, - truncateUrls: true, - })} -
-
` - : null} - ${reactionBubblesTemplate({ - message, - isCurrentUser, - currentUserDid, - isGroup, - convo, - })} -
- ${canReactNow - ? html`
- - +
` - : ""} -
- ${isPaletteOpen - ? reactionPaletteTemplate({ message, currentUserDid }) - : ""} -
- `; - } - - function formatTime(timestamp) { - return new Date(timestamp).toLocaleTimeString([], { - hour: "numeric", - minute: "2-digit", - hour12: true, - }); - } - - function systemMessageTemplate({ message, convo }) { - const memberDid = message.data?.member?.did; - const memberProfile = memberDid - ? getMemberProfile(convo, memberDid) - : null; - const memberName = memberProfile ? getDisplayName(memberProfile) : null; - return html` -
- ${getSystemMessageDisplayText(message, { memberName })} -
- `; - } - - function messageGroupTemplate({ - group, - convo, - isGroup, - currentUserDid, - canReactNow, - }) { - const author = group.isCurrentUser - ? null - : getMemberProfile(convo, group.senderDid); - const leadingReplyTo = group.messages[0]?.replyTo ?? null; - const isLeadingEmojiOnly = isEmojiOnlyMessage(group.messages[0]); - const replierProfile = group.isCurrentUser - ? null - : getMemberProfile(convo, group.senderDid); - const originalSenderProfile = - leadingReplyTo && leadingReplyTo.sender - ? getMemberProfile(convo, leadingReplyTo.sender.did) - : null; - return html` -
- ${leadingReplyTo - ? messageReplyCaptionTemplate({ - replyTo: leadingReplyTo, - replierProfile, - originalSenderProfile, - isCurrentUserReplier: group.isCurrentUser, - isOriginalSenderCurrentUser: - leadingReplyTo.sender?.did === currentUserDid, - }) - : ""} - ${isGroup && - !group.isCurrentUser && - !leadingReplyTo && - !isLeadingEmojiOnly - ? html`
- ${author ? getDisplayName(author) : "Unknown member"} -
` - : ""} - ${group.messages.map((message, index) => - messageTemplate({ + : null} + ${reactionBubblesTemplate({ message, - isCurrentUser: group.isCurrentUser, + isCurrentUser, currentUserDid, - showAvatar: index === 0, - author, - isActive: state.$activeMessageId.get() === message.id, - isPaletteOpen: state.$paletteMessageId.get() === message.id, isGroup, - canReactNow, convo, - }), - )} -
- ${formatTime(group.lastSentAt)} + })}
+ ${canReactNow + ? html`
+ + +
` + : ""}
- `; - } + ${isPaletteOpen + ? reactionPaletteTemplate({ message, currentUserDid }) + : ""} +
+ `; + } - function messageDayTitleTemplate({ date, startTime }) { - const isToday = isSameDate(date, new Date()); - return html`
- ${isToday ? "Today" : getDayOfWeek(date)} at - ${formatTime(startTime)} -
`; - } + function formatTime(timestamp) { + return new Date(timestamp).toLocaleTimeString([], { + hour: "numeric", + minute: "2-digit", + hour12: true, + }); + } - function directInfoPanelTemplate({ profile }) { - const isFollowedBy = - !!profile.viewer?.followedBy && - !profile.viewer?.blocking && - !profile.viewer?.blockedBy; - return html`
- ${avatarTemplate({ author: profile })} -
- ${getDisplayName(profile)}${verificationBadgeTemplate({ - profile, - })}${automatedAccountBadgeTemplate({ profile })} -
- ${hasValidHandle(profile) - ? html`
@${profile.handle}
` + function systemMessageTemplate({ message, convo }) { + const memberDid = message.data?.member?.did; + const memberProfile = memberDid ? getMemberProfile(convo, memberDid) : null; + const memberName = memberProfile ? getDisplayName(memberProfile) : null; + return html` +
+ ${getSystemMessageDisplayText(message, { memberName })} +
+ `; + } + + function messageGroupTemplate({ + group, + convo, + isGroup, + currentUserDid, + canReactNow, + }) { + const author = group.isCurrentUser + ? null + : getMemberProfile(convo, group.senderDid); + const leadingReplyTo = group.messages[0]?.replyTo ?? null; + const isLeadingEmojiOnly = isEmojiOnlyMessage(group.messages[0]); + const replierProfile = group.isCurrentUser + ? null + : getMemberProfile(convo, group.senderDid); + const originalSenderProfile = + leadingReplyTo && leadingReplyTo.sender + ? getMemberProfile(convo, leadingReplyTo.sender.did) + : null; + return html` +
+ ${leadingReplyTo + ? messageReplyCaptionTemplate({ + replyTo: leadingReplyTo, + replierProfile, + originalSenderProfile, + isCurrentUserReplier: group.isCurrentUser, + isOriginalSenderCurrentUser: + leadingReplyTo.sender?.did === currentUserDid, + }) : ""} - ${isFollowedBy + ${isGroup && + !group.isCurrentUser && + !leadingReplyTo && + !isLeadingEmojiOnly ? html`
- Follows you + ${author ? getDisplayName(author) : "Unknown member"}
` : ""} - ${authorBadgesTemplate({ - badgeLabels: profile.badgeLabels, - did: profile.did, - pluginService, - })} - + messageTemplate({ + message, + isCurrentUser: group.isCurrentUser, + currentUserDid, + showAvatar: index === 0, + author, + isActive: state.$activeMessageId.get() === message.id, + isPaletteOpen: state.$paletteMessageId.get() === message.id, + isGroup, + canReactNow, + convo, + }), + )} +
- Go to profile - -
`; - } + ${formatTime(group.lastSentAt)} +
+
+ `; + } - function getNewGroupChatDescription({ otherMembers, memberCount }) { - const names = otherMembers.map((member) => getDisplayName(member)); - if (names.length === 0) { - return "New group chat."; - } - if (names.length === 1) { - return `New chat with ${names[0]}.`; - } - // memberCount includes the current user, so subtract them plus the - // two named members - const remainingCount = memberCount - 3; - if (remainingCount > 0) { - return `New chat with ${names[0]}, ${names[1]}, and ${remainingCount} more.`; - } - return `New chat with ${names[0]} and ${names[1]}.`; - } + function messageDayTitleTemplate({ date, startTime }) { + const isToday = isSameDate(date, new Date()); + return html`
+ ${isToday ? "Today" : getDayOfWeek(date)} at + ${formatTime(startTime)} +
`; + } - function groupInfoPanelTemplate({ convo, groupDetails, currentUserDid }) { - const otherMembers = convo.members.filter( - (member) => member.did !== currentUserDid, - ); - return html`
-
- ${avatarGroupTemplate({ authors: otherMembers })} -
- ${groupDetails.name - ? html`
${groupDetails.name}
` - : ""} -
- ${getNewGroupChatDescription({ - otherMembers, - memberCount: groupDetails.memberCount, - })} -
-
`; - } + function directInfoPanelTemplate({ profile }) { + const isFollowedBy = + !!profile.viewer?.followedBy && + !profile.viewer?.blocking && + !profile.viewer?.blockedBy; + return html`
+ ${avatarTemplate({ author: profile })} +
+ ${getDisplayName(profile)}${verificationBadgeTemplate({ + profile, + })}${automatedAccountBadgeTemplate({ profile })} +
+ ${hasValidHandle(profile) + ? html`
@${profile.handle}
` + : ""} + ${isFollowedBy + ? html`
+ Follows you +
` + : ""} + ${authorBadgesTemplate({ + badgeLabels: profile.badgeLabels, + did: profile.did, + pluginService, + })} + + Go to profile + +
`; + } - function chatInfoPanelTemplate({ convo, isGroup, currentUserDid }) { - if (!convo) { - return null; - } - if (isGroup) { - return groupInfoPanelTemplate({ - convo, - groupDetails: getGroupConvoDetails(convo), - currentUserDid, - }); - } - const otherMember = convo.members.find( - (member) => member.did !== currentUserDid, - ); - if (!otherMember) { - return null; - } - const profile = getMemberProfile(convo, otherMember.did) ?? otherMember; - return directInfoPanelTemplate({ profile }); + function getNewGroupChatDescription({ otherMembers, memberCount }) { + const names = otherMembers.map((member) => getDisplayName(member)); + if (names.length === 0) { + return "New group chat."; + } + if (names.length === 1) { + return `New chat with ${names[0]}.`; } + // memberCount includes the current user, so subtract them plus the + // two named members + const remainingCount = memberCount - 3; + if (remainingCount > 0) { + return `New chat with ${names[0]}, ${names[1]}, and ${remainingCount} more.`; + } + return `New chat with ${names[0]} and ${names[1]}.`; + } - function chatEmptyTemplate({ convo, isGroup, currentUserDid }) { - const infoPanel = chatInfoPanelTemplate({ + function groupInfoPanelTemplate({ convo, groupDetails, currentUserDid }) { + const otherMembers = convo.members.filter( + (member) => member.did !== currentUserDid, + ); + return html`
+
+ ${avatarGroupTemplate({ authors: otherMembers })} +
+ ${groupDetails.name + ? html`
${groupDetails.name}
` + : ""} +
+ ${getNewGroupChatDescription({ + otherMembers, + memberCount: groupDetails.memberCount, + })} +
+
`; + } + + function chatInfoPanelTemplate({ convo, isGroup, currentUserDid }) { + if (!convo) { + return null; + } + if (isGroup) { + return groupInfoPanelTemplate({ convo, - isGroup, + groupDetails: getGroupConvoDetails(convo), currentUserDid, }); - return html`
- ${infoPanel ?? html`
No messages yet!
`} -
`; } + const otherMember = convo.members.find( + (member) => member.did !== currentUserDid, + ); + if (!otherMember) { + return null; + } + const profile = getMemberProfile(convo, otherMember.did) ?? otherMember; + return directInfoPanelTemplate({ profile }); + } - function messagesTemplate({ - loadingEnabled, - messages, - currentUserDid, + function chatEmptyTemplate({ convo, isGroup, currentUserDid }) { + const infoPanel = chatInfoPanelTemplate({ convo, isGroup, - hasMore, - canReactNow, - }) { - if (!messages || messages.length === 0) { - return chatEmptyTemplate({ convo, isGroup, currentUserDid }); - } - const reversedMessages = messages.toReversed(); - const messageGroups = groupMessages(reversedMessages, currentUserDid); - const days = groupMessageGroupsByDay(messageGroups); - return html` - { - if (el) { - attachScrollListener(); + currentUserDid, + }); + return html`
+ ${infoPanel ?? html`
No messages yet!
`} +
`; + } + + function messagesTemplate({ + loadingEnabled, + messages, + currentUserDid, + convo, + isGroup, + hasMore, + canReactNow, + }) { + if (!messages || messages.length === 0) { + return chatEmptyTemplate({ convo, isGroup, currentUserDid }); + } + const reversedMessages = messages.toReversed(); + const messageGroups = groupMessages(reversedMessages, currentUserDid); + const days = groupMessageGroupsByDay(messageGroups); + return html` + { + if (el) { + attachScrollListener(); + } + })} + ?disabled=${!loadingEnabled} + lookahead="0px" + inverted + @load-more=${async (e) => { + if (hasMore) { + const scrollContainer = getMessageScroller(); + // In a short chat the top sentinel is visible while the user + // sits at the bottom; when the fetch inserts the info panel + // above, keep them pinned to the bottom instead of restoring + // a stale offset + const shouldStickToBottom = isScrolledToBottom(); + // Maintain scroll position using scrollHeight difference + const previousScrollHeight = scrollContainer.scrollHeight; + const previousScrollTop = scrollContainer.scrollTop; + await loadMessages(); + await raf(); + await raf(); + if (shouldStickToBottom) { + pinScrollToBottom(); + } else { + // Restore scroll position + const newScrollHeight = scrollContainer.scrollHeight; + const heightDifference = newScrollHeight - previousScrollHeight; + scrollContainer.scrollTop = previousScrollTop + heightDifference; } + await wait(100); // wait for the scroll to complete so that we don't accidentally trigger the load more event again + e.detail.resume(); + } + }} + > + ${hasMore && loadingEnabled + ? html`` + : ""} + ${hasMore + ? "" + : chatInfoPanelTemplate({ convo, isGroup, currentUserDid })} +
+ ${days.map((day) => { + return html`
+ ${messageDayTitleTemplate({ + date: day.date, + startTime: day.messageGroups[0].lastSentAt, + })} + ${day.messageGroups.map((group) => + group.isSystemMessage + ? systemMessageTemplate({ message: group.message, convo }) + : messageGroupTemplate({ + group, + convo, + isGroup, + currentUserDid, + canReactNow, + }), + )} +
`; })} - ?disabled=${!loadingEnabled} - lookahead="0px" - inverted - @load-more=${async (e) => { - if (hasMore) { - const scrollContainer = getMessageScroller(); - // In a short chat the top sentinel is visible while the user - // sits at the bottom; when the fetch inserts the info panel - // above, keep them pinned to the bottom instead of restoring - // a stale offset - const shouldStickToBottom = isScrolledToBottom(); - // Maintain scroll position using scrollHeight difference - const previousScrollHeight = scrollContainer.scrollHeight; - const previousScrollTop = scrollContainer.scrollTop; - await loadMessages(); - await raf(); - await raf(); - if (shouldStickToBottom) { - pinScrollToBottom(); - } else { - // Restore scroll position - const newScrollHeight = scrollContainer.scrollHeight; - const heightDifference = newScrollHeight - previousScrollHeight; - scrollContainer.scrollTop = - previousScrollTop + heightDifference; - } - await wait(100); // wait for the scroll to complete so that we don't accidentally trigger the load more event again - e.detail.resume(); - } - }} - > - ${hasMore && loadingEnabled - ? html`` - : ""} - ${hasMore - ? "" - : chatInfoPanelTemplate({ convo, isGroup, currentUserDid })} -
- ${days.map((day) => { - return html`
- ${messageDayTitleTemplate({ - date: day.date, - startTime: day.messageGroups[0].lastSentAt, - })} - ${day.messageGroups.map((group) => - group.isSystemMessage - ? systemMessageTemplate({ message: group.message, convo }) - : messageGroupTemplate({ - group, - convo, - isGroup, - currentUserDid, - canReactNow, - }), - )} -
`; - })} -
- - `; - } +
+ + `; + } - function messagesErrorTemplate({ error }) { - if (error instanceof ApiError && error.data?.error === "InvalidConvo") { - return html`
-

Not Found

-
Conversation not found
- -
`; - } - console.error(error); - return html`
-
There was an error loading messages.
+ function messagesErrorTemplate({ error }) { + if (error instanceof ApiError && error.data?.error === "InvalidConvo") { + return html`
+

Not Found

+
Conversation not found
`; } + console.error(error); + return html`
+
There was an error loading messages.
+ +
`; + } - async function loadMessages({ reload = false } = {}) { - await dataLayer.requests.loadConvoMessages(convoId, { - reload, - limit: CHAT_MESSAGES_PAGE_SIZE, - }); - } + async function loadMessages({ reload = false } = {}) { + await dataLayer.requests.loadConvoMessages(convoId, { + reload, + limit: CHAT_MESSAGES_PAGE_SIZE, + }); + } - function getOtherMember(currentUser, convo) { - if (!currentUser || !convo) { - return null; - } - if (isGroupConvo(convo)) { - return null; - } - return convo.members.find((member) => member.did !== currentUser?.did); + function getOtherMember(currentUser, convo) { + if (!currentUser || !convo) { + return null; + } + if (isGroupConvo(convo)) { + return null; } + return convo.members.find((member) => member.did !== currentUser?.did); + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/messages"); - }); + bindPageTitle(root, () => "Chat"); - bindPageTitle(root, () => "Chat"); - - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const convo = dataLayer.derived.$convos.get(convoId); - const groupDetails = convo ? getGroupConvoDetails(convo) : null; - const messagesData = - dataLayer.derived.$hydratedConvoMessages.get(convoId); - const messages = messagesData?.messages ?? null; - const convoRequestStatus = dataLayer.requests.statusStore.$statuses.get( - "loadConvo-" + convoId, - ); - const messagesRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadConvoMessages-" + convoId, - ); - const requestError = - convoRequestStatus.error || messagesRequestStatus.error; - const hasMore = !!messagesData?.cursor; - const isSendingMessage = state.$isSendingMessage.get(); - const isMuteSaving = state.$isMuteSaving.get(); - const isLocked = !!groupDetails && groupDetails.lockStatus !== "unlocked"; - const canReactNow = !!convo && convo.status !== "disabled" && !isLocked; - const convoPermalink = getPermalinkForConvo(convoId); - const reactionsDialogMessageId = state.$reactionsDialogMessageId.get(); - const stagedReply = state.$stagedReply.get(); - const stagedRecordEmbed = state.$stagedRecordEmbed.get(); - const stagedReplySenderProfile = - stagedReply && stagedReply.sender - ? getMemberProfile(convo, stagedReply.sender.did) - : null; - const otherMember = - !groupDetails && convo ? getOtherMember(currentUser, convo) : null; - let title = ""; - let subtitle = ""; - if (groupDetails) { - title = groupDetails.name; - subtitle = `${groupDetails.memberCount} ${ - groupDetails.memberCount === 1 ? "member" : "members" - }`; - } else if (otherMember) { - title = getDisplayName(otherMember); - subtitle = otherMember?.handle ? `@${otherMember.handle}` : ""; - } + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const convo = dataLayer.derived.$convos.get(convoId); + const groupDetails = convo ? getGroupConvoDetails(convo) : null; + const messagesData = dataLayer.derived.$hydratedConvoMessages.get(convoId); + const messages = messagesData?.messages ?? null; + const convoRequestStatus = dataLayer.requests.statusStore.$statuses.get( + "loadConvo-" + convoId, + ); + const messagesRequestStatus = dataLayer.requests.statusStore.$statuses.get( + "loadConvoMessages-" + convoId, + ); + const requestError = + convoRequestStatus.error || messagesRequestStatus.error; + const hasMore = !!messagesData?.cursor; + const isSendingMessage = state.$isSendingMessage.get(); + const isMuteSaving = state.$isMuteSaving.get(); + const isLocked = !!groupDetails && groupDetails.lockStatus !== "unlocked"; + const canReactNow = !!convo && convo.status !== "disabled" && !isLocked; + const convoPermalink = getPermalinkForConvo(convoId); + const reactionsDialogMessageId = state.$reactionsDialogMessageId.get(); + const stagedReply = state.$stagedReply.get(); + const stagedRecordEmbed = state.$stagedRecordEmbed.get(); + const stagedReplySenderProfile = + stagedReply && stagedReply.sender + ? getMemberProfile(convo, stagedReply.sender.did) + : null; + const otherMember = + !groupDetails && convo ? getOtherMember(currentUser, convo) : null; + let title = ""; + let subtitle = ""; + if (groupDetails) { + title = groupDetails.name; + subtitle = `${groupDetails.memberCount} ${ + groupDetails.memberCount === 1 ? "member" : "members" + }`; + } else if (otherMember) { + title = getDisplayName(otherMember); + subtitle = otherMember?.handle ? `@${otherMember.handle}` : ""; + } - render( - html`
- ${headerTemplate({ - avatarTemplate: () => { - if (groupDetails) { - const otherMembers = convo.members.filter( - (member) => member.did !== currentUser?.did, - ); - return avatarGroupTemplate({ authors: otherMembers }); - } - const otherMember = getOtherMember(currentUser, convo); - return otherMember ? avatarTemplate({ author: otherMember }) : ""; - }, - title, - subtitle, - titleRightItemTemplate: convo?.muted - ? () => - html`` + render( + html`
+ ${headerTemplate({ + avatarTemplate: () => { + if (groupDetails) { + const otherMembers = convo.members.filter( + (member) => member.did !== currentUser?.did, + ); + return avatarGroupTemplate({ authors: otherMembers }); + } + const otherMember = getOtherMember(currentUser, convo); + return otherMember ? avatarTemplate({ author: otherMember }) : ""; + }, + title, + subtitle, + titleRightItemTemplate: convo?.muted + ? () => + html`` + : null, + titleHref: + groupDetails && canViewGroupDetails + ? linkToGroupChatDetails(convoId) : null, - titleHref: - groupDetails && canViewGroupDetails - ? linkToGroupChatDetails(convoId) - : null, - backButtonFallbackRoute: "/messages", - rightItemTemplate: () => html` - + + { + window.open(convoPermalink, "_blank"); }} > - ... - - - { - window.open(convoPermalink, "_blank"); - }} - > - Open in bsky.app - - ${groupDetails && canViewGroupDetails - ? html` { - router.go(linkToGroupChatDetails(convoId)); - }} - > - Group chat settings - ` - : ""} - ${convo && !groupDetails - ? html` - - ${otherMember - ? html` { - router.go(linkToProfile(otherMember)); - }} - > - Go to profile - ` - : ""} - handleToggleMute(convo, !convo.muted)} - > - ${convo.muted - ? "Unmute conversation" - : "Mute conversation"} - - + Open in bsky.app + + ${groupDetails && canViewGroupDetails + ? html` { + router.go(linkToGroupChatDetails(convoId)); + }} + > + Group chat settings + ` + : ""} + ${convo && !groupDetails + ? html` + + ${otherMember + ? html` { + router.go(linkToProfile(otherMember)); + }} + > + Go to profile + ` + : ""} handleLeave(convo)} + data-testid="menu-action-mute" + data-teststate=${convo.muted ? "muted" : "unmuted"} + icon=${convo.muted ? "bell-line" : "bell-off-line"} + ?disabled=${isMuteSaving} + @click=${() => handleToggleMute(convo, !convo.muted)} > - Leave conversation + ${convo.muted + ? "Unmute conversation" + : "Mute conversation"} - ` - : ""} - - `, - })} -
- ${requestError - ? messagesErrorTemplate({ - error: requestError, + + handleLeave(convo)} + > + Leave conversation + + ` + : ""} + + `, + })} +
+ ${requestError + ? messagesErrorTemplate({ + error: requestError, + }) + : messages + ? messagesTemplate({ + loadingEnabled: state.$loadingEnabled.get(), + messages, + currentUserDid: currentUser?.did, + convo, + isGroup: !!groupDetails, + hasMore, + canReactNow, }) - : messages - ? messagesTemplate({ - loadingEnabled: state.$loadingEnabled.get(), - messages, - currentUserDid: currentUser?.did, - convo, - isGroup: !!groupDetails, - hasMore, - canReactNow, - }) - : html``} -
- ${isLocked - ? html`
- ${groupDetails.lockStatus === "locked-permanently" - ? "This chat has ended." - : "This chat is locked. New messages can't be sent."} -
` - : html` - ${stagedReply - ? messageReplyPreviewTemplate({ - staged: stagedReply, - senderProfile: stagedReplySenderProfile, - }) - : ""} - ${stagedRecordEmbed - ? stagedEmbedPreviewTemplate({ - staged: stagedRecordEmbed, - }) - : ""} - - handleSendMessage(e.detail.message, e.detail.onSuccess)} - @input-change=${(e) => handleComposerInput(e.detail)} - @height-change=${handleInputHeightChange} - ?has-embed=${!!stagedRecordEmbed} - ?disabled=${!messages || isSendingMessage} - ?loading=${isSendingMessage} - > - `} -
-
- ${reactionsDialogMessageId - ? html` state.$reactionsDialogMessageId.set(null)} - @remove-reaction=${async (e) => { - const { emoji } = e.detail; - try { - await dataLayer.mutations.removeMessageReaction( - convoId, - reactionsDialogMessageId, - emoji, - currentUser?.did, - ); - } catch (error) { - console.error(error); - showToast("Failed to remove emoji reaction", { - style: "error", - }); - } - }} - >` - : ""} -
`, - root, - ); - }); - - // Scroll to bottom on initial load, and stay scrolled when - // new messages arrive (if the user is already at the bottom) - let initialLoad = true; - let newestMessageId = null; - pageEffect(root, () => { - const messagesData = - dataLayer.derived.$hydratedConvoMessages.get(convoId); - const currentUser = dataLayer.derived.$currentUser.get(); - const convo = dataLayer.derived.$convos.get(convoId); - if (!messagesData || !currentUser || !convo) { - return; - } - // Messages are stored newest-first - const latestMessageId = messagesData.messages?.[0]?.id ?? null; - if (initialLoad) { - initialLoad = false; - newestMessageId = latestMessageId; + : html``} +
+ ${isLocked + ? html`
+ ${groupDetails.lockStatus === "locked-permanently" + ? "This chat has ended." + : "This chat is locked. New messages can't be sent."} +
` + : html` + ${stagedReply + ? messageReplyPreviewTemplate({ + staged: stagedReply, + senderProfile: stagedReplySenderProfile, + }) + : ""} + ${stagedRecordEmbed + ? stagedEmbedPreviewTemplate({ + staged: stagedRecordEmbed, + }) + : ""} + + handleSendMessage(e.detail.message, e.detail.onSuccess)} + @input-change=${(e) => handleComposerInput(e.detail)} + @height-change=${handleInputHeightChange} + ?has-embed=${!!stagedRecordEmbed} + ?disabled=${!messages || isSendingMessage} + ?loading=${isSendingMessage} + > + `} +
+ + ${reactionsDialogMessageId + ? html` state.$reactionsDialogMessageId.set(null)} + @remove-reaction=${async (e) => { + const { emoji } = e.detail; + try { + await dataLayer.mutations.removeMessageReaction( + convoId, + reactionsDialogMessageId, + emoji, + currentUser?.did, + ); + } catch (error) { + console.error(error); + showToast("Failed to remove emoji reaction", { + style: "error", + }); + } + }} + >` + : ""} +
`, + root, + ); + }); + + // Scroll to bottom on initial load, and stay scrolled when + // new messages arrive (if the user is already at the bottom) + let initialLoad = true; + let newestMessageId = null; + pageEffect(root, () => { + const messagesData = dataLayer.derived.$hydratedConvoMessages.get(convoId); + const currentUser = dataLayer.derived.$currentUser.get(); + const convo = dataLayer.derived.$convos.get(convoId); + if (!messagesData || !currentUser || !convo) { + return; + } + // Messages are stored newest-first + const latestMessageId = messagesData.messages?.[0]?.id ?? null; + if (initialLoad) { + initialLoad = false; + newestMessageId = latestMessageId; + requestAnimationFrame(() => { + pinScrollToBottom(); + // Only enable loading after scroll, otherwise the infinite scroll container will start loading immediately + state.$loadingEnabled.set(true); + }); + return; + } + if (latestMessageId !== newestMessageId) { + newestMessageId = latestMessageId; + if (wasAtBottom) { requestAnimationFrame(() => { - pinScrollToBottom(); - // Only enable loading after scroll, otherwise the infinite scroll container will start loading immediately - state.$loadingEnabled.set(true); + scrollToBottom(); }); - return; - } - if (latestMessageId !== newestMessageId) { - newestMessageId = latestMessageId; - if (wasAtBottom) { - requestAnimationFrame(() => { - scrollToBottom(); - }); - } - } - }); - - // Timestamp of the latest (non-current-user) message - const $latestMessageTimestamp = new Signal.Computed(() => { - const currentUser = dataLayer.derived.$currentUser.get(); - const messagesData = - dataLayer.derived.$hydratedConvoMessages.get(convoId); - const messages = messagesData?.messages ?? null; - if (!messages || !currentUser) { - return null; - } - const otherMessages = messages.filter( - (message) => message.sender?.did !== currentUser.did, - ); - if (!otherMessages.length) { - return null; - } - // Messages are ordered newest -> oldest - return otherMessages[0].sentAt; - }); - - // Clear the staged reply and record embed if the conversation becomes - // locked or disabled (e.g. a lock-status change arrives while the user - // is composing). - pageEffect(root, () => { - if (!state.$stagedReply.get() && !state.$stagedRecordEmbed.get()) return; - const convo = dataLayer.derived.$convos.get(convoId); - const groupDetails = convo ? getGroupConvoDetails(convo) : null; - const isLocked = !!groupDetails && groupDetails.lockStatus !== "unlocked"; - if (isLocked || convo?.status === "disabled") { - state.$stagedReply.set(null); - state.$stagedRecordEmbed.set(null); } + } + }); + + // Timestamp of the latest (non-current-user) message + const $latestMessageTimestamp = new Signal.Computed(() => { + const currentUser = dataLayer.derived.$currentUser.get(); + const messagesData = dataLayer.derived.$hydratedConvoMessages.get(convoId); + const messages = messagesData?.messages ?? null; + if (!messages || !currentUser) { + return null; + } + const otherMessages = messages.filter( + (message) => message.sender?.did !== currentUser.did, + ); + if (!otherMessages.length) { + return null; + } + // Messages are ordered newest -> oldest + return otherMessages[0].sentAt; + }); + + // Clear the staged reply and record embed if the conversation becomes + // locked or disabled (e.g. a lock-status change arrives while the user + // is composing). + pageEffect(root, () => { + if (!state.$stagedReply.get() && !state.$stagedRecordEmbed.get()) return; + const convo = dataLayer.derived.$convos.get(convoId); + const groupDetails = convo ? getGroupConvoDetails(convo) : null; + const isLocked = !!groupDetails && groupDetails.lockStatus !== "unlocked"; + if (isLocked || convo?.status === "disabled") { + state.$stagedReply.set(null); + state.$stagedRecordEmbed.set(null); + } + }); + + // Mark messages as read when new messages are loaded + pageEffect(root, () => { + const latestMessageTimestamp = $latestMessageTimestamp.get(); + if (!latestMessageTimestamp) return; + const convo = dataLayer.derived.$convos.get(convoId); + if (!convo?.unreadCount) return; + dataLayer.mutations.markConvoAsRead(convoId); + chatNotificationService?.markNotificationsAsReadForConvo(convoId, { + isRequest: convo.status === "request", }); + }); - // Mark messages as read when new messages are loaded - pageEffect(root, () => { - const latestMessageTimestamp = $latestMessageTimestamp.get(); - if (!latestMessageTimestamp) return; - const convo = dataLayer.derived.$convos.get(convoId); - if (!convo?.unreadCount) return; - dataLayer.mutations.markConvoAsRead(convoId); - chatNotificationService?.markNotificationsAsReadForConvo(convoId, { - isRequest: convo.status === "request", - }); - }); + root.addEventListener("click", handleRootClick); - root.addEventListener("click", handleRootClick); + // The fetcher runs whenever the page is visible, in both restore directions + root.addEventListener("page-enter", () => { + messageFetcher.start(); + }); - root.addEventListener("page-enter", async () => { - dataLayer.declarative.ensureCurrentUser().then(() => { - messageFetcher.start(); - }); - await dataLayer.declarative.ensureConvo(convoId); - await loadMessages({ reload: true }); - }); + root.addEventListener("page-restore", () => { + messageFetcher.start(); + }); - root.addEventListener("page-restore", async (e) => { - messageFetcher.start(); - const isBack = e.detail?.isBack ?? false; - if (!isBack) { - scrollToBottom(); - await loadMessages({ reload: true }); - } - }); + root.addEventListener("page-exit", () => { + messageFetcher.stop(); + }); - root.addEventListener("page-exit", () => { - messageFetcher.stop(); - }); + async function loadPageData() { + await dataLayer.declarative.ensureConvo(convoId); + await loadMessages({ reload: true }); } -} -export default new ChatDetailView(); + root.addEventListener("page-enter", () => { + scrollToBottom(); + loadPageData(); + }); +} diff --git a/src/js/views/chatRequests.view.js b/src/js/views/chatRequests.view.js index 631c35f5..8b7ff82d 100644 --- a/src/js/views/chatRequests.view.js +++ b/src/js/views/chatRequests.view.js @@ -1,5 +1,4 @@ -import { View } from "/js/views/view.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; @@ -18,253 +17,240 @@ import { showToast } from "/js/toasts.js"; import "/js/components/container-link.js"; import "/js/components/infinite-scroll-container.js"; -class ChatRequestsView extends View { - async render({ root, router, layout, context: { dataLayer } }) { - await auth.requireAuth(); +export default async function chatRequestsView({ + root, + router, + layout, + context: { dataLayer }, +}) { + await auth.requireAuth(); - async function handleAccept(convo) { - try { - await dataLayer.mutations.acceptConvo(convo); - // on accept, navigate to the chat detail page - window.router.go(`/messages/${convo.id}`); - } catch (error) { - console.error(error); - showToast("Failed to accept chat request", { style: "error" }); - } + async function handleAccept(convo) { + try { + await dataLayer.mutations.acceptConvo(convo); + // on accept, navigate to the chat detail page + window.router.go(`/messages/${convo.id}`); + } catch (error) { + console.error(error); + showToast("Failed to accept chat request", { style: "error" }); } + } - async function handleReject(convo) { - try { - await dataLayer.mutations.rejectConvo(convo); - } catch (error) { - console.error(error); - showToast("Failed to reject chat request", { style: "error" }); - } + async function handleReject(convo) { + try { + await dataLayer.mutations.rejectConvo(convo); + } catch (error) { + console.error(error); + showToast("Failed to reject chat request", { style: "error" }); } + } - function requestItemTemplate({ convo }) { - const groupDetails = getGroupConvoDetails(convo); - const currentUser = dataLayer.derived.$currentUser.get(); - const lastMessage = convo.lastMessage; - const otherMembers = convo.members.filter( - (member) => member.did !== currentUser?.did, - ); - const otherMember = groupDetails ? null : otherMembers[0]; - const timeAgo = lastMessage - ? displayRelativeTime(lastMessage.sentAt) - : ""; - const messagePreview = lastMessage - ? getConvoPreviewText(lastMessage, { - currentUser, - convo, - profiles: dataLayer.derived.$convoProfiles.get(convo.id), - }) - : "No messages yet"; - const canAccept = !groupDetails || groupDetails.lockStatus === "unlocked"; + function requestItemTemplate({ convo }) { + const groupDetails = getGroupConvoDetails(convo); + const currentUser = dataLayer.derived.$currentUser.get(); + const lastMessage = convo.lastMessage; + const otherMembers = convo.members.filter( + (member) => member.did !== currentUser?.did, + ); + const otherMember = groupDetails ? null : otherMembers[0]; + const timeAgo = lastMessage ? displayRelativeTime(lastMessage.sentAt) : ""; + const messagePreview = lastMessage + ? getConvoPreviewText(lastMessage, { + currentUser, + convo, + profiles: dataLayer.derived.$convoProfiles.get(convo.id), + }) + : "No messages yet"; + const canAccept = !groupDetails || groupDetails.lockStatus === "unlocked"; - return html` -
+ - -
- ${(() => { - if (groupDetails) { - return avatarGroupTemplate({ authors: otherMembers }); - } - return otherMember - ? avatarTemplate({ author: otherMember }) - : html`
`; - })()} -
-
-
-
- ${groupDetails - ? groupDetails.name - : getDisplayName(otherMember)} -
- ${timeAgo ? html`
${timeAgo}
` : ""} -
-
- ${!groupDetails && - otherMember?.handle && - otherMember?.handle !== MISSING_HANDLE - ? `@${otherMember.handle}` - : ""} +
+ ${(() => { + if (groupDetails) { + return avatarGroupTemplate({ authors: otherMembers }); + } + return otherMember + ? avatarTemplate({ author: otherMember }) + : html`
`; + })()} +
+
+
+
+ ${groupDetails + ? groupDetails.name + : getDisplayName(otherMember)}
-
${messagePreview}
- ${(() => { - if (!groupDetails) { - return html`
- ${knownFollowersSummaryTemplate({ - profile: otherMember, - showPlaceholder: true, - })} -
`; - } - const groupOwner = getGroupConvoOwner(convo); - return groupOwner - ? html`
- ${getDisplayName(groupOwner)} added you -
` - : ""; - })()} + ${timeAgo ? html`
${timeAgo}
` : ""} +
+
+ ${!groupDetails && + otherMember?.handle && + otherMember?.handle !== MISSING_HANDLE + ? `@${otherMember.handle}` + : ""}
- -
- ${canAccept - ? html`` - : ""} - +
${messagePreview}
+ ${(() => { + if (!groupDetails) { + return html`
+ ${knownFollowersSummaryTemplate({ + profile: otherMember, + showPlaceholder: true, + })} +
`; + } + const groupOwner = getGroupConvoOwner(convo); + return groupOwner + ? html`
+ ${getDisplayName(groupOwner)} added you +
` + : ""; + })()}
+ +
+ ${canAccept + ? html`` + : ""} +
- `; - } +
+ `; + } - function requestSkeletonTemplate() { - return html` - ${Array.from({ length: 3 }).map( - () => html` -
-
-
-
-
-
-
-
-
-
-
-
-
+ function requestSkeletonTemplate() { + return html` + ${Array.from({ length: 3 }).map( + () => html` +
+
+
+
-
-
-
+
+
+
+
+
+
+
- `, - )} - `; - } - - function requestsTemplate({ requests, hasMore }) { - if (requests.length === 0) { - return html`
-
No chat requests
-
`; - } - - return html` - { - if (hasMore) { - await dataLayer.requests.loadConvoRequestList(); - e.detail.resume(); - } - }} - > -
- ${requests.map((convo) => requestItemTemplate({ convo }))} - ${hasMore ? requestSkeletonTemplate() : ""} +
+
+
+
- - `; - } + `, + )} + `; + } - function requestsErrorTemplate({ error }) { - console.error(error); - return html`
-
There was an error loading chat requests.
- + function requestsTemplate({ requests, hasMore }) { + if (requests.length === 0) { + return html`
+
No chat requests
`; } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/messages"); - }); + return html` + { + if (hasMore) { + await dataLayer.requests.loadConvoRequestList(); + e.detail.resume(); + } + }} + > +
+ ${requests.map((convo) => requestItemTemplate({ convo }))} + ${hasMore ? requestSkeletonTemplate() : ""} +
+ + `; + } - bindPageTitle(root, () => "Chat request inbox"); + function requestsErrorTemplate({ error }) { + console.error(error); + return html`
+
There was an error loading chat requests.
+ +
`; + } - pageEffect(root, () => { - const chatRequests = dataLayer.derived.$convoRequestList.get(); - const requestsStatus = dataLayer.requests.statusStore.$statuses.get( - "loadConvoRequestList", - ); - const cursor = dataLayer.derived.$convoRequestListCursor.get(); - const hasMore = !!cursor; + bindPageTitle(root, () => "Chat request inbox"); - render( - html`
- ${headerTemplate({ - title: "Chat requests", - showLoadingSpinner: requestsStatus.loading && !!chatRequests, - backButtonFallbackRoute: "/messages", - })} -
- ${(() => { - if (requestsStatus.error) { - return requestsErrorTemplate({ - error: requestsStatus.error, - }); - } else if (chatRequests) { - return requestsTemplate({ - requests: chatRequests, - hasMore, - }); - } else { - return requestSkeletonTemplate(); - } - })()} -
-
`, - root, - ); - }); + pageEffect(root, () => { + const chatRequests = dataLayer.derived.$convoRequestList.get(); + const requestsStatus = dataLayer.requests.statusStore.$statuses.get( + "loadConvoRequestList", + ); + const cursor = dataLayer.derived.$convoRequestListCursor.get(); + const hasMore = !!cursor; - root.addEventListener("page-enter", async () => { - await dataLayer.declarative.ensureConvoRequestList(); - }); + render( + html`
+ ${headerTemplate({ + title: "Chat requests", + showLoadingSpinner: requestsStatus.loading && !!chatRequests, + backButtonFallbackRoute: "/messages", + })} +
+ ${(() => { + if (requestsStatus.error) { + return requestsErrorTemplate({ + error: requestsStatus.error, + }); + } else if (chatRequests) { + return requestsTemplate({ + requests: chatRequests, + hasMore, + }); + } else { + return requestSkeletonTemplate(); + } + })()} +
+
`, + root, + ); + }); - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await dataLayer.requests.loadConvoRequestList({ reload: true }); - }); + function loadPageData() { + dataLayer.requests.loadConvoRequestList({ reload: true }); } -} -export default new ChatRequestsView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/communityPluginListing.view.js b/src/js/views/communityPluginListing.view.js index e167eaa6..1b8620fd 100644 --- a/src/js/views/communityPluginListing.view.js +++ b/src/js/views/communityPluginListing.view.js @@ -1,6 +1,5 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { linkToLogin, getPermalinkForCommunityPlugin } from "/js/navigation.js"; import { showToast } from "/js/toasts.js"; @@ -12,280 +11,265 @@ import "/js/components/rendered-markdown.js"; import "/js/components/context-menu.js"; import "/js/components/context-menu-item.js"; -class CommunityPluginListingView extends View { - async render({ - root, - router, - layout, - params, - context: { pluginService, isAuthenticated }, - }) { - const { pluginId } = params; - const isLocal = pluginId.endsWith("__LOCAL"); +export default async function communityPluginListingView({ + root, + router, + layout, + params, + context: { pluginService, isAuthenticated }, +}) { + const { pluginId } = params; + const isLocal = pluginId.endsWith("__LOCAL"); - const state = new ReactiveStore("communityPluginListingView"); - state.$loadError = new Signal.State(null); - state.$version = new Signal.State(null); - state.$readme = new Signal.State(null); - state.$loading = new Signal.State(true); - state.$pendingAction = new Signal.State(null); // ("install" | "uninstall") + const state = new ReactiveStore("communityPluginListingView"); + state.$loadError = new Signal.State(null); + state.$version = new Signal.State(null); + state.$readme = new Signal.State(null); + state.$loading = new Signal.State(true); + state.$pendingAction = new Signal.State(null); // ("install" | "uninstall") - state.$listing = new Signal.Computed(() => { - const listings = pluginService.$registryListings.get(); - if (!listings) return null; - return listings.find((listing) => listing.id === pluginId) ?? null; - }); + state.$listing = new Signal.Computed(() => { + const listings = pluginService.$registryListings.get(); + if (!listings) return null; + return listings.find((listing) => listing.id === pluginId) ?? null; + }); - async function loadListings() { - state.$loadError.set(null); - try { - await pluginService.loadRegistryListings(); - } catch (error) { - console.error(error); - state.$loadError.set(error.message ?? String(error)); - } + async function loadListings() { + state.$loadError.set(null); + try { + await pluginService.loadRegistryListings(); + } catch (error) { + console.error(error); + state.$loadError.set(error.message ?? String(error)); } + } - async function loadDetails() { - const listing = state.$listing.get(); - if (!listing) { - state.$loading.set(false); - return; - } - const { id, repo } = listing; - await Promise.all([ - pluginService - .getLiveManifest(id, repo) - .then((manifest) => state.$version.set(manifest?.version ?? null)) - .catch((error) => - console.error("Failed to load plugin manifest", error), - ), - pluginService - .getReadme(id, repo) - .then((readme) => state.$readme.set(readme)) - .catch((error) => - console.error("Failed to load plugin README", error), - ), - ]); + async function loadDetails() { + const listing = state.$listing.get(); + if (!listing) { state.$loading.set(false); + return; } + const { id, repo } = listing; + await Promise.all([ + pluginService + .getLiveManifest(id, repo) + .then((manifest) => state.$version.set(manifest?.version ?? null)) + .catch((error) => + console.error("Failed to load plugin manifest", error), + ), + pluginService + .getReadme(id, repo) + .then((readme) => state.$readme.set(readme)) + .catch((error) => console.error("Failed to load plugin README", error)), + ]); + state.$loading.set(false); + } - async function toggleInstall(listing) { - const wasInstalled = listing.installed; + async function toggleInstall(listing) { + const wasInstalled = listing.installed; + if (wasInstalled) { + const confirmed = await confirmModal( + `"${listing.name}" will be uninstalled and its settings will be deleted.`, + { + title: "Uninstall plugin?", + confirmButtonStyle: "danger", + confirmButtonText: "Uninstall", + }, + ); + if (!confirmed) return; + } + state.$pendingAction.set(wasInstalled ? "uninstall" : "install"); + try { if (wasInstalled) { - const confirmed = await confirmModal( - `"${listing.name}" will be uninstalled and its settings will be deleted.`, - { - title: "Uninstall plugin?", - confirmButtonStyle: "danger", - confirmButtonText: "Uninstall", - }, - ); - if (!confirmed) return; + await pluginService.uninstallPlugin(listing.id); + } else { + await pluginService.installPlugin(listing.id); } - state.$pendingAction.set(wasInstalled ? "uninstall" : "install"); - try { - if (wasInstalled) { - await pluginService.uninstallPlugin(listing.id); - } else { - await pluginService.installPlugin(listing.id); - } + showToast( + wasInstalled + ? `Uninstalled ${listing.name}` + : `Installed ${listing.name}`, + { style: wasInstalled ? "default" : "success" }, + ); + } catch (error) { + if (error instanceof PermissionsDeclinedError) { + // User declined the permission prompt; nothing to report. + } else { + console.error(error); showToast( wasInstalled - ? `Uninstalled ${listing.name}` - : `Installed ${listing.name}`, - { style: wasInstalled ? "default" : "success" }, + ? `Failed to uninstall ${listing.name}` + : `Failed to install ${listing.name}`, + { style: "error" }, ); - } catch (error) { - if (error instanceof PermissionsDeclinedError) { - // User declined the permission prompt; nothing to report. - } else { - console.error(error); - showToast( - wasInstalled - ? `Failed to uninstall ${listing.name}` - : `Failed to install ${listing.name}`, - { style: "error" }, - ); - } } - state.$pendingAction.set(null); - } - - function installButtonTemplate({ listing, pendingAction }) { - const installButtonClass = listing.installed - ? "plugin-install-button rounded-button" - : "plugin-install-button rounded-button rounded-button-primary"; - return html``; } + state.$pendingAction.set(null); + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go(isAuthenticated ? "/plugins/installed" : "/plugins/community"); - }); + function installButtonTemplate({ listing, pendingAction }) { + const installButtonClass = listing.installed + ? "plugin-install-button rounded-button" + : "plugin-install-button rounded-button rounded-button-primary"; + return html``; + } - bindPageTitle(root, () => state.$listing.get()?.name ?? null); + bindPageTitle(root, () => state.$listing.get()?.name ?? null); - pageEffect(root, () => { - const listing = state.$listing.get(); - const loadError = state.$loadError.get(); - const version = state.$version.get(); - const readme = state.$readme.get(); - const loading = state.$loading.get(); - const pendingAction = state.$pendingAction.get(); - const pluginPermalink = getPermalinkForCommunityPlugin(pluginId); - render( - html`
- ${headerTemplate({ - title: "Community plugins", - backButtonFallbackRoute: "/plugins/community", - rightItemTemplate: listing - ? () => html` - + + { + navigator.clipboard.writeText(pluginPermalink); + showToast("Link copied to clipboard", { + style: "success", + }); }} > - ... - - - { - navigator.clipboard.writeText(pluginPermalink); - showToast("Link copied to clipboard", { - style: "success", - }); - }} - > - Copy link to plugin - - - ` - : null, - })} -
- ${(() => { - if (loadError) { - return html`
-
Failed to load plugin
- -
`; - } - if (loading) { - return html`
- -
`; - } - if (!listing) { - return html`

+ + ` + : null, + })} +

+ ${(() => { + if (loadError) { + return html`
+
Failed to load plugin
+ +
`; + } + if (loading) { + return html`
+
`; + } + if (!listing) { + return html`

+ Plugin not found. +

`; + } + return html` +
+

-

- ${listing.name} - ${isLocal - ? html`local` - : ""} -

-
- ${version - ? html`
- Version: ${version} -
` - : ""} -
- By ${listing.author} -
- ${listing.repo - ? html`
- Repository: - ${repoWebUrl(listing.repo)} -
` - : ""} -
- ${listing.description - ? html`

- ${listing.description} -

` + ${listing.name} + ${isLocal + ? html`local` + : ""} + +
+ ${version + ? html`
+ Version: ${version} +
` + : ""} +
By ${listing.author}
+ ${listing.repo + ? html`
+ Repository: + ${repoWebUrl(listing.repo)} +
` : ""} -
- ${isAuthenticated - ? installButtonTemplate({ listing, pendingAction }) - : html`Sign in to install`} -
- ${readme - ? html`
- -
` + ${listing.description + ? html`

+ ${listing.description} +

` : ""} - `; - })()} -
-
`, - root, - ); - }); +
+ ${isAuthenticated + ? installButtonTemplate({ listing, pendingAction }) + : html`Sign in to install`} +
+
+ ${readme + ? html`
+ +
` + : ""} + `; + })()} + +
`, + root, + ); + }); - root.addEventListener("page-enter", async () => { - await loadListings(); - await loadDetails(); - }); - } + root.addEventListener("page-enter", async () => { + await loadListings(); + await loadDetails(); + }); } - -export default new CommunityPluginListingView(); diff --git a/src/js/views/communityPlugins.view.js b/src/js/views/communityPlugins.view.js index 239d9dd3..e737ebc7 100644 --- a/src/js/views/communityPlugins.view.js +++ b/src/js/views/communityPlugins.view.js @@ -1,160 +1,143 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { chevronRightIconTemplate } from "/js/templates/icons/chevronRight.template.js"; import { globeIconTemplate } from "/js/templates/icons/globeIcon.template.js"; import { Signal, ReactiveStore } from "/js/signals.js"; import { linkToCommunityPlugin, linkToLogin } from "/js/navigation.js"; -class CommunityPluginsView extends View { - async render({ - root, - router, - layout, - context: { pluginService, isAuthenticated }, - }) { - const state = new ReactiveStore("communityPluginsView"); - state.$error = new Signal.State(null); +export default async function communityPluginsView({ + root, + router, + layout, + context: { pluginService, isAuthenticated }, +}) { + const state = new ReactiveStore("communityPluginsView"); + state.$error = new Signal.State(null); - async function loadListings() { - state.$error.set(null); - try { - await pluginService.loadRegistryListings(); - } catch (error) { - console.error(error); - state.$error.set(error.message ?? String(error)); - } + async function loadListings() { + state.$error.set(null); + try { + await pluginService.loadRegistryListings(); + } catch (error) { + console.error(error); + state.$error.set(error.message ?? String(error)); } + } - bindToPage(root, layout, "active-nav-click", (event) => { - // Logged out, this page is itself the root of the Plugins nav item, so - // let the layout's default scroll-to-top happen. - if (!isAuthenticated) return; - event.preventDefault(); - router.go("/plugins/installed"); - }); - - bindPageTitle(root, () => "Community plugins"); + bindPageTitle(root, () => "Community plugins"); - pageEffect(root, () => { - const error = state.$error.get(); - const listings = pluginService.$registryListings.get(); - render( - html`
- ${headerTemplate({ - title: "Community plugins", - })} -
- ${!isAuthenticated + pageEffect(root, () => { + const error = state.$error.get(); + const listings = pluginService.$registryListings.get(); + render( + html`
+ ${headerTemplate({ + title: "Community plugins", + })} +
+ ${!isAuthenticated + ? html`
+
+ ${globeIconTemplate()} +
+ Extend IMPRO with plugins +
+
+

+ Community plugins are built by other people using IMPRO. They + can add new themes, display options, and functionality to the + app. +

+ Sign in to install +
` + : ""} + ${error + ? html`
+
Failed to load plugins
+ +
` + : !listings ? html`
-
- ${globeIconTemplate()} -
- Extend IMPRO with plugins -
-
-

- Community plugins are built by other people using IMPRO. - They can add new themes, display options, and functionality - to the app. -

- Sign in to install +
` - : ""} - ${error - ? html`
-
Failed to load plugins
- -
` - : !listings - ? html`
- + : listings.length === 0 + ? html`
+
+ No community plugins to show +
+

+ The registry is empty right now. +

` - : listings.length === 0 - ? html`
-
- No community plugins to show -
-

- The registry is empty right now. -

-
` - : html`
-
`, - root, - ); - }); - - root.addEventListener("page-enter", async () => { - await loadListings(); - }); + ${listing.description + ? html`
+ ${listing.description} +
` + : ""} +
+ By ${listing.author} +
+
+ ${chevronRightIconTemplate()} + + + `; + })} + `} + +
`, + root, + ); + }); - root.addEventListener("page-restore", () => { - loadListings(); - }); + function loadPageData() { + loadListings(); } -} -export default new CommunityPluginsView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/feedDetail.view.js b/src/js/views/feedDetail.view.js index 5cd446e8..47e7ff99 100644 --- a/src/js/views/feedDetail.view.js +++ b/src/js/views/feedDetail.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { classnames } from "/js/utils.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; @@ -13,142 +12,133 @@ import "/js/components/context-menu.js"; import "/js/components/context-menu-item.js"; import "/js/components/context-menu-item-group.js"; -class FeedDetailView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - await auth.requireAuth(); +export default async function feedDetailView({ + root, + params, + context: { + dataLayer, + identityResolver, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + await auth.requireAuth(); - const { handleOrDid, rkey } = params; + const { handleOrDid, rkey } = params; - let profileDid = null; - if (handleOrDid.startsWith("did:")) { - profileDid = handleOrDid; - } else { - profileDid = await identityResolver.resolveHandle(handleOrDid); - } - const feedUri = `at://${profileDid}/app.bsky.feed.generator/${rkey}`; - - const { postInteractionHandler, feedInteractionHandler } = - interactionHandlers; + let profileDid = null; + if (handleOrDid.startsWith("did:")) { + profileDid = handleOrDid; + } else { + profileDid = await identityResolver.resolveHandle(handleOrDid); + } + const feedUri = `at://${profileDid}/app.bsky.feed.generator/${rkey}`; - bindPageTitle(root, () => { - return ( - dataLayer.derived.$feedGenerators.get(feedUri)?.displayName ?? null - ); - }); + const { postInteractionHandler, feedInteractionHandler } = + interactionHandlers; - pageEffect(root, () => { - const showLessInteractions = - dataLayer.derived.$showLessInteractions.get(feedUri); - const hiddenPostUris = showLessInteractions.map( - (interaction) => interaction.item, - ); - const currentUser = dataLayer.derived.$currentUser.get(); - const feedGenerator = dataLayer.derived.$feedGenerators.get(feedUri); - const feedName = feedGenerator?.displayName || ""; - const feedAuthor = feedGenerator?.creator; - const feedAuthorHandle = feedAuthor?.handle; - const preferences = dataLayer.derived.$preferences.get(); - const isPinned = preferences?.isFeedPinned(feedUri) ?? false; - const feed = dataLayer.derived.$hydratedFeeds.get(feedUri); - render( - html`
- ${headerTemplate({ - title: feedName, - subtitle: feedAuthorHandle ? `@${feedAuthorHandle}` : "", - rightItemTemplate: () => { - const feedLink = `https://bsky.app/profile/${feedAuthorHandle || handleOrDid}/feed/${rkey}`; - return html` - - - { - window.open(feedLink, "_blank"); - }} - > - Open in bsky.app - - { - navigator.clipboard.writeText(feedLink); - showToast("Link copied to clipboard", { - style: "success", - }); - }} - > - Copy link to feed - - - - `; - }, - })} -
-
- ${postFeedTemplate({ - feed, - currentUser, - isAuthenticated, - feedGenerator, - hiddenPostUris, - onLoadMore: () => loadFeed(), - postInteractionHandler, - pluginService, - showEndMessage: true, - })} -
-
-
`, - root, - ); - }); + bindPageTitle(root, () => { + return dataLayer.derived.$feedGenerators.get(feedUri)?.displayName ?? null; + }); - async function loadFeed({ reload = false } = {}) { - await dataLayer.requests.loadNextFeedPage( - { type: "feed", uri: feedUri }, - { reload, limit: FEED_PAGE_SIZE + 1 }, - ); - } + pageEffect(root, () => { + const showLessInteractions = + dataLayer.derived.$showLessInteractions.get(feedUri); + const hiddenPostUris = showLessInteractions.map( + (interaction) => interaction.item, + ); + const currentUser = dataLayer.derived.$currentUser.get(); + const feedGenerator = dataLayer.derived.$feedGenerators.get(feedUri); + const feedName = feedGenerator?.displayName || ""; + const feedAuthor = feedGenerator?.creator; + const feedAuthorHandle = feedAuthor?.handle; + const preferences = dataLayer.derived.$preferences.get(); + const isPinned = preferences?.isFeedPinned(feedUri) ?? false; + const feed = dataLayer.derived.$hydratedFeeds.get(feedUri); + render( + html`
+ ${headerTemplate({ + title: feedName, + subtitle: feedAuthorHandle ? `@${feedAuthorHandle}` : "", + rightItemTemplate: () => { + const feedLink = `https://bsky.app/profile/${feedAuthorHandle || handleOrDid}/feed/${rkey}`; + return html` + + + { + window.open(feedLink, "_blank"); + }} + > + Open in bsky.app + + { + navigator.clipboard.writeText(feedLink); + showToast("Link copied to clipboard", { + style: "success", + }); + }} + > + Copy link to feed + + + + `; + }, + })} +
+
+ ${postFeedTemplate({ + feed, + currentUser, + isAuthenticated, + feedGenerator, + hiddenPostUris, + onLoadMore: () => loadFeed(), + postInteractionHandler, + pluginService, + showEndMessage: true, + })} +
+
+
`, + root, + ); + }); - root.addEventListener("page-enter", async () => { - dataLayer.declarative.ensureFeedGenerator(feedUri); - await loadFeed(); - }); + async function loadFeed({ reload = false } = {}) { + await dataLayer.requests.loadNextFeedPage( + { type: "feed", uri: feedUri }, + { reload, limit: FEED_PAGE_SIZE + 1 }, + ); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await loadFeed({ reload: true }); - }); + async function loadPageData() { + dataLayer.requests.loadFeedGenerator(feedUri); + await loadFeed({ reload: true }); } -} -export default new FeedDetailView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/feeds.view.js b/src/js/views/feeds.view.js index 460b46a6..8515bf18 100644 --- a/src/js/views/feeds.view.js +++ b/src/js/views/feeds.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; @@ -16,297 +15,289 @@ import { showToast } from "/js/toasts.js"; import { valueForPinnedItem } from "/js/dataHelpers.js"; import "/js/components/container-link.js"; -class FeedsView extends View { - async render({ root, context: { dataLayer } }) { - await auth.requireAuth(); +export default async function feedsView({ root, context: { dataLayer } }) { + await auth.requireAuth(); - const state = new ReactiveStore("feedsView"); - state.$draftOrder = new SignalArray(); - state.$draftUnpinned = new SignalSet(); - state.$isEditing = new Signal.State(false); - state.$isSaving = new Signal.State(false); + const state = new ReactiveStore("feedsView"); + state.$draftOrder = new SignalArray(); + state.$draftUnpinned = new SignalSet(); + state.$isEditing = new Signal.State(false); + state.$isSaving = new Signal.State(false); - function orderMatches(orderA, orderB) { - if (orderA.length !== orderB.length) return false; - for (let i = 0; i < orderA.length; i++) { - if (orderA[i] !== orderB[i]) return false; - } - return true; + function orderMatches(orderA, orderB) { + if (orderA.length !== orderB.length) return false; + for (let i = 0; i < orderA.length; i++) { + if (orderA[i] !== orderB[i]) return false; } + return true; + } - async function handleSave() { - if (state.$isSaving.get()) return; - const draftOrder = state.$draftOrder; - const draftUnpinned = state.$draftUnpinned; - if (draftOrder.length > 0 || draftUnpinned.size > 0) { - const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get(); - if (!pinnedItems) return; - const baseOrder = - draftOrder.length > 0 - ? [...draftOrder] - : pinnedItems.map(valueForPinnedItem); - const nextValues = - draftUnpinned.size > 0 - ? baseOrder.filter((value) => !draftUnpinned.has(value)) - : baseOrder; - state.$isSaving.set(true); - try { - await dataLayer.mutations.setPinnedItems(nextValues); - showToast("Feeds updated!"); - } catch { - showToast("Couldn't save changes"); - return; - } finally { - state.$isSaving.set(false); - } + async function handleSave() { + if (state.$isSaving.get()) return; + const draftOrder = state.$draftOrder; + const draftUnpinned = state.$draftUnpinned; + if (draftOrder.length > 0 || draftUnpinned.size > 0) { + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get(); + if (!pinnedItems) return; + const baseOrder = + draftOrder.length > 0 + ? [...draftOrder] + : pinnedItems.map(valueForPinnedItem); + const nextValues = + draftUnpinned.size > 0 + ? baseOrder.filter((value) => !draftUnpinned.has(value)) + : baseOrder; + state.$isSaving.set(true); + try { + await dataLayer.mutations.setPinnedItems(nextValues); + showToast("Feeds updated!"); + } catch { + showToast("Couldn't save changes"); + return; + } finally { + state.$isSaving.set(false); } - state.$draftOrder.clear(); - state.$draftUnpinned.clear(); - state.$isEditing.set(false); } + state.$draftOrder.clear(); + state.$draftUnpinned.clear(); + state.$isEditing.set(false); + } - function cancelEditing() { - if (state.$isSaving.get()) return; - state.$draftOrder.clear(); - state.$draftUnpinned.clear(); - state.$isEditing.set(false); - } + function cancelEditing() { + if (state.$isSaving.get()) return; + state.$draftOrder.clear(); + state.$draftUnpinned.clear(); + state.$isEditing.set(false); + } - function editControlsTemplate({ value, isSaving, showUnpin }) { - return html`${showUnpin - ? html`` - : ""} - `; - } + function editControlsTemplate({ value, isSaving, showUnpin }) { + return html`${showUnpin + ? html`` + : ""} + `; + } - function rowTemplate({ item, currentUser, rightItem }) { - const value = valueForPinnedItem(item); - if (item.type === "timeline") { - return html`
-
- ${homeIconTemplate({ filled: true })} -
-
-
Following
-
Feed by @bsky.app
-
- ${rightItem} -
`; - } - if (item.type === "list") { - return html` -
- ${item.data.name} -
-
-
${item.data.name}
- ${item.data.creator - ? html`
- List by - ${item.data.creator.did === currentUser?.did - ? "you" - : `@${item.data.creator.handle}`} -
` - : ""} -
- ${rightItem} - `; - } - const feedGenerator = item.data; + function rowTemplate({ item, currentUser, rightItem }) { + const value = valueForPinnedItem(item); + if (item.type === "timeline") { + return html`
+
+ ${homeIconTemplate({ filled: true })} +
+
+
Following
+
Feed by @bsky.app
+
+ ${rightItem} +
`; + } + if (item.type === "list") { return html`
${feedGenerator.displayName}
-
${feedGenerator.displayName}
- ${feedGenerator.creator +
${item.data.name}
+ ${item.data.creator ? html`
- Feed by - ${feedGenerator.creator.did === currentUser?.did + List by + ${item.data.creator.did === currentUser?.did ? "you" - : `@${feedGenerator.creator.handle}`} + : `@${item.data.creator.handle}`}
` : ""}
${rightItem} `; } + const feedGenerator = item.data; + return html` +
+ ${feedGenerator.displayName} +
+
+
${feedGenerator.displayName}
+ ${feedGenerator.creator + ? html`
+ Feed by + ${feedGenerator.creator.did === currentUser?.did + ? "you" + : `@${feedGenerator.creator.handle}`} +
` + : ""} +
+ ${rightItem} + `; + } - bindPageTitle(root, () => "Feeds"); + bindPageTitle(root, () => "Feeds"); - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get(); - const draftOrder = state.$draftOrder; - const draftUnpinned = state.$draftUnpinned; - const isEditing = state.$isEditing.get(); - const isSaving = state.$isSaving.get(); + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get(); + const draftOrder = state.$draftOrder; + const draftUnpinned = state.$draftUnpinned; + const isEditing = state.$isEditing.get(); + const isSaving = state.$isSaving.get(); - let orderedItems = pinnedItems; - let persistedOrder = null; - if (pinnedItems) { - persistedOrder = pinnedItems.map(valueForPinnedItem); - if (draftOrder.length > 0) { - const byValue = new Map( - pinnedItems.map((it) => [valueForPinnedItem(it), it]), - ); - orderedItems = draftOrder - .map((value) => byValue.get(value)) - .filter(Boolean); - } - if (draftUnpinned.size > 0) { - orderedItems = orderedItems.filter( - (it) => !draftUnpinned.has(valueForPinnedItem(it)), - ); - } + let orderedItems = pinnedItems; + let persistedOrder = null; + if (pinnedItems) { + persistedOrder = pinnedItems.map(valueForPinnedItem); + if (draftOrder.length > 0) { + const byValue = new Map( + pinnedItems.map((it) => [valueForPinnedItem(it), it]), + ); + orderedItems = draftOrder + .map((value) => byValue.get(value)) + .filter(Boolean); } + if (draftUnpinned.size > 0) { + orderedItems = orderedItems.filter( + (it) => !draftUnpinned.has(valueForPinnedItem(it)), + ); + } + } - const canEdit = (pinnedItems?.length ?? 0) >= 2; - const showUnpin = (orderedItems?.length ?? 0) >= 2; + const canEdit = (pinnedItems?.length ?? 0) >= 2; + const showUnpin = (orderedItems?.length ?? 0) >= 2; - render( - html`
- ${headerTemplate({ - title: "Feeds", - subtitle: "", - rightItemTemplate: () => { - if (isEditing) { - return html`
- - -
`; - } - return html``; - }, - })} -
-
Pinned Feeds
- ${feedsFeedTemplate({ - items: orderedItems, - renderItem: (item) => { - const value = valueForPinnedItem(item); - const rightItem = isEditing - ? editControlsTemplate({ value, isSaving, showUnpin }) - : item.type === "timeline" - ? "" - : html`
- ${chevronRightIconTemplate()} -
`; - return rowTemplate({ item, currentUser, rightItem }); - }, - isEditing, - })} -
-
`, - root, - ); - - const listEl = root.querySelector(".feeds-list"); - if (listEl && orderedItems && isEditing && !isSaving) { - enableReorder(listEl, { - itemSelector: ".feeds-list-item", - handleSelector: ".feeds-list-item-drag-handle", - onReorder: (elements) => { - const nextOrder = elements.map((el) => el.dataset.pinnedValue); - const baseline = persistedOrder ?? []; - if (orderMatches(nextOrder, baseline)) { - state.$draftOrder.clear(); - } else { - state.$draftOrder.replace(nextOrder); + render( + html`
+ ${headerTemplate({ + title: "Feeds", + subtitle: "", + rightItemTemplate: () => { + if (isEditing) { + return html`
+ + +
`; } + return html``; }, - }); - } else if (listEl?.__reorderEnabled) { - listEl.__reorderEnabled.cleanup(); - } - }); + })} +
+
Pinned Feeds
+ ${feedsFeedTemplate({ + items: orderedItems, + renderItem: (item) => { + const value = valueForPinnedItem(item); + const rightItem = isEditing + ? editControlsTemplate({ value, isSaving, showUnpin }) + : item.type === "timeline" + ? "" + : html`
+ ${chevronRightIconTemplate()} +
`; + return rowTemplate({ item, currentUser, rightItem }); + }, + isEditing, + })} +
+
`, + root, + ); - function resetEditingState() { - state.$draftOrder.clear(); - state.$draftUnpinned.clear(); - state.$isEditing.set(false); + const listEl = root.querySelector(".feeds-list"); + if (listEl && orderedItems && isEditing && !isSaving) { + enableReorder(listEl, { + itemSelector: ".feeds-list-item", + handleSelector: ".feeds-list-item-drag-handle", + onReorder: (elements) => { + const nextOrder = elements.map((el) => el.dataset.pinnedValue); + const baseline = persistedOrder ?? []; + if (orderMatches(nextOrder, baseline)) { + state.$draftOrder.clear(); + } else { + state.$draftOrder.replace(nextOrder); + } + }, + }); + } else if (listEl?.__reorderEnabled) { + listEl.__reorderEnabled.cleanup(); } + }); - root.addEventListener("page-enter", async () => { - resetEditingState(); - await dataLayer.declarative.ensurePinnedItems(); - }); + function resetEditingState() { + state.$draftOrder.clear(); + state.$draftUnpinned.clear(); + state.$isEditing.set(false); + } - root.addEventListener("page-exit", () => { - resetEditingState(); - }); + // Reset whenever the page changes visibility, unlike the data load below + root.addEventListener("page-enter", resetEditingState); + root.addEventListener("page-restore", resetEditingState); + root.addEventListener("page-exit", resetEditingState); - root.addEventListener("page-restore", async (e) => { - resetEditingState(); - if (e.detail?.isBack) return; - await dataLayer.requests.loadPinnedItems(); - }); + function loadPageData() { + dataLayer.requests.loadPinnedItems(); } -} -export default new FeedsView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/groupChatDetails.view.js b/src/js/views/groupChatDetails.view.js index adec59be..21862b5e 100644 --- a/src/js/views/groupChatDetails.view.js +++ b/src/js/views/groupChatDetails.view.js @@ -1,7 +1,6 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { View } from "/js/views/view.js"; -import { pageEffect, bindPageTitle, bindToPage } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; @@ -178,172 +177,154 @@ function notGroupConvoTemplate() {
`; } -class GroupChatDetailsView extends View { - async render({ - root, - params, - router, - layout, - context: { dataLayer, isAuthenticated, pluginService }, - }) { - await auth.requireAuth(); +export default async function groupChatDetailsView({ + root, + params, + router, + layout, + context: { dataLayer, isAuthenticated, pluginService }, +}) { + await auth.requireAuth(); - const convoId = params.convoId; - const $isMuteSaving = new Signal.State(false); + const convoId = params.convoId; + const $isMuteSaving = new Signal.State(false); - const $requestError = new Signal.Computed(() => { - return ( - dataLayer.requests.statusStore.$errors.get("loadConvo-" + convoId) ?? - dataLayer.requests.statusStore.$errors.get( - "loadConvoMembers-" + convoId, - ) ?? - null - ); - }); + const $requestError = new Signal.Computed(() => { + return ( + dataLayer.requests.statusStore.$errors.get("loadConvo-" + convoId) ?? + dataLayer.requests.statusStore.$errors.get( + "loadConvoMembers-" + convoId, + ) ?? + null + ); + }); - async function loadMoreMembers() { - await dataLayer.requests.loadConvoMembers(convoId); - } + async function loadMoreMembers() { + await dataLayer.requests.loadConvoMembers(convoId); + } - async function handleToggleMute(convo, muted) { - $isMuteSaving.set(true); - try { - await dataLayer.mutations.setConvoMuted(convo, muted); - showToast(muted ? "Group chat muted" : "Group chat unmuted"); - } catch (err) { - console.error(err); - showToast("Failed to mute group chat", { style: "error" }); - } finally { - $isMuteSaving.set(false); - } + async function handleToggleMute(convo, muted) { + $isMuteSaving.set(true); + try { + await dataLayer.mutations.setConvoMuted(convo, muted); + showToast(muted ? "Group chat muted" : "Group chat unmuted"); + } catch (err) { + console.error(err); + showToast("Failed to mute group chat", { style: "error" }); + } finally { + $isMuteSaving.set(false); } + } - async function handleLeave(convo, groupDetails) { - const groupName = groupDetails?.name ?? "this group chat"; - const didLeave = await confirmModal( - `Are you sure you want to leave "${groupName}"? You won't be able to rejoin unless you're invited.`, - { - title: "Leave group chat", - confirmButtonText: "Leave group chat", - confirmButtonStyle: "danger", - pendingText: "Leaving", - onConfirm: async () => { - try { - await dataLayer.mutations.leaveConvo(convo); - } catch (err) { - if (err instanceof ApiError) { - if (err.data?.error === "OwnerCannotLeave") { - showToast("Owner must lock the group before leaving.", { - style: "error", - }); - throw err; - } - if (err.data?.error === "InvalidConvo") { - showToast("Conversation not found.", { style: "error" }); - throw err; - } + async function handleLeave(convo, groupDetails) { + const groupName = groupDetails?.name ?? "this group chat"; + const didLeave = await confirmModal( + `Are you sure you want to leave "${groupName}"? You won't be able to rejoin unless you're invited.`, + { + title: "Leave group chat", + confirmButtonText: "Leave group chat", + confirmButtonStyle: "danger", + pendingText: "Leaving", + onConfirm: async () => { + try { + await dataLayer.mutations.leaveConvo(convo); + } catch (err) { + if (err instanceof ApiError) { + if (err.data?.error === "OwnerCannotLeave") { + showToast("Owner must lock the group before leaving.", { + style: "error", + }); + throw err; + } + if (err.data?.error === "InvalidConvo") { + showToast("Conversation not found.", { style: "error" }); + throw err; } - console.error(err); - showToast("Could not leave chat", { style: "error" }); - throw err; } - }, + console.error(err); + showToast("Could not leave chat", { style: "error" }); + throw err; + } }, - ); - if (didLeave) { - router.go("/messages"); - showToast("Left group chat"); - } - } - - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); + }, + ); + if (didLeave) { router.go("/messages"); - }); - - bindPageTitle(root, () => "Group chat settings"); - - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const convo = dataLayer.derived.$convos.get(convoId); - const memberFeed = dataLayer.derived.$groupConvoMemberList.get(convoId); - const requestError = $requestError.get(); - const groupDetails = convo ? getGroupConvoDetails(convo) : null; - const ownerDid = convo ? getGroupConvoOwner(convo)?.did : null; - const members = memberFeed - ? sortMembers({ - members: memberFeed.members, - ownerDid, - currentUserDid: currentUser?.did ?? null, - }) - : null; - const hasMore = !!memberFeed?.cursor; - const isMuteSaving = $isMuteSaving.get(); + showToast("Left group chat"); + } + } - render( - html`
- ${headerTemplate({ - title: "Group chat settings", - backButtonFallbackRoute: `/messages/${encodeURIComponent(convoId)}`, - })} -
- ${(() => { - if (convo && !groupDetails) { - return notGroupConvoTemplate(); - } - if (requestError && (!convo || !memberFeed)) { - return detailsErrorTemplate({ error: requestError }); - } - return html`${convo - ? groupHeaderCardTemplate({ - convo, - groupDetails, - currentUserDid: currentUser?.did ?? null, - isMuteSaving, - onToggleMute: (muted) => handleToggleMute(convo, muted), - onLeave: (details) => handleLeave(convo, details), - }) - : groupHeaderCardSkeletonTemplate()} - ${membersHeadingTemplate({ groupDetails })} - ${profileFeedTemplate({ - profiles: members, - hasMore, - onLoadMore: loadMoreMembers, - isAuthenticated, - pluginService, - compact: true, - rightItemTemplate: (actor) => - memberTrailingTemplate({ member: actor, ownerDid }), - })}`; - })()} -
-
`, - root, - ); - }); + bindPageTitle(root, () => "Group chat settings"); - function loadConvoDetails({ reload = false } = {}) { - return Promise.all([ - dataLayer.requests.loadConvo(convoId).catch((error) => { - console.error("Failed to load convo", error); - }), - dataLayer.requests - .loadConvoMembers(convoId, { reload }) - .catch((error) => { - console.error("Failed to load convo members", error); - }), - ]); - } + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const convo = dataLayer.derived.$convos.get(convoId); + const memberFeed = dataLayer.derived.$groupConvoMemberList.get(convoId); + const requestError = $requestError.get(); + const groupDetails = convo ? getGroupConvoDetails(convo) : null; + const ownerDid = convo ? getGroupConvoOwner(convo)?.did : null; + const members = memberFeed + ? sortMembers({ + members: memberFeed.members, + ownerDid, + currentUserDid: currentUser?.did ?? null, + }) + : null; + const hasMore = !!memberFeed?.cursor; + const isMuteSaving = $isMuteSaving.get(); - root.addEventListener("page-enter", () => { - loadConvoDetails({ reload: true }); - }); + render( + html`
+ ${headerTemplate({ + title: "Group chat settings", + backButtonFallbackRoute: `/messages/${encodeURIComponent(convoId)}`, + })} +
+ ${(() => { + if (convo && !groupDetails) { + return notGroupConvoTemplate(); + } + if (requestError && (!convo || !memberFeed)) { + return detailsErrorTemplate({ error: requestError }); + } + return html`${convo + ? groupHeaderCardTemplate({ + convo, + groupDetails, + currentUserDid: currentUser?.did ?? null, + isMuteSaving, + onToggleMute: (muted) => handleToggleMute(convo, muted), + onLeave: (details) => handleLeave(convo, details), + }) + : groupHeaderCardSkeletonTemplate()} + ${membersHeadingTemplate({ groupDetails })} + ${profileFeedTemplate({ + profiles: members, + hasMore, + onLoadMore: loadMoreMembers, + isAuthenticated, + pluginService, + compact: true, + rightItemTemplate: (actor) => + memberTrailingTemplate({ member: actor, ownerDid }), + })}`; + })()} +
+
`, + root, + ); + }); - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await loadConvoDetails({ reload: true }); + function loadPageData() { + dataLayer.requests.loadConvo(convoId).catch((error) => { + console.error("Failed to load convo", error); }); + dataLayer.requests + .loadConvoMembers(convoId, { reload: true }) + .catch((error) => { + console.error("Failed to load convo members", error); + }); } -} -export default new GroupChatDetailsView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/hashtag.view.js b/src/js/views/hashtag.view.js index 20ddada4..7668f3a5 100644 --- a/src/js/views/hashtag.view.js +++ b/src/js/views/hashtag.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; import { headerTemplate } from "/js/templates/header.template.js"; @@ -8,118 +7,116 @@ import { HASHTAG_FEED_PAGE_SIZE } from "/js/config.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { Signal, ReactiveStore } from "/js/signals.js"; -class HashtagView extends View { - async render({ - root, - params, - context: { dataLayer, isAuthenticated, pluginService, interactionHandlers }, - }) { - await auth.requireAuth(); +export default async function hashtagView({ + root, + params, + context: { dataLayer, isAuthenticated, pluginService, interactionHandlers }, +}) { + await auth.requireAuth(); - const hashtag = params.tag; + const hashtag = params.tag; - const sortOptions = [ - { value: "top", label: "Top" }, - { value: "latest", label: "Latest" }, - ]; + const sortOptions = [ + { value: "top", label: "Top" }, + { value: "latest", label: "Latest" }, + ]; - const state = new ReactiveStore("hashtagView"); - state.$currentSort = new Signal.State("top"); + const state = new ReactiveStore("hashtagView"); + state.$currentSort = new Signal.State("top"); - const { postInteractionHandler } = interactionHandlers; + const { postInteractionHandler } = interactionHandlers; - const feedScrollState = new Map(); + const feedScrollState = new Map(); - async function scrollAndReloadFeed() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadCurrentFeed({ reload: true }); + async function scrollAndReloadFeed() { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } + await loadCurrentFeed({ reload: true }); + } - async function handleTabClick(sortValue) { - const currentSort = state.$currentSort.get(); - if (sortValue === currentSort) { - scrollAndReloadFeed(); - return; - } - // Save scroll state - feedScrollState.set(currentSort, window.scrollY); - // Switch sort - state.$currentSort.set(sortValue); - // Scroll to saved scroll state - if (feedScrollState.has(sortValue)) { - window.scrollTo(0, feedScrollState.get(sortValue)); - } else { - window.scrollTo(0, 0); - } - // Load feed if not cached - const hashtagKey = `${hashtag}-${sortValue}`; - const feed = dataLayer.derived.$hydratedHashtagFeeds.get(hashtagKey); - if (!feed) { - await loadCurrentFeed(); - } + async function handleTabClick(sortValue) { + const currentSort = state.$currentSort.get(); + if (sortValue === currentSort) { + scrollAndReloadFeed(); + return; + } + // Save scroll state + feedScrollState.set(currentSort, window.scrollY); + // Switch sort + state.$currentSort.set(sortValue); + // Scroll to saved scroll state + if (feedScrollState.has(sortValue)) { + window.scrollTo(0, feedScrollState.get(sortValue)); + } else { + window.scrollTo(0, 0); } + // Load feed if not cached + const hashtagKey = `${hashtag}-${sortValue}`; + const feed = dataLayer.derived.$hydratedHashtagFeeds.get(hashtagKey); + if (!feed) { + await loadCurrentFeed(); + } + } - bindPageTitle(root, () => `#${hashtag}`); + bindPageTitle(root, () => `#${hashtag}`); - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const currentSort = state.$currentSort.get(); - render( - html`
-
- ${headerTemplate({ - title: `#${hashtag}`, - bottomItemTemplate: () => html` - handleTabClick(event.detail)} - > - `, - })} - ${sortOptions.map((sort) => { - const feed = dataLayer.derived.$hydratedHashtagFeeds.get( - `${hashtag}-${sort.value}`, - ); - return html`
- ${postFeedTemplate({ - feed, - currentUser, - isAuthenticated, - postInteractionHandler, - enableFeedFeedback: false, - onLoadMore: () => loadCurrentFeed(), - pluginService, - })} -
`; - })} -
-
`, - root, - ); - }); + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const currentSort = state.$currentSort.get(); + render( + html`
+
+ ${headerTemplate({ + title: `#${hashtag}`, + bottomItemTemplate: () => html` + handleTabClick(event.detail)} + > + `, + })} + ${sortOptions.map((sort) => { + const feed = dataLayer.derived.$hydratedHashtagFeeds.get( + `${hashtag}-${sort.value}`, + ); + return html`
+ ${postFeedTemplate({ + feed, + currentUser, + isAuthenticated, + postInteractionHandler, + enableFeedFeedback: false, + onLoadMore: () => loadCurrentFeed(), + pluginService, + })} +
`; + })} +
+
`, + root, + ); + }); - async function loadCurrentFeed({ reload = false } = {}) { - await dataLayer.requests.loadHashtagFeed( - hashtag, - state.$currentSort.get(), - { - reload, - limit: HASHTAG_FEED_PAGE_SIZE, - }, - ); - } + async function loadCurrentFeed({ reload = false } = {}) { + await dataLayer.requests.loadHashtagFeed( + hashtag, + state.$currentSort.get(), + { + reload, + limit: HASHTAG_FEED_PAGE_SIZE, + }, + ); + } - root.addEventListener("page-enter", async () => { - await loadCurrentFeed(); - }); + function loadPageData() { + loadCurrentFeed({ reload: true }); } -} -export default new HashtagView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js index 37719290..d3f633e3 100644 --- a/src/js/views/home.view.js +++ b/src/js/views/home.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { linkToProfile } from "/js/navigation.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; @@ -25,411 +24,407 @@ const requestIdle = const cancelIdle = window.cancelIdleCallback?.bind(window) ?? ((handle) => clearTimeout(handle)); -class HomeView extends View { - async render({ - root, - layout, - context: { - dataLayer, - api, - postComposerService, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - const CURRENT_FEED_URI_STORAGE_KEY = "home-view-currentFeedUri"; - const WELCOME_MODAL_SEEN_STORAGE_KEY = "welcome-modal-seen"; - - const storedFeedUri = isAuthenticated - ? localStorage.getItem(CURRENT_FEED_URI_STORAGE_KEY) - : null; - - const state = new ReactiveStore("homeView"); - state.$currentFeedUri = new Signal.State( - storedFeedUri ? JSON.parse(storedFeedUri) : null, +export default async function homeView({ + root, + layout, + context: { + dataLayer, + api, + postComposerService, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + const CURRENT_FEED_URI_STORAGE_KEY = "home-view-currentFeedUri"; + const WELCOME_MODAL_SEEN_STORAGE_KEY = "welcome-modal-seen"; + + const storedFeedUri = isAuthenticated + ? localStorage.getItem(CURRENT_FEED_URI_STORAGE_KEY) + : null; + + const state = new ReactiveStore("homeView"); + state.$currentFeedUri = new Signal.State( + storedFeedUri ? JSON.parse(storedFeedUri) : null, + ); + state.$isReloadingFeed = new Signal.State(false); + state.$materializedFeedUris = new SignalSet(); + + function resetToDefaultFeed() { + state.$currentFeedUri.set( + isAuthenticated ? FOLLOWING_FEED_URI : LOGGED_OUT_FEED_URI, ); - state.$isReloadingFeed = new Signal.State(false); - state.$materializedFeedUris = new SignalSet(); - - function resetToDefaultFeed() { - state.$currentFeedUri.set( - isAuthenticated ? FOLLOWING_FEED_URI : LOGGED_OUT_FEED_URI, - ); - } + } - if (!state.$currentFeedUri.get()) { - resetToDefaultFeed(); - } + if (!state.$currentFeedUri.get()) { + resetToDefaultFeed(); + } - if ( - !isAuthenticated && - !pluginService.isPreviewMode && - !sessionStorage.getItem(WELCOME_MODAL_SEEN_STORAGE_KEY) - ) { - sessionStorage.setItem(WELCOME_MODAL_SEEN_STORAGE_KEY, "true"); - WelcomeModal.open(); - } + if ( + !isAuthenticated && + !pluginService.isPreviewMode && + !sessionStorage.getItem(WELCOME_MODAL_SEEN_STORAGE_KEY) + ) { + sessionStorage.setItem(WELCOME_MODAL_SEEN_STORAGE_KEY, "true"); + WelcomeModal.open(); + } - if (isAuthenticated) { - pageEffect(root, () => { - const currentFeedUri = state.$currentFeedUri.get(); - if (currentFeedUri) { - localStorage.setItem( - CURRENT_FEED_URI_STORAGE_KEY, - JSON.stringify(currentFeedUri), - ); - } - }); - } + if (isAuthenticated) { + pageEffect(root, () => { + const currentFeedUri = state.$currentFeedUri.get(); + if (currentFeedUri) { + localStorage.setItem( + CURRENT_FEED_URI_STORAGE_KEY, + JSON.stringify(currentFeedUri), + ); + } + }); + } - const postSeenObservers = new Map(); + const postSeenObservers = new Map(); - // Initialize post seen observers for feeds with proxy URLs - function initializePostSeenObservers(pinnedItems) { - if (!isAuthenticated) { - return; - } - const interactableItems = pinnedItems.filter( - (item) => item.acceptsInteractions || item.uri === LOGGED_OUT_FEED_URI, - ); - for (const observer of postSeenObservers.values()) { - observer.disconnect(); - } - postSeenObservers.clear(); - for (const item of interactableItems) { - const proxyUrl = getFeedGeneratorProxyUrl(item); - if (proxyUrl) { - postSeenObservers.set(item.uri, new PostSeenObserver(api, proxyUrl)); - } - } + // Initialize post seen observers for feeds with proxy URLs + function initializePostSeenObservers(pinnedItems) { + if (!isAuthenticated) { + return; } - - async function handleMenuClick() { - layout.openSidebar(); + const interactableItems = pinnedItems.filter( + (item) => item.acceptsInteractions || item.uri === LOGGED_OUT_FEED_URI, + ); + for (const observer of postSeenObservers.values()) { + observer.disconnect(); } - - // When supported, replace with: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded - function scrollIntoViewIfNeeded(element) { - const isVisible = - element.getBoundingClientRect().top < window.innerHeight && - element.getBoundingClientRect().bottom > 0; - if (!isVisible) { - element.scrollIntoView(); + postSeenObservers.clear(); + for (const item of interactableItems) { + const proxyUrl = getFeedGeneratorProxyUrl(item); + if (proxyUrl) { + postSeenObservers.set(item.uri, new PostSeenObserver(api, proxyUrl)); } } + } - const { postInteractionHandler } = interactionHandlers; + async function handleMenuClick() { + layout.openSidebar(); + } - async function handleShowLess(post, feedContext, feedGenerator) { - dataLayer.mutations.sendShowLessInteraction( - post.uri, - feedGenerator.uri, - feedContext, - getFeedGeneratorProxyUrl(feedGenerator), - ); - // Scroll to keep the feedback message in view (it might be hidden by the header, but that's okay) - const feedFeedbackMessageElement = root.querySelector( - `.feed-item[data-feed-generator-uri="${feedGenerator.uri}"] .feed-feedback-message[data-post-uri="${post.uri}"]`, - ); - if (feedFeedbackMessageElement) { - scrollIntoViewIfNeeded(feedFeedbackMessageElement); - } + // When supported, replace with: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded + function scrollIntoViewIfNeeded(element) { + const isVisible = + element.getBoundingClientRect().top < window.innerHeight && + element.getBoundingClientRect().bottom > 0; + if (!isVisible) { + element.scrollIntoView(); } + } - async function handleShowMore(post, feedContext, feedGenerator) { - dataLayer.mutations.sendShowMoreInteraction( - post.uri, - feedGenerator.uri, - feedContext, - getFeedGeneratorProxyUrl(feedGenerator), - ); - showToast("Feedback sent to feed operator"); + const { postInteractionHandler } = interactionHandlers; + + async function handleShowLess(post, feedContext, feedGenerator) { + dataLayer.mutations.sendShowLessInteraction( + post.uri, + feedGenerator.uri, + feedContext, + getFeedGeneratorProxyUrl(feedGenerator), + ); + // Scroll to keep the feedback message in view (it might be hidden by the header, but that's okay) + const feedFeedbackMessageElement = root.querySelector( + `.feed-item[data-feed-generator-uri="${feedGenerator.uri}"] .feed-feedback-message[data-post-uri="${post.uri}"]`, + ); + if (feedFeedbackMessageElement) { + scrollIntoViewIfNeeded(feedFeedbackMessageElement); } + } - const feedScrollState = new Map(); + async function handleShowMore(post, feedContext, feedGenerator) { + dataLayer.mutations.sendShowMoreInteraction( + post.uri, + feedGenerator.uri, + feedContext, + getFeedGeneratorProxyUrl(feedGenerator), + ); + showToast("Feedback sent to feed operator"); + } - async function scrollAndReloadFeed() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - state.$isReloadingFeed.set(true); - try { - await loadCurrentFeed({ reload: true }); - } finally { - state.$isReloadingFeed.set(false); - } - } + const feedScrollState = new Map(); - async function handleTabClick(feedUri) { - let currentFeedUri = state.$currentFeedUri.get(); - if (feedUri === currentFeedUri) { - scrollAndReloadFeed(); - return; - } - // Save scroll state - feedScrollState.set(currentFeedUri, window.scrollY); - state.$materializedFeedUris.add(currentFeedUri); - // Switch feed - state.$currentFeedUri.set(feedUri); - // Scroll to saved position for new feed - const savedScrollY = feedScrollState.get(feedUri) ?? 0; - requestAnimationFrame(() => { - window.scrollTo(0, savedScrollY); - }); - if (!dataLayer.hasCachedFeed(feedUri)) { - await loadCurrentFeed(); - } - // Trigger post seen checks for the new feed - const postSeenObserver = postSeenObservers.get(feedUri); - if (postSeenObserver) { - postSeenObserver.checkAllIntersections(); - } + async function scrollAndReloadFeed() { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } - - function feedErrorTemplate({ feedGenerator }) { - return html`
- An issue occurred when contacting the feed server.
- Please let the feed owner know about this issue.
- ${feedGenerator.creator - ? html`View profile
` - : ""} - -
`; + state.$isReloadingFeed.set(true); + try { + await loadCurrentFeed({ reload: true }); + } finally { + state.$isReloadingFeed.set(false); } + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); + async function handleTabClick(feedUri) { + let currentFeedUri = state.$currentFeedUri.get(); + if (feedUri === currentFeedUri) { scrollAndReloadFeed(); + return; + } + // Save scroll state + feedScrollState.set(currentFeedUri, window.scrollY); + state.$materializedFeedUris.add(currentFeedUri); + // Switch feed + state.$currentFeedUri.set(feedUri); + // Scroll to saved position for new feed + const savedScrollY = feedScrollState.get(feedUri) ?? 0; + requestAnimationFrame(() => { + window.scrollTo(0, savedScrollY); }); - - const $currentPinnedItem = new Signal.Computed(() => { - const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; - const currentFeedUri = state.$currentFeedUri.get(); - return pinnedItems.find((item) => item.uri === currentFeedUri); - }); - - bindPageTitle(root, () => { - return $currentPinnedItem.get()?.displayName ?? null; - }); - - let materializeIdleHandle = null; - - function scheduleMaterializeFeeds(pinnedItems) { - if (materializeIdleHandle !== null) return; - const pending = pinnedItems - .map((item) => item.uri) - .filter((uri) => !state.$materializedFeedUris.has(uri)); - if (pending.length === 0) return; - materializeIdleHandle = requestIdle(() => { - materializeIdleHandle = null; - for (const feedUri of pending) { - state.$materializedFeedUris.add(feedUri); - } - }); + if (!dataLayer.hasCachedFeed(feedUri)) { + await loadCurrentFeed(); } - - function feedContentsTemplate({ item, currentUser }) { - const feedRequestStatus = dataLayer.requests.statusStore.$statuses.get( - "loadNextFeedPage-" + item.uri, - ); - if (feedRequestStatus.error) { - return feedErrorTemplate({ feedGenerator: item }); - } - const hiddenPostUris = dataLayer.derived.$showLessInteractions - .get(item.uri) - .map((interaction) => interaction.item); - return postFeedTemplate({ - feed: dataLayer.derived.$hydratedFeeds.get(item.uri), - currentUser, - isAuthenticated, - feedGenerator: item, - hiddenPostUris, - postInteractionHandler, - onClickShowLess: (post, feedContext) => - handleShowLess(post, feedContext, item), - onClickShowMore: (post, feedContext) => - handleShowMore(post, feedContext, item), - enableFeedFeedback: - item.acceptsInteractions || item.uri === LOGGED_OUT_FEED_URI, - onLoadMore: () => loadCurrentFeed(), - pluginService, - showEndMessage: true, - }); + // Trigger post seen checks for the new feed + const postSeenObserver = postSeenObservers.get(feedUri); + if (postSeenObserver) { + postSeenObserver.checkAllIntersections(); } + } - // Map of feed items -> feedContexts for postSeenObserver - const $feedContextsByFeedUri = new Signal.Computed(() => { - const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; - return new Map( - pinnedItems.map((item) => [ - item.uri, - new Map( - (dataLayer.derived.$hydratedFeeds.get(item.uri)?.feed ?? []).map( - (feedItem) => [feedItem.post.uri, feedItem.feedContext ?? null], - ), - ), - ]), - ); - }); + function feedErrorTemplate({ feedGenerator }) { + return html`
+ An issue occurred when contacting the feed server.
+ Please let the feed owner know about this issue.
+ ${feedGenerator.creator + ? html`View profile
` + : ""} + +
`; + } - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; - const currentFeedUri = state.$currentFeedUri.get(); - const currentFeedRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadNextFeedPage-" + currentFeedUri, - ); - const isLoading = - currentFeedRequestStatus.loading && - state.$isReloadingFeed.get() && - !!dataLayer.derived.$hydratedFeeds.get(currentFeedUri); - render( - html`
- ${headerTemplate({ - showLoadingSpinner: isLoading, - leftButton: "menu", - onClickMenuButton: () => handleMenuClick(), - rightItemTemplate: () => html` - - ${hashtagIconTemplate()} - - `, - bottomItemTemplate: () => html` - ({ - value: item.uri, - label: item.displayName, - }))} - active-tab=${currentFeedUri} - @tab-click=${(event) => handleTabClick(event.detail)} - > - `, - })} -
- ${pinnedItems.map((item) => { - const isMaterialized = - item.uri === currentFeedUri || - state.$materializedFeedUris.has(item.uri); - return html`
- ${isMaterialized - ? feedContentsTemplate({ item, currentUser }) - : null} -
`; - })} -
- ${currentUser - ? floatingComposeButtonTemplate({ - onClick: () => postComposerService.composePost({ currentUser }), - }) - : ""} -
`, - root, - ); - if (postSeenObservers.size > 0) { - const feedContextsByFeedUri = $feedContextsByFeedUri.get(); - root.querySelectorAll(".feed-item").forEach((feedItem) => { - const { feedGeneratorUri, postUri } = feedItem.dataset; - if (feedGeneratorUri) { - const postSeenObserver = postSeenObservers.get(feedGeneratorUri); - if (postSeenObserver) { - const feedContext = - feedContextsByFeedUri.get(feedGeneratorUri)?.get(postUri) ?? - null; - postSeenObserver.register(feedItem, postUri, feedContext); - } - } - }); + bindToPage(root, layout, "active-nav-click", (event) => { + event.preventDefault(); + scrollAndReloadFeed(); + }); + + const $currentPinnedItem = new Signal.Computed(() => { + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; + const currentFeedUri = state.$currentFeedUri.get(); + return pinnedItems.find((item) => item.uri === currentFeedUri); + }); + + bindPageTitle(root, () => { + return $currentPinnedItem.get()?.displayName ?? null; + }); + + let materializeIdleHandle = null; + + function scheduleMaterializeFeeds(pinnedItems) { + if (materializeIdleHandle !== null) return; + const pending = pinnedItems + .map((item) => item.uri) + .filter((uri) => !state.$materializedFeedUris.has(uri)); + if (pending.length === 0) return; + materializeIdleHandle = requestIdle(() => { + materializeIdleHandle = null; + for (const feedUri of pending) { + state.$materializedFeedUris.add(feedUri); } - scheduleMaterializeFeeds(pinnedItems); }); + } - function getFeedRequestDescriptor(uri) { - const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; - const item = pinnedItems.find((i) => i.uri === uri); - return item ? { type: item.type, uri } : { type: "feed", uri }; + function feedContentsTemplate({ item, currentUser }) { + const feedRequestStatus = dataLayer.requests.statusStore.$statuses.get( + "loadNextFeedPage-" + item.uri, + ); + if (feedRequestStatus.error) { + return feedErrorTemplate({ feedGenerator: item }); } + const hiddenPostUris = dataLayer.derived.$showLessInteractions + .get(item.uri) + .map((interaction) => interaction.item); + return postFeedTemplate({ + feed: dataLayer.derived.$hydratedFeeds.get(item.uri), + currentUser, + isAuthenticated, + feedGenerator: item, + hiddenPostUris, + postInteractionHandler, + onClickShowLess: (post, feedContext) => + handleShowLess(post, feedContext, item), + onClickShowMore: (post, feedContext) => + handleShowMore(post, feedContext, item), + enableFeedFeedback: + item.acceptsInteractions || item.uri === LOGGED_OUT_FEED_URI, + onLoadMore: () => loadCurrentFeed(), + pluginService, + showEndMessage: true, + }); + } - async function loadCurrentFeed({ reload = false } = {}) { - const currentFeedUri = state.$currentFeedUri.get(); - await dataLayer.requests.loadNextFeedPage( - getFeedRequestDescriptor(currentFeedUri), - { reload, limit: FEED_PAGE_SIZE + 1 }, + // Map of feed items -> feedContexts for postSeenObserver + const $feedContextsByFeedUri = new Signal.Computed(() => { + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; + return new Map( + pinnedItems.map((item) => [ + item.uri, + new Map( + (dataLayer.derived.$hydratedFeeds.get(item.uri)?.feed ?? []).map( + (feedItem) => [feedItem.post.uri, feedItem.feedContext ?? null], + ), + ), + ]), + ); + }); + + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; + const currentFeedUri = state.$currentFeedUri.get(); + const currentFeedRequestStatus = + dataLayer.requests.statusStore.$statuses.get( + "loadNextFeedPage-" + currentFeedUri, ); + const isLoading = + currentFeedRequestStatus.loading && + state.$isReloadingFeed.get() && + !!dataLayer.derived.$hydratedFeeds.get(currentFeedUri); + render( + html`
+ ${headerTemplate({ + showLoadingSpinner: isLoading, + leftButton: "menu", + onClickMenuButton: () => handleMenuClick(), + rightItemTemplate: () => html` + + ${hashtagIconTemplate()} + + `, + bottomItemTemplate: () => html` + ({ + value: item.uri, + label: item.displayName, + }))} + active-tab=${currentFeedUri} + @tab-click=${(event) => handleTabClick(event.detail)} + > + `, + })} +
+ ${pinnedItems.map((item) => { + const isMaterialized = + item.uri === currentFeedUri || + state.$materializedFeedUris.has(item.uri); + return html`
+ ${isMaterialized + ? feedContentsTemplate({ item, currentUser }) + : null} +
`; + })} +
+ ${currentUser + ? floatingComposeButtonTemplate({ + onClick: () => postComposerService.composePost({ currentUser }), + }) + : ""} +
`, + root, + ); + if (postSeenObservers.size > 0) { + const feedContextsByFeedUri = $feedContextsByFeedUri.get(); + root.querySelectorAll(".feed-item").forEach((feedItem) => { + const { feedGeneratorUri, postUri } = feedItem.dataset; + if (feedGeneratorUri) { + const postSeenObserver = postSeenObservers.get(feedGeneratorUri); + if (postSeenObserver) { + const feedContext = + feedContextsByFeedUri.get(feedGeneratorUri)?.get(postUri) ?? null; + postSeenObserver.register(feedItem, postUri, feedContext); + } + } + }); } + scheduleMaterializeFeeds(pinnedItems); + }); - async function preloadHiddenFeeds(pinnedItems) { - const currentFeedUri = state.$currentFeedUri.get(); - const itemsToPreload = pinnedItems - .filter((item) => item.uri !== currentFeedUri) - .slice(0, 5); - for (const item of itemsToPreload) { - await dataLayer.requests.loadNextFeedPage(item, { - limit: FEED_PAGE_SIZE + 1, - }); - } - } + function getFeedRequestDescriptor(uri) { + const pinnedItems = dataLayer.derived.$hydratedPinnedItems.get() ?? []; + const item = pinnedItems.find((i) => i.uri === uri); + return item ? { type: item.type, uri } : { type: "feed", uri }; + } - root.addEventListener("page-enter", async () => { - const currentFeedUri = state.$currentFeedUri.get(); - await dataLayer.declarative.ensurePinnedItems().then((pinnedItems) => { - if (!pinnedItems.some((item) => item.uri === currentFeedUri)) { - resetToDefaultFeed(); - } + async function loadCurrentFeed({ reload = false } = {}) { + const currentFeedUri = state.$currentFeedUri.get(); + await dataLayer.requests.loadNextFeedPage( + getFeedRequestDescriptor(currentFeedUri), + { reload, limit: FEED_PAGE_SIZE + 1 }, + ); + } - preloadHiddenFeeds(pinnedItems); - initializePostSeenObservers(pinnedItems); - window.scrollTo(0, 0); + async function preloadHiddenFeeds(pinnedItems) { + const currentFeedUri = state.$currentFeedUri.get(); + const itemsToPreload = pinnedItems + .filter((item) => item.uri !== currentFeedUri) + .slice(0, 5); + for (const item of itemsToPreload) { + await dataLayer.requests.loadNextFeedPage(item, { + limit: FEED_PAGE_SIZE + 1, }); + } + } - // Ensure current user before loading feed to prevent flash of unfiltered feed - let currentUser = null; - if (isAuthenticated) { - currentUser = await dataLayer.declarative.ensureCurrentUser(); - } + // If /intent/compose, open the post composer and redirect to root. One-time, + // so revisiting the cached page doesn't reopen it. + if (window.location.pathname === "/intent/compose" && isAuthenticated) { + dataLayer.declarative.ensureCurrentUser().then((currentUser) => { + postComposerService.composePost({ currentUser }); + window.history.replaceState(null, "", "/"); + }); + } - // If /intent/compose, open the post composer and redirect to root - const url = new URL(window.location); - if (url.pathname === "/intent/compose" && currentUser) { - postComposerService.composePost({ currentUser }); - window.history.replaceState(null, "", "/"); + root.addEventListener("page-enter", async () => { + const currentFeedUri = state.$currentFeedUri.get(); + await dataLayer.declarative.ensurePinnedItems().then((pinnedItems) => { + if (!pinnedItems.some((item) => item.uri === currentFeedUri)) { + resetToDefaultFeed(); } - await loadCurrentFeed(); + preloadHiddenFeeds(pinnedItems); + initializePostSeenObservers(pinnedItems); + window.scrollTo(0, 0); }); - root.addEventListener("page-restore", () => { - for (const observer of postSeenObservers.values()) { - observer.connect(); - } - }); + // Ensure current user before loading feed to prevent flash of unfiltered feed + if (isAuthenticated) { + await dataLayer.declarative.ensureCurrentUser(); + } - root.addEventListener("page-exit", () => { - for (const observer of postSeenObservers.values()) { - observer.disconnect(); - } - if (materializeIdleHandle !== null) { - cancelIdle(materializeIdleHandle); - materializeIdleHandle = null; - } - state.$materializedFeedUris.clear(); - }); - } -} + await loadCurrentFeed({ reload: true }); + }); + + root.addEventListener("page-restore", () => { + for (const observer of postSeenObservers.values()) { + observer.connect(); + } + }); -export default new HomeView(); + root.addEventListener("page-exit", () => { + for (const observer of postSeenObservers.values()) { + observer.disconnect(); + } + if (materializeIdleHandle !== null) { + cancelIdle(materializeIdleHandle); + materializeIdleHandle = null; + } + state.$materializedFeedUris.clear(); + }); +} diff --git a/src/js/views/installedPlugins.view.js b/src/js/views/installedPlugins.view.js index 993758b8..075d3506 100644 --- a/src/js/views/installedPlugins.view.js +++ b/src/js/views/installedPlugins.view.js @@ -1,6 +1,5 @@ -import { View } from "/js/views/view.js"; import { html, render, keyed } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { settingsIconTemplate } from "/js/templates/icons/settingsIcon.template.js"; @@ -15,336 +14,328 @@ import { PermissionsDeclinedError } from "/js/plugins/pluginService.js"; import { linkToPluginSettings, linkToCommunityPlugin } from "/js/navigation.js"; import "/js/components/toggle-switch.js"; -class InstalledPluginsView extends View { - async render({ root, router, layout, context: { pluginService } }) { - await auth.requireAuth(); +export default async function installedPluginsView({ + root, + router, + context: { pluginService }, +}) { + await auth.requireAuth(); - const state = new ReactiveStore("installedPluginsView"); - state.$uninstallingIds = new SignalSet(); - state.$enablingIds = new SignalSet(); - state.$disablingIds = new SignalSet(); - state.$updatingIds = new SignalSet(); - state.$reloading = new Signal.State(false); - state.$checkingForUpdates = new Signal.State(false); - state.$updatingAll = new Signal.State(false); + const state = new ReactiveStore("installedPluginsView"); + state.$uninstallingIds = new SignalSet(); + state.$enablingIds = new SignalSet(); + state.$disablingIds = new SignalSet(); + state.$updatingIds = new SignalSet(); + state.$reloading = new Signal.State(false); + state.$checkingForUpdates = new Signal.State(false); + state.$updatingAll = new Signal.State(false); - async function uninstallPlugin(plugin) { - const confirmed = await confirmModal( - `"${plugin.name}" will be uninstalled and its settings will be deleted.`, - { - title: "Uninstall plugin?", - confirmButtonStyle: "danger", - confirmButtonText: "Uninstall", - }, - ); - if (!confirmed) return; - state.$uninstallingIds.add(plugin.id); - try { - await pluginService.uninstallPlugin(plugin.id); - showToast(`Uninstalled ${plugin.name}`); - } finally { - state.$uninstallingIds.delete(plugin.id); - } + async function uninstallPlugin(plugin) { + const confirmed = await confirmModal( + `"${plugin.name}" will be uninstalled and its settings will be deleted.`, + { + title: "Uninstall plugin?", + confirmButtonStyle: "danger", + confirmButtonText: "Uninstall", + }, + ); + if (!confirmed) return; + state.$uninstallingIds.add(plugin.id); + try { + await pluginService.uninstallPlugin(plugin.id); + showToast(`Uninstalled ${plugin.name}`); + } finally { + state.$uninstallingIds.delete(plugin.id); } + } - async function reloadPlugins() { - if (state.$reloading.get()) return; - state.$reloading.set(true); - try { - await pluginService.reloadPlugins(); - showToast("Reloaded plugins"); - } catch (e) { - console.error(e); - showToast("Failed to reload plugins", { style: "error" }); - } finally { - state.$reloading.set(false); - } + async function reloadPlugins() { + if (state.$reloading.get()) return; + state.$reloading.set(true); + try { + await pluginService.reloadPlugins(); + showToast("Reloaded plugins"); + } catch (e) { + console.error(e); + showToast("Failed to reload plugins", { style: "error" }); + } finally { + state.$reloading.set(false); } + } - async function checkForUpdates() { - if (state.$checkingForUpdates.get()) return; - state.$checkingForUpdates.set(true); - try { - const updates = await pluginService.checkForUpdates(); - if (updates.size === 0) { - showToast("All plugins are up to date", { style: "success" }); - } else { - showToast( - `${updates.size} update${updates.size === 1 ? "" : "s"} available`, - ); - } - } catch (e) { - showToast("Failed to check for updates", { style: "error" }); - } finally { - state.$checkingForUpdates.set(false); + async function checkForUpdates() { + if (state.$checkingForUpdates.get()) return; + state.$checkingForUpdates.set(true); + try { + const updates = await pluginService.checkForUpdates(); + if (updates.size === 0) { + showToast("All plugins are up to date", { style: "success" }); + } else { + showToast( + `${updates.size} update${updates.size === 1 ? "" : "s"} available`, + ); } + } catch (e) { + showToast("Failed to check for updates", { style: "error" }); + } finally { + state.$checkingForUpdates.set(false); } + } - async function updatePlugin(plugin) { - state.$updatingIds.add(plugin.id); - try { - const result = await pluginService.updatePlugin(plugin.id); - if (result.updated) { - showToast(`Updated ${plugin.name} to v${result.version}`, { - style: "success", - }); - } - } catch (e) { - if (e instanceof PermissionsDeclinedError) { - // User declined the permission prompt; nothing to report. - } else { - console.error(e); - showToast(`Failed to update ${plugin.name}`, { - style: "error", - }); - } - } finally { - state.$updatingIds.delete(plugin.id); + async function updatePlugin(plugin) { + state.$updatingIds.add(plugin.id); + try { + const result = await pluginService.updatePlugin(plugin.id); + if (result.updated) { + showToast(`Updated ${plugin.name} to v${result.version}`, { + style: "success", + }); } + } catch (e) { + if (e instanceof PermissionsDeclinedError) { + // User declined the permission prompt; nothing to report. + } else { + console.error(e); + showToast(`Failed to update ${plugin.name}`, { + style: "error", + }); + } + } finally { + state.$updatingIds.delete(plugin.id); } + } - async function updateAllPlugins() { - if (state.$updatingAll.get()) return; - state.$updatingAll.set(true); - try { - const { updated, failed } = await pluginService.updateAllPlugins(); - if (failed.length > 0) { - showToast(`Updated ${updated.length}, failed ${failed.length}`, { - style: "error", - }); - } else { - showToast( - `Updated ${updated.length} plugin${updated.length === 1 ? "" : "s"}`, - { style: "success" }, - ); - } - } finally { - state.$updatingAll.set(false); + async function updateAllPlugins() { + if (state.$updatingAll.get()) return; + state.$updatingAll.set(true); + try { + const { updated, failed } = await pluginService.updateAllPlugins(); + if (failed.length > 0) { + showToast(`Updated ${updated.length}, failed ${failed.length}`, { + style: "error", + }); + } else { + showToast( + `Updated ${updated.length} plugin${updated.length === 1 ? "" : "s"}`, + { style: "success" }, + ); } + } finally { + state.$updatingAll.set(false); } + } - async function togglePlugin(plugin) { - const pendingIds = plugin.enabled - ? state.$disablingIds - : state.$enablingIds; - pendingIds.add(plugin.id); - try { - if (plugin.enabled) { - await pluginService.disablePlugin(plugin.id); - showToast(`Disabled ${plugin.name}`); - } else { - try { - await pluginService.enablePlugin(plugin.id); - showToast(`Enabled ${plugin.name}`, { style: "success" }); - } catch (e) { - const message = e.message ?? String(e); - showToast(`Error when loading ${plugin.name} - ${message}`, { - style: "error", - }); - } + async function togglePlugin(plugin) { + const pendingIds = plugin.enabled + ? state.$disablingIds + : state.$enablingIds; + pendingIds.add(plugin.id); + try { + if (plugin.enabled) { + await pluginService.disablePlugin(plugin.id); + showToast(`Disabled ${plugin.name}`); + } else { + try { + await pluginService.enablePlugin(plugin.id); + showToast(`Enabled ${plugin.name}`, { style: "success" }); + } catch (e) { + const message = e.message ?? String(e); + showToast(`Error when loading ${plugin.name} - ${message}`, { + style: "error", + }); } - } finally { - pendingIds.delete(plugin.id); } + } finally { + pendingIds.delete(plugin.id); } + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - }); - - bindPageTitle(root, () => "Plugins"); + bindPageTitle(root, () => "Plugins"); - pageEffect(root, () => { - const reloading = state.$reloading.get(); - const checkingForUpdates = state.$checkingForUpdates.get(); - const updatingAll = state.$updatingAll.get(); - const pluginsInfo = pluginService.$pluginsInfo.get(); - const availableUpdates = pluginService.$availableUpdates.get(); - const hasAvailableUpdates = - availableUpdates !== null && availableUpdates.size > 0; - render( - html`
- ${headerTemplate({ - title: "Plugins", - })} -
- - ${globeIconTemplate()} { + const reloading = state.$reloading.get(); + const checkingForUpdates = state.$checkingForUpdates.get(); + const updatingAll = state.$updatingAll.get(); + const pluginsInfo = pluginService.$pluginsInfo.get(); + const availableUpdates = pluginService.$availableUpdates.get(); + const hasAvailableUpdates = + availableUpdates !== null && availableUpdates.size > 0; + render( + html`
+ ${headerTemplate({ + title: "Plugins", + })} +
+ + ${globeIconTemplate()} + + Browse community plugins - - Browse community plugins - Discover plugins built by the community - - ${chevronRightIconTemplate()}Discover plugins built by the community - + + ${chevronRightIconTemplate()} + - ${!pluginsInfo - ? html`

Loading…

` - : pluginsInfo.length === 0 - ? html`
-
- No plugins installed + ${!pluginsInfo + ? html`

Loading…

` + : pluginsInfo.length === 0 + ? html`
+
+ No plugins installed +
+

+ Browse the community registry to find and install plugins. +

+
` + : html`
+

Installed plugins

+
+ +
-

- Browse the community registry to find and install plugins. -

-
` - : html`
-

Installed plugins

-
- - -
-
-
    - ${pluginsInfo.map((plugin) => { - const hasUpdate = - availableUpdates?.has(plugin.id) ?? false; - const isUpdating = - state.$updatingIds.has(plugin.id) || - (updatingAll && hasUpdate); - const isPending = - state.$uninstallingIds.has(plugin.id) || - state.$enablingIds.has(plugin.id) || - state.$disablingIds.has(plugin.id) || - isUpdating; - const isLocal = plugin.id.endsWith("__LOCAL"); - const infoContent = html` -
    - ${plugin.name} - ${isLocal - ? html`local` - : ""} -
    - ${plugin.description - ? html`
    - ${plugin.description} -
    ` +
+
    + ${pluginsInfo.map((plugin) => { + const hasUpdate = + availableUpdates?.has(plugin.id) ?? false; + const isUpdating = + state.$updatingIds.has(plugin.id) || + (updatingAll && hasUpdate); + const isPending = + state.$uninstallingIds.has(plugin.id) || + state.$enablingIds.has(plugin.id) || + state.$disablingIds.has(plugin.id) || + isUpdating; + const isLocal = plugin.id.endsWith("__LOCAL"); + const infoContent = html` +
    + ${plugin.name} + ${isLocal + ? html`local` : ""} -
    - Version: ${plugin.version} -
    -
    - By ${plugin.author} -
    - `; - // Keyed to avoid flipping animation when plugins are added / removed - return keyed( - plugin.id, - html` -
  • - ${isLocal - ? html`
    - ${infoContent} -
    ` - : html` - ${infoContent} - `} -
    - ${hasUpdate - ? html`` - : ""} - ${plugin.enabled && plugin.hasSettings - ? html` - ${settingsIconTemplate()} - ` - : ""} -
    + ${plugin.description + ? html`
    + ${plugin.description} +
    ` + : ""} +
    + Version: ${plugin.version} +
    +
    + By ${plugin.author} +
    + `; + // Keyed to avoid flipping animation when plugins are added / removed + return keyed( + plugin.id, + html` +
  • + ${isLocal + ? html`
    + ${infoContent} +
    ` + : html` - ${trashCanIconTemplate()} - - togglePlugin(plugin)} - > -
    • - - `, - ); - })} -
`} -
-
`, - root, - ); - }); - } + ${infoContent} + `} +
+ ${hasUpdate + ? html`` + : ""} + ${plugin.enabled && plugin.hasSettings + ? html` + ${settingsIconTemplate()} + ` + : ""} + + togglePlugin(plugin)} + > +
+ + `, + ); + })} + `} +
+
`, + root, + ); + }); } - -export default new InstalledPluginsView(); diff --git a/src/js/views/listDetail.view.js b/src/js/views/listDetail.view.js index 23c1a1fa..8f7ced91 100644 --- a/src/js/views/listDetail.view.js +++ b/src/js/views/listDetail.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { Signal, ReactiveStore } from "/js/signals.js"; import { classnames } from "/js/utils.js"; @@ -21,420 +20,403 @@ import "/js/components/context-menu-item-group.js"; import "/js/components/edit-list-details-dialog.js"; import "/js/components/manage-list-members-dialog.js"; -class ListDetailView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - await auth.requireAuth(); +export default async function listDetailView({ + root, + params, + context: { + dataLayer, + identityResolver, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + await auth.requireAuth(); - const { handleOrDid, rkey } = params; + const { handleOrDid, rkey } = params; - let profileDid = null; - if (handleOrDid.startsWith("did:")) { - profileDid = handleOrDid; - } else { - profileDid = await identityResolver.resolveHandle(handleOrDid); - } - const listUri = `at://${profileDid}/app.bsky.graph.list/${rkey}`; + let profileDid = null; + if (handleOrDid.startsWith("did:")) { + profileDid = handleOrDid; + } else { + profileDid = await identityResolver.resolveHandle(handleOrDid); + } + const listUri = `at://${profileDid}/app.bsky.graph.list/${rkey}`; - const { - postInteractionHandler, - listInteractionHandler, - profileInteractionHandler, - } = interactionHandlers; + const { + postInteractionHandler, + listInteractionHandler, + profileInteractionHandler, + } = interactionHandlers; - const state = new ReactiveStore("listDetailView"); - state.$activeTab = new Signal.State("posts"); + const state = new ReactiveStore("listDetailView"); + state.$activeTab = new Signal.State("posts"); - function listSubscriptionButtonTemplate({ list, listInteractionHandler }) { - const isMuted = !!list.viewer?.muted; - const isBlocked = !!list.viewer?.blocked; - const isSubscribed = isMuted || isBlocked; - const teststate = isMuted - ? "muted" - : isBlocked - ? "blocked" - : "not-subscribed"; - return html` - + + listInteractionHandler.handleMuteList(list)} > - ${isMuted ? "Unmute list" : isBlocked ? "Unblock list" : "Subscribe"} - - - listInteractionHandler.handleMuteList(list)} - > - Mute accounts - - listInteractionHandler.handleBlockList(list)} - > - Block accounts - - - `; - } + Mute accounts + + listInteractionHandler.handleBlockList(list)} + > + Block accounts + + + `; + } - bindPageTitle(root, () => { - return dataLayer.derived.$lists.get(listUri)?.name ?? null; - }); + bindPageTitle(root, () => { + return dataLayer.derived.$lists.get(listUri)?.name ?? null; + }); - pageEffect(root, () => { - const showLessInteractions = - dataLayer.derived.$showLessInteractions.get(listUri); - const hiddenPostUris = showLessInteractions.map( - (interaction) => interaction.item, - ); - const currentUser = dataLayer.derived.$currentUser.get(); - const list = dataLayer.derived.$lists.get(listUri); - const listCreator = list?.creator; - const listCreatorHandle = listCreator?.handle; - const preferences = dataLayer.derived.$preferences.get(); - const isPinned = preferences?.isFeedPinned(listUri) ?? false; - const feed = dataLayer.derived.$hydratedFeeds.get(listUri); - const membersEntry = dataLayer.derived.$listMembers.get(listUri); - const members = membersEntry?.members ?? null; - const hasMoreMembers = membersEntry?.cursor != null; - const activeTab = state.$activeTab.get(); - const isCurateList = !isModerationList(list); - const isCurrentUserList = listCreator?.did === currentUser?.did; - const listPermalink = `https://bsky.app/profile/${listCreatorHandle || handleOrDid}/lists/${rkey}`; - render( - html`
- ${headerTemplate({ - rightItemTemplate: list - ? () => html` - ${isCurateList - ? html`` - : listSubscriptionButtonTemplate({ - list, - listInteractionHandler, + pageEffect(root, () => { + const showLessInteractions = + dataLayer.derived.$showLessInteractions.get(listUri); + const hiddenPostUris = showLessInteractions.map( + (interaction) => interaction.item, + ); + const currentUser = dataLayer.derived.$currentUser.get(); + const list = dataLayer.derived.$lists.get(listUri); + const listCreator = list?.creator; + const listCreatorHandle = listCreator?.handle; + const preferences = dataLayer.derived.$preferences.get(); + const isPinned = preferences?.isFeedPinned(listUri) ?? false; + const feed = dataLayer.derived.$hydratedFeeds.get(listUri); + const membersEntry = dataLayer.derived.$listMembers.get(listUri); + const members = membersEntry?.members ?? null; + const hasMoreMembers = membersEntry?.cursor != null; + const activeTab = state.$activeTab.get(); + const isCurateList = !isModerationList(list); + const isCurrentUserList = listCreator?.did === currentUser?.did; + const listPermalink = `https://bsky.app/profile/${listCreatorHandle || handleOrDid}/lists/${rkey}`; + render( + html`
+ ${headerTemplate({ + rightItemTemplate: list + ? () => html` + ${isCurateList + ? html` - - - { - window.open(listPermalink, "_blank"); - }} - > - Open in bsky.app - - { - navigator.clipboard.writeText(listPermalink); - showToast("Link copied to clipboard", { - style: "success", - }); - }} - > - Copy link to list - - - ${isCurrentUserList - ? html` handleAddPeople(list)} - > - Add people to list - - - handleEditList(list)} - > - Edit list details - - handleDeleteList(list)} - > - Delete list - - ` - : ""} - - ` - : null, - })} - ${!list - ? html`
-
- -
-
` - : html`
-
+ listInteractionHandler.handlePinList( + listUri, + !isPinned, + )} + > + ${pinIconTemplate({ filled: isPinned })} + ` + : listSubscriptionButtonTemplate({ + list, + listInteractionHandler, + })} + + + + { + window.open(listPermalink, "_blank"); + }} > - ${list.name} -
- ${listCreator - ? html`
+ { + navigator.clipboard.writeText(listPermalink); + showToast("Link copied to clipboard", { + style: "success", + }); + }} + > + Copy link to list + + + ${isCurrentUserList + ? html` handleAddPeople(list)} > - ${isModerationList(list) ? "Moderation list" : "List"} - by - ${isCurrentUserList - ? "you" - : `@${listCreator.handle}`} -
` - : ""} + Add people to list + + + handleEditList(list)} + > + Edit list details + + handleDeleteList(list)} + > + Delete list + + ` + : ""} + + ` + : null, + })} + ${!list + ? html`
+
+ +
+
` + : html`
+
+ ${list.avatar + ? html`${list.name}` + : html`${list.name}`} +
+
+ ${list.name}
+ ${listCreator + ? html`
+ ${isModerationList(list) ? "Moderation list" : "List"} + by + ${isCurrentUserList ? "you" : `@${listCreator.handle}`} +
` + : ""}
- ${list.description - ? html`
- ${richTextTemplate({ - text: list.description, - facets: list.descriptionFacets ?? [], +
+ ${list.description + ? html`
+ ${richTextTemplate({ + text: list.description, + facets: list.descriptionFacets ?? [], + })} +
` + : ""} + ${isCurateList + ? html`
+ + state.$activeTab.set(event.detail)} + > +
` + : html`
`} +
+ ${activeTab === "posts" && isCurateList + ? html`
+ ${postFeedTemplate({ + feed, + currentUser, + isAuthenticated, + hiddenPostUris, + onLoadMore: () => loadFeed(), + postInteractionHandler, + pluginService, + showEndMessage: true, })} + ${feed?.feed?.length === 0 && isCurrentUserList + ? html`` + : ""}
` - : ""} - ${isCurateList - ? html`
- - state.$activeTab.set(event.detail)} - > -
` - : html`
`} -
- ${activeTab === "posts" && isCurateList - ? html`
- ${postFeedTemplate({ - feed, - currentUser, - isAuthenticated, - hiddenPostUris, - onLoadMore: () => loadFeed(), - postInteractionHandler, - pluginService, - showEndMessage: true, - })} - ${feed?.feed?.length === 0 && isCurrentUserList - ? html`` - : ""} -
` - : html`
- ${profileFeedTemplate({ - profiles: members, - hasMore: hasMoreMembers, - onLoadMore: () => loadMembers(), - emptyMessage: "This list has no members.", - showEndMessage: true, - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler, - pluginService, - ...(isCurateList ? {} : { rightItemTemplate: null }), - })} - ${members?.length === 0 && isCurrentUserList - ? html`` - : ""} -
`} -
-
`} -
`, - root, - ); - }); + : html`
+ ${profileFeedTemplate({ + profiles: members, + hasMore: hasMoreMembers, + onLoadMore: () => loadMembers(), + emptyMessage: "This list has no members.", + showEndMessage: true, + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler, + pluginService, + ...(isCurateList ? {} : { rightItemTemplate: null }), + })} + ${members?.length === 0 && isCurrentUserList + ? html`` + : ""} +
`} +
+ `} +
`, + root, + ); + }); - async function handleDeleteList(list) { - const deleted = await listInteractionHandler.handleDeleteList(list); - if (!deleted) return; - const fallbackRoute = list.creator?.handle - ? `/profile/${list.creator.handle}` - : "/"; - window.router.back({ fallbackRoute }); - } + async function handleDeleteList(list) { + const deleted = await listInteractionHandler.handleDeleteList(list); + if (!deleted) return; + const fallbackRoute = list.creator?.handle + ? `/profile/${list.creator.handle}` + : "/"; + window.router.back({ fallbackRoute }); + } - function handleAddPeople(list) { - const dialog = document.createElement("manage-list-members-dialog"); - dialog.dataLayer = dataLayer; - dialog.list = list; - let reloadTimeout = null; - dialog.addEventListener("dialog-closed", () => { - clearTimeout(reloadTimeout); - dialog.remove(); - }); - dialog.addEventListener("members-changed", () => { - if (isModerationList(list) || userHasScrolled) return; - clearTimeout(reloadTimeout); - reloadTimeout = setTimeout(() => { - if (userHasScrolled) return; - loadFeed({ reload: true }); - }, 1000); // 1 sec delay for appview update - }); - root.querySelector("main").appendChild(dialog); - dialog.open(); - } + function handleAddPeople(list) { + const dialog = document.createElement("manage-list-members-dialog"); + dialog.dataLayer = dataLayer; + dialog.list = list; + let reloadTimeout = null; + dialog.addEventListener("dialog-closed", () => { + clearTimeout(reloadTimeout); + dialog.remove(); + }); + dialog.addEventListener("members-changed", () => { + if (isModerationList(list) || userHasScrolled) return; + clearTimeout(reloadTimeout); + reloadTimeout = setTimeout(() => { + if (userHasScrolled) return; + loadFeed({ reload: true }); + }, 1000); // 1 sec delay for appview update + }); + root.querySelector("main").appendChild(dialog); + dialog.open(); + } - async function handleEditList(list) { - const dialog = document.createElement("edit-list-details-dialog"); - dialog.addEventListener("list-save", async (event) => { - const { listUpdates, successCallback, errorCallback } = event.detail; - try { - await dataLayer.mutations.updateList(list, listUpdates); - showToast("List updated"); - successCallback(); - } catch (error) { - errorCallback(error); - } - }); - dialog.addEventListener("edit-list-details-closed", () => { - dialog.remove(); - }); - root.querySelector("main").appendChild(dialog); - dialog.setList(list); - dialog.open(); - } + async function handleEditList(list) { + const dialog = document.createElement("edit-list-details-dialog"); + dialog.addEventListener("list-save", async (event) => { + const { listUpdates, successCallback, errorCallback } = event.detail; + try { + await dataLayer.mutations.updateList(list, listUpdates); + showToast("List updated"); + successCallback(); + } catch (error) { + errorCallback(error); + } + }); + dialog.addEventListener("edit-list-details-closed", () => { + dialog.remove(); + }); + root.querySelector("main").appendChild(dialog); + dialog.setList(list); + dialog.open(); + } - async function loadFeed({ reload = false } = {}) { - await dataLayer.requests.loadNextFeedPage( - { type: "list", uri: listUri }, - { reload, limit: FEED_PAGE_SIZE + 1 }, - ); - } + async function loadFeed({ reload = false } = {}) { + await dataLayer.requests.loadNextFeedPage( + { type: "list", uri: listUri }, + { reload, limit: FEED_PAGE_SIZE + 1 }, + ); + } - async function loadMembers({ reload = false } = {}) { - await dataLayer.requests.loadListMembers(listUri, { reload }); - } + async function loadMembers({ reload = false } = {}) { + await dataLayer.requests.loadListMembers(listUri, { reload }); + } - async function loadListAndFeeds({ reload = false } = {}) { - const list = await dataLayer.declarative.ensureList(listUri); - const requests = [loadMembers({ reload })]; - if (!isModerationList(list)) { - requests.push(loadFeed({ reload })); - } - await Promise.all(requests); + async function loadPageData() { + await dataLayer.requests.loadList(listUri); + const list = dataLayer.derived.$lists.get(listUri); + const requests = [loadMembers({ reload: true })]; + if (!isModerationList(list)) { + requests.push(loadFeed({ reload: true })); } + await Promise.all(requests); + } - let userHasScrolled = false; - const markUserScrolled = () => { - userHasScrolled = true; - }; - bindToPage(root, window, "touchmove", markUserScrolled); - bindToPage(root, window, "wheel", markUserScrolled); - bindToPage(root, window, "keydown", markUserScrolled); + let userHasScrolled = false; + const markUserScrolled = () => { + userHasScrolled = true; + }; + bindToPage(root, window, "touchmove", markUserScrolled); + bindToPage(root, window, "wheel", markUserScrolled); + bindToPage(root, window, "keydown", markUserScrolled); - root.addEventListener("page-enter", async () => { - userHasScrolled = false; - await loadListAndFeeds(); - }); + const resetUserScrolled = () => { + userHasScrolled = false; + }; + root.addEventListener("page-enter", resetUserScrolled); + root.addEventListener("page-restore", resetUserScrolled); - root.addEventListener("page-restore", async (e) => { - userHasScrolled = false; - if (e.detail?.isBack) return; - await loadListAndFeeds({ reload: true }); - }); - } + root.addEventListener("page-enter", () => loadPageData()); } - -export default new ListDetailView(); diff --git a/src/js/views/lists.view.js b/src/js/views/lists.view.js index 71b060b9..c9aa1c07 100644 --- a/src/js/views/lists.view.js +++ b/src/js/views/lists.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; import { headerTemplate } from "/js/templates/header.template.js"; @@ -8,93 +7,82 @@ import { showToast } from "/js/toasts.js"; import { parseUri } from "/js/dataHelpers.js"; import "/js/components/create-list-dialog.js"; -class ListsView extends View { - async render({ root, layout, context: { dataLayer } }) { - await auth.requireAuth(); +export default async function listsView({ + root, + layout, + context: { dataLayer }, +}) { + await auth.requireAuth(); - async function scrollAndReloadLists() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadLists({ reload: true }); - } + root.addEventListener("page-enter", () => loadPageData()); - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - scrollAndReloadLists(); - }); + bindToPage(root, layout, "active-nav-click", () => { + loadPageData(); + }); - bindPageTitle(root, () => "Lists"); + bindPageTitle(root, () => "Lists"); - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const actorLists = currentUser - ? dataLayer.derived.$actorLists.get(currentUser.did) - : null; + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const actorLists = currentUser + ? dataLayer.derived.$actorLists.get(currentUser.did) + : null; - render( - html`
- ${headerTemplate({ - title: "Lists", - rightItemTemplate: () => html` - - `, + render( + html`
+ ${headerTemplate({ + title: "Lists", + rightItemTemplate: () => html` + + `, + })} +
+ ${listFeedTemplate({ + lists: actorLists?.lists, + cursor: actorLists?.cursor, + onLoadMore: () => loadLists(), })} -
- ${listFeedTemplate({ - lists: actorLists?.lists, - cursor: actorLists?.cursor, - onLoadMore: () => loadLists(), - })} -
-
`, - root, - ); - }); + +
`, + root, + ); + }); - async function loadLists({ reload = false } = {}) { - await dataLayer.requests.loadCurrentUserLists({ reload }); - } + async function loadLists({ reload = false } = {}) { + await dataLayer.requests.loadCurrentUserLists({ reload }); + } - async function handleClickNew({ currentUser }) { - const dialog = document.createElement("create-list-dialog"); - dialog.addEventListener("list-create", async (event) => { - const { listData, successCallback, errorCallback } = event.detail; - try { - const list = await dataLayer.mutations.createList({ - ...listData, - currentUser, - }); - showToast("List created"); - successCallback(); - const { rkey } = parseUri(list.uri); - window.router.go(`/profile/${currentUser.handle}/lists/${rkey}`); - } catch (error) { - errorCallback(error); - } - }); - dialog.addEventListener("create-list-closed", () => { - dialog.remove(); - }); - root.querySelector("main").appendChild(dialog); - dialog.open(); - } + function loadPageData() { + loadLists({ reload: true }); + } - root.addEventListener("page-enter", async () => { - await loadLists(); + async function handleClickNew({ currentUser }) { + const dialog = document.createElement("create-list-dialog"); + dialog.addEventListener("list-create", async (event) => { + const { listData, successCallback, errorCallback } = event.detail; + try { + const list = await dataLayer.mutations.createList({ + ...listData, + currentUser, + }); + showToast("List created"); + successCallback(); + const { rkey } = parseUri(list.uri); + window.router.go(`/profile/${currentUser.handle}/lists/${rkey}`); + } catch (error) { + errorCallback(error); + } }); - - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await loadLists({ reload: true }); + dialog.addEventListener("create-list-closed", () => { + dialog.remove(); }); + root.querySelector("main").appendChild(dialog); + dialog.open(); } } - -export default new ListsView(); diff --git a/src/js/views/login.view.js b/src/js/views/login.view.js index 57e33c53..ca97b9b1 100644 --- a/src/js/views/login.view.js +++ b/src/js/views/login.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { auth, BasicAuthProvider, getLoginErrorMessage } from "/js/auth.js"; import { html, render } from "/js/lib/lit-html.js"; import { AppViewConfig, DEFAULT_APP_VIEW_CONFIGS } from "/js/config.js"; @@ -20,512 +19,506 @@ import { automatedAccountBadgeTemplate } from "/js/templates/automatedAccountBad import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; import { Signal, ReactiveStore } from "/js/signals.js"; -class LoginView extends View { - async render({ root, router, params, context: { dataLayer } }) { - await auth.requireNoAuth(); +export default async function loginView({ + root, + router, + params, + context: { dataLayer }, +}) { + await auth.requireNoAuth(); - const storedConfig = getAppViewConfig(); - const isStoredCustom = storedConfig.id === CUSTOM_APP_VIEW_CONFIG_ID; - const advancedOpenByDefault = storedConfig.id !== AppViewConfig.BLUESKY.id; - const isBasicAuth = auth.provider instanceof BasicAuthProvider; - const supportsMultipleAccounts = auth.supportsMultipleAccounts(); + const storedConfig = getAppViewConfig(); + const isStoredCustom = storedConfig.id === CUSTOM_APP_VIEW_CONFIG_ID; + const advancedOpenByDefault = storedConfig.id !== AppViewConfig.BLUESKY.id; + const isBasicAuth = auth.provider instanceof BasicAuthProvider; + const supportsMultipleAccounts = auth.supportsMultipleAccounts(); - const state = new ReactiveStore("loginView"); - state.$loading = new Signal.State(false); - state.$errorMessage = new Signal.State(null); - state.$appViewSelection = new Signal.State(storedConfig.id); - state.$customAppViewServiceDid = new Signal.State( - isStoredCustom ? storedConfig.appViewServiceDid : "", - ); - state.$customChatServiceDid = new Signal.State( - isStoredCustom ? storedConfig.chatServiceDid : "", - ); - state.$savedAccounts = new Signal.State([]); - state.$savedAccountProfiles = new Signal.State({}); - state.$profilesLoading = new Signal.State(true); - state.$pendingAccountDid = new Signal.State(null); - state.$currentDid = new Signal.State(null); - state.$forceShowForm = new Signal.State(false); + const state = new ReactiveStore("loginView"); + state.$loading = new Signal.State(false); + state.$errorMessage = new Signal.State(null); + state.$appViewSelection = new Signal.State(storedConfig.id); + state.$customAppViewServiceDid = new Signal.State( + isStoredCustom ? storedConfig.appViewServiceDid : "", + ); + state.$customChatServiceDid = new Signal.State( + isStoredCustom ? storedConfig.chatServiceDid : "", + ); + state.$savedAccounts = new Signal.State([]); + state.$savedAccountProfiles = new Signal.State({}); + state.$profilesLoading = new Signal.State(true); + state.$pendingAccountDid = new Signal.State(null); + state.$currentDid = new Signal.State(null); + state.$forceShowForm = new Signal.State(false); - function getCurrentReturnTo() { - const params = new URLSearchParams(window.location.search); - return validateReturnToParam(params.get("returnTo")); - } + function getCurrentReturnTo() { + const params = new URLSearchParams(window.location.search); + return validateReturnToParam(params.get("returnTo")); + } - function resolveSelectedAppViewConfig() { - if (state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID) { - return { - id: CUSTOM_APP_VIEW_CONFIG_ID, - appViewServiceDid: state.$customAppViewServiceDid.get().trim(), - chatServiceDid: state.$customChatServiceDid.get().trim(), - }; - } - return ( - DEFAULT_APP_VIEW_CONFIGS.find( - (config) => config.id === state.$appViewSelection.get(), - ) ?? AppViewConfig.BLUESKY - ); + function resolveSelectedAppViewConfig() { + if (state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID) { + return { + id: CUSTOM_APP_VIEW_CONFIG_ID, + appViewServiceDid: state.$customAppViewServiceDid.get().trim(), + chatServiceDid: state.$customChatServiceDid.get().trim(), + }; } + return ( + DEFAULT_APP_VIEW_CONFIGS.find( + (config) => config.id === state.$appViewSelection.get(), + ) ?? AppViewConfig.BLUESKY + ); + } - async function handleSubmit(e) { - e.preventDefault(); - const handle = e.target.handle.value; - const password = isBasicAuth ? e.target.password.value : null; + async function handleSubmit(e) { + e.preventDefault(); + const handle = e.target.handle.value; + const password = isBasicAuth ? e.target.password.value : null; - const selectedConfig = resolveSelectedAppViewConfig(); - if (!isValidAppViewConfig(selectedConfig)) { - state.$errorMessage.set("Invalid App View configuration"); - return; - } + const selectedConfig = resolveSelectedAppViewConfig(); + if (!isValidAppViewConfig(selectedConfig)) { + state.$errorMessage.set("Invalid App View configuration"); + return; + } - state.$loading.set(true); - try { - setAppViewConfig(selectedConfig); + state.$loading.set(true); + try { + setAppViewConfig(selectedConfig); - // allow truncated handles - let fullHandle = handle.includes(".") - ? handle - : handle + ".bsky.social"; - if (fullHandle.startsWith("@")) { - fullHandle = fullHandle.slice(1); - } - const returnTo = getCurrentReturnTo(); - await auth.login( - isBasicAuth - ? { handle: fullHandle, password } - : { handle: fullHandle, returnTo }, - ); - window.location.href = returnTo ?? "/"; - } catch (error) { - state.$errorMessage.set(getLoginErrorMessage(error)); - state.$loading.set(false); + // allow truncated handles + let fullHandle = handle.includes(".") ? handle : handle + ".bsky.social"; + if (fullHandle.startsWith("@")) { + fullHandle = fullHandle.slice(1); } + const returnTo = getCurrentReturnTo(); + await auth.login( + isBasicAuth + ? { handle: fullHandle, password } + : { handle: fullHandle, returnTo }, + ); + window.location.href = returnTo ?? "/"; + } catch (error) { + state.$errorMessage.set(getLoginErrorMessage(error)); + state.$loading.set(false); } + } - function handleAppViewChange(e) { - state.$appViewSelection.set(e.target.value); - } + function handleAppViewChange(e) { + state.$appViewSelection.set(e.target.value); + } - function handleCustomAppViewDidInput(e) { - state.$customAppViewServiceDid.set(e.target.value); - } + function handleCustomAppViewDidInput(e) { + state.$customAppViewServiceDid.set(e.target.value); + } - function handleCustomChatDidInput(e) { - state.$customChatServiceDid.set(e.target.value); - } + function handleCustomChatDidInput(e) { + state.$customChatServiceDid.set(e.target.value); + } - async function loadSavedAccounts() { - if (!supportsMultipleAccounts) return; - const session = await auth.getSession(); - state.$currentDid.set(session?.did ?? null); - state.$savedAccounts.set(await auth.listAccounts()); - } + async function loadSavedAccounts() { + if (!supportsMultipleAccounts) return; + const session = await auth.getSession(); + state.$currentDid.set(session?.did ?? null); + state.$savedAccounts.set(await auth.listAccounts()); + } - bindPageTitle(root, () => "Sign in"); + bindPageTitle(root, () => "Sign in"); - pageEffect(root, () => { - const accounts = state.$savedAccounts.get(); - if (accounts.length === 0) return; - dataLayer.declarative - .ensureDetailedProfiles(accounts.map((account) => account.did)) - .then((profiles) => { - const profilesByDid = {}; - for (const profile of profiles) { - if (profile) profilesByDid[profile.did] = profile; - } - state.$savedAccountProfiles.set(profilesByDid); - }) - .catch(() => { - // fall back to handle-only rendering - }) - .finally(() => { - state.$profilesLoading.set(false); - }); - }); + pageEffect(root, () => { + const accounts = state.$savedAccounts.get(); + if (accounts.length === 0) return; + dataLayer.declarative + .ensureDetailedProfiles(accounts.map((account) => account.did)) + .then((profiles) => { + const profilesByDid = {}; + for (const profile of profiles) { + if (profile) profilesByDid[profile.did] = profile; + } + state.$savedAccountProfiles.set(profilesByDid); + }) + .catch(() => { + // fall back to handle-only rendering + }) + .finally(() => { + state.$profilesLoading.set(false); + }); + }); - async function handleSelectAccount(account) { - if (state.$pendingAccountDid.get() !== null) return; - const returnTo = getCurrentReturnTo(); - if (account.did === state.$currentDid.get()) { + async function handleSelectAccount(account) { + if (state.$pendingAccountDid.get() !== null) return; + const returnTo = getCurrentReturnTo(); + if (account.did === state.$currentDid.get()) { + window.location.href = returnTo ?? "/"; + return; + } + state.$pendingAccountDid.set(account.did); + try { + if (account.needsReauth) { + await auth.login({ handle: account.handle, returnTo }); + } else { + await auth.provider.switchToAccount(account.did); window.location.href = returnTo ?? "/"; - return; - } - state.$pendingAccountDid.set(account.did); - try { - if (account.needsReauth) { - await auth.login({ handle: account.handle, returnTo }); - } else { - await auth.provider.switchToAccount(account.did); - window.location.href = returnTo ?? "/"; - } - } catch (error) { - state.$pendingAccountDid.set(null); - state.$errorMessage.set(getLoginErrorMessage(error)); } + } catch (error) { + state.$pendingAccountDid.set(null); + state.$errorMessage.set(getLoginErrorMessage(error)); } + } - function focusHandleInput({ clearValue = false } = {}) { + function focusHandleInput({ clearValue = false } = {}) { + requestAnimationFrame(() => { requestAnimationFrame(() => { - requestAnimationFrame(() => { - const input = root.querySelector('input[name="handle"]'); - if (input) { - if (clearValue) { - input.value = ""; - } - input.focus(); + const input = root.querySelector('input[name="handle"]'); + if (input) { + if (clearValue) { + input.value = ""; } - }); + input.focus(); + } }); - } + }); + } - function handleUseAnotherAccount() { - if (state.$pendingAccountDid.get() !== null) return; - state.$forceShowForm.set(true); - focusHandleInput({ clearValue: true }); - } + function handleUseAnotherAccount() { + if (state.$pendingAccountDid.get() !== null) return; + state.$forceShowForm.set(true); + focusHandleInput({ clearValue: true }); + } - function handleBack() { - if (state.$forceShowForm.get() && state.$savedAccounts.get().length > 0) { - state.$forceShowForm.set(false); - state.$errorMessage.set(null); - return; - } - router.go("/"); + function handleBack() { + if (state.$forceShowForm.get() && state.$savedAccounts.get().length > 0) { + state.$forceShowForm.set(false); + state.$errorMessage.set(null); + return; } + router.go("/"); + } - function savedAccountsTemplate({ - savedAccounts, - profilesByDid, - currentDid, - pendingDid, - profilesLoading, - }) { - return html` -
-

- Sign in as... -

- + ${handle + ? html`` + : null} + ${account.needsReauth + ? html`` + : null} + + `} + ${isPendingRow + ? html`` + : isCurrent + ? html`` + : html``} + + `; + })} +
- `; - } +
+ `; + } - pageEffect(root, () => { - const isCustom = - state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID; - const loading = state.$loading.get(); - const errorMessage = state.$errorMessage.get(); - const appViewSelection = state.$appViewSelection.get(); - const customAppViewServiceDid = state.$customAppViewServiceDid.get(); - const customChatServiceDid = state.$customChatServiceDid.get(); - const savedAccounts = state.$savedAccounts.get(); - const savedAccountProfiles = state.$savedAccountProfiles.get(); - const profilesLoading = state.$profilesLoading.get(); - const pendingAccountDid = state.$pendingAccountDid.get(); - const currentDid = state.$currentDid.get(); - const listVisible = - !state.$forceShowForm.get() && - supportsMultipleAccounts && - savedAccounts.length > 0; - render( - html`
-
-
-

Sign in

-

to IMPRO

-
-
- ${listVisible - ? savedAccountsTemplate({ - savedAccounts, - profilesByDid: savedAccountProfiles, - currentDid, - pendingDid: pendingAccountDid, - profilesLoading, - }) + pageEffect(root, () => { + const isCustom = + state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID; + const loading = state.$loading.get(); + const errorMessage = state.$errorMessage.get(); + const appViewSelection = state.$appViewSelection.get(); + const customAppViewServiceDid = state.$customAppViewServiceDid.get(); + const customChatServiceDid = state.$customChatServiceDid.get(); + const savedAccounts = state.$savedAccounts.get(); + const savedAccountProfiles = state.$savedAccountProfiles.get(); + const profilesLoading = state.$profilesLoading.get(); + const pendingAccountDid = state.$pendingAccountDid.get(); + const currentDid = state.$currentDid.get(); + const listVisible = + !state.$forceShowForm.get() && + supportsMultipleAccounts && + savedAccounts.length > 0; + render( + html`
+
+
+

Sign in

+

to IMPRO

+
+
+ ${listVisible + ? savedAccountsTemplate({ + savedAccounts, + profilesByDid: savedAccountProfiles, + currentDid, + pendingDid: pendingAccountDid, + profilesLoading, + }) + : ""} +
handleSubmit(e)} + > +
Sign in
+
+ + +
+ ${isBasicAuth + ? html`
+ + +
` : ""} - handleSubmit(e)} - > -
Sign in
+
+ Advanced options
- - -
- ${isBasicAuth - ? html`
- - -
` - : ""} -
- Advanced options -
- -
- handleAppViewChange(e)} + > + ${DEFAULT_APP_VIEW_CONFIGS.map( + (defaultConfig) => html` + + `, + )} + - `, - )} - - -
+ Custom + +
- ${isCustom - ? html` -
-

${alertIconTemplate()} Warning

- Only set these values if you know what they mean! -
-
- - handleCustomAppViewDidInput(e)} - /> -
-
- - handleCustomChatDidInput(e)} - /> -
- ` - : ""} -
-
- -
- -
- ${errorMessage - ? html`
${errorMessage}
` + ${isCustom + ? html` +
+

${alertIconTemplate()} Warning

+ Only set these values if you know what they mean! +
+
+ + handleCustomAppViewDidInput(e)} + /> +
+
+ + handleCustomChatDidInput(e)} + /> +
+ ` : ""} +
+
+ +
+ +
+ ${errorMessage + ? html`
${errorMessage}
` + : ""}
-
-
`, - root, - ); - }); +
+
+
`, + root, + ); + }); - root.addEventListener("page-enter", async () => { - // this can happen when the oauth callback fails - see callback.html - const params = new URLSearchParams(window.location.search); - const errorMessage = params.get("error_message"); - if (errorMessage) { - state.$errorMessage.set(errorMessage); - // clear from url - const newUrl = new URL(window.location.href); - newUrl.searchParams.delete("error_message"); - window.history.replaceState({}, "", newUrl.toString()); - } - if (params.get("addAccount") === "1") { - state.$forceShowForm.set(true); - } - await loadSavedAccounts(); - const listVisible = - !state.$forceShowForm.get() && - supportsMultipleAccounts && - state.$savedAccounts.get().length > 0; - if (!listVisible) { - focusHandleInput(); - } - }); + root.addEventListener("page-enter", async () => { + // this can happen when the oauth callback fails - see callback.html + const params = new URLSearchParams(window.location.search); + const errorMessage = params.get("error_message"); + if (errorMessage) { + state.$errorMessage.set(errorMessage); + // clear from url + const newUrl = new URL(window.location.href); + newUrl.searchParams.delete("error_message"); + window.history.replaceState({}, "", newUrl.toString()); + } + if (params.get("addAccount") === "1") { + state.$forceShowForm.set(true); + } + await loadSavedAccounts(); + const listVisible = + !state.$forceShowForm.get() && + supportsMultipleAccounts && + state.$savedAccounts.get().length > 0; + if (!listVisible) { + focusHandleInput(); + } + }); - // Account actions navigate away with the pending spinner showing; if the - // user comes back via the back/forward cache the document is restored - // as-is, so reset the stuck pending state. - bindToPage(root, window, "pageshow", (event) => { - if (event.persisted) { - state.$pendingAccountDid.set(null); - } - }); + // Account actions navigate away with the pending spinner showing; if the + // user comes back via the back/forward cache the document is restored + // as-is, so reset the stuck pending state. + bindToPage(root, window, "pageshow", (event) => { + if (event.persisted) { + state.$pendingAccountDid.set(null); + } + }); - root.nativeRefreshDisabled = true; - } + root.nativeRefreshDisabled = true; } - -export default new LoginView(); diff --git a/src/js/views/notFound.view.js b/src/js/views/notFound.view.js index 73107eb9..86d6d8c8 100644 --- a/src/js/views/notFound.view.js +++ b/src/js/views/notFound.view.js @@ -1,27 +1,22 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; -class NotFoundView extends View { - async render({ root }) { - bindPageTitle(root, () => "Not Found"); +export default async function notFoundView({ root }) { + bindPageTitle(root, () => "Not Found"); - pageEffect(root, () => { - render( - html`
- ${headerTemplate({ - title: "Not found", - })} -
-

Page not found

- Go home -
-
`, - root, - ); - }); - } + pageEffect(root, () => { + render( + html`
+ ${headerTemplate({ + title: "Not found", + })} +
+

Page not found

+ Go home +
+
`, + root, + ); + }); } - -export default new NotFoundView(); diff --git a/src/js/views/notifications.view.js b/src/js/views/notifications.view.js index 9bc506b5..a279752a 100644 --- a/src/js/views/notifications.view.js +++ b/src/js/views/notifications.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; import { heartIconTemplate } from "/js/templates/icons/heartIcon.template.js"; import { headerTemplate } from "/js/templates/header.template.js"; @@ -47,805 +46,788 @@ function notificationItemTemplate({ href, isUnread, children }) { return html`
${children}
`; } -class NotificationsView extends View { - async render({ - root, - layout, - context: { - dataLayer, - notificationService, - postComposerService, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - await auth.requireAuth(); +export default async function notificationsView({ + root, + layout, + context: { + dataLayer, + notificationService, + postComposerService, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + await auth.requireAuth(); + + function postPreviewTemplate({ post }) { + if (!post) { + return ""; + } - function postPreviewTemplate({ post }) { - if (!post) { - return ""; - } + if (isUnavailablePost(post)) { + return html`
+ Post unavailable +
`; + } - if (isUnavailablePost(post)) { - return html`
- Post unavailable -
`; - } + const postPreview = post?.record?.text ? post.record.text : null; - const postPreview = post?.record?.text ? post.record.text : null; + const images = getImagesFromPost(post); + const video = getVideoFromPost(post); - const images = getImagesFromPost(post); - const video = getVideoFromPost(post); + if (postPreview === null && images.length === 0 && video === null) { + return null; + } - if (postPreview === null && images.length === 0 && video === null) { - return null; - } + return html` +
+ ${postPreview + ? html`
${postPreview}
` + : ""} + ${images.length > 0 + ? html` +
+ ${images + .slice(0, 4) + .map( + (image) => html` + ${image.alt || + `, + )} +
+ ` + : ""} + ${video + ? html` +
+ ${video.alt || +
+
+ ` + : ""} +
+ `; + } - return html` -
- ${postPreview - ? html`
${postPreview}
` - : ""} - ${images.length > 0 - ? html` -
- ${images - .slice(0, 4) - .map( - (image) => html` - ${image.alt || - `, - )} -
- ` - : ""} - ${video - ? html` -
- ${video.alt || -
-
- ` - : ""} -
- `; - } + const { postInteractionHandler } = interactionHandlers; - const { postInteractionHandler } = interactionHandlers; + const state = new ReactiveStore("notificationsView"); + state.$activeTab = new Signal.State("all"); + state.$isReloadingNotifications = new Signal.State(false); + state.$isReloadingMentionNotifications = new Signal.State(false); - const state = new ReactiveStore("notificationsView"); - state.$activeTab = new Signal.State("all"); - state.$isReloadingNotifications = new Signal.State(false); - state.$isReloadingMentionNotifications = new Signal.State(false); + async function handleMenuClick() { + layout.openSidebar(); + } - async function handleMenuClick() { - layout.openSidebar(); - } + const GROUPED_NOTIFICATION_TYPES = [ + "like", + "follow", + "repost", + "like-via-repost", + "repost-via-repost", + "feedgen-like", + "starterpack-joined", + "verified", + "unverified", + ]; + + // Check if you're following the author of the notification, + // and the notification was created after you followed them. + function isFollowBackNotification(notification) { + if (notification.reason !== "follow") return false; + const viewerFollowing = notification.author?.viewer?.following; + if (!viewerFollowing) return false; + const { rkey: followingRkey } = parseUri(viewerFollowing); + const followingTimestamp = getTimestampFromRkey(followingRkey); + if (followingTimestamp === null) return false; + const followedTimestamp = + new Date(notification.record?.createdAt).getTime() * 1000; + return followedTimestamp > followingTimestamp; + } - const GROUPED_NOTIFICATION_TYPES = [ - "like", - "follow", - "repost", - "like-via-repost", - "repost-via-repost", - "feedgen-like", - "starterpack-joined", - "verified", - "unverified", - ]; - - // Check if you're following the author of the notification, - // and the notification was created after you followed them. - function isFollowBackNotification(notification) { - if (notification.reason !== "follow") return false; - const viewerFollowing = notification.author?.viewer?.following; - if (!viewerFollowing) return false; - const { rkey: followingRkey } = parseUri(viewerFollowing); - const followingTimestamp = getTimestampFromRkey(followingRkey); - if (followingTimestamp === null) return false; - const followedTimestamp = - new Date(notification.record?.createdAt).getTime() * 1000; - return followedTimestamp > followingTimestamp; - } + function groupNotificationsForBatch(notifications) { + const notificationGroups = []; - function groupNotificationsForBatch(notifications) { - const notificationGroups = []; - - notifications.forEach((notification) => { - const reason = notification.reason; - const subject = notification.reasonSubject; - - const isFollowBackNotif = isFollowBackNotification(notification); - const type = isFollowBackNotif ? "follow-back" : reason; - - const existingGroup = notificationGroups.find( - (group) => group.type === type && group.subject === subject, - ); - - if (existingGroup && GROUPED_NOTIFICATION_TYPES.includes(type)) { - existingGroup.notifications.push(notification); - } else { - notificationGroups.push({ - type, - subject, - notifications: [notification], - }); - } - }); + notifications.forEach((notification) => { + const reason = notification.reason; + const subject = notification.reasonSubject; - return notificationGroups; - } + const isFollowBackNotif = isFollowBackNotification(notification); + const type = isFollowBackNotif ? "follow-back" : reason; - function shouldHideNotificationGroup(notificationGroup) { - const { type, notifications } = notificationGroup; - if ( - type === "like" || - type === "repost" || - type === "like-via-repost" || - type === "repost-via-repost" - ) { - const subject = notifications[0]?.subject; - return !subject || isEmptyPost(subject); - } - if (type === "reply" || type === "mention" || type === "quote") { - const post = notifications[0]?.post; - return !post || isEmptyPost(post); - } - if (type === "subscribed-post") { - return ( - !notificationGroup.subject || isEmptyPost(notificationGroup.subject) - ); - } - return false; - } + const existingGroup = notificationGroups.find( + (group) => group.type === type && group.subject === subject, + ); - function groupNotificationsByType(notifications) { - if (!notifications) { - return null; + if (existingGroup && GROUPED_NOTIFICATION_TYPES.includes(type)) { + existingGroup.notifications.push(notification); + } else { + notificationGroups.push({ + type, + subject, + notifications: [notification], + }); } - // Only group notifications per page - const batchedNotifications = batch( - notifications, - NOTIFICATIONS_PAGE_SIZE, + }); + + return notificationGroups; + } + + function shouldHideNotificationGroup(notificationGroup) { + const { type, notifications } = notificationGroup; + if ( + type === "like" || + type === "repost" || + type === "like-via-repost" || + type === "repost-via-repost" + ) { + const subject = notifications[0]?.subject; + return !subject || isEmptyPost(subject); + } + if (type === "reply" || type === "mention" || type === "quote") { + const post = notifications[0]?.post; + return !post || isEmptyPost(post); + } + if (type === "subscribed-post") { + return ( + !notificationGroup.subject || isEmptyPost(notificationGroup.subject) ); - return batchedNotifications - .flatMap((batch) => groupNotificationsForBatch(batch)) - .filter( - (notificationGroup) => - !shouldHideNotificationGroup(notificationGroup), - ); } + return false; + } - function notificationAvatarsTemplate({ notifications, maxAvatars = 5 }) { - const displayCount = Math.min(notifications.length, maxAvatars); - return html` -
- ${notifications - .slice(0, displayCount) - .map( - (notif) => html` -
- ${avatarTemplate({ author: notif.author })} -
- `, - )} - ${notifications.length > maxAvatars - ? html`
- +${notifications.length - maxAvatars} -
` - : ""} -
- `; + function groupNotificationsByType(notifications) { + if (!notifications) { + return null; } + // Only group notifications per page + const batchedNotifications = batch(notifications, NOTIFICATIONS_PAGE_SIZE); + return batchedNotifications + .flatMap((batch) => groupNotificationsForBatch(batch)) + .filter( + (notificationGroup) => !shouldHideNotificationGroup(notificationGroup), + ); + } - function notificationProfileNamesTemplate({ notificationGroup, title }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const displayName = getDisplayName(firstNotif.author); - const otherCount = notifications.length - 1; - return html`${displayName}${verificationBadgeTemplate({ - profile: firstNotif.author, - })}${automatedAccountBadgeTemplate({ - profile: firstNotif.author, - })}${otherCount > 0 - ? html` - and - ` + function notificationAvatarsTemplate({ notifications, maxAvatars = 5 }) { + const displayCount = Math.min(notifications.length, maxAvatars); + return html` +
+ ${notifications + .slice(0, displayCount) + .map( + (notif) => html` +
+ ${avatarTemplate({ author: notif.author })} +
+ `, + )} + ${notifications.length > maxAvatars + ? html`
+ +${notifications.length - maxAvatars} +
` : ""} - `; - } +
+ `; + } - function followNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - return html` -
-
- ${userPlusIconTemplate({ filled: true })} -
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: "Followed you", - })} - ${notificationGroup.type === "follow-back" - ? "followed you back" - : "followed you"} - · ${timeAgo} -
+ function notificationProfileNamesTemplate({ notificationGroup, title }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const displayName = getDisplayName(firstNotif.author); + const otherCount = notifications.length - 1; + return html`${displayName}${verificationBadgeTemplate({ + profile: firstNotif.author, + })}${automatedAccountBadgeTemplate({ + profile: firstNotif.author, + })}${otherCount > 0 + ? html` + and + ` + : ""} + `; + } + + function followNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + return html` +
+
+ ${userPlusIconTemplate({ filled: true })} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: "Followed you", + })} + ${notificationGroup.type === "follow-back" + ? "followed you back" + : "followed you"} + · ${timeAgo}
- `; - } +
+ `; + } - function subscribedPostNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const post = notificationGroup.subject; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - const profileLink = linkToProfile(post.author); - return notificationItemTemplate({ - href: isUnavailablePost(post) ? null : linkToPost(post), - isUnread, - children: html` -
- ${notificationsIconTemplate({ filled: true })} -
-
- ${notificationAvatarsTemplate({ notifications })} -
- New post from - ${getDisplayName(post.author)}${verificationBadgeTemplate({ - profile: post.author, - })}${automatedAccountBadgeTemplate({ profile: post.author })} - · ${timeAgo} -
- ${postPreviewTemplate({ post: post })} + function subscribedPostNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const post = notificationGroup.subject; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + const profileLink = linkToProfile(post.author); + return notificationItemTemplate({ + href: isUnavailablePost(post) ? null : linkToPost(post), + isUnread, + children: html` +
+ ${notificationsIconTemplate({ filled: true })} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ New post from + ${getDisplayName(post.author)}${verificationBadgeTemplate({ + profile: post.author, + })}${automatedAccountBadgeTemplate({ profile: post.author })} + · ${timeAgo}
- `, - }); - } + ${postPreviewTemplate({ post: post })} +
+ `, + }); + } - function likeNotificationTemplate({ notificationGroup, isRepost = false }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - - // Get the liked post for preview - const likedPost = firstNotif.subject; - - return notificationItemTemplate({ - href: isUnavailablePost(likedPost) ? null : linkToPost(likedPost), - isUnread, - children: html` -
- ${heartIconTemplate({ filled: true })} -
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: isRepost ? "Liked your repost" : "Liked your post", - })} - liked ${isRepost ? "your repost" : "your post"} - · ${timeAgo} -
- ${postPreviewTemplate({ post: likedPost })} + function likeNotificationTemplate({ notificationGroup, isRepost = false }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + + // Get the liked post for preview + const likedPost = firstNotif.subject; + + return notificationItemTemplate({ + href: isUnavailablePost(likedPost) ? null : linkToPost(likedPost), + isUnread, + children: html` +
+ ${heartIconTemplate({ filled: true })} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: isRepost ? "Liked your repost" : "Liked your post", + })} + liked ${isRepost ? "your repost" : "your post"} + · ${timeAgo}
- `, - }); - } + ${postPreviewTemplate({ post: likedPost })} +
+ `, + }); + } - function repostNotificationTemplate({ - notificationGroup, - isRepost = false, - }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - - // Get the reposted post for preview - const repostedPost = firstNotif.subject; - return notificationItemTemplate({ - href: isUnavailablePost(repostedPost) ? null : linkToPost(repostedPost), - isUnread, - children: html` -
${repostIconTemplate()}
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: isRepost ? "Reposted your repost" : "Reposted your post", - })} - ${isRepost ? "reposted your repost" : "reposted your post"} - · ${timeAgo} -
- ${postPreviewTemplate({ post: repostedPost })} + function repostNotificationTemplate({ notificationGroup, isRepost = false }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + + // Get the reposted post for preview + const repostedPost = firstNotif.subject; + return notificationItemTemplate({ + href: isUnavailablePost(repostedPost) ? null : linkToPost(repostedPost), + isUnread, + children: html` +
${repostIconTemplate()}
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: isRepost ? "Reposted your repost" : "Reposted your post", + })} + ${isRepost ? "reposted your repost" : "reposted your post"} + · ${timeAgo}
- `, - }); - } - - function replyNotificationTemplate({ notificationGroup, currentUser }) { - const { notifications } = notificationGroup; - const notification = notifications[0]; - const post = notification.post; - const replyToAuthor = notification.parentPost?.author || null; - const isUnread = !notification.isRead; - return html` -
- ${smallPostTemplate({ - post, - currentUser, - isAuthenticated, - ignoreContentWarning: true, - isUserPost: currentUser?.did === post.author?.did, - showReplyToLabel: !!replyToAuthor, - replyToAuthor, - postInteractionHandler, - ignoreMuteWarning: true, - pluginService, - })} + ${postPreviewTemplate({ post: repostedPost })}
- `; - } + `, + }); + } - function feedgenLikeNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - const subjectUri = notificationGroup.subject; - const { repo, rkey } = subjectUri ? parseUri(subjectUri) : {}; - const subjectLink = repo && rkey ? `/profile/${repo}/feed/${rkey}` : null; - - return notificationItemTemplate({ - href: subjectLink, - isUnread, - children: html` -
- ${heartIconTemplate({ filled: true })} -
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: "Liked your custom feed", - })} - liked your custom feed - · ${timeAgo} -
-
- `, - }); - } + function replyNotificationTemplate({ notificationGroup, currentUser }) { + const { notifications } = notificationGroup; + const notification = notifications[0]; + const post = notification.post; + const replyToAuthor = notification.parentPost?.author || null; + const isUnread = !notification.isRead; + return html` +
+ ${smallPostTemplate({ + post, + currentUser, + isAuthenticated, + ignoreContentWarning: true, + isUserPost: currentUser?.did === post.author?.did, + showReplyToLabel: !!replyToAuthor, + replyToAuthor, + postInteractionHandler, + ignoreMuteWarning: true, + pluginService, + })} +
+ `; + } - function starterpackJoinedNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - const subjectUri = notificationGroup.subject; - const { repo, rkey } = subjectUri ? parseUri(subjectUri) : {}; - const subjectLink = - repo && rkey ? `/profile/${repo}/starter-pack/${rkey}` : null; - - return notificationItemTemplate({ - href: subjectLink, - isUnread, - children: html` -
- ${userIconTemplate({ filled: true })} -
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: "Joined via your starter pack", - })} - signed up with your starter pack - · ${timeAgo} -
+ function feedgenLikeNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + const subjectUri = notificationGroup.subject; + const { repo, rkey } = subjectUri ? parseUri(subjectUri) : {}; + const subjectLink = repo && rkey ? `/profile/${repo}/feed/${rkey}` : null; + + return notificationItemTemplate({ + href: subjectLink, + isUnread, + children: html` +
+ ${heartIconTemplate({ filled: true })} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: "Liked your custom feed", + })} + liked your custom feed + · ${timeAgo}
- `, - }); - } - - function verifiedNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; +
+ `, + }); + } - return html` -
-
- ${verifiedCheckIconTemplate()} -
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: "Verified you", - })} - verified you - · ${timeAgo} -
+ function starterpackJoinedNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + const subjectUri = notificationGroup.subject; + const { repo, rkey } = subjectUri ? parseUri(subjectUri) : {}; + const subjectLink = + repo && rkey ? `/profile/${repo}/starter-pack/${rkey}` : null; + + return notificationItemTemplate({ + href: subjectLink, + isUnread, + children: html` +
+ ${userIconTemplate({ filled: true })} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: "Joined via your starter pack", + })} + signed up with your starter pack + · ${timeAgo}
- `; - } + `, + }); + } - function unverifiedNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - const otherCount = notifications.length - 1; + function verifiedNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; - return html` -
-
- ${verifiedCheckIconTemplate()} + return html` +
+
+ ${verifiedCheckIconTemplate()} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: "Verified you", + })} + verified you + · ${timeAgo}
-
- ${notificationAvatarsTemplate({ notifications })} -
- ${notificationProfileNamesTemplate({ - notificationGroup, - title: "Removed verification", - })} - removed their ${otherCount > 0 ? "verifications" : "verification"} - from your account - · ${timeAgo} -
+
+
+ `; + } + + function unverifiedNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + const otherCount = notifications.length - 1; + + return html` +
+
+ ${verifiedCheckIconTemplate()} +
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ ${notificationProfileNamesTemplate({ + notificationGroup, + title: "Removed verification", + })} + removed their ${otherCount > 0 ? "verifications" : "verification"} + from your account + · ${timeAgo}
- `; - } +
+ `; + } - function contactMatchNotificationTemplate({ notificationGroup }) { - const { notifications } = notificationGroup; - const firstNotif = notifications[0]; - const timeAgo = displayRelativeTime(firstNotif.indexedAt); - const isUnread = !firstNotif.isRead; - const displayName = getDisplayName(firstNotif.author); - const profileLink = linkToProfile(firstNotif.author); - - return notificationItemTemplate({ - href: profileLink, - isUnread, - children: html` -
${contactsIconTemplate()}
-
- ${notificationAvatarsTemplate({ notifications })} -
- Your contact - ${displayName}${verificationBadgeTemplate({ - profile: firstNotif.author, - })}${automatedAccountBadgeTemplate({ - profile: firstNotif.author, - })} - is on Bluesky - · ${timeAgo} -
+ function contactMatchNotificationTemplate({ notificationGroup }) { + const { notifications } = notificationGroup; + const firstNotif = notifications[0]; + const timeAgo = displayRelativeTime(firstNotif.indexedAt); + const isUnread = !firstNotif.isRead; + const displayName = getDisplayName(firstNotif.author); + const profileLink = linkToProfile(firstNotif.author); + + return notificationItemTemplate({ + href: profileLink, + isUnread, + children: html` +
${contactsIconTemplate()}
+
+ ${notificationAvatarsTemplate({ notifications })} +
+ Your contact + ${displayName}${verificationBadgeTemplate({ + profile: firstNotif.author, + })}${automatedAccountBadgeTemplate({ + profile: firstNotif.author, + })} + is on Bluesky + · ${timeAgo}
- `, +
+ `, + }); + } + + function notificationGroupTemplate({ notificationGroup, currentUser }) { + const { type } = notificationGroup; + if (type === "follow" || type === "follow-back") { + return followNotificationTemplate({ notificationGroup }); + } + if (type === "like") { + return likeNotificationTemplate({ notificationGroup }); + } + if (type === "like-via-repost") { + return likeNotificationTemplate({ + notificationGroup, + isRepost: true, }); } + if (type === "repost") { + return repostNotificationTemplate({ notificationGroup }); + } + if (type === "repost-via-repost") { + return repostNotificationTemplate({ + notificationGroup, + isRepost: true, + }); + } + if (type === "reply" || type === "mention" || type === "quote") { + return replyNotificationTemplate({ notificationGroup, currentUser }); + } + if (type === "subscribed-post") { + return subscribedPostNotificationTemplate({ notificationGroup }); + } + if (type === "feedgen-like") { + return feedgenLikeNotificationTemplate({ notificationGroup }); + } + if (type === "starterpack-joined") { + return starterpackJoinedNotificationTemplate({ notificationGroup }); + } + if (type === "verified") { + return verifiedNotificationTemplate({ notificationGroup }); + } + if (type === "unverified") { + return unverifiedNotificationTemplate({ notificationGroup }); + } + if (type === "contact-match") { + return contactMatchNotificationTemplate({ notificationGroup }); + } + return html`
+ Unknown notification type: ${type} +
`; + } - function notificationGroupTemplate({ notificationGroup, currentUser }) { - const { type } = notificationGroup; - if (type === "follow" || type === "follow-back") { - return followNotificationTemplate({ notificationGroup }); - } - if (type === "like") { - return likeNotificationTemplate({ notificationGroup }); - } - if (type === "like-via-repost") { - return likeNotificationTemplate({ - notificationGroup, - isRepost: true, - }); - } - if (type === "repost") { - return repostNotificationTemplate({ notificationGroup }); - } - if (type === "repost-via-repost") { - return repostNotificationTemplate({ - notificationGroup, - isRepost: true, - }); - } - if (type === "reply" || type === "mention" || type === "quote") { - return replyNotificationTemplate({ notificationGroup, currentUser }); - } - if (type === "subscribed-post") { - return subscribedPostNotificationTemplate({ notificationGroup }); - } - if (type === "feedgen-like") { - return feedgenLikeNotificationTemplate({ notificationGroup }); - } - if (type === "starterpack-joined") { - return starterpackJoinedNotificationTemplate({ notificationGroup }); - } - if (type === "verified") { - return verifiedNotificationTemplate({ notificationGroup }); - } - if (type === "unverified") { - return unverifiedNotificationTemplate({ notificationGroup }); - } - if (type === "contact-match") { - return contactMatchNotificationTemplate({ notificationGroup }); - } - return html`
- Unknown notification type: ${type} + function notificationsSkeletonTemplate() { + return html` + ${Array.from({ length: 10 }).map(() => postSkeletonTemplate())} + `; + } + + function notificationsErrorTemplate({ error }) { + console.error(error); + return html`
+
There was an error loading notifications.
+ +
`; + } + + function notificationsTemplate({ + groupedNotifications, + hasMore, + currentUser, + loadMore, + }) { + if (groupedNotifications.length === 0) { + return html`
+
No notifications yet!
`; } - - function notificationsSkeletonTemplate() { + try { return html` - ${Array.from({ length: 10 }).map(() => postSkeletonTemplate())} + { + if (hasMore) { + await loadMore(); + e.detail.resume(); + } + }} + > + ${groupedNotifications.map((notificationGroup) => + notificationGroupTemplate({ notificationGroup, currentUser }), + )} + ${!hasMore + ? html`
No more notifications
` + : Array.from({ length: 10 }).map(() => postSkeletonTemplate())} + `; - } - - function notificationsErrorTemplate({ error }) { + } catch (error) { console.error(error); - return html`
-
There was an error loading notifications.
- -
`; - } - - function notificationsTemplate({ - groupedNotifications, - hasMore, - currentUser, - loadMore, - }) { - if (groupedNotifications.length === 0) { - return html`
-
No notifications yet!
-
`; - } - try { - return html` - { - if (hasMore) { - await loadMore(); - e.detail.resume(); - } - }} - > - ${groupedNotifications.map((notificationGroup) => - notificationGroupTemplate({ notificationGroup, currentUser }), - )} - ${!hasMore - ? html`
No more notifications
` - : Array.from({ length: 10 }).map(() => postSkeletonTemplate())} - - `; - } catch (error) { - console.error(error); - return notificationsErrorTemplate({ error }); - } + return notificationsErrorTemplate({ error }); } + } - async function scrollAndReloadNotifications() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - if (state.$activeTab.get() === "all") { - state.$isReloadingNotifications.set(true); - try { - await loadNotifications({ reload: true }); - } finally { - state.$isReloadingNotifications.set(false); - } - } else { - state.$isReloadingMentionNotifications.set(true); - try { - await loadMentionNotifications({ reload: true }); - } finally { - state.$isReloadingMentionNotifications.set(false); - } - } + async function scrollAndReloadNotifications() { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } - - async function handleTabClick(tab) { - if (tab === state.$activeTab.get()) { - scrollAndReloadNotifications(); - return; + if (state.$activeTab.get() === "all") { + state.$isReloadingNotifications.set(true); + try { + await loadNotifications({ reload: true }); + } finally { + state.$isReloadingNotifications.set(false); } - state.$activeTab.set(tab); - window.scrollTo(0, 0); - if ( - tab === "mentions" && - !dataLayer.derived.$mentionNotifications.get() - ) { + } else { + state.$isReloadingMentionNotifications.set(true); + try { await loadMentionNotifications({ reload: true }); + } finally { + state.$isReloadingMentionNotifications.set(false); } } + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); + async function handleTabClick(tab) { + if (tab === state.$activeTab.get()) { scrollAndReloadNotifications(); - }); - - bindPageTitle(root, () => "Notifications"); - - pageEffect(root, () => { - const activeTab = state.$activeTab.get(); - const currentUser = dataLayer.derived.$currentUser.get(); - const notifications = dataLayer.derived.$notifications.get(); - const notificationsRequestStatus = - dataLayer.requests.statusStore.$statuses.get("loadNotifications"); - const groupedNotifications = groupNotificationsByType(notifications); - const cursor = dataLayer.derived.$notificationCursor.get(); - const hasMore = !!cursor; - - const mentionNotifications = - dataLayer.derived.$mentionNotifications.get(); - const mentionNotificationsRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadMentionNotifications", - ); - const groupedMentionNotifications = - groupNotificationsByType(mentionNotifications); - const mentionCursor = dataLayer.derived.$mentionNotificationCursor.get(); - const mentionHasMore = !!mentionCursor; - - const isLoading = - activeTab === "all" - ? notificationsRequestStatus.loading && - state.$isReloadingNotifications.get() && - !!notifications - : mentionNotificationsRequestStatus.loading && - state.$isReloadingMentionNotifications.get() && - !!mentionNotifications; - - render( - html`
- ${headerTemplate({ - title: "Notifications", - showLoadingSpinner: isLoading, - leftButton: "menu", - onClickMenuButton: handleMenuClick, - bottomItemTemplate: () => html` - handleTabClick(event.detail)} - > - `, - })} -
-
- ${(() => { - if (notificationsRequestStatus.error) { - return notificationsErrorTemplate({ - error: notificationsRequestStatus.error, - }); - } else if (groupedNotifications) { - return notificationsTemplate({ - groupedNotifications, - currentUser, - hasMore, - loadMore: loadNotifications, - }); - } else { - return notificationsSkeletonTemplate(); - } - })()} -
-
- ${(() => { - if (mentionNotificationsRequestStatus.error) { - return notificationsErrorTemplate({ - error: mentionNotificationsRequestStatus.error, - }); - } else if (groupedMentionNotifications) { - return notificationsTemplate({ - groupedNotifications: groupedMentionNotifications, - currentUser, - hasMore: mentionHasMore, - loadMore: loadMentionNotifications, - }); - } else if (activeTab === "mentions") { - return notificationsSkeletonTemplate(); - } else { - return ""; - } - })()} -
-
- ${currentUser - ? floatingComposeButtonTemplate({ - onClick: () => postComposerService.composePost({ currentUser }), - }) - : ""} -
`, - root, - ); - }); - - async function loadNotifications({ reload = false } = {}) { - await dataLayer.requests.loadNotifications({ - reload, - limit: NOTIFICATIONS_PAGE_SIZE, - }); - // can be called async - notificationService.markNotificationsAsRead(); + return; } - - async function loadMentionNotifications({ reload = false } = {}) { - await dataLayer.requests.loadMentionNotifications({ - reload, - limit: NOTIFICATIONS_PAGE_SIZE, - }); + state.$activeTab.set(tab); + window.scrollTo(0, 0); + if (tab === "mentions" && !dataLayer.derived.$mentionNotifications.get()) { + await loadMentionNotifications({ reload: true }); } + } - root.addEventListener("page-enter", async () => { - await loadNotifications({ reload: true }); + bindToPage(root, layout, "active-nav-click", (event) => { + event.preventDefault(); + scrollAndReloadNotifications(); + }); + + bindPageTitle(root, () => "Notifications"); + + pageEffect(root, () => { + const activeTab = state.$activeTab.get(); + const currentUser = dataLayer.derived.$currentUser.get(); + const notifications = dataLayer.derived.$notifications.get(); + const notificationsRequestStatus = + dataLayer.requests.statusStore.$statuses.get("loadNotifications"); + const groupedNotifications = groupNotificationsByType(notifications); + const cursor = dataLayer.derived.$notificationCursor.get(); + const hasMore = !!cursor; + + const mentionNotifications = dataLayer.derived.$mentionNotifications.get(); + const mentionNotificationsRequestStatus = + dataLayer.requests.statusStore.$statuses.get("loadMentionNotifications"); + const groupedMentionNotifications = + groupNotificationsByType(mentionNotifications); + const mentionCursor = dataLayer.derived.$mentionNotificationCursor.get(); + const mentionHasMore = !!mentionCursor; + + const isLoading = + activeTab === "all" + ? notificationsRequestStatus.loading && + state.$isReloadingNotifications.get() && + !!notifications + : mentionNotificationsRequestStatus.loading && + state.$isReloadingMentionNotifications.get() && + !!mentionNotifications; + + render( + html`
+ ${headerTemplate({ + title: "Notifications", + showLoadingSpinner: isLoading, + leftButton: "menu", + onClickMenuButton: handleMenuClick, + bottomItemTemplate: () => html` + handleTabClick(event.detail)} + > + `, + })} +
+
+ ${(() => { + if (notificationsRequestStatus.error) { + return notificationsErrorTemplate({ + error: notificationsRequestStatus.error, + }); + } else if (groupedNotifications) { + return notificationsTemplate({ + groupedNotifications, + currentUser, + hasMore, + loadMore: loadNotifications, + }); + } else { + return notificationsSkeletonTemplate(); + } + })()} +
+
+ ${(() => { + if (mentionNotificationsRequestStatus.error) { + return notificationsErrorTemplate({ + error: mentionNotificationsRequestStatus.error, + }); + } else if (groupedMentionNotifications) { + return notificationsTemplate({ + groupedNotifications: groupedMentionNotifications, + currentUser, + hasMore: mentionHasMore, + loadMore: loadMentionNotifications, + }); + } else if (activeTab === "mentions") { + return notificationsSkeletonTemplate(); + } else { + return ""; + } + })()} +
+
+ ${currentUser + ? floatingComposeButtonTemplate({ + onClick: () => postComposerService.composePost({ currentUser }), + }) + : ""} +
`, + root, + ); + }); + + async function loadNotifications({ reload = false } = {}) { + await dataLayer.requests.loadNotifications({ + reload, + limit: NOTIFICATIONS_PAGE_SIZE, }); + // can be called async + notificationService.markNotificationsAsRead(); + } - root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; - if (scrollY <= 200) { - await loadNotifications({ reload: true }); - } + async function loadMentionNotifications({ reload = false } = {}) { + await dataLayer.requests.loadMentionNotifications({ + reload, + limit: NOTIFICATIONS_PAGE_SIZE, }); } -} -export default new NotificationsView(); + root.addEventListener("page-enter", async () => { + await loadNotifications({ reload: true }); + }); + + root.addEventListener("page-restore", async (e) => { + const scrollY = e.detail?.scrollY ?? 0; + if (scrollY <= 200) { + await loadNotifications({ reload: true }); + } + }); +} diff --git a/src/js/views/pluginPage.view.js b/src/js/views/pluginPage.view.js index 4b327c57..f6460841 100644 --- a/src/js/views/pluginPage.view.js +++ b/src/js/views/pluginPage.view.js @@ -1,106 +1,102 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { Signal, ReactiveStore } from "/js/signals.js"; import "/js/components/plugin-custom-content.js"; -class PluginPageView extends View { - async render({ root, router, layout, params, context: { pluginService } }) { - await auth.requireAuth(); +export default async function pluginPageView({ + root, + router, + layout, + params, + context: { pluginService }, +}) { + await auth.requireAuth(); - const { pluginId, pageId } = params; + const { pluginId, pageId } = params; - const state = new ReactiveStore("pluginPageView"); - state.$pluginDetails = new Signal.Computed(() => { - const installed = pluginService.$installedPlugins - .get() - .find((plugin) => plugin.id === pluginId); - return installed ?? null; - }); + const state = new ReactiveStore("pluginPageView"); + state.$pluginDetails = new Signal.Computed(() => { + const installed = pluginService.$installedPlugins + .get() + .find((plugin) => plugin.id === pluginId); + return installed ?? null; + }); - state.$page = new Signal.Computed(() => - pluginService.getPage(pluginId, pageId), - ); - state.$loadStatus = new Signal.Computed(() => - pluginService.getPluginLoadStatus(pluginId), - ); + state.$page = new Signal.Computed(() => + pluginService.getPage(pluginId, pageId), + ); + state.$loadStatus = new Signal.Computed(() => + pluginService.getPluginLoadStatus(pluginId), + ); - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/plugins/installed"); - }); + bindPageTitle(root, () => { + const page = state.$page.get(); + if (page?.title) return page.title; + return state.$pluginDetails.get()?.name ?? null; + }); - bindPageTitle(root, () => { - const page = state.$page.get(); - if (page?.title) return page.title; - return state.$pluginDetails.get()?.name ?? null; - }); - - pageEffect(root, () => { - const pluginDetails = state.$pluginDetails.get(); - const page = state.$page.get(); - const { loading: pluginLoading, error: pluginLoadError } = - state.$loadStatus.get(); - render( - html`
- ${headerTemplate({ - title: page?.title ?? pluginDetails?.name ?? pluginId, - backButtonFallbackRoute: "/plugins/installed", - })} -
- ${(() => { - if (!pluginDetails) { - return html`

- Plugin not found. -

`; - } - if (!pluginDetails.enabled) { - return html`

- This plugin is not enabled. -

`; + pageEffect(root, () => { + const pluginDetails = state.$pluginDetails.get(); + const page = state.$page.get(); + const { loading: pluginLoading, error: pluginLoadError } = + state.$loadStatus.get(); + render( + html`
+ ${headerTemplate({ + title: page?.title ?? pluginDetails?.name ?? pluginId, + backButtonFallbackRoute: "/plugins/installed", + })} +
+ ${(() => { + if (!pluginDetails) { + return html`

+ Plugin not found. +

`; + } + if (!pluginDetails.enabled) { + return html`

+ This plugin is not enabled. +

`; + } + if (pluginLoadError) { + return html`

+ ${pluginLoadError.message ?? "This plugin failed to load."} +

`; + } + if (!page) { + if (pluginLoading) { + return html`
+ +
`; } - if (pluginLoadError) { - return html`

- ${pluginLoadError.message ?? "This plugin failed to load."} -

`; - } - if (!page) { - if (pluginLoading) { - return html`
- -
`; - } - return html`

- Page not found. -

`; - } - return html`
- -
`; - })()} -
-
`, - root, - ); - }); - } + return html`

+ Page not found. +

`; + } + return html`
+ +
`; + })()} +
+
`, + root, + ); + }); } - -export default new PluginPageView(); diff --git a/src/js/views/pluginSettings.view.js b/src/js/views/pluginSettings.view.js index b87169b7..6a129109 100644 --- a/src/js/views/pluginSettings.view.js +++ b/src/js/views/pluginSettings.view.js @@ -1,105 +1,101 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { Signal, ReactiveStore } from "/js/signals.js"; import "/js/components/plugin-custom-content.js"; -class PluginSettingsView extends View { - async render({ root, router, layout, params, context: { pluginService } }) { - await auth.requireAuth(); +export default async function pluginSettingsView({ + root, + router, + layout, + params, + context: { pluginService }, +}) { + await auth.requireAuth(); - const { pluginId } = params; + const { pluginId } = params; - const state = new ReactiveStore("pluginSettingsView"); - state.$pluginDetails = new Signal.Computed(() => { - const installed = pluginService.$installedPlugins - .get() - .find((plugin) => plugin.id === pluginId); - return installed ?? null; - }); + const state = new ReactiveStore("pluginSettingsView"); + state.$pluginDetails = new Signal.Computed(() => { + const installed = pluginService.$installedPlugins + .get() + .find((plugin) => plugin.id === pluginId); + return installed ?? null; + }); - state.$settingTab = new Signal.Computed(() => { - const tab = pluginService.$settingTabs.get(pluginId); - return tab ?? null; - }); - state.$loadStatus = new Signal.Computed(() => - pluginService.getPluginLoadStatus(pluginId), - ); - - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/plugins/installed"); - }); + state.$settingTab = new Signal.Computed(() => { + const tab = pluginService.$settingTabs.get(pluginId); + return tab ?? null; + }); + state.$loadStatus = new Signal.Computed(() => + pluginService.getPluginLoadStatus(pluginId), + ); - bindPageTitle(root, () => { - return state.$pluginDetails.get()?.name ?? null; - }); + bindPageTitle(root, () => { + return state.$pluginDetails.get()?.name ?? null; + }); - pageEffect(root, () => { - const pluginDetails = state.$pluginDetails.get(); - const settingTab = state.$settingTab.get(); - const { loading: pluginLoading, error: pluginLoadError } = - state.$loadStatus.get(); - render( - html`
- ${headerTemplate({ - title: pluginDetails?.name ?? pluginId, - backButtonFallbackRoute: "/plugins/installed", - })} -
- ${(() => { - if (!pluginDetails) { - return html`

- Plugin not found. -

`; - } - if (!pluginDetails.enabled) { - return html`

- This plugin is not enabled. -

`; - } - if (pluginLoadError) { - return html`

- ${pluginLoadError.message ?? "This plugin failed to load."} -

`; + pageEffect(root, () => { + const pluginDetails = state.$pluginDetails.get(); + const settingTab = state.$settingTab.get(); + const { loading: pluginLoading, error: pluginLoadError } = + state.$loadStatus.get(); + render( + html`
+ ${headerTemplate({ + title: pluginDetails?.name ?? pluginId, + backButtonFallbackRoute: "/plugins/installed", + })} +
+ ${(() => { + if (!pluginDetails) { + return html`

+ Plugin not found. +

`; + } + if (!pluginDetails.enabled) { + return html`

+ This plugin is not enabled. +

`; + } + if (pluginLoadError) { + return html`

+ ${pluginLoadError.message ?? "This plugin failed to load."} +

`; + } + if (!settingTab) { + if (pluginLoading) { + return html`
+ +
`; } - if (!settingTab) { - if (pluginLoading) { - return html`
- -
`; - } - return html`

- This plugin has no settings. -

`; - } - return html`
- -
`; - })()} -
-
`, - root, - ); - }); - } + return html`

+ This plugin has no settings. +

`; + } + return html`
+ +
`; + })()} +
+
`, + root, + ); + }); } - -export default new PluginSettingsView(); diff --git a/src/js/views/postLikes.view.js b/src/js/views/postLikes.view.js index 923e8e0a..d17d6ba6 100644 --- a/src/js/views/postLikes.view.js +++ b/src/js/views/postLikes.view.js @@ -1,109 +1,100 @@ import { html, render } from "/js/lib/lit-html.js"; -import { View } from "/js/views/view.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { formatLargeNumber } from "/js/utils.js"; import "/js/components/infinite-scroll-container.js"; -class PostLikesView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - isAuthenticated, - interactionHandlers, - pluginService, - }, - }) { - const { handleOrDid, rkey } = params; +export default async function postLikesView({ + root, + params, + context: { + dataLayer, + identityResolver, + isAuthenticated, + interactionHandlers, + pluginService, + }, +}) { + const { handleOrDid, rkey } = params; - let authorDid = null; - if (handleOrDid.startsWith("did:")) { - authorDid = handleOrDid; - } else { - authorDid = await identityResolver.resolveHandle(handleOrDid); - } - const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; + let authorDid = null; + if (handleOrDid.startsWith("did:")) { + authorDid = handleOrDid; + } else { + authorDid = await identityResolver.resolveHandle(handleOrDid); + } + const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; - function likesErrorTemplate({ error }) { - console.error(error); - return html`
-
Error loading likes
- -
`; - } + function likesErrorTemplate({ error }) { + console.error(error); + return html`
+
Error loading likes
+ +
`; + } - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const postLikes = dataLayer.derived.$postLikes.get(postUri); - const post = dataLayer.derived.$hydratedPosts.get(postUri); - const postLikesRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadPostLikes-" + postUri, - ); - const hasMore = postLikes?.cursor ? true : false; + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const postLikes = dataLayer.derived.$postLikes.get(postUri); + const post = dataLayer.derived.$hydratedPosts.get(postUri); + const postLikesRequestStatus = dataLayer.requests.statusStore.$statuses.get( + "loadPostLikes-" + postUri, + ); + const hasMore = postLikes?.cursor ? true : false; - const subtitle = post?.likeCount - ? `${formatLargeNumber(post.likeCount)} ${ - post.likeCount === 1 ? "like" : "likes" - }` - : null; + const subtitle = post?.likeCount + ? `${formatLargeNumber(post.likeCount)} ${ + post.likeCount === 1 ? "like" : "likes" + }` + : null; - render( - html`
- ${headerTemplate({ - title: "Liked by", - subtitle, - })} -
- ${(() => { - if (postLikesRequestStatus.error) { - return likesErrorTemplate({ - error: postLikesRequestStatus.error, - }); - } - return profileFeedTemplate({ - profiles: postLikes?.likes?.map((like) => like.actor) ?? null, - hasMore, - onLoadMore: loadLikes, - emptyMessage: "No likes yet.", - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler: - interactionHandlers.profileInteractionHandler, - pluginService, + render( + html`
+ ${headerTemplate({ + title: "Liked by", + subtitle, + })} +
+ ${(() => { + if (postLikesRequestStatus.error) { + return likesErrorTemplate({ + error: postLikesRequestStatus.error, }); - })()} -
-
`, - root, - ); - }); - - bindPageTitle(root, () => "Liked by"); + } + return profileFeedTemplate({ + profiles: postLikes?.likes?.map((like) => like.actor) ?? null, + hasMore, + onLoadMore: loadLikes, + emptyMessage: "No likes yet.", + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler: + interactionHandlers.profileInteractionHandler, + pluginService, + }); + })()} +
+
`, + root, + ); + }); - async function loadLikes() { - const postLikes = dataLayer.derived.$postLikes.get(postUri); - const cursor = postLikes?.cursor; - await dataLayer.requests.loadPostLikes(postUri, { cursor }); - } + bindPageTitle(root, () => "Liked by"); - root.addEventListener("page-enter", async () => { - // Load the post thread to get the post like count - dataLayer.declarative.ensurePostThread(postUri); - await loadLikes(); - }); + async function loadLikes({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$postLikes.get(postUri)?.cursor; + await dataLayer.requests.loadPostLikes(postUri, { cursor }); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await dataLayer.requests.loadPostLikes(postUri); - }); + function loadPageData() { + dataLayer.requests.loadPostThread(postUri); + loadLikes({ reload: true }); } -} -export default new PostLikesView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/postQuotes.view.js b/src/js/views/postQuotes.view.js index f2d9268c..493b4c94 100644 --- a/src/js/views/postQuotes.view.js +++ b/src/js/views/postQuotes.view.js @@ -1,112 +1,102 @@ import { html, render } from "/js/lib/lit-html.js"; -import { View } from "/js/views/view.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { formatLargeNumber } from "/js/utils.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; -class PostQuotesView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - const { handleOrDid, rkey } = params; +export default async function postQuotesView({ + root, + params, + context: { + dataLayer, + identityResolver, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + const { handleOrDid, rkey } = params; - let authorDid = null; - if (handleOrDid.startsWith("did:")) { - authorDid = handleOrDid; - } else { - authorDid = await identityResolver.resolveHandle(handleOrDid); - } - const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; - - const { postInteractionHandler } = interactionHandlers; + let authorDid = null; + if (handleOrDid.startsWith("did:")) { + authorDid = handleOrDid; + } else { + authorDid = await identityResolver.resolveHandle(handleOrDid); + } + const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; - function quotesErrorTemplate({ error }) { - console.error(error); - return html`
-
Error loading quotes
- -
`; - } + const { postInteractionHandler } = interactionHandlers; - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const postQuotes = dataLayer.derived.$hydratedPostQuotes.get(postUri); - const post = dataLayer.derived.$hydratedPosts.get(postUri); - const postQuotesRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadPostQuotes-" + postUri, - ); + function quotesErrorTemplate({ error }) { + console.error(error); + return html`
+
Error loading quotes
+ +
`; + } - const subtitle = post?.quoteCount - ? `${formatLargeNumber(post.quoteCount)} ${ - post.quoteCount === 1 ? "quote" : "quotes" - }` - : null; + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const postQuotes = dataLayer.derived.$hydratedPostQuotes.get(postUri); + const post = dataLayer.derived.$hydratedPosts.get(postUri); + const postQuotesRequestStatus = + dataLayer.requests.statusStore.$statuses.get("loadPostQuotes-" + postUri); - // Format as feed for postFeedTemplate - const postQuotesFeed = postQuotes - ? { - feed: postQuotes.posts.map((quote) => ({ post: quote })), - cursor: postQuotes.cursor, - } - : null; + const subtitle = post?.quoteCount + ? `${formatLargeNumber(post.quoteCount)} ${ + post.quoteCount === 1 ? "quote" : "quotes" + }` + : null; - render( - html`
- ${headerTemplate({ - title: "Quotes", - subtitle, - })} -
- ${postQuotesRequestStatus.error - ? quotesErrorTemplate({ - error: postQuotesRequestStatus.error, - }) - : postFeedTemplate({ - feed: postQuotesFeed, - currentUser, - isAuthenticated, - onLoadMore: loadQuotes, - postInteractionHandler, - emptyMessage: "No quotes yet.", - pluginService, - })} -
-
`, - root, - ); - }); + // Format as feed for postFeedTemplate + const postQuotesFeed = postQuotes + ? { + feed: postQuotes.posts.map((quote) => ({ post: quote })), + cursor: postQuotes.cursor, + } + : null; - bindPageTitle(root, () => "Quoted by"); + render( + html`
+ ${headerTemplate({ + title: "Quotes", + subtitle, + })} +
+ ${postQuotesRequestStatus.error + ? quotesErrorTemplate({ + error: postQuotesRequestStatus.error, + }) + : postFeedTemplate({ + feed: postQuotesFeed, + currentUser, + isAuthenticated, + onLoadMore: loadQuotes, + postInteractionHandler, + emptyMessage: "No quotes yet.", + pluginService, + })} +
+
`, + root, + ); + }); - async function loadQuotes() { - const postQuotes = dataLayer.derived.$hydratedPostQuotes.get(postUri); - const cursor = postQuotes?.cursor; - await dataLayer.requests.loadPostQuotes(postUri, { cursor }); - } + bindPageTitle(root, () => "Quoted by"); - root.addEventListener("page-enter", async () => { - // Load the post thread to get the post quote count - dataLayer.declarative.ensurePostThread(postUri); - await loadQuotes(); - }); + async function loadQuotes({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$hydratedPostQuotes.get(postUri)?.cursor; + await dataLayer.requests.loadPostQuotes(postUri, { cursor }); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await dataLayer.requests.loadPostQuotes(postUri); - }); + function loadPageData() { + dataLayer.requests.loadPostThread(postUri); + loadQuotes({ reload: true }); } -} -export default new PostQuotesView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/postReposts.view.js b/src/js/views/postReposts.view.js index 2ecfd88f..f9abee74 100644 --- a/src/js/views/postReposts.view.js +++ b/src/js/views/postReposts.view.js @@ -1,108 +1,100 @@ import { html, render } from "/js/lib/lit-html.js"; -import { View } from "/js/views/view.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { formatLargeNumber } from "/js/utils.js"; import "/js/components/infinite-scroll-container.js"; -class PostRepostsView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - isAuthenticated, - interactionHandlers, - pluginService, - }, - }) { - const { handleOrDid, rkey } = params; +export default async function postRepostsView({ + root, + params, + context: { + dataLayer, + identityResolver, + isAuthenticated, + interactionHandlers, + pluginService, + }, +}) { + const { handleOrDid, rkey } = params; - let authorDid = null; - if (handleOrDid.startsWith("did:")) { - authorDid = handleOrDid; - } else { - authorDid = await identityResolver.resolveHandle(handleOrDid); - } - const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; - - function repostsErrorTemplate({ error }) { - console.error(error); - return html`
-
Error loading reposts
- -
`; - } + let authorDid = null; + if (handleOrDid.startsWith("did:")) { + authorDid = handleOrDid; + } else { + authorDid = await identityResolver.resolveHandle(handleOrDid); + } + const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const postReposts = dataLayer.derived.$postReposts.get(postUri); - const post = dataLayer.derived.$hydratedPosts.get(postUri); - const postRepostsRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadPostReposts-" + postUri, - ); - const hasMore = postReposts?.cursor ? true : false; - const subtitle = post?.repostCount - ? `${formatLargeNumber(post.repostCount)} ${ - post.repostCount === 1 ? "repost" : "reposts" - }` - : null; + function repostsErrorTemplate({ error }) { + console.error(error); + return html`
+
Error loading reposts
+ +
`; + } - render( - html`
- ${headerTemplate({ - title: "Reposted by", - subtitle, - })} -
- ${(() => { - if (postRepostsRequestStatus.error) { - return repostsErrorTemplate({ - error: postRepostsRequestStatus.error, - }); - } - return profileFeedTemplate({ - profiles: postReposts?.repostedBy ?? null, - hasMore, - onLoadMore: loadReposts, - emptyMessage: "No reposts yet.", - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler: - interactionHandlers.profileInteractionHandler, - pluginService, - }); - })()} -
-
`, - root, + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const postReposts = dataLayer.derived.$postReposts.get(postUri); + const post = dataLayer.derived.$hydratedPosts.get(postUri); + const postRepostsRequestStatus = + dataLayer.requests.statusStore.$statuses.get( + "loadPostReposts-" + postUri, ); - }); + const hasMore = postReposts?.cursor ? true : false; + const subtitle = post?.repostCount + ? `${formatLargeNumber(post.repostCount)} ${ + post.repostCount === 1 ? "repost" : "reposts" + }` + : null; - bindPageTitle(root, () => "Reposted by"); + render( + html`
+ ${headerTemplate({ + title: "Reposted by", + subtitle, + })} +
+ ${(() => { + if (postRepostsRequestStatus.error) { + return repostsErrorTemplate({ + error: postRepostsRequestStatus.error, + }); + } + return profileFeedTemplate({ + profiles: postReposts?.repostedBy ?? null, + hasMore, + onLoadMore: loadReposts, + emptyMessage: "No reposts yet.", + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler: + interactionHandlers.profileInteractionHandler, + pluginService, + }); + })()} +
+
`, + root, + ); + }); - async function loadReposts() { - const postReposts = dataLayer.derived.$postReposts.get(postUri); - const cursor = postReposts?.cursor; - await dataLayer.requests.loadPostReposts(postUri, { cursor }); - } + bindPageTitle(root, () => "Reposted by"); - root.addEventListener("page-enter", async () => { - // Load the post thread to get the post repost count - dataLayer.declarative.ensurePostThread(postUri); - await loadReposts(); - }); + async function loadReposts({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$postReposts.get(postUri)?.cursor; + await dataLayer.requests.loadPostReposts(postUri, { cursor }); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await dataLayer.requests.loadPostReposts(postUri); - }); + function loadPageData() { + dataLayer.requests.loadPostThread(postUri); + loadReposts({ reload: true }); } -} -export default new PostRepostsView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/postThread.view.js b/src/js/views/postThread.view.js index d0e00e2e..f7d9d548 100644 --- a/src/js/views/postThread.view.js +++ b/src/js/views/postThread.view.js @@ -20,650 +20,629 @@ import { } from "/js/dataHelpers.js"; import { lockIconTemplate } from "/js/templates/icons/lockIcon.template.js"; import { ApiError } from "/js/api.js"; -import { View } from "/js/views/view.js"; import "/js/components/hidden-replies-section.js"; import "/js/components/plugin-slot.js"; import { linkToPostFromUri } from "/js/navigation.js"; import { Signal, ReactiveStore } from "/js/signals.js"; -class PostThreadView extends View { - async render({ - root, - router, - params, - context: { - dataLayer, - identityResolver, - postComposerService, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - const { handleOrDid, rkey } = params; - - let authorDid = null; - if (handleOrDid.startsWith("did:")) { - authorDid = handleOrDid; +export default async function postThreadView({ + root, + router, + params, + context: { + dataLayer, + identityResolver, + postComposerService, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + const { handleOrDid, rkey } = params; + + let authorDid = null; + if (handleOrDid.startsWith("did:")) { + authorDid = handleOrDid; + } else { + authorDid = await identityResolver.resolveHandle(handleOrDid); + } + const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; + + const { postInteractionHandler } = interactionHandlers; + + function postThreadErrorTemplate({ error }) { + if ( + error instanceof ApiError && + error.status === 400 && + error.data?.error === "NotFound" + ) { + return html`
+
Post not found
+ +
`; } else { - authorDid = await identityResolver.resolveHandle(handleOrDid); - } - const postUri = `at://${authorDid}/app.bsky.feed.post/${rkey}`; - - const { postInteractionHandler } = interactionHandlers; - - function postThreadErrorTemplate({ error }) { - if ( - error instanceof ApiError && - error.status === 400 && - error.data?.error === "NotFound" - ) { - return html`
-
Post not found
- -
`; - } else { - console.error(error); - return html`
-
Error loading thread
- -
`; - } + console.error(error); + return html`
+
Error loading thread
+ +
`; } + } - function replyHasContentLabel(reply) { - return ( - reply.post.contentLabel && - reply.post.contentLabel.visibility !== "ignore" - ); - } + function replyHasContentLabel(reply) { + return ( + reply.post.contentLabel && reply.post.contentLabel.visibility !== "ignore" + ); + } - function doShowReply(reply) { - const post = reply.post; - if (!post) { - return false; - } - if ( - isBlockedPost(post) || - isNotFoundPost(post) || - isMutedPost(post) || - post.isBlockedReply || - replyHasContentLabel(reply) || - post.isHidden - ) { - return false; - } - if ( - !isAuthenticated && - post.author && - doHideAuthorOnUnauthenticated(post.author) - ) { - return false; - } - return true; + function doShowReply(reply) { + const post = reply.post; + if (!post) { + return false; } - - function getShownReplies(replies) { - return replies.filter((reply) => doShowReply(reply)); + if ( + isBlockedPost(post) || + isNotFoundPost(post) || + isMutedPost(post) || + post.isBlockedReply || + replyHasContentLabel(reply) || + post.isHidden + ) { + return false; } - - function buildReplyChain(post) { - const chain = [post]; - let currentPost = post; - while (currentPost.replies && currentPost.replies.length > 0) { - // get most liked reply - const shownReplies = getShownReplies(currentPost.replies); - if (shownReplies.length > 0) { - const mostLikedReply = maxBy(shownReplies, (reply) => - getLikesWithoutUser(reply.post), - ); - chain.push(mostLikedReply); - currentPost = mostLikedReply; - } else { - break; - } - } - return chain; + if ( + !isAuthenticated && + post.author && + doHideAuthorOnUnauthenticated(post.author) + ) { + return false; } + return true; + } - // Get likes without the user's like, so that liking posts doesn't affect the order of the replies. - function getLikesWithoutUser(post) { - const likeCount = post.likeCount; - return !!post.viewer?.like ? likeCount - 1 : likeCount; - } + function getShownReplies(replies) { + return replies.filter((reply) => doShowReply(reply)); + } - function buildReplyChains(replies, postAuthor) { - const replyChains = []; - for (const reply of replies) { - if (doShowReply(reply)) { - replyChains.push(buildReplyChain(reply)); - } - } - let sortedReplyChains = sortBy( - replyChains, - (chain) => getLikesWithoutUser(chain[0].post), - { - direction: "desc", - }, - ); - // Put replies by the post author first - if (postAuthor) { - sortedReplyChains = [ - ...sortedReplyChains.filter( - (chain) => chain[0].post.author?.did === postAuthor.did, - ), - ...sortedReplyChains.filter( - (chain) => chain[0].post.author?.did !== postAuthor.did, - ), - ]; - } - // If there's a recent reply from the user, put it at the top - const recentReplyFromUser = sortedReplyChains.find( - (chain) => chain[0].post.viewer?.priorityReply, - ); - if (recentReplyFromUser) { - sortedReplyChains = [ - recentReplyFromUser, - ...sortedReplyChains.filter((chain) => chain !== recentReplyFromUser), - ]; + function buildReplyChain(post) { + const chain = [post]; + let currentPost = post; + while (currentPost.replies && currentPost.replies.length > 0) { + // get most liked reply + const shownReplies = getShownReplies(currentPost.replies); + if (shownReplies.length > 0) { + const mostLikedReply = maxBy(shownReplies, (reply) => + getLikesWithoutUser(reply.post), + ); + chain.push(mostLikedReply); + currentPost = mostLikedReply; + } else { + break; } - return sortedReplyChains; } + return chain; + } - function getReplyContext(replyIndex, numReplies) { - if (numReplies === 1) { - return null; - } - if (replyIndex === 0) { - return "root"; - } else if (replyIndex === numReplies - 1) { - return "reply"; + // Get likes without the user's like, so that liking posts doesn't affect the order of the replies. + function getLikesWithoutUser(post) { + const likeCount = post.likeCount; + return !!post.viewer?.like ? likeCount - 1 : likeCount; + } + + function buildReplyChains(replies, postAuthor) { + const replyChains = []; + for (const reply of replies) { + if (doShowReply(reply)) { + replyChains.push(buildReplyChain(reply)); } - return "parent"; } - - function replyChainTemplate({ replyChain, currentUser, lazyLoadImages }) { - const numReplies = replyChain.length; - return html`
- ${replyChain.map((reply, i) => { - const post = reply.post; - if (!post) return ""; - return smallPostTemplate({ - post, - currentUser, - isAuthenticated, - isUserPost: currentUser?.did === post.author?.did, - postInteractionHandler, - replyContext: getReplyContext(i, numReplies), - lazyLoadImages, - pluginService, - }); - })} -
`; + let sortedReplyChains = sortBy( + replyChains, + (chain) => getLikesWithoutUser(chain[0].post), + { + direction: "desc", + }, + ); + // Put replies by the post author first + if (postAuthor) { + sortedReplyChains = [ + ...sortedReplyChains.filter( + (chain) => chain[0].post.author?.did === postAuthor.did, + ), + ...sortedReplyChains.filter( + (chain) => chain[0].post.author?.did !== postAuthor.did, + ), + ]; } + // If there's a recent reply from the user, put it at the top + const recentReplyFromUser = sortedReplyChains.find( + (chain) => chain[0].post.viewer?.priorityReply, + ); + if (recentReplyFromUser) { + sortedReplyChains = [ + recentReplyFromUser, + ...sortedReplyChains.filter((chain) => chain !== recentReplyFromUser), + ]; + } + return sortedReplyChains; + } - async function handleClickReply(post, replyRoot, currentUser) { - await postComposerService.composePost({ - currentUser, - replyTo: post, - replyRoot, - }); + function getReplyContext(replyIndex, numReplies) { + if (numReplies === 1) { + return null; } + if (replyIndex === 0) { + return "root"; + } else if (replyIndex === numReplies - 1) { + return "reply"; + } + return "parent"; + } - // Note, this is different from hiding a reply entirely, that's why this name is weirdly specific. - // Things shown here will also need to be filtered out from the reply chain separately (doShowReply()) - function doPutReplyInHiddenSection(reply) { - if (!reply.post) { - return false; - } - if (isMutedPost(reply.post) || replyHasContentLabel(reply)) { - return true; - } - // If the post author blocked the replier, put the reply in the hidden section - if (reply.post.isBlockedReply) { - return true; - } - // Replies can be marked as hidden by bsky sentiment analysis (app.bsky.unspecced.getPostThreadOtherV2) - if (reply.post.isHidden) { - return true; - } + function replyChainTemplate({ replyChain, currentUser, lazyLoadImages }) { + const numReplies = replyChain.length; + return html`
+ ${replyChain.map((reply, i) => { + const post = reply.post; + if (!post) return ""; + return smallPostTemplate({ + post, + currentUser, + isAuthenticated, + isUserPost: currentUser?.did === post.author?.did, + postInteractionHandler, + replyContext: getReplyContext(i, numReplies), + lazyLoadImages, + pluginService, + }); + })} +
`; + } + + async function handleClickReply(post, replyRoot, currentUser) { + await postComposerService.composePost({ + currentUser, + replyTo: post, + replyRoot, + }); + } + + // Note, this is different from hiding a reply entirely, that's why this name is weirdly specific. + // Things shown here will also need to be filtered out from the reply chain separately (doShowReply()) + function doPutReplyInHiddenSection(reply) { + if (!reply.post) { return false; } + if (isMutedPost(reply.post) || replyHasContentLabel(reply)) { + return true; + } + // If the post author blocked the replier, put the reply in the hidden section + if (reply.post.isBlockedReply) { + return true; + } + // Replies can be marked as hidden by bsky sentiment analysis (app.bsky.unspecced.getPostThreadOtherV2) + if (reply.post.isHidden) { + return true; + } + return false; + } - function postThreadRepliesTemplate({ replies, postAuthor, currentUser }) { - const hiddenSectionReplies = replies.filter((reply) => - doPutReplyInHiddenSection(reply), - ); - const replyChains = buildReplyChains(replies, postAuthor); - const isEmpty = - replyChains.length === 0 && hiddenSectionReplies.length === 0; - return html` -
- ${isEmpty - ? html` + doPutReplyInHiddenSection(reply), + ); + const replyChains = buildReplyChains(replies, postAuthor); + const isEmpty = + replyChains.length === 0 && hiddenSectionReplies.length === 0; + return html` +
+ ${isEmpty + ? html`` + : html`` - : html` -
- ${replyChains.map((replyChain, i) => - // there can be a lot of images in a reply chain, so lazy load them after the first few - replyChainTemplate({ - replyChain, - currentUser, - lazyLoadImages: i > 20, - }), - )} -
- ${hiddenSectionReplies.length > 0 - ? html` - ${hiddenSectionReplies.map((reply) => - smallPostTemplate({ - post: reply.post, - currentUser, - isAuthenticated, - isUserPost: - currentUser?.did === reply.post?.author?.did, - postInteractionHandler, - ignoreContentWarning: true, - ignoreMuteWarning: true, - lazyLoadImages: true, - pluginService, - }), - )} - ` - : ""} `} - -
-
- `; - } + > +
+ ${replyChains.map((replyChain, i) => + // there can be a lot of images in a reply chain, so lazy load them after the first few + replyChainTemplate({ + replyChain, + currentUser, + lazyLoadImages: i > 20, + }), + )} +
+ ${hiddenSectionReplies.length > 0 + ? html` + ${hiddenSectionReplies.map((reply) => + smallPostTemplate({ + post: reply.post, + currentUser, + isAuthenticated, + isUserPost: + currentUser?.did === reply.post?.author?.did, + postInteractionHandler, + ignoreContentWarning: true, + ignoreMuteWarning: true, + lazyLoadImages: true, + pluginService, + }), + )} + ` + : ""} `} + +
+
+ `; + } - function repliesSkeletonTemplate({ numReplies }) { - return html` -
- ${Array.from({ length: Math.min(numReplies, 10) }).map(() => - postSkeletonTemplate(), - )} -
- `; - } + function repliesSkeletonTemplate({ numReplies }) { + return html` +
+ ${Array.from({ length: Math.min(numReplies, 10) }).map(() => + postSkeletonTemplate(), + )} +
+ `; + } - const NO_UNAUTHENTICATED_MESSAGE = - "This author has chosen to make their posts visible only to people who are signed in."; + const NO_UNAUTHENTICATED_MESSAGE = + "This author has chosen to make their posts visible only to people who are signed in."; - function noUnauthenticatedSmallPostTemplate({ replyContext = null } = {}) { - return html`
-
-
- ${replyContext === "parent" || replyContext === "reply" - ? html`
` - : ""} -
${lockIconTemplate()}
- ${replyContext === "root" || replyContext === "parent" - ? html`
-
-
` - : ""} -
-
-
- ${NO_UNAUTHENTICATED_MESSAGE} -
-
-
-
`; - } - - function noUnauthenticatedLargePostTemplate() { - return html`
-
+ function noUnauthenticatedSmallPostTemplate({ replyContext = null } = {}) { + return html`
+
+
+ ${replyContext === "parent" || replyContext === "reply" + ? html`
` + : ""}
${lockIconTemplate()}
-
-
-
+ ${replyContext === "root" || replyContext === "parent" + ? html`
+
+
` + : ""} +
+
+
+ ${NO_UNAUTHENTICATED_MESSAGE}
-
- ${NO_UNAUTHENTICATED_MESSAGE} +
+
`; + } + + function noUnauthenticatedLargePostTemplate() { + return html`
+
+
${lockIconTemplate()}
+
+
+
-
`; - } +
+
+ ${NO_UNAUTHENTICATED_MESSAGE} +
+
`; + } - function threadTemplate({ postThread, currentUser }) { - try { - const mainPost = isEmptyPost(postThread) ? postThread : postThread.post; - const parents = flattenParents(postThread); - // A post might still have a parent even if it isn't loaded by the appview - - // this happens if the client has malformed reply refs. - const replyParent = mainPost?.record?.reply?.parent; - const hasParent = !!replyParent; - // Don't set this to true unless the full post thread has loaded - const hasBrokenReplyRef = - hasParent && !postThread.__isPrefill && parents.length === 0; - const root = getReplyRootFromPost(mainPost); - const replies = postThread.replies; - const postAuthor = mainPost?.author; - const hiddenUnauthenticated = - !isAuthenticated && - mainPost?.author && - doHideAuthorOnUnauthenticated(mainPost.author); - return html` -
- - ${parents.map((parent, i) => { - const parentPost = parent.post ? parent.post : parent; - const replyContext = i === 0 ? "root" : "parent"; - if ( - !isAuthenticated && - parentPost.author && - doHideAuthorOnUnauthenticated(parentPost.author) - ) { - return noUnauthenticatedSmallPostTemplate({ replyContext }); - } - return mutedParentToggleTemplate({ + function threadTemplate({ postThread, currentUser }) { + try { + const mainPost = isEmptyPost(postThread) ? postThread : postThread.post; + const parents = flattenParents(postThread); + // A post might still have a parent even if it isn't loaded by the appview - + // this happens if the client has malformed reply refs. + const replyParent = mainPost?.record?.reply?.parent; + const hasParent = !!replyParent; + // Don't set this to true unless the full post thread has loaded + const hasBrokenReplyRef = + hasParent && !postThread.__isPrefill && parents.length === 0; + const root = getReplyRootFromPost(mainPost); + const replies = postThread.replies; + const postAuthor = mainPost?.author; + const hiddenUnauthenticated = + !isAuthenticated && + mainPost?.author && + doHideAuthorOnUnauthenticated(mainPost.author); + return html` +
+ + ${parents.map((parent, i) => { + const parentPost = parent.post ? parent.post : parent; + const replyContext = i === 0 ? "root" : "parent"; + if ( + !isAuthenticated && + parentPost.author && + doHideAuthorOnUnauthenticated(parentPost.author) + ) { + return noUnauthenticatedSmallPostTemplate({ replyContext }); + } + return mutedParentToggleTemplate({ + post: parentPost, + children: smallPostTemplate({ post: parentPost, - children: smallPostTemplate({ - post: parentPost, + currentUser, + isAuthenticated, + isUserPost: currentUser?.did === parentPost.author?.did, + postInteractionHandler, + replyContext, + ignoreMuteWarning: true, + pluginService, + }), + }); + })} + ${hasBrokenReplyRef + ? html`
+
+
+
+ Load parent post +
` + : ""} + +
+ ${hiddenUnauthenticated + ? noUnauthenticatedLargePostTemplate() + : largePostTemplate({ + post: mainPost, currentUser, isAuthenticated, - isUserPost: currentUser?.did === parentPost.author?.did, - postInteractionHandler, - replyContext, - ignoreMuteWarning: true, pluginService, - }), - }); - })} - ${hasBrokenReplyRef - ? html`
-
-
-
- Load parent post -
` - : ""} + isUserPost: currentUser?.did === mainPost?.author?.did, + postInteractionHandler, + afterHide: () => { + // if the main post is hidden, go back to the previous page + router.back(); + }, + afterDelete: () => { + // if the main post is deleted, go back to the previous page + router.back(); + }, + afterBlock: () => { + // if the main post's author is blocked, go back to the previous page + router.back(); + }, + onClickReply: async () => { + await handleClickReply(mainPost, root, currentUser); + }, + replyContext: hasParent ? "reply" : null, + showActions: !postThread.__isEmbeddedPrefill, + })} -
- ${hiddenUnauthenticated - ? noUnauthenticatedLargePostTemplate() - : largePostTemplate({ - post: mainPost, - currentUser, - isAuthenticated, - pluginService, - isUserPost: currentUser?.did === mainPost?.author?.did, - postInteractionHandler, - afterHide: () => { - // if the main post is hidden, go back to the previous page - router.back(); - }, - afterDelete: () => { - // if the main post is deleted, go back to the previous page - router.back(); - }, - afterBlock: () => { - // if the main post's author is blocked, go back to the previous page - router.back(); - }, - onClickReply: async () => { + ${!postThread.__isEmbeddedPrefill && + isAuthenticated && + currentUser && + canReplyToPost(mainPost) + ? html` +
{ await handleClickReply(mainPost, root, currentUser); - }, - replyContext: hasParent ? "reply" : null, - showActions: !postThread.__isEmbeddedPrefill, - })} - - ${!postThread.__isEmbeddedPrefill && - isAuthenticated && - currentUser && - canReplyToPost(mainPost) - ? html` -
{ - await handleClickReply(mainPost, root, currentUser); - }} - > -
- ${avatarTemplate({ - author: currentUser, - clickAction: "none", - })} - - Write your reply - -
+ }} + > +
+ ${avatarTemplate({ + author: currentUser, + clickAction: "none", + })} + + Write your reply +
- ` - : ""} - ${(() => { - if (hiddenUnauthenticated) { - return ""; - } - if (replies) { - return postThreadRepliesTemplate({ - replies, - postAuthor, - currentUser, - }); - } - const numReplies = mainPost?.replyCount; - if (numReplies > 0) { - return repliesSkeletonTemplate({ numReplies }); - } +
+ ` + : ""} + ${(() => { + if (hiddenUnauthenticated) { return ""; - })()} -
+ } + if (replies) { + return postThreadRepliesTemplate({ + replies, + postAuthor, + currentUser, + }); + } + const numReplies = mainPost?.replyCount; + if (numReplies > 0) { + return repliesSkeletonTemplate({ numReplies }); + } + return ""; + })()}
- `; - } catch (error) { - return postThreadErrorTemplate({ error }); - } - } - - function threadSkeletonTemplate() { - return html`
- ${Array.from({ length: 3 }).map(() => { - return postSkeletonTemplate(); - })} -
`; +
+ `; + } catch (error) { + return postThreadErrorTemplate({ error }); } + } - const state = new ReactiveStore("postThreadView"); - - state.$postThread = new Signal.Computed(() => { - const hydratedPostThread = - dataLayer.derived.$hydratedPostThreads.get(postUri); - if (hydratedPostThread) { - return hydratedPostThread; - } - // Prefill with saved post if available - const post = dataLayer.derived.$hydratedPosts.get(postUri); - if (post) { - return { - __isPrefill: true, - post, - parent: null, - replies: null, - }; - } - const embeddedPost = - dataLayer.derived.$hydratedEmbeddedPosts.get(postUri); - if (embeddedPost) { - return { - __isPrefill: true, - __isEmbeddedPrefill: true, - post: embeddedPost, - parent: null, - replies: null, - }; - } - return null; - }); - - bindPageTitle(root, () => { - const postThread = state.$postThread.get(); - const handle = postThread?.post?.author?.handle; - if (handle) { - return `Post by @${handle}`; - } - return null; - }); - - let hasScrolledToLargePost = false; - - // The pin only starts once the full thread has loaded, skip it if the user has already scrolled - let userHasScrolled = false; - const markUserScrolled = () => { - userHasScrolled = true; - }; - bindToPage(root, window, "touchmove", markUserScrolled); - bindToPage(root, window, "wheel", markUserScrolled); - bindToPage(root, window, "keydown", markUserScrolled); - - pageEffect(root, () => { - const postThread = state.$postThread.get(); - const currentUser = dataLayer.derived.$currentUser.get(); - const postThreadRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadPostThread-" + postUri, - ); + function threadSkeletonTemplate() { + return html`
+ ${Array.from({ length: 3 }).map(() => { + return postSkeletonTemplate(); + })} +
`; + } - render( - html`
- ${headerTemplate({ title: "Post" })} -
- ${(() => { - if (postThreadRequestStatus.error) { - return postThreadErrorTemplate({ - error: postThreadRequestStatus.error, - }); - } else if (postThread) { - return threadTemplate({ postThread, currentUser }); - } else { - return threadSkeletonTemplate(); - } - })()} -
-
`, - root, - ); - - // Pin large post on first load - const largePost = root.querySelector(".large-post"); - const header = root.querySelector("header"); - if ( - largePost && - header && - !postThread.__isPrefill && - !hasScrolledToLargePost - ) { - hasScrolledToLargePost = true; - if (!userHasScrolled) { - scrollToLargePost(largePost, header); - } - } - }); + const state = new ReactiveStore("postThreadView"); - function getLargePostPinOffset(largePost, header) { - const headerHeight = header.getBoundingClientRect().height; - return largePost.getBoundingClientRect().top - headerHeight; + state.$postThread = new Signal.Computed(() => { + const hydratedPostThread = + dataLayer.derived.$hydratedPostThreads.get(postUri); + if (hydratedPostThread) { + return hydratedPostThread; } - - // The browser clamps scrolling at the document height, so when there - // isn't enough content below the post to pin it under the header, - // stretch the main section to provide the missing scroll runway. - function ensureScrollRunway(largePost, header) { - const mainSection = root.querySelector(".post-thread-main-section"); - if (!mainSection) { - return; - } - mainSection.style.minHeight = ""; - const targetScrollY = - window.scrollY + getLargePostPinOffset(largePost, header); - const shortfall = - targetScrollY + - window.innerHeight - - document.documentElement.scrollHeight; - if (shortfall > -1) { - const sectionHeight = mainSection.getBoundingClientRect().height; - mainSection.style.minHeight = `${Math.ceil(sectionHeight + shortfall) + 1}px`; + // Prefill with saved post if available + const post = dataLayer.derived.$hydratedPosts.get(postUri); + if (post) { + return { + __isPrefill: true, + post, + parent: null, + replies: null, + }; + } + const embeddedPost = dataLayer.derived.$hydratedEmbeddedPosts.get(postUri); + if (embeddedPost) { + return { + __isPrefill: true, + __isEmbeddedPrefill: true, + post: embeddedPost, + parent: null, + replies: null, + }; + } + return null; + }); + + bindPageTitle(root, () => { + const postThread = state.$postThread.get(); + const handle = postThread?.post?.author?.handle; + if (handle) { + return `Post by @${handle}`; + } + return null; + }); + + let hasScrolledToLargePost = false; + + // The pin only starts once the full thread has loaded, skip it if the user has already scrolled + let userHasScrolled = false; + const markUserScrolled = () => { + userHasScrolled = true; + }; + bindToPage(root, window, "touchmove", markUserScrolled); + bindToPage(root, window, "wheel", markUserScrolled); + bindToPage(root, window, "keydown", markUserScrolled); + + pageEffect(root, () => { + const postThread = state.$postThread.get(); + const currentUser = dataLayer.derived.$currentUser.get(); + const postThreadRequestStatus = + dataLayer.requests.statusStore.$statuses.get("loadPostThread-" + postUri); + + render( + html`
+ ${headerTemplate({ title: "Post" })} +
+ ${(() => { + if (postThreadRequestStatus.error) { + return postThreadErrorTemplate({ + error: postThreadRequestStatus.error, + }); + } else if (postThread) { + return threadTemplate({ postThread, currentUser }); + } else { + return threadSkeletonTemplate(); + } + })()} +
+
`, + root, + ); + + // Pin large post on first load + const largePost = root.querySelector(".large-post"); + const header = root.querySelector("header"); + if ( + largePost && + header && + !postThread.__isPrefill && + !hasScrolledToLargePost + ) { + hasScrolledToLargePost = true; + if (!userHasScrolled) { + scrollToLargePost(largePost, header); } } + }); - function scrollToLargePost(largePost, header) { - ensureScrollRunway(largePost, header); - pinScrollPosition({ - targetY: () => { - const offset = getLargePostPinOffset(largePost, header); - return window.scrollY + offset; - }, - }); - } + function getLargePostPinOffset(largePost, header) { + const headerHeight = header.getBoundingClientRect().height; + return largePost.getBoundingClientRect().top - headerHeight; + } - root.addEventListener("page-enter", async () => { - userHasScrolled = false; - try { - await dataLayer.declarative.ensurePostThread(postUri); - } catch (error) { - // pass - } - }); + // The browser clamps scrolling at the document height, so when there + // isn't enough content below the post to pin it under the header, + // stretch the main section to provide the missing scroll runway. + function ensureScrollRunway(largePost, header) { + const mainSection = root.querySelector(".post-thread-main-section"); + if (!mainSection) { + return; + } + mainSection.style.minHeight = ""; + const targetScrollY = + window.scrollY + getLargePostPinOffset(largePost, header); + const shortfall = + targetScrollY + + window.innerHeight - + document.documentElement.scrollHeight; + if (shortfall > -1) { + const sectionHeight = mainSection.getBoundingClientRect().height; + mainSection.style.minHeight = `${Math.ceil(sectionHeight + shortfall) + 1}px`; + } + } - root.addEventListener("page-restore", async (e) => { - userHasScrolled = false; - const scrollY = e.detail?.scrollY ?? 0; - const isBack = e.detail?.isBack ?? false; - if (isBack) { - window.scrollTo(0, scrollY); - } else { - const largePost = root.querySelector(".large-post"); - const header = root.querySelector("header"); - if (largePost && header) { - scrollToLargePost(largePost, header); - } - } - // Revalidate - await dataLayer.requests.loadPostThread(postUri); + function scrollToLargePost(largePost, header) { + ensureScrollRunway(largePost, header); + pinScrollPosition({ + targetY: () => { + const offset = getLargePostPinOffset(largePost, header); + return window.scrollY + offset; + }, }); } -} -export default new PostThreadView(); + root.addEventListener("page-enter", async () => { + userHasScrolled = false; + // On a revisit the thread is already rendered, so pin it under the header + const largePost = root.querySelector(".large-post"); + const header = root.querySelector("header"); + if (largePost && header) { + scrollToLargePost(largePost, header); + } + try { + await dataLayer.declarative.ensurePostThread(postUri); + } catch (error) { + // pass + } + }); + + root.addEventListener("page-restore", async (e) => { + userHasScrolled = false; + window.scrollTo(0, e.detail?.scrollY ?? 0); + // Revalidate + await dataLayer.requests.loadPostThread(postUri); + }); +} diff --git a/src/js/views/profile.view.js b/src/js/views/profile.view.js index ed329c12..6ee0137e 100644 --- a/src/js/views/profile.view.js +++ b/src/js/views/profile.view.js @@ -5,7 +5,6 @@ import { doHideAuthorOnUnauthenticated, isLabelerProfile, } from "/js/dataHelpers.js"; -import { View } from "/js/views/view.js"; import { profileCardTemplate } from "/js/templates/profileCard.template.js"; import { floatingComposeButtonTemplate } from "/js/templates/floatingComposeButton.template.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; @@ -22,566 +21,564 @@ import { listFeedTemplate } from "/js/templates/listFeed.template.js"; import "/js/components/edit-profile-dialog.js"; import "/js/components/add-to-lists-dialog.js"; -class ProfileView extends View { - async render({ - root, - router, - params, - layout, - context: { - identityResolver, - dataLayer, - postComposerService, - isAuthenticated, - pluginService, - interactionHandlers, - }, - }) { - function getAuthorFeeds({ isCurrentUser, isLabeler }) { - return [ - { feedType: "posts", name: "Posts" }, - isAuthenticated ? { feedType: "replies", name: "Replies" } : null, - isLabeler ? null : { feedType: "media", name: "Media" }, - isCurrentUser ? { feedType: "likes", name: "Likes" } : null, - ].filter(Boolean); - } +export default async function profileView({ + root, + router, + params, + layout, + context: { + identityResolver, + dataLayer, + postComposerService, + isAuthenticated, + pluginService, + interactionHandlers, + }, +}) { + function getAuthorFeeds({ isCurrentUser, isLabeler }) { + return [ + { feedType: "posts", name: "Posts" }, + isAuthenticated ? { feedType: "replies", name: "Replies" } : null, + isLabeler ? null : { feedType: "media", name: "Media" }, + isCurrentUser ? { feedType: "likes", name: "Likes" } : null, + ].filter(Boolean); + } - const state = new ReactiveStore("profileView"); - state.$activeTab = new Signal.State("posts"); + const state = new ReactiveStore("profileView"); + state.$activeTab = new Signal.State("posts"); - const { handleOrDid } = params; - let profileDid = null; - // If no handle or did is provided, use the current user - if (!handleOrDid) { - const currentUser = await dataLayer.declarative.ensureCurrentUser(); - profileDid = currentUser.did; - } else if (handleOrDid.startsWith("did:")) { - profileDid = handleOrDid; - } else { - profileDid = await identityResolver.resolveHandle(handleOrDid); - } + const { handleOrDid } = params; + let profileDid = null; + // If no handle or did is provided, use the current user + if (!handleOrDid) { + const currentUser = await dataLayer.declarative.ensureCurrentUser(); + profileDid = currentUser.did; + } else if (handleOrDid.startsWith("did:")) { + profileDid = handleOrDid; + } else { + profileDid = await identityResolver.resolveHandle(handleOrDid); + } - const { postInteractionHandler, profileInteractionHandler } = - interactionHandlers; + const { postInteractionHandler, profileInteractionHandler } = + interactionHandlers; - async function handleAddToLists(profile) { - const dialog = document.createElement("add-to-lists-dialog"); - dialog.profile = profile; - dialog.dataLayer = dataLayer; - dialog.profileInteractionHandler = profileInteractionHandler; - dialog.addEventListener("dialog-closed", () => { - dialog.remove(); - }); - document.body.appendChild(dialog); - dialog.open(); - } + async function handleAddToLists(profile) { + const dialog = document.createElement("add-to-lists-dialog"); + dialog.profile = profile; + dialog.dataLayer = dataLayer; + dialog.profileInteractionHandler = profileInteractionHandler; + dialog.addEventListener("dialog-closed", () => { + dialog.remove(); + }); + document.body.appendChild(dialog); + dialog.open(); + } - async function handleEditProfile(profile) { - const dialog = document.createElement("edit-profile-dialog"); - dialog.addEventListener("profile-save", (event) => - handleSaveProfile( - profile, - event.detail.profileUpdates, - event.detail.successCallback, - event.detail.errorCallback, - ), - ); - dialog.addEventListener("edit-profile-closed", () => { - dialog.remove(); - }); - root.querySelector("main").appendChild(dialog); - dialog.setProfile(profile); - dialog.open(); - } + async function handleEditProfile(profile) { + const dialog = document.createElement("edit-profile-dialog"); + dialog.addEventListener("profile-save", (event) => + handleSaveProfile( + profile, + event.detail.profileUpdates, + event.detail.successCallback, + event.detail.errorCallback, + ), + ); + dialog.addEventListener("edit-profile-closed", () => { + dialog.remove(); + }); + root.querySelector("main").appendChild(dialog); + dialog.setProfile(profile); + dialog.open(); + } - async function handleSaveProfile( - profile, - profileUpdates, - successCallback, - errorCallback, - ) { - try { - await dataLayer.mutations.updateProfile(profile, profileUpdates); - showToast("Profile updated"); - successCallback(); - } catch (error) { - errorCallback(error); - } + async function handleSaveProfile( + profile, + profileUpdates, + successCallback, + errorCallback, + ) { + try { + await dataLayer.mutations.updateProfile(profile, profileUpdates); + showToast("Profile updated"); + successCallback(); + } catch (error) { + errorCallback(error); } + } - async function scrollAndReloadFeed() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadAuthorFeed({ reload: true }); + async function scrollAndReloadFeed() { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } + await loadAuthorFeed({ reload: true }); + } - async function handleTabClick(tab) { - const currentTab = state.$activeTab.get(); - if (tab === currentTab) { - if (tab === "feeds") { - scrollAndReloadActorFeeds(); - } else if (tab === "lists") { - scrollAndReloadActorLists(); - } else { - scrollAndReloadFeed(); - } - return; - } - // switch tab - state.$activeTab.set(tab); - // Load feed if needed + async function handleTabClick(tab) { + const currentTab = state.$activeTab.get(); + if (tab === currentTab) { if (tab === "feeds") { - if (!dataLayer.derived.$actorFeeds.get(profileDid)) { - await loadActorFeeds(); - } + scrollAndReloadActorFeeds(); } else if (tab === "lists") { - if (!dataLayer.derived.$actorLists.get(profileDid)) { - await loadActorLists(); - } + scrollAndReloadActorLists(); } else { - const isFeedTab = tab !== "labeler-settings"; - if (isFeedTab && !dataLayer.hasCachedAuthorFeed(profileDid, tab)) { - await loadAuthorFeed(); - } + scrollAndReloadFeed(); } + return; } - - async function handleLabelerSettingsClick(labelerDid, label, visibility) { - try { - await dataLayer.mutations.updateLabelerSetting({ - labelerDid, - label, - visibility, - }); - } catch (error) { - console.error(error); - showToast("Failed to update labeler setting", { style: "error" }); + // switch tab + state.$activeTab.set(tab); + // Load feed if needed + if (tab === "feeds") { + if (!dataLayer.derived.$actorFeeds.get(profileDid)) { + await loadActorFeeds(); + } + } else if (tab === "lists") { + if (!dataLayer.derived.$actorLists.get(profileDid)) { + await loadActorLists(); + } + } else { + const isFeedTab = tab !== "labeler-settings"; + if (isFeedTab && !dataLayer.hasCachedAuthorFeed(profileDid, tab)) { + await loadAuthorFeed(); } } + } - function actorFeedsTemplate({ actorFeeds, onLoadMore, currentUserDid }) { - return feedsFeedTemplate({ - items: actorFeeds?.feeds, - renderItem: (feedGenerator) => - feedGeneratorListItemTemplate({ feedGenerator, currentUserDid }), - emptyMessage: "No custom feeds.", - hasMore: !!actorFeeds?.cursor, - onLoadMore, + async function handleLabelerSettingsClick(labelerDid, label, visibility) { + try { + await dataLayer.mutations.updateLabelerSetting({ + labelerDid, + label, + visibility, }); + } catch (error) { + console.error(error); + showToast("Failed to update labeler setting", { style: "error" }); } + } - function isNotFoundError(error) { - return error instanceof ApiError && error.status === 400; - } + function actorFeedsTemplate({ actorFeeds, onLoadMore, currentUserDid }) { + return feedsFeedTemplate({ + items: actorFeeds?.feeds, + renderItem: (feedGenerator) => + feedGeneratorListItemTemplate({ feedGenerator, currentUserDid }), + emptyMessage: "No custom feeds.", + hasMore: !!actorFeeds?.cursor, + onLoadMore, + }); + } - function getNotFoundMessage(notFoundError) { - if ( - notFoundError.data.message === - "Error: actor must be a valid did or a handle" - ) - return "Invalid handle"; - if (notFoundError.data.error === "AccountTakedown") - return "Account has been suspended"; - if (notFoundError.data.error === "AccountDeactivated") - return "Account is deactivated"; - return "Profile not found"; - } + function isNotFoundError(error) { + return error instanceof ApiError && error.status === 400; + } - function profileErrorTemplate({ error }) { - if (isNotFoundError(error)) { - const message = getNotFoundMessage(error); - return html`
-

Not Found

-
${message}
- -
`; - } - console.error(error); + function getNotFoundMessage(notFoundError) { + if ( + notFoundError.data.message === + "Error: actor must be a valid did or a handle" + ) + return "Invalid handle"; + if (notFoundError.data.error === "AccountTakedown") + return "Account has been suspended"; + if (notFoundError.data.error === "AccountDeactivated") + return "Account is deactivated"; + return "Profile not found"; + } + + function profileErrorTemplate({ error }) { + if (isNotFoundError(error)) { + const message = getNotFoundMessage(error); return html`
-
There was an error loading the profile.
+

Not Found

+
${message}
`; } + console.error(error); + return html`
+
There was an error loading the profile.
+ +
`; + } - function profileUnavailableTemplate() { - return html` -
-

Sign-In Required

-

- This account has requested that users sign in to view their profile. -

- -
- `; - } + function profileUnavailableTemplate() { + return html` +
+

Sign-In Required

+

+ This account has requested that users sign in to view their profile. +

+ +
+ `; + } - function profileTemplate({ - profile, - isLabeler, - labelerInfo, - currentUser, - activeTab, - }) { - try { - if (!isAuthenticated && doHideAuthorOnUnauthenticated(profile)) { - return profileUnavailableTemplate(); - } - const isBlocking = !!profile.viewer?.blocking; - const isBlockedBy = !!profile.viewer?.blockedBy; - const profileChatStatus = dataLayer.derived.$profileChatStatus.get( - profile.did, - ); - const isCurrentUser = currentUser?.did === profile.did; - let authorFeedsToShow = getAuthorFeeds({ isCurrentUser, isLabeler }); - const feedGenCount = profile.associated?.feedgens || 0; - if (feedGenCount > 0) { - authorFeedsToShow = [ - ...authorFeedsToShow, - { feedType: "feeds", name: "Feeds" }, - ]; - } - const listsCount = profile.associated?.lists || 0; - if (listsCount > 0) { - authorFeedsToShow = [ - ...authorFeedsToShow, - { feedType: "lists", name: "Lists" }, - ]; - } - let isDefaultLabeler = profile.did === BSKY_LABELER_DID; - let isSubscribed = false; - let labelerSettings = null; - if (isLabeler) { - const preferences = dataLayer.derived.$preferences.get(); - isSubscribed = isDefaultLabeler - ? true - : preferences?.isSubscribedToLabeler(profile.did); - labelerSettings = dataLayer.derived.$labelerSettings.get(profile.did); - } - return html` -
- ${profileCardTemplate({ - profile, - identityResolver, - isAuthenticated, - isCurrentUser, - profileChatStatus, - isLabeler, - showSubscribeButton: !isDefaultLabeler, - labelerInfo, - isSubscribed, - activitySubscription: - profile.viewer?.activitySubscription ?? null, - onClickPostNotifications: (profile) => - profileInteractionHandler.handlePostNotificationSubscription( - profile, - ), - onClickChat: async (profile) => { - if (!profileChatStatus || !profileChatStatus.canChat) { - // This should never happen - return; - } - if (profileChatStatus.convo) { - window.router.go(`/messages/${profileChatStatus.convo.id}`); - } else { - const convo = - await dataLayer.declarative.ensureConvoForProfile( - profile.did, - ); - window.router.go(`/messages/${convo.id}`); - } - }, - onClickFollow: (profile, doFollow) => - profileInteractionHandler.handleFollow(profile, doFollow), - onClickMute: (profile, doMute) => - profileInteractionHandler.handleMute(profile, doMute), - onClickBlock: async (profile, doBlock) => { - await profileInteractionHandler.handleBlock(profile, doBlock); - if (!doBlock) { - // wait for the app view to process that the block has been lifted, then reload the feed - // We could do some fancier logic here but this is a good enough solution for now. - await wait(2000); - loadAuthorFeed(); - preloadHiddenFeeds({ isCurrentUser, isLabeler }); - } - }, - onClickSubscribe: (profile, doSubscribe, labelerInfo) => - profileInteractionHandler.handleSubscribe( - profile, - doSubscribe, - labelerInfo, - ), - onClickReport: (profile) => - profileInteractionHandler.handleReport(profile), - onClickAddToLists: (profile) => handleAddToLists(profile), - onClickEditProfile: () => handleEditProfile(profile), - pluginService, - isFollowPending: dataLayer.derived.$isFollowPending.get( - profile.did, + function profileTemplate({ + profile, + isLabeler, + labelerInfo, + currentUser, + activeTab, + }) { + try { + if (!isAuthenticated && doHideAuthorOnUnauthenticated(profile)) { + return profileUnavailableTemplate(); + } + const isBlocking = !!profile.viewer?.blocking; + const isBlockedBy = !!profile.viewer?.blockedBy; + const profileChatStatus = dataLayer.derived.$profileChatStatus.get( + profile.did, + ); + const isCurrentUser = currentUser?.did === profile.did; + let authorFeedsToShow = getAuthorFeeds({ isCurrentUser, isLabeler }); + const feedGenCount = profile.associated?.feedgens || 0; + if (feedGenCount > 0) { + authorFeedsToShow = [ + ...authorFeedsToShow, + { feedType: "feeds", name: "Feeds" }, + ]; + } + const listsCount = profile.associated?.lists || 0; + if (listsCount > 0) { + authorFeedsToShow = [ + ...authorFeedsToShow, + { feedType: "lists", name: "Lists" }, + ]; + } + let isDefaultLabeler = profile.did === BSKY_LABELER_DID; + let isSubscribed = false; + let labelerSettings = null; + if (isLabeler) { + const preferences = dataLayer.derived.$preferences.get(); + isSubscribed = isDefaultLabeler + ? true + : preferences?.isSubscribedToLabeler(profile.did); + labelerSettings = dataLayer.derived.$labelerSettings.get(profile.did); + } + return html` +
+ ${profileCardTemplate({ + profile, + identityResolver, + isAuthenticated, + isCurrentUser, + profileChatStatus, + isLabeler, + showSubscribeButton: !isDefaultLabeler, + labelerInfo, + isSubscribed, + activitySubscription: profile.viewer?.activitySubscription ?? null, + onClickPostNotifications: (profile) => + profileInteractionHandler.handlePostNotificationSubscription( + profile, ), - isBlockPending: dataLayer.derived.$isBlockPending.get( - profile.did, + onClickChat: async (profile) => { + if (!profileChatStatus || !profileChatStatus.canChat) { + // This should never happen + return; + } + if (profileChatStatus.convo) { + window.router.go(`/messages/${profileChatStatus.convo.id}`); + } else { + const convo = await dataLayer.declarative.ensureConvoForProfile( + profile.did, + ); + window.router.go(`/messages/${convo.id}`); + } + }, + onClickFollow: (profile, doFollow) => + profileInteractionHandler.handleFollow(profile, doFollow), + onClickMute: (profile, doMute) => + profileInteractionHandler.handleMute(profile, doMute), + onClickBlock: async (profile, doBlock) => { + await profileInteractionHandler.handleBlock(profile, doBlock); + if (!doBlock) { + // wait for the app view to process that the block has been lifted, then reload the feed + // We could do some fancier logic here but this is a good enough solution for now. + await wait(2000); + loadAuthorFeed(); + preloadHiddenFeeds({ isCurrentUser, isLabeler }); + } + }, + onClickSubscribe: (profile, doSubscribe, labelerInfo) => + profileInteractionHandler.handleSubscribe( + profile, + doSubscribe, + labelerInfo, ), - })} - ${isBlocking || isBlockedBy - ? html`
-
Posts hidden
-
` - : html` -
- ({ - value: feedInfo.feedType, - label: feedInfo.name, - })), - ]} - active-tab=${activeTab} - @tab-click=${(event) => handleTabClick(event.detail)} - > -
- ${isLabeler - ? html`
- ${labelerSettingsTemplate({ - labelerInfo, - profile, - isSubscribed, - labelerSettings, - onClick: (label, visibility) => - handleLabelerSettingsClick( - profile.did, - label, - visibility, - ), - })} -
` - : null} - ${authorFeedsToShow.map((feedInfo) => { - if (feedInfo.feedType === "feeds") { - const actorFeeds = - dataLayer.derived.$actorFeeds.get(profileDid); - return html`
- ${actorFeedsTemplate({ - actorFeeds, - onLoadMore: () => loadActorFeeds(), - currentUserDid: currentUser?.did, - })} -
`; - } - if (feedInfo.feedType === "lists") { - const actorLists = - dataLayer.derived.$actorLists.get(profileDid); - return html`
- ${listFeedTemplate({ - lists: actorLists?.lists, - cursor: actorLists?.cursor, - onLoadMore: () => loadActorLists(), - })} -
`; - } - const feedURI = `${profileDid}-${feedInfo.feedType}`; - const authorFeed = - dataLayer.derived.$hydratedAuthorFeeds.get(feedURI); + onClickReport: (profile) => + profileInteractionHandler.handleReport(profile), + onClickAddToLists: (profile) => handleAddToLists(profile), + onClickEditProfile: () => handleEditProfile(profile), + pluginService, + isFollowPending: dataLayer.derived.$isFollowPending.get( + profile.did, + ), + isBlockPending: dataLayer.derived.$isBlockPending.get(profile.did), + })} + ${isBlocking || isBlockedBy + ? html`
+
Posts hidden
+
` + : html` +
+ ({ + value: feedInfo.feedType, + label: feedInfo.name, + })), + ]} + active-tab=${activeTab} + @tab-click=${(event) => handleTabClick(event.detail)} + > +
+ ${isLabeler + ? html`
+ ${labelerSettingsTemplate({ + labelerInfo, + profile, + isSubscribed, + labelerSettings, + onClick: (label, visibility) => + handleLabelerSettingsClick( + profile.did, + label, + visibility, + ), + })} +
` + : null} + ${authorFeedsToShow.map((feedInfo) => { + if (feedInfo.feedType === "feeds") { + const actorFeeds = + dataLayer.derived.$actorFeeds.get(profileDid); return html`
- ${postFeedTemplate({ - feed: authorFeed, - currentUser, - isAuthenticated, - postInteractionHandler, - onLoadMore: () => loadAuthorFeed(), - pluginService, - showEndMessage: true, + ${actorFeedsTemplate({ + actorFeeds, + onLoadMore: () => loadActorFeeds(), + currentUserDid: currentUser?.did, })}
`; - })} - `} -
- `; - } catch (error) { - console.error("error", error); - return profileErrorTemplate({ error }); - } + } + if (feedInfo.feedType === "lists") { + const actorLists = + dataLayer.derived.$actorLists.get(profileDid); + return html`
+ ${listFeedTemplate({ + lists: actorLists?.lists, + cursor: actorLists?.cursor, + onLoadMore: () => loadActorLists(), + })} +
`; + } + const feedURI = `${profileDid}-${feedInfo.feedType}`; + const authorFeed = + dataLayer.derived.$hydratedAuthorFeeds.get(feedURI); + return html`
+ ${postFeedTemplate({ + feed: authorFeed, + currentUser, + isAuthenticated, + postInteractionHandler, + onLoadMore: () => loadAuthorFeed(), + pluginService, + showEndMessage: true, + })} +
`; + })} + `} +
+ `; + } catch (error) { + console.error("error", error); + return profileErrorTemplate({ error }); } + } + + function profileSkeletonTemplate() { + return html`
`; + } + + bindToPage(root, layout, "active-nav-click", (event) => { + event.preventDefault(); + scrollAndReloadFeed(); + }); - function profileSkeletonTemplate() { - return html`
`; + bindPageTitle(root, () => { + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + if (!profile) return null; + if (profile.displayName) { + return `${profile.displayName} (@${profile.handle})`; } + return `@${profile.handle}`; + }); - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - scrollAndReloadFeed(); - }); + pageEffect(root, () => { + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + const currentUser = dataLayer.derived.$currentUser.get(); + const profileRequestStatus = dataLayer.requests.statusStore.$statuses.get( + "loadDetailedProfile-" + profileDid, + ); + const isLabeler = profile && isLabelerProfile(profile); + const labelerInfo = isLabeler + ? dataLayer.derived.$labelerInfo.get(profile.did) + : null; + // If labeler, require labeler info to be loaded + const isLoaded = profile && (isLabeler ? !!labelerInfo : true); + const activeTab = state.$activeTab.get(); + render( + html`
+
+ + ${(() => { + if (profileRequestStatus.error) { + return profileErrorTemplate({ + error: profileRequestStatus.error, + }); + } else if (isLoaded) { + return profileTemplate({ + profile, + isLabeler, + labelerInfo, + currentUser, + activeTab, + }); + } else { + return profileSkeletonTemplate(); + } + })()} +
+ ${currentUser + ? floatingComposeButtonTemplate({ + onClick: () => postComposerService.composePost({ currentUser }), + }) + : ""} +
`, + root, + ); + }); - bindPageTitle(root, () => { - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - if (!profile) return null; - if (profile.displayName) { - return `${profile.displayName} (@${profile.handle})`; - } - return `@${profile.handle}`; + async function loadAuthorFeed({ reload = false } = {}) { + const activeTab = state.$activeTab.get(); + if ( + activeTab === "labeler-settings" || + activeTab === "feeds" || + activeTab === "lists" + ) { + return; + } + await dataLayer.requests.loadNextAuthorFeedPage(profileDid, activeTab, { + reload, + limit: AUTHOR_FEED_PAGE_SIZE + 1, }); + } - pageEffect(root, () => { - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - const currentUser = dataLayer.derived.$currentUser.get(); - const profileRequestStatus = dataLayer.requests.statusStore.$statuses.get( - "loadDetailedProfile-" + profileDid, - ); - const isLabeler = profile && isLabelerProfile(profile); - const labelerInfo = isLabeler - ? dataLayer.derived.$labelerInfo.get(profile.did) - : null; - // If labeler, require labeler info to be loaded - const isLoaded = profile && (isLabeler ? !!labelerInfo : true); - const activeTab = state.$activeTab.get(); - render( - html`
-
- - ${(() => { - if (profileRequestStatus.error) { - return profileErrorTemplate({ - error: profileRequestStatus.error, - }); - } else if (isLoaded) { - return profileTemplate({ - profile, - isLabeler, - labelerInfo, - currentUser, - activeTab, - }); - } else { - return profileSkeletonTemplate(); - } - })()} -
- ${currentUser - ? floatingComposeButtonTemplate({ - onClick: () => postComposerService.composePost({ currentUser }), - }) - : ""} -
`, - root, - ); - }); + async function loadActorFeeds({ reload = false } = {}) { + await dataLayer.requests.loadActorFeeds(profileDid, { reload }); + } - async function loadAuthorFeed({ reload = false } = {}) { - const activeTab = state.$activeTab.get(); - if ( - activeTab === "labeler-settings" || - activeTab === "feeds" || - activeTab === "lists" - ) { - return; - } - await dataLayer.requests.loadNextAuthorFeedPage(profileDid, activeTab, { - reload, - limit: AUTHOR_FEED_PAGE_SIZE + 1, - }); + async function scrollAndReloadActorFeeds() { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } + await loadActorFeeds({ reload: true }); + } - async function loadActorFeeds({ reload = false } = {}) { - await dataLayer.requests.loadActorFeeds(profileDid, { reload }); - } + async function loadActorLists({ reload = false } = {}) { + await dataLayer.requests.loadActorLists(profileDid, { reload }); + } - async function scrollAndReloadActorFeeds() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadActorFeeds({ reload: true }); + async function scrollAndReloadActorLists() { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } + await loadActorLists({ reload: true }); + } - async function loadActorLists({ reload = false } = {}) { - await dataLayer.requests.loadActorLists(profileDid, { reload }); + async function preloadHiddenFeeds({ isCurrentUser, isLabeler }) { + const activeTab = state.$activeTab.get(); + const feedsToPreload = getAuthorFeeds({ + isCurrentUser, + isLabeler, + }).filter((feed) => feed.feedType !== activeTab); + for (const feed of feedsToPreload) { + await dataLayer.requests.loadNextAuthorFeedPage( + profileDid, + feed.feedType, + { + limit: AUTHOR_FEED_PAGE_SIZE + 1, + }, + ); } + } - async function scrollAndReloadActorLists() { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - await loadActorLists({ reload: true }); - } + let didSelectInitialTab = false; - async function preloadHiddenFeeds({ isCurrentUser, isLabeler }) { - const activeTab = state.$activeTab.get(); - const feedsToPreload = getAuthorFeeds({ - isCurrentUser, - isLabeler, - }).filter((feed) => feed.feedType !== activeTab); - for (const feed of feedsToPreload) { - await dataLayer.requests.loadNextAuthorFeedPage( - profileDid, - feed.feedType, - { - limit: AUTHOR_FEED_PAGE_SIZE + 1, - }, - ); - } - } + async function loadProfile() { + await dataLayer.requests.loadDetailedProfile(profileDid); + return dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + } - root.addEventListener("page-enter", async () => { - if (isAuthenticated) { - await dataLayer.declarative.ensureCurrentUser(); - } + function loadPageData(profile) { + const isLabeler = isLabelerProfile(profile); + if (isLabeler) { + dataLayer.requests.loadLabelerInfo(profile.did); + } - let profile; - try { - profile = await dataLayer.declarative.ensureDetailedProfile(profileDid); - } catch { - return; - } + if (!profile.viewer?.blocking && !profile.viewer?.blockedBy) { + const isCurrentUser = + profile.did === dataLayer.derived.$currentUser.get()?.did; + loadAuthorFeed({ reload: true }); + preloadHiddenFeeds({ isCurrentUser, isLabeler }); + } + // Load chat status + if ( + isAuthenticated && + profile.did !== dataLayer.derived.$currentUser.get()?.did + ) { + dataLayer.requests.loadProfileChatStatus(profile.did); + } + } - // Set active tab and load labeler info if this is a labeler profile - const isLabeler = profile && isLabelerProfile(profile); - if (isLabeler) { + root.addEventListener("page-enter", async () => { + const profile = await loadProfile(); + if (!profile) { + return; + } + // Labeler profiles open on their settings tab, but only the first time so + // a revisit doesn't reset the user's tab. Must precede the feed loads, + // which skip the author feed while that tab is active. + if (!didSelectInitialTab) { + didSelectInitialTab = true; + if (isLabelerProfile(profile)) { state.$activeTab.set("labeler-settings"); - dataLayer.requests.loadLabelerInfo(profile.did); } - - if (!profile.viewer?.blocking && !profile.viewer?.blockedBy) { - const isCurrentUser = - profile.did === dataLayer.derived.$currentUser.get()?.did; - loadAuthorFeed(); - preloadHiddenFeeds({ isCurrentUser, isLabeler }); - } - // Load chat status - if ( - isAuthenticated && - profile.did !== dataLayer.derived.$currentUser.get()?.did - ) { - dataLayer.requests.loadProfileChatStatus(profile.did); - } - }); - } + } + loadPageData(profile); + }); } - -export default new ProfileView(); diff --git a/src/js/views/profileFollowers.view.js b/src/js/views/profileFollowers.view.js index 76430194..611115f5 100644 --- a/src/js/views/profileFollowers.view.js +++ b/src/js/views/profileFollowers.view.js @@ -1,119 +1,108 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { View } from "/js/views/view.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; import "/js/components/infinite-scroll-container.js"; -class ProfileFollowersView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - interactionHandlers, - isAuthenticated, - pluginService, - }, - }) { - await auth.requireAuth(); +export default async function profileFollowersView({ + root, + params, + context: { + dataLayer, + identityResolver, + interactionHandlers, + isAuthenticated, + pluginService, + }, +}) { + await auth.requireAuth(); - const { handleOrDid } = params; + const { handleOrDid } = params; - let profileDid = null; - if (handleOrDid.startsWith("did:")) { - profileDid = handleOrDid; - } else { - profileDid = await identityResolver.resolveHandle(handleOrDid); - } + let profileDid = null; + if (handleOrDid.startsWith("did:")) { + profileDid = handleOrDid; + } else { + profileDid = await identityResolver.resolveHandle(handleOrDid); + } - function followersErrorTemplate({ error }) { - console.error(error); - return html`
-
Error loading followers
- -
`; - } + function followersErrorTemplate({ error }) { + console.error(error); + return html`
+
Error loading followers
+ +
`; + } - bindPageTitle(root, () => { - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - if (profile?.handle) return `Followers of @${profile.handle}`; - return "Followers"; - }); + bindPageTitle(root, () => { + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + if (profile?.handle) return `Followers of @${profile.handle}`; + return "Followers"; + }); - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const profileFollowers = - dataLayer.derived.$profileFollowers.get(profileDid); - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - const profileFollowersRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadProfileFollowers-" + profileDid, - ); - const hasMore = profileFollowers?.cursor ? true : false; + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const profileFollowers = + dataLayer.derived.$profileFollowers.get(profileDid); + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + const profileFollowersRequestStatus = + dataLayer.requests.statusStore.$statuses.get( + "loadProfileFollowers-" + profileDid, + ); + const hasMore = profileFollowers?.cursor ? true : false; - const subtitle = profile?.followersCount - ? `${profile.followersCount.toLocaleString()} ${ - profile.followersCount === 1 ? "follower" : "followers" - }` - : null; + const subtitle = profile?.followersCount + ? `${profile.followersCount.toLocaleString()} ${ + profile.followersCount === 1 ? "follower" : "followers" + }` + : null; - render( - html`
- ${headerTemplate({ - title: profile ? getDisplayName(profile) : "", - subtitle, - })} -
- ${(() => { - if (profileFollowersRequestStatus.error) { - return followersErrorTemplate({ - error: profileFollowersRequestStatus.error, - }); - } - return profileFeedTemplate({ - profiles: profileFollowers?.followers ?? null, - hasMore, - onLoadMore: loadFollowers, - emptyMessage: "No followers yet.", - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler: - interactionHandlers.profileInteractionHandler, - pluginService, + render( + html`
+ ${headerTemplate({ + title: profile ? getDisplayName(profile) : "", + subtitle, + })} +
+ ${(() => { + if (profileFollowersRequestStatus.error) { + return followersErrorTemplate({ + error: profileFollowersRequestStatus.error, }); - })()} -
-
`, - root, - ); - }); + } + return profileFeedTemplate({ + profiles: profileFollowers?.followers ?? null, + hasMore, + onLoadMore: loadFollowers, + emptyMessage: "No followers yet.", + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler: + interactionHandlers.profileInteractionHandler, + pluginService, + }); + })()} +
+
`, + root, + ); + }); - async function loadFollowers() { - const profileFollowers = - dataLayer.derived.$profileFollowers.get(profileDid); - const cursor = profileFollowers?.cursor; - await dataLayer.requests.loadProfileFollowers(profileDid, { cursor }); - } - - root.addEventListener("page-enter", async () => { - // Load the profile to get the follower count - dataLayer.declarative.ensureDetailedProfile(profileDid); - await loadFollowers(); - }); + async function loadFollowers({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$profileFollowers.get(profileDid)?.cursor; + await dataLayer.requests.loadProfileFollowers(profileDid, { cursor }); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await dataLayer.requests.loadProfileFollowers(profileDid); - }); + function loadPageData() { + dataLayer.requests.loadDetailedProfile(profileDid); + loadFollowers({ reload: true }); } -} -export default new ProfileFollowersView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/profileFollowing.view.js b/src/js/views/profileFollowing.view.js index 368f05ef..b96a51fe 100644 --- a/src/js/views/profileFollowing.view.js +++ b/src/js/views/profileFollowing.view.js @@ -1,117 +1,105 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { View } from "/js/views/view.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; import "/js/components/infinite-scroll-container.js"; -class ProfileFollowingView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - interactionHandlers, - isAuthenticated, - pluginService, - }, - }) { - await auth.requireAuth(); +export default async function profileFollowingView({ + root, + params, + context: { + dataLayer, + identityResolver, + interactionHandlers, + isAuthenticated, + pluginService, + }, +}) { + await auth.requireAuth(); - const { handleOrDid } = params; + const { handleOrDid } = params; - let profileDid = null; - if (handleOrDid.startsWith("did:")) { - profileDid = handleOrDid; - } else { - profileDid = await identityResolver.resolveHandle(handleOrDid); - } + let profileDid = null; + if (handleOrDid.startsWith("did:")) { + profileDid = handleOrDid; + } else { + profileDid = await identityResolver.resolveHandle(handleOrDid); + } - function followingErrorTemplate({ error }) { - console.error(error); - return html`
-
Error loading following
- -
`; - } + function followingErrorTemplate({ error }) { + console.error(error); + return html`
+
Error loading following
+ +
`; + } - bindPageTitle(root, () => { - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - if (profile?.handle) return `Following @${profile.handle}`; - return "Following"; - }); + bindPageTitle(root, () => { + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + if (profile?.handle) return `Following @${profile.handle}`; + return "Following"; + }); - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const profileFollowing = - dataLayer.derived.$profileFollows.get(profileDid); - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - const profileFollowingRequestStatus = - dataLayer.requests.statusStore.$statuses.get( - "loadProfileFollows-" + profileDid, - ); - const hasMore = profileFollowing?.cursor ? true : false; + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const profileFollowing = dataLayer.derived.$profileFollows.get(profileDid); + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + const profileFollowingRequestStatus = + dataLayer.requests.statusStore.$statuses.get( + "loadProfileFollows-" + profileDid, + ); + const hasMore = profileFollowing?.cursor ? true : false; - const subtitle = profile?.followsCount - ? `${profile.followsCount.toLocaleString()} following` - : null; + const subtitle = profile?.followsCount + ? `${profile.followsCount.toLocaleString()} following` + : null; - render( - html`
- ${headerTemplate({ - title: profile ? getDisplayName(profile) : "", - subtitle, - })} -
- ${(() => { - if (profileFollowingRequestStatus.error) { - return followingErrorTemplate({ - error: profileFollowingRequestStatus.error, - }); - } - return profileFeedTemplate({ - profiles: profileFollowing?.follows ?? null, - hasMore, - onLoadMore: loadFollowing, - emptyMessage: "Not following anyone yet.", - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler: - interactionHandlers.profileInteractionHandler, - pluginService, + render( + html`
+ ${headerTemplate({ + title: profile ? getDisplayName(profile) : "", + subtitle, + })} +
+ ${(() => { + if (profileFollowingRequestStatus.error) { + return followingErrorTemplate({ + error: profileFollowingRequestStatus.error, }); - })()} -
-
`, - root, - ); - }); + } + return profileFeedTemplate({ + profiles: profileFollowing?.follows ?? null, + hasMore, + onLoadMore: loadFollowing, + emptyMessage: "Not following anyone yet.", + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler: + interactionHandlers.profileInteractionHandler, + pluginService, + }); + })()} +
+
`, + root, + ); + }); - async function loadFollowing() { - const profileFollowing = - dataLayer.derived.$profileFollows.get(profileDid); - const cursor = profileFollowing?.cursor; - await dataLayer.requests.loadProfileFollows(profileDid, { cursor }); - } - - root.addEventListener("page-enter", async () => { - // Load the profile to get the follows count - dataLayer.declarative.ensureDetailedProfile(profileDid); - await loadFollowing(); - }); + async function loadFollowing({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$profileFollows.get(profileDid)?.cursor; + await dataLayer.requests.loadProfileFollows(profileDid, { cursor }); + } - root.addEventListener("page-restore", async (e) => { - if (e.detail?.isBack) return; - await dataLayer.requests.loadProfileFollows(profileDid); - }); + function loadPageData() { + dataLayer.requests.loadDetailedProfile(profileDid); + loadFollowing({ reload: true }); } -} -export default new ProfileFollowingView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/profileKnownFollowers.view.js b/src/js/views/profileKnownFollowers.view.js index 1ddcd33f..6ed5426a 100644 --- a/src/js/views/profileKnownFollowers.view.js +++ b/src/js/views/profileKnownFollowers.view.js @@ -1,105 +1,97 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { View } from "/js/views/view.js"; import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; import "/js/components/infinite-scroll-container.js"; -class ProfileKnownFollowersView extends View { - async render({ - root, - params, - context: { - dataLayer, - identityResolver, - interactionHandlers, - isAuthenticated, - pluginService, - }, - }) { - await auth.requireAuth(); +export default async function profileKnownFollowersView({ + root, + params, + context: { + dataLayer, + identityResolver, + interactionHandlers, + isAuthenticated, + pluginService, + }, +}) { + await auth.requireAuth(); - const { handleOrDid } = params; + const { handleOrDid } = params; - let profileDid = null; - if (handleOrDid.startsWith("did:")) { - profileDid = handleOrDid; - } else { - profileDid = await identityResolver.resolveHandle(handleOrDid); - } - - function errorTemplate({ error }) { - console.error(error); - return html`
-
Error loading followers you know
- -
`; - } + let profileDid = null; + if (handleOrDid.startsWith("did:")) { + profileDid = handleOrDid; + } else { + profileDid = await identityResolver.resolveHandle(handleOrDid); + } - bindPageTitle(root, () => "Followers you know"); + function errorTemplate({ error }) { + console.error(error); + return html`
+
Error loading followers you know
+ +
`; + } - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const knownFollowers = dataLayer.derived.$knownFollowers.get(profileDid); - const profile = - dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); - const requestStatus = dataLayer.requests.statusStore.$statuses.get( - "loadKnownFollowers-" + profileDid, - ); - // Note, the knownFollowers response doesn't actually include a cursor right now - // but we'll leave this here for future-proofing - const hasMore = knownFollowers?.cursor ? true : false; - render( - html`
- ${headerTemplate({ - title: profile ? getDisplayName(profile) : "", - subtitle: "Followers you know", - })} -
- ${(() => { - if (requestStatus.error) { - return errorTemplate({ error: requestStatus.error }); - } - return profileFeedTemplate({ - profiles: knownFollowers?.followers ?? null, - hasMore, - onLoadMore: loadKnownFollowers, - emptyMessage: profile - ? `You don't follow anyone who follows @${profile.handle}.` - : "You don't follow anyone who follows this user.", - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler: - interactionHandlers.profileInteractionHandler, - pluginService, - }); - })()} -
-
`, - root, - ); - }); + bindPageTitle(root, () => "Followers you know"); - async function loadKnownFollowers() { - const knownFollowers = dataLayer.derived.$knownFollowers.get(profileDid); - const cursor = knownFollowers?.cursor; - await dataLayer.requests.loadKnownFollowers(profileDid, { cursor }); - } + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const knownFollowers = dataLayer.derived.$knownFollowers.get(profileDid); + const profile = dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); + const requestStatus = dataLayer.requests.statusStore.$statuses.get( + "loadKnownFollowers-" + profileDid, + ); + // Note, the knownFollowers response doesn't actually include a cursor right now + // but we'll leave this here for future-proofing + const hasMore = knownFollowers?.cursor ? true : false; + render( + html`
+ ${headerTemplate({ + title: profile ? getDisplayName(profile) : "", + subtitle: "Followers you know", + })} +
+ ${(() => { + if (requestStatus.error) { + return errorTemplate({ error: requestStatus.error }); + } + return profileFeedTemplate({ + profiles: knownFollowers?.followers ?? null, + hasMore, + onLoadMore: loadKnownFollowers, + emptyMessage: profile + ? `You don't follow anyone who follows @${profile.handle}.` + : "You don't follow anyone who follows this user.", + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler: + interactionHandlers.profileInteractionHandler, + pluginService, + }); + })()} +
+
`, + root, + ); + }); - root.addEventListener("page-enter", async () => { - dataLayer.declarative.ensureDetailedProfile(profileDid); - await loadKnownFollowers(); - }); + async function loadKnownFollowers({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$knownFollowers.get(profileDid)?.cursor; + await dataLayer.requests.loadKnownFollowers(profileDid, { cursor }); + } - root.addEventListener("page-restore", async (event) => { - if (event.detail?.isBack) return; - await dataLayer.requests.loadKnownFollowers(profileDid); - }); + function loadPageData() { + dataLayer.requests.loadDetailedProfile(profileDid); + loadKnownFollowers({ reload: true }); } -} -export default new ProfileKnownFollowersView(); + root.addEventListener("page-enter", () => loadPageData()); +} diff --git a/src/js/views/search.view.js b/src/js/views/search.view.js index 79a4e613..ca54b521 100644 --- a/src/js/views/search.view.js +++ b/src/js/views/search.view.js @@ -1,5 +1,4 @@ import { html, keyed, render } from "/js/lib/lit-html.js"; -import { View } from "/js/views/view.js"; import { searchIconTemplate } from "/js/templates/icons/searchIcon.template.js"; import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js"; import { headerTemplate } from "/js/templates/header.template.js"; @@ -19,795 +18,763 @@ import "/js/components/container-link.js"; import "/js/components/tab-bar.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; -class SearchView extends View { - async render({ - root, - layout, - context: { dataLayer, isAuthenticated, pluginService, interactionHandlers }, - }) { - function getUrlQuery() { - return ( - new URLSearchParams(window.location.search).get("q") ?? "" - ).trim(); - } +export default async function searchView({ + root, + layout, + context: { dataLayer, isAuthenticated, pluginService, interactionHandlers }, +}) { + function getUrlQuery() { + return (new URLSearchParams(window.location.search).get("q") ?? "").trim(); + } - const initialQuery = getUrlQuery(); - const state = new ReactiveStore("searchView"); - state.$activeTab = new Signal.State("top"); - state.$inputValue = new Signal.State(initialQuery); - state.$committedQuery = new Signal.State(initialQuery); - state.$showTypeahead = new Signal.State(false); - state.$recentProfilesLoading = new Signal.State(true); - - const tabScrollState = new Map(); - const loadedTabs = new Set(); - - const TAB_LOADERS = { - profiles: (query) => - dataLayer.requests.loadProfileSearch(query, { limit: 25 }), - top: (query) => - dataLayer.requests.loadPostSearchTop(query, { limit: 25 }), - latest: (query) => - dataLayer.requests.loadPostSearchLatest(query, { limit: 25 }), - feeds: (query) => dataLayer.requests.loadFeedSearch(query, { limit: 15 }), - }; - - const TAB_STATUS_PREFIXES = { - profiles: "loadProfileSearch-", - top: "loadPostSearchTop-", - latest: "loadPostSearchLatest-", - feeds: "loadFeedSearch-", - }; - - function loadTabIfNeeded(tab) { - const query = state.$committedQuery.get(); - if (!query) return; - if (!isAuthenticated) { - tab = "profiles"; - } - if (loadedTabs.has(tab)) return; - loadedTabs.add(tab); - TAB_LOADERS[tab](query) - .then(() => { - if ( - dataLayer.requests.statusStore.getError( - TAB_STATUS_PREFIXES[tab] + query, - ) - ) { - loadedTabs.delete(tab); - } - }) - .catch((error) => { - loadedTabs.delete(tab); - console.error("Failed to load search results", error); - }); + const initialQuery = getUrlQuery(); + const state = new ReactiveStore("searchView"); + state.$activeTab = new Signal.State("top"); + state.$inputValue = new Signal.State(initialQuery); + state.$committedQuery = new Signal.State(initialQuery); + state.$showTypeahead = new Signal.State(false); + state.$recentProfilesLoading = new Signal.State(true); + + const tabScrollState = new Map(); + const loadedTabs = new Set(); + + const TAB_LOADERS = { + profiles: (query) => + dataLayer.requests.loadProfileSearch(query, { limit: 25 }), + top: (query) => dataLayer.requests.loadPostSearchTop(query, { limit: 25 }), + latest: (query) => + dataLayer.requests.loadPostSearchLatest(query, { limit: 25 }), + feeds: (query) => dataLayer.requests.loadFeedSearch(query, { limit: 15 }), + }; + + const TAB_STATUS_PREFIXES = { + profiles: "loadProfileSearch-", + top: "loadPostSearchTop-", + latest: "loadPostSearchLatest-", + feeds: "loadFeedSearch-", + }; + + function loadTabIfNeeded(tab) { + const query = state.$committedQuery.get(); + if (!query) return; + if (!isAuthenticated) { + tab = "profiles"; } + if (loadedTabs.has(tab)) return; + loadedTabs.add(tab); + TAB_LOADERS[tab](query) + .then(() => { + if ( + dataLayer.requests.statusStore.getError( + TAB_STATUS_PREFIXES[tab] + query, + ) + ) { + loadedTabs.delete(tab); + } + }) + .catch((error) => { + loadedTabs.delete(tab); + console.error("Failed to load search results", error); + }); + } - function loadTypeahead(query) { - dataLayer.requests - .loadSearchTypeahead(query, { limit: 8 }) - .catch((error) => console.warn("Typeahead search failed", error)); - } + function loadTypeahead(query) { + dataLayer.requests + .loadSearchTypeahead(query, { limit: 8 }) + .catch((error) => console.warn("Typeahead search failed", error)); + } - function resetSearchState() { - state.$inputValue.set(""); - state.$showTypeahead.set(false); - state.$committedQuery.set(""); - loadedTabs.clear(); - tabScrollState.clear(); - const url = new URL(window.location); - url.searchParams.delete("q"); - window.history.replaceState({}, "", url); - dataLayer.requests.loadSearchTypeahead(""); - dataLayer.requests.loadProfileSearch(""); - if (isAuthenticated) { - dataLayer.requests.loadPostSearchTop(""); - dataLayer.requests.loadPostSearchLatest(""); - dataLayer.requests.loadFeedSearch(""); - } + function resetSearchState() { + state.$inputValue.set(""); + state.$showTypeahead.set(false); + state.$committedQuery.set(""); + loadedTabs.clear(); + tabScrollState.clear(); + const url = new URL(window.location); + url.searchParams.delete("q"); + window.history.replaceState({}, "", url); + dataLayer.requests.loadSearchTypeahead(""); + dataLayer.requests.loadProfileSearch(""); + if (isAuthenticated) { + dataLayer.requests.loadPostSearchTop(""); + dataLayer.requests.loadPostSearchLatest(""); + dataLayer.requests.loadFeedSearch(""); } + } - function handleInput(value) { - const trimmed = value.trim(); - if (!trimmed) { - resetSearchState(); - state.$inputValue.set(value); - return; - } + function handleInput(value) { + const trimmed = value.trim(); + if (!trimmed) { + resetSearchState(); state.$inputValue.set(value); - state.$showTypeahead.set(true); - loadTypeahead(trimmed); + return; } + state.$inputValue.set(value); + state.$showTypeahead.set(true); + loadTypeahead(trimmed); + } - function commitSearch() { - const query = state.$inputValue.get().trim(); - if (!query) return; - if (isAuthenticated) { - dataLayer.mutations.addRecentSearch(query).catch(console.warn); - } - state.$showTypeahead.set(false); - const queryChanged = query !== state.$committedQuery.get(); - state.$committedQuery.set(query); - const url = new URL(window.location); - url.searchParams.set("q", query); - window.history.replaceState({}, "", url); - if (queryChanged) { - loadedTabs.clear(); - tabScrollState.clear(); - } - loadTabIfNeeded(state.$activeTab.get()); - root.querySelector(".search-input")?.blur(); + function commitSearch() { + const query = state.$inputValue.get().trim(); + if (!query) return; + if (isAuthenticated) { + dataLayer.mutations.addRecentSearch(query).catch(console.warn); } - - function handleClearSearch() { - resetSearchState(); - root.querySelector(".search-input")?.focus(); + state.$showTypeahead.set(false); + const queryChanged = query !== state.$committedQuery.get(); + state.$committedQuery.set(query); + const url = new URL(window.location); + url.searchParams.set("q", query); + window.history.replaceState({}, "", url); + if (queryChanged) { + loadedTabs.clear(); + tabScrollState.clear(); } + loadTabIfNeeded(state.$activeTab.get()); + root.querySelector(".search-input")?.blur(); + } - function handleRecentSearchSelect(q) { - state.$inputValue.set(q); - state.$showTypeahead.set(false); - commitSearch(); - } + function handleClearSearch() { + resetSearchState(); + root.querySelector(".search-input")?.focus(); + } - function handleRecentSearchRemove(q) { - dataLayer.mutations.removeRecentSearch(q).catch(console.warn); - } + function handleRecentSearchSelect(q) { + state.$inputValue.set(q); + state.$showTypeahead.set(false); + commitSearch(); + } - function handleRecentProfileRecord(did) { - if (!isAuthenticated) return; - dataLayer.mutations.addRecentSearchProfile(did).catch(console.warn); - } + function handleRecentSearchRemove(q) { + dataLayer.mutations.removeRecentSearch(q).catch(console.warn); + } - function handleRecentProfileRemove(did) { - dataLayer.mutations.removeRecentSearchProfile(did).catch(console.warn); - } + function handleRecentProfileRecord(did) { + if (!isAuthenticated) return; + dataLayer.mutations.addRecentSearchProfile(did).catch(console.warn); + } - function isRecentProfileVisible(profile) { - if (!profile) return false; - if (profile.viewer?.blocking || profile.viewer?.blockedBy) return false; - if (profile.handle === MISSING_HANDLE) return false; - if ((profile.labels ?? []).some((label) => label.val === "!takendown")) { - return false; - } - return true; + function handleRecentProfileRemove(did) { + dataLayer.mutations.removeRecentSearchProfile(did).catch(console.warn); + } + + function isRecentProfileVisible(profile) { + if (!profile) return false; + if (profile.viewer?.blocking || profile.viewer?.blockedBy) return false; + if (profile.handle === MISSING_HANDLE) return false; + if ((profile.labels ?? []).some((label) => label.val === "!takendown")) { + return false; } + return true; + } - async function hydrateAndPruneRecentProfiles() { + async function hydrateAndPruneRecentProfiles() { + try { + if (!isAuthenticated) return; + const entries = dataLayer.derived.$recentSearchProfiles.get() ?? []; + if (entries.length === 0) return; + const dids = entries.map((entry) => entry.did); try { - if (!isAuthenticated) return; - const entries = dataLayer.derived.$recentSearchProfiles.get() ?? []; - if (entries.length === 0) return; - const dids = entries.map((entry) => entry.did); - try { - await dataLayer.declarative.ensureProfiles(dids); - } catch (error) { - console.warn("Failed to load recent search profiles", error); - return; - } - const hydrated = dataLayer.derived.$recentSearchProfiles.get() ?? []; - const fetchedDids = new Set(dids); - const prunedDids = hydrated - .filter( - (entry) => - fetchedDids.has(entry.did) && - !isRecentProfileVisible(entry.profile), - ) - .map((entry) => entry.did); - if (prunedDids.length > 0) { - dataLayer.mutations - .removeRecentSearchProfiles(prunedDids) - .catch(console.warn); - } - } finally { - state.$recentProfilesLoading.set(false); + await dataLayer.declarative.ensureProfiles(dids); + } catch (error) { + console.warn("Failed to load recent search profiles", error); + return; } + const hydrated = dataLayer.derived.$recentSearchProfiles.get() ?? []; + const fetchedDids = new Set(dids); + const prunedDids = hydrated + .filter( + (entry) => + fetchedDids.has(entry.did) && + !isRecentProfileVisible(entry.profile), + ) + .map((entry) => entry.did); + if (prunedDids.length > 0) { + dataLayer.mutations + .removeRecentSearchProfiles(prunedDids) + .catch(console.warn); + } + } finally { + state.$recentProfilesLoading.set(false); } + } - function handleTabChange(tab) { - if (tab === state.$activeTab.get()) { - if (window.scrollY > 0) { - window.scrollTo({ top: -1, behavior: "smooth" }); - } - return; + function handleTabChange(tab) { + if (tab === state.$activeTab.get()) { + if (window.scrollY > 0) { + window.scrollTo({ top: -1, behavior: "smooth" }); } - tabScrollState.set(state.$activeTab.get(), window.scrollY); - state.$activeTab.set(tab); - loadTabIfNeeded(tab); - requestAnimationFrame(() => { - window.scrollTo(0, tabScrollState.get(tab) ?? 0); - }); + return; } + tabScrollState.set(state.$activeTab.get(), window.scrollY); + state.$activeTab.set(tab); + loadTabIfNeeded(tab); + requestAnimationFrame(() => { + window.scrollTo(0, tabScrollState.get(tab) ?? 0); + }); + } - async function loadMoreProfiles() { - const cursor = dataLayer.derived.$profileSearchCursor.get(); - if (!cursor) return; - await dataLayer.requests.loadProfileSearch(state.$committedQuery.get(), { - limit: 25, - cursor, - }); - } + async function loadMoreProfiles() { + const cursor = dataLayer.derived.$profileSearchCursor.get(); + if (!cursor) return; + await dataLayer.requests.loadProfileSearch(state.$committedQuery.get(), { + limit: 25, + cursor, + }); + } - async function loadMoreTopPosts() { - const cursor = dataLayer.derived.$postSearchCursorTop.get(); - if (!cursor) return; - await dataLayer.requests.loadPostSearchTop(state.$committedQuery.get(), { - limit: 25, - cursor, - }); - } + async function loadMoreTopPosts() { + const cursor = dataLayer.derived.$postSearchCursorTop.get(); + if (!cursor) return; + await dataLayer.requests.loadPostSearchTop(state.$committedQuery.get(), { + limit: 25, + cursor, + }); + } - async function loadMoreLatestPosts() { - const cursor = dataLayer.derived.$postSearchCursorLatest.get(); - if (!cursor) return; - await dataLayer.requests.loadPostSearchLatest( - state.$committedQuery.get(), - { - limit: 25, - cursor, - }, - ); - } + async function loadMoreLatestPosts() { + const cursor = dataLayer.derived.$postSearchCursorLatest.get(); + if (!cursor) return; + await dataLayer.requests.loadPostSearchLatest(state.$committedQuery.get(), { + limit: 25, + cursor, + }); + } - async function loadMoreFeeds() { - const cursor = dataLayer.derived.$feedSearchCursor.get(); - if (!cursor) return; - await dataLayer.requests.loadFeedSearch(state.$committedQuery.get(), { - limit: 15, - cursor, - }); - } + async function loadMoreFeeds() { + const cursor = dataLayer.derived.$feedSearchCursor.get(); + if (!cursor) return; + await dataLayer.requests.loadFeedSearch(state.$committedQuery.get(), { + limit: 15, + cursor, + }); + } - const { - postInteractionHandler, - feedInteractionHandler, - profileInteractionHandler, - } = interactionHandlers; - - function typeaheadTemplate({ query, profiles, onCommit }) { - return html`
- - ${profiles === null - ? html`
- -
` - : profiles.map( - (profile) => html` - handleRecentProfileRecord(profile.did)} - > - ${avatarTemplate({ author: profile, clickAction: "none" })} -
-
- ${getDisplayName(profile)} -
-
- @${profile.handle} -
+ const { + postInteractionHandler, + feedInteractionHandler, + profileInteractionHandler, + } = interactionHandlers; + + function typeaheadTemplate({ query, profiles, onCommit }) { + return html`
+ + ${profiles === null + ? html`
+ +
` + : profiles.map( + (profile) => html` + handleRecentProfileRecord(profile.did)} + > + ${avatarTemplate({ author: profile, clickAction: "none" })} +
+
+ ${getDisplayName(profile)}
- - `, - )} -
`; - } +
@${profile.handle}
+
+ + `, + )} +
`; + } - function recentSearchRowTemplate(q) { - return html`
+ - -
`; - } - - function recentProfileTileTemplate(profile) { - return html` handleRecentProfileRecord(profile.did)} +
${searchIconTemplate()}
+
${q}
+ + - `; - } + ${closeIconTemplate()} + +
`; + } - function recentProfileSkeletonTemplate() { - return html`
handleRecentProfileRecord(profile.did)} + > + ${avatarTemplate({ author: profile, clickAction: "none" })} +
${getDisplayName(profile)}
+ + `; + } + + function recentProfileSkeletonTemplate() { + return html`
+
+
+ ​ +
+
`; + } + + function recentSearchesTemplate({ terms, profileItems }) { + return html`
+
Recent searches
+ ${profileItems.length > 0 + ? html`
+ ${profileItems.map((item) => + keyed( + item.did, + item.profile + ? recentProfileTileTemplate(item.profile) + : recentProfileSkeletonTemplate(), + ), + )} +
` + : ""} + ${terms.map((entry) => recentSearchRowTemplate(entry.q))} +
`; + } + + function postSearchResultsTemplate({ + status, + postSearchResults, + postSearchHasMore, + onLoadMore, + currentUser, + }) { + if (!postSearchResults && status.loading) { + return html`
Searching posts…
`; + } + if (status.error) { + return html`
+ Failed to search posts + ${status.error.message ? html`(${status.error.message})` : ""}.
`; } - - function recentSearchesTemplate({ terms, profileItems }) { - return html`
-
Recent searches
- ${profileItems.length > 0 - ? html`
- ${profileItems.map((item) => - keyed( - item.did, - item.profile - ? recentProfileTileTemplate(item.profile) - : recentProfileSkeletonTemplate(), - ), - )} + if (!postSearchResults || postSearchResults.length === 0) { + return html`
+ No posts found. +
`; + } + return html` { + if (postSearchHasMore) { + await onLoadMore(); + event.detail.resume(); + } + }} + ?disabled=${!postSearchHasMore} + > +
+ ${postSearchResults.map( + (post) => + html`
+ ${smallPostTemplate({ + post, + currentUser, + isAuthenticated, + showReplyToLabel: !!post.record?.reply, + replyToAuthor: post.record?.reply?.parentAuthor ?? null, + isUserPost: currentUser?.did === post.author?.did, + postInteractionHandler, + pluginService, + })} +
`, + )} + ${postSearchHasMore + ? html`
+
` : ""} - ${terms.map((entry) => recentSearchRowTemplate(entry.q))} +
+ `; + } + + function profileSearchResultsTemplate({ + status, + profileSearchResults, + profileSearchHasMore, + currentUser, + }) { + if (!profileSearchResults && status.loading) { + return html`
Searching profiles…
`; + } + if (status.error) { + return html`
+ Failed to search profiles + ${status.error.message ? html`(${status.error.message})` : ""}.
`; } + if (!profileSearchResults || profileSearchResults.length === 0) { + return html`
+ No profiles found. +
`; + } + return profileFeedTemplate({ + profiles: profileSearchResults, + hasMore: profileSearchHasMore, + onLoadMore: loadMoreProfiles, + isAuthenticated, + currentUserDid: currentUser?.did ?? null, + profileInteractionHandler, + pluginService, + }); + } - function postSearchResultsTemplate({ - status, - postSearchResults, - postSearchHasMore, - onLoadMore, - currentUser, - }) { - if (!postSearchResults && status.loading) { - return html`
Searching posts…
`; - } - if (status.error) { - return html`
- Failed to search posts - ${status.error.message ? html`(${status.error.message})` : ""}. -
`; - } - if (!postSearchResults || postSearchResults.length === 0) { - return html`
- No posts found. -
`; - } - return html` { - if (postSearchHasMore) { - await onLoadMore(); - event.detail.resume(); - } - }} - ?disabled=${!postSearchHasMore} - > -
- ${postSearchResults.map( - (post) => - html`
- ${smallPostTemplate({ - post, - currentUser, - isAuthenticated, - showReplyToLabel: !!post.record?.reply, - replyToAuthor: post.record?.reply?.parentAuthor ?? null, - isUserPost: currentUser?.did === post.author?.did, - postInteractionHandler, - pluginService, - })} -
`, - )} - ${postSearchHasMore - ? html`
- -
` - : ""} -
- `; + function feedSearchResultsTemplate({ + status, + feedSearchResults, + feedSearchHasMore, + preferences, + }) { + if (!feedSearchResults && status.loading) { + return html`
Searching feeds…
`; + } + if (status.error) { + return html`
+ Failed to search feeds + ${status.error.message ? html`(${status.error.message})` : ""}. +
`; + } + if (!feedSearchResults || feedSearchResults.length === 0) { + return html`
+ No feeds found. +
`; } + return html` { + if (feedSearchHasMore) { + await loadMoreFeeds(); + event.detail.resume(); + } + }} + ?disabled=${!feedSearchHasMore} + > +
+ ${feedSearchResults.map((feedGenerator) => { + const isPinned = preferences.isFeedPinned(feedGenerator.uri); + return html` + +
+ ${feedGenerator.avatar + ? html`${feedGenerator.displayName}` + : html`${feedGenerator.displayName}`} +
+
+
+ ${feedGenerator.displayName} +
+ ${feedGenerator.creator + ? html`
+ by @${feedGenerator.creator.handle} +
` + : ""} + ${feedGenerator.description + ? // prettier-ignore + html`
${feedGenerator.description}
` + : ""} +
+
+ +
+ + `; + })} + ${feedSearchHasMore + ? html`
+ +
` + : ""} +
+ `; + } - function profileSearchResultsTemplate({ - status, - profileSearchResults, - profileSearchHasMore, - currentUser, - }) { - if (!profileSearchResults && status.loading) { - return html`
- Searching profiles… -
`; - } - if (status.error) { - return html`
- Failed to search profiles - ${status.error.message ? html`(${status.error.message})` : ""}. -
`; - } - if (!profileSearchResults || profileSearchResults.length === 0) { + function getActivePanelTemplate(activeTab, committedQuery, currentUser) { + const status = dataLayer.requests.statusStore.$statuses.get( + TAB_STATUS_PREFIXES[activeTab] + committedQuery, + ); + switch (activeTab) { + case "top": return html`
- No profiles found. -
`; - } - return profileFeedTemplate({ - profiles: profileSearchResults, - hasMore: profileSearchHasMore, - onLoadMore: loadMoreProfiles, - isAuthenticated, - currentUserDid: currentUser?.did ?? null, - profileInteractionHandler, - pluginService, - }); - } - - function feedSearchResultsTemplate({ - status, - feedSearchResults, - feedSearchHasMore, - preferences, - }) { - if (!feedSearchResults && status.loading) { - return html`
Searching feeds…
`; - } - if (status.error) { - return html`
- Failed to search feeds - ${status.error.message ? html`(${status.error.message})` : ""}. + ${postSearchResultsTemplate({ + status, + postSearchResults: dataLayer.derived.$postSearchResultsTop.get(), + postSearchHasMore: !!dataLayer.derived.$postSearchCursorTop.get(), + onLoadMore: loadMoreTopPosts, + currentUser, + })}
`; - } - if (!feedSearchResults || feedSearchResults.length === 0) { + case "latest": return html`
- No feeds found. + ${postSearchResultsTemplate({ + status, + postSearchResults: dataLayer.derived.$postSearchResultsLatest.get(), + postSearchHasMore: + !!dataLayer.derived.$postSearchCursorLatest.get(), + onLoadMore: loadMoreLatestPosts, + currentUser, + })}
`; - } - return html` { - if (feedSearchHasMore) { - await loadMoreFeeds(); - event.detail.resume(); - } - }} - ?disabled=${!feedSearchHasMore} - > -
- ${feedSearchResults.map((feedGenerator) => { - const isPinned = preferences.isFeedPinned(feedGenerator.uri); - return html` - -
- ${feedGenerator.avatar - ? html`${feedGenerator.displayName}` - : html`${feedGenerator.displayName}`} -
-
-
- ${feedGenerator.displayName} -
- ${feedGenerator.creator - ? html`
- by @${feedGenerator.creator.handle} -
` - : ""} - ${feedGenerator.description - ? // prettier-ignore - html`
${feedGenerator.description}
` - : ""} -
-
- -
- - `; + case "feeds": + return html`
+ ${feedSearchResultsTemplate({ + status, + feedSearchResults: dataLayer.derived.$feedSearchResults.get(), + feedSearchHasMore: !!dataLayer.derived.$feedSearchCursor.get(), + preferences: dataLayer.derived.$preferences.get(), })} - ${feedSearchHasMore - ? html`
- -
` - : ""} -
- `; - } - - function getActivePanelTemplate(activeTab, committedQuery, currentUser) { - const status = dataLayer.requests.statusStore.$statuses.get( - TAB_STATUS_PREFIXES[activeTab] + committedQuery, - ); - switch (activeTab) { - case "top": - return html`
- ${postSearchResultsTemplate({ - status, - postSearchResults: dataLayer.derived.$postSearchResultsTop.get(), - postSearchHasMore: !!dataLayer.derived.$postSearchCursorTop.get(), - onLoadMore: loadMoreTopPosts, - currentUser, - })} -
`; - case "latest": - return html`
- ${postSearchResultsTemplate({ - status, - postSearchResults: - dataLayer.derived.$postSearchResultsLatest.get(), - postSearchHasMore: - !!dataLayer.derived.$postSearchCursorLatest.get(), - onLoadMore: loadMoreLatestPosts, - currentUser, - })} -
`; - case "feeds": - return html`
- ${feedSearchResultsTemplate({ - status, - feedSearchResults: dataLayer.derived.$feedSearchResults.get(), - feedSearchHasMore: !!dataLayer.derived.$feedSearchCursor.get(), - preferences: dataLayer.derived.$preferences.get(), - })} -
`; - default: - return html`
- ${profileSearchResultsTemplate({ - status, - profileSearchResults: - dataLayer.derived.$profileSearchResults.get(), - profileSearchHasMore: - !!dataLayer.derived.$profileSearchCursor.get(), - currentUser, - })} -
`; - } +
`; + default: + return html`
+ ${profileSearchResultsTemplate({ + status, + profileSearchResults: dataLayer.derived.$profileSearchResults.get(), + profileSearchHasMore: + !!dataLayer.derived.$profileSearchCursor.get(), + currentUser, + })} +
`; } + } - bindPageTitle(root, () => "Search"); - - pageEffect(root, () => { - const currentUser = dataLayer.derived.$currentUser.get(); - const inputValue = state.$inputValue.get(); - const showTypeahead = state.$showTypeahead.get(); - const committedQuery = state.$committedQuery.get(); - const activeTab = state.$activeTab.get(); - const trimmedInput = inputValue.trim(); - const mode = !trimmedInput - ? "placeholder" - : showTypeahead - ? "typeahead" - : "results"; - - let bodyTemplate; - if (mode === "typeahead") { - bodyTemplate = typeaheadTemplate({ - query: trimmedInput, - profiles: dataLayer.derived.$searchTypeaheadResults.get(), - onCommit: commitSearch, + bindPageTitle(root, () => "Search"); + + pageEffect(root, () => { + const currentUser = dataLayer.derived.$currentUser.get(); + const inputValue = state.$inputValue.get(); + const showTypeahead = state.$showTypeahead.get(); + const committedQuery = state.$committedQuery.get(); + const activeTab = state.$activeTab.get(); + const trimmedInput = inputValue.trim(); + const mode = !trimmedInput + ? "placeholder" + : showTypeahead + ? "typeahead" + : "results"; + + let bodyTemplate; + if (mode === "typeahead") { + bodyTemplate = typeaheadTemplate({ + query: trimmedInput, + profiles: dataLayer.derived.$searchTypeaheadResults.get(), + onCommit: commitSearch, + }); + } else if (mode === "results") { + bodyTemplate = html`
+
+ ${getActivePanelTemplate( + isAuthenticated ? activeTab : "profiles", + committedQuery, + currentUser, + )} +
+
`; + } else { + const recentTerms = isAuthenticated + ? dataLayer.derived.$recentSearchTerms.get() + : []; + const recentProfilesLoading = state.$recentProfilesLoading.get(); + const recentProfileItems = ( + (isAuthenticated + ? dataLayer.derived.$recentSearchProfiles.get() + : null) ?? [] + ) + .map((entry) => ({ + did: entry.did, + profile: isRecentProfileVisible(entry.profile) ? entry.profile : null, + pending: !entry.profile && recentProfilesLoading, + })) + .filter((item) => item.profile || item.pending); + if (recentTerms.length > 0 || recentProfileItems.length > 0) { + bodyTemplate = recentSearchesTemplate({ + terms: recentTerms, + profileItems: recentProfileItems, }); - } else if (mode === "results") { - bodyTemplate = html`
-
- ${getActivePanelTemplate( - isAuthenticated ? activeTab : "profiles", - committedQuery, - currentUser, - )} + } else { + bodyTemplate = html`
+
${searchIconTemplate()}
+
+ ${isAuthenticated + ? "Start typing to search for users, posts, and feeds." + : html`Start typing to search for users.
Sign in to search + for posts.`}
`; - } else { - const recentTerms = isAuthenticated - ? dataLayer.derived.$recentSearchTerms.get() - : []; - const recentProfilesLoading = state.$recentProfilesLoading.get(); - const recentProfileItems = ( - (isAuthenticated - ? dataLayer.derived.$recentSearchProfiles.get() - : null) ?? [] - ) - .map((entry) => ({ - did: entry.did, - profile: isRecentProfileVisible(entry.profile) - ? entry.profile - : null, - pending: !entry.profile && recentProfilesLoading, - })) - .filter((item) => item.profile || item.pending); - if (recentTerms.length > 0 || recentProfileItems.length > 0) { - bodyTemplate = recentSearchesTemplate({ - terms: recentTerms, - profileItems: recentProfileItems, - }); - } else { - bodyTemplate = html`
-
${searchIconTemplate()}
-
- ${isAuthenticated - ? "Start typing to search for users, posts, and feeds." - : html`Start typing to search for users.
Sign in to search - for posts.`} -
-
`; - } } + } - render( - html`
- ${headerTemplate({ - title: "Search", - leftButton: "menu", - onClickMenuButton: () => layout.openSidebar(), - bottomItemTemplate: () => html` -
- ${searchIconTemplate()} - { - // Prevent events from being picked up by password manager extensions - event.stopPropagation(); - handleInput(event.target.value); - }} - @keydown=${(event) => { - event.stopPropagation(); - if (event.key === "Enter") { - event.preventDefault(); - commitSearch(); - } - }} - /> - ${inputValue.length > 0 - ? html` - - ` - : ""} - ${mode === "results" && isAuthenticated - ? html` - handleTabChange(event.detail)} - > - ` - : ""} -
- `, - })} -
-
${bodyTemplate}
-
-
`, - root, - ); - }); - - root.addEventListener("page-enter", () => { - const query = new URLSearchParams(window.location.search); - if (query.get("tab")) { - const tab = query.get("tab"); - state.$activeTab.set(tab === "posts" ? "top" : tab); - } - const q = getUrlQuery(); - if (q) { - state.$inputValue.set(q); - state.$showTypeahead.set(false); - state.$committedQuery.set(q); - loadedTabs.clear(); - tabScrollState.clear(); - loadTabIfNeeded(state.$activeTab.get()); - } - hydrateAndPruneRecentProfiles().catch(console.warn); - }); + render( + html`
+ ${headerTemplate({ + title: "Search", + leftButton: "menu", + onClickMenuButton: () => layout.openSidebar(), + bottomItemTemplate: () => html` +
+ ${searchIconTemplate()} + { + // Prevent events from being picked up by password manager extensions + event.stopPropagation(); + handleInput(event.target.value); + }} + @keydown=${(event) => { + event.stopPropagation(); + if (event.key === "Enter") { + event.preventDefault(); + commitSearch(); + } + }} + /> + ${inputValue.length > 0 + ? html` + + ` + : ""} + ${mode === "results" && isAuthenticated + ? html` + handleTabChange(event.detail)} + > + ` + : ""} +
+ `, + })} +
+
${bodyTemplate}
+
+
`, + root, + ); + }); + + root.addEventListener("page-enter", () => { + const query = new URLSearchParams(window.location.search); + if (query.get("tab")) { + const tab = query.get("tab"); + state.$activeTab.set(tab === "posts" ? "top" : tab); + } + const q = getUrlQuery(); + if (q) { + state.$inputValue.set(q); + state.$showTypeahead.set(false); + state.$committedQuery.set(q); + loadedTabs.clear(); + tabScrollState.clear(); + loadTabIfNeeded(state.$activeTab.get()); + } else { + // Arriving with no query clears whatever the last search left behind + state.$inputValue.set(""); + state.$showTypeahead.set(false); + state.$committedQuery.set(""); + loadedTabs.clear(); + window.scrollTo(0, 0); + } + hydrateAndPruneRecentProfiles().catch(console.warn); + }); - root.addEventListener("page-restore", (event) => { - if (!event.detail?.isBack && !getUrlQuery()) { - state.$inputValue.set(""); - state.$showTypeahead.set(false); - state.$committedQuery.set(""); - loadedTabs.clear(); - window.scrollTo(0, 0); - return; - } - const scrollY = event.detail?.scrollY ?? 0; - window.scrollTo(0, scrollY); - }); - } + root.addEventListener("page-restore", (event) => { + window.scrollTo(0, event.detail?.scrollY ?? 0); + }); } - -export default new SearchView(); diff --git a/src/js/views/settings.view.js b/src/js/views/settings.view.js index a2792b79..a3a0a385 100644 --- a/src/js/views/settings.view.js +++ b/src/js/views/settings.view.js @@ -1,4 +1,3 @@ -import { View } from "/js/views/view.js"; import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { eyeIconTemplate } from "/js/templates/icons/eyeIcon.template.js"; @@ -23,388 +22,381 @@ import { userPlusIconTemplate } from "/js/templates/icons/userPlusIcon.template. import { avatarTemplate } from "/js/templates/avatar.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; -class SettingsView extends View { - async render({ root, context: { dataLayer } }) { - const currentSession = await auth.requireAuth(); - const supportsMultipleAccounts = auth.supportsMultipleAccounts(); +export default async function settingsView({ root, context: { dataLayer } }) { + const currentSession = await auth.requireAuth(); + const supportsMultipleAccounts = auth.supportsMultipleAccounts(); - const $otherAccounts = new Signal.State(null); - const $otherAccountProfiles = new Signal.State({}); - const $accountSwitcherExpanded = new Signal.State(false); - const $pendingAccountSwitcherAction = new Signal.State(null); // { type, did? } + const $otherAccounts = new Signal.State(null); + const $otherAccountProfiles = new Signal.State({}); + const $accountSwitcherExpanded = new Signal.State(false); + const $pendingAccountSwitcherAction = new Signal.State(null); // { type, did? } - function accountsSwitcherTemplate({ - expanded, - accounts, - accountProfiles, - pendingAction, - onToggle, - onSwitch, - onAdd, - onRemove, - }) { - const hasOthers = accounts.length > 0; - return html` - - ${expanded && hasOthers - ? html` -
${hasOthers ? "Switch account" : "Add another account"} + ${!hasOthers + ? pendingAction?.type === "add" + ? html`` + : null + : expanded + ? html`${chevronUpIconTemplate()}` + : html`
+ ` + : null} +
+ `; + } - const menuItems = [ - { - key: "notifications", - icon: notificationsIconTemplate, - label: "Notifications", - url: "/settings/notifications", - }, - { - key: "muted-words", - icon: mutedWordIconTemplate, - label: "Muted words", - url: "/settings/muted-words", - }, - { - key: "muted-accounts", - icon: eyeSlashIconTemplate, - label: "Muted accounts", - url: "/settings/muted-accounts", - }, - { - key: "blocked-accounts", - icon: restrictedIconTemplate, - label: "Blocked accounts", - url: "/settings/blocked-accounts", - }, - { - key: "appearance", - icon: eyeIconTemplate, - label: "Appearance", - url: "/settings/appearance", - }, - { - key: "advanced", - icon: codeIconTemplate, - label: "Advanced", - url: "/settings/advanced", - }, - ]; + const menuItems = [ + { + key: "notifications", + icon: notificationsIconTemplate, + label: "Notifications", + url: "/settings/notifications", + }, + { + key: "muted-words", + icon: mutedWordIconTemplate, + label: "Muted words", + url: "/settings/muted-words", + }, + { + key: "muted-accounts", + icon: eyeSlashIconTemplate, + label: "Muted accounts", + url: "/settings/muted-accounts", + }, + { + key: "blocked-accounts", + icon: restrictedIconTemplate, + label: "Blocked accounts", + url: "/settings/blocked-accounts", + }, + { + key: "appearance", + icon: eyeIconTemplate, + label: "Appearance", + url: "/settings/appearance", + }, + { + key: "advanced", + icon: codeIconTemplate, + label: "Advanced", + url: "/settings/advanced", + }, + ]; - bindPageTitle(root, () => "Settings"); + bindPageTitle(root, () => "Settings"); - pageEffect(root, () => { - const otherAccounts = $otherAccounts.get(); - const otherAccountProfiles = $otherAccountProfiles.get(); - if (otherAccounts === null) return; - render( - html`
- ${headerTemplate({ - title: "Settings", - backButtonFallbackRoute: "/", - })} -
- +
+ Impro v${window.env.version} - ${window.env.gitCommit} +
+
+ Terms + · + Privacy Policy + · + GitHub +
+
+
`, + root, + ); + }); - pageEffect(root, () => { - // Load account profiles - const otherAccounts = $otherAccounts.get(); - if (otherAccounts === null) return; - dataLayer.declarative - .ensureDetailedProfiles(otherAccounts.map((account) => account.did)) - .then((profiles) => { - const profilesByDid = {}; - for (const profile of profiles) { - profilesByDid[profile.did] = profile; - } - $otherAccountProfiles.set(profilesByDid); - }); - }); + async function loadOtherAccounts() { + const accounts = await auth.listAccounts(); + const otherAccounts = accounts.filter( + (account) => account.did !== currentSession.did, + ); + $otherAccounts.set(otherAccounts); + } - root.addEventListener("page-enter", async () => { - loadOtherAccounts(); - }); + pageEffect(root, () => { + // Load account profiles + const otherAccounts = $otherAccounts.get(); + if (otherAccounts === null) return; + dataLayer.declarative + .ensureDetailedProfiles(otherAccounts.map((account) => account.did)) + .then((profiles) => { + const profilesByDid = {}; + for (const profile of profiles) { + profilesByDid[profile.did] = profile; + } + $otherAccountProfiles.set(profilesByDid); + }); + }); - // Account actions navigate away with the pending spinner showing; if the - // user comes back via the back/forward cache the document is restored - // as-is, so reset the stuck pending state. - bindToPage(root, window, "pageshow", (event) => { - if (event.persisted) { - $pendingAccountSwitcherAction.set(null); - } - }); + function loadPageData() { + loadOtherAccounts(); } -} -export default new SettingsView(); + root.addEventListener("page-enter", () => loadPageData()); + + // Account actions navigate away with the pending spinner showing; if the + // user comes back via the back/forward cache the document is restored + // as-is, so reset the stuck pending state. + bindToPage(root, window, "pageshow", (event) => { + if (event.persisted) { + $pendingAccountSwitcherAction.set(null); + } + }); +} diff --git a/src/js/views/settings/advanced.view.js b/src/js/views/settings/advanced.view.js index 2f0ac0b4..456544f8 100644 --- a/src/js/views/settings/advanced.view.js +++ b/src/js/views/settings/advanced.view.js @@ -1,6 +1,5 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { AppViewConfig, DEFAULT_APP_VIEW_CONFIGS } from "/js/config.js"; @@ -15,269 +14,265 @@ import { showToast } from "/js/toasts.js"; import { Signal, ReactiveStore } from "/js/signals.js"; import { PermissionsDeclinedError } from "/js/plugins/pluginService.js"; -class SettingsAdvancedView extends View { - async render({ root, router, layout, context: { pluginService } }) { - await auth.requireAuth(); +export default async function settingsAdvancedView({ + root, + router, + layout, + context: { pluginService }, +}) { + await auth.requireAuth(); - const storedConfig = getAppViewConfig(); - const isStoredCustom = storedConfig.id === CUSTOM_APP_VIEW_CONFIG_ID; + const storedConfig = getAppViewConfig(); + const isStoredCustom = storedConfig.id === CUSTOM_APP_VIEW_CONFIG_ID; - const state = new ReactiveStore("settingsAdvancedView"); - state.$loading = new Signal.State(false); - state.$errorMessage = new Signal.State(null); - state.$appViewSelection = new Signal.State(storedConfig.id); - state.$customAppViewServiceDid = new Signal.State( - isStoredCustom ? storedConfig.appViewServiceDid : "", - ); - state.$customChatServiceDid = new Signal.State( - isStoredCustom ? storedConfig.chatServiceDid : "", + const state = new ReactiveStore("settingsAdvancedView"); + state.$loading = new Signal.State(false); + state.$errorMessage = new Signal.State(null); + state.$appViewSelection = new Signal.State(storedConfig.id); + state.$customAppViewServiceDid = new Signal.State( + isStoredCustom ? storedConfig.appViewServiceDid : "", + ); + state.$customChatServiceDid = new Signal.State( + isStoredCustom ? storedConfig.chatServiceDid : "", + ); + state.$pluginInstallLoading = new Signal.State(false); + + function resolveSelectedAppViewConfig() { + if (state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID) { + return { + id: CUSTOM_APP_VIEW_CONFIG_ID, + appViewServiceDid: state.$customAppViewServiceDid.get().trim(), + chatServiceDid: state.$customChatServiceDid.get().trim(), + }; + } + return ( + DEFAULT_APP_VIEW_CONFIGS.find( + (config) => config.id === state.$appViewSelection.get(), + ) ?? AppViewConfig.BLUESKY ); - state.$pluginInstallLoading = new Signal.State(false); + } - function resolveSelectedAppViewConfig() { - if (state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID) { - return { - id: CUSTOM_APP_VIEW_CONFIG_ID, - appViewServiceDid: state.$customAppViewServiceDid.get().trim(), - chatServiceDid: state.$customChatServiceDid.get().trim(), - }; - } + function isDirty() { + if (state.$appViewSelection.get() !== storedConfig.id) return true; + if (state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID) { return ( - DEFAULT_APP_VIEW_CONFIGS.find( - (config) => config.id === state.$appViewSelection.get(), - ) ?? AppViewConfig.BLUESKY + state.$customAppViewServiceDid.get() !== + storedConfig.appViewServiceDid || + state.$customChatServiceDid.get() !== storedConfig.chatServiceDid ); } + return false; + } - function isDirty() { - if (state.$appViewSelection.get() !== storedConfig.id) return true; - if (state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID) { - return ( - state.$customAppViewServiceDid.get() !== - storedConfig.appViewServiceDid || - state.$customChatServiceDid.get() !== storedConfig.chatServiceDid - ); - } - return false; - } - - function handleSubmit(e) { - e.preventDefault(); - const selectedConfig = resolveSelectedAppViewConfig(); - if (!isValidAppViewConfig(selectedConfig)) { - state.$errorMessage.set("Invalid App View configuration"); - return; - } - state.$loading.set(true); - state.$errorMessage.set(null); - setAppViewConfig(selectedConfig); - window.location.reload(); + function handleSubmit(e) { + e.preventDefault(); + const selectedConfig = resolveSelectedAppViewConfig(); + if (!isValidAppViewConfig(selectedConfig)) { + state.$errorMessage.set("Invalid App View configuration"); + return; } + state.$loading.set(true); + state.$errorMessage.set(null); + setAppViewConfig(selectedConfig); + window.location.reload(); + } - function handleAppViewChange(e) { - state.$appViewSelection.set(e.target.value); - } + function handleAppViewChange(e) { + state.$appViewSelection.set(e.target.value); + } - function handleCustomAppViewDidInput(e) { - state.$customAppViewServiceDid.set(e.target.value); - } + function handleCustomAppViewDidInput(e) { + state.$customAppViewServiceDid.set(e.target.value); + } - function handleCustomChatDidInput(e) { - state.$customChatServiceDid.set(e.target.value); - } + function handleCustomChatDidInput(e) { + state.$customChatServiceDid.set(e.target.value); + } - async function handleInstallPlugin(e) { - e.preventDefault(); - const input = e.target.elements.pluginUrl; - const url = input.value.trim(); - if (!url) return; - state.$pluginInstallLoading.set(true); - try { - const result = await pluginService.installUnregisteredPlugin(url); - input.value = ""; - showToast(`Installed ${result.name}`, { style: "success" }); - } catch (error) { - if (error instanceof PermissionsDeclinedError) { - // User declined the permission prompt; nothing to report. - } else { - showToast(error?.message ?? "Failed to install plugin", { - style: "error", - }); - } - } finally { - state.$pluginInstallLoading.set(false); + async function handleInstallPlugin(e) { + e.preventDefault(); + const input = e.target.elements.pluginUrl; + const url = input.value.trim(); + if (!url) return; + state.$pluginInstallLoading.set(true); + try { + const result = await pluginService.installUnregisteredPlugin(url); + input.value = ""; + showToast(`Installed ${result.name}`, { style: "success" }); + } catch (error) { + if (error instanceof PermissionsDeclinedError) { + // User declined the permission prompt; nothing to report. + } else { + showToast(error?.message ?? "Failed to install plugin", { + style: "error", + }); } + } finally { + state.$pluginInstallLoading.set(false); } + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/settings"); - }); - - bindPageTitle(root, () => "Advanced"); + bindPageTitle(root, () => "Advanced"); - pageEffect(root, () => { - const isCustom = - state.$appViewSelection.get() === CUSTOM_APP_VIEW_CONFIG_ID; - render( - html`
- ${headerTemplate({ - title: "Advanced", - backButtonFallbackRoute: "/settings", - })} -
-
handleSubmit(e)}> -
-

App View

-

- Choose which App View (backend) to use for fetching content. - Tip: You can use the query parameter ?reset-appview to reset - the App View in case of misconfiguration. -

-
-
- handleAppViewChange(e)} + > + ${DEFAULT_APP_VIEW_CONFIGS.map( + (defaultConfig) => html` + + `, + )} + - `, - )} - - -
+ Custom + +
- ${isCustom - ? html` -
-

${alertIconTemplate()} Warning

- Only set these values if you know what they mean! -
-
- - handleCustomAppViewDidInput(e)} - /> -
-
- - handleCustomChatDidInput(e)} - /> -
- ` - : ""} +
+ ${isCustom + ? html` +
+

${alertIconTemplate()} Warning

+ Only set these values if you know what they mean! +
+
+ + handleCustomAppViewDidInput(e)} + /> +
+
+ + handleCustomChatDidInput(e)} + /> +
+ ` + : ""} -
- -
-
- ${state.$errorMessage.get() - ? html`
- ${state.$errorMessage.get()} -
` +
+
- - -
handleInstallPlugin(e)} - > -
-

Install plugin from URL

-

- Install a plugin directly from a public GitHub or Tangled - repository. The repo must contain a valid manifest.json on its - main branch. -

-
-

${alertIconTemplate()} Warning

- Unregistered plugins have not been reviewed. Only install - plugins from sources you trust. -
-
- - -
-
- -
-
-
- -
`, - root, - ); - }); - } + +
+
+ ${state.$errorMessage.get() + ? html`
+ ${state.$errorMessage.get()} +
` + : ""} +
+ + +
handleInstallPlugin(e)} + > +
+

Install plugin from URL

+

+ Install a plugin directly from a public GitHub or Tangled + repository. The repo must contain a valid manifest.json on its + main branch. +

+
+

${alertIconTemplate()} Warning

+ Unregistered plugins have not been reviewed. Only install + plugins from sources you trust. +
+
+ + +
+
+ +
+
+
+ +
`, + root, + ); + }); } - -export default new SettingsAdvancedView(); diff --git a/src/js/views/settings/appearance.view.js b/src/js/views/settings/appearance.view.js index d2bbc1ce..d2246340 100644 --- a/src/js/views/settings/appearance.view.js +++ b/src/js/views/settings/appearance.view.js @@ -1,6 +1,5 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { @@ -10,144 +9,130 @@ import { getDefaultColorScheme, } from "/js/theme.js"; -class SettingsAppearanceView extends View { - async render({ root, router, layout }) { - await auth.requireAuth(); +export default async function settingsAppearanceView({ root, router, layout }) { + await auth.requireAuth(); - function handleHighlightColorChange(newHighlightColor) { - theme.updateHighlightColor(newHighlightColor); - } - - function handleLikeColorChange(newLikeColor) { - theme.updateLikeColor(newLikeColor); - } + function handleHighlightColorChange(newHighlightColor) { + theme.updateHighlightColor(newHighlightColor); + } - function handleColorSchemeChange(newColorScheme) { - theme.updateColorScheme(newColorScheme); - } + function handleLikeColorChange(newLikeColor) { + theme.updateLikeColor(newLikeColor); + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/settings"); - }); + function handleColorSchemeChange(newColorScheme) { + theme.updateColorScheme(newColorScheme); + } - bindPageTitle(root, () => "Appearance"); + bindPageTitle(root, () => "Appearance"); - pageEffect(root, () => { - const currentHighlightColor = theme.$highlightColor.get(); - const defaultHighlightColor = getDefaultHighlightColor(); - const currentLikeColor = theme.$likeColor.get(); - const defaultLikeColor = getDefaultLikeColor(); - const currentColorScheme = theme.$colorScheme.get(); - render( - html`
- ${headerTemplate({ - title: "Appearance", - backButtonFallbackRoute: "/settings", - })} -
-
-
-

Color scheme

-

- Choose between light and dark mode. -

-
-
- { + handleColorSchemeChange(e.target.value); + }} + .value=${currentColorScheme} + > + - - - -
-
-
-
-

Highlight color

-

- Choose the highlight color for buttons and links. -

-
-
- { - handleHighlightColorChange(e.target.value); - }} - type="color" - .value=${currentHighlightColor} - /> - -
-
-
-
-

Like color

-

- Choose the color for liked posts. -

-
-
- { - handleLikeColorChange(e.target.value); - }} - type="color" - .value=${currentLikeColor} - /> - -
-
-
-
`, - root, - ); - }); - } + Light + + + +
+ +
+
+

Highlight color

+

+ Choose the highlight color for buttons and links. +

+
+
+ { + handleHighlightColorChange(e.target.value); + }} + type="color" + .value=${currentHighlightColor} + /> + +
+
+
+
+

Like color

+

Choose the color for liked posts.

+
+
+ { + handleLikeColorChange(e.target.value); + }} + type="color" + .value=${currentLikeColor} + /> + +
+
+ +
`, + root, + ); + }); } - -export default new SettingsAppearanceView(); diff --git a/src/js/views/settings/blockedAccounts.view.js b/src/js/views/settings/blockedAccounts.view.js index 89c599d5..5f8bd2f9 100644 --- a/src/js/views/settings/blockedAccounts.view.js +++ b/src/js/views/settings/blockedAccounts.view.js @@ -1,87 +1,77 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import "/js/components/infinite-scroll-container.js"; -class SettingsBlockedAccountsView extends View { - async render({ - root, - router, - layout, - context: { dataLayer, isAuthenticated, pluginService }, - }) { - await auth.requireAuth(); +export default async function settingsBlockedAccountsView({ + root, + router, + layout, + context: { dataLayer, isAuthenticated, pluginService }, +}) { + await auth.requireAuth(); - async function loadMore() { - const blockedProfiles = dataLayer.derived.$blockedProfiles.get(); - const cursor = blockedProfiles?.cursor; - await dataLayer.requests.loadBlockedProfiles({ cursor }); - } + async function loadBlockedAccounts({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$blockedProfiles.get()?.cursor; + await dataLayer.requests.loadBlockedProfiles({ cursor }); + } - function errorTemplate({ error }) { - console.error(error); - return html`
-
Error loading blocked accounts
- -
`; - } + function loadPageData() { + loadBlockedAccounts({ reload: true }); + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/settings"); - }); + function errorTemplate({ error }) { + console.error(error); + return html`
+
Error loading blocked accounts
+ +
`; + } - bindPageTitle(root, () => "Blocked accounts"); + bindPageTitle(root, () => "Blocked accounts"); - pageEffect(root, () => { - const blockedProfiles = dataLayer.derived.$blockedProfiles.get(); - const status = dataLayer.requests.statusStore.$statuses.get( - "loadBlockedProfiles", - ); - const hasMore = blockedProfiles?.cursor ? true : false; + pageEffect(root, () => { + const blockedProfiles = dataLayer.derived.$blockedProfiles.get(); + const status = dataLayer.requests.statusStore.$statuses.get( + "loadBlockedProfiles", + ); + const hasMore = blockedProfiles?.cursor ? true : false; - render( - html`
- ${headerTemplate({ - title: "Blocked accounts", - backButtonFallbackRoute: "/settings", - })} -
- - ${(() => { - if (status.error) { - return errorTemplate({ error: status.error }); - } - return profileFeedTemplate({ - profiles: blockedProfiles?.blocks ?? null, - hasMore, - onLoadMore: loadMore, - emptyMessage: "You haven't blocked any accounts.", - isAuthenticated, - pluginService, - }); - })()} -
-
`, - root, - ); - }); + render( + html`
+ ${headerTemplate({ + title: "Blocked accounts", + backButtonFallbackRoute: "/settings", + })} +
+ + ${(() => { + if (status.error) { + return errorTemplate({ error: status.error }); + } + return profileFeedTemplate({ + profiles: blockedProfiles?.blocks ?? null, + hasMore, + onLoadMore: loadBlockedAccounts, + emptyMessage: "You haven't blocked any accounts.", + isAuthenticated, + pluginService, + }); + })()} +
+
`, + root, + ); + }); - root.addEventListener("page-enter", async () => { - await loadMore(); - }); - } + root.addEventListener("page-enter", () => loadPageData()); } - -export default new SettingsBlockedAccountsView(); diff --git a/src/js/views/settings/mutedAccounts.view.js b/src/js/views/settings/mutedAccounts.view.js index f469709b..d038b9b4 100644 --- a/src/js/views/settings/mutedAccounts.view.js +++ b/src/js/views/settings/mutedAccounts.view.js @@ -1,84 +1,77 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import "/js/components/infinite-scroll-container.js"; -class SettingsMutedAccountsView extends View { - async render({ - root, - router, - layout, - context: { dataLayer, isAuthenticated, pluginService }, - }) { - await auth.requireAuth(); +export default async function settingsMutedAccountsView({ + root, + router, + layout, + context: { dataLayer, isAuthenticated, pluginService }, +}) { + await auth.requireAuth(); - async function loadMore() { - const mutedProfiles = dataLayer.derived.$mutedProfiles.get(); - const cursor = mutedProfiles?.cursor; - await dataLayer.requests.loadMutedProfiles({ cursor }); - } + async function loadMutedAccounts({ reload = false } = {}) { + const cursor = reload + ? undefined + : dataLayer.derived.$mutedProfiles.get()?.cursor; + await dataLayer.requests.loadMutedProfiles({ cursor }); + } - function errorTemplate({ error }) { - console.error(error); - return html`
-
Error loading muted accounts
- -
`; - } + function loadPageData() { + loadMutedAccounts({ reload: true }); + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/settings"); - }); + function errorTemplate({ error }) { + console.error(error); + return html`
+
Error loading muted accounts
+ +
`; + } - bindPageTitle(root, () => "Muted accounts"); + bindPageTitle(root, () => "Muted accounts"); - pageEffect(root, () => { - const mutedProfiles = dataLayer.derived.$mutedProfiles.get(); - const status = - dataLayer.requests.statusStore.$statuses.get("loadMutedProfiles"); - const hasMore = mutedProfiles?.cursor ? true : false; + pageEffect(root, () => { + const mutedProfiles = dataLayer.derived.$mutedProfiles.get(); + const status = + dataLayer.requests.statusStore.$statuses.get("loadMutedProfiles"); + const hasMore = mutedProfiles?.cursor ? true : false; - render( - html`
- ${headerTemplate({ - title: "Muted accounts", - backButtonFallbackRoute: "/settings", - })} -
- - ${(() => { - if (status.error) { - return errorTemplate({ error: status.error }); - } - return profileFeedTemplate({ - profiles: mutedProfiles?.mutes ?? null, - hasMore, - onLoadMore: loadMore, - emptyMessage: "You have not muted any accounts yet.", - isAuthenticated, - pluginService, - rightItemTemplate: null, - }); - })()} -
-
`, - root, - ); - }); + render( + html`
+ ${headerTemplate({ + title: "Muted accounts", + backButtonFallbackRoute: "/settings", + })} +
+ + ${(() => { + if (status.error) { + return errorTemplate({ error: status.error }); + } + return profileFeedTemplate({ + profiles: mutedProfiles?.mutes ?? null, + hasMore, + onLoadMore: loadMutedAccounts, + emptyMessage: "You have not muted any accounts yet.", + isAuthenticated, + pluginService, + rightItemTemplate: null, + }); + })()} +
+
`, + root, + ); + }); - root.addEventListener("page-enter", async () => { - await loadMore(); - }); - } + root.addEventListener("page-enter", () => loadPageData()); } - -export default new SettingsMutedAccountsView(); diff --git a/src/js/views/settings/mutedWords.view.js b/src/js/views/settings/mutedWords.view.js index c571705b..d70e7ca6 100644 --- a/src/js/views/settings/mutedWords.view.js +++ b/src/js/views/settings/mutedWords.view.js @@ -1,6 +1,5 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { closeIconTemplate } from "/js/templates/icons/closeIcon.template.js"; import { plusIconTemplate } from "/js/templates/icons/plusIcon.template.js"; @@ -12,353 +11,344 @@ import "/js/components/context-menu.js"; import "/js/components/context-menu-item.js"; import "/js/components/context-menu-label.js"; -class SettingsMutedWordsView extends View { - async render({ root, router, layout, context: { dataLayer } }) { - await auth.requireAuth(); +export default async function settingsMutedWordsView({ + root, + router, + layout, + context: { dataLayer }, +}) { + await auth.requireAuth(); - const state = new ReactiveStore("settingsMutedWordsView"); - state.$error = new Signal.State(""); - state.$hasValue = new Signal.State(false); - state.$isSaving = new Signal.State(false); - state.$removingWordId = new Signal.State(null); - state.$renewingWordId = new Signal.State(null); + const state = new ReactiveStore("settingsMutedWordsView"); + state.$error = new Signal.State(""); + state.$hasValue = new Signal.State(false); + state.$isSaving = new Signal.State(false); + state.$removingWordId = new Signal.State(null); + state.$renewingWordId = new Signal.State(null); - function sanitizeMutedWordValue(value) { - return value - .trim() - .replace(/^#/, "") - .replace(/[​‌‍­]/g, ""); - } + function sanitizeMutedWordValue(value) { + return value + .trim() + .replace(/^#/, "") + .replace(/[​‌‍­]/g, ""); + } - function formatExpiration(expiresAt) { - const expirationDate = new Date(expiresAt); - const now = new Date(); - if (expirationDate < now) { - return "Expired"; - } - const diffDays = differenceInDays(expirationDate, now); - if (diffDays <= 1) { - const diffHours = differenceInHours(expirationDate, now); - return `Expires in ${diffHours} hour${diffHours === 1 ? "" : "s"}`; - } - return `Expires in ${diffDays} day${diffDays === 1 ? "" : "s"}`; + function formatExpiration(expiresAt) { + const expirationDate = new Date(expiresAt); + const now = new Date(); + if (expirationDate < now) { + return "Expired"; + } + const diffDays = differenceInDays(expirationDate, now); + if (diffDays <= 1) { + const diffHours = differenceInHours(expirationDate, now); + return `Expires in ${diffHours} hour${diffHours === 1 ? "" : "s"}`; } + return `Expires in ${diffDays} day${diffDays === 1 ? "" : "s"}`; + } - async function handleSubmit(e) { - e.preventDefault(); - const formData = new FormData(e.target); + async function handleSubmit(e) { + e.preventDefault(); + const formData = new FormData(e.target); - const sanitized = sanitizeMutedWordValue(formData.get("word")); - if (!sanitized) { - state.$error.set("Please enter a valid word, tag, or phrase to mute"); - return; - } + const sanitized = sanitizeMutedWordValue(formData.get("word")); + if (!sanitized) { + state.$error.set("Please enter a valid word, tag, or phrase to mute"); + return; + } - const targetValue = formData.get("target"); - const targets = targetValue === "content" ? ["content", "tag"] : ["tag"]; - const excludeFollowing = formData.get("exclude-following") === "on"; - const actorTarget = excludeFollowing ? "exclude-following" : "all"; + const targetValue = formData.get("target"); + const targets = targetValue === "content" ? ["content", "tag"] : ["tag"]; + const excludeFollowing = formData.get("exclude-following") === "on"; + const actorTarget = excludeFollowing ? "exclude-following" : "all"; - const duration = formData.get("duration"); - let expiresAt; - const now = Date.now(); - const oneDayMs = 24 * 60 * 60 * 1000; - if (duration === "24_hours") { - expiresAt = new Date(now + oneDayMs).toISOString(); - } else if (duration === "7_days") { - expiresAt = new Date(now + 7 * oneDayMs).toISOString(); - } else if (duration === "30_days") { - expiresAt = new Date(now + 30 * oneDayMs).toISOString(); - } + const duration = formData.get("duration"); + let expiresAt; + const now = Date.now(); + const oneDayMs = 24 * 60 * 60 * 1000; + if (duration === "24_hours") { + expiresAt = new Date(now + oneDayMs).toISOString(); + } else if (duration === "7_days") { + expiresAt = new Date(now + 7 * oneDayMs).toISOString(); + } else if (duration === "30_days") { + expiresAt = new Date(now + 30 * oneDayMs).toISOString(); + } - state.$isSaving.set(true); - state.$error.set(""); + state.$isSaving.set(true); + state.$error.set(""); - try { - await dataLayer.mutations.addMutedWord({ - value: sanitized, - targets, - actorTarget, - expiresAt, - }); - resetForm(); - } catch (err) { - state.$error.set(err.message || "Failed to add muted word"); - } finally { - state.$isSaving.set(false); - } + try { + await dataLayer.mutations.addMutedWord({ + value: sanitized, + targets, + actorTarget, + expiresAt, + }); + resetForm(); + } catch (err) { + state.$error.set(err.message || "Failed to add muted word"); + } finally { + state.$isSaving.set(false); } + } - function resetForm() { - root.querySelector(".muted-word-form").reset(); - } + function resetForm() { + root.querySelector(".muted-word-form").reset(); + } - async function handleRemove(word) { - const confirmed = await confirmModal( - `This will delete "${word.value}" from your muted words. You can always add it back later.`, - { - title: "Are you sure?", - confirmButtonText: "Remove", - confirmButtonStyle: "danger", - }, - ); - if (!confirmed) return; + async function handleRemove(word) { + const confirmed = await confirmModal( + `This will delete "${word.value}" from your muted words. You can always add it back later.`, + { + title: "Are you sure?", + confirmButtonText: "Remove", + confirmButtonStyle: "danger", + }, + ); + if (!confirmed) return; - state.$removingWordId.set(word.id); - try { - await dataLayer.mutations.removeMutedWord(word.id); - } catch (err) { - state.$error.set(err.message || "Failed to remove muted word"); - } finally { - state.$removingWordId.set(null); - } + state.$removingWordId.set(word.id); + try { + await dataLayer.mutations.removeMutedWord(word.id); + } catch (err) { + state.$error.set(err.message || "Failed to remove muted word"); + } finally { + state.$removingWordId.set(null); } + } - async function handleRenew(word, duration) { - const now = Date.now(); - const oneDayMs = 24 * 60 * 60 * 1000; - let expiresAt; - if (duration === "24_hours") { - expiresAt = new Date(now + oneDayMs).toISOString(); - } else if (duration === "7_days") { - expiresAt = new Date(now + 7 * oneDayMs).toISOString(); - } else if (duration === "30_days") { - expiresAt = new Date(now + 30 * oneDayMs).toISOString(); - } + async function handleRenew(word, duration) { + const now = Date.now(); + const oneDayMs = 24 * 60 * 60 * 1000; + let expiresAt; + if (duration === "24_hours") { + expiresAt = new Date(now + oneDayMs).toISOString(); + } else if (duration === "7_days") { + expiresAt = new Date(now + 7 * oneDayMs).toISOString(); + } else if (duration === "30_days") { + expiresAt = new Date(now + 30 * oneDayMs).toISOString(); + } - state.$renewingWordId.set(word.id); - try { - await dataLayer.mutations.updateMutedWord(word.id, { expiresAt }); - } catch (err) { - state.$error.set(err.message || "Failed to renew muted word"); - } finally { - state.$renewingWordId.set(null); - } + state.$renewingWordId.set(word.id); + try { + await dataLayer.mutations.updateMutedWord(word.id, { expiresAt }); + } catch (err) { + state.$error.set(err.message || "Failed to renew muted word"); + } finally { + state.$renewingWordId.set(null); } + } - function mutedWordItemTemplate({ - word, - isRemoving, - isRenewing, - onRemove, - onRenew, - }) { - const targetLabel = word.targets.includes("content") - ? "text & tags" - : "tags"; - const hasExpiration = !!word.expiresAt; - const hasExcludeFollowing = word.actorTarget === "exclude-following"; - const metaParts = []; - if (hasExpiration) { - metaParts.push(formatExpiration(word.expiresAt)); - } - if (hasExcludeFollowing) { - metaParts.push("Excludes users you follow"); - } - const expirationDate = word.expiresAt ? new Date(word.expiresAt) : null; - const isExpired = expirationDate && expirationDate < new Date(); + function mutedWordItemTemplate({ + word, + isRemoving, + isRenewing, + onRemove, + onRenew, + }) { + const targetLabel = word.targets.includes("content") + ? "text & tags" + : "tags"; + const hasExpiration = !!word.expiresAt; + const hasExcludeFollowing = word.actorTarget === "exclude-following"; + const metaParts = []; + if (hasExpiration) { + metaParts.push(formatExpiration(word.expiresAt)); + } + if (hasExcludeFollowing) { + metaParts.push("Excludes users you follow"); + } + const expirationDate = word.expiresAt ? new Date(word.expiresAt) : null; + const isExpired = expirationDate && expirationDate < new Date(); - return html` -
-
-
- ${word.value} - in ${targetLabel} -
- ${metaParts.length > 0 - ? html`
- ${metaParts.join(" • ")} -
` - : ""} -
-
- ${isExpired - ? html` - - - Renew duration - onRenew(word, "24_hours")} - > - 24 hours - - onRenew(word, "7_days")}> - 7 days - - onRenew(word, "30_days")}> - 30 days - - onRenew(word, "forever")}> - Forever - - - ` - : ""} - + return html` +
+
+
+ ${word.value} + in ${targetLabel}
+ ${metaParts.length > 0 + ? html`
+ ${metaParts.join(" • ")} +
` + : ""}
- `; - } - - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/settings"); - }); - - bindPageTitle(root, () => "Muted words"); +
+ ${isExpired + ? html` + + + Renew duration + onRenew(word, "24_hours")}> + 24 hours + + onRenew(word, "7_days")}> + 7 days + + onRenew(word, "30_days")}> + 30 days + + onRenew(word, "forever")}> + Forever + + + ` + : ""} + +
+
+ `; + } - pageEffect(root, () => { - const preferences = dataLayer.derived.$preferences.get(); - const mutedWords = preferences - ? [...preferences.getMutedWords()].reverse() - : []; + bindPageTitle(root, () => "Muted words"); - render( - html`
- ${headerTemplate({ - title: "Muted words", - backButtonFallbackRoute: "/settings", - })} -
-
handleSubmit(e)} - > -

Add muted words and tags

-

- Posts can be muted based on their text, their tags, or both. -

- { - if (state.$error.get()) { - state.$error.set(""); - } - state.$hasValue.set(!!e.target.value.trim()); - }} - autocomplete="off" - autocorrect="off" - autocapitalize="none" - /> + pageEffect(root, () => { + const preferences = dataLayer.derived.$preferences.get(); + const mutedWords = preferences + ? [...preferences.getMutedWords()].reverse() + : []; -
Duration:
-
- - - - -
+ render( + html`
+ ${headerTemplate({ + title: "Muted words", + backButtonFallbackRoute: "/settings", + })} +
+ handleSubmit(e)} + > +

Add muted words and tags

+

+ Posts can be muted based on their text, their tags, or both. +

+ { + if (state.$error.get()) { + state.$error.set(""); + } + state.$hasValue.set(!!e.target.value.trim()); + }} + autocomplete="off" + autocorrect="off" + autocapitalize="none" + /> -
Mute in:
-
- - -
+
Duration:
+
+ + + + +
-
Options:
-
-
`, - root, - ); - }); - } -} + ${state.$error.get()} +
` + : ""} + -export default new SettingsMutedWordsView(); +

Your muted words

+ ${mutedWords.length > 0 + ? html`
+ ${mutedWords.map((word) => + mutedWordItemTemplate({ + word, + isRemoving: state.$removingWordId.get() === word.id, + isRenewing: state.$renewingWordId.get() === word.id, + onRemove: handleRemove, + onRenew: handleRenew, + }), + )} +
` + : html`
+ You haven't muted any words or tags yet +
`} + +
`, + root, + ); + }); +} diff --git a/src/js/views/settings/notifications.view.js b/src/js/views/settings/notifications.view.js index 6d560de5..20bb58d0 100644 --- a/src/js/views/settings/notifications.view.js +++ b/src/js/views/settings/notifications.view.js @@ -1,6 +1,5 @@ -import { View } from "/js/views/view.js"; import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { classnames } from "/js/utils.js"; @@ -9,101 +8,92 @@ import { showToast } from "/js/toasts.js"; import { Signal } from "/js/signals.js"; import "/js/components/toggle-switch.js"; -class SettingsNotificationsView extends View { - async render({ - root, - router, - layout, - context: { systemNotificationService }, - }) { - await auth.requireAuth(); +export default async function settingsNotificationsView({ + root, + router, + layout, + context: { systemNotificationService }, +}) { + await auth.requireAuth(); - const $enabled = new Signal.State( - systemNotificationService?.isEnabled ?? false, - ); + const $enabled = new Signal.State( + systemNotificationService?.isEnabled ?? false, + ); - async function handleToggle(checked) { - if (!systemNotificationService) return; - if (!checked) { - systemNotificationService.disable(); - $enabled.set(false); - return; - } - const confirmed = await confirmModal( - "Impro will ask your browser for permission to show notifications. You can turn this off again at any time.", - { title: "Enable notifications?", confirmButtonText: "Continue" }, - ); - if (!confirmed) return; - const result = await systemNotificationService.requestPermission(); - if (result === "granted") { - $enabled.set(true); - } else { - $enabled.set(false); - if (result === "denied") { - showToast( - "Notifications are blocked for this site. Re-enable them in your browser's site settings.", - { style: "error" }, - ); - } + async function handleToggle(checked) { + if (!systemNotificationService) return; + if (!checked) { + systemNotificationService.disable(); + $enabled.set(false); + return; + } + const confirmed = await confirmModal( + "Impro will ask your browser for permission to show notifications. You can turn this off again at any time.", + { title: "Enable notifications?", confirmButtonText: "Continue" }, + ); + if (!confirmed) return; + const result = await systemNotificationService.requestPermission(); + if (result === "granted") { + $enabled.set(true); + } else { + $enabled.set(false); + if (result === "denied") { + showToast( + "Notifications are blocked for this site. Re-enable them in your browser's site settings.", + { style: "error" }, + ); } } + } - bindToPage(root, layout, "active-nav-click", (event) => { - event.preventDefault(); - router.go("/settings"); - }); - - bindPageTitle(root, () => "Notifications"); + bindPageTitle(root, () => "Notifications"); - pageEffect(root, () => { - const enabled = $enabled.get(); - const isSupported = systemNotificationService?.isSupported ?? false; - const permissionState = - systemNotificationService?.permissionState ?? "unsupported"; - const isDenied = permissionState === "denied"; + pageEffect(root, () => { + const enabled = $enabled.get(); + const isSupported = systemNotificationService?.isSupported ?? false; + const permissionState = + systemNotificationService?.permissionState ?? "unsupported"; + const isDenied = permissionState === "denied"; - let description = - "Get notified of new activity while Impro is open in a tab or window."; - if (!isSupported) { - description = "Not supported on this device."; - } else if (isDenied) { - description = - "Notifications are blocked for this site. Re-enable them in your browser's site settings to turn this on."; - } + let description = + "Get notified of new activity while Impro is open in a tab or window."; + if (!isSupported) { + description = "Not supported on this device."; + } else if (isDenied) { + description = + "Notifications are blocked for this site. Re-enable them in your browser's site settings to turn this on."; + } - render( - html`
- ${headerTemplate({ - title: "Notifications", - backButtonFallbackRoute: "/settings", - })} -
-
-
-

Enable desktop notifications

-

${description}

-
-
- handleToggle(event.detail.checked)} - > -
-
-
-
`, - root, - ); - }); - } + render( + html`
+ ${headerTemplate({ + title: "Notifications", + backButtonFallbackRoute: "/settings", + })} +
+
+
+

Enable desktop notifications

+

${description}

+
+
+ handleToggle(event.detail.checked)} + > +
+
+
+
`, + root, + ); + }); } - -export default new SettingsNotificationsView(); diff --git a/src/js/views/view.js b/src/js/views/view.js deleted file mode 100644 index 658dc3f7..00000000 --- a/src/js/views/view.js +++ /dev/null @@ -1,6 +0,0 @@ -// Nothing special here, just a base class for views -export class View { - render({ root, router, context }) { - throw new Error("Not implemented"); - } -} diff --git a/tests/e2e/specs/views/feeds.view.test.js b/tests/e2e/specs/views/feeds.view.test.js index 88bb663d..8059f79d 100644 --- a/tests/e2e/specs/views/feeds.view.test.js +++ b/tests/e2e/specs/views/feeds.view.test.js @@ -450,6 +450,8 @@ test.describe("Feeds view", () => { .locator('[data-testid="feeds-list-item-unpin-button"]') .click(); + await expect(feedsView.locator(".feeds-list-item")).toHaveCount(2); + const titlesAfterUnpin = await feedsView .locator(".feeds-list-item-title") .allTextContents(); diff --git a/tests/unit/specs/mainLayout.test.js b/tests/unit/specs/mainLayout.test.js index 2fb94614..44ab5dc2 100644 --- a/tests/unit/specs/mainLayout.test.js +++ b/tests/unit/specs/mainLayout.test.js @@ -183,7 +183,9 @@ describe("MainLayout", () => { it("lets a layout listener claim active nav clicks via preventDefault", async (t) => { const scrollTo = t.mock.method(window, "scrollTo", () => {}); const { layout, appRoot } = harness; - setRoute({ layoutOptions: { activeNavItem: "home" } }); + setRoute({ + layoutOptions: { activeNavItem: "home", isNavItemPage: true }, + }); await flushRender(); const handler = mock.fn((event) => event.preventDefault()); layout.addEventListener("active-nav-click", handler); @@ -197,7 +199,9 @@ describe("MainLayout", () => { it("scrolls to top on active nav clicks nobody claims", async (t) => { const scrollTo = t.mock.method(window, "scrollTo", () => {}); - setRoute({ layoutOptions: { activeNavItem: "home" } }); + setRoute({ + layoutOptions: { activeNavItem: "home", isNavItemPage: true }, + }); await flushRender(); harness.appRoot.querySelector("[data-testid='footer-nav-home']").click(); diff --git a/tests/unit/specs/router.test.js b/tests/unit/specs/router.test.js index 92af5eaa..ce6f5d21 100644 --- a/tests/unit/specs/router.test.js +++ b/tests/unit/specs/router.test.js @@ -1022,7 +1022,7 @@ describe("layout visibility", () => { hiddenAtRestoreTime = isLayoutHidden(); }); - await router.load("/test"); + await router.load("/test", { isBack: true }); assert.deepEqual(hiddenAtRestoreTime, false); }); @@ -1162,7 +1162,7 @@ describe("scroll position persistence", () => { await withScrollY(175, async () => { await router.load("/b"); // leaving /a saves 175 under /a - await router.load("/a"); // returning to cached /a restores it + await router.load("/a", { isBack: true }); // back to cached /a restores it }); assert.deepEqual(restoredScrollY, 175); @@ -1259,3 +1259,35 @@ describe("scrollRestore", () => { assert.deepEqual(scrolledBeforeDispatch, [[0, 175]]); }); }); + +describe("page event dispatch", () => { + function createRouter() { + const router = new Router(); + router.renderRoute(() => {}); + router.addRoute("/a", () => () => {}); + router.addRoute("/b", () => () => {}); + mountRouter(router); + return router; + } + + async function eventsFor(loadOptions) { + const router = createRouter(); + await router.load("/a"); + const pageA = router.pages.get("/a").el; + const seen = []; + for (const name of ["page-enter", "page-restore"]) { + pageA.addEventListener(name, () => seen.push(name)); + } + await router.load("/b"); + await router.load("/a", loadOptions); + return seen; + } + + it("dispatches page-enter when a cached page is revisited forwards", async () => { + assert.deepEqual(await eventsFor({}), ["page-enter"]); + }); + + it("dispatches page-restore only on a back navigation", async () => { + assert.deepEqual(await eventsFor({ isBack: true }), ["page-restore"]); + }); +}); diff --git a/tests/unit/specs/templates/sidebar.template.test.js b/tests/unit/specs/templates/sidebar.template.test.js index 484411ce..72d9d7fd 100644 --- a/tests/unit/specs/templates/sidebar.template.test.js +++ b/tests/unit/specs/templates/sidebar.template.test.js @@ -1,7 +1,8 @@ -import { describe, it, beforeEach, mock } from "node:test"; +import { describe, it, beforeEach, afterEach, mock } from "node:test"; import assert from "node:assert/strict"; import { sidebarTemplate } from "/js/templates/sidebar.template.js"; import { render } from "/js/lib/lit-html.js"; +import { raf } from "/js/utils.js"; const mockUser = { did: "did:plc:testuser", @@ -578,3 +579,72 @@ describe("sidebarTemplate - plugin sidebar items", () => { ); }); }); + +describe("sidebarTemplate - active nav item clicks", () => { + let originalRouter; + let go; + + beforeEach(() => { + originalRouter = window.router; + go = mock.fn(); + // the non-active branch navigates in-app rather than following the href + window.router = { go }; + }); + + afterEach(() => { + window.router = originalRouter; + }); + + // The non-active branch navigates after two animation frames, so let the + // handler settle while the router stub is still installed. + async function clickNavItem({ + isNavItemPage, + activeNavItem = "chat", + id = "chat", + }) { + const onClickActiveItem = mock.fn(); + const container = document.createElement("div"); + render( + sidebarTemplate({ + isAuthenticated: true, + currentUser: mockUser, + activeNavItem, + isNavItemPage, + onClickActiveItem, + }), + container, + ); + const link = container.querySelector(`[data-testid="sidebar-nav-${id}"]`); + const event = new window.MouseEvent("click", { + bubbles: true, + cancelable: true, + }); + link.dispatchEvent(event); + await raf(); + await raf(); + return { onClickActiveItem, event }; + } + + it("claims the click when already on the item's own page", async () => { + const { onClickActiveItem, event } = await clickNavItem({ + isNavItemPage: true, + }); + assert.equal(onClickActiveItem.mock.calls.length, 1); + assert(event.defaultPrevented); + }); + + it("navigates instead of claiming the click from a deeper page in the same section", async () => { + const { onClickActiveItem } = await clickNavItem({ isNavItemPage: false }); + assert.equal(onClickActiveItem.mock.calls.length, 0); + assert.equal(go.mock.calls.length, 1); + }); + + it("claims the click on the user's own profile despite the did/handle url", async () => { + const { onClickActiveItem } = await clickNavItem({ + isNavItemPage: true, + activeNavItem: "profile", + id: "profile", + }); + assert.equal(onClickActiveItem.mock.calls.length, 1); + }); +}); -- knotmirror 0.0.1 From 5275bb08225f3f6816919868e572eedcc18ab0cb Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 05:11:09 -0500 Subject: [PATCH 20/25] Tweak saved accounts section styles --- package.json | 2 +- src/css/style.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7443dca6..7a57169c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.191", + "version": "0.18.192", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index e68d3105..78204b8b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -8714,6 +8714,7 @@ moderation-warning .toggle-content { display: flex; flex-direction: column; gap: 12px; + max-width: 600px; } #login-view .saved-accounts-heading { -- knotmirror 0.0.1 From 6baac08b8ca4f47369afe16ff2a445098889252d Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 08:29:34 -0500 Subject: [PATCH 21/25] Update router logic --- eleventy.config.js | 1 + package.json | 2 +- src/js/app.js | 1 - src/js/router.js | 8 +++++++- src/js/views/search.view.js | 5 ----- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index 001a2c0d..7e381b05 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -59,6 +59,7 @@ export default async function (eleventyConfig) { // Create content-hashed filenames eleventyConfig.on("eleventy.after", async ({ dir, results }) => { + if (isDev) return; await applyContentHashing({ outputDir: dir.output, htmlFiles: results diff --git a/package.json b/package.json index 7a57169c..453b3671 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.192", + "version": "0.18.193", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/app.js b/src/js/app.js index 611aeda5..af6f5330 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -286,7 +286,6 @@ export async function main() { }); router.addRoute("/search", () => searchView, { layoutOptions: { activeNavItem: "search", isNavItemPage: true }, - scrollRestore: "manual", }); router.addRoute("/hashtag/:tag", () => hashtagView); router.addRoute("/profile/:handleOrDid/feed/:rkey", () => feedDetailView); diff --git a/src/js/router.js b/src/js/router.js index 9a62a346..46388369 100644 --- a/src/js/router.js +++ b/src/js/router.js @@ -1,6 +1,6 @@ import { EventEmitter, EventTarget } from "/js/eventEmitter.js"; import { effect, Signal } from "/js/signals.js"; -import { BoundedMap } from "/js/utils.js"; +import { BoundedMap, raf } from "/js/utils.js"; const MAX_PAGES = 5; @@ -292,6 +292,12 @@ export class Router extends EventEmitter { default: console.warn(`unknown scrollRestore type: ${scrollRestore}`); } + // Let the swapped-in page paint before route effects and restore + // handlers run, so iOS Safari has a live page to replace its + // interactive back-swipe snapshot with. + await raf(); + await raf(); + if (this.currentPage !== page || this.currentPath !== path) return; this.currentPage.dispatchEvent( new CustomEvent(isBack ? "page-restore" : "page-enter", { detail: { scrollY }, diff --git a/src/js/views/search.view.js b/src/js/views/search.view.js index ca54b521..fda364c4 100644 --- a/src/js/views/search.view.js +++ b/src/js/views/search.view.js @@ -769,12 +769,7 @@ export default async function searchView({ state.$showTypeahead.set(false); state.$committedQuery.set(""); loadedTabs.clear(); - window.scrollTo(0, 0); } hydrateAndPruneRecentProfiles().catch(console.warn); }); - - root.addEventListener("page-restore", (event) => { - window.scrollTo(0, event.detail?.scrollY ?? 0); - }); } -- knotmirror 0.0.1 From 2b349136635034377ba26e3d449404cfdd27f36e Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 08:36:45 -0500 Subject: [PATCH 22/25] Update router logic --- package.json | 2 +- src/js/router.js | 17 +++++++++++------ src/js/views/home.view.js | 1 - 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 453b3671..370ff0c5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.193", + "version": "0.18.194", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/router.js b/src/js/router.js index 46388369..fc1d3fba 100644 --- a/src/js/router.js +++ b/src/js/router.js @@ -258,16 +258,15 @@ export class Router extends EventEmitter { window.dispatchEvent(new CustomEvent("page-transition")); // Strip query parameters for route matching (but keep full path for caching) const pathname = path.split("?")[0]; - if (this.currentPage) { + const outgoingPage = this.currentPage; + if (outgoingPage) { // Safari can keep processing a focused search control after its page is // hidden. Release focus before moving the page into the route cache. const activeElement = document.activeElement; - if (activeElement && this.currentPage.contains(activeElement)) { + if (activeElement && outgoingPage.contains(activeElement)) { activeElement.blur(); } - this.currentPage.dispatchEvent(new CustomEvent("page-exit")); - this.currentPage.classList.remove("page-visible"); - this.currentPage.classList.add("page-hidden"); + outgoingPage.dispatchEvent(new CustomEvent("page-exit")); } if (this.pages.has(path)) { // Return to existing page @@ -278,6 +277,8 @@ export class Router extends EventEmitter { const scrollY = this.scrollStates.get(path) ?? 0; this.currentPage.classList.remove("page-hidden"); this.currentPage.classList.add("page-visible"); + outgoingPage.classList.remove("page-visible"); + outgoingPage.classList.add("page-hidden"); // Scroll before dispatching so a "manual" view's own scroll wins const scrollRestore = routeInfo.options.scrollRestore ?? "back"; switch (scrollRestore) { @@ -315,7 +316,7 @@ export class Router extends EventEmitter { const view = await viewGetter(); const newPage = document.createElement("div"); - newPage.classList.add("page", "page-visible"); + newPage.classList.add("page", "page-hidden"); const container = options.layout === false ? this.containers.bare : this.containers.default; container.appendChild(newPage); @@ -328,6 +329,10 @@ export class Router extends EventEmitter { layout: options.layout === false ? null : this.layout, container: this.currentPage, }); + this.currentPage.classList.remove("page-hidden"); + this.currentPage.classList.add("page-visible"); + outgoingPage?.classList.remove("page-visible"); + outgoingPage?.classList.add("page-hidden"); this.currentPage.dispatchEvent(new CustomEvent("page-enter")); this.emit("page-shown", this.currentPage); } diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js index d3f633e3..7d8d0299 100644 --- a/src/js/views/home.view.js +++ b/src/js/views/home.view.js @@ -400,7 +400,6 @@ export default async function homeView({ preloadHiddenFeeds(pinnedItems); initializePostSeenObservers(pinnedItems); - window.scrollTo(0, 0); }); // Ensure current user before loading feed to prevent flash of unfiltered feed -- knotmirror 0.0.1 From 3cc1d18f60fc4b62dc8596b58aacebdd41ce689e Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 10:18:26 -0500 Subject: [PATCH 23/25] Update view lifecycle --- package.json | 2 +- src/css/style.css | 1 - src/js/app.js | 15 +--- src/js/router.js | 28 ++++--- src/js/views/chatDetail.view.js | 6 +- src/js/views/feeds.view.js | 3 +- src/js/views/home.view.js | 22 ++---- src/js/views/listDetail.view.js | 3 +- src/js/views/login.view.js | 2 - src/js/views/notifications.view.js | 1 + src/js/views/postThread.view.js | 6 +- src/js/views/profile.view.js | 29 ++------ src/js/views/search.view.js | 10 +-- tests/unit/specs/router.test.js | 114 ++++++++++++++++++++++------- 14 files changed, 130 insertions(+), 112 deletions(-) diff --git a/package.json b/package.json index 370ff0c5..4a81c60f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.194", + "version": "0.18.195", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index 78204b8b..dfc1ace2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -6025,7 +6025,6 @@ button.profile-list-item-button.is-disabled { align-items: center; justify-content: center; background-color: var(--highlight-color); - color: var(--background-color); } .following-avatar .icon svg { diff --git a/src/js/app.js b/src/js/app.js index af6f5330..d6f152b5 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -54,11 +54,7 @@ import { InteractionHandlers } from "/js/interactionHandlers.js"; import { hapticsImpactLight } from "/js/haptics.js"; import { isNative, wait } from "/js/utils.js"; import { effect, untrack } from "/js/signals.js"; -import { - enableNativeRefresh, - disableNativeRefresh, - dispatchNativeRefreshEnded, -} from "/js/nativeRefresh.js"; +import { dispatchNativeRefreshEnded } from "/js/nativeRefresh.js"; import { NOTIFICATIONS_PAGE_SIZE, IN_APP_LINK_DOMAINS } from "/js/config.js"; import { setUpIdentityPrecaching } from "/js/identityPrecaching.js"; import { @@ -286,6 +282,7 @@ export async function main() { }); router.addRoute("/search", () => searchView, { layoutOptions: { activeNavItem: "search", isNavItemPage: true }, + scrollRestore: "always", }); router.addRoute("/hashtag/:tag", () => hashtagView); router.addRoute("/profile/:handleOrDid/feed/:rkey", () => feedDetailView); @@ -407,14 +404,6 @@ export async function main() { }); }); - router.on("page-shown", (page) => { - if (page.nativeRefreshDisabled) { - disableNativeRefresh(); - } else { - enableNativeRefresh(); - } - }); - router.on("navigate", () => { document.querySelectorAll("dialog[open]").forEach((dialog) => { const wrapper = dialog.closest("[data-dialog-wrapper]"); diff --git a/src/js/router.js b/src/js/router.js index fc1d3fba..397aba7f 100644 --- a/src/js/router.js +++ b/src/js/router.js @@ -26,8 +26,7 @@ function bindMiddleClickRedispatch() { // Runs attach whenever the page becomes active (first entry or a return from // the route cache) and detach when it's swapped out. function bindActive(root, attach, detach) { - root.addEventListener("page-enter", attach); - root.addEventListener("page-restore", attach); + root.addEventListener("page-show", attach); root.addEventListener("page-exit", detach); } @@ -122,11 +121,11 @@ export class Router extends EventEmitter { window.scrollTo(0, scrollY); } }); - // on back button, go back to the previous page + // Any history traversal (back or forward button, swipe gesture, history.go) window.addEventListener("popstate", async (e) => { this.emit("navigate"); await this.load(window.location.pathname + window.location.search, { - isBack: true, + isRestore: true, }); }); } @@ -239,7 +238,7 @@ export class Router extends EventEmitter { return this.match(path).route !== null; } - async load(path, { isBack = false } = {}) { + async load(path, { isRestore = false } = {}) { const [pathnameForRedirect, query] = path.split("?"); const redirectTarget = this.matchRedirect(pathnameForRedirect); if (redirectTarget !== null) { @@ -247,7 +246,7 @@ export class Router extends EventEmitter { ? `${redirectTarget}?${query}` : redirectTarget; window.history.replaceState(window.history.state, "", redirectPath); - return this.load(redirectPath, { isBack }); + return this.load(redirectPath, { isRestore }); } // Save the scroll position of the page we're leaving before swapping it out if (this.currentPath != null) { @@ -286,7 +285,7 @@ export class Router extends EventEmitter { window.scrollTo(0, scrollY); break; case "back": - window.scrollTo(0, isBack ? scrollY : 0); + window.scrollTo(0, isRestore ? scrollY : 0); break; case "manual": break; @@ -300,11 +299,13 @@ export class Router extends EventEmitter { await raf(); if (this.currentPage !== page || this.currentPath !== path) return; this.currentPage.dispatchEvent( - new CustomEvent(isBack ? "page-restore" : "page-enter", { + new CustomEvent(isRestore ? "page-restore" : "page-enter", { detail: { scrollY }, }), ); - this.emit("page-shown", this.currentPage); + this.currentPage.dispatchEvent( + new CustomEvent("page-show", { detail: { scrollY } }), + ); return; } // First load of new page @@ -333,8 +334,13 @@ export class Router extends EventEmitter { this.currentPage.classList.add("page-visible"); outgoingPage?.classList.remove("page-visible"); outgoingPage?.classList.add("page-hidden"); - this.currentPage.dispatchEvent(new CustomEvent("page-enter")); - this.emit("page-shown", this.currentPage); + this.currentPage.dispatchEvent(new CustomEvent("page-create")); + this.currentPage.dispatchEvent( + new CustomEvent("page-enter", { detail: { scrollY: 0 } }), + ); + this.currentPage.dispatchEvent( + new CustomEvent("page-show", { detail: { scrollY: 0 } }), + ); } _shouldOpenInNewTab() { diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js index d9bad5dc..77a38a2d 100644 --- a/src/js/views/chatDetail.view.js +++ b/src/js/views/chatDetail.view.js @@ -1692,11 +1692,7 @@ export default async function chatDetailView({ root.addEventListener("click", handleRootClick); // The fetcher runs whenever the page is visible, in both restore directions - root.addEventListener("page-enter", () => { - messageFetcher.start(); - }); - - root.addEventListener("page-restore", () => { + root.addEventListener("page-show", () => { messageFetcher.start(); }); diff --git a/src/js/views/feeds.view.js b/src/js/views/feeds.view.js index 8515bf18..afd98b75 100644 --- a/src/js/views/feeds.view.js +++ b/src/js/views/feeds.view.js @@ -291,8 +291,7 @@ export default async function feedsView({ root, context: { dataLayer } }) { } // Reset whenever the page changes visibility, unlike the data load below - root.addEventListener("page-enter", resetEditingState); - root.addEventListener("page-restore", resetEditingState); + root.addEventListener("page-show", resetEditingState); root.addEventListener("page-exit", resetEditingState); function loadPageData() { diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js index 7d8d0299..97f254bc 100644 --- a/src/js/views/home.view.js +++ b/src/js/views/home.view.js @@ -391,26 +391,18 @@ export default async function homeView({ }); } - root.addEventListener("page-enter", async () => { + root.addEventListener("page-create", async () => { const currentFeedUri = state.$currentFeedUri.get(); - await dataLayer.declarative.ensurePinnedItems().then((pinnedItems) => { - if (!pinnedItems.some((item) => item.uri === currentFeedUri)) { - resetToDefaultFeed(); - } - - preloadHiddenFeeds(pinnedItems); - initializePostSeenObservers(pinnedItems); - }); - - // Ensure current user before loading feed to prevent flash of unfiltered feed - if (isAuthenticated) { - await dataLayer.declarative.ensureCurrentUser(); + const pinnedItems = await dataLayer.declarative.ensurePinnedItems(); + if (!pinnedItems.some((item) => item.uri === currentFeedUri)) { + resetToDefaultFeed(); } - + preloadHiddenFeeds(pinnedItems); + initializePostSeenObservers(pinnedItems); await loadCurrentFeed({ reload: true }); }); - root.addEventListener("page-restore", () => { + root.addEventListener("page-show", () => { for (const observer of postSeenObservers.values()) { observer.connect(); } diff --git a/src/js/views/listDetail.view.js b/src/js/views/listDetail.view.js index 8f7ced91..f097bb75 100644 --- a/src/js/views/listDetail.view.js +++ b/src/js/views/listDetail.view.js @@ -415,8 +415,7 @@ export default async function listDetailView({ const resetUserScrolled = () => { userHasScrolled = false; }; - root.addEventListener("page-enter", resetUserScrolled); - root.addEventListener("page-restore", resetUserScrolled); + root.addEventListener("page-show", resetUserScrolled); root.addEventListener("page-enter", () => loadPageData()); } diff --git a/src/js/views/login.view.js b/src/js/views/login.view.js index ca97b9b1..c5cbc0fe 100644 --- a/src/js/views/login.view.js +++ b/src/js/views/login.view.js @@ -519,6 +519,4 @@ export default async function loginView({ state.$pendingAccountDid.set(null); } }); - - root.nativeRefreshDisabled = true; } diff --git a/src/js/views/notifications.view.js b/src/js/views/notifications.view.js index a279752a..42749b22 100644 --- a/src/js/views/notifications.view.js +++ b/src/js/views/notifications.view.js @@ -827,6 +827,7 @@ export default async function notificationsView({ root.addEventListener("page-restore", async (e) => { const scrollY = e.detail?.scrollY ?? 0; if (scrollY <= 200) { + window.scrollTo(0, 0); await loadNotifications({ reload: true }); } }); diff --git a/src/js/views/postThread.view.js b/src/js/views/postThread.view.js index f7d9d548..04cf85d7 100644 --- a/src/js/views/postThread.view.js +++ b/src/js/views/postThread.view.js @@ -632,11 +632,7 @@ export default async function postThreadView({ if (largePost && header) { scrollToLargePost(largePost, header); } - try { - await dataLayer.declarative.ensurePostThread(postUri); - } catch (error) { - // pass - } + await dataLayer.requests.loadPostThread(postUri); }); root.addEventListener("page-restore", async (e) => { diff --git a/src/js/views/profile.view.js b/src/js/views/profile.view.js index 6ee0137e..2b578606 100644 --- a/src/js/views/profile.view.js +++ b/src/js/views/profile.view.js @@ -537,19 +537,21 @@ export default async function profileView({ } } - let didSelectInitialTab = false; - async function loadProfile() { await dataLayer.requests.loadDetailedProfile(profileDid); return dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); } - function loadPageData(profile) { + root.addEventListener("page-create", async () => { + const profile = await loadProfile(); + if (!profile) { + return; + } const isLabeler = isLabelerProfile(profile); - if (isLabeler) { + if (isLabelerProfile(profile)) { + state.$activeTab.set("labeler-settings"); dataLayer.requests.loadLabelerInfo(profile.did); } - if (!profile.viewer?.blocking && !profile.viewer?.blockedBy) { const isCurrentUser = profile.did === dataLayer.derived.$currentUser.get()?.did; @@ -563,22 +565,5 @@ export default async function profileView({ ) { dataLayer.requests.loadProfileChatStatus(profile.did); } - } - - root.addEventListener("page-enter", async () => { - const profile = await loadProfile(); - if (!profile) { - return; - } - // Labeler profiles open on their settings tab, but only the first time so - // a revisit doesn't reset the user's tab. Must precede the feed loads, - // which skip the author feed while that tab is active. - if (!didSelectInitialTab) { - didSelectInitialTab = true; - if (isLabelerProfile(profile)) { - state.$activeTab.set("labeler-settings"); - } - } - loadPageData(profile); }); } diff --git a/src/js/views/search.view.js b/src/js/views/search.view.js index fda364c4..6befec32 100644 --- a/src/js/views/search.view.js +++ b/src/js/views/search.view.js @@ -749,7 +749,7 @@ export default async function searchView({ ); }); - root.addEventListener("page-enter", () => { + root.addEventListener("page-create", () => { const query = new URLSearchParams(window.location.search); if (query.get("tab")) { const tab = query.get("tab"); @@ -763,13 +763,7 @@ export default async function searchView({ loadedTabs.clear(); tabScrollState.clear(); loadTabIfNeeded(state.$activeTab.get()); - } else { - // Arriving with no query clears whatever the last search left behind - state.$inputValue.set(""); - state.$showTypeahead.set(false); - state.$committedQuery.set(""); - loadedTabs.clear(); } - hydrateAndPruneRecentProfiles().catch(console.warn); + hydrateAndPruneRecentProfiles(); }); } diff --git a/tests/unit/specs/router.test.js b/tests/unit/specs/router.test.js index ce6f5d21..2f401f1d 100644 --- a/tests/unit/specs/router.test.js +++ b/tests/unit/specs/router.test.js @@ -303,7 +303,7 @@ describe("popstate", () => { const order = []; router.on("navigate", () => order.push("navigate")); - router.on("page-shown", () => order.push("page-shown")); + router.renderRoute(() => order.push("render")); await popstateHandler(new Event("popstate")); @@ -427,7 +427,7 @@ describe("go", () => { const order = []; router.on("navigate", () => order.push("navigate")); - router.on("page-shown", () => order.push("page-shown")); + router.renderRoute(() => order.push("render")); try { await router.go("/go-test"); @@ -436,7 +436,7 @@ describe("go", () => { } assert.deepEqual(order[0], "navigate"); - assert.deepEqual(order[1], "page-shown"); + assert.deepEqual(order[1], "render"); }); it("should store the previous route in history state", async () => { @@ -1014,15 +1014,15 @@ describe("layout visibility", () => { await router.load("/login"); assert.deepEqual(isLayoutHidden(), true); - // Views restore scroll synchronously in page-restore handlers, so the + // Views restore scroll synchronously in page-show handlers, so the // layout must already be visible when the event fires let hiddenAtRestoreTime = null; const { el: testPage } = router.pages.get("/test"); - testPage.addEventListener("page-restore", () => { + testPage.addEventListener("page-show", () => { hiddenAtRestoreTime = isLayoutHidden(); }); - await router.load("/test", { isBack: true }); + await router.load("/test", { isRestore: true }); assert.deepEqual(hiddenAtRestoreTime, false); }); @@ -1150,19 +1150,19 @@ describe("scroll position persistence", () => { }); }); - it("restores the saved scroll position via the page-restore event", async () => { + it("restores the saved scroll position via the page-show event", async () => { const router = createRouter(); await router.load("/a"); const pageA = router.pages.get("/a").el; let restoredScrollY = null; - pageA.addEventListener("page-restore", (event) => { + pageA.addEventListener("page-show", (event) => { restoredScrollY = event.detail.scrollY; }); await withScrollY(175, async () => { await router.load("/b"); // leaving /a saves 175 under /a - await router.load("/a", { isBack: true }); // back to cached /a restores it + await router.load("/a", { isRestore: true }); // back to cached /a restores it }); assert.deepEqual(restoredScrollY, 175); @@ -1198,17 +1198,17 @@ describe("scrollRestore", () => { } // Returns to /a after leaving it scrolled to 175 - async function revisit(router, { isBack }) { + async function revisit(router, { isRestore }) { await router.load("/a"); await withScrollY(175, () => router.load("/b")); scrollTo.mock.resetCalls(); - await router.load("/a", { isBack }); + await router.load("/a", { isRestore }); } it("restores the saved position on back navigation by default", async () => { const router = createRouter(); - await revisit(router, { isBack: true }); + await revisit(router, { isRestore: true }); assert.deepEqual(scrollCalls(), [[0, 175]]); }); @@ -1216,7 +1216,7 @@ describe("scrollRestore", () => { it("scrolls to the top on forward navigation by default", async () => { const router = createRouter(); - await revisit(router, { isBack: false }); + await revisit(router, { isRestore: false }); assert.deepEqual(scrollCalls(), [[0, 0]]); }); @@ -1224,7 +1224,7 @@ describe("scrollRestore", () => { it("restores the saved position on forward navigation when set to always", async () => { const router = createRouter("always"); - await revisit(router, { isBack: false }); + await revisit(router, { isRestore: false }); assert.deepEqual(scrollCalls(), [[0, 175]]); }); @@ -1232,7 +1232,7 @@ describe("scrollRestore", () => { it("still restores the saved position on back navigation when set to always", async () => { const router = createRouter("always"); - await revisit(router, { isBack: true }); + await revisit(router, { isRestore: true }); assert.deepEqual(scrollCalls(), [[0, 175]]); }); @@ -1240,21 +1240,21 @@ describe("scrollRestore", () => { it("does not touch the scroll position when set to manual", async () => { const router = createRouter("manual"); - await revisit(router, { isBack: false }); - await revisit(router, { isBack: true }); + await revisit(router, { isRestore: false }); + await revisit(router, { isRestore: true }); assert.deepEqual(scrollCalls(), []); }); - it("scrolls before dispatching page-restore so a view can override it", async () => { + it("scrolls before dispatching page-show so a view can override it", async () => { const router = createRouter(); await router.load("/a"); let scrolledBeforeDispatch = null; - router.pages.get("/a").el.addEventListener("page-restore", () => { + router.pages.get("/a").el.addEventListener("page-show", () => { scrolledBeforeDispatch = scrollCalls(); }); - await revisit(router, { isBack: true }); + await revisit(router, { isRestore: true }); assert.deepEqual(scrolledBeforeDispatch, [[0, 175]]); }); @@ -1275,7 +1275,7 @@ describe("page event dispatch", () => { await router.load("/a"); const pageA = router.pages.get("/a").el; const seen = []; - for (const name of ["page-enter", "page-restore"]) { + for (const name of ["page-enter", "page-restore", "page-show"]) { pageA.addEventListener(name, () => seen.push(name)); } await router.load("/b"); @@ -1283,11 +1283,75 @@ describe("page event dispatch", () => { return seen; } - it("dispatches page-enter when a cached page is revisited forwards", async () => { - assert.deepEqual(await eventsFor({}), ["page-enter"]); + it("dispatches page-enter then page-show when a cached page is revisited forwards", async () => { + assert.deepEqual(await eventsFor({}), ["page-enter", "page-show"]); }); - it("dispatches page-restore only on a back navigation", async () => { - assert.deepEqual(await eventsFor({ isBack: true }), ["page-restore"]); + it("dispatches page-restore then page-show on a history traversal", async () => { + assert.deepEqual(await eventsFor({ isRestore: true }), [ + "page-restore", + "page-show", + ]); + }); + + it("dispatches page-create, page-enter then page-show on first load", async () => { + const router = new Router(); + router.addRoute("/a", () => () => {}); + mountRouter(router); + const seen = []; + router.renderRoute(({ container }) => { + for (const name of ["page-create", "page-enter", "page-show"]) { + container.addEventListener(name, () => seen.push(name)); + } + }); + + await router.load("/a"); + + assert.deepEqual(seen, ["page-create", "page-enter", "page-show"]); + }); + + it("reports a zero scroll position on a first load", async () => { + const router = new Router(); + router.addRoute("/a", () => () => {}); + mountRouter(router); + const details = []; + router.renderRoute(({ container }) => { + for (const name of ["page-enter", "page-show"]) { + container.addEventListener(name, (event) => details.push(event.detail)); + } + }); + + await router.load("/a"); + + assert.deepEqual(details, [{ scrollY: 0 }, { scrollY: 0 }]); + }); + + it("reports the restored scroll position on page-show", async () => { + const router = createRouter(); + await router.load("/a"); + const details = []; + router.pages + .get("/a") + .el.addEventListener("page-show", (event) => details.push(event.detail)); + + await withScrollY(120, async () => { + await router.load("/b"); + await router.load("/a", { isRestore: true }); + }); + + assert.deepEqual(details, [{ scrollY: 120 }]); + }); + + it("does not dispatch page-create when a cached page is revisited", async () => { + const router = createRouter(); + await router.load("/a"); + const pageA = router.pages.get("/a").el; + const seen = []; + pageA.addEventListener("page-create", () => seen.push("page-create")); + + await router.load("/b"); + await router.load("/a"); + + assert.deepEqual(seen, []); }); }); -- knotmirror 0.0.1 From 7f4ecfd027a0e3fa99c1ef33436c519ac2c4a14b Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Fri, 14 Aug 2026 10:31:51 -0500 Subject: [PATCH 24/25] Update following avatar styles --- package.json | 2 +- src/css/style.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4a81c60f..b01150b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.195", + "version": "0.18.196", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/css/style.css b/src/css/style.css index dfc1ace2..58bdc440 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -6024,7 +6024,8 @@ button.profile-list-item-button.is-disabled { display: flex; align-items: center; justify-content: center; - background-color: var(--highlight-color); + background-color: #0070ff; + color: white; } .following-avatar .icon svg { -- knotmirror 0.0.1 From 92fbcfb17c92870aa1f0f7d0714b04690f19404f Mon Sep 17 00:00:00 2001 From: Grace Kind Date: Sat, 15 Aug 2026 23:06:27 -0500 Subject: [PATCH 25/25] Refactor view lifecycle --- package.json | 2 +- src/js/router.js | 29 ++++---- src/js/views/bookmarks.view.js | 12 +++- src/js/views/chat.view.js | 12 +++- src/js/views/chatDetail.view.js | 32 +++++---- src/js/views/chatRequests.view.js | 7 +- src/js/views/communityPluginListing.view.js | 5 +- src/js/views/communityPlugins.view.js | 7 +- src/js/views/feedDetail.view.js | 7 +- src/js/views/feeds.view.js | 16 +++-- src/js/views/groupChatDetails.view.js | 7 +- src/js/views/hashtag.view.js | 7 +- src/js/views/home.view.js | 18 +++-- src/js/views/listDetail.view.js | 14 +++- src/js/views/lists.view.js | 12 +++- src/js/views/login.view.js | 10 ++- src/js/views/notifications.view.js | 14 ++-- src/js/views/postLikes.view.js | 7 +- src/js/views/postQuotes.view.js | 7 +- src/js/views/postReposts.view.js | 7 +- src/js/views/postThread.view.js | 29 ++++---- src/js/views/profile.view.js | 6 +- src/js/views/profileFollowers.view.js | 7 +- src/js/views/profileFollowing.view.js | 7 +- src/js/views/profileKnownFollowers.view.js | 7 +- src/js/views/search.view.js | 38 ++++++----- src/js/views/settings.view.js | 12 +++- src/js/views/settings/blockedAccounts.view.js | 7 +- src/js/views/settings/mutedAccounts.view.js | 7 +- tests/unit/specs/router.test.js | 67 +++++++------------ 30 files changed, 262 insertions(+), 157 deletions(-) diff --git a/package.json b/package.json index b01150b5..dc8794f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "impro", - "version": "0.18.196", + "version": "0.18.197", "type": "module", "scripts": { "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve", diff --git a/src/js/router.js b/src/js/router.js index 397aba7f..0f7f0d21 100644 --- a/src/js/router.js +++ b/src/js/router.js @@ -27,7 +27,17 @@ function bindMiddleClickRedispatch() { // the route cache) and detach when it's swapped out. function bindActive(root, attach, detach) { root.addEventListener("page-show", attach); - root.addEventListener("page-exit", detach); + root.addEventListener("page-hide", detach); +} + +// Lifecycle helpers + +export function onPageShow(root, handler) { + root.addEventListener("page-show", (event) => handler(event.detail)); +} + +export function onPageHide(root, handler) { + root.addEventListener("page-hide", (event) => handler(event.detail)); } export function bindToPage(root, source, event, handler) { @@ -265,7 +275,7 @@ export class Router extends EventEmitter { if (activeElement && outgoingPage.contains(activeElement)) { activeElement.blur(); } - outgoingPage.dispatchEvent(new CustomEvent("page-exit")); + outgoingPage.dispatchEvent(new CustomEvent("page-hide")); } if (this.pages.has(path)) { // Return to existing page @@ -299,13 +309,10 @@ export class Router extends EventEmitter { await raf(); if (this.currentPage !== page || this.currentPath !== path) return; this.currentPage.dispatchEvent( - new CustomEvent(isRestore ? "page-restore" : "page-enter", { - detail: { scrollY }, + new CustomEvent("page-show", { + detail: { scrollY, action: isRestore ? "restore" : "advance" }, }), ); - this.currentPage.dispatchEvent( - new CustomEvent("page-show", { detail: { scrollY } }), - ); return; } // First load of new page @@ -334,12 +341,10 @@ export class Router extends EventEmitter { this.currentPage.classList.add("page-visible"); outgoingPage?.classList.remove("page-visible"); outgoingPage?.classList.add("page-hidden"); - this.currentPage.dispatchEvent(new CustomEvent("page-create")); this.currentPage.dispatchEvent( - new CustomEvent("page-enter", { detail: { scrollY: 0 } }), - ); - this.currentPage.dispatchEvent( - new CustomEvent("page-show", { detail: { scrollY: 0 } }), + new CustomEvent("page-show", { + detail: { scrollY: 0, action: "advance" }, + }), ); } diff --git a/src/js/views/bookmarks.view.js b/src/js/views/bookmarks.view.js index 677f4431..af46ca65 100644 --- a/src/js/views/bookmarks.view.js +++ b/src/js/views/bookmarks.view.js @@ -2,7 +2,12 @@ import { html, render } from "/js/lib/lit-html.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; import { auth } from "/js/auth.js"; import { headerTemplate } from "/js/templates/header.template.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { BOOKMARKS_PAGE_SIZE } from "/js/config.js"; export default async function bookmarksView({ @@ -14,7 +19,10 @@ export default async function bookmarksView({ const { postInteractionHandler } = interactionHandlers; - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); bindToPage(root, layout, "active-nav-click", () => { loadPageData(); diff --git a/src/js/views/chat.view.js b/src/js/views/chat.view.js index 563cc941..ccf9aa81 100644 --- a/src/js/views/chat.view.js +++ b/src/js/views/chat.view.js @@ -1,4 +1,9 @@ -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; @@ -201,7 +206,10 @@ export default async function chatView({ await loadConvoList({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); bindToPage(root, layout, "active-nav-click", () => { loadPageData(); diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js index 77a38a2d..a5217317 100644 --- a/src/js/views/chatDetail.view.js +++ b/src/js/views/chatDetail.view.js @@ -1,4 +1,9 @@ -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { + pageEffect, + bindPageTitle, + onPageShow, + onPageHide, +} from "/js/router.js"; import { html, render, ref } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { richTextTemplate } from "/js/templates/richText.template.js"; @@ -1691,22 +1696,23 @@ export default async function chatDetailView({ root.addEventListener("click", handleRootClick); - // The fetcher runs whenever the page is visible, in both restore directions - root.addEventListener("page-show", () => { - messageFetcher.start(); - }); - - root.addEventListener("page-exit", () => { - messageFetcher.stop(); - }); - async function loadPageData() { await dataLayer.declarative.ensureConvo(convoId); await loadMessages({ reload: true }); } - root.addEventListener("page-enter", () => { - scrollToBottom(); - loadPageData(); + onPageShow(root, ({ action, scrollY }) => { + if (action === "restore") { + window.scrollTo(0, scrollY); + } else { + scrollToBottom(); + loadPageData(); + } + // The fetcher runs whenever the page is visible, in both restore directions + messageFetcher.start(); + }); + + onPageHide(root, () => { + messageFetcher.stop(); }); } diff --git a/src/js/views/chatRequests.view.js b/src/js/views/chatRequests.view.js index 8b7ff82d..6dcb9cc2 100644 --- a/src/js/views/chatRequests.view.js +++ b/src/js/views/chatRequests.view.js @@ -1,4 +1,4 @@ -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; @@ -252,5 +252,8 @@ export default async function chatRequestsView({ dataLayer.requests.loadConvoRequestList({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/communityPluginListing.view.js b/src/js/views/communityPluginListing.view.js index 1b8620fd..6a99b022 100644 --- a/src/js/views/communityPluginListing.view.js +++ b/src/js/views/communityPluginListing.view.js @@ -1,5 +1,5 @@ import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { linkToLogin, getPermalinkForCommunityPlugin } from "/js/navigation.js"; import { showToast } from "/js/toasts.js"; @@ -268,7 +268,8 @@ export default async function communityPluginListingView({ ); }); - root.addEventListener("page-enter", async () => { + onPageShow(root, async ({ action }) => { + if (action === "restore") return; await loadListings(); await loadDetails(); }); diff --git a/src/js/views/communityPlugins.view.js b/src/js/views/communityPlugins.view.js index e737ebc7..cd7e730d 100644 --- a/src/js/views/communityPlugins.view.js +++ b/src/js/views/communityPlugins.view.js @@ -1,5 +1,5 @@ import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { chevronRightIconTemplate } from "/js/templates/icons/chevronRight.template.js"; import { globeIconTemplate } from "/js/templates/icons/globeIcon.template.js"; @@ -139,5 +139,8 @@ export default async function communityPluginsView({ loadListings(); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/feedDetail.view.js b/src/js/views/feedDetail.view.js index 47e7ff99..9b7fe538 100644 --- a/src/js/views/feedDetail.view.js +++ b/src/js/views/feedDetail.view.js @@ -5,7 +5,7 @@ import { auth } from "/js/auth.js"; import "/js/components/infinite-scroll-container.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { pinIconTemplate } from "/js/templates/icons/pinIcon.template.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { FEED_PAGE_SIZE } from "/js/config.js"; import { showToast } from "/js/toasts.js"; import "/js/components/context-menu.js"; @@ -140,5 +140,8 @@ export default async function feedDetailView({ await loadFeed({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/feeds.view.js b/src/js/views/feeds.view.js index afd98b75..ba9d0b93 100644 --- a/src/js/views/feeds.view.js +++ b/src/js/views/feeds.view.js @@ -1,4 +1,9 @@ -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { + pageEffect, + bindPageTitle, + onPageShow, + onPageHide, +} from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; import { headerTemplate } from "/js/templates/header.template.js"; @@ -291,12 +296,15 @@ export default async function feedsView({ root, context: { dataLayer } }) { } // Reset whenever the page changes visibility, unlike the data load below - root.addEventListener("page-show", resetEditingState); - root.addEventListener("page-exit", resetEditingState); + onPageShow(root, resetEditingState); + onPageHide(root, resetEditingState); function loadPageData() { dataLayer.requests.loadPinnedItems(); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/groupChatDetails.view.js b/src/js/views/groupChatDetails.view.js index 21862b5e..54be7aa3 100644 --- a/src/js/views/groupChatDetails.view.js +++ b/src/js/views/groupChatDetails.view.js @@ -1,6 +1,6 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; @@ -326,5 +326,8 @@ export default async function groupChatDetailsView({ }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/hashtag.view.js b/src/js/views/hashtag.view.js index 7668f3a5..5cec5459 100644 --- a/src/js/views/hashtag.view.js +++ b/src/js/views/hashtag.view.js @@ -4,7 +4,7 @@ import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import "/js/components/tab-bar.js"; import { HASHTAG_FEED_PAGE_SIZE } from "/js/config.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { Signal, ReactiveStore } from "/js/signals.js"; export default async function hashtagView({ @@ -118,5 +118,8 @@ export default async function hashtagView({ loadCurrentFeed({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/home.view.js b/src/js/views/home.view.js index 97f254bc..08088889 100644 --- a/src/js/views/home.view.js +++ b/src/js/views/home.view.js @@ -11,7 +11,13 @@ import { FOLLOWING_FEED_URI, LOGGED_OUT_FEED_URI, } from "/js/config.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, + onPageHide, +} from "/js/router.js"; import { showToast } from "/js/toasts.js"; import { Signal, ReactiveStore, SignalSet } from "/js/signals.js"; import { WelcomeModal } from "/js/modals/welcome.modal.js"; @@ -391,7 +397,7 @@ export default async function homeView({ }); } - root.addEventListener("page-create", async () => { + async function loadPageData() { const currentFeedUri = state.$currentFeedUri.get(); const pinnedItems = await dataLayer.declarative.ensurePinnedItems(); if (!pinnedItems.some((item) => item.uri === currentFeedUri)) { @@ -400,15 +406,17 @@ export default async function homeView({ preloadHiddenFeeds(pinnedItems); initializePostSeenObservers(pinnedItems); await loadCurrentFeed({ reload: true }); - }); + } + + loadPageData().catch((error) => console.error(error)); - root.addEventListener("page-show", () => { + onPageShow(root, () => { for (const observer of postSeenObservers.values()) { observer.connect(); } }); - root.addEventListener("page-exit", () => { + onPageHide(root, () => { for (const observer of postSeenObservers.values()) { observer.disconnect(); } diff --git a/src/js/views/listDetail.view.js b/src/js/views/listDetail.view.js index f097bb75..daf6f419 100644 --- a/src/js/views/listDetail.view.js +++ b/src/js/views/listDetail.view.js @@ -10,7 +10,12 @@ import "/js/components/tab-bar.js"; import { pinIconTemplate } from "/js/templates/icons/pinIcon.template.js"; import { userPlusIconTemplate } from "/js/templates/icons/userPlusIcon.template.js"; import { richTextTemplate } from "/js/templates/richText.template.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { FEED_PAGE_SIZE } from "/js/config.js"; import { showToast } from "/js/toasts.js"; import "/js/components/infinite-scroll-container.js"; @@ -415,7 +420,10 @@ export default async function listDetailView({ const resetUserScrolled = () => { userHasScrolled = false; }; - root.addEventListener("page-show", resetUserScrolled); + onPageShow(root, resetUserScrolled); - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/lists.view.js b/src/js/views/lists.view.js index c9aa1c07..17e7e894 100644 --- a/src/js/views/lists.view.js +++ b/src/js/views/lists.view.js @@ -2,7 +2,12 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { listFeedTemplate } from "/js/templates/listFeed.template.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { showToast } from "/js/toasts.js"; import { parseUri } from "/js/dataHelpers.js"; import "/js/components/create-list-dialog.js"; @@ -14,7 +19,10 @@ export default async function listsView({ }) { await auth.requireAuth(); - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); bindToPage(root, layout, "active-nav-click", () => { loadPageData(); diff --git a/src/js/views/login.view.js b/src/js/views/login.view.js index c5cbc0fe..0d90c806 100644 --- a/src/js/views/login.view.js +++ b/src/js/views/login.view.js @@ -16,7 +16,12 @@ import { chevronRightIconTemplate } from "/js/templates/icons/chevronRight.templ import { userPlusIconTemplate } from "/js/templates/icons/userPlusIcon.template.js"; import { verificationBadgeTemplate } from "/js/templates/verificationBadge.template.js"; import { automatedAccountBadgeTemplate } from "/js/templates/automatedAccountBadge.template.js"; -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { + pageEffect, + bindToPage, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { Signal, ReactiveStore } from "/js/signals.js"; export default async function loginView({ @@ -487,7 +492,8 @@ export default async function loginView({ ); }); - root.addEventListener("page-enter", async () => { + onPageShow(root, async ({ action }) => { + if (action === "restore") return; // this can happen when the oauth callback fails - see callback.html const params = new URLSearchParams(window.location.search); const errorMessage = params.get("error_message"); diff --git a/src/js/views/notifications.view.js b/src/js/views/notifications.view.js index 42749b22..c9562c52 100644 --- a/src/js/views/notifications.view.js +++ b/src/js/views/notifications.view.js @@ -7,7 +7,12 @@ import { smallPostTemplate } from "/js/templates/smallPost.template.js"; import { postSkeletonTemplate } from "/js/templates/postSkeleton.template.js"; import { displayRelativeTime, batch } from "/js/utils.js"; import { Signal, ReactiveStore } from "/js/signals.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { userIconTemplate } from "/js/templates/icons/userIcon.template.js"; import { userPlusIconTemplate } from "/js/templates/icons/userPlusIcon.template.js"; import { repostIconTemplate } from "/js/templates/icons/repostIcon.template.js"; @@ -820,12 +825,7 @@ export default async function notificationsView({ }); } - root.addEventListener("page-enter", async () => { - await loadNotifications({ reload: true }); - }); - - root.addEventListener("page-restore", async (e) => { - const scrollY = e.detail?.scrollY ?? 0; + onPageShow(root, async ({ scrollY }) => { if (scrollY <= 200) { window.scrollTo(0, 0); await loadNotifications({ reload: true }); diff --git a/src/js/views/postLikes.view.js b/src/js/views/postLikes.view.js index d17d6ba6..1638bb5b 100644 --- a/src/js/views/postLikes.view.js +++ b/src/js/views/postLikes.view.js @@ -1,5 +1,5 @@ import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { formatLargeNumber } from "/js/utils.js"; @@ -96,5 +96,8 @@ export default async function postLikesView({ loadLikes({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/postQuotes.view.js b/src/js/views/postQuotes.view.js index 493b4c94..83811f81 100644 --- a/src/js/views/postQuotes.view.js +++ b/src/js/views/postQuotes.view.js @@ -2,7 +2,7 @@ import { html, render } from "/js/lib/lit-html.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { formatLargeNumber } from "/js/utils.js"; import { postFeedTemplate } from "/js/templates/postFeed.template.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; export default async function postQuotesView({ root, @@ -98,5 +98,8 @@ export default async function postQuotesView({ loadQuotes({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/postReposts.view.js b/src/js/views/postReposts.view.js index f9abee74..7909485b 100644 --- a/src/js/views/postReposts.view.js +++ b/src/js/views/postReposts.view.js @@ -1,5 +1,5 @@ import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { formatLargeNumber } from "/js/utils.js"; @@ -96,5 +96,8 @@ export default async function postRepostsView({ loadReposts({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/postThread.view.js b/src/js/views/postThread.view.js index 04cf85d7..721ea909 100644 --- a/src/js/views/postThread.view.js +++ b/src/js/views/postThread.view.js @@ -1,7 +1,12 @@ import { html, render } from "/js/lib/lit-html.js"; import { avatarTemplate } from "/js/templates/avatar.template.js"; import { sortBy, maxBy, pinScrollPosition } from "/js/utils.js"; -import { bindToPage, pageEffect, bindPageTitle } from "/js/router.js"; +import { + bindToPage, + pageEffect, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { smallPostTemplate } from "/js/templates/smallPost.template.js"; import { mutedParentToggleTemplate } from "/js/templates/mutedParentToggle.template.js"; @@ -624,20 +629,18 @@ export default async function postThreadView({ }); } - root.addEventListener("page-enter", async () => { + onPageShow(root, async ({ action, scrollY }) => { userHasScrolled = false; - // On a revisit the thread is already rendered, so pin it under the header - const largePost = root.querySelector(".large-post"); - const header = root.querySelector("header"); - if (largePost && header) { - scrollToLargePost(largePost, header); + if (action === "restore") { + window.scrollTo(0, scrollY); + } else { + // On a revisit the thread is already rendered, so pin it under the header + const largePost = root.querySelector(".large-post"); + const header = root.querySelector("header"); + if (largePost && header) { + scrollToLargePost(largePost, header); + } } - await dataLayer.requests.loadPostThread(postUri); - }); - - root.addEventListener("page-restore", async (e) => { - userHasScrolled = false; - window.scrollTo(0, e.detail?.scrollY ?? 0); // Revalidate await dataLayer.requests.loadPostThread(postUri); }); diff --git a/src/js/views/profile.view.js b/src/js/views/profile.view.js index 2b578606..ed3ef459 100644 --- a/src/js/views/profile.view.js +++ b/src/js/views/profile.view.js @@ -542,7 +542,7 @@ export default async function profileView({ return dataLayer.derived.$hydratedDetailedProfiles.get(profileDid); } - root.addEventListener("page-create", async () => { + async function loadPageData() { const profile = await loadProfile(); if (!profile) { return; @@ -565,5 +565,7 @@ export default async function profileView({ ) { dataLayer.requests.loadProfileChatStatus(profile.did); } - }); + } + + loadPageData().catch((error) => console.error(error)); } diff --git a/src/js/views/profileFollowers.view.js b/src/js/views/profileFollowers.view.js index 611115f5..a11bfd95 100644 --- a/src/js/views/profileFollowers.view.js +++ b/src/js/views/profileFollowers.view.js @@ -1,6 +1,6 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; @@ -104,5 +104,8 @@ export default async function profileFollowersView({ loadFollowers({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/profileFollowing.view.js b/src/js/views/profileFollowing.view.js index b96a51fe..0b8e2ee9 100644 --- a/src/js/views/profileFollowing.view.js +++ b/src/js/views/profileFollowing.view.js @@ -1,6 +1,6 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; @@ -101,5 +101,8 @@ export default async function profileFollowingView({ loadFollowing({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/profileKnownFollowers.view.js b/src/js/views/profileKnownFollowers.view.js index 6ed5426a..c49ebeb3 100644 --- a/src/js/views/profileKnownFollowers.view.js +++ b/src/js/views/profileKnownFollowers.view.js @@ -1,6 +1,6 @@ import { html, render } from "/js/lib/lit-html.js"; import { auth } from "/js/auth.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; import { getDisplayName } from "/js/dataHelpers.js"; @@ -93,5 +93,8 @@ export default async function profileKnownFollowersView({ loadKnownFollowers({ reload: true }); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/search.view.js b/src/js/views/search.view.js index 6befec32..8e8ec761 100644 --- a/src/js/views/search.view.js +++ b/src/js/views/search.view.js @@ -199,6 +199,24 @@ export default async function searchView({ } } + function loadPageData() { + const query = new URLSearchParams(window.location.search); + if (query.get("tab")) { + const tab = query.get("tab"); + state.$activeTab.set(tab === "posts" ? "top" : tab); + } + const q = getUrlQuery(); + if (q) { + state.$inputValue.set(q); + state.$showTypeahead.set(false); + state.$committedQuery.set(q); + loadedTabs.clear(); + tabScrollState.clear(); + loadTabIfNeeded(state.$activeTab.get()); + } + hydrateAndPruneRecentProfiles(); + } + function handleTabChange(tab) { if (tab === state.$activeTab.get()) { if (window.scrollY > 0) { @@ -611,6 +629,8 @@ export default async function searchView({ } } + loadPageData(); + bindPageTitle(root, () => "Search"); pageEffect(root, () => { @@ -748,22 +768,4 @@ export default async function searchView({ root, ); }); - - root.addEventListener("page-create", () => { - const query = new URLSearchParams(window.location.search); - if (query.get("tab")) { - const tab = query.get("tab"); - state.$activeTab.set(tab === "posts" ? "top" : tab); - } - const q = getUrlQuery(); - if (q) { - state.$inputValue.set(q); - state.$showTypeahead.set(false); - state.$committedQuery.set(q); - loadedTabs.clear(); - tabScrollState.clear(); - loadTabIfNeeded(state.$activeTab.get()); - } - hydrateAndPruneRecentProfiles(); - }); } diff --git a/src/js/views/settings.view.js b/src/js/views/settings.view.js index a3a0a385..f5246fc0 100644 --- a/src/js/views/settings.view.js +++ b/src/js/views/settings.view.js @@ -1,4 +1,9 @@ -import { pageEffect, bindToPage, bindPageTitle } from "/js/router.js"; +import { + pageEffect, + bindToPage, + bindPageTitle, + onPageShow, +} from "/js/router.js"; import { html, render } from "/js/lib/lit-html.js"; import { eyeIconTemplate } from "/js/templates/icons/eyeIcon.template.js"; import { notificationsIconTemplate } from "/js/templates/icons/notificationsIcon.template.js"; @@ -389,7 +394,10 @@ export default async function settingsView({ root, context: { dataLayer } }) { loadOtherAccounts(); } - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); // Account actions navigate away with the pending spinner showing; if the // user comes back via the back/forward cache the document is restored diff --git a/src/js/views/settings/blockedAccounts.view.js b/src/js/views/settings/blockedAccounts.view.js index 5f8bd2f9..08b04857 100644 --- a/src/js/views/settings/blockedAccounts.view.js +++ b/src/js/views/settings/blockedAccounts.view.js @@ -1,5 +1,5 @@ import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; @@ -73,5 +73,8 @@ export default async function settingsBlockedAccountsView({ ); }); - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/src/js/views/settings/mutedAccounts.view.js b/src/js/views/settings/mutedAccounts.view.js index d038b9b4..a5a25935 100644 --- a/src/js/views/settings/mutedAccounts.view.js +++ b/src/js/views/settings/mutedAccounts.view.js @@ -1,5 +1,5 @@ import { html, render } from "/js/lib/lit-html.js"; -import { pageEffect, bindPageTitle } from "/js/router.js"; +import { pageEffect, bindPageTitle, onPageShow } from "/js/router.js"; import { headerTemplate } from "/js/templates/header.template.js"; import { auth } from "/js/auth.js"; import { profileFeedTemplate } from "/js/templates/profileFeed.template.js"; @@ -73,5 +73,8 @@ export default async function settingsMutedAccountsView({ ); }); - root.addEventListener("page-enter", () => loadPageData()); + onPageShow(root, ({ action }) => { + if (action === "restore") return; + loadPageData(); + }); } diff --git a/tests/unit/specs/router.test.js b/tests/unit/specs/router.test.js index 2f401f1d..7bbcf2d8 100644 --- a/tests/unit/specs/router.test.js +++ b/tests/unit/specs/router.test.js @@ -1270,60 +1270,43 @@ describe("page event dispatch", () => { return router; } - async function eventsFor(loadOptions) { + async function showDetailsFor(loadOptions) { const router = createRouter(); await router.load("/a"); const pageA = router.pages.get("/a").el; - const seen = []; - for (const name of ["page-enter", "page-restore", "page-show"]) { - pageA.addEventListener(name, () => seen.push(name)); - } + const details = []; + pageA.addEventListener("page-show", (event) => details.push(event.detail)); await router.load("/b"); await router.load("/a", loadOptions); - return seen; + return details; } - it("dispatches page-enter then page-show when a cached page is revisited forwards", async () => { - assert.deepEqual(await eventsFor({}), ["page-enter", "page-show"]); - }); - - it("dispatches page-restore then page-show on a history traversal", async () => { - assert.deepEqual(await eventsFor({ isRestore: true }), [ - "page-restore", - "page-show", + it("reports an advance action when a cached page is revisited forwards", async () => { + assert.deepEqual(await showDetailsFor({}), [ + { scrollY: 0, action: "advance" }, ]); }); - it("dispatches page-create, page-enter then page-show on first load", async () => { - const router = new Router(); - router.addRoute("/a", () => () => {}); - mountRouter(router); - const seen = []; - router.renderRoute(({ container }) => { - for (const name of ["page-create", "page-enter", "page-show"]) { - container.addEventListener(name, () => seen.push(name)); - } - }); - - await router.load("/a"); - - assert.deepEqual(seen, ["page-create", "page-enter", "page-show"]); + it("reports a restore action on a history traversal", async () => { + assert.deepEqual(await showDetailsFor({ isRestore: true }), [ + { scrollY: 0, action: "restore" }, + ]); }); - it("reports a zero scroll position on a first load", async () => { + it("dispatches a single page-show with an advance action on first load", async () => { const router = new Router(); router.addRoute("/a", () => () => {}); mountRouter(router); const details = []; router.renderRoute(({ container }) => { - for (const name of ["page-enter", "page-show"]) { - container.addEventListener(name, (event) => details.push(event.detail)); - } + container.addEventListener("page-show", (event) => + details.push(event.detail), + ); }); await router.load("/a"); - assert.deepEqual(details, [{ scrollY: 0 }, { scrollY: 0 }]); + assert.deepEqual(details, [{ scrollY: 0, action: "advance" }]); }); it("reports the restored scroll position on page-show", async () => { @@ -1339,19 +1322,21 @@ describe("page event dispatch", () => { await router.load("/a", { isRestore: true }); }); - assert.deepEqual(details, [{ scrollY: 120 }]); + assert.deepEqual(details, [{ scrollY: 120, action: "restore" }]); }); - it("does not dispatch page-create when a cached page is revisited", async () => { - const router = createRouter(); - await router.load("/a"); - const pageA = router.pages.get("/a").el; - const seen = []; - pageA.addEventListener("page-create", () => seen.push("page-create")); + it("does not re-run a view when its cached page is revisited", async () => { + const router = new Router(); + router.addRoute("/a", () => () => {}); + router.addRoute("/b", () => () => {}); + mountRouter(router); + const rendered = []; + router.renderRoute(({ container }) => rendered.push(container)); + await router.load("/a"); await router.load("/b"); await router.load("/a"); - assert.deepEqual(seen, []); + assert.deepEqual(rendered.length, 2); }); });