Enhance Calendar component with improved event tooltip functionality and styling

This commit updates the Calendar component to include a new method for generating tooltips for both events and meetings, enhancing user interaction by providing contextual information. Additionally, CSS styles are introduced for calendar event items, improving their appearance and hover effects. These changes contribute to a more informative and visually appealing calendar experience, aligning with the ongoing efforts to refine the user interface.

WebApp/Components/Features/Calendar/Index.razor

@@ -42,24 +42,25 @@
                          Class="event-calendar"
                          ItemClicked="OnItemClicked">
             <MonthTemplate>
-                @* <MudTooltip Text="@GetEventTooltip(context)"> *@
-                    <div class="d-flex gap-1">
-                        <MudIcon Icon="@Icons.Material.Filled.Circle" Color="Color.Secondary" Size="Size.Small"/>
-                        <div>@context.Text</div>
-                    </div>
-                @* </MudTooltip> *@
-            </MonthTemplate>
-            <WeekTemplate>
-                @* <MudTooltip Text="@GetEventTooltip(context)"> *@
-                    <div style="width: 100%; height: 100%;">
+                <MudTooltip Text="@GetEventTooltip(context)">
+                    <div class="calendar-event-item">
                         @context.Text
                     </div>
-                @* </MudTooltip> *@
+                </MudTooltip>
+            </MonthTemplate>
+            <WeekTemplate>
+                <MudTooltip Text="@GetEventTooltip(context)">
+                    <div class="calendar-event-item" style="width: 100%; height: 100%;">
+                        @context.Text
+                    </div>
+                </MudTooltip>
             </WeekTemplate>
             <DayTemplate>
-                @* <MudTooltip Text="@GetEventTooltip(context)"> *@
-                    <div>@context.Text</div>
-                @* </MudTooltip> *@
+                <MudTooltip Text="@GetEventTooltip(context)">
+                    <div class="calendar-event-item">
+                        @context.Text
+                    </div>
+                </MudTooltip>
             </DayTemplate>
         </MudCalendar>
         </MudStack>
@@ -225,6 +226,19 @@
         }
     }
 
+    private string GetEventTooltip(CalendarItemWrapper wrapper)
+    {
+        if (wrapper.ItemType == CalendarItemType.Event && wrapper.EventItem != null)
+        {
+            return GetEventTooltip(wrapper.EventItem);
+        }
+        else if (wrapper.ItemType == CalendarItemType.Meeting && wrapper.MeetingItem != null)
+        {
+            return GetMeetingTooltip(wrapper.MeetingItem);
+        }
+        return wrapper.Text;
+    }
+
     private string GetEventTooltip(CalendarEventItem item)
     {
         List<string> parts = [];
@@ -257,6 +271,14 @@
         return string.Join("\n", parts);
     }
 
+    private string GetMeetingTooltip(CalendarMeetingItem item)
+    {
+        if (item.MeetingHistoryData == null)
+            return "Team Meeting";
+        
+        return $"Team Meeting\nDate: {item.MeetingHistoryData.MeetingDate:g}";
+    }
+
     private async Task OnItemClicked(CalendarItemWrapper wrapper)
     {
         if (_calendarItems == null)

WebApp/Components/Features/MeetingSchedule/MeetingHistoryDetailDialog.razor

@@ -1,9 +1,5 @@
 @namespace WebApp.Components.Features.MeetingSchedule
-@using Core.Entities
 @using Core.Services
-@using Core.Utility
-@using WebApp.Services
-@using WebApp.Components.Shared.Components
 @using WebApp.Models
 @inject ITeamMeetingHistoryService TeamMeetingHistoryService
 @inject INotesService NotesService

WebApp/wwwroot/app.css

@@ -266,3 +266,32 @@
 .note-color-2 {
     background-color: #f3e5f5;
 }
+
+/* Calendar event item styling */
+.calendar-event-item {
+    background-color: var(--mud-palette-primary);
+    color: var(--mud-palette-primary-text);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    margin: 2px 0;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+}
+
+.calendar-event-item:hover {
+    background-color: var(--mud-palette-primary-darken);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+}
+
+.calendar-event-item:active {
+    background-color: var(--mud-palette-primary-darken);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}