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

4 files changed, 42 insertions, 25 deletions

diff --git a/api/api.go b/api/api.go
index b6ecba2..1ce6e5a 100644
--- a/api/api.go
+++ b/api/api.go
@@ -147,8 +147,9 @@ func HandleFeed(w http.ResponseWriter, r *http.Request) {
 			crawler.CrawlFeed(&f, ch)
 			log.Println(<-ch)
 		}()
+		w.Header().Set("Content-Type", "application/json")
 		w.WriteHeader(http.StatusCreated)
-		jsonResponse(w, f)
+		json.NewEncoder(w).Encode(f)
 
 	case http.MethodPut:
 		var f feed.Feed
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>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3b39cf5..43cdff5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,8 +1,17 @@
-:root,
-body,
-* {
-  font-family: 'Courier New', Courier, monospace !important;
-  /* Strongly force fixed width as requested */
+body {
+  font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+.logo,
+.nav-link,
+.logout-btn {
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: bold;
 }
 
 :root {