Replace threshold-based swipe with live drag-follow in article view

The article now visually tracks the finger in real time while swiping (via a rAF-throttled touchmove handler), instead of only reacting after the fact on touchend. On release it completes the page-turn if dragged past ~35% of the article's width, or on a fast-enough flick even short of that distance; otherwise it springs back to center. Dragging past the first/last article is damped rather than free, for tactile feedback that there's nothing further that way. A vertical drag is detected within the first ~10px of movement and left alone so it can't fight normal page scrolling. Also fixes a real bug found while testing the flick path: Date.now() has ~1ms resolution, so a genuinely fast flick often measures as elapsed === 0. The velocity calculation was treating that as "zero velocity" (dividing 0 elapsed into "no flick") instead of "as fast as it gets" — now a zero-elapsed gesture with real movement counts as a flick outright. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Merge branch 'fix-android-swipe-gesture'
2026-08-26 22:03:41 +02:00 · 2026-08-26 21:28:18 +02:00 · 2026-08-26 21:27:23 +02:00 · 2026-08-26 21:16:26 +02:00 · 2026-08-26 21:14:52 +02:00 · 2026-08-03 14:58:45 +02:00
11 changed files with 695 additions and 66 deletions
@@ -2,6 +2,7 @@ services:
  postgres:
    container_name: "rss-postgres"
    image: "postgres:18"
+    restart: unless-stopped
    ports:
      - "5432:5432"
    environment:
@@ -16,6 +17,7 @@ services:
    build:
      context: .
      dockerfile: Dockerfile
+    restart: unless-stopped
    depends_on:
      - postgres
    environment:
@@ -31,6 +33,7 @@ services:
    build:
      context: ./vue
      dockerfile: Dockerfile
+    restart: unless-stopped
    depends_on:
      - backend
    ports:
@@ -1,5 +1,7 @@
 # --- builder ---
-FROM node:20-alpine AS builder
+# Node 24 (active LTS): Node 20 is past EOL (April 2026), and vue-router 5's
+# Babel 8 toolchain requires ^22.18.0 || >=24.11.0 (EBADENGINE on node 20).
+FROM node:24-alpine AS builder

 WORKDIR /app
 COPY package.json package-lock.json ./
@@ -1275,9 +1275,9 @@
      }
    },
    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
      "dev": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
@@ -1427,9 +1427,9 @@
      }
    },
    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
+      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
      "dev": true,
      "dependencies": {
        "balanced-match": "^1.0.0",
@@ -1437,12 +1437,12 @@
      }
    },
    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@@ -2205,9 +2205,9 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -2247,9 +2247,9 @@
      }
    },
    "node_modules/flatted": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
-      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
      "dev": true
    },
    "node_modules/follow-redirects": {
@@ -2300,15 +2300,15 @@
      }
    },
    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
      },
      "engines": {
        "node": ">= 6"
@@ -2812,10 +2812,20 @@
      "dev": true
    },
    "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.0.tgz",
+      "integrity": "sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==",
      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
      "dependencies": {
        "argparse": "^2.0.1"
      },
@@ -3224,9 +3234,9 @@
      }
    },
    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
      "dev": true
    },
    "node_modules/lodash.merge": {
@@ -3299,12 +3309,12 @@
      }
    },
    "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
      "dev": true,
      "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
        "picomatch": "^2.3.1"
      },
      "engines": {
@@ -3343,9 +3353,9 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
      "dev": true,
      "dependencies": {
        "brace-expansion": "^1.1.7"
@@ -3673,9 +3683,9 @@
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
    },
    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
      "dev": true,
      "engines": {
        "node": ">=8.6"
@@ -4450,9 +4460,9 @@
      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA=="
    },
    "node_modules/undici": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.27.2.tgz",
-      "integrity": "sha512-uZsKNuzQxDMUY6M3pIMvy5tvlGmtq8XJ2oLAkfRKGNu+1VQAIvLy2xIVG5ATZl5wDXl/tddByAWCizRbOme+TA==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
      "dev": true,
      "engines": {
        "node": ">=20.18.1"
@@ -81,6 +81,12 @@ body {
     wider than the visible content area (scrollbar) and would otherwise
     introduce a horizontal scrollbar. */
  overflow-x: hidden;
+  /* Without this, a horizontal touch drag on content with nothing left to
+     scroll (true here, given overflow-x: hidden above) is claimed by
+     Chrome-on-Android's native swipe-to-go-back/forward gesture before our
+     own touchend listener (article-view swipe navigation) ever sees it —
+     the gesture is silently swallowed with no error, no touchend fires. */
+  overscroll-behavior-x: contain;
  color: var(--color-text);
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
@@ -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"
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
 import { useFeeds } from '@/composables/useFeeds';

 const {
@@ -34,6 +34,126 @@ function scrollToNextArticle() {
  }
 }

+// Swipe-to-navigate in article view. The article visually tracks the finger
+// while dragging (dragOffsetX/isDragging below), then either completes the
+// page-turn or springs back to center on release. This is transient
+// per-gesture state, not shared app state, so it's kept local to this
+// component rather than in useFeeds() — nothing outside this component needs
+// it.
+const dragOffsetX = ref(0) // live translateX (px) applied to the current article while dragging or springing back
+const isDragging = ref(false) // true only while actively tracking touchmove — disables the CSS transition so the article follows the finger with zero lag; the spring-back and the eventual page-turn both happen after this flips back to false, so they use the (slower, already-tuned) CSS transitions instead
+
+let touchStartX = null
+let touchStartY = null
+let touchStartTime = null
+let gestureAxis = null // 'horizontal' | 'vertical' | null (undecided) — locked in after DIRECTION_LOCK_THRESHOLD of movement, so a single gesture can't both page the article and scroll the page
+let articleWidth = 0 // captured on touchstart; the live drag and the commit-distance check below are relative to it
+let dragRafPending = false
+let pendingDragOffset = 0
+
+const DIRECTION_LOCK_THRESHOLD = 10 // px of movement before an ambiguous drag commits to horizontal (swipe) or vertical (scroll)
+const COMMIT_DISTANCE_RATIO = 0.35 // fraction of the article's width dragged that counts as "far enough" to complete the page-turn
+const COMMIT_VELOCITY = 0.5 // px/ms — a flick at least this fast completes the page-turn even short of the distance ratio
+const BOUNDARY_DAMPING = 0.35 // drag multiplier applied when dragging past the first/last article, so it still moves a little (feedback) but resists
+
+// 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))
+  // — those should scroll the block, not page the article.
+  if (event.touches.length !== 1 || event.target.closest('pre')) {
+    touchStartX = null
+    return
+  }
+  const touch = event.touches[0]
+  touchStartX = touch.clientX
+  touchStartY = touch.clientY
+  touchStartTime = Date.now()
+  gestureAxis = null
+  const article = event.currentTarget.querySelector('.article-feature')
+  articleWidth = article ? article.offsetWidth : window.innerWidth
+}
+
+function onArticleTouchMove(event) {
+  if (touchStartX === null || event.touches.length !== 1) return
+  const touch = event.touches[0]
+  const deltaX = touch.clientX - touchStartX
+  const deltaY = touch.clientY - touchStartY
+
+  if (gestureAxis === null) {
+    if (Math.abs(deltaX) < DIRECTION_LOCK_THRESHOLD && Math.abs(deltaY) < DIRECTION_LOCK_THRESHOLD) return
+    gestureAxis = Math.abs(deltaX) > Math.abs(deltaY) ? 'horizontal' : 'vertical'
+    if (gestureAxis === 'horizontal') isDragging.value = true
+  }
+  if (gestureAxis !== 'horizontal') return // let the page scroll normally instead
+
+  // Stop the page from also scrolling vertically (and the browser's own
+  // horizontal-overscroll gesture) while we're driving the drag ourselves.
+  // Requires this listener to not be passive.
+  event.preventDefault()
+
+  const atBoundary = (deltaX < 0 && currentIndex.value === feeds.value.length - 1) ||
+    (deltaX > 0 && currentIndex.value === 0)
+  pendingDragOffset = atBoundary ? deltaX * BOUNDARY_DAMPING : deltaX
+
+  // rAF-throttled: touchmove can fire faster than the display refreshes. If a
+  // frame is already scheduled, later events in that window just update
+  // pendingDragOffset above — the callback always reads the latest value
+  // once it actually runs, rather than whatever triggered the first one.
+  if (dragRafPending) return
+  dragRafPending = true
+  requestAnimationFrame(() => {
+    dragOffsetX.value = pendingDragOffset
+    dragRafPending = false
+  })
+}
+
+function onArticleTouchEnd(event) {
+  if (touchStartX === null) return
+  const wasDraggingHorizontally = gestureAxis === 'horizontal'
+  // Computed fresh from the release position rather than read back from
+  // dragOffsetX, which is rAF-throttled and so can be a frame stale.
+  const deltaX = event.changedTouches[0].clientX - touchStartX
+  const elapsed = Date.now() - touchStartTime
+
+  touchStartX = null
+  touchStartY = null
+  gestureAxis = null
+  isDragging.value = false
+
+  if (!wasDraggingHorizontally) return
+
+  // Date.now() only has ~1ms resolution, so a genuinely fast flick often
+  // measures as elapsed === 0 — treat that as "as fast as it gets" (clears
+  // the flick check) rather than dividing by zero into "no velocity at all".
+  const isFastFlick = elapsed > 0 ? Math.abs(deltaX / elapsed) > COMMIT_VELOCITY : deltaX !== 0
+  const shouldComplete = Math.abs(deltaX) > articleWidth * COMMIT_DISTANCE_RATIO || isFastFlick
+  dragOffsetX.value = 0 // springs back to center — or, if completing, the (now off-screen-bound) article being replaced
+
+  if (!shouldComplete) return
+
+  if (deltaX < 0) {
+    navigateToNextArticle()
+  } else {
+    navigateToPrevArticle()
+  }
+}
+
 // Small images (icons, logos, ...) look bad stretched to the full-bleed
 // width used for readable article images — leave them at their natural size
 // instead. Intrinsic size is only known once the image has loaded, so check
@@ -126,7 +246,13 @@ onMounted(async () => {
      >&darr;</button>
    </div>

-    <div v-else class="article-single">
+    <div
+      v-else
+      class="article-single"
+      @touchstart.passive="onArticleTouchStart"
+      @touchmove="onArticleTouchMove"
+      @touchend.passive="onArticleTouchEnd"
+    >
      <div v-if="feeds.length == 0" class="empty-state">
        <svg class="empty-state__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10"/>
@@ -135,16 +261,23 @@ onMounted(async () => {
        <p class="empty-state__label">All caught up</p>
      </div>
      <template v-else>
-        <article class="article-feature">
-          <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 :name="`slide-${slideDirection}`">
+          <article
+            class="article-feature"
+            :class="{ 'article-feature--dragging': isDragging }"
+            :style="dragOffsetX ? { transform: `translateX(${dragOffsetX}px)` } : null"
+            :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>

      <div class="article-nav">
@@ -153,14 +286,14 @@ onMounted(async () => {
          class="article-nav__btn"
          :disabled="currentIndex === 0"
          aria-label="Previous article"
-          @click="prevArticle"
+          @click="navigateToPrevArticle"
        >&uarr;</button>
        <button
          type="button"
          class="article-nav__btn"
          :disabled="feeds.length === 0 || currentIndex === feeds.length - 1"
          aria-label="Next article"
-          @click="nextArticle"
+          @click="navigateToNextArticle"
        >&darr;</button>
      </div>
    </div>
@@ -315,6 +448,57 @@ onMounted(async () => {
 .article-feature {
  width: 100%;
  max-width: 720px;
+  /* Governs the drag-release spring-back (dragOffsetX snapping to 0 after a
+     cancelled swipe). Overridden by .article-feature--dragging (below, so it
+     wins the tie) while actively tracking a touchmove, and by the
+     .slide-next/.slide-prev *-active rules (further below, so they win too)
+     during an actual page-turn — both need their own transform transition
+     timing instead. */
+  transition: transform 0.2s ease;
+}
+
+.article-feature--dragging {
+  transition: none;
+}
+
+/* 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 {
@@ -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 () => {
@@ -15,6 +15,20 @@ class FakeIntersectionObserver {
 }
 vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)

+// Shared by the swipe-navigation tests below, which all start from the same
+// two-article article view.
+function twoArticleFeed() {
+  return [
+    {
+      title: 'My Feed',
+      items: [
+        { id: 1, title: 'Article one', content: '<p>one</p>', url: 'https://example.test/1', timestamp: '2026-02-01 10:00:00' },
+        { id: 2, title: 'Article two', content: '<p>two</p>', url: 'https://example.test/2', timestamp: '2026-01-01 10:00:00' },
+      ],
+    },
+  ]
+}
+
 describe('RssFeeds', () => {
  beforeEach(() => {
    localStorage.setItem('user-token', 'test-token')
@@ -345,4 +359,262 @@ describe('RssFeeds', () => {
    const titles = wrapper.findAll('.feed-title').map(el => el.text())
    expect(titles).toEqual(['Article three'])
  })
+
+  describe('swipe navigation in article view', () => {
+    // The drag-follow handler is rAF-throttled (dragOffsetX only updates once
+    // per frame) and reads the article's real offsetWidth for the
+    // commit-distance check — stub both so gestures are deterministic. Per
+    // the CLAUDE.md Vitest gotcha, avoid bare fake timers here since they'd
+    // also fake rAF and clobber this manual stub. (Faking Date, even scoped,
+    // was tried for the release-velocity check below and broke test-utils'
+    // event dispatch outright — real small setTimeout delays instead.)
+    beforeEach(() => {
+      vi.stubGlobal('requestAnimationFrame', (cb) => { cb(); return 0 })
+      vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(400)
+    })
+
+    afterEach(() => {
+      // Not vi.unstubAllGlobals(): it would also remove the file-level
+      // IntersectionObserver stub (stubGlobal isn't describe-scoped), and
+      // every test in here re-stubs requestAnimationFrame in beforeEach
+      // anyway, so there's nothing to reset it back to for.
+      vi.restoreAllMocks()
+    })
+
+    // Drives one full touchstart -> touchmove -> touchend gesture. delayMs is
+    // a genuine wall-clock wait before releasing — it's how tests control the
+    // release velocity (deltaX / elapsed) the component computes, alongside
+    // the distance dragged.
+    async function swipe(wrapper, { startX, startY = 100, endX, endY = 100, delayMs = 0 }) {
+      const article = wrapper.find('.article-single')
+      await article.trigger('touchstart', { touches: [{ clientX: startX, clientY: startY }] })
+      await article.trigger('touchmove', { touches: [{ clientX: endX, clientY: endY }] })
+      if (delayMs > 0) {
+        await new Promise(resolve => setTimeout(resolve, delayMs))
+      }
+      await article.trigger('touchend', { changedTouches: [{ clientX: endX, clientY: endY }] })
+      await flushPromises()
+    }
+
+    it('drags the article to follow the finger while swiping', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      const article = wrapper.find('.article-single')
+      await article.trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+      await article.trigger('touchmove', { touches: [{ clientX: 150, clientY: 100 }] })
+
+      const dragged = wrapper.find('.article-feature')
+      expect(dragged.classes()).toContain('article-feature--dragging')
+      expect(dragged.attributes('style')).toContain('translateX(-50px)')
+
+      wrapper.unmount()
+    })
+
+    it('completes the page-turn on a swipe past the distance threshold', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      // 400px-wide article (mocked above), 35% commit ratio -> needs >140px.
+      await swipe(wrapper, { startX: 300, endX: 80 })
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article two')
+
+      wrapper.unmount()
+    })
+
+    it('completes the page-turn backwards on a swipe past the distance threshold', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+      await wrapper.findAll('.article-nav__btn')[1].trigger('click')
+      await flushPromises()
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article two')
+
+      await swipe(wrapper, { startX: 80, endX: 300 })
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+      wrapper.unmount()
+    })
+
+    it('springs back without navigating on a short, slow drag', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      // Only 20px of a 400px-wide article (well under the 140px distance
+      // threshold), released slowly enough that velocity doesn't qualify
+      // either (well under the 0.5px/ms flick threshold).
+      await swipe(wrapper, { startX: 200, endX: 180, delayMs: 150 })
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+      expect(wrapper.find('.article-feature').classes()).not.toContain('article-feature--dragging')
+
+      wrapper.unmount()
+    })
+
+    it('completes the page-turn on a fast flick even under the distance threshold', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      // Only 60px (well under the 140px distance threshold), released with
+      // no extra delay. Date.now() only has ~1ms resolution, so a gesture
+      // this fast typically measures as 0ms elapsed — the component treats
+      // that as clearing the flick check outright (see the comment by
+      // isFastFlick in onArticleTouchEnd) rather than as "no velocity".
+      await swipe(wrapper, { startX: 200, endX: 140 })
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article two')
+
+      wrapper.unmount()
+    })
+
+    it('does not drag or navigate on a mostly-vertical drag', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      await swipe(wrapper, { startX: 200, startY: 100, endX: 205, endY: 250 })
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+      wrapper.unmount()
+    })
+
+    it('does not navigate when the vertical component dominates a diagonal drag', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      // More horizontal travel (70px) than in the previous test, but the
+      // vertical component (100px) is still larger — locks as a vertical
+      // scroll, not a swipe, regardless of the sizeable deltaX.
+      await swipe(wrapper, { startX: 200, startY: 100, endX: 130, endY: 200 })
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+      wrapper.unmount()
+    })
+
+    it('applies resistance when dragging past the last article', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+      await wrapper.findAll('.article-nav__btn')[1].trigger('click') // now on the last article
+      await flushPromises()
+
+      const article = wrapper.find('.article-single')
+      await article.trigger('touchstart', { touches: [{ clientX: 300, clientY: 100 }] })
+      await article.trigger('touchmove', { touches: [{ clientX: 200, clientY: 100 }] }) // still swiping towards "next"
+
+      // Damped to 35% of the raw -100px drag, not the full amount.
+      expect(wrapper.find('.article-feature').attributes('style')).toContain('translateX(-35px)')
+
+      wrapper.unmount()
+    })
+
+    it('ignores a multi-touch gesture (pinch-zoom)', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: twoArticleFeed() } })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      const article = wrapper.find('.article-single')
+      await article.trigger('touchstart', {
+        touches: [{ clientX: 200, clientY: 100 }, { clientX: 50, clientY: 100 }],
+      })
+      await article.trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 100 }] })
+      await flushPromises()
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+
+      wrapper.unmount()
+    })
+
+    it('does not drag or navigate when a swipe starts inside a code block', async () => {
+      axios.get.mockResolvedValueOnce({
+        data: {
+          feeds: [
+            {
+              title: 'My Feed',
+              items: [
+                { id: 1, title: 'Article one', content: '<pre>some code</pre>', url: 'https://example.test/1', timestamp: '2026-02-01 10:00:00' },
+                { id: 2, title: 'Article two', content: '<p>two</p>', url: 'https://example.test/2', timestamp: '2026-01-01 10:00:00' },
+              ],
+            },
+          ],
+        },
+      })
+      axios.put.mockResolvedValue({ status: 200 })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      await wrapper.find('pre').trigger('touchstart', { touches: [{ clientX: 200, clientY: 100 }] })
+      await wrapper.find('.article-single').trigger('touchmove', { touches: [{ clientX: 130, clientY: 100 }] })
+      await wrapper.find('.article-single').trigger('touchend', { changedTouches: [{ clientX: 130, clientY: 100 }] })
+      await flushPromises()
+
+      expect(wrapper.find('.article-single .article-feature__title').text()).toBe('Article one')
+      expect(wrapper.find('.article-feature').classes()).not.toContain('article-feature--dragging')
+
+      wrapper.unmount()
+    })
+
+    it('does not throw when swiping with an empty feed list', async () => {
+      axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+
+      const wrapper = mount(RssFeeds)
+      await flushPromises()
+      useFeeds().toggleViewMode()
+      await flushPromises()
+
+      await swipe(wrapper, { startX: 200, endX: 80 })
+
+      expect(wrapper.text()).toContain('All caught up')
+
+      wrapper.unmount()
+    })
+  })
 })
@@ -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 } = 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')
@@ -119,6 +119,39 @@ describe('useFeeds', () => {
    setInitialLoad(false)
  })

+  it('ignores the initial observer snapshot on connect so a scrolled-down reconnect cannot mass-mark', async () => {
+    feeds.value = [
+      { id: 201, title: 'First' },
+      { id: 202, title: 'Second' },
+    ]
+    setInitialLoad(true)
+    axios.put.mockResolvedValue({ status: 200 })
+
+    // A .observe node must exist for setupIntersectionObserver to arm the skip.
+    const node = document.createElement('div')
+    node.className = 'observe'
+    document.body.appendChild(node)
+    setupIntersectionObserver()
+
+    // First callback after connect is the initial snapshot — must be dropped
+    // even though both entries look "scrolled past" (above the topbar).
+    await handleIntersection([
+      { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+      { isIntersecting: false, boundingClientRect: { y: -5 }, target: { id: '1' } },
+    ])
+    expect(axios.put).not.toHaveBeenCalled()
+    expect(feeds.value).toHaveLength(2)
+
+    // A genuine later scroll-past still marks read.
+    await handleIntersection([
+      { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+    ])
+    expect(axios.put).toHaveBeenCalledWith('/api/v1/article/read/201', null, expect.anything())
+
+    document.body.removeChild(node)
+    setInitialLoad(false)
+  })
+
  describe('feed filter', () => {
    const twoFeedsResponse = {
      data: {
@@ -219,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 () => {
@@ -0,0 +1,72 @@
+// Reproduces the "reload the tab while in article view" boot sequence:
+// module-scope init must pick up the persisted viewMode, and RssFeeds'
+// mount flow (fetchData + sync) must not reset it back to 'list'.
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+vi.mock('axios')
+
+class FakeIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
+
+describe('viewMode boot persistence', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    localStorage.clear()
+    localStorage.setItem('user-token', 'test-token')
+    localStorage.setItem('user-id', '7')
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('boots into article view when localStorage says so, surviving the mount fetch/sync', async () => {
+    localStorage.setItem('viewMode', 'article')
+
+    const axios = (await import('axios')).default
+    axios.get.mockResolvedValue({
+      data: {
+        feeds: [
+          {
+            title: 'My Feed',
+            items: [
+              { id: 1, title: 'Article one', content: '<p>hi</p>', url: 'https://example.test/1', timestamp: '2026-01-01 10:00:00' },
+            ],
+          },
+        ],
+      },
+    })
+    axios.post.mockResolvedValue({ status: 200 })
+    axios.put.mockResolvedValue({ status: 200 })
+
+    // Import AFTER setting storage — module-scope refs initialize at import.
+    const { useFeeds } = await import('../useFeeds')
+    const { viewMode } = useFeeds()
+    expect(viewMode.value).toBe('article')
+
+    const RssFeeds = (await import('../../components/RssFeeds.vue')).default
+    const wrapper = mount(RssFeeds)
+    await flushPromises()
+
+    expect(viewMode.value).toBe('article')
+    expect(wrapper.find('.article-single').exists()).toBe(true)
+    expect(wrapper.find('#article').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('boots into list view when the key is absent', async () => {
+    const axios = (await import('axios')).default
+    axios.get.mockResolvedValue({ data: { feeds: [] } })
+    axios.post.mockResolvedValue({ status: 200 })
+
+    const { useFeeds } = await import('../useFeeds')
+    const { viewMode } = useFeeds()
+    expect(viewMode.value).toBe('list')
+  })
+})
@@ -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
@@ -34,12 +45,21 @@ const unreadCount = computed(() => {
 })
 const message = ref('')
 const showModal = ref(false)
-const viewMode = ref('list') // 'list' | 'article' — toggled from the hamburger menu
+const viewMode = ref(localStorage.getItem('viewMode') || 'list') // 'list' | 'article' — toggled from the hamburger menu, persisted per device
 const currentIndex = ref(0)
 const layout = ref(localStorage.getItem('layout') || 'list') // 'list' | 'cards' — list-view display style, toggled from the hamburger menu

 let observer; // Declare observer outside the setup function
 let initialLoad = false
+// An IntersectionObserver always delivers an initial snapshot for every element
+// it starts observing. If the observer (re)connects while the page is scrolled
+// down — e.g. leaving a scrolled article view, an HMR module reload, or the
+// post-splice re-setup in handleIntersection — that snapshot reports every
+// article above the viewport as "not intersecting / scrolled past" and would
+// mark them all read at once. So each setupIntersectionObserver() sets this and
+// handleIntersection() drops exactly the first callback after a connect; only
+// genuine scroll-driven exits mark read after that.
+let skipNextObservation = false

 // Timestamp (performance.now()) of the most recent programmatic scroll / list
 // mutation that moves the page without user intent — currently the list-view
@@ -282,14 +302,25 @@ function setupIntersectionObserver() {
  });

  const observedDivs = document.querySelectorAll(".observe");
-  if (observedDivs.length > 0) {
-    observedDivs.forEach(observedDiv => {
-      observer.observe(observedDiv);
-    })
-  }
+  // Arm the skip only when we actually observe nodes: an observe() batch fires
+  // an initial snapshot to drop (a connect while scrolled down would otherwise
+  // mass-mark everything above the viewport), but with nothing observed there's
+  // no snapshot — and assigning unconditionally clears any stale flag from a
+  // prior no-op setup (e.g. one run in article view, which has no .observe nodes).
+  skipNextObservation = observedDivs.length > 0
+  observedDivs.forEach(observedDiv => {
+    observer.observe(observedDiv);
+  })
 }

 function handleIntersection(entries, topbarHeight = 0) {
+  // Drop the initial snapshot fired on (re)connect — see skipNextObservation.
+  // The old observer is disconnected before this new one observes, so only the
+  // latest observer's initial callback reaches here; one skip is enough.
+  if (skipNextObservation) {
+    skipNextObservation = false
+    return
+  }
  // Resolve all affected feeds before touching feeds.value — the target.id
  // indices are render-time positions that shift once we splice the array.
  const readFeeds = entries
@@ -386,6 +417,7 @@ async function leaveArticleView() {
  allItems.value = allItems.value.filter(feed => !feed.read)
  currentIndex.value = 0
  viewMode.value = 'list'
+  localStorage.setItem('viewMode', viewMode.value)
  // The v-if on the list container tears down and recreates all .observe DOM
  // nodes when switching views, so the intersection observer must be
  // re-pointed at the new elements after Vue has finished rendering.
@@ -405,6 +437,7 @@ function toggleViewMode() {
      observer = null
    }
    viewMode.value = 'article'
+    localStorage.setItem('viewMode', viewMode.value)
    currentIndex.value = 0
    markCurrentArticleRead()
  }
@@ -444,6 +477,7 @@ export function useFeeds() {
    allItems,
    feedFilter,
    feedTitles,
+    feedUnreadCounts,
    unreadCount,
    setFeedFilter,
    showMessage,
Author	SHA1	Message	Date
mathiasandClaude Sonnet 5	bfb926cec6	Replace threshold-based swipe with live drag-follow in article view The article now visually tracks the finger in real time while swiping (via a rAF-throttled touchmove handler), instead of only reacting after the fact on touchend. On release it completes the page-turn if dragged past ~35% of the article's width, or on a fast-enough flick even short of that distance; otherwise it springs back to center. Dragging past the first/last article is damped rather than free, for tactile feedback that there's nothing further that way. A vertical drag is detected within the first ~10px of movement and left alone so it can't fight normal page scrolling. Also fixes a real bug found while testing the flick path: Date.now() has ~1ms resolution, so a genuinely fast flick often measures as elapsed === 0. The velocity calculation was treating that as "zero velocity" (dividing 0 elapsed into "no flick") instead of "as fast as it gets" — now a zero-elapsed gesture with real movement counts as a flick outright. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-08-26 22:03:41 +02:00
mathiasandClaude Sonnet 5	77438d0532	Merge branch 'fix-android-swipe-gesture' Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-08-26 21:28:18 +02:00
mathiasandClaude Sonnet 5	49ceec5125	Fix article-view swipe being swallowed by Chrome-on-Android back gesture On real Android touchscreens, a horizontal drag on content with nothing left to scroll horizontally gets claimed by Chrome's native swipe-to-go-back/forward gesture before our own touchend listener (article-view swipe navigation) ever sees it — silently, with no touchend firing at all. Synthetic touch testing (mouse-drag emulation in devtools) doesn't go through that gesture recognizer, so it worked there while doing nothing on an actual phone. Fix: overscroll-behavior-x: contain on body stops Chrome from claiming the gesture for its own navigation, letting our touchend fire normally. Also drops the overflow-x: hidden added to .article-single for the slide transition — body already has it (for the same full-bleed-image reason), so it was redundant. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-08-26 21:27:23 +02:00
mathiasandClaude Sonnet 5	15ac8c287b	Merge branch 'article-view-swipe-nav' Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-08-26 21:16:26 +02:00
mathiasandClaude Sonnet 5	13d9c2c908	Add swipe navigation and slide transition to article view Swiping left/right in the single-article view now pages to the next/previous article, same as the up/down nav buttons. Touch handlers live on .article-single: a swipe needs >=50px horizontal travel and <=75px vertical travel to count (so scrolling/diagonal drags don't trigger it), and multi-touch or swipes starting inside a horizontally scrollable <pre> block are ignored so code blocks keep their own scroll behavior. Also adds a direction-aware slide/fade transition (via Vue's <Transition>, keyed on currentIndex) when paging between articles, triggered by both the swipe gesture and the nav buttons. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-08-26 21:14:52 +02:00
mathias	01f8a30505	autorestrat images	2026-08-03 14:58:45 +02:00
mathias	a898e7ac33	counter on feed select	2026-07-13 17:46:49 +02:00
mathias	671ed86b48	added test	2026-07-13 09:47:10 +02:00
mathias	af5e2b8137	upgrade packages	2026-07-12 17:27:16 +02:00
mathias	2b1d1c57ff	keep state of aritcle/list view	2026-07-12 17:22:30 +02:00