From f6b6747f0969705c27e43d8eeda6e31658752a86 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 25 Oct 2025 01:33:14 +0200
Subject: [PATCH] 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
---
 src/components/BookmarkViews/CardView.tsx |  8 ++++----
 src/styles/components/cards.css           | 18 ++++--------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/components/BookmarkViews/CardView.tsx b/src/components/BookmarkViews/CardView.tsx
index cd2c3ae5..c9bec96c 100644
--- a/src/components/BookmarkViews/CardView.tsx
+++ b/src/components/BookmarkViews/CardView.tsx
@@ -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>
diff --git a/src/styles/components/cards.css b/src/styles/components/cards.css
index 97987214..295a2a7a 100644
--- a/src/styles/components/cards.css
+++ b/src/styles/components/cards.css
@@ -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;
 }