fix: note component in json-editor getting out of focus when typing and revert theme switch animation (#706)

* fix: note component in json-editor getting out of focus when typing. fixes JSON-Generator Notes Field #687

* revert: theme transition

frontend/src/app/json-editor/_components/Note.tsx

@@ -12,7 +12,7 @@ import { cn } from "@/lib/utils";
 import { PlusCircle, Trash2 } from "lucide-react";
 import { z } from "zod";
 import { ScriptSchema, type Script } from "../_schemas/schemas";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useRef } from "react";
 
 type NoteProps = {
   script: Script;
@@ -27,6 +27,8 @@ function Note({
   setIsValid,
   setZodErrors,
 }: NoteProps) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
   const addNote = useCallback(() => {
     setScript({
       ...script,
@@ -49,6 +51,12 @@ function Note({
     setIsValid(result.success);
     setZodErrors(result.success ? null : result.error);
     setScript(updated);
+    // Restore focus after state update
+    if (key === "text") {
+      setTimeout(() => {
+        inputRefs.current[index]?.focus();
+      }, 0);
+    }
   }, [script, setScript, setIsValid, setZodErrors]);
 
   const removeNote = useCallback((index: number) => {
@@ -58,12 +66,16 @@ function Note({
     });
   }, [script, setScript]);
 
-  const NoteItem = memo(({ note, index }: { note: Script["notes"][number], index: number }) => (
+  const NoteItem = memo(
+    ({ note, index }: { note: Script["notes"][number]; index: number }) => (
       <div className="space-y-2 border p-4 rounded">
         <Input
           placeholder="Note Text"
           value={note.text}
           onChange={(e) => updateNote(index, "text", e.target.value)}
+          ref={(el) => {
+            inputRefs.current[index] = el;
+          }}
         />
         <Select
           value={note.type}
@@ -97,7 +109,8 @@ function Note({
           <Trash2 className="mr-2 h-4 w-4" /> Remove Note
         </Button>
       </div>
-  ));
+    ),
+  );
 
   NoteItem.displayName = 'NoteItem';
 

frontend/src/styles/globals.css

@@ -30,24 +30,6 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --expo-out: linear(
-      0 0%,
-      0.1684 2.66%,
-      0.3165 5.49%,
-      0.446 8.52%,
-      0.5581 11.78%,
-      0.6535 15.29%,
-      0.7341 19.11%,
-      0.8011 23.3%,
-      0.8557 27.93%,
-      0.8962 32.68%,
-      0.9283 38.01%,
-      0.9529 44.08%,
-      0.9711 51.14%,
-      0.9833 59.06%,
-      0.9915 68.74%,
-      1 100%
-    );
   }
 
   ::selection {
@@ -81,42 +63,6 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-
-  ::view-transition-group(root) {
-    animation-duration: 0.7bun s;
-    animation-timing-function: var(--expo-out);
-  }
-
-  ::view-transition-new(root) {
-    animation-name: reveal-light;
-  }
-
-  ::view-transition-old(root),
-  .dark::view-transition-old(root) {
-    animation: none;
-    z-index: -1;
-  }
-  .dark::view-transition-new(root) {
-    animation-name: reveal-dark;
-  }
-
-  @keyframes reveal-dark {
-    from {
-      clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
-    }
-    to {
-      clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
-    }
-  }
-
-  @keyframes reveal-light {
-    from {
-      clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
-    }
-    to {
-      clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
-    }
-  }
 }
 
 @layer base {