feat: ObjektSelector – Neu-Button entfernt, unbekannte Objekte direkt eintragen

Kein separater „+ Neu"-Button mehr. Im Dropdown erscheint stattdessen
„+ ‚[Name]' hinzufügen", sobald der eingegebene Text nicht bekannt ist.
Enter-Taste: bei einem Treffer auswählen, bei keinem Treffer neu anlegen.

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

components/ObjektSelector.tsx

@@ -12,8 +12,6 @@ export default function ObjektSelector({ selected, onChange }: Props) {
   const [all, setAll] = useState<ObjektOption[]>([]);
   const [search, setSearch] = useState('');
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [newName, setNewName] = useState('');
-  const [showNewInput, setShowNewInput] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -39,29 +37,44 @@ export default function ObjektSelector({ selected, onChange }: Props) {
     ? available.filter((o) => o.Name.toLowerCase().startsWith(search.toLowerCase()))
     : available;
 
+  const searchTrimmed = search.trim();
+  const alreadySelected = searchTrimmed !== '' && selectedNames.has(searchTrimmed.toLowerCase());
+  const exactAvailableMatch = available.find((o) => o.Name.toLowerCase() === searchTrimmed.toLowerCase());
+  const showAddNew = searchTrimmed !== '' && !alreadySelected && !exactAvailableMatch;
+
   function add(obj: ObjektOption) {
     onChange([...selected, { ID: obj.ID, Name: obj.Name }]);
     setSearch('');
     setDropdownOpen(false);
   }
 
-  function addNew() {
-    const name = newName.trim();
-    if (!name || selectedNames.has(name.toLowerCase())) return;
-    const existing = all.find((o) => o.Name.toLowerCase() === name.toLowerCase());
+  function addNew(name: string) {
+    const trimmed = name.trim();
+    if (!trimmed || selectedNames.has(trimmed.toLowerCase())) return;
+    const existing = all.find((o) => o.Name.toLowerCase() === trimmed.toLowerCase());
     if (existing) {
       onChange([...selected, { ID: existing.ID, Name: existing.Name }]);
     } else {
-      onChange([...selected, { ID: null, Name: name }]);
+      onChange([...selected, { ID: null, Name: trimmed }]);
     }
-    setNewName('');
-    setShowNewInput(false);
+    setSearch('');
+    setDropdownOpen(false);
   }
 
   function remove(name: string) {
     onChange(selected.filter((o) => o.Name !== name));
   }
 
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    if (filtered.length === 1 && !showAddNew) {
+      add(filtered[0]);
+    } else if (filtered.length === 0 && searchTrimmed) {
+      addNew(searchTrimmed);
+    }
+  }
+
   return (
     <div className="space-y-3">
       <div className="flex flex-wrap gap-2">
@@ -83,69 +96,40 @@ export default function ObjektSelector({ selected, onChange }: Props) {
         ))}
       </div>
 
-      <div className="flex gap-2">
-        {available.length > 0 && (
-          <div ref={wrapperRef} className="relative flex-1">
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => { setSearch(e.target.value); setDropdownOpen(true); }}
-              onFocus={() => setDropdownOpen(true)}
-              placeholder="Objekt suchen..."
-              className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
-            />
-            {dropdownOpen && filtered.length > 0 && (
-              <div className="absolute z-50 left-0 right-0 mt-1 bg-white border-2 border-gray-400 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                {filtered.map((o) => (
-                  <button
-                    key={o.ID}
-                    type="button"
-                    onClick={() => add(o)}
-                    className="w-full text-left px-4 py-2 text-sm text-gray-900 hover:bg-blue-50 active:bg-blue-100 border-b border-gray-100 last:border-0"
-                  >
-                    {o.Name}
-                  </button>
-                ))}
-              </div>
+      <div ref={wrapperRef} className="relative">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => { setSearch(e.target.value); setDropdownOpen(true); }}
+          onFocus={() => setDropdownOpen(true)}
+          onKeyDown={handleKeyDown}
+          placeholder="Objekt suchen oder neu eingeben..."
+          className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
+        />
+        {dropdownOpen && (filtered.length > 0 || showAddNew) && (
+          <div className="absolute z-50 left-0 right-0 mt-1 bg-white border-2 border-gray-400 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+            {filtered.map((o) => (
+              <button
+                key={o.ID}
+                type="button"
+                onClick={() => add(o)}
+                className="w-full text-left px-4 py-2 text-sm text-gray-900 hover:bg-blue-50 active:bg-blue-100 border-b border-gray-100 last:border-0"
+              >
+                {o.Name}
+              </button>
+            ))}
+            {showAddNew && (
+              <button
+                type="button"
+                onClick={() => addNew(searchTrimmed)}
+                className="w-full text-left px-4 py-2 text-sm text-blue-700 hover:bg-blue-50 active:bg-blue-100 border-t border-gray-200 font-medium"
+              >
+                + „{searchTrimmed}" hinzufügen
+              </button>
             )}
           </div>
         )}
-        <button
-          type="button"
-          onClick={() => setShowNewInput((v) => !v)}
-          className="px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap"
-        >
-          + Neu
-        </button>
       </div>
-
-      {showNewInput && (
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
-            placeholder="Objektname eingeben"
-            className="flex-1 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
-            autoFocus
-          />
-          <button
-            type="button"
-            onClick={addNew}
-            className="px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700"
-          >
-            OK
-          </button>
-          <button
-            type="button"
-            onClick={() => { setShowNewInput(false); setNewName(''); }}
-            className="px-4 py-2 bg-gray-200 text-gray-700 text-sm rounded-lg hover:bg-gray-300"
-          >
-            ✕
-          </button>
-        </div>
-      )}
     </div>
   );
 }