nostr/coracle
1
0
Fork 0
mirror of https://github.com/coracle-social/coracle.git synced 2024-09-29 08:21:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Speed things up by removing animations

Browse Source
This commit is contained in:
Jonathan Staab 2023-10-17 10:56:55 -07:00
parent 320e8abd59
commit 7ce32fa56f
18 changed files with 240 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -30,6 +30,7 @@
- [x] Encode relays into urls when possible - [x] Encode relays into urls when possible
- [x] Opt-in to local relay when it's actually useful - [x] Opt-in to local relay when it's actually useful
- [x] Fix link overflow when media previews are off - [x] Fix link overflow when media previews are off
- [x] Speed things up by using animations more sparingly
# 0.3.10 # 0.3.10

5
src/app/Routes.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import {reverse} from "ramda" import {reverse} from "ramda"
import {fly} from "src/util/transition"
import type {HistoryItem} from "src/util/router" import type {HistoryItem} from "src/util/router"
import {decodeQueryString, decodeRouteParams} from "src/util/router" import {decodeQueryString, decodeRouteParams} from "src/util/router"
import Modal from "src/partials/Modal.svelte" import Modal from "src/partials/Modal.svelte"
@ -31,7 +32,9 @@
<div class="pt-16 text-gray-2 lg:ml-48" class:pointer-events-none={$menuIsOpen}> <div class="pt-16 text-gray-2 lg:ml-48" class:pointer-events-none={$menuIsOpen}>
{#if $page} {#if $page}
{#key $page.path} {#key $page.path}
<svelte:component this={$page.route.component} {...getProps($page)} /> <div in:fly={{y: 20}}>
<svelte:component this={$page.route.component} {...getProps($page)} />
</div>
{/key} {/key}
{/if} {/if}
</div> </div>

15
src/app/shared/Feed.svelte
View File

@ -4,6 +4,7 @@
import {Storage} from "hurdak" import {Storage} from "hurdak"
import {FeedLoader} from "src/engine" import {FeedLoader} from "src/engine"
import {createScroller} from "src/util/misc" import {createScroller} from "src/util/misc"
import {fly} from "src/util/transition"
import {getModal} from "src/partials/state" import {getModal} from "src/partials/state"
import Spinner from "src/partials/Spinner.svelte" import Spinner from "src/partials/Spinner.svelte"
import Content from "src/partials/Content.svelte" import Content from "src/partials/Content.svelte"
@ -88,12 +89,14 @@
</FeedControls> </FeedControls>
{/if} {/if}
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
{#each $notes as note (note.id)} {#each $notes as note, i (note.id)}
<Note <div in:fly={{y: 20, duration: i < 5 ? 100 : 0}}>
depth={$hideReplies ? 0 : 2} <Note
context={note.replies || []} depth={$hideReplies ? 0 : 2}
filters={[compileFilter(filter)]} context={note.replies || []}
{note} /> filters={[compileFilter(filter)]}
{note} />
</div>
{/each} {/each}
</div> </div>
<Spinner /> <Spinner />

3
src/app/shared/FeedControls.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import {pluck, not, find, propEq, prop, equals, omit, objOf} from "ramda" import {pluck, not, find, propEq, prop, equals, omit, objOf} from "ramda"
import {displayList} from "hurdak" import {displayList} from "hurdak"
import {debounce} from "throttle-debounce" import {debounce} from "throttle-debounce"
@ -204,7 +203,7 @@
} }
</script> </script>
<div in:fly={{y: 20}}> <div>
<div class="float-right flex justify-end gap-1"> <div class="float-right flex justify-end gap-1">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} /> <Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} />

60
src/app/shared/Note.svelte
View File

@ -2,8 +2,8 @@
import {partition, reject, propEq, uniqBy, prop} from "ramda" import {partition, reject, propEq, uniqBy, prop} from "ramda"
import {onMount, onDestroy} from "svelte" import {onMount, onDestroy} from "svelte"
import {quantify, batch} from "hurdak" import {quantify, batch} from "hurdak"
import {LOCAL_RELAY_URL, Tags, findRootId, isChildOf, findReplyId, isLike} from "src/util/nostr"
import {fly} from "src/util/transition" import {fly} from "src/util/transition"
import {LOCAL_RELAY_URL, Tags, findRootId, isChildOf, findReplyId, isLike} from "src/util/nostr"
import {formatTimestamp} from "src/util/misc" import {formatTimestamp} from "src/util/misc"
import Popover from "src/partials/Popover.svelte" import Popover from "src/partials/Popover.svelte"
import Spinner from "src/partials/Spinner.svelte" import Spinner from "src/partials/Spinner.svelte"
@ -57,7 +57,6 @@
let collapsed = depth === 0 let collapsed = depth === 0
let ctx = uniqBy(prop("id"), context) let ctx = uniqBy(prop("id"), context)
const {ENABLE_ZAPS} = $env
const showEntire = anchorId === event.id const showEntire = anchorId === event.id
const interactive = !anchorId || !showEntire const interactive = !anchorId || !showEntire
@ -128,7 +127,7 @@
onMount(async () => { onMount(async () => {
const zapAddress = Tags.from(note).getMeta("zap") const zapAddress = Tags.from(note).getMeta("zap")
if (zapAddress) { if (zapAddress && getLnUrl(zapAddress)) {
zapper = await getZapper(getLnUrl(zapAddress)) zapper = await getZapper(getLnUrl(zapAddress))
} else { } else {
unsubZapper = people.key(note.pubkey).subscribe($p => { unsubZapper = people.key(note.pubkey).subscribe($p => {
@ -148,7 +147,7 @@
const kinds = [1, 7] const kinds = [1, 7]
if (ENABLE_ZAPS) { if ($env.ENABLE_ZAPS) {
kinds.push(9735) kinds.push(9735)
} }
@ -284,41 +283,42 @@
{#if !showEntire && replies.length > visibleReplies.length} {#if !showEntire && replies.length > visibleReplies.length}
<button class="ml-5 cursor-pointer py-2 text-gray-1 outline-0" on:click={onClick}> <button class="ml-5 cursor-pointer py-2 text-gray-1 outline-0" on:click={onClick}>
<i class="fa fa-up-down pr-2 text-sm" /> <i class="fa fa-up-down pr-2 text-sm" />
Show {quantify( Show {quantify(replies.length - visibleReplies.length, "other reply", "more replies")}
replies.length - visibleReplies.length,
"other reply",
"more replies"
)}
</button> </button>
<div class="absolute -left-4 -top-2 h-14 w-px bg-gray-6" /> <div class="absolute -left-4 -top-2 h-14 w-px bg-gray-6" />
{:else if visibleReplies.length > 0 || showHiddenReplies} {:else if visibleReplies.length > 0 || showHiddenReplies}
<div class="absolute -left-4 -top-2 h-4 w-px bg-gray-6" /> <div class="absolute -left-4 -top-2 h-4 w-px bg-gray-6" />
{/if} {/if}
{#each visibleReplies as r, i (r.id)} {#if visibleReplies.length}
<svelte:self <div in:fly={{y: 20}}>
isLastReply={!showMutedReplies && i === visibleReplies.length - 1} {#each visibleReplies as r, i (r.id)}
showParent={false} <svelte:self
showMuted isLastReply={!showMutedReplies && i === visibleReplies.length - 1}
note={r} showParent={false}
depth={depth - 1} showMuted
context={ctx} note={r}
{anchorId} /> depth={depth - 1}
{/each} context={ctx}
{anchorId} />
{/each}
</div>
{/if}
{#if showHiddenReplies} {#if showHiddenReplies}
{#each hiddenReplies as r, i (r.id)} <div in:fly={{y: 20}}>
<svelte:self {#each hiddenReplies as r, i (r.id)}
isLastReply={i === hiddenReplies.length - 1} <svelte:self
showParent={false} isLastReply={i === hiddenReplies.length - 1}
showMuted showParent={false}
note={r} showMuted
depth={depth - 1} note={r}
context={ctx} depth={depth - 1}
{anchorId} /> context={ctx}
{/each} {anchorId} />
{/each}
</div>
{:else if showEntire && hiddenReplies.length > 0} {:else if showEntire && hiddenReplies.length > 0}
<button <button
class="ml-5 cursor-pointer py-2 text-gray-1 outline-0" class="ml-5 cursor-pointer py-2 text-gray-1 outline-0"
in:fly={{y: 20}}
on:click={() => { on:click={() => {
showMutedReplies = true showMutedReplies = true
}}> }}>

33
src/app/shared/PersonRelays.svelte
View File

@ -1,25 +1,22 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import Content from "src/partials/Content.svelte" import Content from "src/partials/Content.svelte"
import RelayCard from "src/app/shared/RelayCard.svelte" import RelayCard from "src/app/shared/RelayCard.svelte"
export let relays export let relays
</script> </script>
<div in:fly={{y: 20}}> <Content>
<Content> <p>
<p> Below are the relays this user publishes to. Join one or more to make sure you never miss their
Below are the relays this user publishes to. Join one or more to make sure you never miss updates.
their updates. </p>
</p> {#if relays.length === 0}
{#if relays.length === 0} <div class="pt-8 text-center">No relays found</div>
<div class="pt-8 text-center">No relays found</div> {:else}
{:else} <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> {#each relays as relay (relay.url)}
{#each relays as relay (relay.url)} <RelayCard {relay} />
<RelayCard {relay} /> {/each}
{/each} </div>
</div> {/if}
{/if} </Content>
</Content>
</div>

6
src/app/shared/RelayCard.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import {stringToHue, hsl} from "src/util/misc" import {stringToHue, hsl} from "src/util/misc"
import Toggle from "src/partials/Toggle.svelte" import Toggle from "src/partials/Toggle.svelte"
import Rating from "src/partials/Rating.svelte" import Rating from "src/partials/Rating.svelte"
@ -18,8 +17,7 @@
<div <div
class="flex flex-col justify-between gap-3 rounded-xl border border-l-2 border-solid border-gray-6 bg-gray-8 px-6 py-3 shadow" class="flex flex-col justify-between gap-3 rounded-xl border border-l-2 border-solid border-gray-6 bg-gray-8 px-6 py-3 shadow"
style={`border-left-color: ${hsl(stringToHue(relay.url))}`} style={`border-left-color: ${hsl(stringToHue(relay.url))}`}>
in:fly={{y: 20}}>
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="flex min-w-0 items-center gap-2 text-xl"> <div class="flex min-w-0 items-center gap-2 text-xl">
<i class={relay.url.startsWith("ws://") ? "fa fa-unlock" : "fa fa-lock"} /> <i class={relay.url.startsWith("ws://") ? "fa fa-unlock" : "fa fa-lock"} />
@ -32,7 +30,7 @@
<RelayStatus {relay} /> <RelayStatus {relay} />
{/if} {/if}
{#if rating} {#if rating}
<div class="px-4 text-sm" in:fly={{y: 20}}> <div class="px-4 text-sm">
<Rating inert value={rating} /> <Rating inert value={rating} />
</div> </div>
{/if} {/if}

97
src/app/views/Apps.svelte
View File

@ -5,7 +5,6 @@
import {tryJson, displayDomain, pushToKey} from "src/util/misc" import {tryJson, displayDomain, pushToKey} from "src/util/misc"
import {copyToClipboard} from "src/util/html" import {copyToClipboard} from "src/util/html"
import {Tags} from "src/util/nostr" import {Tags} from "src/util/nostr"
import {fly} from "src/util/transition"
import {toast} from "src/partials/state" import {toast} from "src/partials/state"
import Image from "src/partials/Image.svelte" import Image from "src/partials/Image.svelte"
import Anchor from "src/partials/Anchor.svelte" import Anchor from "src/partials/Anchor.svelte"
@ -102,56 +101,58 @@
document.title = "Apps" document.title = "Apps"
</script> </script>
<div in:fly={{y: 20}}> <div class="flex flex-col gap-12 p-4">
<div class="flex flex-col gap-12 p-4"> <div class="flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center"> <Heading>Recommended micro-apps</Heading>
<Heading>Recommended micro-apps</Heading> <p>Hand-picked recommendations to enhance your nostr experience.</p>
<p>Hand-picked recommendations to enhance your nostr experience.</p> </div>
</div> <div class="columns-sm gap-4">
<div class="columns-sm gap-4"> {#each getColumns(apps) as app (app.id)}
{#each getColumns(apps) as app (app.id)} <Card class="mb-4 flex break-inside-avoid flex-col gap-4">
<Card class="mb-4 flex break-inside-avoid flex-col gap-4"> <div class="flex gap-4">
<div class="flex gap-4"> <ImageCircle class="h-14 w-14" src={app.profile.picture} />
<ImageCircle class="h-14 w-14" src={app.profile.picture} /> <div class="flex min-w-0 flex-grow flex-col">
<div class="flex min-w-0 flex-grow flex-col"> <h1 class="text-2xl">{app.profile.display_name || app.profile.name}</h1>
<h1 class="text-2xl">{app.profile.display_name || app.profile.name}</h1> {#if app.handle}
{#if app.handle} <span class="text-gray-3">{displayHandle(app.handle)}</span>
<span class="text-gray-3">{displayHandle(app.handle)}</span>
{/if}
</div>
</div>
<p>{app.profile.about}</p>
<div>
{#if app.profile.website}
<Anchor external href={app.profile.website} class="mb-2 mr-2 inline-block">
<Chip><i class="fa fa-link" />{displayDomain(app.profile.website)}</Chip>
</Anchor>
{/if}
{#if app.profile.lud16}
<Anchor class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => copy("Address", app.profile.lud16)}>
<Chip>
<i class="fa fa-bolt" />{app.profile.lud16}
</Chip>
</Anchor>
{/if}
{#if app.profile.nip05}
<Anchor class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => goToNip05(app.profile.nip05)}>
<Chip>
<i class="fa fa-at" />{app.profile.nip05}
</Chip>
</Anchor>
{/if} {/if}
</div> </div>
{#if app.recs.length > 0} </div>
<i class="text-sm"> <p>{app.profile.about}</p>
Recommended by {quantify(app.recs.length, "person", "people")} you follow. <div>
</i> {#if app.profile.website}
<Anchor external href={app.profile.website} class="mb-2 mr-2 inline-block">
<Chip><i class="fa fa-link" />{displayDomain(app.profile.website)}</Chip>
</Anchor>
{/if} {/if}
{#if app.profile.banner} {#if app.profile.lud16}
<Image class="rounded" src={app.profile.banner} /> <Anchor
class="mb-2 mr-2 inline-block cursor-pointer"
on:click={() => copy("Address", app.profile.lud16)}>
<Chip>
<i class="fa fa-bolt" />{app.profile.lud16}
</Chip>
</Anchor>
{/if} {/if}
</Card> {#if app.profile.nip05}
{/each} <Anchor
</div> class="mb-2 mr-2 inline-block cursor-pointer"
on:click={() => goToNip05(app.profile.nip05)}>
<Chip>
<i class="fa fa-at" />{app.profile.nip05}
</Chip>
</Anchor>
{/if}
</div>
{#if app.recs.length > 0}
<i class="text-sm">
Recommended by {quantify(app.recs.length, "person", "people")} you follow.
</i>
{/if}
{#if app.profile.banner}
<Image class="rounded" src={app.profile.banner} />
{/if}
</Card>
{/each}
</div> </div>
</div> </div>

2
src/app/views/Logout.svelte
View File

@ -26,7 +26,7 @@
{#if confirmed} {#if confirmed}
<div in:fly={{y: 20}}>Clearing your local database...</div> <div in:fly={{y: 20}}>Clearing your local database...</div>
{:else} {:else}
<div class="flex flex-col items-center gap-8" in:fly={{y: 20}}> <div class="flex flex-col items-center gap-8">
<div>Are you sure you want to log out? All data will be cleared.</div> <div>Are you sure you want to log out? All data will be cleared.</div>
<Anchor theme="button" on:click={confirm}>Log out</Anchor> <Anchor theme="button" on:click={confirm}>Log out</Anchor>
</div> </div>

5
src/app/views/NoteDetail.svelte
View File

@ -2,6 +2,7 @@
import {onMount} from "svelte" import {onMount} from "svelte"
import {defer} from "hurdak" import {defer} from "hurdak"
import {isMobile} from "src/util/html" import {isMobile} from "src/util/html"
import {fly} from "src/util/transition"
import Content from "src/partials/Content.svelte" import Content from "src/partials/Content.svelte"
import Spinner from "src/partials/Spinner.svelte" import Spinner from "src/partials/Spinner.svelte"
import Note from "src/app/shared/Note.svelte" import Note from "src/app/shared/Note.svelte"
@ -23,6 +24,8 @@
{#await promise} {#await promise}
<Spinner /> <Spinner />
{:then note} {:then note}
<Note showLoading anchorId={note.id} {note} {depth} {relays} {context} /> <div in:fly={{y: 20}}>
<Note showLoading anchorId={note.id} {note} {depth} {relays} {context} />
</div>
{/await} {/await}
</Content> </Content>

47
src/app/views/Notifications.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import {find, assocPath} from "ramda" import {find, assocPath} from "ramda"
import {onMount} from "svelte" import {onMount} from "svelte"
import {fly} from "src/util/transition"
import {now, createScroller, formatTimestampAsDate} from "src/util/misc" import {now, createScroller, formatTimestampAsDate} from "src/util/misc"
import {noteKinds, reactionKinds} from "src/util/nostr" import {noteKinds, reactionKinds} from "src/util/nostr"
import Tabs from "src/partials/Tabs.svelte" import Tabs from "src/partials/Tabs.svelte"
@ -30,7 +29,7 @@
export let activeTab = tabs[0] export let activeTab = tabs[0]
let limit = 5 let limit = 4
$: tabKinds = activeTab === tabs[0] ? noteKinds : reactionKinds.concat(9734) $: tabKinds = activeTab === tabs[0] ? noteKinds : reactionKinds.concat(9734)
@ -55,7 +54,7 @@
}) })
const scroller = createScroller(async () => { const scroller = createScroller(async () => {
limit += 5 limit += 4
}) })
return () => { return () => {
@ -65,26 +64,24 @@
}) })
</script> </script>
<div in:fly={{y: 20, delay: 500}}> <Content>
<Content> <Tabs {tabs} {activeTab} {setActiveTab} />
<Tabs {tabs} {activeTab} {setActiveTab} /> {#each tabNotifications as notification, i (notification.key)}
{#each tabNotifications as notification, i (notification.key)} {@const lineText = getLineText(i)}
{@const lineText = getLineText(i)} {#if lineText}
{#if lineText} <div class="flex items-center gap-4">
<div class="flex items-center gap-4"> <small class="whitespace-nowrap text-gray-1">{lineText}</small>
<small class="whitespace-nowrap text-gray-1">{lineText}</small> <div class="h-px w-full bg-gray-6" />
<div class="h-px w-full bg-gray-6" /> </div>
</div> {/if}
{/if} {#if !notification.event}
{#if !notification.event} <NotificationMention {notification} />
<NotificationMention {notification} /> {:else if activeTab === tabs[0]}
{:else if activeTab === tabs[0]} <NotificationReplies {notification} />
<NotificationReplies {notification} />
{:else}
<NotificationReactions {notification} />
{/if}
{:else} {:else}
<Content size="lg" class="text-center">No notifications found - check back later!</Content> <NotificationReactions {notification} />
{/each} {/if}
</Content> {:else}
</div> <Content size="lg" class="text-center">No notifications found - check back later!</Content>
{/each}
</Content>

33
src/app/views/Onboarding.svelte
View File

@ -2,7 +2,6 @@
import {onMount} from "svelte" import {onMount} from "svelte"
import {generatePrivateKey} from "nostr-tools" import {generatePrivateKey} from "nostr-tools"
import {closure, sleep} from "hurdak" import {closure, sleep} from "hurdak"
import {fly} from "src/util/transition"
import Content from "src/partials/Content.svelte" import Content from "src/partials/Content.svelte"
import OnboardingIntro from "src/app/views/OnboardingIntro.svelte" import OnboardingIntro from "src/app/views/OnboardingIntro.svelte"
import OnboardingProfile from "src/app/views/OnboardingProfile.svelte" import OnboardingProfile from "src/app/views/OnboardingProfile.svelte"
@ -95,21 +94,19 @@
</script> </script>
{#key stage} {#key stage}
<div in:fly={{y: 20}}> <Content size="lg">
<Content size="lg"> {#if stage === "intro"}
{#if stage === "intro"} <OnboardingIntro {setStage} />
<OnboardingIntro {setStage} /> {:else if stage === "profile"}
{:else if stage === "profile"} <OnboardingProfile {setStage} {profile} />
<OnboardingProfile {setStage} {profile} /> {:else if stage === "key"}
{:else if stage === "key"} <OnboardingKey {setStage} {privkey} />
<OnboardingKey {setStage} {privkey} /> {:else if stage === "relays"}
{:else if stage === "relays"} <OnboardingRelays {setStage} bind:relays />
<OnboardingRelays {setStage} bind:relays /> {:else if stage === "follows"}
{:else if stage === "follows"} <OnboardingFollows {setStage} bind:petnames />
<OnboardingFollows {setStage} bind:petnames /> {:else if stage === "note"}
{:else if stage === "note"} <OnboardingNote {setStage} {signup} />
<OnboardingNote {setStage} {signup} /> {/if}
{/if} </Content>
</Content>
</div>
{/key} {/key}

51
src/app/views/RelayList.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import Anchor from "src/partials/Anchor.svelte" import Anchor from "src/partials/Anchor.svelte"
import Content from "src/partials/Content.svelte" import Content from "src/partials/Content.svelte"
import RelayCard from "src/app/shared/RelayCard.svelte" import RelayCard from "src/app/shared/RelayCard.svelte"
@ -11,31 +10,29 @@
document.title = "Relays" document.title = "Relays"
</script> </script>
<div in:fly={{y: 20}}> <Content>
<Content> <div class="flex justify-between">
<div class="flex justify-between"> <div class="flex items-center gap-2">
<div class="flex items-center gap-2"> <i class="fa fa-server fa-lg" />
<i class="fa fa-server fa-lg" /> <h2 class="staatliches text-2xl">Your relays</h2>
<h2 class="staatliches text-2xl">Your relays</h2>
</div>
<Anchor theme="button-accent" class="flex items-center gap-2" on:click={browse}>
<i class="fa-solid fa-compass" /> Browse Relays
</Anchor>
</div> </div>
<p> <Anchor theme="button-accent" class="flex items-center gap-2" on:click={browse}>
Relays are hubs for your content and connections. At least one is required to interact with <i class="fa-solid fa-compass" /> Browse Relays
the network, but you can join as many as you like. </Anchor>
</p> </div>
{#if $relayPolicies.length === 0} <p>
<div class="mt-8 flex items-center justify-center gap-2 text-center"> Relays are hubs for your content and connections. At least one is required to interact with the
<i class="fa fa-triangle-exclamation" /> network, but you can join as many as you like.
No relays connected </p>
</div> {#if $relayPolicies.length === 0}
{/if} <div class="mt-8 flex items-center justify-center gap-2 text-center">
<div class="grid grid-cols-1 gap-4"> <i class="fa fa-triangle-exclamation" />
{#each $relayPolicies as policy (policy.url)} No relays connected
<RelayCard showStatus showControls relay={policy} />
{/each}
</div> </div>
</Content> {/if}
</div> <div class="grid grid-cols-1 gap-4">
{#each $relayPolicies as policy (policy.url)}
<RelayCard showStatus showControls relay={policy} />
{/each}
</div>
</Content>

6
src/app/views/UserContent.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import {onMount} from "svelte" import {onMount} from "svelte"
import {pluck, identity} from "ramda" import {pluck, identity} from "ramda"
import {fly} from "src/util/transition"
import {Tags} from "src/util/nostr" import {Tags} from "src/util/nostr"
import {toast, appName} from "src/partials/state" import {toast, appName} from "src/partials/state"
import Input from "src/partials/Input.svelte" import Input from "src/partials/Input.svelte"
@ -49,7 +48,7 @@
document.title = "Content Preferences" document.title = "Content Preferences"
</script> </script>
<form on:submit|preventDefault={submit} in:fly={{y: 20}}> <form on:submit|preventDefault={submit}>
<Content> <Content>
<div class="mb-4 flex flex-col items-center justify-center"> <div class="mb-4 flex flex-col items-center justify-center">
<Heading>Content Settings</Heading> <Heading>Content Settings</Heading>
@ -75,7 +74,8 @@
</div> </div>
<Input type="range" bind:value={settings.min_wot_score} min={0} max={100} /> <Input type="range" bind:value={settings.min_wot_score} min={0} max={100} />
<p slot="info"> <p slot="info">
Select a minimum <Anchor theme="anchor" modal href="/help/web-of-trust">web-of-trust</Anchor> Select a minimum <Anchor theme="anchor" modal href="/help/web-of-trust"
>web-of-trust</Anchor>
score. Notes from accounts with a lower score will be automatically hidden. score. Notes from accounts with a lower score will be automatically hidden.
</p> </p>
</Field> </Field>

119
src/app/views/UserKeys.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import {nip19} from "nostr-tools" import {nip19} from "nostr-tools"
import {copyToClipboard} from "src/util/html" import {copyToClipboard} from "src/util/html"
import Input from "src/partials/Input.svelte" import Input from "src/partials/Input.svelte"
@ -27,73 +26,71 @@
document.title = "Keys" document.title = "Keys"
</script> </script>
<div in:fly={{y: 20}}> <Content>
<Content> <div class="flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center"> <Heading>Your Keys</Heading>
<Heading>Your Keys</Heading> <p>
<p> Your account is identified across the network using a public/private <Anchor
Your account is identified across the network using a public/private <Anchor href={keypairUrl}
href={keypairUrl} external>keypair</Anchor
external>keypair</Anchor >. This allows you to fully own your account, and move to another app if needed.
>. This allows you to fully own your account, and move to another app if needed. </p>
</div>
<div class="flex w-full flex-col gap-8">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<strong>Show keys in hex format</strong>
<Toggle bind:value={asHex} />
</div>
<p class="text-sm text-gray-1">
Under the hood, Nostr uses a different encoding to represent keys.
</p> </p>
</div> </div>
<div class="flex w-full flex-col gap-8"> <div class="flex flex-col gap-1">
<strong>Public Key</strong>
<Input disabled value={pubkeyDisplay}>
<button
slot="after"
class="fa-solid fa-copy cursor-pointer"
on:click={() => copyKey("public", pubkeyDisplay)} />
</Input>
<p class="text-sm text-gray-1">
Your public key identifies your account. You can share this with people trying to find you
on nostr.
</p>
</div>
{#if $session?.privkey}
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<div class="flex items-center gap-2"> <strong>Private Key</strong>
<strong>Show keys in hex format</strong> <Input disabled type="password" value={privkeyDisplay}>
<Toggle bind:value={asHex} />
</div>
<p class="text-sm text-gray-1">
Under the hood, Nostr uses a different encoding to represent keys.
</p>
</div>
<div class="flex flex-col gap-1">
<strong>Public Key</strong>
<Input disabled value={pubkeyDisplay}>
<button <button
slot="after" slot="after"
class="fa-solid fa-copy cursor-pointer" class="fa-solid fa-copy cursor-pointer"
on:click={() => copyKey("public", pubkeyDisplay)} /> on:click={() => copyKey("private", privkeyDisplay)} />
</Input> </Input>
<p class="text-sm text-gray-1"> <p class="text-sm text-gray-1">
Your public key identifies your account. You can share this with people trying to find you Your private key is used to prove your identity by cryptographically signing messages. <strong
on nostr. >Do not share this with anyone.</strong>
Be careful about copying this into other apps - instead, consider using a <Anchor
href={nip07}
external>compatible browser extension</Anchor> to securely store your key.
</p> </p>
</div> </div>
{#if $session?.privkey} {/if}
<div class="flex flex-col gap-1"> {#if $session?.bunkerKey}
<strong>Private Key</strong> <div class="flex flex-col gap-1">
<Input disabled type="password" value={privkeyDisplay}> <strong>Bunker Key</strong>
<button <Input disabled type="password" value={$session.bunkerKey}>
slot="after" <button
class="fa-solid fa-copy cursor-pointer" slot="after"
on:click={() => copyKey("private", privkeyDisplay)} /> class="fa-solid fa-copy cursor-pointer"
</Input> on:click={() => copyKey("bunker", $session.bunkerKey)} />
<p class="text-sm text-gray-1"> </Input>
Your private key is used to prove your identity by cryptographically signing messages. <strong <p class="text-sm text-gray-1">
>Do not share this with anyone.</strong> Your bunker key is used to authorize Coracle with your nsec bunker to sign events on your
Be careful about copying this into other apps - instead, consider using a <Anchor behalf. Save this if you would like to log in elsewhere without re-authorizing.
href={nip07} </p>
external>compatible browser extension</Anchor> to securely store your key. </div>
</p> {/if}
</div> </div>
{/if} </Content>
{#if $session?.bunkerKey}
<div class="flex flex-col gap-1">
<strong>Bunker Key</strong>
<Input disabled type="password" value={$session.bunkerKey}>
<button
slot="after"
class="fa-solid fa-copy cursor-pointer"
on:click={() => copyKey("bunker", $session.bunkerKey)} />
</Input>
<p class="text-sm text-gray-1">
Your bunker key is used to authorize Coracle with your nsec bunker to sign events on
your behalf. Save this if you would like to log in elsewhere without re-authorizing.
</p>
</div>
{/if}
</div>
</Content>
</div>

3
src/app/views/UserProfile.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import Input from "src/partials/Input.svelte" import Input from "src/partials/Input.svelte"
import ImageInput from "src/partials/ImageInput.svelte" import ImageInput from "src/partials/ImageInput.svelte"
import Textarea from "src/partials/Textarea.svelte" import Textarea from "src/partials/Textarea.svelte"
@ -29,7 +28,7 @@
document.title = "Profile" document.title = "Profile"
</script> </script>
<form on:submit|preventDefault={submit} in:fly={{y: 20}}> <form on:submit|preventDefault={submit}>
<Content> <Content>
<div class="mb-4 flex flex-col items-center justify-center"> <div class="mb-4 flex flex-col items-center justify-center">
<Heading>About You</Heading> <Heading>About You</Heading>

3
src/app/views/UserSettings.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import {fly} from "src/util/transition"
import {toast, appName} from "src/partials/state" import {toast, appName} from "src/partials/state"
import Field from "src/partials/Field.svelte" import Field from "src/partials/Field.svelte"
import FieldInline from "src/partials/FieldInline.svelte" import FieldInline from "src/partials/FieldInline.svelte"
@ -21,7 +20,7 @@
document.title = "Settings" document.title = "Settings"
</script> </script>
<form on:submit|preventDefault={submit} in:fly={{y: 20}}> <form on:submit|preventDefault={submit}>
<Content> <Content>
<div class="mb-4 flex flex-col items-center justify-center"> <div class="mb-4 flex flex-col items-center justify-center">
<Heading>App Settings</Heading> <Heading>App Settings</Heading>

2
src/partials/Card.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import cx from "classnames" import cx from "classnames"
import {createEventDispatcher} from "svelte" import {createEventDispatcher} from "svelte"
import {fly} from "src/util/transition"
export let interactive = false export let interactive = false
export let stopPropagation = false export let stopPropagation = false
@ -35,7 +34,6 @@
</script> </script>
<div <div
in:fly={{y: 20}}
on:mousedown={startClick} on:mousedown={startClick}
on:touchstart={startClick} on:touchstart={startClick}
on:click={onClick} on:click={onClick}