implement timestamps for chat messages

Author: NielsPilgaard

src/web/Client/Extensions/DateTimeExtensions.cs

@@ -1,30 +1,56 @@
+using System.Globalization;
+
 namespace Jordnaer.Client.Extensions;
 
 public static class DateTimeExtensions
 {
-    public static string GetTimePassed(this DateTime date)
+    public static string DisplayExactTime(this DateTime date) =>
+        $"afsendt {date.ToLocalTime().ToString("d/M yyyy kl. HH:mm", new CultureInfo("da-DK"))}";
+
+    public static string DisplayTimePassed(this DateTime date)
     {
         var timeSpan = DateTime.UtcNow.Subtract(date);
 
-        if (timeSpan.TotalSeconds < 60)
-            return "lige sendt";
-
-        if (timeSpan.TotalMinutes < 60)
-            return $"{Math.Floor(timeSpan.TotalMinutes)} minutter siden";
-
-        if (timeSpan.TotalHours < 24)
-            return $"{Math.Floor(timeSpan.TotalHours)} timer siden";
-        if (timeSpan.TotalDays < 7)
-            return $"{Math.Floor(timeSpan.TotalDays)} dage siden";
+        switch (timeSpan.TotalSeconds)
+        {
+            case < 15:
+                return "lige sendt";
+            case < 60:
+                return $"sendt for {Math.Floor(timeSpan.TotalSeconds)} sekunder siden";
+        }
+
+        switch (timeSpan.TotalMinutes)
+        {
+            case 1:
+                return $"sendt for 1 minut siden";
+            case < 60:
+                return $"sendt for {Math.Floor(timeSpan.TotalMinutes)} minutter siden";
+        }
+
+        switch (timeSpan.TotalHours)
+        {
+            case 1:
+                return $"sendt for 1 time siden";
+            case < 24:
+                return $"sendt for {Math.Floor(timeSpan.TotalHours)} timer siden";
+        }
+
+        switch (timeSpan.TotalDays)
+        {
+            case 1:
+                return "sendt igår";
+            case < 7:
+                return $"sendt for {Math.Floor(timeSpan.TotalDays)} dage siden";
+        }
 
         int weeks = (int)Math.Floor(timeSpan.TotalDays / 7);
 
-        if (weeks is >= 1 and < 2)
-            return "sidste uge";
+        if (weeks is 1)
+            return "sendt i sidste uge";
 
         if (timeSpan.TotalDays < 365)
-            return $"{weeks} uger siden";
+            return $"sendt for {weeks} uger siden";
 
-        return $"afsendt {date.ToLocalTime():g}";
+        return $"afsendt {date.ToLocalTime():dd/MM/yyyy HH:mm:ss}";
     }
 }

src/web/Client/Features/Chat/LargeChatComponent.razor

@@ -55,19 +55,28 @@
                     @if (IsMessageFromSelf(message))
                         {
                             <MudListItem Class="message-from-self">
-                                <MudChip Text="@message.Text"
-                                         Class="chat-chip px-2 py-1" />
-                            </MudListItem>
+
+                                <MudTooltip Placement="Placement.Top" ShowOnClick ShowOnHover="false" Arrow Text="@message.SentUtc.DisplayExactTime()">
+                                <MudTooltip ShowOnHover Arrow Text="@message.SentUtc.DisplayTimePassed()">
+                                    <MudChip Text="@message.Text"
+                                             Class="chat-chip px-2 py-1" />
+                                </MudTooltip>
+                            </MudTooltip>
+                        </MudListItem>
                         }
                         else
                         {
                             <MudListItem>
-                                <MudChip Class="pl-0 pb-0 chat-chip">
-                                    <MudAvatar Size="Size.Medium" Class="mr-2">
-                                        <MudImage Src="@message.Sender.ProfilePictureUrl" loading="lazy" Alt="Avatar" />
-                                    </MudAvatar>
-                                    @message.Text
-                                </MudChip>
+                                <MudTooltip Placement="Placement.Top" ShowOnClick ShowOnHover="false" Arrow Text="@message.SentUtc.DisplayExactTime()">
+                                    <MudTooltip ShowOnHover Arrow Text="@message.SentUtc.DisplayTimePassed()">
+                                    <MudChip Class="pl-0 pb-0 chat-chip">
+                                        <MudAvatar Size="Size.Medium" Class="mr-2">
+                                            <MudImage Src="@message.Sender.ProfilePictureUrl" loading="lazy" Alt="Avatar" />
+                                        </MudAvatar>
+                                        @message.Text
+                                    </MudChip>
+                                </MudTooltip>
+                            </MudTooltip>
                             </MudListItem>
                         }
 

src/web/Client/Features/Chat/SmallChatComponent.razor

@@ -23,7 +23,7 @@ else
         @foreach (var message in _activeChat!.Messages)
         {
             <MudListItem>
-                @message.SentUtc.GetTimePassed(): @message.Text
+                @message.SentUtc.DisplayTimePassed(): @message.Text
             </MudListItem>
         }
     </MudList>