nostr/coracle
1
0
Fork 0
mirror of https://github.com/coracle-social/coracle.git synced 2024-09-29 00:10:52 +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] Opt-in to local relay when it's actually useful
- [x] Fix link overflow when media previews are off
- [x] Speed things up by using animations more sparingly
# 0.3.10

5
src/app/Routes.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import {reverse} from "ramda"
import {fly} from "src/util/transition"
import type {HistoryItem} from "src/util/router"
import {decodeQueryString, decodeRouteParams} from "src/util/router"
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}>
{#if $page}
{#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}
{/if}
</div>

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

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

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

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

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

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

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

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

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

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

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

@ -26,7 +26,7 @@
{#if confirmed}
<div in:fly={{y: 20}}>Clearing your local database...</div>
{: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>
<Anchor theme="button" on:click={confirm}>Log out</Anchor>
</div>

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

@ -2,6 +2,7 @@
import {onMount} from "svelte"
import {defer} from "hurdak"
import {isMobile} from "src/util/html"
import {fly} from "src/util/transition"
import Content from "src/partials/Content.svelte"
import Spinner from "src/partials/Spinner.svelte"
import Note from "src/app/shared/Note.svelte"
@ -23,6 +24,8 @@
{#await promise}
<Spinner />
{: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}
</Content>

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

@ -1,7 +1,6 @@
<script lang="ts">
import {find, assocPath} from "ramda"
import {onMount} from "svelte"
import {fly} from "src/util/transition"
import {now, createScroller, formatTimestampAsDate} from "src/util/misc"
import {noteKinds, reactionKinds} from "src/util/nostr"
import Tabs from "src/partials/Tabs.svelte"
@ -30,7 +29,7 @@
export let activeTab = tabs[0]
let limit = 5
let limit = 4
$: tabKinds = activeTab === tabs[0] ? noteKinds : reactionKinds.concat(9734)
@ -55,7 +54,7 @@
})
const scroller = createScroller(async () => {
limit += 5
limit += 4
})
return () => {
@ -65,26 +64,24 @@
})
</script>
<div in:fly={{y: 20, delay: 500}}>
<Content>
<Tabs {tabs} {activeTab} {setActiveTab} />
{#each tabNotifications as notification, i (notification.key)}
{@const lineText = getLineText(i)}
{#if lineText}
<div class="flex items-center gap-4">
<small class="whitespace-nowrap text-gray-1">{lineText}</small>
<div class="h-px w-full bg-gray-6" />
</div>
{/if}
{#if !notification.event}
<NotificationMention {notification} />
{:else if activeTab === tabs[0]}
<NotificationReplies {notification} />
{:else}
<NotificationReactions {notification} />
{/if}
<Content>
<Tabs {tabs} {activeTab} {setActiveTab} />
{#each tabNotifications as notification, i (notification.key)}
{@const lineText = getLineText(i)}
{#if lineText}
<div class="flex items-center gap-4">
<small class="whitespace-nowrap text-gray-1">{lineText}</small>
<div class="h-px w-full bg-gray-6" />
</div>
{/if}
{#if !notification.event}
<NotificationMention {notification} />
{:else if activeTab === tabs[0]}
<NotificationReplies {notification} />
{:else}
<Content size="lg" class="text-center">No notifications found - check back later!</Content>
{/each}
</Content>
</div>
<NotificationReactions {notification} />
{/if}
{:else}
<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 {generatePrivateKey} from "nostr-tools"
import {closure, sleep} from "hurdak"
import {fly} from "src/util/transition"
import Content from "src/partials/Content.svelte"
import OnboardingIntro from "src/app/views/OnboardingIntro.svelte"
import OnboardingProfile from "src/app/views/OnboardingProfile.svelte"
@ -95,21 +94,19 @@
</script>
{#key stage}
<div in:fly={{y: 20}}>
<Content size="lg">
{#if stage === "intro"}
<OnboardingIntro {setStage} />
{:else if stage === "profile"}
<OnboardingProfile {setStage} {profile} />
{:else if stage === "key"}
<OnboardingKey {setStage} {privkey} />
{:else if stage === "relays"}
<OnboardingRelays {setStage} bind:relays />
{:else if stage === "follows"}
<OnboardingFollows {setStage} bind:petnames />
{:else if stage === "note"}
<OnboardingNote {setStage} {signup} />
{/if}
</Content>
</div>
<Content size="lg">
{#if stage === "intro"}
<OnboardingIntro {setStage} />
{:else if stage === "profile"}
<OnboardingProfile {setStage} {profile} />
{:else if stage === "key"}
<OnboardingKey {setStage} {privkey} />
{:else if stage === "relays"}
<OnboardingRelays {setStage} bind:relays />
{:else if stage === "follows"}
<OnboardingFollows {setStage} bind:petnames />
{:else if stage === "note"}
<OnboardingNote {setStage} {signup} />
{/if}
</Content>
{/key}

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

@ -1,5 +1,4 @@
<script lang="ts">
import {fly} from "src/util/transition"
import Anchor from "src/partials/Anchor.svelte"
import Content from "src/partials/Content.svelte"
import RelayCard from "src/app/shared/RelayCard.svelte"
@ -11,31 +10,29 @@
document.title = "Relays"
</script>
<div in:fly={{y: 20}}>
<Content>
<div class="flex justify-between">
<div class="flex items-center gap-2">
<i class="fa fa-server fa-lg" />
<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>
<Content>
<div class="flex justify-between">
<div class="flex items-center gap-2">
<i class="fa fa-server fa-lg" />
<h2 class="staatliches text-2xl">Your relays</h2>
</div>
<p>
Relays are hubs for your content and connections. At least one is required to interact with
the network, but you can join as many as you like.
</p>
{#if $relayPolicies.length === 0}
<div class="mt-8 flex items-center justify-center gap-2 text-center">
<i class="fa fa-triangle-exclamation" />
No relays connected
</div>
{/if}
<div class="grid grid-cols-1 gap-4">
{#each $relayPolicies as policy (policy.url)}
<RelayCard showStatus showControls relay={policy} />
{/each}
<Anchor theme="button-accent" class="flex items-center gap-2" on:click={browse}>
<i class="fa-solid fa-compass" /> Browse Relays
</Anchor>
</div>
<p>
Relays are hubs for your content and connections. At least one is required to interact with the
network, but you can join as many as you like.
</p>
{#if $relayPolicies.length === 0}
<div class="mt-8 flex items-center justify-center gap-2 text-center">
<i class="fa fa-triangle-exclamation" />
No relays connected
</div>
</Content>
</div>
{/if}
<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">
import {onMount} from "svelte"
import {pluck, identity} from "ramda"
import {fly} from "src/util/transition"
import {Tags} from "src/util/nostr"
import {toast, appName} from "src/partials/state"
import Input from "src/partials/Input.svelte"
@ -49,7 +48,7 @@
document.title = "Content Preferences"
</script>
<form on:submit|preventDefault={submit} in:fly={{y: 20}}>
<form on:submit|preventDefault={submit}>
<Content>
<div class="mb-4 flex flex-col items-center justify-center">
<Heading>Content Settings</Heading>
@ -75,7 +74,8 @@
</div>
<Input type="range" bind:value={settings.min_wot_score} min={0} max={100} />
<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.
</p>
</Field>

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

@ -1,5 +1,4 @@
<script lang="ts">
import {fly} from "src/util/transition"
import {nip19} from "nostr-tools"
import {copyToClipboard} from "src/util/html"
import Input from "src/partials/Input.svelte"
@ -27,73 +26,71 @@
document.title = "Keys"
</script>
<div in:fly={{y: 20}}>
<Content>
<div class="flex flex-col items-center justify-center">
<Heading>Your Keys</Heading>
<p>
Your account is identified across the network using a public/private <Anchor
href={keypairUrl}
external>keypair</Anchor
>. This allows you to fully own your account, and move to another app if needed.
<Content>
<div class="flex flex-col items-center justify-center">
<Heading>Your Keys</Heading>
<p>
Your account is identified across the network using a public/private <Anchor
href={keypairUrl}
external>keypair</Anchor
>. 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>
</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 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>
</div>
<div class="flex flex-col gap-1">
<strong>Public Key</strong>
<Input disabled value={pubkeyDisplay}>
<strong>Private Key</strong>
<Input disabled type="password" value={privkeyDisplay}>
<button
slot="after"
class="fa-solid fa-copy cursor-pointer"
on:click={() => copyKey("public", pubkeyDisplay)} />
on:click={() => copyKey("private", privkeyDisplay)} />
</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.
Your private key is used to prove your identity by cryptographically signing messages. <strong
>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>
</div>
{#if $session?.privkey}
<div class="flex flex-col gap-1">
<strong>Private Key</strong>
<Input disabled type="password" value={privkeyDisplay}>
<button
slot="after"
class="fa-solid fa-copy cursor-pointer"
on:click={() => copyKey("private", privkeyDisplay)} />
</Input>
<p class="text-sm text-gray-1">
Your private key is used to prove your identity by cryptographically signing messages. <strong
>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>
</div>
{/if}
{#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>
{/if}
{#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>

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

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

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

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

2
src/partials/Card.svelte
View File

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