From d9eb87aa5c7149f47da556c2686ee9c6bfeb924f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 20 Oct 2025 09:39:45 +0200
Subject: [PATCH] feat(reads): rename 'emoji' filter to 'archive' and use
 fa-books icon; map legacy /me/reads/emoji to /me/reads/archive

---
 src/components/Me.tsx                     | 13 ++++++++-----
 src/components/ReadingProgressFilters.tsx | 10 +++++-----
 src/utils/readingProgressUtils.ts         |  4 ++--
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index b9df93c0..c3bc60bd 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -42,7 +42,7 @@ interface MeProps {
 type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings'
 
 // Valid reading progress filters
-const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed', 'highlighted', 'emoji']
+const VALID_FILTERS: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed', 'highlighted', 'archive']
 
 const Me: React.FC<MeProps> = ({ 
   relayPool, 
@@ -88,8 +88,10 @@ const Me: React.FC<MeProps> = ({
   }
   
   // Initialize reading progress filter from URL param
-  const initialFilter = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
-    ? (urlFilter as ReadingProgressFilterType) 
+  // Backward compat: map legacy 'emoji' route to 'archive'
+  const normalizedUrlFilter = urlFilter === 'emoji' ? 'archive' : urlFilter
+  const initialFilter = normalizedUrlFilter && VALID_FILTERS.includes(normalizedUrlFilter as ReadingProgressFilterType) 
+    ? (normalizedUrlFilter as ReadingProgressFilterType) 
     : 'all'
   const [readingProgressFilter, setReadingProgressFilter] = useState<ReadingProgressFilterType>(initialFilter)
   
@@ -133,8 +135,9 @@ const Me: React.FC<MeProps> = ({
 
   // Sync filter state with URL changes
   useEffect(() => {
-    const filterFromUrl = urlFilter && VALID_FILTERS.includes(urlFilter as ReadingProgressFilterType) 
-      ? (urlFilter as ReadingProgressFilterType) 
+    const normalized = urlFilter === 'emoji' ? 'archive' : urlFilter
+    const filterFromUrl = normalized && VALID_FILTERS.includes(normalized as ReadingProgressFilterType) 
+      ? (normalized as ReadingProgressFilterType) 
       : 'all'
     setReadingProgressFilter(filterFromUrl)
   }, [urlFilter])
diff --git a/src/components/ReadingProgressFilters.tsx b/src/components/ReadingProgressFilters.tsx
index abc74f8b..1c0e50d2 100644
--- a/src/components/ReadingProgressFilters.tsx
+++ b/src/components/ReadingProgressFilters.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBookOpen, faCheckCircle, faAsterisk, faHighlighter } from '@fortawesome/free-solid-svg-icons'
-import { faBook } from '@fortawesome/free-solid-svg-icons'
+import { faBooks } from '../icons/customIcons'
 import { faEnvelope, faEnvelopeOpen } from '@fortawesome/free-regular-svg-icons'
 
-export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed' | 'highlighted' | 'emoji'
+export type ReadingProgressFilterType = 'all' | 'unopened' | 'started' | 'reading' | 'completed' | 'highlighted' | 'archive'
 
 interface ReadingProgressFiltersProps {
   selectedFilter: ReadingProgressFilterType
@@ -19,8 +19,8 @@ const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selecte
     { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
     { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
     { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' },
-    // Emoji-marked items (marked via reaction emoji)
-    { type: 'emoji' as const, icon: faBook, label: 'Emoji' }
+    // Archive-marked items (previously emoji-marked)
+    { type: 'archive' as const, icon: faBooks, label: 'Archive' }
   ]
 
   return (
@@ -34,7 +34,7 @@ const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selecte
             activeStyle = { color: '#10b981' } // green
           } else if (filter.type === 'highlighted') {
             activeStyle = { color: '#fde047' } // yellow
-          } else if (filter.type === 'emoji') {
+          } else if (filter.type === 'archive') {
             activeStyle = { color: '#60a5fa' } // blue accent
           }
         }
diff --git a/src/utils/readingProgressUtils.ts b/src/utils/readingProgressUtils.ts
index 117066ed..933da157 100644
--- a/src/utils/readingProgressUtils.ts
+++ b/src/utils/readingProgressUtils.ts
@@ -64,8 +64,8 @@ export function filterByReadingProgress(
       case 'completed':
         // Completed is 95%+ progress only (no emoji fallback)
         return progress >= 0.95
-      case 'emoji':
-        // Emoji-marked items regardless of progress
+      case 'archive':
+        // Archive-marked items (previously emoji-marked) regardless of progress
         return isMarked
       case 'highlighted':
         return hasHighlights