From 9d25489a6cb2fb75717dc26fc4ff25290024e7ee Mon Sep 17 00:00:00 2001
From: Gary <contact@ixelia.fr>
Date: Wed, 21 Oct 2026 04:05:48 +0200
Subject: [PATCH] feat(apps): mark the system apps in the grid

---
 src/assets/lang/en_US.json          |  3 ++-
 src/assets/lang/fr_FR.json          |  3 ++-
 src/components/Apps/AppCard.spec.js | 35 +++++++++++++++++++++++++++++
 src/components/Apps/AppCard.vue     | 20 +++++++++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/assets/lang/en_US.json b/src/assets/lang/en_US.json
index 34728209..2e5cf83c 100644
--- a/src/assets/lang/en_US.json
+++ b/src/assets/lang/en_US.json
@@ -2507,5 +2507,6 @@
   "{minutes} min": "{minutes} min",
   "{seconds} s": "{seconds} s",
   "Exited with an error": "Exited with an error",
-  "The settings are applied but could not be kept for good.": "The settings are applied but could not be kept for good."
+  "The settings are applied but could not be kept for good.": "The settings are applied but could not be kept for good.",
+  "System app": "System app"
 }
diff --git a/src/assets/lang/fr_FR.json b/src/assets/lang/fr_FR.json
index 629cd4db..0939950d 100644
--- a/src/assets/lang/fr_FR.json
+++ b/src/assets/lang/fr_FR.json
@@ -2507,5 +2507,6 @@
   "{minutes} min": "{minutes} min",
   "{seconds} s": "{seconds} s",
   "Exited with an error": "Arrêté avec une erreur",
-  "The settings are applied but could not be kept for good.": "Les réglages sont appliqués, mais n'ont pas pu être conservés durablement."
+  "The settings are applied but could not be kept for good.": "Les réglages sont appliqués, mais n'ont pas pu être conservés durablement.",
+  "System app": "Application système"
 }
diff --git a/src/components/Apps/AppCard.spec.js b/src/components/Apps/AppCard.spec.js
index 80a58f89..b8043bfc 100644
--- a/src/components/Apps/AppCard.spec.js
+++ b/src/components/Apps/AppCard.spec.js
@@ -570,3 +570,38 @@ describe('the Statistics card count badge', () => {
 		wrapper.unmount()
 	})
 })
+
+// The system apps carry a small gear chip in the card's top-right corner, where the others have their action button.
+describe('the system app marker', () => {
+	const marker = wrapper => wrapper.find('.system-marker')
+	const system = { name: 'Files', app_type: 'system', status: 'running', title: { en_us: 'Files' } }
+
+	it('marks the system apps, Statistics included, with an accessible name', async () => {
+		for (const name of ['App Store', 'Files', 'Virtual Machines', 'Statistics']) {
+			const wrapper = await card({ ...system, name })
+
+			expect(marker(wrapper).exists()).toBe(true)
+			expect(marker(wrapper).attributes('title')).toBe('System app')
+			expect(marker(wrapper).attributes('aria-label')).toBe('System app')
+			expect(marker(wrapper).find('.icon').attributes('aria-hidden')).toBe('true')
+			wrapper.unmount()
+		}
+	})
+
+	it('keeps the Statistics count badge beside it', async () => {
+		alertBadge.counts.core = 2
+		const wrapper = await card({ ...system, name: 'Statistics' })
+
+		expect(marker(wrapper).exists()).toBe(true)
+		expect(wrapper.find('.stats-badge').text()).toBe('2')
+		alertBadge.counts.core = 0
+		wrapper.unmount()
+	})
+
+	it.each(['v2app', 'container', 'LinkApp'])('is absent on a %s card', async (app_type) => {
+		const wrapper = await card({ app_type })
+
+		expect(marker(wrapper).exists()).toBe(false)
+		wrapper.unmount()
+	})
+})
diff --git a/src/components/Apps/AppCard.vue b/src/components/Apps/AppCard.vue
index 0d51b062..7afcfd34 100644
--- a/src/components/Apps/AppCard.vue
+++ b/src/components/Apps/AppCard.vue
@@ -123,6 +123,10 @@
 			</b-dropdown>
 		</div>
 		<!-- Action Button End -->
+		<!-- System apps have no action button: this chip says what they are. The icon is hidden, the chip names it once. -->
+		<span v-if="item.app_type === 'system'" :aria-label="$t('System app')" :title="$t('System app')" class="system-marker" role="img">
+			<b-icon aria-hidden="true" custom-size="mdi-14px" icon="cog-outline" />
+		</span>
 		<div class="blur-background"></div>
 		<div class="cards-content">
 			<!-- Card Content Start -->
@@ -1299,6 +1303,22 @@ export default {
   left: calc(100% + 6px);
 }
 
+.system-marker {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 50%;
+  background: var(--casa-surface);
+  color: var(--casa-text);
+  opacity: 0.9;
+}
+
 .stats-badge {
   position: absolute;
   top: -0.375rem;