remove slide effect

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, feedUnreadCounts, setFeedFilter, unreadCount, lastProgrammaticScroll } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, lastProgrammaticScroll } = useFeeds()
 
 const headerRef = ref(null)
 
@@ -27,15 +27,25 @@ const REVEAL_THRESHOLD = 12 // px of accumulated travel before toggling
 const PROGRAMMATIC_SUPPRESS_MS = 300
 let lastY = 0
 let accumulated = 0
+// Cached in onMounted() below instead of re-read via headerRef.offsetHeight
+// on every scroll event. The header is a fixed size (see onMounted), so
+// re-measuring it here was pure waste — worse, a DevTools performance trace
+// showed that offsetHeight read landing right after an unrelated DOM write
+// elsewhere on the page (e.g. the article view swapping in a new article)
+// forces the browser into a synchronous, forced-reflow layout pass right
+// there mid-script, instead of its normal scheduled one. Stays 0 until
+// onMounted() below sets it (before the scroll listener is attached, so
+// onScroll() never runs against the unset value) — keep that ordering if
+// this ever changes.
+let headerHeight = 0
 
 function onScroll() {
   const y = Math.max(0, window.scrollY)
-  const headerH = headerRef.value?.offsetHeight ?? 0
 
   // Always reveal near the very top, and keep it visible while the menu is
   // open (the dropdown is anchored to the header, so hiding it would slide the
   // open menu off-screen).
-  if (y <= headerH || menuOpen.value) {
+  if (y <= headerHeight || menuOpen.value) {
     hidden.value = false
     accumulated = 0
     lastY = y
@@ -71,13 +81,16 @@ function onScrollRaf() {
 onMounted(() => {
   // Drives #app's padding-top / RssFeeds' scroll-margin-top so content below
   // the fixed header isn't hidden behind it at scroll position 0. The header is
-  // a fixed size, so this is measured once on mount and never changes.
+  // a fixed size, so this is measured once on mount and never changes — and
+  // onScroll() reuses this same measurement instead of re-reading it.
   const h = headerRef.value?.getBoundingClientRect().height ?? 0
   document.documentElement.style.setProperty('--app-nav-height', `${h}px`)
+  headerHeight = h
 
   lastY = Math.max(0, window.scrollY)
   window.addEventListener('scroll', onScrollRaf, { passive: true })
   document.addEventListener('click', onDocumentClick)
+  refreshUnreadDisplay()
 })
 
 onUnmounted(() => {
@@ -152,10 +165,11 @@ function handleToggleLayout() {
         class="app-nav__filter"
         :value="feedFilter ?? ''"
         aria-label="Filter by feed"
+        @focus="refreshUnreadDisplay"
         @change="setFeedFilter($event.target.value || null)"
       >
         <option value="">All feeds</option>
-        <option v-for="title in feedTitles" :key="title" :value="title">{{ title }} ({{ feedUnreadCounts[title] ?? 0 }})</option>
+        <option v-for="title in feedTitles" :key="title" :value="title">{{ title }} ({{ displayedFeedUnreadCounts[title] ?? 0 }})</option>
       </select>
       <button
         class="app-nav__hamburger"