feat: dynamic tag colors in ItemRow component

frontend/src/components/ItemRow.tsx

@@ -10,6 +10,19 @@ 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,
@@ -93,7 +106,7 @@ export default function ItemRow({
       {item.tags.map((tag) => (
         <span
           key={tag.id}
-          className="bg-gray-200 text-sm rounded px-1 py-0.5 flex items-center"
+          className={`${getTagColor(tag.id)} text-sm rounded px-1 py-0.5 flex items-center`}
         >
           #{tag.name}
           {hover && (
@@ -172,3 +185,12 @@ 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];
+}