From c4c1b44ffadec8592e619484792538b22f838f66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobi=C3=A1=C5=A1=20Va=C5=A1=C5=A5=C3=A1k?=
 <tobias.vastak@gmail.com>
Date: Sat, 22 Aug 2026 01:43:28 +0200
Subject: [PATCH] feat(ui): fold the thread subject as the thread scrolls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A long subject wrapped over several lines and pushed the message down,
and the sticky header kept those lines on screen for the whole thread.
Fold it to a single line as the thread scrolls instead, tied to the
scroll position rather than to a timer, so that a reader who stops
halfway finds it halfway.

The header hands back the height the subject gives up. Without that,
everything below moves up by as much on top of the scrolling that
caused the fold, and the thread runs away from the finger; it also ties
how fast the subject folds to how fast the thread moves, so neither can
be chosen on its own.

A line is measured in lh rather than --default-line-height, which the
server sets to a bare ratio: subtracting it from a length voids the
declaration it sits in, and the fold never ran at all.

Scroll anchoring is off. The header changing height had the browser
scroll back to compensate, which moved the thread over the mark that
started the fold and unfolded it again, in a loop that got worse the
longer the subject was. That loop is what sank the attempt in #11754.

The mobile offsets that compensated for the wrapping subject go with
it, and the subject is indented past the back button that the app
content lays over the header.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Tobiáš Vašťák <tobias.vastak@gmail.com>
---
 src/components/Thread.vue                    | 186 +++++++++++++++--
 src/tests/setup.js                           |   9 +
 src/tests/unit/components/Thread.vue.spec.js | 198 +++++++++++++++++++
 3 files changed, 381 insertions(+), 12 deletions(-)

diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 2fc98d88df..69c171dd19 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -11,9 +11,14 @@
 			:error="errorTitle ? errorTitle : t('mail', 'Not found')"
 			:message="errorMessage" />
 		<template v-else>
-			<div id="mail-thread-header">
+			<div ref="headerSentinel" class="thread-header-sentinel" :style="foldStyle" />
+			<div
+				id="mail-thread-header"
+				ref="threadHeader"
+				:class="{ 'mail-thread-header--stuck': subjectIsOneLine }"
+				:style="foldStyle">
 				<div id="mail-thread-header-fields">
-					<h2 dir="auto" :title="threadSubject">
+					<h2 ref="threadSubject" dir="auto" :title="threadSubject">
 						{{ threadSubject }}
 					</h2>
 				</div>
@@ -104,11 +109,27 @@ export default {
 			summaryText: '',
 			summaryError: false,
 			isolatedPrint: false,
+			headerCollapse: 0,
+			subjectHeight: null,
 		}
 	},
 
 	computed: {
 		...mapStores(useMainStore),
+
+		subjectIsOneLine() {
+			return this.headerCollapse === 1
+		},
+
+		// The marker is a sibling of the header rather than a child, so both are
+		// told how far the fold has come and how tall the subject is.
+		foldStyle() {
+			return {
+				'--subject-collapse': this.headerCollapse,
+				'--subject-height': this.subjectHeight,
+			}
+		},
+
 		threadId() {
 			return parseInt(this.$route.params.threadId, 10)
 		},
@@ -197,6 +218,15 @@ export default {
 			logger.debug('navigated to another thread', { to, from })
 			this.resetThread()
 		},
+
+		// The thread is fetched, so the subject is rarely there to be watched by
+		// the time this view is, and it is replaced again on the way to the next
+		// thread. The subject renders in the details' slot, which re-renders on
+		// its own and never reaches this view's `updated`.
+		loading: {
+			handler: 'watchSubjectHeight',
+			flush: 'post',
+		},
 	},
 
 	created() {
@@ -213,14 +243,93 @@ export default {
 		if (!document.getElementById(BROWSER_PRINT_NOTICE_ID)) {
 			document.body.appendChild(buildBrowserPrintNotice(document))
 		}
+
+		document.addEventListener('scroll', this.onThreadScroll, { capture: true, passive: true })
+		this.watchSubjectHeight()
 	},
 
 	beforeUnmount() {
 		window.removeEventListener('keydown', this.handleKeyDown)
 		document.getElementById(BROWSER_PRINT_NOTICE_ID)?.remove()
+		document.removeEventListener('scroll', this.onThreadScroll, true)
+		this.subjectObserver?.disconnect()
+		if (this.collapseFrame) {
+			cancelAnimationFrame(this.collapseFrame)
+		}
 	},
 
 	methods: {
+		/**
+		 * Track whether the header has been pinned to the top.
+		 *
+		 * The subject folds away as the thread scrolls, so that the reader who
+		 * stops halfway finds it halfway rather than watching it finish on its
+		 * own. Scroll position is the only clock.
+		 *
+		 * The scroll is caught on the way down from the document, because the
+		 * thread scrolls in a pane the component does not own and cannot name.
+		 *
+		 * Watching the subject waits for the subject: until the thread has been
+		 * fetched this view holds a loading screen, and there is no subject to
+		 * measure.
+		 */
+		watchSubjectHeight() {
+			const subject = this.$refs.threadSubject
+			if (!subject || subject === this.watchedSubject) {
+				return
+			}
+
+			this.watchedSubject = subject
+			this.subjectObserver?.disconnect()
+			this.subjectObserver = new ResizeObserver(this.measureSubject)
+			this.subjectObserver.observe(subject)
+			this.updateHeaderCollapse()
+		},
+
+		/**
+		 * Note how tall the subject is with every line shown, which is what the
+		 * fold counts down from.
+		 *
+		 * Only measured while the subject is whole: half folded it would report
+		 * the height it is on the way to, and the fold would chase itself.
+		 */
+		measureSubject() {
+			if (this.headerCollapse > 0) {
+				return
+			}
+			this.subjectHeight = `${this.$refs.threadSubject.scrollHeight}px`
+		},
+
+		onThreadScroll() {
+			if (this.collapseFrame) {
+				return
+			}
+			this.collapseFrame = requestAnimationFrame(() => {
+				this.collapseFrame = null
+				this.updateHeaderCollapse()
+			})
+		},
+
+		/**
+		 * How far the subject has folded, from whole to a single line.
+		 *
+		 * The marker above the header scrolls away while the header stays
+		 * pinned, so the gap that opens between the two is how far the thread
+		 * has travelled, and the marker's own height is how far it has to
+		 * travel. Both are read from the same viewport, so wherever the pane
+		 * sits below the app header falls out of the subtraction.
+		 */
+		updateHeaderCollapse() {
+			const marker = this.$refs.headerSentinel?.getBoundingClientRect()
+			const header = this.$refs.threadHeader?.getBoundingClientRect()
+			if (!marker?.height || !header) {
+				return
+			}
+
+			const travelled = (header.top - marker.top) / marker.height
+			this.headerCollapse = Math.min(Math.max(travelled, 0), 1)
+		},
+
 		async updateSummary() {
 			if (this.thread.length <= 2 || !this.enabledThreadSummary) {
 				return
@@ -539,6 +648,13 @@ export default {
 #mail-message {
 	width: 100%;
 	max-width: 100%;
+
+	// The header changes height when it pins, and the browser would scroll back
+	// by as much to hold the message still. That correction is what moves the
+	// thread back over the mark that pinned it in the first place, so the header
+	// unpins, grows, and the correction runs again. Let the message move
+	// instead: it is the header that shrank, and the reader is watching it.
+	overflow-anchor: none;
 }
 
 #mail-message :deep(.mail-message-body) {
@@ -565,7 +681,12 @@ export default {
 	position: -webkit-sticky; // ios/safari fallback
 	position: sticky;
 	top: 0;
-	margin-bottom: 5px;
+	// Folding shortens the header, and everything under it would move up by as
+	// much, on top of the scrolling that caused the fold. Hand back the height
+	// the subject gives up, so the message below holds still and the thread
+	// scrolls at the speed of the finger however fast the subject folds.
+	--subject-folded: calc((var(--subject-height, 1lh) - 1lh) * var(--subject-collapse, 0));
+	margin-bottom: calc(5px + var(--subject-folded));
 
 	&::before {
 		content: '';
@@ -579,13 +700,54 @@ export default {
 		border-bottom: var(--border-width-input-focused) solid var(--color-border);
 		z-index: -1;
 	}
+
+	// The subject follows the scroll from its full height down to one line.
+	// Until it has been measured there is nothing to count down from, so the
+	// fallback leaves every line alone. One line is `1lh` rather than
+	// `--default-line-height`, which the server sets to a bare ratio: subtracting
+	// it from a length would void the whole declaration.
+	#mail-thread-header-fields h2 {
+		max-height: calc(
+			var(--subject-height, 100vh)
+			- (var(--subject-height, 100vh) - 1lh) * var(--subject-collapse, 0)
+		);
+		overflow: hidden;
+	}
+
+	// Folded, the header is a strip over the message rather than a title above
+	// it. Clamping rather than truncating keeps the line break where the fold
+	// left it, so only the ellipsis appears at the end.
+	&.mail-thread-header--stuck #mail-thread-header-fields h2 {
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		-webkit-box-orient: vertical;
+	}
+}
+
+// How far the thread has to scroll for the subject to fold away: exactly the
+// height it is giving up, so a line of the subject folds away over the distance
+// that line would have scrolled off by anyway, and a longer subject takes
+// proportionally longer rather than folding in a snap. It takes no room of its
+// own, and a subject already on one line leaves nothing to fold.
+.thread-header-sentinel {
+	--fold-distance: calc(var(--subject-height, 1lh) - 1lh);
+	height: var(--fold-distance);
+	margin-bottom: calc(-1 * var(--fold-distance));
+
+	// The back button is sticky, and a sticky button still takes its place in
+	// the flow, leaving a button's worth of blank above the subject. Take it
+	// back so the subject sits beside the button rather than under it. Pulling
+	// the marker rather than the header moves the two together, which leaves
+	// the distance between them, and so the fold, as it was.
+	@media only screen and (width < #{variables.$breakpoint-mobile}) {
+		margin-top: calc(-1 * var(--default-clickable-area));
+	}
 }
 
 @media only screen and (width < #{variables.$breakpoint-mobile}) {
     #mail-thread-header {
         position: sticky !important;
-        // NcAppContent's back button takes this much space above the details
-        top: var(--default-clickable-area) !important;
+        top: 0 !important;
     }
 }
 
@@ -609,16 +771,16 @@ export default {
 
 @media only screen and (width < #{variables.$breakpoint-mobile}) {
     #mail-thread-header-fields {
-        padding-inline-start: 48px;
+        // Clear the back button the app content puts over the header: where it
+        // starts, how wide it is, and a gap so the subject does not run into it
+        padding-inline-start: calc(
+            var(--app-navigation-padding)
+            + var(--default-clickable-area)
+            + var(--default-grid-baseline) * 2
+        );
     }
 }
 
-@media only screen and (width < #{variables.$breakpoint-mobile}) {
-	#mail-thread-header-fields {
-		margin-top: calc(-1 * var(--default-clickable-area));
-	}
-}
-
 #mail-message :deep(#mail-content) {
 	margin: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 10) 0 calc(var(--default-grid-baseline) * 14);
 }
diff --git a/src/tests/setup.js b/src/tests/setup.js
index 5c0a6c5266..1ac3c28c30 100644
--- a/src/tests/setup.js
+++ b/src/tests/setup.js
@@ -39,6 +39,15 @@ global.OC = {
 global.t = vi.fn().mockImplementation((msg) => msg)
 global.n = vi.fn().mockImplementation((msg) => msg)
 
+// jsdom ships no ResizeObserver, so components that watch an element for its
+// size would fail to mount. Nothing is laid out in a test, so the stub never
+// reports a resize.
+global.ResizeObserver = class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
 /**
  * @param {string} path Path to file relative to src/tests/data/
  * @return {Buffer} File contents
diff --git a/src/tests/unit/components/Thread.vue.spec.js b/src/tests/unit/components/Thread.vue.spec.js
index 108001dd32..d504e32ccb 100644
--- a/src/tests/unit/components/Thread.vue.spec.js
+++ b/src/tests/unit/components/Thread.vue.spec.js
@@ -688,4 +688,202 @@ describe('Thread', () => {
 			expect(notice()).toBeNull()
 		})
 	})
+
+	describe('folding the subject away', () => {
+		const BAND = 48
+		const LINES = 3
+		let watched
+
+		beforeEach(() => {
+			watched = []
+			global.ResizeObserver = class {
+				observe(element) {
+					watched.push(element)
+				}
+
+				unobserve() {}
+				disconnect() {}
+			}
+		})
+
+		// jsdom lays nothing out, so the subject reports the height it is given
+		const setSubjectHeight = (view, height) => Object.defineProperty(
+			view.vm.$refs.threadSubject,
+			'scrollHeight',
+			{ value: height, configurable: true },
+		)
+
+		const mountThread = () => {
+			const view = shallowMount(Thread, {
+				global: {
+					mixins: [Nextcloud],
+					mocks: {
+						$route: {
+							params: {
+								threadId: 200,
+							},
+						},
+					},
+				},
+			})
+			setSubjectHeight(view, BAND * LINES)
+			return view
+		}
+
+		afterEach(() => {
+			document.getElementById('mail-browser-print-notice')?.remove()
+		})
+
+		/**
+		 * Put the thread at a scroll offset. The marker scrolls with the thread
+		 * while the header stays pinned, so the gap between them is the offset.
+		 *
+		 * @param {object} view the mounted thread
+		 * @param {number} scrolled pixels scrolled down from the top
+		 */
+		const scrollTo = (view, scrolled) => {
+			view.vm.$refs.headerSentinel.getBoundingClientRect = () => ({ top: -scrolled, height: BAND })
+			view.vm.$refs.threadHeader.getBoundingClientRect = () => ({ top: 0 })
+			view.vm.updateHeaderCollapse()
+		}
+
+		const header = (view) => view.find('#mail-thread-header')
+
+		it('leaves the subject whole at the top of the thread', () => {
+			const view = mountThread()
+
+			scrollTo(view, 0)
+
+			expect(view.vm.headerCollapse).toBe(0)
+		})
+
+		it('folds the subject as far as the thread has scrolled', () => {
+			const view = mountThread()
+
+			scrollTo(view, BAND / 4)
+
+			expect(view.vm.headerCollapse).toBe(0.25)
+		})
+
+		it('stops folding once the subject is down to one line', () => {
+			const view = mountThread()
+
+			scrollTo(view, BAND * 5)
+
+			expect(view.vm.headerCollapse).toBe(1)
+		})
+
+		it('unfolds again on the way back up', () => {
+			const view = mountThread()
+			scrollTo(view, BAND)
+
+			scrollTo(view, BAND / 2)
+
+			expect(view.vm.headerCollapse).toBe(0.5)
+		})
+
+		it('carries the fold into the header, for the subject to follow', async () => {
+			const view = mountThread()
+
+			scrollTo(view, BAND / 2)
+			await view.vm.$nextTick()
+
+			expect(header(view).element.style.getPropertyValue('--subject-collapse')).toBe('0.5')
+		})
+
+		it('adds the ellipsis only once the subject is one line', async () => {
+			const view = mountThread()
+
+			scrollTo(view, BAND / 2)
+			await view.vm.$nextTick()
+			expect(header(view).classes()).not.toContain('mail-thread-header--stuck')
+
+			scrollTo(view, BAND)
+			await view.vm.$nextTick()
+			expect(header(view).classes()).toContain('mail-thread-header--stuck')
+		})
+
+		it('measures the subject while every line of it is shown', async () => {
+			const view = mountThread()
+
+			view.vm.measureSubject()
+			await view.vm.$nextTick()
+
+			expect(header(view).element.style.getPropertyValue('--subject-height')).toBe(`${BAND * LINES}px`)
+		})
+
+		it('tells the marker how tall the subject is, since it is what sets the pace', async () => {
+			const view = mountThread()
+
+			view.vm.measureSubject()
+			await view.vm.$nextTick()
+
+			const marker = view.find('.thread-header-sentinel')
+			expect(marker.element.style.getPropertyValue('--subject-height')).toBe(`${BAND * LINES}px`)
+		})
+
+		it('does not re-measure a subject that is already folding', () => {
+			const view = mountThread()
+			view.vm.measureSubject()
+			scrollTo(view, BAND / 2)
+
+			setSubjectHeight(view, BAND)
+			view.vm.measureSubject()
+
+			expect(view.vm.subjectHeight).toBe(`${BAND * LINES}px`)
+		})
+
+		it('watches a subject that only shows up once the thread has been fetched', async () => {
+			// the thread is still on its way, so the view is a loading screen
+			const view = shallowMount(Thread, {
+				global: {
+					mixins: [Nextcloud],
+					mocks: {
+						$route: {
+							params: {
+								threadId: 100,
+							},
+						},
+					},
+				},
+			})
+			expect(view.vm.$refs.threadSubject).toBeUndefined()
+			expect(watched).toHaveLength(0)
+
+			view.vm.loading = false
+			await view.vm.$nextTick()
+
+			expect(watched).toContain(view.vm.$refs.threadSubject)
+		})
+
+		it('follows the scroll from the start, before there is a subject to fold', () => {
+			const listening = vi.spyOn(document, 'addEventListener')
+
+			const view = shallowMount(Thread, {
+				global: {
+					mixins: [Nextcloud],
+					mocks: {
+						$route: {
+							params: {
+								threadId: 100,
+							},
+						},
+					},
+				},
+			})
+
+			expect(listening).toHaveBeenCalledWith('scroll', view.vm.onThreadScroll, { capture: true, passive: true })
+			listening.mockRestore()
+		})
+
+		it('stops following the scroll once the thread is gone', () => {
+			const view = mountThread()
+			const removed = vi.spyOn(document, 'removeEventListener')
+
+			view.unmount()
+
+			expect(removed).toHaveBeenCalledWith('scroll', view.vm.onThreadScroll, true)
+			removed.mockRestore()
+		})
+	})
 })