Renaming to distinguish editor and display list items and adding component for IngredientGroupDisplayListItem.tsx

frontend/src/components/recipes/IngredientGroupDisplayListItem.tsx

@@ -0,0 +1,22 @@
+import type {IngredientGroupModel} from "../../models/IngredientGroupModel.ts";
+
+type IngredientGroupDisplayListItemProps = {
+    groupModel: IngredientGroupModel,
+    index: number,
+}
+
+export default function IngredientGroupDisplayListItem({groupModel, index}: IngredientGroupDisplayListItemProps) {
+    return (<div key={index}>
+        {/* the title is optional, only print if present */}
+        {groupModel.title && groupModel.title.trim() !== "" && (
+            <h3 className="highlight-container-bg mb-2">{groupModel.title}</h3>
+        )}
+        <ul>
+            {groupModel.ingredientList.map((ing, j) => (
+                <li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
+                    {ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
+                </li>
+            ))}
+        </ul>
+    </div>);
+}

frontend/src/components/recipes/IngredientGroupEditorListItem.tsx

@@ -5,7 +5,7 @@ import type {IngredientGroupModel} from "../../models/IngredientGroupModel.ts";
 import type {IngredientModel} from "../../models/IngredientModel.ts";
 import HorizontalInputGroupLayout from "../basics/HorizontalInputGroupLayout.tsx";
 
-type IngredientGroupListItemProps = {
+type IngredientGroupEditorListItemProps = {
     /** The list item's index */
     index: number
     /** Model containing data for ingredient group */
@@ -23,12 +23,12 @@ type IngredientGroupListItemProps = {
  * @param handleUpdate Model containing data for ingredient group
  * @param handleRemove Method for removing group
  */
-export default function IngredientGroupListItem({
+export default function IngredientGroupEditorListItem({
                                                           index,
                                                           ingredientGroupModel,
                                                           handleUpdate,
                                                           handleRemove
-                                                }: IngredientGroupListItemProps) {
+                                                      }: IngredientGroupEditorListItemProps) {
     const updateIngredientList = (index: number, ingredientList: IngredientModel[]) => {
         handleUpdate(index, "ingredientList", ingredientList)
     }

frontend/src/components/recipes/IngredientGroupListEditor.tsx

@@ -3,7 +3,7 @@ import type {IngredientGroupModel} from "../../models/IngredientGroupModel"
 import Button from "../basics/Button"
 import {Plus} from "lucide-react"
 import {ButtonType} from "../basics/BasicButtonDefinitions"
-import IngredientGroupListItem from "./IngredientGroupListItem.tsx";
+import IngredientGroupEditorListItem from "./IngredientGroupEditorListItem.tsx";
 
 type IngredientGroupListEditorProps = {
     ingredientGroupList: IngredientGroupModel[]
@@ -48,7 +48,7 @@ export function IngredientGroupListEditor({ingredientGroupList, onChange}: Ingre
             <h2>Zutaten</h2>
             <div>
                 {ingredientGroupList.map((ingGrp, index) => (
-                    <IngredientGroupListItem
+                    <IngredientGroupEditorListItem
                         index={index}
                         ingredientGroupModel={ingGrp}
                         handleUpdate={handleUpdate}

frontend/src/components/recipes/InstructionStepEditorDesktopListItem.tsx

@@ -10,7 +10,7 @@ import {X} from "lucide-react"
 import {ButtonType} from "../basics/BasicButtonDefinitions";
 import {NumberCircle} from "../basics/NumberCircle.tsx";
 
-type InstructionStepDesktopListItemProps = {
+type InstructionStepEditorDesktopListItemProps = {
     id: string | number;
     index: number;
     step: InstructionStepModel;
@@ -18,13 +18,13 @@ type InstructionStepDesktopListItemProps = {
     onRemove: (index: number) => void;
 };
 
-export function InstructionStepDesktopListItem({
+export function InstructionStepEditorDesktopListItem({
                                                          id,
                                                          index,
                                                          step,
                                                          onUpdate,
                                                          onRemove,
-                                               }: InstructionStepDesktopListItemProps) {
+                                                     }: InstructionStepEditorDesktopListItemProps) {
     const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id});
 
     const style = {transform: CSS.Transform.toString(transform), transition};

frontend/src/components/recipes/InstructionStepEditorMobileListItem.tsx

@@ -5,7 +5,7 @@ import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
 import {MoveButtonControl} from "../basics/MoveButtonControl.tsx";
 import {NumberCircle} from "../basics/NumberCircle.tsx";
 
-type InstructionStepMobileListItemProps = {
+type InstructionStepEditorMobileListItemProps = {
     /** Index of the instruction step */
     index: number;
     /** Model holding the instruction step data, e.g., instruction text */
@@ -46,7 +46,7 @@ type InstructionStepMobileListItemProps = {
  * @param isFirst Indicates whether this is the first instruction step. In this case, the step cannot be moved up.
  * @param isLast Indicates whether this is the last instruction step. In this case, the step cannot be moved down.
  */
-export function InstructionStepMobileListItem({
+export function InstructionStepEditorMobileListItem({
                                                         index,
                                                         stepModel,
                                                         onMove,
@@ -54,7 +54,7 @@ export function InstructionStepMobileListItem({
                                                         onRemove,
                                                         isFirst,
                                                         isLast
-                                              }: InstructionStepMobileListItemProps) {
+                                                    }: InstructionStepEditorMobileListItemProps) {
     return (
         <div
             key={stepModel.id}

frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx

@@ -1,7 +1,7 @@
 import {closestCenter, DndContext, PointerSensor, useSensor, useSensors,} from "@dnd-kit/core";
 import {arrayMove, SortableContext, verticalListSortingStrategy,} from "@dnd-kit/sortable";
 import type {InstructionStepModel} from "../../models/InstructionStepModel";
-import {InstructionStepDesktopListItem} from "./InstructionStepDesktopListItem";
+import {InstructionStepEditorDesktopListItem} from "./InstructionStepEditorDesktopListItem.tsx";
 import Button from "../basics/Button";
 import {Plus} from "lucide-react";
 import {ButtonType} from "../basics/BasicButtonDefinitions";
@@ -61,7 +61,7 @@ export function InstructionStepListDesktopEditor({
                 >
                     <div className="flex flex-col gap-3">
                         {instructionStepList.map((step, index) => (
-                            <InstructionStepDesktopListItem
+                            <InstructionStepEditorDesktopListItem
                                 key={step.internalId}
                                 id={step.internalId}
                                 index={index}

frontend/src/components/recipes/InstructionStepListMobileEditor.tsx

@@ -3,7 +3,7 @@ import type {InstructionStepModel} from "../../models/InstructionStepModel";
 import Button from "../basics/Button";
 import {ButtonType} from "../basics/BasicButtonDefinitions";
 import {instructionStepListEditorMethods} from "./InstructionStepListEditorMethods.ts";
-import {InstructionStepMobileListItem} from "./InstructionStepMobileListItem.tsx";
+import {InstructionStepEditorMobileListItem} from "./InstructionStepEditorMobileListItem.tsx";
 
 type InstructionStepListEditorMobileProps = {
     instructionStepList: InstructionStepModel[];
@@ -48,7 +48,7 @@ export function InstructionStepListMobileEditor({
             {/* Instruction list */}
             <div className="flex flex-col gap-3">
                 {instructionStepList.map((step, index) => (
-                    <InstructionStepMobileListItem
+                    <InstructionStepEditorMobileListItem
                         index={index}
                         stepModel={step}
                         onMove={moveStep}

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -14,6 +14,7 @@ import ContentBackground from "../basics/ContentBackground.tsx";
 import ContentBody from "../basics/ContentBody.tsx";
 import PageContainer from "../basics/PageContainer.tsx";
 import {BoxContainer} from "../basics/BoxContainer.tsx";
+import IngredientGroupDisplayListItem from "./IngredientGroupDisplayListItem.tsx";
 
 
 /**
@@ -121,19 +122,10 @@ export default function RecipeDetailPage() {
                     <h2>Zutaten</h2>
                     <ul>
                         {recipeWorkingCopy.ingredientGroupList.map((group, i) => (
-                            <div key={i}>
+                            <IngredientGroupDisplayListItem
-                                {/* the title is optional, only print if present */}
+                                index={i}
-                                {group.title && group.title.trim() !== "" && (
+                                groupModel={group}
-                                    <h3 className="highlight-container-bg mb-2">{group.title}</h3>
+                            />
-                                )}
-                                <ul>
-                                    {group.ingredientList.map((ing, j) => (
-                                        <li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
-                                            {ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
                         ))}
                     </ul>