feat: collapse long replies and profile bios

src/components/Collapsible/index.tsx

@@ -1,10 +1,12 @@
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function Collapsible({
   alwaysExpand = false,
   children,
+  className,
   threshold = 1000,
   collapsedHeight = 600,
   ...props
@@ -45,9 +47,10 @@ export default function Collapsible({
   }, [alwaysExpand, shouldCollapse])
 
   return (
-    <div ref={containerRef} {...props}>
     <div
-        className="relative text-left overflow-hidden"
+      className={cn('relative text-left overflow-hidden', className)}
+      ref={containerRef}
+      {...props}
       style={{
         maxHeight: !shouldCollapse || expanded ? 'none' : `${collapsedHeight}px`
       }}
@@ -69,6 +72,5 @@ export default function Collapsible({
         </div>
       )}
     </div>
-    </div>
   )
 }

src/components/ReplyNote/index.tsx

@@ -12,6 +12,7 @@ import NoteStats from '../NoteStats'
 import ParentNotePreview from '../ParentNotePreview'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
+import Collapsible from '../Collapsible'
 
 export default function ReplyNote({
   event,
@@ -35,10 +36,12 @@ export default function ReplyNote({
 
   return (
     <div
-      className={`flex space-x-2 items-start px-4 py-3 border-b transition-colors duration-500 clickable ${highlight ? 'bg-primary/50' : ''}`}
+      className={`pb-3 border-b transition-colors duration-500 clickable ${highlight ? 'bg-primary/50' : ''}`}
       onClick={() => push(toNote(event))}
     >
-      <UserAvatar userId={event.pubkey} size="small" className="shrink-0" />
+      <Collapsible threshold={600} collapsedHeight={400}>
+        <div className="flex space-x-2 items-start px-4 pt-3">
+          <UserAvatar userId={event.pubkey} className="shrink-0 h-8 w-8" />
           <div className="w-full overflow-hidden">
             <div className="flex items-start justify-between gap-2">
               <div className="flex gap-2 items-center flex-1">
@@ -64,10 +67,7 @@ export default function ReplyNote({
               />
             )}
             {show ? (
-          <>
               <Content className="mt-2" event={event} />
-            <NoteStats className="mt-2" event={event} displayTopZapsAndLikes />
-          </>
             ) : (
               <Button
                 variant="outline"
@@ -79,5 +79,8 @@ export default function ReplyNote({
             )}
           </div>
         </div>
+      </Collapsible>
+      {show && <NoteStats className="ml-14 mr-4 mt-2" event={event} displayTopZapsAndLikes />}
+    </div>
   )
 }

src/pages/secondary/ProfilePage/index.tsx

@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next'
 import NotFoundPage from '../NotFoundPage'
 import Followings from './Followings'
 import Relays from './Relays'
+import Collapsible from '@/components/Collapsible'
 
 const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref) => {
   const { t } = useTranslation()
@@ -116,10 +117,12 @@ const ProfilePage = forwardRef(({ id, index }: { id?: string; index?: number },
             <PubkeyCopy pubkey={pubkey} />
             <QrCodePopover pubkey={pubkey} />
           </div>
+          <Collapsible>
             <ProfileAbout
               about={about}
               className="text-wrap break-words whitespace-pre-wrap mt-2 select-text"
             />
+          </Collapsible>
           {website && (
             <div className="flex gap-1 items-center text-primary mt-2 truncate select-text">
               <Link size={14} className="shrink-0" />