feat: add item deletion functionality and update item creation to use tag IDs

frontend/src/api.ts

@@ -73,11 +73,14 @@ export async function addItemTag(itemId: string, tagId: string): Promise<Item> {
   return res.json();
 }
 
-export async function createItem(name: string, tags: string[]): Promise<Item> {
+export async function createItem(name: string, tagIds: string[]): Promise<Item> {
   const res = await fetch(`${API_BASE}/items/`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name, tags }),
+    body: JSON.stringify({
+      name,
+      tag_ids: tagIds,
+    }),
   });
   if (!res.ok) throw new Error("Failed to create item");
   return res.json();

frontend/src/components/ItemList.tsx

@@ -8,6 +8,7 @@ interface ItemListProps {
   onUpdateName: (id: string, name: string) => void;
   onDeleteTag: (itemId: string, tagId: string) => void;
   onAddTag: (itemId: string, tagId: string) => void;
+  onDeleteItem: (itemId: string) => void;
 }
 
 export default function ItemList({
@@ -16,6 +17,7 @@ export default function ItemList({
   onUpdateName,
   onDeleteTag,
   onAddTag,
+  onDeleteItem,
 }: ItemListProps) {
   if (items.length === 0) {
     return <p className="text-gray-500 italic">Keine Items gefunden.</p>;
@@ -31,6 +33,7 @@ export default function ItemList({
           onUpdateName={onUpdateName}
           onDeleteTag={onDeleteTag}
           onAddTag={onAddTag}
+          onDeleteItem={onDeleteItem}
         />
       ))}
     </ul>

frontend/src/components/ItemRow.tsx

@@ -7,6 +7,7 @@ interface ItemRowProps {
   onUpdateName: (id: string, name: string) => void;
   onDeleteTag: (itemId: string, tagId: string) => void;
   onAddTag: (itemId: string, tagId: string) => void;
+  onDeleteItem: (itemId: string) => void; // <--- NEU
 }
 
 export default function ItemRow({
@@ -15,6 +16,7 @@ export default function ItemRow({
   onUpdateName,
   onDeleteTag,
   onAddTag,
+  onDeleteItem, // <--- NEU
 }: ItemRowProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editName, setEditName] = useState(item.name);
@@ -37,7 +39,7 @@ export default function ItemRow({
 
   return (
     <li
-      className="flex flex-wrap items-center gap-2 py-1 border-b"
+      className="flex flex-wrap items-center gap-2 py-1 border-b group"
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => {
         setHover(false);
@@ -129,6 +131,19 @@ export default function ItemRow({
           )}
         </div>
       )}
+
+      {/* Löschen-Button am Ende der Zeile */}
+      <span className="ml-auto">
+        {hover && (
+          <button
+            className="text-xs text-red-500 bg-white rounded-full px-2 py-1 shadow hover:bg-red-100"
+            onClick={() => onDeleteItem(item.id)}
+            title="Item löschen"
+          >
+            ×
+          </button>
+        )}
+      </span>
     </li>
   );
 }

frontend/src/pages/ItemsPage.tsx

@@ -6,6 +6,7 @@ import {
   updateItemName,
   deleteItemTag,
   addItemTag,
+  deleteItem,
   Item,
   Tag,
 } from "../api";
@@ -26,6 +27,11 @@ export default function ItemsPage() {
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
 
+  // State für neue ItemRow
+  const [newItemName, setNewItemName] = useState("");
+  const [newItemTags, setNewItemTags] = useState<string[]>([]);
+  const [adding, setAdding] = useState(false);
+
   async function loadData() {
     setLoading(true);
     try {
@@ -47,9 +53,17 @@ export default function ItemsPage() {
     );
   }
 
-  async function handleAddItem(name: string, tagNames: string[]) {
-    const newItem = await createItem(name, tagNames);
-    setItems((prev) => [...prev, newItem]);
+  async function handleAddItem() {
+    if (!newItemName.trim()) return;
+    setAdding(true);
+    try {
+      const newItem = await createItem(newItemName.trim(), newItemTags);
+      setItems((prev) => [...prev, newItem]);
+      setNewItemName("");
+      setNewItemTags([]);
+    } finally {
+      setAdding(false);
+    }
   }
 
   async function handleRenameItem(itemId: string, name: string) {
@@ -67,6 +81,11 @@ export default function ItemsPage() {
     setItems((prev) => prev.map((it) => (it.id === itemId ? updated : it)));
   }
 
+  async function handleDeleteItem(itemId: string) {
+    await deleteItem(itemId);
+    setItems((prev) => prev.filter((it) => it.id !== itemId));
+  }
+
   // Filtern
   const filteredItems = items.filter((item) => {
     const matchesText =
@@ -85,7 +104,14 @@ export default function ItemsPage() {
     normalizeName(a.name).localeCompare(normalizeName(b.name))
   );
 
-  return (  
+  // Hilfsfunktion für Tag-Auswahl im Add-Row
+  function toggleNewItemTag(tagId: string) {
+    setNewItemTags((prev) =>
+      prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]
+    );
+  }
+
+  return (
     <div className="p-4 max-w-3xl mx-auto">
       <h1 className="text-2xl font-bold mb-4">Items</h1>
 
@@ -105,17 +131,52 @@ export default function ItemsPage() {
         onToggle={handleTagToggle}
       />
 
-      {loading ? (
-        <p>Lade...</p>
-      ) : (
+      {/* Neue ItemRow als erste Zeile */}
+      <ul className="divide-y">
+        <li className="flex flex-wrap items-center gap-2 py-1 border-b bg-gray-50">
+          <input
+            className="border rounded px-1 py-0.5 flex-1 min-w-[120px]"
+            value={newItemName}
+            onChange={e => setNewItemName(e.target.value)}
+            placeholder="Neues Item..."
+            onKeyDown={e => {
+              if (e.key === "Enter") handleAddItem();
+            }}
+            disabled={adding}
+          />
+          {tags.map((tag) => (
+            <span
+              key={tag.id}
+              className={
+                "bg-gray-200 text-sm rounded px-1 py-0.5 flex items-center cursor-pointer " +
+                (newItemTags.includes(tag.id)
+                  ? "bg-blue-200 text-blue-900 font-bold"
+                  : "")
+              }
+              onClick={() => toggleNewItemTag(tag.id)}
+            >
+              #{tag.name}
+            </span>
+          ))}
+          <button
+            className="text-xs text-green-600 bg-green-100 rounded px-2 py-1 ml-auto"
+            onClick={handleAddItem}
+            disabled={adding || !newItemName.trim()}
+            style={{ minWidth: 90 }}
+          >
+            Hinzufügen
+          </button>
+        </li>
         <ItemList
           items={sortedItems}
           allTags={tags}
           onUpdateName={handleRenameItem}
           onDeleteTag={handleDeleteTag}
           onAddTag={handleAddTag}
+          onDeleteItem={handleDeleteItem}
         />
-      )}
+      </ul>
+      {loading && <p>Lade...</p>}
     </div>
   );
 }