Allow bulk selection actions for folders

as per #978

src/components/Breadcrumbs.vue

@@ -54,13 +54,9 @@
 					{{ viewMode === 'list' ? t('bookmarks', 'Grid view') : t('bookmarks', 'List view') }}
 				</ActionButton>
 			</Actions>
-			<div v-if="selection.length" class="breadcrumbs__bulkediting">
+			<div v-if="hasSelection" class="breadcrumbs__bulkediting">
 				{{
-					n('bookmarks',
-						'Selected %n bookmark',
-						'Selected %n bookmarks',
-						selection.length
-					)
+					selectionDescription
 				}}
 				<Actions>
 					<ActionButton icon="icon-category-files" @click="onBulkMove">
@@ -112,8 +108,31 @@ export default {
 		viewMode() {
 			return this.$store.state.viewMode
 		},
-		selection() {
-			return this.$store.state.selection.bookmarks
+		hasSelection() {
+			return this.$store.state.selection.bookmarks.length || this.$store.state.selection.folders.length
+		},
+		selectionDescription() {
+			if (this.$store.state.selection.bookmarks.length !== 0 && this.$store.state.selection.folders.length !== 0) {
+				return this.t('bookmarks',
+					'Selected {folders} folders and {bookmarks} bookmarks',
+					{ folders: this.$store.state.selection.folders.length, bookmarks: this.$store.state.selection.bookmarks.length }
+				)
+			}
+			if (this.$store.state.selection.bookmarks.length !== 0) {
+				return this.n('bookmarks',
+					'Selected %n bookmark',
+					'Selected %n bookmarks',
+					this.$store.state.selection.bookmarks.length
+				)
+			}
+			if (this.$store.state.selection.folders.length !== 0) {
+				return this.n('bookmarks',
+					'Selected %n folder',
+					'Selected %n folders',
+					this.$store.state.selection.folders.length
+				)
+			}
+			return ''
 		},
 	},
 	created() {},

src/components/Folder.vue

@@ -1,5 +1,10 @@
 <template>
-	<div :class="{folder: true, 'folder--gridview': viewMode === 'grid'}">
+	<div :class="{folder: true, 'folder--gridview': viewMode === 'grid', active: selected,}">
+		<div v-if="isEditable" class="folder__checkbox">
+			<input v-model="selected" class="checkbox" type="checkbox"><label
+				:aria-label="t('bookmarks', 'Select folder')"
+				@click="clickSelect" />
+		</div>
 		<figure :class="{'folder__icon': true, 'shared': !isOwner && !isPublic || isSharedPublicly || isShared }" @click="onSelect" />
 		<template v-if="!renaming">
 			<h3
@@ -102,6 +107,12 @@ export default {
 		isSharedPublicly() {
 			return Boolean(this.publicToken)
 		},
+		selectedFolders() {
+			return this.$store.state.selection.folders
+		},
+		selected() {
+			return this.selectedFolders.map(f => f.id).includes(this.folder.id)
+		},
 	},
 	created() {
 		this.$store.dispatch(actions.LOAD_SHARES_OF_FOLDER, this.folder.id)
@@ -132,6 +143,13 @@ export default {
 			this.$store.dispatch(actions.SAVE_FOLDER, this.folder.id)
 			this.renaming = false
 		},
+		clickSelect() {
+			if (!this.selected) {
+				this.$store.commit(mutations.ADD_SELECTION_FOLDER, this.folder)
+			} else {
+				this.$store.commit(mutations.REMOVE_SELECTION_FOLDER, this.folder)
+			}
+		},
 	},
 }
 </script>
@@ -143,10 +161,27 @@ export default {
 	position: relative;
 }
 
+.folder.active,
 .folder:hover {
 	background: var(--color-background-dark);
 }
 
+.folder--gridview.active {
+	border-color: var(--color-primary-element);
+}
+
+.folder__checkbox {
+	display: inline-block;
+}
+
+.folder--gridview .folder__checkbox {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	background: white;
+	border-radius: var(--border-radius);
+}
+
 .folder__icon {
 	flex-grow: 0;
 	height: 20px;

src/components/ViewPrivate.vue

@@ -76,6 +76,7 @@ export default {
 	methods: {
 		async onRoute() {
 			const route = this.$route
+			this.$store.commit(mutations.RESET_SELECTION)
 			switch (route.name) {
 			case privateRoutes.HOME:
 				this.$store.dispatch(actions.FILTER_BY_FOLDER, '-1')

src/store/actions.js

@@ -165,7 +165,7 @@ export default {
 		{ commit, dispatch, state },
 		{ bookmark, oldFolder, newFolder }
 	) {
-		if (oldFolder === newFolder) {
+		if (Number(oldFolder) === Number(newFolder)) {
 			return
 		}
 		commit(mutations.FETCH_START, { type: 'moveBookmark' })