feat: Make the `app-level` a component (`AppLevelBadge`)

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

4 files changed, 102 insertions, 70 deletions

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index f2de7fce380..dbd2caf4059 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -594,36 +594,6 @@ span.version {
 	color: var(--color-text-maxcontrast);
 }
 
-.app-level {
-	span {
-		color: var(--color-text-maxcontrast);
-		background-color: transparent;
-		border: 1px solid var(--color-text-maxcontrast);
-		border-radius: var(--border-radius);
-		padding: 3px 6px;
-	}
-
-	a {
-		padding: 10px;
-		margin: -6px;
-		white-space: nowrap;
-	}
-
-	.official {
-		background-position: left center;
-		background-position: 5px center;
-		padding-left: 25px;
-	}
-
-	.supported {
-		border-color: var(--color-success);
-		background-position: left center;
-		background-position: 5px center;
-		padding-left: 25px;
-		color: var(--color-success);
-	}
-}
-
 .app-score {
 	position: relative;
 	top: 4px;
@@ -679,20 +649,6 @@ span.version {
 		}
 	}
 
-	.app-level {
-		clear: right;
-		width: 100%;
-
-		.supported,
-		.official {
-			vertical-align: top;
-		}
-
-		.app-score-image {
-			float: right;
-		}
-	}
-
 	.app-author, .app-licence {
 		color: var(--color-text-maxcontrast);
 	}
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 0838f2c8822..fb8f4f6b30b 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -47,7 +47,14 @@
 		<component :is="dataItemTag"
 			class="app-name"
 			:headers="getDataItemHeaders(`app-table-col-name`)">
-			<router-link class="app-name--link" :to="{ name: 'apps-details',	params: { category: category, id: app.id }}"
+			<router-link class="app-name--link"
+				:to="{
+					name: 'apps-details',
+					params: {
+						category: category,
+						id: app.id
+					},
+				}"
 				:aria-label="t('settings', 'Show details for {appName} app', { appName:app.name })">
 				{{ app.name }}
 			</router-link>
@@ -66,17 +73,8 @@
 			<span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span>
 		</component>
 
-		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)" class="app-level">
-			<span v-if="app.level === 300"
-				:title="t('settings', 'This app is supported via your current Nextcloud subscription.')"
-				:aria-label="t('settings', 'This app is supported via your current Nextcloud subscription.')"
-				class="supported icon-checkmark-color">
-				{{ t('settings', 'Supported') }}</span>
-			<span v-if="app.level === 200"
-				:title="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
-				:aria-label="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
-				class="official icon-checkmark">
-				{{ t('settings', 'Featured') }}</span>
+		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)">
+			<AppLevelBadge :level="app.level" />
 			<AppScore v-if="hasRating && !listView" :score="app.score" />
 		</component>
 		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="actions">
@@ -124,6 +122,7 @@
 
 <script>
 import AppScore from './AppScore.vue'
+import AppLevelBadge from './AppLevelBadge.vue'
 import AppManagement from '../../mixins/AppManagement.js'
 import SvgFilterMixin from '../SvgFilterMixin.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -131,12 +130,16 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 export default {
 	name: 'AppItem',
 	components: {
+		AppLevelBadge,
 		AppScore,
 		NcButton,
 	},
 	mixins: [AppManagement, SvgFilterMixin],
 	props: {
-		app: {},
+		app: {
+			type: Object,
+			required: true,
+		},
 		category: {},
 		listView: {
 			type: Boolean,
@@ -175,7 +178,7 @@ export default {
 		this.isSelected = (this.app.id === this.$route.params.id)
 		if (this.app.releases && this.app.screenshot) {
 			const image = new Image()
-			image.onload = (e) => {
+			image.onload = () => {
 				this.screenshotLoaded = true
 			}
 			image.src = this.app.screenshot
diff --git a/apps/settings/src/components/AppList/AppLevelBadge.vue b/apps/settings/src/components/AppList/AppLevelBadge.vue
new file mode 100644
index 00000000000..fedc565f3e0
--- /dev/null
+++ b/apps/settings/src/components/AppList/AppLevelBadge.vue
@@ -0,0 +1,79 @@
+<!--
+  - @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<span v-if="isSupported || isFeatured"
+		class="app-level-badge"
+		:class="{ 'app-level-badge--supported': isSupported }"
+		:title="badgeTitle">
+		<NcIconSvgWrapper :path="badgeIcon" :size="20" />
+		{{ badgeText }}
+	</span>
+</template>
+
+<script setup lang="ts">
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
+import { mdiCheck, mdiStarShooting } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	/**
+	 * The app level
+	 */
+	level?: number
+}>()
+
+const isSupported = computed(() => props.level === 300)
+const isFeatured = computed(() => props.level === 200)
+const badgeIcon = computed(() => isSupported.value ? mdiStarShooting : mdiCheck)
+const badgeText = computed(() => isSupported.value ? t('settings', 'Supported') : t('settings', 'Featured'))
+const badgeTitle = computed(() => isSupported.value
+	? t('settings', 'This app is supported via your current Nextcloud subscription.')
+	: t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.'))
+</script>
+
+<style scoped lang="scss">
+.app-level-badge {
+	color: var(--color-text-maxcontrast);
+	background-color: transparent;
+	border: 1px solid var(--color-text-maxcontrast);
+	border-radius: var(--border-radius);
+
+	display: flex;
+	flex-direction: row;
+	gap: 6px;
+	padding: 3px 6px;
+	width: fit-content;
+
+	&--supported {
+		border-color: var(--color-success);
+		color: var(--color-success);
+	}
+
+	// Fix the svg wrapper TODO: Remove with @nextcloud/vue 8.8.0 release
+	:deep(.icon-vue) {
+		min-width: unset;
+		min-height: unset;
+	}
+}
+</style>
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index 7ec53fd81cd..43259b51d54 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -105,17 +105,9 @@
 
 			<template #description>
 				<!-- Featured/Supported badges -->
-				<div v-if="app.level === 300 || app.level === 200 || hasRating" class="app-level">
-					<span v-if="app.level === 300"
-						:title="t('settings', 'This app is supported via your current Nextcloud subscription.')"
-						class="supported icon-checkmark-color">
-						{{ t('settings', 'Supported') }}</span>
-					<span v-if="app.level === 200"
-						:title="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
-						class="official icon-checkmark">
-						{{ t('settings', 'Featured') }}</span>
-					<AppScore v-if="hasRating" :score="app.appstoreData.ratingOverall" />
-				</div>
+				<AppLevelBadge :level="app.level" />
+				<AppScore v-if="hasRating" :score="app.appstoreData.ratingOverall" />
+
 				<div class="app-version">
 					<p>{{ app.version }}</p>
 				</div>
@@ -161,6 +153,7 @@ import IconStarShooting from 'vue-material-design-icons/StarShooting.vue'
 import AppList from '../components/AppList.vue'
 import AppDetails from '../components/AppDetails.vue'
 import AppManagement from '../mixins/AppManagement.js'
+import AppLevelBadge from '../components/AppList/AppLevelBadge.vue'
 import AppScore from '../components/AppList/AppScore.vue'
 import Markdown from '../components/Markdown.vue'
 
@@ -179,6 +172,7 @@ export default {
 		NcAppContent,
 		AppDetails,
 		AppList,
+		AppLevelBadge,
 		IconStarShooting,
 		NcAppNavigation,
 		NcAppNavigationItem,
@@ -294,7 +288,7 @@ export default {
 			this.screenshotLoaded = false
 			if (this.app?.releases && this.app?.screenshot) {
 				const image = new Image()
-				image.onload = (e) => {
+				image.onload = () => {
 					this.screenshotLoaded = true
 				}
 				image.src = this.app.screenshot