From 73b805546fd849f76e5458691dcdbd279712c0fb Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sat, 20 Sep 2025 17:00:27 +0200
Subject: [PATCH] move the recipe list's toolbar to a component of its own

---
 .../src/components/recipes/RecipeEditor.tsx   |  4 +--
 .../src/components/recipes/RecipeListPage.tsx | 25 ++++----------
 .../components/recipes/RecipeListToolbar.tsx  | 34 +++++++++++++++++++
 3 files changed, 42 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/recipes/RecipeListToolbar.tsx

diff --git a/frontend/src/components/recipes/RecipeEditor.tsx b/frontend/src/components/recipes/RecipeEditor.tsx
index 040fc5b..56cdd2b 100644
--- a/frontend/src/components/recipes/RecipeEditor.tsx
+++ b/frontend/src/components/recipes/RecipeEditor.tsx
@@ -94,7 +94,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
           placeholder="1"
           value={draft.servings.amount}
           onChange={e => {
-            let tempServings = draft.servings
+            const tempServings = draft.servings
             tempServings.amount = Number(e.target.value)
             setDraft({...draft, servings: tempServings})
           }}
@@ -104,7 +104,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
           placeholder="Persons"
           value={draft.servings.unit}
           onChange={e => {
-            let tempServings = draft.servings
+            const tempServings = draft.servings
             tempServings.unit = e.target.value
             setDraft({...draft, servings: tempServings})
           }}
diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index f086f1d..cd08be9 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -5,6 +5,7 @@ import { fetchRecipeList } from "../../api/recipePoint"
 import { useNavigate } from "react-router-dom"
 import { getRecipeAddUrl, getRecipeDetailUrl } from "../../routes"
 import SearchField from "../basics/SearchField"
+import RecipeListToolbar from "./RecipeListToolbar"
 
 /**
  * Displays a list of recipes in a sidebar layout.
@@ -44,25 +45,11 @@ export default function RecipeListPage() {
         {/* Header - remains in position when scrolling */}
         <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
           <h1 className="content-title text-blue-900">Recipes</h1>
-          <div className="flex flex-wrap items-center gap-2 w-full">
-            {/* Label: left-aligned on medium+ screens, full-width on small screens */}
-            <div className="order-2 md:order-1 w-full md:w-auto md:flex-1">
-              <label className="label">{recipeList.length} Recipes</label>
-            </div>
-
-            {/* Search + Add button container: right-aligned on medium+ screens */}
-            <div className="order-1 md:order-2 flex flex-1 md:flex-none justify-end gap-2 min-w-[160px]">
-              <div className="flex-1 md:flex-none md:max-w-[500px]">
-                <SearchField onSearchStringChanged={setSearchString} />
-              </div>
-              <button
-                className="primary-button flex-shrink-0"
-                onClick={handleAdd}
-              >
-                Add recipe
-              </button>
-            </div>
-          </div>
+          <RecipeListToolbar 
+            onAddClicked={handleAdd}
+            onSearchStringChanged={setSearchString}
+            numberOfRecipes={recipeList.length}
+          />
         </div>
         {/*Content - List of recipe cards */}
         <div className="w-full pt-4">
diff --git a/frontend/src/components/recipes/RecipeListToolbar.tsx b/frontend/src/components/recipes/RecipeListToolbar.tsx
new file mode 100644
index 0000000..99d23ef
--- /dev/null
+++ b/frontend/src/components/recipes/RecipeListToolbar.tsx
@@ -0,0 +1,34 @@
+import SearchField from "../basics/SearchField"
+
+/**
+ * Toolbar for RecipeListPage containing searchfield, add recipe button and number of recipes
+ */
+type RecepeListToolbarProps = { 
+    onSearchStringChanged: (searchString : string) => void
+    onAddClicked: () => void
+    numberOfRecipes : number
+}
+
+export default function RecipeListToolbar({onSearchStringChanged, onAddClicked, numberOfRecipes} : RecepeListToolbarProps){
+    return (
+        <div className="flex flex-wrap items-center gap-2 w-full">
+            {/* Label: left-aligned on medium+ screens, full-width on small screens */}
+            <div className="order-2 md:order-1 w-full md:w-auto md:flex-1">
+                <label className="label">{numberOfRecipes} Recipes</label>
+            </div>
+
+            {/* Search + Add button container: right-aligned on medium+ screens */}
+            <div className="order-1 md:order-2 flex flex-1 md:flex-none justify-end gap-2 min-w-[160px]">
+                <div className="flex-1 md:flex-none md:max-w-[500px]">
+                <SearchField onSearchStringChanged={onSearchStringChanged} />
+                </div>
+                <button
+                className="primary-button flex-shrink-0"
+                onClick={onAddClicked}
+                >
+                Add recipe
+                </button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file