From a3eb247c3fe5aa260af224e9d6172e89da8bf1c5 Mon Sep 17 00:00:00 2001
From: Brad Ullman <brad@ullman.com>
Date: Tue, 28 Mar 2023 01:29:56 -0700
Subject: [PATCH] convert folders to buttons & folder icons to buttons
 (accessibility)  (#237)

* tabbable folders

* fix spacing
---
 components/Chatbar/Conversation.tsx         |   4 +-
 components/Folders/Chat/ChatFolder.tsx      | 104 +++++++++++---------
 components/Folders/Chat/ChatFolders.tsx     |   2 +-
 components/Folders/Prompt/PromptFolder.tsx  | 103 ++++++++++---------
 components/Folders/Prompt/PromptFolders.tsx |   2 +-
 5 files changed, 123 insertions(+), 92 deletions(-)

diff --git a/components/Chatbar/Conversation.tsx b/components/Chatbar/Conversation.tsx
index 50ece56..262b0bd9 100644
--- a/components/Chatbar/Conversation.tsx
+++ b/components/Chatbar/Conversation.tsx
@@ -104,7 +104,7 @@ export const ConversationComponent: FC<Props> = ({
 
       {(isDeleting || isRenaming) &&
         selectedConversation.id === conversation.id && (
-          <div className="visible absolute right-1 z-10 flex text-gray-300">
+          <div className="absolute right-1 z-10 flex text-gray-300">
             <button
               className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
@@ -136,7 +136,7 @@ export const ConversationComponent: FC<Props> = ({
       {selectedConversation.id === conversation.id &&
         !isDeleting &&
         !isRenaming && (
-          <div className="visible absolute right-1 z-10 flex text-gray-300">
+          <div className="absolute right-1 z-10 flex text-gray-300">
             <button
               className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
diff --git a/components/Folders/Chat/ChatFolder.tsx b/components/Folders/Chat/ChatFolder.tsx
index 938cace..5f74598 100644
--- a/components/Folders/Chat/ChatFolder.tsx
+++ b/components/Folders/Chat/ChatFolder.tsx
@@ -100,37 +100,50 @@ export const ChatFolder: FC<Props> = ({
   }, [searchTerm]);
 
   return (
-    <div>
-      <div
-        className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-[14px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90`}
-        onClick={() => setIsOpen(!isOpen)}
-        onDrop={(e) => handleDrop(e, currentFolder)}
-        onDragOver={allowDrop}
-        onDragEnter={highlightDrop}
-        onDragLeave={removeHighlight}
-      >
-        {isOpen ? <IconCaretDown size={16} /> : <IconCaretRight size={16} />}
-
+    <>
+      <div className="relative flex items-center">
         {isRenaming ? (
-          <input
-            className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
-            type="text"
-            value={renameValue}
-            onChange={(e) => setRenameValue(e.target.value)}
-            onKeyDown={handleEnterDown}
-            autoFocus
-          />
-        ) : (
-          <div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
-            {currentFolder.name}
+          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+            {isOpen ? (
+              <IconCaretDown size={18} />
+            ) : (
+              <IconCaretRight size={18} />
+            )}
+
+            <input
+              className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
+              type="text"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onKeyDown={handleEnterDown}
+              autoFocus
+            />
           </div>
+        ) : (
+          <button
+            className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
+            onClick={() => setIsOpen(!isOpen)}
+            onDrop={(e) => handleDrop(e, currentFolder)}
+            onDragOver={allowDrop}
+            onDragEnter={highlightDrop}
+            onDragLeave={removeHighlight}
+          >
+            {isOpen ? (
+              <IconCaretDown size={18} />
+            ) : (
+              <IconCaretRight size={18} />
+            )}
+
+            <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
+              {currentFolder.name}
+            </div>
+          </button>
         )}
 
         {(isDeleting || isRenaming) && (
-          <div className="-ml-2 flex gap-1">
-            <IconCheck
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
 
@@ -143,40 +156,43 @@ export const ChatFolder: FC<Props> = ({
                 setIsDeleting(false);
                 setIsRenaming(false);
               }}
-            />
-
-            <IconX
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+            >
+              <IconCheck size={18} />
+            </button>
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(false);
                 setIsRenaming(false);
               }}
-            />
+            >
+              <IconX size={18} />
+            </button>
           </div>
         )}
 
         {!isDeleting && !isRenaming && (
-          <div className="ml-2 flex gap-1">
-            <IconPencil
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={18}
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsRenaming(true);
                 setRenameValue(currentFolder.name);
               }}
-            />
-
-            <IconTrash
-              className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={18}
+            >
+              <IconPencil size={18} />
+            </button>
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(true);
               }}
-            />
+            >
+              <IconTrash size={18} />
+            </button>
           </div>
         )}
       </div>
@@ -185,7 +201,7 @@ export const ChatFolder: FC<Props> = ({
         ? conversations.map((conversation, index) => {
             if (conversation.folderId === currentFolder.id) {
               return (
-                <div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
+                <div key={index} className="ml-5 gap-2 border-l pl-2">
                   <ConversationComponent
                     selectedConversation={selectedConversation}
                     conversation={conversation}
@@ -199,6 +215,6 @@ export const ChatFolder: FC<Props> = ({
             }
           })
         : null}
-    </div>
+    </>
   );
 };
diff --git a/components/Folders/Chat/ChatFolders.tsx b/components/Folders/Chat/ChatFolders.tsx
index 694813e..12b9ce4 100644
--- a/components/Folders/Chat/ChatFolders.tsx
+++ b/components/Folders/Chat/ChatFolders.tsx
@@ -35,7 +35,7 @@ export const ChatFolders: FC<Props> = ({
   onUpdateConversation,
 }) => {
   return (
-    <div className="flex w-full flex-col gap-1 pt-2">
+    <div className="flex w-full flex-col pt-2">
       {folders.map((folder, index) => (
         <ChatFolder
           key={index}
diff --git a/components/Folders/Prompt/PromptFolder.tsx b/components/Folders/Prompt/PromptFolder.tsx
index eb662b1..08bd6de 100644
--- a/components/Folders/Prompt/PromptFolder.tsx
+++ b/components/Folders/Prompt/PromptFolder.tsx
@@ -96,37 +96,49 @@ export const PromptFolder: FC<Props> = ({
   }, [searchTerm]);
 
   return (
-    <div>
-      <div
-        className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-[14px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90`}
-        onClick={() => setIsOpen(!isOpen)}
-        onDrop={(e) => handleDrop(e, currentFolder)}
-        onDragOver={allowDrop}
-        onDragEnter={highlightDrop}
-        onDragLeave={removeHighlight}
-      >
-        {isOpen ? <IconCaretDown size={16} /> : <IconCaretRight size={16} />}
-
+    <>
+      <div className="relative flex items-center">
         {isRenaming ? (
-          <input
-            className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
-            type="text"
-            value={renameValue}
-            onChange={(e) => setRenameValue(e.target.value)}
-            onKeyDown={handleEnterDown}
-            autoFocus
-          />
-        ) : (
-          <div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
-            {currentFolder.name}
+          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+            {isOpen ? (
+              <IconCaretDown size={18} />
+            ) : (
+              <IconCaretRight size={18} />
+            )}
+            <input
+              className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"
+              type="text"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onKeyDown={handleEnterDown}
+              autoFocus
+            />
           </div>
+        ) : (
+          <button
+            className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
+            onClick={() => setIsOpen(!isOpen)}
+            onDrop={(e) => handleDrop(e, currentFolder)}
+            onDragOver={allowDrop}
+            onDragEnter={highlightDrop}
+            onDragLeave={removeHighlight}
+          >
+            {isOpen ? (
+              <IconCaretDown size={18} />
+            ) : (
+              <IconCaretRight size={18} />
+            )}
+
+            <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
+              {currentFolder.name}
+            </div>
+          </button>
         )}
 
         {(isDeleting || isRenaming) && (
-          <div className="-ml-2 flex gap-1">
-            <IconCheck
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
 
@@ -139,40 +151,43 @@ export const PromptFolder: FC<Props> = ({
                 setIsDeleting(false);
                 setIsRenaming(false);
               }}
-            />
-
-            <IconX
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+            >
+              <IconCheck size={18} />
+            </button>
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(false);
                 setIsRenaming(false);
               }}
-            />
+            >
+              <IconX size={18} />
+            </button>
           </div>
         )}
 
         {!isDeleting && !isRenaming && (
-          <div className="ml-2 flex gap-1">
-            <IconPencil
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={18}
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsRenaming(true);
                 setRenameValue(currentFolder.name);
               }}
-            />
-
-            <IconTrash
-              className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={18}
+            >
+              <IconPencil size={18} />
+            </button>
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(true);
               }}
-            />
+            >
+              <IconTrash size={18} />
+            </button>
           </div>
         )}
       </div>
@@ -181,7 +196,7 @@ export const PromptFolder: FC<Props> = ({
         ? prompts.map((prompt, index) => {
             if (prompt.folderId === currentFolder.id) {
               return (
-                <div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
+                <div key={index} className="ml-5 gap-2 border-l pl-2">
                   <PromptComponent
                     prompt={prompt}
                     onDeletePrompt={onDeletePrompt}
@@ -192,6 +207,6 @@ export const PromptFolder: FC<Props> = ({
             }
           })
         : null}
-    </div>
+    </>
   );
 };
diff --git a/components/Folders/Prompt/PromptFolders.tsx b/components/Folders/Prompt/PromptFolders.tsx
index a7a06df..e80fefd 100644
--- a/components/Folders/Prompt/PromptFolders.tsx
+++ b/components/Folders/Prompt/PromptFolders.tsx
@@ -25,7 +25,7 @@ export const PromptFolders: FC<Props> = ({
   onUpdatePrompt,
 }) => {
   return (
-    <div className="flex w-full flex-col gap-1 pt-2">
+    <div className="flex w-full flex-col pt-2">
       {folders.map((folder, index) => (
         <PromptFolder
           key={index}