From cde01c4f00849241e80d29e5ff78f48521213588 Mon Sep 17 00:00:00 2001
From: Sayan <sayan.shit24b@iiitg.ac.in>
Date: Mon, 3 Aug 2026 00:25:01 +0530
Subject: [PATCH 1/5] feat(chat): implement full emoji picker with search and
 categories (fixes #303)

- Replace hardcoded emoji list with emoji-picker-element.
- Support native system emojis for smaller bundle size.
- Include search, categories, and recently used functionality.
- Implement click-outside handler to close the popover.
- Improve keyboard accessibility for category tab navigation.
---
 frontend/package-lock.json                    |  7 +++
 frontend/package.json                         |  1 +
 .../private-chat-dialog/chat-reactions.ts     | 18 -------
 .../private-chat-dialog.component.html        | 21 +++-----
 .../private-chat-dialog.component.scss        | 38 +++++---------
 .../private-chat-dialog.component.ts          | 51 +++++++++++++++++--
 6 files changed, 75 insertions(+), 61 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 401116dc..9d4b9bf7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "@stomp/stompjs": "^7.1.1",
         "@tailwindcss/postcss": "^4.1.10",
         "dompurify": "^3.4.11",
+        "emoji-picker-element": "^1.29.1",
         "marked": "^18.0.6",
         "ngx-toastr": "^19.1.0",
         "postcss": "^8.5.6",
@@ -8350,6 +8351,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-picker-element": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/emoji-picker-element/-/emoji-picker-element-1.29.1.tgz",
+      "integrity": "sha512-TOiHzu9Dqib3x4MwcAi3wi3RdyT4SoeB4b15AvH1ks4SBwTl7DeebhZ0d3x6dNi4XfNU7IGRZ7NBQllj0RqwrQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/emoji-regex": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 22b2594f..81274da4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "@stomp/stompjs": "^7.1.1",
     "@tailwindcss/postcss": "^4.1.10",
     "dompurify": "^3.4.11",
+    "emoji-picker-element": "^1.29.1",
     "marked": "^18.0.6",
     "ngx-toastr": "^19.1.0",
     "postcss": "^8.5.6",
diff --git a/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts b/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts
index 4c263e3a..de86ffbd 100644
--- a/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts
+++ b/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts
@@ -4,24 +4,6 @@ export interface ChatSticker {
   src: string;
 }
 
-export const CHAT_EMOJIS = [
-  '😀',
-  '😂',
-  '😊',
-  '😍',
-  '😎',
-  '🥳',
-  '🤔',
-  '👍',
-  '🙏',
-  '🔥',
-  '✨',
-  '💙',
-  '🎉',
-  '✅',
-  '👀',
-  '💡',
-];
 
 export const CHAT_STICKERS: ChatSticker[] = [
   {
diff --git a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html
index 27998eef..32474e0b 100644
--- a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html
+++ b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html
@@ -202,21 +202,12 @@
         *ngIf="isEmojiPickerOpen || isStickerPickerOpen"
         class="reaction-popover"
       >
-        <div
+        <emoji-picker
           *ngIf="isEmojiPickerOpen"
-          class="emoji-grid"
-          aria-label="Emoji picker"
-        >
-          <button
-            *ngFor="let emoji of emojis"
-            type="button"
-            class="emoji-option"
-            (click)="insertEmoji(emoji)"
-            [attr.aria-label]="'Insert ' + emoji"
-          >
-            {{ emoji }}
-          </button>
-        </div>
+          class="light"
+          (emoji-click)="insertEmoji($event)"
+          (keydown)="onEmojiPickerKeydown($event)"
+        ></emoji-picker>
 
         <div
           *ngIf="isStickerPickerOpen"
@@ -264,7 +255,7 @@
         class="chat-input flex-1 px-3 py-2 outline-none border bg-[var(--surface-b)] text-[var(--text-color)]"
         placeholder="Type a message..."
         autocomplete="off"
-        (focus)="closeReactionPickers()"
+        (focus)="onInputFocus()"
       />
       <button
         type="submit"
diff --git a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.scss b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.scss
index 4fc59347..409b37a0 100644
--- a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.scss
+++ b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.scss
@@ -282,28 +282,18 @@ button {
   z-index: 2;
 }
 
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(2rem, 1fr));
-  gap: 0.35rem;
-}
-
-.emoji-option {
-  aspect-ratio: 1;
-  border-radius: 0.5rem;
-  border: 1px solid transparent;
-  background: transparent;
-  font-size: 1.35rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover,
-  &:focus-visible {
-    border-color: var(--color-border-hover);
-    background: var(--color-surface-hover);
-  }
+emoji-picker {
+  width: 100%;
+  height: 320px;
+  --background: transparent;
+  --border-color: var(--color-border);
+  --input-border-color: var(--color-input-border);
+  --input-font-color: var(--color-text-primary);
+  --category-font-color: var(--color-text-secondary);
+  --indicator-color: var(--color-primary);
+  --button-hover-background: var(--color-surface-hover);
+  --num-columns: 8;
+  --emoji-size: 1.5rem;
 }
 
 .sticker-grid {
@@ -364,8 +354,8 @@ button {
     right: 0.75rem;
   }
 
-  .emoji-grid {
-    grid-template-columns: repeat(4, minmax(2.4rem, 1fr));
+  emoji-picker {
+    --num-columns: 6;
   }
 
   .sticker-grid {
diff --git a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
index cc9df312..038b3450 100644
--- a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
+++ b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
@@ -11,6 +11,8 @@ import {
   ViewChildren,
   AfterViewChecked,
   OnDestroy,
+  CUSTOM_ELEMENTS_SCHEMA,
+  HostListener,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ChatMessageDto } from '../../models/dtos/ChatMessageDto';
@@ -27,13 +29,13 @@ import { UserService } from '../../services/user.service';
 import { GroupDto } from '../../models/dtos/GroupDto';
 import { UserDto } from '../../models/dtos/UserDto';
 import {
-  CHAT_EMOJIS,
   CHAT_STICKERS,
   ChatSticker,
   findChatSticker,
 } from './chat-reactions';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import DOMPurify from 'dompurify';
+import 'emoji-picker-element';
 
 interface ChatMessageView {
   kind: 'text' | 'sticker';
@@ -82,6 +84,7 @@ type ParsedDecryptedMessageBody = {
   imports: [CommonModule, FormsModule],
   templateUrl: './private-chat-dialog.component.html',
   styleUrls: ['./private-chat-dialog.component.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class PrivateChatDialogComponent
   implements OnInit, OnDestroy, AfterViewChecked
@@ -118,10 +121,10 @@ export class PrivateChatDialogComponent
   matchedMessageIndexes: number[] = [];
   private matchedMessageIndexSet = new Set<number>();
   activeMatchPosition = -1;
-  readonly emojis = CHAT_EMOJIS;
   readonly stickers = CHAT_STICKERS;
   isEmojiPickerOpen = false;
   isStickerPickerOpen = false;
+  private preventFocusClose = false;
   private isTyping = false;
   private typingIdleTimer: ReturnType<typeof setTimeout> | null = null;
   private typingStaleSweepTimer: ReturnType<typeof setInterval> | null = null;
@@ -418,7 +421,12 @@ export class PrivateChatDialogComponent
     };
   }
 
-  insertEmoji(emoji: string): void {
+  insertEmoji(eventOrEmoji: any): void {
+    const emoji =
+      eventOrEmoji && eventOrEmoji.detail && eventOrEmoji.detail.unicode
+        ? eventOrEmoji.detail.unicode
+        : eventOrEmoji;
+    
     const input = this.messageInput?.nativeElement;
     if (!input) {
       this.newMessage += emoji;
@@ -429,15 +437,36 @@ export class PrivateChatDialogComponent
     const end = input.selectionEnd ?? start;
     this.newMessage =
       this.newMessage.slice(0, start) + emoji + this.newMessage.slice(end);
-    this.closeReactionPickers();
 
+    this.preventFocusClose = true;
     setTimeout(() => {
       input.focus();
       const cursorPosition = start + emoji.length;
       input.setSelectionRange(cursorPosition, cursorPosition);
+      setTimeout(() => this.preventFocusClose = false, 100);
     }, 0);
   }
 
+  onEmojiPickerKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      const picker = event.target as HTMLElement;
+      // Allow the web component's own keydown handler to move focus first
+      setTimeout(() => {
+        if (picker.shadowRoot) {
+          const activeEl = picker.shadowRoot.activeElement as HTMLElement;
+          if (activeEl && activeEl.getAttribute('role') === 'tab') {
+            activeEl.click();
+          }
+        }
+      }, 0);
+    }
+  }
+
+  onInputFocus(): void {
+    if (this.preventFocusClose) return;
+    this.closeReactionPickers();
+  }
+
   sendSticker(sticker: ChatSticker): void {
     this.closeReactionPickers();
     void this.sendEncryptedStickerMessage(sticker);
@@ -453,6 +482,20 @@ export class PrivateChatDialogComponent
     this.isEmojiPickerOpen = false;
   }
 
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.isEmojiPickerOpen && !this.isStickerPickerOpen) {
+      return;
+    }
+    const target = event.target as HTMLElement;
+    if (
+      !target.closest('.reaction-popover') &&
+      !target.closest('.composer-tool-btn')
+    ) {
+      this.closeReactionPickers();
+    }
+  }
+
   closeReactionPickers(): void {
     this.isEmojiPickerOpen = false;
     this.isStickerPickerOpen = false;

From 8a0f6243628a0e05e0e30d2adbd84d6adbf891fe Mon Sep 17 00:00:00 2001
From: Sayan <sayan.shit24b@iiitg.ac.in>
Date: Mon, 3 Aug 2026 00:34:56 +0530
Subject: [PATCH 2/5] chore: generate package-lock.json for dependency
 management

---
 package-lock.json | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..98903113
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "vault-web",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From e5a47dd7806f31c7638f9b8ddba1cefa128d0deb Mon Sep 17 00:00:00 2001
From: Sayan <sayan.shit24b@iiitg.ac.in>
Date: Mon, 3 Aug 2026 00:51:40 +0530
Subject: [PATCH 3/5] fix(chat): resolve TS type error and format code

---
 .../pages/private-chat-dialog/chat-reactions.ts   |  1 -
 .../private-chat-dialog.component.ts              | 15 ++++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts b/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts
index de86ffbd..21ab10de 100644
--- a/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts
+++ b/frontend/src/app/pages/private-chat-dialog/chat-reactions.ts
@@ -4,7 +4,6 @@ export interface ChatSticker {
   src: string;
 }
 
-
 export const CHAT_STICKERS: ChatSticker[] = [
   {
     id: 'spark',
diff --git a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
index 038b3450..495fa3b3 100644
--- a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
+++ b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
@@ -28,11 +28,7 @@ import { GroupService } from '../../services/group.service';
 import { UserService } from '../../services/user.service';
 import { GroupDto } from '../../models/dtos/GroupDto';
 import { UserDto } from '../../models/dtos/UserDto';
-import {
-  CHAT_STICKERS,
-  ChatSticker,
-  findChatSticker,
-} from './chat-reactions';
+import { CHAT_STICKERS, ChatSticker, findChatSticker } from './chat-reactions';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import DOMPurify from 'dompurify';
 import 'emoji-picker-element';
@@ -426,7 +422,7 @@ export class PrivateChatDialogComponent
       eventOrEmoji && eventOrEmoji.detail && eventOrEmoji.detail.unicode
         ? eventOrEmoji.detail.unicode
         : eventOrEmoji;
-    
+
     const input = this.messageInput?.nativeElement;
     if (!input) {
       this.newMessage += emoji;
@@ -443,12 +439,13 @@ export class PrivateChatDialogComponent
       input.focus();
       const cursorPosition = start + emoji.length;
       input.setSelectionRange(cursorPosition, cursorPosition);
-      setTimeout(() => this.preventFocusClose = false, 100);
+      setTimeout(() => (this.preventFocusClose = false), 100);
     }, 0);
   }
 
-  onEmojiPickerKeydown(event: KeyboardEvent): void {
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+  onEmojiPickerKeydown(event: Event): void {
+    const kbEvent = event as KeyboardEvent;
+    if (kbEvent.key === 'ArrowLeft' || kbEvent.key === 'ArrowRight') {
       const picker = event.target as HTMLElement;
       // Allow the web component's own keydown handler to move focus first
       setTimeout(() => {

From add886b246415d1c9d19b6de50afaa7352ec8192 Mon Sep 17 00:00:00 2001
From: Sayan <sayan.shit24b@iiitg.ac.in>
Date: Thu, 6 Aug 2026 21:00:19 +0530
Subject: [PATCH 4/5] Address PR #308 review comments and fix local WebSocket
 connection

- Refactored `onEmojiPickerKeydown` to use optional chaining and correct Event typing
- Added type guard and simplified focus logic in `insertEmoji`
- Added missing `aria-label` to `<emoji-picker>` for better accessibility
- Removed `--ssl` from local npm start script to resolve Mixed Content WebSocket errors
- Cleaned up invalid root-level package-lock.json
---
 frontend/package.json                            |  2 +-
 .../private-chat-dialog.component.html           |  1 +
 .../private-chat-dialog.component.ts             | 16 +++++++++-------
 package-lock.json                                |  6 ------
 4 files changed, 11 insertions(+), 14 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/frontend/package.json b/frontend/package.json
index 81274da4..fa184a08 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --ssl",
+    "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
diff --git a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html
index 32474e0b..38c4b2b5 100644
--- a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html
+++ b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.html
@@ -205,6 +205,7 @@
         <emoji-picker
           *ngIf="isEmojiPickerOpen"
           class="light"
+          aria-label="Emoji picker"
           (emoji-click)="insertEmoji($event)"
           (keydown)="onEmojiPickerKeydown($event)"
         ></emoji-picker>
diff --git a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
index 495fa3b3..2e6a5bd1 100644
--- a/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
+++ b/frontend/src/app/pages/private-chat-dialog/private-chat-dialog.component.ts
@@ -423,6 +423,10 @@ export class PrivateChatDialogComponent
         ? eventOrEmoji.detail.unicode
         : eventOrEmoji;
 
+    if (typeof emoji !== 'string') {
+      return;
+    }
+
     const input = this.messageInput?.nativeElement;
     if (!input) {
       this.newMessage += emoji;
@@ -439,21 +443,19 @@ export class PrivateChatDialogComponent
       input.focus();
       const cursorPosition = start + emoji.length;
       input.setSelectionRange(cursorPosition, cursorPosition);
-      setTimeout(() => (this.preventFocusClose = false), 100);
+      this.preventFocusClose = false;
     }, 0);
   }
 
   onEmojiPickerKeydown(event: Event): void {
     const kbEvent = event as KeyboardEvent;
     if (kbEvent.key === 'ArrowLeft' || kbEvent.key === 'ArrowRight') {
-      const picker = event.target as HTMLElement;
+      const picker = event.currentTarget as HTMLElement;
       // Allow the web component's own keydown handler to move focus first
       setTimeout(() => {
-        if (picker.shadowRoot) {
-          const activeEl = picker.shadowRoot.activeElement as HTMLElement;
-          if (activeEl && activeEl.getAttribute('role') === 'tab') {
-            activeEl.click();
-          }
+        const activeEl = picker.shadowRoot?.activeElement as HTMLElement | null;
+        if (activeEl?.getAttribute('role') === 'tab') {
+          activeEl.click();
         }
       }, 0);
     }
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 98903113..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "vault-web",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From 7383e0f21d6229c51796816dc58f7f541ac929de Mon Sep 17 00:00:00 2001
From: Sayan <sayan.shit24b@iiitg.ac.in>
Date: Thu, 6 Aug 2026 21:46:51 +0530
Subject: [PATCH 5/5] feat: add GitHub Actions workflows for CI, Javadoc
 generation, and directory structure maintenance

---
 .github/workflows/backend.yml          | 2 +-
 .github/workflows/directory.yml        | 2 +-
 .github/workflows/frontend.yml         | 4 ++--
 .github/workflows/generate-javadoc.yml | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml
index d41199b7..789b2906 100644
--- a/.github/workflows/backend.yml
+++ b/.github/workflows/backend.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Set up Java
         uses: actions/setup-java@v5
diff --git a/.github/workflows/directory.yml b/.github/workflows/directory.yml
index 118a919b..353a0556 100644
--- a/.github/workflows/directory.yml
+++ b/.github/workflows/directory.yml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Run Directory Tree Generator
         uses: DenizAltunkapan/directory-tree-generator@v2
diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
index ff9726a8..8f4cf38d 100644
--- a/.github/workflows/frontend.yml
+++ b/.github/workflows/frontend.yml
@@ -12,10 +12,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: "npm"
diff --git a/.github/workflows/generate-javadoc.yml b/.github/workflows/generate-javadoc.yml
index f9733bcc..e1eac1ca 100644
--- a/.github/workflows/generate-javadoc.yml
+++ b/.github/workflows/generate-javadoc.yml
@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Set up Java
         uses: actions/setup-java@v5
@@ -48,4 +48,4 @@ jobs:
           git diff --cached --quiet || git commit -m "chore: update Javadoc"
           git push --force https://x-access-token:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git gh-pages
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}