Merge branch 'master' into fix-archived-stack-button

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
2022-10-27 12:19:53 +02:00
parent 48d28dc317 ca91e7a2ed
commit b47c7aca34
220 changed files with 5829 additions and 3492 deletions
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -36,10 +36,10 @@

 <script>
 import RichText from '@juliushaertl/vue-richtext'
-import { UserBubble } from '@nextcloud/vue'
+import { NcUserBubble } 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',
@@ -93,7 +93,7 @@ export default {
 					break
 				case 'user':
 					parameters[key] = {
-						component: UserBubble,
+						component: NcUserBubble,
 						props: {
 							user: parameters[key].id,
 							displayName: parameters[key].name,
--- a/src/components/ActivityList.vue
+++ b/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
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -41,7 +41,7 @@
 			</div>
 		</transition>

-		<Modal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'File already exists')" @close="modalShow=false">
 			<div class="modal__content">
 				<h2>{{ t('deck', 'File already exists') }}</h2>
 				<p>
@@ -57,13 +57,13 @@
 					{{ t('deck', 'Keep existing file') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>

 <script>
-import { Modal } from '@nextcloud/vue'
-import attachmentUpload from '../mixins/attachmentUpload'
+import { NcModal } from '@nextcloud/vue'
+import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'

 let maxUploadSizeState
@@ -75,7 +75,7 @@ try {

 export default {
 	name: 'AttachmentDragAndDrop',
-	components: { Modal },
+	components: { NcModal },
 	mixins: [attachmentUpload],
 	props: {
 		cardId: {
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -25,11 +25,11 @@
 		<div v-if="overviewName" class="board-title">
 			<div class="board-bullet icon-calendar-dark" />
 			<h2>{{ overviewName }}</h2>
-			<Actions>
-				<ActionButton icon="icon-add" @click="clickShowAddCardModel">
+			<NcActions>
+				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 			<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
 		</div>
 		<div v-else-if="board" class="board-title">
@@ -49,11 +49,11 @@
 			<div v-if="board && canManage && !showArchived && !board.archived"
 				id="stack-add"
 				v-click-outside="hideAddStack">
-				<Actions v-if="!isAddStackVisible">
-					<ActionButton icon="icon-add" @click.stop="showAddStack">
+				<NcActions v-if="!isAddStackVisible">
+					<NcActionButton icon="icon-add" @click.stop="showAddStack">
 						{{ t('deck', 'Add list') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 				<form v-else @submit.prevent="addNewStack()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add list') }}</label>
 					<input id="new-stack-input-main"
@@ -71,13 +71,13 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<Popover container=".board-action-buttons__filter"
+					<NcPopover container=".board-action-buttons__filter"
 						:placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
-						<!-- We cannot use Actions here are the popover trigger does not update on reactive icons -->
-						<Button slot="trigger"
+						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
+						<NcButton slot="trigger"
 							:title="t('deck', 'Apply filter')"
 							class="filter-button"
 							type="tertiary-no-background">
@@ -85,7 +85,7 @@
 								<FilterIcon v-if="isFilterActive" :size="20" decorative />
 								<FilterOffIcon v-else :size="20" decorative />
 							</template>
-						</Button>
+						</NcButton>

 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -117,7 +117,7 @@
 									class="checkbox"
 									:value="user.uid"
 									@change="setFilter">
-								<label :for="user.uid"><Avatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
+								<label :for="user.uid"><NcAvatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
 							</div>

 							<h3>{{ t('deck', 'Filter by due date') }}</h3>
@@ -177,35 +177,38 @@
 								<label for="noDue">{{ t('deck', 'No due date') }}</label>
 							</div>

-							<Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
+							<NcButton :disabled="!isFilterActive" :wide="true" @click="clearFilter">
 								{{ t('deck', 'Clear filter') }}
-							</Button>
+							</NcButton>
 						</div>
-					</Popover>
+					</NcPopover>
 				</div>

-				<Actions>
-					<ActionButton @click="toggleShowArchived">
+				<NcActions>
+					<NcActionButton @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"
+					</NcActionButton>
+					<NcActionButton v-if="compactMode"
 						@click="toggleCompactMode">
 						<ArrowExpandVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
-					</ActionButton>
-					<ActionButton v-else
+					</NcActionButton>
+					<NcActionButton v-else
 						@click="toggleCompactMode">
 						<ArrowCollapseVerticalIcon slot="icon" :size="20" decorative />
 						{{ t('deck', 'Toggle compact mode') }}
-					</ActionButton>
-				</Actions>
-				<!-- FIXME: ActionRouter currently doesn't work as an inline action -->
-				<Actions :title="t('deck', 'Details')">
-					<ActionButton icon="icon-menu-sidebar" @click="toggleDetailsView" />
-				</Actions>
+					</NcActionButton>
+				</NcActions>
+				<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
+				<NcActions>
+					<NcActionButton icon="icon-menu-sidebar"
+						:aria-label="t('deck', 'Open details')"
+						:title="t('deck', 'Details')"
+						@click="toggleDetailsView" />
+				</NcActions>
 			</div>
 		</div>
 	</div>
@@ -213,23 +216,23 @@

 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
-import labelStyle from '../mixins/labelStyle'
-import CardCreateDialog from '../CardCreateDialog'
-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'
+import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
+import labelStyle from '../mixins/labelStyle.js'
+import CardCreateDialog from '../CardCreateDialog.vue'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
+import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
+import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'

 export default {
 	name: 'Controls',
 	components: {
-		Actions,
-		ActionButton,
-		Button,
-		Popover,
-		Avatar,
+		NcActions,
+		NcActionButton,
+		NcButton,
+		NcPopover,
+		NcAvatar,
 		CardCreateDialog,
 		ArchiveIcon,
 		FilterIcon,
@@ -377,7 +380,7 @@ export default {
 <style lang="scss" scoped>
 	.controls {
 		display: flex;
-		padding: 3px;
+		margin: 5px;
 		height: 44px;
 		padding-left: 44px;

@@ -428,9 +431,12 @@ export default {
 	}

 	.deck-search {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		input[type=search] {
 			background-position: 5px;
-			padding-left: 24px;
+			padding-left: 24px !important;
 		}
 	}

@@ -465,10 +471,10 @@ export default {
 	}

 	.filter-button {
-	  padding: 0;
-	  border-radius: 50%;
-	  width: 44px;
-	  height: 44px;
+		padding: 0;
+		border-radius: 50%;
+		width: 44px;
+		height: 44px;

 		&:hover, &:focus {
 			background-color: rgba(127,127,127,0.25) !important;
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -45,6 +45,7 @@ export default {
 	#app-sidebar .icon-close {
 		z-index: 100;
 	}
+
 	.app-deck .app-sidebar {
 		z-index: 1500 !important;
 	}
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -30,7 +30,7 @@
 				<h2>{{ t('deck', 'Loading board') }}</h2>
 				<p />
 			</div>
-			<EmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
+			<NcEmptyContent v-else-if="isEmpty" key="empty" icon="icon-deck">
 				{{ t('deck', 'No lists available') }}
 				<template v-if="canManage" #desc>
 					{{ t('deck', 'Create a new list to add cards to this board') }}
@@ -48,7 +48,7 @@
 							value="">
 					</form>
 				</template>
-			</EmptyContent>
+			</NcEmptyContent>
 			<div v-else-if="!isEmpty && !loading" key="board" class="board">
 				<Container lock-axix="y"
 					orientation="horizontal"
@@ -73,11 +73,11 @@

 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 Controls from '../Controls.vue'
+import Stack from './Stack.vue'
+import { NcEmptyContent } from '@nextcloud/vue'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
+import { showError } from '../../helpers/errors.js'

 export default {
 	name: 'Board',
@@ -87,7 +87,7 @@ export default {
 		Container,
 		Draggable,
 		Stack,
-		EmptyContent,
+		NcEmptyContent,
 	},
 	inject: [
 		'boardApi',
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -21,57 +21,57 @@
  -->

 <template>
-	<AppSidebar v-if="board != null"
+	<NcAppSidebar v-if="board != null"
 		:actions="[]"
 		:title="board.title"
 		@close="closeSidebar">
-		<AppSidebarTab id="sharing"
+		<NcAppSidebarTab id="sharing"
 			:order="0"
 			:name="t('deck', 'Sharing')"
 			icon="icon-shared">
 			<SharingTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>

-		<AppSidebarTab id="tags"
+		<NcAppSidebarTab id="tags"
 			:order="1"
 			:name="t('deck', 'Tags')"
 			icon="icon-tag">
 			<TagsTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>

-		<AppSidebarTab v-if="canEdit"
+		<NcAppSidebarTab v-if="canEdit"
 			id="deleted"
 			:order="2"
 			:name="t('deck', 'Deleted items')"
 			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>

-		<AppSidebarTab v-if="hasActivity"
+		<NcAppSidebarTab v-if="hasActivity"
 			id="activity"
 			:order="3"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>

 <script>
 import { mapState, mapGetters } from 'vuex'
-import SharingTabSidebar from './SharingTabSidebar'
-import TagsTabSidebar from './TagsTabSidebar'
-import DeletedTabSidebar from './DeletedTabSidebar'
-import TimelineTabSidebar from './TimelineTabSidebar'
-import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import SharingTabSidebar from './SharingTabSidebar.vue'
+import TagsTabSidebar from './TagsTabSidebar.vue'
+import DeletedTabSidebar from './DeletedTabSidebar.vue'
+import TimelineTabSidebar from './TimelineTabSidebar.vue'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'

 const capabilities = window.OC.getCapabilities()

 export default {
 	name: 'BoardSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		SharingTabSidebar,
 		TagsTabSidebar,
 		DeletedTabSidebar,
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/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',
@@ -86,8 +86,6 @@ export default {

 		li {
 			display: flex;
-			height: 44px;
-
 			&:hover, &:active, &.focus {
 				button {
 					opacity: 1;
@@ -106,7 +104,10 @@ export default {
 		.title {
 			flex-grow: 2;
 			padding: 3px 0px;
-
+			> span:not(.timestamp) {
+				line-height: 1.2em;
+				margin-bottom: 5px;
+			}
 			.timestamp {
 				font-size: 0.9em;
 				color: var(--color-text-lighter);
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Multiselect v-if="canShare"
+		<NcMultiselect v-if="canShare"
 			v-model="addAcl"
 			:placeholder="t('deck', 'Share board with a user, group or circle …')"
 			:options="formatedSharees"
@@ -18,12 +18,12 @@
 			<template #noResult>
 				{{ isSearching ? t('deck', 'Searching for users, groups and circles …') : t('deck', 'No participants found') }}
 			</template>
-		</Multiselect>
+		</NcMultiselect>

 		<ul id="shareWithList"
 			class="shareWithList">
 			<li>
-				<Avatar :user="board.owner.uid" />
+				<NcAvatar :user="board.owner.uid" />
 				<span class="has-tooltip username">
 					{{ board.owner.displayname }}
 					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
@@ -32,7 +32,7 @@
 				</span>
 			</li>
 			<li v-for="acl in board.acl" :key="acl.id">
-				<Avatar v-if="acl.type===0" :user="acl.participant.uid" />
+				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
 				<span class="has-tooltip username">
@@ -41,10 +41,10 @@
 					<span v-if="acl.type===7">{{ t('deck', '(Circle)') }}</span>
 				</span>

-				<ActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
+				<NcActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
 					{{ t('deck', 'Can edit') }}
-				</ActionCheckbox>
-				<Actions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
+				</NcActionCheckbox>
+				<NcActions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
 					<ActionCheckbox v-if="canManage || canShare" :checked="acl.permissionShare" @change="clickShareAcl(acl)">
 						{{ t('deck', 'Can share') }}
 					</ActionCheckbox>
@@ -54,14 +54,18 @@
 					<ActionCheckbox v-if="acl.type === 0 && isCurrentUser(board.owner.uid)" :checked="acl.owner" @change="clickTransferOwner(acl.participant.uid)">
 						{{ t('deck', 'Owner') }}
 					</ActionCheckbox>
-					<ActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
+					<NcActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
 						{{ t('deck', 'Delete') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</li>
 		</ul>

-		<CollectionList v-if="board.id"
+		<NcRelatedResourcesPanel v-if="board.id"
+			provider-id="deck"
+			:item-id="board.id" />
+
+		<CollectionList v-if="projectsEnabled && board.id"
 			:id="`${board.id}`"
 			:name="board.title"
 			type="deck" />
@@ -69,22 +73,24 @@
 </template>

 <script>
-import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
+import { NcAvatar, NcMultiselect, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel } from '@nextcloud/vue'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
 import debounce from 'lodash/debounce'

 export default {
 	name: 'SharingTabSidebar',
 	components: {
-		Avatar,
-		Actions,
-		ActionButton,
-		ActionCheckbox,
-		Multiselect,
+		NcAvatar,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
+		NcMultiselect,
 		CollectionList,
+		NcRelatedResourcesPanel,
 	},
 	props: {
 		board: {
@@ -99,6 +105,7 @@ export default {
 			addAcl: null,
 			addAclForAPI: null,
 			newOwner: null,
+			projectsEnabled: loadState('core', 'projects_enabled', false),
 		}
 	},
 	computed: {
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -67,16 +67,16 @@
 				</ActionButton>
 				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
 					{{ t('deck', 'Delete list') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="canEdit && !showArchived && !isArchived">
-				<ActionButton icon="icon-add" @click.stop="showAddCard=true">
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="canEdit && !showArchived && !isArchived">
+				<NcActionButton icon="icon-add" @click.stop="showAddCard=true">
 					{{ t('deck', 'Add card') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>

-		<Modal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
+		<NcModal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
 			<div class="modal__content">
 				<h3 v-if="!showArchived">
 					{{ t('deck', 'Archive all cards in this list') }}
@@ -96,7 +96,7 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>

 		<transition name="slide-top" appear>
 			<div v-if="showAddCard" class="stack__card-add">
@@ -146,22 +146,22 @@
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'

-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcModal } 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'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'

 export default {
 	name: 'Stack',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		CardItem,
 		Container,
 		Draggable,
-		Modal,
+		NcModal,
 		ArchiveIcon,
 	},

--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -5,59 +5,59 @@
 				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
 					<form class="label-form" @submit.prevent="updateLabel(label)">
-						<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
+						<NcColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
 							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
-						</ColorPicker>
+						</NcColorPicker>
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 							:disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
-						<Actions>
-							<ActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+						<NcActions>
+							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 								:disabled="!editLabelObjValidated"
 								icon="icon-close"
 								@click="editingLabelId = null">
 								{{ t('deck', 'Cancel') }}
-							</ActionButton>
-						</Actions>
+							</NcActionButton>
+						</NcActions>
 					</form>
 				</template>
 				<template v-else>
 					<div class="label-title" @click="clickEdit(label)">
 						<span :style="{ backgroundColor: `#${label.color}`, color: textColor(label.color) }">{{ label.title }}</span>
 					</div>
-					<Actions v-if="canManage && !isArchived">
-						<ActionButton icon="icon-rename" @click="clickEdit(label)">
+					<NcActions v-if="canManage && !isArchived">
+						<NcActionButton icon="icon-rename" @click="clickEdit(label)">
 							{{ t('deck', 'Edit') }}
-						</ActionButton>
-					</Actions>
-					<Actions v-if="canManage && !isArchived">
-						<ActionButton icon="icon-delete" @click="deleteLabel(label.id)">
+						</NcActionButton>
+					</NcActions>
+					<NcActions v-if="canManage && !isArchived">
+						<NcActionButton icon="icon-delete" @click="deleteLabel(label.id)">
 							{{ t('deck', 'Delete') }}
-						</ActionButton>
-					</Actions>
+						</NcActionButton>
+					</NcActions>
 				</template>
 			</li>

 			<li v-if="addLabel" class="editing">
 				<!-- New Tag -->
 				<form class="label-form" @submit.prevent="clickAddLabel">
-					<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
+					<NcColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
 						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
-					</ColorPicker>
+					</NcColorPicker>
 					<input v-model="addLabelObj.title" type="text">
 					<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
 						:disabled="!addLabelObjValidated"
 						type="submit"
 						value=""
 						class="icon-confirm">
-					<Actions>
-						<ActionButton icon="icon-close" @click="addLabel=false">
+					<NcActions>
+						<NcActionButton icon="icon-close" @click="addLabel=false">
 							{{ t('deck', 'Cancel') }}
-						</ActionButton>
-					</Actions>
+						</NcActionButton>
+					</NcActions>
 				</form>
 			</li>
 			<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
@@ -70,15 +70,15 @@
 <script>

 import { mapGetters } from 'vuex'
-import Color from '../../mixins/color'
-import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import Color from '../../mixins/color.js'
+import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'

 export default {
 	name: 'TagsTabSidebar',
 	components: {
-		ColorPicker,
-		Actions,
-		ActionButton,
+		NcColorPicker,
+		NcActions,
+		NcActionButton,
 	},
 	mixins: [Color],
 	data() {
--- a/src/components/board/TimelineTabSidebar.vue
+++ b/src/components/board/TimelineTabSidebar.vue
@@ -7,7 +7,7 @@
 </template>

 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'

 export default {
 	name: 'TimelineTabSidebar',
--- a/src/components/boards/BoardItem.vue
+++ b/src/components/boards/BoardItem.vue
@@ -33,8 +33,8 @@
 			{{ board.title }}
 		</div>
 		<div class="board-list-avatars-cell" title="">
-			<Avatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
-			<Avatar v-for="user in limitedAcl"
+			<NcAvatar :user="board.owner.uid" :display-name="board.owner.displayname" class="board-list-avatar" />
+			<NcAvatar v-for="user in limitedAcl"
 				:key="user.id"
 				:user="user.participant.uid"
 				:display-name="user.participant.displayname"
@@ -46,12 +46,12 @@
 </template>

 <script>
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'

 export default {
 	name: 'BoardItem',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		board: {
--- a/src/components/boards/Boards.vue
+++ b/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',
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -63,39 +63,39 @@
 						<div v-if="attachment.deletedAt === 0">
 							<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
 							<span class="filedate">{{ relativeDate(attachment.createdAt*1000) }}</span>
-							<span class="filedate">{{ attachment.createdBy }}</span>
+							<span class="filedate">{{ attachment.extendedData.attachmentCreator.displayName }}</span>
 						</div>
 						<div v-else>
 							<span class="attachment--info">{{ t('deck', 'Pending share') }}</span>
 						</div>
 					</a>
 				</div>
-				<Actions v-if="selectable">
-					<ActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
+				<NcActions v-if="selectable">
+					<NcActionButton icon="icon-confirm" @click="$emit('select-attachment', attachment)">
 						{{ t('deck', 'Add this attachment') }}
-					</ActionButton>
-				</Actions>
-				<Actions v-if="removable && !isReadOnly" :force-menu="true">
-					<ActionLink v-if="attachment.extendedData.fileid" icon="icon-folder" :href="internalLink(attachment)">
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="removable && !isReadOnly" :force-menu="true">
+					<NcActionLink v-if="attachment.extendedData.fileid" icon="icon-folder" :href="internalLink(attachment)">
 						{{ t('deck', 'Show in Files') }}
-					</ActionLink>
-					<ActionLink v-if="attachment.extendedData.fileid"
+					</NcActionLink>
+					<NcActionLink v-if="attachment.extendedData.fileid"
 						icon="icon-download"
 						:href="downloadLink(attachment)"
 						download>
 						{{ t('deck', 'Download') }}
-					</ActionLink>
-					<ActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
+					</NcActionLink>
+					<NcActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
 						{{ t('deck', 'Remove attachment') }}
-					</ActionButton>
+					</NcActionButton>

-					<ActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
+					<NcActionButton v-if="!attachment.extendedData.fileid && attachment.deletedAt === 0" icon="icon-delete" @click="$emit('delete-attachment', attachment)">
 						{{ t('deck', 'Delete Attachment') }}
-					</ActionButton>
-					<ActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
+					</NcActionButton>
+					<NcActionButton v-else-if="!attachment.extendedData.fileid" icon="icon-history" @click="$emit('restore-attachment', attachment)">
 						{{ t('deck', 'Restore Attachment') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</li>
 		</ul>
 	</AttachmentDragAndDrop>
@@ -103,15 +103,15 @@

 <script>
 import axios from '@nextcloud/axios'
-import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import relativeDate from '../../mixins/relativeDate'
+import { NcActions, NcActionButton, NcActionLink } from '@nextcloud/vue'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import relativeDate from '../../mixins/relativeDate.js'
 import { formatFileSize } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
 import { mapState, mapActions } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
-import attachmentUpload from '../../mixins/attachmentUpload'
+import attachmentUpload from '../../mixins/attachmentUpload.js'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')

@@ -125,9 +125,9 @@ const picker = getFilePickerBuilder(t('deck', 'File to share'))
 export default {
 	name: 'AttachmentList',
 	components: {
-		Actions,
-		ActionButton,
-		ActionLink,
+		NcActions,
+		NcActionButton,
+		NcActionLink,
 		AttachmentDragAndDrop,
 	},
 	mixins: [relativeDate, attachmentUpload],
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -21,7 +21,7 @@
  -->

 <template>
-	<AppSidebar v-if="currentBoard && currentCard"
+	<NcAppSidebar v-if="currentBoard && currentCard"
 		:active="tabId"
 		:title="title"
 		:subtitle="subtitle"
@@ -32,64 +32,64 @@
 		@submit-title="handleSubmitTitle"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<ActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
+			<NcActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
 				{{ t('deck', 'Open in sidebar view') }}
-			</ActionButton>
-			<ActionButton v-else icon="icon-external" @click.stop="showModal()">
+			</NcActionButton>
+			<NcActionButton v-else icon="icon-external" @click.stop="showModal()">
 				{{ t('deck', 'Open in bigger view') }}
-			</ActionButton>
+			</NcActionButton>

-			<ActionButton v-for="action in cardActions"
+			<NcActionButton v-for="action in cardActions"
 				:key="action.label"
 				:close-after-click="true"
 				:icon="action.icon"
 				@click="action.callback(cardRichObject)">
 				{{ action.label }}
-			</ActionButton>
+			</NcActionButton>
 		</template>

-		<AppSidebarTab id="details"
+		<NcAppSidebarTab id="details"
 			:order="0"
 			:name="t('deck', 'Details')"
 			icon="icon-home">
 			<CardSidebarTabDetails :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>

-		<AppSidebarTab id="attachments"
+		<NcAppSidebarTab id="attachments"
 			:order="1"
 			:name="t('deck', 'Attachments')">
 			<template #icon>
-				<AttachmentIcon size="20" decorative />
+				<AttachmentIcon :size="20" decorative />
 			</template>
 			<CardSidebarTabAttachments :card="currentCard" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>

-		<AppSidebarTab id="comments"
+		<NcAppSidebarTab id="comments"
 			:order="2"
 			:name="t('deck', 'Comments')"
 			icon="icon-comment">
 			<CardSidebarTabComments :card="currentCard" :tab-query="tabQuery" />
-		</AppSidebarTab>
+		</NcAppSidebarTab>

-		<AppSidebarTab v-if="hasActivity"
+		<NcAppSidebarTab v-if="hasActivity"
 			id="timeline"
 			:order="3"
 			:name="t('deck', 'Timeline')"
 			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>

 <script>
-import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcActionButton, NcAppSidebar, NcAppSidebarTab } 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 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'
 import moment from '@nextcloud/moment'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'

@@ -101,9 +101,9 @@ const capabilities = window.OC.getCapabilities()
 export default {
 	name: 'CardSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
-		ActionButton,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		NcActionButton,
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
--- a/src/components/card/CardSidebarTabActivity.vue
+++ b/src/components/card/CardSidebarTabActivity.vue
@@ -30,7 +30,7 @@
 </template>

 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'

 export default {
 	name: 'CardSidebarTabActivity',
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/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: {
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="comment--header">
-			<Avatar :user="currentUser.uid" />
+			<NcAvatar :user="currentUser.uid" />
 			<span class="has-tooltip username">
 				{{ currentUser.displayName }}
 			</span>
@@ -35,16 +35,16 @@

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

 export default {
 	name: 'CardSidebarTabComments',
 	components: {
-		Avatar,
+		NcAvatar,
 		CommentItem,
 		CommentForm,
 		InfiniteLoading,
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -27,7 +27,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
 			</div>
 			<div class="section-details">
-				<Multiselect v-model="assignedLabels"
+				<NcMultiselect v-model="assignedLabels"
 					:multiple="true"
 					:disabled="!canEdit"
 					:options="labelsSorted"
@@ -47,7 +47,7 @@
 							{{ scope.option.title }}
 						</div>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 			</div>
 		</div>

@@ -56,7 +56,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Assign to users/groups/circles') }}</span>
 			</div>
 			<div class="section-details">
-				<Multiselect v-if="canEdit"
+				<NcMultiselect v-if="canEdit"
 					v-model="assignedUsers"
 					:multiple="true"
 					:options="formatedAssignables"
@@ -69,16 +69,16 @@
 					@remove="removeUserFromCard">
 					<template #tag="scope">
 						<div class="avatarlist--inline">
-							<Avatar :user="scope.option.uid"
+							<NcAvatar :user="scope.option.uid"
 								:display-name="scope.option.displayname"
 								:size="24"
 								:is-no-user="scope.option.isNoUser"
 								:disable-menu="true" />
 						</div>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 				<div v-else class="avatar-list--readonly">
-					<Avatar v-for="option in assignedUsers"
+					<NcAvatar v-for="option in assignedUsers"
 						:key="option.primaryKey"
 						:user="option.uid"
 						:display-name="option.displayname"
@@ -93,7 +93,7 @@
 				<span class="hidden-visually">{{ t('deck', 'Due date') }}</span>
 			</div>
 			<div class="section-details">
-				<DatetimePicker v-model="duedate"
+				<NcDatetimePicker v-model="duedate"
 					:placeholder="t('deck', 'Set a due date')"
 					type="datetime"
 					:minute-step="5"
@@ -103,15 +103,15 @@
 					:disabled="saving || !canEdit"
 					:shortcuts="shortcuts"
 					confirm />
-				<Actions v-if="canEdit">
-					<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+				<NcActions v-if="canEdit">
+					<NcActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 						{{ t('deck', 'Remove due date') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</div>

-		<div class="section-wrapper">
+		<div v-if="projectsEnabled" class="section-wrapper">
 			<CollectionList v-if="card.id"
 				:id="`${card.id}`"
 				:name="card.title"
@@ -125,27 +125,28 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
+import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker } from '@nextcloud/vue'
+import { loadState } from '@nextcloud/initial-state'

 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',
 	components: {
 		Description,
-		Multiselect,
-		DatetimePicker,
-		Actions,
-		ActionButton,
-		Avatar,
+		NcMultiselect,
+		NcDatetimePicker,
+		NcActions,
+		NcActionButton,
+		NcAvatar,
 		CollectionList,
 	},
 	mixins: [Color],
@@ -163,6 +164,7 @@ export default {
 			copiedCard: null,
 			assignedLabels: null,
 			locale: getLocale(),
+			projectsEnabled: loadState('core', 'projects_enabled', false),
 			lang: {
 				days: getDayNamesMin(),
 				months: getMonthNamesShort(),
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -29,12 +29,12 @@
 				name-key="displayname"
 				:tab-select="true">
 				<template #item="s">
-					<Avatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
+					<NcAvatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
 					<span class="atwho-li--name" v-text="s.item.displayname" />
 				</template>
 				<template #embeddedItem="scope">
 					<span>
-						<UserBubble v-if="scope.current.uid"
+						<NcUserBubble v-if="scope.current.uid"
 							:data-mention-id="scope.current.uid"
 							:user="scope.current.uid"
 							:display-name="scope.current.displayname" />
@@ -63,16 +63,16 @@

 <script>
 import { mapState } from 'vuex'
-import { UserBubble, Avatar } from '@nextcloud/vue'
+import { NcUserBubble, NcAvatar } from '@nextcloud/vue'
 import At from 'vue-at'
-import { rawToParsed } from '../../helpers/mentions'
+import { rawToParsed } from '../../helpers/mentions.js'

 export default {
 	name: 'CommentForm',
 	components: {
 		At,
-		Avatar,
-		UserBubble,
+		NcAvatar,
+		NcUserBubble,
 	},
 	props: {
 		value: {
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -4,13 +4,13 @@
 			<div class="reply--header">
 				<div class="reply--hint">
 					{{ t('deck', 'In reply to') }}
-					<UserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
+					<NcUserBubble :user="comment.actorId" :display-name="comment.actorDisplayName" />
 				</div>
-				<Actions v-if="preview" class="reply--cancel">
-					<ActionButton icon="icon-close" @click="$emit('cancel')">
+				<NcActions v-if="preview" class="reply--cancel">
+					<NcActionButton icon="icon-close" @click="$emit('cancel')">
 						{{ t('deck', 'Cancel reply') }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 			<RichText class="comment--content"
 				:text="richText(comment)"
@@ -20,33 +20,33 @@
 	</div>
 	<li v-else class="comment">
 		<div class="comment--header">
-			<Avatar :user="comment.actorId" />
+			<NcAvatar :user="comment.actorId" />
 			<span class="has-tooltip username">
 				{{ comment.actorDisplayName }}
 			</span>
-			<Actions v-show="!edit" :force-menu="true">
-				<ActionButton :close-after-click="true" @click="replyTo()">
+			<NcActions v-show="!edit" :force-menu="true">
+				<NcActionButton :close-after-click="true" @click="replyTo()">
 					<template #icon>
 						<ReplyIcon decorative />
 					</template>
 					{{ t('deck', 'Reply') }}
-				</ActionButton>
-				<ActionButton v-if="canEdit"
+				</NcActionButton>
+				<NcActionButton v-if="canEdit"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="showUpdateForm()">
 					{{ t('deck', 'Update') }}
-				</ActionButton>
-				<ActionButton v-if="canEdit"
+				</NcActionButton>
+				<NcActionButton v-if="canEdit"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="deleteComment()">
 					{{ t('deck', 'Delete') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="edit">
-				<ActionButton icon="icon-close" @click="hideUpdateForm" />
-			</Actions>
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="edit">
+				<NcActionButton icon="icon-close" @click="hideUpdateForm" />
+			</NcActions>
 			<div class="spacer" />
 			<div class="timestamp">
 				{{ relativeDate(comment.creationDateTime) }}
@@ -64,12 +64,12 @@
 </template>

 <script>
-import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
+import { NcAvatar, NcActions, NcActionButton, NcUserBubble } 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 = {
@@ -80,7 +80,7 @@ const AtMention = {
 		return createElement(
 			'span',
 			{ attrs: { 'data-at-embedded': true, contenteditable: false } },
-			[createElement(UserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
+			[createElement(NcUserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
 		)
 	},
 }
@@ -88,10 +88,10 @@ const AtMention = {
 export default {
 	name: 'CommentItem',
 	components: {
-		Avatar,
-		UserBubble,
-		Actions,
-		ActionButton,
+		NcAvatar,
+		NcUserBubble,
+		NcActions,
+		NcActionButton,
 		CommentForm,
 		RichText,
 		ReplyIcon,
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -30,22 +30,22 @@
 				href="https://deck.readthedocs.io/en/latest/Markdown/"
 				target="_blank"
 				class="icon icon-info" />
-			<Actions v-if="canEdit">
-				<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
+			<NcActions v-if="canEdit">
+				<NcActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
 					{{ t('deck', 'Edit description') }}
-				</ActionButton>
-				<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
+				</NcActionButton>
+				<NcActionButton v-else icon="icon-toggle" @click="hideEditor()">
 					{{ t('deck', 'View description') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="canEdit">
-				<ActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="canEdit">
+				<NcActionButton v-if="descriptionEditing" @click="showAttachmentModal()">
 					<template #icon>
 						<PaperclipIcon :size="24" decorative />
 					</template>
 					{{ t('deck', 'Add Attachment') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</h5>

 		<div v-if="!descriptionEditing && hasDescription"
@@ -60,17 +60,18 @@
 			ref="markdownEditor"
 			v-model="description"
 			:configs="mdeConfig"
+			@initialized="addKeyListeners"
 			@update:modelValue="updateDescription"
 			@blur="saveDescription" />

-		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Choose attachment') }}</h3>
 				<AttachmentList :card-id="card.id"
 					:selectable="true"
 					@select-attachment="addAttachment" />
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>

@@ -78,8 +79,8 @@
 import MarkdownIt from 'markdown-it'
 import MarkdownItTaskCheckbox from 'markdown-it-task-checkbox'
 import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
-import AttachmentList from './AttachmentList'
-import { Actions, ActionButton, Modal } from '@nextcloud/vue'
+import AttachmentList from './AttachmentList.vue'
+import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
@@ -101,9 +102,9 @@ export default {
 	name: 'Description',
 	components: {
 		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
-		Actions,
-		ActionButton,
-		Modal,
+		NcActions,
+		NcActionButton,
+		NcModal,
 		AttachmentList,
 		PaperclipIcon,
 	},
@@ -115,6 +116,7 @@ export default {
 	},
 	data() {
 		return {
+			keyExitState: 0,
 			description: '',
 			markdownIt: null,
 			descriptionEditing: false,
@@ -174,14 +176,37 @@ export default {
 		},
 	},
 	methods: {
+		addKeyListeners() {
+			this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => {
+
+				if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) {
+					this.keyExitState = 1
+				}
+				if (this.keyExitState === 1 && b.key === 'Enter') {
+					this.keyExitState = 0
+					this.$refs.markdownEditor.easymde.codemirror.off('keydown', undefined)
+					this.$refs.markdownEditor.easymde.codemirror.off('keyup', undefined)
+					this.hideEditor()
+				}
+			})
+			this.$refs.markdownEditor.easymde.codemirror.on('keyup', (a, b) => {
+				if (b.key === 'Meta' || b.key === 'Control') {
+					this.keyExitState = 0
+				}
+
+			})
+		},
 		showEditor() {
 			if (!this.canEdit) {
 				return
 			}
 			this.descriptionEditing = true
 			this.description = this.card.description
+
 		},
 		hideEditor() {
+			this.$refs.markdownEditor.easymde.codemirror.off('keydown', undefined)
+			this.$refs.markdownEditor.easymde.codemirror.off('keyup', undefined)
 			this.descriptionEditing = false
 		},
 		showAttachmentModal() {
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -27,20 +27,20 @@
 				<div class="avatardiv icon-more" />
 			</div>
 			<div v-for="user in firstUsers" :key="user.id">
-				<Avatar v-if="user.type === 0"
+				<NcAvatar v-if="user.type === 0"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
 					:show-user-status="false"
 					:size="32" />
-				<Avatar v-if="user.type === 1"
+				<NcAvatar v-if="user.type === 1"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Group)')"
 					:is-no-user="true"
 					:disable-="true"
 					:size="32" />
-				<Avatar v-if="user.type === 7"
+				<NcAvatar v-if="user.type === 7"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:tooltip-message="user.participant.displayname + ' ' + t('deck', '(Circle)')"
@@ -51,13 +51,13 @@
 		</div>

 		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<PopoverMenu :menu="popover" />
+			<NcPopoverMenu :menu="popover" />
 			<slot />
 		</div>

 		<div class="avatar-print-list">
 			<div v-for="user in avatarUsers" :key="user.id" class="avatar-print-list-item">
-				<Avatar class="avatar-print-list-avatar"
+				<NcAvatar class="avatar-print-list-avatar"
 					:user="user.participant.uid"
 					:display-name="user.participant.displayname"
 					:disable-menu="true"
@@ -70,14 +70,14 @@
 </template>

 <script>
-import { Avatar, PopoverMenu, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'

 export default {
 	name: 'AvatarList',
 	components: {
-		Avatar,
-		PopoverMenu,
+		NcAvatar,
+		NcPopoverMenu,
 	},
 	directives: {
 		tooltip: Tooltip,
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -26,8 +26,8 @@
 			v-tooltip="commentsHint"
 			class="icon-badge"
 			@click.stop="openComments">
-			<CommentUnreadIcon v-if="card.commentsUnread > 0" size="16" />
-			<CommentIcon v-else size="16" />
+			<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
+			<CommentIcon v-else :size="16" />
 			<span>{{ card.commentsCount }}</span>
 		</div>

@@ -36,21 +36,21 @@
 			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>

-		<TextIcon v-else-if="card.description.trim() && checkListCount == 0" size="16" decorative />
+		<TextIcon v-else-if="card.description && card.description.trim() && checkListCount == 0" :size="16" decorative />

 		<div v-if="card.attachmentCount > 0" class="icon-badge">
-			<AttachmentIcon size="16" />
+			<AttachmentIcon :size="16" />
 			<span>{{ card.attachmentCount }}</span>
 		</div>

-		<AvatarList :users="card.assignedUsers" />
+		<NcAvatarList :users="card.assignedUsers" />

 		<CardMenu class="card-menu" :card="card" />
 	</div>
 </template>
 <script>
-import AvatarList from './AvatarList'
-import CardMenu from './CardMenu'
+import NcAvatarList 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'
@@ -59,7 +59,7 @@ import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'

 export default {
 	name: 'CardBadges',
-	components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
+	components: { NcAvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
 	props: {
 		card: {
 			type: Object,
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -55,6 +55,7 @@
 					<input v-model="copiedCard.title"
 						v-focus
 						type="text"
+						autocomplete="off"
 						required
 						pattern=".*\S+.*">
 					<input type="submit" value="" class="icon-confirm">
@@ -83,12 +84,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',
--- a/src/components/cards/CardMenu.vue
+++ b/src/components/cards/CardMenu.vue
@@ -23,50 +23,50 @@
 <template>
 	<div v-if="card">
 		<div @click.stop.prevent>
-			<Actions>
-				<ActionButton v-if="showArchived === false && !isCurrentUserAssigned"
+			<NcActions>
+				<NcActionButton v-if="showArchived === false && !isCurrentUserAssigned"
 					icon="icon-user"
 					:close-after-click="true"
 					@click="assignCardToMe()">
 					{{ t('deck', 'Assign to me') }}
-				</ActionButton>
-				<ActionButton v-if="showArchived === false && isCurrentUserAssigned"
+				</NcActionButton>
+				<NcActionButton v-if="showArchived === false && isCurrentUserAssigned"
 					icon="icon-user"
 					:close-after-click="true"
 					@click="unassignCardFromMe()">
 					{{ t('deck', 'Unassign myself') }}
-				</ActionButton>
-				<ActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
+				</NcActionButton>
+				<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
 					{{ t('deck', 'Move card') }}
-				</ActionButton>
-				<ActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
+				</NcActionButton>
+				<NcActionButton icon="icon-settings-dark" :close-after-click="true" @click="openCard">
 					<CardBulletedIcon slot="icon" :size="20" decorative />
 					{{ t('deck', 'Card details') }}
-				</ActionButton>
-				<ActionButton :close-after-click="true" @click="archiveUnarchiveCard()">
+				</NcActionButton>
+				<NcActionButton :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"
+				</NcActionButton>
+				<NcActionButton v-if="showArchived === false"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="deleteCard()">
 					{{ t('deck', 'Delete card') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
-		<Modal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
+		<NcModal v-if="modalShow" :title="t('deck', 'Move card to another board')" @close="modalShow=false">
 			<div class="modal__content">
 				<h3>{{ t('deck', 'Move card to another board') }}</h3>
-				<Multiselect v-model="selectedBoard"
+				<NcMultiselect v-model="selectedBoard"
 					:placeholder="t('deck', 'Select a board')"
 					:options="activeBoards"
 					:max-height="100"
 					label="title"
 					@select="loadStacksFromBoard" />
-				<Multiselect v-model="selectedStack"
+				<NcMultiselect v-model="selectedStack"
 					:placeholder="t('deck', 'Select a list')"
 					:options="stacksFromBoard"
 					:max-height="100"
@@ -74,7 +74,7 @@
 					<span slot="noOptions">
 						{{ t('deck', 'List is empty') }}
 					</span>
-				</Multiselect>
+				</NcMultiselect>

 				<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
 					{{ t('deck', 'Move card') }}
@@ -83,11 +83,11 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 <script>
-import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
+import { NcModal, NcActions, NcActionButton, NcMultiselect } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
@@ -99,7 +99,7 @@ import CardBulletedIcon from 'vue-material-design-icons/CardBulleted'

 export default {
 	name: 'CardMenu',
-	components: { Actions, ActionButton, Modal, Multiselect, ArchiveIcon, CardBulletedIcon },
+	components: { NcActions, NcActionButton, NcModal, NcMultiselect, ArchiveIcon, CardBulletedIcon },
 	props: {
 		card: {
 			type: Object,
--- a/src/components/icons/DeckIcon.vue
+++ b/src/components/icons/DeckIcon.vue
@@ -0,0 +1,56 @@
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon deck-icon"
+		role="img"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg xmlns="http://www.w3.org/2000/svg"
+			:fill="fillColor"
+			:height="size"
+			:width="size"
+			version="1.1"
+			viewBox="0 0 16 16">
+			<rect ry="1"
+				height="8"
+				width="14"
+				y="7"
+				x="1" />
+			<rect ry=".5"
+				height="1"
+				width="12"
+				y="5"
+				x="2" />
+			<rect ry=".5"
+				height="1"
+				width="10"
+				y="3"
+				x="3" />
+			<rect ry=".5"
+				height="1"
+				width="8"
+				y="1"
+				x="4" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'DeckIcon',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+}
+</script>
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -21,18 +21,25 @@
  -->

 <template>
-	<AppNavigationVue :class="{'icon-loading': loading}">
+	<NcAppNavigation :class="{'icon-loading': loading}">
 		<template #list>
-			<AppNavigationItem :title="t('deck', 'Upcoming cards')"
-				icon="icon-calendar-dark"
+			<NcAppNavigationItem :title="t('deck', 'Upcoming cards')"
 				:exact="true"
-				to="/" />
+				to="/">
+				<template #icon>
+					<CalendarIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<AppNavigationBoardCategory id="deck-navigation-all"
 				to="/board"
 				:text="t('deck', 'All boards')"
 				:boards="noneArchivedBoards"
 				:open-on-add-boards="true"
-				icon="icon-deck" />
+				icon="icon-deck">
+				<template #icon>
+					<DeckIcon :size="16" />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationBoardCategory id="deck-navigation-archived"
 				to="/board/archived"
 				:text="t('deck', 'Archived boards')"
@@ -45,11 +52,15 @@
 				to="/board/shared"
 				:text="t('deck', 'Shared with you')"
 				:boards="sharedBoards"
-				icon="icon-shared" />
+				icon="icon-shared">
+				<template #icon>
+					<ShareVariantIcon :size="20" decorative />
+				</template>
+			</AppNavigationBoardCategory>
 			<AppNavigationAddBoard v-if="canCreate" />
 		</template>
 		<template #footer>
-			<AppNavigationSettings :title="t('deck', 'Deck settings')">
+			<NcAppNavigationSettings :title="t('deck', 'Deck settings')">
 				<div>
 					<div>
 						<input id="toggle-modal"
@@ -71,7 +82,7 @@
 						</label>
 					</div>

-					<Multiselect v-if="isAdmin"
+					<NcMultiselect v-if="isAdmin"
 						v-model="groupLimit"
 						:class="{'icon-loading-small': groupLimitDisabled}"
 						open-direction="bottom"
@@ -86,35 +97,41 @@
 						{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}
 					</p>
 				</div>
-			</AppNavigationSettings>
+			</NcAppNavigationSettings>
 		</template>
-	</AppNavigationVue>
+	</NcAppNavigation>
 </template>

 <script>
 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 { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect } from '@nextcloud/vue'
+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'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
+import DeckIcon from './../icons/DeckIcon.vue'
+import ShareVariantIcon from 'vue-material-design-icons/Share.vue'

 const canCreateState = loadState('deck', 'canCreate')

 export default {
 	name: 'AppNavigation',
 	components: {
-		AppNavigationVue,
-		AppNavigationSettings,
+		NcAppNavigation,
+		NcAppNavigationSettings,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
-		Multiselect,
-		AppNavigationItem,
+		NcMultiselect,
+		NcAppNavigationItem,
 		ArchiveIcon,
+		CalendarIcon,
+		DeckIcon,
+		ShareVariantIcon,
 	},
 	directives: {
 		ClickOutside,
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -20,24 +20,24 @@
  -
  -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="t('deck', 'Add board')"
 		icon="icon-add"
 		@click.prevent.stop="startCreateBoard" />
 	<div v-else class="board-create">
-		<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+		<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
 			<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-		</ColorPicker>
+		</NcColorPicker>
 		<form @submit.prevent.stop="createBoard">
 			<input :placeholder="t('deck', 'Board name')" type="text" required>
 			<input type="submit" value="" class="icon-confirm">
-			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
+			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
 		</form>
 	</div>
 </template>

 <script>
-import { ColorPicker, ActionButton, Actions, AppNavigationItem } from '@nextcloud/vue'
+import { NcColorPicker, NcActionButton, NcActions, NcAppNavigationItem } from '@nextcloud/vue'

 /**
 *
@@ -52,7 +52,7 @@ function randomColor() {

 export default {
 	name: 'AppNavigationAddBoard',
-	components: { ColorPicker, AppNavigationItem, ActionButton, Actions },
+	components: { NcColorPicker, NcAppNavigationItem, NcActionButton, NcActions },
 	directives: {},
 	props: {},
 	data() {
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -20,124 +20,125 @@
  -
  -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="!deleted ? board.title : undoText"
 		:loading="loading"
 		:to="routeTo"
 		:undo="deleted"
+		:menu-placement="'auto'"
 		@undo="unDelete">
-		<AppNavigationIconBullet slot="icon" :color="board.color" />
+		<NcAppNavigationIconBullet slot="icon" :color="board.color" />

-		<AppNavigationCounter v-if="board.acl.length"
+		<NcAppNavigationCounter v-if="board.acl.length"
 			slot="counter"
 			class="icon-shared"
 			style="opacity: 0.5" />

 		<template v-if="!deleted" slot="actions">
 			<template v-if="!isDueSubmenuActive">
-				<ActionButton icon="icon-info"
+				<NcActionButton icon="icon-info"
 					:close-after-click="true"
 					@click="actionDetails">
 					{{ t('deck', 'Board details') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && !board.archived"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="actionEdit">
 					{{ t('deck', 'Edit board') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && !board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionClone">
 					<template #icon>
 						<CloneIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Clone board') }}
-				</ActionButton>
-				<ActionButton v-if="canManage && board.archived"
+				</NcActionButton>
+				<NcActionButton v-if="canManage && board.archived"
 					: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"
+				</NcActionButton>
+				<NcActionButton v-else-if="canManage && !board.archived"
 					:close-after-click="true"
 					@click="actionArchive">
 					<template #icon>
 						<ArchiveIcon :size="20" decorative />
 					</template>
 					{{ t('deck', 'Archive board') }}
-				</ActionButton>
+				</NcActionButton>

-				<ActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
+				<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
 					{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>

 			<!-- Due date reminder settings -->
 			<template v-if="isDueSubmenuActive">
-				<ActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
+				<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
 					:disabled="updateDueSetting"
 					@click="isDueSubmenuActive=false">
 					{{ t('deck', 'Due date reminders') }}
-				</ActionButton>
+				</NcActionButton>

-				<ActionButton name="notification"
+				<NcActionButton name="notification"
 					icon="icon-sound"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
 					@click="updateSetting('notify-due', 'all')">
 					{{ t('deck', 'All cards') }}
-				</ActionButton>
-				<ActionButton name="notification"
+				</NcActionButton>
+				<NcActionButton name="notification"
 					icon="icon-user"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
 					@click="updateSetting('notify-due', 'assigned')">
 					{{ t('deck', 'Assigned cards') }}
-				</ActionButton>
-				<ActionButton name="notification"
+				</NcActionButton>
+				<NcActionButton name="notification"
 					icon="icon-sound-off"
 					:disabled="updateDueSetting"
 					:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
 					@click="updateSetting('notify-due', 'off')">
 					{{ t('deck', 'No notifications') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
-			<ActionButton v-else-if="!board.archived && board.acl.length > 0"
+			<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
 				:title="t('deck', 'Due date reminders')"
 				:icon="dueDateReminderIcon"
 				@click="isDueSubmenuActive=true">
 				{{ dueDateReminderText }}
-			</ActionButton>
+			</NcActionButton>

-			<ActionButton v-if="canManage && !isDueSubmenuActive"
+			<NcActionButton v-if="canManage && !isDueSubmenuActive"
 				icon="icon-delete"
 				:close-after-click="true"
 				@click="actionDelete">
 				{{ t('deck', 'Delete board') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 	<div v-else-if="editing" class="board-edit">
-		<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
+		<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
 			<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-		</ColorPicker>
+		</NcColorPicker>
 		<form @submit.prevent.stop="applyEdit">
 			<input v-model="editTitle"
 				v-focus
 				type="text"
 				required>
 			<input type="submit" value="" class="icon-confirm">
-			<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
+			<NcActions><NcActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></NcActions>
 		</form>
 	</div>
 </template>

 <script>
-import { AppNavigationIconBullet, AppNavigationCounter, AppNavigationItem, ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { NcAppNavigationIconBullet, NcAppNavigationCounter, NcAppNavigationItem, NcColorPicker, NcActions, NcActionButton } 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'
@@ -145,12 +146,12 @@ import CloneIcon from 'vue-material-design-icons/ContentDuplicate'
 export default {
 	name: 'AppNavigationBoard',
 	components: {
-		AppNavigationIconBullet,
-		AppNavigationCounter,
-		AppNavigationItem,
-		ColorPicker,
-		Actions,
-		ActionButton,
+		NcAppNavigationIconBullet,
+		NcAppNavigationCounter,
+		NcAppNavigationItem,
+		NcColorPicker,
+		NcActions,
+		NcActionButton,
 		ArchiveIcon,
 		CloneIcon,
 	},
@@ -262,7 +263,7 @@ export default {
 		},
 		actionDelete() {
 			OC.dialogs.confirmDestructive(
-				t('deck', 'Are you sure you want to delete the board {title}? This will delete all the data of this board.', { title: this.board.title }),
+				t('deck', 'Are you sure you want to delete the board {title}? This will delete all the data of this board including archived cards.', { title: this.board.title }),
 				t('deck', 'Delete the board?'),
 				{
 					type: OC.dialogs.YES_NO_BUTTONS,
--- a/src/components/navigation/AppNavigationBoardCategory.vue
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -20,9 +20,8 @@
  -
  -->
 <template>
-	<AppNavigationItem v-if="boards.length > 0"
+	<NcAppNavigationItem v-if="boards.length > 0"
 		:title="text"
-		:icon="icon"
 		:to="to"
 		:exact="true"
 		:allow-collapse="collapsible"
@@ -31,17 +30,17 @@
 		<template #icon>
 			<slot name="icon" />
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>

 <script>
-import AppNavigationBoard from './AppNavigationBoard'
-import { AppNavigationItem } from '@nextcloud/vue'
+import AppNavigationBoard from './AppNavigationBoard.vue'
+import { NcAppNavigationItem } from '@nextcloud/vue'

 export default {
 	name: 'AppNavigationBoardCategory',
 	components: {
-		AppNavigationItem,
+		NcAppNavigationItem,
 		AppNavigationBoard,
 	},
 	props: {
@@ -57,10 +56,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		icon: {
-			type: String,
-			required: true,
-		},
 		boards: {
 			type: Array,
 			required: true,
--- a/src/components/overview/Overview.vue
+++ b/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'

--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -26,9 +26,9 @@
 			<RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
 			<div v-if="loading" class="icon-loading-small" />
 		</h2>
-		<Actions>
-			<ActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
-		</Actions>
+		<NcActions>
+			<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
+		</NcActions>
 		<div class="search-wrapper">
 			<div v-if="loading || filteredResults.length > 0" class="search-results">
 				<CardItem v-for="card in filteredResults"
@@ -52,14 +52,14 @@
 </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 { Actions, ActionButton } from '@nextcloud/vue'
+import Placeholder from './Placeholder.vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'

 const createCancelToken = () => axios.CancelToken.source()

@@ -88,7 +88,7 @@ function search({ query, cursor }) {

 export default {
 	name: 'GlobalSearchResults',
-	components: { CardItem, InfiniteLoading, RichText, Placeholder, Actions, ActionButton },
+	components: { CardItem, InfiniteLoading, RichText, Placeholder, NcActions, NcActionButton },
 	data() {
 		return {
 			results: [],