feat: Implement group chats

Author: sdwck

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "YouTube Direct Messages",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "manifest_version": 3,
   "description": "A Chrome extension to send direct messages on YouTube.",
   "permissions": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-dm-nl",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "A Chrome extension to enable direct messaging functionality on YouTube.",
   "private": true,
   "scripts": {

src/core/panelController.ts

@@ -1,5 +1,5 @@
 import { authService } from '../services/authService';
-import { stateService, ViewType, IActiveChatContext } from '../services/stateService';
+import { stateService, ViewType } from '../services/stateService';
 import { deeplinkService } from '../services/deeplinkService';
 import { notificationService } from '../services/notificationService';
 import { createToggleButton } from '../shared/components/toggleButton';
@@ -10,13 +10,17 @@ import { LoginView } from '../features/login/loginView';
 import { DialogsController } from '../features/dialogs/dialogsController';
 import { ChatController } from '../features/chat/chatController';
 import { SettingsController } from '../features/settings/settingsController';
+import { Chat } from '../types/chat';
+import { AddMemberController } from '../features/groups/addMemberController';
+import { EditGroupInfoController } from '../features/groups/editGroupInfoController';
+import { CreateGroupController } from '../features/groups/createGroupController';
 
 export class PanelController {
     private panel: HTMLElement;
     private viewContainer: HTMLElement;
     private toggleButton: HTMLButtonElement;
 
-    private activeViewController: DialogsController | ChatController | SettingsController | null = null;
+    private activeViewController: DialogsController | ChatController | SettingsController | AddMemberController | EditGroupInfoController | CreateGroupController | null = null;
 
     constructor() {
         const { shell, viewContainer } = PanelView.createShell();
@@ -31,12 +35,13 @@ export class PanelController {
     }
 
     private initializeServices(): void {
+        stateService.initialize();
         authService.initialize();
         notificationService.initialize(this.toggleButton);
         deeplinkService.initialize({
-            onTrigger: (chatContext: IActiveChatContext) => {
+            onTrigger: (chat: Chat) => {
                 if (!stateService.isPanelOpen()) this.togglePanel(true);
-                stateService.openChat(chatContext);
+                stateService.openChat(chat);
             }
         });
     }
@@ -92,6 +97,15 @@ export class PanelController {
             case ViewType.CHAT:
                 this.activeViewController = new ChatController(this.viewContainer);
                 break;
+            case ViewType.ADD_MEMBER:
+                this.activeViewController = new AddMemberController(this.viewContainer);
+                break;
+            case ViewType.EDIT_GROUP_INFO:
+                this.activeViewController = new EditGroupInfoController(this.viewContainer);
+                break;
+            case ViewType.CREATE_GROUP:
+                this.activeViewController = new CreateGroupController(this.viewContainer);
+                break;
             case ViewType.SETTINGS_MAIN:
             case ViewType.SETTINGS_IGNORE_LIST:
             case ViewType.SETTINGS_APPEARANCE:

src/features/chat/chatController.ts

@@ -7,42 +7,77 @@ import { ChatView, ChatViewProps } from './chatView';
 import { Message } from '../../types/message';
 import { updateReadTimestamp } from '../../shared/storage';
 import { fetchYouTubeVideoDetails, parseVideoIdFromUrl } from '../../shared/utils/youtube';
+import { User } from '../../types/user';
+import { Chat, ChatType } from '../../types/chat';
+import { ViewType } from '../../services/stateService';
 
 export class ChatController {
-    private view: ChatView;
+    private view: ChatView | null = null;
     private messages: Message[] = [];
     private oldestMessageDoc: QueryDocumentSnapshot | null = null;
     private isLoadingOlder = false;
     private listeners: Unsubscribe[] = [];
-    private readonly chatId: string;
+    private readonly chat: Chat;
+    private partner: User | null = null;
 
     constructor(private container: HTMLElement) {
         const context = stateService.activeChatContext;
         if (!context) {
             throw new Error("ChatController initialized without an active chat context.");
         }
-        this.chatId = context.chatId;
-        updateReadTimestamp(this.chatId);
+        this.chat = context.chat;
+        updateReadTimestamp(this.chat.id);
+
+        this.initializeController();
+    }
+
+    private async initializeController(): Promise<void> {
+        if (this.chat.type !== ChatType.GROUP) {
+            const partnerUid = this.chat.participants.find(p => p !== authService.currentUser!.uid);
+            if (partnerUid) {
+                this.partner = await chatService.getUserProfile(partnerUid);
+            }
+        }
 
         const props: ChatViewProps = {
-            partner: context.partner,
+            chat: this.chat,
+            partner: this.partner,
             back: () => stateService.closeChat(),
             sendMessage: this.sendMessage.bind(this),
             shareVideo: this.shareVideo.bind(this),
             loadOlderMessages: this.loadOlderMessages.bind(this),
-            ignoreUser: this.ignoreUser.bind(this),
             getVideoId: () => parseVideoIdFromUrl(window.location.href),
+            ignoreUser: this.chat.type !== ChatType.GROUP && this.partner ? this.ignoreUser.bind(this, this.partner.uid) : undefined,
+            leaveGroup: this.chat.type === ChatType.GROUP ? this.leaveGroup.bind(this) : undefined,
+            addMember: this.chat.type === ChatType.GROUP ? this.addMember.bind(this) : undefined,
+            editGroupInfo: this.chat.type === ChatType.GROUP ? this.editGroupInfo.bind(this) : undefined,
+            deleteGroup: this.chat.type === ChatType.GROUP ? this.deleteGroup.bind(this) : undefined,
         };
 
         this.view = new ChatView(this.container, props);
-        this.fetchInitialMessages();
+        await this.fetchInitialMessages();
+    }
+
+    private editGroupInfo(): void {
+        if (this.chat.type !== ChatType.GROUP) {
+            throw new Error("Edit group info is only available for group chats.");
+        }
+        stateService.setView(ViewType.EDIT_GROUP_INFO);
+    }
+
+    private addMember(): void {
+        if (this.chat.type !== ChatType.GROUP) {
+            throw new Error("Add member is only available for group chats.");
+        }
+        stateService.setView(ViewType.ADD_MEMBER);
     }
 
     private async fetchInitialMessages(): Promise<void> {
-        const { messages, oldestDoc } = await chatService.fetchInitialMessages(this.chatId);
+        if (!this.view) return;
+        const { messages, oldestDoc } = await chatService.fetchInitialMessages(this.chat.id);
         this.messages = messages;
         this.oldestMessageDoc = oldestDoc;
-        this.view.renderMessages(this.messages, 'bottom');
+        this.view.renderMessages(this.messages, this.chat.type, 'bottom');
         this.view.scrollToBottom();
         this.listenForNewMessages();
     }
@@ -52,15 +87,16 @@ export class ChatController {
         const lastTimestamp = (latestMessage && latestMessage.timestamp instanceof Timestamp) ? latestMessage.timestamp : null;
 
         const newMessagesListener = chatService.listenToNewMessages(
-            this.chatId,
+            this.chat.id,
             lastTimestamp,
             (newMsgs) => {
+                if (!this.view) return;
                 const trulyNewMsgs = newMsgs.filter(msg => msg.from !== authService.currentUser?.uid);
-                
+
                 if (trulyNewMsgs.length > 0) {
                     this.messages.push(...trulyNewMsgs);
-                    this.view.renderMessages(trulyNewMsgs, 'bottom', true);
-                    updateReadTimestamp(this.chatId);
+                    this.view.renderMessages(trulyNewMsgs, this.chat.type, 'bottom', true);
+                    updateReadTimestamp(this.chat.id);
                 }
             }
         );
@@ -69,10 +105,11 @@ export class ChatController {
 
     private async sendMessage(text: string): Promise<void> {
         this.addOptimisticMessage({ text });
-        await chatService.addMessage(this.chatId, { text });
+        await chatService.addMessage(this.chat.id, { text });
     }
 
     private async shareVideo(includeTimestamp: boolean): Promise<void> {
+        if (!this.view) return;
         const videoId = parseVideoIdFromUrl(window.location.href);
         if (!videoId) return;
 
@@ -81,9 +118,9 @@ export class ChatController {
             const player = document.getElementById("movie_player") as any;
             const timestamp = includeTimestamp && player ? parseInt(player.getCurrentTime().toFixed(0)) : undefined;
             const videoData = await fetchYouTubeVideoDetails(videoId, timestamp);
-            
+
             this.addOptimisticMessage({ video: videoData });
-            await chatService.addMessage(this.chatId, { video: videoData });
+            await chatService.addMessage(this.chat.id, { video: videoData });
         } catch (error) {
             console.error("Failed to share video:", error);
             alert("Could not share video.");
@@ -93,6 +130,7 @@ export class ChatController {
     }
 
     private addOptimisticMessage(data: { text?: string; video?: any }): void {
+        if (!this.view) return;
         const myUid = authService.currentUser!.uid;
         const optimisticMessage: Message = {
             id: `optimistic_${Date.now()}`,
@@ -101,23 +139,23 @@ export class ChatController {
             ...data,
         };
         this.messages.push(optimisticMessage);
-        this.view.renderMessages([optimisticMessage], 'bottom', true);
+        this.view.renderMessages([optimisticMessage], this.chat.type, 'bottom', true);
     }
-    
+
     private async loadOlderMessages(): Promise<void> {
-        if (this.isLoadingOlder || !this.oldestMessageDoc) return;
+        if (!this.view || this.isLoadingOlder || !this.oldestMessageDoc) return;
         this.isLoadingOlder = true;
-        
-        const { messages: olderMessages, oldestDoc: newOldestDoc } = await chatService.fetchOlderMessages(this.chatId, this.oldestMessageDoc);
-        
+
+        const { messages: olderMessages, oldestDoc: newOldestDoc } = await chatService.fetchOlderMessages(this.chat.id, this.oldestMessageDoc);
+
         if (olderMessages.length > 0) {
             this.messages = [...olderMessages, ...this.messages];
             this.oldestMessageDoc = newOldestDoc;
-            this.view.renderMessages(olderMessages, 'top');
+            this.view.renderMessages(olderMessages, this.chat.type, 'top');
         } else {
             this.oldestMessageDoc = null;
         }
-        
+
         this.isLoadingOlder = false;
     }
 
@@ -126,8 +164,38 @@ export class ChatController {
         stateService.closeChat();
     }
 
+    private async leaveGroup(): Promise<void> {
+        if (confirm('Are you sure you want to leave this group?')) {
+            try {
+                await chatService.leaveChat(this.chat.id);
+                stateService.setView(ViewType.DIALOGS);
+            } catch (error) {
+                console.error("Failed to leave group:", error);
+                alert("Could not leave the group. Please try again.");
+            }
+        }
+    }
+
+    private async deleteGroup(): Promise<void> {
+        const userInput = prompt(`This action cannot be undone. All messages will be permanently deleted. To confirm, please type the group name "${this.chat.name}".`);
+        
+        if (userInput === this.chat.name) {
+            try {
+                await chatService.deleteGroup(this.chat.id);
+                stateService.setView(ViewType.DIALOGS);
+            } catch (error) {
+                console.error("Failed to delete group:", error);
+                alert("Could not delete the group. Please try again.");
+            }
+        } else if (userInput !== null) {
+            alert('Confirmation text did not match. Deletion canceled.');
+        }
+    }
+
     public destroy(): void {
-        this.view.destroy();
+        this.view?.destroy();
+        this.view = null;
         this.listeners.forEach(unsub => unsub());
+        this.listeners = [];
     }
 }