counter on feed select

vue/src/components/AppNav.vue

@@ -6,7 +6,7 @@ import Modal from './modal/AddUrl.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, lastProgrammaticScroll } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, feedUnreadCounts, setFeedFilter, unreadCount, lastProgrammaticScroll } = useFeeds()
 
 const headerRef = ref(null)
 
@@ -155,7 +155,7 @@ function handleToggleLayout() {
         @change="setFeedFilter($event.target.value || null)"
       >
         <option value="">All feeds</option>
-        <option v-for="title in feedTitles" :key="title" :value="title">{{ title }}</option>
+        <option v-for="title in feedTitles" :key="title" :value="title">{{ title }} ({{ feedUnreadCounts[title] ?? 0 }})</option>
       </select>
       <button
         class="app-nav__hamburger"

vue/src/components/__tests__/AppNav.spec.js

@@ -241,8 +241,9 @@ describe('AppNav', () => {
     await flushPromises()
 
     const options = wrapper.find('.app-nav__filter').findAll('option').map(o => o.text())
-    // "All feeds" first, then distinct titles sorted alphabetically.
-    expect(options).toEqual(['All feeds', 'Feed A', 'Feed B'])
+    // "All feeds" first, then distinct titles sorted alphabetically, each with
+    // its unread count.
+    expect(options).toEqual(['All feeds', 'Feed A (2)', 'Feed B (1)'])
   })
 
   it('does not render the feed filter when there are no feeds', async () => {