diff --git a/.eslintrc.js b/.eslintrc.js
index 4e9065badf..6ec5569256 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,5 +21,8 @@ module.exports = {
 		'jsdoc/check-values': 'off',
 		'jsdoc/valid-types': 'off',
 		'jsdoc/no-undefined-types': 'off',
+		'jsdoc/require-param-description': 'off',
+		'jsdoc/require-param-type': 'off',
+		'jsdoc/require-property-description': 'off',
 	}
 }
diff --git a/cypress/e2e/integration.spec.js b/cypress/e2e/integration.spec.js
index 2a17f945fd..f477aec94d 100644
--- a/cypress/e2e/integration.spec.js
+++ b/cypress/e2e/integration.spec.js
@@ -83,12 +83,12 @@ describe('Nextcloud integration', function() {
 			cy.get('#w2ui-overlay-download-as-menu .menu-text').eq(1).click()
 		})
 
-		cy.get('.oc-dialog').should('be.visible')
-		cy.get('.oc-dialog input[type=text]')
+		cy.get('.saveas-dialog').should('be.visible')
+		cy.get('.saveas-dialog input[type=text]')
 			.should('be.visible')
-			.should('have.value', 'document.rtf')
+			.should('have.value', '/document.rtf')
 
-		cy.get('.oc-dialog button.primary').click()
+		cy.get('.saveas-dialog button.button-vue--vue-primary').click()
 
 		cy.get('@loleafletframe').within(() => {
 			cy.get('#closebutton').click()
diff --git a/src/admin.js b/src/admin.js
index 77251424d3..66a141c65a 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -1,4 +1,6 @@
+import './init-shared.js'
 import Vue from 'vue'
+import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import AdminSettings from './components/AdminSettings.vue'
 import '../css/admin.scss'
@@ -59,11 +61,8 @@ function deleteTemplate(event) {
 		elmt.classList.remove('icon-delete')
 
 		// send request
-		$.ajax({
-			url: remote,
-			type: 'DELETE',
-		})
-			.done(function() {
+		axios.delete(remote)
+			.then(function() {
 			// remove template
 				elmt.parentElement.remove()
 				// is list empty? Only the default template is left
@@ -72,7 +71,7 @@ function deleteTemplate(event) {
 					emptyElmt.classList.remove('hidden')
 				}
 			})
-			.fail(function(e) {
+			.catch(function(e) {
 			// failure, show warning
 				elmt.textContent = t('richdocuments', 'Error')
 				elmt.classList.remove('icon-loading')
@@ -139,6 +138,6 @@ function initTemplateManager() {
 	})
 }
 
-$(document).ready(function() {
+document.addEventListener('DOMContentLoaded', () => {
 	initTemplateManager()
 })
diff --git a/src/components/Modal/Confirmation.vue b/src/components/Modal/Confirmation.vue
new file mode 100644
index 0000000000..691c220d6d
--- /dev/null
+++ b/src/components/Modal/Confirmation.vue
@@ -0,0 +1,77 @@
+<template>
+	<NcModal>
+		<div class="confirmation-dialog">
+			<h1>{{ name }}</h1>
+			<p>{{ description }}</p>
+			<div class="confirmation-dialog--buttons">
+				<NcButton type="secondary"
+					@click="() => close(false)">
+					{{ cancelButtonText }}
+				</NcButton>
+				<NcButton type="primary"
+					@click="() => close(true)">
+					{{ confirmButtonText }}
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+<script>
+import { NcButton, NcModal } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
+
+export default {
+	name: 'Confirmation',
+	components: {
+		NcButton,
+		NcModal,
+	},
+	props: {
+		name: {
+			type: String,
+			default: '',
+		},
+		description: {
+			type: String,
+			default: '',
+		},
+		confirmButtonText: {
+			type: String,
+			default: t('richdocuments', 'Confirm'),
+		},
+		cancelButtonText: {
+			type: String,
+			default: t('richdocuments', 'Cancel'),
+		},
+	},
+	emits: ['close'],
+	methods: {
+		t,
+		close(result) {
+			this.$emit('close', result)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.confirmation-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 24px;
+    h1 {
+        font-size: 120%;
+        font-weight: bold;
+        margin-bottom: 12px;
+    }
+
+    &--buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 24px;
+    }
+}
+</style>
diff --git a/src/components/Modal/SaveAs.vue b/src/components/Modal/SaveAs.vue
new file mode 100644
index 0000000000..9366b7d7e0
--- /dev/null
+++ b/src/components/Modal/SaveAs.vue
@@ -0,0 +1,149 @@
+<!--
+  - @copyright Copyright (c) 2023 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<NcModal>
+		<div class="saveas-dialog">
+			<h1>{{ name }}</h1>
+			<p>{{ description }}</p>
+			<NcTextField ref="nameInput"
+				v-model="newFileName"
+				:label-visible="true"
+				:label="t('richdocuments', 'Path to save')"
+				:placeholder="'/path/to/save'" />
+			<div class="saveas-dialog--buttons">
+				<NcButton type="secondary"
+					@click="cancel">
+					{{ t('richdocuments', 'Cancel') }}
+				</NcButton>
+				<NcButton type="primary"
+					@click="close">
+					{{ t('richdocuments', 'Save') }}
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+
+import { NcModal, NcButton, NcTextField } from '@nextcloud/vue'
+export default {
+	name: 'SaveAs',
+	components: {
+		NcModal,
+		NcButton,
+		NcTextField,
+	},
+	props: {
+		name: {
+			type: String,
+			default: t('richdocuments', 'Save As'),
+		},
+		description: {
+			type: String,
+			default: '',
+		},
+		buttonText: {
+			type: String,
+			default: t('richdocuments', 'Save'),
+		},
+		path: {
+			type: String,
+			default: '',
+		},
+		format: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: ['close'],
+	data() {
+		return {
+			selectedPath: '',
+		}
+	},
+	computed: {
+		newFileName: {
+			get() {
+				if (this.selectedPath !== '') {
+					return this.selectedPath
+				}
+				const filename = this.path
+				const extension = filename.split('.').pop()
+				const filenameWithoutExtension = filename.substring(0, filename.length - extension.length - 1)
+				return filenameWithoutExtension + '.' + (this.format !== '' ? this.format : extension)
+			},
+			set(event) {
+				this.selectedPath = event.target.value
+			},
+		},
+	},
+	mounted() {
+		// prepare filename for having a separate picker for the path (.split('/').pop())
+		const filename = this.path
+		const extension = filename.split('.').pop()
+		const filenameWithoutExtension = filename.substring(0, filename.length - extension.length - 1)
+		this.$nextTick(() => {
+			const input = this.$refs.nameInput.$refs.inputField.$el.querySelector('input')
+			input.setSelectionRange(0, filenameWithoutExtension.length)
+			input.focus()
+		})
+	},
+	methods: {
+		t,
+		close() {
+			this.$emit('close', this.newFileName)
+		},
+		cancel() {
+			this.$emit('close', null)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.saveas-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 24px;
+
+	h1 {
+        font-size: 120%;
+        font-weight: bold;
+        margin-bottom: 12px;
+    }
+
+	p {
+		margin-bottom: 12px;
+	}
+
+    &--buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 24px;
+    }
+}
+</style>
diff --git a/src/document.js b/src/document.js
index fdd8901b62..d45c2323bc 100644
--- a/src/document.js
+++ b/src/document.js
@@ -1,5 +1,5 @@
+import './init-shared.js'
 import { emit } from '@nextcloud/event-bus'
-import { encodePath } from '@nextcloud/paths'
 import { generateOcsUrl, getRootUrl, imagePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
@@ -18,6 +18,8 @@ import { getWopiUrl, getSearchParam, getNextcloudUrl } from './helpers/url.js'
 
 import '../css/document.scss'
 import axios from '@nextcloud/axios'
+import { spawnDialog } from '@nextcloud/dialogs'
+import SaveAs from './components/Modal/SaveAs.vue'
 
 const PostMessages = new PostMessageService({
 	parent: window.parent,
@@ -472,13 +474,6 @@ const documentsMain = {
 					case 'File_Rename':
 						documentsMain.fileName = args.NewName
 						break
-					case 'Clicked_Button':
-						if (parsed.args.Id === 'Open_Local_Editor') {
-							documentsMain.UI.initiateOpenLocally()
-						} else {
-							console.debug('[document] Unhandled `Clicked_Button` post message', parsed)
-						}
-						break
 					case 'Views_List':
 						documentsMain.users = []
 						parsed.args.forEach((view) => {
@@ -505,30 +500,14 @@ const documentsMain = {
 					}
 
 					if (msgId === 'UI_SaveAs') {
-						// TODO Move to file picker dialog with input field
-						OC.dialogs.prompt(
-							t('richdocuments', 'Please enter the filename to store the document as.'),
-							t('richdocuments', 'Save As'),
-							function(result, value) {
-								if (result === true && value) {
-									PostMessages.sendWOPIPostMessage('loolframe', 'Action_SaveAs', { Filename: value, Notify: true })
-								}
+						spawnDialog(
+							SaveAs,
+							{
+								path: documentsMain.filename,
+								format: args.Format,
 							},
-							true,
-							t('richdocuments', 'New filename'),
-							false,
-						).then(function() {
-							const $dialog = $('.oc-dialog:visible')
-							const $buttons = $dialog.find('.oc-dialog-buttonrow button')
-							$buttons.eq(0).text(t('richdocuments', 'Cancel'))
-							$buttons.eq(1).text(t('richdocuments', 'Save'))
-							const nameInput = $dialog.find('input')[0]
-							nameInput.style.minWidth = '250px'
-							nameInput.style.maxWidth = '400px'
-							nameInput.value = args.format ? documentsMain.fileName.substring(0, documentsMain.fileName.lastIndexOf('.') + 1) + args.format : documentsMain.fileName
-							nameInput.selectionStart = 0
-							nameInput.selectionEnd = documentsMain.fileName.lastIndexOf('.')
-						})
+							(value) => value && this.sendPostMessage('Action_SaveAs', { Filename: value, Notify: true }),
+						)
 					} else if (msgId === 'Action_Save_Resp') {
 						if (args.success && args.fileName) {
 							documentsMain.fileName = args.fileName
@@ -559,26 +538,6 @@ const documentsMain = {
 			})
 		},
 
-		initiateOpenLocally() {
-			OC.dialogs.confirmDestructive(
-				t('richdocuments', 'When opening a file locally, the document will close for all users currently viewing the document.'),
-				t('richdocuments', 'Open file locally'),
-				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('richdocuments', 'Open locally'),
-					confirmClasses: 'error',
-					cancel: t('richdocuments', 'Continue editing online'),
-				},
-				(decision) => {
-					if (!decision) {
-						return
-					}
-					documentsMain.openingLocally = true
-					PostMessages.sendWOPIPostMessage('loolframe', 'Get_Views')
-				},
-			)
-		},
-
 		removeViews(views) {
 			PostMessages.sendWOPIPostMessage('loolframe', 'Action_Save', {
 				DontTerminateEdit: false,
@@ -600,43 +559,6 @@ const documentsMain = {
 		return axios.post(unlockUrl, { access_token: documentsMain.token }, unlockConfig)
 	},
 
-	openLocally() {
-		if (documentsMain.openingLocally) {
-			documentsMain.openingLocally = false
-
-			axios.post(
-				OC.linkToOCS('apps/files/api/v1', 2) + 'openlocaleditor?format=json',
-				{ path: documentsMain.fullPath },
-			).then((result) => {
-				const url = 'nc://open/'
-					+ Config.get('userId') + '@' + getNextcloudUrl()
-					+ encodePath(documentsMain.fullPath)
-					+ '?token=' + result.data.ocs.data.token
-
-				this.showOpenLocalConfirmation(url, window.top)
-				window.location.href = url
-			})
-		}
-	},
-
-	showOpenLocalConfirmation(url, _window) {
-		_window.OC.dialogs.confirmDestructive(
-			t('richdocuments', 'If the file does not open in your local editor, make sure the Nextcloud desktop app is installed and open and try again.'),
-			t('richdocuments', 'Opening file locally …'),
-			{
-				type: OC.dialogs.YES_NO_BUTTONS,
-				confirm: t('richdocuments', 'Try again'),
-				cancel: t('richdocuments', 'Close'),
-			},
-			(decision) => {
-				if (decision) {
-					_window.location = url
-					this.showOpenLocalConfirmation(url, _window)
-				}
-			},
-		)
-	},
-
 	async sendUserList(search) {
 		let users = documentsMain.users
 
diff --git a/src/files.js b/src/files.js
index 6e0821f713..3eb5b6b710 100644
--- a/src/files.js
+++ b/src/files.js
@@ -1,3 +1,5 @@
+import './init-shared.js'
+
 import '../css/filetypes.scss'
 import '../css/files.scss'
 
diff --git a/src/init-shared.js b/src/init-shared.js
new file mode 100644
index 0000000000..1ca3518480
--- /dev/null
+++ b/src/init-shared.js
@@ -0,0 +1,4 @@
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('richdocuments', 'js/')
\ No newline at end of file
diff --git a/src/mixins/openLocal.js b/src/mixins/openLocal.js
index c2388ef56b..5335bf0789 100644
--- a/src/mixins/openLocal.js
+++ b/src/mixins/openLocal.js
@@ -21,11 +21,12 @@
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
+import { spawnDialog } from '@nextcloud/dialogs'
 import { encodePath } from '@nextcloud/paths'
 import { getRootUrl, generateOcsUrl } from '@nextcloud/router'
 import { getNextcloudUrl } from '../helpers/url.js'
+import Confirmation from '../components/Modal/Confirmation.vue'
 
-// FIXME: Migrate to vue component
 export default {
 	data() {
 		return {
@@ -52,14 +53,13 @@ export default {
 		},
 
 		showOpenLocalConfirmation() {
-			window.OC.dialogs.confirmDestructive(
-				t('richdocuments', 'When opening a file locally, the document will close for all users currently viewing the document.'),
-				t('richdocuments', 'Open file locally'),
+			spawnDialog(
+				Confirmation,
 				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('richdocuments', 'Open locally'),
-					confirmClasses: 'error',
-					cancel: t('richdocuments', 'Continue editing online'),
+					name: t('richdocuments', 'Open file locally'),
+					description: t('richdocuments', 'When opening a file locally, the document will close for all users currently viewing the document.'),
+					confirmButtonText: t('richdocuments', 'Open locally'),
+					cancelButtonText: t('richdocuments', 'Continue editing online'),
 				},
 				(decision) => {
 					if (!decision) {
@@ -67,19 +67,19 @@ export default {
 					}
 					this.openingLocally = true
 					this.sendPostMessage('Get_Views')
-				})
+				},
+			)
 		},
 
 		showOpenLocalFinished() {
 			const fileName = this.filename
-			window.OC.dialogs.confirmDestructive(
-				t('richdocuments', 'The file should now open locally. If you don\'t see this happening, make sure that the desktop client is installed on your system.'),
-				t('richdocuments', 'Open file locally'),
+			spawnDialog(
+				Confirmation,
 				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('richdocuments', 'Retry to open locally'),
-					confirmClasses: 'primary',
-					cancel: t('richdocuments', 'Continue editing online'),
+					name: t('richdocuments', 'Open file locally'),
+					description: t('richdocuments', 'The file should now open locally. If you don\'t see this happening, make sure that the desktop client is installed on your system.'),
+					confirmButtonText: t('richdocuments', 'Retry to open locally'),
+					cancelButtonText: t('richdocuments', 'Continue editing online'),
 				},
 				(decision) => {
 					if (!decision) {
@@ -88,7 +88,8 @@ export default {
 					}
 					this.openingLocally = true
 					this.sendPostMessage('Get_Views')
-				})
+				},
+			)
 		},
 
 		unlockFile() {
diff --git a/src/mixins/saveAs.js b/src/mixins/saveAs.js
index 4c7de34a3e..c4874a1823 100644
--- a/src/mixins/saveAs.js
+++ b/src/mixins/saveAs.js
@@ -19,33 +19,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-// FIXME: Migrate to vue component
+import { spawnDialog } from '@nextcloud/dialogs'
+import SaveAs from '../components/Modal/SaveAs.vue'
+
 export default {
 	methods: {
 		async saveAs(format) {
-			window.OC.dialogs.prompt(
-				t('richdocuments', 'Please enter the filename to store the document as.'),
-				t('richdocuments', 'Save As'),
-				(result, value) => {
-					if (result === true && value) {
-						this.sendPostMessage('Action_SaveAs', { Filename: value, Notify: true })
-					}
+			spawnDialog(
+				SaveAs,
+				{
+					path: this.filename,
+					format,
+					description: t('richdocuments', 'Save a copy of the file as a new name and continue editing the new file'),
 				},
-				true,
-				t('richdocuments', 'New filename'),
-				false,
-			).then(() => {
-				const $dialog = $('.oc-dialog:visible')
-				const $buttons = $dialog.find('.oc-dialog-buttonrow button')
-				$buttons.eq(0).text(t('richdocuments', 'Cancel'))
-				$buttons.eq(1).text(t('richdocuments', 'Save'))
-				const nameInput = $dialog.find('input')[0]
-				nameInput.style.minWidth = '250px'
-				nameInput.style.maxWidth = '400px'
-				nameInput.value = format ? this.basename.substring(0, this.basename.lastIndexOf('.') + 1) + format : this.basename
-				nameInput.selectionStart = 0
-				nameInput.selectionEnd = this.basename.lastIndexOf('.')
-			})
+				(value) => value && this.sendPostMessage('Action_SaveAs', { Filename: value, Notify: true }),
+			)
 		},
 	},
 }
diff --git a/src/personal.js b/src/personal.js
index 26d390a0f5..d3f7fb0882 100644
--- a/src/personal.js
+++ b/src/personal.js
@@ -1,11 +1,9 @@
+import './init-shared.js'
 import '../css/admin.scss'
 import { generateFilePath } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
-$(function() {
-
-	$('[data-toggle="tooltip"]').tooltip()
-
+(function() {
 	const PersonalSettings = function() {
 		this.templateInput = document.getElementById('templateInputField')
 		this.templateSelectButton = document.getElementById('templateSelectButton')
@@ -91,4 +89,4 @@ $(function() {
 	}
 
 	return new PersonalSettings()
-})
+})()
diff --git a/src/reference.js b/src/reference.js
index 487b8ed2fe..e4bf96bb92 100644
--- a/src/reference.js
+++ b/src/reference.js
@@ -19,6 +19,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import './init-shared.js'
+
 import Vue from 'vue'
 import { translate as t } from '@nextcloud/l10n'
 
diff --git a/src/view/DocumentTargetPicker.vue b/src/view/DocumentTargetPicker.vue
index d16c0ca69e..015fcf0090 100644
--- a/src/view/DocumentTargetPicker.vue
+++ b/src/view/DocumentTargetPicker.vue
@@ -25,9 +25,9 @@
 	</div>
 	<div v-else class="office-target-picker">
 		<h2>{{ t('richdocuments', 'Link to office document section') }}</h2>
-		<NcLoadingIcon v-if="!sections || !fileId" :size="44" />
+		<NcLoadingIcon v-if="sections === null || !fileId" :size="44" />
 		<div v-else>
-			<NcEmptyContent v-if="sections.length === 0" :title="t('richdocuments', 'Could not find any section in the document')">
+			<NcEmptyContent v-if="sections.length === 0" :name="t('richdocuments', 'Could not find any section in the document')">
 				<template #icon>
 					<TableOfContentsIcon />
 				</template>
@@ -38,7 +38,7 @@
 					<ul>
 						<NcListItem v-for="entry in section.entries"
 							:key="entry.id"
-							:title="entry.name"
+							:name="entry.name"
 							:class="{ 'list-item__wrapper--active': entry.id === target }"
 							@click="setTarget(entry)">
 							<template v-if="entry.preview" #icon>
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { FilePickerType } from '@nextcloud/dialogs'
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { NcButton, NcEmptyContent, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
@@ -106,25 +106,20 @@ export default {
 		},
 		async openFilePicker() {
 			const self = this
-			OC.dialogs.filepicker(
-				t('files', 'Select file or folder to link to'),
-				function(file) {
-					const client = OC.Files.getClient()
-					client.getFileInfo(file).then((_status, fileInfo) => {
-						self.fileId = fileInfo.id
-					})
-					self.filePath = file
-					self.fetchReferences()
-				},
-				false, // multiselect
-				OC.getCapabilities().richdocuments.mimetypes, // mime filter
-				false, // modal
-				FilePickerType.Choose, // type
-				'',
-				{
-					target: this.$refs.picker,
-				},
-			)
+			getFilePickerBuilder(t('files', 'Select file or folder to link to'))
+				.setMimeTypeFilter(OC.getCapabilities().richdocuments.mimetypes)
+				.addButton({
+					label: t('richdocuments', 'Insert image'),
+					callback: (files) => {
+						const file = files[0]
+						this.fileId = file.fileid
+						self.filePath = file.path
+						self.fetchReferences()
+					},
+				})
+				.setContainer(this.$refs.picker)
+				.build()
+				.pick()
 		},
 		setTarget(entry) {
 			this.target = entry.id
diff --git a/src/view/FilesAppIntegration.js b/src/view/FilesAppIntegration.js
index f26b93f9dc..b827c4e8f2 100644
--- a/src/view/FilesAppIntegration.js
+++ b/src/view/FilesAppIntegration.js
@@ -22,7 +22,7 @@
 
 import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
-import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import { getFilePickerBuilder, spawnDialog } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 import { emit } from '@nextcloud/event-bus'
 import { getCurrentDirectory } from '../helpers/filesApp.js'
@@ -32,6 +32,7 @@ import {
 	davResultToNode,
 	davRootPath,
 } from '@nextcloud/files'
+import SaveAs from '../components/Modal/SaveAs.vue'
 
 const isPublic = document.getElementById('isPublic') && document.getElementById('isPublic').value === '1'
 
@@ -256,31 +257,6 @@ export default {
 		this.renderAvatars()
 	},
 
-	_addAvatarList() {
-		// Add the avatar toolbar if possible
-		const avatarList = $('<div id="richdocuments-avatars">')
-		avatarList.on('click', function(e) {
-			e.stopPropagation()
-			$('#editors-menu').toggle()
-		})
-		$('#richdocuments-header').append(avatarList)
-	},
-
-	_addHeaderShareButton() {
-		if ($('header').length) {
-			const isInverted = Boolean(window?.OCA?.Theming?.inverted)
-			const $button = $('<div id="richdocuments-sharing"><a class="icon-collabora icon-shared ' + (isInverted ? 'icon-black' : 'icon-white') + '"></a></div>')
-			$('#richdocuments-header').append($button)
-			$button.on('click', () => {
-				if (!$('#app-sidebar').is(':visible')) {
-					return this.share()
-				}
-				OC.Apps.hideAppSidebar()
-			})
-			$('.searchbox').hide()
-		}
-	},
-
 	_addHeaderFileActions() {
 		console.debug('[FilesAppIntegration] Adding header file actions')
 		OC.unregisterMenu($('#richdocuments-actions .icon-more'), $('#richdocuments-actions-menu'))
@@ -468,11 +444,15 @@ export default {
 			return
 		}
 
-		OC.dialogs.prompt(
-			t('richdocuments', 'Please enter the filename for the new document'),
-			t('richdocuments', 'Save As'),
-			function(result, value) {
-				if (result === true && value) {
+		spawnDialog(
+			SaveAs,
+			{
+				name: t('richdocuments', 'New file'),
+				description: t('richdocuments', 'Please enter the filename for the new file'),
+				buttonText: t('richdocuments', 'Create'),
+			},
+			(value) => {
+				if (value) {
 					if (type === 'text') {
 						type = 'document'
 					}
@@ -480,15 +460,7 @@ export default {
 					window.open(url, '_blank')
 				}
 			},
-			true,
-			t('richdocuments', 'New filename'),
-			false,
-		).then(function() {
-			const $dialog = parent.$('.oc-dialog:visible')
-			const $buttons = $dialog.find('button')
-			$buttons.eq(0).text(t('richdocuments', 'Cancel'))
-			$buttons.eq(1).text(t('richdocuments', 'Create a new document'))
-		})
+		)
 	},
 
 	loggingContext() {
diff --git a/src/view/NewFileMenu.js b/src/view/NewFileMenu.js
index 792eb6f2f5..b63e37bbfe 100644
--- a/src/view/NewFileMenu.js
+++ b/src/view/NewFileMenu.js
@@ -25,6 +25,7 @@ import { getCurrentDirectory } from '../helpers/filesApp.js'
 import Types from '../helpers/types.js'
 import { createEmptyFile } from '../services/api.js'
 import { generateUrl, generateFilePath, generateOcsUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
 
 /** @type OC.Plugin */
 const NewFileMenu = {
@@ -113,7 +114,7 @@ const NewFileMenu = {
 					fileActions: FileList.fileActions,
 				})
 			} else {
-				OC.dialogs.alert(response.data.message, t('core', 'Could not create file'))
+				showError(t('core', 'Could not create file') + ': ' + response.data.message)
 			}
 		})
 	},
diff --git a/src/viewer.js b/src/viewer.js
index a8c7252306..30469d3a7b 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -21,16 +21,12 @@
  *
  */
 
+import './init-shared.js'
 import '../css/filetypes.scss'
 
 import Office from './view/Office.vue'
 import { getCapabilities } from '@nextcloud/capabilities'
 
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(OC.requestToken)
-// eslint-disable-next-line
-__webpack_public_path__ = OC.linkTo('richdocuments', 'js/')
-
 const supportedMimes = getCapabilities().richdocuments.mimetypes
 
 if (OCA.Viewer) {