From 68311f40123b36e310fe7bf99d46516d17c8f14e Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Wed, 14 Jan 2026 09:50:16 -0500
Subject: [PATCH] Refactor ScheduledTeamsList component to enhance student
 exclusion UI

This commit updates the ScheduledTeamsList.razor component by replacing the existing MudChip implementation with InteractiveChip for better user interaction when managing student exclusions. The logic for displaying excluded students has been simplified, improving the overall readability and maintainability of the code. Additionally, the hover functionality has been removed to streamline the user experience. These changes contribute to a more intuitive and responsive scheduling interface.
---
 .../MeetingSchedule/ScheduledTeamsList.razor  | 42 +++++----
 .../Features/Teams/Assignment.razor           | 93 ++++++++++---------
 .../Shared/Components/InteractiveChip.razor   | 50 ++++++++++
 3 files changed, 121 insertions(+), 64 deletions(-)
 create mode 100644 WebApp/Components/Shared/Components/InteractiveChip.razor

diff --git a/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor b/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
index b46cd17..49d3d22 100644
--- a/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
+++ b/WebApp/Components/Features/MeetingSchedule/ScheduledTeamsList.razor
@@ -55,29 +55,35 @@
                             AbsentStudents = AbsentStudents.ToList()
                         });
 
-                    <MudStack Row="true" Spacing="0" AlignItems="AlignItems.Center" 
-                              Style="position: relative; display: inline-flex;" 
-                              @onmouseenter="@(() => _hoveredStudent = (team.Id, student.Id))"
-                              @onmouseleave="@(() => _hoveredStudent = (null, null))">
+                    @if (nonExcludedStudentCount > 1)
+                    {
+                        <InteractiveChip Size="Size.Small" 
+                                          Color="@chipColor" 
+                                          Variant="Variant.Outlined"
+                                          Style="@(isExcluded ? "opacity: 0.5;" : "")">
+                            <ChildContent>
+                                <span>@formattedName</span>
+                            </ChildContent>
+                            <ControlContent>
+                                <MudIconButton Icon="@Icons.Material.Filled.Close"
+                                              Size="Size.Small"
+                                              Color="Color.Error"
+                                              Variant="Variant.Text"
+                                              OnClick="@(() => OnToggleStudentExclusion.InvokeAsync((team.Id, TimeSlotIndex, student.Id)))"
+                                              Style="padding: 0; min-width: 16px; width: 16px; height: 16px; margin-left: 4px;" />
+                            </ControlContent>
+                        </InteractiveChip>
+                    }
+                    else
+                    {
                         <MudChip T="string" 
                                  Size="Size.Small" 
                                  Color="@chipColor" 
                                  Variant="Variant.Outlined"
                                  Style="@(isExcluded ? "opacity: 0.5;" : "")">
-                            <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
-                                <span>@formattedName</span>
-                                @if (_hoveredStudent == (team.Id, student.Id) && nonExcludedStudentCount > 1)
-                                {
-                                    <MudIconButton Icon="@Icons.Material.Filled.Close"
-                                                  Size="Size.Small"
-                                                  Color="Color.Error"
-                                                  Variant="Variant.Text"
-                                                  OnClick="@(() => OnToggleStudentExclusion.InvokeAsync((team.Id, TimeSlotIndex, student.Id)))"
-                                                  Style="padding: 0; min-width: 16px; width: 16px; height: 16px; margin-left: 4px;" />
-                                }
-                            </MudStack>
+                            <span>@formattedName</span>
                         </MudChip>
-                    </MudStack>
+                    }
                 }
             </MudStack>
         </MudStack>
@@ -112,8 +118,6 @@
     [Parameter]
     public EventCallback<(int teamId, int timeSlotIndex, int studentId)> OnToggleStudentExclusion { get; set; }
 
-    private (int? teamId, int? studentId) _hoveredStudent = (null, null);
-
     private bool IsStudentExcluded(int teamId, int timeSlotIndex, int studentId)
     {
         var key = (teamId, timeSlotIndex, studentId);
diff --git a/WebApp/Components/Features/Teams/Assignment.razor b/WebApp/Components/Features/Teams/Assignment.razor
index 4c15082..add1779 100644
--- a/WebApp/Components/Features/Teams/Assignment.razor
+++ b/WebApp/Components/Features/Teams/Assignment.razor
@@ -163,7 +163,7 @@
                         var isAssigned = context.Events.Contains(e);
 
                         var color = AppIcons.RankedEventColor(eventRank ?? 0);
-                        var style = string.Empty;
+                        var style = "border-style: solid;";
 
                         if (isAssigned)
                         {
@@ -183,51 +183,54 @@
                                 style += $"border-color:{color}; border-width:medium; color:{Colors.Gray.Lighten1};";
                         }
 
-                        <MudPaper Class="d-inline-flex align-center pa-2 mx-3 my-1 border-solid" Style="@(style)">
-                            @e.ShortName&nbsp;
-                            @AppIcons.EventAttributes(e)
-                            @{
-                                var isIncluded = _assignmentRequirements
-                                    .Find(ar =>
-                                        ar.EventDefinition == e
-                                        && ar.Student == context.Student
-                                        && ar.Requirement == Requirement.Include) == null;
-                                var isExcluded = _assignmentRequirements
-                                    .Find(ar =>
-                                        ar.EventDefinition == e
-                                        && ar.Student == context.Student
-                                        && ar.Requirement == Requirement.Exclude) == null;
-                            }
-                            @if (isIncluded)
-                            {
-                                <MudTooltip Text="@($"Add requirement for {context.Student.FirstName} in {e.ShortName}")">
-                                    <MudIconButton Icon="@Icons.Material.Outlined.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Default"
-                                                   OnClick="() => RequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
-                                </MudTooltip>
-                            }
-                            else
-                            {
-                                <MudTooltip Text="@($"Remove requirement for {context.Student.FirstName} in {e.ShortName}")">
-                                    <MudIconButton Icon="@Icons.Material.Filled.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Dark"
-                                                   OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
-                                </MudTooltip>
-                            }
+                        var isIncluded = _assignmentRequirements
+                            .Find(ar =>
+                                ar.EventDefinition == e
+                                && ar.Student == context.Student
+                                && ar.Requirement == Requirement.Include) == null;
+                        var isExcluded = _assignmentRequirements
+                            .Find(ar =>
+                                ar.EventDefinition == e
+                                && ar.Student == context.Student
+                                && ar.Requirement == Requirement.Exclude) == null;
 
-                            @if (isExcluded)
-                            {
-                                <MudTooltip Text="@($"Add restriction against {context.Student.FirstName} in {e.ShortName}")">
-                                    <MudIconButton Icon="@Icons.Material.Outlined.ThumbDownAlt" Size="Size.Small" Color="Color.Default"
-                                                   OnClick="() => RequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
-                                </MudTooltip>
-                            }
-                            else
-                            {
-                                <MudTooltip Text="@($"Remove restriction against {context.Student.FirstName} in {e.ShortName}")">
-                                    <MudIconButton Icon="@Icons.Material.Filled.ThumbDownAlt" Size="Size.Small" Color="Color.Dark"
-                                                   OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
-                                </MudTooltip>
-                            }
-                        </MudPaper>
+                        <InteractiveChip WrapperClass="mx-3 my-1" Style="@style" Variant="Variant.Text">
+                            <ChildContent>
+                                @e.ShortName&nbsp;
+                                @AppIcons.EventAttributes(e)
+                            </ChildContent>
+                            <ControlContent>
+                                @if (isIncluded)
+                                {
+                                    <MudTooltip Text="@($"Add requirement for {context.Student.FirstName} in {e.ShortName}")">
+                                        <MudIconButton Icon="@Icons.Material.Outlined.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Default"
+                                                       OnClick="() => RequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
+                                    </MudTooltip>
+                                }
+                                else
+                                {
+                                    <MudTooltip Text="@($"Remove requirement for {context.Student.FirstName} in {e.ShortName}")">
+                                        <MudIconButton Icon="@Icons.Material.Filled.ThumbUpAlt" Class="ml-3" Size="Size.Small" Color="Color.Dark"
+                                                       OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Include)"></MudIconButton>
+                                    </MudTooltip>
+                                }
+
+                                @if (isExcluded)
+                                {
+                                    <MudTooltip Text="@($"Add restriction against {context.Student.FirstName} in {e.ShortName}")">
+                                        <MudIconButton Icon="@Icons.Material.Outlined.ThumbDownAlt" Size="Size.Small" Color="Color.Default"
+                                                       OnClick="() => RequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
+                                    </MudTooltip>
+                                }
+                                else
+                                {
+                                    <MudTooltip Text="@($"Remove restriction against {context.Student.FirstName} in {e.ShortName}")">
+                                        <MudIconButton Icon="@Icons.Material.Filled.ThumbDownAlt" Size="Size.Small" Color="Color.Dark"
+                                                       OnClick="() => RemoveRequireEvent(e, context.Student, Requirement.Exclude)"></MudIconButton>
+                                    </MudTooltip>
+                                }
+                            </ControlContent>
+                        </InteractiveChip>
                     }
                     <MudDivider Style="border-width:3px" />
                 </td></MudTr>
diff --git a/WebApp/Components/Shared/Components/InteractiveChip.razor b/WebApp/Components/Shared/Components/InteractiveChip.razor
new file mode 100644
index 0000000..3855a6f
--- /dev/null
+++ b/WebApp/Components/Shared/Components/InteractiveChip.razor
@@ -0,0 +1,50 @@
+@namespace WebApp.Components.Shared.Components
+
+<MudStack Row="true" Spacing="0" AlignItems="AlignItems.Center" 
+          Style="position: relative; display: inline-flex;" 
+          Class="@WrapperClass"
+          @onmouseenter="@(() => _isHovered = true)"
+          @onmouseleave="@(() => _isHovered = false)">
+    <MudChip T="string" 
+             Size="@Size" 
+             Color="@Color" 
+             Variant="@Variant"
+             Style="@Style"
+             Class="@Class">
+        <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
+            @ChildContent
+            @if (_isHovered && ControlContent != null)
+            {
+                @ControlContent
+            }
+        </MudStack>
+    </MudChip>
+</MudStack>
+
+@code {
+    [Parameter]
+    public required RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public RenderFragment? ControlContent { get; set; }
+
+    [Parameter]
+    public Size Size { get; set; } = Size.Small;
+
+    [Parameter]
+    public Color Color { get; set; } = Color.Default;
+
+    [Parameter]
+    public Variant Variant { get; set; } = Variant.Text;
+
+    [Parameter]
+    public string? Style { get; set; }
+
+    [Parameter]
+    public string? Class { get; set; }
+
+    [Parameter]
+    public string? WrapperClass { get; set; }
+
+    private bool _isHovered = false;
+}
\ No newline at end of file