Analyze page size and fix frontend tests

1 files changed, 131 insertions, 44 deletions

diff --git a/frontend/coverage/src/components/FeedList.tsx.html b/frontend/coverage/src/components/FeedList.tsx.html
index 75aeb6a..b1b0a27 100644
--- a/frontend/coverage/src/components/FeedList.tsx.html
+++ b/frontend/coverage/src/components/FeedList.tsx.html
@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.44% </span>
+                <span class="strong">91.66% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>17/18</span>
+                <span class='fraction'>22/24</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
+                <span class="strong">82.35% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>10/12</span>
+                <span class='fraction'>14/17</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/6</span>
+                <span class='fraction'>8/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.75% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>15/16</span>
+                <span class='fraction'>20/20</span>
             </div>
         
             
@@ -114,36 +114,86 @@
 <a name='L49'></a><a href='#L49'>49</a>
 <a name='L50'></a><a href='#L50'>50</a>
 <a name='L51'></a><a href='#L51'>51</a>
-<a name='L52'></a><a href='#L52'>52</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</a>
+<a name='L66'></a><a href='#L66'>66</a>
+<a name='L67'></a><a href='#L67'>67</a>
+<a name='L68'></a><a href='#L68'>68</a>
+<a name='L69'></a><a href='#L69'>69</a>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</a>
+<a name='L72'></a><a href='#L72'>72</a>
+<a name='L73'></a><a href='#L73'>73</a>
+<a name='L74'></a><a href='#L74'>74</a>
+<a name='L75'></a><a href='#L75'>75</a>
+<a name='L76'></a><a href='#L76'>76</a>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">9x</span>
-<span class="cline-any cline-yes">9x</span>
-<span class="cline-any cline-yes">9x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">9x</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -153,7 +203,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -167,24 +225,29 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import type { Feed } from '../types';
+import type { Feed, Category } from '../types';
 import './FeedList.css';
 &nbsp;
 export default function FeedList() {
     const [feeds, setFeeds] = useState&lt;Feed[]&gt;([]);
+    const [tags, setTags] = useState&lt;Category[]&gt;([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState('');
 &nbsp;
     useEffect(() =&gt; {
-        fetch('/api/feed/')
-            .then((res) =&gt; {
-                <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) {
-<span class="cstat-no" title="statement not covered" >                    throw new Error('Failed to fetch feeds');</span>
-                }
+        Promise.all([
+            fetch('/api/feed/').then(res =&gt; {
+                <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) <span class="cstat-no" title="statement not covered" >throw new Error('Failed to fetch feeds');</span>
+                return res.json();
+            }),
+            fetch('/api/tag').then(res =&gt; {
+                <span class="missing-if-branch" title="if path not taken" >I</span>if (!res.ok) <span class="cstat-no" title="statement not covered" >throw new Error('Failed to fetch tags');</span>
                 return res.json();
             })
-            .then((data) =&gt; {
-                setFeeds(data);
+        ])
+            .then(([feedsData, tagsData]) =&gt; {
+                setFeeds(feedsData);
+                setTags(tagsData);
                 setLoading(false);
             })
             .catch((err) =&gt; {
@@ -198,20 +261,44 @@ export default function FeedList() {
 &nbsp;
     return (
         &lt;div className="feed-list"&gt;
-            &lt;h2&gt;Feeds&lt;/h2&gt;
-            {feeds.length === 0 ? (
-                &lt;p&gt;No feeds found.&lt;/p&gt;
-            ) : (
-                &lt;ul className="feed-list-items"&gt;
-                    {feeds.map((feed) =&gt; (
-                        &lt;li key={feed._id} className="feed-item"&gt;
-                            &lt;Link to={`/feed/${feed._id}`} className="feed-title"&gt;
-                                {feed.title || <span class="branch-1 cbranch-no" title="branch not covered" >feed.url}</span>
-                            &lt;/Link&gt;
-                            {feed.category &amp;&amp; &lt;span className="feed-category"&gt;{feed.category}&lt;/span&gt;}
-                        &lt;/li&gt;
-                    ))}
+            &lt;div className="filter-section"&gt;
+                &lt;ul className="filter-list"&gt;
+                    &lt;li&gt;&lt;Link to="/?filter=unread"&gt;Unread&lt;/Link&gt;&lt;/li&gt;
+                    &lt;li&gt;&lt;Link to="/?filter=all"&gt;All&lt;/Link&gt;&lt;/li&gt;
+                    &lt;li&gt;&lt;Link to="/?filter=starred"&gt;Starred&lt;/Link&gt;&lt;/li&gt;
                 &lt;/ul&gt;
+            &lt;/div&gt;
+            &lt;div className="feed-section"&gt;
+                &lt;h2&gt;Feeds&lt;/h2&gt;
+                {feeds.length === 0 ? (
+                    &lt;p&gt;No feeds found.&lt;/p&gt;
+                ) : (
+                    &lt;ul className="feed-list-items"&gt;
+                        {feeds.map((feed) =&gt; (
+                            &lt;li key={feed._id} className="sidebar-feed-item"&gt;
+                                &lt;Link to={`/feed/${feed._id}`} className="feed-title"&gt;
+                                    {feed.title || <span class="branch-1 cbranch-no" title="branch not covered" >feed.url}</span>
+                                &lt;/Link&gt;
+                                {feed.category &amp;&amp; &lt;span className="feed-category"&gt;{feed.category}&lt;/span&gt;}
+                            &lt;/li&gt;
+                        ))}
+                    &lt;/ul&gt;
+                )}
+            &lt;/div&gt;
+&nbsp;
+            {tags &amp;&amp; tags.length &gt; 0 &amp;&amp; (
+                &lt;div className="tag-section"&gt;
+                    &lt;h2&gt;Tags&lt;/h2&gt;
+                    &lt;ul className="tag-list-items"&gt;
+                        {tags.map((tag) =&gt; (
+                            &lt;li key={tag.title} className="tag-item"&gt;
+                                &lt;Link to={`/tag/${encodeURIComponent(tag.title)}`} className="tag-link"&gt;
+                                    {tag.title}
+                                &lt;/Link&gt;
+                            &lt;/li&gt;
+                        ))}
+                    &lt;/ul&gt;
+                &lt;/div&gt;
             )}
         &lt;/div&gt;
     );
@@ -223,7 +310,7 @@ export default function FeedList() {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-13T15:03:42.999Z
+                at 2026-02-13T21:49:58.924Z
             </div>
         <script src="../../prettify.js"></script>
         <script>