1 files changed, 68 insertions, 0 deletions
diff --git a/apps/dashboard/src/components/ApiDashboardWidgetItem.vue b/apps/dashboard/src/components/ApiDashboardWidgetItem.vue
new file mode 100644
index 00000000000..2caa7868fb3
--- /dev/null
+++ b/apps/dashboard/src/components/ApiDashboardWidgetItem.vue
@@ -0,0 +1,68 @@
+<!--
+ - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+ -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcDashboardWidgetItem from '@nextcloud/vue/components/NcDashboardWidgetItem'
+import IconFile from 'vue-material-design-icons/File.vue'
+
+defineProps({
+	item: {
+		type: Object,
+		required: true,
+	},
+	iconSize: {
+		type: Number,
+		required: true,
+	},
+	roundedIcons: {
+		type: Boolean,
+		default: true,
+	},
+})
+
+/**
+ * True as soon as the image is loaded
+ */
+const imageLoaded = ref(false)
+/**
+ * True if the image failed to load and we should show a fallback
+ */
+const loadingImageFailed = ref(false)
+</script>
+
+<template>
+	<NcDashboardWidgetItem :target-url="item.link"
+		:overlay-icon-url="item.overlayIconUrl ? item.overlayIconUrl : ''"
+		:main-text="item.title"
+		:sub-text="item.subtitle">
+		<template #avatar>
+			<template v-if="item.iconUrl">
+				<NcAvatar v-if="roundedIcons"
+					:size="iconSize"
+					:url="item.iconUrl" />
+				<template v-else>
+					<img v-show="!loadingImageFailed"
+						alt=""
+						class="api-dashboard-widget-item__icon"
+						:class="{'hidden-visually': !imageLoaded }"
+						:src="item.iconUrl"
+						@error="loadingImageFailed = true"
+						@load="imageLoaded = true">
+					<!-- Placeholder while the image is loaded and also the fallback if the URL is broken -->
+					<IconFile v-if="!imageLoaded"
+						:size="iconSize" />
+				</template>
+			</template>
+		</template>
+	</NcDashboardWidgetItem>
+</template>
+
+<style scoped>
+.api-dashboard-widget-item__icon {
+	height: var(--default-clickable-area);
+	width: var(--default-clickable-area);
+}
+</style>