feat: repère des applications système dans la grille

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"
 }

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"
 }

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()
+	})
+})

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 -->
@@ -398,7 +402,7 @@
 		},
 		/**
 		 * @description: Open app in new windows
 		 * @param {string} status App status
 		 * @param {string} port App access port
 		 * @param {string} index App access index
 		 * @return {*} void
@@ -1014,7 +1018,7 @@
 		},
 		/**
 		 * @description: Update App Status
 		 * @param {object} data
 		 * @return {void}
 		 */
 		'app:update-begin': function () {
@@ -1299,6 +1303,22 @@
   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;