From 167cd045f4dacff16f84c4e8d99350f00f60d0fc Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Wed, 11 Dec 2024 14:10:20 -0800 Subject: [PATCH] Fix squirrely notification badges --- src/app/components/MenuSpacesItem.svelte | 4 ++-- src/app/components/PrimaryNavItemSpace.svelte | 5 ++--- src/app/components/ProfileFeed.svelte | 9 ++++++--- src/app/notifications.ts | 18 ++++++++++-------- src/routes/spaces/[relay]/+layout.svelte | 8 +++----- src/routes/spaces/[relay]/+page.svelte | 10 +++------- 6 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/app/components/MenuSpacesItem.svelte b/src/app/components/MenuSpacesItem.svelte index e5457cc8..ab845f26 100644 --- a/src/app/components/MenuSpacesItem.svelte +++ b/src/app/components/MenuSpacesItem.svelte @@ -5,7 +5,7 @@ import RelayName from "@app/components/RelayName.svelte" import RelayDescription from "@app/components/RelayDescription.svelte" import {makeSpacePath} from "@app/routes" - import {spacesNotifications} from "@app/notifications" + import {inactiveSpacesNotifications} from "@app/notifications" export let url @@ -17,7 +17,7 @@
- {#if $spacesNotifications.includes(url)} + {#if $inactiveSpacesNotifications.includes(path)}
{/if}
diff --git a/src/app/components/PrimaryNavItemSpace.svelte b/src/app/components/PrimaryNavItemSpace.svelte index e1d92b8c..b3866fcc 100644 --- a/src/app/components/PrimaryNavItemSpace.svelte +++ b/src/app/components/PrimaryNavItemSpace.svelte @@ -3,18 +3,17 @@ import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte" import SpaceAvatar from "@app/components/SpaceAvatar.svelte" import {makeSpacePath} from "@app/routes" - import {deriveNotification, SPACE_FILTERS} from "@app/notifications" + import {spacesNotifications} from "@app/notifications" export let url const path = makeSpacePath(url) - const notification = deriveNotification(path, SPACE_FILTERS, url) + notification={$spacesNotifications.includes(path)}> diff --git a/src/app/components/ProfileFeed.svelte b/src/app/components/ProfileFeed.svelte index e0aacdcb..6c89a42d 100644 --- a/src/app/components/ProfileFeed.svelte +++ b/src/app/components/ProfileFeed.svelte @@ -13,6 +13,7 @@ export let url export let pubkey export let events: TrustedEvent[] = [] + export let hideLoading = false const ctrl = createFeedController({ useWindowing: true, @@ -59,8 +60,10 @@
{/each} -

- -

+ {#if !hideLoading} +

+ +

+ {/if} diff --git a/src/app/notifications.ts b/src/app/notifications.ts index 2c897c9b..9bce3a39 100644 --- a/src/app/notifications.ts +++ b/src/app/notifications.ts @@ -17,7 +17,7 @@ checked.subscribe(v => console.log("====== checked", v)) export const deriveChecked = (key: string) => derived(checked, prop(key)) export const setChecked = (key: string, ts = now()) => - Boolean(console.trace("====== setChecked", key))|| + Boolean(console.trace("====== setChecked", key)) || checked.update(state => ({...state, [key]: ts})) // Filters for various routes @@ -64,18 +64,20 @@ export const deriveNotification = (path: string, filters: Filter[], url?: string export const spacesNotifications = derived( [pubkey, checked, userMembership, deriveEvents(repository, {filters: SPACE_FILTERS})], ([$pubkey, $checked, $userMembership, $events]) => { - return getMembershipUrls($userMembership).filter(url => { - const path = makeSpacePath(url) - const lastChecked = max([$checked["*"], $checked[path]]) - const [latestEvent] = sortBy($e => -$e.created_at, $events) + return getMembershipUrls($userMembership) + .filter(url => { + const path = makeSpacePath(url) + const lastChecked = max([$checked["*"], $checked[path]]) + const [latestEvent] = sortBy($e => -$e.created_at, $events) - return latestEvent?.pubkey !== $pubkey && lt(lastChecked, latestEvent?.created_at) - }) + return latestEvent?.pubkey !== $pubkey && lt(lastChecked, latestEvent?.created_at) + }) + .map(url => makeSpacePath(url)) }, ) export const inactiveSpacesNotifications = derived( [page, spacesNotifications], ([$page, $spacesNotifications]) => - $spacesNotifications.filter(url => !$page.url.pathname.startsWith(makeSpacePath(url))), + $spacesNotifications.filter(path => !$page.url.pathname.startsWith(path)), ) diff --git a/src/routes/spaces/[relay]/+layout.svelte b/src/routes/spaces/[relay]/+layout.svelte index 2217a7c7..0785eeac 100644 --- a/src/routes/spaces/[relay]/+layout.svelte +++ b/src/routes/spaces/[relay]/+layout.svelte @@ -13,12 +13,10 @@ import {setChecked} from "@app/notifications" import {checkRelayConnection, checkRelayAuth, checkRelayAccess} from "@app/commands" import {decodeRelay} from "@app/state" - import {deriveNotification, SPACE_FILTERS} from "@app/notifications" + import {spacesNotifications} from "@app/notifications" const url = decodeRelay($page.params.relay) - const notification = deriveNotification($page.url.pathname, SPACE_FILTERS, url) - const checkConnection = async () => { const connectionError = await checkRelayConnection(url) @@ -35,9 +33,9 @@ } } - // We have to watch this one, since on mobile the badge wil be visible when active + // We have to watch this one, since on mobile the badge will be visible when active $: { - if ($notification) { + if ($spacesNotifications.includes($page.url.pathname)) { setChecked($page.url.pathname) } } diff --git a/src/routes/spaces/[relay]/+page.svelte b/src/routes/spaces/[relay]/+page.svelte index 10782242..bd02f6e2 100644 --- a/src/routes/spaces/[relay]/+page.svelte +++ b/src/routes/spaces/[relay]/+page.svelte @@ -120,9 +120,7 @@ Threads {#each $userRooms as room (room)} - + {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))} {:else} @@ -132,9 +130,7 @@ {/each} {#each $otherRooms as room (room)} - + {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))} {:else} @@ -151,7 +147,7 @@ {#if pubkey} {/if}