Enhance InteractiveChip component with touch support and control visibility

This commit updates the InteractiveChip component to improve user interaction on touch devices. It introduces touch event handling to toggle control visibility, ensuring that controls are always displayed on mobile devices while allowing hover-based visibility on desktop. The AlwaysShowControls parameter has been added to manage control display behavior, enhancing the overall usability of the component. These changes contribute to a more responsive and accessible user interface.

WebApp/Components/Shared/Components/InteractiveChip.razor

@@ -1,10 +1,14 @@
 @namespace WebApp.Components.Shared.Components
+@using Microsoft.AspNetCore.Components.Web
 
 <MudStack Row="true" Spacing="0" AlignItems="AlignItems.Center" 
           Style="position: relative; display: inline-flex;" 
           Class="@WrapperClass"
           @onmouseenter="@(() => _isHovered = true)"
-          @onmouseleave="@(() => _isHovered = false)">
+          @onmouseleave="@(() => _isHovered = false)"
+          @ontouchstart="@(() => _isTouched = true)"
+          @ontouchend="@(() => { /* Prevent mouse events on touch */ })"
+          @onclick="@HandleClick">
     <MudChip T="string" 
              Size="@Size" 
              Color="@Color" 
@@ -13,10 +17,20 @@
              Class="@Class">
         <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
             @ChildContent
-            @if (_isHovered && ControlContent != null)
+            @if (ControlContent != null)
+            {
+                @* Always show controls on mobile/touch devices *@
+                                <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
+                                    @ControlContent
+                                </MudHidden>
+                                @* Show on hover for desktop devices *@
+                                <MudHidden Breakpoint="Breakpoint.MdAndUp">
+                                    @if (_isHovered || AlwaysShowControls || _isTouched)
                                     {
                                         @ControlContent
                                     }
+                                </MudHidden>
+                            }
         </MudStack>
     </MudChip>
 </MudStack>
@@ -46,5 +60,18 @@
     [Parameter]
     public string? WrapperClass { get; set; }
 
+    [Parameter]
+    public bool AlwaysShowControls { get; set; } = false;
+
     private bool _isHovered = false;
+    private bool _isTouched = false;
+
+    private void HandleClick(MouseEventArgs e)
+    {
+        // On touch devices, toggle controls on tap (for devices with both touch and mouse)
+        if (_isTouched)
+        {
+            _isTouched = !_isTouched;
+        }
+    }
 }