mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-11 07:56:50 +02:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user