Move channel auto-join logic to store

- Save joined channels to local storage between sessions
- Request chat history for each channel upon joining / reconnecting client
- Optimize message grouping to incrementally update between message updates
- Add timestamp popover for full date time

Author: MarkH817

src/commands/handlers/channel.ts

@@ -8,6 +8,7 @@ export const join: CommandHandler = {
   execute({ currentChannel, args, stores }) {
     if (args.length === 0) {
       stores.channel.addSystemMessage(currentChannel, 'Select a channel using /join <channel>');
+      return;
     }
 
     const inputChannel = args[0];

src/commands/handlers/operator.ts

@@ -129,6 +129,7 @@ export const changenick: TODO = null;
 
 export const execute: CommandHandler = {
   name: 'execute',
+  aliases: ['exec'],
   description:
     'Allow operator to send an IRC command directly through the websocket. For using commands not yet available in the client.',
   usage: '/execute <IRC commands>',

src/components/ChatApp.vue

@@ -15,29 +15,14 @@
 </template>
 
 <script setup lang="ts">
-  import { AUTO_JOIN_CHANNELS } from '#constants';
-  import { useChannelStore, useIrcStore, useSettingsStore } from '#stores';
-  import { ref, watch } from 'vue';
+  import { useChannelStore, useSettingsStore } from '#stores';
   import ChannelMessages from './channel/ChannelMessages.vue';
   import DraggableWindow from './layout/DraggableWindow.vue';
   import ChatInput from './chat/ChatInput.vue';
   // TODO: Re-implement resizing tracking
 
-  const irc = useIrcStore();
   const channel = useChannelStore();
   const settings = useSettingsStore();
-  const joined = ref(false);
-
-  watch([joined, () => irc.connectionStatus], ([hasJoined, connectionStatus]) => {
-    if (hasJoined || connectionStatus !== 'connected') {
-      return;
-    }
-
-    for (const channelName of AUTO_JOIN_CHANNELS) {
-      channel.joinChannel(channelName);
-    }
-    channel.goToChannel(AUTO_JOIN_CHANNELS[0]);
-  });
 </script>
 
 <style scoped>

src/components/channel/MessageGroupItem.vue

@@ -21,15 +21,22 @@
       v-html="formattedMessage"
     />
 
-    <time v-if="message.type !== 'notice'" class="message-timestamp flex-shrink-0"
-      >[{{ formatTime(message.time) }}]</time
-    >
+    <BPopover :delay="{ show: 250, hide: 100 }">
+      <template #target>
+        <time v-if="message.type !== 'notice'" class="message-timestamp flex-shrink-0"
+          >[{{ formatTime(message.time) }}]</time
+        >
+      </template>
+
+      {{ formateDateTime(message.time) }}
+    </BPopover>
   </div>
 </template>
 
 <script setup lang="ts">
   import type { Message } from '#models';
-  import { formatTime, md } from '#utils';
+  import { formateDateTime, formatTime, md } from '#utils';
+  import { BPopover } from 'bootstrap-vue-next';
   import { computed } from 'vue';
 
   const props = defineProps<{ message: Message }>();

src/composables/useMessageGroups.ts

@@ -1,39 +1,99 @@
 import type { Message } from '#models';
-import { computed, toValue, type MaybeRefOrGetter, type DeepReadonly } from 'vue';
+import { ref, toValue, watch, type DeepReadonly, type MaybeRefOrGetter } from 'vue';
 
 export interface MessageGroup extends Pick<Message, 'nick' | 'username' | 'type'> {
   id: string;
   messages: Message[];
 }
 
 /**
- * Group consecutive messages from same user.
+ * Group consecutive messages from same user incrementally.
  * Does not group `notice` messages.
  */
 export function useMessageGroups(messages: MaybeRefOrGetter<Message[] | DeepReadonly<Message[]>>) {
-  const messageGroups = computed(() => {
-    const groups: MessageGroup[] = [];
-    for (const message of toValue(messages)) {
-      const prevGroup = groups.at(-1) ?? null;
-
-      if (
-        !prevGroup ||
-        prevGroup.type !== message.type ||
-        message.type === 'notice' ||
-        prevGroup.username !== message.username
-      ) {
-        groups.push({
-          id: `group-${message.username}-${message.time}`,
-          type: message.type,
-          messages: [message],
-          nick: message.nick,
-          username: message.username,
-        });
+  const messageGroups = ref<MessageGroup[]>([]);
+
+  watch(
+    () => toValue(messages),
+    (allMessages) => {
+      if (allMessages.length === 0) {
+        messageGroups.value = [];
+        return;
+      }
+
+      // Remove messages from start of list
+      while (messageGroups.value.length > 0) {
+        const firstGroup = messageGroups.value[0];
+        const firstMessageInGroup = firstGroup.messages[0];
+        const firstMessageInSource = allMessages[0];
+
+        if (firstMessageInGroup.id === firstMessageInSource.id) {
+          // Synchronized the start of the messages
+          break;
+        }
+
+        // Otherwise, remove expired message from group
+        firstGroup.messages.shift();
+        if (firstGroup.messages.length === 0) {
+          // Last message of group was removed, so group must be removed
+          messageGroups.value.shift();
+        }
+      }
+
+      // Remove messages from middle of list
+      const totalInGroups = messageGroups.value.reduce(
+        (total, group) => total + group.messages.length,
+        0,
+      );
+      if (totalInGroups > allMessages.length) {
+        const messageIds = new Set(allMessages.map((m) => m.id));
+        for (let index = messageGroups.value.length - 1; index >= 0; index--) {
+          const group = messageGroups.value[index];
+          // Remove messages that are no longer present
+          group.messages = group.messages.filter((m) => messageIds.has(m.id));
+          if (group.messages.length === 0) {
+            // Remove group if there are no more messages
+            messageGroups.value.splice(index, 1);
+          }
+        }
+      }
+
+      // Find starting point for adding new messages
+      let newMessages: readonly Message[] = [];
+      const lastSurvivingGroup = messageGroups.value.at(-1);
+      if (!lastSurvivingGroup) {
+        newMessages = allMessages;
       } else {
-        prevGroup.messages.push(message);
+        // Safe to assume that the message exists here since empty groups were removed earlier
+        const safeLastMessageId = lastSurvivingGroup.messages.at(-1)!.id;
+        const lastMessagePosition = allMessages.findIndex((m) => m.id === safeLastMessageId);
+        newMessages =
+          lastMessagePosition === -1 ? allMessages : allMessages.slice(lastMessagePosition + 1);
+      }
+
+      // Add new messages
+      for (const message of newMessages) {
+        const prevGroup = messageGroups.value.at(-1) ?? null;
+
+        if (
+          !prevGroup ||
+          prevGroup.type !== message.type ||
+          message.type === 'notice' ||
+          prevGroup.username !== message.username
+        ) {
+          messageGroups.value.push({
+            id: `group-${message.username}-${message.id}`,
+            type: message.type,
+            messages: [message],
+            nick: message.nick,
+            username: message.username,
+          });
+        } else {
+          prevGroup.messages.push(message);
+        }
       }
-    }
-    return groups;
-  });
+    },
+    { deep: 1, immediate: true },
+  );
   return { messageGroups };
 }

src/constants/channels.ts

@@ -1,6 +1,12 @@
-export const AUTO_JOIN_CHANNELS = ['#test'];
+export const AUTO_JOIN_CHANNELS = new Set<string>(['#test']);
 
-export const DEFAULT_CHANNELS = ['#general', '#off-topic', '#help', '#labs', '#test'];
+export const DEFAULT_CHANNELS = new Set<string>([
+  '#general',
+  '#off-topic',
+  '#help',
+  '#labs',
+  '#test',
+]);
 
 export const CHANNEL_DESCRIPTIONS: Record<string, string> = {
   '#general': 'General chat',

src/stores/channel.ts

@@ -1,6 +1,7 @@
+import { AUTO_JOIN_CHANNELS } from '#constants';
 import type { Channel, Message, MessageType } from '#models';
 import { parseNick, sortedInsert } from '#utils';
-import { useWindowFocus } from '@vueuse/core';
+import { useLocalStorage, useWindowFocus } from '@vueuse/core';
 import log from 'loglevel';
 import { defineStore } from 'pinia';
 import { computed, reactive, readonly, ref, watch } from 'vue';
@@ -17,6 +18,7 @@ const useChannelStore = defineStore('channel', () => {
   const isFocusedWindow = useWindowFocus();
   const channelMap = reactive(new Map<string, Channel>());
   const channelList = computed(() => Array.from(channelMap.keys()));
+  const joinedChannels = useLocalStorage<Set<string>>('chat_joinedChannels', AUTO_JOIN_CHANNELS);
 
   /**
    * Gets channel from list.
@@ -53,12 +55,21 @@ const useChannelStore = defineStore('channel', () => {
   });
   const currentMessages = computed(() => currentChannel.value?.messages ?? []);
 
-  function joinChannel(channel: string) {
+  function requestChatHistory(channelOrUsername: string) {
+    if (!irc.client || !channelOrUsername.startsWith('#')) {
+      // Skip requests for user channels
+      return;
+    }
+    irc.client.raw(`CHATHISTORY LATEST ${channelOrUsername} * ${MAX_MESSAGES_PER_CHANNEL}`);
+  }
+
+  function joinChannel(channel: string, options: Partial<{ force: boolean }> = { force: false }) {
     if (!irc.client) {
       return;
     }
 
     if (
+      !options.force &&
       channelList.value.some(
         (c) => channel.localeCompare(c, undefined, { sensitivity: 'accent' }) === 0,
       )
@@ -68,15 +79,32 @@ const useChannelStore = defineStore('channel', () => {
       return;
     }
 
+    joinedChannels.value.add(channel);
     const isIRCChannel = channel.startsWith('#');
     createOrGetChannel(channel);
     if (isIRCChannel) {
       const newChannel = irc.client.channel(channel);
       newChannel.updateUsers();
+      requestChatHistory(channel);
     }
     goToChannel(channel);
   }
 
+  /**
+   * Re-JOIN channels on application start or on client reconnection
+   */
+  function rejoinChannels() {
+    if (joinedChannels.value.size === 0) {
+      return;
+    }
+
+    const channels = Array.from(joinedChannels.value);
+    for (const channel of channels) {
+      joinChannel(channel, { force: true });
+    }
+    goToChannel(channels[0]);
+  }
+
   function leaveChannel(channel: string) {
     if (!irc.client) {
       return;
@@ -100,6 +128,7 @@ const useChannelStore = defineStore('channel', () => {
       }
     }
 
+    joinedChannels.value.delete(channel);
     channelMap.delete(channel);
     if (isIRCChannel) {
       irc.client.part(channel);
@@ -261,18 +290,16 @@ const useChannelStore = defineStore('channel', () => {
           const isMe = username === irc.currentUser.username;
           if (isMe) {
             // Check if incoming message from self is the one sent recently
-            const pendingIndex = channel.messages.findLastIndex(
+            const pendingMessage = channel.messages.findLast(
               (m) =>
                 m.status === 'pending' &&
                 (m.pendingId === event.tags.label || m.message === event.message),
             );
 
-            if (pendingIndex !== -1) {
+            if (pendingMessage) {
               // Mark incoming message as successful sent if it was pending
-              newMessage.status = 'sent';
-              newMessage.pendingId = channel.messages[pendingIndex].pendingId;
-              // Remove pending version so that incoming message is inserted correctly
-              channel.messages.splice(pendingIndex, 1);
+              Object.assign(pendingMessage, newMessage, { status: 'sent' });
+              return;
             }
           }
 
@@ -308,7 +335,13 @@ const useChannelStore = defineStore('channel', () => {
           } else {
             markAsRead(channel.name);
           }
+        })
+        .on('connected', () => {
+          // After successful client reconnection
+          rejoinChannels();
         });
+
+      rejoinChannels();
     },
   );
 

src/utils/date.ts

@@ -5,3 +5,7 @@ export function formatDate(date: number | Date): string {
 export function formatTime(date: number | Date): string {
   return new Intl.DateTimeFormat('en-US', { timeStyle: 'short' }).format(date);
 }
+
+export function formateDateTime(date: number | Date): string {
+  return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+}