From 16dbd44831946bb1218a029652ace186266a275a Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Sun, 21 Sep 2025 15:52:00 +0200
Subject: [PATCH] refactor tags: create Tag component and update usages across
 ItemRow, TagAutocompleteInput, ItemsPage, TagsPage, and TripChecklist

---
 frontend/src/components/ItemRow.tsx           | 41 ++++++---------
 frontend/src/components/Tag.tsx               | 52 +++++++++++++++++++
 .../src/components/TagAutocompleteInput.tsx   | 26 ++++++----
 frontend/src/pages/ItemsPage.tsx              | 18 +++----
 frontend/src/pages/TagsPage.tsx               | 18 ++-----
 frontend/src/pages/TripChecklist.tsx          | 45 +++++-----------
 6 files changed, 109 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/Tag.tsx

diff --git a/frontend/src/components/ItemRow.tsx b/frontend/src/components/ItemRow.tsx
index 01b30d3..d85554a 100644
--- a/frontend/src/components/ItemRow.tsx
+++ b/frontend/src/components/ItemRow.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useRef } from "react";
-import { Item, Tag } from "../api";
-import { getTagColor } from "../utils/tagColors";
+import { Item, Tag as TagType } from "../api";
 import TagAutocompleteInput from "./TagAutocompleteInput";
+import Tag from "./Tag";
 
 interface ItemRowProps {
   item: Item;
-  allTags: Tag[];
+  allTags: TagType[];
   onUpdateName: (id: string, name: string) => void;
   onDeleteTag: (itemId: string, tagId: string) => void;
   onAddTag: (itemId: string, tagId: string) => void;
@@ -34,7 +34,6 @@ export default function ItemRow({
     setIsEditing(false);
   }
 
-  // --- Dim category part if "/" exists ---
   function renderNameWithCategory(name: string) {
     if (!name.includes("/")) return name;
     const [cat, rest] = name.split("/", 2);
@@ -46,7 +45,6 @@ export default function ItemRow({
     );
   }
 
-  // Trip-Namen lookup
   const tripName =
     item.trip_id && trips
       ? trips.find((t) => t.id === item.trip_id)?.name
@@ -58,7 +56,6 @@ export default function ItemRow({
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => {
         setHover(false);
-        // Only close add tag input if not focused
         if (
           !addingTag ||
           (inputRef.current && document.activeElement !== inputRef.current)
@@ -92,29 +89,22 @@ export default function ItemRow({
       )}
 
       {item.tags.map((tag) => (
-        <span
+        <Tag
           key={tag.id}
-          className={
-            `${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center font-medium`
-          }
-        >
-          #{tag.name}
-          {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
-          {hover && (
-            <button
-              onClick={() => onDeleteTag(item.id, tag.id)}
-              className="ml-1 text-xs text-red-500 hover:text-red-700"
-            >
-              ×
-            </button>
-          )}
-        </span>
+          tag={tag}
+          isMarked={false}
+          hoveredTag={null}
+          onRemoveTag={() => onDeleteTag(item.id, tag.id)}
+          showRemove={hover}
+        />
       ))}
 
       {tripName && (
-        <span className="ml-2 px-2 py-0.5 rounded bg-gray-100 text-gray-800 text-sm font-semibold">
-          {tripName}
-        </span>
+        <Tag
+          tag={{ id: "trip", name: tripName }}
+          className="bg-yellow-100 text-yellow-900"
+          // No remove, no mark, just display
+        />
       )}
 
       {hover && !addingTag && (
@@ -149,7 +139,6 @@ export default function ItemRow({
         />
       )}
 
-      {/* Löschen-Button am Ende der Zeile */}
       <span className="ml-auto">
         {hover && (
           <button
diff --git a/frontend/src/components/Tag.tsx b/frontend/src/components/Tag.tsx
new file mode 100644
index 0000000..9858ada
--- /dev/null
+++ b/frontend/src/components/Tag.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+interface TagProps {
+  tag: { id: string; name: string; mandatory?: boolean };
+  isMarked?: boolean;
+  hoveredTag?: string | null;
+  onToggleMark?: (id: string) => void;
+  onRemoveTag?: (id: string) => void;
+  onMouseEnter?: (id: string) => void;
+  onMouseLeave?: () => void;
+  showRemove?: boolean;
+  className?: string;
+}
+
+export default function Tag({
+  tag,
+  isMarked,
+  hoveredTag,
+  onToggleMark,
+  onRemoveTag,
+  onMouseEnter,
+  onMouseLeave,
+  showRemove,
+  className = "bg-purple-50 text-purple-900",
+}: TagProps) {
+  return (
+    <span
+      key={tag.id}
+      className={
+        `relative px-2 py-0.5 rounded mr-1 text-xs shadow shadow-md cursor-pointer transition font-medium ` +
+        (isMarked ? "ring-2 ring-yellow-400 " : "") +
+        (tag.mandatory ? "bg-purple-200 text-purple-900" : className )
+      }
+      onClick={() => onToggleMark && onToggleMark(tag.id)}
+      onMouseEnter={() => onMouseEnter && onMouseEnter(tag.id)}
+      onMouseLeave={() => onMouseLeave && onMouseLeave()}
+    >
+      {tag.name}
+      {showRemove && onRemoveTag && (
+        <button
+          className="ml-1 text-xs text-red-500 hover:text-red-700"
+          onClick={e => {
+            e.stopPropagation();
+            onRemoveTag(tag.id);
+          }}
+        >
+          ×
+        </button>
+      )}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/TagAutocompleteInput.tsx b/frontend/src/components/TagAutocompleteInput.tsx
index ae83705..dbc09ae 100644
--- a/frontend/src/components/TagAutocompleteInput.tsx
+++ b/frontend/src/components/TagAutocompleteInput.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useImperativeHandle, forwardRef, useRef } from "react";
-import { Tag } from "../api";
+import { Tag as TagType } from "../api";
+import Tag from "./Tag";
 
 interface TagAutocompleteInputProps {
-  allTags: Tag[];
-  selectedTags: Tag[];
+  allTags: TagType[];
+  selectedTags: TagType[];
   onAddTag: (tagId: string, viaTab?: boolean) => void;
   onEscape?: () => void;
   placeholder?: string;
@@ -86,14 +87,19 @@ const TagAutocompleteInput = forwardRef<HTMLInputElement, TagAutocompleteInputPr
         </div>
       )}
       {filteredSuggestions.length > 0 && (
-        <ul className="absolute left-0 top-full mt-1 bg-white border rounded shadow z-10 w-full max-h-40 overflow-auto">
+        <ul className="absolute left-0 top-full mt-1 bg-white border rounded shadow z-10 w-full max-h-40 overflow-auto flex flex-wrap gap-2 p-2">
           {filteredSuggestions.map((tag, idx) => (
             <li
               key={tag.id}
               className={
-                "px-3 py-1 cursor-pointer flex items-center " +
+                "cursor-pointer " +
                 (idx === autocompleteIndex ? "bg-blue-100 font-bold" : "")
               }
+              style={{
+                display: "inline-block",
+                margin: "2px 4px",
+                borderRadius: "0.5rem",
+              }}
               onMouseDown={() => {
                 onAddTag(tag.id);
                 setInput("");
@@ -101,10 +107,12 @@ const TagAutocompleteInput = forwardRef<HTMLInputElement, TagAutocompleteInputPr
               }}
               onMouseEnter={() => setAutocompleteIndex(idx)}
             >
-              #{tag.name}
-              {tag.mandatory && (
-                <span className="text-red-500 font-bold ml-1">!</span>
-              )}
+              <Tag
+                tag={tag}
+                className={
+                  (idx === autocompleteIndex ? "ring-2 ring-blue-400" : "")
+                }
+              />
             </li>
           ))}
         </ul>
diff --git a/frontend/src/pages/ItemsPage.tsx b/frontend/src/pages/ItemsPage.tsx
index 5f011a2..76397d4 100644
--- a/frontend/src/pages/ItemsPage.tsx
+++ b/frontend/src/pages/ItemsPage.tsx
@@ -12,7 +12,7 @@ import {
 } from "../api";
 import ItemList from "../components/ItemList";
 import TagFilter from "../components/TagFilter";
-import { getTagColor } from "../utils/tagColors";
+import Tag from "../components/Tag";
 
 async function fetchTrips(): Promise<{ id: string; name: string }[]> {
   const res = await fetch("http://localhost:8000/trips/");
@@ -287,18 +287,12 @@ export default function ItemsPage() {
           {!newItemTripId && (
             <div className="flex flex-wrap gap-2 bg-white rounded ">
               {tags.map((tag) => (
-                <span
+                <Tag
                   key={tag.id}
-                  className={
-                    `${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` +
-                    (newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "")
-                  }
-                  onClick={() => toggleNewItemTag(tag.id)}
-                  title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""}
-                >
-                  #{tag.name}
-                  {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
-                </span>
+                  tag={tag}
+                  isMarked={newItemTags.includes(tag.id)}
+                  onToggleMark={toggleNewItemTag}
+                />
               ))}
             </div>
           )}
diff --git a/frontend/src/pages/TagsPage.tsx b/frontend/src/pages/TagsPage.tsx
index bedd395..803da6d 100644
--- a/frontend/src/pages/TagsPage.tsx
+++ b/frontend/src/pages/TagsPage.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { getTags } from "../api";
-import type { Tag } from "../api";
-import { getTagColor } from "../utils/tagColors";
+import Tag from "../components/Tag";
 
 const API_BASE = "http://localhost:8000";
 
 export default function TagsPage() {
-  const [tags, setTags] = useState<Tag[]>([]);
+  const [tags, setTags] = useState<any[]>([]);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState("");
   const [editMandatory, setEditMandatory] = useState(false);
@@ -15,7 +14,6 @@ export default function TagsPage() {
 
   async function loadTags() {
     const loaded = await getTags();
-    // Alphabetisch sortieren
     setTags(loaded.sort((a, b) => a.name.localeCompare(b.name)));
   }
 
@@ -128,20 +126,14 @@ export default function TagsPage() {
               className="flex items-center group"
               style={{ marginBottom: "0.5rem" }}
             >
-              <span
-                className={
-                  `${getTagColor(tag.id).bg} px-4 py-2 rounded-xl text-lg cursor-pointer font-semibold`
-                }
+              <Tag
+                tag={tag}
                 onClick={() => {
                   setEditingId(tag.id);
                   setEditName(tag.name);
                   setEditMandatory(tag.mandatory);
                 }}
-                title="Bearbeiten"
-              >
-                #{tag.name}
-                {tag.mandatory && <span className="text-red-500 font-bold ml-1">!</span>}
-              </span>
+              />
             </li>
           )
         )}
diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index 6580823..d44c32c 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -3,7 +3,8 @@ import React, { useState, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { getTripItems, toggleTripItem, updateTrip, getTags } from "../api";
 import TagAutocompleteInput from "../components/TagAutocompleteInput";
-import { getTagColor } from "../utils/tagColors";
+import TripTag from "../components/Tag";
+import Tag from "../components/Tag";
 
 export default function TripChecklist({ trips }: { trips: any[] }) {
   const { id } = useParams();
@@ -282,36 +283,18 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
             {selectedTags.length === 0 ? (
               <span className="text-gray-400 text-sm">keine</span>
             ) : (
-              selectedTags.map((tag: any) => {
-                const isMarked = markedTags.some((mt: any) => mt.id === tag.id);
-                const color = getTagColor(tag.id);
-                return (
-                  <span
-                    key={tag.id}
-                    className={
-                      `relative px-2 py-0.5 rounded mr-1 text-xs shadow shadow-md cursor-pointer transition font-medium ${color.bg} ` +
-                      (isMarked ? "ring-2 ring-yellow-400" : "")
-                    }
-                    onClick={() => handleToggleMark(tag.id)}
-                    onMouseEnter={() => setHoveredTag(tag.id)}
-                    onMouseLeave={() => setHoveredTag(null)}
-                  >
-                    #{tag.name}
-                    {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
-                    {hoveredTag === tag.id && (
-                      <button
-                        className="absolute -top-2 -right-2 text-xs text-red-500 bg-white rounded-full px-1 shadow"
-                        onClick={e => {
-                          e.stopPropagation();
-                          handleRemoveTag(tag.id);
-                        }}
-                      >
-                        ×
-                      </button>
-                    )}
-                  </span>
-                );
-              })
+              selectedTags.map((tag: any) => (
+                <Tag
+                  key={tag.id}
+                  tag={tag}
+                  isMarked={markedTags.some((mt: any) => mt.id === tag.id)}
+                  hoveredTag={hoveredTag}
+                  onToggleMark={handleToggleMark}
+                  onRemoveTag={handleRemoveTag}
+                  onMouseEnter={setHoveredTag}
+                  onMouseLeave={() => setHoveredTag(null)}
+                />
+              ))
             )}
             {/* "+Tag" link and dropdown */}
             {!addingTag ? (