mathias
5ed780baa3
The header's feed <select> is now a funnel button that opens a modal with an "All feeds" checkbox and one checkbox per feed with unread items. The selection is either "All feeds" or at least one feed, is applied once when the modal closes, and is persisted in localStorage. - feedFilter holds string[] | null; setFeedFilter is a no-op when the selection is unchanged (order-insensitive), sparing callers the scroll/mark-read side effects. - Selected feeds stay listed at 0 unread so they can be unchecked; titles whose feed no longer exists are pruned after each fetch. - The persisted filter is cleared on logout and on 401 (handler extracted to httpAuthInterceptor.js so it is unit-testable). - The modal locks body scroll while open so scrolling behind it can't mark articles read.
417 lines
12 KiB
Vue
417 lines
12 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { RouterLink, useRouter, useRoute } from 'vue-router'
|
|
import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
|
|
import FeedFilter from './modal/FeedFilter.vue'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const { sync, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, lastProgrammaticScroll, isSyncing } = useFeeds()
|
|
|
|
const headerRef = ref(null)
|
|
const filterBtnRef = ref(null)
|
|
const filterModalOpen = ref(false)
|
|
|
|
function openFilterModal() {
|
|
refreshUnreadDisplay()
|
|
filterModalOpen.value = true
|
|
}
|
|
|
|
// setFeedFilter() itself no-ops (order-insensitively) an unchanged selection,
|
|
// so there's nothing to check here before applying it.
|
|
async function handleFilterClose(selection) {
|
|
filterModalOpen.value = false
|
|
await setFeedFilter(selection)
|
|
filterBtnRef.value?.focus()
|
|
}
|
|
|
|
// Scroll-driven show/hide: the header slides out of view on scroll-down and
|
|
// back in only on scroll-up — never merely by proximity to the top. This is
|
|
// show/hide via `transform` (not the old resize behaviour) — the header is
|
|
// position:fixed, so translating it never reflows content. The app's
|
|
// programmatic scrolls resolve to sensible states without any top-of-page
|
|
// special case: scrollTo(0, 0) (article paging, layout toggle) is itself a
|
|
// large upward jump, so it crosses REVEAL_THRESHOLD like a real scroll-up and
|
|
// reveals the header that way; the list-view read-correction scrollBy moves
|
|
// only a few px → stays under the threshold and leaves a hidden header hidden.
|
|
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)
|
|
|
|
// Keep the header visible while the menu is open (the dropdown is anchored
|
|
// to the header, so hiding it would slide the open menu off-screen).
|
|
if (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)
|
|
refreshUnreadDisplay()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', onScrollRaf)
|
|
document.removeEventListener('click', onDocumentClick)
|
|
})
|
|
|
|
const onFeedsPage = computed(() => route.path === '/feeds')
|
|
|
|
|
|
const menuOpen = ref(false)
|
|
|
|
function toggleMenu() {
|
|
menuOpen.value = !menuOpen.value
|
|
}
|
|
|
|
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()
|
|
router.push({ name: 'login' })
|
|
}
|
|
|
|
function handleSync() {
|
|
sync()
|
|
closeMenu()
|
|
}
|
|
|
|
function handleMarkAllRead() {
|
|
markAllRead()
|
|
closeMenu()
|
|
}
|
|
|
|
function handleToggleViewMode() {
|
|
toggleViewMode()
|
|
closeMenu()
|
|
}
|
|
|
|
function handleToggleLayout() {
|
|
toggleLayout()
|
|
closeMenu()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
<span
|
|
v-if="isSyncing"
|
|
class="app-nav__sync-spinner"
|
|
aria-hidden="true"
|
|
></span>
|
|
<button
|
|
v-if="onFeedsPage && feedTitles.length"
|
|
ref="filterBtnRef"
|
|
class="app-nav__filter-btn"
|
|
:class="{ 'app-nav__filter-btn--active': feedFilter !== null }"
|
|
type="button"
|
|
aria-haspopup="dialog"
|
|
:aria-expanded="filterModalOpen"
|
|
:aria-label="feedFilter !== null ? 'Filter feeds (active)' : 'Filter feeds'"
|
|
:title="feedFilter !== null ? 'Filter feeds (active)' : 'Filter feeds'"
|
|
@click="openFilterModal"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
|
|
</svg>
|
|
</button>
|
|
<Teleport to="body">
|
|
<FeedFilter
|
|
:show="filterModalOpen"
|
|
:titles="feedTitles"
|
|
:counts="displayedFeedUnreadCounts"
|
|
:selected="feedFilter"
|
|
@close="handleFilterClose"
|
|
/>
|
|
</Teleport>
|
|
<button
|
|
class="app-nav__hamburger"
|
|
type="button"
|
|
:aria-expanded="menuOpen"
|
|
aria-controls="app-nav-menu"
|
|
:aria-label="menuOpen ? 'Close menu' : 'Open menu'"
|
|
@click="toggleMenu"
|
|
>
|
|
<span class="app-nav__hamburger-icon" aria-hidden="true">
|
|
<span></span><span></span><span></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<Transition name="app-nav-menu">
|
|
<nav
|
|
v-if="menuOpen"
|
|
id="app-nav-menu"
|
|
class="app-nav__menu"
|
|
@click.self="closeMenu"
|
|
>
|
|
<div class="app-nav__menu-panel">
|
|
<RouterLink to="/feeds" class="app-nav__menu-item" @click="closeMenu">Feeds</RouterLink>
|
|
<template v-if="onFeedsPage">
|
|
<button class="app-nav__menu-item" type="button" @click="handleToggleViewMode">
|
|
{{ viewMode === 'list' ? 'Article view' : 'List view' }}
|
|
</button>
|
|
<button v-if="viewMode === 'list'" class="app-nav__menu-item" type="button" @click="handleToggleLayout">
|
|
{{ layout === 'list' ? 'Card layout' : 'List layout' }}
|
|
</button>
|
|
<button class="app-nav__menu-item" type="button" @click="handleMarkAllRead">Mark all as read</button>
|
|
</template>
|
|
<button class="app-nav__menu-item" type="button" @click="handleSync">Sync</button>
|
|
<RouterLink to="/admin" class="app-nav__menu-item" @click="closeMenu">Admin</RouterLink>
|
|
<button class="app-nav__menu-item app-nav__logout" type="button" @click="logout">Logout</button>
|
|
</div>
|
|
</nav>
|
|
</Transition>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.app-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
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 {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 1rem;
|
|
}
|
|
|
|
.app-nav__title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
font-size: clamp(0.95rem, 3.5vw, 1.1rem);
|
|
}
|
|
|
|
.app-nav__unread {
|
|
font-weight: normal;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.app-nav__sync-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--color-border);
|
|
border-top-color: var(--color-text);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
flex-shrink: 0;
|
|
animation: app-nav-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes app-nav-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.app-nav__sync-spinner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.app-nav__filter-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-nav__filter-btn:hover {
|
|
border-color: var(--color-border-hover);
|
|
}
|
|
|
|
.app-nav__filter-btn--active::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.app-nav__hamburger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-nav__hamburger-icon {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 22px;
|
|
height: 16px;
|
|
}
|
|
|
|
.app-nav__hamburger-icon span {
|
|
display: block;
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
background: var(--color-text);
|
|
}
|
|
|
|
.app-nav__menu {
|
|
position: absolute;
|
|
inset: 100% 0 auto 0;
|
|
z-index: 30;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0 1rem 1rem;
|
|
}
|
|
|
|
.app-nav__menu-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: clamp(220px, 60vw, 280px);
|
|
padding: 0.75rem;
|
|
background: var(--color-background-soft);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.app-nav__menu-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 44px;
|
|
padding: 0.5rem 0.9rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-nav__menu-item:hover {
|
|
border-color: var(--color-border-hover);
|
|
}
|
|
|
|
.app-nav__menu-item.router-link-exact-active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.app-nav-menu-enter-active,
|
|
.app-nav-menu-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.app-nav-menu-enter-from,
|
|
.app-nav-menu-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.app-nav__wrapper {
|
|
padding: 0.5rem 2rem;
|
|
}
|
|
}
|
|
</style>
|