refactor: Update relay link styling to match other inline links

- Use muted/underline styling consistent with NIP references
- Remove icons and show only relay name (formatted)
- Display full URL in tooltip
- Match text size with surrounding content
- Simplify component by not using RelayLink wrapper
This commit is contained in:
Claude
2026-01-15 10:28:25 +00:00
parent a8eed4e5b9
commit f8c2bfacf9

View File

@@ -1,22 +1,39 @@
import type { RelayNode } from "@/lib/relay-transformer";
import { RelayLink } from "@/components/nostr/RelayLink";
import { useGrimoire } from "@/core/state";
interface RelayNodeProps {
node: RelayNode;
}
/**
* Format relay URL for display by removing protocol and trailing slashes
*/
function formatRelayUrlForDisplay(url: string): string {
return url
.replace(/^wss?:\/\//, "") // Remove ws:// or wss://
.replace(/\/$/, ""); // Remove trailing slash
}
/**
* Renders a relay URL as a clickable link that opens the relay viewer
*/
export function Relay({ node }: RelayNodeProps) {
const { addWindow } = useGrimoire();
const { url } = node;
const displayUrl = formatRelayUrlForDisplay(url);
const openRelay = () => {
addWindow("relay", { url });
};
return (
<RelayLink
url={url}
variant="prompt"
showInboxOutbox={false}
className="inline-flex"
/>
<button
onClick={openRelay}
className="text-muted-foreground underline decoration-dotted hover:text-foreground cursor-crosshair"
title={url}
>
{displayUrl}
</button>
);
}