feat(v2/ui): add theme toggle and collapse sidebar by default (NK-gnxc6e, NK-k4y597)

2 files changed, 44 insertions, 2 deletions

diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
index d91a8ac..d0ee9eb 100644
--- a/frontend/src/components/FeedList.css
+++ b/frontend/src/components/FeedList.css
@@ -119,6 +119,39 @@
 
 .feed-title.active,
 .tag-link.active,
-.filter-list li a.active {
+.filter-list li a.active,
+.theme-selector button.active {
     font-weight: bold !important;
+}
+
+.theme-section {
+    margin-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.theme-selector {
+    display: flex;
+    justify-content: space-between;
+    gap: 5px;
+}
+
+.theme-selector button {
+    font-size: 0.8rem;
+    padding: 0.2rem 0.5rem;
+    width: 30%;
+    background: whitesmoke;
+    color: blue;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-variant: small-caps;
+    text-transform: lowercase;
+}
+
+.theme-selector button:hover {
+    background: #eee;
+}
+
+.theme-selector button.active {
+    color: black;
+    border-color: #000;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index 8159cac..4af1bbc 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -3,7 +3,7 @@ import { Link, useNavigate, useSearchParams, useLocation, useParams } from 'reac
 import type { Feed, Category } from '../types';
 import './FeedList.css';
 
-export default function FeedList() {
+export default function FeedList({ theme, setTheme }: { theme: string, setTheme: (t: string) => void }) {
     const [feeds, setFeeds] = useState<Feed[]>([]);
     const [tags, setTags] = useState<Category[]>([]);
     const [loading, setLoading] = useState(true);
@@ -100,6 +100,15 @@ export default function FeedList() {
                     </ul>
                 </div>
             )}
+
+            <div className="theme-section">
+                <h2>Themes</h2>
+                <div className="theme-selector">
+                    <button onClick={() => setTheme('light')} className={theme === 'light' ? 'active' : ''}>light</button>
+                    <button onClick={() => setTheme('dark')} className={theme === 'dark' ? 'active' : ''}>dark</button>
+                    <button onClick={() => setTheme('black')} className={theme === 'black' ? 'active' : ''}>black</button>
+                </div>
+            </div>
         </div>
     );
 }