Add keyboard navigation to the edit experience

[nazmulidris]

Currently, in order to edit shortlinks, the user has to use a mouse. It would be great to have a way to use keyboard shortcuts to navigate the entire editing experience.

This could look like:

• The user types a keyboard shortcut to activate edit mode
• Then they can press up / down to move focus between the shortlink that is selected
• Maybe they press Enter and that triggers the edit button, or they press Delete and that triggers the delete button
• As a bonus, if there was a way to search / filter the shortlinks in edit mode, that would be great too!

[shlok-2003]

Hey @nazmulidris, I would like to work on this issue, Can you please assign it to me :)

[nazmulidris]

Hi 👋🏽 @shlok-2003 , this issue is all yours 👍🏽 . Please take a look at our contributor guide. And we have a discord server if you would like to chat about the issue or PR.

Also, please associate your PR and issue using this technique: https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue

[nazmulidris]

@shlok-2003 Hi 👋🏽 If you don't have time to work on this issue, please let me know and I can assign it to someone else. Thank you for spending your time contributing.

[postmeback]

Hi @nazmulidris, Can you tell me how to run this project locally?

[nazmulidris]

@postmeback The instructions are in the README
https://github.com/r3bl-org/shortlink?tab=readme-ov-file#setup

npm install
npm run build
npm run watch

You will find a dist folder on your disk. You can tell Chrome to load an extension from this folder. Here's more info on that: https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world