fix(core): subdue the More apps and App store tiles, mark active

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

Author: jancborchardt

core/src/components/AppIcon.vue

@@ -93,14 +93,16 @@ $bevel:
 		}
 	}
 
+	// Utility entries ("More apps", "App store") stay subdued: a plain circle
+	// with the icon in the same muted color as the label.
 	&--outlined {
 		background: transparent;
 		background-image: none;
-		box-shadow: inset 0 0 0 2px var(--color-border-maxcontrast);
+		box-shadow: inset 0 0 0 2px var(--color-border);
 	}
 
 	&--outlined &__img {
-		background-color: var(--color-main-text);
+		background-color: var(--color-text-maxcontrast);
 		background-image: none;
 	}
 }

core/src/components/AppItem.vue

@@ -8,6 +8,7 @@
 		class="app-item"
 		:class="{
 			'app-item--active': app.active,
+			'app-item--outlined': outlined,
 		}"
 		:href="app.href"
 		:target="newTab ? '_blank' : undefined"
@@ -125,5 +126,10 @@ const unreadLabel = computed(() => {
 	&--active &__label {
 		font-weight: bold;
 	}
+
+	// Utility entries ("More apps", "App store") are subdued, they are not apps.
+	&--outlined &__label {
+		color: var(--color-text-maxcontrast);
+	}
 }
 </style>

core/src/components/AppMenu.vue

@@ -96,6 +96,9 @@ const SETTINGS_ACTION_IDS = new Set(['logout'])
 
 const SETTINGS_SECTION_IDS = new Set(['settings_personal', 'settings_administration', 'accessibility_settings'])
 
+// Entry of the app management page, the target of the "More apps" tile.
+const APP_MANAGEMENT_ID = 'appstore'
+
 export default defineComponent({
 	name: 'AppMenu',
 
@@ -205,7 +208,9 @@ export default defineComponent({
 		// utility tile is "More apps" (local app management) for admins and
 		// "App store" (apps.nextcloud.com) for everyone else.
 		gridItems(): INavigationEntry[] {
-			const tail = this.isAdmin ? this.moreAppsEntry : this.appStoreEntry
+			const tail = this.isAdmin
+				? { ...this.moreAppsEntry, active: this.currentApp?.id === APP_MANAGEMENT_ID }
+				: this.appStoreEntry
 			return [...this.appList, tail]
 		},
 	},

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

@@ -137,6 +137,26 @@ describe('core: AppMenu', () => {
 		expect(moreApps).toBeTruthy()
 	})
 
+	it('marks the "More apps" tile active on the app management page', async () => {
+		auth.getCurrentUser.mockReturnValue({ isAdmin: true })
+		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', active: true }) }
+			}
+			return fallback
+		})
+		const wrapper = mount(AppMenu, { attachTo: document.body })
+		await openPopover(wrapper)
+
+		const moreApps = Array.from(document.querySelectorAll('[role="menuitem"]'))
+			.find((el) => el.textContent?.includes('More apps'))
+		expect(moreApps?.classList.contains('app-item--active')).toBe(true)
+		expect(moreApps?.getAttribute('aria-current')).toBe('page')
+	})
+
 	it('ArrowRight moves the roving stop from index 0 to index 1 and focuses it', async () => {
 		initialState.loadState.mockImplementation((_a: string, key: string, fallback: unknown) => key === 'apps' ? eightApps() : fallback)
 		const wrapper = mount(AppMenu, { attachTo: document.body })