feat: add amber color for 'started' reading progress state (0-10%)

src/components/BlogPostCard.tsx

@@ -24,9 +24,15 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ 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 (
     <Link 

src/components/BookmarkViews/LargeView.tsx

@@ -45,12 +45,15 @@ export const LargeView: React.FC<LargeViewProps> = ({
   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 = 
+  let progressColor = '#6366f1' // Default blue (reading)
-    progressPercent >= 95 ? '#10b981' :  // green for completed
+  
-    progressPercent > 5 ? '#f97316' :    // orange for in-progress
+  if (readingProgress && readingProgress >= 0.95) {
-    'var(--color-border)'                 // default for not started
+    progressColor = '#10b981' // Green (completed)
+  } else if (readingProgress && readingProgress > 0 && readingProgress <= 0.10) {
+    progressColor = '#f59e0b' // Amber (started)
+  }
   
   const triggerOpen = () => handleReadNow({ preventDefault: () => {} } as React.MouseEvent<HTMLButtonElement>)
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {

src/components/ReadingProgressIndicator.tsx

@@ -19,6 +19,23 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
 }) => {
   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<ReadingProgressIndicatorProps> =
         style={{ backgroundColor: 'var(--color-border)' }}
       >
         <div 
-          className={`h-full rounded-full transition-all duration-300 relative ${
+          className={`h-full rounded-full transition-all duration-300 relative ${barColorClass}`}
-            isComplete 
-              ? 'bg-green-500' 
-              : ''
-          }`}
           style={{ 
             width: `${clampedProgress}%`,
-            backgroundColor: isComplete ? undefined : 'var(--color-primary)'
+            backgroundColor: barColorStyle
           }}
         >
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-[shimmer_2s_infinite]" />
@@ -58,9 +71,9 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
       {showPercentage && (
         <div 
           className={`text-[0.625rem] font-normal min-w-[32px] text-right tabular-nums ${
-            isComplete ? 'text-green-500' : ''
+            isComplete ? 'text-green-500' : isStarted ? 'text-amber-500' : ''
           }`}
-          style={{ color: isComplete ? undefined : 'var(--color-text-muted)' }}
+          style={{ color: (isComplete || isStarted) ? undefined : 'var(--color-text-muted)' }}
         >
           {isComplete ? '✓' : `${clampedProgress}%`}
         </div>