Add keybinds feature

[romanroflan32152]

Thank you for contributing to subs! So that your Pull Request can be handled effectively, please populate the following fields (delete sections that are not applicable)

Category

Feature

Overview

This PR implements keyboard shortcuts for managing subscriptions in the app, enhancing the user experience by allowing users to quickly add, select, delete, and edit subscriptions using the keyboard. The following changes were made:

• Selected Index State: Introduced a selectedIndex state to keep track of the currently selected subscription.
• Keyboard Event Handling: Implemented a handleKeyDown function to manage keyboard events for arrow keys, Tab, Delete, Enter, Shift+Enter, and '+'.
• Event Listener Management: Added a useEffect hook to manage the addition and removal of the keyboard event listener.
• Visual Indication: Provided a visual cue for the selected subscription by applying a blue ring around the selected item.
• Function Modifications: Updated existing functions to operate with the selected subscription, including deletion, opening, and editing.
• Existence Check: Added a validation check to ensure the selected subscription exists before performing edit or open actions.
• Code Optimization: Created a selectedSubscription variable to improve code readability and reduce redundant access to subscriptions[selectedIndex].
• Fixed Shift + Enter Behavior: Adjusted the behavior so that the edit window opens and remains open when Shift + Enter is pressed on a selected subscription.
• Prevented '+' Entry: Used e.preventDefault() to stop the '+' symbol from being entered into the Service name field.
• Menu Interaction Handling: Prevented key bindings from executing when add and edit menus are open by checking the menu state in the handleKeyDown function.
• Prevent Page Refresh: Used e.preventDefault() in all key handlers to prevent the default browser actions that might refresh the page.
• Smooth Scrolling: Implemented a scrollToSubscription function that utilizes scrollIntoView to scroll smoothly to the currently selected subscription when the index changes.
• Additional Improvements:
  • Utilized useRef to manage subscription item DOM elements for smoother scrolling.
  • Optimized the handleEdit function with useCallback to minimize unnecessary re-renders.
  • Enhanced type safety and performance throughout the component.
• Clipboard Integration: Added a Ctrl + V shortcut that opens the add subscription menu and automatically pastes clipboard content into the relevant field (URL or Service name).
• Confirmation Dialog: Implemented a confirmation dialog for deletion, styled consistently with the add and edit menus.
• Improved Keyboard Navigation: Ensured keyboard bindings do not work when any menu is open, preventing accidental actions during dialog interactions.
• Visual Consistency: Maintained a consistent visual style across the delete confirmation dialog and other menus.
• Enhanced User Experience: Improved user feedback and confirmation for critical actions, streamlining the process of adding new subscriptions via clipboard integration.

Issue Number (if applicable)

Related issue: #11

Did you make the use of LLM/Code assistant?

Yes. I used the Claude Coder extension by Kodu in VSCode, and I found it to be very helpful and convenient, especially since it is integrated directly into the editor. The ability to modify and correct errors in previously submitted requests would be a valuable addition.

I have only basic skills in React.js, and working with it has always been challenging for me. However, with the help of this tool, I was able to quickly start working on and enhancing my code. Currently, I am working on my diploma project and plan to use this service for creating web and mobile interfaces, allowing me to focus on the core functionality.

Screenshot (if applicable)

[vercel[bot]]

Someone is attempting to deploy a commit to the ajnart's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
subs	❌ Failed (Inspect)			Oct 12, 2024 2:00pm

[ajnart]

Thanks a lot for the PR @romanroflan32152 , I will manually try it out a little later. I actually re-wrote the project from the ground on the dev branch if you'd like to re-implement your changes there.

I'm very glad you like the extension 😉 Feel free to send feedback about it on our discord