added keyboard shortcut keys

[Neeraj-gagat]

Description

This PR introduces keyboard shortcut support and arrow-key navigation for the Tasks dashboard. It improves usability by allowing users to interact with tasks quickly using the keyboard.

###- Fixes: #153

1.Features Added

F ====> Focus search input
A ====> Open “Add New Task” dialog
R ====> Sync tasks
C ====> Mark selected task as completed
D ====> Mark selected task as deleted
E ====> Open the edit dialog for the selected task

Shortcuts automatically disable when:
User is typing in any input field
Reports view is open
A dialog is open

2. Arrow-Key Navigation (↑ / ↓)

Up/Down arrow keys move the selection through the currently visible task rows.
Selected row stays highlighted.
Auto-scroll keeps the selected row visible when navigating.

3. Safety Guards

Keyboard shortcuts do not fire while typing in text inputs.
Navigation keys stop working while dialogs are open.

4. Structural Improvements

Added unique element IDs for automation (task-row-{id}, mark-task-complete-{id}, etc.).
Introduced hotkey guard logic using useHotkeys as hook.
Used useref so the arrows keys only override browser arrow keys when task dashboad is in view

let me know if you need any more chnages or want to chnage hot keys

Note : right now only single keys like f,a,c,d,r can trigger these shortcuts we dont need to press cntrl or alt or shift with it. let me kow if you want me to change it to that

video after chnages
Screencast from 20-11-25 06:20:17 PM IST.webm

[its-me-abhishek]

Great Work @Neeraj-gagat! Could you also please add PC only icons for those keys, wherever they are intended to trigger anything (e.g. show Sync <S_key> to show pressing S will trigger that, can use Key.pics Icons

[Neeraj-gagat]

hey @its-me-abhishek can you suggest where should i add these {C ====> Mark selected task as completed, D ====> Mark selected task as deleted} two icons on task dashboard or should i directly add them on buttons for example == mark task as delete button.

[Neeraj-gagat]

hey @its-me-abhishek i have added keys for search bar ,sync button and add task button

images after changes

let me know if it is fine or do we need to change it . i am confused about where should i add mark task completed and mark task delete button. would appreciate your suggestion on that

[its-me-abhishek]

i am confused about where should i add mark task completed and mark task delete button. would appreciate your suggestion on that

It should work fine imo if you'd add C, D keys next to the complete and delete tasks buttons inside the Task Dialog

[Neeraj-gagat]

added Keys c,d with buttons

[Neeraj-gagat]

hey @its-me-abhishek i have made the changes you asked for can you review it now