forked from coracle/flotilla
Move routes around, tweak navigation, fix CardButton
This commit is contained in:
Jon Staab
@@ -1,82 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {page} from "$app/stores"
|
||||
import {WEEK, ctx, ago} from "@welshman/lib"
|
||||
import {WRAP} from "@welshman/util"
|
||||
import {pubkey, subscribe} from "@welshman/app"
|
||||
import {fly} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Page from "@lib/components/Page.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import SecondaryNav from "@lib/components/SecondaryNav.svelte"
|
||||
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
||||
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
||||
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
||||
import ChatStart from "@app/components/ChatStart.svelte"
|
||||
import ChatItem from "@app/components/ChatItem.svelte"
|
||||
import {chatSearch, pullConservatively} from "@app/state"
|
||||
import {pushModal} from "@app/modal"
|
||||
|
||||
const startChat = () => pushModal(ChatStart)
|
||||
|
||||
let term = ""
|
||||
|
||||
$: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
|
||||
|
||||
onMount(() => {
|
||||
const filter = {kinds: [WRAP], "#p": [$pubkey!]}
|
||||
const relays = ctx.app.router.InboxRelays().getUrls()
|
||||
const sub = subscribe({filters: [{...filter, since: ago(WEEK)}], relays})
|
||||
|
||||
pullConservatively({filters: [filter], relays})
|
||||
|
||||
return () => sub.close()
|
||||
})
|
||||
</script>
|
||||
|
||||
<SecondaryNav>
|
||||
<SecondaryNavSection>
|
||||
<div in:fly>
|
||||
<SecondaryNavItem href="/home/people">
|
||||
<Icon icon="user-heart" /> People
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 50}}>
|
||||
<SecondaryNavItem href="/home/network">
|
||||
<Icon icon="share-circle" /> Network
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 100}}>
|
||||
<SecondaryNavItem href="/home/notes">
|
||||
<Icon icon="notes-minimalistic" /> Your Notes
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 150}}>
|
||||
<SecondaryNavHeader>
|
||||
Chats
|
||||
<Button on:click={startChat}>
|
||||
<Icon icon="add-circle" />
|
||||
</Button>
|
||||
</SecondaryNavHeader>
|
||||
</div>
|
||||
</SecondaryNavSection>
|
||||
<label
|
||||
class="input input-sm input-bordered mx-6 -mt-4 mb-2 flex items-center gap-2"
|
||||
in:fly={{delay: 200}}>
|
||||
<Icon icon="magnifer" />
|
||||
<input bind:value={term} class="grow" type="text" />
|
||||
</label>
|
||||
{#key $page.params.chat}
|
||||
<div class="overflow-auto">
|
||||
{#each chats as { id, pubkeys, messages } (id)}
|
||||
<ChatItem {id} {pubkeys} {messages} />
|
||||
{/each}
|
||||
</div>
|
||||
{/key}
|
||||
</SecondaryNav>
|
||||
|
||||
<Page>
|
||||
{#key JSON.stringify($page.params)}
|
||||
<slot />
|
||||
{/key}
|
||||
</Page>
|
||||
@@ -12,7 +12,7 @@
|
||||
const startChat = () => pushModal(ChatStart)
|
||||
</script>
|
||||
|
||||
<div class="hero min-h-screen bg-base-200">
|
||||
<div class="hero min-h-screen">
|
||||
<div class="hero-content">
|
||||
<div class="column content gap-4">
|
||||
<h1 class="text-center text-5xl">Welcome to</h1>
|
||||
@@ -32,7 +32,7 @@
|
||||
<div slot="info">Find a community based on your hobbies or interests.</div>
|
||||
</CardButton>
|
||||
</Link>
|
||||
<Link href="/home/people">
|
||||
<Link href="/people">
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="plain" size={7} /></div>
|
||||
<div slot="title">Browse the network</div>
|
||||
|
||||
@@ -1,176 +0,0 @@
|
||||
<script lang="ts" context="module">
|
||||
type Element = {
|
||||
id: string
|
||||
type: "date" | "note"
|
||||
value: string | TrustedEvent
|
||||
showPubkey: boolean
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {page} from "$app/stores"
|
||||
import {derived, writable} from "svelte/store"
|
||||
import {assoc, sortBy, remove} from "@welshman/lib"
|
||||
import type {TrustedEvent, EventContent} from "@welshman/util"
|
||||
import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
|
||||
import {
|
||||
pubkey,
|
||||
formatTimestampAsDate,
|
||||
inboxRelaySelectionsByPubkey,
|
||||
loadInboxRelaySelections,
|
||||
tagPubkey,
|
||||
} from "@welshman/app"
|
||||
import type {MergedThunk} from "@welshman/app"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import Spinner from "@lib/components/Spinner.svelte"
|
||||
import PageBar from "@lib/components/PageBar.svelte"
|
||||
import Divider from "@lib/components/Divider.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import ProfileName from "@app/components/ProfileName.svelte"
|
||||
import ProfileCircle from "@app/components/ProfileCircle.svelte"
|
||||
import ProfileCircles from "@app/components/ProfileCircles.svelte"
|
||||
import ProfileDetail from "@app/components/ProfileDetail.svelte"
|
||||
import ProfileList from "@app/components/ProfileList.svelte"
|
||||
import ChatMessage from "@app/components/ChatMessage.svelte"
|
||||
import ChatCompose from "@app/components/ChannelCompose.svelte"
|
||||
import {deriveChat, splitChatId} from "@app/state"
|
||||
import {pushModal} from "@app/modal"
|
||||
import {sendWrapped} from "@app/commands"
|
||||
|
||||
const id = $page.params.chat === "notes" ? $pubkey! : $page.params.chat
|
||||
const chat = deriveChat(id)
|
||||
const pubkeys = splitChatId(id)
|
||||
const others = remove($pubkey!, pubkeys)
|
||||
const thunks = writable({} as Record<string, MergedThunk>)
|
||||
const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
|
||||
pubkeys.filter(pk => !$m.has(pk)),
|
||||
)
|
||||
|
||||
const assertEvent = (e: any) => e as TrustedEvent
|
||||
|
||||
const assertNotNil = <T,>(x: T | undefined) => x!
|
||||
|
||||
const showMembers = () => pushModal(ProfileList, {pubkeys: others})
|
||||
|
||||
const onSubmit = async ({content, ...params}: EventContent) => {
|
||||
const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
|
||||
const template = createEvent(DIRECT_MESSAGE, {content, tags})
|
||||
const thunk = await sendWrapped({template, pubkeys, delay: 2000})
|
||||
|
||||
thunks.update(assoc(thunk.thunks[0].event.id, thunk))
|
||||
}
|
||||
|
||||
let loading = true
|
||||
let elements: Element[] = []
|
||||
|
||||
$: {
|
||||
elements = []
|
||||
|
||||
let previousDate
|
||||
let previousPubkey
|
||||
|
||||
for (const event of sortBy(e => e.created_at, $chat?.messages || [])) {
|
||||
const {id, pubkey, created_at} = event
|
||||
const date = formatTimestampAsDate(created_at)
|
||||
|
||||
if (date !== previousDate) {
|
||||
elements.push({type: "date", value: date, id: date, showPubkey: false})
|
||||
}
|
||||
|
||||
elements.push({
|
||||
id,
|
||||
type: "note",
|
||||
value: event,
|
||||
showPubkey: date !== previousDate || previousPubkey !== pubkey,
|
||||
})
|
||||
|
||||
previousDate = date
|
||||
previousPubkey = pubkey
|
||||
}
|
||||
|
||||
elements.reverse()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await Promise.all(others.map(pk => loadInboxRelaySelections(pk)))
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
loading = false
|
||||
}, 3000)
|
||||
</script>
|
||||
|
||||
<div class="relative flex h-full flex-col">
|
||||
{#if others.length > 0}
|
||||
<PageBar>
|
||||
<div slot="title" class="row-2">
|
||||
{#if others.length === 1}
|
||||
{@const pubkey = others[0]}
|
||||
{@const showProfile = () => pushModal(ProfileDetail, {pubkey}, {drawer: true})}
|
||||
<Button on:click={showProfile} class="row-2">
|
||||
<ProfileCircle {pubkey} size={5} />
|
||||
<ProfileName {pubkey} />
|
||||
</Button>
|
||||
{:else}
|
||||
<ProfileCircles pubkeys={others} size={5} />
|
||||
<p class="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
<ProfileName pubkey={others[0]} />
|
||||
and {others.length - 1}
|
||||
{others.length > 2 ? "others" : "other"}
|
||||
<Button on:click={showMembers} class="btn btn-link">Show all members</Button>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div slot="action">
|
||||
{#if remove($pubkey, $missingInboxes).length > 0}
|
||||
{@const count = remove($pubkey, $missingInboxes).length}
|
||||
{@const label = count > 1 ? "inboxes are" : "inbox is"}
|
||||
<div
|
||||
class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
|
||||
data-tip="{count} {label} not configured.">
|
||||
<Icon icon="danger" />
|
||||
{count}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</PageBar>
|
||||
{/if}
|
||||
<div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
|
||||
{#if $missingInboxes.includes(assertNotNil($pubkey))}
|
||||
<div class="py-12">
|
||||
<div class="card2 col-2 m-auto max-w-md items-center text-center">
|
||||
<p class="row-2 text-lg text-error">
|
||||
<Icon icon="danger" />
|
||||
Your inbox is not configured.
|
||||
</p>
|
||||
<p>
|
||||
In order to deliver messages, Flotilla needs to know where to send them. Please visit
|
||||
your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your
|
||||
inbox.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#each elements as { type, id, value, showPubkey } (id)}
|
||||
{#if type === "date"}
|
||||
<Divider>{value}</Divider>
|
||||
{:else}
|
||||
{@const event = assertEvent(value)}
|
||||
{@const thunk = $thunks[event.id]}
|
||||
<ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
|
||||
{/if}
|
||||
{/each}
|
||||
<p class="flex h-10 items-center justify-center py-20">
|
||||
<Spinner {loading}>
|
||||
{#if loading}
|
||||
Looking for messages...
|
||||
{:else}
|
||||
End of message history
|
||||
{/if}
|
||||
</Spinner>
|
||||
</p>
|
||||
</div>
|
||||
<ChatCompose {onSubmit} />
|
||||
</div>
|
||||
@@ -1,56 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {ctx, ago} from "@welshman/lib"
|
||||
import {WRAP} from "@welshman/util"
|
||||
import {pubkey, subscribe} from "@welshman/app"
|
||||
import {fly} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import ChatItem from "@app/components/ChatItem.svelte"
|
||||
import ChatStart from "@app/components/ChatStart.svelte"
|
||||
import {chatSearch, pullConservatively} from "@app/state"
|
||||
import {pushModal} from "@app/modal"
|
||||
|
||||
let term = ""
|
||||
|
||||
const startChat = () => pushModal(ChatStart)
|
||||
|
||||
$: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
|
||||
|
||||
onMount(() => {
|
||||
const filter = {kinds: [WRAP], "#p": [$pubkey!]}
|
||||
const sub = subscribe({filters: [{...filter, since: ago(30)}]})
|
||||
|
||||
pullConservatively({
|
||||
filters: [filter],
|
||||
relays: ctx.app.router.InboxRelays().getUrls(),
|
||||
})
|
||||
|
||||
return () => sub.close()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="content column gap-2">
|
||||
<div class="row-2 min-w-0 items-center">
|
||||
<label class="input input-bordered flex flex-grow items-center gap-2" in:fly={{delay: 250}}>
|
||||
<Icon icon="magnifer" />
|
||||
<input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
|
||||
</label>
|
||||
<Button class="btn btn-primary" on:click={startChat}>
|
||||
<Icon icon="add-circle" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="column gap-2 overflow-auto">
|
||||
{#each chats as { id, pubkeys, messages } (id)}
|
||||
<ChatItem {id} {pubkeys} {messages} />
|
||||
{:else}
|
||||
<div class="py-20 max-w-sm col-4 items-center m-auto text-center">
|
||||
<p>No chats found! Try starting one up.</p>
|
||||
<Button class="btn btn-primary" on:click={startChat}>
|
||||
<Icon icon="add-circle" />
|
||||
Start a Chat
|
||||
</Button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,101 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {derived} from "svelte/store"
|
||||
import {createScroller} from "@lib/html"
|
||||
import {sortBy, sleep, ago, DAY, HOUR, pushToMapKey} from "@welshman/lib"
|
||||
import {
|
||||
getListTags,
|
||||
getPubkeyTagValues,
|
||||
getAncestorTagValues,
|
||||
NOTE,
|
||||
REACTION,
|
||||
} from "@welshman/util"
|
||||
import type {TrustedEvent} from "@welshman/util"
|
||||
import {deriveEvents} from "@welshman/store"
|
||||
import {repository, userFollows, load} from "@welshman/app"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Spinner from "@lib/components/Spinner.svelte"
|
||||
import NoteCard from "@app/components/NoteCard.svelte"
|
||||
import Content from "@app/components/Content.svelte"
|
||||
|
||||
let element: Element
|
||||
let events: TrustedEvent[] = []
|
||||
|
||||
const since = ago(DAY)
|
||||
const loading = sleep(3000)
|
||||
const authors = getPubkeyTagValues(getListTags($userFollows))
|
||||
const notesFilter = {kinds: [NOTE], authors, since}
|
||||
const notes = deriveEvents(repository, {filters: [notesFilter]})
|
||||
const reactionsFilter = {kinds: [REACTION], "#p": authors, since}
|
||||
const reactions = deriveEvents(repository, {filters: [reactionsFilter]})
|
||||
const reactionsByParent = derived(reactions, $reactions => {
|
||||
const $reactionsByParent = new Map<string, TrustedEvent[]>()
|
||||
|
||||
for (const event of $reactions) {
|
||||
const [parentId] = getAncestorTagValues(event.tags).replies
|
||||
|
||||
if (parentId) {
|
||||
pushToMapKey($reactionsByParent, parentId, event)
|
||||
}
|
||||
}
|
||||
|
||||
return $reactionsByParent
|
||||
})
|
||||
|
||||
const isLike = (e: TrustedEvent) => e.kind === REACTION && ["+", ""].includes(e.content)
|
||||
|
||||
const scoreEvent = (e: TrustedEvent) => {
|
||||
const thisReactions = $reactionsByParent.get(e.id) || []
|
||||
const thisLikes = thisReactions.filter(r => isLike(r))
|
||||
const recency = Math.max(1, e.created_at - since) / HOUR
|
||||
const score = Math.max(1, thisReactions.length) * Math.max(1, thisLikes.length) * recency
|
||||
|
||||
return -score
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load({filters: [notesFilter, reactionsFilter], timeout: 30_000})
|
||||
|
||||
const scroller = createScroller({
|
||||
element,
|
||||
onScroll: () => {
|
||||
const seen = new Set(events.map(e => e.id))
|
||||
const eligible = sortBy(
|
||||
scoreEvent,
|
||||
$notes.filter(e => !seen.has(e.id) && getAncestorTagValues(e.tags).replies.length === 0),
|
||||
)
|
||||
|
||||
events = [...events, ...eligible.slice(0, 10)]
|
||||
},
|
||||
})
|
||||
|
||||
return () => scroller.stop()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="content column gap-4" bind:this={element}>
|
||||
{#await loading}
|
||||
<div class="center my-20">
|
||||
<Spinner loading>Loading posts from people you follow...</Spinner>
|
||||
</div>
|
||||
{:then}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each events as event (event.id)}
|
||||
<NoteCard {event} class="card2 bg-alt w-full">
|
||||
<div class="ml-12">
|
||||
<Content {event} />
|
||||
</div>
|
||||
</NoteCard>
|
||||
{:else}
|
||||
<div class="py-20 max-w-sm col-4 items-center m-auto text-center">
|
||||
<p>No activity found! Try following a few more people.</p>
|
||||
<Link class="btn btn-primary" href="/home/people">
|
||||
<Icon icon="user-heart" />
|
||||
Browse Profiles
|
||||
</Link>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/await}
|
||||
</div>
|
||||
@@ -1,41 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {createScroller} from "@lib/html"
|
||||
import {profileSearch} from "@welshman/app"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import PeopleItem from "@app/components/PeopleItem.svelte"
|
||||
import {getDefaultPubkeys} from "@app/state"
|
||||
|
||||
const defaultPubkeys = getDefaultPubkeys()
|
||||
|
||||
let term = ""
|
||||
let limit = 10
|
||||
let element: Element
|
||||
|
||||
$: pubkeys = term ? $profileSearch.searchValues(term) : defaultPubkeys
|
||||
|
||||
onMount(() => {
|
||||
const scroller = createScroller({
|
||||
element,
|
||||
onScroll: () => {
|
||||
limit += 10
|
||||
},
|
||||
})
|
||||
|
||||
return () => scroller.stop()
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="m-auto w-full max-w-3xl column content-t" bind:this={element}>
|
||||
<div class="content-x flex-grow">
|
||||
<label class="input input-bordered flex w-full items-center gap-2">
|
||||
<Icon icon="magnifer" />
|
||||
<input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
|
||||
</label>
|
||||
</div>
|
||||
<div class="content-b content-x flex flex-col gap-2 overflow-auto pt-2">
|
||||
{#each pubkeys.slice(0, limit) as pubkey (pubkey)}
|
||||
<PeopleItem {pubkey} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user