From 4330b5382414fc814224a7e1c8dde58f725705e4 Mon Sep 17 00:00:00 2001
From: troogs <git@beging.de>
Date: Tue, 21 Apr 2026 22:24:58 +0200
Subject: [PATCH] Enhance InteractionRow and ProspectContainer: refactor layout
 to use grid, improve styling, and add interaction handling

---
 .../Controls/InteractionRow.razor             | 91 +++++++++++--------
 .../Controls/InteractionRow.razor.cs          |  9 ++
 .../Controls/ProspectContainer.razor          | 21 +----
 .../Controls/ProspectContainer.razor.scss     | 15 +++
 4 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/FoodsharingSiegen.Server/Controls/InteractionRow.razor b/FoodsharingSiegen.Server/Controls/InteractionRow.razor
index 8f3d7f9..76a2026 100644
--- a/FoodsharingSiegen.Server/Controls/InteractionRow.razor
+++ b/FoodsharingSiegen.Server/Controls/InteractionRow.razor
@@ -5,52 +5,63 @@
 @inherits FsBase
 
 @{
+    var colorClass = "";
+    if(Done) colorClass = "interaction--color-done";
+
     var rowClass = "";
     if (Done) rowClass += " done";
     if (NotNeeded) rowClass += " notneeded";
     if (Alert) rowClass += " fs-alert";
 }
 
-<tr class="@rowClass" style="border-top: 5px solid transparent;">
-    <th class="text-center align-top pr-2">
-        <i class="@IconClass"></i>
-    </th>
-    <th class="pr-2 align-top" style="white-space: nowrap;">@Type.Translate(AppSettings):</th>
-    <td class="align-top d-flex flex-column">
-        @if (Interactions.Count > 0)
-        {
-            foreach (var interaction in Interactions)
+@if(!AllowInteraction || Prospect is {Complete: true })
+{
+    <Button Size="Size.Small" Disabled="true">
+        <i class="@ButtonIconClass"></i>
+    </Button>
+} 
+else
+{
+    @if(Interactions.Count == 0 || Multiple)
+    {
+        if (Multiple) ButtonIconClass = "fa-solid fa-plus";
+        <Button Size="Size.Small" Clicked="@(async () => { if (AddClick != null) await AddClick(Type); })"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
+    } else {
+        <Button Size="Size.Small" Clicked="@(async () => { await RemoveFirstAsync(Type); })"><i class="fa-solid fa-times" style="color: rgb(153, 0, 0);"></i></Button>
+    }
+}
+
+<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+    <div class="@colorClass" style="display: inline-block;"><i class="@IconClass"></i> @Type.Translate(AppSettings)</div>
+    
+    @if(Interactions.Count > 0)
+    {
+        <span title="@Interactions.First().User.Memo"> (@Interactions.First().User.Name</span> <span>@Interactions.First().Date.ToShortDateString())</span>
+    }
+</div>
+
+@if(Multiple && Interactions.Count > 0)
+{
+    
+    @foreach (var interaction in Interactions)
+    {
+        <div class="d-flex justify-content-end">
+            @if ((Prospect is not { Complete: true } || interaction.Type == InteractionType.Complete) && AllowInteraction)
             {
-                <div style="padding-bottom: .5rem;">
-                    <div style="white-space: nowrap;">
-                        <span title="@interaction.User.Memo">@interaction.User.Name</span> (@interaction.Date.ToShortDateString())
-
-                        @if ((Prospect is not { Complete: true } || interaction.Type == InteractionType.Complete) && AllowInteraction)
-                        {
-                            <span>&nbsp;<a href=""><i class="fa-solid fa-square-xmark" @onclick="async () => { if (RemoveClick != null) await RemoveClick.Invoke(interaction.Id); }" @onclick:preventDefault></i></a></span>
-                        }
-                    </div>
-                    
-                    <div>
-                        @FeedbackBuilder(interaction)
-                    </div>
-                    
-                    <div>
-                        @if (!string.IsNullOrWhiteSpace(interaction.FeedbackInfo))
-                        {
-                            <span>(<i>@interaction.FeedbackInfo</i>)</span>
-                        }
-                    </div>
-                </div>
+                <a style="display: inline-block;"" href=""><i class="fa-solid fa-square-xmark" @onclick="async () => { if (RemoveClick != null) await RemoveClick.Invoke(interaction.Id); }" @onclick:preventDefault></i></a>
+            } else {
+                <span>&bull;</span>
             }
-        }
-
-        @if (Prospect is not {Complete: true } && (Interactions.Count == 0 || Multiple) && AllowInteraction)
-        {
-            if (Multiple) ButtonIconClass = "fa-solid fa-plus";
-            <div class="m-auto">
-                <Button Size="Size.Small" Clicked="@(async () => { if (AddClick != null) await AddClick(Type); })"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
+        </div>
+        <div>
+            <div>
+                <span title="@interaction.User.Memo">@interaction.User.Name (@interaction.Date.ToShortDateString())</span>
+                @if (!string.IsNullOrWhiteSpace(interaction.FeedbackInfo))
+                {
+                    <span>(<i>@interaction.FeedbackInfo</i>)</span>
+                }
             </div>
-        }
-    </td>
-</tr>
\ No newline at end of file
+            @FeedbackBuilder(interaction)
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs b/FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs
index b144d37..e7d6f44 100644
--- a/FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs
+++ b/FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs
@@ -94,6 +94,15 @@ namespace FoodsharingSiegen.Server.Controls
 
         #endregion
 
+        private async Task RemoveFirstAsync(InteractionType type)
+        {
+            if (Prospect != null && RemoveClick != null)
+            {
+                var interaction = Interactions.FirstOrDefault(x => x.Type == type);
+                if (interaction != null) await RemoveClick(interaction.Id);
+            }
+        }
+
         private MarkupString FeedbackBuilder(Interaction interaction)
         {
             var infoList = new List<string>();
diff --git a/FoodsharingSiegen.Server/Controls/ProspectContainer.razor b/FoodsharingSiegen.Server/Controls/ProspectContainer.razor
index 77c23e6..b644c87 100644
--- a/FoodsharingSiegen.Server/Controls/ProspectContainer.razor
+++ b/FoodsharingSiegen.Server/Controls/ProspectContainer.razor
@@ -51,8 +51,7 @@
         </Alert>
     }
 
-    <table class="flex-column" style="width: 100%;">
-
+    <div class="interaction-grid mb-3">
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.Welcome"
@@ -63,12 +62,6 @@
             IconClass="fa-solid fa-handshake-simple">
         </InteractionRow>
 
-        <tr>
-            <td colspan="3">
-                <hr style="margin: 10px 0;">
-            </td>
-        </tr>
-
         @if (!AppSettings.DisableStepIn)
         {
             <InteractionRow
@@ -94,12 +87,6 @@
             IconClass="fa-solid fa-basket-shopping">
         </InteractionRow>
 
-        <tr>
-            <td colspan="3">
-                <hr style="margin: 10px 0;">
-            </td>
-        </tr>
-
         <InteractionRow
             Prospect="Prospect"
             Type="InteractionType.ReleasedForVerification"
@@ -145,13 +132,13 @@
                 IconClass="fa-solid fa-user-check">
             </InteractionRow>
         }
-
-    </table>
+    </div>
     
     <div class="flex-grow-1"></div>
 
     @if(Prospect?.Images?.Count > 0)
-    {<div class="text-center mt-3">
+    {
+        <div class="text-center mt-3">
         <Badge Color="Color.Info" Style="margin-bottom: 0.5rem; cursor: pointer;" @onclick="OpenVerificationDialogAsync"><i class="fa-solid fa-address-card"></i>-Prüfung möglich</Badge></div>
     }      
 
diff --git a/FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss b/FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss
index 36b8a85..c631c5f 100644
--- a/FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss
+++ b/FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss
@@ -54,4 +54,19 @@ i.link {
     &:hover {
         color: #000;
     }
+}
+
+.interaction-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: .5rem;
+
+    ::deep .interaction {
+        &--color {
+            &-done{
+                color: #64ae24;
+            }
+        }
+    }
 }
\ No newline at end of file