mleku/flotilla
1
1
Fork 0
mirror of https://github.com/coracle-social/flotilla.git synced 2025-12-10 19:07:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update space create dialog

Browse Source
This commit is contained in:
Jon Staab
2025-10-29 11:18:27 -07:00
parent 62013a2ea2
commit 173a411a36
5 changed files with 71 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/SpaceAdd.svelte
View File

@@ -7,7 +7,7 @@
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import CardButton from "@lib/components/CardButton.svelte" import CardButton from "@lib/components/CardButton.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte" import ModalHeader from "@lib/components/ModalHeader.svelte"
import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte" import SpaceCreate from "@app/components/SpaceCreate.svelte"
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte" import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
import {pushModal} from "@app/util/modal" import {pushModal} from "@app/util/modal"
@@ -17,7 +17,7 @@
const {hideDiscover}: Props = $props() const {hideDiscover}: Props = $props()
const startCreate = () => pushModal(SpaceCreateExternal) const startCreate = () => pushModal(SpaceCreate)
const startJoin = () => pushModal(SpaceInviteAccept) const startJoin = () => pushModal(SpaceInviteAccept)
</script> </script>

120
src/app/components/SpaceCreate.svelte
View File

@@ -1,76 +1,92 @@
<script lang="ts"> <script lang="ts">
import {preventDefault} from "@lib/html"
import Button from "@lib/components/Button.svelte"
import Field from "@lib/components/Field.svelte"
import FireMinimalistic from "@assets/icons/fire-minimalistic.svg?dataurl"
import Server from "@assets/icons/server.svg?dataurl" import Server from "@assets/icons/server.svg?dataurl"
import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl" import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl" import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import Icon from "@lib/components/Icon.svelte" import Icon from "@lib/components/Icon.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte" import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte" import ModalFooter from "@lib/components/ModalFooter.svelte"
import InfoRelay from "@app/components/InfoRelay.svelte"
import InputProfilePicture from "@app/components/InputProfilePicture.svelte"
import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
import {pushModal} from "@app/util/modal"
const back = () => history.back() const back = () => history.back()
const next = () => pushModal(SpaceCreateFinish)
let file: File | undefined = $state()
let name = $state("")
let relay = $state("")
</script> </script>
<form class="column gap-4" onsubmit={preventDefault(next)}> <div class="column gap-4">
<ModalHeader> <ModalHeader>
{#snippet title()} {#snippet title()}
<div>Customize your Space</div> <div>Create your own Space</div>
{/snippet} {/snippet}
{#snippet info()} {#snippet info()}
<div>Give people a few details to go on. You can always change this later.</div> <p>Get started with one of our trusted partners, or learn how to host your own space.</p>
{/snippet} {/snippet}
</ModalHeader> </ModalHeader>
<div class="flex justify-center py-2"> <div class="card2 bg-alt flex flex-col gap-4">
<InputProfilePicture bind:file /> <div class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
<h3 class="text-lg font-bold">Coracle Hosting</h3>
</div>
<div class="badge badge-primary self-start">Recommended</div>
</div>
<ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
<li>Simple setup, support included</li>
<li>Free and open source software — no vendor lock-in</li>
<li>Advanced access controls and relay policies</li>
<li>Full-featured admin dashboard</li>
</ul>
</div>
<Link class="btn btn-primary" href="https://info.coracle.social">
Get Started
<Icon icon={ArrowRight} />
</Link>
</div> </div>
<Field> <div class="card2 bg-alt flex flex-col gap-4">
{#snippet label()} <div class="flex flex-col gap-4">
<p>Space Name</p> <div class="self-start">
{/snippet} <img
{#snippet input()} alt="Relay Tools"
<label class="input input-bordered flex w-full items-center gap-2"> src="https://relay.tools/17.svg"
<Icon icon={FireMinimalistic} /> class="-my-20 -ml-2 hidden h-48 dark:block"
<input bind:value={name} class="grow" type="text" /> style="filter: contrast(50%)" />
</label> <img
{/snippet} alt="Relay Tools"
</Field> src="https://relay.tools/19.svg"
<Field> class="-my-20 -ml-2 h-48 dark:hidden"
{#snippet label()} style="filter: contrast(50%)" />
<p>Relay</p> </div>
{/snippet} <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
{#snippet input()} <li>Customizable relay policies</li>
<label class="input input-bordered flex w-full items-center gap-2"> <li>Simple management dashboard</li>
<li>Support available</li>
</ul>
</div>
<Link class="btn btn-neutral" href="https://relay.tools/signup">
Get Started
<Icon icon={ArrowRight} />
</Link>
</div>
<div class="card2 bg-alt flex flex-col gap-4">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3">
<Icon icon={Server} /> <Icon icon={Server} />
<input bind:value={relay} class="grow" type="text" /> <h3 class="text-lg font-bold">Self-Hosted</h3>
</label> </div>
{/snippet} <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
{#snippet info()} <li>Unlimited customization and control</li>
<p> <li>Free and open source software</li>
This can be any nostr relay where you'd like to host your space. <li>Full-featured admin dashboards available</li>
<Button class="link" onclick={() => pushModal(InfoRelay)}>What is a relay?</Button> </ul>
</p> </div>
{/snippet} <Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
</Field> Get Started
<Icon icon={ArrowRight} />
</Link>
</div>
<ModalFooter> <ModalFooter>
<Button class="btn btn-link" onclick={back}> <Button class="btn btn-link" onclick={back}>
<Icon icon={AltArrowLeft} /> <Icon icon={AltArrowLeft} />
Go back Go back
</Button> </Button>
<Button type="submit" class="btn btn-primary">
Next
<Icon icon={AltArrowRight} />
</Button>
</ModalFooter> </ModalFooter>
</form> </div>

56
src/app/components/SpaceCreateExternal.svelte
View File

@@ -1,56 +0,0 @@
<script lang="ts">
import {preventDefault} from "@lib/html"
import Button from "@lib/components/Button.svelte"
import Link from "@lib/components/Link.svelte"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
import {PLATFORM_NAME} from "@app/core/state"
import {pushModal} from "@app/util/modal"
const back = () => history.back()
const next = () => {
window.open("https://relay.tools/signup")
setTimeout(() => pushModal(SpaceInviteAccept), 300)
}
</script>
<form class="column gap-4" onsubmit={preventDefault(next)}>
<ModalHeader>
{#snippet title()}
<div>Create a Space</div>
{/snippet}
{#snippet info()}
<div>Host your own space, for your community.</div>
{/snippet}
</ModalHeader>
<p>
<Link class="link" external href="https://relay.tools">relay.tools</Link> is a third-party service
that allows anyone to run their own relay for use with {PLATFORM_NAME}, or any other
nostr-compatible app.
</p>
<p>
Once you've created a relay of your own, come back here to link {PLATFORM_NAME} with your new relay.
</p>
<p>
Alternatively, you can
<Link external class="link" href="https://github.com/coracle-social/frith"
>run your own community relay</Link
>.
</p>
<ModalFooter>
<Button class="btn btn-link" onclick={back}>
<Icon icon={AltArrowLeft} />
Go back
</Button>
<Button type="submit" class="btn btn-primary">
Let's go
<Icon icon={AltArrowRight} />
</Button>
</ModalFooter>
</form>

1
src/app/components/SpaceCreateFinish.svelte
View File

@@ -1 +0,0 @@
hi

2
src/lib/components/ModalHeader.svelte
View File

@@ -9,5 +9,5 @@
<div class="column m-auto max-w-xs gap-2 py-4"> <div class="column m-auto max-w-xs gap-2 py-4">
<h1 class="heading">{@render title?.()}</h1> <h1 class="heading">{@render title?.()}</h1>
<p class="text-center">{@render info?.()}</p> <p class="text-center text-sm opacity-75">{@render info?.()}</p>
</div> </div>