feat(NcAppContent): Allow to set the page title

Sometimes - e.g. when you have multiple view - you want to adjust the page title,
that is shown as the browsers tab name. This adds a property to set that value.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

package.json

@@ -72,7 +72,7 @@
     "@nextcloud/calendar-js": "^6.0.0",
     "@nextcloud/capabilities": "^1.0.4",
     "@nextcloud/event-bus": "^3.0.0",
-    "@nextcloud/initial-state": "^2.0.0",
+    "@nextcloud/initial-state": "^2.1.0",
     "@nextcloud/l10n": "^2.0.1",
     "@nextcloud/logger": "^2.2.1",
     "@nextcloud/router": "^3.0.0",

src/components/NcAppContent/NcAppContent.vue

@@ -115,17 +115,22 @@ The list size must be between the min and the max width value.
 </template>
 
 <script>
-import NcAppDetailsToggle from './NcAppDetailsToggle.vue'
-import { useIsMobile } from '../../composables/useIsMobile/index.js'
-
 import { getBuilder } from '@nextcloud/browser-storage'
 import { emit } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import { useSwipe } from '@vueuse/core'
 import { Splitpanes, Pane } from 'splitpanes'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
+import { t } from '../../l10n.js'
+
+import NcAppDetailsToggle from './NcAppDetailsToggle.vue'
 
 import 'splitpanes/dist/splitpanes.css'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
+const { name: productName } = loadState('theming', 'data', { name: 'Nextcloud' })
+const activeApp = loadState('core', 'active-app', appName)
+const localizedAppName = loadState('core', 'apps', {})[activeApp]?.name ?? appName
 
 /**
  * App content container to be used for the main content of your app
@@ -202,6 +207,17 @@ export default {
 			type: String,
 			default: null,
 		},
+
+		/**
+		 * Allow setting the page's `<title>`
+		 *
+		 * If a page heading is set it defaults to `{pageHeading} - {appName} - {productName}` e.g. `Favorites - Files - Nextcloud`.
+		 * If both `pageTitle` and `pageHeading` are unset the initial `<title>` will not be changed.
+		 */
+		pageTitle: {
+			type: String,
+			default: null,
+		},
 	},
 
 	emits: [
@@ -268,6 +284,24 @@ export default {
 				},
 			}
 		},
+
+		realPageTitle() {
+			if (this.pageTitle) {
+				return this.pageTitle
+			}
+			if (this.pageHeading) {
+				return t('{view} - {app} - {product}', { view: this.pageHeading, app: localizedAppName, product: productName })
+			}
+			return null
+		},
+	},
+
+	watch: {
+		realPageTitle() {
+			if (this.realPageTitle !== null) {
+				window.document.title = this.realPageTitle
+			}
+		},
 	},
 
 	updated() {