Merge branch 'main' into hosted

frontend/src/App.tsx

@@ -50,6 +50,7 @@ import FeedbackCallNote from "./components/user-feedback/FeedbackCallNote";
 import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
 import { useAppStore } from "./store/app-store";
 import GenerateFromText from "./components/generate-from-text/GenerateFromText";
+import KeyboardShortcutBadge from "./components/core/KeyboardShortcutBadge";
 
 const IS_OPENAI_DOWN = false;
 
@@ -77,6 +78,8 @@ function App({ navbarComponent }: Props) {
   const { getToken } = useAuth();
   const subscriberTier = useStore((state) => state.subscriberTier);
 
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
   const { disableInSelectAndEditMode } = useAppStore();
 
   // Settings
@@ -481,6 +484,13 @@ function App({ navbarComponent }: Props) {
     setAppState(AppState.CODE_READY);
   }
 
+  // When coding is complete, focus on the update instruction textarea
+  useEffect(() => {
+    if (appState === AppState.CODE_READY && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [appState]);
+
   return (
     <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@@ -590,8 +600,14 @@ function App({ navbarComponent }: Props) {
                 <div>
                   <div className="grid w-full gap-2">
                     <Textarea
+                      ref={textareaRef}
                       placeholder="Tell the AI what to change..."
                       onChange={(e) => setUpdateInstruction(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          doUpdate(updateInstruction);
+                        }
+                      }}
                       value={updateInstruction}
                     />
                     <div className="flex justify-between items-center gap-x-2">
@@ -608,7 +624,7 @@ function App({ navbarComponent }: Props) {
                       onClick={() => doUpdate(updateInstruction)}
                       className="dark:text-white dark:bg-gray-700 update-btn plausible-event-name=Edit update-btn"
                     >
-                      Update
+                      Update <KeyboardShortcutBadge letter="enter" />
                     </Button>
                   </div>
                   <div className="flex items-center justify-end gap-x-2 mt-2">

frontend/src/components/core/KeyboardShortcutBadge.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { BsArrowReturnLeft } from "react-icons/bs";
+
+interface KeyboardShortcutBadgeProps {
+  letter: string;
+}
+
+const KeyboardShortcutBadge: React.FC<KeyboardShortcutBadgeProps> = ({
+  letter,
+}) => {
+  const icon =
+    letter.toLowerCase() === "enter" || letter.toLowerCase() === "return" ? (
+      <BsArrowReturnLeft />
+    ) : (
+      letter.toUpperCase()
+    );
+
+  return (
+    <span className="font-mono text-xs ml-2 rounded bg-gray-700 dark:bg-gray-900 text-white py-[2px] px-2">
+      {icon}
+    </span>
+  );
+};
+
+export default KeyboardShortcutBadge;

frontend/src/components/select-and-edit/EditPopup.tsx

@@ -3,6 +3,7 @@ import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
 import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils";
 import { useAppStore } from "../../store/app-store";
+import KeyboardShortcutBadge from "../core/KeyboardShortcutBadge";
 
 interface EditPopupProps {
   event: MouseEvent | null;
@@ -118,7 +119,7 @@ const EditPopup: React.FC<EditPopupProps> = ({
 
   return (
     <div
-      className="absolute bg-white p-4 border border-gray-300 rounded shadow-lg w-60"
+      className="absolute bg-white dark:bg-gray-800 p-4 border border-gray-300 dark:border-gray-600 rounded shadow-lg w-60"
       style={{ top: popupPosition.y, left: popupPosition.x }}
     >
       <Textarea
@@ -126,6 +127,7 @@ const EditPopup: React.FC<EditPopupProps> = ({
         value={updateText}
         onChange={(e) => setUpdateText(e.target.value)}
         placeholder="Tell the AI what to change about this element..."
+        className="dark:bg-gray-700 dark:text-white"
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             e.preventDefault();
@@ -134,7 +136,12 @@ const EditPopup: React.FC<EditPopupProps> = ({
         }}
       />
       <div className="flex justify-end mt-2">
-        <Button onClick={() => onUpdate(updateText)}>Update</Button>
+        <Button
+          className="dark:bg-gray-700 dark:text-white"
+          onClick={() => onUpdate(updateText)}
+        >
+          Update <KeyboardShortcutBadge letter="enter" />
+        </Button>
       </div>
     </div>
   );