From 6e2834f2beadea4ad65db07951cb2f56aa311726 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Wed, 21 Jan 2026 21:36:39 -0500
Subject: [PATCH] Refactor MeetingSchedule component to enhance time slot
 selection UI

This commit updates the MeetingSchedule component by replacing the numeric field for time slot selection with a more user-friendly interface using MudIconButton components for incrementing and decrementing time slots. The new design improves usability by providing clear visual controls for adjusting the number of time slots, while maintaining the existing functionality of tracking time slot counts. This enhancement contributes to a better user experience in managing meeting schedules.
---
 .../Features/MeetingSchedule/Index.razor      | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/WebApp/Components/Features/MeetingSchedule/Index.razor b/WebApp/Components/Features/MeetingSchedule/Index.razor
index 4b87c5d..764d875 100644
--- a/WebApp/Components/Features/MeetingSchedule/Index.razor
+++ b/WebApp/Components/Features/MeetingSchedule/Index.razor
@@ -51,14 +51,25 @@
                         <MudPaper Elevation="0" Class="pa-1" Style="border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);">
                             <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                 <MudText Typo="Typo.body2">Time Slots</MudText>
-                                <MudNumericField Value="_parameters.TimeSlots"
-                                                 ValueChanged="async (int val) => await OnTimeSlotCountChanged(val)"
-                                                 Label=""
-                                                 Min="1" 
-                                                 Max="4"
-                                                 Variant="Variant.Outlined"
-                                                 Style="width: 80px;">
-                                </MudNumericField>
+                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="0" Style="border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);">
+                                    <MudIconButton Icon="@Icons.Material.Filled.Remove" 
+                                                  OnClick="DecrementTimeSlots"
+                                                  Disabled="@(_parameters.TimeSlots <= 1)"
+                                                  Size="Size.Small"
+                                                  Variant="Variant.Text"
+                                                  Style="border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);" />
+                                    <MudButton Disabled="true" 
+                                              Variant="Variant.Text"
+                                              Style="min-width: 50px; width: 50px; pointer-events: none; border-left: 1px solid var(--mud-palette-lines-default); border-right: 1px solid var(--mud-palette-lines-default); border-radius: 0;">
+                                        @_parameters.TimeSlots
+                                    </MudButton>
+                                    <MudIconButton Icon="@Icons.Material.Filled.Add" 
+                                                  OnClick="IncrementTimeSlots"
+                                                  Disabled="@(_parameters.TimeSlots >= 4)"
+                                                  Size="Size.Small"
+                                                  Variant="Variant.Text"
+                                                  Style="border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;" />
+                                </MudStack>
                             </MudStack>
                         </MudPaper>
                     </MudItem>
@@ -207,6 +218,22 @@
         await Task.CompletedTask;
     }
 
+    private async Task IncrementTimeSlots()
+    {
+        if (_parameters.TimeSlots < 4)
+        {
+            await OnTimeSlotCountChanged(_parameters.TimeSlots + 1);
+        }
+    }
+
+    private async Task DecrementTimeSlots()
+    {
+        if (_parameters.TimeSlots > 1)
+        {
+            await OnTimeSlotCountChanged(_parameters.TimeSlots - 1);
+        }
+    }
+
     private void OnExtendedTeamsChanged(IEnumerable<Team> teams)
     {
         _extendedTeams = teams;