Conversation
…unctionality and styling - Updated AnnouncementItem to handle announcements with string IDs and added a date formatting function. - Enhanced the Announcements component to fetch announcements from an API, replacing hardcoded data. - Introduced loading states and error handling for marking announcements as read. - Removed the deprecated announcementList file and adjusted related types in Directus definitions.
…unctionality and performance - Updated AnnouncementItem to use forwardRef for better ref handling and adjusted internal refs for message display. - Enhanced Announcements component to utilize useInfiniteAnnouncements for paginated fetching of announcements. - Implemented loading state for fetching more announcements and improved error handling. - Cleaned up code for better readability and maintainability.
- Replaced IconUrgent with IconAlertTriangle in AnnouncementItem for better visual representation. - Refactored Announcements component to use useAnnouncementDrawer for managing drawer state. - Integrated TopAnnouncementBar into Header for enhanced user notifications. - Added useLatestAnnouncement hook to fetch the most recent announcement, improving data handling and user experience.
…styling and functionality - Updated the label in Announcements component to include padding and text size for better visibility. - Adjusted the rotation of the IconSpeakerphone in Announcements for a more polished appearance. - Changed the ThemeIcon variant in TopAnnouncementBar to 'transparent' for a cleaner look. - Increased the size of the IconAlertTriangle in TopAnnouncementBar for better visual impact.
…d translation handling - Integrated language support in TopAnnouncementBar by utilizing the useLanguage hook. - Replaced direct translation access with a new getTranslatedContent function for better translation management. - Updated TopAnnouncementBar to render announcement titles using Markdown for enhanced formatting. - Removed staleTime configuration from useLatestAnnouncement for cleaner data fetching.
- Changed button variants in AnnouncementItem to 'transparent' for a cleaner look. - Added 'gray' color to buttons and applied 'hover:underline' class for better visual feedback on hover.
…k announcements as read - Integrated useCurrentUser and useMarkAnnouncementAsReadMutation hooks for user-specific announcement handling. - Added logic to check if the announcement has been read by the current user before displaying it. - Implemented error handling and toast notifications for marking announcements as read, improving user feedback.
…rrent user dependency - Removed useCurrentUser hook from Announcements and TopAnnouncementBar components to simplify logic for marking announcements as read. - Updated the markAsRead mutation to handle user IDs as optional, streamlining the announcement read status functionality. - Enhanced error handling for marking announcements as read, improving overall user experience.
- Simplified the Announcements component by removing unnecessary dependencies and improving state management. - Enhanced error handling in announcement fetching and marking as read, providing better user feedback. - Introduced a new useUnreadAnnouncements hook to track unread announcements, improving notification functionality. - Updated Header to include AnnouncementIcon for better visual representation of announcements.
…y handling - Consolidated imports for cleaner code structure. - Introduced a new state to track if the drawer has been opened for the first time, enhancing user experience. - Updated the useInfiniteAnnouncements hook to conditionally enable fetching based on the new state, optimizing performance.
- Removed unreadCount prop and integrated useUnreadAnnouncements for fetching unread announcements directly. - Updated component structure for improved readability and functionality. - Enhanced conditional rendering for unread announcements and button visibility based on the fetched data.
…ience - Adjusted the loader size from 'sm' to 'md' for better visibility during data fetching. - Added vertical padding to the Center component to enhance layout aesthetics.
- Updated the structure and styling of the AnnouncementSkeleton to provide a more visually appealing loading state. - Increased the number of skeleton items displayed and improved layout with additional icons and spacing for better user interaction. - Implemented hover effects and transitions to enhance the overall user experience during data fetching.
- Updated the AnnouncementIcon component to enhance clickability by moving the onClick handler to the Group element. - Simplified the structure by removing the cursor-pointer class from the Box element, improving code readability.
…ment tracking - Integrated current user data into the useUnreadAnnouncements hook to conditionally fetch unread announcements based on user ID. - Added logic to return 0 if no user is logged in, ensuring a smoother experience for unauthenticated users. - Updated queryKey to include currentUser ID for more accurate data retrieval and caching. - Enabled the query only when a user is logged in, optimizing performance and reducing unnecessary requests.
…er experience - Introduced a new useMarkAllAnnouncementsAsReadMutation hook to handle marking all announcements as read in a single call. - Updated the Announcements component to utilize the new mutation, simplifying the process of marking all announcements as read. - Enhanced success and error handling with toast notifications for better user feedback during the marking process.
…utton visibility and interaction - Updated AnnouncementDrawerHeader to conditionally render the "Mark all read" button only when there are unread announcements, enhancing user experience. - Modified AnnouncementIcon to ensure the disabled state is correctly determined by parsing the unreadCount, improving interaction reliability.
… improved logic and performance - Updated AnnouncementDrawerHeader to simplify unreadCount checks by removing unnecessary parsing. - Refactored useUnreadAnnouncements hook to enhance query logic, changing from _and to _or for better filtering of announcements based on expiration status. - Improved count calculation for unread announcements by directly parsing the counts, ensuring accurate results.
- Removed unnecessary isMarkingAsRead prop from AnnouncementItem component, simplifying its interface. - Updated mutation hooks in Announcements and TopAnnouncementBar components for consistency and clarity. - Enhanced the useMarkAsReadMutation and useMarkAllAsReadMutation hooks to streamline the announcement marking process with optimistic updates and improved error handling.
…nt to streamline code and improve clarity.
- Added useEffect to reset the drawer state to closed when the page is reloaded, improving user experience. - Updated useUnreadAnnouncements hook to ensure unread announcement count does not go below zero, enhancing data accuracy.
…r improved text display
…roved accessibility
…ng variables in Tailwind configuration - Added custom height and padding variables to Tailwind config for base and project layouts. - Updated TopAnnouncementBar to adjust layout height dynamically based on announcement state. - Refactored BaseLayout and ProjectLayout components to utilize new Tailwind variables for improved layout consistency.
…n up code and improve performance.
- Adjusted padding and margin in TopAnnouncementBar component for better alignment and spacing. - Enhanced the layout by modifying the class names to ensure a more visually appealing design.
- Updated the disabled prop in AnnouncementIcon to directly check unreadCount, improving code clarity and reducing unnecessary parsing.
- Updated date formatting logic in AnnouncementItem to utilize the `t` function for localization, ensuring time strings are translatable. - Improved clarity of the TODO comment regarding future enhancements to the date formatting function.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 51
🔭 Outside diff range comments (2)
echo/frontend/src/locales/nl-NL.po (1)
1-15: MissingPlural-Formsheader – plural strings will explode at runtime.Add the Dutch rule so Lingui can compile pluralised entries (e.g. “unread announcements”).
-"Plural-Forms: \n" +"Plural-Forms: nplurals=2; plural=(n != 1);\n"echo/frontend/src/locales/de-DE.po (1)
12-15: Add German plural-forms header to enable correct pluralizationThe PO header still has an empty
Plural-Forms:field, but you introduced strings that rely on plural handling (unread announcement(s)). Without the correct rule Lingui/ICU will fall back to the English default and pick the wrong form.-"Plural-Forms: \n" +"Plural-Forms: nplurals=2; plural=(n != 1);\n"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (3)
echo/directus/sync/specs/item.graphqlis excluded by!echo/directus/sync/specs/**echo/directus/sync/specs/openapi.jsonis excluded by!echo/directus/sync/specs/**echo/directus/sync/specs/system.graphqlis excluded by!echo/directus/sync/specs/**
📒 Files selected for processing (77)
echo/directus/sync/collections/dashboards.json(1 hunks)echo/directus/sync/collections/panels.json(4 hunks)echo/directus/sync/collections/permissions.json(1 hunks)echo/directus/sync/snapshot/collections/announcement.json(1 hunks)echo/directus/sync/snapshot/collections/announcement_activity.json(1 hunks)echo/directus/sync/snapshot/collections/announcement_translations.json(1 hunks)echo/directus/sync/snapshot/collections/dashboard_announcements_translations.json(1 hunks)echo/directus/sync/snapshot/collections/languages.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/activity.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/created_at.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/expires_at.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/id.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/level.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/sort.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/translations.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/updated_at.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/user_created.json(1 hunks)echo/directus/sync/snapshot/fields/announcement/user_updated.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/announcement_activity.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/created_at.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/id.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/read.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/sort.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/updated_at.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/user_created.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/user_id.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_activity/user_updated.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_translations/announcement_id.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_translations/id.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_translations/languages_code.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_translations/message.json(1 hunks)echo/directus/sync/snapshot/fields/announcement_translations/title.json(1 hunks)echo/directus/sync/snapshot/fields/dashboard_announcements_translations/id.json(1 hunks)echo/directus/sync/snapshot/fields/dashboard_announcements_translations/languages_code.json(1 hunks)echo/directus/sync/snapshot/fields/dashboard_announcements_translations/mark_all_as_read.json(1 hunks)echo/directus/sync/snapshot/fields/dashboard_announcements_translations/title.json(1 hunks)echo/directus/sync/snapshot/fields/dashboard_announcements_translations/unread_notifications.json(1 hunks)echo/directus/sync/snapshot/fields/languages/code.json(1 hunks)echo/directus/sync/snapshot/fields/languages/direction.json(1 hunks)echo/directus/sync/snapshot/fields/languages/name.json(1 hunks)echo/directus/sync/snapshot/relations/announcement/user_created.json(1 hunks)echo/directus/sync/snapshot/relations/announcement/user_updated.json(1 hunks)echo/directus/sync/snapshot/relations/announcement_activity/announcement_activity.json(1 hunks)echo/directus/sync/snapshot/relations/announcement_activity/user_created.json(1 hunks)echo/directus/sync/snapshot/relations/announcement_activity/user_updated.json(1 hunks)echo/directus/sync/snapshot/relations/announcement_translations/announcement_id.json(1 hunks)echo/directus/sync/snapshot/relations/announcement_translations/languages_code.json(1 hunks)echo/directus/sync/snapshot/relations/dashboard_announcements_translations/languages_code.json(1 hunks)echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx(1 hunks)echo/frontend/src/components/announcement/AnnouncementIcon.tsx(1 hunks)echo/frontend/src/components/announcement/AnnouncementItem.tsx(1 hunks)echo/frontend/src/components/announcement/AnnouncementSkeleton.tsx(1 hunks)echo/frontend/src/components/announcement/Announcements.tsx(1 hunks)echo/frontend/src/components/announcement/TopAnnouncementBar.tsx(1 hunks)echo/frontend/src/components/announcement/hooks/index.ts(1 hunks)echo/frontend/src/components/announcement/utils/dateUtils.ts(1 hunks)echo/frontend/src/components/common/Drawer.tsx(1 hunks)echo/frontend/src/components/layout/BaseLayout.tsx(1 hunks)echo/frontend/src/components/layout/Header.tsx(3 hunks)echo/frontend/src/components/layout/ProjectLayout.tsx(1 hunks)echo/frontend/src/config.ts(1 hunks)echo/frontend/src/hooks/useAnnouncementDrawer.tsx(1 hunks)echo/frontend/src/hooks/useProcessedAnnouncements.ts(1 hunks)echo/frontend/src/lib/query.ts(1 hunks)echo/frontend/src/lib/typesDirectus.d.ts(2 hunks)echo/frontend/src/lib/typesDirectusContent.ts(2 hunks)echo/frontend/src/locales/de-DE.po(25 hunks)echo/frontend/src/locales/de-DE.ts(1 hunks)echo/frontend/src/locales/en-US.po(25 hunks)echo/frontend/src/locales/en-US.ts(1 hunks)echo/frontend/src/locales/es-ES.po(25 hunks)echo/frontend/src/locales/es-ES.ts(1 hunks)echo/frontend/src/locales/fr-FR.po(25 hunks)echo/frontend/src/locales/fr-FR.ts(1 hunks)echo/frontend/src/locales/nl-NL.po(25 hunks)echo/frontend/src/locales/nl-NL.ts(1 hunks)echo/frontend/tailwind.config.js(1 hunks)
🧰 Additional context used
🧠 Learnings (27)
echo/frontend/src/hooks/useAnnouncementDrawer.tsx (1)
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/directus/sync/snapshot/fields/dashboard_announcements_translations/id.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/directus/sync/snapshot/fields/announcement_translations/id.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/directus/sync/snapshot/fields/announcement_activity/id.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/frontend/src/components/layout/Header.tsx (1)
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/directus/sync/snapshot/relations/announcement_activity/user_created.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/directus/sync/snapshot/relations/announcement/user_created.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/directus/sync/snapshot/fields/announcement/id.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/directus/sync/snapshot/relations/dashboard_announcements_translations/languages_code.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/directus/sync/snapshot/relations/announcement/user_updated.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/frontend/src/locales/en-US.po (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/nl-NL.po (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/components/announcement/Announcements.tsx (1)
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/directus/sync/snapshot/relations/announcement_translations/announcement_id.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx (1)
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/frontend/src/locales/fr-FR.po (2)
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/locales/fr-FR.po:521-523
Timestamp: 2025-05-30T15:36:40.131Z
Learning: In the French localization file (fr-FR.po), "Dembrane Echo" is intentionally translated as "Echo Dembrane" for better French language flow and natural sound. This is not an error but a deliberate localization choice.
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (1)
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/directus/sync/snapshot/relations/announcement_translations/languages_code.json (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/frontend/src/locales/de-DE.po (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/lib/typesDirectus.d.ts (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/frontend/src/lib/typesDirectusContent.ts (1)
Learnt from: spashii
PR: Dembrane/echo#142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with `id` properties (e.g., `conversation_id: { id: conversationId } as Conversation`) rather than direct ID values, even though this appears redundant.
echo/frontend/src/locales/es-ES.po (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/fr-FR.ts (2)
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/locales/fr-FR.po:521-523
Timestamp: 2025-05-30T15:36:40.131Z
Learning: In the French localization file (fr-FR.po), "Dembrane Echo" is intentionally translated as "Echo Dembrane" for better French language flow and natural sound. This is not an error but a deliberate localization choice.
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/es-ES.ts (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/en-US.ts (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/de-DE.ts (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
echo/frontend/src/locales/nl-NL.ts (1)
Learnt from: ussaama
PR: Dembrane/echo#180
File: echo/frontend/src/locales/es-ES.ts:1-1
Timestamp: 2025-06-06T05:43:44.935Z
Learning: When users indicate they have already addressed translation issues in locale files, verify the current state before assuming the issue persists. Translation files are often updated in bulk and previously flagged English text may have been properly localized.
🧬 Code Graph Analysis (9)
echo/frontend/src/components/layout/Header.tsx (4)
echo/frontend/src/config.ts (1)
ENABLE_ANNOUNCEMENTS(42-43)echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (1)
TopAnnouncementBar(20-107)echo/frontend/src/components/announcement/AnnouncementIcon.tsx (1)
AnnouncementIcon(9-67)echo/frontend/src/components/announcement/Announcements.tsx (1)
Announcements(18-143)
echo/frontend/src/components/layout/BaseLayout.tsx (1)
echo/frontend/src/components/layout/Header.tsx (1)
Header(80-191)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (3)
echo/frontend/src/hooks/useAnnouncementDrawer.tsx (1)
useAnnouncementDrawer(4-28)echo/frontend/src/components/announcement/hooks/index.ts (2)
useLatestAnnouncement(13-73)useUnreadAnnouncements(412-474)echo/frontend/src/hooks/useProcessedAnnouncements.ts (1)
getTranslatedContent(3-14)
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx (1)
echo/frontend/src/components/announcement/hooks/index.ts (1)
useUnreadAnnouncements(412-474)
echo/frontend/src/hooks/useProcessedAnnouncements.ts (1)
echo/frontend/src/lib/typesDirectusContent.ts (1)
Announcement(1099-1107)
echo/frontend/src/components/announcement/AnnouncementItem.tsx (2)
echo/frontend/src/lib/typesDirectusContent.ts (1)
Announcement(1099-1107)echo/frontend/src/components/announcement/utils/dateUtils.ts (1)
formatDate(4-25)
echo/frontend/src/lib/typesDirectus.d.ts (1)
echo/frontend/src/lib/typesDirectusContent.ts (5)
Announcement(1099-1107)DirectusUsers(697-724)AnnouncementTranslations(1109-1114)AnnouncementActivity(1116-1123)Languages(858-862)
echo/frontend/src/locales/es-ES.ts (1)
echo/frontend/src/locales/en-US.ts (1)
messages(1-1)
echo/frontend/src/locales/nl-NL.ts (1)
echo/frontend/src/locales/en-US.ts (1)
messages(1-1)
🪛 Biome (1.9.4)
echo/frontend/src/components/announcement/hooks/index.ts
[error] 462-462: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.
(lint/style/useNumberNamespace)
[error] 463-463: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.
(lint/style/useNumberNamespace)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Cursor BugBot
- GitHub Check: ci-check-server
🔇 Additional comments (70)
echo/frontend/tailwind.config.js (1)
9-16: LGTM! Clean layout utilities with proper fallbacks.Solid 100x move centralizing these layout values into Tailwind utilities. The CSS variable approach with calc() fallbacks is chef's kiss - gives you runtime flexibility while keeping the math readable.
echo/frontend/src/components/announcement/utils/dateUtils.ts (2)
3-3: TODO acknowledged - solid MVP approach.Good call keeping the TODO visible. This util does what it needs to do for v1. When you circle back to enhance it, consider timezone handling and maybe configurable thresholds.
4-25: LGTM! Clean relative time formatting with proper i18n.This is exactly how you implement relative time formatting - good input validation, sensible time buckets, and proper fallback to locale date. The lingui integration is clean too. 100x engineer approved.
echo/frontend/src/lib/query.ts (1)
2183-2183: LGTM! EOF newline for the win.Classic POSIX compliance fix. Your linter will thank you.
echo/frontend/src/config.ts (1)
42-43: LGTM! Feature flag follows the established pattern perfectly.Clean feature toggle implementation. Matches the existing conventions and gives you proper deployment control. This is how you ship features like a 100x engineer.
echo/directus/sync/collections/dashboards.json (1)
9-15: LGTM! Announcements dashboard follows Directus conventions.Clean dashboard config that matches the existing pattern. Proper syncId, standard icon choice, and ready to house those announcement metrics panels. 100x backend setup right here.
echo/frontend/src/components/layout/ProjectLayout.tsx (1)
20-20: LGTM - Clean refactoring to custom utilities.Solid move replacing the inline calc with
md:h-project-layout-height. This centralizes the layout math and makes it way easier to maintain when header dimensions change.echo/directus/sync/snapshot/fields/dashboard_announcements_translations/mark_all_as_read.json (1)
1-43: LGTM - Standard translation field config.Field config looks dialed in. The 255 char limit and nullable settings are perfect for translation strings. Half-width display keeps the UI clean.
echo/directus/sync/snapshot/fields/announcement_activity/read.json (1)
1-45: LGTM - Boolean field config is 💯.Default false is the right call for read tracking, and cast-boolean special handling ensures clean type safety. This'll work perfectly for the read state logic.
echo/directus/sync/snapshot/fields/announcement_activity/sort.json (1)
1-43: LGTM - Sort field config is solid.Hidden integer field is the standard pattern for sort ordering. 32-bit precision gives you plenty of headroom for sort values. Clean implementation.
echo/frontend/src/components/layout/BaseLayout.tsx (2)
11-11: LGTM - Header height cleanup.Removing the explicit height lets the header size itself naturally while the custom utilities handle the layout math. Smart move.
16-16: LGTM - Custom utilities FTW.Swapping those inline calculations for
h-base-layout-height pt-base-layout-paddingis chef's kiss. Way cleaner than the oldh-[calc(100%-60px)] pt-[60px]approach.echo/directus/sync/snapshot/fields/announcement/updated_at.json (1)
2-23: LGTM – standarddate-updatedplumbing checks out.
No action needed.echo/directus/sync/snapshot/fields/announcement_activity/updated_at.json (1)
2-23: LGTM – mirrors the parentannouncement.updated_atsemantics.echo/directus/sync/snapshot/fields/dashboard_announcements_translations/languages_code.json (1)
33-41: Make the FK non-nullable to avoid orphaned translations.A translation without a language code is undefined behaviour. Tighten it up:
- "is_nullable": true, + "is_nullable": false, ... - "required": false, + "required": true,echo/directus/sync/snapshot/fields/announcement/created_at.json (1)
1-47: LGTM! Solid Directus field config.This timestamp field configuration follows all the right patterns - proper special field marking, hidden/readonly for system fields, and that relative time display is chef's kiss for UX.
echo/directus/sync/snapshot/fields/dashboard_announcements_translations/id.json (1)
1-43: Clean primary key setup - textbook implementation.Perfect auto-increment primary key config. The sequence-based default value and all the constraints are exactly what you'd expect from a senior dev. This is how you do it.
echo/directus/sync/snapshot/collections/dashboard_announcements_translations.json (1)
1-28: Solid collection config - follows all the conventions.Clean Directus collection setup with proper accountability and archive filtering. The hidden flag makes sense for a translations collection, and that import_export icon choice is on point.
echo/frontend/src/hooks/useAnnouncementDrawer.tsx (1)
4-28: Clean hook architecture - love the explicit function declarations.This hook API is chef's kiss - clean separation between low-level setter and high-level actions. The session storage persistence is solid for UX, and resetting to closed on mount prevents weird states. The explicit function declarations align perfectly with the codebase's preference for clarity over terseness.
echo/directus/sync/snapshot/fields/announcement/id.json (1)
4-21: Primary-key setup looks solid – nothing to block.
uuid+readonly+ hidden checks all the boxes.
Ship it.echo/directus/sync/snapshot/collections/languages.json (1)
3-24: LGTM – foundation for i18n in place.Collection meta is lean and correct; primary-key field handled elsewhere.
echo/frontend/src/locales/en-US.ts (1)
1-1: Solid i18n additions for the announcement feature.The relative time keys (
P1pDS8,bT6AxW) and announcement strings follow the existing pattern perfectly. Love that you're keeping the cryptic key naming convention consistent - very enterprise-y.The
[["diffInDays"],"d ago"]and[["diffInHours"],"h ago"]format looks correct for your i18n setup.LGTM!
echo/directus/sync/snapshot/fields/announcement_translations/message.json (1)
1-43: Clean rich text field setup for translations.The
input-rich-text-mdinterface is a solid choice for announcement content - gives users the markdown editing power they need without overwhelming them with a full WYSIWYG editor.The nullable, non-required config makes sense for translation workflows where content gets added incrementally.
LGTM on this field config!
echo/directus/sync/snapshot/fields/announcement_activity/announcement_activity.json (1)
1-43: Proper foreign key setup for activity tracking.The UUID field with
foreign_key_table: "announcement"andforeign_key_column: "id"is exactly how you'd wire up this relationship. Hidden field makes sense since this is probably managed by your application logic, not user input.The
select-dropdown-m2ointerface is overkill for a hidden field but doesn't hurt anything.LGTM!
echo/directus/sync/snapshot/collections/announcement_translations.json (1)
1-28: Standard translations collection setup.The hidden collection with
accountability: "all"is the right approach for translation tables - you want full audit trails on these. Theimport_exporticon is a nice touch for the admin interface.No versioning makes sense here since translations are typically managed through the parent announcement entity.
LGTM on this collection config!
echo/directus/sync/snapshot/fields/announcement_translations/announcement_id.json (2)
33-36: Index the FK for O(1) look-ups
announcement_idwill be the join key on every translation fetch. Without an index, Postgres will fall back to a seq-scan and your i18n layer will crawl once the table grows.
[ suggest_essential_refactor ]- "is_nullable": true, - "is_unique": false, - "is_indexed": false, + "is_nullable": true, + "is_unique": false, + "is_indexed": true,
12-18: Hidden + no interface ⇒ uneditable in admin UIWith
"hidden": trueand"interface": null, editors won’t be able to wire a translation to its parent from Directus UI.
Double-check that this field is always written via automation; otherwise removehiddenor provide an M2O interface.echo/directus/sync/snapshot/fields/announcement_activity/user_updated.json (1)
12-18: Redundant UI costField is
"hidden": trueyet still declares aselect-dropdown-m2ointerface. Drop the interface block to shave bytes or un-hide if back-office staff need to edit.⛔ Skipped due to learnings
Learnt from: ussaama PR: Dembrane/echo#169 File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464 Timestamp: 2025-05-30T15:38:44.413Z Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.echo/directus/sync/snapshot/fields/announcement_activity/created_at.json (1)
30-34: Rely ondate-createdspecial? LGTMThe
date-createdspecial will auto-stamp; leavingdefault_valuenull is fine. No action needed.echo/directus/sync/snapshot/fields/announcement/user_created.json (1)
12-23: LGTM – hidden, readonly, auto-populated.Nothing to nit here; matches Directus
user-createdconvention.echo/directus/sync/snapshot/fields/announcement_translations/languages_code.json (1)
12-18: Field is hidden but nullable – double-check write flowIf the UI never sets
languages_code, inserts will silently fail FK checks. Make sure the translations interface injects the code or fliprequiredto true.echo/directus/sync/snapshot/fields/announcement/translations.json (1)
15-19: Verify options for thetranslationsinterfaceThe interface usually expects
translationsCollection(or similar) pointing atannouncement_translations. Missing this key may break the widget at runtime.Do we have a working instance confirming the drawer loads?
echo/frontend/src/components/layout/Header.tsx (3)
28-31: Clean feature flag integration! LGTM.The announcement imports and feature flag setup are well-organized. The conditional rendering pattern maintains clean separation of concerns.
107-108: Proper placement of TopAnnouncementBar! LGTM.Smart to render the announcement bar outside the Paper component for full-width display. The authentication and feature flag checks are on point.
135-181: Excellent component organization! LGTM.The Group wrapping of announcement components with the settings menu creates a cohesive user experience. The feature flag checks are consistent and the menu structure remains clean.
echo/directus/sync/snapshot/relations/announcement/user_created.json (1)
1-25: Standard Directus relation config! LGTM.The foreign key relationship is properly configured with appropriate constraints. The nullify action on deselect and NO ACTION constraints are solid choices for user relations.
echo/directus/sync/snapshot/collections/announcement_activity.json (1)
1-28: Solid collection configuration! LGTM.The announcement_activity collection is properly configured with accountability tracking and appropriate archive settings. The sort field setup will enable proper ordering of activity records.
echo/frontend/src/components/common/Drawer.tsx (1)
8-36: Excellent TypeScript patterns! LGTM.The prop typing with required fields and sensible defaults is exactly what you want to see. The props spreading maintains flexibility while enforcing the essential drawer behavior.
echo/directus/sync/snapshot/relations/announcement_translations/languages_code.json (1)
1-25: Proper i18n relation setup! LGTM.The translation-to-language relation is configured correctly with appropriate constraints. The SET NULL on delete allows graceful handling of language removal while NO ACTION on update maintains referential integrity.
echo/frontend/src/locales/fr-FR.ts (1)
1-1: LGTM! Auto-generated localization looking clean.The minified format and eslint-disable suggest this is properly generated from source files. Announcement translations are in place - "Annonces", "Marquer toutes comme lues", etc. Ship it! 🚀
echo/directus/sync/snapshot/relations/announcement_activity/user_updated.json (1)
1-25: Solid relation config - exactly what I'd expect from a 100x engineer.Clean foreign key setup with proper constraints. "NO ACTION" + "nullify" combo is the right move for audit trail preservation. LGTM!
echo/directus/sync/snapshot/relations/announcement_activity/user_created.json (1)
1-25: Perfect consistency with the user_updated relation - love to see it.Same solid pattern as the other user relations. Clean constraint setup, proper nullify action. This is the kind of consistency that makes codebases maintainable. LGTM!
echo/directus/sync/snapshot/relations/dashboard_announcements_translations/languages_code.json (1)
1-24: Schema + meta are in harmony. LGTM.echo/directus/sync/snapshot/relations/announcement_translations/announcement_id.json (1)
5-14: Double-checkone_field: "translations"exists onannouncement.The relation metadata claims a reciprocal
translationsfield on theannouncementcollection. If that field isn’t actually in the snapshot set, Directus will choke on import. Worth a quick grep before shipping.echo/frontend/src/locales/nl-NL.po (4)
67-74: Variable placeholders preserved. LGTM.
249-252: Solid translation. LGTM.
1201-1208: Translation matches UI copy. LGTM.
1981-1988: No issues with “Show more/less”. LGTM.echo/frontend/src/locales/fr-FR.po (2)
220-223: LGTMTranslation for “Announcements” is perfect and respects prior learning about ordering (“Echo Dembrane” precedent).
1043-1050: Refine “Mark all read / Mark as read” phrasingCurrent forms are grammatically OK but a bit heavy:
-msgstr "Marquer toutes comme lues" +msgstr "Tout marquer comme lu" -msgstr "Marquer comme lue" +msgstr "Marquer comme lu"“lu” is idiomatic, gender-neutral for UI actions, and avoids extra words.
⛔ Skipped due to learnings
Learnt from: ussaama PR: Dembrane/echo#169 File: echo/frontend/src/locales/fr-FR.po:1847-1849 Timestamp: 2025-05-30T15:37:46.616Z Learning: User ussaama prefers not to address minor French translation grammar issues when they don't impact functionality, considering them acceptable as "language things" rather than errors that need fixing.Learnt from: ussaama PR: Dembrane/echo#169 File: echo/frontend/src/locales/fr-FR.po:1298-1301 Timestamp: 2025-05-30T15:37:46.279Z Learning: In French localization files, UI terms like "Portail" should maintain their proper capitalization according to French language conventions, even if it appears inconsistent with lowercase usage in other translations. French capitalization rules for UI terms should be respected over assumed consistency patterns.Learnt from: ussaama PR: Dembrane/echo#169 File: echo/frontend/src/locales/fr-FR.po:1778-1780 Timestamp: 2025-05-30T15:37:29.029Z Learning: Translation and localization suggestions should be treated as preferences rather than errors. Different phrasings in target languages can be equally valid, and users may have specific reasons for choosing particular translations.echo/frontend/src/locales/en-US.po (8)
72-79: LGTM – relative-time keys are tidyPlaceholders and abbreviations follow the same convention (
{diffInDays},{diffInHours}), so consuming code will format cleanly.
225-228: LGTM – collection header addedKey/translation pair for “Announcements” looks consistent with the rest of the file.
592-595: LGTM – doc link labelNo issues spotted.
800-807: LGTM – failure messages read clearlyWording and casing match neighbouring entries.
993-996: LGTM – “Just now” addedZero-diff placeholder handled fine.
1080-1083: LGTM – singular action is fine“Mark as read” is already standard.
1163-1166: LGTM – empty-state copyNo issues.
1818-1825: LGTM – toggle labelsConsistent with other list expanders.
echo/frontend/src/locales/es-ES.po (2)
2152-2159: Plural translations look solid – LGTMSingular / plural variants for the unread-announcement badge are accurate and preserve the placeholder-free semantics. Ship it.
67-74: Time-ago translations: handle singular/plural & check layoutThe Spanish strings for
{diffInDays}d agoand{diffInHours}h agowill render as “1 días atrás” / “1 horas atrás” and may break tight UI elements. Consider one of the following:• Use full ICU-style plurals in your .po (msgid_plural + msgstr[0]/msgstr[1])
• Or keep the compact look with an abbreviated form:-msgstr "{diffInDays} días atrás" -msgstr "{diffInHours} horas atrás" +msgstr "hace {diffInDays} d" +msgstr "hace {diffInHours} h"Please verify in the app for both singular (“1 d”, “1 h”) and plural cases before shipping.
echo/frontend/src/locales/es-ES.ts (1)
1-1: LGTM! Translations ship clean and complete.The Spanish locale additions for the announcements feature look solid. All the new keys (
P1pDS8,bT6AxW,Dzr23X,JSxZVX, etc.) have proper Spanish translations and follow the existing lingui format perfectly.echo/frontend/src/components/announcement/Announcements.tsx (1)
18-143: Solid infinite scroll implementation, 100x approved.The component architecture is clean with proper separation of concerns. Infinite scrolling with React Query, proper loading states, and accessibility considerations are all on point. The useEffect pattern follows React best practices.
echo/frontend/src/locales/de-DE.ts (1)
1-1: Deutsche Lokalisierung sieht perfekt aus.Clean German translations for the announcement feature. All new keys are properly translated and the JSON structure maintains integrity. The relative time expressions ("Tage zuvor", "Stunden zuvor") and UI strings look native.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (1)
20-107: Urgent announcement bar ships solid.The component logic for showing/hiding urgent announcements is well thought out. Event handling, state management, and conditional rendering all follow React best practices. The markdown support and internationalization are properly implemented.
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx (1)
7-53: Header component architecture is clean and functional.Proper TypeScript interfaces, good accessibility with aria-label, and solid internationalization implementation. The loading states and button controls are well handled.
echo/frontend/src/locales/nl-NL.ts (1)
1-1: LGTM! Solid Dutch translations ship perfectly.The announcement feature translations are properly localized with accurate Dutch equivalents. Time expressions, notification actions, and error messages all look native. The plural forms are handled correctly too. This scales.
echo/frontend/src/hooks/useProcessedAnnouncements.ts (1)
20-34: Hook implementation scales beautifully with proper memoization.The useMemo dependency array is correct and the transformation logic is clean. The translation fallback strategy is solid.
echo/frontend/src/components/announcement/AnnouncementSkeleton.tsx (1)
4-67: Skeleton component structure ships clean and performant.The pulse animation and layout hierarchy properly mimics the actual announcement component structure. Good use of Mantine components for consistent spacing.
echo/directus/sync/collections/permissions.json (1)
2441-2454:announcement_translations.readLGTMRead-only access with a tight field list – crisp and safe.
echo/directus/sync/collections/panels.json (1)
721-751: Fix the displayTemplate field reference.The
displayTemplatereferences{{user_created.first_name}}but thegroupByFieldisuser_id. Should reference the correct field.- "displayTemplate": "{{user_created.first_name}}", + "displayTemplate": "{{user_id.first_name}}",Likely an incorrect or invalid review comment.
| } | ||
| }, | ||
| retry: 2, | ||
| staleTime: 1000 * 60 * 5, // 5 minutes |
There was a problem hiding this comment.
@ussaama
is this functionally the same as refetchInterval? if it is, just to reduce cognitive complexity i would request you to change this to refetchInterval as we use it everywhere else in query.ts
There was a problem hiding this comment.
refetchInterval refetches automatically at a fixed, recurring interval, regardless of whether the data is stale or fresh.
whereas if we use staletime, React Query will serve the cached data without triggering a refetch, even if new instances of the query mount, the window regains focus, or the network reconnects. meaning no extra load.
There was a problem hiding this comment.
I don't see the purpose of using these 2 queries here:
- useLatestAnnouncement
- useInfiniteAnnouncements
I believe the "latest announcement" can be obtained from useInfiniteAnnouncements.data[0]
So, can we merge them if there is no specific reason to keep it separate? To keep this simple
There was a problem hiding this comment.
Find it hard to believe that we need a 455 LOC file to do these hooks! 😅
No wonder our query.ts is >2000LOC
There was a problem hiding this comment.
@spashii "useLatestAnnouncement" only fetches 1 latest announcement to show title in the topbar. we dont call "useInfiniteAnnouncements" until the Announcement Drawer is opened.
| useEffect(() => { | ||
| const shouldUseDefaultHeight = | ||
| isLoading || | ||
| !announcement || | ||
| announcement.level !== "urgent" || | ||
| isClosed || | ||
| isRead; | ||
|
|
||
| const height = shouldUseDefaultHeight ? "60px" : "112px"; | ||
| const root = document.documentElement.style; | ||
|
|
||
| root.setProperty("--base-layout-height", `calc(100% - ${height})`, "important"); | ||
| root.setProperty("--base-layout-padding", height, "important"); | ||
| root.setProperty("--project-layout-height", `calc(100vh - ${height})`, "important"); | ||
| }, [isLoading, announcement, isClosed, isRead]); |
There was a problem hiding this comment.
I would agree with this. @ussaama this is not React-y. Maybe we need some abstraction to maintain this state?
| if (isError) { | ||
| console.error("Error loading announcements:", error); | ||
| } |
There was a problem hiding this comment.
@ussaama Toast and send it to sentry, if you handle it, it doesn't send to Sentry, so always send such exceptions to sentry
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx
Outdated
Show resolved
Hide resolved
- Replaced the existing date formatting function with a new implementation using date-fns for improved localization support. - Introduced a custom hook `useFormatDate` to handle locale-specific date formatting. - Updated the AnnouncementItem component to utilize the new date formatting hook, enhancing code clarity and maintainability.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
echo/frontend/src/components/announcement/AnnouncementItem.tsx (2)
22-30: Still duplicating types here, amigo.This local Announcement type is still duplicating the global one. The global Directus types are available without imports in this codebase.
92-104: Those TODO comments are still hanging around.The inline styles for the unread indicator are still there with the TODO comments. Time to either ship it as-is or use Mantine's Indicator component for consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
echo/frontend/src/components/announcement/AnnouncementItem.tsx(1 hunks)echo/frontend/src/components/announcement/utils/dateUtils.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
echo/frontend/src/components/announcement/AnnouncementItem.tsx (4)
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/components/announcement/hooks/index.ts:23-36
Timestamp: 2025-07-03T13:34:59.438Z
Learning: In the echo frontend codebase, using `@ts-ignore` for Directus SDK filter type issues is acceptable and preferred over extending types or using workarounds. This applies specifically to date comparisons and other filter operations where the SDK types may not be perfectly aligned.
echo/frontend/src/components/announcement/utils/dateUtils.ts (1)
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
🪛 Biome (1.9.4)
echo/frontend/src/components/announcement/utils/dateUtils.ts
[error] 18-18: This type annotation is trivially inferred from its initialization.
Safe fix: Remove the type annotation.
(lint/style/noInferrableTypes)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Cursor BugBot
- GitHub Check: ci-check-server
🔇 Additional comments (2)
echo/frontend/src/components/announcement/utils/dateUtils.ts (1)
1-38: Solid date formatting implementation. Ship it!The i18n support with locale fallback is chef's kiss. The edge case handling for null/undefined dates is exactly what we need. This addresses the previous feedback about using formatRelative from date-fns perfectly.
echo/frontend/src/components/announcement/AnnouncementItem.tsx (1)
41-161: Rock-solid component implementation. LGTM!The forwardRef usage is clean, the show more/less logic with scroll height detection is well-implemented, and the accessibility patterns are solid. The Mantine integration looks good and the conditional styling based on read status is exactly what users expect.
…uncements - Updated the getTranslatedContent function to replace 'any' type with specific types for better type safety and clarity. - Changed the parameter type for announcements from 'any' to 'Announcement' and for translations from 'any' to 'AnnouncementTranslations'.
…lity - Introduced a new variable `hasUnreadAnnouncements` in AnnouncementDrawerHeader for better clarity when checking unread announcements. - Updated type annotations in AnnouncementIcon and TopAnnouncementBar components to use specific types instead of 'any', enhancing type safety and code maintainability.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (3)
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx (1)
1-56: LGTM! 🚀 Clean implementation with previous feedback addressed.This component is solid - proper TypeScript, clean React patterns, and I can see you've extracted that duplicated condition into
hasUnreadAnnouncements. The accessibility attributes, i18n support, and loading states are all handled correctly. Classic 100x engineering right here.echo/frontend/src/components/announcement/AnnouncementIcon.tsx (1)
17-27: Consider memoizing computations for optimal performance.These computed values could benefit from memoization to avoid recalculation on every render, especially if this component re-renders frequently.
The previous suggestion to use
useMemoforurgentMessageandisUrgentUnreadstill applies for performance optimization.echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (1)
34-48: Direct DOM manipulation still not the React way.The direct manipulation of
document.documentElement.styleapproach still stands out as non-React-y and could cause SSR issues or conflicts with other styling solutions.Consider using a React context or state management solution to handle these CSS custom properties in a more React-native way for better maintainability and testability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx(1 hunks)echo/frontend/src/components/announcement/AnnouncementIcon.tsx(1 hunks)echo/frontend/src/components/announcement/TopAnnouncementBar.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (4)
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
Learnt from: ussaama
PR: Dembrane/echo#90
File: echo/frontend/src/routes/participant/ParticipantPostConversation.tsx:86-99
Timestamp: 2025-03-31T10:39:20.458Z
Learning: In React components with debounced functions using setTimeout, two types of cleanup are recommended: 1) Clearing timeouts between function calls and 2) Using useEffect cleanup function to clear timeouts when the component unmounts.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (4)
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/components/announcement/hooks/index.ts:23-36
Timestamp: 2025-07-03T13:34:59.438Z
Learning: In the echo frontend codebase, using `@ts-ignore` for Directus SDK filter type issues is acceptable and preferred over extending types or using workarounds. This applies specifically to date comparisons and other filter operations where the SDK types may not be perfectly aligned.
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx (3)
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
🧬 Code Graph Analysis (3)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (4)
echo/frontend/src/hooks/useAnnouncementDrawer.tsx (1)
useAnnouncementDrawer(4-28)echo/frontend/src/components/announcement/hooks/index.ts (2)
useLatestAnnouncement(13-73)useUnreadAnnouncements(412-474)echo/frontend/src/hooks/useProcessedAnnouncements.ts (1)
getTranslatedContent(3-14)echo/frontend/src/lib/typesDirectusContent.ts (1)
Announcement(1099-1107)
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (4)
echo/frontend/src/components/announcement/hooks/index.ts (2)
useLatestAnnouncement(13-73)useMarkAsReadMutation(160-271)echo/frontend/src/hooks/useAnnouncementDrawer.tsx (1)
useAnnouncementDrawer(4-28)echo/frontend/src/lib/typesDirectusContent.ts (2)
AnnouncementActivity(1116-1123)Announcement(1099-1107)echo/frontend/src/hooks/useProcessedAnnouncements.ts (1)
getTranslatedContent(3-14)
echo/frontend/src/components/announcement/AnnouncementDrawerHeader.tsx (1)
echo/frontend/src/components/announcement/hooks/index.ts (1)
useUnreadAnnouncements(412-474)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Cursor BugBot
- GitHub Check: ci-check-server
🔇 Additional comments (4)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (1)
32-65: Solid component architecture - clean separation of concerns.The loading states, conditional rendering, and click handlers are well-implemented. The masked gradient effect for text truncation is a nice touch.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (3)
31-31: LGTM - proper typing implemented.Good improvement from the previous review - now using
AnnouncementActivitytype instead ofanyfor better type safety.
63-77: Clean event handling and mutation logic.The separation of concerns between closing the bar and marking as read is well-implemented. Good use of
stopPropagationand proper async handling.
79-106: Solid UI implementation with proper accessibility.The layout, styling, and click handlers are well-structured. The absolute positioning for the close button and proper event handling make for a good user experience.
…e safety - Changed the type of the activity parameter from 'any' to 'AnnouncementActivity' in the AnnouncementIcon component, enhancing type safety and code clarity.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (1)
17-28: Still missing the memoization optimization.These computations run on every render without memoization. The performance optimization I suggested before is still relevant - wrap
urgentMessageandisUrgentUnreadinuseMemoto avoid unnecessary recalculations.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.537Z
Learning: In the echo frontend codebase, type assertions like `as Announcement` are necessary when using data returned from Directus SDK hooks like `useLatestAnnouncement()` because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (6)
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.537Z
Learning: In the echo frontend codebase, type assertions like `as Announcement` are necessary when using data returned from Directus SDK hooks like `useLatestAnnouncement()` because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.939Z
Learning: In the echo frontend codebase, Directus types like `Announcement` are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like `echo/frontend/src/lib/typesDirectus.d.ts` and `echo/frontend/src/lib/typesDirectusContent.ts`.
Learnt from: ussaama
PR: Dembrane/echo#185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: Dembrane/echo#169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
Learnt from: ussaama
PR: Dembrane/echo#90
File: echo/frontend/src/routes/participant/ParticipantPostConversation.tsx:86-99
Timestamp: 2025-03-31T10:39:20.458Z
Learning: In React components with debounced functions using setTimeout, two types of cleanup are recommended: 1) Clearing timeouts between function calls and 2) Using useEffect cleanup function to clear timeouts when the component unmounts.
Learnt from: ussaama
PR: Dembrane/echo#202
File: echo/frontend/src/components/announcement/hooks/index.ts:23-36
Timestamp: 2025-07-03T13:34:59.438Z
Learning: In the echo frontend codebase, using `@ts-ignore` for Directus SDK filter type issues is acceptable and preferred over extending types or using workarounds. This applies specifically to date comparisons and other filter operations where the SDK types may not be perfectly aligned.
🧬 Code Graph Analysis (1)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (4)
echo/frontend/src/hooks/useAnnouncementDrawer.tsx (1)
useAnnouncementDrawer(4-28)echo/frontend/src/components/announcement/hooks/index.ts (2)
useLatestAnnouncement(13-73)useUnreadAnnouncements(412-474)echo/frontend/src/hooks/useProcessedAnnouncements.ts (1)
getTranslatedContent(3-14)echo/frontend/src/lib/typesDirectusContent.ts (2)
Announcement(1099-1107)AnnouncementActivity(1116-1123)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Cursor BugBot
- GitHub Check: ci-check-server
🔇 Additional comments (2)
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (2)
1-16: Clean hook composition - this is the way.Solid imports and hook usage pattern. The destructuring is clean and the separation of concerns with custom hooks is chef's kiss.
29-31: LGTM - clean loading state handling.
* Add Announcements component to Header for improved user notifications * Update Announcements component icons and adjust notification indicator styling * Refactor AnnouncementItem and Announcements components for improved functionality and styling - Updated AnnouncementItem to handle announcements with string IDs and added a date formatting function. - Enhanced the Announcements component to fetch announcements from an API, replacing hardcoded data. - Introduced loading states and error handling for marking announcements as read. - Removed the deprecated announcementList file and adjusted related types in Directus definitions. * Refactor AnnouncementItem and Announcements components for improved functionality and performance - Updated AnnouncementItem to use forwardRef for better ref handling and adjusted internal refs for message display. - Enhanced Announcements component to utilize useInfiniteAnnouncements for paginated fetching of announcements. - Implemented loading state for fetching more announcements and improved error handling. - Cleaned up code for better readability and maintainability. * Update Announcement components and add latest announcement query - Replaced IconUrgent with IconAlertTriangle in AnnouncementItem for better visual representation. - Refactored Announcements component to use useAnnouncementDrawer for managing drawer state. - Integrated TopAnnouncementBar into Header for enhanced user notifications. - Added useLatestAnnouncement hook to fetch the most recent announcement, improving data handling and user experience. * Enhance Announcements and TopAnnouncementBar components for improved styling and functionality - Updated the label in Announcements component to include padding and text size for better visibility. - Adjusted the rotation of the IconSpeakerphone in Announcements for a more polished appearance. - Changed the ThemeIcon variant in TopAnnouncementBar to 'transparent' for a cleaner look. - Increased the size of the IconAlertTriangle in TopAnnouncementBar for better visual impact. * Refactor TopAnnouncementBar and useProcessedAnnouncements for improved translation handling - Integrated language support in TopAnnouncementBar by utilizing the useLanguage hook. - Replaced direct translation access with a new getTranslatedContent function for better translation management. - Updated TopAnnouncementBar to render announcement titles using Markdown for enhanced formatting. - Removed staleTime configuration from useLatestAnnouncement for cleaner data fetching. * Update AnnouncementItem styling for improved user interaction - Changed button variants in AnnouncementItem to 'transparent' for a cleaner look. - Added 'gray' color to buttons and applied 'hover:underline' class for better visual feedback on hover. * Enhance TopAnnouncementBar functionality to track read status and mark announcements as read - Integrated useCurrentUser and useMarkAnnouncementAsReadMutation hooks for user-specific announcement handling. - Added logic to check if the announcement has been read by the current user before displaying it. - Implemented error handling and toast notifications for marking announcements as read, improving user feedback. * Refactor Announcements and TopAnnouncementBar components to remove current user dependency - Removed useCurrentUser hook from Announcements and TopAnnouncementBar components to simplify logic for marking announcements as read. - Updated the markAsRead mutation to handle user IDs as optional, streamlining the announcement read status functionality. - Enhanced error handling for marking announcements as read, improving overall user experience. * Refactor Announcements component and enhance query handling - Simplified the Announcements component by removing unnecessary dependencies and improving state management. - Enhanced error handling in announcement fetching and marking as read, providing better user feedback. - Introduced a new useUnreadAnnouncements hook to track unread announcements, improving notification functionality. - Updated Header to include AnnouncementIcon for better visual representation of announcements. * Refactor Announcements component to improve state management and query handling - Consolidated imports for cleaner code structure. - Introduced a new state to track if the drawer has been opened for the first time, enhancing user experience. - Updated the useInfiniteAnnouncements hook to conditionally enable fetching based on the new state, optimizing performance. * Refactor AnnouncementDrawerHeader to utilize useUnreadAnnouncements hook - Removed unreadCount prop and integrated useUnreadAnnouncements for fetching unread announcements directly. - Updated component structure for improved readability and functionality. - Enhanced conditional rendering for unread announcements and button visibility based on the fetched data. * Update Announcements component loader styling for improved user experience - Adjusted the loader size from 'sm' to 'md' for better visibility during data fetching. - Added vertical padding to the Center component to enhance layout aesthetics. * Refactor AnnouncementSkeleton component for enhanced loading experience - Updated the structure and styling of the AnnouncementSkeleton to provide a more visually appealing loading state. - Increased the number of skeleton items displayed and improved layout with additional icons and spacing for better user interaction. - Implemented hover effects and transitions to enhance the overall user experience during data fetching. * Refactor AnnouncementIcon component for improved user interaction - Updated the AnnouncementIcon component to enhance clickability by moving the onClick handler to the Group element. - Simplified the structure by removing the cursor-pointer class from the Box element, improving code readability. * Enhance useUnreadAnnouncements hook to improve user-specific announcement tracking - Integrated current user data into the useUnreadAnnouncements hook to conditionally fetch unread announcements based on user ID. - Added logic to return 0 if no user is logged in, ensuring a smoother experience for unauthenticated users. - Updated queryKey to include currentUser ID for more accurate data retrieval and caching. - Enabled the query only when a user is logged in, optimizing performance and reducing unnecessary requests. * Add markAllAsRead mutation to Announcements component for improved user experience - Introduced a new useMarkAllAnnouncementsAsReadMutation hook to handle marking all announcements as read in a single call. - Updated the Announcements component to utilize the new mutation, simplifying the process of marking all announcements as read. - Enhanced success and error handling with toast notifications for better user feedback during the marking process. * Refactor AnnouncementDrawerHeader and AnnouncementIcon for improved button visibility and interaction - Updated AnnouncementDrawerHeader to conditionally render the "Mark all read" button only when there are unread announcements, enhancing user experience. - Modified AnnouncementIcon to ensure the disabled state is correctly determined by parsing the unreadCount, improving interaction reliability. * Refactor AnnouncementDrawerHeader and useUnreadAnnouncements hook for improved logic and performance - Updated AnnouncementDrawerHeader to simplify unreadCount checks by removing unnecessary parsing. - Refactored useUnreadAnnouncements hook to enhance query logic, changing from _and to _or for better filtering of announcements based on expiration status. - Improved count calculation for unread announcements by directly parsing the counts, ensuring accurate results. * Refactor announcement marking logic for improved clarity and performance - Removed unnecessary isMarkingAsRead prop from AnnouncementItem component, simplifying its interface. - Updated mutation hooks in Announcements and TopAnnouncementBar components for consistency and clarity. - Enhanced the useMarkAsReadMutation and useMarkAllAsReadMutation hooks to streamline the announcement marking process with optimistic updates and improved error handling. * Remove unused unreadAnnouncements variable from Announcements component to streamline code and improve clarity. * Enhance useAnnouncementDrawer hook to reset drawer state on page reload - Added useEffect to reset the drawer state to closed when the page is reloaded, improving user experience. - Updated useUnreadAnnouncements hook to ensure unread announcement count does not go below zero, enhancing data accuracy. * Update TopAnnouncementBar to apply line clamping on title Markdown for improved text display * Add focus outline to close button in AnnouncementDrawerHeader for improved accessibility * Enhance layout responsiveness by introducing dynamic height and padding variables in Tailwind configuration - Added custom height and padding variables to Tailwind config for base and project layouts. - Updated TopAnnouncementBar to adjust layout height dynamically based on announcement state. - Refactored BaseLayout and ProjectLayout components to utilize new Tailwind variables for improved layout consistency. * Remove console log statements from AnnouncementItem component to clean up code and improve performance. * Update TopAnnouncementBar styles for improved layout consistency - Adjusted padding and margin in TopAnnouncementBar component for better alignment and spacing. - Enhanced the layout by modifying the class names to ensure a more visually appealing design. * Refactor AnnouncementIcon to simplify disabled state logic - Updated the disabled prop in AnnouncementIcon to directly check unreadCount, improving code clarity and reducing unnecessary parsing. * Enhance AnnouncementItem date formatting with localization support - Updated date formatting logic in AnnouncementItem to utilize the `t` function for localization, ensuring time strings are translatable. - Improved clarity of the TODO comment regarding future enhancements to the date formatting function. * ECHO-333 Add feature flag for conversation health (#199) * Add conversation health feature flag with optional monitoring Co-authored-by: sameer <sameer@dembrane.com> * refactor image classes * Update ParticipantBody.tsx --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Usama <59267656+ussaama@users.noreply.github.com> * Add current user filtering to latest announcements queries - Integrated current user data into the `useLatestAnnouncement` and `useInfiniteAnnouncements` hooks. - Implemented filtering for announcements based on the current user's ID to enhance relevance of displayed announcements. * Refactor announcement hooks import paths for consistency - Updated import paths for announcement-related hooks in multiple components to use relative paths instead of absolute paths. - This change enhances code organization and maintainability by standardizing the import structure across the announcement components. * Refactor date formatting in AnnouncementItem component - Moved the date formatting logic to a separate utility function in `utils/dateUtils` for better organization and reusability. - Removed the inline date formatting function and updated the component to import the new utility, enhancing code clarity and maintainability. * Enhance localization support in AnnouncementDrawerHeader component - Updated the AnnouncementDrawerHeader to use the `t` function for translating the unread announcements count, improving localization. - Added new translation entries for "Announcements", "unread announcement", and "unread announcements" in multiple language files, ensuring consistent user experience across different locales. * Add feature flag for announcements in Header component - Introduced a new feature flag `ENABLE_ANNOUNCEMENTS` in the config to control the display of announcements. - Updated the Header component to conditionally render the TopAnnouncementBar and related components based on the new feature flag, enhancing user experience and maintainability. * Remove unnecessary size prop from IconX in AnnouncementDrawerHeader component * Add border styling to announcement content - Updated the Announcements component to include a border-0 class for the content, enhancing the visual presentation and consistency of the announcement layout. * Update Announcements component to limit content width - Added a max-width style to the Announcements component to ensure better responsiveness and visual consistency across different screen sizes. * Add announcements and related metrics to dashboards and permissions - Introduced a new "Announcements" dashboard with associated panels for "Announcement Readers Graph", "Total Read Announcements", "Read By Users", and "Read Count Per User". - Updated permissions to include create, read, and update actions for the `announcement_activity` and `announcement` collections. - Enhanced GraphQL specifications to support new queries and mutations related to announcements and their translations. * Refactor date formatting utility and update AnnouncementItem component - Replaced the existing date formatting function with a new implementation using date-fns for improved localization support. - Introduced a custom hook `useFormatDate` to handle locale-specific date formatting. - Updated the AnnouncementItem component to utilize the new date formatting hook, enhancing code clarity and maintainability. * Refactor getTranslatedContent function to use specific types for announcements - Updated the getTranslatedContent function to replace 'any' type with specific types for better type safety and clarity. - Changed the parameter type for announcements from 'any' to 'Announcement' and for translations from 'any' to 'AnnouncementTranslations'. * Refactor announcement components for improved type safety and readability - Introduced a new variable `hasUnreadAnnouncements` in AnnouncementDrawerHeader for better clarity when checking unread announcements. - Updated type annotations in AnnouncementIcon and TopAnnouncementBar components to use specific types instead of 'any', enhancing type safety and code maintainability. * Update type annotation in AnnouncementIcon component for improved type safety - Changed the type of the activity parameter from 'any' to 'AnnouncementActivity' in the AnnouncementIcon component, enhancing type safety and code clarity. --------- Co-authored-by: Sameer Pashikanti <63326129+spashii@users.noreply.github.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com>
2 participants
Summary by CodeRabbit
New Features
Localization
Style
Chores