Fix eslint warnings

Signed-off-by: Julius Härtl <jus@bitgrid.net>

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+	root: true,
 	extends: [
 		'@nextcloud',
 	],

css/deck.css

@@ -0,0 +1,16 @@
+.icon-deck {
+  background-image: url(../img/deck-dark.svg);
+}
+
+.icon-deck-white, .icon-deck.icon-white {
+  background-image: url(../img/deck.svg);
+}
+
+body[data-theme-dark] .icon-deck {
+  background-image: url(../img/deck.svg);
+}
+
+body[data-theme-dark] .icon-deck-white,
+body[data-theme-dark] .icon-deck.icon-white {
+  background-image: url(../img/deck-dark.svg);
+}

css/deck.scss

@@ -1 +0,0 @@
-@include icon-black-white('deck', 'deck', 1);

css/globalstyles.scss

@@ -1,28 +0,0 @@
-/*
- * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- * @author Artem Anufrij <artem.anufrij@live.de>
- * @author Marin Treselj <marin@pixelipo.com>
- * @author Oskar Kurz <oskar.kurz@gmail.com>
- * @author Ryan Fletcher <ryan.fletcher@codepassion.ca>
- *
- * @license GNU AGPL version 3 or any later version
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as
- *  published by the Free Software Foundation, either version 3 of the
- *  License, or (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-@import 'icons';
-@import 'print';

css/icons.scss

@@ -1,41 +0,0 @@
-/**
- * Custom icons
- */
-@include icon-black-white('deck', 'deck', 1);
-@include icon-black-white('archive', 'deck', 1);
-@include icon-black-white('circles', 'deck', 1);
-@include icon-black-white('clone', 'deck', 1);
-@include icon-black-white('filter', 'deck', 1);
-@include icon-black-white('filter_set', 'deck', 1);
-@include icon-black-white('attach', 'deck', 1);
-@include icon-black-white('reply', 'deck', 1);
-@include icon-black-white('notifications-dark', 'deck', 1);
-@include icon-black-white('description', 'deck', 1);
-
-.icon-toggle-compact-collapsed {
-	@include icon-color('toggle-view-expand', 'deck', $color-black);
-}
-
-.icon-toggle-compact-expanded {
-	@include icon-color('toggle-view-collapse', 'deck', $color-black);
-}
-.icon-activity {
-	@include icon-color('activity-dark', 'activity', $color-black);
-}
-.icon-comment--unread {
-	@include icon-color('comment', 'actions', $color-primary, 1, true);
-}
-
-.avatardiv.circles {
-	background: var(--color-primary);
-}
-
-.icon-circles {
-	opacity: 1;
-	background-size: 20px;
-	background-position: center center;
-}
-
-.icon-colorpicker {
-	background-image: url('../img/color_picker.svg');
-}

img/activity-dark.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.0" viewbox="0 0 32 32">
+ <path d="m16 1-10 18h11l-1 12 10-18h-11z"/>
+</svg>

img/activity.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.0" viewBox="0 0 32 32">
+ <path d="m16 1-10 18h11l-1 12 10-18h-11z" fill="#FFF"/>
+</svg>

img/archive-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g transform="translate(0 -1036.362)" fill="#fff"><path d="M1.93 1041.296c-.185 0-.336.138-.336.31v9.842c0 .172.15.313.336.313h12.517c.185 0 .333-.14.333-.313v-9.842c0-.172-.148-.31-.333-.31H1.93zm4.124 1.507h4.223c.39 0 .705.314.705.704v.43c0 .39-.315.705-.705.705H6.054a.703.703 0 0 1-.705-.705v-.43c0-.39.314-.704.705-.704z"/><rect width="15.742" height="2.296" x=".136" y="1037.543" ry="0"/></g></svg>

img/archive.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g transform="translate(0 -1036.362)"><path d="M1.93 1041.296c-.185 0-.336.138-.336.31v9.842c0 .172.15.313.336.313h12.517c.185 0 .333-.14.333-.313v-9.842c0-.172-.148-.31-.333-.31H1.93zm4.124 1.507h4.223c.39 0 .705.314.705.704v.43c0 .39-.315.705-.705.705H6.054a.703.703 0 0 1-.705-.705v-.43c0-.39.314-.704.705-.704z"/><rect width="15.742" height="2.296" x=".136" y="1037.543" ry=".42"/></g></svg>

img/circles-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#000"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>

img/circles.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#000"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" width="512" height="512"><g fill="#fff"><path d="M54.319 37.839C54.762 35.918 55 33.96 55 32c0-9.095-4.631-17.377-12.389-22.153a1 1 0 1 0-1.049 1.703C48.724 15.96 53 23.604 53 32c0 1.726-.2 3.451-.573 5.147A6.992 6.992 0 0 0 51 37c-3.86 0-7 3.141-7 7s3.14 7 7 7 7-3.141 7-7a7.006 7.006 0 0 0-3.681-6.161zM38.171 54.182A23.867 23.867 0 0 1 29 56a24.047 24.047 0 0 1-17.017-7.092A6.974 6.974 0 0 0 14 44c0-3.859-3.14-7-7-7s-7 3.141-7 7 3.14 7 7 7a6.952 6.952 0 0 0 3.381-.875C15.26 55.136 21.994 58 29 58c3.435 0 6.778-.663 9.936-1.971.51-.211.753-.796.542-1.307a1.001 1.001 0 0 0-1.307-.54zM4 31.213a1 1 0 0 0 1.068-.927c.712-10.089 7.586-18.52 17.22-21.314C23.142 11.874 25.825 14 29 14c3.86 0 7-3.141 7-7s-3.14-7-7-7c-3.851 0-6.985 3.127-6.999 6.975C11.42 9.922 3.851 19.12 3.073 30.146A.999.999 0 0 0 4 31.213z"/></g></svg>

img/clone.svg

@@ -1 +0,0 @@
-<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11.8 13.8H2.2V4.2h9.6m1.2 0c0-.67-.53-1.2-1.2-1.2H2.2C1.53 3 1 3.53 1 4.2v9.6c0 .67.53 1.2 1.2 1.2h9.6c.67 0 1.2-.53 1.2-1.2"/><path d="m4.2 1c-0.67 0-1.2 0.54-1.2 1.2h10.8v10.8c0.67 0 1.2-0.53 1.2-1.2v-9.6c0-0.67-0.53-1.2-1.2-1.2z"/></svg>

img/reply.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M15 15s-.4-7.8-7-10V1L1 8l7 7v-4c5.1 0 7 4 7 4z"/></svg>

lib/Cache/AttachmentCacheHelper.php

@@ -0,0 +1,52 @@
+<?php
+
+/*
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+declare(strict_types=1);
+
+
+namespace OCA\Deck\Cache;
+
+use OCP\ICache;
+use OCP\ICacheFactory;
+
+class AttachmentCacheHelper {
+	/** @var ICache */
+	private $cache;
+
+	public function __construct(ICacheFactory $cacheFactory) {
+		$this->cache = $cacheFactory->createDistributed('deck-attachments');
+	}
+
+	public function getAttachmentCount(int $cardId): ?int {
+		return $this->cache->get('count-' . $cardId);
+	}
+
+	public function setAttachmentCount(int $cardId, int $count): void {
+		$this->cache->set('count-' . $cardId, $count);
+	}
+
+	public function clearAttachmentCount(int $cardId): void {
+		$this->cache->remove('count-' . $cardId);
+	}
+}

lib/Service/AttachmentService.php

@@ -34,11 +34,10 @@ use OCA\Deck\Db\ChangeHelper;
 use OCA\Deck\InvalidAttachmentType;
 use OCA\Deck\NoPermissionException;
 use OCA\Deck\NotFoundException;
+use OCA\Deck\Cache\AttachmentCacheHelper;
 use OCA\Deck\StatusException;
 use OCP\AppFramework\Db\IMapperException;
 use OCP\AppFramework\Http\Response;
-use OCP\ICache;
-use OCP\ICacheFactory;
 use OCP\IL10N;
 
 class AttachmentService {
@@ -49,9 +48,10 @@ class AttachmentService {
 
 	/** @var IAttachmentService[] */
 	private $services = [];
+	/** @var Application */
 	private $application;
-	/** @var ICache */
-	private $cache;
+	/** @var AttachmentCacheHelper */
+	private $attachmentCacheHelper;
 	/** @var IL10N */
 	private $l10n;
 	/** @var ActivityManager */
@@ -59,13 +59,13 @@ class AttachmentService {
 	/** @var ChangeHelper */
 	private $changeHelper;
 
-	public function __construct(AttachmentMapper $attachmentMapper, CardMapper $cardMapper, ChangeHelper $changeHelper, PermissionService $permissionService, Application $application, ICacheFactory $cacheFactory, $userId, IL10N $l10n, ActivityManager $activityManager) {
+	public function __construct(AttachmentMapper $attachmentMapper, CardMapper $cardMapper, ChangeHelper $changeHelper, PermissionService $permissionService, Application $application, AttachmentCacheHelper $attachmentCacheHelper, $userId, IL10N $l10n, ActivityManager $activityManager) {
 		$this->attachmentMapper = $attachmentMapper;
 		$this->cardMapper = $cardMapper;
 		$this->permissionService = $permissionService;
 		$this->userId = $userId;
 		$this->application = $application;
-		$this->cache = $cacheFactory->createDistributed('deck-card-attachments-');
+		$this->attachmentCacheHelper = $attachmentCacheHelper;
 		$this->l10n = $l10n;
 		$this->activityManager = $activityManager;
 		$this->changeHelper = $changeHelper;
@@ -139,14 +139,16 @@ class AttachmentService {
 	 * @param $cardId
 	 * @return int|mixed
 	 * @throws BadRequestException
+	 * @throws InvalidAttachmentType
+	 * @throws \OCP\DB\Exception
 	 */
 	public function count($cardId) {
 		if (is_numeric($cardId) === false) {
 			throw new BadRequestException('card id must be a number');
 		}
 
-		$count = $this->cache->get('card-' . $cardId);
-		if (!$count) {
+		$count = $this->attachmentCacheHelper->getAttachmentCount((int)$cardId);
+		if ($count === null) {
 			$count = count($this->attachmentMapper->findAll($cardId));
 
 			foreach (array_keys($this->services) as $attachmentType) {
@@ -156,7 +158,7 @@ class AttachmentService {
 				}
 			}
 
-			$this->cache->set('card-' . $cardId, $count);
+			$this->attachmentCacheHelper->setAttachmentCount((int)$cardId, $count);
 		}
 
 		return $count;
@@ -186,7 +188,7 @@ class AttachmentService {
 
 		$this->permissionService->checkPermission($this->cardMapper, $cardId, Acl::PERMISSION_EDIT);
 
-		$this->cache->clear('card-' . $cardId);
+		$this->attachmentCacheHelper->clearAttachmentCount((int)$cardId);
 		$attachment = new Attachment();
 		$attachment->setCardId($cardId);
 		$attachment->setType($type);
@@ -298,7 +300,7 @@ class AttachmentService {
 		}
 
 		$this->permissionService->checkPermission($this->cardMapper, $attachment->getCardId(), Acl::PERMISSION_EDIT);
-		$this->cache->clear('card-' . $attachment->getCardId());
+		$this->attachmentCacheHelper->clearAttachmentCount($cardId);
 
 		$attachment->setData($data);
 		try {
@@ -356,7 +358,7 @@ class AttachmentService {
 			}
 		}
 
-		$this->cache->clear('card-' . $attachment->getCardId());
+		$this->attachmentCacheHelper->clearAttachmentCount($cardId);
 		$this->changeHelper->cardChanged($attachment->getCardId());
 		$this->activityManager->triggerEvent(ActivityManager::DECK_OBJECT_CARD, $attachment, ActivityManager::SUBJECT_ATTACHMENT_DELETE);
 		return $attachment;
@@ -370,7 +372,7 @@ class AttachmentService {
 		}
 
 		$this->permissionService->checkPermission($this->cardMapper, $attachment->getCardId(), Acl::PERMISSION_EDIT);
-		$this->cache->clear('card-' . $attachment->getCardId());
+		$this->attachmentCacheHelper->clearAttachmentCount($cardId);
 
 		try {
 			$service = $this->getService($attachment->getType());

lib/Sharing/DeckShareProvider.php

@@ -27,6 +27,7 @@ declare(strict_types=1);
 namespace OCA\Deck\Sharing;
 
 use OC\Files\Cache\Cache;
+use OCA\Deck\Cache\AttachmentCacheHelper;
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\Board;
 use OCA\Deck\Db\BoardMapper;
@@ -45,7 +46,6 @@ use OCP\Files\IMimeTypeLoader;
 use OCP\Files\Node;
 use OCP\IDBConnection;
 use OCP\IL10N;
-use OCP\Security\ISecureRandom;
 use OCP\Share\Exceptions\GenericShareException;
 use OCP\Share\Exceptions\ShareNotFound;
 use OCP\Share\IManager;
@@ -69,6 +69,8 @@ class DeckShareProvider implements \OCP\Share\IShareProvider {
 	private $dbConnection;
 	/** @var IManager */
 	private $shareManager;
+	/** @var AttachmentCacheHelper */
+	private $attachmentCacheHelper;
 	/** @var BoardMapper */
 	private $boardMapper;
 	/** @var CardMapper */
@@ -77,14 +79,25 @@ class DeckShareProvider implements \OCP\Share\IShareProvider {
 	private $permissionService;
 	/** @var ITimeFactory */
 	private $timeFactory;
+	/** @var IL10N */
 	private $l;
 
-	public function __construct(IDBConnection $connection, IManager $shareManager, ISecureRandom $secureRandom, BoardMapper $boardMapper, CardMapper $cardMapper, PermissionService $permissionService, IL10N $l) {
+	public function __construct(
+		IDBConnection $connection,
+		IManager $shareManager,
+		BoardMapper $boardMapper,
+		CardMapper $cardMapper,
+		PermissionService $permissionService,
+		AttachmentCacheHelper $attachmentCacheHelper,
+		IL10N $l
+	) {
 		$this->dbConnection = $connection;
 		$this->shareManager = $shareManager;
 		$this->boardMapper = $boardMapper;
 		$this->cardMapper = $cardMapper;
+		$this->attachmentCacheHelper = $attachmentCacheHelper;
 		$this->permissionService = $permissionService;
+
 		$this->l = $l;
 		$this->timeFactory = \OC::$server->get(ITimeFactory::class);
 	}
@@ -152,6 +165,8 @@ class DeckShareProvider implements \OCP\Share\IShareProvider {
 		);
 		$data = $this->getRawShare($shareId);
 
+		$this->attachmentCacheHelper->clearAttachmentCount((int)$cardId);
+
 		return $this->createShareObject($data);
 	}
 
@@ -339,6 +354,8 @@ class DeckShareProvider implements \OCP\Share\IShareProvider {
 		$qb->orWhere($qb->expr()->eq('parent', $qb->createNamedParameter($share->getId())));
 
 		$qb->execute();
+
+		$this->attachmentCacheHelper->clearAttachmentCount((int)$share->getSharedWith());
 	}
 
 	/**

package-lock.json

@@ -38,6 +38,7 @@
 				"vue-click-outside": "^1.1.0",
 				"vue-easymde": "^2.0.0",
 				"vue-infinite-loading": "^2.4.5",
+				"vue-material-design-icons": "^5.0.0",
 				"vue-router": "^3.5.3",
 				"vue-smooth-dnd": "^0.8.1",
 				"vuex": "^3.6.2",

package.json

@@ -57,6 +57,7 @@
 		"vue-click-outside": "^1.1.0",
 		"vue-easymde": "^2.0.0",
 		"vue-infinite-loading": "^2.4.5",
+		"vue-material-design-icons": "^5.0.0",
 		"vue-router": "^3.5.3",
 		"vue-smooth-dnd": "^0.8.1",
 		"vuex": "^3.6.2",

src/App.vue

@@ -42,13 +42,11 @@
 </template>
 
 <script>
-
 import { mapState } from 'vuex'
-import AppNavigation from './components/navigation/AppNavigation'
 import { Modal, Content, AppContent } from '@nextcloud/vue'
-import { BoardApi } from './services/BoardApi'
 import { emit, subscribe } from '@nextcloud/event-bus'
-
+import AppNavigation from './components/navigation/AppNavigation.vue'
+import { BoardApi } from './services/BoardApi.js'
 const boardApi = new BoardApi()
 
 export default {
@@ -157,6 +155,37 @@ export default {
 </style>
 
 <style lang="scss">
+	@import "../css/print";
+
+	.icon-activity {
+		background-image: url(../img/activity-dark.svg);
+
+		body[data-theme-dark] & {
+			background-image: url(../img/activity.svg);
+		}
+	}
+
+	.avatardiv.circles {
+		background: var(--color-primary);
+	}
+
+	.icon-circles {
+		background-image: url(../img/circles-dark.svg);
+		opacity: 1;
+		background-size: 20px;
+		background-position: center center;
+	}
+
+	.icon-circles-white, .icon-circles.icon-white {
+		background-image: url(../img/circles.svg);
+		opacity: 1;
+		background-size: 20px;
+		background-position: center center;
+	}
+
+	.icon-colorpicker {
+		background-image: url('../img/color_picker.svg');
+	}
 
 	.multiselect {
 		width: 100%;

src/CardCreateDialog.vue

@@ -96,7 +96,7 @@ import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import axios from '@nextcloud/axios'
-import { CardApi } from './services/CardApi'
+import { CardApi } from './services/CardApi.js'
 
 const cardApi = new CardApi()
 

src/components/ActivityEntry.vue

@@ -30,7 +30,9 @@
 			</div>
 		</div>
 		<!-- FIXME ins/del tags do no longer work with activity so we should get rid of that -->
+		<!-- eslint-disable vue/no-v-html -->
 		<p v-if="activity.message" class="activity--message" v-html="sanitizedMessage" />
+		<!-- eslint-enable -->
 	</div>
 </template>
 
@@ -39,7 +41,7 @@ import RichText from '@juliushaertl/vue-richtext'
 import { UserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
-import relativeDate from '../mixins/relativeDate'
+import relativeDate from '../mixins/relativeDate.js'
 
 const InternalLink = {
 	name: 'InternalLink',

src/components/ActivityList.vue

@@ -37,7 +37,7 @@
 <script>
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import ActivityEntry from './ActivityEntry'
+import ActivityEntry from './ActivityEntry.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 
 const ACTIVITY_FETCH_LIMIT = 50

src/components/AttachmentDragAndDrop.vue

@@ -63,7 +63,7 @@
 
 <script>
 import { Modal } from '@nextcloud/vue'
-import attachmentUpload from '../mixins/attachmentUpload'
+import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'
 
 let maxUploadSizeState

src/components/Controls.vue

@@ -71,10 +71,11 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<Popover @show="filterVisible=true" @hide="filterVisible=false">
-					<Actions slot="trigger" :title="t('deck', 'Apply filter')">
-						<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
-						<ActionButton v-else icon="icon-filter" />
-					</Actions>
+					<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
+					<button slot="trigger" :title="t('deck', 'Apply filter')" class="filter-button">
+						<FilterIcon v-if="isFilterActive" :size="20" decorative />
+						<FilterOffIcon v-else :size="20" decorative />
+					</button>
 
 					<div v-if="filterVisible" class="filter">
 						<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -173,18 +174,20 @@
 				</Popover>
 
 				<Actions>
-					<ActionButton icon="icon-archive"
-						@click="toggleShowArchived">
+					<ActionButton @click="toggleShowArchived">
+						<template #icon>
+							<ArchiveIcon :size="20" decorative />
+						</template>
 						{{ showArchived ? t('deck', 'Hide archived cards') : t('deck', 'Show archived cards') }}
 					</ActionButton>
 					<ActionButton v-if="compactMode"
-						icon="icon-toggle-compact-collapsed"
 						@click="toggleCompactMode">
+						<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
 					</ActionButton>
 					<ActionButton v-else
-						icon="icon-toggle-compact-expanded"
 						@click="toggleCompactMode">
+						<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
 					</ActionButton>
 				</Actions>
@@ -200,13 +203,27 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { Actions, ActionButton, Popover, Avatar } from '@nextcloud/vue'
-import labelStyle from '../mixins/labelStyle'
-import CardCreateDialog from '../CardCreateDialog'
+import labelStyle from '../mixins/labelStyle.js'
+import CardCreateDialog from '../CardCreateDialog.vue'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
+import FilterIcon from 'vue-material-design-icons/Filter'
+import FilterOffIcon from 'vue-material-design-icons/FilterOff'
+import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical'
+import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical'
 
 export default {
 	name: 'Controls',
 	components: {
-		Actions, ActionButton, Popover, Avatar, CardCreateDialog,
+		Actions,
+		ActionButton,
+		Popover,
+		Avatar,
+		CardCreateDialog,
+		ArchiveIcon,
+		FilterIcon,
+		FilterOffIcon,
+		ArrowCollapseVerticalIcon,
+		ArrowExpandVerticalIcon,
 	},
 	mixins: [labelStyle],
 	props: {
@@ -249,10 +266,7 @@ export default {
 			}
 		},
 		isFilterActive() {
-			if (this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== '') {
-				return true
-			}
-			return false
+			return this.filter.tags.length !== 0 || this.filter.users.length !== 0 || this.filter.due !== ''
 		},
 		labelsSorted() {
 			return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
@@ -442,6 +456,17 @@ export default {
 		margin-top: 0px;
 		margin-bottom: 5px;
 	}
+
+	.filter-button {
+	  padding: 0;
+	  border-radius: 50%;
+	  width: 44px;
+	  height: 44px;
+
+		&:hover, &:focus {
+			background-color: rgba(127,127,127,0.25) !important;
+		}
+	}
 </style>
 <style lang="scss">
 	.tooltip-inner.popover-inner {

src/components/board/Board.vue

@@ -72,12 +72,12 @@
 <script>
 
 import { Container, Draggable } from 'vue-smooth-dnd'
-import { mapState, mapGetters } from 'vuex'
-import Controls from '../Controls'
-import Stack from './Stack'
 import { EmptyContent } from '@nextcloud/vue'
-import GlobalSearchResults from '../search/GlobalSearchResults'
-import { showError } from '../../helpers/errors'
+import { mapState, mapGetters } from 'vuex'
+import Controls from '../Controls.vue'
+import Stack from './Stack.vue'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
+import { showError } from '../../helpers/errors.js'
 
 export default {
 	name: 'Board',

src/components/board/BoardSidebar.vue

@@ -59,10 +59,10 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import SharingTabSidebar from './SharingTabSidebar'
-import TagsTabSidebar from './TagsTabSidebar'
-import DeletedTabSidebar from './DeletedTabSidebar'
-import TimelineTabSidebar from './TimelineTabSidebar'
+import SharingTabSidebar from './SharingTabSidebar.vue'
+import TagsTabSidebar from './TagsTabSidebar.vue'
+import DeletedTabSidebar from './DeletedTabSidebar.vue'
+import TimelineTabSidebar from './TimelineTabSidebar.vue'
 import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 
 const capabilities = window.OC.getCapabilities()

src/components/board/DeletedTabSidebar.vue

@@ -32,7 +32,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import relativeDate from '../../mixins/relativeDate'
+import relativeDate from '../../mixins/relativeDate.js'
 
 export default {
 	name: 'DeletedTabSidebar',

src/components/board/Stack.vue

@@ -43,7 +43,10 @@
 				</form>
 			</transition>
 			<Actions v-if="canManage && !isArchived" :force-menu="true">
-				<ActionButton icon="icon-archive" @click="modalArchivAllCardsShow=true">
+				<ActionButton @click="modalArchivAllCardsShow=true">
+					<template #icon>
+						<ArchiveIcon decorative />
+					</template>
 					{{ t('deck', 'Archive all cards') }}
 				</ActionButton>
 				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
@@ -118,9 +121,10 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
-import CardItem from '../cards/CardItem'
+import CardItem from '../cards/CardItem.vue'
 
 import '@nextcloud/dialogs/styles/toast.scss'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
 
 export default {
 	name: 'Stack',
@@ -131,6 +135,7 @@ export default {
 		Container,
 		Draggable,
 		Modal,
+		ArchiveIcon,
 	},
 
 	props: {

src/components/board/TagsTabSidebar.vue

@@ -70,7 +70,7 @@
 <script>
 
 import { mapGetters } from 'vuex'
-import Color from '../../mixins/color'
+import Color from '../../mixins/color.js'
 import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
 
 export default {

src/components/board/TimelineTabSidebar.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'
 
 export default {
 	name: 'TimelineTabSidebar',

src/components/boards/Boards.vue

@@ -43,8 +43,8 @@
 
 <script>
 
-import BoardItem from './BoardItem'
-import Controls from '../Controls'
+import BoardItem from './BoardItem.vue'
+import Controls from '../Controls.vue'
 
 export default {
 	name: 'Boards',

src/components/card/AttachmentList.vue

@@ -104,15 +104,16 @@
 <script>
 import axios from '@nextcloud/axios'
 import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
-import attachmentUpload from '../../mixins/attachmentUpload'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import relativeDate from '../../mixins/relativeDate.js'
+import attachmentUpload from '../../mixins/attachmentUpload.js'
+
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 const picker = getFilePickerBuilder(t('deck', 'File to share'))
@@ -205,11 +206,14 @@ export default {
 		cardId: {
 			immediate: true,
 			handler() {
-				this.$store.dispatch('fetchAttachments', this.cardId)
+				this.fetchAttachments(this.cardId)
 			},
 		},
 	},
 	methods: {
+		...mapActions([
+			'fetchAttachments',
+		]),
 		handleUploadFile(event) {
 			const files = event.target.files ?? []
 			for (const file of files) {
@@ -233,7 +237,7 @@ export default {
 						shareType: 12,
 						shareWith: '' + this.cardId,
 					}).then(() => {
-						this.$store.dispatch('fetchAttachments', this.cardId)
+						this.fetchAttachments(this.cardId)
 					})
 				})
 		},

src/components/card/CardSidebar.vue

@@ -57,8 +57,10 @@
 
 		<AppSidebarTab id="attachments"
 			:order="1"
-			:name="t('deck', 'Attachments')"
-			icon="icon-attach">
+			:name="t('deck', 'Attachments')">
+			<template #icon>
+				<AttachmentIcon size="20" decorative />
+			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
 		</AppSidebarTab>
 
@@ -82,16 +84,16 @@
 <script>
 import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
-import { mapState, mapGetters } from 'vuex'
-import CardSidebarTabDetails from './CardSidebarTabDetails'
-import CardSidebarTabAttachments from './CardSidebarTabAttachments'
-import CardSidebarTabComments from './CardSidebarTabComments'
-import CardSidebarTabActivity from './CardSidebarTabActivity'
-import relativeDate from '../../mixins/relativeDate'
-import moment from '@nextcloud/moment'
-
 import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
+import moment from '@nextcloud/moment'
+import { mapState, mapGetters } from 'vuex'
+import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
+import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
+import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
+import CardSidebarTabComments from './CardSidebarTabComments.vue'
+import CardSidebarTabActivity from './CardSidebarTabActivity.vue'
+import relativeDate from '../../mixins/relativeDate.js'
 
 const capabilities = window.OC.getCapabilities()
 
@@ -105,6 +107,7 @@ export default {
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
 		CardSidebarTabDetails,
+		AttachmentIcon,
 	},
 	mixins: [relativeDate],
 	props: {

src/components/card/CardSidebarTabActivity.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'
 
 export default {
 	name: 'CardSidebarTabActivity',

src/components/card/CardSidebarTabAttachments.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import AttachmentList from './AttachmentList'
+import AttachmentList from './AttachmentList.vue'
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {

src/components/card/CardSidebarTabComments.vue

@@ -36,8 +36,8 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { Avatar } from '@nextcloud/vue'
-import CommentItem from './CommentItem'
-import CommentForm from './CommentForm'
+import CommentItem from './CommentItem.vue'
+import CommentForm from './CommentForm.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import { getCurrentUser } from '@nextcloud/auth'
 

src/components/card/CardSidebarTabDetails.vue

@@ -128,14 +128,14 @@ import moment from '@nextcloud/moment'
 import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
 
 import { CollectionList } from 'nextcloud-vue-collections'
-import Color from '../../mixins/color'
+import Color from '../../mixins/color.js'
 import {
 	getLocale,
 	getDayNamesMin,
 	getFirstDay,
 	getMonthNamesShort,
 } from '@nextcloud/l10n'
-import Description from './Description'
+import Description from './Description.vue'
 
 export default {
 	name: 'CardSidebarTabDetails',

src/components/card/CommentForm.vue

@@ -65,7 +65,7 @@
 import { mapState } from 'vuex'
 import { UserBubble, Avatar } from '@nextcloud/vue'
 import At from 'vue-at'
-import { rawToParsed } from '../../helpers/mentions'
+import { rawToParsed } from '../../helpers/mentions.js'
 
 export default {
 	name: 'CommentForm',

src/components/card/CommentItem.vue

@@ -25,7 +25,10 @@
 				{{ comment.actorDisplayName }}
 			</span>
 			<Actions v-show="!edit" :force-menu="true">
-				<ActionButton icon="icon-reply" :close-after-click="true" @click="replyTo()">
+				<ActionButton :close-after-click="true" @click="replyTo()">
+					<template #icon>
+						<ReplyIcon decorative />
+					</template>
 					{{ t('deck', 'Reply') }}
 				</ActionButton>
 				<ActionButton v-if="canEdit"
@@ -63,10 +66,11 @@
 <script>
 import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
-import CommentForm from './CommentForm'
+import CommentForm from './CommentForm.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import md5 from 'blueimp-md5'
-import relativeDate from '../../mixins/relativeDate'
+import relativeDate from '../../mixins/relativeDate.js'
+import ReplyIcon from 'vue-material-design-icons/Reply'
 
 const AtMention = {
 	name: 'AtMention',
@@ -90,6 +94,7 @@ export default {
 		ActionButton,
 		CommentForm,
 		RichText,
+		ReplyIcon,
 	},
 	mixins: [relativeDate],
 	props: {

src/components/card/Description.vue

@@ -39,16 +39,21 @@
 				</ActionButton>
 			</Actions>
 			<Actions v-if="canEdit">
-				<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
+				<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
+					<template #icon>
+						<PaperclipIcon :size="24" decorative />
+					</template>
 					{{ t('deck', 'Add Attachment') }}
 				</ActionButton>
 			</Actions>
 		</h5>
 
+		<!-- eslint-disable vue/no-v-html -->
 		<div v-if="!descriptionEditing && hasDescription"
 			id="description-preview"
 			@click="clickedPreview"
 			v-html="renderedDescription" />
+		<!-- eslint-enable -->
 		<p v-else-if="!descriptionEditing" class="placeholder" @click="showEditor()">
 			{{ t('deck', 'Write a description …') }}
 		</p>
@@ -75,11 +80,12 @@
 import MarkdownIt from 'markdown-it'
 import MarkdownItTaskLists from 'markdown-it-task-lists'
 import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
-import AttachmentList from './AttachmentList'
+import AttachmentList from './AttachmentList.vue'
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
+import PaperclipIcon from 'vue-material-design-icons/Paperclip'
 
 const markdownIt = new MarkdownIt({
 	linkify: true,
@@ -101,6 +107,7 @@ export default {
 		ActionButton,
 		Modal,
 		AttachmentList,
+		PaperclipIcon,
 	},
 	props: {
 		card: {

src/components/cards/AvatarList.vue

@@ -31,6 +31,7 @@
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
+					:show-user-status="false"
 					:size="32" />
 				<Avatar v-if="user.type === 1"
 					:user="user.participant.uid"

src/components/cards/CardBadges.vue

@@ -24,19 +24,23 @@
 	<div v-if="card" class="badges">
 		<div v-if="card.commentsCount > 0"
 			v-tooltip="commentsHint"
-			class="icon icon-comment"
-			:class="{ 'icon-comment--unread': card.commentsUnread > 0 }"
+			class="icon-badge"
 			@click.stop="openComments">
-			{{ card.commentsCount }}
+			<CommentUnreadIcon v-if="card.commentsUnread > 0" size="16" />
+			<CommentIcon v-else size="16" />
+			<span>{{ card.commentsCount }}</span>
 		</div>
 
-		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
-			{{ checkListCheckedCount }}/{{ checkListCount }}
+		<div v-if="card.description && checkListCount > 0" class="icon-badge">
+			<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
+			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
-		<div v-else-if="card.description.trim() && checkListCount == 0" class="icon icon-description" />
 
-		<div v-if="card.attachmentCount > 0" class="icon-attach icon icon-attach-dark">
-			{{ card.attachmentCount }}
+		<TextIcon v-else-if="card.description.trim() && checkListCount == 0" size="16" decorative />
+
+		<div v-if="card.attachmentCount > 0" class="icon-badge">
+			<AttachmentIcon size="16" />
+			<span>{{ card.attachmentCount }}</span>
 		</div>
 
 		<AvatarList :users="card.assignedUsers" />
@@ -45,12 +49,17 @@
 	</div>
 </template>
 <script>
-import AvatarList from './AvatarList'
-import CardMenu from './CardMenu'
+import AvatarList from './AvatarList.vue'
+import CardMenu from './CardMenu.vue'
+import TextIcon from 'vue-material-design-icons/Text.vue'
+import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
+import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
+import CommentIcon from 'vue-material-design-icons/Comment.vue'
+import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
 
 export default {
 	name: 'CardBadges',
-	components: { AvatarList, CardMenu },
+	components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
 	props: {
 		card: {
 			type: Object,
@@ -89,18 +98,13 @@ export default {
 		width: 100%;
 		flex-grow: 1;
 
-		.icon {
-			opacity: 0.5;
-			padding: 10px 20px;
-			padding-right: 4px;
-			margin-right: 5px;
-			background-position: left;
-			background-size: 16px;
+		.icon-badge {
+			opacity: .7;
+			display: flex;
+			margin-right: 2px;
+
 			span {
-				margin-left: 18px;
-			}
-			&.icon-comment--unread {
-				opacity: 1;
+				padding: 10px 2px;
 			}
 		}
 	}

src/components/cards/CardItem.vue

@@ -79,12 +79,12 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import { mapState, mapGetters } from 'vuex'
-import CardBadges from './CardBadges'
-import Color from '../../mixins/color'
-import labelStyle from '../../mixins/labelStyle'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import CardMenu from './CardMenu'
-import DueDate from './badges/DueDate'
+import CardBadges from './CardBadges.vue'
+import Color from '../../mixins/color.js'
+import labelStyle from '../../mixins/labelStyle.js'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import CardMenu from './CardMenu.vue'
+import DueDate from './badges/DueDate.vue'
 
 export default {
 	name: 'CardItem',

src/components/cards/CardMenu.vue

@@ -40,9 +40,13 @@
 					{{ t('deck', 'Move card') }}
 				</ActionButton>
 				<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
+					<CardBulletedIcon slot="icon" :size="20" decorative />
 					{{ t('deck', 'Card details') }}
 				</ActionButton>
-				<ActionButton icon="icon-archive" :close-after-click="true" @click="archiveUnarchiveCard()">
+				<ActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
+					<template #icon>
+						<ArchiveIcon :size="20" decorative />
+					</template>
 					{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
 				</ActionButton>
 				<ActionButton v-if="showArchived === false"
@@ -90,10 +94,12 @@ import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showUndo } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
+import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'
 
 export default {
 	name: 'CardMenu',
-	components: { Actions, ActionButton, Modal, Multiselect },
+	components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
 	props: {
 		card: {
 			type: Object,

src/components/navigation/AppNavigation.vue

@@ -36,8 +36,11 @@
 			<AppNavigationBoardCategory id="deck-navigation-archived"
 				to="/board/archived"
 				:text="t('deck', 'Archived boards')"
-				:boards="archivedBoards"
-				icon="icon-archive" />
+				:boards="archivedBoards">
+				<template #icon>
+					<ArchiveIcon :size="20" decorative />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationBoardCategory id="deck-navigation-shared"
 				to="/board/shared"
 				:text="t('deck', 'Shared with you')"
@@ -93,11 +96,12 @@ import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import { AppNavigation as AppNavigationVue, AppNavigationItem, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
-import AppNavigationAddBoard from './AppNavigationAddBoard'
-import AppNavigationBoardCategory from './AppNavigationBoardCategory'
+import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
+import AppNavigationBoardCategory from './AppNavigationBoardCategory.vue'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -110,6 +114,7 @@ export default {
 		AppNavigationBoardCategory,
 		Multiselect,
 		AppNavigationItem,
+		ArchiveIcon,
 	},
 	directives: {
 		ClickOutside,

src/components/navigation/AppNavigationBoard.vue

@@ -47,21 +47,27 @@
 					{{ t('deck', 'Edit board') }}
 				</ActionButton>
 				<ActionButton v-if="canManage && !board.archived"
-					icon="icon-clone"
 					:close-after-click="true"
 					@click="actionClone">
+					<template #icon>
+						<CloneIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Clone board') }}
 				</ActionButton>
 				<ActionButton v-if="canManage && board.archived"
-					icon="icon-archive"
 					:close-after-click="true"
 					@click="actionUnarchive">
+					<template #icon>
+						<ArchiveIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Unarchive board') }}
 				</ActionButton>
 				<ActionButton v-else-if="canManage && !board.archived"
-					icon="icon-archive"
 					:close-after-click="true"
 					@click="actionArchive">
+					<template #icon>
+						<ArchiveIcon :size="20" decorative />
+					</template>
 					{{ t('deck', 'Archive board') }}
 				</ActionButton>
 
@@ -133,6 +139,8 @@
 <script>
 import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
+import ArchiveIcon from 'vue-material-design-icons/Archive'
+import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
 
 export default {
 	name: 'AppNavigationBoard',
@@ -143,6 +151,8 @@ export default {
 		ColorPicker,
 		Actions,
 		ActionButton,
+		ArchiveIcon,
+		CloneIcon,
 	},
 	directives: {
 		ClickOutside,

src/components/navigation/AppNavigationBoardCategory.vue

@@ -28,11 +28,14 @@
 		:allow-collapse="collapsible"
 		:open="opened">
 		<AppNavigationBoard v-for="board in boardsSorted" :key="board.id" :board="board" />
+		<template #icon>
+			<slot name="icon" />
+		</template>
 	</AppNavigationItem>
 </template>
 
 <script>
-import AppNavigationBoard from './AppNavigationBoard'
+import AppNavigationBoard from './AppNavigationBoard.vue'
 import { AppNavigationItem } from '@nextcloud/vue'
 
 export default {

src/components/overview/Overview.vue

@@ -80,11 +80,11 @@
 
 <script>
 
-import Controls from '../Controls'
-import CardItem from '../cards/CardItem'
+import Controls from '../Controls.vue'
+import CardItem from '../cards/CardItem.vue'
 import { mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import GlobalSearchResults from '../search/GlobalSearchResults'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 
 const FILTER_UPCOMING = 'upcoming'
 

src/components/search/GlobalSearchResults.vue

@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import CardItem from '../cards/CardItem'
+import CardItem from '../cards/CardItem.vue'
 import { mapState } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import InfiniteLoading from 'vue-infinite-loading'
 import RichText from '@juliushaertl/vue-richtext'
-import Placeholder from './Placeholder'
+import Placeholder from './Placeholder.vue'
 import { Actions, ActionButton } from '@nextcloud/vue'
 
 const createCancelToken = () => axios.CancelToken.source()

src/init-collections.js

@@ -23,8 +23,8 @@
 import Vue from 'vue'
 
 import './../css/collections.css'
-import FileSharingPicker from './views/FileSharingPicker'
-import { buildSelector } from './helpers/selector'
+import FileSharingPicker from './views/FileSharingPicker.js'
+import { buildSelector } from './helpers/selector.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken);
@@ -44,7 +44,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	window.OCP.Collaboration.registerType('deck', {
 		action: () => {
-			const BoardSelector = () => import('./BoardSelector')
+			const BoardSelector = () => import('./BoardSelector.vue')
 			return buildSelector(BoardSelector)
 		},
 		typeString: t('deck', 'Link to a board'),
@@ -53,7 +53,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	window.OCP.Collaboration.registerType('deck-card', {
 		action: () => {
-			const CardSelector = () => import('./CardSelector')
+			const CardSelector = () => import('./CardSelector.vue')
 			return buildSelector(CardSelector)
 		},
 		typeString: t('deck', 'Link to a card'),

src/init-dashboard.js

@@ -21,9 +21,9 @@
  */
 
 import Vue from 'vue'
-import Vuex from 'vuex'
+import Vuex, { Store } from 'vuex'
 
-import overview from './store/overview'
+import overview from './store/overview.js'
 
 import './css/dashboard.scss'
 
@@ -33,7 +33,7 @@ Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
-const store = new Vuex.Store({
+const store = new Store({
 	modules: {
 		overview,
 	},

src/init-talk.js

@@ -23,9 +23,9 @@
 import Vue from 'vue'
 import { generateUrl } from '@nextcloud/router'
 
-import CardCreateDialog from './CardCreateDialog'
-import { buildSelector } from './helpers/selector'
-import './init-collections'
+import CardCreateDialog from './CardCreateDialog.vue'
+import { buildSelector } from './helpers/selector.js'
+import './init-collections.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken);

src/main.js

@@ -20,9 +20,6 @@
  *
  */
 import Vue from 'vue'
-import App from './App'
-import router from './router'
-import store from './store/main'
 import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath } from '@nextcloud/router'
@@ -30,7 +27,10 @@ import { showError } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
 import { Tooltip } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
-import './models'
+import App from './App.vue'
+import router from './router.js'
+import store from './store/main.js'
+import './models/index.js'
 
 // the server snap.js conflicts with vertical scrolling so we disable it
 document.body.setAttribute('data-snap-ignore', 'true')

src/mixins/labelStyle.js

@@ -20,7 +20,7 @@
  *
  */
 
-import Color from './color'
+import Color from './color.js'
 
 export default {
 	mixins: [Color],

src/router.js

@@ -23,13 +23,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
-import { BOARD_FILTERS } from './store/main'
-import Boards from './components/boards/Boards'
-import Board from './components/board/Board'
-import Sidebar from './components/Sidebar'
-import BoardSidebar from './components/board/BoardSidebar'
-import CardSidebar from './components/card/CardSidebar'
-import Overview from './components/overview/Overview'
+import { BOARD_FILTERS } from './store/main.js'
+import Boards from './components/boards/Boards.vue'
+import Board from './components/board/Board.vue'
+import Sidebar from './components/Sidebar.vue'
+import BoardSidebar from './components/board/BoardSidebar.vue'
+import CardSidebar from './components/card/CardSidebar.vue'
+import Overview from './components/overview/Overview.vue'
 
 Vue.use(Router)
 

src/services/BoardApi.js

@@ -22,7 +22,7 @@
 
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import './../models'
+import './../models/index.js'
 
 /**
  * This class handles all the api communication with the Deck backend.

src/services/StackApi.js

@@ -22,7 +22,7 @@
 
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import './../models'
+import './../models/index.js'
 
 export class StackApi {
 

src/store/attachment.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { AttachmentApi } from './../services/AttachmentApi'
+import { AttachmentApi } from './../services/AttachmentApi.js'
 import Vue from 'vue'
 
 const apiClient = new AttachmentApi()
@@ -84,6 +84,7 @@ export default {
 		async fetchAttachments({ commit }, cardId) {
 			const attachments = await apiClient.fetchAttachments(cardId)
 			commit('createAttachments', { cardId, attachments })
+			commit('cardSetAttachmentCount', { cardId, count: attachments.length })
 		},
 
 		async createAttachment({ commit }, { cardId, formData, onUploadProgress }) {

src/store/card.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { CardApi } from './../services/CardApi'
+import { CardApi } from './../services/CardApi.js'
 import moment from 'moment'
 import Vue from 'vue'
 
@@ -252,6 +252,12 @@ export default {
 				Vue.set(state.cards[existingIndex], 'lastModified', Date.now() / 1000)
 			}
 		},
+		cardSetAttachmentCount(state, { cardId, count }) {
+			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
+			if (existingIndex !== -1) {
+				Vue.set(state.cards[existingIndex], 'attachmentCount', count)
+			}
+		},
 		cardIncreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {

src/store/comment.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { CommentApi } from '../services/CommentApi'
+import { CommentApi } from '../services/CommentApi.js'
 import Vue from 'vue'
 
 const apiClient = new CommentApi()

src/store/main.js

@@ -24,17 +24,17 @@ import 'url-search-params-polyfill'
 
 import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
-import Vuex from 'vuex'
+import Vuex, { Store } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
-import { BoardApi } from '../services/BoardApi'
-import actions from './actions'
-import stack from './stack'
-import card from './card'
-import comment from './comment'
-import trashbin from './trashbin'
-import attachment from './attachment'
-import overview from './overview'
+import { BoardApi } from '../services/BoardApi.js'
+import actions from './actions.js'
+import stack from './stack.js'
+import card from './card.js'
+import comment from './comment.js'
+import trashbin from './trashbin.js'
+import attachment from './attachment.js'
+import overview from './overview.js'
 Vue.use(Vuex)
 
 const apiClient = new BoardApi()
@@ -46,7 +46,7 @@ export const BOARD_FILTERS = {
 	SHARED: 'shared',
 }
 
-export default new Vuex.Store({
+export default new Store({
 	modules: {
 		actions,
 		stack,

src/store/overview.js

@@ -22,7 +22,7 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { OverviewApi } from '../services/OverviewApi'
+import { OverviewApi } from '../services/OverviewApi.js'
 Vue.use(Vuex)
 
 const apiClient = new OverviewApi()

src/store/stack.js

@@ -21,8 +21,8 @@
  */
 
 import Vue from 'vue'
-import { StackApi } from './../services/StackApi'
-import applyOrderToArray from './../helpers/applyOrderToArray'
+import { StackApi } from './../services/StackApi.js'
+import applyOrderToArray from './../helpers/applyOrderToArray.js'
 
 const apiClient = new StackApi()
 

src/store/trashbin.js

@@ -20,8 +20,8 @@
  *
  */
 
-import { StackApi } from '../services/StackApi'
-import { CardApi } from '../services/CardApi'
+import { StackApi } from '../services/StackApi.js'
+import { CardApi } from '../services/CardApi.js'
 
 const stackApi = new StackApi()
 const cardApi = new CardApi()

src/views/Dashboard.vue

@@ -59,10 +59,10 @@
 <script>
 import { DashboardWidget } from '@nextcloud/vue-dashboard'
 import { mapGetters } from 'vuex'
-import labelStyle from './../mixins/labelStyle'
-import DueDate from '../components/cards/badges/DueDate'
+import labelStyle from './../mixins/labelStyle.js'
+import DueDate from '../components/cards/badges/DueDate.vue'
 import { generateUrl } from '@nextcloud/router'
-import CardCreateDialog from '../CardCreateDialog'
+import CardCreateDialog from '../CardCreateDialog.vue'
 
 export default {
 	name: 'Dashboard',

src/views/FileSharingPicker.js

@@ -21,7 +21,7 @@
  */
 
 import Vue from 'vue'
-import { createShare } from '../services/SharingApi'
+import { createShare } from '../services/SharingApi.js'
 
 export default {
 	icon: 'icon-deck',
@@ -33,7 +33,7 @@ export default {
 			container.id = 'deck-board-select'
 			const body = document.getElementById('body-user')
 			body.append(container)
-			const CardSelector = () => import('./../CardSelector')
+			const CardSelector = () => import('./../CardSelector.vue')
 			const ComponentVM = new Vue({
 				render: (h) => h(CardSelector, {
 					title: t('deck', 'Share {file} with a Deck card', { file: decodeURIComponent(self.fileInfo.name) }),

templates/main.php

@@ -22,7 +22,6 @@
  */
 
 
-style('deck', 'globalstyles');
 script('deck', 'deck-main');
 
 \OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts');

tests/unit/Service/AttachmentServiceTest.php

@@ -25,6 +25,7 @@ namespace OCA\Deck\Service;
 
 use OCA\Deck\Activity\ActivityManager;
 use OCA\Deck\AppInfo\Application;
+use OCA\Deck\Cache\AttachmentCacheHelper;
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\Attachment;
 use OCA\Deck\Db\AttachmentMapper;
@@ -35,8 +36,6 @@ use OCA\Deck\NoPermissionException;
 use OCA\Deck\NotFoundException;
 use OCP\AppFramework\Http\Response;
 use OCP\AppFramework\IAppContainer;
-use OCP\ICache;
-use OCP\ICacheFactory;
 use OCP\IL10N;
 use PHPUnit\Framework\MockObject\MockObject;
 use Test\TestCase;
@@ -67,10 +66,11 @@ class AttachmentServiceTest extends TestCase {
 	private $cardMapper;
 	/** @var PermissionService|MockObject */
 	private $permissionService;
+	/** @var string  */
 	private $userId = 'admin';
 	/** @var Application|MockObject */
 	private $application;
-	private $cacheFactory;
+	private $attachmentCacheHelper;
 	/** @var AttachmentService */
 	private $attachmentService;
 	/** @var MockObject */
@@ -78,8 +78,6 @@ class AttachmentServiceTest extends TestCase {
 	/** @var ActivityManager  */
 	private $activityManager;
 	private $appContainer;
-	/** ICache */
-	private $cache;
 	/** @var IL10N */
 	private $l10n;
 	/** @var ChangeHelper */
@@ -104,12 +102,9 @@ class AttachmentServiceTest extends TestCase {
 		$this->cardMapper = $this->createMock(CardMapper::class);
 		$this->permissionService = $this->createMock(PermissionService::class);
 		$this->application = $this->createMock(Application::class);
-		$this->cacheFactory = $this->createMock(ICacheFactory::class);
+		$this->attachmentCacheHelper = $this->createMock(AttachmentCacheHelper::class);
 		$this->activityManager = $this->createMock(ActivityManager::class);
 
-		$this->cache = $this->createMock(ICache::class);
-		$this->cacheFactory->expects($this->any())->method('createDistributed')->willReturn($this->cache);
-
 		$this->appContainer->expects($this->exactly(2))
 			->method('query')
 			->withConsecutive(
@@ -128,7 +123,17 @@ class AttachmentServiceTest extends TestCase {
 		$this->l10n = $this->createMock(IL10N::class);
 		$this->changeHelper = $this->createMock(ChangeHelper::class);
 
-		$this->attachmentService = new AttachmentService($this->attachmentMapper, $this->cardMapper, $this->changeHelper, $this->permissionService, $this->application, $this->cacheFactory, $this->userId, $this->l10n, $this->activityManager);
+		$this->attachmentService = new AttachmentService(
+			$this->attachmentMapper,
+			$this->cardMapper,
+			$this->changeHelper,
+			$this->permissionService,
+			$this->application,
+			$this->attachmentCacheHelper,
+			$this->userId,
+			$this->l10n,
+			$this->activityManager
+		);
 	}
 
 	public function testRegisterAttachmentService() {
@@ -153,7 +158,7 @@ class AttachmentServiceTest extends TestCase {
 		$application->expects($this->any())
 			->method('getContainer')
 			->willReturn($appContainer);
-		$attachmentService = new AttachmentService($this->attachmentMapper, $this->cardMapper, $this->changeHelper, $this->permissionService, $application, $this->cacheFactory, $this->userId, $this->l10n, $this->activityManager);
+		$attachmentService = new AttachmentService($this->attachmentMapper, $this->cardMapper, $this->changeHelper, $this->permissionService, $application, $this->attachmentCacheHelper, $this->userId, $this->l10n, $this->activityManager);
 		$attachmentService->registerAttachmentService('custom', MyAttachmentService::class);
 		$this->assertEquals($fileServiceMock, $attachmentService->getService('deck_file'));
 		$this->assertEquals(MyAttachmentService::class, get_class($attachmentService->getService('custom')));
@@ -183,7 +188,7 @@ class AttachmentServiceTest extends TestCase {
 			->method('getContainer')
 			->willReturn($appContainer);
 
-		$attachmentService = new AttachmentService($this->attachmentMapper, $this->cardMapper, $this->changeHelper, $this->permissionService, $application, $this->cacheFactory, $this->userId, $this->l10n, $this->activityManager);
+		$attachmentService = new AttachmentService($this->attachmentMapper, $this->cardMapper, $this->changeHelper, $this->permissionService, $application, $this->attachmentCacheHelper, $this->userId, $this->l10n, $this->activityManager);
 		$attachmentService->registerAttachmentService('custom', MyAttachmentService::class);
 		$attachmentService->getService('deck_file_invalid');
 	}
@@ -262,14 +267,14 @@ class AttachmentServiceTest extends TestCase {
 	}
 
 	public function testCount() {
-		$this->cache->expects($this->once())->method('get')->with('card-123')->willReturn(null);
+		$this->attachmentCacheHelper->expects($this->once())->method('getAttachmentCount')->with(123)->willReturn(null);
 		$this->attachmentMapper->expects($this->once())->method('findAll')->willReturn([1,2,3,4]);
-		$this->cache->expects($this->once())->method('set')->with('card-123', 4)->willReturn(null);
+		$this->attachmentCacheHelper->expects($this->once())->method('setAttachmentCount')->with(123, 4);
 		$this->assertEquals(4, $this->attachmentService->count(123));
 	}
 
 	public function testCountCacheHit() {
-		$this->cache->expects($this->once())->method('get')->with('card-123')->willReturn(4);
+		$this->attachmentCacheHelper->expects($this->once())->method('getAttachmentCount')->with(123)->willReturn(4);
 		$this->assertEquals(4, $this->attachmentService->count(123));
 	}
 
@@ -277,7 +282,7 @@ class AttachmentServiceTest extends TestCase {
 		$attachment = $this->createAttachment('deck_file', 'file_name.jpg');
 		$expected = $this->createAttachment('deck_file', 'file_name.jpg');
 		$this->mockPermission(Acl::PERMISSION_EDIT);
-		$this->cache->expects($this->once())->method('clear')->with('card-123');
+		$this->attachmentCacheHelper->expects($this->once())->method('clearAttachmentCount')->with(123);
 		$this->attachmentServiceImpl->expects($this->once())
 			->method('create');
 		$this->attachmentMapper->expects($this->once())
@@ -330,7 +335,7 @@ class AttachmentServiceTest extends TestCase {
 		$attachment = $this->createAttachment('deck_file', 'file_name.jpg');
 		$expected = $this->createAttachment('deck_file', 'file_name.jpg');
 		$this->mockPermission(Acl::PERMISSION_EDIT);
-		$this->cache->expects($this->once())->method('clear')->with('card-123');
+		$this->attachmentCacheHelper->expects($this->once())->method('clearAttachmentCount')->with(1);
 		$this->attachmentMapper->expects($this->once())
 			->method('find')
 			->with(1)
@@ -357,7 +362,7 @@ class AttachmentServiceTest extends TestCase {
 		$attachment = $this->createAttachment('deck_file', 'file_name.jpg');
 		$expected = $this->createAttachment('deck_file', 'file_name.jpg');
 		$this->mockPermission(Acl::PERMISSION_EDIT);
-		$this->cache->expects($this->once())->method('clear')->with('card-123');
+		$this->attachmentCacheHelper->expects($this->once())->method('clearAttachmentCount')->with(1);
 		$this->attachmentMapper->expects($this->once())
 			->method('find')
 			->with(1)
@@ -378,7 +383,7 @@ class AttachmentServiceTest extends TestCase {
 		$attachment = $this->createAttachment('deck_file', 'file_name.jpg');
 		$expected = $this->createAttachment('deck_file', 'file_name.jpg');
 		$this->mockPermission(Acl::PERMISSION_EDIT);
-		$this->cache->expects($this->once())->method('clear')->with('card-123');
+		$this->attachmentCacheHelper->expects($this->once())->method('clearAttachmentCount')->with(1);
 		$this->attachmentMapper->expects($this->once())
 			->method('find')
 			->with(1)
@@ -403,7 +408,7 @@ class AttachmentServiceTest extends TestCase {
 		$attachment = $this->createAttachment('deck_file', 'file_name.jpg');
 		$expected = $this->createAttachment('deck_file', 'file_name.jpg');
 		$this->mockPermission(Acl::PERMISSION_EDIT);
-		$this->cache->expects($this->once())->method('clear')->with('card-123');
+		$this->attachmentCacheHelper->expects($this->once())->method('clearAttachmentCount')->with(1);
 		$this->attachmentMapper->expects($this->once())
 			->method('find')
 			->with(1)
@@ -424,7 +429,7 @@ class AttachmentServiceTest extends TestCase {
 		$attachment = $this->createAttachment('deck_file', 'file_name.jpg');
 		$expected = $this->createAttachment('deck_file', 'file_name.jpg');
 		$this->mockPermission(Acl::PERMISSION_EDIT);
-		$this->cache->expects($this->once())->method('clear')->with('card-123');
+		$this->attachmentCacheHelper->expects($this->once())->method('clearAttachmentCount')->with(1);
 		$this->attachmentMapper->expects($this->once())
 			->method('find')
 			->with(1)