Space Usage Tool: improvements

[adoriandoran]

The Space Usage tool is now usable on a phone. The treemap is drawn several screens tall and scrolled through rather than squeezed into one, since a narrow screen gives it no width to spread across, and tapping any cell or ring segment names it in a strip along the foot of the screen: where the note sits, what it is called and how much it takes. That strip is what replaces hovering, which a touch screen cannot do, and it is also where the note's actions are reached. Long names and paths are no longer cut off but scrolled, with the ends fading away to say that they carry on, and a path reads itself out on its own so you can see where a note lives without touching anything.

Selecting and acting on a phone

• Select a treemap cell or a ring segment by tapping it, drawing the chosen mark with a border struck from its own hue at full strength.
• Add a strip along the foot of the page naming the chosen mark: its path, its name and its size.
• Keep the strip on screen with nothing chosen, showing "Tap an item for details".
• Raise the mark's context menu by tapping the strip.
• Open the chosen mark on a second tap: walk into a child in Browse, quick-edit the note in Overview.
• Offer "Show selection details" under the Browse chart, on a line reserved whether or not anything is chosen.
• Leave the composition ring's segments inert on a tap, so a ring tap never throws a popup over the chart.
• Name the other-notes, hidden-notes, revisions and deleted buckets in the strip, with their own menus where they have one.
• Suppress the charts' cursor-following tooltips on a touch screen.
• Confine the charts' hover styling to @media (hover: hover), so a tapped mark does not stay hovered.
• Add noTooltipOnTouch to ActionButton and use it for Browse's back arrow, moving its label to aria-label.

Mobile layout

• Draw the treemap 200dvh tall and make the page itself the scroller.
• Stick the toolbar to the top of that page, so the view choice, the cleanup and the refresh stay reachable.
• Replace the status sentences with a grid of four figures: Notes, Total, Attachments and Deleted items.
• Fold that grid into a single centred row once it measures 600px or wider.
• Reserve room below the map for the strip, measured from the strip itself.
• Wrap a long cleanup dialog item title onto a second line instead of running it past the card.

Scrollable labels

• Add ScrollableLabel, a single line swiped rather than cut off, fading at whichever end it carries on past.
• Transition those fades over 300ms by registering their widths as typed custom properties.
• Add autoScroll, walking a line to its end at 30 pixels a second and stopping there.
• Hand an auto-scrolling line over to the reader for good at their first pointer or wheel, resizes included.
• Skip the walk entirely under prefers-reduced-motion.
• Flip the fade direction in a right-to-left page and read scroll offsets as a distance travelled.
• Use it for the selection strip's path, which walks itself, and for its note name.
• Use it for Browse's whole breadcrumb row, which walks itself to the note in view.
• Keep the breadcrumb's first crumb reachable by centring it safely, and stop crumbs from shrinking.

Chart primitives

• Add selectedItemId to Treemap and selectedSegmentId to DonutChart.
• Give a donut segment a plain label, for naming it away from the chart.
• Derive a chosen mark's colour from its own hue, with theme-tunable saturation and lightness.

[github-actions]

🖥️ App preview is ready!

🔗 Preview URL: https://pr-11082.trilium-app.pages.dev
📖 Production URL: https://app.triliumnotes.org

✅ All checks passed

This preview will be updated automatically with new commits.

[codecov]

Bundle Report

Changes will increase total bundle size by 45.11kB (0.04%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
standalone-esm	54.35MB	35.94kB (0.07%) ⬆️
client-esm	49.14MB	9.17kB (0.02%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: client-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
src/ContentWidget-*.js	4.6kB	162.97kB	2.9%
src/ContentWidget-*.css	4.52kB	35.24kB	14.7% ⚠️
src/ActionButton-*.js	56 bytes	1.22kB	4.82%

Files in src/ContentWidget-*.js:

• ./src/widgets/type_widgets/space_usage/overview.tsx → Total Size: 3.35kB

• ./src/widgets/type_widgets/space_usage/selection.tsx → Total Size: 1.67kB

• ./src/widgets/type_widgets/space_usage/note_usage_donut.tsx → Total Size: 3.92kB

• ./src/widgets/type_widgets/space_usage/cleanup_dialog.css → Total Size: 0 bytes

• ./src/widgets/type_widgets/space_usage/donut_segments.ts → Total Size: 3.12kB

• ./src/widgets/type_widgets/space_usage/selection.css → Total Size: 0 bytes

• ./src/widgets/react/ScrollableLabel.css → Total Size: 0 bytes

• ./src/widgets/react/ScrollableLabel.tsx → Total Size: 2.25kB

• ./src/widgets/react/charts/chart_tooltip.tsx → Total Size: 1.13kB

• ./src/widgets/react/charts/Treemap.css → Total Size: 0 bytes

• ./src/widgets/react/charts/Treemap.tsx → Total Size: 3.09kB

• ./src/widgets/type_widgets/space_usage/browse.tsx → Total Size: 4.88kB

• ./src/widgets/type_widgets/space_usage/index.tsx → Total Size: 4.96kB

• ./src/widgets/react/charts/DonutChart.css → Total Size: 0 bytes

• ./src/widgets/react/charts/DonutChart.tsx → Total Size: 2.97kB

• ./src/widgets/type_widgets/space_usage/browse.css → Total Size: 0 bytes

• ./src/widgets/type_widgets/space_usage/index.css → Total Size: 0 bytes

• ./src/widgets/type_widgets/space_usage/note_usage_donut.css → Total Size: 0 bytes

Files in src/ActionButton-*.js:

• ./src/widgets/react/ActionButton.tsx → Total Size: 1.82kB

view changes for bundle: standalone-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/abstract_provider-*.js	4.32kB	2.08MB	0.21%
src/src-*.js	-34 bytes	175 bytes	-16.27%
src/src-*.js	1.01kB	1.52MB	0.07%
src/src-*.js	34 bytes	209 bytes	19.43% ⚠️
src/geomap-*.js	-181 bytes	1.06MB	-0.02%
assets/llm-*.js	217 bytes	725.05kB	0.03%
assets/officeparser_entry-*.js	6.72kB	430.86kB	1.58%
src/app_context-*.js	3.68kB	216.18kB	1.73%
src/ContentWidget-*.js	5.9kB	162.98kB	3.76%
src/desktop_layout-*.js	742 bytes	83.2kB	0.9%
assets/in_app_help_provider-*.js	294 bytes	80.77kB	0.37%
assets/zip-*.js	861 bytes	68.89kB	1.27%
src/i18n-*.js	127 bytes	7.4kB	1.75%
src/hooks-*.js	678 bytes	41.29kB	1.67%
src/ContentWidget-*.css	4.76kB	35.24kB	15.64% ⚠️
src/desktop_layout-*.css	469 bytes	14.71kB	3.29%
src/revisions-*.js	2 bytes	14.03kB	0.01%
src/File-*.js	-107 bytes	12.94kB	-0.82%
src/image_compression_dialog-*.js	57 bytes	12.32kB	0.46%
src/toast-*.js	29 bytes	9.58kB	0.3%
src/color_scheme-*.js	100 bytes	9.38kB	1.08%
src/TitleRow-*.css	-67 bytes	9.36kB	-0.71%
src/Card-*.css	4.12kB	7.36kB	127.5% ⚠️
src/OptionsDialog-*.css	1.67kB	6.12kB	37.56% ⚠️
src/OptionsDialog-*.js	173 bytes	5.83kB	3.06%
src/IconPicker-*.js	4 bytes	5.04kB	0.08%
src/master_detail-*.css	230 bytes	3.25kB	7.61% ⚠️
src/Card-*.js	127 bytes	3.11kB	4.26%
src/Dropdown-*.js	24 bytes	2.77kB	0.87%
src/master_detail-*.js	75 bytes	2.59kB	2.99%
src/i18n-*.css	-81 bytes	2.16kB	-3.62%
src/PdfViewer-*.js	17 bytes	82 bytes	26.15% ⚠️
src/PdfViewer-*.js	99 bytes	1.9kB	5.51% ⚠️
src/image_compression_dialog-*.css	-270 bytes	1.86kB	-12.65%
assets/pt-*.js	-16 bytes	1.28kB	-1.23%
assets/pt-*.js	16 bytes	1.3kB	1.25%
assets/en-*.js	709 bytes	1.29kB	121.2% ⚠️
assets/en-*.js	-709 bytes	585 bytes	-54.79%
src/ActionButton-*.js	56 bytes	1.21kB	4.85%
src/LinkButton-*.js	103 bytes	381 bytes	37.05% ⚠️
src/HelpDropdown-*.css	-26 bytes	334 bytes	-7.22%

[codecov]

Codecov Report

❌ Patch coverage is 91.08280% with 14 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
apps/client/src/widgets/react/ScrollableLabel.tsx	86.53%	3 Missing and 4 partials ⚠️
.../src/widgets/type_widgets/space_usage/overview.tsx	84.61%	1 Missing and 3 partials ⚠️
...src/widgets/type_widgets/space_usage/selection.tsx	90.00%	0 Missing and 2 partials ⚠️
...gets/type_widgets/space_usage/note_usage_donut.tsx	92.85%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[greptile-apps]

Greptile Summary

The PR improves the Space Usage tool for touch interaction and narrow mobile layouts.

• Adds persistent chart selections and a details strip for touch users.
• Introduces scrollable, optionally self-scrolling labels for long paths and names.
• Updates chart primitives, responsive layout, status presentation, and shared button accessibility behavior.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/client/src/widgets/react/ScrollableLabel.tsx	Adds overflow fades and optional automatic scrolling while preserving user handoff across overflow-driven effect reruns.
apps/client/src/widgets/type_widgets/space_usage/browse.tsx	Adds touch selection and breadcrumb scrolling and replaces the raw details action with the shared Button.
apps/client/src/widgets/type_widgets/space_usage/index.tsx	Coordinates responsive Space Usage state, loading, selection, and mobile interaction behavior.
apps/client/src/widgets/type_widgets/space_usage/selection.tsx	Renders the persistent selection details strip with scrollable path and name labels.
apps/client/src/widgets/react/charts/DonutChart.tsx	Extends donut segments with labels and controlled selection styling.

_{Reviews (5): Last reviewed commit: "Merge branch 'feat/space-usage-tool-impr..." | Re-trigger Greptile}