From 10c851c679c964f68f329d543dce6f78eea5dafe Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 3 Sep 2022 21:39:12 +0300
Subject: [PATCH] "clump" messages send from the same author within 100 seconds

---
 frontend/src/components/Message.svelte  | 26 ++++++++++++++++++++-----
 frontend/src/components/Messages.svelte | 15 ++++++++------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 042f869..355f1c5 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -1,9 +1,10 @@
 <script>
     import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
-import { getItem } from "../storage";
+    import { getItem } from "../storage";
     import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores";
 
     export let message;
+    export let clumped = false;
 
     const reply = () => {
         let replyString = "";
@@ -26,7 +27,7 @@ import { getItem } from "../storage";
         align-items: center;
         overflow-x: hidden;
         word-break: break-all;
-        padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
+        padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-normplus);
     }
 
     .message.pinged {
@@ -60,6 +61,10 @@ import { getItem } from "../storage";
         margin-right: var(--space-xs);
     }
 
+    .author-hidden {
+        visibility: hidden;
+    }
+
     .edit-message {
         flex-shrink: 0;
         float: right;
@@ -80,13 +85,24 @@ import { getItem } from "../storage";
         margin-left: auto;
     }
 
-    .message:hover .date {
+    .message:hover .date,
+    .message:hover .author-hidden {
         visibility: visible;
     }
+
+    @media (max-width: 768px) {
+        .message {
+            padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
+        }
+    }
+
+    .message.clumped {
+        padding: 2px 2px 2px var(--space-normplus);
+    }
 </style>
 
-<div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
-    <span class="author">{ message.author_username }</span>
+<div class="message" class:clumped class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
+    <span class="author" class:author-hidden={ clumped }>{ message.author_username }</span>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
 
     <span class="date">{ new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>
diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index 95baaa2..61b11b9 100644
--- a/frontend/src/components/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -1,7 +1,6 @@
 <script>
     import { afterUpdate } from "svelte";
-import { get_spread_update } from "svelte/internal";
-import { getItem } from "../storage.js";
+    import { getItem } from "../storage.js";
     import { messagesStoreProvider, smallViewport } from "../stores.js";
     import Message from "./Message.svelte";
 
@@ -78,19 +77,23 @@ import { getItem } from "../storage.js";
         align-items: center;
         border-radius: var(--radius-norm);
         padding: var(--space-sm);
-        margin: var(--space-lg);
+        margin: var(--space-md);
         background-color: var(--background-color-2);
     }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#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()}
+        {@const previousMessage = $messages[i - 1]}
+        {@const previousDate = previousMessage ? new Date(parseInt(previousMessage.created_at)) : null}
+        {@const currentDate = new Date(parseInt(message.created_at))}
+
+        {#if previousDate && previousDate.toLocaleDateString() !== currentDate.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>
+                <span>{ new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(currentDate) }</span>
             </div>
         {/if}
-        <Message message={message} />
+        <Message message={message} clumped={ previousDate && (currentDate.getTime() - previousDate.getTime()) <= 100 * 1000 } />
     {/each}
     <div bind:this={ scrollAnchor } />
 </div>