ECHO-346 Dashboard announcement fixes

echo/frontend/src/components/announcement/AnnouncementIcon.tsx

@@ -15,17 +15,20 @@ export const AnnouncementIcon = () => {
     useUnreadAnnouncements();
 
   // Get latest urgent announcement message
-  const urgentMessage = latestAnnouncement
+  const message = latestAnnouncement
     ? getTranslatedContent(latestAnnouncement as Announcement, language).message
     : "";
 
   // Check if the latest announcement is unread
-  const isUrgentUnread = latestAnnouncement
+  const isUnread = latestAnnouncement
     ? !latestAnnouncement.activity?.some(
         (activity: AnnouncementActivity) => activity.read === true,
       )
     : false;
 
+  const showMessage =
+    isUnread && message && latestAnnouncement?.level === "info";
+
   const isLoading = isLoadingLatest || isLoadingUnread;
 
   return (
@@ -54,12 +57,12 @@ export const AnnouncementIcon = () => {
         </Indicator>
       </Box>
 
-      {isUrgentUnread && urgentMessage && (
+      {showMessage && (
         <Box
           className="hidden max-w-xs [mask-image:linear-gradient(to_right,black_80%,transparent)] md:block"
           style={{ maxWidth: "400px" }}
         >
-          <Markdown content={urgentMessage} className="line-clamp-1" />
+          <Markdown content={message} className="line-clamp-1" />
         </Box>
       )}
     </Group>

echo/frontend/src/components/announcement/Announcements.tsx

@@ -1,4 +1,13 @@
-import { Box, ScrollArea, Stack, Text, Loader, Center } from "@mantine/core";
+import {
+  Box,
+  ScrollArea,
+  Stack,
+  Text,
+  Loader,
+  Center,
+  Alert,
+  Button,
+} from "@mantine/core";
 import { Trans } from "@lingui/react/macro";
 import { useState, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
@@ -14,6 +23,7 @@ import { AnnouncementSkeleton } from "./AnnouncementSkeleton";
 import { AnnouncementDrawerHeader } from "./AnnouncementDrawerHeader";
 import { useProcessedAnnouncements } from "@/hooks/useProcessedAnnouncements";
 import { useAnnouncementDrawer } from "@/hooks/useAnnouncementDrawer";
+import { IconAlertCircle, IconRefresh } from "@tabler/icons-react";
 
 export const Announcements = () => {
   const { isOpen, close } = useAnnouncementDrawer();
@@ -39,6 +49,7 @@ export const Announcements = () => {
     isLoading,
     isError,
     error,
+    refetch,
   } = useInfiniteAnnouncements({
     options: {
       initialLimit: 10,
@@ -73,9 +84,36 @@ export const Announcements = () => {
     markAllAsReadMutation.mutate();
   };
 
-  if (isError) {
-    console.error("Error loading announcements:", error);
-  }
+  const handleRetry = () => {
+    refetch();
+  };
+  // Error state component
+  const ErrorState = () => (
+    <Box p="md">
+      <Alert
+        icon={<IconAlertCircle size="1rem" />}
+        color="red"
+        variant="light"
+        title={<Trans>Error loading announcements</Trans>}
+      >
+        <Stack gap="md">
+          <Text size="sm">
+            <Trans>Failed to get announcements</Trans>
+          </Text>
+          <Button
+            variant="light"
+            color="red"
+            size="sm"
+            leftSection={<IconRefresh size="1rem" />}
+            onClick={handleRetry}
+            loading={isLoading}
+          >
+            <Trans>Try Again</Trans>
+          </Button>
+        </Stack>
+      </Alert>
+    </Box>
+  );
 
   return (
     <Drawer
@@ -105,7 +143,9 @@ export const Announcements = () => {
       <Stack h="100%">
         <ScrollArea className="flex-1">
           <Stack gap="0">
-            {isLoading ? (
+            {isError ? (
+              <ErrorState />
+            ) : isLoading ? (
               <AnnouncementSkeleton />
             ) : processedAnnouncements.length === 0 ? (
               <Box p="md">

echo/frontend/src/components/announcement/hooks/index.ts

@@ -4,6 +4,7 @@ import {
   useMutation,
   useQueryClient,
 } from "@tanstack/react-query";
+import * as Sentry from "@sentry/react";
 import { Query, readItems, createItems, aggregate } from "@directus/sdk";
 import { directus } from "@/lib/directus";
 import { useCurrentUser } from "@/lib/query";
@@ -63,8 +64,10 @@ export const useLatestAnnouncement = () => {
 
         return response.length > 0 ? response[0] : null;
       } catch (error) {
+        Sentry.captureException(error);
+        toast.error(t`Failed to get the latest announcement`);
         console.error("Error fetching latest announcement:", error);
-        return null;
+        throw error;
       }
     },
     retry: 2,
@@ -145,11 +148,10 @@ export const useInfiniteAnnouncements = ({
             response.length === initialLimit ? pageParam + 1 : undefined,
         };
       } catch (error) {
+        Sentry.captureException(error);
+        toast.error(t`Failed to get announcements`);
         console.error("Error fetching announcements:", error);
-        return {
-          announcements: [],
-          nextOffset: undefined,
-        };
+        throw error;
       }
     },
     initialPageParam: 0,
@@ -176,11 +178,10 @@ export const useMarkAsReadMutation = () => {
           } as any),
         );
       } catch (error) {
+        Sentry.captureException(error);
+        toast.error(t`Failed to mark announcement as read`);
         console.error("Error in mutationFn:", error);
-        return {
-          success: false,
-          error: error,
-        };
+        throw error;
       }
     },
     onMutate: async ({ announcementId }) => {
@@ -329,6 +330,8 @@ export const useMarkAllAsReadMutation = () => {
 
         return [];
       } catch (error) {
+        Sentry.captureException(error);
+        toast.error(t`Failed to mark all announcements as read`);
         console.error("Error in markAllAsRead mutationFn:", error);
         throw error;
       }
@@ -463,8 +466,10 @@ export const useUnreadAnnouncements = () => {
           parseInt(activities?.[0]?.count?.toString() ?? "0");
         return Math.max(0, count);
       } catch (error) {
+        Sentry.captureException(error);
+        toast.error(t`Failed to get unread announcements count`);
         console.error("Error fetching unread announcements count:", error);
-        return 0;
+        throw error;
       }
     },
     enabled: !!currentUser?.id, // Only run query if user is logged in

echo/frontend/src/locales/de-DE.po

@@ -767,6 +767,10 @@ msgstr "Fehler"
 msgid "Error creating report"
 msgstr "Fehler beim Erstellen des Berichts"
 
+#: src/components/announcement/Announcements.tsx:97
+msgid "Error loading announcements"
+msgstr "Fehler beim Laden der Ankündigungen"
+
 #: src/routes/project/conversation/ProjectConversationAnalysis.tsx:58
 #~ msgid "Error loading insights"
 #~ msgstr "Fehler beim Laden der Erkenntnisse"
@@ -836,11 +840,26 @@ msgstr "Fehler beim Aktivieren des Automatischen Auswählens für diesen Chat"
 msgid "Failed to finish conversation. Please try again."
 msgstr "Fehler beim Beenden des Gesprächs. Bitte versuchen Sie es erneut."
 
-#: src/components/announcement/hooks/index.ts:403
+#: src/components/announcement/Announcements.tsx:101
+#: src/components/announcement/hooks/index.ts:152
+msgid "Failed to get announcements"
+msgstr "Fehler beim Laden der Ankündigungen"
+
+#: src/components/announcement/hooks/index.ts:68
+msgid "Failed to get the latest announcement"
+msgstr "Fehler beim Laden der neuesten Ankündigung"
+
+#: src/components/announcement/hooks/index.ts:470
+msgid "Failed to get unread announcements count"
+msgstr "Fehler beim Laden der Anzahl der ungelesenen Ankündigungen"
+
+#: src/components/announcement/hooks/index.ts:334
+#: src/components/announcement/hooks/index.ts:406
 msgid "Failed to mark all announcements as read"
 msgstr "Fehler beim Markieren aller Ankündigungen als gelesen"
 
-#: src/components/announcement/hooks/index.ts:264
+#: src/components/announcement/hooks/index.ts:182
+#: src/components/announcement/hooks/index.ts:265
 msgid "Failed to mark announcement as read"
 msgstr "Fehler beim Markieren der Ankündigung als gelesen"
 
@@ -1233,7 +1252,7 @@ msgstr "Neueste zuerst"
 msgid "Next"
 msgstr "Weiter"
 
-#: src/components/announcement/Announcements.tsx:113
+#: src/components/announcement/Announcements.tsx:153
 msgid "No announcements available"
 msgstr "Keine Ankündigungen verfügbar"
 
@@ -2294,6 +2313,10 @@ msgstr ""
 "\n"
 "Hinweis: Wenn die Diskussion wenig wichtige Entscheidungspunkte oder Einblicke enthält, markieren Sie sie für eine tiefere Untersuchung beim nächsten Mal."
 
+#: src/components/announcement/Announcements.tsx:111
+msgid "Try Again"
+msgstr "Erneut versuchen"
+
 #: src/hooks/useConversationIssueBanner.ts:27
 msgid "Try moving a bit closer to your microphone for better sound quality."
 msgstr "Versuchen Sie, etwas näher an Ihren Mikrofon zu sein, um bessere Audio-Qualität zu erhalten."

echo/frontend/src/locales/en-US.po

@@ -800,6 +800,10 @@ msgstr "Error"
 msgid "Error creating report"
 msgstr "Error creating report"
 
+#: src/components/announcement/Announcements.tsx:97
+msgid "Error loading announcements"
+msgstr "Error loading announcements"
+
 #: src/routes/project/conversation/ProjectConversationAnalysis.tsx:58
 #~ msgid "Error loading insights"
 #~ msgstr "Error loading insights"
@@ -873,11 +877,26 @@ msgstr "Failed to enable Auto Select for this chat"
 msgid "Failed to finish conversation. Please try again."
 msgstr "Failed to finish conversation. Please try again."
 
-#: src/components/announcement/hooks/index.ts:403
+#: src/components/announcement/Announcements.tsx:101
+#: src/components/announcement/hooks/index.ts:152
+msgid "Failed to get announcements"
+msgstr "Failed to get announcements"
+
+#: src/components/announcement/hooks/index.ts:68
+msgid "Failed to get the latest announcement"
+msgstr "Failed to get the latest announcement"
+
+#: src/components/announcement/hooks/index.ts:470
+msgid "Failed to get unread announcements count"
+msgstr "Failed to get unread announcements count"
+
+#: src/components/announcement/hooks/index.ts:334
+#: src/components/announcement/hooks/index.ts:406
 msgid "Failed to mark all announcements as read"
 msgstr "Failed to mark all announcements as read"
 
-#: src/components/announcement/hooks/index.ts:264
+#: src/components/announcement/hooks/index.ts:182
+#: src/components/announcement/hooks/index.ts:265
 msgid "Failed to mark announcement as read"
 msgstr "Failed to mark announcement as read"
 
@@ -1270,7 +1289,7 @@ msgstr "Newest First"
 msgid "Next"
 msgstr "Next"
 
-#: src/components/announcement/Announcements.tsx:113
+#: src/components/announcement/Announcements.tsx:153
 msgid "No announcements available"
 msgstr "No announcements available"
 
@@ -2371,6 +2390,10 @@ msgstr ""
 "\n"
 "Note: If the discussion lacks substantial decision points or insights, flag it for deeper exploration next time."
 
+#: src/components/announcement/Announcements.tsx:111
+msgid "Try Again"
+msgstr "Try Again"
+
 #: src/hooks/useConversationIssueBanner.ts:27
 msgid "Try moving a bit closer to your microphone for better sound quality."
 msgstr "Try moving a bit closer to your microphone for better sound quality."

echo/frontend/src/locales/es-ES.po

@@ -771,6 +771,10 @@ msgstr "Error"
 msgid "Error creating report"
 msgstr "Error al crear el informe"
 
+#: src/components/announcement/Announcements.tsx:97
+msgid "Error loading announcements"
+msgstr "Error al cargar los anuncios"
+
 #: src/routes/project/conversation/ProjectConversationAnalysis.tsx:58
 #~ msgid "Error loading insights"
 #~ msgstr "Error al cargar los insights"
@@ -840,11 +844,26 @@ msgstr "Error al activar la selección automática para este chat"
 msgid "Failed to finish conversation. Please try again."
 msgstr "Error al finalizar la conversación. Por favor, inténtalo de nuevo."
 
-#: src/components/announcement/hooks/index.ts:403
+#: src/components/announcement/Announcements.tsx:101
+#: src/components/announcement/hooks/index.ts:152
+msgid "Failed to get announcements"
+msgstr "Error al obtener los anuncios"
+
+#: src/components/announcement/hooks/index.ts:68
+msgid "Failed to get the latest announcement"
+msgstr "Error al obtener la última notificación"
+
+#: src/components/announcement/hooks/index.ts:470
+msgid "Failed to get unread announcements count"
+msgstr "Error al obtener el número de notificaciones no leídas"
+
+#: src/components/announcement/hooks/index.ts:334
+#: src/components/announcement/hooks/index.ts:406
 msgid "Failed to mark all announcements as read"
 msgstr "Error al marcar todos los anuncios como leídos"
 
-#: src/components/announcement/hooks/index.ts:264
+#: src/components/announcement/hooks/index.ts:182
+#: src/components/announcement/hooks/index.ts:265
 msgid "Failed to mark announcement as read"
 msgstr "Error al marcar el anuncio como leído"
 
@@ -1237,7 +1256,7 @@ msgstr "Más nuevos primero"
 msgid "Next"
 msgstr "Siguiente"
 
-#: src/components/announcement/Announcements.tsx:113
+#: src/components/announcement/Announcements.tsx:153
 msgid "No announcements available"
 msgstr "No hay anuncios disponibles"
 
@@ -2295,6 +2314,10 @@ msgstr ""
 "\n"
 "Nota: Si la discusión carece de puntos de decisión sustanciales o insights, marca para una exploración más profunda la próxima vez."
 
+#: src/components/announcement/Announcements.tsx:111
+msgid "Try Again"
+msgstr "Intentar de nuevo"
+
 #: src/hooks/useConversationIssueBanner.ts:27
 msgid "Try moving a bit closer to your microphone for better sound quality."
 msgstr "Intenta moverte un poco más cerca de tu micrófono para mejorar la calidad del sonido."