From 37b8c59d965f513290b6ff1a415898a6c6e41b87 Mon Sep 17 00:00:00 2001 From: Dirk Date: Sat, 22 Aug 2026 12:30:36 +0200 Subject: [PATCH 01/40] Add reading-progress indicator to SingleContent top bar - Mobile: renders a thin progress bar above the bottom nav via a teleported element in BasePage, driven by a new rAF-throttled scroll tracker in useReadingProgressTracker. - Desktop: adds a left-gutter ArticleOutline (heading nav + progress rail) and reflows the article into a 3-column grid to make room for it. --- app/src/components/BasePage.vue | 14 + .../composables/useReadingProgressTracker.ts | 45 ++ app/src/pages/SingleContent/SingleContent.vue | 418 +++++++++--------- 3 files changed, 279 insertions(+), 198 deletions(-) diff --git a/app/src/components/BasePage.vue b/app/src/components/BasePage.vue index 7ef5964725..bd341b151b 100644 --- a/app/src/components/BasePage.vue +++ b/app/src/components/BasePage.vue @@ -23,6 +23,8 @@ defineProps<{ content?: ContentDto; showBackButton?: boolean; desktopTopBar?: boolean; + /** Reading progress (0-100), rendered as a mobile bar above the bottom nav. Undefined hides it. */ + readingProgress?: number; }>(); const { onBackClick } = useBackNavigation(); @@ -50,6 +52,18 @@ onUnmounted(() => {