refactor: rename ArchiveFilters to ReadingProgressFilters

- More accurate naming: filters are based on reading progress/position
- Renamed component: ArchiveFilters -> ReadingProgressFilters
- Renamed type: ArchiveFilterType -> ReadingProgressFilterType
- Renamed variables: archiveFilter -> readingProgressFilter
- Renamed CSS class: archive-filters-wrapper -> reading-progress-filters-wrapper
- Updated all imports and references in BookmarkList and Me components
- Updated comments to reflect reading progress filtering

src/components/BookmarkList.tsx

@@ -21,7 +21,7 @@ import { RELAYS } from '../config/relays'
 import { Hooks } from 'applesauce-react'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
-import ArchiveFilters, { ArchiveFilterType } from './ArchiveFilters'
+import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
@@ -67,7 +67,7 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   const friendsColor = settings?.highlightColorFriends || '#f97316'
   const [showAddModal, setShowAddModal] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<BookmarkFilterType>('all')
-  const [archiveFilter, setArchiveFilter] = useState<ArchiveFilterType>('all')
+  const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>('all')
   const activeAccount = Hooks.useActiveAccount()
 
   const handleSaveBookmark = async (url: string, title?: string, description?: string, tags?: string[]) => {
@@ -97,17 +97,17 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   // Apply type filter
   const typeFilteredBookmarks = filterBookmarksByType(allIndividualBookmarks, selectedFilter)
   
-  // Apply archive filter (only affects kind:30023 articles)
+  // Apply reading progress filter (only affects kind:30023 articles)
   const filteredBookmarks = typeFilteredBookmarks.filter(bookmark => {
-    // Only apply archive filter to kind:30023 articles
+    // Only apply reading progress filter to kind:30023 articles
     if (bookmark.kind !== 30023) return true
     
-    // If archive filter is 'all', show all articles
+    // If reading progress filter is 'all', show all articles
-    if (archiveFilter === 'all') return true
+    if (readingProgressFilter === 'all') return true
     
     const position = readingPositions?.get(bookmark.id)
     
-    switch (archiveFilter) {
+    switch (readingProgressFilter) {
       case 'to-read':
         // 0-5% reading progress (has tracking data, not manually marked)
         return position !== undefined && position >= 0 && position <= 0.05
@@ -246,12 +246,12 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         </div>
       )}
       
-      {/* Archive filters - only show if there are kind:30023 articles */}
+      {/* Reading progress filters - only show if there are kind:30023 articles */}
       {typeFilteredBookmarks.some(b => b.kind === 30023) && (
-        <div className="archive-filters-wrapper">
+        <div className="reading-progress-filters-wrapper">
-          <ArchiveFilters
+          <ReadingProgressFilters
-            selectedFilter={archiveFilter}
+            selectedFilter={readingProgressFilter}
-            onFilterChange={setArchiveFilter}
+            onFilterChange={setReadingProgressFilter}
           />
         </div>
       )}

src/components/Me.tsx

@@ -27,7 +27,7 @@ import { groupIndividualBookmarks, hasContent } from '../utils/bookmarkUtils'
 import BookmarkFilters, { BookmarkFilterType } from './BookmarkFilters'
 import { filterBookmarksByType } from '../utils/bookmarkTypeClassifier'
 import { generateArticleIdentifier, loadReadingPosition } from '../services/readingPositionService'
-import ArchiveFilters, { ArchiveFilterType } from './ArchiveFilters'
+import ReadingProgressFilters, { ReadingProgressFilterType } from './ReadingProgressFilters'
 
 interface MeProps {
   relayPool: RelayPool
@@ -54,7 +54,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
   const [viewMode, setViewMode] = useState<ViewMode>('cards')
   const [refreshTrigger, setRefreshTrigger] = useState(0)
   const [bookmarkFilter, setBookmarkFilter] = useState<BookmarkFilterType>('all')
-  const [archiveFilter, setArchiveFilter] = useState<ArchiveFilterType>('all')
+  const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>('all')
   const [readingPositions, setReadingPositions] = useState<Map<string, number>>(new Map())
 
   // Update local state when prop changes
@@ -245,11 +245,11 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
   
   const groups = groupIndividualBookmarks(filteredBookmarks)
 
-  // Apply archive filter
+  // Apply reading progress filter
   const filteredReadArticles = readArticles.filter(post => {
     const position = readingPositions.get(post.event.id)
     
-    switch (archiveFilter) {
+    switch (readingProgressFilter) {
       case 'to-read':
         // 0-5% reading progress (has tracking data, not manually marked)
         return position !== undefined && position >= 0 && position <= 0.05
@@ -403,9 +403,9 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         ) : (
           <>
             {readArticles.length > 0 && (
-              <ArchiveFilters
+              <ReadingProgressFilters
-                selectedFilter={archiveFilter}
+                selectedFilter={readingProgressFilter}
-                onFilterChange={setArchiveFilter}
+                onFilterChange={setReadingProgressFilter}
               />
             )}
             {filteredReadArticles.length === 0 ? (

src/components/ReadingProgressFilters.tsx

@@ -4,14 +4,14 @@ import { faBookOpen, faCheckCircle, faAsterisk } from '@fortawesome/free-solid-s
 import { faBookmark } from '@fortawesome/free-regular-svg-icons'
 import { faBooks } from '../icons/customIcons'
 
-export type ArchiveFilterType = 'all' | 'to-read' | 'reading' | 'completed' | 'marked'
+export type ReadingProgressFilterType = 'all' | 'to-read' | 'reading' | 'completed' | 'marked'
 
-interface ArchiveFiltersProps {
+interface ReadingProgressFiltersProps {
-  selectedFilter: ArchiveFilterType
+  selectedFilter: ReadingProgressFilterType
-  onFilterChange: (filter: ArchiveFilterType) => void
+  onFilterChange: (filter: ReadingProgressFilterType) => void
 }
 
-const ArchiveFilters: React.FC<ArchiveFiltersProps> = ({ selectedFilter, onFilterChange }) => {
+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' },
@@ -37,5 +37,5 @@ const ArchiveFilters: React.FC<ArchiveFiltersProps> = ({ selectedFilter, onFilte
   )
 }
 
-export default ArchiveFilters
+export default ReadingProgressFilters
 

src/styles/layout/sidebar.css

@@ -211,12 +211,12 @@
   background: transparent;
 }
 
-/* Archive filters in bookmarks sidebar - add top border, remove bottom border to avoid double border with view-mode-controls */
+/* Reading progress filters in bookmarks sidebar - add top border, remove bottom border to avoid double border with view-mode-controls */
-.archive-filters-wrapper {
+.reading-progress-filters-wrapper {
   border-top: 1px solid var(--color-border);
 }
 
-.archive-filters-wrapper .bookmark-filters {
+.reading-progress-filters-wrapper .bookmark-filters {
   border-bottom: none;
   padding-top: 0;
 }