aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-31 12:44:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): enforce 210-char truncation for both plain and parsed content\n\n- Show truncated plain text when parsedContent exists and not expanded\n- Render full parsed content only when expanded\n- Keep chevron toggle below content

Browse Source
This commit is contained in:
Gigi
2025-10-03 00:35:55 +02:00
parent a2620caa29
commit e0450385ed
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/BookmarkItem.tsx
View File

@@ -44,6 +44,8 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
// Extract URLs from bookmark content
const extractedUrls = extractUrlsFromContent(bookmark.content)
const hasUrls = extractedUrls.length > 0
const contentLength = (bookmark.content || '').length
const shouldTruncate = !expanded && contentLength > 210
// Resolve author profile using applesauce
const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
@@ -139,21 +141,24 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
{bookmark.parsedContent ? (
<div className="bookmark-content">
{renderParsedContent(bookmark.parsedContent)}
{shouldTruncate && bookmark.content
? <ContentWithResolvedProfiles content={`${bookmark.content.slice(0, 210).trimEnd()}…`} />
: renderParsedContent(bookmark.parsedContent)}
</div>
) : bookmark.content && (
<>
<ContentWithResolvedProfiles content={(expanded || bookmark.content.length <= 210) ? bookmark.content : `${bookmark.content.slice(0, 210).trimEnd()}…`} />
{bookmark.content.length > 210 && (
<button
className="expand-toggle"
onClick={() => setExpanded(v => !v)}
aria-label={expanded ? 'Collapse' : 'Expand'}
>
<FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
</button>
)}
</>
<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'}
>
<FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
</button>
)}
<div className="bookmark-meta">