style: Update sidebar and general icons to latest design

package.json

@@ -24,7 +24,7 @@
 		"@nextcloud/initial-state": "^3.0.0",
 		"@nextcloud/moment": "^1.3.5",
 		"@nextcloud/router": "^3.1.0",
-		"@nextcloud/vue": "^8.35.2",
+		"@nextcloud/vue": "^8.39.0",
 		"diff": "^9.0.0",
 		"easymde": "^2.21.0",
 		"markdown-it": "^14.2.0",

playwright/e2e/category-actions.spec.ts

@@ -36,6 +36,14 @@ function navigationRow(page: Page, name: string): Locator {
 		.first()
 }
 
+function navigationLink(page: Page, name: string): Locator {
+	return page.getByRole('link', { name, exact: true })
+}
+
+async function expectNavigationItemActive(page: Page, name: string): Promise<void> {
+	await expect(navigationLink(page, name)).toHaveAttribute('aria-current', 'page')
+}
+
 function uniqueCategoryName(prefix: string, testInfo: TestInfo): string {
 	return `Playwright ${prefix} ${testInfo.parallelIndex}-${Date.now()}`
 }
@@ -63,7 +71,7 @@ async function createCategory(page: Page, name: string): Promise<void> {
 	await input.press('Enter')
 
 	await expect(navigationRow(page, name)).toBeVisible()
-	await expect(navigationRow(page, name)).toHaveClass(/active/)
+	await expectNavigationItemActive(page, name)
 }
 
 async function waitForNewNoteRoute(page: Page, previousNoteId: number | null): Promise<number> {
@@ -104,7 +112,11 @@ async function openCategoryActions(page: Page, category: string): Promise<void>
 	const row = navigationRow(page, category)
 
 	await expect(row).toBeVisible()
-	await row.getByRole('button', { name: 'Actions', exact: true }).click()
+	await row.hover()
+
+	const actionsButton = row.getByRole('button', { name: 'Actions', exact: true })
+	await expect(actionsButton).toBeVisible()
+	await actionsButton.click()
 }
 
 test.describe('Category actions', () => {
@@ -130,7 +142,7 @@ test.describe('Category actions', () => {
 		await renameInput.press('Enter')
 
 		await expect(navigationRow(page, renamedCategory)).toBeVisible()
-		await expect(navigationRow(page, renamedCategory)).toHaveClass(/active/)
+		await expectNavigationItemActive(page, renamedCategory)
 		await expect(navigationRow(page, renamedCategory).locator('.app-navigation-entry__counter-wrapper')).toContainText('1')
 		await expect(navigationRow(page, category)).toHaveCount(0)
 		await expect(page).toHaveURL(new RegExp(`/note/${noteId}(\\?.*)?$`))
@@ -151,7 +163,7 @@ test.describe('Category actions', () => {
 		await page.getByRole('button', { name: 'Delete', exact: true }).click()
 
 		await expect(navigationRow(page, category)).toHaveCount(0)
-		await expect(navigationRow(page, 'All notes')).toHaveClass(/active/)
+		await expectNavigationItemActive(page, 'All notes')
 		await expect(page).not.toHaveURL(deletedNoteUrl)
 	})
 })

src/App.vue

@@ -15,7 +15,9 @@
 					@dragover.native="onNewCategoryDragOver"
 					@drop.native="onNewCategoryDrop"
 				>
-					<FolderPlusIcon slot="icon" :size="20" />
+					<template #icon>
+						<FolderPlusIcon :size="20" />
+					</template>
 				</NcAppNavigationNew>
 				<CategoriesList v-show="!loading.notes" />
 			</template>
@@ -26,7 +28,9 @@
 						:name="t('notes', 'Notes settings')"
 						@click.prevent="openSettings"
 					>
-						<CogIcon slot="icon" :size="20" />
+						<template #icon>
+							<CogIcon :size="20" />
+						</template>
 					</NcAppNavigationItem>
 				</ul>
 				<AppSettings v-if="!loading.notes && error !== true" :open.sync="settingsVisible" @reload="reloadNotes" />
@@ -57,7 +61,7 @@ import '@nextcloud/dialogs/style.css'
 import { emit } from '@nextcloud/event-bus'
 
 import CogIcon from 'vue-material-design-icons/CogOutline.vue'
-import FolderPlusIcon from 'vue-material-design-icons/FolderPlus.vue'
+import FolderPlusIcon from 'vue-material-design-icons/FolderPlusOutline.vue'
 
 import AppSettings from './components/AppSettings.vue'
 import CategoriesList from './components/CategoriesList.vue'

src/components/CategoriesList.vue

@@ -7,9 +7,9 @@
 	<Fragment>
 		<NcAppNavigationItem
 			:name="t('notes', 'All notes')"
+			:active="selectedCategory === null"
 			:draggable="false"
 			:class="{
-				active: selectedCategory === null,
 				'drop-over': dragOverAllNotes,
 				'category-no-actions': true,
 			}"
@@ -36,13 +36,11 @@
 			ref="newCategoryItem"
 			:name="''"
 			:draggable="false"
-			:icon="'icon-files'"
 			:editable="true"
 			:edit-label="t('notes', 'Rename category')"
 			:edit-placeholder="t('notes', 'New category')"
 			:force-menu="true"
 			:force-display-actions="true"
-			menu-icon="icon-more"
 			class="category-draft"
 			@click.prevent.stop
 			@dragstart.native="onCategoryDragStart"
@@ -61,16 +59,14 @@
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:name="categoryTitle(category.name)"
+			:active="category.name === selectedCategory"
 			:draggable="false"
-			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
 			:editable="category.name !== ''"
 			:edit-label="t('notes', 'Rename category')"
 			:edit-placeholder="category.name"
 			:force-menu="category.name !== ''"
 			:force-display-actions="category.name !== ''"
-			menu-icon="icon-more"
 			:class="{
-				active: category.name === selectedCategory,
 				'drop-over': category.name === dragOverCategory,
 				'category-no-actions': category.name === '',
 			}"
@@ -82,8 +78,8 @@
 			@update:name="onRenameCategory(category.name, $event)"
 		>
 			<template #icon>
-				<FolderOutlineIcon v-if="category.name === ''" :size="20" />
-				<FolderIcon v-else :size="20" />
+				<FolderIcon v-if="category.name === selectedCategory" :size="20" />
+				<FolderOutlineIcon v-else :size="20" />
 			</template>
 			<template #counter>
 				<NcCounterBubble>
@@ -92,10 +88,12 @@
 			</template>
 			<template v-if="category.name !== ''" #actions>
 				<NcActionButton
-					icon="icon-delete"
 					:close-after-click="true"
 					@click="onDeleteCategory(category.name)"
 				>
+					<template #icon>
+						<DeleteIcon :size="20" />
+					</template>
 					{{ t('notes', 'Delete category') }}
 				</NcActionButton>
 			</template>
@@ -112,6 +110,7 @@ import { Fragment } from 'vue-frag'
 import { showConfirmation } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
 import HistoryIcon from 'vue-material-design-icons/History.vue'
@@ -124,6 +123,7 @@ export default {
 	name: 'CategoriesList',
 
 	components: {
+		DeleteIcon,
 		Fragment,
 		NcActionButton,
 		NcAppNavigationItem,
@@ -457,10 +457,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.app-navigation-entry-wrapper.active:deep(.app-navigation-entry) {
-	background-color: var(--color-primary-element-light) !important;
-}
-
 .app-navigation-entry-wrapper.drop-over:deep(.app-navigation-entry) {
 	background-color: var(--color-primary-element-light) !important;
 	outline: 2px dashed var(--color-primary-element);

src/components/EditorEasyMDE.vue

@@ -8,9 +8,11 @@
 		<div class="upload-button">
 			<NcActions
 				container=".upload-button"
-				default-icon="icon-picture"
 				menu-align="right"
 			>
+				<template #icon>
+					<ImagePlusOutlineIcon :size="20" />
+				</template>
 				<NcActionButton
 					icon="icon-upload"
 					:close-after-click="true"
@@ -19,10 +21,12 @@
 					{{ t('notes', 'Upload image') }}
 				</NcActionButton>
 				<NcActionButton
-					icon="icon-picture"
 					:close-after-click="true"
 					@click="onClickInsertImage"
 				>
+					<template #icon>
+						<ImageOutlineIcon :size="20" />
+					</template>
 					{{ t('notes', 'Insert image') }}
 				</NcActionButton>
 			</NcActions>
@@ -41,6 +45,8 @@ import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import ImageOutlineIcon from 'vue-material-design-icons/ImageOutline.vue'
+import ImagePlusOutlineIcon from 'vue-material-design-icons/ImagePlusOutline.vue'
 import { basename, relative } from 'path'
 
 import store from '../store.js'
@@ -49,6 +55,8 @@ export default {
 	name: 'EditorEasyMDE',
 
 	components: {
+		ImageOutlineIcon,
+		ImagePlusOutlineIcon,
 		NcActions,
 		NcActionButton,
 	},