mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-19 11:43:35 +00:00
Clean up relays page
This commit is contained in:
parent
a3ae2e9940
commit
75ccc747ec
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
export let external = false
|
export let external = false
|
||||||
export let type = "anchor"
|
export let type = "anchor"
|
||||||
export let href
|
export let href = null
|
||||||
|
|
||||||
const className = cx(
|
const className = cx(
|
||||||
$$props.class,
|
$$props.class,
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
import Button from 'src/partials/Button.svelte'
|
import Button from 'src/partials/Button.svelte'
|
||||||
import relay from 'src/relay'
|
import relay from 'src/relay'
|
||||||
|
|
||||||
let url = ''
|
let url = $modal.url
|
||||||
|
|
||||||
const submit = e => {
|
const submit = e => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
import {fly} from 'svelte/transition'
|
import {fly} from 'svelte/transition'
|
||||||
import {fuzzy} from "src/util/misc"
|
import {fuzzy} from "src/util/misc"
|
||||||
import Input from "src/partials/Input.svelte"
|
import Input from "src/partials/Input.svelte"
|
||||||
|
import Anchor from "src/partials/Anchor.svelte"
|
||||||
import {modal} from "src/state/app"
|
import {modal} from "src/state/app"
|
||||||
import relay, {connections} from 'src/relay'
|
import relay, {connections} from 'src/relay'
|
||||||
|
|
||||||
@ -26,7 +27,12 @@
|
|||||||
|
|
||||||
$: search = fuzzy($knownRelays, {keys: ["name", "description", "url"]})
|
$: search = fuzzy($knownRelays, {keys: ["name", "description", "url"]})
|
||||||
|
|
||||||
const join = url => relay.addRelay(url)
|
const join = url => {
|
||||||
|
relay.addRelay(url)
|
||||||
|
|
||||||
|
document.querySelector('input').select()
|
||||||
|
}
|
||||||
|
|
||||||
const leave = url => relay.removeRelay(url)
|
const leave = url => relay.removeRelay(url)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -39,10 +45,8 @@
|
|||||||
interact with the network, but you can join as many as you like.
|
interact with the network, but you can join as many as you like.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Input bind:value={q} type="text" wrapperClass="flex-grow" placeholder="Type to search">
|
|
||||||
<i slot="before" class="fa-solid fa-search" />
|
|
||||||
</Input>
|
|
||||||
<div class="flex flex-col gap-6 overflow-auto flex-grow -mx-6 px-6">
|
<div class="flex flex-col gap-6 overflow-auto flex-grow -mx-6 px-6">
|
||||||
|
<h2 class="staatliches text-2xl">Your relays</h2>
|
||||||
{#each ($knownRelays || []) as r}
|
{#each ($knownRelays || []) as r}
|
||||||
{#if $connections.includes(r.url)}
|
{#if $connections.includes(r.url)}
|
||||||
<div class="flex gap-2 justify-between">
|
<div class="flex gap-2 justify-between">
|
||||||
@ -58,8 +62,18 @@
|
|||||||
{/each}
|
{/each}
|
||||||
{#if ($knownRelays || []).length > 0}
|
{#if ($knownRelays || []).length > 0}
|
||||||
<div class="pt-2 mb-2 border-b border-solid border-medium" />
|
<div class="pt-2 mb-2 border-b border-solid border-medium" />
|
||||||
|
<h2 class="staatliches text-2xl">Other relays</h2>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<Input bind:value={q} type="text" wrapperClass="flex-grow" placeholder="Type to search">
|
||||||
|
<i slot="before" class="fa-solid fa-search" />
|
||||||
|
</Input>
|
||||||
|
<Anchor type="button" on:click={() => modal.set({form: 'relay', url: q})}>
|
||||||
|
<i class="fa-solid fa-plus" /> Add Relay
|
||||||
|
</Anchor>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#each (search(q) || []).slice(0, 10) as r}
|
{#each (search(q) || []).slice(0, 10) as r}
|
||||||
|
{#if !$connections.includes(r.url)}
|
||||||
<div class="flex gap-2 justify-between">
|
<div class="flex gap-2 justify-between">
|
||||||
<div>
|
<div>
|
||||||
<strong>{r.name || r.url}</strong>
|
<strong>{r.name || r.url}</strong>
|
||||||
@ -69,12 +83,8 @@
|
|||||||
Join
|
Join
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
<a
|
|
||||||
class="underline cursor-pointer"
|
|
||||||
on:click={() => modal.set({form: 'relay'})}>
|
|
||||||
<i class="fa-solid fa-plus" /> Add Relay
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user