+
+ );
+ }
+
+ if (error && !kitchen) {
+ return (
+
+
+ );
+ }
+
+ if (!kitchen) return null;
+
+ return (
+ {error}
+ Back to Kitchens +
+
+
+
+ {/* Recipes section */}
+
+
+
+ );
+}
diff --git a/apps/kitchen_mate/frontend/src/components/KitchenRecipeListItem.tsx b/apps/kitchen_mate/frontend/src/components/KitchenRecipeListItem.tsx
new file mode 100644
index 0000000..3895c1c
--- /dev/null
+++ b/apps/kitchen_mate/frontend/src/components/KitchenRecipeListItem.tsx
@@ -0,0 +1,88 @@
+import { Link } from "react-router-dom";
+import { formatTagForDisplay } from "../utils/tags";
+import type { KitchenRecipe } from "../types/kitchen";
+
+interface KitchenRecipeListItemProps {
+ recipe: KitchenRecipe;
+ kitchenName: string;
+ onRemove?: () => void;
+ removing?: boolean;
+}
+
+export function KitchenRecipeListItem({ recipe, kitchenName, onRemove, removing }: KitchenRecipeListItemProps) {
+ const tags = recipe.tags ?? [];
+
+ return (
+
+
+ ← Kitchens
+
+
+
+ {kitchen.name}
+ + {error &&{error}
} + + {/* Members section */} +Members
+-
+ {kitchen.members.map((member) => (
+
-
+ + {member.email ?? member.user_id} + {member.role === "admin" && ( + + admin + + )} ++ {isAdmin && member.user_id !== user?.id && ( + + )} +
+ ))}
+
{inviteMessage}
} + {inviteError &&{inviteError}
} ++ Shared Recipes ({recipes.length}) +
+ + {recipes.length === 0 ? ( ++ No recipes shared yet. Share a recipe from your collection using the kitchen icon on any recipe. +
+ ) : ( +
+ {recipes.map((recipe) => (
+ handleRemoveRecipe(recipe.id)}
+ removing={removingRecipe === recipe.id}
+ />
+ ))}
+
+ )}
+
+
+
+ );
+}
diff --git a/apps/kitchen_mate/frontend/src/components/KitchensDropdown.tsx b/apps/kitchen_mate/frontend/src/components/KitchensDropdown.tsx
new file mode 100644
index 0000000..4931bd9
--- /dev/null
+++ b/apps/kitchen_mate/frontend/src/components/KitchensDropdown.tsx
@@ -0,0 +1,88 @@
+import { useState, useRef, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { listKitchens, KitchenError } from "../api/kitchens";
+import type { KitchenSummary } from "../types/kitchen";
+
+export function KitchensDropdown() {
+ const [isOpen, setIsOpen] = useState(false);
+ const [kitchens, setKitchens] = useState
+ {recipe.image_url ? (
+ 
+ ) : (
+
+
+
+
+
+
+ )}
+
+
+ {kitchenName}
+
+
+ {onRemove && (
+
+ )}
+
+
+
+ + {recipe.title} +
+ + +
+ {tags.slice(0, 3).map((tag, index) => (
+
+ {formatTagForDisplay(tag)}
+
+ ))}
+ {tags.length > 3 && (
+ +{tags.length - 3}
+ )}
+
+
+ + {new Date(recipe.shared_at).toLocaleDateString()} +
+
+
+
+ {isOpen && (
+
+ );
+}
diff --git a/apps/kitchen_mate/frontend/src/components/KitchensPage.tsx b/apps/kitchen_mate/frontend/src/components/KitchensPage.tsx
new file mode 100644
index 0000000..3dc53a8
--- /dev/null
+++ b/apps/kitchen_mate/frontend/src/components/KitchensPage.tsx
@@ -0,0 +1,147 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { listKitchens, createKitchen, KitchenError } from "../api/kitchens";
+import { useAuthContext } from "../hooks/useAuthContext";
+import { useRequireAuth } from "../hooks/useRequireAuth";
+import { LoadingSpinner } from "./LoadingSpinner";
+import type { KitchenSummary } from "../types/kitchen";
+
+export function KitchensPage() {
+ const { isAuthEnabled } = useAuthContext();
+ const { isAuthorized } = useRequireAuth();
+ const [kitchens, setKitchens] = useState
+ {kitchens.length > 0 ? (
+ <>
+ {kitchens.map((kitchen) => (
+ setIsOpen(false)}
+ className="block px-4 py-2.5 text-sm text-brown-dark hover:bg-gray-50 hover:text-coral transition-colors"
+ >
+ {kitchen.name}
+
+ ))}
+
+ )}
+
+ setIsOpen(false)}
+ className="block px-4 py-2 text-xs text-brown-medium hover:text-coral transition-colors"
+ >
+ Manage Kitchens
+
+
+
+ ) : (
+ <>
+ No kitchens yet.
+
+ setIsOpen(false)}
+ className="block px-4 py-2 text-xs text-brown-medium hover:text-coral transition-colors"
+ >
+ Manage Kitchens
+
+
+
+ )}
+
+
+ );
+ }
+
+ if (!isAuthorized) {
+ return (
+ Kitchens are only available in multi-user mode.
+
+
+ );
+ }
+
+ const handleCreate = async (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!newName.trim()) return;
+ setCreating(true);
+ try {
+ const kitchen = await createKitchen(newName.trim());
+ setKitchens((prev) => [kitchen, ...prev]);
+ setNewName("");
+ setShowCreate(false);
+ } catch (err) {
+ setError(err instanceof KitchenError ? err.message : "Failed to create kitchen");
+ } finally {
+ setCreating(false);
+ }
+ };
+
+ if (loading) {
+ return (
+ Sign in to use Kitchens.
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/apps/kitchen_mate/frontend/src/components/SavedRecipeView.tsx b/apps/kitchen_mate/frontend/src/components/SavedRecipeView.tsx
index 0c7604e..41725c8 100644
--- a/apps/kitchen_mate/frontend/src/components/SavedRecipeView.tsx
+++ b/apps/kitchen_mate/frontend/src/components/SavedRecipeView.tsx
@@ -12,6 +12,8 @@ import {
import { RecipeEditor } from "./RecipeEditor";
import { ExportDropdown } from "./ExportDropdown";
import { LoadingSpinner } from "./LoadingSpinner";
+import { ShareButton } from "./ShareButton";
+import { ShareToKitchenButton } from "./ShareToKitchenButton";
export function SavedRecipeView() {
const { id } = useParams<{ id: string }>();
@@ -282,6 +284,8 @@ export function SavedRecipeView() {
+
+
+ {error && My Kitchens
+ +{error}
} + + {showCreate && ( + + )} + + {kitchens.length === 0 ? ( +
+
+ ) : (
+ You don't belong to any kitchens yet.
+ {!showCreate && ( + + )} +
+ {kitchens.map((kitchen) => (
+
+
+ )}
+
+
+
+ ))}
+ {kitchen.name}
+ + {kitchen.member_count} member{kitchen.member_count !== 1 ? "s" : ""} + +
+ {id &&