From 840a8edbf1332807355c0dc0eb09cdd329afdb36 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Mon, 26 Jan 2026 21:31:18 -0500
Subject: [PATCH] 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.
---
 .../Components/Features/Calendar/Index.razor  | 50 +++++++++++++------
 .../MeetingHistoryDetailDialog.razor          |  4 --
 WebApp/wwwroot/app.css                        | 29 +++++++++++
 3 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/WebApp/Components/Features/Calendar/Index.razor b/WebApp/Components/Features/Calendar/Index.razor
index e173095..36560d8 100644
--- a/WebApp/Components/Features/Calendar/Index.razor
+++ b/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)
diff --git a/WebApp/Components/Features/MeetingSchedule/MeetingHistoryDetailDialog.razor b/WebApp/Components/Features/MeetingSchedule/MeetingHistoryDetailDialog.razor
index 062e2ee..af94d5c 100644
--- a/WebApp/Components/Features/MeetingSchedule/MeetingHistoryDetailDialog.razor
+++ b/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
diff --git a/WebApp/wwwroot/app.css b/WebApp/wwwroot/app.css
index 667c645..4ca3478 100644
--- a/WebApp/wwwroot/app.css
+++ b/WebApp/wwwroot/app.css
@@ -265,4 +265,33 @@
 
 .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);
 }
\ No newline at end of file