feat(settings): Implement `app` type for AppDiscover section

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

3 files changed, 139 insertions, 12 deletions

diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 06bf162acf9..51d0997c007 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<component :is="listView ? `tr` : `li`"
+	<component :is="listView ? 'tr' : (inline ? 'article' : 'li')"
 		class="app-item"
 		:class="{
 			'app-item--list-view': listView,
@@ -82,7 +82,10 @@
 			<AppLevelBadge :level="app.level" />
 			<AppScore v-if="hasRating && !listView" :score="app.score" />
 		</component>
-		<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="app-actions">
+		<component :is="dataItemTag"
+			v-if="!inline"
+			:headers="getDataItemHeaders(`app-table-col-actions`)"
+			class="app-actions">
 			<div v-if="app.error" class="warning">
 				{{ app.error }}
 			</div>
@@ -145,7 +148,10 @@ export default {
 			type: Object,
 			required: true,
 		},
-		category: {},
+		category: {
+			type: String,
+			required: true,
+		},
 		listView: {
 			type: Boolean,
 			default: true,
@@ -158,6 +164,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		inline: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
diff --git a/apps/settings/src/components/AppStoreDiscover/AppType.vue b/apps/settings/src/components/AppStoreDiscover/AppType.vue
new file mode 100644
index 00000000000..badb560e684
--- /dev/null
+++ b/apps/settings/src/components/AppStoreDiscover/AppType.vue
@@ -0,0 +1,117 @@
+<!--
+  - @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>
+	<AppItem v-if="app"
+		:app="app"
+		category="discover"
+		class="app-discover-app"
+		inline
+		:list-view="false" />
+	<a v-else
+		class="app-discover-app app-discover-app__skeleton"
+		:href="appStoreLink"
+		target="_blank"
+		:title="modelValue.appId"
+		rel="noopener noreferrer">
+		<!-- This is a fallback skeleton -->
+		<span class="skeleton-element" />
+		<span class="skeleton-element" />
+		<span class="skeleton-element" />
+		<span class="skeleton-element" />
+		<span class="skeleton-element" />
+	</a>
+</template>
+
+<script setup lang="ts">
+import type { IAppDiscoverApp } from '../../constants/AppDiscoverTypes'
+
+import { computed } from 'vue'
+import { useAppsStore } from '../../store/apps-store.ts'
+
+import AppItem from '../AppList/AppItem.vue'
+
+const props = defineProps<{
+	modelValue: IAppDiscoverApp
+}>()
+
+const store = useAppsStore()
+const app = computed(() => store.getAppById(props.modelValue.appId))
+
+const appStoreLink = computed(() => props.modelValue.appId ? `https://apps.nextcloud.com/apps/${props.modelValue.appId}` : '#')
+</script>
+
+<style scoped lang="scss">
+.app-discover-app {
+	width: 100% !important; // full with of the showcase item
+
+	&:hover {
+		background: var(--color-background-hover);
+		border-radius: var(--border-radius-rounded);
+	}
+
+	&__skeleton {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		padding: 30px; // Same as AppItem
+
+		> :first-child {
+			height: 50%;
+			min-height: 130px;
+		}
+
+		> :nth-child(2) {
+			width: 50px;
+		}
+
+		> :nth-child(5) {
+			height: 20px;
+			width: 100px;
+		}
+
+		> :not(:first-child) {
+			border-radius: 4px;
+		}
+	}
+}
+
+.skeleton-element {
+	min-height: var(--default-font-size, 15px);
+
+	background: linear-gradient(90deg, var(--color-background-dark), var(--color-background-darker), var(--color-background-dark));
+	background-size: 400% 400%;
+	animation: gradient 6s ease infinite;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+</style>
diff --git a/apps/settings/src/constants/AppDiscoverTypes.ts b/apps/settings/src/constants/AppDiscoverTypes.ts
index 07637936fd4..fe350eb9a35 100644
--- a/apps/settings/src/constants/AppDiscoverTypes.ts
+++ b/apps/settings/src/constants/AppDiscoverTypes.ts
@@ -91,15 +91,6 @@ interface IAppDiscoverMediaContent {
 }
 
 /**
- * An app element only used for the showcase type
- */
-interface IAppDiscoverApp {
-	/** The App ID */
-	type: 'app'
-	app: string
-}
-
-/**
  * Wrapper for post media
  */
 interface IAppDiscoverMedia {
@@ -114,6 +105,15 @@ interface IAppDiscoverMedia {
 	content: ILocalizedValue<IAppDiscoverMediaContent>
 }
 
+/**
+ * An app element only used for the showcase type
+ */
+export interface IAppDiscoverApp {
+	/** The App ID */
+	type: 'app'
+	appId: string
+}
+
 export interface IAppDiscoverPost extends IAppDiscoverElement {
 	type: 'post'
 	text?: ILocalizedValue<string>