From a898e7ac33d389cbde2e593bb671df25e3315e03 Mon Sep 17 00:00:00 2001
From: mace <safemind@posteo.net>
Date: Mon, 13 Jul 2026 17:46:49 +0200
Subject: [PATCH] counter on feed select

---
 vue/src/components/AppNav.vue                  |  4 ++--
 vue/src/components/__tests__/AppNav.spec.js    |  5 +++--
 vue/src/composables/__tests__/useFeeds.spec.js | 14 +++++++++++++-
 vue/src/composables/useFeeds.js                | 12 ++++++++++++
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/vue/src/components/AppNav.vue b/vue/src/components/AppNav.vue
index c808476..8f80a75 100644
--- a/vue/src/components/AppNav.vue
+++ b/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"
diff --git a/vue/src/components/__tests__/AppNav.spec.js b/vue/src/components/__tests__/AppNav.spec.js
index 67ba2b0..a88b7c6 100644
--- a/vue/src/components/__tests__/AppNav.spec.js
+++ b/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 () => {
diff --git a/vue/src/composables/__tests__/useFeeds.spec.js b/vue/src/composables/__tests__/useFeeds.spec.js
index 2cf58b0..2211761 100644
--- a/vue/src/composables/__tests__/useFeeds.spec.js
+++ b/vue/src/composables/__tests__/useFeeds.spec.js
@@ -13,7 +13,7 @@ class FakeIntersectionObserver {
 vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
 
 describe('useFeeds', () => {
-  const { feeds, allItems, feedFilter, feedTitles, unreadCount, setFeedFilter, showMessage, message, showModal, fetchData, sync, getReadable, setInitialLoad, handleIntersection, markAllRead, setupIntersectionObserver } = useFeeds()
+  const { feeds, allItems, feedFilter, feedTitles, feedUnreadCounts, unreadCount, setFeedFilter, showMessage, message, showModal, fetchData, sync, getReadable, setInitialLoad, handleIntersection, markAllRead, setupIntersectionObserver } = useFeeds()
 
   beforeEach(() => {
     localStorage.setItem('user-token', 'test-token')
@@ -252,6 +252,18 @@ describe('useFeeds', () => {
       await setFeedFilter(null)
       expect(unreadCount.value).toBe(3)
     })
+
+    it('exposes per-feed unread counts, excluding items marked read in place', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      expect(feedUnreadCounts.value).toEqual({ 'Feed A': 2, 'Feed B': 1 })
+
+      // Article view marks items read in place (feed.read = true) without
+      // removing them from the master — the counts must not include those.
+      allItems.value.find(i => i.id === 3).read = true
+      expect(feedUnreadCounts.value).toEqual({ 'Feed A': 1, 'Feed B': 1 })
+    })
   })
 
   it('strips leftover embedded-video placeholder headings', async () => {
diff --git a/vue/src/composables/useFeeds.js b/vue/src/composables/useFeeds.js
index cf33af3..0eb8d5b 100644
--- a/vue/src/composables/useFeeds.js
+++ b/vue/src/composables/useFeeds.js
@@ -22,6 +22,17 @@ const feedTitles = computed(() => {
   if (feedFilter.value) titles.add(feedFilter.value)
   return [...titles].sort((a, b) => a.localeCompare(b))
 })
+// Unread count per feed title, shown next to each option in the filter
+// <select>. Derived from the master (allItems) so article view's
+// read-but-still-shown items are excluded. A title kept in feedTitles with no
+// unread items left has no key here — render it as 0.
+const feedUnreadCounts = computed(() => {
+  const counts = {}
+  for (const item of allItems.value) {
+    if (!item.read) counts[item.feedTitle] = (counts[item.feedTitle] ?? 0) + 1
+  }
+  return counts
+})
 // The header badge count: unread items in the selected feed when a filter is
 // active, otherwise the global unread total. Derived from the master (allItems)
 // rather than the displayed `feeds` so article view's read-but-still-shown
@@ -466,6 +477,7 @@ export function useFeeds() {
     allItems,
     feedFilter,
     feedTitles,
+    feedUnreadCounts,
     unreadCount,
     setFeedFilter,
     showMessage,