From 42b77ab4ceb2e9ad42707337737f42feb93a3666 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 12 Sep 2023 16:01:03 +0200
Subject: [PATCH 1/5] feat(page): Add toggle for full width page view

Fixes: #242

Signed-off-by: Jonas <jonas@freesources.org>
---
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 src/components/Collective.vue                 |  2 -
 src/components/Page.vue                       |  9 +++-
 src/components/Page/Editor.vue                |  8 +---
 src/components/Page/LandingPageWidgets.vue    |  6 +--
 .../LandingPageWidgets/RecentPagesWidget.vue  |  1 -
 src/components/Page/PageActionMenu.vue        | 32 +++++++++++--
 src/components/Page/PageInfoBar.vue           | 12 +++--
 src/components/Page/RichText.vue              |  5 --
 src/components/Page/TextEditor.vue            |  7 +--
 src/components/Page/Version.vue               |  3 +-
 src/components/PagePrint.vue                  | 11 ++---
 src/components/SkeletonLoading.vue            | 21 ++++++++-
 src/css/editor.scss                           | 16 +++++++
 src/store/actions.js                          |  2 +
 src/store/mutations.js                        |  1 +
 src/store/pages.js                            | 47 +++++++++++++++++++
 18 files changed, 146 insertions(+), 39 deletions(-)
 create mode 100644 src/css/editor.scss

diff --git a/package-lock.json b/package-lock.json
index 98fe817c8..4338e275d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "dependencies": {
         "@nextcloud/auth": "^2.1.0",
         "@nextcloud/axios": "^2.4.0",
+        "@nextcloud/browser-storage": "^0.2.0",
         "@nextcloud/dialogs": "^4.1.0",
         "@nextcloud/event-bus": "^3.1.0",
         "@nextcloud/files": "^3.0.0-beta.21",
diff --git a/package.json b/package.json
index a6e14c3d7..cf466e777 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@nextcloud/auth": "^2.1.0",
     "@nextcloud/axios": "^2.4.0",
+    "@nextcloud/browser-storage": "^0.2.0",
     "@nextcloud/dialogs": "^4.1.0",
     "@nextcloud/event-bus": "^3.1.0",
     "@nextcloud/files": "^3.0.0-beta.21",
diff --git a/src/components/Collective.vue b/src/components/Collective.vue
index 72fc37bce..32493c8ed 100644
--- a/src/components/Collective.vue
+++ b/src/components/Collective.vue
@@ -203,8 +203,6 @@ export default {
 	position: sticky;
 	top: 0;
 	padding: 8px 0px 2px 8px;
-	margin: auto;
-	max-width: 670px;
 	display: flex;
 	align-items: center;
 	background-color: var(--color-main-background);
diff --git a/src/components/Page.vue b/src/components/Page.vue
index 3614be17a..c1c1c4adb 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title">
+		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
 			<!-- Page emoji or icon -->
 			<div class="page-title-icon"
 				:class="{ 'mobile': isMobile }">
@@ -121,7 +121,7 @@ import TextEditor from './Page/TextEditor.vue'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import pageMixin from '../mixins/pageMixin.js'
 import { showError } from '@nextcloud/dialogs'
-import { GET_PAGES, RENAME_PAGE } from '../store/actions.js'
+import { GET_PAGES, INIT_FULL_WIDTH_PAGEIDS, RENAME_PAGE } from '../store/actions.js'
 
 export default {
 	name: 'Page',
@@ -160,6 +160,7 @@ export default {
 			'currentCollectiveCanEdit',
 			'isIndexPage',
 			'isPublic',
+			'isFullWidthView',
 			'isTemplatePage',
 			'isLandingPage',
 			'loading',
@@ -233,6 +234,7 @@ export default {
 	},
 
 	mounted() {
+		this.dispatchInitFullWidthPageids()
 		document.title = this.documentTitle
 		this.initTitleEntry()
 	},
@@ -248,6 +250,7 @@ export default {
 		...mapActions({
 			dispatchGetPages: GET_PAGES,
 			dispatchRenamePage: RENAME_PAGE,
+			dispatchInitFullWidthPageids: INIT_FULL_WIDTH_PAGEIDS,
 		}),
 
 		initTitleEntry() {
@@ -309,6 +312,8 @@ export default {
 </style>
 
 <style lang="scss">
+@import '../css/editor';
+
 @media print {
 	/* Don't print emoticon button (if page doesn't have an emoji set) */
 	.edit-button, .action-item, .emoji-picker-emoticon {
diff --git a/src/components/Page/Editor.vue b/src/components/Page/Editor.vue
index ec9c04bac..665a55d04 100644
--- a/src/components/Page/Editor.vue
+++ b/src/components/Page/Editor.vue
@@ -11,6 +11,7 @@
 		:show-outline-outside="showOutline"
 		mime="text/markdown"
 		class="file-view active"
+		:class="{'sheet-view': !isFullWidthView}"
 		@ready="ready"
 		@outline-toggled="toggleOutlineFromText"
 		@add-image-node="onAddImageNode"
@@ -28,6 +29,7 @@ export default {
 		...mapGetters([
 			'currentPage',
 			'currentPageFilePath',
+			'isFullWidthView',
 			'shareTokenParam',
 			'showing',
 		]),
@@ -84,12 +86,6 @@ export default {
 	overflow: initial !important;
 }
 
-[data-text-el='editor-container'] .document-status {
-	max-width: 670px;
-	padding: 0 2px;
-	margin: auto;
-}
-
 [data-text-el='editor-container'] .editor--outline {
 	top: revert !important;
 }
diff --git a/src/components/Page/LandingPageWidgets.vue b/src/components/Page/LandingPageWidgets.vue
index 332ce2d97..b023b72f9 100644
--- a/src/components/Page/LandingPageWidgets.vue
+++ b/src/components/Page/LandingPageWidgets.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="landing-page-widgets">
+	<div class="landing-page-widgets"
+		:class="{'sheet-view': !isFullWidthView}">
 		<RecentPagesWidget />
 		<MembersWidget v-if="!isPublic" />
 	</div>
@@ -21,6 +22,7 @@ export default {
 	computed: {
 		...mapGetters([
 			'isPublic',
+			'isFullWidthView',
 		]),
 	},
 }
@@ -28,8 +30,6 @@ export default {
 
 <style scoped>
 .landing-page-widgets {
-	margin: auto;
 	padding-left: 12px;
-	max-width: 670px;
 }
 </style>
diff --git a/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue b/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue
index b390f60a2..099f80446 100644
--- a/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue
+++ b/src/components/Page/LandingPageWidgets/RecentPagesWidget.vue
@@ -124,7 +124,6 @@ export default {
 		flex-direction: row;
 		gap: 12px;
 
-		max-width: 670px;
 		overflow-x: auto;
 		scroll-snap-type: x mandatory;
 		// Hide scrollbar
diff --git a/src/components/Page/PageActionMenu.vue b/src/components/Page/PageActionMenu.vue
index 8afe179a3..001c5384d 100644
--- a/src/components/Page/PageActionMenu.vue
+++ b/src/components/Page/PageActionMenu.vue
@@ -19,6 +19,15 @@
 					<OpenInNewIcon :size="20" />
 				</template>
 			</NcActionButton>
+			<NcActionCheckbox v-if="!inPageList && !isMobile"
+				:checked="isFullWidthView"
+				@check="onCheckFullWidthView"
+				@uncheck="onUncheckFullWidthView">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+				{{ t('collectives', 'Full width') }}
+			</NcActionCheckbox>
 			<NcActionButton v-if="!inPageList"
 				:close-after-click="true"
 				@click.native="toggle('outline')">
@@ -33,7 +42,7 @@
 				:close-after-click="true">
 				{{ t('collectives', 'Show in Files') }}
 			</NcActionLink>
-			<NcActionButton v-if="currentCollectiveCanEdit && !isTemplate && !isLandingPage"
+			<NcActionButton v-if="inPageList && currentCollectiveCanEdit && !isTemplate && !isLandingPage"
 				:close-after-click="true"
 				@click.native="show('details')"
 				@click="gotoPageEmojiPicker">
@@ -52,7 +61,7 @@
 				</template>
 				{{ editTemplateString }}
 			</NcActionButton>
-			<NcActionButton v-if="currentCollectiveCanEdit && !isLandingPage"
+			<NcActionButton v-if="inPageList && currentCollectiveCanEdit && !isLandingPage"
 				:close-after-click="true"
 				@click="onOpenMoveModal">
 				<template #icon>
@@ -79,9 +88,10 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
-import { NcActions, NcActionButton, NcActionLink, NcActionSeparator } from '@nextcloud/vue'
+import { SET_FULL_WIDTH_VIEW } from '../../store/actions.js'
+import { NcActions, NcActionButton, NcActionCheckbox, NcActionLink, NcActionSeparator } from '@nextcloud/vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import CollectiveActions from '../Collective/CollectiveActions.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
@@ -101,6 +111,7 @@ export default {
 		MoveModal,
 		NcActions,
 		NcActionButton,
+		NcActionCheckbox,
 		NcActionLink,
 		NcActionSeparator,
 		DeleteIcon,
@@ -170,6 +181,7 @@ export default {
 			'currentCollective',
 			'currentCollectiveCanEdit',
 			'hasSubpages',
+			'isFullWidthView',
 			'loading',
 			'pagesTreeWalk',
 			'showing',
@@ -230,6 +242,18 @@ export default {
 	methods: {
 		...mapMutations(['show', 'toggle']),
 
+		...mapActions({
+			dispatchSetFullWidthView: SET_FULL_WIDTH_VIEW,
+		}),
+
+		onCheckFullWidthView() {
+			this.dispatchSetFullWidthView(true)
+		},
+
+		onUncheckFullWidthView() {
+			this.dispatchSetFullWidthView(false)
+		},
+
 		gotoPageEmojiPicker() {
 			if (this.pageUrl && (this.currentPage.id !== this.pageId)) {
 				this.$router.push(this.pageUrl)
diff --git a/src/components/Page/PageInfoBar.vue b/src/components/Page/PageInfoBar.vue
index 2f6962808..225b44303 100644
--- a/src/components/Page/PageInfoBar.vue
+++ b/src/components/Page/PageInfoBar.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="text-menubar">
+	<div class="text-menubar"
+		:class="{'sheet-view': !isFullWidthView}">
 		<div v-if="currentPage.lastUserId" class="infobar-item infobar-lastupdate">
 			<div class="item-text">
 				<LastUserBubble :last-user-id="currentPage.lastUserId"
@@ -12,6 +13,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import LastUserBubble from '../LastUserBubble.vue'
 
 export default {
@@ -27,6 +29,12 @@ export default {
 			required: true,
 		},
 	},
+
+	computed: {
+		...mapGetters([
+			'isFullWidthView',
+		]),
+	},
 }
 </script>
 
@@ -41,8 +49,6 @@ export default {
 	height: 44px;
 	padding: 3px 8px 3px 14px;
 	display: flex;
-	max-width: 670px;
-	margin: auto;
 	flex-wrap: nowrap;
 	align-items: center;
 	overflow: hidden;
diff --git a/src/components/Page/RichText.vue b/src/components/Page/RichText.vue
index ec4a4b66a..b64947b20 100644
--- a/src/components/Page/RichText.vue
+++ b/src/components/Page/RichText.vue
@@ -251,11 +251,6 @@ export default {
 </style>
 
 <style lang="scss">
-:root {
-	// Required for read-only view where only RichTextReader and no Editor gets loaded
-	--text-editor-max-width: 670px;
-}
-
 @media print {
 
 	h1, h2, h3 {
diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
index addf7e8c6..49176d232 100644
--- a/src/components/Page/TextEditor.vue
+++ b/src/components/Page/TextEditor.vue
@@ -2,10 +2,12 @@
 	<div>
 		<WidgetHeading v-if="isLandingPage"
 			:title="t('collectives', 'Landing page')"
-			class="text-container-heading" />
+			class="text-container-heading"
+			:class="{'sheet-view': !isFullWidthView}" />
 		<div v-show="showRichText"
 			id="text-container"
 			:key="'text-' + currentPage.id"
+			:class="{'sheet-view': !isFullWidthView}"
 			:aria-label="t('collectives', 'Page content')">
 			<RichText :key="`reader-${currentPage.id}`"
 				:current-page="currentPage"
@@ -65,6 +67,7 @@ export default {
 			'isTemplatePage',
 			'isTextEdit',
 			'isPublic',
+			'isFullWidthView',
 			'loading',
 		]),
 
@@ -258,8 +261,6 @@ export default {
 
 <style lang="scss" scoped>
 .text-container-heading {
-	max-width: 670px;
-	margin: auto;
 	padding-left: 14px;
 }
 
diff --git a/src/components/Page/Version.vue b/src/components/Page/Version.vue
index f6ab3a3a8..e83cc8cf9 100644
--- a/src/components/Page/Version.vue
+++ b/src/components/Page/Version.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title">
+		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
 			<input class="title"
 				:class="{ 'mobile': isMobile }"
 				type="text"
@@ -67,6 +67,7 @@ export default {
 	computed: {
 		...mapGetters([
 			'currentPage',
+			'isFullWidthView',
 			'version',
 			'title',
 		]),
diff --git a/src/components/PagePrint.vue b/src/components/PagePrint.vue
index 0217cfd3b..a1fcb1287 100644
--- a/src/components/PagePrint.vue
+++ b/src/components/PagePrint.vue
@@ -1,13 +1,13 @@
 <template>
 	<div id="text-container" :key="'text-' + page.id" class="page">
-		<h1 v-if="page.parentId === 0" id="page-title-collective" class="page-title page-title-collective">
+		<h1 v-if="page.parentId === 0" id="page-title-collective" class="page-title sheet-view page-title-collective">
 			{{ currentCollectiveTitle }}
 		</h1>
-		<h1 v-else class="page-title page-title-subpage">
+		<h1 v-else class="page-title sheet-view page-title-subpage">
 			{{ pageTitleString }}
 		</h1>
 		<RichTextReader v-if="pageContent"
-			class="editor__content"
+			class="editor__content sheet-view"
 			:content="pageContent" />
 	</div>
 </template>
@@ -89,14 +89,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../css/editor';
 @import '~@nextcloud/text/dist/style.css';
 
 .page-title {
 	font-size: 30px;
 	line-height: 45px;
 	padding: 8px 2px 2px 8px;
-	margin: auto;
-	max-width: 670px;
 
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -115,8 +114,6 @@ export default {
 }
 
 .editor__content {
-	max-width: 670px;
-	margin: auto;
 	position: relative;
 }
 
diff --git a/src/components/SkeletonLoading.vue b/src/components/SkeletonLoading.vue
index 7820c0f22..249bad72f 100644
--- a/src/components/SkeletonLoading.vue
+++ b/src/components/SkeletonLoading.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="placeholder-main" :class="'placeholder-main-' + type">
+	<div class="placeholder-main"
+		:class="placeholderClasses">
 		<!-- Placeholder animation -->
 		<template v-for="(suffix, gradientIndex) in ['-regular', '-reverse']">
 			<svg :key="'gradient' + suffix" :class="'placeholder-gradient placeholder-gradient' + suffix">
@@ -50,6 +51,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 const bodyStyles = window.getComputedStyle(document.body)
 const colorPlaceholderDark = bodyStyles.getPropertyValue('--color-placeholder-dark')
 const colorPlaceholderLight = bodyStyles.getPropertyValue('--color-placeholder-light')
@@ -76,6 +79,18 @@ export default {
 	},
 
 	computed: {
+		...mapGetters([
+			'isFullWidthView',
+		]),
+
+		placeholderClasses() {
+			const classes = [`placeholder-main-${this.type}`]
+			if (!this.isFullWidthView) {
+				classes.push('sheet-view')
+			}
+			return classes
+		},
+
 		placeholderData() {
 			const data = []
 			for (let i = 0; i < this.count; i++) {
@@ -108,7 +123,9 @@ $messages-list-max-width: 670px;
 
 	&-text,
 	&-page-heading {
-		margin: auto;
+		&.sheet-view {
+			margin: auto;
+		}
 	}
 }
 
diff --git a/src/css/editor.scss b/src/css/editor.scss
new file mode 100644
index 000000000..da43166de
--- /dev/null
+++ b/src/css/editor.scss
@@ -0,0 +1,16 @@
+:root {
+	--text-editor-max-width: false !important;
+}
+
+.sheet-view {
+	--text-editor-max-width: 670px !important;
+	max-width: var(--text-editor-max-width);
+	margin: auto;
+
+	// Editor document status bar
+	.document-status {
+		max-width: var(--text-editor-max-width);
+		padding: 0 2px;
+		margin: auto;
+	}
+}
diff --git a/src/store/actions.js b/src/store/actions.js
index fadcee84d..d8fd56923 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -41,3 +41,5 @@ export const GET_BACKLINKS = 'GET_BACKLINKS'
 export const GET_VERSIONS = 'GET_VERSIONS'
 export const UPDATE_COLLECTIVES_FOLDER = 'UPDATE_COLLECTIVES_FOLDER'
 export const GET_COLLECTIVES_FOLDER = 'GET_COLLECTIVES_FOLDER'
+export const INIT_FULL_WIDTH_PAGEIDS = 'INIT_FULL_WIDTH_PAGEIDS'
+export const SET_FULL_WIDTH_VIEW = 'SET_FULL_WIDTH_VIEW'
diff --git a/src/store/mutations.js b/src/store/mutations.js
index f56d8c604..f907aeaaf 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -27,3 +27,4 @@ export const SET_BACKLINKS = 'SET_BACKLINKS'
 export const SET_COLLECTIVES_FOLDER = 'SET_COLLECTIVES_FOLDER'
 export const KEEP_SORTABLE = 'KEEP_SORTABLE'
 export const CLEAR_SORTABLE = 'CLEAR_SORTABLE'
+export const SET_FULL_WIDTH_PAGEIDS = 'SET_FULL_WIDTH_PAGEIDS'
diff --git a/src/store/pages.js b/src/store/pages.js
index a360b4c2d..b80fd7be6 100644
--- a/src/store/pages.js
+++ b/src/store/pages.js
@@ -1,5 +1,6 @@
 import { set } from 'vue'
 import { getCurrentUser } from '@nextcloud/auth'
+import { getBuilder } from '@nextcloud/browser-storage'
 import axios from '@nextcloud/axios'
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 /* eslint import/namespace: ['error', { allowComputed: true }] */
@@ -19,6 +20,7 @@ import {
 	SET_BACKLINKS,
 	KEEP_SORTABLE,
 	CLEAR_SORTABLE,
+	SET_FULL_WIDTH_PAGEIDS,
 } from './mutations.js'
 
 import {
@@ -38,8 +40,12 @@ import {
 	DELETE_PAGE,
 	GET_ATTACHMENTS,
 	GET_BACKLINKS,
+	INIT_FULL_WIDTH_PAGEIDS,
+	SET_FULL_WIDTH_VIEW,
 } from './actions.js'
 
+const persistentStorage = getBuilder('collectives').persist().build()
+
 export const TEMPLATE_PAGE = 'Template'
 
 export default {
@@ -57,6 +63,7 @@ export default {
 		highlightAnimationPageId: null,
 		isDragoverTargetPage: false,
 		draggedPageId: null,
+		fullWidthPageIds: [],
 	},
 
 	getters: {
@@ -337,6 +344,10 @@ export default {
 					return array.indexOf(value) === index
 				})
 		},
+
+		isFullWidthView(state, getters) {
+			return state.fullWidthPageIds.includes(getters.currentPage?.id)
+		},
 	},
 
 	mutations: {
@@ -416,6 +427,10 @@ export default {
 			delete state.pages.find(p => p.id === pageId).keepSortable
 		},
 
+		[SET_FULL_WIDTH_PAGEIDS](state, fullWidthPageIds) {
+			state.fullWidthPageIds = fullWidthPageIds
+		},
+
 		// using camel case name so this works nicely with mapMutations
 		unsetPages(state) {
 			state.pages = []
@@ -763,5 +778,37 @@ export default {
 			const response = await axios.get(getters.backlinksUrl(page.parentId, page.id))
 			commit(SET_BACKLINKS, { pages: response.data.data })
 		},
+
+		/**
+		 * Init full width store from browser storage
+		 *
+		 * @param {object} store the vuex store
+		 * @param {Function} store.commit commit changes
+		 */
+		[INIT_FULL_WIDTH_PAGEIDS]({ commit }) {
+			commit(SET_FULL_WIDTH_PAGEIDS, JSON.parse(persistentStorage.getItem('fullWidthPageIds') ?? '[]'))
+		},
+
+		/**
+		 * Set full width for a page
+		 *
+		 * @param {object} store the vuex store
+		 * @param {Function} store.commit commit changes
+		 * @param {object} store.getters getters of the store
+		 * @param {boolean} fullWidthView Whether full width view is enabled or not
+		 */
+		[SET_FULL_WIDTH_VIEW]({ commit, getters }, fullWidthView) {
+			const pageId = getters.currentPage.id
+			const fullWidthPageIds = JSON.parse(persistentStorage.getItem('fullWidthPageIds') ?? '[]')
+			if (fullWidthView && !fullWidthPageIds.includes(pageId)) {
+				fullWidthPageIds.push(pageId)
+				commit(SET_FULL_WIDTH_PAGEIDS, fullWidthPageIds)
+				persistentStorage.setItem('fullWidthPageIds', JSON.stringify(fullWidthPageIds))
+			} else if (!fullWidthView && fullWidthPageIds.includes(pageId)) {
+				fullWidthPageIds.splice(fullWidthPageIds.indexOf(pageId), 1)
+				commit(SET_FULL_WIDTH_PAGEIDS, fullWidthPageIds)
+				persistentStorage.setItem('fullWidthPageIds', JSON.stringify(fullWidthPageIds))
+			}
+		},
 	},
 }

From 16dfa3cef4f3fbcd013fa2b559cd68365dbabc79 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 12 Sep 2023 16:41:19 +0200
Subject: [PATCH 2/5] test(cypress): test full width view toggle

Signed-off-by: Jonas <jonas@freesources.org>
---
 cypress/e2e/pages.spec.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/cypress/e2e/pages.spec.js b/cypress/e2e/pages.spec.js
index 641921026..48538ef38 100644
--- a/cypress/e2e/pages.spec.js
+++ b/cypress/e2e/pages.spec.js
@@ -269,6 +269,38 @@ describe('Page', function() {
 		})
 	})
 
+	describe.only('Full width view', function() {
+		it('Allows to toggle persistent full-width view', function() {
+			cy.visit('/apps/collectives/Our%20Garden/Day%202')
+			cy.get('#titleform').should('have.css', 'max-width', '670px')
+			cy.get('#titleform').invoke('outerWidth').should('eq', 670)
+			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
+
+			// Set full width mode
+			cy.get('#titleform .action-item__menutoggle')
+				.click()
+			cy.contains('li.action', 'Full width')
+				.click()
+			cy.get('#titleform').should('have.css', 'max-width', 'none')
+			cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700)
+			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
+
+			// Reload to check persistence with browser storage
+			cy.reload()
+			cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700)
+			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
+
+			// Unset full width mode
+			cy.get('#titleform .action-item__menutoggle')
+				.click()
+			cy.contains('li.action', 'Full width')
+				.click()
+			cy.get('#titleform').should('have.css', 'max-width', '670px')
+			cy.get('#titleform').invoke('outerWidth').should('eq', 670)
+			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
+		})
+	})
+
 	describe('Using the search providers to search for a page', function() {
 		it('Search for page title', function() {
 			cy.get('.unified-search a').click()

From 201b9ac23355cc4f1645decad4b64e8d45d2cc1b Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 13 Sep 2023 12:12:16 +0200
Subject: [PATCH 3/5] feat(PageActionMenu): Reorder and refactor page actions
 menu

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Page/PageActionMenu.vue | 61 ++++++++++++++++++++------
 1 file changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/components/Page/PageActionMenu.vue b/src/components/Page/PageActionMenu.vue
index 001c5384d..148c2da73 100644
--- a/src/components/Page/PageActionMenu.vue
+++ b/src/components/Page/PageActionMenu.vue
@@ -1,17 +1,10 @@
 <template>
 	<div>
 		<NcActions :force-menu="true" @click.native.stop>
-			<NcActionButton v-if="!inPageList && !showing('sidebar') && isMobile"
-				icon="icon-menu-sidebar"
-				:aria-label="t('collectives', 'Open page sidebar')"
-				aria-controls="app-sidebar-vue"
-				:close-after-click="true"
-				@click="toggle('sidebar')">
-				{{ t('collectives', 'Open page sidebar') }}
-			</NcActionButton>
-			<CollectiveActions v-if="inPageList && isLandingPage"
+			<!-- Collective actions: only displayed for landing page in page list -->
+			<CollectiveActions v-if="displayCollectiveActions"
 				:collective="currentCollective" />
-			<NcActionButton v-if="collectiveExtraAction"
+			<NcActionButton v-if="displayCollectiveActions && collectiveExtraAction"
 				:close-after-click="true"
 				@click="collectiveExtraAction.click()">
 				{{ collectiveExtraAction.title }}
@@ -19,6 +12,27 @@
 					<OpenInNewIcon :size="20" />
 				</template>
 			</NcActionButton>
+			<NcActionSeparator v-if="displayCollectiveActions" />
+
+			<!-- Last edited info -->
+			<PageActionLastUser v-if="displayLastEditedInfo"
+				:last-user-id="lastUserId"
+				:last-user-display-name="lastUserDisplayName"
+				:timestamp="timestamp" />
+			<NcActionSeparator v-if="displayLastEditedInfo" />
+
+			<!-- Sidebar toggle: only displayed on mobile and in page title menu -->
+			<NcActionButton v-if="displaySidebarAction"
+				icon="icon-menu-sidebar"
+				:aria-label="t('collectives', 'Open page sidebar')"
+				aria-controls="app-sidebar-vue"
+				:close-after-click="true"
+				@click="toggle('sidebar')">
+				{{ t('collectives', 'Open page sidebar') }}
+			</NcActionButton>
+			<NcActionSeparator v-if="displaySidebarAction" />
+
+			<!-- Page view options: only displaybed in page title menu -->
 			<NcActionCheckbox v-if="!inPageList && !isMobile"
 				:checked="isFullWidthView"
 				@check="onCheckFullWidthView"
@@ -36,12 +50,17 @@
 				</template>
 				{{ toggleOutlineString }}
 			</NcActionButton>
-			<NcActionLink v-if="showFilesLink"
+			<NcActionSeparator v-if="!inPageList" />
+
+			<!-- Open in files app action: only displayed in page title menu -->
+			<NcActionLink v-if="!inPageList && showFilesLink"
 				:href="filesUrl"
 				icon="icon-files-dark"
 				:close-after-click="true">
 				{{ t('collectives', 'Show in Files') }}
 			</NcActionLink>
+
+			<!-- Edit page emoji: only displaybed in page list -->
 			<NcActionButton v-if="inPageList && currentCollectiveCanEdit && !isTemplate && !isLandingPage"
 				:close-after-click="true"
 				@click.native="show('details')"
@@ -51,6 +70,8 @@
 				</template>
 				{{ setEmojiString }}
 			</NcActionButton>
+
+			<!-- Edit template for subpages -->
 			<NcActionButton v-if="currentCollectiveCanEdit && !isTemplate"
 				:close-after-click="true"
 				class="action-button-template"
@@ -61,6 +82,8 @@
 				</template>
 				{{ editTemplateString }}
 			</NcActionButton>
+
+			<!-- Move page via modal: only displayed in page list -->
 			<NcActionButton v-if="inPageList && currentCollectiveCanEdit && !isLandingPage"
 				:close-after-click="true"
 				@click="onOpenMoveModal">
@@ -69,6 +92,8 @@
 				</template>
 				{{ t('collectives', 'Move page') }}
 			</NcActionButton>
+
+			<!-- Delete page -->
 			<NcActionButton v-if="currentCollectiveCanEdit && !isLandingPage"
 				:close-after-click="true"
 				@click="deletePage(parentId, pageId)">
@@ -77,8 +102,6 @@
 				</template>
 				{{ deletePageString }}
 			</NcActionButton>
-			<NcActionSeparator v-if="lastUserId && lastUserDisplayName" />
-			<PageActionLastUser :last-user-id="lastUserId" :last-user-display-name="lastUserDisplayName" :timestamp="timestamp" />
 		</NcActions>
 		<MoveModal v-if="showMoveModal"
 			:page-id="pageId"
@@ -189,6 +212,18 @@ export default {
 			'visibleSubpages',
 		]),
 
+		displaySidebarAction() {
+			return !this.inPageList && this.showing('sidebar') && isMobile
+		},
+
+		displayCollectiveActions() {
+			return this.inPageList && this.isLandingPage
+		},
+
+		displayLastEditedInfo() {
+			return this.lastUserId && this.lastUserDisplayName
+		},
+
 		toggleOutlineString() {
 			return this.showing('outline')
 				? t('collectives', 'Hide outline')

From 75c68441875cc193c8d8cfee3c256470c2a6276d Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 13 Sep 2023 12:51:17 +0200
Subject: [PATCH 4/5] fix(titlebar): align buttons to the right

Also add same top and right margin to titlebar.

Signed-off-by: Jonas <jonas@freesources.org>
---
 cypress/e2e/pages.spec.js     | 11 +++-----
 src/components/Collective.vue |  2 +-
 src/components/Page.vue       | 52 +++++++++++++++++++----------------
 src/css/editor.scss           |  5 ++++
 4 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/cypress/e2e/pages.spec.js b/cypress/e2e/pages.spec.js
index 48538ef38..0ed13c255 100644
--- a/cypress/e2e/pages.spec.js
+++ b/cypress/e2e/pages.spec.js
@@ -269,11 +269,10 @@ describe('Page', function() {
 		})
 	})
 
-	describe.only('Full width view', function() {
+	describe('Full width view', function() {
 		it('Allows to toggle persistent full-width view', function() {
 			cy.visit('/apps/collectives/Our%20Garden/Day%202')
-			cy.get('#titleform').should('have.css', 'max-width', '670px')
-			cy.get('#titleform').invoke('outerWidth').should('eq', 670)
+			cy.get('#titleform').should('have.css', 'max-width', '100%')
 			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
 
 			// Set full width mode
@@ -282,12 +281,11 @@ describe('Page', function() {
 			cy.contains('li.action', 'Full width')
 				.click()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
-			cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700)
 			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
 
 			// Reload to check persistence with browser storage
 			cy.reload()
-			cy.get('#titleform').invoke('outerWidth').should('be.greaterThan', 700)
+			cy.get('#titleform').should('have.css', 'max-width', 'none')
 			cy.get('#read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
 
 			// Unset full width mode
@@ -295,8 +293,7 @@ describe('Page', function() {
 				.click()
 			cy.contains('li.action', 'Full width')
 				.click()
-			cy.get('#titleform').should('have.css', 'max-width', '670px')
-			cy.get('#titleform').invoke('outerWidth').should('eq', 670)
+			cy.get('#titleform').should('have.css', 'max-width', '100%')
 			cy.get('#read-only-editor').invoke('outerWidth').should('eq', 670)
 		})
 	})
diff --git a/src/components/Collective.vue b/src/components/Collective.vue
index 32493c8ed..b3109ef28 100644
--- a/src/components/Collective.vue
+++ b/src/components/Collective.vue
@@ -202,7 +202,7 @@ export default {
 .page-title {
 	position: sticky;
 	top: 0;
-	padding: 8px 0px 2px 8px;
+	padding: 8px 8px 2px 8px;
 	display: flex;
 	align-items: center;
 	background-color: var(--color-main-background);
diff --git a/src/components/Page.vue b/src/components/Page.vue
index c1c1c4adb..cc04e8a0f 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -77,29 +77,31 @@
 					@blur="renamePage()">
 			</form>
 
-			<!-- Edit button if editable -->
-			<EditButton v-if="currentCollectiveCanEdit"
-				:mobile="isMobile"
-				class="edit-button" />
-
-			<!-- Actions menu -->
-			<PageActionMenu :show-files-link="!isPublic"
-				:page-id="currentPage.id"
-				:parent-id="currentPage.parentId"
-				:timestamp="currentPage.timestamp"
-				:last-user-id="currentPage.lastUserId"
-				:last-user-display-name="currentPage.lastUserDisplayName"
-				:is-landing-page="isLandingPage"
-				:is-template="isTemplatePage" />
-
-			<!-- Sidebar toggle -->
-			<NcActions v-if="!showing('sidebar') && !isMobile">
-				<NcActionButton icon="icon-menu-sidebar"
-					:aria-label="t('collectives', 'Open page sidebar')"
-					aria-controls="app-sidebar-vue"
-					:close-after-click="true"
-					@click="toggle('sidebar')" />
-			</NcActions>
+			<div class="titlebar-buttons">
+				<!-- Edit button if editable -->
+				<EditButton v-if="currentCollectiveCanEdit"
+					:mobile="isMobile"
+					class="edit-button" />
+
+				<!-- Actions menu -->
+				<PageActionMenu :show-files-link="!isPublic"
+					:page-id="currentPage.id"
+					:parent-id="currentPage.parentId"
+					:timestamp="currentPage.timestamp"
+					:last-user-id="currentPage.lastUserId"
+					:last-user-display-name="currentPage.lastUserDisplayName"
+					:is-landing-page="isLandingPage"
+					:is-template="isTemplatePage" />
+
+				<!-- Sidebar toggle -->
+				<NcActions v-if="!showing('sidebar') && !isMobile">
+					<NcActionButton icon="icon-menu-sidebar"
+						:aria-label="t('collectives', 'Open page sidebar')"
+						aria-controls="app-sidebar-vue"
+						:close-after-click="true"
+						@click="toggle('sidebar')" />
+				</NcActions>
+			</div>
 		</h1>
 		<LandingPageWidgets v-if="isLandingPage" />
 		<TextEditor :key="`text-editor-${currentPage.id}`"
@@ -308,6 +310,10 @@ export default {
 	form {
 		flex: auto;
 	}
+
+	.titlebar-buttons {
+		display: flex;
+	}
 }
 </style>
 
diff --git a/src/css/editor.scss b/src/css/editor.scss
index da43166de..1274ed293 100644
--- a/src/css/editor.scss
+++ b/src/css/editor.scss
@@ -7,6 +7,11 @@
 	max-width: var(--text-editor-max-width);
 	margin: auto;
 
+	&.page-title {
+		max-width: 100%;
+		margin: 0 0 0 max(0px, calc(50% - (var(--text-editor-max-width) / 2)));
+	}
+
 	// Editor document status bar
 	.document-status {
 		max-width: var(--text-editor-max-width);

From 7f6a6b7bb7341182f35a819100cfe313d3a914ae Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Thu, 14 Sep 2023 13:51:41 +0200
Subject: [PATCH 5/5] fix(persistentStorage): Prefix persistent storage key
 with `text-`

We might want to use this within Text later on, so let's already prefix
it with `text-` instead of `collectives-`.

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/store/pages.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/store/pages.js b/src/store/pages.js
index b80fd7be6..edc07499b 100644
--- a/src/store/pages.js
+++ b/src/store/pages.js
@@ -786,7 +786,7 @@ export default {
 		 * @param {Function} store.commit commit changes
 		 */
 		[INIT_FULL_WIDTH_PAGEIDS]({ commit }) {
-			commit(SET_FULL_WIDTH_PAGEIDS, JSON.parse(persistentStorage.getItem('fullWidthPageIds') ?? '[]'))
+			commit(SET_FULL_WIDTH_PAGEIDS, JSON.parse(persistentStorage.getItem('text-fullWidthPageIds') ?? '[]'))
 		},
 
 		/**
@@ -799,15 +799,15 @@ export default {
 		 */
 		[SET_FULL_WIDTH_VIEW]({ commit, getters }, fullWidthView) {
 			const pageId = getters.currentPage.id
-			const fullWidthPageIds = JSON.parse(persistentStorage.getItem('fullWidthPageIds') ?? '[]')
+			const fullWidthPageIds = JSON.parse(persistentStorage.getItem('text-fullWidthPageIds') ?? '[]')
 			if (fullWidthView && !fullWidthPageIds.includes(pageId)) {
 				fullWidthPageIds.push(pageId)
 				commit(SET_FULL_WIDTH_PAGEIDS, fullWidthPageIds)
-				persistentStorage.setItem('fullWidthPageIds', JSON.stringify(fullWidthPageIds))
+				persistentStorage.setItem('text-fullWidthPageIds', JSON.stringify(fullWidthPageIds))
 			} else if (!fullWidthView && fullWidthPageIds.includes(pageId)) {
 				fullWidthPageIds.splice(fullWidthPageIds.indexOf(pageId), 1)
 				commit(SET_FULL_WIDTH_PAGEIDS, fullWidthPageIds)
-				persistentStorage.setItem('fullWidthPageIds', JSON.stringify(fullWidthPageIds))
+				persistentStorage.setItem('text-fullWidthPageIds', JSON.stringify(fullWidthPageIds))
 			}
 		},
 	},