feat: Add clear button to search bar (#328)

* feat: Add clear button to search bar

This commit introduces a clear button to the SearchBar component using the X icon from Lucide-React. When the user enters a query in the input field, the clear button appears allowing them to easily remove the search term. The clear button is hidden when there is no search term entered.

* Refactor SearchBar component to improve user experience

Changed SearchBar's input field to add padding on the left side and an absolute positioned search icon. Also, added absolute positioned X icon on the right side when there is an input value, ensuring a better user experience.

* Refactor SearchBar component to show Clear Search icon dynamically

This commit makes changes to the SearchBar React component to render the Clear Search X icon only when the input field has a value. A showClearIcon state using useState hook is added and updated every time the input value changes. The useEffect hook is used to handle the case when the user clears the input value. This allows better UX by providing clear intent to the user that the icon is clickable and will clear the search query.

* Improve UX: Add styling to clear button & export button

This commit modifies the NavLinks component to improve user experience by removing a rounded styling to the "Clear conversations" and "Export conversations" buttons. Prior to this change, the buttons had a rounded styling.

* Refactor submit button styling for improved accessibility and readability.

Changed submit button styling for better accessibility and readability, including adjustments to padding and hover effects. The new styles ensure that the button is easily clickable for all users, while also improving its visual appearance.

* hotfix

* Improve UI styling in Conversation component

Changed the background color and hover effect of the conversation link in Conversation component to make it more visually appealing. The previous background color was '#2A2B32' and now it's 'gray-800'. The 'px-4' class has also been changed to 'hover:pr-4' for better readability.

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>

client/src/components/Conversations/Conversation.jsx

@@ -86,7 +86,7 @@ export default function Conversation({ conversation, retainView }) {
 
   if (currentConversation?.conversationId !== conversationId) {
     aProps.className =
-      'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-[#2A2B32] hover:pr-4';
+      'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-800 hover:pr-4';
   }
 
   return (

client/src/components/Input/SubmitButton.jsx

@@ -88,7 +88,7 @@ export default function SubmitButton({
         disabled={disabled}
         className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
       >
-        <div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+        <div className="m-1 mr-0 rounded-md pt-[11px] pb-[9px] pl-[9.5px] pr-[7px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
           <svg
             stroke="currentColor"
             fill="none"

client/src/components/Nav/NavLinks.jsx

@@ -77,7 +77,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                 <Menu.Item as="div">
                   <NavLink
                     className={cn(
-                      'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
+                      'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 rounded-none',
                       exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-gray-400'
                     )}
                     svg={() => <Download size={16} />}
@@ -91,7 +91,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                 </Menu.Item>
                 <Menu.Item as="div">
                   <NavLink
-                    className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                    className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 rounded-none"
                     svg={() => <TrashIcon />}
                     text="Clear conversations"
                     clickHandler={() => setShowClearConvos(true)}

client/src/components/Nav/SearchBar.jsx

@@ -1,11 +1,12 @@
-import { forwardRef } from 'react';
-import { Search } from 'lucide-react';
+import { forwardRef, useState, useEffect } from 'react';
+import { Search, X } from 'lucide-react';
 import { useRecoilState } from 'recoil';
 import store from '~/store';
 
 const SearchBar = forwardRef((props, ref) => {
   const { clearSearch } = props;
   const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
+  const [showClearIcon, setShowClearIcon] = useState(false);
 
   const handleKeyUp = (e) => {
     const { value } = e.target;
@@ -18,17 +19,27 @@ const SearchBar = forwardRef((props, ref) => {
   const onChange = (e) => {
     const { value } = e.target;
     setSearchQuery(value);
+    setShowClearIcon(value.length > 0);
   };
 
+  useEffect(() => {
+    if (searchQuery.length === 0) {
+      setShowClearIcon(false);
+    } else {
+      setShowClearIcon(true);
+    }
+  }, [searchQuery])
+  
+
   return (
     <div
       ref={ref}
-      className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+      className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700 relative"
     >
-      {<Search className="h-4 w-4" />}
+      {<Search className="h-4 w-4 absolute left-3" />}
       <input
         type="text"
-        className="m-0 mr-0 w-full border-none bg-transparent p-0 text-sm leading-tight outline-none"
+        className="m-0 mr-0 w-full border-none bg-transparent p-0 text-sm leading-tight outline-none pl-7"
         value={searchQuery}
         onChange={onChange}
         onKeyDown={(e) => {
@@ -37,8 +48,15 @@ const SearchBar = forwardRef((props, ref) => {
         placeholder="Search messages"
         onKeyUp={handleKeyUp}
       />
+      <X
+        className={`h-5 w-5 absolute right-3 cursor-pointer ${showClearIcon ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000`}
+        onClick={() => {
+          setSearchQuery('');
+          clearSearch();
+        }}
+      />
     </div>
   );
 });
 
-export default SearchBar;
+export default SearchBar;