From 6ef0a6dd71582c174cd21c769dced39f86f6d660 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 22:35:45 +0200
Subject: [PATCH] refactor: match ArchiveFilters styling to BookmarkFilters

- Use same CSS classes (filter-btn) as BookmarkFilters
- Show icons only, no text labels for consistency
- Add title and aria-label for accessibility
- Keep code DRY by following established pattern
---
 src/components/ArchiveFilters.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ArchiveFilters.tsx b/src/components/ArchiveFilters.tsx
index 8303072a..671a6008 100644
--- a/src/components/ArchiveFilters.tsx
+++ b/src/components/ArchiveFilters.tsx
@@ -11,24 +11,25 @@ interface ArchiveFiltersProps {
 }
 
 const ArchiveFilters: React.FC<ArchiveFiltersProps> = ({ selectedFilter, onFilterChange }) => {
-  const filters: { id: ArchiveFilterType; label: string; icon: typeof faBookOpen }[] = [
-    { id: 'all', label: 'All', icon: faBooks },
-    { id: 'to-read', label: 'To Read', icon: faBookmark },
-    { id: 'reading', label: 'Reading', icon: faBookOpen },
-    { id: 'completed', label: 'Completed', icon: faCheckCircle },
-    { id: 'marked', label: 'Marked', icon: faCheckCircle }
+  const filters = [
+    { type: 'all' as const, icon: faBooks, label: 'All' },
+    { type: 'to-read' as const, icon: faBookmark, label: 'To Read' },
+    { type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
+    { type: 'completed' as const, icon: faCheckCircle, label: 'Completed' },
+    { type: 'marked' as const, icon: faCheckCircle, label: 'Marked as Read' }
   ]
 
   return (
     <div className="bookmark-filters">
-      {filters.map((filter) => (
+      {filters.map(filter => (
         <button
-          key={filter.id}
-          className={`bookmark-filter-btn ${selectedFilter === filter.id ? 'active' : ''}`}
-          onClick={() => onFilterChange(filter.id)}
+          key={filter.type}
+          onClick={() => onFilterChange(filter.type)}
+          className={`filter-btn ${selectedFilter === filter.type ? 'active' : ''}`}
+          title={filter.label}
+          aria-label={`Filter by ${filter.label}`}
         >
           <FontAwesomeIcon icon={filter.icon} />
-          <span>{filter.label}</span>
         </button>
       ))}
     </div>