Sync button component

[magush27]

Created a new SyncButton component to the CommunicatorToolbar, providing improved visibility and control over board synchronization status. The changes also refactor how sync state is managed and displayed, replacing the previous spinner in the edit toolbar with a more informative sync button. Additionally, the sync status logic is enhanced to support multiple states and better offline handling.

Sync functionality enhancements:

• Added the new SyncButton component to CommunicatorToolbar, which visually communicates sync states (e.g., syncing, synced, pending, offline) and allows users to trigger sync actions.
• Introduced supporting files for SyncButton, including Redux container, constants, messages, and CSS for styling and internationalization.

Sync status logic improvements:

• Updated Board.constants.js to add a new SYNCING status, allowing for more granular sync state tracking.
• Refactored CommunicatorToolbar props and Redux mapping to support new sync-related properties, including isLoggedIn and improved state selection.

UI and code cleanup:

• Removed the old spinner from EditToolbar.component.js and unnecessary imports, as sync status is now handled by the new SyncButton.
• Cleaned up unused props in CommunicatorToolbar.component.js for clarity and maintainability.
• Imported colors from MUI that are not in the theme but are needed for the current sync displays.

[RodriSanchez1]

Great progress on the SyncButton! After reviewing the display state logic, I found a couple of issues we should address:

1. "Working Offline" disappears on reconnect
   When the user goes offline and makes changes, they see the "Working Offline" indicator. But as soon as the connection is reestablished, this state vanishes and falls through to the generic sync icon — the user has no idea they still have unsynced local changes. The "local changes pending" indicator should persist until the changes are actually synced to the cloud.

2. PENDING state is indistinguishable from the default SYNC state
   When the user is online and has pending (unsynced) boards, getDisplayState() returns the sync status PENDING but visually it renders the same generic sync icon as the idle SYNC state. There's no visual distinction telling the user "you have local changes that need syncing." The DISPLAY_PENDING constant is defined in SyncButton.constants.js and even has a case in getAriaLabel(), but getDisplayState() never actually returns it — looks like this was intended but not fully wired up.

Suggestion: These two issues share the same root cause. We need a distinct "unsynced changes" visual state (different icon, color, or label) that works both offline and after reconnecting, and only clears once the sync actually completes successfully.

Let me know if you have any doubt

[magush27]

Great progress on the SyncButton! After reviewing the display state logic, I found a couple of issues we should address:

1. "Working Offline" disappears on reconnect
   When the user goes offline and makes changes, they see the "Working Offline" indicator. But as soon as the connection is reestablished, this state vanishes and falls through to the generic sync icon — the user has no idea they still have unsynced local changes. The "local changes pending" indicator should persist until the changes are actually synced to the cloud.

2. PENDING state is indistinguishable from the default SYNC state
   When the user is online and has pending (unsynced) boards, getDisplayState() returns the sync status PENDING but visually it renders the same generic sync icon as the idle SYNC state. There's no visual distinction telling the user "you have local changes that need syncing." The DISPLAY_PENDING constant is defined in SyncButton.constants.js and even has a case in getAriaLabel(), but getDisplayState() never actually returns it — looks like this was intended but not fully wired up.

Suggestion: These two issues share the same root cause. We need a distinct "unsynced changes" visual state (different icon, color, or label) that works both offline and after reconnecting, and only clears once the sync actually completes successfully.

Let me know if you have any doubt

I'm thinking that maybe we can put an icon like this one without the text to show the pending unsynced changes when being online again:

What do you think @RodriSanchez1 ?

[RodriSanchez1]

Yes it can be that one! It should be showed always that the user have local changes. No matters if is online or not

[magush27]

Yes it can be that one! It should be showed always that the user have local changes. No matters if is online or not

The thing is that if the user is offline and has local changes it shows the working offline icon. If it's only offline it shows the offline icon. So we should replace the working offline icon with this one? I thought this one was only for when you have pending changes and are online

[RodriSanchez1]

Yes! I think that we should replace it! Copy the google docs funtionality behaviour