Split notifications into multiple tabs
This commit is contained in:
parent
0c291d6375
commit
8cb7fddfea
|
@ -1,7 +1,5 @@
|
|||
# Current
|
||||
|
||||
- [ ] Fix notifications, separate into mentions/replies and other
|
||||
- [ ] Wait for an auth challenge based on relay document to avoid missing first few REQs
|
||||
- [ ] Extract libraries
|
||||
- Cursor
|
||||
- parseContent
|
||||
|
|
|
@ -31,6 +31,7 @@
|
|||
{#if ready}
|
||||
<div class="pt-16 text-gray-3 lg:ml-56">
|
||||
<Route path="/notifications" component={Notifications} />
|
||||
<Route path="/notifications/:activeTab" component={Notifications} />
|
||||
<Route path="/search">
|
||||
<EnsureData enforcePeople={false}>
|
||||
<Search />
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
if (likes.length === notifications.length) return "liked"
|
||||
if (zaps.length === notifications.length) return "zapped"
|
||||
|
||||
return "interacted with"
|
||||
return "reacted to"
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
@ -3,20 +3,25 @@
|
|||
import {pluck, reverse, max, last, sortBy} from "ramda"
|
||||
import {onMount} from "svelte"
|
||||
import {fly} from "svelte/transition"
|
||||
import {navigate} from "svelte-routing"
|
||||
import {now, timedelta, createScroller} from "src/util/misc"
|
||||
import {findReplyId} from "src/util/nostr"
|
||||
import Spinner from "src/partials/Spinner.svelte"
|
||||
import Tabs from "src/partials/Tabs.svelte"
|
||||
import Content from "src/partials/Content.svelte"
|
||||
import Notification from "src/app/views/Notification.svelte"
|
||||
import {watch} from "src/agent/db"
|
||||
import user from "src/agent/user"
|
||||
import {userEvents} from "src/agent/db"
|
||||
|
||||
const {lastChecked} = user
|
||||
const tabs = ["Mentions & Replies", "Reactions"]
|
||||
|
||||
export let activeTab = tabs[0]
|
||||
|
||||
let limit = 0
|
||||
let events = null
|
||||
|
||||
const {lastChecked} = user
|
||||
|
||||
const prevChecked = $lastChecked.notifications || 0
|
||||
const updateLastChecked = throttle(30_000, () => user.setLastChecked("notifications", now() + 30))
|
||||
const notifications = watch("notifications", t => {
|
||||
|
@ -35,7 +40,17 @@
|
|||
$: events = $notifications
|
||||
.slice(0, limit)
|
||||
.map(e => [e, findReplyId(e)])
|
||||
.filter(([e, ref]) => userEvents.get(ref)?.kind === 1)
|
||||
.filter(([e, ref]) => {
|
||||
if (userEvents.get(ref)?.kind !== 1) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (activeTab === tabs[0]) {
|
||||
return [1].includes(e.kind)
|
||||
} else {
|
||||
return [7, 9735].includes(e.kind)
|
||||
}
|
||||
})
|
||||
.reduce((r, [e, ref]) => {
|
||||
const prev = last(r)
|
||||
const prevTimestamp = pluck("created_at", prev?.notifications || []).reduce(max, 0)
|
||||
|
@ -54,6 +69,8 @@
|
|||
return r
|
||||
}, [])
|
||||
|
||||
const setActiveTab = tab => navigate(`/notifications/${tab}`)
|
||||
|
||||
onMount(() => {
|
||||
document.title = "Notifications"
|
||||
|
||||
|
@ -65,6 +82,7 @@
|
|||
|
||||
{#if events}
|
||||
<Content>
|
||||
<Tabs {tabs} {activeTab} {setActiveTab} />
|
||||
{#each events as event (event.key)}
|
||||
<div in:fly={{y: 20}}>
|
||||
<Notification {event} />
|
||||
|
|
Loading…
Reference in New Issue