From 165d10c49bd3f386d441e76decb0752a431ee1c5 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 16 Oct 2025 00:13:34 +0200
Subject: [PATCH] feat: split 'To read' filter into 'Unopened' and 'Started'

- Add 'unopened' filter (no progress, 0%) - uses fa-envelope icon
- Add 'started' filter (0-10% progress) - uses fa-envelope-open icon
- Remove 'to-read' filter
- Use classic/regular variant for envelope icons
- Update filter logic in BookmarkList and Me components
- New filter ranges:
  - Unopened: 0% (never opened)
  - Started: 0-10% (opened but not read far)
  - Reading: 11-94%
  - Completed: 95-100%
---
 src/components/BookmarkList.tsx           | 9 ++++++---
 src/components/Me.tsx                     | 7 +++++--
 src/components/ReadingProgressFilters.tsx | 7 ++++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx
index 906ec7be..f4c9bfea 100644
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -116,9 +116,12 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
     }
     
     switch (readingProgressFilter) {
-      case 'to-read':
-        // 0-10% reading progress (has tracking data)
-        return position !== undefined && position >= 0 && position <= 0.10
+      case 'unopened':
+        // No reading progress - never opened
+        return !position || position === 0
+      case 'started':
+        // 0-10% reading progress - opened but not read far
+        return position !== undefined && position > 0 && position <= 0.10
       case 'reading':
         // Has some progress but not completed (11% - 94%)
         return position !== undefined && position > 0.10 && position <= 0.94
diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index 2ff4f88f..66fe5a35 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -191,8 +191,11 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
     // but since these are all marked as read, we only care about the 'all' and 'completed' filters
     
     switch (readingProgressFilter) {
-      case 'to-read':
-        // Marked articles are never "to-read"
+      case 'unopened':
+        // Marked articles are never "unopened"
+        return false
+      case 'started':
+        // Marked articles are never "started"
         return false
       case 'reading':
         // Marked articles are never "in progress"
diff --git a/src/components/ReadingProgressFilters.tsx b/src/components/ReadingProgressFilters.tsx
index 6a3a7889..6931ef21 100644
--- a/src/components/ReadingProgressFilters.tsx
+++ b/src/components/ReadingProgressFilters.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookOpen, faCheckCircle, faAsterisk } from '@fortawesome/free-solid-svg-icons'
-import { faBookmark } from '@fortawesome/free-regular-svg-icons'
+import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-regular-svg-icons'
 
-export type ReadingProgressFilterType = 'all' | 'to-read' | 'reading' | 'completed'
+export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed'
 
 interface ReadingProgressFiltersProps {
   selectedFilter: ReadingProgressFilterType
@@ -13,7 +13,8 @@ interface ReadingProgressFiltersProps {
 const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selectedFilter, onFilterChange }) => {
   const filters = [
     { type: 'all' as const, icon: faAsterisk, label: 'All' },
-    { type: 'to-read' as const, icon: faBookmark, label: 'To Read' },
+    { type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' },
+    { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
     { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' }
   ]