📊 Note details tab in the sidebar

[karlitschek]

The note sidebar hosts Sharing and Versions but says nothing about the note itself. This adds a tab of Notes' own — Details — with the note's category, a reading estimate, its path, and a read-only marker when the note cannot be written.

Everything but the reading estimate is already on the note in the store, so the tab costs one fetch at most. Size, modification date and owner are not repeated here: #1972 put them in the sidebar header, where they describe the note as a whole rather than belonging to one of its tabs.

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.

NcAppSidebarTab keeps an inactive tab mounted and hides it in CSS, so the tab's content is rendered only while it is the active one. Otherwise the estimate would recount the whole body on every keystroke of someone editing the note with the sidebar open on Sharing.

The body is fetched for one note at a time, and which note that is guards the result: the sidebar can be sent to another note while a fetch is still on its way — from a row of the list, or by the list navigating — and the answer to the first request must then neither be reported for the second note nor keep its own fetch from starting.

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. Emphasis is matched within a line, both because it cannot span a blank line and so an unclosed marker does not scan the rest of the note looking for a partner.

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.

Fitting in next to the registered tabs

The tab is not one from the Files registry, so it renders outside the loop over the allow-listed ones, with an order that puts it after them: Sharing stays the first and default tab and Versions keeps its place. Its icon is outlined until its tab is active, following what the sharing icon already does, and its rows are inset to the same 8px the Files tabs put their own content at.

resolvedTab() clamps over both kinds of tab now rather than the registered ones alone, so the fallback can land on this tab when it is the only one there is — and the "not available right now" empty state is keyed on that same list, so it cannot render alongside a tab that is on screen. Opening the sidebar no longer skips loading the DAV node when no Files tab is registered, since the header and this tab both need it.

"Details" is offered in the note's action menu next to Share and Versions.

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. 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 the note attributes only. internalPath is not one of them, and neither is readonly, so both were left behind on every update — a refetch could not have refreshed them either.
• The category endpoint answers with the category string alone, so nothing carried the new path back. setCategory() refetches the note now. A refetch that does not arrive is not the category update having failed, so its failure is not reported as one.

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.

Tests

playwright/e2e/note-sidebar.spec.ts gains cases that open the details tab from the actions menu, fill its icon only while it is active, estimate the reading time from the note body, load a body for a note that has never been opened, load the body of the note the sidebar moves to while another is still on its way, follow the note the list navigates to, and mark the reading time unavailable when the body cannot be loaded. Its existing tab-count case now expects three tabs rather than two.

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.

src/tests/notesStore.spec.js covers updateNote() propagating internalPath and readonly. Those are unit tests rather than e2e ones 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

[codecov]

Codecov Report

❌ Patch coverage is 90.90909% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/NotesService.js	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[silverkszlo]

please resolve the merge conflicts now that #1972 has been merged

[silverkszlo]

cool, sidebar looks good and complete now, thanks! :)

[AndyScherzinger]

Thanks @silverkszlo 🙏

I am running another review via an agent, let's see if it returns with findings, else I agree - good to go

[AndyScherzinger]

@silverkszlo I am done and CI is green 🚀