mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 08:21:20 +00:00
Clean up info modals
This commit is contained in:
parent
758a294bf1
commit
adcd1f2d86
@ -12,6 +12,7 @@
|
|||||||
- [x] Fix spotify album embed
|
- [x] Fix spotify album embed
|
||||||
- [x] Broadcast note button
|
- [x] Broadcast note button
|
||||||
- [x] Open person detail on notification detail
|
- [x] Open person detail on notification detail
|
||||||
|
- [x] Clean up info modals
|
||||||
|
|
||||||
# 0.3.3
|
# 0.3.3
|
||||||
|
|
||||||
|
@ -13,14 +13,13 @@
|
|||||||
import Onboarding from "src/app/views/Onboarding.svelte"
|
import Onboarding from "src/app/views/Onboarding.svelte"
|
||||||
import NoteCreate from "src/app/views/NoteCreate.svelte"
|
import NoteCreate from "src/app/views/NoteCreate.svelte"
|
||||||
import ZapModal from "src/app/views/ZapModal.svelte"
|
import ZapModal from "src/app/views/ZapModal.svelte"
|
||||||
import NoteShare from "src/app/views/NoteShare.svelte"
|
|
||||||
import PublishInfo from "src/app/views/PublishInfo.svelte"
|
import PublishInfo from "src/app/views/PublishInfo.svelte"
|
||||||
import NoteDetail from "src/app/views/NoteDetail.svelte"
|
import NoteDetail from "src/app/views/NoteDetail.svelte"
|
||||||
import NotificationInfo from "src/app/views/NotificationInfo.svelte"
|
import NotificationInfo from "src/app/views/NotificationInfo.svelte"
|
||||||
import ThreadDetail from "src/app/views/ThreadDetail.svelte"
|
import ThreadDetail from "src/app/views/ThreadDetail.svelte"
|
||||||
import PersonDetail from "src/app/views/PersonDetail.svelte"
|
import PersonDetail from "src/app/views/PersonDetail.svelte"
|
||||||
import PersonList from "src/app/shared/PersonList.svelte"
|
import PersonList from "src/app/shared/PersonList.svelte"
|
||||||
import PersonProfileInfo from "src/app/views/PersonProfileInfo.svelte"
|
import PersonInfo from "src/app/views/PersonInfo.svelte"
|
||||||
import PersonShare from "src/app/views/PersonShare.svelte"
|
import PersonShare from "src/app/views/PersonShare.svelte"
|
||||||
import TopicFeed from "src/app/views/TopicFeed.svelte"
|
import TopicFeed from "src/app/views/TopicFeed.svelte"
|
||||||
import ListList from "src/app/views/ListList.svelte"
|
import ListList from "src/app/views/ListList.svelte"
|
||||||
@ -29,6 +28,7 @@
|
|||||||
import RelayBrowse from "src/app/views/RelayBrowse.svelte"
|
import RelayBrowse from "src/app/views/RelayBrowse.svelte"
|
||||||
import RelayDetail from "src/app/views/RelayDetail.svelte"
|
import RelayDetail from "src/app/views/RelayDetail.svelte"
|
||||||
import RelayReview from "src/app/views/RelayReview.svelte"
|
import RelayReview from "src/app/views/RelayReview.svelte"
|
||||||
|
import QRCode from "src/app/views/QRCode.svelte"
|
||||||
|
|
||||||
export let m
|
export let m
|
||||||
</script>
|
</script>
|
||||||
@ -41,8 +41,6 @@
|
|||||||
<NoteCreate pubkey={m.pubkey} quote={m.quote} writeTo={m.relays} />
|
<NoteCreate pubkey={m.pubkey} quote={m.quote} writeTo={m.relays} />
|
||||||
{:else if m.type === "zap/create"}
|
{:else if m.type === "zap/create"}
|
||||||
<ZapModal pubkey={m.pubkey} note={m.note} author={m.author} zapper={m.zapper} />
|
<ZapModal pubkey={m.pubkey} note={m.note} author={m.author} zapper={m.zapper} />
|
||||||
{:else if m.type === "note/share"}
|
|
||||||
<NoteShare note={m.note} />
|
|
||||||
{:else if m.type === "notification/info"}
|
{:else if m.type === "notification/info"}
|
||||||
<NotificationInfo zaps={m.zaps} likes={m.likes} replies={m.replies} />
|
<NotificationInfo zaps={m.zaps} likes={m.likes} replies={m.replies} />
|
||||||
{:else if m.type === "thread/detail"}
|
{:else if m.type === "thread/detail"}
|
||||||
@ -76,7 +74,7 @@
|
|||||||
{:else if m.type === "person/detail"}
|
{:else if m.type === "person/detail"}
|
||||||
<PersonDetail npub={nip19.npubEncode(m.pubkey)} />
|
<PersonDetail npub={nip19.npubEncode(m.pubkey)} />
|
||||||
{:else if m.type === "person/info"}
|
{:else if m.type === "person/info"}
|
||||||
<PersonProfileInfo pubkey={m.pubkey} />
|
<PersonInfo pubkey={m.pubkey} />
|
||||||
{:else if m.type === "person/share"}
|
{:else if m.type === "person/share"}
|
||||||
<PersonShare pubkey={m.pubkey} />
|
<PersonShare pubkey={m.pubkey} />
|
||||||
{:else if m.type === "person/follows"}
|
{:else if m.type === "person/follows"}
|
||||||
@ -93,6 +91,8 @@
|
|||||||
<ListSelect item={m.item} />
|
<ListSelect item={m.item} />
|
||||||
{:else if m.type === "list/edit"}
|
{:else if m.type === "list/edit"}
|
||||||
<ListEdit list={m.list} />
|
<ListEdit list={m.list} />
|
||||||
|
{:else if m.type === "qrcode"}
|
||||||
|
<QRCode value={m.value} />
|
||||||
{:else if m.type === "message"}
|
{:else if m.type === "message"}
|
||||||
<Content size="lg">
|
<Content size="lg">
|
||||||
<div class="text-center">{m.message}</div>
|
<div class="text-center">{m.message}</div>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
import {tweened} from "svelte/motion"
|
import {tweened} from "svelte/motion"
|
||||||
import {find, reject, identity, propEq, sum, pluck, sortBy} from "ramda"
|
import {find, reject, identity, propEq, sum, pluck, sortBy} from "ramda"
|
||||||
import {stringToHue, formatSats, hsl} from "src/util/misc"
|
import {stringToHue, formatSats, hsl} from "src/util/misc"
|
||||||
import {isLike} from "src/util/nostr"
|
import {isLike, toNostrURI} from "src/util/nostr"
|
||||||
import {quantify} from "hurdak"
|
import {quantify} from "hurdak"
|
||||||
import {modal} from "src/partials/state"
|
import {modal} from "src/partials/state"
|
||||||
import Popover from "src/partials/Popover.svelte"
|
import Popover from "src/partials/Popover.svelte"
|
||||||
@ -24,15 +24,12 @@
|
|||||||
export let setFeedRelay
|
export let setFeedRelay
|
||||||
|
|
||||||
const zapper = Nip57.zappers.key(note.pubkey)
|
const zapper = Nip57.zappers.key(note.pubkey)
|
||||||
const bech32Note = nip19.noteEncode(note.id)
|
|
||||||
const nevent = nip19.neventEncode({id: note.id, relays: [note.seen_on]})
|
const nevent = nip19.neventEncode({id: note.id, relays: [note.seen_on]})
|
||||||
const interpolate = (a, b) => t => a + Math.round((b - a) * t)
|
const interpolate = (a, b) => t => a + Math.round((b - a) * t)
|
||||||
const likesCount = tweened(0, {interpolate})
|
const likesCount = tweened(0, {interpolate})
|
||||||
const zapsTotal = tweened(0, {interpolate})
|
const zapsTotal = tweened(0, {interpolate})
|
||||||
const repliesCount = tweened(0, {interpolate})
|
const repliesCount = tweened(0, {interpolate})
|
||||||
|
|
||||||
const share = () => modal.push({type: "note/share", note})
|
|
||||||
|
|
||||||
const quote = () => modal.push({type: "note/create", quote: note})
|
const quote = () => modal.push({type: "note/create", quote: note})
|
||||||
|
|
||||||
const unmute = () => user.unmute(note.id)
|
const unmute = () => user.unmute(note.id)
|
||||||
@ -99,7 +96,6 @@
|
|||||||
$: {
|
$: {
|
||||||
actions = []
|
actions = []
|
||||||
|
|
||||||
actions.push({label: "Share", icon: "share-nodes", onClick: share})
|
|
||||||
actions.push({label: "Quote", icon: "quote-left", onClick: quote})
|
actions.push({label: "Quote", icon: "quote-left", onClick: quote})
|
||||||
|
|
||||||
if (muted) {
|
if (muted) {
|
||||||
@ -229,9 +225,8 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<h1 class="staatliches text-2xl">Details</h1>
|
<h1 class="staatliches text-2xl">Details</h1>
|
||||||
<CopyValue label="Identifier" value={nevent} />
|
<CopyValue label="Link" value={toNostrURI(nevent)} />
|
||||||
<CopyValue label="Event ID (note)" value={bech32Note} />
|
<CopyValue label="Event ID" encode={nip19.noteEncode} value={note.id} />
|
||||||
<CopyValue label="Event ID (hex)" value={note.id} />
|
|
||||||
</Content>
|
</Content>
|
||||||
</Modal>
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -29,8 +29,6 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
actions.push({onClick: share, label: "Share", icon: "share-nodes"})
|
|
||||||
|
|
||||||
if (!isSelf && $canSign) {
|
if (!isSelf && $canSign) {
|
||||||
if ($canUseGiftWrap) {
|
if ($canUseGiftWrap) {
|
||||||
actions.push({
|
actions.push({
|
||||||
@ -71,8 +69,6 @@
|
|||||||
|
|
||||||
const openProfileInfo = () => modal.push({type: "person/info", pubkey})
|
const openProfileInfo = () => modal.push({type: "person/info", pubkey})
|
||||||
|
|
||||||
const share = () => modal.push({type: "person/share", pubkey})
|
|
||||||
|
|
||||||
const unfollow = () => user.unfollow(pubkey)
|
const unfollow = () => user.unfollow(pubkey)
|
||||||
|
|
||||||
const follow = () => user.follow(pubkey)
|
const follow = () => user.follow(pubkey)
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import cx from "classnames"
|
||||||
import {defaultTo} from "ramda"
|
import {defaultTo} from "ramda"
|
||||||
import {Directory, user} from "src/app/engine"
|
import {Directory, user} from "src/app/engine"
|
||||||
|
|
||||||
@ -8,7 +9,7 @@
|
|||||||
const following = user.followsSet.derived(s => s.has(pubkey))
|
const following = user.followsSet.derived(s => s.has(pubkey))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={$$props.class}>
|
<div class={cx("flex items-center gap-2", $$props.class)}>
|
||||||
<span>{Directory.displayProfile($profile)}</span>
|
<span>{Directory.displayProfile($profile)}</span>
|
||||||
{#if $following}
|
{#if $following}
|
||||||
<i class="fa fa-user-check ml-2 text-xs text-accent" />
|
<i class="fa fa-user-check ml-2 text-xs text-accent" />
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import {nip19} from "nostr-tools"
|
|
||||||
import {toNostrURI} from "src/util/nostr"
|
|
||||||
import Content from "src/partials/Content.svelte"
|
|
||||||
import QRCode from "src/partials/QRCode.svelte"
|
|
||||||
import {Nip65} from "src/app/engine"
|
|
||||||
|
|
||||||
export let note
|
|
||||||
|
|
||||||
const nevent = nip19.neventEncode({id: note.id, relays: Nip65.getEventHints(3, note)})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Content size="lg">
|
|
||||||
<QRCode code={toNostrURI(nevent)} />
|
|
||||||
<div class="text-center text-gray-1">Copy or scan from a nostr app to share this note.</div>
|
|
||||||
</Content>
|
|
42
src/app/views/PersonInfo.svelte
Normal file
42
src/app/views/PersonInfo.svelte
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {nip19} from "nostr-tools"
|
||||||
|
import {fly} from "src/util/transition"
|
||||||
|
import Content from "src/partials/Content.svelte"
|
||||||
|
import CopyValue from "src/partials/CopyValue.svelte"
|
||||||
|
import RelayCard from "src/app/shared/RelayCard.svelte"
|
||||||
|
import {Settings, Nip05, Nip65} from "src/app/engine"
|
||||||
|
|
||||||
|
export let pubkey
|
||||||
|
|
||||||
|
const handle = Nip05.getHandle(pubkey)
|
||||||
|
const relays = Nip65.getPubkeyHints(Settings.getSetting("relay_limit"), pubkey, "write")
|
||||||
|
const nprofile = nip19.nprofileEncode({pubkey, relays})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div in:fly={{y: 20}}>
|
||||||
|
<Content>
|
||||||
|
<h1 class="staatliches text-2xl">Details</h1>
|
||||||
|
<CopyValue label="Link" value={nprofile} />
|
||||||
|
<CopyValue label="Public Key" encode={nip19.npubEncode} value={pubkey} />
|
||||||
|
{#if handle}
|
||||||
|
{@const display = Nip05.displayHandle(handle)}
|
||||||
|
<CopyValue label="Nostr Address" value={display} />
|
||||||
|
<Content size="inherit" gap="gap-2">
|
||||||
|
<strong>Nostr Address Relays</strong>
|
||||||
|
{#each handle.profile.relays as url}
|
||||||
|
<RelayCard relay={{url}} />
|
||||||
|
{:else}
|
||||||
|
<p class="flex gap-2 items-center">
|
||||||
|
<i class="fa fa-info-circle" />
|
||||||
|
No relays are advertised at {display}.
|
||||||
|
</p>
|
||||||
|
{/each}
|
||||||
|
</Content>
|
||||||
|
{:else}
|
||||||
|
<p>
|
||||||
|
<i class="fa-solid fa-info-circle" />
|
||||||
|
Nostr Address address not available.
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</Content>
|
||||||
|
</div>
|
@ -1,55 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import {nip19} from "nostr-tools"
|
|
||||||
import {fly} from "src/util/transition"
|
|
||||||
import Content from "src/partials/Content.svelte"
|
|
||||||
import CopyValue from "src/partials/CopyValue.svelte"
|
|
||||||
import RelayCard from "src/app/shared/RelayCard.svelte"
|
|
||||||
import {Settings, Nip05, Nip65} from "src/app/engine"
|
|
||||||
|
|
||||||
export let pubkey
|
|
||||||
|
|
||||||
const handle = Nip05.getHandle(pubkey)
|
|
||||||
const npub = nip19.npubEncode(pubkey)
|
|
||||||
const relays = Nip65.getPubkeyHints(Settings.getSetting("relay_limit"), pubkey, "write")
|
|
||||||
const nprofile = nip19.nprofileEncode({pubkey, relays})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div in:fly={{y: 20}}>
|
|
||||||
<Content>
|
|
||||||
<h1 class="staatliches text-2xl">Profile Details</h1>
|
|
||||||
<CopyValue label="Public Key (Hex)" value={pubkey} />
|
|
||||||
<CopyValue label="Public Key (npub)" value={npub} />
|
|
||||||
{#if nprofile}
|
|
||||||
<CopyValue label="Profile Link" value={nprofile} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<h1 class="staatliches mt-4 text-2xl">NIP05</h1>
|
|
||||||
|
|
||||||
{#if handle}
|
|
||||||
<CopyValue label="NIP 05 Identifier" value={Nip05.displayHandle(handle)} />
|
|
||||||
<div>
|
|
||||||
<div class="mb-2 text-lg">NIP05 Relay Configuration</div>
|
|
||||||
{#if handle.profile.relays?.length > 0}
|
|
||||||
<p class="mb-4 text-sm text-gray-1">
|
|
||||||
These relays are advertised by the NIP05 identifier's validation endpoint.
|
|
||||||
</p>
|
|
||||||
<div class="grid grid-cols-1 gap-4">
|
|
||||||
{#each handle.profile.relays as url}
|
|
||||||
<RelayCard relay={{url}} />
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="mb-4 text-sm">
|
|
||||||
<i class="fa-solid fa-info-circle" />
|
|
||||||
No relays are advertised by the NIP05 identifier's validation endpoint.
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="mb-4 text-sm text-gray-1">
|
|
||||||
<i class="fa-solid fa-info-circle" />
|
|
||||||
NIP05 identifier not available.
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</Content>
|
|
||||||
</div>
|
|
10
src/app/views/QRCode.svelte
Normal file
10
src/app/views/QRCode.svelte
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Content from "src/partials/Content.svelte"
|
||||||
|
import QRCode from "src/partials/QRCode.svelte"
|
||||||
|
|
||||||
|
export let value
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Content size="lg">
|
||||||
|
<QRCode code={value} />
|
||||||
|
</Content>
|
@ -1,18 +1,42 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {copyToClipboard} from "src/util/html"
|
import {copyToClipboard} from "src/util/html"
|
||||||
import {toast} from "src/partials/state"
|
import {toast, modal} from "src/partials/state"
|
||||||
|
import Popover from "src/partials/Popover.svelte"
|
||||||
|
import Toggle from "src/partials/Toggle.svelte"
|
||||||
|
|
||||||
export let label
|
export let label
|
||||||
export let value
|
export let value
|
||||||
|
export let encode = null
|
||||||
|
|
||||||
|
let showEncoded = true
|
||||||
|
|
||||||
|
$: displayValue = showEncoded && encode ? encode(value) : value
|
||||||
|
|
||||||
const copy = () => {
|
const copy = () => {
|
||||||
copyToClipboard(value)
|
copyToClipboard(value)
|
||||||
toast.show("info", `${label} copied to clipboard!`)
|
toast.show("info", `${label} copied to clipboard!`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const share = () => modal.push({type: "qrcode", value: displayValue})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<strong>{label}</strong>
|
<div class="flex flex-col gap-2">
|
||||||
<div class="flex items-center gap-2 font-mono text-sm">
|
<div class="flex items-center justify-between">
|
||||||
<i class="fa-solid fa-copy cursor-pointer" on:click={copy} />
|
<strong>{label}</strong>
|
||||||
{value.length > 80 ? value.slice(0, 50) + "..." : value}
|
{#if encode}
|
||||||
|
<Popover triggerType="mouseenter">
|
||||||
|
<div slot="trigger">
|
||||||
|
<Toggle bind:value={showEncoded} />
|
||||||
|
</div>
|
||||||
|
<span slot="tooltip">Show {showEncoded ? "raw" : "encoded"} version</span>
|
||||||
|
</Popover>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-0 items-center gap-4 font-mono text-sm">
|
||||||
|
<i class="fa-solid fa-copy cursor-pointer" on:click={copy} />
|
||||||
|
<i class="fa-solid fa-qrcode cursor-pointer" on:click={share} />
|
||||||
|
<p class="min-w-0 overflow-hidden text-ellipsis">
|
||||||
|
{displayValue}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
export let hideAfter = false
|
export let hideAfter = false
|
||||||
|
|
||||||
const showBefore = $$slots.before && !hideBefore
|
const showBefore = $$slots.before && !hideBefore
|
||||||
const showAfter = $$slots.before && !hideAfter
|
const showAfter = $$slots.after && !hideAfter
|
||||||
const className = cx(
|
const className = cx(
|
||||||
$$props.class,
|
$$props.class,
|
||||||
"rounded-full shadow-inset py-2 px-4 w-full placeholder:text-gray-5",
|
"rounded-full shadow-inset py-2 px-4 w-full placeholder:text-gray-5",
|
||||||
|
Loading…
Reference in New Issue
Block a user