feat: collapse long notes

src/components/Note/index.tsx

@@ -9,7 +9,6 @@ import Content from '../Content'
 import { FormattedTimestamp } from '../FormattedTimestamp'
 import ImageGallery from '../ImageGallery'
 import NoteOptions from '../NoteOptions'
-import NoteStats from '../NoteStats'
 import ParentNotePreview from '../ParentNotePreview'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
@@ -18,16 +17,12 @@ export default function Note({
   event,
   size = 'normal',
   className,
-  hideParentNotePreview = false,
-  hideStats = false,
-  fetchNoteStats = false
+  hideParentNotePreview = false
 }: {
   event: Event
   size?: 'normal' | 'small'
   className?: string
   hideParentNotePreview?: boolean
-  hideStats?: boolean
-  fetchNoteStats?: boolean
 }) {
   const { push } = useSecondaryPage()
   const parentEventId = useMemo(
@@ -78,9 +73,6 @@ export default function Note({
       {event.kind === ExtendedKind.PICTURE && imageInfos.length > 0 && (
         <ImageGallery images={imageInfos} />
       )}
-      {!hideStats && (
-        <NoteStats className="mt-3" event={event} fetchIfNotExisting={fetchNoteStats} />
-      )}
     </div>
   )
 }

src/components/NoteCard/MainNoteCard.tsx

@@ -1,8 +1,13 @@
+import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { toNote } from '@/lib/link'
+import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
 import { Event } from 'nostr-tools'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import Note from '../Note'
+import NoteStats from '../NoteStats'
 import RepostDescription from './RepostDescription'
 
 export default function MainNoteCard({
@@ -16,20 +21,77 @@ export default function MainNoteCard({
   reposter?: string
   embedded?: boolean
 }) {
+  const { t } = useTranslation()
   const { push } = useSecondaryPage()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [expanded, setExpanded] = useState(false)
+  const [shouldCollapse, setShouldCollapse] = useState(false)
+
+  useEffect(() => {
+    if (embedded || shouldCollapse) return
+
+    const contentEl = containerRef.current
+    if (!contentEl) return
+
+    const checkHeight = () => {
+      const fullHeight = contentEl.scrollHeight
+      if (fullHeight > 900) {
+        setShouldCollapse(true)
+      }
+    }
+
+    checkHeight()
+
+    const observer = new ResizeObserver(() => {
+      checkHeight()
+    })
+
+    observer.observe(contentEl)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [embedded, shouldCollapse])
+
   return (
     <div
+      ref={containerRef}
       className={className}
       onClick={(e) => {
         e.stopPropagation()
         push(toNote(event))
       }}
     >
-      <div
-        className={`clickable text-left ${embedded ? 'p-2 sm:p-3 border rounded-lg' : 'px-4 py-3'}`}
-      >
-        <RepostDescription reposter={reposter} />
-        <Note size={embedded ? 'small' : 'normal'} event={event} hideStats={embedded} />
+      <div className={`clickable ${embedded ? 'p-2 sm:p-3 border rounded-lg' : 'py-3'}`}>
+        <div
+          className="relative text-left overflow-hidden"
+          style={{
+            maxHeight: !shouldCollapse || expanded ? 'none' : '600px'
+          }}
+        >
+          <RepostDescription className={embedded ? '' : 'px-4'} reposter={reposter} />
+          <Note
+            className={embedded ? '' : 'px-4'}
+            size={embedded ? 'small' : 'normal'}
+            event={event}
+          />
+          {shouldCollapse && !expanded && (
+            <div className="absolute bottom-0 h-20 w-full bg-gradient-to-b from-transparent to-muted flex items-center justify-center">
+              <div className="bg-background rounded-md">
+                <Button
+                  className="bg-foreground hover:bg-foreground/80"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setExpanded(!expanded)
+                  }}
+                >
+                  {t('Show more')}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+        {!embedded && <NoteStats className={cn('mt-3', embedded ? '' : 'px-4')} event={event} />}
       </div>
       {!embedded && <Separator />}
     </div>

src/components/PostEditor/NormalPostContent.tsx

@@ -119,7 +119,7 @@ export default function NormalPostContent({
       {parentEvent && (
         <ScrollArea className="flex max-h-48 flex-col overflow-y-auto rounded-lg border bg-muted/40">
           <div className="p-2 sm:p-3 pointer-events-none">
-            <Note size="small" event={parentEvent} hideStats hideParentNotePreview />
+            <Note size="small" event={parentEvent} hideParentNotePreview />
           </div>
         </ScrollArea>
       )}