enh(TreeFolder): Show bookmarks count in Folders overview

fixes #793

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

src/components/TreeFolder.vue

@@ -20,6 +20,7 @@
 					@click.stop="folder.children.length && (childrenShown = false)" />
 				{{ folder.title }}
 			</h3>
+			<NcCounterBubble v-if="typeof bookmarksCount !== 'undefined'">{{ bookmarksCount | largeNumbers }}</NcCounterBubble>
 		</div>
 		<div v-if="showChildren && childrenShown" class="treefolder__children">
 			<TreeFolder v-for="f in folder.children"
@@ -31,11 +32,17 @@
 </template>
 
 <script>
+import { NcCounterBubble } from '@nextcloud/vue'
 import { FolderIcon, FolderOpenIcon } from './Icons.js'
 import { privateRoutes } from '../router.js'
 export default {
 	name: 'TreeFolder',
-	components: { FolderIcon, FolderOpenIcon },
+	components: { FolderIcon, FolderOpenIcon, NcCounterBubble },
+	filters: {
+		largeNumbers(num) {
+			return num >= 1000 ? (Math.round(num / 100) / 10) + 'K' : num
+		},
+	},
 	props: {
 		folder: {
 			type: Object,
@@ -55,6 +62,9 @@ export default {
 		active() {
 			return this.$route.params.folder === this.folder.id
 		},
+		bookmarksCount(){
+			return this.$store.state.countsByFolder[this.folder.id]
+		},
 	},
 	watch: {
 		'$route'() {
@@ -87,6 +97,7 @@ export default {
 	padding: 0 10px;
 	margin: 0 -10px;
 	cursor: pointer;
+	justify-content: space-between;
 }
 
 .treefolder__title * {