Add unregister endpoint and participant removal functionality

src/app.py

@@ -110,3 +110,15 @@ def signup_for_activity(activity_name: str, email: str):
     # Add student
     activity["participants"].append(email)
     return {"message": f"Signed up {email} for {activity_name}"}
+
+# Unregister endpoint
+@app.post("/activities/{activity_name}/unregister")
+def unregister_from_activity(activity_name: str, email: str):
+    """Remove a student from an activity"""
+    activity = activities.get(activity_name)
+    if not activity:
+        raise HTTPException(status_code=404, detail="Activity not found")
+    if email not in activity["participants"]:
+        raise HTTPException(status_code=404, detail="Participant not found in activity")
+    activity["participants"].remove(email)
+    return {"message": f"{email} removed from {activity_name}"}

src/static/app.js

@@ -26,9 +26,13 @@ document.addEventListener("DOMContentLoaded", () => {
             <strong style="color: #3949ab; font-size: 1.05em;">Participants:</strong>
             ${
               details.participants.length > 0
-                ? `<ul style="margin: 0.5em 0 0 1em; padding: 0;">
+                  ? `<ul style="margin: 0.5em 0 0 1em; padding: 0; list-style-type: none;">
-                    ${details.participants.map(p => `<li style="list-style-type: disc; margin-bottom: 2px; color: #333;">${p}</li>`).join("")}
+                      ${details.participants.map(p => `
-                  </ul>`
+                        <li style="margin-bottom: 2px; color: #333; display: flex; align-items: center;">
+                          <span>${p}</span>
+                          <span class="delete-participant" data-activity="${name}" data-participant="${p}" style="cursor:pointer; margin-left:8px; color:#e53935; font-size:1.1em;" title="Remove participant">&#128465;</span>
+                        </li>`).join("")}
+                    </ul>`
                 : `<p style="margin: 0.5em 0 0 1em; color: #888; font-style: italic;">No participants yet.</p>`
             }
           </div>
@@ -42,6 +46,27 @@ document.addEventListener("DOMContentLoaded", () => {
           ${participantsHTML}
         `;
 
+        // Add event listener for delete icons
+        activityCard.querySelectorAll('.delete-participant').forEach(icon => {
+          icon.addEventListener('click', async (e) => {
+            const activityName = icon.getAttribute('data-activity');
+            const participant = icon.getAttribute('data-participant');
+            try {
+              const response = await fetch(`/activities/${encodeURIComponent(activityName)}/unregister?email=${encodeURIComponent(participant)}`, {
+                method: 'POST',
+              });
+              const result = await response.json();
+              if (response.ok) {
+                fetchActivities(); // Refresh list
+              } else {
+                alert(result.detail || 'Failed to remove participant.');
+              }
+            } catch (err) {
+              alert('Error removing participant.');
+            }
+          });
+        });
+
         activitiesList.appendChild(activityCard);
 
         // Add option to select dropdown