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

Work on login screen

Browse Source
This commit is contained in:
Jon Staab
2024-08-09 16:22:09 -07:00
parent 51cfa5f0e8
commit 71d819edc7
32 changed files with 698 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+8
View File
@@ -89,3 +89,11 @@
.subheading {
@apply text-xl text-stark-content text-center;
}
.link {
@apply text-primary underline cursor-pointer;
}
.input input::placeholder {
opacity: 0.5;
}
src/app/base.ts
+52 -17
View File
@@ -1,6 +1,15 @@
import {derived} from "svelte/store"
import {memoize} from '@welshman/lib'
import type {SignedEvent} from "@welshman/util"
import {Repository, Relay} from "@welshman/util"
import {Repository, createEvent, Relay} from "@welshman/util"
import {getter} from "@welshman/store"
import {NetworkContext, Tracker} from "@welshman/net"
import type {ISigner} from "@welshman/signer"
import {Nip46Broker, Nip46Signer, Nip07Signer, Nip01Signer} from '@welshman/signer'
import {synced} from '@lib/util'
import type {Session} from "@app/types"
export const INDEXER_RELAYS = ["wss://purplepag.es", "wss://relay.damus.io"]
export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
@@ -10,29 +19,55 @@ export const relay = new Relay(repository)
export const tracker = new Tracker()
export const pk = synced<string | null>('pk', null)
export const sessions = synced<Record<string, Session>>('sessions', {})
export const session = derived([pk, sessions], ([$pk, $sessions]) => $pk ? $sessions[$pk] : null)
export const getSession = getter(session)
export const makeSigner = memoize((session: Session) => {
switch (session?.method) {
case "extension":
return new Nip07Signer()
case "privkey":
return new Nip01Signer(session.secret!)
case "connect":
return new Nip46Signer(Nip46Broker.get(session.pubkey, session.secret!, session.handler!))
default:
return null
}
})
export const signer = derived(session, makeSigner)
export const getSigner = getter(signer)
const seenChallenges = new Set()
Object.assign(NetworkContext, {
onEvent: (url: string, event: SignedEvent) => tracker.track(event.id, url),
isDeleted: (url: string, event: SignedEvent) => repository.isDeleted(event),
// onAuth: async (url, challenge) => {
// if (seenChallenges.has(challenge)) {
// return
// }
onAuth: async (url: string, challenge: string) => {
if (seenChallenges.has(challenge)) {
return
}
// seenChallenges.add(challenge)
seenChallenges.add(challenge)
// const event = await signer.get().signAsUser(
// createEvent(22242, {
// tags: [
// ["relay", url],
// ["challenge", challenge],
// ],
// }),
// )
const event = await getSigner()!.sign(
createEvent(22242, {
tags: [
["relay", url],
["challenge", challenge],
],
}),
)
// NetworkContext.pool.get(url).send(["AUTH", event])
NetworkContext.pool.get(url).send(["AUTH", event])
// return event
// },
return event
},
})
src/app/commands.ts
+166 -7
View File
@@ -1,16 +1,175 @@
import {batch, postJson} from "@welshman/lib"
import {normalizeRelayUrl} from "@welshman/util"
import {DUFFLEPUD_URL} from "@app/base"
import {relayInfo} from "@app/state"
import {get} from 'svelte/store'
import type {SignedEvent} from '@welshman/util'
import {batcher, uniq, now, postJson, assoc} from "@welshman/lib"
import {normalizeRelayUrl, PROFILE, FOLLOWS, MUTES, GROUP_META} from "@welshman/util"
import {subscribe} from "@welshman/net"
import type {RelayInfo, HandleInfo, Session} from "@app/types"
import {splitGroupId} from "@app/domain"
import {DUFFLEPUD_URL, INDEXER_RELAYS, repository, pk, sessions} from "@app/base"
import {relayInfo, handleInfo, groupsById, profilesByPubkey, mutesByPubkey} from "@app/state"
export const loadRelay = batch(1000, async (urls: string[]) => {
const data = await postJson(`${DUFFLEPUD_URL}/relay/info`, {urls})
// Session
export const addSession = (session: Session) => {
sessions.update(assoc(session.pubkey, session))
pk.set(session.pubkey)
}
// Handle info
export const loadHandleInfo = batcher(800, async (handles: string[]) => {
const res = await postJson(`${DUFFLEPUD_URL}/handle/info`, {handles: uniq(handles)})
const data: {handle: string, info: HandleInfo}[] = res?.data || []
handleInfo.update($handleInfo => {
for (const {handle, info} of data) {
$handleInfo.set(handle, {...info, fetched_at: now()})
}
return $handleInfo
})
return data.map(item => item.info)
})
export const getHandleInfo = (handle: string) => {
const info = get(handleInfo).get(handle)
if (info?.fetched_at > now() - 3600) {
return info
}
return loadHandleInfo(handle)
}
// Relay info
export const loadRelayInfo = batcher(800, async (urls: string[]) => {
const res = await postJson(`${DUFFLEPUD_URL}/relay/info`, {urls: uniq(urls)})
const data: {url: string, info: RelayInfo}[] = res?.data || []
relayInfo.update($relayInfo => {
for (const {url, info} of data) {
$relayInfo.set(normalizeRelayUrl(url), info)
$relayInfo.set(normalizeRelayUrl(url), {...info, fetched_at: now()})
}
return $relayInfo
})
return data.map(item => item.info)
})
export const getRelayInfo = (url: string) => {
const info = get(relayInfo).get(url)
if (info?.fetched_at > now() - 3600) {
return info
}
return loadRelayInfo(url)
}
// Group meta
export const getGroup = (groupId: string) => {
const group = get(groupsById).get(groupId)
if (group?.event.fetched_at > now() - 3600) {
return group
}
const [url, nom] = splitGroupId(groupId)
const sub = subscribe({
relays: [url],
filters: [{kinds: [GROUP_META], '#d': [groupId]}],
closeOnEose: true,
})
sub.emitter.on('event', (url: string, e: SignedEvent) => {
e.fetched_at = now()
repository.publish(e)
console.log(e)
})
}
// Profile
export const getProfile = (pubkey: string, relays = []) => {
const profile = get(profilesByPubkey).get(pubkey)
if (profile?.event.fetched_at > now() - 3600) {
return profile
}
return new Promise(resolve => {
const sub = subscribe({
relays: [...relays, ...INDEXER_RELAYS],
filters: [{kinds: [PROFILE], authors: [pubkey]}],
closeOnEose: true,
})
sub.emitter.on('event', (url: string, e: SignedEvent) => {
e.fetched_at = now()
repository.publish(e)
console.log(e)
resolve(e)
})
sub.emitter.on('close', () => resolve(null))
})
}
// Follows
export const getFollows = (pubkey: string, relays = []) => {
const follows = get(followsByPubkey).get(pubkey)
if (follows?.event.fetched_at > now() - 3600) {
return follows
}
return new Promise(resolve => {
const sub = subscribe({
relays: [...relays, ...INDEXER_RELAYS],
filters: [{kinds: [FOLLOWS], authors: [pubkey]}],
closeOnEose: true,
})
sub.emitter.on('event', (url: string, e: SignedEvent) => {
e.fetched_at = now()
repository.publish(e)
console.log(e)
resolve(e)
})
sub.emitter.on('close', () => resolve(null))
})
}
// Mutes
export const getMutes = (pubkey: string, relays = []) => {
const mutes = get(mutesByPubkey).get(pubkey)
if (mutes?.event.fetched_at > now() - 3600) {
return mutes
}
return new Promise(resolve => {
const sub = subscribe({
relays: [...relays, ...INDEXER_RELAYS],
filters: [{kinds: [MUTES], authors: [pubkey]}],
closeOnEose: true,
})
sub.emitter.on('event', (url: string, e: SignedEvent) => {
e.fetched_at = now()
repository.publish(e)
console.log(e)
resolve(e)
})
sub.emitter.on('close', () => resolve(null))
})
}
src/app/components/InfoNip29.svelte
+8 -5
View File
@@ -1,11 +1,14 @@
<script lang="ts">
import Button from "@lib/components/Button.svelte"
import Link from '@lib/components/Link.svelte'
import Icon from '@lib/components/Icon.svelte'
import {clip} from '@app/toast'
</script>
<div class="column gap-4">
<h1 class="heading">What is a relay?</h1>
<div class="py-2">
<h1 class="heading">What is a relay?</h1>
</div>
<p>
Flotilla hosts spaces on the <Link external href="https://nostr.com/">Nostr protocol</Link>.
Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's language.
@@ -19,11 +22,11 @@
</p>
<div class="card flex-row justify-between">
devrelay.highlighter.com
<button on:click={() => clip('devrelay.highlighter.com')}>
<Button on:click={() => clip('devrelay.highlighter.com')}>
<Icon icon="copy" />
</button>
</Button>
</div>
<button class="btn btn-primary" on:click={() => history.back()}>
<Button class="btn btn-primary" on:click={() => history.back()}>
Got it
</button>
</Button>
</div>
src/app/components/InfoNostr.svelte
+25
View File
@@ -0,0 +1,25 @@
<script lang="ts">
import Link from '@lib/components/Link.svelte'
import Icon from '@lib/components/Icon.svelte'
import Button from "@lib/components/Button.svelte"
import {clip} from '@app/toast'
</script>
<div class="column gap-4">
<div class="py-2">
<h1 class="heading">What is Nostr?</h1>
</div>
<p>
<Link external href="https://nostr.com/">Nostr</Link> is way to build social apps that talk to eachother.
Users own their social identity instead of renting it from a tech company, and can bring it with them from
app to app.
</p>
<p>
This can be a little confusing when you're just getting started, but as long as you're using Flotilla, it
will work just like a normal app. When you're ready to start exploring nostr, visit your settings page to
learn more.
</p>
<Button class="btn btn-primary" on:click={() => history.back()}>
Got it
</Button>
</div>
src/app/components/Landing.svelte
+23
View File
@@ -0,0 +1,23 @@
<script lang="ts">
import CardButton from '@lib/components/CardButton.svelte'
import LogIn from '@app/components/LogIn.svelte'
import SignUp from '@app/components/SignUp.svelte'
import {pushModal} from '@app/modal'
const logIn = () => pushModal(LogIn)
const signUp = () => pushModal(SignUp)
</script>
<div class="column gap-4">
<div class="py-2">
<h1 class="heading">Welcome to Flotilla!</h1>
<p class="text-center">The chat app built for sovereign communities.</p>
</div>
<CardButton icon="login-2" title="Log in" on:click={logIn}>
If you've been here before, you know the drill.
</CardButton>
<CardButton icon="add-circle" title="Create an account" on:click={signUp}>
Just a few questions and you'll be on your way.
</CardButton>
</div>
src/app/components/LogIn.svelte
+99
View File
@@ -0,0 +1,99 @@
<script lang="ts">
import {nip19} from 'nostr-tools'
import {makeSecret, Nip46Broker} from '@welshman/signer'
import Icon from '@lib/components/Icon.svelte'
import Field from '@lib/components/Field.svelte'
import Button from '@lib/components/Button.svelte'
import CardButton from '@lib/components/CardButton.svelte'
import InfoNostr from '@app/components/LogIn.svelte'
import {pushModal, clearModal} from '@app/modal'
import {pushToast} from '@app/toast'
import {getProfile, getFollows, getMutes, getHandleInfo, addSession} from '@app/commands'
const back = () => history.back()
const tryLogin = async () => {
const secret = makeSecret()
const handle = await getHandleInfo(`${username}@${handler.domain}`)
if (!handle?.pubkey) {
return pushToast({
theme: "error",
message: "Sorry, it looks like you don't have an account yet. Try signing up instead."
})
}
const {pubkey, relays = []} = handle
const broker = Nip46Broker.get(pubkey, secret, handler)
const [profile, success] = await Promise.all([
getProfile(pubkey, relays),
getFollows(pubkey, relays),
getMutes(pubkey, relays),
broker.connect(),
])
if (success) {
addSession({method: "nip46", pubkey, secret, handler})
pushToast({message: "Successfully logged in!"})
clearModal()
} else {
pushToast({
theme: "error",
message: "Something went wrong! Please try again."
})
}
}
const login = async () => {
loading = true
try {
await tryLogin()
} finally {
loading = false
}
}
const handler = {
domain: "nsec.app",
relays: ["wss://relay.nsec.app"],
pubkey: "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb",
}
let username = ""
let loading = false
</script>
<form class="column gap-4" on:submit|preventDefault={login}>
<div class="py-2">
<h1 class="heading">Log in with Nostr</h1>
<p class="text-center">
Flotilla is built using the
<Button class="link" on:click={() => pushModal(InfoNostr)}>
nostr protocol
</Button>, which allows you to own your social identity.
</p>
</div>
<Field>
<div class="flex gap-2 items-center" slot="input">
<label class="input input-bordered w-full flex items-center gap-2">
<Icon icon="user-rounded" />
<input bind:value={username} class="grow" type="text" placeholder="username" />
</label>
@{handler.domain}
</div>
</Field>
<div class="flex flex-col gap-2">
<Button type="submit" class="btn btn-primary" disabled={loading}>
<span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
Log In
<Icon icon="alt-arrow-right" />
</Button>
<div class="text-sm">
Need an account?
<Button class="link" on:click={back}>
Register
</Button>
</div>
</div>
</form>
src/app/components/PrimaryNav.svelte
+10 -10
View File
@@ -10,32 +10,32 @@
import Icon from "@lib/components/Icon.svelte"
import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
import SpaceAdd from '@app/components/SpaceAdd.svelte'
import {getGroupName, getGroupPicture, makeGroupId} from "@app/domain"
import {userGroupRelaysByNom, groupsById} from "@app/state"
import {makeGroupId} from "@app/domain"
import {session} from "@app/base"
import {userGroupRelaysByNom, groupsById, deriveProfile} from "@app/state"
import {pushModal} from "@app/modal"
export const addSpace = () => pushModal(SpaceAdd)
export const browseSpaces = () => goto("/browse")
const profile = deriveProfile($session?.pubkey)
</script>
<div class="relative w-14 bg-base-100">
<div class="absolute -top-[44px] z-nav-active ml-2 h-[144px] w-12 bg-base-300" />
<div class="flex h-full flex-col justify-between">
<div>
<PrimaryNavItem title="Hodlbod">
<PrimaryNavItem title={$profile?.name}>
<div class="w-10 rounded-full border border-solid border-base-300">
<img
alt=""
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
<img alt="" src={$profile?.picture} />
</div>
</PrimaryNavItem>
{#each $userGroupRelaysByNom.entries() as [nom, relays] (nom)}
{@const event = $groupsById.get(makeGroupId(relays[0], nom))}
{@const name = getGroupName(event)}
<PrimaryNavItem title={name}>
{@const group = $groupsById.get(makeGroupId(relays[0], nom))}
<PrimaryNavItem title={group.name}>
<div class="w-10 rounded-full border border-solid border-base-300">
<img alt={name} src={getGroupPicture(event)} />
<img alt={group.name} src={group.picture} />
</div>
</PrimaryNavItem>
{/each}
src/app/components/SignUp.svelte
+1
View File
@@ -0,0 +1 @@
src/app/components/SpaceAdd.svelte
+7 -4
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import Button from "@lib/components/Button.svelte"
import CardButton from '@lib/components/CardButton.svelte'
import SpaceCreate from '@app/components/SpaceCreate.svelte'
import SpaceJoin from '@app/components/SpaceJoin.svelte'
@@ -10,15 +11,17 @@
</script>
<div class="column gap-4">
<h1 class="heading">Add a Space</h1>
<p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
<div class="py-2">
<h1 class="heading">Add a Space</h1>
<p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
</div>
<CardButton icon="add-circle" title="Get started" on:click={startCreate}>
Just a few questions and you'll be on your way.
</CardButton>
<div class="card column gap-4">
<h2 class="subheading">Have an invite?</h2>
<button class="btn btn-primary" on:click={startJoin}>
<Button class="btn btn-primary" on:click={startJoin}>
Join a Space
</button>
</Button>
</div>
</div>
src/app/components/SpaceCreate.svelte
+15 -14
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import InputProfilePicture from '@lib/components/InputProfilePicture.svelte'
import Button from "@lib/components/Button.svelte"
import Field from '@lib/components/Field.svelte'
import Icon from '@lib/components/Icon.svelte'
import InfoNip29 from '@app/components/InfoNip29.svelte'
@@ -10,18 +11,18 @@
const next = () => pushModal(SpaceCreateFinish)
const showNip29Info = () => pushModal(InfoNip29)
let file: File
let name = ""
let relay = ""
</script>
<div class="column gap-4">
<h1 class="heading">Customize your Space</h1>
<p class="text-center">
Give people a few details to go on. You can always change this later.
</p>
<form class="column gap-4" on:submit|preventDefault={next}>
<div class="py-2">
<h1 class="heading">Customize your Space</h1>
<p class="text-center">
Give people a few details to go on. You can always change this later.
</p>
</div>
<div class="flex justify-center py-2">
<InputProfilePicture bind:file />
</div>
@@ -40,19 +41,19 @@
</label>
<p slot="info">
This should be a NIP-29 compatible nostr relay where you'd like to host your space.
<button class="text-primary underline cursor-pointer" on:click={showNip29Info}>
<Button class="link" on:click={() => pushModal(InfoNip29)}>
More information
</button>
</Button>
</p>
</Field>
<div class="flex flex-row justify-between items-center gap-4">
<button class="btn btn-link" on:click={back}>
<Button class="btn btn-link" on:click={back}>
<Icon icon="alt-arrow-left" />
Go back
</button>
<button class="btn btn-primary" on:click={next}>
</Button>
<Button type="submit" class="btn btn-primary">
Next
<Icon icon="alt-arrow-right" class="!bg-base-300" />
</button>
</Button>
</div>
</div>
</form>
src/app/components/SpaceJoin.svelte
+55 -15
View File
@@ -1,45 +1,85 @@
<script lang="ts">
import {goto} from '$app/navigation'
import CardButton from '@lib/components/CardButton.svelte'
import Button from "@lib/components/Button.svelte"
import Field from '@lib/components/Field.svelte'
import Icon from '@lib/components/Icon.svelte'
import SpaceCreateFinish from '@app/components/SpaceCreateFinish.svelte'
import {splitGroupId, GROUP_DELIMITER} from '@app/domain'
import {getRelayInfo, getGroup} from '@app/commands'
import {pushModal} from '@app/modal'
import {pushToast} from '@app/toast'
import {relayInfo} from '@app/state'
const back = () => history.back()
const browse = () => goto("/browse", {state: {}})
const join = () => {}
const tryJoin = async () => {
const [url, nom] = splitGroupId(id)
let link = ""
const info = await getRelayInfo(url)
$: linkIsValid = Boolean(link.match(/.+\..+'.+/))
if (!info) {
return pushToast({
theme: "error",
message: "Sorry, we weren't able to find that relay."
})
}
if (!info.supported_nips?.includes(29)) {
return pushToast({
theme: "error",
message: "Sorry, it looks like that relay doesn't support nostr groups."
})
}
const group = await getGroup(id)
console.log(info, group)
}
const join = async () => {
loading = true
try {
await tryJoin()
} finally {
loading = false
}
}
let id = "wss://devrelay.highlighter.com'group628195"
let loading = false
$: linkIsValid = Boolean(id.match(/.+\..+'.+/))
</script>
<div class="column gap-4">
<h1 class="heading">Join a Space</h1>
<p class="text-center">
Enter an invite link below to join an existing space.
</p>
<form class="column gap-4" on:submit|preventDefault={join}>
<div class="py-2">
<h1 class="heading">Join a Space</h1>
<p class="text-center">
Enter an invite link below to join an existing space.
</p>
</div>
<Field>
<p slot="label">Invite Link*</p>
<label class="input input-bordered w-full flex items-center gap-2" slot="input">
<Icon icon="link-round" />
<input bind:value={link} class="grow" type="text" />
<input bind:value={id} class="grow" type="text" />
</label>
</Field>
<CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
Browse other spaces on the discover page.
</CardButton>
<div class="flex flex-row justify-between items-center gap-4">
<button class="btn btn-link" on:click={back}>
<Button class="btn btn-link" on:click={back}>
<Icon icon="alt-arrow-left" />
Go back
</button>
<button class="btn btn-primary" on:click={join} disabled={!linkIsValid}>
</Button>
<Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
<span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
Join Space
<Icon icon="alt-arrow-right" class="!bg-base-300" />
</button>
<Icon icon="alt-arrow-right" />
</Button>
</div>
</div>
</form>
src/app/components/Toast.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
{#if $toast}
{#key $toast.id}
<div transition:fly class="toast z-toast">
<div role="alert" class="alert flex justify-center">
<div role="alert" class="alert flex justify-center" class:alert-error={$toast.theme === "error"}>
{$toast.message}
</div>
</div>
src/app/domain.ts
+6
View File
@@ -7,6 +7,12 @@ export const GROUP_DELIMITER = `'`
export const makeGroupId = (url: string, nom: string) =>
[stripProtocol(url), nom].join(GROUP_DELIMITER)
export const splitGroupId = (groupId: string) => {
const [url, nom] = groupId.split(GROUP_DELIMITER)
return [normalizeRelayUrl(url), nom]
}
export const getGroupNom = (e: TrustedEvent) => getIdentifier(e)?.split(GROUP_DELIMITER)[1]
export const getGroupUrl = (e: TrustedEvent) => {
src/app/modal.ts
+7 -2
View File
@@ -1,7 +1,9 @@
import type {ComponentType} from "svelte"
import {randomId} from "@welshman/lib"
import {randomId, Emitter} from "@welshman/lib"
import {goto} from "$app/navigation"
export const emitter = new Emitter()
export const modals = new Map()
export const pushModal = (component: ComponentType, props: Record<string, any> = {}) => {
@@ -14,4 +16,7 @@ export const pushModal = (component: ComponentType, props: Record<string, any> =
return id
}
export const clearModal = () => goto('#')
export const clearModal = () => {
goto('#')
emitter.emit('close')
}
src/app/state.ts
+50 -11
View File
@@ -1,27 +1,66 @@
import {writable, derived} from "svelte/store"
import {pushToMapKey, indexBy} from "@welshman/lib"
import {getIdentifier, GROUP_META, GROUPS, getGroupTagValues} from "@welshman/util"
import {getIdentifier, getPubkeyTagValues, GROUP_META, PROFILE, FOLLOWS, MUTES, GROUPS, getGroupTagValues} from "@welshman/util"
import {deriveEvents} from "@welshman/store"
import {repository} from "@app/base"
import {getGroupUrl, GROUP_DELIMITER} from "@app/domain"
export const pk = writable<string | null>(null)
export const sessions = writable(new Map())
export const session = derived([pk, sessions], ([$pk, $sessions]) => $sessions.get($pk))
import {synced, parseJson} from '@lib/util'
import type {Session} from '@app/types'
import {repository, pk} from "@app/base"
import {getGroupNom, getGroupUrl, getGroupName, getGroupPicture, GROUP_DELIMITER} from "@app/domain"
export const relayInfo = writable(new Map())
export const handleInfo = writable(new Map())
export const profileEvents = deriveEvents(repository, {
filters: [{kinds: [PROFILE]}],
})
export const profiles = derived(profileEvents, $profileEvents =>
$profileEvents.map(event => ({...parseJson(event.content), event}))
)
export const profilesByPubkey = derived(profiles, $profiles => indexBy(profile => profile.event.pubkey, $profiles))
export const deriveProfile = (pubkey: string) => derived(profilesByPubkey, $m => $m.get(pubkey))
export const followEvents = deriveEvents(repository, {
filters: [{kinds: [FOLLOWS]}],
})
export const follows = derived(followEvents, $followEvents =>
$followEvents.map(event => ({pubkeys: new Set(getPubkeyTagValues(event.tags)), event}))
)
export const followsByPubkey = derived(follows, $follows => indexBy(follow => follow.event.pubkey, $follows))
export const muteEvents = deriveEvents(repository, {
filters: [{kinds: [MUTES]}],
})
export const mutes = derived(muteEvents, $muteEvents =>
$muteEvents.map(event => ({pubkeys: new Set(getPubkeyTagValues(event.tags)), event}))
)
export const mutesByPubkey = derived(mutes, $mutes => indexBy(mute => mute.event.pubkey, $mutes))
export const groupEvents = deriveEvents(repository, {
filters: [{kinds: [GROUP_META]}],
})
export const groups = derived([relayInfo, groupEvents], ([$relayInfo, $groupEvents]) =>
$groupEvents.filter(e => $relayInfo.get(getGroupUrl(e))?.pubkey === e.pubkey),
$groupEvents
.map(event => ({
event,
id: getIdentifier(event),
nom: getGroupNom(event),
url: getGroupUrl(event),
name: getGroupName(event),
picture: getGroupPicture(event),
}))
.filter(group => $relayInfo.get(group.url)?.pubkey === group.event.pubkey)
)
export const groupsById = derived(groups, $groups => indexBy(getIdentifier, $groups))
export const groupsById = derived(groups, $groups => indexBy(group => group.id, $groups))
export const groupsEvents = deriveEvents(repository, {
filters: [{kinds: [GROUPS]}],
src/app/toast.ts
+10 -11
View File
@@ -2,25 +2,24 @@ import {writable} from "svelte/store"
import {randomId} from "@welshman/lib"
import {copyToClipboard} from '@lib/html'
export type Toast = {
id: string
export type ToastParams = {
message: string
options: ToastOptions
timeout?: number
theme?: "error"
}
export type ToastOptions = {
timeout?: number
export type Toast = ToastParams & {
id: string
}
export const toast = writable<Toast | null>(null)
export const pushToast = (
{message = "", id = randomId()}: Partial<Toast>,
options: ToastOptions = {},
) => {
toast.set({id, message, options})
export const pushToast = (params: ToastParams) => {
const id = randomId()
setTimeout(() => popToast(id), options.timeout || 5000)
toast.set({id, ...params})
setTimeout(() => popToast(id), params.timeout || 5000)
return id
}
src/app/types.ts
+20
View File
@@ -0,0 +1,20 @@
import type {Nip46Handler} from "@welshman/signer"
export type Session = {
method: string
pubkey: string
secret?: string
handler?: Nip46Handler
}
export type RelayInfo = {
fetched_at: number
}
export type HandleInfo = {
pubkey: string
nip05: string
nip46: string[]
relays: string[]
fetched_at: number
}
src/assets/icons/Login 2.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.00098 11.999L16.001 11.999M16.001 11.999L12.501 8.99902M16.001 11.999L12.501 14.999" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.2429 22 18.8286 22 16.0002 22H15.0002C12.1718 22 10.7576 22 9.87889 21.1213C9.11051 20.3529 9.01406 19.175 9.00195 17" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 713 B

src/assets/icons/Login.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4 12H14M14 12L11 9M14 12L11 15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 362 B

src/assets/icons/User Rounded.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="6" r="4" stroke="#1C274C" stroke-width="1.5"/>
<ellipse cx="12" cy="17" rx="7" ry="4" stroke="#1C274C" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 247 B

src/lib/components/Button.svelte
+3
View File
@@ -0,0 +1,3 @@
<button on:click type="button" {...$$props}>
<slot />
</button>
src/lib/components/CardButton.svelte
+3 -2
View File
@@ -1,12 +1,13 @@
<script lang="ts">
import cx from 'classnames'
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
export let icon
export let title
</script>
<button on:click class={cx($$props.class, "btn btn-neutral btn-lg text-left h-24")}>
<Button on:click class={cx($$props.class, "btn btn-neutral btn-lg text-left h-24")}>
<div class="flex gap-6 py-4 flex-grow items-center">
<Icon class="bg-accent" size={7} {icon} />
<div class="flex flex-col gap-1 flex-grow">
@@ -15,4 +16,4 @@
</div>
<Icon size={7} icon="alt-arrow-right" />
</div>
</button>
</Button>
src/lib/components/Icon.svelte
+8 -2
View File
@@ -23,11 +23,14 @@
import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
import LinkRound from "@assets/icons/Link Round.svg?dataurl"
import Login from "@assets/icons/Login.svg?dataurl"
import Login2 from "@assets/icons/Login 2.svg?dataurl"
import Plain from "@assets/icons/Plain.svg?dataurl"
import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
import Settings from "@assets/icons/Settings.svg?dataurl"
import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
import UserHeart from "@assets/icons/User Heart.svg?dataurl"
import UserRounded from "@assets/icons/User Rounded.svg?dataurl"
import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
export let icon
@@ -51,11 +54,14 @@
"home-smile": HomeSmile,
"info-circle": InfoCircle,
"link-round": LinkRound,
"login": Login,
"login-2": Login2,
plain: Plain,
'remote-controller-minimalistic': RemoteControllerMinimalistic,
settings: Settings,
"ufo-3": UFO3,
"user-heart": UserHeart,
"user-rounded": UserRounded,
"wifi-router-round": WiFiRouterRound,
})
@@ -65,5 +71,5 @@
</script>
<div
class={cx($$props.class, "bg-base-content")}
style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px;" />
class={$$props.class}
style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;" />
src/lib/components/ModalBox.svelte
+6 -2
View File
@@ -1,8 +1,12 @@
<script context="module" lang="ts">
import {emitter} from "@app/modal"
const modalHeight = tweened(0, {
duration: 700,
easing: quintOut
})
emitter.on('close', () => modalHeight.set(0))
</script>
<script lang="ts">
@@ -13,7 +17,7 @@
import {last} from '@welshman/lib'
export let component
export let props
export let props = {}
let box: HTMLElement
let content: HTMLElement
@@ -21,7 +25,7 @@
onMount(() => {
naturalHeight = content.clientHeight + 48
$modalHeight = naturalHeight
modalHeight.set(naturalHeight)
})
</script>
src/lib/components/PrimaryNavItem.svelte
+4 -2
View File
@@ -1,11 +1,13 @@
<script lang="ts">
import Button from "@lib/components/Button.svelte"
export let title
</script>
<button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
data-tip={title}>
<slot />
</div>
</button>
</Button>
src/lib/util.ts
+31
View File
@@ -0,0 +1,31 @@
import {throttle} from 'throttle-debounce'
import {browser} from '$app/environment'
import {writable} from 'svelte/store'
export const parseJson = (json: string) => {
if (!json) return null
try {
return JSON.parse(json)
} catch (e) {
return null
}
}
export const getJson = (k: string) =>
browser ? parseJson(localStorage.getItem(k) || "") : null
export const setJson = (k: string, v: any) => {
if (browser) {
localStorage.setItem(k, JSON.stringify(v))
}
}
export const synced = <T>(key: string, defaultValue: T, delay = 300) => {
const init = getJson(key)
const store = writable<T>(init === null ? defaultValue : init)
store.subscribe(throttle(delay, (value: T) => setJson(key, value)))
return store
}
src/routes/+layout.svelte
+14 -21
View File
@@ -5,31 +5,22 @@
import {fly} from "@lib/transition"
import ModalBox from "@lib/components/ModalBox.svelte"
import Toast from "@app/components/Toast.svelte"
import Landing from "@app/components/Landing.svelte"
import PrimaryNav from "@app/components/PrimaryNav.svelte"
import SecondaryNav from "@app/components/SecondaryNav.svelte"
import {modals, clearModal} from "@app/modal"
const login = async () => {
const nl = await import("nostr-login")
nl.init({
noBanner: true,
title: "Welcome to Flotilla!",
description: "Log in with your Nostr account or sign up to join.",
methods: ["connect", "extension", "local"],
onAuth(npub: string) {
console.log(npub)
},
})
nl.launch()
}
import {session} from "@app/base"
let dialog: HTMLDialogElement
$: modal = $page.url.hash.slice(1)
$: modalId = $page.url.hash.slice(1)
$: modal = modals.get(modalId)
$: {
if (!modal && !$session) {
modal = {component: Landing}
}
if (modal) {
dialog?.showModal()
} else {
@@ -57,13 +48,15 @@
<dialog bind:this={dialog} class="modal modal-bottom sm:modal-middle !z-modal">
{#if modal}
{#key modal}
<ModalBox {...modals.get(modal)} />
<ModalBox {...modal} />
{/key}
<Toast />
{/if}
<form method="dialog" class="modal-backdrop">
<button />
</form>
{#if $session}
<form method="dialog" class="modal-backdrop">
<button />
</form>
{/if}
</dialog>
<Toast />
</div>