Add NumberCircle Component

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">
-            {index + 1}
-        </div>
+        <NumberCircle
+            number={index + 1}
+        />
 
         {/* Step text */}
         <p className="leading-relaxed">{text}</p>