display dates

frontend/src/components/Message.svelte

@@ -1,5 +1,6 @@
 <script>
     import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
+import { getItem } from "../storage";
     import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores";
 
     export let message;
@@ -22,6 +23,7 @@
     .message {
         display: flex;
         align-items: flex-start;
+        align-items: center;
         overflow-x: hidden;
         word-break: break-all;
         padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
@@ -62,12 +64,33 @@
         flex-shrink: 0;
         float: right;
     }
+
+    .date {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--background-color-2);
+        padding-top: 1px;
+        padding-bottom: 1px;
+        padding-left: 0.375rem;
+        padding-right: 0.375rem;
+        border-radius: 9999px;
+        font-size: small;
+        visibility: hidden;
+        margin-left: auto;
+    }
+
+    .message:hover .date {
+        visibility: visible;
+    }
 </style>
 
 <div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
     <span class="author">{ message.author_username }</span>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
-    <button class="icon-button icon-button-auto edit-message" on:click="{ reply }" aria-label="Reply to Message">
+
+    <span class="date">{ new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>
+    <button class="icon-button edit-message" on:click="{ reply }" aria-label="Reply to Message">
         <CornerUpLeftIcon />
     </button>
     {#if userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)}

frontend/src/components/Messages.svelte

@@ -1,5 +1,7 @@
 <script>
     import { afterUpdate } from "svelte";
+import { get_spread_update } from "svelte/internal";
+import { getItem } from "../storage.js";
     import { messagesStoreProvider, smallViewport } from "../stores.js";
     import Message from "./Message.svelte";
 
@@ -69,10 +71,25 @@
         background-color: var(--background-color-1);
         padding-top: var(--space-sm);
     }
+
+    .time-separator {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: var(--radius-norm);
+        padding: var(--space-sm);
+        margin: var(--space-lg);
+        background-color: var(--background-color-2);
+    }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
-    {#each $messages as message (message.id)}
+    {#each $messages as message, i (message.id)}
+        {#if $messages[i - 1] && new Date(parseInt($messages[i - 1].created_at)).toLocaleDateString() !== new Date(parseInt(message.created_at)).toLocaleDateString()}
+            <div class="time-separator">
+                <span>{ new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>
+            </div>
+        {/if}
         <Message message={message} />
     {/each}
     <div bind:this={ scrollAnchor } />

frontend/src/storage.js

@@ -14,6 +14,7 @@ const defaults = {
     "ui:online:processRemotePresenceEvents": true,
     "ui:online:loadMessageHistory": true,
     "ui:online:sendTypingUpdates": true,
+    "ui:locale": "en-US",
 
     "ui:useragent:formFactor": () => {
         return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop";