feat(tasks): Add visual indicator for unsynced task modifications

[ShivaGupta-14]

Description

This PR implements visual indicators for unsynced task modifications. When a task is edited, completed, or deleted, the UI immediately marks it as "Unsynced" until the backend successfully synchronizes all pending changes.

• Closes: Visual Indicator for Modified / Unsynced Tasks on Frontend #143

Key Changes

• State Management: Implements a local state unsyncedTaskUuids to track tasks modified on the frontend but not yet synced to the backend.

• Visual Indicators:

  • Adds a red border to task rows for immediate feedback when a task is edited, completed, or deleted.
  • Displays the count of pending unsynced items on the Sync button via a notification-style badge.

• Optimistic UI Updates: Immediately updates UI for task status changes (completed/deleted) to enhance perceived performance.

• Sync Logic: Automatically clears all unsynced indicators once backend synchronization succeeds.

• Testing

  • Includes unit tests verifying:
    • Red border visibility
    • Sync button counter accuracy
    • Clearing state on successful sync
    • Used test.each for repetitive date editing tests, reducing code duplication.

Checklist

• Ran npx prettier --write . (for formatting)
• Ran gofmt -w . (for Go backend)
• Ran npm test (for JS/TS testing)
• Added unit tests, if applicable
• Verified all tests pass
• Updated documentation, if needed

Additional Notes

Video:

Screen.Recording.2025-12-27.at.12.00.03.AM.mov

[github-actions]

Thank you for opening this PR!

Before a maintainer takes a look, it would be really helpful if you could walk through your changes using GitHub's review tools.

Please take a moment to:

• Check the "Files changed" tab
• Leave comments on any lines for functions, comments, etc. that are important, non-obvious, or may need attention
• Clarify decisions you made or areas you might be unsure about and/or any future updates being considered.
• Finally, submit all the comments!

More information on how to conduct a self review:
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request

This helps make the review process smoother and gives us a clearer understanding of your thought process.

Once you've added your self-review, we'll continue from our side. Thank you!

[ShivaGupta-14]

shows animated unsynced badge when task has local changes pending sync. Added aria-labels for accessibility

[ShivaGupta-14]

added unsyncedTaskUuids state using sets, adds task UUID to set whenever any field is modified locally, clears all unsynced indicators after successful sync, passes isUnsynced prop to TaskDialog to display visual indicator and total count of unsync tasks on sync button

[ShivaGupta-14]

added tests for unsynced badge visibility based on isUnsynced prop

[ShivaGupta-14]

new test cases for unsync tasks

[ShivaGupta-14]

self review completed! open to any suggestions