Render tags as "write" or "read"

Tags are now either "readTag" or "writeTag", with the former being a div with the tag value and the latter a text input with the value.

Minor class name change in LESS.

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -270,7 +270,7 @@
 			&:last-child { border-radius : 0 0.5em 0.5em 0; }
 		}
 
-		.badge {
+		.tag {
 			padding          : 0.3em;
 			margin           : 2px;
 			font-size        : 0.9em;

client/homebrew/editor/tagInput/tagInput.jsx

@@ -7,9 +7,15 @@ const TagInput = ({unique = true, values = [], ...props})=>{
 	const [temporaryValue, setTemporaryValue] = useState('');
 	const [valueContext, setValueContext] = useState(values.map((value)=>({ value: value, editing : false })));
 
-	const tagElement = (value)=>{
+	const readTag = (value)=>{
 		return (
-			<div className={`badge`}>{value}</div>
+			<div className={`tag`}>{value}</div>
+		)
+	}
+
+	const writeTag = (value)=>{
+		return (
+			<input type='text' value={value} />
 		)
 	}
 
@@ -17,13 +23,16 @@ const TagInput = ({unique = true, values = [], ...props})=>{
 		<div className='field'>
 
 			<label>{props.label}</label>
-			{Object.values(valueContext).map((context, i)=>{ return context.editing ? tagElement('editing') : tagElement(context.value) })}
+			<div className='list'>
 
-			<input type='text'
+				{Object.values(valueContext).map((context, i)=>{ return context.editing ? writeTag(context.value) : readTag(context.value) })}
-				className={`value`}
+
-				placeholder={props.placeholder}
+				<input type='text'
-				value={temporaryValue}
+					className={`value`}
-				onChange={(e)=>setTemporaryValue(e.target.value)} />
+					placeholder={props.placeholder}
+					value={temporaryValue}
+					onChange={(e)=>setTemporaryValue(e.target.value)} />
+			</div>
 		</div>
 	)
 }