Add multi-select mode to BeoSelector and ObjektSelector

CustomSelect gains keepOpen prop: dropdown stays open after each
selection, closes via Fertig button or tap outside. ObjektSelector
separates Neu into its own button to keep the dropdown flow clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/ObjektSelector.tsx

@@ -25,10 +25,6 @@ export default function ObjektSelector({ selected, onChange }: Props) {
   const available = all.filter((o) => !selectedNames.has(o.Name.toLowerCase()));
 
   function add(value: string) {
-    if (value === 'neu') {
-      setShowNewInput(true);
-      return;
-    }
     const obj = all.find((o) => o.ID === parseInt(value));
     if (obj && !selectedNames.has(obj.Name.toLowerCase())) {
       onChange([...selected, { ID: obj.ID, Name: obj.Name }]);
@@ -47,11 +43,6 @@ export default function ObjektSelector({ selected, onChange }: Props) {
     onChange(selected.filter((o) => o.Name !== name));
   }
 
-  const options = [
-    { value: 'neu', label: '— Neues Objekt eingeben —' },
-    ...available.map((o) => ({ value: String(o.ID), label: o.Name })),
-  ];
-
   return (
     <div className="space-y-3">
       <div className="flex flex-wrap gap-2">
@@ -73,11 +64,25 @@ export default function ObjektSelector({ selected, onChange }: Props) {
         ))}
       </div>
 
-      <CustomSelect
-        placeholder="+ Objekt hinzufügen"
-        options={options}
-        onChange={add}
-      />
+      <div className="flex gap-2">
+        {available.length > 0 && (
+          <div className="flex-1">
+            <CustomSelect
+              placeholder="+ Objekte hinzufügen"
+              options={available.map((o) => ({ value: String(o.ID), label: o.Name }))}
+              onChange={add}
+              keepOpen
+            />
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={() => setShowNewInput((v) => !v)}
+          className="px-4 py-3 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 hover:bg-gray-50 whitespace-nowrap"
+        >
+          + Neu
+        </button>
+      </div>
 
       {showNewInput && (
         <div className="flex gap-2">
@@ -88,6 +93,7 @@ export default function ObjektSelector({ selected, onChange }: Props) {
             onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
             placeholder="Objektname eingeben"
             className="flex-1 px-3 py-3 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
+            autoFocus
           />
           <button
             type="button"
@@ -101,7 +107,7 @@ export default function ObjektSelector({ selected, onChange }: Props) {
             onClick={() => { setShowNewInput(false); setNewName(''); }}
             className="px-4 py-3 bg-gray-200 text-gray-700 text-base rounded-lg hover:bg-gray-300"
           >
-            Abbrechen
+            ✕
           </button>
         </div>
       )}