Move routes around, tweak navigation, fix CardButton
This commit is contained in:
Jon Staab
@@ -0,0 +1,74 @@
|
||||
<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 {makeChatPath} from "@app/routes"
|
||||
import {pushModal} from "@app/modal"
|
||||
|
||||
const startChat = () => pushModal(ChatStart)
|
||||
|
||||
let term = ""
|
||||
|
||||
$: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
|
||||
$: notesPath = makeChatPath([$pubkey!])
|
||||
|
||||
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={notesPath}>
|
||||
<Icon icon="notes-minimalistic" /> Your Notes
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 50}}>
|
||||
<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: 100}}>
|
||||
<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>
|
||||
@@ -0,0 +1,64 @@
|
||||
<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 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="min-h-screen hidden md:hero">
|
||||
<div class="hero-content col-2 text-center">
|
||||
<p class="row-2 text-lg">
|
||||
<Icon icon="info-circle" />
|
||||
No conversation selected.
|
||||
</p>
|
||||
<p>
|
||||
Click on a conversation in the sidebar, or <Button class="link" on:click={startChat}>start a new one</Button>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content col-2">
|
||||
<div class="row-2 min-w-0 items-center flex-grow">
|
||||
<label class="input input-bordered flex flex-grow items-center gap-2">
|
||||
<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>
|
||||
{#each chats as { id, pubkeys, messages } (id)}
|
||||
<ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
|
||||
{: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>
|
||||
@@ -0,0 +1,176 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user