Skip to content

feat(navigation): move "New category" next to the Categories caption - #1968

Open
karlitschek wants to merge 2 commits into
mainfrom
feat/noid/compact-new-category-button
Open

feat(navigation): move "New category" next to the Categories caption#1968
karlitschek wants to merge 2 commits into
mainfrom
feat/noid/compact-new-category-button

Conversation

@karlitschek

@karlitschek karlitschek commented Aug 6, 2026

Copy link
Copy Markdown
Member

🖼️ Screenshots

🏚️ Before 🏡 After
before after

The full-width NcAppNavigationNew button sat above everything else in the sidebar and drew attention away from the note list, even though creating a category is a rare action compared to picking one.

It is now an inline action on the "Categories" caption: NcActions renders a single inline action as one icon button, so it appears as a small folder-plus next to the heading, with the action text as its accessible name and tooltip. No separate overflow menu is rendered, because there are no other actions.

Dropping a note on the caption row still starts a new category containing that note, which is what the old button offered. The row rather than the icon is the drop target: it is a much larger area to aim at than a single icon, and the caption gets its own drop highlight since it is not an .app-navigation-entry and cannot reuse the existing .drop-over rule.

Both the click and the drop path now call CategoriesList.startNewCategory() directly instead of round-tripping through the notes:category:new event bus. The subscription stays in place so anything else can still trigger it.

The action is hidden while the note list is in an error state, matching the old button's v-show="!loading.notes && !error"; CategoriesList takes a disabled prop for that, since the caption itself is still rendered.

The accessible name is unchanged, so the Playwright helpers that locate the button by role and name keep working.

🤖 AI (if applicable)

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

@karlitschek
karlitschek requested review from AndyScherzinger and silverkszlo and a lite review from Copilot and removed request for enjeck and silverkszlo August 6, 2026 13:29

This comment was marked as resolved.

@enjeck enjeck left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pls add screenshots of before vs after

@AndyScherzinger AndyScherzinger added enhancement New feature or request 3. to review AI assisted This PR contains AI-assisted commits labels Aug 11, 2026
@AndyScherzinger
AndyScherzinger force-pushed the feat/noid/compact-new-category-button branch 2 times, most recently from 3e646eb to 5f26db0 Compare August 19, 2026 10:36
@AndyScherzinger AndyScherzinger added the design Related to the design or user experience label Aug 19, 2026

@jancborchardt jancborchardt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good design-wise. The extra CSS shouldn’t be needed but needs @enjeck @silverkszlo’s review

@jancborchardt jancborchardt moved this to 🏗️ At engineering in 🖍 Design team Aug 19, 2026
@AndyScherzinger
AndyScherzinger force-pushed the feat/noid/compact-new-category-button branch from 6fec9f8 to 0f8b656 Compare August 19, 2026 13:28
Frank Karlitschek and others added 2 commits August 19, 2026 19:57
The full-width NcAppNavigationNew button sat above everything else in the
sidebar and drew attention away from the note list, even though creating a
category is a rare action compared to picking one.

It is now an inline action on the "Categories" caption: NcActions renders a
single inline action as one icon button, so it appears as a small folder-plus
next to the heading, with the action text as its accessible name and tooltip.
No separate overflow menu is rendered, because there are no other actions.

Dropping a note on the caption row still starts a new category containing
that note, which is what the old button offered. The row rather than the
icon is the drop target: it is a much larger area to aim at than a single
icon, and the caption gets its own drop highlight since it is not an
.app-navigation-entry and cannot reuse the existing .drop-over rule.

Both the click and the drop path now call CategoriesList.startNewCategory()
directly instead of round-tripping through the notes:category:new event bus.
The subscription stays in place so anything else can still trigger it.

The action is hidden while the note list is in an error state, matching the
old button's `v-show="!loading.notes && !error"`. CategoriesList takes a
`hideNewCategoryAction` prop for that — it only suppresses the action, the
caption itself keeps rendering. The drag handlers honour it too, so the row
stops being a drop target along with the action. NcActions renders nothing
when its slot yields no action, so one caption covers both states.

The accessible name is unchanged, so the Playwright helpers that locate the
button by role and name keep working.

Assisted-by: Claude Code:claude-opus-5[1m]
Co-Authored-By: Andy Scherzinger <info@andy-scherzinger.de>
Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
…" icon

The counters sat 36px inboard of the caption's icon. Every named category
permanently reserved room for its actions button, and "All notes" and
"Uncategorized" padded themselves by the same amount to match, so the
counters agreed with each other but not with anything else in the sidebar.

The actions button is no longer displayed permanently. Counters end-align
instead, inset by half the difference between the clickable area and the
bubble, which centres a single-digit bubble under the icon and lets longer
counts grow towards the start from that same end edge.

Revealing the actions button would snap the counter aside, so the button is
taken out of the flow and the counter moves under its own margin, animated
over --animation-quick and dropped for prefers-reduced-motion. Rows without
actions never move.

A selected category keeps showing its actions, so its counter stays in the
shifted position for as long as it is selected.

Assisted-by: Claude Code:claude-opus-5[1m]
Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
@AndyScherzinger
AndyScherzinger force-pushed the feat/noid/compact-new-category-button branch from 0f8b656 to 58a931c Compare August 19, 2026 18:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review AI assisted This PR contains AI-assisted commits design Related to the design or user experience enhancement New feature or request papercut

Projects

Status: 🏗️ At engineering

Development

Successfully merging this pull request may close these issues.

5 participants