diff --git a/src/components/BlogPostCard.tsx b/src/components/BlogPostCard.tsx index 7c338a1b..d4ce0a7d 100644 --- a/src/components/BlogPostCard.tsx +++ b/src/components/BlogPostCard.tsx @@ -24,9 +24,15 @@ const BlogPostCard: React.FC = ({ post, href, level, readingP addSuffix: true }) - // Calculate progress percentage and determine color + // Calculate progress percentage and determine color (matching readingProgressUtils.ts logic) const progressPercent = readingProgress ? Math.round(readingProgress * 100) : 0 - const progressColor = progressPercent >= 95 ? '#10b981' : '#6366f1' // green if >=95%, blue otherwise + let progressColor = '#6366f1' // Default blue (reading) + + if (readingProgress && readingProgress >= 0.95) { + progressColor = '#10b981' // Green (completed) + } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) { + progressColor = '#f59e0b' // Amber (started) + } return ( = ({ const cachedImage = useImageCache(previewImage || undefined) const isArticle = bookmark.kind === 30023 - // Calculate progress display + // Calculate progress display (matching readingProgressUtils.ts logic) const progressPercent = readingProgress ? Math.round(readingProgress * 100) : 0 - const progressColor = - progressPercent >= 95 ? '#10b981' : // green for completed - progressPercent > 5 ? '#f97316' : // orange for in-progress - 'var(--color-border)' // default for not started + let progressColor = '#6366f1' // Default blue (reading) + + if (readingProgress && readingProgress >= 0.95) { + progressColor = '#10b981' // Green (completed) + } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) { + progressColor = '#f59e0b' // Amber (started) + } const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent) const handleKeyDown: React.KeyboardEventHandler = (e) => { diff --git a/src/components/ReadingProgressIndicator.tsx b/src/components/ReadingProgressIndicator.tsx index cd47932a..ff3fe56c 100644 --- a/src/components/ReadingProgressIndicator.tsx +++ b/src/components/ReadingProgressIndicator.tsx @@ -19,6 +19,23 @@ export const ReadingProgressIndicator: React.FC = }) => { const clampedProgress = Math.min(100, Math.max(0, progress)) + // Determine reading state based on progress (matching readingProgressUtils.ts logic) + const progressDecimal = clampedProgress / 100 + const isStarted = progressDecimal > 0 && progressDecimal <= 0.10 + const isReading = progressDecimal > 0.10 && progressDecimal <= 0.94 + + // Determine bar color based on state + let barColorClass = '' + let barColorStyle: string | undefined = 'var(--color-primary)' // Default blue + + if (isComplete) { + barColorClass = 'bg-green-500' + barColorStyle = undefined + } else if (isStarted) { + barColorClass = 'bg-amber-500' + barColorStyle = undefined + } + // Calculate left and right offsets based on sidebar states (desktop only) const leftOffset = isSidebarCollapsed ? 'var(--sidebar-collapsed-width)' @@ -42,14 +59,10 @@ export const ReadingProgressIndicator: React.FC = style={{ backgroundColor: 'var(--color-border)' }} >
@@ -58,9 +71,9 @@ export const ReadingProgressIndicator: React.FC = {showPercentage && (
{isComplete ? '✓' : `${clampedProgress}%`}