From 22e31bafd98de1e203a87134c303ce43f520d748 Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Mon, 1 Sep 2025 21:29:41 +0200
Subject: [PATCH] feat: enhance render of category part of item names

---
 frontend/src/components/ItemRow.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ItemRow.tsx b/frontend/src/components/ItemRow.tsx
index 7e741be..ec6e5eb 100644
--- a/frontend/src/components/ItemRow.tsx
+++ b/frontend/src/components/ItemRow.tsx
@@ -7,7 +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
+  onDeleteItem: (itemId: string) => void;
 }
 
 export default function ItemRow({
@@ -16,7 +16,7 @@ export default function ItemRow({
   onUpdateName,
   onDeleteTag,
   onAddTag,
-  onDeleteItem, // <--- NEU
+  onDeleteItem,
 }: ItemRowProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editName, setEditName] = useState(item.name);
@@ -37,6 +37,18 @@ 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);
+    return (
+      <>
+        <span className="text-gray-400">{cat}/</span>
+        {rest}
+      </>
+    );
+  }
+
   return (
     <li
       className="flex flex-wrap items-center gap-2 py-1 border-b group"
@@ -67,7 +79,7 @@ export default function ItemRow({
           className="cursor-pointer"
           onClick={() => setIsEditing(true)}
         >
-          {item.name}
+          {renderNameWithCategory(item.name)}
         </span>
       )}