greatly improve performance

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
+frontend-new/
 .env

frontend/public/global.css

@@ -86,7 +86,7 @@ body {
 	line-height: 1.75;
 
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 
 	width: var(--viewportWidth);
 	height: var(--viewportHeight);

frontend/src/components/Message.svelte

@@ -1,10 +1,8 @@
 <script>
     import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
-    import { getItem } from "../storage";
     import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores";
 
     export let message;
-    export let clumped = false;
 
     const reply = () => {
         let replyString = "";
@@ -61,10 +59,6 @@
         margin-right: var(--space-xs);
     }
 
-    .author-hidden {
-        visibility: hidden;
-    }
-
     .edit-message {
         flex-shrink: 0;
         float: right;
@@ -85,8 +79,12 @@
         margin-left: auto;
     }
 
+    .message.clumped .author {
+        visibility: hidden;
+    }
+
     .message:hover .date,
-    .message:hover .author-hidden {
+    .message.clumped:hover .author {
         visibility: visible;
     }
 
@@ -101,15 +99,15 @@
     }
 </style>
 
-<div class="message" class:clumped class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
+<div class="message" class:clumped={ message._clumped } class:pinged={ message._mentions }>
-    <span class="author" class:author-hidden={ clumped }>{ message.author_username }</span>
+    <span class="author">{ 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>
+    <span class="date">{ message._createdAtTimeString }</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)}
+    {#if message._editable}
         <button class="icon-button edit-message" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
             <MoreVerticalIcon />
         </button>

frontend/src/components/Messages.svelte

@@ -83,17 +83,13 @@
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
-    {#each $messages as message, i (message.id)}
+    {#each $messages as message (message.id)}
-        {@const previousMessage = $messages[i - 1]}
+        {#if message._showDateMarkerAbove}
-        {@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(currentDate) }</span>
+                <span>{ new Intl.DateTimeFormat(getItem("ui:locale"), { month: "long", day: "numeric", year: "numeric" }).format(message._createdAtDate) }</span>
             </div>
         {/if}
-        <Message message={message} clumped={ previousDate && (currentDate.getTime() - previousDate.getTime()) <= 100 * 1000 } />
+        <Message message={message} />
     {/each}
     <div bind:this={ scrollAnchor } />
 </div>

frontend/src/stores.js

@@ -141,12 +141,39 @@ class MessageStore extends Store {
         this.didDoInitialLoad = false;
     }
 
+    _recomputeMessages() {
+        this.value = this.value.map((e, i) => this._processMessage(e, this.value[i - 1]));
+    }
+
+    _processMessage(message, previous=null) {
+        message._createdAtDate = new Date(parseInt(message.created_at));
+        message._createdAtTimeString = new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(message._createdAtDate);
+        message._createdAtDateString = message._createdAtDate.toLocaleDateString();
+        message._mentions = false;
+        message._editable = false;
+        message._clumped = false;
+        message._showDateMarkerAbove = false;
+        if (userInfoStore.value && message.content.includes("@" + userInfoStore.value.username)) {
+            message._mentions = true;
+        }
+        if (userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)) {
+            message._editable = true;
+        }
+        if (previous && (message._createdAtDate.getTime() - previous._createdAtDate.getTime()) <= 100 * 1000) {
+            message._clumped = true;
+        }
+        if (previous && (previous._createdAtDateString !== message._createdAtDateString)) {
+            message._showDateMarkerAbove = true;
+        }
+        return message;
+    }
+
     setMessage(id, message) {
         const index = this.value.findIndex(e => e.id === id);
         if (index === -1)
             return;
 
-        this.value[index] = message;
+        this.value[index] = this._processMessage(message, this.value[index - 1]);
 
         this.updated();
     }
@@ -155,13 +182,13 @@ class MessageStore extends Store {
         if (message.optimistic_id) {
             const index = this.value.findIndex(e => e.id === message.optimistic_id);
             if (index !== -1) {
-                this.value[index] = message;
+                this.value[index] = this._processMessage(message, this.value[index - 1]);
                 this.updated();
                 return;
             }
         }
 
-        this.value.push(message);
+        this.value.push(this._processMessage(message, this.value[this.value.length - 1]));
         // only dispatch update if collectOldMessages didn't
         if (!this.collectOldMessages()) {
             this.updated();
@@ -183,7 +210,7 @@ class MessageStore extends Store {
         if (index === -1)
             return;
 
-        this.value[index] = message;
+        this.value[index] = this._processMessage(message, this.value[index - 1]);
 
         this.updated();
     }
@@ -194,6 +221,7 @@ class MessageStore extends Store {
             return;
 
         this.value.splice(index, 1);
+        this._recomputeMessages();
 
         this.updated();
     }
@@ -231,6 +259,11 @@ class MessageStore extends Store {
             if (beforeCommitToStore)
                 beforeCommitToStore(res.json);
             res.json.reverse();
+            for (let i = 0; i < res.json.length; i++) {
+                const message = res.json[i];
+                const previous = res.json[i - 1];
+                res.json[i] = this._processMessage(message, previous);
+            }
             this.value = res.json.concat(this.value);
             this.updated();
         } else {

src/database/templates.ts

@@ -1,3 +1,3 @@
 export const getMessageById = "SELECT messages.id, messages.content, messages.channel_id, messages.created_at, messages.author_id, users.username AS author_username FROM messages JOIN users ON messages.author_id = users.id WHERE messages.id = $1";
-export const getMessagesByChannelFirstPage = "SELECT messages.id, messages.content, messages.channel_id, messages.created_at, messages.author_id, users.username AS author_username FROM messages JOIN users ON messages.author_id = users.id WHERE messages.channel_id = $1 ORDER BY id DESC LIMIT 50";
+export const getMessagesByChannelFirstPage = (limit: number) => `SELECT messages.id, messages.content, messages.channel_id, messages.created_at, messages.author_id, users.username AS author_username FROM messages JOIN users ON messages.author_id = users.id WHERE messages.channel_id = $1 ORDER BY id DESC LIMIT ${limit}`;
-export const getMessagesByChannelPage = "SELECT messages.id, messages.content, messages.channel_id, messages.created_at, messages.author_id, users.username AS author_username FROM messages JOIN users ON messages.author_id = users.id WHERE messages.id < $1 AND messages.channel_id = $2 ORDER BY id DESC LIMIT 50";
+export const getMessagesByChannelPage = (limit: number) => `SELECT messages.id, messages.content, messages.channel_id, messages.created_at, messages.author_id, users.username AS author_username FROM messages JOIN users ON messages.author_id = users.id WHERE messages.id < $1 AND messages.channel_id = $2 ORDER BY id DESC LIMIT ${limit}`;

src/routes/api/v1/channels.ts

@@ -228,22 +228,29 @@ router.get(
     "/:id/messages",
     authenticateRoute(),
     param("id").isNumeric(),
+    param("count").optional().isInt({ min: 10, max: 50 }),
     async (req, res) => {
         const validationErrors = validationResult(req);
         if (!validationErrors.isEmpty()) {
             return res.status(400).json({ ...errors.INVALID_DATA, errors: validationErrors.array() });
         }
 
-        const { before } = req.query;
+        const { before, count } = req.query;
+
+        let limit = typeof count === "string" ? parseInt(count || "25") : 25;
+        if (limit === NaN) {
+            return res.status(400).json({ ...errors.INVALID_DATA });
+        }
+
         const channelId = parseInt(req.params.id);
 
         let finalRows = [];
 
         if (before) {
-            const result = await query(getMessagesByChannelPage, [before, channelId]);
+            const result = await query(getMessagesByChannelPage(limit), [before, channelId]);
             finalRows = result ? result.rows : [];
         } else {
-            const result = await query(getMessagesByChannelFirstPage, [channelId]);
+            const result = await query(getMessagesByChannelFirstPage(limit), [channelId]);
             finalRows = result ? result.rows : [];
         }