From 4be99a93c83e42e208db49602e6a8b163aae1406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 20 Aug 2022 11:50:27 +0200
Subject: [PATCH] Bump to @nextcloud/vue@6.0.0-beta.3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json                             | 520 ++++++++++--------
 package.json                                  |   2 +-
 src/App.vue                                   |  20 +-
 src/BoardSelector.vue                         |   8 +-
 src/CardCreateDialog.vue                      |  30 +-
 src/CardSelector.vue                          |  18 +-
 src/components/ActivityEntry.vue              |   4 +-
 src/components/AttachmentDragAndDrop.vue      |   8 +-
 src/components/Controls.vue                   |  68 +--
 src/components/board/Board.vue                |   8 +-
 src/components/board/BoardSidebar.vue         |  26 +-
 src/components/board/SharingTabSidebar.vue    |  26 +-
 src/components/board/Stack.vue                |  32 +-
 src/components/board/TagsTabSidebar.vue       |  48 +-
 src/components/boards/BoardItem.vue           |   8 +-
 src/components/card/AttachmentList.vue        |  30 +-
 src/components/card/CardSidebar.vue           |  40 +-
 .../card/CardSidebarTabComments.vue           |   6 +-
 src/components/card/CardSidebarTabDetails.vue |  34 +-
 src/components/card/CommentForm.vue           |  10 +-
 src/components/card/CommentItem.vue           |  46 +-
 src/components/card/Description.vue           |  32 +-
 src/components/cards/AvatarList.vue           |  16 +-
 src/components/cards/CardBadges.vue           |   6 +-
 src/components/cards/CardMenu.vue             |  42 +-
 src/components/icons/DeckIcon.vue             |  19 +
 src/components/navigation/AppNavigation.vue   |  49 +-
 .../navigation/AppNavigationAddBoard.vue      |  12 +-
 .../navigation/AppNavigationBoard.vue         |  76 +--
 .../navigation/AppNavigationBoardCategory.vue |  13 +-
 src/components/search/GlobalSearchResults.vue |  10 +-
 src/main.js                                   |   1 +
 src/views/Dashboard.vue                       |   8 +-
 33 files changed, 680 insertions(+), 596 deletions(-)
 create mode 100644 src/components/icons/DeckIcon.vue

diff --git a/package-lock.json b/package-lock.json
index 5690dcf3b..944f5ede1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@nextcloud/l10n": "^1.6.0",
         "@nextcloud/moment": "^1.2.1",
         "@nextcloud/router": "^2.0.0",
-        "@nextcloud/vue": "^5.4.0",
+        "@nextcloud/vue": "^6.0.0-beta.3",
         "@nextcloud/vue-dashboard": "^2.0.1",
         "blueimp-md5": "^2.19.0",
         "dompurify": "^2.3.10",
@@ -1965,6 +1965,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "dependencies": {
+        "@floating-ui/core": "^0.3.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -2955,8 +2968,9 @@
       }
     },
     "node_modules/@nextcloud/capabilities": {
-      "version": "1.0.2",
-      "license": "GPL-3.0-or-later",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@nextcloud/capabilities/-/capabilities-1.0.4.tgz",
+      "integrity": "sha512-xsmwPPUJ8NN7YfLcq0gpDTibeb9lMBvY/bffMFnHcZi8hMGOouPiEY+CWAgJ5I9W6I2vNeacHUuTanEN5Ncb2A==",
       "dependencies": {
         "@nextcloud/initial-state": "^1.1.2",
         "core-js": "^3.6.4"
@@ -3136,12 +3150,11 @@
       }
     },
     "node_modules/@nextcloud/logger": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.0.0.tgz",
-      "integrity": "sha512-C3vb8I1z67c5FhSWUNB21U6gzzD7RVgjyVUeK+QVz5nYQt1UWTp9yGyqE8G+R5QAyFFWfuOw1RHHkHJ/CWQ4YA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.2.1.tgz",
+      "integrity": "sha512-MP2/5ZdjDfcTPO5ASfqV5fVU6TYeaa2QOsi2yXBHrmlJ34+HlDdsoVzDGPrbutGCToAuBDSu7nh0WW2aLOp/9A==",
       "dependencies": {
         "@nextcloud/auth": "^1.2.2",
-        "babel-plugin-transform-class-properties": "^6.24.1",
         "core-js": "^3.6.4"
       }
     },
@@ -3166,9 +3179,9 @@
       }
     },
     "node_modules/@nextcloud/logger/node_modules/core-js": {
-      "version": "3.16.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.3.tgz",
-      "integrity": "sha512-lM3GftxzHNtPNUJg0v4pC2RC6puwMd6VZA7vXUczi+SKmCWSf4JwO89VJGMqbzmB7jlK7B5hr3S64PqwFL49cA==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
+      "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3267,43 +3280,43 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.4.0.tgz",
-      "integrity": "sha512-YybOMuStBKtCwbssxMNEd0A8k/Qr5+zm9vnSOaLaMxeB8iaUU+PgBNiYGo8O24UJjSS6FqFwg02V4XzI1Sd6Lw==",
+      "version": "6.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.3.tgz",
+      "integrity": "sha512-Fnenptz/55KIcXP8kDcjUz8Xcm0EARfSkvnpgQvJh12fd1Xkf8B8ziHQAfAPozsV3RmXDbTeGiuQ4VQCQ/rSzw==",
       "dependencies": {
-        "@nextcloud/auth": "^1.2.3",
-        "@nextcloud/axios": "^1.3.2",
+        "@nextcloud/auth": "^1.3.0",
+        "@nextcloud/axios": "^1.10.0",
         "@nextcloud/browser-storage": "^0.1.1",
         "@nextcloud/calendar-js": "^3.0.0",
-        "@nextcloud/capabilities": "^1.0.2",
-        "@nextcloud/dialogs": "^3.0.0",
-        "@nextcloud/event-bus": "^2.0.0",
-        "@nextcloud/l10n": "^1.2.3",
-        "@nextcloud/logger": "^2.0.0",
+        "@nextcloud/capabilities": "^1.0.4",
+        "@nextcloud/dialogs": "^3.1.4",
+        "@nextcloud/event-bus": "^2.1.1",
+        "@nextcloud/l10n": "^1.6.0",
+        "@nextcloud/logger": "^2.2.1",
         "@nextcloud/router": "^2.0.0",
         "debounce": "1.2.1",
-        "emoji-mart-vue-fast": "^10.2.1",
+        "emoji-mart-vue-fast": "^11.1.1",
         "escape-html": "^1.0.3",
-        "focus-trap": "^6.8.1",
+        "floating-vue": "^1.0.0-beta.18",
+        "focus-trap": "^6.9.4",
         "hammerjs": "^2.0.8",
-        "linkify-string": "^3.0.2",
-        "md5": "^2.2.1",
-        "splitpanes": "^2.3.6",
-        "string-length": "^5.0.0",
-        "striptags": "^3.1.1",
+        "linkify-string": "^3.0.4",
+        "md5": "^2.3.0",
+        "splitpanes": "^2.4.1",
+        "string-length": "^5.0.1",
+        "striptags": "^3.2.0",
         "style-loader": "^3.3.1",
         "tributejs": "^5.1.3",
-        "v-click-outside": "^3.0.1",
-        "v-tooltip": "^2.0.3",
-        "vue": "^2.6.14",
-        "vue-color": "^2.7.1",
-        "vue-material-design-icons": "^5.0.0",
+        "v-click-outside": "^3.2.0",
+        "vue": "^2.7.8",
+        "vue-color": "^2.8.1",
+        "vue-material-design-icons": "^5.1.2",
         "vue-multiselect": "^2.1.6",
-        "vue2-datepicker": "^3.6.3"
+        "vue2-datepicker": "^3.11.0"
       },
       "engines": {
-        "node": "^14.0.0",
-        "npm": "^7.0.0"
+        "node": "^16.0.0",
+        "npm": "^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/@nextcloud/vue-dashboard": {
@@ -3519,9 +3532,9 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/ansi-regex": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.0.tgz",
-      "integrity": "sha512-tAaOSrWCHF+1Ear1Z4wnJCXA9GGox4K6Ic85a5qalES2aeEwQGr7UC93mwef49536PkCYjzkp0zIxfFvexJ6zQ==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "engines": {
         "node": ">=12"
       },
@@ -3530,9 +3543,9 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/char-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz",
-      "integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
       "engines": {
         "node": ">=12.20"
       }
@@ -3548,12 +3561,12 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/emoji-mart-vue-fast": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-10.2.1.tgz",
-      "integrity": "sha512-PtKihhsXBEEw1jHwnoRyJAnJP1OlK4EJrEze58EbUUV7iHWGLub+yuiNSj2Uo1JBHraz4fw/pH98nFysVoe0qg==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-11.1.1.tgz",
+      "integrity": "sha512-mMN49N2lCQCjanSzLYBS1PlBO+7Do092FnrsWwogwmOo4p+L8N3L8TjcDk30ByXMCjSEcCDsjupCxIcaBpVNKg==",
       "dependencies": {
         "@babel/polyfill": "^7.12.1",
-        "@babel/runtime": "^7.16.3",
+        "@babel/runtime": "^7.18.6",
         "vue-virtual-scroller": "^1.0.10"
       },
       "peerDependencies": {
@@ -3561,17 +3574,17 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/linkify-string": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.2.tgz",
-      "integrity": "sha512-e6sa4WYslcwuNA0ciRo7KPAb4VpTIOxsGPAXeSR8XlORtKak8WMleuvrt5iRZwulHAd6dI+BO7b94lNW8lbMUQ==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.4.tgz",
+      "integrity": "sha512-OnNqqRjlYXaXipIAbBC8sDXsSumI1ftatzFg141Pw9HEXWjTVLFcMZoKbFupshqWRavtNJ6QHLa+u6AlxxgeRw==",
       "peerDependencies": {
         "linkifyjs": "^3.0.0"
       }
     },
     "node_modules/@nextcloud/vue/node_modules/linkifyjs": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.1.tgz",
-      "integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
+      "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==",
       "peer": true
     },
     "node_modules/@nextcloud/vue/node_modules/lru-cache": {
@@ -3600,12 +3613,12 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/string-length": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
-      "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
       "dependencies": {
         "char-regex": "^2.0.0",
-        "strip-ansi": "^7.0.0"
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
         "node": ">=12.20"
@@ -3615,11 +3628,11 @@
       }
     },
     "node_modules/@nextcloud/vue/node_modules/strip-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.0.tgz",
-      "integrity": "sha512-UhDTSnGF1dc0DRbUqr1aXwNoY3RgVkSWG8BrpnuFIxhP57IqbS7IRta2Gfiavds4yCxc5+fEAVVOgBZWnYkvzg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
       "dependencies": {
-        "ansi-regex": "^6.0.0"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
         "node": ">=12"
@@ -4607,6 +4620,7 @@
     },
     "node_modules/ansi-regex": {
       "version": "2.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4867,6 +4881,7 @@
     },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chalk": "^1.1.3",
@@ -4876,6 +4891,7 @@
     },
     "node_modules/babel-code-frame/node_modules/ansi-styles": {
       "version": "2.2.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4883,6 +4899,7 @@
     },
     "node_modules/babel-code-frame/node_modules/chalk": {
       "version": "1.1.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^2.2.1",
@@ -4897,10 +4914,12 @@
     },
     "node_modules/babel-code-frame/node_modules/js-tokens": {
       "version": "3.0.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/babel-code-frame/node_modules/supports-color": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -4991,27 +5010,6 @@
         "jsesc": "bin/jsesc"
       }
     },
-    "node_modules/babel-helper-function-name": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
-      "dependencies": {
-        "babel-helper-get-function-arity": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "node_modules/babel-helper-get-function-arity": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
-      "dependencies": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
     "node_modules/babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@@ -5155,6 +5153,7 @@
     },
     "node_modules/babel-messages": {
       "version": "6.23.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.22.0"
@@ -5252,22 +5251,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-syntax-class-properties": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
-      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
-    },
-    "node_modules/babel-plugin-transform-class-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
-      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
-      "dependencies": {
-        "babel-helper-function-name": "^6.24.1",
-        "babel-plugin-syntax-class-properties": "^6.8.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
     "node_modules/babel-plugin-transform-es2015-modules-commonjs": {
       "version": "6.26.2",
       "dev": true,
@@ -5355,6 +5338,7 @@
     },
     "node_modules/babel-runtime": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "core-js": "^2.4.0",
@@ -5363,10 +5347,12 @@
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/babel-template": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.26.0",
@@ -5378,6 +5364,7 @@
     },
     "node_modules/babel-traverse": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-code-frame": "^6.26.0",
@@ -5393,6 +5380,7 @@
     },
     "node_modules/babel-traverse/node_modules/debug": {
       "version": "2.6.9",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -5400,6 +5388,7 @@
     },
     "node_modules/babel-traverse/node_modules/globals": {
       "version": "9.18.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5407,6 +5396,7 @@
     },
     "node_modules/babel-types": {
       "version": "6.26.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.26.0",
@@ -5417,6 +5407,7 @@
     },
     "node_modules/babel-types/node_modules/to-fast-properties": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5424,6 +5415,7 @@
     },
     "node_modules/babylon": {
       "version": "6.18.0",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "babylon": "bin/babylon.js"
@@ -7238,6 +7230,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "node_modules/dayjs": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
@@ -7989,6 +7986,7 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -8891,6 +8889,7 @@
     },
     "node_modules/esutils": {
       "version": "2.0.2",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9398,6 +9397,29 @@
       "license": "ISC",
       "peer": true
     },
+    "node_modules/floating-vue": {
+      "version": "1.0.0-beta.18",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.18.tgz",
+      "integrity": "sha512-mRFc78szc1BTbhlCa4okb7wAGPuH/IID+yqJ+yrTMQ038H8WIAsPV/WFgWCaXqe8d1Z12LkMqiHDVorCJy8M2A==",
+      "dependencies": {
+        "@floating-ui/dom": "^0.1.10",
+        "vue-resize": "^1.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.10"
+      }
+    },
+    "node_modules/floating-vue/node_modules/vue-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
     "node_modules/focus-trap": {
       "version": "6.9.4",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
@@ -9857,6 +9879,7 @@
     },
     "node_modules/has-ansi": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^2.0.0"
@@ -10423,6 +10446,7 @@
     },
     "node_modules/invariant": {
       "version": "2.2.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.0.0"
@@ -13493,12 +13517,13 @@
       }
     },
     "node_modules/md5": {
-      "version": "2.2.1",
-      "license": "BSD-3-Clause",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
       "dependencies": {
-        "charenc": "~0.0.1",
-        "crypt": "~0.0.1",
-        "is-buffer": "~1.1.1"
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
       }
     },
     "node_modules/md5.js": {
@@ -14092,6 +14117,7 @@
     },
     "node_modules/ms": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/multicast-dns": {
@@ -16690,9 +16716,9 @@
       }
     },
     "node_modules/splitpanes": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
-      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz",
+      "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ=="
     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
@@ -16927,6 +16953,7 @@
     },
     "node_modules/strip-ansi": {
       "version": "3.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^2.0.0"
@@ -18080,8 +18107,9 @@
       }
     },
     "node_modules/v-click-outside": {
-      "version": "3.0.1",
-      "license": "MIT",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w==",
       "engines": {
         "node": ">=6"
       }
@@ -18223,8 +18251,9 @@
       "license": "MIT"
     },
     "node_modules/vue-color": {
-      "version": "2.7.1",
-      "license": "MIT",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
       "dependencies": {
         "clamp": "^1.0.1",
         "lodash.throttle": "^4.0.0",
@@ -18478,19 +18507,16 @@
       "license": "MIT"
     },
     "node_modules/vue2-datepicker": {
-      "version": "3.8.2",
-      "license": "MIT",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.0.tgz",
+      "integrity": "sha512-zbMkAjYwDTXZozZtkpSwqxq7nEeBt7zoHL+oQcdjEXAqzJHhmatE6sl6JSr58PMIx2WOK0c6QBXozSqT32iQAQ==",
       "dependencies": {
-        "date-format-parse": "^0.2.6"
+        "date-format-parse": "^0.2.7"
       },
       "peerDependencies": {
         "vue": "^2.5.0"
       }
     },
-    "node_modules/vue2-datepicker/node_modules/date-format-parse": {
-      "version": "0.2.6",
-      "license": "MIT"
-    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "license": "MIT",
@@ -20556,6 +20582,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "requires": {
+        "@floating-ui/core": "^0.3.0"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -21295,7 +21334,9 @@
       "requires": {}
     },
     "@nextcloud/capabilities": {
-      "version": "1.0.2",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@nextcloud/capabilities/-/capabilities-1.0.4.tgz",
+      "integrity": "sha512-xsmwPPUJ8NN7YfLcq0gpDTibeb9lMBvY/bffMFnHcZi8hMGOouPiEY+CWAgJ5I9W6I2vNeacHUuTanEN5Ncb2A==",
       "requires": {
         "@nextcloud/initial-state": "^1.1.2",
         "core-js": "^3.6.4"
@@ -21416,12 +21457,11 @@
       }
     },
     "@nextcloud/logger": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.0.0.tgz",
-      "integrity": "sha512-C3vb8I1z67c5FhSWUNB21U6gzzD7RVgjyVUeK+QVz5nYQt1UWTp9yGyqE8G+R5QAyFFWfuOw1RHHkHJ/CWQ4YA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-2.2.1.tgz",
+      "integrity": "sha512-MP2/5ZdjDfcTPO5ASfqV5fVU6TYeaa2QOsi2yXBHrmlJ34+HlDdsoVzDGPrbutGCToAuBDSu7nh0WW2aLOp/9A==",
       "requires": {
         "@nextcloud/auth": "^1.2.2",
-        "babel-plugin-transform-class-properties": "^6.24.1",
         "core-js": "^3.6.4"
       },
       "dependencies": {
@@ -21446,9 +21486,9 @@
           }
         },
         "core-js": {
-          "version": "3.16.3",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.3.tgz",
-          "integrity": "sha512-lM3GftxzHNtPNUJg0v4pC2RC6puwMd6VZA7vXUczi+SKmCWSf4JwO89VJGMqbzmB7jlK7B5hr3S64PqwFL49cA=="
+          "version": "3.24.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
+          "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg=="
         },
         "lru-cache": {
           "version": "6.0.0",
@@ -21519,39 +21559,39 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.4.0.tgz",
-      "integrity": "sha512-YybOMuStBKtCwbssxMNEd0A8k/Qr5+zm9vnSOaLaMxeB8iaUU+PgBNiYGo8O24UJjSS6FqFwg02V4XzI1Sd6Lw==",
+      "version": "6.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-6.0.0-beta.3.tgz",
+      "integrity": "sha512-Fnenptz/55KIcXP8kDcjUz8Xcm0EARfSkvnpgQvJh12fd1Xkf8B8ziHQAfAPozsV3RmXDbTeGiuQ4VQCQ/rSzw==",
       "requires": {
-        "@nextcloud/auth": "^1.2.3",
-        "@nextcloud/axios": "^1.3.2",
+        "@nextcloud/auth": "^1.3.0",
+        "@nextcloud/axios": "^1.10.0",
         "@nextcloud/browser-storage": "^0.1.1",
         "@nextcloud/calendar-js": "^3.0.0",
-        "@nextcloud/capabilities": "^1.0.2",
-        "@nextcloud/dialogs": "^3.0.0",
-        "@nextcloud/event-bus": "^2.0.0",
-        "@nextcloud/l10n": "^1.2.3",
-        "@nextcloud/logger": "^2.0.0",
+        "@nextcloud/capabilities": "^1.0.4",
+        "@nextcloud/dialogs": "^3.1.4",
+        "@nextcloud/event-bus": "^2.1.1",
+        "@nextcloud/l10n": "^1.6.0",
+        "@nextcloud/logger": "^2.2.1",
         "@nextcloud/router": "^2.0.0",
         "debounce": "1.2.1",
-        "emoji-mart-vue-fast": "^10.2.1",
+        "emoji-mart-vue-fast": "^11.1.1",
         "escape-html": "^1.0.3",
-        "focus-trap": "^6.8.1",
+        "floating-vue": "^1.0.0-beta.18",
+        "focus-trap": "^6.9.4",
         "hammerjs": "^2.0.8",
-        "linkify-string": "^3.0.2",
-        "md5": "^2.2.1",
-        "splitpanes": "^2.3.6",
-        "string-length": "^5.0.0",
-        "striptags": "^3.1.1",
+        "linkify-string": "^3.0.4",
+        "md5": "^2.3.0",
+        "splitpanes": "^2.4.1",
+        "string-length": "^5.0.1",
+        "striptags": "^3.2.0",
         "style-loader": "^3.3.1",
         "tributejs": "^5.1.3",
-        "v-click-outside": "^3.0.1",
-        "v-tooltip": "^2.0.3",
-        "vue": "^2.6.14",
-        "vue-color": "^2.7.1",
-        "vue-material-design-icons": "^5.0.0",
+        "v-click-outside": "^3.2.0",
+        "vue": "^2.7.8",
+        "vue-color": "^2.8.1",
+        "vue-material-design-icons": "^5.1.2",
         "vue-multiselect": "^2.1.6",
-        "vue2-datepicker": "^3.6.3"
+        "vue2-datepicker": "^3.11.0"
       },
       "dependencies": {
         "@nextcloud/auth": {
@@ -21597,14 +21637,14 @@
           }
         },
         "ansi-regex": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.0.tgz",
-          "integrity": "sha512-tAaOSrWCHF+1Ear1Z4wnJCXA9GGox4K6Ic85a5qalES2aeEwQGr7UC93mwef49536PkCYjzkp0zIxfFvexJ6zQ=="
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
         "char-regex": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz",
-          "integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA=="
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+          "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw=="
         },
         "core-js": {
           "version": "3.24.1",
@@ -21612,25 +21652,25 @@
           "integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg=="
         },
         "emoji-mart-vue-fast": {
-          "version": "10.2.1",
-          "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-10.2.1.tgz",
-          "integrity": "sha512-PtKihhsXBEEw1jHwnoRyJAnJP1OlK4EJrEze58EbUUV7iHWGLub+yuiNSj2Uo1JBHraz4fw/pH98nFysVoe0qg==",
+          "version": "11.1.1",
+          "resolved": "https://registry.npmjs.org/emoji-mart-vue-fast/-/emoji-mart-vue-fast-11.1.1.tgz",
+          "integrity": "sha512-mMN49N2lCQCjanSzLYBS1PlBO+7Do092FnrsWwogwmOo4p+L8N3L8TjcDk30ByXMCjSEcCDsjupCxIcaBpVNKg==",
           "requires": {
             "@babel/polyfill": "^7.12.1",
-            "@babel/runtime": "^7.16.3",
+            "@babel/runtime": "^7.18.6",
             "vue-virtual-scroller": "^1.0.10"
           }
         },
         "linkify-string": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.2.tgz",
-          "integrity": "sha512-e6sa4WYslcwuNA0ciRo7KPAb4VpTIOxsGPAXeSR8XlORtKak8WMleuvrt5iRZwulHAd6dI+BO7b94lNW8lbMUQ==",
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-3.0.4.tgz",
+          "integrity": "sha512-OnNqqRjlYXaXipIAbBC8sDXsSumI1ftatzFg141Pw9HEXWjTVLFcMZoKbFupshqWRavtNJ6QHLa+u6AlxxgeRw==",
           "requires": {}
         },
         "linkifyjs": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.1.tgz",
-          "integrity": "sha512-HwXVwdNH1wESBfo2sH7Bkl+ywzbGA3+uJEfhquCyi/bMCa49bFUvd/re1NT1Lox/5jdnpQXzI9O/jykit71idg==",
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
+          "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==",
           "peer": true
         },
         "lru-cache": {
@@ -21650,20 +21690,20 @@
           }
         },
         "string-length": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.0.tgz",
-          "integrity": "sha512-1qjpci3h1G7BUi6dt5uAVyrO2FMUdjj3XWU970/eQh0YKhlYZ8bJMC/+BUpD21YdEhmuHv2nnbUUn024+cC7YQ==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+          "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
           "requires": {
             "char-regex": "^2.0.0",
-            "strip-ansi": "^7.0.0"
+            "strip-ansi": "^7.0.1"
           }
         },
         "strip-ansi": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.0.tgz",
-          "integrity": "sha512-UhDTSnGF1dc0DRbUqr1aXwNoY3RgVkSWG8BrpnuFIxhP57IqbS7IRta2Gfiavds4yCxc5+fEAVVOgBZWnYkvzg==",
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
           "requires": {
-            "ansi-regex": "^6.0.0"
+            "ansi-regex": "^6.0.1"
           }
         },
         "yallist": {
@@ -22634,7 +22674,8 @@
       "peer": true
     },
     "ansi-regex": {
-      "version": "2.1.1"
+      "version": "2.1.1",
+      "dev": true
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -22830,6 +22871,7 @@
     },
     "babel-code-frame": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
@@ -22837,10 +22879,12 @@
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "2.2.1"
+          "version": "2.2.1",
+          "dev": true
         },
         "chalk": {
           "version": "1.1.3",
+          "dev": true,
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -22850,10 +22894,12 @@
           }
         },
         "js-tokens": {
-          "version": "3.0.2"
+          "version": "3.0.2",
+          "dev": true
         },
         "supports-color": {
-          "version": "2.0.0"
+          "version": "2.0.0",
+          "dev": true
         }
       }
     },
@@ -22937,27 +22983,6 @@
         }
       }
     },
-    "babel-helper-function-name": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz",
-      "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=",
-      "requires": {
-        "babel-helper-get-function-arity": "^6.24.1",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1",
-        "babel-traverse": "^6.24.1",
-        "babel-types": "^6.24.1"
-      }
-    },
-    "babel-helper-get-function-arity": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz",
-      "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=",
-      "requires": {
-        "babel-runtime": "^6.22.0",
-        "babel-types": "^6.24.1"
-      }
-    },
     "babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@@ -23064,6 +23089,7 @@
     },
     "babel-messages": {
       "version": "6.23.0",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -23143,22 +23169,6 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
-    "babel-plugin-syntax-class-properties": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
-      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
-    },
-    "babel-plugin-transform-class-properties": {
-      "version": "6.24.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
-      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
-      "requires": {
-        "babel-helper-function-name": "^6.24.1",
-        "babel-plugin-syntax-class-properties": "^6.8.0",
-        "babel-runtime": "^6.22.0",
-        "babel-template": "^6.24.1"
-      }
-    },
     "babel-plugin-transform-es2015-modules-commonjs": {
       "version": "6.26.2",
       "dev": true,
@@ -23237,18 +23247,21 @@
     },
     "babel-runtime": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
         "regenerator-runtime": {
-          "version": "0.11.1"
+          "version": "0.11.1",
+          "dev": true
         }
       }
     },
     "babel-template": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-traverse": "^6.26.0",
@@ -23259,6 +23272,7 @@
     },
     "babel-traverse": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "babel-code-frame": "^6.26.0",
         "babel-messages": "^6.23.0",
@@ -23273,17 +23287,20 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
+          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
         },
         "globals": {
-          "version": "9.18.0"
+          "version": "9.18.0",
+          "dev": true
         }
       }
     },
     "babel-types": {
       "version": "6.26.0",
+      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "esutils": "^2.0.2",
@@ -23292,12 +23309,14 @@
       },
       "dependencies": {
         "to-fast-properties": {
-          "version": "1.0.3"
+          "version": "1.0.3",
+          "dev": true
         }
       }
     },
     "babylon": {
-      "version": "6.18.0"
+      "version": "6.18.0",
+      "dev": true
     },
     "bail": {
       "version": "1.0.5"
@@ -24658,6 +24677,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "dayjs": {
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
@@ -25248,7 +25272,8 @@
       "version": "1.0.3"
     },
     "escape-string-regexp": {
-      "version": "1.0.5"
+      "version": "1.0.5",
+      "dev": true
     },
     "eslint": {
       "version": "8.14.0",
@@ -25893,7 +25918,8 @@
       "peer": true
     },
     "esutils": {
-      "version": "2.0.2"
+      "version": "2.0.2",
+      "dev": true
     },
     "etag": {
       "version": "1.8.1",
@@ -26284,6 +26310,25 @@
         }
       }
     },
+    "floating-vue": {
+      "version": "1.0.0-beta.18",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.18.tgz",
+      "integrity": "sha512-mRFc78szc1BTbhlCa4okb7wAGPuH/IID+yqJ+yrTMQ038H8WIAsPV/WFgWCaXqe8d1Z12LkMqiHDVorCJy8M2A==",
+      "requires": {
+        "@floating-ui/dom": "^0.1.10",
+        "vue-resize": "^1.0.0"
+      },
+      "dependencies": {
+        "vue-resize": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+          "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
+      }
+    },
     "focus-trap": {
       "version": "6.9.4",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
@@ -26601,6 +26646,7 @@
     },
     "has-ansi": {
       "version": "2.0.0",
+      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -27007,6 +27053,7 @@
     },
     "invariant": {
       "version": "2.2.4",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -29212,11 +29259,13 @@
       "peer": true
     },
     "md5": {
-      "version": "2.2.1",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
       "requires": {
-        "charenc": "~0.0.1",
-        "crypt": "~0.0.1",
-        "is-buffer": "~1.1.1"
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
       }
     },
     "md5.js": {
@@ -29640,7 +29689,8 @@
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
     "ms": {
-      "version": "2.0.0"
+      "version": "2.0.0",
+      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -31571,9 +31621,9 @@
       "peer": true
     },
     "splitpanes": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz",
-      "integrity": "sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw=="
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz",
+      "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ=="
     },
     "sprintf-js": {
       "version": "1.0.3",
@@ -31761,6 +31811,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
+      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -32600,7 +32651,9 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v-click-outside": {
-      "version": "3.0.1"
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w=="
     },
     "v-tooltip": {
       "version": "2.0.3",
@@ -32704,7 +32757,9 @@
       "version": "1.1.0"
     },
     "vue-color": {
-      "version": "2.7.1",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
       "requires": {
         "clamp": "^1.0.1",
         "lodash.throttle": "^4.0.0",
@@ -32896,14 +32951,11 @@
       "version": "1.0.2"
     },
     "vue2-datepicker": {
-      "version": "3.8.2",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.0.tgz",
+      "integrity": "sha512-zbMkAjYwDTXZozZtkpSwqxq7nEeBt7zoHL+oQcdjEXAqzJHhmatE6sl6JSr58PMIx2WOK0c6QBXozSqT32iQAQ==",
       "requires": {
-        "date-format-parse": "^0.2.6"
-      },
-      "dependencies": {
-        "date-format-parse": {
-          "version": "0.2.6"
-        }
+        "date-format-parse": "^0.2.7"
       }
     },
     "vuex": {
diff --git a/package.json b/package.json
index 89a40f83e..00a170fd2 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@nextcloud/l10n": "^1.6.0",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^5.4.0",
+    "@nextcloud/vue": "^6.0.0-beta.3",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "blueimp-md5": "^2.19.0",
     "dompurify": "^2.3.10",
diff --git a/src/App.vue b/src/App.vue
index b1d044f38..1f2e6e90f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,13 +21,13 @@
  -->
 
 <template>
-	<Content id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
+	<NcContent id="content" app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<AppContent>
+		<NcAppContent>
 			<router-view />
-		</AppContent>
+		</NcAppContent>
 
-		<Modal v-if="cardDetailsInModal && $route.params.cardId"
+		<NcModal v-if="cardDetailsInModal && $route.params.cardId"
 			:clear-view-delay="0"
 			:title="t('deck', 'Card details')"
 			size="large"
@@ -35,16 +35,16 @@
 			<div class="modal__content modal__card">
 				<router-view name="sidebar" />
 			</div>
-		</Modal>
+		</NcModal>
 
 		<router-view name="sidebar" :visible="!cardDetailsInModal || !$route.params.cardId" />
-	</Content>
+	</NcContent>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import AppNavigation from './components/navigation/AppNavigation'
-import { Modal, Content, AppContent } from '@nextcloud/vue'
+import { NcModal, NcContent, NcAppContent } from '@nextcloud/vue'
 import { BoardApi } from './services/BoardApi'
 import { emit, subscribe } from '@nextcloud/event-bus'
 
@@ -54,9 +54,9 @@ export default {
 	name: 'App',
 	components: {
 		AppNavigation,
-		Modal,
-		Content,
-		AppContent,
+		NcModal,
+		NcContent,
+		NcAppContent,
 	},
 	provide() {
 		return {
diff --git a/src/BoardSelector.vue b/src/BoardSelector.vue
index 9e7140b9e..25d6b2bfd 100644
--- a/src/BoardSelector.vue
+++ b/src/BoardSelector.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Modal @close="close">
+	<NcModal @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
 			<input v-model="filter" type="text" :placeholder="t('deck', 'Search by board title')">
@@ -38,17 +38,17 @@
 				{{ t('deck', 'Select board') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'BoardSelector',
 	components: {
-		Modal,
+		NcModal,
 	},
 	data() {
 		return {
diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue
index 113e6e867..607813428 100644
--- a/src/CardCreateDialog.vue
+++ b/src/CardCreateDialog.vue
@@ -21,11 +21,11 @@
   -->
 
 <template>
-	<Modal class="card-selector" @close="close">
+	<NcModal class="card-selector" @close="close">
 		<div class="modal-scroller">
 			<div v-if="!creating && !created" id="modal-inner" :class="{ 'icon-loading': loading }">
 				<h3>{{ t('deck', 'Create a new card') }}</h3>
-				<Multiselect v-model="selectedBoard"
+				<NcMultiselect v-model="selectedBoard"
 					:placeholder="t('deck', 'Select a board')"
 					:options="boards"
 					:disabled="loading"
@@ -44,9 +44,9 @@
 							<span>{{ props.option.title }}</span>
 						</span>
 					</template>
-				</Multiselect>
+				</NcMultiselect>
 
-				<Multiselect v-model="selectedStack"
+				<NcMultiselect v-model="selectedStack"
 					:placeholder="t('deck', 'Select a list')"
 					:options="stacksFromBoard"
 					:max-height="100"
@@ -71,10 +71,10 @@
 				</div>
 			</div>
 			<div v-else id="modal-inner">
-				<EmptyContent v-if="creating" icon="icon-loading">
+				<NcEmptyContent v-if="creating" icon="icon-loading">
 					{{ t('deck', 'Creating the new card …') }}
-				</EmptyContent>
-				<EmptyContent v-else-if="created" icon="icon-checkmark">
+				</NcEmptyContent>
+				<NcEmptyContent v-else-if="created" icon="icon-checkmark">
 					{{ t('deck', 'Card "{card}" was added to "{board}"', { card: pendingTitle, board: selectedBoard.title }) }}
 					<template #desc>
 						<button class="primary" @click="openNewCard">
@@ -84,17 +84,17 @@
 							{{ t('deck', 'Close') }}
 						</button>
 					</template>
-				</EmptyContent>
+				</NcEmptyContent>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-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 NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
 import axios from '@nextcloud/axios'
 import { CardApi } from './services/CardApi'
 
@@ -103,9 +103,9 @@ const cardApi = new CardApi()
 export default {
 	name: 'CardCreateDialog',
 	components: {
-		EmptyContent,
-		Modal,
-		Multiselect,
+		NcEmptyContent,
+		NcModal,
+		NcMultiselect,
 	},
 	props: {
 		title: {
diff --git a/src/CardSelector.vue b/src/CardSelector.vue
index cd586cb86..ee5a8091b 100644
--- a/src/CardSelector.vue
+++ b/src/CardSelector.vue
@@ -21,10 +21,10 @@
   -->
 
 <template>
-	<Modal class="card-selector" @close="close">
+	<NcModal class="card-selector" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
 			<h3>{{ title }}</h3>
-			<Multiselect v-model="selectedBoard"
+			<NcMultiselect v-model="selectedBoard"
 				:placeholder="t('deck', 'Select a board')"
 				:options="boards"
 				:disabled="loading"
@@ -42,9 +42,9 @@
 						<span>{{ props.option.title }}</span>
 					</span>
 				</template>
-			</Multiselect>
+			</NcMultiselect>
 
-			<Multiselect v-model="selectedCard"
+			<NcMultiselect v-model="selectedCard"
 				:placeholder="t('deck', 'Select a card')"
 				:options="cardsFromBoard"
 				:disabled="loading || selectedBoard === ''"
@@ -57,20 +57,20 @@
 				{{ t('deck', 'Cancel') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 import axios from '@nextcloud/axios'
 
 export default {
 	name: 'CardSelector',
 	components: {
-		Modal,
-		Multiselect,
+		NcModal,
+		NcMultiselect,
 	},
 	props: {
 		title: {
diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue
index a88dee680..b6f289b63 100644
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -36,7 +36,7 @@
 
 <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'
@@ -93,7 +93,7 @@ export default {
 					break
 				case 'user':
 					parameters[key] = {
-						component: UserBubble,
+						component: NcUserBubble,
 						props: {
 							user: parameters[key].id,
 							displayName: parameters[key].name,
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 37f31722c..d5487e285 100644
--- 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,12 +57,12 @@
 					{{ t('deck', 'Keep existing file') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
-import { Modal } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload'
 import { loadState } from '@nextcloud/initial-state'
 
@@ -75,7 +75,7 @@ try {
 
 export default {
 	name: 'AttachmentDragAndDrop',
-	components: { Modal },
+	components: { NcModal },
 	mixins: [attachmentUpload],
 	props: {
 		cardId: {
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 081dc97df..f48c814ac 100644
--- 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,38 +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>
-					<ActionButton icon="icon-menu-sidebar"
+					</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" />
-				</Actions>
+				</NcActions>
 			</div>
 		</div>
 	</div>
@@ -216,7 +216,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle'
 import CardCreateDialog from '../CardCreateDialog'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
@@ -228,11 +228,11 @@ import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertic
 export default {
 	name: 'Controls',
 	components: {
-		Actions,
-		ActionButton,
-		Button,
-		Popover,
-		Avatar,
+		NcActions,
+		NcActionButton,
+		NcButton,
+		NcPopover,
+		NcAvatar,
 		CardCreateDialog,
 		ArchiveIcon,
 		FilterIcon,
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 07564f8c8..35f55cbc7 100644
--- 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"
@@ -75,7 +75,7 @@ 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 { NcEmptyContent } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults'
 import { showError } from '../../helpers/errors'
 
@@ -87,7 +87,7 @@ export default {
 		Container,
 		Draggable,
 		Stack,
-		EmptyContent,
+		NcEmptyContent,
 	},
 	inject: [
 		'boardApi',
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 85f29c90f..0a5ddefd2 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -21,40 +21,40 @@
   -->
 
 <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>
@@ -63,15 +63,15 @@ import SharingTabSidebar from './SharingTabSidebar'
 import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
 import TimelineTabSidebar from './TimelineTabSidebar'
-import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 
 const capabilities = window.OC.getCapabilities()
 
 export default {
 	name: 'BoardSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		SharingTabSidebar,
 		TagsTabSidebar,
 		DeletedTabSidebar,
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index e8d2ddc4b..f27844d22 100644
--- 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">
@@ -44,7 +44,7 @@
 				<ActionCheckbox 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">
+				<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,10 +54,10 @@
 					<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>
 
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { Avatar, Multiselect, Actions, ActionButton, ActionCheckbox } from '@nextcloud/vue'
+import { NcAvatar, NcMultiselect, NcActions, NcActionButton, ActionCheckbox } from '@nextcloud/vue'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -80,11 +80,11 @@ import debounce from 'lodash/debounce'
 export default {
 	name: 'SharingTabSidebar',
 	components: {
-		Avatar,
-		Actions,
-		ActionButton,
+		NcAvatar,
+		NcActions,
+		NcActionButton,
 		ActionCheckbox,
-		Multiselect,
+		NcMultiselect,
 		CollectionList,
 	},
 	props: {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 4fd3e9acd..a7c97d1c5 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -52,25 +52,25 @@
 						value="">
 				</form>
 			</transition>
-			<Actions v-if="canManage && !isArchived" :force-menu="true">
-				<ActionButton @click="modalArchivAllCardsShow=true">
+			<NcActions v-if="canManage && !isArchived" :force-menu="true">
+				<NcActionButton @click="modalArchivAllCardsShow=true">
 					<template #icon>
 						<ArchiveIcon decorative />
 					</template>
 					{{ t('deck', 'Archive all cards') }}
-				</ActionButton>
-				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
+				</NcActionButton>
+				<NcActionButton 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>{{ t('deck', 'Archive all cards in this list') }}</h3>
 				<progress :value="stackTransfer.current" :max="stackTransfer.total" />
@@ -81,7 +81,7 @@
 					{{ t('deck', 'Cancel') }}
 				</button>
 			</div>
-		</Modal>
+		</NcModal>
 
 		<transition name="slide-top" appear>
 			<div v-if="showAddCard" class="stack__card-add">
@@ -131,7 +131,7 @@
 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'
 
@@ -141,12 +141,12 @@ import ArchiveIcon from 'vue-material-design-icons/Archive'
 export default {
 	name: 'Stack',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		CardItem,
 		Container,
 		Draggable,
-		Modal,
+		NcModal,
 		ArchiveIcon,
 	},
 
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 4087addbb..a6d52e862 100644
--- 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()">
@@ -71,14 +71,14 @@
 
 import { mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
+import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 
 export default {
 	name: 'TagsTabSidebar',
 	components: {
-		ColorPicker,
-		Actions,
-		ActionButton,
+		NcColorPicker,
+		NcActions,
+		NcActionButton,
 	},
 	mixins: [Color],
 	data() {
diff --git a/src/components/boards/BoardItem.vue b/src/components/boards/BoardItem.vue
index 7b4eb7631..a925a40f0 100644
--- 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: {
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index f6cbd7053..b466ad14b 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -70,12 +70,12 @@
 						</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">
+					</NcActionButton>
+				</NcActions>
+				<NcActions v-if="removable && !isReadOnly" :force-menu="true">
 					<ActionLink v-if="attachment.extendedData.fileid" icon="icon-folder" :href="internalLink(attachment)">
 						{{ t('deck', 'Show in Files') }}
 					</ActionLink>
@@ -85,17 +85,17 @@
 						download>
 						{{ t('deck', 'Download') }}
 					</ActionLink>
-					<ActionButton v-if="attachment.extendedData.fileid && !isReadOnly" icon="icon-delete" @click="unshareAttachment(attachment)">
+					<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,7 +103,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
-import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
+import { NcActions, NcActionButton, ActionLink } from '@nextcloud/vue'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
@@ -125,8 +125,8 @@ const picker = getFilePickerBuilder(t('deck', 'File to share'))
 export default {
 	name: 'AttachmentList',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		ActionLink,
 		AttachmentDragAndDrop,
 	},
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index c5fca4157..b389892da 100644
--- 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,57 +32,57 @@
 		@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 />
 			</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'
@@ -101,9 +101,9 @@ const capabilities = window.OC.getCapabilities()
 export default {
 	name: 'CardSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
-		ActionButton,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		NcActionButton,
 		CardSidebarTabAttachments,
 		CardSidebarTabComments,
 		CardSidebarTabActivity,
diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index d10260cb6..7e50484f7 100644
--- 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,7 +35,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Avatar } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem'
 import CommentForm from './CommentForm'
 import InfiniteLoading from 'vue-infinite-loading'
@@ -44,7 +44,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 export default {
 	name: 'CardSidebarTabComments',
 	components: {
-		Avatar,
+		NcAvatar,
 		CommentItem,
 		CommentForm,
 		InfiniteLoading,
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index d56316e84..67c552748 100644
--- 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,11 +103,11 @@
 					: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>
 
@@ -125,7 +125,7 @@
 <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'
@@ -142,11 +142,11 @@ export default {
 	name: 'CardSidebarTabDetails',
 	components: {
 		Description,
-		Multiselect,
-		DatetimePicker,
-		Actions,
-		ActionButton,
-		Avatar,
+		NcMultiselect,
+		NcDatetimePicker,
+		NcActions,
+		NcActionButton,
+		NcAvatar,
 		CollectionList,
 	},
 	mixins: [Color],
diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index 6d5a14a41..eb4d32cdb 100644
--- 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,7 +63,7 @@
 
 <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'
 
@@ -71,8 +71,8 @@ export default {
 	name: 'CommentForm',
 	components: {
 		At,
-		Avatar,
-		UserBubble,
+		NcAvatar,
+		NcUserBubble,
 	},
 	props: {
 		value: {
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index 5b1ad9f67..915ec37a8 100644
--- 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,7 +64,7 @@
 </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 { getCurrentUser } from '@nextcloud/auth'
@@ -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,
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 4e7f49f6e..f53cfcc99 100644
--- 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"
@@ -63,14 +63,14 @@
 			@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>
 
@@ -79,7 +79,7 @@ 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 { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
@@ -101,9 +101,9 @@ export default {
 	name: 'Description',
 	components: {
 		VueEasymde: () => import('vue-easymde/dist/VueEasyMDE.common'),
-		Actions,
-		ActionButton,
-		Modal,
+		NcActions,
+		NcActionButton,
+		NcModal,
 		AttachmentList,
 		PaperclipIcon,
 	},
diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index 1ee7a2da5..e3f83744e 100644
--- 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,
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 643ec4358..06476618a 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -43,13 +43,13 @@
 			<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 NcAvatarList from './AvatarList'
 import CardMenu from './CardMenu'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.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,
diff --git a/src/components/cards/CardMenu.vue b/src/components/cards/CardMenu.vue
index 4ed0a49b8..95112684d 100644
--- 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,
diff --git a/src/components/icons/DeckIcon.vue b/src/components/icons/DeckIcon.vue
new file mode 100644
index 000000000..185c37348
--- /dev/null
+++ b/src/components/icons/DeckIcon.vue
@@ -0,0 +1,19 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :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>
+</template>
+<script>
+export default {
+    name: 'DeckIcon',
+    props: {
+        size: {
+            type: Number,
+            default: 16,
+        },
+    },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index 0b8449eeb..a954017a5 100644
--- 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 { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
 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,
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index ad7b66c4c..0cc91cdbc 100644
--- 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() {
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index ed7cb82c1..a81377332 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -20,124 +20,124 @@
   -
   -->
 <template>
-	<AppNavigationItem v-if="!editing"
+	<NcAppNavigationItem v-if="!editing"
 		:title="!deleted ? board.title : undoText"
 		:loading="loading"
 		:to="routeTo"
 		:undo="deleted"
 		@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 +145,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,
 	},
diff --git a/src/components/navigation/AppNavigationBoardCategory.vue b/src/components/navigation/AppNavigationBoardCategory.vue
index be308e6c7..71b282dab 100644
--- 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 { 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,
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index b18bc5089..89f8f5398 100644
--- 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"
@@ -59,7 +59,7 @@ 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 { 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: [],
diff --git a/src/main.js b/src/main.js
index 70741d06d..86f30320a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -76,6 +76,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 /* eslint-disable-next-line no-new */
 new Vue({
+	name: 'Deck',
 	el: '#content',
 	router,
 	store,
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e49851a62..4daf7a000 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<DashboardWidget :items="cards"
+		<NcDashboardWidget :items="cards"
 			empty-content-icon="icon-deck"
 			:empty-content-message="t('deck', 'No upcoming cards')"
 			:show-more-text="t('deck', 'upcoming cards')"
@@ -46,7 +46,7 @@
 					</ul>
 				</a>
 			</template>
-		</DashboardWidget>
+		</NcDashboardWidget>
 		<div class="center-button">
 			<button @click="toggleAddCardModel">
 				{{ t('deck', 'Add card') }}
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { DashboardWidget } from '@nextcloud/vue-dashboard'
+import { NcDashboardWidget } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
 import labelStyle from './../mixins/labelStyle'
 import DueDate from '../components/cards/badges/DueDate'
@@ -68,7 +68,7 @@ export default {
 	name: 'Dashboard',
 	components: {
 		DueDate,
-		DashboardWidget,
+		NcDashboardWidget,
 		CardCreateDialog,
 	},
 	mixins: [labelStyle],