all caught up icon, counter dynamic

vue/src/components/AppNav.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { useFeeds } from '@/composables/useFeeds'
 
 const router = useRouter()
 const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()
 
+const unreadCount = computed(() => feeds.value.filter(f => !f.read).length)
+
 const menuOpen = ref(false)
 
 function toggleMenu() {
@@ -52,7 +54,7 @@ function handleToggleLayout() {
 <template>
   <header class="app-nav">
     <div class="app-nav__wrapper">
-      <span class="app-nav__title">RSS Reader<span v-if="feeds.length" class="app-nav__unread"> ({{ feeds.length }})</span></span>
+      <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
       <button
         class="app-nav__hamburger"
         type="button"