Add NumberCircle Component

frontend/src/App.css

@@ -52,10 +52,6 @@
 
 
     /* containers */
-    .circular-container {
-        @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm;
-    }
-
     .highlight-container-bg {
         @apply bg-gray-200 rounded p-2;
     }

frontend/src/components/basics/NumberCircle.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import React from "react";
+
+type NumberCircleProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** The number displayed inside the circle */
+    number: number;
+};
+
+/**
+ * A small circular badge displaying a number.
+ *
+ * Can be used as a standalone indicator or as a drag handle.
+ * Accepts any div attributes (e.g. `className`, `title`, `onClick`, or DnD listeners).
+ */
+export function NumberCircle({ number, className, ...rest }: NumberCircleProps) {
+    return (
+        <div
+            {...rest}
+    className={clsx(
+        "flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white",
+        "flex items-center justify-center shadow-sm",
+        "cursor-default select-none",
+        className
+)}
+>
+    {number}
+    </div>
+);
+}

frontend/src/components/basics/NumberedListItem.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import {NumberCircle} from "./NumberCircle.tsx";
 
 type NumberedListItemProps = {
     /** Index of the element. Index + 1 is displayed in circle */
@@ -18,9 +19,9 @@ export function NumberedListItem({index, text, className = ""}: NumberedListItem
         "flex items-start gap-4",
         className)}>
         {/* Step number circle */}
-        <div className="circular-container">
+        <NumberCircle
-            {index + 1}
+            number={index + 1}
-        </div>
+        />
 
         {/* Step text */}
         <p className="leading-relaxed">{text}</p>

frontend/src/components/recipes/InstructionStepDesktopListItem.tsx

@@ -8,6 +8,7 @@ import type {InstructionStepModel} from "../../models/InstructionStepModel";
 import Button from "../basics/Button";
 import {X} from "lucide-react"
 import {ButtonType} from "../basics/BasicButtonDefinitions";
+import {NumberCircle} from "../basics/NumberCircle.tsx";
 
 type InstructionStepDesktopListItemProps = {
     id: string | number;
@@ -34,14 +35,13 @@ export function InstructionStepDesktopListItem({
             style={style}
             className="flex items-start gap-3"
         >
-            <div
+            <NumberCircle
                 {...attributes}
                 {...listeners}
-                className="circular-container cursor-grab"
+                number={index + 1}
+                className="cursor-grab"
                 title="Ziehen, um neu zu ordnen"
-            >
+            />
-                {index + 1}
-            </div>
 
             <textarea
                 className="w-full min-h-[60px] resize-none overflow-hidden"

frontend/src/components/recipes/InstructionStepMobileListItem.tsx

@@ -3,6 +3,7 @@ import {X} from "lucide-react";
 import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
 import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
 import {MoveButtonControl} from "../basics/MoveButtonControl.tsx";
+import {NumberCircle} from "../basics/NumberCircle.tsx";
 
 type InstructionStepMobileListItemProps = {
     /** Index of the instruction step */
@@ -61,9 +62,9 @@ export function InstructionStepMobileListItem({
         >
             {/* Left column: Number of the instruction step and move controls */}
             <div className="flex flex-col items-center pt-1">
-                <div className="circular-container">
+                <NumberCircle
-                    {index + 1}
+                    number={index + 1}
-                </div>
+                />
                 <MoveButtonControl
                     isUpDisabled={isFirst}
                     isDownDisabled={isLast}