Feed filter implementation

Cargo.lock

@@ -2550,7 +2550,7 @@ dependencies = [
 
 [[package]]
 name = "rss-reader"
-version = "0.1.0"
+version = "0.9.1"
 dependencies = [
  "actix-cors",
  "actix-governor",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "rss-reader"
-version = "0.1.0"
+version = "0.9.1"
 edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

vue/src/assets/base.css

@@ -27,6 +27,8 @@
   --content-font-family: Merriweather, Georgia, 'Times New Roman', Times, serif;
   --headline-font-size-scale: 1;
   --content-font-size-scale: 1;
+  --content-text-align: left;
+  --content-padding: 1rem;
 
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);

vue/src/assets/main.css

@@ -86,7 +86,8 @@ a,
 .feed-content {
   font-family: var(--content-font-family);
   font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
-  padding: 0 1em 1em;
+  text-align: var(--content-text-align);
+  padding: 0 var(--content-padding) 1em;
   overflow-wrap: break-word;
 }
 

vue/src/components/AdminSettings.vue

@@ -14,6 +14,13 @@ const {
   setContentSize,
   setHeadlineFont,
   setContentFont,
+  textAlignKey,
+  contentPadding,
+  TEXT_ALIGN_OPTIONS,
+  PADDING_STEPS,
+  PADDING_LABELS,
+  setTextAlign,
+  setContentPadding,
 } = useSettings()
 </script>
 
@@ -78,6 +85,34 @@ const {
         >{{ opt.label }}</option>
       </select>
     </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Text Alignment</h2>
+      <div class="settings__strip">
+        <button
+          v-for="opt in TEXT_ALIGN_OPTIONS"
+          :key="opt.key"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': textAlignKey === opt.key }"
+          type="button"
+          @click="setTextAlign(opt.key)"
+        >{{ opt.label }}</button>
+      </div>
+    </section>
+
+    <section class="settings__section">
+      <h2 class="settings__section-title">Content Padding</h2>
+      <div class="settings__strip">
+        <button
+          v-for="(step, i) in PADDING_STEPS"
+          :key="step"
+          class="settings__btn"
+          :class="{ 'settings__btn--active': contentPadding === step }"
+          type="button"
+          @click="setContentPadding(step)"
+        >{{ PADDING_LABELS[i] }}</button>
+      </div>
+    </section>
   </div>
 </template>
 

vue/src/components/AppNav.vue

@@ -1,23 +1,92 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterLink, useRouter, useRoute } from 'vue-router'
 import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
 import Modal from './modal/AddUrl.vue'
 
 const router = useRouter()
 const route = useRoute()
-const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()
+const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, lastProgrammaticScroll } = useFeeds()
 
 const headerRef = ref(null)
 
+// Scroll-driven show/hide: the header slides out of view on scroll-down and
+// back in on scroll-up. This is show/hide via `transform` (not the old
+// resize behaviour) — the header is position:fixed, so translating it never
+// reflows content, and the app's programmatic scrolls resolve to sensible
+// states: scrollTo(0, 0) lands near the top → shown; the list-view
+// read-correction scrollBy moves only a few px → stays under the threshold.
+const hidden = ref(false)
+const REVEAL_THRESHOLD = 12 // px of accumulated travel before toggling
+// When the feed list mutates itself (read-correction scrollBy + array-splice
+// scroll anchoring) the page jumps *upward* without user intent. For this long
+// after such a jump we gate only the reveal direction, so the jump can't pop
+// the header back into view mid-read. Hiding stays allowed the whole time
+// (the jump never scrolls down), so scrolling down still hides normally even
+// while articles are being marked read. See lastProgrammaticScroll in useFeeds.
+const PROGRAMMATIC_SUPPRESS_MS = 300
+let lastY = 0
+let accumulated = 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) {
+    hidden.value = false
+    accumulated = 0
+    lastY = y
+    return
+  }
+
+  const delta = y - lastY
+  lastY = y
+  // Reset the accumulator whenever direction flips, so the threshold is
+  // measured from the last turning point (not from page load).
+  if ((delta > 0) !== (accumulated > 0)) accumulated = 0
+  accumulated += delta
+
+  // Hiding (scroll-down) is always allowed. Revealing (scroll-up) is gated for
+  // a short window after a programmatic list update, whose induced jump is
+  // upward and would otherwise pop the header back into view mid-read. A
+  // genuine scroll-up reveals once the window has elapsed.
+  const afterProgrammatic = performance.now() - lastProgrammaticScroll.value < PROGRAMMATIC_SUPPRESS_MS
+  if (accumulated > REVEAL_THRESHOLD) hidden.value = true // scrolling down
+  else if (accumulated < -REVEAL_THRESHOLD && !afterProgrammatic) hidden.value = false // scrolling up
+}
+
+let ticking = false
+function onScrollRaf() {
+  if (ticking) return
+  ticking = true
+  requestAnimationFrame(() => {
+    onScroll()
+    ticking = false
+  })
+}
+
 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.
   const h = headerRef.value?.getBoundingClientRect().height ?? 0
   document.documentElement.style.setProperty('--app-nav-height', `${h}px`)
+
+  lastY = Math.max(0, window.scrollY)
+  window.addEventListener('scroll', onScrollRaf, { passive: true })
+  document.addEventListener('click', onDocumentClick)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScrollRaf)
+  document.removeEventListener('click', onDocumentClick)
 })
 
 const onFeedsPage = computed(() => route.path === '/feeds')
 
-const unreadCount = computed(() => feeds.value.filter(f => !f.read).length)
 
 const menuOpen = ref(false)
 
@@ -29,6 +98,19 @@ function closeMenu() {
   menuOpen.value = false
 }
 
+// The open menu is a thin absolutely-positioned strip under the header, so its
+// `@click.self` only catches clicks on that strip — a click anywhere else on
+// the page never reaches it. This document-level listener closes the menu on
+// any outside click. The hamburger is excluded (it has its own toggle, so an
+// opening click mustn't immediately re-close), and clicks inside the menu are
+// left to the menu items' own handlers.
+function onDocumentClick(event) {
+  if (!menuOpen.value) return
+  const target = event.target
+  if (target.closest?.('.app-nav__hamburger') || target.closest?.('.app-nav__menu')) return
+  closeMenu()
+}
+
 async function logout() {
   await logoutSession()
   closeMenu()
@@ -62,9 +144,19 @@ function handleToggleLayout() {
 </script>
 
 <template>
-  <header ref="headerRef" class="app-nav">
+  <header ref="headerRef" class="app-nav" :class="{ 'app-nav--hidden': hidden }">
     <div class="app-nav__wrapper">
       <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
+      <select
+        v-if="onFeedsPage && feedTitles.length"
+        class="app-nav__filter"
+        :value="feedFilter ?? ''"
+        aria-label="Filter by feed"
+        @change="setFeedFilter($event.target.value || null)"
+      >
+        <option value="">All feeds</option>
+        <option v-for="title in feedTitles" :key="title" :value="title">{{ title }}</option>
+      </select>
       <button
         class="app-nav__hamburger"
         type="button"
@@ -123,6 +215,13 @@ function handleToggleLayout() {
   right: 0;
   z-index: 20;
   background: var(--color-background);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  transition: transform 0.25s ease;
+  will-change: transform;
+}
+
+.app-nav--hidden {
+  transform: translateY(-100%);
 }
 
 .app-nav__wrapper {
@@ -131,12 +230,13 @@ function handleToggleLayout() {
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
+  padding: 0.375rem 1rem;
 }
 
 .app-nav__title {
+  margin-right: auto;
   font-weight: bold;
-  font-size: clamp(1.1rem, 4vw, 1.4rem);
+  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
 }
 
 .app-nav__unread {
@@ -144,6 +244,23 @@ function handleToggleLayout() {
   opacity: 0.6;
 }
 
+.app-nav__filter {
+  min-height: 44px;
+  max-width: clamp(120px, 40vw, 220px);
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+  text-overflow: ellipsis;
+}
+
+.app-nav__filter:hover {
+  border-color: var(--color-border-hover);
+}
+
 .app-nav__hamburger {
   display: inline-flex;
   align-items: center;
@@ -228,7 +345,7 @@ function handleToggleLayout() {
 
 @media (min-width: 768px) {
   .app-nav__wrapper {
-    padding: 1rem 2rem;
+    padding: 0.5rem 2rem;
   }
 }
 </style>

vue/src/components/RssFeeds.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, nextTick, watch } from 'vue';
+import { onMounted, onBeforeUnmount, computed, nextTick, watch } from 'vue';
 import { useFeeds } from '@/composables/useFeeds';
 
 const {
@@ -14,6 +14,7 @@ const {
   fetchData,
   sync,
   getReadable,
+  disconnectObserver,
   setInitialLoad,
   showMessageForXSeconds,
 } = useFeeds()
@@ -74,6 +75,11 @@ async function shareUrl(url) {
   }
 }
 
+onBeforeUnmount(() => {
+  disconnectObserver()
+  setInitialLoad(false)
+})
+
 onMounted(async () => {
   setInitialLoad(false)
   await fetchData()
@@ -302,6 +308,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-top: 1em;
   padding-bottom: 5rem;
 }
 
@@ -351,7 +358,8 @@ onMounted(async () => {
 }
 
 .article-feature__content {
-  padding: 0 1rem;
+  padding: 0 var(--content-padding);
+  text-align: var(--content-text-align);
   font-family: var(--content-font-family);
   font-size: calc(clamp(1rem, 3.5vw, 1.25rem) * var(--content-font-size-scale));
   line-height: 1.75;

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

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import axios from 'axios'
 import AppNav from '../AppNav.vue'
@@ -24,8 +25,13 @@ describe('AppNav', () => {
     localStorage.setItem('user-id', '7')
     vi.clearAllMocks()
 
-    const { feeds, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
+    const { feeds, allItems, feedFilter, lastProgrammaticScroll, showMessage, message, showModal, viewMode, currentIndex, layout } = useFeeds()
     feeds.value = []
+    allItems.value = []
+    feedFilter.value = null
+    // Module-singleton state: a prior test may have stamped this via a mocked
+    // performance.now(); reset it so the scroll-driven reveal gate starts clean.
+    lastProgrammaticScroll.value = 0
     showMessage.value = false
     message.value = ''
     showModal.value = false
@@ -44,15 +50,35 @@ describe('AppNav', () => {
     await router.isReady()
   })
 
+  // Unmount every AppNav mounted via mountNav() after each test so mounted
+  // instances (and their router/menu listeners) don't pile up across the file.
+  let mountedWrappers = []
+  function mountNav(options = { global: { plugins: [router] } }) {
+    const wrapper = mount(AppNav, options)
+    mountedWrappers.push(wrapper)
+    return wrapper
+  }
+
+  afterEach(() => {
+    for (const wrapper of mountedWrappers) {
+      try {
+        wrapper.unmount()
+      } catch {
+        // already unmounted by the test itself — fine
+      }
+    }
+    mountedWrappers = []
+  })
+
   async function mountWithMenuOpen() {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await wrapper.find('.app-nav__hamburger').trigger('click')
     await flushPromises()
     return wrapper
   }
 
   it('toggles the menu open and closed via the hamburger button', async () => {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
 
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
 
@@ -63,6 +89,17 @@ describe('AppNav', () => {
     expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
   })
 
+  it('closes the menu on a click outside of it', async () => {
+    const wrapper = await mountWithMenuOpen()
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(true)
+
+    // A click anywhere outside the menu strip (e.g. on page content) closes it.
+    document.body.dispatchEvent(new Event('click', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.app-nav__menu').exists()).toBe(false)
+  })
+
   it('clears stored credentials and redirects to login on logout', async () => {
     const wrapper = await mountWithMenuOpen()
 
@@ -158,38 +195,211 @@ describe('AppNav', () => {
   })
 
   it('shows the unread count in the title when there are articles', async () => {
-    const { feeds } = useFeeds()
-    feeds.value = [
+    // The badge is the global unread total, sourced from the master list
+    // (allItems) so it stays correct regardless of any active feed filter.
+    const { allItems } = useFeeds()
+    allItems.value = [
       { id: 1, title: 'Article one', content: '', url: 'https://example.test/1', timestamp: '2026-01-01' },
       { id: 2, title: 'Article two', content: '', url: 'https://example.test/2', timestamp: '2026-01-02' },
     ]
 
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__title').text()).toContain('(2)')
   })
 
   it('excludes already-read articles from the counter while in article view', async () => {
-    const { feeds } = useFeeds()
-    feeds.value = [
+    const { allItems } = useFeeds()
+    allItems.value = [
       { id: 1, title: 'Article one', read: true,  content: '', url: 'https://example.test/1', timestamp: '2026-01-01' },
       { id: 2, title: 'Article two', read: false, content: '', url: 'https://example.test/2', timestamp: '2026-01-02' },
     ]
 
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__title').text()).toContain('(1)')
   })
 
   it('hides the unread count when there are no articles', async () => {
-    const wrapper = mount(AppNav, { global: { plugins: [router] } })
+    const wrapper = mountNav()
     await flushPromises()
 
     expect(wrapper.find('.app-nav__unread').exists()).toBe(false)
   })
 
+  it('renders a feed filter with an "All feeds" option plus one per distinct feed', async () => {
+    const { allItems } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed B', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-02' },
+      { id: 2, feedTitle: 'Feed A', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-01' },
+      { id: 3, feedTitle: 'Feed A', title: 'c', url: 'https://example.test/3', timestamp: '2026-01-03' },
+    ]
+
+    const wrapper = mountNav()
+    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'])
+  })
+
+  it('does not render the feed filter when there are no feeds', async () => {
+    const wrapper = mountNav()
+    await flushPromises()
+
+    expect(wrapper.find('.app-nav__filter').exists()).toBe(false)
+  })
+
+  it('applies the selected feed to the displayed list, and "All feeds" restores it', async () => {
+    const { allItems, feeds, feedFilter } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed A', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-01' },
+      { id: 2, feedTitle: 'Feed B', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-02' },
+    ]
+
+    const wrapper = mountNav()
+    await flushPromises()
+
+    const select = wrapper.find('.app-nav__filter')
+    await select.setValue('Feed A')
+    await flushPromises()
+
+    expect(feedFilter.value).toBe('Feed A')
+    expect(feeds.value.map(f => f.id)).toEqual([1])
+
+    await select.setValue('')
+    await flushPromises()
+
+    expect(feedFilter.value).toBeNull()
+    expect(feeds.value.map(f => f.id)).toEqual([1, 2])
+  })
+
+  it('shows the selected feed\'s unread count in the title when a filter is active', async () => {
+    const { allItems } = useFeeds()
+    allItems.value = [
+      { id: 1, feedTitle: 'Feed A', title: 'a', url: 'https://example.test/1', timestamp: '2026-01-01' },
+      { id: 2, feedTitle: 'Feed A', title: 'b', url: 'https://example.test/2', timestamp: '2026-01-02' },
+      { id: 3, feedTitle: 'Feed B', title: 'c', url: 'https://example.test/3', timestamp: '2026-01-03' },
+    ]
+
+    const wrapper = mountNav()
+    await flushPromises()
+
+    // No filter → global total (3).
+    expect(wrapper.find('.app-nav__title').text()).toContain('(3)')
+
+    await wrapper.find('.app-nav__filter').setValue('Feed A')
+    await flushPromises()
+
+    // Filtered → unread in Feed A only (2).
+    expect(wrapper.find('.app-nav__title').text()).toContain('(2)')
+  })
+
+  describe('scroll-driven show/hide', () => {
+    // The scroll handler is rAF-throttled; run rAF synchronously so a single
+    // dispatched scroll event resolves before we assert. Per the CLAUDE.md
+    // Vitest gotcha, avoid bare fake timers here — they'd clobber this stub.
+    beforeEach(() => {
+      // 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)
+    })
+
+    afterEach(() => {
+      vi.unstubAllGlobals()
+      vi.restoreAllMocks()
+    })
+
+    function scrollTo(y) {
+      Object.defineProperty(window, 'scrollY', { value: y, configurable: true, writable: true })
+      window.dispatchEvent(new Event('scroll'))
+    }
+
+    it('hides the header when scrolling down past the threshold', async () => {
+      const wrapper = mountNav()
+      scrollTo(200)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+    })
+
+    it('reveals the header again when scrolling back up past the threshold', async () => {
+      const wrapper = mountNav()
+      scrollTo(200)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      scrollTo(150)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+
+    it('always shows the header near the top of the page', async () => {
+      const wrapper = mountNav()
+      scrollTo(400)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // Back within the header's own height of the top → always revealed.
+      scrollTo(10)
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+
+    it('does not let a programmatic upward jump reveal the header mid-read', async () => {
+      const { markProgrammaticScroll } = useFeeds()
+      const nowSpy = vi.spyOn(performance, 'now').mockReturnValue(1000)
+      const wrapper = mountNav()
+
+      // Hide it first via a normal scroll-down (no programmatic flag active).
+      scrollTo(400)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // A read-correction flags a programmatic scroll, then the page jumps
+      // upward. Within the window that upward jump must NOT reveal the header.
+      markProgrammaticScroll() // records lastProgrammaticScroll = 1000
+      nowSpy.mockReturnValue(1100) // 100ms later — inside the 300ms window
+      scrollTo(200)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // Still allows hiding on scroll-down even while the flag is active.
+      scrollTo(500)
+      await nextTick()
+      expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
+
+      // Once the window elapses, a genuine scroll-up reveals it again.
+      nowSpy.mockReturnValue(1500) // 500ms after the flag — outside the window
+      scrollTo(450)
+      await nextTick()
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+
+    it('does not toggle on sub-threshold jitter', async () => {
+      const wrapper = mountNav()
+      // Start well below the top so the "near the top" guard doesn't apply.
+      scrollTo(300)
+      await nextTick()
+      // Reveal first so we're testing that small moves don't hide it.
+      scrollTo(260)
+      await nextTick()
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+
+      scrollTo(268) // +8px, under the 12px threshold
+      await nextTick()
+
+      expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
+    })
+  })
+
   it('does not mark articles as read when the confirmation is dismissed', async () => {
     const { feeds } = useFeeds()
     feeds.value = [
@@ -208,4 +418,5 @@ describe('AppNav', () => {
 
     confirmSpy.mockRestore()
   })
+
 })

vue/src/composables/__tests__/useFeeds.spec.js

@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
 import axios from 'axios'
 import { useFeeds } from '../useFeeds'
 
@@ -12,7 +13,7 @@ class FakeIntersectionObserver {
 vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
 
 describe('useFeeds', () => {
-  const { feeds, showMessage, message, showModal, fetchData, sync, getReadable, setInitialLoad, handleIntersection } = useFeeds()
+  const { feeds, allItems, feedFilter, feedTitles, unreadCount, setFeedFilter, showMessage, message, showModal, fetchData, sync, getReadable, setInitialLoad, handleIntersection, markAllRead } = useFeeds()
 
   beforeEach(() => {
     localStorage.setItem('user-token', 'test-token')
@@ -20,6 +21,8 @@ describe('useFeeds', () => {
     vi.clearAllMocks()
 
     feeds.value = []
+    allItems.value = []
+    feedFilter.value = null
     showMessage.value = false
     message.value = ''
     showModal.value = false
@@ -116,6 +119,108 @@ describe('useFeeds', () => {
     setInitialLoad(false)
   })
 
+  describe('feed filter', () => {
+    const twoFeedsResponse = {
+      data: {
+        feeds: [
+          {
+            title: 'Feed A',
+            items: [
+              { id: 1, title: 'A1', content: '', url: 'https://example.test/a1', timestamp: '2026-01-01 10:00:00' },
+              { id: 3, title: 'A2', content: '', url: 'https://example.test/a2', timestamp: '2026-01-03 10:00:00' },
+            ],
+          },
+          {
+            title: 'Feed B',
+            items: [
+              { id: 2, title: 'B1', content: '', url: 'https://example.test/b1', timestamp: '2026-01-02 10:00:00' },
+            ],
+          },
+        ],
+      },
+    }
+
+    it('narrows the displayed list to a single feed and restores it on "All feeds"', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      // Options are the distinct feed titles, sorted.
+      expect(feedTitles.value).toEqual(['Feed A', 'Feed B'])
+      // Unfiltered: everything, newest first (Jan 3, Jan 2, Jan 1).
+      expect(feeds.value.map(f => f.id)).toEqual([3, 2, 1])
+
+      await setFeedFilter('Feed A')
+      expect(feeds.value.map(f => f.id)).toEqual([3, 1])
+
+      await setFeedFilter(null)
+      expect(feeds.value.map(f => f.id)).toEqual([3, 2, 1])
+    })
+
+    it('does not resurrect read articles when the filter is cleared', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      axios.put.mockResolvedValue({ status: 200 })
+      await fetchData()
+
+      await setFeedFilter('Feed A')
+      setInitialLoad(true)
+
+      // The first Feed A article scrolls above the viewport → marked read and
+      // dropped from both the filtered list and the master.
+      await handleIntersection([
+        { isIntersecting: false, boundingClientRect: { y: -10 }, target: { id: '0' } },
+      ])
+      setInitialLoad(false)
+
+      expect(feeds.value.map(f => f.id)).toEqual([1])
+
+      await setFeedFilter(null)
+      // Article 3 stays gone; the still-unread articles remain, newest first.
+      expect(feeds.value.map(f => f.id)).toEqual([2, 1])
+    })
+
+    it('keeps an emptied filtered feed selected and selectable, showing "All caught up"', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      axios.put.mockResolvedValue({ status: 200 })
+      await fetchData()
+
+      await setFeedFilter('Feed B')
+      expect(feeds.value.map(f => f.id)).toEqual([2])
+
+      // Mark all (visible = just Feed B) read — Feed B has no unread items left.
+      vi.spyOn(window, 'confirm').mockReturnValue(true)
+      await markAllRead()
+
+      // The list empties, but the filter stays put and the feed remains a
+      // selectable option (so the <select> never dangles) even though it no
+      // longer has unread items.
+      expect(feeds.value).toEqual([])
+      expect(feedFilter.value).toBe('Feed B')
+      expect(feedTitles.value).toEqual(['Feed A', 'Feed B'])
+
+      // Switching away drops the now-empty feed from the options.
+      await setFeedFilter(null)
+      expect(feedTitles.value).toEqual(['Feed A'])
+      expect(feeds.value.map(f => f.id)).toEqual([3, 1])
+    })
+
+    it('counts unread items in the selected feed when a filter is active, else the global total', async () => {
+      axios.get.mockResolvedValueOnce(twoFeedsResponse)
+      await fetchData()
+
+      // No filter: global unread total across both feeds.
+      expect(unreadCount.value).toBe(3)
+
+      // Filtered: only the selected feed's unread items.
+      await setFeedFilter('Feed B')
+      expect(unreadCount.value).toBe(1)
+      await setFeedFilter('Feed A')
+      expect(unreadCount.value).toBe(2)
+
+      await setFeedFilter(null)
+      expect(unreadCount.value).toBe(3)
+    })
+  })
+
   it('strips leftover embedded-video placeholder headings', async () => {
     feeds.value = [{
       id: 1,

vue/src/composables/useFeeds.js

@@ -1,11 +1,37 @@
-import { ref, nextTick } from 'vue';
+import { ref, computed, nextTick } from 'vue';
 import axios from 'axios';
 import { Readability } from '@mozilla/readability';
 
 // Module-level state — declared outside useFeeds() so every caller shares the
 // same singleton refs (a Pinia-free "store" for the feed list and its UI state).
 const showMessage = ref(false)
+// `allItems` is the full flattened+sorted stream from the last fetch (the
+// master); `feeds` is the currently displayed projection of it (all items, or a
+// single feed when a filter is active). Every view/observer consumer operates on
+// `feeds` — the filter layer only ever swaps what `feeds` points at, so none of
+// the index-based observer / currentIndex logic has to know a filter exists.
+const allItems = ref([]);
 const feeds = ref([]);
+const feedFilter = ref(null) // selected feedTitle, or null = all feeds (not persisted)
+// Distinct feed titles present in the loaded (unread) items — the filter options.
+// The active filter is always kept in the list even once its feed runs out of
+// unread items, so the <select> never binds to a value that isn't an option
+// (it just shows "All caught up") and the feed stays re-selectable.
+const feedTitles = computed(() => {
+  const titles = new Set(allItems.value.map(i => i.feedTitle))
+  if (feedFilter.value) titles.add(feedFilter.value)
+  return [...titles].sort((a, b) => a.localeCompare(b))
+})
+// 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
+// items are excluded and the count matches the filter regardless of view.
+const unreadCount = computed(() => {
+  const items = feedFilter.value
+    ? allItems.value.filter(i => i.feedTitle === feedFilter.value)
+    : allItems.value
+  return items.filter(i => !i.read).length
+})
 const message = ref('')
 const showModal = ref(false)
 const viewMode = ref('list') // 'list' | 'article' — toggled from the hamburger menu
@@ -15,6 +41,16 @@ const layout = ref(localStorage.getItem('layout') || 'list') // 'list' | 'cards'
 let observer; // Declare observer outside the setup function
 let initialLoad = false
 
+// Timestamp (performance.now()) of the most recent programmatic scroll / list
+// mutation that moves the page without user intent — currently the list-view
+// read-correction below. AppNav's auto-hide handler resyncs its scroll baseline
+// (instead of treating the induced jump as a user scroll) for a short window
+// after this, so removing read articles can't pop the header in/out mid-read.
+const lastProgrammaticScroll = ref(0)
+function markProgrammaticScroll() {
+  lastProgrammaticScroll.value = performance.now()
+}
+
 export function authHeaders() {
   return {
     headers: {
@@ -134,12 +170,16 @@ async function getReadable(feed, index) {
     })
     // taz "Mehr zum Thema" related-articles teaser section.
     doc.querySelectorAll('#articleTeaser').forEach(el => el.remove())
-    // taz subsidiary magazine promo blocks (e.g. taz FUTURZWEI): the promo
-    // <article> carries an aria-label containing "Abo".
+    // taz subsidiary magazine promo blocks (e.g. taz FUTURZWEI): either the
+    // <article> itself or its direct <a> child carries an aria-label containing "Abo".
     doc.querySelectorAll('article[aria-label*="Abo"]').forEach(el => {
       const container = el.closest('section') ?? el
       container.remove()
     })
+    doc.querySelectorAll('article > a[aria-label*="Abo"]').forEach(el => {
+      const container = el.closest('section') ?? el.closest('article')
+      if (container) container.remove()
+    })
     const article = new Readability(doc).parse();
     if (!article) {
       showMessageForXSeconds('Could not extract readable content.', 5)
@@ -162,6 +202,30 @@ async function markRead(id) {
   }
 }
 
+// Projects the master list onto `feeds` through the active filter. A filtered
+// feed with no remaining unread items projects to an empty list ("All caught
+// up") while staying selected — see feedTitles.
+function applyFilter() {
+  feeds.value = feedFilter.value
+    ? allItems.value.filter(i => i.feedTitle === feedFilter.value)
+    : allItems.value.slice()
+}
+
+// Changes the active feed filter and re-projects. Mirrors toggleLayout's
+// observer/scroll-safe pattern: disconnect first, scroll to top, then re-point
+// the observer at the new .observe nodes after Vue has re-rendered. Works in
+// article view too — there are no .observe nodes there so the setup is a no-op,
+// and resetting currentIndex keeps paging valid against the new list.
+async function setFeedFilter(title) {
+  disconnectObserver()
+  window.scrollTo(0, 0)
+  feedFilter.value = title // null for "All feeds"
+  currentIndex.value = 0
+  applyFilter()
+  await nextTick()
+  setupIntersectionObserver()
+}
+
 const fetchData = async () => {
   const user_id = localStorage.getItem("user-id")
   try {
@@ -173,7 +237,8 @@ const fetchData = async () => {
     // timestamps are zero-padded "YYYY-MM-DD HH:MM:SS" strings, so a plain
     // lexicographic comparison sorts them chronologically.
     items.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-    feeds.value = items;
+    allItems.value = items;
+    applyFilter();
     await nextTick();
     setupIntersectionObserver();
   } catch (error) {
@@ -243,8 +308,13 @@ function handleIntersection(entries, topbarHeight = 0) {
     observer = null
   }
 
+  // Both the array splice (via scroll anchoring) and the scrollBy correction
+  // below move the page — flag it so AppNav's header auto-hide ignores the jump.
+  markProgrammaticScroll()
   const readIds = new Set(readFeeds.map(feed => feed.id))
   feeds.value = feeds.value.filter(feed => !readIds.has(feed.id))
+  // Mirror into the master so cleared filters don't resurrect read articles.
+  allItems.value = allItems.value.filter(feed => !readIds.has(feed.id))
 
   for (const feed of readFeeds) {
     markRead(feed.id)
@@ -261,6 +331,7 @@ function handleIntersection(entries, topbarHeight = 0) {
     if (first) {
       const top = first.getBoundingClientRect().top
       if (top < topbarHeight) {
+        markProgrammaticScroll()
         window.scrollBy(0, top - topbarHeight)
       }
     }
@@ -268,6 +339,13 @@ function handleIntersection(entries, topbarHeight = 0) {
   })
 }
 
+function disconnectObserver() {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+}
+
 function setInitialLoad(value) {
   initialLoad = value
 }
@@ -277,7 +355,11 @@ async function markAllRead() {
   if (!window.confirm('Mark all articles as read?')) return
 
   const ids = feeds.value.map(feed => feed.id)
+  const readIds = new Set(ids)
   feeds.value = []
+  // markAllRead operates on the visible subset (only the filtered feed, if one
+  // is active) — drop exactly those from the master too.
+  allItems.value = allItems.value.filter(feed => !readIds.has(feed.id))
   currentIndex.value = 0
   // markRead swallows its own errors, so Promise.all can't reject here.
   await Promise.all(ids.map(id => markRead(id)))
@@ -300,6 +382,8 @@ async function leaveArticleView() {
   // in place so currentIndex stayed valid — drop them now so they don't keep
   // showing up in the list view.
   feeds.value = feeds.value.filter(feed => !feed.read)
+  // Shared references — the paged-past objects carry .read on the master too.
+  allItems.value = allItems.value.filter(feed => !feed.read)
   currentIndex.value = 0
   viewMode.value = 'list'
   // The v-if on the list container tears down and recreates all .observe DOM
@@ -357,6 +441,11 @@ function prevArticle() {
 export function useFeeds() {
   return {
     feeds,
+    allItems,
+    feedFilter,
+    feedTitles,
+    unreadCount,
+    setFeedFilter,
     showMessage,
     message,
     showModal,
@@ -375,7 +464,10 @@ export function useFeeds() {
     markAllRead,
     showMessageForXSeconds,
     setupIntersectionObserver,
+    disconnectObserver,
     setInitialLoad,
     handleIntersection,
+    lastProgrammaticScroll,
+    markProgrammaticScroll,
   }
 }

vue/src/composables/useSettings.js

@@ -19,10 +19,20 @@ const CONTENT_FONT_OPTIONS = [
 const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
 const SIZE_LABELS = ['S', 'M', 'L', 'XL']
 
+const TEXT_ALIGN_OPTIONS = [
+  { key: 'left',    label: 'Left' },
+  { key: 'justify', label: 'Justified' },
+]
+
+const PADDING_STEPS  = [1, 0.5, 0.15]
+const PADDING_LABELS = ['Default', 'Compact', 'Minimal']
+
 const headlineSizeScale = ref(parseFloat(localStorage.getItem('s-headline-size') ?? '1'))
 const contentSizeScale  = ref(parseFloat(localStorage.getItem('s-content-size')  ?? '1'))
 const headlineFontKey   = ref(localStorage.getItem('s-headline-font') ?? 'default')
 const contentFontKey    = ref(localStorage.getItem('s-content-font')  ?? 'default')
+const textAlignKey      = ref(localStorage.getItem('s-text-align')    ?? 'left')
+const contentPadding    = ref(parseFloat(localStorage.getItem('s-content-padding') ?? '1'))
 
 function fontValue(options, key) {
   return (options.find(o => o.key === key) ?? options[0]).value
@@ -34,6 +44,8 @@ function applySettings() {
   s.setProperty('--content-font-size-scale',  contentSizeScale.value)
   s.setProperty('--headline-font-family',     fontValue(HEADLINE_FONT_OPTIONS, headlineFontKey.value))
   s.setProperty('--content-font-family',      fontValue(CONTENT_FONT_OPTIONS,  contentFontKey.value))
+  s.setProperty('--content-text-align',      textAlignKey.value)
+  s.setProperty('--content-padding',         contentPadding.value + 'rem')
 }
 
 function setHeadlineSize(scale) {
@@ -60,6 +72,18 @@ function setContentFont(key) {
   applySettings()
 }
 
+function setTextAlign(key) {
+  textAlignKey.value = key
+  localStorage.setItem('s-text-align', key)
+  applySettings()
+}
+
+function setContentPadding(step) {
+  contentPadding.value = step
+  localStorage.setItem('s-content-padding', step)
+  applySettings()
+}
+
 export function useSettings() {
   return {
     headlineSizeScale,
@@ -70,10 +94,17 @@ export function useSettings() {
     SIZE_LABELS,
     HEADLINE_FONT_OPTIONS,
     CONTENT_FONT_OPTIONS,
+    TEXT_ALIGN_OPTIONS,
+    PADDING_STEPS,
+    PADDING_LABELS,
     applySettings,
     setHeadlineSize,
     setContentSize,
     setHeadlineFont,
     setContentFont,
+    setTextAlign,
+    setContentPadding,
+    textAlignKey,
+    contentPadding,
   }
 }

vue/src/router/index.js

@@ -31,23 +31,13 @@ const router = createRouter({
 
   ]
 })
-router.beforeEach((to, from, next) => {
-  if (to.meta.requiresAuth) {
-    let isAuthenticated = false;
-    if (localStorage.getItem("user-token") != null){
-      isAuthenticated = true;
-    }
-
-    if (!isAuthenticated) {
-      // Redirect to the login page
-      next('/login');
-    } else {
-      // Proceed to the protected route
-      next();
-    }
-  } else {
-    // For routes that don't require authentication, proceed without checking
-    next();
+router.beforeEach((to) => {
+  const isAuthenticated = localStorage.getItem("user-token") != null;
+  // Redirect unauthenticated users hitting a protected route to login;
+  // returning a value (instead of the deprecated next() callback) is the
+  // modern vue-router guard API. Returning nothing lets navigation proceed.
+  if (to.meta.requiresAuth && !isAuthenticated) {
+    return '/login';
   }
 });
 export default router