fix sync issue, frontend improvement

vue/src/components/AppNav.vue

@@ -4,7 +4,7 @@ import { RouterLink, useRouter } from 'vue-router'
 import { useFeeds } from '@/composables/useFeeds'
 
 const router = useRouter()
-const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()
 
 const menuOpen = ref(false)
 
@@ -52,7 +52,7 @@ function handleToggleLayout() {
 <template>
   <header class="app-nav">
     <div class="app-nav__wrapper">
-      <span class="app-nav__title">RSS Reader</span>
+      <span class="app-nav__title">RSS Reader<span v-if="feeds.length" class="app-nav__unread"> ({{ feeds.length }})</span></span>
       <button
         class="app-nav__hamburger"
         type="button"
@@ -111,6 +111,11 @@ function handleToggleLayout() {
   font-size: clamp(1.1rem, 4vw, 1.4rem);
 }
 
+.app-nav__unread {
+  font-weight: normal;
+  opacity: 0.6;
+}
+
 .app-nav__hamburger {
   display: inline-flex;
   align-items: center;