From 9f550bbce1011747b850fe898542f720a56bb188 Mon Sep 17 00:00:00 2001
From: araemer <anika@raemer.net>
Date: Sat, 25 Oct 2025 18:36:03 +0200
Subject: [PATCH] Add NumberCircle Component

---
 frontend/src/App.css                          |  4 ---
 .../src/components/basics/NumberCircle.tsx    | 29 +++++++++++++++++++
 .../components/basics/NumberedListItem.tsx    |  7 +++--
 .../InstructionStepDesktopListItem.tsx        | 10 +++----
 .../recipes/InstructionStepMobileListItem.tsx |  7 +++--
 5 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/basics/NumberCircle.tsx

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 76e0d16..a2f3294 100644
--- a/frontend/src/App.css
+++ b/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;
     }
diff --git a/frontend/src/components/basics/NumberCircle.tsx b/frontend/src/components/basics/NumberCircle.tsx
new file mode 100644
index 0000000..72cfb6e
--- /dev/null
+++ b/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>
+);
+}
diff --git a/frontend/src/components/basics/NumberedListItem.tsx b/frontend/src/components/basics/NumberedListItem.tsx
index 748d1f4..3cb9a8b 100644
--- a/frontend/src/components/basics/NumberedListItem.tsx
+++ b/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">
-            {index + 1}
-        </div>
+        <NumberCircle
+            number={index + 1}
+        />
 
         {/* Step text */}
         <p className="leading-relaxed">{text}</p>
diff --git a/frontend/src/components/recipes/InstructionStepDesktopListItem.tsx b/frontend/src/components/recipes/InstructionStepDesktopListItem.tsx
index 0f834b2..ce57f4b 100644
--- a/frontend/src/components/recipes/InstructionStepDesktopListItem.tsx
+++ b/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"
diff --git a/frontend/src/components/recipes/InstructionStepMobileListItem.tsx b/frontend/src/components/recipes/InstructionStepMobileListItem.tsx
index 4fadb0a..f28ee9f 100644
--- a/frontend/src/components/recipes/InstructionStepMobileListItem.tsx
+++ b/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">
-                    {index + 1}
-                </div>
+                <NumberCircle
+                    number={index + 1}
+                />
                 <MoveButtonControl
                     isUpDisabled={isFirst}
                     isDownDisabled={isLast}