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

Render the hosting panel relay icon with RelayIcon

Browse source
This commit is contained in:
Coracle-Bot 2026-09-17 17:41:22 +00:00
parent fe15d36a45
commit caab696d36
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/app/components/RelayIcon.svelte
View file

@ -5,14 +5,17 @@
type Props = { type Props = {
url: string url: string
icon?: string
size?: number size?: number
class?: string class?: string
} }
const {url, size = 7, ...props}: Props = $props() const {url, icon, size = 7, ...props}: Props = $props()
const relay = $relays.one(url) const relay = $relays.one(url)
const src = $derived(icon || $relay?.icon)
const rem = $derived(size * 0.25) const rem = $derived(size * 0.25)
const fallbackStyle = $derived( const fallbackStyle = $derived(
@ -20,8 +23,8 @@
) )
</script> </script>
{#if $relay?.icon} {#if src}
<ImageIcon {size} alt="" src={$relay?.icon} class="rounded-full {props.class}" /> <ImageIcon {size} {src} alt="" class="rounded-full {props.class}" />
{:else} {:else}
<div <div
class="flex select-none items-center justify-center rounded-full font-bold {props.class}" class="flex select-none items-center justify-center rounded-full font-bold {props.class}"

7
src/app/components/hosting/RelayDetailCard.svelte
View file

@ -5,7 +5,6 @@
import Pen from "@assets/icons/pen.svg?dataurl" import Pen from "@assets/icons/pen.svg?dataurl"
import Power from "@assets/icons/power.svg?dataurl" import Power from "@assets/icons/power.svg?dataurl"
import Play from "@assets/icons/play.svg?dataurl" import Play from "@assets/icons/play.svg?dataurl"
import Server from "@assets/icons/server.svg?dataurl"
import Danger from "@assets/icons/danger.svg?dataurl" import Danger from "@assets/icons/danger.svg?dataurl"
import VerifiedCheck from "@assets/icons/verified-check.svg?dataurl" import VerifiedCheck from "@assets/icons/verified-check.svg?dataurl"
import ShieldWarning from "@assets/icons/shield-warning.svg?dataurl" import ShieldWarning from "@assets/icons/shield-warning.svg?dataurl"
@ -19,13 +18,13 @@
import Badge from "@lib/components/Badge.svelte" import Badge from "@lib/components/Badge.svelte"
import Button from "@lib/components/Button.svelte" import Button from "@lib/components/Button.svelte"
import Link from "@lib/components/Link.svelte" import Link from "@lib/components/Link.svelte"
import ImageIcon from "@lib/components/ImageIcon.svelte"
import Popover from "@lib/components/Popover.svelte" import Popover from "@lib/components/Popover.svelte"
import Divider from "@lib/components/Divider.svelte" import Divider from "@lib/components/Divider.svelte"
import Spinner from "@lib/components/Spinner.svelte" import Spinner from "@lib/components/Spinner.svelte"
import FieldInline from "@lib/components/FieldInline.svelte" import FieldInline from "@lib/components/FieldInline.svelte"
import ToggleInput from "@lib/components/ToggleInput.svelte" import ToggleInput from "@lib/components/ToggleInput.svelte"
import Confirm from "@lib/components/Confirm.svelte" import Confirm from "@lib/components/Confirm.svelte"
import RelayIcon from "@app/components/RelayIcon.svelte"
import CustomDomainModal from "@app/components/hosting/CustomDomainModal.svelte" import CustomDomainModal from "@app/components/hosting/CustomDomainModal.svelte"
import DataTransferModal from "@app/components/hosting/DataTransferModal.svelte" import DataTransferModal from "@app/components/hosting/DataTransferModal.svelte"
import PlanModal from "@app/components/hosting/PlanModal.svelte" import PlanModal from "@app/components/hosting/PlanModal.svelte"
@ -228,9 +227,7 @@
<div class="card flex flex-col gap-6"> <div class="card flex flex-col gap-6">
<div class="flex items-start justify-between gap-4"> <div class="flex items-start justify-between gap-4">
<div class="flex min-w-0 items-start gap-4"> <div class="flex min-w-0 items-start gap-4">
<div class="rounded-full border border-line aspect-square px-2 pt-2"> <RelayIcon url={getHostedRelayUrl(current)} icon={current.info_icon} size={12} />
<ImageIcon size={8} alt="" src={current.info_icon || Server} />
</div>
<div class="min-w-0"> <div class="min-w-0">
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<h2 class="text-xl font-bold">{relayLabel}</h2> <h2 class="text-xl font-bold">{relayLabel}</h2>