Update nc vue components to v7

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
2022-09-12 15:42:18 +02:00 · 2022-09-12 15:42:18 +02:00 · 184de87c86
commit 184de87c86
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+const babelConfig = require('@nextcloud/babel-config')
+
+module.exports = babelConfig
--- a/lib/Db/CoreRequestBuilder.php
+++ b/lib/Db/CoreRequestBuilder.php
@ -584,7 +584,7 @@ class CoreRequestBuilder {
 	protected function exprLimitToDBField(
 		IQueryBuilder &$qb, string $field, string $value, bool $eq = true, bool $cs = true,
 		string $alias = ''
-	): IQueryFunction {
+	): string {
 		$expr = $qb->expr();

 		$pf = '';
@ -618,7 +618,7 @@ class CoreRequestBuilder {

 	protected function exprLimitToDBFieldInt(
 		IQueryBuilder &$qb, string $field, int $value, string $alias = ''
-	): IQueryFunction {
+	): string {
 		$expr = $qb->expr();

 		$pf = '';
--- a/lib/Tools/Db/ExtendedQueryBuilder.php
+++ b/lib/Tools/Db/ExtendedQueryBuilder.php
@ -174,7 +174,7 @@ class ExtendedQueryBuilder extends QueryBuilder implements IExtendedQueryBuilder

 	public function exprLimitToDBField(
 		string $field, string $value, bool $eq = true, bool $cs = true, string $alias = ''
-	): IQueryFunction {
+	): string {
 		$expr = $this->expr();

 		$pf = '';
@ -295,7 +295,7 @@ class ExtendedQueryBuilder extends QueryBuilder implements IExtendedQueryBuilder
 	}

 	public function exprLimitToDBFieldInt(string $field, int $value, string $alias = '', bool $eq = true
-	): IQueryFunction {
+	): string {
 		$expr = $this->expr();

 		$pf = '';
--- a/lib/Tools/IExtendedQueryBuilder.php
+++ b/lib/Tools/IExtendedQueryBuilder.php
@ -134,7 +134,7 @@ interface IExtendedQueryBuilder extends IQueryBuilder {

 	public function exprLimitToDBField(
 		string $field, string $value, bool $eq = true, bool $cs = true, string $alias = ''
-	): IQueryFunction;
+	): string;

 	public function limitToDBFieldArray(
 		string $field, array $values, bool $cs = true, string $alias = ''
@ -191,7 +191,7 @@ interface IExtendedQueryBuilder extends IQueryBuilder {
 	 * @param int $value
 	 * @param string $alias
 	 */
-	public function exprLimitToDBFieldInt(string $field, int $value, string $alias = ''): IQueryFunction;
+	public function exprLimitToDBFieldInt(string $field, int $value, string $alias = ''): string;


 	/**
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -17,9 +17,9 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"dev": "NODE_ENV=development webpack --config webpack.dev.js",
-		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
-		"build": "NODE_ENV=production webpack --progress --config webpack.prod.js",
+		"dev": "NODE_ENV=development webpack --config webpack.common.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.common.js",
+		"build": "NODE_ENV=production webpack --progress --config webpack.common.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"test": "jest",
@ -28,26 +28,27 @@
 		"cypress:gui": "cypress open"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.17.9",
-		"@nextcloud/auth": "^1.3.0",
-		"@nextcloud/axios": "^1.9.0",
-		"@nextcloud/initial-state": "^1.2.1",
+		"@nextcloud/auth": "^2.0.0",
+		"@nextcloud/axios": "^2.0.0",
+		"@nextcloud/initial-state": "^2.0.0",
 		"@nextcloud/logger": "^2.2.1",
-		"@nextcloud/moment": "^1.1.1",
+		"@nextcloud/moment": "^1.2.1",
 		"@nextcloud/router": "^1.2.0",
-		"@nextcloud/vue": "^5.3.1",
+		"@nextcloud/stylelint-config": "^2.2.0",
+		"@nextcloud/vue": "^7.0.0-beta.2",
 		"he": "^1.2.0",
 		"linkifyjs": "^2.1.8",
 		"tributejs": "^3.7.3",
 		"twemoji": "12.0.1",
 		"uuid": "^8.3.2",
 		"v-tooltip": "^3.0.0-alpha.21",
-		"vue": "^2.6.14",
+		"vue": "^2.7.10",
 		"vue-click-outside": "^1.0.7",
 		"vue-contenteditable-directive": "^1.2.0",
 		"vue-infinite-loading": "^2.4.4",
 		"vue-material-design-icons": "^5.0.0",
 		"vue-router": "^3.5.3",
+		"vue-template-compiler": "^2.7.10",
 		"vue-tribute": "^1.0.6",
 		"vue-twemoji": "^1.0.1",
 		"vuetrend": "^0.3.4",
@ -55,55 +56,23 @@
 		"vuex-router-sync": "^5.0.0"
 	},
 	"browserslist": [
-		"last 2 versions",
-		"not ie <= 11"
+		"extends @nextcloud/browserslist-config"
 	],
+	"browser": {
+		"fs": false
+	},
 	"engines": {
-		"node": "^14.0.0",
-		"npm": "^7.0.0"
+		"node": "^16.0.0",
+		"npm": "^7.0.0 || ^8.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.17.9",
-		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.18.10",
+		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^2.2.0",
 		"@nextcloud/eslint-config": "^8.0.0",
-		"@nextcloud/eslint-plugin": "^1.5.0",
-		"@vue/test-utils": "^1.1.3",
-		"acorn": "^8.1.0",
-		"babel-eslint": "^10.0.3",
-		"babel-jest": "^28.1.2",
-		"babel-loader": "^8.2.5",
-		"css-loader": "^5.2.7",
-		"cypress": "^9.6.1",
-		"cypress-image-snapshot": "^4.0.1",
-		"cypress-testing-library": "^4.0.0",
-		"eslint": "^6.8.0",
-		"eslint-config-standard": "^12.0.0",
-		"eslint-friendly-formatter": "^4.0.1",
-		"eslint-loader": "^3.0.2",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-promise": "^4.3.1",
-		"eslint-plugin-standard": "^5.0.0",
-		"eslint-plugin-vue": "^6.2.2",
-		"file-loader": "^6.2.0",
+		"@nextcloud/webpack-vue-config": "^5.3.0",
 		"jest": "^26.6.3",
 		"jest-serializer-vue": "^2.0.2",
-		"node-sass": "^5.0.0",
-		"prettier-eslint": "^14.0.3",
-		"raw-loader": "^4.0.2",
-		"sass-loader": "^10.1.1",
-		"style-loader": "^2.0.0",
-		"stylelint": "^8.4.0",
-		"stylelint-config-recommended-scss": "^3.3.0",
-		"stylelint-webpack-plugin": "^0.10.5",
-		"vue-jest": "^3.0.7",
-		"vue-loader": "^15.9.6",
-		"vue-template-compiler": "^2.6.14",
-		"webpack": "^4.46.0",
-		"webpack-cli": "^4.9.2",
-		"webpack-merge": "^5.8.0"
+		"prettier-eslint": "^14.0.3"
 	},
 	"jest": {
 		"moduleFileExtensions": [
--- a/src/App.vue
+++ b/src/App.vue
@ -1,14 +1,14 @@
 <template>
-	<Content v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}">
-		<AppNavigation v-if="!serverData.public">
-			<AppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to"
+	<NcContent v-if="!serverData.setup" app-name="social" :class="{public: serverData.public}">
+		<NcAppNavigation v-if="!serverData.public">
+			<NcAppNavigationItem v-for="item in menu.items" :key="item.key" :to="item.to"
 				:title="item.title" :exact="true">
 				<template #icon>
 					<component :is="item.icon" />
 				</template>
-			</AppNavigationItem>
-		</AppNavigation>
-		<AppContent>
+			</NcAppNavigationItem>
+		</NcAppNavigation>
+		<NcAppContent>
 			<div v-if="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper">
 				<h3 v-if="!serverData.checks.checks.wellknown">
 					{{ t('social', '.well-known/webfinger isn\'t properly set up!') }}
@ -24,10 +24,10 @@
 			</div>
 			<Search v-if="searchTerm !== ''" :term="searchTerm" />
 			<router-view v-if="searchTerm === ''" :key="$route.fullPath" />
-		</AppContent>
-	</Content>
-	<Content v-else app-name="social">
-		<AppContent v-if="serverData.isAdmin" class="setup">
+		</NcAppContent>
+	</NcContent>
+	<NcContent v-else app-name="social">
+		<NcAppContent v-if="serverData.isAdmin" class="setup">
 			<h2>{{ t('social', 'Social app setup') }}</h2>
 			<p>{{ t('social', 'ActivityPub requires a fixed URL to make entries unique. Note that this cannot be changed later without resetting the Social app.') }}</p>
 			<form @submit.prevent="setCloudAddress">
@ -55,47 +55,18 @@
 					</p>
 				</template>
 			</form>
-		</AppContent>
-		<AppContent v-else class="setup">
+		</NcAppContent>
+		<NcAppContent v-else class="setup">
 			<p>{{ t('social', 'The Social app needs to be set up by the server administrator.') }}</p>
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>

-<style scoped>
-	#app-content-vue .social__wrapper {
-		padding: 15px;
-		max-width: 630px;
-		margin: auto;
-	}
-
-	.setup {
-		margin: 0 auto !important;
-		padding: 15px;
-		max-width: 630px;
-	}
-
-	.setup input[type=url] {
-		width: 300px;
-		max-width: 100%;
-	}
-
-	#social-spacer a:hover,
-	#social-spacer a:focus {
-		border: none !important;
-	}
-
-	a.external_link {
-		text-decoration: underline;
-	}
-
-</style>
-
 <script>
-import Content from '@nextcloud/vue/dist/Components/Content'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'

 import Home from 'vue-material-design-icons/Home.vue'
 import CommentAccount from 'vue-material-design-icons/CommentAccount.vue'
@ -107,17 +78,17 @@ import Earth from 'vue-material-design-icons/Earth.vue'

 import axios from '@nextcloud/axios'
 import Search from './components/Search.vue'
-import currentuserMixin from './mixins/currentUserMixin'
+import currentuserMixin from './mixins/currentUserMixin.js'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'

 export default {
 	name: 'App',
 	components: {
-		Content,
-		AppContent,
-		AppNavigation,
-		AppNavigationItem,
+		NcContent,
+		NcAppContent,
+		NcAppNavigation,
+		NcAppNavigationItem,
 		Search,
 	},
 	mixins: [currentuserMixin],
@ -258,3 +229,32 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+	#app-content-vue .social__wrapper {
+		padding: 15px;
+		max-width: 630px;
+		margin: auto;
+	}
+
+	.setup {
+		margin: 0 auto !important;
+		padding: 15px;
+		max-width: 630px;
+	}
+
+	.setup input[type=url] {
+		width: 300px;
+		max-width: 100%;
+	}
+
+	#social-spacer a:hover,
+	#social-spacer a:focus {
+		border: none !important;
+	}
+
+	a.external_link {
+		text-decoration: underline;
+	}
+
+</style>
--- a/src/components/ActorAvatar.vue
+++ b/src/components/ActorAvatar.vue
@ -21,20 +21,20 @@
  -->

 <template>
-	<avatar v-if="actor.local" :size="size" :user="actor.preferredUsername"
+	<NcAvatar v-if="actor.local" :size="size" :user="actor.preferredUsername"
 		:display-name="actor.account" :disable-tooltip="true" />
-	<avatar v-else :size="size" :url="avatarUrl"
+	<NcAvatar v-else :size="size" :url="avatarUrl"
 		:disable-tooltip="true" />
 </template>

 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import { generateUrl } from '@nextcloud/router'

 export default {
 	name: 'ActorAvatar',
 	components: {
-		Avatar
+		NcAvatar
 	},
 	props: {
 		actor: { type: Object, default: () => {} },
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@ -32,7 +32,7 @@
 			aria-hidden="true"
 			class="hidden-visually">
 		<div class="new-post-author">
-			<avatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
+			<NcAvatar :user="currentUser.uid" :display-name="currentUser.displayName" :disable-tooltip="true"
 				:size="32" />
 			<div class="post-author">
 				<span class="post-author-name">
@ -65,14 +65,14 @@
 			<PreviewGrid :uploading="false" :uploadProgress="0.4" :miniatures="previewUrls" />

 			<div class="options">
-				<Button type="tertiary"
+				<NcButton type="tertiary"
 					@click.prevent="clickImportInput"
 					:aria-label="t('social', 'Add attachment')"
 					v-tooltip="t('social', 'Add attachment')">
 					<template #icon>
 						<FileUpload :size="22" decorative title="" />
 					</template>
-				</Button>
+				</NcButton>

 				<div class="new-post-form__emoji-picker">
 					<EmojiPicker ref="emojiPicker" :search="search" :close-on-select="false"
@ -100,13 +100,13 @@
 				</div>

 				<div class="emptySpace" />
-				<Button :value="currentVisibilityPostLabel" :disabled="!canPost" type="primary"
+				<NcButton :value="currentVisibilityPostLabel" :disabled="!canPost" type="primary"
 					@click.prevent="createPost">
 					<template #icon>
 						<Send title="" :size="22" decorative />
 					</template>
 					<template>{{ postTo }}</template>
-				</button>
+				</NcButton>
 			</div>
 		</form>
 	</div>
@ -114,33 +114,33 @@

 <script>

-import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline'
-import Send from 'vue-material-design-icons/Send'
-import FileUpload from 'vue-material-design-icons/FileUpload'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
+import Send from 'vue-material-design-icons/Send.vue'
+import FileUpload from 'vue-material-design-icons/FileUpload.vue'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import VueTribute from 'vue-tribute'
 import he from 'he'
-import CurrentUserMixin from '../../mixins/currentUserMixin'
-import FocusOnCreate from '../../directives/focusOnCreate'
+import CurrentUserMixin from '../../mixins/currentUserMixin.js'
+import FocusOnCreate from '../../directives/focusOnCreate.js'
 import axios from '@nextcloud/axios'
 import ActorAvatar from '../ActorAvatar.vue'
 import { generateUrl } from '@nextcloud/router'
-import PreviewGrid from './PreviewGrid'
+import PreviewGrid from './PreviewGrid.vue'

 export default {
 	name: 'Composer',
 	components: {
-		PopoverMenu,
-		Avatar,
+		NcPopoverMenu,
+		NcAvatar,
+		NcActorAvatar,
+		NcEmojiPicker,
+		NcButton,
 		FileUpload,
-		ActorAvatar,
-		EmojiPicker,
 		VueTribute,
 		EmoticonOutline,
-		Button,
 		Send,
 		PreviewGrid,
 	},
--- a/src/components/Composer/PreviewGridItem.vue
+++ b/src/components/Composer/PreviewGridItem.vue
@ -2,51 +2,51 @@
 	<div class="preview-item-wrapper">
 		<div class="preview-item" :style="backgroundStyle">
 			<div class="preview-item__actions">
-				<Button type="tertiary-no-background" @click="$emit('delete', index)">
+				<NcButton type="tertiary-no-background" @click="$emit('delete', index)">
 					<template #icon>
 						<Close :size="16" fillColor="white" />
 					</template>
 					<span>{{ t('social', 'Delete') }}</span>
-				</Button>
-				<Button type="tertiary-no-background" @click="showModal">
+				</NcButton>
+				<NcButton type="tertiary-no-background" @click="showModal">
 					<template #icon>
 						<Edit :size="16" fillColor="white" />
 					</template>
 					<span>{{ t('social', 'Edit') }}</span>
-				</Button>
+				</NcButton>
 			</div>

 			<div class="description-warning" v-if="preview.description.length === 0">
 				{{ t('social', 'No description added') }}
 			</div>

-			<Modal v-if="modal" @close="closeModal" size="small">
+			<NcModal v-if="modal" @close="closeModal" size="small">
 				<div class="modal__content">
 					<label :for="`image-description-${index}`">
 						{{ t('social', 'Describe for the visually impaired') }}
 					</label>
 					<textarea :id="`image-description-${index}`" v-model="preview.description">
 					</textarea>
-					<Button type="primary" @click="closeModal">{{ t('social', 'Close') }}</Button>
+					<NcButton type="primary" @click="closeModal">{{ t('social', 'Close') }}</NcButton>
 				</div>
-			</Modal>
+			</NcModal>
 		</div>
 	</div>
 </template>

 <script>
-import Close from 'vue-material-design-icons/Close'
-import Edit from 'vue-material-design-icons/Pencil'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import Close from 'vue-material-design-icons/Close.vue'
+import Edit from 'vue-material-design-icons/Pencil.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'

 export default {
 	name: 'PreviewGridItem',
 	components: {
 		Close,
 		Edit,
-		Button,
-		Modal,
+		NcButton,
+		NcModal,
 	},
 	data() {
 		return {
--- a/src/components/FollowButton.vue
+++ b/src/components/FollowButton.vue
@ -36,8 +36,8 @@
 </template>

 <script>
-import accountMixins from '../mixins/accountMixins'
-import currentUser from '../mixins/currentUserMixin'
+import accountMixins from '../mixins/accountMixins.js'
+import currentUser from '../mixins/currentUserMixin.js'

 export default {
 	name: 'FollowButton',
--- a/src/components/PostAttachment.vue
+++ b/src/components/PostAttachment.vue
@ -3,26 +3,26 @@
 		<div v-for="(item, index) in attachments" :key="index">
 			<img :src="imageUrl(item)" @click="showModal(index)">
 		</div>
-		<modal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
+		<NcModal v-show="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
 			size="full" @close="closeModal" @previous="showPrevious"
 			@next="showNext">
 			<div class="modal__content">
 				<canvas ref="modalCanvas" />
 			</div>
-		</modal>
+		</NcModal>
 	</masonry>
 </template>

 <script>

-import serverData from '../mixins/serverData'
-import Modal from '@nextcloud/vue/dist/Components/Modal'
+import serverData from '../mixins/serverData.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import { generateUrl } from '@nextcloud/router'

 export default {
 	name: 'PostAttachment',
 	components: {
-		Modal
+		NcModal
 	},
 	mixins: [
 		serverData
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@ -22,9 +22,9 @@

 <template>
 	<div v-if="profileAccount && accountInfo" class="user-profile">
-		<avatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
+		<NcAvatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
 			:size="128" />
-		<avatar v-else :url="avatarUrl" :disable-tooltip="true"
+		<NcAvatar v-else :url="avatarUrl" :disable-tooltip="true"
 			:size="128" />
 		<h2>{{ displayName }}</h2>
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
@ -52,16 +52,17 @@
 			</a>
 		</p>
 		<follow-button :account="accountInfo.account" :uid="uid" />
-		<button v-if="serverData.public" class="primary" @click="followRemote">
+		<NcButton v-if="serverData.public" class="primary" @click="followRemote">
 			{{ t('social', 'Follow') }}
-		</button>
+		</NcButton>
 	</div>
 </template>
+
 <style scoped>
 	.user-profile {
 		display: flex;
 		flex-wrap: wrap;
-    flex-direction: column;
+		flex-direction: column;
 		justify-content: space-between;
 		width: 100%;
 		text-align: center;
@ -94,11 +95,12 @@
 	}
 </style>
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import accountMixins from '../mixins/accountMixins'
-import serverData from '../mixins/serverData'
-import currentUser from '../mixins/currentUserMixin'
-import follow from '../mixins/follow'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import accountMixins from '../mixins/accountMixins.js'
+import serverData from '../mixins/serverData.js'
+import currentUser from '../mixins/currentUserMixin.js'
+import follow from '../mixins/follow.js'
 import FollowButton from './FollowButton.vue'
 import { generateUrl } from '@nextcloud/router'

@ -106,7 +108,8 @@ export default {
 	name: 'ProfileInfo',
 	components: {
 		FollowButton,
-		Avatar
+		NcAvatar,
+		NcButton,
 	},
 	mixins: [
 		accountMixins,
--- a/src/components/TimelineAvatar.vue
+++ b/src/components/TimelineAvatar.vue
@ -1,25 +1,25 @@
 <template>
 	<div v-if="item.actor_info" class="post-avatar">
-		<Avatar v-if="item.local"
+		<NcAvatar v-if="item.local"
 			class="messages__avatar__icon"
 			:show-user-status="false"
 			menu-position="left"
 			:user="userTest"
 			:display-name="item.actor_info.account"
 			:disable-tooltip="true" />
-		<Avatar v-else
+		<NcAvatar v-else
 			:url="avatarUrl"
 			:disable-tooltip="true" />
 	</div>
 </template>

 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'

 export default {
 	name: 'TimelineAvatar',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		item: {
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@ -58,7 +58,7 @@
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
 import TimelineEntry from './TimelineEntry.vue'
-import CurrentUserMixin from './../mixins/currentUserMixin'
+import CurrentUserMixin from './../mixins/currentUserMixin.js'
 import EmptyContent from './EmptyContent.vue'
 import Logger from '../logger.js'

@ -73,7 +73,7 @@ export default {
 	props: {
 		type: { type: String, default: () => 'home' }
 	},
-	data: function() {
+	data() {
 		return {
 			infoHidden: false,
 			state: [],
--- a/src/components/TimelinePost.vue
+++ b/src/components/TimelinePost.vue
@ -33,43 +33,43 @@
 			<post-attachment :attachments="item.attachment" />
 		</div>
 		<div v-if="this.$route.params.type !== 'notifications' && !serverData.public" class="post-actions">
-			<Button type="tertiary-no-background"
+			<NcButton type="tertiary-no-background"
 				v-tooltip="t('social', 'Reply')"
 				@click="reply">
 				<template #icon>
 					<Reply :size="20" />
 				</template>
-			</Button>
-			<Button type="tertiary-no-background"
+			</NcButton>
+			<NcButton type="tertiary-no-background"
 				v-tooltip="t('social', 'Boost')"
 				@click="boost">
 				<template #icon>
 					<Repeat :size="20" :fill-color="isBoosted ? 'blue' : 'black'" />
 				</template>
-			</Button>
-			<Button v-if="!isLiked"
+			</NcButton>
+			<NcButton v-if="!isLiked"
 				type="tertiary-no-background"
 				v-tooltip="t('social', 'Like')"
 				@click="like">
 				<template #icon>
 					<HeartOutline :size="20" />
 				</template>
-			</Button>
-			<Button v-if="isLiked"
+			</NcButton>
+			<NcButton v-if="isLiked"
 				type="tertiary-no-background"
 				v-tooltip="t('social', 'Undo Like')"
 				@click="like">
 				<template #icon>
 					<Heart :size="20" :fill-color="'var(--color-error)'" />
 				</template>
-			</Button>
-			<Actions>
-				<ActionButton v-if="item.actor_info.account === cloudId"
+			</NcButton>
+			<NcActions>
+				<NcActionButton v-if="item.actor_info.account === cloudId"
 					@click="remove()"
 					icon="icon-delete">
 					{{ t('social', 'Delete') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</div>
 </template>
@ -80,9 +80,9 @@ import pluginMention from 'linkifyjs/plugins/mention'
 import 'linkifyjs/string'
 import currentUser from './../mixins/currentUserMixin'
 import PostAttachment from './PostAttachment.vue'
-import Button from '@nextcloud/vue/dist/Components/Button'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import Repeat from 'vue-material-design-icons/Repeat.vue'
 import Reply from 'vue-material-design-icons/Reply.vue'
 import Heart from 'vue-material-design-icons/Heart.vue'
--- a/src/components/UserEntry.vue
+++ b/src/components/UserEntry.vue
@ -24,9 +24,9 @@
 	<div v-if="item" class="user-entry">
 		<div class="entry-content">
 			<div class="user-avatar">
-				<avatar v-if="item.local" :size="32" :user="item.preferredUsername"
+				<NcAvatar v-if="item.local" :size="32" :user="item.preferredUsername"
 					:disable-tooltip="true" />
-				<avatar v-else :url="avatarUrl" />
+				<NcAvatar v-else :url="avatarUrl" />
 			</div>
 			<div class="user-details">
 				<router-link v-if="!serverData.public" :to="{ name: 'profile', params: { account: item.local ? item.preferredUsername : item.account }}">
@ -55,9 +55,9 @@
 </template>

 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
-import follow from '../mixins/follow'
-import currentUser from '../mixins/currentUserMixin'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import follow from '../mixins/follow.js'
+import currentUser from '../mixins/currentUserMixin.js'
 import FollowButton from './FollowButton.vue'
 import { generateUrl } from '@nextcloud/router'

@ -65,7 +65,7 @@ export default {
 	name: 'UserEntry',
 	components: {
 		FollowButton,
-		Avatar
+		NcAvatar,
 	},
 	mixins: [
 		follow,
--- a/src/views/OStatus.vue
+++ b/src/views/OStatus.vue
@ -7,7 +7,7 @@
 				{{ t('social', 'Please confirm that you want to follow this account:') }}
 			</p>

-			<avatar :url="avatarUrl" :disable-tooltip="true" :size="128" />
+			<NcAvatar :url="avatarUrl" :disable-tooltip="true" :size="128" />
 			<h2>{{ displayName }}</h2>
 			<form v-if="!isFollowing" @submit.prevent="follow">
 				<input type="submit" class="primary" value="Follow">
@ -18,15 +18,15 @@
 			</p>

 			<div v-if="isFollowing">
-				<button @click="close">
+				<NcButton @click="close">
 					{{ t('social', 'Close') }}
-				</button>
+				</NcButton>
 			</div>
 		</div>
 		<!-- Some unauthenticated user wants to follow a local account -->
 		<div v-if="serverData.local">
 			<p>{{ t('social', 'You are going to follow:') }}</p>
-			<avatar :user="serverData.local" :disable-tooltip="true" :size="128" />
+			<NcAvatar :user="serverData.local" :disable-tooltip="true" :size="128" />
 			<h2>{{ displayName }}</h2>
 			<form @submit.prevent="followRemote">
 				<input v-model="remote" type="text" :placeholder="t('social', 'name@domain of your federation account')">
@ -61,17 +61,17 @@
 </style>

 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import axios from '@nextcloud/axios'
-import accountMixins from '../mixins/accountMixins'
-import currentuserMixin from '../mixins/currentUserMixin'
+import accountMixins from '../mixins/accountMixins.js'
+import currentuserMixin from '../mixins/currentUserMixin.js'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'

 export default {
 	name: 'App',
 	components: {
-		Avatar
+		NcAvatar,
 	},
 	mixins: [
 		accountMixins,
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@ -25,7 +25,15 @@
 		<profile-info v-if="accountLoaded && accountInfo" :uid="uid" />
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
 		<router-view v-if="accountLoaded && accountInfo && accountInfo.local" name="details" />
-		<empty-content v-if="accountLoaded && !accountInfo" :item="emptyContentData" />
+		<NcEmptyContent v-if="accountLoaded && !accountInfo"
+			:title="t('social', 'User not found')"
+			:description="t('social', 'Sorry, we could not find the account of {userId}', { userId: this.uid })">
+			<template #icon>
+				<img :src="emptyContentImage"
+					class="icon-illustration"
+					alt="">
+			</template>
+		</NcEmptyContent>
 	</div>
 </template>

@ -39,14 +47,15 @@

 <script>
 import ProfileInfo from './../components/ProfileInfo.vue'
-import EmptyContent from '../components/EmptyContent.vue'
-import accountMixins from '../mixins/accountMixins'
-import serverData from '../mixins/serverData'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import accountMixins from '../mixins/accountMixins.js'
+import serverData from '../mixins/serverData.js'
+import { generateFilePath } from '@nextcloud/router'

 export default {
 	name: 'Profile',
 	components: {
-		EmptyContent,
+		NcEmptyContent,
 		ProfileInfo
 	},
 	mixins: [
@ -63,13 +72,9 @@ export default {
 		timeline: function() {
 			return this.$store.getters.getTimeline
 		},
-		emptyContentData() {
-			return {
-				image: 'img/undraw/profile.svg',
-				title: t('social', 'User not found'),
-				description: t('social', 'Sorry, we could not find the account of {userId}', { userId: this.uid })
-			}
-		}
+		emptyContentImage() {
+			return generateFilePath('social', 'img', 'undraw/profile.svg')
+		},
 	},
 	// Start fetching account information before mounting the component
 	beforeMount() {
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@ -93,8 +93,8 @@

 <script>
 import Composer from './../components/Composer/Composer.vue'
-import CurrentUserMixin from './../mixins/currentUserMixin'
-import follow from './../mixins/follow'
+import CurrentUserMixin from './../mixins/currentUserMixin.js'
+import follow from './../mixins/follow.js'
 import TimelineList from './../components/TimelineList.vue'

 export default {
--- a/src/views/TimelineSinglePost.vue
+++ b/src/views/TimelineSinglePost.vue
@ -25,9 +25,9 @@ import Composer from '../components/Composer/Composer.vue'
 import ProfileInfo from '../components/ProfileInfo.vue'
 import TimelineEntry from '../components/TimelineEntry.vue'
 import TimelineList from '../components/TimelineList.vue'
-import currentUserMixin from '../mixins/currentUserMixin'
-import accountMixins from '../mixins/accountMixins'
-import serverData from '../mixins/serverData'
+import currentUserMixin from '../mixins/currentUserMixin.js'
+import accountMixins from '../mixins/accountMixins.js'
+import serverData from '../mixins/serverData.js'
 import { loadState } from '@nextcloud/initial-state'

 export default {
--- a/webpack.common.js
+++ b/webpack.common.js
@ -1,56 +1,12 @@
+// SPDX-FileCopyrigthText: 2022 Carl Schwan <carl@carlschwan.eu>
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const webpackConfig = require('@nextcloud/webpack-vue-config')

+webpackConfig.entry = {
+	social: path.join(__dirname, 'src', 'main.js'),
+	ostatus: path.join(__dirname, 'src', 'ostatus.js'),
+}

-module.exports = {
-	entry: {
-		social: path.join(__dirname, 'src', 'main.js'),
-		ostatus: path.join(__dirname, 'src', 'ostatus.js'),
-	},
-	output: {
-		path: path.resolve(__dirname, './js'),
-		publicPath: '/js/',
-		filename: '[name].js',
-		chunkFilename: '[name].[chunkhash].js'
-	},
-	module: {
-		rules: [
-			{
-				test: /\.css$/,
-				use: [
-					'style-loader',
-					'css-loader'
-				]
-			},
-			{
-				test: /\.scss$/,
-				use: [
-					'style-loader',
-					'css-loader',
-					'sass-loader'
-				]
-			},
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader'
-			},
-			{
-				test: /\.js$/,
-				loader: 'babel-loader',
-				exclude: /node_modules/
-			},
-			{
-				test: /\.(png|jpg|gif|svg)$/,
-				loader: 'file-loader',
-				options: {
-					name: '[name].[ext]?[hash]'
-				}
-			}
-		]
-	},
-	plugins: [new VueLoaderPlugin()],
-	resolve: {
-		extensions: ['*', '.js', '.vue'],
-		symlinks: false
-	}
-};
+module.exports = webpackConfig