feat(v2/api): improve typography, active menu bolding, and fix API header order (NK-a217qm, NK-hyej38, NK-jqpn98)

2 files changed, 26 insertions, 19 deletions

diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index 63dbc4b..d91a8ac 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -57,7 +57,7 @@
     color: var(--link-color);
     text-decoration: none;
     font-size: 0.9rem;
-    font-weight: bold;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .feed-title:hover {
@@ -67,25 +67,23 @@
 
 .feed-category {
     display: none;
-    /* Hide category in sidebar list to save space/match legacy simplicity if needed */
+    /* Hide category in sidebar list to save space */
 }
 
 .tag-section {
     margin-top: 2rem;
 }
 
-.tag-link,
-.filter-list li a {
+.tag-link {
     color: var(--link-color);
     text-decoration: none;
     font-size: 0.9rem;
     display: block;
     padding: 0.1rem 0;
-    font-weight: bold;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
-.tag-link:hover,
-.filter-list li a:hover {
+.tag-link:hover {
     text-decoration: underline;
     background: transparent;
     color: var(--link-color);
@@ -97,18 +95,15 @@
 
 .filter-list {
     display: block;
-    /* Stack vertically */
-}
-
-.filter-list {
-    display: block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
 .filter-list li a {
     text-decoration: none;
     color: #333;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-weight: bold;
     font-variant: small-caps;
     text-transform: lowercase;
     font-size: 1.1rem;
@@ -119,4 +114,11 @@
 .filter-list li a:hover {
     color: blue;
     background-color: transparent;
+    text-decoration: underline;
+}
+
+.feed-title.active,
+.tag-link.active,
+.filter-list li a.active {
+    font-weight: bold !important;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index 4e7b040..8159cac 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useSearchParams, useLocation, useParams } from 'react-router-dom';
 import type { Feed, Category } from '../types';
 import './FeedList.css';
 
@@ -10,6 +10,11 @@ export default function FeedList() {
     const [error, setError] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
     const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const location = useLocation();
+    const { feedId, tagName } = useParams();
+
+    const currentFilter = searchParams.get('filter') || (location.pathname === '/' && !feedId && !tagName ? 'unread' : '');
 
     const handleSearch = (e: React.FormEvent) => {
         e.preventDefault();
@@ -58,9 +63,9 @@ export default function FeedList() {
             </div>
             <div className="filter-section">
                 <ul className="filter-list">
-                    <li><Link to="/?filter=unread">Unread</Link></li>
-                    <li><Link to="/?filter=all">All</Link></li>
-                    <li><Link to="/?filter=starred">Starred</Link></li>
+                    <li><Link to="/?filter=unread" className={currentFilter === 'unread' ? 'active' : ''}>Unread</Link></li>
+                    <li><Link to="/?filter=all" className={currentFilter === 'all' ? 'active' : ''}>All</Link></li>
+                    <li><Link to="/?filter=starred" className={currentFilter === 'starred' ? 'active' : ''}>Starred</Link></li>
                 </ul>
             </div>
             <div className="feed-section">
@@ -71,7 +76,7 @@ export default function FeedList() {
                     <ul className="feed-list-items">
                         {feeds.map((feed) => (
                             <li key={feed._id} className="sidebar-feed-item">
-                                <Link to={`/feed/${feed._id}`} className="feed-title">
+                                <Link to={`/feed/${feed._id}`} className={`feed-title ${feedId === String(feed._id) ? 'active' : ''}`}>
                                     {feed.title || feed.url}
                                 </Link>
                                 {feed.category && <span className="feed-category">{feed.category}</span>}
@@ -87,7 +92,7 @@ export default function FeedList() {
                     <ul className="tag-list-items">
                         {tags.map((tag) => (
                             <li key={tag.title} className="tag-item">
-                                <Link to={`/tag/${encodeURIComponent(tag.title)}`} className="tag-link">
+                                <Link to={`/tag/${encodeURIComponent(tag.title)}`} className={`tag-link ${tagName === tag.title ? 'active' : ''}`}>
                                     {tag.title}
                                 </Link>
                             </li>