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

Move space add buttons around

Browse Source
This commit is contained in:
Jon Staab
2024-10-15 12:02:11 -07:00
parent 4e83e59249
commit c9826449f2
27 changed files with 82 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ChatMessage.svelte
+1 -4
View File
@@ -70,10 +70,7 @@
<div class="-mt-1 flex-grow pr-1">
{#if showPubkey}
<div class="flex items-center gap-2">
<Button
class="text-bold text-sm"
style="color: {colorValue}"
on:click={showProfile}>
<Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
{$profileDisplay}
</Button>
<span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
src/app/components/ChatStart.svelte
+1 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import {goto} from "$app/navigation"
import {pubkey} from '@welshman/app'
import {pubkey} from "@welshman/app"
import Field from "@lib/components/Field.svelte"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte"
src/app/components/ContentQuote.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {nip19} from "nostr-tools"
import {Address} from "@welshman/util"
import Link from "@lib/components/Link.svelte"
import Spinner from "@lib/components/Spinner.svelte"
src/app/components/InfoKeys.svelte
+11 -9
View File
@@ -9,19 +9,21 @@
<div slot="title">What is a private key?</div>
</ModalHeader>
<p>
Most software keeps track of users by giving them a username and password. This gives the service
<strong>total control</strong> over their users, allowing them to ban them at any time, or sell their activity.
Most software keeps track of users by giving them a username and password. This gives the
service
<strong>total control</strong> over their users, allowing them to ban them at any time, or sell their
activity.
</p>
<p>
On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your own identity and
social data, through the magic of crytography. The basic idea is that you have a <strong>public key</strong>,
which acts as your user id, and a <strong>private key</strong> which allows you to authenticate any message
you send.
On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your own
identity and social data, through the magic of crytography. The basic idea is that you have a
<strong>public key</strong>, which acts as your user id, and a <strong>private key</strong> which
allows you to authenticate any message you send.
</p>
<p>
It's very important to keep private keys safe, but this can sometimes be confusing for newcomers. This is why
flotilla supports <strong>remote signer</strong> login. These services can store your keys securely for you,
giving you access using a username and password.
It's very important to keep private keys safe, but this can sometimes be confusing for
newcomers. This is why flotilla supports <strong>remote signer</strong> login. These services can
store your keys securely for you, giving you access using a username and password.
</p>
<Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
</div>
src/app/components/LogIn.svelte
+16 -10
View File
@@ -2,12 +2,10 @@
import {makeSecret, getNip07, Nip46Broker} from "@welshman/signer"
import {addSession, loadHandle, nip46Perms, type Session} from "@welshman/app"
import Icon from "@lib/components/Icon.svelte"
import Field from "@lib/components/Field.svelte"
import Tippy from "@lib/components/Tippy.svelte"
import Button from "@lib/components/Button.svelte"
import Divider from "@lib/components/Divider.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import SearchSelect from "@lib/components/SearchSelect.svelte"
import SignUp from "@app/components/SignUp.svelte"
import InfoNostr from "@app/components/InfoNostr.svelte"
import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte"
@@ -47,7 +45,7 @@
}
const secret = makeSecret()
const {pubkey, nip46, relays = []} = await loadHandle(`${username}@${domain}`) || {}
const {pubkey, nip46, relays = []} = (await loadHandle(`${username}@${domain}`)) || {}
if (!pubkey) {
return pushToast({
@@ -88,7 +86,7 @@
})
let username = ""
let domain = 'nsec.app'
let domain = "nsec.app"
let loading = false
</script>
@@ -99,19 +97,24 @@
<Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
you to own your social identity.
</p>
<div class="grid grid-cols-3 gap-3 items-center">
<div class="grid grid-cols-3 items-center gap-3">
<p class="font-bold">Username</p>
<label class="input input-bordered flex w-full items-center gap-2 col-span-2">
<label class="input input-bordered col-span-2 flex w-full items-center gap-2">
<Icon icon="user-circle" />
<input bind:value={username} disabled={loading} class="grow" type="text" placeholder="username" />
<input
bind:value={username}
disabled={loading}
class="grow"
type="text"
placeholder="username" />
</label>
<Tippy component={LogInInfoRemoteSigner} params={{interactive: true}}>
<p class="font-bold cursor-pointer flex gap-2 items-center">
<p class="flex cursor-pointer items-center gap-2 font-bold">
Remote Signer
<Icon icon="info-circle" class="opacity-50" />
</p>
</Tippy>
<label class="input input-bordered flex w-full items-center gap-2 col-span-2">
<label class="input input-bordered col-span-2 flex w-full items-center gap-2">
<Icon icon="key-minimalistic-square-3" />
<input bind:value={domain} disabled={loading} class="grow" type="text" />
</label>
@@ -122,7 +125,10 @@
</Button>
<Divider>Or</Divider>
{#if getNip07()}
<Button disabled={loading} on:click={loginWithNip07} class="btn {username ? 'btn-neutral' : 'btn-primary'}">
<Button
disabled={loading}
on:click={loginWithNip07}
class="btn {username ? 'btn-neutral' : 'btn-primary'}">
<Icon icon="widget" />
Log in with Extension
</Button>
src/app/components/LogInInfoRemoteSigner.svelte
+1 -1
View File
@@ -4,7 +4,7 @@
import {pushModal} from "@app/modal"
</script>
<p class="text-sm card2 bg-alt transition-all">
<p class="card2 bg-alt text-sm transition-all">
A remote signer is a simple way to protect your private key.
<Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
</p>
src/app/components/PeopleItem.svelte
+5 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {nip19} from "nostr-tools"
import {onMount} from "svelte"
import {ago, append, first, sortBy, WEEK, ctx} from "@welshman/lib"
import {NOTE, getAncestorTags, getListTags, getPubkeyTagValues} from "@welshman/util"
@@ -59,10 +59,12 @@
</div>
</Link>
<div class="flex gap-2">
<div class="badge badge-neutral bg-alt border-none">
<div class="bg-alt badge badge-neutral border-none">
{roots.length} recent {roots.length === 1 ? "note" : "notes"}
</div>
<div class="badge badge-neutral bg-alt border-none">Last posted {formatTimestampRelative(event.created_at)}</div>
<div class="bg-alt badge badge-neutral border-none">
Last posted {formatTimestampRelative(event.created_at)}
</div>
</div>
{/if}
</Button>
src/app/components/RelayAdd.svelte
+1 -1
View File
@@ -38,7 +38,7 @@
<input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
</label>
</div>
<div class="overflow-auto column gap-2 h-[50vh] mt-16" bind:this={element}>
<div class="column mt-16 h-[50vh] gap-2 overflow-auto" bind:this={element}>
{#each $relaySearch
.searchValues(term)
.filter(url => !$relays.includes(url))
src/app/components/RelayItem.svelte
+4 -4
View File
@@ -13,8 +13,8 @@
</script>
<div class="card2 card2-sm bg-alt column gap-2">
<div class="flex items-center gap-4 justify-between">
<div class="flex items-center gap-2 ellipsize">
<div class="flex items-center justify-between gap-4">
<div class="ellipsize flex items-center gap-2">
<Icon icon="remote-controller-minimalistic" />
<p class="ellipsize">{displayRelayUrl(url)}</p>
</div>
@@ -23,9 +23,9 @@
{#if $relay?.profile?.description}
<p class="ellipsize">{$relay?.profile.description}</p>
{/if}
<span class="flex items-center gap-1 text-sm whitespace-nowrap">
<span class="flex items-center gap-1 whitespace-nowrap text-sm">
{#if $relay?.profile?.contact}
<Link external class="underline ellipsize" href={$relay.profile.contact}
<Link external class="ellipsize underline" href={$relay.profile.contact}
>{displayUrl($relay.profile.contact)}</Link>
&bull;
{/if}
src/app/components/SpaceAdd.svelte
+8
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import CardButton from "@lib/components/CardButton.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -26,6 +27,13 @@
<div slot="info">Enter an invite code or url to join an existing space.</div>
</CardButton>
</Button>
<Link href="/discover">
<CardButton>
<div slot="icon"><Icon icon="compass" size={7} /></div>
<div slot="title">Find a space</div>
<div slot="info">Browse spaces on the discover page.</div>
</CardButton>
</Link>
<Button on:click={startCreate}>
<CardButton>
<div slot="icon"><Icon icon="add-circle" size={7} /></div>
src/app/components/SpaceInviteAccept.svelte
-10
View File
@@ -2,7 +2,6 @@
import {goto} from "$app/navigation"
import {ctx, tryCatch} from "@welshman/lib"
import {isRelayUrl, normalizeRelayUrl} from "@welshman/util"
import CardButton from "@lib/components/CardButton.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import Button from "@lib/components/Button.svelte"
import Field from "@lib/components/Field.svelte"
@@ -18,8 +17,6 @@
const back = () => history.back()
const browse = () => goto("/discover")
const confirm = async (url: string) => {
await addSpaceMembership(url)
@@ -84,13 +81,6 @@
<Button class="link" on:click={() => pushModal(InfoRelay)}>What is a relay?</Button>
</p>
</Field>
<Button on:click={browse}>
<CardButton>
<div slot="icon"><Icon icon="compass" size={7} /></div>
<div slot="title">Don't have an invite?</div>
<div slot="info">Browse other spaces on the discover page.</div>
</CardButton>
</Button>
<ModalFooter>
<Button class="btn btn-link" on:click={back}>
<Icon icon="alt-arrow-left" />