feat: replace edit label prompt with modal

* replace edit label prompt with modal

---------

Co-authored-by: Pete Johanson <[email protected]>

Author: gnoulk

src/keyboard/LayerPicker.tsx

@@ -1,5 +1,5 @@
 import { PencilIcon } from "@heroicons/react/24/solid";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   DropIndicator,
   Label,
@@ -8,6 +8,7 @@ import {
   Selection,
   useDragAndDrop,
 } from "react-aria-components";
+import { useModalRef } from "../misc/useModalRef";
 
 interface Layer {
   id: number;
@@ -30,10 +31,76 @@ interface LayerPickerProps {
   onLayerNameChanged?: (
     id: number,
     oldName: string,
-    newName: string
+    newName: string,
   ) => void | Promise<void>;
 }
 
+interface EditLabelData {
+  id: number;
+  name: string;
+}
+
+const EditLabelModal = ({
+  open,
+  onClose,
+  editLabelData,
+  handleSaveNewLabel,
+}: {
+  open: boolean;
+  onClose: () => void;
+  editLabelData: EditLabelData;
+  handleSaveNewLabel: (
+    id: number,
+    oldName: string,
+    newName: string | null,
+  ) => void;
+}) => {
+  const ref = useModalRef(open);
+  const [newLabelName, setNewLabelName] = useState(editLabelData.name);
+
+  const handleSave = () => {
+    handleSaveNewLabel(editLabelData.id, editLabelData.name, newLabelName);
+    onClose();
+  };
+
+  return (
+    <dialog
+      ref={ref}
+      onClose={onClose}
+      className="p-5 rounded-lg border-text-base border min-w-min w-[30vw] flex flex-col"
+    >
+      <span className="mb-3 text-lg">New Layer Name</span>
+      <input
+        className="p-1 border rounded border-text-base border-solid"
+        type="text"
+        defaultValue={editLabelData.name}
+        autoFocus
+        onChange={(e) => setNewLabelName(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleSave();
+          }
+        }}
+      />
+      <div className="mt-4 flex justify-end">
+        <button className="py-1.5 px-2" type="button" onClick={onClose}>
+          Cancel
+        </button>
+        <button
+          className="py-1.5 px-2 ml-4 rounded-md bg-gray-100 text-black hover:bg-gray-300"
+          type="button"
+          onClick={() => {
+            handleSave();
+          }}
+        >
+          Save
+        </button>
+      </div>
+    </dialog>
+  );
+};
+
 export const LayerPicker = ({
   layers,
   selectedLayerIndex,
@@ -46,14 +113,18 @@ export const LayerPicker = ({
   onLayerNameChanged,
   ...props
 }: LayerPickerProps) => {
+  const [editLabelData, setEditLabelData] = useState<EditLabelData | null>(
+    null,
+  );
+
   const layer_items = useMemo(() => {
     return layers.map((l, i) => ({
       name: l.name || i.toLocaleString(),
       id: l.id,
       index: i,
       selected: i === selectedLayerIndex,
     }));
-  }, [layers]);
+  }, [layers, selectedLayerIndex]);
 
   const selectionChanged = useCallback(
     (s: Selection) => {
@@ -63,7 +134,7 @@ export const LayerPicker = ({
 
       onLayerClicked?.(layer_items.findIndex((l) => s.has(l.id)));
     },
-    [onLayerClicked, layer_items]
+    [onLayerClicked, layer_items],
   );
 
   let { dragAndDropHooks } = useDragAndDrop({
@@ -84,15 +155,13 @@ export const LayerPicker = ({
     },
   });
 
-  let onEditClicked = useCallback(
-    (id: number, name: string) => {
-      let newName = window.prompt("Label");
-
+  const handleSaveNewLabel = useCallback(
+    (id: number, oldName: string, newName: string | null) => {
       if (newName !== null) {
-        onLayerNameChanged?.(id, name, newName);
+        onLayerNameChanged?.(id, oldName, newName);
       }
     },
-    [onLayerNameChanged]
+    [onLayerNameChanged],
   );
 
   return (
@@ -120,6 +189,14 @@ export const LayerPicker = ({
           </button>
         )}
       </div>
+      {editLabelData !== null && (
+        <EditLabelModal
+          open={editLabelData !== null}
+          onClose={() => setEditLabelData(null)}
+          editLabelData={editLabelData}
+          handleSaveNewLabel={handleSaveNewLabel}
+        />
+      )}
       <ListBox
         aria-label="Keymap Layer"
         selectionMode="single"
@@ -138,8 +215,10 @@ export const LayerPicker = ({
           >
             <span>{layer_item.name}</span>
             <PencilIcon
-              className="h-4 w-4 mx-1 invisible group-hover:visible"
-              onClick={() => onEditClicked(layer_item.id, layer_item.name)}
+              className="h-4 w-4 mx-1 invisible group-hover:visible hover:text-accent"
+              onClick={() =>
+                setEditLabelData({ id: layer_item.id, name: layer_item.name })
+              }
             />
           </ListBoxItem>
         )}