From 4b4af1346958cb2020b269b0f686608ceb547b7e Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Tue, 11 Aug 2026 22:22:14 +0200
Subject: [PATCH] chore: migrate mixins to composables

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/Forms.vue                                 |  12 +-
 src/components/AppNavigationForm.vue          |  13 +-
 src/components/Questions/QuestionColor.vue    |  15 +-
 src/components/Questions/QuestionDate.vue     |  14 +-
 src/components/Questions/QuestionDropdown.vue |  22 +-
 src/components/Questions/QuestionFile.vue     |  15 +-
 src/components/Questions/QuestionGrid.vue     |  22 +-
 .../Questions/QuestionLinearScale.vue         |  15 +-
 src/components/Questions/QuestionLong.vue     |  14 +-
 src/components/Questions/QuestionMultiple.vue |  27 +-
 src/components/Questions/QuestionRanking.vue  |  22 +-
 src/components/Questions/QuestionShort.vue    |  15 +-
 .../SidebarTabs/SettingsSidebarTab.vue        |  41 +-
 .../SidebarTabs/SharingSearchDiv.vue          |  86 ++--
 .../SidebarTabs/SharingShareDiv.vue           |  25 +-
 .../SidebarTabs/SharingSidebarTab.vue         |  28 +-
 .../SidebarTabs/TransferOwnership.vue         |   5 +-
 src/components/TopBar.vue                     |  12 +-
 src/composables/useQuestion.ts                | 367 +++++++++++++++
 src/composables/useQuestionMultiple.ts        | 383 ++++++++++++++++
 src/composables/useShareLink.ts               |  99 ++++
 src/composables/useShareTypes.ts              | 110 +++++
 src/composables/useUserSearch.ts              | 230 ++++++++++
 src/composables/useViewForm.ts                | 190 ++++++++
 src/mixins/PermissionTypes.ts                 |  46 --
 src/mixins/QuestionMixin.ts                   | 424 -----------------
 src/mixins/QuestionMultipleMixin.ts           | 431 ------------------
 src/mixins/ShareLinkMixin.ts                  | 110 -----
 src/mixins/ShareTypes.ts                      |  88 ----
 src/mixins/UserSearchMixin.ts                 | 283 ------------
 src/mixins/ViewsMixin.ts                      | 205 ---------
 src/models/Permissions.ts                     |  27 ++
 src/views/Create.vue                          | 101 +++-
 src/views/Results.vue                         |  40 +-
 src/views/Sidebar.vue                         | 128 ++++--
 src/views/Submit.vue                          |  46 +-
 36 files changed, 1894 insertions(+), 1817 deletions(-)
 create mode 100644 src/composables/useQuestion.ts
 create mode 100644 src/composables/useQuestionMultiple.ts
 create mode 100644 src/composables/useShareLink.ts
 create mode 100644 src/composables/useShareTypes.ts
 create mode 100644 src/composables/useUserSearch.ts
 create mode 100644 src/composables/useViewForm.ts
 delete mode 100644 src/mixins/PermissionTypes.ts
 delete mode 100644 src/mixins/QuestionMixin.ts
 delete mode 100644 src/mixins/QuestionMultipleMixin.ts
 delete mode 100644 src/mixins/ShareLinkMixin.ts
 delete mode 100644 src/mixins/ShareTypes.ts
 delete mode 100644 src/mixins/UserSearchMixin.ts
 delete mode 100644 src/mixins/ViewsMixin.ts
 create mode 100644 src/models/Permissions.ts

diff --git a/src/Forms.vue b/src/Forms.vue
index 55f6c988e..699a739b4 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -174,8 +174,8 @@ import AppNavigationForm from './components/AppNavigationForm.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import Sidebar from './views/Sidebar.vue'
 import FormsIcon from '../img/forms-dark.svg?raw'
-import { PERMISSION_TYPES } from './mixins/PermissionTypes.ts'
 import { FormState } from './models/Constants.ts'
+import { PERMISSION_TYPES } from './models/Permissions.ts'
 import logger from './utils/Logger.ts'
 import OcsResponse2Data from './utils/OcsResponse2Data.ts'
 
@@ -273,8 +273,6 @@ export default defineComponent({
 		})
 
 		const updateSelectedForm = (form: FormsForm): void => {
-			sidebarOpened.value = false
-
 			const index = forms.value.findIndex((f) => f.hash === form.hash)
 			if (index > -1) {
 				forms.value[index] = form
@@ -546,6 +544,14 @@ export default defineComponent({
 			},
 		)
 
+		// Close sidebar when a different form is selected
+		watch(
+			() => selectedForm.value.hash,
+			() => {
+				sidebarOpened.value = false
+			},
+		)
+
 		const onLastUpdatedByEventBus = (id: number): void => {
 			const formIndex = forms.value.findIndex((form) => form.id === id)
 			if (formIndex !== -1) {
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index b50c71434..9e83edc02 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -123,8 +123,8 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import FormsIcon from '../../img/forms-dark.svg?raw'
-import PermissionTypes from '../mixins/PermissionTypes.ts'
 import { FormState } from '../models/Constants.ts'
+import { PERMISSION_TYPES } from '../models/Permissions.ts'
 import logger from '../utils/Logger.ts'
 
 type NavigationTarget = 'submit' | 'formRoot'
@@ -141,8 +141,6 @@ export default defineComponent({
 		NcLoadingIcon,
 	},
 
-	mixins: [PermissionTypes],
-
 	props: {
 		form: {
 			type: Object as PropType<FormsForm>,
@@ -186,16 +184,13 @@ export default defineComponent({
 
 	computed: {
 		canEdit(): boolean {
-			return this.form.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
-			)
+			return this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
 		},
 
 		canSeeResults(): boolean {
 			return (
-				this.form.permissions.includes(
-					this.PERMISSION_TYPES.PERMISSION_RESULTS,
-				) || (this.form.submissionCount ?? 0) > 0
+				this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
+				|| (this.form.submissionCount ?? 0) > 0
 			)
 		},
 
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 21755e60f..416c42370 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -53,7 +53,11 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 export default defineComponent({
 	name: 'QuestionColor',
@@ -65,11 +69,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconClose,
 			t,
 		}
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 1207e8014..664f8437d 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -121,7 +121,11 @@ import svgClockLoader20 from '../../../img/clock_loader_20.svg?raw'
 import svgClockLoader80 from '../../../img/clock_loader_80.svg?raw'
 import svgEventIcon from '../../../img/event.svg?raw'
 import svgTodayIcon from '../../../img/today.svg?raw'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 type PickerType =
 	'date' | 'datetime' | 'time' | 'date-range' | 'datetime-range' | 'time-range'
@@ -146,8 +150,12 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		return useQuestion(props, { emit })
+	},
 
 	data() {
 		return {
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 2a66b2f28..cf0b306d5 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -114,8 +114,15 @@ import NcSelect from '@nextcloud/vue/components/NcSelect'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import { OptionType } from '../../models/Constants.ts'
 
 export default defineComponent({
@@ -133,11 +140,16 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			IconContentPaste,
 			t,
 		}
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index 3d2756bd1..24a9075dc 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -176,7 +176,11 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 import fileTypes from '../../models/FileTypes.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
@@ -227,11 +231,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconChevronLeft,
 			IconDelete,
 			IconFile,
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index d931d314a..8bdcc1768 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -186,8 +186,15 @@ import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
 type GridQuestionType = GridCellType | 'text'
@@ -216,11 +223,16 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			t,
 		}
 	},
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index 672477221..70393832a 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -126,7 +126,11 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwit
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 type LinearScaleExtraSettings = {
 	optionsLowest?: number | null
@@ -146,11 +150,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconPencil,
 			t,
 		}
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 538d1971c..cf1fa71b7 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -41,7 +41,11 @@
 import { t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 export default defineComponent({
 	name: 'QuestionLong',
@@ -50,8 +54,12 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values', 'keydown'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values', 'keydown'],
+
+	setup(props, { emit }) {
+		return useQuestion(props, { emit })
+	},
 
 	data() {
 		return {
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 5bdaf56dc..139b91a2f 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -204,8 +204,15 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import {
 	OptionType,
 	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
@@ -235,11 +242,21 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values', 'update:isRequired'],
+	props: QUESTION_PROPS,
+	emits: [
+		...QUESTION_EMITS,
+		...QUESTION_MULTIPLE_EMITS,
+		'update:values',
+		'update:isRequired',
+	],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			IconCheckboxBlankOutline,
 			IconContentPaste,
 			IconRadioboxBlank,
diff --git a/src/components/Questions/QuestionRanking.vue b/src/components/Questions/QuestionRanking.vue
index 8668fd80e..0a7d4c29b 100644
--- a/src/components/Questions/QuestionRanking.vue
+++ b/src/components/Questions/QuestionRanking.vue
@@ -213,8 +213,15 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import { OptionType } from '../../models/Constants.ts'
 
 export default defineComponent({
@@ -233,11 +240,16 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			IconArrowDown,
 			IconArrowUp,
 			IconClose,
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 79bbacb84..e593249bd 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -88,7 +88,11 @@ import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
 import validationTypes from '../../models/ValidationTypes.ts'
 import { splitRegex, validateExpression } from '../../utils/RegularExpression.ts'
@@ -104,11 +108,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconRegex,
 			t,
 		}
diff --git a/src/components/SidebarTabs/SettingsSidebarTab.vue b/src/components/SidebarTabs/SettingsSidebarTab.vue
index 9ad7f1881..b16e2f85d 100644
--- a/src/components/SidebarTabs/SettingsSidebarTab.vue
+++ b/src/components/SidebarTabs/SettingsSidebarTab.vue
@@ -97,7 +97,7 @@
 			v-show="hasMaxSubmissions && !formArchived"
 			class="settings-div--indent">
 			<NcInputField
-				v-model="maxSubmissionsValue"
+				:modelValue="maxSubmissionsValue"
 				type="number"
 				:min="1"
 				:disabled="locked"
@@ -292,7 +292,7 @@ import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import TransferOwnership from './TransferOwnership.vue'
 import svgLockOpen from '../../../img/lock_open.svg?raw'
-import ShareTypes from '../../mixins/ShareTypes.ts'
+import { useShareTypes } from '../../composables/useShareTypes.ts'
 import { FormState } from '../../models/Constants.ts'
 
 const formsAppName = 'forms'
@@ -329,8 +329,6 @@ export default defineComponent({
 		ClickOutside,
 	},
 
-	mixins: [ShareTypes],
-
 	inject: ['$markdownit'],
 
 	props: {
@@ -353,8 +351,11 @@ export default defineComponent({
 	emits: ['update:formProp'],
 
 	setup() {
+		const { SHARE_TYPES } = useShareTypes()
+
 		return {
 			t,
+			SHARE_TYPES,
 		}
 	},
 
@@ -387,8 +388,8 @@ export default defineComponent({
 			/** If custom submission message is shown as input or rendered markdown */
 			editMessage: false,
 			svgLockOpen,
-			confirmationEmailSubject: this.form?.confirmationEmailSubject || '',
-			confirmationEmailBody: this.form?.confirmationEmailBody || '',
+			confirmationEmailSubject: '',
+			confirmationEmailBody: '',
 		}
 	},
 
@@ -460,14 +461,8 @@ export default defineComponent({
 			)
 		},
 
-		maxSubmissionsValue: {
-			get(): number {
-				return this.form.maxSubmissions ?? 1
-			},
-
-			set(value: number): void {
-				this.$emit('update:formProp', 'maxSubmissions', value)
-			},
+		maxSubmissionsValue(): number {
+			return this.form.maxSubmissions ?? 1
 		},
 
 		isExpired(): boolean {
@@ -592,12 +587,20 @@ export default defineComponent({
 	},
 
 	watch: {
-		'form.confirmationEmailSubject': function (val: string | null | undefined) {
-			this.confirmationEmailSubject = val || ''
+		'form.confirmationEmailSubject': {
+			handler(val: string | null | undefined) {
+				this.confirmationEmailSubject = val || ''
+			},
+
+			immediate: true,
 		},
 
-		'form.confirmationEmailBody': function (val: string | null | undefined) {
-			this.confirmationEmailBody = val || ''
+		'form.confirmationEmailBody': {
+			handler(val: string | null | undefined) {
+				this.confirmationEmailBody = val || ''
+			},
+
+			immediate: true,
 		},
 
 		confirmationEmailQuestions: {
@@ -700,7 +703,7 @@ export default defineComponent({
 		onMaxSubmissionsValueChange(value: string | number): void {
 			const parsedValue = Number(value)
 			if (parsedValue > 0) {
-				this.$emit('update:formProp', 'maxSubmissions', value)
+				this.$emit('update:formProp', 'maxSubmissions', parsedValue)
 			}
 		},
 
diff --git a/src/components/SidebarTabs/SharingSearchDiv.vue b/src/components/SidebarTabs/SharingSearchDiv.vue
index 6f206be9f..3a6389df1 100644
--- a/src/components/SidebarTabs/SharingSearchDiv.vue
+++ b/src/components/SidebarTabs/SharingSearchDiv.vue
@@ -23,28 +23,20 @@
 
 <script lang="ts">
 import { t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
-import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
+import { useUserSearch } from '../../composables/useUserSearch.ts'
 
 interface CurrentShareLike {
 	shareWith: string
 	shareType: number
 }
 
-interface SearchShareLike {
-	shareWith: string
-	displayName: string
-	shareType: number
-}
-
 export default defineComponent({
 	components: {
 		NcSelectUsers,
 	},
 
-	mixins: [UserSearchMixin],
-
 	props: {
 		currentShares: {
 			type: Array,
@@ -69,37 +61,15 @@ export default defineComponent({
 
 	emits: ['addShare'],
 
-	setup() {
-		return {
-			t,
-		}
-	},
+	setup(props) {
+		const userSearch = useUserSearch()
+		const options = computed(() => {
+			const currentShares = props.currentShares as CurrentShareLike[]
+			const source = userSearch.isValidQuery.value
+				? userSearch.suggestions.value
+				: userSearch.recommendations.value
 
-	computed: {
-		/**
-		 * Multiselect options. Recommendations by default, direct search when search query is valid.
-		 * Filter out existing shares
-		 *
-		 * @return
-		 */
-		options(): SearchShareLike[] {
-			if (this.isValidQuery) {
-				// Suggestions without existing shares
-				const suggestions = this.suggestions as SearchShareLike[]
-				const currentShares = this.currentShares as CurrentShareLike[]
-				return suggestions.filter(
-					(item) =>
-						!currentShares.find(
-							(share) =>
-								share.shareWith === item.shareWith
-								&& share.shareType === item.shareType,
-						),
-				)
-			}
-			// Recommendations without existing shares
-			const recommendations = this.recommendations as SearchShareLike[]
-			const currentShares = this.currentShares as CurrentShareLike[]
-			return recommendations.filter(
+			return source.filter(
 				(item) =>
 					!currentShares.find(
 						(share) =>
@@ -107,14 +77,17 @@ export default defineComponent({
 							&& share.shareType === item.shareType,
 					),
 			)
-		},
+		})
+		const showLoadingCircle = computed(
+			() => props.showLoading || userSearch.loading.value,
+		)
 
-		/**
-		 * Show Loading if loading is either set by parent or by this module (search)
-		 */
-		showLoadingCircle(): boolean {
-			return this.showLoading || this.loading
-		},
+		return {
+			...userSearch,
+			options,
+			showLoadingCircle,
+			t,
+		}
 	},
 
 	mounted() {
@@ -128,15 +101,24 @@ export default defineComponent({
 		 *
 		 * @param share New share to share with, format still for multiselect.
 		 */
-		addShare(share: SearchShareLike | SearchShareLike[] | null): void {
+		addShare(share: unknown): void {
 			const selectedShare = Array.isArray(share) ? share[0] : share
-			if (!selectedShare) {
+			if (!selectedShare || typeof selectedShare !== 'object') {
+				return
+			}
+			if (!('shareWith' in selectedShare) || !('shareType' in selectedShare)) {
 				return
 			}
+
 			const newShare = {
-				shareWith: selectedShare.shareWith,
-				displayName: selectedShare.displayName,
-				shareType: selectedShare.shareType,
+				shareWith: String(selectedShare.shareWith),
+
+				displayName:
+					'displayName' in selectedShare
+						? String(selectedShare.displayName)
+						: String(selectedShare.shareWith),
+
+				shareType: Number(selectedShare.shareType),
 			}
 			this.$emit('addShare', newShare)
 		},
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index 141d178aa..6b3c4dea4 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -56,8 +56,8 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import PermissionTypes from '../../mixins/PermissionTypes.ts'
-import ShareTypes from '../../mixins/ShareTypes.ts'
+import { useShareTypes } from '../../composables/useShareTypes.ts'
+import { PERMISSION_TYPES } from '../../models/Permissions.ts'
 
 interface ShareLike {
 	id: number
@@ -78,8 +78,6 @@ export default defineComponent({
 		NcAvatar,
 	},
 
-	mixins: [PermissionTypes, ShareTypes],
-
 	props: {
 		share: {
 			type: Object,
@@ -100,29 +98,30 @@ export default defineComponent({
 	emits: ['removeShare', 'update:share'],
 
 	setup() {
+		const { SHARE_TYPES } = useShareTypes()
+
 		return {
 			t,
 			IconClose,
+			SHARE_TYPES,
 		}
 	},
 
 	computed: {
 		canAccessResults(): boolean {
 			return this.share.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_RESULTS,
+				PERMISSION_TYPES.PERMISSION_RESULTS,
 			)
 		},
 
 		canDeleteResults(): boolean {
 			return this.share.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
+				PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 			)
 		},
 
 		canEditForm(): boolean {
-			return this.share.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
-			)
+			return this.share.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
 		},
 
 		isNoUser(): boolean {
@@ -159,12 +158,12 @@ export default defineComponent({
 			if (hasPermission === false) {
 				// ensure to remove the delete permission if results permission is dropped
 				this.updatePermission(
-					this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
+					PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 					false,
 				)
 			}
 			return this.updatePermission(
-				this.PERMISSION_TYPES.PERMISSION_RESULTS,
+				PERMISSION_TYPES.PERMISSION_RESULTS,
 				hasPermission,
 			)
 		},
@@ -174,7 +173,7 @@ export default defineComponent({
 		 */
 		updatePermissionDeleteResults(hasPermission: boolean): void {
 			return this.updatePermission(
-				this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
+				PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 				hasPermission,
 			)
 		},
@@ -184,7 +183,7 @@ export default defineComponent({
 		 */
 		updatePermissionEdit(hasPermission: boolean): void {
 			return this.updatePermission(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
+				PERMISSION_TYPES.PERMISSION_EDIT,
 				hasPermission,
 			)
 		},
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
index 17d8722d8..d4e4eed6c 100644
--- a/src/components/SidebarTabs/SharingSidebarTab.vue
+++ b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -265,10 +265,10 @@ import QRDialog from '../QRDialog.vue'
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
 import FormsIcon from '../../../img/forms-dark.svg?raw'
-import PermissionTypes from '../../mixins/PermissionTypes.ts'
-import ShareLinkMixin from '../../mixins/ShareLinkMixin.ts'
-import ShareTypes from '../../mixins/ShareTypes.ts'
+import { useShareLink } from '../../composables/useShareLink.ts'
+import { useShareTypes } from '../../composables/useShareTypes.ts'
 import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
+import { PERMISSION_TYPES } from '../../models/Permissions.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
@@ -313,8 +313,6 @@ export default defineComponent({
 		SharingShareDiv,
 	},
 
-	mixins: [ShareTypes, ShareLinkMixin, PermissionTypes],
-
 	props: {
 		form: {
 			type: Object,
@@ -335,6 +333,18 @@ export default defineComponent({
 	emits: ['addShare', 'updateShare', 'removeShare', 'update:formProp'],
 
 	setup() {
+		const { SHARE_TYPES } = useShareTypes()
+		const {
+			copyEmbeddingCode,
+			copyLink,
+			getInternalShareLink,
+			getPublicShareLink,
+			isEmbeddingAllowed,
+		} = useShareLink({
+			PERMISSION_TYPES,
+			SHARE_TYPES,
+		})
+
 		return {
 			t,
 			FormsIcon,
@@ -348,6 +358,12 @@ export default defineComponent({
 			IconAccountMultiple,
 			IconQr,
 			IconRefresh,
+			SHARE_TYPES,
+			copyEmbeddingCode,
+			copyLink,
+			getInternalShareLink,
+			getPublicShareLink,
+			isEmbeddingAllowed,
 		}
 	},
 
@@ -492,7 +508,7 @@ export default defineComponent({
 				...share,
 				permissions: [
 					...share.permissions,
-					this.PERMISSION_TYPES.PERMISSION_EMBED,
+					PERMISSION_TYPES.PERMISSION_EMBED,
 				],
 			})
 		},
diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
index 2501913db..cdd30b3d6 100644
--- a/src/components/SidebarTabs/TransferOwnership.vue
+++ b/src/components/SidebarTabs/TransferOwnership.vue
@@ -102,7 +102,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
+import { useUserSearch } from '../../composables/useUserSearch.ts'
 import logger from '../../utils/Logger.ts'
 
 interface SelectedUserLike {
@@ -119,8 +119,6 @@ export default defineComponent({
 		NcSelectUsers,
 	},
 
-	mixins: [UserSearchMixin],
-
 	props: {
 		form: {
 			type: Object,
@@ -140,6 +138,7 @@ export default defineComponent({
 
 	setup() {
 		return {
+			...useUserSearch(),
 			t,
 		}
 	},
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index f2d871768..1feacb25c 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -42,7 +42,7 @@ import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PillMenu from './PillMenu.vue'
-import PermissionTypes from '../mixins/PermissionTypes.ts'
+import { PERMISSION_TYPES } from '../models/Permissions.ts'
 import logger from '../utils/Logger.ts'
 
 type TopBarViewId = 'submit' | 'edit' | 'results'
@@ -84,8 +84,6 @@ export default defineComponent({
 		PillMenu,
 	},
 
-	mixins: [PermissionTypes],
-
 	props: {
 		archived: {
 			type: Boolean,
@@ -153,19 +151,19 @@ export default defineComponent({
 		},
 
 		canSubmit(): boolean {
-			return this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_SUBMIT)
+			return this.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
 		},
 
 		canEdit(): boolean {
 			return (
-				this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_EDIT)
+				this.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
 				&& !this.archived
 			)
 		},
 
 		canSeeResults(): boolean {
 			return (
-				this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_RESULTS)
+				this.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
 				|| this.submissionCount > 0
 			)
 		},
@@ -178,7 +176,7 @@ export default defineComponent({
 		canOnlySubmit(): boolean {
 			return (
 				this.permissions.length === 1
-				&& this.permissions.includes(this.PERMISSION_TYPES.PERMISSION_SUBMIT)
+				&& this.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
 				&& this.submissionCount === 0
 			)
 		},
diff --git a/src/composables/useQuestion.ts b/src/composables/useQuestion.ts
new file mode 100644
index 000000000..f88a28405
--- /dev/null
+++ b/src/composables/useQuestion.ts
@@ -0,0 +1,367 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { FormsOption } from '../models/Entities.d.ts'
+
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { emit as emitEvent } from '@nextcloud/event-bus'
+import { generateOcsUrl } from '@nextcloud/router'
+import debounce from 'debounce'
+import { computed, getCurrentInstance, nextTick, ref } from 'vue'
+import Question from '../components/Questions/Question.vue'
+import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+
+export const QUESTION_EMITS = [
+	'update:text',
+	'update:description',
+	'update:isRequired',
+	'update:extraSettings',
+	'update:name',
+	'update:values',
+	'delete',
+	'clone',
+	'keydown',
+	'moveDown',
+	'moveUp',
+]
+
+export const QUESTION_PROPS = {
+	id: {
+		type: Number,
+		required: true,
+	},
+	formId: {
+		type: Number,
+		default: null,
+	},
+	text: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+		required: true,
+	},
+	isRequired: {
+		type: Boolean,
+		required: true,
+	},
+	index: {
+		type: Number,
+		required: true,
+	},
+	name: {
+		type: String,
+		default: '',
+	},
+	values: {
+		type: [Array, Object],
+		default() {
+			return []
+		},
+	},
+	options: {
+		type: Array as () => FormsOption[],
+		required: true,
+	},
+	order: {
+		type: Number,
+		default: -1,
+	},
+	type: {
+		type: String,
+		default: null,
+	},
+	answerType: {
+		type: Object,
+		required: true,
+	},
+	readOnly: {
+		type: Boolean,
+		default: false,
+	},
+	maxStringLengths: {
+		type: Object,
+		required: true,
+	},
+	extraSettings: {
+		default: () => {
+			return {}
+		},
+	},
+	accept: {
+		type: Array,
+		default() {
+			return []
+		},
+	},
+	canMoveUp: {
+		type: Boolean,
+		default: false,
+	},
+	canMoveDown: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+interface UseQuestionOptions {
+	emit: (event: string, ...args: unknown[]) => void
+}
+
+interface QuestionPropsLike {
+	id: number
+	formId: number | null
+	index: number
+	extraSettings: Record<string, unknown>
+	options: FormsOption[]
+	[key: string]: unknown
+}
+
+/**
+ * Shared question helpers previously provided via QuestionMixin.
+ *
+ * @param props Question component props used by shared question logic.
+ * @param options Emits bridge for forwarding events to parent components.
+ */
+export function useQuestion(props: QuestionPropsLike, options: UseQuestionOptions) {
+	const errorMessage = ref<string | null>(null)
+	const instance = getCurrentInstance()
+
+	const questionProps = computed(() => {
+		const filteredProps: Record<string, unknown> = { ...props }
+		const allowedKeys = Object.keys(Question.props || {})
+		Object.keys(filteredProps).forEach((key) => {
+			if (!allowedKeys.includes(key)) {
+				delete filteredProps[key]
+			}
+		})
+		return filteredProps
+	})
+
+	const titleId = computed(() => {
+		return 'q' + props.index + '_title'
+	})
+
+	const descriptionId = computed(() => {
+		return 'q' + props.index + '_desc'
+	})
+
+	const hasError = computed(() => {
+		return !!errorMessage.value
+	})
+
+	const hasInfo = computed(() => {
+		const infoMessage = instance?.proxy?.infoMessage
+		return !!infoMessage
+	})
+
+	const errorId = computed(() => {
+		return `q${props.index}_error`
+	})
+
+	const infoId = computed(() => {
+		return `q${props.index}_info`
+	})
+
+	const onTitleChange = debounce(function (text: string) {
+		options.emit('update:text', text)
+		saveQuestionProperty('text', text)
+	}, INPUT_DEBOUNCE_MS)
+
+	const onDescriptionChange = debounce(function (description: string) {
+		options.emit('update:description', description)
+		saveQuestionProperty('description', description)
+	}, INPUT_DEBOUNCE_MS)
+
+	const onRequiredChange = debounce(function (isRequiredValue: boolean) {
+		options.emit('update:isRequired', isRequiredValue)
+		saveQuestionProperty('isRequired', isRequiredValue)
+	}, INPUT_DEBOUNCE_MS)
+
+	const onExtraSettingsChange = debounce(function (
+		newSettings: Record<string, unknown>,
+	) {
+		const newExtraSettings = { ...props.extraSettings, ...newSettings }
+		options.emit('update:extraSettings', newExtraSettings)
+		saveQuestionProperty('extraSettings', newExtraSettings)
+	}, INPUT_DEBOUNCE_MS)
+
+	const onNameChange = debounce(function (name: string) {
+		options.emit('update:name', name)
+		saveQuestionProperty('name', name)
+	}, INPUT_DEBOUNCE_MS)
+
+	const onShuffleOptionsChange = (shuffle: boolean): void => {
+		onExtraSettingsChange({ shuffleOptions: shuffle })
+	}
+
+	const onValuesChange = (values: unknown): void => {
+		options.emit('update:values', values)
+	}
+
+	const onDelete = (): void => {
+		options.emit('delete')
+	}
+
+	const onClone = (): void => {
+		options.emit('clone')
+	}
+
+	const onKeydownEnter = (event: KeyboardEvent): void => {
+		options.emit('keydown', event)
+	}
+
+	const focus = (): void => {
+		const element = instance?.proxy?.$el as HTMLElement | undefined
+		element?.scrollIntoView({ behavior: 'smooth' })
+		nextTick(() => {
+			const title = element?.querySelector(
+				'.question__header__title__text__input',
+			) as HTMLInputElement | null
+			if (title) {
+				title.focus()
+			}
+		})
+	}
+
+	const shuffleArray = (input: unknown[]): unknown[] => {
+		const shuffled = [...input]
+		let idx = shuffled.length
+		while (--idx > 0) {
+			const rndIdx = Math.floor(Math.random() * (idx + 1))
+			;[shuffled[rndIdx], shuffled[idx]] = [shuffled[idx], shuffled[rndIdx]]
+		}
+		return shuffled
+	}
+
+	/**
+	 * Persist a single question field to the backend.
+	 *
+	 * @param key Question property name.
+	 * @param value Question property value.
+	 */
+	async function saveQuestionProperty(key: string, value: unknown): Promise<void> {
+		try {
+			await axios.patch(
+				generateOcsUrl(
+					'apps/forms/api/v3/forms/{id}/questions/{questionId}',
+					{
+						id: props.formId,
+						questionId: props.id,
+					},
+				),
+				{
+					keyValuePairs: {
+						[key]: value,
+					},
+				},
+			)
+			emitEvent('forms:last-updated:set', props.formId)
+		} catch (error) {
+			logger.error('Error while saving question', { error })
+			showError(t('forms', 'Error while saving question'))
+		}
+	}
+
+	const handleMultipleOptions = async (answers: string[]): Promise<void> => {
+		const component = instance?.proxy as {
+			isLoading?: boolean
+			updateOptions?: (options: FormsOption[]) => void
+			focusIndex?: (idx: number, optionType: string) => void
+		}
+
+		if (component?.isLoading !== undefined) {
+			component.isLoading = true
+		}
+
+		try {
+			const response = await axios.post(
+				generateOcsUrl(
+					'apps/forms/api/v3/forms/{id}/questions/{questionId}/options',
+					{
+						id: props.formId,
+						questionId: props.id,
+					},
+				),
+				{
+					optionTexts: answers,
+					optionType: OptionType.Choice,
+				},
+			)
+
+			const newServerOptions = OcsResponse2Data(response)
+			const newOptions = props.options.slice()
+			newServerOptions.forEach((option: FormsOption) => {
+				newOptions.push({
+					id: option.id,
+					questionId: props.id,
+					text: option.text,
+					optionType: option.optionType,
+					local: false,
+				})
+			})
+
+			if (component?.updateOptions) {
+				component.updateOptions(newOptions)
+			}
+
+			nextTick(() => {
+				if (component?.focusIndex) {
+					component.focusIndex(newOptions.length - 1, OptionType.Choice)
+				}
+			})
+		} catch (error) {
+			logger.error('Error while saving question options', { error })
+			showError(t('forms', 'Error while saving question options'))
+		}
+
+		if (component?.isLoading !== undefined) {
+			component.isLoading = false
+		}
+	}
+
+	const commonListeners = computed(() => {
+		return {
+			clone: onClone,
+			delete: onDelete,
+			'update:text': onTitleChange,
+			'update:description': onDescriptionChange,
+			'update:isRequired': onRequiredChange,
+			'update:name': onNameChange,
+			moveDown: (...args: unknown[]) => options.emit('moveDown', ...args),
+			moveUp: (...args: unknown[]) => options.emit('moveUp', ...args),
+		}
+	})
+
+	return {
+		errorMessage,
+		questionProps,
+		titleId,
+		descriptionId,
+		hasError,
+		hasInfo,
+		errorId,
+		infoId,
+		commonListeners,
+		onTitleChange,
+		onDescriptionChange,
+		onRequiredChange,
+		onExtraSettingsChange,
+		onNameChange,
+		onShuffleOptionsChange,
+		onValuesChange,
+		onDelete,
+		onClone,
+		onKeydownEnter,
+		focus,
+		shuffleArray,
+		saveQuestionProperty,
+		handleMultipleOptions,
+	}
+}
diff --git a/src/composables/useQuestionMultiple.ts b/src/composables/useQuestionMultiple.ts
new file mode 100644
index 000000000..6b088abc7
--- /dev/null
+++ b/src/composables/useQuestionMultiple.ts
@@ -0,0 +1,383 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/* eslint-disable jsdoc/require-jsdoc */
+
+import type { FormsOption } from '../models/Entities.d.ts'
+
+import axios from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { emit as emitEvent } from '@nextcloud/event-bus'
+import { translate as t } from '@nextcloud/l10n'
+import { generateOcsUrl } from '@nextcloud/router'
+import debounce from 'debounce'
+import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue'
+import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
+import logger from '../utils/Logger.ts'
+
+export const QUESTION_MULTIPLE_EMITS = ['update:options']
+
+interface UseQuestionMultipleOptions {
+	emit: (event: string, ...args: unknown[]) => void
+}
+
+interface AnswerTypeLike {
+	validate: (ctx: unknown) => boolean
+}
+
+export interface QuestionMultiplePropsLike {
+	options: FormsOption[]
+	values: unknown[]
+	answerType: AnswerTypeLike
+	readOnly: boolean
+	extraSettings?: Record<string, unknown>
+	formId: number
+	id: number
+}
+
+/**
+ * Shared helpers previously provided via QuestionMultipleMixin.
+ *
+ * @param props Question component props used by multi-option helpers.
+ * @param options Emits bridge for forwarding option updates.
+ */
+export function useQuestionMultiple(
+	props: unknown,
+	options: UseQuestionMultipleOptions,
+) {
+	const typedProps = props as QuestionMultiplePropsLike
+	const instance = getCurrentInstance()
+	const dirtyOptionsType = ref<string | null>(null)
+
+	const areNoneChecked = computed(() => {
+		return typedProps.values.length === 0
+	})
+
+	const contentValid = computed(() => {
+		const proxy = instance?.proxy
+		return typedProps.answerType.validate(proxy)
+	})
+
+	const isLastEmpty = computed(() => {
+		const value = typedProps.options[typedProps.options.length - 1] as
+			FormsOption | undefined
+		return value?.text?.trim?.().length === 0
+	})
+
+	const expectedOptionTypes = computed(() => {
+		return [OptionType.Choice, OptionType.Row, OptionType.Column]
+	})
+
+	const sortedOptionsPerType = computed(() => {
+		const optionsPerType: { [key: string]: FormsOption[] } = Object.fromEntries(
+			expectedOptionTypes.value.map((optionType) => [optionType, []]),
+		)
+
+		typedProps.options.forEach((option) => {
+			if (optionsPerType[option.optionType]) {
+				optionsPerType[option.optionType].push(option)
+			}
+		})
+
+		for (const optionType of Object.keys(optionsPerType)) {
+			if (typedProps.readOnly && typedProps.extraSettings?.shuffleOptions) {
+				optionsPerType[optionType] = shuffleArray(optionsPerType[optionType])
+			} else {
+				optionsPerType[optionType] = [...optionsPerType[optionType]].sort(
+					(a, b) => {
+						if (a.order === b.order) {
+							return a.id - b.id
+						}
+						return (a.order ?? 0) - (b.order ?? 0)
+					},
+				)
+
+				if (!typedProps.readOnly) {
+					optionsPerType[optionType].push({
+						id: 0,
+						local: true,
+						questionId: typedProps.id,
+						text: '',
+						optionType,
+						order: optionsPerType[optionType].length,
+					} as FormsOption)
+				}
+			}
+		}
+
+		return optionsPerType
+	})
+
+	function shuffleArray(input: FormsOption[]): FormsOption[] {
+		const shuffled = [...input]
+		let idx = shuffled.length
+		while (--idx > 0) {
+			const rndIdx = Math.floor(Math.random() * (idx + 1))
+			;[shuffled[rndIdx], shuffled[idx]] = [shuffled[idx], shuffled[rndIdx]]
+		}
+		return shuffled
+	}
+
+	function focusNextInput(index: number, optionType: string) {
+		focusIndex(index + 1, optionType)
+	}
+
+	function focusIndex(index: number, optionType: string) {
+		const inputRefs = instance?.proxy?.$refs?.input
+		const refsArray = Array.isArray(inputRefs)
+			? inputRefs
+			: inputRefs
+				? [inputRefs]
+				: []
+
+		const item = refsArray.find((component) => {
+			return (
+				(component as { $props?: { optionType?: string; index?: number } })
+					?.$props?.optionType === optionType
+				&& (
+					component as { $props?: { optionType?: string; index?: number } }
+				)?.$props?.index === index
+			)
+		})
+
+		if (item?.focus) {
+			item.focus()
+		} else {
+			logger.warn('Could not find option to focus', {
+				index,
+				options: sortedOptionsPerType.value[optionType],
+			})
+		}
+	}
+
+	function sortOptionsOfType(optionsList: FormsOption[], optionType: string) {
+		let filtered = optionsList.filter(
+			(option) => option.optionType === optionType,
+		)
+		if (typedProps.readOnly && typedProps.extraSettings?.shuffleOptions) {
+			return shuffleArray(filtered)
+		}
+
+		filtered = [...filtered].sort((a, b) => {
+			if (a.order === b.order) {
+				return a.id - b.id
+			}
+			return (a.order ?? 0) - (b.order ?? 0)
+		})
+
+		if (!typedProps.readOnly) {
+			return [
+				...filtered,
+				{
+					id: 0,
+					local: true,
+					questionId: typedProps.id,
+					text: '',
+					optionType,
+					order: filtered.length,
+				} as FormsOption,
+			]
+		}
+
+		return filtered
+	}
+
+	function updateOptionsOrder(newOptions: FormsOption[], optionType: string) {
+		replaceOptionsOfType(
+			newOptions
+				.filter((option) => !option.local)
+				.map((option, index) => {
+					return {
+						...option,
+						order: index,
+					}
+				}),
+			optionType,
+		)
+	}
+
+	function onCreateAnswer(index: number, answer: FormsOption): void {
+		nextTick(() => {
+			nextTick(() => focusIndex(index + 1, answer.optionType))
+		})
+		updateOptions([...typedProps.options, answer])
+	}
+
+	function replaceOptionsOfType(optionsList: FormsOption[], optionType: string) {
+		const updatedOptions = [
+			...typedProps.options.filter(
+				(option) => option.optionType !== optionType,
+			),
+			...optionsList,
+		]
+
+		updateOptions(updatedOptions)
+	}
+
+	function updateOptions(optionsList: FormsOption[]) {
+		options.emit('update:options', optionsList)
+		emitEvent('forms:last-updated:set', typedProps.formId)
+	}
+
+	function updateAnswer(index: number, answer: FormsOption) {
+		const optionsList = [...sortedOptionsPerType.value[answer.optionType]]
+		const [oldValue] = optionsList.splice(index, 1, answer)
+
+		if (oldValue.local && !answer.local) {
+			nextTick(() => {
+				nextTick(() => focusIndex(index, answer.optionType))
+			})
+		}
+
+		replaceOptionsOfType(
+			optionsList.filter(({ local }) => !local),
+			answer.optionType,
+		)
+	}
+
+	function checkValidOption(optionType: string) {
+		sortedOptionsPerType.value[optionType].forEach((option) => {
+			if (!option.text && !option.local) {
+				deleteOption(option)
+			}
+		})
+	}
+
+	function deleteOption(optionToDelete: FormsOption) {
+		const optionType = optionToDelete.optionType
+		const sortedOptions = sortedOptionsPerType.value[optionType]
+		const index = sortedOptions.findIndex(
+			(option) => option.id === optionToDelete.id,
+		)
+		const optionsList = [...sortedOptions]
+		const [option] = optionsList.splice(index, 1)
+
+		deleteOptionFromDatabase(option)
+
+		replaceOptionsOfType(
+			optionsList
+				.filter(({ local }) => !local)
+				.map((opt, order) => ({ ...opt, order })),
+			optionType,
+		)
+
+		nextTick(() => focusIndex(Math.max(index - 1, 0), optionType))
+	}
+
+	function deleteOptionFromDatabase(option: FormsOption & { local?: boolean }) {
+		const optionIndex = typedProps.options.findIndex(
+			(opt) => opt.id === option.id,
+		)
+
+		if (!option.local) {
+			axios
+				.delete(
+					generateOcsUrl(
+						'apps/forms/api/v3/forms/{id}/questions/{questionId}/options/{optionId}',
+						{
+							id: typedProps.formId,
+							questionId: typedProps.id,
+							optionId: option.id,
+						},
+					),
+				)
+				.catch((error) => {
+					logger.error('Error while deleting an option', {
+						error,
+						option,
+					})
+					showError(t('forms', 'There was an issue deleting this option'))
+					restoreOption(option, optionIndex)
+				})
+		}
+	}
+
+	function restoreOption(option: FormsOption, index: number) {
+		const optionsList = typedProps.options.slice()
+		optionsList.splice(index, 0, option)
+
+		updateOptions(optionsList)
+		focusIndex(index, option.optionType)
+	}
+
+	async function saveOptionsOrder(optionType: string) {
+		try {
+			const newOrder = sortedOptionsPerType.value[optionType]
+				.filter((option) => !option.local)
+				.map((option) => option.id)
+
+			await axios.patch(
+				generateOcsUrl(
+					'apps/forms/api/v3/forms/{id}/questions/{questionId}/options',
+					{
+						id: typedProps.formId,
+						questionId: typedProps.id,
+					},
+				),
+				{
+					newOrder,
+					optionType,
+				},
+			)
+			emitEvent('forms:last-updated:set', typedProps.formId)
+			dirtyOptionsType.value = null
+		} catch (error) {
+			logger.error('Could not reorder options', { error })
+			showError(t('forms', 'Error while saving options order'))
+		}
+	}
+
+	function onOptionMoveUp(index: number, optionType: string) {
+		if (index > 0) {
+			onOptionMoveDown(index - 1, optionType)
+		}
+	}
+
+	function onOptionMoveDown(index: number, optionType: string) {
+		if (index === sortedOptionsPerType.value[optionType].length - 1) {
+			return
+		}
+
+		const first = sortedOptionsPerType.value[optionType][index]
+		const second = sortedOptionsPerType.value[optionType][index + 1]
+		second.order = index
+		first.order = index + 1
+
+		dirtyOptionsType.value = optionType
+	}
+
+	watch(
+		dirtyOptionsType,
+		debounce((optionType: string | null) => {
+			if (!optionType) {
+				return
+			}
+			saveOptionsOrder(optionType)
+		}, INPUT_DEBOUNCE_MS),
+	)
+
+	return {
+		dirtyOptionsType,
+		areNoneChecked,
+		contentValid,
+		isLastEmpty,
+		expectedOptionTypes,
+		sortedOptionsPerType,
+		focusNextInput,
+		focusIndex,
+		sortOptionsOfType,
+		updateOptionsOrder,
+		onCreateAnswer,
+		replaceOptionsOfType,
+		updateOptions,
+		updateAnswer,
+		checkValidOption,
+		deleteOption,
+		deleteOptionFromDatabase,
+		restoreOption,
+		saveOptionsOrder,
+		onOptionMoveUp,
+		onOptionMoveDown,
+	}
+}
diff --git a/src/composables/useShareLink.ts b/src/composables/useShareLink.ts
new file mode 100644
index 000000000..d46439abf
--- /dev/null
+++ b/src/composables/useShareLink.ts
@@ -0,0 +1,99 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+import logger from '../utils/Logger.ts'
+
+export interface Share {
+	shareType: number
+	permissions?: string[]
+	shareWith?: string
+}
+
+export interface ShareLinkDependencies {
+	SHARE_TYPES: {
+		SHARE_TYPE_LINK: number
+	}
+	PERMISSION_TYPES: {
+		PERMISSION_EMBED: string
+	}
+}
+
+export interface UseShareLinkResult {
+	getInternalShareLink: (formHash: string) => string
+	getPublicShareLink: (share: Share) => string
+	isEmbeddingAllowed: (share: Share) => boolean
+	copyLink: (event: Event, link: string) => Promise<void>
+	copyEmbeddingCode: (event: Event, share: Share) => Promise<void>
+}
+
+/**
+ * Composition API access to share link helpers.
+ *
+ * @param dependencies Share type and permission constants.
+ */
+export function useShareLink(
+	dependencies: ShareLinkDependencies,
+): UseShareLinkResult {
+	const isEmbeddingAllowed = (share: Share): boolean => {
+		return (
+			share.shareType === dependencies.SHARE_TYPES.SHARE_TYPE_LINK
+			&& share.permissions?.includes(
+				dependencies.PERMISSION_TYPES.PERMISSION_EMBED,
+			)
+		)
+	}
+
+	const getInternalShareLink = (formHash: string): string => {
+		return (
+			window.location.protocol
+			+ '//'
+			+ window.location.host
+			+ generateUrl(`/apps/forms/${formHash}`)
+		)
+	}
+
+	const getPublicShareLink = (share: Share): string => {
+		const path = isEmbeddingAllowed(share)
+			? `/apps/forms/embed/${share.shareWith}`
+			: `/apps/forms/s/${share.shareWith}`
+		return new URL(generateUrl(path), window.location).href
+	}
+
+	const copyLink = async (event: Event, link: string): Promise<void> => {
+		try {
+			await navigator.clipboard.writeText(link)
+			showSuccess(t('forms', 'Form link copied'))
+		} catch (error) {
+			showError(t('forms', 'Cannot copy, please copy the link manually'))
+			logger.error('Copy link failed', { error })
+		}
+
+		;(event.target as HTMLElement).focus()
+	}
+
+	const copyEmbeddingCode = async (event: Event, share: Share): Promise<void> => {
+		const code = `<iframe src="${getPublicShareLink(share)}" width="750" height="900"></iframe>`
+
+		try {
+			await navigator.clipboard.writeText(code)
+			showSuccess(t('forms', 'Embedding code copied'))
+		} catch (error) {
+			showError(t('forms', 'Cannot copy the code'))
+			logger.error('Copy embedding code failed', { error })
+		}
+
+		;(event.target as HTMLElement).focus()
+	}
+
+	return {
+		getInternalShareLink,
+		getPublicShareLink,
+		isEmbeddingAllowed,
+		copyLink,
+		copyEmbeddingCode,
+	}
+}
diff --git a/src/composables/useShareTypes.ts b/src/composables/useShareTypes.ts
new file mode 100644
index 000000000..79390f711
--- /dev/null
+++ b/src/composables/useShareTypes.ts
@@ -0,0 +1,110 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import IconChatSvg from '@material-symbols/svg-400/outlined/chat_bubble.svg?raw'
+import IconCircleSvg from '@material-symbols/svg-400/outlined/circle.svg?raw'
+import IconGroupSvg from '@material-symbols/svg-400/outlined/group.svg?raw'
+import IconMailSvg from '@material-symbols/svg-400/outlined/mail.svg?raw'
+import IconUserSvg from '@material-symbols/svg-400/outlined/person.svg?raw'
+
+const FALLBACK_SHARE_TYPES = {
+	SHARE_TYPE_USER: 0,
+	SHARE_TYPE_GROUP: 1,
+	SHARE_TYPE_LINK: 3,
+	SHARE_TYPE_EMAIL: 4,
+	SHARE_TYPE_REMOTE: 6,
+	SHARE_TYPE_CIRCLE: 7,
+	SHARE_TYPE_GUEST: 8,
+	SHARE_TYPE_REMOTE_GROUP: 9,
+	SHARE_TYPE_ROOM: 10,
+}
+
+/**
+ * Resolve share types from Nextcloud globals and fall back to stable defaults
+ * when sharing globals are not initialized on the current page.
+ */
+function resolveShareTypes() {
+	const share = (globalThis as any)?.OC?.Share
+
+	return {
+		SHARE_TYPE_USER:
+			share?.SHARE_TYPE_USER ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_USER,
+		SHARE_TYPE_GROUP:
+			share?.SHARE_TYPE_GROUP ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_GROUP,
+		SHARE_TYPE_LINK:
+			share?.SHARE_TYPE_LINK ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_LINK,
+		SHARE_TYPE_EMAIL:
+			share?.SHARE_TYPE_EMAIL ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_EMAIL,
+		SHARE_TYPE_REMOTE:
+			share?.SHARE_TYPE_REMOTE ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_REMOTE,
+		SHARE_TYPE_CIRCLE:
+			share?.SHARE_TYPE_CIRCLE ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_CIRCLE,
+		SHARE_TYPE_GUEST:
+			share?.SHARE_TYPE_GUEST ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_GUEST,
+		SHARE_TYPE_REMOTE_GROUP:
+			share?.SHARE_TYPE_REMOTE_GROUP
+			?? FALLBACK_SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP,
+		SHARE_TYPE_ROOM:
+			share?.SHARE_TYPE_ROOM ?? FALLBACK_SHARE_TYPES.SHARE_TYPE_ROOM,
+	}
+}
+
+export const SHARE_TYPES = {
+	...resolveShareTypes(),
+}
+
+/**
+ * !!! Keep in Sync with lib/Constants.php !!
+ */
+export const SHARE_TYPES_USED = [
+	SHARE_TYPES.SHARE_TYPE_USER,
+	SHARE_TYPES.SHARE_TYPE_GROUP,
+	SHARE_TYPES.SHARE_TYPE_LINK,
+	SHARE_TYPES.SHARE_TYPE_CIRCLE,
+]
+
+/**
+ * Get the icon based on the share type.
+ *
+ * @param type The share type id.
+ */
+export function shareTypeToIcon(type: number): string {
+	switch (type) {
+		case SHARE_TYPES.SHARE_TYPE_GUEST:
+			// case SHARE_TYPES.SHARE_TYPE_REMOTE:
+			// case SHARE_TYPES.SHARE_TYPE_USER:
+			return IconUserSvg
+		case SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP:
+		case SHARE_TYPES.SHARE_TYPE_GROUP:
+			return IconGroupSvg
+		case SHARE_TYPES.SHARE_TYPE_EMAIL:
+			return IconMailSvg
+		case SHARE_TYPES.SHARE_TYPE_CIRCLE:
+			return IconCircleSvg
+		case SHARE_TYPES.SHARE_TYPE_ROOM:
+			return IconChatSvg
+
+		default:
+			return ''
+	}
+}
+
+export interface UseShareTypesResult {
+	SHARE_TYPES: typeof SHARE_TYPES
+	SHARE_TYPES_USED: number[]
+	shareTypeToIcon: (type: number) => string
+}
+
+/**
+ * Composition API access to share type constants and helpers.
+ */
+export function useShareTypes(): UseShareTypesResult {
+	return {
+		SHARE_TYPES,
+		SHARE_TYPES_USED: [...SHARE_TYPES_USED],
+		shareTypeToIcon,
+	}
+}
diff --git a/src/composables/useUserSearch.ts b/src/composables/useUserSearch.ts
new file mode 100644
index 000000000..9ea97f32f
--- /dev/null
+++ b/src/composables/useUserSearch.ts
@@ -0,0 +1,230 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { ComputedRef, Ref } from 'vue'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import debounce from 'debounce'
+import { computed, ref } from 'vue'
+import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+import { useShareTypes } from './useShareTypes.ts'
+
+export interface Sharee {
+	label: string
+	shareWithDisplayNameUnique: string
+	value: {
+		shareType: number
+		shareWith: string
+	}
+	status?: unknown
+}
+
+export interface SearchResultsResponse {
+	exact: Sharee[]
+	users?: Sharee[]
+	groups?: Sharee[]
+	[key: string]: Sharee[] | undefined
+}
+
+export interface FormattedSharee {
+	shareWith: string
+	shareType: number
+	user: string
+	isNoUser: boolean
+	id: string
+	displayName: string
+	subname: string
+	iconSvg: string
+	key: string
+}
+
+export interface UseUserSearchResult {
+	SHARE_TYPES: ReturnType<typeof useShareTypes>['SHARE_TYPES']
+	loading: Ref<boolean>
+	query: Ref<string>
+	recommendations: Ref<FormattedSharee[]>
+	suggestions: Ref<FormattedSharee[]>
+	isValidQuery: ComputedRef<boolean>
+	noResultText: ComputedRef<string>
+	asyncSearch: (query: string, shareType?: number[]) => Promise<void>
+	getRecommendations: () => Promise<void>
+}
+
+/**
+ * Composition API search logic shared by sharing and ownership transfer UI.
+ */
+export function useUserSearch(): UseUserSearchResult {
+	const { SHARE_TYPES, SHARE_TYPES_USED, shareTypeToIcon } = useShareTypes()
+
+	const loading = ref(false)
+	const query = ref('')
+	const maxAutocompleteResults =
+		parseInt((window as any).OC.config['sharing.maxAutocompleteResults'], 10)
+		|| 200
+	const minSearchStringLength =
+		parseInt((window as any).OC.config['sharing.minSearchStringLength'], 10) || 0
+	const recommendations = ref<FormattedSharee[]>([])
+	const suggestions = ref<FormattedSharee[]>([])
+
+	const isValidQuery = computed(() => {
+		return (
+			query.value
+			&& query.value.trim() !== ''
+			&& query.value.length > minSearchStringLength
+		)
+	})
+
+	const noResultText = computed(() => {
+		if (!query.value) {
+			return t('forms', 'No recommendations. Start typing.')
+		}
+		return t('forms', 'No elements found.')
+	})
+
+	const filterUnwantedShares = (shares: Sharee[]): Sharee[] => {
+		return shares.filter((share) => {
+			if (typeof share !== 'object') {
+				return false
+			}
+
+			try {
+				if (
+					share.value.shareType === SHARE_TYPES.SHARE_TYPE_USER
+					&& share.value.shareWith === getCurrentUser().uid
+				) {
+					return false
+				}
+
+				return true
+			} catch {
+				return false
+			}
+		})
+	}
+
+	const formatForMultiselect = (share: Sharee): FormattedSharee => {
+		return {
+			shareWith: share.value.shareWith,
+			shareType: share.value.shareType,
+			user: share.value.shareWith,
+			isNoUser: share.value.shareType !== SHARE_TYPES.SHARE_TYPE_USER,
+			id: share.value.shareWith,
+			displayName: share.label,
+			subname: share.shareWithDisplayNameUnique,
+			iconSvg: shareTypeToIcon(share.value.shareType),
+			key: share.value.shareWith + '-' + share.value.shareType,
+		}
+	}
+
+	const formatSearchResults = (
+		results: Record<string, Sharee[]> | Sharee[],
+	): FormattedSharee[] => {
+		const flatResults = Array.isArray(results)
+			? results
+			: Object.values(results).flat()
+
+		return filterUnwantedShares(flatResults)
+			.map((share) => formatForMultiselect(share))
+			.sort((a, b) => a.shareType - b.shareType)
+	}
+
+	const getSuggestions = async (
+		search: string,
+		shareType?: number[],
+	): Promise<void> => {
+		loading.value = true
+
+		shareType ??= SHARE_TYPES_USED.filter(
+			(type) => type !== SHARE_TYPES.SHARE_TYPE_LINK,
+		)
+
+		try {
+			const request = await axios.get(
+				generateOcsUrl('apps/files_sharing/api/v1/sharees'),
+				{
+					params: {
+						format: 'json',
+						itemType: 'file',
+						perPage: maxAutocompleteResults,
+						search,
+						shareType,
+					},
+				},
+			)
+
+			const data = OcsResponse2Data<SearchResultsResponse>(request)
+			const exact = data.exact
+			delete data.exact
+
+			const exactSuggestions = formatSearchResults(exact)
+			const dynamicSuggestions = formatSearchResults(data)
+
+			suggestions.value = exactSuggestions.concat(dynamicSuggestions)
+		} catch (error) {
+			logger.error('Loading Suggestions failed.', { error })
+		} finally {
+			loading.value = false
+		}
+	}
+
+	const debounceGetSuggestions = debounce(
+		(search: string, shareType?: number[]) => {
+			void getSuggestions(search, shareType)
+		},
+		INPUT_DEBOUNCE_MS,
+	)
+
+	const asyncSearch = async (
+		search: string,
+		shareType?: number[],
+	): Promise<void> => {
+		query.value = search.trim()
+		if (isValidQuery.value) {
+			loading.value = true
+			debounceGetSuggestions(search, shareType)
+		}
+	}
+
+	const getRecommendations = async (): Promise<void> => {
+		loading.value = true
+
+		try {
+			const request = await axios.get(
+				generateOcsUrl('apps/files_sharing/api/v1/sharees_recommended'),
+				{
+					params: {
+						format: 'json',
+						itemType: 'file',
+					},
+				},
+			)
+
+			recommendations.value = formatSearchResults(
+				OcsResponse2Data<SearchResultsResponse>(request).exact,
+			)
+		} catch (error) {
+			logger.error('Fetching recommendations failed.', { error })
+		} finally {
+			loading.value = false
+		}
+	}
+
+	return {
+		SHARE_TYPES,
+		loading,
+		query,
+		recommendations,
+		suggestions,
+		isValidQuery,
+		noResultText,
+		asyncSearch,
+		getRecommendations,
+	}
+}
diff --git a/src/composables/useViewForm.ts b/src/composables/useViewForm.ts
new file mode 100644
index 000000000..522ec875c
--- /dev/null
+++ b/src/composables/useViewForm.ts
@@ -0,0 +1,190 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ComputedRef, Ref } from 'vue'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import axios, { isCancel } from '@nextcloud/axios'
+import { showError } from '@nextcloud/dialogs'
+import { emit as emitEvent } from '@nextcloud/event-bus'
+import { t } from '@nextcloud/l10n'
+import moment from '@nextcloud/moment'
+import { generateOcsUrl } from '@nextcloud/router'
+import MarkdownIt from 'markdown-it'
+import { computed, nextTick, provide, ref } from 'vue'
+import CancelableRequest from '../utils/CancelableRequest.ts'
+import logger from '../utils/Logger.ts'
+import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
+
+export interface ViewFormLike {
+	id: number
+	hash: string
+	title: string
+	description: string
+	lockedBy?: string | null
+	lockedUntil?: number | null
+	[key: string]: unknown
+}
+
+export interface UseViewFormOptions {
+	form: () => ViewFormLike | Record<string, unknown>
+	emit: ((event: 'open-sharing', hash: string) => void)
+		& ((event: 'update:form', form: ViewFormLike) => void)
+	titleRef?: { value: { focus?: () => void } | null }
+}
+
+export interface UseViewFormResult {
+	isLoadingForm: Ref<boolean>
+	markdownit: MarkdownIt
+	formTitle: ComputedRef<string>
+	formDescription: ComputedRef<string>
+	isFormLocked: ComputedRef<boolean>
+	onShareForm: () => void
+	fetchFullForm: (id: number) => Promise<void>
+	saveFormProperty: (key: string) => Promise<void>
+	saveFormPropertyValue: (key: string, value: unknown) => Promise<void>
+	focusTitle: () => void
+}
+
+/**
+ * Shared view helpers previously provided via ViewsMixin.
+ *
+ * @param options View state and emit dependencies.
+ */
+export function useViewForm(options: UseViewFormOptions): UseViewFormResult {
+	const isLoadingForm = ref(true)
+	let cancelFetchFullForm: (reason?: string) => void = () => {}
+
+	const getForm = (): ViewFormLike => options.form() as ViewFormLike
+
+	const markdownit = new MarkdownIt({ breaks: true })
+	const defaultRender =
+		markdownit.renderer.rules.link_open
+		|| function (tokens, idx, renderOptions, env, self) {
+			return self.renderToken(tokens, idx, renderOptions)
+		}
+
+	markdownit.renderer.rules.link_open = function (
+		tokens,
+		idx,
+		renderOptions,
+		env,
+		self,
+	) {
+		tokens[idx].attrSet('target', '_blank')
+		return defaultRender(tokens, idx, renderOptions, env, self)
+	}
+
+	provide('$markdownit', markdownit)
+
+	const formTitle = computed(() => {
+		const form = getForm()
+		if (form.title) {
+			return form.title
+		}
+		return t('forms', 'New form')
+	})
+
+	const formDescription = computed(() => {
+		const form = getForm()
+		return markdownit.render(form.description || '') || form.description
+	})
+
+	const isFormLocked = computed(() => {
+		const form = getForm()
+		return (
+			form.lockedUntil === 0
+			|| (Number(form.lockedUntil || 0) > moment().unix()
+				&& form.lockedBy !== getCurrentUser().uid)
+		)
+	})
+
+	const focusTitle = () => {
+		nextTick(() => {
+			options.titleRef?.value?.focus?.()
+		})
+	}
+
+	const onShareForm = () => {
+		options.emit('open-sharing', getForm().hash)
+	}
+
+	const fetchFullForm = async (id: number): Promise<void> => {
+		isLoadingForm.value = true
+		cancelFetchFullForm('New request pending.')
+
+		logger.debug(`Loading form ${id}`)
+
+		const { request, cancel } = CancelableRequest(function (
+			url: string,
+			requestOptions?: Record<string, unknown>,
+		) {
+			return axios.get(url, requestOptions)
+		})
+		cancelFetchFullForm = cancel
+
+		try {
+			const response = await request(
+				generateOcsUrl('apps/forms/api/v3/forms/{id}', { id }),
+			)
+			options.emit('update:form', OcsResponse2Data(response))
+			isLoadingForm.value = false
+		} catch (error) {
+			if (isCancel(error)) {
+				logger.debug(`The request for form ${id} has been canceled`, {
+					error,
+				})
+			} else {
+				logger.error(`Unexpected error fetching form ${id}`, {
+					error,
+				})
+				isLoadingForm.value = false
+			}
+		} finally {
+			focusTitle()
+		}
+	}
+
+	const saveFormPropertyValue = async (
+		key: string,
+		value: unknown,
+	): Promise<void> => {
+		const form = getForm()
+		try {
+			await axios.patch(
+				generateOcsUrl('apps/forms/api/v3/forms/{id}', {
+					id: form.id,
+				}),
+				{
+					keyValuePairs: {
+						[key]: value,
+					},
+				},
+			)
+			emitEvent('forms:last-updated:set', form.id)
+		} catch (error) {
+			logger.error('Error saving form property', { error })
+			showError(t('forms', 'Error while saving form'))
+		}
+	}
+
+	const saveFormProperty = async (key: string): Promise<void> => {
+		const form = getForm()
+		await saveFormPropertyValue(key, form[key])
+	}
+
+	return {
+		isLoadingForm,
+		markdownit,
+		formTitle,
+		formDescription,
+		isFormLocked,
+		onShareForm,
+		fetchFullForm,
+		saveFormProperty,
+		saveFormPropertyValue,
+		focusTitle,
+	}
+}
diff --git a/src/mixins/PermissionTypes.ts b/src/mixins/PermissionTypes.ts
deleted file mode 100644
index 29017d67f..000000000
--- a/src/mixins/PermissionTypes.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { defineComponent } from 'vue'
-
-// !!! Keep in Sync with lib/Constants.php !!!
-export const PERMISSION_EDIT = 'edit' as string
-export const PERMISSION_RESULTS = 'results' as string
-export const PERMISSION_RESULTS_DELETE = 'results_delete' as string
-export const PERMISSION_SUBMIT = 'submit' as string
-/** Internal permission to mark public link shares as embeddable */
-export const PERMISSION_EMBED = 'embed' as string
-export const PERMISSION_ALL = [
-	PERMISSION_EDIT,
-	PERMISSION_RESULTS,
-	PERMISSION_RESULTS_DELETE,
-	PERMISSION_SUBMIT,
-] as string[]
-
-export const PERMISSION_TYPES = {
-	PERMISSION_EDIT,
-	PERMISSION_RESULTS,
-	PERMISSION_RESULTS_DELETE,
-	PERMISSION_SUBMIT,
-	PERMISSION_EMBED,
-	PERMISSION_ALL,
-}
-
-export default defineComponent({
-	name: 'PermissionTypes',
-
-	data() {
-		return {
-			PERMISSION_TYPES: {
-				PERMISSION_EDIT,
-				PERMISSION_RESULTS,
-				PERMISSION_RESULTS_DELETE,
-				PERMISSION_SUBMIT,
-				PERMISSION_EMBED,
-				PERMISSION_ALL,
-			},
-		}
-	},
-})
diff --git a/src/mixins/QuestionMixin.ts b/src/mixins/QuestionMixin.ts
deleted file mode 100644
index bbd57060a..000000000
--- a/src/mixins/QuestionMixin.ts
+++ /dev/null
@@ -1,424 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { FormsOption } from '../models/Entities.d.ts'
-
-import axios from '@nextcloud/axios'
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import { t } from '@nextcloud/l10n'
-import { generateOcsUrl } from '@nextcloud/router'
-import debounce from 'debounce'
-import { defineComponent } from 'vue'
-import Question from '../components/Questions/Question.vue'
-import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
-import logger from '../utils/Logger.ts'
-import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
-
-/** QuestionMixin data interface */
-interface QuestionMixinData {
-	errorMessage: string | null
-}
-
-export default defineComponent({
-	name: 'QuestionMixin',
-
-	inheritAttrs: false,
-
-	emits: [
-		'update:text',
-		'update:description',
-		'update:isRequired',
-		'update:extraSettings',
-		'update:name',
-		'update:values',
-		'delete',
-		'clone',
-		'keydown',
-		'moveDown',
-		'moveUp',
-	],
-
-	props: {
-		/** Question-Id */
-		id: {
-			type: Number,
-			required: true,
-		},
-
-		/** ID of the form */
-		formId: {
-			type: Number,
-			default: null,
-		},
-
-		/** The question title */
-		text: {
-			type: String,
-			required: true,
-		},
-
-		/** Question Description */
-		description: {
-			type: String,
-			required: true,
-		},
-
-		/** Required-Setting */
-		isRequired: {
-			type: Boolean,
-			required: true,
-		},
-
-		/** The index of the question */
-		index: {
-			type: Number,
-			required: true,
-		},
-
-		/** Technical name */
-		name: {
-			type: String,
-			default: '',
-		},
-
-		/** The user answers */
-		values: {
-			type: [Array, Object],
-			default() {
-				return []
-			},
-		},
-
-		/** The question list of answers */
-		options: {
-			type: Array as () => FormsOption[],
-			required: true,
-		},
-
-		/** Order of the question */
-		order: {
-			type: Number,
-			default: -1,
-		},
-
-		/** Question type */
-		type: {
-			type: String,
-			default: null,
-		},
-
-		/** Answer type model object */
-		answerType: {
-			type: Object,
-			required: true,
-		},
-
-		/** Submission or Edit-Mode */
-		readOnly: {
-			type: Boolean,
-			default: false,
-		},
-
-		/** Database-Restrictions */
-		maxStringLengths: {
-			type: Object,
-			required: true,
-		},
-
-		/** Extra settings */
-		extraSettings: {
-			default: () => {
-				return {}
-			},
-		},
-
-		/** Mime-Types and file extensions that are allowed to be uploaded */
-		accept: {
-			type: Array,
-			default() {
-				return []
-			},
-		},
-
-		/** Can question be moved up in order? */
-		canMoveUp: {
-			type: Boolean,
-			default: false,
-		},
-
-		/** Can question be moved down in order? */
-		canMoveDown: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	components: {
-		Question,
-	},
-
-	data(): QuestionMixinData {
-		return {
-			/** The shown error message */
-			errorMessage: null,
-		}
-	},
-
-	computed: {
-		questionProps(): any {
-			const props = { ...this.$props } as Record<string, unknown>
-			const allowedKeys = Object.keys(Question.props || {})
-			Object.keys(props).forEach((key) => {
-				if (!allowedKeys.includes(key)) {
-					delete props[key]
-				}
-			})
-			return props
-		},
-
-		titleId(): string {
-			return 'q' + this.index + '_title'
-		},
-
-		descriptionId(): string {
-			return 'q' + this.index + '_desc'
-		},
-
-		hasError(): boolean {
-			return !!this.errorMessage
-		},
-
-		hasInfo(): boolean {
-			return !!(this as any).infoMessage
-		},
-
-		errorId(): string {
-			return `q${this.index}_error`
-		},
-
-		infoId(): string {
-			return `q${this.index}_info`
-		},
-
-		/**
-		 * Listeners for all questions to forward
-		 */
-		commonListeners(): any {
-			return {
-				clone: this.onClone,
-				delete: this.onDelete,
-				'update:text': this.onTitleChange,
-				'update:description': this.onDescriptionChange,
-				'update:isRequired': this.onRequiredChange,
-				'update:name': this.onNameChange,
-				moveDown: (...args: any[]) => this.$emit('moveDown', ...args),
-				moveUp: (...args: any[]) => this.$emit('moveUp', ...args),
-			}
-		},
-	},
-
-	methods: {
-		/**
-		 * Override to allow custom validation
-		 */
-		async validate(): Promise<boolean> {
-			return true
-		},
-
-		/**
-		 * Forward the title change to the parent and store to db
-		 */
-		onTitleChange: debounce(function (this: any, text: string) {
-			this.$emit('update:text', text)
-			this.saveQuestionProperty('text', text)
-		}, INPUT_DEBOUNCE_MS),
-
-		/**
-		 * Forward the description change to the parent and store to db
-		 */
-		onDescriptionChange: debounce(function (this: any, description: string) {
-			this.$emit('update:description', description)
-			this.saveQuestionProperty('description', description)
-		}, INPUT_DEBOUNCE_MS),
-
-		/**
-		 * Forward the required change to the parent and store to db
-		 */
-		onRequiredChange: debounce(function (this: any, isRequiredValue: boolean) {
-			this.$emit('update:isRequired', isRequiredValue)
-			this.saveQuestionProperty('isRequired', isRequiredValue)
-		}, INPUT_DEBOUNCE_MS),
-
-		/**
-		 * Create mapper to forward the required change to the parent and store to db
-		 */
-		onExtraSettingsChange: debounce(function (this: any, newSettings: any) {
-			const newExtraSettings = { ...this.extraSettings, ...newSettings }
-			this.$emit('update:extraSettings', newExtraSettings)
-			this.saveQuestionProperty('extraSettings', newExtraSettings)
-		}, INPUT_DEBOUNCE_MS),
-
-		/**
-		 * Forward the technical-name change to the parent and store to db
-		 */
-		onNameChange: debounce(function (this: any, name: string) {
-			this.$emit('update:name', name)
-			this.saveQuestionProperty('name', name)
-		}, INPUT_DEBOUNCE_MS),
-
-		/**
-		 * Forward the required change to the parent and store to db
-		 *
-		 * @param shuffle if options should be shuffled
-		 */
-		onShuffleOptionsChange(shuffle: boolean): void {
-			return (this.onExtraSettingsChange as any)({ shuffleOptions: shuffle })
-		},
-
-		/**
-		 * Forward the answer(s) change to the parent
-		 *
-		 * @param values the changed values
-		 */
-		onValuesChange(values: any): void {
-			this.$emit('update:values', values)
-		},
-
-		/**
-		 * Delete this question
-		 */
-		onDelete(): void {
-			this.$emit('delete')
-		},
-
-		/**
-		 * Clone this question.
-		 */
-		onClone(): void {
-			this.$emit('clone')
-		},
-
-		/**
-		 * Don't automatically submit form on Enter, parent will handle that.
-		 * To be called with prevent: \@keydown.enter.prevent="onKeydownEnter"
-		 *
-		 * @param event the KeyboardEvent
-		 */
-		onKeydownEnter(event: KeyboardEvent): void {
-			this.$emit('keydown', event)
-		},
-
-		/**
-		 * Focus the first focusable element
-		 */
-		focus(): void {
-			;(this.$el as HTMLElement).scrollIntoView({ behavior: 'smooth' })
-			this.$nextTick(() => {
-				const title = (this.$el as HTMLElement).querySelector(
-					'.question__header__title__text__input',
-				) as HTMLInputElement
-				if (title) {
-					title.focus()
-				}
-			})
-		},
-
-		/**
-		 * Shuffle an array using Fisher-Yates
-		 *
-		 * @param input the array to shuffle
-		 */
-		shuffleArray(input: any[]): any[] {
-			const shuffled = [...input]
-			let idx = shuffled.length
-			while (--idx > 0) {
-				const rndIdx = Math.floor(Math.random() * (idx + 1))
-				;[shuffled[rndIdx], shuffled[idx]] = [
-					shuffled[idx],
-					shuffled[rndIdx],
-				]
-			}
-			return shuffled
-		},
-
-		async saveQuestionProperty(key: string, value: any): Promise<void> {
-			try {
-				// TODO: add loading status feedback ?
-				await axios.patch(
-					generateOcsUrl(
-						'apps/forms/api/v3/forms/{id}/questions/{questionId}',
-						{
-							id: this.formId,
-							questionId: this.id,
-						},
-					),
-					{
-						keyValuePairs: {
-							[key]: value,
-						},
-					},
-				)
-				emit('forms:last-updated:set', this.formId)
-			} catch (error) {
-				logger.error('Error while saving question', { error })
-				showError(t('forms', 'Error while saving question'))
-			}
-		},
-
-		/**
-		 * Handles multiple options for a question.
-		 *
-		 * @param answers the array of options
-		 */
-		async handleMultipleOptions(answers: string[]): Promise<void> {
-			const component = this as any
-			if (component.isLoading !== undefined) {
-				component.isLoading = true
-			}
-			try {
-				const response = await axios.post(
-					generateOcsUrl(
-						'apps/forms/api/v3/forms/{id}/questions/{questionId}/options',
-						{
-							id: this.formId,
-							questionId: this.id,
-						},
-					),
-					{
-						optionTexts: answers,
-						optionType: OptionType.Choice,
-					},
-				)
-				const newServerOptions = OcsResponse2Data<FormsOption[]>(response)
-				const options = this.options.slice()
-				newServerOptions.forEach((option: FormsOption) => {
-					options.push({
-						id: option.id,
-						questionId: this.id,
-						text: option.text,
-						optionType: option.optionType,
-						local: false,
-					})
-				})
-				if (component.updateOptions) {
-					component.updateOptions(options)
-				}
-				this.$nextTick(() => {
-					if (component.focusIndex) {
-						component.focusIndex(options.length - 1, OptionType.Choice)
-					}
-				})
-			} catch (error) {
-				logger.error('Error while saving question options', { error })
-				showError(t('forms', 'Error while saving question options'))
-			}
-			if (component.isLoading !== undefined) {
-				component.isLoading = false
-			}
-		},
-	},
-})
diff --git a/src/mixins/QuestionMultipleMixin.ts b/src/mixins/QuestionMultipleMixin.ts
deleted file mode 100644
index a15c0ac98..000000000
--- a/src/mixins/QuestionMultipleMixin.ts
+++ /dev/null
@@ -1,431 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import type { FormsOption } from '../models/Entities.d.ts'
-
-import axios from '@nextcloud/axios'
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import { t } from '@nextcloud/l10n'
-import { generateOcsUrl } from '@nextcloud/router'
-import debounce from 'debounce'
-import { defineComponent } from 'vue'
-import { INPUT_DEBOUNCE_MS, OptionType } from '../models/Constants.ts'
-import logger from '../utils/Logger.ts'
-
-// Temporary augmentation to allow using `this.<prop>` in mixin methods
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		options: FormsOption[]
-		values: unknown[]
-		answerType: { validate: (ctx: unknown) => boolean }
-		readOnly: boolean
-		extraSettings?: { shuffleOptions?: boolean }
-		formId: number
-		id: number
-		shuffleArray: <T>(arr: T[]) => T[]
-		$refs: {
-			input: Array<{
-				$props: { optionType: string; index: number }
-				focus: () => void
-			}>
-		}
-	}
-}
-
-export default defineComponent({
-	emits: ['update:options'],
-
-	data() {
-		return {
-			dirtyOptionsType: null as string | null,
-		}
-	},
-
-	computed: {
-		areNoneChecked(): boolean {
-			return this.values.length === 0
-		},
-
-		contentValid(): boolean {
-			return this.answerType.validate(this)
-		},
-
-		isLastEmpty(): boolean {
-			const value = this.options[this.options.length - 1] as
-				FormsOption | undefined
-			return value?.text?.trim?.().length === 0
-		},
-
-		expectedOptionTypes(): OptionType[] {
-			return [OptionType.Choice, OptionType.Row, OptionType.Column]
-		},
-
-		sortedOptionsPerType(): { [key: string]: FormsOption[] } {
-			const optionsPerType: { [key: string]: FormsOption[] } =
-				Object.fromEntries(
-					this.expectedOptionTypes.map((optionType) => [
-						optionType,
-						[] as FormsOption[],
-					]),
-				)
-
-			this.options.forEach((option: FormsOption) => {
-				optionsPerType[option.optionType].push(option)
-			})
-
-			for (const optionType of Object.keys(optionsPerType)) {
-				// Only shuffle options if not in editing mode (and shuffling is enabled)
-				if (this.readOnly && this.extraSettings?.shuffleOptions) {
-					optionsPerType[optionType] = this.shuffleArray(
-						optionsPerType[optionType],
-					)
-				} else {
-					// Ensure order of options always is the same
-					optionsPerType[optionType] = [
-						...optionsPerType[optionType],
-					].sort((a, b) => {
-						if (a.order === b.order) {
-							return a.id - b.id
-						}
-						return (a.order ?? 0) - (b.order ?? 0)
-					})
-
-					if (!this.readOnly) {
-						// In edit mode append an empty option (cast as FormsOption temporarily)
-						optionsPerType[optionType].push({
-							id: 0,
-							local: true,
-							questionId: this.id,
-							text: '',
-							optionType,
-							order: optionsPerType[optionType].length,
-						} as FormsOption)
-					}
-				}
-			}
-
-			return optionsPerType
-		},
-	},
-
-	methods: {
-		/**
-		 * Set focus on next AnswerInput
-		 *
-		 * @param index Index of current option
-		 * @param optionType Type of current option
-		 */
-		focusNextInput(index: number, optionType: string) {
-			this.focusIndex(index + 1, optionType)
-		},
-
-		/**
-		 * Focus the input matching the index
-		 *
-		 * @param index the value index
-		 * @param optionType the option type to focus
-		 */
-		focusIndex(index: number, optionType: string) {
-			// refs are not guaranteed to be in correct order - we need to find the correct item
-			const item = this.$refs.input.find((instance: unknown) => {
-				const candidate = instance as {
-					$props: { optionType: string; index: number }
-					focus: () => void
-				}
-				return (
-					candidate.$props.optionType === optionType
-					&& candidate.$props.index === index
-				)
-			})
-			if (item) {
-				item.focus()
-			} else {
-				logger.warn('Could not find option to focus', {
-					index,
-					options: this.sortedOptionsPerType[optionType],
-				})
-			}
-		},
-
-		sortOptionsOfType(
-			options: FormsOption[],
-			optionType: string,
-		): FormsOption[] {
-			// Only shuffle options if not in editing mode (and shuffling is enabled)
-			options = options.filter((option) => option.optionType === optionType)
-			if (this.readOnly && this.extraSettings?.shuffleOptions) {
-				return this.shuffleArray(options)
-			}
-
-			// Ensure order of options always is the same
-			options = [...options].sort((a, b) => {
-				if (a.order === b.order) {
-					return a.id - b.id
-				}
-				return (a.order ?? 0) - (b.order ?? 0)
-			})
-
-			if (!this.readOnly) {
-				// In edit mode append an empty option
-				return [
-					...options,
-					{
-						id: 0,
-						local: true,
-						questionId: this.id,
-						text: '',
-						optionType,
-						order: options.length,
-					} as FormsOption,
-				]
-			}
-			return options
-		},
-
-		updateOptionsOrder(newOptions: FormsOption[], optionType: string) {
-			this.replaceOptionsOfType(
-				newOptions
-					.filter((option) => !option.local)
-					.map((option, index) => {
-						return {
-							...option,
-							order: index,
-						}
-					}),
-				optionType,
-			)
-		},
-
-		/**
-		 * Handles the creation of a new answer option.
-		 *
-		 * @param index the index of the answer
-		 * @param answer - The new answer option to be added.
-		 */
-		onCreateAnswer(index: number, answer: FormsOption): void {
-			this.$nextTick(() => {
-				// Move focus to the newly appended empty local option.
-				this.$nextTick(() => this.focusIndex(index + 1, answer.optionType))
-			})
-			this.updateOptions([...this.options, answer])
-		},
-
-		/**
-		 * Replace all options of a certain type
-		 *
-		 * @param options options to change
-		 * @param optionType the type of options to update
-		 */
-		replaceOptionsOfType(options: FormsOption[], optionType: string) {
-			const updatedOptions = [
-				...this.options.filter((option) => option.optionType !== optionType),
-				...options,
-			]
-
-			this.updateOptions(updatedOptions)
-		},
-		/**
-		 * Update the options
-		 * This will handle updating the form (emitting the changes) and update last changed property
-		 *
-		 * @param options options to change
-		 */
-		updateOptions(options: FormsOption[]) {
-			this.$emit('update:options', options)
-			emit('forms:last-updated:set', this.formId)
-		},
-
-		/**
-		 * Update an existing answer locally
-		 *
-		 * @param index the current index to update
-		 * @param answer the new answer value
-		 */
-		updateAnswer(index: number, answer: FormsOption) {
-			const options = [...this.sortedOptionsPerType[answer.optionType]]
-			const [oldValue] = options.splice(index, 1, answer)
-
-			// New value created - we need to set the correct focus
-			if (oldValue.local && !answer.local) {
-				this.$nextTick(() => {
-					this.$nextTick(() => this.focusIndex(index, answer.optionType))
-				})
-			}
-
-			this.replaceOptionsOfType(
-				options.filter(({ local }) => !local),
-				answer.optionType,
-			)
-		},
-
-		/**
-		 * Remove any empty options when leaving an option
-		 *
-		 * @param optionType The type of options to validate
-		 */
-		checkValidOption(optionType: string) {
-			// When leaving edit mode, filter and delete empty options
-			this.sortedOptionsPerType[optionType].forEach((option) => {
-				if (!option.text && !option.local) {
-					this.deleteOption(option)
-				}
-			})
-		},
-
-		/**
-		 * Delete an option
-		 *
-		 * @param optionToDelete The option to delete
-		 */
-		deleteOption(optionToDelete: FormsOption) {
-			const optionType = optionToDelete.optionType
-			const sortedOptions = this.sortedOptionsPerType[optionType]
-			const index = sortedOptions.findIndex(
-				(option) => option.id === optionToDelete.id,
-			)
-			const options = [...sortedOptions]
-			const [option] = options.splice(index, 1)
-
-			// delete from Db
-			this.deleteOptionFromDatabase(option)
-
-			// Update question - remove option and reorder other
-			this.replaceOptionsOfType(
-				options
-					.filter(({ local }) => !local)
-					.map((option, order) => ({ ...option, order })),
-				optionType,
-			)
-
-			// Focus the previous option
-			this.$nextTick(() => this.focusIndex(Math.max(index - 1, 0), optionType))
-		},
-
-		/**
-		 * Delete the option from Db in background.
-		 * Restore option if delete not possible
-		 *
-		 * @param option The option to delete
-		 */
-		deleteOptionFromDatabase(option: FormsOption & { local?: boolean }) {
-			const optionIndex = this.options.findIndex(
-				(opt: FormsOption) => opt.id === option.id,
-			)
-
-			if (!option.local) {
-				// let's not await, deleting in background
-				axios
-					.delete(
-						generateOcsUrl(
-							'apps/forms/api/v3/forms/{id}/questions/{questionId}/options/{optionId}',
-							{
-								id: this.formId,
-								questionId: this.id,
-								optionId: option.id,
-							},
-						),
-					)
-					.catch((error) => {
-						logger.error('Error while deleting an option', {
-							error,
-							option,
-						})
-						showError(
-							t('forms', 'There was an issue deleting this option'),
-						)
-						// restore option
-						this.restoreOption(option, optionIndex)
-					})
-			}
-		},
-
-		/**
-		 * Restore an option locally
-		 *
-		 * @param option the option
-		 * @param index the options index in this.options
-		 */
-		restoreOption(option: FormsOption, index: number) {
-			const options = this.options.slice()
-			options.splice(index, 0, option)
-
-			this.updateOptions(options)
-			this.focusIndex(index, option.optionType)
-		},
-
-		async saveOptionsOrder(optionType: string) {
-			try {
-				const newOrder = this.sortedOptionsPerType[optionType]
-					.filter((option) => !option.local)
-					.map((option) => option.id)
-
-				await axios.patch(
-					generateOcsUrl(
-						'apps/forms/api/v3/forms/{id}/questions/{questionId}/options',
-						{
-							id: this.formId,
-							questionId: this.id,
-						},
-					),
-					{
-						newOrder,
-						optionType,
-					},
-				)
-				emit('forms:last-updated:set', this.formId)
-				this.dirtyOptionsType = null
-			} catch (error) {
-				logger.error('Could not reorder options', { error })
-				showError(t('forms', 'Error while saving options order'))
-			}
-		},
-
-		/**
-		 * Reorder option by moving it upwards the list
-		 *
-		 * @param index Option that should move up
-		 * @param optionType Type of current option
-		 */
-		onOptionMoveUp(index: number, optionType: string) {
-			if (index > 0) {
-				this.onOptionMoveDown(index - 1, optionType)
-			}
-		},
-
-		/**
-		 * Reorder option by moving it downwards the list
-		 *
-		 * @param index Option that should move down
-		 * @param optionType Type of current option
-		 */
-		onOptionMoveDown(index: number, optionType: string) {
-			if (index === this.sortedOptionsPerType[optionType].length - 1) {
-				return
-			}
-
-			// swap positions
-			const first = this.sortedOptionsPerType[optionType][index]
-			const second = this.sortedOptionsPerType[optionType][index + 1]
-			second.order = index
-			first.order = index + 1
-
-			this.dirtyOptionsType = optionType
-		},
-	},
-
-	watch: {
-		dirtyOptionsType: debounce(function (this: {
-			dirtyOptionsType: string | null
-			saveOptionsOrder: (optionType: string) => Promise<void>
-		}) {
-			if (!this.dirtyOptionsType) {
-				return
-			}
-
-			this.saveOptionsOrder(this.dirtyOptionsType)
-		}, INPUT_DEBOUNCE_MS),
-	},
-})
diff --git a/src/mixins/ShareLinkMixin.ts b/src/mixins/ShareLinkMixin.ts
deleted file mode 100644
index 82c40e84f..000000000
--- a/src/mixins/ShareLinkMixin.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { showError, showSuccess } from '@nextcloud/dialogs'
-import { t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
-import logger from '../utils/Logger.ts'
-
-export interface Share {
-	shareType: number
-	permissions?: string[]
-	shareWith?: string
-}
-
-export default defineComponent({
-	name: 'ShareLinkMixin',
-
-	methods: {
-		/**
-		 * Get the internal link for sharing the form
-		 *
-		 * @param formHash Internal form hash
-		 * @return link
-		 */
-		getInternalShareLink(formHash: string): string {
-			return (
-				window.location.protocol
-				+ '//'
-				+ window.location.host
-				+ generateUrl(`/apps/forms/${formHash}`)
-			)
-		},
-
-		/**
-		 * Get the publish share link for a given share
-		 *
-		 * @param share The share
-		 * @return link
-		 */
-		getPublicShareLink(share: Share): string {
-			let url
-
-			if ((this as any).isEmbeddingAllowed(share)) {
-				url = generateUrl(`/apps/forms/embed/${share.shareWith}`)
-			} else {
-				url = generateUrl(`/apps/forms/s/${share.shareWith}`)
-			}
-			return new URL(url, window.location.href).href
-		},
-
-		/**
-		 * Check if a share can be used for embedding
-		 *
-		 * @param share The share to check
-		 */
-		isEmbeddingAllowed(share: Share): boolean {
-			const self = this as any
-			return (
-				share.shareType === self.SHARE_TYPES.SHARE_TYPE_LINK
-				&& Boolean(
-					share.permissions?.includes(
-						self.PERMISSION_TYPES.PERMISSION_EMBED,
-					),
-				)
-			)
-		},
-
-		/**
-		 * Copy link to clipboard.
-		 *
-		 * @param event Origin event of function call.
-		 * @param link Link to copy
-		 */
-		async copyLink(event: Event, link: string): Promise<void> {
-			// Copy link, boolean return indicates success or fail.
-			try {
-				await navigator.clipboard.writeText(link)
-				showSuccess(t('forms', 'Form link copied'))
-			} catch (error) {
-				showError(t('forms', 'Cannot copy, please copy the link manually'))
-				logger.error('Copy link failed', { error })
-			}
-			// Set back focus as clipboard removes focus
-			;(event.target as HTMLElement).focus()
-		},
-
-		/**
-		 * Copy code to embed public share inside external websites
-		 *
-		 * @param event Origin event of function call.
-		 * @param share Public link-share
-		 */
-		async copyEmbeddingCode(event: Event, share: Share): Promise<void> {
-			const code = `<iframe src="${this.getPublicShareLink(share)}" width="750" height="900"></iframe>`
-			try {
-				await navigator.clipboard.writeText(code)
-				showSuccess(t('forms', 'Embedding code copied'))
-			} catch (error) {
-				showError(t('forms', 'Cannot copy the code'))
-				logger.error('Copy embedding code failed', { error })
-			}
-			// Set back focus as clipboard removes focus
-			;(event.target as HTMLElement).focus()
-		},
-	},
-})
diff --git a/src/mixins/ShareTypes.ts b/src/mixins/ShareTypes.ts
deleted file mode 100644
index 9370f55ca..000000000
--- a/src/mixins/ShareTypes.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import IconChatSvg from '@material-symbols/svg-400/outlined/chat_bubble.svg?raw'
-import IconCircleSvg from '@material-symbols/svg-400/outlined/circle.svg?raw'
-import IconGroupSvg from '@material-symbols/svg-400/outlined/group.svg?raw'
-import IconMailSvg from '@material-symbols/svg-400/outlined/mail.svg?raw'
-import IconUserSvg from '@material-symbols/svg-400/outlined/person.svg?raw'
-import { defineComponent } from 'vue'
-
-export interface ShareTypesData {
-	SHARE_TYPES: {
-		SHARE_TYPE_USER: number
-		SHARE_TYPE_GROUP: number
-		SHARE_TYPE_LINK: number
-		SHARE_TYPE_EMAIL: number
-		SHARE_TYPE_REMOTE: number
-		SHARE_TYPE_CIRCLE: number
-		SHARE_TYPE_GUEST: number
-		SHARE_TYPE_REMOTE_GROUP: number
-		SHARE_TYPE_ROOM: number
-	}
-	SHARE_TYPES_USED: number[]
-}
-
-export default defineComponent({
-	name: 'ShareTypes',
-
-	data(): ShareTypesData {
-		return {
-			SHARE_TYPES: {
-				SHARE_TYPE_USER: (window as any).OC.Share.SHARE_TYPE_USER,
-				SHARE_TYPE_GROUP: (window as any).OC.Share.SHARE_TYPE_GROUP,
-				SHARE_TYPE_LINK: (window as any).OC.Share.SHARE_TYPE_LINK,
-				SHARE_TYPE_EMAIL: (window as any).OC.Share.SHARE_TYPE_EMAIL,
-				SHARE_TYPE_REMOTE: (window as any).OC.Share.SHARE_TYPE_REMOTE,
-				SHARE_TYPE_CIRCLE: (window as any).OC.Share.SHARE_TYPE_CIRCLE,
-				SHARE_TYPE_GUEST: (window as any).OC.Share.SHARE_TYPE_GUEST,
-				SHARE_TYPE_REMOTE_GROUP: (window as any).OC.Share
-					.SHARE_TYPE_REMOTE_GROUP,
-				SHARE_TYPE_ROOM: (window as any).OC.Share.SHARE_TYPE_ROOM,
-			},
-
-			/**
-			 * !!! Keep in Sync with lib/Constants.php !!
-			 */
-			SHARE_TYPES_USED: [
-				(window as any).OC.Share.SHARE_TYPE_USER,
-				(window as any).OC.Share.SHARE_TYPE_GROUP,
-				(window as any).OC.Share.SHARE_TYPE_LINK,
-				(window as any).OC.Share.SHARE_TYPE_CIRCLE,
-			],
-		}
-	},
-
-	methods: {
-		/**
-		 * Get the icon based on the share type
-		 * Default share is a user, other icons are here to differenciate from it, so let's not display the user icon.
-		 *
-		 * @param type the share type
-		 * @return the icon as raw svg
-		 */
-		shareTypeToIcon(type: number): string {
-			switch (type) {
-				case this.SHARE_TYPES.SHARE_TYPE_GUEST:
-					// case this.SHARE_TYPES.SHARE_TYPE_REMOTE:
-					// case this.SHARE_TYPES.SHARE_TYPE_USER:
-					return IconUserSvg
-				case this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP:
-				case this.SHARE_TYPES.SHARE_TYPE_GROUP:
-					return IconGroupSvg
-				case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
-					return IconMailSvg
-				case this.SHARE_TYPES.SHARE_TYPE_CIRCLE:
-					return IconCircleSvg
-				case this.SHARE_TYPES.SHARE_TYPE_ROOM:
-					return IconChatSvg
-
-				default:
-					return ''
-			}
-		},
-	},
-})
diff --git a/src/mixins/UserSearchMixin.ts b/src/mixins/UserSearchMixin.ts
deleted file mode 100644
index 325c09efa..000000000
--- a/src/mixins/UserSearchMixin.ts
+++ /dev/null
@@ -1,283 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { getCurrentUser } from '@nextcloud/auth'
-import axios from '@nextcloud/axios'
-import { t } from '@nextcloud/l10n'
-import { generateOcsUrl } from '@nextcloud/router'
-import debounce from 'debounce'
-import { defineComponent } from 'vue'
-import { INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
-import logger from '../utils/Logger.ts'
-import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
-import ShareTypes from './ShareTypes.ts'
-
-export interface Sharee {
-	label: string
-	shareWithDisplayNameUnique: string
-	value: {
-		shareType: number
-		shareWith: string
-	}
-	status?: unknown
-}
-
-export interface SearchResultsResponse {
-	exact: Sharee[]
-	users?: Sharee[]
-	groups?: Sharee[]
-	[key: string]: Sharee[] | undefined
-}
-
-export interface FormattedSharee {
-	shareWith: string
-	shareType: number
-	user: string
-	isNoUser: boolean
-	id: string
-	displayName: string
-	subname: string
-	iconSvg: string
-	key: string
-}
-
-export interface UserSearchMixinData {
-	loading: boolean
-	query: string
-	maxAutocompleteResults: number
-	minSearchStringLength: number
-	recommendations: FormattedSharee[]
-	suggestions: FormattedSharee[]
-}
-
-export default defineComponent({
-	name: 'UserSearchMixin',
-
-	mixins: [ShareTypes],
-
-	data(): UserSearchMixinData {
-		return {
-			loading: false,
-
-			query: '',
-			// TODO: have a global mixin for this, shared with server?
-			maxAutocompleteResults:
-				parseInt(
-					(window as any).OC.config['sharing.maxAutocompleteResults'],
-					10,
-				) || 200,
-			minSearchStringLength:
-				parseInt(
-					(window as any).OC.config['sharing.minSearchStringLength'],
-					10,
-				) || 0,
-			// Search Results
-			recommendations: [],
-			suggestions: [],
-		}
-	},
-
-	computed: {
-		/**
-		 * Is the search query valid ?
-		 */
-		isValidQuery(): boolean {
-			return (
-				Boolean(this.query)
-				&& this.query.trim() !== ''
-				&& this.query.length > this.minSearchStringLength
-			)
-		},
-
-		/**
-		 * Text when there is no Results to be shown
-		 */
-		noResultText(): string {
-			if (!this.query) {
-				return t('forms', 'No recommendations. Start typing.')
-			}
-			return t('forms', 'No elements found.')
-		},
-	},
-
-	methods: {
-		/**
-		 * Search for suggestions
-		 *
-		 * @param query The search query to search for
-		 * @param shareType The type of recipient to search.
-		 */
-		async asyncSearch(query: string, shareType?: number[]): Promise<void> {
-			// save query to check if valid
-			this.query = query.trim()
-			if (this.isValidQuery) {
-				// already set loading to have proper ux feedback during debounce
-				this.loading = true
-				this.debounceGetSuggestions(query, shareType)
-			}
-		},
-
-		/**
-		 * Debounce getSuggestions
-		 */
-		debounceGetSuggestions: debounce(function (
-			this: any,
-			...args: [string, number[] | undefined]
-		) {
-			this.getSuggestions(...args)
-		}, INPUT_DEBOUNCE_MS),
-
-		/**
-		 * Get suggestions
-		 *
-		 * @param query the search query
-		 * @param shareType The type of recipient to search.
-		 */
-		async getSuggestions(query: string, shareType?: number[]): Promise<void> {
-			this.loading = true
-
-			// Search for all used share-types, except public link.
-
-			shareType ??= (this as any).SHARE_TYPES_USED.filter(
-				(type: number) => type !== (this as any).SHARE_TYPES.SHARE_TYPE_LINK,
-			)
-
-			try {
-				const request = await axios.get(
-					generateOcsUrl('apps/files_sharing/api/v1/sharees'),
-					{
-						params: {
-							format: 'json',
-							itemType: 'file',
-							perPage: this.maxAutocompleteResults,
-							search: query,
-							shareType,
-						},
-					},
-				)
-
-				const data = OcsResponse2Data<SearchResultsResponse>(request)
-				const { exact, ...rest } = data
-
-				const exactSuggestions = this.formatSearchResults(exact)
-				const suggestions = this.formatSearchResults(rest)
-
-				this.suggestions = exactSuggestions.concat(suggestions)
-			} catch (error) {
-				logger.error('Loading Suggestions failed.', { error })
-			} finally {
-				this.loading = false
-			}
-		},
-
-		/**
-		 * Get the sharing recommendations
-		 */
-		async getRecommendations(): Promise<void> {
-			this.loading = true
-
-			try {
-				const request = await axios.get(
-					generateOcsUrl('apps/files_sharing/api/v1/sharees_recommended'),
-					{
-						params: {
-							format: 'json',
-							itemType: 'file',
-						},
-					},
-				)
-
-				this.recommendations = this.formatSearchResults(
-					OcsResponse2Data<SearchResultsResponse>(request).exact,
-				)
-			} catch (error) {
-				logger.error('Fetching recommendations failed.', { error })
-			} finally {
-				this.loading = false
-			}
-		},
-
-		/**
-		 * Format search results
-		 *
-		 * @param results Results as returned by search
-		 * @return results as we use them on storage
-		 */
-		formatSearchResults(
-			results: Sharee[] | Record<string, Sharee[] | undefined>,
-		): FormattedSharee[] {
-			// flatten array of arrays
-			const flatResults = Array.isArray(results)
-				? results
-				: Object.values(results).flatMap((result) => result ?? [])
-
-			return (
-				this.filterUnwantedShares(flatResults)
-					.map((share) => this.formatForMultiselect(share))
-					// sort by type so we can get user&groups first...
-					.sort((a, b) => a.shareType - b.shareType)
-			)
-		},
-
-		/**
-		 * Remove static unwanted shares from search results
-		 * Existing shares must be done dynamically to account for new shares.
-		 *
-		 * @param shares the array of share objects
-		 * @return
-		 */
-		filterUnwantedShares(shares: Sharee[]): Sharee[] {
-			return shares.filter((share) => {
-				// only use proper objects
-				if (typeof share !== 'object') {
-					return false
-				}
-
-				try {
-					// filter out current user
-
-					if (
-						share.value.shareType
-							=== (this as any).SHARE_TYPES.SHARE_TYPE_USER
-						&& share.value.shareWith === getCurrentUser()?.uid
-					) {
-						return false
-					}
-
-					// All good, let's add the suggestion
-					return true
-				} catch {
-					return false
-				}
-			})
-		},
-
-		/**
-		 * Format shares for the multiselect options
-		 *
-		 * @param share Share in search formatting
-		 * @return Share in multiselect formatting
-		 */
-		formatForMultiselect(share: Sharee): FormattedSharee {
-			return {
-				shareWith: share.value.shareWith,
-				shareType: share.value.shareType,
-				user: share.value.shareWith,
-
-				isNoUser:
-					share.value.shareType
-					!== (this as any).SHARE_TYPES.SHARE_TYPE_USER,
-				id: share.value.shareWith,
-				displayName: share.label,
-				subname: share.shareWithDisplayNameUnique,
-
-				iconSvg: (this as any).shareTypeToIcon(share.value.shareType),
-				// Vue unique binding to render within Multiselect's AvatarSelectOption
-				key: share.value.shareWith + '-' + share.value.shareType,
-			}
-		},
-	},
-})
diff --git a/src/mixins/ViewsMixin.ts b/src/mixins/ViewsMixin.ts
deleted file mode 100644
index 73f1f6da2..000000000
--- a/src/mixins/ViewsMixin.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { FormsForm } from '../models/Entities.d.ts'
-
-import { getCurrentUser } from '@nextcloud/auth'
-import axios, { isCancel } from '@nextcloud/axios'
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import { t } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
-import { generateOcsUrl } from '@nextcloud/router'
-import MarkdownIt from 'markdown-it'
-import { defineComponent } from 'vue'
-import CancelableRequest from '../utils/CancelableRequest.ts'
-import logger from '../utils/Logger.ts'
-import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
-
-/** ViewsMixin data interface */
-interface ViewsMixinData {
-	isLoadingForm: boolean
-	cancelFetchFullForm: (reason?: string) => void
-	markdownit: MarkdownIt
-}
-
-export default defineComponent({
-	name: 'ViewsMixin',
-
-	provide() {
-		return {
-			$markdownit: this.markdownit,
-		}
-	},
-
-	props: {
-		hash: {
-			type: String,
-			default: '',
-		},
-		form: {
-			type: Object as () => FormsForm,
-			required: true,
-		},
-		publicView: {
-			type: Boolean,
-			default: false,
-		},
-		sidebarOpened: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
-	data(): ViewsMixinData {
-		return {
-			// State-Variable
-			isLoadingForm: true,
-
-			// storage for axios cancel function
-			cancelFetchFullForm: () => {},
-
-			// markdown renderer for descriptions
-			markdownit: new MarkdownIt({ breaks: true }),
-		}
-	},
-
-	computed: {
-		/**
-		 * Return form title, or placeholder if not set
-		 */
-		formTitle(): string {
-			if (this.form.title) {
-				return this.form.title
-			}
-			return t('forms', 'New form')
-		},
-
-		formDescription(): string {
-			// Remember the old renderer if overridden, or proxy to the default renderer.
-			const defaultRender =
-				this.markdownit.renderer.rules.link_open
-				|| function (
-					tokens: any,
-					idx: any,
-					options: any,
-					env: any,
-					self: any,
-				) {
-					return self.renderToken(tokens, idx, options)
-				}
-
-			this.markdownit.renderer.rules.link_open = function (
-				tokens: any,
-				idx: any,
-				options: any,
-				env: any,
-				self: any,
-			) {
-				// Add a new `target` attribute, or replace the value of the existing one.
-				tokens[idx].attrSet('target', '_blank')
-
-				// Pass the token to the default renderer.
-				return defaultRender(tokens, idx, options, env, self)
-			}
-
-			return (
-				this.markdownit.render(this.form.description)
-				|| this.form.description
-			)
-		},
-
-		isFormLocked(): boolean {
-			const currentUser = getCurrentUser()
-			return (
-				this.form.lockedUntil === 0
-				|| (this.form.lockedUntil! > moment().unix()
-					&& this.form.lockedBy !== currentUser?.uid)
-			)
-		},
-	},
-
-	methods: {
-		onShareForm(): void {
-			this.$emit('open-sharing', this.form.hash)
-		},
-
-		/**
-		 * Focus title after form load
-		 */
-		focusTitle(): void {
-			this.$nextTick(() => {
-				;(this.$refs.title as any)?.focus()
-			})
-		},
-
-		/**
-		 * Fetch the full form data and update parent
-		 *
-		 * @param id the unique form hash
-		 */
-		async fetchFullForm(id: number): Promise<void> {
-			this.isLoadingForm = true
-
-			// Cancel previous request
-			this.cancelFetchFullForm('New request pending.')
-
-			// Output after cancelling previous request for logical order.
-			logger.debug(`Loading form ${id}`)
-
-			// Create new cancelable get request
-			const { request, cancel } = CancelableRequest(async function (
-				url: string,
-				requestOptions?: any,
-			) {
-				return axios.get(url, requestOptions)
-			})
-			// Store cancel-function
-			this.cancelFetchFullForm = cancel
-
-			try {
-				const response = await request(
-					generateOcsUrl('apps/forms/api/v3/forms/{id}', { id }),
-				)
-				this.$emit('update:form', OcsResponse2Data(response as any))
-				this.isLoadingForm = false
-			} catch (error) {
-				if (isCancel(error)) {
-					logger.debug(`The request for form ${id} has been canceled`, {
-						error,
-					})
-				} else {
-					logger.error(`Unexpected error fetching form ${id}`, {
-						error,
-					})
-					this.isLoadingForm = false
-				}
-			} finally {
-				this.focusTitle()
-			}
-		},
-
-		async saveFormProperty(key: string): Promise<void> {
-			try {
-				// TODO: add loading status feedback ?
-				await axios.patch(
-					generateOcsUrl('apps/forms/api/v3/forms/{id}', {
-						id: this.form.id,
-					}),
-					{
-						keyValuePairs: {
-							[key]: this.form[key as keyof FormsForm],
-						},
-					},
-				)
-				emit('forms:last-updated:set', this.form.id)
-			} catch (error) {
-				logger.error('Error saving form property', { error })
-				showError(t('forms', 'Error while saving form'))
-			}
-		},
-	},
-})
diff --git a/src/models/Permissions.ts b/src/models/Permissions.ts
new file mode 100644
index 000000000..d7a7be1e3
--- /dev/null
+++ b/src/models/Permissions.ts
@@ -0,0 +1,27 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+// !!! Keep in Sync with lib/Constants.php !!!
+const PERMISSION_EDIT = 'edit'
+const PERMISSION_RESULTS = 'results'
+const PERMISSION_RESULTS_DELETE = 'results_delete'
+const PERMISSION_SUBMIT = 'submit'
+/** Internal permission to mark public link shares as embeddable */
+const PERMISSION_EMBED = 'embed'
+const PERMISSION_ALL = [
+	PERMISSION_EDIT,
+	PERMISSION_RESULTS,
+	PERMISSION_RESULTS_DELETE,
+	PERMISSION_SUBMIT,
+] as const
+
+export const PERMISSION_TYPES = {
+	PERMISSION_EDIT,
+	PERMISSION_RESULTS,
+	PERMISSION_RESULTS_DELETE,
+	PERMISSION_SUBMIT,
+	PERMISSION_EMBED,
+	PERMISSION_ALL: [...PERMISSION_ALL],
+}
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 1b345ea37..99c40df87 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -73,7 +73,7 @@
 					<textarea
 						id="form-title"
 						ref="title"
-						v-model="form.title"
+						:value="form.title"
 						class="form-title"
 						rows="1"
 						dir="auto"
@@ -82,7 +82,7 @@
 						required
 						autofocus
 						@keydown.enter.prevent
-						@input="onTitleChange" />
+						@input="onTitleInput" />
 				</h2>
 				<label class="hidden-visually" for="form-desc">
 					{{ t('forms', 'Description') }}
@@ -115,13 +115,13 @@
 			<section>
 				<!-- Questions list -->
 				<Draggable
-					v-model="form.questions"
+					:modelValue="form.questions"
 					:animation="300"
 					target=".sort-target"
 					direction="vertical"
 					invertSwap
 					handle=".question__drag-handle"
-					@update="onQuestionOrderChange"
+					@update:modelValue="onUpdateQuestions"
 					@start="onDragStart"
 					@end="onDragEnd">
 					<TransitionGroup
@@ -227,6 +227,7 @@ import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import { useIsMobile } from '@nextcloud/vue'
 import debounce from 'debounce'
+import { ref } from 'vue'
 import { defineComponent } from 'vue'
 import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
@@ -240,7 +241,7 @@ import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import TopBar from '../components/TopBar.vue'
-import ViewsMixin from '../mixins/ViewsMixin.ts'
+import { useViewForm } from '../composables/useViewForm.ts'
 import answerTypes from '../models/AnswerTypes.ts'
 import { FormState, INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
 import logger from '../utils/Logger.ts'
@@ -273,10 +274,36 @@ export default defineComponent({
 		TopBar,
 	},
 
-	mixins: [ViewsMixin],
+	props: {
+		hash: {
+			type: String,
+			default: '',
+		},
+
+		form: {
+			type: Object,
+			required: true,
+		},
+
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	emits: ['update:form', 'open-sharing'],
+
+	setup(props, { emit }) {
+		const title = ref(null)
+		const viewForm = useViewForm({
+			form: () => props.form,
+			emit,
+			titleRef: title,
+		})
 
-	setup() {
 		return {
+			...viewForm,
+			title,
 			IconLock,
 			isMobile: useIsMobile(),
 			t,
@@ -440,39 +467,51 @@ export default defineComponent({
 			}
 		},
 
+		updateQuestionProperty<K extends keyof FormsQuestion>(
+			index: number,
+			property: K,
+			value: FormsQuestion[K],
+		): void {
+			const questions = [...this.form.questions]
+			questions[index] = { ...questions[index], [property]: value }
+			this.$emit('update:form', { ...this.form, questions })
+		},
+
 		updateQuestionText(index: number, value: string): void {
-			this.form.questions[index].text = value
+			this.updateQuestionProperty(index, 'text', value)
 		},
 
 		updateQuestionDescription(index: number, value: string): void {
-			this.form.questions[index].description = value
+			this.updateQuestionProperty(index, 'description', value)
 		},
 
 		updateQuestionIsRequired(index: number, value: boolean): void {
-			this.form.questions[index].isRequired = value
+			this.updateQuestionProperty(index, 'isRequired', value)
 		},
 
 		updateQuestionName(index: number, value: string): void {
-			this.form.questions[index].name = value
+			this.updateQuestionProperty(index, 'name', value)
 		},
 
 		updateQuestionExtraSettings(
 			index: number,
 			value: Record<string, unknown> | null,
 		): void {
-			this.form.questions[index].extraSettings = value
+			this.updateQuestionProperty(index, 'extraSettings', value)
 		},
 
 		updateQuestionOptions(index: number, value: unknown[]): void {
-			this.form.questions[index].options = value
+			this.updateQuestionProperty(index, 'options', value)
 		},
 
 		onMoveUp(index: number): void {
 			if (index > 0) {
-				;[this.form.questions[index - 1], this.form.questions[index]] = [
-					this.form.questions[index],
-					this.form.questions[index - 1],
+				const questions = [...this.form.questions]
+				;[questions[index - 1], questions[index]] = [
+					questions[index],
+					questions[index - 1],
 				]
+				this.$emit('update:form', { ...this.form, questions })
 				this.onQuestionOrderChange()
 			}
 		},
@@ -514,6 +553,14 @@ export default defineComponent({
 			})
 		},
 
+		onTitleInput(event: Event): void {
+			this.$emit('update:form', {
+				...this.form,
+				title: (event.target as HTMLTextAreaElement).value,
+			})
+			this.onTitleChange()
+		},
+
 		/**
 		 * Update the description
 		 *
@@ -524,7 +571,7 @@ export default defineComponent({
 			if (!target) {
 				return
 			}
-			this.form.description = target.value
+			this.$emit('update:form', { ...this.form, description: target.value })
 			this.resizeDescription()
 			this.saveDescription()
 		},
@@ -610,10 +657,10 @@ export default defineComponent({
 						},
 					),
 				)
-				const index = this.form.questions.findIndex(
-					(search: FormsQuestion) => search.id === questionId,
+				const questions = this.form.questions.filter(
+					(search: FormsQuestion) => search.id !== questionId,
 				)
-				this.form.questions.splice(index, 1)
+				this.$emit('update:form', { ...this.form, questions })
 				emit('forms:last-updated:set', this.form.id)
 			} catch (error) {
 				logger.error(`Error while removing question ${questionId}`, {
@@ -648,14 +695,17 @@ export default defineComponent({
 				insertAt = position
 			}
 
-			if (insertAt !== null && insertAt <= this.form.questions.length) {
-				this.form.questions.splice(insertAt, 0, newQuestionObj)
+			const questions = [...this.form.questions]
+			if (insertAt !== null && insertAt <= questions.length) {
+				questions.splice(insertAt, 0, newQuestionObj)
+				this.$emit('update:form', { ...this.form, questions })
 				this.$nextTick(() => {
 					// Prefer ref by id when available, fallback to positional refs
 					this.questionRefsMap[newQuestionObj.id]?.focus?.()
 				})
 			} else {
-				this.form.questions.push(newQuestionObj)
+				questions.push(newQuestionObj)
+				this.$emit('update:form', { ...this.form, questions })
 				this.$nextTick(() => {
 					this.questionRefsMap[newQuestionObj.id]?.focus?.()
 				})
@@ -707,6 +757,11 @@ export default defineComponent({
 			}
 		},
 
+		onUpdateQuestions(questions: FormsQuestion[]): void {
+			this.$emit('update:form', { ...this.form, questions })
+			this.onQuestionOrderChange()
+		},
+
 		/**
 		 * Reorder questions on dragEnd
 		 */
diff --git a/src/views/Results.vue b/src/views/Results.vue
index a46340407..20ba0e4d9 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -308,10 +308,10 @@ import PillMenu from '../components/PillMenu.vue'
 import ResultsSummary from '../components/Results/ResultsSummary.vue'
 import Submission from '../components/Results/Submission.vue'
 import TopBar from '../components/TopBar.vue'
-import PermissionTypes from '../mixins/PermissionTypes.ts'
-import ViewsMixin from '../mixins/ViewsMixin.ts'
+import { useViewForm } from '../composables/useViewForm.ts'
 import answerTypes from '../models/AnswerTypes.ts'
 import { FormState, INPUT_DEBOUNCE_MS } from '../models/Constants.ts'
+import { PERMISSION_TYPES } from '../models/Permissions.ts'
 import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
@@ -399,11 +399,30 @@ export default defineComponent({
 		TopBar,
 	},
 
-	mixins: [PermissionTypes, ViewsMixin],
-	emits: ['update:form'],
+	props: {
+		hash: {
+			type: String,
+			default: '',
+		},
+
+		form: {
+			type: Object,
+			required: true,
+		},
+
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	emits: ['update:form', 'open-sharing'],
+
+	setup(props, { emit }) {
+		const viewForm = useViewForm({ form: () => props.form, emit })
 
-	setup() {
 		return {
+			...viewForm,
 			isMobile: useIsSmallMobile(),
 			t,
 			responseViews,
@@ -491,22 +510,20 @@ export default defineComponent({
 
 		canExportSubmissions(): boolean {
 			return this.form.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_RESULTS,
+				PERMISSION_TYPES.PERMISSION_RESULTS,
 			)
 		},
 
 		canDeleteSubmissions(): boolean {
 			return (
 				this.form.permissions.includes(
-					this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
+					PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 				) && !this.isFormArchived
 			)
 		},
 
 		canEditForm(): boolean {
-			return this.form.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
-			)
+			return this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
 		},
 
 		noSubmissions(): boolean {
@@ -900,7 +917,8 @@ export default defineComponent({
 				)
 
 				this.submissions = []
-				this.form.submissionCount = 0
+				const updatedForm = { ...this.form, submissionCount: 0 }
+				this.$emit('update:form', updatedForm)
 				emit('forms:last-updated:set', this.form.id)
 			} catch (error) {
 				logger.error('Error while deleting responses', { error })
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index e62a6384b..6ef7f0218 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -19,8 +19,8 @@
 				<NcIconSvgWrapper :svg="IconShareVariant" />
 			</template>
 			<SharingSidebarTab
-				:form="form"
-				:locked="isFormLocked"
+				:form="sidebarForm"
+				:locked="isSidebarLocked"
 				:lockedUntil="lockedUntilFormatted"
 				@update:formProp="onPropertyChange"
 				@addShare="onAddShare"
@@ -37,14 +37,14 @@
 				<NcIconSvgWrapper :svg="IconSettings" />
 			</template>
 			<SettingsSidebarTab
-				:form="form"
-				:locked="isFormLocked"
+				:form="sidebarForm"
+				:locked="isSidebarLocked"
 				:lockedUntil="lockedUntilFormatted"
 				@update:formProp="onPropertyChange" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab
-			v-if="form.allowComments"
+			v-if="sidebarAllowComments"
 			id="forms-comments"
 			:order="2"
 			:name="t('forms', 'Comments')">
@@ -63,6 +63,7 @@ import type { FormsShare } from '../models/Entities.d.ts'
 import IconComment from '@material-symbols/svg-400/outlined/comment.svg?raw'
 import IconSettings from '@material-symbols/svg-400/outlined/settings.svg?raw'
 import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
+import { getCurrentUser } from '@nextcloud/auth'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
@@ -72,8 +73,8 @@ import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import SettingsSidebarTab from '../components/SidebarTabs/SettingsSidebarTab.vue'
 import SharingSidebarTab from '../components/SidebarTabs/SharingSidebarTab.vue'
-import PermissionTypes from '../mixins/PermissionTypes.ts'
-import ViewsMixin from '../mixins/ViewsMixin.ts'
+import { useViewForm } from '../composables/useViewForm.ts'
+import { PERMISSION_TYPES } from '../models/Permissions.ts'
 import logger from '../utils/Logger.ts'
 
 interface CommentsViewLike {
@@ -95,19 +96,30 @@ export default defineComponent({
 		SettingsSidebarTab,
 	},
 
-	mixins: [ViewsMixin, PermissionTypes],
-
 	props: {
 		active: {
 			type: String,
 			default: 'forms-sharing',
 		},
+
+		form: {
+			type: Object,
+			required: true,
+		},
+
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
-	emits: ['update:sidebarOpened', 'update:active'],
+	emits: ['update:sidebarOpened', 'update:active', 'update:form', 'open-sharing'],
+
+	setup(props, { emit }) {
+		const viewForm = useViewForm({ form: () => props.form, emit })
 
-	setup() {
 		return {
+			...viewForm,
 			t,
 			IconComment,
 			IconSettings,
@@ -118,23 +130,44 @@ export default defineComponent({
 	data() {
 		return {
 			commentsView: null as CommentsViewLike | null,
+			localShares: [...this.form.shares] as FormsShare[],
+			localFormOverrides: {} as Record<string, unknown>,
 		}
 	},
 
 	computed: {
 		canEdit(): boolean {
-			return this.form?.permissions?.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
+			return this.form?.permissions?.includes(PERMISSION_TYPES.PERMISSION_EDIT)
+		},
+
+		sidebarForm(): Record<string, unknown> {
+			return {
+				...this.form,
+				...this.localFormOverrides,
+				shares: this.localShares,
+			}
+		},
+
+		sidebarAllowComments(): boolean {
+			return Boolean(this.sidebarForm.allowComments)
+		},
+
+		isSidebarLocked(): boolean {
+			const lockedUntil = this.sidebarForm.lockedUntil
+			const lockedBy = this.sidebarForm.lockedBy
+			return (
+				lockedUntil === 0
+				|| (Number(lockedUntil || 0) > moment().unix()
+					&& lockedBy !== getCurrentUser().uid)
 			)
 		},
 
 		lockedUntilFormatted(): string {
-			if (this.form.lockedUntil === 0 || this.form.lockedUntil === null) {
+			const lockedUntil = this.sidebarForm.lockedUntil
+			if (lockedUntil === 0 || lockedUntil === null) {
 				return ''
 			}
-			return moment(this.form.lockedUntil, 'X')
-				.locale(window.OC.getLanguage())
-				.fromNow()
+			return moment(lockedUntil, 'X').locale(window.OC.getLanguage()).fromNow()
 		},
 
 		sidebarTitle(): string {
@@ -147,7 +180,23 @@ export default defineComponent({
 	},
 
 	watch: {
+		form: function (nextForm: Record<string, unknown>) {
+			const nextOverrides = Object.fromEntries(
+				Object.entries(this.localFormOverrides).filter(
+					([key, value]) => nextForm[key] !== value,
+				),
+			)
+			this.localFormOverrides = nextOverrides
+		},
+
+		'form.shares': function (shares: FormsShare[]) {
+			this.localShares = [...shares]
+		},
+
 		'form.id': function (newId: number) {
+			this.localShares = [...this.form.shares]
+			this.localFormOverrides = {}
+
 			// Only update comments when the Comments tab is active
 			if (this.active !== 'forms-comments') {
 				return
@@ -201,7 +250,7 @@ export default defineComponent({
 		// Mount or update the Comments view inside the sidebar
 		async setupComments(): Promise<void> {
 			// comments disabled for this form
-			if (!this.form.allowComments) {
+			if (!this.sidebarForm.allowComments) {
 				return
 			}
 
@@ -232,10 +281,10 @@ export default defineComponent({
 				}
 
 				this.commentsView = new commentsCtor('forms', {
-					propsData: { resourceId: this.form.id },
+					propsData: { resourceId: this.sidebarForm.id },
 				})
 			}
-			await this.commentsView.update(this.form.id)
+			await this.commentsView.update(this.sidebarForm.id)
 			this.commentsView.$mount(el)
 		},
 
@@ -250,8 +299,18 @@ export default defineComponent({
 		 * @param newVal The new Property value
 		 */
 		onPropertyChange(property: string, newVal: unknown): void {
-			;(this.form as unknown as Record<string, unknown>)[property] = newVal
-			this.saveFormProperty(property)
+			this.localFormOverrides = {
+				...this.localFormOverrides,
+				[property]: newVal,
+			}
+
+			this.$emit('update:form', {
+				...this.form,
+				...this.localFormOverrides,
+				shares: this.localShares,
+			})
+
+			this.saveFormPropertyValue(property, newVal)
 		},
 
 		/**
@@ -260,27 +319,32 @@ export default defineComponent({
 		 * @param share The respective share object
 		 */
 		onAddShare(share: FormsShare): void {
-			this.form.shares.push(share)
+			const newShares = [...this.localShares, share]
+			this.localShares = newShares
+			this.$emit('update:form', { ...this.form, shares: newShares })
 			emit('forms:last-updated:set', this.form.id)
 		},
 
 		onRemoveShare(share: ShareWithId): void {
-			const index = this.form.shares.findIndex(
+			const newShares = this.localShares.filter(
 				(search): boolean =>
-					'id' in (search as unknown as Record<string, unknown>)
-					&& (search as ShareWithId).id === share.id,
+					!('id' in (search as unknown as Record<string, unknown>))
+					|| (search as ShareWithId).id !== share.id,
 			)
-			this.form.shares.splice(index, 1)
+			this.localShares = newShares
+			this.$emit('update:form', { ...this.form, shares: newShares })
 			emit('forms:last-updated:set', this.form.id)
 		},
 
 		onUpdateShare(share: ShareWithId): void {
-			const index = this.form.shares.findIndex(
-				(search): boolean =>
-					'id' in (search as unknown as Record<string, unknown>)
-					&& (search as ShareWithId).id === share.id,
+			const newShares = this.localShares.map((s) =>
+				'id' in (s as unknown as Record<string, unknown>)
+				&& (s as ShareWithId).id === share.id
+					? share
+					: s,
 			)
-			this.form.shares.splice(index, 1, share)
+			this.localShares = newShares
+			this.$emit('update:form', { ...this.form, shares: newShares })
 			emit('forms:last-updated:set', this.form.id)
 		},
 	},
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 4552bcceb..e5b3f60a0 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -232,6 +232,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
+import { ref } from 'vue'
 import { defineComponent } from 'vue'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcButton from '@nextcloud/vue/components/NcButton'
@@ -245,13 +246,13 @@ import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import TopBar from '../components/TopBar.vue'
-import PermissionTypes from '../mixins/PermissionTypes.ts'
-import ViewsMixin from '../mixins/ViewsMixin.ts'
+import { useViewForm } from '../composables/useViewForm.ts'
 import answerTypes from '../models/AnswerTypes.ts'
 import {
 	FormState,
 	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
 } from '../models/Constants.ts'
+import { PERMISSION_TYPES } from '../models/Permissions.ts'
 import logger from '../utils/Logger.ts'
 import OcsResponse2Data from '../utils/OcsResponse2Data.ts'
 import SetWindowTitle from '../utils/SetWindowTitle.ts'
@@ -332,12 +333,6 @@ export default defineComponent({
 		TopBar,
 	},
 
-	mixins: [PermissionTypes, ViewsMixin],
-
-	/*
-	 * This is used to confirm that the user wants to leave the page
-	 * if the form is unsubmitted.
-	 */
 	async beforeRouteUpdate() {
 		// This navigation guard is called when the route parameters changed (e.g. form hash)
 		// continue with the navigation if there are no changes or the user confirms to leave the form
@@ -371,11 +366,42 @@ export default defineComponent({
 			type: String,
 			default: '',
 		},
+
+		hash: {
+			type: String,
+			default: '',
+		},
+
+		form: {
+			type: Object,
+			required: true,
+		},
+
+		publicView: {
+			type: Boolean,
+			default: false,
+		},
+
+		sidebarOpened: {
+			type: Boolean,
+			required: true,
+		},
 	},
 
-	setup() {
+	emits: ['update:form', 'open-sharing'],
+
+	setup(props, { emit }) {
+		const title = ref(null)
+		const viewForm = useViewForm({
+			form: () => props.form,
+			emit,
+			titleRef: title,
+		})
+
 		// Non reactive properties
 		return {
+			...viewForm,
+			title,
 			IconCheckSvg: IconCheck,
 			IconRefreshSvg: IconRefresh,
 			IconSendSvg: IconSend,
@@ -620,7 +646,7 @@ export default defineComponent({
 				this.submissionId
 				&& (this.form.allowEditSubmissions
 					|| this.form.permissions.includes(
-						this.PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
+						PERMISSION_TYPES.PERMISSION_RESULTS_DELETE,
 					))
 			) {
 				this.fetchSubmission()