📊 Note details tab in the sidebar

[karlitschek]

The note sidebar hosts Sharing but says nothing about the note itself. This adds a first tab — Details — with the note's category, a reading estimate, its path, and a read-only marker when the note cannot be written. The file's size and modification date go into the sidebar header instead, since they describe the note as a whole rather than belonging to one of its tabs.

Most of it is free: the sidebar already fetches the note's DAV node for the sharing tab, so the size comes from data it was loading anyway, and everything else is on the note in the store.

The reading estimate shapes the design

The note list payload excludes content, so a note that has never been opened has none client-side. Rather than fetching every body up front, the tab pulls the one note it needs, and only once its tab is actually selected — opening the sidebar to share a note does not drag its body down with it. Until then the row shows a placeholder, and a body that cannot be read shows a dash rather than disappearing.

Counting words means ignoring the markup, otherwise # and ** inflate the number. noteStats.js strips the obvious things — fenced code, image syntax, link targets while keeping labels, heading, quote and list markers, setext underlines, emphasis — and leaves the rest alone. A full parse would be much more code for a number nobody checks to the decimal.

Deliberately no word or character count

The Text app already shows both for the note open in rich mode, computed from its parsed document rather than from the markdown. The two definitions disagree — for **bold** [label](https://example.com) Text counts 10 characters and a markdown-based count sees 37 — so a second pair of numbers here would invite the question of which is right. A reading estimate is the one figure Text does not offer.

Making room for a second tab

The sidebar hosted exactly one, so this takes a little with it:

• A new event notes:sidebar:open carries a tab id. notes:share:open is kept as a thin wrapper so anything already emitting it keeps working, and "Details" is offered in the note's action menu next to Share.
• The requested tab is clamped to one the sidebar actually renders — NcAppSidebar falls back to its first tab on its own, but does not report that back, so active would otherwise reach the wrong element.
• Both tab icons are outlined until their tab is active, then fill, following the pattern from 🎨 Icons should be outline-variant where possible tables#2672. The swap happens inside the #icon slot rather than through a dedicated one, since @nextcloud/vue has no #icon-active.
• The header no longer says "Share", the "not available right now" empty state now also checks for a note so it cannot appear just because the sharing tab failed to register, and the context error copy no longer claims sharing is what failed.

The tab is Notes' own rather than a Files sidebar tab, so it renders outside the registry lookup with order 0 to sit ahead of Sharing, and its rows are inset to the same 8px the Files tabs put their own content at.

Keeping up with the note

The sidebar is opened for one note, but the list keeps navigating. An open sidebar now follows whichever note is being looked at, the way the Files one does, keeping the tab in view — this is its own commit, since it is a fix rather than part of the tab. It watches the note id in the route rather than the store's selectedNote, which nothing ever sets.

Within the tab, the category was reactive but the path was not, and needed a full reload. Two separate causes, both required:

• updateNote() copies noteAttributes only, and internalPath is not one of them, so it was dropped on every update — a refetch could not have refreshed it either.
• The category endpoint answers with the category string alone, so nothing carried the new path back. setCategory() refetches the note now.

Measured on a dev instance: neither fix, the path never updates; the store fix alone, 18.9s (the next background sync); both, 415ms.

Layout

Rows are stacked — label above value — rather than laid out in two columns. A path is long enough that a two-column row either wraps inside a narrow value column or has to break the rhythm by spanning the full width on its own; stacking every row removes the special case and gives each value the whole sidebar. It also leaves room for translated labels, which run considerably longer than the English ones.

core/css/apps.scss styles dl/dt/dd for prose in a wide content area: 12px of padding on every side, and a fixed 130px label column aligned to its end. In a sidebar that doubled the height of every row and left the labels ragged, so the component resets all three. Worth knowing for anyone else reaching for a description list.

The header subname carries size · modified, the latter through NcDateTime so it stays current without a reload. This overlaps #1972, which renders a richer subname of its own including the owner — that one should win on rebase. It is duplicated here only so this PR is reviewable on its own.

Tests

New playwright/e2e/note-sidebar.spec.ts:

• opens the details tab from the actions menu
• keeps the sharing tab reachable next to the details one
• fills a tab icon only while its tab is active
• falls back to the details tab when the requested one is unavailable
• estimates the reading time from the note body
• follows the note the list navigates to
• marks the reading time unavailable when the note body cannot be loaded

src/tests/noteStats.spec.js covers noteStats.js — every markup rule stripMarkup() implements, including the non-breaking space a task checkbox may contain, plus a body that is absent or not a string and a reading estimate that neither rounds an existing note down to nothing nor misrounds at the boundaries. It needs the vitest setup from #1989, which should merge first.

src/tests/notesStore.spec.js covers updateNote() propagating internalPath. That one is a unit test rather than an e2e one on purpose: the path refreshes within seconds in the e2e container whether the fix is there or not, so no browser test can fail for it.

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI