diff --git a/src/components/Note/Superchat.tsx b/src/components/Note/Superchat.tsx
index c57bd214..08182edb 100644
--- a/src/components/Note/Superchat.tsx
+++ b/src/components/Note/Superchat.tsx
@@ -1,6 +1,7 @@
import { useFetchEvent } from '@/hooks'
import { usePaymentAttestationStatus } from '@/hooks/usePaymentAttestationStatus'
import { openNoteFromFetchOrCache } from '@/lib/navigation-related-events'
+import { formatAmount } from '@/lib/lightning'
import { parsePaytoTagType } from '@/lib/payto'
import { relayHintsFromEventTags } from '@/lib/relay-list-builder'
import { getPaymentNotificationInfo, getSuperchatReferenceFetchId } from '@/lib/superchat'
@@ -61,11 +62,12 @@ export default function Superchat({
)
}
- const { senderPubkey, recipientPubkey, comment } = info
+ const { senderPubkey, recipientPubkey, comment, amountSats } = info
const { attested } = usePaymentAttestationStatus(event, recipientPubkey)
const hasThreadTarget = Boolean(targetEvent || referencedFetchId)
const isNotification = variant === 'notification'
const isProfileWall = variant === 'profileWall'
+ const showAmount = isNotification && amountSats > 0
const showAsSuperchat = isProfileWall || attested
const hasTarget = isNotification && (hasThreadTarget || Boolean(recipientPubkey))
const hasMetaLine =
@@ -82,7 +84,8 @@ export default function Superchat({
}
return (
-
+
+
{hasMetaLine ? (
{isProfileWall ? (
@@ -95,7 +98,6 @@ export default function Superchat({
/>
@@ -139,26 +141,41 @@ export default function Superchat({
imgClassName="size-5"
/>
{t('Superchat')}
+ {showAmount ? (
+
+ {formatAmount(amountSats)} {t('sats')}
+
+ ) : null}
>
) : (
-
+ <>
+
+ {showAmount ? (
+
+ {formatAmount(amountSats)} {t('sats')}
+
+ ) : null}
+ >
)}
) : null}
+
{comment ? (
) : null}
{isNotification ? (
-
+
+
+
) : null}
)
diff --git a/src/components/Note/SuperchatCommentMarkdown.tsx b/src/components/Note/SuperchatCommentMarkdown.tsx
index 717b6107..8729e634 100644
--- a/src/components/Note/SuperchatCommentMarkdown.tsx
+++ b/src/components/Note/SuperchatCommentMarkdown.tsx
@@ -1,7 +1,8 @@
-import MarkdownArticle from './MarkdownArticle/MarkdownArticle'
+import { superchatCommentBodyClass } from '@/lib/superchat-ui'
import { cn } from '@/lib/utils'
import { Event } from 'nostr-tools'
import { useMemo } from 'react'
+import MarkdownArticle from './MarkdownArticle/MarkdownArticle'
export default function SuperchatCommentMarkdown({
event,
@@ -23,8 +24,7 @@ export default function SuperchatCommentMarkdown({
hideMetadata
lazyMedia={false}
className={cn(
- 'prose-xl max-w-none text-foreground',
- '[&_p]:text-[1.6875rem] [&_p]:font-semibold [&_p]:leading-snug [&_p]:text-foreground',
+ superchatCommentBodyClass,
'[&_a]:text-[hsl(var(--uri-link))] [&_a:hover]:text-[hsl(var(--primary))]',
'[&_strong]:text-foreground [&_em]:text-foreground',
className
diff --git a/src/components/Note/SuperchatPaymentMethodLabel.tsx b/src/components/Note/SuperchatPaymentMethodLabel.tsx
index 8b321cc5..2719a627 100644
--- a/src/components/Note/SuperchatPaymentMethodLabel.tsx
+++ b/src/components/Note/SuperchatPaymentMethodLabel.tsx
@@ -1,36 +1,37 @@
-import { getCanonicalPaytoType, getPaytoEditorTypeLabel } from '@/lib/payto'
+import { getCanonicalPaytoType, getPaytoEditorTypeLabel, paytoTypeHasDisplayIcon } from '@/lib/payto'
import PaytoTypeIcon from '@/components/PaytoTypeIcon'
import { cn } from '@/lib/utils'
export default function SuperchatPaymentMethodLabel({
paytoType,
className,
- imgClassName,
- iconOnly = false
+ imgClassName
}: {
/** Canonical or alias payto type (`lightning`, `monero`, `geyser`, …). */
paytoType: string
className?: string
imgClassName?: string
- /** Profile wall: icon only (label in `title` for hover). */
+ /** @deprecated Icon-only when a logo/lightning/symbol exists; text label only as fallback. */
iconOnly?: boolean
}) {
const canonical = getCanonicalPaytoType(paytoType)
const label = getPaytoEditorTypeLabel(canonical)
+ const showIconOnly = paytoTypeHasDisplayIcon(canonical)
return (
- {iconOnly ? null : {label}}
+ {showIconOnly ? null : {label}}
)
}
diff --git a/src/components/Note/Zap.tsx b/src/components/Note/Zap.tsx
index 07db65c2..73171675 100644
--- a/src/components/Note/Zap.tsx
+++ b/src/components/Note/Zap.tsx
@@ -90,6 +90,7 @@ export default function Zap({
const isNotification = variant === 'notification'
const isProfileWall = variant === 'profileWall'
+ const showAmount = isNotification && amount != null && amount > 0
const showAsSuperchat = isProfileWall || attested
const hasMetaLine =
isProfileWall ||
@@ -97,7 +98,8 @@ export default function Zap({
((recipientPubkey && recipientPubkey !== senderPubkey) || isEventZap || isProfileZap))
return (
-
+
+
{hasMetaLine ? (
{isProfileWall ? (
@@ -108,14 +110,8 @@ export default function Zap({
showAt
className="min-w-0 font-medium text-foreground/85 hover:text-foreground"
/>
- {amount != null ? (
-
- {formatAmount(amount)} {t('sats')}
-
- ) : null}
@@ -163,7 +159,7 @@ export default function Zap({
imgClassName="size-5"
/>
{t('Superchat')}
- {amount != null ? (
+ {showAmount ? (
{formatAmount(amount)} {t('sats')}
@@ -173,7 +169,7 @@ export default function Zap({
<>
{t('Zap')}
- {amount != null ? (
+ {showAmount ? (
{formatAmount(amount)} {t('sats')}
@@ -182,16 +178,19 @@ export default function Zap({
)}
) : null}
+
{comment ? (
) : null}
{isNotification ? (
-
+
+
+
) : null}
)
diff --git a/src/lib/payto-registry.ts b/src/lib/payto-registry.ts
index a480d807..50d7e639 100644
--- a/src/lib/payto-registry.ts
+++ b/src/lib/payto-registry.ts
@@ -156,6 +156,15 @@ export function getPaytoIconChar(type: string): string | null {
return getPaytoTypeRecord(type)?.symbol ?? null
}
+/** True when {@link PaytoTypeIcon} renders lightning, logo, or symbol — not the unknown fallback. */
+export function paytoTypeHasDisplayIcon(type: string): boolean {
+ const canonical = getCanonicalPaytoType(type)
+ if (isLightningPaytoType(canonical)) return true
+ if (getPaytoLogoPath(canonical)) return true
+ if (getPaytoIconChar(canonical) != null) return true
+ return false
+}
+
export function isLightningPaytoType(type: string): boolean {
const canonical = getCanonicalPaytoType(type)
return canonical === 'lightning' || canonical === 'bip353'
diff --git a/src/lib/payto.ts b/src/lib/payto.ts
index 3d8f3591..f30989b9 100644
--- a/src/lib/payto.ts
+++ b/src/lib/payto.ts
@@ -11,6 +11,7 @@ export {
getPaytoEditorTypeLabel,
getPaytoIconChar,
getPaytoLogoPath,
+ paytoTypeHasDisplayIcon,
getPaytoLogoUrl,
getPaytoTypeInfo,
isKnownPaytoType,
diff --git a/src/lib/superchat-ui.ts b/src/lib/superchat-ui.ts
index 329f64ad..d95d1c70 100644
--- a/src/lib/superchat-ui.ts
+++ b/src/lib/superchat-ui.ts
@@ -29,3 +29,14 @@ export const superchatSatsLeadingHighlightClass = 'text-amber-600 dark:text-yell
/** Lightning bolt accent (zap address rows, payto icons). */
export const superchatLightningAccentClass = 'text-amber-600 dark:text-yellow-400'
+
+/**
+ * Superchat / zap comment body (thread + profile wall).
+ * MarkdownArticle uses `div[role="paragraph"]`, not `
`; sizes must not inherit parent `text-sm`.
+ */
+export const superchatCommentBodyClass =
+ 'border-l-[3px] border-amber-700 pl-3.5 dark:border-amber-300 ' +
+ 'max-w-none text-[1.3125rem] font-medium leading-snug text-foreground ' +
+ '[&_[role=paragraph]]:text-[1.3125rem] [&_[role=paragraph]]:font-medium [&_[role=paragraph]]:leading-snug ' +
+ '[&_p]:text-[1.3125rem] [&_p]:font-medium [&_p]:leading-snug ' +
+ 'prose-p:text-[1.3125rem] prose-p:font-medium prose-p:leading-snug'