Add channel and user list stores

MarkH817 · MarkH817 · commit 8e7e281009bc · 2026-03-12T17:15:14.000-05:00
diff --git a/src/App.vue b/src/App.vue
@@ -2,11 +2,13 @@
   <BApp>
     <h1>You are {{ irc.isConnected ? 'connected' : 'not connected' }}</h1>
 
-    <LoginForm @login="irc.signIn" />
+    <ChatApp v-if="irc.isConnected" />
+    <LoginForm v-else @login="irc.signIn" />
   </BApp>
 </template>
 
 <script setup lang="ts">
+  import ChatApp from '#components/ChatApp.vue';
   import LoginForm from '#components/LoginForm.vue';
   import { useIrcStore } from '#stores';
   import { BApp } from 'bootstrap-vue-next';
diff --git a/src/components/ChatApp.vue b/src/components/ChatApp.vue
@@ -0,0 +1,29 @@
+<template>
+  <DraggableWindow>
+    <template v-slot:main>
+      <Transition name="fade"> </Transition>
+    </template>
+  </DraggableWindow>
+</template>
+
+<script setup lang="ts">
+  import DraggableWindow from './DraggableWindow.vue';
+  // TODO: Re-implement resizing tracking
+</script>
+
+<style scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transform-origin: top center;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 200ms;
+    }
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    transform-origin: top center;
+    /* Moves everything up without interfering with top bar. */
+    transform: scaleY(0);
+  }
+</style>
diff --git a/src/components/DraggableWindow.vue b/src/components/DraggableWindow.vue
@@ -2,7 +2,7 @@
 <template>
   <!-- TODO: Figure out keyboard accessibility... -->
   <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
-  <div ref="draggableContainer" id="draggable-container" @click="internalClick">
+  <div ref="draggableContainer" class="draggable-container" @click="internalClick">
     <div class="handle handle-l" @mousedown="resizeMouseDown($event, 'l')" />
     <div class="handle handle-tl" @mousedown="resizeMouseDown($event, 'tl')" />
     <div class="handle handle-t" @mousedown="resizeMouseDown($event, 't')" />
@@ -11,7 +11,7 @@
     <div class="handle handle-br" @mousedown="resizeMouseDown($event, 'br')" />
     <div class="handle handle-b" @mousedown="resizeMouseDown($event, 'b')" />
     <div class="handle handle-bl" @mousedown="resizeMouseDown($event, 'bl')" />
-    <div id="draggable-header" @mousedown="dragMouseDown">
+    <div class="draggable-header" @mousedown="dragMouseDown">
       <slot name="header" />
     </div>
     <slot name="main" />
@@ -21,8 +21,8 @@
 
 <script lang="ts" setup>
   import gsap from 'gsap';
-  import throttle from 'lodash/throttle';
-  import { computed, onMounted, ref, watch } from 'vue';
+  import { throttle } from 'lodash';
+  import { computed, onMounted, reactive, ref, watch } from 'vue';
 
   const props = defineProps({
     enabled: {
@@ -40,19 +40,19 @@
     (event: 'closeDragElement'): void;
   }>();
 
-  const positions = {
+  const positions = reactive({
     clientX: 0,
     clientY: 0,
     movementX: 0,
     movementY: 0,
-  };
-  const resizePositions = {
+  });
+  const resizePositions = reactive({
     clientX: 0,
     clientY: 0,
     movementX: 0,
     movementY: 0,
     dir: '',
-  };
+  });
 
   const draggableContainer = ref<HTMLDivElement>();
   /**
@@ -300,12 +300,12 @@
   defineExpose({ minimize });
 </script>
 
-<style>
-  #draggable-container {
+<style scoped>
+  .draggable-container {
     position: absolute;
     z-index: 9;
   }
-  #draggable-header {
+  .draggable-header {
     z-index: 10;
   }
 
diff --git a/src/constants/channels.ts b/src/constants/channels.ts
@@ -0,0 +1,8 @@
+export const DEFAULT_CHANNELS = ['#general', '#off-topic', '#help', '#labs', '#test'];
+
+export const CHANNEL_DESCRIPTIONS: Record<string, string> = {
+  '#general': 'General chat',
+  '#off-topic': 'Off-topic chat',
+  '#help': 'Help requests',
+  '#labs': 'Discussion related to labs',
+};
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,2 +1,4 @@
+export * from './channels';
 export * from './colors';
 export * from './emoticons';
+export * from './users';
diff --git a/src/constants/users.ts b/src/constants/users.ts
@@ -0,0 +1,9 @@
+import type { User } from '#models';
+
+export const ANONYMOUS_USER: User = {
+  username: 'anonymous',
+  uid: '0',
+  nicks: ['anonymous^0'],
+  away: false,
+  awayReason: '',
+};
diff --git a/src/models/channel.ts b/src/models/channel.ts
@@ -0,0 +1,14 @@
+import type { BanStatus } from './ban-status';
+import type { Message } from './message';
+
+export interface Channel {
+  name: string;
+  messages: Message[];
+  usersTyping: string[];
+  banStatus: BanStatus;
+  notificationsEnabled: boolean;
+  /** User is mentioned. Cleared when channel is read. */
+  hasMention: boolean;
+  /** User or keyword mentioned. Cleared when channel is read. */
+  hasNotification: boolean;
+}
diff --git a/src/models/index.ts b/src/models/index.ts
@@ -1,4 +1,5 @@
 export * from './ban';
 export * from './ban-status';
+export * from './channel';
 export * from './message';
 export * from './user';
diff --git a/src/models/message.ts b/src/models/message.ts
@@ -1,11 +1,13 @@
 import type { User } from './user';
 
+export type MessageType = 'message' | 'action' | 'system';
+
 export interface Message {
   time: Date;
   starred: boolean;
   message: string;
   target: string;
   user: User;
-  isAction: boolean;
+  type: MessageType;
   tags: Record<string, string>;
 }
diff --git a/src/models/user.ts b/src/models/user.ts
@@ -1,5 +1,6 @@
 export interface User {
   username: string;
+  /** User ID */
   uid: string;
   nicks: string[];
   away: boolean;
diff --git a/src/stores/channel.ts b/src/stores/channel.ts
@@ -0,0 +1,177 @@
+import type { Channel, Message } from '#models';
+import { parseNick } from '#utils';
+import { defineStore } from 'pinia';
+import { computed, reactive, ref, watch } from 'vue';
+import useIrcStore from './irc';
+import { useWindowFocus } from '@vueuse/core';
+import useNotificationsStore from './notifications';
+import log from 'loglevel';
+import useUserListStore from './user-list';
+
+const useChannelStore = defineStore('channel', () => {
+  const irc = useIrcStore();
+  const notifications = useNotificationsStore();
+  const userList = useUserListStore();
+  const isFocusedWindow = useWindowFocus();
+  const channelMap = reactive(new Map<string, Channel>());
+  const channelList = computed(() => Array.from(channelMap.keys()));
+
+  /**
+   * Gets channel from list.
+   * Adds channel if not previously tracked.
+   */
+  function getChannel(channelName: string) {
+    if (!channelMap.has(channelName)) {
+      // Add new channel if not found
+      channelMap.set(channelName, {
+        name: channelName,
+        banStatus: 'normal',
+        messages: [],
+        usersTyping: [],
+        notificationsEnabled: true,
+        hasMention: false,
+        hasNotification: false,
+      });
+    }
+    return channelMap.get(channelName)!;
+  }
+
+  const activeTarget = ref('#general');
+  const activeChannel = computed(() => getChannel(activeTarget.value));
+
+  function changeActiveChannel(channel: string) {
+    activeTarget.value = channel;
+  }
+  function joinChannel(channel: string) {
+    if (!irc.client) {
+      return;
+    }
+    const newChannel = irc.client.channel(channel);
+    newChannel.join();
+    newChannel.updateUsers();
+    getChannel(channel);
+  }
+  function leaveChannel(channel: string) {
+    if (!irc.client) {
+      return;
+    }
+
+    irc.client.part(channel);
+    channelMap.delete(channel);
+  }
+
+  async function addMessageNotification(channelName: string, message: Message) {
+    const channel = getChannel(channelName);
+    channel.hasNotification = true;
+
+    try {
+      const notification = await notifications.sendNotification(
+        `New message in ${channel.name}`,
+        `${message.user.username}: ${message.message}`,
+        `new-message-${message.target}`,
+      );
+      notification?.addEventListener('click', () => {
+        // View channel if notification is clicked
+        changeActiveChannel(channel.name);
+      });
+    } catch (err) {
+      log.error('Notification error:', err);
+    }
+  }
+
+  function markAsRead(channelName: string) {
+    const channel = getChannel(channelName);
+    channel.hasMention = false;
+    channel.hasNotification = false;
+  }
+
+  function highlightKeywords(message: string): string {
+    if (notifications.notificationKeywords.length === 0) {
+      return message;
+    }
+
+    let highlighted = message;
+    for (const keyword of notifications.notificationKeywords) {
+      highlighted = highlighted.replace(` ${keyword}`, ` |${keyword}|`);
+    }
+    return highlighted;
+  }
+
+  // Track typing users
+  watch(
+    () => irc.client,
+    (client) => {
+      if (!client) {
+        return;
+      }
+
+      client.on('message', ({ message, nick, type, target, tags }) => {
+        const username = parseNick(nick);
+        const isPrivateMessage =
+          type === 'privmsg' &&
+          !target.startsWith('#') &&
+          irc.currentUser.username === parseNick(target);
+        const channel = isPrivateMessage ? getChannel(username) : getChannel(target);
+
+        // TODO: Use `typing` client tag if `message-tags` capability is available
+        // Handling typing status updates
+        if (type === 'action' && message === 'is typing...') {
+          if (!channel.usersTyping.includes(username)) {
+            channel.usersTyping.push(username);
+          }
+          return;
+        } else if (type === 'action' && message === 'is not typing...') {
+          channel.usersTyping = channel.usersTyping.filter((u) => u !== username);
+          return;
+        }
+
+        const user = userList.getUser(nick);
+        const highlightedMessage = highlightKeywords(message);
+        const newMessage: Message = {
+          // TODO: Read from server time, if available
+          time: new Date(),
+          starred: false,
+          message: highlightedMessage,
+          target,
+          user,
+          type: 'message',
+          tags: tags ?? {},
+        };
+        // TODO: Cap messages per channel (50)
+        channel.messages.push(newMessage);
+
+        // If the user has allows for notifications on channel or keywords
+        // Display/send notifications if user is in another channel or has browser blurred
+        // Otherwise mark channel as read if user is actively viewing the channel
+        const isOtherChannel = channel.name !== activeTarget.value;
+        if (!isFocusedWindow || isOtherChannel) {
+          if (channel.notificationsEnabled) {
+            addMessageNotification(channel.name, newMessage);
+
+            if (
+              message.toLocaleLowerCase().includes(irc.currentUser.username.toLocaleLowerCase())
+            ) {
+              channel.hasMention = true;
+            }
+          } else if (
+            notifications.notificationKeywords.some((keyword) => message.includes(keyword))
+          ) {
+            addMessageNotification(channel.name, newMessage);
+          }
+        } else {
+          markAsRead(channel.name);
+        }
+      });
+    },
+  );
+
+  return {
+    channelList,
+    activeChannel,
+    changeActiveChannel,
+    joinChannel,
+    leaveChannel,
+  };
+});
+
+export default useChannelStore;
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia';
+
+const useChatStore = defineStore('chat', () => {
+  // TODO: Add chat input handling for commands
+  // TODO: Move `/help` messages to other file
+  // TODO: Username color encoding
+  return {};
+});
+
+export default useChatStore;
diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -1,3 +1,6 @@
-export { default as useSettingsStore } from './settings';
-export { default as useNotificationsStore } from './notifications';
+export { default as useChannelStore } from './channel';
+export { default as useChatStore } from './chat';
 export { default as useIrcStore } from './irc';
+export { default as useNotificationsStore } from './notifications';
+export { default as useSettingsStore } from './settings';
+export { default as useUserListStore } from './user-list';
diff --git a/src/stores/irc.ts b/src/stores/irc.ts
diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
diff --git a/src/stores/user-list.ts b/src/stores/user-list.ts
