feat: #comment cleaned up extra components

src/App.tsx

@@ -8,7 +8,7 @@ import { useAudioDeviceStore } from "./hooks/useAudioDeviceStore";
 import DeviceNode from "./components/DeviceNode";
 import ConnectionLine from "./components/ConnectionLine";
 import DarkModeToggle from "./components/DarkModeToggle";
-import DeviceCustomizationForm from "./components/DeviceCustomizationForm";
+import AddDeviceForm from "./components/AddDeviceForm";
 import { Device, Connection } from "./types/devices";
 import { DOT_SIZE, GRID_SIZE } from "./constants/grid";
 import EditDeviceForm from "./components/EditDeviceForm";
@@ -157,7 +157,7 @@ function AudioDeviceArrangerApp() {
           <h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
             Add Device
           </h2>
-          <DeviceCustomizationForm onAddDevice={handleAddCustomDevice} />
+          <AddDeviceForm onAddDevice={handleAddCustomDevice} />
         </div>
 
         <Dialog.Portal>

src/components/DeviceCustomizationForm.tsx → src/components/AddDeviceForm.tsx

@@ -2,13 +2,11 @@ import React, { useState } from "react";
 import { Device, Port } from "../types/devices";
 import * as Form from "@radix-ui/react-form";
 
-interface DeviceCustomizationFormProps {
+interface AddDeviceFormProps {
   onAddDevice: (device: Omit<Device, "id">) => void;
 }
 
-const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = ({
-  onAddDevice,
-}) => {
+const AddDeviceForm: React.FC<AddDeviceFormProps> = ({ onAddDevice }) => {
   const [name, setName] = useState("");
   const [type, setType] = useState("synthesizer");
   const [gridSize, setGridSize] = useState(100);
@@ -150,4 +148,4 @@ const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = ({
   );
 };
 
-export default DeviceCustomizationForm;
+export default AddDeviceForm;