Fix eslint errors

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

27 files changed, 162 insertions, 162 deletions

diff --git a/src/App.vue b/src/App.vue
index 5ea13ab4..3b57012c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,8 +37,8 @@ import client from './services/cdav.js'
 
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
-import NcContent from '@nextcloud/vue/dist/Components/NcContent'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 
 import { mapGetters } from 'vuex'
 
diff --git a/src/components/AppNavigation/AppNavigationSettings.vue b/src/components/AppNavigation/AppNavigationSettings.vue
index 47c316f8..c0a8996e 100644
--- a/src/components/AppNavigation/AppNavigationSettings.vue
+++ b/src/components/AppNavigation/AppNavigationSettings.vue
@@ -65,14 +65,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
-
-import CalendarToday from 'vue-material-design-icons/CalendarToday'
-import CalendarWeek from 'vue-material-design-icons/CalendarWeek'
-import CircleOutline from 'vue-material-design-icons/CircleOutline'
-import Check from 'vue-material-design-icons/Check'
-import Star from 'vue-material-design-icons/Star'
-import TrendingUp from 'vue-material-design-icons/TrendingUp'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
+
+import CalendarToday from 'vue-material-design-icons/CalendarToday.vue'
+import CalendarWeek from 'vue-material-design-icons/CalendarWeek.vue'
+import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Star from 'vue-material-design-icons/Star.vue'
+import TrendingUp from 'vue-material-design-icons/TrendingUp.vue'
 
 import { mapState, mapGetters, mapActions } from 'vuex'
 
diff --git a/src/components/AppNavigation/CalendarShare.vue b/src/components/AppNavigation/CalendarShare.vue
index 0972c1ac..d0eb24ad 100644
--- a/src/components/AppNavigation/CalendarShare.vue
+++ b/src/components/AppNavigation/CalendarShare.vue
@@ -66,7 +66,7 @@ import { urldecode } from '../../utils/url.js'
 import Axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 import debounce from 'debounce'
 
diff --git a/src/components/AppNavigation/CalendarSharee.vue b/src/components/AppNavigation/CalendarSharee.vue
index 574ba57b..fa5cc970 100644
--- a/src/components/AppNavigation/CalendarSharee.vue
+++ b/src/components/AppNavigation/CalendarSharee.vue
@@ -25,7 +25,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<NcAppNavigationItem :title="sharee.displayName" forceDisplayActions>
+	<NcAppNavigationItem :title="sharee.displayName" force-display-actions>
 		<template #icon>
 			<AccountMultiple v-if="sharee.isGroup"
 				:size="18"
@@ -60,13 +60,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import AccountMultiple from 'vue-material-design-icons/AccountMultiple'
-import Delete from 'vue-material-design-icons/Delete'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 
 export default {
 	name: 'CalendarSharee',
diff --git a/src/components/AppNavigation/ListItemCalendar.vue b/src/components/AppNavigation/ListItemCalendar.vue
index 836229f8..cc0f4cff 100644
--- a/src/components/AppNavigation/ListItemCalendar.vue
+++ b/src/components/AppNavigation/ListItemCalendar.vue
@@ -139,23 +139,23 @@ import ShareCalendar from './CalendarShare.vue'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { generateRemoteUrl } from '@nextcloud/router'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import NcAppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-
-import Close from 'vue-material-design-icons/Close'
-import Delete from 'vue-material-design-icons/Delete'
-import Download from 'vue-material-design-icons/Download'
-import LinkVariant from 'vue-material-design-icons/LinkVariant'
-import Pencil from 'vue-material-design-icons/Pencil'
-import ShareVariant from 'vue-material-design-icons/ShareVariant'
-import Undo from 'vue-material-design-icons/Undo'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import NcAppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+
+import Close from 'vue-material-design-icons/Close.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import Download from 'vue-material-design-icons/Download.vue'
+import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import Undo from 'vue-material-design-icons/Undo.vue'
 
 import ClickOutside from 'v-click-outside'
 import { mapGetters, mapActions } from 'vuex'
diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
index 2ed38b19..7346c61c 100644
--- a/src/components/AppNavigation/Trashbin.vue
+++ b/src/components/AppNavigation/Trashbin.vue
@@ -113,16 +113,16 @@ import logger from '../../utils/logger.js'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import Delete from 'vue-material-design-icons/Delete'
-import DeleteForever from 'vue-material-design-icons/DeleteForever'
-import Undo from 'vue-material-design-icons/Undo'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import DeleteForever from 'vue-material-design-icons/DeleteForever.vue'
+import Undo from 'vue-material-design-icons/Undo.vue'
 
 import { mapGetters } from 'vuex'
 
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
index ba11ef7e..0c838bdd 100644
--- a/src/components/AppSidebar/CalendarPickerItem.vue
+++ b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -51,7 +51,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import CalendarPickerOption from './CalendarPickerOption.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 export default {
 	components: {
diff --git a/src/components/AppSidebar/CalendarPickerOption.vue b/src/components/AppSidebar/CalendarPickerOption.vue
index 472793ce..0fdbde9e 100644
--- a/src/components/AppSidebar/CalendarPickerOption.vue
+++ b/src/components/AppSidebar/CalendarPickerOption.vue
@@ -42,7 +42,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 export default {
 	name: 'CalendarPickerOption',
 	components: {
diff --git a/src/components/AppSidebar/DatetimePickerItem.vue b/src/components/AppSidebar/DatetimePickerItem.vue
index 9589904c..8b5a0b0a 100644
--- a/src/components/AppSidebar/DatetimePickerItem.vue
+++ b/src/components/AppSidebar/DatetimePickerItem.vue
@@ -85,7 +85,7 @@ import { overdue } from '../../store/storeHelper.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker'
+import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
 
 export default {
 	name: 'DatetimePickerItem',
diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
index c0c32bb7..2f689347 100644
--- a/src/components/AppSidebar/MultiselectItem.vue
+++ b/src/components/AppSidebar/MultiselectItem.vue
@@ -53,7 +53,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import MultiselectOption from './MultiselectOption.vue'
 
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
 export default {
 	components: {
diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
index dde6e7fd..baad630d 100644
--- a/src/components/AppSidebar/TagsItem.vue
+++ b/src/components/AppSidebar/TagsItem.vue
@@ -53,9 +53,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 import MultiselectOption from './MultiselectOption.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 
-import Tag from 'vue-material-design-icons/Tag'
+import Tag from 'vue-material-design-icons/Tag.vue'
 
 export default {
 	components: {
diff --git a/src/components/DeleteCompletedModal.vue b/src/components/DeleteCompletedModal.vue
index 69b16a64..615b39a1 100644
--- a/src/components/DeleteCompletedModal.vue
+++ b/src/components/DeleteCompletedModal.vue
@@ -72,11 +72,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-import Delete from 'vue-material-design-icons/Delete'
+import Delete from 'vue-material-design-icons/Delete.vue'
 
 import { mapGetters, mapActions } from 'vuex'
 
diff --git a/src/components/Header.vue b/src/components/HeaderBar.vue
index 8cf38c43..8f6ddb44 100644
--- a/src/components/Header.vue
+++ b/src/components/HeaderBar.vue
@@ -42,7 +42,7 @@ import SortorderDropdown from './SortorderDropdown.vue'
 import { translate as t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 
-import Plus from 'vue-material-design-icons/Plus'
+import Plus from 'vue-material-design-icons/Plus.vue'
 
 import { mapGetters, mapActions } from 'vuex'
 
diff --git a/src/components/LoadCompletedButton.vue b/src/components/LoadCompletedButton.vue
index 1984700d..d2f40be0 100644
--- a/src/components/LoadCompletedButton.vue
+++ b/src/components/LoadCompletedButton.vue
@@ -33,9 +33,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import CloudDownload from 'vue-material-design-icons/CloudDownload'
+import CloudDownload from 'vue-material-design-icons/CloudDownload.vue'
 
 import { mapActions } from 'vuex'
 
diff --git a/src/components/SortorderDropdown.vue b/src/components/SortorderDropdown.vue
index 8d063e62..fd660275 100644
--- a/src/components/SortorderDropdown.vue
+++ b/src/components/SortorderDropdown.vue
@@ -60,21 +60,21 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-import AnimationOutline from 'vue-material-design-icons/AnimationOutline'
-import Bookmark from 'vue-material-design-icons/Bookmark'
-import CalendarStart from 'vue-material-design-icons/CalendarStart'
-import CalendarEnd from 'vue-material-design-icons/CalendarEnd'
-import Check from 'vue-material-design-icons/Check'
-import MenuDown from 'vue-material-design-icons/MenuDown'
-import MenuUp from 'vue-material-design-icons/MenuUp'
-import OrderAlphabeticalAscending from 'vue-material-design-icons/OrderAlphabeticalAscending'
-import Pencil from 'vue-material-design-icons/Pencil'
-import Plus from 'vue-material-design-icons/Plus'
-import Star from 'vue-material-design-icons/Star'
+import AnimationOutline from 'vue-material-design-icons/AnimationOutline.vue'
+import Bookmark from 'vue-material-design-icons/Bookmark.vue'
+import CalendarStart from 'vue-material-design-icons/CalendarStart.vue'
+import CalendarEnd from 'vue-material-design-icons/CalendarEnd.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import MenuDown from 'vue-material-design-icons/MenuDown.vue'
+import MenuUp from 'vue-material-design-icons/MenuUp.vue'
+import OrderAlphabeticalAscending from 'vue-material-design-icons/OrderAlphabeticalAscending.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Star from 'vue-material-design-icons/Star.vue'
 
 import { mapGetters } from 'vuex'
 
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 76717887..1629ff39 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -171,20 +171,20 @@ import Task from '../models/task.js'
 import { emit } from '@nextcloud/event-bus'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar'
-import Linkify from '@nextcloud/vue/dist/Directives/Linkify'
-
-import Delete from 'vue-material-design-icons/Delete'
-import Eye from 'vue-material-design-icons/Eye'
-import Pin from 'vue-material-design-icons/Pin'
-import Plus from 'vue-material-design-icons/Plus'
-import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline'
-import SortVariant from 'vue-material-design-icons/SortVariant'
-import CalendarClock from 'vue-material-design-icons/CalendarClock'
-import Star from 'vue-material-design-icons/Star'
-import Undo from 'vue-material-design-icons/Undo'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+import Linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
+
+import Delete from 'vue-material-design-icons/Delete.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import Pin from 'vue-material-design-icons/Pin.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline.vue'
+import SortVariant from 'vue-material-design-icons/SortVariant.vue'
+import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
+import Star from 'vue-material-design-icons/Star.vue'
+import Undo from 'vue-material-design-icons/Undo.vue'
 
 import ClickOutside from 'v-click-outside'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
diff --git a/src/components/TaskCheckbox.vue b/src/components/TaskCheckbox.vue
index d66e7b2d..7a14cbc8 100644
--- a/src/components/TaskCheckbox.vue
+++ b/src/components/TaskCheckbox.vue
@@ -41,10 +41,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { translate as t } from '@nextcloud/l10n'
 
-import CheckboxBlank from 'vue-material-design-icons/CheckboxBlank'
-import CheckboxBlankOffOutline from 'vue-material-design-icons/CheckboxBlankOffOutline'
-import CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline'
-import CheckboxOutline from 'vue-material-design-icons/CheckboxOutline'
+import CheckboxBlank from 'vue-material-design-icons/CheckboxBlank.vue'
+import CheckboxBlankOffOutline from 'vue-material-design-icons/CheckboxBlankOffOutline.vue'
+import CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
+import CheckboxOutline from 'vue-material-design-icons/CheckboxOutline.vue'
 
 export default {
 	components: {
diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
index 657940ce..4d635309 100644
--- a/src/components/TaskCreateDialog.vue
+++ b/src/components/TaskCreateDialog.vue
@@ -95,14 +95,14 @@ import client from '../services/cdav.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal'
-
-import Check from 'vue-material-design-icons/Check'
-import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline'
-import ViewHeadline from 'vue-material-design-icons/ViewHeadline'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+
+import Check from 'vue-material-design-icons/Check.vue'
+import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline.vue'
+import ViewHeadline from 'vue-material-design-icons/ViewHeadline.vue'
 
 import { mapGetters, mapActions } from 'vuex'
 
diff --git a/src/components/TaskStatusDisplay.vue b/src/components/TaskStatusDisplay.vue
index 67aaa234..3d3ebe79 100644
--- a/src/components/TaskStatusDisplay.vue
+++ b/src/components/TaskStatusDisplay.vue
@@ -34,13 +34,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
-import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline'
-import Check from 'vue-material-design-icons/Check'
-import Loading from 'vue-material-design-icons/Loading'
-import SyncAlert from 'vue-material-design-icons/SyncAlert'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Loading from 'vue-material-design-icons/Loading.vue'
+import SyncAlert from 'vue-material-design-icons/SyncAlert.vue'
 
 export default {
 	name: 'TaskStatusDisplay',
diff --git a/src/main.js b/src/main.js
index a031e1eb..b9968c5f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,16 +28,16 @@ import store from './store/store.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { linkTo } from '@nextcloud/router'
 
-import AlertBoxOutline from 'vue-material-design-icons/AlertBoxOutline'
-import CalendarRemove from 'vue-material-design-icons/CalendarRemove'
-import Cancel from 'vue-material-design-icons/Cancel'
-import Check from 'vue-material-design-icons/Check'
-import Delete from 'vue-material-design-icons/Delete'
-import Eye from 'vue-material-design-icons/Eye'
-import EyeOff from 'vue-material-design-icons/EyeOff'
-import Pulse from 'vue-material-design-icons/Pulse'
-import Tag from 'vue-material-design-icons/Tag'
-import TrendingUp from 'vue-material-design-icons/TrendingUp'
+import AlertBoxOutline from 'vue-material-design-icons/AlertBoxOutline.vue'
+import CalendarRemove from 'vue-material-design-icons/CalendarRemove.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import Eye from 'vue-material-design-icons/Eye.vue'
+import EyeOff from 'vue-material-design-icons/EyeOff.vue'
+import Pulse from 'vue-material-design-icons/Pulse.vue'
+import Tag from 'vue-material-design-icons/Tag.vue'
+import TrendingUp from 'vue-material-design-icons/TrendingUp.vue'
 
 import Vue from 'vue'
 import { sync } from 'vuex-router-sync'
diff --git a/src/mixins/editableItem.js b/src/mixins/editableItem.js
index 58133c0b..a7a05655 100644
--- a/src/mixins/editableItem.js
+++ b/src/mixins/editableItem.js
@@ -21,11 +21,11 @@
  */
 import Task from '../models/task.js'
 
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 
-import Check from 'vue-material-design-icons/Check'
-import Delete from 'vue-material-design-icons/Delete'
+import Check from 'vue-material-design-icons/Check.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
 
 import ClickOutside from 'v-click-outside'
 
diff --git a/src/views/AppContent/Calendar.vue b/src/views/AppContent/Calendar.vue
index d939d6ce..700ec296 100644
--- a/src/views/AppContent/Calendar.vue
+++ b/src/views/AppContent/Calendar.vue
@@ -23,7 +23,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div v-if="calendar">
-		<Header />
+		<HeaderBar />
 		<div class="task-list">
 			<div class="grouped-tasks">
 				<TaskDragContainer :tasks="openRootTasks(calendar.tasks)"
@@ -47,7 +47,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Header from '../../components/Header.vue'
+import HeaderBar from '../../components/HeaderBar.vue'
 import DeleteCompletedModal from '../../components/DeleteCompletedModal.vue'
 import LoadCompletedButton from '../../components/LoadCompletedButton.vue'
 import TaskDragContainer from '../../components/TaskDragContainer.vue'
@@ -59,7 +59,7 @@ import { mapGetters } from 'vuex'
 
 export default {
 	components: {
-		Header,
+		HeaderBar,
 		LoadCompletedButton,
 		TaskDragContainer,
 		DeleteCompletedModal,
diff --git a/src/views/AppContent/General.vue b/src/views/AppContent/General.vue
index 89c6b2f2..7c0c001f 100644
--- a/src/views/AppContent/General.vue
+++ b/src/views/AppContent/General.vue
@@ -22,7 +22,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div>
-		<Header />
+		<HeaderBar />
 		<div class="task-list">
 			<div v-for="calendar in filteredCalendars"
 				:key="calendar.id"
@@ -44,7 +44,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Header from '../../components/Header.vue'
+import HeaderBar from '../../components/HeaderBar.vue'
 import LoadCompletedButton from '../../components/LoadCompletedButton.vue'
 import TaskDragContainer from '../../components/TaskDragContainer.vue'
 import { isTaskInList, isParentInList } from '../../store/storeHelper.js'
@@ -54,7 +54,7 @@ import { mapGetters } from 'vuex'
 
 export default {
 	components: {
-		Header,
+		HeaderBar,
 		LoadCompletedButton,
 		TaskDragContainer,
 	},
diff --git a/src/views/AppContent/Week.vue b/src/views/AppContent/Week.vue
index 3f1dbd44..e05c2592 100644
--- a/src/views/AppContent/Week.vue
+++ b/src/views/AppContent/Week.vue
@@ -22,7 +22,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div>
-		<Header />
+		<HeaderBar />
 		<div class="task-list">
 			<div v-for="day in days"
 				:key="day.diff"
@@ -40,7 +40,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Header from '../../components/Header.vue'
+import HeaderBar from '../../components/HeaderBar.vue'
 import TaskDragContainer from '../../components/TaskDragContainer.vue'
 import { isTaskInList } from '../../store/storeHelper.js'
 import './task-list.scss'
@@ -52,7 +52,7 @@ import { mapGetters } from 'vuex'
 
 export default {
 	components: {
-		Header,
+		HeaderBar,
 		TaskDragContainer,
 	},
 	computed: {
diff --git a/src/views/AppNavigation.vue b/src/views/AppNavigation.vue
index d14d7dd2..dd3169cf 100644
--- a/src/views/AppNavigation.vue
+++ b/src/views/AppNavigation.vue
@@ -101,19 +101,19 @@ import AppNavigationSettings from '../components/AppNavigation/AppNavigationSett
 import Trashbin from '../components/AppNavigation/Trashbin.vue'
 
 import { translate as t } from '@nextcloud/l10n'
-import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
-import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-import CalendarToday from 'vue-material-design-icons/CalendarToday'
-import CalendarWeek from 'vue-material-design-icons/CalendarWeek'
-import Check from 'vue-material-design-icons/Check'
-import CircleOutline from 'vue-material-design-icons/CircleOutline'
-import Plus from 'vue-material-design-icons/Plus'
-import Star from 'vue-material-design-icons/Star'
-import TrendingUp from 'vue-material-design-icons/TrendingUp'
+import CalendarToday from 'vue-material-design-icons/CalendarToday.vue'
+import CalendarWeek from 'vue-material-design-icons/CalendarWeek.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Star from 'vue-material-design-icons/Star.vue'
+import TrendingUp from 'vue-material-design-icons/TrendingUp.vue'
 
 import draggable from 'vuedraggable'
 import ClickOutside from 'v-click-outside'
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index 3e57c1e8..12d91677 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -244,26 +244,26 @@ import Task from '../models/task.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
-import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar'
-import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import { generateUrl } from '@nextcloud/router'
 
-import Calendar from 'vue-material-design-icons/Calendar'
-import CalendarEnd from 'vue-material-design-icons/CalendarEnd'
-import CalendarStart from 'vue-material-design-icons/CalendarStart'
-import Delete from 'vue-material-design-icons/Delete'
-import Download from 'vue-material-design-icons/Download'
-import InformationOutline from 'vue-material-design-icons/InformationOutline'
-import Pencil from 'vue-material-design-icons/Pencil'
-import Percent from 'vue-material-design-icons/Percent'
-import Pin from 'vue-material-design-icons/Pin'
-import PinOff from 'vue-material-design-icons/PinOff'
-import Star from 'vue-material-design-icons/Star'
-import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline'
-import Undo from 'vue-material-design-icons/Undo'
+import Calendar from 'vue-material-design-icons/Calendar.vue'
+import CalendarEnd from 'vue-material-design-icons/CalendarEnd.vue'
+import CalendarStart from 'vue-material-design-icons/CalendarStart.vue'
+import Delete from 'vue-material-design-icons/Delete.vue'
+import Download from 'vue-material-design-icons/Download.vue'
+import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Percent from 'vue-material-design-icons/Percent.vue'
+import Pin from 'vue-material-design-icons/Pin.vue'
+import PinOff from 'vue-material-design-icons/PinOff.vue'
+import Star from 'vue-material-design-icons/Star.vue'
+import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline.vue'
+import Undo from 'vue-material-design-icons/Undo.vue'
 
 import { mapGetters, mapActions } from 'vuex'
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 5a3f229c..d3104ebc 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -75,13 +75,13 @@ import { sort, isTaskInList } from '../store/storeHelper.js'
 
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget'
-import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget.js'
+import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem.js'
 
-import Check from 'vue-material-design-icons/Check'
-import Plus from 'vue-material-design-icons/Plus'
+import Check from 'vue-material-design-icons/Check.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
 
 import { mapGetters, mapActions } from 'vuex'