userAdityaa/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Add key signup, improve message listening

Browse Source
This commit is contained in:
Jon Staab
2024-10-17 10:34:13 -07:00
parent 1055a6d567
commit db0dbbf428
15 changed files with 288 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/AppContainer.svelte
+3 -1
View File
@@ -1,8 +1,10 @@
<script lang="ts"> <script lang="ts">
import {page} from "$app/stores"
import {pubkey} from "@welshman/app" import {pubkey} from "@welshman/app"
import Landing from "@app/components/Landing.svelte" import Landing from "@app/components/Landing.svelte"
import Toast from "@app/components/Toast.svelte" import Toast from "@app/components/Toast.svelte"
import PrimaryNav from "@app/components/PrimaryNav.svelte" import PrimaryNav from "@app/components/PrimaryNav.svelte"
import {modals} from "@app/modal"
</script> </script>
<div class="flex h-screen overflow-hidden"> <div class="flex h-screen overflow-hidden">
@@ -10,7 +12,7 @@
<PrimaryNav> <PrimaryNav>
<slot /> <slot />
</PrimaryNav> </PrimaryNav>
{:else} {:else if !$modals[$page.url.hash.slice(1)]}
<Landing /> <Landing />
{/if} {/if}
</div> </div>
src/app/components/ChannelMessage.svelte
+72 -61
View File
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import {readable, derived} from "svelte/store" import {readable, derived} from "svelte/store"
import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib" import {hash, sleep, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util" import type {TrustedEvent} from "@welshman/util"
import {deriveEvents, throttled} from "@welshman/store" import {deriveEvents, throttled} from "@welshman/store"
import { import {
@@ -12,17 +12,20 @@
import type {Thunk} from "@welshman/app" import type {Thunk} from "@welshman/app"
import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util" import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
import {repository} from "@welshman/app" import {repository} from "@welshman/app"
import {slideAndFade, conditionalTransition} from '@lib/transition'
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Delay from "@lib/components/Delay.svelte"
import Avatar from "@lib/components/Avatar.svelte" import Avatar from "@lib/components/Avatar.svelte"
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Content from "@app/components/Content.svelte" import Content from "@app/components/Content.svelte"
import ThunkStatus from "@app/components/ThunkStatus.svelte" import ThunkStatus from "@app/components/ThunkStatus.svelte"
import ProfileDetail from "@app/components/ProfileDetail.svelte"
import ChannelThread from "@app/components/ChannelThread.svelte" import ChannelThread from "@app/components/ChannelThread.svelte"
import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte" import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte" import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state" import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
import {publishDelete, publishReaction} from "@app/commands" import {publishDelete, publishReaction} from "@app/commands"
import {pushModal} from "@app/modal" import {pushModal, pushDrawer} from "@app/modal"
export let url export let url
export let room export let room
@@ -41,6 +44,10 @@
const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null) const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length] const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
const transition = conditionalTransition(thunk, slideAndFade)
const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
const openThread = () => { const openThread = () => {
const root = $rootEvent || event const root = $rootEvent || event
@@ -67,70 +74,74 @@
$: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "") $: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
</script> </script>
<button <Delay>
type="button" <button
on:click={openThread} in:transition
class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300"> on:click={openThread}
{#if $rootEvent && !hideParent} type="button"
<div class="flex items-center gap-1 pl-12 text-xs"> class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
<Icon icon="square-share-line" size={3} /> {#if $rootEvent && !hideParent}
<p>In reply to</p> <div class="flex items-center gap-1 pl-12 text-xs">
<Avatar src={$rootProfile?.picture} size={4} /> <Icon icon="square-share-line" size={3} />
<p class="text-primary">{$rootProfileDisplay}</p> <p>In reply to</p>
<p <Avatar src={$rootProfile?.picture} size={4} />
class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline"> <p class="text-primary">{$rootProfileDisplay}</p>
{ellipsize($rootEvent.content, 30)} <p
</p> class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
</div> {ellipsize($rootEvent.content, 30)}
{/if} </p>
<div class="flex w-full gap-3"> </div>
{#if showPubkey}
<Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
{:else}
<div class="w-10 min-w-10 max-w-10" />
{/if} {/if}
<div class="-mt-1 flex-grow pr-1"> <div class="flex w-full gap-3">
{#if showPubkey} {#if showPubkey}
<div class="flex items-center gap-2"> <Button on:click={showProfile}>
<strong class="text-sm" style="color: {colorValue}" data-color={colorName} <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
>{$profileDisplay}</strong> </Button>
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span> {:else}
</div> <div class="w-10 min-w-10 max-w-10" />
{/if} {/if}
<div class="text-sm"> <div class="-mt-1 flex-grow pr-1">
<Content {event} /> {#if showPubkey}
{#if thunk} <div class="flex items-center gap-2">
<div class="badge badge-neutral"> <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
<ThunkStatus {thunk} /> {$profileDisplay}
</Button>
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
</div> </div>
{/if} {/if}
<div class="text-sm">
<Content {event} />
{#if thunk}
<ThunkStatus {thunk} />
{/if}
</div>
</div> </div>
</div> </div>
</div> {#if $reactions.length > 0 || $zaps.length > 0}
{#if $reactions.length > 0 || $zaps.length > 0} <div class="ml-12 text-xs">
<div class="ml-12 text-xs"> {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
{#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]} {@const isOwn = events.some(e => e.pubkey === $pubkey)}
{@const isOwn = events.some(e => e.pubkey === $pubkey)} {@const onClick = () => onReactionClick(content, events)}
{@const onClick = () => onReactionClick(content, events)} <button
<button type="button"
type="button" class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full" class:border={isOwn}
class:border={isOwn} class:border-solid={isOwn}
class:border-solid={isOwn} class:border-primary={isOwn}
class:border-primary={isOwn} on:click|stopPropagation={onClick}>
on:click|stopPropagation={onClick}> <span>{displayReaction(content)}</span>
<span>{displayReaction(content)}</span> {#if events.length > 1}
{#if events.length > 1} <span>{events.length}</span>
<span>{events.length}</span> {/if}
{/if} </button>
</button> {/each}
{/each} </div>
</div> {/if}
{/if} <button
<button class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100" on:click|stopPropagation>
on:click|stopPropagation> <ChannelMessageEmojiButton {url} {room} {event} />
<ChannelMessageEmojiButton {url} {room} {event} /> <ChannelMessageMenuButton {url} {room} {event} />
<ChannelMessageMenuButton {url} {room} {event} /> </button>
</button> </button>
</button> </Delay>
src/app/components/ChatMessage.svelte
+70 -65
View File
@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import {derived} from "svelte/store" import {derived} from "svelte/store"
import {type Instance} from "tippy.js" import {type Instance} from "tippy.js"
import {hash, uniqBy, groupBy, now} from "@welshman/lib" import {hash, sleep, uniqBy, groupBy, now} from "@welshman/lib"
import type {TrustedEvent} from "@welshman/util" import type {TrustedEvent} from "@welshman/util"
import {deriveEvents, throttled} from "@welshman/store" import {deriveEvents, throttled} from "@welshman/store"
import { import {
@@ -12,8 +12,10 @@
} from "@welshman/app" } from "@welshman/app"
import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util" import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
import {repository} from "@welshman/app" import {repository} from "@welshman/app"
import {slideAndFade} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Tippy from "@lib/components/Tippy.svelte" import Tippy from "@lib/components/Tippy.svelte"
import Delay from "@lib/components/Delay.svelte"
import Avatar from "@lib/components/Avatar.svelte" import Avatar from "@lib/components/Avatar.svelte"
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Content from "@app/components/Content.svelte" import Content from "@app/components/Content.svelte"
@@ -54,74 +56,77 @@
let popoverIsVisible = false let popoverIsVisible = false
</script> </script>
<div <Delay>
class="group chat flex items-center justify-end gap-1" <div
class:chat-start={event.pubkey !== $pubkey} in:slideAndFade
class:flex-row-reverse={event.pubkey !== $pubkey} class="group chat flex items-center justify-end gap-1"
class:chat-end={event.pubkey === $pubkey}> class:chat-start={event.pubkey !== $pubkey}
<Tippy class:flex-row-reverse={event.pubkey !== $pubkey}
bind:popover class:chat-end={event.pubkey === $pubkey}>
component={ChatMessageMenu} <Tippy
props={{event, pubkeys, popover}} bind:popover
params={{ component={ChatMessageMenu}
interactive: true, props={{event, pubkeys, popover}}
trigger: "manual", params={{
onShow() { interactive: true,
popoverIsVisible = true trigger: "manual",
}, onShow() {
onHidden() { popoverIsVisible = true
popoverIsVisible = false },
}, onHidden() {
}}> popoverIsVisible = false
<Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}> },
<Icon icon="menu-dots" size={4} /> }}>
</Button> <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
</Tippy> <Icon icon="menu-dots" size={4} />
<div class="flex flex-col"> </Button>
<div class="chat-bubble mx-1 max-w-sm"> </Tippy>
<div class="flex w-full items-start gap-2"> <div class="flex flex-col">
{#if showPubkey} <div class="chat-bubble mx-1 max-w-sm">
<Button on:click={showProfile}> <div class="flex w-full items-start gap-2">
<Avatar
src={$profile?.picture}
class="border border-solid border-base-content"
size={8} />
</Button>
{/if}
<div class="-mt-1 flex-grow pr-1">
{#if showPubkey} {#if showPubkey}
<div class="flex items-center gap-2"> <Button on:click={showProfile}>
<Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}> <Avatar
{$profileDisplay} src={$profile?.picture}
</Button> class="border border-solid border-base-content"
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span> size={8} />
</div> </Button>
{/if} {/if}
<div class="text-sm"> <div class="-mt-1 flex-grow pr-1">
<Content showEntire {event} /> {#if showPubkey}
<div class="flex items-center gap-2">
<Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
{$profileDisplay}
</Button>
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
</div>
{/if}
<div class="text-sm">
<Content showEntire {event} />
</div>
</div> </div>
</div> </div>
</div> </div>
{#if $reactions.length > 0 || $zaps.length > 0}
<div class="relative z-feature -mt-4 flex justify-end text-xs">
{#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
{@const isOwn = events.some(e => e.pubkey === $pubkey)}
{@const onClick = () => onReactionClick(content, events)}
<button
type="button"
class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
class:border={isOwn}
class:border-solid={isOwn}
class:border-primary={isOwn}
on:click|stopPropagation={onClick}>
<span>{displayReaction(content)}</span>
{#if events.length > 1}
<span>{events.length}</span>
{/if}
</button>
{/each}
</div>
{/if}
</div> </div>
{#if $reactions.length > 0 || $zaps.length > 0}
<div class="relative z-feature -mt-4 flex justify-end text-xs">
{#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
{@const isOwn = events.some(e => e.pubkey === $pubkey)}
{@const onClick = () => onReactionClick(content, events)}
<button
type="button"
class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
class:border={isOwn}
class:border-solid={isOwn}
class:border-primary={isOwn}
on:click|stopPropagation={onClick}>
<span>{displayReaction(content)}</span>
{#if events.length > 1}
<span>{events.length}</span>
{/if}
</button>
{/each}
</div>
{/if}
</div> </div>
</div> </Delay>
src/app/components/ChatStart.svelte
-1
View File
@@ -22,7 +22,6 @@
<div slot="info">Create an encrypted chat room for private conversations.</div> <div slot="info">Create an encrypted chat room for private conversations.</div>
</ModalHeader> </ModalHeader>
<Field> <Field>
<p slot="label">Members</p>
<div slot="input"> <div slot="input">
<ProfileMultiSelect bind:value={pubkeys} /> <ProfileMultiSelect bind:value={pubkeys} />
</div> </div>
src/app/components/ProfileName.svelte
+1 -3
View File
@@ -1,11 +1,9 @@
<script lang="ts"> <script lang="ts">
import {loadProfile, deriveProfileDisplay} from "@welshman/app" import {deriveProfileDisplay} from "@welshman/app"
export let pubkey export let pubkey
const profileDisplay = deriveProfileDisplay(pubkey) const profileDisplay = deriveProfileDisplay(pubkey)
loadProfile(pubkey)
</script> </script>
{$profileDisplay} {$profileDisplay}
src/app/components/RelayAdd.svelte
+5 -7
View File
@@ -32,13 +32,11 @@
}) })
</script> </script>
<div class="fixed left-6 right-6 top-6"> <label class="input input-bordered flex w-full items-center gap-2">
<label class="input input-bordered flex w-full items-center gap-2"> <Icon icon="magnifer" />
<Icon icon="magnifer" /> <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
<input bind:value={term} class="grow" type="text" placeholder="Search for relays..." /> </label>
</label> <div class="column -m-6 mt-0 p-6 pt-2 h-[50vh] gap-2 overflow-auto" bind:this={element}>
</div>
<div class="column mt-16 h-[50vh] gap-2 overflow-auto" bind:this={element}>
{#each $relaySearch {#each $relaySearch
.searchValues(term) .searchValues(term)
.filter(url => !$relays.includes(url)) .filter(url => !$relays.includes(url))
src/app/components/SignUp.svelte
+17 -10
View File
@@ -4,14 +4,18 @@
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Field from "@lib/components/Field.svelte" import Field from "@lib/components/Field.svelte"
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Divider from "@lib/components/Divider.svelte"
import Spinner from "@lib/components/Spinner.svelte" import Spinner from "@lib/components/Spinner.svelte"
import LogIn from "@app/components/LogIn.svelte" import LogIn from "@app/components/LogIn.svelte"
import InfoNostr from "@app/components/LogIn.svelte" import InfoNostr from "@app/components/InfoNostr.svelte"
import SignUpKey from "@app/components/SignUpKey.svelte"
import {pushModal, clearModals} from "@app/modal" import {pushModal, clearModals} from "@app/modal"
import {pushToast} from "@app/toast" import {pushToast} from "@app/toast"
const login = () => pushModal(LogIn) const login = () => pushModal(LogIn)
const signUpWithKey = () => pushModal(SignUpKey)
const trySignup = async () => { const trySignup = async () => {
const secret = makeSecret() const secret = makeSecret()
const handle = await loadHandle(`${username}@${handler.domain}`) const handle = await loadHandle(`${username}@${handler.domain}`)
@@ -83,14 +87,17 @@
@{handler.domain} @{handler.domain}
</div> </div>
</Field> </Field>
<div class="flex flex-col gap-2"> <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
<Button type="submit" class="btn btn-primary" disabled={!username || loading}> <Spinner {loading}>Sign Up</Spinner>
<Spinner {loading}>Sign Up</Spinner> <Icon icon="alt-arrow-right" />
<Icon icon="alt-arrow-right" /> </Button>
</Button> <Divider>Or</Divider>
<div class="text-sm"> <Button disabled={loading} on:click={signUpWithKey} class="btn btn-neutral">
Already have an account? <Icon icon="key" />
<Button class="link" on:click={login}>Log in instead</Button> Sign up with Key
</div> </Button>
<div class="text-sm">
Already have an account?
<Button class="link" on:click={login}>Log in instead</Button>
</div> </div>
</form> </form>
src/app/components/SignUpKey.svelte
+63
View File
@@ -0,0 +1,63 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {goto} from '$app/navigation'
import {hexToBytes} from '@noble/hashes/utils'
import {getPubkey, makeSecret} from "@welshman/signer"
import {addSession} from "@welshman/app"
import Spinner from "@lib/components/Spinner.svelte"
import Button from "@lib/components/Button.svelte"
import Field from "@lib/components/Field.svelte"
import Icon from "@lib/components/Icon.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import InfoKeys from "@app/components/InfoKeys.svelte"
import {loadUserData} from "@app/commands"
import {pushModal, clearModals} from "@app/modal"
import {clip} from "@app/toast"
const secret = makeSecret()
const nsec = nip19.nsecEncode(hexToBytes(secret))
const back = () => history.back()
const copyNsec = () => clip(nsec)
const onSubmit = async () => {
const pubkey = getPubkey(secret)
addSession({method: "nip01", pubkey, secret})
clearModals()
goto("/settings/profile")
}
</script>
<form class="column gap-4" on:submit|preventDefault={onSubmit}>
<ModalHeader>
<div slot="title">Sign Up</div>
<div slot="info">With a freshly generated private key</div>
</ModalHeader>
<Field>
<p slot="label">Private Key</p>
<label class="input input-bordered flex w-full items-center gap-2" slot="input">
<Icon icon="key" />
<input value={nsec} class="grow" type="password" />
<Button on:click={copyNsec}>
<Icon icon="copy" />
</Button>
</label>
<p slot="info">
Make sure to save your private key somewhere safe, like in a password manager.
<Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
</p>
</Field>
<ModalFooter>
<Button class="btn btn-link" on:click={back}>
<Icon icon="alt-arrow-left" />
Go back
</Button>
<Button type="submit" class="btn btn-primary">
Next
<Icon icon="alt-arrow-right" class="!bg-base-300" />
</Button>
</ModalFooter>
</form>
src/lib/components/Delay.svelte
+11
View File
@@ -0,0 +1,11 @@
<script lang="ts">
import {sleep} from '@welshman/lib'
export let delay = 1
</script>
{#await sleep(delay)}
<!-- pass -->
{:then}
<slot />
{/await}
src/lib/components/Dialog.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
transition:fade transition:fade
on:click={onClose} /> on:click={onClose} />
<div <div
class="card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]" class="relative card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
transition:fly={{duration: 300}}> transition:fly={{duration: 300}}>
<slot /> <slot />
</div> </div>
src/lib/components/Drawer.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
transition:fade transition:fade
on:click={onClose} /> on:click={onClose} />
<div <div
class="menu absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96" class="absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
transition:slide={{axis: "x", duration: 300}}> transition:slide={{axis: "x", duration: 300}}>
<slot /> <slot />
</div> </div>
src/lib/editor/SuggestionProfile.svelte
+37 -2
View File
@@ -1,7 +1,42 @@
<script lang="ts"> <script lang="ts">
import Profile from "@app/components/Profile.svelte" import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
import {
userFollows,
deriveUserWotScore,
deriveProfile,
deriveHandleForPubkey,
displayHandle,
deriveProfileDisplay,
} from "@welshman/app"
import Avatar from "@lib/components/Avatar.svelte"
import WotScore from "@lib/components/WotScore.svelte"
import ProfileDetail from "@app/components/ProfileDetail.svelte"
import {pushDrawer} from "@app/modal"
export let value export let value
const pubkey = value
const profile = deriveProfile(pubkey)
const profileDisplay = deriveProfileDisplay(pubkey)
const handle = deriveHandleForPubkey(pubkey)
const score = deriveUserWotScore(pubkey)
$: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
</script> </script>
<Profile pubkey={value} /> <div class="flex max-w-full gap-3">
<div class="py-1">
<Avatar src={$profile?.picture} size={10} />
</div>
<div class="flex min-w-0 flex-col">
<div class="flex items-center gap-2">
<div class="text-bold overflow-hidden text-ellipsis">
{$profileDisplay}
</div>
<WotScore score={$score} active={following} />
</div>
<div class="overflow-hidden text-ellipsis text-sm opacity-75">
{$handle ? displayHandle($handle) : displayPubkey(pubkey)}
</div>
</div>
</div>
src/lib/transition.ts
+4
View File
@@ -13,6 +13,7 @@ export function slideAndFade(
node: any, node: any,
{delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {}, {delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {},
) { ) {
console.log('slideAndFade')
const style = getComputedStyle(node) const style = getComputedStyle(node)
const primary_property = axis === "y" ? "height" : "width" const primary_property = axis === "y" ? "height" : "width"
const primary_property_value = parseFloat(style[primary_property]) const primary_property_value = parseFloat(style[primary_property])
@@ -46,3 +47,6 @@ export function slideAndFade(
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`, `border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`,
} }
} }
export const conditionalTransition = (condition: any, transition: any) =>
(node: any, args?: any) => condition ? transtion(node, args) : null
src/routes/home/+layout.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import {onMount} from "svelte" import {onMount} from "svelte"
import {page} from "$app/stores" import {page} from "$app/stores"
import {ctx, ago} from "@welshman/lib" import {WEEK, ctx, ago} from "@welshman/lib"
import {WRAP} from "@welshman/util" import {WRAP} from "@welshman/util"
import {pubkey, subscribe} from "@welshman/app" import {pubkey, subscribe} from "@welshman/app"
import {fly} from "@lib/transition" import {fly} from "@lib/transition"
@@ -26,7 +26,7 @@
onMount(() => { onMount(() => {
const filter = {kinds: [WRAP], "#p": [$pubkey!]} const filter = {kinds: [WRAP], "#p": [$pubkey!]}
const relays = ctx.app.router.InboxRelays().getUrls() const relays = ctx.app.router.InboxRelays().getUrls()
const sub = subscribe({filters: [{...filter, since: ago(30)}], relays}) const sub = subscribe({filters: [{...filter, since: ago(WEEK)}], relays})
pullConservatively({filters: [filter], relays}) pullConservatively({filters: [filter], relays})
src/routes/home/[chat]/+page.svelte
+1 -4
View File
@@ -21,7 +21,6 @@
loadInboxRelaySelections, loadInboxRelaySelections,
tagPubkey, tagPubkey,
} from "@welshman/app" } from "@welshman/app"
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte" import Link from "@lib/components/Link.svelte"
import Spinner from "@lib/components/Spinner.svelte" import Spinner from "@lib/components/Spinner.svelte"
@@ -155,9 +154,7 @@
{#if type === "date"} {#if type === "date"}
<Divider>{value}</Divider> <Divider>{value}</Divider>
{:else} {:else}
<div in:fly> <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
<ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
</div>
{/if} {/if}
{/each} {/each}
<p class="flex h-10 items-center justify-center py-20"> <p class="flex h-10 items-center justify-center py-20">