From c46f15cdc102de4cf06e35f3116b05fc2364a6a6 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:12:35 -0500
Subject: [PATCH] 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
---
 .../src/app/json-editor/_components/Note.tsx  | 95 +++++++++++--------
 frontend/src/styles/globals.css               | 54 -----------
 2 files changed, 54 insertions(+), 95 deletions(-)

diff --git a/frontend/src/app/json-editor/_components/Note.tsx b/frontend/src/app/json-editor/_components/Note.tsx
index 08d9b80bc..3242b5141 100644
--- a/frontend/src/app/json-editor/_components/Note.tsx
+++ b/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,46 +66,51 @@ function Note({
     });
   }, [script, setScript]);
 
-  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)}
-      />
-      <Select
-        value={note.type}
-        onValueChange={(value) => updateNote(index, "type", value)}
-      >
-        <SelectTrigger className="flex-1">
-          <SelectValue placeholder="Type" />
-        </SelectTrigger>
-        <SelectContent>
-          {Object.keys(AlertColors).map((type) => (
-            <SelectItem key={type} value={type}>
-              <span className="flex items-center gap-2">
-                {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
-                <div
-                  className={cn(
-                    "size-4 rounded-full border",
-                    AlertColors[type as keyof typeof AlertColors],
-                  )}
-                />
-              </span>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Button
-        size="sm"
-        variant="destructive"
-        type="button"
-        onClick={() => removeNote(index)}
-      >
-        <Trash2 className="mr-2 h-4 w-4" /> Remove Note
-      </Button>
-    </div>
-  ));
+  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}
+          onValueChange={(value) => updateNote(index, "type", value)}
+        >
+          <SelectTrigger className="flex-1">
+            <SelectValue placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.keys(AlertColors).map((type) => (
+              <SelectItem key={type} value={type}>
+                <span className="flex items-center gap-2">
+                  {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
+                  <div
+                    className={cn(
+                      "size-4 rounded-full border",
+                      AlertColors[type as keyof typeof AlertColors],
+                    )}
+                  />
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          size="sm"
+          variant="destructive"
+          type="button"
+          onClick={() => removeNote(index)}
+        >
+          <Trash2 className="mr-2 h-4 w-4" /> Remove Note
+        </Button>
+      </div>
+    ),
+  );
 
   NoteItem.displayName = 'NoteItem';
 
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index cf20db2e5..d9b891932 100644
--- a/frontend/src/styles/globals.css
+++ b/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 {