[fix] Refactors event forms to improve title field handling

Updates the `EventEditor` and `NewForm` components by moving the title input field to a consistent position within the forms.

The title field is now rendered after the type dropdown in the `NewForm`, enhancing user experience by maintaining a clear structure.

Redundant code for the type dropdown in `EventEditor` has been removed to streamline the component.

Author: Aloento

src/Components/Event/EventEditor.tsx

@@ -40,6 +40,21 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
       class="absolute"
       onScale-before-close={(e) => e.preventDefault()}
     >
+
+      <ScaleDropdownSelect
+        label="Type"
+        value={State.type}
+        disabled={!IsIncident(Event.Type)}
+        onScale-change={(e) => Actions.setType(e.target.value as EventType)}
+        invalid={!!Validation.type}
+        helperText={Validation.type}
+      >
+        {Object.values(EventType).slice(2, 5).map((type, i) =>
+          <ScaleDropdownSelectItem value={type} key={i}>
+            {type}
+          </ScaleDropdownSelectItem>)}
+      </ScaleDropdownSelect>
+
       <form
         className="flex flex-col gap-y-6"
         autoComplete="off"
@@ -57,20 +72,6 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           helperText={Validation.title}
         />
 
-        <ScaleDropdownSelect
-          label="Type"
-          value={State.type}
-          disabled={!IsIncident(Event.Type)}
-          onScale-change={(e) => Actions.setType(e.target.value as EventType)}
-          invalid={!!Validation.type}
-          helperText={Validation.type}
-        >
-          {Object.values(EventType).slice(2, 5).map((type, i) =>
-            <ScaleDropdownSelectItem value={type} key={i}>
-              {type}
-            </ScaleDropdownSelectItem>)}
-        </ScaleDropdownSelect>
-
         <ScaleDropdownSelect
           label="Status"
           value={State.status}

src/Components/New/NewForm.tsx

@@ -36,15 +36,6 @@ export function NewForm() {
         OnSubmit();
       }}
     >
-      <ScaleTextField
-        placeholder="Please give the title of event"
-        required
-        label="Title"
-        value={State.title}
-        onScale-input={(e) => Actions.setTitle(e.target.value as string)}
-        invalid={!!Validation.title}
-        helperText={Validation.title}
-      />
 
       <ScaleDropdownSelect
         label="Type"
@@ -59,6 +50,16 @@ export function NewForm() {
           </ScaleDropdownSelectItem>)}
       </ScaleDropdownSelect>
 
+      <ScaleTextField
+        placeholder="Please give the title of event"
+        required
+        label="Title"
+        value={State.title}
+        onScale-input={(e) => Actions.setTitle(e.target.value as string)}
+        invalid={!!Validation.title}
+        helperText={Validation.title}
+      />
+
       <ScaleTextarea
         placeholder="If there is any known information, please write it down here."
         resize="vertical"