packages/shared/src/types.ts

@@ -100,6 +100,7 @@ export interface Tag {
 
 export interface RecipeTag {
   tag: Tag;
+  name?: string; // Optional for backward compatibility with code that accesses .name directly
 }
 
 export interface Cookbook {

packages/web/src/pages/CookbookDetail.tsx

@@ -4,6 +4,11 @@ import { CookbookWithRecipes, Recipe } from '@basil/shared';
 import { cookbooksApi } from '../services/api';
 import '../styles/CookbookDetail.css';
 
+// Helper function to extract tag name from string or RecipeTag object
+const getTagName = (tag: string | { tag: { name: string } }): string => {
+  return typeof tag === 'string' ? tag : tag.tag.name;
+};
+
 function CookbookDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -75,7 +80,7 @@ function CookbookDetail() {
     if (!cookbook) return [];
     const tagSet = new Set<string>();
     cookbook.recipes.forEach(recipe => {
-      recipe.tags?.forEach(tag => tagSet.add(tag));
+      recipe.tags?.forEach(tag => tagSet.add(getTagName(tag)));
     });
     return Array.from(tagSet).sort();
   };
@@ -301,9 +306,10 @@ function CookbookDetail() {
                     </div>
                     {recipe.tags && recipe.tags.length > 0 && (
                       <div className="recipe-tags">
-                        {recipe.tags.map(tag => (
+                        {recipe.tags.map(tag => {
-                          <span key={tag} className="tag">{tag}</span>
+                          const tagName = getTagName(tag);
-                        ))}
+                          return <span key={tagName} className="tag">{tagName}</span>;
+                        })}
                       </div>
                     )}
                   </div>