Add initial channel message components

- Update useMessageGroups type

Author: MarkH817

src/components/channel/ChannelMessages.vue

@@ -0,0 +1,16 @@
+<template>
+  <MessageGroup v-for="group in messageGroups" :key="group.id" :message-group="group" />
+</template>
+
+<script setup lang="ts">
+  import { useMessageGroups } from '#composables/useMessageGroups.ts';
+  import { useChannelStore } from '#stores';
+  import { computed } from 'vue';
+  import MessageGroup from './MessageGroup.vue';
+
+  const { activeChannel } = useChannelStore();
+  const messages = computed(() => activeChannel.messages);
+  const { messageGroups } = useMessageGroups(messages);
+</script>
+
+<style scoped></style>

src/components/channel/MessageGroup.vue

@@ -0,0 +1,13 @@
+<template>
+  <UsernameDisplay :nick="messageGroup.nick" />
+  <MessageGroupItem v-for="message in messageGroup.messages" :key="message.id" :message="message" />
+</template>
+
+<script setup lang="ts">
+  import UsernameDisplay from '#components/user/UsernameDisplay.vue';
+  import type { MessageGroup } from '#composables/useMessageGroups.ts';
+  import MessageGroupItem from './MessageGroupItem.vue';
+  defineProps<{ messageGroup: MessageGroup }>();
+</script>
+
+<style scoped></style>

src/components/channel/MessageGroupItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <time>[{{ formatTime(message.time) }}]</time>
+  <p>{{ formattedMessage }}</p>
+</template>
+
+<script setup lang="ts">
+  import type { Message } from '#models';
+  import { formatTime } from '#utils';
+  import { computed } from 'vue';
+
+  const props = defineProps<{ message: Message }>();
+  // TODO: Use markdown parser for `privmsg` entries
+  const formattedMessage = computed(() => props.message.message);
+</script>
+
+<style scoped></style>

src/components/user/OnlineUsers.vue

@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li v-for="user in connectedUsers" :key="user.username">
-      <UsernameDisplay :username="user.username" />
+      <UsernameDisplay :nick="user.username" />
     </li>
   </ul>
 </template>

src/components/user/UsernameDisplay.vue

@@ -43,15 +43,13 @@
   import { BPopover } from 'bootstrap-vue-next';
   import { computed } from 'vue';
 
-  const props = defineProps<{
-    username: string;
-  }>();
+  const props = defineProps<{ nick: string }>();
   const userList = useUserListStore();
-  const user = computed(() => userList.getUser(props.username));
+  const user = computed(() => userList.getUser(props.nick));
   const usernameColor = computed(() => user.value.color);
 
   function onShow() {
-    userList.loadProfile(props.username);
+    userList.loadProfile(props.nick);
   }
 </script>
 

src/composables/useMessageGroups.ts

@@ -1,6 +1,6 @@
 import type { Message } from '#models';
 import { parseNick } from '#utils';
-import { computed, type Ref } from 'vue';
+import { computed, toValue, type MaybeRefOrGetter, type DeepReadonly } from 'vue';
 
 export interface MessageGroup extends Pick<Message, 'nick' | 'type'> {
   id: string;
@@ -11,10 +11,10 @@ export interface MessageGroup extends Pick<Message, 'nick' | 'type'> {
  * Group consecutive messages from same user.
  * Does not group non-`privmsg` entries.
  */
-export function useMessageGroups(messages: Ref<Message[]>) {
+export function useMessageGroups(messages: MaybeRefOrGetter<Message[] | DeepReadonly<Message[]>>) {
   const messageGroups = computed(() => {
     const groups: MessageGroup[] = [];
-    for (const message of messages.value) {
+    for (const message of toValue(messages)) {
       const prevGroup = groups.at(-1) ?? null;
 
       if (