feat: enhance render of category part of item names

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>
       )}