Fix UI/UX Page [Chats] [React Component] (#125)

[+] fix(chat.tsx): fix togglePinApp function to use useCallback hook and update setPinApp with previous state
[+] docs(chat.tsx): update comments for handleKeyPress and handleMouseClick functions

app/components/chat.tsx

@@ -701,7 +701,7 @@ function usePinApp() {
   const config = useAppConfig();
   const TauriShortcut = config.desktopShortcut;
 
-  const togglePinApp = async () => {
+  const togglePinApp = useCallback(async () => {
     if (!isApp) {
       return;
     }
@@ -715,17 +715,17 @@ function usePinApp() {
       sendDesktopNotification(Locale.Chat.Actions.PinAppContent.Pinned);
       showToast(Locale.Chat.Actions.PinAppContent.Pinned);
     }
-    setPinApp(!pinApp);
-  };
+    setPinApp((prevPinApp) => !prevPinApp);
+  }, [isApp, pinApp]);
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
       if (event.key === TauriShortcut) {
         togglePinApp();
       }
     };
-    //Usage : Mouse+5,Mouse+4,Mouse+1(Middle Click)
-    //You need copy paste (e.g., "Mouse+5" paste in settings) instead of typing manually in settings
+    // Usage : Mouse+5,Mouse+4,Mouse+1(Middle Click)
+    // You need to copy-paste (e.g., Mouse+5 paste in settings) instead of typing manually in settings
     const handleMouseClick = (event: MouseEvent) => {
       if (event.button === 1 || event.button === 4 || event.button === 5) {
         togglePinApp();