From a5291c68a2fbc4ed2b95e94ed17fd3dd95460e5c Mon Sep 17 00:00:00 2001
From: Andrey Borysenko <andrey18106x@gmail.com>
Date: Fri, 11 Oct 2024 17:12:49 +0300
Subject: WIP: add Daemon badge in app sidebar (2)

Signed-off-by: Andrey Borysenko <andrey18106x@gmail.com>
---
 .../src/components/AppList/AppDaemonBadge.vue      | 37 ++++++++++++++++++++++
 apps/settings/src/views/AppStoreSidebar.vue        |  2 ++
 2 files changed, 39 insertions(+)
 create mode 100644 apps/settings/src/components/AppList/AppDaemonBadge.vue

(limited to 'apps')

diff --git a/apps/settings/src/components/AppList/AppDaemonBadge.vue b/apps/settings/src/components/AppList/AppDaemonBadge.vue
new file mode 100644
index 00000000000..1a46d3c7ebb
--- /dev/null
+++ b/apps/settings/src/components/AppList/AppDaemonBadge.vue
@@ -0,0 +1,37 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<span v-if="daemon"
+		class="app-daemon-badge"
+		:title="daemon.name">
+		<NcIconSvgWrapper :path="mdiFileChart" :size="20" inline />
+		{{ daemon.display_name }}
+	</span>
+</template>
+
+<script setup lang="ts">
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import { mdiFileChart } from '@mdi/js'
+import type { IDeployDaemon } from '../../app-types.ts'
+
+const props = defineProps<{
+	daemon?: IDeployDaemon
+}>()
+</script>
+
+<style scoped lang="scss">
+.app-daemon-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;
+}
+</style>
diff --git a/apps/settings/src/views/AppStoreSidebar.vue b/apps/settings/src/views/AppStoreSidebar.vue
index 676458d7459..fc2b94d8ee0 100644
--- a/apps/settings/src/views/AppStoreSidebar.vue
+++ b/apps/settings/src/views/AppStoreSidebar.vue
@@ -26,6 +26,7 @@
 			<!-- Featured/Supported badges -->
 			<div class="app-sidebar__badges">
 				<AppLevelBadge :level="app.level" />
+				<AppDaemonBadge v-if="app?.app_api && app?.daemon" :daemon="app.daemon" />
 				<AppScore v-if="hasRating" :score="rating" />
 			</div>
 		</template>
@@ -52,6 +53,7 @@ import AppDetailsTab from '../components/AppStoreSidebar/AppDetailsTab.vue'
 import AppReleasesTab from '../components/AppStoreSidebar/AppReleasesTab.vue'
 import AppDeployDaemonTab from '../components/AppStoreSidebar/AppDeployDaemonTab.vue'
 import AppLevelBadge from '../components/AppList/AppLevelBadge.vue'
+import AppDaemonBadge from '../components/AppList/AppDaemonBadge.vue'
 import { useAppIcon } from '../composables/useAppIcon.ts'
 import { useStore } from '../store'
 
-- 
cgit v1.2.3