aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-19 07:34:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: ensure reading progress bar shows for all bookmark types across all view modes

Browse Source 
- Update CompactView to always show progress bar for all bookmark types
- Update LargeView to always show progress bar for all bookmark types
- Remove conditional logic that only showed progress for articles
- Ensure consistent visual separator across CardView, CompactView, and LargeView
- Maintain empty state display (1px border line) when no progress available
This commit is contained in:
Gigi
2025-10-25 01:48:42 +02:00
parent 1df00fbfda
commit 13462efaed
2 changed files with 35 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/BookmarkViews/CompactView.tsx
View File

@@ -86,28 +86,26 @@ export const CompactView: React.FC<CompactViewProps> = ({
{/* CTA removed */} {/* CTA removed */}
</div> </div>
{/* Reading progress indicator for all bookmark types with reading data */} {/* Reading progress indicator for all bookmark types - always shown */}
{readingProgress !== undefined && readingProgress > 0 && ( <div
style={{
height: '1px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden',
margin: '0',
marginLeft: '1.5rem'
}}
>
<div <div
style={{ style={{
height: '1px', height: '100%',
width: '100%', width: readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%',
background: 'var(--color-border)', background: readingProgress ? progressColor : 'var(--color-border)',
overflow: 'hidden', transition: 'width 0.3s ease, background 0.3s ease'
margin: '0',
marginLeft: '1.5rem'
}} }}
> />
<div </div>
style={{
height: '100%',
width: `${Math.round(readingProgress * 100)}%`,
background: progressColor,
transition: 'width 0.3s ease, background 0.3s ease'
}}
/>
</div>
)}
</div> </div>
) )
} }

34
src/components/BookmarkViews/LargeView.tsx
View File

@@ -122,27 +122,25 @@ export const LargeView: React.FC<LargeViewProps> = ({
<RichContent content={bookmark.content} className="large-text" /> <RichContent content={bookmark.content} className="large-text" />
)} )}
{/* Reading progress indicator for articles - shown only if there's progress */} {/* Reading progress indicator for all bookmark types - always shown */}
{isArticle && readingProgress !== undefined && readingProgress > 0 && ( <div
style={{
height: '3px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden',
marginTop: '0.75rem'
}}
>
<div <div
style={{ style={{
height: '3px', height: '100%',
width: '100%', width: readingProgress ? `${progressPercent}%` : '0%',
background: 'var(--color-border)', background: readingProgress ? progressColor : 'var(--color-border)',
overflow: 'hidden', transition: 'width 0.3s ease, background 0.3s ease'
marginTop: '0.75rem'
}} }}
> />
<div </div>
style={{
height: '100%',
width: `${progressPercent}%`,
background: progressColor,
transition: 'width 0.3s ease, background 0.3s ease'
}}
/>
</div>
)}
<div className="large-footer"> <div className="large-footer">
<span className="bookmark-type-large"> <span className="bookmark-type-large">