feat(navigation): move "New category" next to the Categories caption - #1968
Open
karlitschek wants to merge 1 commit into
Open
feat(navigation): move "New category" next to the Categories caption#1968karlitschek wants to merge 1 commit into
karlitschek wants to merge 1 commit into
Conversation
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. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
There was a problem hiding this comment.
Pull request overview
Warning
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
Moves the “New category” affordance from a full-width sidebar button into an inline action beside the “Categories” caption, while keeping drag-and-drop creation behavior on the caption row.
Changes:
- Replaces
NcAppNavigationNewinApp.vuewith an inlineNcActionButtonrendered via theNcAppNavigationCaptionactions slot. - Adds caption-row drag-over/drop handling and a dedicated drop-highlight style in
CategoriesList.vue. - Routes click and drop creation directly through
CategoriesList.startNewCategory()and passes adisabledprop to hide the action on error.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/CategoriesList.vue | Adds inline “New category” action, caption drop handling, and drop-highlight styles; introduces disabled prop. |
| src/App.vue | Removes the old full-width “New category” button and related event-bus/drag handlers; wires disabled to error state. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+36
to
+41
| <NcAppNavigationCaption v-if="!disabled" | ||
| v-show="!loading" | ||
| :name="t('notes', 'Categories')" | ||
| :inline="1" | ||
| :class="{ 'drop-over-caption': dragOverNewCategory }" | ||
| @dragover="onNewCategoryDragOver($event)" |
Comment on lines
+36
to
+58
| <NcAppNavigationCaption v-if="!disabled" | ||
| v-show="!loading" | ||
| :name="t('notes', 'Categories')" | ||
| :inline="1" | ||
| :class="{ 'drop-over-caption': dragOverNewCategory }" | ||
| @dragover="onNewCategoryDragOver($event)" | ||
| @dragleave="onNewCategoryDragLeave($event)" | ||
| @drop="onNewCategoryDrop($event)" | ||
| > | ||
| <template #actions> | ||
| <!-- | ||
| Rendered inline by NcActions, so it becomes a single icon button | ||
| whose accessible name and tooltip are the action text. | ||
| --> | ||
| <NcActionButton @click="startNewCategory()"> | ||
| <template #icon> | ||
| <FolderPlusIcon :size="20" /> | ||
| </template> | ||
| {{ t('notes', 'New category') }} | ||
| </NcActionButton> | ||
| </template> | ||
| </NcAppNavigationCaption> | ||
| <NcAppNavigationCaption v-else v-show="!loading" :name="t('notes', 'Categories')" /> |
Comment on lines
158
to
162
| props: { | ||
| loading: Boolean, | ||
| /** Hides the "New category" action, e.g. while the note list failed to load */ | ||
| disabled: Boolean, | ||
| }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 adisabledprop 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)