matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Show only name, host and status in the home hosting rows (#618)

Browse source
This commit is contained in:
Coracle-Bot 2026-09-22 18:16:19 +00:00 committed by hodlbod
parent 929b6e4e41
commit 47c390944b
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/HomeHosting.svelte
View file

@ -50,7 +50,7 @@
{#if relays.length > 0} {#if relays.length > 0}
<div class="flex flex-col divide-y divide-line border-y border-line"> <div class="flex flex-col divide-y divide-line border-y border-line">
{#each relays as relay (relay.id)} {#each relays as relay (relay.id)}
<RelayListItem {relay} class="px-4 py-3" /> <RelayListItem {relay} compact class="px-4 py-3" />
{/each} {/each}
</div> </div>
{/if} {/if}

21
src/app/components/hosting/RelayListItem.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import cx from "classnames"
import Server from "@assets/icons/server.svg?dataurl" import Server from "@assets/icons/server.svg?dataurl"
import {ucFirst} from "@lib/util" import {ucFirst} from "@lib/util"
import Badge from "@lib/components/Badge.svelte" import Badge from "@lib/components/Badge.svelte"
@ -9,17 +10,23 @@
type Props = { type Props = {
relay: HostedRelay relay: HostedRelay
compact?: boolean
class?: string class?: string
} }
const {relay, class: className = "card p-3 sm:p-4"}: Props = $props() const {relay, compact = false, class: className = "card p-3 sm:p-4"}: Props = $props()
const name = $derived(relay.info_name || relay.subdomain) const name = $derived(relay.info_name || relay.subdomain)
const host = $derived(canonicalRelayHost(relay)) const host = $derived(canonicalRelayHost(relay))
const href = $derived(makeSpacePath(getHostedRelayUrl(relay), "admin")) const href = $derived(makeSpacePath(getHostedRelayUrl(relay), "admin"))
</script> </script>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 {className}"> <div
class={cx(
"flex gap-3",
className,
compact ? "items-center" : "flex-col sm:flex-row sm:items-center sm:gap-4",
)}>
<div class="flex min-w-0 flex-1 items-center gap-3"> <div class="flex min-w-0 flex-1 items-center gap-3">
<ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} /> <ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} />
<div class="min-w-0"> <div class="min-w-0">
@ -35,9 +42,11 @@
{ucFirst(relay.status.replace(/_/g, " "))} {ucFirst(relay.status.replace(/_/g, " "))}
</Badge> </Badge>
{/if} {/if}
<Badge variant={relay.plan_id === "free" ? "neutral" : "primary"}> {#if !compact}
{ucFirst(relay.plan_id)} <Badge variant={relay.plan_id === "free" ? "neutral" : "primary"}>
</Badge> {ucFirst(relay.plan_id)}
<Link class="button button-neutral button-sm ml-auto" {href}>Manage</Link> </Badge>
<Link class="button button-neutral button-sm ml-auto" {href}>Manage</Link>
{/if}
</div> </div>
</div> </div>