From 00d807495d5561252183ea175d24469d79bddb30 Mon Sep 17 00:00:00 2001
From: Brad Ullman <brad@ullman.com>
Date: Tue, 28 Mar 2023 01:31:03 -0700
Subject: [PATCH] update prompts to be tabbable (#241)

---
 components/Promptbar/Prompt.tsx | 57 +++++++++++++++------------------
 1 file changed, 25 insertions(+), 32 deletions(-)

diff --git a/components/Promptbar/Prompt.tsx b/components/Promptbar/Prompt.tsx
index 913d2ec..2bec35a 100644
--- a/components/Promptbar/Prompt.tsx
+++ b/components/Promptbar/Prompt.tsx
@@ -39,9 +39,9 @@ export const PromptComponent: FC<Props> = ({
   }, [isRenaming, isDeleting]);
 
   return (
-    <>
+    <div className="relative flex items-center">
       <button
-        className="text-sidebar flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[14px] transition-colors duration-200 hover:bg-[#343541]/90"
+        className="flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90"
         draggable="true"
         onClick={(e) => {
           e.stopPropagation();
@@ -54,27 +54,17 @@ export const PromptComponent: FC<Props> = ({
           setRenameValue('');
         }}
       >
-        <IconBulbFilled size={16} />
+        <IconBulbFilled size={18} />
 
-        {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)}
-            autoFocus
-          />
-        ) : (
-          <div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
-            {prompt.name}
-          </div>
-        )}
+        <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
+          {prompt.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();
 
@@ -84,32 +74,35 @@ export const PromptComponent: FC<Props> = ({
 
                 setIsDeleting(false);
               }}
-            />
+            >
+              <IconCheck size={18} />
+            </button>
 
-            <IconX
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(false);
               }}
-            />
+            >
+              <IconX size={18} />
+            </button>
           </div>
         )}
 
         {!isDeleting && !isRenaming && (
-          <div className="-ml-2 flex gap-1">
-            <IconTrash
-              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();
                 setIsDeleting(true);
               }}
-            />
+            >
+              <IconTrash size={18} />
+            </button>
           </div>
         )}
-      </button>
 
       {showModal && (
         <PromptModal
@@ -118,6 +111,6 @@ export const PromptComponent: FC<Props> = ({
           onUpdatePrompt={onUpdatePrompt}
         />
       )}
-    </>
+    </div>
   );
 };