forked from coracle/flotilla
Reset to old home page
This commit is contained in:
Jon Staab
@@ -2,7 +2,6 @@
|
|||||||
import cx from "classnames"
|
import cx from "classnames"
|
||||||
import type {Snippet} from "svelte"
|
import type {Snippet} from "svelte"
|
||||||
import {formatTimestamp} from "@welshman/lib"
|
import {formatTimestamp} from "@welshman/lib"
|
||||||
import {getListTags, getPubkeyTagValues} from "@welshman/util"
|
|
||||||
import type {TrustedEvent} from "@welshman/util"
|
import type {TrustedEvent} from "@welshman/util"
|
||||||
import Danger from "@assets/icons/danger-triangle.svg?dataurl"
|
import Danger from "@assets/icons/danger-triangle.svg?dataurl"
|
||||||
import Icon from "@lib/components/Icon.svelte"
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type {Snippet} from "svelte"
|
|
||||||
import {getAddress} from "@welshman/util"
|
|
||||||
import History from "@assets/icons/history.svg?dataurl"
|
|
||||||
import Minus from "@assets/icons/minus.svg?dataurl"
|
|
||||||
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
|
||||||
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
|
||||||
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
|
||||||
import SecondaryNav from "@lib/components/SecondaryNav.svelte"
|
|
||||||
import Page from "@lib/components/Page.svelte"
|
|
||||||
import Icon from "@lib/components/Icon.svelte"
|
|
||||||
import {userFeeds} from "@app/core/state"
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
children?: Snippet
|
|
||||||
}
|
|
||||||
|
|
||||||
const {children}: Props = $props()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<SecondaryNav>
|
|
||||||
<SecondaryNavSection>
|
|
||||||
<SecondaryNavItem href="/home">
|
|
||||||
<Icon icon={History} /> Recent Activity
|
|
||||||
</SecondaryNavItem>
|
|
||||||
</SecondaryNavSection>
|
|
||||||
<SecondaryNavSection>
|
|
||||||
<SecondaryNavHeader>Your Feeds</SecondaryNavHeader>
|
|
||||||
{#each $userFeeds as feed (feed.event.id)}
|
|
||||||
<SecondaryNavItem href="/home/feed/{getAddress(feed.event)}">
|
|
||||||
<Icon icon={Minus} />
|
|
||||||
{feed.title}
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/each}
|
|
||||||
</SecondaryNavSection>
|
|
||||||
</SecondaryNav>
|
|
||||||
<Page>
|
|
||||||
{@render children?.()}
|
|
||||||
</Page>
|
|
||||||
+66
-199
@@ -1,210 +1,77 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {onMount} from "svelte"
|
import {onMount} from "svelte"
|
||||||
import {derived, writable} from "svelte/store"
|
import {goto} from "$app/navigation"
|
||||||
import {batch, call, sortBy, uniqBy} from "@welshman/lib"
|
import {shouldUnwrap} from "@welshman/app"
|
||||||
import {
|
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||||
NOTE,
|
import Compass from "@assets/icons/compass.svg?dataurl"
|
||||||
MESSAGE,
|
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
|
||||||
THREAD,
|
|
||||||
CLASSIFIED,
|
|
||||||
ZAP_GOAL,
|
|
||||||
EVENT_TIME,
|
|
||||||
COMMENT,
|
|
||||||
getTagValue,
|
|
||||||
getTagValues,
|
|
||||||
getIdAndAddress,
|
|
||||||
getParentIdOrAddr,
|
|
||||||
} from "@welshman/util"
|
|
||||||
import type {TrustedEvent} from "@welshman/util"
|
|
||||||
import {
|
|
||||||
makeKindFeed,
|
|
||||||
makeRelayFeed,
|
|
||||||
makeScopeFeed,
|
|
||||||
makeIntersectionFeed,
|
|
||||||
makeUnionFeed,
|
|
||||||
Scope,
|
|
||||||
} from "@welshman/feeds"
|
|
||||||
import {repository, tracker, makeFeedController, loadUserFollowList} from "@welshman/app"
|
|
||||||
import History from "@assets/icons/history.svg?dataurl"
|
|
||||||
import {createScroller} from "@lib/html"
|
|
||||||
import Icon from "@lib/components/Icon.svelte"
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
import PageBar from "@lib/components/PageBar.svelte"
|
import Link from "@lib/components/Link.svelte"
|
||||||
import PageContent from "@lib/components/PageContent.svelte"
|
import Button from "@lib/components/Button.svelte"
|
||||||
import NoteItem from "@app/components/NoteItem.svelte"
|
import CardButton from "@lib/components/CardButton.svelte"
|
||||||
import ThreadItem from "@app/components/ThreadItem.svelte"
|
import SpaceAdd from "@app/components/SpaceAdd.svelte"
|
||||||
import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
|
import ChatEnable from "@app/components/ChatEnable.svelte"
|
||||||
import GoalItem from "@app/components/GoalItem.svelte"
|
import {pushModal} from "@app/util/modal"
|
||||||
import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
|
import {goToSpace} from "@app/util/routes"
|
||||||
import RecentConversation from "@app/components/RecentConversation.svelte"
|
import {PLATFORM_NAME, PLATFORM_RELAYS} from "@app/core/state"
|
||||||
import {makeRoomId, userSpaceUrls, loadUserGroupList, isEventMuted, CONTENT_KINDS} from "@app/core/state"
|
|
||||||
|
|
||||||
type Activity = {
|
const addSpace = () => pushModal(SpaceAdd)
|
||||||
type: "message" | "content"
|
|
||||||
event: TrustedEvent
|
|
||||||
timestamp: number
|
|
||||||
count: number
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const controller = new AbortController()
|
const openChat = () => ($shouldUnwrap ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
|
||||||
const events = writable<TrustedEvent[]>([])
|
|
||||||
const limit = writable(0)
|
|
||||||
|
|
||||||
const recentActivity = derived([events, limit], ([$events, $limit]) => {
|
onMount(async () => {
|
||||||
const activity: Activity[] = []
|
if (PLATFORM_RELAYS.length > 0) {
|
||||||
const activityByRoom = new Map<string, Activity>()
|
goToSpace(PLATFORM_RELAYS[0])
|
||||||
const latestActivityByKey = new Map<string, number>()
|
|
||||||
|
|
||||||
for (const event of $events.slice(0, $limit)) {
|
|
||||||
if (event.kind === MESSAGE) {
|
|
||||||
const h = getTagValue("h", event.tags)
|
|
||||||
|
|
||||||
if (!h) continue
|
|
||||||
|
|
||||||
for (const url of tracker.getRelays(event.id)) {
|
|
||||||
const id = makeRoomId(url, h)
|
|
||||||
|
|
||||||
const item = activityByRoom.get(id)
|
|
||||||
|
|
||||||
if (!item) {
|
|
||||||
activityByRoom.set(id, {
|
|
||||||
type: "message",
|
|
||||||
event,
|
|
||||||
timestamp: event.created_at,
|
|
||||||
count: 1,
|
|
||||||
url,
|
|
||||||
})
|
|
||||||
} else if (item.timestamp < event.created_at) {
|
|
||||||
item.count++
|
|
||||||
item.event = event
|
|
||||||
item.timestamp = event.created_at
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (event.kind === COMMENT) {
|
|
||||||
for (const k of getTagValues(["E", "A"], event.tags)) {
|
|
||||||
latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (const k of getIdAndAddress(event)) {
|
|
||||||
latestActivityByKey.set(k, Math.max(latestActivityByKey.get(k) || 0, event.created_at))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const item of activityByRoom.values()) {
|
|
||||||
activity.push(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const [address, timestamp] of latestActivityByKey.entries()) {
|
|
||||||
const event = repository.getEvent(address)
|
|
||||||
|
|
||||||
if (event) {
|
|
||||||
for (const url of tracker.getRelays(event.id)) {
|
|
||||||
activity.push({type: "content", event, timestamp, url, count: 1})
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return sortBy(
|
|
||||||
a => -a.timestamp,
|
|
||||||
uniqBy(a => a.event.id, activity),
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
let loading = $state(true)
|
|
||||||
let element: Element | undefined = $state()
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
const promise = call(async () => {
|
|
||||||
await Promise.all([loadUserGroupList(), loadUserFollowList()])
|
|
||||||
|
|
||||||
const ctrl = makeFeedController({
|
|
||||||
useWindowing: true,
|
|
||||||
signal: controller.signal,
|
|
||||||
feed: makeUnionFeed(
|
|
||||||
makeIntersectionFeed(
|
|
||||||
makeRelayFeed(...$userSpaceUrls),
|
|
||||||
makeKindFeed(COMMENT, ...CONTENT_KINDS),
|
|
||||||
),
|
|
||||||
makeIntersectionFeed(makeScopeFeed(Scope.Follows), makeKindFeed(NOTE)),
|
|
||||||
),
|
|
||||||
onEvent: batch(100, (evts: TrustedEvent[]) => {
|
|
||||||
const keep = evts.filter(event => {
|
|
||||||
if ($isEventMuted(event)) return false
|
|
||||||
if (getParentIdOrAddr(event)) return false
|
|
||||||
|
|
||||||
return true
|
|
||||||
})
|
|
||||||
|
|
||||||
events.update($events => [...$events, ...keep])
|
|
||||||
}),
|
|
||||||
onExhausted: () => {
|
|
||||||
loading = false
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const scroller = createScroller({
|
|
||||||
element: element!,
|
|
||||||
delay: 800,
|
|
||||||
threshold: 3000,
|
|
||||||
onScroll: async () => {
|
|
||||||
limit.update($limit => {
|
|
||||||
if ($events.length - $limit < 50) {
|
|
||||||
ctrl.load(50)
|
|
||||||
}
|
|
||||||
|
|
||||||
return $limit + 10
|
|
||||||
})
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
scroller.stop()
|
|
||||||
controller.abort()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => promise.then(call)
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<PageBar>
|
<div class="hero min-h-screen overflow-auto pb-8">
|
||||||
{#snippet icon()}
|
<div class="hero-content">
|
||||||
<div class="center">
|
<div class="column content gap-4">
|
||||||
<Icon icon={History} />
|
<h1 class="text-center text-5xl">Welcome to</h1>
|
||||||
</div>
|
<h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
|
||||||
{/snippet}
|
<div class="col-3">
|
||||||
{#snippet title()}
|
<Button onclick={addSpace}>
|
||||||
<strong>Recent Activity</strong>
|
<CardButton class="btn-neutral">
|
||||||
{/snippet}
|
{#snippet icon()}
|
||||||
{#snippet action()}
|
<Icon icon={AddCircle} size={7} />
|
||||||
<div class="row-2"></div>
|
{/snippet}
|
||||||
{/snippet}
|
{#snippet title()}
|
||||||
</PageBar>
|
<div>Add a space</div>
|
||||||
<PageContent class="flex flex-col gap-2 p-2 pt-4" bind:element>
|
{/snippet}
|
||||||
{#each $recentActivity as { type, event, url, count } (event.id)}
|
{#snippet info()}
|
||||||
{#if type === "message"}
|
<div>Use an invite link, or create your own space.</div>
|
||||||
<RecentConversation {url} {event} {count} />
|
{/snippet}
|
||||||
{:else if event.kind === THREAD}
|
</CardButton>
|
||||||
<ThreadItem {url} {event} />
|
</Button>
|
||||||
{:else if event.kind === CLASSIFIED}
|
<Link href="/discover">
|
||||||
<ClassifiedItem {url} {event} />
|
<CardButton class="btn-neutral">
|
||||||
{:else if event.kind === ZAP_GOAL}
|
{#snippet icon()}
|
||||||
<GoalItem {url} {event} />
|
<Icon icon={Compass} size={7} />
|
||||||
{:else if event.kind === EVENT_TIME}
|
{/snippet}
|
||||||
<CalendarEventItem {url} {event} />
|
{#snippet title()}
|
||||||
{:else}
|
<div>Browse the network</div>
|
||||||
<NoteItem {url} {event} />
|
{/snippet}
|
||||||
{/if}
|
{#snippet info()}
|
||||||
{:else}
|
<div>Find communities on the nostr network.</div>
|
||||||
{#if loading}
|
{/snippet}
|
||||||
<div class="flex justify-center items-center py-20">
|
</CardButton>
|
||||||
<span class="loading loading-spinner mr-3"></span>
|
</Link>
|
||||||
Loading recent activity...
|
<Button onclick={openChat}>
|
||||||
|
<CardButton class="btn-neutral">
|
||||||
|
{#snippet icon()}
|
||||||
|
<Icon icon={ChatRound} size={7} />
|
||||||
|
{/snippet}
|
||||||
|
{#snippet title()}
|
||||||
|
<div>Start a conversation</div>
|
||||||
|
{/snippet}
|
||||||
|
{#snippet info()}
|
||||||
|
<div>Use nostr's encrypted group chats to stay in touch.</div>
|
||||||
|
{/snippet}
|
||||||
|
</CardButton>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
</div>
|
||||||
<p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
{/each}
|
|
||||||
</PageContent>
|
|
||||||
|
|||||||
@@ -1,14 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type {Snippet} from "svelte"
|
|
||||||
import {page} from "$app/stores"
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
children: Snippet
|
|
||||||
}
|
|
||||||
|
|
||||||
const {children}: Props = $props()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#key $page.params.addres}
|
|
||||||
{@render children()}
|
|
||||||
{/key}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import {onMount} from "svelte"
|
|
||||||
import {writable} from "svelte/store"
|
|
||||||
import {batch, call} from "@welshman/lib"
|
|
||||||
import type {MakeNonOptional} from "@welshman/lib"
|
|
||||||
import type {TrustedEvent} from "@welshman/util"
|
|
||||||
import {makeFeedController} from "@welshman/app"
|
|
||||||
import {page} from "$app/stores"
|
|
||||||
import {createScroller} from "@lib/html"
|
|
||||||
import PageBar from "@lib/components/PageBar.svelte"
|
|
||||||
import PageContent from "@lib/components/PageContent.svelte"
|
|
||||||
import NoteItem from "@app/components/NoteItem.svelte"
|
|
||||||
import {deriveFeed} from "@app/core/state"
|
|
||||||
|
|
||||||
const {address} = $page.params as MakeNonOptional<typeof $page.params>
|
|
||||||
console.log(address)
|
|
||||||
const events = writable<TrustedEvent[]>([])
|
|
||||||
const controller = new AbortController()
|
|
||||||
const feed = deriveFeed(address)
|
|
||||||
const limit = writable(0)
|
|
||||||
|
|
||||||
let loading = $state(true)
|
|
||||||
let element: Element | undefined = $state()
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
if ($feed) {
|
|
||||||
const promise = call(async () => {
|
|
||||||
const ctrl = makeFeedController({
|
|
||||||
useWindowing: true,
|
|
||||||
signal: controller.signal,
|
|
||||||
feed: $feed.definition,
|
|
||||||
onEvent: batch(100, (evts: TrustedEvent[]) => {
|
|
||||||
events.update($events => [...$events, ...evts])
|
|
||||||
}),
|
|
||||||
onExhausted: () => {
|
|
||||||
loading = false
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const scroller = createScroller({
|
|
||||||
element: element!,
|
|
||||||
delay: 800,
|
|
||||||
threshold: 3000,
|
|
||||||
onScroll: async () => {
|
|
||||||
limit.update($limit => {
|
|
||||||
if ($events.length - $limit < 50) {
|
|
||||||
ctrl.load(50)
|
|
||||||
}
|
|
||||||
|
|
||||||
return $limit + 10
|
|
||||||
})
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
scroller.stop()
|
|
||||||
controller.abort()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => promise.then(call)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if $feed}
|
|
||||||
<PageBar>
|
|
||||||
{#snippet title()}
|
|
||||||
<h1 class="text-xl">{$feed.title}</h1>
|
|
||||||
{/snippet}
|
|
||||||
</PageBar>
|
|
||||||
<PageContent class="flex flex-col gap-2 p-2 pt-4" bind:element>
|
|
||||||
{#each $events as event (event.id)}
|
|
||||||
<NoteItem {event} />
|
|
||||||
{:else}
|
|
||||||
{#if loading}
|
|
||||||
<div class="flex justify-center items-center py-20">
|
|
||||||
<span class="loading loading-spinner mr-3"></span>
|
|
||||||
Loading your feed...
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="flex flex-col items-center py-20 text-center">No content found!</p>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</PageContent>
|
|
||||||
{/if}
|
|
||||||
Reference in New Issue
Block a user