coracle/caravel
1
1
Fork 2
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Add relay activity

Browse Source
This commit is contained in:
Jon Staab
2026-03-27 15:24:08 -07:00
parent 6510bc0d85
commit 77365f74ee
10 changed files with 152 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ActivityFeed.tsx
+53
View File
@@ -0,0 +1,53 @@
import { For, Show } from "solid-js"
import type { Activity } from "@/lib/hooks"
const ACTIVITY_LABELS: Record<string, string> = {
create_relay: "Relay created",
update_relay: "Relay updated",
deactivate_relay: "Relay deactivated",
fail_relay_sync: "Relay sync failed",
create_tenant: "Account created",
update_tenant_billing_anchor: "Billing anchor updated",
update_tenant_nwc_url: "Wallet connection updated",
create_invoice: "Invoice created",
mark_invoice_paid: "Invoice paid",
mark_invoice_attempted: "Invoice payment attempted",
mark_invoice_sent: "Invoice sent",
mark_invoice_closed: "Invoice closed",
}
function formatDate(ts: number) {
return new Date(ts * 1000).toLocaleString(undefined, {
month: "short", day: "numeric", year: "numeric",
hour: "2-digit", minute: "2-digit",
})
}
export default function ActivityFeed(props: { activity: Activity[]; loading: boolean }) {
return (
<section class="bg-white border border-gray-200 rounded-xl p-6">
<h3 class="text-sm font-semibold uppercase tracking-wider mb-6">Activity</h3>
<Show when={props.loading}>
<p class="text-sm text-gray-400">Loading activity...</p>
</Show>
<Show when={!props.loading && props.activity.length === 0}>
<p class="text-sm text-gray-400">No activity yet.</p>
</Show>
<Show when={!props.loading && props.activity.length > 0}>
<ol class="relative border-l border-gray-200 space-y-6 ml-3">
<For each={props.activity}>
{(item) => (
<li class="pl-6">
<span class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border-2 border-white bg-gray-300" />
<p class="text-sm font-medium text-gray-900">
{ACTIVITY_LABELS[item.activity_type] ?? item.activity_type.replace(/_/g, " ")}
</p>
<time class="text-xs text-gray-400">{formatDate(item.created_at)}</time>
</li>
)}
</For>
</ol>
</Show>
</section>
)
}
frontend/src/components/RelayDetailCard.tsx
+23 -1
View File
@@ -9,6 +9,25 @@ import ToggleField from "@/components/ToggleField"
import { setToastMessage } from "@/components/Toast"
import { plans } from "@/lib/state"
const STATUS_STYLES: Record<string, string> = {
active: "bg-green-50 text-green-700 border-green-200",
new: "bg-blue-50 text-blue-700 border-blue-200",
pending: "bg-yellow-50 text-yellow-700 border-yellow-200",
provisioning_failed: "bg-red-50 text-red-700 border-red-200",
deactivated: "bg-gray-100 text-gray-500 border-gray-200",
suspended: "bg-orange-50 text-orange-700 border-orange-200",
}
function StatusBadge(props: { status: string }) {
const styles = () => STATUS_STYLES[props.status] ?? "bg-gray-100 text-gray-500 border-gray-200"
const label = () => props.status.replace(/_/g, " ")
return (
<span class={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${styles()}`}>
{label()}
</span>
)
}
function DetailSection(props: { title: string; children: any }) {
return (
<div>
@@ -114,7 +133,10 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
<img src={r().info_icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
</Show>
<div class="min-w-0">
<h1 class="text-2xl font-bold text-gray-900">{r().info_name || r().subdomain}</h1>
<div class="flex items-center gap-3 flex-wrap">
<h1 class="text-2xl font-bold text-gray-900">{r().info_name || r().subdomain}</h1>
<StatusBadge status={r().status} />
</div>
<a
href={`wss://${r().subdomain}.spaces.coracle.social`}
class="text-sm text-blue-600 hover:underline break-all"