fix(settings): Migrate away from `NcAppNavigationCounter`

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

3 files changed, 45 insertions, 21 deletions

diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
index b7c01ec284f..ee892730b1a 100644
--- a/apps/settings/src/components/GroupListItem.vue
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -30,7 +30,8 @@
 		:menu-open="openGroupMenu"
 		@update:menuOpen="handleGroupMenuOpen">
 		<template #counter>
-			<NcCounterBubble v-if="count">
+			<NcCounterBubble v-if="count"
+				:type="active ? 'highlighted' : undefined">
 				{{ count }}
 			</NcCounterBubble>
 		</template>
@@ -67,18 +68,34 @@ export default {
 		NcAppNavigationItem,
 	},
 	props: {
+		/**
+		 * If this group is currently selected
+		 */
+		active: {
+			type: Boolean,
+			required: true,
+		},
+		/**
+		 * Number of members within this group
+		 */
+		count: {
+			type: Number,
+			required: true,
+		},
+		/**
+		 * Identifier of this group
+		 */
 		id: {
 			type: String,
 			required: true,
 		},
+		/**
+		 * Title of this group
+		 */
 		title: {
 			type: String,
 			required: true,
 		},
-		count: {
-			type: Number,
-			required: false,
-		},
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index f9f1023f928..3cfa3b62bae 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -46,9 +46,9 @@
 					:to="{ name: 'apps-category', params: { category: 'updates' } }"
 					icon="icon-download"
 					:title="$options.APPS_SECTION_ENUM.updates">
-					<NcAppNavigationCounter slot="counter">
-						{{ updateCount }}
-					</NcAppNavigationCounter>
+					<template #counter>
+						<NcCounterBubble>{{ updateCount }}</NcCounterBubble>
+					</template>
 				</NcAppNavigationItem>
 				<NcAppNavigationItem id="app-category-your-bundles"
 					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
@@ -141,11 +141,11 @@ import VueLocalStorage from 'vue-localstorage'
 
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
-import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAppNavigationSpacer from '@nextcloud/vue/dist/Components/NcAppNavigationSpacer.js'
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 
 import AppList from '../components/AppList.vue'
@@ -166,9 +166,9 @@ export default {
 		AppDetails,
 		AppList,
 		NcAppNavigation,
-		NcAppNavigationCounter,
 		NcAppNavigationItem,
 		NcAppNavigationSpacer,
+		NcCounterBubble,
 		AppScore,
 		NcAppSidebar,
 		NcAppSidebarTab,
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index de9648c5d0f..6f8318a872a 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -47,9 +47,11 @@
 					:title="t('settings', 'Active users')"
 					:to="{ name: 'users' }"
 					icon="icon-contacts-dark">
-					<NcAppNavigationCounter v-if="userCount > 0" slot="counter">
-						{{ userCount }}
-					</NcAppNavigationCounter>
+					<template #counter>
+						<NcCounterBubble :type="!selectedGroupDecoded ? 'highlighted' : undefined">
+							{{ userCount }}
+						</NcCounterBubble>
+					</template>
 				</NcAppNavigationItem>
 				<NcAppNavigationItem v-if="settings.isAdmin"
 					id="admin"
@@ -57,9 +59,11 @@
 					:title="t('settings', 'Admins')"
 					:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
 					icon="icon-user-admin">
-					<NcAppNavigationCounter v-if="adminGroupMenu.count" slot="counter">
-						{{ adminGroupMenu.count }}
-					</NcAppNavigationCounter>
+					<template v-if="adminGroupMenu.count > 0" #counter>
+						<NcCounterBubble :type="selectedGroupDecoded === 'admin' ? 'highlighted' : undefined">
+							{{ adminGroupMenu.count }}
+						</NcCounterBubble>
+					</template>
 				</NcAppNavigationItem>
 
 				<!-- Hide the disabled if none, if we don't have the data (-1) show it -->
@@ -69,15 +73,18 @@
 					:title="t('settings', 'Disabled users')"
 					:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
 					icon="icon-disabled-users">
-					<NcAppNavigationCounter v-if="disabledGroupMenu.usercount > 0" slot="counter">
-						{{ disabledGroupMenu.usercount }}
-					</NcAppNavigationCounter>
+					<template v-if="disabledGroupMenu.usercount > 0" #counter>
+						<NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined">
+							{{ disabledGroupMenu.usercount }}
+						</NcCounterBubble>
+					</template>
 				</NcAppNavigationItem>
 
 				<NcAppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
 				<GroupListItem v-for="group in groupList"
 					:id="group.id"
 					:key="group.id"
+					:active="selectedGroupDecoded === group.id"
 					:title="group.title"
 					:count="group.count" />
 			</template>
@@ -137,12 +144,12 @@ import VueLocalStorage from 'vue-localstorage'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
-import NcAppNavigationCounter from '@nextcloud/vue/dist/Components/NcAppNavigationCounter.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
 import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem.js'
 import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
@@ -163,12 +170,12 @@ export default {
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationCaption,
-		NcAppNavigationCounter,
 		NcAppNavigationItem,
 		NcAppNavigationNew,
 		NcAppNavigationNewItem,
 		NcAppNavigationSettings,
 		NcCheckboxRadioSwitch,
+		NcCounterBubble,
 		NcContent,
 		NcSelect,
 		Plus,