feat: add task points

frontend/src/TaskBoard.tsx

@@ -7,6 +7,7 @@ type Task = {
   title: string
   description: string | null
   status: TaskStatus
+  points: number
   createdAt: string
 }
 
@@ -92,7 +93,10 @@ function TaskBoard({ activeUserName, onLogOut }: TaskBoardProps) {
                 .filter((task) => task.status === column.status)
                 .map((task) => (
                   <article className="task-card" key={task.id}>
-                    <h3>{task.title}</h3>
+                    <div className="task-card-header">
+                      <h3>{task.title}</h3>
+                      <span className="points-badge">{task.points} p</span>
+                    </div>
                     {task.description && <p>{task.description}</p>}
                   </article>
                 ))}
@@ -122,6 +126,7 @@ type CreateTaskModalProps = {
 function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
+  const [points, setPoints] = useState('1')
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
   const isSubmittingRef = useRef(false)
@@ -152,6 +157,7 @@ function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
 
     const trimmedTitle = title.trim()
     const trimmedDescription = description.trim()
+    const numericPoints = Number(points)
 
     if (!trimmedTitle || [...trimmedTitle].length > 100) {
       setError('Titeln måste innehålla mellan 1 och 100 tecken.')
@@ -163,6 +169,16 @@ function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
       return
     }
 
+    if (
+      !points.trim() ||
+      !Number.isInteger(numericPoints) ||
+      numericPoints < 1 ||
+      numericPoints > 99
+    ) {
+      setError('Poäng måste vara ett heltal mellan 1 och 99.')
+      return
+    }
+
     setError('')
     isSubmittingRef.current = true
     setIsSubmitting(true)
@@ -174,6 +190,7 @@ function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
         body: JSON.stringify({
           title: trimmedTitle,
           description: trimmedDescription || null,
+          points: numericPoints,
         }),
       })
 
@@ -212,7 +229,7 @@ function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
             ×
           </button>
         </div>
-        <form onSubmit={(event) => void submit(event)}>
+        <form noValidate onSubmit={(event) => void submit(event)}>
           <label htmlFor="task-title">Titel</label>
           <input
             id="task-title"
@@ -231,6 +248,22 @@ function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
             onChange={(event) => setDescription(event.target.value)}
           />
 
+          <label htmlFor="task-points">Poäng</label>
+          <input
+            id="task-points"
+            type="number"
+            min="1"
+            max="99"
+            step="1"
+            value={points}
+            disabled={isSubmitting}
+            aria-describedby="task-points-help"
+            onChange={(event) => setPoints(event.target.value)}
+          />
+          <p id="task-points-help" className="field-help">
+            1–99 poäng beroende på hur tidskrävande, besvärlig eller viktig uppgiften är.
+          </p>
+
           {error && (
             <p className="error" role="alert">
               {error}