show local date on hover

ui/src/components/base/FormattedDate.svelte

@@ -1,13 +1,24 @@
 <script>
+    import tooltip from "@/actions/tooltip";
+    import CommonHelper from "@/utils/CommonHelper";
+
     export let date = "";
 
     $: dateOnly = date ? date.substring(0, 10) : null;
 
     $: timeOnly = date ? date.substring(10, 19) : null;
+
+    const tooltipData = {
+        // generate the tooltip text as getter to speed up the initial load
+        // in case the component is used with large number of items
+        get text() {
+            return CommonHelper.formatToLocalDate(date) + " Local";
+        },
+    };
 </script>
 
 {#if date}
-    <div class="datetime">
+    <div class="datetime" use:tooltip={tooltipData}>
         <div class="date">{dateOnly}</div>
         <div class="time">{timeOnly} UTC</div>
     </div>
@@ -17,8 +28,9 @@
 
 <style>
     .datetime {
-        width: 100%;
-        display: block;
+        display: inline-block;
+        vertical-align: top;
+        white-space: nowrap;
         line-height: var(--smLineHeight);
     }
     .time {

ui/src/components/base/ModelDateIcon.svelte

@@ -0,0 +1,38 @@
+<script>
+    import tooltip from "@/actions/tooltip";
+    import CommonHelper from "@/utils/CommonHelper";
+
+    const detailedDateFormat = "yyyy-MM-dd HH:mm:ss.SSS";
+
+    export let model;
+
+    let tooltipDates = [];
+
+    $: if (model) {
+        refreshTooltipDates();
+    }
+
+    function refreshTooltipDates() {
+        tooltipDates = [];
+
+        if (model.created) {
+            tooltipDates.push(
+                "Created: " + CommonHelper.formatToLocalDate(model.created, detailedDateFormat) + " Local"
+            );
+        }
+
+        if (model.updated) {
+            tooltipDates.push(
+                "Updated: " + CommonHelper.formatToLocalDate(model.updated, detailedDateFormat) + " Local"
+            );
+        }
+    }
+</script>
+
+<i
+    class="ri-calendar-event-line txt-disabled"
+    use:tooltip={{
+        text: tooltipDates.join("\n"),
+        position: "left",
+    }}
+/>