From 11b07485399797daf42bcdcd0317dd133ad9e3e0 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Sat, 23 May 2026 22:38:34 +0200
Subject: [PATCH] fix formatting of superchats

---
 src/components/Note/Superchat.tsx             | 45 +++++++++++++------
 .../Note/SuperchatCommentMarkdown.tsx         |  6 +--
 .../Note/SuperchatPaymentMethodLabel.tsx      | 15 ++++---
 src/components/Note/Zap.tsx                   | 29 ++++++------
 src/lib/payto-registry.ts                     |  9 ++++
 src/lib/payto.ts                              |  1 +
 src/lib/superchat-ui.ts                       | 11 +++++
 7 files changed, 77 insertions(+), 39 deletions(-)

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 (
-    <div className={cn('text-sm text-muted-foreground', className)}>
+    <div className={cn('min-w-0', className)}>
+      <div className="text-sm text-muted-foreground">
       {hasMetaLine ? (
         <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-sm">
           {isProfileWall ? (
@@ -95,7 +98,6 @@ export default function Superchat({
               />
               <SuperchatPaymentMethodLabel
                 paytoType={paytoType}
-                iconOnly
                 className="shrink-0"
                 imgClassName="size-5"
               />
@@ -139,26 +141,41 @@ export default function Superchat({
                 imgClassName="size-5"
               />
               <span className={cn('text-xl', superchatTitleClass)}>{t('Superchat')}</span>
+              {showAmount ? (
+                <span className="text-xl font-bold tabular-nums tracking-tight text-foreground">
+                  {formatAmount(amountSats)} {t('sats')}
+                </span>
+              ) : null}
             </>
           ) : (
-            <SuperchatPaymentMethodLabel
-              paytoType={paytoType}
-              className="px-2.5 py-1.5 text-lg"
-              imgClassName="size-5"
-            />
+            <>
+              <SuperchatPaymentMethodLabel
+                paytoType={paytoType}
+                className="px-2.5 py-1.5 text-lg"
+                imgClassName="size-5"
+              />
+              {showAmount ? (
+                <span className="text-lg font-bold tabular-nums tracking-tight text-foreground">
+                  {formatAmount(amountSats)} {t('sats')}
+                </span>
+              ) : null}
+            </>
           )}
         </div>
       ) : null}
+      </div>
       {comment ? (
         <SuperchatCommentMarkdown event={event} comment={comment} className="mt-2" />
       ) : null}
       {isNotification ? (
-        <TurnIntoSuperchatButton
-          event={event}
-          prominent
-          attestationRecipientPubkey={recipientPubkey}
-          className="mt-3"
-        />
+        <div className="text-sm text-muted-foreground">
+          <TurnIntoSuperchatButton
+            event={event}
+            prominent
+            attestationRecipientPubkey={recipientPubkey}
+            className="mt-3"
+          />
+        </div>
       ) : null}
     </div>
   )
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 (
     <span
-      title={iconOnly ? label : undefined}
+      title={showIconOnly ? label : undefined}
+      aria-label={showIconOnly ? label : undefined}
       className={cn(
         'inline-flex shrink-0 items-center rounded-md border border-border/60 bg-muted/40',
-        iconOnly
+        showIconOnly
           ? 'p-1.5 leading-none text-muted-foreground'
           : 'gap-1.5 px-2 py-1 text-sm font-semibold leading-none text-muted-foreground',
         className
       )}
     >
       <PaytoTypeIcon type={paytoType} imgClassName={imgClassName} />
-      {iconOnly ? null : <span className="truncate">{label}</span>}
+      {showIconOnly ? null : <span className="truncate">{label}</span>}
     </span>
   )
 }
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 (
-    <div className={cn('text-sm text-muted-foreground', className)}>
+    <div className={cn('min-w-0', className)}>
+      <div className="text-sm text-muted-foreground">
       {hasMetaLine ? (
         <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-sm">
           {isProfileWall ? (
@@ -108,14 +110,8 @@ export default function Zap({
                 showAt
                 className="min-w-0 font-medium text-foreground/85 hover:text-foreground"
               />
-              {amount != null ? (
-                <span className="shrink-0 text-sm font-bold tabular-nums tracking-tight text-foreground">
-                  {formatAmount(amount)} {t('sats')}
-                </span>
-              ) : null}
               <SuperchatPaymentMethodLabel
                 paytoType={paytoType}
-                iconOnly
                 className="shrink-0"
                 imgClassName="size-5"
               />
@@ -163,7 +159,7 @@ export default function Zap({
                 imgClassName="size-5"
               />
               <span className={cn('text-xl', superchatTitleClass)}>{t('Superchat')}</span>
-              {amount != null ? (
+              {showAmount ? (
                 <span className="text-xl font-bold tabular-nums tracking-tight text-foreground">
                   {formatAmount(amount)} {t('sats')}
                 </span>
@@ -173,7 +169,7 @@ export default function Zap({
             <>
               <ZapIcon className="size-5 shrink-0 text-primary" aria-hidden />
               <span className="text-lg font-semibold text-foreground">{t('Zap')}</span>
-              {amount != null ? (
+              {showAmount ? (
                 <span className="text-lg font-bold tabular-nums tracking-tight text-foreground">
                   {formatAmount(amount)} {t('sats')}
                 </span>
@@ -182,16 +178,19 @@ export default function Zap({
           )}
         </div>
       ) : null}
+      </div>
       {comment ? (
         <SuperchatCommentMarkdown event={event} comment={comment} className="mt-2" />
       ) : null}
       {isNotification ? (
-        <TurnIntoSuperchatButton
-          event={event}
-          prominent
-          attestationRecipientPubkey={attestationRecipientPubkey}
-          className="mt-3"
-        />
+        <div className="text-sm text-muted-foreground">
+          <TurnIntoSuperchatButton
+            event={event}
+            prominent
+            attestationRecipientPubkey={attestationRecipientPubkey}
+            className="mt-3"
+          />
+        </div>
       ) : null}
     </div>
   )
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 `<p>`; 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'