From 5f2d7b5b31283fd6d85e8b2a355119a3194399b9 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Thu, 15 Jan 2026 22:47:55 -0500
Subject: [PATCH] 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.
---
 .../Shared/Components/InteractiveChip.razor   | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/WebApp/Components/Shared/Components/InteractiveChip.razor b/WebApp/Components/Shared/Components/InteractiveChip.razor
index 3855a6f..35a2523 100644
--- a/WebApp/Components/Shared/Components/InteractiveChip.razor
+++ b/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)
             {
-                @ControlContent
-            }
+                @* 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;
+        }
+    }
 }
\ No newline at end of file