feat(ui): truncate long bookmark text with expand/collapse chevron\n\n- Show first 210 chars by default\n- Toggle expansion with FontAwesome chevrons\n- Add minimal styles for the toggle

This commit is contained in:
Gigi
2025-10-03 00:27:31 +02:00
parent fdb8511c87
commit 609e15a738
2 changed files with 27 additions and 2 deletions

View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faBookmark,
@@ -21,6 +21,7 @@ import {
faEyeSlash,
faThumbtack
} from '@fortawesome/free-solid-svg-icons'
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
import { useEventModel } from 'applesauce-react/hooks'
import { Models } from 'applesauce-core'
import { IndividualBookmark } from '../types/bookmarks'
@@ -35,6 +36,7 @@ interface BookmarkItemProps {
}
export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onSelectUrl }) => {
const [expanded, setExpanded] = useState(false)
// removed copy-to-clipboard buttons
const short = (v: string) => `${v.slice(0, 8)}...${v.slice(-8)}`
@@ -133,7 +135,18 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
{renderParsedContent(bookmark.parsedContent)}
</div>
) : bookmark.content && (
<ContentWithResolvedProfiles content={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-meta">

View File

@@ -501,6 +501,18 @@ body {
word-break: break-word;
}
.expand-toggle {
margin-top: 0.25rem;
background: transparent;
border: none;
color: #888;
cursor: pointer;
}
.expand-toggle:hover {
color: #bbb;
}
.individual-bookmark .bookmark-meta {
display: flex;
gap: 1rem;