From 0cf7f93482a4a4f39bfd5f98477423d83e80e699 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 3 Oct 2025 10:29:17 +0200
Subject: [PATCH] refactor: split BookmarkItem into separate view components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract CompactView, LargeView, and CardView into separate files
- Keep all files under 210 lines (BookmarkItem: 307→105 lines)
- Improve code organization and maintainability
- Add shared type definitions for view components
- Keep DRY with shared props object
---
 src/components/BookmarkItem.tsx              | 245 ++-----------------
 src/components/BookmarkViews/CardView.tsx    | 153 ++++++++++++
 src/components/BookmarkViews/CompactView.tsx |  71 ++++++
 src/components/BookmarkViews/LargeView.tsx   |  94 +++++++
 src/components/BookmarkViews/shared.ts       |   4 +
 5 files changed, 344 insertions(+), 223 deletions(-)
 create mode 100644 src/components/BookmarkViews/CardView.tsx
 create mode 100644 src/components/BookmarkViews/CompactView.tsx
 create mode 100644 src/components/BookmarkViews/LargeView.tsx
 create mode 100644 src/components/BookmarkViews/shared.ts

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 6423d38b..c82ce4de 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -1,18 +1,16 @@
 import React, { useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBookmark, faUserLock } from '@fortawesome/free-solid-svg-icons'
-import { faChevronDown, faChevronUp, faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons'
-import IconButton from './IconButton'
+import { faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { npubEncode, neventEncode } from 'nostr-tools/nip19'
 import { IndividualBookmark } from '../types/bookmarks'
-import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
-import ContentWithResolvedProfiles from './ContentWithResolvedProfiles'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
 import { classifyUrl } from '../utils/helpers'
 import { ViewMode } from './Bookmarks'
 import { getPreviewImage, fetchOgImage } from '../utils/imagePreview'
+import { CompactView } from './BookmarkViews/CompactView'
+import { LargeView } from './BookmarkViews/LargeView'
+import { CardView } from './BookmarkViews/CardView'
 
 interface BookmarkItemProps {
   bookmark: IndividualBookmark
@@ -22,10 +20,7 @@ interface BookmarkItemProps {
 }
 
 export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl, viewMode = 'cards' }) => {
-  const [expanded, setExpanded] = useState(false)
-  const [urlsExpanded, setUrlsExpanded] = useState(false)
   const [ogImage, setOgImage] = useState<string | null>(null)
-  // removed copy-to-clipboard buttons
 
   const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
   
@@ -42,8 +37,6 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       fetchOgImage(firstUrl).then(setOgImage)
     }
   }, [viewMode, firstUrl, instantPreview, ogImage])
-  const contentLength = (bookmark.content || '').length
-  const shouldTruncate = !expanded && contentLength > 210
 
   // Resolve author profile using applesauce
   const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
@@ -85,222 +78,28 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
     }
   }
 
-  // Compact view rendering
-  if (viewMode === 'compact') {
-    const handleCompactClick = () => {
-      if (hasUrls && onSelectUrl) {
-        onSelectUrl(extractedUrls[0])
-      }
-    }
-
-    return (
-      <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-        <div 
-          className={`compact-row ${hasUrls ? 'clickable' : ''}`}
-          onClick={handleCompactClick}
-          role={hasUrls ? 'button' : undefined}
-          tabIndex={hasUrls ? 0 : undefined}
-        >
-          <span className="bookmark-type-compact">
-            {bookmark.isPrivate ? (
-              <>
-                <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-                <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
-              </>
-            ) : (
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-            )}
-          </span>
-          {bookmark.content && (
-            <div className="compact-text">
-              <ContentWithResolvedProfiles content={bookmark.content.slice(0, 60) + (bookmark.content.length > 60 ? '…' : '')} />
-            </div>
-          )}
-          <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
-          {hasUrls && (
-            <button
-              className="compact-read-btn"
-              onClick={(e) => { e.stopPropagation(); onSelectUrl?.(extractedUrls[0]) }}
-              title={firstUrlClassification?.buttonText}
-            >
-              <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
-            </button>
-          )}
-        </div>
-      </div>
-    )
+  const sharedProps = {
+    bookmark,
+    index,
+    hasUrls,
+    extractedUrls,
+    onSelectUrl,
+    getIconForUrlType,
+    firstUrlClassification,
+    authorNpub,
+    eventNevent,
+    getAuthorDisplayName,
+    handleReadNow
+  }
+
+  if (viewMode === 'compact') {
+    return <CompactView {...sharedProps} />
   }
 
-  // Large preview view rendering
   if (viewMode === 'large') {
     const previewImage = instantPreview || ogImage
-    
-    return (
-      <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-        {hasUrls && (
-          <div 
-            className="large-preview-image" 
-            onClick={() => onSelectUrl?.(extractedUrls[0])}
-            style={previewImage ? { backgroundImage: `url(${previewImage})` } : undefined}
-          >
-            {!previewImage && (
-              <div className="preview-placeholder">
-                <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
-              </div>
-            )}
-          </div>
-        )}
-        
-        <div className="large-content">
-          {bookmark.content && (
-            <div className="large-text">
-              <ContentWithResolvedProfiles content={bookmark.content} />
-            </div>
-          )}
-          
-          <div className="large-footer">
-            <span className="large-author">
-              <a
-                href={`https://search.dergigi.com/p/${authorNpub}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="author-link-minimal"
-              >
-                {getAuthorDisplayName()}
-              </a>
-            </span>
-            
-            {eventNevent && (
-              <a
-                href={`https://search.dergigi.com/e/${eventNevent}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="bookmark-date-link"
-              >
-                {formatDate(bookmark.created_at)}
-              </a>
-            )}
-            
-            {hasUrls && firstUrlClassification && (
-              <button className="large-read-button" onClick={handleReadNow}>
-                <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
-                {firstUrlClassification.buttonText}
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    )
+    return <LargeView {...sharedProps} previewImage={previewImage} />
   }
 
-  // Card view rendering (default)
-  return (
-    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
-      <div className="bookmark-header">
-        <span className="bookmark-type">
-          {bookmark.isPrivate ? (
-            <>
-              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
-            </>
-          ) : (
-            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
-          )}
-        </span>
-        
-        {eventNevent ? (
-          <a
-            href={`https://search.dergigi.com/e/${eventNevent}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="bookmark-date-link"
-            title="Open event in search"
-          >
-            {formatDate(bookmark.created_at)}
-          </a>
-        ) : (
-          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
-        )}
-      </div>
-      
-      {extractedUrls.length > 0 && (
-        <div className="bookmark-urls">
-          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
-            const classification = classifyUrl(url)
-            return (
-              <div key={urlIndex} className="url-row">
-                <button
-                  className="bookmark-url"
-                  onClick={() => onSelectUrl?.(url)}
-                  title="Open in reader"
-                >
-                  {url}
-                </button>
-                <IconButton
-                  icon={getIconForUrlType(url)}
-                  ariaLabel={classification.buttonText}
-                  title={classification.buttonText}
-                  variant="success"
-                  size={32}
-                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
-                />
-              </div>
-            )
-          })}
-          {extractedUrls.length > 1 && (
-            <button
-              className="expand-toggle-urls"
-              onClick={() => setUrlsExpanded(v => !v)}
-              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
-              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
-            >
-              {urlsExpanded ? `Hide ${extractedUrls.length - 1} more` : `Show ${extractedUrls.length - 1} more`}
-            </button>
-          )}
-        </div>
-      )}
-      
-      {bookmark.parsedContent ? (
-        <div className="bookmark-content">
-          {shouldTruncate && bookmark.content
-            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
-            : renderParsedContent(bookmark.parsedContent)}
-        </div>
-      ) : bookmark.content && (
-        <div className="bookmark-content">
-          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
-        </div>
-      )}
-
-      {contentLength > 210 && (
-        <button
-          className="expand-toggle"
-          onClick={() => setExpanded(v => !v)}
-          aria-label={expanded ? 'Collapse' : 'Expand'}
-          title={expanded ? 'Collapse' : 'Expand'}
-        >
-          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
-        </button>
-      )}
-      
-      <div className="bookmark-footer">
-        <div className="bookmark-meta-minimal">
-          <a
-            href={`https://search.dergigi.com/p/${authorNpub}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="author-link-minimal"
-            title="Open author in search"
-          >
-            {getAuthorDisplayName()}
-          </a>
-        </div>
-        {hasUrls && firstUrlClassification && (
-          <button className="read-now-button-minimal" onClick={handleReadNow}>
-            {firstUrlClassification.buttonText}
-          </button>
-        )}
-      </div>
-    </div>
-  )
+  return <CardView {...sharedProps} />
 }
diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
new file mode 100644
index 00000000..278e5ce8
--- /dev/null
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faUserLock, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { IndividualBookmark } from '../../types/bookmarks'
+import { formatDate, renderParsedContent } from '../../utils/bookmarkUtils'
+import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import IconButton from '../IconButton'
+import { classifyUrl } from '../../utils/helpers'
+import { IconGetter } from './shared'
+
+interface CardViewProps {
+  bookmark: IndividualBookmark
+  index: number
+  hasUrls: boolean
+  extractedUrls: string[]
+  onSelectUrl?: (url: string) => void
+  getIconForUrlType: IconGetter
+  firstUrlClassification: { buttonText: string } | null
+  authorNpub: string
+  eventNevent?: string
+  getAuthorDisplayName: () => string
+  handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const CardView: React.FC<CardViewProps> = ({
+  bookmark,
+  index,
+  hasUrls,
+  extractedUrls,
+  onSelectUrl,
+  getIconForUrlType,
+  firstUrlClassification,
+  authorNpub,
+  eventNevent,
+  getAuthorDisplayName,
+  handleReadNow
+}) => {
+  const [expanded, setExpanded] = useState(false)
+  const [urlsExpanded, setUrlsExpanded] = useState(false)
+  const contentLength = (bookmark.content || '').length
+  const shouldTruncate = !expanded && contentLength > 210
+
+  return (
+    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+      <div className="bookmark-header">
+        <span className="bookmark-type">
+          {bookmark.isPrivate ? (
+            <>
+              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
+            </>
+          ) : (
+            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+          )}
+        </span>
+        
+        {eventNevent ? (
+          <a
+            href={`https://search.dergigi.com/e/${eventNevent}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bookmark-date-link"
+            title="Open event in search"
+          >
+            {formatDate(bookmark.created_at)}
+          </a>
+        ) : (
+          <span className="bookmark-date">{formatDate(bookmark.created_at)}</span>
+        )}
+      </div>
+      
+      {extractedUrls.length > 0 && (
+        <div className="bookmark-urls">
+          {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 1)).map((url, urlIndex) => {
+            const classification = classifyUrl(url)
+            return (
+              <div key={urlIndex} className="url-row">
+                <button
+                  className="bookmark-url"
+                  onClick={() => onSelectUrl?.(url)}
+                  title="Open in reader"
+                >
+                  {url}
+                </button>
+                <IconButton
+                  icon={getIconForUrlType(url)}
+                  ariaLabel={classification.buttonText}
+                  title={classification.buttonText}
+                  variant="success"
+                  size={32}
+                  onClick={(e) => { e.preventDefault(); onSelectUrl?.(url) }}
+                />
+              </div>
+            )
+          })}
+          {extractedUrls.length > 1 && (
+            <button
+              className="expand-toggle-urls"
+              onClick={() => setUrlsExpanded(v => !v)}
+              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+            >
+              {urlsExpanded ? `Hide ${extractedUrls.length - 1} more` : `Show ${extractedUrls.length - 1} more`}
+            </button>
+          )}
+        </div>
+      )}
+      
+      {bookmark.parsedContent ? (
+        <div className="bookmark-content">
+          {shouldTruncate && bookmark.content
+            ? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
+            : renderParsedContent(bookmark.parsedContent)}
+        </div>
+      ) : bookmark.content && (
+        <div className="bookmark-content">
+          <ContentWithResolvedProfiles content={shouldTruncate ? `${bookmark.content.slice(0, 210).trimEnd()}…` : bookmark.content} />
+        </div>
+      )}
+
+      {contentLength > 210 && (
+        <button
+          className="expand-toggle"
+          onClick={() => setExpanded(v => !v)}
+          aria-label={expanded ? 'Collapse' : 'Expand'}
+          title={expanded ? 'Collapse' : 'Expand'}
+        >
+          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
+        </button>
+      )}
+      
+      <div className="bookmark-footer">
+        <div className="bookmark-meta-minimal">
+          <a
+            href={`https://search.dergigi.com/p/${authorNpub}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="author-link-minimal"
+            title="Open author in search"
+          >
+            {getAuthorDisplayName()}
+          </a>
+        </div>
+        {hasUrls && firstUrlClassification && (
+          <button className="read-now-button-minimal" onClick={handleReadNow}>
+            {firstUrlClassification.buttonText}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/BookmarkViews/CompactView.tsx b/src/components/BookmarkViews/CompactView.tsx
new file mode 100644
index 00000000..0be7301f
--- /dev/null
+++ b/src/components/BookmarkViews/CompactView.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBookmark, faUserLock } from '@fortawesome/free-solid-svg-icons'
+import { IndividualBookmark } from '../../types/bookmarks'
+import { formatDate } from '../../utils/bookmarkUtils'
+import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import { IconGetter } from './shared'
+
+interface CompactViewProps {
+  bookmark: IndividualBookmark
+  index: number
+  hasUrls: boolean
+  extractedUrls: string[]
+  onSelectUrl?: (url: string) => void
+  getIconForUrlType: IconGetter
+  firstUrlClassification: { buttonText: string } | null
+}
+
+export const CompactView: React.FC<CompactViewProps> = ({
+  bookmark,
+  index,
+  hasUrls,
+  extractedUrls,
+  onSelectUrl,
+  getIconForUrlType,
+  firstUrlClassification
+}) => {
+  const handleCompactClick = () => {
+    if (hasUrls && onSelectUrl) {
+      onSelectUrl(extractedUrls[0])
+    }
+  }
+
+  return (
+    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+      <div 
+        className={`compact-row ${hasUrls ? 'clickable' : ''}`}
+        onClick={handleCompactClick}
+        role={hasUrls ? 'button' : undefined}
+        tabIndex={hasUrls ? 0 : undefined}
+      >
+        <span className="bookmark-type-compact">
+          {bookmark.isPrivate ? (
+            <>
+              <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+              <FontAwesomeIcon icon={faUserLock} className="bookmark-visibility private" />
+            </>
+          ) : (
+            <FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
+          )}
+        </span>
+        {bookmark.content && (
+          <div className="compact-text">
+            <ContentWithResolvedProfiles content={bookmark.content.slice(0, 60) + (bookmark.content.length > 60 ? '…' : '')} />
+          </div>
+        )}
+        <span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
+        {hasUrls && (
+          <button
+            className="compact-read-btn"
+            onClick={(e) => { e.stopPropagation(); onSelectUrl?.(extractedUrls[0]) }}
+            title={firstUrlClassification?.buttonText}
+          >
+            <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/BookmarkViews/LargeView.tsx b/src/components/BookmarkViews/LargeView.tsx
new file mode 100644
index 00000000..c0c1b33c
--- /dev/null
+++ b/src/components/BookmarkViews/LargeView.tsx
@@ -0,0 +1,94 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IndividualBookmark } from '../../types/bookmarks'
+import { formatDate } from '../../utils/bookmarkUtils'
+import ContentWithResolvedProfiles from '../ContentWithResolvedProfiles'
+import { IconGetter } from './shared'
+
+interface LargeViewProps {
+  bookmark: IndividualBookmark
+  index: number
+  hasUrls: boolean
+  extractedUrls: string[]
+  onSelectUrl?: (url: string) => void
+  getIconForUrlType: IconGetter
+  firstUrlClassification: { buttonText: string } | null
+  previewImage: string | null
+  authorNpub: string
+  eventNevent?: string
+  getAuthorDisplayName: () => string
+  handleReadNow: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const LargeView: React.FC<LargeViewProps> = ({
+  bookmark,
+  index,
+  hasUrls,
+  extractedUrls,
+  onSelectUrl,
+  getIconForUrlType,
+  firstUrlClassification,
+  previewImage,
+  authorNpub,
+  eventNevent,
+  getAuthorDisplayName,
+  handleReadNow
+}) => {
+  return (
+    <div key={`${bookmark.id}-${index}`} className={`individual-bookmark large ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
+      {hasUrls && (
+        <div 
+          className="large-preview-image" 
+          onClick={() => onSelectUrl?.(extractedUrls[0])}
+          style={previewImage ? { backgroundImage: `url(${previewImage})` } : undefined}
+        >
+          {!previewImage && (
+            <div className="preview-placeholder">
+              <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+            </div>
+          )}
+        </div>
+      )}
+      
+      <div className="large-content">
+        {bookmark.content && (
+          <div className="large-text">
+            <ContentWithResolvedProfiles content={bookmark.content} />
+          </div>
+        )}
+        
+        <div className="large-footer">
+          <span className="large-author">
+            <a
+              href={`https://search.dergigi.com/p/${authorNpub}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="author-link-minimal"
+            >
+              {getAuthorDisplayName()}
+            </a>
+          </span>
+          
+          {eventNevent && (
+            <a
+              href={`https://search.dergigi.com/e/${eventNevent}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bookmark-date-link"
+            >
+              {formatDate(bookmark.created_at)}
+            </a>
+          )}
+          
+          {hasUrls && firstUrlClassification && (
+            <button className="large-read-button" onClick={handleReadNow}>
+              <FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
+              {firstUrlClassification.buttonText}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/src/components/BookmarkViews/shared.ts b/src/components/BookmarkViews/shared.ts
new file mode 100644
index 00000000..58568d21
--- /dev/null
+++ b/src/components/BookmarkViews/shared.ts
@@ -0,0 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+
+export type IconGetter = (url: string) => IconDefinition
+