From f6aec6138e5354c214ea7239d01eaa5e1fc17dd6 Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Mon, 15 Sep 2025 23:17:44 +0200
Subject: [PATCH] feat: refactor tag color logic

---
 frontend/src/components/ItemRow.tsx | 29 ++++++-----------------------
 frontend/src/pages/ItemsPage.tsx    | 13 +++++--------
 frontend/src/utils/tagColors.ts     | 29 +++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/utils/tagColors.ts

diff --git a/frontend/src/components/ItemRow.tsx b/frontend/src/components/ItemRow.tsx
index 33f6516..dc4c8c9 100644
--- a/frontend/src/components/ItemRow.tsx
+++ b/frontend/src/components/ItemRow.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Item, Tag } from "../api";
+import { getTagColor } from "../utils/tagColors";
 
 interface ItemRowProps {
   item: Item;
@@ -10,19 +11,6 @@ interface ItemRowProps {
   onDeleteItem: (itemId: string) => void;
 }
 
-const TAG_COLORS = [
-  "bg-blue-200 text-blue-900",
-  "bg-green-200 text-green-900",
-  "bg-yellow-200 text-yellow-900",
-  "bg-pink-200 text-pink-900",
-  "bg-purple-200 text-purple-900",
-  "bg-orange-200 text-orange-900",
-  "bg-teal-200 text-teal-900",
-  "bg-red-200 text-red-900",
-  "bg-indigo-200 text-indigo-900",
-  "bg-lime-200 text-lime-900",
-];
-
 export default function ItemRow({
   item,
   allTags,
@@ -106,7 +94,11 @@ export default function ItemRow({
       {item.tags.map((tag) => (
         <span
           key={tag.id}
-          className={`${getTagColor(tag.id)} text-sm rounded px-1 py-0.5 flex items-center`}
+          className={
+            tag.mandatory
+              ? "border-2 border-yellow-400 text-sm rounded px-1 py-0.5 flex items-center"
+              : `${getTagColor(tag.id)} text-sm rounded px-1 py-0.5 flex items-center`
+          }
         >
           #{tag.name}
           {hover && (
@@ -185,12 +177,3 @@ export default function ItemRow({
     </li>
   );
 }
-
-function getTagColor(tagId: string) {
-  // Simple hash: sum char codes
-  let hash = 0;
-  for (let i = 0; i < tagId.length; i++) {
-    hash = (hash + tagId.charCodeAt(i)) % TAG_COLORS.length;
-  }
-  return TAG_COLORS[hash];
-}
diff --git a/frontend/src/pages/ItemsPage.tsx b/frontend/src/pages/ItemsPage.tsx
index bf6deae..cf61da3 100644
--- a/frontend/src/pages/ItemsPage.tsx
+++ b/frontend/src/pages/ItemsPage.tsx
@@ -12,6 +12,7 @@ import {
 } from "../api";
 import ItemList from "../components/ItemList";
 import TagFilter from "../components/TagFilter";
+import { getTagColor } from "../utils/tagColors";
 
 async function fetchTrips(): Promise<{ id: string; name: string }[]> {
   const res = await fetch("http://localhost:8000/trips/");
@@ -179,19 +180,15 @@ export default function ItemsPage() {
             <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"
-                  : "") +
-                (tag.mandatory ? " border-2 border-yellow-400" : "")
+                tag.mandatory
+                  ? "border-2 border-yellow-400 text-sm rounded px-1 py-0.5 flex items-center cursor-pointer"
+                  : `${getTagColor(tag.id)} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer`
+                + (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="ml-1 text-yellow-500 font-bold" title="Pflicht-Tag">*</span>
-              )}
             </span>
           ))}
           {/* Hinweis, falls Trip gewählt */}
diff --git a/frontend/src/utils/tagColors.ts b/frontend/src/utils/tagColors.ts
new file mode 100644
index 0000000..f0d801a
--- /dev/null
+++ b/frontend/src/utils/tagColors.ts
@@ -0,0 +1,29 @@
+export const TAG_COLORS = [
+  "bg-blue-200 text-blue-900",
+  "bg-green-200 text-green-900",
+  "bg-yellow-200 text-yellow-900",
+  "bg-pink-200 text-pink-900",
+  "bg-purple-200 text-purple-900",
+  "bg-orange-200 text-orange-900",
+  "bg-teal-200 text-teal-900",
+  "bg-red-200 text-red-900",
+  "bg-indigo-200 text-indigo-900",
+  "bg-lime-200 text-lime-900",
+  "bg-cyan-200 text-cyan-900",
+  "bg-amber-200 text-amber-900",
+  "bg-fuchsia-200 text-fuchsia-900",
+  "bg-rose-200 text-rose-900",
+  "bg-emerald-200 text-emerald-900",
+  "bg-violet-200 text-violet-900",
+  "bg-sky-200 text-sky-900",
+  "bg-orange-100 text-orange-800",
+  "bg-green-100 text-green-800",
+];
+
+export function getTagColor(tagId: string) {
+  let hash = 0;
+  for (let i = 0; i < tagId.length; i++) {
+    hash = (hash + tagId.charCodeAt(i)) % TAG_COLORS.length;
+  }
+  return TAG_COLORS[hash];
+}
\ No newline at end of file