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"

vue/src/components/RssFeeds.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
+import { onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
 import { useFeeds } from '@/composables/useFeeds';
 
 const {
@@ -43,22 +43,6 @@ let touchStartY = null
 const SWIPE_THRESHOLD_X = 50 // min horizontal travel (px) to count as a swipe
 const SWIPE_RESTRAINT_Y = 75 // max vertical travel (px) before it's treated as a scroll, not a swipe
 
-// Drives which slide-in/slide-out transition ('slide-next' / 'slide-prev') the
-// article view uses — set right before the index actually changes, by both
-// the nav buttons and the swipe handler below, so the two triggers animate
-// identically.
-const slideDirection = ref('next')
-
-function navigateToNextArticle() {
-  slideDirection.value = 'next'
-  nextArticle()
-}
-
-function navigateToPrevArticle() {
-  slideDirection.value = 'prev'
-  prevArticle()
-}
-
 function onArticleTouchStart(event) {
   // Ignore multi-touch (pinch-zoom) and swipes starting inside a
   // horizontally-scrollable code block (.article-feature__content :deep(pre))
@@ -83,9 +67,9 @@ function onArticleTouchEnd(event) {
   if (Math.abs(deltaX) < SWIPE_THRESHOLD_X || Math.abs(deltaY) > SWIPE_RESTRAINT_Y) return
 
   if (deltaX < 0) {
-    navigateToNextArticle()
+    nextArticle()
   } else {
-    navigateToPrevArticle()
+    prevArticle()
   }
 }
 
@@ -189,20 +173,22 @@ onMounted(async () => {
         </svg>
         <p class="empty-state__label">All caught up</p>
       </div>
-      <template v-else>
-        <Transition :name="`slide-${slideDirection}`">
-          <article class="article-feature" :key="currentIndex">
-            <p class="article-feature__source">{{ feeds[currentIndex].feedTitle }}</p>
-            <h2 @click="loadReadable(feeds[currentIndex], currentIndex)" class="article-feature__title">{{ feeds[currentIndex].title }}</h2>
-            <h3 class="article-feature__meta">{{ feeds[currentIndex].timestamp }}</h3>
-            <p class="feed-original-link">
-              <a :href="feeds[currentIndex].url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
-              <button type="button" class="feed-share-btn" :title="shareLabel" @click="shareUrl(feeds[currentIndex].url)">{{ shareLabel }}</button>
-            </p>
-            <p class="article-feature__content" :class="{ 'article-feature__content--readable': feeds[currentIndex].readable }" v-html="feeds[currentIndex].content"></p>
-          </article>
-        </Transition>
-      </template>
+      <!-- Deliberately no enter/leave transition here: Vue's <Transition>
+           component forces a synchronous whole-document reflow
+           (document.body.offsetHeight, in @vue/runtime-dom's forceReflow) on
+           every enter/leave, regardless of the app's own CSS — confirmed (via
+           a DevTools performance trace) to be what was corrupting the header's
+           native <select>/<button> rendering during article paging. -->
+      <article v-else class="article-feature" :key="currentIndex">
+        <p class="article-feature__source">{{ feeds[currentIndex].feedTitle }}</p>
+        <h2 @click="loadReadable(feeds[currentIndex], currentIndex)" class="article-feature__title">{{ feeds[currentIndex].title }}</h2>
+        <h3 class="article-feature__meta">{{ feeds[currentIndex].timestamp }}</h3>
+        <p class="feed-original-link">
+          <a :href="feeds[currentIndex].url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
+          <button type="button" class="feed-share-btn" :title="shareLabel" @click="shareUrl(feeds[currentIndex].url)">{{ shareLabel }}</button>
+        </p>
+        <p class="article-feature__content" :class="{ 'article-feature__content--readable': feeds[currentIndex].readable }" v-html="feeds[currentIndex].content"></p>
+      </article>
 
       <div class="article-nav">
         <button
@@ -210,14 +196,14 @@ onMounted(async () => {
           class="article-nav__btn"
           :disabled="currentIndex === 0"
           aria-label="Previous article"
-          @click="navigateToPrevArticle"
+          @click="prevArticle"
         >&uarr;</button>
         <button
           type="button"
           class="article-nav__btn"
           :disabled="feeds.length === 0 || currentIndex === feeds.length - 1"
           aria-label="Next article"
-          @click="navigateToNextArticle"
+          @click="nextArticle"
         >&darr;</button>
       </div>
     </div>
@@ -381,46 +367,6 @@ onMounted(async () => {
   max-width: 720px;
 }
 
-/* Slide-in/out when paging between articles (swipe or nav buttons). The
-   outgoing article is pulled out of flex flow during its leave transition so
-   the incoming one can take its place immediately, instead of the two
-   stacking and doubling the page height for the transition's duration. */
-.slide-next-enter-active,
-.slide-next-leave-active,
-.slide-prev-enter-active,
-.slide-prev-leave-active {
-  transition: transform 0.28s ease, opacity 0.28s ease;
-}
-
-.slide-next-leave-active,
-.slide-prev-leave-active {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.slide-next-enter-from {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.slide-next-leave-to {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-.slide-prev-enter-from {
-  transform: translateX(-100%);
-  opacity: 0;
-}
-
-.slide-prev-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
 .article-feature__source {
   margin: 0 0 0.5em;
   padding: 0 1rem;

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

@@ -306,9 +306,18 @@ describe('AppNav', () => {
       // Reset scroll position so each mount's lastY baseline starts at 0.
       Object.defineProperty(window, 'scrollY', { value: 0, configurable: true, writable: true })
       vi.stubGlobal('requestAnimationFrame', (cb) => { cb(); return 0 })
-      // offsetHeight is 0 in jsdom; give the header a real height so the
-      // "near the top" guard (scrollY <= headerH) has something to compare to.
-      vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(50)
+      // getBoundingClientRect() is all-zero in jsdom; give the header a real
+      // height so onMounted()'s one-time measurement (which onScroll() then
+      // reuses instead of re-reading offsetHeight — see AppNav.vue) has
+      // something to compare against for the "near the top" guard. This is a
+      // prototype-wide spy (scoped to this describe block only, restored in
+      // afterEach), so it returns a full DOMRect-shaped object rather than a
+      // partial one — no test here happens to call getBoundingClientRect() on
+      // anything but the header, but a bare `{ height: 50 }` would silently
+      // hand back `undefined` for top/left/width/etc. to any code that did.
+      vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+        height: 50, width: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0, toJSON() {},
+      })
     })
 
     afterEach(() => {