feat(NcAppSettingsDialog): add version on the bottom and noVersion prop to disable it

src/components/NcAppContent/NcAppContent.vue

@@ -153,21 +153,18 @@
 import { getBuilder } from '@nextcloud/browser-storage'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { emit } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
 import { useSwipe } from '@vueuse/core'
 import { Pane, Splitpanes } from 'splitpanes'
 import NcAppContentDetailsToggle from './NcAppContentDetailsToggle.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
-import { APP_NAME } from '../../utils/appName.ts'
+import { APP_NAME, getLocalizedAppName } from '../../utils/appName.ts'
 import { logger } from '../../utils/logger.ts'
 import { isRtl } from '../../utils/rtl.ts'
 
 import 'splitpanes/dist/splitpanes.css'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
 const instanceName = getCapabilities().theming?.name ?? 'Nextcloud'
-const activeApp = loadState('core', 'active-app', APP_NAME)
-const localizedAppName = loadState('core', 'apps', []).find(({ id }) => id === activeApp)?.name ?? APP_NAME
 
 /**
  * App content container to be used for the main content of your app
@@ -239,7 +236,7 @@
 		 */
 		showDetails: {
 			type: Boolean,
 			default: true,
 		},
 
 		/**
@@ -359,7 +356,7 @@
 				}
 
 				if (entries.size > 0) {
-					entries.add(localizedAppName)
+					entries.add(getLocalizedAppName())
 				}
 			} else {
 				return null

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -10,6 +10,7 @@ import debounce from 'debounce'
 import { computed, onBeforeUnmount, provide, ref, toRef, useTemplateRef, warn } from 'vue'
 import NcDialog from '../NcDialog/NcDialog.vue'
 import NcVNodes from '../NcVNodes/NcVNodes.vue'
+import NcAppSettingsDialogVersion from './NcAppSettingsDialogVersion.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.ts'
 import { t } from '../../l10n.ts'
 import { APP_SETTINGS_LEGACY_DESIGN_KEY, APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'
@@ -53,11 +54,17 @@ const props = withDefaults(defineProps<{
 	 * @deprecated The legacy design will be removed
 	 */
 	legacy?: boolean
+
+	/**
+	 * Do not add the application version at the bottom of the dialog
+	 */
+	noVersion?: boolean
 }>(), {
 	container: 'body',
 	name: '',
 	additionalTrapElements: () => [],
 	legacy: false,
+	noVersion: false,
 })
 
 defineSlots<{
@@ -245,6 +252,7 @@ function unregisterSection(id: string) {
 		</template>
 		<div ref="settingsScroller" @scroll="handleScroll">
 			<slot />
+			<NcAppSettingsDialogVersion v-if="!noVersion" />
 		</div>
 	</NcDialog>
 </template>

src/components/NcAppSettingsDialog/NcAppSettingsDialogVersion.vue

@@ -0,0 +1,33 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { APP_VERSION, getLocalizedAppName } from '../../utils/appName.ts'
+import { APP_SETTINGS_LEGACY_DESIGN_KEY } from './useAppSettingsDialog.ts'
+
+const legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!
+
+const localizedAppName = getLocalizedAppName()
+</script>
+
+<template>
+	<div :class="[$style.appSettingsDialogVersion, { [$style.appSettingsDialogVersion__legacy]: legacy }]">
+		{{ localizedAppName }} {{ APP_VERSION }}
+	</div>
+</template>
+
+<style lang="scss" module>
+.appSettingsDialogVersion {
+    --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
+    color: var(--color-text-maxcontrast);
+    margin-block-end: calc(8 * var(--default-grid-baseline));
+    margin-inline: var(--form-element-label-offset);
+}
+
+.appSettingsDialogVersion__legacy {
+    margin-inline: 0;
+}
+</style>

src/utils/appName.ts

@@ -3,14 +3,30 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { loadState } from '@nextcloud/initial-state'
 import { logger } from './logger.ts'
+import { once } from './utils.ts'
 
 let realAppName = 'missing-app-name'
-
 try {
 	realAppName = appName
 } catch {
 	logger.error('The `@nextcloud/vue` library was used without setting / replacing the `appName`.')
 }
-
 export const APP_NAME = realAppName
+
+let realAppVersion = ''
+try {
+	realAppVersion = appVersion
+} catch {
+	logger.error('The `@nextcloud/vue` library was used without setting / replacing the `appVersion`.')
+}
+export const APP_VERSION = realAppVersion
+
+/**
+ * Get localized app name from the initial state
+ */
+export const getLocalizedAppName = once(() => {
+	const activeApp = loadState<string>('core', 'active-app', APP_NAME)
+	return loadState<{ id: string, name: string }[]>('core', 'apps', []).find(({ id }) => id === activeApp)?.name ?? APP_NAME
+})

src/utils/utils.ts

@@ -0,0 +1,22 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Single tone function decorator
+ *
+ * @param func - Function
+ */
+export function once<T extends unknown[], K>(func: (...args: T) => K): ((...args: T) => K) {
+	let wasCalled = false
+	let result: K
+
+	return (...args: T): K => {
+		if (!wasCalled) {
+			wasCalled = true
+			result = func(...args)
+		}
+		return result
+	}
+}

styleguide/global.requires.js

@@ -68,3 +68,12 @@ window.NextcloudVueDocs = {
 
 // Add #skip-actions container
 document.body.insertAdjacentHTML('afterbegin', '<div id="skip-actions"></div>')
+
+// Add some initial state
+const toInitialStateValue = (value) => btoa(JSON.stringify(value))
+document.body.appendChild(new DOMParser().parseFromString(`
+	<div id="initial-state-container" style="display: none;">
+		<input type="hidden" id="initial-state-core-active-app" value="${toInitialStateValue('nextcloud-vue')}" />
+		<input type="hidden" id="initial-state-core-apps" value="${toInitialStateValue([{ id: 'nextcloud-vue', name: 'Nextcloud Vue' }])}" />
+	</div>
+`, 'text/html').body.firstChild)