Add pin/unpin task feature

[Rustix69]

Description

This PR implements a Pin Task feature that allows users to pin important or frequently accessed tasks to keep them at the top of their task list.

• Fixes: Add “Pin task” to keep it at the top. #187

Changes Made

Frontend Changes:

• New Utility Functions (tasks-utils.ts):

  • getPinnedTasks() - Retrieves pinned task UUIDs from localStorage
  • savePinnedTasks() - Persists pinned tasks to localStorage
  • togglePinnedTask() - Toggles pin status for a task
  • isTaskPinned() - Checks if a task is pinned

• UI Enhancements (TaskDialog.tsx):

  • Added Pin/Unpin toggle button in the task dialog footer
  • Added amber-colored pin icon (📌) displayed to the right of the status badge for pinned tasks
  • Imported Pin and PinOff icons from lucide-react

• State Management (Tasks.tsx):

  • Added pinnedTasks state to track pinned tasks
  • Implemented handleTogglePin() handler for pin/unpin actions
  • Updated sorting logic with sortWithPinnedAndOverdueOnTop() to prioritize pinned tasks
  • Loads pinned tasks from localStorage on component mount

• Type Definitions (types.ts):

  • Extended EditTaskDialogProps interface with isPinned and onTogglePin properties

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

[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!

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]

Hi @Rustix69!

I noticed that one check is failing because TaskDialog.test.tsx is missing the new props(isPinned and onTogglePin) in defaultProps. You can also verify this in the failing check details.

To fix this:

1. Add the missing props to defaultProps in the test file
2. Run npm test locally to verify all tests pass

Let me know if you need any help!

[ShivaGupta-14]

Hi @Rustix69!

Thanks for working on this feature! Here are a few suggestions:

1. UX suggestion

Currently, to pin a task, the user has to open the task dialog and then pin it. For unpinning, clicking the pin icon opens the dialog again, then you unpin and close it. This adds a bit of friction to a frequent action.

It might be helpful to add a clickable pin icon directly in the task row (e.g., in a new column or next to Status), so users can pin/unpin in one click without opening the dialog. The dialog button can still remain as a secondary option.

2. Edge case

I noticed that when a task is completed or deleted, its UUID still remains in the pinned tasks localStorage. Since completed or deleted tasks probably don’t need to stay pinned, this could lead to stale data over time.

As an example, you could unpin the task when it’s completed or deleted, e.g. in handleMarkComplete and handleMarkDelete:

// Unpin task if it was pinned
if (pinnedTasks.has(taskuuid)) {
  togglePinnedTask(props.email, taskuuid);
  setPinnedTasks(getPinnedTasks(props.email));
}

@its-me-abhishek – What do you think about this UX improvement and the edge case? Are these the right changes, and should they be handled in this PR or in a follow-up?

[its-me-abhishek]

2. Edge case
   I noticed that when a task is completed or deleted, its UUID still remains in the pinned tasks localStorage. Since completed or deleted tasks probably don’t need to stay pinned, this could lead to stale data over time.
   As an example, ........

I disagree with this though. Keeping completed/deleted tasks pinned can be intentional (e.g., motivation), so automatically unpinning them isn’t necessarily desirable.

[ShivaGupta-14]

2. Edge case
   I noticed that when a task is completed or deleted, its UUID still remains in the pinned tasks localStorage. Since completed or deleted tasks probably don’t need to stay pinned, this could lead to stale data over time.
   As an example, ........

I disagree with this though. Keeping completed/deleted tasks pinned can be intentional (e.g., motivation), so automatically unpinning them isn’t necessarily desirable.

Thanks for the clarification, that makes sense. I hadn't considered aspects like motivation. Given that, I agree the current behavior is better left as is.

Regarding the UX suggestion (Point 1), do you think that is worth adding in this PR, or should we skip that as well?

[Rustix69]

@ShivaGupta-14 In regardign to the Point 1 i feel it will be great if we add a three dot where we will add teh mark as completed adn then the pinning thing ??? This will reduce the friction and improve teh UX

What your thoughts ?? @its-me-abhishek

[ShivaGupta-14]

@ShivaGupta-14 In regardign to the Point 1 i feel it will be great if we add a three dot where we will add teh mark as completed adn then the pinning thing ??? This will reduce the friction and improve teh UX

What your thoughts ?? @its-me-abhishek

@Rustix69 That’s a good idea! One thing to consider: there’s a bulk‑actions feature (for complete/delete) in another open PR (#225) that will handle marking tasks as complete or deleting them in an easier way. If we add complete/delete to the three‑dot menu too, users might be confused by multiple ways to do the same thing, which might not be ideal UX.

Maybe the three‑dot menu (or just a clickable icon) could be used only for Pin? That way each feature has one clear entry point.

What do you think, @Rustix69 and @its-me-abhishek?

[its-me-abhishek]

@Rustix69 most of these will go out of scope of the parent issue, will create new sub issues for these (if and when required). For now, please proceed with adding a pin icon directly on each task on the table.

One more fix you could preferable add is - increase the height of individual tasks on that table - specifically on MOBILE views by a little bit. So that we have 2 rows, which will be enough to accommodate the ID Description Project in one line, Tags, status and that Pin button in the next. Or however it feels good, and not Convoluted. As sliding to pin task on mobile will be really unpleasant