From ae2f15d7720c0116e4f5e9a1486a617c56414947 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Fri, 14 Nov 2025 15:17:00 +0100
Subject: [PATCH] fix: add the warning icon when account cannot connect

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Navigation.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 673901e037..880591eddc 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -26,9 +26,17 @@
 					:is-first="isFirst(group.account)"
 					:is-last="isLast(group.account)"
 					:is-disabled="isDisabled(group.account)" />
-				<template v-if="group.account.error">
-					{{ t('mail', 'Connection failed. Please verify your information and try again') }}
-				</template>
+				<div
+					v-if="group.account.error"
+					:key="group.account.error"
+					class="mail-navigation__error-message">
+					<IconAlertTriangle
+						:size="18"
+						:title="t('mail', 'This account cannot connect')" />
+					<span>
+						{{ t('mail', 'Connection failed. Please verify your information and try again') }}
+					</span>
+				</div>
 				<template v-else-if="!isDisabled(group.account)">
 					<template v-for="item in group.mailboxes">
 						<NavigationMailbox
@@ -77,6 +85,7 @@
 <script>
 import { NcAppNavigation as AppNavigation, NcAppNavigationItem as AppNavigationItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import IconAlertTriangle from 'vue-material-design-icons/AlertOutline.vue'
 import IconSetting from 'vue-material-design-icons/CogOutline.vue'
 import AppSettingsMenu from '../components/AppSettingsMenu.vue'
 import NavigationAccount from './NavigationAccount.vue'
@@ -100,6 +109,7 @@ export default {
 		NewMessageButtonHeader,
 		IconSetting,
 		AppNavigationItem,
+		IconAlertTriangle,
 	},
 
 	data() {
@@ -209,6 +219,11 @@ to {
 	&__new-message-button {
 		padding: calc(var(--default-grid-baseline, 4px) * 2);
 	}
+	&__error-message {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
 }
 
 .outbox {