Simplify notification badges, improve performance (#57)

Co-authored-by: Jon Staab <shtaab@gmail.com>
This commit is contained in:
hodlbod
2026-02-09 11:44:32 -08:00
committed by GitHub
parent 8f73fb85e9
commit c4f2f55617
19 changed files with 91 additions and 258 deletions
+6 -3
View File
@@ -142,12 +142,15 @@
// History, navigation, application data
unsubscribers.push(setupHistory(), setupAnalytics(), syncApplicationData())
// Subscribe to badge count for changes
unsubscribers.push(notifications.syncBadges)
// Initialize keyboard state tracking
unsubscribers.push(syncKeyboard())
// Subscribe to badge count for changes
unsubscribers.push(notifications.syncBadges())
// Subscribe to page history to update checked state
unsubscribers.push(notifications.syncChecked())
// Initialize background notifications
unsubscribers.push(notifications.Push.sync())
-7
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import {page} from "$app/stores"
import {onDestroy} from "svelte"
import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
@@ -13,7 +11,6 @@
import ChatMenu from "@app/components/ChatMenu.svelte"
import {chatSearch} from "@app/core/state"
import {pushModal} from "@app/util/modal"
import {setChecked} from "@app/util/notifications"
let term = $state("")
@@ -22,10 +19,6 @@
const openMenu = () => pushModal(ChatMenu)
const chats = $derived($chatSearch.searchOptions(term))
onDestroy(() => {
setChecked($page.url.pathname)
})
</script>
<div class="hidden min-h-screen md:hero">
-8
View File
@@ -4,18 +4,10 @@
import {append, uniq} from "@welshman/lib"
import {pubkey} from "@welshman/app"
import Chat from "@app/components/Chat.svelte"
import {notifications, setChecked} from "@app/util/notifications"
import {splitChatId} from "@app/core/state"
const {chat} = $page.params as MakeNonOptional<typeof $page.params>
const pubkeys = uniq(append($pubkey!, splitChatId(chat)))
// We have to watch this one, since on mobile the badge will be visible when active
$effect(() => {
if ($notifications.has($page.url.pathname)) {
setChecked($page.url.pathname)
}
})
</script>
<Chat {pubkeys} />
-9
View File
@@ -8,10 +8,8 @@
import SpaceAuthError from "@app/components/SpaceAuthError.svelte"
import SpaceTrustRelay from "@app/components/SpaceTrustRelay.svelte"
import {pushModal} from "@app/util/modal"
import {setChecked} from "@app/util/notifications"
import {decodeRelay, relaysPendingTrust} from "@app/core/state"
import {deriveRelayAuthError} from "@app/core/commands"
import {notifications} from "@app/util/notifications"
type Props = {
children?: Snippet
@@ -29,13 +27,6 @@
const showPendingTrust = once(() => pushModal(SpaceTrustRelay, {url}, {noEscape: true}))
// We have to watch this one, since on mobile the badge will be visible when active
$effect(() => {
if ($notifications.has($page.url.pathname)) {
setChecked($page.url.pathname)
}
})
// Watch for relay errors and notify the user
$effect(() => {
if ($authError) {
+1 -6
View File
@@ -45,7 +45,7 @@
MESSAGE_KINDS,
userSettingsValues,
} from "@app/core/state"
import {setChecked, checked} from "@app/util/notifications"
import {checked} from "@app/util/notifications"
import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
import {makeFeed} from "@app/core/requests"
import {popKey} from "@lib/implicit"
@@ -318,11 +318,6 @@
onDestroy(() => {
cleanup?.()
// Sveltekit calls onDestroy at the beginning of the page load for some reason
setTimeout(() => {
setChecked($page.url.pathname)
}, 800)
})
</script>
@@ -21,7 +21,6 @@
import {pushModal} from "@app/util/modal"
import {decodeRelay, makeCommentFilter} from "@app/core/state"
import {makeCalendarFeed} from "@app/core/requests"
import {setChecked} from "@app/util/notifications"
const url = decodeRelay($page.params.relay!)
@@ -108,7 +107,6 @@
return () => {
feed.cleanup()
setChecked($page.url.pathname)
}
})
</script>
@@ -25,7 +25,6 @@
import CalendarEventDate from "@app/components/CalendarEventDate.svelte"
import EventReply from "@app/components/EventReply.svelte"
import {deriveEvent, decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
const {relay, address} = $page.params as MakeNonOptional<typeof $page.params>
const url = decodeRelay(relay)
@@ -57,7 +56,6 @@
return () => {
controller.abort()
setChecked($page.url.pathname)
}
})
</script>
@@ -17,7 +17,6 @@
import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
import {decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
import {makeCommentFilter} from "@app/core/state"
import {makeFeed} from "@app/core/requests"
import {pushModal} from "@app/util/modal"
@@ -59,7 +58,6 @@
return () => {
feed.cleanup()
setChecked($page.url.pathname)
}
})
</script>
@@ -22,7 +22,6 @@
import CommentActions from "@app/components/CommentActions.svelte"
import EventReply from "@app/components/EventReply.svelte"
import {deriveEvent, decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
const {relay, address} = $page.params as MakeNonOptional<typeof $page.params>
const url = decodeRelay(relay)
@@ -54,7 +53,6 @@
return () => {
controller.abort()
setChecked($page.url.pathname)
}
})
</script>
@@ -17,7 +17,6 @@
import GoalItem from "@app/components/GoalItem.svelte"
import GoalCreate from "@app/components/GoalCreate.svelte"
import {decodeRelay, makeCommentFilter} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
import {makeFeed} from "@app/core/requests"
import {pushModal} from "@app/util/modal"
@@ -58,7 +57,6 @@
return () => {
feed.cleanup()
setChecked($page.url.pathname)
}
})
</script>
@@ -22,7 +22,6 @@
import CommentActions from "@app/components/CommentActions.svelte"
import EventReply from "@app/components/EventReply.svelte"
import {deriveEvent, decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
const {relay, id} = $page.params as MakeNonOptional<typeof $page.params>
const url = decodeRelay(relay)
@@ -55,7 +54,6 @@
return () => {
controller.abort()
setChecked($page.url.pathname)
}
})
</script>
@@ -17,7 +17,6 @@
import ThreadItem from "@app/components/ThreadItem.svelte"
import ThreadCreate from "@app/components/ThreadCreate.svelte"
import {decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
import {makeCommentFilter} from "@app/core/state"
import {makeFeed} from "@app/core/requests"
import {pushModal} from "@app/util/modal"
@@ -59,7 +58,6 @@
return () => {
feed.cleanup()
setChecked($page.url.pathname)
}
})
</script>
@@ -22,7 +22,6 @@
import CommentActions from "@app/components/CommentActions.svelte"
import EventReply from "@app/components/EventReply.svelte"
import {deriveEvent, decodeRelay} from "@app/core/state"
import {setChecked} from "@app/util/notifications"
const {relay, id} = $page.params as MakeNonOptional<typeof $page.params>
const url = decodeRelay(relay)
@@ -54,7 +53,6 @@
return () => {
controller.abort()
setChecked($page.url.pathname)
}
})
</script>