forked from coracle/caravel
Opus refactor
This commit is contained in:
Jon Staab
@@ -1,157 +1,27 @@
|
||||
import { Show, createSignal } from "solid-js"
|
||||
import { useNavigate } from "@solidjs/router"
|
||||
import { slugify } from "@/lib/slugify"
|
||||
import BackLink from "@/components/BackLink"
|
||||
import PageContainer from "@/components/PageContainer"
|
||||
import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
|
||||
import { createRelayForActiveTenant } from "@/lib/hooks"
|
||||
import { PLANS, type PlanId } from "@/lib/api"
|
||||
|
||||
export default function RelayNew() {
|
||||
const navigate = useNavigate()
|
||||
const [name, setName] = createSignal("")
|
||||
const [subdomain, setSubdomain] = createSignal("")
|
||||
const [icon, setIcon] = createSignal("")
|
||||
const [description, setDescription] = createSignal("")
|
||||
const [plan, setPlan] = createSignal<PlanId>("free")
|
||||
const [submitting, setSubmitting] = createSignal(false)
|
||||
const [subdomainError, setSubdomainError] = createSignal("")
|
||||
|
||||
function handleNameInput(value: string) {
|
||||
setName(value)
|
||||
setSubdomain(slugify(value))
|
||||
setSubdomainError("")
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault()
|
||||
|
||||
setSubdomainError("")
|
||||
setSubmitting(true)
|
||||
|
||||
try {
|
||||
const relay = await createRelayForActiveTenant({
|
||||
subdomain: slugify(subdomain()),
|
||||
plan: plan(),
|
||||
info_name: name().trim(),
|
||||
info_icon: icon().trim(),
|
||||
info_description: description().trim(),
|
||||
policy_public_join: 0,
|
||||
policy_strip_signatures: 0,
|
||||
groups_enabled: 1,
|
||||
management_enabled: 1,
|
||||
blossom_enabled: plan() === "free" ? 0 : 1,
|
||||
livekit_enabled: plan() === "free" ? 0 : 1,
|
||||
push_enabled: 1,
|
||||
})
|
||||
navigate(`/relays/${relay.id}`)
|
||||
} catch (e) {
|
||||
setSubdomainError(e instanceof Error ? e.message : "Failed to create relay")
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
async function handleSubmit(values: RelayFormValues) {
|
||||
const relay = await createRelayForActiveTenant(values)
|
||||
navigate(`/relays/${relay.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="max-w-2xl mx-auto px-4 py-8">
|
||||
<PageContainer size="narrow">
|
||||
<BackLink href="/relays" label="Relays" />
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6 py-2">New Relay</h1>
|
||||
<form onSubmit={handleSubmit} class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={name()}
|
||||
onInput={e => handleNameInput(e.currentTarget.value)}
|
||||
placeholder="My Community"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="flex items-center border rounded-lg overflow-hidden focus-within:ring-2"
|
||||
classList={{
|
||||
"border-gray-300 focus-within:ring-blue-500": !subdomainError(),
|
||||
"border-red-400 focus-within:ring-red-400": !!subdomainError(),
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={subdomain()}
|
||||
onInput={e => {
|
||||
setSubdomain(e.currentTarget.value)
|
||||
setSubdomainError("")
|
||||
}}
|
||||
placeholder="my-community"
|
||||
class="flex-1 px-3 py-2 focus:outline-none"
|
||||
/>
|
||||
<span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">
|
||||
.spaces.coracle.social
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Show when={subdomainError()}>
|
||||
<div class="pointer-events-none absolute right-0 top-full z-10 mt-2 rounded-md bg-red-600 px-3 py-2 text-xs text-white shadow-lg">
|
||||
{subdomainError()}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
|
||||
<input
|
||||
type="url"
|
||||
value={icon()}
|
||||
onInput={e => setIcon(e.currentTarget.value)}
|
||||
placeholder="https://example.com/icon.png"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
||||
<textarea
|
||||
value={description()}
|
||||
onInput={e => setDescription(e.currentTarget.value)}
|
||||
placeholder="A community for..."
|
||||
rows={3}
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-3">Plan</label>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
{PLANS.map(p => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPlan(p.id)}
|
||||
class={`border-2 rounded-xl p-4 text-left transition-colors ${
|
||||
plan() === p.id
|
||||
? "border-blue-600 bg-blue-50"
|
||||
: "border-gray-200 hover:border-gray-300"
|
||||
}`}
|
||||
>
|
||||
<div class="font-bold text-gray-900">{p.label}</div>
|
||||
<div class="text-sm text-gray-500 mt-1">
|
||||
{p.price === 0 ? "Free" : `${p.price.toLocaleString()} sats/mo`}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-2">{p.memberLabel}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting()}
|
||||
class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{submitting() ? "Creating..." : "Create Relay"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<RelayForm
|
||||
syncSubdomainWithName
|
||||
onSubmit={handleSubmit}
|
||||
submitLabel="Create Relay"
|
||||
submittingLabel="Creating..."
|
||||
/>
|
||||
</PageContainer>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user