From 3eb11961d5086dd0d261f5d019be2f78ad97c91a Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Tue, 22 Aug 2023 21:50:09 +0200
Subject: [PATCH 1/3] Make components compatible to nextcloud-vue 8

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/Forms.vue                                  | 10 +++++-----
 src/FormsEmptyContent.vue                      |  2 +-
 src/FormsSettings.vue                          |  4 ++--
 src/components/AppNavigationForm.vue           |  4 ++--
 src/components/SidebarTabs/SharingShareDiv.vue |  2 +-
 src/components/TopBar.vue                      |  2 +-
 src/views/Create.vue                           |  4 ++--
 src/views/Results.vue                          |  4 ++--
 src/views/Sidebar.vue                          |  2 +-
 src/views/Submit.vue                           |  8 ++++----
 10 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index 88192313f..6a16c1b95 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -33,7 +33,7 @@
 			</NcAppNavigationNew>
 			<template #list>
 				<!-- Form-Owner-->
-				<NcAppNavigationCaption v-if="!noOwnedForms" :title="t('forms', 'Your Forms')" />
+				<NcAppNavigationCaption v-if="!noOwnedForms" :name="t('forms', 'Your Forms')" />
 				<AppNavigationForm v-for="form in forms"
 					:key="form.id"
 					:form="form"
@@ -44,7 +44,7 @@
 					@delete="onDeleteForm" />
 
 				<!-- Shared Forms-->
-				<NcAppNavigationCaption v-if="!noSharedForms" :title="t('forms', 'Shared with you')" />
+				<NcAppNavigationCaption v-if="!noSharedForms" :name="t('forms', 'Shared with you')" />
 				<AppNavigationForm v-for="form in sharedForms"
 					:key="form.id"
 					:form="form"
@@ -57,14 +57,14 @@
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
 			<NcEmptyContent v-if="loading"
-				:title="t('forms', 'Loading forms …')">
+				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
 				</template>
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else-if="!hasForms"
-				:title="t('forms', 'No forms created yet')">
+				:name="t('forms', 'No forms created yet')">
 				<template #icon>
 					<FormsIcon :size="64" />
 				</template>
@@ -76,7 +76,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else
-				:title="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
+				:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
 				<template #icon>
 					<FormsIcon :size="64" />
 				</template>
diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
index 4ec7f26d8..f21cd5ccf 100644
--- a/src/FormsEmptyContent.vue
+++ b/src/FormsEmptyContent.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcContent app-name="forms" class="forms-emptycontent">
-		<NcEmptyContent :title="currentModel.title"
+		<NcEmptyContent :name="currentModel.title"
 			:description="currentModel.description">
 			<template #icon>
 				<Icon :is="currentModel.icon" :size="64" />
diff --git a/src/FormsSettings.vue b/src/FormsSettings.vue
index 0bc18ef14..5f1a10fd2 100644
--- a/src/FormsSettings.vue
+++ b/src/FormsSettings.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<NcSettingsSection :title="t('forms', 'Form creation')">
+		<NcSettingsSection :name="t('forms', 'Form creation')">
 			<NcCheckboxRadioSwitch ref="switchRestrictCreation"
 				:checked.sync="appConfig.restrictCreation"
 				class="forms-settings__creation__switch"
@@ -39,7 +39,7 @@
 				label="displayName"
 				@input="onCreationAllowedGroupsChange" />
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('forms', 'Form sharing')">
+		<NcSettingsSection :name="t('forms', 'Form sharing')">
 			<NcCheckboxRadioSwitch ref="switchAllowPublicLink"
 				:checked.sync="appConfig.allowPublicLink"
 				type="switch"
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index 660ea05eb..9f860990f 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcListItem ref="navigationItem"
-		:title="formTitle"
+		:name="formTitle"
 		:to="{
 			name: routerTarget,
 			params: { hash: form.hash }
@@ -37,7 +37,7 @@
 			<IconCheck v-else-if="isExpired" :size="16" />
 			<FormsIcon v-else :size="16" />
 		</template>
-		<template v-if="hasSubtitle" #subtitle>
+		<template v-if="hasSubtitle" #subname>
 			{{ formSubtitle }}
 		</template>
 		<template v-if="!loading && !readOnly" #actions>
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index a4be34038..462432c12 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -31,7 +31,7 @@
 			<span>{{ displayNameAppendix }}</span>
 		</div>
 		<NcActions class="share-div__actions">
-			<NcActionCaption :title="t('forms', 'Permissions')" />
+			<NcActionCaption :name="t('forms', 'Permissions')" />
 			<NcActionCheckbox :checked="canAccessResults" @update:checked="updatePermissionResults">
 				{{ t('forms', 'View responses') }}
 			</NcActionCheckbox>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 84df1a238..fb23eb512 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -198,7 +198,7 @@ export default {
 	align-items: center;
 	align-self: flex-end;
 	justify-content: flex-end;
-	padding: calc(var(--default-grid-baseline, 4px) * 2);
+	padding: var(--app-navigation-padding);
 
 	&__view-select {
 		display: flex;
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 9c2b220d6..b5722167f 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -24,7 +24,7 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :title="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent :name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -105,7 +105,7 @@
 			<div class="question-menu">
 				<NcActions ref="questionMenu"
 					:open.sync="questionMenuOpened"
-					:menu-title="t('forms', 'Add a question')"
+					:menu-name="t('forms', 'Add a question')"
 					:aria-label="t('forms', 'Add a question')"
 					:primary="true">
 					<template #icon>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index bdcd06d8e..f639b03fb 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -24,7 +24,7 @@
 
 <template>
 	<NcAppContent v-if="loadingResults">
-		<NcEmptyContent :title="t('forms', 'Loading responses …')">
+		<NcEmptyContent :name="t('forms', 'Loading responses …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -95,7 +95,7 @@
 
 		<!-- No submissions -->
 		<section v-if="noSubmissions">
-			<NcEmptyContent :title="t('forms', 'No responses yet')"
+			<NcEmptyContent :name="t('forms', 'No responses yet')"
 				:description="t('forms', 'Results of submitted forms will show up here')">
 				<template #icon>
 					<IconPoll :size="64" />
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index fb487e388..da5b5ca38 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -23,7 +23,7 @@
 <template>
 	<NcAppSidebar v-show="sidebarOpened"
 		:active="active"
-		:title="t('forms', 'Form settings')"
+		:name="t('forms', 'Form settings')"
 		@close="onClose"
 		@update:active="onUpdateActive">
 		<NcAppSidebarTab id="forms-sharing"
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 1e6707e52..442f4e6ea 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :title="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent :name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -58,13 +58,13 @@
 		</header>
 
 		<NcEmptyContent v-if="loading"
-			:title="t('forms', 'Submitting form …')">
+			:name="t('forms', 'Submitting form …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="success || !form.canSubmit"
-			:title="t('forms', 'Thank you for completing the form!')"
+			:name="t('forms', 'Thank you for completing the form!')"
 			:description="form.submissionMessage">
 			<template #icon>
 				<IconCheck :size="64" />
@@ -75,7 +75,7 @@
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="isExpired"
-			:title="t('forms', 'Form expired')"
+			:name="t('forms', 'Form expired')"
 			:description="t('forms', 'This form has expired and is no longer taking answers')">
 			<template #icon>
 				<IconCheck :size="64" />

From f6d0de681bbc4907a20e8e82dbf73c2641cf28fc Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Tue, 28 Nov 2023 00:22:20 +0100
Subject: [PATCH 2/3] adjust css for NcEmptyContent

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/Forms.vue             | 10 ++++++++++
 src/FormsEmptyContent.vue |  2 ++
 src/views/Create.vue      |  8 +++++++-
 src/views/Results.vue     |  9 ++++++++-
 src/views/Submit.vue      | 10 +++++++++-
 5 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index 6a16c1b95..4c776fd6a 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -57,6 +57,7 @@
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
 			<NcEmptyContent v-if="loading"
+				class="emptycontent"
 				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
@@ -64,6 +65,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else-if="!hasForms"
+				class="emptycontent"
 				:name="t('forms', 'No forms created yet')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -76,6 +78,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else
+				class="emptycontent"
 				:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -378,3 +381,10 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+</style>
diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
index f21cd5ccf..4f4781d6d 100644
--- a/src/FormsEmptyContent.vue
+++ b/src/FormsEmptyContent.vue
@@ -82,5 +82,7 @@ export default {
 .forms-emptycontent {
 	flex-basis: 100vw;
 	flex-direction: column;
+	height: 100%;
+	display: flex;
 }
 </style>
diff --git a/src/views/Create.vue b/src/views/Create.vue
index b5722167f..c9c158cff 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -24,7 +24,8 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :name="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent class="emtpycontent"
+			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -425,6 +426,11 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;
diff --git a/src/views/Results.vue b/src/views/Results.vue
index f639b03fb..9d8922e8a 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -24,7 +24,8 @@
 
 <template>
 	<NcAppContent v-if="loadingResults">
-		<NcEmptyContent :name="t('forms', 'Loading responses …')">
+		<NcEmptyContent class="emptycontent"
+			:name="t('forms', 'Loading responses …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -96,6 +97,7 @@
 		<!-- No submissions -->
 		<section v-if="noSubmissions">
 			<NcEmptyContent :name="t('forms', 'No responses yet')"
+				class="emptycontent"
 				:description="t('forms', 'Results of submitted forms will show up here')">
 				<template #icon>
 					<IconPoll :size="64" />
@@ -326,6 +328,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
+
 .app-content {
 	display: flex;
 	align-items: center;
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 442f4e6ea..34419f6a4 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -22,7 +22,8 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent :name="t('forms', 'Loading {title} …', { title: form.title })">
+		<NcEmptyContent class="emptycontent"
+			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
@@ -58,12 +59,14 @@
 		</header>
 
 		<NcEmptyContent v-if="loading"
+			class="emptycontent"
 			:name="t('forms', 'Submitting form …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="success || !form.canSubmit"
+			class="emptycontent"
 			:name="t('forms', 'Thank you for completing the form!')"
 			:description="form.submissionMessage">
 			<template #icon>
@@ -75,6 +78,7 @@
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="isExpired"
+			class="emptycontent"
 			:name="t('forms', 'Form expired')"
 			:description="t('forms', 'This form has expired and is no longer taking answers')">
 			<template #icon>
@@ -455,6 +459,10 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.emptycontent {
+	display: flex;
+	height: 100%;
+}
 .app-content {
 	display: flex;
 	align-items: center;

From 302914464fb1df3d01edcfb8d7f5ac3c818cf909 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 28 Nov 2023 01:04:42 +0100
Subject: [PATCH 3/3] fix: Make sure empty content is aligned on the center

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/Forms.vue         |  11 +--
 src/views/Results.vue | 210 +++++++++++++++++++++---------------------
 src/views/Submit.vue  |  11 +--
 3 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/Forms.vue b/src/Forms.vue
index 4c776fd6a..b8eedcce6 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -57,7 +57,7 @@
 		<!-- No forms & loading emptycontents -->
 		<NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
 			<NcEmptyContent v-if="loading"
-				class="emptycontent"
+				class="forms-emptycontent"
 				:name="t('forms', 'Loading forms …')">
 				<template #icon>
 					<NcLoadingIcon :size="64" />
@@ -65,7 +65,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else-if="!hasForms"
-				class="emptycontent"
+				class="forms-emptycontent"
 				:name="t('forms', 'No forms created yet')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -78,7 +78,7 @@
 			</NcEmptyContent>
 
 			<NcEmptyContent v-else
-				class="emptycontent"
+				class="forms-emptycontent"
 				:name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
 				<template #icon>
 					<FormsIcon :size="64" />
@@ -382,9 +382,8 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.emptycontent {
-	display: flex;
+<style scoped lang="scss">
+.forms-emptycontent {
 	height: 100%;
 }
 </style>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 9d8922e8a..de7df5dd7 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -23,113 +23,116 @@
   -->
 
 <template>
-	<NcAppContent v-if="loadingResults">
-		<NcEmptyContent class="emptycontent"
-			:name="t('forms', 'Loading responses …')">
-			<template #icon>
-				<NcLoadingIcon :size="64" />
-			</template>
-		</NcEmptyContent>
-	</NcAppContent>
-
-	<NcAppContent v-else>
+	<NcAppContent>
 		<TopBar :permissions="form?.permissions"
 			:sidebar-opened="sidebarOpened"
 			@update:sidebarOpened="onSidebarChange"
 			@share-form="onShareForm" />
-		<header v-if="!noSubmissions">
-			<h2 dir="auto">
-				{{ formTitle }}
-			</h2>
-			<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
-
-			<!-- View switcher between Summary and Responses -->
-			<div class="response-actions">
-				<div class="response-actions__radio">
-					<input id="show-summary--true"
-						v-model="showSummary"
-						type="radio"
-						:value="true"
-						class="hidden">
-					<label for="show-summary--true"
-						class="response-actions__radio__item"
-						:class="{ 'response-actions__radio__item--active': showSummary }">
-						{{ t('forms', 'Summary') }}
-					</label>
-					<input id="show-summary--false"
-						v-model="showSummary"
-						type="radio"
-						:value="false"
-						class="hidden">
-					<label for="show-summary--false"
-						class="response-actions__radio__item"
-						:class="{ 'response-actions__radio__item--active': !showSummary }">
-						{{ t('forms', 'Responses') }}
-					</label>
-				</div>
 
-				<!-- Action menu for CSV export and deletion -->
-				<NcActions class="results-menu"
-					:aria-label="t('forms', 'Options')"
-					:force-menu="true">
-					<NcActionButton :close-after-click="true" @click="onStoreToFiles">
-						<template #icon>
-							<IconFolder :size="20" />
-						</template>
-						{{ t('forms', 'Save CSV to Files') }}
-					</NcActionButton>
-					<NcActionButton @click="onDownloadCsv">
-						<template #icon>
-							<IconDownload :size="20" />
-						</template>
-						{{ t('forms', 'Download CSV') }}
-					</NcActionButton>
-					<NcActionButton v-if="canDeleteSubmissions" @click="deleteAllSubmissions">
-						<template #icon>
-							<IconDelete :size="20" />
-						</template>
-						{{ t('forms', 'Delete all responses') }}
-					</NcActionButton>
-				</NcActions>
-			</div>
-		</header>
+		<!-- Loading submissions -->
+		<NcEmptyContent v-if="loadingResults"
+			class="forms-emptycontent"
+			:name="t('forms', 'Loading responses …')">
+			<template #icon>
+				<NcLoadingIcon :size="64" />
+			</template>
+		</NcEmptyContent>
 
 		<!-- No submissions -->
-		<section v-if="noSubmissions">
-			<NcEmptyContent :name="t('forms', 'No responses yet')"
-				class="emptycontent"
-				:description="t('forms', 'Results of submitted forms will show up here')">
-				<template #icon>
-					<IconPoll :size="64" />
-				</template>
-				<template #action>
-					<NcButton type="primary" @click="onShareForm">
-						<template #icon>
-							<IconShareVariant :size="20" decorative />
-						</template>
-						{{ t('forms', 'Share form') }}
-					</NcButton>
-				</template>
-			</NcEmptyContent>
-		</section>
-
-		<!-- Summary view for visualization -->
-		<section v-if="!noSubmissions && showSummary">
-			<ResultsSummary v-for="question in form.questions"
-				:key="question.id"
-				:question="question"
-				:submissions="form.submissions" />
-		</section>
-
-		<!-- Responses view for individual responses -->
-		<section v-if="!noSubmissions && !showSummary">
-			<Submission v-for="submission in form.submissions"
-				:key="submission.id"
-				:submission="submission"
-				:questions="form.questions"
-				:can-delete-submission="canDeleteSubmissions"
-				@delete="deleteSubmission(submission.id)" />
-		</section>
+		<NcEmptyContent v-else-if="noSubmissions"
+			:name="t('forms', 'No responses yet')"
+			class="forms-emptycontent"
+			:description="t('forms', 'Results of submitted forms will show up here')">
+			<template #icon>
+				<IconPoll :size="64" />
+			</template>
+			<template #action>
+				<NcButton type="primary" @click="onShareForm">
+					<template #icon>
+						<IconShareVariant :size="20" decorative />
+					</template>
+					{{ t('forms', 'Share form') }}
+				</NcButton>
+			</template>
+		</NcEmptyContent>
+
+		<!-- Showing submissions -->
+		<template v-else>
+			<header>
+				<h2 dir="auto">
+					{{ formTitle }}
+				</h2>
+				<p>{{ t('forms', '{amount} responses', { amount: form.submissions.length }) }}</p>
+
+				<!-- View switcher between Summary and Responses -->
+				<div class="response-actions">
+					<div class="response-actions__radio">
+						<input id="show-summary--true"
+							v-model="showSummary"
+							type="radio"
+							:value="true"
+							class="hidden">
+						<label for="show-summary--true"
+							class="response-actions__radio__item"
+							:class="{ 'response-actions__radio__item--active': showSummary }">
+							{{ t('forms', 'Summary') }}
+						</label>
+						<input id="show-summary--false"
+							v-model="showSummary"
+							type="radio"
+							:value="false"
+							class="hidden">
+						<label for="show-summary--false"
+							class="response-actions__radio__item"
+							:class="{ 'response-actions__radio__item--active': !showSummary }">
+							{{ t('forms', 'Responses') }}
+						</label>
+					</div>
+
+					<!-- Action menu for CSV export and deletion -->
+					<NcActions class="results-menu"
+						:aria-label="t('forms', 'Options')"
+						:force-menu="true">
+						<NcActionButton :close-after-click="true" @click="onStoreToFiles">
+							<template #icon>
+								<IconFolder :size="20" />
+							</template>
+							{{ t('forms', 'Save CSV to Files') }}
+						</NcActionButton>
+						<NcActionButton @click="onDownloadCsv">
+							<template #icon>
+								<IconDownload :size="20" />
+							</template>
+							{{ t('forms', 'Download CSV') }}
+						</NcActionButton>
+						<NcActionButton v-if="canDeleteSubmissions" @click="deleteAllSubmissions">
+							<template #icon>
+								<IconDelete :size="20" />
+							</template>
+							{{ t('forms', 'Delete all responses') }}
+						</NcActionButton>
+					</NcActions>
+				</div>
+			</header>
+
+			<!-- Summary view for visualization -->
+			<section v-if="showSummary">
+				<ResultsSummary v-for="question in form.questions"
+					:key="question.id"
+					:question="question"
+					:submissions="form.submissions" />
+			</section>
+
+			<!-- Responses view for individual responses -->
+			<section v-else>
+				<Submission v-for="submission in form.submissions"
+					:key="submission.id"
+					:submission="submission"
+					:questions="form.questions"
+					:can-delete-submission="canDeleteSubmissions"
+					@delete="deleteSubmission(submission.id)" />
+			</section>
+		</template>
 	</NcAppContent>
 </template>
 
@@ -138,14 +141,14 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
+import axios from '@nextcloud/axios'
+import moment from '@nextcloud/moment'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
-import axios from '@nextcloud/axios'
-import moment from '@nextcloud/moment'
 
 import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
@@ -328,8 +331,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.emptycontent {
-	display: flex;
+.forms-emptycontent {
 	height: 100%;
 }
 
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 34419f6a4..ddd8e178f 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NcAppContent v-if="isLoadingForm">
-		<NcEmptyContent class="emptycontent"
+		<NcEmptyContent class="forms-emptycontent"
 			:name="t('forms', 'Loading {title} …', { title: form.title })">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
@@ -59,14 +59,14 @@
 		</header>
 
 		<NcEmptyContent v-if="loading"
-			class="emptycontent"
+			class="forms-emptycontent"
 			:name="t('forms', 'Submitting form …')">
 			<template #icon>
 				<NcLoadingIcon :size="64" />
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="success || !form.canSubmit"
-			class="emptycontent"
+			class="forms-emptycontent"
 			:name="t('forms', 'Thank you for completing the form!')"
 			:description="form.submissionMessage">
 			<template #icon>
@@ -78,7 +78,7 @@
 			</template>
 		</NcEmptyContent>
 		<NcEmptyContent v-else-if="isExpired"
-			class="emptycontent"
+			class="forms-emptycontent"
 			:name="t('forms', 'Form expired')"
 			:description="t('forms', 'This form has expired and is no longer taking answers')">
 			<template #icon>
@@ -459,8 +459,7 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
-.emptycontent {
-	display: flex;
+.forms-emptycontent {
 	height: 100%;
 }
 .app-content {