From 4d8526e4695540e06b83d338f39963c2fd17acb5 Mon Sep 17 00:00:00 2001
From: Grigorij Aronov <aronovgj@gmx.net>
Date: Wed, 28 Jan 2026 18:46:30 +0100
Subject: [PATCH] feat(ui): Add rename/delete category actions in the sidebar

Signed-off-by: Grigorij Aronov <aronovgj@gmx.net>
---
 src/App.vue                       | 128 ++++++++++---
 src/components/CategoriesList.vue | 292 +++++++++++++++++++++++++++++-
 src/components/NotesView.vue      |  40 ++++
 src/store/notes.js                |  71 +++++++-
 4 files changed, 498 insertions(+), 33 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 31a8eff99..ede5a2592 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,16 +9,16 @@
 		<NcAppNavigation :class="{loading: loading.notes, 'icon-error': error}">
 			<NcAppNavigationNew
 				v-show="!loading.notes && !error"
-				:text="t('notes', 'New note')"
-				@click="onNewNote"
+				:text="t('notes', 'New category')"
+				@click="onNewCategory"
+				@dragover.native="onNewCategoryDragOver"
+				@drop.native="onNewCategoryDrop"
 			>
-				<PlusIcon slot="icon" :size="20" />
+				<FolderPlusIcon slot="icon" :size="20" />
 			</NcAppNavigationNew>
 
 			<template #list>
-				<CategoriesList v-show="!loading.notes"
-					v-if="numNotes"
-				/>
+				<CategoriesList v-show="!loading.notes" />
 			</template>
 
 			<template #footer>
@@ -54,16 +54,17 @@ import NcContent from '@nextcloud/vue/components/NcContent'
 import { loadState } from '@nextcloud/initial-state'
 import { showSuccess, TOAST_UNDO_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
+import { emit } from '@nextcloud/event-bus'
 
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import CogIcon from 'vue-material-design-icons/CogOutline.vue'
+import FolderPlusIcon from 'vue-material-design-icons/FolderPlus.vue'
 
 import AppSettings from './components/AppSettings.vue'
 import CategoriesList from './components/CategoriesList.vue'
 import EditorHint from './components/Modal/EditorHint.vue'
 
 import { config } from './config.js'
-import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService.js'
+import { fetchNotes, noteExists, undoDeleteNote } from './NotesService.js'
 import store from './store.js'
 
 export default {
@@ -79,7 +80,7 @@ export default {
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
-		PlusIcon,
+		FolderPlusIcon,
 	},
 
 	data() {
@@ -89,7 +90,6 @@ export default {
 			},
 			loading: {
 				notes: true,
-				create: false,
 			},
 			error: false,
 			undoNotification: null,
@@ -227,20 +227,89 @@ export default {
 			this.settingsVisible = true
 		},
 
-		onNewNote() {
-			if (this.loading.create) {
+		onNewCategory() {
+			emit('notes:category:new')
+		},
+
+		onNewCategoryDragOver(event) {
+			if (!this.isNoteDrag(event)) {
 				return
 			}
-			this.loading.create = true
-			createNote(store.getters.getSelectedCategory())
-				.then(note => {
-					this.routeToNote(note.id, { new: null })
-				})
-				.catch(() => {
-				})
-				.finally(() => {
-					this.loading.create = false
-				})
+			event.preventDefault()
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = 'move'
+			}
+		},
+
+		onNewCategoryDrop(event) {
+			const noteId = this.getDraggedNoteId(event)
+			if (noteId === null) {
+				return
+			}
+			event.preventDefault()
+			event.stopPropagation()
+			emit('notes:category:new', { noteId })
+		},
+
+		getDraggedNoteId(event) {
+			const dt = event?.dataTransfer
+			if (!dt) {
+				return null
+			}
+
+			const types = Array.from(dt.types ?? [])
+			const hasCustom = types.includes('application/x-nextcloud-notes-note-id')
+			const hasUri = types.includes('text/uri-list')
+			if (!hasCustom && hasUri) {
+				return null
+			}
+
+			let raw = ''
+			if (hasCustom) {
+				try {
+					raw = dt.getData('application/x-nextcloud-notes-note-id')
+				} catch {
+					// Some browsers only allow specific mime types.
+				}
+			}
+			if (!raw) {
+				try {
+					raw = dt.getData('text/plain')
+				} catch {
+					raw = ''
+				}
+			}
+
+			const match = /^\s*(\d+)\s*$/.exec(raw)
+			const parsedId = match ? Number.parseInt(match[1], 10) : Number.NaN
+			if (!Number.isFinite(parsedId)) {
+				return null
+			}
+			const note = store.getters.getNote(parsedId)
+			if (!note || note.readonly) {
+				return null
+			}
+
+			return parsedId
+		},
+
+		isNoteDrag(event) {
+			const dt = event?.dataTransfer
+			if (!dt) {
+				return false
+			}
+			const types = Array.from(dt.types ?? [])
+			if (types.includes('application/x-nextcloud-notes-note-id')) {
+				return true
+			}
+			if (types.includes('text/uri-list')) {
+				return false
+			}
+			try {
+				return /^\s*\d+\s*$/.test(dt.getData('text/plain'))
+			} catch {
+				return false
+			}
 		},
 
 		onNoteDeleted(note) {
@@ -325,4 +394,19 @@ export default {
 	padding-inline-start: 3px;
 	margin: 0 3px;
 }
+
+:deep(.app-navigation__body) {
+	overflow: hidden !important;
+	flex: 0 0 auto;
+}
+
+:deep(.app-navigation__content) {
+	min-height: 0;
+}
+
+:deep(.app-navigation__list) {
+	flex: 1 1 auto;
+	min-height: 0;
+	height: auto !important;
+}
 </style>
diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index 2a92bee9a..9da1be451 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -7,11 +7,14 @@
 	<Fragment>
 		<NcAppNavigationItem
 			:name="t('notes', 'All notes')"
+			:draggable="false"
 			:class="{
 				active: selectedCategory === null,
 				'drop-over': dragOverAllNotes,
+				'category-no-actions': true,
 			}"
 			@click.prevent.stop="onSelectCategory(null)"
+			@dragstart.native="onCategoryDragStart"
 			@dragover.native="onAllNotesDragOver($event)"
 			@dragleave.native="onAllNotesDragLeave($event)"
 			@drop.native="onAllNotesDrop($event)"
@@ -28,18 +31,55 @@
 
 		<NcAppNavigationCaption :name="t('notes', 'Categories')" />
 
+		<NcAppNavigationItem
+			v-if="newCategoryDraft"
+			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"
+			@update:name="onCreateCategory"
+		>
+			<template #icon>
+				<FolderIcon :size="20" />
+			</template>
+			<template #counter>
+				<NcCounterBubble>
+					0
+				</NcCounterBubble>
+			</template>
+		</NcAppNavigationItem>
+
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:name="categoryTitle(category.name)"
+			: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 === '',
 			}"
 			@click.prevent.stop="onSelectCategory(category.name)"
+			@dragstart.native="onCategoryDragStart"
 			@dragover.native="onCategoryDragOver(category.name, $event)"
 			@dragleave.native="onCategoryDragLeave(category.name, $event)"
 			@drop.native="onCategoryDrop(category.name, $event)"
+			@update:name="onRenameCategory(category.name, $event)"
 		>
 			<template #icon>
 				<FolderOutlineIcon v-if="category.name === ''" :size="20" />
@@ -50,21 +90,33 @@
 					{{ category.count }}
 				</NcCounterBubble>
 			</template>
+			<template v-if="category.name !== ''" #actions>
+				<NcActionButton
+					icon="icon-delete"
+					:close-after-click="true"
+					@click="onDeleteCategory(category.name)"
+				>
+					{{ t('notes', 'Delete category') }}
+				</NcActionButton>
+			</template>
 		</NcAppNavigationItem>
 	</Fragment>
 </template>
 
 <script>
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
 import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import { Fragment } from 'vue-frag'
+import { showConfirmation } from '@nextcloud/dialogs'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 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'
 
-import { getCategories, setCategory } from '../NotesService.js'
+import { deleteNote, getCategories, setCategory } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
@@ -73,6 +125,7 @@ export default {
 
 	components: {
 		Fragment,
+		NcActionButton,
 		NcAppNavigationItem,
 		NcAppNavigationCaption,
 		NcCounterBubble,
@@ -85,6 +138,9 @@ export default {
 		return {
 			dragOverCategory: null,
 			dragOverAllNotes: false,
+			newCategoryDraft: false,
+			newCategoryMonitor: null,
+			newCategoryDropNoteId: null,
 		}
 	},
 
@@ -102,28 +158,186 @@ export default {
 		},
 	},
 
+	mounted() {
+		subscribe('notes:category:new', this.startNewCategory)
+	},
+
+	destroyed() {
+		unsubscribe('notes:category:new', this.startNewCategory)
+		this.stopNewCategoryMonitor()
+	},
+
 	methods: {
 		categoryTitle(category) {
 			return categoryLabel(category)
 		},
 
+		startNewCategory(payload = {}) {
+			if (this.newCategoryDraft) {
+				return
+			}
+			this.newCategoryDropNoteId = payload?.noteId ?? null
+			this.newCategoryDraft = true
+			this.$nextTick(() => {
+				this.$refs.newCategoryItem?.handleEdit?.()
+				this.monitorNewCategoryEditing()
+			})
+		},
+
+		stopNewCategoryMonitor() {
+			if (this.newCategoryMonitor) {
+				cancelAnimationFrame(this.newCategoryMonitor)
+				this.newCategoryMonitor = null
+			}
+		},
+
+		monitorNewCategoryEditing() {
+			this.stopNewCategoryMonitor()
+			const check = () => {
+				if (!this.newCategoryDraft) {
+					this.stopNewCategoryMonitor()
+					this.newCategoryDropNoteId = null
+					return
+				}
+				const item = this.$refs.newCategoryItem
+				if (item && item.editingActive === false) {
+					this.newCategoryDraft = false
+					this.stopNewCategoryMonitor()
+					this.newCategoryDropNoteId = null
+					return
+				}
+				this.newCategoryMonitor = requestAnimationFrame(check)
+			}
+			this.newCategoryMonitor = requestAnimationFrame(check)
+		},
+
+		onCreateCategory(newCategory) {
+			const trimmed = newCategory?.trim() ?? ''
+			this.newCategoryDraft = false
+			this.stopNewCategoryMonitor()
+			const droppedNoteId = this.newCategoryDropNoteId
+			this.newCategoryDropNoteId = null
+			if (!trimmed) {
+				return
+			}
+			const exists = this.categories.some(category => category.name === trimmed)
+			if (!exists) {
+				store.commit('addLocalCategory', trimmed)
+			}
+			store.commit('setSelectedCategory', trimmed)
+			if (droppedNoteId !== null) {
+				setCategory(droppedNoteId, trimmed).catch(() => {})
+			}
+		},
+
+		getNotesInCategory(category) {
+			return store.state.notes.notes.filter(note => note.category === category || note.category.startsWith(category + '/'))
+		},
+
+		updateSelectedCategoryForRename(oldCategory, newCategory) {
+			const selected = this.selectedCategory
+			if (selected === oldCategory) {
+				store.commit('setSelectedCategory', newCategory)
+				return
+			}
+			if (selected && selected.startsWith(oldCategory + '/')) {
+				store.commit('setSelectedCategory', newCategory + selected.slice(oldCategory.length))
+			}
+		},
+
+		clearSelectedCategoryForDelete(category) {
+			const selected = this.selectedCategory
+			if (selected === category || (selected && selected.startsWith(category + '/'))) {
+				store.commit('setSelectedCategory', null)
+			}
+		},
+
+		async onRenameCategory(category, newCategory) {
+			const trimmed = newCategory?.trim() ?? ''
+			if (!trimmed || trimmed === category) {
+				return
+			}
+
+			const notes = this.getNotesInCategory(category)
+			for (const note of notes) {
+				const updatedCategory = note.category.startsWith(category + '/')
+					? trimmed + note.category.slice(category.length)
+					: trimmed
+				try {
+					await setCategory(note.id, updatedCategory)
+				} catch {
+					// NotesService already shows a toast on failure.
+				}
+			}
+			store.commit('renameLocalCategory', { oldCategory: category, newCategory: trimmed })
+			this.updateSelectedCategoryForRename(category, trimmed)
+		},
+
+		async onDeleteCategory(categoryName) {
+			const notes = this.getNotesInCategory(categoryName)
+			if (notes.length > 0) {
+				let confirmed = false
+				const message = this.n(
+					'notes',
+					'Delete category "{category}" and its {count} note?',
+					'Delete category "{category}" and its {count} notes?',
+					notes.length,
+					{ category: this.categoryTitle(categoryName), count: notes.length },
+				)
+				try {
+					confirmed = await showConfirmation({
+						name: this.t('notes', 'Delete category'),
+						text: message,
+						labelConfirm: this.t('notes', 'Delete'),
+						labelReject: this.t('notes', 'Cancel'),
+						severity: 'warning',
+					})
+				} catch {
+					confirmed = window.confirm(message)
+				}
+				if (!confirmed) {
+					return
+				}
+			}
+
+			this.closeOpenNoteBeforeDelete(categoryName)
+			for (const note of notes) {
+				await deleteNote(note.id, () => {})
+			}
+			store.commit('removeLocalCategory', categoryName)
+			this.clearSelectedCategoryForDelete(categoryName)
+		},
+
 		getDraggedNoteId(event) {
 			const dt = event?.dataTransfer
 			if (!dt) {
 				return null
 			}
 
+			const types = Array.from(dt.types ?? [])
+			const hasCustom = types.includes('application/x-nextcloud-notes-note-id')
+			const hasUri = types.includes('text/uri-list')
+			if (!hasCustom && hasUri) {
+				return null
+			}
+
 			let raw = ''
-			try {
-				raw = dt.getData('application/x-nextcloud-notes-note-id')
-			} catch {
-				// Some browsers only allow specific mime types.
+			if (hasCustom) {
+				try {
+					raw = dt.getData('application/x-nextcloud-notes-note-id')
+				} catch {
+					// Some browsers only allow specific mime types.
+				}
 			}
 			if (!raw) {
-				raw = dt.getData('text/plain') || dt.getData('text/uri-list') || dt.getData('text/x-moz-url') || ''
+				try {
+					raw = dt.getData('text/plain')
+				} catch {
+					raw = ''
+				}
 			}
 
-			const match = /\/note\/(\d+)(?:[/?#\s]|$)/.exec(raw) || /^\s*(\d+)\s*$/.exec(raw)
+			const match = /^\s*(\d+)\s*$/.exec(raw)
 			const noteId = match ? Number.parseInt(match[1], 10) : Number.NaN
 			if (!Number.isFinite(noteId)) {
 				return null
@@ -137,6 +351,11 @@ export default {
 		},
 
 		onCategoryDragOver(category, event) {
+			if (!this.isNoteDrag(event)) {
+				this.dragOverCategory = null
+				this.dragOverAllNotes = false
+				return
+			}
 			event.preventDefault()
 			if (event.dataTransfer) {
 				event.dataTransfer.dropEffect = 'move'
@@ -146,6 +365,11 @@ export default {
 		},
 
 		onAllNotesDragOver(event) {
+			if (!this.isNoteDrag(event)) {
+				this.dragOverCategory = null
+				this.dragOverAllNotes = false
+				return
+			}
 			event.preventDefault()
 			if (event.dataTransfer) {
 				event.dataTransfer.dropEffect = 'move'
@@ -222,6 +446,56 @@ export default {
 		onSelectCategory(category) {
 			store.commit('setSelectedCategory', category)
 		},
+
+		closeOpenNoteBeforeDelete(categoryName) {
+			const noteId = Number.parseInt(this.$route?.params?.noteId, 10)
+			if (!Number.isFinite(noteId)) {
+				return
+			}
+			const note = store.getters.getNote(noteId)
+			if (!note) {
+				return
+			}
+			if (note.category === categoryName || note.category.startsWith(categoryName + '/')) {
+				const remainingNote = store.state.notes.notes.find(other => (
+					other.id !== noteId
+					&& other.category !== categoryName
+					&& !other.category.startsWith(categoryName + '/')
+				))
+				if (remainingNote) {
+					this.$router.push({
+						name: 'note',
+						params: { noteId: remainingNote.id.toString() },
+					})
+				} else {
+					this.$router.push({ name: 'welcome' })
+				}
+			}
+		},
+
+		onCategoryDragStart(event) {
+			event.preventDefault()
+			event.stopPropagation()
+		},
+
+		isNoteDrag(event) {
+			const dt = event?.dataTransfer
+			if (!dt) {
+				return false
+			}
+			const types = Array.from(dt.types ?? [])
+			if (types.includes('application/x-nextcloud-notes-note-id')) {
+				return true
+			}
+			if (types.includes('text/uri-list')) {
+				return false
+			}
+			try {
+				return /^\s*\d+\s*$/.test(dt.getData('text/plain'))
+			} catch {
+				return false
+			}
+		},
 	},
 }
 </script>
@@ -235,4 +509,8 @@ export default {
 	outline: 2px dashed var(--color-primary-element);
 	outline-offset: -2px;
 }
+
+.app-navigation-entry-wrapper.category-no-actions:deep(.app-navigation-entry__counter-wrapper) {
+	margin-inline-end: calc(var(--default-grid-baseline) * 2 + var(--default-clickable-area));
+}
 </style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 1c14cb9ee..2a190dc20 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -8,6 +8,12 @@
 		<template slot="list">
 			<NcAppContentList class="content-list">
 				<div class="content-list__search">
+					<div class="content-list__actions">
+						<NcButton type="primary" :disabled="creatingNote" @click="onNewNote">
+							<PlusIcon slot="icon" :size="20" />
+							{{ t('notes', 'New note') }}
+						</NcButton>
+					</div>
 					<NcTextField
 						:value.sync="searchText"
 						:label="t('notes', 'Search for notes')"
@@ -70,6 +76,8 @@ import NotesList from './NotesList.vue'
 import NotesCaption from './NotesCaption.vue'
 import store from '../store.js'
 import Note from './Note.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import { createNote } from '../NotesService.js'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
 
@@ -85,6 +93,7 @@ export default {
 		Note,
 		NotesList,
 		NotesCaption,
+		PlusIcon,
 	},
 
 	directives: {
@@ -106,6 +115,7 @@ export default {
 			showFirstNotesOnly: true,
 			showNote: true,
 			searchText: '',
+			creatingNote: false,
 		}
 	},
 
@@ -210,6 +220,26 @@ export default {
 			store.commit('setSelectedCategory', category)
 		},
 
+		onNewNote() {
+			if (this.creatingNote) {
+				return
+			}
+			this.creatingNote = true
+			createNote(store.getters.getSelectedCategory())
+				.then(note => {
+					this.$router.push({
+						name: 'note',
+						params: { noteId: note.id.toString() },
+						query: { new: null },
+					})
+				})
+				.catch(() => {
+				})
+				.finally(() => {
+					this.creatingNote = false
+				})
+		},
+
 		hideNote() {
 			this.showNote = false
 		},
@@ -244,6 +274,16 @@ export default {
 	}
 }
 
+.content-list__actions {
+	display: flex;
+	margin-bottom: 6px;
+}
+
+.content-list__actions :deep(.button-vue) {
+	width: 100%;
+	justify-content: center;
+}
+
 .content-list__search-more {
 	.button {
 		margin: auto;
diff --git a/src/store/notes.js b/src/store/notes.js
index b3b5de320..68cbb6f13 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -8,6 +8,7 @@ import { copyNote } from '../Util.js'
 
 const state = {
 	categories: [],
+	localCategories: [],
 	notes: [],
 	notesIds: {},
 	selectedCategory: null,
@@ -43,22 +44,40 @@ const getters = {
 			return i
 		}
 
-		// get categories from notes
-		const categories = {}
-		for (const note of state.notes) {
-			let cat = note.category
+		function normalizeCategory(category) {
+			let cat = category
 			if (maxLevel > 0) {
 				const index = nthIndexOf(cat, '/', maxLevel)
 				if (index > 0) {
 					cat = cat.substring(0, index)
 				}
 			}
+			return cat
+		}
+
+		// get categories from notes
+		const categories = {}
+		for (const note of state.notes) {
+			let cat = normalizeCategory(note.category)
 			if (categories[cat] === undefined) {
 				categories[cat] = 1
 			} else {
 				categories[cat] += 1
 			}
 		}
+		const extraCategories = new Set([...state.categories, ...state.localCategories])
+		for (const category of extraCategories) {
+			if (!category) {
+				continue
+			}
+			const cat = normalizeCategory(category)
+			if (!cat) {
+				continue
+			}
+			if (categories[cat] === undefined) {
+				categories[cat] = 0
+			}
+		}
 		// get structured result from categories
 		const result = []
 		for (const category in categories) {
@@ -182,6 +201,50 @@ const mutations = {
 
 	setCategories(state, categories) {
 		state.categories = categories
+		categories.forEach(category => {
+			if (category && !state.localCategories.includes(category)) {
+				state.localCategories.push(category)
+			}
+		})
+	},
+
+	addLocalCategory(state, category) {
+		if (!category || state.localCategories.includes(category) || state.categories.includes(category)) {
+			return
+		}
+		state.localCategories.push(category)
+	},
+
+	renameLocalCategory(state, { oldCategory, newCategory }) {
+		if (!oldCategory || !newCategory || oldCategory === newCategory) {
+			return
+		}
+		state.localCategories = state.localCategories.map(category => {
+			if (category === oldCategory) {
+				return newCategory
+			}
+			if (category.startsWith(oldCategory + '/')) {
+				return newCategory + category.slice(oldCategory.length)
+			}
+			return category
+		})
+		state.categories = state.categories.map(category => {
+			if (category === oldCategory) {
+				return newCategory
+			}
+			if (category.startsWith(oldCategory + '/')) {
+				return newCategory + category.slice(oldCategory.length)
+			}
+			return category
+		})
+	},
+
+	removeLocalCategory(state, category) {
+		if (!category) {
+			return
+		}
+		state.localCategories = state.localCategories.filter(cat => cat !== category && !cat.startsWith(category + '/'))
+		state.categories = state.categories.filter(cat => cat !== category && !cat.startsWith(category + '/'))
 	},
 
 	setSelectedCategory(state, category) {