:wrench: Make the squad name customizable

dev-front/src/mech/squad/Squad.tsx

@@ -28,6 +28,7 @@ function Squad({pickObservers} : {pickObservers: {[key: string] : MechObserver}}
 
     const placeHolder: Mech = {id: -1, name: 'Empty slot', kind: '_', health: 0};
     const [squadMechs, setSquadMechs] = useState([placeHolder, placeHolder, placeHolder]);
+    const [squadName, setSquadName] = useState('Custom squad');
 
     function putInFreeSlot(mech: Mech, squad: Mech[]): Mech[] {
         const freeSlotIndex = squad.findIndex(isEmptySlot);
@@ -54,13 +55,15 @@ function Squad({pickObservers} : {pickObservers: {[key: string] : MechObserver}}
 
     return (
         <article className='custom-squad'>
-            <h2>Custom squad</h2>
+            <h2>{squadName}</h2>
             <div className='mech-members'>
                 {squadMechs.map((m, index) => (
                     <Member key={index} mech={m} remover={() => removeFromSquad(index)}/>
                 ))}
             </div>
             <div className='squad-description'>
+                <label htmlFor='squad-name-field-id'>Squad name</label>
+                <input id='squad-name-field-id' defaultValue='Custom squad' value={squadName} onChange={change => setSquadName(change.target.value)}/>
                 <label htmlFor='squad-description-field-id'>Squad description</label>
                 <textarea id='squad-description-field-id' defaultValue='A powerful squad.'/>
             </div>