From 8f0ed233e9900463bdfd85b07c12b5ca5ed033d8 Mon Sep 17 00:00:00 2001
From: "Tindo N. Arsel" <devtnga@gmail.com>
Date: Tue, 4 Apr 2023 09:04:39 +0100
Subject: [PATCH] adjust new chat button display in chat folder (#199)

* adjust new chat button display in chat folder

* Display it at the top instead at the end.
This because chats are order by recently created.
UX issue when clicking to the button at the end,
and have to scroll at the top to see and edit newly created chat.

* Display the button when hovering the folder,
not just the group of chats in the folder.
This make the button to display when hover the folder,
even if there is not yet chats list in the folder.

* parent sibling hover

---------

Co-authored-by: Jing Hua <tohjinghua123@gmail.com>
---
 src/components/Menu/ChatFolder.tsx |  6 +++---
 src/components/Menu/NewChat.tsx    |  2 +-
 tailwind.config.cjs                | 13 ++++++++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 0178b20..365c83e 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -155,7 +155,7 @@ const ChatFolder = ({
         style={{ background: color || '' }}
         className={`${
           color ? '' : 'hover:bg-gray-850'
-        } transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer`}
+        } transition-colors flex py-3 pl-3 pr-1 items-center gap-3 relative rounded-md break-all cursor-pointer parent-sibling`}
         onClick={toggleExpanded}
         ref={folderRef}
         onMouseEnter={() => {
@@ -272,7 +272,8 @@ const ChatFolder = ({
           )}
         </div>
       </div>
-      <div className='group/folder ml-3 pl-1 border-l-2 border-gray-700 flex flex-col gap-1'>
+      <div className='ml-3 pl-1 border-l-2 border-gray-700 flex flex-col gap-1 parent'>
+        {isExpanded && <NewChat folder={folderId} />}
         {isExpanded &&
           folderChats.map((chat) => (
             <ChatHistory
@@ -281,7 +282,6 @@ const ChatFolder = ({
               key={`${chat.title}-${chat.index}`}
             />
           ))}
-        {isExpanded && <NewChat folder={folderId} />}
       </div>
     </div>
   );
diff --git a/src/components/Menu/NewChat.tsx b/src/components/Menu/NewChat.tsx
index b10b553..7144f5d 100644
--- a/src/components/Menu/NewChat.tsx
+++ b/src/components/Menu/NewChat.tsx
@@ -28,7 +28,7 @@ const NewChat = ({ folder }: { folder?: string }) => {
       title={folder ? String(t('newChat')) : ''}
     >
       {folder ? (
-        <div className='max-h-0 group-hover/folder:max-h-10 group-hover/folder:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
+        <div className='max-h-0 parent-sibling-hover:max-h-10 parent-sibling-hover:py-3 px-3 overflow-hidden transition-all duration-200 delay-500 text-sm flex gap-3 items-center text-gray-100'>
           <PlusIcon /> {t('newChat')}
         </div>
       ) : (
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 0cc6849..345d2dd 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,15 @@
 /** @type {import('tailwindcss').Config} */
+
+function parentSiblingHoverPlugin({ addVariant, e }) {
+  addVariant('parent-sibling-hover', ({ modifySelectors, separator }) => {
+    modifySelectors(({ className }) => {
+      return `.parent-sibling:hover ~ .parent .${e(
+        `parent-sibling-hover${separator}${className}`
+      )}`;
+    });
+  });
+}
+
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
@@ -52,6 +63,6 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), parentSiblingHoverPlugin],
   darkMode: 'class',
 };