rss-reader/vue/src/composables/useFeeds.js

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))
})
// 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
// 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
})
// AppNav renders this snapshot (refreshed via refreshUnreadDisplay, below)
// for the filter <select>'s per-feed option counts, instead of binding
// feedUnreadCounts directly — by design, this stays frozen while paging
// through article view (markCurrentArticleRead marks one article read per
// page turn, which would otherwise recompute it live on every single swipe).
// The header's own unread badge stays bound to the live unreadCount (it
// should update in real time regardless of view). Everywhere else that marks
// articles read — list-view scrolling (handleIntersection), opening/changing
// the filter, syncing, mark-all-read, leaving article view — refreshes this
// snapshot immediately, so it only ever looks stale during article-view
// paging itself.
const displayedFeedUnreadCounts = ref({})
function refreshUnreadDisplay() {
  displayedFeedUnreadCounts.value = feedUnreadCounts.value
}
const message = ref('')
const showModal = ref(false)
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
// 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: {
      'Content-Type': 'application/json',
      'user-token': localStorage.getItem("user-token")
    }
  }
}

// Tells the server to revoke the current token (bumps token_version, so any
// other outstanding tokens for this account are invalidated too) before
// clearing the local session. Best-effort: if the request fails (e.g. the
// token already expired) the local session is cleared regardless.
export async function logout() {
  try {
    await axios.post('/api/v1/auth/logout', null, authHeaders())
  } catch (error) {
    console.error('Error logging out', error)
  }
  localStorage.removeItem('user-token')
  localStorage.removeItem('user-id')
}

// Some feeds (e.g. Deutsche Welle) ship <img> tags whose `src` and various
// lazy-load attributes (`data-url`, `data-src`, `srcset`, ...) contain an
// unresolved `${placeholderName}` template — or its URL-encoded `%7B...%7D`
// form — that their own frontend fills in from the sibling `data-format`
// attribute before loading; verbatim they 404. Resolve every such attribute
// the same way (so Readability's own lazy-image handling can't resurrect a
// stale template into `src`), preferring `data-url` as the source of truth
// for `src`, and drop the <img> entirely if a template still remains.
const TEMPLATE_PATTERN = /\$\{[^}]+\}|%7[bB][^%]*%7[dD]/
const TEMPLATE_PATTERN_GLOBAL = /\$\{[^}]+\}|%7[bB][^%]*%7[dD]/g

// `data-format` holds a symbolic name from DW's CMS (e.g. "MASTER_LANDSCAPE"),
// but their image CDN only accepts numeric format ids in the URL — the
// template's `${formatId}` literally means a number. Substituting the
// symbolic name verbatim produces a 400 (image fails to load). DW generates
// the same fixed set of numeric variants for every image, so map the
// symbolic names we've seen to their numeric equivalent.
const DW_FORMAT_IDS = {
  MASTER_LANDSCAPE: '6', // 940x529, 16:9 — matches DW's `16/9` aspect ratio
}

function resolveTemplatedImage(img) {
  const rawFormat = img.getAttribute('data-format')
  const format = rawFormat && (DW_FORMAT_IDS[rawFormat] ?? (/^\d+$/.test(rawFormat) ? rawFormat : null))
  const dataUrl = img.getAttribute('data-url')

  if (format) {
    if (dataUrl && TEMPLATE_PATTERN.test(dataUrl)) {
      img.setAttribute('src', dataUrl.replace(TEMPLATE_PATTERN_GLOBAL, format))
    }
    for (const attr of [...img.attributes]) {
      if (attr.name !== 'src' && TEMPLATE_PATTERN.test(attr.value)) {
        img.setAttribute(attr.name, attr.value.replace(TEMPLATE_PATTERN_GLOBAL, format))
      }
    }
  }

  if (TEMPLATE_PATTERN.test(img.getAttribute('src') ?? '')) {
    img.remove()
  }
}

function showMessageForXSeconds(text, seconds) {
  message.value = text;
  showMessage.value = true;

  // Set a timeout to hide the message after x seconds
  setTimeout(() => {
    showMessage.value = false;
    message.value = '';
  }, seconds * 1000); // Convert seconds to milliseconds
}

async function getReadable(feed, index) {
  try {
    const response = await axios.post("/api/v1/article/read", {
      url: feed.url
    }, authHeaders())

    const doc = new DOMParser().parseFromString(response.data.content, 'text/html');
    // Scraped articles often contain image/link URLs that are relative to the
    // source site. A <base> tag makes the browser (and Readability) resolve
    // them against the article's original URL instead of our own origin.
    const base = doc.createElement('base');
    base.setAttribute('href', feed.url);
    doc.head.prepend(base);
    doc.querySelectorAll('img').forEach(resolveTemplatedImage);
    doc.querySelectorAll('video, audio').forEach(el => el.remove());
    // Some feeds (e.g. Stuttgarter Nachrichten) embed a social-sharing widget
    // (WhatsApp/Email/Facebook/... links plus a "Link kopiert" tooltip) in the
    // article body. It's not part of the article, so strip it before Readability
    // pulls it into the parsed content.
    doc.querySelectorAll('#article-social-bar').forEach(el => el.remove())
    // Some feeds (e.g. Deutsche Welle) leave behind a heading + play-icon SVG
    // for an embedded video/audio player whose actual <video>/<audio>/<iframe>
    // we already stripped — without it, the heading is just a giant orphaned
    // icon that takes up space and links nowhere.
    doc.querySelectorAll('[aria-label]').forEach(el => {
      if (/^(Eingebettete[rs]?|Embedded) (Video|Audio)/i.test(el.getAttribute('aria-label'))) {
        el.remove()
      }
    })
    // Alpine.js widget overlays: x-cloak marks elements that should be hidden
    // until Alpine.js initialises (prevents FOUC). These are always widget
    // containers (e.g. taz's "taz schneller googeln" promo), never article
    // content, so they're safe to remove unconditionally.
    doc.querySelectorAll('[x-cloak]').forEach(el => el.remove())
    // taz subscription promo blocks: a standalone <section> whose link(s) point
    // to an /abo/ subscription page. Only climb to <section>, not <article>,
    // to avoid accidentally removing the main article body.
    doc.querySelectorAll('a[href*="/abo/"]').forEach(el => {
      const container = el.closest('section')
      if (container) container.remove()
    })
    // taz "Mehr zum Thema" related-articles teaser section.
    doc.querySelectorAll('#articleTeaser').forEach(el => el.remove())
    // 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)
      return
    }
    feeds.value[index].content = article.content;
    feeds.value[index].readable = true;
  } catch (error) {
    console.error('Error fetching data:', error)
    showMessageForXSeconds(error, 5)
  }
}

// Ids with a mark-read PUT in flight (or being retried) — see markRead() and
// fetchData() below. A refcount rather than a plain Set: nextArticle()/
// prevArticle() can both re-mark the same article (page forward, back,
// forward again), so two overlapping markRead() calls for one id must both
// finish before fetchData() is allowed to trust the server's word on it —
// otherwise the first call to settle would clear the id out from under the
// second, still-in-flight one.
const pendingReadCounts = new Map()

function addPendingRead(id) {
  pendingReadCounts.set(id, (pendingReadCounts.get(id) ?? 0) + 1)
}

function removePendingRead(id) {
  const count = pendingReadCounts.get(id) ?? 0
  if (count <= 1) {
    pendingReadCounts.delete(id)
  } else {
    pendingReadCounts.set(id, count - 1)
  }
}

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

// Short backoff between retries of a failed mark-read PUT — each entry is the
// wait before that retry attempt.
const MARK_READ_RETRY_DELAYS_MS = [300, 1000]
// Bounds how long a hung request (dead connection, captive portal — axios has
// no default timeout) can keep an id "pending": without this, a request that
// never settles would never leave pendingReadCounts, silently withholding
// that article from every fetchData() for the rest of the session.
const MARK_READ_TIMEOUT_MS = 10000

// 4xx responses (expired token, item not found/not owned — see
// src/reader/mark_read.rs) mean the request itself is wrong and won't
// succeed on retry; only a missing response (network error, timeout) or a
// server-side/rate-limit status is worth retrying.
function isRetryableMarkReadError(error) {
  const status = error.response?.status
  return status === undefined || status >= 500 || status === 429
}

// Resolves to true once the article is confirmed read server-side, or false
// once retries (if any) are exhausted / the error isn't retryable.
async function markRead(id) {
  addPendingRead(id)
  try {
    for (let attempt = 0; ; attempt++) {
      try {
        await axios.put("/api/v1/article/read/" + id, null, { ...authHeaders(), timeout: MARK_READ_TIMEOUT_MS })
        return true
      } catch (error) {
        console.error('Error marking article read:', error)
        if (attempt >= MARK_READ_RETRY_DELAYS_MS.length || !isRetryableMarkReadError(error)) {
          // Out of retries, or a retry can't help — this mark never committed
          // server-side, so the item genuinely is still unread there. Surface
          // it rather than letting it silently vanish from the local list now
          // only to mysteriously reappear as unread later.
          showMessageForXSeconds('Could not mark an article as read. It may reappear as unread.', 5)
          return false
        }
        await delay(MARK_READ_RETRY_DELAYS_MS[attempt])
      }
    }
  } finally {
    removePendingRead(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()
  refreshUnreadDisplay()
  await nextTick()
  setupIntersectionObserver()
}

const fetchData = async () => {
  const user_id = localStorage.getItem("user-id")
  try {
    // Snapshot ids pending *before* the GET goes out, not just when its
    // response comes back. A markRead() PUT that commits while this GET is
    // in flight is invisible to the check below (its id has already been
    // cleared by the time the response arrives) even though the server read
    // the DB before that commit and so still reported the item unread — this
    // snapshot catches that case too.
    const pendingBeforeFetch = new Set(pendingReadCounts.keys())
    const response = await axios.get("/api/v1/article/get/" + user_id, authHeaders());
    const items = [];
    response.data.feeds.forEach(feed => {
      feed.items.forEach(item => items.push({ ...item, feedTitle: feed.title }));
    });
    // An item pending at either end of this request may not have committed
    // server-side yet, so the server can still report it unread here. Drop it
    // from this snapshot too — otherwise a concurrent background sync's
    // refetch (see sync()) would resurrect it as unread out from under the
    // user while markRead() is still confirming or retrying it.
    const freshItems = items.filter(item => !pendingBeforeFetch.has(item.id) && !pendingReadCounts.has(item.id));
    // timestamps are zero-padded "YYYY-MM-DD HH:MM:SS" strings, so a plain
    // lexicographic comparison sorts them chronologically.
    freshItems.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
    allItems.value = freshItems;
    applyFilter();
    refreshUnreadDisplay();
    await nextTick();
    setupIntersectionObserver();
  } catch (error) {
    console.error('Error fetching data:', error)
    showMessageForXSeconds(error, 5)
  }
};

async function sync(silent = false) {
  try {
    const response = await axios.post('/api/v1/article/sync', {
      user_id: parseInt(localStorage.getItem("user-id"))
    }, authHeaders())

    if (response.status == 200 && !silent) {
      showMessageForXSeconds('Sync successful.', 5)
    }
    fetchData();
  } catch (error) {
    console.error('Error sync', error)
    if (!silent) {
      showMessageForXSeconds(error, 5)
    }
  }
}

function setupIntersectionObserver() {
  if (observer) {
    observer.disconnect();
  }

  // The sticky topbar overlays the top of the viewport, so an article fully
  // hidden behind it should already count as "scrolled past" — shrink the
  // observer's root by that height so it stops intersecting at that point.
  const topbarHeight = document.querySelector('.app-nav')?.getBoundingClientRect().height ?? 0;

  observer = new IntersectionObserver((entries) => handleIntersection(entries, topbarHeight), {
    root: null, // Use the viewport as the root
    rootMargin: `-${topbarHeight}px 0px 0px 0px`,
    // threshold: 0.5, // Fire the callback when at least 50% of the element is visible
  });

  const observedDivs = document.querySelectorAll(".observe");
  // 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
    .filter(entry => initialLoad === true && !entry.isIntersecting && entry.boundingClientRect.y < topbarHeight)
    .map(entry => feeds.value[entry.target.id])
    .filter(Boolean)

  if (readFeeds.length === 0) return

  // Disconnect before the DOM mutation. In card layout the cards are short
  // enough that the shift caused by removing one can push the next card above
  // the header, which the observer would immediately treat as another read —
  // cascading until many articles disappear at once.
  if (observer) {
    observer.disconnect()
    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))
  refreshUnreadDisplay()

  for (const feed of readFeeds) {
    markRead(feed.id)
  }

  nextTick().then(() => {
    // If scroll anchoring didn't compensate for the removed content (common
    // with position:fixed headers and overflow-x:hidden on body), the first
    // remaining article will have drifted above the header. Correct the scroll
    // position so it sits exactly at the header bottom before reconnecting —
    // otherwise the initial observation would immediately mark everything above
    // the topbar as read and cascade until the list is empty.
    const first = document.querySelector('.observe')
    if (first) {
      const top = first.getBoundingClientRect().top
      if (top < topbarHeight) {
        markProgrammaticScroll()
        window.scrollBy(0, top - topbarHeight)
      }
    }
    setupIntersectionObserver()
  })
}

function disconnectObserver() {
  if (observer) {
    observer.disconnect()
    observer = null
  }
}

function setInitialLoad(value) {
  initialLoad = value
}

async function markAllRead() {
  if (feeds.value.length === 0) return
  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
  refreshUnreadDisplay()
  // markRead() resolves to true/false rather than rejecting, so Promise.all
  // can't reject here — but a false means that article is still unread
  // server-side, which the message below must not contradict.
  const results = await Promise.all(ids.map(id => markRead(id)))
  const failedCount = results.filter(ok => !ok).length
  if (failedCount === 0) {
    showMessageForXSeconds('All articles marked as read.', 5)
  } else {
    // markRead() already surfaced each individual failure — this summarizes
    // the batch outcome instead of claiming full success over it.
    showMessageForXSeconds(`Marked ${ids.length - failedCount} of ${ids.length} as read; ${failedCount} failed and may reappear.`, 5)
  }
}

function markCurrentArticleRead() {
  const feed = feeds.value[currentIndex.value]
  // Marking read here (rather than via removeFeed, as the scroll-based list
  // view does) keeps the array stable so currentIndex stays valid while paging.
  // The local `read` flag lets leaveArticleView() drop these once we're done.
  if (feed) {
    feed.read = true
    markRead(feed.id)
  }
}

async function leaveArticleView() {
  // Articles paged past in article view were marked read but deliberately kept
  // 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'
  localStorage.setItem('viewMode', viewMode.value)
  refreshUnreadDisplay()
  // 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.
  await nextTick()
  setupIntersectionObserver()
}

function toggleViewMode() {
  if (viewMode.value === 'article') {
    leaveArticleView()
  } else {
    // Disconnect first: the v-if switch is about to unmount all .observe
    // elements, which would otherwise fire intersection callbacks reporting
    // them as no-longer-intersecting and mark every visible article read.
    if (observer) {
      observer.disconnect()
      observer = null
    }
    viewMode.value = 'article'
    localStorage.setItem('viewMode', viewMode.value)
    currentIndex.value = 0
    markCurrentArticleRead()
  }
}

async function toggleLayout() {
  if (observer) {
    observer.disconnect()
    observer = null
  }
  window.scrollTo(0, 0)
  layout.value = layout.value === 'list' ? 'cards' : 'list'
  localStorage.setItem('layout', layout.value)
  await nextTick()
  setupIntersectionObserver()
}

function nextArticle() {
  if (currentIndex.value < feeds.value.length - 1) {
    currentIndex.value += 1
    markCurrentArticleRead()
    window.scrollTo(0, 0)
  }
}

function prevArticle() {
  if (currentIndex.value > 0) {
    currentIndex.value -= 1
    markCurrentArticleRead()
    window.scrollTo(0, 0)
  }
}

export function useFeeds() {
  return {
    feeds,
    allItems,
    feedFilter,
    feedTitles,
    feedUnreadCounts,
    unreadCount,
    displayedFeedUnreadCounts,
    refreshUnreadDisplay,
    setFeedFilter,
    showMessage,
    message,
    showModal,
    viewMode,
    currentIndex,
    toggleViewMode,
    leaveArticleView,
    layout,
    toggleLayout,
    nextArticle,
    prevArticle,
    fetchData,
    sync,
    getReadable,
    markRead,
    markAllRead,
    showMessageForXSeconds,
    setupIntersectionObserver,
    disconnectObserver,
    setInitialLoad,
    handleIntersection,
    lastProgrammaticScroll,
    markProgrammaticScroll,
  }
}