don't allow other markup in headings

* fixes #1395

* rehype plugin for embeds

* fix lint

* replace many plugins with one rehype and improve image collage

* remove unused css

* handle more custom markdown behavior in rehype

* refactor markdown rendering more + better footnotes

* move more markdown logic to reyhpe plugin + better headers

* fix #1397

* refactor embeds out of media-or-link

api/paidAction/index.js

@@ -160,7 +160,7 @@ async function performPessimisticAction (actionType, args, context) {
 
 export async function retryPaidAction (actionType, args, context) {
   const { models, me } = context
-  const { invoiceId } = args
+  const { invoice: failedInvoice } = args
 
   console.log('retryPaidAction', actionType, args)
 
@@ -181,18 +181,13 @@ export async function retryPaidAction (actionType, args, context) {
     throw new Error(`retryPaidAction - action does not support retrying ${actionType}`)
   }
 
-  if (!invoiceId) {
-    throw new Error(`retryPaidAction - missing invoiceId ${actionType}`)
+  if (!failedInvoice) {
+    throw new Error(`retryPaidAction - missing invoice ${actionType}`)
   }
 
   context.optimistic = true
   context.me = await models.user.findUnique({ where: { id: me.id } })
 
-  const failedInvoice = await models.invoice.findUnique({ where: { id: invoiceId, actionState: 'FAILED' } })
-  if (!failedInvoice) {
-    throw new Error(`retryPaidAction ${actionType} - invoice ${invoiceId} not found or not in failed state`)
-  }
-
   const { msatsRequested, actionId } = failedInvoice
   context.cost = BigInt(msatsRequested)
   context.actionId = actionId
@@ -204,7 +199,7 @@ export async function retryPaidAction (actionType, args, context) {
     // update the old invoice to RETRYING, so that it's not confused with FAILED
     await tx.invoice.update({
       where: {
-        id: invoiceId,
+        id: failedInvoice.id,
         actionState: 'FAILED'
       },
       data: {
@@ -216,7 +211,7 @@ export async function retryPaidAction (actionType, args, context) {
     const invoice = await createDbInvoice(actionType, args, context, invoiceArgs)
 
     return {
-      result: await action.retry({ invoiceId, newInvoiceId: invoice.id }, context),
+      result: await action.retry({ invoiceId: failedInvoice.id, newInvoiceId: invoice.id }, context),
       invoice,
       paymentMethod: 'OPTIMISTIC'
     }

api/resolvers/paidAction.js

@@ -56,7 +56,14 @@ export default {
         throw new Error('Invoice not found')
       }
 
-      const result = await retryPaidAction(invoice.actionType, { invoiceId }, { models, me, lnd })
+      if (invoice.actionState !== 'FAILED') {
+        if (invoice.actionState === 'PAID') {
+          throw new Error('Invoice is already paid')
+        }
+        throw new Error(`Invoice is not in failed state: ${invoice.actionState}`)
+      }
+
+      const result = await retryPaidAction(invoice.actionType, { invoice }, { models, me, lnd })
 
       return {
         ...result,

awards.csv

@@ -128,3 +128,4 @@ riccardobl,pr,#1342,#1141,hard,high,,pending unrelated rearchitecture,1m,rblb@ge
 SatsAllDay,issue,#1368,#1331,medium,,,,25k,weareallsatoshi@getalby.com,2024-09-16
 benalleng,helpfulness,#1368,#1170,medium,,,did a lot of it in #1175,25k,BenAllenG@stacker.news,2024-09-16
 humble-GOAT,issue,#1412,#1407,good-first-issue,,,,2k,humble_GOAT@stacker.news,2024-09-18
+felipebueno,issue,#1425,#986,medium,,,,25k,felipebueno@getalby.com,2024-09-26

components/carousel.js

@@ -0,0 +1,133 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import ArrowLeft from '@/svgs/arrow-left-line.svg'
+import ArrowRight from '@/svgs/arrow-right-line.svg'
+import styles from './carousel.module.css'
+import { useShowModal } from './modal'
+import { Dropdown } from 'react-bootstrap'
+
+function useSwiping ({ moveLeft, moveRight }) {
+  const [touchStartX, setTouchStartX] = useState(null)
+
+  const onTouchStart = useCallback((e) => {
+    if (e.touches.length === 1) {
+      setTouchStartX(e.touches[0].clientX)
+    }
+  }, [])
+
+  const onTouchEnd = useCallback((e) => {
+    if (touchStartX !== null) {
+      const touchEndX = e.changedTouches[0].clientX
+      const diff = touchEndX - touchStartX
+      if (diff > 50) {
+        moveLeft()
+      } else if (diff < -50) {
+        moveRight()
+      }
+      setTouchStartX(null)
+    }
+  }, [touchStartX, moveLeft, moveRight])
+
+  useEffect(() => {
+    document.addEventListener('touchstart', onTouchStart)
+    document.addEventListener('touchend', onTouchEnd)
+    return () => {
+      document.removeEventListener('touchstart', onTouchStart)
+      document.removeEventListener('touchend', onTouchEnd)
+    }
+  }, [onTouchStart, onTouchEnd])
+}
+
+function useArrowKeys ({ moveLeft, moveRight }) {
+  const onKeyDown = useCallback((e) => {
+    if (e.key === 'ArrowLeft') {
+      moveLeft()
+    } else if (e.key === 'ArrowRight') {
+      moveRight()
+    }
+  }, [moveLeft, moveRight])
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [onKeyDown])
+}
+
+export default function Carousel ({ close, mediaArr, src, originalSrc, setOptions }) {
+  const [index, setIndex] = useState(mediaArr.findIndex(([key]) => key === src))
+  const [currentSrc, canGoLeft, canGoRight] = useMemo(() => {
+    return [mediaArr[index][0], index > 0, index < mediaArr.length - 1]
+  }, [mediaArr, index])
+
+  const moveLeft = useCallback(() => {
+    setIndex(i => Math.max(0, i - 1))
+  }, [setIndex])
+
+  const moveRight = useCallback(() => {
+    setIndex(i => Math.min(mediaArr.length - 1, i + 1))
+  }, [setIndex, mediaArr.length])
+
+  useSwiping({ moveLeft, moveRight })
+  useArrowKeys({ moveLeft, moveRight })
+
+  return (
+    <div className={styles.fullScreenContainer} onClick={close}>
+      <img className={styles.fullScreen} src={currentSrc} />
+      <div className={styles.fullScreenNavContainer}>
+        <div
+          className={classNames(styles.fullScreenNav, !canGoLeft && 'invisible', styles.left)}
+          onClick={(e) => {
+            e.stopPropagation()
+            moveLeft()
+          }}
+        >
+          <ArrowLeft width={34} height={34} />
+        </div>
+        <div
+          className={classNames(styles.fullScreenNav, !canGoRight && 'invisible', styles.right)}
+          onClick={(e) => {
+            e.stopPropagation()
+            moveRight()
+          }}
+        >
+          <ArrowRight width={34} height={34} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CarouselContext = createContext()
+
+function CarouselOverflow ({ originalSrc, rel }) {
+  return <Dropdown.Item href={originalSrc} rel={rel} target='_blank'>view original</Dropdown.Item>
+}
+
+export function CarouselProvider ({ children }) {
+  const media = useRef(new Map())
+  const showModal = useShowModal()
+
+  const showCarousel = useCallback(({ src }) => {
+    showModal((close, setOptions) => {
+      return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
+    }, {
+      fullScreen: true,
+      overflow: <CarouselOverflow {...media.current.get(src)} />
+    })
+  }, [showModal, media.current])
+
+  const addMedia = useCallback(({ src, originalSrc, rel }) => {
+    media.current.set(src, { src, originalSrc, rel })
+  }, [media.current])
+
+  const removeMedia = useCallback((src) => {
+    media.current.delete(src)
+  }, [media.current])
+
+  const value = useMemo(() => ({ showCarousel, addMedia, removeMedia }), [showCarousel, addMedia, removeMedia])
+  return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
+}
+
+export function useCarousel () {
+  return useContext(CarouselContext)
+}

components/carousel.module.css

@@ -0,0 +1,63 @@
+div.fullScreenNavContainer {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+img.fullScreen {
+    cursor: zoom-out !important;
+    max-height: 100%;
+    max-width: 100vw;
+    min-width: 0;
+    min-height: 0;
+    align-self: center;
+    justify-self: center;
+    user-select: none;
+}
+
+.fullScreenContainer {
+    --bs-columns: 1;
+    --bs-rows: 1;
+    display: grid;
+    width: 100%;
+    height: 100%;
+}
+
+div.fullScreenNav:hover > svg {
+    background-color: rgba(0, 0, 0, .5);
+}
+
+div.fullScreenNav  {
+    cursor: pointer;
+    pointer-events: auto;
+    width: 72px;
+    height: 72px;
+    display: flex;
+    align-items: center;
+}
+
+div.fullScreenNav.left {
+    justify-content: flex-start;
+}
+
+div.fullScreenNav.right {
+    justify-content: flex-end;
+}
+
+div.fullScreenNav > svg {
+    border-radius: 50%;
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.7);
+    fill: white;
+    max-height: 34px;
+    max-width: 34px;
+    padding: 0.35rem;
+    margin: .75rem;
+}

components/comment.js

@@ -94,7 +94,7 @@ export function CommentFlat ({ item, rank, siblingComments, ...props }) {
 
 export default function Comment ({
   item, children, replyOpen, includeParent, topLevel,
-  rootText, noComments, noReply, truncate, depth, pin
+  rootText, noComments, noReply, truncate, depth, pin, setDisableRetry, disableRetry
 }) {
   const [edit, setEdit] = useState()
   const { me } = useMe()
@@ -169,6 +169,8 @@ export default function Comment ({
                   embellishUser={op && <><span> </span><Badge bg={op === 'fwd' ? 'secondary' : 'boost'} className={`${styles.op} bg-opacity-75`}>{op}</Badge></>}
                   onQuoteReply={quoteReply}
                   nested={!includeParent}
+                  setDisableRetry={setDisableRetry}
+                  disableRetry={disableRetry}
                   extraInfo={
                     <>
                       {includeParent && <Parent item={item} rootText={rootText} />}

components/embed.js

@@ -0,0 +1,215 @@
+import { memo, useEffect, useRef, useState } from 'react'
+import classNames from 'classnames'
+import useDarkMode from './dark-mode'
+import styles from './text.module.css'
+import { Button } from 'react-bootstrap'
+import { TwitterTweetEmbed } from 'react-twitter-embed'
+import YouTube from 'react-youtube'
+
+function TweetSkeleton ({ className }) {
+  return (
+    <div className={classNames(styles.tweetsSkeleton, className)}>
+      <div className={styles.tweetSkeleton}>
+        <div className={`${styles.img} clouds`} />
+        <div className={styles.content1}>
+          <div className={`${styles.line} clouds`} />
+          <div className={`${styles.line} clouds`} />
+          <div className={`${styles.line} clouds`} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, darkMode, id }) {
+  const [show, setShow] = useState(false)
+  const iframeRef = useRef(null)
+
+  useEffect(() => {
+    if (!iframeRef.current) return
+
+    const setHeightFromIframe = (e) => {
+      if (e.origin !== 'https://njump.me' || !e?.data?.height || e.source !== iframeRef.current.contentWindow) return
+      iframeRef.current.height = `${e.data.height}px`
+    }
+
+    window?.addEventListener('message', setHeightFromIframe)
+
+    const handleIframeLoad = () => {
+      iframeRef.current.contentWindow.postMessage({ setDarkMode: darkMode }, '*')
+    }
+
+    if (iframeRef.current.complete) {
+      handleIframeLoad()
+    } else {
+      iframeRef.current.addEventListener('load', handleIframeLoad)
+    }
+
+    // https://github.com/vercel/next.js/issues/39451
+    iframeRef.current.src = `https://njump.me/${id}?embed=yes`
+
+    return () => {
+      window?.removeEventListener('message', setHeightFromIframe)
+      iframeRef.current?.removeEventListener('load', handleIframeLoad)
+    }
+  }, [iframeRef.current, darkMode])
+
+  return (
+    <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
+      <iframe
+        ref={iframeRef}
+        width={topLevel ? '550px' : '350px'}
+        style={{ maxWidth: '100%' }}
+        height={iframeRef.current?.height || (topLevel ? '200px' : '150px')}
+        frameBorder='0'
+        sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox'
+        allow=''
+      />
+      {!show &&
+        <Button size='md' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+          <div>show full note</div>
+          <small className='fw-normal fst-italic'>or other stuff</small>
+        </Button>}
+    </div>
+  )
+})
+
+const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
+  const iframeRef = useRef(null)
+
+  // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
+  // Remove any additional path segments
+  const url = new URL(src)
+  url.pathname = url.pathname.replace(/\/intl-\w+\//, '/')
+
+  useEffect(() => {
+    if (!iframeRef.current) return
+
+    const id = url.pathname.split('/').pop()
+
+    // https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api
+    window.onSpotifyIframeApiReady = (IFrameAPI) => {
+      const options = {
+        uri: `spotify:episode:${id}`
+      }
+      const callback = (EmbedController) => {}
+      IFrameAPI.createController(iframeRef.current, options, callback)
+    }
+
+    return () => { window.onSpotifyIframeApiReady = null }
+  }, [iframeRef.current, url.pathname])
+
+  return (
+    <div className={classNames(styles.spotifyWrapper, className)}>
+      <iframe
+        ref={iframeRef}
+        title='Spotify Web Player'
+        src={`https://open.spotify.com/embed${url.pathname}`}
+        width='100%'
+        height='152'
+        allowFullScreen
+        frameBorder='0'
+        allow='encrypted-media; clipboard-write;'
+        style={{ borderRadius: '12px' }}
+        sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-presentation'
+      />
+    </div>
+  )
+}
+
+const Embed = memo(function Embed ({ src, provider, id, meta, className, topLevel, onError }) {
+  const [darkMode] = useDarkMode()
+  const [overflowing, setOverflowing] = useState(true)
+  const [show, setShow] = useState(false)
+
+  // This Twitter embed could use similar logic to the video embeds below
+  if (provider === 'twitter') {
+    return (
+      <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
+        <TwitterTweetEmbed
+          tweetId={id}
+          options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
+          key={darkMode ? '1' : '2'}
+          placeholder={<TweetSkeleton className={className} />}
+          onLoad={() => setOverflowing(true)}
+        />
+        {overflowing && !show &&
+          <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
+            show full tweet
+          </Button>}
+      </div>
+    )
+  }
+
+  if (provider === 'nostr') {
+    return (
+      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} darkMode={darkMode} />
+    )
+  }
+
+  if (provider === 'wavlake') {
+    return (
+      <div className={classNames(styles.wavlakeWrapper, className)}>
+        <iframe
+          src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
+          allow='encrypted-media'
+          sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
+        />
+      </div>
+    )
+  }
+
+  if (provider === 'spotify') {
+    return (
+      <SpotifyEmbed src={src} className={className} />
+    )
+  }
+
+  if (provider === 'youtube') {
+    return (
+      <div className={classNames(styles.videoWrapper, className)}>
+        <YouTube
+          videoId={id} className={styles.videoContainer} opts={{
+            playerVars: {
+              start: meta?.start || 0
+            }
+          }}
+        />
+      </div>
+    )
+  }
+
+  if (provider === 'rumble') {
+    return (
+      <div className={classNames(styles.videoWrapper, className)}>
+        <div className={styles.videoContainer}>
+          <iframe
+            title='Rumble Video'
+            allowFullScreen
+            src={meta?.href}
+            sandbox='allow-scripts'
+          />
+        </div>
+      </div>
+    )
+  }
+
+  if (provider === 'peertube') {
+    return (
+      <div className={classNames(styles.videoWrapper, className)}>
+        <div className={styles.videoContainer}>
+          <iframe
+            title='PeerTube Video'
+            allowFullScreen
+            src={meta?.href}
+            sandbox='allow-scripts'
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return null
+})
+
+export default Embed

components/fee-button.js

@@ -50,7 +50,6 @@ export function postCommentUseRemoteLineItems ({ parentId } = {}) {
     useEffect(() => {
       const repetition = data?.itemRepetition
       if (!repetition) return setLine({})
-      console.log('repetition', repetition)
       setLine({
         itemRepetition: {
           term: <>x 10<sup>{repetition}</sup></>,

components/form.js

@@ -53,7 +53,7 @@ export function SubmitButton ({
   return (
     <Button
       variant={variant || 'main'}
-      className={classNames(formik.isSubmitting && styles.pending, className)}
+      className={classNames(formik.isSubmitting && 'pulse', className)}
       type='submit'
       disabled={disabled}
       onClick={value
@@ -393,7 +393,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
         {tab !== 'write' &&
           <div className='form-group'>
             <div className={`${styles.text} form-control`}>
-              <Text topLevel={topLevel} noFragments tab={tab}>{meta.value}</Text>
+              <Text topLevel={topLevel} tab={tab}>{meta.value}</Text>
             </div>
           </div>}
       </div>

components/invoice.js

@@ -13,8 +13,12 @@ import ItemJob from './item-job'
 import Item from './item'
 import { CommentFlat } from './comment'
 import classNames from 'classnames'
+import Moon from '@/svgs/moon-fill.svg'
 
-export default function Invoice ({ id, query = INVOICE, modal, onPayment, onCanceled, info, successVerb, useWallet = true, walletError, poll, waitFor, ...props }) {
+export default function Invoice ({
+  id, query = INVOICE, modal, onPayment, onCanceled, info, successVerb = 'deposited',
+  heldVerb = 'settling', useWallet = true, walletError, poll, waitFor, ...props
+}) {
   const [expired, setExpired] = useState(false)
   const { data, error } = useQuery(query, SSR
     ? {}
@@ -55,9 +59,17 @@ export default function Invoice ({ id, query = INVOICE, modal, onPayment, onCanc
     variant = 'failed'
     status = 'cancelled'
     useWallet = false
-  } else if (invoice.confirmedAt || (invoice.isHeld && invoice.satsReceived && !expired)) {
+  } else if (invoice.isHeld && invoice.satsReceived && !expired) {
+    variant = 'pending'
+    status = (
+      <div className='d-flex justify-content-center'>
+        <Moon className='spin fill-grey me-2' /> {heldVerb}
+      </div>
+    )
+    useWallet = false
+  } else if (invoice.confirmedAt) {
     variant = 'confirmed'
-    status = `${numWithUnits(invoice.satsReceived, { abbreviate: false })} ${successVerb || 'deposited'}`
+    status = `${numWithUnits(invoice.satsReceived, { abbreviate: false })} ${successVerb}`
     useWallet = false
   } else if (expired) {
     variant = 'failed'

components/item-act.js

@@ -90,6 +90,7 @@ function BoostForm ({ step, onSubmit, children, item, oValue, inputRef, act = 'B
 export default function ItemAct ({ onClose, item, act = 'TIP', step, children, abortSignal }) {
   const inputRef = useRef(null)
   const { me } = useMe()
+  const wallet = useWallet()
   const [oValue, setOValue] = useState()
 
   useEffect(() => {
@@ -110,6 +111,18 @@ export default function ItemAct ({ onClose, item, act = 'TIP', step, children, a
         }
       }
     }
+
+    const onPaid = () => {
+      strike()
+      onClose?.()
+      if (!me) setItemMeAnonSats({ id: item.id, amount })
+    }
+
+    const closeImmediately = !!wallet || me?.privates?.sats > Number(amount)
+    if (closeImmediately) {
+      onPaid()
+    }
+
     const { error } = await actor({
       variables: {
         id: item.id,
@@ -127,15 +140,11 @@ export default function ItemAct ({ onClose, item, act = 'TIP', step, children, a
           }
         : undefined,
       // don't close modal immediately because we want the QR modal to stack
-      onCompleted: () => {
-        strike()
-        onClose?.()
-        if (!me) setItemMeAnonSats({ id: item.id, amount })
-      }
+      onPaid: closeImmediately ? undefined : onPaid
     })
     if (error) throw error
     addCustomTip(Number(amount))
-  }, [me, actor, act, item.id, onClose, abortSignal, strike])
+  }, [me, actor, !!wallet, act, item.id, onClose, abortSignal, strike])
 
   return act === 'BOOST'
     ? <BoostForm step={step} onSubmit={onSubmit} item={item} oValue={oValue} inputRef={inputRef} act={act}>{children}</BoostForm>
@@ -226,6 +235,7 @@ export function useAct ({ query = ACT_MUTATION, ...options } = {}) {
   const getPaidActionResult = data => Object.values(data)[0]
 
   const [act] = usePaidMutation(query, {
+    waitFor: inv => inv?.satsReceived > 0,
     ...options,
     update: (cache, { data }) => {
       const response = getPaidActionResult(data)

components/item-full.js

@@ -19,11 +19,13 @@ import Share from './share'
 import Toc from './table-of-contents'
 import Link from 'next/link'
 import { RootProvider } from './root'
-import { decodeProxyUrl, IMGPROXY_URL_REGEXP } from '@/lib/url'
+import { decodeProxyUrl, IMGPROXY_URL_REGEXP, parseEmbedUrl } from '@/lib/url'
 import { numWithUnits } from '@/lib/format'
 import { useQuoteReply } from './use-quote-reply'
 import { UNKNOWN_LINK_REL } from '@/lib/constants'
 import classNames from 'classnames'
+import { CarouselProvider } from './carousel'
+import Embed from './embed'
 
 function BioItem ({ item, handleClick }) {
   const { me } = useMe()
@@ -49,10 +51,18 @@ function BioItem ({ item, handleClick }) {
 }
 
 function ItemEmbed ({ url, imgproxyUrls }) {
-  const src = IMGPROXY_URL_REGEXP.test(url) ? decodeProxyUrl(url) : url
-  const srcSet = imgproxyUrls?.[url]
+  if (imgproxyUrls) {
+    const src = IMGPROXY_URL_REGEXP.test(url) ? decodeProxyUrl(url) : url
+    const srcSet = imgproxyUrls?.[url]
+    return <MediaOrLink src={src} srcSet={srcSet} topLevel linkFallback={false} />
+  }
 
-  return <MediaOrLink src={src} srcSet={srcSet} topLevel linkFallback={false} />
+  const provider = parseEmbedUrl(url)
+  if (provider) {
+    return <Embed url={url} {...provider} topLevel />
+  }
+
+  return null
 }
 
 function FwdUsers ({ forwards }) {
@@ -156,20 +166,22 @@ export default function ItemFull ({ item, bio, rank, ...props }) {
           </div>)
         : <div />}
       <RootProvider root={item.root || item}>
-        {item.parentId
-          ? <Comment topLevel item={item} replyOpen includeParent noComments {...props} />
-          : (
-            <div>{bio
-              ? <BioItem item={item} {...props} />
-              : <TopLevelItem item={item} {...props} />}
-            </div>)}
-        {item.comments &&
-          <div className={styles.comments}>
-            <Comments
-              parentId={item.id} parentCreatedAt={item.createdAt}
-              pinned={item.position} bio={bio} commentSats={item.commentSats} comments={item.comments}
-            />
-          </div>}
+        <CarouselProvider key={item.id}>
+          {item.parentId
+            ? <Comment topLevel item={item} replyOpen includeParent noComments {...props} />
+            : (
+              <div>{bio
+                ? <BioItem item={item} {...props} />
+                : <TopLevelItem item={item} {...props} />}
+              </div>)}
+          {item.comments &&
+            <div className={styles.comments}>
+              <Comments
+                parentId={item.id} parentCreatedAt={item.createdAt}
+                pinned={item.position} bio={bio} commentSats={item.commentSats} comments={item.comments}
+              />
+            </div>}
+        </CarouselProvider>
       </RootProvider>
     </>
   )

components/item-info.js

@@ -26,20 +26,20 @@ import { useQrPayment } from './payment'
 import { useRetryCreateItem } from './use-item-submit'
 import { useToast } from './toast'
 import { useShowModal } from './modal'
+import classNames from 'classnames'
 
 export default function ItemInfo ({
   item, full, commentsText = 'comments',
   commentTextSingular = 'comment', className, embellishUser, extraInfo, onEdit, editText,
-  onQuoteReply, extraBadges, nested, pinnable, showActionDropdown = true, showUser = true
+  onQuoteReply, extraBadges, nested, pinnable, showActionDropdown = true, showUser = true,
+  setDisableRetry, disableRetry
 }) {
   const editThreshold = new Date(item.invoice?.confirmedAt ?? item.createdAt).getTime() + 10 * 60000
   const { me } = useMe()
-  const toaster = useToast()
   const router = useRouter()
   const [canEdit, setCanEdit] = useState(item.mine && (Date.now() < editThreshold))
   const [hasNewComments, setHasNewComments] = useState(false)
   const root = useRoot()
-  const retryCreateItem = useRetryCreateItem({ id: item.id })
   const sub = item?.sub || root?.sub
 
   useEffect(() => {
@@ -64,72 +64,6 @@ export default function ItemInfo ({
   const canPin = (isPost && mySub) || (myPost && rootReply)
   const meSats = (me ? item.meSats : item.meAnonSats) || 0
 
-  const EditInfo = () => {
-    if (canEdit) {
-      return (
-        <>
-          <span> \ </span>
-          <span
-            className='text-reset pointer fw-bold'
-            onClick={() => onEdit ? onEdit() : router.push(`/items/${item.id}/edit`)}
-          >
-            <span>{editText || 'edit'} </span>
-            {(!item.invoice?.actionState || item.invoice?.actionState === 'PAID') &&
-              <Countdown
-                date={editThreshold}
-                onComplete={() => { setCanEdit(false) }}
-              />}
-          </span>
-        </>
-      )
-    }
-
-    return null
-  }
-
-  const PaymentInfo = () => {
-    const waitForQrPayment = useQrPayment()
-    if (item.deletedAt) return null
-
-    let Component
-    let onClick
-    if (me && item.invoice?.actionState && item.invoice?.actionState !== 'PAID') {
-      if (item.invoice?.actionState === 'FAILED') {
-        Component = () => <span className='text-warning'>retry payment</span>
-        onClick = async () => {
-          try {
-            const { error } = await retryCreateItem({ variables: { invoiceId: parseInt(item.invoice?.id) } })
-            if (error) throw error
-          } catch (error) {
-            toaster.danger(error.message)
-          }
-        }
-      } else {
-        Component = () => (
-          <span
-            className='text-info'
-          >pending
-          </span>
-        )
-        onClick = () => waitForQrPayment({ id: item.invoice?.id }, null, { cancelOnClose: false }).catch(console.error)
-      }
-    } else {
-      return null
-    }
-
-    return (
-      <>
-        <span> \ </span>
-        <span
-          className='text-reset pointer fw-bold'
-          onClick={onClick}
-        >
-          <Component />
-        </span>
-      </>
-    )
-  }
-
   return (
     <div className={className || `${styles.other}`}>
       {!(item.position && (pinnable || !item.subName)) && !(!item.parentId && Number(item.user?.id) === USER_ID.ad) &&
@@ -217,8 +151,11 @@ export default function ItemInfo ({
       {
         showActionDropdown &&
           <>
-            <EditInfo />
-            <PaymentInfo />
+            <EditInfo
+              item={item} canEdit={canEdit}
+              setCanEdit={setCanEdit} onEdit={onEdit} editText={editText} editThreshold={editThreshold}
+            />
+            <PaymentInfo item={item} disableRetry={disableRetry} setDisableRetry={setDisableRetry} />
             <ActionDropdown>
               <CopyLinkDropdownItem item={item} />
               <InfoDropdownItem item={item} />
@@ -317,3 +254,86 @@ function InfoDropdownItem ({ item }) {
     </Dropdown.Item>
   )
 }
+
+function PaymentInfo ({ item, disableRetry, setDisableRetry }) {
+  const { me } = useMe()
+  const toaster = useToast()
+  const retryCreateItem = useRetryCreateItem({ id: item.id })
+  const waitForQrPayment = useQrPayment()
+  const [disableInfoRetry, setDisableInfoRetry] = useState(disableRetry)
+  if (item.deletedAt) return null
+
+  const disableDualRetry = disableRetry || disableInfoRetry
+  function setDisableDualRetry (value) {
+    setDisableInfoRetry(value)
+    setDisableRetry?.(value)
+  }
+
+  let Component
+  let onClick
+  if (me && item.invoice?.actionState && item.invoice?.actionState !== 'PAID') {
+    if (item.invoice?.actionState === 'FAILED') {
+      Component = () => <span className={classNames('text-warning', disableDualRetry && 'pulse')}>retry payment</span>
+      onClick = async () => {
+        if (disableDualRetry) return
+        setDisableDualRetry(true)
+        try {
+          const { error } = await retryCreateItem({ variables: { invoiceId: parseInt(item.invoice?.id) } })
+          if (error) throw error
+        } catch (error) {
+          toaster.danger(error.message)
+        } finally {
+          setDisableDualRetry(false)
+        }
+      }
+    } else {
+      Component = () => (
+        <span
+          className='text-info'
+        >pending
+        </span>
+      )
+      onClick = () => waitForQrPayment({ id: item.invoice?.id }, null, { cancelOnClose: false }).catch(console.error)
+    }
+  } else {
+    return null
+  }
+
+  return (
+    <>
+      <span> \ </span>
+      <span
+        className='text-reset pointer fw-bold'
+        onClick={onClick}
+      >
+        <Component />
+      </span>
+    </>
+  )
+}
+
+function EditInfo ({ item, canEdit, setCanEdit, onEdit, editText, editThreshold }) {
+  const router = useRouter()
+
+  if (canEdit) {
+    return (
+      <>
+        <span> \ </span>
+        <span
+          className='text-reset pointer fw-bold'
+          onClick={() => onEdit ? onEdit() : router.push(`/items/${item.id}/edit`)}
+        >
+          <span>{editText || 'edit'} </span>
+          {(!item.invoice?.actionState || item.invoice?.actionState === 'PAID')
+            ? <Countdown
+                date={editThreshold}
+                onComplete={() => { setCanEdit(false) }}
+              />
+            : <span>10:00</span>}
+        </span>
+      </>
+    )
+  }
+
+  return null
+}

components/item.js

@@ -87,7 +87,7 @@ function ItemLink ({ url, rel }) {
 
 export default function Item ({
   item, rank, belowTitle, right, full, children, itemClassName,
-  onQuoteReply, pinnable
+  onQuoteReply, pinnable, setDisableRetry, disableRetry
 }) {
   const titleRef = useRef()
   const router = useRouter()
@@ -139,6 +139,8 @@ export default function Item ({
             onQuoteReply={onQuoteReply}
             pinnable={pinnable}
             extraBadges={Number(item?.user?.id) === USER_ID.ad && <Badge className={styles.newComment} bg={null}>AD</Badge>}
+            setDisableRetry={setDisableRetry}
+            disableRetry={disableRetry}
           />
           {belowTitle}
         </div>

components/media-or-link.js

@@ -1,14 +1,10 @@
 import styles from './text.module.css'
-import { useState, useEffect, useMemo, useCallback, memo, useRef } from 'react'
-import { decodeProxyUrl, IMGPROXY_URL_REGEXP, MEDIA_DOMAIN_REGEXP, parseEmbedUrl } from '@/lib/url'
-import { useShowModal } from './modal'
+import { useState, useEffect, useMemo, useCallback, memo } from 'react'
+import { decodeProxyUrl, IMGPROXY_URL_REGEXP, MEDIA_DOMAIN_REGEXP } from '@/lib/url'
 import { useMe } from './me'
-import { Button, Dropdown } from 'react-bootstrap'
 import { UNKNOWN_LINK_REL } from '@/lib/constants'
 import classNames from 'classnames'
-import { TwitterTweetEmbed } from 'react-twitter-embed'
-import YouTube from 'react-youtube'
-import useDarkMode from './dark-mode'
+import { useCarousel } from './carousel'
 
 function LinkRaw ({ href, children, src, rel }) {
   const isRawURL = /^https?:\/\//.test(children?.[0])
@@ -23,9 +19,15 @@ function LinkRaw ({ href, children, src, rel }) {
   )
 }
 
-const Media = memo(function Media ({ src, bestResSrc, srcSet, sizes, width, height, onClick, onError, style, className, video }) {
+const Media = memo(function Media ({
+  src, bestResSrc, srcSet, sizes, width,
+  height, onClick, onError, style, className, video
+}) {
   return (
-    <div className={classNames(className, styles.mediaContainer)} style={style}>
+    <div
+      className={classNames(className, styles.mediaContainer)}
+      style={style}
+    >
       {video
         ? <video
             src={src}
@@ -52,32 +54,21 @@ const Media = memo(function Media ({ src, bestResSrc, srcSet, sizes, width, heig
 export default function MediaOrLink ({ linkFallback = true, ...props }) {
   const media = useMediaHelper(props)
   const [error, setError] = useState(false)
-  const showModal = useShowModal()
+  const { showCarousel, addMedia, removeMedia } = useCarousel()
 
-  const handleClick = useCallback(() => showModal(close => {
-    return (
-      <div
-        className={styles.fullScreenContainer}
-        onClick={close}
-      >
-        <img className={styles.fullScreen} src={media.bestResSrc} />
-      </div>
-    )
-  }, {
-    fullScreen: true,
-    overflow: (
-      <Dropdown.Item
-        href={media.originalSrc} target='_blank'
-        rel={props.rel ?? UNKNOWN_LINK_REL}
-      >
-        open original
-      </Dropdown.Item>)
-  }), [showModal, media.originalSrc, styles, media.bestResSrc])
+  useEffect(() => {
+    if (!media.image) return
+    addMedia({ src: media.bestResSrc, originalSrc: media.originalSrc, rel: props.rel })
+  }, [media.image])
+
+  const handleClick = useCallback(() => showCarousel({ src: media.bestResSrc }),
+    [showCarousel, media.bestResSrc])
 
   const handleError = useCallback((err) => {
     console.error('Error loading media', err)
+    removeMedia(media.bestResSrc)
     setError(true)
-  }, [setError])
+  }, [setError, removeMedia, media.bestResSrc])
 
   if (!media.src) return null
 
@@ -89,14 +80,6 @@ export default function MediaOrLink ({ linkFallback = true, ...props }) {
         />
       )
     }
-
-    if (media.embed) {
-      return (
-        <Embed
-          {...media.embed} topLevel={props.topLevel} src={media.src} onError={handleError}
-        />
-      )
-    }
   }
 
   if (linkFallback) {
@@ -114,11 +97,10 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
   const [isImage, setIsImage] = useState(video === false && trusted)
   const [isVideo, setIsVideo] = useState(video)
   const showMedia = useMemo(() => tab === 'preview' || me?.privates?.showImagesAndVideos !== false, [tab, me?.privates?.showImagesAndVideos])
-  const embed = useMemo(() => parseEmbedUrl(src), [src])
 
   useEffect(() => {
     // don't load the video at all if user doesn't want these
-    if (!showMedia || isVideo || isImage || embed) return
+    if (!showMedia || isVideo || isImage) return
     // make sure it's not a false negative by trying to load URL as <img>
     const img = new window.Image()
     img.onload = () => setIsImage(true)
@@ -133,7 +115,7 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
       video.onloadeddata = null
       video.src = ''
     }
-  }, [src, setIsImage, setIsVideo, showMedia, isVideo, embed])
+  }, [src, setIsImage, setIsVideo, showMedia, isVideo])
 
   const srcSet = useMemo(() => {
     if (Object.keys(srcSetObj).length === 0) return undefined
@@ -182,203 +164,7 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
     style,
     width,
     height,
-    image: (!me?.privates?.imgproxyOnly || trusted) && showMedia && isImage && !isVideo && !embed,
-    video: !me?.privates?.imgproxyOnly && showMedia && isVideo && !embed,
-    embed: !me?.privates?.imgproxyOnly && showMedia && embed
+    image: (!me?.privates?.imgproxyOnly || trusted) && showMedia && isImage && !isVideo,
+    video: !me?.privates?.imgproxyOnly && showMedia && isVideo
   }
 }
-
-function TweetSkeleton ({ className }) {
-  return (
-    <div className={classNames(styles.tweetsSkeleton, className)}>
-      <div className={styles.tweetSkeleton}>
-        <div className={`${styles.img} clouds`} />
-        <div className={styles.content1}>
-          <div className={`${styles.line} clouds`} />
-          <div className={`${styles.line} clouds`} />
-          <div className={`${styles.line} clouds`} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) {
-  const [show, setShow] = useState(false)
-  const iframeRef = useRef(null)
-
-  useEffect(() => {
-    if (!iframeRef.current) return
-
-    const setHeightFromIframe = (e) => {
-      if (e.origin !== 'https://njump.me' || !e?.data?.height || e.source !== iframeRef.current.contentWindow) return
-      iframeRef.current.height = `${e.data.height}px`
-    }
-
-    window?.addEventListener('message', setHeightFromIframe)
-
-    // https://github.com/vercel/next.js/issues/39451
-    iframeRef.current.src = `https://njump.me/${id}?embed=yes`
-
-    return () => {
-      window?.removeEventListener('message', setHeightFromIframe)
-    }
-  }, [iframeRef.current])
-
-  return (
-    <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
-      <iframe
-        ref={iframeRef}
-        width={topLevel ? '550px' : '350px'}
-        style={{ maxWidth: '100%' }}
-        height={iframeRef.current?.height || (topLevel ? '200px' : '150px')}
-        frameBorder='0'
-        sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox'
-        allow=''
-      />
-      {!show &&
-        <Button size='md' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
-          <div>show full note</div>
-          <small className='fw-normal fst-italic'>or other stuff</small>
-        </Button>}
-    </div>
-  )
-})
-
-const SpotifyEmbed = function SpotifyEmbed ({ src, className }) {
-  const iframeRef = useRef(null)
-
-  // https://open.spotify.com/track/1KFxcj3MZrpBGiGA8ZWriv?si=f024c3aa52294aa1
-  // Remove any additional path segments
-  const url = new URL(src)
-  url.pathname = url.pathname.replace(/\/intl-\w+\//, '/')
-
-  useEffect(() => {
-    if (!iframeRef.current) return
-
-    const id = url.pathname.split('/').pop()
-
-    // https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api
-    window.onSpotifyIframeApiReady = (IFrameAPI) => {
-      const options = {
-        uri: `spotify:episode:${id}`
-      }
-      const callback = (EmbedController) => {}
-      IFrameAPI.createController(iframeRef.current, options, callback)
-    }
-
-    return () => { window.onSpotifyIframeApiReady = null }
-  }, [iframeRef.current, url.pathname])
-
-  return (
-    <div className={classNames(styles.spotifyWrapper, className)}>
-      <iframe
-        ref={iframeRef}
-        title='Spotify Web Player'
-        src={`https://open.spotify.com/embed${url.pathname}`}
-        width='100%'
-        height='152'
-        allowFullScreen
-        frameBorder='0'
-        allow='encrypted-media; clipboard-write;'
-        style={{ borderRadius: '12px' }}
-        sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-presentation'
-      />
-    </div>
-  )
-}
-
-export const Embed = memo(function Embed ({ src, provider, id, meta, className, topLevel, onError }) {
-  const [darkMode] = useDarkMode()
-  const [overflowing, setOverflowing] = useState(true)
-  const [show, setShow] = useState(false)
-
-  // This Twitter embed could use similar logic to the video embeds below
-  if (provider === 'twitter') {
-    return (
-      <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
-        <TwitterTweetEmbed
-          tweetId={id}
-          options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
-          key={darkMode ? '1' : '2'}
-          placeholder={<TweetSkeleton className={className} />}
-          onLoad={() => setOverflowing(true)}
-        />
-        {overflowing && !show &&
-          <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
-            show full tweet
-          </Button>}
-      </div>
-    )
-  }
-
-  if (provider === 'nostr') {
-    return (
-      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} />
-    )
-  }
-
-  if (provider === 'wavlake') {
-    return (
-      <div className={classNames(styles.wavlakeWrapper, className)}>
-        <iframe
-          src={`https://embed.wavlake.com/track/${id}`} width='100%' height='380' frameBorder='0'
-          allow='encrypted-media'
-          sandbox='allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-same-origin'
-        />
-      </div>
-    )
-  }
-
-  if (provider === 'spotify') {
-    return (
-      <SpotifyEmbed src={src} className={className} />
-    )
-  }
-
-  if (provider === 'youtube') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <YouTube
-          videoId={id} className={styles.videoContainer} opts={{
-            playerVars: {
-              start: meta?.start || 0
-            }
-          }}
-        />
-      </div>
-    )
-  }
-
-  if (provider === 'rumble') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <div className={styles.videoContainer}>
-          <iframe
-            title='Rumble Video'
-            allowFullScreen
-            src={meta?.href}
-            sandbox='allow-scripts'
-          />
-        </div>
-      </div>
-    )
-  }
-
-  if (provider === 'peertube') {
-    return (
-      <div className={classNames(styles.videoWrapper, className)}>
-        <div className={styles.videoContainer}>
-          <iframe
-            title='PeerTube Video'
-            allowFullScreen
-            src={meta?.href}
-            sandbox='allow-scripts'
-          />
-        </div>
-      </div>
-    )
-  }
-
-  return null
-})

components/modal.js

@@ -36,6 +36,14 @@ export default function useModal () {
     forceUpdate()
   }, [])
 
+  const setOptions = useCallback(options => {
+    const current = getCurrentContent()
+    if (current) {
+      current.options = { ...current.options, ...options }
+      forceUpdate()
+    }
+  }, [getCurrentContent, forceUpdate])
+
   // this is called on every navigation due to below useEffect
   const onClose = useCallback(() => {
     while (modalStack.current.length) {
@@ -94,7 +102,7 @@ export default function useModal () {
 
   const showModal = useCallback(
     (getContent, options) => {
-      const ref = { node: getContent(onClose), options }
+      const ref = { node: getContent(onClose, setOptions), options }
       if (options?.replaceModal) {
         modalStack.current = [ref]
       } else {

components/notifications.js

@@ -38,6 +38,7 @@ import { paidActionCacheMods } from './use-paid-mutation'
 import { useRetryCreateItem } from './use-item-submit'
 import { payBountyCacheMods } from './pay-bounty'
 import { useToast } from './toast'
+import classNames from 'classnames'
 
 function Notification ({ n, fresh }) {
   const type = n.__typename
@@ -102,14 +103,14 @@ function NoteHeader ({ color, children, big }) {
   )
 }
 
-function NoteItem ({ item }) {
+function NoteItem ({ item, ...props }) {
   return (
     <div>
       {item.title
-        ? <Item item={item} itemClassName='pt-0' />
+        ? <Item item={item} itemClassName='pt-0' {...props} />
         : (
           <RootProvider root={item.root}>
-            <Comment item={item} noReply includeParent clickToContext />
+            <Comment item={item} noReply includeParent clickToContext {...props} />
           </RootProvider>)}
     </div>
   )
@@ -343,7 +344,10 @@ function InvoicePaid ({ n }) {
 }
 
 function useActRetry ({ invoice }) {
-  const bountyCacheMods = invoice.item?.bounty ? payBountyCacheMods() : {}
+  const bountyCacheMods =
+    invoice.item.root?.bounty === invoice.satsRequested && invoice.item.root?.mine
+      ? payBountyCacheMods
+      : {}
   return useAct({
     query: RETRY_PAID_ACTION,
     onPayError: (e, cache, { data }) => {
@@ -383,6 +387,7 @@ function Invoicification ({ n: { invoice, sortTime } }) {
   const actRetry = useActRetry({ invoice })
   const retryCreateItem = useRetryCreateItem({ id: invoice.item?.id })
   const retryPollVote = usePollVote({ query: RETRY_PAID_ACTION, itemId: invoice.item?.id })
+  const [disableRetry, setDisableRetry] = useState(false)
   // XXX if we navigate to an invoice after it is retried in notifications
   // the cache will clear invoice.item and will error on window.back
   // alternatively, we could/should
@@ -407,7 +412,7 @@ function Invoicification ({ n: { invoice, sortTime } }) {
     invoiceActionState = invoice.item.poll?.meInvoiceActionState
   } else {
     if (invoice.actionType === 'ZAP') {
-      if (invoice.item.root?.bounty === invoice.satsRequested && invoice.item.root.mine) {
+      if (invoice.item.root?.bounty === invoice.satsRequested && invoice.item.root?.mine) {
         actionString = 'bounty payment'
       } else {
         actionString = 'zap'
@@ -443,14 +448,19 @@ function Invoicification ({ n: { invoice, sortTime } }) {
         <span className='ms-1 text-muted fw-light'> {numWithUnits(invoice.satsRequested)}</span>
         <span className={invoiceActionState === 'FAILED' ? 'visible' : 'invisible'}>
           <Button
-            size='sm' variant='outline-warning ms-2 border-1 rounded py-0'
+            size='sm' variant={classNames('outline-warning ms-2 border-1 rounded py-0', disableRetry && 'pulse')}
             style={{ '--bs-btn-hover-color': '#fff', '--bs-btn-active-color': '#fff' }}
+            disabled={disableRetry}
             onClick={async () => {
+              if (disableRetry) return
+              setDisableRetry(true)
               try {
                 const { error } = await retry({ variables: { invoiceId: parseInt(invoiceId) } })
                 if (error) throw error
               } catch (error) {
                 toaster.danger(error?.message || error?.toString?.())
+              } finally {
+                setDisableRetry(false)
               }
             }}
           >
@@ -459,7 +469,7 @@ function Invoicification ({ n: { invoice, sortTime } }) {
           <span className='text-muted ms-2 fw-normal' suppressHydrationWarning>{timeSince(new Date(sortTime))}</span>
         </span>
       </NoteHeader>
-      <NoteItem item={invoice.item} />
+      <NoteItem item={invoice.item} setDisableRetry={setDisableRetry} disableRetry={disableRetry} />
     </div>
   )
 }

components/reply.js

@@ -14,6 +14,7 @@ import { useRoot } from './root'
 import { commentSubTreeRootId } from '@/lib/item'
 import { CREATE_COMMENT } from '@/fragments/paidAction'
 import useItemSubmit from './use-item-submit'
+import gql from 'graphql-tag'
 
 export function ReplyOnAnotherPage ({ item }) {
   const rootId = commentSubTreeRootId(item)
@@ -80,6 +81,17 @@ export default forwardRef(function Reply ({
           }
         })
 
+        // no lag for itemRepetition
+        if (!item.mine && me) {
+          cache.updateQuery({
+            query: gql`{ itemRepetition(parentId: "${parentId}") }`
+          }, data => {
+            return {
+              itemRepetition: (data?.itemRepetition || 0) + 1
+            }
+          })
+        }
+
         const ancestors = item.path.split('.')
 
         // update all ancestors

components/text.js

@@ -3,18 +3,10 @@ import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
 import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
 import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
-import mention from '@/lib/remark-mention'
-import sub from '@/lib/remark-sub'
 import React, { useState, memo, useRef, useCallback, useMemo, useEffect } from 'react'
-import { slug } from 'github-slugger'
-import LinkIcon from '@/svgs/link.svg'
-import Thumb from '@/svgs/thumb-up-fill.svg'
-import { toString } from 'mdast-util-to-string'
-import copy from 'clipboard-copy'
 import MediaOrLink from './media-or-link'
-import { IMGPROXY_URL_REGEXP, parseInternalLinks, decodeProxyUrl } from '@/lib/url'
+import { IMGPROXY_URL_REGEXP, decodeProxyUrl } from '@/lib/url'
 import reactStringReplace from 'react-string-replace'
-import { rehypeInlineCodeProperty, rehypeStyler } from '@/lib/md'
 import { Button } from 'react-bootstrap'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
@@ -23,10 +15,24 @@ import isEqual from 'lodash/isEqual'
 import UserPopover from './user-popover'
 import ItemPopover from './item-popover'
 import classNames from 'classnames'
+import { CarouselProvider, useCarousel } from './carousel'
+import rehypeSN from '@/lib/rehype-sn'
+import Embed from './embed'
 
-// Explicitely defined start/end tags & which CSS class from text.module.css to apply
-export const rehypeSuperscript = () => rehypeStyler('<sup>', '</sup>', styles.superscript)
-export const rehypeSubscript = () => rehypeStyler('<sub>', '</sub>', styles.subscript)
+const rehypeSNStyled = () => rehypeSN({
+  stylers: [{
+    startTag: '<sup>',
+    endTag: '</sup>',
+    className: styles.superscript
+  }, {
+    startTag: '<sub>',
+    endTag: '</sub>',
+    className: styles.subscript
+  }]
+})
+
+const remarkPlugins = [gfm]
+const rehypePlugins = [rehypeSNStyled]
 
 export function SearchText ({ text }) {
   return (
@@ -41,16 +47,17 @@ export function SearchText ({ text }) {
 }
 
 // this is one of the slowest components to render
-export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, outlawed, topLevel, noFragments }) {
+export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, children, tab, itemId, outlawed, topLevel }) {
   const [overflowing, setOverflowing] = useState(false)
   const router = useRouter()
   const [show, setShow] = useState(false)
   const containerRef = useRef(null)
 
+  // if we are navigating to a hash, show the full text
   useEffect(() => {
-    setShow(router.asPath.includes('#'))
+    setShow(router.asPath.includes('#') && !router.asPath.includes('#itemfn-'))
     const handleRouteChange = (url, { shallow }) => {
-      setShow(url.includes('#'))
+      setShow(url.includes('#') && !url.includes('#itemfn-'))
     }
 
     router.events.on('hashChangeStart', handleRouteChange)
@@ -58,8 +65,9 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
     return () => {
       router.events.off('hashChangeStart', handleRouteChange)
     }
-  }, [router])
+  }, [router.asPath, router.events])
 
+  // clip item and give it a`show full text` button if we are overflowing
   useEffect(() => {
     const container = containerRef.current
     if (!container || overflowing) return
@@ -82,199 +90,157 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
     }
   }, [containerRef.current, setOverflowing])
 
-  const Heading = useCallback(({ children, node, ...props }) => {
-    const [copied, setCopied] = useState(false)
-    const nodeText = toString(node)
-    const id = useMemo(() => noFragments ? undefined : slug(nodeText.replace(/[^\w\-\s]+/gi, '')), [nodeText, noFragments])
-    const h = useMemo(() => {
-      if (topLevel) {
-        return node?.TagName
-      }
-
-      const h = parseInt(node?.tagName?.replace('h', '') || 0)
-      if (h < 4) return `h${h + 3}`
-
-      return 'h6'
-    }, [node, topLevel])
-    const Icon = copied ? Thumb : LinkIcon
-
-    return (
-      <span className={styles.heading}>
-        {React.createElement(h || node?.tagName, { id, ...props }, children)}
-        {!noFragments && topLevel &&
-          <a className={`${styles.headingLink} ${copied ? styles.copied : ''}`} href={`#${id}`}>
-            <Icon
-              onClick={() => {
-                const location = new URL(window.location)
-                location.hash = `${id}`
-                copy(location.href)
-                setTimeout(() => setCopied(false), 1500)
-                setCopied(true)
-              }}
-              width={18}
-              height={18}
-              className='fill-grey'
-            />
-          </a>}
-      </span>
-    )
-  }, [topLevel, noFragments])
-
-  const Table = useCallback(({ node, ...props }) =>
-    <span className='table-responsive'>
-      <table className='table table-bordered table-sm' {...props} />
-    </span>, [])
-
-  const Code = useCallback(({ node, inline, className, children, style, ...props }) => {
-    return inline
-      ? (
-        <code className={className} {...props}>
-          {children}
-        </code>
-        )
-      : (
-        <SyntaxHighlighter style={atomDark} language='text' PreTag='div' {...props}>
-          {children}
-        </SyntaxHighlighter>
-        )
-  }, [])
-
-  const P = useCallback(({ children, node, ...props }) => <div className={styles.p} {...props}>{children}</div>, [])
-
-  const TextMediaOrLink = useCallback(({ node, src, ...props }) => {
-    const url = IMGPROXY_URL_REGEXP.test(src) ? decodeProxyUrl(src) : src
-    // if outlawed, render the media link as text
-    if (outlawed) {
-      return url
-    }
-    const srcSet = imgproxyUrls?.[url]
-    return <MediaOrLink srcSet={srcSet} tab={tab} src={src} rel={rel ?? UNKNOWN_LINK_REL} {...props} topLevel={topLevel} />
-  }, [imgproxyUrls, topLevel, tab])
+  const TextMediaOrLink = useCallback(props => {
+    return <MediaLink {...props} outlawed={outlawed} imgproxyUrls={imgproxyUrls} topLevel={topLevel} rel={rel} />
+  },
+  [outlawed, imgproxyUrls, topLevel, rel])
 
   const components = useMemo(() => ({
-    h1: Heading,
-    h2: Heading,
-    h3: Heading,
-    h4: Heading,
-    h5: Heading,
-    h6: Heading,
+    h1: ({ node, id, ...props }) => <h1 id={topLevel ? id : undefined} {...props} />,
+    h2: ({ node, id, ...props }) => <h2 id={topLevel ? id : undefined} {...props} />,
+    h3: ({ node, id, ...props }) => <h3 id={topLevel ? id : undefined} {...props} />,
+    h4: ({ node, id, ...props }) => <h4 id={topLevel ? id : undefined} {...props} />,
+    h5: ({ node, id, ...props }) => <h5 id={topLevel ? id : undefined} {...props} />,
+    h6: ({ node, id, ...props }) => <h6 id={topLevel ? id : undefined} {...props} />,
     table: Table,
     p: P,
-    li: props => {
-      return <li {...props} id={props.id && itemId ? `${props.id}-${itemId}` : props.id} />
-    },
     code: Code,
+    mention: Mention,
+    sub: Sub,
+    item: Item,
+    footnote: Footnote,
+    headlink: ({ node, href, ...props }) => <Link href={href} {...props} />,
+    autolink: ({ href, ...props }) => <TextMediaOrLink src={href} {...props} />,
     a: ({ node, href, children, ...props }) => {
-      children = children ? Array.isArray(children) ? children : [children] : []
-      // don't allow zoomable images to be wrapped in links
-      if (children.some(e => e?.props?.node?.tagName === 'img')) {
-        return <>{children}</>
-      }
-
       // if outlawed, render the link as text
       if (outlawed) {
         return href
       }
 
-      // If [text](url) was parsed as <a> and text is not empty and not a link itself,
-      // we don't render it as an image since it was probably a conscious choice to include text.
-      const text = children[0]
-      let url
-      try {
-        url = !href.startsWith('/') && new URL(href)
-      } catch {
-        // ignore invalid URLs
-      }
-
-      const internalURL = process.env.NEXT_PUBLIC_URL
-      if (!!text && !/^https?:\/\//.test(text)) {
-        if (props['data-footnote-ref'] || typeof props['data-footnote-backref'] !== 'undefined') {
-          return (
-            <Link
-              {...props}
-              id={props.id && itemId ? `${props.id}-${itemId}` : props.id}
-              href={itemId ? `${href}-${itemId}` : href}
-            >{text}
-            </Link>
-          )
-        }
-        if (text.startsWith?.('@')) {
-          // user mention might be within a markdown link like this: [@user foo bar](url)
-          const name = text.replace('@', '').split(' ')[0]
-          return (
-            <UserPopover name={name}>
-              <Link
-                id={props.id}
-                href={href}
-              >
-                {text}
-              </Link>
-            </UserPopover>
-          )
-        } else if (href.startsWith('/') || url?.origin === internalURL) {
-          try {
-            const { linkText } = parseInternalLinks(href)
-            if (linkText) {
-              return (
-                <ItemPopover id={linkText.replace('#', '').split('/')[0]}>
-                  <Link href={href}>{text}</Link>
-                </ItemPopover>
-              )
-            }
-          } catch {
-            // ignore errors like invalid URLs
-          }
-
-          return (
-            <Link
-              id={props.id}
-              href={href}
-            >
-              {text}
-            </Link>
-          )
-        }
-        return (
-          // eslint-disable-next-line
-          <a id={props.id} target='_blank' rel={rel ?? UNKNOWN_LINK_REL} href={href}>{text}</a>
-        )
-      }
-
-      try {
-        const { linkText } = parseInternalLinks(href)
-        if (linkText) {
-          return (
-            <ItemPopover id={linkText.replace('#', '').split('/')[0]}>
-              <Link href={href}>{linkText}</Link>
-            </ItemPopover>
-          )
-        }
-      } catch {
-        // ignore errors like invalid URLs
-      }
-
-      // assume the link is an image which will fallback to link if it's not
-      return <TextMediaOrLink src={href} rel={rel ?? UNKNOWN_LINK_REL} {...props}>{children}</TextMediaOrLink>
+      // eslint-disable-next-line
+      return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link>
     },
-    img: TextMediaOrLink
-  }), [outlawed, rel, itemId, Code, P, Heading, Table, TextMediaOrLink])
+    img: TextMediaOrLink,
+    embed: Embed
+  }), [outlawed, rel, TextMediaOrLink, topLevel])
 
-  const remarkPlugins = useMemo(() => [gfm, mention, sub], [])
-  const rehypePlugins = useMemo(() => [rehypeInlineCodeProperty, rehypeSuperscript, rehypeSubscript], [])
+  const carousel = useCarousel()
+
+  const markdownContent = useMemo(() => (
+    <ReactMarkdown
+      components={components}
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      remarkRehypeOptions={{ clobberPrefix: `itemfn-${itemId}-` }}
+    >
+      {children}
+    </ReactMarkdown>
+  ), [components, remarkPlugins, rehypePlugins, children, itemId])
+
+  const showOverflow = useCallback(() => setShow(true), [setShow])
 
   return (
-    <div className={classNames(styles.text, topLevel && styles.topLevel, show ? styles.textUncontained : overflowing && styles.textContained)} ref={containerRef}>
-      <ReactMarkdown
-        components={components}
-        remarkPlugins={remarkPlugins}
-        rehypePlugins={rehypePlugins}
-      >
-        {children}
-      </ReactMarkdown>
-      {overflowing && !show &&
-        <Button size='lg' variant='info' className={styles.textShowFull} onClick={() => setShow(true)}>
+    <div
+      className={classNames(
+        styles.text,
+        topLevel && styles.topLevel,
+        show ? styles.textUncontained : overflowing && styles.textContained
+      )}
+      ref={containerRef}
+    >
+      {
+        carousel && tab !== 'preview'
+          ? markdownContent
+          : <CarouselProvider>{markdownContent}</CarouselProvider>
+      }
+      {overflowing && !show && (
+        <Button
+          size='lg'
+          variant='info'
+          className={styles.textShowFull}
+          onClick={showOverflow}
+        >
           show full text
-        </Button>}
+        </Button>
+      )}
     </div>
   )
 }, isEqual)
+
+function Mention ({ children, node, href, name, id }) {
+  return (
+    <UserPopover name={name}>
+      <Link
+        id={id}
+        href={href}
+      >
+        {children}
+      </Link>
+    </UserPopover>
+  )
+}
+
+function Sub ({ children, node, href, ...props }) {
+  return <Link href={href}>{children}</Link>
+}
+
+function Item ({ children, node, href, id }) {
+  return (
+    <ItemPopover id={id}>
+      <Link href={href}>{children}</Link>
+    </ItemPopover>
+  )
+}
+
+function Footnote ({ children, node, ...props }) {
+  return (
+    <Link {...props}>{children}</Link>
+  )
+}
+
+function MediaLink ({
+  node, src, outlawed, imgproxyUrls, rel = UNKNOWN_LINK_REL, ...props
+}) {
+  const url = IMGPROXY_URL_REGEXP.test(src) ? decodeProxyUrl(src) : src
+  // if outlawed, render the media link as text
+  if (outlawed) {
+    return url
+  }
+
+  const srcSet = imgproxyUrls?.[url]
+
+  return <MediaOrLink srcSet={srcSet} src={src} rel={rel} {...props} />
+}
+
+function Table ({ node, ...props }) {
+  return (
+    <span className='table-responsive'>
+      <table className='table table-bordered table-sm' {...props} />
+    </span>
+  )
+}
+
+function Code ({ node, inline, className, children, style, ...props }) {
+  return inline
+    ? (
+      <code className={className} {...props}>
+        {children}
+      </code>
+      )
+    : (
+      <SyntaxHighlighter style={atomDark} language='text' PreTag='div' {...props}>
+        {children}
+      </SyntaxHighlighter>
+      )
+}
+
+function P ({ children, node, onlyImages, somethingBefore, somethingAfter, ...props }) {
+  return (
+    <div
+      className={classNames(styles.p, onlyImages && styles.onlyImages,
+        somethingBefore && styles.somethingBefore, somethingAfter && styles.somethingAfter)} {...props}
+    >
+      {children}
+    </div>
+  )
+}

components/text.module.css

@@ -9,11 +9,16 @@
     --grid-gap: 0.5rem;
 }
 
+.text.topLevel {
+    --grid-gap: 0.75rem;
+}
 
 .text :global(.footnotes) {
     font-size: smaller;
     color: #8b949e;
     border-top: 1px solid #30363d;
+    margin-top: calc(var(--grid-gap)* 0.5);
+    padding-top: 0 !important;
 }
 
   /* Hide the section label for visual users. */
@@ -37,6 +42,12 @@
     content: ']';
 }
 
+.text :global(sup:has([data-footnote-ref])) {
+    top: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+
 .textUncontained {
     max-height: none;
 }
@@ -110,33 +121,18 @@
     display: block;
     white-space: pre-wrap;
     word-break: break-word;
-    padding-top: .25rem;
-    padding-bottom: .25rem;
-}
-
-.text.topLevel .p {
-    padding-top: .375rem;
-    padding-bottom: .375rem;
+    padding-top: calc(var(--grid-gap) * 0.5);
+    padding-bottom: calc(var(--grid-gap) * 0.5);
 }
 
 .text>*:not(.heading) {
-    padding-top: .25rem;
-    padding-bottom: .25rem;
-}
-
-.text.topLevel>*:not(.heading) {
-    padding-top: .375rem;
-    padding-bottom: .375rem;
+    padding-top: calc(var(--grid-gap) * 0.5);
+    padding-bottom: calc(var(--grid-gap) * 0.5);
 }
 
 .text pre, .text blockquote {
-    margin-top: .25rem;
-    margin-bottom: .25rem;
-}
-
-.text.topLevel pre, .text.topLevel blockquote {
-    margin-top: .375rem;
-    margin-bottom: .375rem;
+    margin-top: calc(var(--grid-gap) * 0.5);
+    margin-bottom: calc(var(--grid-gap) * 0.5);
 }
 
 .text pre>div {
@@ -168,50 +164,50 @@
 
 .mediaContainer {
     display: block;
-    width: calc(100% - var(--grid-gap));
-    max-width: calc(100% - var(--grid-gap));
+    width: 100%;
+    max-width: 100%;
     height: auto;
     overflow: hidden;
     max-height: 25vh;
     aspect-ratio: var(--aspect-ratio);
+    margin: 0;
 }
 
-.p:has(> .mediaContainer) {
-    white-space: normal;
-    padding: 0 !important;
+.mediaContainer.hasTextSiblingsBefore {
+    margin-top: var(--grid-gap);
 }
 
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child),
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) {
-    display: inline-block;
+.mediaContainer.hasTextSiblingsAfter {
+    margin-bottom: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer) .mediaContainer
+{
+    display: flex;
     width: min-content;
-    max-width: calc(100% - var(--grid-gap));
+    max-width: 100%;
 }
 
-.mediaContainer ~ .mediaContainer, .mediaContainer:has(+ .mediaContainer) {
-    display: inline-block;
-    width: min-content;
-    margin-right: var(--grid-gap);
-}
-
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child,
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child,
-.mediaContainer:first-child:has(+ .mediaContainer)  {
-    margin-right: var(--grid-gap);
-}
-
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child img,
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child img,
-.mediaContainer ~ .mediaContainer img,
-.mediaContainer:has(+ .mediaContainer) img {
+.p:has(> .mediaContainer) .mediaContainer img,
+.p:has(> .mediaContainer) .mediaContainer video
+{
     block-size: revert-layer;
     max-width: stretch;
 }
-.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child video,
-.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child video,
-.mediaContainer ~ .mediaContainer video,
-.mediaContainer:has(+ .mediaContainer) video {
-    block-size: stretch;
+
+.p.onlyImages {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--grid-gap);
+}
+
+.p.onlyImages:not(.somethingBefore) {
+    padding-top: 0;
+}
+
+.p.onlyImages:not(.somethingAfter) {
+    padding-bottom: 0;
 }
 
 .mediaContainer img, .mediaContainer video {
@@ -226,6 +222,7 @@
 .mediaContainer img {
     cursor: zoom-in;
     min-width: 30%;
+    max-width: 100%;
     object-position: left top;
 }
 
@@ -233,26 +230,6 @@
     max-height: 35vh;
 }
 
-img.fullScreen {
-    cursor: zoom-out !important;
-    max-height: 100%;
-    max-width: 100vw;
-    min-width: 0;
-    min-height: 0;
-    align-self: center;
-    justify-self: center;
-}
-
-.fullScreenContainer {
-    --bs-columns: 1;
-    --bs-rows: 1;
-    display: grid;
-    width: 100%;
-    height: 100%;
-    align-content: center;
-    justify-content: center;
-}
-
 .text table {
     width: auto;
 }
@@ -288,30 +265,29 @@ img.fullScreen {
 .text h1, .text h2, .text h3, .text h4, .text h5, .text h6 {
     margin-top: 0.75rem;
     margin-bottom: 0.5rem;
-}
-
-.text h1 {
-    font-size: 1.6rem;
-}
-
-.text h2 {
-    font-size: 1.45rem;
-}
-
-.text h3 {
-    font-size: 1.3rem;
-}
-
-.text h4 {
-    font-size: 1.15rem;
-}
-
-.text h5 {
     font-size: 1rem;
 }
 
-.text h6 {
-    font-size: .85rem;
+.text h1 a, .text h2 a, .text h3 a, .text h4 a, .text h5 a, .text h6 a {
+    text-decoration: none;
+    --bs-text-opacity: 1;
+    color: inherit !important;
+}
+
+.topLevel.text h1 {
+    font-size: 1.6rem;
+}
+
+.topLevel.text h2 {
+    font-size: 1.45rem;
+}
+
+.topLevel.text h3 {
+    font-size: 1.3rem;
+}
+
+.topLevel.text h4 {
+    font-size: 1.15rem;
 }
 
 
@@ -326,17 +302,10 @@ img.fullScreen {
     font-size: smaller;
 }
 
-.twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper, .mediaContainer {
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-}
-
-.topLevel .twitterContainer, .topLevel .nostrContainer, .topLevel .videoWrapper,
-.topLevel .wavlakeWrapper, .topLevel .spotifyWrapper, .topLevel .mediaContainer,
-:global(.topLevel) .twitterContainer, :global(.topLevel) .nostrContainer, :global(.topLevel) .videoWrapper,
-:global(.topLevel) .wavlakeWrapper, :global(.topLevel) .spotifyWrapper, :global(.topLevel) .mediaContainer {
-    margin-top: 0.375rem;
-    margin-bottom: 0.375rem;
+.twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper {
+    margin-top: calc(var(--grid-gap) * 0.5);
+    margin-bottom: calc(var(--grid-gap) * 0.5);
+    background-color: var(--theme-bg);
 }
 
 .videoWrapper {

components/use-paid-mutation.js

@@ -57,7 +57,10 @@ export function usePaidMutation (mutation,
     let { data, ...rest } = await mutate(innerOptions)
 
     // use the most inner callbacks/options if they exist
-    const { onPaid, onPayError, forceWaitForPayment, persistOnNavigate, update } = { ...options, ...innerOptions }
+    const {
+      onPaid, onPayError, forceWaitForPayment, persistOnNavigate,
+      update, waitFor = inv => inv?.actionState === 'PAID'
+    } = { ...options, ...innerOptions }
     const ourOnCompleted = innerOnCompleted || onCompleted
 
     // get invoice without knowing the mutation name
@@ -95,7 +98,7 @@ export function usePaidMutation (mutation,
         // the action is pessimistic
         try {
           // wait for the invoice to be paid
-          await waitForPayment(invoice, { alwaysShowQROnFailure: true, persistOnNavigate, waitFor: inv => inv?.actionState === 'PAID' })
+          await waitForPayment(invoice, { alwaysShowQROnFailure: true, persistOnNavigate, waitFor })
           if (!response.result) {
             // if the mutation didn't return any data, ie pessimistic, we need to fetch it
             const { data: { paidAction } } = await getPaidAction({ variables: { invoiceId: parseInt(invoice.id) } })

lib/md.js

@@ -19,45 +19,6 @@ export function mdHas (md, test) {
   return found
 }
 
-export function rehypeInlineCodeProperty () {
-  return function (tree) {
-    visit(tree, { tagName: 'code' }, function (node, index, parent) {
-      if (parent && parent.tagName === 'pre') {
-        node.properties.inline = false
-      } else {
-        node.properties.inline = true
-      }
-    })
-  }
-}
-
-export function rehypeStyler (startTag, endTag, className) {
-  return function (tree) {
-    visit(tree, 'element', (node) => {
-      for (let i = 0; i < node.children.length; i += 1) {
-        const start = node.children[i]
-        const text = node.children[i + 1]
-        const end = node.children[i + 2]
-
-        // is this a children slice wrapped with the tags we're looking for?
-        const isWrapped =
-          start?.type === 'raw' && start?.value === startTag &&
-          text?.type === 'text' &&
-          end?.type === 'raw' && end?.value === endTag
-        if (!isWrapped) continue
-
-        const newChildren = {
-          type: 'element',
-          tagName: 'span',
-          properties: { className: [className] },
-          children: [{ type: 'text', value: text.value }]
-        }
-        node.children.splice(i, 3, newChildren)
-      }
-    })
-  }
-}
-
 export function extractUrls (md) {
   if (!md) return []
   const tree = fromMarkdown(md, {

lib/rehype-sn.js

@@ -0,0 +1,277 @@
+import { SKIP, visit } from 'unist-util-visit'
+import { parseEmbedUrl, parseInternalLinks } from './url'
+import { slug } from 'github-slugger'
+import { toString } from 'mdast-util-to-string'
+
+const userGroup = '[\\w_]+'
+const subGroup = '[A-Za-z][\\w_]+'
+
+const mentionRegex = new RegExp('@(' + userGroup + '(?:\\/' + userGroup + ')?)', 'gi')
+const subRegex = new RegExp('~(' + subGroup + '(?:\\/' + subGroup + ')?)', 'gi')
+const nostrIdRegex = /\b((npub1|nevent1|nprofile1|note1|naddr1)[02-9ac-hj-np-z]+)\b/g
+
+export default function rehypeSN (options = {}) {
+  const { stylers = [] } = options
+
+  return function transformer (tree) {
+    try {
+      visit(tree, (node, index, parent) => {
+        // Handle inline code property
+        if (node.tagName === 'code') {
+          node.properties.inline = !(parent && parent.tagName === 'pre')
+        }
+
+        // handle headings
+        if (node.type === 'element' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.tagName) && !node.properties.id) {
+          const nodeText = toString(node)
+          const headingId = slug(nodeText.replace(/[^\w\-\s]+/gi, ''))
+          node.properties.id = headingId
+
+          // Create a new link element
+          const linkElement = {
+            type: 'element',
+            tagName: 'headlink',
+            properties: {
+              href: `#${headingId}`
+            },
+            children: [{ type: 'text', value: nodeText }]
+          }
+
+          // Replace the heading's children with the new link element
+          node.children = [linkElement]
+          return [SKIP]
+        }
+
+        // if img is wrapped in a link, remove the link
+        if (node.tagName === 'a' && node.children.length === 1 && node.children[0].tagName === 'img') {
+          parent.children[index] = node.children[0]
+          return index
+        }
+
+        // handle internal links
+        if (node.tagName === 'a') {
+          try {
+            if (node.properties.href.includes('#itemfn-')) {
+              node.tagName = 'footnote'
+            } else {
+              const { itemId, linkText } = parseInternalLinks(node.properties.href)
+              if (itemId) {
+                node.tagName = 'item'
+                node.properties.id = itemId
+                if (node.properties.href === toString(node)) {
+                  node.children[0].value = linkText
+                }
+              }
+            }
+          } catch {
+            // ignore errors like invalid URLs
+          }
+        }
+
+        // only show a link as an embed if it doesn't have text siblings
+        if (node.tagName === 'a' &&
+                  !parent.children.some(s => s.type === 'text' && s.value.trim()) &&
+                  toString(node) === node.properties.href) {
+          const embed = parseEmbedUrl(node.properties.href)
+          if (embed) {
+            node.tagName = 'embed'
+            node.properties = { ...embed, src: node.properties.href }
+          } else {
+            node.tagName = 'autolink'
+          }
+        }
+
+        // if the link text is a URL, just show the URL
+        if (node.tagName === 'a' && isMisleadingLink(toString(node), node.properties.href)) {
+          node.children = [{ type: 'text', value: node.properties.href }]
+          return [SKIP]
+        }
+
+        // Handle @mentions and ~subs
+        if (node.type === 'text') {
+          const newChildren = []
+          let lastIndex = 0
+          let match
+          let childrenConsumed = 1
+          let text = toString(node)
+
+          const combinedRegex = new RegExp(mentionRegex.source + '|' + subRegex.source, 'gi')
+
+          // handle @__username__ or ~__sub__
+          if (['@', '~'].includes(node.value) &&
+            parent.children[index + 1]?.tagName === 'strong' &&
+            parent.children[index + 1].children[0]?.type === 'text') {
+            childrenConsumed = 2
+            text = node.value + '__' + toString(parent.children[index + 1]) + '__'
+          }
+
+          while ((match = combinedRegex.exec(text)) !== null) {
+            if (lastIndex < match.index) {
+              newChildren.push({ type: 'text', value: text.slice(lastIndex, match.index) })
+            }
+
+            const [fullMatch, mentionMatch, subMatch] = match
+            const replacement = mentionMatch ? replaceMention(fullMatch, mentionMatch) : replaceSub(fullMatch, subMatch)
+
+            if (replacement) {
+              newChildren.push(replacement)
+            } else {
+              newChildren.push({ type: 'text', value: fullMatch })
+            }
+
+            lastIndex = combinedRegex.lastIndex
+          }
+
+          if (newChildren.length > 0) {
+            if (lastIndex < text.length) {
+              newChildren.push({ type: 'text', value: text.slice(lastIndex) })
+            }
+            parent.children.splice(index, childrenConsumed, ...newChildren)
+            return index + newChildren.length
+          }
+        }
+
+        // Handle Nostr IDs
+        if (node.type === 'text') {
+          const newChildren = []
+          let lastIndex = 0
+          let match
+
+          while ((match = nostrIdRegex.exec(node.value)) !== null) {
+            if (lastIndex < match.index) {
+              newChildren.push({ type: 'text', value: node.value.slice(lastIndex, match.index) })
+            }
+
+            newChildren.push(replaceNostrId(match[0], match[0]))
+
+            lastIndex = nostrIdRegex.lastIndex
+          }
+
+          if (lastIndex < node.value.length) {
+            newChildren.push({ type: 'text', value: node.value.slice(lastIndex) })
+          }
+
+          if (newChildren.length > 0) {
+            parent.children.splice(index, 1, ...newChildren)
+            return index + newChildren.length
+          }
+        }
+
+        // handle custom tags
+        if (node.type === 'element') {
+          for (const { startTag, endTag, className } of stylers) {
+            for (let i = 0; i < node.children.length - 2; i++) {
+              const [start, text, end] = node.children.slice(i, i + 3)
+
+              if (start?.type === 'raw' && start?.value === startTag &&
+                  text?.type === 'text' &&
+                  end?.type === 'raw' && end?.value === endTag) {
+                const newChild = {
+                  type: 'element',
+                  tagName: 'span',
+                  properties: { className: [className] },
+                  children: [{ type: 'text', value: text.value }]
+                }
+                node.children.splice(i, 3, newChild)
+              }
+            }
+          }
+        }
+
+        // merge adjacent images and empty paragraphs into a single image collage
+        if ((node.tagName === 'img' || isImageOnlyParagraph(node)) && Array.isArray(parent.children)) {
+          const adjacentNodes = [node]
+          let nextIndex = index + 1
+          const siblings = parent.children
+          const somethingBefore = parent.children[index - 1] && parent.children[index - 1].tagName !== 'p'
+          let somethingAfter = false
+
+          while (nextIndex < siblings.length) {
+            const nextNode = siblings[nextIndex]
+            if (!nextNode) break
+            if (nextNode.tagName === 'img' || isImageOnlyParagraph(nextNode)) {
+              adjacentNodes.push(nextNode)
+              nextIndex++
+            } else if (nextNode.type === 'text' && typeof nextNode.value === 'string' && !nextNode.value.trim()) {
+              nextIndex++
+            } else {
+              somethingAfter = true
+              break
+            }
+          }
+
+          if (adjacentNodes.length > 0) {
+            const allImages = adjacentNodes.flatMap(n =>
+              n.tagName === 'img' ? [n] : (Array.isArray(n.children) ? n.children.filter(child => child.tagName === 'img') : [])
+            )
+            const collageNode = {
+              type: 'element',
+              tagName: 'p',
+              children: allImages,
+              properties: { onlyImages: true, somethingBefore, somethingAfter }
+            }
+            parent.children.splice(index, nextIndex - index, collageNode)
+            return index + 1
+          }
+        }
+      })
+    } catch (error) {
+      console.error('Error in rehypeSN transformer:', error)
+    }
+
+    return tree
+  }
+
+  function isImageOnlyParagraph (node) {
+    return node &&
+        node.tagName === 'p' &&
+        Array.isArray(node.children) &&
+        node.children.every(child =>
+          (child.tagName === 'img') ||
+          (child.type === 'text' && typeof child.value === 'string' && !child.value.trim())
+        )
+  }
+
+  function replaceMention (value, username) {
+    return {
+      type: 'element',
+      tagName: 'mention',
+      properties: { href: '/' + username, name: username },
+      children: [{ type: 'text', value }]
+    }
+  }
+
+  function replaceSub (value, sub) {
+    return {
+      type: 'element',
+      tagName: 'sub',
+      properties: { href: '/~' + sub, name: sub },
+      children: [{ type: 'text', value }]
+    }
+  }
+
+  function isMisleadingLink (text, href) {
+    let misleading = false
+
+    if (/^\s*(\w+\.)+\w+/.test(text)) {
+      try {
+        const hrefUrl = new URL(href)
+
+        if (new URL(hrefUrl.protocol + text).origin !== hrefUrl.origin) {
+          misleading = true
+        }
+      } catch {}
+    }
+
+    return misleading
+  }
+
+  function replaceNostrId (value, id) {
+    return {
+      type: 'element',
+      tagName: 'a',
+      properties: { href: `https://njump.me/${id}` },
+      children: [{ type: 'text', value }]
+    }
+  }
+}

lib/remark-mention.js

@@ -1,38 +0,0 @@
-import { findAndReplace } from 'mdast-util-find-and-replace'
-
-const userGroup = '[\\w_]+'
-
-const mentionRegex = new RegExp(
-  '@(' + userGroup + '(?:\\/' + userGroup + ')?)',
-  'gi'
-)
-
-export default function mention (options) {
-  return function transformer (tree) {
-    findAndReplace(
-      tree,
-      [
-        [mentionRegex, replaceMention]
-      ],
-      { ignore: ['link', 'linkReference'] }
-    )
-  }
-
-  function replaceMention (value, username, match) {
-    if (
-      /[\w`]/.test(match.input.charAt(match.index - 1)) ||
-      /[/\w`]/.test(match.input.charAt(match.index + value.length))
-    ) {
-      return false
-    }
-
-    const node = { type: 'text', value }
-
-    return {
-      type: 'link',
-      title: null,
-      url: '/' + username,
-      children: [node]
-    }
-  }
-}

lib/remark-sub.js

@@ -1,38 +0,0 @@
-import { findAndReplace } from 'mdast-util-find-and-replace'
-
-const subGroup = '[A-Za-z][\\w_]+'
-
-const subRegex = new RegExp(
-  '~(' + subGroup + '(?:\\/' + subGroup + ')?)',
-  'gi'
-)
-
-export default function sub (options) {
-  return function transformer (tree) {
-    findAndReplace(
-      tree,
-      [
-        [subRegex, replaceSub]
-      ],
-      { ignore: ['link', 'linkReference'] }
-    )
-  }
-
-  function replaceSub (value, sub, match) {
-    if (
-      /[\w`]/.test(match.input.charAt(match.index - 1)) ||
-      /[/\w`]/.test(match.input.charAt(match.index + value.length))
-    ) {
-      return false
-    }
-
-    const node = { type: 'text', value }
-
-    return {
-      type: 'link',
-      title: null,
-      url: '/~' + sub,
-      children: [node]
-    }
-  }
-}

lib/url.js

@@ -177,7 +177,7 @@ export function parseEmbedUrl (href) {
       }
     }
   } catch (err) {
-    console.error('Error parsing embed URL:', err)
+    console.log('Error parsing embed URL:', href)
   }
 
   return null

styles/globals.scss

@@ -263,6 +263,20 @@ $zindex-sticky: 900;
   justify-self: center;
 }
 
+.pulse {
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  animation-duration: 0.66s;
+  animation-direction: alternate;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 42%;
+  }
+}
+
 svg {
   fill: var(--bs-body-color);
 }
@@ -926,6 +940,10 @@ div[contenteditable]:focus,
   animation: flipX 2s linear infinite;
 }
 
+.topLevel {
+  --grid-gap: 0.75rem;
+}
+
 @keyframes flipY {
   from {
     transform: rotateY(0deg);

svgs/arrow-right-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path></svg>

worker/index.js

@@ -104,10 +104,6 @@ async function work () {
     await boss.work('paidActionCanceling', jobWrapper(paidActionCanceling))
     await boss.work('paidActionFailed', jobWrapper(paidActionFailed))
     await boss.work('paidActionPaid', jobWrapper(paidActionPaid))
-    // we renamed these jobs so we leave them so they can "migrate"
-    await boss.work('holdAction', jobWrapper(paidActionHeld))
-    await boss.work('settleActionError', jobWrapper(paidActionFailed))
-    await boss.work('settleAction', jobWrapper(paidActionPaid))
   }
   if (isServiceEnabled('search')) {
     await boss.work('indexItem', jobWrapper(indexItem))