feat: always show reading progress bar as 1px separator

- Show reading progress bar for all article cards, even without progress
- Change progress bar thickness from 4px to 1px for subtle separation
- Remove fallback separator since progress bar is always shown
- Empty progress bars show as transparent fill with border background
- Maintain consistent visual separation across all article cards
This commit is contained in:
Gigi
2025-10-25 01:33:14 +02:00
parent 180c26c47a
commit f6b6747f09
2 changed files with 8 additions and 18 deletions

View File

@@ -200,14 +200,14 @@ export const CardView: React.FC<CardViewProps> = ({
</button>
)}
{/* Reading progress indicator as separator */}
{isArticle && readingProgress !== undefined && readingProgress > 0 && (
{/* Reading progress indicator as separator - always shown */}
{isArticle && (
<div className="reading-progress-separator">
<div
className="progress-fill"
style={{
width: `${Math.round(readingProgress * 100)}%`,
background: progressColor
width: readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%',
background: readingProgress ? progressColor : 'transparent'
}}
/>
</div>

View File

@@ -178,12 +178,12 @@
padding-top: 0.75rem;
}
/* Reading progress as separator */
/* Reading progress as separator - always shown */
.card-content .reading-progress-separator {
height: 4px;
height: 1px;
width: 100%;
background: var(--color-border);
border-radius: 2px;
border-radius: 0.5px;
overflow: hidden;
margin: 0.75rem 0;
position: relative;
@@ -191,20 +191,10 @@
.card-content .reading-progress-separator .progress-fill {
height: 100%;
border-radius: 2px;
border-radius: 0.5px;
transition: width 0.3s ease, background 0.3s ease;
}
/* Subtle separator for cards without reading progress */
.card-content .bookmark-footer::before {
content: '';
display: block;
height: 1px;
background: var(--color-border-subtle);
margin-bottom: 0.75rem;
opacity: 0.5;
}
.card-content .bookmark-urls {
margin: 0.5rem 0;
}