fix(core): show the app management page as Apps in the app menu header

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>

Author: jancborchardt

core/src/components/AppMenu.vue

@@ -54,19 +54,19 @@
 			:aria-expanded="opened ? 'true' : 'false'"
 			@click="onTriggerClick('currentApp')">
 			<template #icon>
-				<!-- Settings sub-sections share one generic cog. An inline MDI icon
-					inherits the button's currentColor (--color-background-plain-text),
+				<!-- Sections of the settings app share one generic cog. An inline MDI
+					icon inherits the button's currentColor (--color-background-plain-text),
 					so it stays legible on both bright and dark headers without a filter. -->
 				<IconCog
-					v-if="currentApp.type === 'settings'"
+					v-if="isSettingsSection"
 					class="app-menu__current-app-cog"
 					:size="20" />
-				<img
-					v-else
-					class="app-menu__current-app-icon"
-					:src="currentApp.icon"
-					alt=""
-					aria-hidden="true">
+				<!-- Outer element carries the header fade, inner one the icon shape. -->
+				<span v-else class="app-menu__current-app-icon">
+					<span
+						class="app-menu__current-app-glyph"
+						:style="currentAppIconStyle" />
+				</span>
 			</template>
 			<span class="app-menu__current-app-name">
 				{{ displayName }}
@@ -94,6 +94,8 @@ import logger from '../logger.js'
 // Settings IDs that represent actions, not navigable pages.
 const SETTINGS_ACTION_IDS = new Set(['logout'])
 
+const SETTINGS_SECTION_IDS = new Set(['settings_personal', 'settings_administration', 'accessibility_settings'])
+
 export default defineComponent({
 	name: 'AppMenu',
 
@@ -169,18 +171,28 @@ export default defineComponent({
 				?? Object.values(this.settingsList).find((entry) => entry.active && !SETTINGS_ACTION_IDS.has(entry.id))
 		},
 
-		// Trigger label. Settings sub-section names ("Personal info",
-		// "Appearance and accessibility", ...) are too long and varied to
-		// surface in the header; collapse them all to a single "Settings".
+		isSettingsSection(): boolean {
+			return this.currentApp !== undefined && SETTINGS_SECTION_IDS.has(this.currentApp.id)
+		},
+
 		displayName(): string {
 			if (!this.currentApp) {
 				return ''
 			}
-			return this.currentApp.type === 'settings'
+			return this.isSettingsSection
 				? t('core', 'Settings')
 				: this.currentApp.name
 		},
 
+		// The icon is painted through a mask, so entries with a dark icon
+		// (the app management page ships one for the settings list) are legible
+		// on the header as well. Escaped so a crafted path cannot break out of
+		// the url() token, same as AppIcon.vue.
+		currentAppIconStyle(): Record<string, string> {
+			const icon = this.currentApp?.icon ?? ''
+			return { '--app-icon-url': `url("${icon.replace(/["\\]/g, '\\$&')}")` }
+		},
+
 		// aria-label overrides the inner span text, so the displayed name
 		// has to be duplicated here for screen readers.
 		currentAppLabel(): string {
@@ -459,13 +471,29 @@ export default defineComponent({
 	}
 
 	&__current-app-icon {
+		display: flex;
 		width: calc(var(--default-grid-baseline) * 5);
 		height: calc(var(--default-grid-baseline) * 5);
-		// Theme-aware inversion + vertical alpha fade via --header-menu-icon-mask.
-		filter: var(--background-image-invert-if-bright);
+		// Vertical alpha fade, like the cog and the other header icons.
 		mask: var(--header-menu-icon-mask);
 	}
 
+	&__current-app-glyph {
+		width: 100%;
+		height: 100%;
+		// Masked rather than shown: app icons ship a hardcoded fill, so the
+		// color has to come from the background. Matches AppIcon.vue.
+		background-color: var(--color-background-plain-text);
+		mask: var(--app-icon-url) center / contain no-repeat;
+	}
+
+	// Masked backgrounds are not force-adjusted the way <img> is.
+	@media (forced-colors: active) {
+		&__current-app-glyph {
+			background-color: CanvasText;
+		}
+	}
+
 	&__current-app-cog {
 		mask: var(--header-menu-icon-mask);
 	}

core/src/tests/components/AppMenu.spec.ts

@@ -184,8 +184,8 @@ describe('core: AppMenu', () => {
 				// Object keyed by entry id — matches PHP's serialization shape
 				// (TemplateLayout ships the filtered associative array as-is).
 				return {
-					admin_settings: makeApp({
-						id: 'admin_settings',
+					settings_administration: makeApp({
+						id: 'settings_administration',
 						name: 'Administration settings',
 						type: 'settings',
 						href: '/settings/admin/overview',
@@ -202,13 +202,32 @@ describe('core: AppMenu', () => {
 		expect(wrapper.find('.app-menu__current-app-name').text()).toBe('Settings')
 	})
 
+	it('keeps the own name of settings entries outside the settings app', () => {
+		// On /settings/apps the active entry is the app management one, which
+		// shows "Apps" here and in the account menu, not "Settings".
+		initialState.loadState.mockImplementation((_a: string, key: string, fallback: unknown) => {
+			if (key === 'apps') {
+				return [makeApp({ id: 'files', name: 'Files', active: false })]
+			}
+			if (key === 'settingsNavEntries') {
+				return { appstore: makeApp({ id: 'appstore', name: 'Apps', type: 'settings', href: '/settings/apps', icon: '/apps/appstore/img/app-dark.svg', active: true }) }
+			}
+			return fallback
+		})
+		const wrapper = mount(AppMenu, { attachTo: document.body })
+		expect(wrapper.find('.app-menu__current-app-name').text()).toBe('Apps')
+		// Its own icon, not the generic cog of the settings sections
+		expect(wrapper.find('.app-menu__current-app-glyph').attributes('style'))
+			.toContain('/apps/appstore/img/app-dark.svg')
+	})
+
 	it('prefers the active app over a settings entry when both are marked active', () => {
 		initialState.loadState.mockImplementation((_a: string, key: string, fallback: unknown) => {
 			if (key === 'apps') {
 				return [makeApp({ id: 'files', name: 'Files', active: true })]
 			}
 			if (key === 'settingsNavEntries') {
-				return { admin_settings: makeApp({ id: 'admin_settings', name: 'Administration settings', type: 'settings', active: true }) }
+				return { settings_administration: makeApp({ id: 'settings_administration', name: 'Administration settings', type: 'settings', active: true }) }
 			}
 			return fallback
 		})