From eca78dbfdb49348ddd07af8fd600c2d9b6b994c0 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:05:49 +0200
Subject: [PATCH 001/136] fix(ops): backend integration with cors and cookies
 (#33)

---
 .../authentication/login/services/apiLogin.ts |  5 +-
 .../logout/services/apiLogout.ts              |  4 +-
 .../services/GetProfileSettings.ts            |  1 +
 .../services/UpdateProfileSettings.ts         |  1 +
 docs/flows/integrate-with-back.md             | 55 +++++++++++++++++++
 5 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 docs/flows/integrate-with-back.md

diff --git a/app/src/features/authentication/login/services/apiLogin.ts b/app/src/features/authentication/login/services/apiLogin.ts
index f1632f7a..ab88294f 100644
--- a/app/src/features/authentication/login/services/apiLogin.ts
+++ b/app/src/features/authentication/login/services/apiLogin.ts
@@ -1,12 +1,15 @@
+import { API_URL } from "@constants";
 import { User } from "../LoginForm/LoginForm";
 
 export async function login(user: User) {
-  const res = await fetch("auth/login", {
+  const res = await fetch(`${API_URL}/auth/login`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "Access-Control-Allow-credentials": "true",
     },
     body: JSON.stringify(user),
+    credentials: "include",
   });
 
   const data = await res.json();
diff --git a/app/src/features/authentication/logout/services/apiLogout.ts b/app/src/features/authentication/logout/services/apiLogout.ts
index 939ac582..8cc6f84b 100644
--- a/app/src/features/authentication/logout/services/apiLogout.ts
+++ b/app/src/features/authentication/logout/services/apiLogout.ts
@@ -1,6 +1,8 @@
+import { API_URL } from "@constants";
+
 export async function logout() {
   try {
-    const res = await fetch("/auth/logout", {
+    const res = await fetch(`${API_URL}/auth/logout`, {
       method: "POST",
       credentials: "include",
     });
diff --git a/app/src/features/profile-settings/services/GetProfileSettings.ts b/app/src/features/profile-settings/services/GetProfileSettings.ts
index c4085023..b4abe4f5 100644
--- a/app/src/features/profile-settings/services/GetProfileSettings.ts
+++ b/app/src/features/profile-settings/services/GetProfileSettings.ts
@@ -6,6 +6,7 @@ async function GetProfileSettings() {
     headers: {
       "Content-Type": "application/json",
     },
+    credentials: "include",
   });
 
   const data = await res.json();
diff --git a/app/src/features/profile-settings/services/UpdateProfileSettings.ts b/app/src/features/profile-settings/services/UpdateProfileSettings.ts
index d15cf1d6..2ba986c3 100644
--- a/app/src/features/profile-settings/services/UpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/services/UpdateProfileSettings.ts
@@ -8,6 +8,7 @@ async function UpdateProfileSettings(newProfileSettings: EditProfileForm) {
       "Content-Type": "application/json",
     },
     body: JSON.stringify(newProfileSettings),
+    credentials: "include",
   });
 
   const data = await res.json();
diff --git a/docs/flows/integrate-with-back.md b/docs/flows/integrate-with-back.md
new file mode 100644
index 00000000..a63a4162
--- /dev/null
+++ b/docs/flows/integrate-with-back.md
@@ -0,0 +1,55 @@
+## 🔥 Time to integrate
+
+1. first get out of `telware-frontend` directory by typing `cd ..`
+
+```sh
+# folder structure
+root
+├── telware-frontend
+```
+
+2. Now, clone the backend repository.
+
+```sh
+git clone <backend-repo-url>
+```
+
+3. Now, get the `.env` file and place it in the backend folder.
+
+```
+root
+├── telware-frontend
+├── telware-backend
+    ├── .env
+```
+
+4. now go to the backend directory and run the following commands.
+
+```sh
+cd telware-backend
+./run.sh
+```
+
+> [!TIP]
+> Go make some coffee, it will take some time to install the dependencies.
+
+5. Now, go to the frontend directory and change your `API_URL`
+
+```sh
+VITE_BACKEND_API=http://localhost:3000/api/v1/
+VITE_ENV=testing
+VITE_REACT_APP_SITE_KEY=secret
+VITE_SITE_SECRET=secret
+VITE_GITHUB_CLIENT_ID=secret
+VITE_GOOGLE_CLIENT_ID=secret
+VITE_PORT=5174
+```
+
+6. Now, run the frontend server.
+
+```sh
+npm run dev
+```
+
+> [!IMPORTANT]
+> It's important here to use the `http://localhost:5174` as the backend will allow this url only.

From 65371f6ad56a3be4ae39f989e03f431b5f6f1f91 Mon Sep 17 00:00:00 2001
From: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:29:30 +0200
Subject: [PATCH 002/136] =?UTF-8?q?=F0=9F=90=9B=20(Login):=20fix=20bugs=20?=
 =?UTF-8?q?(#32)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 Fix data-testid overriding

* 🐛 Fix resetting the form after submit

* 🐛 Consistent error messages in password & email fields

* 🐛 Resetting email & pass in case of a successful login

* 🐛 Added api-url to requests' endpoints

* 🔇 Removed logs
---
 app/package-lock.json                         | 121 ++++++++++++++++--
 app/package.json                              |   2 +-
 app/public/oauth/facebook.png                 | Bin 997 -> 0 bytes
 .../inputs/input-field/InputField.tsx         |   7 +-
 .../login/LoginForm/LoginForm.test.tsx        |   4 +-
 .../login/LoginForm/LoginForm.tsx             |  16 ++-
 .../authentication/login/OauthOptions.tsx     |   6 -
 .../login/hooks/useAuthCheck.ts               |   5 +-
 .../oauth/hooks/useOauthFacebook.ts           |  18 ---
 .../oauth/services/apiFacebookOauth.ts        |  17 ---
 app/src/mocks/oauth/oauth.ts                  |  19 ---
 11 files changed, 127 insertions(+), 88 deletions(-)
 delete mode 100644 app/public/oauth/facebook.png
 delete mode 100644 app/src/features/authentication/oauth/hooks/useOauthFacebook.ts
 delete mode 100644 app/src/features/authentication/oauth/services/apiFacebookOauth.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index f06a05bf..10f0c69d 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -17,7 +17,6 @@
         "@tanstack/react-query": "^5.59.13",
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
-        "jest-fixed-jsdom": "^0.0.6",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-google-recaptcha": "^3.1.0",
@@ -53,6 +52,7 @@
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-fixed-jsdom": "^0.0.7",
         "msw": "^2.4.11",
         "prettier": "^3.3.3",
         "react-redux": "9.1.2",
@@ -2971,6 +2971,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
       "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/fake-timers": "^29.7.0",
@@ -3013,6 +3014,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
       "integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -3142,6 +3144,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
       "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@sinclair/typebox": "^0.27.8"
@@ -3228,6 +3231,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
       "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -3864,12 +3868,14 @@
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@sinonjs/commons": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
       "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "type-detect": "4.0.8"
@@ -3879,6 +3885,7 @@
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
       "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "@sinonjs/commons": "^3.0.0"
@@ -4056,6 +4063,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "dev": true,
       "engines": {
         "node": ">= 10"
       }
@@ -4165,12 +4173,14 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
       "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/istanbul-lib-report": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
       "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/istanbul-lib-coverage": "*"
@@ -4180,6 +4190,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
       "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/istanbul-lib-report": "*"
@@ -4227,6 +4238,7 @@
       "version": "20.0.1",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
       "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==",
+      "dev": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tough-cookie": "*",
@@ -4249,6 +4261,7 @@
       "version": "22.8.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.0.tgz",
       "integrity": "sha512-84rafSBHC/z1i1E3p0cJwKA+CfYDNSXX9WSZBRopjIzLET8oNt6ht2tei4C7izwDeEiLLfdeSVBv1egOH916hg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.8"
@@ -4326,6 +4339,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/statuses": {
@@ -4345,6 +4359,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
       "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/use-sync-external-store": {
@@ -4358,6 +4373,7 @@
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
       "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -4367,6 +4383,7 @@
       "version": "21.0.3",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
       "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
@@ -4654,12 +4671,14 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead"
+      "deprecated": "Use your platform's native atob() and btoa() methods instead",
+      "dev": true
     },
     "node_modules/acorn": {
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
       "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4672,6 +4691,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
       "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
+      "dev": true,
       "dependencies": {
         "acorn": "^8.1.0",
         "acorn-walk": "^8.0.2"
@@ -4691,6 +4711,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "dev": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -4745,6 +4766,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -4805,7 +4827,8 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "node_modules/babel-jest": {
       "version": "29.7.0",
@@ -5000,6 +5023,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -5121,6 +5145,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -5147,6 +5172,7 @@
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
       "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5238,6 +5264,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -5250,12 +5277,14 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5389,7 +5418,8 @@
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
-      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+      "dev": true
     },
     "node_modules/csstype": {
       "version": "3.1.3",
@@ -5417,7 +5447,8 @@
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "dev": true
     },
     "node_modules/dedent": {
       "version": "1.5.3",
@@ -5455,6 +5486,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5519,6 +5551,7 @@
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
       "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
       "deprecated": "Use your platform's native DOMException instead",
+      "dev": true,
       "dependencies": {
         "webidl-conversions": "^7.0.0"
       },
@@ -5581,6 +5614,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -5662,6 +5696,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
       "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
       "dependencies": {
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
@@ -5682,6 +5717,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "optional": true,
       "engines": {
@@ -5873,6 +5909,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "bin": {
         "esparse": "bin/esparse.js",
@@ -5912,6 +5949,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -5921,6 +5959,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -6094,6 +6133,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -6156,6 +6196,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
       "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -6320,6 +6361,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/graphemer": {
@@ -6349,6 +6391,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6409,6 +6452,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -6608,6 +6652,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -6616,7 +6661,8 @@
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true
     },
     "node_modules/is-stream": {
       "version": "2.0.1",
@@ -7074,6 +7120,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz",
       "integrity": "sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==",
+      "dev": true,
       "dependencies": {
         "@jest/environment": "^29.7.0",
         "@jest/fake-timers": "^29.7.0",
@@ -7100,6 +7147,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
       "dependencies": {
         "debug": "4"
       },
@@ -7111,6 +7159,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
       "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
       "dependencies": {
         "cssom": "~0.3.6"
       },
@@ -7121,12 +7170,14 @@
     "node_modules/jest-environment-jsdom/node_modules/cssstyle/node_modules/cssom": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "dev": true
     },
     "node_modules/jest-environment-jsdom/node_modules/data-urls": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
       "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "dev": true,
       "dependencies": {
         "abab": "^2.0.6",
         "whatwg-mimetype": "^3.0.0",
@@ -7140,6 +7191,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
       "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
       "dependencies": {
         "whatwg-encoding": "^2.0.0"
       },
@@ -7151,6 +7203,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
       "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "dev": true,
       "dependencies": {
         "@tootallnate/once": "2",
         "agent-base": "6",
@@ -7164,6 +7217,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
@@ -7176,6 +7230,7 @@
       "version": "20.0.3",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
       "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "dev": true,
       "dependencies": {
         "abab": "^2.0.6",
         "acorn": "^8.8.1",
@@ -7220,6 +7275,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
       "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "dev": true,
       "dependencies": {
         "punycode": "^2.1.1"
       },
@@ -7231,6 +7287,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
       "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "dev": true,
       "dependencies": {
         "xml-name-validator": "^4.0.0"
       },
@@ -7242,6 +7299,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
       "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
       "dependencies": {
         "iconv-lite": "0.6.3"
       },
@@ -7253,6 +7311,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
       "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -7261,6 +7320,7 @@
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
       "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "dev": true,
       "dependencies": {
         "tr46": "^3.0.0",
         "webidl-conversions": "^7.0.0"
@@ -7273,6 +7333,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
       "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -7296,9 +7357,10 @@
       }
     },
     "node_modules/jest-fixed-jsdom": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/jest-fixed-jsdom/-/jest-fixed-jsdom-0.0.6.tgz",
-      "integrity": "sha512-qhGsErwo+qOPaIkG6q3rhYvsc89dnljrGcsLERgplfxID42Ynv8nrxhjNVOs3ibKSbA4gcVxi8ZuDjcpXrA0ag==",
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/jest-fixed-jsdom/-/jest-fixed-jsdom-0.0.7.tgz",
+      "integrity": "sha512-g0GNGpwycfkMx9SdYIFCLF2bKeCopDKzRAHkQgsyxBym3azF5m7gGR6ZQvQKgba3kl8Zx2GEgOQbwqNVHABWcw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -7433,6 +7495,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
       "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
@@ -7453,6 +7516,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -7465,6 +7529,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
       "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -7479,6 +7544,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
       "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -7718,6 +7784,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
       "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -8120,6 +8187,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -8133,6 +8201,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8141,6 +8210,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8327,7 +8397,8 @@
     "node_modules/nwsapi": {
       "version": "2.2.13",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
-      "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ=="
+      "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
+      "dev": true
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -8477,6 +8548,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
       "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==",
+      "dev": true,
       "dependencies": {
         "entities": "^4.5.0"
       },
@@ -8577,6 +8649,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -8817,12 +8890,14 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
       "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -8849,6 +8924,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/queue-microtask": {
@@ -9163,6 +9239,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/reselect": {
@@ -9296,12 +9373,14 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
@@ -9375,6 +9454,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9430,6 +9510,7 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
       "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "escape-string-regexp": "^2.0.0"
@@ -9442,6 +9523,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
       "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9617,6 +9699,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -9640,7 +9723,8 @@
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
@@ -9703,6 +9787,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -9721,6 +9806,7 @@
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
       "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "psl": "^1.1.33",
@@ -9891,6 +9977,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -9967,6 +10054,7 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -10013,6 +10101,7 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
       "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 4.0.0"
@@ -10062,6 +10151,7 @@
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
       "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "querystringify": "^2.1.1",
@@ -10281,6 +10371,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -10351,6 +10442,7 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -10370,7 +10462,8 @@
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true
     },
     "node_modules/y18n": {
       "version": "5.0.8",
diff --git a/app/package.json b/app/package.json
index a51bddd5..c718252b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,7 +23,6 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
-    "jest-fixed-jsdom": "^0.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
@@ -59,6 +58,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fixed-jsdom": "^0.0.7",
     "msw": "^2.4.11",
     "prettier": "^3.3.3",
     "react-redux": "9.1.2",
diff --git a/app/public/oauth/facebook.png b/app/public/oauth/facebook.png
deleted file mode 100644
index 05f3b437dfc95b43358f2338ceb2033e701c1907..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 997
zcmV<B0~-8^P)<h;3K|Lk000e1NJLTq001%o001xu1^@s6Q}-#l00001b5ch_0Itp)
z=>Px&pGibPRA>dwnm=#TKor3H5xP)cHYR2k_DXz#!YA-Ipi6vSP&*<Oi6W*<DNIZh
zi2+cNiiFsZB1AjVNEKzOYMs-x4Q+bpU3?eYvG0G}MzZ|pe7^U4f9^e>v#{Xlx44=t
zqIMbvc<>^?={CZoAK)}WIHl8#^bt;X;hv=^T|sej*VFKBj{)I>h^&HeQ(^OhtB+fl
z^gsbO0>!i+4c2Bgt`=MY+-(d9%?CiZUkltZ8mzhbiljGas)YwVg+_%y9`5UVw+;m6
z9Nb6=4c1wTk`;-5^_v2G`ox2Fl|swLXhmdIU*d{8ZvzAew1#2xd?5!o&qz*IVL)-R
zT%qs!OAurTr;xnd2hW~yZ*4#yb%ylmhjaS&$3L-c>|C&G(DvZjsdPLxqnRX8pAZ1B
zu`{CN{F<tM0H~q7-Fg$`T71R@X!zIBSS7z`*94);c=7F0hbL+)2ntG>yJ=X2f{Q_Q
zk<)+i5aG0|^B|pjz@1Egx)x#MM`XPyeRg)!)&OV|kXoy-3e?jq6}~>xGDb3_$-(h;
zpKs5<To}!im9gSdikDsO)z?uXBRM=7)5o2m&J3lxr#ORUZl&s^-Tra!QpTao7iGoB
z&I>{BJBxq+eN_vx_jjzV5E+1IYp0<I`W7aeqQOI)$UvaY=U4$In*zjVe1MP*gS;0Y
zLFD&^sYwthr=}n?s~v8|Vv`_{PXvfhpKaQ;U_56K(^{%_D$5$eH)mE8!L0*%_|h&(
z=0S`~1MZ5xEyAB`xX%T<<*els#34~m%M=umEki9ZU-k)Nn<xtjF<ZYi4m6)2oo^%K
z@tN}DT!~^^G#(s}`;^kEO*TP6WjxcT{qCZ)a<7-m?zEHpBG}=;ZovUQ6U=Tu|6J9U
z@e>!C?PIr+Nv46$X;4JgZQ`V=Pg9w_5FY|$vX*7%r=^OyDG&$=E`MR~s|s!iq+1X^
ze}dv<xyn^cuQdWvXAKTyn^W?z4S>{JgM+Z|f{tbVd_jo*2O#*klGm{5@mxXj36N`F
zwnwr3bUZhZxMp=x1_Eui@iG^Xm~5%!mA2c!cn5KX;Dn}b<`bkcdvn2T_9hjw50C(p
zq;hT7M)-0cC<%gyD8IFP0NJfAKgvS6oTE4mCsl8CscjF!a)j9jPZtp0cLFr~hZ+kI
zut4(w9E9)Li&>n8Eu3zH>wVt8>}4-c`4=qqLiK6?vX@yC{y-BJR@3<dE%yHbVH$V{
TKg4;c00000NkvXXu0mjfdH~Y3

diff --git a/app/src/components/inputs/input-field/InputField.tsx b/app/src/components/inputs/input-field/InputField.tsx
index d5fc1131..ed0ee0b0 100644
--- a/app/src/components/inputs/input-field/InputField.tsx
+++ b/app/src/components/inputs/input-field/InputField.tsx
@@ -73,12 +73,7 @@ type InputType = {
 function InputField({ label, id, register, error, ...props }: InputType) {
   return (
     <InputWrapper>
-      <StyledInput
-        {...register(id)}
-        id={id}
-        {...props}
-        data-testid={`input-field-${id}`}
-      />
+      <StyledInput {...register(id)} id={id} {...props} />
       <StyledLabel htmlFor={id}>{label}</StyledLabel>
       <Error>{error}</Error>
     </InputWrapper>
diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
index 7f4763fa..be11446f 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
@@ -114,8 +114,8 @@ describe("LoginForm", () => {
   });
 
   it("resets the form after a successful login", async () => {
-    const loginSuccess = jest.fn((_, { onSettled }) => {
-      onSettled();
+    const loginSuccess = jest.fn((_, { onSuccess }) => {
+      onSuccess();
     });
 
     (useLogin as jest.Mock).mockReturnValue({
diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
index 9c5a0f4f..fb831f3d 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
@@ -14,6 +14,9 @@ import InputField from "@components/inputs/input-field/InputField";
 import PasswordInputField from "@components/inputs/password-input-field/PasswordInputField";
 import SpinnerMini from "@components/SpinnerMini";
 
+const MAX_PASSWORD_LENGTH = 128;
+const MAX_EMAIL_LENGTH = 254;
+
 export type User = {
   email: string;
   password: string;
@@ -82,16 +85,26 @@ export default function LoginForm() {
     register,
     handleSubmit,
     reset,
-
     formState: { errors },
   } = useForm<User>({
     resolver: yupResolver(schema),
   });
 
   const onSubmit: SubmitHandler<User> = function (data) {
+    if (
+      data.email.length > MAX_EMAIL_LENGTH ||
+      data.password.length > MAX_PASSWORD_LENGTH
+    ) {
+      setError("Invalid email or password");
+      return;
+    }
+
     login(data, {
       onSettled: (_, error) => {
         setError(error ? error.message : "");
+      },
+
+      onSuccess: () => {
         reset();
       },
     });
@@ -108,7 +121,6 @@ export default function LoginForm() {
           <InputField
             data-testid="login-email-input"
             label="Email"
-            type="email"
             id="email"
             register={register}
             placeholder="Email"
diff --git a/app/src/features/authentication/login/OauthOptions.tsx b/app/src/features/authentication/login/OauthOptions.tsx
index 83bb2a65..2ab30301 100644
--- a/app/src/features/authentication/login/OauthOptions.tsx
+++ b/app/src/features/authentication/login/OauthOptions.tsx
@@ -4,7 +4,6 @@ import styled from "styled-components";
 import google from "/oauth/google.png";
 import githubLight from "/oauth/githubLight.png";
 import githubDark from "/oauth/githubDark.png";
-import facebook from "/oauth/facebook.png";
 
 import LoginWith from "./LoginWith";
 
@@ -12,7 +11,6 @@ import { useAppSelector } from "hooks/useGlobalState";
 import { Theme } from "state/theme/theme";
 
 import { useOauthGoogle } from "../oauth/hooks/useOauthGoogle";
-import { useOauthFacebook } from "../oauth/hooks/useOauthFacebook";
 import { useOauthGithub } from "../oauth/hooks/useOauthGithub";
 import { PORT } from "@constants";
 
@@ -39,7 +37,6 @@ function OauthOptions() {
 
   const { loginWithGithub } = useOauthGithub();
   const { loginWithGoogle } = useOauthGoogle();
-  const { loginWithFacebook } = useOauthFacebook();
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -48,8 +45,6 @@ function OauthOptions() {
     if (code) {
       if (window.location.href.includes("google")) {
         loginWithGoogle(code);
-      } else if (window.location.href.includes("facebook")) {
-        loginWithFacebook(code);
       } else {
         loginWithGithub(code);
       }
@@ -75,7 +70,6 @@ function OauthOptions() {
 
       <Icons data-test="oauth-options">
         <LoginWith onClick={handleGoogleLogin} src={google} alt="google" />
-        <LoginWith src={facebook} alt="facebook" />
         <LoginWith onClick={handleGithubLogin} src={gitHub} alt="github" />
       </Icons>
     </OtherMethods>
diff --git a/app/src/features/authentication/login/hooks/useAuthCheck.ts b/app/src/features/authentication/login/hooks/useAuthCheck.ts
index 75d748e3..3fac0431 100644
--- a/app/src/features/authentication/login/hooks/useAuthCheck.ts
+++ b/app/src/features/authentication/login/hooks/useAuthCheck.ts
@@ -14,12 +14,11 @@ const useAuthCheck = (path: Path) => {
         const res = await fetch(`${API_URL}/auth/me`, {
           method: "GET",
           credentials: "include",
-        });
-
+        });        
         if (res.ok) {
           setIsAuthenticated(true);
           navigate("/", { replace: true });
-        } else {
+        } else {          
           setIsAuthenticated(false);
           navigate(path);
         }
diff --git a/app/src/features/authentication/oauth/hooks/useOauthFacebook.ts b/app/src/features/authentication/oauth/hooks/useOauthFacebook.ts
deleted file mode 100644
index 1bdadc38..00000000
--- a/app/src/features/authentication/oauth/hooks/useOauthFacebook.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
-import { apiFacebookOauth } from "../services/apiFacebookOauth";
-
-export function useOauthFacebook() {
-  const queryClient = useQueryClient();
-  const navigate = useNavigate();
-
-  const { mutate: loginWithFacebook, isPending } = useMutation({
-    mutationFn: apiFacebookOauth,
-    onSuccess: (data) => {
-      queryClient.setQueryData(["user"], { user: data.user });
-      navigate("/", { replace: true });
-    },
-  });
-
-  return { loginWithFacebook, isPending };
-}
diff --git a/app/src/features/authentication/oauth/services/apiFacebookOauth.ts b/app/src/features/authentication/oauth/services/apiFacebookOauth.ts
deleted file mode 100644
index d6836638..00000000
--- a/app/src/features/authentication/oauth/services/apiFacebookOauth.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { API_URL } from "@constants";
-
-export async function apiFacebookOauth(code: string) {
-  const res = await fetch(`${API_URL}/auth/oauth/facebook`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ code }),
-  });
-
-  const data = await res.json();
-
-  if (data.status !== "success") {
-    throw new Error(data.message);
-  }
-
-  return data.data;
-}
diff --git a/app/src/mocks/oauth/oauth.ts b/app/src/mocks/oauth/oauth.ts
index 27fa22c8..96d9517f 100644
--- a/app/src/mocks/oauth/oauth.ts
+++ b/app/src/mocks/oauth/oauth.ts
@@ -60,23 +60,4 @@ export const OauthMock = [
       }
     );
   }),
-
-  http.post<{}, RequestBody, ResponseBody>("/auth/oauth/facebook", async () => {
-    return HttpResponse.json(
-      {
-        message: "Successful login",
-        status: "success",
-        data: {
-          user: MOCK_USER,
-          sessionID: TOKEN,
-        },
-      },
-      {
-        status: 201,
-        headers: {
-          "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
-        },
-      }
-    );
-  }),
 ];

From e2d6b9dae35971b17b5efa3cfeec1eda99a90e39 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:32:34 +0200
Subject: [PATCH 003/136] :bug: (privacy-settings): fixing bugs (#34)

* :bug: (sidebar): adding data-testid in row items

* :bug: (sidebar): fixing responsiveness

* :recycle: (sidebar-row): refactoring key element & data-testid
---
 app/src/components/side-bar/SideBar.tsx       |  1 +
 .../side-bar/settings/OptionsList.tsx         | 12 +++++++++-
 .../settings/side-bar-row/SideBarRow.tsx      | 24 ++++++++++++++++---
 app/src/data/deviceSize.ts                    |  2 +-
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index a3b6696d..91ef1266 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -29,6 +29,7 @@ const fadeOut = keyframes`
 
 const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   height: 100vh;
+  min-width: 300px;
   background-color: var(--color-background);
   overflow: hidden;
   position: relative;
diff --git a/app/src/components/side-bar/settings/OptionsList.tsx b/app/src/components/side-bar/settings/OptionsList.tsx
index d7c43f95..93a78801 100644
--- a/app/src/components/side-bar/settings/OptionsList.tsx
+++ b/app/src/components/side-bar/settings/OptionsList.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import SideBarRow, { SideBarRowProps } from "./side-bar-row/SideBarRow";
 import Heading from "@components/Heading";
 import { useAppSelector } from "@hooks/useGlobalState";
+import { statusMap } from "@data/sideBar";
 
 const StyledOptionsList = styled.div`
   display: flex;
@@ -29,7 +30,16 @@ function OptionsList({ rows }: { rows: SideBarRowProps[] }) {
             <Heading as="h6">{title}</Heading>
           </PlaceHeader>
           {rows.map((item, index) => (
-            <SideBarRow {...item} key={index} />
+            <SideBarRow
+              {...item}
+              key={
+                item.privacyStatus !== undefined
+                  ? statusMap.privacy[item.privacyStatus].id
+                  : item.activityStatus !== undefined
+                    ? statusMap.activity[item.activityStatus].id
+                    : index
+              }
+            />
           ))}
         </StyledOptionsList>
       )}
diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index c54e42ca..4426bcef 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -11,7 +11,11 @@ import { getIcon, iconStrings } from "@data/icons";
 import { useEffect, useState } from "react";
 import { statusMap } from "@data/sideBar";
 import { RadioOptionInterface } from "@components/inputs/radio-input/RadioInput";
-import { activeStates } from "types/user";
+import {
+  activeStates,
+  activitySettingsInterface,
+  privacySettingsInterface,
+} from "types/user";
 
 const StyledSideBarRow = styled.div`
   height: 4rem;
@@ -60,12 +64,13 @@ interface SideBarRowProps {
   privacyStatus?: privacySettingsID;
   count?: number;
   redirect?: number;
+  id: number;
 }
 
 function ExtractData(
   privacyStatus: privacySettingsID | undefined,
   activityStatus: activitySettingsID | undefined,
-  currStatus: string | undefined,
+  currStatus: string | undefined
 ) {
   let keyOptions;
   let valueOptions: string[];
@@ -127,8 +132,20 @@ function SideBarRow({
 
   const [currStatus, setCurrStatus] = useState<string | undefined>(undefined);
 
+  let key:
+    | {
+        id: keyof privacySettingsInterface;
+        name: string;
+        subtitle: string;
+      }
+    | {
+        id: keyof activitySettingsInterface;
+        name: string;
+        subtitle: string;
+      }
+    | undefined;
+
   useEffect(() => {
-    let key;
     if (privacyStatus !== undefined) {
       key = statusMap.privacy[privacyStatus];
       setCurrStatus(userData?.privacySettings?.[key.id] || "everyone");
@@ -147,6 +164,7 @@ function SideBarRow({
       onClick={() =>
         redirect && dispatch(updateSideBarView({ redirect, data }))
       }
+      data-testid={key && `menu-item-${key.id}`}
     >
       <RowInfo>
         {renderedIcon}
diff --git a/app/src/data/deviceSize.ts b/app/src/data/deviceSize.ts
index 9240a7e5..17124266 100644
--- a/app/src/data/deviceSize.ts
+++ b/app/src/data/deviceSize.ts
@@ -1,6 +1,6 @@
 const sizes = {
   mobile: "480px",
-  desktop: "1024px",
+  desktop: "600px",
 };
 
 const media = {

From 2ad0f67702e8fb995e30d02b78de37a38338c521 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 2 Nov 2024 22:51:58 +0200
Subject: [PATCH 004/136] fix(profile-settings): fix integration with backend
 (#35)

---
 app/package-lock.json                         | 26 +++++++++++++++++++
 app/package.json                              |  1 +
 app/src/App.tsx                               |  3 +++
 .../profile-settings/ProfileSettings.tsx      |  9 +++++--
 .../hooks/useUpdateProfileSettings.ts         |  4 +--
 .../schema/EditProfileSchema.ts               |  2 +-
 .../services/GetProfileSettings.ts            | 18 +++++++------
 .../services/UpdateProfileSettings.ts         | 11 +++++++-
 8 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 10f0c69d..2d67b3ce 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -21,6 +21,7 @@
         "react-dom": "^18.3.1",
         "react-google-recaptcha": "^3.1.0",
         "react-hook-form": "^7.53.0",
+        "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
@@ -6357,6 +6358,15 @@
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -9012,6 +9022,22 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-international-phone": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/react-international-phone/-/react-international-phone-4.3.0.tgz",
diff --git a/app/package.json b/app/package.json
index c718252b..9f7d825b 100644
--- a/app/package.json
+++ b/app/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.0",
+    "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
diff --git a/app/src/App.tsx b/app/src/App.tsx
index c6585bb2..e4680f34 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { Toaster } from "react-hot-toast";
 
 import GlobalStyles from "./styles/GlobalStyles";
 
@@ -32,6 +33,8 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
+      <Toaster />
       <GlobalStyles />
       <BrowserRouter>
         <Routes>
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 10148d57..207422d7 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -11,6 +11,7 @@ import { useProfileSettings } from "./hooks/useProfileSettings";
 import { useUpdateProfileSettings } from "./hooks/useUpdateProfileSettings";
 import { useEffect, useState } from "react";
 import SettingsSideBarHeader from "@components/side-bar/settings/SettingsSideBarHeader";
+import toast from "react-hot-toast";
 
 const SideBarContainer = styled.div`
   overflow-y: auto;
@@ -152,6 +153,7 @@ function ProfileSettings() {
     reset,
     formState: { errors, isSubmitting, isDirty },
   } = useForm<EditProfileForm>({
+    // @ts-expect-error - yupResolver type mismatch
     resolver: yupResolver(ValidationSchema),
     mode: "onChange",
     defaultValues: initialProfileSettings || {
@@ -169,7 +171,7 @@ function ProfileSettings() {
     }
   }, [initialProfileSettings, reset]);
 
-  const userHandle = `https://telware.online/${watch("username") || "username"}`;
+  const userHandle = `https://telware.tech/${watch("username") || "username"}`;
 
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
@@ -185,8 +187,11 @@ function ProfileSettings() {
         data.profilePicture = selectedImage;
       }
       updateProfileSettings(data);
+      toast.success("updated profile settings successfully");
     } catch (error) {
-      console.error(error);
+      toast.error(
+        (error as Error).message || "Failed to update profile settings",
+      );
     }
   };
   const firstName = watch("firstName") || "";
diff --git a/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts b/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
index 5520b156..20fbb1f1 100644
--- a/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
@@ -12,8 +12,8 @@ function useUpdateProfileSettings() {
     isPending,
   } = useMutation({
     mutationFn: UpdateProfileSettingsAPI,
-    onSuccess: (data) => {
-      queryClient.setQueryData(["profileSettings"], data);
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profileSettings"] });
     },
   });
 
diff --git a/app/src/features/profile-settings/schema/EditProfileSchema.ts b/app/src/features/profile-settings/schema/EditProfileSchema.ts
index d7fb0e06..be7642f6 100644
--- a/app/src/features/profile-settings/schema/EditProfileSchema.ts
+++ b/app/src/features/profile-settings/schema/EditProfileSchema.ts
@@ -16,7 +16,7 @@ const ValidationSchema = yup.object({
     .string()
     .required("Email is required")
     .email("Invalid email address"),
-  phone: yup.string().matches(/^[0-9]*$/, "Phone number must be numeric"),
+  phone: yup.string(),
 });
 
 export { ValidationSchema, BIO_MAX_LENGTH };
diff --git a/app/src/features/profile-settings/services/GetProfileSettings.ts b/app/src/features/profile-settings/services/GetProfileSettings.ts
index b4abe4f5..5177539c 100644
--- a/app/src/features/profile-settings/services/GetProfileSettings.ts
+++ b/app/src/features/profile-settings/services/GetProfileSettings.ts
@@ -15,15 +15,17 @@ async function GetProfileSettings() {
     throw new Error(data.message);
   }
 
+  const user = data.data?.user;
+
   const profileSettings = {
-    profilePicture: data.data.photo,
-    firstName: data.data.firstName,
-    lastName: data.data.lastName,
-    bio: data.data.bio,
-    username: data.data.username,
-    email: data.data.email,
-    phone: data.data.phoneNumber,
-    lastSeen: data.data.status,
+    profilePicture: user?.photo,
+    firstName: user?.screenFirstName,
+    lastName: user?.screenLastName,
+    bio: user?.bio,
+    username: user?.username,
+    email: user?.email,
+    phone: user?.phoneNumber,
+    lastSeen: user?.status,
   };
 
   return profileSettings;
diff --git a/app/src/features/profile-settings/services/UpdateProfileSettings.ts b/app/src/features/profile-settings/services/UpdateProfileSettings.ts
index 2ba986c3..d84335d6 100644
--- a/app/src/features/profile-settings/services/UpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/services/UpdateProfileSettings.ts
@@ -2,12 +2,21 @@ import { API_URL } from "@constants";
 import { EditProfileForm } from "../ProfileSettings";
 
 async function UpdateProfileSettings(newProfileSettings: EditProfileForm) {
+  const formattedNewProfileSettings = {
+    screenFirstName: newProfileSettings.firstName,
+    screenLastName: newProfileSettings.lastName,
+    username: newProfileSettings.username,
+    bio: newProfileSettings.bio,
+    phoneNumber: newProfileSettings.phone,
+    email: newProfileSettings.email,
+  };
+
   const res = await fetch(`${API_URL}/users/me`, {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(newProfileSettings),
+    body: JSON.stringify(formattedNewProfileSettings),
     credentials: "include",
   });
 

From 483e97bd38538b048373a705a9eba991853d83ec Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Mon, 4 Nov 2024 23:33:48 +0200
Subject: [PATCH 005/136] (fix) integration with backend signup (#36)

* fix captcha and confirm password

* bug fixes on sign up

* fix signup integration

* requested changess

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/package-lock.json                         |  5 ++-
 app/package.json                              |  2 +-
 app/src/data/icons.tsx                        |  4 +-
 .../login/LoginForm/LoginForm.tsx             | 32 ++++++++++----
 .../login/hooks/useAuthCheck.ts               |  6 +--
 .../reset-password/ResetPasswordModal.tsx     |  5 +--
 .../signup/ConfirmationEmailModal.tsx         | 35 +++++++++------
 .../authentication/signup/SignupForm.tsx      | 43 +++++++------------
 .../authentication/signup/schema/signup.ts    |  2 +-
 .../signup/services/apiConfirmCode.ts         |  2 +-
 .../signup/services/apiSignup.ts              |  2 +-
 .../signup/services/apiVerfiyCode.ts          |  6 +--
 app/src/mocks/userauth/resetpassword.ts       | 18 ++++----
 app/src/mocks/userauth/signup.ts              |  8 ++--
 app/src/mocks/userauth/verfiyEmail.ts         | 20 ++++-----
 app/src/pages/Signup.tsx                      |  4 +-
 16 files changed, 103 insertions(+), 91 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 2d67b3ce..ed9bdba5 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -21,7 +21,6 @@
         "react-dom": "^18.3.1",
         "react-google-recaptcha": "^3.1.0",
         "react-hook-form": "^7.53.0",
-        "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
@@ -56,6 +55,7 @@
         "jest-fixed-jsdom": "^0.0.7",
         "msw": "^2.4.11",
         "prettier": "^3.3.3",
+        "react-hot-toast": "^2.4.1",
         "react-redux": "9.1.2",
         "redux": "5.0.1",
         "ts-jest": "^29.2.5",
@@ -6362,6 +6362,7 @@
       "version": "2.1.16",
       "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
       "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "csstype": "^3.0.10"
@@ -9026,7 +9027,7 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
       "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
-      "license": "MIT",
+      "dev": true,
       "dependencies": {
         "goober": "^2.1.10"
       },
diff --git a/app/package.json b/app/package.json
index 9f7d825b..957b8f5f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -27,7 +27,6 @@
     "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.0",
-    "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
@@ -62,6 +61,7 @@
     "jest-fixed-jsdom": "^0.0.7",
     "msw": "^2.4.11",
     "prettier": "^3.3.3",
+    "react-hot-toast": "^2.4.1",
     "react-redux": "9.1.2",
     "redux": "5.0.1",
     "ts-jest": "^29.2.5",
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index b6f7a7dc..dd162a8a 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -128,13 +128,13 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
   ),
   Show: (
     <VisibilityIcon
-      fontSize="large"
+      fontSize="medium"
       sx={{ color: `var(--color-icon-secondary)` }}
     />
   ),
   Hide: (
     <VisibilityOffIcon
-      fontSize="large"
+      fontSize="medium"
       sx={{ color: `var(--color-icon-secondary)` }}
     />
   ),
diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
index fb831f3d..e78fcda7 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
@@ -13,6 +13,7 @@ import Button from "@components/Button";
 import InputField from "@components/inputs/input-field/InputField";
 import PasswordInputField from "@components/inputs/password-input-field/PasswordInputField";
 import SpinnerMini from "@components/SpinnerMini";
+import ConfirmationEmailModal from "@features/authentication/signup/ConfirmationEmailModal";
 
 const MAX_PASSWORD_LENGTH = 128;
 const MAX_EMAIL_LENGTH = 254;
@@ -75,11 +76,10 @@ export default function LoginForm() {
   const { login, isPending } = useLogin();
 
   const [error, setError] = useState("");
-  const [isOpenModal, setIsOpenModal] = useState(false);
-
-  function handleOpenModal() {
-    setIsOpenModal(true);
-  }
+  const [isOpenForgetPasswordModal, setIsOpenForgetPasswordModal] =
+    useState(false);
+  const [isOpenConfirmEmailModal, setIsOpenConfirmEmailModal] = useState(false);
+  const [email, setEmail] = useState("");
 
   const {
     register,
@@ -103,6 +103,14 @@ export default function LoginForm() {
       onSettled: (_, error) => {
         setError(error ? error.message : "");
       },
+      onError: (error) => {
+        setError(error ? error.message : "");
+        const errorMessage = error.message.toLowerCase();
+        if (errorMessage.includes("email") || errorMessage.includes("verify")) {
+          setIsOpenConfirmEmailModal(true);
+          setEmail(data.email);
+        }
+      },
 
       onSuccess: () => {
         reset();
@@ -113,8 +121,13 @@ export default function LoginForm() {
   return (
     <>
       <ForgotPasswordModal
-        isOpen={isOpenModal}
-        onClose={() => setIsOpenModal(false)}
+        isOpen={isOpenForgetPasswordModal}
+        onClose={() => setIsOpenForgetPasswordModal(false)}
+      />
+      <ConfirmationEmailModal
+        isOpen={isOpenConfirmEmailModal}
+        onClose={() => setIsOpenConfirmEmailModal(false)}
+        email={email}
       />
       <Form data-test="login-form" onSubmit={handleSubmit(onSubmit)}>
         <Inputs>
@@ -139,7 +152,10 @@ export default function LoginForm() {
           />
         </Inputs>
 
-        <StyledSpan data-test="forgot-password-span" onClick={handleOpenModal}>
+        <StyledSpan
+          data-test="forgot-password-span"
+          onClick={() => setIsOpenForgetPasswordModal(true)}
+        >
           Forgot password?
         </StyledSpan>
 
diff --git a/app/src/features/authentication/login/hooks/useAuthCheck.ts b/app/src/features/authentication/login/hooks/useAuthCheck.ts
index 3fac0431..05ac92d5 100644
--- a/app/src/features/authentication/login/hooks/useAuthCheck.ts
+++ b/app/src/features/authentication/login/hooks/useAuthCheck.ts
@@ -14,11 +14,11 @@ const useAuthCheck = (path: Path) => {
         const res = await fetch(`${API_URL}/auth/me`, {
           method: "GET",
           credentials: "include",
-        });        
+        });
         if (res.ok) {
           setIsAuthenticated(true);
           navigate("/", { replace: true });
-        } else {          
+        } else {
           setIsAuthenticated(false);
           navigate(path);
         }
@@ -29,7 +29,7 @@ const useAuthCheck = (path: Path) => {
     }
 
     checkAuth();
-  }, [navigate]);
+  }, [navigate, path]);
 
   return isAuthenticated;
 };
diff --git a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
index c75e6ddd..f7df9059 100644
--- a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
+++ b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
@@ -70,6 +70,8 @@ const Inputs = styled.div`
 
 function ResetPasswordModal() {
   const { resetPassword, isPending, isSuccess, isError } = useResetPassword();
+  const { token } = useParams();
+  useAuthCheck(`/password-reset/${token}`);
   const navigate = useNavigate();
   const {
     register,
@@ -81,14 +83,11 @@ function ResetPasswordModal() {
     resolver: yupResolver(schema),
   });
 
-  const { token } = useParams();
   if (!token) {
     console.error("Token is missing in the URL.");
     return null;
   }
 
-  useAuthCheck(`/password-reset/${token}`);
-
   const handleResetPassword = () => {
     resetPassword({
       token: token!,
diff --git a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
index 2df1f0ab..3c15e73c 100644
--- a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
+++ b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { UseVerifyEmail } from "./hooks/useVerifyEmail";
@@ -27,6 +27,11 @@ const ModalContainer = styled.div`
   text-align: center;
   width: 400px;
 `;
+const CodeWrapper = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin: 1rem 0;
+`;
 
 const Button = styled.button<{ disabled?: boolean }>`
   border: none;
@@ -50,7 +55,7 @@ const ModalTitle = styled.h2`
 `;
 
 const ModalMessage = styled.span`
-  margin-bottom: 2rem;
+  margin-bottom: 3em;
   color: var(--color-text);
 `;
 
@@ -106,14 +111,20 @@ function ConfirmationEmailModal({
   } = UseVerifyEmail();
   const { SendConfirmationCode, isSuccess: isCodeRensent } =
     UseSendConfirmationEmail();
+
   const navigate = useNavigate();
+  useEffect(() => {
+    SendConfirmationCode(email);
+  }, [email, SendConfirmationCode]);
   if (!isOpen) return null;
   function handleConfirmCode() {
+    setError("");
     const code = codeDisplay.join("");
     verifyCode(
-      { email, code },
+      { email, verificationCode: code },
       {
         onSuccess: () => {
+          onClose();
           setTimeout(() => {
             navigate("/login", { replace: true });
           }, 500);
@@ -141,11 +152,13 @@ function ConfirmationEmailModal({
           A confirmation email has been sent to your email address. Please check
           your inbox to verify your account.
         </ModalMessage>
-        <CodeInputField
-          data-testid="code-input"
-          code={codeDisplay}
-          setCode={setCodeDisplay}
-        />
+        <CodeWrapper>
+          <CodeInputField
+            data-testid="code-input"
+            code={codeDisplay}
+            setCode={setCodeDisplay}
+          />
+        </CodeWrapper>
         <Button
           onClick={handleConfirmCode}
           disabled={codeDisplay.join("").length < 6}
@@ -155,16 +168,14 @@ function ConfirmationEmailModal({
         </Button>
         <Error data-testid="error-msg">{error}</Error>
         {isVerified && (
-          <Success data-testid="verified-msg">
-            you are verified,redirecting...{" "}
-          </Success>
+          <Success data-testid="verified-msg">Email verified!</Success>
         )}
         <ModalMessage>
           Didn't get an email?{" "}
           <ResendText onClick={handleResendEmail}>resend email</ResendText>
           {isCodeRensent && (
             <Success data-testid="email-resent-msg">
-              Code is resent! check your email
+              Code is sent! check your email
             </Success>
           )}
         </ModalMessage>
diff --git a/app/src/features/authentication/signup/SignupForm.tsx b/app/src/features/authentication/signup/SignupForm.tsx
index 9f004fb5..2f4e0a71 100644
--- a/app/src/features/authentication/signup/SignupForm.tsx
+++ b/app/src/features/authentication/signup/SignupForm.tsx
@@ -1,24 +1,24 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import { useEffect, useRef, useState } from "react";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { useSignup } from "./hooks/useSignup";
+
+import { schema } from "./schema/signup";
+
 import styled from "styled-components";
 import ReCAPTCHA from "react-google-recaptcha";
 import Button from "@components/Button";
 import InputField from "@components/inputs/input-field/InputField";
 import TelephoneInputField from "@components/inputs/input-field/TelephoneInputField";
-import { useSignup } from "./hooks/useSignup";
-import { UseSendConfirmationEmail } from "./hooks/useSendConfirmationEmail";
-import { schema } from "./schema/signup";
 import ConfirmationEmailModal from "./ConfirmationEmailModal";
 import PasswordInputField from "@components/inputs/input-field/PasswordInputField";
 import { RECAPTCHA_SITE_KEY } from "@constants";
-
 export type User = {
   username: string;
   phoneNumber: string;
   email: string;
   password: string;
-  confirmPassword: string;
+  passwordConfirm: string;
   reCaptchaResponse: string;
 };
 
@@ -44,8 +44,7 @@ const Error = styled.p`
 export default function SignupForm() {
   const recaptchaRef = useRef<ReCAPTCHA | null>(null);
   const { signup, isPending, isSuccess } = useSignup();
-  const { SendConfirmationCode, isSuccess: isEmailSent } =
-    UseSendConfirmationEmail();
+
   const [error, setError] = useState("");
   const [isOpen, setIsOpen] = useState(false);
 
@@ -56,36 +55,24 @@ export default function SignupForm() {
     register,
     handleSubmit,
     setValue,
-    reset,
     watch,
     control,
     formState: { errors },
   } = useForm<User>({
     resolver: yupResolver(schema),
-   
   });
 
-  //  defaultValues: {
-  //     username: "TestUser",
-  //     email: "test@example.com",
-  //     phoneNumber: "+1234567890",
-  //     password: "password123",
-  //     confirmPassword: "password123",
-  //     reCaptchaResponse: `${RECAPTCHA_SITE_KEY}`,
-  //   },
-
   const onSubmit: SubmitHandler<User> = function (userData) {
+    setError("");
     signup(userData, {
       onSuccess: () => {
-        SendConfirmationCode(userData.email);
-        setIsOpen(isEmailSent);
+        setIsOpen(true);
       },
       onError: (error) => {
+        recaptchaRef.current?.reset();
         setError(error.message);
       },
-      onSettled: () => {
-        reset();
-      },
+      onSettled: () => {},
     });
   };
 
@@ -150,12 +137,11 @@ export default function SignupForm() {
           <PasswordInputField
             data-testid="confirm-password-input"
             label="Confirm Password"
-            type="password"
-            id="confirmPassword"
+            id="passwordConfirm"
             register={register}
             placeholder="Confirm Password"
             autoComplete="new-password"
-            error={errors.confirmPassword?.message}
+            error={errors.passwordConfirm?.message}
           />
         </Inputs>
 
@@ -165,7 +151,10 @@ export default function SignupForm() {
           sitekey={RECAPTCHA_SITE_KEY}
           onChange={handleRecaptchaChange}
         />
-        {error && <Error>{errors.reCaptchaResponse?.message}</Error>}
+
+        {errors.reCaptchaResponse?.message && (
+          <Error>{errors.reCaptchaResponse?.message}</Error>
+        )}
 
         <Button type="submit" data-testid="submit-button">
           {isPending ? "Loading..." : "Sign up"}
diff --git a/app/src/features/authentication/signup/schema/signup.ts b/app/src/features/authentication/signup/schema/signup.ts
index a4e01f89..1fde3263 100644
--- a/app/src/features/authentication/signup/schema/signup.ts
+++ b/app/src/features/authentication/signup/schema/signup.ts
@@ -11,7 +11,7 @@ export const schema = yup.object({
     .string()
     .min(8, "Password has to be more than eight characters")
     .required("Password is required"),
-  confirmPassword: yup
+  passwordConfirm: yup
     .string()
     .oneOf([yup.ref("password")], "Passwords must match")
     .required("Please confirm your password"),
diff --git a/app/src/features/authentication/signup/services/apiConfirmCode.ts b/app/src/features/authentication/signup/services/apiConfirmCode.ts
index d4c13e2f..1b50b6ab 100644
--- a/app/src/features/authentication/signup/services/apiConfirmCode.ts
+++ b/app/src/features/authentication/signup/services/apiConfirmCode.ts
@@ -6,7 +6,7 @@ export async function sendEmailVerification(email: string) {
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(email),
+    body: JSON.stringify({ email: email }),
   });
   const data = await res.json();
   if (data.status !== "success") throw new Error(data.message);
diff --git a/app/src/features/authentication/signup/services/apiSignup.ts b/app/src/features/authentication/signup/services/apiSignup.ts
index 730ab850..169f20e6 100644
--- a/app/src/features/authentication/signup/services/apiSignup.ts
+++ b/app/src/features/authentication/signup/services/apiSignup.ts
@@ -1,5 +1,5 @@
-import { API_URL } from "@constants";
 import { User } from "../SignupForm";
+import { API_URL } from "@constants";
 export async function Signup(user: User) {
   const res = await fetch(`${API_URL}/auth/signup`, {
     method: "POST",
diff --git a/app/src/features/authentication/signup/services/apiVerfiyCode.ts b/app/src/features/authentication/signup/services/apiVerfiyCode.ts
index cb1303dd..9b52a7b4 100644
--- a/app/src/features/authentication/signup/services/apiVerfiyCode.ts
+++ b/app/src/features/authentication/signup/services/apiVerfiyCode.ts
@@ -2,17 +2,17 @@ import { API_URL } from "@constants";
 
 export async function verifyEmail({
   email,
-  code,
+  verificationCode,
 }: {
   email: string;
-  code: string;
+  verificationCode: string;
 }) {
   const res = await fetch(`${API_URL}/auth/verify`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ email, code }),
+    body: JSON.stringify({ email, verificationCode }),
   });
   const data = await res.json();
   if (data.status !== "success") throw new Error(data.message);
diff --git a/app/src/mocks/userauth/resetpassword.ts b/app/src/mocks/userauth/resetpassword.ts
index 163aa1db..2212d0eb 100644
--- a/app/src/mocks/userauth/resetpassword.ts
+++ b/app/src/mocks/userauth/resetpassword.ts
@@ -21,11 +21,9 @@ type PasswordResponseError = {
 
 type PasswordResponseBody = PasswordResponseSuccess | PasswordResponseError;
 
-const API_ENDPOINT = "";
-
 export const forgetPassword = [
   http.post<object, PasswordRequestBodySend, PasswordResponseBody>(
-    `${API_ENDPOINT}/auth/password/forget`,
+    `mock/auth/password/forget`,
     async ({ request }) => {
       await request.json();
       const isValid = false;
@@ -36,7 +34,7 @@ export const forgetPassword = [
             message: "Cannot send the email, please retry",
             status: "error",
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
@@ -45,15 +43,15 @@ export const forgetPassword = [
           message: "Check your email.",
           status: "success",
         },
-        { status: 201 },
+        { status: 201 }
       );
-    },
+    }
   ),
 ];
 
 export const resetPassword = [
   http.post<object, PasswordRequestBodyVerify, PasswordResponseBody>(
-    `${API_ENDPOINT}/auth/password/reset/1`,
+    `mock/auth/password/reset/1`,
     async ({ request }) => {
       await request.json();
       const isValid = false;
@@ -64,7 +62,7 @@ export const resetPassword = [
             message: "Incorrect code , please retry",
             status: "error",
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
@@ -73,8 +71,8 @@ export const resetPassword = [
           message: "Successful! Redirecting...",
           status: "success",
         },
-        { status: 201 },
+        { status: 201 }
       );
-    },
+    }
   ),
 ];
diff --git a/app/src/mocks/userauth/signup.ts b/app/src/mocks/userauth/signup.ts
index 715329bb..ba565656 100644
--- a/app/src/mocks/userauth/signup.ts
+++ b/app/src/mocks/userauth/signup.ts
@@ -25,7 +25,7 @@ type SignupResponseBody = SignupResponseBodySuccess | SignupResponseBodyFail;
 
 export const signupMock = [
   http.post<object, SignupRequestBody, SignupResponseBody>(
-    `/auth/signup`,
+    `mock/auth/signup`,
     async ({ request }) => {
       await request.json();
       const isValid = true;
@@ -36,7 +36,7 @@ export const signupMock = [
             status: "error",
             data: {},
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
@@ -46,8 +46,8 @@ export const signupMock = [
           status: "success",
           data: {},
         },
-        { status: 201 },
+        { status: 201 }
       );
-    },
+    }
   ),
 ];
diff --git a/app/src/mocks/userauth/verfiyEmail.ts b/app/src/mocks/userauth/verfiyEmail.ts
index 934a086c..2f65867e 100644
--- a/app/src/mocks/userauth/verfiyEmail.ts
+++ b/app/src/mocks/userauth/verfiyEmail.ts
@@ -21,11 +21,9 @@ type EmailResponseError = {
 
 type EmailResponseBody = EmailResponseSuccess | EmailResponseError;
 
-const API_ENDPOINT = "";
-
 export const sendEmailConfirmationMock = [
   http.post<object, EmailRequestBodySend, EmailResponseBody>(
-    `${API_ENDPOINT}/auth/send-confirmation`,
+    `mock/auth/send-confirmation`,
     async ({ request }) => {
       await request.json();
       const isValid = true;
@@ -36,7 +34,7 @@ export const sendEmailConfirmationMock = [
             message: "Cannot send the confirmation, please retry",
             status: "error",
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
@@ -45,18 +43,18 @@ export const sendEmailConfirmationMock = [
           message: "Confirmation code sent. Check your email.",
           status: "success",
         },
-        { status: 201 },
+        { status: 201 }
       );
-    },
+    }
   ),
 ];
 
 export const verifyEmailMock = [
   http.post<object, EmailRequestBodyVerify, EmailResponseBody>(
-    `${API_ENDPOINT}/auth/verify`,
+    `mock/auth/verify`,
     async ({ request }) => {
       await request.json();
-      const isValid = false;
+      const isValid = true;
 
       if (!isValid) {
         return HttpResponse.json(
@@ -64,7 +62,7 @@ export const verifyEmailMock = [
             message: "Incorrect code, please retry",
             status: "error",
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
@@ -73,8 +71,8 @@ export const verifyEmailMock = [
           message: "Successful! Redirecting...",
           status: "success",
         },
-        { status: 201 },
+        { status: 201 }
       );
-    },
+    }
   ),
 ];
diff --git a/app/src/pages/Signup.tsx b/app/src/pages/Signup.tsx
index 0fa0e1a7..3f0e0cd0 100644
--- a/app/src/pages/Signup.tsx
+++ b/app/src/pages/Signup.tsx
@@ -1,6 +1,6 @@
-import Heading from "../components/Heading";
+import Heading from "@components/Heading";
 import { styled, keyframes } from "styled-components";
-import SignupSection from "../features/authentication/signup/SignupSection";
+import SignupSection from "@features/authentication/signup/SignupSection";
 import useAuthCheck from "@features/authentication/login/hooks/useAuthCheck";
 
 const SignupLayout = styled.div`

From b8e369d914dc1aeaa0fa4d7b78000f8b5d04f453 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Mon, 4 Nov 2024 23:58:54 +0200
Subject: [PATCH 006/136] fix confirm email and reset password (#37)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 .../features/authentication/login/LoginForm/LoginForm.tsx   | 6 +++++-
 .../reset-password/services/apiResetPassword.tsx            | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
index e78fcda7..7d823b9c 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
@@ -106,7 +106,11 @@ export default function LoginForm() {
       onError: (error) => {
         setError(error ? error.message : "");
         const errorMessage = error.message.toLowerCase();
-        if (errorMessage.includes("email") || errorMessage.includes("verify")) {
+        if (
+          errorMessage.includes("email") &&
+          errorMessage.includes("verify") &&
+          !errorMessage.includes("register")
+        ) {
           setIsOpenConfirmEmailModal(true);
           setEmail(data.email);
         }
diff --git a/app/src/features/authentication/reset-password/services/apiResetPassword.tsx b/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
index b6d58ca4..ff4cb16f 100644
--- a/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
+++ b/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
@@ -10,11 +10,11 @@ export async function resetPassword({
   confirmPassword: string;
 }) {
   const requestObj = {
-    newPassword: newPassword,
-    confirmNewPassword: confirmPassword,
+    password: newPassword,
+    passwordConfirm: confirmPassword,
   };
   const result = await fetch(`${API_URL}/auth/password/reset/${token}`, {
-    method: "POST",
+    method: "PATCH",
     headers: {
       "Content-Type": "application/json",
     },

From c839bd86974d46a027396c988ef95a57deb5ea04 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:37:42 +0200
Subject: [PATCH 007/136] :recycle: applying factory design pattern +
 integration with BE (#38)

---
 .../inputs/radio-input/RadioInput.tsx         |  33 +++-
 .../side-bar/settings/OptionsList.tsx         |  20 ++-
 .../settings/side-bar-row/SideBarRow.tsx      | 102 ++++-------
 .../settings/side-bar-row/getDataFactory.ts   | 162 ++++++++++++++++++
 app/src/data/sideBar.ts                       |  48 ++++--
 .../service/changeSettings.ts                 |   6 +-
 app/src/state/user/user.ts                    |  30 +++-
 app/src/types/sideBar.ts                      |  26 ++-
 app/src/types/user.ts                         |  32 ++--
 9 files changed, 336 insertions(+), 123 deletions(-)
 create mode 100644 app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts

diff --git a/app/src/components/inputs/radio-input/RadioInput.tsx b/app/src/components/inputs/radio-input/RadioInput.tsx
index fd830b20..c86b2f47 100644
--- a/app/src/components/inputs/radio-input/RadioInput.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.tsx
@@ -3,14 +3,19 @@ import Heading from "@components/Heading";
 import { useAppDispatch } from "@hooks/useGlobalState";
 import { useForm } from "react-hook-form";
 import styled from "styled-components";
+import { privacySettingsInterface, userInfoInterface } from "types/user";
+
+import {
+  updateUserActivity,
+  updateUserPermission,
+  updateUserPrivacy,
+} from "@state/user/user";
+import { useUpdatePrivacy } from "@features/privacy-settings/hooks/useUpdatePrivacy";
 import {
   activeStatesStrings,
-  privacySettingsInterface,
   privacyStatesStrings,
-  userInfoInterface,
-} from "types/user";
-import { updateUserActivity, updateUserPrivacy } from "@state/user/user";
-import { useUpdatePrivacy } from "@features/privacy-settings/hooks/useUpdatePrivacy";
+  StatusType,
+} from "types/sideBar";
 
 interface RadioOptionInterface {
   id: string;
@@ -31,7 +36,7 @@ interface RadioInputProps {
   header?: string;
   state?: string;
   data: RadioInputInterface;
-  updateFnType: boolean; // 0-> activity , 1-> privacy
+  updateFnType: StatusType;
 }
 
 const StyledForm = styled.div`
@@ -67,9 +72,23 @@ const Label = styled.label`
   color: var(--color-text);
 `;
 
+function getUpdateFn(updateFnType: StatusType) {
+  switch (updateFnType) {
+    case StatusType.PRIVACY:
+      return updateUserPrivacy;
+    case StatusType.ACTIVITY:
+      return updateUserActivity;
+    case StatusType.PERMISSION:
+      return updateUserPermission;
+    default:
+      throw new Error("No matching function");
+  }
+}
+
 function RadioInput({ state, data, updateFnType }: RadioInputProps) {
   const { title, options } = data;
-  const updateFn = updateFnType ? updateUserPrivacy : updateUserActivity;
+  const updateFn = getUpdateFn(updateFnType);
+
   const dispatch = useAppDispatch();
   const updatePrivacy = useUpdatePrivacy();
 
diff --git a/app/src/components/side-bar/settings/OptionsList.tsx b/app/src/components/side-bar/settings/OptionsList.tsx
index 93a78801..ad5ee450 100644
--- a/app/src/components/side-bar/settings/OptionsList.tsx
+++ b/app/src/components/side-bar/settings/OptionsList.tsx
@@ -2,6 +2,12 @@ import styled from "styled-components";
 import SideBarRow, { SideBarRowProps } from "./side-bar-row/SideBarRow";
 import Heading from "@components/Heading";
 import { useAppSelector } from "@hooks/useGlobalState";
+import {
+  activitySettingsID,
+  permissionSettingsID,
+  privacySettingsID,
+  StatusType,
+} from "types/sideBar";
 import { statusMap } from "@data/sideBar";
 
 const StyledOptionsList = styled.div`
@@ -33,11 +39,15 @@ function OptionsList({ rows }: { rows: SideBarRowProps[] }) {
             <SideBarRow
               {...item}
               key={
-                item.privacyStatus !== undefined
-                  ? statusMap.privacy[item.privacyStatus].id
-                  : item.activityStatus !== undefined
-                    ? statusMap.activity[item.activityStatus].id
-                    : index
+                item.status !== undefined && item.type !== undefined
+                  ? item.type === StatusType.PRIVACY
+                    ? statusMap.privacy[item.status as privacySettingsID].id
+                    : item.type === StatusType.ACTIVITY
+                      ? statusMap.activity[item.status as activitySettingsID].id
+                      : statusMap.permission[
+                          item.status as permissionSettingsID
+                        ].id
+                  : index
               }
             />
           ))}
diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index 4426bcef..8dfd7f4d 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -4,18 +4,19 @@ import { updateSideBarView } from "@state/side-bar/sideBar";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import {
   activitySettingsID,
+  permissionSettingsID,
   privacySettingsID,
-  privacyStates,
+  StatusType,
 } from "types/sideBar";
 import { getIcon, iconStrings } from "@data/icons";
 import { useEffect, useState } from "react";
 import { statusMap } from "@data/sideBar";
-import { RadioOptionInterface } from "@components/inputs/radio-input/RadioInput";
 import {
-  activeStates,
   activitySettingsInterface,
+  permissionsSettingsInterface,
   privacySettingsInterface,
 } from "types/user";
+import { DataInterface, ExtractData } from "./getDataFactory";
 
 const StyledSideBarRow = styled.div`
   height: 4rem;
@@ -60,76 +61,26 @@ const StyledP = styled.p`
 interface SideBarRowProps {
   icon?: iconStrings;
   title: string;
-  activityStatus?: activitySettingsID;
-  privacyStatus?: privacySettingsID;
+  type?: StatusType;
+  status?: activitySettingsID | privacySettingsID | permissionSettingsID;
   count?: number;
   redirect?: number;
   id: number;
 }
 
-function ExtractData(
-  privacyStatus: privacySettingsID | undefined,
-  activityStatus: activitySettingsID | undefined,
-  currStatus: string | undefined
-) {
-  let keyOptions;
-  let valueOptions: string[];
-  let data: any;
-
-  if (activityStatus !== undefined || privacyStatus !== undefined) {
-    const rowInfo =
-      privacyStatus !== undefined
-        ? statusMap.privacy[privacyStatus]
-        : activityStatus !== undefined
-          ? statusMap.activity[activityStatus]
-          : undefined;
-
-    valueOptions =
-      privacyStatus !== undefined
-        ? Object.values(privacyStates)
-        : Object.values(activeStates);
-
-    keyOptions =
-      privacyStatus !== undefined
-        ? Object.keys(privacyStates)
-        : Object.keys(activeStates);
-
-    const radioOptions: RadioOptionInterface[] = [];
-
-    keyOptions.map((item, index) => {
-      radioOptions.push({
-        id: item,
-        label: valueOptions[index],
-        value: item,
-      } as RadioOptionInterface);
-    });
-
-    data = {
-      header: rowInfo?.name,
-      state: currStatus,
-      data: {
-        id: rowInfo?.id,
-        title: rowInfo?.subtitle,
-        options: radioOptions,
-      },
-      updateFnType: activityStatus !== undefined ? 0 : 1,
-    };
-  }
-  return data;
-}
-
 function SideBarRow({
   redirect,
   icon,
   title,
-  activityStatus,
-  privacyStatus,
+  status,
   count,
+  type,
 }: SideBarRowProps) {
   const userData = useAppSelector((state) => state.user);
   const dispatch = useAppDispatch();
   const renderedIcon = getIcon(icon);
 
+
   const [currStatus, setCurrStatus] = useState<string | undefined>(undefined);
 
   let key:
@@ -143,21 +94,38 @@ function SideBarRow({
         name: string;
         subtitle: string;
       }
+    | {
+        id: keyof permissionsSettingsInterface;
+        name: string;
+        subtitle: string;
+      }
     | undefined;
 
+  const dataExtractor: DataInterface = ExtractData(type, currStatus, status);
+  const data = dataExtractor.getData();
+
   useEffect(() => {
-    if (privacyStatus !== undefined) {
-      key = statusMap.privacy[privacyStatus];
-      setCurrStatus(userData?.privacySettings?.[key.id] || "everyone");
-    } else if (activityStatus !== undefined) {
-      key = statusMap.activity[activityStatus];
-      setCurrStatus(userData?.activitySettings?.[key.id] || "enabled");
+    if (status !== undefined && type !== undefined) {
+      switch (type) {
+        case StatusType.PRIVACY:
+          key = statusMap.privacy[status];
+          setCurrStatus(userData?.privacySettings?.[key.id] || "everyone");
+          break;
+        case StatusType.ACTIVITY:
+          key = statusMap.activity[status as activitySettingsID];
+          setCurrStatus(userData?.activitySettings?.[key.id] || "everyone");
+          break;
+        case StatusType.PERMISSION:
+          key = statusMap.permission[status as permissionSettingsID];
+          setCurrStatus(userData?.permissionSettings?.[key.id] || "everyone");
+          break;
+        default:
+          throw new Error("Type not valid");
+      }
     } else {
       setCurrStatus(undefined);
     }
-  }, [userData, privacyStatus, activityStatus]);
-
-  const data = ExtractData(privacyStatus, activityStatus, currStatus);
+  }, [userData, status]);
 
   return (
     <StyledSideBarRow
diff --git a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
new file mode 100644
index 00000000..7ec5db16
--- /dev/null
+++ b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
@@ -0,0 +1,162 @@
+import { RadioOptionInterface } from "@components/inputs/radio-input/RadioInput";
+import { statusMap } from "@data/sideBar";
+import {
+  StatusType,
+  privacySettingsID,
+  activitySettingsID,
+  permissionSettingsID,
+  privacyStates,
+  activeStates,
+  permissionStates,
+} from "types/sideBar";
+
+function ExtractData(
+  type: StatusType | undefined,
+  currStatus: string | undefined,
+  itemStatus:
+    | privacySettingsID
+    | activitySettingsID
+    | permissionSettingsID
+    | undefined
+): DataInterface {
+  switch (type) {
+    case StatusType.PRIVACY:
+      return getPrivacyData(itemStatus as privacySettingsID, currStatus);
+    case StatusType.ACTIVITY:
+      return getActivityData(itemStatus as activitySettingsID, currStatus);
+    case StatusType.PERMISSION:
+      return getPermissionData(itemStatus as permissionSettingsID, currStatus);
+    default:
+      return { getData: () => {} };
+  }
+}
+
+interface DataInterface {
+  getData: () => void;
+}
+
+function getPrivacyData(
+  privacyStatus: privacySettingsID | undefined,
+  currStatus: string | undefined
+): DataInterface {
+  return {
+    getData: () => {
+      let keyOptions;
+      let valueOptions: string[];
+      let data: any;
+      if (privacyStatus !== undefined) {
+        const rowInfo = statusMap.privacy[privacyStatus];
+        valueOptions = Object.values(privacyStates);
+
+        keyOptions = Object.keys(privacyStates);
+
+        const radioOptions: RadioOptionInterface[] = [];
+
+        keyOptions.map((item, index) => {
+          radioOptions.push({
+            id: item,
+            label: valueOptions[index],
+            value: item,
+          } as RadioOptionInterface);
+        });
+
+        data = {
+          header: rowInfo?.name,
+          state: currStatus,
+          data: {
+            id: rowInfo?.id,
+            title: rowInfo?.subtitle,
+            options: radioOptions,
+          },
+          updateFnType: StatusType.PRIVACY,
+        };
+      }
+      return data;
+    },
+  };
+}
+
+function getActivityData(
+  activityStatus: activitySettingsID | undefined,
+  currStatus: string | undefined
+): DataInterface {
+  return {
+    getData: () => {
+      let keyOptions;
+      let valueOptions: string[];
+      let data: any;
+      if (activityStatus !== undefined) {
+        const rowInfo = statusMap.activity[activityStatus];
+        valueOptions = Object.values(activeStates);
+
+        keyOptions = Object.keys(activeStates);
+
+        const radioOptions: RadioOptionInterface[] = [];
+
+        keyOptions.map((item, index) => {
+          radioOptions.push({
+            id: item,
+            label: valueOptions[index],
+            value: item,
+          } as RadioOptionInterface);
+        });
+
+        data = {
+          header: rowInfo?.name,
+          state: currStatus,
+          data: {
+            id: rowInfo?.id,
+            title: rowInfo?.subtitle,
+            options: radioOptions,
+          },
+          updateFnType: StatusType.ACTIVITY,
+        };
+      }
+      return data;
+    },
+  };
+}
+
+function getPermissionData(
+  permissionStatus: permissionSettingsID | undefined,
+  currStatus: string | undefined
+): DataInterface {
+  return {
+    getData: () => {
+      let keyOptions;
+      let valueOptions: string[];
+      let data: any;
+      if (permissionStatus !== undefined) {
+        const rowInfo = statusMap.permission[permissionStatus];
+        valueOptions = Object.values(permissionStates);
+
+        keyOptions = Object.keys(permissionStates);
+
+        const radioOptions: RadioOptionInterface[] = [];
+
+        keyOptions.map((item, index) => {
+          radioOptions.push({
+            id: item,
+            label: valueOptions[index],
+            value: item,
+          } as RadioOptionInterface);
+        });
+
+        data = {
+          header: rowInfo?.name,
+          state: currStatus,
+          data: {
+            id: rowInfo?.id,
+            title: rowInfo?.subtitle,
+            options: radioOptions,
+          },
+          updateFnType: StatusType.PERMISSION,
+        };
+      }
+      return data;
+    },
+  };
+}
+
+export { ExtractData };
+export type { DataInterface };
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index fb76a684..64829a6f 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -5,9 +5,12 @@ import {
   activitySettingsID,
   sideBarPages,
   pagesStrings,
+  permissionSettingsID,
+  StatusType,
 } from "../types/sideBar";
 import {
   activitySettingsInterface,
+  permissionsSettingsInterface,
   privacySettingsInterface,
 } from "../types/user";
 
@@ -30,16 +33,6 @@ const privacySettingsMap: Record<
     subtitle: "Who can see my profile photo?",
     name: "Profile Photo",
   },
-  [privacySettingsID.ADD_TO_GROUP_PRIVACY]: {
-    id: "addToGroupPrivacy",
-    subtitle: "Who can add me to group chats?",
-    name: "Group Chats",
-  },
-  [privacySettingsID.ADD_TO_CHANNEL_PRIVACY]: {
-    id: "addToChannelPrivacy",
-    subtitle: "Who can add me to channels?",
-    name: "Channels",
-  },
 };
 
 const activitySettingsMap: Record<
@@ -53,9 +46,26 @@ const activitySettingsMap: Record<
   },
 };
 
+const permissionSettingsMap: Record<
+  permissionSettingsID,
+  { id: keyof permissionsSettingsInterface; name: string; subtitle: string }
+> = {
+  [permissionSettingsID.ADD_TO_GROUP_PRIVACY]: {
+    id: "addToGroupPrivacy",
+    subtitle: "Who can add me to group chats?",
+    name: "Group Chats",
+  },
+  [permissionSettingsID.ADD_TO_CHANNEL_PRIVACY]: {
+    id: "addToChannelPrivacy",
+    subtitle: "Who can add me to channels?",
+    name: "Channels",
+  },
+};
+
 const statusMap = {
   privacy: privacySettingsMap,
   activity: activitySettingsMap,
+  permission: permissionSettingsMap,
 };
 
 const pagesMap: { [K in pagesStrings]: string } = {
@@ -95,34 +105,40 @@ const privacySettingsRows = [
   },
   {
     title: "Who can see my stories?",
-    privacyStatus: privacySettingsID.STORIES_SEEN_PRIVACY,
+    status: privacySettingsID.STORIES_SEEN_PRIVACY,
     redirect: sideBarPages.SETTINGS_UPDATE,
+    type: StatusType.PRIVACY,
   },
   {
     title: "Who can see my last seen?",
-    privacyStatus: privacySettingsID.LAST_SEEN_PRIVACY,
+    status: privacySettingsID.LAST_SEEN_PRIVACY,
     redirect: sideBarPages.SETTINGS_UPDATE,
+    type: StatusType.PRIVACY,
   },
 
   {
     title: "Who can see my profile photo?",
-    privacyStatus: privacySettingsID.PROFILE_PHOTO_PRIVACY,
+    status: privacySettingsID.PROFILE_PHOTO_PRIVACY,
     redirect: sideBarPages.SETTINGS_UPDATE,
+    type: StatusType.PRIVACY,
   },
   {
     title: "Who can add me to group chats?",
-    privacyStatus: privacySettingsID.ADD_TO_GROUP_PRIVACY,
+    status: permissionSettingsID.ADD_TO_GROUP_PRIVACY,
     redirect: sideBarPages.SETTINGS_UPDATE,
+    type: StatusType.PERMISSION,
   },
   {
     title: "Who can add me to channels?",
-    privacyStatus: privacySettingsID.ADD_TO_CHANNEL_PRIVACY,
+    status: permissionSettingsID.ADD_TO_CHANNEL_PRIVACY,
     redirect: sideBarPages.SETTINGS_UPDATE,
+    type: StatusType.PERMISSION,
   },
   {
     title: "Read receipts",
-    activityStatus: activitySettingsID.READ_RECEIPTS_PRIVACY,
+    status: activitySettingsID.READ_RECEIPTS_PRIVACY,
     redirect: sideBarPages.SETTINGS_UPDATE,
+    type: StatusType.ACTIVITY,
   },
 ] as SideBarRowProps[];
 
diff --git a/app/src/features/privacy-settings/service/changeSettings.ts b/app/src/features/privacy-settings/service/changeSettings.ts
index 7fafc731..a652f6e0 100644
--- a/app/src/features/privacy-settings/service/changeSettings.ts
+++ b/app/src/features/privacy-settings/service/changeSettings.ts
@@ -1,5 +1,5 @@
 import { API_URL } from "@constants";
-import { activeStatesStrings, privacyStatesStrings } from "types/user";
+import { activeStatesStrings, privacyStatesStrings } from "types/sideBar";
 
 enum endPts {
   lastSeenPrivacy = "last-seen",
@@ -17,10 +17,12 @@ async function changeSettings(data: {
   const { key, value } = data;
 
   const endpt = endPts[key];
-  const reqBody = { privacy: value };
+  const reqBody = { privacy: value.toLowerCase() };
+
 
   const res = await fetch(`${API_URL}/users/privacy/${endpt}`, {
     method: "PATCH",
+    credentials: "include",
     headers: {
       "Content-Type": "application/json",
     },
diff --git a/app/src/state/user/user.ts b/app/src/state/user/user.ts
index 8ba8daee..a2729e6f 100644
--- a/app/src/state/user/user.ts
+++ b/app/src/state/user/user.ts
@@ -1,5 +1,9 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { privacyStates, activeStates } from "../../types/sideBar";
+import {
+  privacyStates,
+  activeStates,
+  permissionStates,
+} from "../../types/sideBar";
 import {
   userInfoInterface,
   privacySettingsInterface,
@@ -7,12 +11,15 @@ import {
   updatePrivacyInterface,
   updateInfoInterface,
   updateActivityInterface,
+  permissionsSettingsInterface,
+  updatePermissionInterface,
 } from "../../types/user";
 
 interface userState {
   userInfo: userInfoInterface;
   privacySettings: privacySettingsInterface;
   activitySettings: activitySettingsInterface;
+  permissionSettings: permissionsSettingsInterface;
 }
 
 const initialState: userState = {
@@ -29,12 +36,14 @@ const initialState: userState = {
     storiesSeenPrivacy: privacyStates.EVERYONE,
     lastSeenPrivacy: privacyStates.EVERYONE,
     profilePhotoPrivacy: privacyStates.EVERYONE,
-    addToGroupPrivacy: privacyStates.EVERYONE,
-    addToChannelPrivacy: privacyStates.EVERYONE,
   },
   activitySettings: {
     readReceiptsPrivacy: activeStates.ENABLED,
   },
+  permissionSettings: {
+    addToGroupPrivacy: permissionStates.EVERYONE,
+    addToChannelPrivacy: permissionStates.EVERYONE,
+  },
 };
 
 const userSlice = createSlice({
@@ -62,11 +71,22 @@ const userSlice = createSlice({
       const { key, value } = action.payload;
       state.activitySettings[key] = activeStates[value];
     },
+    updateUserPermission: (
+      state: userState,
+      action: PayloadAction<updatePermissionInterface>
+    ) => {
+      const { key, value } = action.payload;
+      state.permissionSettings[key] = permissionStates[value];
+    },
   },
 });
 
-export const { updateUserPrivacy, updateUserInfo, updateUserActivity } =
-  userSlice.actions;
+export const {
+  updateUserPrivacy,
+  updateUserInfo,
+  updateUserActivity,
+  updateUserPermission,
+} = userSlice.actions;
 
 export default userSlice.reducer;
 export type { activeStates, privacyStates, userState };
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index acd39e4f..0f4dc54a 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -13,14 +13,17 @@ enum privacySettingsID {
   STORIES_SEEN_PRIVACY,
   LAST_SEEN_PRIVACY,
   PROFILE_PHOTO_PRIVACY,
-  ADD_TO_GROUP_PRIVACY,
-  ADD_TO_CHANNEL_PRIVACY,
 }
 
 enum activitySettingsID {
   READ_RECEIPTS_PRIVACY,
 }
 
+enum permissionSettingsID {
+  ADD_TO_GROUP_PRIVACY,
+  ADD_TO_CHANNEL_PRIVACY,
+}
+
 enum privacyStates {
   EVERYONE = "everyone",
   CONTACTS = "contacts",
@@ -32,11 +35,21 @@ enum activeStates {
   DISABLED = "disabled",
 }
 
+enum permissionStates {
+  EVERYONE = "everyone",
+  ADMINS = "admins",
+}
+
 enum StatusType {
   PRIVACY = "privacy",
   ACTIVITY = "activity",
+  PERMISSION = "permission",
 }
 
+type privacyStatesStrings = keyof typeof privacyStates;
+type activeStatesStrings = keyof typeof activeStates;
+type permissionStatesStrings = keyof typeof permissionStates;
+
 export {
   sideBarPages,
   privacySettingsID,
@@ -44,6 +57,13 @@ export {
   privacyStates,
   activitySettingsID,
   StatusType,
+  permissionSettingsID,
+  permissionStates,
 };
 
-export type { pagesStrings };
+export type {
+  pagesStrings,
+  activeStatesStrings,
+  privacyStatesStrings,
+  permissionStatesStrings,
+};
diff --git a/app/src/types/user.ts b/app/src/types/user.ts
index a82ad865..f8ccef62 100644
--- a/app/src/types/user.ts
+++ b/app/src/types/user.ts
@@ -1,29 +1,20 @@
-enum privacyStates {
-  EVERYONE = "everyone",
-  CONTACTS = "contacts",
-  NOBODY = "nobody",
-}
-
-enum activeStates {
-  ENABLED = "enabled",
-  DISABLED = "disabled",
-}
-
-type privacyStatesStrings = keyof typeof privacyStates;
-type activeStatesStrings = keyof typeof activeStates;
+import { privacyStates, activeStates, permissionStates, permissionStatesStrings, activeStatesStrings, privacyStatesStrings } from "./sideBar";
 
 interface privacySettingsInterface {
   storiesSeenPrivacy: privacyStates;
   lastSeenPrivacy: privacyStates;
   profilePhotoPrivacy: privacyStates;
-  addToGroupPrivacy: privacyStates;
-  addToChannelPrivacy: privacyStates;
 }
 
 interface activitySettingsInterface {
   readReceiptsPrivacy: activeStates;
 }
 
+interface permissionsSettingsInterface {
+  addToGroupPrivacy: permissionStates;
+  addToChannelPrivacy: permissionStates;
+}
+
 interface userInfoInterface {
   username: string;
   screenName: string;
@@ -48,14 +39,19 @@ interface updateActivityInterface {
   value: activeStatesStrings;
 }
 
-export { activeStates, privacyStates };
+interface updatePermissionInterface {
+  key: keyof permissionsSettingsInterface;
+  value: permissionStatesStrings;
+}
+
+export { activeStates, privacyStates, permissionStates };
 export type {
-  activeStatesStrings,
   activitySettingsInterface,
   privacySettingsInterface,
-  privacyStatesStrings,
   updateActivityInterface,
   updateInfoInterface,
   updatePrivacyInterface,
   userInfoInterface,
+  permissionsSettingsInterface,
+  updatePermissionInterface,
 };

From d1aecd4886f3c76558f8219d03f91f334ee0439d Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:50:09 +0200
Subject: [PATCH 008/136] :recycle: add getKey function (#40)

---
 .../side-bar/settings/OptionsList.tsx         | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/src/components/side-bar/settings/OptionsList.tsx b/app/src/components/side-bar/settings/OptionsList.tsx
index ad5ee450..4de7b4fe 100644
--- a/app/src/components/side-bar/settings/OptionsList.tsx
+++ b/app/src/components/side-bar/settings/OptionsList.tsx
@@ -25,6 +25,28 @@ const PlaceHeader = styled.div`
   padding-bottom: 0.5rem;
 `;
 
+function getKey(
+  status:
+    | activitySettingsID
+    | privacySettingsID
+    | permissionSettingsID
+    | undefined,
+  type: StatusType | undefined,
+  index: number
+) {
+  let key;
+  if (status !== undefined && type !== undefined) {
+    if (type === StatusType.PRIVACY)
+      key = statusMap.privacy[status as privacySettingsID].id;
+    else if (type === StatusType.ACTIVITY)
+      key = statusMap.activity[status as activitySettingsID].id;
+    else key = statusMap.permission[status as permissionSettingsID].id;
+  } else {
+    key = index;
+  }
+  return key;
+}
+
 function OptionsList({ rows }: { rows: SideBarRowProps[] }) {
   const { title } = useAppSelector((state) => state.sideBarData);
 
@@ -36,20 +58,7 @@ function OptionsList({ rows }: { rows: SideBarRowProps[] }) {
             <Heading as="h6">{title}</Heading>
           </PlaceHeader>
           {rows.map((item, index) => (
-            <SideBarRow
-              {...item}
-              key={
-                item.status !== undefined && item.type !== undefined
-                  ? item.type === StatusType.PRIVACY
-                    ? statusMap.privacy[item.status as privacySettingsID].id
-                    : item.type === StatusType.ACTIVITY
-                      ? statusMap.activity[item.status as activitySettingsID].id
-                      : statusMap.permission[
-                          item.status as permissionSettingsID
-                        ].id
-                  : index
-              }
-            />
+            <SideBarRow {...item} key={getKey(item.status, item.type, index)} />
           ))}
         </StyledOptionsList>
       )}

From 716bd9f9422277ee9049e5cb553f67a3d21c3eb0 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:17:56 +0200
Subject: [PATCH 009/136] Feature/update profile picture (mock) (#39)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

* ✨ (feat

(feat): add profile picture mock

* 🐛 Fix(update-profile-picture): fix the blob

fix(update-profile-picture): fix the blob

* 💄 Feat: StoryIcon UI

Feat: StoryIcon UI

* 🐛 Fix(sidebar): fix the searchbar responsiveness

fix(sidebar): fix the searchbar responsiveness

* 📱 Fix(sidebar): make sidebar responsive

fix(sidebar): make sidebar responsive

* 🐛 Fix(user): fix importing privacy states

fix(user): fix importing privacy states
---
 app/.env.example                              |    7 -
 app/jest.setup.ts                             |   12 -
 app/package-lock.json                         | 1586 +++++++++++------
 app/package.json                              |    2 +
 app/public/mockServiceWorker.js               |    2 +-
 app/src/App.tsx                               |    2 +-
 app/src/components/AppLayout.tsx              |   21 +-
 app/src/components/Button.tsx                 |   10 +
 app/src/components/ImageEditor.tsx            |  132 ++
 app/src/components/Modal.tsx                  |    2 +-
 .../float-label-input/FloatingLabelInput.tsx  |    2 +-
 .../ProtectedRoute.test.tsx                   |    0
 .../ProtectedRoute.tsx                        |    0
 app/src/components/side-bar/SideBar.tsx       |    3 +-
 .../components/side-bar/chats/SearchBar.tsx   |    1 -
 .../side-bar/settings/ProfilePicture.tsx      |   29 +-
 app/src/constants.ts                          |   13 +-
 app/src/data/icons.tsx                        |   12 +
 app/src/data/sideBar.ts                       |    2 +-
 .../profile-settings/ProfileSettings.tsx      |  193 +-
 .../hooks/useDeleteProfilePicture.ts          |   23 +
 .../hooks/useUpdateProfilePicture.ts          |   23 +
 .../services/DeleteProfilePicture.ts          |   18 +
 .../services/GetProfileSettings.ts            |    2 +-
 .../services/UpdateProfilePicture.ts          |   26 +
 .../stories/components/ContactStoryIcon.tsx   |   80 +
 app/src/hooks/useRedux.ts                     |    5 -
 app/src/mocks/handlers.ts                     |    4 +
 app/src/mocks/mockData.ts                     |   48 +-
 .../mocks/profile-settings/profile-picture.ts |   51 +
 .../profile-settings/profile-settings.ts      |    5 +-
 app/src/mocks/stories/stories.ts              |  139 ++
 app/src/styles/GlobalStyles.tsx               |    2 +
 app/src/types/story.ts                        |   13 +
 app/src/types/user.ts                         |   22 +-
 35 files changed, 1843 insertions(+), 649 deletions(-)
 delete mode 100644 app/.env.example
 create mode 100644 app/src/components/ImageEditor.tsx
 rename app/src/components/{ProtectedRoute => protected-route}/ProtectedRoute.test.tsx (100%)
 rename app/src/components/{ProtectedRoute => protected-route}/ProtectedRoute.tsx (100%)
 create mode 100644 app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
 create mode 100644 app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
 create mode 100644 app/src/features/profile-settings/services/DeleteProfilePicture.ts
 create mode 100644 app/src/features/profile-settings/services/UpdateProfilePicture.ts
 create mode 100644 app/src/features/stories/components/ContactStoryIcon.tsx
 delete mode 100644 app/src/hooks/useRedux.ts
 create mode 100644 app/src/mocks/profile-settings/profile-picture.ts
 create mode 100644 app/src/mocks/stories/stories.ts
 create mode 100644 app/src/types/story.ts

diff --git a/app/.env.example b/app/.env.example
deleted file mode 100644
index 1ef1533b..00000000
--- a/app/.env.example
+++ /dev/null
@@ -1,7 +0,0 @@
-VITE_BACKEND_API= mock -> let it empty | backend -> http://testing.telware.tech:3000/api/v1
-VITE_REACT_APP_SITE_KEY=key
-VITE_SITE_SECRET=secret
-VITE_PORT=port
-VITE_ENV=development | production | test
-VITE_GITHUB_CLIENT_ID=github-client-id
-VITE_GOOGLE_CLIENT_ID=google-client-id
\ No newline at end of file
diff --git a/app/jest.setup.ts b/app/jest.setup.ts
index b62ca86e..d0de870d 100644
--- a/app/jest.setup.ts
+++ b/app/jest.setup.ts
@@ -1,13 +1 @@
 import "@testing-library/jest-dom";
-
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
diff --git a/app/package-lock.json b/app/package-lock.json
index ed9bdba5..635bf47e 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -19,8 +19,10 @@
         "@types/react-google-recaptcha": "^2.1.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-filerobot-image-editor": "^4.9.0",
         "react-google-recaptcha": "^3.1.0",
         "react-hook-form": "^7.53.0",
+        "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
@@ -89,9 +91,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
-      "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -103,10 +105,11 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz",
-      "integrity": "sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -116,6 +119,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
       "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.0",
@@ -142,12 +146,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz",
-      "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.26.0",
+        "@babel/parser": "^7.26.2",
         "@babel/types": "^7.26.0",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
@@ -162,6 +166,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
       "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.25.9"
       },
@@ -174,6 +179,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz",
       "integrity": "sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -187,6 +193,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
       "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.25.9",
         "@babel/helper-validator-option": "^7.25.9",
@@ -203,6 +210,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz",
       "integrity": "sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-member-expression-to-functions": "^7.25.9",
@@ -224,6 +232,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz",
       "integrity": "sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "regexpu-core": "^6.1.1",
@@ -241,6 +250,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
       "integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.22.6",
         "@babel/helper-plugin-utils": "^7.22.5",
@@ -257,6 +267,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
       "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -269,6 +280,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
       "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -282,6 +294,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
       "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -299,6 +312,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
       "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.25.9"
       },
@@ -311,6 +325,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
       "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -320,6 +335,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz",
       "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-wrap-function": "^7.25.9",
@@ -337,6 +353,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz",
       "integrity": "sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-member-expression-to-functions": "^7.25.9",
         "@babel/helper-optimise-call-expression": "^7.25.9",
@@ -354,6 +371,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz",
       "integrity": "sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -367,6 +385,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
       "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -379,6 +398,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
       "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -387,6 +407,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -396,6 +417,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
       "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -405,6 +427,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz",
       "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
         "@babel/traverse": "^7.25.9",
@@ -419,6 +442,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
       "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
         "@babel/types": "^7.26.0"
@@ -428,9 +452,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.0.tgz",
-      "integrity": "sha512-aP8x5pIw3xvYr/sXT+SEUwyhrXT8rUJRZltK/qN3Db80dcKpTett8cJxHyjk+xYSVXvNnl2SfcJVjbwxpOSscA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -447,6 +471,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz",
       "integrity": "sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/traverse": "^7.25.9"
@@ -463,6 +488,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz",
       "integrity": "sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -478,6 +504,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz",
       "integrity": "sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -493,6 +520,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz",
       "integrity": "sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
@@ -510,6 +538,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz",
       "integrity": "sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/traverse": "^7.25.9"
@@ -526,6 +555,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       },
@@ -593,6 +623,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz",
       "integrity": "sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -608,6 +639,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz",
       "integrity": "sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -649,6 +681,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
       "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -774,6 +807,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
       "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -789,6 +823,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
       "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.18.6",
         "@babel/helper-plugin-utils": "^7.18.6"
@@ -805,6 +840,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz",
       "integrity": "sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -820,6 +856,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
       "integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-remap-async-to-generator": "^7.25.9",
@@ -837,6 +874,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz",
       "integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -854,6 +892,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz",
       "integrity": "sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -869,6 +908,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz",
       "integrity": "sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -884,6 +924,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz",
       "integrity": "sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -900,6 +941,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz",
       "integrity": "sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -916,6 +958,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz",
       "integrity": "sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -936,6 +979,7 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -945,6 +989,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz",
       "integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/template": "^7.25.9"
@@ -961,6 +1006,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz",
       "integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -976,6 +1022,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz",
       "integrity": "sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -992,6 +1039,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz",
       "integrity": "sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1007,6 +1055,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz",
       "integrity": "sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1023,6 +1072,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz",
       "integrity": "sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1038,6 +1088,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz",
       "integrity": "sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1054,6 +1105,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz",
       "integrity": "sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1069,6 +1121,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
       "integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
@@ -1085,6 +1138,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz",
       "integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1102,6 +1156,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz",
       "integrity": "sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1117,6 +1172,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz",
       "integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1132,6 +1188,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz",
       "integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1147,6 +1204,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz",
       "integrity": "sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1162,6 +1220,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz",
       "integrity": "sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1178,6 +1237,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz",
       "integrity": "sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1195,6 +1255,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz",
       "integrity": "sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1213,6 +1274,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz",
       "integrity": "sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1229,6 +1291,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz",
       "integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1245,6 +1308,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz",
       "integrity": "sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1260,6 +1324,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz",
       "integrity": "sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1275,6 +1340,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz",
       "integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1290,6 +1356,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz",
       "integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1307,6 +1374,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz",
       "integrity": "sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-replace-supers": "^7.25.9"
@@ -1323,6 +1391,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz",
       "integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1338,6 +1407,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz",
       "integrity": "sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
@@ -1354,6 +1424,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz",
       "integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1369,6 +1440,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz",
       "integrity": "sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1385,6 +1457,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz",
       "integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -1402,6 +1475,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz",
       "integrity": "sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1417,6 +1491,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz",
       "integrity": "sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1432,6 +1507,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz",
       "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-module-imports": "^7.25.9",
@@ -1451,6 +1527,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz",
       "integrity": "sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/plugin-transform-react-jsx": "^7.25.9"
       },
@@ -1498,6 +1575,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz",
       "integrity": "sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1514,6 +1592,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz",
       "integrity": "sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "regenerator-transform": "^0.15.2"
@@ -1547,6 +1626,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz",
       "integrity": "sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1562,6 +1642,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz",
       "integrity": "sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1577,6 +1658,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz",
       "integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
@@ -1593,6 +1675,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz",
       "integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1608,6 +1691,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
       "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1623,6 +1707,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz",
       "integrity": "sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1638,6 +1723,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz",
       "integrity": "sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -1657,6 +1743,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
       "integrity": "sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
       },
@@ -1672,6 +1759,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz",
       "integrity": "sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1688,6 +1776,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz",
       "integrity": "sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1704,6 +1793,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz",
       "integrity": "sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1720,6 +1810,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.0.tgz",
       "integrity": "sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.26.0",
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -1803,6 +1894,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
       "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
         "@babel/types": "^7.4.4",
@@ -1817,6 +1909,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.25.9.tgz",
       "integrity": "sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-validator-option": "^7.25.9",
@@ -1837,6 +1930,7 @@
       "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz",
       "integrity": "sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
         "@babel/helper-validator-option": "^7.25.9",
@@ -1867,6 +1961,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
       "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
         "@babel/parser": "^7.25.9",
@@ -1880,6 +1975,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
       "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
         "@babel/generator": "^7.25.9",
@@ -1923,13 +2019,13 @@
       "license": "MIT"
     },
     "node_modules/@bundled-es-modules/cookie": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.0.tgz",
-      "integrity": "sha512-Or6YHg/kamKHpxULAdSqhGqnWFneIXu1NKvvfBBzKGwpVsYuFIQ5aBPHDnnoR3ghW1nvSkALd+EF9iMtY7Vjxw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz",
+      "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "cookie": "^0.5.0"
+        "cookie": "^0.7.2"
       }
     },
     "node_modules/@bundled-es-modules/statuses": {
@@ -1958,6 +2054,7 @@
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -1970,6 +2067,7 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -1980,6 +2078,7 @@
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.3.3.tgz",
       "integrity": "sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@emmetio/scanner": "^1.0.4"
       }
@@ -1989,6 +2088,7 @@
       "resolved": "https://registry.npmjs.org/@emmetio/css-abbreviation/-/css-abbreviation-2.1.8.tgz",
       "integrity": "sha512-s9yjhJ6saOO/uk1V74eifykk2CBYi01STTK3WlXWGOepyKa23ymJ053+DNQjpFcy1ingpaO7AxCcwLvHFY9tuw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@emmetio/scanner": "^1.0.4"
       }
@@ -1997,7 +2097,8 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@emmetio/scanner/-/scanner-1.0.4.tgz",
       "integrity": "sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.12.0",
@@ -2543,17 +2644,20 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
@@ -2572,9 +2676,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.1.tgz",
-      "integrity": "sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2664,9 +2768,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz",
-      "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
+      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2684,9 +2788,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.1.tgz",
-      "integrity": "sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
+      "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -2700,6 +2804,7 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@hookform/devtools/-/devtools-4.3.1.tgz",
       "integrity": "sha512-CrWxEoHQZaOXJZVQ8KBgOuAa8p2LI8M0DAN5GTRTmdCieRwFVjVDEmuTAVazWVRRkpEQSgSt3KYp7VmmqXdEnw==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/react": "^11.1.5",
         "@emotion/styled": "^11.3.0",
@@ -2716,18 +2821,18 @@
       }
     },
     "node_modules/@hookform/resolvers": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
-      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
       "license": "MIT",
       "peerDependencies": {
         "react-hook-form": "^7.0.0"
       }
     },
     "node_modules/@humanfs/core": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
-      "integrity": "sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2735,19 +2840,33 @@
       }
     },
     "node_modules/@humanfs/node": {
-      "version": "0.16.5",
-      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.5.tgz",
-      "integrity": "sha512-KSPA4umqSG4LHYRodq31VDwKAvaTF4xmVlzM8Aeh4PlU1JQ3IG0wiA8C25d3RQ9nJyM3mBHyI53K06VVL/oFFg==",
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@humanfs/core": "^0.19.0",
+        "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.3.0"
       },
       "engines": {
         "node": ">=18.18.0"
       }
     },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -2763,9 +2882,9 @@
       }
     },
     "node_modules/@humanwhocodes/retry": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
-      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2777,23 +2896,26 @@
       }
     },
     "node_modules/@inquirer/confirm": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.0.tgz",
-      "integrity": "sha512-6QEzj6bZg8atviRIL+pR0tODC854cYSjvZxkyCarr8DVaOJPEyuGys7GmEG3W0Rb8kKSQec7P6okt0sJvNneFw==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.1.tgz",
+      "integrity": "sha512-6ycMm7k7NUApiMGfVc32yIPp28iPKxhGRMqoNDiUjq2RyTAkbs5Fx0TdzBqhabcKvniDdAAvHCmsRjnNfTsogw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/core": "^10.0.0",
+        "@inquirer/core": "^10.0.1",
         "@inquirer/type": "^3.0.0"
       },
       "engines": {
         "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
       }
     },
     "node_modules/@inquirer/core": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.0.0.tgz",
-      "integrity": "sha512-7dwoKCGvgZGHWTZfOj2KLmbIAIdiXP9NTrwGaTO/XDfKMEmyBahZpnombiG6JDHmiOrmK3GLEJRXrWExXCDLmQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.0.1.tgz",
+      "integrity": "sha512-KKTgjViBQUi3AAssqjUFMnMO3CM3qwCHvePV9EW+zTKGKafFGFF01sc1yOIYjLJ7QU52G/FbzKc+c01WLzXmVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3295,9 +3417,9 @@
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.36.6",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.36.6.tgz",
-      "integrity": "sha512-issnYydStyH0wPEeU7CMwfO7kI668ffVtzKRMRS7H7BliOYuPuwEZxh9dwiXV+oeHBxT5SXT0wPwV8T7V2PJUA==",
+      "version": "0.36.9",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.36.9.tgz",
+      "integrity": "sha512-mMRDUBwSNeCgjSMEWfjoh4Rm9fbyZ7xQ9SBq8eGHiiyRn1ieTip3pNEt0wxWVPPxR4i1Rv9bTkeEbkX7M4c15A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3313,21 +3435,22 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.5.tgz",
-      "integrity": "sha512-3J96098GrC95XsLw/TpGNMxhUOnoG9NZ/17Pfk1CrJj+4rcuolsF2RdF3XAFTu/3a/A+5ouxlSIykzYz6Ee87g==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
+      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.5.tgz",
-      "integrity": "sha512-SbxFtO5I4cXfvhjAMgGib/t2lQUzcEzcDFYiRHRufZUeMMeXuoKaGsptfwAHTepYkv0VqcCwvxtvtWbpZLAbjQ==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
+      "integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7"
+        "@babel/runtime": "^7.26.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -3337,7 +3460,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.1.5",
+        "@mui/material": "^6.1.6",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3348,15 +3471,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.5.tgz",
-      "integrity": "sha512-rhaxC7LnlOG8zIVYv7BycNbWkC5dlm9A/tcDUp0CuwA7Zf9B9JP6M3rr50cNKxI7Z0GIUesAT86ceVm44quwnQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/core-downloads-tracker": "^6.1.5",
-        "@mui/system": "^6.1.5",
-        "@mui/types": "^7.2.18",
-        "@mui/utils": "^6.1.5",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
+      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.1.6",
+        "@mui/system": "^6.1.6",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -3375,7 +3499,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.5",
+        "@mui/material-pigment-css": "^6.1.6",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3396,12 +3520,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.5.tgz",
-      "integrity": "sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
+      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/utils": "^6.1.5",
+        "@babel/runtime": "^7.26.0",
+        "@mui/utils": "^6.1.6",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3422,11 +3547,12 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.5.tgz",
-      "integrity": "sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
+      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
+        "@babel/runtime": "^7.26.0",
         "@emotion/cache": "^11.13.1",
         "@emotion/serialize": "^1.3.2",
         "@emotion/sheet": "^1.4.0",
@@ -3455,15 +3581,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.5.tgz",
-      "integrity": "sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/private-theming": "^6.1.5",
-        "@mui/styled-engine": "^6.1.5",
-        "@mui/types": "^7.2.18",
-        "@mui/utils": "^6.1.5",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
+      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.1.6",
+        "@mui/styled-engine": "^6.1.6",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3494,9 +3621,10 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.18",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz",
-      "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==",
+      "version": "7.2.19",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
+      "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3507,12 +3635,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.5",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.5.tgz",
-      "integrity": "sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
+      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
-        "@mui/types": "^7.2.18",
+        "@babel/runtime": "^7.26.0",
+        "@mui/types": "^7.2.19",
         "@types/prop-types": "^15.7.13",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -3602,6 +3731,7 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -3642,9 +3772,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
-      "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
+      "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==",
       "cpu": [
         "arm"
       ],
@@ -3656,9 +3786,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
-      "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz",
+      "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==",
       "cpu": [
         "arm64"
       ],
@@ -3670,9 +3800,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
-      "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz",
+      "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==",
       "cpu": [
         "arm64"
       ],
@@ -3684,9 +3814,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
-      "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz",
+      "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==",
       "cpu": [
         "x64"
       ],
@@ -3697,10 +3827,38 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz",
+      "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz",
+      "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
-      "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz",
+      "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==",
       "cpu": [
         "arm"
       ],
@@ -3712,9 +3870,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
-      "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz",
+      "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==",
       "cpu": [
         "arm"
       ],
@@ -3726,9 +3884,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
-      "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz",
+      "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==",
       "cpu": [
         "arm64"
       ],
@@ -3740,9 +3898,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
-      "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz",
+      "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==",
       "cpu": [
         "arm64"
       ],
@@ -3754,9 +3912,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
-      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz",
+      "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==",
       "cpu": [
         "ppc64"
       ],
@@ -3768,9 +3926,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
-      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz",
+      "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==",
       "cpu": [
         "riscv64"
       ],
@@ -3782,9 +3940,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
-      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz",
+      "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==",
       "cpu": [
         "s390x"
       ],
@@ -3796,9 +3954,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
-      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz",
+      "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==",
       "cpu": [
         "x64"
       ],
@@ -3810,9 +3968,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
-      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz",
+      "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==",
       "cpu": [
         "x64"
       ],
@@ -3824,9 +3982,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
-      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz",
+      "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==",
       "cpu": [
         "arm64"
       ],
@@ -3838,9 +3996,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
-      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz",
+      "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==",
       "cpu": [
         "ia32"
       ],
@@ -3852,9 +4010,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
-      "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz",
+      "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==",
       "cpu": [
         "x64"
       ],
@@ -3865,6 +4023,45 @@
         "win32"
       ]
     },
+    "node_modules/@scaleflex/icons": {
+      "version": "2.10.27",
+      "resolved": "https://registry.npmjs.org/@scaleflex/icons/-/icons-2.10.27.tgz",
+      "integrity": "sha512-3E/tqXQrsuFIeGwDHE/ANEdDCPCYrt3ETk3/Q83M5ZZaFWdFWJG3bMeVBwNP2Nuul5OMr70LH3ce3krEObz98g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.0.0",
+        "@types/react-dom": ">=16.0.0",
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@scaleflex/ui": {
+      "version": "2.10.27",
+      "resolved": "https://registry.npmjs.org/@scaleflex/ui/-/ui-2.10.27.tgz",
+      "integrity": "sha512-Id9EJjS4NWGn9V0pZRCk8YpM2PVEK8/a/BtTbgEW5L7wPI/APmZ9vGtCTM3HyTEBrfnvWmDlb0T5CfpozywKyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.6.0",
+        "@scaleflex/icons": "^2.10.27",
+        "@tippyjs/react": "^4.2.6",
+        "@types/lodash.merge": "^4.6.9",
+        "lodash.merge": "^4.6.2",
+        "prop-types": "^15.7.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.0.0",
+        "@types/react-dom": ">=16.0.0",
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0",
+        "styled-components": ">=5.0.0"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3897,6 +4094,7 @@
       "resolved": "https://registry.npmjs.org/@styled/typescript-styled-plugin/-/typescript-styled-plugin-1.0.1.tgz",
       "integrity": "sha512-4n9uYJiui4hqGIEMvs/u7sfjbs1/84shYt2Fxcm0JQbvUGfuFhtsqVG5y1hSvw5kTwdpIe4rbXMMOwVHcuAh1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@vscode/emmet-helper": "^2.9.2",
         "typescript-template-language-service-decorator": "^2.3.2",
@@ -3906,9 +4104,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.16.tgz",
-      "integrity": "sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==",
+      "version": "5.59.17",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.17.tgz",
+      "integrity": "sha512-jWdDiif8kaqnRGHNXAa9CnudtxY5v9DUxXhodgqX2Rwzj+1UwStDHEbBd9IA5C7VYAaJ2s+BxFR6PUBs8ERorA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3916,9 +4114,9 @@
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.58.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.58.0.tgz",
-      "integrity": "sha512-iFdQEFXaYYxqgrv63ots+65FGI+tNp5ZS5PdMU1DWisxk3fez5HG3FyVlbUva+RdYS5hSLbxZ9aw3yEs97GNTw==",
+      "version": "5.59.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.59.19.tgz",
+      "integrity": "sha512-Gw+3zsADpqiYgx/6MMr9bP1+x2LR8vOuGjo5Un/89qwwP3z7WAHPWFagLFDYkLq68NX7ekUpW/EOYlUMugMXGA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -3926,12 +4124,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.16.tgz",
-      "integrity": "sha512-MuyWheG47h6ERd4PKQ6V8gDyBu3ThNG22e1fRVwvq6ap3EqsFhyuxCAwhNP/03m/mLg+DAb0upgbPaX6VB+CkQ==",
+      "version": "5.59.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.19.tgz",
+      "integrity": "sha512-xLRfyFyQOFcLltKCds0LijfC6/HQJrrTTnZB8ciyn74LIkVAm++vZJ6eUVG20RmJtdP8REdy7vSOYW4M3//XLA==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.59.16"
+        "@tanstack/query-core": "5.59.17"
       },
       "funding": {
         "type": "github",
@@ -3942,19 +4140,19 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.16.tgz",
-      "integrity": "sha512-Dejo39QBXmDqXZ3vdrk7vHDvs7TvL573/AX2NveMBmRAufAPYuE3oWSKP/gGqkDfEqyr4CmldOj+v9cKskUchQ==",
+      "version": "5.59.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.19.tgz",
+      "integrity": "sha512-mYFWTHLtJr2HdyYPZPzzvQ2ksCsSL6L04fCtusPFD3waskXrtmvWvyuDIGeEGdVAYS0Urwxw/0sYvcTVQZH+zQ==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-devtools": "5.58.0"
+        "@tanstack/query-devtools": "5.59.19"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.59.16",
+        "@tanstack/react-query": "^5.59.19",
         "react": "^18 || ^19"
       }
     },
@@ -3980,10 +4178,11 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.2.tgz",
-      "integrity": "sha512-P6GJD4yqc9jZLbe98j/EkyQDTPgqftohZF5FBkHY5BUERZmcf4HeO2k0XaefEg329ux2p21i1A1DmyQ1kKw2Jw==",
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
+      "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@adobe/css-tools": "^4.4.0",
         "aria-query": "^5.0.0",
@@ -4025,6 +4224,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz",
       "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -4052,6 +4252,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
       "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12",
         "npm": ">=6"
@@ -4060,11 +4261,25 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tippyjs/react": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz",
+      "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 10"
       }
@@ -4073,25 +4288,29 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
@@ -4202,6 +4421,7 @@
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.14.tgz",
       "integrity": "sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -4240,6 +4460,7 @@
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
       "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "@types/tough-cookie": "*",
@@ -4254,14 +4475,24 @@
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.12",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.12.tgz",
-      "integrity": "sha512-sviUmCE8AYdaF/KIHLDJBQgeYzPBI0vf/17NaYehBJfYD1j6/L95Slh07NlyK2iNyBNaEkb3En2jRt+a8y3xZQ=="
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash.merge": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.merge/-/lodash.merge-4.6.9.tgz",
+      "integrity": "sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
     },
     "node_modules/@types/node": {
-      "version": "22.8.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.0.tgz",
-      "integrity": "sha512-84rafSBHC/z1i1E3p0cJwKA+CfYDNSXX9WSZBRopjIzLET8oNt6ht2tei4C7izwDeEiLLfdeSVBv1egOH916hg==",
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4294,7 +4525,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/react": "*"
@@ -4304,6 +4534,17 @@
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.9.tgz",
       "integrity": "sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.8",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz",
+      "integrity": "sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4312,6 +4553,7 @@
       "version": "4.4.11",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
       "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
@@ -4388,17 +4630,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.11.0.tgz",
-      "integrity": "sha512-KhGn2LjW1PJT2A/GfDpiyOfS4a8xHQv2myUagTM5+zsormOmBlYsnQ6pobJ8XxJmh6hnHwa2Mbe3fPrDJoDhbA==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.13.0.tgz",
+      "integrity": "sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.11.0",
-        "@typescript-eslint/type-utils": "8.11.0",
-        "@typescript-eslint/utils": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
+        "@typescript-eslint/scope-manager": "8.13.0",
+        "@typescript-eslint/type-utils": "8.13.0",
+        "@typescript-eslint/utils": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -4422,16 +4664,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.11.0.tgz",
-      "integrity": "sha512-lmt73NeHdy1Q/2ul295Qy3uninSqi6wQI18XwSpm8w0ZbQXUpjCAWP1Vlv/obudoBiIjJVjlztjQ+d/Md98Yxg==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.13.0.tgz",
+      "integrity": "sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.11.0",
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/typescript-estree": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
+        "@typescript-eslint/scope-manager": "8.13.0",
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/typescript-estree": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4451,14 +4693,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
-      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz",
+      "integrity": "sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0"
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4469,14 +4711,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.11.0.tgz",
-      "integrity": "sha512-ItiMfJS6pQU0NIKAaybBKkuVzo6IdnAhPFZA/2Mba/uBjuPQPet/8+zh5GtLHwmuFRShZx+8lhIs7/QeDHflOg==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.13.0.tgz",
+      "integrity": "sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.11.0",
-        "@typescript-eslint/utils": "8.11.0",
+        "@typescript-eslint/typescript-estree": "8.13.0",
+        "@typescript-eslint/utils": "8.13.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -4494,9 +4736,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.13.0.tgz",
+      "integrity": "sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4508,14 +4750,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
-      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz",
+      "integrity": "sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -4576,16 +4818,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.11.0.tgz",
-      "integrity": "sha512-CYiX6WZcbXNJV7UNB4PLDIBtSdRmRI/nb0FMyqHPTQD1rMjA0foPLaPUV39C/MxkTd/QKSeX+Gb34PPsDVC35g==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.13.0.tgz",
+      "integrity": "sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.11.0",
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/typescript-estree": "8.11.0"
+        "@typescript-eslint/scope-manager": "8.13.0",
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/typescript-estree": "8.13.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4599,13 +4841,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz",
+      "integrity": "sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
+        "@typescript-eslint/types": "8.13.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -4654,6 +4896,7 @@
       "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.9.3.tgz",
       "integrity": "sha512-rB39LHWWPQYYlYfpv9qCoZOVioPCftKXXqrsyqN1mTWZM6dTnONT63Db+03vgrBbHzJN45IrgS/AGxw9iiqfEw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "emmet": "^2.4.3",
         "jsonc-parser": "^2.3.0",
@@ -4666,19 +4909,21 @@
       "version": "0.0.18",
       "resolved": "https://registry.npmjs.org/@vscode/l10n/-/l10n-0.0.18.tgz",
       "integrity": "sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
       "deprecated": "Use your platform's native atob() and btoa() methods instead",
-      "dev": true
+      "dev": true,
+      "license": "BSD-3-Clause"
     },
     "node_modules/acorn": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
-      "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4693,6 +4938,7 @@
       "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
       "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "acorn": "^8.1.0",
         "acorn-walk": "^8.0.2"
@@ -4713,6 +4959,7 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -4720,6 +4967,19 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -4797,7 +5057,8 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/argparse": {
       "version": "1.0.10",
@@ -4823,19 +5084,22 @@
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
       "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
       "integrity": "sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jest/transform": "^29.7.0",
         "@types/babel__core": "^7.1.14",
@@ -4905,6 +5169,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.2.tgz",
       "integrity": "sha512-9KtaCazHee2xc0ibfqsDeamwDps6FZNo5S0Q81dUqEuFzVwPhcT4J5jOqIVvgCA3Q/wO9hKYxN/Ds3tIsp5ygg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "find-babel-config": "^2.1.1",
         "glob": "^9.3.3",
@@ -4917,13 +5182,15 @@
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
       "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.11",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
       "integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
         "@babel/helper-define-polyfill-provider": "^0.6.2",
@@ -4938,6 +5205,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
       "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.2",
         "core-js-compat": "^3.38.0"
@@ -4951,6 +5219,7 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz",
       "integrity": "sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.2"
       },
@@ -5052,6 +5321,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "caniuse-lite": "^1.0.30001669",
         "electron-to-chromium": "^1.5.41",
@@ -5070,6 +5340,7 @@
       "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
       "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-json-stable-stringify": "2.x"
       },
@@ -5123,9 +5394,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001669",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
-      "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
+      "version": "1.0.30001677",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
       "dev": true,
       "funding": [
         {
@@ -5140,7 +5411,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -5239,6 +5511,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -5286,6 +5559,7 @@
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5308,9 +5582,9 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5318,12 +5592,13 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.38.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
-      "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
+      "version": "3.39.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz",
+      "integrity": "sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.3"
+        "browserslist": "^4.24.2"
       },
       "funding": {
         "type": "opencollective",
@@ -5372,7 +5647,8 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
@@ -5420,7 +5696,28 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
       "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/csstype": {
       "version": "3.1.3",
@@ -5428,6 +5725,21 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/data-urls": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -5449,7 +5761,8 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/dedent": {
       "version": "1.5.3",
@@ -5488,6 +5801,7 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5516,6 +5830,7 @@
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
       }
@@ -5542,6 +5857,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
       "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.7",
         "csstype": "^3.0.2"
@@ -5553,6 +5869,7 @@
       "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
       "deprecated": "Use your platform's native DOMException instead",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "webidl-conversions": "^7.0.0"
       },
@@ -5565,6 +5882,7 @@
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
       "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "jake": "^10.8.5"
       },
@@ -5576,10 +5894,11 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.45",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.45.tgz",
-      "integrity": "sha512-vOzZS6uZwhhbkZbcRyiy99Wg+pYFV5hk+5YaECvx0+Z31NR3Tt5zS6dze2OepT6PCTzVzT0dIJItti+uAW5zmw==",
-      "dev": true
+      "version": "1.5.52",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
+      "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/emittery": {
       "version": "0.13.1",
@@ -5599,6 +5918,13 @@
       "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.4.11.tgz",
       "integrity": "sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==",
       "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "./packages/scanner",
+        "./packages/abbreviation",
+        "./packages/css-abbreviation",
+        "./"
+      ],
       "dependencies": {
         "@emmetio/abbreviation": "^2.3.3",
         "@emmetio/css-abbreviation": "^2.1.8"
@@ -5616,6 +5942,7 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
       },
@@ -5698,6 +6025,7 @@
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
       "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
@@ -5726,22 +6054,22 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz",
-      "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
+      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.11.0",
+        "@eslint-community/regexpp": "^4.12.1",
         "@eslint/config-array": "^0.18.0",
         "@eslint/core": "^0.7.0",
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.13.0",
+        "@eslint/js": "9.14.0",
         "@eslint/plugin-kit": "^0.2.0",
-        "@humanfs/node": "^0.16.5",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.3.1",
+        "@humanwhocodes/retry": "^0.4.0",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
@@ -5749,9 +6077,9 @@
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.1.0",
-        "eslint-visitor-keys": "^4.1.0",
-        "espree": "^10.2.0",
+        "eslint-scope": "^8.2.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -5810,9 +6138,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.1.0.tgz",
-      "integrity": "sha512-14dSvlhaVhKKsa9Fx1l8A17s7ah7Ef7wCakJ10LYk6+GYmP9yDti2oq2SEwcyndt6knfcZyhyxwY3i9yL78EQw==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -5827,9 +6155,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.1.0.tgz",
-      "integrity": "sha512-Q7lok0mqMUSf5a/AdAZkA5a/gHcO6snwQClVNNvFKCAVlxXucdU8pKydU5ZVZjBx5xr37vGbFFWtLQYreLzrZg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -5889,15 +6217,15 @@
       }
     },
     "node_modules/espree": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.2.0.tgz",
-      "integrity": "sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.12.0",
+        "acorn": "^8.14.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.1.0"
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6105,6 +6433,7 @@
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
       "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "minimatch": "^5.0.1"
       }
@@ -6114,6 +6443,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -6123,6 +6453,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
       "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -6148,6 +6479,7 @@
       "resolved": "https://registry.npmjs.org/find-babel-config/-/find-babel-config-2.1.2.tgz",
       "integrity": "sha512-ZfZp1rQyp4gyuxqt1ZqjFGVeVBvmpURMqdIWXbPRfB97Bf6BzdK/xSIbylEINzQ0kB5tlDQfn9HkNXXWsqTqLg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "json5": "^2.2.3"
       }
@@ -6198,6 +6530,7 @@
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
       "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -6340,9 +6673,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "15.11.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
-      "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
+      "version": "15.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
+      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6356,7 +6689,8 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/goober": {
       "version": "2.1.16",
@@ -6396,7 +6730,8 @@
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
       "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
-      "dev": true
+      "dev": true,
+      "license": "(Apache-2.0 OR MPL-1.1)"
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
@@ -6442,6 +6777,19 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -6449,6 +6797,35 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -6464,6 +6841,7 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -6476,6 +6854,7 @@
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
       "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "harmony-reflect": "^1.4.6"
       },
@@ -6673,7 +7052,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/is-stream": {
       "version": "2.0.1",
@@ -6776,11 +7156,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/its-fine": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
+      "integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": ">=18.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
       "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "async": "^3.2.3",
         "chalk": "^4.0.2",
@@ -6799,6 +7193,7 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -7132,6 +7527,7 @@
       "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz",
       "integrity": "sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jest/environment": "^29.7.0",
         "@jest/fake-timers": "^29.7.0",
@@ -7154,201 +7550,6 @@
         }
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dev": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "dev": true,
-      "dependencies": {
-        "cssom": "~0.3.6"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-      "dev": true
-    },
-    "node_modules/jest-environment-jsdom/node_modules/data-urls": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
-      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
-      "dev": true,
-      "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-      "dev": true,
-      "dependencies": {
-        "whatwg-encoding": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-      "dev": true,
-      "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/jsdom": {
-      "version": "20.0.3",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
-      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
-      "dev": true,
-      "dependencies": {
-        "abab": "^2.0.6",
-        "acorn": "^8.8.1",
-        "acorn-globals": "^7.0.0",
-        "cssom": "^0.5.0",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^3.0.2",
-        "decimal.js": "^10.4.2",
-        "domexception": "^4.0.0",
-        "escodegen": "^2.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.2",
-        "parse5": "^7.1.1",
-        "saxes": "^6.0.0",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0",
-        "ws": "^8.11.0",
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "canvas": "^2.5.0"
-      },
-      "peerDependenciesMeta": {
-        "canvas": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/tr46": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-      "dev": true,
-      "dependencies": {
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-      "dev": true,
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/whatwg-url": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
-      "dev": true,
-      "dependencies": {
-        "tr46": "^3.0.0",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/jest-environment-jsdom/node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/jest-environment-node": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
@@ -7936,8 +8137,54 @@
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
       },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "20.0.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
+      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.6",
+        "acorn": "^8.8.1",
+        "acorn-globals": "^7.0.0",
+        "cssom": "^0.5.0",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^3.0.2",
+        "decimal.js": "^10.4.2",
+        "domexception": "^4.0.0",
+        "escodegen": "^2.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.2",
+        "parse5": "^7.1.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.2",
+        "w3c-xmlserializer": "^4.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0",
+        "ws": "^8.11.0",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
     "node_modules/jsesc": {
@@ -7996,7 +8243,8 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
       "integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/keyv": {
       "version": "4.5.4",
@@ -8018,6 +8266,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/konva": {
+      "version": "9.3.16",
+      "resolved": "https://registry.npmjs.org/konva/-/konva-9.3.16.tgz",
+      "integrity": "sha512-qa47cefGDDHzkToGRGDsy24f/Njrz7EHP56jQ8mlDcjAPO7vkfTDeoBDIfmF7PZtpfzDdooafQmEUJMDU2F7FQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/lavrton"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/konva"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/lavrton"
+        }
+      ],
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8052,6 +8321,7 @@
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/little-state-machine/-/little-state-machine-4.8.0.tgz",
       "integrity": "sha512-xfi5+iDxTLhu0hbnNubUs+qoQQqxhtEZeObP5ELjUlHnl74bbasY7mOonsGQrAouyrbag3ebNLSse5xX1T7buQ==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17 || ^18"
       }
@@ -8079,7 +8349,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -8091,13 +8362,13 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/loose-envify": {
@@ -8117,6 +8388,7 @@
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -8165,7 +8437,8 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -8213,6 +8486,7 @@
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -8222,6 +8496,7 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8267,6 +8542,7 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
       "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=8"
       }
@@ -8278,9 +8554,9 @@
       "license": "MIT"
     },
     "node_modules/msw": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-2.5.1.tgz",
-      "integrity": "sha512-V0BmHvFkbWGXqbyrc+XiuQ8DU3qzcb6lb8gB9Vzltp3cgHLHLCDF/KmmFo0xw58StNaRMTebw3/xpWVvU9xq9g==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.0.tgz",
+      "integrity": "sha512-n3tx2w0MZ3H4pxY0ozrQ4sNPzK/dGtlr2cIIyuEsgq2Bhy4wvcW6ZH2w/gXM9+MEUY6HC1fWhqtcXDxVZr5Jxw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -8290,6 +8566,7 @@
         "@bundled-es-modules/tough-cookie": "^0.1.6",
         "@inquirer/confirm": "^5.0.0",
         "@mswjs/interceptors": "^0.36.5",
+        "@open-draft/deferred-promise": "^2.2.0",
         "@open-draft/until": "^2.1.0",
         "@types/cookie": "^0.6.0",
         "@types/statuses": "^2.0.4",
@@ -8380,7 +8657,8 @@
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -8409,12 +8687,14 @@
       "version": "2.2.13",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
       "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8556,10 +8836,11 @@
       }
     },
     "node_modules/parse5": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
-      "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "entities": "^4.5.0"
       },
@@ -8608,6 +8889,7 @@
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -8623,13 +8905,15 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/path-scurry/node_modules/minipass": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -8697,6 +8981,7 @@
       "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
       "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "find-up": "^3.0.0"
       },
@@ -8709,6 +8994,7 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
       "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^3.0.0"
       },
@@ -8721,6 +9007,7 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
       "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
@@ -8734,6 +9021,7 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -8749,6 +9037,7 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
       "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^2.0.0"
       },
@@ -8761,6 +9050,7 @@
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
       "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -8814,6 +9104,7 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
       "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -8880,6 +9171,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -8889,7 +9181,8 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
     },
     "node_modules/property-expr": {
       "version": "2.0.6",
@@ -8975,6 +9268,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
       "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "license": "MIT",
       "dependencies": {
         "hoist-non-react-statics": "^3.3.0",
         "prop-types": "^15.5.0"
@@ -8996,10 +9290,67 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-filerobot-image-editor": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/react-filerobot-image-editor/-/react-filerobot-image-editor-4.9.0.tgz",
+      "integrity": "sha512-wSmbleDAJKR/m848+klGs6sS3veaWDEdhkc7KHb916HT0NcD2RLyAapNn/tjLJK/OPPJtuMod176nIljqo1JtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@scaleflex/icons": "2.10.27",
+        "@scaleflex/ui": "2.10.27",
+        "konva": "9.3.6",
+        "prop-types": "15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0",
+        "react-konva": ">=17.0.0",
+        "styled-components": ">=5.3.5"
+      }
+    },
+    "node_modules/react-filerobot-image-editor/node_modules/konva": {
+      "version": "9.3.6",
+      "resolved": "https://registry.npmjs.org/konva/-/konva-9.3.6.tgz",
+      "integrity": "sha512-dqR8EbcM0hjuilZCBP6xauQ5V3kH3m9kBcsDkqPypQuRgsXbcXUrxqYxhNbdvKZpYNW8Amq94jAD/C0NY3qfBQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/lavrton"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/konva"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/lavrton"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react-filerobot-image-editor/node_modules/prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "node_modules/react-filerobot-image-editor/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/react-google-recaptcha": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
       "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
       "dependencies": {
         "prop-types": "^15.5.0",
         "react-async-script": "^1.2.0"
@@ -9009,9 +9360,10 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.53.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
-      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
+      "version": "7.53.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz",
+      "integrity": "sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==",
+      "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
       },
@@ -9028,6 +9380,7 @@
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
       "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "goober": "^2.1.10"
       },
@@ -9043,6 +9396,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/react-international-phone/-/react-international-phone-4.3.0.tgz",
       "integrity": "sha512-lIntIkwq2j0m3j4RsRiGJl/buHMLBd+mQ9S9RfiX3KbiUCUtbawoPCV2r8BvyeRMZI0cDtovoukBCuZ+70QzJA==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
@@ -9053,6 +9407,55 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/react-konva": {
+      "version": "18.2.10",
+      "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-18.2.10.tgz",
+      "integrity": "sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/lavrton"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/konva"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/lavrton"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.2",
+        "its-fine": "^1.1.1",
+        "react-reconciler": "~0.29.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "konva": "^8.0.1 || ^7.2.5 || ^9.0.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
+    "node_modules/react-reconciler": {
+      "version": "0.29.2",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz",
+      "integrity": "sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
@@ -9123,6 +9526,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/react-simple-animate/-/react-simple-animate-3.5.2.tgz",
       "integrity": "sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==",
+      "license": "Mit",
       "peerDependencies": {
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
@@ -9131,6 +9535,7 @@
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
       "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
@@ -9188,13 +9593,15 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
       "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/regenerate-unicode-properties": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
       "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2"
       },
@@ -9213,6 +9620,7 @@
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
       "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
       }
@@ -9222,6 +9630,7 @@
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz",
       "integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.2.0",
@@ -9238,13 +9647,15 @@
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
       "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/regjsparser": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.1.tgz",
-      "integrity": "sha512-1DHODs4B8p/mQHU9kr+jv8+wIC9mtG4eBHxWxIq5mhjE3D5oORhCc6deRKzTjs9DcfRFmj9BHSDguZklqCGFWQ==",
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.2.tgz",
+      "integrity": "sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "jsesc": "~3.0.2"
       },
@@ -9338,9 +9749,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.24.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
-      "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz",
+      "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9354,22 +9765,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.24.0",
-        "@rollup/rollup-android-arm64": "4.24.0",
-        "@rollup/rollup-darwin-arm64": "4.24.0",
-        "@rollup/rollup-darwin-x64": "4.24.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.24.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.24.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.24.0",
-        "@rollup/rollup-linux-arm64-musl": "4.24.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.24.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.24.0",
-        "@rollup/rollup-linux-x64-gnu": "4.24.0",
-        "@rollup/rollup-linux-x64-musl": "4.24.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.24.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.24.0",
-        "@rollup/rollup-win32-x64-msvc": "4.24.0",
+        "@rollup/rollup-android-arm-eabi": "4.24.4",
+        "@rollup/rollup-android-arm64": "4.24.4",
+        "@rollup/rollup-darwin-arm64": "4.24.4",
+        "@rollup/rollup-darwin-x64": "4.24.4",
+        "@rollup/rollup-freebsd-arm64": "4.24.4",
+        "@rollup/rollup-freebsd-x64": "4.24.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.4",
+        "@rollup/rollup-linux-arm64-musl": "4.24.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.4",
+        "@rollup/rollup-linux-x64-gnu": "4.24.4",
+        "@rollup/rollup-linux-x64-musl": "4.24.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.4",
+        "@rollup/rollup-win32-x64-msvc": "4.24.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -9401,13 +9814,15 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
@@ -9751,7 +10166,8 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
@@ -9803,6 +10219,15 @@
       "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
       "license": "MIT"
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -9845,10 +10270,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/tr46": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ts-api-utils": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
-      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
+      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -9863,6 +10301,7 @@
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.2.5.tgz",
       "integrity": "sha512-KD8zB2aAZrcKIdGk4OwpJggeLcH1FgrICqDSROWqlnJXGCXK4Mn6FcdK2B6670Xr73lHMG1kHw8R87A0ecZ+vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "bs-logger": "^0.2.6",
         "ejs": "^3.1.10",
@@ -9911,6 +10350,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -9923,6 +10363,7 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -9966,6 +10407,7 @@
       "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.4.tgz",
       "integrity": "sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "tsconfck": "bin/tsconfck.js"
       },
@@ -10038,15 +10480,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.11.0.tgz",
-      "integrity": "sha512-cBRGnW3FSlxaYwU8KfAewxFK5uzeOAp0l2KebIlPDOT5olVi65KDG/yjBooPBG0kGW/HLkoz1c/iuBFehcS3IA==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.13.0.tgz",
+      "integrity": "sha512-vIMpDRJrQd70au2G8w34mPps0ezFSPMEX4pXkTzUkrNbRX+36ais2ksGWN0esZL+ZMaFJEneOBHzCgSqle7DHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.11.0",
-        "@typescript-eslint/parser": "8.11.0",
-        "@typescript-eslint/utils": "8.11.0"
+        "@typescript-eslint/eslint-plugin": "8.13.0",
+        "@typescript-eslint/parser": "8.13.0",
+        "@typescript-eslint/utils": "8.13.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -10065,7 +10507,8 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.3.2.tgz",
       "integrity": "sha512-hN0zNkr5luPCeXTlXKxsfBPlkAzx86ZRM1vPdL7DbEqqWoeXSxplACy98NpKpLmXsdq7iePUzAXloCAoPKBV6A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/undici": {
       "version": "6.20.1",
@@ -10089,6 +10532,7 @@
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
       "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -10098,6 +10542,7 @@
       "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
         "unicode-property-aliases-ecmascript": "^2.0.0"
@@ -10111,6 +10556,7 @@
       "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
       "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -10120,6 +10566,7 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -10153,6 +10600,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.0"
@@ -10189,6 +10637,7 @@
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
       "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "dequal": "^2.0.2"
@@ -10215,6 +10664,7 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -10223,7 +10673,8 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/v8-to-istanbul": {
       "version": "9.3.0",
@@ -10301,10 +10752,11 @@
       }
     },
     "node_modules/vite-tsconfig-paths": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.0.1.tgz",
-      "integrity": "sha512-yqwv+LstU7NwPeNqajZzLEBVpUFU6Dugtb2P84FXuvaoYA+/70l9MHE+GYfYAycVyPSDYZ7mjOFuYBRqlEpTig==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.0.tgz",
+      "integrity": "sha512-Y1PLGHCJfAq1Zf4YIGEsmuU/NCX1epoZx9zwSr32Gjn3aalwQHRKr5aUmbo6r0JHeHkqmWpmDg7WOynhYXw1og==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^4.1.1",
         "globrex": "^0.1.2",
@@ -10353,6 +10805,7 @@
       "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-6.3.1.tgz",
       "integrity": "sha512-1BzTBuJfwMc3A0uX4JBdJgoxp74cjj4q2mDJdp49yD/GuAq4X0k5WtK6fNcMYr+FfJ9nqgR6lpfCSZDkARJ5qQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@vscode/l10n": "^0.0.18",
         "vscode-languageserver-textdocument": "^1.0.12",
@@ -10364,25 +10817,42 @@
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
       "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/vscode-languageserver-textdocument": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
       "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/vscode-languageserver-types": {
       "version": "3.17.5",
       "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
       "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/vscode-uri": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz",
       "integrity": "sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
     },
     "node_modules/walker": {
       "version": "1.0.8",
@@ -10399,6 +10869,44 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
       "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
       "engines": {
         "node": ">=12"
       }
@@ -10470,6 +10978,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -10486,11 +10995,22 @@
         }
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/y18n": {
       "version": "5.0.8",
@@ -10506,7 +11026,8 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -10551,6 +11072,7 @@
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
diff --git a/app/package.json b/app/package.json
index 957b8f5f..34a85c76 100644
--- a/app/package.json
+++ b/app/package.json
@@ -25,8 +25,10 @@
     "@types/react-google-recaptcha": "^2.1.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-filerobot-image-editor": "^4.9.0",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.0",
+    "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
diff --git a/app/public/mockServiceWorker.js b/app/public/mockServiceWorker.js
index f62264a6..6eb80522 100644
--- a/app/public/mockServiceWorker.js
+++ b/app/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.5.1'
+const PACKAGE_VERSION = '2.6.0'
 const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
diff --git a/app/src/App.tsx b/app/src/App.tsx
index e4680f34..7e07bbe8 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -12,7 +12,7 @@ import { useAppSelector } from "./hooks/useGlobalState";
 import Login from "./pages/Login";
 import Signup from "./pages/Signup";
 import ResetPasswordModal from "@features/authentication/reset-password/ResetPasswordModal";
-import ProtectedRoute from "@components/ProtectedRoute/ProtectedRoute";
+import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
 
 const queryClient = new QueryClient({
diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index c5a5e1a1..ca36aab8 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -1,21 +1,20 @@
 import styled from "styled-components";
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
-import { media } from "data/deviceSize";
+import { MOBILE_VIEW } from "@constants";
 
 const StyledApp = styled.div`
-  @media ${media.mobile} {
-    & > main {
-      display: none;
-    }
-  }
-
-  @media ${media.desktop} {
-    display: grid;
-    grid-template-columns: 1fr 3fr;
+  display: grid;
+  grid-template-columns: 24rem auto;
+  height: 100dvh;
 
+  & > main {
+    display: block;
+  }
+  @media ${MOBILE_VIEW} {
+    display: block;
     & > main {
-      display: block;
+      display: none;
     }
   }
 `;
diff --git a/app/src/components/Button.tsx b/app/src/components/Button.tsx
index b15ffa19..6f9adeef 100644
--- a/app/src/components/Button.tsx
+++ b/app/src/components/Button.tsx
@@ -30,6 +30,16 @@ const Button = styled.button<{ $type?: string }>`
       font-weight: normal;
       letter-spacing: normal;
     `}
+  ${(props) =>
+    props.$type === "danger" &&
+    css`
+      background-color: var(--color-error);
+      color: var(--color-text-button);
+      font-weight: normal;
+      &:hover {
+        background-color: var(--color-error-shade);
+      }
+    `}
 `;
 
 export default Button;
diff --git a/app/src/components/ImageEditor.tsx b/app/src/components/ImageEditor.tsx
new file mode 100644
index 00000000..200edab7
--- /dev/null
+++ b/app/src/components/ImageEditor.tsx
@@ -0,0 +1,132 @@
+import FilerobotImageEditor, {
+  TABS,
+  TOOLS,
+} from "react-filerobot-image-editor";
+import styled from "styled-components";
+
+interface imageEditorProps {
+  isOpen: boolean;
+  closeImgEditor: () => void;
+  src: string;
+  onImageSave: (file: File) => void;
+  isProfileImage?: boolean;
+}
+
+const StyledContainer = styled.div<{ $isOpen: boolean }>`
+  display: ${({ $isOpen }) => ($isOpen ? "flex" : "none")};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+`;
+
+function ImageEditor({
+  isOpen,
+  closeImgEditor,
+  src,
+  onImageSave,
+  isProfileImage,
+}: imageEditorProps) {
+  const handleSave = async (editedImageObject: { imageBase64?: string }) => {
+    if (editedImageObject.imageBase64) {
+      const response = await fetch(editedImageObject.imageBase64);
+      const blob = await response.blob();
+
+      const file = new File([blob], "edited-image.jpg", {
+        type: "image/jpeg",
+        lastModified: Date.now(),
+      });
+
+      onImageSave(file);
+      closeImgEditor();
+    } else {
+      console.error("Image base64 data is undefined");
+    }
+  };
+  return (
+    <StyledContainer $isOpen={isOpen}>
+      {isOpen && (
+        <div>
+          <FilerobotImageEditor
+            source={src}
+            forceToPngInEllipticalCrop={true}
+            onSave={(editedImageObject) => handleSave(editedImageObject)}
+            onClose={closeImgEditor}
+            annotationsCommon={{
+              fill: "#ff0000",
+            }}
+            Text={{ text: "I Love TelWare" }}
+            Rotate={{ angle: 90, componentType: "slider" }}
+            Crop={
+              isProfileImage
+                ? {
+                    ratio: 1,
+                  }
+                : {
+                    presetsItems: [
+                      {
+                        titleKey: "classicTv",
+                        descriptionKey: "4:3",
+                        ratio: 4 / 3,
+                      },
+                      {
+                        titleKey: "cinemascope",
+                        descriptionKey: "21:9",
+                        ratio: 21 / 9,
+                      },
+                    ],
+                    presetsFolders: [
+                      {
+                        titleKey: "socialMedia",
+                        groups: [
+                          {
+                            titleKey: "facebook",
+                            items: [
+                              {
+                                titleKey: "profile",
+                                width: 180,
+                                height: 180,
+                                descriptionKey: "fbProfileSize",
+                              },
+                              {
+                                titleKey: "coverPhoto",
+                                width: 820,
+                                height: 312,
+                                descriptionKey: "fbCoverPhotoSize",
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  }
+            }
+            theme={{
+              palette: {
+                warning: "#ff0000c0",
+                "warning-active": "#ff0000",
+                "warning-hover": "#ff0000",
+              },
+            }}
+            tabsIds={
+              isProfileImage
+                ? [TABS.ADJUST]
+                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE, TABS.RESIZE]
+            }
+            defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
+            defaultToolId={TOOLS.RESIZE}
+            defaultSavedImageQuality={0.95}
+            savingPixelRatio={4}
+            previewPixelRatio={4}
+          />
+        </div>
+      )}
+    </StyledContainer>
+  );
+}
+
+export default ImageEditor;
diff --git a/app/src/components/Modal.tsx b/app/src/components/Modal.tsx
index d339a5af..786989cf 100644
--- a/app/src/components/Modal.tsx
+++ b/app/src/components/Modal.tsx
@@ -53,7 +53,7 @@ function Modal({ onClose, isOpen, title, message, children }: ModalProps) {
   return (
     <ModalOverlay>
       <ModalContainer>
-        <CloseButton onClick={onClose} data-testid="close-button">
+        <CloseButton type="button" onClick={onClose} data-testid="close-button">
           &times;
         </CloseButton>
         <ModalTitle>{title}</ModalTitle>
diff --git a/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx b/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
index d0d641aa..be240209 100644
--- a/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
+++ b/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
@@ -188,5 +188,5 @@ function FloatingLabelInput<TFormValues extends FieldValues>({
     </InputGroup>
   );
 }
-
+export type { FloatingLabelInputProps };
 export default FloatingLabelInput;
diff --git a/app/src/components/ProtectedRoute/ProtectedRoute.test.tsx b/app/src/components/protected-route/ProtectedRoute.test.tsx
similarity index 100%
rename from app/src/components/ProtectedRoute/ProtectedRoute.test.tsx
rename to app/src/components/protected-route/ProtectedRoute.test.tsx
diff --git a/app/src/components/ProtectedRoute/ProtectedRoute.tsx b/app/src/components/protected-route/ProtectedRoute.tsx
similarity index 100%
rename from app/src/components/ProtectedRoute/ProtectedRoute.tsx
rename to app/src/components/protected-route/ProtectedRoute.tsx
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 91ef1266..74bc56a1 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -28,8 +28,7 @@ const fadeOut = keyframes`
 `;
 
 const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
-  height: 100vh;
-  min-width: 300px;
+  height: 100dvh;
   background-color: var(--color-background);
   overflow: hidden;
   position: relative;
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index 3db9f0e4..42822810 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -7,7 +7,6 @@ const StyledSearchBar = styled.div`
   &:focus-within > svg {
     color: var(--color-search-border);
   }
-  width: 100%;
 `;
 
 const StyledSearchIcon = styled(SearchOutlined)`
diff --git a/app/src/components/side-bar/settings/ProfilePicture.tsx b/app/src/components/side-bar/settings/ProfilePicture.tsx
index 713ac163..ec99f147 100644
--- a/app/src/components/side-bar/settings/ProfilePicture.tsx
+++ b/app/src/components/side-bar/settings/ProfilePicture.tsx
@@ -1,3 +1,4 @@
+import { STATIC_MEDIA_URL } from "@constants";
 import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
 import styled from "styled-components";
 
@@ -5,7 +6,7 @@ const ProfilePictureContainer = styled.div`
   position: relative;
 `;
 
-const StyledImg = styled.img`
+const StyledImg = styled.img<{ $isCircleStyle?: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -13,6 +14,7 @@ const StyledImg = styled.img`
   aspect-ratio: 1/1;
   width: 100%;
   object-fit: fill;
+  border-radius: ${({ $isCircleStyle }) => ($isCircleStyle ? "50%" : "0")};
 `;
 
 const ProfileInfo = styled.div`
@@ -46,23 +48,26 @@ const LastSeenP = styled.p`
   opacity: 0.5;
 `;
 
-function ProfilePicture() {
+function ProfilePicture({ isCircleStyle }: { isCircleStyle?: boolean }) {
   const { data: profileSettings } = useProfileSettings();
-
   return (
     <ProfilePictureContainer>
       <StyledImg
+        alt="profile"
+        $isCircleStyle={isCircleStyle}
         data-testid="profile-picture"
-        src="https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg"
+        src={STATIC_MEDIA_URL + profileSettings?.photo}
       />
-      <ProfileInfo>
-        <ProfileNameH2>
-          {profileSettings?.firstName} {profileSettings?.lastName}
-        </ProfileNameH2>
-        <LastSeenP>
-          {profileSettings?.lastSeen || "Last seen recently"}
-        </LastSeenP>
-      </ProfileInfo>
+      {!isCircleStyle && (
+        <ProfileInfo>
+          <ProfileNameH2>
+            {profileSettings?.firstName} {profileSettings?.lastName}
+          </ProfileNameH2>
+          <LastSeenP>
+            {profileSettings?.lastSeen || "Last seen recently"}
+          </LastSeenP>
+        </ProfileInfo>
+      )}
     </ProfilePictureContainer>
   );
 }
diff --git a/app/src/constants.ts b/app/src/constants.ts
index 7a151888..b5134a8e 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -4,6 +4,17 @@ const {
   VITE_BACKEND_API: API_URL,
   VITE_PORT: PORT,
   VITE_ENV: ENV,
+  VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
 } = import.meta.env;
 
-export { ENVIRONMENT, RECAPTCHA_SITE_KEY, API_URL, PORT, ENV };
+const MOBILE_VIEW = "(max-width: 600px)";
+
+export {
+  ENVIRONMENT,
+  RECAPTCHA_SITE_KEY,
+  API_URL,
+  PORT,
+  ENV,
+  MOBILE_VIEW,
+  STATIC_MEDIA_URL,
+};
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index dd162a8a..09086f4e 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -17,6 +17,8 @@ import AddIcon from "@mui/icons-material/Add";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import AddAPhotoOutlined from "@mui/icons-material/AddAPhotoOutlined";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
 enum icons {
   BlockIcon,
   SettingsOutlinedIcon,
@@ -38,6 +40,8 @@ enum icons {
   Close,
   Show,
   Hide,
+  Delete,
+  AddPhoto,
 }
 
 type iconStrings = keyof typeof icons;
@@ -144,6 +148,14 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       sx={{ color: `var(--color-icon-secondary)` }}
     />
   ),
+  AddPhoto: <AddAPhotoOutlined fontSize="large" />,
+  Delete: (
+    <DeleteOutlineOutlinedIcon
+      sx={{
+        color: "white",
+      }}
+    />
+  ),
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 64829a6f..38a076f3 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -169,7 +169,7 @@ const settingsUpdate: SideBarView = {
   page: "SETTINGS_UPDATE",
 };
 const profileUpdate: SideBarView = {
-  title: "ProfileUpdate",
+  title: "Edit Profile",
   backView: sideBarPages.SETTINGS,
   page: "PROFILE_UPDATE",
 };
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 207422d7..09f1672d 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { AddAPhotoOutlined, Check } from "@mui/icons-material";
+import { Check } from "@mui/icons-material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import FloatingLabelInput from "@components/inputs/float-label-input/FloatingLabelInput";
@@ -12,6 +12,15 @@ import { useUpdateProfileSettings } from "./hooks/useUpdateProfileSettings";
 import { useEffect, useState } from "react";
 import SettingsSideBarHeader from "@components/side-bar/settings/SettingsSideBarHeader";
 import toast from "react-hot-toast";
+import { STATIC_MEDIA_URL } from "@constants";
+import { getIcon } from "@data/icons";
+import Modal from "@components/Modal";
+import Button from "@components/Button";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { useUpdateProfilePicture } from "./hooks/useUpdateProfilePicture";
+import { useDeleteProfilePicture } from "./hooks/useDeleteProfilePicture";
 
 const SideBarContainer = styled.div`
   overflow-y: auto;
@@ -43,7 +52,7 @@ const SectionTitle = styled.h3`
   color: var(--color-text-secondary);
 `;
 
-const UploadProfilePicture = styled.div`
+const ProfilePictureSection = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -51,38 +60,65 @@ const UploadProfilePicture = styled.div`
   padding: 1rem 1.5rem;
   background-color: var(--color-background);
   position: relative;
-  cursor: pointer;
-
-  &:hover svg {
-    scale: 1.2;
-  }
 `;
 
-const UploadProfilePictureIcon = styled.div`
+const UploadProfilePictureContainer = styled.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   cursor: pointer;
-
+  z-index: 5;
+  &:hover svg {
+    transform: scale(1.2);
+  }
   svg {
     transition: all 0.2s ease-out;
     transform-origin: center;
     font-size: 3rem;
   }
 `;
+const DeleteProfilePictureContainer = styled.div`
+  position: absolute;
+  bottom: 1rem;
+  right: calc(50% - 4rem);
+  z-index: 5000;
+  background-color: red;
+  border: 0.1rem solid var(--color-border);
+  border-radius: 50%;
+  padding: 0.5rem;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover svg {
+    transform: scale(1.2);
+  }
+  svg {
+    transition: all 0.2s ease-out;
+    transform-origin: center;
+  }
+`;
 
 const StyledImageInput = styled.input`
   position: absolute;
-  top: 1rem;
-  left: 5rem;
-  width: 9rem;
+  top: calc(50% - 4rem);
+  left: calc(50% - 4rem);
+  width: 8rem;
   height: 8rem;
   opacity: 0;
   z-index: 10;
   cursor: pointer;
 `;
+const StyledProfileImage = styled.img`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  object-fit: cover;
+`;
 const DefaultProfilePicture = styled.div`
   width: 8rem;
   height: 8rem;
@@ -130,8 +166,8 @@ const SubmitButton = styled.button<{ $revealed?: boolean }>`
   `}
 `;
 
-interface EditProfileForm {
-  profilePicture: string;
+export interface EditProfileForm {
+  photo: string;
   firstName: string;
   lastName: string;
   bio: string;
@@ -142,8 +178,15 @@ interface EditProfileForm {
 
 function ProfileSettings() {
   const { data: initialProfileSettings } = useProfileSettings();
-  const { updateProfileSettings } = useUpdateProfileSettings();
-  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const { updateProfileSettings, isPending } = useUpdateProfileSettings();
+  const { deleteProfilePicture } = useDeleteProfilePicture();
+  const { updateProfilePicture } = useUpdateProfilePicture();
+
+  const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
+  const [photoChanged, setPhotoChanged] = useState(false);
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  const dispatch = useAppDispatch();
 
   const {
     register,
@@ -157,7 +200,7 @@ function ProfileSettings() {
     resolver: yupResolver(ValidationSchema),
     mode: "onChange",
     defaultValues: initialProfileSettings || {
-      profilePicture: "",
+      photo: "",
       firstName: "",
       lastName: "",
       bio: "",
@@ -173,24 +216,45 @@ function ProfileSettings() {
 
   const userHandle = `https://telware.tech/${watch("username") || "username"}`;
 
-  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const imageURL = URL.createObjectURL(file);
-      setSelectedImage(imageURL);
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.files) {
+      setPhotoChanged(true);
+      const file = event.target.files[0];
+      setSelectedImageFile(file);
     }
   };
 
+  const handleDeleteImage = () => {
+    setSelectedImageFile(null);
+    setIsDeleting(false);
+    setPhotoChanged(true);
+  };
+
   const onSubmit = async (data: EditProfileForm) => {
     try {
-      if (selectedImage) {
-        data.profilePicture = selectedImage;
+      if (photoChanged) {
+        if (selectedImageFile) {
+          updateProfilePicture(selectedImageFile);
+        } else {
+          deleteProfilePicture();
+        }
       }
+
       updateProfileSettings(data);
       toast.success("updated profile settings successfully");
+      if (!isPending) {
+        dispatch(
+          updateSideBarView({
+            redirect: sideBarPages.SETTINGS,
+            data: undefined,
+          })
+        );
+      }
     } catch (error) {
       toast.error(
-        (error as Error).message || "Failed to update profile settings",
+        (error as Error).message || "Failed to update profile settings"
       );
     }
   };
@@ -205,37 +269,57 @@ function ProfileSettings() {
         <DevTool control={control} placement="top-right" />
 
         <SettingSection>
-          <UploadProfilePicture>
-            {/* Image Upload */}
-            <StyledImageInput
-              type="file"
-              accept="image/*"
-              onChange={handleImageUpload}
-              data-testid="image-upload"
-            />
-            {selectedImage ? (
+          <ProfilePictureSection>
+            {selectedImageFile && (
               <>
-                <img
-                  src={selectedImage}
-                  alt="Profile Picture"
-                  style={{
-                    width: "8rem",
-                    height: "8rem",
-                    borderRadius: "50%",
-                    objectFit: "cover",
-                  }}
-                />
+                <DeleteProfilePictureContainer
+                  onClick={() => setIsDeleting(true)}
+                >
+                  {getIcon("Delete")}
+                </DeleteProfilePictureContainer>
+                <Modal
+                  isOpen={isDeleting}
+                  title="Delete photo"
+                  message="Are you sure you want to delete this photo?"
+                  onClose={() => setIsDeleting(false)}
+                >
+                  <Button
+                    type="button"
+                    onClick={handleDeleteImage}
+                    $type="danger"
+                    style={{ margin: "0 auto" }}
+                  >
+                    Delete
+                  </Button>
+                </Modal>
               </>
-            ) : (
-              <DefaultProfilePicture>{initials}</DefaultProfilePicture>
             )}
-            {initials?.length == 0 && (
-              <UploadProfilePictureIcon>
-                <AddAPhotoOutlined />
-              </UploadProfilePictureIcon>
-            )}
-          </UploadProfilePicture>
-
+            <>
+              <UploadProfilePictureContainer>
+                <StyledImageInput
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  data-testid="image-upload"
+                  id="photo"
+                />
+                {getIcon("AddPhoto")}
+              </UploadProfilePictureContainer>
+              {selectedImageFile ? (
+                <StyledProfileImage
+                  src={URL.createObjectURL(selectedImageFile)}
+                  alt="Profile Picture"
+                />
+              ) : !photoChanged && initialProfileSettings?.photo ? (
+                <StyledProfileImage
+                  src={STATIC_MEDIA_URL + initialProfileSettings?.photo}
+                  alt="Profile Picture"
+                />
+              ) : (
+                <DefaultProfilePicture>{initials}</DefaultProfilePicture>
+              )}
+            </>
+          </ProfilePictureSection>
           <FloatingLabelInput<EditProfileForm>
             id="firstName"
             label="First Name (required)"
@@ -315,7 +399,7 @@ function ProfileSettings() {
         <SubmitButton
           type="submit"
           disabled={isSubmitting}
-          $revealed={isDirty}
+          $revealed={isDirty || photoChanged}
           data-testid="submit-button"
         >
           <Check />
@@ -326,4 +410,3 @@ function ProfileSettings() {
 }
 
 export default ProfileSettings;
-export type { EditProfileForm };
diff --git a/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts b/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
new file mode 100644
index 00000000..69019f49
--- /dev/null
+++ b/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { DeleteProfilePicture as DeleteProfilePictureAPI } from "../services/DeleteProfilePicture";
+
+function useDeleteProfilePicture() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: deleteProfilePicture,
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: DeleteProfilePictureAPI,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profilePicture"] });
+    },
+  });
+
+  return { deleteProfilePicture, data, error, isPending };
+}
+
+export { useDeleteProfilePicture };
diff --git a/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts b/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
new file mode 100644
index 00000000..514f02be
--- /dev/null
+++ b/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { UpdateProfilePicture as UpdateProfilePictureAPI } from "../services/UpdateProfilePicture";
+
+function useUpdateProfilePicture() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: updateProfilePicture,
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: UpdateProfilePictureAPI,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profilePicture"] });
+    },
+  });
+
+  return { updateProfilePicture, data, error, isPending };
+}
+
+export { useUpdateProfilePicture };
diff --git a/app/src/features/profile-settings/services/DeleteProfilePicture.ts b/app/src/features/profile-settings/services/DeleteProfilePicture.ts
new file mode 100644
index 00000000..1181b42d
--- /dev/null
+++ b/app/src/features/profile-settings/services/DeleteProfilePicture.ts
@@ -0,0 +1,18 @@
+import { API_URL } from "@constants";
+
+async function DeleteProfilePicture() {
+  const res = await fetch(`${API_URL}/users/picture`, {
+    method: "DELETE",
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data;
+}
+
+export { DeleteProfilePicture };
diff --git a/app/src/features/profile-settings/services/GetProfileSettings.ts b/app/src/features/profile-settings/services/GetProfileSettings.ts
index 5177539c..705b6985 100644
--- a/app/src/features/profile-settings/services/GetProfileSettings.ts
+++ b/app/src/features/profile-settings/services/GetProfileSettings.ts
@@ -18,7 +18,7 @@ async function GetProfileSettings() {
   const user = data.data?.user;
 
   const profileSettings = {
-    profilePicture: user?.photo,
+    photo: user?.photo,
     firstName: user?.screenFirstName,
     lastName: user?.screenLastName,
     bio: user?.bio,
diff --git a/app/src/features/profile-settings/services/UpdateProfilePicture.ts b/app/src/features/profile-settings/services/UpdateProfilePicture.ts
new file mode 100644
index 00000000..c90fde4b
--- /dev/null
+++ b/app/src/features/profile-settings/services/UpdateProfilePicture.ts
@@ -0,0 +1,26 @@
+import { API_URL } from "@constants";
+
+async function UpdateProfilePicture(imageFile: File) {
+  const formData = new FormData();
+  formData.append("file", imageFile);
+
+  try {
+    const response = await fetch(`${API_URL}/users/picture`, {
+      method: "PATCH",
+      body: formData,
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to upload image");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Image upload error:", error);
+    throw error;
+  }
+}
+
+export { UpdateProfilePicture };
diff --git a/app/src/features/stories/components/ContactStoryIcon.tsx b/app/src/features/stories/components/ContactStoryIcon.tsx
new file mode 100644
index 00000000..86b6405a
--- /dev/null
+++ b/app/src/features/stories/components/ContactStoryIcon.tsx
@@ -0,0 +1,80 @@
+import { STATIC_MEDIA_URL } from "@constants";
+import styled from "styled-components";
+import { story } from "types/story";
+
+interface StoryIconProps {
+  isMe: boolean;
+  stories: story[];
+  seenCounter: number;
+  avatar?: string;
+  name: string;
+}
+
+const StyledContainer = styled.div<{
+  $seenCounter: number;
+  $storiesCounter: number;
+  $isMe: boolean;
+}>`
+  ${({ $isMe }) => $isMe && "align-self: flex-start;"}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: ${(props) =>
+      props.$seenCounter === props.$storiesCounter
+        ? "2px solid gray"
+        : "2px solid #f39c12"};
+  }
+`;
+
+const StyledImage = styled.img`
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid white;
+`;
+
+const StyledName = styled.p`
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #333;
+  text-align: center;
+`;
+
+function ContactStoryIcon(props: StoryIconProps) {
+  const { isMe, stories, avatar, name } = props;
+  const storiesCounter = stories.length;
+  const seenCounter = stories.filter((story: story) => story.viewed).length;
+
+  return (
+    <StyledContainer
+      $seenCounter={seenCounter}
+      $storiesCounter={storiesCounter}
+      $isMe={isMe}
+    >
+      <StyledImage
+        src={avatar ? `${STATIC_MEDIA_URL}/${avatar}` : "/default-avatar.png"}
+        alt={`${name}'s avatar`}
+      />
+      <StyledName>{isMe ? "Your Story" : name}</StyledName>
+    </StyledContainer>
+  );
+}
+
+export default ContactStoryIcon;
diff --git a/app/src/hooks/useRedux.ts b/app/src/hooks/useRedux.ts
deleted file mode 100644
index b6a474bf..00000000
--- a/app/src/hooks/useRedux.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { AppDispatch, RootState } from "../state/store";
-
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
-export const useAppSelector = useSelector.withTypes<RootState>();
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index 5ac1a4d8..c1bce5a1 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -7,6 +7,8 @@ import { logoutMock } from "./userauth/logout";
 import { privacySettingsMock } from "./privacySettings";
 import { OauthMock } from "./oauth/oauth";
 import { profileSettingsMock } from "./profile-settings/profile-settings";
+import { profilePictureMock } from "./profile-settings/profile-picture";
+import { storiesMock } from "./stories/stories";
 
 export default [
   ...loginMock,
@@ -19,4 +21,6 @@ export default [
   ...privacySettingsMock,
   ...logoutMock,
   ...profileSettingsMock,
+  ...profilePictureMock,
+  ...storiesMock,
 ];
diff --git a/app/src/mocks/mockData.ts b/app/src/mocks/mockData.ts
index 2fc13261..3bcd7097 100644
--- a/app/src/mocks/mockData.ts
+++ b/app/src/mocks/mockData.ts
@@ -5,11 +5,57 @@ export const MOCK_USER = {
   lastName: "Doe",
   bio: "Hello, I'm John Doe",
   photo:
-    "https://media-hbe1-1.cdn.whatsapp.net/v/t61.24694-24/462460819_518473281043631_6485009024565374350_n.jpg?ccb=11-4&oh=01_Q5AaINdhN3wt4c6ZnmGni8RNhM8fIvquSRicC2QT82X6ddeB&oe=6727186F&_nc_sid=5e03e0&_nc_cat=100",
+    "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
   username: "johndoe",
   phoneNumber: "0123456789",
   status: "Online",
 };
 
+export const MOCK_MY_STORIES = [
+  {
+    content:
+      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
+    timestamp: "2021-09-01T12:00:00Z",
+    caption: "Hello, I'm John Doe",
+    views: 100,
+  },
+  {
+    content: "https://cdn.britannica.com/52/128652-050-14AD19CA/Maki-zushi.jpg",
+    timestamp: "2021-09-01T11:00:00Z",
+    caption: "I love sushi",
+    views: 10,
+  },
+  {
+    content:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyDcH_MxdsTsK6KMVon-Ybfa2WiT-R70ZjWw&s",
+    timestamp: "2021-09-01T10:00:00Z",
+    caption: "I love burgers",
+    views: 20,
+  },
+];
+export const MOCK_OTHER_USER_STORIES = [
+  {
+    content:
+      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
+    timestamp: "2021-09-01T12:00:00Z",
+    caption: "Hello, I'm John Doe",
+    viewed: true,
+  },
+  {
+    content:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTExIWFhUXFRcZFxcYGBcYGBgZGB4YGBgaFhgYHSggHR0mHRgVITEiJSkrLjAvFx8zODMtNygvLisBCgoKDg0OGxAQGy0mICUwLS0uListLTc1Ly8vLS0vMDAtLy0tLSsrLS0vNS0tLS8tLS0tLy0tLS0tLS0tLS0tLf/AABEIALcBEwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgMEAAECBwj/xAA/EAACAQMDAgUDAQYFAwMEAwABAhEAAyEEEjEFQQYTIlFhMnGBkRQjQqGx8AdSYsHRguHxJDNyFRZjokOSwv/EABoBAAIDAQEAAAAAAAAAAAAAAAMEAQIFAAb/xAAwEQACAgEDAgMGBgMBAAAAAAABAgADEQQSITFBEyJRI2FxgZHwBTKhwdHxFLHhQv/aAAwDAQACEQMRAD8A8QFdrUtzRuvKz9s1woqAQekllI4IktpCcCp307LzRTppRFV1ZCwJ3KxX6R8HM/apEZHVyoJJUFTH0gfVNBa1geOkbSisnaTzAlSKaj1HNQpeo6PkRa6rYZfSpQKr6d5q0KKIuZsV1FYK7ipkTmsireg0Fy84S0hdj2HYdyScAfJpht+H9Pp4bV3l/wDiu7bI53MIJEe0fmg3ahKvzHn07wtVD2nyj5xb0miuXZ8tGaOYGB9zwKJJ4Xv4L7LQIn1uske4CzNO/TLmmusRaKuEg21WAqyP4dsDt37/AGyK8SdQ0z3xvY/SBtyMjAM9hJ++KzW/EXZsKuP9zUr/AAxcZY5/1B2n8DsUFy5qERCTEKWJAMTyAPvmrY8EadgBa1ge4Z9Pp7CfvNV7t22VRblxxbnEBituIjjMQG4+K66lrrWnvpd3Sbi7w+AyzO0+kcYIIHvnih/5GoccH6ARg6ClOTx8czmz4T0bsQureAs7yqhd3+X3HfJ9qTNbtS89tW3BGKzjMfany7o1TTXL9i9llLjbEGWMiOwkRjOYrzN7xe+7f5mY4wMn2pvSW2Mx3GJ62iqtRsl01oiuorRrQmZOIrRrqtGonTiKK9XfZpbNsifU/lttH0tDNDHMEkQPg/IoYomjeq1FtdIha2rw+xgdwkGHSHH03F3sR7jdgiRVG7Ts8xdWt1kiTExJiYJjtJHJrdTJnVmwXIVRJNH9JpVtLAyx+pv9h8VZ6H07bZe5w20nP8h/Wq1+QJNLXWdhDIkr6m5TYNI2s6Xbayf/AFGkaVjmFMx+kEfIpSiaIdA6vc0l3emRwy9mH/NDpsCnmXdNwnrPhbxMmtsq64dYDpOVb/g8j4o/deRXjzMly7+06G75F4mblowA3vtnBnuD+oNGbXj3U2yEvaUzMbhIH34Ij7GnhYIsUMfNTbkfmkLx31hVTykMsQQfYDvPvioOr+Oj61Y+WokSpkscj92SsEfP6V5l1LqjXCQJgkySZZ//AJE9viiFgBKAEyvqtc7OWDc/3P55rVVq3QcwuBGPQazepQjJOD9pkf37UM6hagzRqzoxYMn1SvHtPcfNVLuhuX2izbZ8wSBgf/Jjgfms+sjxPJ0moysKvadZ1p7K3bcjaGRc/wCodv8Airc/s6SVDeZbiZjb74jParv/ANg6m1a3m6mRMAEj7bv+1A9Zp9QqepCUXuMgfpkcUVkOcSa7K/z9DB2oYGqDHNS3L01DR0GInfYGMu6JqJih2iSiaCjr0ibTag12tXfMQWrikuR5YJAgfvCwFsCcYyT7ifah2hkorEczB945ipVsypjN4Q68NI7yBtdSNxBJU9uMkdviZFMniro9vVaZWLJbuBCd4kqEB3FomDJ/MUrabw1euaV9Uowv0pBlwMOR9uB7kH2qj0nrBa2bDPFtoIJ4BGQCedpMD454ms/U6cPZ4iHkdZo6S7aPDt/Ke/32ljwd0655jeVcNu2FB8wkLu2QWC7omYamvT9K/wDqADhVbTh3hpzcYSpKkZCgiPkjsAKGXNBdOnlrIQWyx3Db6goKxA5AaYP/AJpt8Nat7dgKtpnFt8FQBggmY+DP3pIL4j73+/5mte3+Mu2sgiUdN00fsjm0sbENvzAZhUBZWO7/ADF2JEYOMxS5d8KlrmmZbkmEnfIVXbhWjjJ/vmnbxP1w2tLutaV3N0loKsAGUTDIuSxMfH8gc8NGw9o3Lq+W5AvXVO7facBe/IA9uYntR1BXDDoYk+oVwVaAekdBueW2jugbhdusxghdrEQyR7ljHwTXkvkbbzr/AJXYfoSK+g+t9fa2zkeUUKIN4w6hiu0kE9yWj7Cea8F0tpiXuvgF2ljGWySMYJn2o+nxuLZgNUW2KuI9ano2gRcq7OLaEqHcNuYA8cRzmY/oIfDng+1rVugO6XEOB6TI/wBQP+xpp6zpbaNbRl3lQAoyDuPE5EiO3uKH6JLmlvAqqf5SLe70LjaXk/KfHPIpEX2AHDHPxmi2jrYDaBFLqvg7U2WIUC9Ak7AdwHvsOSPtNLxwSDgjkHBH3Fek6rVXVuG6Y83DOASYM5VSe20cT3nOKZ9Yuh1ioNRpwxYN+8wCu2BHmLkHima9eV4sESu/Dj1SeJWk3MBMSeYJ/kMn7U2aVbYZdIXXYR+9QwxNxp2zukbl2rgceqMZrvqPhQ6W6ty2SyK6ny3IDMCeEYCGB4jnNL82zeuPfe5vLn9wilXJY/xM3pT24OKbW1bRlTM22l6zhhKvVdCLbkBwxJnaFK7RzHAWcjCzVICmjxfZUorKAGS3bVgGYkrAgkmN8TEkTGccBXt0RTmUByIx6DqDMHt8A2yfkmBj7c1zcXdbUrnEx3+R95odpHOGX607DkjsY9h3opo2R3/dNtLH/wBs8T32mMCl7qyekOj+spDIxVi1p2Ik8UXvdIYGdgDe65H3qLV3U06brhzkBYkk0ttY8AQ24CVdNoQzAFgueT2qxqnFoOvm3GjcAFOJH+b2E0D0PVHvam0u2VZwvljBbdgDdzP2oz1yy9vXBCS5YBi3uCskBMiYB5kyc03VSQIFnESrtxmO5jJNR0b8WdLTT3wlv6Gto4EzG6RE/igpo5GOIMHM5isrdZXToX0Oqu33W1bUl2wB/vPYCvaOjdHXS6NbZgsFJZh3Y5Y5/uAK8m/w21SW9YN38SELPvIMfoK9Q6z1EgelgR7f7UMIqDIhWtdzgmAU6s4Z7LGUKnafY9v51ZvaUW9AuMv+vEf8/rSx1jVqW4xHqzzPIHtAk/cCr/T+sMhRH/eKcbTJKkdx3/8AFC3QmIjdb6cUO8LAPI9jQu3zTv4u1G5GJjgiPakm0M0VDkQTjBhbTpRGyoCtcb6Uj9T9I/MGqmmAir1xGfTXLdtZeQzdyUEYA7EHM0ZuFi56wdpna4DJgHt2/v8A5ph8L9FOpuJZTEn1NztUfU36dveKF9PtygIzjsOw+AK9Cs+HRp9Cbu4rfjfcIJDIvqhV7TG0frmh3WrSmT1haaTa+3tGDxV1SzpbSWhCKFAQHgbQZ3AewE/MGvH76JfYvZkuJJEAblHcAcNEY9qa7eivXR5t3Tm55gCobpZQkznJBY+r8GoemdPSzqfKZIW4wJXChSACZM+0j7nFZ6PtO7/0ZrWaZioXjbLH+HPW7e/yboLb/SgOVMx6YPBGSPeSOYr0npx8u+1nZtV+ABKg8A88Z4+K8z/xA8Ivp/8A1tgfuiZdRzbPZx8dscRPvTD4H8UNf072FI/awhNq4+QRgEnvKiSQeY59i2JuG9fmIslmPZv8j9+kdeut5Kxp1tecwhZBz+RwMEfpS3oLGk1zNdWUugrKO5j0wLjbRInLD1DJFLfhfxHfW9t1LBgpcO0lgAhVtwPfuCRj1ih2g1Za9bNi05hma6pZlL3LrklRHZBtEnmYoJUKpxjH/I1XXv8AzAg+phTr40iNcFq6HhSxtkAyCJL7OQRt79vxXnnhnQeYbcxBvIo3TBLMoIA7wCCfYU8eL/C72Fu3gy7X8y/tgi4noMqTMbQxiO5PxQPwfpVZ7AuAj1KFHYLBZvyZJ7e9MUBUVipzM68nIBjF4x6neTUBk2slsnYfq3zIjcP4VgxRTS9Tt3zZS2Qpa2zXAcOII9P+oY5HOKJXtBbuWFfSqhxbuMsyZAgqB2nB+4+aC3vB9xrNu8jMl4s5hiAVCk7Nx9+BwZn9AKKyMdD6zXS3IDA8Qp1Tpty7p/NVD5rA2/WVAIJADkcTGP8ArFBtFpGW0DcZwxnyijxbn1GLinnMyOIODTlptRcv2NkBroQ2nEMlsngOGgngA4kfPelvxP0l9VZtrZbaMBncj1MB6lkciZI7QKrYFOMnn75la73TK4+AlPTa1r2mRi6/u24AAKq20Bu+Q2ftRPrvTbF/T272oWL+7at22Ar/AA0EZ5EjIxQ3SMqi3aKFioQEomQB9XqUcmR37Ghni3rRQfvDBBhbeCcTE9vV3nAjvSi7w4CRm+utkLP0iX4o0963qHW6waYII4IXCkTMfr3ND0FGLmiu328/VXPL3L+7WJcjOwKn8Nvn1HmDE80P12kay+1u4lSOGU8Ef8Vt1t0UnmedevA3KPLIpI4MEcEYP4NEek9duadi21bk87x6vw4z+s0OXNY65NGIzBT0Lw14ua8z2UshNylo3bgxCsAuV43FPiaBdQvPqdFfuFVGw2m2qAIG4KSQAPcZNCvDlzbeOdpNq4FPBD7SVj5kCPmmG51Czbt+VZ0rSyFbjMxc3NwAaSAIHeBAwJnmuCAcztx6RP8AD4Yam0y8o4efbbmf1im7XdQTUasAegKoG8jdhFGTBHsf1qPT9Pt2LW9tlsnhS0t/1EmaWuoa8Hcqd/qb3HsPj+tR0kgzjruvF66WX6FG1J5IE5P3njtQ2K7rVRJnMVldVldOkNs16D4N6tb1BFm+YcDDE4cD/wD1/WvPVqa2xBBBII4IwR9jUSZ6j4s6TZhdr5BGCAR94qktm1aDQyh4kYER8Hn9aSn6neYeq4x+9V9Vde59bFvvQzVLi3iT9e6gbrQDgcx7/wDFVNPardqzVu0lFVcQbNmWLQq5pLz22DoYYZHt9j8ESD8E1XQUQtaMEA704YwTBG3t9z296LiBMZPBegGp1xZtyISLgUQZIHqkiMbgMwZJzE07+Jdar6pdIDA8tnunEsBEAH371S8BaFbGne/ci218EqQJFu2sxG6cEycz/DS51rV3TcU27iDf/wDyt/FaydzKMAkjgZj2E1k6wixtg6Ca2hXZ5jLPX77pbKs9wk3E8skMFMFmjcGyc2+YPHNFum9LNtReZUe5vIubhwDOEH5iecUm+Luo6gPbFoME4YlTy2Qy7xGRADATjnMU2+BvElpbNxtQbjXgXZ96naBlgxPA9I3E/B7kCq11HaDmOX6jnYB0/WM1jqFpdPN4Ktvy33I/KwCCIM9pH5rwvqAOmvsLTEKGG0g5XE4M8EZ7jtmK9e6Tpk1Nsm473EI3KHEeU7y0QIkDOTOMdqBeOdA1wEFUdmRV37UHJbyihQTtHPbk/EXqtCsB2MV1NAwTnp9/f7yr0Xqi6m3qbhCDUC05UsRKggBntkjIED0nAx2NJR6hdukkMVUN6FQkABfSpkZYwoyapWWZG2NIOR3Eg4/QgkfNMWie1a27ULAqCdyrk/xbTyAcj9adq06KxI6f6iFupd1Cn+5AvW9T5T2TeY2nTYysd/pb2LSQeeKN+F7TXb1hA5Jc30ZieEREMgdiQ7D9aq6mxZVmcJAOU3KrGSA0FAYP1Ln2JgTx14XuEasXFtMSAxVFHql8ACYEAbue1EuQeG2B2gq/M4BM9bazbtbroX6QiiIgqCNp/wCkfymq2t6rBLFVM3LagEjEt6pI9hmPtSr07pep1d+3qEvHy0Yg2TO1SJRw6j0kGC0R7Uxde11jTsCUS2JVfOuQqBojAaS0Cfb71jXVNhdp9M/vNOq1KyxYfD798tanXzauNaUW7LSGvO0HkglRzPsOKo2OktctW0RyLSw4I9JxwCJMg4qzrtJaW0153FxoJSXJUDGRtgcewFea9b8WMXOn6du9fpYrwzf/AI15nkTxgUTBc7QOPv6SqWFPaN8vWMXi/wAWJpIt2itzU4UIp3qvt5g5kyIXmaE9D8HOW/atYN99yStmBCxnK8F4HHAnMngv4E8GLpGW9qHXz2mA2duc7dwySeW78DmSdsIbmpYMxVEPKMMfxQZ4JAj7NVLGFflTqeM/fSM1A2+aw8DnH8+sRerdAS45c7vMZdzs7QlsjGwkTkKvzwao+JvDu6wjIwY27Y9WRuESdoPIJMdoIHsaP9XVTpSwQsdtsOwDegNtLISMknceMekVMvS1ZGsqsALuDzABA+nbkmTP2JNLjVMNpzNGzSV4YfX+Z5CpIMEQRgj2NWUt7sz/ADq94o6a1kqxGSdpIyDiVM+8YP2FDbDxW9U4dQZ5e6soxWcMK0GI4JH2JH9Klur71E1XMpI7hJyST9zP9ajqQiuTUSZzWVsitVEmarK3WV0iV1qVaiWpVrpMlWpFFRpUq1YSskQVOlRJUyVYSpkyUw+GIe5+z+WpN4qu4glkEgttzAwDzS8pon0TqR094XQoYicNOZEcjM1zZ2nb1nLjcM9J6b40upYTyUXdv2oBujb2H4rz7V2We5bRSzsFlABIWedufziMn3FWOoeMGuIytYU7phixLKpEQGx2957d634f6/btsNxuKob0elLm0GNwJ+oiI49qx009qZO2a51Ne0YOYxaywdPYNsOt15HlAkkT/EFDYUgNIIjBBwKW+rdbFtFsoU3tdQ3nMFbjgCEAAH7sEAlgBuLTwcub9d0moZYCttUQWMBiO7WzBge5UxWeIOkaa+tt/L33/P3IFwXJg+sxO3g/G0e1chFRO4HJ++JLXh0UJxj17zq011EG5cNaLvbt/wCQEhXOMyNxiIiOaOaXXW9TctgIA37vzGExtCswBJEfwxA4kHvUd/wyLtl5eL+1hvSAWkEBWmZMSJx+AaEeGeqNptSujugBr+nVrdwgyX9XpeeXMZ+Qe5NXStFxg9e3wkW2GxWyOc5+sXfHOlt6ne6bEayqqgUj1QWBETmAATGACKVOl392GwV5BMZE/wB817Fe0QcoACLy2gmoVUQfu1GWZiCQYgCTkdsUkeOPBosWjqtNcZ9p/eqYyrHDArAPIBAHejaVynDHMBq60cBq1xAtzVoE2lARu3buHESSA2RBLQTH8Iop4KW3bu3xekDyQF2n1G4WUpsKyZMHj2PtSrYvhwM8gx7Tj+v9/Bjpt4ozBEKNvVrCwN2/IUSwkjaTOY707dyhiNQ84noHROpFEFvTKERgxaFLXNyQGD7o9W7BBHvQjxtdi0ovapXO/wAwINivAEYDAf6SMEYzzVBfEn7D5my5uLA+mNz3Llwl3dnxHIE9oAFLt7oN2/cN0APc2+ZcRB9G8ls89tpzGWPwDmJQxbduI9JrW6hUATYpJ6jH79Zx1Hq17W7dNZUpp0XaqyZKg4e8fb+X8qfPC/QtNpbZW25vai6khlXAkfwgmVUMRJyTGcYFTw30JP2Zdg23bgcBnbupj1BfpPYQeD71dsWbmk8m1cuhrh3AgmfRCqFWfYAwRHJod95XKouQOvvjFGiQqGdvP6ekMeFuqJqUNrUW7YYgqGUjkdjklSY3Aff8huu6+3o0u25Zr19yq3NxB2bYE9sEAEn35rLtg6V7ly7bhri+gwAEIZQHBBksSTgdwD3rPG+lbV2LbXjbTZFwFJLQ38RG7IOcY5+Kq1lJbnp8Omex9MSg01yv7PGT056/LPIzKGgureSBcZd8GZGydqrDgn0xznscZFQdd09y4JFxQyKuDKbzO1gnYkSP74LeHtHpX22yGFwIqqSxEKowZU5khj/LtVLxBdSxdSNO1wIykzLBvcBpIBB7GO1K7SjBlwVmozixNjghhz84C8cdFvWtCjMQVVgVJ+ozz+P7+KR7NzAgfmvYvHerXU6O4PK2bU9POMDGe4Jj8V4vpTitX8Pfchwe887rkIfJEsXGPv8Ab4+1R1KRWmH5p+IyIrUZqZhUdRJkZrRro1zUSZqsrZit106VFqVaiWpVqstJkqVahWpVqwlDJ0qZagWplNXEqZMtXNIBnAJ4AadoBDSTB7Yj7/FU1NNGjRE03Ow3BbTfHd5JH2A9vcUvqrTWnHU8RnR0i2zB6CL2m6bcus3ltuVWCljMZmOAYEDk0Tu+G9YkHyd0zlCDxg4MH+VZ4P6mbPn20GP4pz7rMgfj8mm7ofiy3cvCzdUgAFJLAAAjLD+Y/IoHjWrz294jj6aornvz0MRdIQ7BCdpgklgYAAJBJAJgkEfpRVeoXrDTY1BXG3ERt9iGxOTiMGa9A0nh61pSbtm555dVVd5T0ohEAbV9pyQT6QKBtobV+/svOi7EyZ27gC0kfcgntzUWa9QdpXMHR+H+IpcPjEG6Px1rbRkulwYkOg7H3WP7NCOpdbGo1Av3lK3VMo9s/TBLCEbmCZ+rsBVnU3rL6pdMLG5F2pbYMbbGFUyR/ECWBk5yTOK11PoCNd8qyQLwMn6tmw7f4iTMEgSIH3oymrhtuMc/CBUXZ8hz2+8xhTxpYuXzda4yFktgzb5ZZ3K22fQTkfc/NF9H1mzaQWlvW7oYMCgYMSxYNgjAWJ9+Y7UkaXwfdcXGF22vl3AhDSOcgyCcR/eKq9S8Kaq0QHtq0iQVaQVAJJEgcBW/SghaH5D9fv3Qxe6rIdPv9YV8b9I0mlZL2mZkc3FZkB3219X1Bj9JxMZ71W0uvizcCBjedwVOQqJtG4tHK9gsd+3FAURVgg5B+krx+DR/Sa82iXb1b17ennaRH2MEYnAptafJtY5iZuw+5RiQaHwtcuPlgXYgsefLkwPMAHp/+P3r03oeo0ulI06B4M+bduDYDt7tIkjIgDGec58zsdfdbYtbiANzDYxtks0ep3X1MVzH88VJa8WtuRrlsXCggFmOZEMWgRLGCYHYDtQL0uJwo4htO1QOXPMehoF8+7Dk2WJAO9oUE4Ve2MgwYqp4us2PLZFS410ustEKqqp2lf8AMDPbvnFLPQvGS6VsafBG1h5gIMZ5KZOefmmKz47t3Jb9nG7gS6iCQxyWIkAKc8cDuKXqpuR92P6jj6inG1W+fv8AnNW+o2+oW9lwML6+nagclvpON3BG2DBMSfvTK2qR7S2dRYaUJX1BRCALDMoMEcf/ANfek+/162GTbaKiXLbYF1WJJMPwQZkR7jvxePjnTgXd4uy0KCVVh6d074Jx6h94qrUWZJC9fn99oNrwWUh+nA7Rg6/rtNprYKiGZD5cKSW7jYwBHfv70pnWNfstt2D0AKPN9QZxMuIMEEDP5irOl8WaTyTZuO4KsVQ+W+9B8+xOMR2pU6b1CxbL+ZchnPrYhgrLA2lQBIz6u2CKq+ndskr+kbo1daKFzz35jJc1tt9G1vfD27Wd8ElmJBlpiZJ/UV4/pBivUdDe0VxbvmXCBCklfNMMN53OSsgHED4rzwW19ceolzkcAEmJJHf/AGpjRVshYEGJ691cgqRJGBMAAHtnufn9a5vsYCH+GR2/OR/3ojqyUCghWJW20wZUAEBDIEYPA7Rk4qHqN5Hgqu0kEsAAFkkmUHYRtH4rRxM2DajYVKajNVMmREVyRXZrVRLTmKysrKidKi1ItRCpVqstJVqZahWpVqwlTJkqZKgSp1NWEqZMtMz9QNrTqzWi21bflk5UMC3r5/1AQfalpaZr2uK6NVmVZPUkHJWV5HA9IM/NJ64ZVeO8e/Djh2+EoeC9Izm9cMSZLE8xliQBzkHAotqPCt9tQiW3VHILIxJCiATtLRz9pqt4ee7at2iLYwW3ZAK5/iBEkZnHOeIp/wBZrbNtClxd14zAEhpbhlOIU/7Y4pdtS69+PlNLwDtAQZMYPDfTPKtWzftWhcVZdlyJzLLPGKT+q6dL9y5dt2t9veceWWTPIBUgjPtjJrrVaxmNq21x33gTbN0zkxtIFufxNCP8QLbtqbf7Or29lsB1lrUHcQrqzduP1EigDw7sDoBF9mooy6jr6YP1lbS2LFy6lu4N2qUmW2XFZyvClpCiFKqeTHYcU7dJ6FasqDdUXL9wgvMDM+lSBwoB/lSp0vw/fsXyW1KE2wQd4J/eXwt24ARyzESTIIAGM1L1PryWVdrd9Q7sQ1pUckk8iWc4mfgTV7LSPZIM/wAyaq9yeIzBfr+0ZNT0r/1OodbgVUNlnlR5ZaLjXPT2IDCD2nvSh4i8UNqLvl2LQuBSdvpLKUO5WFwA5BB4GMkE9qqqut6l6FJWzgv2tyuP3j8s2TjNX+maJdNqmtiV8tRuLc3MqCfheWHwB71zBaF83J9My2G1O4rwqjqe+MDge+JNrTN53kQA4IEYABOQPbuKdPCF3TKW0uuRCEunYLmfLb1BwYBiQgJ7SBxIkX0kWtT1sujRZLsd4xO1WZmEcZ7/AGq1/iD0Nlum5bBZgd1wgQXXK7ivdgIz3BH3LhvztV+Mj9ZmCraSV5xHjxN4e0Nmw15dDadFh2VFKu3tG3JXJJXGBXn3TNJpbt4W7lhLZbaEKvcuZcFR5gkAQxQx7Hk0e8I+I7ty0LDXNqKjBMTuIE+XMjOJAJz7mMhtB4juaBv3mlDNvYFmMbgCJgwfse3HviSfNszz8YzWE2eIcY6dP+SdOgaQAKtk3b2xd6s9wLvMk7CrDbj3n3g0KbwyblxjYt3fKVSSSRC5O71kAGAP5fNMXVr2ntvbeyybtUqsqsdrIsblLIeSOORJFGOvdXV9H+zIDvdDp8xuA2PvcKPqBZds45mk6bnrX2mc+8/6j11NNrDwQDn0/eLVvwRdC7l1Nk+WACizdg87YBkEmT+tB/8A7Y1L2mdTbjcAylmVvUYX0bcgleZ7e9PHgPwm42X2FpYVvVbL77gbI34EQYOPamP/AOlBL1u4TtDE+xyQ25eOAQCCeJPvTBvsB4ORMxkXPK9+Z5Tq/B/UbYB/ZTDRG10JJ9+QfwaFXuha0Tcuad5Ujdu2HuOQWkjI+Ir3brOtkBUUuyH6ZI9WNoJAPM8ik7XdaN4/Spt3Cw9RIBEgEcYaRgVWzV2L0AjNGhSzqYq6npWuv2Z/Z1VAoOGQG5nEwcwOx4/ApYtSbuwwsNBBMAe+4j9a9I6f6rFy1bf1WbociQRt+mAe4iPyDzOfMUvEX7jKfV5rQcgggwCGGZ/4o+m1D2Z3RfV6ZKfymFyLe7a1x3UAqTbMgLkjZviRJOMYPuaFPcIJj+UwY+/6xVrW9TZwdwG6frgK55+rZCsf9RWfmqawfePiKcJiAkXwO/PNRyQZ7j/auyK0y+1RLSAiuTUjL2/8fyrj+lVkzisrKyokymKkWoxXa1WWky1KtQLUyGrCVMnWpkqBKmQ1YSpk4amnSapW0IttcUAM6FPXuO47gcGI7ZFKiGm//D61buXXs3FDBkmGwIEyZ5kEqcfNA1a5qPu5jGjfbaJzpeptbKbkYEBVtmRseDEuGMcT8mjLeZqLiOpZLtoglC0sEUGG/wD2ET2nmlXxZdbebaKqm20qU7+r0ifeIP5pktKbb6W/bIV7hCXFaGlYkmcYkRHasnH5T0m/4nDY9MSPpVx9dq7C3g485S6OlweaoQ53Y9BxP+9W/F+iSzeUkvetm4d4liYBiNxicjgHGaMjW9N0CHUWkUXHQjlrkGJCKCTiTEAgCPikDVdR1nUHVIZhMKiLAG443EcD7nt3p5lN3ToOZlpe1BO7nIIx8Zc6p4tcgWLB3YUb4gloAJju3bGMfijPhf8Aw8vXUOpvH1T6U9DEkd7kmI/00M1HTW0WmZ7Yl7m1DdAVih3ElEWTEgLmM54xXoXQb9y1YRrpVLrxtQuAGI4iT3kSKECqg+F07kdYILvXDnnsO39yDQ9Kv39RZupe8hNMdtywgIU4MyvDBgQc/TEDImqH+KV6NOHnIW4s/TuhhK7vtJimXqeuTTvqb4XzI0y3LiqV+tCwEyQBg5PxSZ/ij11L/TUKgEXRbK+25udvuY3/AGqGBO3Pw/WTXnaT6d4tf4b9PVwWIyqn3yXG0fHcn8/p6j1TZZdfTuFq0LbqMkow2/jgEe5SK8x8JLee2bGnUB/Lky5XflZBBMT2BHsJ4mpfA/7TYe5aazc8tmuLeJVoXaCZDTkh/jiTPuzqk3jjtBIwCAfP55/iV/EWgbp9xzZM2bq+ZbIyUGdr/CkOQD2n4otpOvWNVbQ37CXnthywZBBkIAZGRIWCIIJA4FX9PpA6sVbddZigkSVtgsvoHaSCfsIiOUKzqruj1BKEW3BIG36WWewkwp42zgzxAoae1G3/ANDoYRSaiLCvlPUff1jd1fQ/td5rlvYEvW7XmWwu5rW0CFSMBtqp7RPsKvazQlEBFm55oubsCW2OGBAjJOd3pkcimnpvUNK+lDWUG68gD8FlLYjnsSePvR3Q6QqmTuCrHuWjhTIyP5zQCDY21/6jVDin2qjGegiP4a8Qm1bGlCnzRI3uDIUfSNsTge/6Vd6jbvvbNw3J8sdztgHuAOSaWPEuj1KahL1u0+42le4hh3JRcuFn6gIBUf5cdwLum1t2/bZncvI81DAABQwwNtljEg5MgxQnDevEstSWuWz8v++kvaXT3rXnXZ/dtaIBY7AzlfTBaAYYg8/w0C0elc5DgK+wrsAKbwVLEGIMtwR7Ubu9TI0xuXAd+5E3Ft7KSs7hiYAjIwZqp0formyl22dx2MrMTj6gwKD/AKSZM8n7VBfcMYhko8Ft2fdL9zQWbOmuXFLkiVe4x+oIMKvaASfuZrxjSAOS7EKGbLGSAWzJ2gn3OBT7/iN4lR7S6e2YUrECRgckgcScRSIuF27R8Hv7/n81p6QEruPeZerI3bR2mXEgnIIk5Hf5iu7bj6WP9/PvXN1SIxgxjt7T/fvWAz29vY5/T37U3E5l0g5Ax/viubd0oZHMHPwQQea2z4g8/wB/3+tQO3vUTpw1aHyawtXJqJMyKytTWVEmUhUi1wKM6HohfbLgTyfb2+5+1UJxLgZgwNXauKN6nw8FUstwPE8D/vS4wg1wbM4riEEbFTpVDSvVxW96IIMywtXOn6k27iOJlWBxzHcfkSKpIamtGM/9/wCVWxkYMqDg5EZupqwYCJEb0Y8XFP8AEDGCYj4mqGq6ixG4IdwhfSx7yRMZHDcZiZio73Vbty2LTMNg7AKoExI9IGMTHvmjGk8PlrfmG0bdu1bAYgH1NIAMsc7i3IGJPEVn/wCIlZLP0HSao1tloCV9T1grpHSL+sYufoUMWc4VQBJCj/j816x4S0GlTSobJJtsTvc4bcuC8j8qB80ia7VWr9u0EHkuu7y7cHy2Jywn5BAAPY0c8LdZbYrsyoCCYgHj/TP3iTiKC2o35A6DtDto/BQP1J+8Qtr+h2LQdrZi1dCsttiYdLaqDt3cOI3D3gj7JfXulXr7bkZfIPlrz67SW2lWAIJiBG4HMgnvL/17w+bvk3G1ZBmQSVQKfqVoiD7cDt+aI6WLa/vCt/J/9plAAgcqcDucEf7UIlkbIGImHy+WBI6nMh8HOr3NZp7xi5dthG7SPWCyz77gf0ryvrutuqF0Tj1WNQdp4gARA785BPYin3rFlGD37T+Td06g7CCDtBaMgd8KAZB7QKQDeuarXWvMVWd7kcEbwxhSQpU+/BFM6XJGCOIXVCtBms8Ht6T0b/DfROWuXFRSwQAMSZDRkD3M7Z+9Weqdd3JdsIFuXm9GxWyGIm4M5J7DHfFT+C9GRP7lWYXA6E3NhBgAyk/6Sc+/FUfEXT7Wi1VzVjaNSVdktpeMhnBUEoQCVlpjiYojIpvJOf26QNNpCKm0HP8AMK+Gen+Tb87UF38z0qU2+kCQVY8KVyI/T2pI694ct7bu28zMH3IdrCAezLn8xmT8V6T07qA0/TkWwCfLT1Agghzli6nIG4zP86g6TobBuI9y6Wv3lJErJMA4LkEDAbAik7rG8T2fJ6x2uvfWTYfLnjA6/wATyzoPXxpn9QuAGFuruBLL8CABt9UHM7u1e5dFvMVttbuo6Ru+mGdTwYnB4z/SvGfH/QBpbiPbhgwLEDM7DBE/9XaP5CufB3iZgG05uqi3UYW3ODbckHBGVDEfac96cyLF8VRz3iYUo3hMfKehjv461nm3FOlZQ1p5YGRPpedoAyeZXBwTQW319dRpnNq2A5uBbikzsJwTa7kN7HjPxWW+mXmuJc1VmS22X3+qUAEqABBkFjE9h2oLqOjvvN62p8sXyxU8FNwBGMEMdx5x80qXXbgkcxxKmru4OR/GIwLZZi9pW9CIttWMMDAJcSB7yAfjHE0U6brfItIQWTT2bLtcDggSfSgVmEtOR+DXHRCh/aXNvyxEeiWMEHdEf5QVHwDSF448WXNS3kI3/p02qBP1bQB+RI+00DTIbX90Nq7gie+LvU9S1+/cukH1MSARED+EfpFWNDZcuswd0gboYRlSxzIjJB+ARUFliDMAyO4kZ95/X9KN9A1Wm3/v4C7Cf4o3AlgcTBkAbQI9/Y76qBxPPMxJzBvlbnFuZZiAAJEkwAPUQBODJge8Vmq0LLEKSDORlTAztbvAYT+PerWu0v7y3qBci1fZgrn+B1MMrQBEYYQANrLEcDrXWHt+Ub6vtkwCxIkQLm0TyT7c7c1ORIgVV9MnuYHzHOf0/UVA9E+qa23cCbU2bV27Zn7mfkzjtP4AsmqmSJquTW65JqJaait1zNbqJMqoYINOPh+8FIliQQPpWT7kGPvSZVnS625b+lo/SqEZlgcRv191VuNdyiQ2DyZBHHzSpo9E9+4EtiWP6Ae5+K6vai9eGSzD4GP5Ymivg/XHTX/Ughxtk4g8jPzx+lUGBL8mF9L4FnHmFSCu5zG0zMhV7RjJPej146DQWXQIrllKu7+pnkcL/WAIxx3od1LqLwxU57A/T+gpI6pqC96S278yB8CoBLSWAWWEiWKjapMqpMwKs2zkdvmqNq6KtIaZEWMJaaFC3Aylg/0EZgZk4iJx+adtHf8AO2lVDg/Um4ozkkHBUYIj3yA3Y15/auEcTNXtBr3stKOQCIMGOf6Ef1FC1FPiLx1EY0uo8JuehjBY6jb88+UgR7YZlQjchO2GGByF3GSwPzQTqnUrumt2VThSd5yFaTI9IiR8nvxTnoBp7wW6lweZww27WO4BY7jHeqdrTC5ftWLylkC3FLlfQRJIiMyMEc5rGSzY/mX45+c3LCbKvKw92IyWOvJes27120HttbUEd5wwxxA7D5FX9JorVq4z27nlG4ZVgAIlcC4gADgQTnPMGla5pxZ3sj7vTCqGkA4knAgADk+xqt0jxGz25vEbVYbWAnaJwSOYGc1NWoJJP3/2SdMCAIy9Vs29RdVNUClxrZVysxqLeNrWjxCtBIOV74MnyZmW31FzYYhbLjy27g7gASW+WJzjGa9I8Q69bukLFjv81TYAYEoyqx/mA0j4+1eWdNi5dvk7t0kjaJ+k/wAWfpjcfwO00/pzufImVq6xWmO+Z7J4FNwWrxVo3OpDGCxIABiJBUkn1d6m0XSVvaxtXcUldyEmRtZ7a+WkD6lIM/GaR0t3z0nUXrZYFLyqSDtIQIoOB8MP50V8B3L1q1dtPcK2im8MWBUPkwrTkQP1qbMh2bPynU4KqgHPrHLqupVbtq9tJuy4ZYBZrIU7g6jHvz/tQDqXUbtqL1sekPsDKgYqjyzuoIzmFHtn3oz4X11pmu3LxtggkC6pYblIgAzzncJpZfUecxEkAEpsUgJtUgF3iMQADj35pXxQig+vMcr0pJZekEaJ1dr+4PcsK4i/lXW20M52HhTgEge4pJ65oPKuFrZlJEx/CTkfg/1/Fek9Y1d62EtEp5ZdlZxDAIAIRhElhz+g7GqWk8P29RpnG8bRcE3DunMgW2BPOAY+RBqtd+19wGB6QttCvVsJyw7znwR11dWBp79wrfH/ALVwmPMBxtb3cf8A7D5FM/VOnKEC+tkUAELtUETBzgoCx/MYrxfV6M2LxUPIUyrrIkdiDgz/AMUc1/iW7qVCah3K7YYo20vCwhcHBzBPvR7dGLWDp07zPr1bVAq/UQj1nxM9hjb0RiwjMqu5W6ZyG2Fp5Ewfbjmla0Laq0qWMAAzG1p577hAI7c/FR27ckABiJEwDMdzAB/pRsdGCKLguypxBEEEz9QgkrxwOcYNPKq1jAiFlpY8wPduFhwYUAe8AyR+v+9djpd/bu2FRsZzuKr6VElgrEGPxzRg9HVCbly8ioYClSS2e2wgExA4E4rrpGl8w39xC2wkftF+ZZtyTI5MqCoCyRzma7fk8SmcSz0vQJcS7pneLFy1p9SrmP3T7FZmY+xVryk//jUckUD8RdfOpuuUlbQhLSntbXC44UnLGByxkmiXV204s+Xp9Xudrdu1dLo1pHS2PTt3g+y+300sXNOUiYIPBVlYH8qT+nNWzJWcVo1uuTUy0w1ya2a5NROmRWVqsrpMq0f6V0VYV7zBVJ78D70E04llHuw/rTX1V4QL8f1E0pqHYEKO8NWBgse0KCxbj0xt7HgR2oZ1LSiOKo9P1zm4qwSJGOaNdeY5xGTj2+KzyjV2AZ6xxHFik4ikqO9wWg7QTxJgfiiPU+mrbwBwI4oSL5W7vHY0U6l1EXQCOe9amG4imV5gZJDUXQ1QS3VxDTCxduZZD12pn+/61ApqRWq8HDHSlAZSLyoe+4Qog4DFiBn4mIpi1muOxVe/ZWGMMl0MDjsWO4fOSR7mkm3cIMj+Yn+tT39l4MzW9uwAu9shR6iFXDnbMx6Rt4PtS99CWYJELVqLKj5TxGLR6K0wM6q3MT6DuWOBAmfzFbOnuEbwSUH7sEbZjMMAJxHwOPxSilpreHVh3XcNpZOzL2I4yJFXrSalLYuWzcW2x9LQdgYR3Ijif5Uo+hHUH6zRr/EyMBh9IZudPe1pLwuDAZbtu4CIBzuAAOAQRP2PvSZ0liJMnJn+/wBT+tFtb4l1F20bN0qdx9oOMEmMR2/X2qlbQDimNNW653Y+UX1d62kbY2aHUXU0J8tkA3NuBPqYmBAT+KQM+0Vf0/VWvPbsugRYK7t20qFwNqkYJgn/AKsVvo3ULFnRgb1Dsp3BrgU7izAjbPAEQT7fNVr/AFLTWzuD2SYMKguOVMETvC/OP+c0jfW7sw29zNTT3VLUuTgge6ON7povWwgffE7XaS2QYLCBkHIBoZ06w2itFXePUhJc/UgMQFAJ2nj53fFLTeM3n6njg7VA9I4AJYQcDt2oTruuKQRbtE/6rp3nPsohR+ZodWiuPDTrNfUo8pzGfxZ1JBbTyAAhA3GV3TlTvz9ROZ+1J9jr921ba3biGJLMRu5EekN3jufxVAo7y53NES3MTx9vtUcVqJQAPNzMmzUkny8TTuWMsST7mtmtRWm5o/SLGW9FrGstuWDjggMJIxIOCR8131bqVzUMpvbjCqNoJAMAAGD9IIzjuTEdqM1u45bnJwJ+wgZ+0D8VBAkY5zJbWudDKHZEj0jBHsR3/NcG5tbcAAxHwVZTyrD2Pt/SsuaYqoYkZOB/FwDMR9JmAe5VvaoXA7Gf/H9j8V2J01dKz6QQvMEzHuJ7j55qOt1o1EtLGi0ZunahG/8AhUmN/MhScbvYHn74Ne4hUlWBUgwQwII+CDkVyRU2p1ly4FDsX2iFLZYD/LuOSPYE47V06QVya3NcmukzJrK1NZUTpArQZHamrSapL1vIzwayspXUqCufSHpPmxCmn01qyFZRJI59s9qDdf6pMjuayspPTLvsy3MZtOxPLF4CpUFZWVrCZ5lhKmU1qsq4lTJQa7WtVlTKyxpFBcA8Tn7d/wAxNFOoaw27IsAhWurb80gS222gthU4AUkOSZn1kRBM5WVU9ZEseG74W2TeIe1bMpbYbh5gUuWWfpAUGR/FMQew3Wddv3dxd53fYQP8v2iBHFZWV2ATzOlTfbYetCzcA7gCAQZzGfzx/SIYFarKsABJnU+9aisrKmTNDvWXAMR3E/zIrKyunSezqyEKYgmeM+3PNVQAT7ZrKyonTjvXLCsrKiTNDv8Ay/7/AImsniP7NZWV06auXCeSeIqI1lZUSZvfiMc+2fwa4NZWV06aNcmt1lRJnJrk1lZUTpqtVlZXTp//2Q==",
+    timestamp: "2021-09-01T11:00:00Z",
+    caption: "I love pizza",
+    viewed: false,
+  },
+  {
+    content:
+      "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
+    timestamp: "2021-09-01T10:00:00Z",
+    caption: "I love cola",
+    viewed: false,
+  },
+];
+
 export const TOKEN =
   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik1vY2tVc2VyIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
diff --git a/app/src/mocks/profile-settings/profile-picture.ts b/app/src/mocks/profile-settings/profile-picture.ts
new file mode 100644
index 00000000..97dee514
--- /dev/null
+++ b/app/src/mocks/profile-settings/profile-picture.ts
@@ -0,0 +1,51 @@
+import { STATIC_MEDIA_URL } from "@constants";
+import { http, HttpResponse } from "msw";
+
+export const profilePictureMock = [
+  http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
+    return undefined;
+  }),
+
+  http.delete("/users/picture", async () => {
+    return HttpResponse.json(
+      {
+        status: "success",
+        data: {},
+      },
+      { status: 200 }
+    );
+  }),
+  http.patch("/users/picture", async ({ request }) => {
+    const formData = await request.formData();
+    const file = formData.get("file");
+
+    if (file instanceof File && /\.(png|jpg|jpeg|gif|svg)$/i.test(file.name)) {
+      return HttpResponse.json(
+        {
+          status: "success",
+          message: "Image uploaded successfully",
+          data: {
+            imageUrl: `${STATIC_MEDIA_URL}/${file.name}`,
+          },
+        },
+        {
+          status: 201,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+    } else {
+      return HttpResponse.json(
+        {
+          status: "fail",
+          message: "Invalid file type or missing file",
+          data: {},
+        },
+        {
+          status: 400,
+        }
+      );
+    }
+  }),
+];
diff --git a/app/src/mocks/profile-settings/profile-settings.ts b/app/src/mocks/profile-settings/profile-settings.ts
index 0d435cb6..f81d39be 100644
--- a/app/src/mocks/profile-settings/profile-settings.ts
+++ b/app/src/mocks/profile-settings/profile-settings.ts
@@ -12,19 +12,18 @@ export const profileSettingsMock = [
         status: "success",
         data: MOCK_USER,
       },
-      { status: 200 },
+      { status: 200 }
     );
   }),
 
   http.patch("/users/me", async ({ request }) => {
     const newProfileSettings = await request.json();
-
     return HttpResponse.json(
       {
         status: "success",
         data: newProfileSettings,
       },
-      { status: 200 },
+      { status: 200 }
     );
   }),
 ];
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
new file mode 100644
index 00000000..b5b53ac4
--- /dev/null
+++ b/app/src/mocks/stories/stories.ts
@@ -0,0 +1,139 @@
+import { http, HttpResponse } from "msw";
+import { MOCK_MY_STORIES, MOCK_OTHER_USER_STORIES } from "@mocks/mockData";
+
+type AddStoryRequestBody = {
+  file: File;
+  caption: string;
+};
+
+type AddStoryResponseBodySuccess = {
+  status: "success";
+  message: string;
+  data: {
+    user: {
+      id: string;
+      name: string;
+      avatarUrl: string;
+    };
+    sessionID: string;
+  };
+};
+
+type AddStoryResponseBodyFail = {
+  status: "fail" | "error";
+  message: string;
+  data: {};
+};
+
+type AddStoryResponseBody =
+  | AddStoryResponseBodySuccess
+  | AddStoryResponseBodyFail;
+
+export const storiesMock = [
+  http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
+    return undefined;
+  }),
+
+  http.get("/users/stories", async () => {
+    return HttpResponse.json(
+      {
+        status: "success",
+        data: MOCK_MY_STORIES,
+      },
+      { status: 200 }
+    );
+  }),
+
+  http.post<{}, AddStoryRequestBody, AddStoryResponseBody>(
+    "/users/stories",
+    async ({ request }) => {
+      const { file, caption } = await request.json();
+
+      if (file && caption) {
+        return HttpResponse.json(
+          {
+            status: "success",
+            message: "Successful Add Story",
+            data: {
+              user: {
+                id: "12345",
+                name: "John Doe",
+                avatarUrl: "/avatars/john_doe.png",
+              },
+              sessionID: "abcdef123456",
+            },
+          },
+          {
+            status: 201,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+      } else {
+        return HttpResponse.json(
+          {
+            status: "fail",
+            message: "File or caption missing",
+            data: {},
+          },
+          {
+            status: 400,
+          }
+        );
+      }
+    }
+  ),
+
+  http.delete("/users/stories/:storyId", async ({ params }) => {
+    const { storyId } = params;
+    if (storyId) {
+      return HttpResponse.json(
+        {
+          status: "success",
+          message: "Story deleted",
+          data: {},
+        },
+        {
+          status: 200,
+        }
+      );
+    } else {
+      return HttpResponse.json(
+        {
+          status: "fail",
+          message: "Story ID missing",
+          data: {},
+        },
+        {
+          status: 400,
+        }
+      );
+    }
+  }),
+  http.get("/users/:userId/stories", async ({ params }) => {
+    const { userId } = params;
+    if (userId) {
+      return HttpResponse.json(
+        {
+          status: "success",
+          data: MOCK_OTHER_USER_STORIES,
+        },
+        {
+          status: 200,
+        }
+      );
+    } else {
+      return HttpResponse.json(
+        {
+          status: "fail",
+          message: "User ID missing",
+          data: {},
+        },
+        {
+          status: 400,
+        }
+      );
+    }
+  }),
+];
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index fb428979..7f6e2b1d 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -156,7 +156,9 @@ const GlobalStyles = createGlobalStyle`
   
   --color-borders-input: rgb(218, 220, 224);
 
+  
   --color-error: #e53935;
+  --color-error-shade: #c62828;
   --color-success: rgb(0, 199, 62);
 
   font-size: 16px;
diff --git a/app/src/types/story.ts b/app/src/types/story.ts
new file mode 100644
index 00000000..5f1e552f
--- /dev/null
+++ b/app/src/types/story.ts
@@ -0,0 +1,13 @@
+import { otherUserInfoInterface } from "./user";
+
+interface story {
+  id: string;
+  user: otherUserInfoInterface;
+  content: string;
+  timestamp: string;
+  caption?: string;
+  views?: otherUserInfoInterface[];
+  viewed?: boolean;
+}
+
+export type { story };
diff --git a/app/src/types/user.ts b/app/src/types/user.ts
index f8ccef62..830d245d 100644
--- a/app/src/types/user.ts
+++ b/app/src/types/user.ts
@@ -1,4 +1,11 @@
-import { privacyStates, activeStates, permissionStates, permissionStatesStrings, activeStatesStrings, privacyStatesStrings } from "./sideBar";
+import {
+  privacyStates,
+  activeStates,
+  permissionStates,
+  permissionStatesStrings,
+  activeStatesStrings,
+  privacyStatesStrings,
+} from "./sideBar";
 
 interface privacySettingsInterface {
   storiesSeenPrivacy: privacyStates;
@@ -38,6 +45,16 @@ interface updateActivityInterface {
   key: keyof activitySettingsInterface;
   value: activeStatesStrings;
 }
+interface otherUserInfoInterface {
+  username: string;
+  phoneNumber: string;
+  screenFirstName: string;
+  screenLastName: string;
+  email: string;
+  photo: string | undefined;
+  status: string;
+  bio: string;
+}
 
 interface updatePermissionInterface {
   key: keyof permissionsSettingsInterface;
@@ -52,6 +69,9 @@ export type {
   updateInfoInterface,
   updatePrivacyInterface,
   userInfoInterface,
+  otherUserInfoInterface,
   permissionsSettingsInterface,
   updatePermissionInterface,
+  privacyStatesStrings,
+  activeStatesStrings,
 };

From 645730cf77a80d2775e90ec52d88227f97777065 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:37:56 +0200
Subject: [PATCH 010/136] =?UTF-8?q?=F0=9F=8E=89(oauth):=20Integrated=20wit?=
 =?UTF-8?q?h=20backend=20(#42)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 (messaging): Added chats layout (No messages)

* 🐛 (protecting routes): Fix not navigating to chat

* ♻️ (protected routes): Refacored protecting routes

* ♻️ (chats): Refactored chats

* ♻️ (aouth): Refactored aouth depending on backend changes

* 🐛 (oauth): Fix request type in google oauth

* 🎉 (oauth): Integrated with backend
---
 app/src/App.tsx                               |   5 +-
 app/src/components/AppLayout.tsx              |  42 +++++--
 app/src/components/ExpandingTextArea.tsx      |  43 +++++++
 app/src/components/Icon.tsx                   |  25 ++++
 app/src/components/Main.tsx                   |   2 +-
 .../protected-route/ProtectedRoute.tsx        |  21 +++-
 app/src/components/side-bar/SideBar.tsx       |  29 ++++-
 .../side-bar/chats/ChatsSideBarHeader.tsx     |   8 +-
 app/src/data/deviceSize.ts                    |   2 +-
 app/src/data/icons.tsx                        |  67 ++++++++++
 app/src/features/Chats/Avatar.tsx             |  35 ++++++
 app/src/features/Chats/ChatBox.tsx            |  17 +++
 app/src/features/Chats/ChatInput.tsx          |  84 +++++++++++++
 app/src/features/Chats/ChatItem.tsx           |  87 +++++++++++++
 app/src/features/Chats/ChatsList.tsx          |  26 ++++
 app/src/features/Chats/Topbar.tsx             |  84 +++++++++++++
 app/src/features/Chats/hooks/useChat.ts       |  16 +++
 app/src/features/Chats/hooks/useChats.ts      |  12 ++
 .../features/Chats/services/apiGetChats.ts    |  37 ++++++
 .../login/LoginForm/LoginForm.tsx             |   5 +-
 .../authentication/login/LoginSection.tsx     |   2 +-
 .../authentication/login/OauthOptions.tsx     |  79 ------------
 .../login/hooks/useAuthCheck.ts               |  34 +----
 .../login/hooks/useAuthStatus.ts              |  12 ++
 .../authentication/login/hooks/useLogin.ts    |   4 +-
 .../login/services/checkAuth.ts               |  13 ++
 .../authentication/logout/hooks/useLogout.ts  |   1 +
 .../{login => oauth}/LoginWith.test.tsx       |   2 +-
 .../{login => oauth}/LoginWith.tsx            |   0
 .../authentication/oauth/OauthOptions.tsx     |  50 ++++++++
 .../authentication/oauth/hooks/useOauth.ts    |  15 +++
 .../oauth/hooks/useOauthGoogle.ts             |  19 ---
 .../{useOauthGithub.ts => useOauthLogin.ts}   |  12 +-
 .../oauth/services/apiGithubOauth.ts          |  17 ---
 .../oauth/services/apiGoogleOauth.ts          |  17 ---
 .../authentication/oauth/services/apiOauth.ts |  10 ++
 .../authentication/oauth/services/apiUser.ts  |  16 +++
 .../reset-password/ResetPasswordModal.tsx     |  10 +-
 .../authentication/signup/SignupForm.tsx      |   4 +
 .../authentication/signup/SignupSection.tsx   |   1 +
 app/src/hooks/useCloseChat.ts                 |  20 +++
 app/src/mocks/chats/chat.ts                   |  26 ++++
 app/src/mocks/data/Chats.ts                   | 119 ++++++++++++++++++
 app/src/mocks/handlers.ts                     |   2 +
 app/src/mocks/userauth/resetpassword.ts       |   4 +-
 app/src/mocks/userauth/signup.ts              |   2 +-
 app/src/mocks/userauth/verfiyEmail.ts         |   4 +-
 app/src/pages/Login.tsx                       |   3 -
 app/src/pages/Signup.tsx                      |   3 -
 app/src/styles/GlobalStyles.tsx               |  43 +++++--
 50 files changed, 970 insertions(+), 221 deletions(-)
 create mode 100644 app/src/components/ExpandingTextArea.tsx
 create mode 100644 app/src/components/Icon.tsx
 create mode 100644 app/src/features/Chats/Avatar.tsx
 create mode 100644 app/src/features/Chats/ChatBox.tsx
 create mode 100644 app/src/features/Chats/ChatInput.tsx
 create mode 100644 app/src/features/Chats/ChatItem.tsx
 create mode 100644 app/src/features/Chats/ChatsList.tsx
 create mode 100644 app/src/features/Chats/Topbar.tsx
 create mode 100644 app/src/features/Chats/hooks/useChat.ts
 create mode 100644 app/src/features/Chats/hooks/useChats.ts
 create mode 100644 app/src/features/Chats/services/apiGetChats.ts
 delete mode 100644 app/src/features/authentication/login/OauthOptions.tsx
 create mode 100644 app/src/features/authentication/login/hooks/useAuthStatus.ts
 create mode 100644 app/src/features/authentication/login/services/checkAuth.ts
 rename app/src/features/authentication/{login => oauth}/LoginWith.test.tsx (94%)
 rename app/src/features/authentication/{login => oauth}/LoginWith.tsx (100%)
 create mode 100644 app/src/features/authentication/oauth/OauthOptions.tsx
 create mode 100644 app/src/features/authentication/oauth/hooks/useOauth.ts
 delete mode 100644 app/src/features/authentication/oauth/hooks/useOauthGoogle.ts
 rename app/src/features/authentication/oauth/hooks/{useOauthGithub.ts => useOauthLogin.ts} (57%)
 delete mode 100644 app/src/features/authentication/oauth/services/apiGithubOauth.ts
 delete mode 100644 app/src/features/authentication/oauth/services/apiGoogleOauth.ts
 create mode 100644 app/src/features/authentication/oauth/services/apiOauth.ts
 create mode 100644 app/src/features/authentication/oauth/services/apiUser.ts
 create mode 100644 app/src/hooks/useCloseChat.ts
 create mode 100644 app/src/mocks/chats/chat.ts
 create mode 100644 app/src/mocks/data/Chats.ts

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 7e07bbe8..88909013 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -14,6 +14,7 @@ import Signup from "./pages/Signup";
 import ResetPasswordModal from "@features/authentication/reset-password/ResetPasswordModal";
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
+import ChatBox from "@features/Chats/ChatBox";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -45,7 +46,9 @@ function App() {
                 <AppLayout />
               </ProtectedRoute>
             }
-          />
+          >
+            <Route path=":chatId" element={<ChatBox />} />
+          </Route>
 
           <Route path="login" element={<Login />} />
           <Route
diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index ca36aab8..9bccb52a 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -1,28 +1,48 @@
+import { Outlet, useParams } from "react-router-dom";
 import styled from "styled-components";
+
+import { media } from "data/deviceSize";
+
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
 import { MOBILE_VIEW } from "@constants";
 
-const StyledApp = styled.div`
-  display: grid;
-  grid-template-columns: 24rem auto;
-  height: 100dvh;
+const StyledApp = styled.div<{ $isChatOpen: boolean }>`
+  @media ${MOBILE_VIEW} {
+    & > main {
+      display: ${({ $isChatOpen }) => ($isChatOpen ? "contents" : "none")};
+    }
 
-  & > main {
-    display: block;
+    & > aside {
+      display: ${({ $isChatOpen }) => ($isChatOpen ? "none" : "contents")};
+    }
   }
-  @media ${MOBILE_VIEW} {
-    display: block;
+
+  @media ${media.desktop} {
+    display: grid;
+    grid-template-columns: 2fr 5fr;
+
     & > main {
-      display: none;
+      display: block;
+    }
+
+    & > aside {
+      display: block;
     }
   }
 `;
+
 function AppLayout() {
+  const { chatId } = useParams();
+
+  const isChatOpen = !!chatId;
+
   return (
-    <StyledApp data-testid="app-layout">
+    <StyledApp $isChatOpen={isChatOpen} data-testid="app-layout">
       <SideBar />
-      <Main />
+      <Main>
+        <Outlet />
+      </Main>
     </StyledApp>
   );
 }
diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
new file mode 100644
index 00000000..50379a70
--- /dev/null
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -0,0 +1,43 @@
+import { useRef } from "react";
+import styled from "styled-components";
+
+const Textarea = styled.textarea`
+  outline: none;
+  border: none;
+
+  flex: 1;
+  align-self: center;
+  
+  caret-color: var(--accent-color);
+  color: var(--color-text);
+
+  resize: none;
+  overflow: hidden;
+
+  font-size: 1rem;
+  line-height: 1.5;
+
+  max-height: 300px;
+`;
+
+function ExpandingTextArea() {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  function handleInput() {
+    if (ref.current) {
+      ref.current.style.height = "auto";
+      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    }
+  }
+
+  return (
+    <Textarea
+      ref={ref}
+      placeholder="Message"
+      rows={1}
+      onInput={handleInput}
+    />
+  );
+}
+
+export default ExpandingTextArea;
diff --git a/app/src/components/Icon.tsx b/app/src/components/Icon.tsx
new file mode 100644
index 00000000..64efd890
--- /dev/null
+++ b/app/src/components/Icon.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import styled from "styled-components";
+
+const StyledIcon = styled.div`
+  width: 2rem;
+  height: 2rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: var(--border-radius-modal);
+  &:hover {
+    background: var(--color-item-hover);
+    cursor: pointer;
+  }
+`;
+
+type IconProps = {
+  children: ReactNode;
+};
+
+export default function Icon({ children }: IconProps) {
+  return <StyledIcon>{children}</StyledIcon>;
+}
diff --git a/app/src/components/Main.tsx b/app/src/components/Main.tsx
index 1ab0eb2f..381e73d5 100644
--- a/app/src/components/Main.tsx
+++ b/app/src/components/Main.tsx
@@ -25,7 +25,7 @@ const StyledMain = styled.main`
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 9;
+
     background-position: center;
     background-size: cover;
     opacity: var(--bg-image-opacity);
diff --git a/app/src/components/protected-route/ProtectedRoute.tsx b/app/src/components/protected-route/ProtectedRoute.tsx
index a5247054..ef59fb17 100644
--- a/app/src/components/protected-route/ProtectedRoute.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.tsx
@@ -1,13 +1,24 @@
-import useAuthCheck from "@features/authentication/login/hooks/useAuthCheck";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAuthStatus } from "@features/authentication/login/hooks/useAuthStatus";
 
 type prortectedRouteType = {
   children: ReactNode;
 };
 
-function ProtectedRoute({ children }: prortectedRouteType) {  
-  const isAuthenticated = useAuthCheck("/login");
-  if (isAuthenticated) return children;
+function ProtectedRoute({ children }: prortectedRouteType) {
+  const navigate = useNavigate();
+  const { isAuth, isPending } = useAuthStatus();
+
+  useEffect(() => {
+    if (!isAuth && !isPending) {
+      navigate("/login");
+    }
+  }, [navigate, isAuth, isPending]);
+
+  if (isAuth) return children;
+  else return null;
 }
 
 export default ProtectedRoute;
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 74bc56a1..3b99cf8f 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import styled, { keyframes } from "styled-components";
+
 import { pagesMap } from "@data/sideBar";
+
 import ChatsSideBar from "./chats/ChatsSideBar";
 import SettingsSideBar from "./settings/SettingsSideBarBody";
 import ContactsSideBar from "./ContactsSideBar";
@@ -9,8 +11,10 @@ import SettingsUpdate from "./settings/SettingsUpdate";
 import { RadioInputProps } from "@components/inputs/radio-input/RadioInput";
 import { SideBarRowProps } from "./settings/side-bar-row/SideBarRow";
 import ProfileSettings from "@features/profile-settings/ProfileSettings";
-import { useAppSelector } from "@hooks/useGlobalState";
 import ProfileInfo from "@features/profile-info/ProfileInfo";
+import ChatList from "@features/Chats/ChatsList";
+
+import { useAppSelector } from "@hooks/useGlobalState";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -32,16 +36,37 @@ const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   background-color: var(--color-background);
   overflow: hidden;
   position: relative;
+
   display: flex;
   flex-direction: column;
+
+  border-right: 1px solid var(--color-border);
+
   animation: ${({ $isExiting }) => ($isExiting ? fadeOut : fadeIn)} 0.1s;
   animation: ${({ $isExiting }) => ($isExiting ? fadeOut : fadeIn)} 0.1s
     ease-in-out;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: inherit;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+    border-radius: 5px;
+  }
 `;
 
 const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
   {
-    Chats: () => <ChatsSideBar />,
+    Chats: () => (
+      <ChatsSideBar>
+        <ChatList />
+      </ChatsSideBar>
+    ),
     Contacts: () => <ContactsSideBar />,
     Settings: (props) => (
       <SettingsSideBar rows={props.rows || []}>
diff --git a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
index b0e25fe9..8cd3a43c 100644
--- a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
@@ -1,15 +1,21 @@
 import styled from "styled-components";
+
 import SideBarToolsButton from "./SideBarToolsButton";
 import SearchBar from "./SearchBar";
+
 const StyledHeader = styled.header`
   background: var(--color-background);
+  
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
+  
   padding: 0.375rem 0.8125rem 0.5rem 1.3rem;
-  position: relative;
   height: 4rem;
+  
+  position: sticky;
+  top: 0;
 `;
 
 function ChatsSidebarHeader() {
diff --git a/app/src/data/deviceSize.ts b/app/src/data/deviceSize.ts
index 17124266..c150109a 100644
--- a/app/src/data/deviceSize.ts
+++ b/app/src/data/deviceSize.ts
@@ -4,7 +4,7 @@ const sizes = {
 };
 
 const media = {
-  mobile: `(max-width: ${sizes.mobile})`,
+  mobile: `(max-width: ${sizes.desktop})`,
   desktop: `(min-width: ${sizes.desktop})`,
 };
 export { sizes, media };
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 09086f4e..c25b68ef 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -17,8 +17,15 @@ import AddIcon from "@mui/icons-material/Add";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import KeyboardVoiceIcon from "@mui/icons-material/KeyboardVoice";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import SentimentSatisfiedAltIcon from "@mui/icons-material/SentimentSatisfiedAlt";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
+import SearchIcon from "@mui/icons-material/Search";
 import AddAPhotoOutlined from "@mui/icons-material/AddAPhotoOutlined";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+
 enum icons {
   BlockIcon,
   SettingsOutlinedIcon,
@@ -40,6 +47,12 @@ enum icons {
   Close,
   Show,
   Hide,
+  Record,
+  Attatch,
+  Emojie,
+  More,
+  Call,
+  Search,
   Delete,
   AddPhoto,
 }
@@ -148,7 +161,61 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       sx={{ color: `var(--color-icon-secondary)` }}
     />
   ),
+
+  Record: <KeyboardVoiceIcon sx={{ fontSize: "1rem" }} />,
+
+  Attatch: (
+    <AttachFileIcon
+      sx={{
+        cursor: "pointer",
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+
+  Emojie: (
+    <SentimentSatisfiedAltIcon
+      sx={{
+        cursor: "pointer",
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+
+  More: (
+    <MoreVertIcon
+      sx={{
+        cursor: "pointer",
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+
+  Search: (
+    <SearchIcon
+      sx={{
+        cursor: "pointer",
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+
+  Call: (
+    <LocalPhoneIcon
+      sx={{
+        cursor: "pointer",
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+
   AddPhoto: <AddAPhotoOutlined fontSize="large" />,
+
   Delete: (
     <DeleteOutlineOutlinedIcon
       sx={{
diff --git a/app/src/features/Chats/Avatar.tsx b/app/src/features/Chats/Avatar.tsx
new file mode 100644
index 00000000..41942c49
--- /dev/null
+++ b/app/src/features/Chats/Avatar.tsx
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const StyledAvatar = styled.div<{ $image?: string }>`
+  width: 2.625rem;
+  height: 2.625rem;
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  background: ${({ $image }) =>
+    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  font-weight: bold;
+  font-size: 1rem;
+  text-transform: uppercase;
+`;
+
+type PropsType = {
+  image?: string | undefined;
+  name: string | undefined;
+};
+
+function Avatar({ image, name }: PropsType) {
+  return <StyledAvatar $image={image}>{!image && name}</StyledAvatar>;
+}
+
+export default Avatar;
diff --git a/app/src/features/Chats/ChatBox.tsx b/app/src/features/Chats/ChatBox.tsx
new file mode 100644
index 00000000..9fb0130b
--- /dev/null
+++ b/app/src/features/Chats/ChatBox.tsx
@@ -0,0 +1,17 @@
+import ChatInput from "@features/Chats/ChatInput";
+import Topbar from "@features/Chats/Topbar";
+
+import { useCloseChat } from "@hooks/useCloseChat";
+
+function ChatBox() {
+  useCloseChat();
+
+  return (
+    <>
+      <ChatInput />
+      <Topbar />
+    </>
+  );
+}
+
+export default ChatBox;
diff --git a/app/src/features/Chats/ChatInput.tsx b/app/src/features/Chats/ChatInput.tsx
new file mode 100644
index 00000000..6a4ce052
--- /dev/null
+++ b/app/src/features/Chats/ChatInput.tsx
@@ -0,0 +1,84 @@
+import styled from "styled-components";
+
+import { getIcon } from "@data/icons";
+
+import CircleIcon from "@components/CircleIcon";
+import ExpandingTextArea from "@components/ExpandingTextArea";
+import Icon from "@components/Icon";
+
+const Container = styled.div`
+  position: absolute;
+  z-index: 1000;
+  bottom: 1rem;
+  left: 0;
+  right: 0;
+
+  margin: auto;
+
+  width: 80%;
+  max-width: 600px;
+
+  display: flex;
+`;
+
+const InputContainer = styled.div`
+  background-color: var(--color-background);
+
+  padding: 0.3125rem 0.6rem;
+  border-radius: 1rem;
+
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+
+  flex: 3 auto;
+
+  display: flex;
+  align-items: center;
+  align-self: center;
+
+  height: 100%;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+
+  position: relative;
+
+  flex: 1;
+`;
+
+const AnotherContainer = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+
+  flex: 1;
+`;
+
+function ChatInput() {
+  return (
+    <Container>
+      <AnotherContainer>
+        <InputContainer>
+          <InputWrapper>
+            <Icon>{getIcon("Emojie")}</Icon>
+            <ExpandingTextArea />
+            <Icon>{getIcon("Attatch")}</Icon>
+          </InputWrapper>
+        </InputContainer>
+
+        <CircleIcon
+          data-testid="record-icon"
+          $icon="Record"
+          $size={3.3}
+          $padding={0.5}
+          $color="white"
+          $bgColor="var(--accent-color)"
+        />
+      </AnotherContainer>
+    </Container>
+  );
+}
+
+export default ChatInput;
diff --git a/app/src/features/Chats/ChatItem.tsx b/app/src/features/Chats/ChatItem.tsx
new file mode 100644
index 00000000..5e02f880
--- /dev/null
+++ b/app/src/features/Chats/ChatItem.tsx
@@ -0,0 +1,87 @@
+import { useNavigate, useParams } from "react-router-dom";
+import styled from "styled-components";
+
+import Avatar from "./Avatar";
+import { Chat } from "@mocks/data/Chats";
+
+const Container = styled.li<{ $active?: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  transition: background-color 0.2s ease;
+
+  background-color: ${({ $active }) =>
+    $active ? "var(--color-chat-active)" : "transparent"};
+
+  &:hover {
+    background-color: ${({ $active }) =>
+      $active ? "var(--color-chat-active)" : "var(--color-chat-hover)"};
+  }
+`;
+
+const ChatContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+`;
+
+const ChatHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Name = styled.span`
+  font-weight: 500;
+  font-size: 1rem;
+  color: var(--color-text);
+`;
+
+const Timestamp = styled.span`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+const LastMessage = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+type ChatItemProps = {
+  chat: Chat;
+};
+
+function ChatItem({
+  chat: { id, image, name, timestamp, lastMessage },
+}: ChatItemProps) {
+  const navigate = useNavigate();
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const handleOpenChat = () => {
+    navigate(`/${id}`);
+  };
+
+  return (
+    <Container
+      $active={Number(chatId) === id}
+      onClick={handleOpenChat}
+      key={id}
+    >
+      <Avatar image={image} name={name?.charAt(0)} />
+      <ChatContent>
+        <ChatHeader>
+          <Name>{name}</Name>
+          <Timestamp>{timestamp}</Timestamp>
+        </ChatHeader>
+        <LastMessage>{lastMessage}</LastMessage>
+      </ChatContent>
+    </Container>
+  );
+}
+
+export default ChatItem;
diff --git a/app/src/features/Chats/ChatsList.tsx b/app/src/features/Chats/ChatsList.tsx
new file mode 100644
index 00000000..653ac978
--- /dev/null
+++ b/app/src/features/Chats/ChatsList.tsx
@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import ChatItem from "./ChatItem";
+import { useChats } from "./hooks/useChats";
+
+const ChatListContainer = styled.ul`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+  background-color: var(--color-background);
+`;
+
+const ChatsList = () => {
+  const { chats, isPending } = useChats();
+
+  if (isPending) return;
+
+  return (
+    <ChatListContainer>
+      {chats?.map((chat) => <ChatItem chat={chat} key={chat.id} />)}
+    </ChatListContainer>
+  );
+};
+
+export default ChatsList;
diff --git a/app/src/features/Chats/Topbar.tsx b/app/src/features/Chats/Topbar.tsx
new file mode 100644
index 00000000..16b9ac76
--- /dev/null
+++ b/app/src/features/Chats/Topbar.tsx
@@ -0,0 +1,84 @@
+import styled from "styled-components";
+
+import { getIcon } from "@data/icons";
+
+import Avatar from "@features/Chats/Avatar";
+import Icon from "@components/Icon";
+
+import { useChat } from "@features/Chats/hooks/useChat";
+
+const Container = styled.div`
+  position: absolute;
+  z-index: 1000;
+  height: 3.5rem;
+  background-color: var(--color-background);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: 1rem;
+`;
+
+const Info = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-width: 60%;
+`;
+
+const LastSeen = styled.span`
+  font-size: 0.875rem;
+  line-height: 0.9rem;
+  color: var(--color-text-secondary);
+`;
+
+const Name = styled.span`
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+
+  font-weight: 500;
+
+  line-height: 1.3125rem;
+`;
+
+const Icons = styled.div`
+  display: flex;
+  align-items: center;
+
+  gap: 1.5rem;
+`;
+
+function Topbar() {
+  const { chat } = useChat();
+  const { name, lastSeen, image } = chat || {};
+
+  if (!chat) return;
+
+  return (
+    <Container>
+      <Info>
+        <Avatar image={image} name={name?.charAt(0)} />
+        <Content>
+          <Name>{name}</Name>
+          <LastSeen>last seen {lastSeen}</LastSeen>
+        </Content>
+      </Info>
+      <Icons>
+        <Icon>{getIcon("Call")}</Icon>
+        <Icon>{getIcon("Search")}</Icon>
+        <Icon>{getIcon("More")}</Icon>
+      </Icons>
+    </Container>
+  );
+}
+
+export default Topbar;
diff --git a/app/src/features/Chats/hooks/useChat.ts b/app/src/features/Chats/hooks/useChat.ts
new file mode 100644
index 00000000..6a920858
--- /dev/null
+++ b/app/src/features/Chats/hooks/useChat.ts
@@ -0,0 +1,16 @@
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+
+import { getChatApi } from "../services/apiGetChats";
+import { Chat } from "@mocks/data/Chats";
+
+export function useChat() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const { data: chat, isPending } = useQuery<Chat>({
+    queryKey: ["current-chat", chatId!],
+    queryFn: () => getChatApi(chatId!),
+  });
+
+  return { chat, isPending };
+}
diff --git a/app/src/features/Chats/hooks/useChats.ts b/app/src/features/Chats/hooks/useChats.ts
new file mode 100644
index 00000000..02ab61ff
--- /dev/null
+++ b/app/src/features/Chats/hooks/useChats.ts
@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAllChatsApi } from "../services/apiGetChats";
+import { Chat } from "@mocks/data/Chats";
+
+export function useChats() {
+  const { data: chats, isPending } = useQuery<Chat[]>({
+    queryKey: ["chats"],
+    queryFn: getAllChatsApi,
+  });
+
+  return { chats, isPending };
+}
diff --git a/app/src/features/Chats/services/apiGetChats.ts b/app/src/features/Chats/services/apiGetChats.ts
new file mode 100644
index 00000000..f4fe384a
--- /dev/null
+++ b/app/src/features/Chats/services/apiGetChats.ts
@@ -0,0 +1,37 @@
+import { API_URL } from "@constants";
+
+export async function getAllChatsApi() {
+  const res = await fetch(`${API_URL}/chats`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data.data;
+}
+
+export async function getChatApi(id: string) {
+  const res = await fetch(`${API_URL}/chat/${id}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data.data;
+}
diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
index 7d823b9c..73ff3d49 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.tsx
@@ -4,7 +4,6 @@ import { useForm, SubmitHandler } from "react-hook-form";
 
 import styled from "styled-components";
 
-import { useLogin } from "../hooks/useLogin";
 import { schema } from "../schema/login";
 
 import ForgotPasswordModal from "../ForgotPasswordModal";
@@ -15,6 +14,9 @@ import PasswordInputField from "@components/inputs/password-input-field/Password
 import SpinnerMini from "@components/SpinnerMini";
 import ConfirmationEmailModal from "@features/authentication/signup/ConfirmationEmailModal";
 
+import { useLogin } from "../hooks/useLogin";
+import useAuthCheck from "../hooks/useAuthCheck";
+
 const MAX_PASSWORD_LENGTH = 128;
 const MAX_EMAIL_LENGTH = 254;
 
@@ -73,6 +75,7 @@ const StyledSpan = styled.span`
 `;
 
 export default function LoginForm() {
+  useAuthCheck();
   const { login, isPending } = useLogin();
 
   const [error, setError] = useState("");
diff --git a/app/src/features/authentication/login/LoginSection.tsx b/app/src/features/authentication/login/LoginSection.tsx
index b91d3dda..1c3fa9ca 100644
--- a/app/src/features/authentication/login/LoginSection.tsx
+++ b/app/src/features/authentication/login/LoginSection.tsx
@@ -1,9 +1,9 @@
 import styled from "styled-components";
 
 import LoginForm from "./LoginForm/LoginForm";
-import OauthOptions from "./OauthOptions";
 
 import StyledLink from "@components/StyledLink";
+import OauthOptions from "../oauth/OauthOptions";
 
 const Container = styled.div`
   max-width: 120rem;
diff --git a/app/src/features/authentication/login/OauthOptions.tsx b/app/src/features/authentication/login/OauthOptions.tsx
deleted file mode 100644
index 2ab30301..00000000
--- a/app/src/features/authentication/login/OauthOptions.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect } from "react";
-import styled from "styled-components";
-
-import google from "/oauth/google.png";
-import githubLight from "/oauth/githubLight.png";
-import githubDark from "/oauth/githubDark.png";
-
-import LoginWith from "./LoginWith";
-
-import { useAppSelector } from "hooks/useGlobalState";
-import { Theme } from "state/theme/theme";
-
-import { useOauthGoogle } from "../oauth/hooks/useOauthGoogle";
-import { useOauthGithub } from "../oauth/hooks/useOauthGithub";
-import { PORT } from "@constants";
-
-const Icons = styled.div`
-  display: flex;
-  gap: 1rem;
-
-  margin: 0 auto;
-`;
-
-const OtherMethods = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  color: var(--color-text-secondary);
-  align-items: center;
-
-  gap: 0.2rem;
-`;
-
-function OauthOptions() {
-  const theme = useAppSelector((state) => state.theme.value);
-  const gitHub = theme === Theme.DARK ? githubDark : githubLight;
-
-  const { loginWithGithub } = useOauthGithub();
-  const { loginWithGoogle } = useOauthGoogle();
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const code = urlParams.get("code");
-
-    if (code) {
-      if (window.location.href.includes("google")) {
-        loginWithGoogle(code);
-      } else {
-        loginWithGithub(code);
-      }
-    }
-  }, []);
-
-  function handleGithubLogin() {
-    const clientID = import.meta.env.VITE_GITHUB_CLIENT_ID;
-    const redirectURI = `http://localhost:${PORT}/login`;
-    window.location.href = `https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_uri=${redirectURI}`;
-  }
-
-  function handleGoogleLogin() {
-    const clientID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
-    const redirectURI = `http://localhost:${PORT}/login`;
-    const scope = "profile email";
-    window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientID}&redirect_uri=${redirectURI}&response_type=code&scope=${scope}`;
-  }
-
-  return (
-    <OtherMethods>
-      <p>Or</p>
-
-      <Icons data-test="oauth-options">
-        <LoginWith onClick={handleGoogleLogin} src={google} alt="google" />
-        <LoginWith onClick={handleGithubLogin} src={gitHub} alt="github" />
-      </Icons>
-    </OtherMethods>
-  );
-}
-
-export default OauthOptions;
diff --git a/app/src/features/authentication/login/hooks/useAuthCheck.ts b/app/src/features/authentication/login/hooks/useAuthCheck.ts
index 05ac92d5..ee0111a3 100644
--- a/app/src/features/authentication/login/hooks/useAuthCheck.ts
+++ b/app/src/features/authentication/login/hooks/useAuthCheck.ts
@@ -1,37 +1,15 @@
-import { API_URL } from "@constants";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-type Path = "/login" | "/signup" | `/password-reset/${string}`;
+import { useAuthStatus } from "./useAuthStatus";
 
-const useAuthCheck = (path: Path) => {
+const useAuthCheck = () => {
+  const { isAuth } = useAuthStatus();
   const navigate = useNavigate();
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   useEffect(() => {
-    async function checkAuth() {
-      try {
-        const res = await fetch(`${API_URL}/auth/me`, {
-          method: "GET",
-          credentials: "include",
-        });
-        if (res.ok) {
-          setIsAuthenticated(true);
-          navigate("/", { replace: true });
-        } else {
-          setIsAuthenticated(false);
-          navigate(path);
-        }
-      } catch (error) {
-        setIsAuthenticated(false);
-        navigate("/login");
-      }
-    }
-
-    checkAuth();
-  }, [navigate, path]);
-
-  return isAuthenticated;
+    if (isAuth) navigate("/", { replace: true });
+  }, [isAuth, navigate]);
 };
 
 export default useAuthCheck;
diff --git a/app/src/features/authentication/login/hooks/useAuthStatus.ts b/app/src/features/authentication/login/hooks/useAuthStatus.ts
new file mode 100644
index 00000000..0636b959
--- /dev/null
+++ b/app/src/features/authentication/login/hooks/useAuthStatus.ts
@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { checkAuth } from "../services/checkAuth";
+
+export function useAuthStatus() {
+  const { data: isAuth, isPending } = useQuery({
+    queryKey: ["isAuth"],
+    queryFn: checkAuth,
+  });
+
+  return { isAuth, isPending };
+}
diff --git a/app/src/features/authentication/login/hooks/useLogin.ts b/app/src/features/authentication/login/hooks/useLogin.ts
index 82bd5f2e..b406b07b 100644
--- a/app/src/features/authentication/login/hooks/useLogin.ts
+++ b/app/src/features/authentication/login/hooks/useLogin.ts
@@ -1,17 +1,15 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
 
 import { login as loginApi } from "../services/apiLogin";
 
 export function useLogin() {
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
 
   const { mutate: login, isPending } = useMutation({
     mutationFn: loginApi,
     onSuccess: (data) => {
       queryClient.setQueryData(["user"], { user: data.user });
-      navigate("/", { replace: true });
+      queryClient.invalidateQueries({ queryKey: ["isAuth"] });
     },
   });
 
diff --git a/app/src/features/authentication/login/services/checkAuth.ts b/app/src/features/authentication/login/services/checkAuth.ts
new file mode 100644
index 00000000..87055ebf
--- /dev/null
+++ b/app/src/features/authentication/login/services/checkAuth.ts
@@ -0,0 +1,13 @@
+import { API_URL } from "@constants";
+
+export async function checkAuth() {
+  const res = await fetch(`${API_URL}/auth/me`, {
+    method: "GET",
+    credentials: "include",
+  });
+  if (!res.ok) {
+    return false;
+  } else {
+    return true;
+  }
+}
diff --git a/app/src/features/authentication/logout/hooks/useLogout.ts b/app/src/features/authentication/logout/hooks/useLogout.ts
index f15c9535..6c013802 100644
--- a/app/src/features/authentication/logout/hooks/useLogout.ts
+++ b/app/src/features/authentication/logout/hooks/useLogout.ts
@@ -11,6 +11,7 @@ export function useLogout() {
     onSuccess: () => {
       queryClient.removeQueries();
       navigate("/login", { replace: true });
+      queryClient.invalidateQueries({ queryKey: ["isAuth"] });
     },
   });
 
diff --git a/app/src/features/authentication/login/LoginWith.test.tsx b/app/src/features/authentication/oauth/LoginWith.test.tsx
similarity index 94%
rename from app/src/features/authentication/login/LoginWith.test.tsx
rename to app/src/features/authentication/oauth/LoginWith.test.tsx
index 29ea40f8..3ddee61c 100644
--- a/app/src/features/authentication/login/LoginWith.test.tsx
+++ b/app/src/features/authentication/oauth/LoginWith.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import LoginWith from "./LoginWith";
+import LoginWith from "../oauth/LoginWith";
 
 describe("LoginWith Component", () => {
   const mockOnClick = jest.fn();
diff --git a/app/src/features/authentication/login/LoginWith.tsx b/app/src/features/authentication/oauth/LoginWith.tsx
similarity index 100%
rename from app/src/features/authentication/login/LoginWith.tsx
rename to app/src/features/authentication/oauth/LoginWith.tsx
diff --git a/app/src/features/authentication/oauth/OauthOptions.tsx b/app/src/features/authentication/oauth/OauthOptions.tsx
new file mode 100644
index 00000000..cdc6bd6f
--- /dev/null
+++ b/app/src/features/authentication/oauth/OauthOptions.tsx
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+import google from "/oauth/google.png";
+import githubLight from "/oauth/githubLight.png";
+import githubDark from "/oauth/githubDark.png";
+
+import { apiGithubOauth, apiGoogleOauth } from "./services/apiOauth";
+import LoginWith from "./LoginWith";
+
+import { Theme } from "state/theme/theme";
+
+import { useOauth } from "./hooks/useOauth";
+import { useAppSelector } from "hooks/useGlobalState";
+
+const Icons = styled.div`
+  display: flex;
+  gap: 1rem;
+
+  margin: 0 auto;
+`;
+
+const OtherMethods = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  color: var(--color-text-secondary);
+  align-items: center;
+
+  gap: 0.2rem;
+`;
+
+function OauthOptions() {
+  const theme = useAppSelector((state) => state.theme.value);
+  const gitHub = theme === Theme.DARK ? githubDark : githubLight;
+
+  useOauth();
+
+  return (
+    <OtherMethods>
+      <p>Or</p>
+
+      <Icons data-test="oauth-options">
+        <LoginWith onClick={apiGoogleOauth} src={google} alt="google" />
+        <LoginWith onClick={apiGithubOauth} src={gitHub} alt="github" />
+      </Icons>
+    </OtherMethods>
+  );
+}
+
+export default OauthOptions;
diff --git a/app/src/features/authentication/oauth/hooks/useOauth.ts b/app/src/features/authentication/oauth/hooks/useOauth.ts
new file mode 100644
index 00000000..7a761760
--- /dev/null
+++ b/app/src/features/authentication/oauth/hooks/useOauth.ts
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { useOauthLogin } from "./useOauthLogin";
+
+export function useOauth() {
+  const { login } = useOauthLogin()
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const oauth = urlParams.get("oauth");
+
+    if (oauth) {
+      login();
+    }
+  }, []);
+}
diff --git a/app/src/features/authentication/oauth/hooks/useOauthGoogle.ts b/app/src/features/authentication/oauth/hooks/useOauthGoogle.ts
deleted file mode 100644
index a212c114..00000000
--- a/app/src/features/authentication/oauth/hooks/useOauthGoogle.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-
-import { apiGoogleOauth } from "../services/apiGoogleOauth";
-
-export function useOauthGoogle() {
-  const queryClient = useQueryClient();
-  const navigate = useNavigate();
-
-  const { mutate: loginWithGoogle, isPending } = useMutation({
-    mutationFn: apiGoogleOauth,
-    onSuccess: (data) => {
-      queryClient.setQueryData(["user"], { user: data.user });
-      navigate("/", { replace: true });
-    },
-  });
-
-  return { loginWithGoogle, isPending };
-}
diff --git a/app/src/features/authentication/oauth/hooks/useOauthGithub.ts b/app/src/features/authentication/oauth/hooks/useOauthLogin.ts
similarity index 57%
rename from app/src/features/authentication/oauth/hooks/useOauthGithub.ts
rename to app/src/features/authentication/oauth/hooks/useOauthLogin.ts
index f2ab075c..d1330835 100644
--- a/app/src/features/authentication/oauth/hooks/useOauthGithub.ts
+++ b/app/src/features/authentication/oauth/hooks/useOauthLogin.ts
@@ -1,19 +1,19 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
+import { apiUser } from "../services/apiUser";
 
-import { apiGithubOauth } from "../services/apiGithubOauth";
-
-export function useOauthGithub() {
+export function useOauthLogin() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
-  const { mutate: loginWithGithub, isPending } = useMutation({
-    mutationFn: apiGithubOauth,
+  const { mutate: login, isPending } = useMutation({
+    mutationFn: apiUser,
     onSuccess: (data) => {
       queryClient.setQueryData(["user"], { user: data.user });
       navigate("/", { replace: true });
+      queryClient.invalidateQueries({ queryKey: ["isAuth"] });
     },
   });
 
-  return { loginWithGithub, isPending };
+  return { login, isPending };
 }
diff --git a/app/src/features/authentication/oauth/services/apiGithubOauth.ts b/app/src/features/authentication/oauth/services/apiGithubOauth.ts
deleted file mode 100644
index 7dc82212..00000000
--- a/app/src/features/authentication/oauth/services/apiGithubOauth.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { API_URL } from "@constants";
-
-export async function apiGithubOauth(code: string) {
-  const res = await fetch(`${API_URL}/auth/oauth/github`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ code }),
-  });
-
-  const data = await res.json();
-
-  if (data.status !== "success") {
-    throw new Error(data.message);
-  }
-
-  return data.data;
-}
diff --git a/app/src/features/authentication/oauth/services/apiGoogleOauth.ts b/app/src/features/authentication/oauth/services/apiGoogleOauth.ts
deleted file mode 100644
index 078996b6..00000000
--- a/app/src/features/authentication/oauth/services/apiGoogleOauth.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { API_URL } from "@constants";
-
-export async function apiGoogleOauth(code: string) {
-  const res = await fetch(`${API_URL}/auth/oauth/google`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ code }),
-  });
-
-  const data = await res.json();
-
-  if (data.status !== "success") {
-    throw new Error(data.message);
-  }
-
-  return data.data;
-}
diff --git a/app/src/features/authentication/oauth/services/apiOauth.ts b/app/src/features/authentication/oauth/services/apiOauth.ts
new file mode 100644
index 00000000..2e0fc86a
--- /dev/null
+++ b/app/src/features/authentication/oauth/services/apiOauth.ts
@@ -0,0 +1,10 @@
+import { API_URL } from "@constants";
+
+export async function apiGoogleOauth() {
+   window.location.href = `${API_URL}/auth/oauth/google?platform=web`;
+}
+
+export async function apiGithubOauth() {
+  window.location.href = `${API_URL}/auth/oauth/github?platform=web`;
+}
+
diff --git a/app/src/features/authentication/oauth/services/apiUser.ts b/app/src/features/authentication/oauth/services/apiUser.ts
new file mode 100644
index 00000000..e6734901
--- /dev/null
+++ b/app/src/features/authentication/oauth/services/apiUser.ts
@@ -0,0 +1,16 @@
+import { API_URL } from "@constants";
+
+export async function apiUser() {
+  const res = await fetch(`${API_URL}/users/me`, {
+    method: "GET",
+    credentials: "include",
+  });
+    
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data.data;
+}
diff --git a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
index f7df9059..b63ee0d4 100644
--- a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
+++ b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
@@ -1,11 +1,14 @@
+import styled from "styled-components";
 import { useNavigate, useParams } from "react-router-dom";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useResetPassword } from "./hooks/useResetPassword";
+
 import { schema } from "./schema/schema";
-import styled from "styled-components";
+
 import PasswordInputField from "@components/inputs/input-field/PasswordInputField";
 import Button from "@components/Button";
+
+import { useResetPassword } from "./hooks/useResetPassword";
 import useAuthCheck from "../login/hooks/useAuthCheck";
 
 type ResetPassword = {
@@ -71,8 +74,9 @@ const Inputs = styled.div`
 function ResetPasswordModal() {
   const { resetPassword, isPending, isSuccess, isError } = useResetPassword();
   const { token } = useParams();
-  useAuthCheck(`/password-reset/${token}`);
   const navigate = useNavigate();
+  useAuthCheck();
+
   const {
     register,
     handleSubmit,
diff --git a/app/src/features/authentication/signup/SignupForm.tsx b/app/src/features/authentication/signup/SignupForm.tsx
index 2f4e0a71..5c3adca5 100644
--- a/app/src/features/authentication/signup/SignupForm.tsx
+++ b/app/src/features/authentication/signup/SignupForm.tsx
@@ -13,6 +13,9 @@ import TelephoneInputField from "@components/inputs/input-field/TelephoneInputFi
 import ConfirmationEmailModal from "./ConfirmationEmailModal";
 import PasswordInputField from "@components/inputs/input-field/PasswordInputField";
 import { RECAPTCHA_SITE_KEY } from "@constants";
+
+import useAuthCheck from "../login/hooks/useAuthCheck";
+
 export type User = {
   username: string;
   phoneNumber: string;
@@ -42,6 +45,7 @@ const Error = styled.p`
 `;
 
 export default function SignupForm() {
+  useAuthCheck();
   const recaptchaRef = useRef<ReCAPTCHA | null>(null);
   const { signup, isPending, isSuccess } = useSignup();
 
diff --git a/app/src/features/authentication/signup/SignupSection.tsx b/app/src/features/authentication/signup/SignupSection.tsx
index 4b28a797..5fd0d78a 100644
--- a/app/src/features/authentication/signup/SignupSection.tsx
+++ b/app/src/features/authentication/signup/SignupSection.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+
 import SignupForm from "./SignupForm";
 
 const Container = styled.div`
diff --git a/app/src/hooks/useCloseChat.ts b/app/src/hooks/useCloseChat.ts
new file mode 100644
index 00000000..40e6b072
--- /dev/null
+++ b/app/src/hooks/useCloseChat.ts
@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export function useCloseChat() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    function onEscPress(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        navigate("/");
+      }
+    }
+
+    document.addEventListener("keydown", onEscPress, false);
+
+    return () => {
+      document.removeEventListener("keydown", onEscPress, false);
+    };
+  }, []);
+}
diff --git a/app/src/mocks/chats/chat.ts b/app/src/mocks/chats/chat.ts
new file mode 100644
index 00000000..0c142ab0
--- /dev/null
+++ b/app/src/mocks/chats/chat.ts
@@ -0,0 +1,26 @@
+import { allChats } from "@mocks/data/Chats";
+import { http, HttpResponse } from "msw";
+
+export const chats = [
+  http.get("/chats", async () => {
+    return HttpResponse.json(
+      {
+        status: "success",
+        data: allChats,
+      },
+      { status: 200 }
+    );
+  }),
+
+  http.get("/chat/:id", async ({ params }) => {
+    const chat = allChats.find((chat) => chat.id.toString() === params.id);
+
+    return HttpResponse.json(
+      {
+        status: "success",
+        data: chat || null,
+      },
+      { status: 200 }
+    );
+  }),
+];
diff --git a/app/src/mocks/data/Chats.ts b/app/src/mocks/data/Chats.ts
new file mode 100644
index 00000000..4d17dce3
--- /dev/null
+++ b/app/src/mocks/data/Chats.ts
@@ -0,0 +1,119 @@
+export type Chat = {
+  id: number;
+  name: string;
+  lastMessage: string;
+  timestamp: string;
+  lastSeen?: string;
+  image?: string;
+};
+
+export const allChats: Chat[] = [
+  {
+    id: 1,
+    name: "Alice",
+    lastMessage: "See you soon!",
+    timestamp: "1h ago",
+    lastSeen: "10 minutes ago",
+    image:
+      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
+  },
+  {
+    id: 2,
+    name: "Bob",
+    lastMessage: "Let's meet tomorrow.",
+    timestamp: "2h ago",
+    lastSeen: "30 minutes ago",
+  },
+  {
+    id: 3,
+    name: "Charlie",
+    lastMessage: "Hello!",
+    timestamp: "3h ago",
+    lastSeen: "45 minutes ago",
+  },
+  {
+    id: 4,
+    name: "David",
+    lastMessage: "Good morning!",
+    timestamp: "4h ago",
+    lastSeen: "1 hour ago",
+  },
+  {
+    id: 5,
+    name: "Eve",
+    lastMessage: "See you at 5pm.",
+    timestamp: "5h ago",
+    lastSeen: "1 hour ago",
+  },
+  {
+    id: 6,
+    name: "Frank",
+    lastMessage: "I'm on my way.",
+    timestamp: "6h ago",
+    lastSeen: "2 hours ago",
+  },
+  {
+    id: 7,
+    name: "Grace",
+    lastMessage:
+      "How are you? a very long message to test if the text is truncated correctly",
+    timestamp: "7h ago",
+    lastSeen: "3 hours ago",
+  },
+  {
+    id: 8,
+    name: "Hannah",
+    lastMessage: "Let's catch up soon!",
+    timestamp: "8h ago",
+    lastSeen: "4 hours ago",
+  },
+  {
+    id: 9,
+    name: "Ivy",
+    lastMessage: "Thanks for your help!",
+    timestamp: "9h ago",
+    lastSeen: "5 hours ago",
+  },
+  {
+    id: 10,
+    name: "Jack",
+    lastMessage: "Can't wait to see you!",
+    timestamp: "10h ago",
+    lastSeen: "6 hours ago",
+  },
+  {
+    id: 11,
+    name: "Kara",
+    lastMessage: "Talk soon.",
+    timestamp: "11h ago",
+    lastSeen: "7 hours ago",
+  },
+  {
+    id: 12,
+    name: "Liam",
+    lastMessage: "I'll send the details.",
+    timestamp: "12h ago",
+    lastSeen: "8 hours ago",
+  },
+  {
+    id: 13,
+    name: "Mia",
+    lastMessage: "Let's go for a walk.",
+    timestamp: "13h ago",
+    lastSeen: "9 hours ago",
+  },
+  {
+    id: 14,
+    name: "Noah",
+    lastMessage: "I agree with you.",
+    timestamp: "14h ago",
+    lastSeen: "10 hours ago",
+  },
+  {
+    id: 15,
+    name: "Olivia",
+    lastMessage: "I'll get back to you.",
+    timestamp: "15h ago",
+    lastSeen: "11 hours ago",
+  },
+];
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index c1bce5a1..df2d792c 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -7,6 +7,7 @@ import { logoutMock } from "./userauth/logout";
 import { privacySettingsMock } from "./privacySettings";
 import { OauthMock } from "./oauth/oauth";
 import { profileSettingsMock } from "./profile-settings/profile-settings";
+import { chats } from "./chats/chat";
 import { profilePictureMock } from "./profile-settings/profile-picture";
 import { storiesMock } from "./stories/stories";
 
@@ -21,6 +22,7 @@ export default [
   ...privacySettingsMock,
   ...logoutMock,
   ...profileSettingsMock,
+  ...chats,
   ...profilePictureMock,
   ...storiesMock,
 ];
diff --git a/app/src/mocks/userauth/resetpassword.ts b/app/src/mocks/userauth/resetpassword.ts
index 2212d0eb..b032ab6e 100644
--- a/app/src/mocks/userauth/resetpassword.ts
+++ b/app/src/mocks/userauth/resetpassword.ts
@@ -23,7 +23,7 @@ type PasswordResponseBody = PasswordResponseSuccess | PasswordResponseError;
 
 export const forgetPassword = [
   http.post<object, PasswordRequestBodySend, PasswordResponseBody>(
-    `mock/auth/password/forget`,
+    `/auth/password/forget`,
     async ({ request }) => {
       await request.json();
       const isValid = false;
@@ -51,7 +51,7 @@ export const forgetPassword = [
 
 export const resetPassword = [
   http.post<object, PasswordRequestBodyVerify, PasswordResponseBody>(
-    `mock/auth/password/reset/1`,
+    `/auth/password/reset/1`,
     async ({ request }) => {
       await request.json();
       const isValid = false;
diff --git a/app/src/mocks/userauth/signup.ts b/app/src/mocks/userauth/signup.ts
index ba565656..780e9df7 100644
--- a/app/src/mocks/userauth/signup.ts
+++ b/app/src/mocks/userauth/signup.ts
@@ -25,7 +25,7 @@ type SignupResponseBody = SignupResponseBodySuccess | SignupResponseBodyFail;
 
 export const signupMock = [
   http.post<object, SignupRequestBody, SignupResponseBody>(
-    `mock/auth/signup`,
+    `/auth/signup`,
     async ({ request }) => {
       await request.json();
       const isValid = true;
diff --git a/app/src/mocks/userauth/verfiyEmail.ts b/app/src/mocks/userauth/verfiyEmail.ts
index 2f65867e..2c99bbdf 100644
--- a/app/src/mocks/userauth/verfiyEmail.ts
+++ b/app/src/mocks/userauth/verfiyEmail.ts
@@ -23,7 +23,7 @@ type EmailResponseBody = EmailResponseSuccess | EmailResponseError;
 
 export const sendEmailConfirmationMock = [
   http.post<object, EmailRequestBodySend, EmailResponseBody>(
-    `mock/auth/send-confirmation`,
+    `/auth/send-confirmation`,
     async ({ request }) => {
       await request.json();
       const isValid = true;
@@ -51,7 +51,7 @@ export const sendEmailConfirmationMock = [
 
 export const verifyEmailMock = [
   http.post<object, EmailRequestBodyVerify, EmailResponseBody>(
-    `mock/auth/verify`,
+    `/auth/verify`,
     async ({ request }) => {
       await request.json();
       const isValid = true;
diff --git a/app/src/pages/Login.tsx b/app/src/pages/Login.tsx
index fe030fcc..37fb65fe 100644
--- a/app/src/pages/Login.tsx
+++ b/app/src/pages/Login.tsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
 
-import useAuthCheck from "@features/authentication/login/hooks/useAuthCheck";
 import LoginSection from "@features/authentication/login/LoginSection";
 import Heading from "@components/Heading";
 
@@ -24,8 +23,6 @@ const SideBar = styled.div`
 `;
 
 function Login() {
-  useAuthCheck("/login");
-
   return (
     <LoginLayout>
       <SideBar />
diff --git a/app/src/pages/Signup.tsx b/app/src/pages/Signup.tsx
index 3f0e0cd0..12e4e5fa 100644
--- a/app/src/pages/Signup.tsx
+++ b/app/src/pages/Signup.tsx
@@ -1,7 +1,6 @@
 import Heading from "@components/Heading";
 import { styled, keyframes } from "styled-components";
 import SignupSection from "@features/authentication/signup/SignupSection";
-import useAuthCheck from "@features/authentication/login/hooks/useAuthCheck";
 
 const SignupLayout = styled.div`
   display: grid;
@@ -36,8 +35,6 @@ const AnimatedTitle = styled(Heading).attrs({ as: "h1" })`
 `;
 
 function Signup() {
-  useAuthCheck("/signup");
-
   return (
     <SignupLayout>
       <SideBar />
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 7f6e2b1d..017452b3 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -40,8 +40,8 @@ const GlobalStyles = createGlobalStyle`
     
     --color-text-button: var(--color-background);
     
-    --color-chat-active: #56a2c9;
-    --color-chat-hover: rgb(244, 244, 245);
+    --color-chat-active: #c6deeb;
+    --color-chat-hover: #f5f5f5;
 
     --color-default-shadow: rgb(114, 114, 114, 0.251);
 
@@ -56,14 +56,18 @@ const GlobalStyles = createGlobalStyle`
     --color-background-compact-menu: rgb(255, 255, 255, 0.733);
     --color-background-compact-menu-hover: rgb(0, 0, 0, 0.067);
     
-    --color-border: rgb(244, 244, 245);
+    --color-border: #dfe1e5;
     --color-borders-input: rgb(218, 220, 224);
 
     --color-search-border: #3390ec;
 
     --image-grayscale: 0;
     --image-opacity: 30%;
+
+    --scrollbar-color: rgba(0, 0, 0, .2);
+    --color-avatar: linear-gradient(135deg, #d6d46c, #5e924e);
   }
+  
   &.dark-mode {
     --color-text: #f5f5f5;
     --color-text-secondary: rgb(170, 170, 170);
@@ -71,16 +75,27 @@ const GlobalStyles = createGlobalStyle`
     --color-text-button: var(--color-text);
     --color-background: #050709;
     --color-interactive-element-hover: rgba(var(--color-text-secondary-rgb), 0.08);
-    --theme-background-color-down-right: #172431;
-    --theme-background-color-down-left: #0E141A;
-    --theme-background-color-top-left: #0F171E;
-    --theme-background-color-top-right: #141C2B;
+
+    --chat-background-left: #0E141A;
+    --chat-background-mid-left: #0F171E;
+    --chat-background-mid-right: #141C2B;
+    --chat-background-right: #1d2d3d;
     
     --accent-color: #56a2c9;
     --accent-color-shade: #447f9c;
 
-    --color-chat-wallpaper-1: linear-gradient(90deg, #49175d, #1c1042, #202656, #262b64);;
-    --color-chat-wallpaper-2: linear-gradient(90deg, #3e1f3f, #562a48, #7a5b42);
+    --color-chat-wallpaper-1: linear-gradient(90deg,
+      var(--chat-background-left),
+      var(--chat-background-mid-left),
+      var(--chat-background-mid-right),
+      var(--chat-background-right)
+    );
+    --color-chat-wallpaper-2: linear-gradient(90deg,
+      var(--chat-background-right),
+      var(--chat-background-mid-right), 
+      var(--chat-background-mid-left)
+    );
+
     --bg-image-opacity: 100%;
 
     --chat-wallpaper-bg: url("/assets/bg-dark.png");
@@ -92,7 +107,7 @@ const GlobalStyles = createGlobalStyle`
 
     --color-default-shadow: rgb(16, 16, 16, 0.612);
     
-    --color-chat-active: #2d637c;
+    --color-chat-active: #1e4454;
     --color-chat-hover: #25353f;
     
     --color-icon-secondary:  rgb(170, 170, 170);
@@ -101,7 +116,7 @@ const GlobalStyles = createGlobalStyle`
     --color-background-compact-menu: rgb(33, 33, 33, 0.867);
     --color-background-compact-menu-hover: rgb(0, 0, 0, 0.4);
  
-    --color-border: #25353f;
+    --color-border: #09182299;
     --color-borders-input: var(--color-text-secondary);
 
     --color-search-border: #7644CB;
@@ -109,11 +124,13 @@ const GlobalStyles = createGlobalStyle`
     --image-grayscale: 10%;
     --image-opacity: 90%;
 
-     --color-item-hover: rgb(244, 244, 245);
+    --color-item-hover: var(--color-chat-hover);
     --color-item-active: rgb(237, 237, 237);
+
+    --scrollbar-color: rgba(255, 255, 255, .2);
+    --color-avatar: linear-gradient(135deg, #72C6EF, #004E92);
   }
 
-  
   --color-background-own-1: #6573F8;
   --color-background-own-2: #7644CB;
   --color-background-own-3: #8849B4;

From 53adca8eb3b25b2640853866478be021b5578973 Mon Sep 17 00:00:00 2001
From: shehab khaled <89648315+shehab299@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:18:57 +0200
Subject: [PATCH 011/136] (CI) Added a github action to trigger jenkins
 pipelines (#43)

---
 .github/workflows/trigger.jenkins.yaml | 40 ++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 .github/workflows/trigger.jenkins.yaml

diff --git a/.github/workflows/trigger.jenkins.yaml b/.github/workflows/trigger.jenkins.yaml
new file mode 100644
index 00000000..cc1baa2b
--- /dev/null
+++ b/.github/workflows/trigger.jenkins.yaml
@@ -0,0 +1,40 @@
+name: Trigger Jenkins Job
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+      - dev
+
+jobs:
+  trigger-jenkins:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Set Jenkins job name based on branch
+        id: jenkins_job_name
+        run: |
+          if [[ "${{ github.ref }}" == "refs/heads/main" ]]; then
+            echo "job_name=frontend" >> $GITHUB_ENV
+          elif [[ "${{ github.ref }}" == "refs/heads/dev" ]]; then
+            echo "job_name=frontend_dev" >> $GITHUB_ENV
+          else
+            echo "No Jenkins job to trigger for this branch."
+            exit 0
+          fi
+
+      - name: Trigger Jenkins job
+        if: env.job_name != ''
+        env:
+          JENKINS_URL: ${{vars.JENKINS_URL}}
+          JENKINS_TOKEN: ${{ secrets.JENKINS_TOKEN }}
+          JOB_NAME: ${{ env.job_name }}
+        run: |
+          echo "Triggering Jenkins job $JOB_NAME"
+          curl -X POST "$JENKINS_URL/buildByToken/build?job=$JOB_NAME&token=$JENKINS_TOKEN"
+          

From 19c97396c7033b215e8a4cacf12d8f7bc56db038 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 8 Nov 2024 16:26:45 +0200
Subject: [PATCH 012/136]  :sparkles: (block): view block list +  add/remove
 users from block list (#44)

* :sparkles: (privacy-settings): View block list finished

* :sparkles: (block): add/remove user from block list

* :lipstick: (block):  adding scrollbar styling

* :twisted_rightwards_arrows: Merging dev

* :bug: fixing merging bugs
---
 app/src/App.tsx                               |   3 +-
 .../components/side-bar/ContactsSideBar.tsx   |   2 +-
 app/src/components/side-bar/SideBar.tsx       |   8 +-
 .../settings/side-bar-row/SideBarRow.tsx      |  13 +-
 app/src/data/icons.tsx                        |  13 +-
 app/src/data/sideBar.ts                       |  15 ++-
 app/src/features/{Chats => chats}/Avatar.tsx  |   0
 app/src/features/{Chats => chats}/ChatBox.tsx |   4 +-
 .../features/{Chats => chats}/ChatInput.tsx   |   0
 .../features/{Chats => chats}/ChatItem.tsx    |   0
 .../features/{Chats => chats}/ChatsList.tsx   |   0
 app/src/features/{Chats => chats}/Topbar.tsx  |   4 +-
 .../{Chats => chats}/hooks/useChat.ts         |   0
 .../{Chats => chats}/hooks/useChats.ts        |   0
 .../{Chats => chats}/services/apiGetChats.ts  |   0
 .../privacy-settings/AddToBlockMenuList.tsx   |  96 +++++++++++++++
 .../features/privacy-settings/BlockItem.tsx   | 112 ++++++++++++++++++
 .../features/privacy-settings/BlockList.tsx   |  60 ++++++++++
 .../privacy-settings/hooks/useBlock.ts        |  30 +++++
 .../privacy-settings/service/blockUser.ts     |  21 ++++
 .../privacy-settings/service/getBlockList.ts  |  17 +++
 .../service/removeFromBlocks.ts               |  21 ++++
 app/src/mocks/chats/{chat.ts => chats.ts}     |   2 +-
 app/src/mocks/data/blocklist.ts               |  16 +++
 app/src/mocks/data/{Chats.ts => chats.ts}     |   2 -
 app/src/mocks/handlers.ts                     |   5 +-
 .../mocks/privacy-settings/privacySettings.ts |  56 +++++++++
 app/src/mocks/privacySettings.ts              |  18 ---
 app/src/state/side-bar/sideBar.ts             |   6 +
 app/src/styles/GlobalStyles.tsx               |  33 +++++-
 app/src/types/sideBar.ts                      |   1 +
 31 files changed, 512 insertions(+), 46 deletions(-)
 rename app/src/features/{Chats => chats}/Avatar.tsx (100%)
 rename app/src/features/{Chats => chats}/ChatBox.tsx (66%)
 rename app/src/features/{Chats => chats}/ChatInput.tsx (100%)
 rename app/src/features/{Chats => chats}/ChatItem.tsx (100%)
 rename app/src/features/{Chats => chats}/ChatsList.tsx (100%)
 rename app/src/features/{Chats => chats}/Topbar.tsx (93%)
 rename app/src/features/{Chats => chats}/hooks/useChat.ts (100%)
 rename app/src/features/{Chats => chats}/hooks/useChats.ts (100%)
 rename app/src/features/{Chats => chats}/services/apiGetChats.ts (100%)
 create mode 100644 app/src/features/privacy-settings/AddToBlockMenuList.tsx
 create mode 100644 app/src/features/privacy-settings/BlockItem.tsx
 create mode 100644 app/src/features/privacy-settings/BlockList.tsx
 create mode 100644 app/src/features/privacy-settings/hooks/useBlock.ts
 create mode 100644 app/src/features/privacy-settings/service/blockUser.ts
 create mode 100644 app/src/features/privacy-settings/service/getBlockList.ts
 create mode 100644 app/src/features/privacy-settings/service/removeFromBlocks.ts
 rename app/src/mocks/chats/{chat.ts => chats.ts} (91%)
 create mode 100644 app/src/mocks/data/blocklist.ts
 rename app/src/mocks/data/{Chats.ts => chats.ts} (96%)
 create mode 100644 app/src/mocks/privacy-settings/privacySettings.ts
 delete mode 100644 app/src/mocks/privacySettings.ts

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 88909013..40b606e1 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -14,12 +14,13 @@ import Signup from "./pages/Signup";
 import ResetPasswordModal from "@features/authentication/reset-password/ResetPasswordModal";
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
-import ChatBox from "@features/Chats/ChatBox";
+import ChatBox from "@features/chats/ChatBox";
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 0,
+      retry: 3,
     },
   },
 });
diff --git a/app/src/components/side-bar/ContactsSideBar.tsx b/app/src/components/side-bar/ContactsSideBar.tsx
index 9de69962..ee1661df 100644
--- a/app/src/components/side-bar/ContactsSideBar.tsx
+++ b/app/src/components/side-bar/ContactsSideBar.tsx
@@ -18,7 +18,7 @@ function ContactsSideBar({ children }: ContactsSideBarProps) {
       <ContactsSidebarHeader />
       {children}
       <CircleIcon
-        $icon="AddContacts"
+        $icon="Add"
         $right={1}
         $bottom={1}
         $size={3.3}
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 3b99cf8f..6c389717 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -12,9 +12,10 @@ import { RadioInputProps } from "@components/inputs/radio-input/RadioInput";
 import { SideBarRowProps } from "./settings/side-bar-row/SideBarRow";
 import ProfileSettings from "@features/profile-settings/ProfileSettings";
 import ProfileInfo from "@features/profile-info/ProfileInfo";
-import ChatList from "@features/Chats/ChatsList";
+import ChatList from "@features/chats/ChatsList";
 
 import { useAppSelector } from "@hooks/useGlobalState";
+import BlockList from "@features/privacy-settings/BlockList";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -81,6 +82,11 @@ const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
       </SettingsSideBar>
     ),
     ProfileUpdate: () => <ProfileSettings />,
+    blockList: () => (
+      <SettingsSideBar rows={[]}>
+        <BlockList />
+      </SettingsSideBar>
+    ),
   };
 
 function Sidebar() {
diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index 8dfd7f4d..0203f8e0 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -63,26 +63,16 @@ interface SideBarRowProps {
   title: string;
   type?: StatusType;
   status?: activitySettingsID | privacySettingsID | permissionSettingsID;
-  count?: number;
   redirect?: number;
   id: number;
 }
 
-function SideBarRow({
-  redirect,
-  icon,
-  title,
-  status,
-  count,
-  type,
-}: SideBarRowProps) {
+function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
   const userData = useAppSelector((state) => state.user);
   const dispatch = useAppDispatch();
   const renderedIcon = getIcon(icon);
 
-
   const [currStatus, setCurrStatus] = useState<string | undefined>(undefined);
-
   let key:
     | {
         id: keyof privacySettingsInterface;
@@ -145,7 +135,6 @@ function SideBarRow({
           <Heading as="h5">{title}</Heading>
         )}
       </RowInfo>
-      {count && <StyledP>{count}</StyledP>}
     </StyledSideBarRow>
   );
 }
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index c25b68ef..b357c422 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -17,6 +17,7 @@ import AddIcon from "@mui/icons-material/Add";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import NoEncryptionOutlinedIcon from "@mui/icons-material/NoEncryptionOutlined";
 import KeyboardVoiceIcon from "@mui/icons-material/KeyboardVoice";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
 import SentimentSatisfiedAltIcon from "@mui/icons-material/SentimentSatisfiedAlt";
@@ -36,7 +37,7 @@ enum icons {
   Contacts,
   Settings,
   NightMode,
-  AddContacts,
+  Add,
   Edit,
   AddStory,
   Logout,
@@ -47,6 +48,7 @@ enum icons {
   Close,
   Show,
   Hide,
+  Unlock,
   Record,
   Attatch,
   Emojie,
@@ -101,7 +103,7 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
-  AddContacts: (
+  Add: (
     <AddIcon fontSize="large" sx={{ color: `var(--color-search-border)` }} />
   ),
   Edit: (
@@ -161,6 +163,13 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       sx={{ color: `var(--color-icon-secondary)` }}
     />
   ),
+  Unlock: (
+    <NoEncryptionOutlinedIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+      }}
+    />
+  ),
 
   Record: <KeyboardVoiceIcon sx={{ fontSize: "1rem" }} />,
 
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 38a076f3..220e2157 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -75,6 +75,7 @@ const pagesMap: { [K in pagesStrings]: string } = {
   PRIVACY_SETTINGS: "Privacy",
   SETTINGS_UPDATE: "SettingsUpdate",
   PROFILE_UPDATE: "ProfileUpdate",
+  BLOCKED_USERS: "blockList",
 };
 
 const settingsRows = [
@@ -101,7 +102,7 @@ const privacySettingsRows = [
   {
     icon: "BlockIcon",
     title: "Blocked Users",
-    count: 2,
+    redirect: sideBarPages.BLOCKED_USERS,
   },
   {
     title: "Who can see my stories?",
@@ -173,6 +174,17 @@ const profileUpdate: SideBarView = {
   backView: sideBarPages.SETTINGS,
   page: "PROFILE_UPDATE",
 };
+
+const blockList: SideBarView = {
+  title: "Blocked Users",
+  backView: sideBarPages.PRIVACY_SETTINGS,
+  page: "BLOCKED_USERS",
+  props: {
+    subtitle:
+      "Blocked users can't send you messages or add you to groups. They will not see your profile photos, stories, online and last seen status.",
+  },
+};
+
 export {
   chats,
   contacts,
@@ -188,4 +200,5 @@ export {
   settingsUpdate,
   profileUpdate,
   pagesMap,
+  blockList,
 };
diff --git a/app/src/features/Chats/Avatar.tsx b/app/src/features/chats/Avatar.tsx
similarity index 100%
rename from app/src/features/Chats/Avatar.tsx
rename to app/src/features/chats/Avatar.tsx
diff --git a/app/src/features/Chats/ChatBox.tsx b/app/src/features/chats/ChatBox.tsx
similarity index 66%
rename from app/src/features/Chats/ChatBox.tsx
rename to app/src/features/chats/ChatBox.tsx
index 9fb0130b..5b6d498f 100644
--- a/app/src/features/Chats/ChatBox.tsx
+++ b/app/src/features/chats/ChatBox.tsx
@@ -1,5 +1,5 @@
-import ChatInput from "@features/Chats/ChatInput";
-import Topbar from "@features/Chats/Topbar";
+import ChatInput from "@features/chats/ChatInput";
+import Topbar from "@features/chats/Topbar";
 
 import { useCloseChat } from "@hooks/useCloseChat";
 
diff --git a/app/src/features/Chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
similarity index 100%
rename from app/src/features/Chats/ChatInput.tsx
rename to app/src/features/chats/ChatInput.tsx
diff --git a/app/src/features/Chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
similarity index 100%
rename from app/src/features/Chats/ChatItem.tsx
rename to app/src/features/chats/ChatItem.tsx
diff --git a/app/src/features/Chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
similarity index 100%
rename from app/src/features/Chats/ChatsList.tsx
rename to app/src/features/chats/ChatsList.tsx
diff --git a/app/src/features/Chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
similarity index 93%
rename from app/src/features/Chats/Topbar.tsx
rename to app/src/features/chats/Topbar.tsx
index 16b9ac76..79b772b1 100644
--- a/app/src/features/Chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -2,10 +2,10 @@ import styled from "styled-components";
 
 import { getIcon } from "@data/icons";
 
-import Avatar from "@features/Chats/Avatar";
+import Avatar from "@features/chats/Avatar";
 import Icon from "@components/Icon";
 
-import { useChat } from "@features/Chats/hooks/useChat";
+import { useChat } from "@features/chats/hooks/useChat";
 
 const Container = styled.div`
   position: absolute;
diff --git a/app/src/features/Chats/hooks/useChat.ts b/app/src/features/chats/hooks/useChat.ts
similarity index 100%
rename from app/src/features/Chats/hooks/useChat.ts
rename to app/src/features/chats/hooks/useChat.ts
diff --git a/app/src/features/Chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
similarity index 100%
rename from app/src/features/Chats/hooks/useChats.ts
rename to app/src/features/chats/hooks/useChats.ts
diff --git a/app/src/features/Chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
similarity index 100%
rename from app/src/features/Chats/services/apiGetChats.ts
rename to app/src/features/chats/services/apiGetChats.ts
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
new file mode 100644
index 00000000..1bb03694
--- /dev/null
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -0,0 +1,96 @@
+import styled from "styled-components";
+import BlockItem, { BlockedUserProps } from "./BlockItem";
+import { useBlock } from "./hooks/useBlock";
+import { ScrollContainer } from "styles/GlobalStyles";
+import { useChats } from "@features/chats/hooks/useChats";
+import { Chat } from "@mocks/data/chats";
+
+const StyledList = styled.ul<StyledListProps>`
+  position: absolute;
+  width: ${(props) => props.$size}%;
+  right: ${(props) => (props.$right ?? 3) + 2}rem;
+  bottom: ${(props) => (props.$bottom ?? 3) + 3}rem;
+  height: ${(props) => (props.$height ?? 3) + 3}rem;
+  z-index: 1;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  align-items: start;
+  list-style: none;
+  padding: 0.2rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius-default);
+`;
+
+
+interface StyledListProps {
+  $bottom?: number;
+  $right?: number;
+  $size?: number;
+  $height?: number;
+}
+
+const menuStyles: StyledListProps = {
+  $bottom: 5,
+  $right: 4,
+  $size: 70,
+  $height: 30,
+};
+
+const StylingWrapper = styled.div`
+  width: 100%;
+`;
+
+function filterChats(blockList: BlockedUserProps[], chats: Chat[]) {
+  const blockIds = blockList
+    ? new Set(blockList.map((val) => val.id))
+    : new Set();
+  const filteredChats = chats?.filter((item) => !blockIds.has(item.id));
+
+  return filteredChats;
+}
+
+function AddToBlockMenuList({ setIsMenuOpened }: any) {
+  const { addToBlockList } = useBlock();
+
+  const { blockList } = useBlock();
+  const { chats } = useChats();
+
+  const filteredChats = filterChats(
+    blockList as BlockedUserProps[],
+    chats as Chat[]
+  );
+
+  function handleClick(item: Chat) {
+    setIsMenuOpened(false);
+    addToBlockList({ id: item.id.toString() });
+  }
+
+  return (
+    <StyledList {...menuStyles}>
+      <ScrollContainer>
+        {filteredChats?.map((item) => {
+          const data: BlockedUserProps = {
+            name: item.name,
+            id: item.id,
+            username: item.name.toLowerCase() + 123,
+          };
+          return (
+            <StylingWrapper onClick={() => handleClick(item)} key={data.id}>
+              <BlockItem {...data} />
+            </StylingWrapper>
+          );
+        })}
+      </ScrollContainer>
+    </StyledList>
+  );
+}
+
+export default AddToBlockMenuList;
+export { StyledList };
+export type { StyledListProps };
diff --git a/app/src/features/privacy-settings/BlockItem.tsx b/app/src/features/privacy-settings/BlockItem.tsx
new file mode 100644
index 00000000..2dc292d2
--- /dev/null
+++ b/app/src/features/privacy-settings/BlockItem.tsx
@@ -0,0 +1,112 @@
+import Heading from "@components/Heading";
+import Avatar from "@features/chats/Avatar";
+import styled from "styled-components";
+import { StyledList, StyledListProps } from "./AddToBlockMenuList";
+import { getIcon } from "@data/icons";
+import { useState } from "react";
+import { useBlock } from "./hooks/useBlock";
+
+const StyledSideBarRow = styled.div`
+  width: 100%;
+  height: 4rem;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  padding-left: 5%;
+  padding-right: 5%;
+
+  &:hover {
+    background: var(--color-background-compact-menu-hover);
+    cursor: pointer;
+  }
+
+  border-radius: var(--border-radius-modal);
+`;
+
+const RowInfo = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+
+  gap: 0.5rem;
+`;
+
+const InnerDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+`;
+
+const StyledP = styled.p`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+`;
+
+const menuStyles: StyledListProps = {
+  $bottom: -6,
+  $right: 0,
+  $size: 40,
+  $height: 0,
+};
+
+const HoverMask = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-default);
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  &:hover {
+    background: var(--color-background-compact-menu-hover);
+    cursor: pointer;
+  }
+`;
+
+interface BlockedUserInterface {
+  id: number;
+  name: string;
+  username: string;
+}
+
+function BlockItem({ id, name, username }: BlockedUserInterface) {
+  const [isBlockButtonEnabled, setIsBlockButtonEnabled] = useState(false);
+
+  const { removeFromBlockList } = useBlock();
+
+  function handleRemove(id: number) {
+    removeFromBlockList({ id: id.toString() });
+    setIsBlockButtonEnabled(false);
+  }
+
+  return (
+    <StyledSideBarRow
+      onClick={() => setIsBlockButtonEnabled(!isBlockButtonEnabled)}
+    >
+      <RowInfo>
+        <Avatar name={name[0]} />
+        <InnerDiv>
+          <Heading as="h5">{name}</Heading>
+          <StyledP>{`@${username}`}</StyledP>
+        </InnerDiv>
+      </RowInfo>
+
+      {isBlockButtonEnabled && (
+        <StyledList {...menuStyles} onClick={() => handleRemove(id)}>
+          <HoverMask>
+            <RowInfo>
+              {getIcon("Unlock")}
+              <Heading as="h5">Unblock</Heading>
+            </RowInfo>
+          </HoverMask>
+        </StyledList>
+      )}
+    </StyledSideBarRow>
+  );
+}
+
+export default BlockItem;
+export type { BlockedUserInterface as BlockedUserProps };
diff --git a/app/src/features/privacy-settings/BlockList.tsx b/app/src/features/privacy-settings/BlockList.tsx
new file mode 100644
index 00000000..c4321624
--- /dev/null
+++ b/app/src/features/privacy-settings/BlockList.tsx
@@ -0,0 +1,60 @@
+import Heading from "@components/Heading";
+import styled from "styled-components";
+import BlockItem from "./BlockItem";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useBlock } from "./hooks/useBlock";
+import CircleIcon from "@components/CircleIcon";
+import { useState } from "react";
+import AddToBlockMenuList from "./AddToBlockMenuList";
+
+const StyledOptionsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  border-bottom: 1px solid var(--color-item-hover);
+  padding: 1rem 0;
+`;
+
+const PlaceHeader = styled.div`
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-bottom: 0.5rem;
+`;
+
+function BlockList() {
+  const { props } = useAppSelector((state) => state.sideBarData);
+
+  const { blockList } = useBlock();
+
+  const [isMenuOpened, setIsMenuOpened] = useState(false);
+
+  return (
+    <StyledOptionsList>
+      <CircleIcon
+        $icon="Add"
+        $right={1}
+        $bottom={1}
+        $size={3.3}
+        $color="white"
+        $bgColor="var(--accent-color)"
+        data-testid="add-contacts-icon"
+        onClick={() => setIsMenuOpened(!isMenuOpened)}
+      />
+
+      {isMenuOpened && <AddToBlockMenuList setIsMenuOpened={setIsMenuOpened} />}
+
+      <PlaceHeader>
+        {props && "subtitle" in props && typeof props.subtitle === "string" && (
+          <Heading as="h6">{props?.subtitle}</Heading>
+        )}
+      </PlaceHeader>
+
+      {blockList?.map((item) => {
+        return <BlockItem {...item} key={item.id} />;
+      })}
+    </StyledOptionsList>
+  );
+}
+
+export default BlockList;
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
new file mode 100644
index 00000000..a7aef209
--- /dev/null
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -0,0 +1,30 @@
+import {
+  QueryClient,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import getBlockList from "@features/privacy-settings/service/getBlockList";
+import { blockUser } from "../service/blockUser";
+import { BlockedUserProps } from "../BlockItem";
+import { removeFromBlock } from "../service/removeFromBlocks";
+
+export function useBlock() {
+  const { data: blockList } = useQuery<BlockedUserProps[]>({
+    queryKey: ["block"],
+    queryFn: () => getBlockList(),
+  });
+
+  const queryClient = useQueryClient();
+  const { mutateAsync: addToBlockList } = useMutation({
+    mutationFn: blockUser,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["block"] }),
+  });
+
+  const { mutateAsync: removeFromBlockList } = useMutation({
+    mutationFn: removeFromBlock,
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["block"] }),
+  });
+
+  return { blockList, addToBlockList, removeFromBlockList };
+}
diff --git a/app/src/features/privacy-settings/service/blockUser.ts b/app/src/features/privacy-settings/service/blockUser.ts
new file mode 100644
index 00000000..cc4adbf2
--- /dev/null
+++ b/app/src/features/privacy-settings/service/blockUser.ts
@@ -0,0 +1,21 @@
+import { API_URL } from "@constants";
+
+interface requestType {
+  id: string;
+}
+
+async function blockUser(data: requestType) {
+  const res = await fetch(`${API_URL}/users/block/${data.id}`, {
+    method: "PATCH",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error(res.statusText);
+  }
+}
+
+export { blockUser };
diff --git a/app/src/features/privacy-settings/service/getBlockList.ts b/app/src/features/privacy-settings/service/getBlockList.ts
new file mode 100644
index 00000000..6766e2c8
--- /dev/null
+++ b/app/src/features/privacy-settings/service/getBlockList.ts
@@ -0,0 +1,17 @@
+import { API_URL } from "@constants";
+
+import { BlockedUserProps } from "../BlockItem";
+
+async function getBlockList() {
+  const response = await fetch(`${API_URL}/users/block`, {
+    method: "GET",
+    credentials: "include",
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) throw new Error(data.message);
+  return data.users as BlockedUserProps[];
+}
+
+export default getBlockList;
diff --git a/app/src/features/privacy-settings/service/removeFromBlocks.ts b/app/src/features/privacy-settings/service/removeFromBlocks.ts
new file mode 100644
index 00000000..b051b964
--- /dev/null
+++ b/app/src/features/privacy-settings/service/removeFromBlocks.ts
@@ -0,0 +1,21 @@
+import { API_URL } from "@constants";
+
+interface requestType {
+  id: string;
+}
+
+async function removeFromBlock(data: requestType) {
+  const res = await fetch(`${API_URL}/users/block/${data.id}`, {
+    method: "DELETE",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error(res.statusText);
+  }
+}
+
+export { removeFromBlock };
diff --git a/app/src/mocks/chats/chat.ts b/app/src/mocks/chats/chats.ts
similarity index 91%
rename from app/src/mocks/chats/chat.ts
rename to app/src/mocks/chats/chats.ts
index 0c142ab0..81b8851e 100644
--- a/app/src/mocks/chats/chat.ts
+++ b/app/src/mocks/chats/chats.ts
@@ -1,4 +1,4 @@
-import { allChats } from "@mocks/data/Chats";
+import { allChats } from "@mocks/data/chats";
 import { http, HttpResponse } from "msw";
 
 export const chats = [
diff --git a/app/src/mocks/data/blocklist.ts b/app/src/mocks/data/blocklist.ts
new file mode 100644
index 00000000..7d097005
--- /dev/null
+++ b/app/src/mocks/data/blocklist.ts
@@ -0,0 +1,16 @@
+import { BlockedUserProps } from "@features/privacy-settings/BlockItem";
+
+let blockList: BlockedUserProps[] = [
+  {
+    id: 1,
+    name: "Alice",
+    username: "alice123",
+  },
+  {
+    id: 2,
+    name: "Bob",
+    username: "bob123",
+  },
+];
+
+export default blockList;
diff --git a/app/src/mocks/data/Chats.ts b/app/src/mocks/data/chats.ts
similarity index 96%
rename from app/src/mocks/data/Chats.ts
rename to app/src/mocks/data/chats.ts
index 4d17dce3..cc0989f1 100644
--- a/app/src/mocks/data/Chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -14,8 +14,6 @@ export const allChats: Chat[] = [
     lastMessage: "See you soon!",
     timestamp: "1h ago",
     lastSeen: "10 minutes ago",
-    image:
-      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
   },
   {
     id: 2,
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index df2d792c..e8949fe1 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -4,12 +4,12 @@ import { forgetPassword, resetPassword } from "./userauth/resetpassword";
 import { verifyEmailMock } from "./userauth/verfiyEmail";
 import { loginMock } from "./userauth/login";
 import { logoutMock } from "./userauth/logout";
-import { privacySettingsMock } from "./privacySettings";
+import { privacySettingsMock } from "./privacy-settings/privacySettings";
 import { OauthMock } from "./oauth/oauth";
 import { profileSettingsMock } from "./profile-settings/profile-settings";
-import { chats } from "./chats/chat";
 import { profilePictureMock } from "./profile-settings/profile-picture";
 import { storiesMock } from "./stories/stories";
+import { chats } from "./chats/chats";
 
 export default [
   ...loginMock,
@@ -23,6 +23,7 @@ export default [
   ...logoutMock,
   ...profileSettingsMock,
   ...chats,
+  
   ...profilePictureMock,
   ...storiesMock,
 ];
diff --git a/app/src/mocks/privacy-settings/privacySettings.ts b/app/src/mocks/privacy-settings/privacySettings.ts
new file mode 100644
index 00000000..5eff4584
--- /dev/null
+++ b/app/src/mocks/privacy-settings/privacySettings.ts
@@ -0,0 +1,56 @@
+import blockList from "@mocks/data/blocklist";
+import { allChats } from "@mocks/data/chats";
+import { endPts } from "features/privacy-settings/service/changeSettings";
+import { http, HttpResponse } from "msw";
+import { activeStatesStrings, privacyStatesStrings } from "types/sideBar";
+
+type requestType = {
+  privacy: activeStatesStrings | privacyStatesStrings;
+};
+
+
+export const privacySettingsMock = [
+  http.patch<{ path: endPts }, requestType>(
+    "/users/privacy/:path",
+    async ({ request }) => {
+      const body = await request.json();
+      if (!body.privacy) return HttpResponse.json({}, { status: 401 });
+      return HttpResponse.json({}, { status: 200 });
+    }
+  ),
+
+  http.get("/users/block", async () => {
+    return HttpResponse.json({
+      users: blockList,
+    });
+  }),
+
+  http.patch("/users/block/:id", async (req) => {
+    const id = req.params.id;
+    let user = allChats.find((item) => item.id.toString() === id);
+    if (user) {
+      blockList.push({
+        id: user.id,
+        name: user.name,
+        username: user.name.toLowerCase() + "123",
+      });
+
+      return HttpResponse.json({}, { status: 200 });
+    }
+    return HttpResponse.json({ message: "user not found" }, { status: 404 });
+  }),
+
+  http.delete("/users/block/:id", async (req) => {
+    const id = req.params.id;
+
+    const index = blockList.findIndex((item) => item.id.toString() === id);
+    if (index === -1)
+      return HttpResponse.json(
+        { status: "user not in block list" },
+        { status: 404 }
+      );
+
+    blockList.splice(index, 1);
+    return HttpResponse.json({}, { status: 200 });
+  }),
+];
diff --git a/app/src/mocks/privacySettings.ts b/app/src/mocks/privacySettings.ts
deleted file mode 100644
index 1ce5c1cd..00000000
--- a/app/src/mocks/privacySettings.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { endPts } from "features/privacy-settings/service/changeSettings";
-import { http, HttpResponse } from "msw";
-import { activeStatesStrings, privacyStatesStrings } from "types/user";
-
-type requestType = {
-  privacy: activeStatesStrings | privacyStatesStrings;
-};
-
-export const privacySettingsMock = [
-  http.patch<{ path: endPts }, requestType>(
-    "/users/privacy/:path",
-    async ({ request }) => {
-      const body = await request.json();
-      if (!body.privacy) return HttpResponse.json({}, { status: 401 });
-      return HttpResponse.json({}, { status: 200 });
-    }
-  ),
-];
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 60198fdd..2cb78f7a 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -7,6 +7,7 @@ import {
   settingsUpdate,
   profileUpdate,
   sideBarPages,
+  blockList,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -32,6 +33,8 @@ function getSideBarPage(type: number): SideBarView {
       return settingsUpdate;
     case sideBarPages.PROFILE_UPDATE:
       return profileUpdate;
+    case sideBarPages.BLOCKED_USERS:
+      return blockList;
     default:
       throw new Error("Unknown Type");
   }
@@ -60,6 +63,9 @@ const sideBarSlice = createSlice({
       if (redirect === sideBarPages.SETTINGS_UPDATE) {
         state.props = { data: data };
         state.title = data.header;
+      } else if (redirect === sideBarPages.BLOCKED_USERS) {
+        state.props = { ...newData.props, data: data };
+        state.title = newData.title;
       } else {
         state.title = newData.title;
         state.props = { ...newData.props };
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 017452b3..89ab2f97 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -1,4 +1,4 @@
-import { createGlobalStyle } from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 
 const GlobalStyles = createGlobalStyle`
 :root {
@@ -241,4 +241,35 @@ button {
 }
 `;
 
+const ScrollContainer = styled.div`
+  width: 100%;
+  height: 500px;
+  overflow-y: auto;
+  position: relative;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    border: 1px solid black;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(220, 220, 220, 0.6);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #4c8bf5, #8ccef2); /* gradient effect */
+    border-radius: 10px;
+    border: 2px solid rgba(220, 220, 220, 0.6);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #4c8bf5, #66b5ff);
+  }
+
+  scroll-behavior: smooth;
+`;
+
 export default GlobalStyles;
+
+export { ScrollContainer };
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 0f4dc54a..f6143777 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -5,6 +5,7 @@ enum sideBarPages {
   CONTACTS,
   SETTINGS_UPDATE,
   PROFILE_UPDATE,
+  BLOCKED_USERS,
 }
 
 type pagesStrings = keyof typeof sideBarPages;

From a53d4645d82eb2ca5b1b73d40111f9dd7e0eefc5 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 8 Nov 2024 19:00:23 +0200
Subject: [PATCH 013/136] feat(devices): devices and session management + add
 animations (#46)

* chore: resolve dev conflicts

* feat(devices): logout other sessions
---
 app/package-lock.json                         |  20 ++++
 app/package.json                              |   1 +
 app/src/components/side-bar/SideBar.tsx       |   2 +
 app/src/data/animations/android_30.json       |   1 +
 app/src/data/animations/chrome_30.json        |   1 +
 app/src/data/animations/devices.json          |   1 +
 app/src/data/animations/linux_30.json         |   1 +
 app/src/data/animations/windows_30.json       |   1 +
 app/src/data/sideBar.ts                       |   9 ++
 app/src/features/devices/Devices.tsx          |  99 +++++++++++++++++
 .../devices/components/SessionItem.tsx        | 103 ++++++++++++++++++
 .../devices/hooks/useGetAllSessions.ts        |  19 ++++
 .../devices/hooks/useGetCurrentSessions.ts    |  20 ++++
 .../devices/hooks/useLogoutOtherSessions.ts   |  27 +++++
 .../devices/services/GetAllSessions.ts        |  24 ++++
 .../devices/services/GetCurrentSession.ts     |  24 ++++
 .../devices/services/LogoutOtherSessions.ts   |  17 +++
 app/src/features/devices/types/sessions.ts    |  10 ++
 app/src/mocks/data/Sessions.ts                |  68 ++++++++++++
 app/src/mocks/devices/devices.ts              |  15 +++
 app/src/mocks/handlers.ts                     |   3 +-
 app/src/state/side-bar/sideBar.ts             |   3 +
 app/src/types/sideBar.ts                      |   1 +
 app/tsconfig.app.json                         |  50 +++++++--
 24 files changed, 507 insertions(+), 13 deletions(-)
 create mode 100644 app/src/data/animations/android_30.json
 create mode 100644 app/src/data/animations/chrome_30.json
 create mode 100644 app/src/data/animations/devices.json
 create mode 100644 app/src/data/animations/linux_30.json
 create mode 100644 app/src/data/animations/windows_30.json
 create mode 100644 app/src/features/devices/Devices.tsx
 create mode 100644 app/src/features/devices/components/SessionItem.tsx
 create mode 100644 app/src/features/devices/hooks/useGetAllSessions.ts
 create mode 100644 app/src/features/devices/hooks/useGetCurrentSessions.ts
 create mode 100644 app/src/features/devices/hooks/useLogoutOtherSessions.ts
 create mode 100644 app/src/features/devices/services/GetAllSessions.ts
 create mode 100644 app/src/features/devices/services/GetCurrentSession.ts
 create mode 100644 app/src/features/devices/services/LogoutOtherSessions.ts
 create mode 100644 app/src/features/devices/types/sessions.ts
 create mode 100644 app/src/mocks/data/Sessions.ts
 create mode 100644 app/src/mocks/devices/devices.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index 635bf47e..30eabe16 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -17,6 +17,7 @@
         "@tanstack/react-query": "^5.59.13",
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
+        "lottie-react": "^2.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-filerobot-image-editor": "^4.9.0",
@@ -8383,6 +8384,25 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz",
+      "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==",
+      "license": "MIT",
+      "dependencies": {
+        "lottie-web": "^5.10.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
diff --git a/app/package.json b/app/package.json
index 34a85c76..b20636a9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
+    "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-filerobot-image-editor": "^4.9.0",
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 6c389717..55ba6f4b 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -16,6 +16,7 @@ import ChatList from "@features/chats/ChatsList";
 
 import { useAppSelector } from "@hooks/useGlobalState";
 import BlockList from "@features/privacy-settings/BlockList";
+import Devices from "@features/devices/Devices";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -87,6 +88,7 @@ const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
         <BlockList />
       </SettingsSideBar>
     ),
+    Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
   };
 
 function Sidebar() {
diff --git a/app/src/data/animations/android_30.json b/app/src/data/animations/android_30.json
new file mode 100644
index 00000000..8c521446
--- /dev/null
+++ b/app/src/data/animations/android_30.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":60,"ip":0,"op":180,"w":30,"h":30,"nm":"android_30","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Eye L","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[10.5,16,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":60,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[20,5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":90,"s":[20,5,100]},{"t":100,"s":[16.667,16.667,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3,3],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Eye L","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":238,"st":50,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Eye R","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[19.5,16,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":60,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[20,5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":90,"s":[20,5,100]},{"t":100,"s":[16.667,16.667,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[3,3],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Eye R","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":238,"st":50,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Face","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[15,15.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.335,1.25],[-4.973,0],[-1.361,-5.079],[0.382,-0.702],[0.129,-0.123],[1.573,0],[0,0],[0.579,0.551],[0.085,0.157]],"o":[[1.361,-5.079],[4.973,0],[0.335,1.25],[-0.085,0.157],[-0.579,0.551],[0,0],[-1.573,0],[-0.129,-0.123],[-0.382,-0.702]],"v":[[-10.536,2.379],[0,-6],[10.536,2.379],[10.657,4.957],[10.279,5.449],[7.34,6],[-7.34,6],[-10.279,5.449],[-10.657,4.957]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Face","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":234,"st":50,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Ri","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[20.75,9.75,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":1,"y":0},"t":60,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.25,-2.25],[-1.25,2.25]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[2.5,-1],[-1.25,2.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":1,"y":0},"t":80,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.25,-2.25],[-1.25,2.25]],"c":false}]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[2.5,-1],[-1.25,2.25]],"c":false}]},{"t":100,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.25,-2.25],[-1.25,2.25]],"c":false}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.66,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Ri","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":234,"st":50,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Le","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[9.25,9.75,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":1,"y":0},"t":60,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.25,-2.25],[1.25,2.25]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2.5,-1],[1.25,2.25]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":1,"y":0},"t":80,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.25,-2.25],[1.25,2.25]],"c":false}]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":90,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2.5,-1],[1.25,2.25]],"c":false}]},{"t":100,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.25,-2.25],[1.25,2.25]],"c":false}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.66,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Le","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":234,"st":50,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/app/src/data/animations/chrome_30.json b/app/src/data/animations/chrome_30.json
new file mode 100644
index 00000000..ff936eb6
--- /dev/null
+++ b/app/src/data/animations/chrome_30.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":60,"ip":0,"op":180,"w":30,"h":30,"nm":"chrome_30","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Vector 20","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-38.383,-12.48,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[-100,-100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":60,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":70,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5.252,2.02]],"c":false}]},{"t":80,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5,0]],"c":false}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.66,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":60,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Vector 20","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":230,"st":50,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Vector 20","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[8.383,39.481,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[-100,-100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":60,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":70,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5.879,2.144]],"c":false}]},{"t":80,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5,0]],"c":false}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.66,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":-60,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Vector 20","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":230,"st":50,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Vector 20","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[30,-27,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":60,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5,0]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":70,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5.333,2]],"c":false}]},{"t":80,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[5,0],[-5,0]],"c":false}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.66,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Vector 20","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":230,"st":50,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Ellipse 18","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":60,"s":[9,9]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":70,"s":[5,5]},{"t":80,"s":[9,9]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.66,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Обводка 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Ellipse 18","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":230,"st":50,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Ellipse 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[-245]},{"t":90,"s":[-240]}],"ix":10},"p":{"a":0,"k":[15,15,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[20,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Ellipse 3","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-60,"op":230,"st":50,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/app/src/data/animations/devices.json b/app/src/data/animations/devices.json
new file mode 100644
index 00000000..3b105d10
--- /dev/null
+++ b/app/src/data/animations/devices.json
@@ -0,0 +1 @@
+{"nm":"Main","ddd":0,"h":512,"w":512,"meta":{"g":"@lottiefiles/toolkit-js 0.33.2"},"layers":[{"ty":3,"nm":"NULL SCALE ALL","sr":1,"st":0,"op":180,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[103,103,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256,251,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":0}},"ef":[],"ind":1},{"ty":4,"nm":"Light Screen","sr":1,"st":32,"op":190,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[1.158,10.618,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[1.158,10.618,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":0},{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":11},{"s":[100],"t":41}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[45.332,-190.18],[177.1,-189.59]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.85,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[169.532,10.623],[44.566,10.979],[-56.601,10.706],[201.095,10.976]]}],"t":11},{"o":{"x":0.15,"y":0},"i":{"x":0.249,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[169.532,10.623],[44.566,10.979],[-56.601,10.706],[201.095,10.976]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[162.243,-1.19],[137.886,-1.312],[55.396,-201.34],[173.35,-201.34]]}],"t":51},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[164.644,-1.142],[137.886,-1.312],[47.342,-192.408],[176.351,-191.936]]}],"t":64},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.068,-1.134],[137.886,-1.312],[43.67,-190.731],[177.127,-191.552]]}],"t":70},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.211,-1.131],[137.886,-1.312],[49.44,-190.193],[177.06,-189.716]]}],"t":76},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.241,-1.13],[137.886,-1.312],[44.339,-190.268],[177.098,-189.597]]}],"t":82},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[50.832,-189.98],[177.1,-189.59]]}],"t":87},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[45.332,-190.18],[177.1,-189.59]]}],"t":93},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[50.832,-189.98],[177.1,-189.59]]}],"t":99},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[45.332,-190.18],[177.1,-189.59]]}],"t":105},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[50.832,-189.98],[177.1,-189.59]]}],"t":110},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[45.332,-190.18],[177.1,-189.59]]}],"t":116},{"o":{"x":0.167,"y":0.167},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[50.832,-189.98],[177.1,-189.59]]}],"t":122},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[45.332,-190.18],[177.1,-189.59]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[55.082,-199.359],[174.85,-198.84]]}],"t":142},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.243,-1.13],[137.886,-1.312],[45.332,-190.18],[177.1,-189.59]]}],"t":179}]}},{"ty":"gf","bm":0,"hd":false,"nm":"Gradient Fill 5","e":{"a":0,"k":[112.402,0.716]},"g":{"p":3,"k":{"a":0,"k":[0.001,1,1,1,0.351,1,1,1,0.902,1,1,1,0.001,1,0.351,0.5,0.902,0]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[112.402,-186.815]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":60}}]}],"ind":2,"parent":4},{"ty":0,"nm":"Screen On","sr":1,"st":32,"op":192,"ip":40,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256,190,0]},"s":{"a":1,"k":[{"o":{"x":0.15,"y":0},"i":{"x":0.3,"y":1},"s":[100,-1,100],"t":42},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[98,105,100],"t":53},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[100,100,100],"t":88},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[100,100,100],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[99,105,100],"t":142},{"s":[100,100,100],"t":179}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":52},{"o":{"x":0.167,"y":0},"i":{"x":0.4,"y":1},"s":[100],"t":59},{"o":{"x":0.3,"y":0},"i":{"x":0.4,"y":1},"s":[100],"t":153},{"s":[0],"t":167}]}},"ef":[],"w":512,"h":512,"refId":"comp_0","ind":3,"parent":4},{"ty":4,"nm":"Screen Off","sr":1,"st":32,"op":190,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[1.158,10.618,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":64},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,98,100],"t":70},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":76},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,98,100],"t":82},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":87},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,98,100],"t":93},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":99},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,98,100],"t":105},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":110},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,98,100],"t":116},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100,100],"t":122},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":1},"s":[100,97,100],"t":129},{"s":[100,100,100],"t":142}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[1.158,10.618,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":0},{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":11},{"s":[100],"t":41}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":false,"i":[[0,0],[6.499,0]],"o":[[0.455,-6.483],[0,0]],"v":[[188.616,-189.416],[177.436,-201.408]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[{"c":false,"i":[[0,0],[6.529,0.01]],"o":[[0.368,0.012],[0,0]],"v":[[210.007,10.986],[198.609,10.99]]}],"t":11},{"o":{"x":0.3,"y":0.48},"i":{"x":0.387,"y":1},"s":[{"c":false,"i":[[0,0],[6.529,0.01]],"o":[[0.368,0.012],[0,0]],"v":[[210.007,10.986],[198.609,10.99]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[{"c":false,"i":[[0,0],[6.499,0]],"o":[[0.455,-6.807],[0,0]],"v":[[183.616,-199.408],[172.436,-212]]}],"t":51},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":false,"i":[[0,0],[6.499,0]],"o":[[0.455,-6.483],[0,0]],"v":[[188.616,-189.416],[177.436,-201.408]]}],"t":86},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":false,"i":[[0,0],[6.499,0]],"o":[[0.455,-6.483],[0,0]],"v":[[188.616,-189.416],[177.436,-201.408]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":false,"i":[[0,0],[6.499,0]],"o":[[0.455,-6.761],[0,0]],"v":[[188.616,-197.993],[177.436,-210.5]]}],"t":142},{"s":[{"c":false,"i":[[0,0],[6.499,0]],"o":[[0.455,-6.483],[0,0]],"v":[[188.616,-189.416],[177.436,-201.408]]}],"t":179}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.502,0.4745,0.5176]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":80}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":false,"i":[[0,0],[-0.455,-6.483]],"o":[[-6.499,0],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[{"c":false,"i":[[0,0],[-0.46,0.012]],"o":[[-6.568,0],[0,0]],"v":[[-200.616,10.999],[-211.915,10.977]]}],"t":11},{"o":{"x":0.3,"y":0.48},"i":{"x":0.387,"y":1},"s":[{"c":false,"i":[[0,0],[-0.46,0.012]],"o":[[-6.568,0],[0,0]],"v":[[-200.616,10.999],[-211.915,10.977]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[{"c":false,"i":[[0,0],[-0.455,-6.807]],"o":[[-6.499,0],[0,0]],"v":[[-170.12,-212],[-181.3,-199.408]]}],"t":51},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":false,"i":[[0,0],[-0.455,-6.483]],"o":[[-6.499,0],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416]]}],"t":86},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":false,"i":[[0,0],[-0.455,-6.483]],"o":[[-6.499,0],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":false,"i":[[0,0],[-0.455,-6.761]],"o":[[-6.499,0],[0,0]],"v":[[-175.12,-210.5],[-186.3,-197.993]]}],"t":142},{"s":[{"c":false,"i":[[0,0],[-0.455,-6.483]],"o":[[-6.499,0],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416]]}],"t":179}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.502,0.4745,0.5176]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":80}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[{"c":true,"i":[[0,0],[-0.46,0.012],[0,0],[0,0],[0,0],[6.529,0.01]],"o":[[-6.568,0],[0,0],[0,0],[0,0],[0.368,0.012],[0,0]],"v":[[-200.616,10.999],[-211.915,10.977],[-174.983,10.618],[175.551,10.618],[210.007,10.986],[198.609,10.99]]}],"t":11},{"o":{"x":0.3,"y":0.48},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[0,0],[-0.46,0.012],[0,0],[0,0],[0,0],[6.529,0.01]],"o":[[-6.568,0],[0,0],[0,0],[0,0],[0.368,0.012],[0,0]],"v":[[-200.616,10.999],[-211.915,10.977],[-174.983,10.618],[175.551,10.618],[210.007,10.986],[198.609,10.99]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.807],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.807],[0,0]],"v":[[-170.12,-212],[-181.3,-199.408],[-172.258,10.618],[174.574,10.618],[183.616,-199.408],[172.436,-212]]}],"t":51},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":86},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.761],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.761],[0,0]],"v":[[-175.12,-210.5],[-186.3,-197.993],[-172.258,10.618],[174.574,10.618],[188.616,-197.993],[177.436,-210.5]]}],"t":142},{"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":179}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.5961,0.5686,0.6118]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[171.574,10.618],[1.158,10.618],[-169.258,10.618]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.502,0.4745,0.5176]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8471,0.8392,0.8431]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[-0.118,-1.605],[0,0],[0,0],[0,0],[1.684,0]],"o":[[-1.684,0],[0,0],[0,0],[0,0],[0.118,-1.605],[0,0]],"v":[[-175.833,-193.879],[-178.731,-190.911],[-165.472,3.103],[168.788,3.103],[181.047,-190.911],[178.149,-193.879]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[{"c":true,"i":[[0,0],[-0.119,0.003],[0,0],[0,0],[0,0],[1.692,0.003]],"o":[[-1.702,0],[0,0],[0,0],[0,0],[0.096,0.003],[0,0]],"v":[[-201.336,10.985],[-204.265,10.98],[-168.125,10.631],[169.704,10.631],[202.382,10.977],[199.43,10.978]]}],"t":11},{"o":{"x":0.3,"y":0.48},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[0,0],[-0.119,0.003],[0,0],[0,0],[0,0],[1.692,0.003]],"o":[[-1.702,0],[0,0],[0,0],[0,0],[0.096,0.003],[0,0]],"v":[[-201.336,10.985],[-204.265,10.98],[-168.125,10.631],[169.704,10.631],[202.382,10.977],[199.43,10.978]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[{"c":true,"i":[[0,0],[-0.118,-1.685],[0,0],[0,0],[0,0],[1.684,0]],"o":[[-1.684,0],[0,0],[0,0],[0,0],[0.118,-1.685],[0,0]],"v":[[-170.833,-204.095],[-173.731,-200.978],[-165.472,2.728],[168.788,2.728],[176.047,-200.978],[173.149,-204.095]]}],"t":51},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.118,-1.605],[0,0],[0,0],[0,0],[1.684,0]],"o":[[-1.684,0],[0,0],[0,0],[0,0],[0.118,-1.605],[0,0]],"v":[[-175.833,-193.879],[-178.731,-190.911],[-165.472,3.103],[168.788,3.103],[181.047,-190.911],[178.149,-193.879]]}],"t":86},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.118,-1.605],[0,0],[0,0],[0,0],[1.684,0]],"o":[[-1.684,0],[0,0],[0,0],[0,0],[0.118,-1.605],[0,0]],"v":[[-175.833,-193.879],[-178.731,-190.911],[-165.472,3.103],[168.788,3.103],[181.047,-190.911],[178.149,-193.879]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.118,-1.674],[0,0],[0,0],[0,0],[1.684,0]],"o":[[-1.684,0],[0,0],[0,0],[0,0],[0.118,-1.674],[0,0]],"v":[[-175.833,-202.648],[-178.731,-199.552],[-165.472,2.781],[168.788,2.781],[181.047,-199.552],[178.149,-202.648]]}],"t":142},{"s":[{"c":true,"i":[[0,0],[-0.118,-1.605],[0,0],[0,0],[0,0],[1.684,0]],"o":[[-1.684,0],[0,0],[0,0],[0,0],[0.118,-1.605],[0,0]],"v":[[-175.833,-193.879],[-178.731,-190.911],[-165.472,3.103],[168.788,3.103],[181.047,-190.911],[178.149,-193.879]]}],"t":179}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.0471,0.0471,0.0471]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[-0.115,-1.636],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.115,-1.636]],"v":[[-177.515,-192.732],[-164.931,7.018],[168.569,8.382],[179.235,-191.815]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[{"c":true,"i":[[-0.116,0.003],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.093,0.003]],"v":[[-203.036,10.983],[-167.578,10.624],[169.483,10.622],[200.55,10.976]]}],"t":11},{"o":{"x":0.3,"y":0.48},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[-0.116,0.003],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.093,0.003]],"v":[[-203.036,10.983],[-167.578,10.624],[169.483,10.622],[200.55,10.976]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[{"c":true,"i":[[-0.115,-1.718],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.115,-1.718]],"v":[[-172.515,-202.89],[-164.931,6.839],[168.569,8.271],[174.235,-201.927]]}],"t":51},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[-0.115,-1.636],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.115,-1.636]],"v":[[-177.515,-192.732],[-164.931,7.018],[168.569,8.382],[179.235,-191.815]]}],"t":86},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[-0.115,-1.636],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.115,-1.636]],"v":[[-177.515,-192.732],[-164.931,7.018],[168.569,8.382],[179.235,-191.815]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[-0.115,-1.706],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.115,-1.706]],"v":[[-177.515,-201.451],[-164.931,6.864],[168.569,8.286],[179.235,-200.495]]}],"t":142},{"s":[{"c":true,"i":[[-0.115,-1.636],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0.115,-1.636]],"v":[[-177.515,-192.732],[-164.931,7.018],[168.569,8.382],[179.235,-191.815]]}],"t":179}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.102,0.102,0.102]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":0},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[{"c":true,"i":[[0,0],[-0.46,0.012],[0,0],[0,0],[0,0],[6.529,0.01]],"o":[[-6.568,0],[0,0],[0,0],[0,0],[0.368,0.012],[0,0]],"v":[[-200.616,10.999],[-211.915,10.977],[-174.983,10.618],[175.551,10.618],[210.007,10.986],[198.609,10.99]]}],"t":11},{"o":{"x":0.3,"y":0.48},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[0,0],[-0.46,0.012],[0,0],[0,0],[0,0],[6.529,0.01]],"o":[[-6.568,0],[0,0],[0,0],[0,0],[0.368,0.012],[0,0]],"v":[[-200.616,10.999],[-211.915,10.977],[-174.983,10.618],[175.551,10.618],[210.007,10.986],[198.609,10.99]]}],"t":40},{"o":{"x":0.05,"y":0},"i":{"x":0,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.807],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.807],[0,0]],"v":[[-170.12,-212],[-181.3,-199.408],[-172.258,10.618],[174.574,10.618],[183.616,-199.408],[172.436,-212]]}],"t":51},{"o":{"x":0.167,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":86},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":129},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[-0.455,-6.761],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.761],[0,0]],"v":[[-175.12,-210.5],[-186.3,-197.993],[-172.258,10.618],[174.574,10.618],[188.616,-197.993],[177.436,-210.5]]}],"t":142},{"s":[{"c":true,"i":[[0,0],[-0.455,-6.483],[0,0],[0,0],[0,0],[6.499,0]],"o":[[-6.499,0],[0,0],[0,0],[0,0],[0.455,-6.483],[0,0]],"v":[[-175.12,-201.408],[-186.3,-189.416],[-172.258,10.618],[174.574,10.618],[188.616,-189.416],[177.436,-201.408]]}],"t":179}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.5961,0.5686,0.6118]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":4,"parent":8},{"ty":4,"nm":"Cover","sr":1,"st":32,"op":190,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[535.334,-78.967,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-1.2,11.367,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":11},{"s":[0],"t":41}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0.625},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[0,0],[6.241,0],[0,0],[1.341,-0.105],[0,0],[-7.875,0],[0,0],[1.526,0.134]],"o":[[-1.224,-0.108],[0,0],[-6.127,0],[0,0],[-1.73,0.135],[0,0],[7.757,0],[0,0]],"v":[[713.968,-82.632],[701.128,-82.817],[373.502,-82.817],[360.726,-82.637],[324.249,-79.776],[336.237,-79.513],[734.433,-79.513],[746.481,-79.771]]}],"t":11},{"o":{"x":0.05,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[0,0],[6.241,0],[0,0],[1.341,-6.095],[0,0],[-7.875,0],[0,0],[1.526,7.754]],"o":[[-1.224,-6.239],[0,0],[-6.127,0],[0,0],[-1.73,7.832],[0,0],[7.757,0],[0,0]],"v":[[713.968,-71.063],[701.128,-81.794],[373.502,-81.794],[360.726,-71.368],[324.249,94.352],[336.237,109.631],[734.433,109.631],[746.481,94.64]]}],"t":21},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[6.241,0],[0,0],[1.341,-6.095],[0,0],[-7.875,0],[0,0],[1.526,7.754]],"o":[[-1.224,-6.239],[0,0],[-6.127,0],[0,0],[-1.73,7.832],[0,0],[7.757,0],[0,0]],"v":[[713.968,-71.063],[701.128,-81.794],[373.502,-81.794],[360.726,-71.368],[324.249,94.352],[336.237,109.631],[734.433,109.631],[746.481,94.64]]}],"t":32},{"s":[{"c":true,"i":[[0,0],[6.241,0],[0,0],[1.341,-0.105],[0,0],[-7.875,0],[0,0],[1.526,0.134]],"o":[[-1.224,-0.108],[0,0],[-6.127,0],[0,0],[-1.73,0.135],[0,0],[7.757,0],[0,0]],"v":[[713.968,-82.632],[701.128,-82.817],[373.502,-82.817],[360.726,-82.637],[324.249,-79.776],[336.237,-79.513],[734.433,-79.513],[746.481,-79.771]]}],"t":40}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.5961,0.5686,0.6118]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0.625},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.22,-0.108],[0,0]],"o":[[0,0],[0,0],[0,0],[6.25,0],[0,0],[0.242,0.437]],"v":[[738.053,-79.502],[484.431,-82.808],[484.431,-82.817],[701.123,-82.817],[713.963,-82.632],[746.483,-79.771]]}],"t":11},{"o":{"x":0.167,"y":0.167},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.22,-3.868],[0,0]],"o":[[0,0],[0,0],[0,0],[6.25,0],[0,0],[-7.948,-24.039]],"v":[[727.738,0.919],[472.361,-81.73],[472.361,-82.039],[701.123,-82.187],[713.963,-75.537],[746.483,27.205]]}],"t":14},{"o":{"x":0.05,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.22,-6.239],[0,0]],"o":[[0,0],[0,0],[0,0],[6.25,0],[0,0],[0.242,25.3]],"v":[[703.303,107.857],[404.431,-81.291],[404.431,-81.79],[701.123,-81.79],[713.963,-71.066],[746.483,94.635]]}],"t":22},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.22,-6.239],[0,0]],"o":[[0,0],[0,0],[0,0],[6.25,0],[0,0],[0.242,25.3]],"v":[[703.303,107.857],[404.431,-81.291],[404.431,-81.79],[701.123,-81.79],[713.963,-71.066],[746.483,94.635]]}],"t":32},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.22,-0.108],[0,0]],"o":[[0,0],[0,0],[0,0],[6.25,0],[0,0],[0.242,0.437]],"v":[[703.303,-79.543],[404.431,-82.808],[404.431,-82.817],[701.123,-82.817],[713.963,-82.632],[746.483,-79.771]]}],"t":40}]}},{"ty":"gf","bm":0,"hd":false,"nm":"Gradient Fill 2","e":{"a":0,"k":[568.615,-91.364]},"g":{"p":3,"k":{"a":0,"k":[0.001,1,1,1,0.351,1,1,1,0.902,1,1,1,0.001,1,0.351,0.5,0.902,0]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[581.402,96.185]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0.625},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[0,-0.262],[6.49,-0.083],[0,0],[-0.678,0.003],[-5.79,0.027],[-0.57,0.013],[1.37,0.004],[2.65,0.009],[4.31,-0.03],[2.11,-0.015],[0,0],[-1.03,0.011],[3.42,0.034],[5.07,0.038],[2.76,-0.026],[0.2,-0.018],[0,0],[-10.84,0]],"o":[[0,0.118],[0,0],[0.68,-0.003],[5.79,-0.027],[1.12,-0.006],[0.67,-0.02],[-2.64,-0.009],[-5.57,-0.021],[-2.1,0.016],[0,0],[1.03,-0.011],[1.98,-0.023],[-4.77,-0.043],[-2.53,-0.017],[-1.13,0.014],[0,0],[7.59,-0.073],[23.86,0]],"v":[[580.622,-81.307],[570.202,-80.997],[549.152,-81.227],[551.192,-81.236],[568.582,-81.315],[571.642,-81.34],[568.702,-81.372],[560.782,-81.4],[548.162,-81.354],[541.842,-81.307],[538.122,-81.348],[541.212,-81.38],[544.992,-81.468],[529.852,-81.583],[520.742,-81.604],[519.172,-81.555],[509.072,-81.665],[537.412,-81.781]]}],"t":11},{"o":{"x":0.05,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[0,-15.2],[6.49,-4.822],[0,0],[-0.678,0.18],[-5.79,1.55],[-0.57,0.775],[1.37,0.234],[2.65,0.51],[4.31,-1.743],[2.11,-0.897],[0,0],[-1.03,0.622],[3.42,1.957],[5.07,2.192],[2.76,-1.519],[0.2,-1.04],[0,0],[-10.84,0]],"o":[[0,6.851],[0,0],[0.68,-0.173],[5.79,-1.539],[1.12,-0.357],[0.67,-1.172],[-2.64,-0.53],[-5.57,-1.223],[-2.1,0.907],[0,0],[1.03,-0.632],[1.98,-1.346],[-4.77,-2.477],[-2.53,-0.999],[-1.13,0.785],[0,0],[7.59,-4.21],[23.86,0]],"v":[[580.622,5.701],[570.202,23.623],[549.152,10.299],[551.192,9.769],[568.582,5.192],[571.642,3.754],[568.702,1.909],[560.782,0.308],[548.162,2.959],[541.842,5.671],[538.122,3.326],[541.212,1.45],[544.992,-3.627],[529.852,-10.324],[520.742,-11.548],[519.172,-8.673],[509.072,-15.065],[537.412,-21.814]]}],"t":21},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,-15.2],[6.49,-4.822],[0,0],[-0.678,0.18],[-5.79,1.55],[-0.57,0.775],[1.37,0.234],[2.65,0.51],[4.31,-1.743],[2.11,-0.897],[0,0],[-1.03,0.622],[3.42,1.957],[5.07,2.192],[2.76,-1.519],[0.2,-1.04],[0,0],[-10.84,0]],"o":[[0,6.851],[0,0],[0.68,-0.173],[5.79,-1.539],[1.12,-0.357],[0.67,-1.172],[-2.64,-0.53],[-5.57,-1.223],[-2.1,0.907],[0,0],[1.03,-0.632],[1.98,-1.346],[-4.77,-2.477],[-2.53,-0.999],[-1.13,0.785],[0,0],[7.59,-4.21],[23.86,0]],"v":[[580.622,5.701],[570.202,23.623],[549.152,10.299],[551.192,9.769],[568.582,5.192],[571.642,3.754],[568.702,1.909],[560.782,0.308],[548.162,2.959],[541.842,5.671],[538.122,3.326],[541.212,1.45],[544.992,-3.627],[529.852,-10.324],[520.742,-11.548],[519.172,-8.673],[509.072,-15.065],[537.412,-21.814]]}],"t":32},{"s":[{"c":true,"i":[[0,-0.262],[6.49,-0.083],[0,0],[-0.678,0.003],[-5.79,0.027],[-0.57,0.013],[1.37,0.004],[2.65,0.009],[4.31,-0.03],[2.11,-0.015],[0,0],[-1.03,0.011],[3.42,0.034],[5.07,0.038],[2.76,-0.026],[0.2,-0.018],[0,0],[-10.84,0]],"o":[[0,0.118],[0,0],[0.68,-0.003],[5.79,-0.027],[1.12,-0.006],[0.67,-0.02],[-2.64,-0.009],[-5.57,-0.021],[-2.1,0.016],[0,0],[1.03,-0.011],[1.98,-0.023],[-4.77,-0.043],[-2.53,-0.017],[-1.13,0.014],[0,0],[7.59,-0.073],[23.86,0]],"v":[[580.622,-81.307],[570.202,-80.997],[549.152,-81.227],[551.192,-81.236],[568.582,-81.315],[571.642,-81.34],[568.702,-81.372],[560.782,-81.4],[548.162,-81.354],[541.842,-81.307],[538.122,-81.348],[541.212,-81.38],[544.992,-81.468],[529.852,-81.583],[520.742,-81.604],[519.172,-81.555],[509.072,-81.665],[537.412,-81.781]]}],"t":40}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":40}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0.625},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[0,0],[1.118,-0.006],[5.798,-0.026],[9.042,-0.042],[0.515,0.065],[-1.948,0.139],[-1.677,0.02],[-2.525,-0.017],[-4.77,-0.043],[1.974,-0.023],[2.726,-0.029],[0.952,-0.03],[-1.258,0.006],[-3.224,0.024],[-5.574,-0.021],[-2.638,-0.009],[0.144,-0.016],[0,0],[21.964,0],[0,-0.262],[-23.86,0],[0,0.262],[0.385,0.021]],"o":[[-0.373,0.02],[-5.792,0.027],[-9.094,0.041],[-3.11,0.01],[1.607,-0.14],[0.542,-0.025],[2.761,-0.026],[5.076,0.038],[3.425,0.034],[-2.752,0.029],[-1.861,0.023],[-0.323,0.037],[3.232,-0.024],[4.316,-0.03],[2.647,0.009],[1.244,0.004],[0,0],[-2.745,-0.233],[-23.86,0],[0,0.262],[23.86,0],[0,-0.017],[0,0]],"v":[[571.761,-81.346],[568.586,-81.315],[551.193,-81.236],[523.988,-81.112],[512.998,-81.112],[518.799,-81.529],[520.738,-81.604],[529.85,-81.583],[544.99,-81.468],[541.216,-81.38],[532.986,-81.294],[527.439,-81.223],[538.481,-81.282],[548.161,-81.354],[560.785,-81.4],[568.7,-81.372],[571.757,-81.346],[580.258,-81.368],[537.407,-81.782],[494.197,-81.307],[537.407,-80.832],[580.617,-81.307],[580.232,-81.37]]}],"t":11},{"o":{"x":0.05,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[0,0],[1.118,-0.365],[5.798,-1.51],[9.042,-2.44],[0.515,3.776],[-1.948,8.06],[-1.677,1.167],[-2.525,-0.998],[-4.77,-2.476],[1.974,-1.354],[2.726,-1.674],[0.952,-1.737],[-1.258,0.338],[-3.224,1.389],[-5.574,-1.22],[-2.638,-0.534],[0.144,-0.946],[0,0],[21.964,0],[0,-15.2],[-23.86,0],[0,15.2],[0.385,1.243]],"o":[[-0.373,1.159],[-5.792,1.541],[-9.094,2.369],[-3.11,0.579],[1.607,-8.096],[0.542,-1.452],[2.761,-1.523],[5.076,2.191],[3.425,1.959],[-2.752,1.657],[-1.861,1.327],[-0.323,2.146],[3.232,-1.38],[4.316,-1.746],[2.647,0.517],[1.244,0.21],[0,0],[-2.745,-13.515],[-23.86,0],[0,15.2],[23.86,0],[0,-1],[0,0]],"v":[[571.761,3.417],[568.586,5.196],[551.193,9.765],[523.988,16.97],[512.998,16.97],[518.799,-7.193],[520.738,-11.548],[529.85,-10.328],[544.99,-3.63],[541.216,1.455],[532.986,6.452],[527.439,10.531],[538.481,7.119],[548.161,2.96],[560.785,0.306],[568.7,1.909],[571.757,3.444],[580.258,2.133],[537.407,-21.817],[494.197,5.698],[537.407,33.223],[580.617,5.698],[580.232,2.008]]}],"t":21},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[0,0],[1.118,-0.365],[5.798,-1.51],[9.042,-2.44],[0.515,3.776],[-1.948,8.06],[-1.677,1.167],[-2.525,-0.998],[-4.77,-2.476],[1.974,-1.354],[2.726,-1.674],[0.952,-1.737],[-1.258,0.338],[-3.224,1.389],[-5.574,-1.22],[-2.638,-0.534],[0.144,-0.946],[0,0],[21.964,0],[0,-15.2],[-23.86,0],[0,15.2],[0.385,1.243]],"o":[[-0.373,1.159],[-5.792,1.541],[-9.094,2.369],[-3.11,0.579],[1.607,-8.096],[0.542,-1.452],[2.761,-1.523],[5.076,2.191],[3.425,1.959],[-2.752,1.657],[-1.861,1.327],[-0.323,2.146],[3.232,-1.38],[4.316,-1.746],[2.647,0.517],[1.244,0.21],[0,0],[-2.745,-13.515],[-23.86,0],[0,15.2],[23.86,0],[0,-1],[0,0]],"v":[[571.761,3.417],[568.586,5.196],[551.193,9.765],[523.988,16.97],[512.998,16.97],[518.799,-7.193],[520.738,-11.548],[529.85,-10.328],[544.99,-3.63],[541.216,1.455],[532.986,6.452],[527.439,10.531],[538.481,7.119],[548.161,2.96],[560.785,0.306],[568.7,1.909],[571.757,3.444],[580.258,2.133],[537.407,-21.817],[494.197,5.698],[537.407,33.223],[580.617,5.698],[580.232,2.008]]}],"t":32},{"s":[{"c":true,"i":[[0,0],[1.118,-0.006],[5.798,-0.026],[9.042,-0.042],[0.515,0.065],[-1.948,0.139],[-1.677,0.02],[-2.525,-0.017],[-4.77,-0.043],[1.974,-0.023],[2.726,-0.029],[0.952,-0.03],[-1.258,0.006],[-3.224,0.024],[-5.574,-0.021],[-2.638,-0.009],[0.144,-0.016],[0,0],[21.964,0],[0,-0.262],[-23.86,0],[0,0.262],[0.385,0.021]],"o":[[-0.373,0.02],[-5.792,0.027],[-9.094,0.041],[-3.11,0.01],[1.607,-0.14],[0.542,-0.025],[2.761,-0.026],[5.076,0.038],[3.425,0.034],[-2.752,0.029],[-1.861,0.023],[-0.323,0.037],[3.232,-0.024],[4.316,-0.03],[2.647,0.009],[1.244,0.004],[0,0],[-2.745,-0.233],[-23.86,0],[0,0.262],[23.86,0],[0,-0.017],[0,0]],"v":[[571.761,-81.346],[568.586,-81.315],[551.193,-81.236],[523.988,-81.112],[512.998,-81.112],[518.799,-81.529],[520.738,-81.604],[529.85,-81.583],[544.99,-81.468],[541.216,-81.38],[532.986,-81.294],[527.439,-81.223],[538.481,-81.282],[548.161,-81.354],[560.785,-81.4],[568.7,-81.372],[571.757,-81.346],[580.258,-81.368],[537.407,-81.782],[494.197,-81.307],[537.407,-80.832],[580.617,-81.307],[580.232,-81.37]]}],"t":40}]}},{"ty":"gf","bm":0,"hd":false,"nm":"Gradient Fill 3","e":{"a":0,"k":[471.113,-55.064]},"g":{"p":3,"k":{"a":0,"k":[0.001,0.3058823529411765,0.30196078431372547,0.34509803921568627,0.351,0.3607843137254902,0.3411764705882353,0.38823529411764707,0.902,0.4117647058823529,0.3843137254901961,0.43137254901960786,0.001,1,0.351,0.75,0.902,0.5]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[541.402,12.185]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0.625},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[15.72,-0.031],[0,0],[-6.279,0.008],[-7.74,0],[0,0],[1.49,0.132]],"o":[[0,0],[-16.14,0.01],[-1.7,0.133],[0,0],[7.62,0],[6.486,0.044]],"v":[[734.432,-79.53],[336.232,-79.53],[327.912,-79.941],[339.692,-79.682],[730.982,-79.682],[742.822,-79.936]]}],"t":11},{"o":{"x":0.05,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[15.72,-1.804],[0,0],[-6.279,0.435],[-7.74,0],[0,0],[1.49,7.625]],"o":[[0,0],[-16.14,0.573],[-1.7,7.697],[0,0],[7.62,0],[6.486,2.549]],"v":[[734.432,108.614],[336.232,108.614],[327.912,84.831],[339.692,99.837],[730.982,99.837],[742.822,85.106]]}],"t":21},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[15.72,-1.804],[0,0],[-6.279,0.435],[-7.74,0],[0,0],[1.49,7.625]],"o":[[0,0],[-16.14,0.573],[-1.7,7.697],[0,0],[7.62,0],[6.486,2.549]],"v":[[734.432,108.614],[336.232,108.614],[327.912,84.831],[339.692,99.837],[730.982,99.837],[742.822,85.106]]}],"t":32},{"s":[{"c":true,"i":[[15.72,-0.031],[0,0],[-6.279,0.008],[-7.74,0],[0,0],[1.49,0.132]],"o":[[0,0],[-16.14,0.01],[-1.7,0.133],[0,0],[7.62,0],[6.486,0.044]],"v":[[734.432,-79.53],[336.232,-79.53],[327.912,-79.941],[339.692,-79.682],[730.982,-79.682],[742.822,-79.936]]}],"t":40}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":80}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0.625},"i":{"x":0.387,"y":1},"s":[{"c":true,"i":[[19.5,0],[0,0],[-1.7,0.133],[-0.05,0.003],[-3.75,0],[0,0],[-2.41,-0.045],[0,0]],"o":[[0,0],[-16.333,-0.026],[0,0],[2.42,-0.046],[0,0],[3.71,0],[0.09,0.005],[1.49,0.132]],"v":[[733.402,-79.513],[338.069,-79.53],[327.911,-79.941],[363.881,-82.761],[373.501,-82.835],[701.131,-82.835],[710.651,-82.762],[742.821,-79.936]]}],"t":11},{"o":{"x":0.05,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[19.5,0],[0,0],[-1.7,7.697],[-0.05,0.173],[-3.75,0],[0,0],[-2.41,-2.6],[0,0]],"o":[[0,0],[-16.333,-1.507],[0,0],[2.42,-2.661],[0,0],[3.71,0],[0.09,0.296],[1.49,7.625]],"v":[[733.402,109.631],[338.069,108.614],[327.911,84.813],[363.881,-78.553],[373.501,-82.835],[701.131,-82.835],[710.651,-78.645],[742.821,85.088]]}],"t":21},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":0.628},"s":[{"c":true,"i":[[19.5,0],[0,0],[-1.7,7.697],[-0.05,0.173],[-3.75,0],[0,0],[-2.41,-2.6],[0,0]],"o":[[0,0],[-16.333,-1.507],[0,0],[2.42,-2.661],[0,0],[3.71,0],[0.09,0.296],[1.49,7.625]],"v":[[733.402,109.631],[338.069,108.614],[327.911,84.813],[363.881,-78.553],[373.501,-82.835],[701.131,-82.835],[710.651,-78.645],[742.821,85.088]]}],"t":32},{"s":[{"c":true,"i":[[19.5,0],[0,0],[-1.7,0.133],[-0.05,0.003],[-3.75,0],[0,0],[-2.41,-0.045],[0,0]],"o":[[0,0],[-16.333,-0.026],[0,0],[2.42,-0.046],[0,0],[3.71,0],[0.09,0.005],[1.49,0.132]],"v":[[733.402,-79.513],[338.069,-79.53],[327.911,-79.941],[363.881,-82.761],[373.501,-82.835],[701.131,-82.835],[710.651,-82.762],[742.821,-79.936]]}],"t":40}]}},{"ty":"gf","bm":0,"hd":false,"nm":"Gradient Fill 1","e":{"a":0,"k":[516,-73]},"g":{"p":3,"k":{"a":0,"k":[0,0.8823529411764706,0.8823529411764706,0.8823529411764706,0.5,0.8627450980392157,0.8549019607843137,0.8549019607843137,1,0.8431372549019608,0.8313725490196079,0.8313725490196079]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[517,100]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":5,"parent":8},{"ty":4,"nm":"Shadow Bottom","sr":1,"st":32,"op":190,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-0.842,111.004,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-0.842,111.004,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[25],"t":2},{"s":[0],"t":45}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[-7.739,0],[-15.616,0],[-1.363,-0.004],[0,0],[0.738,0.721]],"o":[[0,0],[-2.377,0],[-0.938,0.623],[0,0],[1.363,-0.004],[15.616,0],[7.739,0],[0,0],[4.88,0],[0,0]],"v":[[174.881,10.677],[-172.989,10.599],[-179.347,39.394],[-175.459,40.687],[-62.086,40.822],[-47.253,40.961],[49.863,40.738],[64.916,40.822],[177.484,40.71],[181.243,39.378]]}],"t":2},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.738,2.503]],"o":[[0,0],[-2.377,0],[-0.938,2.163],[0,0],[0,0],[0,0],[0,0],[0,0],[4.88,0],[0,0]],"v":[[176.69,10.751],[-173.786,9.721],[-193.668,109.894],[-189.781,114.382],[-62.086,114.854],[-47.069,115.364],[49.128,114.583],[64.916,114.854],[190.208,114.679],[193.967,110.056]]}],"t":11},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[-10.835,0],[-21.863,0],[-1.908,-3.1],[0,0],[0.738,4.824]],"o":[[0,0],[-2.377,0],[-0.938,4.169],[0,0],[1.908,-3.1],[21.863,0],[10.835,0],[0,0],[4.88,0],[0,0]],"v":[[177.038,10.878],[-173.287,11.659],[-211.691,202.22],[-207.803,210.87],[-62.086,211.278],[-47.327,205.736],[50.157,205.736],[64.916,211.278],[206.248,211.131],[210.006,202.22]]}],"t":17},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[-10.835,0],[-21.863,0],[-1.908,-3.1],[0,0],[0.738,4.824]],"o":[[0,0],[-2.377,0],[-0.938,4.169],[0,0],[1.908,-3.1],[21.863,0],[10.835,0],[0,0],[4.88,0],[0,0]],"v":[[177.038,10.878],[-173.287,11.659],[-211.691,202.22],[-207.803,210.87],[-62.086,211.278],[-47.327,205.736],[50.157,205.736],[64.916,211.278],[206.248,211.131],[210.006,202.22]]}],"t":34},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.738,2.503]],"o":[[0,0],[-2.377,0],[-0.938,2.163],[0,0],[0,0],[0,0],[0,0],[0,0],[4.88,0],[0,0]],"v":[[176.69,10.751],[-173.786,9.721],[-193.668,109.894],[-189.781,114.382],[-62.086,114.854],[-47.069,115.364],[49.128,114.583],[64.916,114.854],[190.208,114.679],[193.967,110.056]]}],"t":39},{"s":[{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[-7.739,0],[-15.616,0],[-1.363,-0.004],[0,0],[0.738,0.721]],"o":[[0,0],[-2.377,0],[-0.938,0.623],[0,0],[1.363,-0.004],[15.616,0],[7.739,0],[0,0],[4.88,0],[0,0]],"v":[[174.881,10.677],[-172.989,10.599],[-179.347,39.394],[-175.459,40.687],[-62.086,40.822],[-47.253,40.961],[49.863,40.738],[64.916,40.822],[177.484,40.71],[181.243,39.378]]}],"t":44}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.0314,0.0314,0.0314]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0.5,106]},"s":{"a":0,"k":[97.183,96.001]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0.5,106]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":6,"parent":8},{"ty":4,"nm":"Keyboard","sr":1,"st":34,"op":192,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0.158,63.909,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0.158,63.909,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Shift L","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.082,-0.72],[0,0],[1.597,0],[0,0],[-0.123,0.72],[0,0],[-1.574,0]],"o":[[1.575,0],[0,0],[-0.082,0.72],[0,0],[-1.596,0],[0,0],[0.123,-0.72],[0,0]],"v":[[-114.967,61.337],[-112.259,62.644],[-113.621,74.607],[-116.667,75.914],[-170.738,75.914],[-173.412,74.607],[-170.785,62.572],[-167.704,61.265]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":60},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":61.637},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":69.818},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":71.453},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":92.453},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":94.092},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":99},{"s":[0.1176,0.1176,0.1176],"t":100.63671875}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":60,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.75],"t":64.092,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.75],"t":68.182,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":72.271,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":91.637,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.75],"t":96.547,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":101.453125}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.002,-0.72],[0,0],[1.597,0],[0,0],[-0.017,0.72],[0,0],[-1.575,0]],"o":[[1.575,0],[0,0],[-0.003,0.72],[0,0],[-1.597,0],[0,0],[0.017,-0.72],[0,0]],"v":[[-5.407,61.337],[-2.562,62.644],[-2.603,74.607],[-5.496,75.914],[-21.545,75.914],[-24.411,74.607],[-24.125,62.644],[-21.236,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":67.092},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":68.729},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":73.637},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":75.271},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":103.092},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":104.729},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":109.637},{"s":[0.1176,0.1176,0.1176],"t":111.271484375}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":67.092,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.25],"t":71.182,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":75.271,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":103.092,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.25],"t":107.182,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":111.271484375}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.057,-0.72],[0,0],[1.605,0],[0,0],[0.042,0.72],[0,0],[-1.583,0]],"o":[[1.583,0],[0,0],[0.057,0.72],[0,0],[-1.605,0],[0,0],[-0.042,-0.72],[0,0]],"v":[[76.664,61.337],[79.625,62.644],[80.574,74.607],[77.781,75.914],[61.74,75.914],[58.766,74.607],[58.062,62.644],[60.842,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":75.271},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":76.908},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":81.818},{"s":[0.1176,0.1176,0.1176],"t":83.453125}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":75.271,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4],"t":79.363,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":83.453125}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.066,-0.703],[0,0],[1.613,0],[0,0],[-0.062,0.699],[0,0],[-1.597,0]],"o":[[1.589,0],[0,0],[0.066,0.699],[0,0],[-1.622,0],[0,0],[0.063,-0.703],[0,0]],"v":[[91.151,86.644],[94.153,87.912],[95.444,101.557],[92.636,102.821],[-91.996,102.821],[-94.811,101.557],[-93.595,87.912],[-90.599,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":72},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":73.637},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":78.547},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":80.182},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":108},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":109.637},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":114.547},{"s":[0.1176,0.1176,0.1176],"t":116.181640625}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":72,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,5],"t":76.092,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":80.182,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":108,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,5],"t":112.092,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":116.181640625}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.052,-0.717],[0,0],[1.56,0],[0,0],[-0.067,0.717],[0,0],[-1.548,0]],"o":[[1.54,0],[0,0],[-0.052,0.717],[0,0],[-1.569,0],[0,0],[0.067,-0.717],[0,0]],"v":[[-71.389,38.878],[-68.688,40.18],[-69.486,51.132],[-72.412,52.43],[-88.094,52.43],[-90.805,51.132],[-89.782,40.18],[-86.865,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":83.453},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":85.092},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":90},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":91.637},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":116.182},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":117.818},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":120.271},{"s":[0.1176,0.1176,0.1176],"t":121.908203125}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":83.453,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.25],"t":87.547,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":91.637,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":116.182,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,4.25],"t":119.453,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":122.728515625}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.027,-0.717],[0,0],[1.561,0],[0,0],[0.012,0.717],[0,0],[-1.54,0]],"o":[[1.541,0],[0,0],[0.027,0.717],[0,0],[-1.561,0],[0,0],[-0.012,-0.717],[0,0]],"v":[[35.516,38.878],[38.362,40.18],[38.778,51.132],[35.994,52.43],[20.305,52.43],[17.459,51.132],[17.268,40.18],[20.032,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":90.818},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":92.453},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":97.363},{"s":[0.1176,0.1176,0.1176],"t":99}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":90.818,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,3.75],"t":94.908,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":99}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.067,-0.717],[0,0],[1.561,0],[0,0],[0.052,0.717],[0,0],[-1.549,0]],"o":[[1.54,0],[0,0],[0.067,0.717],[0,0],[-1.569,0],[0,0],[-0.052,-0.717],[0,0]],"v":[[88.965,38.878],[91.882,40.18],[92.905,51.132],[90.194,52.43],[74.513,52.43],[71.586,51.132],[70.788,40.18],[73.489,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":98.182},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":99.818},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":104.729},{"s":[0.1176,0.1176,0.1176],"t":106.36328125}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":98.182,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,3.75],"t":102.271,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":106.36328125}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.016,-0.733],[0,0],[1.526,0],[0,0],[-0.031,0.729],[0,0],[-1.508,0]],"o":[[1.508,0],[0,0],[-0.016,0.729],[0,0],[-1.525,0],[0,0],[0.031,-0.733],[0,0]],"v":[[-21.023,19.391],[-18.323,20.713],[-18.521,29.653],[-21.311,30.972],[-36.646,30.972],[-39.359,29.653],[-38.979,20.713],[-36.186,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":105.547},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":107.182},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":112.092},{"s":[0.1176,0.1176,0.1176],"t":113.728515625}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":105.547,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,3.25],"t":109.637,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":113.728515625}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.044,-0.733],[0,0],[1.525,0],[0,0],[0.029,0.729],[0,0],[-1.516,0]],"o":[[1.508,0],[0,0],[0.043,0.729],[0,0],[-1.533,0],[0,0],[-0.029,-0.733],[0,0]],"v":[[57.384,19.391],[60.201,20.713],[60.733,29.653],[58.043,30.972],[42.716,30.972],[39.895,29.653],[39.544,20.713],[42.229,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":112.908},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":114.547},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":119.453},{"s":[0.1176,0.1176,0.1176],"t":121.091796875}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":112.908,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,3.25],"t":117,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":121.091796875}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Enter","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.123,-0.717],[0,0],[1.561,0],[0,0],[0.092,0.717],[0,0],[-1.549,0]],"o":[[1.54,0],[0,0],[0.123,0.717],[0,0],[-1.569,0],[0,0],[-0.092,-0.717],[0,0]],"v":[[165.518,38.878],[168.536,40.18],[170.413,51.132],[167.803,52.43],[128.968,52.43],[125.969,51.132],[124.562,40.18],[127.19,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.1176,0.1176,0.1176],"t":129},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":130.635},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2235,0.2235,0.2235],"t":138},{"s":[0.1176,0.1176,0.1176],"t":139.634765625}]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":129,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,3.5],"t":133.09,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,3.5],"t":136.361,"ti":[0,0],"to":[0,0]},{"s":[0,0],"t":140.453125}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.062,-0.72],[0,0],[1.596,0],[0,0],[-0.077,0.72],[0,0],[-1.583,0]],"o":[[1.574,0],[0,0],[-0.062,0.72],[0,0],[-1.605,0],[0,0],[0.077,-0.72],[0,0]],"v":[[-87.485,61.337],[-84.74,62.644],[-85.771,74.607],[-88.781,75.914],[-104.822,75.914],[-107.58,74.607],[-106.304,62.644],[-103.307,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0.5],"t":77.729,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,5],"t":81.818,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0.5],"t":85.908,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0.5],"t":106.363,"ti":[0,0],"to":[0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,5],"t":110.453,"ti":[0,0],"to":[0,0]},{"s":[0,0.5],"t":114.546875}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"ALL","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.042,-0.72],[0,0],[1.605,0],[0,0],[-0.057,0.72],[0,0],[-1.575,0]],"o":[[1.583,0],[0,0],[-0.042,0.72],[0,0],[-1.597,0],[0,0],[0.057,-0.72],[0,0]],"v":[[-60.129,61.337],[-57.347,62.644],[-58.048,74.607],[-61.023,75.914],[-77.063,75.914],[-79.857,74.607],[-78.911,62.644],[-75.95,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.022,-0.72],[0,0],[1.605,0],[0,0],[-0.037,0.72],[0,0],[-1.575,0]],"o":[[1.583,0],[0,0],[-0.022,0.72],[0,0],[-1.597,0],[0,0],[0.037,-0.72],[0,0]],"v":[[-32.772,61.337],[-29.955,62.644],[-30.326,74.607],[-33.264,75.914],[-49.304,75.914],[-52.134,74.607],[-51.518,62.644],[-48.593,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.017,-0.72],[0,0],[1.597,0],[0,0],[0.003,0.72],[0,0],[-1.574,0]],"o":[[1.575,0],[0,0],[0.017,0.72],[0,0],[-1.596,0],[0,0],[-0.003,-0.72],[0,0]],"v":[[21.95,61.337],[24.839,62.644],[25.128,74.607],[22.263,75.914],[6.213,75.914],[3.32,74.607],[3.276,62.644],[6.12,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.037,-0.72],[0,0],[1.597,0],[0,0],[0.023,0.72],[0,0],[-1.583,0]],"o":[[1.575,0],[0,0],[0.037,0.72],[0,0],[-1.605,0],[0,0],[-0.023,-0.72],[0,0]],"v":[[49.307,61.337],[52.232,62.644],[52.851,74.607],[50.022,75.914],[33.981,75.914],[31.043,74.607],[30.669,62.644],[33.486,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.077,-0.72],[0,0],[1.605,0],[0,0],[0.062,0.72],[0,0],[-1.574,0]],"o":[[1.583,0],[0,0],[0.077,0.72],[0,0],[-1.596,0],[0,0],[-0.062,-0.72],[0,0]],"v":[[104.021,61.337],[107.018,62.644],[108.297,74.607],[105.54,75.914],[89.499,75.914],[86.488,74.607],[85.454,62.644],[88.199,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.123,-0.72],[0,0],[1.597,0],[0,0],[0.082,0.72],[0,0],[-1.574,0]],"o":[[1.575,0],[0,0],[0.123,0.72],[0,0],[-1.596,0],[0,0],[-0.082,-0.72],[0,0]],"v":[[169.368,61.337],[172.449,62.644],[174.49,74.607],[171.816,75.914],[117.384,75.914],[114.338,74.607],[112.972,62.644],[115.681,61.337]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.107,-0.703],[0,0],[1.622,0],[0,0],[-0.121,0.699],[0,0],[-1.589,0]],"o":[[1.597,0],[0,0],[-0.107,0.699],[0,0],[-1.613,0],[0,0],[0.122,-0.703],[0,0]],"v":[[-157.816,86.644],[-155.127,87.912],[-157.21,101.557],[-160.331,102.821],[-176.538,102.821],[-179.247,101.557],[-176.198,87.912],[-173.095,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.088,-0.703],[0,0],[1.622,0],[0,0],[-0.102,0.699],[0,0],[-1.588,0]],"o":[[1.597,0],[0,0],[-0.087,0.699],[0,0],[-1.613,0],[0,0],[0.102,-0.703],[0,0]],"v":[[-130.183,86.644],[-127.458,87.912],[-129.159,101.557],[-132.244,102.821],[-148.452,102.821],[-151.195,101.557],[-149.21,87.912],[-146.143,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.068,-0.703],[0,0],[1.613,0],[0,0],[-0.082,0.699],[0,0],[-1.588,0]],"o":[[1.589,0],[0,0],[-0.067,0.699],[0,0],[-1.613,0],[0,0],[0.083,-0.703],[0,0]],"v":[[-102.541,86.644],[-99.789,87.912],[-101.107,101.557],[-104.148,102.821],[-120.365,102.821],[-123.144,101.557],[-121.541,87.912],[-118.51,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 11","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.092,-0.717],[0,0],[1.569,0],[0,0],[-0.123,0.717],[0,0],[-1.54,0]],"o":[[1.548,0],[0,0],[-0.092,0.717],[0,0],[-1.56,0],[0,0],[0.123,-0.717],[0,0]],"v":[[-124.837,38.878],[-122.209,40.18],[-123.613,51.132],[-126.612,52.43],[-166.043,52.43],[-168.653,51.132],[-166.257,40.18],[-163.239,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 12","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.072,-0.717],[0,0],[1.561,0],[0,0],[-0.087,0.717],[0,0],[-1.54,0]],"o":[[1.54,0],[0,0],[-0.072,0.717],[0,0],[-1.56,0],[0,0],[0.087,-0.717],[0,0]],"v":[[-98.113,38.878],[-95.449,40.18],[-96.549,51.132],[-99.512,52.43],[-115.201,52.43],[-117.876,51.132],[-116.551,40.18],[-113.598,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 13","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.032,-0.717],[0,0],[1.56,0],[0,0],[-0.047,0.717],[0,0],[-1.548,0]],"o":[[1.54,0],[0,0],[-0.032,0.717],[0,0],[-1.569,0],[0,0],[0.047,-0.717],[0,0]],"v":[[-44.664,38.878],[-41.928,40.18],[-42.422,51.132],[-45.313,52.43],[-60.994,52.43],[-63.741,51.132],[-63.021,40.18],[-60.141,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 14","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.013,-0.717],[0,0],[1.569,0],[0,0],[-0.027,0.717],[0,0],[-1.54,0]],"o":[[1.548,0],[0,0],[-0.012,0.717],[0,0],[-1.561,0],[0,0],[0.027,-0.717],[0,0]],"v":[[-17.94,38.878],[-15.167,40.18],[-15.358,51.132],[-18.213,52.43],[-33.894,52.43],[-36.677,51.132],[-36.261,40.18],[-33.416,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 15","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.007,-0.717],[0,0],[1.569,0],[0,0],[-0.007,0.717],[0,0],[-1.54,0]],"o":[[1.548,0],[0,0],[0.007,0.717],[0,0],[-1.561,0],[0,0],[0.007,-0.717],[0,0]],"v":[[8.784,38.878],[11.593,40.18],[11.705,51.132],[8.886,52.43],[-6.794,52.43],[-9.613,51.132],[-9.501,40.18],[-6.692,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 16","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.047,-0.717],[0,0],[1.561,0],[0,0],[0.032,0.717],[0,0],[-1.548,0]],"o":[[1.54,0],[0,0],[0.047,0.717],[0,0],[-1.569,0],[0,0],[-0.032,-0.717],[0,0]],"v":[[62.241,38.878],[65.122,40.18],[65.841,51.132],[63.094,52.43],[47.413,52.43],[44.522,51.132],[44.028,40.18],[46.765,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 17","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.087,-0.717],[0,0],[1.569,0],[0,0],[0.072,0.717],[0,0],[-1.54,0]],"o":[[1.548,0],[0,0],[0.087,0.717],[0,0],[-1.56,0],[0,0],[-0.072,-0.717],[0,0]],"v":[[115.69,38.878],[118.643,40.18],[119.968,51.132],[117.293,52.43],[101.612,52.43],[98.649,51.132],[97.549,40.18],[100.213,38.878]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 19","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.096,-0.733],[0,0],[1.525,0],[0,0],[-0.123,0.729],[0,0],[-1.508,0]],"o":[[1.508,0],[0,0],[-0.096,0.729],[0,0],[-1.525,0],[0,0],[0.123,-0.733],[0,0]],"v":[[-125.573,19.391],[-123.009,20.713],[-124.183,29.653],[-127.124,30.972],[-161.26,30.972],[-163.806,29.653],[-161.725,20.713],[-158.765,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 20","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.076,-0.733],[0,0],[1.526,0],[0,0],[-0.09,0.729],[0,0],[-1.516,0]],"o":[[1.508,0],[0,0],[-0.076,0.729],[0,0],[-1.533,0],[0,0],[0.091,-0.733],[0,0]],"v":[[-99.438,19.391],[-96.838,20.713],[-97.767,29.653],[-100.673,30.972],[-116,30.972],[-118.605,29.653],[-117.494,20.713],[-114.593,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 21","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.056,-0.733],[0,0],[1.533,0],[0,0],[-0.071,0.729],[0,0],[-1.508,0]],"o":[[1.516,0],[0,0],[-0.056,0.729],[0,0],[-1.526,0],[0,0],[0.071,-0.733],[0,0]],"v":[[-73.302,19.391],[-70.666,20.713],[-71.352,29.653],[-74.222,30.972],[-89.549,30.972],[-92.189,29.653],[-91.323,20.713],[-88.457,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 22","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.036,-0.733],[0,0],[1.533,0],[0,0],[-0.051,0.729],[0,0],[-1.508,0]],"o":[[1.516,0],[0,0],[-0.036,0.729],[0,0],[-1.526,0],[0,0],[0.051,-0.733],[0,0]],"v":[[-47.166,19.391],[-44.494,20.713],[-44.937,29.653],[-47.77,30.972],[-63.098,30.972],[-65.774,29.653],[-65.151,20.713],[-62.321,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 23","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.004,-0.733],[0,0],[1.526,0],[0,0],[-0.011,0.729],[0,0],[-1.508,0]],"o":[[1.508,0],[0,0],[0.004,0.729],[0,0],[-1.525,0],[0,0],[0.011,-0.733],[0,0]],"v":[[5.113,19.391],[7.857,20.713],[7.902,29.653],[5.141,30.972],[-10.195,30.972],[-12.935,29.653],[-12.799,20.713],[-10.05,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 24","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.024,-0.733],[0,0],[1.526,0],[0,0],[0.009,0.729],[0,0],[-1.516,0]],"o":[[1.508,0],[0,0],[0.023,0.729],[0,0],[-1.533,0],[0,0],[-0.009,-0.733],[0,0]],"v":[[31.249,19.391],[34.029,20.713],[34.318,29.653],[31.592,30.972],[16.264,30.972],[13.48,29.653],[13.372,20.713],[16.093,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 25","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.064,-0.733],[0,0],[1.534,0],[0,0],[0.048,0.729],[0,0],[-1.508,0]],"o":[[1.517,0],[0,0],[0.063,0.729],[0,0],[-1.526,0],[0,0],[-0.049,-0.733],[0,0]],"v":[[83.52,19.391],[86.372,20.713],[87.149,29.653],[84.494,30.972],[69.167,30.972],[66.311,29.653],[65.715,20.713],[68.365,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 26","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.084,-0.733],[0,0],[1.525,0],[0,0],[0.068,0.729],[0,0],[-1.508,0]],"o":[[1.508,0],[0,0],[0.083,0.729],[0,0],[-1.526,0],[0,0],[-0.069,-0.733],[0,0]],"v":[[109.664,19.391],[112.544,20.713],[113.564,29.653],[110.954,30.972],[95.619,30.972],[92.726,29.653],[91.887,20.713],[94.501,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 27","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.104,-0.733],[0,0],[1.526,0],[0,0],[0.088,0.729],[0,0],[-1.508,0]],"o":[[1.508,0],[0,0],[0.103,0.729],[0,0],[-1.526,0],[0,0],[-0.089,-0.733],[0,0]],"v":[[135.799,19.391],[138.724,20.713],[139.987,29.653],[137.405,30.972],[122.07,30.972],[119.15,29.653],[118.067,20.713],[120.636,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 28","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.124,-0.733],[0,0],[1.526,0],[0,0],[0.108,0.729],[0,0],[-1.516,0]],"o":[[1.508,0],[0,0],[0.123,0.729],[0,0],[-1.534,0],[0,0],[-0.109,-0.733],[0,0]],"v":[[161.935,19.391],[164.895,20.713],[166.402,29.653],[163.857,30.972],[148.529,30.972],[145.565,29.653],[144.239,20.713],[146.78,19.391]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 29","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.107,-0.703],[0,0],[-1.622,0],[0,0],[0.121,0.699],[0,0],[1.589,0]],"o":[[-1.597,0],[0,0],[0.107,0.699],[0,0],[1.613,0],[0,0],[-0.122,-0.703],[0,0]],"v":[[158.132,86.644],[155.443,87.912],[157.526,101.557],[160.647,102.821],[176.854,102.821],[179.563,101.557],[176.514,87.912],[173.411,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 30","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.088,-0.703],[0,0],[-1.622,0],[0,0],[0.102,0.699],[0,0],[1.588,0]],"o":[[-1.597,0],[0,0],[0.087,0.699],[0,0],[1.613,0],[0,0],[-0.102,-0.703],[0,0]],"v":[[130.498,86.644],[127.774,87.912],[129.475,101.557],[132.559,102.821],[148.768,102.821],[151.511,101.557],[149.526,87.912],[146.459,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 31","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.068,-0.703],[0,0],[-1.613,0],[0,0],[0.082,0.699],[0,0],[1.588,0]],"o":[[-1.589,0],[0,0],[0.067,0.699],[0,0],[1.613,0],[0,0],[-0.083,-0.703],[0,0]],"v":[[102.857,86.644],[100.105,87.912],[101.423,101.557],[104.464,102.821],[120.68,102.821],[123.459,101.557],[121.857,87.912],[118.825,86.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.1176,0.1176,0.1176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 11","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.613,0],[0,0],[-0.087,0.771],[0,0],[0,0]],"o":[[0,0],[-0.102,0.771],[0,0],[1.622,0],[0,0],[0,0],[0,0]],"v":[[-151.195,101.557],[-151.195,107.033],[-148.452,108.428],[-132.244,108.428],[-129.159,107.033],[-127.458,91.988],[-127.458,87.912]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.597,0],[0,0],[-0.022,0.771],[0,0],[0,0]],"o":[[0,0],[-0.037,0.771],[0,0],[1.605,0],[0,0],[0,0],[0,0]],"v":[[-52.134,74.607],[-52.134,79.607],[-49.304,81.005],[-33.264,81.005],[-30.326,79.607],[-29.955,66.807],[-29.955,62.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.596,0],[0,0],[0.077,0.771],[0,0]],"o":[[0,0],[0,0],[0.062,0.771],[0,0],[1.605,0],[0,0],[0,0]],"v":[[85.454,62.644],[85.454,66.807],[86.488,79.607],[89.499,81.005],[105.54,81.005],[108.297,79.607],[108.297,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.525,0],[0,0],[-0.096,0.771],[0,0],[0,0]],"o":[[0,0],[-0.123,0.771],[0,0],[1.525,0],[0,0],[0,0],[0,0]],"v":[[-163.806,29.653],[-163.806,33.807],[-161.26,35.202],[-127.124,35.202],[-124.183,33.807],[-123.009,24.356],[-123.009,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.533,0],[0,0],[-0.076,0.771],[0,0],[0,0]],"o":[[0,0],[-0.09,0.771],[0,0],[1.526,0],[0,0],[0,0],[0,0]],"v":[[-118.605,29.653],[-118.605,33.807],[-116,35.202],[-100.673,35.202],[-97.767,33.807],[-96.838,24.356],[-96.838,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.526,0],[0,0],[-0.056,0.771],[0,0],[0,0]],"o":[[0,0],[-0.071,0.771],[0,0],[1.534,0],[0,0],[0,0],[0,0]],"v":[[-92.189,29.653],[-92.189,33.807],[-89.549,35.202],[-74.222,35.202],[-71.352,33.807],[-70.666,24.356],[-70.666,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.526,0],[0,0],[-0.036,0.771],[0,0],[0,0]],"o":[[0,0],[-0.051,0.771],[0,0],[1.533,0],[0,0],[0,0],[0,0]],"v":[[-65.774,29.653],[-65.774,33.807],[-63.098,35.202],[-47.77,35.202],[-44.937,33.807],[-44.494,24.356],[-44.494,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.525,0],[0,0],[-0.016,0.771],[0,0]],"o":[[0,0],[-0.031,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[-39.359,29.653],[-39.359,33.807],[-36.646,35.202],[-21.311,35.202],[-18.521,33.807],[-18.323,24.356]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.525,0],[0,0],[0.004,0.771],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.011,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[7.882,29.653],[-12.875,29.653],[-12.935,29.653],[-12.935,33.807],[-10.195,35.202],[5.141,35.202],[7.902,33.807],[7.902,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.533,0],[0,0],[0.023,0.771],[0,0]],"o":[[0,0],[0,0],[0.009,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[13.372,20.713],[13.372,24.356],[13.48,33.807],[16.264,35.202],[31.592,35.202],[34.318,33.807],[34.318,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.533,0],[0,0],[0.043,0.771],[0,0]],"o":[[0,0],[0.029,0.771],[0,0],[1.525,0],[0,0],[0,0]],"v":[[39.544,24.356],[39.895,33.807],[42.716,35.202],[58.043,35.202],[60.733,33.807],[60.733,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 11","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.526,0],[0,0],[0.063,0.771],[0,0]],"o":[[0,0],[0,0],[0.048,0.771],[0,0],[1.534,0],[0,0],[0,0]],"v":[[65.716,20.713],[65.716,24.356],[66.311,33.807],[69.167,35.202],[84.494,35.202],[87.149,33.807],[87.149,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 12","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.526,0],[0,0],[0.083,0.771],[0,0]],"o":[[0,0],[0,0],[0.068,0.771],[0,0],[1.525,0],[0,0],[0,0]],"v":[[91.887,20.713],[91.887,24.356],[92.726,33.807],[95.619,35.202],[110.954,35.202],[113.564,33.807],[113.564,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 13","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.526,0],[0,0],[0.103,0.771],[0,0]],"o":[[0,0],[0,0],[0.088,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[118.067,20.713],[118.067,24.356],[119.15,33.807],[122.07,35.202],[137.405,35.202],[139.987,33.807],[139.987,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 14","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.533,0],[0,0],[0.123,0.771],[0,0]],"o":[[0,0],[0,0],[0.108,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[144.239,20.713],[144.239,24.356],[145.565,33.807],[148.529,35.202],[163.857,35.202],[166.402,33.807],[166.402,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 15","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[0.123,0.771],[0,0]],"o":[[0,0],[0.092,0.771],[0,0],[1.561,0],[0,0],[0,0]],"v":[[124.562,43.913],[125.969,55.677],[128.968,57.071],[167.803,57.071],[170.413,55.677],[170.413,51.132]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 16","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-1.56,0],[0,0],[0.087,0.771]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.072,0.771],[0,0],[1.569,0],[0,0]],"v":[[119.968,55.676],[119.968,51.132],[97.549,40.18],[97.549,43.913],[97.549,43.913],[97.549,43.913],[98.649,55.677],[101.612,57.071],[117.293,57.071],[119.969,55.677]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 17","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[0.067,0.771],[0,0]],"o":[[0,0],[0.052,0.771],[0,0],[1.561,0],[0,0],[0,0]],"v":[[70.788,43.913],[71.586,55.677],[74.513,57.071],[90.194,57.071],[92.905,55.677],[92.905,51.132]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 18","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-1.569,0],[0,0],[0.047,0.771]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.032,0.771],[0,0],[1.561,0],[0,0]],"v":[[65.841,55.676],[65.841,51.132],[44.028,40.18],[44.028,43.913],[44.028,43.913],[44.028,43.913],[44.522,55.677],[47.413,57.071],[63.094,57.071],[65.841,55.677]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 19","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.561,0],[0,0],[0.027,0.771],[0,0]],"o":[[0,0],[0.012,0.771],[0,0],[1.561,0],[0,0],[0,0]],"v":[[17.768,43.913],[17.459,55.677],[20.305,57.071],[35.994,57.071],[38.778,55.677],[38.778,51.132]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 20","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.561,0],[0,0],[-0.012,0.771],[0,0],[0,0]],"o":[[0,0],[-0.027,0.771],[0,0],[1.569,0],[0,0],[0,0],[0,0]],"v":[[-36.677,51.132],[-36.677,55.677],[-33.894,57.071],[-18.213,57.071],[-15.358,55.677],[-15.167,43.913],[-15.167,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 21","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[-0.032,0.771],[0,0],[0,0]],"o":[[0,0],[-0.047,0.771],[0,0],[1.56,0],[0,0],[0,0],[0,0]],"v":[[-63.741,51.132],[-63.741,55.677],[-60.994,57.071],[-45.313,57.071],[-42.422,55.677],[-41.928,43.913],[-41.928,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 22","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[-0.052,0.771],[0,0]],"o":[[0,0],[-0.067,0.771],[0,0],[1.56,0],[0,0],[0,0]],"v":[[-90.617,51.069],[-90.805,55.677],[-88.094,57.071],[-72.412,57.071],[-69.486,55.677],[-69.001,44.351]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 23","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.56,0],[0,0],[-0.072,0.771],[0,0],[0,0]],"o":[[0,0],[-0.087,0.771],[0,0],[1.561,0],[0,0],[0,0],[0,0]],"v":[[-117.876,51.132],[-117.876,55.677],[-115.201,57.071],[-99.512,57.071],[-96.549,55.677],[-95.449,43.913],[-95.449,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 24","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.56,0],[0,0],[-0.092,0.771],[0,0],[0,0]],"o":[[0,0],[-0.123,0.771],[0,0],[1.569,0],[0,0],[0,0],[0,0]],"v":[[-168.653,51.132],[-168.653,55.677],[-166.043,57.071],[-126.612,57.071],[-123.613,55.677],[-122.209,43.913],[-122.209,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 25","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.596,0],[0,0],[-0.082,0.771],[0,0],[0,0]],"o":[[0,0],[-0.123,0.771],[0,0],[1.597,0],[0,0],[0,0],[0,0]],"v":[[-173.412,74.607],[-173.412,79.607],[-170.738,81.005],[-116.667,81.005],[-113.621,79.607],[-112.259,66.807],[-113.259,71.144]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 26","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.605,0],[0,0],[-0.062,0.771],[0,0]],"o":[[0,0],[-0.077,0.771],[0,0],[1.596,0],[0,0],[0,0]],"v":[[-107.58,74.607],[-107.58,79.607],[-104.822,81.005],[-88.781,81.005],[-85.771,79.607],[-84.74,66.807]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 27","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.597,0],[0,0],[-0.042,0.771],[0,0],[0,0]],"o":[[0,0],[-0.057,0.771],[0,0],[1.605,0],[0,0],[0,0],[0,0]],"v":[[-79.857,74.607],[-79.857,79.607],[-77.063,81.005],[-61.023,81.005],[-58.048,79.607],[-57.347,66.807],[-57.347,62.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 28","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.017,-0.771],[0,0],[0,0],[-1.597,0],[0,0],[-0.003,0.771],[0,0]],"o":[[0,0],[0,0],[-0.017,0.771],[0,0],[1.597,0],[0,0],[0.002,-0.771]],"v":[[-24.126,68.198],[-24.411,74.607],[-24.411,79.607],[-21.545,81.005],[-5.496,81.005],[-2.603,79.607],[-2.562,68.198]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 29","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[1.575,0],[0,0],[-0.003,-0.771],[0,0],[-1.596,0],[0,0],[0.017,0.771],[0,0]],"o":[[-0.017,-0.771],[0,0],[-1.574,0],[0,0],[0.003,0.771],[0,0],[1.597,0],[0,0],[0,0]],"v":[[24.839,66.807],[21.95,65.409],[6.12,65.409],[3.276,66.807],[3.32,79.607],[6.213,81.005],[22.263,81.005],[25.128,79.607],[25.128,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 30","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.605,0],[0,0],[0.037,0.771],[0,0]],"o":[[0,0],[0,0],[0.023,0.771],[0,0],[1.597,0],[0,0],[0,0]],"v":[[30.669,62.644],[30.669,66.807],[31.043,79.607],[33.981,81.005],[50.022,81.005],[52.851,79.607],[52.851,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 31","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.605,0],[0,0],[0.057,0.771],[0,0]],"o":[[0,0],[0.042,0.771],[0,0],[1.605,0],[0,0],[0,0]],"v":[[58.062,66.807],[58.766,79.607],[61.74,81.005],[77.781,81.005],[80.574,79.607],[80.574,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 32","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.596,0],[0,0],[0.123,0.771],[0,0]],"o":[[0,0],[0,0],[0.082,0.771],[0,0],[1.597,0],[0,0],[0,0]],"v":[[112.972,62.644],[112.972,66.807],[114.338,79.607],[117.384,81.005],[171.816,81.005],[174.49,79.607],[174.49,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 33","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.622,0],[0,0],[0.121,0.771],[0,0]],"o":[[0,0],[0,0],[0.107,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[155.443,87.912],[155.443,91.988],[157.526,107.033],[160.647,108.428],[176.854,108.428],[179.563,107.033],[179.563,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 34","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.622,0],[0,0],[0.102,0.771],[0,0]],"o":[[0,0],[0,0],[0.087,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[127.774,87.912],[127.774,91.988],[129.475,107.033],[132.559,108.428],[148.768,108.428],[151.511,107.033],[151.511,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 35","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.613,0],[0,0],[0.082,0.771],[0,0]],"o":[[0,0],[0,0],[0.067,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[100.105,87.912],[100.105,91.988],[101.423,107.033],[104.464,108.428],[120.68,108.428],[123.459,107.033],[123.459,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 36","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.622,0],[0,0],[0.066,0.771],[0,0]],"o":[[0,0],[-0.062,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[-94.811,101.557],[-94.811,107.033],[-91.996,108.428],[92.636,108.428],[95.444,107.033],[95.444,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 37","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.613,0],[0,0],[-0.107,0.771],[0,0],[0,0]],"o":[[0,0],[-0.121,0.771],[0,0],[1.622,0],[0,0],[0,0],[0,0]],"v":[[-179.247,101.557],[-179.247,107.033],[-176.538,108.428],[-160.331,108.428],[-157.21,107.033],[-155.127,91.988],[-155.127,87.912]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.613,0],[0,0],[-0.068,0.771],[0,0],[0,0]],"o":[[0,0],[-0.082,0.771],[0,0],[1.613,0],[0,0],[0,0],[0,0]],"v":[[-123.144,101.557],[-123.144,107.033],[-120.365,108.428],[-104.148,108.428],[-101.107,107.033],[-99.789,91.988],[-99.789,87.912]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.007,-0.771],[0,0],[1.569,0],[0,0],[-0.007,0.771],[0,0],[-1.54,0]],"o":[[1.548,0],[0,0],[0.007,0.771],[0,0],[-1.561,0],[0,0],[0.007,-0.771],[0,0]],"v":[[8.784,42.515],[11.593,43.913],[11.705,55.677],[8.886,57.071],[-6.794,57.071],[-9.613,55.677],[-9.501,43.913],[-6.692,42.515]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4275,0.4275,0.4275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 13","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.613,0],[0,0],[-0.087,0.771],[0,0],[0,0]],"o":[[0,0],[-0.102,0.771],[0,0],[1.622,0],[0,0],[0,0],[0,0]],"v":[[-151.195,101.557],[-151.195,107.033],[-148.452,108.428],[-132.244,108.428],[-129.159,107.033],[-127.458,91.988],[-127.458,87.912]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.597,0],[0,0],[-0.022,0.771],[0,0],[0,0]],"o":[[0,0],[-0.037,0.771],[0,0],[1.605,0],[0,0],[0,0],[0,0]],"v":[[-52.134,74.607],[-52.134,79.607],[-49.304,81.005],[-33.264,81.005],[-30.326,79.607],[-29.955,66.807],[-29.955,62.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.596,0],[0,0],[0.077,0.771],[0,0]],"o":[[0,0],[0,0],[0.062,0.771],[0,0],[1.605,0],[0,0],[0,0]],"v":[[85.454,62.644],[85.454,66.807],[86.488,79.607],[89.499,81.005],[105.54,81.005],[108.297,79.607],[108.297,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.525,0],[0,0],[-0.096,0.771],[0,0],[0,0]],"o":[[0,0],[-0.123,0.771],[0,0],[1.525,0],[0,0],[0,0],[0,0]],"v":[[-163.806,29.653],[-163.806,33.807],[-161.26,35.202],[-127.124,35.202],[-124.183,33.807],[-123.009,24.356],[-123.009,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.533,0],[0,0],[-0.076,0.771],[0,0],[0,0]],"o":[[0,0],[-0.09,0.771],[0,0],[1.526,0],[0,0],[0,0],[0,0]],"v":[[-118.605,29.653],[-118.605,33.807],[-116,35.202],[-100.673,35.202],[-97.767,33.807],[-96.838,24.356],[-96.838,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.526,0],[0,0],[-0.056,0.771],[0,0],[0,0]],"o":[[0,0],[-0.071,0.771],[0,0],[1.534,0],[0,0],[0,0],[0,0]],"v":[[-92.189,29.653],[-92.189,33.807],[-89.549,35.202],[-74.222,35.202],[-71.352,33.807],[-70.666,24.356],[-70.666,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.526,0],[0,0],[-0.036,0.771],[0,0],[0,0]],"o":[[0,0],[-0.051,0.771],[0,0],[1.533,0],[0,0],[0,0],[0,0]],"v":[[-65.774,29.653],[-65.774,33.807],[-63.098,35.202],[-47.77,35.202],[-44.937,33.807],[-44.494,24.356],[-44.494,20.713]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.525,0],[0,0],[-0.016,0.771],[0,0]],"o":[[0,0],[-0.031,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[-39.359,29.653],[-39.359,33.807],[-36.646,35.202],[-21.311,35.202],[-18.521,33.807],[-18.323,24.356]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[-1.525,0],[0,0],[0.004,0.771],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.011,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[7.882,29.653],[-12.875,29.653],[-12.935,29.653],[-12.935,33.807],[-10.195,35.202],[5.141,35.202],[7.902,33.807],[7.902,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.533,0],[0,0],[0.023,0.771],[0,0]],"o":[[0,0],[0,0],[0.009,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[13.372,20.713],[13.372,24.356],[13.48,33.807],[16.264,35.202],[31.592,35.202],[34.318,33.807],[34.318,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.533,0],[0,0],[0.043,0.771],[0,0]],"o":[[0,0],[0.029,0.771],[0,0],[1.525,0],[0,0],[0,0]],"v":[[39.544,24.356],[39.895,33.807],[42.716,35.202],[58.043,35.202],[60.733,33.807],[60.733,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 11","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.526,0],[0,0],[0.063,0.771],[0,0]],"o":[[0,0],[0,0],[0.048,0.771],[0,0],[1.534,0],[0,0],[0,0]],"v":[[65.716,20.713],[65.716,24.356],[66.311,33.807],[69.167,35.202],[84.494,35.202],[87.149,33.807],[87.149,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 12","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.526,0],[0,0],[0.083,0.771],[0,0]],"o":[[0,0],[0,0],[0.068,0.771],[0,0],[1.525,0],[0,0],[0,0]],"v":[[91.887,20.713],[91.887,24.356],[92.726,33.807],[95.619,35.202],[110.954,35.202],[113.564,33.807],[113.564,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 13","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.526,0],[0,0],[0.103,0.771],[0,0]],"o":[[0,0],[0,0],[0.088,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[118.067,20.713],[118.067,24.356],[119.15,33.807],[122.07,35.202],[137.405,35.202],[139.987,33.807],[139.987,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 14","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.533,0],[0,0],[0.123,0.771],[0,0]],"o":[[0,0],[0,0],[0.108,0.771],[0,0],[1.526,0],[0,0],[0,0]],"v":[[144.239,20.713],[144.239,24.356],[145.565,33.807],[148.529,35.202],[163.857,35.202],[166.402,33.807],[166.402,29.653]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 15","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[0.123,0.771],[0,0]],"o":[[0,0],[0.092,0.771],[0,0],[1.561,0],[0,0],[0,0]],"v":[[124.562,43.913],[125.969,55.677],[128.968,57.071],[167.803,57.071],[170.413,55.677],[170.413,51.132]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 16","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-1.56,0],[0,0],[0.087,0.771]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.072,0.771],[0,0],[1.569,0],[0,0]],"v":[[119.968,55.676],[119.968,51.132],[97.549,40.18],[97.549,43.913],[97.549,43.913],[97.549,43.913],[98.649,55.677],[101.612,57.071],[117.293,57.071],[119.969,55.677]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 17","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[0.067,0.771],[0,0]],"o":[[0,0],[0.052,0.771],[0,0],[1.561,0],[0,0],[0,0]],"v":[[70.788,43.913],[71.586,55.677],[74.513,57.071],[90.194,57.071],[92.905,55.677],[92.905,51.132]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 18","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-1.569,0],[0,0],[0.047,0.771]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.032,0.771],[0,0],[1.561,0],[0,0]],"v":[[65.841,55.676],[65.841,51.132],[44.028,40.18],[44.028,43.913],[44.028,43.913],[44.028,43.913],[44.522,55.677],[47.413,57.071],[63.094,57.071],[65.841,55.677]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 19","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.561,0],[0,0],[0.027,0.771],[0,0]],"o":[[0,0],[0.012,0.771],[0,0],[1.561,0],[0,0],[0,0]],"v":[[17.768,43.913],[17.459,55.677],[20.305,57.071],[35.994,57.071],[38.778,55.677],[38.778,51.132]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 20","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.561,0],[0,0],[-0.012,0.771],[0,0],[0,0]],"o":[[0,0],[-0.027,0.771],[0,0],[1.569,0],[0,0],[0,0],[0,0]],"v":[[-36.677,51.132],[-36.677,55.677],[-33.894,57.071],[-18.213,57.071],[-15.358,55.677],[-15.167,43.913],[-15.167,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 21","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[-0.032,0.771],[0,0],[0,0]],"o":[[0,0],[-0.047,0.771],[0,0],[1.56,0],[0,0],[0,0],[0,0]],"v":[[-63.741,51.132],[-63.741,55.677],[-60.994,57.071],[-45.313,57.071],[-42.422,55.677],[-41.928,43.913],[-41.928,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 22","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.569,0],[0,0],[-0.052,0.771],[0,0]],"o":[[0,0],[-0.067,0.771],[0,0],[1.56,0],[0,0],[0,0]],"v":[[-90.617,51.069],[-90.805,55.677],[-88.094,57.071],[-72.412,57.071],[-69.486,55.677],[-69.001,44.351]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 23","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.56,0],[0,0],[-0.072,0.771],[0,0],[0,0]],"o":[[0,0],[-0.087,0.771],[0,0],[1.561,0],[0,0],[0,0],[0,0]],"v":[[-117.876,51.132],[-117.876,55.677],[-115.201,57.071],[-99.512,57.071],[-96.549,55.677],[-95.449,43.913],[-95.449,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 24","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.56,0],[0,0],[-0.092,0.771],[0,0],[0,0]],"o":[[0,0],[-0.123,0.771],[0,0],[1.569,0],[0,0],[0,0],[0,0]],"v":[[-168.653,51.132],[-168.653,55.677],[-166.043,57.071],[-126.612,57.071],[-123.613,55.677],[-122.209,43.913],[-122.209,40.18]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 25","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.596,0],[0,0],[-0.082,0.771],[0,0],[0,0]],"o":[[0,0],[-0.123,0.771],[0,0],[1.597,0],[0,0],[0,0],[0,0]],"v":[[-173.412,74.607],[-173.412,79.607],[-170.738,81.005],[-116.667,81.005],[-113.621,79.607],[-112.259,66.807],[-113.259,71.144]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 26","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.605,0],[0,0],[-0.062,0.771],[0,0]],"o":[[0,0],[-0.077,0.771],[0,0],[1.596,0],[0,0],[0,0]],"v":[[-107.58,74.607],[-107.58,79.607],[-104.822,81.005],[-88.781,81.005],[-85.771,79.607],[-84.74,66.807]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 27","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.597,0],[0,0],[-0.042,0.771],[0,0],[0,0]],"o":[[0,0],[-0.057,0.771],[0,0],[1.605,0],[0,0],[0,0],[0,0]],"v":[[-79.857,74.607],[-79.857,79.607],[-77.063,81.005],[-61.023,81.005],[-58.048,79.607],[-57.347,66.807],[-57.347,62.644]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 28","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.017,-0.771],[0,0],[0,0],[-1.597,0],[0,0],[-0.003,0.771],[0,0]],"o":[[0,0],[0,0],[-0.017,0.771],[0,0],[1.597,0],[0,0],[0.002,-0.771]],"v":[[-24.126,68.198],[-24.411,74.607],[-24.411,79.607],[-21.545,81.005],[-5.496,81.005],[-2.603,79.607],[-2.562,68.198]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 29","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[1.575,0],[0,0],[-0.003,-0.771],[0,0],[-1.596,0],[0,0],[0.017,0.771],[0,0]],"o":[[-0.017,-0.771],[0,0],[-1.574,0],[0,0],[0.003,0.771],[0,0],[1.597,0],[0,0],[0,0]],"v":[[24.839,66.807],[21.95,65.409],[6.12,65.409],[3.276,66.807],[3.32,79.607],[6.213,81.005],[22.263,81.005],[25.128,79.607],[25.128,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 30","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.605,0],[0,0],[0.037,0.771],[0,0]],"o":[[0,0],[0,0],[0.023,0.771],[0,0],[1.597,0],[0,0],[0,0]],"v":[[30.669,62.644],[30.669,66.807],[31.043,79.607],[33.981,81.005],[50.022,81.005],[52.851,79.607],[52.851,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 31","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.605,0],[0,0],[0.057,0.771],[0,0]],"o":[[0,0],[0.042,0.771],[0,0],[1.605,0],[0,0],[0,0]],"v":[[58.062,66.807],[58.766,79.607],[61.74,81.005],[77.781,81.005],[80.574,79.607],[80.574,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 32","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.596,0],[0,0],[0.123,0.771],[0,0]],"o":[[0,0],[0,0],[0.082,0.771],[0,0],[1.597,0],[0,0],[0,0]],"v":[[112.972,62.644],[112.972,66.807],[114.338,79.607],[117.384,81.005],[171.816,81.005],[174.49,79.607],[174.49,74.607]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 33","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.622,0],[0,0],[0.121,0.771],[0,0]],"o":[[0,0],[0,0],[0.107,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[155.443,87.912],[155.443,91.988],[157.526,107.033],[160.647,108.428],[176.854,108.428],[179.563,107.033],[179.563,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 34","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.622,0],[0,0],[0.102,0.771],[0,0]],"o":[[0,0],[0,0],[0.087,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[127.774,87.912],[127.774,91.988],[129.475,107.033],[132.559,108.428],[148.768,108.428],[151.511,107.033],[151.511,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 35","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[-1.613,0],[0,0],[0.082,0.771],[0,0]],"o":[[0,0],[0,0],[0.067,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[100.105,87.912],[100.105,91.988],[101.423,107.033],[104.464,108.428],[120.68,108.428],[123.459,107.033],[123.459,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 36","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.622,0],[0,0],[0.066,0.771],[0,0]],"o":[[0,0],[-0.062,0.771],[0,0],[1.613,0],[0,0],[0,0]],"v":[[-94.811,101.557],[-94.811,107.033],[-91.996,108.428],[92.636,108.428],[95.444,107.033],[95.444,101.557]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 37","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.613,0],[0,0],[-0.107,0.771],[0,0],[0,0]],"o":[[0,0],[-0.121,0.771],[0,0],[1.622,0],[0,0],[0,0],[0,0]],"v":[[-179.247,101.557],[-179.247,107.033],[-176.538,108.428],[-160.331,108.428],[-157.21,107.033],[-155.127,91.988],[-155.127,87.912]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-1.613,0],[0,0],[-0.068,0.771],[0,0],[0,0]],"o":[[0,0],[-0.082,0.771],[0,0],[1.613,0],[0,0],[0,0],[0,0]],"v":[[-123.144,101.557],[-123.144,107.033],[-120.365,108.428],[-104.148,108.428],[-101.107,107.033],[-99.789,91.988],[-99.789,87.912]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.007,-0.771],[0,0],[1.569,0],[0,0],[-0.007,0.771],[0,0],[-1.54,0]],"o":[[1.548,0],[0,0],[0.007,0.771],[0,0],[-1.561,0],[0,0],[0.007,-0.771],[0,0]],"v":[[8.784,42.515],[11.593,43.913],[11.705,55.677],[8.886,57.071],[-6.794,57.071],[-9.613,55.677],[-9.501,43.913],[-6.692,42.515]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8667,0.8667,0.8667]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,3.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 12","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-172.288,81.01],[155.321,81.005],[149.774,68.962],[-105.375,67.346],[-106.625,67.346],[-169.463,67.348]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.702,0.6863,0.7176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-135.327,57.071],[145.5,57.071],[141.988,45.753],[-139.274,45.753]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.702,0.6863,0.7176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-139.327,35.202],[155.322,35.202],[151.534,24.516],[-137.962,24.516]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.702,0.6863,0.7176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-162.791,108.428],[173.587,108.428],[165.126,93.894],[-162.728,93.894]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.702,0.6863,0.7176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":7,"parent":8},{"ty":4,"nm":"Bottom","sr":1,"st":32,"op":190,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-0.842,111.004,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-0.842,111.004,0]},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":63},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2],"t":69.639},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-0.2],"t":75},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2],"t":80.639},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-0.2],"t":86.639},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2],"t":91.82},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-0.2],"t":97.584},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2],"t":103.348},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-0.2],"t":109.111},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0.2],"t":114.875},{"o":{"x":0.167,"y":0.167},"i":{"x":0.5,"y":1},"s":[-0.2],"t":120.639},{"o":{"x":0.4,"y":0},"i":{"x":0.5,"y":1},"s":[0.4],"t":128},{"s":[0],"t":140}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.18,2],[0,0],[1.847,0],[0,0],[0.16,-1.77],[0,0],[-2.087,0],[0,0]],"o":[[0,0],[-0.16,-1.77],[0,0],[-1.847,0],[0,0],[-0.18,2],[0,0],[2.087,0]],"v":[[100.695,187.95],[94.288,116.848],[90.741,113.72],[-90.49,113.72],[-94.037,116.848],[-100.443,187.95],[-96.896,191.67],[97.148,191.67]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.6275,0.6275,0.6275]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-10.835,0],[0,0],[-21.863,0],[-1.908,-3.1]],"o":[[1.908,-3.1],[21.863,0],[0,0],[10.835,0],[0,0]],"v":[[-58.742,211.391],[-43.982,205.849],[1.158,205.849],[46.298,205.849],[61.057,211.391]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.3882,0.3569,0.4118]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-4.88,0],[0,0],[-10.835,0],[0,0],[-21.863,0],[-1.908,-3.1],[0,0],[0.738,4.824]],"o":[[-0.738,4.824],[0,0],[1.908,-3.1],[21.863,0],[0,0],[10.835,0],[0,0],[4.88,0],[0,0]],"v":[[-211.691,202.22],[-203.816,211.391],[-58.742,211.391],[-43.982,205.849],[1.158,205.849],[46.298,205.849],[61.057,211.391],[202.132,211.391],[210.006,202.22]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.451,0.4157,0.4667]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[2.377,0],[0,0],[0,0],[0.359,-2.35],[0,0],[-4.88,0],[0,0],[-10.835,0],[0,0],[-21.863,0],[-1.908,-3.1],[0,0],[0.738,4.824]],"o":[[-0.359,-2.35],[0,0],[0,0],[-2.377,0],[0,0],[-0.738,4.824],[0,0],[1.908,-3.1],[21.863,0],[0,0],[10.835,0],[0,0],[4.88,0],[0,0]],"v":[[176.331,14.703],[171.574,10.618],[1.158,10.618],[-169.258,10.618],[-174.016,14.703],[-211.691,202.22],[-203.816,211.391],[-58.742,211.391],[-43.982,205.849],[1.158,205.849],[46.298,205.849],[61.057,211.391],[202.132,211.391],[210.006,202.22]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":8},"c":{"a":0,"k":[0.5961,0.5686,0.6118]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[12.437,3.998],[0,0],[10.84,0],[21.86,0],[1.91,-3.1],[0,0],[-6.528,4.239],[-3.16,0],[0,0],[-0.647,0.866],[-9.205,0],[-21.86,0],[-1.816,-2.432],[-1.081,0],[0,0],[0.007,4.147]],"o":[[0,0],[-1.91,-3.1],[-21.86,0],[-10.83,0],[0,0],[-8.945,1.789],[0.25,3.875],[0,0],[1.081,0],[1.818,-2.433],[21.86,0],[9.212,0],[0.647,0.867],[0,0],[3.2,0],[7.754,4.102]],"v":[[198.135,210.388],[61.055,210.388],[46.295,204.848],[-43.985,204.848],[-58.745,210.388],[-199.815,210.388],[-206.945,197.508],[-200.815,201.918],[-64.619,201.918],[-61.848,200.574],[-47.985,196.378],[50.295,196.378],[64.158,200.572],[66.93,201.918],[199.135,201.918],[205.315,197.398]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.549,0.5216,0.5725]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":50}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[2.377,0],[0,0],[0,0],[-4.88,0],[0,0],[-10.835,0],[-21.863,0],[-1.908,-3.1],[0,0],[0.738,4.824]],"o":[[0,0],[-2.377,0],[-0.738,4.824],[0,0],[1.908,-3.1],[21.863,0],[10.835,0],[0,0],[4.88,0],[0,0]],"v":[[173.951,10.618],[-172.258,10.618],[-211.691,202.22],[-203.816,211.391],[-58.742,211.391],[-43.982,205.849],[46.298,205.849],[61.057,211.391],[202.132,211.391],[210.006,202.22]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"Gradient Fill 1","e":{"a":0,"k":[0,192.5]},"g":{"p":3,"k":{"a":0,"k":[0,0.8823529411764706,0.8823529411764706,0.8823529411764706,0.5,0.8117647058823529,0.8117647058823529,0.8117647058823529,1,0.7372549019607844,0.7372549019607844,0.7372549019607844]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[0,-14.5]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":8,"parent":1}],"v":"5.5.2","fr":60,"op":180,"ip":0,"assets":[{"nm":"","id":"comp_0","layers":[{"ty":3,"nm":"Null 3","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[349.077,187.94,0],"t":62,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[349.077,178.94,0],"t":67,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[349.077,178.94,0],"t":99,"ti":[0,0,0],"to":[0,0,0]},{"s":[349.077,151.19,0],"t":106}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":0}},"ef":[],"ind":1},{"ty":4,"nm":"Contacts","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-108.908,-96.127,0]},"s":{"a":0,"k":[100,100.198,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[147.092,94.06,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-138.528,-160.812],[-104.776,-160.812]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-116.087,-131.513],[-90.374,-131.513]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.9882,1,1]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-136.077,-131.513],[-125.939,-131.513]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.9882,1,1]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-128.921,-48.429],[-122.663,-48.429]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-92.478,-20.216],[-71.853,-20.216]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-128.921,-20.216],[-102.683,-20.216]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-112.69,-48.429],[-74.222,-48.429]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-131.193,-76.881],[-116.122,-76.881]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-110.082,-104.01],[-91.337,-104.01]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-133.464,-104.01],[-120.001,-104.01]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.469,-5.629],[5.815,0],[0.51,5.629],[-5.856,0]],"o":[[0.469,5.629],[-5.815,0],[-0.51,-5.629],[5.856,0]],"v":[[-147.3,-156.269],[-156.98,-146.077],[-168.432,-156.269],[-158.752,-166.462]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.4745,0.3961,0.7569]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.469,-5.629],[5.758,0],[0.51,5.629],[-5.799,0]],"o":[[0.469,5.629],[-5.758,0],[-0.51,-5.629],[5.799,0]],"v":[[-144.96,-128.172],[-154.537,-117.979],[-165.886,-128.172],[-156.309,-138.365]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8902,0.4314,0.451]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.469,-5.629],[5.701,0],[0.51,5.629],[-5.742,0]],"o":[[0.469,5.629],[-5.701,0],[-0.51,-5.629],[5.742,0]],"v":[[-142.62,-100.075],[-152.094,-89.882],[-163.34,-100.075],[-153.866,-110.267]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.3882,0.6667,0.8745]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.469,-5.629],[5.644,0],[0.51,5.629],[-5.685,0]],"o":[[0.469,5.629],[-5.644,0],[-0.51,-5.629],[5.685,0]],"v":[[-140.281,-71.977],[-149.651,-61.785],[-160.794,-71.977],[-151.424,-82.17]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8588,0.5255,0.2314]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.469,-5.629],[5.587,0],[0.51,5.629],[-5.628,0]],"o":[[0.469,5.629],[-5.587,0],[-0.51,-5.629],[5.628,0]],"v":[[-137.941,-43.88],[-147.208,-33.687],[-158.248,-43.88],[-148.981,-54.072]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.7961,0.3098,0.5294]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.469,-5.629],[5.473,0],[0.51,5.629],[-5.514,0]],"o":[[0.469,5.629],[-5.473,0],[-0.51,-5.629],[5.514,0]],"v":[[-135.704,-15.782],[-144.765,-5.59],[-155.599,-15.782],[-146.538,-25.975]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.2549,0.6431,0.651]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-169.342,-115.12],[-47.541,-115.12],[-48.501,-141.815],[-171.143,-141.815]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.2353,0.6196,0.8471]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 9","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-164.607,-176.941],[-158.161,-176.941]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7098,0.698,0.702]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-164.772,-179.784],[-158.321,-179.784]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7098,0.698,0.702]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-164.953,-182.805],[-158.496,-182.805]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7098,0.698,0.702]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 10","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[1.933,0],[0,0],[0.156,1.895],[0,0],[-1.943,0],[0,0],[-0.071,-1.895],[0,0]],"o":[[0,0],[-1.933,0],[0,0],[-0.156,-1.895],[0,0],[1.943,0],[0,0],[0.071,1.895]],"v":[[-56.346,-174.149],[-147.215,-174.149],[-150.996,-177.581],[-151.388,-182.342],[-148.153,-185.775],[-56.802,-185.775],[-53.155,-182.342],[-52.976,-177.581]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.898,0.898,0.898]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 11","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-161.681,-1.558],[-43.351,-1.2],[-50.297,-190.061],[-174.465,-191.055]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,0.9961,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2},{"ty":4,"nm":"Head","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[63.896,-180.299,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[319.896,9.076,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[153.992,-183.189],[153.619,-176.797]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7686,0.7686,0.7686]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[156.163,-176.797],[147.66,-176.797],[148.027,-183.383],[156.554,-183.383]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7686,0.7686,0.7686]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.033,-0.521],[0.544,0],[-0.033,0.521],[-0.545,0]],"o":[[-0.033,0.521],[-0.544,0],[0.033,-0.521],[0.545,0]],"v":[[164.951,-177.604],[163.905,-176.661],[162.979,-177.604],[164.024,-178.548]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.7686,0.7686,0.7686]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.033,-0.521],[0.545,0],[-0.033,0.521],[-0.545,0]],"o":[[-0.033,0.521],[-0.545,0],[0.033,-0.521],[0.545,0]],"v":[[165.107,-180.058],[164.06,-179.114],[163.133,-180.058],[164.179,-181.001]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.7686,0.7686,0.7686]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.033,-0.521],[0.545,0],[-0.033,0.521],[-0.546,0]],"o":[[-0.033,0.521],[-0.545,0],[0.033,-0.521],[0.546,0]],"v":[[165.266,-182.575],[164.219,-181.632],[163.29,-182.575],[164.338,-183.519]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.7686,0.7686,0.7686]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[134.296,-176.622],[136.517,-178.657]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7686,0.7686,0.7686]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.083,-1.57],[1.641,0],[-0.079,1.57],[-1.645,0]],"o":[[-0.083,1.57],[-1.641,0],[0.079,-1.57],[1.645,0]],"v":[[141.647,-180.715],[138.526,-177.872],[135.698,-180.715],[138.818,-183.557]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7686,0.7686,0.7686]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-42.258,-176.039],[-29.229,-176.039]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.2235,0.6588,0.8941]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-30.16,-183.152],[-13.153,-183.152]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-42.123,-183.152],[-35.662,-183.152]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[175.569,-170.604],[-48.383,-170.604],[-49.061,-189.333],[176.854,-189.995]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,0.9961,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3},{"ty":4,"nm":"MY TEXT","sr":1,"st":0,"op":240,"ip":-1,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[91.862,-106.005,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[-52.215,0.68,0],"t":62,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-52.215,-2.07,0],"t":67,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.3,"y":0},"i":{"x":0.4,"y":1},"s":[-52.215,-2.07,0],"t":97,"ti":[0,0,0],"to":[9.275,3.57,0]},{"s":[-1.215,0.68,0],"t":108}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":81},{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":98},{"s":[100],"t":108}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[29.252,-110.14],[29.029,-110.195]]}],"t":29},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[37.191,-110.195],[33,-110.195]]}],"t":32}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":29.923828125}]}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[43.092,-110.154],[43.124,-110.14]]}],"t":35.469},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[75.801,-110.14],[46.205,-110.14]]}],"t":40}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":36.39453125}]}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[84.326,-110.14],[84.271,-110.14]]}],"t":43.787},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[96.395,-110.195],[84.751,-110.14]]}],"t":47}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":44.712890625}]}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[106.321,-110.14],[106.194,-110.14]]}],"t":52.105},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[150.724,-110.195],[105.288,-110.14]]}],"t":60}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":52.10546875}]}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-3.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[29.057,-101.76],[29.04,-101.815]]}],"t":64.121},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[45.908,-101.755],[33.011,-101.815]]}],"t":68}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":65.044921875}]}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[52.64,-101.76],[52.772,-101.815]]}],"t":72.439},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[71.161,-101.755],[55.243,-101.815]]}],"t":77}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":73.36328125}]}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[78.446,-101.755],[78.664,-101.755]]}],"t":80.758},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[88.779,-101.815],[79.498,-101.755]]}],"t":84}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":81.681640625}]}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[98.303,-101.76],[98.577,-101.76]]}],"t":84.455},{"s":[{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[123.424,-101.755],[98.152,-101.76]]}],"t":90}]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":85.37890625}]}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Shape 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[92.375,-133.125],[97.875,-133.125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.6157,0.8392,0.5098]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[56.5,36.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":100}]}}]}],"ind":4,"parent":1},{"ty":4,"nm":"MY TEXT 2","sr":1,"st":0,"op":108,"ip":98,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[91.862,-106.005,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.2,"y":0},"i":{"x":0.3,"y":1},"s":[93.112,-104.755,0],"t":97,"ti":[0,0,0],"to":[0,0,0]},{"s":[91.612,-104.005,0],"t":108}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[36.627,-110.14],[33.404,-110.14]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[75.967,-110.154],[46.124,-110.154]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[95.826,-110.14],[85.396,-110.154]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[151.321,-110.14],[105.569,-110.154]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-3.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[46.557,-101.76],[33.54,-101.755]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[71.015,-101.76],[56.022,-101.755]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[89.196,-101.755],[80.039,-101.76]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[123.553,-101.76],[98.452,-101.769]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Shape 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[92.75,-133.125],[98.375,-133.125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.6157,0.8392,0.5098]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[56.5,36.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":29},{"s":[100],"t":105}]}}]}],"ind":5,"parent":12},{"ty":4,"nm":"Bottom","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[317.184,246.953,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[317.184,180.328,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Layer 8","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-0.31,0.267],[-1.597,-1.923],[0.706,-0.916],[0.245,-0.223],[0.875,1.258],[-0.442,0.377],[-0.503,0.409],[-0.027,-0.85],[0,0]],"o":[[0,0],[0.311,-0.267],[0.599,0.723],[-1.499,1.947],[-0.353,0.322],[-0.844,-1.211],[0.442,-0.377],[0.503,-0.409],[0.026,0.833],[0,0]],"v":[[-39.163,-9.239],[-35.237,-13.08],[-31.701,-12.581],[-31.717,-9.644],[-35.922,-4.805],[-38.524,-5.23],[-37.85,-8.107],[-34.853,-11.079],[-33.469,-10.513],[-36.459,-6.865]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7686,0.7686,0.7686]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[-35.191,-9.047]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[220.809,246.953]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Layer 7","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[157.07,-8.845],[148.147,-4.646],[149.398,-8.82],[148.897,-13.447]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.2235,0.6588,0.8941]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[152.608,-9.047]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[408.608,246.953]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Layer 6","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.135,-2.419],[2.328,0],[-0.124,2.419],[-2.338,0]],"o":[[-0.135,2.419],[-2.328,0],[0.124,-2.419],[2.338,0]],"v":[[140.384,-9.047],[135.925,-4.667],[131.935,-9.047],[136.394,-13.426]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":1.5},"c":{"a":0,"k":[0.7686,0.7686,0.7686]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[136.16,-9.047]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[392.16,246.953]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Layer 5","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.058,-0.831],[-42.444,-0.472],[-43.067,-17.622],[165.434,-17.622]]}],"t":62},{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.058,-0.831],[-42.444,-0.472],[-43.015,-28.122],[165.986,-28.122]]}],"t":67},{"o":{"x":0.3,"y":0},"i":{"x":0.3,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.058,-0.831],[-42.444,-0.472],[-43.015,-28.122],[165.986,-28.122]]}],"t":99},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.058,-0.831],[-42.444,-0.472],[-43.067,-17.622],[165.434,-17.622]]}],"t":111}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,0.9961,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[61.184,-9.047]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[317.184,246.953]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":6},{"ty":4,"nm":"Shadow Line","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256,256,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":40}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Shape 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-42.25,-236.5],[165.25,-236.5]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":1},"c":{"a":0,"k":[0.7333,0.7333,0.7333]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,151.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Shape 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-47,-236.5],[175,-236.5]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":1},"c":{"a":0,"k":[0.7333,0.7333,0.7333]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":7},{"ty":4,"nm":"Bubble 1","sr":1,"st":0,"op":304,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[26.65,-131.89,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[-66.428,-128.455,0],"t":99,"ti":[0,0,0],"to":[0,0,0]},{"s":[-66.928,-127.955,0],"t":106}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[61.689,-140.893],[83.873,-140.884]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[24.787,-140.893],[52.887,-140.884]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-31.625,-140.884],[15.175,-140.884]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-14.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[45.504,-131.111],[70.869,-131.097]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-2.209,-131.097],[36.51,-131.097]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-31.625,-131.111],[-11.538,-131.111]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-11.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[48.581,-122.051],[74.892,-122.088]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[28.8,-122.088],[39.469,-122.088]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-31.625,-122.088],[19.681,-122.102]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-7.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[4.984,-112.946],[18.081,-112.896]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-31.031,-113.065],[-4.523,-113.065]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-3.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.045,-111.511],[7.879,-111.565]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.8431,0.8431,0.8431]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[80.25,1.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,1]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[2.053,0],[0,0],[0,0],[0.057,1.681],[0,0],[-2.087,0],[0,0],[0.07,-2.103],[0,0]],"o":[[0,0],[0,0],[1.105,-1.203],[0,0],[-0.072,-2.103],[0,0],[2.087,0],[0,0],[-0.07,2.103]],"v":[[92.073,-103.09],[-44.262,-103.09],[-43.348,-104.087],[-41.713,-108.585],[-43.05,-162.694],[-39.4,-166.502],[93.931,-166.502],[97.583,-162.694],[95.916,-106.898]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,0.9961,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":8,"parent":1},{"ty":4,"nm":"Bubble 2","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[9.75,-73.889,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[-83.799,-78.478,0],"t":99,"ti":[0,0,0],"to":[0,0,0]},{"s":[-84.299,-77.978,0],"t":106}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[36.02,-72.12],[36.025,-73.919],[38.913,-73.919],[38.936,-80.625],[41.786,-80.625],[41.763,-75.589],[44.176,-75.589],[44.198,-79.667],[47.143,-79.631],[47.117,-75.553],[49.705,-75.553],[49.715,-76.905],[52.668,-76.905],[52.645,-74.162],[56.176,-74.162],[56.176,-71.886]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.498,0.8353,0.9569]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-11.017,-79.058],[-8.058,-79.058],[-8.087,-81.067],[-5.126,-81.067],[-5.067,-76.572],[-0.982,-76.572],[-1.022,-79.97],[1.86,-79.97],[1.891,-77.05],[4.31,-77.05],[4.343,-73.49],[6.564,-73.479],[6.556,-74.392],[8.916,-74.402],[8.925,-73.261],[11.246,-73.261],[11.21,-78.488],[12.788,-78.488],[12.771,-81.067],[15.732,-81.067],[15.775,-73.033],[17.021,-73.033],[16.996,-78.119],[20.161,-78.132],[20.18,-73.274],[22.358,-73.261],[22.347,-77.05],[25.171,-77.05],[25.174,-74.904],[27.909,-74.904],[27.91,-73.49],[30.863,-73.49],[30.862,-72.12],[-10.909,-72.12]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.498,0.8353,0.9569]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-17.043,-71.893],[58.597,-71.893]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.498,0.8353,0.9569]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.268,-0.127],[0,0],[0.001,0.271],[0,0],[-0.24,-0.125],[0,0]],"o":[[0,0],[-0.239,0.114],[0,0],[-0.001,-0.27],[0,0],[0.269,0.14]],"v":[[-23.902,-74.288],[-29.072,-71.829],[-29.594,-72.169],[-29.607,-77.325],[-29.088,-77.639],[-23.904,-74.943]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.9765,0.9765,0.9765]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-0.099,-4.017],[3.955,0],[0.125,4.017],[-3.982,0]],"o":[[0.099,4.017],[-3.955,0],[-0.125,-4.017],[3.982,0]],"v":[[-20.186,-74.801],[-27.169,-67.528],[-34.557,-74.801],[-27.574,-82.074]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.2196,0.6549,0.8941]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[2.092,0],[0,0],[0,0],[0.057,1.681],[0,0],[-2.117,0],[0,0],[0.032,-2.103],[0,0]],"o":[[0,0],[0,0],[1.127,-1.203],[0,0],[-0.072,-2.103],[0,0],[2.117,0],[0,0],[-0.032,2.103]],"v":[[62.099,-61.718],[-42.696,-61.693],[-41.763,-62.69],[-40.094,-67.188],[-40.634,-84.902],[-36.93,-88.71],[62.394,-88.735],[66.169,-84.927],[65.944,-65.526]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,0.9961,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":9,"parent":1},{"ty":4,"nm":"Bubble 3","sr":1,"st":0,"op":369,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[29.539,-145.2,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[-60.538,-44.265,0],"t":99,"ti":[0,0,0],"to":[0,0,0]},{"s":[-62.038,-43.765,0],"t":106}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[19.343,-137.182],[32.36,-137.154]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.664,-137.154],[10.772,-137.154]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-31.464,-137.154],[-7.688,-137.182]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-4.5]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[85.842,-145.722],[90.194,-145.722]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[51.967,-145.818],[76.988,-145.693]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[31.899,-145.722],[43.192,-145.722]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-32.063,-145.722],[22.573,-145.818]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.5882,0.5882,0.5882]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,-8.75]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Shape 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[80.686,-118.125],[86.534,-118.125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":4.3},"c":{"a":0,"k":[0.8431,0.8431,0.8431]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[8.375,-17.625]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,5.25]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[2.155,0],[0,0],[0,0],[0.057,1.681],[0,0],[-2.197,0],[0,0],[0.071,-2.103],[0,0]],"o":[[0,0],[0,0],[1.162,-1.203],[0,0],[-0.072,-2.103],[0,0],[2.197,0],[0,0],[-0.071,2.103]],"v":[[98.826,-124.497],[-44.918,-124.497],[-43.955,-125.494],[-42.231,-129.993],[-43.324,-156.907],[-39.475,-160.715],[100.143,-160.715],[103.993,-156.907],[102.857,-128.306]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[1,0.9961,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":10,"parent":1},{"ty":4,"nm":"MY BUBBLE","sr":1,"st":0,"op":240,"ip":101,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[93.077,-104.935,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.3,"y":0},"i":{"x":0.7,"y":1},"s":[-53.5,-1.5,0],"t":97,"ti":[0,0,0],"to":[8.927,4.117,0]},{"s":[0,0,0],"t":108}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"h":1,"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":98},{"s":[100],"t":108}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-2.121,0],[0,0],[0,0],[-0.104,1.681],[0,0],[2.151,0],[0,0],[-0.008,-2.103],[0,0]],"o":[[0,0],[0,0],[-1.109,-1.203],[0,0],[0.13,-2.103],[0,0],[-2.151,0],[0,0],[0.008,2.103]],"v":[[26.33,-89.903],[163.767,-89.903],[162.849,-90.9],[161.28,-95.399],[162.564,-118.658],[158.905,-122.467],[26.267,-122.467],[22.387,-118.658],[22.476,-93.712]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8078,1,0.7176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":11,"parent":1},{"ty":4,"nm":"MY BUBBLE 2","sr":1,"st":0,"op":108,"ip":98,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[93.077,-104.935,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.2,"y":0},"i":{"x":0.3,"y":1},"s":[296.577,176.69,0],"t":97,"ti":[0,0,0],"to":[55.177,5.617,0]},{"s":[349.077,151.19,0],"t":108}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":100},{"s":[100],"t":104}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[-2.121,0],[0,0],[0,0],[-0.104,1.681],[0,0],[2.151,0],[0,0],[-0.008,-2.103],[0,0]],"o":[[0,0],[0,0],[-1.109,-1.203],[0,0],[0.13,-2.103],[0,0],[-2.151,0],[0,0],[0.008,2.103]],"v":[[26.33,-89.903],[163.767,-89.903],[162.849,-90.9],[161.28,-95.399],[162.564,-118.658],[158.905,-122.467],[26.267,-122.467],[22.387,-118.658],[22.476,-93.712]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill 1","c":{"a":0,"k":[0.8078,1,0.7176]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":12},{"ty":4,"nm":"Background","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[51.859,-95.231,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[307.859,94.144,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[165.058,-0.831],[-70.666,-0.831],[-73.098,-189.632],[176.815,-189.416]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"Gradient Fill 1","e":{"a":0,"k":[-15.632,-159.921]},"g":{"p":5,"k":{"a":0,"k":[0.006,0.9372549019607843,0.9058823529411765,0.7058823529411765,0.202,0.6784313725490196,0.792156862745098,0.5803921568627451,0.502,0.4235294117647059,0.6784313725490196,0.4549019607843137,0.76,0.6823529411764706,0.788235294117647,0.5450980392156862,1,0.9411764705882353,0.9019607843137255,0.6392156862745098]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[153.402,0.185]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":13}]}]}
\ No newline at end of file
diff --git a/app/src/data/animations/linux_30.json b/app/src/data/animations/linux_30.json
new file mode 100644
index 00000000..fe9dfc34
--- /dev/null
+++ b/app/src/data/animations/linux_30.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":60,"ip":0,"op":180,"w":30,"h":30,"nm":"linux_30","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Vector 25","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[15,21.686,0],"to":[0,0.069,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[15,22.103,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[15,21.686,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90,"s":[15,22.103,0],"to":[0,0,0],"ti":[0,0.069,0]},{"t":100,"s":[15,21.686,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[{"i":[[-0.452,0.127],[-1.798,0],[-1.471,-0.414],[0.428,-0.195],[1.333,-1.348],[0.372,0.376],[1.412,0.643]],"o":[[1.471,-0.414],[1.798,0],[0.452,0.127],[-1.412,0.643],[-0.372,0.376],[-1.333,-1.348],[-0.428,-0.195]],"v":[[-5.66,-1.69],[0,-2.686],[5.66,-1.69],[5.712,-0.738],[0.726,2.404],[-0.726,2.404],[-5.712,-0.738]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[-0.452,0.127],[-1.798,0],[-1.471,-0.414],[0.428,-0.195],[1.333,-1.348],[0.372,0.376],[1.412,0.643]],"o":[[1.471,-0.414],[1.798,0],[0.452,0.127],[-1.412,0.643],[-0.372,0.376],[-1.333,-1.348],[-0.428,-0.195]],"v":[[-5.66,-1.69],[0,-2.686],[5.66,-1.69],[5.712,-0.738],[0.726,2.821],[-0.726,2.821],[-5.712,-0.738]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-0.452,0.127],[-1.798,0],[-1.471,-0.414],[0.428,-0.195],[1.333,-1.348],[0.372,0.376],[1.412,0.643]],"o":[[1.471,-0.414],[1.798,0],[0.452,0.127],[-1.412,0.643],[-0.372,0.376],[-1.333,-1.348],[-0.428,-0.195]],"v":[[-5.66,-1.69],[0,-2.686],[5.66,-1.69],[5.712,-0.738],[0.726,2.404],[-0.726,2.404],[-5.712,-0.738]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90,"s":[{"i":[[-0.452,0.127],[-1.798,0],[-1.471,-0.414],[0.428,-0.195],[1.333,-1.348],[0.372,0.376],[1.412,0.643]],"o":[[1.471,-0.414],[1.798,0],[0.452,0.127],[-1.412,0.643],[-0.372,0.376],[-1.333,-1.348],[-0.428,-0.195]],"v":[[-5.66,-1.69],[0,-2.686],[5.66,-1.69],[5.712,-0.738],[0.726,2.821],[-0.726,2.821],[-5.712,-0.738]],"c":true}]},{"t":100,"s":[{"i":[[-0.452,0.127],[-1.798,0],[-1.471,-0.414],[0.428,-0.195],[1.333,-1.348],[0.372,0.376],[1.412,0.643]],"o":[[1.471,-0.414],[1.798,0],[0.452,0.127],[-1.412,0.643],[-0.372,0.376],[-1.333,-1.348],[-0.428,-0.195]],"v":[[-5.66,-1.69],[0,-2.686],[5.66,-1.69],[5.712,-0.738],[0.726,2.404],[-0.726,2.404],[-5.712,-0.738]],"c":true}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Vector 25","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Ellipse 28","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[19,16.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":60,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[20,5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":90,"s":[20,5,100]},{"t":100,"s":[16.667,16.667,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[2,2],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Ellipse 28","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Ellipse 27","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[11,16.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":60,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":70,"s":[20,5,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[16.667,16.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":90,"s":[20,5,100]},{"t":100,"s":[16.667,16.667,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[2,2],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Ellipse 27","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Subtract","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[15,12,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[{"i":[[0,1.422],[-5.523,0],[0,-5.523],[0.535,-1.225],[0,0],[2.761,0],[0.81,-1.668],[1.979,0],[0,-2.761],[0,0]],"o":[[0,-5.523],[5.523,0],[0,1.422],[0,0],[0,-2.761],[-1.979,0],[-0.81,-1.668],[-2.761,0],[0,0],[-0.535,-1.225]],"v":[[-10,3],[0,-7],[10,3],[9.168,7],[9.5,5],[4.5,0],[0,2.818],[-4.5,0],[-9.5,5],[-9.168,7]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,1.422],[-5.523,0],[0,-5.523],[0.535,-1.225],[0,0],[2.761,0],[0.81,-1.668],[1.979,0],[0,-2.761],[0,0]],"o":[[0,-5.523],[5.523,0],[0,1.422],[0,0],[0,-2.761],[-1.979,0],[-0.81,-1.668],[-2.761,0],[0,0],[-0.535,-1.225]],"v":[[-10,3],[0,-7],[10,3],[9.168,7],[9.5,5],[4.5,1.25],[0,4.068],[-4.5,1.25],[-9.5,5],[-9.168,7]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,1.422],[-5.523,0],[0,-5.523],[0.535,-1.225],[0,0],[2.761,0],[0.81,-1.668],[1.979,0],[0,-2.761],[0,0]],"o":[[0,-5.523],[5.523,0],[0,1.422],[0,0],[0,-2.761],[-1.979,0],[-0.81,-1.668],[-2.761,0],[0,0],[-0.535,-1.225]],"v":[[-10,3],[0,-7],[10,3],[9.168,7],[9.5,5],[4.5,0],[0,2.818],[-4.5,0],[-9.5,5],[-9.168,7]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":90,"s":[{"i":[[0,1.422],[-5.523,0],[0,-5.523],[0.535,-1.225],[0,0],[2.761,0],[0.81,-1.668],[1.979,0],[0,-2.761],[0,0]],"o":[[0,-5.523],[5.523,0],[0,1.422],[0,0],[0,-2.761],[-1.979,0],[-0.81,-1.668],[-2.761,0],[0,0],[-0.535,-1.225]],"v":[[-10,3],[0,-7],[10,3],[9.168,7],[9.5,5],[4.5,1.25],[0,4.068],[-4.5,1.25],[-9.5,5],[-9.168,7]],"c":true}]},{"t":100,"s":[{"i":[[0,1.422],[-5.523,0],[0,-5.523],[0.535,-1.225],[0,0],[2.761,0],[0.81,-1.668],[1.979,0],[0,-2.761],[0,0]],"o":[[0,-5.523],[5.523,0],[0,1.422],[0,0],[0,-2.761],[-1.979,0],[-0.81,-1.668],[-2.761,0],[0,0],[-0.535,-1.225]],"v":[[-10,3],[0,-7],[10,3],[9.168,7],[9.5,5],[4.5,0],[0,2.818],[-4.5,0],[-9.5,5],[-9.168,7]],"c":true}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Subtract","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/app/src/data/animations/windows_30.json b/app/src/data/animations/windows_30.json
new file mode 100644
index 00000000..4fb8b659
--- /dev/null
+++ b/app/src/data/animations/windows_30.json
@@ -0,0 +1 @@
+{"v":"5.7.4","fr":60,"ip":0,"op":180,"w":30,"h":30,"nm":"windows_30","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Union","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[15]},{"i":{"x":[0.833],"y":[0.889]},"o":{"x":[0.333],"y":[0]},"t":85,"s":[12.5]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.222]},"t":95,"s":[15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":115,"s":[17.5]},{"t":130,"s":[15]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[15]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":85,"s":[15]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":95,"s":[15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":115,"s":[15]},{"t":130,"s":[15]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-1,11],[-1,1],[-12.667,1],[-12.667,-1],[-1,-1],[-1,-11],[1,-11],[1,-1],[12.667,-1],[12.667,1],[1,1],[1,11]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Union","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Rectangle 23","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[15,15,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[16.667,16.667,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9,-9],[9,9],[-9,9],[-9,-9]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":85,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9,-10.667],[9,10.667],[-10.667,5.667],[-10.667,-5.667]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"t":95,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9,-9],[9,9],[-9,9],[-9,-9]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":115,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[10.667,-5.667],[10.667,5.667],[-9,10.667],[-9,-10.667]],"c":true}]},{"t":130,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[9,-9],[9,9],[-9,9],[-9,-9]],"c":true}]}],"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[600,600],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Преобразовать"}],"nm":"Rectangle 23","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 220e2157..7b4220a8 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -76,6 +76,7 @@ const pagesMap: { [K in pagesStrings]: string } = {
   SETTINGS_UPDATE: "SettingsUpdate",
   PROFILE_UPDATE: "ProfileUpdate",
   BLOCKED_USERS: "blockList",
+  DEVICES: "Devices",
 };
 
 const settingsRows = [
@@ -95,6 +96,7 @@ const settingsRows = [
   {
     icon: "DevicesOutlinedIcon",
     title: "Devices",
+    redirect: sideBarPages.DEVICES,
   },
 ] as SideBarRowProps[];
 
@@ -185,6 +187,12 @@ const blockList: SideBarView = {
   },
 };
 
+const devices: SideBarView = {
+  title: "Devices",
+  backView: sideBarPages.SETTINGS,
+  page: "DEVICES",
+};
+
 export {
   chats,
   contacts,
@@ -199,6 +207,7 @@ export {
   sideBarPages,
   settingsUpdate,
   profileUpdate,
+  devices,
   pagesMap,
   blockList,
 };
diff --git a/app/src/features/devices/Devices.tsx b/app/src/features/devices/Devices.tsx
new file mode 100644
index 00000000..5eef3115
--- /dev/null
+++ b/app/src/features/devices/Devices.tsx
@@ -0,0 +1,99 @@
+import styled from "styled-components";
+import Lottie from "lottie-react";
+import { useGetAllSessions } from "./hooks/useGetAllSessions";
+import { useGetCurrentSession } from "./hooks/useGetCurrentSessions";
+import SessionItem from "./components/SessionItem";
+import laptopAnimation from "@data/animations/devices.json";
+import { DoDisturbOnOutlined } from "@mui/icons-material";
+import Icon from "@components/Icon";
+import { useLogoutOtherSessions } from "./hooks/useLogoutOtherSessions";
+
+const SideBarContainer = styled.div`
+  overflow-y: auto;
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    min-height: 100dvh;
+    background-color: var(--color-background-secondary);
+  }
+`;
+
+const SettingSection = styled.section`
+  padding: 1rem 1.5rem;
+  background-color: var(--color-background);
+
+  &:not(:last-child) {
+    border-bottom: 1rem solid var(--color-border);
+  }
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--color-text-secondary);
+`;
+
+const HeaderAnimatinoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  width: 100%;
+
+  & > div {
+    max-width: 200px;
+  }
+`;
+
+const TerminateOtherSessionsButton = styled.button`
+  color: var(--color-error);
+  background-color: var(--color-background);
+  font-size: 1rem;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+function Devices() {
+  const { data: allDevices } = useGetAllSessions();
+  const { data: activeSession } = useGetCurrentSession();
+  const { logoutOtherSessions } = useLogoutOtherSessions();
+
+  const handleLogoutOthers = () => {
+    logoutOtherSessions();
+  };
+
+  return (
+    <SideBarContainer>
+      <SettingSection>
+        <HeaderAnimatinoContainer>
+          <Lottie animationData={laptopAnimation} />
+        </HeaderAnimatinoContainer>
+      </SettingSection>
+      <SettingSection>
+        <SectionTitle>THIS DEVICE</SectionTitle>
+        <SessionItem session={activeSession} />
+        <TerminateOtherSessionsButton onClick={handleLogoutOthers}>
+          <Icon>
+            <DoDisturbOnOutlined fontSize="large" />
+          </Icon>
+          <span>Terminate All Other Sessions</span>
+        </TerminateOtherSessionsButton>
+      </SettingSection>
+      <SettingSection>
+        <SectionTitle>Active sessions</SectionTitle>
+        {allDevices?.map((session) => (
+          <SessionItem key={session.lastSeenTime} session={session} />
+        ))}
+      </SettingSection>
+    </SideBarContainer>
+  );
+}
+
+export default Devices;
diff --git a/app/src/features/devices/components/SessionItem.tsx b/app/src/features/devices/components/SessionItem.tsx
new file mode 100644
index 00000000..8e8bb084
--- /dev/null
+++ b/app/src/features/devices/components/SessionItem.tsx
@@ -0,0 +1,103 @@
+import styled from "styled-components";
+import { Session } from "../types/sessions";
+import Lottie from "lottie-react";
+import linuxAnimation from "@data/animations/linux_30.json";
+import windowsAnimation from "@data/animations/windows_30.json";
+import androidAnimation from "@data/animations/android_30.json";
+import chromeAnimation from "@data/animations/chrome_30.json";
+
+const SessionItemWrapper = styled.div`
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+`;
+
+const SessionItemIcon = styled.div<{ $color?: string }>`
+  width: 60px;
+  aspect-ratio: 1/1;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 2px solid var(--color-item-hover);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    padding: 3px;
+    width: 100%;
+    height: 100%;
+  }
+
+  ${({ $color }) => $color && `background-color: ${$color};`}
+`;
+const SessionItemContent = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fre;
+  width: 100%;
+`;
+const SessionItemTitle = styled.h4`
+  font-size: 1.1rem;
+  color: var(--color-text);
+`;
+const SessionItemSubtitle = styled.p`
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  margin-top: 0.2rem;
+`;
+
+const SessionItemDate = styled.p`
+  justify-self: end;
+  color: var(--color-text-secondary);
+  font-size: 0.8rem;
+`;
+
+type SessionItemProps = {
+  session: Session;
+};
+
+function SessionItem({ session }: SessionItemProps) {
+  let sessionIcon;
+  let sessionColor;
+
+  switch (session?.agent?.os) {
+    case "Windows":
+      sessionIcon = windowsAnimation;
+      sessionColor = "#0078d7";
+      break;
+    case "Linux":
+      sessionIcon = linuxAnimation;
+      sessionColor = "#fbbc05";
+      break;
+    case "Andorid":
+      sessionIcon = androidAnimation;
+      sessionColor = "#34c759";
+      break;
+    case "Chrome":
+      sessionIcon = chromeAnimation;
+      sessionColor = "#fbbc05";
+      break;
+    default:
+      sessionIcon = androidAnimation;
+      sessionColor = "#34c759";
+  }
+
+  return (
+    <SessionItemWrapper>
+      <SessionItemIcon $color={sessionColor}>
+        <Lottie animationData={sessionIcon} />
+      </SessionItemIcon>
+      <SessionItemContent>
+        <SessionItemTitle>{session?.agent?.os || "Postman"}</SessionItemTitle>
+        <SessionItemDate>
+          {new Date(session?.lastSeenTime).toLocaleDateString()}
+        </SessionItemDate>
+        <SessionItemSubtitle>
+          {session?.agent?.browser || "Postman WebView"}
+        </SessionItemSubtitle>
+      </SessionItemContent>
+    </SessionItemWrapper>
+  );
+}
+
+export default SessionItem;
diff --git a/app/src/features/devices/hooks/useGetAllSessions.ts b/app/src/features/devices/hooks/useGetAllSessions.ts
new file mode 100644
index 00000000..01cbfbef
--- /dev/null
+++ b/app/src/features/devices/hooks/useGetAllSessions.ts
@@ -0,0 +1,19 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { GetAllSessions } from "../services/GetAllSessions";
+import { Session } from "../types/sessions";
+
+function useGetAllSessions() {
+  const queryClient = useQueryClient();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["sessions"],
+    queryFn: GetAllSessions,
+    onSuccess: (data: Session[]) => {
+      queryClient.setQueryData(["sessions"], data);
+    },
+  });
+
+  return { data, error, isLoading };
+}
+
+export { useGetAllSessions };
diff --git a/app/src/features/devices/hooks/useGetCurrentSessions.ts b/app/src/features/devices/hooks/useGetCurrentSessions.ts
new file mode 100644
index 00000000..a6fa2f8a
--- /dev/null
+++ b/app/src/features/devices/hooks/useGetCurrentSessions.ts
@@ -0,0 +1,20 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { GetAllSessions } from "../services/GetAllSessions";
+import { Session } from "../types/sessions";
+import { GetCurrentSession } from "../services/GetCurrentSession";
+
+function useGetCurrentSession() {
+  const queryClient = useQueryClient();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["current-session"],
+    queryFn: GetCurrentSession,
+    onSuccess: (data: Session) => {
+      queryClient.setQueryData(["current-session"], data);
+    },
+  });
+
+  return { data, error, isLoading };
+}
+
+export { useGetCurrentSession };
diff --git a/app/src/features/devices/hooks/useLogoutOtherSessions.ts b/app/src/features/devices/hooks/useLogoutOtherSessions.ts
new file mode 100644
index 00000000..0ef99f59
--- /dev/null
+++ b/app/src/features/devices/hooks/useLogoutOtherSessions.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { LogoutOtherSessions } from "../services/LogoutOtherSessions";
+import toast from "react-hot-toast";
+
+function useLogoutOtherSessions() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: logoutOtherSessions,
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: LogoutOtherSessions,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions"] });
+      toast.success("Successfully logged out other sessions");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+
+  return { logoutOtherSessions, data, error, isPending };
+}
+
+export { useLogoutOtherSessions };
diff --git a/app/src/features/devices/services/GetAllSessions.ts b/app/src/features/devices/services/GetAllSessions.ts
new file mode 100644
index 00000000..03e7f8ad
--- /dev/null
+++ b/app/src/features/devices/services/GetAllSessions.ts
@@ -0,0 +1,24 @@
+import { API_URL } from "@constants";
+import { Session } from "../types/sessions";
+
+async function GetAllSessions(): Promise<Session[]> {
+  const res = await fetch(`${API_URL}/auth/sessions`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+
+  const sessions = data.data?.sessions;
+
+  return sessions;
+}
+
+export { GetAllSessions };
diff --git a/app/src/features/devices/services/GetCurrentSession.ts b/app/src/features/devices/services/GetCurrentSession.ts
new file mode 100644
index 00000000..78df9dd6
--- /dev/null
+++ b/app/src/features/devices/services/GetCurrentSession.ts
@@ -0,0 +1,24 @@
+import { API_URL } from "@constants";
+import { Session } from "../types/sessions";
+
+async function GetCurrentSession(): Promise<Session> {
+  const res = await fetch(`${API_URL}/auth/sessions`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+
+  const sessions = data.data?.sessions;
+
+  return sessions[0];
+}
+
+export { GetCurrentSession };
diff --git a/app/src/features/devices/services/LogoutOtherSessions.ts b/app/src/features/devices/services/LogoutOtherSessions.ts
new file mode 100644
index 00000000..48e3c298
--- /dev/null
+++ b/app/src/features/devices/services/LogoutOtherSessions.ts
@@ -0,0 +1,17 @@
+import { API_URL } from "@constants";
+
+async function LogoutOtherSessions() {
+  const res = await fetch(`${API_URL}/auth/logout/others`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  if (res.status !== 200 && res.status !== 204) {
+    throw new Error("Failed to logout other sessions");
+  }
+}
+
+export { LogoutOtherSessions };
diff --git a/app/src/features/devices/types/sessions.ts b/app/src/features/devices/types/sessions.ts
new file mode 100644
index 00000000..f9def1bc
--- /dev/null
+++ b/app/src/features/devices/types/sessions.ts
@@ -0,0 +1,10 @@
+type Session = {
+  agent: {
+    os?: string;
+    browser?: string;
+  };
+  status: string;
+  lastSeenTime: string;
+};
+
+export type { Session };
diff --git a/app/src/mocks/data/Sessions.ts b/app/src/mocks/data/Sessions.ts
new file mode 100644
index 00000000..36a8513a
--- /dev/null
+++ b/app/src/mocks/data/Sessions.ts
@@ -0,0 +1,68 @@
+import { Session } from "@features/devices/types/sessions";
+
+export const SESSIONS: Session[] = [
+  {
+    agent: {
+      os: "Windows",
+      browser: "Chrome",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Linux",
+      browser: "Firefox",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Android",
+      browser: "Chrome",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Windows",
+      browser: "Edge",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Windows",
+      browser: "Chrome",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Linux",
+      browser: "Firefox",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Android",
+      browser: "Chrome",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+  {
+    agent: {
+      os: "Chrome",
+      browser: "Chrome",
+    },
+    lastSeenTime: new Date(),
+    status: "active",
+  },
+];
diff --git a/app/src/mocks/devices/devices.ts b/app/src/mocks/devices/devices.ts
new file mode 100644
index 00000000..87107e20
--- /dev/null
+++ b/app/src/mocks/devices/devices.ts
@@ -0,0 +1,15 @@
+import { SESSIONS } from "@mocks/data/Sessions";
+import { http, HttpResponse } from "msw";
+
+export const devicesMock = [
+  http.get("/sessions", async () => {
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "Sessions fetched successfully",
+        data: SESSIONS,
+      },
+      { status: 200 },
+    );
+  }),
+];
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index e8949fe1..1dbca9fa 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -10,6 +10,7 @@ import { profileSettingsMock } from "./profile-settings/profile-settings";
 import { profilePictureMock } from "./profile-settings/profile-picture";
 import { storiesMock } from "./stories/stories";
 import { chats } from "./chats/chats";
+import { devicesMock } from "./devices/devices";
 
 export default [
   ...loginMock,
@@ -23,7 +24,7 @@ export default [
   ...logoutMock,
   ...profileSettingsMock,
   ...chats,
-  
   ...profilePictureMock,
   ...storiesMock,
+  ...devicesMock,
 ];
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 2cb78f7a..ce2bf077 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -3,6 +3,7 @@ import {
   chats,
   settings,
   contacts,
+  devices,
   privacySettings,
   settingsUpdate,
   profileUpdate,
@@ -35,6 +36,8 @@ function getSideBarPage(type: number): SideBarView {
       return profileUpdate;
     case sideBarPages.BLOCKED_USERS:
       return blockList;
+    case sideBarPages.DEVICES:
+      return devices;
     default:
       throw new Error("Unknown Type");
   }
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index f6143777..9e6a310d 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -6,6 +6,7 @@ enum sideBarPages {
   SETTINGS_UPDATE,
   PROFILE_UPDATE,
   BLOCKED_USERS,
+  DEVICES,
 }
 
 type pagesStrings = keyof typeof sideBarPages;
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 738a11de..2f2c962e 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -2,22 +2,48 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": "./src/",
     "paths": {
-      "@components/*": ["./components/*"],
-      "@inputs/*": ["./components/inputs/*"],
-      "@mocks/*": ["./mocks/*"],
-      "@features/*": ["./features/*"],
-      "@pages/*": ["./pages/*"],
-      "@hooks/*": ["./hooks/*"],
-      "@constants": ["./constants"],
-      "@state/*": ["./state/*"],
-      "types/*": ["./types/*"],
-      "@data/*": ["./data/*"],
-      "@tests/*": ["./tests/*"]
+      "@components/*": [
+        "./components/*"
+      ],
+      "@inputs/*": [
+        "./components/inputs/*"
+      ],
+      "@mocks/*": [
+        "./mocks/*"
+      ],
+      "@features/*": [
+        "./features/*"
+      ],
+      "@pages/*": [
+        "./pages/*"
+      ],
+      "@hooks/*": [
+        "./hooks/*"
+      ],
+      "@constants": [
+        "./constants"
+      ],
+      "@state/*": [
+        "./state/*"
+      ],
+      "types/*": [
+        "./types/*"
+      ],
+      "@data/*": [
+        "./data/*"
+      ],
+      "@tests/*": [
+        "./tests/*"
+      ]
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From 9a68aaf0f3528fdea028b42b2305942daa933eac Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Fri, 8 Nov 2024 19:08:31 +0200
Subject: [PATCH 014/136] socket and messages infrastructure setup (#45)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/socket-server/index.js                    |  31 +
 app/socket-server/package-lock.json           | 946 ++++++++++++++++++
 app/socket-server/package.json                |  16 +
 app/src/App.tsx                               |   9 +-
 app/src/constants.ts                          |   1 -
 .../signup/services/apiConfirmCode.ts         |   1 -
 .../signup/services/apiSignup.ts              |   1 -
 app/src/hooks/useSocket.ts                    |  11 +
 app/src/sockets/SocketContext.tsx             |   4 +
 app/src/sockets/SocketProvider.tsx            |  61 ++
 app/src/state/messages/messages.ts            |  65 ++
 app/src/state/store.ts                        |   3 +-
 app/src/types/messages.ts                     |  31 +
 app/src/types/socket.ts                       |  11 +
 app/src/utils/socket.ts                       |   5 +
 app/tsconfig.app.json                         |  51 +-
 16 files changed, 1202 insertions(+), 45 deletions(-)
 create mode 100644 app/socket-server/index.js
 create mode 100644 app/socket-server/package-lock.json
 create mode 100644 app/socket-server/package.json
 create mode 100644 app/src/hooks/useSocket.ts
 create mode 100644 app/src/sockets/SocketContext.tsx
 create mode 100644 app/src/sockets/SocketProvider.tsx
 create mode 100644 app/src/state/messages/messages.ts
 create mode 100644 app/src/types/messages.ts
 create mode 100644 app/src/types/socket.ts
 create mode 100644 app/src/utils/socket.ts

diff --git a/app/socket-server/index.js b/app/socket-server/index.js
new file mode 100644
index 00000000..dc8757fd
--- /dev/null
+++ b/app/socket-server/index.js
@@ -0,0 +1,31 @@
+const express = require("express");
+const http = require("http");
+const { Server } = require("socket.io");
+
+const app = express();
+const server = http.createServer(app);
+
+const io = new Server(server, {
+  cors: {
+    origin: "*",
+  },
+});
+
+io.on("connection", (socket) => {
+  console.log("A user connected:", socket.id);
+
+  socket.on("send_message", (data) => {
+    console.log("Message received from client:", data);
+
+    io.emit("receive_message", data);
+  });
+
+  socket.on("disconnect", () => {
+    console.log("User disconnected:", socket.id);
+  });
+});
+
+// Start server on port 4000
+server.listen(4000, () => {
+  console.log("Socket.io server running on http://localhost:4000/socket-io");
+});
diff --git a/app/socket-server/package-lock.json b/app/socket-server/package-lock.json
new file mode 100644
index 00000000..6007fcd0
--- /dev/null
+++ b/app/socket-server/package-lock.json
@@ -0,0 +1,946 @@
+{
+  "name": "socket-server",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "socket-server",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "express": "^4.21.1",
+        "socket.io": "^4.8.1"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.17",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
+      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+      "dependencies": {
+        "undici-types": "~6.19.8"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz",
+      "integrity": "sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.7.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.10",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/socket.io": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/socket.io/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/app/socket-server/package.json b/app/socket-server/package.json
new file mode 100644
index 00000000..e0fadccd
--- /dev/null
+++ b/app/socket-server/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "socket-server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.1",
+    "socket.io": "^4.8.1"
+  }
+}
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 40b606e1..c0bf0e9f 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -14,7 +14,9 @@ import Signup from "./pages/Signup";
 import ResetPasswordModal from "@features/authentication/reset-password/ResetPasswordModal";
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
-import ChatBox from "@features/chats/ChatBox";
+
+import ChatBox from "@features/Chats/ChatBox";
+import SocketProvider from "sockets/SocketProvider";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -44,13 +46,14 @@ function App() {
             path="/"
             element={
               <ProtectedRoute>
-                <AppLayout />
+                <SocketProvider>
+                  <AppLayout />
+                </SocketProvider>
               </ProtectedRoute>
             }
           >
             <Route path=":chatId" element={<ChatBox />} />
           </Route>
-
           <Route path="login" element={<Login />} />
           <Route
             path="password-reset/:token"
diff --git a/app/src/constants.ts b/app/src/constants.ts
index b5134a8e..8dc333b2 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -6,7 +6,6 @@ const {
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
 } = import.meta.env;
-
 const MOBILE_VIEW = "(max-width: 600px)";
 
 export {
diff --git a/app/src/features/authentication/signup/services/apiConfirmCode.ts b/app/src/features/authentication/signup/services/apiConfirmCode.ts
index 1b50b6ab..c8e240d8 100644
--- a/app/src/features/authentication/signup/services/apiConfirmCode.ts
+++ b/app/src/features/authentication/signup/services/apiConfirmCode.ts
@@ -10,7 +10,6 @@ export async function sendEmailVerification(email: string) {
   });
   const data = await res.json();
   if (data.status !== "success") throw new Error(data.message);
-  console.log(data);
 
   return data.data;
 }
diff --git a/app/src/features/authentication/signup/services/apiSignup.ts b/app/src/features/authentication/signup/services/apiSignup.ts
index 169f20e6..e87bd71c 100644
--- a/app/src/features/authentication/signup/services/apiSignup.ts
+++ b/app/src/features/authentication/signup/services/apiSignup.ts
@@ -10,7 +10,6 @@ export async function Signup(user: User) {
   });
   const data = await res.json();
   if (data.status !== "success") throw new Error(data.message);
-  console.log(data);
 
   return user.email;
 }
diff --git a/app/src/hooks/useSocket.ts b/app/src/hooks/useSocket.ts
new file mode 100644
index 00000000..a408f014
--- /dev/null
+++ b/app/src/hooks/useSocket.ts
@@ -0,0 +1,11 @@
+import { SocketContextType } from "types/socket";
+import { SocketContext } from "../sockets/SocketContext";
+import { useContext } from "react";
+
+export const useSocket = (): SocketContextType => {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error("useSocket must be used within a SocketProvider");
+  }
+  return context;
+};
diff --git a/app/src/sockets/SocketContext.tsx b/app/src/sockets/SocketContext.tsx
new file mode 100644
index 00000000..56a59288
--- /dev/null
+++ b/app/src/sockets/SocketContext.tsx
@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { SocketContextType } from "types/socket";
+
+export const SocketContext = createContext<SocketContextType | null>(null);
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
new file mode 100644
index 00000000..22d52191
--- /dev/null
+++ b/app/src/sockets/SocketProvider.tsx
@@ -0,0 +1,61 @@
+import { useState, useEffect, ReactNode } from "react";
+import { useDispatch } from "react-redux";
+import {
+  addMessage,
+  MessageInterface,
+  setIsTyping,
+} from "@state/messages/messages";
+import socket from "utils/socket";
+import { SocketContext } from "./SocketContext";
+import { Dispatch } from "redux";
+
+const handleIncomingMessage = (
+  dispatch: Dispatch,
+  message: MessageInterface
+) => {
+  dispatch(addMessage(message));
+};
+const handleIsTyping = (dispatch: Dispatch, isTyping: boolean) => {
+  dispatch(setIsTyping({ isTyping: isTyping }));
+};
+const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isConnected, setIsConnected] = useState(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    socket.on("connect", () => {
+      const engine = socket.io.engine;
+      console.log("Connected to socket");
+      setIsConnected(true);
+      engine.on("close", (reason) => {
+        console.log(reason);
+      });
+    });
+
+    socket.on("receive_message", (message: MessageInterface) => {
+      handleIncomingMessage(dispatch, message);
+    });
+    socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
+    return () => {
+      socket.off("connect");
+      socket.off("disconnect");
+      socket.off("receive_message");
+    };
+  }, [dispatch]);
+
+  const sendMessage = (message: MessageInterface) => {
+    if (isConnected) {
+      socket.emit("send_message", { message });
+    } else {
+      console.warn("Cannot send message: not connected to socket server");
+    }
+  };
+
+  return (
+    <SocketContext.Provider value={{ isConnected, sendMessage }}>
+      {children}
+    </SocketContext.Provider>
+  );
+};
+
+export default SocketProvider;
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
new file mode 100644
index 00000000..01814aef
--- /dev/null
+++ b/app/src/state/messages/messages.ts
@@ -0,0 +1,65 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { MessageInterface } from "types/messages";
+
+interface MessagesState {
+  messages: MessageInterface[];
+  isTyping: boolean;
+}
+
+const initialState: MessagesState = {
+  messages: [],
+  isTyping: false,
+};
+
+const messagesSlice = createSlice({
+  name: "messages",
+  initialState,
+  reducers: {
+    addMessage: (state, action: PayloadAction<MessageInterface>) => {
+      state.messages.push(action.payload);
+    },
+
+    deleteMessage: (
+      state,
+      action: PayloadAction<{ id: string; chatId: string }>
+    ) => {
+      state.messages = state.messages.filter((message) => {
+        const { chatId, id } = action.payload;
+        if (message.chatId == chatId) return message.id !== id;
+        else return message;
+      });
+    },
+
+    editMessage: (
+      state,
+      action: PayloadAction<{ id: string; content: string; chatId: string }>
+    ) => {
+      const { id, content, chatId } = action.payload;
+      const message = state.messages.find(
+        (msg) => msg.id === id && msg.chatId == chatId
+      );
+      if (message) {
+        message.content = content;
+      }
+    },
+
+    clearMessages: (state, action: PayloadAction<{ chatId: string }>) => {
+      const { chatId } = action.payload;
+      state.messages.filter((msg) => msg.chatId !== chatId);
+    },
+    setIsTyping: (state, action: PayloadAction<{ isTyping: boolean }>) => {
+      const { isTyping } = action.payload;
+      state.isTyping = isTyping;
+    },
+  },
+});
+
+export const {
+  addMessage,
+  deleteMessage,
+  editMessage,
+  clearMessages,
+  setIsTyping,
+} = messagesSlice.actions;
+export default messagesSlice.reducer;
+export type { MessageInterface, MessagesState };
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index 69902ded..38c98c8e 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -2,12 +2,13 @@ import { configureStore } from "@reduxjs/toolkit";
 import themeReducer from "./theme/theme";
 import sideBarReducer from "./side-bar/sideBar";
 import userReducer from "./user/user";
-
+import messagesReducer from "./messages/messages";
 export const store = configureStore({
   reducer: {
     theme: themeReducer,
     sideBarData: sideBarReducer,
     user: userReducer,
+    messages: messagesReducer,
   },
 });
 
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
new file mode 100644
index 00000000..55931776
--- /dev/null
+++ b/app/src/types/messages.ts
@@ -0,0 +1,31 @@
+export enum MessageTypes {
+  "announcement",
+  "forward",
+  "normal",
+}
+export enum DeleteType {
+  "all",
+  "only-me",
+  "none",
+}
+
+export enum MessageStatus {
+  "sent",
+  "delivered",
+  "seen",
+  "error",
+}
+
+export interface MessageInterface {
+  id: string;
+  content: string;
+  senderId: string;
+  type: MessageTypes;
+  createdAt: Date;
+  updatedAt: Date;
+  chatId: string;
+  parentMessageId: string;
+  isDeleted: boolean;
+  deleteType: DeleteType;
+  status: MessageStatus;
+}
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
new file mode 100644
index 00000000..99182913
--- /dev/null
+++ b/app/src/types/socket.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { MessageInterface } from "./messages";
+
+export interface SocketContextType {
+  isConnected: boolean;
+  sendMessage: (message: MessageInterface) => void;
+}
+
+export interface SocketProviderProps {
+  children: ReactNode;
+}
diff --git a/app/src/utils/socket.ts b/app/src/utils/socket.ts
new file mode 100644
index 00000000..34bfd0ca
--- /dev/null
+++ b/app/src/utils/socket.ts
@@ -0,0 +1,5 @@
+import { io } from "socket.io-client";
+
+const socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`); //for testing
+
+export default socket;
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 2f2c962e..3bfb13f1 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -2,48 +2,23 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": "./src/",
     "paths": {
-      "@components/*": [
-        "./components/*"
-      ],
-      "@inputs/*": [
-        "./components/inputs/*"
-      ],
-      "@mocks/*": [
-        "./mocks/*"
-      ],
-      "@features/*": [
-        "./features/*"
-      ],
-      "@pages/*": [
-        "./pages/*"
-      ],
-      "@hooks/*": [
-        "./hooks/*"
-      ],
-      "@constants": [
-        "./constants"
-      ],
-      "@state/*": [
-        "./state/*"
-      ],
-      "types/*": [
-        "./types/*"
-      ],
-      "@data/*": [
-        "./data/*"
-      ],
-      "@tests/*": [
-        "./tests/*"
-      ]
+      "@components/*": ["./components/*"],
+      "@inputs/*": ["./components/inputs/*"],
+      "@mocks/*": ["./mocks/*"],
+      "@features/*": ["./features/*"],
+      "@pages/*": ["./pages/*"],
+      "@hooks/*": ["./hooks/*"],
+      "@constants": ["./constants"],
+      "@state/*": ["./state/*"],
+      "types/*": ["./types/*"],
+      "@data/*": ["./data/*"],
+      "@tests/*": ["./tests/*"],
+      "@services": ["./services/*"]
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From 8df04a0ecc10a78590839a6e7286456b04e586fe Mon Sep 17 00:00:00 2001
From: shehab khaled <89648315+shehab299@users.noreply.github.com>
Date: Fri, 8 Nov 2024 19:42:49 +0200
Subject: [PATCH 015/136] Add nginx configuration (#47)

---
 app/nginx.conf      | 23 +++++++++++++++++++++++
 app/prod.Dockerfile |  6 +++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 app/nginx.conf

diff --git a/app/nginx.conf b/app/nginx.conf
new file mode 100644
index 00000000..e2422b90
--- /dev/null
+++ b/app/nginx.conf
@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
+        expires max;
+        add_header Cache-Control "public, max-age=31536000";
+    }
+
+    location /service-worker.js {
+        add_header Cache-Control "no-cache";
+        proxy_cache_bypass $http_pragma;
+        proxy_cache_revalidate on;
+        expires off;
+        access_log off;
+    }
+}
\ No newline at end of file
diff --git a/app/prod.Dockerfile b/app/prod.Dockerfile
index d7a48099..f22f2767 100644
--- a/app/prod.Dockerfile
+++ b/app/prod.Dockerfile
@@ -18,6 +18,10 @@ FROM nginx:1.27-alpine
 
 COPY --from=build /app/dist /usr/share/nginx/html
 
-EXPOSE 80
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY nginx.conf /etc/nginx/conf.d/
 
+EXPOSE 80
 
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file

From d5958ee07615733311d9ca700005fd2876cf3232 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 8 Nov 2024 20:44:07 +0200
Subject: [PATCH 016/136] :bug: (block): adding data-testid prop (#48)

---
 app/package.json                                         | 1 +
 app/src/App.tsx                                          | 2 +-
 app/src/features/privacy-settings/AddToBlockMenuList.tsx | 7 +++++--
 app/src/features/privacy-settings/BlockItem.tsx          | 7 ++++++-
 app/src/features/privacy-settings/BlockList.tsx          | 2 +-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/package.json b/app/package.json
index b20636a9..cb7cb8b8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -33,6 +33,7 @@
     "react-international-phone": "^4.3.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
+    "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.13",
     "yup": "^1.4.0"
   },
diff --git a/app/src/App.tsx b/app/src/App.tsx
index c0bf0e9f..e0720047 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -15,7 +15,7 @@ import ResetPasswordModal from "@features/authentication/reset-password/ResetPas
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
 
-import ChatBox from "@features/Chats/ChatBox";
+import ChatBox from "@features/chats/ChatBox";
 import SocketProvider from "sockets/SocketProvider";
 
 const queryClient = new QueryClient({
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
index 1bb03694..c72c4f7a 100644
--- a/app/src/features/privacy-settings/AddToBlockMenuList.tsx
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -27,7 +27,6 @@ const StyledList = styled.ul<StyledListProps>`
   border-radius: var(--border-radius-default);
 `;
 
-
 interface StyledListProps {
   $bottom?: number;
   $right?: number;
@@ -81,7 +80,11 @@ function AddToBlockMenuList({ setIsMenuOpened }: any) {
             username: item.name.toLowerCase() + 123,
           };
           return (
-            <StylingWrapper onClick={() => handleClick(item)} key={data.id}>
+            <StylingWrapper
+              onClick={() => handleClick(item)}
+              key={data.id}
+              data-testid={`block-user-${data.id}`}
+            >
               <BlockItem {...data} />
             </StylingWrapper>
           );
diff --git a/app/src/features/privacy-settings/BlockItem.tsx b/app/src/features/privacy-settings/BlockItem.tsx
index 2dc292d2..beac2bd9 100644
--- a/app/src/features/privacy-settings/BlockItem.tsx
+++ b/app/src/features/privacy-settings/BlockItem.tsx
@@ -85,6 +85,7 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
   return (
     <StyledSideBarRow
       onClick={() => setIsBlockButtonEnabled(!isBlockButtonEnabled)}
+      data-testid={`open-block-option-${id}`}
     >
       <RowInfo>
         <Avatar name={name[0]} />
@@ -95,7 +96,11 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
       </RowInfo>
 
       {isBlockButtonEnabled && (
-        <StyledList {...menuStyles} onClick={() => handleRemove(id)}>
+        <StyledList
+          {...menuStyles}
+          onClick={() => handleRemove(id)}
+          data-testid={`remove-from-blocklist-${id}`}
+        >
           <HoverMask>
             <RowInfo>
               {getIcon("Unlock")}
diff --git a/app/src/features/privacy-settings/BlockList.tsx b/app/src/features/privacy-settings/BlockList.tsx
index c4321624..02915345 100644
--- a/app/src/features/privacy-settings/BlockList.tsx
+++ b/app/src/features/privacy-settings/BlockList.tsx
@@ -38,8 +38,8 @@ function BlockList() {
         $size={3.3}
         $color="white"
         $bgColor="var(--accent-color)"
-        data-testid="add-contacts-icon"
         onClick={() => setIsMenuOpened(!isMenuOpened)}
+        data-testid="block-user-menu-icon"
       />
 
       {isMenuOpened && <AddToBlockMenuList setIsMenuOpened={setIsMenuOpened} />}

From 90807840a423e922aef4d7e0632a1237d0763a76 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Tue, 26 Nov 2024 22:42:57 +0200
Subject: [PATCH 017/136] fixed socket persistent connection (#52)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/sockets/SocketProvider.tsx | 13 ++++++++++---
 app/src/utils/socket.ts            | 12 +++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 22d52191..2897f2dd 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -5,9 +5,10 @@ import {
   MessageInterface,
   setIsTyping,
 } from "@state/messages/messages";
-import socket from "utils/socket";
+
 import { SocketContext } from "./SocketContext";
 import { Dispatch } from "redux";
+import { getSocket } from "utils/socket";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
@@ -21,11 +22,13 @@ const handleIsTyping = (dispatch: Dispatch, isTyping: boolean) => {
 const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [isConnected, setIsConnected] = useState(false);
   const dispatch = useDispatch();
+  const socket = getSocket();
 
   useEffect(() => {
+    socket.connect();
+
     socket.on("connect", () => {
       const engine = socket.io.engine;
-      console.log("Connected to socket");
       setIsConnected(true);
       engine.on("close", (reason) => {
         console.log(reason);
@@ -36,12 +39,16 @@ const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
       handleIncomingMessage(dispatch, message);
     });
     socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
+    socket.emit("typing");
     return () => {
+      socket.disconnect();
+
       socket.off("connect");
       socket.off("disconnect");
       socket.off("receive_message");
+      socket.off("typing");
     };
-  }, [dispatch]);
+  }, [dispatch, socket]);
 
   const sendMessage = (message: MessageInterface) => {
     if (isConnected) {
diff --git a/app/src/utils/socket.ts b/app/src/utils/socket.ts
index 34bfd0ca..2b3fb54c 100644
--- a/app/src/utils/socket.ts
+++ b/app/src/utils/socket.ts
@@ -1,5 +1,11 @@
-import { io } from "socket.io-client";
+import { DefaultEventsMap } from "@socket.io/component-emitter";
+import { io, Socket } from "socket.io-client";
 
-const socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`); //for testing
+let socketInstance: Socket<DefaultEventsMap, DefaultEventsMap>;
 
-export default socket;
+export const getSocket = () => {
+  if (!socketInstance) {
+    socketInstance = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {});
+  }
+  return socketInstance;
+};

From d3debc05b1b23e7e6c24a492bcb616649fc36180 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Tue, 26 Nov 2024 23:42:02 +0200
Subject: [PATCH 018/136] fix: bug fixes and adjustments (#53)

* fix: mock change to match backend

* docs: add example env instead of the deleted one

* fix: metaview port not being set on development version
---
 app/example.env                               | 19 +++++++++++
 app/index.html                                | 34 +++++++++++--------
 app/src/mocks/devices/devices.ts              |  6 ++--
 app/src/mocks/mockData.ts                     |  7 ++--
 .../profile-settings/profile-settings.ts      |  4 ++-
 5 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 app/example.env

diff --git a/app/example.env b/app/example.env
new file mode 100644
index 00000000..62290856
--- /dev/null
+++ b/app/example.env
@@ -0,0 +1,19 @@
+# NOTE: use those to run in production
+# VITE_BACKEND_API=http://localhost:3000/api/v1/
+# VITE_ENV=production
+
+# NOTE: use those to run in development (mocked backend)
+VITE_BACKEND_API=
+VITE_ENV=test
+
+# NOTE: Secrets
+VITE_REACT_APP_SITE_KEY=
+VITE_SITE_SECRET=
+VITE_GITHUB_CLIENT_ID=
+VITE_GOOGLE_CLIENT_ID=
+
+VITE_PORT=5174
+
+# NOTE: These values are changed to run in development or production with correct domains
+VITE_SOCKET_BACKEND_API=http://localhost:4000/socket-io
+VITE_BACKEND_STORGAE=https://i.pinimg.com/564x/26/76/a1/
diff --git a/app/index.html b/app/index.html
index ad6b883e..31cd858c 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,20 +1,24 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/TelWare.png" type="image/x-icon" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet"
-    />
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/TelWare.png" type="image/x-icon" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet" />
+
+  <title>Telware</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
 
-    <title>Telware</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
 </html>
diff --git a/app/src/mocks/devices/devices.ts b/app/src/mocks/devices/devices.ts
index 87107e20..c6328771 100644
--- a/app/src/mocks/devices/devices.ts
+++ b/app/src/mocks/devices/devices.ts
@@ -2,12 +2,14 @@ import { SESSIONS } from "@mocks/data/Sessions";
 import { http, HttpResponse } from "msw";
 
 export const devicesMock = [
-  http.get("/sessions", async () => {
+  http.get("/auth/sessions", async () => {
     return HttpResponse.json(
       {
         status: "success",
         message: "Sessions fetched successfully",
-        data: SESSIONS,
+        data: {
+          sessions: SESSIONS,
+        },
       },
       { status: 200 },
     );
diff --git a/app/src/mocks/mockData.ts b/app/src/mocks/mockData.ts
index 3bcd7097..930d8c09 100644
--- a/app/src/mocks/mockData.ts
+++ b/app/src/mocks/mockData.ts
@@ -1,11 +1,10 @@
 export const MOCK_USER = {
   email: "johndoe@example.com",
   password: "1234",
-  firstName: "John",
-  lastName: "Doe",
+  screenFirstName: "John",
+  screenLastName: "Doe",
   bio: "Hello, I'm John Doe",
-  photo:
-    "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
+  photo: "2676a1898da6edae9fc648c94332903f.jpg",
   username: "johndoe",
   phoneNumber: "0123456789",
   status: "Online",
diff --git a/app/src/mocks/profile-settings/profile-settings.ts b/app/src/mocks/profile-settings/profile-settings.ts
index f81d39be..acba74af 100644
--- a/app/src/mocks/profile-settings/profile-settings.ts
+++ b/app/src/mocks/profile-settings/profile-settings.ts
@@ -10,7 +10,9 @@ export const profileSettingsMock = [
     return HttpResponse.json(
       {
         status: "success",
-        data: MOCK_USER,
+        data: {
+          user: MOCK_USER,
+        },
       },
       { status: 200 }
     );

From 3828e671bb63d15f2b9632b82298a64193b4c166 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Wed, 27 Nov 2024 20:58:27 +0200
Subject: [PATCH 019/136] feat: in-chat search (gui component) (#54)

* feat: add search gui to chat topbar

* fix: scroll in profile settings (please don't change it back again)
---
 app/src/data/icons.tsx                        | 61 ++++++++++--
 app/src/features/chats/ChatBox.tsx            |  2 +-
 app/src/features/chats/Topbar.tsx             | 62 ++++++++----
 .../profile-settings/ProfileSettings.tsx      |  8 +-
 .../features/search/components/SearchBar.tsx  | 96 +++++++++++++++++++
 5 files changed, 195 insertions(+), 34 deletions(-)
 create mode 100644 app/src/features/search/components/SearchBar.tsx

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index b357c422..7afd31e6 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -26,6 +26,11 @@ import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
 import SearchIcon from "@mui/icons-material/Search";
 import AddAPhotoOutlined from "@mui/icons-material/AddAPhotoOutlined";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CircularProgress from "@mui/material/CircularProgress";
 
 enum icons {
   BlockIcon,
@@ -57,6 +62,11 @@ enum icons {
   Search,
   Delete,
   AddPhoto,
+  CalendarToday,
+  KeyboardArrowUp,
+  KeyboardArrowDown,
+  ContentCopy,
+  CircularProgress,
 }
 
 type iconStrings = keyof typeof icons;
@@ -159,8 +169,7 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
   ),
   Close: (
     <CloseOutlinedIcon
-      fontSize="large"
-      sx={{ color: `var(--color-icon-secondary)` }}
+      sx={{ color: `var(--color-icon-secondary)`, fontSize: "1.5rem" }}
     />
   ),
   Unlock: (
@@ -170,9 +179,7 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
-
   Record: <KeyboardVoiceIcon sx={{ fontSize: "1rem" }} />,
-
   Attatch: (
     <AttachFileIcon
       sx={{
@@ -192,7 +199,6 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
-
   More: (
     <MoreVertIcon
       sx={{
@@ -202,7 +208,6 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
-
   Search: (
     <SearchIcon
       sx={{
@@ -212,7 +217,6 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
-
   Call: (
     <LocalPhoneIcon
       sx={{
@@ -222,9 +226,7 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
-
   AddPhoto: <AddAPhotoOutlined fontSize="large" />,
-
   Delete: (
     <DeleteOutlineOutlinedIcon
       sx={{
@@ -232,6 +234,47 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
+  CalendarToday: (
+    <CalendarTodayIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+  ContentCopy: (
+    <ContentCopyIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+  KeyboardArrowUp: (
+    <KeyboardArrowUpIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+  KeyboardArrowDown: (
+    <KeyboardArrowDownIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+  CircularProgress: (
+    <CircularProgress
+      sx={{
+        color: `var(--accent-color)`,
+        fontSize: "1.5rem",
+      }}
+      style={{ width: "1.5rem", height: "1.5rem" }}
+    />
+  ),
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/chats/ChatBox.tsx b/app/src/features/chats/ChatBox.tsx
index 5b6d498f..8dd16417 100644
--- a/app/src/features/chats/ChatBox.tsx
+++ b/app/src/features/chats/ChatBox.tsx
@@ -1,7 +1,7 @@
 import ChatInput from "@features/chats/ChatInput";
-import Topbar from "@features/chats/Topbar";
 
 import { useCloseChat } from "@hooks/useCloseChat";
+import Topbar from "@features/chats/Topbar";
 
 function ChatBox() {
   useCloseChat();
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 79b772b1..fd812de5 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,11 +1,11 @@
+import { useState } from "react";
 import styled from "styled-components";
 
-import { getIcon } from "@data/icons";
-
 import Avatar from "@features/chats/Avatar";
-import Icon from "@components/Icon";
-
 import { useChat } from "@features/chats/hooks/useChat";
+import { getIcon } from "@data/icons";
+import Icon from "@components/Icon";
+import SearchBar from "@features/search/components/SearchBar";
 
 const Container = styled.div`
   position: absolute;
@@ -44,39 +44,61 @@ const Name = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
-
   font-weight: 500;
-
   line-height: 1.3125rem;
 `;
 
 const Icons = styled.div`
   display: flex;
   align-items: center;
-
   gap: 1.5rem;
 `;
 
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 function Topbar() {
   const { chat } = useChat();
   const { name, lastSeen, image } = chat || {};
+  const [isSearching, setIsSearching] = useState(false);
+
+  if (!chat) return null;
+
+  const toggleSearch = () => {
+    setIsSearching(!isSearching);
+  };
 
-  if (!chat) return;
+  const handleSearch = (term: string) => {};
 
   return (
     <Container>
-      <Info>
-        <Avatar image={image} name={name?.charAt(0)} />
-        <Content>
-          <Name>{name}</Name>
-          <LastSeen>last seen {lastSeen}</LastSeen>
-        </Content>
-      </Info>
-      <Icons>
-        <Icon>{getIcon("Call")}</Icon>
-        <Icon>{getIcon("Search")}</Icon>
-        <Icon>{getIcon("More")}</Icon>
-      </Icons>
+      <Avatar image={image} name={name?.charAt(0)} />
+      {isSearching ? (
+        <SearchBar onClose={toggleSearch} onSearch={handleSearch} />
+      ) : (
+        <>
+          <Info>
+            <Content>
+              <Name>{name}</Name>
+              <LastSeen>last seen {lastSeen}</LastSeen>
+            </Content>
+          </Info>
+          <Icons>
+            <Icon>{getIcon("Call")}</Icon>
+            <IconButton onClick={toggleSearch}>{getIcon("Search")}</IconButton>
+            <Icon>{getIcon("More")}</Icon>
+          </Icons>
+        </>
+      )}
+      {isSearching && <IconButton>{getIcon("CalendarToday")}</IconButton>}
     </Container>
   );
 }
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 09f1672d..9bdd21d4 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -30,7 +30,7 @@ const SideBarContainer = styled.div`
     flex-direction: column;
     gap: 1rem;
     width: 100%;
-    min-height: 100dvh;
+    height: 90vh;
     background-color: var(--color-background-secondary);
   }
 `;
@@ -217,7 +217,7 @@ function ProfileSettings() {
   const userHandle = `https://telware.tech/${watch("username") || "username"}`;
 
   const handleImageUpload = async (
-    event: React.ChangeEvent<HTMLInputElement>
+    event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     if (event.target.files) {
       setPhotoChanged(true);
@@ -249,12 +249,12 @@ function ProfileSettings() {
           updateSideBarView({
             redirect: sideBarPages.SETTINGS,
             data: undefined,
-          })
+          }),
         );
       }
     } catch (error) {
       toast.error(
-        (error as Error).message || "Failed to update profile settings"
+        (error as Error).message || "Failed to update profile settings",
       );
     }
   };
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
new file mode 100644
index 00000000..9ff9d298
--- /dev/null
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -0,0 +1,96 @@
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import Icon from "@components/Icon";
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  border-radius: 20px;
+  padding: 5px 10px;
+  background-color: var(--color-background-secondary);
+  box-shadow: 0 0 0.625rem 0 var(--color-default-shadow);
+
+  &:focus-within {
+    border: 1px solid var(--color-search-border);
+  }
+`;
+
+const SearchInput = styled.input`
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: var(--color-text);
+  flex: 1;
+  font-size: 14px;
+  margin-left: 1rem;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+`;
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const SuggestionButtons = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+interface SearchBarProps {
+  onClose: () => void;
+  onSearch: (term: string) => void;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ onClose, onSearch }) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isSearchLoading, setIsSearchLoading] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (searchTerm) {
+        onSearch(searchTerm);
+        setIsSearchLoading(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm, onSearch]);
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    setIsSearchLoading(true);
+  };
+
+  return (
+    <SearchContainer>
+      <Icon>
+        {isSearchLoading ? getIcon("CircularProgress") : getIcon("Search")}
+      </Icon>
+      <SearchInput
+        type="text"
+        placeholder="Search..."
+        value={searchTerm}
+        onChange={handleSearch}
+      />
+      <SuggestionButtons>
+        <IconButton>{getIcon("KeyboardArrowUp")}</IconButton>
+        <IconButton>{getIcon("KeyboardArrowDown")}</IconButton>
+      </SuggestionButtons>
+      <IconButton onClick={onClose}>{getIcon("Close")}</IconButton>
+    </SearchContainer>
+  );
+};
+
+export default SearchBar;

From ec92697c6343411c3839a850d8ca533e47885985 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Wed, 27 Nov 2024 22:52:47 +0200
Subject: [PATCH 020/136] fix: fix env vars not being loaded in tests (#55)

* fix: env vars not being loaded in tests

* fix: logout other sessions mock
---
 app/babel.config.cjs                          |   1 +
 app/jest.config.ts                            |   2 +-
 app/jest.setup.ts                             |   4 +
 app/package-lock.json                         | 429 ++++++++++++++++++
 app/package.json                              |   2 +
 app/src/constants.ts                          |   1 +
 .../devices/services/GetCurrentSession.ts     |  10 +-
 app/src/mocks/devices/devices.ts              |  12 +
 app/src/mocks/userauth/logout.ts              |  12 +-
 9 files changed, 464 insertions(+), 9 deletions(-)

diff --git a/app/babel.config.cjs b/app/babel.config.cjs
index dd0eb7da..2e2196ed 100644
--- a/app/babel.config.cjs
+++ b/app/babel.config.cjs
@@ -15,6 +15,7 @@ module.exports = {
     ["@babel/preset-env", { targets: { esmodules: true } }],
     ["@babel/preset-react", { runtime: "automatic" }],
     "@babel/preset-typescript",
+    ["babel-preset-vite"],
   ],
   plugins: [
     [
diff --git a/app/jest.config.ts b/app/jest.config.ts
index ef3bdb3b..c6e303ef 100644
--- a/app/jest.config.ts
+++ b/app/jest.config.ts
@@ -32,7 +32,7 @@ module.exports = {
     "jest.setup.ts",
     "index.tsx",
   ],
-  setupFiles: ["./jest.polyfills.ts"],
+  setupFiles: ["dotenv/config", "./jest.polyfills.ts"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   testEnvironmentOptions: {
     customExportConditions: [""],
diff --git a/app/jest.setup.ts b/app/jest.setup.ts
index d0de870d..dedc4d09 100644
--- a/app/jest.setup.ts
+++ b/app/jest.setup.ts
@@ -1 +1,5 @@
 import "@testing-library/jest-dom";
+
+import dotenv from "dotenv";
+
+dotenv.config({ path: ".env" });
diff --git a/app/package-lock.json b/app/package-lock.json
index 30eabe16..c2b64ccd 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -27,6 +27,7 @@
         "react-international-phone": "^4.3.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
+        "socket.io-client": "^4.8.1",
         "styled-components": "^6.1.13",
         "yup": "^1.4.0"
       },
@@ -48,6 +49,8 @@
         "@vitejs/plugin-react": "^4.3.2",
         "babel-jest": "^29.7.0",
         "babel-plugin-module-resolver": "^5.0.2",
+        "babel-preset-vite": "^1.1.3",
+        "dotenv": "^16.4.5",
         "eslint": "^9.11.1",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.12",
@@ -2970,6 +2973,109 @@
         "@types/node": ">=18"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -3728,6 +3834,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -4090,6 +4207,12 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@styled/typescript-styled-plugin": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@styled/typescript-styled-plugin/-/typescript-styled-plugin-1.0.1.tgz",
@@ -5228,6 +5351,97 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-plugin-transform-vite-meta-env": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-vite-meta-env/-/babel-plugin-transform-vite-meta-env-1.0.3.tgz",
+      "integrity": "sha512-eyfuDEXrMu667TQpmctHeTlJrZA6jXYHyEJFjcM0yEa60LS/LXlOg2PBbMb8DVS+V9CnTj/j9itdlDVMcY2zEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-vite-meta-glob/-/babel-plugin-transform-vite-meta-glob-1.1.2.tgz",
+      "integrity": "sha512-o984FUo++WYnfgUaC8ymzmNPng5Kda5A6j6PFC0uOqhFXlAsD6mNhEBhaNzbUGfq/aPcyeGo67fYXlg20rh9aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12",
+        "glob": "^10.3.10"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-glob/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/babel-plugin-transform-vite-meta-hot": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-vite-meta-hot/-/babel-plugin-transform-vite-meta-hot-1.0.0.tgz",
+      "integrity": "sha512-qF7T46bDG5UPPOfy4MFgQJyd3mZvm1sGOR2gZ4lIHy6DEcxAVTIt39/adAn89il44CvwestshuEybKPMR+L/Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12"
+      }
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
@@ -5272,6 +5486,20 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/babel-preset-vite": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/babel-preset-vite/-/babel-preset-vite-1.1.3.tgz",
+      "integrity": "sha512-xSt/EiezzeMd4RI2hjMCNyn/FGzGeroKODPMAUTsgpeHC4dFf2qiCQfyNuiNzn1OwoF4n+NYSsORhUN5G/2KTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.9",
+        "@types/babel__core": "^7.1.12",
+        "babel-plugin-transform-vite-meta-env": "1.0.3",
+        "babel-plugin-transform-vite-meta-glob": "1.1.2",
+        "babel-plugin-transform-vite-meta-hot": "1.0.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5878,6 +6106,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -5938,6 +6186,49 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.2.tgz",
+      "integrity": "sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -6526,6 +6817,36 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
@@ -7170,6 +7491,22 @@
         "react": ">=18.0"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -8825,6 +9162,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9922,6 +10266,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -10037,6 +10409,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -10050,6 +10438,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -10972,6 +11374,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -11032,6 +11453,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/app/package.json b/app/package.json
index cb7cb8b8..b4ed2c31 100644
--- a/app/package.json
+++ b/app/package.json
@@ -55,6 +55,8 @@
     "@vitejs/plugin-react": "^4.3.2",
     "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
+    "babel-preset-vite": "^1.1.3",
+    "dotenv": "^16.4.5",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
diff --git a/app/src/constants.ts b/app/src/constants.ts
index 8dc333b2..b5134a8e 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -6,6 +6,7 @@ const {
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
 } = import.meta.env;
+
 const MOBILE_VIEW = "(max-width: 600px)";
 
 export {
diff --git a/app/src/features/devices/services/GetCurrentSession.ts b/app/src/features/devices/services/GetCurrentSession.ts
index 78df9dd6..cf12e43d 100644
--- a/app/src/features/devices/services/GetCurrentSession.ts
+++ b/app/src/features/devices/services/GetCurrentSession.ts
@@ -2,7 +2,7 @@ import { API_URL } from "@constants";
 import { Session } from "../types/sessions";
 
 async function GetCurrentSession(): Promise<Session> {
-  const res = await fetch(`${API_URL}/auth/sessions`, {
+  const res = await fetch(`${API_URL}/auth/me`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -12,13 +12,9 @@ async function GetCurrentSession(): Promise<Session> {
 
   const data = await res.json();
 
-  if (res.status !== 200) {
-    throw new Error(data.message);
-  }
+  const session = data.data as Session;
 
-  const sessions = data.data?.sessions;
-
-  return sessions[0];
+  return session;
 }
 
 export { GetCurrentSession };
diff --git a/app/src/mocks/devices/devices.ts b/app/src/mocks/devices/devices.ts
index c6328771..9e5d7989 100644
--- a/app/src/mocks/devices/devices.ts
+++ b/app/src/mocks/devices/devices.ts
@@ -14,4 +14,16 @@ export const devicesMock = [
       { status: 200 },
     );
   }),
+  http.post("/auth/logout/others", async () => {
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "Other sessions logged out successfully",
+        data: {
+          sessions: [],
+        },
+      },
+      { status: 200 },
+    );
+  }),
 ];
diff --git a/app/src/mocks/userauth/logout.ts b/app/src/mocks/userauth/logout.ts
index ef909042..e48862c4 100644
--- a/app/src/mocks/userauth/logout.ts
+++ b/app/src/mocks/userauth/logout.ts
@@ -1,5 +1,6 @@
 import { http, HttpResponse } from "msw";
 import { TOKEN } from "@mocks/mockData";
+import { SESSIONS } from "@mocks/data/Sessions";
 
 export const logoutMock = [
   http.get("/auth/me", ({ cookies }) => {
@@ -7,7 +8,16 @@ export const logoutMock = [
       return new HttpResponse(null, { status: 403 });
     }
 
-    return new HttpResponse(null, { status: 201 });
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "Session fetched successfully",
+        data: {
+          ...SESSIONS[0],
+        },
+      },
+      { status: 201 },
+    );
   }),
 
   http.post("/auth/logout", async () => {

From f9c8cc050979f51ca743ecb6b092b745416e7348 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Thu, 28 Nov 2024 18:22:15 +0200
Subject: [PATCH 021/136] Chats (#57)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Release v1.0.0 (#49)

* fix(ops): backend integration with cors and cookies (#33)

* 🐛 (Login): fix bugs (#32)

* 🐛 Fix data-testid overriding

* 🐛 Fix resetting the form after submit

* 🐛 Consistent error messages in password & email fields

* 🐛 Resetting email & pass in case of a successful login

* 🐛 Added api-url to requests' endpoints

* 🔇 Removed logs

* :bug: (privacy-settings): fixing bugs (#34)

* :bug: (sidebar): adding data-testid in row items

* :bug: (sidebar): fixing responsiveness

* :recycle: (sidebar-row): refactoring key element & data-testid

* fix(profile-settings): fix integration with backend (#35)

* (fix) integration with backend signup (#36)

* fix captcha and confirm password

* bug fixes on sign up

* fix signup integration

* requested changess

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* fix confirm email and reset password (#37)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* :recycle: applying factory design pattern + integration with BE (#38)

* :recycle: add getKey function (#40)

* Feature/update profile picture (mock) (#39)

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

* ✨ (feat

(feat): add profile picture mock

* 🐛 Fix(update-profile-picture): fix the blob

fix(update-profile-picture): fix the blob

* 💄 Feat: StoryIcon UI

Feat: StoryIcon UI

* 🐛 Fix(sidebar): fix the searchbar responsiveness

fix(sidebar): fix the searchbar responsiveness

* 📱 Fix(sidebar): make sidebar responsive

fix(sidebar): make sidebar responsive

* 🐛 Fix(user): fix importing privacy states

fix(user): fix importing privacy states

* 🎉(oauth): Integrated with backend (#42)

* 💄 (messaging): Added chats layout (No messages)

* 🐛 (protecting routes): Fix not navigating to chat

* ♻️ (protected routes): Refacored protecting routes

* ♻️ (chats): Refactored chats

* ♻️ (aouth): Refactored aouth depending on backend changes

* 🐛 (oauth): Fix request type in google oauth

* 🎉 (oauth): Integrated with backend

* (CI) Added a github action to trigger jenkins pipelines (#43)

* :sparkles: (block): view block list +  add/remove users from block list (#44)

* :sparkles: (privacy-settings): View block list finished

* :sparkles: (block): add/remove user from block list

* :lipstick: (block):  adding scrollbar styling

* :twisted_rightwards_arrows: Merging dev

* :bug: fixing merging bugs

* feat(devices): devices and session management + add animations (#46)

* chore: resolve dev conflicts

* feat(devices): logout other sessions

* socket and messages infrastructure setup (#45)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* Add nginx configuration (#47)

* :bug: (block): adding data-testid prop (#48)

---------

Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

* (hot fix) add packages json of socket-io client (#50)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* hotfix: fix responsive not working missing meta viewport width (#51)

* 💄 (messaging): Added chat layout

* ✨ (messages): Send messages by sockets (only one user yet)

* 🔀 Merging with dev

---------

Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>
---
 app/package-lock.json                         | 766 +++++++++---------
 app/package.json                              |   2 +
 app/public/mockServiceWorker.js               |  18 +-
 app/socket-server/index.js                    |  14 +-
 app/socket-server/package-lock.json           | 344 ++++++++
 app/socket-server/package.json                |   1 +
 app/src/components/CircleIcon.tsx             |   4 +
 app/src/components/ExpandingTextArea.tsx      |  11 +-
 app/src/components/Main.tsx                   |  14 +
 app/src/data/icons.tsx                        |   4 +
 .../authentication/login/hooks/useLogin.ts    |   4 +
 .../authentication/login/hooks/useUser.ts     |  13 +
 app/src/features/chats/ChatBody.tsx           |  51 ++
 app/src/features/chats/ChatBox.tsx            |  19 +-
 app/src/features/chats/ChatInput.tsx          |  59 +-
 app/src/features/chats/Message.tsx            |  55 ++
 app/src/features/chats/SendButton.tsx         |  21 +
 app/src/features/chats/Topbar.tsx             |   9 +-
 app/src/features/chats/hooks/useChats.ts      |   2 +-
 .../chats/hooks/useScrollToLastMsg.tsx        |  17 +
 app/src/mocks/data/messages.ts                | 206 +++++
 app/src/mocks/{mockData.ts => data/users.ts}  |  20 +-
 app/src/mocks/oauth/oauth.ts                  |   6 +-
 .../profile-settings/profile-settings.ts      |   4 +-
 app/src/mocks/stories/stories.ts              |   3 +-
 app/src/mocks/userauth/login.ts               |  14 +-
 app/src/mocks/userauth/logout.ts              |   2 +-
 app/src/sockets/SocketProvider.tsx            |  31 +-
 app/src/state/messages/messages.ts            |   3 +-
 app/src/state/user/user.ts                    |  12 +-
 app/src/types/messages.ts                     |   5 +-
 app/src/types/user.ts                         |   1 +
 package-lock.json                             | 255 ++++++
 33 files changed, 1549 insertions(+), 441 deletions(-)
 create mode 100644 app/src/features/authentication/login/hooks/useUser.ts
 create mode 100644 app/src/features/chats/ChatBody.tsx
 create mode 100644 app/src/features/chats/Message.tsx
 create mode 100644 app/src/features/chats/SendButton.tsx
 create mode 100644 app/src/features/chats/hooks/useScrollToLastMsg.tsx
 create mode 100644 app/src/mocks/data/messages.ts
 rename app/src/mocks/{mockData.ts => data/users.ts} (97%)
 create mode 100644 package-lock.json

diff --git a/app/package-lock.json b/app/package-lock.json
index c2b64ccd..3caf468d 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -17,6 +17,7 @@
         "@tanstack/react-query": "^5.59.13",
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
+        "date-fns": "^4.1.0",
         "lottie-react": "^2.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -27,6 +28,7 @@
         "react-international-phone": "^4.3.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
+        "socket-client": "^1.0.0",
         "socket.io-client": "^4.8.1",
         "styled-components": "^6.1.13",
         "yup": "^1.4.0"
@@ -74,9 +76,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
-      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.1.tgz",
+      "integrity": "sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -250,9 +252,9 @@
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
-      "integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
+      "integrity": "sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2105,16 +2107,16 @@
       "license": "MIT"
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
-      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.2.0",
+        "@emotion/serialize": "^1.3.3",
         "babel-plugin-macros": "^3.1.0",
         "convert-source-map": "^1.5.0",
         "escape-string-regexp": "^4.0.0",
@@ -2130,14 +2132,14 @@
       "license": "MIT"
     },
     "node_modules/@emotion/cache": {
-      "version": "11.13.1",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
-      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz",
+      "integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==",
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0",
         "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "stylis": "4.2.0"
       }
@@ -2164,17 +2166,17 @@
       "license": "MIT"
     },
     "node_modules/@emotion/react": {
-      "version": "11.13.3",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
-      "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.5.tgz",
+      "integrity": "sha512-6zeCUxUH+EPF1s+YF/2hPVODeV/7V07YU5x+2tfuRL8MdW6rv5vb2+CBEGTGwBdux0OIERcOS+RzxeK80k2DsQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
-        "@emotion/cache": "^11.13.0",
-        "@emotion/serialize": "^1.3.1",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-        "@emotion/utils": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
         "@emotion/weak-memoize": "^0.4.0",
         "hoist-non-react-statics": "^3.3.1"
       },
@@ -2188,15 +2190,15 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
-      "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
       "license": "MIT",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
         "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.1",
+        "@emotion/utils": "^1.4.2",
         "csstype": "^3.0.2"
       }
     },
@@ -2207,17 +2209,17 @@
       "license": "MIT"
     },
     "node_modules/@emotion/styled": {
-      "version": "11.13.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
-      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.5.tgz",
+      "integrity": "sha512-gnOQ+nGLPvDXgIx119JqGalys64lhMdnNQA9TMxhDA4K0Hq5+++OE20Zs5GxiCV9r814xQ2K5WmtofSpHVW6BQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/babel-plugin": "^11.13.5",
         "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
-        "@emotion/utils": "^1.4.0"
+        "@emotion/utils": "^1.4.2"
       },
       "peerDependencies": {
         "@emotion/react": "^11.0.0-rc.0",
@@ -2245,9 +2247,9 @@
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz",
-      "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
       "license": "MIT"
     },
     "node_modules/@emotion/weak-memoize": {
@@ -2690,9 +2692,9 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
-      "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.0.tgz",
+      "integrity": "sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -2705,9 +2707,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
-      "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.0.tgz",
+      "integrity": "sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -2715,9 +2717,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
-      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2772,9 +2774,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
-      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2792,9 +2794,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
-      "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -2900,14 +2902,14 @@
       }
     },
     "node_modules/@inquirer/confirm": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.1.tgz",
-      "integrity": "sha512-6ycMm7k7NUApiMGfVc32yIPp28iPKxhGRMqoNDiUjq2RyTAkbs5Fx0TdzBqhabcKvniDdAAvHCmsRjnNfTsogw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.0.2.tgz",
+      "integrity": "sha512-KJLUHOaKnNCYzwVbryj3TNBxyZIrr56fR5N45v6K9IPrbT6B7DcudBMfylkV1A8PUdJE15mybkEQyp2/ZUpxUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/core": "^10.0.1",
-        "@inquirer/type": "^3.0.0"
+        "@inquirer/core": "^10.1.0",
+        "@inquirer/type": "^3.0.1"
       },
       "engines": {
         "node": ">=18"
@@ -2917,14 +2919,14 @@
       }
     },
     "node_modules/@inquirer/core": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.0.1.tgz",
-      "integrity": "sha512-KKTgjViBQUi3AAssqjUFMnMO3CM3qwCHvePV9EW+zTKGKafFGFF01sc1yOIYjLJ7QU52G/FbzKc+c01WLzXmVQ==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-I+ETk2AL+yAVbvuKx5AJpQmoaWhpiTFOg/UJb7ZkMAK4blmtG8ATh5ct+T/8xNld0CZG/2UhtkdMwpgvld92XQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/figures": "^1.0.7",
-        "@inquirer/type": "^3.0.0",
+        "@inquirer/figures": "^1.0.8",
+        "@inquirer/type": "^3.0.1",
         "ansi-escapes": "^4.3.2",
         "cli-width": "^4.1.0",
         "mute-stream": "^2.0.0",
@@ -2951,9 +2953,9 @@
       }
     },
     "node_modules/@inquirer/figures": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.7.tgz",
-      "integrity": "sha512-m+Trk77mp54Zma6xLkLuY+mvanPxlE4A7yNKs2HBiyZ4UkVs28Mv5c/pgWrHeInx+USHeX/WEPzjrWrcJiQgjw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.8.tgz",
+      "integrity": "sha512-tKd+jsmhq21AP1LhexC0pPwsCxEhGgAkg28byjJAd+xhmIs8LUX8JbUc3vBf3PhLxWiB5EvyBE5X7JSPAqMAqg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2961,9 +2963,9 @@
       }
     },
     "node_modules/@inquirer/type": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.0.tgz",
-      "integrity": "sha512-YYykfbw/lefC7yKj7nanzQXILM7r3suIvyFlCcMskc99axmsSewXWkAfXKwMbgxL76iAFVmRwmYdwNZNc8gjog==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.1.tgz",
+      "integrity": "sha512-+ksJMIy92sOAiAccGpcKZUc3bYO07cADnscIxHBknEm3uNts3movSmBofc1908BNy5edKscxYeAdaX1NXkHS6A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3524,9 +3526,9 @@
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.36.9",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.36.9.tgz",
-      "integrity": "sha512-mMRDUBwSNeCgjSMEWfjoh4Rm9fbyZ7xQ9SBq8eGHiiyRn1ieTip3pNEt0wxWVPPxR4i1Rv9bTkeEbkX7M4c15A==",
+      "version": "0.37.1",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.1.tgz",
+      "integrity": "sha512-SvE+tSpcX884RJrPCskXxoS965Ky/pYABDEhWW6oeSRhpUDLrS5nTvT5n1LLSDVDYvty4imVmXsy+3/ROVuknA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3542,9 +3544,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
-      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.9.tgz",
+      "integrity": "sha512-TWqj7b1w5cmSz4H/uf+y2AHxAH4ldPR7D2bz0XVyn60GCAo/zRbRPx7cF8gTs/i7CiYeHzV6dtat0VpMwOtolw==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3552,9 +3554,9 @@
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
-      "integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.9.tgz",
+      "integrity": "sha512-AzlhIT51rdjkZ/EcUV2dbhNkNSUHIqCnNoUxodpiTw8buyAUBd+qnxg5OBSuPpun/ZEdSSB8Q7Uyh6zqjiMsEQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0"
@@ -3567,7 +3569,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.1.6",
+        "@mui/material": "^6.1.9",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3578,16 +3580,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
-      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.9.tgz",
+      "integrity": "sha512-NwqIN0bdsgzSbZd5JFcC+2ez0XW/XNs8uiV2PDHrqQ4qf/FEasFJG1z6g8JbCN0YlTrHZekVb17X0Fv0qcYJfQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.1.6",
-        "@mui/system": "^6.1.6",
+        "@mui/core-downloads-tracker": "^6.1.9",
+        "@mui/system": "^6.1.9",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.9",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -3606,7 +3608,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.6",
+        "@mui/material-pigment-css": "^6.1.9",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3627,13 +3629,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
-      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.9.tgz",
+      "integrity": "sha512-7aum/O1RquBYhfwL/7egDyl9GqJgPM6hoJDFFBbhF6Sgv9yI9v4w3ArKUkuVvR0CtVj4NXRVMKEioh1bjUzvuA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.9",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3654,14 +3656,14 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
-      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.9.tgz",
+      "integrity": "sha512-xynSLlJRxHLzSfQaiDjkaTx8LiFb9ByVa7aOdwFnTxGWFMY1F+mkXwAUY4jDDE+MAxkWxlzzQE0wOohnsxhdQg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@emotion/cache": "^11.13.1",
-        "@emotion/serialize": "^1.3.2",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3688,16 +3690,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
-      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.9.tgz",
+      "integrity": "sha512-8x+RucnNp21gfFYsklCaZf0COXbv3+v0lrVuXONxvPEkESi2rwLlOi8UPJfcz6LxZOAX3v3oQ7qw18vnpgueRg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.1.6",
-        "@mui/styled-engine": "^6.1.6",
+        "@mui/private-theming": "^6.1.9",
+        "@mui/styled-engine": "^6.1.9",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.9",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -3742,9 +3744,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
-      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.9.tgz",
+      "integrity": "sha512-N7uzBp7p2or+xanXn3aH2OTINC6F/Ru/U8h6amhRZEev8bJhKN86rIDIoxZZ902tj+09LXtH83iLxFMjMHyqNA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
@@ -3881,18 +3883,18 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
-      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
-      "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.27.4.tgz",
+      "integrity": "sha512-2Y3JT6f5MrQkICUyRVCw4oa0sutfAsgaSsb0Lmmy1Wi2y7X5vT9Euqw4gOsCyy0YfKURBg35nhUKZS4mDcfULw==",
       "cpu": [
         "arm"
       ],
@@ -3904,9 +3906,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz",
-      "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.27.4.tgz",
+      "integrity": "sha512-wzKRQXISyi9UdCVRqEd0H4cMpzvHYt1f/C3CoIjES6cG++RHKhrBj2+29nPF0IB5kpy9MS71vs07fvrNGAl/iA==",
       "cpu": [
         "arm64"
       ],
@@ -3918,9 +3920,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz",
-      "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.4.tgz",
+      "integrity": "sha512-PlNiRQapift4LNS8DPUHuDX/IdXiLjf8mc5vdEmUR0fF/pyy2qWwzdLjB+iZquGr8LuN4LnUoSEvKRwjSVYz3Q==",
       "cpu": [
         "arm64"
       ],
@@ -3932,9 +3934,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz",
-      "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.27.4.tgz",
+      "integrity": "sha512-o9bH2dbdgBDJaXWJCDTNDYa171ACUdzpxSZt+u/AAeQ20Nk5x+IhA+zsGmrQtpkLiumRJEYef68gcpn2ooXhSQ==",
       "cpu": [
         "x64"
       ],
@@ -3946,9 +3948,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz",
-      "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.27.4.tgz",
+      "integrity": "sha512-NBI2/i2hT9Q+HySSHTBh52da7isru4aAAo6qC3I7QFVsuhxi2gM8t/EI9EVcILiHLj1vfi+VGGPaLOUENn7pmw==",
       "cpu": [
         "arm64"
       ],
@@ -3960,9 +3962,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz",
-      "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.27.4.tgz",
+      "integrity": "sha512-wYcC5ycW2zvqtDYrE7deary2P2UFmSh85PUpAx+dwTCO9uw3sgzD6Gv9n5X4vLaQKsrfTSZZ7Z7uynQozPVvWA==",
       "cpu": [
         "x64"
       ],
@@ -3974,9 +3976,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz",
-      "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.27.4.tgz",
+      "integrity": "sha512-9OwUnK/xKw6DyRlgx8UizeqRFOfi9mf5TYCw1uolDaJSbUmBxP85DE6T4ouCMoN6pXw8ZoTeZCSEfSaYo+/s1w==",
       "cpu": [
         "arm"
       ],
@@ -3988,9 +3990,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz",
-      "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.27.4.tgz",
+      "integrity": "sha512-Vgdo4fpuphS9V24WOV+KwkCVJ72u7idTgQaBoLRD0UxBAWTF9GWurJO9YD9yh00BzbkhpeXtm6na+MvJU7Z73A==",
       "cpu": [
         "arm"
       ],
@@ -4002,9 +4004,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz",
-      "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.27.4.tgz",
+      "integrity": "sha512-pleyNgyd1kkBkw2kOqlBx+0atfIIkkExOTiifoODo6qKDSpnc6WzUY5RhHdmTdIJXBdSnh6JknnYTtmQyobrVg==",
       "cpu": [
         "arm64"
       ],
@@ -4016,9 +4018,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz",
-      "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.27.4.tgz",
+      "integrity": "sha512-caluiUXvUuVyCHr5DxL8ohaaFFzPGmgmMvwmqAITMpV/Q+tPoaHZ/PWa3t8B2WyoRcIIuu1hkaW5KkeTDNSnMA==",
       "cpu": [
         "arm64"
       ],
@@ -4030,9 +4032,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz",
-      "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.27.4.tgz",
+      "integrity": "sha512-FScrpHrO60hARyHh7s1zHE97u0KlT/RECzCKAdmI+LEoC1eDh/RDji9JgFqyO+wPDb86Oa/sXkily1+oi4FzJQ==",
       "cpu": [
         "ppc64"
       ],
@@ -4044,9 +4046,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz",
-      "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.27.4.tgz",
+      "integrity": "sha512-qyyprhyGb7+RBfMPeww9FlHwKkCXdKHeGgSqmIXw9VSUtvyFZ6WZRtnxgbuz76FK7LyoN8t/eINRbPUcvXB5fw==",
       "cpu": [
         "riscv64"
       ],
@@ -4058,9 +4060,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz",
-      "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.27.4.tgz",
+      "integrity": "sha512-PFz+y2kb6tbh7m3A7nA9++eInGcDVZUACulf/KzDtovvdTizHpZaJty7Gp0lFwSQcrnebHOqxF1MaKZd7psVRg==",
       "cpu": [
         "s390x"
       ],
@@ -4072,9 +4074,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz",
-      "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.4.tgz",
+      "integrity": "sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==",
       "cpu": [
         "x64"
       ],
@@ -4086,9 +4088,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz",
-      "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.27.4.tgz",
+      "integrity": "sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==",
       "cpu": [
         "x64"
       ],
@@ -4100,9 +4102,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz",
-      "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.27.4.tgz",
+      "integrity": "sha512-yOpVsA4K5qVwu2CaS3hHxluWIK5HQTjNV4tWjQXluMiiiu4pJj4BN98CvxohNCpcjMeTXk/ZMJBRbgRg8HBB6A==",
       "cpu": [
         "arm64"
       ],
@@ -4114,9 +4116,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz",
-      "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.27.4.tgz",
+      "integrity": "sha512-KtwEJOaHAVJlxV92rNYiG9JQwQAdhBlrjNRp7P9L8Cb4Rer3in+0A+IPhJC9y68WAi9H0sX4AiG2NTsVlmqJeQ==",
       "cpu": [
         "ia32"
       ],
@@ -4128,9 +4130,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz",
-      "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.27.4.tgz",
+      "integrity": "sha512-3j4jx1TppORdTAoBJRd+/wJRGCPC0ETWkXOecJ6PPZLj6SptXkrXcNqdj0oclbKML6FkQltdz7bBA3rUSirZug==",
       "cpu": [
         "x64"
       ],
@@ -4228,9 +4230,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.17",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.17.tgz",
-      "integrity": "sha512-jWdDiif8kaqnRGHNXAa9CnudtxY5v9DUxXhodgqX2Rwzj+1UwStDHEbBd9IA5C7VYAaJ2s+BxFR6PUBs8ERorA==",
+      "version": "5.61.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.61.5.tgz",
+      "integrity": "sha512-iG5vqurEOEbv+paP6kW3zPENa99kSIrd1THISJMaTwVlJ+N5yjVDNOUwp9McK2DWqWCXM3v13ubBbAyhxT78UQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4238,9 +4240,9 @@
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.59.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.59.19.tgz",
-      "integrity": "sha512-Gw+3zsADpqiYgx/6MMr9bP1+x2LR8vOuGjo5Un/89qwwP3z7WAHPWFagLFDYkLq68NX7ekUpW/EOYlUMugMXGA==",
+      "version": "5.61.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.61.4.tgz",
+      "integrity": "sha512-21Tw+u8E3IJJj4A/Bct4H0uBaDTEu7zBrR79FeSyY+mS2gx5/m316oDtJiKkILc819VSTYt+sFzODoJNcpPqZQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4248,12 +4250,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.59.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.19.tgz",
-      "integrity": "sha512-xLRfyFyQOFcLltKCds0LijfC6/HQJrrTTnZB8ciyn74LIkVAm++vZJ6eUVG20RmJtdP8REdy7vSOYW4M3//XLA==",
+      "version": "5.61.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.61.5.tgz",
+      "integrity": "sha512-rjy8aqPgBBEz/rjJnpnuhi8TVkVTorMUsJlM3lMvrRb5wK6yzfk34Er0fnJ7w/4qyF01SnXsLB/QsTBsLF5PaQ==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.59.17"
+        "@tanstack/query-core": "5.61.5"
       },
       "funding": {
         "type": "github",
@@ -4264,19 +4266,19 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.59.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.59.19.tgz",
-      "integrity": "sha512-mYFWTHLtJr2HdyYPZPzzvQ2ksCsSL6L04fCtusPFD3waskXrtmvWvyuDIGeEGdVAYS0Urwxw/0sYvcTVQZH+zQ==",
+      "version": "5.61.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.61.5.tgz",
+      "integrity": "sha512-P2DwlKyoGar6FX2XL324gM7AX8fuXm6DecLvfUoGpWbxtbuAtfzglRiCDLKkc5tJ7pekuaZsFFas/cyfTymoCQ==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-devtools": "5.59.19"
+        "@tanstack/query-devtools": "5.61.4"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.59.19",
+        "@tanstack/react-query": "^5.61.5",
         "react": "^18 || ^19"
       }
     },
@@ -4614,13 +4616,13 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.9.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
-      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.8"
+        "undici-types": "~6.20.0"
       }
     },
     "node_modules/@types/parse-json": {
@@ -4683,9 +4685,9 @@
       }
     },
     "node_modules/@types/redux-mock-store": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/redux-mock-store/-/redux-mock-store-1.0.6.tgz",
-      "integrity": "sha512-eg5RDfhJTXuoJjOMyXiJbaDb1B8tfTaJixscmu+jOusj6adGC0Krntz09Tf4gJgXeCqCrM5bBMd+B7ez0izcAQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/redux-mock-store/-/redux-mock-store-1.5.0.tgz",
+      "integrity": "sha512-jcscBazm6j05Hs6xYCca6psTUBbFT2wqMxT7wZEHAYFxHB/I8jYk7d5msrHUlDiSL02HdTqTmkK2oIV8i3C8DA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4754,17 +4756,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.13.0.tgz",
-      "integrity": "sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.16.0.tgz",
+      "integrity": "sha512-5YTHKV8MYlyMI6BaEG7crQ9BhSc8RxzshOReKwZwRWN0+XvvTOm+L/UYLCYxFpfwYuAAqhxiq4yae0CMFwbL7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.13.0",
-        "@typescript-eslint/type-utils": "8.13.0",
-        "@typescript-eslint/utils": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/type-utils": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -4788,16 +4790,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.13.0.tgz",
-      "integrity": "sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.16.0.tgz",
+      "integrity": "sha512-D7DbgGFtsqIPIFMPJwCad9Gfi/hC0PWErRRHFnaCWoEDYi5tQUDiJCTmGUbBiLzjqAck4KcXt9Ayj0CNlIrF+w==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.13.0",
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/typescript-estree": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0",
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4817,14 +4819,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz",
-      "integrity": "sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.16.0.tgz",
+      "integrity": "sha512-mwsZWubQvBki2t5565uxF0EYvG+FwdFb8bMtDuGQLdCCnGPrDEDvm1gtfynuKlnpzeBRqdFCkMf9jg1fnAK8sg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0"
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4835,14 +4837,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.13.0.tgz",
-      "integrity": "sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.16.0.tgz",
+      "integrity": "sha512-IqZHGG+g1XCWX9NyqnI/0CX5LL8/18awQqmkZSl2ynn8F76j579dByc0jhfVSnSnhf7zv76mKBQv9HQFKvDCgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.13.0",
-        "@typescript-eslint/utils": "8.13.0",
+        "@typescript-eslint/typescript-estree": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -4853,6 +4855,9 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
@@ -4860,9 +4865,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.13.0.tgz",
-      "integrity": "sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.16.0.tgz",
+      "integrity": "sha512-NzrHj6thBAOSE4d9bsuRNMvk+BvaQvmY4dDglgkgGC0EW/tB3Kelnp3tAKH87GEwzoxgeQn9fNGRyFJM/xd+GQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4874,14 +4879,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz",
-      "integrity": "sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.16.0.tgz",
+      "integrity": "sha512-E2+9IzzXMc1iaBy9zmo+UYvluE3TW7bCGWSF41hVWUE01o8nzr1rvOQYSxelxr6StUvRcTMe633eY8mXASMaNw==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/visitor-keys": "8.13.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/visitor-keys": "8.16.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -4942,16 +4947,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.13.0.tgz",
-      "integrity": "sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.16.0.tgz",
+      "integrity": "sha512-C1zRy/mOL8Pj157GiX4kaw7iyRLKfJXBR3L82hk5kS/GyHcOFmy4YUq/zfZti72I9wnuQtA/+xzft4wCC8PJdA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.13.0",
-        "@typescript-eslint/types": "8.13.0",
-        "@typescript-eslint/typescript-estree": "8.13.0"
+        "@typescript-eslint/scope-manager": "8.16.0",
+        "@typescript-eslint/types": "8.16.0",
+        "@typescript-eslint/typescript-estree": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4962,17 +4967,22 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz",
-      "integrity": "sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.16.0.tgz",
+      "integrity": "sha512-pq19gbaMOmFE3CbL0ZB8J8BFCo2ckfHBfaIsaOZgBIF4EoISJIdLX5xRhd0FGB0LlHReNRuzoJoMGpTjq8F2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.13.0",
-        "eslint-visitor-keys": "^3.4.3"
+        "@typescript-eslint/types": "8.16.0",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4982,29 +4992,16 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@vitejs/plugin-react": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
-      "integrity": "sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
+      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
-        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.14.2"
       },
@@ -5012,13 +5009,13 @@
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.2.0 || ^5.0.0"
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
       }
     },
     "node_modules/@vscode/emmet-helper": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.9.3.tgz",
-      "integrity": "sha512-rB39LHWWPQYYlYfpv9qCoZOVioPCftKXXqrsyqN1mTWZM6dTnONT63Db+03vgrBbHzJN45IrgS/AGxw9iiqfEw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.11.0.tgz",
+      "integrity": "sha512-QLxjQR3imPZPQltfbWRnHU6JecWTF1QSWhx3GAKQpslx7y3Dp6sIIXhKjiUJ/BR9FX8PVthjr9PD6pNwOJfAzw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5026,7 +5023,7 @@
         "jsonc-parser": "^2.3.0",
         "vscode-languageserver-textdocument": "^1.0.1",
         "vscode-languageserver-types": "^3.15.1",
-        "vscode-uri": "^2.1.2"
+        "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vscode/l10n": {
@@ -5310,14 +5307,14 @@
       "license": "MIT"
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.11",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
-      "integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
+      "integrity": "sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
-        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "@babel/helper-define-polyfill-provider": "^0.6.3",
         "semver": "^6.3.1"
       },
       "peerDependencies": {
@@ -5339,13 +5336,13 @@
       }
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz",
-      "integrity": "sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz",
+      "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.2"
+        "@babel/helper-define-polyfill-provider": "^0.6.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -5623,9 +5620,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001677",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
-      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
+      "version": "1.0.30001684",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001684.tgz",
+      "integrity": "sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==",
       "dev": true,
       "funding": [
         {
@@ -5880,9 +5877,9 @@
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5969,6 +5966,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -6143,9 +6150,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.52",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
-      "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
+      "version": "1.5.66",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.66.tgz",
+      "integrity": "sha512-pI2QF6+i+zjPbqRzJwkMvtvkdI7MjVbSh2g8dlMguDJIXEPw+kwasS1Jl+YGPEBfGVxsVgGUratAKymPdPo2vQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -6346,27 +6353,27 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
-      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.15.0.tgz",
+      "integrity": "sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.18.0",
-        "@eslint/core": "^0.7.0",
-        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.14.0",
-        "@eslint/plugin-kit": "^0.2.0",
+        "@eslint/config-array": "^0.19.0",
+        "@eslint/core": "^0.9.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "9.15.0",
+        "@eslint/plugin-kit": "^0.2.3",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.4.0",
+        "@humanwhocodes/retry": "^0.4.1",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.5",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^8.2.0",
@@ -6385,8 +6392,7 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -6811,9 +6817,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
+      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
       "dev": true,
       "license": "ISC"
     },
@@ -8911,18 +8917,18 @@
       "license": "MIT"
     },
     "node_modules/msw": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.0.tgz",
-      "integrity": "sha512-n3tx2w0MZ3H4pxY0ozrQ4sNPzK/dGtlr2cIIyuEsgq2Bhy4wvcW6ZH2w/gXM9+MEUY6HC1fWhqtcXDxVZr5Jxw==",
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.6.6.tgz",
+      "integrity": "sha512-npfIIVRHKQX3Lw4aLWX4wBh+lQwpqdZNyJYB5K/+ktK8NhtkdsTxGK7WDrgknozcVyRI7TOqY6yBS9j2FTR+YQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@bundled-es-modules/cookie": "^2.0.0",
+        "@bundled-es-modules/cookie": "^2.0.1",
         "@bundled-es-modules/statuses": "^1.0.1",
         "@bundled-es-modules/tough-cookie": "^0.1.6",
         "@inquirer/confirm": "^5.0.0",
-        "@mswjs/interceptors": "^0.36.5",
+        "@mswjs/interceptors": "^0.37.0",
         "@open-draft/deferred-promise": "^2.2.0",
         "@open-draft/until": "^2.1.0",
         "@types/cookie": "^0.6.0",
@@ -8956,9 +8962,9 @@
       }
     },
     "node_modules/msw/node_modules/type-fest": {
-      "version": "4.26.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
-      "integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.29.0.tgz",
+      "integrity": "sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==",
       "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
@@ -8979,9 +8985,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -9464,9 +9470,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz",
+      "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -9555,11 +9561,14 @@
       "license": "MIT"
     },
     "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.13.0.tgz",
+      "integrity": "sha512-BFwmFXiJoFqlUpZ5Qssolv15DMyc84gTBds1BjsV1BfXEo1UyyD7GsmN67n7J77uRhoSNW1AXtXKPLcBFQn9Aw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      }
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -9724,9 +9733,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.53.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz",
-      "integrity": "sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==",
+      "version": "7.53.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
+      "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -9855,12 +9864,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.27.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
-      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.20.0"
+        "@remix-run/router": "1.21.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9870,13 +9879,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.27.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
-      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.20.0",
-        "react-router": "6.27.0"
+        "@remix-run/router": "1.21.0",
+        "react-router": "6.28.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9990,16 +9999,16 @@
       }
     },
     "node_modules/regexpu-core": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz",
-      "integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
+      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2",
         "regenerate-unicode-properties": "^10.2.0",
         "regjsgen": "^0.8.0",
-        "regjsparser": "^0.11.0",
+        "regjsparser": "^0.12.0",
         "unicode-match-property-ecmascript": "^2.0.0",
         "unicode-match-property-value-ecmascript": "^2.1.0"
       },
@@ -10015,9 +10024,9 @@
       "license": "MIT"
     },
     "node_modules/regjsparser": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.2.tgz",
-      "integrity": "sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
+      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -10113,9 +10122,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz",
-      "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
+      "version": "4.27.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz",
+      "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10129,24 +10138,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.24.4",
-        "@rollup/rollup-android-arm64": "4.24.4",
-        "@rollup/rollup-darwin-arm64": "4.24.4",
-        "@rollup/rollup-darwin-x64": "4.24.4",
-        "@rollup/rollup-freebsd-arm64": "4.24.4",
-        "@rollup/rollup-freebsd-x64": "4.24.4",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.24.4",
-        "@rollup/rollup-linux-arm-musleabihf": "4.24.4",
-        "@rollup/rollup-linux-arm64-gnu": "4.24.4",
-        "@rollup/rollup-linux-arm64-musl": "4.24.4",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4",
-        "@rollup/rollup-linux-riscv64-gnu": "4.24.4",
-        "@rollup/rollup-linux-s390x-gnu": "4.24.4",
-        "@rollup/rollup-linux-x64-gnu": "4.24.4",
-        "@rollup/rollup-linux-x64-musl": "4.24.4",
-        "@rollup/rollup-win32-arm64-msvc": "4.24.4",
-        "@rollup/rollup-win32-ia32-msvc": "4.24.4",
-        "@rollup/rollup-win32-x64-msvc": "4.24.4",
+        "@rollup/rollup-android-arm-eabi": "4.27.4",
+        "@rollup/rollup-android-arm64": "4.27.4",
+        "@rollup/rollup-darwin-arm64": "4.27.4",
+        "@rollup/rollup-darwin-x64": "4.27.4",
+        "@rollup/rollup-freebsd-arm64": "4.27.4",
+        "@rollup/rollup-freebsd-x64": "4.27.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.27.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.27.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.27.4",
+        "@rollup/rollup-linux-arm64-musl": "4.27.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.27.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.27.4",
+        "@rollup/rollup-linux-x64-gnu": "4.27.4",
+        "@rollup/rollup-linux-x64-musl": "4.27.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.27.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.27.4",
+        "@rollup/rollup-win32-x64-msvc": "4.27.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -10266,6 +10275,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket-client": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/socket-client/-/socket-client-1.0.0.tgz",
+      "integrity": "sha512-9Q5nwYFFL+055kJ2XUQHMO6Np3c8RgHCl9c7Bf/QvW0jCXxbB5bcwY4WGetawA6lPvFirLwlm3d93Q3wVbp5qQ==",
+      "license": "ISC"
+    },
     "node_modules/socket.io-client": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
@@ -10628,13 +10643,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -10706,9 +10714,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
-      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.2.tgz",
+      "integrity": "sha512-ZF5gQIQa/UmzfvxbHZI3JXN0/Jt+vnAfAviNRAMc491laiK6YCLpCW9ft8oaCRFOTxCZtUTE6XB0ZQAe3olntw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10888,9 +10896,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -10902,15 +10910,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.13.0.tgz",
-      "integrity": "sha512-vIMpDRJrQd70au2G8w34mPps0ezFSPMEX4pXkTzUkrNbRX+36ais2ksGWN0esZL+ZMaFJEneOBHzCgSqle7DHw==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.16.0.tgz",
+      "integrity": "sha512-wDkVmlY6O2do4V+lZd0GtRfbtXbeD0q9WygwXXSJnC1xorE8eqyC2L1tJimqpSeFrOzRlYtWnUp/uzgHQOgfBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.13.0",
-        "@typescript-eslint/parser": "8.13.0",
-        "@typescript-eslint/utils": "8.13.0"
+        "@typescript-eslint/eslint-plugin": "8.16.0",
+        "@typescript-eslint/parser": "8.16.0",
+        "@typescript-eslint/utils": "8.16.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -10919,6 +10927,9 @@
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
       "peerDependenciesMeta": {
         "typescript": {
           "optional": true
@@ -10933,9 +10944,9 @@
       "license": "MIT"
     },
     "node_modules/undici": {
-      "version": "6.20.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.20.1.tgz",
-      "integrity": "sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz",
+      "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10943,9 +10954,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
       "dev": true,
       "license": "MIT"
     },
@@ -11114,9 +11125,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
-      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11174,9 +11185,9 @@
       }
     },
     "node_modules/vite-tsconfig-paths": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.0.tgz",
-      "integrity": "sha512-Y1PLGHCJfAq1Zf4YIGEsmuU/NCX1epoZx9zwSr32Gjn3aalwQHRKr5aUmbo6r0JHeHkqmWpmDg7WOynhYXw1og==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.3.tgz",
+      "integrity": "sha512-0bz+PDlLpGfP2CigeSKL9NFTF1KtXkeHGZSSaGQSuPZH77GhoiQaA8IjYgOaynSuwlDTolSUEU0ErVvju3NURg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11194,9 +11205,9 @@
       }
     },
     "node_modules/vite/node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "dev": true,
       "funding": [
         {
@@ -11215,7 +11226,7 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -11235,13 +11246,6 @@
         "vscode-uri": "^3.0.8"
       }
     },
-    "node_modules/vscode-css-languageservice/node_modules/vscode-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
-      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vscode-languageserver-textdocument": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
@@ -11257,9 +11261,9 @@
       "license": "MIT"
     },
     "node_modules/vscode-uri": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz",
-      "integrity": "sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/app/package.json b/app/package.json
index b4ed2c31..1e763d59 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
+    "date-fns": "^4.1.0",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -33,6 +34,7 @@
     "react-international-phone": "^4.3.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
+    "socket-client": "^1.0.0",
     "socket.io-client": "^4.8.1",
     "styled-components": "^6.1.13",
     "yup": "^1.4.0"
diff --git a/app/public/mockServiceWorker.js b/app/public/mockServiceWorker.js
index 6eb80522..fead0b3f 100644
--- a/app/public/mockServiceWorker.js
+++ b/app/public/mockServiceWorker.js
@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.0'
-const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
+const PACKAGE_VERSION = '2.6.6'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -192,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }
diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index dc8757fd..9f495a43 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -2,6 +2,8 @@ const express = require("express");
 const http = require("http");
 const { Server } = require("socket.io");
 
+const PORT = 4000;
+
 const app = express();
 const server = http.createServer(app);
 
@@ -17,7 +19,12 @@ io.on("connection", (socket) => {
   socket.on("send_message", (data) => {
     console.log("Message received from client:", data);
 
-    io.emit("receive_message", data);
+    socket.broadcast.emit("receive_message", data);
+  });
+
+  socket.on("join", ({ chatId }) => {
+    socket.join(chatId);
+    console.log(`User ${socket.id} joined chat ${chatId}`);
   });
 
   socket.on("disconnect", () => {
@@ -25,7 +32,6 @@ io.on("connection", (socket) => {
   });
 });
 
-// Start server on port 4000
-server.listen(4000, () => {
-  console.log("Socket.io server running on http://localhost:4000/socket-io");
+server.listen(PORT, () => {
+  console.log(`Socket.io server running on http://localhost:${PORT}`);
 });
diff --git a/app/socket-server/package-lock.json b/app/socket-server/package-lock.json
index 6007fcd0..4047c798 100644
--- a/app/socket-server/package-lock.json
+++ b/app/socket-server/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "express": "^4.21.1",
+        "nodemon": "^3.1.7",
         "socket.io": "^4.8.1"
       }
     },
@@ -51,11 +52,30 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
     "node_modules/base64id": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
@@ -64,6 +84,18 @@
         "node": "^4.5.0 || >= 5.9"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -87,6 +119,28 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -113,6 +167,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -341,6 +425,18 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
@@ -374,6 +470,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -400,6 +510,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -411,6 +533,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -481,6 +612,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "license": "ISC"
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -494,6 +631,48 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -548,6 +727,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -561,6 +752,66 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/nodemon": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.7.tgz",
+      "integrity": "sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -604,6 +855,18 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
       "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -616,6 +879,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "license": "MIT"
+    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@@ -652,6 +921,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -676,6 +957,18 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/send": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
@@ -764,6 +1057,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/socket.io": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
@@ -873,6 +1178,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -881,6 +1210,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -893,6 +1231,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
diff --git a/app/socket-server/package.json b/app/socket-server/package.json
index e0fadccd..d651fc9f 100644
--- a/app/socket-server/package.json
+++ b/app/socket-server/package.json
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.21.1",
+    "nodemon": "^3.1.7",
     "socket.io": "^4.8.1"
   }
 }
diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index 4eb8a991..f7ace37f 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -30,6 +30,10 @@ const StyledIcon = styled.div<CircleIconProps>`
   opacity: 0.9;
   box-shadow: var(--box-shadow);
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   &:hover {
     opacity: 1;
     cursor: pointer;
diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 50379a70..d2bbbb48 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -7,7 +7,7 @@ const Textarea = styled.textarea`
 
   flex: 1;
   align-self: center;
-  
+
   caret-color: var(--accent-color);
   color: var(--color-text);
 
@@ -20,7 +20,12 @@ const Textarea = styled.textarea`
   max-height: 300px;
 `;
 
-function ExpandingTextArea() {
+type PropsType = {
+  input: string;
+  setInput: (value: string) => void;
+};
+
+function ExpandingTextArea({ input, setInput }: PropsType) {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   function handleInput() {
@@ -33,6 +38,8 @@ function ExpandingTextArea() {
   return (
     <Textarea
       ref={ref}
+      value={input}
+      onChange={(e) => setInput(e.target.value)}
       placeholder="Message"
       rows={1}
       onInput={handleInput}
diff --git a/app/src/components/Main.tsx b/app/src/components/Main.tsx
index 381e73d5..eef739de 100644
--- a/app/src/components/Main.tsx
+++ b/app/src/components/Main.tsx
@@ -1,5 +1,11 @@
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 
+import { setUserInfo } from "@state/user/user";
+
+import { useUser } from "@features/authentication/login/hooks/useUser";
+
 const StyledMain = styled.main`
   position: relative;
   overflow: hidden;
@@ -34,6 +40,14 @@ const StyledMain = styled.main`
 `;
 
 function Main({ children }: { children?: React.ReactNode }) {
+  const { user, isPending } = useUser();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (user && !isPending) {
+      dispatch(setUserInfo(user));
+    }
+  }, [dispatch, user]);
   return <StyledMain data-testid="main">{children}</StyledMain>;
 }
 
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 7afd31e6..a4991c49 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -31,6 +31,7 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import CircularProgress from "@mui/material/CircularProgress";
+import SendIcon from "@mui/icons-material/Send";
 
 enum icons {
   BlockIcon,
@@ -67,6 +68,7 @@ enum icons {
   KeyboardArrowDown,
   ContentCopy,
   CircularProgress,
+  SendMessage,
 }
 
 type iconStrings = keyof typeof icons;
@@ -275,6 +277,8 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       style={{ width: "1.5rem", height: "1.5rem" }}
     />
   ),
+
+  SendMessage: <SendIcon />,
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/authentication/login/hooks/useLogin.ts b/app/src/features/authentication/login/hooks/useLogin.ts
index b406b07b..657419f3 100644
--- a/app/src/features/authentication/login/hooks/useLogin.ts
+++ b/app/src/features/authentication/login/hooks/useLogin.ts
@@ -1,15 +1,19 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useDispatch } from "react-redux";
 
 import { login as loginApi } from "../services/apiLogin";
+import { setUserInfo } from "@state/user/user";
 
 export function useLogin() {
   const queryClient = useQueryClient();
+  const dispatch = useDispatch();
 
   const { mutate: login, isPending } = useMutation({
     mutationFn: loginApi,
     onSuccess: (data) => {
       queryClient.setQueryData(["user"], { user: data.user });
       queryClient.invalidateQueries({ queryKey: ["isAuth"] });
+      dispatch(setUserInfo(data.user));
     },
   });
 
diff --git a/app/src/features/authentication/login/hooks/useUser.ts b/app/src/features/authentication/login/hooks/useUser.ts
new file mode 100644
index 00000000..ec1d6788
--- /dev/null
+++ b/app/src/features/authentication/login/hooks/useUser.ts
@@ -0,0 +1,13 @@
+import { apiUser } from "@features/authentication/oauth/services/apiUser";
+import { useQuery } from "@tanstack/react-query";
+
+export function useUser() {
+  const { data, isPending } = useQuery({
+    queryKey: ["user"],
+    queryFn: apiUser,
+  });
+  
+  const user = data?.user;
+
+  return { user, isPending };
+}
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
new file mode 100644
index 00000000..61f25479
--- /dev/null
+++ b/app/src/features/chats/ChatBody.tsx
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import { useSelector } from "react-redux";
+
+import { RootState } from "@state/store";
+import Message from "./Message";
+
+const ScrollContainer = styled.div`
+  width: 100%;
+  height: 87dvh;
+  overflow-y: auto;
+  position: relative;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: inherit;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+    border-radius: 5px;
+  }
+
+  scroll-behavior: smooth;
+  z-index: 1000;
+
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+`;
+
+function ChatBody() {
+  const messages = useSelector((state: RootState) => state.messages.messages);
+
+  return (
+    <ScrollContainer>
+      {messages.map((data, index) => (
+        <Message
+          key={index}
+          index={index}
+          messagesLength={messages.length}
+          data={data}
+        />
+      ))}
+    </ScrollContainer>
+  );
+}
+
+export default ChatBody;
diff --git a/app/src/features/chats/ChatBox.tsx b/app/src/features/chats/ChatBox.tsx
index 8dd16417..9eaf0eb0 100644
--- a/app/src/features/chats/ChatBox.tsx
+++ b/app/src/features/chats/ChatBox.tsx
@@ -1,16 +1,27 @@
+import styled from "styled-components";
+
 import ChatInput from "@features/chats/ChatInput";
+import Topbar from "@features/chats/Topbar";
+import ChatBody from "./ChatBody";
 
 import { useCloseChat } from "@hooks/useCloseChat";
-import Topbar from "@features/chats/Topbar";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+`
 
 function ChatBox() {
   useCloseChat();
 
   return (
-    <>
-      <ChatInput />
+    <Container>
       <Topbar />
-    </>
+      <ChatBody />
+      <ChatInput />
+    </Container>
   );
 }
 
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 6a4ce052..09641f0c 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,17 +1,20 @@
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 
 import { getIcon } from "@data/icons";
 
-import CircleIcon from "@components/CircleIcon";
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Icon from "@components/Icon";
+import RecordInput from "./SendButton";
+
+import { addMessage } from "@state/messages/messages";
+import { RootState } from "@state/store";
+
+import { useSocket } from "@hooks/useSocket";
 
 const Container = styled.div`
-  position: absolute;
   z-index: 1000;
-  bottom: 1rem;
-  left: 0;
-  right: 0;
 
   margin: auto;
 
@@ -48,7 +51,7 @@ const InputWrapper = styled.div`
   flex: 1;
 `;
 
-const AnotherContainer = styled.div`
+const Input = styled.div`
   display: flex;
   align-items: flex-end;
   gap: 1rem;
@@ -57,26 +60,50 @@ const AnotherContainer = styled.div`
 `;
 
 function ChatInput() {
+  const [input, setInput] = useState("");
+  const { sendMessage } = useSocket();
+  const dispatch = useDispatch();
+  const userId = useSelector((state: RootState) => state.user.userInfo.id);
+
+  function handleSubmit() {
+    console.log("sending message");
+
+    if (input) {
+      const message = {
+        id: "19008",
+        content: input,
+        senderId: userId,
+        type: 0,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        chatId: "",
+        parentMessageId: "",
+        isDeleted: false,
+        deleteType: 2,
+        status: 0,
+      };
+      setInput("");
+      sendMessage(message);
+      dispatch(addMessage(message));
+    }
+  }
+
   return (
     <Container>
-      <AnotherContainer>
+      <Input>
         <InputContainer>
           <InputWrapper>
             <Icon>{getIcon("Emojie")}</Icon>
-            <ExpandingTextArea />
+            <ExpandingTextArea input={input} setInput={setInput} />
             <Icon>{getIcon("Attatch")}</Icon>
           </InputWrapper>
         </InputContainer>
 
-        <CircleIcon
-          data-testid="record-icon"
-          $icon="Record"
-          $size={3.3}
-          $padding={0.5}
-          $color="white"
-          $bgColor="var(--accent-color)"
+        <RecordInput
+          onClick={handleSubmit}
+          type={!input ? "record" : "message"}
         />
-      </AnotherContainer>
+      </Input>
     </Container>
   );
 }
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
new file mode 100644
index 00000000..3c2d3f1b
--- /dev/null
+++ b/app/src/features/chats/Message.tsx
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
+import { MessageInterface } from "types/messages";
+import { useSelector } from "react-redux";
+import { RootState } from "@state/store";
+
+const StyledMessage = styled.div<{ $isMine: boolean }>`
+  display: flex;
+  align-items: flex-end;
+  margin: 5px 0;
+
+  ${({ $isMine }) =>
+    $isMine ? "justify-content: flex-end;" : "justify-content: flex-start;"}
+`;
+
+const Bubble = styled.div<{ $isMine: boolean }>`
+  max-width: 70%;
+  padding: 10px;
+  border-radius: 15px;
+  font-size: 14px;
+
+  background-color: ${({ $isMine }) => ($isMine ? "#0084ff" : "#e5e5ea")};
+  color: ${({ $isMine }) => ($isMine ? "#fff" : "#000")};
+  margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
+  z-index: 1000;
+`;
+
+type MessageProps = {
+  index: number;
+  messagesLength: number;
+  data: MessageInterface;
+};
+
+function Message({
+  index,
+  messagesLength,
+  data: { id, senderId, content },
+}: MessageProps) {
+  const { lastMessageRef } = useScrollToLastMsg();
+
+  const userId = useSelector((state: RootState) => state.user.userInfo.id);
+
+  return (
+    <StyledMessage
+      ref={index === messagesLength - 1 ? lastMessageRef : null}
+      key={id}
+      $isMine={senderId === userId}
+    >
+      <Bubble $isMine={senderId === userId}>{content}</Bubble>
+    </StyledMessage>
+  );
+}
+
+export default Message;
diff --git a/app/src/features/chats/SendButton.tsx b/app/src/features/chats/SendButton.tsx
new file mode 100644
index 00000000..96d7af58
--- /dev/null
+++ b/app/src/features/chats/SendButton.tsx
@@ -0,0 +1,21 @@
+import CircleIcon from "@components/CircleIcon";
+
+interface ButtonType {
+  type: "record" | "message";
+  onClick: () => void;
+}
+
+function RecordInput({ type, onClick }: ButtonType) {
+  return (
+    <CircleIcon
+      onClick={onClick}
+      data-testid="record-icon"
+      $icon={type === "record" ? "Record" : "SendMessage"}
+      $padding={0.6}
+      $color="white"
+      $bgColor="var(--accent-color)"
+    />
+  );
+}
+
+export default RecordInput;
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index fd812de5..6784ad86 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -9,13 +9,18 @@ import SearchBar from "@features/search/components/SearchBar";
 
 const Container = styled.div`
   position: absolute;
-  z-index: 1000;
+  top: 0;
+  z-index: 1001;
+
   height: 3.5rem;
-  background-color: var(--color-background);
   width: 100%;
+
+  background-color: var(--color-background);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding-inline: 1rem;
 `;
 
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 02ab61ff..821a315b 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAllChatsApi } from "../services/apiGetChats";
-import { Chat } from "@mocks/data/Chats";
+import { Chat } from "@mocks/data/chats";
 
 export function useChats() {
   const { data: chats, isPending } = useQuery<Chat[]>({
diff --git a/app/src/features/chats/hooks/useScrollToLastMsg.tsx b/app/src/features/chats/hooks/useScrollToLastMsg.tsx
new file mode 100644
index 00000000..ca0af2ff
--- /dev/null
+++ b/app/src/features/chats/hooks/useScrollToLastMsg.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+
+import { RootState } from "@state/store";
+
+function useScrollToLastMsg() {
+  const lastMessageRef = useRef<HTMLDivElement>(null);
+  const messages = useSelector((state: RootState) => state.messages.messages);
+
+  useEffect(() => {
+    lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return { lastMessageRef };
+}
+
+export default useScrollToLastMsg;
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
new file mode 100644
index 00000000..8a32c5a5
--- /dev/null
+++ b/app/src/mocks/data/messages.ts
@@ -0,0 +1,206 @@
+import {
+  DeleteType,
+  MessageInterface,
+  MessageStatus,
+  MessageTypes,
+} from "types/messages";
+
+const messages: MessageInterface[] = [
+  {
+    id: "1",
+    content: "Hey there!",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:00:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:00:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "2",
+    content: "Hi! How are you?",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:01:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:01:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "3",
+    content: "I'm good, thanks! What about you?",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:02:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:02:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "4",
+    content: "I'm doing well! What's new?",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:03:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:03:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "5",
+    content: "Just working on some stuff. How about you?",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:04:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:04:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "6",
+    content: "Same here! Busy day ahead.",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:05:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:05:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "7",
+    content: "Yeah, same. Lots of things to get done.",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:06:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:06:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "8",
+    content: "I hear you. Do you have any plans for the weekend?",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:07:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:07:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "9",
+    content: "Nothing specific, just relaxing. You?",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:08:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:08:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "10",
+    content: "I'm planning to go hiking if the weather's nice.",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:09:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:09:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "11",
+    content: "That sounds fun! Where do you usually go?",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:10:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:10:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "12",
+    content: "There's a great trail nearby. It's not too difficult.",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:11:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:11:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "13",
+    content: "Nice! I might have to try it sometime.",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:12:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:12:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "14",
+    content: "Definitely! It's a great way to clear your mind.",
+    senderId: "2",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:13:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:13:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+  {
+    id: "15",
+    content: "I agree, nature has a calming effect.",
+    senderId: "1",
+    type: MessageTypes.normal,
+    createdAt: new Date("2024-11-27T10:14:00").toISOString(),
+    updatedAt: new Date("2024-11-27T10:14:00").toISOString(),
+    chatId: "chat1",
+    parentMessageId: "",
+    isDeleted: false,
+    deleteType: DeleteType.none,
+    status: MessageStatus.sent,
+  },
+];
+
+export { messages };
diff --git a/app/src/mocks/mockData.ts b/app/src/mocks/data/users.ts
similarity index 97%
rename from app/src/mocks/mockData.ts
rename to app/src/mocks/data/users.ts
index 930d8c09..5e50b787 100644
--- a/app/src/mocks/mockData.ts
+++ b/app/src/mocks/data/users.ts
@@ -1,4 +1,5 @@
-export const MOCK_USER = {
+export const MOCK_USER1 = {
+  id: "1",
   email: "johndoe@example.com",
   password: "1234",
   screenFirstName: "John",
@@ -8,6 +9,23 @@ export const MOCK_USER = {
   username: "johndoe",
   phoneNumber: "0123456789",
   status: "Online",
+  screenName: "John Doe",
+};
+
+
+export const MOCK_USER2 = {
+  id: "2",
+  email: "ay7aga@example.com",
+  password: "1234",
+  firstName: "ay",
+  lastName: "7aga",
+  bio: "Hello, I'm ay 7aga",
+  photo:
+    "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
+  username: "Ay 7aga",
+  phoneNumber: "0123456798",
+  status: "Online",
+  screenName: "Ay 7aga",
 };
 
 export const MOCK_MY_STORIES = [
diff --git a/app/src/mocks/oauth/oauth.ts b/app/src/mocks/oauth/oauth.ts
index 96d9517f..85903fae 100644
--- a/app/src/mocks/oauth/oauth.ts
+++ b/app/src/mocks/oauth/oauth.ts
@@ -1,5 +1,5 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_USER, TOKEN } from "@mocks/mockData";
+import { MOCK_USER1, TOKEN } from "@mocks/data/users";
 
 type RequestBody = {
   code: string;
@@ -29,7 +29,7 @@ export const OauthMock = [
         message: "Successful login",
         status: "success",
         data: {
-          user: MOCK_USER,
+          user: MOCK_USER1,
           sessionID: TOKEN,
         },
       },
@@ -48,7 +48,7 @@ export const OauthMock = [
         message: "Successful login",
         status: "success",
         data: {
-          user: MOCK_USER,
+          user: MOCK_USER1,
           sessionID: TOKEN,
         },
       },
diff --git a/app/src/mocks/profile-settings/profile-settings.ts b/app/src/mocks/profile-settings/profile-settings.ts
index acba74af..b10ab8e6 100644
--- a/app/src/mocks/profile-settings/profile-settings.ts
+++ b/app/src/mocks/profile-settings/profile-settings.ts
@@ -1,5 +1,5 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_USER } from "@mocks/mockData";
+import { MOCK_USER1 } from "@mocks/data/users";
 
 export const profileSettingsMock = [
   http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
@@ -11,7 +11,7 @@ export const profileSettingsMock = [
       {
         status: "success",
         data: {
-          user: MOCK_USER,
+          user: MOCK_USER1,
         },
       },
       { status: 200 }
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
index b5b53ac4..0fd7db66 100644
--- a/app/src/mocks/stories/stories.ts
+++ b/app/src/mocks/stories/stories.ts
@@ -1,5 +1,5 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_MY_STORIES, MOCK_OTHER_USER_STORIES } from "@mocks/mockData";
+import { MOCK_MY_STORIES, MOCK_OTHER_USER_STORIES } from "@mocks/data/users";
 
 type AddStoryRequestBody = {
   file: File;
@@ -111,6 +111,7 @@ export const storiesMock = [
       );
     }
   }),
+  
   http.get("/users/:userId/stories", async ({ params }) => {
     const { userId } = params;
     if (userId) {
diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index eb060bb8..d4e868e6 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -1,5 +1,5 @@
+import { MOCK_USER1, TOKEN } from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
-import { MOCK_USER, TOKEN } from "@mocks/mockData";
 
 type LoginRequestBody = {
   email: string;
@@ -34,7 +34,7 @@ export const loginMock = [
       const { email, password } = await request.json();
 
       const isValidUser =
-        email === MOCK_USER.email && password === MOCK_USER.password;
+        email === MOCK_USER1.email && password === MOCK_USER1.password;
 
       if (!isValidUser) {
         return HttpResponse.json(
@@ -43,7 +43,7 @@ export const loginMock = [
             status: "error",
             data: {},
           },
-          { status: 401 },
+          { status: 401 }
         );
       }
 
@@ -52,9 +52,7 @@ export const loginMock = [
           message: "Successful login",
           status: "success",
           data: {
-            user: {
-              email: "test@example.com",
-            },
+            user: MOCK_USER1,
             sessionID: TOKEN,
           },
         },
@@ -63,8 +61,8 @@ export const loginMock = [
           headers: {
             "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
           },
-        },
+        }
       );
-    },
+    }
   ),
 ];
diff --git a/app/src/mocks/userauth/logout.ts b/app/src/mocks/userauth/logout.ts
index e48862c4..f56493b2 100644
--- a/app/src/mocks/userauth/logout.ts
+++ b/app/src/mocks/userauth/logout.ts
@@ -1,5 +1,5 @@
 import { http, HttpResponse } from "msw";
-import { TOKEN } from "@mocks/mockData";
+import { TOKEN } from "@mocks/data/users";
 import { SESSIONS } from "@mocks/data/Sessions";
 
 export const logoutMock = [
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 2897f2dd..2bf81d5c 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect, ReactNode } from "react";
 import { useDispatch } from "react-redux";
+import { Dispatch } from "redux";
+
 import {
   addMessage,
   MessageInterface,
@@ -7,8 +9,8 @@ import {
 } from "@state/messages/messages";
 
 import { SocketContext } from "./SocketContext";
-import { Dispatch } from "redux";
 import { getSocket } from "utils/socket";
+import { useChats } from "@features/chats/hooks/useChats";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
@@ -16,20 +18,30 @@ const handleIncomingMessage = (
 ) => {
   dispatch(addMessage(message));
 };
+
 const handleIsTyping = (dispatch: Dispatch, isTyping: boolean) => {
   dispatch(setIsTyping({ isTyping: isTyping }));
 };
-const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+
+type SocketProviderProps = {
+  children: ReactNode;
+};
+
+function SocketProvider({ children }: SocketProviderProps) {
   const [isConnected, setIsConnected] = useState(false);
   const dispatch = useDispatch();
   const socket = getSocket();
 
+  const { chats, isPending } = useChats();
+
   useEffect(() => {
     socket.connect();
 
     socket.on("connect", () => {
       const engine = socket.io.engine;
       setIsConnected(true);
+      console.log("connected");
+
       engine.on("close", (reason) => {
         console.log(reason);
       });
@@ -38,6 +50,7 @@ const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
     socket.on("receive_message", (message: MessageInterface) => {
       handleIncomingMessage(dispatch, message);
     });
+    
     socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
     socket.emit("typing");
     return () => {
@@ -50,6 +63,18 @@ const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
     };
   }, [dispatch, socket]);
 
+  useEffect(() => {
+    if (isConnected && !isPending && chats?.length) {
+      chats.forEach((chat) => {
+        socket.emit("join", { chatId: chat.id });
+      });
+      console.log(
+        "Joined all chats:",
+        chats.map((chat) => chat.id)
+      );
+    }
+  }, [isConnected, isPending, chats, socket]);
+
   const sendMessage = (message: MessageInterface) => {
     if (isConnected) {
       socket.emit("send_message", { message });
@@ -63,6 +88,6 @@ const SocketProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
       {children}
     </SocketContext.Provider>
   );
-};
+}
 
 export default SocketProvider;
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index 01814aef..5a0c7dd8 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -1,3 +1,4 @@
+import { messages } from "@mocks/data/messages";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { MessageInterface } from "types/messages";
 
@@ -7,7 +8,7 @@ interface MessagesState {
 }
 
 const initialState: MessagesState = {
-  messages: [],
+  messages: messages,
   isTyping: false,
 };
 
diff --git a/app/src/state/user/user.ts b/app/src/state/user/user.ts
index a2729e6f..d837d922 100644
--- a/app/src/state/user/user.ts
+++ b/app/src/state/user/user.ts
@@ -4,6 +4,7 @@ import {
   activeStates,
   permissionStates,
 } from "../../types/sideBar";
+
 import {
   userInfoInterface,
   privacySettingsInterface,
@@ -11,8 +12,8 @@ import {
   updatePrivacyInterface,
   updateInfoInterface,
   updateActivityInterface,
-  permissionsSettingsInterface,
   updatePermissionInterface,
+  permissionsSettingsInterface,
 } from "../../types/user";
 
 interface userState {
@@ -25,6 +26,7 @@ interface userState {
 const initialState: userState = {
   // TODO: set at login
   userInfo: {
+    id: "",
     username: "",
     screenName: "",
     email: "",
@@ -32,6 +34,7 @@ const initialState: userState = {
     status: "",
     bio: "",
   },
+  
   privacySettings: {
     storiesSeenPrivacy: privacyStates.EVERYONE,
     lastSeenPrivacy: privacyStates.EVERYONE,
@@ -50,6 +53,12 @@ const userSlice = createSlice({
   name: "user",
   initialState,
   reducers: {
+    setUserInfo: (
+      state: userState,
+      action: PayloadAction<userInfoInterface>
+    ) => {
+      state.userInfo = action.payload;
+    },
     updateUserPrivacy: (
       state: userState,
       action: PayloadAction<updatePrivacyInterface>
@@ -82,6 +91,7 @@ const userSlice = createSlice({
 });
 
 export const {
+  setUserInfo,
   updateUserPrivacy,
   updateUserInfo,
   updateUserActivity,
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 55931776..b0994604 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -3,6 +3,7 @@ export enum MessageTypes {
   "forward",
   "normal",
 }
+
 export enum DeleteType {
   "all",
   "only-me",
@@ -21,8 +22,8 @@ export interface MessageInterface {
   content: string;
   senderId: string;
   type: MessageTypes;
-  createdAt: Date;
-  updatedAt: Date;
+  createdAt: string;
+  updatedAt: string;
   chatId: string;
   parentMessageId: string;
   isDeleted: boolean;
diff --git a/app/src/types/user.ts b/app/src/types/user.ts
index 830d245d..c21d1623 100644
--- a/app/src/types/user.ts
+++ b/app/src/types/user.ts
@@ -29,6 +29,7 @@ interface userInfoInterface {
   photo?: string;
   status: string;
   bio: string;
+  id: string;
 }
 
 interface updatePrivacyInterface {
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..f95d44b9
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,255 @@
+{
+  "name": "telware-frontend",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "socket.io": "^4.8.1"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.17",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
+      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.3.tgz",
+      "integrity": "sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.8"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "license": "MIT",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz",
+      "integrity": "sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.7.2",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/socket.io": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.6.0",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "~4.3.4",
+        "ws": "~8.17.1"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "license": "MIT"
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

From e5cd2b400e96c6eef75f9e953e8ec7c48de06c6f Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 29 Nov 2024 02:16:58 +0200
Subject: [PATCH 022/136] :bug: (block): fixing blocklist (#58)

* :bug: (block): fixing blocklist

* :bug: removing unused params
---
 app/package-lock.json                         |  2 -
 app/src/components/CircleIcon.tsx             |  3 -
 .../privacy-settings/AddToBlockMenuList.tsx   | 55 +++++++++++--------
 .../features/privacy-settings/BlockList.tsx   | 22 ++++----
 app/src/styles/GlobalStyles.tsx               |  1 -
 5 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 3caf468d..cfaa0c87 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -2798,7 +2798,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
       "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "levn": "^0.4.1"
       },
@@ -5881,7 +5880,6 @@
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index f7ace37f..bf24b33a 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -42,9 +42,6 @@ const StyledIcon = styled.div<CircleIconProps>`
     width: 100%;
     height: 100%;
     color: ${(props) => props.$color};
-    width: 100%;
-    height: 100%;
-    color: ${(props) => props.$color};
   }
 `;
 
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
index c72c4f7a..32fecbd7 100644
--- a/app/src/features/privacy-settings/AddToBlockMenuList.tsx
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -7,10 +7,12 @@ import { Chat } from "@mocks/data/chats";
 
 const StyledList = styled.ul<StyledListProps>`
   position: absolute;
-  width: ${(props) => props.$size}%;
-  right: ${(props) => (props.$right ?? 3) + 2}rem;
+  width: 70%;
+  right: 20%;
   bottom: ${(props) => (props.$bottom ?? 3) + 3}rem;
-  height: ${(props) => (props.$height ?? 3) + 3}rem;
+  height: fit-content;
+  max-height: ${(props) => (props.$height ?? 3) + 3}rem;
+  min-height: 3rem;
   z-index: 1;
   overflow: auto;
 
@@ -29,15 +31,11 @@ const StyledList = styled.ul<StyledListProps>`
 
 interface StyledListProps {
   $bottom?: number;
-  $right?: number;
-  $size?: number;
   $height?: number;
 }
 
 const menuStyles: StyledListProps = {
   $bottom: 5,
-  $right: 4,
-  $size: 70,
   $height: 30,
 };
 
@@ -45,6 +43,13 @@ const StylingWrapper = styled.div`
   width: 100%;
 `;
 
+const StyledP = styled.p`
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+  justify-self: center;
+  align-self: center;
+`;
+
 function filterChats(blockList: BlockedUserProps[], chats: Chat[]) {
   const blockIds = blockList
     ? new Set(blockList.map((val) => val.id))
@@ -73,22 +78,26 @@ function AddToBlockMenuList({ setIsMenuOpened }: any) {
   return (
     <StyledList {...menuStyles}>
       <ScrollContainer>
-        {filteredChats?.map((item) => {
-          const data: BlockedUserProps = {
-            name: item.name,
-            id: item.id,
-            username: item.name.toLowerCase() + 123,
-          };
-          return (
-            <StylingWrapper
-              onClick={() => handleClick(item)}
-              key={data.id}
-              data-testid={`block-user-${data.id}`}
-            >
-              <BlockItem {...data} />
-            </StylingWrapper>
-          );
-        })}
+        {filteredChats.length ? (
+          filteredChats.map((item) => {
+            const data: BlockedUserProps = {
+              name: item.name,
+              id: item.id,
+              username: item.name.toLowerCase() + 123,
+            };
+            return (
+              <StylingWrapper
+                onClick={() => handleClick(item)}
+                key={data.id}
+                data-testid={`block-user-${data.id}`}
+              >
+                <BlockItem {...data} />
+              </StylingWrapper>
+            );
+          })
+        ) : (
+          <StyledP>No Unblocked users found</StyledP>
+        )}
       </ScrollContainer>
     </StyledList>
   );
diff --git a/app/src/features/privacy-settings/BlockList.tsx b/app/src/features/privacy-settings/BlockList.tsx
index 02915345..5611d2d5 100644
--- a/app/src/features/privacy-settings/BlockList.tsx
+++ b/app/src/features/privacy-settings/BlockList.tsx
@@ -31,17 +31,6 @@ function BlockList() {
 
   return (
     <StyledOptionsList>
-      <CircleIcon
-        $icon="Add"
-        $right={1}
-        $bottom={1}
-        $size={3.3}
-        $color="white"
-        $bgColor="var(--accent-color)"
-        onClick={() => setIsMenuOpened(!isMenuOpened)}
-        data-testid="block-user-menu-icon"
-      />
-
       {isMenuOpened && <AddToBlockMenuList setIsMenuOpened={setIsMenuOpened} />}
 
       <PlaceHeader>
@@ -53,6 +42,17 @@ function BlockList() {
       {blockList?.map((item) => {
         return <BlockItem {...item} key={item.id} />;
       })}
+
+      <CircleIcon
+        $icon="Add"
+        $right={1}
+        $bottom={1}
+        $size={3.3}
+        $color="white"
+        $bgColor="var(--accent-color)"
+        onClick={() => setIsMenuOpened(!isMenuOpened)}
+        data-testid="block-user-menu-icon"
+      />
     </StyledOptionsList>
   );
 }
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 89ab2f97..09543025 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -243,7 +243,6 @@ button {
 
 const ScrollContainer = styled.div`
   width: 100%;
-  height: 500px;
   overflow-y: auto;
   position: relative;
 

From 55568cb29d7bb937bbd6b5b5b61b2235174a9549 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 29 Nov 2024 02:31:22 +0200
Subject: [PATCH 023/136] =?UTF-8?q?=E2=9C=A8=20(messaging):=20Two=20users?=
 =?UTF-8?q?=20sending=20messages=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Release v1.0.0 (#49)

* fix(ops): backend integration with cors and cookies (#33)

* 🐛 (Login): fix bugs (#32)

* 🐛 Fix data-testid overriding

* 🐛 Fix resetting the form after submit

* 🐛 Consistent error messages in password & email fields

* 🐛 Resetting email & pass in case of a successful login

* 🐛 Added api-url to requests' endpoints

* 🔇 Removed logs

* :bug: (privacy-settings): fixing bugs (#34)

* :bug: (sidebar): adding data-testid in row items

* :bug: (sidebar): fixing responsiveness

* :recycle: (sidebar-row): refactoring key element & data-testid

* fix(profile-settings): fix integration with backend (#35)

* (fix) integration with backend signup (#36)

* fix captcha and confirm password

* bug fixes on sign up

* fix signup integration

* requested changess

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* fix confirm email and reset password (#37)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* :recycle: applying factory design pattern + integration with BE (#38)

* :recycle: add getKey function (#40)

* Feature/update profile picture (mock) (#39)

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

* ✨ (feat

(feat): add profile picture mock

* 🐛 Fix(update-profile-picture): fix the blob

fix(update-profile-picture): fix the blob

* 💄 Feat: StoryIcon UI

Feat: StoryIcon UI

* 🐛 Fix(sidebar): fix the searchbar responsiveness

fix(sidebar): fix the searchbar responsiveness

* 📱 Fix(sidebar): make sidebar responsive

fix(sidebar): make sidebar responsive

* 🐛 Fix(user): fix importing privacy states

fix(user): fix importing privacy states

* 🎉(oauth): Integrated with backend (#42)

* 💄 (messaging): Added chats layout (No messages)

* 🐛 (protecting routes): Fix not navigating to chat

* ♻️ (protected routes): Refacored protecting routes

* ♻️ (chats): Refactored chats

* ♻️ (aouth): Refactored aouth depending on backend changes

* 🐛 (oauth): Fix request type in google oauth

* 🎉 (oauth): Integrated with backend

* (CI) Added a github action to trigger jenkins pipelines (#43)

* :sparkles: (block): view block list +  add/remove users from block list (#44)

* :sparkles: (privacy-settings): View block list finished

* :sparkles: (block): add/remove user from block list

* :lipstick: (block):  adding scrollbar styling

* :twisted_rightwards_arrows: Merging dev

* :bug: fixing merging bugs

* feat(devices): devices and session management + add animations (#46)

* chore: resolve dev conflicts

* feat(devices): logout other sessions

* socket and messages infrastructure setup (#45)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* Add nginx configuration (#47)

* :bug: (block): adding data-testid prop (#48)

---------

Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

* (hot fix) add packages json of socket-io client (#50)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* hotfix: fix responsive not working missing meta viewport width (#51)

* 💄 (messaging): Added chat layout

* ✨ (messages): Send messages by sockets (only one user yet)

* 🔀 Merging with dev

* ✨ (messaging): Two users sending messages

---------

Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>
---
 app/src/mocks/data/users.ts                        |  2 +-
 app/src/mocks/profile-settings/profile-settings.ts |  6 ++++--
 app/src/mocks/userauth/login.ts                    | 13 ++++++++++---
 app/src/sockets/SocketProvider.tsx                 |  2 +-
 app/src/state/messages/messages.ts                 |  1 +
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/src/mocks/data/users.ts b/app/src/mocks/data/users.ts
index 5e50b787..1f299f19 100644
--- a/app/src/mocks/data/users.ts
+++ b/app/src/mocks/data/users.ts
@@ -12,7 +12,6 @@ export const MOCK_USER1 = {
   screenName: "John Doe",
 };
 
-
 export const MOCK_USER2 = {
   id: "2",
   email: "ay7aga@example.com",
@@ -50,6 +49,7 @@ export const MOCK_MY_STORIES = [
     views: 20,
   },
 ];
+
 export const MOCK_OTHER_USER_STORIES = [
   {
     content:
diff --git a/app/src/mocks/profile-settings/profile-settings.ts b/app/src/mocks/profile-settings/profile-settings.ts
index b10ab8e6..7c131b5f 100644
--- a/app/src/mocks/profile-settings/profile-settings.ts
+++ b/app/src/mocks/profile-settings/profile-settings.ts
@@ -1,5 +1,7 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_USER1 } from "@mocks/data/users";
+
+const savedUser = localStorage.getItem("user");
+const user = savedUser ? JSON.parse(savedUser) : null;
 
 export const profileSettingsMock = [
   http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
@@ -11,7 +13,7 @@ export const profileSettingsMock = [
       {
         status: "success",
         data: {
-          user: MOCK_USER1,
+          user,
         },
       },
       { status: 200 }
diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index d4e868e6..7051015b 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -1,5 +1,6 @@
-import { MOCK_USER1, TOKEN } from "@mocks/data/users";
+import { MOCK_USER1, MOCK_USER2, TOKEN } from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
+import { userInfoInterface } from "types/user";
 
 type LoginRequestBody = {
   email: string;
@@ -34,7 +35,8 @@ export const loginMock = [
       const { email, password } = await request.json();
 
       const isValidUser =
-        email === MOCK_USER1.email && password === MOCK_USER1.password;
+        (email === MOCK_USER1.email && password === MOCK_USER1.password) ||
+        (email === MOCK_USER2.email && password === MOCK_USER2.password);
 
       if (!isValidUser) {
         return HttpResponse.json(
@@ -44,15 +46,18 @@ export const loginMock = [
             data: {},
           },
           { status: 401 }
+          { status: 401 }
         );
       }
 
+      const loggedInUser = MOCK_USER1.email === email ? MOCK_USER1 : MOCK_USER2;
+      localStorage.setItem("user", JSON.stringify(loggedInUser));
       return HttpResponse.json(
         {
           message: "Successful login",
           status: "success",
           data: {
-            user: MOCK_USER1,
+            user: loggedInUser,
             sessionID: TOKEN,
           },
         },
@@ -62,7 +67,9 @@ export const loginMock = [
             "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
           },
         }
+        }
       );
     }
+    }
   ),
 ];
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 2bf81d5c..249d2c59 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -77,7 +77,7 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   const sendMessage = (message: MessageInterface) => {
     if (isConnected) {
-      socket.emit("send_message", { message });
+      socket.emit("send_message",  message );
     } else {
       console.warn("Cannot send message: not connected to socket server");
     }
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index 5a0c7dd8..095a65ee 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -17,6 +17,7 @@ const messagesSlice = createSlice({
   initialState,
   reducers: {
     addMessage: (state, action: PayloadAction<MessageInterface>) => {
+      console.log(action.payload);
       state.messages.push(action.payload);
     },
 

From 70b6a1d07d0bf6f59722c5322463cacd9aa913a5 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 29 Nov 2024 03:05:15 +0200
Subject: [PATCH 024/136] =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F=20Fix=20merge=20e?=
 =?UTF-8?q?rror=20in=20login=20mock=20(#60)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/mocks/userauth/login.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index 7051015b..f465ce19 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -1,6 +1,5 @@
 import { MOCK_USER1, MOCK_USER2, TOKEN } from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
-import { userInfoInterface } from "types/user";
 
 type LoginRequestBody = {
   email: string;
@@ -46,7 +45,6 @@ export const loginMock = [
             data: {},
           },
           { status: 401 }
-          { status: 401 }
         );
       }
 
@@ -67,9 +65,7 @@ export const loginMock = [
             "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
           },
         }
-        }
       );
     }
-    }
   ),
 ];

From 2295de75b7b21ecf7d446fa0f1f213be0620843b Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Fri, 29 Nov 2024 07:50:43 +0200
Subject: [PATCH 025/136] Feature/story upload (#56)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

* ✨ (feat

(feat): add profile picture mock

* 🐛 Fix(update-profile-picture): fix the blob

fix(update-profile-picture): fix the blob

* 💄 Feat: StoryIcon UI

Feat: StoryIcon UI

* 🐛 Fix(sidebar): fix the searchbar responsiveness

fix(sidebar): fix the searchbar responsiveness

* 📱 Fix(sidebar): make sidebar responsive

fix(sidebar): make sidebar responsive

* 🐛 Fix(user): fix importing privacy states

fix(user): fix importing privacy states

* ✨ Feat(stories): create stories

feat(stories): create stories

* added view stories feature

* merge stories with dev

* make storylist scrollable

* remove dummy code

* (fix): fix stories styling bugs
---
 app/package-lock.json                         |  25 +++
 app/package.json                              |   3 +
 app/src/components/AppLayout.tsx              |   7 +-
 app/src/components/Avatar.tsx                 |  38 ++++
 app/src/components/CircleIcon.tsx             |  22 +-
 app/src/components/CloseButton.tsx            |  24 ++
 app/src/components/CollapsedList.tsx          |  48 ++++
 app/src/components/ImageEditor.tsx            |  41 +++-
 app/src/components/Popup.tsx                  |  44 ++++
 .../side-bar/chats/ChatsSideBar.tsx           |  33 +--
 .../side-bar/chats/ChatsSideBarHeader.tsx     |   9 +-
 .../components/side-bar/chats/SearchBar.tsx   |   2 +
 .../side-bar/chats/SideBarToolsButton.tsx     |   1 +
 app/src/constants.ts                          |   4 +-
 app/src/data/deviceSize.ts                    |  10 -
 app/src/data/icons.tsx                        |  31 ++-
 .../authentication/login/services/apiLogin.ts |   1 -
 .../chats/StartNewChat.tsx                    |  39 ++--
 .../profile-settings/ProfileSettings.tsx      |   7 +-
 .../features/stories/components/AddStory.tsx  | 105 +++++++++
 app/src/features/stories/components/Story.tsx |  73 ++++++
 .../features/stories/components/StoryIcon.tsx | 107 +++++++++
 .../features/stories/components/StoryList.tsx | 124 ++++++++++
 .../stories/components/StoryListContainer.tsx |  74 ++++++
 .../stories/components/StoryPreview.tsx       | 125 +++++++++++
 .../stories/components/StorySlide.tsx         | 211 ++++++++++++++++++
 .../stories/components/StorySlideCounter.tsx  |  81 +++++++
 .../stories/components/StorySliderTooltip.tsx |  44 ++++
 .../stories/components/StoryViews.tsx         | 116 ++++++++++
 .../features/stories/components/UserInfo.tsx  |  54 +++++
 .../features/stories/hooks/useDeleteStory.ts  |  28 +++
 app/src/features/stories/hooks/useInView.ts   |  26 +++
 .../features/stories/hooks/useMyStories.ts    |  17 ++
 .../features/stories/hooks/usePostStory.ts    |  28 +++
 app/src/features/stories/hooks/useStories.ts  |  18 ++
 .../features/stories/hooks/useViewStory.ts    |  26 +++
 app/src/features/stories/hooks/useViews.ts    |  18 ++
 .../features/stories/services/deleteStory.ts  |  18 ++
 .../features/stories/services/getMyStories.ts |  22 ++
 .../features/stories/services/getStories.ts   |  22 ++
 app/src/features/stories/services/getViews.ts |  21 ++
 .../features/stories/services/postStory.ts    |  27 +++
 .../features/stories/services/viewStory.ts    |  22 ++
 app/src/hooks/useIndexedDB.ts                 |  45 ++++
 app/src/mocks/stories/mockStoriesData.ts      | 149 +++++++++++++
 app/src/mocks/stories/stories.ts              | 175 ++++++++++-----
 app/src/styles/GlobalStyles.tsx               |  16 +-
 app/src/types/story.ts                        |  21 +-
 app/src/utils/helpers.ts                      |  35 +++
 49 files changed, 2098 insertions(+), 139 deletions(-)
 create mode 100644 app/src/components/Avatar.tsx
 create mode 100644 app/src/components/CloseButton.tsx
 create mode 100644 app/src/components/CollapsedList.tsx
 create mode 100644 app/src/components/Popup.tsx
 delete mode 100644 app/src/data/deviceSize.ts
 rename app/src/{components/side-bar => features}/chats/StartNewChat.tsx (72%)
 create mode 100644 app/src/features/stories/components/AddStory.tsx
 create mode 100644 app/src/features/stories/components/Story.tsx
 create mode 100644 app/src/features/stories/components/StoryIcon.tsx
 create mode 100644 app/src/features/stories/components/StoryList.tsx
 create mode 100644 app/src/features/stories/components/StoryListContainer.tsx
 create mode 100644 app/src/features/stories/components/StoryPreview.tsx
 create mode 100644 app/src/features/stories/components/StorySlide.tsx
 create mode 100644 app/src/features/stories/components/StorySlideCounter.tsx
 create mode 100644 app/src/features/stories/components/StorySliderTooltip.tsx
 create mode 100644 app/src/features/stories/components/StoryViews.tsx
 create mode 100644 app/src/features/stories/components/UserInfo.tsx
 create mode 100644 app/src/features/stories/hooks/useDeleteStory.ts
 create mode 100644 app/src/features/stories/hooks/useInView.ts
 create mode 100644 app/src/features/stories/hooks/useMyStories.ts
 create mode 100644 app/src/features/stories/hooks/usePostStory.ts
 create mode 100644 app/src/features/stories/hooks/useStories.ts
 create mode 100644 app/src/features/stories/hooks/useViewStory.ts
 create mode 100644 app/src/features/stories/hooks/useViews.ts
 create mode 100644 app/src/features/stories/services/deleteStory.ts
 create mode 100644 app/src/features/stories/services/getMyStories.ts
 create mode 100644 app/src/features/stories/services/getStories.ts
 create mode 100644 app/src/features/stories/services/getViews.ts
 create mode 100644 app/src/features/stories/services/postStory.ts
 create mode 100644 app/src/features/stories/services/viewStory.ts
 create mode 100644 app/src/hooks/useIndexedDB.ts
 create mode 100644 app/src/mocks/stories/mockStoriesData.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index cfaa0c87..51c44116 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -18,6 +18,7 @@
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
         "date-fns": "^4.1.0",
+        "idb": "^8.0.0",
         "lottie-react": "^2.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -26,6 +27,7 @@
         "react-hook-form": "^7.53.0",
         "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
+        "react-modal-image": "^2.6.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
         "socket-client": "^1.0.0",
@@ -47,6 +49,7 @@
         "@types/jest": "^29.5.14",
         "@types/react": "^18.3.10",
         "@types/react-dom": "^18.3.0",
+        "@types/react-modal-image": "^2.6.3",
         "@types/redux-mock-store": "^1.0.6",
         "@vitejs/plugin-react": "^4.3.2",
         "babel-jest": "^29.7.0",
@@ -4664,6 +4667,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal-image": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal-image/-/react-modal-image-2.6.3.tgz",
+      "integrity": "sha512-Uh4joinWiyRD2e4Q+MRiMiQfz7K7W16peF2xfEx821t7p6O6sG4xi42uuN5tsYhx1mTOsagUPqIQiWcYgKtkww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-reconciler": {
       "version": "0.28.8",
       "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.8.tgz",
@@ -7175,6 +7188,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz",
+      "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==",
+      "license": "ISC"
+    },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
@@ -9810,6 +9829,12 @@
         "react-dom": ">=18.0.0"
       }
     },
+    "node_modules/react-modal-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-modal-image/-/react-modal-image-2.6.0.tgz",
+      "integrity": "sha512-NNc1xPKzFAn0VsNMdJ8NXt6c54aL/z0fcoYmw9qn4SBUONdGl+8LOQ0sTfo0wtdzcjLiby/ncloHcAL+UI+wIA==",
+      "license": "MIT"
+    },
     "node_modules/react-reconciler": {
       "version": "0.29.2",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz",
diff --git a/app/package.json b/app/package.json
index 1e763d59..3c0b40be 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
+    "idb": "^8.0.0",
     "date-fns": "^4.1.0",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
@@ -32,6 +33,7 @@
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
+    "react-modal-image": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
     "socket-client": "^1.0.0",
@@ -53,6 +55,7 @@
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "@types/react-modal-image": "^2.6.3",
     "@types/redux-mock-store": "^1.0.6",
     "@vitejs/plugin-react": "^4.3.2",
     "babel-jest": "^29.7.0",
diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index 9bccb52a..e1065583 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -1,11 +1,8 @@
 import { Outlet, useParams } from "react-router-dom";
 import styled from "styled-components";
-
-import { media } from "data/deviceSize";
-
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
-import { MOBILE_VIEW } from "@constants";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
 
 const StyledApp = styled.div<{ $isChatOpen: boolean }>`
   @media ${MOBILE_VIEW} {
@@ -18,7 +15,7 @@ const StyledApp = styled.div<{ $isChatOpen: boolean }>`
     }
   }
 
-  @media ${media.desktop} {
+  @media ${DESKTOP_VIEW} {
     display: grid;
     grid-template-columns: 2fr 5fr;
 
diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
new file mode 100644
index 00000000..131e05d1
--- /dev/null
+++ b/app/src/components/Avatar.tsx
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { getAvatarName } from "utils/helpers";
+
+const StyledAvatar = styled.div<{ $image?: string }>`
+  width: 2.625rem;
+  height: 2.625rem;
+
+  border-radius: 50%;
+  margin-right: 1rem;
+
+  background: ${({ $image }) =>
+    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  font-weight: bold;
+  font-size: 1rem;
+  text-transform: uppercase;
+`;
+
+type PropsType = {
+  image?: string | undefined;
+  name: string | undefined;
+};
+
+function Avatar({ image, name }: PropsType) {
+  return (
+    <StyledAvatar $image={image}>{!image && getAvatarName(name)}</StyledAvatar>
+  );
+}
+
+export default Avatar;
diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index bf24b33a..419c790c 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -9,7 +9,9 @@ interface CircleIconProps {
   $padding?: number;
   $color?: string;
   $bgColor?: string;
+  $opacity?: number;
   onClick?: () => void;
+  children?: React.ReactNode;
 }
 
 const StyledIcon = styled.div<CircleIconProps>`
@@ -25,9 +27,7 @@ const StyledIcon = styled.div<CircleIconProps>`
   padding: ${(props) => props.$padding}rem;
   background-color: ${(props) => props.$bgColor};
   border-radius: var(--border-radius-circle);
-  opacity: 0.9;
-  box-shadow: var(--box-shadow);
-  opacity: 0.9;
+  opacity: ${(props) => props.$opacity};
   box-shadow: var(--box-shadow);
 
   display: flex;
@@ -35,7 +35,7 @@ const StyledIcon = styled.div<CircleIconProps>`
   justify-content: center;
 
   &:hover {
-    opacity: 1;
+    scale: 1.05;
     cursor: pointer;
   }
   & > svg {
@@ -53,14 +53,26 @@ function CircleIcon({
   $padding = 0,
   $color = "var(--color-search-border)",
   $bgColor = "transparent",
+  $opacity = 0.9,
   onClick,
+  children,
 }: CircleIconProps) {
   return (
     <StyledIcon
       onClick={onClick}
-      {...{ $icon, $bottom, $right, $size, $padding, $color, $bgColor }}
+      {...{
+        $icon,
+        $bottom,
+        $right,
+        $size,
+        $padding,
+        $color,
+        $bgColor,
+        $opacity,
+      }}
     >
       {getIcon($icon)}
+      {children}
     </StyledIcon>
   );
 }
diff --git a/app/src/components/CloseButton.tsx b/app/src/components/CloseButton.tsx
new file mode 100644
index 00000000..16faed62
--- /dev/null
+++ b/app/src/components/CloseButton.tsx
@@ -0,0 +1,24 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+interface CloseButtonProps {
+  onClose: () => void;
+}
+
+const StyledCloseButton = styled.div`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: white;
+  z-index: 2000;
+`;
+
+function CloseButton(props: CloseButtonProps) {
+  const { onClose } = props;
+  return (
+    <StyledCloseButton onClick={onClose}>{getIcon("Close")}</StyledCloseButton>
+  );
+}
+
+export default CloseButton;
diff --git a/app/src/components/CollapsedList.tsx b/app/src/components/CollapsedList.tsx
new file mode 100644
index 00000000..f1531313
--- /dev/null
+++ b/app/src/components/CollapsedList.tsx
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+interface CollapsedListProps {
+  onOpen: () => void;
+  render: (data: any) => JSX.Element;
+  list: any[];
+}
+
+const StyledCollapsedContainer = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+`;
+const StyledCollapsed = styled.div<{ $index: number }>`
+  position: absolute;
+  z-index: 30 - index;
+  right: ${(props) => props.$index * 15 + 20}px;
+  top: 0.7rem;
+  transform: scale(0.8);
+  transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+`;
+
+function CollapsedList(Props: CollapsedListProps) {
+  const { onOpen, render, list } = Props;
+  const displayedItems = list?.slice(0, 3);
+
+  return (
+    <StyledCollapsedContainer onClick={onOpen}>
+      {displayedItems?.map((element, index) => (
+        <StyledCollapsed key={index} $index={index}>
+          {render(element)}
+        </StyledCollapsed>
+      ))}
+    </StyledCollapsedContainer>
+  );
+}
+
+export default CollapsedList;
diff --git a/app/src/components/ImageEditor.tsx b/app/src/components/ImageEditor.tsx
index 200edab7..31bb9322 100644
--- a/app/src/components/ImageEditor.tsx
+++ b/app/src/components/ImageEditor.tsx
@@ -10,16 +10,31 @@ interface imageEditorProps {
   src: string;
   onImageSave: (file: File) => void;
   isProfileImage?: boolean;
+  widthRatio?: number;
+  heightRatio?: number;
 }
-
-const StyledContainer = styled.div<{ $isOpen: boolean }>`
+interface styledContainerProps {
+  $widthRatio: number;
+  $heightRatio: number;
+}
+const StyledBackGround = styled.div<{ $isOpen: boolean }>`
   display: ${({ $isOpen }) => ($isOpen ? "flex" : "none")};
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 1000;
   width: 100%;
   height: 100%;
-  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+`;
+
+const StyledContainer = styled.div<styledContainerProps>`
+  width: ${(props) => props.$widthRatio}%;
+  height: ${(props) => props.$heightRatio}%;
+  display: flex;
   justify-content: center;
   align-items: center;
 `;
@@ -30,6 +45,8 @@ function ImageEditor({
   src,
   onImageSave,
   isProfileImage,
+  widthRatio = 50,
+  heightRatio = 50,
 }: imageEditorProps) {
   const handleSave = async (editedImageObject: { imageBase64?: string }) => {
     if (editedImageObject.imageBase64) {
@@ -44,13 +61,18 @@ function ImageEditor({
       onImageSave(file);
       closeImgEditor();
     } else {
-      console.error("Image base64 data is undefined");
+      throw new Error("something went wrong with image editing");
     }
   };
   return (
-    <StyledContainer $isOpen={isOpen}>
+    <StyledBackGround $isOpen={isOpen}>
       {isOpen && (
-        <div>
+        <StyledContainer
+          {...{
+            $widthRatio: widthRatio,
+            $heightRatio: heightRatio,
+          }}
+        >
           <FilerobotImageEditor
             source={src}
             forceToPngInEllipticalCrop={true}
@@ -115,17 +137,18 @@ function ImageEditor({
             tabsIds={
               isProfileImage
                 ? [TABS.ADJUST]
-                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE, TABS.RESIZE]
+                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE]
             }
             defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
             defaultToolId={TOOLS.RESIZE}
             defaultSavedImageQuality={0.95}
             savingPixelRatio={4}
             previewPixelRatio={4}
+            data-testid="image-editor"
           />
-        </div>
+        </StyledContainer>
       )}
-    </StyledContainer>
+    </StyledBackGround>
   );
 }
 
diff --git a/app/src/components/Popup.tsx b/app/src/components/Popup.tsx
new file mode 100644
index 00000000..55619678
--- /dev/null
+++ b/app/src/components/Popup.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import CloseButton from "./CloseButton";
+import ReactDOM from "react-dom";
+
+interface PopupProps {
+  onClose: () => void;
+  isOpen: boolean;
+  children: React.ReactNode;
+}
+const PopupOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+const PopupContainer = styled.div`
+  position: relative;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 100%;
+  height: 100%;
+`;
+
+function Popup({ onClose, isOpen, children }: PopupProps) {
+  if (!isOpen) return null;
+  return ReactDOM.createPortal(
+    <PopupOverlay>
+      <PopupContainer>
+        <CloseButton onClose={onClose} />
+        {children}
+      </PopupContainer>
+    </PopupOverlay>,
+    document.body
+  );
+}
+export default Popup;
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index ef74ef95..c0f2666e 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -1,7 +1,8 @@
 import styled from "styled-components";
-import CircleIcon from "../../CircleIcon";
 import ChatsSidebarHeader from "./ChatsSideBarHeader";
-import StartNewChat from "./StartNewChat";
+import StartNewChat from "@features/chats/StartNewChat";
+import AddStory from "@features/stories/components/AddStory";
+import StoryListContainer from "@features/stories/components/StoryListContainer";
 
 interface ChatsSideBarProps {
   children?: React.ReactNode;
@@ -11,27 +12,31 @@ interface ChatsSideBarProps {
 const StyledChatsSideBar = styled.div`
   height: 100vh;
   color: var(--color-icon-secondary);
-
   background-color: var(--color-background);
   overflow-y: auto;
+  overflow-x: hidden;
   position: relative;
 `;
+const StyledButtonContainer = styled.div`
+  position: sticky;
+  bottom: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: end;
+  flex-direction: column-reverse;
+  gap: 4rem;
+`;
 function ChatsSideBar({ children }: ChatsSideBarProps) {
   return (
     <StyledChatsSideBar>
       <ChatsSidebarHeader />
+      <StoryListContainer />
       {children}
-      <CircleIcon
-        data-testid="add-story-icon"
-        $icon="AddStory"
-        $right={1}
-        $bottom={1}
-        $size={3.3}
-        $padding={0.5}
-        $color="white"
-        $bgColor="var(--accent-color)"
-      />
-      <StartNewChat />
+      <StyledButtonContainer>
+        <AddStory />
+        <StartNewChat />
+      </StyledButtonContainer>
     </StyledChatsSideBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
index 8cd3a43c..e7da3643 100644
--- a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
@@ -1,21 +1,16 @@
 import styled from "styled-components";
-
 import SideBarToolsButton from "./SideBarToolsButton";
 import SearchBar from "./SearchBar";
 
 const StyledHeader = styled.header`
   background: var(--color-background);
-  
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
-  
-  padding: 0.375rem 0.8125rem 0.5rem 1.3rem;
+  padding: 0.375rem 0.8125rem 0.5rem 1.295rem;
+  position: relative;
   height: 4rem;
-  
-  position: sticky;
-  top: 0;
 `;
 
 function ChatsSidebarHeader() {
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index 42822810..e3be439b 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -4,6 +4,8 @@ import { SearchOutlined } from "@mui/icons-material";
 const StyledSearchBar = styled.div`
   margin-left: 1rem;
   position: relative;
+  width: 100%;
+
   &:focus-within > svg {
     color: var(--color-search-border);
   }
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index cf348ebb..a81bf9d3 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -34,6 +34,7 @@ const StyledList = styled.ul<{ $isOpened?: boolean }>`
   box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
   border-radius: var(--border-radius-default);
   visibility: ${({ $isOpened }) => ($isOpened ? "visible" : "hidden")};
+  z-index: 2000;
 `;
 
 function SettingsToolbar() {
diff --git a/app/src/constants.ts b/app/src/constants.ts
index b5134a8e..5bfbde17 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -8,6 +8,7 @@ const {
 } = import.meta.env;
 
 const MOBILE_VIEW = "(max-width: 600px)";
+const DESKTOP_VIEW = "(min-width: 600px)";
 
 export {
   ENVIRONMENT,
@@ -15,6 +16,7 @@ export {
   API_URL,
   PORT,
   ENV,
-  MOBILE_VIEW,
   STATIC_MEDIA_URL,
+  MOBILE_VIEW,
+  DESKTOP_VIEW,
 };
diff --git a/app/src/data/deviceSize.ts b/app/src/data/deviceSize.ts
deleted file mode 100644
index c150109a..00000000
--- a/app/src/data/deviceSize.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const sizes = {
-  mobile: "480px",
-  desktop: "600px",
-};
-
-const media = {
-  mobile: `(max-width: ${sizes.desktop})`,
-  desktop: `(min-width: ${sizes.desktop})`,
-};
-export { sizes, media };
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index a4991c49..fa78cfcb 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -31,7 +31,11 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import CircularProgress from "@mui/material/CircularProgress";
+import KeyboardArrowLeftOutlinedIcon from "@mui/icons-material/KeyboardArrowLeftOutlined";
+import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRightOutlined";
 import SendIcon from "@mui/icons-material/Send";
+import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 
 enum icons {
   BlockIcon,
@@ -63,12 +67,16 @@ enum icons {
   Search,
   Delete,
   AddPhoto,
+  Send,
+  Pause,
+  Play,
   CalendarToday,
   KeyboardArrowUp,
   KeyboardArrowDown,
   ContentCopy,
   CircularProgress,
-  SendMessage,
+  RightArrow,
+  LeftArrow,
 }
 
 type iconStrings = keyof typeof icons;
@@ -236,6 +244,9 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
+  Send: <SendIcon />,
+  Pause: <PauseOutlinedIcon />,
+  Play: <PlayArrowIcon />,
   CalendarToday: (
     <CalendarTodayIcon
       sx={{
@@ -277,8 +288,22 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       style={{ width: "1.5rem", height: "1.5rem" }}
     />
   ),
-
-  SendMessage: <SendIcon />,
+  RightArrow: (
+    <KeyboardArrowRightOutlinedIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "3.5rem",
+      }}
+    />
+  ),
+  LeftArrow: (
+    <KeyboardArrowLeftOutlinedIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "3.5rem",
+      }}
+    />
+  ),
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/authentication/login/services/apiLogin.ts b/app/src/features/authentication/login/services/apiLogin.ts
index ab88294f..94384522 100644
--- a/app/src/features/authentication/login/services/apiLogin.ts
+++ b/app/src/features/authentication/login/services/apiLogin.ts
@@ -13,7 +13,6 @@ export async function login(user: User) {
   });
 
   const data = await res.json();
-
   if (data.status !== "success") {
     throw new Error(data.message);
   }
diff --git a/app/src/components/side-bar/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
similarity index 72%
rename from app/src/components/side-bar/chats/StartNewChat.tsx
rename to app/src/features/chats/StartNewChat.tsx
index 84d1d09f..1de9c7f7 100644
--- a/app/src/components/side-bar/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import styled from "styled-components";
-import SideBarMenuItem, { SideBarMenuItemProps } from "./SideBarMenuItem";
+import SideBarMenuItem, {
+  SideBarMenuItemProps,
+} from "@components/side-bar/chats/SideBarMenuItem";
 import CircleIcon from "@components/CircleIcon";
 import { useMouseLeave } from "@hooks/useMouseLeave";
 
@@ -14,6 +16,13 @@ const items: SideBarMenuItemProps[] = [
   { title: "New Group", iconMapValue: "NewGroup" },
   { title: "New Chat", iconMapValue: "NewChat" },
 ];
+
+const StyledCircleIconContainer = styled.div`
+  cursor: pointer;
+  position: relative;
+  height: 3.5rem;
+  width: 3.5rem;
+`;
 const menuStyles: StyledListProps = {
   $bottom: 5,
   $right: 1.25,
@@ -23,9 +32,7 @@ const menuStyles: StyledListProps = {
 const StyledList = styled.ul<StyledListProps>`
   position: absolute;
   width: ${(props) => props.$size}rem;
-
   right: ${(props) => (props.$right ?? 3) + 2}rem;
-
   bottom: ${(props) => (props.$bottom ?? 3) + 3}rem;
   display: flex;
   flex-direction: column;
@@ -35,7 +42,6 @@ const StyledList = styled.ul<StyledListProps>`
   padding: 0.5rem 0.2rem;
   background-color: var(--color-background);
   box-shadow: var(--box-shadow);
-  box-shadow: var(--box-shadow);
   border-radius: var(--border-radius-default);
 `;
 
@@ -47,17 +53,20 @@ function StartNewChat() {
   };
   return (
     <>
-      <CircleIcon
-        data-testid="start-new-chat-icon"
-        $icon={isMenuOpened ? "Close" : "Edit"}
-        $right={1.25}
-        $bottom={5}
-        $size={2.8}
-        $padding={0.5}
-        $color="var(--color-icon-secondary)"
-        $bgColor="var(--color-pattern)"
-        onClick={handleOpenMenu}
-      />
+      <StyledCircleIconContainer>
+        <CircleIcon
+          data-testid="start-new-chat-icon"
+          $icon={isMenuOpened ? "Close" : "Edit"}
+          $right={0.5}
+          $bottom={0}
+          $size={2.8}
+          $padding={0.5}
+          $color="var(--color-icon-secondary)"
+          $bgColor="var(--new-chat-color)"
+          $opacity={1}
+          onClick={handleOpenMenu}
+        />
+      </StyledCircleIconContainer>
       {isMenuOpened && (
         <StyledList
           {...menuStyles}
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 9bdd21d4..13464c2a 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -24,7 +24,6 @@ import { useDeleteProfilePicture } from "./hooks/useDeleteProfilePicture";
 
 const SideBarContainer = styled.div`
   overflow-y: auto;
-
   & > form {
     display: flex;
     flex-direction: column;
@@ -217,7 +216,7 @@ function ProfileSettings() {
   const userHandle = `https://telware.tech/${watch("username") || "username"}`;
 
   const handleImageUpload = async (
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     if (event.target.files) {
       setPhotoChanged(true);
@@ -249,12 +248,12 @@ function ProfileSettings() {
           updateSideBarView({
             redirect: sideBarPages.SETTINGS,
             data: undefined,
-          }),
+          })
         );
       }
     } catch (error) {
       toast.error(
-        (error as Error).message || "Failed to update profile settings",
+        (error as Error).message || "Failed to update profile settings"
       );
     }
   };
diff --git a/app/src/features/stories/components/AddStory.tsx b/app/src/features/stories/components/AddStory.tsx
new file mode 100644
index 00000000..fe5ee08d
--- /dev/null
+++ b/app/src/features/stories/components/AddStory.tsx
@@ -0,0 +1,105 @@
+import { useRef, useState } from "react";
+import styled from "styled-components";
+import CircleIcon from "@components/CircleIcon";
+import ImageEditor from "@components/ImageEditor";
+import Popup from "@components/Popup";
+import StoryPreview from "./StoryPreview";
+import toast from "react-hot-toast";
+
+const StyledStoryCreator = styled.div`
+  cursor: pointer;
+`;
+const StyledImageInput = styled.input`
+  position: absolute;
+  bottom: 0;
+  right: 2rem;
+  height: 3.3rem;
+  width: 3.3rem;
+  padding: 0.5rem;
+  border-radius: 50%;
+  opacity: 0;
+  z-index: -1;
+  cursor: pointer;
+`;
+
+function AddStory() {
+  const [isImageEditorOpen, setIsImageEditorOpen] = useState(false);
+  const [isPreviewOpened, setIsPreviewOpened] = useState(false);
+  const [story, setStory] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file?.type.includes("tif") || file?.type.includes("tiff")) {
+      toast.error("TIF files are not supported");
+      return;
+    }
+    if (file) {
+      setStory(file);
+      setIsImageEditorOpen(true);
+    }
+  };
+  const handleClose = () => {
+    setIsImageEditorOpen(false);
+  };
+
+  const handleFinishEditting = (story: File) => {
+    setStory(story);
+    setIsImageEditorOpen(false);
+    setIsPreviewOpened(true);
+  };
+
+  const handleAddStoryClicked = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      <StyledStoryCreator onClick={handleAddStoryClicked}>
+        <CircleIcon
+          data-testid="add-story-icon"
+          $icon="AddStory"
+          $right={0.25}
+          $bottom={0}
+          $size={3.3}
+          $padding={0.5}
+          $color="white"
+          $bgColor="var(--accent-color)"
+          $opacity={1}
+        />
+        <StyledImageInput
+          type="file"
+          ref={fileInputRef}
+          accept="image/*"
+          onChange={handleImageUpload}
+          data-testid="story-upload"
+          id="story-upload"
+        />
+      </StyledStoryCreator>
+
+      {
+        <Popup
+          isOpen={isImageEditorOpen}
+          onClose={() => setIsImageEditorOpen(false)}
+        >
+          <ImageEditor
+            src={story ? URL.createObjectURL(story) : ""}
+            isOpen={isImageEditorOpen}
+            closeImgEditor={handleClose}
+            onImageSave={handleFinishEditting}
+            isProfileImage={false}
+            widthRatio={80}
+            heightRatio={80}
+          />
+        </Popup>
+      }
+      <StoryPreview
+        isOpen={isPreviewOpened && !!story}
+        onClose={() => setIsPreviewOpened(false)}
+        story={story}
+      />
+    </>
+  );
+}
+
+export default AddStory;
diff --git a/app/src/features/stories/components/Story.tsx b/app/src/features/stories/components/Story.tsx
new file mode 100644
index 00000000..3b2a0326
--- /dev/null
+++ b/app/src/features/stories/components/Story.tsx
@@ -0,0 +1,73 @@
+import { STATIC_MEDIA_URL } from "@constants";
+import ModalImage from "react-modal-image";
+import styled from "styled-components";
+
+interface StoryProps {
+  content: string;
+  caption: string;
+}
+const StyledImageContainer = styled.div`
+  position: relative;
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-background);
+    border-radius: var(--border-radius-default);
+    width: 100%;
+    height: 100%;
+    img {
+      width: 100vw;
+      height: 100vh;
+      object-fit: cover !important;
+    }
+  }
+  ::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.2) 0%,
+      rgba(0, 0, 0, 0.2) 12%,
+      transparent 13%,
+      transparent 100%
+    );
+  }
+`;
+const StyledCaption = styled.p<{ $captionLength: number }>`
+  position: absolute;
+  bottom: ${({ $captionLength }) =>
+    `clamp(5%, ${Math.max(2, 8 - $captionLength * 0.01)}vh, 15%)`};
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 0.5rem;
+  text-align: center;
+
+  font-size: ${({ $captionLength }) =>
+    `clamp(1rem, ${Math.max(2.5 - $captionLength * 0.02, 1)}vw, 2.5rem)`};
+`;
+function Story(props: StoryProps) {
+  const { content, caption } = props;
+  return (
+    <StyledImageContainer>
+      <ModalImage
+        small={STATIC_MEDIA_URL + content}
+        large={STATIC_MEDIA_URL + content}
+        alt={caption}
+        hideDownload={true}
+        hideZoom={true}
+      />
+      {caption && (
+        <StyledCaption $captionLength={caption.length}>{caption}</StyledCaption>
+      )}
+    </StyledImageContainer>
+  );
+}
+
+export default Story;
diff --git a/app/src/features/stories/components/StoryIcon.tsx b/app/src/features/stories/components/StoryIcon.tsx
new file mode 100644
index 00000000..0e5b3b65
--- /dev/null
+++ b/app/src/features/stories/components/StoryIcon.tsx
@@ -0,0 +1,107 @@
+import styled from "styled-components";
+import { story } from "types/story";
+import Avatar from "@components/Avatar";
+
+interface StoryIconProps {
+  stories: story[];
+  avatar?: string;
+  name: string;
+  onView?: (userId: string) => void;
+  isCollapsed?: boolean;
+  userId?: string;
+  isMyStory?: boolean;
+}
+
+const StyledContainer = styled.div<{ $isCollapsed: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+
+  padding: ${(props) => (props.$isCollapsed ? "0" : "0.5rem")};
+  min-width: ${(props) => (props.$isCollapsed ? "55px" : "90px")};
+  border-radius: ${(props) =>
+    props.$isCollapsed
+      ? "var(--border-radius-circle)"
+      : "var(--border-radius-default)"};
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+`;
+const StyledImageContainer = styled.div<{
+  $segmentColors: string;
+  $isMyStory?: boolean;
+}>`
+  height: 48px;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: ${(props) =>
+    props?.$isMyStory
+      ? "var(--accent-color)"
+      : `conic-gradient(${props.$segmentColors})`};
+  padding: 3px;
+  display: block;
+`;
+
+const StyledName = styled.p`
+  margin-top: 0.3rem;
+  font-size: 0.7rem;
+  color: var(--secondary-text-color);
+  text-align: center;
+  white-space: nowrap;
+`;
+
+function StoryIcon(props: StoryIconProps) {
+  const {
+    stories,
+    avatar,
+    name,
+    userId,
+    onView,
+    isMyStory,
+    isCollapsed = false,
+  } = props;
+
+  let segmentColors = "";
+  if (!isMyStory) {
+    const segmentDegree = 360 / stories.length;
+    segmentColors = stories
+      .map((story, index) =>
+        story.viewed
+          ? `gray ${index * segmentDegree}deg ${(index + 1) * segmentDegree}deg`
+          : `var(--accent-color) ${index * segmentDegree}deg ${(index + 1) * segmentDegree}deg`
+      )
+      .join(", ");
+  }
+
+  const firstName =
+    name?.split(" ")[0]?.slice(0, 4) +
+      (name?.split(" ")[0]?.length > 4 ? "..." : "") || "";
+  const lastName =
+    name?.split(" ")[1]?.slice(0, 4) +
+      (name?.split(" ")[1]?.length > 4 ? "..." : "") || "";
+  const displayName = `${firstName} ${lastName}`.trim();
+
+  const handleIconClicked = () => {
+    if (userId && onView) {
+      onView(userId);
+    }
+  };
+
+  return (
+    <StyledContainer $isCollapsed={isCollapsed} onClick={handleIconClicked}>
+      <StyledImageContainer
+        $segmentColors={segmentColors}
+        $isMyStory={isMyStory}
+      >
+        <Avatar name={name} image={avatar} />
+      </StyledImageContainer>
+      {!isCollapsed && <StyledName>{displayName}</StyledName>}
+    </StyledContainer>
+  );
+}
+
+export default StoryIcon;
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
new file mode 100644
index 00000000..514483ae
--- /dev/null
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -0,0 +1,124 @@
+import styled from "styled-components";
+import StoryIcon from "./StoryIcon";
+import { story, userStories } from "types/story";
+import StorySlide from "./StorySlide";
+import { useEffect, useState } from "react";
+import { Close } from "@mui/icons-material";
+import CloseButton from "@components/CloseButton";
+
+interface StoryListProps {
+  userStories: userStories[];
+  myStories: story[];
+  onClose: () => void;
+  userInfo: {
+    screenName: string;
+    photo?: string;
+  };
+}
+
+const StyledStoryListContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 10rem;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledStoryList = styled.ul`
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  overflow-x: auto;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  &::-webkit-scrollbar {
+    display: block;
+    height: 0.4rem;
+  }
+`;
+function StoryList(props: StoryListProps) {
+  const { userStories, myStories, userInfo, onClose } = props;
+  const [currentStoryUserId, setCurrentStoryUserId] = useState("");
+  const [userName, setUserName] = useState("");
+  const [userAvatar, setUserAvatar] = useState("");
+  const [stories, setStories] = useState<story[]>([]);
+  const handleStoryClick = (userId: string) => {
+    setCurrentStoryUserId(userId);
+    setUserName("");
+    setUserAvatar("");
+    setStories([]);
+  };
+  useEffect(() => {
+    if (currentStoryUserId) {
+      setUserName(
+        currentStoryUserId == "me"
+          ? "My Story"
+          : userStories.find((user) => user.id === currentStoryUserId)?.name ||
+              ""
+      );
+      setUserAvatar(
+        currentStoryUserId == "me"
+          ? userInfo.photo || ""
+          : userStories.find((user) => user.id === currentStoryUserId)
+              ?.avatar || ""
+      );
+      setStories(
+        currentStoryUserId == "me"
+          ? myStories
+          : userStories.find((user) => user.id === currentStoryUserId)
+              ?.stories || []
+      );
+    }
+  }, [
+    currentStoryUserId,
+    userStories,
+    userInfo.screenName,
+    userInfo.photo,
+    myStories,
+  ]);
+  return (
+    <>
+      {currentStoryUserId && (
+        <StorySlide
+          userId={currentStoryUserId}
+          name={userName}
+          avatar={userAvatar}
+          getNextUserStories={() => handleStoryClick("")}
+          stories={stories}
+          onClose={() => handleStoryClick("")}
+        />
+      )}
+      <StyledStoryListContainer>
+        <CloseButton onClose={onClose} data-testid="close-story-list" />
+        <StyledStoryList data-testid="storylist">
+          {myStories.length > 0 && (
+            <StoryIcon
+              data-testid="my-story-icon"
+              name="My Story"
+              avatar={userInfo.photo}
+              stories={myStories}
+              isMyStory={true}
+              onView={handleStoryClick}
+              userId="me"
+            />
+          )}
+          {userStories.map((userStory: userStories) => (
+            <StoryIcon
+              key={userStory.id}
+              data-testid={`story-icon-${userStory.id}`}
+              name={userStory.name}
+              avatar={userStory.avatar}
+              stories={userStory.stories}
+              userId={userStory.id}
+              onView={handleStoryClick}
+            />
+          ))}
+        </StyledStoryList>
+      </StyledStoryListContainer>
+    </>
+  );
+}
+
+export default StoryList;
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
new file mode 100644
index 00000000..0c3a046a
--- /dev/null
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import styled, { css } from "styled-components";
+import { useStroies } from "../hooks/useStories";
+import { useMyStroies } from "../hooks/useMyStories";
+import { useAppSelector } from "@hooks/useGlobalState";
+import CollapsedList from "@components/CollapsedList";
+import StoryList from "./StoryList";
+import StoryIcon from "./StoryIcon";
+
+const StyledContainer = styled.div<{ $isOpened: boolean }>`
+  width: 100%;
+  ${(props) =>
+    !props.$isOpened
+      ? css`
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: flex;
+          justify-content: end;
+          align-items: end;
+          flex-direction: row;
+        `
+      : css`
+          position: relative;
+          height: 10rem;
+          margin-bottom: -1rem;
+        `}
+  z-index: 100;
+`;
+
+function StoryListContainer() {
+  const [isOpened, setIsOpened] = useState(false);
+  const { stories: userStoriesData } = useStroies();
+
+  const userStories = userStoriesData?.data;
+
+  const { myStories: myStoriesData } = useMyStroies();
+  const myStories = myStoriesData?.data;
+  const { userInfo } = useAppSelector((state) => state.user);
+
+  const handleOpen = () => {
+    setIsOpened(true);
+  };
+  return (
+    <StyledContainer $isOpened={isOpened} data-testid="story-list-container">
+      {isOpened ? (
+        <StoryList
+          userStories={userStories}
+          userInfo={userInfo}
+          myStories={myStories}
+          data-testid="story-list"
+          onClose={() => setIsOpened(false)}
+        />
+      ) : (
+        <CollapsedList
+          data-testid="stories-collapsed-list"
+          onOpen={handleOpen}
+          render={(userStory) => (
+            <StoryIcon
+              isCollapsed={true}
+              name={userStory.name}
+              avatar={userStory.avatar}
+              stories={userStory.stories}
+              data-testid={`story-icon-${userStory.id}`}
+            />
+          )}
+          list={userStories}
+        />
+      )}
+    </StyledContainer>
+  );
+}
+
+export default StoryListContainer;
diff --git a/app/src/features/stories/components/StoryPreview.tsx b/app/src/features/stories/components/StoryPreview.tsx
new file mode 100644
index 00000000..5f0a9a78
--- /dev/null
+++ b/app/src/features/stories/components/StoryPreview.tsx
@@ -0,0 +1,125 @@
+import Popup from "@components/Popup";
+import { getIcon } from "@data/icons";
+import ModalImage from "react-modal-image";
+import styled from "styled-components";
+import { usePostStory } from "../hooks/usePostStory";
+import { useState } from "react";
+
+interface StoryPreviewProps {
+  story: File | null;
+  onClose: () => void;
+  isOpen: boolean;
+}
+const StyledContainer = styled.div`
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #000;
+`;
+const StyledImageContainer = styled.div`
+  width: 80%;
+  height: 80%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-background);
+    border-radius: var(--border-radius-default);
+    img {
+      width: 80vw;
+      height: 80vh;
+      object-fit: cover !important;
+    }
+  }
+`;
+const StyledCaption = styled.input`
+  width: 80%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-background);
+  color: var(--text-color);
+  font-size: 1rem;
+`;
+const SendContainer = styled.form`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+`;
+const SubmitButton = styled.button`
+  --button-width: 3.2rem;
+  background-color: var(--accent-color);
+  color: white;
+  width: var(--button-width);
+  height: var(--button-width);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  box-shadow: 0 0 0.1rem var(--accent-color);
+`;
+
+function StoryPreview(props: StoryPreviewProps) {
+  const { story, onClose, isOpen } = props;
+  const [caption, setCaption] = useState("");
+  const { postStory } = usePostStory();
+  const sendStory = () => {
+    if (story) postStory({ story, caption });
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setCaption("");
+    onClose();
+  };
+  if (!story) return null;
+  return (
+    <Popup isOpen={isOpen} onClose={handleClose}>
+      <StyledContainer>
+        <StyledImageContainer>
+          <ModalImage
+            small={URL.createObjectURL(story!)}
+            medium={URL.createObjectURL(story!)}
+            alt="story"
+          />
+        </StyledImageContainer>
+        <SendContainer>
+          <StyledCaption
+            type="text"
+            id="caption"
+            data-testid="caption"
+            onChange={(e) => setCaption(e.target.value)}
+            placeholder="Add a caption"
+            value={caption}
+            maxLength={100}
+          />
+          <SubmitButton
+            onClick={sendStory}
+            data-testid="send-story"
+            type="submit"
+          >
+            {getIcon("Send")}
+          </SubmitButton>
+        </SendContainer>
+      </StyledContainer>
+    </Popup>
+  );
+}
+
+export default StoryPreview;
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
new file mode 100644
index 00000000..79b72103
--- /dev/null
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -0,0 +1,211 @@
+import ReactDOM from "react-dom";
+import { useInView } from "../hooks/useInView";
+import { story } from "types/story";
+import StorySlideCounter from "./StorySlideCounter";
+import UserInfo from "./UserInfo";
+import { useCallback, useEffect, useState } from "react";
+import { useViewStory } from "../hooks/useViewStory";
+import Story from "./Story";
+import styled from "styled-components";
+import { getElapsedTime } from "utils/helpers";
+import StorySliderTooltip from "./StorySliderTooltip";
+import { getIcon } from "@data/icons";
+import { useDeleteStory } from "../hooks/useDeleteStory";
+import StoryViews from "./StoryViews";
+import CloseButton from "@components/CloseButton";
+import Popup from "@components/Popup";
+
+interface StorySlideProps {
+  userId?: string;
+  name: string;
+  avatar?: string;
+  getNextUserStories: () => void;
+  stories: story[];
+  onClose: () => void;
+}
+
+const StyledContainer = styled.div`
+  cursor: pointer;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: #000;
+`;
+
+const StyledSlide = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  width: 60%;
+`;
+
+const StyledNavButton = styled.div<{ isLeft?: boolean }>`
+  position: absolute;
+  top: 50%;
+  ${({ isLeft }) => (isLeft ? "left: 0;" : "right: 0;")}
+  transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 100;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: white;
+`;
+
+const StyledUserInfo = styled.div`
+  position: absolute;
+  top: 2rem;
+  left: 2.5rem;
+  z-index: 100;
+`;
+
+function StorySlide(props: StorySlideProps) {
+  const { avatar, name, stories, getNextUserStories, onClose } = props;
+  const { ref, inView } = useInView({ threshold: 0.5 });
+  const { viewStory } = useViewStory();
+  const [index, setIndex] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const { deleteStory } = useDeleteStory();
+  const isMine = name === "My Story";
+
+  const handleSlideChange = () => {
+    if (index < stories.length - 1) {
+      setIndex(index + 1);
+    } else {
+      getNextUserStories();
+      setIndex(0);
+    }
+  };
+
+  const handlePause = useCallback(() => {
+    setIsPaused((prev) => !prev);
+  }, []);
+
+  const handleRightArrow = useCallback(() => {
+    if (index < stories.length - 1) {
+      setIndex(index + 1);
+    } else {
+      getNextUserStories();
+    }
+  }, [index, stories.length, getNextUserStories]);
+
+  const handleEcsKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  const handleSpaceKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === " ") {
+        handlePause();
+      }
+    },
+    [handlePause]
+  );
+  const handleLeftArrow = useCallback(() => {
+    if (index > 0) {
+      setIndex(index - 1);
+    } else {
+      getNextUserStories();
+    }
+  }, [index, getNextUserStories]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight") {
+        handleRightArrow();
+      } else if (e.key === "ArrowLeft") {
+        handleLeftArrow();
+      } else if (e.key === " ") {
+        handleSpaceKey(e);
+      } else if (e.key === "Escape") {
+        handleEcsKey(e);
+      }
+    },
+    [handleRightArrow, handleLeftArrow, handleSpaceKey, handleEcsKey]
+  );
+
+  const handleDelete = () => {
+    deleteStory(stories[index].id);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (inView && !isMine) {
+      viewStory(stories[index]?.id);
+    }
+  }, [inView, stories, index, viewStory, isMine]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  if (!stories.length) {
+    return null;
+  }
+
+  return (
+    <Popup isOpen={true} onClose={onClose}>
+      <StyledContainer>
+        <CloseButton onClose={onClose} />
+        <StyledSlide ref={ref} className="story">
+          <StyledNavButton isLeft onClick={handleLeftArrow}>
+            {getIcon("LeftArrow")}
+          </StyledNavButton>
+          <StyledNavButton onClick={handleRightArrow}>
+            {getIcon("RightArrow")}
+          </StyledNavButton>
+          <StorySlideCounter
+            isPaused={isPaused}
+            currentIndex={index}
+            totalSlides={stories.length}
+            onSlideChange={handleSlideChange}
+          />
+          <StorySliderTooltip
+            isMine={isMine}
+            onPause={handlePause}
+            isPaused={isPaused}
+            onDelete={handleDelete}
+          />
+          <StyledUserInfo>
+            <UserInfo
+              name={name}
+              avatar={avatar || ""}
+              isVertical={true}
+              elapsedTime={getElapsedTime(stories[index].timestamp)}
+            />
+          </StyledUserInfo>
+          <Story
+            content={stories[index].content}
+            caption={stories[index].caption || ""}
+          />
+          {isMine && <StoryViews storyId={stories[index].id} />}
+        </StyledSlide>
+      </StyledContainer>
+    </Popup>
+  );
+}
+
+export default StorySlide;
diff --git a/app/src/features/stories/components/StorySlideCounter.tsx b/app/src/features/stories/components/StorySlideCounter.tsx
new file mode 100644
index 00000000..65d2654a
--- /dev/null
+++ b/app/src/features/stories/components/StorySlideCounter.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+
+interface StorySlideCounterProps {
+  currentIndex: number;
+  totalSlides: number;
+  isPaused: boolean;
+  onSlideChange: (index: number) => void;
+}
+interface SegmentProps {
+  $progress: number;
+  $isViewed: boolean;
+}
+
+const StyledSliderContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.5);
+  height: 2rem;
+  z-index: 100;
+`;
+
+const Segment = styled.div<SegmentProps>`
+  flex: 1;
+  height: 4px;
+  background: linear-gradient(
+    to right,
+    white ${(props) => props.$progress}%,
+    gray ${(props) => props.$progress}%
+  );
+`;
+
+function StorySlideCounter(props: StorySlideCounterProps) {
+  const { currentIndex, totalSlides, onSlideChange, isPaused } = props;
+  const [progress, setProgress] = useState(0);
+  const [viewedStories, setViewedStories] = useState(
+    Array(totalSlides).fill(false)
+  );
+
+  useEffect(() => {
+    if (isPaused) return;
+    const interval = setInterval(() => {
+      setProgress((prev) => prev + 1);
+    }, 50);
+
+    if (progress >= 100) {
+      setViewedStories((prev) => {
+        const updated = [...prev];
+        updated[currentIndex] = true;
+        return updated;
+      });
+      onSlideChange(currentIndex + 1 < totalSlides ? currentIndex + 1 : 0);
+      setProgress(0);
+    }
+
+    return () => clearInterval(interval);
+  }, [progress, currentIndex, totalSlides, onSlideChange, isPaused]);
+
+  return (
+    <StyledSliderContainer>
+      {Array.from({ length: totalSlides }, (_, index) => (
+        <Segment
+          key={index}
+          $progress={
+            index < currentIndex ? 100 : index === currentIndex ? progress : 0
+          }
+          $isViewed={viewedStories[index] || index < currentIndex}
+        />
+      ))}
+    </StyledSliderContainer>
+  );
+}
+
+export default StorySlideCounter;
diff --git a/app/src/features/stories/components/StorySliderTooltip.tsx b/app/src/features/stories/components/StorySliderTooltip.tsx
new file mode 100644
index 00000000..dc1c8e69
--- /dev/null
+++ b/app/src/features/stories/components/StorySliderTooltip.tsx
@@ -0,0 +1,44 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+interface StorySliderTooltipProps {
+  isMine?: boolean;
+  isPaused: boolean;
+  onPause: () => void;
+  onDelete?: () => void;
+}
+
+const StyledToolTip = styled.div`
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  display: flex;
+  z-index: 100;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+`;
+const StyledButton = styled.div`
+  cursor: pointer;
+  color: white;
+  svg {
+    font-size: 2rem;
+  }
+`;
+function StorySliderTooltip(props: StorySliderTooltipProps) {
+  const { isMine, onPause, onDelete, isPaused } = props;
+  return (
+    <StyledToolTip>
+      {isPaused ? (
+        <StyledButton onClick={onPause}>{getIcon("Play")}</StyledButton>
+      ) : (
+        <StyledButton onClick={onPause}>{getIcon("Pause")}</StyledButton>
+      )}
+      {isMine && (
+        <StyledButton onClick={onDelete}>{getIcon("Delete")}</StyledButton>
+      )}
+    </StyledToolTip>
+  );
+}
+
+export default StorySliderTooltip;
diff --git a/app/src/features/stories/components/StoryViews.tsx b/app/src/features/stories/components/StoryViews.tsx
new file mode 100644
index 00000000..69d0c6ad
--- /dev/null
+++ b/app/src/features/stories/components/StoryViews.tsx
@@ -0,0 +1,116 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { storyView } from "types/story";
+import UserInfo from "./UserInfo";
+import { useViews } from "../hooks/useViews";
+import { getIcon } from "@data/icons";
+import { getElapsedTime } from "utils/helpers";
+
+interface StoryViewsProps {
+  storyId: string;
+}
+
+const StyledViewsContainer = styled.div<{ $isOpened: boolean }>`
+  position: absolute;
+  bottom: 5%;
+  left: auto;
+  z-index: 1000;
+  width: 100%;
+  min-height: ${({ $isOpened }) => ($isOpened ? "60vh" : "auto")};
+  padding: ${({ $isOpened }) => ($isOpened ? "1rem" : "0.5rem 1rem")};
+  background-color: ${({ $isOpened }) =>
+    $isOpened ? "var(--story-views-background)" : "var(--accent-color-shade)"};
+
+  box-shadow: ${({ $isOpened }) =>
+    $isOpened ? "0 4px 10px rgba(0, 0, 0, 0.2)" : "none"};
+  color: white;
+`;
+const StyledViews = styled.ul`
+  z-index: 100;
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  padding: 2.5rem 0.5rem 0.5rem 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+`;
+const StyledView = styled.li`
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+`;
+const StyledCloseButton = styled.button`
+  display: flex;
+  padding: 0.5rem 1rem;
+  justify-content: flex-end;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background-color: transparent;
+`;
+
+const StyledViewButton = styled.button`
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--story-views-background);
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  position: absolute;
+  bottom: -2rem;
+  left: 0;
+  height: 3rem;
+  &:hover {
+    background-color: var(--story-views-background-hover);
+  }
+  ${({ disabled }) =>
+    disabled &&
+    `
+    background-color: var(--story-views-background-hover);
+    pointer-events: none;
+  `}
+`;
+
+function StoryViews(props: StoryViewsProps) {
+  const { storyId } = props;
+  const viewsData = useViews(storyId);
+  const views = viewsData.views?.data || [];
+
+  const [isOpened, setIsOpened] = useState(false);
+
+  return (
+    <StyledViewsContainer $isOpened={isOpened}>
+      {isOpened && (
+        <StyledViews>
+          {views.map((view: storyView) => (
+            <StyledView key={view.id}>
+              <UserInfo
+                name={view.username}
+                avatar={view?.avatar || ""}
+                elapsedTime={getElapsedTime(view.seenTime)}
+                isVertical={true}
+              />
+            </StyledView>
+          ))}
+          <StyledCloseButton onClick={() => setIsOpened(false)}>
+            {getIcon("Close")}
+          </StyledCloseButton>
+        </StyledViews>
+      )}
+      <StyledViewButton onClick={() => setIsOpened(true)} disabled={isOpened}>
+        {views.length > 0 ? `${views.length} views` : "No views"}
+      </StyledViewButton>
+    </StyledViewsContainer>
+  );
+}
+
+export default StoryViews;
diff --git a/app/src/features/stories/components/UserInfo.tsx b/app/src/features/stories/components/UserInfo.tsx
new file mode 100644
index 00000000..bcf5bdcc
--- /dev/null
+++ b/app/src/features/stories/components/UserInfo.tsx
@@ -0,0 +1,54 @@
+import Avatar from "@components/Avatar";
+import Heading from "@components/Heading";
+import styled, { css } from "styled-components";
+
+interface UserInfoProps {
+  name: string;
+  avatar: string;
+  elapsedTime: string;
+  isVertical?: boolean;
+}
+const StyledStoryHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.7rem;
+  z-index: 100;
+`;
+const StyledUserInfo = styled.div<{ $isVertical?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  ${(props) =>
+    props.$isVertical &&
+    css`
+      flex-direction: column;
+      gap: 0.2rem;
+      justify-content: center;
+      align-items: flex-start;
+    `};
+  & > h5 {
+    color: white !important;
+  }
+`;
+const StyledElapsedTime = styled.p`
+  font-size: 0.8rem;
+  color: white;
+  text-align: left;
+`;
+function UserInfo(props: UserInfoProps) {
+  const { name, avatar, elapsedTime, isVertical } = props;
+
+  return (
+    <StyledStoryHeader>
+      <Avatar name={name} image={avatar} />
+      <StyledUserInfo $isVertical={isVertical}>
+        <Heading as="h5">{name}</Heading>
+        <StyledElapsedTime>{elapsedTime}</StyledElapsedTime>
+      </StyledUserInfo>
+    </StyledStoryHeader>
+  );
+}
+
+export default UserInfo;
diff --git a/app/src/features/stories/hooks/useDeleteStory.ts b/app/src/features/stories/hooks/useDeleteStory.ts
new file mode 100644
index 00000000..d79c05b4
--- /dev/null
+++ b/app/src/features/stories/hooks/useDeleteStory.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { DeleteStory as DeleteStoryAPI } from "../services/deleteStory";
+import toast from "react-hot-toast";
+
+function useDeleteStory() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: deleteStory,
+
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: (storyId: string) => DeleteStoryAPI(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["myStories"] });
+      toast.success("Story successfully deleted");
+    },
+    onError: () => {
+      toast.error("Error deleting story");
+    },
+  });
+
+  return { deleteStory, data, error, isPending };
+}
+
+export { useDeleteStory };
diff --git a/app/src/features/stories/hooks/useInView.ts b/app/src/features/stories/hooks/useInView.ts
new file mode 100644
index 00000000..2856f2bf
--- /dev/null
+++ b/app/src/features/stories/hooks/useInView.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+interface Options {
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+}
+export function useInView(options: Options) {
+  const [inView, setInView] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setInView(entry.isIntersecting);
+    }, options);
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) observer.unobserve(ref.current);
+    };
+  }, [options]);
+
+  return { ref, inView };
+}
diff --git a/app/src/features/stories/hooks/useMyStories.ts b/app/src/features/stories/hooks/useMyStories.ts
new file mode 100644
index 00000000..6cbee671
--- /dev/null
+++ b/app/src/features/stories/hooks/useMyStories.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getMyStories as getMyStoriesAPI } from "../services/getMyStories";
+
+function useMyStroies() {
+  const {
+    data: myStories,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["myStories"],
+    queryFn: getMyStoriesAPI,
+  });
+  return { myStories, error, isLoading };
+}
+
+export { useMyStroies };
diff --git a/app/src/features/stories/hooks/usePostStory.ts b/app/src/features/stories/hooks/usePostStory.ts
new file mode 100644
index 00000000..9fab7130
--- /dev/null
+++ b/app/src/features/stories/hooks/usePostStory.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { postStory as postStoryAPI } from "../services/postStory";
+import toast from "react-hot-toast";
+function usePostStory() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: postStory,
+    data,
+    error,
+    isPending,
+  } = useMutation({
+    mutationFn: ({ story, caption }: { story: File; caption: string }) =>
+      postStoryAPI(story, caption),
+    onSuccess: () => {
+      toast.success("Story successfully uploaded");
+      queryClient.invalidateQueries({ queryKey: ["myStories"] });
+    },
+    onError: () => {
+      toast.error("Error uploading story");
+    },
+  });
+
+  return { postStory, data, error, isPending };
+}
+
+export { usePostStory };
diff --git a/app/src/features/stories/hooks/useStories.ts b/app/src/features/stories/hooks/useStories.ts
new file mode 100644
index 00000000..d288006c
--- /dev/null
+++ b/app/src/features/stories/hooks/useStories.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getStories as getStoriesAPI } from "../services/getStories";
+
+function useStroies() {
+  const {
+    data: stories,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["stories"],
+    queryFn: getStoriesAPI,
+  });
+
+  return { stories, error, isLoading };
+}
+
+export { useStroies };
diff --git a/app/src/features/stories/hooks/useViewStory.ts b/app/src/features/stories/hooks/useViewStory.ts
new file mode 100644
index 00000000..31e8cd44
--- /dev/null
+++ b/app/src/features/stories/hooks/useViewStory.ts
@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { viewStory as viewStoryAPI } from "../services/viewStory";
+
+function useViewStory() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: viewStory,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (storyId: string) => viewStoryAPI(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["stories"] });
+    },
+    onError: (error) => {
+      console.error("Error viewing story:", error);
+    },
+  });
+
+  return { viewStory, data, error, isPending, isSuccess };
+}
+
+export { useViewStory };
diff --git a/app/src/features/stories/hooks/useViews.ts b/app/src/features/stories/hooks/useViews.ts
new file mode 100644
index 00000000..a966e8bd
--- /dev/null
+++ b/app/src/features/stories/hooks/useViews.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { getViews as getViewsAPI } from "../services/getViews";
+
+function useViews(storyId: string) {
+  const {
+    data: views,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["views", storyId],
+    queryFn: () => getViewsAPI(storyId),
+    enabled: !!storyId,
+  });
+
+  return { views, error, isLoading };
+}
+
+export { useViews };
diff --git a/app/src/features/stories/services/deleteStory.ts b/app/src/features/stories/services/deleteStory.ts
new file mode 100644
index 00000000..7963deb8
--- /dev/null
+++ b/app/src/features/stories/services/deleteStory.ts
@@ -0,0 +1,18 @@
+import { API_URL } from "@constants";
+
+async function DeleteStory(storyId: string) {
+  const res = await fetch(`${API_URL}/users/stories/${storyId}`, {
+    method: "DELETE",
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data;
+}
+
+export { DeleteStory };
diff --git a/app/src/features/stories/services/getMyStories.ts b/app/src/features/stories/services/getMyStories.ts
new file mode 100644
index 00000000..3980661b
--- /dev/null
+++ b/app/src/features/stories/services/getMyStories.ts
@@ -0,0 +1,22 @@
+import { API_URL } from "@constants";
+
+async function getMyStories() {
+  try {
+    const response = await fetch(`${API_URL}/users/stories/me`, {
+      method: "GET",
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch stories");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch stories", error);
+    throw error;
+  }
+}
+
+export { getMyStories };
diff --git a/app/src/features/stories/services/getStories.ts b/app/src/features/stories/services/getStories.ts
new file mode 100644
index 00000000..f7014ffc
--- /dev/null
+++ b/app/src/features/stories/services/getStories.ts
@@ -0,0 +1,22 @@
+import { API_URL } from "@constants";
+
+async function getStories() {
+  try {
+    const response = await fetch(`${API_URL}/users/stories`, {
+      method: "GET",
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch stories");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch stories", error);
+    throw error;
+  }
+}
+
+export { getStories };
diff --git a/app/src/features/stories/services/getViews.ts b/app/src/features/stories/services/getViews.ts
new file mode 100644
index 00000000..674a4a6e
--- /dev/null
+++ b/app/src/features/stories/services/getViews.ts
@@ -0,0 +1,21 @@
+import { API_URL } from "@constants";
+
+async function getViews(storyId: string) {
+  try {
+    const response = await fetch(`${API_URL}/stories/${storyId}/views`, {
+      method: "GET",
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch views");
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Failed to fetch views", error);
+    throw error;
+  }
+}
+
+export { getViews };
diff --git a/app/src/features/stories/services/postStory.ts b/app/src/features/stories/services/postStory.ts
new file mode 100644
index 00000000..0e6f7473
--- /dev/null
+++ b/app/src/features/stories/services/postStory.ts
@@ -0,0 +1,27 @@
+import { API_URL } from "@constants";
+
+async function postStory(story: File, caption: string) {
+  const formData = new FormData();
+  formData.append("caption", caption);
+  formData.append("file", story);
+
+  try {
+    const response = await fetch(`${API_URL}/users/stories`, {
+      method: "POST",
+      body: formData,
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to upload image");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Image upload error:", error);
+    throw error;
+  }
+}
+
+export { postStory };
diff --git a/app/src/features/stories/services/viewStory.ts b/app/src/features/stories/services/viewStory.ts
new file mode 100644
index 00000000..0f88bb8d
--- /dev/null
+++ b/app/src/features/stories/services/viewStory.ts
@@ -0,0 +1,22 @@
+import { API_URL } from "@constants";
+
+async function viewStory(storyId: string) {
+  try {
+    const response = await fetch(`${API_URL}/stories/${storyId}/views`, {
+      method: "POST",
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to view image");
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Image view error:", error);
+    throw error;
+  }
+}
+
+export { viewStory };
diff --git a/app/src/hooks/useIndexedDB.ts b/app/src/hooks/useIndexedDB.ts
new file mode 100644
index 00000000..27d813ae
--- /dev/null
+++ b/app/src/hooks/useIndexedDB.ts
@@ -0,0 +1,45 @@
+import { IDBPDatabase, openDB } from "idb";
+import { useState, useEffect, useCallback } from "react";
+
+function useIndexedDB(dbName: string, storeName: string) {
+  const [db, setDb] = useState<IDBPDatabase<unknown> | null>(null);
+
+  useEffect(() => {
+    const initDB = async () => {
+      const dbInstance = await openDB(dbName, 1, {
+        upgrade(db) {
+          if (!db.objectStoreNames.contains(storeName)) {
+            db.createObjectStore(storeName);
+          }
+        },
+      });
+      setDb(dbInstance);
+    };
+
+    initDB();
+  }, [dbName, storeName]);
+
+  const getItem = useCallback(
+    async (key: string) => {
+      if (!db) return null;
+      return await db.get(storeName, key);
+    },
+    [db, storeName]
+  );
+
+  interface SetItemFunction {
+    (key: string, value: unknown): Promise<void>;
+  }
+
+  const setItem: SetItemFunction = useCallback(
+    async (key: string, value: unknown) => {
+      if (!db) return;
+      await db.put(storeName, value, key);
+    },
+    [db, storeName]
+  );
+
+  return { getItem, setItem };
+}
+
+export default useIndexedDB;
diff --git a/app/src/mocks/stories/mockStoriesData.ts b/app/src/mocks/stories/mockStoriesData.ts
new file mode 100644
index 00000000..01e2591a
--- /dev/null
+++ b/app/src/mocks/stories/mockStoriesData.ts
@@ -0,0 +1,149 @@
+import { story, storyView } from "types/story";
+
+const MOCK_MY_STORIES: story[] = [
+  {
+    id: "1",
+    content:
+      "https://scontent.fcai11-1.fna.fbcdn.net/v/t1.6435-9/122032103_3472532366305566_6239088129819761020_n.jpg?stp=dst-jpg_s960x960&_nc_cat=104&ccb=1-7&_nc_sid=2285d6&_nc_eui2=AeEXsEzDOwFTqpmb7eVOF_defX6b8GN9_pB9fpvwY33-kK5Gl95eJW0QBmEl_26DnBM80yvcN_GW8-7f9MJZZ1z6&_nc_ohc=bSnTWn4p8x0Q7kNvgHoFcXP&_nc_zt=23&_nc_ht=scontent.fcai11-1.fna&_nc_gid=Ab5Y75GRyvck02dUvRxz55i&oh=00_AYCR6Lf6wZTBAR3XPjJLP8yCvUvhON0c_hM_eUdGYvRwdA&oe=676B5E8E",
+    timestamp: new Date().toISOString(),
+    caption: "CUFE is the hell",
+    views: [
+      {
+        id: "1",
+        userId: "1",
+        username: "Ahmed Hamdy",
+        avatar: "https://i.pravatar.cc/70?=0.2",
+        seenTime: new Date().toISOString(),
+      },
+      {
+        id: "2",
+        userId: "12",
+        username: "John Doe",
+        avatar: "https://i.pravatar.cc/70?=0.25",
+        seenTime: new Date().toISOString(),
+      },
+      {
+        id: "3",
+        userId: "13",
+        username: "Alice Bob",
+        avatar: "https://i.pravatar.cc/70?=0.35",
+        seenTime: new Date().toISOString(),
+      },
+      {
+        id: "4",
+        userId: "14",
+        username: "Bob Alice",
+        avatar: "https://i.pravatar.cc/70?=0.45",
+        seenTime: new Date().toISOString(),
+      },
+    ],
+  },
+];
+const MOCK_OTHER_USERS_STORIES = [
+  {
+    id: "1",
+    name: "Ahmed Hamdy",
+    avatar: "https://i.pravatar.cc/70?=0.7",
+    stories: [
+      {
+        id: "110001",
+        content:
+          "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
+        timestamp: new Date().toISOString(),
+        caption: "I love cola",
+        viewed: false,
+      },
+    ],
+  },
+  {
+    id: "3",
+    name: "John Doe",
+    avatar: "https://i.pravatar.cc/70?=0.45",
+    stories: [
+      {
+        id: "110004",
+        content: "https://i.imgflip.com/35dq1c.jpg",
+        timestamp: new Date().toISOString(),
+        caption: "hitler cat",
+        viewed: true,
+      },
+      {
+        id: "110005",
+        content:
+          "https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png",
+        timestamp: new Date().toISOString(),
+        caption: "Cutest cat ever",
+        viewed: false,
+      },
+    ],
+  },
+  {
+    id: "4",
+    name: "Bob Alice",
+    avatar: "https://i.pravatar.cc/70?=0.55",
+    stories: [
+      {
+        id: "110008",
+        content:
+          "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
+        timestamp: new Date().toISOString(),
+        caption: "I love cola",
+        viewed: false,
+      },
+      {
+        id: "110009",
+        content:
+          "https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/133d/live/5afc4bb0-206e-11ef-a787-dfc633433082.jpg.webp",
+        timestamp: new Date().toISOString(),
+        caption: "Real Madrid is the best",
+        viewed: false,
+      },
+    ],
+  },
+  {
+    id: "5",
+    name: "Peter Barker",
+    avatar: "https://i.pravatar.cc/70?=0.05",
+    stories: [
+      {
+        id: "110010",
+        content:
+          "https://upload.wikimedia.org/wikipedia/en/2/21/Web_of_Spider-Man_Vol_1_129-1.png",
+        timestamp: new Date().toISOString(),
+        caption: "Spiderman",
+        viewed: true,
+      },
+    ],
+  },
+];
+const MOCK_VIEWS: storyView[] = [
+  {
+    id: "1",
+    userId: "1",
+    username: "Ahmed Hamdy",
+    avatar: "https://i.pravatar.cc/70?=0.2",
+    seenTime: new Date().toISOString(),
+  },
+  {
+    id: "2",
+    userId: "12",
+    username: "John Doe",
+    avatar: "https://i.pravatar.cc/70?=0.25",
+    seenTime: new Date().toISOString(),
+  },
+  {
+    id: "3",
+    userId: "13",
+    username: "Alice Bob",
+    avatar: "https://i.pravatar.cc/70?=0.35",
+    seenTime: new Date().toISOString(),
+  },
+  {
+    id: "4",
+    userId: "14",
+    username: "Bob Alice",
+    avatar: "https://i.pravatar.cc/70?=0.45",
+    seenTime: new Date().toISOString(),
+  },
+];
+export { MOCK_MY_STORIES, MOCK_OTHER_USERS_STORIES, MOCK_VIEWS };
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
index 0fd7db66..e190f217 100644
--- a/app/src/mocks/stories/stories.ts
+++ b/app/src/mocks/stories/stories.ts
@@ -1,5 +1,10 @@
 import { http, HttpResponse } from "msw";
-import { MOCK_MY_STORIES, MOCK_OTHER_USER_STORIES } from "@mocks/data/users";
+import {
+  MOCK_MY_STORIES,
+  MOCK_OTHER_USERS_STORIES,
+  MOCK_VIEWS,
+} from "./mockStoriesData";
+import { story } from "types/story";
 
 type AddStoryRequestBody = {
   file: File;
@@ -9,14 +14,7 @@ type AddStoryRequestBody = {
 type AddStoryResponseBodySuccess = {
   status: "success";
   message: string;
-  data: {
-    user: {
-      id: string;
-      name: string;
-      avatarUrl: string;
-    };
-    sessionID: string;
-  };
+  data: {};
 };
 
 type AddStoryResponseBodyFail = {
@@ -29,39 +27,50 @@ type AddStoryResponseBody =
   | AddStoryResponseBodySuccess
   | AddStoryResponseBodyFail;
 
+type ViewStoryRequestBody = {
+  data: story;
+};
+type ViewStoryResponseBodySuccess = {
+  status: "success";
+  message: string;
+  data: {};
+};
+type ViewStoryResponseBodyFail = {
+  status: "fail" | "error";
+  message: string;
+  data: {};
+};
+
+type ViewStoryResponseBody =
+  | ViewStoryResponseBodySuccess
+  | ViewStoryResponseBodyFail;
+
 export const storiesMock = [
   http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
     return undefined;
   }),
 
-  http.get("/users/stories", async () => {
-    return HttpResponse.json(
-      {
-        status: "success",
-        data: MOCK_MY_STORIES,
-      },
-      { status: 200 }
-    );
-  }),
-
   http.post<{}, AddStoryRequestBody, AddStoryResponseBody>(
     "/users/stories",
     async ({ request }) => {
-      const { file, caption } = await request.json();
+      const formData = await request.formData();
+      const file = formData.get("file") as File | null;
+      const caption = formData.get("caption") as string;
 
-      if (file && caption) {
+      if (file) {
+        const newStory: story = {
+          id: String(MOCK_MY_STORIES.length + 1),
+          content: URL.createObjectURL(file),
+          timestamp: new Date().toISOString(),
+          caption,
+          views: [],
+        };
+        MOCK_MY_STORIES.push(newStory);
         return HttpResponse.json(
           {
             status: "success",
-            message: "Successful Add Story",
-            data: {
-              user: {
-                id: "12345",
-                name: "John Doe",
-                avatarUrl: "/avatars/john_doe.png",
-              },
-              sessionID: "abcdef123456",
-            },
+            message: "Story added successfully",
+            data: newStory,
           },
           {
             status: 201,
@@ -84,10 +93,61 @@ export const storiesMock = [
       }
     }
   ),
+  http.post<{ storyId: string }, ViewStoryRequestBody, ViewStoryResponseBody>(
+    "/stories/:storyId/views",
+    async ({ params }) => {
+      const { storyId } = params;
+
+      let userIndex = -1;
+      let storyIndex = -1;
 
+      MOCK_OTHER_USERS_STORIES.some((user, uIndex) => {
+        const sIndex = user.stories.findIndex((story) => story.id === storyId);
+        if (sIndex !== -1) {
+          userIndex = uIndex;
+          storyIndex = sIndex;
+          MOCK_OTHER_USERS_STORIES[userIndex].stories[storyIndex].viewed = true;
+          return true;
+        }
+        return false;
+      });
+
+      if (userIndex !== -1 && storyIndex !== -1) {
+        return HttpResponse.json(
+          {
+            status: "success",
+            message: "Story view recorded successfully",
+            data: MOCK_OTHER_USERS_STORIES[userIndex].stories[storyIndex]
+              .viewed,
+          },
+          {
+            status: 201,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+      } else {
+        return HttpResponse.json(
+          {
+            status: "fail",
+            message: "Story not found",
+            data: {},
+          },
+          {
+            status: 404,
+          }
+        );
+      }
+    }
+  ),
   http.delete("/users/stories/:storyId", async ({ params }) => {
     const { storyId } = params;
     if (storyId) {
+      const index = MOCK_MY_STORIES.findIndex((story) => story.id === storyId);
+      if (index !== -1) {
+        MOCK_MY_STORIES.splice(index, 1);
+      }
       return HttpResponse.json(
         {
           status: "success",
@@ -111,30 +171,35 @@ export const storiesMock = [
       );
     }
   }),
-  
-  http.get("/users/:userId/stories", async ({ params }) => {
-    const { userId } = params;
-    if (userId) {
-      return HttpResponse.json(
-        {
-          status: "success",
-          data: MOCK_OTHER_USER_STORIES,
-        },
-        {
-          status: 200,
-        }
-      );
-    } else {
-      return HttpResponse.json(
-        {
-          status: "fail",
-          message: "User ID missing",
-          data: {},
-        },
-        {
-          status: 400,
-        }
-      );
-    }
+
+  http.get("/users/stories/me", async () => {
+    return HttpResponse.json(
+      {
+        data: MOCK_MY_STORIES,
+      },
+      { status: 200 }
+    );
+  }),
+
+  http.get("/users/stories", async () => {
+    return HttpResponse.json(
+      {
+        data: MOCK_OTHER_USERS_STORIES,
+      },
+      {
+        status: 200,
+      }
+    );
+  }),
+
+  http.get("/stories/:storyId/views", async ({ params }) => {
+    return HttpResponse.json(
+      {
+        data: MOCK_VIEWS,
+      },
+      {
+        status: 200,
+      }
+    );
   }),
 ];
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 09543025..144c4f0c 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -44,7 +44,7 @@ const GlobalStyles = createGlobalStyle`
     --color-chat-hover: #f5f5f5;
 
     --color-default-shadow: rgb(114, 114, 114, 0.251);
-
+    
     
     --color-item-hover: rgb(244, 244, 245);
     --color-item-active: rgb(237, 237, 237);
@@ -52,15 +52,17 @@ const GlobalStyles = createGlobalStyle`
     --color-icon-secondary: rgb(112, 117, 121);
     
     --pattern-color: #c3bfc5a6;
+
   
     --color-background-compact-menu: rgb(255, 255, 255, 0.733);
     --color-background-compact-menu-hover: rgb(0, 0, 0, 0.067);
+    --new-chat-color: #f5f5f5;
     
     --color-border: #dfe1e5;
     --color-borders-input: rgb(218, 220, 224);
-
+    
     --color-search-border: #3390ec;
-
+    
     --image-grayscale: 0;
     --image-opacity: 30%;
 
@@ -97,14 +99,15 @@ const GlobalStyles = createGlobalStyle`
     );
 
     --bg-image-opacity: 100%;
-
+    
     --chat-wallpaper-bg: url("/assets/bg-dark.png");
     
     --color-background: #192b35;
     --color-background-secondary: #24343e;
     --color-background-secondary-accent: #22313a;
     --color-chat-hover: #2c2c2c;
-
+    
+    --scrollbar-color:rgba(255, 255, 255, .2);
     --color-default-shadow: rgb(16, 16, 16, 0.612);
     
     --color-chat-active: #1e4454;
@@ -115,6 +118,7 @@ const GlobalStyles = createGlobalStyle`
     
     --color-background-compact-menu: rgb(33, 33, 33, 0.867);
     --color-background-compact-menu-hover: rgb(0, 0, 0, 0.4);
+    --new-chat-color: #2d394e;
  
     --color-border: #09182299;
     --color-borders-input: var(--color-text-secondary);
@@ -131,6 +135,8 @@ const GlobalStyles = createGlobalStyle`
     --color-avatar: linear-gradient(135deg, #72C6EF, #004E92);
   }
 
+  --story-views-background: #181a1b;
+  --story-views-background-hover: #1e2021;
   --color-background-own-1: #6573F8;
   --color-background-own-2: #7644CB;
   --color-background-own-3: #8849B4;
diff --git a/app/src/types/story.ts b/app/src/types/story.ts
index 5f1e552f..e198486f 100644
--- a/app/src/types/story.ts
+++ b/app/src/types/story.ts
@@ -1,13 +1,24 @@
-import { otherUserInfoInterface } from "./user";
-
+interface storyView {
+  id: string;
+  userId: string;
+  username: string;
+  avatar?: string;
+  seenTime: string;
+}
 interface story {
   id: string;
-  user: otherUserInfoInterface;
+  userId?: string;
   content: string;
   timestamp: string;
   caption?: string;
-  views?: otherUserInfoInterface[];
+  views?: storyView[];
   viewed?: boolean;
 }
+interface userStories {
+  id: string;
+  name: string;
+  avatar: string;
+  stories: story[];
+}
 
-export type { story };
+export type { story, storyView, userStories };
diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts
index e69de29b..0a82eb40 100644
--- a/app/src/utils/helpers.ts
+++ b/app/src/utils/helpers.ts
@@ -0,0 +1,35 @@
+function getElapsedTime(timestamp: string): string {
+  const now = new Date().getTime();
+  const referenceTime = new Date(timestamp).getTime();
+  const elapsedMs = now - referenceTime;
+
+  const seconds = Math.floor(elapsedMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(weeks / 4);
+  const years = Math.floor(months / 12);
+
+  if (years > 0) {
+    return `${years}y`;
+  } else if (months > 0) {
+    return `${months}mo`;
+  } else if (weeks > 0) {
+    return `${weeks}w`;
+  } else if (days > 0) {
+    return `${days}d`;
+  } else if (hours > 0) {
+    return `${hours}h`;
+  } else if (minutes > 0) {
+    return `${minutes}m`;
+  } else {
+    return `${seconds}s`;
+  }
+}
+function getAvatarName(name: string | undefined): string {
+  const firstName = name?.split(" ")[0];
+  const lastName = name?.split(" ")[1];
+  return `${firstName?.charAt(0) || ""} ${lastName?.charAt(0) || ""}`;
+}
+export { getElapsedTime, getAvatarName };

From 003eb2640fafc18d07cc83ea46729a49753d8478 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:09:47 +0200
Subject: [PATCH 026/136] feature(messaging): add in chat search functionality
 (#61)

---
 app/src/features/chats/ChatBody.tsx           |  18 +--
 app/src/features/chats/Message.tsx            |  40 ++++++-
 app/src/features/chats/Topbar.tsx             |   4 +-
 .../features/search/components/SearchBar.tsx  | 109 +++++++++++++++---
 .../hooks/useScrollToSearchResultsMsg.ts      |  24 ++++
 .../profile-settings/profile-settings.ts      |   7 +-
 app/src/state/messages/messages.ts            |   6 +-
 app/src/state/messages/search.ts              |  60 ++++++++++
 app/src/state/store.ts                        |   2 +
 app/src/utils/renderWithHighlight.ts          |  41 +++++++
 app/tsconfig.app.json                         |  57 ++++++---
 11 files changed, 316 insertions(+), 52 deletions(-)
 create mode 100644 app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
 create mode 100644 app/src/state/messages/search.ts
 create mode 100644 app/src/utils/renderWithHighlight.ts

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 61f25479..8dec36c9 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -36,14 +36,16 @@ function ChatBody() {
 
   return (
     <ScrollContainer>
-      {messages.map((data, index) => (
-        <Message
-          key={index}
-          index={index}
-          messagesLength={messages.length}
-          data={data}
-        />
-      ))}
+      {messages.map((data, index) => {
+        return (
+          <Message
+            key={index}
+            index={index}
+            messagesLength={messages.length}
+            data={data}
+          />
+        );
+      })}
     </ScrollContainer>
   );
 }
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 3c2d3f1b..3024767d 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -4,6 +4,9 @@ import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
 import { MessageInterface } from "types/messages";
 import { useSelector } from "react-redux";
 import { RootState } from "@state/store";
+import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
+import { useEffect, useRef } from "react";
+import renderWithHighlight from "utils/renderWithHighlight";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -37,17 +40,42 @@ function Message({
   messagesLength,
   data: { id, senderId, content },
 }: MessageProps) {
+  const { searchTerm, searchResults, currentResultIndex } = useSelector(
+    (state: RootState) => state.search,
+  );
+
+  const mergedRef = useRef<HTMLDivElement>(null);
   const { lastMessageRef } = useScrollToLastMsg();
+  const { searchResultRef } = useScrollToSearchResultsMsg();
+
+  // TODO: make merge ref util
+  useEffect(() => {
+    lastMessageRef.current =
+      index === messagesLength - 1 ? mergedRef.current : null;
+    const isSearchResult = searchResults.find(
+      (result) => result.messageId === id,
+    );
+    const isCurrentResult =
+      isSearchResult && searchResults[currentResultIndex]?.messageId === id;
+
+    searchResultRef.current = isCurrentResult ? mergedRef.current : null;
+  }, [
+    mergedRef.current,
+    searchResults,
+    currentResultIndex,
+    searchTerm,
+    id,
+    index,
+    messagesLength,
+  ]);
 
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
   return (
-    <StyledMessage
-      ref={index === messagesLength - 1 ? lastMessageRef : null}
-      key={id}
-      $isMine={senderId === userId}
-    >
-      <Bubble $isMine={senderId === userId}>{content}</Bubble>
+    <StyledMessage ref={mergedRef} key={id} $isMine={senderId === userId}>
+      <Bubble $isMine={senderId === userId}>
+        {renderWithHighlight(content, searchTerm, searchResults, id)}
+      </Bubble>
     </StyledMessage>
   );
 }
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 6784ad86..e7dd3dce 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -81,13 +81,11 @@ function Topbar() {
     setIsSearching(!isSearching);
   };
 
-  const handleSearch = (term: string) => {};
-
   return (
     <Container>
       <Avatar image={image} name={name?.charAt(0)} />
       {isSearching ? (
-        <SearchBar onClose={toggleSearch} onSearch={handleSearch} />
+        <SearchBar onClose={toggleSearch} />
       ) : (
         <>
           <Info>
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index 9ff9d298..63fd7388 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -1,7 +1,16 @@
 import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
+import { RootState } from "@state/store";
+import {
+  setSearchTerm,
+  setSearchResults,
+  moveToNextResult,
+  moveToPreviousResult,
+  clearSearch,
+} from "@state/messages/search";
 
 const SearchContainer = styled.div`
   display: flex;
@@ -11,7 +20,6 @@ const SearchContainer = styled.div`
   padding: 5px 10px;
   background-color: var(--color-background-secondary);
   box-shadow: 0 0 0.625rem 0 var(--color-default-shadow);
-
   &:focus-within {
     border: 1px solid var(--color-search-border);
   }
@@ -26,7 +34,6 @@ const SearchInput = styled.input`
   font-size: 14px;
   margin-left: 1rem;
   width: 100%;
-
   &::placeholder {
     color: var(--color-text-secondary);
   }
@@ -41,6 +48,10 @@ const IconButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 
 const SuggestionButtons = styled.div`
@@ -48,31 +59,80 @@ const SuggestionButtons = styled.div`
   flex-direction: row;
 `;
 
+const ResultCounter = styled.span`
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  margin-right: 0.5rem;
+`;
+
 interface SearchBarProps {
   onClose: () => void;
-  onSearch: (term: string) => void;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({ onClose, onSearch }) => {
-  const [searchTerm, setSearchTerm] = useState("");
+const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const { searchTerm, searchResults, currentResultIndex } = useSelector(
+    (state: RootState) => state.search,
+  );
+  const { messages } = useSelector((state: RootState) => state.messages);
   const [isSearchLoading, setIsSearchLoading] = useState(false);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (searchTerm) {
-        onSearch(searchTerm);
-        setIsSearchLoading(false);
+  const performSearch = (term: string) => {
+    if (!term) {
+      dispatch(setSearchResults([]));
+      setIsSearchLoading(false);
+      return;
+    }
+
+    const results = messages.reduce((acc, message) => {
+      const lowerCaseTerm = term.toLowerCase();
+      const lowerCaseContent = message.content.toLowerCase();
+
+      if (lowerCaseContent.includes(lowerCaseTerm)) {
+        const matchIndices = findAllMatchIndices(message.content, term);
+        matchIndices.forEach((highlightIndex) => {
+          acc.push({
+            messageId: message.id,
+            highlightIndex,
+          });
+        });
       }
-    }, 500);
 
+      return acc;
+    }, []);
+
+    dispatch(setSearchTerm(term));
+    dispatch(setSearchResults(results));
+    setIsSearchLoading(false);
+  };
+
+  const findAllMatchIndices = (text: string, term: string) => {
+    const indices = [];
+    let index = text.toLowerCase().indexOf(term.toLowerCase());
+    while (index !== -1) {
+      indices.push(index);
+      index = text.toLowerCase().indexOf(term.toLowerCase(), index + 1);
+    }
+    return indices;
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      performSearch(searchTerm);
+    }, 100);
     return () => clearTimeout(timer);
-  }, [searchTerm, onSearch]);
+  }, [searchTerm]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
+    dispatch(setSearchTerm(e.target.value));
     setIsSearchLoading(true);
   };
 
+  const handleClose = () => {
+    dispatch(clearSearch());
+    onClose();
+  };
+
   return (
     <SearchContainer>
       <Icon>
@@ -84,11 +144,28 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose, onSearch }) => {
         value={searchTerm}
         onChange={handleSearch}
       />
+      <ResultCounter>
+        {searchResults.length > 0
+          ? `${currentResultIndex + 1} of ${searchResults.length}`
+          : searchTerm.length > 0
+            ? "0 results"
+            : ""}
+      </ResultCounter>
       <SuggestionButtons>
-        <IconButton>{getIcon("KeyboardArrowUp")}</IconButton>
-        <IconButton>{getIcon("KeyboardArrowDown")}</IconButton>
+        <IconButton
+          onClick={() => dispatch(moveToPreviousResult())}
+          disabled={searchResults.length === 0}
+        >
+          {getIcon("KeyboardArrowUp")}
+        </IconButton>
+        <IconButton
+          onClick={() => dispatch(moveToNextResult())}
+          disabled={searchResults.length === 0}
+        >
+          {getIcon("KeyboardArrowDown")}
+        </IconButton>
       </SuggestionButtons>
-      <IconButton onClick={onClose}>{getIcon("Close")}</IconButton>
+      <IconButton onClick={handleClose}>{getIcon("Close")}</IconButton>
     </SearchContainer>
   );
 };
diff --git a/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
new file mode 100644
index 00000000..26cfb318
--- /dev/null
+++ b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+
+import { RootState } from "@state/store";
+
+function useScrollToSearchResultsMsg() {
+  const { searchResults, searchTerm, currentResultIndex } = useSelector(
+    (state: RootState) => state.search,
+  );
+  const searchResultRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (searchResults.length > 0 && searchResultRef.current) {
+      searchResultRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [searchResults, currentResultIndex, searchTerm]);
+
+  return { searchResultRef };
+}
+
+export default useScrollToSearchResultsMsg;
diff --git a/app/src/mocks/profile-settings/profile-settings.ts b/app/src/mocks/profile-settings/profile-settings.ts
index 7c131b5f..9c6f3d13 100644
--- a/app/src/mocks/profile-settings/profile-settings.ts
+++ b/app/src/mocks/profile-settings/profile-settings.ts
@@ -1,7 +1,8 @@
+import { MOCK_USER1 } from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
 
 const savedUser = localStorage.getItem("user");
-const user = savedUser ? JSON.parse(savedUser) : null;
+const user = savedUser ? JSON.parse(savedUser) : MOCK_USER1;
 
 export const profileSettingsMock = [
   http.get(/.*\.(png|jpg|jpeg|gif|svg)$/, async () => {
@@ -16,7 +17,7 @@ export const profileSettingsMock = [
           user,
         },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 
@@ -27,7 +28,7 @@ export const profileSettingsMock = [
         status: "success",
         data: newProfileSettings,
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 ];
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index 095a65ee..14dc2076 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -23,7 +23,7 @@ const messagesSlice = createSlice({
 
     deleteMessage: (
       state,
-      action: PayloadAction<{ id: string; chatId: string }>
+      action: PayloadAction<{ id: string; chatId: string }>,
     ) => {
       state.messages = state.messages.filter((message) => {
         const { chatId, id } = action.payload;
@@ -34,11 +34,11 @@ const messagesSlice = createSlice({
 
     editMessage: (
       state,
-      action: PayloadAction<{ id: string; content: string; chatId: string }>
+      action: PayloadAction<{ id: string; content: string; chatId: string }>,
     ) => {
       const { id, content, chatId } = action.payload;
       const message = state.messages.find(
-        (msg) => msg.id === id && msg.chatId == chatId
+        (msg) => msg.id === id && msg.chatId == chatId,
       );
       if (message) {
         message.content = content;
diff --git a/app/src/state/messages/search.ts b/app/src/state/messages/search.ts
new file mode 100644
index 00000000..ca46dc16
--- /dev/null
+++ b/app/src/state/messages/search.ts
@@ -0,0 +1,60 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface SearchState {
+  searchTerm: string;
+  searchResults: {
+    messageId: string;
+    highlightIndex: number;
+  }[];
+  currentResultIndex: number;
+}
+
+const initialState: SearchState = {
+  searchTerm: "",
+  searchResults: [],
+  currentResultIndex: -1,
+};
+
+const searchSlice = createSlice({
+  name: "search",
+  initialState,
+  reducers: {
+    setSearchTerm: (state, action: PayloadAction<string>) => {
+      state.searchTerm = action.payload;
+    },
+    setSearchResults: (
+      state,
+      action: PayloadAction<{ messageId: string; highlightIndex: number }[]>,
+    ) => {
+      state.searchResults = action.payload;
+      state.currentResultIndex = state.searchResults.length > 0 ? 0 : -1;
+    },
+    moveToNextResult: (state) => {
+      if (state.searchResults.length > 0) {
+        state.currentResultIndex =
+          (state.currentResultIndex + 1) % state.searchResults.length;
+      }
+    },
+    moveToPreviousResult: (state) => {
+      if (state.searchResults.length > 0) {
+        state.currentResultIndex =
+          (state.currentResultIndex - 1 + state.searchResults.length) %
+          state.searchResults.length;
+      }
+    },
+    clearSearch: (state) => {
+      state.searchTerm = "";
+      state.searchResults = [];
+      state.currentResultIndex = -1;
+    },
+  },
+});
+
+export const {
+  setSearchTerm,
+  setSearchResults,
+  moveToNextResult,
+  moveToPreviousResult,
+  clearSearch,
+} = searchSlice.actions;
+export default searchSlice.reducer;
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index 38c98c8e..0db0672e 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -3,12 +3,14 @@ import themeReducer from "./theme/theme";
 import sideBarReducer from "./side-bar/sideBar";
 import userReducer from "./user/user";
 import messagesReducer from "./messages/messages";
+import searchReducer from "./messages/search";
 export const store = configureStore({
   reducer: {
     theme: themeReducer,
     sideBarData: sideBarReducer,
     user: userReducer,
     messages: messagesReducer,
+    search: searchReducer,
   },
 });
 
diff --git a/app/src/utils/renderWithHighlight.ts b/app/src/utils/renderWithHighlight.ts
new file mode 100644
index 00000000..9d0578ba
--- /dev/null
+++ b/app/src/utils/renderWithHighlight.ts
@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+
+const HighlightedText = styled.span<{ $highlight?: boolean }>`
+  background-color: ${(props) => (props.$highlight ? "yellow" : "transparent")};
+  color: ${(props) => (props.$highlight ? "black" : "inherit")};
+`;
+
+function renderWithHighlight(
+  content: string,
+  searchTerm?: string,
+  searchResults?: any,
+  id?: string,
+) {
+  if (!searchTerm) {
+    return content;
+  }
+
+  const result = searchResults.find((result) => result.messageId === id);
+
+  if (!result) {
+    return content;
+  }
+
+  const before = content.slice(0, result.highlightIndex);
+  const highlighted = content.slice(
+    result.highlightIndex,
+    result.highlightIndex + searchTerm.length,
+  );
+  const after = content.slice(result.highlightIndex + searchTerm.length);
+
+  return (
+    <>
+      {before}
+      <HighlightedText $highlight>{highlighted}</HighlightedText>
+      {after}
+    </>
+  );
+}
+
+export default renderWithHighlight;
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 3bfb13f1..b5f5c3e6 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -2,23 +2,54 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": "./src/",
     "paths": {
-      "@components/*": ["./components/*"],
-      "@inputs/*": ["./components/inputs/*"],
-      "@mocks/*": ["./mocks/*"],
-      "@features/*": ["./features/*"],
-      "@pages/*": ["./pages/*"],
-      "@hooks/*": ["./hooks/*"],
-      "@constants": ["./constants"],
-      "@state/*": ["./state/*"],
-      "types/*": ["./types/*"],
-      "@data/*": ["./data/*"],
-      "@tests/*": ["./tests/*"],
-      "@services": ["./services/*"]
+      "@components/*": [
+        "./components/*"
+      ],
+      "@inputs/*": [
+        "./components/inputs/*"
+      ],
+      "@mocks/*": [
+        "./mocks/*"
+      ],
+      "@features/*": [
+        "./features/*"
+      ],
+      "@pages/*": [
+        "./pages/*"
+      ],
+      "@hooks/*": [
+        "./hooks/*"
+      ],
+      "@constants": [
+        "./constants"
+      ],
+      "@state/*": [
+        "./state/*"
+      ],
+      "types/*": [
+        "./types/*"
+      ],
+      "@data/*": [
+        "./data/*"
+      ],
+      "@tests/*": [
+        "./tests/*"
+      ],
+      "@services": [
+        "./services/*"
+      ]
+      "@utils/*": [
+        "./utils/*"
+      ],
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From d96f64350929b33309c82e4d553111602c342587 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 29 Nov 2024 14:12:42 +0200
Subject: [PATCH 027/136] hotfix: render with highlight (#63)

---
 app/src/features/chats/Message.tsx                     | 10 ++++++++--
 ...{renderWithHighlight.ts => renderWithHighlight.tsx} |  1 -
 app/tsconfig.app.json                                  |  4 ++--
 3 files changed, 10 insertions(+), 5 deletions(-)
 rename app/src/utils/{renderWithHighlight.ts => renderWithHighlight.tsx} (97%)

diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 3024767d..0f678a7e 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -6,7 +6,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "@state/store";
 import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
 import { useEffect, useRef } from "react";
-import renderWithHighlight from "utils/renderWithHighlight";
+import renderWithHighlight from "@utils/renderWithHighlight";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -72,7 +72,13 @@ function Message({
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
   return (
-    <StyledMessage ref={mergedRef} key={id} $isMine={senderId === userId}>
+    <StyledMessage
+      ref={mergedRef}
+      key={id}
+      $isMine={senderId === userId}
+      data-message-id={id}
+      data-testid={`message-${id}`}
+    >
       <Bubble $isMine={senderId === userId}>
         {renderWithHighlight(content, searchTerm, searchResults, id)}
       </Bubble>
diff --git a/app/src/utils/renderWithHighlight.ts b/app/src/utils/renderWithHighlight.tsx
similarity index 97%
rename from app/src/utils/renderWithHighlight.ts
rename to app/src/utils/renderWithHighlight.tsx
index 9d0578ba..114292b6 100644
--- a/app/src/utils/renderWithHighlight.ts
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 
 const HighlightedText = styled.span<{ $highlight?: boolean }>`
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index b5f5c3e6..5a1d99ed 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -46,10 +46,10 @@
       ],
       "@services": [
         "./services/*"
-      ]
+      ],
       "@utils/*": [
         "./utils/*"
-      ],
+      ]
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From 3775acb0311426afa0d2fa2b3755ca65f717efa3 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:10:05 +0200
Subject: [PATCH 028/136] hotfix: fix the not found endpoints in stories (#66)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* merge dev

* hotfix: fix the stories' endpoint not found

* hotfix: fix the stories' endpoint not found
---
 .../float-label-input/FloatingLabelInput.tsx  |   2 +-
 .../side-bar/chats/ChatsSideBar.tsx           |   2 +-
 app/src/features/chats/SendButton.tsx         |  18 ++--
 .../ProfilePictureSection.tsx                 | 101 ++++++++++++++++++
 4 files changed, 113 insertions(+), 10 deletions(-)
 create mode 100644 app/src/features/profile-settings/ProfilePictureSection.tsx

diff --git a/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx b/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
index be240209..f187e53f 100644
--- a/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
+++ b/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx
@@ -7,7 +7,7 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 
-interface FloatingLabelInputProps<TFormValues extends FieldValues> {
+export interface FloatingLabelInputProps<TFormValues extends FieldValues> {
   label: string;
   id: Path<TFormValues>;
   watch?: UseFormWatch<TFormValues>;
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index c0f2666e..dc89e6a8 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -31,7 +31,7 @@ function ChatsSideBar({ children }: ChatsSideBarProps) {
   return (
     <StyledChatsSideBar>
       <ChatsSidebarHeader />
-      <StoryListContainer />
+      {/* <StoryListContainer /> */}
       {children}
       <StyledButtonContainer>
         <AddStory />
diff --git a/app/src/features/chats/SendButton.tsx b/app/src/features/chats/SendButton.tsx
index 96d7af58..aa7e5694 100644
--- a/app/src/features/chats/SendButton.tsx
+++ b/app/src/features/chats/SendButton.tsx
@@ -7,14 +7,16 @@ interface ButtonType {
 
 function RecordInput({ type, onClick }: ButtonType) {
   return (
-    <CircleIcon
-      onClick={onClick}
-      data-testid="record-icon"
-      $icon={type === "record" ? "Record" : "SendMessage"}
-      $padding={0.6}
-      $color="white"
-      $bgColor="var(--accent-color)"
-    />
+    <>
+      <CircleIcon
+        onClick={onClick}
+        data-testid="record-icon"
+        $icon={type === "record" ? "Record" : "Send"}
+        $padding={0.6}
+        $color="white"
+        $bgColor="var(--accent-color)"
+      />
+    </>
   );
 }
 
diff --git a/app/src/features/profile-settings/ProfilePictureSection.tsx b/app/src/features/profile-settings/ProfilePictureSection.tsx
new file mode 100644
index 00000000..234f59cd
--- /dev/null
+++ b/app/src/features/profile-settings/ProfilePictureSection.tsx
@@ -0,0 +1,101 @@
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import ImageEditor from "@components/ImageEditor";
+import { useState } from "react";
+
+interface ProfilePictureSectionProps {
+  initials?: string;
+  handleImageUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const UploadProfilePicture = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: var(--color-background);
+  position: relative;
+  cursor: pointer;
+
+  &:hover svg {
+    scale: 1.2;
+  }
+`;
+
+const UploadProfilePictureIcon = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  cursor: pointer;
+  z-index: 5;
+
+  svg {
+    transition: all 0.2s ease-out;
+    transform-origin: center;
+    font-size: 3rem;
+  }
+`;
+
+const StyledImageInput = styled.input`
+  position: absolute;
+  top: 1rem;
+  left: calc(50% - 4rem);
+  width: 8rem;
+  height: 8rem;
+  opacity: 0;
+  z-index: 10;
+  cursor: pointer;
+`;
+const StyledProfileImage = styled.img`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+const DefaultProfilePicture = styled.div`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+  opacity: 0.8;
+`;
+function ProfilePictureSection({
+  initials,
+  handleImageUpload,
+}: ProfilePictureSectionProps) {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [isImageEditorOpen, setIsImageEditorOpen] = useState(false);
+  return (
+    <UploadProfilePicture>
+      <StyledImageInput
+        type="file"
+        accept="image/*"
+        onChange={handleImageUpload}
+        data-testid="image-upload"
+        id="photo"
+      />
+      {selectedImage ? (
+        <>
+          <UploadProfilePictureIcon>
+            {getIcon("AddPhoto")}
+          </UploadProfilePictureIcon>
+          <StyledProfileImage src={selectedImage} alt="Profile Picture" />
+        </>
+      ) : (
+        <DefaultProfilePicture>{initials}</DefaultProfilePicture>
+      )}
+      <ImageEditor isOpen={isImageEditorOpen} />
+    </UploadProfilePicture>
+  );
+}
+
+export default ProfilePictureSection;

From 9f008a22344120b21bdfd046b632e10dc53c9133 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:13:34 +0200
Subject: [PATCH 029/136] Emojies picker set up (#65)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fixed socket persistent connection

* emojies picker seet up

* fix: bug fixes and adjustments (#53)

* fix: mock change to match backend

* docs: add example env instead of the deleted one

* fix: metaview port not being set on development version

* fix viewhub scaling

* feat: in-chat search (gui component) (#54)

* feat: add search gui to chat topbar

* fix: scroll in profile settings (please don't change it back again)

* fix: fix env vars not being loaded in tests (#55)

* fix: env vars not being loaded in tests

* fix: logout other sessions mock

* Chats (#57)

* Release v1.0.0 (#49)

* fix(ops): backend integration with cors and cookies (#33)

* 🐛 (Login): fix bugs (#32)

* 🐛 Fix data-testid overriding

* 🐛 Fix resetting the form after submit

* 🐛 Consistent error messages in password & email fields

* 🐛 Resetting email & pass in case of a successful login

* 🐛 Added api-url to requests' endpoints

* 🔇 Removed logs

* :bug: (privacy-settings): fixing bugs (#34)

* :bug: (sidebar): adding data-testid in row items

* :bug: (sidebar): fixing responsiveness

* :recycle: (sidebar-row): refactoring key element & data-testid

* fix(profile-settings): fix integration with backend (#35)

* (fix) integration with backend signup (#36)

* fix captcha and confirm password

* bug fixes on sign up

* fix signup integration

* requested changess

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* fix confirm email and reset password (#37)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* :recycle: applying factory design pattern + integration with BE (#38)

* :recycle: add getKey function (#40)

* Feature/update profile picture (mock) (#39)

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

* ✨ (feat

(feat): add profile picture mock

* 🐛 Fix(update-profile-picture): fix the blob

fix(update-profile-picture): fix the blob

* 💄 Feat: StoryIcon UI

Feat: StoryIcon UI

* 🐛 Fix(sidebar): fix the searchbar responsiveness

fix(sidebar): fix the searchbar responsiveness

* 📱 Fix(sidebar): make sidebar responsive

fix(sidebar): make sidebar responsive

* 🐛 Fix(user): fix importing privacy states

fix(user): fix importing privacy states

* 🎉(oauth): Integrated with backend (#42)

* 💄 (messaging): Added chats layout (No messages)

* 🐛 (protecting routes): Fix not navigating to chat

* ♻️ (protected routes): Refacored protecting routes

* ♻️ (chats): Refactored chats

* ♻️ (aouth): Refactored aouth depending on backend changes

* 🐛 (oauth): Fix request type in google oauth

* 🎉 (oauth): Integrated with backend

* (CI) Added a github action to trigger jenkins pipelines (#43)

* :sparkles: (block): view block list +  add/remove users from block list (#44)

* :sparkles: (privacy-settings): View block list finished

* :sparkles: (block): add/remove user from block list

* :lipstick: (block):  adding scrollbar styling

* :twisted_rightwards_arrows: Merging dev

* :bug: fixing merging bugs

* feat(devices): devices and session management + add animations (#46)

* chore: resolve dev conflicts

* feat(devices): logout other sessions

* socket and messages infrastructure setup (#45)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* Add nginx configuration (#47)

* :bug: (block): adding data-testid prop (#48)

---------

Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

* (hot fix) add packages json of socket-io client (#50)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* hotfix: fix responsive not working missing meta viewport width (#51)

* 💄 (messaging): Added chat layout

* ✨ (messages): Send messages by sockets (only one user yet)

* 🔀 Merging with dev

---------

Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

* fix emoji styling and integration.
fix z-index.

* Squashed commit of the following:

commit 2295de75b7b21ecf7d446fa0f1f213be0620843b
Author: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date:   Fri Nov 29 07:50:43 2024 +0200

    Feature/story upload (#56)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * ✨ Feat(stories): create stories

    feat(stories): create stories

    * added view stories feature

    * merge stories with dev

    * make storylist scrollable

    * remove dummy code

    * (fix): fix stories styling bugs

commit 70b6a1d07d0bf6f59722c5322463cacd9aa913a5
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Fri Nov 29 03:05:15 2024 +0200

    🚑️ Fix merge error in login mock (#60)

commit 55568cb29d7bb937bbd6b5b5b61b2235174a9549
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Fri Nov 29 02:31:22 2024 +0200

    ✨ (messaging): Two users sending messages (#59)

    * Release v1.0.0 (#49)

    * fix(ops): backend integration with cors and cookies (#33)

    * 🐛 (Login): fix bugs (#32)

    * 🐛 Fix data-testid overriding

    * 🐛 Fix resetting the form after submit

    * 🐛 Consistent error messages in password & email fields

    * 🐛 Resetting email & pass in case of a successful login

    * 🐛 Added api-url to requests' endpoints

    * 🔇 Removed logs

    * :bug: (privacy-settings): fixing bugs (#34)

    * :bug: (sidebar): adding data-testid in row items

    * :bug: (sidebar): fixing responsiveness

    * :recycle: (sidebar-row): refactoring key element & data-testid

    * fix(profile-settings): fix integration with backend (#35)

    * (fix) integration with backend signup (#36)

    * fix captcha and confirm password

    * bug fixes on sign up

    * fix signup integration

    * requested changess

    ---------

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * fix confirm email and reset password (#37)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * :recycle: applying factory design pattern + integration with BE (#38)

    * :recycle: add getKey function (#40)

    * Feature/update profile picture (mock) (#39)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * 🎉(oauth): Integrated with backend (#42)

    * 💄 (messaging): Added chats layout (No messages)

    * 🐛 (protecting routes): Fix not navigating to chat

    * ♻️ (protected routes): Refacored protecting routes

    * ♻️ (chats): Refactored chats

    * ♻️ (aouth): Refactored aouth depending on backend changes

    * 🐛 (oauth): Fix request type in google oauth

    * 🎉 (oauth): Integrated with backend

    * (CI) Added a github action to trigger jenkins pipelines (#43)

    * :sparkles: (block): view block list +  add/remove users from block list (#44)

    * :sparkles: (privacy-settings): View block list finished

    * :sparkles: (block): add/remove user from block list

    * :lipstick: (block):  adding scrollbar styling

    * :twisted_rightwards_arrows: Merging dev

    * :bug: fixing merging bugs

    * feat(devices): devices and session management + add animations (#46)

    * chore: resolve dev conflicts

    * feat(devices): logout other sessions

    * socket and messages infrastructure setup (#45)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * Add nginx configuration (#47)

    * :bug: (block): adding data-testid prop (#48)

    ---------

    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

    * (hot fix) add packages json of socket-io client (#50)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * hotfix: fix responsive not working missing meta viewport width (#51)

    * 💄 (messaging): Added chat layout

    * ✨ (messages): Send messages by sockets (only one user yet)

    * 🔀 Merging with dev

    * ✨ (messaging): Two users sending messages

    ---------

    Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

commit e5cd2b400e96c6eef75f9e953e8ec7c48de06c6f
Author: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date:   Fri Nov 29 02:16:58 2024 +0200

    :bug: (block): fixing blocklist (#58)

    * :bug: (block): fixing blocklist

    * :bug: removing unused params

commit f9c8cc050979f51ca743ecb6b092b745416e7348
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Thu Nov 28 18:22:15 2024 +0200

    Chats (#57)

    * Release v1.0.0 (#49)

    * fix(ops): backend integration with cors and cookies (#33)

    * 🐛 (Login): fix bugs (#32)

    * 🐛 Fix data-testid overriding

    * 🐛 Fix resetting the form after submit

    * 🐛 Consistent error messages in password & email fields

    * 🐛 Resetting email & pass in case of a successful login

    * 🐛 Added api-url to requests' endpoints

    * 🔇 Removed logs

    * :bug: (privacy-settings): fixing bugs (#34)

    * :bug: (sidebar): adding data-testid in row items

    * :bug: (sidebar): fixing responsiveness

    * :recycle: (sidebar-row): refactoring key element & data-testid

    * fix(profile-settings): fix integration with backend (#35)

    * (fix) integration with backend signup (#36)

    * fix captcha and confirm password

    * bug fixes on sign up

    * fix signup integration

    * requested changess

    ---------

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * fix confirm email and reset password (#37)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * :recycle: applying factory design pattern + integration with BE (#38)

    * :recycle: add getKey function (#40)

    * Feature/update profile picture (mock) (#39)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * 🎉(oauth): Integrated with backend (#42)

    * 💄 (messaging): Added chats layout (No messages)

    * 🐛 (protecting routes): Fix not navigating to chat

    * ♻️ (protected routes): Refacored protecting routes

    * ♻️ (chats): Refactored chats

    * ♻️ (aouth): Refactored aouth depending on backend changes

    * 🐛 (oauth): Fix request type in google oauth

    * 🎉 (oauth): Integrated with backend

    * (CI) Added a github action to trigger jenkins pipelines (#43)

    * :sparkles: (block): view block list +  add/remove users from block list (#44)

    * :sparkles: (privacy-settings): View block list finished

    * :sparkles: (block): add/remove user from block list

    * :lipstick: (block):  adding scrollbar styling

    * :twisted_rightwards_arrows: Merging dev

    * :bug: fixing merging bugs

    * feat(devices): devices and session management + add animations (#46)

    * chore: resolve dev conflicts

    * feat(devices): logout other sessions

    * socket and messages infrastructure setup (#45)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * Add nginx configuration (#47)

    * :bug: (block): adding data-testid prop (#48)

    ---------

    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

    * (hot fix) add packages json of socket-io client (#50)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * hotfix: fix responsive not working missing meta viewport width (#51)

    * 💄 (messaging): Added chat layout

    * ✨ (messages): Send messages by sockets (only one user yet)

    * 🔀 Merging with dev

    ---------

    Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

commit ec92697c6343411c3839a850d8ca533e47885985
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Wed Nov 27 22:52:47 2024 +0200

    fix: fix env vars not being loaded in tests (#55)

    * fix: env vars not being loaded in tests

    * fix: logout other sessions mock

commit 3828e671bb63d15f2b9632b82298a64193b4c166
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Wed Nov 27 20:58:27 2024 +0200

    feat: in-chat search (gui component) (#54)

    * feat: add search gui to chat topbar

    * fix: scroll in profile settings (please don't change it back again)

commit d3debc05b1b23e7e6c24a492bcb616649fc36180
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Tue Nov 26 23:42:02 2024 +0200

    fix: bug fixes and adjustments (#53)

    * fix: mock change to match backend

    * docs: add example env instead of the deleted one

    * fix: metaview port not being set on development version

commit 90807840a423e922aef4d7e0632a1237d0763a76
Author: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date:   Tue Nov 26 22:42:57 2024 +0200

    fixed socket persistent connection (#52)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* fixes

* Squashed commit of the following:

commit 003eb2640fafc18d07cc83ea46729a49753d8478
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Fri Nov 29 11:09:47 2024 +0200

    feature(messaging): add in chat search functionality (#61)

commit 2295de75b7b21ecf7d446fa0f1f213be0620843b
Author: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date:   Fri Nov 29 07:50:43 2024 +0200

    Feature/story upload (#56)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * ✨ Feat(stories): create stories

    feat(stories): create stories

    * added view stories feature

    * merge stories with dev

    * make storylist scrollable

    * remove dummy code

    * (fix): fix stories styling bugs

commit 70b6a1d07d0bf6f59722c5322463cacd9aa913a5
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Fri Nov 29 03:05:15 2024 +0200

    🚑️ Fix merge error in login mock (#60)

commit 55568cb29d7bb937bbd6b5b5b61b2235174a9549
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Fri Nov 29 02:31:22 2024 +0200

    ✨ (messaging): Two users sending messages (#59)

    * Release v1.0.0 (#49)

    * fix(ops): backend integration with cors and cookies (#33)

    * 🐛 (Login): fix bugs (#32)

    * 🐛 Fix data-testid overriding

    * 🐛 Fix resetting the form after submit

    * 🐛 Consistent error messages in password & email fields

    * 🐛 Resetting email & pass in case of a successful login

    * 🐛 Added api-url to requests' endpoints

    * 🔇 Removed logs

    * :bug: (privacy-settings): fixing bugs (#34)

    * :bug: (sidebar): adding data-testid in row items

    * :bug: (sidebar): fixing responsiveness

    * :recycle: (sidebar-row): refactoring key element & data-testid

    * fix(profile-settings): fix integration with backend (#35)

    * (fix) integration with backend signup (#36)

    * fix captcha and confirm password

    * bug fixes on sign up

    * fix signup integration

    * requested changess

    ---------

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * fix confirm email and reset password (#37)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * :recycle: applying factory design pattern + integration with BE (#38)

    * :recycle: add getKey function (#40)

    * Feature/update profile picture (mock) (#39)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * 🎉(oauth): Integrated with backend (#42)

    * 💄 (messaging): Added chats layout (No messages)

    * 🐛 (protecting routes): Fix not navigating to chat

    * ♻️ (protected routes): Refacored protecting routes

    * ♻️ (chats): Refactored chats

    * ♻️ (aouth): Refactored aouth depending on backend changes

    * 🐛 (oauth): Fix request type in google oauth

    * 🎉 (oauth): Integrated with backend

    * (CI) Added a github action to trigger jenkins pipelines (#43)

    * :sparkles: (block): view block list +  add/remove users from block list (#44)

    * :sparkles: (privacy-settings): View block list finished

    * :sparkles: (block): add/remove user from block list

    * :lipstick: (block):  adding scrollbar styling

    * :twisted_rightwards_arrows: Merging dev

    * :bug: fixing merging bugs

    * feat(devices): devices and session management + add animations (#46)

    * chore: resolve dev conflicts

    * feat(devices): logout other sessions

    * socket and messages infrastructure setup (#45)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * Add nginx configuration (#47)

    * :bug: (block): adding data-testid prop (#48)

    ---------

    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

    * (hot fix) add packages json of socket-io client (#50)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * hotfix: fix responsive not working missing meta viewport width (#51)

    * 💄 (messaging): Added chat layout

    * ✨ (messages): Send messages by sockets (only one user yet)

    * 🔀 Merging with dev

    * ✨ (messaging): Two users sending messages

    ---------

    Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

commit e5cd2b400e96c6eef75f9e953e8ec7c48de06c6f
Author: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date:   Fri Nov 29 02:16:58 2024 +0200

    :bug: (block): fixing blocklist (#58)

    * :bug: (block): fixing blocklist

    * :bug: removing unused params

commit f9c8cc050979f51ca743ecb6b092b745416e7348
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Thu Nov 28 18:22:15 2024 +0200

    Chats (#57)

    * Release v1.0.0 (#49)

    * fix(ops): backend integration with cors and cookies (#33)

    * 🐛 (Login): fix bugs (#32)

    * 🐛 Fix data-testid overriding

    * 🐛 Fix resetting the form after submit

    * 🐛 Consistent error messages in password & email fields

    * 🐛 Resetting email & pass in case of a successful login

    * 🐛 Added api-url to requests' endpoints

    * 🔇 Removed logs

    * :bug: (privacy-settings): fixing bugs (#34)

    * :bug: (sidebar): adding data-testid in row items

    * :bug: (sidebar): fixing responsiveness

    * :recycle: (sidebar-row): refactoring key element & data-testid

    * fix(profile-settings): fix integration with backend (#35)

    * (fix) integration with backend signup (#36)

    * fix captcha and confirm password

    * bug fixes on sign up

    * fix signup integration

    * requested changess

    ---------

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * fix confirm email and reset password (#37)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * :recycle: applying factory design pattern + integration with BE (#38)

    * :recycle: add getKey function (#40)

    * Feature/update profile picture (mock) (#39)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * 🎉(oauth): Integrated with backend (#42)

    * 💄 (messaging): Added chats layout (No messages)

    * 🐛 (protecting routes): Fix not navigating to chat

    * ♻️ (protected routes): Refacored protecting routes

    * ♻️ (chats): Refactored chats

    * ♻️ (aouth): Refactored aouth depending on backend changes

    * 🐛 (oauth): Fix request type in google oauth

    * 🎉 (oauth): Integrated with backend

    * (CI) Added a github action to trigger jenkins pipelines (#43)

    * :sparkles: (block): view block list +  add/remove users from block list (#44)

    * :sparkles: (privacy-settings): View block list finished

    * :sparkles: (block): add/remove user from block list

    * :lipstick: (block):  adding scrollbar styling

    * :twisted_rightwards_arrows: Merging dev

    * :bug: fixing merging bugs

    * feat(devices): devices and session management + add animations (#46)

    * chore: resolve dev conflicts

    * feat(devices): logout other sessions

    * socket and messages infrastructure setup (#45)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * Add nginx configuration (#47)

    * :bug: (block): adding data-testid prop (#48)

    ---------

    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

    * (hot fix) add packages json of socket-io client (#50)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * hotfix: fix responsive not working missing meta viewport width (#51)

    * 💄 (messaging): Added chat layout

    * ✨ (messages): Send messages by sockets (only one user yet)

    * 🔀 Merging with dev

    ---------

    Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

commit ec92697c6343411c3839a850d8ca533e47885985
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Wed Nov 27 22:52:47 2024 +0200

    fix: fix env vars not being loaded in tests (#55)

    * fix: env vars not being loaded in tests

    * fix: logout other sessions mock

commit 3828e671bb63d15f2b9632b82298a64193b4c166
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Wed Nov 27 20:58:27 2024 +0200

    feat: in-chat search (gui component) (#54)

    * feat: add search gui to chat topbar

    * fix: scroll in profile settings (please don't change it back again)

commit d3debc05b1b23e7e6c24a492bcb616649fc36180
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Tue Nov 26 23:42:02 2024 +0200

    fix: bug fixes and adjustments (#53)

    * fix: mock change to match backend

    * docs: add example env instead of the deleted one

    * fix: metaview port not being set on development version

commit 90807840a423e922aef4d7e0632a1237d0763a76
Author: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date:   Tue Nov 26 22:42:57 2024 +0200

    fixed socket persistent connection (#52)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

* fixing merge conflicts

* Squashed commit of the following:

commit d96f64350929b33309c82e4d553111602c342587
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Fri Nov 29 14:12:42 2024 +0200

    hotfix: render with highlight (#63)

commit 003eb2640fafc18d07cc83ea46729a49753d8478
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Fri Nov 29 11:09:47 2024 +0200

    feature(messaging): add in chat search functionality (#61)

commit 2295de75b7b21ecf7d446fa0f1f213be0620843b
Author: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date:   Fri Nov 29 07:50:43 2024 +0200

    Feature/story upload (#56)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * ✨ Feat(stories): create stories

    feat(stories): create stories

    * added view stories feature

    * merge stories with dev

    * make storylist scrollable

    * remove dummy code

    * (fix): fix stories styling bugs

commit 70b6a1d07d0bf6f59722c5322463cacd9aa913a5
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Fri Nov 29 03:05:15 2024 +0200

    🚑️ Fix merge error in login mock (#60)

commit 55568cb29d7bb937bbd6b5b5b61b2235174a9549
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Fri Nov 29 02:31:22 2024 +0200

    ✨ (messaging): Two users sending messages (#59)

    * Release v1.0.0 (#49)

    * fix(ops): backend integration with cors and cookies (#33)

    * 🐛 (Login): fix bugs (#32)

    * 🐛 Fix data-testid overriding

    * 🐛 Fix resetting the form after submit

    * 🐛 Consistent error messages in password & email fields

    * 🐛 Resetting email & pass in case of a successful login

    * 🐛 Added api-url to requests' endpoints

    * 🔇 Removed logs

    * :bug: (privacy-settings): fixing bugs (#34)

    * :bug: (sidebar): adding data-testid in row items

    * :bug: (sidebar): fixing responsiveness

    * :recycle: (sidebar-row): refactoring key element & data-testid

    * fix(profile-settings): fix integration with backend (#35)

    * (fix) integration with backend signup (#36)

    * fix captcha and confirm password

    * bug fixes on sign up

    * fix signup integration

    * requested changess

    ---------

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * fix confirm email and reset password (#37)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * :recycle: applying factory design pattern + integration with BE (#38)

    * :recycle: add getKey function (#40)

    * Feature/update profile picture (mock) (#39)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * 🎉(oauth): Integrated with backend (#42)

    * 💄 (messaging): Added chats layout (No messages)

    * 🐛 (protecting routes): Fix not navigating to chat

    * ♻️ (protected routes): Refacored protecting routes

    * ♻️ (chats): Refactored chats

    * ♻️ (aouth): Refactored aouth depending on backend changes

    * 🐛 (oauth): Fix request type in google oauth

    * 🎉 (oauth): Integrated with backend

    * (CI) Added a github action to trigger jenkins pipelines (#43)

    * :sparkles: (block): view block list +  add/remove users from block list (#44)

    * :sparkles: (privacy-settings): View block list finished

    * :sparkles: (block): add/remove user from block list

    * :lipstick: (block):  adding scrollbar styling

    * :twisted_rightwards_arrows: Merging dev

    * :bug: fixing merging bugs

    * feat(devices): devices and session management + add animations (#46)

    * chore: resolve dev conflicts

    * feat(devices): logout other sessions

    * socket and messages infrastructure setup (#45)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * Add nginx configuration (#47)

    * :bug: (block): adding data-testid prop (#48)

    ---------

    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

    * (hot fix) add packages json of socket-io client (#50)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * hotfix: fix responsive not working missing meta viewport width (#51)

    * 💄 (messaging): Added chat layout

    * ✨ (messages): Send messages by sockets (only one user yet)

    * 🔀 Merging with dev

    * ✨ (messaging): Two users sending messages

    ---------

    Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

commit e5cd2b400e96c6eef75f9e953e8ec7c48de06c6f
Author: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date:   Fri Nov 29 02:16:58 2024 +0200

    :bug: (block): fixing blocklist (#58)

    * :bug: (block): fixing blocklist

    * :bug: removing unused params

commit f9c8cc050979f51ca743ecb6b092b745416e7348
Author: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date:   Thu Nov 28 18:22:15 2024 +0200

    Chats (#57)

    * Release v1.0.0 (#49)

    * fix(ops): backend integration with cors and cookies (#33)

    * 🐛 (Login): fix bugs (#32)

    * 🐛 Fix data-testid overriding

    * 🐛 Fix resetting the form after submit

    * 🐛 Consistent error messages in password & email fields

    * 🐛 Resetting email & pass in case of a successful login

    * 🐛 Added api-url to requests' endpoints

    * 🔇 Removed logs

    * :bug: (privacy-settings): fixing bugs (#34)

    * :bug: (sidebar): adding data-testid in row items

    * :bug: (sidebar): fixing responsiveness

    * :recycle: (sidebar-row): refactoring key element & data-testid

    * fix(profile-settings): fix integration with backend (#35)

    * (fix) integration with backend signup (#36)

    * fix captcha and confirm password

    * bug fixes on sign up

    * fix signup integration

    * requested changess

    ---------

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * fix confirm email and reset password (#37)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * :recycle: applying factory design pattern + integration with BE (#38)

    * :recycle: add getKey function (#40)

    * Feature/update profile picture (mock) (#39)

    * ✨ Feat(profile-picture): set/remove profile picture

    feat(profile-picture): set/remove profile picture

    * Merge branch 'dev' of github.com:TelwareSW/telware-frontend into dev

    * ✨ (feat

    (feat): add profile picture mock

    * 🐛 Fix(update-profile-picture): fix the blob

    fix(update-profile-picture): fix the blob

    * 💄 Feat: StoryIcon UI

    Feat: StoryIcon UI

    * 🐛 Fix(sidebar): fix the searchbar responsiveness

    fix(sidebar): fix the searchbar responsiveness

    * 📱 Fix(sidebar): make sidebar responsive

    fix(sidebar): make sidebar responsive

    * 🐛 Fix(user): fix importing privacy states

    fix(user): fix importing privacy states

    * 🎉(oauth): Integrated with backend (#42)

    * 💄 (messaging): Added chats layout (No messages)

    * 🐛 (protecting routes): Fix not navigating to chat

    * ♻️ (protected routes): Refacored protecting routes

    * ♻️ (chats): Refactored chats

    * ♻️ (aouth): Refactored aouth depending on backend changes

    * 🐛 (oauth): Fix request type in google oauth

    * 🎉 (oauth): Integrated with backend

    * (CI) Added a github action to trigger jenkins pipelines (#43)

    * :sparkles: (block): view block list +  add/remove users from block list (#44)

    * :sparkles: (privacy-settings): View block list finished

    * :sparkles: (block): add/remove user from block list

    * :lipstick: (block):  adding scrollbar styling

    * :twisted_rightwards_arrows: Merging dev

    * :bug: fixing merging bugs

    * feat(devices): devices and session management + add animations (#46)

    * chore: resolve dev conflicts

    * feat(devices): logout other sessions

    * socket and messages infrastructure setup (#45)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * Add nginx configuration (#47)

    * :bug: (block): adding data-testid prop (#48)

    ---------

    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Asmaa-204 <130288326+Asmaa-204@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

    * (hot fix) add packages json of socket-io client (#50)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

    * hotfix: fix responsive not working missing meta viewport width (#51)

    * 💄 (messaging): Added chat layout

    * ✨ (messages): Send messages by sockets (only one user yet)

    * 🔀 Merging with dev

    ---------

    Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
    Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
    Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
    Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
    Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>

commit ec92697c6343411c3839a850d8ca533e47885985
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Wed Nov 27 22:52:47 2024 +0200

    fix: fix env vars not being loaded in tests (#55)

    * fix: env vars not being loaded in tests

    * fix: logout other sessions mock

commit 3828e671bb63d15f2b9632b82298a64193b4c166
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Wed Nov 27 20:58:27 2024 +0200

    feat: in-chat search (gui component) (#54)

    * feat: add search gui to chat topbar

    * fix: scroll in profile settings (please don't change it back again)

commit d3debc05b1b23e7e6c24a492bcb616649fc36180
Author: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date:   Tue Nov 26 23:42:02 2024 +0200

    fix: bug fixes and adjustments (#53)

    * fix: mock change to match backend

    * docs: add example env instead of the deleted one

    * fix: metaview port not being set on development version

commit 90807840a423e922aef4d7e0632a1237d0763a76
Author: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date:   Tue Nov 26 22:42:57 2024 +0200

    fixed socket persistent connection (#52)

    Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
Co-authored-by: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Co-authored-by: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Co-authored-by: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Co-authored-by: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Co-authored-by: shehab khaled <89648315+shehab299@users.noreply.github.com>
---
 app/src/components/CloseButton.tsx            |  4 +-
 app/src/components/Modal.tsx                  |  2 +-
 .../side-bar/chats/SideBarToolsButton.tsx     |  4 +-
 .../reset-password/ResetPasswordModal.tsx     |  2 +-
 .../signup/ConfirmationEmailModal.tsx         |  2 +-
 app/src/features/chats/ChatBody.tsx           |  5 +-
 app/src/features/chats/ChatInput.tsx          | 54 +++++++++-----
 app/src/features/chats/Message.tsx            | 12 ++-
 app/src/features/chats/SendButton.tsx         |  5 +-
 app/src/features/chats/Topbar.tsx             |  4 +-
 .../features/chats/emojies/EmojiPicker.tsx    | 74 +++++++++++++++++++
 .../profile-settings/ProfileSettings.tsx      |  2 +-
 .../features/search/components/SearchBar.tsx  |  4 +-
 .../features/stories/components/StoryList.tsx |  4 +-
 .../stories/components/StoryListContainer.tsx |  4 +-
 .../stories/components/StoryPreview.tsx       |  4 +-
 .../stories/components/StorySlide.tsx         | 14 +++-
 .../stories/components/StorySlideCounter.tsx  |  4 +-
 .../stories/components/StorySliderTooltip.tsx |  4 +-
 .../stories/components/StoryViews.tsx         |  8 +-
 .../features/stories/components/UserInfo.tsx  |  4 +-
 app/src/utils/renderWithHighlight.tsx         |  4 +
 app/tsconfig.app.json                         |  1 +
 23 files changed, 184 insertions(+), 41 deletions(-)
 create mode 100644 app/src/features/chats/emojies/EmojiPicker.tsx

diff --git a/app/src/components/CloseButton.tsx b/app/src/components/CloseButton.tsx
index 16faed62..639c7bed 100644
--- a/app/src/components/CloseButton.tsx
+++ b/app/src/components/CloseButton.tsx
@@ -11,7 +11,9 @@ const StyledCloseButton = styled.div`
   right: 0.5rem;
   cursor: pointer;
   color: white;
-  z-index: 2000;
+
+  z-index: 2;
+
 `;
 
 function CloseButton(props: CloseButtonProps) {
diff --git a/app/src/components/Modal.tsx b/app/src/components/Modal.tsx
index 786989cf..3df379a5 100644
--- a/app/src/components/Modal.tsx
+++ b/app/src/components/Modal.tsx
@@ -10,7 +10,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 1;
 `;
 
 const ModalContainer = styled.div`
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index a81bf9d3..ae9590dd 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -34,7 +34,9 @@ const StyledList = styled.ul<{ $isOpened?: boolean }>`
   box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
   border-radius: var(--border-radius-default);
   visibility: ${({ $isOpened }) => ($isOpened ? "visible" : "hidden")};
-  z-index: 2000;
+
+  z-index: 2;
+
 `;
 
 function SettingsToolbar() {
diff --git a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
index b63ee0d4..e13ebf38 100644
--- a/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
+++ b/app/src/features/authentication/reset-password/ResetPasswordModal.tsx
@@ -27,7 +27,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 1;
 `;
 
 const ModalContainer = styled.div`
diff --git a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
index 3c15e73c..efc357e4 100644
--- a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
+++ b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
@@ -15,7 +15,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 1;
 `;
 
 const ModalContainer = styled.div`
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 8dec36c9..bfb02b2d 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -24,7 +24,10 @@ const ScrollContainer = styled.div`
   }
 
   scroll-behavior: smooth;
-  z-index: 1000;
+
+  z-index: 1;
+
+
 
   display: flex;
   flex-direction: column;
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 09641f0c..06d49c7b 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,26 +1,29 @@
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-
 import { getIcon } from "@data/icons";
 
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Icon from "@components/Icon";
 import RecordInput from "./SendButton";
-
 import { addMessage } from "@state/messages/messages";
 import { RootState } from "@state/store";
-
 import { useSocket } from "@hooks/useSocket";
+import EmojiPickerItem from "./emojies/EmojiPicker";
 
 const Container = styled.div`
-  z-index: 1000;
+  z-index: 1;
+
 
+  position: absolute;
+  bottom: 3%;
+  z-index: 1;
+  left: 50%;
+  transform: translateX(-50%);
   margin: auto;
 
   width: 80%;
   max-width: 600px;
-
   display: flex;
 `;
 
@@ -40,6 +43,11 @@ const InputContainer = styled.div`
 
   height: 100%;
 `;
+const InvisibleButton = styled.button`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+`;
 
 const InputWrapper = styled.div`
   display: flex;
@@ -61,10 +69,16 @@ const Input = styled.div`
 
 function ChatInput() {
   const [input, setInput] = useState("");
+  const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
   const { sendMessage } = useSocket();
   const dispatch = useDispatch();
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
+
+  const toggleShowEmojies = () => {
+    setIsEmojiSelectorOpen((show) => !show);
+  };
+
   function handleSubmit() {
     console.log("sending message");
 
@@ -91,18 +105,24 @@ function ChatInput() {
   return (
     <Container>
       <Input>
-        <InputContainer>
-          <InputWrapper>
-            <Icon>{getIcon("Emojie")}</Icon>
-            <ExpandingTextArea input={input} setInput={setInput} />
-            <Icon>{getIcon("Attatch")}</Icon>
-          </InputWrapper>
-        </InputContainer>
-
-        <RecordInput
-          onClick={handleSubmit}
-          type={!input ? "record" : "message"}
-        />
+        {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
+        <Input>
+          <InputContainer>
+            <InputWrapper>
+              <InvisibleButton onClick={toggleShowEmojies}>
+                <Icon>{getIcon("Emojie")}</Icon>
+              </InvisibleButton>
+
+              <ExpandingTextArea input={input} setInput={setInput} />
+              <Icon>{getIcon("Attatch")}</Icon>
+            </InputWrapper>
+          </InputContainer>
+
+          <RecordInput
+            onClick={handleSubmit}
+            type={!input.length ? "record" : "message"}
+          />
+        </Input>
       </Input>
     </Container>
   );
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 0f678a7e..af7b63d8 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -6,6 +6,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "@state/store";
 import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
 import { useEffect, useRef } from "react";
+
 import renderWithHighlight from "@utils/renderWithHighlight";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
@@ -26,7 +27,9 @@ const Bubble = styled.div<{ $isMine: boolean }>`
   background-color: ${({ $isMine }) => ($isMine ? "#0084ff" : "#e5e5ea")};
   color: ${({ $isMine }) => ($isMine ? "#fff" : "#000")};
   margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
-  z-index: 1000;
+
+  z-index: 1;
+
 `;
 
 type MessageProps = {
@@ -41,7 +44,9 @@ function Message({
   data: { id, senderId, content },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
+
     (state: RootState) => state.search,
+
   );
 
   const mergedRef = useRef<HTMLDivElement>(null);
@@ -53,7 +58,8 @@ function Message({
     lastMessageRef.current =
       index === messagesLength - 1 ? mergedRef.current : null;
     const isSearchResult = searchResults.find(
-      (result) => result.messageId === id,
+      (result) => result.messageId === id
+
     );
     const isCurrentResult =
       isSearchResult && searchResults[currentResultIndex]?.messageId === id;
@@ -72,6 +78,7 @@ function Message({
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
   return (
+
     <StyledMessage
       ref={mergedRef}
       key={id}
@@ -79,6 +86,7 @@ function Message({
       data-message-id={id}
       data-testid={`message-${id}`}
     >
+
       <Bubble $isMine={senderId === userId}>
         {renderWithHighlight(content, searchTerm, searchResults, id)}
       </Bubble>
diff --git a/app/src/features/chats/SendButton.tsx b/app/src/features/chats/SendButton.tsx
index aa7e5694..ff982dfd 100644
--- a/app/src/features/chats/SendButton.tsx
+++ b/app/src/features/chats/SendButton.tsx
@@ -7,7 +7,8 @@ interface ButtonType {
 
 function RecordInput({ type, onClick }: ButtonType) {
   return (
-    <>
+
+   
       <CircleIcon
         onClick={onClick}
         data-testid="record-icon"
@@ -16,7 +17,7 @@ function RecordInput({ type, onClick }: ButtonType) {
         $color="white"
         $bgColor="var(--accent-color)"
       />
-    </>
+
   );
 }
 
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index e7dd3dce..46dc2986 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -10,7 +10,9 @@ import SearchBar from "@features/search/components/SearchBar";
 const Container = styled.div`
   position: absolute;
   top: 0;
-  z-index: 1001;
+
+  z-index: 2;
+
 
   height: 3.5rem;
   width: 100%;
diff --git a/app/src/features/chats/emojies/EmojiPicker.tsx b/app/src/features/chats/emojies/EmojiPicker.tsx
new file mode 100644
index 00000000..b80a2ee5
--- /dev/null
+++ b/app/src/features/chats/emojies/EmojiPicker.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Theme } from "@state/theme/theme";
+import EmojiPicker, {
+  EmojiClickData,
+  Theme as emojitheme,
+} from "emoji-picker-react";
+import styled from "styled-components";
+
+const StyledEmojiPickerContainer = styled.div`
+  z-index: 4;
+  position: absolute;
+  width: 30%;
+  min-width: 300px;
+  height: 35%;
+  min-height: 400px;
+  max-height: 400px;
+  bottom: 105%;
+  background: var(--color-secondary);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  padding: 0;
+`;
+
+const EmojiPickerWrapper = styled.div`
+  .emoji-picker {
+    background: none;
+    border: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+    gap: 8px;
+  }
+
+  .emoji {
+    font-size: 1.2rem;
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+`;
+
+interface EmojiPickerItemProps {
+  setInputText: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function EmojiPickerItem({
+  setInputText,
+}: EmojiPickerItemProps) {
+  const currentTheme = useAppSelector((state) => state.theme.value);
+
+  const handleEmojiClicked = (emojiData: EmojiClickData, event: MouseEvent) => {
+    setInputText((text) => text + emojiData.emoji);
+  };
+
+  return (
+    <StyledEmojiPickerContainer>
+      <EmojiPickerWrapper>
+        <EmojiPicker
+          width="100%"
+          theme={
+            currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+          }
+          onEmojiClick={handleEmojiClicked}
+        />
+      </EmojiPickerWrapper>
+    </StyledEmojiPickerContainer>
+  );
+}
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 13464c2a..4e6d30fa 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -82,7 +82,7 @@ const DeleteProfilePictureContainer = styled.div`
   position: absolute;
   bottom: 1rem;
   right: calc(50% - 4rem);
-  z-index: 5000;
+  z-index: 5;
   background-color: red;
   border: 0.1rem solid var(--color-border);
   border-radius: 50%;
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index 63fd7388..16862b6f 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -72,7 +72,9 @@ interface SearchBarProps {
 const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   const dispatch = useDispatch();
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-    (state: RootState) => state.search,
+
+    (state: RootState) => state.search
+
   );
   const { messages } = useSelector((state: RootState) => state.messages);
   const [isSearchLoading, setIsSearchLoading] = useState(false);
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
index 514483ae..77f79d26 100644
--- a/app/src/features/stories/components/StoryList.tsx
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -20,7 +20,9 @@ const StyledStoryListContainer = styled.div`
   position: relative;
   width: 100%;
   height: 10rem;
-  z-index: 100;
+
+  z-index: 1;
+
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index 0c3a046a..dabfd9b5 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -25,7 +25,9 @@ const StyledContainer = styled.div<{ $isOpened: boolean }>`
           height: 10rem;
           margin-bottom: -1rem;
         `}
-  z-index: 100;
+
+  z-index: 1;
+
 `;
 
 function StoryListContainer() {
diff --git a/app/src/features/stories/components/StoryPreview.tsx b/app/src/features/stories/components/StoryPreview.tsx
index 5f0a9a78..149f0f6a 100644
--- a/app/src/features/stories/components/StoryPreview.tsx
+++ b/app/src/features/stories/components/StoryPreview.tsx
@@ -15,7 +15,9 @@ const StyledContainer = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+
+  z-index: 1;
+
   width: 100%;
   height: 100%;
   gap: 1rem;
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
index 79b72103..b50f3686 100644
--- a/app/src/features/stories/components/StorySlide.tsx
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -1,4 +1,6 @@
+
 import ReactDOM from "react-dom";
+
 import { useInView } from "../hooks/useInView";
 import { story } from "types/story";
 import StorySlideCounter from "./StorySlideCounter";
@@ -29,7 +31,9 @@ const StyledContainer = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000;
+
+  z-index: 2;
+
   width: 100%;
   height: 100%;
   gap: 1rem;
@@ -57,7 +61,9 @@ const StyledNavButton = styled.div<{ isLeft?: boolean }>`
   ${({ isLeft }) => (isLeft ? "left: 0;" : "right: 0;")}
   transform: translateY(-50%);
   cursor: pointer;
-  z-index: 100;
+
+  z-index: 1;
+
   width: 3rem;
   height: 3rem;
   display: flex;
@@ -71,7 +77,9 @@ const StyledUserInfo = styled.div`
   position: absolute;
   top: 2rem;
   left: 2.5rem;
-  z-index: 100;
+
+  z-index: 1;
+
 `;
 
 function StorySlide(props: StorySlideProps) {
diff --git a/app/src/features/stories/components/StorySlideCounter.tsx b/app/src/features/stories/components/StorySlideCounter.tsx
index 65d2654a..bb5a41cc 100644
--- a/app/src/features/stories/components/StorySlideCounter.tsx
+++ b/app/src/features/stories/components/StorySlideCounter.tsx
@@ -24,7 +24,9 @@ const StyledSliderContainer = styled.div`
   padding: 0.5rem;
   background: rgba(0, 0, 0, 0.5);
   height: 2rem;
-  z-index: 100;
+
+  z-index: 1;
+
 `;
 
 const Segment = styled.div<SegmentProps>`
diff --git a/app/src/features/stories/components/StorySliderTooltip.tsx b/app/src/features/stories/components/StorySliderTooltip.tsx
index dc1c8e69..2f81acc4 100644
--- a/app/src/features/stories/components/StorySliderTooltip.tsx
+++ b/app/src/features/stories/components/StorySliderTooltip.tsx
@@ -13,7 +13,9 @@ const StyledToolTip = styled.div`
   top: 2rem;
   right: 2rem;
   display: flex;
-  z-index: 100;
+
+  z-index: 1;
+
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
diff --git a/app/src/features/stories/components/StoryViews.tsx b/app/src/features/stories/components/StoryViews.tsx
index 69d0c6ad..78d1070b 100644
--- a/app/src/features/stories/components/StoryViews.tsx
+++ b/app/src/features/stories/components/StoryViews.tsx
@@ -14,7 +14,9 @@ const StyledViewsContainer = styled.div<{ $isOpened: boolean }>`
   position: absolute;
   bottom: 5%;
   left: auto;
-  z-index: 1000;
+
+  z-index: 1;
+
   width: 100%;
   min-height: ${({ $isOpened }) => ($isOpened ? "60vh" : "auto")};
   padding: ${({ $isOpened }) => ($isOpened ? "1rem" : "0.5rem 1rem")};
@@ -26,7 +28,9 @@ const StyledViewsContainer = styled.div<{ $isOpened: boolean }>`
   color: white;
 `;
 const StyledViews = styled.ul`
-  z-index: 100;
+
+  z-index: 1;
+
   display: flex;
   gap: 0.5rem;
   flex-direction: column;
diff --git a/app/src/features/stories/components/UserInfo.tsx b/app/src/features/stories/components/UserInfo.tsx
index bcf5bdcc..23eeaa5f 100644
--- a/app/src/features/stories/components/UserInfo.tsx
+++ b/app/src/features/stories/components/UserInfo.tsx
@@ -13,7 +13,9 @@ const StyledStoryHeader = styled.div`
   align-items: center;
   justify-content: flex-start;
   gap: 0.7rem;
-  z-index: 100;
+
+  z-index: 1;
+
 `;
 const StyledUserInfo = styled.div<{ $isVertical?: boolean }>`
   display: flex;
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 114292b6..e10cee86 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -9,7 +9,9 @@ function renderWithHighlight(
   content: string,
   searchTerm?: string,
   searchResults?: any,
+
   id?: string,
+
 ) {
   if (!searchTerm) {
     return content;
@@ -24,7 +26,9 @@ function renderWithHighlight(
   const before = content.slice(0, result.highlightIndex);
   const highlighted = content.slice(
     result.highlightIndex,
+
     result.highlightIndex + searchTerm.length,
+
   );
   const after = content.slice(result.highlightIndex + searchTerm.length);
 
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 5a1d99ed..482ef356 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -50,6 +50,7 @@
       "@utils/*": [
         "./utils/*"
       ]
+
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From e268ef40294476fb39ae9591a8546194db5584fc Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:54:14 +0200
Subject: [PATCH 030/136] feature: pin messages (GUI) (#67)

* hotfix: render with highlight

* feat: pinned messages gui
---
 app/src/data/icons.tsx                        | 10 +++
 app/src/features/chats/Message.tsx            |  3 -
 app/src/features/chats/Topbar.tsx             |  2 +
 .../components/PinnedMessageProgressBar.tsx   | 51 +++++++++++
 .../components/PinnedMessages.tsx             | 89 +++++++++++++++++++
 app/src/mocks/data/messages.ts                | 15 ++++
 app/src/types/messages.ts                     |  1 +
 app/src/utils/renderWithHighlight.tsx         |  4 -
 app/tsconfig.app.json                         |  1 -
 9 files changed, 168 insertions(+), 8 deletions(-)
 create mode 100644 app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
 create mode 100644 app/src/features/pin-messages/components/PinnedMessages.tsx

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index fa78cfcb..aafaf9c9 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -35,6 +35,7 @@ import KeyboardArrowLeftOutlinedIcon from "@mui/icons-material/KeyboardArrowLeft
 import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRightOutlined";
 import SendIcon from "@mui/icons-material/Send";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
+import PinIcon from "@mui/icons-material/Pin";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 
 enum icons {
@@ -77,6 +78,7 @@ enum icons {
   CircularProgress,
   RightArrow,
   LeftArrow,
+  Pin,
 }
 
 type iconStrings = keyof typeof icons;
@@ -304,6 +306,14 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
+  Pin: (
+    <PinIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index af7b63d8..d11587a2 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -6,7 +6,6 @@ import { useSelector } from "react-redux";
 import { RootState } from "@state/store";
 import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
 import { useEffect, useRef } from "react";
-
 import renderWithHighlight from "@utils/renderWithHighlight";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
@@ -78,7 +77,6 @@ function Message({
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
   return (
-
     <StyledMessage
       ref={mergedRef}
       key={id}
@@ -86,7 +84,6 @@ function Message({
       data-message-id={id}
       data-testid={`message-${id}`}
     >
-
       <Bubble $isMine={senderId === userId}>
         {renderWithHighlight(content, searchTerm, searchResults, id)}
       </Bubble>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 46dc2986..f86a2402 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -6,6 +6,7 @@ import { useChat } from "@features/chats/hooks/useChat";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
+import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
 
 const Container = styled.div`
   position: absolute;
@@ -96,6 +97,7 @@ function Topbar() {
               <LastSeen>last seen {lastSeen}</LastSeen>
             </Content>
           </Info>
+          <PinnedMessages />
           <Icons>
             <Icon>{getIcon("Call")}</Icon>
             <IconButton onClick={toggleSearch}>{getIcon("Search")}</IconButton>
diff --git a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
new file mode 100644
index 00000000..1029877d
--- /dev/null
+++ b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+const ProgressBarContainer = styled.div`
+  position: relative;
+  height: 80%;
+  width: 2px;
+  background-color: var(--color-background-secondary);
+  border-radius: 2px;
+  margin-left: 0.5rem;
+`;
+
+const ProgressBarSegment = styled.div<{ active: boolean }>`
+  flex-grow: 1;
+  height: 100%;
+  background-color: ${(props) =>
+    props.active ? "var(--accent-color)" : "var(--color-background-tertiary)"};
+  transition: background-color 0.3s ease-in-out;
+`;
+
+const ProgressBar = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+`;
+
+type PinnedMessageProgressBarProps = {
+  pinnedMessages: { id: string; content: string; isPinned: boolean }[];
+  currentPinnedIndex: number;
+};
+
+const PinnedMessageProgressBar: React.FC<PinnedMessageProgressBarProps> = ({
+  pinnedMessages,
+  currentPinnedIndex,
+}) => {
+  return (
+    <ProgressBarContainer>
+      <ProgressBar>
+        {pinnedMessages.map((_, index) => (
+          <ProgressBarSegment
+            key={index}
+            active={index === currentPinnedIndex}
+          />
+        ))}
+      </ProgressBar>
+    </ProgressBarContainer>
+  );
+};
+
+export default PinnedMessageProgressBar;
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
new file mode 100644
index 00000000..a529b1f6
--- /dev/null
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useMemo } from "react";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import { RootState } from "@state/store";
+import PinnedMessageProgressBar from "./PinnedMessageProgressBar";
+
+const PinnedMessagesContainer = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  width: 250px;
+  padding: 0.1rem;
+  margin: 0.2rem;
+  border-radius: 0.3rem;
+
+  &:hover {
+    background-color: var(--color-background-secondary);
+  }
+`;
+
+const PinnedMessageContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.5rem;
+`;
+
+const PinnedMessageTitle = styled.div`
+  font-size: 0.875rem;
+  color: var(--accent-color);
+  font-weight: 600;
+`;
+
+const PinnedMessagePreview = styled.div`
+  font-size: 0.75rem;
+  color: var(--color-text);
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const PinnedMessages: React.FC = () => {
+  const pinnedMessages = useSelector((state: RootState) =>
+    state.messages.messages.filter((msg) => msg.isPinned),
+  );
+  const [currentPinnedIndex, setCurrentPinnedIndex] = useState(0);
+
+  const currentPinnedMessage = useMemo(() => {
+    return pinnedMessages[currentPinnedIndex];
+  }, [pinnedMessages, currentPinnedIndex]);
+
+  const handleNextPinnedMessage = () => {
+    if (pinnedMessages.length > 0) {
+      setCurrentPinnedIndex(
+        (prevIndex) => (prevIndex + 1) % pinnedMessages.length,
+      );
+      document
+        .querySelector("[data-message-id='" + currentPinnedMessage.id + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+    }
+  };
+
+  if (pinnedMessages.length === 0) return null;
+
+  return (
+    <PinnedMessagesContainer onClick={handleNextPinnedMessage}>
+      <PinnedMessageProgressBar
+        pinnedMessages={pinnedMessages}
+        currentPinnedIndex={currentPinnedIndex}
+      />
+
+      <PinnedMessageContent>
+        <PinnedMessageTitle>
+          Pinned Message {currentPinnedIndex + 1}
+        </PinnedMessageTitle>
+
+        <PinnedMessagePreview>
+          {currentPinnedMessage.content}
+        </PinnedMessagePreview>
+      </PinnedMessageContent>
+    </PinnedMessagesContainer>
+  );
+};
+
+export default PinnedMessages;
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
index 8a32c5a5..0b73fd45 100644
--- a/app/src/mocks/data/messages.ts
+++ b/app/src/mocks/data/messages.ts
@@ -16,6 +16,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -29,6 +30,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: true,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -42,6 +44,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -55,6 +58,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -68,6 +72,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -81,6 +86,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -94,6 +100,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -107,6 +114,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -120,6 +128,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -133,6 +142,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -146,6 +156,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -159,6 +170,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -172,6 +184,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -185,6 +198,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: true,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
@@ -198,6 +212,7 @@ const messages: MessageInterface[] = [
     chatId: "chat1",
     parentMessageId: "",
     isDeleted: false,
+    isPinned: true,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
   },
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index b0994604..e36dc42a 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -27,6 +27,7 @@ export interface MessageInterface {
   chatId: string;
   parentMessageId: string;
   isDeleted: boolean;
+  isPinned: boolean;
   deleteType: DeleteType;
   status: MessageStatus;
 }
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index e10cee86..114292b6 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -9,9 +9,7 @@ function renderWithHighlight(
   content: string,
   searchTerm?: string,
   searchResults?: any,
-
   id?: string,
-
 ) {
   if (!searchTerm) {
     return content;
@@ -26,9 +24,7 @@ function renderWithHighlight(
   const before = content.slice(0, result.highlightIndex);
   const highlighted = content.slice(
     result.highlightIndex,
-
     result.highlightIndex + searchTerm.length,
-
   );
   const after = content.slice(result.highlightIndex + searchTerm.length);
 
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 482ef356..5a1d99ed 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -50,7 +50,6 @@
       "@utils/*": [
         "./utils/*"
       ]
-
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From 00f57671df70a6465b241116c4ca2388b66dca3f Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 29 Nov 2024 16:01:46 +0200
Subject: [PATCH 031/136] hotfix: missing package to to package.json (#68)

---
 app/package-lock.json | 22 ++++++++++++++++++++++
 app/package.json      |  3 ++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 51c44116..2b5fe382 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -18,6 +18,7 @@
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
         "date-fns": "^4.1.0",
+        "emoji-picker-react": "^4.12.0",
         "idb": "^8.0.0",
         "lottie-react": "^2.4.0",
         "react": "^18.3.1",
@@ -6197,6 +6198,21 @@
         "@emmetio/css-abbreviation": "^2.1.8"
       }
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.12.0.tgz",
+      "integrity": "sha512-q2c8UcZH0eRIMj41bj0k1akTjk69tsu+E7EzkW7giN66iltF6H9LQvQvw6ugscsxdC+1lmt3WZpQkkY65J95tg==",
+      "license": "MIT",
+      "dependencies": {
+        "flairup": "1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -6813,6 +6829,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/flairup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flairup/-/flairup-1.0.0.tgz",
+      "integrity": "sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==",
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
diff --git a/app/package.json b/app/package.json
index 3c0b40be..434cc04d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,8 +23,9 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
-    "idb": "^8.0.0",
     "date-fns": "^4.1.0",
+    "emoji-picker-react": "^4.12.0",
+    "idb": "^8.0.0",
     "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

From ab640b4c6bc2dc82e086f2a1a0e3252345a457d7 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 29 Nov 2024 16:57:34 +0200
Subject: [PATCH 032/136] :bug: (config): fixing small bug (#64)

* :sparkles: (messaging): Forwarding messages is done

* :bug: (config): fixing small bug

---------

Co-authored-by: asmaa-204 <asmaa.abozaid204@gmail.com>
---
 app/src/data/icons.tsx                        |  19 ++-
 app/src/features/chats/ChatInput.tsx          |  68 +++++-----
 app/src/features/chats/Message.tsx            | 124 +++++++++++++++---
 app/src/features/chats/MessageOptionList.tsx  |  68 ++++++++++
 .../features/chats/hooks/useMessageSender.ts  |  33 +++++
 app/src/features/chats/sendMessage.ts         |  29 ++++
 .../features/forward/ForwardingInputBar.tsx   |  56 ++++++++
 app/src/features/forward/ScrollableChats.tsx  | 108 +++++++++++++++
 app/src/features/forward/chatPopupItem.tsx    |  87 ++++++++++++
 app/src/features/forward/checkBox.tsx         |  69 ++++++++++
 app/src/state/messages/messages.ts            |  45 +++++++
 app/src/types/messages.ts                     |   1 +
 app/tsconfig.app.json                         |  58 ++------
 13 files changed, 667 insertions(+), 98 deletions(-)
 create mode 100644 app/src/features/chats/MessageOptionList.tsx
 create mode 100644 app/src/features/chats/hooks/useMessageSender.ts
 create mode 100644 app/src/features/chats/sendMessage.ts
 create mode 100644 app/src/features/forward/ForwardingInputBar.tsx
 create mode 100644 app/src/features/forward/ScrollableChats.tsx
 create mode 100644 app/src/features/forward/chatPopupItem.tsx
 create mode 100644 app/src/features/forward/checkBox.tsx

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index aafaf9c9..7dbf1cbb 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -34,6 +34,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import KeyboardArrowLeftOutlinedIcon from "@mui/icons-material/KeyboardArrowLeftOutlined";
 import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRightOutlined";
 import SendIcon from "@mui/icons-material/Send";
+import ShortcutIcon from "@mui/icons-material/Shortcut";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PinIcon from "@mui/icons-material/Pin";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
@@ -78,6 +79,8 @@ enum icons {
   CircularProgress,
   RightArrow,
   LeftArrow,
+  Forward,
+  MessagingOptions,
   Pin,
 }
 
@@ -181,7 +184,10 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
   ),
   Close: (
     <CloseOutlinedIcon
-      sx={{ color: `var(--color-icon-secondary)`, fontSize: "1.5rem" }}
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.75rem",
+      }}
     />
   ),
   Unlock: (
@@ -306,6 +312,17 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
+
+  Forward: (
+    <ShortcutIcon
+      sx={{
+        color: `var(--color-icon-secondary)`,
+        fontSize: "1.75rem",
+      }}
+    />
+  ),
+
+  MessagingOptions: <KeyboardArrowDownIcon />,
   Pin: (
     <PinIcon
       sx={{
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 06d49c7b..abd0d972 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,20 +1,26 @@
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
+
 import { getIcon } from "@data/icons";
 
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Icon from "@components/Icon";
-import RecordInput from "./SendButton";
-import { addMessage } from "@state/messages/messages";
+
 import { RootState } from "@state/store";
-import { useSocket } from "@hooks/useSocket";
+import { setShowCheckBox } from "@state/messages/messages";
+
+
+import RecordInput from "./SendButton";
+import ForwardingInputBar from "@features/forward/ForwardingInputBar";
+import ScrollableChats from "@features/forward/ScrollableChats";
 import EmojiPickerItem from "./emojies/EmojiPicker";
 
+import { useMessageSender } from "./hooks/useMessageSender";
+
 const Container = styled.div`
   z-index: 1;
 
-
   position: absolute;
   bottom: 3%;
   z-index: 1;
@@ -70,43 +76,37 @@ const Input = styled.div`
 function ChatInput() {
   const [input, setInput] = useState("");
   const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
-  const { sendMessage } = useSocket();
+  const { handleSendMessage } = useMessageSender();
   const dispatch = useDispatch();
-  const userId = useSelector((state: RootState) => state.user.userInfo.id);
-
 
   const toggleShowEmojies = () => {
     setIsEmojiSelectorOpen((show) => !show);
   };
 
-  function handleSubmit() {
-    console.log("sending message");
-
-    if (input) {
-      const message = {
-        id: "19008",
-        content: input,
-        senderId: userId,
-        type: 0,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
-        chatId: "",
-        parentMessageId: "",
-        isDeleted: false,
-        deleteType: 2,
-        status: 0,
-      };
-      setInput("");
-      sendMessage(message);
-      dispatch(addMessage(message));
-    }
+  const handleSubmit = () => {
+    handleSendMessage(input);
+    setInput("");
+  };
+
+  const showCheckBox = useSelector(
+    (state: RootState) => state.messages.showCheckBox
+  );
+
+  const [showForwardUsers, setShowForwardUsers] = useState(false);
+
+  function handleClose() {
+    setShowForwardUsers(false);
+    dispatch(setShowCheckBox({ showCheckBox: false }));
+  }
+  function handleForward() {
+    setShowForwardUsers(true);
   }
 
   return (
     <Container>
-      <Input>
-        {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
+      {!showCheckBox ? (
         <Input>
+          {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
           <InputContainer>
             <InputWrapper>
               <InvisibleButton onClick={toggleShowEmojies}>
@@ -120,10 +120,14 @@ function ChatInput() {
 
           <RecordInput
             onClick={handleSubmit}
-            type={!input.length ? "record" : "message"}
+            type={!input ? "record" : "message"}
           />
         </Input>
-      </Input>
+      ) : (
+        <ForwardingInputBar onClose={handleClose} onForward={handleForward} />
+      )}
+
+      {showForwardUsers && <ScrollableChats onClose={handleClose} />}
     </Container>
   );
 }
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index d11587a2..2e4a7081 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -1,34 +1,71 @@
+import { useEffect, useState, useRef } from "react";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
 
-import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
+import {
+  setShowCheckBox,
+  setIsOptionListOpen,
+  SelectMessage,
+  removeSelectedMessage,
+} from "@state/messages/messages";
+
 import { MessageInterface } from "types/messages";
-import { useSelector } from "react-redux";
 import { RootState } from "@state/store";
+
+import { getIcon } from "@data/icons";
+
+import CheckBox from "@features/forward/checkBox";
+import MessageOptionList from "./MessageOptionList";
 import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
-import { useEffect, useRef } from "react";
+
 import renderWithHighlight from "@utils/renderWithHighlight";
 
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
+
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
   align-items: flex-end;
   margin: 5px 0;
-
+  width: 100%;
   ${({ $isMine }) =>
     $isMine ? "justify-content: flex-end;" : "justify-content: flex-start;"}
 `;
 
 const Bubble = styled.div<{ $isMine: boolean }>`
+  display: flex;
   max-width: 70%;
   padding: 10px;
   border-radius: 15px;
   font-size: 14px;
+  height: fit-content;
+  position: relative;
 
   background-color: ${({ $isMine }) => ($isMine ? "#0084ff" : "#e5e5ea")};
   color: ${({ $isMine }) => ($isMine ? "#fff" : "#000")};
   margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
-
   z-index: 1;
+`;
+
+const StyledIcon = styled.div`
+  cursor: pointer;
+`;
+
+const MessageRow = styled.div<{ $isChecked: boolean }>`
+  display: flex;
+  gap: 2rem;
+  align-content: center;
+  justify-content: start;
+
+  background-color: ${({ $isChecked }) =>
+    $isChecked ? `var(--color-chat-hover)` : "none"};
 
+  width: 100%;
+`;
+
+const CheckBoxWrapper = styled.div`
+  padding-left: 1rem;
+  align-self: center;
 `;
 
 type MessageProps = {
@@ -40,12 +77,10 @@ type MessageProps = {
 function Message({
   index,
   messagesLength,
-  data: { id, senderId, content },
+  data: { id, senderId, content, isOptionListOpen },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-
-    (state: RootState) => state.search,
-
+    (state: RootState) => state.search
   );
 
   const mergedRef = useRef<HTMLDivElement>(null);
@@ -58,7 +93,6 @@ function Message({
       index === messagesLength - 1 ? mergedRef.current : null;
     const isSearchResult = searchResults.find(
       (result) => result.messageId === id
-
     );
     const isCurrentResult =
       isSearchResult && searchResults[currentResultIndex]?.messageId === id;
@@ -76,18 +110,66 @@ function Message({
 
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
+  const showCheckbox = useSelector(
+    (state: RootState) => state.messages.showCheckBox
+  );
+  const dispatch = useAppDispatch();
+
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const showCheckBox = useAppSelector((state) => state.messages.showCheckBox);
+
+  useEffect(() => {
+    setIsChecked(isChecked && showCheckBox);
+  }, [showCheckBox]);
+
+  function toggleCheckBox() {
+    if (!isChecked) {
+      dispatch(SelectMessage({ id: id }));
+    } else {
+      dispatch(removeSelectedMessage({ id: id }));
+    }
+    setIsChecked(!isChecked);
+  }
+
+  function handleIconClick() {
+    dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
+  }
+
+  function forwardOnClick() {
+    dispatch(setShowCheckBox({ showCheckBox: !showCheckbox }));
+    dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
+  }
+
   return (
-    <StyledMessage
-      ref={mergedRef}
-      key={id}
-      $isMine={senderId === userId}
-      data-message-id={id}
-      data-testid={`message-${id}`}
-    >
-      <Bubble $isMine={senderId === userId}>
-        {renderWithHighlight(content, searchTerm, searchResults, id)}
-      </Bubble>
-    </StyledMessage>
+    <MessageRow $isChecked={isChecked}>
+      {showCheckbox && (
+        <CheckBoxWrapper>
+          <CheckBox id={id} isChecked={isChecked} onChange={toggleCheckBox} />
+        </CheckBoxWrapper>
+      )}
+
+      <StyledMessage
+        ref={mergedRef}
+        key={id}
+        $isMine={senderId === userId}
+        data-message-id={id}
+        data-testid={`message-${id}`}
+      >
+        <Bubble $isMine={senderId === userId}>
+          {renderWithHighlight(content, searchTerm, searchResults, id)}
+          <StyledIcon onClick={handleIconClick}>
+            {getIcon("MessagingOptions")}
+          </StyledIcon>
+          {isOptionListOpen && (
+            <MessageOptionList
+              $isMine={senderId === userId}
+              forwardOnClick={forwardOnClick}
+              replyOnClick={() => {}} //TODO: Implement replyOnClick
+            />
+          )}
+        </Bubble>
+      </StyledMessage>
+    </MessageRow>
   );
 }
 
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
new file mode 100644
index 00000000..35e8f41a
--- /dev/null
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -0,0 +1,68 @@
+import styled from "styled-components";
+
+const StyledList = styled.ul<{ $isMine: boolean }>`
+  position: absolute;
+  width: 6rem;
+  height: 6rem;
+
+  right: ${(props) => !props.$isMine && -6.5}rem;
+  left: ${(props) => props.$isMine && -6.5}rem;
+
+  z-index: 10;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: start;
+
+  list-style: none;
+  padding: 0.2rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius-default);
+`;
+
+const HoverMask = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-default);
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding-left: 0.5rem;
+  &:hover {
+    background: var(--color-background-compact-menu-hover);
+    cursor: pointer;
+  }
+`;
+
+const StyledP = styled.p`
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+`;
+
+interface Props {
+  $isMine: boolean;
+  forwardOnClick: () => void;
+  replyOnClick: () => void;
+}
+
+function MessageOptionList(props: Props) {
+  const { $isMine, forwardOnClick, replyOnClick } = props;
+
+  return (
+    <StyledList $isMine={$isMine}>
+      <HoverMask onClick={forwardOnClick}>
+        <StyledP>Forward</StyledP>
+      </HoverMask>
+      <HoverMask onClick={replyOnClick}>
+        <StyledP>Reply</StyledP>
+      </HoverMask>
+    </StyledList>
+  );
+}
+
+export default MessageOptionList;
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
new file mode 100644
index 00000000..ccc539f1
--- /dev/null
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -0,0 +1,33 @@
+import { useSocket } from "@hooks/useSocket";
+import { addMessage } from "@state/messages/messages";
+import { RootState } from "@state/store";
+import { useDispatch, useSelector } from "react-redux";
+
+export const useMessageSender = () => {
+  const { sendMessage } = useSocket();
+  const dispatch = useDispatch();
+  const userId = useSelector((state: RootState) => state.user.userInfo.id);
+
+  const handleSendMessage = (data: string) => {
+    if (data) {
+      const message = {
+        id: "19008",
+        content: data,
+        senderId: userId,
+        type: 0,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        chatId: "",
+        parentMessageId: "",
+        isDeleted: false,
+        deleteType: 2,
+        status: 0,
+        isOptionListOpen: false,
+      };
+      sendMessage(message);
+      dispatch(addMessage(message));
+    }
+  };
+
+  return { handleSendMessage };
+};
diff --git a/app/src/features/chats/sendMessage.ts b/app/src/features/chats/sendMessage.ts
new file mode 100644
index 00000000..e4bbaecd
--- /dev/null
+++ b/app/src/features/chats/sendMessage.ts
@@ -0,0 +1,29 @@
+import { useSocket } from "@hooks/useSocket";
+import { addMessage } from "@state/messages/messages";
+import { RootState } from "@state/store";
+import { useDispatch, useSelector } from "react-redux";
+
+const { sendMessage } = useSocket();
+const dispatch = useDispatch();
+const userId = useSelector((state: RootState) => state.user.userInfo.id);
+
+export function handleSendMessage(data: string) {
+  if (data) {
+    const message = {
+      id: "19008",
+      content: data,
+      senderId: userId,
+      type: 0,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      chatId: "",
+      parentMessageId: "",
+      isDeleted: false,
+      deleteType: 2,
+      status: 0,
+      isOptionListOpen: false,
+    };
+    sendMessage(message);
+    dispatch(addMessage(message));
+  }
+}
diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
new file mode 100644
index 00000000..ee33f9ee
--- /dev/null
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -0,0 +1,56 @@
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import { useAppSelector } from "@hooks/useGlobalState";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  background: var(--color-background);
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex: 2 2;
+  justify-content: space-between;
+  align-items: center;
+  height: 3.5rem;
+`;
+
+const StyledHeader = styled.div`
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+  flex: 1;
+  text-align: center;
+`;
+
+const IconButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+interface Props {
+  onClose: () => void;
+  onForward: () => void;
+}
+
+function ForwardingInputBar(props: Props) {
+  const { onClose, onForward } = props;
+  const selectedMessages = useAppSelector(
+    (state) => state.messages.selectedMessages
+  );
+
+  return (
+    <Wrapper>
+      <IconButton onClick={onClose}>
+        <Icon>{getIcon("Close")}</Icon>
+      </IconButton>
+      <StyledHeader>{selectedMessages.length} messages selected</StyledHeader>
+      <IconButton onClick={onForward}>
+        <Icon>{getIcon("Forward")}</Icon>
+      </IconButton>
+    </Wrapper>
+  );
+}
+
+export default ForwardingInputBar;
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
new file mode 100644
index 00000000..08ec1118
--- /dev/null
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -0,0 +1,108 @@
+import { allChats } from "@mocks/data/chats";
+import { ScrollContainer } from "styles/GlobalStyles";
+import styled from "styled-components";
+import ChatPopupItem, { ChatPopupItemProps } from "./chatPopupItem";
+import Heading from "@components/Heading";
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import { useMessageSender } from "@features/chats/hooks/useMessageSender";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+const OuterContainer = styled.ul`
+  position: absolute;
+  width: 40%;
+  right: auto;
+  left: auto;
+  top: 4rem;
+  height: 30rem;
+  z-index: 1000;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  align-items: start;
+  list-style: none;
+  padding: 0.2rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius-default);
+`;
+
+const IconWrapper = styled.div`
+  border-right: 1px solid var(--color-text-secondary);
+`;
+
+const HeaderRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  border-bottom: 1px solid var(--color-text-secondary);
+  gap: 1.5rem;
+  width: 100%;
+  height: 4rem;
+`;
+
+const StylingWrapper = styled.div`
+  width: 100%;
+`;
+
+interface Props {
+  onClose: () => void;
+}
+
+function ScrollableChats(props: Props) {
+  const { onClose } = props;
+  const selectedMessages = useAppSelector(
+    (state) => state.messages.selectedMessages
+  );
+  const messages = useAppSelector((state) => state.messages.messages);
+  const { handleSendMessage } = useMessageSender();
+
+  const handleSubmit = () => {
+
+    const messagesToForward = messages.filter((message) =>
+      selectedMessages.includes(message.id)
+    );
+
+    messagesToForward.map((message) => {
+      handleSendMessage(message.content);
+    });
+
+    onClose();
+  };
+
+  return (
+    <OuterContainer>
+      <HeaderRow>
+        <IconWrapper onClick={onClose}>
+          <Icon>{getIcon("Close")}</Icon>
+        </IconWrapper>
+        <Heading as="h4">Forward To...</Heading>
+      </HeaderRow>
+      <ScrollContainer>
+        {allChats?.map((item) => {
+          const data: ChatPopupItemProps = {
+            id: item.id.toString(),
+            name: item.name,
+            username: item.name.toLowerCase() + 123,
+          };
+          return (
+            <StylingWrapper
+              onClick={() => handleSubmit()}
+              key={data.id}
+              data-testid={`user-${data.id}`}
+            >
+              <ChatPopupItem {...data} />
+            </StylingWrapper>
+          );
+        })}
+      </ScrollContainer>
+    </OuterContainer>
+  );
+}
+
+export default ScrollableChats;
diff --git a/app/src/features/forward/chatPopupItem.tsx b/app/src/features/forward/chatPopupItem.tsx
new file mode 100644
index 00000000..e16a508e
--- /dev/null
+++ b/app/src/features/forward/chatPopupItem.tsx
@@ -0,0 +1,87 @@
+import Heading from "@components/Heading";
+import Avatar from "@features/chats/Avatar";
+import styled from "styled-components";
+
+const StyledSideBarRow = styled.div`
+  width: 98%;
+  height: 4.5rem;
+  position: relative;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding: 0 5%;
+  gap: 1rem;
+  background: var(--color-background);
+  border-radius: var(--border-radius-modal);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    background: var(--color-background-compact-menu-hover);
+    cursor: pointer;
+    transform: scale(1.01);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+
+const RowInfo = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const InnerDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+`;
+
+const StyledP = styled.p`
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-weight: 350;
+  letter-spacing: 0.5px;
+`;
+
+const FancyAvatar = styled(Avatar)`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6a5acd, #1e90ff);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem;
+`;
+
+export interface ChatPopupItemProps {
+  id: string;
+  name: string;
+  username: string;
+}
+
+function ChatPopupItem({ id, name, username }: ChatPopupItemProps) {
+  return (
+    <StyledSideBarRow data-testid={`open-block-option-${id}`}>
+      <RowInfo>
+        <FancyAvatar name={name[0]} />
+        <InnerDiv>
+          <Heading as="h5">{name}</Heading>
+          <StyledP>{`@${username}`}</StyledP>
+        </InnerDiv>
+      </RowInfo>
+    </StyledSideBarRow>
+  );
+}
+
+export default ChatPopupItem;
diff --git a/app/src/features/forward/checkBox.tsx b/app/src/features/forward/checkBox.tsx
new file mode 100644
index 00000000..74c23099
--- /dev/null
+++ b/app/src/features/forward/checkBox.tsx
@@ -0,0 +1,69 @@
+import styled from "styled-components";
+
+interface CheckboxProps {
+  id: string;
+  isChecked: boolean;
+  onChange: () => void;
+}
+
+const StyledCheckboxContainer = styled.label`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+`;
+
+const StyledCheckbox = styled.input`
+  display: none;
+
+  &:checked + span {
+    background-color: #4caf50;
+    border-color: #4caf50;
+  }
+
+  &:checked + span::after {
+    content: "";
+    display: block;
+    width: 0.35rem;
+    height: 0.7rem;
+    border: solid white;
+    border-width: 0 0.15rem 0.15rem 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+`;
+
+const StyledCustomBox = styled.span`
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid #ccc;
+  border-radius: 0.2rem;
+  position: relative;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #888;
+  }
+`;
+
+function CheckBox(props: CheckboxProps) {
+  const { id, isChecked, onChange } = props;
+
+  return (
+    <StyledCheckboxContainer>
+      <StyledCheckbox
+        id={id}
+        type="checkbox"
+        checked={isChecked}
+        onChange={onChange}
+        test-id={id}
+      />
+      <StyledCustomBox />
+    </StyledCheckboxContainer>
+  );
+}
+
+export default CheckBox;
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index 14dc2076..f5a00d79 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -5,11 +5,15 @@ import { MessageInterface } from "types/messages";
 interface MessagesState {
   messages: MessageInterface[];
   isTyping: boolean;
+  showCheckBox: boolean;
+  selectedMessages: string[]; //indicates ids only of selected messages
 }
 
 const initialState: MessagesState = {
   messages: messages,
   isTyping: false,
+  showCheckBox: false,
+  selectedMessages: [],
 };
 
 const messagesSlice = createSlice({
@@ -53,6 +57,43 @@ const messagesSlice = createSlice({
       const { isTyping } = action.payload;
       state.isTyping = isTyping;
     },
+
+    setShowCheckBox: (
+      state,
+      action: PayloadAction<{ showCheckBox: boolean }>
+    ) => {
+      const { showCheckBox } = action.payload;
+      if (!showCheckBox) {
+        state.selectedMessages = [];
+      }
+      state.showCheckBox = showCheckBox;
+    },
+
+    setIsOptionListOpen: (
+      state,
+      action: PayloadAction<{ value: boolean; id: string }>
+    ) => {
+      const { id, value } = action.payload;
+      state.messages.forEach((msg) => {
+        if (msg.id === id) {
+          msg.isOptionListOpen = value;
+        } else {
+          msg.isOptionListOpen = false;
+        }
+      });
+    },
+
+    SelectMessage: (state, action: PayloadAction<{ id: string }>) => {
+      const { id } = action.payload;
+      state.selectedMessages.push(id);
+    },
+
+    removeSelectedMessage: (state, action: PayloadAction<{ id: string }>) => {
+      const { id } = action.payload;
+      state.selectedMessages = state.selectedMessages.filter(
+        (msgId) => msgId !== id
+      );
+    },
   },
 });
 
@@ -62,6 +103,10 @@ export const {
   editMessage,
   clearMessages,
   setIsTyping,
+  setShowCheckBox,
+  setIsOptionListOpen,
+  SelectMessage,
+  removeSelectedMessage,
 } = messagesSlice.actions;
 export default messagesSlice.reducer;
 export type { MessageInterface, MessagesState };
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index e36dc42a..10649367 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -30,4 +30,5 @@ export interface MessageInterface {
   isPinned: boolean;
   deleteType: DeleteType;
   status: MessageStatus;
+  isOptionListOpen: boolean;
 }
diff --git a/app/tsconfig.app.json b/app/tsconfig.app.json
index 5a1d99ed..6ac108b4 100644
--- a/app/tsconfig.app.json
+++ b/app/tsconfig.app.json
@@ -2,54 +2,24 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": "./src/",
     "paths": {
-      "@components/*": [
-        "./components/*"
-      ],
-      "@inputs/*": [
-        "./components/inputs/*"
-      ],
-      "@mocks/*": [
-        "./mocks/*"
-      ],
-      "@features/*": [
-        "./features/*"
-      ],
-      "@pages/*": [
-        "./pages/*"
-      ],
-      "@hooks/*": [
-        "./hooks/*"
-      ],
-      "@constants": [
-        "./constants"
-      ],
-      "@state/*": [
-        "./state/*"
-      ],
-      "types/*": [
-        "./types/*"
-      ],
-      "@data/*": [
-        "./data/*"
-      ],
-      "@tests/*": [
-        "./tests/*"
-      ],
-      "@services": [
-        "./services/*"
-      ],
-      "@utils/*": [
-        "./utils/*"
-      ]
+      "@components/*": ["./components/*"],
+      "@inputs/*": ["./components/inputs/*"],
+      "@mocks/*": ["./mocks/*"],
+      "@features/*": ["./features/*"],
+      "@pages/*": ["./pages/*"],
+      "@hooks/*": ["./hooks/*"],
+      "@constants": ["./constants"],
+      "@state/*": ["./state/*"],
+      "types/*": ["./types/*"],
+      "@data/*": ["./data/*"],
+      "@tests/*": ["./tests/*"],
+      "@services": ["./services/*"],
+      "@utils/*": ["./utils/*"]
     },
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

From d820594b2c46b85f197e003429339d71e5c4d4c2 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 29 Nov 2024 17:26:58 +0200
Subject: [PATCH 033/136] =?UTF-8?q?=F0=9F=92=84=20(messaging):=20Added=20e?=
 =?UTF-8?q?dit=20ui=20(#69)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/Icon.tsx                   | 14 ++--
 app/src/data/icons.tsx                        |  7 +-
 app/src/features/chats/ChatInput.tsx          |  6 +-
 app/src/features/chats/ReplyWrapper.tsx       | 75 +++++++++++++++++++
 app/src/features/chats/hooks/useChat.ts       |  2 +-
 .../features/chats/hooks/useMessageSender.ts  | 11 ++-
 app/src/styles/GlobalStyles.tsx               | 13 ++--
 7 files changed, 106 insertions(+), 22 deletions(-)
 create mode 100644 app/src/features/chats/ReplyWrapper.tsx

diff --git a/app/src/components/Icon.tsx b/app/src/components/Icon.tsx
index 64efd890..8bfc501a 100644
--- a/app/src/components/Icon.tsx
+++ b/app/src/components/Icon.tsx
@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
+import { ButtonHTMLAttributes, ReactNode } from "react";
 import styled from "styled-components";
 
-const StyledIcon = styled.div`
+const StyledIcon = styled.button`
   width: 2rem;
   height: 2rem;
 
@@ -9,17 +9,21 @@ const StyledIcon = styled.div`
   justify-content: center;
   align-items: center;
 
+  border: none;
+  background-color: transparent;
+
   border-radius: var(--border-radius-modal);
+
   &:hover {
     background: var(--color-item-hover);
     cursor: pointer;
   }
 `;
 
-type IconProps = {
+type IconProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode;
 };
 
-export default function Icon({ children }: IconProps) {
-  return <StyledIcon>{children}</StyledIcon>;
+export default function Icon({ children, ...props }: IconProps) {
+  return <StyledIcon {...props}>{children}</StyledIcon>;
 }
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 7dbf1cbb..61cba9b6 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -34,6 +34,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import KeyboardArrowLeftOutlinedIcon from "@mui/icons-material/KeyboardArrowLeftOutlined";
 import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRightOutlined";
 import SendIcon from "@mui/icons-material/Send";
+import ReplyOutlinedIcon from "@mui/icons-material/ReplyOutlined";
 import ShortcutIcon from "@mui/icons-material/Shortcut";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PinIcon from "@mui/icons-material/Pin";
@@ -82,6 +83,7 @@ enum icons {
   Forward,
   MessagingOptions,
   Pin,
+  Reply,
 }
 
 type iconStrings = keyof typeof icons;
@@ -131,9 +133,7 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
   Add: (
     <AddIcon fontSize="large" sx={{ color: `var(--color-search-border)` }} />
   ),
-  Edit: (
-    <EditIcon fontSize="large" sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
+  Edit: <EditIcon sx={{ color: `var(--color-icon-secondary)` }} />,
   AddStory: (
     <PhotoCameraIcon
       fontSize="large"
@@ -331,6 +331,7 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
+  Reply: <ReplyOutlinedIcon />,
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index abd0d972..55f845bf 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -10,13 +10,13 @@ import Icon from "@components/Icon";
 import { RootState } from "@state/store";
 import { setShowCheckBox } from "@state/messages/messages";
 
-
 import RecordInput from "./SendButton";
 import ForwardingInputBar from "@features/forward/ForwardingInputBar";
 import ScrollableChats from "@features/forward/ScrollableChats";
 import EmojiPickerItem from "./emojies/EmojiPicker";
 
 import { useMessageSender } from "./hooks/useMessageSender";
+import ReplyWrapper from "./ReplyWrapper";
 
 const Container = styled.div`
   z-index: 1;
@@ -44,8 +44,9 @@ const InputContainer = styled.div`
   flex: 3 auto;
 
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   align-self: center;
+  flex-direction: column;
 
   height: 100%;
 `;
@@ -108,6 +109,7 @@ function ChatInput() {
         <Input>
           {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
           <InputContainer>
+            <ReplyWrapper state="Edit" message="message" />
             <InputWrapper>
               <InvisibleButton onClick={toggleShowEmojies}>
                 <Icon>{getIcon("Emojie")}</Icon>
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
new file mode 100644
index 00000000..3ec5aef4
--- /dev/null
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -0,0 +1,75 @@
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  height: 45px;
+  opacity: 1;
+
+  & svg {
+    color: var(--accent-color);
+  }
+`;
+
+const MessageBox = styled.div`
+  line-height: 1rem;
+
+  background-color: var(--color-background-compact-menu);
+
+  position: relative;
+  flex: 1 1;
+
+  border-left: var(--accent-color) 3px solid;
+  border-radius: 5px;
+
+  padding: 7px 0.5rem;
+
+  &:hover {
+    background-color: var(--color-background-compact-menu-hover);
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 1px;
+    height: 100%;
+
+    background-color: var(--accent-color);
+  }
+`;
+
+const State = styled.div`
+  color: var(--accent-color);
+  text-transform: capitalize;
+`;
+
+const Message = styled.div`
+  font-size: smaller;
+  color: var(--color-text);
+  opacity: 0.9;
+`;
+
+type Props = {
+  state: "Edit" | "Reply";
+  message: string;
+};
+
+export default function ReplyWrapper({ state = "Edit", message }: Props) {
+  return (
+    <Container>
+      <Icon>{getIcon(state)}</Icon>
+      <MessageBox>
+        <State>{`${state}ing`}</State>
+        <Message>{message}</Message>
+      </MessageBox>
+      <Icon>{getIcon("Close")}</Icon>
+    </Container>
+  );
+}
diff --git a/app/src/features/chats/hooks/useChat.ts b/app/src/features/chats/hooks/useChat.ts
index 6a920858..2e826a9a 100644
--- a/app/src/features/chats/hooks/useChat.ts
+++ b/app/src/features/chats/hooks/useChat.ts
@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 
 import { getChatApi } from "../services/apiGetChats";
-import { Chat } from "@mocks/data/Chats";
+import { Chat } from "@mocks/data/chats";
 
 export function useChat() {
   const { chatId } = useParams<{ chatId: string }>();
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index ccc539f1..ae94b88c 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,12 +1,16 @@
-import { useSocket } from "@hooks/useSocket";
+import { useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+
 import { addMessage } from "@state/messages/messages";
 import { RootState } from "@state/store";
-import { useDispatch, useSelector } from "react-redux";
+
+import { useSocket } from "@hooks/useSocket";
 
 export const useMessageSender = () => {
   const { sendMessage } = useSocket();
   const dispatch = useDispatch();
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
+  const { chatId } = useParams<{ chatId: string }>();
 
   const handleSendMessage = (data: string) => {
     if (data) {
@@ -17,12 +21,13 @@ export const useMessageSender = () => {
         type: 0,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
-        chatId: "",
+        chatId: chatId!,
         parentMessageId: "",
         isDeleted: false,
         deleteType: 2,
         status: 0,
         isOptionListOpen: false,
+        isPinned: false,
       };
       sendMessage(message);
       dispatch(addMessage(message));
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 144c4f0c..3b9dfa66 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -52,11 +52,9 @@ const GlobalStyles = createGlobalStyle`
     --color-icon-secondary: rgb(112, 117, 121);
     
     --pattern-color: #c3bfc5a6;
-
   
-    --color-background-compact-menu: rgb(255, 255, 255, 0.733);
-    --color-background-compact-menu-hover: rgb(0, 0, 0, 0.067);
-    --new-chat-color: #f5f5f5;
+    --color-background-compact-menu: #4c90b218;
+    --color-background-compact-menu-hover: #4c90b23b;
     
     --color-border: #dfe1e5;
     --color-borders-input: rgb(218, 220, 224);
@@ -114,11 +112,10 @@ const GlobalStyles = createGlobalStyle`
     --color-chat-hover: #25353f;
     
     --color-icon-secondary:  rgb(170, 170, 170);
-    --pattern-color: #2d394ecc
+    --pattern-color: #2d394ecc;
     
-    --color-background-compact-menu: rgb(33, 33, 33, 0.867);
-    --color-background-compact-menu-hover: rgb(0, 0, 0, 0.4);
-    --new-chat-color: #2d394e;
+    --color-background-compact-menu: #ffffff13;
+    --color-background-compact-menu-hover: #ffffff36;
  
     --color-border: #09182299;
     --color-borders-input: var(--color-text-secondary);

From a555d95a4288bd00589313774dbdc228cf33bc58 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 29 Nov 2024 18:30:29 +0200
Subject: [PATCH 034/136] :bug: (forward): fixing scrollable chats list (#70)

* :lipstick: (forward): fixing checkbox border color

* :bug: (forward): fixing scrollable chats list
---
 app/src/features/forward/ScrollableChats.tsx | 5 ++---
 app/src/features/forward/checkBox.tsx        | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index 08ec1118..c9750b54 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -10,10 +10,10 @@ import { useAppSelector } from "@hooks/useGlobalState";
 
 const OuterContainer = styled.ul`
   position: absolute;
-  width: 40%;
+  width: 60%;
   right: auto;
   left: auto;
-  top: 4rem;
+  top: -40rem;
   height: 30rem;
   z-index: 1000;
   overflow: auto;
@@ -63,7 +63,6 @@ function ScrollableChats(props: Props) {
   const { handleSendMessage } = useMessageSender();
 
   const handleSubmit = () => {
-
     const messagesToForward = messages.filter((message) =>
       selectedMessages.includes(message.id)
     );
diff --git a/app/src/features/forward/checkBox.tsx b/app/src/features/forward/checkBox.tsx
index 74c23099..cc8fb7d8 100644
--- a/app/src/features/forward/checkBox.tsx
+++ b/app/src/features/forward/checkBox.tsx
@@ -39,7 +39,7 @@ const StyledCustomBox = styled.span`
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
-  border: 2px solid #ccc;
+  border: 2px solid var(--color-borders-input);
   border-radius: 0.2rem;
   position: relative;
   transition: all 0.3s;

From 8360b1af7584ab524b6a9b56e1016049bb61d65e Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 29 Nov 2024 18:36:57 +0200
Subject: [PATCH 035/136] feature: pin integration (optimistic rendering) (#71)

* docs: better .env example

* feat: pin and unpin functionality

* feat: pin and unpin integration with back
---
 app/example.env                               |  8 ++-
 app/socket-server/index.js                    | 14 +++++
 app/src/features/chats/Message.tsx            | 26 +++++++--
 app/src/features/chats/MessageOptionList.tsx  |  7 ++-
 .../features/chats/hooks/useMessageSender.ts  |  1 +
 .../components/PinnedMessages.tsx             |  4 +-
 app/src/sockets/SocketProvider.tsx            | 57 +++++++++++++++++--
 app/src/state/messages/messages.ts            | 34 ++++++++++-
 app/src/types/socket.ts                       |  2 +
 9 files changed, 135 insertions(+), 18 deletions(-)

diff --git a/app/example.env b/app/example.env
index 62290856..52b9f14e 100644
--- a/app/example.env
+++ b/app/example.env
@@ -1,10 +1,14 @@
 # NOTE: use those to run in production
 # VITE_BACKEND_API=http://localhost:3000/api/v1/
 # VITE_ENV=production
+# VITE_BACKEND_STORGAE=http://localhost:3000/static/media/
+# VITE_SOCKET_BACKEND_API=http://localhost:4000/socket-io
 
 # NOTE: use those to run in development (mocked backend)
 VITE_BACKEND_API=
 VITE_ENV=test
+VITE_BACKEND_STORGAE=https://i.pinimg.com/564x/26/76/a1/
+VITE_SOCKET_BACKEND_API=http://localhost:4000/socket-io
 
 # NOTE: Secrets
 VITE_REACT_APP_SITE_KEY=
@@ -12,8 +16,6 @@ VITE_SITE_SECRET=
 VITE_GITHUB_CLIENT_ID=
 VITE_GOOGLE_CLIENT_ID=
 
+# NOTE: Ports
 VITE_PORT=5174
 
-# NOTE: These values are changed to run in development or production with correct domains
-VITE_SOCKET_BACKEND_API=http://localhost:4000/socket-io
-VITE_BACKEND_STORGAE=https://i.pinimg.com/564x/26/76/a1/
diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index 9f495a43..3da1d344 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -30,6 +30,20 @@ io.on("connection", (socket) => {
   socket.on("disconnect", () => {
     console.log("User disconnected:", socket.id);
   });
+
+  socket.on("PIN_MESSAGE_CLIENT", ({ messageId, chatId, userId }) => {
+    console.log("PIN_MESSAGE_CLIENT", messageId, chatId, userId);
+    socket.broadcast
+      .to(chatId)
+      .emit("PIN_MESSAGE_SERVER", { messageId, chatId, userId });
+  });
+
+  socket.on("UNPIN_MESSAGE_CLIENT", ({ messageId, chatId, userId }) => {
+    console.log("UNPIN_MESSAGE_CLIENT", messageId, chatId, userId);
+    socket.broadcast
+      .to(chatId)
+      .emit("UNPIN_MESSAGE_SERVER", { messageId, chatId, userId });
+  });
 });
 
 server.listen(PORT, () => {
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 2e4a7081..aaa57c3b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -7,6 +7,8 @@ import {
   setIsOptionListOpen,
   SelectMessage,
   removeSelectedMessage,
+  pinMessage,
+  unpinMessage,
 } from "@state/messages/messages";
 
 import { MessageInterface } from "types/messages";
@@ -22,6 +24,7 @@ import renderWithHighlight from "@utils/renderWithHighlight";
 
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
+import { useSocket } from "@hooks/useSocket";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -77,22 +80,25 @@ type MessageProps = {
 function Message({
   index,
   messagesLength,
-  data: { id, senderId, content, isOptionListOpen },
+  data: { id, senderId, content, isOptionListOpen, isPinned, chatId },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-    (state: RootState) => state.search
+    (state: RootState) => state.search,
   );
 
   const mergedRef = useRef<HTMLDivElement>(null);
   const { lastMessageRef } = useScrollToLastMsg();
   const { searchResultRef } = useScrollToSearchResultsMsg();
 
+  const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
+    useSocket();
+
   // TODO: make merge ref util
   useEffect(() => {
     lastMessageRef.current =
       index === messagesLength - 1 ? mergedRef.current : null;
     const isSearchResult = searchResults.find(
-      (result) => result.messageId === id
+      (result) => result.messageId === id,
     );
     const isCurrentResult =
       isSearchResult && searchResults[currentResultIndex]?.messageId === id;
@@ -111,7 +117,7 @@ function Message({
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
   const showCheckbox = useSelector(
-    (state: RootState) => state.messages.showCheckBox
+    (state: RootState) => state.messages.showCheckBox,
   );
   const dispatch = useAppDispatch();
 
@@ -135,6 +141,16 @@ function Message({
     dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
   }
 
+  function pinOnClick() {
+    if (isPinned) {
+      dispatch(unpinMessage({ messageId: id, chatId: chatId }));
+      unpinMessageSocket(id, chatId, userId);
+      return;
+    }
+    dispatch(pinMessage({ messageId: id, chatId: chatId }));
+    pinMessageSocket(id, chatId, userId);
+  }
+
   function forwardOnClick() {
     dispatch(setShowCheckBox({ showCheckBox: !showCheckbox }));
     dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
@@ -164,6 +180,8 @@ function Message({
             <MessageOptionList
               $isMine={senderId === userId}
               forwardOnClick={forwardOnClick}
+              isPinned={isPinned}
+              pinOnClick={pinOnClick}
               replyOnClick={() => {}} //TODO: Implement replyOnClick
             />
           )}
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index 35e8f41a..2c9855f1 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -48,10 +48,12 @@ interface Props {
   $isMine: boolean;
   forwardOnClick: () => void;
   replyOnClick: () => void;
+  pinOnClick: () => void;
+  isPinned: boolean;
 }
 
 function MessageOptionList(props: Props) {
-  const { $isMine, forwardOnClick, replyOnClick } = props;
+  const { $isMine, forwardOnClick, replyOnClick, pinOnClick, isPinned } = props;
 
   return (
     <StyledList $isMine={$isMine}>
@@ -61,6 +63,9 @@ function MessageOptionList(props: Props) {
       <HoverMask onClick={replyOnClick}>
         <StyledP>Reply</StyledP>
       </HoverMask>
+      <HoverMask onClick={pinOnClick}>
+        <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
+      </HoverMask>
     </StyledList>
   );
 }
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index ae94b88c..0ac1c3b2 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -24,6 +24,7 @@ export const useMessageSender = () => {
         chatId: chatId!,
         parentMessageId: "",
         isDeleted: false,
+        isPinned: false,
         deleteType: 2,
         status: 0,
         isOptionListOpen: false,
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
index a529b1f6..21ed38bd 100644
--- a/app/src/features/pin-messages/components/PinnedMessages.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -56,7 +56,7 @@ const PinnedMessages: React.FC = () => {
         (prevIndex) => (prevIndex + 1) % pinnedMessages.length,
       );
       document
-        .querySelector("[data-message-id='" + currentPinnedMessage.id + "']")
+        .querySelector("[data-message-id='" + currentPinnedMessage?.id + "']")
         ?.scrollIntoView({
           behavior: "smooth",
           block: "center",
@@ -79,7 +79,7 @@ const PinnedMessages: React.FC = () => {
         </PinnedMessageTitle>
 
         <PinnedMessagePreview>
-          {currentPinnedMessage.content}
+          {currentPinnedMessage?.content}
         </PinnedMessagePreview>
       </PinnedMessageContent>
     </PinnedMessagesContainer>
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 249d2c59..244d493e 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -5,7 +5,9 @@ import { Dispatch } from "redux";
 import {
   addMessage,
   MessageInterface,
+  pinMessage,
   setIsTyping,
+  unpinMessage,
 } from "@state/messages/messages";
 
 import { SocketContext } from "./SocketContext";
@@ -14,7 +16,7 @@ import { useChats } from "@features/chats/hooks/useChats";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
-  message: MessageInterface
+  message: MessageInterface,
 ) => {
   dispatch(addMessage(message));
 };
@@ -50,7 +52,21 @@ function SocketProvider({ children }: SocketProviderProps) {
     socket.on("receive_message", (message: MessageInterface) => {
       handleIncomingMessage(dispatch, message);
     });
-    
+
+    socket.on(
+      "PIN_MESSAGE_SERVER",
+      (chatId: string, messageId: string, userId: string) => {
+        dispatch(pinMessage({ chatId, messageId }));
+      },
+    );
+
+    socket.on(
+      "UNPIN_MESSAGE_SERVER",
+      (chatId: string, messageId: string, userId: string) => {
+        dispatch(unpinMessage({ chatId, messageId }));
+      },
+    );
+
     socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
     socket.emit("typing");
     return () => {
@@ -70,21 +86,52 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
       console.log(
         "Joined all chats:",
-        chats.map((chat) => chat.id)
+        chats.map((chat) => chat.id),
       );
     }
   }, [isConnected, isPending, chats, socket]);
 
   const sendMessage = (message: MessageInterface) => {
     if (isConnected) {
-      socket.emit("send_message",  message );
+      socket.emit("send_message", message);
     } else {
       console.warn("Cannot send message: not connected to socket server");
     }
   };
 
+  const pinMessageSocket = (
+    chatId: string,
+    messageId: string,
+    userId: string,
+  ) => {
+    if (isConnected) {
+      socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
+    } else {
+      console.warn("Cannot pin message: not connected to socket server");
+    }
+  };
+
+  const unpinMessageSocket = (
+    chatId: string,
+    messageId: string,
+    userId: string,
+  ) => {
+    if (isConnected) {
+      socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
+    } else {
+      console.warn("Cannot unpin message: not connected to socket server");
+    }
+  };
+
   return (
-    <SocketContext.Provider value={{ isConnected, sendMessage }}>
+    <SocketContext.Provider
+      value={{
+        isConnected,
+        sendMessage,
+        pinMessage: pinMessageSocket,
+        unpinMessage: unpinMessageSocket,
+      }}
+    >
       {children}
     </SocketContext.Provider>
   );
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index f5a00d79..ccb463cd 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -49,6 +49,32 @@ const messagesSlice = createSlice({
       }
     },
 
+    pinMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>,
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const message = state.messages.find(
+        (msg) => msg.id === messageId && msg.chatId == chatId,
+      );
+      if (message) {
+        message.isPinned = true;
+      }
+    },
+
+    unpinMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>,
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const message = state.messages.find(
+        (msg) => msg.id === messageId && msg.chatId == chatId,
+      );
+      if (message) {
+        message.isPinned = false;
+      }
+    },
+
     clearMessages: (state, action: PayloadAction<{ chatId: string }>) => {
       const { chatId } = action.payload;
       state.messages.filter((msg) => msg.chatId !== chatId);
@@ -60,7 +86,7 @@ const messagesSlice = createSlice({
 
     setShowCheckBox: (
       state,
-      action: PayloadAction<{ showCheckBox: boolean }>
+      action: PayloadAction<{ showCheckBox: boolean }>,
     ) => {
       const { showCheckBox } = action.payload;
       if (!showCheckBox) {
@@ -71,7 +97,7 @@ const messagesSlice = createSlice({
 
     setIsOptionListOpen: (
       state,
-      action: PayloadAction<{ value: boolean; id: string }>
+      action: PayloadAction<{ value: boolean; id: string }>,
     ) => {
       const { id, value } = action.payload;
       state.messages.forEach((msg) => {
@@ -91,7 +117,7 @@ const messagesSlice = createSlice({
     removeSelectedMessage: (state, action: PayloadAction<{ id: string }>) => {
       const { id } = action.payload;
       state.selectedMessages = state.selectedMessages.filter(
-        (msgId) => msgId !== id
+        (msgId) => msgId !== id,
       );
     },
   },
@@ -102,6 +128,8 @@ export const {
   deleteMessage,
   editMessage,
   clearMessages,
+  pinMessage,
+  unpinMessage,
   setIsTyping,
   setShowCheckBox,
   setIsOptionListOpen,
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 99182913..856ca7f4 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -4,6 +4,8 @@ import { MessageInterface } from "./messages";
 export interface SocketContextType {
   isConnected: boolean;
   sendMessage: (message: MessageInterface) => void;
+  pinMessage: (chatId: string, messageId: string, userId: string) => void;
+  unpinMessage: (chatId: string, messageId: string, userId: string) => void;
 }
 
 export interface SocketProviderProps {

From d5e9879e97458d510d2b162d9039bc8a51e85a13 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 29 Nov 2024 18:50:09 +0200
Subject: [PATCH 036/136] =?UTF-8?q?=E2=9C=A8=20(messaging):=20Setup=20redu?=
 =?UTF-8?q?x=20store=20for=20active=20message=20(#72)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/features/chats/ChatBody.tsx          |  2 --
 app/src/features/chats/ChatInput.tsx         |  4 ++-
 app/src/features/chats/Message.tsx           | 12 ++++++-
 app/src/features/chats/MessageOptionList.tsx |  6 +++-
 app/src/features/chats/ReplyWrapper.tsx      | 27 +++++++++------
 app/src/state/messages/activeMessage.ts      | 36 ++++++++++++++++++++
 app/src/state/store.ts                       |  3 ++
 7 files changed, 75 insertions(+), 15 deletions(-)
 create mode 100644 app/src/state/messages/activeMessage.ts

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index bfb02b2d..e6049f5f 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -27,8 +27,6 @@ const ScrollContainer = styled.div`
 
   z-index: 1;
 
-
-
   display: flex;
   flex-direction: column;
   padding: 10px;
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 55f845bf..554280dd 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -78,6 +78,8 @@ function ChatInput() {
   const [input, setInput] = useState("");
   const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
   const { handleSendMessage } = useMessageSender();
+  const activeMessage = useSelector((state: RootState) => state.activeMessage);
+
   const dispatch = useDispatch();
 
   const toggleShowEmojies = () => {
@@ -109,7 +111,7 @@ function ChatInput() {
         <Input>
           {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
           <InputContainer>
-            <ReplyWrapper state="Edit" message="message" />
+            {activeMessage.id && <ReplyWrapper />}
             <InputWrapper>
               <InvisibleButton onClick={toggleShowEmojies}>
                 <Icon>{getIcon("Emojie")}</Icon>
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index aaa57c3b..5ac6fd57 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -24,6 +24,7 @@ import renderWithHighlight from "@utils/renderWithHighlight";
 
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
+import { setActiveMessage } from "@state/messages/activeMessage";
 import { useSocket } from "@hooks/useSocket";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
@@ -156,6 +157,14 @@ function Message({
     dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
   }
 
+  function handleEditMessage() {
+    dispatch(setActiveMessage({ id, content, state: "edit" }));
+  }
+
+  function handleReply() {
+    dispatch(setActiveMessage({ id, content, state: "reply" }));
+  }
+
   return (
     <MessageRow $isChecked={isChecked}>
       {showCheckbox && (
@@ -182,7 +191,8 @@ function Message({
               forwardOnClick={forwardOnClick}
               isPinned={isPinned}
               pinOnClick={pinOnClick}
-              replyOnClick={() => {}} //TODO: Implement replyOnClick
+              replyOnClick={handleReply} //TODO: Implement replyOnClick
+              editOnClick={handleEditMessage}
             />
           )}
         </Bubble>
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index 2c9855f1..a09df27d 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -48,12 +48,13 @@ interface Props {
   $isMine: boolean;
   forwardOnClick: () => void;
   replyOnClick: () => void;
+  editOnClick: () => void;
   pinOnClick: () => void;
   isPinned: boolean;
 }
 
 function MessageOptionList(props: Props) {
-  const { $isMine, forwardOnClick, replyOnClick, pinOnClick, isPinned } = props;
+  const { $isMine, forwardOnClick, replyOnClick, editOnClick, pinOnClick, isPinned } = props;
 
   return (
     <StyledList $isMine={$isMine}>
@@ -63,6 +64,9 @@ function MessageOptionList(props: Props) {
       <HoverMask onClick={replyOnClick}>
         <StyledP>Reply</StyledP>
       </HoverMask>
+      <HoverMask onClick={editOnClick}>
+        <StyledP>Edit</StyledP>
+      </HoverMask>
       <HoverMask onClick={pinOnClick}>
         <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
       </HoverMask>
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index 3ec5aef4..aed1cdac 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -1,6 +1,11 @@
+import { useDispatch, useSelector } from "react-redux";
+import styled from "styled-components";
+
 import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
-import styled from "styled-components";
+
+import { clearActiveMessage } from "@state/messages/activeMessage";
+import { RootState } from "@state/store";
 
 const Container = styled.div`
   display: flex;
@@ -56,20 +61,22 @@ const Message = styled.div`
   opacity: 0.9;
 `;
 
-type Props = {
-  state: "Edit" | "Reply";
-  message: string;
-};
+export default function ReplyWrapper() {
+  const dispatch = useDispatch();
+  const activeMessage = useSelector((state: RootState) => state.activeMessage);
+
+  function handleHideWrapper() {
+    dispatch(clearActiveMessage());
+  }
 
-export default function ReplyWrapper({ state = "Edit", message }: Props) {
   return (
     <Container>
-      <Icon>{getIcon(state)}</Icon>
+      <Icon>{getIcon(activeMessage.state === "edit" ? "Edit" : "Reply")}</Icon>
       <MessageBox>
-        <State>{`${state}ing`}</State>
-        <Message>{message}</Message>
+        <State>{`${activeMessage.state}ing`}</State>
+        <Message>{activeMessage.content}</Message>
       </MessageBox>
-      <Icon>{getIcon("Close")}</Icon>
+      <Icon onClick={handleHideWrapper}>{getIcon("Close")}</Icon>
     </Container>
   );
 }
diff --git a/app/src/state/messages/activeMessage.ts b/app/src/state/messages/activeMessage.ts
new file mode 100644
index 00000000..a1ad5620
--- /dev/null
+++ b/app/src/state/messages/activeMessage.ts
@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+type ActiveMessageState = {
+  id: string | null;
+  content: string | null;
+  state: "edit" | "reply" | null;
+};
+
+const initialState: ActiveMessageState = {
+  id: null,
+  content: null,
+  state: null,
+};
+
+const activeMessageSlice = createSlice({
+  name: "editMessage",
+  initialState,
+  reducers: {
+    setActiveMessage: (state, action: PayloadAction<ActiveMessageState>) => {
+      state.id = action.payload.id;
+      state.content = action.payload.content;
+      state.state = action.payload.state;
+    },
+
+    clearActiveMessage: (state) => {
+      state.id = null;
+      state.content = null;
+      state.state = null;
+    },
+  },
+});
+
+export const { setActiveMessage, clearActiveMessage } =
+  activeMessageSlice.actions;
+
+export default activeMessageSlice.reducer;
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index 0db0672e..eaa2d749 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -4,6 +4,8 @@ import sideBarReducer from "./side-bar/sideBar";
 import userReducer from "./user/user";
 import messagesReducer from "./messages/messages";
 import searchReducer from "./messages/search";
+import activeMessageReducer from "./messages/activeMessage";
+
 export const store = configureStore({
   reducer: {
     theme: themeReducer,
@@ -11,6 +13,7 @@ export const store = configureStore({
     user: userReducer,
     messages: messagesReducer,
     search: searchReducer,
+    activeMessage: activeMessageReducer,
   },
 });
 

From 850cd8bc754299ef3320f56450c77590acf6ca0f Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 30 Nov 2024 00:39:55 +0200
Subject: [PATCH 037/136] =?UTF-8?q?=E2=9C=A8=20(messaging):=20Finished=20e?=
 =?UTF-8?q?dit=20message=20(#73)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (messaging): Finish edit message logic

* ✨ (messaging): Finished edit message

* ✨ (messaging): Finish edit messages
---
 app/socket-server/index.js                    | 13 ++++++
 app/src/features/chats/ChatInput.tsx          | 14 ++++--
 app/src/features/chats/MessageOptionList.tsx  | 17 +++++--
 .../features/chats/hooks/useMessageSender.ts  |  9 +++-
 app/src/features/chats/sendMessage.ts         | 29 ------------
 app/src/mocks/data/messages.ts                | 45 ++++++++++++-------
 app/src/sockets/SocketProvider.tsx            | 34 +++++++++++---
 app/src/state/messages/messages.ts            | 29 +++++++-----
 app/src/types/socket.ts                       |  1 +
 9 files changed, 121 insertions(+), 70 deletions(-)
 delete mode 100644 app/src/features/chats/sendMessage.ts

diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index 3da1d344..a930fbfb 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -44,6 +44,19 @@ io.on("connection", (socket) => {
       .to(chatId)
       .emit("UNPIN_MESSAGE_SERVER", { messageId, chatId, userId });
   });
+
+  socket.on("EDIT_MESSAGE_CLIENT", ({ messageId, content, chatId }) => {
+    const room = io.sockets.adapter.rooms.get(chatId);
+
+    if (room) {
+      console.log(`Room ${chatId} members:`, [...room]);
+    } else {
+      console.log(`No members in room: ${chatId}`);
+    }
+    socket.join(chatId);
+    console.log("EDIT_MESSAGE_CLIENT:", messageId, content, chatId);
+    io.to(chatId).emit("EDIT_MESSAGE_SERVER", chatId, messageId, content); //TODO: handle user disjoin the room for some reason
+  });
 });
 
 server.listen(PORT, () => {
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 554280dd..fbbd76c8 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 
@@ -17,6 +17,7 @@ import EmojiPickerItem from "./emojies/EmojiPicker";
 
 import { useMessageSender } from "./hooks/useMessageSender";
 import ReplyWrapper from "./ReplyWrapper";
+import { clearActiveMessage } from "@state/messages/activeMessage";
 
 const Container = styled.div`
   z-index: 1;
@@ -75,10 +76,15 @@ const Input = styled.div`
 `;
 
 function ChatInput() {
-  const [input, setInput] = useState("");
+  const activeMessage = useSelector((state: RootState) => state.activeMessage);
+  const [input, setInput] = useState<string>("");
+
+  useEffect(() => {
+    if (activeMessage?.content) setInput(activeMessage?.content);
+  }, [activeMessage]);
+
   const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
   const { handleSendMessage } = useMessageSender();
-  const activeMessage = useSelector((state: RootState) => state.activeMessage);
 
   const dispatch = useDispatch();
 
@@ -88,6 +94,7 @@ function ChatInput() {
 
   const handleSubmit = () => {
     handleSendMessage(input);
+    dispatch(clearActiveMessage());
     setInput("");
   };
 
@@ -101,6 +108,7 @@ function ChatInput() {
     setShowForwardUsers(false);
     dispatch(setShowCheckBox({ showCheckBox: false }));
   }
+
   function handleForward() {
     setShowForwardUsers(true);
   }
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index a09df27d..e726d788 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -54,7 +54,14 @@ interface Props {
 }
 
 function MessageOptionList(props: Props) {
-  const { $isMine, forwardOnClick, replyOnClick, editOnClick, pinOnClick, isPinned } = props;
+  const {
+    $isMine,
+    forwardOnClick,
+    replyOnClick,
+    editOnClick,
+    pinOnClick,
+    isPinned,
+  } = props;
 
   return (
     <StyledList $isMine={$isMine}>
@@ -64,9 +71,11 @@ function MessageOptionList(props: Props) {
       <HoverMask onClick={replyOnClick}>
         <StyledP>Reply</StyledP>
       </HoverMask>
-      <HoverMask onClick={editOnClick}>
-        <StyledP>Edit</StyledP>
-      </HoverMask>
+      {$isMine && (
+        <HoverMask onClick={editOnClick}>
+          <StyledP>Edit</StyledP>
+        </HoverMask>
+      )}
       <HoverMask onClick={pinOnClick}>
         <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
       </HoverMask>
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 0ac1c3b2..3151f2ee 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -7,12 +7,18 @@ import { RootState } from "@state/store";
 import { useSocket } from "@hooks/useSocket";
 
 export const useMessageSender = () => {
-  const { sendMessage } = useSocket();
+  const { sendMessage, editMessage } = useSocket();
   const dispatch = useDispatch();
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
+  const activeMessage = useSelector((state: RootState) => state.activeMessage);
   const { chatId } = useParams<{ chatId: string }>();
 
   const handleSendMessage = (data: string) => {
+    if (activeMessage?.id) {
+      editMessage(activeMessage?.id!, data, chatId!);
+      return;
+    }
+
     if (data) {
       const message = {
         id: "19008",
@@ -28,7 +34,6 @@ export const useMessageSender = () => {
         deleteType: 2,
         status: 0,
         isOptionListOpen: false,
-        isPinned: false,
       };
       sendMessage(message);
       dispatch(addMessage(message));
diff --git a/app/src/features/chats/sendMessage.ts b/app/src/features/chats/sendMessage.ts
deleted file mode 100644
index e4bbaecd..00000000
--- a/app/src/features/chats/sendMessage.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useSocket } from "@hooks/useSocket";
-import { addMessage } from "@state/messages/messages";
-import { RootState } from "@state/store";
-import { useDispatch, useSelector } from "react-redux";
-
-const { sendMessage } = useSocket();
-const dispatch = useDispatch();
-const userId = useSelector((state: RootState) => state.user.userInfo.id);
-
-export function handleSendMessage(data: string) {
-  if (data) {
-    const message = {
-      id: "19008",
-      content: data,
-      senderId: userId,
-      type: 0,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      chatId: "",
-      parentMessageId: "",
-      isDeleted: false,
-      deleteType: 2,
-      status: 0,
-      isOptionListOpen: false,
-    };
-    sendMessage(message);
-    dispatch(addMessage(message));
-  }
-}
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
index 0b73fd45..02e1af52 100644
--- a/app/src/mocks/data/messages.ts
+++ b/app/src/mocks/data/messages.ts
@@ -13,12 +13,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:00:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:00:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "2",
@@ -27,12 +28,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:01:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:01:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: true,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "3",
@@ -41,12 +43,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:02:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:02:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "4",
@@ -55,12 +58,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:03:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:03:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "5",
@@ -69,12 +73,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:04:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:04:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "6",
@@ -83,12 +88,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:05:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:05:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "7",
@@ -97,12 +103,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:06:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:06:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "8",
@@ -111,12 +118,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:07:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:07:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "9",
@@ -125,12 +133,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:08:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:08:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "10",
@@ -139,12 +148,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:09:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:09:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "11",
@@ -153,12 +163,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:10:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:10:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "12",
@@ -167,12 +178,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:11:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:11:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "13",
@@ -181,12 +193,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:12:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:12:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: false,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "14",
@@ -195,12 +208,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:13:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:13:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: true,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
   {
     id: "15",
@@ -209,12 +223,13 @@ const messages: MessageInterface[] = [
     type: MessageTypes.normal,
     createdAt: new Date("2024-11-27T10:14:00").toISOString(),
     updatedAt: new Date("2024-11-27T10:14:00").toISOString(),
-    chatId: "chat1",
+    chatId: "1",
     parentMessageId: "",
     isDeleted: false,
     isPinned: true,
     deleteType: DeleteType.none,
     status: MessageStatus.sent,
+    isOptionListOpen: false,
   },
 ];
 
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 244d493e..e337fe07 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -4,6 +4,7 @@ import { Dispatch } from "redux";
 
 import {
   addMessage,
+  editMessage,
   MessageInterface,
   pinMessage,
   setIsTyping,
@@ -16,7 +17,7 @@ import { useChats } from "@features/chats/hooks/useChats";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
-  message: MessageInterface,
+  message: MessageInterface
 ) => {
   dispatch(addMessage(message));
 };
@@ -57,14 +58,22 @@ function SocketProvider({ children }: SocketProviderProps) {
       "PIN_MESSAGE_SERVER",
       (chatId: string, messageId: string, userId: string) => {
         dispatch(pinMessage({ chatId, messageId }));
-      },
+      }
     );
 
     socket.on(
       "UNPIN_MESSAGE_SERVER",
       (chatId: string, messageId: string, userId: string) => {
         dispatch(unpinMessage({ chatId, messageId }));
-      },
+      }
+    );
+
+    socket.on(
+      "EDIT_MESSAGE_SERVER",
+      (chatId: string, messageId: string, content: string) => {
+        console.log("EDIT_MESSAGE_SERVER", chatId, messageId, content);
+        dispatch(editMessage({ chatId, messageId, content }));
+      }
     );
 
     socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
@@ -86,7 +95,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
       console.log(
         "Joined all chats:",
-        chats.map((chat) => chat.id),
+        chats.map((chat) => chat.id)
       );
     }
   }, [isConnected, isPending, chats, socket]);
@@ -99,10 +108,22 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   };
 
+  const editMessageSocket = (
+    messageId: string,
+    content: string,
+    chatId: string
+  ) => {
+    if (isConnected) {
+      socket.emit("EDIT_MESSAGE_CLIENT", { messageId, content, chatId });
+    } else {
+      console.warn("Cannot edit message: not connected to socket server");
+    }
+  };
+
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
     if (isConnected) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -114,7 +135,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
     if (isConnected) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -130,6 +151,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         sendMessage,
         pinMessage: pinMessageSocket,
         unpinMessage: unpinMessageSocket,
+        editMessage: editMessageSocket,
       }}
     >
       {children}
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index ccb463cd..54f76879 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -27,7 +27,7 @@ const messagesSlice = createSlice({
 
     deleteMessage: (
       state,
-      action: PayloadAction<{ id: string; chatId: string }>,
+      action: PayloadAction<{ id: string; chatId: string }>
     ) => {
       state.messages = state.messages.filter((message) => {
         const { chatId, id } = action.payload;
@@ -38,12 +38,19 @@ const messagesSlice = createSlice({
 
     editMessage: (
       state,
-      action: PayloadAction<{ id: string; content: string; chatId: string }>,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        content: string;
+      }>
     ) => {
-      const { id, content, chatId } = action.payload;
+      const { chatId, messageId, content } = action.payload;
+
       const message = state.messages.find(
-        (msg) => msg.id === id && msg.chatId == chatId,
+        (msg) => msg.id === messageId && msg,
+        chatId === chatId
       );
+
       if (message) {
         message.content = content;
       }
@@ -51,11 +58,11 @@ const messagesSlice = createSlice({
 
     pinMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>,
+      action: PayloadAction<{ messageId: string; chatId: string }>
     ) => {
       const { messageId, chatId } = action.payload;
       const message = state.messages.find(
-        (msg) => msg.id === messageId && msg.chatId == chatId,
+        (msg) => msg.id === messageId && msg.chatId == chatId
       );
       if (message) {
         message.isPinned = true;
@@ -64,11 +71,11 @@ const messagesSlice = createSlice({
 
     unpinMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>,
+      action: PayloadAction<{ messageId: string; chatId: string }>
     ) => {
       const { messageId, chatId } = action.payload;
       const message = state.messages.find(
-        (msg) => msg.id === messageId && msg.chatId == chatId,
+        (msg) => msg.id === messageId && msg.chatId == chatId
       );
       if (message) {
         message.isPinned = false;
@@ -86,7 +93,7 @@ const messagesSlice = createSlice({
 
     setShowCheckBox: (
       state,
-      action: PayloadAction<{ showCheckBox: boolean }>,
+      action: PayloadAction<{ showCheckBox: boolean }>
     ) => {
       const { showCheckBox } = action.payload;
       if (!showCheckBox) {
@@ -97,7 +104,7 @@ const messagesSlice = createSlice({
 
     setIsOptionListOpen: (
       state,
-      action: PayloadAction<{ value: boolean; id: string }>,
+      action: PayloadAction<{ value: boolean; id: string }>
     ) => {
       const { id, value } = action.payload;
       state.messages.forEach((msg) => {
@@ -117,7 +124,7 @@ const messagesSlice = createSlice({
     removeSelectedMessage: (state, action: PayloadAction<{ id: string }>) => {
       const { id } = action.payload;
       state.selectedMessages = state.selectedMessages.filter(
-        (msgId) => msgId !== id,
+        (msgId) => msgId !== id
       );
     },
   },
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 856ca7f4..61662664 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -6,6 +6,7 @@ export interface SocketContextType {
   sendMessage: (message: MessageInterface) => void;
   pinMessage: (chatId: string, messageId: string, userId: string) => void;
   unpinMessage: (chatId: string, messageId: string, userId: string) => void;
+  editMessage: (messageId: string, content: string, chatId: string) => void;
 }
 
 export interface SocketProviderProps {

From f881d791298214e143a92efdbf8145bc5ed85c93 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 30 Nov 2024 00:46:24 +0200
Subject: [PATCH 038/136] =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F=20(messaging):=20?=
 =?UTF-8?q?Reset=20input=20on=20discarding=20edit=20(#74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (messaging): Finish edit message logic

* ✨ (messaging): Finished edit message

* ✨ (messaging): Finish edit messages

* 🚑️ (messaging): Reset input on discarding edit
---
 app/src/features/chats/ChatInput.tsx    | 2 +-
 app/src/features/chats/ReplyWrapper.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index fbbd76c8..a3609d0b 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -119,7 +119,7 @@ function ChatInput() {
         <Input>
           {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
           <InputContainer>
-            {activeMessage.id && <ReplyWrapper />}
+            {activeMessage.id && <ReplyWrapper setInput={setInput} />}
             <InputWrapper>
               <InvisibleButton onClick={toggleShowEmojies}>
                 <Icon>{getIcon("Emojie")}</Icon>
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index aed1cdac..e2b3a425 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -61,12 +61,17 @@ const Message = styled.div`
   opacity: 0.9;
 `;
 
-export default function ReplyWrapper() {
+type Props = {
+  setInput: (state: string) => void;
+};
+
+export default function ReplyWrapper({ setInput }: Props) {
   const dispatch = useDispatch();
   const activeMessage = useSelector((state: RootState) => state.activeMessage);
 
   function handleHideWrapper() {
     dispatch(clearActiveMessage());
+    if (activeMessage.state === "edit") setInput("");
   }
 
   return (

From a586dda96f1f224a87625d2f0f59d052f8df230c Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 30 Nov 2024 08:50:25 +0200
Subject: [PATCH 039/136] =?UTF-8?q?=F0=9F=92=84=20(messaging):=20Added=20m?=
 =?UTF-8?q?essage=20details=20ui=20(pin,=20timestamp)=20(#75)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/data/icons.tsx                       |  9 +++
 app/src/features/chats/Message.tsx           | 79 +++++++++++++++-----
 app/src/features/chats/MessageOptionList.tsx | 14 ++--
 3 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 61cba9b6..5bbc6c0a 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -39,6 +39,7 @@ import ShortcutIcon from "@mui/icons-material/Shortcut";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PinIcon from "@mui/icons-material/Pin";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
 
 enum icons {
   BlockIcon,
@@ -84,6 +85,7 @@ enum icons {
   MessagingOptions,
   Pin,
   Reply,
+  PushPin,
 }
 
 type iconStrings = keyof typeof icons;
@@ -332,6 +334,13 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
     />
   ),
   Reply: <ReplyOutlinedIcon />,
+  PushPin: (
+    <PushPinOutlinedIcon
+      sx={{
+        fontSize: "0.9rem",
+      }}
+    />
+  ),
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 5ac6fd57..704e5791 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, MouseEvent } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 
@@ -38,21 +38,35 @@ const StyledMessage = styled.div<{ $isMine: boolean }>`
 
 const Bubble = styled.div<{ $isMine: boolean }>`
   display: flex;
+  flex-direction: column;
+
   max-width: 70%;
   padding: 10px;
-  border-radius: 15px;
+  border-radius: var(--border-radius-messages);
   font-size: 14px;
   height: fit-content;
   position: relative;
 
-  background-color: ${({ $isMine }) => ($isMine ? "#0084ff" : "#e5e5ea")};
-  color: ${({ $isMine }) => ($isMine ? "#fff" : "#000")};
+  background-color: ${({ $isMine }) =>
+    $isMine
+      ? "linear-gradient(135deg, var(--color-background-own-1), var(--color-background-own-2), var(--color-background-own-3), var(--color-background-own-4))"
+      : "var(--color-background)"};
+
+  background: ${({ $isMine }) =>
+    $isMine
+      ? "linear-gradient(to bottom, var(--color-background-own-1), var(--color-background-own-2), var(--color-background-own-3), var(--color-background-own-4))"
+      : "var(--color-background)"};
+
+  background-attachment: ${({ $isMine }) => ($isMine ? "fixed" : "initial")};
+  background-size: ${({ $isMine }) => ($isMine ? "cover" : "initial")};
+  background-position: ${({ $isMine }) => ($isMine ? "center" : "initial")};
+
+  color: ${({ $isMine }) => ($isMine ? "#fff" : "var(--color-text)")};
   margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
   z-index: 1;
-`;
 
-const StyledIcon = styled.div`
-  cursor: pointer;
+  word-break: break-word;
+  white-space: pre-wrap;
 `;
 
 const MessageRow = styled.div<{ $isChecked: boolean }>`
@@ -72,6 +86,26 @@ const CheckBoxWrapper = styled.div`
   align-self: center;
 `;
 
+const TimeStamp = styled.div<{ $isMine: boolean }>`
+  font-size: x-small;
+  font-size: x-small;
+  color: ${({ $isMine }) =>
+    $isMine ? "var(--color-text)" : "var(--color-text-secondary)"};
+
+  float: none;
+  display: block;
+
+  float: none;
+  display: block;
+`;
+
+const Details = styled.div`
+  display: flex;
+  align-self: flex-end;
+
+  gap: 0.2rem;
+`;
+
 type MessageProps = {
   index: number;
   messagesLength: number;
@@ -84,12 +118,13 @@ function Message({
   data: { id, senderId, content, isOptionListOpen, isPinned, chatId },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-    (state: RootState) => state.search,
+    (state: RootState) => state.search
   );
 
   const mergedRef = useRef<HTMLDivElement>(null);
   const { lastMessageRef } = useScrollToLastMsg();
   const { searchResultRef } = useScrollToSearchResultsMsg();
+  const [isHovered, setIsHovered] = useState(false);
 
   const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
     useSocket();
@@ -99,7 +134,7 @@ function Message({
     lastMessageRef.current =
       index === messagesLength - 1 ? mergedRef.current : null;
     const isSearchResult = searchResults.find(
-      (result) => result.messageId === id,
+      (result) => result.messageId === id
     );
     const isCurrentResult =
       isSearchResult && searchResults[currentResultIndex]?.messageId === id;
@@ -118,7 +153,7 @@ function Message({
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
 
   const showCheckbox = useSelector(
-    (state: RootState) => state.messages.showCheckBox,
+    (state: RootState) => state.messages.showCheckBox
   );
   const dispatch = useAppDispatch();
 
@@ -138,10 +173,6 @@ function Message({
     setIsChecked(!isChecked);
   }
 
-  function handleIconClick() {
-    dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
-  }
-
   function pinOnClick() {
     if (isPinned) {
       dispatch(unpinMessage({ messageId: id, chatId: chatId }));
@@ -165,6 +196,15 @@ function Message({
     dispatch(setActiveMessage({ id, content, state: "reply" }));
   }
 
+  function handleMouseLeave() {
+    setIsHovered(false);
+  }
+
+  function handleOpenList(e: MouseEvent<HTMLDivElement>) {
+    e.preventDefault();
+    setIsHovered(true);
+  }
+
   return (
     <MessageRow $isChecked={isChecked}>
       {showCheckbox && (
@@ -179,13 +219,12 @@ function Message({
         $isMine={senderId === userId}
         data-message-id={id}
         data-testid={`message-${id}`}
+        onMouseLeave={handleMouseLeave}
+        onContextMenu={handleOpenList}
       >
         <Bubble $isMine={senderId === userId}>
           {renderWithHighlight(content, searchTerm, searchResults, id)}
-          <StyledIcon onClick={handleIconClick}>
-            {getIcon("MessagingOptions")}
-          </StyledIcon>
-          {isOptionListOpen && (
+          {isHovered && (
             <MessageOptionList
               $isMine={senderId === userId}
               forwardOnClick={forwardOnClick}
@@ -195,6 +234,10 @@ function Message({
               editOnClick={handleEditMessage}
             />
           )}
+          <Details>
+            {isPinned && getIcon("PushPin")}
+            <TimeStamp $isMine={senderId === userId}>11:09AM</TimeStamp>
+          </Details>
         </Bubble>
       </StyledMessage>
     </MessageRow>
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index e726d788..3b0110da 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -2,13 +2,13 @@ import styled from "styled-components";
 
 const StyledList = styled.ul<{ $isMine: boolean }>`
   position: absolute;
-  width: 6rem;
+  min-width: 150px;
   height: 6rem;
 
   right: ${(props) => !props.$isMine && -6.5}rem;
   left: ${(props) => props.$isMine && -6.5}rem;
 
-  z-index: 10;
+  z-index: 10 !important;
   overflow: auto;
 
   display: flex;
@@ -21,14 +21,18 @@ const StyledList = styled.ul<{ $isMine: boolean }>`
   padding: 0.2rem 0.2rem;
   background-color: var(--color-background);
   box-shadow: var(--box-shadow);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-default-small);
+
+  height: fit-content;
+
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(5px);
 `;
 
 const HoverMask = styled.div`
   width: 100%;
   height: 100%;
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-default-small);
   display: flex;
   align-items: center;
   justify-content: start;

From 52d754e37f67f93ae85cd834315744aa15db797f Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 30 Nov 2024 13:09:54 +0200
Subject: [PATCH 040/136] =?UTF-8?q?=F0=9F=91=BD=EF=B8=8F=20(sockets):=20Up?=
 =?UTF-8?q?date=20send-message=20event=20to=20match=20backend=20(#76)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 👽️ (sockets): Update send-message event to match backend

* 🔇 Remove some unnecessary logs

* 🚨 Removed some warnings
---
 app/socket-server/index.js                    |  9 ++++---
 .../features/chats/hooks/useMessageSender.ts  |  7 ++----
 app/src/sockets/SocketProvider.tsx            | 24 +++++++++++++++----
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index a930fbfb..9ecf56a0 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -16,10 +16,13 @@ const io = new Server(server, {
 io.on("connection", (socket) => {
   console.log("A user connected:", socket.id);
 
-  socket.on("send_message", (data) => {
+  socket.on("SEND_MESSAGE", (data, callback) => {
     console.log("Message received from client:", data);
-
-    socket.broadcast.emit("receive_message", data);
+    callback({ success: true, message: "sent seccussfully", res: Date.now() });
+    socket.join(data.chatId);
+    console.log(data.chatId);
+    //TODO: need to be socket.to(data.chatId).emit()
+    socket.broadcast.emit("RECEIVE_MESSAGE", { ...data, id: Date.now() });
   });
 
   socket.on("join", ({ chatId }) => {
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 3151f2ee..1c7b1d7e 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,14 +1,12 @@
 import { useParams } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
-import { addMessage } from "@state/messages/messages";
 import { RootState } from "@state/store";
 
 import { useSocket } from "@hooks/useSocket";
 
 export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
-  const dispatch = useDispatch();
   const userId = useSelector((state: RootState) => state.user.userInfo.id);
   const activeMessage = useSelector((state: RootState) => state.activeMessage);
   const { chatId } = useParams<{ chatId: string }>();
@@ -21,7 +19,7 @@ export const useMessageSender = () => {
 
     if (data) {
       const message = {
-        id: "19008",
+        id: "",
         content: data,
         senderId: userId,
         type: 0,
@@ -36,7 +34,6 @@ export const useMessageSender = () => {
         isOptionListOpen: false,
       };
       sendMessage(message);
-      dispatch(addMessage(message));
     }
   };
 
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index e337fe07..a43dc41b 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -30,6 +30,12 @@ type SocketProviderProps = {
   children: ReactNode;
 };
 
+interface AcknowledgmentResponse {
+  success: boolean;
+  message: string;
+  res: string;
+}
+
 function SocketProvider({ children }: SocketProviderProps) {
   const [isConnected, setIsConnected] = useState(false);
   const dispatch = useDispatch();
@@ -50,7 +56,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
     });
 
-    socket.on("receive_message", (message: MessageInterface) => {
+    socket.on("RECEIVE_MESSAGE", (message: MessageInterface) => {
       handleIncomingMessage(dispatch, message);
     });
 
@@ -89,7 +95,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   }, [dispatch, socket]);
 
   useEffect(() => {
-    if (isConnected && !isPending && chats?.length) {
+    if (!isPending && chats?.length) {
       chats.forEach((chat) => {
         socket.emit("join", { chatId: chat.id });
       });
@@ -100,9 +106,19 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }, [isConnected, isPending, chats, socket]);
 
-  const sendMessage = (message: MessageInterface) => {
+  const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected) {
-      socket.emit("send_message", message);
+      socket.emit(
+        "SEND_MESSAGE",
+        sentMessage,
+        ({ success, message, res }: AcknowledgmentResponse) => {
+          if (success) {
+            console.log(message);
+            const id = res;
+            handleIncomingMessage(dispatch, { ...sentMessage, id });
+          }
+        }
+      );
     } else {
       console.warn("Cannot send message: not connected to socket server");
     }

From 2088d1ed86041c112c89fda59ca180890469b91c Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 30 Nov 2024 17:20:41 +0200
Subject: [PATCH 041/136] =?UTF-8?q?=F0=9F=93=9D=20Added=20docs=20for=20moc?=
 =?UTF-8?q?king=20sockets=20(#77)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/flows/sockets-dev.md | 59 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 docs/flows/sockets-dev.md

diff --git a/docs/flows/sockets-dev.md b/docs/flows/sockets-dev.md
new file mode 100644
index 00000000..609541d1
--- /dev/null
+++ b/docs/flows/sockets-dev.md
@@ -0,0 +1,59 @@
+# Mock communication between 2 users
+
+## 1. Run the Server
+
+### Steps:
+
+1. Navigate to the `socket-server` directory:
+
+   ```bash
+   cd ./app/socket-server
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm i
+   ```
+3. Start the server:
+   ```bash
+   nodemon index.js
+   ```
+
+---
+
+## 2. Configure the App
+
+1. Navigate to the `app` directory:
+   ```bash
+   cd ./app
+   ```
+2. Add the following line to the `.env` file:
+   ```
+   VITE_SOCKET_BACKEND_API=http://localhost:4000
+   ```
+
+---
+
+## 3. Run the Clients
+
+### Client 1
+
+1. Start the application:
+   ```bash
+   npm run dev
+   ```
+2. Log in with **User 1**:
+   - **Email:** `johndoe@example.com`
+   - **Password:** `1234`
+3. **Note:** Ensure all `localStorage` data is cleared before logging in.
+
+### Client 2
+
+1. Start the application:
+   ```bash
+   npm run dev
+   ```
+2. Log in with **User 2**:
+   - **Email:** `ay7aga@example.com`
+   - **Password:** `1234`
+3. **Note:** Ensure all `localStorage` data is cleared before logging in.

From 8b36b9c5d9ebe42d8f675d103b2780311e61a730 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 30 Nov 2024 17:32:17 +0200
Subject: [PATCH 042/136] hotfix: socket mock not sending to chat room
 correctly (#78)

---
 app/socket-server/index.js         |  7 ++---
 app/src/mocks/data/chats.ts        | 32 +++++++++++-----------
 app/src/sockets/SocketProvider.tsx | 44 +++++++++++++++++++++---------
 3 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index 9ecf56a0..184a10ff 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -21,8 +21,7 @@ io.on("connection", (socket) => {
     callback({ success: true, message: "sent seccussfully", res: Date.now() });
     socket.join(data.chatId);
     console.log(data.chatId);
-    //TODO: need to be socket.to(data.chatId).emit()
-    socket.broadcast.emit("RECEIVE_MESSAGE", { ...data, id: Date.now() });
+    socket.to(data.chatId).emit("RECEIVE_MESSAGE", { ...data, id: Date.now() });
   });
 
   socket.on("join", ({ chatId }) => {
@@ -37,14 +36,14 @@ io.on("connection", (socket) => {
   socket.on("PIN_MESSAGE_CLIENT", ({ messageId, chatId, userId }) => {
     console.log("PIN_MESSAGE_CLIENT", messageId, chatId, userId);
     socket.broadcast
-      .to(chatId)
+      .to(chatId?.toString())
       .emit("PIN_MESSAGE_SERVER", { messageId, chatId, userId });
   });
 
   socket.on("UNPIN_MESSAGE_CLIENT", ({ messageId, chatId, userId }) => {
     console.log("UNPIN_MESSAGE_CLIENT", messageId, chatId, userId);
     socket.broadcast
-      .to(chatId)
+      .to(chatId?.toString())
       .emit("UNPIN_MESSAGE_SERVER", { messageId, chatId, userId });
   });
 
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index cc0989f1..145d3b92 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -1,5 +1,5 @@
 export type Chat = {
-  id: number;
+  id: string;
   name: string;
   lastMessage: string;
   timestamp: string;
@@ -9,49 +9,49 @@ export type Chat = {
 
 export const allChats: Chat[] = [
   {
-    id: 1,
+    id: "1",
     name: "Alice",
     lastMessage: "See you soon!",
     timestamp: "1h ago",
     lastSeen: "10 minutes ago",
   },
   {
-    id: 2,
+    id: "2",
     name: "Bob",
     lastMessage: "Let's meet tomorrow.",
     timestamp: "2h ago",
     lastSeen: "30 minutes ago",
   },
   {
-    id: 3,
+    id: "3",
     name: "Charlie",
     lastMessage: "Hello!",
     timestamp: "3h ago",
     lastSeen: "45 minutes ago",
   },
   {
-    id: 4,
+    id: "4",
     name: "David",
     lastMessage: "Good morning!",
     timestamp: "4h ago",
     lastSeen: "1 hour ago",
   },
   {
-    id: 5,
+    id: "5",
     name: "Eve",
     lastMessage: "See you at 5pm.",
     timestamp: "5h ago",
     lastSeen: "1 hour ago",
   },
   {
-    id: 6,
+    id: "6",
     name: "Frank",
     lastMessage: "I'm on my way.",
     timestamp: "6h ago",
     lastSeen: "2 hours ago",
   },
   {
-    id: 7,
+    id: "7",
     name: "Grace",
     lastMessage:
       "How are you? a very long message to test if the text is truncated correctly",
@@ -59,56 +59,56 @@ export const allChats: Chat[] = [
     lastSeen: "3 hours ago",
   },
   {
-    id: 8,
+    id: "8",
     name: "Hannah",
     lastMessage: "Let's catch up soon!",
     timestamp: "8h ago",
     lastSeen: "4 hours ago",
   },
   {
-    id: 9,
+    id: "9",
     name: "Ivy",
     lastMessage: "Thanks for your help!",
     timestamp: "9h ago",
     lastSeen: "5 hours ago",
   },
   {
-    id: 10,
+    id: "10",
     name: "Jack",
     lastMessage: "Can't wait to see you!",
     timestamp: "10h ago",
     lastSeen: "6 hours ago",
   },
   {
-    id: 11,
+    id: "11",
     name: "Kara",
     lastMessage: "Talk soon.",
     timestamp: "11h ago",
     lastSeen: "7 hours ago",
   },
   {
-    id: 12,
+    id: "12",
     name: "Liam",
     lastMessage: "I'll send the details.",
     timestamp: "12h ago",
     lastSeen: "8 hours ago",
   },
   {
-    id: 13,
+    id: "13",
     name: "Mia",
     lastMessage: "Let's go for a walk.",
     timestamp: "13h ago",
     lastSeen: "9 hours ago",
   },
   {
-    id: 14,
+    id: "14",
     name: "Noah",
     lastMessage: "I agree with you.",
     timestamp: "14h ago",
     lastSeen: "10 hours ago",
   },
   {
-    id: 15,
+    id: "15",
     name: "Olivia",
     lastMessage: "I'll get back to you.",
     timestamp: "15h ago",
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index a43dc41b..701e288e 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -17,7 +17,7 @@ import { useChats } from "@features/chats/hooks/useChats";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
-  message: MessageInterface
+  message: MessageInterface,
 ) => {
   dispatch(addMessage(message));
 };
@@ -62,16 +62,34 @@ function SocketProvider({ children }: SocketProviderProps) {
 
     socket.on(
       "PIN_MESSAGE_SERVER",
-      (chatId: string, messageId: string, userId: string) => {
-        dispatch(pinMessage({ chatId, messageId }));
-      }
+      ({
+        chatId,
+        messageId,
+        userId,
+      }: {
+        chatId: string;
+        messageId: string;
+        userId: string;
+      }) => {
+        console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+        dispatch(pinMessage({ messageId, chatId }));
+      },
     );
 
     socket.on(
       "UNPIN_MESSAGE_SERVER",
-      (chatId: string, messageId: string, userId: string) => {
-        dispatch(unpinMessage({ chatId, messageId }));
-      }
+      ({
+        chatId,
+        messageId,
+        userId,
+      }: {
+        chatId: string;
+        messageId: string;
+        userId: string;
+      }) => {
+        console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+        dispatch(unpinMessage({ messageId, chatId }));
+      },
     );
 
     socket.on(
@@ -79,7 +97,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       (chatId: string, messageId: string, content: string) => {
         console.log("EDIT_MESSAGE_SERVER", chatId, messageId, content);
         dispatch(editMessage({ chatId, messageId, content }));
-      }
+      },
     );
 
     socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
@@ -101,7 +119,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
       console.log(
         "Joined all chats:",
-        chats.map((chat) => chat.id)
+        chats.map((chat) => chat.id),
       );
     }
   }, [isConnected, isPending, chats, socket]);
@@ -117,7 +135,7 @@ function SocketProvider({ children }: SocketProviderProps) {
             const id = res;
             handleIncomingMessage(dispatch, { ...sentMessage, id });
           }
-        }
+        },
       );
     } else {
       console.warn("Cannot send message: not connected to socket server");
@@ -127,7 +145,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const editMessageSocket = (
     messageId: string,
     content: string,
-    chatId: string
+    chatId: string,
   ) => {
     if (isConnected) {
       socket.emit("EDIT_MESSAGE_CLIENT", { messageId, content, chatId });
@@ -139,7 +157,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string
+    userId: string,
   ) => {
     if (isConnected) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -151,7 +169,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string
+    userId: string,
   ) => {
     if (isConnected) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });

From 46be64cd418d0f698521bb308f469b9cc4f49d5e Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 30 Nov 2024 19:25:48 +0200
Subject: [PATCH 043/136] fix integration with deployed backend setup (#79)

* hotfix: socket mock not sending to chat room correctly

* fix(integration): using deployed back in dev working
---
 .../features/authentication/login/hooks/useLogin.ts  |  1 +
 .../login/services/apiForgotPassword.ts              |  1 +
 .../authentication/login/services/apiLogin.ts        |  1 +
 .../authentication/login/services/checkAuth.ts       |  4 ++++
 .../authentication/logout/hooks/useLogout.ts         |  1 +
 .../authentication/logout/services/apiLogout.ts      |  3 +++
 .../authentication/oauth/services/apiUser.ts         |  5 ++++-
 .../authentication/signup/services/apiConfirmCode.ts |  1 +
 .../authentication/signup/services/apiSignup.ts      |  2 ++
 app/src/features/chats/services/apiGetChats.ts       |  4 ++++
 app/src/features/devices/services/GetAllSessions.ts  |  1 +
 .../features/devices/services/GetCurrentSession.ts   |  1 +
 .../features/devices/services/LogoutOtherSessions.ts |  1 +
 .../features/privacy-settings/service/blockUser.ts   |  1 +
 .../privacy-settings/service/changeSettings.ts       |  2 +-
 .../privacy-settings/service/getBlockList.ts         |  3 +++
 .../privacy-settings/service/removeFromBlocks.ts     |  1 +
 .../services/DeleteProfilePicture.ts                 |  3 +++
 .../profile-settings/services/GetProfileSettings.ts  |  1 +
 .../services/UpdateProfilePicture.ts                 |  3 +++
 .../services/UpdateProfileSettings.ts                |  1 +
 app/src/features/stories/services/deleteStory.ts     |  3 +++
 app/src/features/stories/services/getMyStories.ts    |  3 +++
 app/src/features/stories/services/getStories.ts      |  3 +++
 app/src/features/stories/services/getViews.ts        |  3 +++
 app/src/features/stories/services/postStory.ts       |  3 +++
 app/src/features/stories/services/viewStory.ts       |  3 +++
 app/src/state/user/user.ts                           | 12 ++++++------
 28 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/app/src/features/authentication/login/hooks/useLogin.ts b/app/src/features/authentication/login/hooks/useLogin.ts
index 657419f3..cee2cf5c 100644
--- a/app/src/features/authentication/login/hooks/useLogin.ts
+++ b/app/src/features/authentication/login/hooks/useLogin.ts
@@ -13,6 +13,7 @@ export function useLogin() {
     onSuccess: (data) => {
       queryClient.setQueryData(["user"], { user: data.user });
       queryClient.invalidateQueries({ queryKey: ["isAuth"] });
+      localStorage.setItem("sessionId", data.sessionId);
       dispatch(setUserInfo(data.user));
     },
   });
diff --git a/app/src/features/authentication/login/services/apiForgotPassword.ts b/app/src/features/authentication/login/services/apiForgotPassword.ts
index c1d4c200..6723a6a1 100644
--- a/app/src/features/authentication/login/services/apiForgotPassword.ts
+++ b/app/src/features/authentication/login/services/apiForgotPassword.ts
@@ -6,6 +6,7 @@ export async function forgotPassword(email: string) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
 
     body: JSON.stringify(emailObj),
diff --git a/app/src/features/authentication/login/services/apiLogin.ts b/app/src/features/authentication/login/services/apiLogin.ts
index 94384522..bef7de74 100644
--- a/app/src/features/authentication/login/services/apiLogin.ts
+++ b/app/src/features/authentication/login/services/apiLogin.ts
@@ -7,6 +7,7 @@ export async function login(user: User) {
     headers: {
       "Content-Type": "application/json",
       "Access-Control-Allow-credentials": "true",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify(user),
     credentials: "include",
diff --git a/app/src/features/authentication/login/services/checkAuth.ts b/app/src/features/authentication/login/services/checkAuth.ts
index 87055ebf..17c40972 100644
--- a/app/src/features/authentication/login/services/checkAuth.ts
+++ b/app/src/features/authentication/login/services/checkAuth.ts
@@ -4,6 +4,10 @@ export async function checkAuth() {
   const res = await fetch(`${API_URL}/auth/me`, {
     method: "GET",
     credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
   if (!res.ok) {
     return false;
diff --git a/app/src/features/authentication/logout/hooks/useLogout.ts b/app/src/features/authentication/logout/hooks/useLogout.ts
index 6c013802..c5bedab5 100644
--- a/app/src/features/authentication/logout/hooks/useLogout.ts
+++ b/app/src/features/authentication/logout/hooks/useLogout.ts
@@ -10,6 +10,7 @@ export function useLogout() {
     mutationFn: logoutApi,
     onSuccess: () => {
       queryClient.removeQueries();
+      localStorage.removeItem("sessionId");
       navigate("/login", { replace: true });
       queryClient.invalidateQueries({ queryKey: ["isAuth"] });
     },
diff --git a/app/src/features/authentication/logout/services/apiLogout.ts b/app/src/features/authentication/logout/services/apiLogout.ts
index 8cc6f84b..d24cb01c 100644
--- a/app/src/features/authentication/logout/services/apiLogout.ts
+++ b/app/src/features/authentication/logout/services/apiLogout.ts
@@ -5,6 +5,9 @@ export async function logout() {
     const res = await fetch(`${API_URL}/auth/logout`, {
       method: "POST",
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!res.ok) {
diff --git a/app/src/features/authentication/oauth/services/apiUser.ts b/app/src/features/authentication/oauth/services/apiUser.ts
index e6734901..7fd60b8a 100644
--- a/app/src/features/authentication/oauth/services/apiUser.ts
+++ b/app/src/features/authentication/oauth/services/apiUser.ts
@@ -4,8 +4,11 @@ export async function apiUser() {
   const res = await fetch(`${API_URL}/users/me`, {
     method: "GET",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
-    
+
   const data = await res.json();
 
   if (data.status !== "success") {
diff --git a/app/src/features/authentication/signup/services/apiConfirmCode.ts b/app/src/features/authentication/signup/services/apiConfirmCode.ts
index c8e240d8..a1e6c666 100644
--- a/app/src/features/authentication/signup/services/apiConfirmCode.ts
+++ b/app/src/features/authentication/signup/services/apiConfirmCode.ts
@@ -5,6 +5,7 @@ export async function sendEmailVerification(email: string) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify({ email: email }),
   });
diff --git a/app/src/features/authentication/signup/services/apiSignup.ts b/app/src/features/authentication/signup/services/apiSignup.ts
index e87bd71c..9609077d 100644
--- a/app/src/features/authentication/signup/services/apiSignup.ts
+++ b/app/src/features/authentication/signup/services/apiSignup.ts
@@ -11,5 +11,7 @@ export async function Signup(user: User) {
   const data = await res.json();
   if (data.status !== "success") throw new Error(data.message);
 
+  localStorage.setItem("sessionId", data.data.sessionId);
+
   return user.email;
 }
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index f4fe384a..19726977 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -5,12 +5,15 @@ export async function getAllChatsApi() {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
 
   const data = await res.json();
 
+  console.log(data);
+
   if (data.status !== "success") {
     throw new Error(data.message);
   }
@@ -23,6 +26,7 @@ export async function getChatApi(id: string) {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/devices/services/GetAllSessions.ts b/app/src/features/devices/services/GetAllSessions.ts
index 03e7f8ad..84f06234 100644
--- a/app/src/features/devices/services/GetAllSessions.ts
+++ b/app/src/features/devices/services/GetAllSessions.ts
@@ -6,6 +6,7 @@ async function GetAllSessions(): Promise<Session[]> {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/devices/services/GetCurrentSession.ts b/app/src/features/devices/services/GetCurrentSession.ts
index cf12e43d..e10ba86e 100644
--- a/app/src/features/devices/services/GetCurrentSession.ts
+++ b/app/src/features/devices/services/GetCurrentSession.ts
@@ -6,6 +6,7 @@ async function GetCurrentSession(): Promise<Session> {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/devices/services/LogoutOtherSessions.ts b/app/src/features/devices/services/LogoutOtherSessions.ts
index 48e3c298..77ffb425 100644
--- a/app/src/features/devices/services/LogoutOtherSessions.ts
+++ b/app/src/features/devices/services/LogoutOtherSessions.ts
@@ -5,6 +5,7 @@ async function LogoutOtherSessions() {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/privacy-settings/service/blockUser.ts b/app/src/features/privacy-settings/service/blockUser.ts
index cc4adbf2..35fd3186 100644
--- a/app/src/features/privacy-settings/service/blockUser.ts
+++ b/app/src/features/privacy-settings/service/blockUser.ts
@@ -10,6 +10,7 @@ async function blockUser(data: requestType) {
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
   });
 
diff --git a/app/src/features/privacy-settings/service/changeSettings.ts b/app/src/features/privacy-settings/service/changeSettings.ts
index a652f6e0..172c2619 100644
--- a/app/src/features/privacy-settings/service/changeSettings.ts
+++ b/app/src/features/privacy-settings/service/changeSettings.ts
@@ -19,12 +19,12 @@ async function changeSettings(data: {
   const endpt = endPts[key];
   const reqBody = { privacy: value.toLowerCase() };
 
-
   const res = await fetch(`${API_URL}/users/privacy/${endpt}`, {
     method: "PATCH",
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify(reqBody),
   });
diff --git a/app/src/features/privacy-settings/service/getBlockList.ts b/app/src/features/privacy-settings/service/getBlockList.ts
index 6766e2c8..58b56e7a 100644
--- a/app/src/features/privacy-settings/service/getBlockList.ts
+++ b/app/src/features/privacy-settings/service/getBlockList.ts
@@ -6,6 +6,9 @@ async function getBlockList() {
   const response = await fetch(`${API_URL}/users/block`, {
     method: "GET",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
 
   const data = await response.json();
diff --git a/app/src/features/privacy-settings/service/removeFromBlocks.ts b/app/src/features/privacy-settings/service/removeFromBlocks.ts
index b051b964..a1e2c65c 100644
--- a/app/src/features/privacy-settings/service/removeFromBlocks.ts
+++ b/app/src/features/privacy-settings/service/removeFromBlocks.ts
@@ -10,6 +10,7 @@ async function removeFromBlock(data: requestType) {
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
   });
 
diff --git a/app/src/features/profile-settings/services/DeleteProfilePicture.ts b/app/src/features/profile-settings/services/DeleteProfilePicture.ts
index 1181b42d..ac3b20c3 100644
--- a/app/src/features/profile-settings/services/DeleteProfilePicture.ts
+++ b/app/src/features/profile-settings/services/DeleteProfilePicture.ts
@@ -4,6 +4,9 @@ async function DeleteProfilePicture() {
   const res = await fetch(`${API_URL}/users/picture`, {
     method: "DELETE",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
 
   const data = await res.json();
diff --git a/app/src/features/profile-settings/services/GetProfileSettings.ts b/app/src/features/profile-settings/services/GetProfileSettings.ts
index 705b6985..cd45ca3a 100644
--- a/app/src/features/profile-settings/services/GetProfileSettings.ts
+++ b/app/src/features/profile-settings/services/GetProfileSettings.ts
@@ -5,6 +5,7 @@ async function GetProfileSettings() {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     credentials: "include",
   });
diff --git a/app/src/features/profile-settings/services/UpdateProfilePicture.ts b/app/src/features/profile-settings/services/UpdateProfilePicture.ts
index c90fde4b..303c1c0b 100644
--- a/app/src/features/profile-settings/services/UpdateProfilePicture.ts
+++ b/app/src/features/profile-settings/services/UpdateProfilePicture.ts
@@ -9,6 +9,9 @@ async function UpdateProfilePicture(imageFile: File) {
       method: "PATCH",
       body: formData,
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!response.ok) {
diff --git a/app/src/features/profile-settings/services/UpdateProfileSettings.ts b/app/src/features/profile-settings/services/UpdateProfileSettings.ts
index d84335d6..4349cb9e 100644
--- a/app/src/features/profile-settings/services/UpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/services/UpdateProfileSettings.ts
@@ -15,6 +15,7 @@ async function UpdateProfileSettings(newProfileSettings: EditProfileForm) {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
     body: JSON.stringify(formattedNewProfileSettings),
     credentials: "include",
diff --git a/app/src/features/stories/services/deleteStory.ts b/app/src/features/stories/services/deleteStory.ts
index 7963deb8..ddf414a3 100644
--- a/app/src/features/stories/services/deleteStory.ts
+++ b/app/src/features/stories/services/deleteStory.ts
@@ -4,6 +4,9 @@ async function DeleteStory(storyId: string) {
   const res = await fetch(`${API_URL}/users/stories/${storyId}`, {
     method: "DELETE",
     credentials: "include",
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
   });
 
   const data = await res.json();
diff --git a/app/src/features/stories/services/getMyStories.ts b/app/src/features/stories/services/getMyStories.ts
index 3980661b..11a312ed 100644
--- a/app/src/features/stories/services/getMyStories.ts
+++ b/app/src/features/stories/services/getMyStories.ts
@@ -5,6 +5,9 @@ async function getMyStories() {
     const response = await fetch(`${API_URL}/users/stories/me`, {
       method: "GET",
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!response.ok) {
diff --git a/app/src/features/stories/services/getStories.ts b/app/src/features/stories/services/getStories.ts
index f7014ffc..4596bbef 100644
--- a/app/src/features/stories/services/getStories.ts
+++ b/app/src/features/stories/services/getStories.ts
@@ -5,6 +5,9 @@ async function getStories() {
     const response = await fetch(`${API_URL}/users/stories`, {
       method: "GET",
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!response.ok) {
diff --git a/app/src/features/stories/services/getViews.ts b/app/src/features/stories/services/getViews.ts
index 674a4a6e..26aa5092 100644
--- a/app/src/features/stories/services/getViews.ts
+++ b/app/src/features/stories/services/getViews.ts
@@ -5,6 +5,9 @@ async function getViews(storyId: string) {
     const response = await fetch(`${API_URL}/stories/${storyId}/views`, {
       method: "GET",
       credentials: "include",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
     });
 
     if (!response.ok) {
diff --git a/app/src/features/stories/services/postStory.ts b/app/src/features/stories/services/postStory.ts
index 0e6f7473..85322de4 100644
--- a/app/src/features/stories/services/postStory.ts
+++ b/app/src/features/stories/services/postStory.ts
@@ -9,6 +9,9 @@ async function postStory(story: File, caption: string) {
     const response = await fetch(`${API_URL}/users/stories`, {
       method: "POST",
       body: formData,
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
       credentials: "include",
     });
 
diff --git a/app/src/features/stories/services/viewStory.ts b/app/src/features/stories/services/viewStory.ts
index 0f88bb8d..b54c0589 100644
--- a/app/src/features/stories/services/viewStory.ts
+++ b/app/src/features/stories/services/viewStory.ts
@@ -4,6 +4,9 @@ async function viewStory(storyId: string) {
   try {
     const response = await fetch(`${API_URL}/stories/${storyId}/views`, {
       method: "POST",
+      headers: {
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
       credentials: "include",
     });
 
diff --git a/app/src/state/user/user.ts b/app/src/state/user/user.ts
index d837d922..9186df79 100644
--- a/app/src/state/user/user.ts
+++ b/app/src/state/user/user.ts
@@ -34,7 +34,7 @@ const initialState: userState = {
     status: "",
     bio: "",
   },
-  
+
   privacySettings: {
     storiesSeenPrivacy: privacyStates.EVERYONE,
     lastSeenPrivacy: privacyStates.EVERYONE,
@@ -55,34 +55,34 @@ const userSlice = createSlice({
   reducers: {
     setUserInfo: (
       state: userState,
-      action: PayloadAction<userInfoInterface>
+      action: PayloadAction<userInfoInterface>,
     ) => {
       state.userInfo = action.payload;
     },
     updateUserPrivacy: (
       state: userState,
-      action: PayloadAction<updatePrivacyInterface>
+      action: PayloadAction<updatePrivacyInterface>,
     ) => {
       const { key, value } = action.payload;
       state.privacySettings[key] = privacyStates[value];
     },
     updateUserInfo: (
       state: userState,
-      action: PayloadAction<updateInfoInterface>
+      action: PayloadAction<updateInfoInterface>,
     ) => {
       const { key, value } = action.payload;
       state.userInfo[key] = value;
     },
     updateUserActivity: (
       state: userState,
-      action: PayloadAction<updateActivityInterface>
+      action: PayloadAction<updateActivityInterface>,
     ) => {
       const { key, value } = action.payload;
       state.activitySettings[key] = activeStates[value];
     },
     updateUserPermission: (
       state: userState,
-      action: PayloadAction<updatePermissionInterface>
+      action: PayloadAction<updatePermissionInterface>,
     ) => {
       const { key, value } = action.payload;
       state.permissionSettings[key] = permissionStates[value];

From 04439e2c2c9192e722473314ea5ae3fb46cfdd3c Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sat, 30 Nov 2024 19:42:11 +0200
Subject: [PATCH 044/136] :bug: (privacySettings): fixing test-id doesn't
 appear bug (#80)

---
 .../settings/side-bar-row/SideBarRow.tsx      | 57 +++++++++++--------
 app/src/data/sideBar.ts                       |  7 +++
 app/src/state/user/user.ts                    |  1 +
 app/src/types/sideBar.ts                      |  1 +
 app/src/types/user.ts                         |  1 +
 5 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index 0203f8e0..a9c2a2dd 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -73,23 +73,13 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
   const renderedIcon = getIcon(icon);
 
   const [currStatus, setCurrStatus] = useState<string | undefined>(undefined);
-  let key:
-    | {
-        id: keyof privacySettingsInterface;
-        name: string;
-        subtitle: string;
-      }
-    | {
-        id: keyof activitySettingsInterface;
-        name: string;
-        subtitle: string;
-      }
-    | {
-        id: keyof permissionsSettingsInterface;
-        name: string;
-        subtitle: string;
-      }
-    | undefined;
+  const [key, setKey] = useState<
+    | keyof privacySettingsInterface
+    | keyof activitySettingsInterface
+    | keyof permissionsSettingsInterface
+    | string
+    | undefined
+  >(undefined);
 
   const dataExtractor: DataInterface = ExtractData(type, currStatus, status);
   const data = dataExtractor.getData();
@@ -98,31 +88,48 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
     if (status !== undefined && type !== undefined) {
       switch (type) {
         case StatusType.PRIVACY:
-          key = statusMap.privacy[status];
-          setCurrStatus(userData?.privacySettings?.[key.id] || "everyone");
+          setKey(statusMap.privacy[status].id);
+          if (status === privacySettingsID.BLOCK_PRIVACY)
+            setCurrStatus(undefined);
+          else
+            setCurrStatus(
+              userData?.privacySettings?.[
+                key as keyof privacySettingsInterface
+              ] || "everyone"
+            );
           break;
         case StatusType.ACTIVITY:
-          key = statusMap.activity[status as activitySettingsID];
-          setCurrStatus(userData?.activitySettings?.[key.id] || "everyone");
+          setKey(statusMap.activity[status as activitySettingsID].id);
+          setCurrStatus(
+            userData?.activitySettings?.[
+              key as keyof activitySettingsInterface
+            ] || "everyone"
+          );
           break;
         case StatusType.PERMISSION:
-          key = statusMap.permission[status as permissionSettingsID];
-          setCurrStatus(userData?.permissionSettings?.[key.id] || "everyone");
+          setKey(statusMap.permission[status as permissionSettingsID].id);
+          setCurrStatus(
+            userData?.permissionSettings?.[
+              key as keyof permissionsSettingsInterface
+            ] || "everyone"
+          );
           break;
         default:
+          if (title === "Blocked Users") setKey("block");
+
           throw new Error("Type not valid");
       }
     } else {
       setCurrStatus(undefined);
     }
-  }, [userData, status]);
+  });
 
   return (
     <StyledSideBarRow
       onClick={() =>
         redirect && dispatch(updateSideBarView({ redirect, data }))
       }
-      data-testid={key && `menu-item-${key.id}`}
+      data-testid={key && `menu-item-${key}`}
     >
       <RowInfo>
         {renderedIcon}
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 7b4220a8..1ade1869 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -18,6 +18,11 @@ const privacySettingsMap: Record<
   privacySettingsID,
   { id: keyof privacySettingsInterface; name: string; subtitle: string }
 > = {
+  [privacySettingsID.BLOCK_PRIVACY]: {
+    id: "blockPrivacy",
+    subtitle: "",
+    name: "Block List",
+  },
   [privacySettingsID.STORIES_SEEN_PRIVACY]: {
     id: "storiesSeenPrivacy",
     subtitle: "Who can see my stories?",
@@ -105,6 +110,8 @@ const privacySettingsRows = [
     icon: "BlockIcon",
     title: "Blocked Users",
     redirect: sideBarPages.BLOCKED_USERS,
+    type: StatusType.PRIVACY,
+    status: privacySettingsID.BLOCK_PRIVACY,
   },
   {
     title: "Who can see my stories?",
diff --git a/app/src/state/user/user.ts b/app/src/state/user/user.ts
index 9186df79..3ae1e328 100644
--- a/app/src/state/user/user.ts
+++ b/app/src/state/user/user.ts
@@ -39,6 +39,7 @@ const initialState: userState = {
     storiesSeenPrivacy: privacyStates.EVERYONE,
     lastSeenPrivacy: privacyStates.EVERYONE,
     profilePhotoPrivacy: privacyStates.EVERYONE,
+    blockPrivacy: "",
   },
   activitySettings: {
     readReceiptsPrivacy: activeStates.ENABLED,
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 9e6a310d..6b4bcfdc 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -15,6 +15,7 @@ enum privacySettingsID {
   STORIES_SEEN_PRIVACY,
   LAST_SEEN_PRIVACY,
   PROFILE_PHOTO_PRIVACY,
+  BLOCK_PRIVACY,
 }
 
 enum activitySettingsID {
diff --git a/app/src/types/user.ts b/app/src/types/user.ts
index c21d1623..fe599e13 100644
--- a/app/src/types/user.ts
+++ b/app/src/types/user.ts
@@ -11,6 +11,7 @@ interface privacySettingsInterface {
   storiesSeenPrivacy: privacyStates;
   lastSeenPrivacy: privacyStates;
   profilePhotoPrivacy: privacyStates;
+  blockPrivacy: string;
 }
 
 interface activitySettingsInterface {

From 8a214d5999906a1e234a9a4bf3890e6bac0fe4de Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sat, 30 Nov 2024 20:00:44 +0200
Subject: [PATCH 045/136] :bug: (messaging) : adding missing testids (#81)

* :bug: (privacySettings): fixing test-id doesn't appear bug

* :bug: (messaging) : adding missing testids
---
 app/src/features/forward/ForwardingInputBar.tsx | 4 ++--
 app/src/features/forward/ScrollableChats.tsx    | 2 +-
 app/src/features/forward/chatPopupItem.tsx      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
index ee33f9ee..59cd4c65 100644
--- a/app/src/features/forward/ForwardingInputBar.tsx
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -42,11 +42,11 @@ function ForwardingInputBar(props: Props) {
 
   return (
     <Wrapper>
-      <IconButton onClick={onClose}>
+      <IconButton onClick={onClose} test-id="close-icon">
         <Icon>{getIcon("Close")}</Icon>
       </IconButton>
       <StyledHeader>{selectedMessages.length} messages selected</StyledHeader>
-      <IconButton onClick={onForward}>
+      <IconButton onClick={onForward} test-id="forward-icon">
         <Icon>{getIcon("Forward")}</Icon>
       </IconButton>
     </Wrapper>
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index c9750b54..3bc75938 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -77,7 +77,7 @@ function ScrollableChats(props: Props) {
   return (
     <OuterContainer>
       <HeaderRow>
-        <IconWrapper onClick={onClose}>
+        <IconWrapper onClick={onClose} test-id="close-icon">
           <Icon>{getIcon("Close")}</Icon>
         </IconWrapper>
         <Heading as="h4">Forward To...</Heading>
diff --git a/app/src/features/forward/chatPopupItem.tsx b/app/src/features/forward/chatPopupItem.tsx
index e16a508e..0f130d3a 100644
--- a/app/src/features/forward/chatPopupItem.tsx
+++ b/app/src/features/forward/chatPopupItem.tsx
@@ -70,9 +70,9 @@ export interface ChatPopupItemProps {
   username: string;
 }
 
-function ChatPopupItem({ id, name, username }: ChatPopupItemProps) {
+function ChatPopupItem({ name, username }: ChatPopupItemProps) {
   return (
-    <StyledSideBarRow data-testid={`open-block-option-${id}`}>
+    <StyledSideBarRow>
       <RowInfo>
         <FancyAvatar name={name[0]} />
         <InnerDiv>

From 526d2f4576608af37f790b2c68e151fa1c60b619 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sat, 30 Nov 2024 21:51:16 +0200
Subject: [PATCH 046/136] :sparkles: (messaging): Reply totally done + code
 refactoring (#82)

* :sparkles: (reply): replying on messages is working

* git commit -m ":bug: (reply): fixing initial message"

* :bug: (messaging): fixing  reply unworking  bug

* :lipstick: (messaging): enhancing reply ui

* :recycle: (messaging): refactoring messaging component

* :recycle: (messaging): completing message refactoring
---
 app/src/features/chats/ChatInput.tsx          |   3 +-
 app/src/features/chats/Message.tsx            | 109 +++++++++---------
 app/src/features/chats/MessageBox.tsx         | 102 ++++++++++++++++
 app/src/features/chats/ReplyWrapper.tsx       |  56 ++-------
 app/src/features/chats/hooks/useHover.ts      |  18 +++
 .../features/chats/hooks/useMessageSender.ts  |  18 +--
 .../chats/hooks/useOptionListAction.ts        |  43 +++++++
 app/src/features/forward/hooks/useCheckBox.ts |  30 +++++
 app/src/types/messages.ts                     |   2 +
 9 files changed, 266 insertions(+), 115 deletions(-)
 create mode 100644 app/src/features/chats/MessageBox.tsx
 create mode 100644 app/src/features/chats/hooks/useHover.ts
 create mode 100644 app/src/features/chats/hooks/useOptionListAction.ts
 create mode 100644 app/src/features/forward/hooks/useCheckBox.ts

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index a3609d0b..a1ee397e 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -80,7 +80,8 @@ function ChatInput() {
   const [input, setInput] = useState<string>("");
 
   useEffect(() => {
-    if (activeMessage?.content) setInput(activeMessage?.content);
+    if (activeMessage.state === "edit" && activeMessage?.content)
+      setInput(activeMessage?.content);
   }, [activeMessage]);
 
   const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 704e5791..5241fd9f 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -1,18 +1,14 @@
-import { useEffect, useState, useRef, MouseEvent } from "react";
-import { useSelector } from "react-redux";
+import { useEffect, useRef } from "react";
 import styled from "styled-components";
 
 import {
   setShowCheckBox,
   setIsOptionListOpen,
-  SelectMessage,
-  removeSelectedMessage,
   pinMessage,
   unpinMessage,
 } from "@state/messages/messages";
 
 import { MessageInterface } from "types/messages";
-import { RootState } from "@state/store";
 
 import { getIcon } from "@data/icons";
 
@@ -24,8 +20,11 @@ import renderWithHighlight from "@utils/renderWithHighlight";
 
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
-import { setActiveMessage } from "@state/messages/activeMessage";
 import { useSocket } from "@hooks/useSocket";
+import MessageBox from "./MessageBox";
+import useCheckBox from "@features/forward/hooks/useCheckBox";
+import useHover from "./hooks/useHover";
+import useOptionListAction from "./hooks/useOptionListAction";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -34,6 +33,11 @@ const StyledMessage = styled.div<{ $isMine: boolean }>`
   width: 100%;
   ${({ $isMine }) =>
     $isMine ? "justify-content: flex-end;" : "justify-content: flex-start;"}
+
+  &.highlight {
+    background-color: var(--color-chat-hover);
+    transition: background-color 0.5s ease;
+  }
 `;
 
 const Bubble = styled.div<{ $isMine: boolean }>`
@@ -47,11 +51,6 @@ const Bubble = styled.div<{ $isMine: boolean }>`
   height: fit-content;
   position: relative;
 
-  background-color: ${({ $isMine }) =>
-    $isMine
-      ? "linear-gradient(135deg, var(--color-background-own-1), var(--color-background-own-2), var(--color-background-own-3), var(--color-background-own-4))"
-      : "var(--color-background)"};
-
   background: ${({ $isMine }) =>
     $isMine
       ? "linear-gradient(to bottom, var(--color-background-own-1), var(--color-background-own-2), var(--color-background-own-3), var(--color-background-own-4))"
@@ -86,6 +85,16 @@ const CheckBoxWrapper = styled.div`
   align-self: center;
 `;
 
+const MessageBoxWrapper = styled.div`
+  display: block;
+`;
+
+const StyledCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
 const TimeStamp = styled.div<{ $isMine: boolean }>`
   font-size: x-small;
   font-size: x-small;
@@ -115,16 +124,24 @@ type MessageProps = {
 function Message({
   index,
   messagesLength,
-  data: { id, senderId, content, isOptionListOpen, isPinned, chatId },
+  data: {
+    id,
+    senderId,
+    content,
+    isOptionListOpen,
+    isPinned,
+    chatId,
+    isReply,
+    replyMessageId,
+  },
 }: MessageProps) {
-  const { searchTerm, searchResults, currentResultIndex } = useSelector(
-    (state: RootState) => state.search
+  const { searchTerm, searchResults, currentResultIndex } = useAppSelector(
+    (state) => state.search
   );
 
   const mergedRef = useRef<HTMLDivElement>(null);
   const { lastMessageRef } = useScrollToLastMsg();
   const { searchResultRef } = useScrollToSearchResultsMsg();
-  const [isHovered, setIsHovered] = useState(false);
 
   const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
     useSocket();
@@ -150,29 +167,13 @@ function Message({
     messagesLength,
   ]);
 
-  const userId = useSelector((state: RootState) => state.user.userInfo.id);
-
-  const showCheckbox = useSelector(
-    (state: RootState) => state.messages.showCheckBox
-  );
+  const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({ id });
+  const { isHovered, handleMouseLeave, handleOpenList } = useHover();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const { handleEditMessage, handleReply, MoveToReplyMessage } =
+    useOptionListAction({ id, content, replyMessageId });
   const dispatch = useAppDispatch();
 
-  const [isChecked, setIsChecked] = useState<boolean>(false);
-  const showCheckBox = useAppSelector((state) => state.messages.showCheckBox);
-
-  useEffect(() => {
-    setIsChecked(isChecked && showCheckBox);
-  }, [showCheckBox]);
-
-  function toggleCheckBox() {
-    if (!isChecked) {
-      dispatch(SelectMessage({ id: id }));
-    } else {
-      dispatch(removeSelectedMessage({ id: id }));
-    }
-    setIsChecked(!isChecked);
-  }
-
   function pinOnClick() {
     if (isPinned) {
       dispatch(unpinMessage({ messageId: id, chatId: chatId }));
@@ -184,30 +185,13 @@ function Message({
   }
 
   function forwardOnClick() {
-    dispatch(setShowCheckBox({ showCheckBox: !showCheckbox }));
+    dispatch(setShowCheckBox({ showCheckBox: !showCheckBox }));
     dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
   }
 
-  function handleEditMessage() {
-    dispatch(setActiveMessage({ id, content, state: "edit" }));
-  }
-
-  function handleReply() {
-    dispatch(setActiveMessage({ id, content, state: "reply" }));
-  }
-
-  function handleMouseLeave() {
-    setIsHovered(false);
-  }
-
-  function handleOpenList(e: MouseEvent<HTMLDivElement>) {
-    e.preventDefault();
-    setIsHovered(true);
-  }
-
   return (
     <MessageRow $isChecked={isChecked}>
-      {showCheckbox && (
+      {showCheckBox && (
         <CheckBoxWrapper>
           <CheckBox id={id} isChecked={isChecked} onChange={toggleCheckBox} />
         </CheckBoxWrapper>
@@ -223,14 +207,25 @@ function Message({
         onContextMenu={handleOpenList}
       >
         <Bubble $isMine={senderId === userId}>
-          {renderWithHighlight(content, searchTerm, searchResults, id)}
+          <StyledCol>
+            {isReply && (
+              <MessageBoxWrapper
+                onClick={MoveToReplyMessage}
+                test-id={`reply-box-${id}`}
+              >
+                <MessageBox messageId={replyMessageId} />
+              </MessageBoxWrapper>
+            )}
+            {renderWithHighlight(content, searchTerm, searchResults, id)}
+          </StyledCol>
+
           {isHovered && (
             <MessageOptionList
               $isMine={senderId === userId}
               forwardOnClick={forwardOnClick}
               isPinned={isPinned}
               pinOnClick={pinOnClick}
-              replyOnClick={handleReply} //TODO: Implement replyOnClick
+              replyOnClick={handleReply}
               editOnClick={handleEditMessage}
             />
           )}
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
new file mode 100644
index 00000000..9305e617
--- /dev/null
+++ b/app/src/features/chats/MessageBox.tsx
@@ -0,0 +1,102 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { allChats } from "@mocks/data/chats";
+import { RootState } from "@state/store";
+import styled from "styled-components";
+import { MessageInterface } from "types/messages";
+
+interface MessageBoxProps {
+  messageId?: string | null;
+}
+
+const State = styled.div`
+  color: var(--accent-color);
+  text-transform: capitalize;
+`;
+
+const Message = styled.div`
+  font-size: smaller;
+  color: var(--color-text);
+  opacity: 0.9;
+`;
+
+const StyledMessageBox = styled.div`
+  line-height: 1rem;
+
+  background-color: var(--color-background-compact-menu);
+
+  position: relative;
+  flex: 1 1;
+
+  border-left: var(--accent-color) 3px solid;
+  border-radius: 5px;
+
+  padding: 7px 0.5rem;
+
+  &:hover {
+    background-color: var(--color-background-compact-menu-hover);
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 1px;
+    height: 100%;
+
+    background-color: var(--accent-color);
+  }
+`;
+
+function extractMessageData(
+  messages: MessageInterface[],
+  messageId: string,
+  id: string
+) {
+  const msg = getMessageById(messages, messageId);
+  let name: string | undefined;
+
+  if (id === msg?.senderId) name = "you";
+  else {
+    const chat =
+      msg && allChats.find((chat) => chat.id.toString() === msg?.senderId);
+    name = chat?.name;
+  }
+
+  return { msg, name };
+}
+
+function getMessageById(
+  messages: MessageInterface[],
+  messageId: string
+): MessageInterface | undefined {
+  return messages.find((message) => message.id === messageId);
+}
+
+function MessageBox({ messageId }: MessageBoxProps) {
+  let id = useAppSelector((state) => state.user.userInfo.id);
+  const messages = useAppSelector((state) => state.messages.messages);
+
+  let msg: MessageInterface | undefined;
+  let name: string | undefined;
+
+  if (messageId) {
+    const data = extractMessageData(messages, messageId, id);
+    msg = data.msg;
+    name = data.name;
+  }
+
+  const activeMessage = useAppSelector(
+    (state: RootState) => state.activeMessage
+  );
+
+  return (
+    <StyledMessageBox>
+      <State>{name ? name : `${activeMessage.state}ing`}</State>
+      <Message>{msg ? msg.content : activeMessage.content}</Message>
+    </StyledMessageBox>
+  );
+}
+
+export default MessageBox;
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index e2b3a425..520c99d4 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -1,11 +1,12 @@
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 
 import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
 
 import { clearActiveMessage } from "@state/messages/activeMessage";
-import { RootState } from "@state/store";
+import { useAppSelector } from "@hooks/useGlobalState";
+import MessageBox from "./MessageBox";
 
 const Container = styled.div`
   display: flex;
@@ -20,54 +21,14 @@ const Container = styled.div`
   }
 `;
 
-const MessageBox = styled.div`
-  line-height: 1rem;
-
-  background-color: var(--color-background-compact-menu);
-
-  position: relative;
-  flex: 1 1;
-
-  border-left: var(--accent-color) 3px solid;
-  border-radius: 5px;
-
-  padding: 7px 0.5rem;
-
-  &:hover {
-    background-color: var(--color-background-compact-menu-hover);
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 1px;
-    height: 100%;
-
-    background-color: var(--accent-color);
-  }
-`;
-
-const State = styled.div`
-  color: var(--accent-color);
-  text-transform: capitalize;
-`;
-
-const Message = styled.div`
-  font-size: smaller;
-  color: var(--color-text);
-  opacity: 0.9;
-`;
-
 type Props = {
   setInput: (state: string) => void;
 };
 
 export default function ReplyWrapper({ setInput }: Props) {
   const dispatch = useDispatch();
-  const activeMessage = useSelector((state: RootState) => state.activeMessage);
+
+  const activeMessage = useAppSelector((state) => state.activeMessage);
 
   function handleHideWrapper() {
     dispatch(clearActiveMessage());
@@ -77,11 +38,8 @@ export default function ReplyWrapper({ setInput }: Props) {
   return (
     <Container>
       <Icon>{getIcon(activeMessage.state === "edit" ? "Edit" : "Reply")}</Icon>
-      <MessageBox>
-        <State>{`${activeMessage.state}ing`}</State>
-        <Message>{activeMessage.content}</Message>
-      </MessageBox>
-      <Icon onClick={handleHideWrapper}>{getIcon("Close")}</Icon>
+      <MessageBox />
+      <Icon onClick={handleHideWrapper} test-id="close-icon">{getIcon("Close")}</Icon>
     </Container>
   );
 }
diff --git a/app/src/features/chats/hooks/useHover.ts b/app/src/features/chats/hooks/useHover.ts
new file mode 100644
index 00000000..afb8f78c
--- /dev/null
+++ b/app/src/features/chats/hooks/useHover.ts
@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+function useHover() {
+  const [isHovered, setIsHovered] = useState(false);
+
+  function handleMouseLeave() {
+    setIsHovered(false);
+  }
+
+  function handleOpenList(e: React.MouseEvent<HTMLDivElement>) {
+    e.preventDefault();
+    setIsHovered(true);
+  }
+
+  return { isHovered, handleMouseLeave, handleOpenList };
+}
+
+export default useHover;
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 1c7b1d7e..a917957d 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,24 +1,24 @@
 import { useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
-
-import { RootState } from "@state/store";
-
 import { useSocket } from "@hooks/useSocket";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { MessageInterface } from "types/messages";
 
 export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
-  const userId = useSelector((state: RootState) => state.user.userInfo.id);
-  const activeMessage = useSelector((state: RootState) => state.activeMessage);
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const activeMessage = useAppSelector((state) => state.activeMessage);
   const { chatId } = useParams<{ chatId: string }>();
 
   const handleSendMessage = (data: string) => {
-    if (activeMessage?.id) {
+    if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id!, data, chatId!);
       return;
     }
 
+    const isReply = activeMessage.state === "reply";
+
     if (data) {
-      const message = {
+      const message: MessageInterface = {
         id: "",
         content: data,
         senderId: userId,
@@ -32,6 +32,8 @@ export const useMessageSender = () => {
         deleteType: 2,
         status: 0,
         isOptionListOpen: false,
+        isReply: isReply,
+        replyMessageId: isReply ? activeMessage.id : null,
       };
       sendMessage(message);
     }
diff --git a/app/src/features/chats/hooks/useOptionListAction.ts b/app/src/features/chats/hooks/useOptionListAction.ts
new file mode 100644
index 00000000..b190aa24
--- /dev/null
+++ b/app/src/features/chats/hooks/useOptionListAction.ts
@@ -0,0 +1,43 @@
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { setActiveMessage } from "@state/messages/activeMessage";
+
+function useOptionListAction({
+  id,
+  content,
+  replyMessageId,
+}: {
+  id: string;
+  content: string;
+  replyMessageId: string | null;
+}) {
+  const dispatch = useAppDispatch();
+  function handleEditMessage() {
+    dispatch(setActiveMessage({ id, content, state: "edit" }));
+  }
+
+  function handleReply() {
+    dispatch(setActiveMessage({ id, content, state: "reply" }));
+  }
+
+  function MoveToReplyMessage() {
+    const targetMsg = document.querySelector(
+      "[data-message-id='" + replyMessageId + "']"
+    );
+
+    if (targetMsg) {
+      targetMsg.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+
+      targetMsg.classList.add("highlight");
+
+      setTimeout(() => {
+        targetMsg.classList.remove("highlight");
+      }, 2000);
+    }
+  }
+  return { handleEditMessage, handleReply, MoveToReplyMessage };
+}
+
+export default useOptionListAction;
diff --git a/app/src/features/forward/hooks/useCheckBox.ts b/app/src/features/forward/hooks/useCheckBox.ts
new file mode 100644
index 00000000..dd2b7779
--- /dev/null
+++ b/app/src/features/forward/hooks/useCheckBox.ts
@@ -0,0 +1,30 @@
+import { useAppSelector, useAppDispatch } from "@hooks/useGlobalState";
+import { SelectMessage, removeSelectedMessage } from "@state/messages/messages";
+import { useState, useEffect } from "react";
+
+function useCheckBox({ id }: { id: string }) {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const showCheckBox = useAppSelector((state) => state.messages.showCheckBox);
+
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    setIsChecked(isChecked && showCheckBox);
+  }, [showCheckBox]);
+
+  function toggleCheckBox() {
+    if (!isChecked) {
+      dispatch(SelectMessage({ id: id }));
+    } else {
+      dispatch(removeSelectedMessage({ id: id }));
+    }
+    setIsChecked(!isChecked);
+  }
+
+  return {
+    isChecked,
+    toggleCheckBox,
+    showCheckBox,
+  };
+}
+
+export default useCheckBox;
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 10649367..26d5299f 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -31,4 +31,6 @@ export interface MessageInterface {
   deleteType: DeleteType;
   status: MessageStatus;
   isOptionListOpen: boolean;
+  isReply: boolean;
+  replyMessageId: string | null;
 }

From b956381cc1853e0eb22862485dcae7657beb5262 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sat, 30 Nov 2024 23:25:36 +0200
Subject: [PATCH 047/136] feat: addmedia to messages (#83)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/components/Modal.tsx                  |  30 ++++--
 app/src/features/chats/ChatInput.tsx          |  79 +++++++++-----
 app/src/features/chats/Message.tsx            |   6 +-
 .../features/chats/hooks/useMessageSender.ts  |   5 +-
 .../chats/media/FileDetailsBanner.tsx         |  50 +++++++++
 .../features/chats/media/FilePreviewItem.tsx  |  90 ++++++++++++++++
 app/src/features/chats/media/FileViewer.tsx   | 101 ++++++++++++++++++
 .../chats/media/MediaUploadComponent.tsx      |  49 +++++++++
 app/src/mocks/chats/media.ts                  |  30 ++++++
 app/src/mocks/handlers.ts                     |   2 +
 app/src/types/media.ts                        |   1 +
 app/src/types/messages.ts                     |   1 +
 app/src/utils/uploadfileHandler.ts            |  28 +++++
 13 files changed, 432 insertions(+), 40 deletions(-)
 create mode 100644 app/src/features/chats/media/FileDetailsBanner.tsx
 create mode 100644 app/src/features/chats/media/FilePreviewItem.tsx
 create mode 100644 app/src/features/chats/media/FileViewer.tsx
 create mode 100644 app/src/features/chats/media/MediaUploadComponent.tsx
 create mode 100644 app/src/mocks/chats/media.ts
 create mode 100644 app/src/types/media.ts
 create mode 100644 app/src/utils/uploadfileHandler.ts

diff --git a/app/src/components/Modal.tsx b/app/src/components/Modal.tsx
index 3df379a5..fa3fb7fb 100644
--- a/app/src/components/Modal.tsx
+++ b/app/src/components/Modal.tsx
@@ -1,3 +1,4 @@
+import React, { useRef } from "react";
 import styled from "styled-components";
 
 const ModalOverlay = styled.div`
@@ -48,11 +49,28 @@ const CloseButton = styled.button`
   }
 `;
 
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  message: string;
+  children: React.ReactNode;
+};
+
 function Modal({ onClose, isOpen, title, message, children }: ModalProps) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  const handleClickOutside = (e: React.MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+      onClose();
+    }
+  };
+
   if (!isOpen) return null;
+
   return (
-    <ModalOverlay>
-      <ModalContainer>
+    <ModalOverlay onClick={handleClickOutside}>
+      <ModalContainer ref={modalRef}>
         <CloseButton type="button" onClick={onClose} data-testid="close-button">
           &times;
         </CloseButton>
@@ -63,11 +81,5 @@ function Modal({ onClose, isOpen, title, message, children }: ModalProps) {
     </ModalOverlay>
   );
 }
-type ModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  message: string;
-  children: React.ReactNode;
-};
+
 export default Modal;
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index a1ee397e..f7b92929 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -18,6 +18,8 @@ import EmojiPickerItem from "./emojies/EmojiPicker";
 import { useMessageSender } from "./hooks/useMessageSender";
 import ReplyWrapper from "./ReplyWrapper";
 import { clearActiveMessage } from "@state/messages/activeMessage";
+import MediaUploadComponent from "./media/MediaUploadComponent";
+import FilePreviewItem from "./media/FilePreviewItem";
 
 const Container = styled.div`
   z-index: 1;
@@ -78,7 +80,9 @@ const Input = styled.div`
 function ChatInput() {
   const activeMessage = useSelector((state: RootState) => state.activeMessage);
   const [input, setInput] = useState<string>("");
-
+  const [file, setFile] = useState<File | string>(null);
+  const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
+  console.log(file, isFilePreviewOpen);
   useEffect(() => {
     if (activeMessage.state === "edit" && activeMessage?.content)
       setInput(activeMessage?.content);
@@ -94,7 +98,7 @@ function ChatInput() {
   };
 
   const handleSubmit = () => {
-    handleSendMessage(input);
+    handleSendMessage(input, "");
     dispatch(clearActiveMessage());
     setInput("");
   };
@@ -113,35 +117,54 @@ function ChatInput() {
   function handleForward() {
     setShowForwardUsers(true);
   }
+  function handleCloseFilePreview() {
+    setFile(null);
+    setIsFilePreviewOpen(false);
+  }
 
   return (
-    <Container>
-      {!showCheckBox ? (
-        <Input>
-          {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
-          <InputContainer>
-            {activeMessage.id && <ReplyWrapper setInput={setInput} />}
-            <InputWrapper>
-              <InvisibleButton onClick={toggleShowEmojies}>
-                <Icon>{getIcon("Emojie")}</Icon>
-              </InvisibleButton>
-
-              <ExpandingTextArea input={input} setInput={setInput} />
-              <Icon>{getIcon("Attatch")}</Icon>
-            </InputWrapper>
-          </InputContainer>
-
-          <RecordInput
-            onClick={handleSubmit}
-            type={!input ? "record" : "message"}
-          />
-        </Input>
-      ) : (
-        <ForwardingInputBar onClose={handleClose} onForward={handleForward} />
+    <>
+      {isFilePreviewOpen && file && (
+        <FilePreviewItem
+          file={file}
+          handleCloseFilePreview={handleCloseFilePreview}
+          handleSendMessage={handleSendMessage}
+          setFile={setFile}
+        />
       )}
-
-      {showForwardUsers && <ScrollableChats onClose={handleClose} />}
-    </Container>
+      <Container>
+        {!showCheckBox ? (
+          <Input>
+            {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
+
+            <InputContainer>
+              {activeMessage.id && <ReplyWrapper setInput={setInput} />}
+              <InputWrapper>
+                <InvisibleButton onClick={toggleShowEmojies}>
+                  <Icon>{getIcon("Emojie")}</Icon>
+                </InvisibleButton>
+
+                <ExpandingTextArea input={input} setInput={setInput} />
+                <MediaUploadComponent
+                  file={file}
+                  setFile={setFile}
+                  setIsFilePreviewOpen={setIsFilePreviewOpen}
+                />
+              </InputWrapper>
+            </InputContainer>
+
+            <RecordInput
+              onClick={handleSubmit}
+              type={!input ? "record" : "message"}
+            />
+          </Input>
+        ) : (
+          <ForwardingInputBar onClose={handleClose} onForward={handleForward} />
+        )}
+
+        {showForwardUsers && <ScrollableChats onClose={handleClose} />}
+      </Container>
+    </>
   );
 }
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 5241fd9f..282d451b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -25,6 +25,7 @@ import MessageBox from "./MessageBox";
 import useCheckBox from "@features/forward/hooks/useCheckBox";
 import useHover from "./hooks/useHover";
 import useOptionListAction from "./hooks/useOptionListAction";
+import FileViewer from "./media/FileViewer";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -133,6 +134,7 @@ function Message({
     chatId,
     isReply,
     replyMessageId,
+    media,
   },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useAppSelector(
@@ -158,13 +160,14 @@ function Message({
 
     searchResultRef.current = isCurrentResult ? mergedRef.current : null;
   }, [
-    mergedRef.current,
     searchResults,
     currentResultIndex,
     searchTerm,
     id,
     index,
     messagesLength,
+    lastMessageRef,
+    searchResultRef,
   ]);
 
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({ id });
@@ -216,6 +219,7 @@ function Message({
                 <MessageBox messageId={replyMessageId} />
               </MessageBoxWrapper>
             )}
+            {media && <FileViewer file={media} />}
             {renderWithHighlight(content, searchTerm, searchResults, id)}
           </StyledCol>
 
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index a917957d..10718e38 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -9,7 +9,7 @@ export const useMessageSender = () => {
   const activeMessage = useAppSelector((state) => state.activeMessage);
   const { chatId } = useParams<{ chatId: string }>();
 
-  const handleSendMessage = (data: string) => {
+  const handleSendMessage = (data: string, file: string) => {
     if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id!, data, chatId!);
       return;
@@ -17,7 +17,7 @@ export const useMessageSender = () => {
 
     const isReply = activeMessage.state === "reply";
 
-    if (data) {
+    if (data || file) {
       const message: MessageInterface = {
         id: "",
         content: data,
@@ -34,6 +34,7 @@ export const useMessageSender = () => {
         isOptionListOpen: false,
         isReply: isReply,
         replyMessageId: isReply ? activeMessage.id : null,
+        media: file,
       };
       sendMessage(message);
     }
diff --git a/app/src/features/chats/media/FileDetailsBanner.tsx b/app/src/features/chats/media/FileDetailsBanner.tsx
new file mode 100644
index 00000000..9053f9ba
--- /dev/null
+++ b/app/src/features/chats/media/FileDetailsBanner.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const BannerContainer = styled.div`
+  width: 100%;
+  height: 35%;
+  padding: 8px 16px;
+  margin: 8px 0;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  color: var(--color-text);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const FileName = styled.span`
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 70%;
+`;
+
+const FileSize = styled.span`
+  font-size: 0.85rem;
+  color: #666;
+`;
+
+interface FileDetailsBannerProps {
+  file: File;
+}
+
+function formatFileSize(size: number): string {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const FileDetailsBanner: React.FC<FileDetailsBannerProps> = ({ file }) => {
+  return (
+    <BannerContainer>
+      <FileName title={file.name}>{file.name}</FileName>
+      <FileSize>Size: {formatFileSize(file.size)}</FileSize>
+    </BannerContainer>
+  );
+};
+
+export default FileDetailsBanner;
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
new file mode 100644
index 00000000..ad74c662
--- /dev/null
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -0,0 +1,90 @@
+import styled from "styled-components";
+import FileViewer from "./FileViewer";
+import Modal from "@components/Modal";
+import ExpandingTextArea from "@components/ExpandingTextArea";
+import Button from "@components/Button";
+import { Dispatch, SetStateAction, useState } from "react";
+import FileDetailsBanner from "./FileDetailsBanner";
+import { uploadFileHandler } from "@utils/uploadfileHandler";
+
+const FileViewerContainer = styled.div`
+  z-index: 7;
+  min-width: fit-content;
+  height: fit-content;
+  padding: 4px;
+  background: var(--color-secondary);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`;
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+  padding: 4px;
+  position: relative;
+
+  flex: 1;
+`;
+
+interface FileProps {
+  file: File | string;
+
+  handleCloseFilePreview: () => void;
+  handleSendMessage: (data: string, file: string) => void;
+  setFile: Dispatch<SetStateAction<File | null>>;
+}
+
+function FilePreviewItem({
+  file,
+  handleCloseFilePreview,
+  handleSendMessage,
+  setFile,
+}: FileProps) {
+  const [caption, setCaption] = useState("");
+  const handleSendFile = async () => {
+    if (!file) {
+      console.error("No file selected to send.");
+      return;
+    }
+
+    try {
+      const url = await uploadFileHandler(file);
+      if (!url) {
+        throw new Error("Failed to upload file. No URL returned.");
+      }
+      console.log(url);
+      handleSendMessage(caption, url);
+      setCaption("");
+      setFile(null);
+    } catch (error) {
+      console.error("Error sending file:", error);
+      alert("Failed to send the file. Please try again.");
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={true}
+      onClose={handleCloseFilePreview}
+      title="Send File"
+      message=""
+    >
+      <FileViewerContainer>
+        <FileViewer file={file} />
+      </FileViewerContainer>
+      <FileDetailsBanner file={file} />
+      <InputWrapper>
+        <ExpandingTextArea input={caption} setInput={setCaption} />
+        <Button onClick={handleSendFile}>Send</Button>
+      </InputWrapper>
+    </Modal>
+  );
+}
+
+export default FilePreviewItem;
diff --git a/app/src/features/chats/media/FileViewer.tsx b/app/src/features/chats/media/FileViewer.tsx
new file mode 100644
index 00000000..93cac824
--- /dev/null
+++ b/app/src/features/chats/media/FileViewer.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import styled from "styled-components";
+
+const ViewerContainer = styled.div`
+  padding: 4px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f4f4f4;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  overflow: hidden;
+`;
+
+const Message = styled.p`
+  font-size: 1rem;
+  color: #555;
+`;
+
+interface FileViewerProps {
+  file: File | string;
+}
+
+function getFileType(fileName: string): string {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  if (!extension) return "unknown";
+
+  const imageTypes = ["png", "jpg", "jpeg", "gif", "bmp"];
+  const videoTypes = ["mp4", "webm"];
+  const audioTypes = ["mp3", "wav"];
+  const pdfTypes = ["pdf"];
+
+  if (imageTypes.includes(extension)) return "image";
+  if (videoTypes.includes(extension)) return "video";
+  if (audioTypes.includes(extension)) return "audio";
+  if (pdfTypes.includes(extension)) return "pdf";
+
+  return "unknown";
+}
+
+const FileViewer: React.FC<FileViewerProps> = ({ file }) => {
+  const isFileObject = file instanceof File;
+  const fileName = isFileObject
+    ? (file as File).name
+    : (file as string).split("/").pop() || "";
+  const fileType = getFileType(fileName);
+  const fileURL = isFileObject
+    ? URL.createObjectURL(file as File)
+    : (file as string);
+
+  let renderFilePreview;
+  switch (fileType) {
+    case "image":
+      renderFilePreview = (
+        <img
+          src={fileURL}
+          alt="Preview"
+          style={{ width: "100%", height: "100%", objectFit: "contain" }}
+        />
+      );
+      break;
+
+    case "video":
+      renderFilePreview = (
+        <video controls style={{ width: "100%", height: "100%" }}>
+          <source src={fileURL} type={`video/${fileName.split(".").pop()}`} />
+          Your browser does not support the video tag.
+        </video>
+      );
+      break;
+
+    case "audio":
+      renderFilePreview = (
+        <audio controls>
+          <source src={fileURL} type={`audio/${fileName.split(".").pop()}`} />
+          Your browser does not support the audio tag.
+        </audio>
+      );
+      break;
+
+    case "pdf":
+      renderFilePreview = (
+        <iframe
+          src={fileURL}
+          style={{ width: "100%", height: "100%", border: "none" }}
+          title="PDF Preview"
+        />
+      );
+      break;
+
+    default:
+      renderFilePreview = <Message>Unsupported file type: {fileName}</Message>;
+      break;
+  }
+
+  return <ViewerContainer>{renderFilePreview}</ViewerContainer>;
+};
+
+export default FileViewer;
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
new file mode 100644
index 00000000..9f8e65a7
--- /dev/null
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -0,0 +1,49 @@
+import { ChangeEvent, useRef } from "react";
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import Icon from "@components/Icon";
+
+const InvisibleButton = styled.button`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+`;
+interface ChildProps {
+  file: File | null;
+  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  setIsFilePreviewOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function MediaUploadComponent({
+  file,
+  setFile,
+  setIsFilePreviewOpen,
+}: ChildProps) {
+  const fileInput = useRef(null);
+  console.log(file);
+  const onAddFile = async (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && !file) {
+      console.log("adding file");
+      setFile(e.target.files[0]);
+    }
+
+    setIsFilePreviewOpen(true);
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        multiple={false}
+        ref={fileInput}
+        onChange={onAddFile}
+        style={{ display: "none" }}
+      />
+      <InvisibleButton>
+        <Icon onClick={() => fileInput.current.click()}>
+          {getIcon("Attatch")}
+        </Icon>
+      </InvisibleButton>
+    </>
+  );
+}
diff --git a/app/src/mocks/chats/media.ts b/app/src/mocks/chats/media.ts
new file mode 100644
index 00000000..824b8b6e
--- /dev/null
+++ b/app/src/mocks/chats/media.ts
@@ -0,0 +1,30 @@
+import { http, HttpResponse } from "msw";
+
+export const media = [
+  http.post("/chats/media", async ({ request }) => {
+    const formData = await request.formData();
+
+    const file = formData.get("file");
+
+    if (!file || !(file instanceof File)) {
+      return HttpResponse.json(
+        {
+          status: "error",
+          message: "File is required or invalid",
+        },
+        { status: 400 }
+      );
+    }
+
+    return HttpResponse.json(
+      {
+        status: "success",
+        message: "File uploaded successfully",
+        data: {
+          mediaFileName: "af32509b11fdb42b.jpg",
+        },
+      },
+      { status: 200 }
+    );
+  }),
+];
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index 1dbca9fa..d8318040 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -11,6 +11,7 @@ import { profilePictureMock } from "./profile-settings/profile-picture";
 import { storiesMock } from "./stories/stories";
 import { chats } from "./chats/chats";
 import { devicesMock } from "./devices/devices";
+import { media } from "./chats/media";
 
 export default [
   ...loginMock,
@@ -27,4 +28,5 @@ export default [
   ...profilePictureMock,
   ...storiesMock,
   ...devicesMock,
+  ...media,
 ];
diff --git a/app/src/types/media.ts b/app/src/types/media.ts
new file mode 100644
index 00000000..2b1ce816
--- /dev/null
+++ b/app/src/types/media.ts
@@ -0,0 +1 @@
+export type UploadFileStates = "idle" | "uploading" | "success" | "error";
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 26d5299f..3ffae3ef 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -33,4 +33,5 @@ export interface MessageInterface {
   isOptionListOpen: boolean;
   isReply: boolean;
   replyMessageId: string | null;
+  media: string;
 }
diff --git a/app/src/utils/uploadfileHandler.ts b/app/src/utils/uploadfileHandler.ts
new file mode 100644
index 00000000..49d24d68
--- /dev/null
+++ b/app/src/utils/uploadfileHandler.ts
@@ -0,0 +1,28 @@
+import { API_URL, STATIC_MEDIA_URL } from "@constants";
+import axios from "axios";
+
+export async function uploadFileHandler(file: File | null): Promise<string> {
+  if (!file) {
+    console.error("No file provided");
+
+    return "";
+  }
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  try {
+    const response = await axios.post(`${API_URL}/chats/media`, formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+
+    return STATIC_MEDIA_URL + response.data?.data?.mediaFileName || "";
+  } catch (error) {
+    console.error(
+      "Error uploading file:",
+      error.response?.message || error.message
+    );
+
+    return "";
+  }
+}

From 7552ebb76cf6be4caabd8d93cfc9fe8fc0560705 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 30 Nov 2024 23:27:13 +0200
Subject: [PATCH 048/136] fix: integrate chats backend (#84)

---
 .../services/apiResetPassword.tsx             |   1 +
 app/src/features/chats/ChatItem.tsx           |  22 +-
 app/src/features/chats/ChatsList.tsx          |   2 +-
 app/src/features/chats/Topbar.tsx             |   5 +-
 .../features/chats/services/apiGetChats.ts    |  10 +-
 app/src/mocks/chats/chats.ts                  |   8 +-
 app/src/mocks/data/chats.ts                   | 354 ++++++++++++++----
 7 files changed, 299 insertions(+), 103 deletions(-)

diff --git a/app/src/features/authentication/reset-password/services/apiResetPassword.tsx b/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
index ff4cb16f..9452500e 100644
--- a/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
+++ b/app/src/features/authentication/reset-password/services/apiResetPassword.tsx
@@ -17,6 +17,7 @@ export async function resetPassword({
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
 
     body: JSON.stringify(requestObj),
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 5e02f880..58df58c3 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -56,29 +56,33 @@ type ChatItemProps = {
   chat: Chat;
 };
 
-function ChatItem({
-  chat: { id, image, name, timestamp, lastMessage },
-}: ChatItemProps) {
+function ChatItem({ chat: { _id, members, type } }: ChatItemProps) {
+  const name = members[0]?.screenFirstName || members[0]?.username;
+  const image = members[0]?.photo?.length > 50 ? members[0]?.photo : undefined;
   const navigate = useNavigate();
+
+  const timestamp = "12:00 PM";
+  const lastMessage = "Hello";
+
   const { chatId } = useParams<{ chatId: string }>();
 
   const handleOpenChat = () => {
-    navigate(`/${id}`);
+    navigate(`/${_id}`);
   };
 
   return (
     <Container
-      $active={Number(chatId) === id}
+      $active={Number(chatId) === _id}
       onClick={handleOpenChat}
-      key={id}
+      key={_id}
     >
       <Avatar image={image} name={name?.charAt(0)} />
       <ChatContent>
         <ChatHeader>
-          <Name>{name}</Name>
-          <Timestamp>{timestamp}</Timestamp>
+          <Name>{type === "private" ? name : "Group"}</Name>
+          <Timestamp>{timestamp || "No messages"}</Timestamp>
         </ChatHeader>
-        <LastMessage>{lastMessage}</LastMessage>
+        <LastMessage>{lastMessage || "No messages"}</LastMessage>
       </ChatContent>
     </Container>
   );
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index 653ac978..b542bf43 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -18,7 +18,7 @@ const ChatsList = () => {
 
   return (
     <ChatListContainer>
-      {chats?.map((chat) => <ChatItem chat={chat} key={chat.id} />)}
+      {chats?.map((chat) => <ChatItem chat={chat} key={chat._id} />)}
     </ChatListContainer>
   );
 };
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index f86a2402..dae25581 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -14,7 +14,6 @@ const Container = styled.div`
 
   z-index: 2;
 
-
   height: 3.5rem;
   width: 100%;
 
@@ -75,7 +74,9 @@ const IconButton = styled.button`
 
 function Topbar() {
   const { chat } = useChat();
-  const { name, lastSeen, image } = chat || {};
+  const name = chat?.members[0]?.screenFirstName || chat?.members[0]?.username;
+  const lastSeen = "12:00 PM";
+  const image = chat?.members[0]?.photo;
   const [isSearching, setIsSearching] = useState(false);
 
   if (!chat) return null;
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index 19726977..3780cb4b 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -12,17 +12,15 @@ export async function getAllChatsApi() {
 
   const data = await res.json();
 
-  console.log(data);
-
   if (data.status !== "success") {
     throw new Error(data.message);
   }
 
-  return data.data;
+  return data.data?.chats;
 }
 
 export async function getChatApi(id: string) {
-  const res = await fetch(`${API_URL}/chat/${id}`, {
+  const res = await fetch(`${API_URL}/chats/${id}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -33,9 +31,11 @@ export async function getChatApi(id: string) {
 
   const data = await res.json();
 
+  console.log(data);
+
   if (data.status !== "success") {
     throw new Error(data.message);
   }
 
-  return data.data;
+  return data.data?.chat;
 }
diff --git a/app/src/mocks/chats/chats.ts b/app/src/mocks/chats/chats.ts
index 81b8851e..87647fae 100644
--- a/app/src/mocks/chats/chats.ts
+++ b/app/src/mocks/chats/chats.ts
@@ -6,9 +6,9 @@ export const chats = [
     return HttpResponse.json(
       {
         status: "success",
-        data: allChats,
+        data: { chats: allChats },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 
@@ -18,9 +18,9 @@ export const chats = [
     return HttpResponse.json(
       {
         status: "success",
-        data: chat || null,
+        data: { chat: chat || null },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 ];
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 145d3b92..404c265b 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -1,117 +1,307 @@
+export type Member = {
+  _id: string;
+  username: string;
+  screenFirstName: string;
+  screenLastName: string;
+  phoneNumber: string;
+  photo: string;
+  status: string;
+  isAdmin: boolean;
+  Role: "member" | "admin" | "creator";
+};
+
 export type Chat = {
-  id: string;
-  name: string;
-  lastMessage: string;
-  timestamp: string;
-  lastSeen?: string;
-  image?: string;
+  _id: string;
+  isSeen: boolean;
+  members: Member[];
+  type: "private" | "group" | "channel";
+  numberOfMembers: number;
 };
 
 export const allChats: Chat[] = [
   {
-    id: "1",
-    name: "Alice",
-    lastMessage: "See you soon!",
-    timestamp: "1h ago",
-    lastSeen: "10 minutes ago",
+    _id: "1",
+    isSeen: false,
+    members: [
+      {
+        _id: "member1",
+        username: "alice_smith",
+        screenFirstName: "Alice",
+        screenLastName: "Smith",
+        phoneNumber: "+1234567890",
+        photo: "alice.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "2",
-    name: "Bob",
-    lastMessage: "Let's meet tomorrow.",
-    timestamp: "2h ago",
-    lastSeen: "30 minutes ago",
+    _id: "2",
+    isSeen: false,
+    members: [
+      {
+        _id: "member2",
+        username: "bob_jones",
+        screenFirstName: "Bob",
+        screenLastName: "Jones",
+        phoneNumber: "+1987654321",
+        photo: "bob.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "3",
-    name: "Charlie",
-    lastMessage: "Hello!",
-    timestamp: "3h ago",
-    lastSeen: "45 minutes ago",
+    _id: "3",
+    isSeen: false,
+    members: [
+      {
+        _id: "member3",
+        username: "charlie_brown",
+        screenFirstName: "Charlie",
+        screenLastName: "Brown",
+        phoneNumber: "+1567890123",
+        photo: "charlie.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "4",
-    name: "David",
-    lastMessage: "Good morning!",
-    timestamp: "4h ago",
-    lastSeen: "1 hour ago",
+    _id: "4",
+    isSeen: false,
+    members: [
+      {
+        _id: "member4",
+        username: "david_miller",
+        screenFirstName: "David",
+        screenLastName: "Miller",
+        phoneNumber: "+1456789012",
+        photo: "david.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "5",
-    name: "Eve",
-    lastMessage: "See you at 5pm.",
-    timestamp: "5h ago",
-    lastSeen: "1 hour ago",
+    _id: "5",
+    isSeen: false,
+    members: [
+      {
+        _id: "member5",
+        username: "eve_wilson",
+        screenFirstName: "Eve",
+        screenLastName: "Wilson",
+        phoneNumber: "+1345678901",
+        photo: "eve.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "6",
-    name: "Frank",
-    lastMessage: "I'm on my way.",
-    timestamp: "6h ago",
-    lastSeen: "2 hours ago",
+    _id: "6",
+    isSeen: false,
+    members: [
+      {
+        _id: "member6",
+        username: "frank_garcia",
+        screenFirstName: "Frank",
+        screenLastName: "Garcia",
+        phoneNumber: "+1234567890",
+        photo: "frank.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "7",
-    name: "Grace",
-    lastMessage:
-      "How are you? a very long message to test if the text is truncated correctly",
-    timestamp: "7h ago",
-    lastSeen: "3 hours ago",
+    _id: "7",
+    isSeen: false,
+    members: [
+      {
+        _id: "member7",
+        username: "grace_lee",
+        screenFirstName: "Grace",
+        screenLastName: "Lee",
+        phoneNumber: "+1876543210",
+        photo: "grace.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "8",
-    name: "Hannah",
-    lastMessage: "Let's catch up soon!",
-    timestamp: "8h ago",
-    lastSeen: "4 hours ago",
+    _id: "8",
+    isSeen: false,
+    members: [
+      {
+        _id: "member8",
+        username: "hannah_davis",
+        screenFirstName: "Hannah",
+        screenLastName: "Davis",
+        phoneNumber: "+1765432109",
+        photo: "hannah.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "9",
-    name: "Ivy",
-    lastMessage: "Thanks for your help!",
-    timestamp: "9h ago",
-    lastSeen: "5 hours ago",
+    _id: "9",
+    isSeen: false,
+    members: [
+      {
+        _id: "member9",
+        username: "ivy_martinez",
+        screenFirstName: "Ivy",
+        screenLastName: "Martinez",
+        phoneNumber: "+1654321098",
+        photo: "ivy.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "10",
-    name: "Jack",
-    lastMessage: "Can't wait to see you!",
-    timestamp: "10h ago",
-    lastSeen: "6 hours ago",
+    _id: "10",
+    isSeen: false,
+    members: [
+      {
+        _id: "member10",
+        username: "jack_anderson",
+        screenFirstName: "Jack",
+        screenLastName: "Anderson",
+        phoneNumber: "+1543210987",
+        photo: "jack.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "11",
-    name: "Kara",
-    lastMessage: "Talk soon.",
-    timestamp: "11h ago",
-    lastSeen: "7 hours ago",
+    _id: "11",
+    isSeen: false,
+    members: [
+      {
+        _id: "member11",
+        username: "kara_thomas",
+        screenFirstName: "Kara",
+        screenLastName: "Thomas",
+        phoneNumber: "+1432109876",
+        photo: "kara.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "12",
-    name: "Liam",
-    lastMessage: "I'll send the details.",
-    timestamp: "12h ago",
-    lastSeen: "8 hours ago",
+    _id: "12",
+    isSeen: false,
+    members: [
+      {
+        _id: "member12",
+        username: "liam_johnson",
+        screenFirstName: "Liam",
+        screenLastName: "Johnson",
+        phoneNumber: "+1321098765",
+        photo: "liam.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "13",
-    name: "Mia",
-    lastMessage: "Let's go for a walk.",
-    timestamp: "13h ago",
-    lastSeen: "9 hours ago",
+    _id: "13",
+    isSeen: false,
+    members: [
+      {
+        _id: "member13",
+        username: "mia_white",
+        screenFirstName: "Mia",
+        screenLastName: "White",
+        phoneNumber: "+1210987654",
+        photo: "mia.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "14",
-    name: "Noah",
-    lastMessage: "I agree with you.",
-    timestamp: "14h ago",
-    lastSeen: "10 hours ago",
+    _id: "14",
+    isSeen: false,
+    members: [
+      {
+        _id: "member14",
+        username: "noah_robinson",
+        screenFirstName: "Noah",
+        screenLastName: "Robinson",
+        phoneNumber: "+1109876543",
+        photo: "noah.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
   {
-    id: "15",
-    name: "Olivia",
-    lastMessage: "I'll get back to you.",
-    timestamp: "15h ago",
-    lastSeen: "11 hours ago",
+    _id: "15",
+    isSeen: false,
+    members: [
+      {
+        _id: "member15",
+        username: "olivia_clark",
+        screenFirstName: "Olivia",
+        screenLastName: "Clark",
+        phoneNumber: "+1098765432",
+        photo: "olivia.jpg",
+        status: "active",
+        isAdmin: false,
+        Role: "member",
+      },
+    ],
+    type: "private",
+    numberOfMembers: 1,
   },
 ];

From 58714b2e6077b5d7b63c35cdf9ebb6d55950b345 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sun, 1 Dec 2024 09:37:41 +0200
Subject: [PATCH 049/136] Integration media fixes (#85)

* bug-fix: fixed unauthorized error

* some code clean up

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/features/chats/ChatInput.tsx          |  1 -
 .../features/chats/media/FilePreviewItem.tsx  | 35 +++++++++++--------
 .../chats/media/MediaUploadComponent.tsx      |  3 +-
 .../chats/media/hooks/useUploadMedia.tsx      | 18 ++++++++++
 .../chats/media/services/uploadfileHandler.ts | 27 ++++++++++++++
 app/src/state/messages/messages.ts            |  1 -
 app/src/utils/uploadfileHandler.ts            | 28 ---------------
 7 files changed, 67 insertions(+), 46 deletions(-)
 create mode 100644 app/src/features/chats/media/hooks/useUploadMedia.tsx
 create mode 100644 app/src/features/chats/media/services/uploadfileHandler.ts
 delete mode 100644 app/src/utils/uploadfileHandler.ts

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index f7b92929..bc1f4157 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -82,7 +82,6 @@ function ChatInput() {
   const [input, setInput] = useState<string>("");
   const [file, setFile] = useState<File | string>(null);
   const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
-  console.log(file, isFilePreviewOpen);
   useEffect(() => {
     if (activeMessage.state === "edit" && activeMessage?.content)
       setInput(activeMessage?.content);
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
index ad74c662..69e486bb 100644
--- a/app/src/features/chats/media/FilePreviewItem.tsx
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -5,7 +5,7 @@ import ExpandingTextArea from "@components/ExpandingTextArea";
 import Button from "@components/Button";
 import { Dispatch, SetStateAction, useState } from "react";
 import FileDetailsBanner from "./FileDetailsBanner";
-import { uploadFileHandler } from "@utils/uploadfileHandler";
+import { useUploadMedia } from "./hooks/useUploadMedia";
 
 const FileViewerContainer = styled.div`
   z-index: 7;
@@ -22,19 +22,18 @@ const FileViewerContainer = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
+
 const InputWrapper = styled.div`
   display: flex;
   align-items: flex-end;
   gap: 1rem;
   padding: 4px;
   position: relative;
-
   flex: 1;
 `;
 
 interface FileProps {
   file: File | string;
-
   handleCloseFilePreview: () => void;
   handleSendMessage: (data: string, file: string) => void;
   setFile: Dispatch<SetStateAction<File | null>>;
@@ -47,6 +46,8 @@ function FilePreviewItem({
   setFile,
 }: FileProps) {
   const [caption, setCaption] = useState("");
+  const { data: uploadedUrl, mutate: uploadFile, isPending } = useUploadMedia();
+
   const handleSendFile = async () => {
     if (!file) {
       console.error("No file selected to send.");
@@ -54,17 +55,21 @@ function FilePreviewItem({
     }
 
     try {
-      const url = await uploadFileHandler(file);
-      if (!url) {
-        throw new Error("Failed to upload file. No URL returned.");
-      }
-      console.log(url);
-      handleSendMessage(caption, url);
-      setCaption("");
-      setFile(null);
+      uploadFile(file, {
+        onSuccess: (url) => {
+          console.log("File uploaded successfully:", url);
+          handleSendMessage(caption, url);
+          setCaption("");
+          setFile(null);
+        },
+        onError: (error) => {
+          console.error("Error uploading file:", error);
+          alert("Failed to upload the file. Please try again.");
+        },
+      });
     } catch (error) {
-      console.error("Error sending file:", error);
-      alert("Failed to send the file. Please try again.");
+      console.error("Unexpected error while sending file:", error);
+      alert("Unexpected error occurred. Please try again.");
     }
   };
 
@@ -81,7 +86,9 @@ function FilePreviewItem({
       <FileDetailsBanner file={file} />
       <InputWrapper>
         <ExpandingTextArea input={caption} setInput={setCaption} />
-        <Button onClick={handleSendFile}>Send</Button>
+        <Button disabled={isPending} onClick={handleSendFile}>
+          {isPending ? "Sending..." : "Send"}
+        </Button>
       </InputWrapper>
     </Modal>
   );
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
index 9f8e65a7..a7d0275a 100644
--- a/app/src/features/chats/media/MediaUploadComponent.tsx
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -20,10 +20,9 @@ export default function MediaUploadComponent({
   setIsFilePreviewOpen,
 }: ChildProps) {
   const fileInput = useRef(null);
-  console.log(file);
+
   const onAddFile = async (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && !file) {
-      console.log("adding file");
       setFile(e.target.files[0]);
     }
 
diff --git a/app/src/features/chats/media/hooks/useUploadMedia.tsx b/app/src/features/chats/media/hooks/useUploadMedia.tsx
new file mode 100644
index 00000000..59b44545
--- /dev/null
+++ b/app/src/features/chats/media/hooks/useUploadMedia.tsx
@@ -0,0 +1,18 @@
+import { useMutation } from "@tanstack/react-query";
+import { uploadFile } from "../services/uploadfileHandler";
+
+export function useUploadMedia() {
+  const { mutate, isPending, error, data } = useMutation({
+    mutationFn: uploadFile,
+    onError: (error) => {
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
+      console.error("Error uploading file:", errorMessage);
+    },
+    onSuccess: (data) => {
+      console.log("File uploaded successfully:", data);
+    },
+  });
+
+  return { mutate, isPending, error, data };
+}
diff --git a/app/src/features/chats/media/services/uploadfileHandler.ts b/app/src/features/chats/media/services/uploadfileHandler.ts
new file mode 100644
index 00000000..94f7eacc
--- /dev/null
+++ b/app/src/features/chats/media/services/uploadfileHandler.ts
@@ -0,0 +1,27 @@
+import { API_URL, STATIC_MEDIA_URL } from "@constants";
+
+export async function uploadFile(file: File | null) {
+  if (!file) {
+    throw new Error("No file provided");
+  }
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await fetch(`${API_URL}/chats/media`, {
+    method: "POST",
+    credentials: "include",
+    body: formData,
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+  });
+
+  const data = await response.json();
+
+  if (!response.ok || data.status !== "success") {
+    throw new Error(data.message || "Failed to upload file");
+  }
+
+  return STATIC_MEDIA_URL + data.data?.mediaFileName || "";
+}
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index 54f76879..6348e279 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -21,7 +21,6 @@ const messagesSlice = createSlice({
   initialState,
   reducers: {
     addMessage: (state, action: PayloadAction<MessageInterface>) => {
-      console.log(action.payload);
       state.messages.push(action.payload);
     },
 
diff --git a/app/src/utils/uploadfileHandler.ts b/app/src/utils/uploadfileHandler.ts
deleted file mode 100644
index 49d24d68..00000000
--- a/app/src/utils/uploadfileHandler.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { API_URL, STATIC_MEDIA_URL } from "@constants";
-import axios from "axios";
-
-export async function uploadFileHandler(file: File | null): Promise<string> {
-  if (!file) {
-    console.error("No file provided");
-
-    return "";
-  }
-
-  const formData = new FormData();
-  formData.append("file", file);
-
-  try {
-    const response = await axios.post(`${API_URL}/chats/media`, formData, {
-      headers: { "Content-Type": "multipart/form-data" },
-    });
-
-    return STATIC_MEDIA_URL + response.data?.data?.mediaFileName || "";
-  } catch (error) {
-    console.error(
-      "Error uploading file:",
-      error.response?.message || error.message
-    );
-
-    return "";
-  }
-}

From 841ac0cc503161e40721fb727a8b6a0683f3dc0c Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sun, 1 Dec 2024 11:19:28 +0200
Subject: [PATCH 050/136] chore: add test ids for messaging components (#86)

* fix: minor adjustment in mock for backintegration

* docs: add test ids for messaging
---
 .../side-bar/chats/ChatsSideBar.tsx           | 12 +++++----
 app/src/features/chats/ChatInput.tsx          | 26 ++++++++++++++-----
 app/src/features/chats/ChatItem.tsx           | 15 ++++++++---
 app/src/features/chats/MessageOptionList.tsx  | 11 ++++----
 app/src/features/chats/ReplyWrapper.tsx       |  6 +++--
 app/src/features/chats/Topbar.tsx             | 14 ++++++----
 app/src/features/devices/Devices.tsx          | 11 +++++---
 .../devices/components/SessionItem.tsx        |  8 +++---
 .../components/PinnedMessageProgressBar.tsx   |  2 +-
 .../components/PinnedMessages.tsx             |  9 ++++---
 app/src/features/profile-info/ProfileInfo.tsx | 22 +++++++++++++---
 .../features/search/components/SearchBar.tsx  | 15 +++++++----
 app/src/mocks/chats/chats.ts                  |  4 +--
 app/src/sockets/SocketProvider.tsx            |  4 +--
 14 files changed, 109 insertions(+), 50 deletions(-)

diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index dc89e6a8..ccea0368 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -17,6 +17,7 @@ const StyledChatsSideBar = styled.div`
   overflow-x: hidden;
   position: relative;
 `;
+
 const StyledButtonContainer = styled.div`
   position: sticky;
   bottom: 1rem;
@@ -27,15 +28,16 @@ const StyledButtonContainer = styled.div`
   flex-direction: column-reverse;
   gap: 4rem;
 `;
+
 function ChatsSideBar({ children }: ChatsSideBarProps) {
   return (
-    <StyledChatsSideBar>
-      <ChatsSidebarHeader />
+    <StyledChatsSideBar data-testid="chats-sidebar">
+      <ChatsSidebarHeader data-testid="chats-sidebar-header" />
       {/* <StoryListContainer /> */}
       {children}
-      <StyledButtonContainer>
-        <AddStory />
-        <StartNewChat />
+      <StyledButtonContainer data-testid="button-container">
+        <AddStory data-testid="add-story-button" />
+        <StartNewChat data-testid="start-new-chat-button" />
       </StyledButtonContainer>
     </StyledChatsSideBar>
   );
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index bc1f4157..d9cb17d0 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -103,7 +103,7 @@ function ChatInput() {
   };
 
   const showCheckBox = useSelector(
-    (state: RootState) => state.messages.showCheckBox
+    (state: RootState) => state.messages.showCheckBox,
   );
 
   const [showForwardUsers, setShowForwardUsers] = useState(false);
@@ -129,17 +129,26 @@ function ChatInput() {
           handleCloseFilePreview={handleCloseFilePreview}
           handleSendMessage={handleSendMessage}
           setFile={setFile}
+          data-testid="file-preview"
         />
       )}
-      <Container>
+      <Container data-testid="chat-input-container">
         {!showCheckBox ? (
-          <Input>
-            {isEmojiSelectorOpen && <EmojiPickerItem setInputText={setInput} />}
+          <Input data-testid="chat-input">
+            {isEmojiSelectorOpen && (
+              <EmojiPickerItem
+                setInputText={setInput}
+                data-testid="emoji-picker"
+              />
+            )}
 
             <InputContainer>
               {activeMessage.id && <ReplyWrapper setInput={setInput} />}
               <InputWrapper>
-                <InvisibleButton onClick={toggleShowEmojies}>
+                <InvisibleButton
+                  onClick={toggleShowEmojies}
+                  data-testid="emoji-button"
+                >
                   <Icon>{getIcon("Emojie")}</Icon>
                 </InvisibleButton>
 
@@ -155,10 +164,15 @@ function ChatInput() {
             <RecordInput
               onClick={handleSubmit}
               type={!input ? "record" : "message"}
+              data-testid="send-button"
             />
           </Input>
         ) : (
-          <ForwardingInputBar onClose={handleClose} onForward={handleForward} />
+          <ForwardingInputBar
+            onClose={handleClose}
+            onForward={handleForward}
+            data-testid="forwarding-input-bar"
+          />
         )}
 
         {showForwardUsers && <ScrollableChats onClose={handleClose} />}
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 58df58c3..7ec75738 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -72,17 +72,24 @@ function ChatItem({ chat: { _id, members, type } }: ChatItemProps) {
 
   return (
     <Container
+      data-testid="chat-container"
       $active={Number(chatId) === _id}
       onClick={handleOpenChat}
       key={_id}
     >
-      <Avatar image={image} name={name?.charAt(0)} />
+      <Avatar data-testid="chat-avatar" image={image} name={name?.charAt(0)} />
       <ChatContent>
         <ChatHeader>
-          <Name>{type === "private" ? name : "Group"}</Name>
-          <Timestamp>{timestamp || "No messages"}</Timestamp>
+          <Name data-testid="chat-name">
+            {type === "private" ? name : "Group"}
+          </Name>
+          <Timestamp data-testid="chat-timestamp">
+            {timestamp || "No messages"}
+          </Timestamp>
         </ChatHeader>
-        <LastMessage>{lastMessage || "No messages"}</LastMessage>
+        <LastMessage data-testid="chat-last-message">
+          {lastMessage || "No messages"}
+        </LastMessage>
       </ChatContent>
     </Container>
   );
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index 3b0110da..bdf58ca4 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -68,23 +68,22 @@ function MessageOptionList(props: Props) {
   } = props;
 
   return (
-    <StyledList $isMine={$isMine}>
-      <HoverMask onClick={forwardOnClick}>
+    <StyledList $isMine={$isMine} data-testid="message-option-list">
+      <HoverMask onClick={forwardOnClick} data-testid="forward-option">
         <StyledP>Forward</StyledP>
       </HoverMask>
-      <HoverMask onClick={replyOnClick}>
+      <HoverMask onClick={replyOnClick} data-testid="reply-option">
         <StyledP>Reply</StyledP>
       </HoverMask>
       {$isMine && (
-        <HoverMask onClick={editOnClick}>
+        <HoverMask onClick={editOnClick} data-testid="edit-option">
           <StyledP>Edit</StyledP>
         </HoverMask>
       )}
-      <HoverMask onClick={pinOnClick}>
+      <HoverMask onClick={pinOnClick} data-testid="pin-option">
         <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
       </HoverMask>
     </StyledList>
   );
 }
-
 export default MessageOptionList;
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index 520c99d4..f7c7cdbe 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -36,10 +36,12 @@ export default function ReplyWrapper({ setInput }: Props) {
   }
 
   return (
-    <Container>
+    <Container data-testid="reply-wrapper">
       <Icon>{getIcon(activeMessage.state === "edit" ? "Edit" : "Reply")}</Icon>
       <MessageBox />
-      <Icon onClick={handleHideWrapper} test-id="close-icon">{getIcon("Close")}</Icon>
+      <Icon onClick={handleHideWrapper} test-id="close-icon">
+        {getIcon("Close")}
+      </Icon>
     </Container>
   );
 }
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index dae25581..2641ad45 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -87,21 +87,25 @@ function Topbar() {
 
   return (
     <Container>
-      <Avatar image={image} name={name?.charAt(0)} />
+      <Avatar data-testid="chat-avatar" image={image} name={name?.charAt(0)} />
       {isSearching ? (
         <SearchBar onClose={toggleSearch} />
       ) : (
         <>
-          <Info>
+          <Info data-testid="chat-info">
             <Content>
-              <Name>{name}</Name>
-              <LastSeen>last seen {lastSeen}</LastSeen>
+              <Name data-testid="chat-name">{name}</Name>
+              <LastSeen data-testid="chat-last-seen">
+                last seen {lastSeen}
+              </LastSeen>
             </Content>
           </Info>
           <PinnedMessages />
           <Icons>
             <Icon>{getIcon("Call")}</Icon>
-            <IconButton onClick={toggleSearch}>{getIcon("Search")}</IconButton>
+            <IconButton onClick={toggleSearch} data-testid="search-button">
+              {getIcon("Search")}
+            </IconButton>
             <Icon>{getIcon("More")}</Icon>
           </Icons>
         </>
diff --git a/app/src/features/devices/Devices.tsx b/app/src/features/devices/Devices.tsx
index 5eef3115..0a0c6b9e 100644
--- a/app/src/features/devices/Devices.tsx
+++ b/app/src/features/devices/Devices.tsx
@@ -77,9 +77,12 @@ function Devices() {
         </HeaderAnimatinoContainer>
       </SettingSection>
       <SettingSection>
-        <SectionTitle>THIS DEVICE</SectionTitle>
+        <SectionTitle data-testid="this-device-title">THIS DEVICE</SectionTitle>
         <SessionItem session={activeSession} />
-        <TerminateOtherSessionsButton onClick={handleLogoutOthers}>
+        <TerminateOtherSessionsButton
+          onClick={handleLogoutOthers}
+          data-testid="terminate-other-sessions-button"
+        >
           <Icon>
             <DoDisturbOnOutlined fontSize="large" />
           </Icon>
@@ -87,7 +90,9 @@ function Devices() {
         </TerminateOtherSessionsButton>
       </SettingSection>
       <SettingSection>
-        <SectionTitle>Active sessions</SectionTitle>
+        <SectionTitle data-testid="active-sessions-title">
+          Active sessions
+        </SectionTitle>
         {allDevices?.map((session) => (
           <SessionItem key={session.lastSeenTime} session={session} />
         ))}
diff --git a/app/src/features/devices/components/SessionItem.tsx b/app/src/features/devices/components/SessionItem.tsx
index 8e8bb084..40595f73 100644
--- a/app/src/features/devices/components/SessionItem.tsx
+++ b/app/src/features/devices/components/SessionItem.tsx
@@ -88,11 +88,13 @@ function SessionItem({ session }: SessionItemProps) {
         <Lottie animationData={sessionIcon} />
       </SessionItemIcon>
       <SessionItemContent>
-        <SessionItemTitle>{session?.agent?.os || "Postman"}</SessionItemTitle>
-        <SessionItemDate>
+        <SessionItemTitle data-testid="session-title">
+          {session?.agent?.os || "Postman"}
+        </SessionItemTitle>
+        <SessionItemDate data-testid="session-date">
           {new Date(session?.lastSeenTime).toLocaleDateString()}
         </SessionItemDate>
-        <SessionItemSubtitle>
+        <SessionItemSubtitle data-testid="session-subtitle">
           {session?.agent?.browser || "Postman WebView"}
         </SessionItemSubtitle>
       </SessionItemContent>
diff --git a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
index 1029877d..80294221 100644
--- a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
@@ -35,7 +35,7 @@ const PinnedMessageProgressBar: React.FC<PinnedMessageProgressBarProps> = ({
   currentPinnedIndex,
 }) => {
   return (
-    <ProgressBarContainer>
+    <ProgressBarContainer data-testid="progress-bar-container">
       <ProgressBar>
         {pinnedMessages.map((_, index) => (
           <ProgressBarSegment
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
index 21ed38bd..8b138b5e 100644
--- a/app/src/features/pin-messages/components/PinnedMessages.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -67,18 +67,21 @@ const PinnedMessages: React.FC = () => {
   if (pinnedMessages.length === 0) return null;
 
   return (
-    <PinnedMessagesContainer onClick={handleNextPinnedMessage}>
+    <PinnedMessagesContainer
+      onClick={handleNextPinnedMessage}
+      data-testid="pinned-messages-container"
+    >
       <PinnedMessageProgressBar
         pinnedMessages={pinnedMessages}
         currentPinnedIndex={currentPinnedIndex}
       />
 
       <PinnedMessageContent>
-        <PinnedMessageTitle>
+        <PinnedMessageTitle data-testid="pinned-message-title">
           Pinned Message {currentPinnedIndex + 1}
         </PinnedMessageTitle>
 
-        <PinnedMessagePreview>
+        <PinnedMessagePreview data-testid="pinned-message-preview">
           {currentPinnedMessage?.content}
         </PinnedMessagePreview>
       </PinnedMessageContent>
diff --git a/app/src/features/profile-info/ProfileInfo.tsx b/app/src/features/profile-info/ProfileInfo.tsx
index 2c528bc0..9230227d 100644
--- a/app/src/features/profile-info/ProfileInfo.tsx
+++ b/app/src/features/profile-info/ProfileInfo.tsx
@@ -18,20 +18,36 @@ function ProfileInfo() {
   return (
     <ProfileInfoStyled>
       {profileSettings?.phone && (
-        <ProfileItem data={profileSettings.phone} ribbon="Phone" Icon={Phone} />
+        <ProfileItem
+          data={profileSettings.phone}
+          ribbon="Phone"
+          Icon={Phone}
+          data-testid="phone-profile-item"
+        />
       )}
       {profileSettings?.email && (
-        <ProfileItem data={profileSettings.email} ribbon="Email" Icon={Email} />
+        <ProfileItem
+          data={profileSettings.email}
+          ribbon="Email"
+          Icon={Email}
+          data-testid="email-profile-item"
+        />
       )}
       {profileSettings?.username && (
         <ProfileItem
           data={profileSettings.username}
           ribbon="Username"
           Icon={AlternateEmailTwoTone}
+          data-testid="username-profile-item"
         />
       )}
       {profileSettings?.bio && (
-        <ProfileItem data={profileSettings.bio} ribbon="Bio" Icon={Info} />
+        <ProfileItem
+          data={profileSettings.bio}
+          ribbon="Bio"
+          Icon={Info}
+          data-testid="bio-profile-item"
+        />
       )}
     </ProfileInfoStyled>
   );
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index 16862b6f..96678399 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -72,9 +72,7 @@ interface SearchBarProps {
 const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   const dispatch = useDispatch();
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-
-    (state: RootState) => state.search
-
+    (state: RootState) => state.search,
   );
   const { messages } = useSelector((state: RootState) => state.messages);
   const [isSearchLoading, setIsSearchLoading] = useState(false);
@@ -141,12 +139,15 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
         {isSearchLoading ? getIcon("CircularProgress") : getIcon("Search")}
       </Icon>
       <SearchInput
+        data-testid="search-input"
         type="text"
         placeholder="Search..."
         value={searchTerm}
         onChange={handleSearch}
       />
-      <ResultCounter>
+      <ResultCounter data-testid="search-result-counter">
+        {" "}
+        // Added for testing the result counter
         {searchResults.length > 0
           ? `${currentResultIndex + 1} of ${searchResults.length}`
           : searchTerm.length > 0
@@ -155,19 +156,23 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
       </ResultCounter>
       <SuggestionButtons>
         <IconButton
+          data-testid="previous-result-button"
           onClick={() => dispatch(moveToPreviousResult())}
           disabled={searchResults.length === 0}
         >
           {getIcon("KeyboardArrowUp")}
         </IconButton>
         <IconButton
+          data-testid="next-result-button"
           onClick={() => dispatch(moveToNextResult())}
           disabled={searchResults.length === 0}
         >
           {getIcon("KeyboardArrowDown")}
         </IconButton>
       </SuggestionButtons>
-      <IconButton onClick={handleClose}>{getIcon("Close")}</IconButton>
+      <IconButton onClick={handleClose} data-testid="close-search-button">
+        {getIcon("Close")}
+      </IconButton>
     </SearchContainer>
   );
 };
diff --git a/app/src/mocks/chats/chats.ts b/app/src/mocks/chats/chats.ts
index 87647fae..85585499 100644
--- a/app/src/mocks/chats/chats.ts
+++ b/app/src/mocks/chats/chats.ts
@@ -12,8 +12,8 @@ export const chats = [
     );
   }),
 
-  http.get("/chat/:id", async ({ params }) => {
-    const chat = allChats.find((chat) => chat.id.toString() === params.id);
+  http.get("/chats/:id", async ({ params }) => {
+    const chat = allChats.find((chat) => chat._id.toString() === params.id);
 
     return HttpResponse.json(
       {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 701e288e..b5c40f4a 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -115,11 +115,11 @@ function SocketProvider({ children }: SocketProviderProps) {
   useEffect(() => {
     if (!isPending && chats?.length) {
       chats.forEach((chat) => {
-        socket.emit("join", { chatId: chat.id });
+        socket.emit("join", { chatId: chat._id });
       });
       console.log(
         "Joined all chats:",
-        chats.map((chat) => chat.id),
+        chats.map((chat) => chat._id),
       );
     }
   }, [isConnected, isPending, chats, socket]);

From f83ff42ed1abf69a17ecf3db0d2f019a47b98ffa Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sun, 1 Dec 2024 11:20:05 +0200
Subject: [PATCH 051/136] feat: add simple static code analysis (#87)

---
 app/eslint.config.js                    |   31 +-
 app/package-lock.json                   |   96 +
 app/package.json                        |    3 +
 app/src/utils/static-analysis-script.js |   36 +
 app/static-analysis-report.example.json | 5225 +++++++++++++++++++++++
 5 files changed, 5378 insertions(+), 13 deletions(-)
 create mode 100644 app/src/utils/static-analysis-script.js
 create mode 100644 app/static-analysis-report.example.json

diff --git a/app/eslint.config.js b/app/eslint.config.js
index 092408a9..fbe07e61 100644
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@@ -1,28 +1,33 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+import prettier from "eslint-plugin-prettier";
+import prettierConfig from "eslint-config-prettier";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    extends: [js.configs.recommended, , ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      prettier: prettier,
     },
     rules: {
+      ...prettier.configs.recommended.rules,
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-)
+);
diff --git a/app/package-lock.json b/app/package-lock.json
index 2b5fe382..ab9baf78 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -58,6 +58,8 @@
         "babel-preset-vite": "^1.1.3",
         "dotenv": "^16.4.5",
         "eslint": "^9.11.1",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.12",
         "globals": "^15.9.0",
@@ -3850,6 +3852,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -6439,6 +6454,50 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
+      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "5.1.0-rc-fb9a90fa48-20240614",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0-rc-fb9a90fa48-20240614.tgz",
@@ -6676,6 +6735,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -9524,6 +9590,19 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -10651,6 +10730,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/synckit": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
diff --git a/app/package.json b/app/package.json
index 434cc04d..eb57f345 100644
--- a/app/package.json
+++ b/app/package.json
@@ -8,6 +8,7 @@
     "build": "tsc -b && vite build",
     "build-ignore": "vite build",
     "lint": "eslint .",
+    "static-analysis": "node src/utils/static-analysis-script.js",
     "preview": "vite preview",
     "test": "jest",
     "test:watch": "jest --watchAll",
@@ -64,6 +65,8 @@
     "babel-preset-vite": "^1.1.3",
     "dotenv": "^16.4.5",
     "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
diff --git a/app/src/utils/static-analysis-script.js b/app/src/utils/static-analysis-script.js
new file mode 100644
index 00000000..0343bc1b
--- /dev/null
+++ b/app/src/utils/static-analysis-script.js
@@ -0,0 +1,36 @@
+import { ESLint } from "eslint";
+import fs from "fs";
+
+async function generateStaticAnalysisReport() {
+  const eslint = new ESLint();
+
+  const results = await eslint.lintFiles(["src/**/*.{js,jsx,ts,tsx}"]);
+
+  const report = {
+    totalFiles: results.length,
+    errorCount: results.reduce((sum, result) => sum + result.errorCount, 0),
+    warningCount: results.reduce((sum, result) => sum + result.warningCount, 0),
+    fixableErrorCount: results.reduce(
+      (sum, result) => sum + result.fixableErrorCount,
+      0,
+    ),
+    fixableWarningCount: results.reduce(
+      (sum, result) => sum + result.fixableWarningCount,
+      0,
+    ),
+    details: results.map((result) => ({
+      filePath: result.filePath,
+      errors: result.messages.filter((m) => m.severity === 2),
+      warnings: result.messages.filter((m) => m.severity === 1),
+    })),
+  };
+
+  fs.writeFileSync(
+    "static-analysis-report.json",
+    JSON.stringify(report, null, 2),
+  );
+
+  console.log("Static Analysis Report Generated");
+}
+
+generateStaticAnalysisReport();
diff --git a/app/static-analysis-report.example.json b/app/static-analysis-report.example.json
new file mode 100644
index 00000000..a65eac91
--- /dev/null
+++ b/app/static-analysis-report.example.json
@@ -0,0 +1,5225 @@
+{
+  "totalFiles": 235,
+  "errorCount": 189,
+  "warningCount": 9,
+  "fixableErrorCount": 146,
+  "fixableWarningCount": 0,
+  "details": [
+    {
+      "filePath": "/app/src/App.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/AppLayout.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Avatar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/BackArrow.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Button.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/CircleIcon.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/CloseButton.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/CollapsedList.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 5,
+          "column": 18,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 5,
+          "endColumn": 21,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  111,
+                  114
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  111,
+                  114
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 6,
+          "column": 9,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 6,
+          "endColumn": 12,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  140,
+                  143
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  140,
+                  143
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/ExpandingTextArea.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Heading.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Icon.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/ImageEditor.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Main.tsx",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'isPending'. Either include it or remove the dependency array.",
+          "line": 50,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 50,
+          "endColumn": 22,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [dispatch, isPending, user]",
+              "fix": {
+                "range": [
+                  1169,
+                  1185
+                ],
+                "text": "[dispatch, isPending, user]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/components/Modal.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/Popup.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 41,
+          "column": 18,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 41,
+          "endColumn": 18,
+          "fix": {
+            "range": [
+              901,
+              901
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/SpinnerMini.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/StyledLink.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/float-label-input/FloatingLabelInput.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 87,
+          "column": 98,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 87,
+          "endColumn": 98,
+          "fix": {
+            "range": [
+              1974,
+              1974
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/float-label-input/FloatingLablelInput.test.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/CodeInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 35,
+          "column": 18,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 35,
+          "endColumn": 18,
+          "fix": {
+            "range": [
+              749,
+              749
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/InputField.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 24,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 24,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              595,
+              595
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 40,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 40,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              977,
+              977
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 53,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 53,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1246,
+              1246
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 66,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 66,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1524,
+              1524
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 82,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 82,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1897,
+              1897
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/InputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 68,
+          "column": 13,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 68,
+          "endColumn": 16,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1013,
+                  1016
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1013,
+                  1016
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/PasswordInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 75,
+          "column": 13,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 75,
+          "endColumn": 16,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1291,
+                  1294
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1291,
+                  1294
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/input-field/TelephoneInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 9,
+          "column": 12,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 9,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  276,
+                  279
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  276,
+                  279
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/password-input-field/PasswordInputField.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 75,
+          "column": 13,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 75,
+          "endColumn": 16,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1283,
+                  1286
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1283,
+                  1286
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/radio-input/RadioInput.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 66,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 66,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2178,
+              2178
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 69,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 69,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2278,
+              2278
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 72,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 72,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2379,
+              2379
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 85,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 85,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2689,
+              2689
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 92,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 92,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              2899,
+              2899
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 95,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 95,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3000,
+              3000
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 98,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 98,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3101,
+              3101
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 111,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 111,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3412,
+              3412
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 114,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 114,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3513,
+              3513
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 117,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 117,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3614,
+              3614
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/inputs/radio-input/RadioInput.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 101,
+          "column": 40,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 101,
+          "endColumn": 43,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  2353,
+                  2356
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  2353,
+                  2356
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'selectedValue' is never reassigned. Use 'const' instead.",
+          "line": 106,
+          "column": 7,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 106,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              2434,
+              2469
+            ],
+            "text": "const selectedValue = watch(data.id);"
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has missing dependencies: 'data.id' and 'handleSumbit'. Either include them or remove the dependency array.",
+          "line": 111,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 111,
+          "endColumn": 21,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [data.id, handleSumbit, selectedValue]",
+              "fix": {
+                "range": [
+                  2583,
+                  2598
+                ],
+                "text": "[data.id, handleSumbit, selectedValue]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/components/protected-route/ProtectedRoute.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 23,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 23,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              640,
+              640
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 36,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 36,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              985,
+              985
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/protected-route/ProtectedRoute.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/ContactsSideBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/ContactsSideBarHeader.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/SideBar.test.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 26,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 26,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 27,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 27,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 29,
+          "column": 3,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 29,
+          "endColumn": 61
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/SideBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/ChatsSideBar.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'StoryListContainer' is defined but never used.",
+          "line": 5,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 5,
+          "endColumn": 26
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/SearchBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/SideBarMenuItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/SideBarToolsButton.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 39,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 40,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              1265,
+              1266
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 70,
+          "column": 19,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 70,
+          "endColumn": 19,
+          "fix": {
+            "range": [
+              2152,
+              2152
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 83,
+          "column": 19,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 83,
+          "endColumn": 19,
+          "fix": {
+            "range": [
+              2524,
+              2524
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 11,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 11,
+          "endColumn": 29,
+          "fix": {
+            "range": [
+              450,
+              450
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 22,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 22,
+          "endColumn": 29,
+          "fix": {
+            "range": [
+              772,
+              772
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/OptionsList.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 35,
+          "column": 16,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 35,
+          "endColumn": 16,
+          "fix": {
+            "range": [
+              824,
+              824
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/ProfilePicture.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/SettingsSideBarBody.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 55,
+          "column": 77,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 55,
+          "endColumn": 77,
+          "fix": {
+            "range": [
+              1704,
+              1704
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/SettingsUpdate.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 98,
+          "column": 30,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 98,
+          "endColumn": 30,
+          "fix": {
+            "range": [
+              2594,
+              2594
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 106,
+          "column": 28,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 106,
+          "endColumn": 28,
+          "fix": {
+            "range": [
+              2879,
+              2879
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 114,
+          "column": 28,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 114,
+          "endColumn": 28,
+          "fix": {
+            "range": [
+              3173,
+              3173
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect contains a call to 'setKey'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [status, type, userData.privacySettings, userData.activitySettings, userData.permissionSettings, key, title] as a second argument to the useEffect Hook.",
+          "line": 87,
+          "column": 3,
+          "nodeType": "Identifier",
+          "endLine": 87,
+          "endColumn": 12,
+          "suggestions": [
+            {
+              "desc": "Add dependencies array: [status, type, userData.privacySettings, userData.activitySettings, userData.permissionSettings, key, title]",
+              "fix": {
+                "range": [
+                  3387,
+                  3387
+                ],
+                "text": ", [status, type, userData.privacySettings, userData.activitySettings, userData.permissionSettings, key, title]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 20,
+          "column": 16,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 20,
+          "endColumn": 16,
+          "fix": {
+            "range": [
+              486,
+              486
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 40,
+          "column": 33,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 40,
+          "endColumn": 33,
+          "fix": {
+            "range": [
+              1058,
+              1058
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 46,
+          "column": 17,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 46,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1182,
+                  1185
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1182,
+                  1185
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 81,
+          "column": 33,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 81,
+          "endColumn": 33,
+          "fix": {
+            "range": [
+              2075,
+              2075
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 87,
+          "column": 17,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 87,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  2199,
+                  2202
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  2199,
+                  2202
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 122,
+          "column": 33,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 122,
+          "endColumn": 33,
+          "fix": {
+            "range": [
+              3100,
+              3100
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 128,
+          "column": 17,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 128,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  3224,
+                  3227
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  3224,
+                  3227
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 18,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 18,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "@typescript-eslint/no-require-imports",
+          "severity": 2,
+          "message": "A `require()` style import is forbidden.",
+          "line": 19,
+          "column": 30,
+          "nodeType": "CallExpression",
+          "messageId": "noRequireImports",
+          "endLine": 19,
+          "endColumn": 62
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 88,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 88,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              2667,
+              2667
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 133,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 133,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              3938,
+              3938
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/constants.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/data/__mocks__/data/icons.js",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/data/icons.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'icons' is defined but only used as a type.",
+          "line": 44,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "usedOnlyAsType",
+          "endLine": 44,
+          "endColumn": 11
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/data/sideBar.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/ForgotPasswordModal.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 24,
+          "column": 75,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 24,
+          "endColumn": 75,
+          "fix": {
+            "range": [
+              765,
+              765
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 51,
+          "column": 27,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 51,
+          "endColumn": 27,
+          "fix": {
+            "range": [
+              1707,
+              1707
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 61,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 61,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              1992,
+              1992
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 112,
+          "column": 36,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 112,
+          "endColumn": 36,
+          "fix": {
+            "range": [
+              3515,
+              3515
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 141,
+          "column": 11,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 141,
+          "endColumn": 11,
+          "fix": {
+            "range": [
+              4276,
+              4276
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 144,
+          "column": 71,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 144,
+          "endColumn": 71,
+          "fix": {
+            "range": [
+              4370,
+              4370
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/LoginForm/LoginForm.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/LoginSection.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useAuthCheck.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useAuthStatus.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useForgotPassword.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useLogin.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/hooks/useUser.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 9,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 9,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              247,
+              249
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/schema/login.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `.string().email(\"Please·enter·a·valid·email\")` with `⏎····.string()⏎····.email(\"Please·enter·a·valid·email\")⏎····`",
+          "line": 4,
+          "column": 13,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 4,
+          "endColumn": 58,
+          "fix": {
+            "range": [
+              76,
+              121
+            ],
+            "text": "\n    .string()\n    .email(\"Please enter a valid email\")\n    "
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/services/apiForgotPassword.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/services/apiLogin.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/login/services/checkAuth.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/logout/hooks/useLogout.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/logout/services/apiLogout.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/LoginWith.test.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 22,
+          "column": 31,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 22,
+          "endColumn": 31,
+          "fix": {
+            "range": [
+              737,
+              737
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/LoginWith.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/OauthOptions.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/hooks/useOauth.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `;`",
+          "line": 5,
+          "column": 36,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 5,
+          "endColumn": 36,
+          "fix": {
+            "range": [
+              149,
+              149
+            ],
+            "text": ";"
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'login'. Either include it or remove the dependency array.",
+          "line": 14,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 14,
+          "endColumn": 8,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [login]",
+              "fix": {
+                "range": [
+                  324,
+                  326
+                ],
+                "text": "[login]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/hooks/useOauthLogin.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/services/apiOauth.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `·`",
+          "line": 4,
+          "column": 3,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 4,
+          "endColumn": 4,
+          "fix": {
+            "range": [
+              82,
+              83
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 10,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 11,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              267,
+              268
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/oauth/services/apiUser.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/ResetPasswordModal.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/hooks/useResetPassword.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/schema/schema.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/reset-password/services/apiResetPassword.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/ConfirmationEmailModal.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 135,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 135,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              3262,
+              3262
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/SignupForm.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/SignupSection.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/hooks/useSendConfirmationEmail.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/hooks/useSignup.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/hooks/useVerifyEmail.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/schema/signup.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/services/apiConfirmCode.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/services/apiSignup.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/authentication/signup/services/apiVerfiyCode.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/Avatar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatBody.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatBox.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `;`",
+          "line": 14,
+          "column": 2,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 14,
+          "endColumn": 2,
+          "fix": {
+            "range": [
+              317,
+              317
+            ],
+            "text": ";"
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatInput.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 106,
+          "column": 54,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 106,
+          "endColumn": 54,
+          "fix": {
+            "range": [
+              2646,
+              2646
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ChatsList.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/Message.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 141,
+          "column": 28,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 141,
+          "endColumn": 28,
+          "fix": {
+            "range": [
+              3502,
+              3502
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 156,
+          "column": 42,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 156,
+          "endColumn": 42,
+          "fix": {
+            "range": [
+              3998,
+              3998
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/MessageBox.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 55,
+          "column": 13,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 55,
+          "endColumn": 13,
+          "fix": {
+            "range": [
+              1075,
+              1075
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 72,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 72,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              1439,
+              1439
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'id' is never reassigned. Use 'const' instead.",
+          "line": 78,
+          "column": 7,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 78,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1596,
+              1655
+            ],
+            "text": "const id = useAppSelector((state) => state.user.userInfo.id);"
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 91,
+          "column": 46,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 91,
+          "endColumn": 46,
+          "fix": {
+            "range": [
+              2015,
+              2015
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/MessageOptionList.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/ReplyWrapper.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `{getIcon(\"Close\")}` with `⏎········{getIcon(\"Close\")}⏎······`",
+          "line": 42,
+          "column": 62,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 42,
+          "endColumn": 80,
+          "fix": {
+            "range": [
+              1031,
+              1049
+            ],
+            "text": "\n        {getIcon(\"Close\")}\n      "
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/SendButton.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `⏎···⏎······` with `····`",
+          "line": 10,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 12,
+          "endColumn": 7,
+          "fix": {
+            "range": [
+              194,
+              205
+            ],
+            "text": "    "
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 13,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 13,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              217,
+              219
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 14,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 14,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              243,
+              245
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 15,
+          "column": 7,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 15,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              283,
+              285
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 16,
+          "column": 7,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 16,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              337,
+              339
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 17,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 17,
+          "endColumn": 3,
+          "fix": {
+            "range": [
+              354,
+              356
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `··`",
+          "line": 18,
+          "column": 7,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 18,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              383,
+              385
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `··/>⏎` with `/>`",
+          "line": 19,
+          "column": 5,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 20,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              420,
+              425
+            ],
+            "text": "/>"
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/StartNewChat.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/Topbar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/emojies/EmojiPicker.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'event' is defined but never used.",
+          "line": 57,
+          "column": 58,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 57,
+          "endColumn": 63
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useChat.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useChats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useHover.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useMessageSender.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-non-null-asserted-optional-chain",
+          "severity": 2,
+          "message": "Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong.",
+          "line": 14,
+          "column": 19,
+          "nodeType": "TSNonNullExpression",
+          "messageId": "noNonNullOptionalChain",
+          "endLine": 14,
+          "endColumn": 37,
+          "suggestions": [
+            {
+              "messageId": "suggestRemovingNonNull",
+              "fix": {
+                "range": [
+                  647,
+                  648
+                ],
+                "text": ""
+              },
+              "desc": "You should remove the non-null assertion."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useOptionListAction.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 24,
+          "column": 51,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 24,
+          "endColumn": 51,
+          "fix": {
+            "range": [
+              631,
+              631
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/hooks/useScrollToLastMsg.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/FileDetailsBanner.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/FilePreviewItem.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'uploadedUrl' is assigned a value but never used.",
+          "line": 49,
+          "column": 17,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 49,
+          "endColumn": 28
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/FileViewer.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/MediaUploadComponent.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/hooks/useUploadMedia.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/media/services/uploadfileHandler.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/chats/services/apiGetChats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/Devices.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/components/SessionItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/hooks/useGetAllSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/hooks/useGetCurrentSessions.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'GetAllSessions' is defined but never used.",
+          "line": 2,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 2,
+          "endColumn": 24
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/hooks/useLogoutOtherSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/services/GetAllSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/services/GetCurrentSession.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/services/LogoutOtherSessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/devices/types/sessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/ForwardingInputBar.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 40,
+          "column": 47,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 40,
+          "endColumn": 47,
+          "fix": {
+            "range": [
+              930,
+              930
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/ScrollableChats.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 60,
+          "column": 47,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 60,
+          "endColumn": 47,
+          "fix": {
+            "range": [
+              1514,
+              1514
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 67,
+          "column": 44,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 67,
+          "endColumn": 44,
+          "fix": {
+            "range": [
+              1777,
+              1777
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/chatPopupItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/checkBox.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/forward/hooks/useCheckBox.ts",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'isChecked'. Either include it or remove the dependency array. You can also do a functional update 'setIsChecked(i => ...)' if you only need 'isChecked' in the 'setIsChecked' call.",
+          "line": 12,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 12,
+          "endColumn": 20,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [isChecked, showCheckBox]",
+              "fix": {
+                "range": [
+                  495,
+                  509
+                ],
+                "text": "[isChecked, showCheckBox]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/pin-messages/components/PinnedMessages.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/AddToBlockMenuList.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 62,
+          "column": 50,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 62,
+          "endColumn": 53,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1537,
+                  1540
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1537,
+                  1540
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 70,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 70,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              1748,
+              1748
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/BlockItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/BlockList.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/hooks/useBlock.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'QueryClient' is defined but never used.",
+          "line": 2,
+          "column": 3,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 2,
+          "endColumn": 14
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/blockUser.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/changeSettings.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-duplicate-enum-values",
+          "severity": 2,
+          "message": "Duplicate enum member value invite-permissions.",
+          "line": 10,
+          "column": 3,
+          "nodeType": "TSEnumMember",
+          "messageId": "duplicateValue",
+          "endLine": 10,
+          "endColumn": 45
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/getBlockList.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/privacy-settings/service/removeFromBlocks.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-info/ProfileInfo.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-info/components/ProfileItem.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/ProfilePictureSection.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'setSelectedImage' is assigned a value but never used.",
+          "line": 75,
+          "column": 25,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 75,
+          "endColumn": 41
+        },
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'setIsImageEditorOpen' is assigned a value but never used.",
+          "line": 76,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 76,
+          "endColumn": 49
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/ProfileSettings.test.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/ProfileSettings.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 219,
+          "column": 47,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 219,
+          "endColumn": 47,
+          "fix": {
+            "range": [
+              5506,
+              5506
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 251,
+          "column": 13,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 251,
+          "endColumn": 13,
+          "fix": {
+            "range": [
+              6289,
+              6289
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 256,
+          "column": 72,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 256,
+          "endColumn": 72,
+          "fix": {
+            "range": [
+              6421,
+              6421
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/schema/EditProfileSchema.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/DeleteProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/GetProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/UpdateProfilePicture.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/profile-settings/services/UpdateProfileSettings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/search/components/SearchBar.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Replace `⏎····(state:·RootState)·=>·state.search⏎` with `····(state:·RootState)·=>·state.search,`",
+          "line": 75,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "replace",
+          "endLine": 77,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              1684,
+              1724
+            ],
+            "text": "    (state: RootState) => state.search,"
+          }
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'performSearch'. Either include it or remove the dependency array.",
+          "line": 126,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 126,
+          "endColumn": 18,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [performSearch, searchTerm]",
+              "fix": {
+                "range": [
+                  3088,
+                  3100
+                ],
+                "text": "[performSearch, searchTerm]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/AddStory.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/ContactStoryIcon.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/Story.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryIcon.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 75,
+          "column": 96,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 75,
+          "endColumn": 96,
+          "fix": {
+            "range": [
+              1840,
+              1840
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryList.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'Close' is defined but never used.",
+          "line": 6,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 6,
+          "endColumn": 15
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 61,
+          "column": 17,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 61,
+          "endColumn": 17,
+          "fix": {
+            "range": [
+              1629,
+              1629
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 67,
+          "column": 29,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 67,
+          "endColumn": 29,
+          "fix": {
+            "range": [
+              1827,
+              1827
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 73,
+          "column": 30,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 73,
+          "endColumn": 30,
+          "fix": {
+            "range": [
+              2012,
+              2012
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryListContainer.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 30,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 31,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              816,
+              817
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryPreview.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StorySlide.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 1,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 2,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              0,
+              1
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'ReactDOM' is defined but never used.",
+          "line": 2,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 2,
+          "endColumn": 16
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 82,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 83,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              1804,
+              1805
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 121,
+          "column": 14,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 121,
+          "endColumn": 14,
+          "fix": {
+            "range": [
+              2813,
+              2813
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 129,
+          "column": 18,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 129,
+          "endColumn": 18,
+          "fix": {
+            "range": [
+              2967,
+              2967
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 151,
+          "column": 70,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 151,
+          "endColumn": 70,
+          "fix": {
+            "range": [
+              3557,
+              3557
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StorySlideCounter.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 29,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 30,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              567,
+              568
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 46,
+          "column": 35,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 46,
+          "endColumn": 35,
+          "fix": {
+            "range": [
+              1043,
+              1043
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StorySliderTooltip.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/StoryViews.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 31,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 32,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              884,
+              885
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/components/UserInfo.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 18,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 19,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              382,
+              383
+            ],
+            "text": ""
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useDeleteStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useInView.ts",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "The ref value 'ref.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'ref.current' to a variable inside the effect, and use that variable in the cleanup function.",
+          "line": 21,
+          "column": 47,
+          "nodeType": "Identifier",
+          "endLine": 21,
+          "endColumn": 54
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useMyStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/usePostStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useViewStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/hooks/useViews.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/deleteStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/getMyStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/getStories.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/getViews.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/postStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/features/stories/services/viewStory.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useCloseChat.ts",
+      "errors": [],
+      "warnings": [
+        {
+          "ruleId": "react-hooks/exhaustive-deps",
+          "severity": 1,
+          "message": "React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array.",
+          "line": 19,
+          "column": 6,
+          "nodeType": "ArrayExpression",
+          "endLine": 19,
+          "endColumn": 8,
+          "suggestions": [
+            {
+              "desc": "Update the dependencies array to be: [navigate]",
+              "fix": {
+                "range": [
+                  445,
+                  447
+                ],
+                "text": "[navigate]"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/hooks/useGlobalState.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useIndexedDB.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 27,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 27,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              725,
+              725
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 39,
+          "column": 20,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 39,
+          "endColumn": 20,
+          "fix": {
+            "range": [
+              1002,
+              1002
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useMouseLeave.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 21,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 21,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              494,
+              494
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 30,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 30,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              671,
+              671
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/hooks/useSocket.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/main.tsx",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 22,
+          "column": 16,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 22,
+          "endColumn": 16,
+          "fix": {
+            "range": [
+              568,
+              568
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/browser.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/chats/chats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/chats/media.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 15,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 15,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              404,
+              404
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 27,
+          "column": 22,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 27,
+          "endColumn": 22,
+          "fix": {
+            "range": [
+              639,
+              639
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/Sessions.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/blocklist.ts",
+      "errors": [
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'blockList' is never reassigned. Use 'const' instead.",
+          "line": 3,
+          "column": 5,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 3,
+          "endColumn": 34,
+          "fix": {
+            "range": [
+              74,
+              240
+            ],
+            "text": "const blockList: BlockedUserProps[] = [\n  {\n    id: 1,\n    name: \"Alice\",\n    username: \"alice123\",\n  },\n  {\n    id: 2,\n    name: \"Bob\",\n    username: \"bob123\",\n  },\n];"
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/chats.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/messages.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/data/users.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/devices/devices.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/fileMock.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/handlers.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/oauth/oauth.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 12,
+          "column": 11,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 12,
+          "endColumn": 13,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  228,
+                  230
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  228,
+                  230
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 20,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 20,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  345,
+                  347
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  345,
+                  347
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 26,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 26,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  453,
+                  455
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  453,
+                  455
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 41,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 41,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              861,
+              861
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 45,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 45,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  888,
+                  890
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  888,
+                  890
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 60,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 60,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              1296,
+              1296
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/privacy-settings/privacySettings.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Delete `⏎`",
+          "line": 11,
+          "column": 1,
+          "nodeType": null,
+          "messageId": "delete",
+          "endLine": 12,
+          "endColumn": 1,
+          "fix": {
+            "range": [
+              366,
+              367
+            ],
+            "text": ""
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 19,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 19,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              677,
+              677
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prefer-const",
+          "severity": 2,
+          "message": "'user' is never reassigned. Use 'const' instead.",
+          "line": 30,
+          "column": 9,
+          "nodeType": "Identifier",
+          "messageId": "useConst",
+          "endLine": 30,
+          "endColumn": 13,
+          "fix": {
+            "range": [
+              879,
+              941
+            ],
+            "text": "const user = allChats.find((item) => item.id.toString() === id);"
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 50,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 50,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1514,
+              1514
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/profile-settings/profile-picture.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 15,
+          "column": 22,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 15,
+          "endColumn": 22,
+          "fix": {
+            "range": [
+              370,
+              370
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 36,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 36,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              952,
+              952
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 47,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 47,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              1172,
+              1172
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/profile-settings/profile-settings.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/server.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/stories/mockStoriesData.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/stories/stories.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 17,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 17,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  329,
+                  331
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  329,
+                  331
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 23,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 23,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  426,
+                  428
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  426,
+                  428
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 36,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 36,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  659,
+                  661
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  659,
+                  661
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 41,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 41,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  756,
+                  758
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  756,
+                  758
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 53,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 53,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  984,
+                  986
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  984,
+                  986
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 80,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 80,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              1835,
+              1835
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 91,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 91,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              2067,
+              2067
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 94,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 94,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              2092,
+              2092
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 128,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 128,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              3129,
+              3129
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 139,
+          "column": 12,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 139,
+          "endColumn": 12,
+          "fix": {
+            "range": [
+              3353,
+              3353
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 142,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 142,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              3378,
+              3378
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 159,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 159,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              3836,
+              3836
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 170,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 170,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              4039,
+              4039
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 180,
+          "column": 22,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 180,
+          "endColumn": 22,
+          "fix": {
+            "range": [
+              4207,
+              4207
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 191,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 191,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              4388,
+              4388
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "@typescript-eslint/no-unused-vars",
+          "severity": 2,
+          "message": "'params' is defined but never used.",
+          "line": 195,
+          "column": 48,
+          "nodeType": null,
+          "messageId": "unusedVar",
+          "endLine": 195,
+          "endColumn": 54
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 202,
+          "column": 8,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 202,
+          "endColumn": 8,
+          "fix": {
+            "range": [
+              4574,
+              4574
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/login.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 13,
+          "column": 11,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 13,
+          "endColumn": 13,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  271,
+                  273
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  271,
+                  273
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 21,
+          "column": 9,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 21,
+          "endColumn": 11,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  393,
+                  395
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  393,
+                  395
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "@typescript-eslint/no-empty-object-type",
+          "severity": 2,
+          "message": "The `{}` (\"empty object\") type allows any non-nullish value, including literals like `0` and `\"\"`.\n- If that's what you want, disable this lint rule with an inline comment or configure the 'allowObjectTypes' rule option.\n- If you want a type meaning \"any object\", you probably want `object` instead.\n- If you want a type meaning \"any value\", you probably want `unknown` instead.",
+          "line": 31,
+          "column": 13,
+          "nodeType": "TSTypeLiteral",
+          "messageId": "noEmptyObject",
+          "endLine": 31,
+          "endColumn": 15,
+          "suggestions": [
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "object"
+              },
+              "fix": {
+                "range": [
+                  601,
+                  603
+                ],
+                "text": "object"
+              },
+              "desc": "Replace `{}` with `object`."
+            },
+            {
+              "messageId": "replaceEmptyObjectType",
+              "data": {
+                "replacement": "unknown"
+              },
+              "fix": {
+                "range": [
+                  601,
+                  603
+                ],
+                "text": "unknown"
+              },
+              "desc": "Replace `{}` with `unknown`."
+            }
+          ]
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 47,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 47,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1136,
+              1136
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 67,
+          "column": 10,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 67,
+          "endColumn": 10,
+          "fix": {
+            "range": [
+              1677,
+              1677
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 69,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 69,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1692,
+              1692
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/logout.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/resetpassword.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 37,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 37,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              817,
+              817
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 46,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 46,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              983,
+              983
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 48,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 48,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              998,
+              998
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 65,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 65,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1415,
+              1415
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 74,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 74,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1590,
+              1590
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 76,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 76,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1605,
+              1605
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/signup.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 39,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 39,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              870,
+              870
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 49,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 49,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1056,
+              1056
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 51,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 51,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1071,
+              1071
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/mocks/userauth/verfiyEmail.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 37,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 37,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              809,
+              809
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 46,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 46,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              999,
+              999
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 48,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 48,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1014,
+              1014
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 65,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 65,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1415,
+              1415
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 74,
+          "column": 24,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 74,
+          "endColumn": 24,
+          "fix": {
+            "range": [
+              1590,
+              1590
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 76,
+          "column": 6,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 76,
+          "endColumn": 6,
+          "fix": {
+            "range": [
+              1605,
+              1605
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/pages/Login.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/pages/Signup.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/sockets/SocketContext.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/sockets/SocketProvider.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/messages/activeMessage.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/messages/messages.ts",
+      "errors": [
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 29,
+          "column": 60,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 29,
+          "endColumn": 60,
+          "fix": {
+            "range": [
+              773,
+              773
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 44,
+          "column": 9,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 44,
+          "endColumn": 9,
+          "fix": {
+            "range": [
+              1149,
+              1149
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 50,
+          "column": 26,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 50,
+          "endColumn": 26,
+          "fix": {
+            "range": [
+              1337,
+              1337
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 60,
+          "column": 67,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 60,
+          "endColumn": 67,
+          "fix": {
+            "range": [
+              1517,
+              1517
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 64,
+          "column": 62,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 64,
+          "endColumn": 62,
+          "fix": {
+            "range": [
+              1685,
+              1685
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 73,
+          "column": 67,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 73,
+          "endColumn": 67,
+          "fix": {
+            "range": [
+              1864,
+              1864
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 77,
+          "column": 62,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 77,
+          "endColumn": 62,
+          "fix": {
+            "range": [
+              2032,
+              2032
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 95,
+          "column": 55,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 95,
+          "endColumn": 55,
+          "fix": {
+            "range": [
+              2547,
+              2547
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 106,
+          "column": 60,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 106,
+          "endColumn": 60,
+          "fix": {
+            "range": [
+              2826,
+              2826
+            ],
+            "text": ","
+          }
+        },
+        {
+          "ruleId": "prettier/prettier",
+          "severity": 2,
+          "message": "Insert `,`",
+          "line": 126,
+          "column": 32,
+          "nodeType": null,
+          "messageId": "insert",
+          "endLine": 126,
+          "endColumn": 32,
+          "fix": {
+            "range": [
+              3440,
+              3440
+            ],
+            "text": ","
+          }
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/messages/search.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/side-bar/sideBar.ts",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 48,
+          "column": 10,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 48,
+          "endColumn": 13,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  1092,
+                  1095
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  1092,
+                  1095
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/store.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/theme/theme.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/state/user/user.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/styles/GlobalStyles.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/tests/test-utils.tsx",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/media.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/messages.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/sideBar.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/socket.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/story.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/types/user.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/utils/helpers.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/utils/renderWithHighlight.tsx",
+      "errors": [
+        {
+          "ruleId": "@typescript-eslint/no-explicit-any",
+          "severity": 2,
+          "message": "Unexpected any. Specify a different type.",
+          "line": 11,
+          "column": 19,
+          "nodeType": "TSAnyKeyword",
+          "messageId": "unexpectedAny",
+          "endLine": 11,
+          "endColumn": 22,
+          "suggestions": [
+            {
+              "messageId": "suggestUnknown",
+              "fix": {
+                "range": [
+                  344,
+                  347
+                ],
+                "text": "unknown"
+              },
+              "desc": "Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct."
+            },
+            {
+              "messageId": "suggestNever",
+              "fix": {
+                "range": [
+                  344,
+                  347
+                ],
+                "text": "never"
+              },
+              "desc": "Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of."
+            }
+          ]
+        }
+      ],
+      "warnings": [
+        {
+          "ruleId": "react-refresh/only-export-components",
+          "severity": 1,
+          "message": "Fast refresh only works when a file only exports components. Move your component(s) to a separate file.",
+          "line": 3,
+          "column": 7,
+          "nodeType": "Identifier",
+          "messageId": "localComponents",
+          "endLine": 3,
+          "endColumn": 22
+        }
+      ]
+    },
+    {
+      "filePath": "/app/src/utils/socket.ts",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/utils/static-analysis-script.js",
+      "errors": [],
+      "warnings": []
+    },
+    {
+      "filePath": "/app/src/vite-env.d.ts",
+      "errors": [],
+      "warnings": []
+    }
+  ]
+}
\ No newline at end of file

From b3c5168a80d84597c461ebe8f014e90087206223 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sun, 1 Dec 2024 14:34:46 +0200
Subject: [PATCH 052/136] fix: backend changing chats model (#88)

---
 app/eslint.config.js                          |   3 +-
 .../authentication/login/hooks/useLogin.ts    |   2 +-
 app/src/features/chats/ChatItem.tsx           |  17 +-
 app/src/features/chats/Topbar.tsx             |   7 +-
 app/src/features/chats/hooks/useChats.ts      |  14 +-
 .../features/chats/services/apiGetChats.ts    |   4 +-
 app/src/mocks/chats/chats.ts                  |   4 +-
 app/src/mocks/data/chats.ts                   | 452 +++++++++---------
 8 files changed, 270 insertions(+), 233 deletions(-)

diff --git a/app/eslint.config.js b/app/eslint.config.js
index fbe07e61..5d33e303 100644
--- a/app/eslint.config.js
+++ b/app/eslint.config.js
@@ -5,12 +5,11 @@ import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
 
 import prettier from "eslint-plugin-prettier";
-import prettierConfig from "eslint-config-prettier";
 
 export default tseslint.config(
   { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, , ...tseslint.configs.recommended],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
diff --git a/app/src/features/authentication/login/hooks/useLogin.ts b/app/src/features/authentication/login/hooks/useLogin.ts
index cee2cf5c..3fba6c0c 100644
--- a/app/src/features/authentication/login/hooks/useLogin.ts
+++ b/app/src/features/authentication/login/hooks/useLogin.ts
@@ -11,9 +11,9 @@ export function useLogin() {
   const { mutate: login, isPending } = useMutation({
     mutationFn: loginApi,
     onSuccess: (data) => {
+      localStorage.setItem("sessionId", data.sessionId);
       queryClient.setQueryData(["user"], { user: data.user });
       queryClient.invalidateQueries({ queryKey: ["isAuth"] });
-      localStorage.setItem("sessionId", data.sessionId);
       dispatch(setUserInfo(data.user));
     },
   });
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 7ec75738..6971b62a 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -56,13 +56,15 @@ type ChatItemProps = {
   chat: Chat;
 };
 
-function ChatItem({ chat: { _id, members, type } }: ChatItemProps) {
+function ChatItem({
+  chat: { _id, members, type, lastMessage },
+}: ChatItemProps) {
   const name = members[0]?.screenFirstName || members[0]?.username;
   const image = members[0]?.photo?.length > 50 ? members[0]?.photo : undefined;
   const navigate = useNavigate();
 
-  const timestamp = "12:00 PM";
-  const lastMessage = "Hello";
+  const timestamp = lastMessage?.timestamp || "No messages";
+  const lastMessageContent = lastMessage?.content || "No messages";
 
   const { chatId } = useParams<{ chatId: string }>();
 
@@ -81,14 +83,17 @@ function ChatItem({ chat: { _id, members, type } }: ChatItemProps) {
       <ChatContent>
         <ChatHeader>
           <Name data-testid="chat-name">
-            {type === "private" ? name : "Group"}
+            {type === "private" ? name : `Group ${members[0]?.username}`}
           </Name>
           <Timestamp data-testid="chat-timestamp">
-            {timestamp || "No messages"}
+            {new Date(timestamp).toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit",
+            }) || "No messages"}
           </Timestamp>
         </ChatHeader>
         <LastMessage data-testid="chat-last-message">
-          {lastMessage || "No messages"}
+          {lastMessageContent || "No messages"}
         </LastMessage>
       </ChatContent>
     </Container>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 2641ad45..39f55842 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -74,13 +74,14 @@ const IconButton = styled.button`
 
 function Topbar() {
   const { chat } = useChat();
-  const name = chat?.members[0]?.screenFirstName || chat?.members[0]?.username;
-  const lastSeen = "12:00 PM";
-  const image = chat?.members[0]?.photo;
   const [isSearching, setIsSearching] = useState(false);
 
   if (!chat) return null;
 
+  const name = chat?.members[0]?.screenFirstName || chat?.members[0]?.username;
+  const lastSeen = chat?.lastMessage?.timestamp;
+  const image = chat?.members[0]?.photo;
+
   const toggleSearch = () => {
     setIsSearching(!isSearching);
   };
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 821a315b..be75f6da 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -1,12 +1,22 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAllChatsApi } from "../services/apiGetChats";
-import { Chat } from "@mocks/data/chats";
+import { ChatData } from "@mocks/data/chats";
 
 export function useChats() {
-  const { data: chats, isPending } = useQuery<Chat[]>({
+  const { data: chatData, isPending } = useQuery<ChatData>({
     queryKey: ["chats"],
     queryFn: getAllChatsApi,
   });
 
+  const chats = chatData?.chats.map((chat) => ({
+    ...chat,
+    lastMessage: chatData.lastMessages.find(
+      (lastMessage) => lastMessage.chatId === chat._id,
+    )?.lastMessage,
+    members: chat.members.map((memberId) =>
+      chatData.members.find((member) => member._id === memberId),
+    ),
+  }));
+
   return { chats, isPending };
 }
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index 3780cb4b..9e425da3 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -16,7 +16,7 @@ export async function getAllChatsApi() {
     throw new Error(data.message);
   }
 
-  return data.data?.chats;
+  return data.data;
 }
 
 export async function getChatApi(id: string) {
@@ -31,8 +31,6 @@ export async function getChatApi(id: string) {
 
   const data = await res.json();
 
-  console.log(data);
-
   if (data.status !== "success") {
     throw new Error(data.message);
   }
diff --git a/app/src/mocks/chats/chats.ts b/app/src/mocks/chats/chats.ts
index 85585499..f8e02fc2 100644
--- a/app/src/mocks/chats/chats.ts
+++ b/app/src/mocks/chats/chats.ts
@@ -1,4 +1,4 @@
-import { allChats } from "@mocks/data/chats";
+import { allChats, lastMessages, members } from "@mocks/data/chats";
 import { http, HttpResponse } from "msw";
 
 export const chats = [
@@ -6,7 +6,7 @@ export const chats = [
     return HttpResponse.json(
       {
         status: "success",
-        data: { chats: allChats },
+        data: { chats: allChats, members: members, lastMessages: lastMessages },
       },
       { status: 200 },
     );
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 404c265b..f091a2c7 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -13,295 +13,319 @@ export type Member = {
 export type Chat = {
   _id: string;
   isSeen: boolean;
-  members: Member[];
+  members: string[];
   type: "private" | "group" | "channel";
   numberOfMembers: number;
 };
 
+export type ChatData = {
+  chats: Chat[];
+  members: Member[];
+  lastMessages: {
+    chatId: string;
+    lastMessage: {
+      content: string;
+      timestaamp: string;
+    };
+  }[];
+};
+
 export const allChats: Chat[] = [
   {
     _id: "1",
     isSeen: false,
-    members: [
-      {
-        _id: "member1",
-        username: "alice_smith",
-        screenFirstName: "Alice",
-        screenLastName: "Smith",
-        phoneNumber: "+1234567890",
-        photo: "alice.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["1", "2"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "2",
     isSeen: false,
-    members: [
-      {
-        _id: "member2",
-        username: "bob_jones",
-        screenFirstName: "Bob",
-        screenLastName: "Jones",
-        phoneNumber: "+1987654321",
-        photo: "bob.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["2", "1"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "3",
     isSeen: false,
-    members: [
-      {
-        _id: "member3",
-        username: "charlie_brown",
-        screenFirstName: "Charlie",
-        screenLastName: "Brown",
-        phoneNumber: "+1567890123",
-        photo: "charlie.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["3"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "4",
     isSeen: false,
-    members: [
-      {
-        _id: "member4",
-        username: "david_miller",
-        screenFirstName: "David",
-        screenLastName: "Miller",
-        phoneNumber: "+1456789012",
-        photo: "david.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["4"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "5",
     isSeen: false,
-    members: [
-      {
-        _id: "member5",
-        username: "eve_wilson",
-        screenFirstName: "Eve",
-        screenLastName: "Wilson",
-        phoneNumber: "+1345678901",
-        photo: "eve.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["5"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "6",
     isSeen: false,
-    members: [
-      {
-        _id: "member6",
-        username: "frank_garcia",
-        screenFirstName: "Frank",
-        screenLastName: "Garcia",
-        phoneNumber: "+1234567890",
-        photo: "frank.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["6"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "7",
     isSeen: false,
-    members: [
-      {
-        _id: "member7",
-        username: "grace_lee",
-        screenFirstName: "Grace",
-        screenLastName: "Lee",
-        phoneNumber: "+1876543210",
-        photo: "grace.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["7"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "8",
     isSeen: false,
-    members: [
-      {
-        _id: "member8",
-        username: "hannah_davis",
-        screenFirstName: "Hannah",
-        screenLastName: "Davis",
-        phoneNumber: "+1765432109",
-        photo: "hannah.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["8"],
     type: "private",
     numberOfMembers: 1,
   },
   {
     _id: "9",
     isSeen: false,
-    members: [
-      {
-        _id: "member9",
-        username: "ivy_martinez",
-        screenFirstName: "Ivy",
-        screenLastName: "Martinez",
-        phoneNumber: "+1654321098",
-        photo: "ivy.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
+    members: ["9"],
     type: "private",
     numberOfMembers: 1,
   },
+];
+
+export const members: Member[] = [
+  {
+    _id: "1",
+    username: "alice_smith",
+    screenFirstName: "Alice",
+    screenLastName: "Smith",
+    phoneNumber: "+1234567890",
+    photo: "alice.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "2",
+    username: "bob_jones",
+    screenFirstName: "Bob",
+    screenLastName: "Jones",
+    phoneNumber: "+1987654321",
+    photo: "bob.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "3",
+    username: "charlie_brown",
+    screenFirstName: "Charlie",
+    screenLastName: "Brown",
+    phoneNumber: "+1567890123",
+    photo: "charlie.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "4",
+    username: "david_miller",
+    screenFirstName: "David",
+    screenLastName: "Miller",
+    phoneNumber: "+1456789012",
+    photo: "david.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "5",
+    username: "eve_wilson",
+    screenFirstName: "Eve",
+    screenLastName: "Wilson",
+    phoneNumber: "+1345678901",
+    photo: "eve.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "6",
+    username: "frank_garcia",
+    screenFirstName: "Frank",
+    screenLastName: "Garcia",
+    phoneNumber: "+1234567890",
+    photo: "frank.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "7",
+    username: "grace_lee",
+    screenFirstName: "Grace",
+    screenLastName: "Lee",
+    phoneNumber: "+1876543210",
+    photo: "grace.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "8",
+    username: "hannah_davis",
+    screenFirstName: "Hannah",
+    screenLastName: "Davis",
+    phoneNumber: "+1765432109",
+    photo: "hannah.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+  {
+    _id: "9",
+    username: "ivy_martinez",
+    screenFirstName: "Ivy",
+    screenLastName: "Martinez",
+    phoneNumber: "+1654321098",
+    photo: "ivy.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
   {
     _id: "10",
-    isSeen: false,
-    members: [
-      {
-        _id: "member10",
-        username: "jack_anderson",
-        screenFirstName: "Jack",
-        screenLastName: "Anderson",
-        phoneNumber: "+1543210987",
-        photo: "jack.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
-    type: "private",
-    numberOfMembers: 1,
+    username: "jack_anderson",
+    screenFirstName: "Jack",
+    screenLastName: "Anderson",
+    phoneNumber: "+1543210987",
+    photo: "jack.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
   },
   {
     _id: "11",
-    isSeen: false,
-    members: [
-      {
-        _id: "member11",
-        username: "kara_thomas",
-        screenFirstName: "Kara",
-        screenLastName: "Thomas",
-        phoneNumber: "+1432109876",
-        photo: "kara.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
-    type: "private",
-    numberOfMembers: 1,
+    username: "kara_thomas",
+    screenFirstName: "Kara",
+    screenLastName: "Thomas",
+    phoneNumber: "+1432109876",
+    photo: "kara.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
   },
   {
     _id: "12",
-    isSeen: false,
-    members: [
-      {
-        _id: "member12",
-        username: "liam_johnson",
-        screenFirstName: "Liam",
-        screenLastName: "Johnson",
-        phoneNumber: "+1321098765",
-        photo: "liam.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
-    type: "private",
-    numberOfMembers: 1,
+    username: "liam_johnson",
+    screenFirstName: "Liam",
+    screenLastName: "Johnson",
+    phoneNumber: "+1321098765",
+    photo: "liam.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
   },
   {
     _id: "13",
-    isSeen: false,
-    members: [
-      {
-        _id: "member13",
-        username: "mia_white",
-        screenFirstName: "Mia",
-        screenLastName: "White",
-        phoneNumber: "+1210987654",
-        photo: "mia.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
-    type: "private",
-    numberOfMembers: 1,
+    username: "mia_white",
+    screenFirstName: "Mia",
+    screenLastName: "White",
+    phoneNumber: "+1210987654",
+    photo: "mia.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
   },
   {
     _id: "14",
-    isSeen: false,
-    members: [
-      {
-        _id: "member14",
-        username: "noah_robinson",
-        screenFirstName: "Noah",
-        screenLastName: "Robinson",
-        phoneNumber: "+1109876543",
-        photo: "noah.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
-    type: "private",
-    numberOfMembers: 1,
+    username: "noah_robinson",
+    screenFirstName: "Noah",
+    screenLastName: "Robinson",
+    phoneNumber: "+1109876543",
+    photo: "noah.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
   },
   {
     _id: "15",
-    isSeen: false,
-    members: [
-      {
-        _id: "member15",
-        username: "olivia_clark",
-        screenFirstName: "Olivia",
-        screenLastName: "Clark",
-        phoneNumber: "+1098765432",
-        photo: "olivia.jpg",
-        status: "active",
-        isAdmin: false,
-        Role: "member",
-      },
-    ],
-    type: "private",
-    numberOfMembers: 1,
+    username: "olivia_clark",
+    screenFirstName: "Olivia",
+    screenLastName: "Clark",
+    phoneNumber: "+1098765432",
+    photo: "olivia.jpg",
+    status: "active",
+    isAdmin: false,
+    Role: "member",
+  },
+];
+
+export const lastMessages = [
+  {
+    chatId: "1",
+    lastMessage: {
+      content: "Hello, Alice!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "2",
+    lastMessage: {
+      content: "Hi, Bob!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "3",
+    lastMessage: {
+      content: "Hello, Charlie!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "4",
+    lastMessage: {
+      content: "Hi, David!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "5",
+    lastMessage: {
+      content: "Hello, Eve!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "6",
+    lastMessage: {
+      content: "Hi, Frank!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "7",
+    lastMessage: {
+      content: "Hello, Grace!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "8",
+    lastMessage: {
+      content: "Hi, Hannah!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
+  },
+  {
+    chatId: "9",
+    lastMessage: {
+      content: "Hello, Ivy!",
+      timestaamp: "2021-09-01T12:00:00.000Z",
+    },
   },
 ];

From 55639cdfbebd8c139fa24e9f8a9631cfc54afdb6 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sun, 1 Dec 2024 21:34:09 +0200
Subject: [PATCH 053/136] fix: make the story compatible with the BE  (#89)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* merge dev

* hotfix: fix the stories' endpoint not found

* hotfix: fix the stories' endpoint not found

* WIP:gifs
---
 app/package-lock.json                         | 248 ++++++++++++++++++
 app/package.json                              |   1 +
 .../side-bar/chats/ChatsSideBar.tsx           |   6 +-
 .../components/side-bar/chats/SearchBar.tsx   |   6 +-
 app/src/constants.ts                          |   7 +-
 app/src/data/icons.tsx                        |  28 +-
 app/src/features/chats/ChatInput.tsx          |   2 +-
 app/src/features/chats/SendButton.tsx         |  19 +-
 .../features/chats/emojies/EmojiPicker.tsx    | 205 ++++++++++++---
 app/src/features/chats/emojies/GifsPicker.tsx |  73 ++++++
 app/src/features/chats/hooks/useGIFS.ts       |  34 +++
 ...ollToLastMsg.tsx => useScrollToLastMsg.ts} |   0
 app/src/features/chats/hooks/useStickers.ts   |  34 +++
 .../features/chats/hooks/useVoiceRecorder.ts  |  41 +++
 app/src/features/chats/services/GetGIFS.ts    |  30 +++
 .../features/chats/services/GetStickers.ts    |  28 ++
 .../features/stories/components/AddStory.tsx  |   2 +-
 .../stories/components/ContactStoryIcon.tsx   |   6 +-
 .../features/stories/components/StoryIcon.tsx |   6 +-
 .../features/stories/components/StoryList.tsx |  23 +-
 .../stories/components/StoryListContainer.tsx |   5 +-
 .../stories/components/StorySlide.tsx         |  10 +-
 .../stories/components/StoryViews.tsx         |   5 +-
 .../features/stories/components/UserInfo.tsx  |   7 +-
 .../features/stories/services/getMyStories.ts |   2 +-
 .../features/stories/services/getStories.ts   |   2 +-
 app/src/mocks/stories/mockStoriesData.ts      |  48 ++--
 app/src/mocks/stories/stories.ts              |   4 +-
 app/src/styles/GlobalStyles.tsx               |   7 +-
 app/src/types/messages.ts                     |   6 +
 app/src/types/story.ts                        |   8 +-
 31 files changed, 784 insertions(+), 119 deletions(-)
 create mode 100644 app/src/features/chats/emojies/GifsPicker.tsx
 create mode 100644 app/src/features/chats/hooks/useGIFS.ts
 rename app/src/features/chats/hooks/{useScrollToLastMsg.tsx => useScrollToLastMsg.ts} (100%)
 create mode 100644 app/src/features/chats/hooks/useStickers.ts
 create mode 100644 app/src/features/chats/hooks/useVoiceRecorder.ts
 create mode 100644 app/src/features/chats/services/GetGIFS.ts
 create mode 100644 app/src/features/chats/services/GetStickers.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index ab9baf78..37bceefb 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -78,6 +78,7 @@
         "typescript-eslint": "^8.7.0",
         "undici": "^6.20.1",
         "vite": "^5.4.8",
+        "vite-plugin-mkcert": "^1.17.6",
         "vite-tsconfig-paths": "^5.0.1"
       }
     },
@@ -3816,6 +3817,173 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/auth-token": "^4.0.0",
+        "@octokit/graphql": "^7.1.0",
+        "@octokit/request": "^8.3.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz",
+      "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
+      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/request": "^8.3.0",
+        "@octokit/types": "^13.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "22.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
+      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.1.tgz",
+      "integrity": "sha512-ryqobs26cLtM1kQxqeZui4v8FeznirUsksiA+RYemMPJ7Micju0WSkv50dBksTuZks9O5cg4wp+t8fZ/cLY56g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.5.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz",
+      "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-13.2.2.tgz",
+      "integrity": "sha512-EI7kXWidkt3Xlok5uN43suK99VWqc8OaIMktY9d9+RNKl69juoTyxmLoWPIZgJYzi41qj/9zU7G/ljnNOJ5AFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.5.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "^5"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz",
+      "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/endpoint": "^9.0.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz",
+      "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "20.1.1",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.1.1.tgz",
+      "integrity": "sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/core": "^5.0.2",
+        "@octokit/plugin-paginate-rest": "11.3.1",
+        "@octokit/plugin-request-log": "^4.0.0",
+        "@octokit/plugin-rest-endpoint-methods": "13.2.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "13.6.2",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.2.tgz",
+      "integrity": "sha512-WpbZfZUcZU77DrSW4wbsSgTPfKcp286q3ItaIgvSbBpZJlu6mnYXAkjZz6LVZPXkEvLIM8McanyZejKTYUHipA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/openapi-types": "^22.2.0"
+      }
+    },
     "node_modules/@open-draft/deferred-promise": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
@@ -5243,6 +5411,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -5532,6 +5712,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6069,6 +6256,13 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -6922,6 +7116,27 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -9678,6 +9893,13 @@
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.13.0.tgz",
@@ -11145,6 +11367,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+      "integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -11325,6 +11554,25 @@
         }
       }
     },
+    "node_modules/vite-plugin-mkcert": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.6.tgz",
+      "integrity": "sha512-4JR1RN0HEg/w17eRQJ/Ve2pSa6KCVQcQO6yKtIaKQCFDyd63zGfXHWpygBkvvRSpqa0GcqNKf0fjUJ0HiJQXVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/rest": "^20.1.1",
+        "axios": "^1.7.4",
+        "debug": "^4.3.6",
+        "picocolors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=v16.7.0"
+      },
+      "peerDependencies": {
+        "vite": ">=3"
+      }
+    },
     "node_modules/vite-tsconfig-paths": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.3.tgz",
diff --git a/app/package.json b/app/package.json
index eb57f345..6187235a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -85,6 +85,7 @@
     "typescript-eslint": "^8.7.0",
     "undici": "^6.20.1",
     "vite": "^5.4.8",
+    "vite-plugin-mkcert": "^1.17.6",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "msw": {
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index ccea0368..0e10a98a 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -31,9 +31,9 @@ const StyledButtonContainer = styled.div`
 
 function ChatsSideBar({ children }: ChatsSideBarProps) {
   return (
-    <StyledChatsSideBar data-testid="chats-sidebar">
-      <ChatsSidebarHeader data-testid="chats-sidebar-header" />
-      {/* <StoryListContainer /> */}
+    <StyledChatsSideBar>
+      <ChatsSidebarHeader />
+      <StoryListContainer />
       {children}
       <StyledButtonContainer data-testid="button-container">
         <AddStory data-testid="add-story-button" />
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index e3be439b..77522df2 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -43,7 +43,11 @@ const StyledInput = styled.input`
 function SearchBar() {
   return (
     <StyledSearchBar data-testid="general-search-bar">
-      <StyledInput type="text" placeholder="Search" data-set="general-search" />
+      <StyledInput
+        type="text"
+        placeholder="Search"
+        data-testid="general-search"
+      />
       <StyledSearchIcon data-testid="general-serach-icon" />
     </StyledSearchBar>
   );
diff --git a/app/src/constants.ts b/app/src/constants.ts
index 5bfbde17..bc256c9d 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -5,11 +5,13 @@ const {
   VITE_PORT: PORT,
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
+  VITE_GIPHY_API_KEY: GIPHY_API_KEY,
+  VITE_GIPHY_API_URL: GIPHY_API_URL,
 } = import.meta.env;
 
 const MOBILE_VIEW = "(max-width: 600px)";
 const DESKTOP_VIEW = "(min-width: 600px)";
-
+const GIPHY_LIMIT = 10;
 export {
   ENVIRONMENT,
   RECAPTCHA_SITE_KEY,
@@ -19,4 +21,7 @@ export {
   STATIC_MEDIA_URL,
   MOBILE_VIEW,
   DESKTOP_VIEW,
+  GIPHY_API_KEY,
+  GIPHY_API_URL,
+  GIPHY_LIMIT,
 };
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 5bbc6c0a..6d734452 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -40,7 +40,9 @@ import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PinIcon from "@mui/icons-material/Pin";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
-
+import GifBoxOutlinedIcon from "@mui/icons-material/GifBoxOutlined";
+import EmojiEmotionsOutlinedIcon from "@mui/icons-material/EmojiEmotionsOutlined";
+import StickyNote2OutlinedIcon from "@mui/icons-material/StickyNote2Outlined";
 enum icons {
   BlockIcon,
   SettingsOutlinedIcon,
@@ -86,6 +88,9 @@ enum icons {
   Pin,
   Reply,
   PushPin,
+  GifBox,
+  EmojiBox,
+  StickerBox,
 }
 
 type iconStrings = keyof typeof icons;
@@ -341,6 +346,27 @@ const iconMap: { [K in iconStrings]: React.ReactNode } = {
       }}
     />
   ),
+  GifBox: (
+    <GifBoxOutlinedIcon
+      sx={{
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+  EmojiBox: (
+    <EmojiEmotionsOutlinedIcon
+      sx={{
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
+  StickerBox: (
+    <StickyNote2OutlinedIcon
+      sx={{
+        fontSize: "1.5rem",
+      }}
+    />
+  ),
 };
 
 function getIcon(iconName?: iconStrings) {
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index d9cb17d0..ea83475b 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -103,7 +103,7 @@ function ChatInput() {
   };
 
   const showCheckBox = useSelector(
-    (state: RootState) => state.messages.showCheckBox,
+    (state: RootState) => state.messages.showCheckBox
   );
 
   const [showForwardUsers, setShowForwardUsers] = useState(false);
diff --git a/app/src/features/chats/SendButton.tsx b/app/src/features/chats/SendButton.tsx
index ff982dfd..b9435513 100644
--- a/app/src/features/chats/SendButton.tsx
+++ b/app/src/features/chats/SendButton.tsx
@@ -7,17 +7,14 @@ interface ButtonType {
 
 function RecordInput({ type, onClick }: ButtonType) {
   return (
-
-   
-      <CircleIcon
-        onClick={onClick}
-        data-testid="record-icon"
-        $icon={type === "record" ? "Record" : "Send"}
-        $padding={0.6}
-        $color="white"
-        $bgColor="var(--accent-color)"
-      />
-
+    <CircleIcon
+      onClick={onClick}
+      data-testid="record-icon"
+      $icon={type === "record" ? "Record" : "Send"}
+      $padding={0.6}
+      $color="white"
+      $bgColor="var(--accent-color)"
+    />
   );
 }
 
diff --git a/app/src/features/chats/emojies/EmojiPicker.tsx b/app/src/features/chats/emojies/EmojiPicker.tsx
index b80a2ee5..f1490c85 100644
--- a/app/src/features/chats/emojies/EmojiPicker.tsx
+++ b/app/src/features/chats/emojies/EmojiPicker.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { Theme } from "@state/theme/theme";
 import EmojiPicker, {
@@ -6,17 +6,22 @@ import EmojiPicker, {
   Theme as emojitheme,
 } from "emoji-picker-react";
 import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import { StickerTap } from "types/messages";
+import { useTrendingGifs } from "../hooks/useGIFS";
+import GifPicker from "./GifsPicker";
+import { SearchOutlined } from "@mui/icons-material";
 
-const StyledEmojiPickerContainer = styled.div`
+const Container = styled.div`
   z-index: 4;
   position: absolute;
   width: 30%;
   min-width: 300px;
-  height: 35%;
+  height: 50%;
   min-height: 400px;
-  max-height: 400px;
+  max-height: 500px;
   bottom: 105%;
-  background: var(--color-secondary);
+  background: var(--color-background);
   border: 1px solid #e6e6e6;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -24,51 +29,187 @@ const StyledEmojiPickerContainer = styled.div`
   padding: 0;
 `;
 
-const EmojiPickerWrapper = styled.div`
+const TabBar = styled.div`
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1px solid #e6e6e6;
+  background: var(--color-secondary);
+`;
+
+const Tab = styled.button<{ active: boolean }>`
+  flex: 1;
+  padding: 10px;
+  font-size: 1rem;
+  background: ${({ active }) =>
+    active ? "var(--color-item-active)" : "var(--color-background)"};
+  border: none;
+  cursor: pointer;
+  color: var(--color-primary);
+  font-weight: ${({ active }) => (active ? "bold" : "normal")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background: var(--color-item-active);
+  }
+`;
+
+const EmojiWrapper = styled.div`
+  height: 90%;
   .emoji-picker {
     background: none;
     border: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
-    gap: 8px;
   }
+`;
 
-  .emoji {
-    font-size: 1.2rem;
-    padding: 5px;
-    cursor: pointer;
-    border-radius: 5px;
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: column;
+  padding: 10px;
+  height: 100%;
+`;
+const StyledSearchBar = styled.div`
+  margin-left: 1rem;
+  position: relative;
+  width: 100%;
 
-    &:hover {
-      background: #f0f0f0;
-    }
+  &:focus-within > svg {
+    color: var(--color-search-border);
   }
 `;
 
-interface EmojiPickerItemProps {
+const StyledSearchIcon = styled(SearchOutlined)`
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-secondary);
+  font-size: 1.2rem;
+`;
+
+const SearchInput = styled.input`
+  background-color: var(--color-chat-hover);
+  border: 1px solid var(--pattern-color);
+  border-radius: var(--border-radius-searchbar);
+  color: var(--color-text);
+  font-size: 1rem;
+  padding: 0.525rem 0 0.525rem 2.5rem;
+  outline: solid 1px transparent;
+  width: 100%;
+
+  &:focus {
+    border-color: var(--color-search-border);
+    outline-color: var(--color-search-border);
+    caret-color: var(--color-search-border);
+  }
+  &::placeholder {
+    color: var(--color-text-secondary);
+  }
+`;
+interface PickerProps {
   setInputText: React.Dispatch<React.SetStateAction<string>>;
+  sendGIF: (gifUrl: string) => void;
+  sendSticker: (stickerUrl: string) => void;
 }
 
-export default function EmojiPickerItem({
+export default function Picker({
   setInputText,
-}: EmojiPickerItemProps) {
+  sendGIF,
+  sendSticker,
+}: PickerProps) {
+  const { trendingGifs } = useTrendingGifs();
   const currentTheme = useAppSelector((state) => state.theme.value);
+  const [activeTab, setActiveTab] = useState<StickerTap>(StickerTap.emoji);
+  const [gifs, setGifs] = useState<string[]>(trendingGifs);
+  const [gifSearch, setGifSearch] = useState("");
+  const [stickers] = useState<string[]>([
+    // Replace these placeholders with sticker URLs
+    "https://example.com/sticker1.png",
+    "https://example.com/sticker2.png",
+  ]);
 
-  const handleEmojiClicked = (emojiData: EmojiClickData, event: MouseEvent) => {
+  const handleEmojiClicked = (emojiData: EmojiClickData) => {
     setInputText((text) => text + emojiData.emoji);
   };
 
+  const handleGIFSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setGifSearch(e.target.value);
+  };
+
+  const handleGIFSelect = (gifUrl: string) => {
+    sendGIF(gifUrl);
+  };
+
+  const handleStickerSelect = (stickerUrl: string) => {
+    sendSticker(stickerUrl);
+  };
+
   return (
-    <StyledEmojiPickerContainer>
-      <EmojiPickerWrapper>
-        <EmojiPicker
-          width="100%"
-          theme={
-            currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
-          }
-          onEmojiClick={handleEmojiClicked}
-        />
-      </EmojiPickerWrapper>
-    </StyledEmojiPickerContainer>
+    <Container>
+      <TabBar>
+        <Tab
+          active={activeTab === StickerTap.emoji}
+          onClick={() => setActiveTab(StickerTap.emoji)}
+        >
+          {getIcon("EmojiBox")}
+        </Tab>
+        <Tab
+          active={activeTab === StickerTap.gif}
+          onClick={() => setActiveTab(StickerTap.gif)}
+        >
+          {getIcon("GifBox")}
+        </Tab>
+        <Tab
+          active={activeTab === StickerTap.sticker}
+          onClick={() => setActiveTab(StickerTap.sticker)}
+        >
+          {getIcon("StickerBox")}
+        </Tab>
+      </TabBar>
+      <EmojiWrapper>
+        {activeTab === StickerTap.emoji && (
+          <EmojiPicker
+            width="100%"
+            theme={
+              currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+            }
+            onEmojiClick={handleEmojiClicked}
+            lazyLoadEmojis={true}
+          />
+        )}
+        {activeTab === StickerTap.gif && (
+          <Wrapper className="hi">
+            <StyledSearchBar>
+              <SearchInput
+                type="text"
+                placeholder="Search"
+                onChange={handleGIFSearch}
+                value={gifSearch}
+                data-testid="gifs-search"
+              />
+              <StyledSearchIcon />
+            </StyledSearchBar>
+            <GifPicker
+              searchQuery={gifSearch}
+              onGifSelect={(id) => console.log(id)}
+            />
+          </Wrapper>
+        )}
+        {activeTab === StickerTap.sticker && (
+          <Wrapper>
+            {stickers?.map((sticker, index) => (
+              <img
+                key={index}
+                src={sticker}
+                alt={`sticker-${index}`}
+                onClick={() => handleStickerSelect(sticker)}
+              />
+            ))}
+          </Wrapper>
+        )}
+      </EmojiWrapper>
+    </Container>
   );
 }
diff --git a/app/src/features/chats/emojies/GifsPicker.tsx b/app/src/features/chats/emojies/GifsPicker.tsx
new file mode 100644
index 00000000..9ef63a41
--- /dev/null
+++ b/app/src/features/chats/emojies/GifsPicker.tsx
@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import { useGifs, useTrendingGifs } from "../hooks/useGIFS";
+
+interface GifPickerProps {
+  onGifSelect: (gifUrl: string) => void;
+  searchQuery?: string;
+}
+interface Gif {
+  id: string;
+  images: any;
+  title: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const GifGrid = styled.div`
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+  gap: 2px;
+`;
+
+const GifItem = styled.img`
+  width: 90px;
+  height: 90px;
+  object-fit: fill !important;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const GifPicker = (props: GifPickerProps) => {
+  const { onGifSelect, searchQuery } = props;
+  const { gifs, isLoading } = useGifs(searchQuery || "");
+  const { trendingGifs } = useTrendingGifs();
+  return (
+    <Container>
+      {isLoading ? (
+        <GifGrid>
+          {gifs?.map((gif: Gif) => (
+            <GifItem
+              key={gif.id}
+              src={gif.images.fixed_height.url}
+              alt={gif.title}
+              onClick={() => onGifSelect(gif.images.fixed_height.url)}
+              data-testid={`gif-item-${gif.id}`}
+            />
+          ))}
+        </GifGrid>
+      ) : (
+        <GifGrid>
+          {trendingGifs?.map((gif: Gif) => (
+            <GifItem
+              key={gif.id}
+              src={gif.images.fixed_height.url}
+              alt={gif.title}
+              onClick={() => onGifSelect(gif.images.fixed_height.url)}
+              data-testid={`gif-item-${gif.id}`}
+            />
+          ))}
+        </GifGrid>
+      )}
+    </Container>
+  );
+};
+
+export default GifPicker;
diff --git a/app/src/features/chats/hooks/useGIFS.ts b/app/src/features/chats/hooks/useGIFS.ts
new file mode 100644
index 00000000..2c644161
--- /dev/null
+++ b/app/src/features/chats/hooks/useGIFS.ts
@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getGifs as getGifsAPI } from "../services/GetGIFS";
+import { getTrendingGifs as getTrendingGifsAPI } from "../services/GetGIFS";
+import { GIPHY_LIMIT } from "@constants";
+
+function useGifs(query: string) {
+  const {
+    data: gifs,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["gifs", query],
+    queryFn: () => getGifsAPI(query, GIPHY_LIMIT),
+    enabled: !!query,
+  });
+
+  return { gifs, error, isLoading };
+}
+
+function useTrendingGifs() {
+  const {
+    data: trendingGifs,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["trendingGifs"],
+    queryFn: () => getTrendingGifsAPI(GIPHY_LIMIT),
+  });
+
+  return { trendingGifs, error, isLoading };
+}
+
+export { useTrendingGifs, useGifs };
diff --git a/app/src/features/chats/hooks/useScrollToLastMsg.tsx b/app/src/features/chats/hooks/useScrollToLastMsg.ts
similarity index 100%
rename from app/src/features/chats/hooks/useScrollToLastMsg.tsx
rename to app/src/features/chats/hooks/useScrollToLastMsg.ts
diff --git a/app/src/features/chats/hooks/useStickers.ts b/app/src/features/chats/hooks/useStickers.ts
new file mode 100644
index 00000000..8abc9eda
--- /dev/null
+++ b/app/src/features/chats/hooks/useStickers.ts
@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getStickers as getStickersAPI } from "../services/GetStickers";
+import { getTrendingStickers as getTrendingStickersAPI } from "../services/GetStickers";
+import { GIPHY_LIMIT } from "@constants";
+
+function useStickers(query: string) {
+  const {
+    data: stickers,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["Stickers", query],
+    queryFn: () => getStickersAPI(query, GIPHY_LIMIT),
+    enabled: !!query,
+  });
+
+  return { stickers, error, isLoading };
+}
+
+function useTrendingStickers() {
+  const {
+    data: trendingStickers,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["trendingStickers"],
+    queryFn: () => getTrendingStickersAPI(GIPHY_LIMIT),
+  });
+
+  return { trendingStickers, error, isLoading };
+}
+
+export { useTrendingStickers, useStickers };
diff --git a/app/src/features/chats/hooks/useVoiceRecorder.ts b/app/src/features/chats/hooks/useVoiceRecorder.ts
new file mode 100644
index 00000000..72ba60e6
--- /dev/null
+++ b/app/src/features/chats/hooks/useVoiceRecorder.ts
@@ -0,0 +1,41 @@
+import { useState, useRef } from "react";
+
+const useVoiceRecorder = () => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaRecorderRef.current = new MediaRecorder(stream);
+
+      const chunks: Blob[] = [];
+      mediaRecorderRef.current.ondataavailable = (event: BlobEvent) => {
+        chunks.push(event.data);
+      };
+
+      mediaRecorderRef.current.onstop = () => {
+        const audio = new Blob(chunks, { type: "audio/webm" });
+        setAudioBlob(audio);
+        stream.getTracks().forEach((track) => track.stop());
+      };
+
+      mediaRecorderRef.current.start();
+      setIsRecording(true);
+    } catch (error) {
+      console.error("Error starting recording:", error);
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorderRef.current) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+    }
+  };
+
+  return { isRecording, audioBlob, startRecording, stopRecording };
+};
+
+export default useVoiceRecorder;
diff --git a/app/src/features/chats/services/GetGIFS.ts b/app/src/features/chats/services/GetGIFS.ts
new file mode 100644
index 00000000..297b8b92
--- /dev/null
+++ b/app/src/features/chats/services/GetGIFS.ts
@@ -0,0 +1,30 @@
+import { GIPHY_API_KEY as API_KEY, GIPHY_API_URL as API_URL } from "@constants";
+async function getGifs(query: string, limit: number = 20) {
+  const res = await fetch(
+    `${API_URL}/gifs/search?api_key=${API_KEY}&q=${query}&limit=${limit}&offset=0&rating=g&lang=en`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch GIFs");
+  }
+
+  const data = await res.json();
+
+  console.log(data.data);
+  return data.data;
+}
+
+async function getTrendingGifs(limit: number = 20) {
+  const res = await fetch(
+    `${API_URL}/gifs/trending?api_key=${API_KEY}&limit=${limit}&offset=0&rating=g&lang=en`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch GIFs");
+  }
+  const data = await res.json();
+  console.log(data.data);
+  return data.data;
+}
+
+export { getGifs, getTrendingGifs };
diff --git a/app/src/features/chats/services/GetStickers.ts b/app/src/features/chats/services/GetStickers.ts
new file mode 100644
index 00000000..2427d139
--- /dev/null
+++ b/app/src/features/chats/services/GetStickers.ts
@@ -0,0 +1,28 @@
+import { GIPHY_API_KEY as API_KEY, GIPHY_API_URL as API_URL } from "@constants";
+async function getStickers(query: string, limit: number = 20) {
+  const res = await fetch(
+    `${API_URL}/stickers/search?api_key=${API_KEY}&q=${query}&limit=${limit}&offset=0&rating=g&lang=en`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch stickers");
+  }
+
+  const data = await res.json();
+  console.log(data.data);
+  return data.data;
+}
+
+async function getTrendingStickers(limit: number = 20) {
+  const res = await fetch(
+    `${API_URL}/stickers/trending?api_key=${API_KEY}&limit=${limit}&offset=0&rating=g&lang=en`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch stickers");
+  }
+  const data = await res.json();
+  return data.data;
+}
+
+export { getStickers, getTrendingStickers };
diff --git a/app/src/features/stories/components/AddStory.tsx b/app/src/features/stories/components/AddStory.tsx
index fe5ee08d..d4027340 100644
--- a/app/src/features/stories/components/AddStory.tsx
+++ b/app/src/features/stories/components/AddStory.tsx
@@ -72,7 +72,7 @@ function AddStory() {
           ref={fileInputRef}
           accept="image/*"
           onChange={handleImageUpload}
-          data-testid="story-upload"
+          data-testid="story-upload-input"
           id="story-upload"
         />
       </StyledStoryCreator>
diff --git a/app/src/features/stories/components/ContactStoryIcon.tsx b/app/src/features/stories/components/ContactStoryIcon.tsx
index 86b6405a..0ba5e9b9 100644
--- a/app/src/features/stories/components/ContactStoryIcon.tsx
+++ b/app/src/features/stories/components/ContactStoryIcon.tsx
@@ -6,7 +6,7 @@ interface StoryIconProps {
   isMe: boolean;
   stories: story[];
   seenCounter: number;
-  avatar?: string;
+  photo?: string;
   name: string;
 }
 
@@ -58,7 +58,7 @@ const StyledName = styled.p`
 `;
 
 function ContactStoryIcon(props: StoryIconProps) {
-  const { isMe, stories, avatar, name } = props;
+  const { isMe, stories, photo, name } = props;
   const storiesCounter = stories.length;
   const seenCounter = stories.filter((story: story) => story.viewed).length;
 
@@ -69,7 +69,7 @@ function ContactStoryIcon(props: StoryIconProps) {
       $isMe={isMe}
     >
       <StyledImage
-        src={avatar ? `${STATIC_MEDIA_URL}/${avatar}` : "/default-avatar.png"}
+        src={photo ? `${STATIC_MEDIA_URL}/${photo}` : "/default-avatar.png"}
         alt={`${name}'s avatar`}
       />
       <StyledName>{isMe ? "Your Story" : name}</StyledName>
diff --git a/app/src/features/stories/components/StoryIcon.tsx b/app/src/features/stories/components/StoryIcon.tsx
index 0e5b3b65..985ea306 100644
--- a/app/src/features/stories/components/StoryIcon.tsx
+++ b/app/src/features/stories/components/StoryIcon.tsx
@@ -4,7 +4,7 @@ import Avatar from "@components/Avatar";
 
 interface StoryIconProps {
   stories: story[];
-  avatar?: string;
+  photo?: string;
   name: string;
   onView?: (userId: string) => void;
   isCollapsed?: boolean;
@@ -57,7 +57,7 @@ const StyledName = styled.p`
 function StoryIcon(props: StoryIconProps) {
   const {
     stories,
-    avatar,
+    photo,
     name,
     userId,
     onView,
@@ -97,7 +97,7 @@ function StoryIcon(props: StoryIconProps) {
         $segmentColors={segmentColors}
         $isMyStory={isMyStory}
       >
-        <Avatar name={name} image={avatar} />
+        <Avatar name={name} image={photo} />
       </StyledImageContainer>
       {!isCollapsed && <StyledName>{displayName}</StyledName>}
     </StyledContainer>
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
index 77f79d26..46afdc61 100644
--- a/app/src/features/stories/components/StoryList.tsx
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -3,7 +3,6 @@ import StoryIcon from "./StoryIcon";
 import { story, userStories } from "types/story";
 import StorySlide from "./StorySlide";
 import { useEffect, useState } from "react";
-import { Close } from "@mui/icons-material";
 import CloseButton from "@components/CloseButton";
 
 interface StoryListProps {
@@ -57,19 +56,19 @@ function StoryList(props: StoryListProps) {
       setUserName(
         currentStoryUserId == "me"
           ? "My Story"
-          : userStories.find((user) => user.id === currentStoryUserId)?.name ||
-              ""
+          : userStories.find((user) => user.userId === currentStoryUserId)
+              ?.name || ""
       );
       setUserAvatar(
         currentStoryUserId == "me"
           ? userInfo.photo || ""
-          : userStories.find((user) => user.id === currentStoryUserId)
-              ?.avatar || ""
+          : userStories.find((user) => user.userId === currentStoryUserId)
+              ?.photo || ""
       );
       setStories(
         currentStoryUserId == "me"
           ? myStories
-          : userStories.find((user) => user.id === currentStoryUserId)
+          : userStories.find((user) => user.userId === currentStoryUserId)
               ?.stories || []
       );
     }
@@ -86,7 +85,7 @@ function StoryList(props: StoryListProps) {
         <StorySlide
           userId={currentStoryUserId}
           name={userName}
-          avatar={userAvatar}
+          photo={userAvatar}
           getNextUserStories={() => handleStoryClick("")}
           stories={stories}
           onClose={() => handleStoryClick("")}
@@ -99,7 +98,7 @@ function StoryList(props: StoryListProps) {
             <StoryIcon
               data-testid="my-story-icon"
               name="My Story"
-              avatar={userInfo.photo}
+              photo={userInfo.photo}
               stories={myStories}
               isMyStory={true}
               onView={handleStoryClick}
@@ -108,12 +107,12 @@ function StoryList(props: StoryListProps) {
           )}
           {userStories.map((userStory: userStories) => (
             <StoryIcon
-              key={userStory.id}
-              data-testid={`story-icon-${userStory.id}`}
+              key={userStory.userId}
+              data-testid={`story-icon-${userStory.userId}`}
               name={userStory.name}
-              avatar={userStory.avatar}
+              photo={userStory.photo}
               stories={userStory.stories}
-              userId={userStory.id}
+              userId={userStory.userId}
               onView={handleStoryClick}
             />
           ))}
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index dabfd9b5..62530cda 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -27,7 +27,6 @@ const StyledContainer = styled.div<{ $isOpened: boolean }>`
         `}
 
   z-index: 1;
-
 `;
 
 function StoryListContainer() {
@@ -61,9 +60,9 @@ function StoryListContainer() {
             <StoryIcon
               isCollapsed={true}
               name={userStory.name}
-              avatar={userStory.avatar}
+              photo={userStory.photo}
               stories={userStory.stories}
-              data-testid={`story-icon-${userStory.id}`}
+              data-testid={`story-icon-${userStory.userId}`}
             />
           )}
           list={userStories}
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
index b50f3686..10a45506 100644
--- a/app/src/features/stories/components/StorySlide.tsx
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -1,6 +1,3 @@
-
-import ReactDOM from "react-dom";
-
 import { useInView } from "../hooks/useInView";
 import { story } from "types/story";
 import StorySlideCounter from "./StorySlideCounter";
@@ -20,7 +17,7 @@ import Popup from "@components/Popup";
 interface StorySlideProps {
   userId?: string;
   name: string;
-  avatar?: string;
+  photo?: string;
   getNextUserStories: () => void;
   stories: story[];
   onClose: () => void;
@@ -79,11 +76,10 @@ const StyledUserInfo = styled.div`
   left: 2.5rem;
 
   z-index: 1;
-
 `;
 
 function StorySlide(props: StorySlideProps) {
-  const { avatar, name, stories, getNextUserStories, onClose } = props;
+  const { photo, name, stories, getNextUserStories, onClose } = props;
   const { ref, inView } = useInView({ threshold: 0.5 });
   const { viewStory } = useViewStory();
   const [index, setIndex] = useState(0);
@@ -200,7 +196,7 @@ function StorySlide(props: StorySlideProps) {
           <StyledUserInfo>
             <UserInfo
               name={name}
-              avatar={avatar || ""}
+              photo={photo || ""}
               isVertical={true}
               elapsedTime={getElapsedTime(stories[index].timestamp)}
             />
diff --git a/app/src/features/stories/components/StoryViews.tsx b/app/src/features/stories/components/StoryViews.tsx
index 78d1070b..9ad3c17d 100644
--- a/app/src/features/stories/components/StoryViews.tsx
+++ b/app/src/features/stories/components/StoryViews.tsx
@@ -28,7 +28,6 @@ const StyledViewsContainer = styled.div<{ $isOpened: boolean }>`
   color: white;
 `;
 const StyledViews = styled.ul`
-
   z-index: 1;
 
   display: flex;
@@ -98,8 +97,8 @@ function StoryViews(props: StoryViewsProps) {
           {views.map((view: storyView) => (
             <StyledView key={view.id}>
               <UserInfo
-                name={view.username}
-                avatar={view?.avatar || ""}
+                name={view.name}
+                photo={view?.photo || ""}
                 elapsedTime={getElapsedTime(view.seenTime)}
                 isVertical={true}
               />
diff --git a/app/src/features/stories/components/UserInfo.tsx b/app/src/features/stories/components/UserInfo.tsx
index 23eeaa5f..132e6cd0 100644
--- a/app/src/features/stories/components/UserInfo.tsx
+++ b/app/src/features/stories/components/UserInfo.tsx
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 
 interface UserInfoProps {
   name: string;
-  avatar: string;
+  photo: string;
   elapsedTime: string;
   isVertical?: boolean;
 }
@@ -15,7 +15,6 @@ const StyledStoryHeader = styled.div`
   gap: 0.7rem;
 
   z-index: 1;
-
 `;
 const StyledUserInfo = styled.div<{ $isVertical?: boolean }>`
   display: flex;
@@ -40,11 +39,11 @@ const StyledElapsedTime = styled.p`
   text-align: left;
 `;
 function UserInfo(props: UserInfoProps) {
-  const { name, avatar, elapsedTime, isVertical } = props;
+  const { name, photo, elapsedTime, isVertical } = props;
 
   return (
     <StyledStoryHeader>
-      <Avatar name={name} image={avatar} />
+      <Avatar name={name} image={photo} />
       <StyledUserInfo $isVertical={isVertical}>
         <Heading as="h5">{name}</Heading>
         <StyledElapsedTime>{elapsedTime}</StyledElapsedTime>
diff --git a/app/src/features/stories/services/getMyStories.ts b/app/src/features/stories/services/getMyStories.ts
index 11a312ed..28abb8ce 100644
--- a/app/src/features/stories/services/getMyStories.ts
+++ b/app/src/features/stories/services/getMyStories.ts
@@ -2,7 +2,7 @@ import { API_URL } from "@constants";
 
 async function getMyStories() {
   try {
-    const response = await fetch(`${API_URL}/users/stories/me`, {
+    const response = await fetch(`${API_URL}/users/stories`, {
       method: "GET",
       credentials: "include",
       headers: {
diff --git a/app/src/features/stories/services/getStories.ts b/app/src/features/stories/services/getStories.ts
index 4596bbef..32100b9a 100644
--- a/app/src/features/stories/services/getStories.ts
+++ b/app/src/features/stories/services/getStories.ts
@@ -2,7 +2,7 @@ import { API_URL } from "@constants";
 
 async function getStories() {
   try {
-    const response = await fetch(`${API_URL}/users/stories`, {
+    const response = await fetch(`${API_URL}/users/contacts/stories`, {
       method: "GET",
       credentials: "include",
       headers: {
diff --git a/app/src/mocks/stories/mockStoriesData.ts b/app/src/mocks/stories/mockStoriesData.ts
index 01e2591a..7aaa7908 100644
--- a/app/src/mocks/stories/mockStoriesData.ts
+++ b/app/src/mocks/stories/mockStoriesData.ts
@@ -11,29 +11,29 @@ const MOCK_MY_STORIES: story[] = [
       {
         id: "1",
         userId: "1",
-        username: "Ahmed Hamdy",
-        avatar: "https://i.pravatar.cc/70?=0.2",
+        name: "Ahmed Hamdy",
+        photo: "https://i.pravatar.cc/70?=0.2",
         seenTime: new Date().toISOString(),
       },
       {
         id: "2",
         userId: "12",
-        username: "John Doe",
-        avatar: "https://i.pravatar.cc/70?=0.25",
+        name: "John Doe",
+        photo: "https://i.pravatar.cc/70?=0.25",
         seenTime: new Date().toISOString(),
       },
       {
         id: "3",
         userId: "13",
-        username: "Alice Bob",
-        avatar: "https://i.pravatar.cc/70?=0.35",
+        name: "Alice Bob",
+        photo: "https://i.pravatar.cc/70?=0.35",
         seenTime: new Date().toISOString(),
       },
       {
         id: "4",
         userId: "14",
-        username: "Bob Alice",
-        avatar: "https://i.pravatar.cc/70?=0.45",
+        name: "Bob Alice",
+        photo: "https://i.pravatar.cc/70?=0.45",
         seenTime: new Date().toISOString(),
       },
     ],
@@ -41,9 +41,9 @@ const MOCK_MY_STORIES: story[] = [
 ];
 const MOCK_OTHER_USERS_STORIES = [
   {
-    id: "1",
+    userId: "1",
     name: "Ahmed Hamdy",
-    avatar: "https://i.pravatar.cc/70?=0.7",
+    photo: "https://i.pravatar.cc/70?=0.7",
     stories: [
       {
         id: "110001",
@@ -56,9 +56,9 @@ const MOCK_OTHER_USERS_STORIES = [
     ],
   },
   {
-    id: "3",
+    userId: "3",
     name: "John Doe",
-    avatar: "https://i.pravatar.cc/70?=0.45",
+    photo: "https://i.pravatar.cc/70?=0.45",
     stories: [
       {
         id: "110004",
@@ -78,9 +78,9 @@ const MOCK_OTHER_USERS_STORIES = [
     ],
   },
   {
-    id: "4",
+    userId: "4",
     name: "Bob Alice",
-    avatar: "https://i.pravatar.cc/70?=0.55",
+    photo: "https://i.pravatar.cc/70?=0.55",
     stories: [
       {
         id: "110008",
@@ -101,9 +101,9 @@ const MOCK_OTHER_USERS_STORIES = [
     ],
   },
   {
-    id: "5",
+    userId: "5",
     name: "Peter Barker",
-    avatar: "https://i.pravatar.cc/70?=0.05",
+    photo: "https://i.pravatar.cc/70?=0.05",
     stories: [
       {
         id: "110010",
@@ -120,29 +120,29 @@ const MOCK_VIEWS: storyView[] = [
   {
     id: "1",
     userId: "1",
-    username: "Ahmed Hamdy",
-    avatar: "https://i.pravatar.cc/70?=0.2",
+    name: "Ahmed Hamdy",
+    photo: "https://i.pravatar.cc/70?=0.2",
     seenTime: new Date().toISOString(),
   },
   {
     id: "2",
     userId: "12",
-    username: "John Doe",
-    avatar: "https://i.pravatar.cc/70?=0.25",
+    name: "John Doe",
+    photo: "https://i.pravatar.cc/70?=0.25",
     seenTime: new Date().toISOString(),
   },
   {
     id: "3",
     userId: "13",
-    username: "Alice Bob",
-    avatar: "https://i.pravatar.cc/70?=0.35",
+    name: "Alice Bob",
+    photo: "https://i.pravatar.cc/70?=0.35",
     seenTime: new Date().toISOString(),
   },
   {
     id: "4",
     userId: "14",
-    username: "Bob Alice",
-    avatar: "https://i.pravatar.cc/70?=0.45",
+    name: "Bob Alice",
+    photo: "https://i.pravatar.cc/70?=0.45",
     seenTime: new Date().toISOString(),
   },
 ];
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
index e190f217..6feb2a4a 100644
--- a/app/src/mocks/stories/stories.ts
+++ b/app/src/mocks/stories/stories.ts
@@ -172,7 +172,7 @@ export const storiesMock = [
     }
   }),
 
-  http.get("/users/stories/me", async () => {
+  http.get("/users/stories", async () => {
     return HttpResponse.json(
       {
         data: MOCK_MY_STORIES,
@@ -181,7 +181,7 @@ export const storiesMock = [
     );
   }),
 
-  http.get("/users/stories", async () => {
+  http.get("/users/contacts/stories", async () => {
     return HttpResponse.json(
       {
         data: MOCK_OTHER_USERS_STORIES,
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 3b9dfa66..3e818ea4 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -53,6 +53,7 @@ const GlobalStyles = createGlobalStyle`
     
     --pattern-color: #c3bfc5a6;
   
+    --new-chat-color: #ffffff;
     --color-background-compact-menu: #4c90b218;
     --color-background-compact-menu-hover: #4c90b23b;
     
@@ -96,10 +97,12 @@ const GlobalStyles = createGlobalStyle`
       var(--chat-background-mid-left)
     );
 
+    
     --bg-image-opacity: 100%;
     
     --chat-wallpaper-bg: url("/assets/bg-dark.png");
     
+    --new-chat-color: #36373a;
     --color-background: #192b35;
     --color-background-secondary: #24343e;
     --color-background-secondary-accent: #22313a;
@@ -130,10 +133,12 @@ const GlobalStyles = createGlobalStyle`
 
     --scrollbar-color: rgba(255, 255, 255, .2);
     --color-avatar: linear-gradient(135deg, #72C6EF, #004E92);
+    
   }
 
   --story-views-background: #181a1b;
   --story-views-background-hover: #1e2021;
+
   --color-background-own-1: #6573F8;
   --color-background-own-2: #7644CB;
   --color-background-own-3: #8849B4;
@@ -156,6 +161,7 @@ const GlobalStyles = createGlobalStyle`
   --color-peer-5: #65aadd;
   --color-peer-bg-5: #65aadd1a;
   --color-peer-bg-active-5: #65aadd2b;
+  
 
   --color-peer-6: #ee7aae;
   --color-peer-bg-6: #ee7aae1a;
@@ -180,7 +186,6 @@ const GlobalStyles = createGlobalStyle`
   --color-error: #e53935;
   --color-error-shade: #c62828;
   --color-success: rgb(0, 199, 62);
-
   font-size: 16px;
 }
 
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 3ffae3ef..4cbea43a 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -35,3 +35,9 @@ export interface MessageInterface {
   replyMessageId: string | null;
   media: string;
 }
+
+export enum StickerTap {
+  gif,
+  emoji,
+  sticker,
+}
diff --git a/app/src/types/story.ts b/app/src/types/story.ts
index e198486f..e60a81ab 100644
--- a/app/src/types/story.ts
+++ b/app/src/types/story.ts
@@ -1,8 +1,8 @@
 interface storyView {
   id: string;
   userId: string;
-  username: string;
-  avatar?: string;
+  name: string;
+  photo?: string;
   seenTime: string;
 }
 interface story {
@@ -15,9 +15,9 @@ interface story {
   viewed?: boolean;
 }
 interface userStories {
-  id: string;
+  userId: string;
   name: string;
-  avatar: string;
+  photo: string;
   stories: story[];
 }
 

From e60f7d37e4534d3da28ef4a63c90ba5fc878e9d3 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sun, 1 Dec 2024 23:02:23 +0200
Subject: [PATCH 054/136] =?UTF-8?q?=E2=9C=A8=20(messaging):=20Integrate=20?=
 =?UTF-8?q?messages=20with=20backend=20(#90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💥 (messaging): Pagination logic with MUCH problems to be handled

* 👽️ (messaging): Update messages interface to match backend

* 💡 (messaging): Added TODOS in message type to change

* 🎨 (pagination): Redux messages are now synced with sockets/api updates

TODO: make redux initial state array of messages for each chat

* 🤡 (messaging): Changed mock messages data

* ✨ (messaging): Integrate messages with backend

yet pagination problem (just in rendering)
---
 app/package-lock.json                         |  34 +-
 app/package.json                              |   2 +
 app/socket-server/index.js                    |   1 -
 app/src/features/chats/ChatBody.tsx           |  47 +-
 app/src/features/chats/Message.tsx            |   6 +-
 app/src/features/chats/MessageBox.tsx         |   6 +-
 app/src/features/chats/ReplyWrapper.tsx       |   3 +
 .../features/chats/hooks/useFetchNextPage.tsx |  48 ++
 .../features/chats/hooks/useMessageSender.ts  |  21 +-
 .../chats/media/services/uploadfileHandler.ts |   2 +-
 .../chats/services/apiFetchNextPage.ts        |  40 ++
 app/src/features/forward/ScrollableChats.tsx  |   8 +-
 app/src/mocks/chats/pagination.ts             |  25 +
 app/src/mocks/data/messages.ts                | 448 +++++++++++-------
 app/src/mocks/handlers.ts                     |   2 +
 app/src/sockets/SocketProvider.tsx            |   4 +-
 app/src/state/messages/messages.ts            |  34 +-
 app/src/types/messages.ts                     |  34 +-
 18 files changed, 516 insertions(+), 249 deletions(-)
 create mode 100644 app/src/features/chats/hooks/useFetchNextPage.tsx
 create mode 100644 app/src/features/chats/services/apiFetchNextPage.ts
 create mode 100644 app/src/mocks/chats/pagination.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index 37bceefb..7730c3c0 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -17,6 +17,7 @@
         "@tanstack/react-query": "^5.59.13",
         "@tanstack/react-query-devtools": "^5.59.15",
         "@types/react-google-recaptcha": "^2.1.9",
+        "axios": "^1.7.8",
         "date-fns": "^4.1.0",
         "emoji-picker-react": "^4.12.0",
         "idb": "^8.0.0",
@@ -28,6 +29,7 @@
         "react-hook-form": "^7.53.0",
         "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
+        "react-intersection-observer": "^9.13.1",
         "react-modal-image": "^2.6.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
@@ -5408,7 +5410,6 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/axios": {
@@ -5423,6 +5424,17 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -5999,7 +6011,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
@@ -6250,7 +6261,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -7171,7 +7181,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
       "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -9168,7 +9177,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -9178,7 +9186,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -10114,6 +10121,21 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/app/package.json b/app/package.json
index 6187235a..01c4f2ee 100644
--- a/app/package.json
+++ b/app/package.json
@@ -24,6 +24,7 @@
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-query-devtools": "^5.59.15",
     "@types/react-google-recaptcha": "^2.1.9",
+    "axios": "^1.7.8",
     "date-fns": "^4.1.0",
     "emoji-picker-react": "^4.12.0",
     "idb": "^8.0.0",
@@ -35,6 +36,7 @@
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
+    "react-intersection-observer": "^9.13.1",
     "react-modal-image": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
diff --git a/app/socket-server/index.js b/app/socket-server/index.js
index 184a10ff..d5f6d954 100644
--- a/app/socket-server/index.js
+++ b/app/socket-server/index.js
@@ -20,7 +20,6 @@ io.on("connection", (socket) => {
     console.log("Message received from client:", data);
     callback({ success: true, message: "sent seccussfully", res: Date.now() });
     socket.join(data.chatId);
-    console.log(data.chatId);
     socket.to(data.chatId).emit("RECEIVE_MESSAGE", { ...data, id: Date.now() });
   });
 
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index e6049f5f..5c9a3065 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -3,9 +3,13 @@ import { useSelector } from "react-redux";
 
 import { RootState } from "@state/store";
 import Message from "./Message";
+import { useInView } from "@features/stories/hooks/useInView";
+import { useEffect } from "react";
+import { useFetchNextPage } from "./hooks/useFetchNextPage";
 
 const ScrollContainer = styled.div`
   width: 100%;
+  /* margin-top: 100px; */
   height: 87dvh;
   overflow-y: auto;
   position: relative;
@@ -35,19 +39,38 @@ const ScrollContainer = styled.div`
 function ChatBody() {
   const messages = useSelector((state: RootState) => state.messages.messages);
 
+  const { fetchNextPage, data } = useFetchNextPage();
+
+  const { inView, ref } = useInView();
+
+  useEffect(() => {
+    console.log(inView);
+    if (inView) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, inView]);
+
+  console.log(data?.pages);
+
+  //TODO: fix the ordering of pages and message within each page
+  //TODO: fix new page scroll to the top most message
   return (
-    <ScrollContainer>
-      {messages.map((data, index) => {
-        return (
-          <Message
-            key={index}
-            index={index}
-            messagesLength={messages.length}
-            data={data}
-          />
-        );
-      })}
-    </ScrollContainer>
+    <>
+      <ScrollContainer>
+        <div ref={ref}></div>
+
+        {messages.map((data, index) => {
+          return (
+            <Message
+              key={data._id}
+              index={index}
+              messagesLength={messages.length}
+              data={data}
+            />
+          );
+        })}
+      </ScrollContainer>
+    </>
   );
 }
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 282d451b..8312cdde 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 
 import {
   setShowCheckBox,
-  setIsOptionListOpen,
   pinMessage,
   unpinMessage,
 } from "@state/messages/messages";
@@ -126,10 +125,9 @@ function Message({
   index,
   messagesLength,
   data: {
-    id,
+    _id: id,
     senderId,
     content,
-    isOptionListOpen,
     isPinned,
     chatId,
     isReply,
@@ -189,7 +187,7 @@ function Message({
 
   function forwardOnClick() {
     dispatch(setShowCheckBox({ showCheckBox: !showCheckBox }));
-    dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
+    // dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
   }
 
   return (
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index 9305e617..d12e0081 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -60,8 +60,8 @@ function extractMessageData(
   if (id === msg?.senderId) name = "you";
   else {
     const chat =
-      msg && allChats.find((chat) => chat.id.toString() === msg?.senderId);
-    name = chat?.name;
+      msg && allChats.find((chat) => chat._id === msg?.senderId);
+    name = `${chat?.members[0].screenFirstName} ${chat?.members[0].screenLastName}`; 
   }
 
   return { msg, name };
@@ -71,7 +71,7 @@ function getMessageById(
   messages: MessageInterface[],
   messageId: string
 ): MessageInterface | undefined {
-  return messages.find((message) => message.id === messageId);
+  return messages.find((message) => message._id === messageId);
 }
 
 function MessageBox({ messageId }: MessageBoxProps) {
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index f7c7cdbe..1b8173d7 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -35,6 +35,9 @@ export default function ReplyWrapper({ setInput }: Props) {
     if (activeMessage.state === "edit") setInput("");
   }
 
+  console.log(activeMessage);
+  
+
   return (
     <Container data-testid="reply-wrapper">
       <Icon>{getIcon(activeMessage.state === "edit" ? "Edit" : "Reply")}</Icon>
diff --git a/app/src/features/chats/hooks/useFetchNextPage.tsx b/app/src/features/chats/hooks/useFetchNextPage.tsx
new file mode 100644
index 00000000..75f18516
--- /dev/null
+++ b/app/src/features/chats/hooks/useFetchNextPage.tsx
@@ -0,0 +1,48 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { apiFetchNextPage } from "../services/apiFetchNextPage";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { mergeMessages } from "@state/messages/messages";
+
+function useFetchNextPage() {
+  const { chatId } = useParams();
+  const dispatch = useDispatch();
+
+  const {
+    data,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+  } = useInfiniteQuery({
+    queryKey: [`chat-${chatId}-pages`],
+    queryFn: ({ pageParam = 1 }) =>
+      apiFetchNextPage({ chatId: chatId!, pageParam }),
+    getNextPageParam: (lastPage) => lastPage.nextPage,
+    initialPageParam: 1,
+  });
+
+  useEffect(() => {
+    if (data) {
+      const lastFetchedPage = data.pages[data.pages.length - 1];
+      if (lastFetchedPage) {
+        dispatch(mergeMessages({ messages: lastFetchedPage.messages }));
+      }
+    }
+  }, [data, chatId, dispatch]);
+
+  return {
+    data,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+  };
+}
+
+export { useFetchNextPage };
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 10718e38..9751bfa9 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useSocket } from "@hooks/useSocket";
 import { useAppSelector } from "@hooks/useGlobalState";
-import { MessageInterface } from "types/messages";
+import { MessageInterface, MessageStatus } from "types/messages";
 
 export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
@@ -9,7 +9,7 @@ export const useMessageSender = () => {
   const activeMessage = useAppSelector((state) => state.activeMessage);
   const { chatId } = useParams<{ chatId: string }>();
 
-  const handleSendMessage = (data: string, file: string) => {
+  const handleSendMessage = (data: string, file?: string) => {
     if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id!, data, chatId!);
       return;
@@ -19,19 +19,18 @@ export const useMessageSender = () => {
 
     if (data || file) {
       const message: MessageInterface = {
-        id: "",
+        _id: "",
+        timestamp: new Date().toISOString(),
         content: data,
+        contentType: "normal",
+        isPinned: false,
+        isForward: false,
+        isAnnouncement: false,
         senderId: userId,
-        type: 0,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString(),
         chatId: chatId!,
+
         parentMessageId: "",
-        isDeleted: false,
-        isPinned: false,
-        deleteType: 2,
-        status: 0,
-        isOptionListOpen: false,
+        status: MessageStatus.sent,
         isReply: isReply,
         replyMessageId: isReply ? activeMessage.id : null,
         media: file,
diff --git a/app/src/features/chats/media/services/uploadfileHandler.ts b/app/src/features/chats/media/services/uploadfileHandler.ts
index 94f7eacc..94d664ec 100644
--- a/app/src/features/chats/media/services/uploadfileHandler.ts
+++ b/app/src/features/chats/media/services/uploadfileHandler.ts
@@ -23,5 +23,5 @@ export async function uploadFile(file: File | null) {
     throw new Error(data.message || "Failed to upload file");
   }
 
-  return STATIC_MEDIA_URL + data.data?.mediaFileName || "";
+  return STATIC_MEDIA_URL + "/" + data.data?.mediaFileName || "";
 }
diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
new file mode 100644
index 00000000..faa20809
--- /dev/null
+++ b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -0,0 +1,40 @@
+import { API_URL } from "@constants";
+
+async function apiFetchNextPage({
+  chatId,
+  pageParam = 1,
+}: {
+  pageParam?: number;
+  chatId: string;
+}) {
+  console.log(chatId);
+  console.log(pageParam);
+  const res = await fetch(
+    `${API_URL}/chats/messages/${chatId}?page=${pageParam}`,
+    {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    }
+  );
+
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  console.log(data);
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return { messages: data.data.messages, nextPage: data.data.nextPage };
+}
+
+export { apiFetchNextPage };
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index 3bc75938..bdcc5161 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -64,7 +64,7 @@ function ScrollableChats(props: Props) {
 
   const handleSubmit = () => {
     const messagesToForward = messages.filter((message) =>
-      selectedMessages.includes(message.id)
+      selectedMessages.includes(message._id)
     );
 
     messagesToForward.map((message) => {
@@ -85,9 +85,9 @@ function ScrollableChats(props: Props) {
       <ScrollContainer>
         {allChats?.map((item) => {
           const data: ChatPopupItemProps = {
-            id: item.id.toString(),
-            name: item.name,
-            username: item.name.toLowerCase() + 123,
+            id: item._id,
+            name: item.members[0].screenFirstName,
+            username: item.members[0].username,
           };
           return (
             <StylingWrapper
diff --git a/app/src/mocks/chats/pagination.ts b/app/src/mocks/chats/pagination.ts
new file mode 100644
index 00000000..d2edd057
--- /dev/null
+++ b/app/src/mocks/chats/pagination.ts
@@ -0,0 +1,25 @@
+import { newMessages } from "@mocks/data/messages";
+import { http, HttpResponse } from "msw";
+
+export const paginationMock = [
+  http.get("/chats/messages/:chatId", async ({ params, request }) => {
+    const url = new URL(request.url);
+
+    console.log(url.searchParams.get("page"));
+
+    const page = parseInt(url.searchParams.get("page") || "1", 10);
+    const limit = parseInt(url.searchParams.get("limit") || "10", 10);
+    const startIndex = (page - 1) * limit;
+    const endIndex = startIndex + limit;
+    const paginatedMessages = newMessages.slice(startIndex, endIndex);
+
+    return HttpResponse.json(
+      {
+        status: "success",
+        data: { messages: paginatedMessages, nextPage: page + 1 },
+        message: "Messages retrieved successfully",
+      },
+      { status: 200 }
+    );
+  }),
+];
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
index 02e1af52..fd4c0360 100644
--- a/app/src/mocks/data/messages.ts
+++ b/app/src/mocks/data/messages.ts
@@ -1,236 +1,358 @@
-import {
-  DeleteType,
-  MessageInterface,
-  MessageStatus,
-  MessageTypes,
-} from "types/messages";
+import { MessageInterface, MessageStatus } from "types/messages";
 
 const messages: MessageInterface[] = [
   {
-    id: "1",
-    content: "Hey there!",
+    _id: "msg1",
+    timestamp: new Date().toISOString(),
+    content: "Hello there!",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:00:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:00:00").toISOString(),
-    chatId: "1",
+    chatId: "chat001",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
     status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "2",
-    content: "Hi! How are you?",
+    _id: "msg2",
+    timestamp: new Date().toISOString(),
+    content: "Check this document.",
+    contentType: "file",
+    isPinned: false,
+    isForward: true,
+    isAnnouncement: false,
     senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:01:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:01:00").toISOString(),
-    chatId: "1",
+    chatId: "chat001",
     parentMessageId: "",
-    isDeleted: false,
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "https://example.com/doc.pdf",
+  },
+  {
+    _id: "msg3",
+    timestamp: new Date().toISOString(),
+    content: "Don't forget the meeting tomorrow.",
+    contentType: "text",
     isPinned: true,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "user003",
+    chatId: "2",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "3",
-    content: "I'm good, thanks! What about you?",
+    _id: "msg4",
+    timestamp: new Date().toISOString(),
+    content: "Here's the photo from the event.",
+    contentType: "image",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:02:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:02:00").toISOString(),
-    chatId: "1",
+    chatId: "chat002",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
     status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "4",
-    content: "I'm doing well! What's new?",
-    senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:03:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:03:00").toISOString(),
-    chatId: "1",
-    parentMessageId: "",
-    isDeleted: false,
+    _id: "msg5",
+    timestamp: new Date().toISOString(),
+    content: "Can you confirm this?",
+    contentType: "text",
     isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat003",
+    parentMessageId: "",
+    status: MessageStatus.error,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "5",
-    content: "Just working on some stuff. How about you?",
-    senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:04:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:04:00").toISOString(),
-    chatId: "1",
+    _id: "msg6",
+    timestamp: new Date().toISOString(),
+    content: "Reminder: Deadline is tomorrow!",
+    contentType: "text",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "2",
+    chatId: "chat003",
     parentMessageId: "",
-    isDeleted: false,
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg7",
+    timestamp: new Date().toISOString(),
+    content: "Could you send me the file again?",
+    contentType: "text",
     isPinned: false,
-    deleteType: DeleteType.none,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat004",
+    parentMessageId: "",
     status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isReply: true,
+    replyMessageId: "msg2",
+    media: "",
   },
   {
-    id: "6",
-    content: "Same here! Busy day ahead.",
+    _id: "msg8",
+    timestamp: new Date().toISOString(),
+    content: "Here's the updated report.",
+    contentType: "file",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:05:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:05:00").toISOString(),
-    chatId: "1",
+    chatId: "chat004",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "https://example.com/report.pdf",
   },
   {
-    id: "7",
-    content: "Yeah, same. Lots of things to get done.",
+    _id: "msg9",
+    timestamp: new Date().toISOString(),
+    content: "Meeting notes are attached.",
+    contentType: "file",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:06:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:06:00").toISOString(),
-    chatId: "1",
+    chatId: "chat005",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "8",
-    content: "I hear you. Do you have any plans for the weekend?",
+    _id: "msg10",
+    timestamp: new Date().toISOString(),
+    content: "This message failed to deliver.",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:07:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:07:00").toISOString(),
-    chatId: "1",
+    chatId: "chat005",
     parentMessageId: "",
-    isDeleted: false,
+    status: MessageStatus.error,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg11",
+    timestamp: new Date().toISOString(),
+    content: "Here's a link to the presentation.",
+    contentType: "link",
     isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isForward: true,
+    isAnnouncement: false,
+    senderId: "2",
+    chatId: "chat006",
+    parentMessageId: "",
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "9",
-    content: "Nothing specific, just relaxing. You?",
+    _id: "msg12",
+    timestamp: new Date().toISOString(),
+    content: "Great job on the project!",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:08:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:08:00").toISOString(),
-    chatId: "1",
+    chatId: "chat006",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "10",
-    content: "I'm planning to go hiking if the weather's nice.",
+    _id: "msg13",
+    timestamp: new Date().toISOString(),
+    content: "Here's an audio file.",
+    contentType: "audio",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:09:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:09:00").toISOString(),
-    chatId: "1",
+    chatId: "chat007",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
     status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "11",
-    content: "That sounds fun! Where do you usually go?",
+    _id: "msg14",
+    timestamp: new Date().toISOString(),
+    content: "Here are some event details.",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: true,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:10:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:10:00").toISOString(),
-    chatId: "1",
+    chatId: "chat007",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "12",
-    content: "There's a great trail nearby. It's not too difficult.",
+    _id: "msg15",
+    timestamp: new Date().toISOString(),
+    content: "This is a pinned announcement.",
+    contentType: "text",
+    isPinned: true,
+    isForward: false,
+    isAnnouncement: true,
     senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:11:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:11:00").toISOString(),
-    chatId: "1",
+    chatId: "chat008",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "13",
-    content: "Nice! I might have to try it sometime.",
+    _id: "msg16",
+    timestamp: new Date().toISOString(),
+    content: "Here's an error message.",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:12:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:12:00").toISOString(),
-    chatId: "1",
+    chatId: "chat008",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: false,
-    deleteType: DeleteType.none,
-    status: MessageStatus.sent,
-    isOptionListOpen: false,
+    status: MessageStatus.error,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
   {
-    id: "14",
-    content: "Definitely! It's a great way to clear your mind.",
+    _id: "msg17",
+    timestamp: new Date().toISOString(),
+    content: "Did you check the document?",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "2",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:13:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:13:00").toISOString(),
-    chatId: "1",
+    chatId: "chat009",
     parentMessageId: "",
-    isDeleted: false,
-    isPinned: true,
-    deleteType: DeleteType.none,
     status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isReply: true,
+    replyMessageId: "msg9",
+    media: "",
   },
   {
-    id: "15",
-    content: "I agree, nature has a calming effect.",
+    _id: "msg18",
+    timestamp: new Date().toISOString(),
+    content: "Here's a quick video update.",
+    contentType: "video",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
     senderId: "1",
-    type: MessageTypes.normal,
-    createdAt: new Date("2024-11-27T10:14:00").toISOString(),
-    updatedAt: new Date("2024-11-27T10:14:00").toISOString(),
-    chatId: "1",
+    chatId: "chat009",
     parentMessageId: "",
-    isDeleted: false,
+    status: MessageStatus.delivered,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg19",
+    timestamp: new Date().toISOString(),
+    content: "Congratulations on your achievement!",
+    contentType: "text",
+    isPinned: false,
+    isForward: false,
+    isAnnouncement: false,
+    senderId: "1",
+    chatId: "chat010",
+    parentMessageId: "",
+    status: MessageStatus.seen,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
+  },
+  {
+    _id: "msg20",
+    timestamp: new Date().toISOString(),
+    content: "Meeting scheduled for next week.",
+    contentType: "text",
     isPinned: true,
-    deleteType: DeleteType.none,
+    isForward: false,
+    isAnnouncement: true,
+    senderId: "2",
+    chatId: "chat010",
+    parentMessageId: "",
     status: MessageStatus.sent,
-    isOptionListOpen: false,
+    isReply: false,
+    replyMessageId: null,
+    media: "",
   },
 ];
 
+const generateMessages = (count: number): MessageInterface[] => {
+  return Array.from({ length: count }, (_, index) => {
+    const id = index + 21; // Start after the 20th message
+    const contentTypes = ["text", "file", "image", "audio", "video", "link"];
+    const statuses = [
+      MessageStatus.sent,
+      MessageStatus.delivered,
+      MessageStatus.seen,
+      MessageStatus.error,
+    ];
+
+    return {
+      _id: `msg${id}`,
+      timestamp: new Date().toISOString(),
+      content: `This is message number ${id}`,
+      contentType: contentTypes[index % contentTypes.length],
+      isPinned: id % 10 === 0, // Pin every 10th message
+      isForward: id % 5 === 0, // Mark every 5th message as forwarded
+      isAnnouncement: id % 7 === 0, // Mark every 7th message as an announcement
+      senderId: ((id % 3) + 1).toString(), // Rotate between sender IDs 1, 2, and 3
+      chatId: `chat00${(id % 10) + 1}`, // Assign to chat IDs 1 through 10
+      parentMessageId: "",
+      status: statuses[id % statuses.length], // Rotate between statuses
+      isReply: id % 4 === 0, // Mark every 4th message as a reply
+      replyMessageId: id % 4 === 0 ? `msg${Math.max(id - 1, 1)}` : null, // Reply to the previous message
+      media: id % 3 === 0 ? `https://example.com/media${id}` : "", // Add media for every 3rd message
+    };
+  });
+};
+
+// Generate 50 additional messages
+export const newMessages = generateMessages(50);
 export { messages };
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index d8318040..c4b19c92 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -11,6 +11,7 @@ import { profilePictureMock } from "./profile-settings/profile-picture";
 import { storiesMock } from "./stories/stories";
 import { chats } from "./chats/chats";
 import { devicesMock } from "./devices/devices";
+import { paginationMock } from "./chats/pagination";
 import { media } from "./chats/media";
 
 export default [
@@ -28,5 +29,6 @@ export default [
   ...profilePictureMock,
   ...storiesMock,
   ...devicesMock,
+  ...paginationMock,
   ...media,
 ];
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index b5c40f4a..b78dc0f7 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -132,8 +132,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         ({ success, message, res }: AcknowledgmentResponse) => {
           if (success) {
             console.log(message);
-            const id = res;
-            handleIncomingMessage(dispatch, { ...sentMessage, id });
+            const _id = res;
+            handleIncomingMessage(dispatch, { ...sentMessage, _id });
           }
         },
       );
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
index 6348e279..b93b3e51 100644
--- a/app/src/state/messages/messages.ts
+++ b/app/src/state/messages/messages.ts
@@ -1,4 +1,3 @@
-import { messages } from "@mocks/data/messages";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { MessageInterface } from "types/messages";
 
@@ -10,7 +9,7 @@ interface MessagesState {
 }
 
 const initialState: MessagesState = {
-  messages: messages,
+  messages: [],
   isTyping: false,
   showCheckBox: false,
   selectedMessages: [],
@@ -30,7 +29,7 @@ const messagesSlice = createSlice({
     ) => {
       state.messages = state.messages.filter((message) => {
         const { chatId, id } = action.payload;
-        if (message.chatId == chatId) return message.id !== id;
+        if (message.chatId == chatId) return message._id !== id;
         else return message;
       });
     },
@@ -46,7 +45,7 @@ const messagesSlice = createSlice({
       const { chatId, messageId, content } = action.payload;
 
       const message = state.messages.find(
-        (msg) => msg.id === messageId && msg,
+        (msg) => msg._id === messageId && msg,
         chatId === chatId
       );
 
@@ -61,7 +60,7 @@ const messagesSlice = createSlice({
     ) => {
       const { messageId, chatId } = action.payload;
       const message = state.messages.find(
-        (msg) => msg.id === messageId && msg.chatId == chatId
+        (msg) => msg._id === messageId && msg.chatId == chatId
       );
       if (message) {
         message.isPinned = true;
@@ -74,7 +73,7 @@ const messagesSlice = createSlice({
     ) => {
       const { messageId, chatId } = action.payload;
       const message = state.messages.find(
-        (msg) => msg.id === messageId && msg.chatId == chatId
+        (msg) => msg._id === messageId && msg.chatId == chatId
       );
       if (message) {
         message.isPinned = false;
@@ -101,20 +100,6 @@ const messagesSlice = createSlice({
       state.showCheckBox = showCheckBox;
     },
 
-    setIsOptionListOpen: (
-      state,
-      action: PayloadAction<{ value: boolean; id: string }>
-    ) => {
-      const { id, value } = action.payload;
-      state.messages.forEach((msg) => {
-        if (msg.id === id) {
-          msg.isOptionListOpen = value;
-        } else {
-          msg.isOptionListOpen = false;
-        }
-      });
-    },
-
     SelectMessage: (state, action: PayloadAction<{ id: string }>) => {
       const { id } = action.payload;
       state.selectedMessages.push(id);
@@ -126,6 +111,13 @@ const messagesSlice = createSlice({
         (msgId) => msgId !== id
       );
     },
+
+    mergeMessages: (
+      state,
+      action: PayloadAction<{ messages: MessageInterface[] }>
+    ) => {
+      state.messages = [...action.payload.messages, ...state.messages];
+    },
   },
 });
 
@@ -138,9 +130,9 @@ export const {
   unpinMessage,
   setIsTyping,
   setShowCheckBox,
-  setIsOptionListOpen,
   SelectMessage,
   removeSelectedMessage,
+  mergeMessages,
 } = messagesSlice.actions;
 export default messagesSlice.reducer;
 export type { MessageInterface, MessagesState };
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 4cbea43a..ca126943 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -1,15 +1,3 @@
-export enum MessageTypes {
-  "announcement",
-  "forward",
-  "normal",
-}
-
-export enum DeleteType {
-  "all",
-  "only-me",
-  "none",
-}
-
 export enum MessageStatus {
   "sent",
   "delivered",
@@ -18,22 +6,26 @@ export enum MessageStatus {
 }
 
 export interface MessageInterface {
-  id: string;
+  _id: string;
+
+  //TODO: needs to be Date
+  timestamp: string;
   content: string;
+  contentType: string;
+  isPinned: boolean;
+  isForward: boolean;
+  isAnnouncement: boolean;
   senderId: string;
-  type: MessageTypes;
-  createdAt: string;
-  updatedAt: string;
   chatId: string;
+
   parentMessageId: string;
-  isDeleted: boolean;
-  isPinned: boolean;
-  deleteType: DeleteType;
   status: MessageStatus;
-  isOptionListOpen: boolean;
+  
+  media?: string;
+
+  //TODO: should use parentMessageId
   isReply: boolean;
   replyMessageId: string | null;
-  media: string;
 }
 
 export enum StickerTap {

From 1b4d7289664f19716254b1e59351b5adff7dbe8a Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Mon, 2 Dec 2024 02:46:03 +0200
Subject: [PATCH 055/136] hotfix: Make addStory button sticky (#91)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* merge dev

* hotfix: fix the stories' endpoint not found

* hotfix: fix the stories' endpoint not found

* WIP:gifs

* fix: make {add story} icon sticky

* fix: make [add story] icon sticky
---
 app/package-lock.json                         | 221 +++++++++++++++++-
 app/src/components/CircleIcon.tsx             |   2 +-
 .../side-bar/chats/ChatsSideBar.tsx           |  14 +-
 app/src/features/chats/StartNewChat.tsx       |   2 +-
 .../features/stories/components/AddStory.tsx  |   2 +-
 .../features/stories/components/StoryIcon.tsx |  33 +--
 .../features/stories/components/StoryList.tsx |   5 +-
 .../stories/components/StoryListContainer.tsx |  15 +-
 .../stories/components/StorySlide.tsx         |  26 ++-
 .../stories/components/StoryViews.tsx         | 119 ----------
 .../features/stories/hooks/useDeleteStory.ts  |   3 +-
 app/src/features/stories/hooks/useViews.ts    |  18 --
 .../features/stories/services/deleteStory.ts  |   5 +-
 app/src/features/stories/services/getViews.ts |  24 --
 .../mockStoriesData.ts => data/stories.ts}    | 115 ++++-----
 app/src/mocks/data/users.ts                   |  52 +----
 app/src/mocks/stories/stories.ts              |  29 +--
 app/src/styles/GlobalStyles.tsx               |   3 +
 app/src/types/messages.ts                     |   6 +
 app/src/types/story.ts                        |  13 +-
 20 files changed, 331 insertions(+), 376 deletions(-)
 delete mode 100644 app/src/features/stories/components/StoryViews.tsx
 delete mode 100644 app/src/features/stories/hooks/useViews.ts
 delete mode 100644 app/src/features/stories/services/getViews.ts
 rename app/src/mocks/{stories/mockStoriesData.ts => data/stories.ts} (50%)

diff --git a/app/package-lock.json b/app/package-lock.json
index 7730c3c0..5ad7eb8b 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -80,7 +80,6 @@
         "typescript-eslint": "^8.7.0",
         "undici": "^6.20.1",
         "vite": "^5.4.8",
-        "vite-plugin-mkcert": "^1.17.6",
         "vite-tsconfig-paths": "^5.0.1"
       }
     },
@@ -3986,6 +3985,173 @@
         "@octokit/openapi-types": "^22.2.0"
       }
     },
+    "node_modules/@octokit/auth-token": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/auth-token": "^4.0.0",
+        "@octokit/graphql": "^7.1.0",
+        "@octokit/request": "^8.3.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz",
+      "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
+      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/request": "^8.3.0",
+        "@octokit/types": "^13.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "22.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
+      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "11.3.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.1.tgz",
+      "integrity": "sha512-ryqobs26cLtM1kQxqeZui4v8FeznirUsksiA+RYemMPJ7Micju0WSkv50dBksTuZks9O5cg4wp+t8fZ/cLY56g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.5.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz",
+      "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-13.2.2.tgz",
+      "integrity": "sha512-EI7kXWidkt3Xlok5uN43suK99VWqc8OaIMktY9d9+RNKl69juoTyxmLoWPIZgJYzi41qj/9zU7G/ljnNOJ5AFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.5.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "^5"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz",
+      "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/endpoint": "^9.0.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz",
+      "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "20.1.1",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.1.1.tgz",
+      "integrity": "sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/core": "^5.0.2",
+        "@octokit/plugin-paginate-rest": "11.3.1",
+        "@octokit/plugin-request-log": "^4.0.0",
+        "@octokit/plugin-rest-endpoint-methods": "13.2.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "13.6.2",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.2.tgz",
+      "integrity": "sha512-WpbZfZUcZU77DrSW4wbsSgTPfKcp286q3ItaIgvSbBpZJlu6mnYXAkjZz6LVZPXkEvLIM8McanyZejKTYUHipA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@octokit/openapi-types": "^22.2.0"
+      }
+    },
     "node_modules/@open-draft/deferred-promise": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
@@ -5424,17 +5590,6 @@
         "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/axios": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
-      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -5731,6 +5886,13 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6273,6 +6435,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -7147,6 +7316,27 @@
         }
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -9907,6 +10097,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.13.0.tgz",
diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index 419c790c..b73ff60f 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -35,7 +35,7 @@ const StyledIcon = styled.div<CircleIconProps>`
   justify-content: center;
 
   &:hover {
-    scale: 1.05;
+    opacity: 1;
     cursor: pointer;
   }
   & > svg {
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index 0e10a98a..9aff6b6d 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -10,23 +10,27 @@ interface ChatsSideBarProps {
 }
 
 const StyledChatsSideBar = styled.div`
-  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
   color: var(--color-icon-secondary);
   background-color: var(--color-background);
   overflow-y: auto;
   overflow-x: hidden;
-  position: relative;
 `;
 
 const StyledButtonContainer = styled.div`
   position: sticky;
   bottom: 1rem;
-  width: 100%;
+  width: 3.3rem;
+  left: 100%;
   display: flex;
   justify-content: space-around;
-  align-items: end;
+  align-items: flex-end;
   flex-direction: column-reverse;
   gap: 4rem;
+  background-color: transparent;
+  z-index: 1;
 `;
 
 function ChatsSideBar({ children }: ChatsSideBarProps) {
@@ -34,7 +38,7 @@ function ChatsSideBar({ children }: ChatsSideBarProps) {
     <StyledChatsSideBar>
       <ChatsSidebarHeader />
       <StoryListContainer />
-      {children}
+      <div style={{ flex: 1 }}>{children}</div>{" "}
       <StyledButtonContainer data-testid="button-container">
         <AddStory data-testid="add-story-button" />
         <StartNewChat data-testid="start-new-chat-button" />
diff --git a/app/src/features/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
index 1de9c7f7..6f5f7364 100644
--- a/app/src/features/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -63,7 +63,7 @@ function StartNewChat() {
           $padding={0.5}
           $color="var(--color-icon-secondary)"
           $bgColor="var(--new-chat-color)"
-          $opacity={1}
+          $opacity={0.95}
           onClick={handleOpenMenu}
         />
       </StyledCircleIconContainer>
diff --git a/app/src/features/stories/components/AddStory.tsx b/app/src/features/stories/components/AddStory.tsx
index d4027340..83038f8e 100644
--- a/app/src/features/stories/components/AddStory.tsx
+++ b/app/src/features/stories/components/AddStory.tsx
@@ -65,7 +65,7 @@ function AddStory() {
           $padding={0.5}
           $color="white"
           $bgColor="var(--accent-color)"
-          $opacity={1}
+          $opacity={0.95}
         />
         <StyledImageInput
           type="file"
diff --git a/app/src/features/stories/components/StoryIcon.tsx b/app/src/features/stories/components/StoryIcon.tsx
index 985ea306..ed0c5abe 100644
--- a/app/src/features/stories/components/StoryIcon.tsx
+++ b/app/src/features/stories/components/StoryIcon.tsx
@@ -29,7 +29,6 @@ const StyledContainer = styled.div<{ $isCollapsed: boolean }>`
   }
 `;
 const StyledImageContainer = styled.div<{
-  $segmentColors: string;
   $isMyStory?: boolean;
 }>`
   height: 48px;
@@ -38,10 +37,7 @@ const StyledImageContainer = styled.div<{
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: ${(props) =>
-    props?.$isMyStory
-      ? "var(--accent-color)"
-      : `conic-gradient(${props.$segmentColors})`};
+  background: var(--color-avatar-shadow);
   padding: 3px;
   display: block;
 `;
@@ -55,27 +51,7 @@ const StyledName = styled.p`
 `;
 
 function StoryIcon(props: StoryIconProps) {
-  const {
-    stories,
-    photo,
-    name,
-    userId,
-    onView,
-    isMyStory,
-    isCollapsed = false,
-  } = props;
-
-  let segmentColors = "";
-  if (!isMyStory) {
-    const segmentDegree = 360 / stories.length;
-    segmentColors = stories
-      .map((story, index) =>
-        story.viewed
-          ? `gray ${index * segmentDegree}deg ${(index + 1) * segmentDegree}deg`
-          : `var(--accent-color) ${index * segmentDegree}deg ${(index + 1) * segmentDegree}deg`
-      )
-      .join(", ");
-  }
+  const { photo, name, userId, onView, isMyStory, isCollapsed = false } = props;
 
   const firstName =
     name?.split(" ")[0]?.slice(0, 4) +
@@ -93,10 +69,7 @@ function StoryIcon(props: StoryIconProps) {
 
   return (
     <StyledContainer $isCollapsed={isCollapsed} onClick={handleIconClicked}>
-      <StyledImageContainer
-        $segmentColors={segmentColors}
-        $isMyStory={isMyStory}
-      >
+      <StyledImageContainer $isMyStory={isMyStory}>
         <Avatar name={name} image={photo} />
       </StyledImageContainer>
       {!isCollapsed && <StyledName>{displayName}</StyledName>}
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
index 46afdc61..1b30beb6 100644
--- a/app/src/features/stories/components/StoryList.tsx
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -94,7 +94,7 @@ function StoryList(props: StoryListProps) {
       <StyledStoryListContainer>
         <CloseButton onClose={onClose} data-testid="close-story-list" />
         <StyledStoryList data-testid="storylist">
-          {myStories.length > 0 && (
+          {myStories?.length > 0 && (
             <StoryIcon
               data-testid="my-story-icon"
               name="My Story"
@@ -105,12 +105,13 @@ function StoryList(props: StoryListProps) {
               userId="me"
             />
           )}
-          {userStories.map((userStory: userStories) => (
+          {userStories?.map((userStory: userStories) => (
             <StoryIcon
               key={userStory.userId}
               data-testid={`story-icon-${userStory.userId}`}
               name={userStory.name}
               photo={userStory.photo}
+              isMyStory={false}
               stories={userStory.stories}
               userId={userStory.userId}
               onView={handleStoryClick}
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index 62530cda..49bb10e3 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import { useStroies } from "../hooks/useStories";
 import { useMyStroies } from "../hooks/useMyStories";
@@ -30,18 +30,21 @@ const StyledContainer = styled.div<{ $isOpened: boolean }>`
 `;
 
 function StoryListContainer() {
-  const [isOpened, setIsOpened] = useState(false);
   const { stories: userStoriesData } = useStroies();
-
   const userStories = userStoriesData?.data;
-
   const { myStories: myStoriesData } = useMyStroies();
-  const myStories = myStoriesData?.data;
+  const myStories = myStoriesData?.data?.stories;
+  const [isOpened, setIsOpened] = useState(
+    userStories?.length !== 0 || myStories?.length !== 0
+  );
   const { userInfo } = useAppSelector((state) => state.user);
 
   const handleOpen = () => {
     setIsOpened(true);
   };
+  useEffect(() => {
+    setIsOpened(userStories?.length !== 0 || myStories?.length !== 0);
+  }, [myStories, userStories]);
   return (
     <StyledContainer $isOpened={isOpened} data-testid="story-list-container">
       {isOpened ? (
@@ -65,7 +68,7 @@ function StoryListContainer() {
               data-testid={`story-icon-${userStory.userId}`}
             />
           )}
-          list={userStories}
+          list={userStories?.length !== 0 ? userStories : myStories}
         />
       )}
     </StyledContainer>
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
index 10a45506..83581671 100644
--- a/app/src/features/stories/components/StorySlide.tsx
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -10,7 +10,6 @@ import { getElapsedTime } from "utils/helpers";
 import StorySliderTooltip from "./StorySliderTooltip";
 import { getIcon } from "@data/icons";
 import { useDeleteStory } from "../hooks/useDeleteStory";
-import StoryViews from "./StoryViews";
 import CloseButton from "@components/CloseButton";
 import Popup from "@components/Popup";
 
@@ -78,6 +77,21 @@ const StyledUserInfo = styled.div`
   z-index: 1;
 `;
 
+const ViewsContainer = styled.div`
+  position: absolute;
+  height: 4rem;
+  font-size: 1.25rem;
+  line-height: 4rem;
+  padding-left: 1.5rem;
+
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  height: 4rem;
+  color: white;
+  background-color: var(--story-views-background);
+  text-align: left;
+`;
 function StorySlide(props: StorySlideProps) {
   const { photo, name, stories, getNextUserStories, onClose } = props;
   const { ref, inView } = useInView({ threshold: 0.5 });
@@ -153,7 +167,7 @@ function StorySlide(props: StorySlideProps) {
   };
 
   useEffect(() => {
-    if (inView && !isMine) {
+    if (inView && !isMine && stories[index]?.viewed !== true) {
       viewStory(stories[index]?.id);
     }
   }, [inView, stories, index, viewStory, isMine]);
@@ -205,7 +219,13 @@ function StorySlide(props: StorySlideProps) {
             content={stories[index].content}
             caption={stories[index].caption || ""}
           />
-          {isMine && <StoryViews storyId={stories[index].id} />}
+          {isMine && stories[index].views && (
+            <ViewsContainer>
+              {stories[index].views.length > 0
+                ? `${stories[index].views.length} views`
+                : "No views"}
+            </ViewsContainer>
+          )}
         </StyledSlide>
       </StyledContainer>
     </Popup>
diff --git a/app/src/features/stories/components/StoryViews.tsx b/app/src/features/stories/components/StoryViews.tsx
deleted file mode 100644
index 9ad3c17d..00000000
--- a/app/src/features/stories/components/StoryViews.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useState } from "react";
-import styled from "styled-components";
-import { storyView } from "types/story";
-import UserInfo from "./UserInfo";
-import { useViews } from "../hooks/useViews";
-import { getIcon } from "@data/icons";
-import { getElapsedTime } from "utils/helpers";
-
-interface StoryViewsProps {
-  storyId: string;
-}
-
-const StyledViewsContainer = styled.div<{ $isOpened: boolean }>`
-  position: absolute;
-  bottom: 5%;
-  left: auto;
-
-  z-index: 1;
-
-  width: 100%;
-  min-height: ${({ $isOpened }) => ($isOpened ? "60vh" : "auto")};
-  padding: ${({ $isOpened }) => ($isOpened ? "1rem" : "0.5rem 1rem")};
-  background-color: ${({ $isOpened }) =>
-    $isOpened ? "var(--story-views-background)" : "var(--accent-color-shade)"};
-
-  box-shadow: ${({ $isOpened }) =>
-    $isOpened ? "0 4px 10px rgba(0, 0, 0, 0.2)" : "none"};
-  color: white;
-`;
-const StyledViews = styled.ul`
-  z-index: 1;
-
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-  padding: 2.5rem 0.5rem 0.5rem 0.5rem;
-  align-items: center;
-  justify-content: flex-start;
-  overflow-y: auto;
-  width: 100%;
-  height: 100%;
-`;
-const StyledView = styled.li`
-  display: flex;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem;
-`;
-const StyledCloseButton = styled.button`
-  display: flex;
-  padding: 0.5rem 1rem;
-  justify-content: flex-end;
-  border: none;
-  cursor: pointer;
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background-color: transparent;
-`;
-
-const StyledViewButton = styled.button`
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background-color: var(--story-views-background);
-  align-items: center;
-  justify-content: flex-start;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  position: absolute;
-  bottom: -2rem;
-  left: 0;
-  height: 3rem;
-  &:hover {
-    background-color: var(--story-views-background-hover);
-  }
-  ${({ disabled }) =>
-    disabled &&
-    `
-    background-color: var(--story-views-background-hover);
-    pointer-events: none;
-  `}
-`;
-
-function StoryViews(props: StoryViewsProps) {
-  const { storyId } = props;
-  const viewsData = useViews(storyId);
-  const views = viewsData.views?.data || [];
-
-  const [isOpened, setIsOpened] = useState(false);
-
-  return (
-    <StyledViewsContainer $isOpened={isOpened}>
-      {isOpened && (
-        <StyledViews>
-          {views.map((view: storyView) => (
-            <StyledView key={view.id}>
-              <UserInfo
-                name={view.name}
-                photo={view?.photo || ""}
-                elapsedTime={getElapsedTime(view.seenTime)}
-                isVertical={true}
-              />
-            </StyledView>
-          ))}
-          <StyledCloseButton onClick={() => setIsOpened(false)}>
-            {getIcon("Close")}
-          </StyledCloseButton>
-        </StyledViews>
-      )}
-      <StyledViewButton onClick={() => setIsOpened(true)} disabled={isOpened}>
-        {views.length > 0 ? `${views.length} views` : "No views"}
-      </StyledViewButton>
-    </StyledViewsContainer>
-  );
-}
-
-export default StoryViews;
diff --git a/app/src/features/stories/hooks/useDeleteStory.ts b/app/src/features/stories/hooks/useDeleteStory.ts
index d79c05b4..ff9c419e 100644
--- a/app/src/features/stories/hooks/useDeleteStory.ts
+++ b/app/src/features/stories/hooks/useDeleteStory.ts
@@ -17,7 +17,8 @@ function useDeleteStory() {
       queryClient.invalidateQueries({ queryKey: ["myStories"] });
       toast.success("Story successfully deleted");
     },
-    onError: () => {
+    onError: (error) => {
+      console.log(error);
       toast.error("Error deleting story");
     },
   });
diff --git a/app/src/features/stories/hooks/useViews.ts b/app/src/features/stories/hooks/useViews.ts
deleted file mode 100644
index a966e8bd..00000000
--- a/app/src/features/stories/hooks/useViews.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getViews as getViewsAPI } from "../services/getViews";
-
-function useViews(storyId: string) {
-  const {
-    data: views,
-    error,
-    isLoading,
-  } = useQuery({
-    queryKey: ["views", storyId],
-    queryFn: () => getViewsAPI(storyId),
-    enabled: !!storyId,
-  });
-
-  return { views, error, isLoading };
-}
-
-export { useViews };
diff --git a/app/src/features/stories/services/deleteStory.ts b/app/src/features/stories/services/deleteStory.ts
index ddf414a3..336bbf24 100644
--- a/app/src/features/stories/services/deleteStory.ts
+++ b/app/src/features/stories/services/deleteStory.ts
@@ -3,12 +3,15 @@ import { API_URL } from "@constants";
 async function DeleteStory(storyId: string) {
   const res = await fetch(`${API_URL}/users/stories/${storyId}`, {
     method: "DELETE",
-    credentials: "include",
     headers: {
       "X-Session-Token": localStorage.getItem("sessionId") || "",
     },
   });
 
+  if (res.status === 204) {
+    return { status: "success", message: "Story deleted successfully." };
+  }
+
   const data = await res.json();
 
   if (data.status !== "success") {
diff --git a/app/src/features/stories/services/getViews.ts b/app/src/features/stories/services/getViews.ts
deleted file mode 100644
index 26aa5092..00000000
--- a/app/src/features/stories/services/getViews.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { API_URL } from "@constants";
-
-async function getViews(storyId: string) {
-  try {
-    const response = await fetch(`${API_URL}/stories/${storyId}/views`, {
-      method: "GET",
-      credentials: "include",
-      headers: {
-        "X-Session-Token": localStorage.getItem("sessionId") || "",
-      },
-    });
-
-    if (!response.ok) {
-      throw new Error("Failed to fetch views");
-    }
-
-    return await response.json();
-  } catch (error) {
-    console.error("Failed to fetch views", error);
-    throw error;
-  }
-}
-
-export { getViews };
diff --git a/app/src/mocks/stories/mockStoriesData.ts b/app/src/mocks/data/stories.ts
similarity index 50%
rename from app/src/mocks/stories/mockStoriesData.ts
rename to app/src/mocks/data/stories.ts
index 7aaa7908..044d4797 100644
--- a/app/src/mocks/stories/mockStoriesData.ts
+++ b/app/src/mocks/data/stories.ts
@@ -1,44 +1,44 @@
-import { story, storyView } from "types/story";
-
-const MOCK_MY_STORIES: story[] = [
-  {
-    id: "1",
-    content:
-      "https://scontent.fcai11-1.fna.fbcdn.net/v/t1.6435-9/122032103_3472532366305566_6239088129819761020_n.jpg?stp=dst-jpg_s960x960&_nc_cat=104&ccb=1-7&_nc_sid=2285d6&_nc_eui2=AeEXsEzDOwFTqpmb7eVOF_defX6b8GN9_pB9fpvwY33-kK5Gl95eJW0QBmEl_26DnBM80yvcN_GW8-7f9MJZZ1z6&_nc_ohc=bSnTWn4p8x0Q7kNvgHoFcXP&_nc_zt=23&_nc_ht=scontent.fcai11-1.fna&_nc_gid=Ab5Y75GRyvck02dUvRxz55i&oh=00_AYCR6Lf6wZTBAR3XPjJLP8yCvUvhON0c_hM_eUdGYvRwdA&oe=676B5E8E",
-    timestamp: new Date().toISOString(),
-    caption: "CUFE is the hell",
-    views: [
-      {
-        id: "1",
-        userId: "1",
-        name: "Ahmed Hamdy",
-        photo: "https://i.pravatar.cc/70?=0.2",
-        seenTime: new Date().toISOString(),
-      },
-      {
-        id: "2",
-        userId: "12",
-        name: "John Doe",
-        photo: "https://i.pravatar.cc/70?=0.25",
-        seenTime: new Date().toISOString(),
-      },
-      {
-        id: "3",
-        userId: "13",
-        name: "Alice Bob",
-        photo: "https://i.pravatar.cc/70?=0.35",
-        seenTime: new Date().toISOString(),
-      },
-      {
-        id: "4",
-        userId: "14",
-        name: "Bob Alice",
-        photo: "https://i.pravatar.cc/70?=0.45",
-        seenTime: new Date().toISOString(),
-      },
-    ],
-  },
-];
+const MOCK_MY_STORIES = {
+  stories: [
+    {
+      id: "1",
+      content:
+        "https://scontent.fcai11-1.fna.fbcdn.net/v/t1.6435-9/122032103_3472532366305566_6239088129819761020_n.jpg?stp=dst-jpg_s960x960&_nc_cat=104&ccb=1-7&_nc_sid=2285d6&_nc_eui2=AeEXsEzDOwFTqpmb7eVOF_defX6b8GN9_pB9fpvwY33-kK5Gl95eJW0QBmEl_26DnBM80yvcN_GW8-7f9MJZZ1z6&_nc_ohc=bSnTWn4p8x0Q7kNvgHoFcXP&_nc_zt=23&_nc_ht=scontent.fcai11-1.fna&_nc_gid=Ab5Y75GRyvck02dUvRxz55i&oh=00_AYCR6Lf6wZTBAR3XPjJLP8yCvUvhON0c_hM_eUdGYvRwdA&oe=676B5E8E",
+      timestamp: new Date().toISOString(),
+      caption: "CUFE is the hell",
+      views: [
+        {
+          id: "1",
+          userId: "1",
+          name: "Ahmed Hamdy",
+          photo: "https://i.pravatar.cc/70?=0.2",
+          seenTime: new Date().toISOString(),
+        },
+        {
+          id: "2",
+          userId: "12",
+          name: "John Doe",
+          photo: "https://i.pravatar.cc/70?=0.25",
+          seenTime: new Date().toISOString(),
+        },
+        {
+          id: "3",
+          userId: "13",
+          name: "Alice Bob",
+          photo: "https://i.pravatar.cc/70?=0.35",
+          seenTime: new Date().toISOString(),
+        },
+        {
+          id: "4",
+          userId: "14",
+          name: "Bob Alice",
+          photo: "https://i.pravatar.cc/70?=0.45",
+          seenTime: new Date().toISOString(),
+        },
+      ],
+    },
+  ],
+};
 const MOCK_OTHER_USERS_STORIES = [
   {
     userId: "1",
@@ -116,34 +116,5 @@ const MOCK_OTHER_USERS_STORIES = [
     ],
   },
 ];
-const MOCK_VIEWS: storyView[] = [
-  {
-    id: "1",
-    userId: "1",
-    name: "Ahmed Hamdy",
-    photo: "https://i.pravatar.cc/70?=0.2",
-    seenTime: new Date().toISOString(),
-  },
-  {
-    id: "2",
-    userId: "12",
-    name: "John Doe",
-    photo: "https://i.pravatar.cc/70?=0.25",
-    seenTime: new Date().toISOString(),
-  },
-  {
-    id: "3",
-    userId: "13",
-    name: "Alice Bob",
-    photo: "https://i.pravatar.cc/70?=0.35",
-    seenTime: new Date().toISOString(),
-  },
-  {
-    id: "4",
-    userId: "14",
-    name: "Bob Alice",
-    photo: "https://i.pravatar.cc/70?=0.45",
-    seenTime: new Date().toISOString(),
-  },
-];
-export { MOCK_MY_STORIES, MOCK_OTHER_USERS_STORIES, MOCK_VIEWS };
+
+export { MOCK_MY_STORIES, MOCK_OTHER_USERS_STORIES };
diff --git a/app/src/mocks/data/users.ts b/app/src/mocks/data/users.ts
index 1f299f19..27b3368d 100644
--- a/app/src/mocks/data/users.ts
+++ b/app/src/mocks/data/users.ts
@@ -5,7 +5,7 @@ export const MOCK_USER1 = {
   screenFirstName: "John",
   screenLastName: "Doe",
   bio: "Hello, I'm John Doe",
-  photo: "2676a1898da6edae9fc648c94332903f.jpg",
+  photo: "",
   username: "johndoe",
   phoneNumber: "0123456789",
   status: "Online",
@@ -19,60 +19,12 @@ export const MOCK_USER2 = {
   firstName: "ay",
   lastName: "7aga",
   bio: "Hello, I'm ay 7aga",
-  photo:
-    "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
+  photo: "",
   username: "Ay 7aga",
   phoneNumber: "0123456798",
   status: "Online",
   screenName: "Ay 7aga",
 };
 
-export const MOCK_MY_STORIES = [
-  {
-    content:
-      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
-    timestamp: "2021-09-01T12:00:00Z",
-    caption: "Hello, I'm John Doe",
-    views: 100,
-  },
-  {
-    content: "https://cdn.britannica.com/52/128652-050-14AD19CA/Maki-zushi.jpg",
-    timestamp: "2021-09-01T11:00:00Z",
-    caption: "I love sushi",
-    views: 10,
-  },
-  {
-    content:
-      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyDcH_MxdsTsK6KMVon-Ybfa2WiT-R70ZjWw&s",
-    timestamp: "2021-09-01T10:00:00Z",
-    caption: "I love burgers",
-    views: 20,
-  },
-];
-
-export const MOCK_OTHER_USER_STORIES = [
-  {
-    content:
-      "https://i.pinimg.com/564x/26/76/a1/2676a1898da6edae9fc648c94332903f.jpg",
-    timestamp: "2021-09-01T12:00:00Z",
-    caption: "Hello, I'm John Doe",
-    viewed: true,
-  },
-  {
-    content:
-      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTExIWFhUXFRcZFxcYGBcYGBgZGB4YGBgaFhgYHSggHR0mHRgVITEiJSkrLjAvFx8zODMtNygvLisBCgoKDg0OGxAQGy0mICUwLS0uListLTc1Ly8vLS0vMDAtLy0tLSsrLS0vNS0tLS8tLS0tLy0tLS0tLS0tLS0tLf/AABEIALcBEwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgMEAAECBwj/xAA/EAACAQMDAgUDAQYFAwMEAwABAhEAAyEEEjEFQQYTIlFhMnGBkRQjQqGx8AdSYsHRguHxJDNyFRZjokOSwv/EABoBAAIDAQEAAAAAAAAAAAAAAAMEAQIFAAb/xAAwEQACAgEDAgMGBgMBAAAAAAABAgADEQQSITFBEyJRI2FxgZHwBTKhwdHxFLHhQv/aAAwDAQACEQMRAD8A8QFdrUtzRuvKz9s1woqAQekllI4IktpCcCp307LzRTppRFV1ZCwJ3KxX6R8HM/apEZHVyoJJUFTH0gfVNBa1geOkbSisnaTzAlSKaj1HNQpeo6PkRa6rYZfSpQKr6d5q0KKIuZsV1FYK7ipkTmsireg0Fy84S0hdj2HYdyScAfJpht+H9Pp4bV3l/wDiu7bI53MIJEe0fmg3ahKvzHn07wtVD2nyj5xb0miuXZ8tGaOYGB9zwKJJ4Xv4L7LQIn1uske4CzNO/TLmmusRaKuEg21WAqyP4dsDt37/AGyK8SdQ0z3xvY/SBtyMjAM9hJ++KzW/EXZsKuP9zUr/AAxcZY5/1B2n8DsUFy5qERCTEKWJAMTyAPvmrY8EadgBa1ge4Z9Pp7CfvNV7t22VRblxxbnEBituIjjMQG4+K66lrrWnvpd3Sbi7w+AyzO0+kcYIIHvnih/5GoccH6ARg6ClOTx8czmz4T0bsQureAs7yqhd3+X3HfJ9qTNbtS89tW3BGKzjMfany7o1TTXL9i9llLjbEGWMiOwkRjOYrzN7xe+7f5mY4wMn2pvSW2Mx3GJ62iqtRsl01oiuorRrQmZOIrRrqtGonTiKK9XfZpbNsifU/lttH0tDNDHMEkQPg/IoYomjeq1FtdIha2rw+xgdwkGHSHH03F3sR7jdgiRVG7Ts8xdWt1kiTExJiYJjtJHJrdTJnVmwXIVRJNH9JpVtLAyx+pv9h8VZ6H07bZe5w20nP8h/Wq1+QJNLXWdhDIkr6m5TYNI2s6Xbayf/AFGkaVjmFMx+kEfIpSiaIdA6vc0l3emRwy9mH/NDpsCnmXdNwnrPhbxMmtsq64dYDpOVb/g8j4o/deRXjzMly7+06G75F4mblowA3vtnBnuD+oNGbXj3U2yEvaUzMbhIH34Ij7GnhYIsUMfNTbkfmkLx31hVTykMsQQfYDvPvioOr+Oj61Y+WokSpkscj92SsEfP6V5l1LqjXCQJgkySZZ//AJE9viiFgBKAEyvqtc7OWDc/3P55rVVq3QcwuBGPQazepQjJOD9pkf37UM6hagzRqzoxYMn1SvHtPcfNVLuhuX2izbZ8wSBgf/Jjgfms+sjxPJ0moysKvadZ1p7K3bcjaGRc/wCodv8Airc/s6SVDeZbiZjb74jParv/ANg6m1a3m6mRMAEj7bv+1A9Zp9QqepCUXuMgfpkcUVkOcSa7K/z9DB2oYGqDHNS3L01DR0GInfYGMu6JqJih2iSiaCjr0ibTag12tXfMQWrikuR5YJAgfvCwFsCcYyT7ifah2hkorEczB945ipVsypjN4Q68NI7yBtdSNxBJU9uMkdviZFMniro9vVaZWLJbuBCd4kqEB3FomDJ/MUrabw1euaV9Uowv0pBlwMOR9uB7kH2qj0nrBa2bDPFtoIJ4BGQCedpMD454ms/U6cPZ4iHkdZo6S7aPDt/Ke/32ljwd0655jeVcNu2FB8wkLu2QWC7omYamvT9K/wDqADhVbTh3hpzcYSpKkZCgiPkjsAKGXNBdOnlrIQWyx3Db6goKxA5AaYP/AJpt8Nat7dgKtpnFt8FQBggmY+DP3pIL4j73+/5mte3+Mu2sgiUdN00fsjm0sbENvzAZhUBZWO7/ADF2JEYOMxS5d8KlrmmZbkmEnfIVXbhWjjJ/vmnbxP1w2tLutaV3N0loKsAGUTDIuSxMfH8gc8NGw9o3Lq+W5AvXVO7facBe/IA9uYntR1BXDDoYk+oVwVaAekdBueW2jugbhdusxghdrEQyR7ljHwTXkvkbbzr/AJXYfoSK+g+t9fa2zkeUUKIN4w6hiu0kE9yWj7Cea8F0tpiXuvgF2ljGWySMYJn2o+nxuLZgNUW2KuI9ano2gRcq7OLaEqHcNuYA8cRzmY/oIfDng+1rVugO6XEOB6TI/wBQP+xpp6zpbaNbRl3lQAoyDuPE5EiO3uKH6JLmlvAqqf5SLe70LjaXk/KfHPIpEX2AHDHPxmi2jrYDaBFLqvg7U2WIUC9Ak7AdwHvsOSPtNLxwSDgjkHBH3Fek6rVXVuG6Y83DOASYM5VSe20cT3nOKZ9Yuh1ioNRpwxYN+8wCu2BHmLkHima9eV4sESu/Dj1SeJWk3MBMSeYJ/kMn7U2aVbYZdIXXYR+9QwxNxp2zukbl2rgceqMZrvqPhQ6W6ty2SyK6ny3IDMCeEYCGB4jnNL82zeuPfe5vLn9wilXJY/xM3pT24OKbW1bRlTM22l6zhhKvVdCLbkBwxJnaFK7RzHAWcjCzVICmjxfZUorKAGS3bVgGYkrAgkmN8TEkTGccBXt0RTmUByIx6DqDMHt8A2yfkmBj7c1zcXdbUrnEx3+R95odpHOGX607DkjsY9h3opo2R3/dNtLH/wBs8T32mMCl7qyekOj+spDIxVi1p2Ik8UXvdIYGdgDe65H3qLV3U06brhzkBYkk0ttY8AQ24CVdNoQzAFgueT2qxqnFoOvm3GjcAFOJH+b2E0D0PVHvam0u2VZwvljBbdgDdzP2oz1yy9vXBCS5YBi3uCskBMiYB5kyc03VSQIFnESrtxmO5jJNR0b8WdLTT3wlv6Gto4EzG6RE/igpo5GOIMHM5isrdZXToX0Oqu33W1bUl2wB/vPYCvaOjdHXS6NbZgsFJZh3Y5Y5/uAK8m/w21SW9YN38SELPvIMfoK9Q6z1EgelgR7f7UMIqDIhWtdzgmAU6s4Z7LGUKnafY9v51ZvaUW9AuMv+vEf8/rSx1jVqW4xHqzzPIHtAk/cCr/T+sMhRH/eKcbTJKkdx3/8AFC3QmIjdb6cUO8LAPI9jQu3zTv4u1G5GJjgiPakm0M0VDkQTjBhbTpRGyoCtcb6Uj9T9I/MGqmmAir1xGfTXLdtZeQzdyUEYA7EHM0ZuFi56wdpna4DJgHt2/v8A5ph8L9FOpuJZTEn1NztUfU36dveKF9PtygIzjsOw+AK9Cs+HRp9Cbu4rfjfcIJDIvqhV7TG0frmh3WrSmT1haaTa+3tGDxV1SzpbSWhCKFAQHgbQZ3AewE/MGvH76JfYvZkuJJEAblHcAcNEY9qa7eivXR5t3Tm55gCobpZQkznJBY+r8GoemdPSzqfKZIW4wJXChSACZM+0j7nFZ6PtO7/0ZrWaZioXjbLH+HPW7e/yboLb/SgOVMx6YPBGSPeSOYr0npx8u+1nZtV+ABKg8A88Z4+K8z/xA8Ivp/8A1tgfuiZdRzbPZx8dscRPvTD4H8UNf072FI/awhNq4+QRgEnvKiSQeY59i2JuG9fmIslmPZv8j9+kdeut5Kxp1tecwhZBz+RwMEfpS3oLGk1zNdWUugrKO5j0wLjbRInLD1DJFLfhfxHfW9t1LBgpcO0lgAhVtwPfuCRj1ih2g1Za9bNi05hma6pZlL3LrklRHZBtEnmYoJUKpxjH/I1XXv8AzAg+phTr40iNcFq6HhSxtkAyCJL7OQRt79vxXnnhnQeYbcxBvIo3TBLMoIA7wCCfYU8eL/C72Fu3gy7X8y/tgi4noMqTMbQxiO5PxQPwfpVZ7AuAj1KFHYLBZvyZJ7e9MUBUVipzM68nIBjF4x6neTUBk2slsnYfq3zIjcP4VgxRTS9Tt3zZS2Qpa2zXAcOII9P+oY5HOKJXtBbuWFfSqhxbuMsyZAgqB2nB+4+aC3vB9xrNu8jMl4s5hiAVCk7Nx9+BwZn9AKKyMdD6zXS3IDA8Qp1Tpty7p/NVD5rA2/WVAIJADkcTGP8ArFBtFpGW0DcZwxnyijxbn1GLinnMyOIODTlptRcv2NkBroQ2nEMlsngOGgngA4kfPelvxP0l9VZtrZbaMBncj1MB6lkciZI7QKrYFOMnn75la73TK4+AlPTa1r2mRi6/u24AAKq20Bu+Q2ftRPrvTbF/T272oWL+7at22Ar/AA0EZ5EjIxQ3SMqi3aKFioQEomQB9XqUcmR37Ghni3rRQfvDBBhbeCcTE9vV3nAjvSi7w4CRm+utkLP0iX4o0963qHW6waYII4IXCkTMfr3ND0FGLmiu328/VXPL3L+7WJcjOwKn8Nvn1HmDE80P12kay+1u4lSOGU8Ef8Vt1t0UnmedevA3KPLIpI4MEcEYP4NEek9duadi21bk87x6vw4z+s0OXNY65NGIzBT0Lw14ua8z2UshNylo3bgxCsAuV43FPiaBdQvPqdFfuFVGw2m2qAIG4KSQAPcZNCvDlzbeOdpNq4FPBD7SVj5kCPmmG51Czbt+VZ0rSyFbjMxc3NwAaSAIHeBAwJnmuCAcztx6RP8AD4Yam0y8o4efbbmf1im7XdQTUasAegKoG8jdhFGTBHsf1qPT9Pt2LW9tlsnhS0t/1EmaWuoa8Hcqd/qb3HsPj+tR0kgzjruvF66WX6FG1J5IE5P3njtQ2K7rVRJnMVldVldOkNs16D4N6tb1BFm+YcDDE4cD/wD1/WvPVqa2xBBBII4IwR9jUSZ6j4s6TZhdr5BGCAR94qktm1aDQyh4kYER8Hn9aSn6neYeq4x+9V9Vde59bFvvQzVLi3iT9e6gbrQDgcx7/wDFVNPardqzVu0lFVcQbNmWLQq5pLz22DoYYZHt9j8ESD8E1XQUQtaMEA704YwTBG3t9z296LiBMZPBegGp1xZtyISLgUQZIHqkiMbgMwZJzE07+Jdar6pdIDA8tnunEsBEAH371S8BaFbGne/ci218EqQJFu2sxG6cEycz/DS51rV3TcU27iDf/wDyt/FaydzKMAkjgZj2E1k6wixtg6Ca2hXZ5jLPX77pbKs9wk3E8skMFMFmjcGyc2+YPHNFum9LNtReZUe5vIubhwDOEH5iecUm+Luo6gPbFoME4YlTy2Qy7xGRADATjnMU2+BvElpbNxtQbjXgXZ96naBlgxPA9I3E/B7kCq11HaDmOX6jnYB0/WM1jqFpdPN4Ktvy33I/KwCCIM9pH5rwvqAOmvsLTEKGG0g5XE4M8EZ7jtmK9e6Tpk1Nsm473EI3KHEeU7y0QIkDOTOMdqBeOdA1wEFUdmRV37UHJbyihQTtHPbk/EXqtCsB2MV1NAwTnp9/f7yr0Xqi6m3qbhCDUC05UsRKggBntkjIED0nAx2NJR6hdukkMVUN6FQkABfSpkZYwoyapWWZG2NIOR3Eg4/QgkfNMWie1a27ULAqCdyrk/xbTyAcj9adq06KxI6f6iFupd1Cn+5AvW9T5T2TeY2nTYysd/pb2LSQeeKN+F7TXb1hA5Jc30ZieEREMgdiQ7D9aq6mxZVmcJAOU3KrGSA0FAYP1Ln2JgTx14XuEasXFtMSAxVFHql8ACYEAbue1EuQeG2B2gq/M4BM9bazbtbroX6QiiIgqCNp/wCkfymq2t6rBLFVM3LagEjEt6pI9hmPtSr07pep1d+3qEvHy0Yg2TO1SJRw6j0kGC0R7Uxde11jTsCUS2JVfOuQqBojAaS0Cfb71jXVNhdp9M/vNOq1KyxYfD798tanXzauNaUW7LSGvO0HkglRzPsOKo2OktctW0RyLSw4I9JxwCJMg4qzrtJaW0153FxoJSXJUDGRtgcewFea9b8WMXOn6du9fpYrwzf/AI15nkTxgUTBc7QOPv6SqWFPaN8vWMXi/wAWJpIt2itzU4UIp3qvt5g5kyIXmaE9D8HOW/atYN99yStmBCxnK8F4HHAnMngv4E8GLpGW9qHXz2mA2duc7dwySeW78DmSdsIbmpYMxVEPKMMfxQZ4JAj7NVLGFflTqeM/fSM1A2+aw8DnH8+sRerdAS45c7vMZdzs7QlsjGwkTkKvzwao+JvDu6wjIwY27Y9WRuESdoPIJMdoIHsaP9XVTpSwQsdtsOwDegNtLISMknceMekVMvS1ZGsqsALuDzABA+nbkmTP2JNLjVMNpzNGzSV4YfX+Z5CpIMEQRgj2NWUt7sz/ADq94o6a1kqxGSdpIyDiVM+8YP2FDbDxW9U4dQZ5e6soxWcMK0GI4JH2JH9Klur71E1XMpI7hJyST9zP9ajqQiuTUSZzWVsitVEmarK3WV0iV1qVaiWpVrpMlWpFFRpUq1YSskQVOlRJUyVYSpkyUw+GIe5+z+WpN4qu4glkEgttzAwDzS8pon0TqR094XQoYicNOZEcjM1zZ2nb1nLjcM9J6b40upYTyUXdv2oBujb2H4rz7V2We5bRSzsFlABIWedufziMn3FWOoeMGuIytYU7phixLKpEQGx2957d634f6/btsNxuKob0elLm0GNwJ+oiI49qx009qZO2a51Ne0YOYxaywdPYNsOt15HlAkkT/EFDYUgNIIjBBwKW+rdbFtFsoU3tdQ3nMFbjgCEAAH7sEAlgBuLTwcub9d0moZYCttUQWMBiO7WzBge5UxWeIOkaa+tt/L33/P3IFwXJg+sxO3g/G0e1chFRO4HJ++JLXh0UJxj17zq011EG5cNaLvbt/wCQEhXOMyNxiIiOaOaXXW9TctgIA37vzGExtCswBJEfwxA4kHvUd/wyLtl5eL+1hvSAWkEBWmZMSJx+AaEeGeqNptSujugBr+nVrdwgyX9XpeeXMZ+Qe5NXStFxg9e3wkW2GxWyOc5+sXfHOlt6ne6bEayqqgUj1QWBETmAATGACKVOl392GwV5BMZE/wB817Fe0QcoACLy2gmoVUQfu1GWZiCQYgCTkdsUkeOPBosWjqtNcZ9p/eqYyrHDArAPIBAHejaVynDHMBq60cBq1xAtzVoE2lARu3buHESSA2RBLQTH8Iop4KW3bu3xekDyQF2n1G4WUpsKyZMHj2PtSrYvhwM8gx7Tj+v9/Bjpt4ozBEKNvVrCwN2/IUSwkjaTOY707dyhiNQ84noHROpFEFvTKERgxaFLXNyQGD7o9W7BBHvQjxtdi0ovapXO/wAwINivAEYDAf6SMEYzzVBfEn7D5my5uLA+mNz3Llwl3dnxHIE9oAFLt7oN2/cN0APc2+ZcRB9G8ls89tpzGWPwDmJQxbduI9JrW6hUATYpJ6jH79Zx1Hq17W7dNZUpp0XaqyZKg4e8fb+X8qfPC/QtNpbZW25vai6khlXAkfwgmVUMRJyTGcYFTw30JP2Zdg23bgcBnbupj1BfpPYQeD71dsWbmk8m1cuhrh3AgmfRCqFWfYAwRHJod95XKouQOvvjFGiQqGdvP6ekMeFuqJqUNrUW7YYgqGUjkdjklSY3Aff8huu6+3o0u25Zr19yq3NxB2bYE9sEAEn35rLtg6V7ly7bhri+gwAEIZQHBBksSTgdwD3rPG+lbV2LbXjbTZFwFJLQ38RG7IOcY5+Kq1lJbnp8Omex9MSg01yv7PGT056/LPIzKGgureSBcZd8GZGydqrDgn0xznscZFQdd09y4JFxQyKuDKbzO1gnYkSP74LeHtHpX22yGFwIqqSxEKowZU5khj/LtVLxBdSxdSNO1wIykzLBvcBpIBB7GO1K7SjBlwVmozixNjghhz84C8cdFvWtCjMQVVgVJ+ozz+P7+KR7NzAgfmvYvHerXU6O4PK2bU9POMDGe4Jj8V4vpTitX8Pfchwe887rkIfJEsXGPv8Ab4+1R1KRWmH5p+IyIrUZqZhUdRJkZrRro1zUSZqsrZit106VFqVaiWpVqstJkqVahWpVqwlDJ0qZagWplNXEqZMtXNIBnAJ4AadoBDSTB7Yj7/FU1NNGjRE03Ow3BbTfHd5JH2A9vcUvqrTWnHU8RnR0i2zB6CL2m6bcus3ltuVWCljMZmOAYEDk0Tu+G9YkHyd0zlCDxg4MH+VZ4P6mbPn20GP4pz7rMgfj8mm7ofiy3cvCzdUgAFJLAAAjLD+Y/IoHjWrz294jj6aornvz0MRdIQ7BCdpgklgYAAJBJAJgkEfpRVeoXrDTY1BXG3ERt9iGxOTiMGa9A0nh61pSbtm555dVVd5T0ohEAbV9pyQT6QKBtobV+/svOi7EyZ27gC0kfcgntzUWa9QdpXMHR+H+IpcPjEG6Px1rbRkulwYkOg7H3WP7NCOpdbGo1Av3lK3VMo9s/TBLCEbmCZ+rsBVnU3rL6pdMLG5F2pbYMbbGFUyR/ECWBk5yTOK11PoCNd8qyQLwMn6tmw7f4iTMEgSIH3oymrhtuMc/CBUXZ8hz2+8xhTxpYuXzda4yFktgzb5ZZ3K22fQTkfc/NF9H1mzaQWlvW7oYMCgYMSxYNgjAWJ9+Y7UkaXwfdcXGF22vl3AhDSOcgyCcR/eKq9S8Kaq0QHtq0iQVaQVAJJEgcBW/SghaH5D9fv3Qxe6rIdPv9YV8b9I0mlZL2mZkc3FZkB3219X1Bj9JxMZ71W0uvizcCBjedwVOQqJtG4tHK9gsd+3FAURVgg5B+krx+DR/Sa82iXb1b17ennaRH2MEYnAptafJtY5iZuw+5RiQaHwtcuPlgXYgsefLkwPMAHp/+P3r03oeo0ulI06B4M+bduDYDt7tIkjIgDGec58zsdfdbYtbiANzDYxtks0ep3X1MVzH88VJa8WtuRrlsXCggFmOZEMWgRLGCYHYDtQL0uJwo4htO1QOXPMehoF8+7Dk2WJAO9oUE4Ve2MgwYqp4us2PLZFS410ustEKqqp2lf8AMDPbvnFLPQvGS6VsafBG1h5gIMZ5KZOefmmKz47t3Jb9nG7gS6iCQxyWIkAKc8cDuKXqpuR92P6jj6inG1W+fv8AnNW+o2+oW9lwML6+nagclvpON3BG2DBMSfvTK2qR7S2dRYaUJX1BRCALDMoMEcf/ANfek+/162GTbaKiXLbYF1WJJMPwQZkR7jvxePjnTgXd4uy0KCVVh6d074Jx6h94qrUWZJC9fn99oNrwWUh+nA7Rg6/rtNprYKiGZD5cKSW7jYwBHfv70pnWNfstt2D0AKPN9QZxMuIMEEDP5irOl8WaTyTZuO4KsVQ+W+9B8+xOMR2pU6b1CxbL+ZchnPrYhgrLA2lQBIz6u2CKq+ndskr+kbo1daKFzz35jJc1tt9G1vfD27Wd8ElmJBlpiZJ/UV4/pBivUdDe0VxbvmXCBCklfNMMN53OSsgHED4rzwW19ceolzkcAEmJJHf/AGpjRVshYEGJ691cgqRJGBMAAHtnufn9a5vsYCH+GR2/OR/3ojqyUCghWJW20wZUAEBDIEYPA7Rk4qHqN5Hgqu0kEsAAFkkmUHYRtH4rRxM2DajYVKajNVMmREVyRXZrVRLTmKysrKidKi1ItRCpVqstJVqZahWpVqwlTJkqZKgSp1NWEqZMtMz9QNrTqzWi21bflk5UMC3r5/1AQfalpaZr2uK6NVmVZPUkHJWV5HA9IM/NJ64ZVeO8e/Djh2+EoeC9Izm9cMSZLE8xliQBzkHAotqPCt9tQiW3VHILIxJCiATtLRz9pqt4ee7at2iLYwW3ZAK5/iBEkZnHOeIp/wBZrbNtClxd14zAEhpbhlOIU/7Y4pdtS69+PlNLwDtAQZMYPDfTPKtWzftWhcVZdlyJzLLPGKT+q6dL9y5dt2t9veceWWTPIBUgjPtjJrrVaxmNq21x33gTbN0zkxtIFufxNCP8QLbtqbf7Or29lsB1lrUHcQrqzduP1EigDw7sDoBF9mooy6jr6YP1lbS2LFy6lu4N2qUmW2XFZyvClpCiFKqeTHYcU7dJ6FasqDdUXL9wgvMDM+lSBwoB/lSp0vw/fsXyW1KE2wQd4J/eXwt24ARyzESTIIAGM1L1PryWVdrd9Q7sQ1pUckk8iWc4mfgTV7LSPZIM/wAyaq9yeIzBfr+0ZNT0r/1OodbgVUNlnlR5ZaLjXPT2IDCD2nvSh4i8UNqLvl2LQuBSdvpLKUO5WFwA5BB4GMkE9qqqut6l6FJWzgv2tyuP3j8s2TjNX+maJdNqmtiV8tRuLc3MqCfheWHwB71zBaF83J9My2G1O4rwqjqe+MDge+JNrTN53kQA4IEYABOQPbuKdPCF3TKW0uuRCEunYLmfLb1BwYBiQgJ7SBxIkX0kWtT1sujRZLsd4xO1WZmEcZ7/AGq1/iD0Nlum5bBZgd1wgQXXK7ivdgIz3BH3LhvztV+Mj9ZmCraSV5xHjxN4e0Nmw15dDadFh2VFKu3tG3JXJJXGBXn3TNJpbt4W7lhLZbaEKvcuZcFR5gkAQxQx7Hk0e8I+I7ty0LDXNqKjBMTuIE+XMjOJAJz7mMhtB4juaBv3mlDNvYFmMbgCJgwfse3HviSfNszz8YzWE2eIcY6dP+SdOgaQAKtk3b2xd6s9wLvMk7CrDbj3n3g0KbwyblxjYt3fKVSSSRC5O71kAGAP5fNMXVr2ntvbeyybtUqsqsdrIsblLIeSOORJFGOvdXV9H+zIDvdDp8xuA2PvcKPqBZds45mk6bnrX2mc+8/6j11NNrDwQDn0/eLVvwRdC7l1Nk+WACizdg87YBkEmT+tB/8A7Y1L2mdTbjcAylmVvUYX0bcgleZ7e9PHgPwm42X2FpYVvVbL77gbI34EQYOPamP/AOlBL1u4TtDE+xyQ25eOAQCCeJPvTBvsB4ORMxkXPK9+Z5Tq/B/UbYB/ZTDRG10JJ9+QfwaFXuha0Tcuad5Ujdu2HuOQWkjI+Ir3brOtkBUUuyH6ZI9WNoJAPM8ik7XdaN4/Spt3Cw9RIBEgEcYaRgVWzV2L0AjNGhSzqYq6npWuv2Z/Z1VAoOGQG5nEwcwOx4/ApYtSbuwwsNBBMAe+4j9a9I6f6rFy1bf1WbociQRt+mAe4iPyDzOfMUvEX7jKfV5rQcgggwCGGZ/4o+m1D2Z3RfV6ZKfymFyLe7a1x3UAqTbMgLkjZviRJOMYPuaFPcIJj+UwY+/6xVrW9TZwdwG6frgK55+rZCsf9RWfmqawfePiKcJiAkXwO/PNRyQZ7j/auyK0y+1RLSAiuTUjL2/8fyrj+lVkzisrKyokymKkWoxXa1WWky1KtQLUyGrCVMnWpkqBKmQ1YSpk4amnSapW0IttcUAM6FPXuO47gcGI7ZFKiGm//D61buXXs3FDBkmGwIEyZ5kEqcfNA1a5qPu5jGjfbaJzpeptbKbkYEBVtmRseDEuGMcT8mjLeZqLiOpZLtoglC0sEUGG/wD2ET2nmlXxZdbebaKqm20qU7+r0ifeIP5pktKbb6W/bIV7hCXFaGlYkmcYkRHasnH5T0m/4nDY9MSPpVx9dq7C3g485S6OlweaoQ53Y9BxP+9W/F+iSzeUkvetm4d4liYBiNxicjgHGaMjW9N0CHUWkUXHQjlrkGJCKCTiTEAgCPikDVdR1nUHVIZhMKiLAG443EcD7nt3p5lN3ToOZlpe1BO7nIIx8Zc6p4tcgWLB3YUb4gloAJju3bGMfijPhf8Aw8vXUOpvH1T6U9DEkd7kmI/00M1HTW0WmZ7Yl7m1DdAVih3ElEWTEgLmM54xXoXQb9y1YRrpVLrxtQuAGI4iT3kSKECqg+F07kdYILvXDnnsO39yDQ9Kv39RZupe8hNMdtywgIU4MyvDBgQc/TEDImqH+KV6NOHnIW4s/TuhhK7vtJimXqeuTTvqb4XzI0y3LiqV+tCwEyQBg5PxSZ/ij11L/TUKgEXRbK+25udvuY3/AGqGBO3Pw/WTXnaT6d4tf4b9PVwWIyqn3yXG0fHcn8/p6j1TZZdfTuFq0LbqMkow2/jgEe5SK8x8JLee2bGnUB/Lky5XflZBBMT2BHsJ4mpfA/7TYe5aazc8tmuLeJVoXaCZDTkh/jiTPuzqk3jjtBIwCAfP55/iV/EWgbp9xzZM2bq+ZbIyUGdr/CkOQD2n4otpOvWNVbQ37CXnthywZBBkIAZGRIWCIIJA4FX9PpA6sVbddZigkSVtgsvoHaSCfsIiOUKzqruj1BKEW3BIG36WWewkwp42zgzxAoae1G3/ANDoYRSaiLCvlPUff1jd1fQ/td5rlvYEvW7XmWwu5rW0CFSMBtqp7RPsKvazQlEBFm55oubsCW2OGBAjJOd3pkcimnpvUNK+lDWUG68gD8FlLYjnsSePvR3Q6QqmTuCrHuWjhTIyP5zQCDY21/6jVDin2qjGegiP4a8Qm1bGlCnzRI3uDIUfSNsTge/6Vd6jbvvbNw3J8sdztgHuAOSaWPEuj1KahL1u0+42le4hh3JRcuFn6gIBUf5cdwLum1t2/bZncvI81DAABQwwNtljEg5MgxQnDevEstSWuWz8v++kvaXT3rXnXZ/dtaIBY7AzlfTBaAYYg8/w0C0elc5DgK+wrsAKbwVLEGIMtwR7Ubu9TI0xuXAd+5E3Ft7KSs7hiYAjIwZqp0formyl22dx2MrMTj6gwKD/AKSZM8n7VBfcMYhko8Ft2fdL9zQWbOmuXFLkiVe4x+oIMKvaASfuZrxjSAOS7EKGbLGSAWzJ2gn3OBT7/iN4lR7S6e2YUrECRgckgcScRSIuF27R8Hv7/n81p6QEruPeZerI3bR2mXEgnIIk5Hf5iu7bj6WP9/PvXN1SIxgxjt7T/fvWAz29vY5/T37U3E5l0g5Ax/viubd0oZHMHPwQQea2z4g8/wB/3+tQO3vUTpw1aHyawtXJqJMyKytTWVEmUhUi1wKM6HohfbLgTyfb2+5+1UJxLgZgwNXauKN6nw8FUstwPE8D/vS4wg1wbM4riEEbFTpVDSvVxW96IIMywtXOn6k27iOJlWBxzHcfkSKpIamtGM/9/wCVWxkYMqDg5EZupqwYCJEb0Y8XFP8AEDGCYj4mqGq6ixG4IdwhfSx7yRMZHDcZiZio73Vbty2LTMNg7AKoExI9IGMTHvmjGk8PlrfmG0bdu1bAYgH1NIAMsc7i3IGJPEVn/wCIlZLP0HSao1tloCV9T1grpHSL+sYufoUMWc4VQBJCj/j816x4S0GlTSobJJtsTvc4bcuC8j8qB80ia7VWr9u0EHkuu7y7cHy2Jywn5BAAPY0c8LdZbYrsyoCCYgHj/TP3iTiKC2o35A6DtDto/BQP1J+8Qtr+h2LQdrZi1dCsttiYdLaqDt3cOI3D3gj7JfXulXr7bkZfIPlrz67SW2lWAIJiBG4HMgnvL/17w+bvk3G1ZBmQSVQKfqVoiD7cDt+aI6WLa/vCt/J/9plAAgcqcDucEf7UIlkbIGImHy+WBI6nMh8HOr3NZp7xi5dthG7SPWCyz77gf0ryvrutuqF0Tj1WNQdp4gARA785BPYin3rFlGD37T+Td06g7CCDtBaMgd8KAZB7QKQDeuarXWvMVWd7kcEbwxhSQpU+/BFM6XJGCOIXVCtBms8Ht6T0b/DfROWuXFRSwQAMSZDRkD3M7Z+9Weqdd3JdsIFuXm9GxWyGIm4M5J7DHfFT+C9GRP7lWYXA6E3NhBgAyk/6Sc+/FUfEXT7Wi1VzVjaNSVdktpeMhnBUEoQCVlpjiYojIpvJOf26QNNpCKm0HP8AMK+Gen+Tb87UF38z0qU2+kCQVY8KVyI/T2pI694ct7bu28zMH3IdrCAezLn8xmT8V6T07qA0/TkWwCfLT1Agghzli6nIG4zP86g6TobBuI9y6Wv3lJErJMA4LkEDAbAik7rG8T2fJ6x2uvfWTYfLnjA6/wATyzoPXxpn9QuAGFuruBLL8CABt9UHM7u1e5dFvMVttbuo6Ru+mGdTwYnB4z/SvGfH/QBpbiPbhgwLEDM7DBE/9XaP5CufB3iZgG05uqi3UYW3ODbckHBGVDEfac96cyLF8VRz3iYUo3hMfKehjv461nm3FOlZQ1p5YGRPpedoAyeZXBwTQW319dRpnNq2A5uBbikzsJwTa7kN7HjPxWW+mXmuJc1VmS22X3+qUAEqABBkFjE9h2oLqOjvvN62p8sXyxU8FNwBGMEMdx5x80qXXbgkcxxKmru4OR/GIwLZZi9pW9CIttWMMDAJcSB7yAfjHE0U6brfItIQWTT2bLtcDggSfSgVmEtOR+DXHRCh/aXNvyxEeiWMEHdEf5QVHwDSF448WXNS3kI3/p02qBP1bQB+RI+00DTIbX90Nq7gie+LvU9S1+/cukH1MSARED+EfpFWNDZcuswd0gboYRlSxzIjJB+ARUFliDMAyO4kZ95/X9KN9A1Wm3/v4C7Cf4o3AlgcTBkAbQI9/Y76qBxPPMxJzBvlbnFuZZiAAJEkwAPUQBODJge8Vmq0LLEKSDORlTAztbvAYT+PerWu0v7y3qBci1fZgrn+B1MMrQBEYYQANrLEcDrXWHt+Ub6vtkwCxIkQLm0TyT7c7c1ORIgVV9MnuYHzHOf0/UVA9E+qa23cCbU2bV27Zn7mfkzjtP4AsmqmSJquTW65JqJaait1zNbqJMqoYINOPh+8FIliQQPpWT7kGPvSZVnS625b+lo/SqEZlgcRv191VuNdyiQ2DyZBHHzSpo9E9+4EtiWP6Ae5+K6vai9eGSzD4GP5Ymivg/XHTX/Ughxtk4g8jPzx+lUGBL8mF9L4FnHmFSCu5zG0zMhV7RjJPej146DQWXQIrllKu7+pnkcL/WAIxx3od1LqLwxU57A/T+gpI6pqC96S278yB8CoBLSWAWWEiWKjapMqpMwKs2zkdvmqNq6KtIaZEWMJaaFC3Aylg/0EZgZk4iJx+adtHf8AO2lVDg/Um4ozkkHBUYIj3yA3Y15/auEcTNXtBr3stKOQCIMGOf6Ef1FC1FPiLx1EY0uo8JuehjBY6jb88+UgR7YZlQjchO2GGByF3GSwPzQTqnUrumt2VThSd5yFaTI9IiR8nvxTnoBp7wW6lweZww27WO4BY7jHeqdrTC5ftWLylkC3FLlfQRJIiMyMEc5rGSzY/mX45+c3LCbKvKw92IyWOvJes27120HttbUEd5wwxxA7D5FX9JorVq4z27nlG4ZVgAIlcC4gADgQTnPMGla5pxZ3sj7vTCqGkA4knAgADk+xqt0jxGz25vEbVYbWAnaJwSOYGc1NWoJJP3/2SdMCAIy9Vs29RdVNUClxrZVysxqLeNrWjxCtBIOV74MnyZmW31FzYYhbLjy27g7gASW+WJzjGa9I8Q69bukLFjv81TYAYEoyqx/mA0j4+1eWdNi5dvk7t0kjaJ+k/wAWfpjcfwO00/pzufImVq6xWmO+Z7J4FNwWrxVo3OpDGCxIABiJBUkn1d6m0XSVvaxtXcUldyEmRtZ7a+WkD6lIM/GaR0t3z0nUXrZYFLyqSDtIQIoOB8MP50V8B3L1q1dtPcK2im8MWBUPkwrTkQP1qbMh2bPynU4KqgHPrHLqupVbtq9tJuy4ZYBZrIU7g6jHvz/tQDqXUbtqL1sekPsDKgYqjyzuoIzmFHtn3oz4X11pmu3LxtggkC6pYblIgAzzncJpZfUecxEkAEpsUgJtUgF3iMQADj35pXxQig+vMcr0pJZekEaJ1dr+4PcsK4i/lXW20M52HhTgEge4pJ65oPKuFrZlJEx/CTkfg/1/Fek9Y1d62EtEp5ZdlZxDAIAIRhElhz+g7GqWk8P29RpnG8bRcE3DunMgW2BPOAY+RBqtd+19wGB6QttCvVsJyw7znwR11dWBp79wrfH/ALVwmPMBxtb3cf8A7D5FM/VOnKEC+tkUAELtUETBzgoCx/MYrxfV6M2LxUPIUyrrIkdiDgz/AMUc1/iW7qVCah3K7YYo20vCwhcHBzBPvR7dGLWDp07zPr1bVAq/UQj1nxM9hjb0RiwjMqu5W6ZyG2Fp5Ewfbjmla0Laq0qWMAAzG1p577hAI7c/FR27ckABiJEwDMdzAB/pRsdGCKLguypxBEEEz9QgkrxwOcYNPKq1jAiFlpY8wPduFhwYUAe8AyR+v+9djpd/bu2FRsZzuKr6VElgrEGPxzRg9HVCbly8ioYClSS2e2wgExA4E4rrpGl8w39xC2wkftF+ZZtyTI5MqCoCyRzma7fk8SmcSz0vQJcS7pneLFy1p9SrmP3T7FZmY+xVryk//jUckUD8RdfOpuuUlbQhLSntbXC44UnLGByxkmiXV204s+Xp9Xudrdu1dLo1pHS2PTt3g+y+300sXNOUiYIPBVlYH8qT+nNWzJWcVo1uuTUy0w1ya2a5NROmRWVqsrpMq0f6V0VYV7zBVJ78D70E04llHuw/rTX1V4QL8f1E0pqHYEKO8NWBgse0KCxbj0xt7HgR2oZ1LSiOKo9P1zm4qwSJGOaNdeY5xGTj2+KzyjV2AZ6xxHFik4ikqO9wWg7QTxJgfiiPU+mrbwBwI4oSL5W7vHY0U6l1EXQCOe9amG4imV5gZJDUXQ1QS3VxDTCxduZZD12pn+/61ApqRWq8HDHSlAZSLyoe+4Qog4DFiBn4mIpi1muOxVe/ZWGMMl0MDjsWO4fOSR7mkm3cIMj+Yn+tT39l4MzW9uwAu9shR6iFXDnbMx6Rt4PtS99CWYJELVqLKj5TxGLR6K0wM6q3MT6DuWOBAmfzFbOnuEbwSUH7sEbZjMMAJxHwOPxSilpreHVh3XcNpZOzL2I4yJFXrSalLYuWzcW2x9LQdgYR3Ijif5Uo+hHUH6zRr/EyMBh9IZudPe1pLwuDAZbtu4CIBzuAAOAQRP2PvSZ0liJMnJn+/wBT+tFtb4l1F20bN0qdx9oOMEmMR2/X2qlbQDimNNW653Y+UX1d62kbY2aHUXU0J8tkA3NuBPqYmBAT+KQM+0Vf0/VWvPbsugRYK7t20qFwNqkYJgn/AKsVvo3ULFnRgb1Dsp3BrgU7izAjbPAEQT7fNVr/AFLTWzuD2SYMKguOVMETvC/OP+c0jfW7sw29zNTT3VLUuTgge6ON7povWwgffE7XaS2QYLCBkHIBoZ06w2itFXePUhJc/UgMQFAJ2nj53fFLTeM3n6njg7VA9I4AJYQcDt2oTruuKQRbtE/6rp3nPsohR+ZodWiuPDTrNfUo8pzGfxZ1JBbTyAAhA3GV3TlTvz9ROZ+1J9jr921ba3biGJLMRu5EekN3jufxVAo7y53NES3MTx9vtUcVqJQAPNzMmzUkny8TTuWMsST7mtmtRWm5o/SLGW9FrGstuWDjggMJIxIOCR8131bqVzUMpvbjCqNoJAMAAGD9IIzjuTEdqM1u45bnJwJ+wgZ+0D8VBAkY5zJbWudDKHZEj0jBHsR3/NcG5tbcAAxHwVZTyrD2Pt/SsuaYqoYkZOB/FwDMR9JmAe5VvaoXA7Gf/H9j8V2J01dKz6QQvMEzHuJ7j55qOt1o1EtLGi0ZunahG/8AhUmN/MhScbvYHn74Ne4hUlWBUgwQwII+CDkVyRU2p1ly4FDsX2iFLZYD/LuOSPYE47V06QVya3NcmukzJrK1NZUTpArQZHamrSapL1vIzwayspXUqCufSHpPmxCmn01qyFZRJI59s9qDdf6pMjuayspPTLvsy3MZtOxPLF4CpUFZWVrCZ5lhKmU1qsq4lTJQa7WtVlTKyxpFBcA8Tn7d/wAxNFOoaw27IsAhWurb80gS222gthU4AUkOSZn1kRBM5WVU9ZEseG74W2TeIe1bMpbYbh5gUuWWfpAUGR/FMQew3Wddv3dxd53fYQP8v2iBHFZWV2ATzOlTfbYetCzcA7gCAQZzGfzx/SIYFarKsABJnU+9aisrKmTNDvWXAMR3E/zIrKyunSezqyEKYgmeM+3PNVQAT7ZrKyonTjvXLCsrKiTNDv8Ay/7/AImsniP7NZWV06auXCeSeIqI1lZUSZvfiMc+2fwa4NZWV06aNcmt1lRJnJrk1lZUTpqtVlZXTp//2Q==",
-    timestamp: "2021-09-01T11:00:00Z",
-    caption: "I love pizza",
-    viewed: false,
-  },
-  {
-    content:
-      "https://mcprod.hyperone.com.eg/media/catalog/product/cache/1ca275941aea0ae98b372dcb44b7c67a/6/2/6224011241366-300ml.jpg",
-    timestamp: "2021-09-01T10:00:00Z",
-    caption: "I love cola",
-    viewed: false,
-  },
-];
-
 export const TOKEN =
   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik1vY2tVc2VyIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
index 6feb2a4a..638424dd 100644
--- a/app/src/mocks/stories/stories.ts
+++ b/app/src/mocks/stories/stories.ts
@@ -1,9 +1,5 @@
 import { http, HttpResponse } from "msw";
-import {
-  MOCK_MY_STORIES,
-  MOCK_OTHER_USERS_STORIES,
-  MOCK_VIEWS,
-} from "./mockStoriesData";
+import { MOCK_MY_STORIES, MOCK_OTHER_USERS_STORIES } from "../data/stories";
 import { story } from "types/story";
 
 type AddStoryRequestBody = {
@@ -58,14 +54,14 @@ export const storiesMock = [
       const caption = formData.get("caption") as string;
 
       if (file) {
-        const newStory: story = {
-          id: String(MOCK_MY_STORIES.length + 1),
+        const newStory = {
+          id: String(MOCK_MY_STORIES.stories.length + 1),
           content: URL.createObjectURL(file),
           timestamp: new Date().toISOString(),
           caption,
           views: [],
         };
-        MOCK_MY_STORIES.push(newStory);
+        MOCK_MY_STORIES.stories.push(newStory);
         return HttpResponse.json(
           {
             status: "success",
@@ -144,9 +140,11 @@ export const storiesMock = [
   http.delete("/users/stories/:storyId", async ({ params }) => {
     const { storyId } = params;
     if (storyId) {
-      const index = MOCK_MY_STORIES.findIndex((story) => story.id === storyId);
+      const index = MOCK_MY_STORIES.stories.findIndex(
+        (story) => story.id === storyId
+      );
       if (index !== -1) {
-        MOCK_MY_STORIES.splice(index, 1);
+        MOCK_MY_STORIES.stories.splice(index, 1);
       }
       return HttpResponse.json(
         {
@@ -191,15 +189,4 @@ export const storiesMock = [
       }
     );
   }),
-
-  http.get("/stories/:storyId/views", async ({ params }) => {
-    return HttpResponse.json(
-      {
-        data: MOCK_VIEWS,
-      },
-      {
-        status: 200,
-      }
-    );
-  }),
 ];
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 3e818ea4..7dec5c1f 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -67,6 +67,8 @@ const GlobalStyles = createGlobalStyle`
 
     --scrollbar-color: rgba(0, 0, 0, .2);
     --color-avatar: linear-gradient(135deg, #d6d46c, #5e924e);
+    --color-avatar-shadow:linear-gradient(135deg,#d6d46c, #5e924e);
+
   }
   
   &.dark-mode {
@@ -133,6 +135,7 @@ const GlobalStyles = createGlobalStyle`
 
     --scrollbar-color: rgba(255, 255, 255, .2);
     --color-avatar: linear-gradient(135deg, #72C6EF, #004E92);
+    --color-avatar-shadow:linear-gradient(135deg, #72C6EF, #004E92);
     
   }
 
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index ca126943..74756f8a 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -33,3 +33,9 @@ export enum StickerTap {
   emoji,
   sticker,
 }
+
+export enum StickerTap {
+  gif,
+  emoji,
+  sticker,
+}
diff --git a/app/src/types/story.ts b/app/src/types/story.ts
index e60a81ab..8f122e03 100644
--- a/app/src/types/story.ts
+++ b/app/src/types/story.ts
@@ -1,24 +1,19 @@
-interface storyView {
-  id: string;
-  userId: string;
-  name: string;
-  photo?: string;
-  seenTime: string;
-}
 interface story {
   id: string;
   userId?: string;
   content: string;
   timestamp: string;
   caption?: string;
-  views?: storyView[];
+  views?: string[];
   viewed?: boolean;
 }
 interface userStories {
+  userId: string;
   userId: string;
   name: string;
   photo: string;
+  photo: string;
   stories: story[];
 }
 
-export type { story, storyView, userStories };
+export type { story, userStories };

From c544746326285aaefb4f0669abaeabbad6413867 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:44:30 +0200
Subject: [PATCH 056/136] feat/voice-notes: adding voice notes (#92)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/features/chats/ChatInput.tsx          |  76 ++++---
 .../features/chats/audio/RecordingView.tsx    |  72 ++++++
 .../features/chats/audio/VoiceRecorder.tsx    | 129 +++++++++++
 .../features/chats/emojies/EmojiPicker.tsx    | 205 +++---------------
 app/src/features/chats/media/FileViewer.tsx   |   4 +-
 app/src/mocks/chats/media.ts                  |   2 +-
 6 files changed, 283 insertions(+), 205 deletions(-)
 create mode 100644 app/src/features/chats/audio/RecordingView.tsx
 create mode 100644 app/src/features/chats/audio/VoiceRecorder.tsx

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index ea83475b..f4a91154 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,25 +1,22 @@
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-
 import { getIcon } from "@data/icons";
-
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Icon from "@components/Icon";
-
 import { RootState } from "@state/store";
 import { setShowCheckBox } from "@state/messages/messages";
-
 import RecordInput from "./SendButton";
 import ForwardingInputBar from "@features/forward/ForwardingInputBar";
 import ScrollableChats from "@features/forward/ScrollableChats";
 import EmojiPickerItem from "./emojies/EmojiPicker";
-
 import { useMessageSender } from "./hooks/useMessageSender";
 import ReplyWrapper from "./ReplyWrapper";
 import { clearActiveMessage } from "@state/messages/activeMessage";
 import MediaUploadComponent from "./media/MediaUploadComponent";
 import FilePreviewItem from "./media/FilePreviewItem";
+import VoiceRecorder, { RecordingStates } from "./audio/VoiceRecorder";
+import RecordingView from "./audio/RecordingView";
 
 const Container = styled.div`
   z-index: 1;
@@ -63,9 +60,7 @@ const InputWrapper = styled.div`
   display: flex;
   align-items: flex-end;
   gap: 1rem;
-
   position: relative;
-
   flex: 1;
 `;
 
@@ -82,6 +77,8 @@ function ChatInput() {
   const [input, setInput] = useState<string>("");
   const [file, setFile] = useState<File | string>(null);
   const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState<RecordingStates>("idle");
+  const [error, setError] = useState<string>("");
   useEffect(() => {
     if (activeMessage.state === "edit" && activeMessage?.content)
       setInput(activeMessage?.content);
@@ -89,15 +86,14 @@ function ChatInput() {
 
   const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
   const { handleSendMessage } = useMessageSender();
-
   const dispatch = useDispatch();
 
   const toggleShowEmojies = () => {
     setIsEmojiSelectorOpen((show) => !show);
   };
 
-  const handleSubmit = () => {
-    handleSendMessage(input, "");
+  const handleSubmit = (e: Event, voiceNoteName = "") => {
+    handleSendMessage(input, voiceNoteName);
     dispatch(clearActiveMessage());
     setInput("");
   };
@@ -121,6 +117,9 @@ function ChatInput() {
     setIsFilePreviewOpen(false);
   }
 
+  if (error) {
+    alert(error);
+  }
   return (
     <>
       {isFilePreviewOpen && file && (
@@ -144,28 +143,47 @@ function ChatInput() {
 
             <InputContainer>
               {activeMessage.id && <ReplyWrapper setInput={setInput} />}
+
               <InputWrapper>
-                <InvisibleButton
-                  onClick={toggleShowEmojies}
-                  data-testid="emoji-button"
-                >
-                  <Icon>{getIcon("Emojie")}</Icon>
-                </InvisibleButton>
-
-                <ExpandingTextArea input={input} setInput={setInput} />
-                <MediaUploadComponent
-                  file={file}
-                  setFile={setFile}
-                  setIsFilePreviewOpen={setIsFilePreviewOpen}
-                />
+                {isRecording !== "idle" ? (
+                  <RecordingView
+                    setIsRecording={setIsRecording}
+                    isRecording={isRecording}
+                  />
+                ) : (
+                  <>
+                    <InvisibleButton
+                      onClick={toggleShowEmojies}
+                      data-testid="emoji-button"
+                    >
+                      <Icon>{getIcon("Emojie")}</Icon>
+                    </InvisibleButton>
+
+                    <ExpandingTextArea input={input} setInput={setInput} />
+
+                    <MediaUploadComponent
+                      file={file}
+                      setFile={setFile}
+                      setIsFilePreviewOpen={setIsFilePreviewOpen}
+                    />
+                  </>
+                )}
               </InputWrapper>
             </InputContainer>
-
-            <RecordInput
-              onClick={handleSubmit}
-              type={!input ? "record" : "message"}
-              data-testid="send-button"
-            />
+            {input ? (
+              <RecordInput
+                onClick={handleSubmit}
+                type={!input ? "record" : "message"}
+                data-testid="send-button"
+              />
+            ) : (
+              <VoiceRecorder
+                isRecording={isRecording}
+                setIsRecording={setIsRecording}
+                setError={setError}
+                handleSendMessage={handleSendMessage}
+              />
+            )}
           </Input>
         ) : (
           <ForwardingInputBar
diff --git a/app/src/features/chats/audio/RecordingView.tsx b/app/src/features/chats/audio/RecordingView.tsx
new file mode 100644
index 00000000..180f6a2c
--- /dev/null
+++ b/app/src/features/chats/audio/RecordingView.tsx
@@ -0,0 +1,72 @@
+import styled, { keyframes } from "styled-components";
+import { RecordingStates } from "./VoiceRecorder";
+import { Dispatch, SetStateAction } from "react";
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+
+const blinkAnimation = keyframes`
+  50% {
+    opacity: 0;
+  }
+`;
+
+const GlowingBlinkingIcon = styled.i`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 2%;
+  width: 16px;
+  height: 16px;
+  font-size: 50%;
+  border-radius: 50%;
+  background: var(--color-error);
+  text-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
+  animation: ${blinkAnimation} 1s steps(5, start) infinite;
+`;
+const StyledP = styled.p`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+`;
+const InvisibleButton = styled.button`
+  all: unset;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 2%;
+  display: inline-block;
+  cursor: pointer;
+`;
+type RecordingViewProps = {
+  isRecording: RecordingStates;
+  setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
+};
+//TODO: add voice note wave form :)
+export default function RecordingView({
+  isRecording,
+  setIsRecording,
+}: RecordingViewProps) {
+  const handleCanelReecord = () => {
+    setIsRecording("idle");
+  };
+  return (
+    <>
+      {isRecording == "recording" && (
+        <>
+          <StyledP>Recording...</StyledP>
+          <GlowingBlinkingIcon />
+        </>
+      )}
+      {isRecording == "pause" && (
+        <>
+          <StyledP>Record</StyledP>
+          <InvisibleButton onClick={handleCanelReecord}>
+            <Icon>{getIcon("Delete")}</Icon>
+          </InvisibleButton>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
new file mode 100644
index 00000000..2ccf82b8
--- /dev/null
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -0,0 +1,129 @@
+import React, {
+  useRef,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useCallback,
+} from "react";
+import RecordInput from "../SendButton";
+import { useUploadMedia } from "../media/hooks/useUploadMedia";
+
+export type RecordingStates = "idle" | "recording" | "pause";
+
+type VoiceRecorderProps = {
+  recordingMimeType?: string;
+  isRecording: RecordingStates;
+  setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
+  setError: Dispatch<SetStateAction<string>>;
+  handleSendMessage: (data: string, file: string) => void;
+};
+
+const VoiceRecorder: React.FC<VoiceRecorderProps> = ({
+  handleSendMessage,
+  recordingMimeType = "audio/webm",
+  isRecording,
+  setIsRecording,
+  setError,
+}) => {
+  const mediaRecorder = useRef<MediaRecorder | null>(null);
+  const audioChunks = useRef<Blob[]>([]);
+  const { data: voiceNoteURL, mutate: uploadVoiceNote } = useUploadMedia();
+
+  // Initialize media recorder when recording starts
+  useEffect(() => {
+    if (isRecording === "recording") {
+      navigator.mediaDevices
+        .getUserMedia({ audio: true })
+        .then((stream) => {
+          const recorder = new MediaRecorder(stream, {
+            mimeType: recordingMimeType,
+          });
+          mediaRecorder.current = recorder;
+
+          recorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+              audioChunks.current.push(event.data);
+            }
+          };
+
+          recorder.onstop = () => {
+            stream.getTracks().forEach((track) => track.stop());
+          };
+
+          recorder.start();
+        })
+        .catch((err) => {
+          setError(`Error accessing microphone: ${err.message}`);
+          setIsRecording("idle");
+        });
+    } else if (isRecording === "idle") {
+      // Cleanup media recorder
+      mediaRecorder.current?.stop();
+      mediaRecorder.current = null;
+    }
+
+    return () => {
+      mediaRecorder.current?.stream
+        .getTracks()
+        .forEach((track) => track.stop());
+      mediaRecorder.current = null;
+    };
+  }, [isRecording, recordingMimeType, setError, setIsRecording]);
+
+  const handleStartRecording = useCallback(() => {
+    audioChunks.current = [];
+    setIsRecording("recording");
+  }, [setIsRecording]);
+
+  const handleStopRecording = useCallback(() => {
+    setIsRecording("pause");
+    mediaRecorder.current?.stop();
+  }, [setIsRecording]);
+
+  const handleSendRecord = useCallback(() => {
+    if (isRecording === "pause") {
+      const audioBlob = new Blob(audioChunks.current, {
+        type: recordingMimeType,
+      });
+      const file = new File([audioBlob], "recording.webm", {
+        type: audioBlob.type,
+        lastModified: Date.now(),
+      });
+      audioChunks.current = [];
+      uploadVoiceNote(file);
+    }
+  }, [isRecording, recordingMimeType, uploadVoiceNote]);
+
+  useEffect(() => {
+    if (voiceNoteURL && isRecording === "pause") {
+      handleSendMessage("", voiceNoteURL);
+      setIsRecording("idle");
+      uploadVoiceNote(null);
+    }
+  }, [
+    voiceNoteURL,
+    isRecording,
+    handleSendMessage,
+    setIsRecording,
+    uploadVoiceNote,
+  ]);
+
+  return (
+    <>
+      {isRecording !== "pause" ? (
+        <RecordInput
+          onClick={
+            isRecording === "recording"
+              ? handleStopRecording
+              : handleStartRecording
+          }
+          type={"record"}
+        />
+      ) : (
+        <RecordInput onClick={handleSendRecord} type={"message"} />
+      )}
+    </>
+  );
+};
+
+export default VoiceRecorder;
diff --git a/app/src/features/chats/emojies/EmojiPicker.tsx b/app/src/features/chats/emojies/EmojiPicker.tsx
index f1490c85..b80a2ee5 100644
--- a/app/src/features/chats/emojies/EmojiPicker.tsx
+++ b/app/src/features/chats/emojies/EmojiPicker.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { Theme } from "@state/theme/theme";
 import EmojiPicker, {
@@ -6,22 +6,17 @@ import EmojiPicker, {
   Theme as emojitheme,
 } from "emoji-picker-react";
 import styled from "styled-components";
-import { getIcon } from "@data/icons";
-import { StickerTap } from "types/messages";
-import { useTrendingGifs } from "../hooks/useGIFS";
-import GifPicker from "./GifsPicker";
-import { SearchOutlined } from "@mui/icons-material";
 
-const Container = styled.div`
+const StyledEmojiPickerContainer = styled.div`
   z-index: 4;
   position: absolute;
   width: 30%;
   min-width: 300px;
-  height: 50%;
+  height: 35%;
   min-height: 400px;
-  max-height: 500px;
+  max-height: 400px;
   bottom: 105%;
-  background: var(--color-background);
+  background: var(--color-secondary);
   border: 1px solid #e6e6e6;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -29,187 +24,51 @@ const Container = styled.div`
   padding: 0;
 `;
 
-const TabBar = styled.div`
-  display: flex;
-  justify-content: space-around;
-  border-bottom: 1px solid #e6e6e6;
-  background: var(--color-secondary);
-`;
-
-const Tab = styled.button<{ active: boolean }>`
-  flex: 1;
-  padding: 10px;
-  font-size: 1rem;
-  background: ${({ active }) =>
-    active ? "var(--color-item-active)" : "var(--color-background)"};
-  border: none;
-  cursor: pointer;
-  color: var(--color-primary);
-  font-weight: ${({ active }) => (active ? "bold" : "normal")};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    background: var(--color-item-active);
-  }
-`;
-
-const EmojiWrapper = styled.div`
-  height: 90%;
+const EmojiPickerWrapper = styled.div`
   .emoji-picker {
     background: none;
     border: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+    gap: 8px;
   }
-`;
 
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  flex-direction: column;
-  padding: 10px;
-  height: 100%;
-`;
-const StyledSearchBar = styled.div`
-  margin-left: 1rem;
-  position: relative;
-  width: 100%;
+  .emoji {
+    font-size: 1.2rem;
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
 
-  &:focus-within > svg {
-    color: var(--color-search-border);
+    &:hover {
+      background: #f0f0f0;
+    }
   }
 `;
 
-const StyledSearchIcon = styled(SearchOutlined)`
-  position: absolute;
-  left: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-text-secondary);
-  font-size: 1.2rem;
-`;
-
-const SearchInput = styled.input`
-  background-color: var(--color-chat-hover);
-  border: 1px solid var(--pattern-color);
-  border-radius: var(--border-radius-searchbar);
-  color: var(--color-text);
-  font-size: 1rem;
-  padding: 0.525rem 0 0.525rem 2.5rem;
-  outline: solid 1px transparent;
-  width: 100%;
-
-  &:focus {
-    border-color: var(--color-search-border);
-    outline-color: var(--color-search-border);
-    caret-color: var(--color-search-border);
-  }
-  &::placeholder {
-    color: var(--color-text-secondary);
-  }
-`;
-interface PickerProps {
+interface EmojiPickerItemProps {
   setInputText: React.Dispatch<React.SetStateAction<string>>;
-  sendGIF: (gifUrl: string) => void;
-  sendSticker: (stickerUrl: string) => void;
 }
 
-export default function Picker({
+export default function EmojiPickerItem({
   setInputText,
-  sendGIF,
-  sendSticker,
-}: PickerProps) {
-  const { trendingGifs } = useTrendingGifs();
+}: EmojiPickerItemProps) {
   const currentTheme = useAppSelector((state) => state.theme.value);
-  const [activeTab, setActiveTab] = useState<StickerTap>(StickerTap.emoji);
-  const [gifs, setGifs] = useState<string[]>(trendingGifs);
-  const [gifSearch, setGifSearch] = useState("");
-  const [stickers] = useState<string[]>([
-    // Replace these placeholders with sticker URLs
-    "https://example.com/sticker1.png",
-    "https://example.com/sticker2.png",
-  ]);
 
-  const handleEmojiClicked = (emojiData: EmojiClickData) => {
+  const handleEmojiClicked = (emojiData: EmojiClickData, event: MouseEvent) => {
     setInputText((text) => text + emojiData.emoji);
   };
 
-  const handleGIFSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGifSearch(e.target.value);
-  };
-
-  const handleGIFSelect = (gifUrl: string) => {
-    sendGIF(gifUrl);
-  };
-
-  const handleStickerSelect = (stickerUrl: string) => {
-    sendSticker(stickerUrl);
-  };
-
   return (
-    <Container>
-      <TabBar>
-        <Tab
-          active={activeTab === StickerTap.emoji}
-          onClick={() => setActiveTab(StickerTap.emoji)}
-        >
-          {getIcon("EmojiBox")}
-        </Tab>
-        <Tab
-          active={activeTab === StickerTap.gif}
-          onClick={() => setActiveTab(StickerTap.gif)}
-        >
-          {getIcon("GifBox")}
-        </Tab>
-        <Tab
-          active={activeTab === StickerTap.sticker}
-          onClick={() => setActiveTab(StickerTap.sticker)}
-        >
-          {getIcon("StickerBox")}
-        </Tab>
-      </TabBar>
-      <EmojiWrapper>
-        {activeTab === StickerTap.emoji && (
-          <EmojiPicker
-            width="100%"
-            theme={
-              currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
-            }
-            onEmojiClick={handleEmojiClicked}
-            lazyLoadEmojis={true}
-          />
-        )}
-        {activeTab === StickerTap.gif && (
-          <Wrapper className="hi">
-            <StyledSearchBar>
-              <SearchInput
-                type="text"
-                placeholder="Search"
-                onChange={handleGIFSearch}
-                value={gifSearch}
-                data-testid="gifs-search"
-              />
-              <StyledSearchIcon />
-            </StyledSearchBar>
-            <GifPicker
-              searchQuery={gifSearch}
-              onGifSelect={(id) => console.log(id)}
-            />
-          </Wrapper>
-        )}
-        {activeTab === StickerTap.sticker && (
-          <Wrapper>
-            {stickers?.map((sticker, index) => (
-              <img
-                key={index}
-                src={sticker}
-                alt={`sticker-${index}`}
-                onClick={() => handleStickerSelect(sticker)}
-              />
-            ))}
-          </Wrapper>
-        )}
-      </EmojiWrapper>
-    </Container>
+    <StyledEmojiPickerContainer>
+      <EmojiPickerWrapper>
+        <EmojiPicker
+          width="100%"
+          theme={
+            currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+          }
+          onEmojiClick={handleEmojiClicked}
+        />
+      </EmojiPickerWrapper>
+    </StyledEmojiPickerContainer>
   );
 }
diff --git a/app/src/features/chats/media/FileViewer.tsx b/app/src/features/chats/media/FileViewer.tsx
index 93cac824..3e24a0ee 100644
--- a/app/src/features/chats/media/FileViewer.tsx
+++ b/app/src/features/chats/media/FileViewer.tsx
@@ -28,8 +28,8 @@ function getFileType(fileName: string): string {
   if (!extension) return "unknown";
 
   const imageTypes = ["png", "jpg", "jpeg", "gif", "bmp"];
-  const videoTypes = ["mp4", "webm"];
-  const audioTypes = ["mp3", "wav"];
+  const videoTypes = ["mp4"];
+  const audioTypes = ["mp3", "wav", "webm"];
   const pdfTypes = ["pdf"];
 
   if (imageTypes.includes(extension)) return "image";
diff --git a/app/src/mocks/chats/media.ts b/app/src/mocks/chats/media.ts
index 824b8b6e..012af5fe 100644
--- a/app/src/mocks/chats/media.ts
+++ b/app/src/mocks/chats/media.ts
@@ -21,7 +21,7 @@ export const media = [
         status: "success",
         message: "File uploaded successfully",
         data: {
-          mediaFileName: "af32509b11fdb42b.jpg",
+          mediaFileName: "927b84545f5258ac.webm",
         },
       },
       { status: 200 }

From 0f510de9d1ff8c9a13827232bf4699d8e69c1a7b Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Mon, 2 Dec 2024 21:32:40 +0200
Subject: [PATCH 057/136] =?UTF-8?q?=20=E2=9C=85(messaging):=20Integrated?=
 =?UTF-8?q?=20(send,=20edit,=20reply,=20pin,=20unpin)=20with=20backend=20(?=
 =?UTF-8?q?#93)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💥 (messaging): Pagination logic with MUCH problems to be handled

* 👽️ (messaging): Update messages interface to match backend

* 💡 (messaging): Added TODOS in message type to change

* 🎨 (pagination): Redux messages are now synced with sockets/api updates

TODO: make redux initial state array of messages for each chat

* 🤡 (messaging): Changed mock messages data

* ✨ (messaging): Integrate messages with backend

yet pagination problem (just in rendering)

* ✅ (messaging): Integrated send, reply, pin with backend

* ✅ (messaging): Integrated send, receive with backend for both clients

* ✅ (messaging): Integrated pin messages with backend

* ✅ (messaging): Integrated unpin message with backend

* ✅ (messaging): Integrated replying with backend
---
 app/package-lock.json                         |   3 -
 .../authentication/login/hooks/useUser.ts     |   3 +-
 app/src/features/chats/Message.tsx            |  22 +-
 .../features/chats/hooks/useMessageSender.ts  |   9 +-
 .../chats/hooks/useOptionListAction.ts        |   6 +-
 .../features/chats/services/apiGetChats.ts    |   2 +
 app/src/sockets/SocketProvider.tsx            | 199 ++++++++++--------
 app/src/types/messages.ts                     |  27 +--
 app/src/utils/socket.ts                       |  11 -
 app/src/utils/socket.tsx                      |  45 ++++
 app/static-analysis-report.example.json       |   2 +-
 11 files changed, 191 insertions(+), 138 deletions(-)
 delete mode 100644 app/src/utils/socket.ts
 create mode 100644 app/src/utils/socket.tsx

diff --git a/app/package-lock.json b/app/package-lock.json
index 5ad7eb8b..796332a1 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -5582,7 +5582,6 @@
       "version": "1.7.8",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
       "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -7299,7 +7298,6 @@
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
       "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -10094,7 +10092,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/proxy-from-env": {
diff --git a/app/src/features/authentication/login/hooks/useUser.ts b/app/src/features/authentication/login/hooks/useUser.ts
index ec1d6788..b3172230 100644
--- a/app/src/features/authentication/login/hooks/useUser.ts
+++ b/app/src/features/authentication/login/hooks/useUser.ts
@@ -6,8 +6,9 @@ export function useUser() {
     queryKey: ["user"],
     queryFn: apiUser,
   });
-  
+
   const user = data?.user;
+  console.log(user);
 
   return { user, isPending };
 }
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 8312cdde..20832c46 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -19,12 +19,12 @@ import renderWithHighlight from "@utils/renderWithHighlight";
 
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
-import { useSocket } from "@hooks/useSocket";
 import MessageBox from "./MessageBox";
 import useCheckBox from "@features/forward/hooks/useCheckBox";
 import useHover from "./hooks/useHover";
 import useOptionListAction from "./hooks/useOptionListAction";
 import FileViewer from "./media/FileViewer";
+import { useSocket } from "@hooks/useSocket";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -64,6 +64,12 @@ const Bubble = styled.div<{ $isMine: boolean }>`
   margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
   z-index: 1;
 
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text !important;
+  cursor: text;
+
   word-break: break-word;
   white-space: pre-wrap;
 `;
@@ -130,8 +136,7 @@ function Message({
     content,
     isPinned,
     chatId,
-    isReply,
-    replyMessageId,
+    parentMessageId,
     media,
   },
 }: MessageProps) {
@@ -172,22 +177,21 @@ function Message({
   const { isHovered, handleMouseLeave, handleOpenList } = useHover();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const { handleEditMessage, handleReply, MoveToReplyMessage } =
-    useOptionListAction({ id, content, replyMessageId });
+    useOptionListAction({ id, content, parentMessageId });
   const dispatch = useAppDispatch();
 
   function pinOnClick() {
     if (isPinned) {
       dispatch(unpinMessage({ messageId: id, chatId: chatId }));
-      unpinMessageSocket(id, chatId, userId);
+      unpinMessageSocket(chatId, id, userId);
       return;
     }
     dispatch(pinMessage({ messageId: id, chatId: chatId }));
-    pinMessageSocket(id, chatId, userId);
+    pinMessageSocket(chatId, id, userId);
   }
 
   function forwardOnClick() {
     dispatch(setShowCheckBox({ showCheckBox: !showCheckBox }));
-    // dispatch(setIsOptionListOpen({ value: !isOptionListOpen, id: id }));
   }
 
   return (
@@ -209,12 +213,12 @@ function Message({
       >
         <Bubble $isMine={senderId === userId}>
           <StyledCol>
-            {isReply && (
+            {parentMessageId && (
               <MessageBoxWrapper
                 onClick={MoveToReplyMessage}
                 test-id={`reply-box-${id}`}
               >
-                <MessageBox messageId={replyMessageId} />
+                <MessageBox messageId={parentMessageId} />
               </MessageBoxWrapper>
             )}
             {media && <FileViewer file={media} />}
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 9751bfa9..139e9a2d 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
-import { useSocket } from "@hooks/useSocket";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { MessageInterface, MessageStatus } from "types/messages";
+import { useSocket } from "@hooks/useSocket";
 
 export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
@@ -22,17 +22,16 @@ export const useMessageSender = () => {
         _id: "",
         timestamp: new Date().toISOString(),
         content: data,
-        contentType: "normal",
+        contentType: "text",
         isPinned: false,
         isForward: false,
         isAnnouncement: false,
         senderId: userId,
         chatId: chatId!,
 
-        parentMessageId: "",
+        parentMessageId: isReply ? activeMessage.id : undefined,
+        isReply,
         status: MessageStatus.sent,
-        isReply: isReply,
-        replyMessageId: isReply ? activeMessage.id : null,
         media: file,
       };
       sendMessage(message);
diff --git a/app/src/features/chats/hooks/useOptionListAction.ts b/app/src/features/chats/hooks/useOptionListAction.ts
index b190aa24..98e46304 100644
--- a/app/src/features/chats/hooks/useOptionListAction.ts
+++ b/app/src/features/chats/hooks/useOptionListAction.ts
@@ -4,11 +4,11 @@ import { setActiveMessage } from "@state/messages/activeMessage";
 function useOptionListAction({
   id,
   content,
-  replyMessageId,
+  parentMessageId,
 }: {
   id: string;
   content: string;
-  replyMessageId: string | null;
+  parentMessageId: string | null;
 }) {
   const dispatch = useAppDispatch();
   function handleEditMessage() {
@@ -21,7 +21,7 @@ function useOptionListAction({
 
   function MoveToReplyMessage() {
     const targetMsg = document.querySelector(
-      "[data-message-id='" + replyMessageId + "']"
+      "[data-message-id='" + parentMessageId + "']"
     );
 
     if (targetMsg) {
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index 9e425da3..2d908f0b 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -31,6 +31,8 @@ export async function getChatApi(id: string) {
 
   const data = await res.json();
 
+  console.log(data);
+
   if (data.status !== "success") {
     throw new Error(data.message);
   }
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index b78dc0f7..20c251dc 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -12,13 +12,13 @@ import {
 } from "@state/messages/messages";
 
 import { SocketContext } from "./SocketContext";
-import { getSocket } from "utils/socket";
-import { useChats } from "@features/chats/hooks/useChats";
+import { getSocket } from "utils/socket.tsx";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
-  message: MessageInterface,
+  message: MessageInterface
 ) => {
+  console.log(message);
   dispatch(addMessage(message));
 };
 
@@ -33,7 +33,7 @@ type SocketProviderProps = {
 interface AcknowledgmentResponse {
   success: boolean;
   message: string;
-  res: string;
+  res: any;
 }
 
 function SocketProvider({ children }: SocketProviderProps) {
@@ -41,101 +41,101 @@ function SocketProvider({ children }: SocketProviderProps) {
   const dispatch = useDispatch();
   const socket = getSocket();
 
-  const { chats, isPending } = useChats();
-
   useEffect(() => {
-    socket.connect();
+    if (socket) {
+      socket.connect();
+
+      //TODO: remove and make sure it still works
+      socket.on("connect", () => {
+        const engine = socket.io.engine;
+        setIsConnected(true);
+        console.log("connected");
+
+        engine.on("close", (reason) => {
+          console.log(reason);
+        });
+      });
 
-    socket.on("connect", () => {
-      const engine = socket.io.engine;
-      setIsConnected(true);
-      console.log("connected");
+      socket.on("RECEIVE_MESSAGE", (message: MessageInterface) => {
+        console.log("inside recieve");
+        console.log(message);
 
-      engine.on("close", (reason) => {
-        console.log(reason);
+        handleIncomingMessage(dispatch, message);
       });
-    });
-
-    socket.on("RECEIVE_MESSAGE", (message: MessageInterface) => {
-      handleIncomingMessage(dispatch, message);
-    });
-
-    socket.on(
-      "PIN_MESSAGE_SERVER",
-      ({
-        chatId,
-        messageId,
-        userId,
-      }: {
-        chatId: string;
-        messageId: string;
-        userId: string;
-      }) => {
-        console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
-        dispatch(pinMessage({ messageId, chatId }));
-      },
-    );
-
-    socket.on(
-      "UNPIN_MESSAGE_SERVER",
-      ({
-        chatId,
-        messageId,
-        userId,
-      }: {
-        chatId: string;
-        messageId: string;
-        userId: string;
-      }) => {
-        console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
-        dispatch(unpinMessage({ messageId, chatId }));
-      },
-    );
-
-    socket.on(
-      "EDIT_MESSAGE_SERVER",
-      (chatId: string, messageId: string, content: string) => {
-        console.log("EDIT_MESSAGE_SERVER", chatId, messageId, content);
-        dispatch(editMessage({ chatId, messageId, content }));
-      },
-    );
-
-    socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
-    socket.emit("typing");
-    return () => {
-      socket.disconnect();
-
-      socket.off("connect");
-      socket.off("disconnect");
-      socket.off("receive_message");
-      socket.off("typing");
-    };
-  }, [dispatch, socket]);
 
-  useEffect(() => {
-    if (!isPending && chats?.length) {
-      chats.forEach((chat) => {
-        socket.emit("join", { chatId: chat._id });
-      });
-      console.log(
-        "Joined all chats:",
-        chats.map((chat) => chat._id),
+      socket.on(
+        "PIN_MESSAGE_SERVER",
+        ({
+          chatId,
+          messageId,
+          userId,
+        }: {
+          chatId: string;
+          messageId: string;
+          userId: string;
+        }) => {
+          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+          dispatch(pinMessage({ messageId, chatId }));
+        }
       );
+
+      socket.on(
+        "UNPIN_MESSAGE_SERVER",
+        ({
+          chatId,
+          messageId,
+          userId,
+        }: {
+          chatId: string;
+          messageId: string;
+          userId: string;
+        }) => {
+          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+          dispatch(unpinMessage({ messageId, chatId }));
+        }
+      );
+
+      socket.on("EDIT_MESSAGE_SERVER", (message: MessageInterface) => {
+        console.log(message);
+        dispatch(
+          editMessage({
+            chatId: message.chatId,
+            messageId: message._id,
+            content: message.content,
+          })
+        );
+      });
+
+      socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
+      socket.emit("typing");
+      return () => {
+        socket.disconnect();
+
+        socket.off("connect");
+        socket.off("disconnect");
+        socket.off("receive_message");
+        socket.off("typing");
+      };
     }
-  }, [isConnected, isPending, chats, socket]);
+  }, [dispatch, socket]);
 
   const sendMessage = (sentMessage: MessageInterface) => {
-    if (isConnected) {
+    if (isConnected && socket) {
       socket.emit(
         "SEND_MESSAGE",
-        sentMessage,
+        { ...sentMessage, isFirstTime: false, chatType: "private" },
         ({ success, message, res }: AcknowledgmentResponse) => {
+          console.log("message sent");
+          
+          if (!success) {
+            console.log(res);
+          }
           if (success) {
             console.log(message);
-            const _id = res;
+            const _id = res.messageId;
             handleIncomingMessage(dispatch, { ...sentMessage, _id });
           }
-        },
+        }
       );
     } else {
       console.warn("Cannot send message: not connected to socket server");
@@ -145,21 +145,36 @@ function SocketProvider({ children }: SocketProviderProps) {
   const editMessageSocket = (
     messageId: string,
     content: string,
-    chatId: string,
+    chatId: string
   ) => {
-    if (isConnected) {
-      socket.emit("EDIT_MESSAGE_CLIENT", { messageId, content, chatId });
-    } else {
-      console.warn("Cannot edit message: not connected to socket server");
+    if (isConnected && socket) {
+      socket.emit(
+        "EDIT_MESSAGE_CLIENT",
+        { messageId, content, chatId },
+        (response: any) => {
+          if (response.success) {
+            console.log("Message edited successfully:", response.res.message);
+             dispatch(
+               editMessage({
+                 chatId: response.res.message.chatId,
+                 messageId: response.res.message._id,
+                 content: response.res.message.content,
+               })
+             );
+          } else {
+            console.error("Failed to edit message:", response.error);
+          }
+        }
+      );
     }
   };
 
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
-    if (isConnected) {
+    if (isConnected && socket) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
     } else {
       console.warn("Cannot pin message: not connected to socket server");
@@ -169,9 +184,9 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
-    if (isConnected) {
+    if (isConnected && socket) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
     } else {
       console.warn("Cannot unpin message: not connected to socket server");
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 74756f8a..43c1a11a 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -5,33 +5,34 @@ export enum MessageStatus {
   "error",
 }
 
+export type ContentType =
+  | "text"
+  | "image"
+  | "GIF"
+  | "sticker"
+  | "audio"
+  | "video"
+  | "file"
+  | "link";
+
 export interface MessageInterface {
   _id: string;
 
   //TODO: needs to be Date
   timestamp: string;
   content: string;
-  contentType: string;
+  contentType: ContentType;
   isPinned: boolean;
   isForward: boolean;
   isAnnouncement: boolean;
   senderId: string;
   chatId: string;
 
-  parentMessageId: string;
-  status: MessageStatus;
-  
-  media?: string;
-
-  //TODO: should use parentMessageId
+  parentMessageId: string | undefined;
   isReply: boolean;
-  replyMessageId: string | null;
-}
+  status: MessageStatus;
 
-export enum StickerTap {
-  gif,
-  emoji,
-  sticker,
+  media?: string;
 }
 
 export enum StickerTap {
diff --git a/app/src/utils/socket.ts b/app/src/utils/socket.ts
deleted file mode 100644
index 2b3fb54c..00000000
--- a/app/src/utils/socket.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { DefaultEventsMap } from "@socket.io/component-emitter";
-import { io, Socket } from "socket.io-client";
-
-let socketInstance: Socket<DefaultEventsMap, DefaultEventsMap>;
-
-export const getSocket = () => {
-  if (!socketInstance) {
-    socketInstance = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {});
-  }
-  return socketInstance;
-};
diff --git a/app/src/utils/socket.tsx b/app/src/utils/socket.tsx
new file mode 100644
index 00000000..793cf481
--- /dev/null
+++ b/app/src/utils/socket.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { io, Socket } from "socket.io-client";
+import { useUser } from "@features/authentication/login/hooks/useUser";
+import { DefaultEventsMap } from "@socket.io/component-emitter";
+
+let socketInstance: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
+
+function getSocket() {
+  const { user, isPending } = useUser();
+  const [socket, setSocket] = useState<Socket<
+    DefaultEventsMap,
+    DefaultEventsMap
+  > | null>(null);
+
+  console.log(localStorage.getItem("sessionId"));
+
+  useEffect(() => {
+    if (!isPending && user && !socketInstance) {
+      console.log("Initializing socket with user:", user);
+      console.log(user._id);
+
+      socketInstance = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
+        query: {
+          userId: user._id,
+        },
+        auth: {
+          sessionId: localStorage.getItem("sessionId"),
+        },
+      });
+
+      setSocket(socketInstance);
+
+      // Cleanup on unmount
+      return () => {
+        console.log("Disconnecting socket");
+        socketInstance?.disconnect();
+        socketInstance = null;
+      };
+    }
+  }, [user, isPending]);
+
+  return socket;
+}
+
+export { getSocket };
diff --git a/app/static-analysis-report.example.json b/app/static-analysis-report.example.json
index a65eac91..2a512c41 100644
--- a/app/static-analysis-report.example.json
+++ b/app/static-analysis-report.example.json
@@ -5207,7 +5207,7 @@
       ]
     },
     {
-      "filePath": "/app/src/utils/socket.ts",
+      "filePath": "/app/src/utils/socket.tsx",
       "errors": [],
       "warnings": []
     },

From 39109736bd9e00a7c6cbb0f9cf78299a2dd56e9e Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Mon, 2 Dec 2024 23:43:15 +0200
Subject: [PATCH 058/136] :recycle: (messaging): Whole messaging state
 management refactored!! (#95)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💥 (messaging): Pagination logic with MUCH problems to be handled

* 👽️ (messaging): Update messages interface to match backend

* 💡 (messaging): Added TODOS in message type to change

* 🎨 (pagination): Redux messages are now synced with sockets/api updates

TODO: make redux initial state array of messages for each chat

* 🤡 (messaging): Changed mock messages data

* ✨ (messaging): Integrate messages with backend

yet pagination problem (just in rendering)

* ✅ (messaging): Integrated send, reply, pin with backend

* :recycle: (messaging): changing whole flow of message handling

* :bug: (messaging): fixing bugs from merge

---------

Co-authored-by: asmaa-204 <asmaa.abozaid204@gmail.com>
---
 app/package-lock.json                         |  11 +
 app/src/features/chats/ChatBody.tsx           |  38 ++--
 app/src/features/chats/ChatInput.tsx          |  34 +--
 app/src/features/chats/ChatItem.tsx           |  16 +-
 app/src/features/chats/ChatsList.tsx          |   4 +-
 app/src/features/chats/Message.tsx            |  18 +-
 app/src/features/chats/MessageBox.tsx         |  48 ++---
 app/src/features/chats/Topbar.tsx             |  32 ++-
 app/src/features/chats/helpers.ts             |  27 +++
 app/src/features/chats/hooks/useChatMember.ts |  10 +
 app/src/features/chats/hooks/useChats.ts      |  29 +--
 .../features/chats/hooks/useFetchNextPage.tsx |  13 +-
 .../features/chats/hooks/useMessageSender.ts  |   2 +-
 .../chats/hooks/useScrollToLastMsg.ts         |   6 +-
 .../chats/hooks/useSelectedMessages.ts        |  13 ++
 .../features/forward/ForwardingInputBar.tsx   |  16 +-
 app/src/features/forward/ScrollableChats.tsx  |  34 ++-
 app/src/features/forward/hooks/useCheckBox.ts |  24 ++-
 .../components/PinnedMessageProgressBar.tsx   |   3 +-
 .../components/PinnedMessages.tsx             |  22 +-
 .../privacy-settings/AddToBlockMenuList.tsx   |  32 +--
 .../features/privacy-settings/BlockItem.tsx   |   6 +-
 .../privacy-settings/hooks/useBlock.ts        |   1 -
 .../privacy-settings/service/getBlockList.ts  |   2 +-
 app/src/mocks/data/chats.ts                   |   6 +-
 app/src/mocks/data/messages.ts                |  22 +-
 app/src/sockets/SocketProvider.tsx            |  91 ++++----
 app/src/state/messages/chats.ts               | 196 ++++++++++++++++++
 app/src/state/messages/messages.ts            | 138 ------------
 app/src/state/store.ts                        |   4 +-
 app/src/types/messages.ts                     |   2 +-
 31 files changed, 559 insertions(+), 341 deletions(-)
 create mode 100644 app/src/features/chats/helpers.ts
 create mode 100644 app/src/features/chats/hooks/useChatMember.ts
 create mode 100644 app/src/features/chats/hooks/useSelectedMessages.ts
 create mode 100644 app/src/state/messages/chats.ts
 delete mode 100644 app/src/state/messages/messages.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index 796332a1..15128a47 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -5589,6 +5589,17 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 5c9a3065..7fa7b2ed 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -1,11 +1,12 @@
 import styled from "styled-components";
-import { useSelector } from "react-redux";
 
-import { RootState } from "@state/store";
 import Message from "./Message";
 import { useInView } from "@features/stories/hooks/useInView";
 import { useEffect } from "react";
 import { useFetchNextPage } from "./hooks/useFetchNextPage";
+import { getChatByID } from "./helpers";
+import { useParams } from "react-router-dom";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const ScrollContainer = styled.div`
   width: 100%;
@@ -37,11 +38,19 @@ const ScrollContainer = styled.div`
 `;
 
 function ChatBody() {
-  const messages = useSelector((state: RootState) => state.messages.messages);
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+
+  const messages =
+    chatId &&
+    getChatByID({
+      chats: chats,
+      chatID: chatId,
+    })?.messages;
 
   const { fetchNextPage, data } = useFetchNextPage();
 
-  const { inView, ref } = useInView();
+  const { inView, ref } = useInView({});
 
   useEffect(() => {
     console.log(inView);
@@ -59,16 +68,17 @@ function ChatBody() {
       <ScrollContainer>
         <div ref={ref}></div>
 
-        {messages.map((data, index) => {
-          return (
-            <Message
-              key={data._id}
-              index={index}
-              messagesLength={messages.length}
-              data={data}
-            />
-          );
-        })}
+        {messages &&
+          messages.map((data, index) => {
+            return (
+              <Message
+                key={data._id}
+                index={index}
+                messagesLength={messages.length}
+                data={data}
+              />
+            );
+          })}
       </ScrollContainer>
     </>
   );
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index f4a91154..478e9ba2 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import { getIcon } from "@data/icons";
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Icon from "@components/Icon";
-import { RootState } from "@state/store";
-import { setShowCheckBox } from "@state/messages/messages";
+
 import RecordInput from "./SendButton";
 import ForwardingInputBar from "@features/forward/ForwardingInputBar";
 import ScrollableChats from "@features/forward/ScrollableChats";
@@ -15,6 +15,9 @@ import ReplyWrapper from "./ReplyWrapper";
 import { clearActiveMessage } from "@state/messages/activeMessage";
 import MediaUploadComponent from "./media/MediaUploadComponent";
 import FilePreviewItem from "./media/FilePreviewItem";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { setShowCheckBox } from "@state/messages/chats";
+import { getChatByID } from "./helpers";
 import VoiceRecorder, { RecordingStates } from "./audio/VoiceRecorder";
 import RecordingView from "./audio/RecordingView";
 
@@ -73,9 +76,9 @@ const Input = styled.div`
 `;
 
 function ChatInput() {
-  const activeMessage = useSelector((state: RootState) => state.activeMessage);
+  const activeMessage = useAppSelector((state) => state.activeMessage);
   const [input, setInput] = useState<string>("");
-  const [file, setFile] = useState<File | string>(null);
+  const [file, setFile] = useState<File | null>(null);
   const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
   const [isRecording, setIsRecording] = useState<RecordingStates>("idle");
   const [error, setError] = useState<string>("");
@@ -98,15 +101,21 @@ function ChatInput() {
     setInput("");
   };
 
-  const showCheckBox = useSelector(
-    (state: RootState) => state.messages.showCheckBox
-  );
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const showCheckBox =
+    chatId && getChatByID({ chats: chats, chatID: chatId })?.showCheckBox;
 
   const [showForwardUsers, setShowForwardUsers] = useState(false);
 
   function handleClose() {
+    if (!chatId) {
+      return;
+    }
+
     setShowForwardUsers(false);
-    dispatch(setShowCheckBox({ showCheckBox: false }));
+    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: false }));
   }
 
   function handleForward() {
@@ -131,16 +140,16 @@ function ChatInput() {
           data-testid="file-preview"
         />
       )}
+      // TODO: Fix the emoji picker
       <Container data-testid="chat-input-container">
         {!showCheckBox ? (
           <Input data-testid="chat-input">
-            {isEmojiSelectorOpen && (
+            {/* {isEmojiSelectorOpen && (
               <EmojiPickerItem
                 setInputText={setInput}
                 data-testid="emoji-picker"
               />
-            )}
-
+            )} */}
             <InputContainer>
               {activeMessage.id && <ReplyWrapper setInput={setInput} />}
 
@@ -192,7 +201,6 @@ function ChatInput() {
             data-testid="forwarding-input-bar"
           />
         )}
-
         {showForwardUsers && <ScrollableChats onClose={handleClose} />}
       </Container>
     </>
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 6971b62a..3ee5fa2a 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -2,7 +2,8 @@ import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import Avatar from "./Avatar";
-import { Chat } from "@mocks/data/Chats";
+import { DetailedChatInterface } from "@state/messages/chats";
+import { useChatMembers } from "./hooks/useChatMember";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -53,14 +54,17 @@ const LastMessage = styled.p`
 `;
 
 type ChatItemProps = {
-  chat: Chat;
+  chat: DetailedChatInterface;
 };
 
 function ChatItem({
   chat: { _id, members, type, lastMessage },
 }: ChatItemProps) {
-  const name = members[0]?.screenFirstName || members[0]?.username;
-  const image = members[0]?.photo?.length > 50 ? members[0]?.photo : undefined;
+  const membersData = useChatMembers(members);
+
+  const name = membersData[0]?.screenFirstName || membersData[0]?.username;
+  const image =
+    membersData[0]?.photo?.length > 50 ? membersData[0]?.photo : undefined;
   const navigate = useNavigate();
 
   const timestamp = lastMessage?.timestamp || "No messages";
@@ -75,7 +79,7 @@ function ChatItem({
   return (
     <Container
       data-testid="chat-container"
-      $active={Number(chatId) === _id}
+      $active={chatId === _id}
       onClick={handleOpenChat}
       key={_id}
     >
@@ -83,7 +87,7 @@ function ChatItem({
       <ChatContent>
         <ChatHeader>
           <Name data-testid="chat-name">
-            {type === "private" ? name : `Group ${members[0]?.username}`}
+            {type === "private" ? name : `Group ${membersData[0]?.username}`}
           </Name>
           <Timestamp data-testid="chat-timestamp">
             {new Date(timestamp).toLocaleTimeString("en-US", {
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index b542bf43..6f7d275b 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import ChatItem from "./ChatItem";
 import { useChats } from "./hooks/useChats";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const ChatListContainer = styled.ul`
   display: flex;
@@ -12,7 +13,8 @@ const ChatListContainer = styled.ul`
 `;
 
 const ChatsList = () => {
-  const { chats, isPending } = useChats();
+  const { isPending } = useChats();
+  const chats = useAppSelector((state) => state.chats.chats);
 
   if (isPending) return;
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 20832c46..94624231 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -1,12 +1,6 @@
 import { useEffect, useRef } from "react";
 import styled from "styled-components";
 
-import {
-  setShowCheckBox,
-  pinMessage,
-  unpinMessage,
-} from "@state/messages/messages";
-
 import { MessageInterface } from "types/messages";
 
 import { getIcon } from "@data/icons";
@@ -24,6 +18,11 @@ import useCheckBox from "@features/forward/hooks/useCheckBox";
 import useHover from "./hooks/useHover";
 import useOptionListAction from "./hooks/useOptionListAction";
 import FileViewer from "./media/FileViewer";
+import {
+  pinMessage,
+  setShowCheckBox,
+  unpinMessage,
+} from "@state/messages/chats";
 import { useSocket } from "@hooks/useSocket";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
@@ -173,7 +172,10 @@ function Message({
     searchResultRef,
   ]);
 
-  const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({ id });
+  const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
+    chatId,
+    messageId: id,
+  });
   const { isHovered, handleMouseLeave, handleOpenList } = useHover();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const { handleEditMessage, handleReply, MoveToReplyMessage } =
@@ -191,7 +193,7 @@ function Message({
   }
 
   function forwardOnClick() {
-    dispatch(setShowCheckBox({ showCheckBox: !showCheckBox }));
+    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: !showCheckBox }));
   }
 
   return (
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index d12e0081..970f2d57 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -1,8 +1,9 @@
 import { useAppSelector } from "@hooks/useGlobalState";
-import { allChats } from "@mocks/data/chats";
 import { RootState } from "@state/store";
 import styled from "styled-components";
 import { MessageInterface } from "types/messages";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "./helpers";
 
 interface MessageBoxProps {
   messageId?: string | null;
@@ -49,42 +50,37 @@ const StyledMessageBox = styled.div`
   }
 `;
 
-function extractMessageData(
-  messages: MessageInterface[],
-  messageId: string,
-  id: string
-) {
-  const msg = getMessageById(messages, messageId);
-  let name: string | undefined;
-
-  if (id === msg?.senderId) name = "you";
-  else {
-    const chat =
-      msg && allChats.find((chat) => chat._id === msg?.senderId);
-    name = `${chat?.members[0].screenFirstName} ${chat?.members[0].screenLastName}`; 
-  }
-
-  return { msg, name };
-}
-
 function getMessageById(
-  messages: MessageInterface[],
-  messageId: string
+  messageId: string,
+  messages?: MessageInterface[]
 ): MessageInterface | undefined {
-  return messages.find((message) => message._id === messageId);
+  return messages
+    ? messages.find((message) => message._id === messageId)
+    : undefined;
 }
 
 function MessageBox({ messageId }: MessageBoxProps) {
   let id = useAppSelector((state) => state.user.userInfo.id);
-  const messages = useAppSelector((state) => state.messages.messages);
+  const { chats, members } = useAppSelector((state) => state.chats);
+
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const messages = chatId
+    ? getChatByID({ chats: chats, chatID: chatId })?.messages
+    : undefined;
 
   let msg: MessageInterface | undefined;
   let name: string | undefined;
 
+  // TODO: refactor this
   if (messageId) {
-    const data = extractMessageData(messages, messageId, id);
-    msg = data.msg;
-    name = data.name;
+    msg = getMessageById(messageId, messages);
+    console.log(msg);
+    if (id === msg?.senderId) name = "you";
+    else {
+      const sender = members.find((member) => member._id === msg?.senderId);
+      name = `${sender?.screenFirstName} ${sender?.screenLastName}`;
+    }
   }
 
   const activeMessage = useAppSelector(
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 39f55842..5e83cdd4 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -2,11 +2,14 @@ import { useState } from "react";
 import styled from "styled-components";
 
 import Avatar from "@features/chats/Avatar";
-import { useChat } from "@features/chats/hooks/useChat";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "./helpers";
+import { useChatMembers } from "./hooks/useChatMember";
 
 const Container = styled.div`
   position: absolute;
@@ -72,15 +75,34 @@ const IconButton = styled.button`
   justify-content: center;
 `;
 
+//TODO: refactor
 function Topbar() {
-  const { chat } = useChat();
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat =
+    chatId &&
+    getChatByID({
+      chatID: chatId,
+      chats: chats,
+    });
+
+  let membersData;
+  let name;
+  let image;
+  let lastSeen;
+  if (chat) {
+    membersData = useChatMembers(chat?.members);
+    name = membersData[0]?.screenFirstName || membersData[0]?.username;
+
+    lastSeen = chat?.lastMessage?.timestamp;
+    image =
+      membersData[0]?.photo?.length > 50 ? membersData[0]?.photo : undefined;
+  }
+
   const [isSearching, setIsSearching] = useState(false);
 
   if (!chat) return null;
 
-  const name = chat?.members[0]?.screenFirstName || chat?.members[0]?.username;
-  const lastSeen = chat?.lastMessage?.timestamp;
-  const image = chat?.members[0]?.photo;
 
   const toggleSearch = () => {
     setIsSearching(!isSearching);
diff --git a/app/src/features/chats/helpers.ts b/app/src/features/chats/helpers.ts
new file mode 100644
index 00000000..53db3a46
--- /dev/null
+++ b/app/src/features/chats/helpers.ts
@@ -0,0 +1,27 @@
+import { DetailedChatInterface } from "@state/messages/chats";
+import { ChatDataType } from "@mocks/data/chats";
+
+export function getChatByID({
+  chats,
+  chatID,
+}: {
+  chats: DetailedChatInterface[];
+  chatID: string;
+}): DetailedChatInterface | undefined {
+  return chats.find((chat) => chat._id === chatID);
+}
+
+export function parseChatsToState(chatData?: ChatDataType) {
+  if (!chatData) return [];
+
+  return chatData.chats.map((chat) => ({
+    ...chat,
+    lastMessage: chatData.lastMessages.find(
+      (lastMessage) => lastMessage.chatId === chat._id
+    )?.lastMessage,
+    messages: [],
+    isTyping: false,
+    showCheckBox: false,
+    selectedMessages: [],
+  }));
+}
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMember.ts
new file mode 100644
index 00000000..02e65fc9
--- /dev/null
+++ b/app/src/features/chats/hooks/useChatMember.ts
@@ -0,0 +1,10 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Member } from "@mocks/data/chats";
+
+export function useChatMembers(memberIDs: string[]): Member[] {
+  const members = useAppSelector((state) => state.chats.members);
+
+  return memberIDs
+    .map((id) => members.find((member) => member._id === id))
+    .filter((member): member is Member => member !== undefined);
+}
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index be75f6da..5eafad84 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -1,22 +1,27 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAllChatsApi } from "../services/apiGetChats";
-import { ChatData } from "@mocks/data/chats";
+import { ChatDataType } from "@mocks/data/chats";
+import { ChatsState, setAllChats } from "@state/messages/chats";
+import { parseChatsToState } from "../helpers";
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { useEffect } from "react";
 
 export function useChats() {
-  const { data: chatData, isPending } = useQuery<ChatData>({
+  const { data: chatData, isPending } = useQuery<ChatDataType>({
     queryKey: ["chats"],
     queryFn: getAllChatsApi,
   });
+  const dispatch = useAppDispatch();
 
-  const chats = chatData?.chats.map((chat) => ({
-    ...chat,
-    lastMessage: chatData.lastMessages.find(
-      (lastMessage) => lastMessage.chatId === chat._id,
-    )?.lastMessage,
-    members: chat.members.map((memberId) =>
-      chatData.members.find((member) => member._id === memberId),
-    ),
-  }));
+  useEffect(() => {
+    let initialChatState: ChatsState = {
+      chats: parseChatsToState(chatData),
+      members: chatData?.members || [],
+    };
 
-  return { chats, isPending };
+    dispatch(setAllChats({ chatsData: initialChatState }));
+  }, [isPending, chatData]);
+
+
+  return { isPending };
 }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.tsx b/app/src/features/chats/hooks/useFetchNextPage.tsx
index 75f18516..50301e8b 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.tsx
+++ b/app/src/features/chats/hooks/useFetchNextPage.tsx
@@ -3,10 +3,10 @@ import { useParams } from "react-router-dom";
 import { apiFetchNextPage } from "../services/apiFetchNextPage";
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
-import { mergeMessages } from "@state/messages/messages";
+import { mergeMessages } from "@state/messages/chats";
 
 function useFetchNextPage() {
-  const { chatId } = useParams();
+  const { chatId } = useParams<{ chatId: string }>();
   const dispatch = useDispatch();
 
   const {
@@ -28,8 +28,13 @@ function useFetchNextPage() {
   useEffect(() => {
     if (data) {
       const lastFetchedPage = data.pages[data.pages.length - 1];
-      if (lastFetchedPage) {
-        dispatch(mergeMessages({ messages: lastFetchedPage.messages }));
+      if (lastFetchedPage && chatId) {
+        dispatch(
+          mergeMessages({
+            chatId: chatId,
+            newMessages: lastFetchedPage.messages,
+          })
+        );
       }
     }
   }, [data, chatId, dispatch]);
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 139e9a2d..4a91b2e0 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -29,7 +29,7 @@ export const useMessageSender = () => {
         senderId: userId,
         chatId: chatId!,
 
-        parentMessageId: isReply ? activeMessage.id : undefined,
+        parentMessageId: isReply ? activeMessage.id : null,
         isReply,
         status: MessageStatus.sent,
         media: file,
diff --git a/app/src/features/chats/hooks/useScrollToLastMsg.ts b/app/src/features/chats/hooks/useScrollToLastMsg.ts
index ca0af2ff..0582c74a 100644
--- a/app/src/features/chats/hooks/useScrollToLastMsg.ts
+++ b/app/src/features/chats/hooks/useScrollToLastMsg.ts
@@ -1,11 +1,9 @@
+import { useAppSelector } from "@hooks/useGlobalState";
 import { useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
-
-import { RootState } from "@state/store";
 
 function useScrollToLastMsg() {
   const lastMessageRef = useRef<HTMLDivElement>(null);
-  const messages = useSelector((state: RootState) => state.messages.messages);
+  const messages = useAppSelector((state) => state.chats.chats[0].messages);
 
   useEffect(() => {
     lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
diff --git a/app/src/features/chats/hooks/useSelectedMessages.ts b/app/src/features/chats/hooks/useSelectedMessages.ts
new file mode 100644
index 00000000..7af9c532
--- /dev/null
+++ b/app/src/features/chats/hooks/useSelectedMessages.ts
@@ -0,0 +1,13 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "../helpers";
+
+function useSelectedMessages({ chatId }: { chatId?: string }) {
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = chatId ? getChatByID({ chatID: chatId, chats }) : undefined;
+
+  const selectedMessages = chat?.selectedMessages;
+
+  return { selectedMessages };
+}
+
+export { useSelectedMessages };
diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
index 59cd4c65..e267ff8f 100644
--- a/app/src/features/forward/ForwardingInputBar.tsx
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -1,6 +1,8 @@
 import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
+import { getChatByID } from "@features/chats/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
@@ -35,12 +37,16 @@ interface Props {
 }
 
 function ForwardingInputBar(props: Props) {
+  const { chatId } = useParams<{ chatId: string }>();
+
   const { onClose, onForward } = props;
-  const selectedMessages = useAppSelector(
-    (state) => state.messages.selectedMessages
-  );
 
-  return (
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = chatId ? getChatByID({ chatID: chatId, chats }) : undefined;
+
+  const selectedMessages = chat?.selectedMessages;
+
+  return selectedMessages ? (
     <Wrapper>
       <IconButton onClick={onClose} test-id="close-icon">
         <Icon>{getIcon("Close")}</Icon>
@@ -50,6 +56,8 @@ function ForwardingInputBar(props: Props) {
         <Icon>{getIcon("Forward")}</Icon>
       </IconButton>
     </Wrapper>
+  ) : (
+    <></>
   );
 }
 
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index bdcc5161..d1c6aecb 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -1,4 +1,3 @@
-import { allChats } from "@mocks/data/chats";
 import { ScrollContainer } from "styles/GlobalStyles";
 import styled from "styled-components";
 import ChatPopupItem, { ChatPopupItemProps } from "./chatPopupItem";
@@ -7,6 +6,10 @@ import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
 import { useMessageSender } from "@features/chats/hooks/useMessageSender";
 import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { useSelectedMessages } from "@features/chats/hooks/useSelectedMessages";
+import { getChatByID } from "@features/chats/helpers";
+import { useChatMembers } from "@features/chats/hooks/useChatMember";
 
 const OuterContainer = styled.ul`
   position: absolute;
@@ -55,25 +58,31 @@ interface Props {
 }
 
 function ScrollableChats(props: Props) {
+  const { chatId } = useParams<{ chatId: string }>();
   const { onClose } = props;
-  const selectedMessages = useAppSelector(
-    (state) => state.messages.selectedMessages
-  );
-  const messages = useAppSelector((state) => state.messages.messages);
+
+  const { selectedMessages } = useSelectedMessages({ chatId });
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const messages = chatId
+    ? getChatByID({ chatID: chatId, chats })?.messages
+    : undefined;
+
   const { handleSendMessage } = useMessageSender();
 
   const handleSubmit = () => {
-    const messagesToForward = messages.filter((message) =>
-      selectedMessages.includes(message._id)
+    const messagesToForward = messages?.filter((message) =>
+      selectedMessages?.includes(message._id)
     );
 
-    messagesToForward.map((message) => {
+    messagesToForward?.map((message) => {
       handleSendMessage(message.content);
     });
 
     onClose();
   };
 
+  //TODO: refactor
   return (
     <OuterContainer>
       <HeaderRow>
@@ -83,11 +92,14 @@ function ScrollableChats(props: Props) {
         <Heading as="h4">Forward To...</Heading>
       </HeaderRow>
       <ScrollContainer>
-        {allChats?.map((item) => {
+        {chats?.map((item) => {
+          const membersData = useChatMembers(item.members);
+
           const data: ChatPopupItemProps = {
             id: item._id,
-            name: item.members[0].screenFirstName,
-            username: item.members[0].username,
+            name:
+              membersData[0].screenFirstName + membersData[0].screenFirstName,
+            username: membersData[0].username,
           };
           return (
             <StylingWrapper
diff --git a/app/src/features/forward/hooks/useCheckBox.ts b/app/src/features/forward/hooks/useCheckBox.ts
index dd2b7779..980164ee 100644
--- a/app/src/features/forward/hooks/useCheckBox.ts
+++ b/app/src/features/forward/hooks/useCheckBox.ts
@@ -1,21 +1,31 @@
+import { getChatByID } from "@features/chats/helpers";
 import { useAppSelector, useAppDispatch } from "@hooks/useGlobalState";
-import { SelectMessage, removeSelectedMessage } from "@state/messages/messages";
+import { SelectMessage, removeSelectedMessage } from "@state/messages/chats";
 import { useState, useEffect } from "react";
 
-function useCheckBox({ id }: { id: string }) {
+function useCheckBox({
+  chatId,
+  messageId,
+}: {
+  chatId: string;
+  messageId: string;
+}) {
   const [isChecked, setIsChecked] = useState<boolean>(false);
-  const showCheckBox = useAppSelector((state) => state.messages.showCheckBox);
+  const chats = useAppSelector((state) => state.chats.chats);
+  const showCheckBox = chatId
+    ? getChatByID({ chats: chats, chatID: chatId })?.showCheckBox
+    : undefined;
 
   const dispatch = useAppDispatch();
   useEffect(() => {
-    setIsChecked(isChecked && showCheckBox);
-  }, [showCheckBox]);
+    if (showCheckBox !== undefined) setIsChecked(isChecked && showCheckBox);
+  }, [showCheckBox, messageId, chatId]);
 
   function toggleCheckBox() {
     if (!isChecked) {
-      dispatch(SelectMessage({ id: id }));
+      dispatch(SelectMessage({ chatId, id: messageId }));
     } else {
-      dispatch(removeSelectedMessage({ id: id }));
+      dispatch(removeSelectedMessage({ chatId, id: messageId }));
     }
     setIsChecked(!isChecked);
   }
diff --git a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
index 80294221..b8f2c813 100644
--- a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { MessageInterface } from "types/messages";
 
 const ProgressBarContainer = styled.div`
   position: relative;
@@ -26,7 +27,7 @@ const ProgressBar = styled.div`
 `;
 
 type PinnedMessageProgressBarProps = {
-  pinnedMessages: { id: string; content: string; isPinned: boolean }[];
+  pinnedMessages: MessageInterface[];
   currentPinnedIndex: number;
 };
 
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
index 8b138b5e..b67679aa 100644
--- a/app/src/features/pin-messages/components/PinnedMessages.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -1,8 +1,10 @@
 import React, { useState, useMemo } from "react";
-import { useSelector } from "react-redux";
 import styled from "styled-components";
-import { RootState } from "@state/store";
 import PinnedMessageProgressBar from "./PinnedMessageProgressBar";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "@features/chats/helpers";
+import { useParams } from "react-router-dom";
+import { MessageInterface } from "types/messages";
 
 const PinnedMessagesContainer = styled.div`
   display: flex;
@@ -41,9 +43,15 @@ const PinnedMessagePreview = styled.div`
 `;
 
 const PinnedMessages: React.FC = () => {
-  const pinnedMessages = useSelector((state: RootState) =>
-    state.messages.messages.filter((msg) => msg.isPinned),
-  );
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = chatId && getChatByID({ chatID: chatId, chats });
+
+  let pinnedMessages: MessageInterface[] = [];
+  if (chat)
+    pinnedMessages = chat.messages.filter((message) => message.isPinned);
+
   const [currentPinnedIndex, setCurrentPinnedIndex] = useState(0);
 
   const currentPinnedMessage = useMemo(() => {
@@ -53,10 +61,10 @@ const PinnedMessages: React.FC = () => {
   const handleNextPinnedMessage = () => {
     if (pinnedMessages.length > 0) {
       setCurrentPinnedIndex(
-        (prevIndex) => (prevIndex + 1) % pinnedMessages.length,
+        (prevIndex) => (prevIndex + 1) % pinnedMessages.length
       );
       document
-        .querySelector("[data-message-id='" + currentPinnedMessage?.id + "']")
+        .querySelector("[data-message-id='" + currentPinnedMessage?._id + "']")
         ?.scrollIntoView({
           behavior: "smooth",
           block: "center",
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
index 32fecbd7..3ae71d39 100644
--- a/app/src/features/privacy-settings/AddToBlockMenuList.tsx
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -2,8 +2,9 @@ import styled from "styled-components";
 import BlockItem, { BlockedUserProps } from "./BlockItem";
 import { useBlock } from "./hooks/useBlock";
 import { ScrollContainer } from "styles/GlobalStyles";
-import { useChats } from "@features/chats/hooks/useChats";
-import { Chat } from "@mocks/data/chats";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { DetailedChatInterface } from "@state/messages/chats";
+import { useChatMembers } from "@features/chats/hooks/useChatMember";
 
 const StyledList = styled.ul<StyledListProps>`
   position: absolute;
@@ -49,12 +50,14 @@ const StyledP = styled.p`
   justify-self: center;
   align-self: center;
 `;
-
-function filterChats(blockList: BlockedUserProps[], chats: Chat[]) {
+function filterChats(
+  blockList: BlockedUserProps[],
+  chats: DetailedChatInterface[]
+) {
   const blockIds = blockList
     ? new Set(blockList.map((val) => val.id))
     : new Set();
-  const filteredChats = chats?.filter((item) => !blockIds.has(item.id));
+  const filteredChats = chats?.filter((item) => !blockIds.has(item._id));
 
   return filteredChats;
 }
@@ -63,16 +66,16 @@ function AddToBlockMenuList({ setIsMenuOpened }: any) {
   const { addToBlockList } = useBlock();
 
   const { blockList } = useBlock();
-  const { chats } = useChats();
+  const chats = useAppSelector((state) => state.chats.chats);
 
   const filteredChats = filterChats(
     blockList as BlockedUserProps[],
-    chats as Chat[]
+    chats as DetailedChatInterface[]
   );
 
-  function handleClick(item: Chat) {
+  function handleClick(item: DetailedChatInterface) {
     setIsMenuOpened(false);
-    addToBlockList({ id: item.id.toString() });
+    addToBlockList({ id: item._id });
   }
 
   return (
@@ -80,10 +83,15 @@ function AddToBlockMenuList({ setIsMenuOpened }: any) {
       <ScrollContainer>
         {filteredChats.length ? (
           filteredChats.map((item) => {
+            const membersData = useChatMembers(item.members);
+
             const data: BlockedUserProps = {
-              name: item.name,
-              id: item.id,
-              username: item.name.toLowerCase() + 123,
+              id: item._id,
+              name:
+                membersData[0].screenFirstName +
+                " " +
+                membersData[0].screenLastName,
+              username: membersData[0].username,
             };
             return (
               <StylingWrapper
diff --git a/app/src/features/privacy-settings/BlockItem.tsx b/app/src/features/privacy-settings/BlockItem.tsx
index beac2bd9..2b950b76 100644
--- a/app/src/features/privacy-settings/BlockItem.tsx
+++ b/app/src/features/privacy-settings/BlockItem.tsx
@@ -48,8 +48,6 @@ const StyledP = styled.p`
 
 const menuStyles: StyledListProps = {
   $bottom: -6,
-  $right: 0,
-  $size: 40,
   $height: 0,
 };
 
@@ -67,7 +65,7 @@ const HoverMask = styled.div`
 `;
 
 interface BlockedUserInterface {
-  id: number;
+  id: string;
   name: string;
   username: string;
 }
@@ -77,7 +75,7 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
 
   const { removeFromBlockList } = useBlock();
 
-  function handleRemove(id: number) {
+  function handleRemove(id: string) {
     removeFromBlockList({ id: id.toString() });
     setIsBlockButtonEnabled(false);
   }
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
index a7aef209..591de5d3 100644
--- a/app/src/features/privacy-settings/hooks/useBlock.ts
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -1,5 +1,4 @@
 import {
-  QueryClient,
   useMutation,
   useQuery,
   useQueryClient,
diff --git a/app/src/features/privacy-settings/service/getBlockList.ts b/app/src/features/privacy-settings/service/getBlockList.ts
index 58b56e7a..267df334 100644
--- a/app/src/features/privacy-settings/service/getBlockList.ts
+++ b/app/src/features/privacy-settings/service/getBlockList.ts
@@ -3,7 +3,7 @@ import { API_URL } from "@constants";
 import { BlockedUserProps } from "../BlockItem";
 
 async function getBlockList() {
-  const response = await fetch(`${API_URL}/users/block`, {
+  const response = await fetch(`${API_URL}/users/blocked`, {
     method: "GET",
     credentials: "include",
     headers: {
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index f091a2c7..88706ef1 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -18,14 +18,16 @@ export type Chat = {
   numberOfMembers: number;
 };
 
-export type ChatData = {
+export type ChatDataType = {
   chats: Chat[];
   members: Member[];
   lastMessages: {
     chatId: string;
     lastMessage: {
+      _id: string;
       content: string;
-      timestaamp: string;
+      senderId: string;
+      timestamp: string;
     };
   }[];
 };
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
index fd4c0360..4b3db478 100644
--- a/app/src/mocks/data/messages.ts
+++ b/app/src/mocks/data/messages.ts
@@ -14,7 +14,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -30,7 +29,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
-    replyMessageId: null,
     media: "https://example.com/doc.pdf",
   },
   {
@@ -46,7 +44,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -62,7 +59,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -78,7 +74,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.error,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -94,7 +89,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -110,7 +104,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: true,
-    replyMessageId: "msg2",
     media: "",
   },
   {
@@ -126,7 +119,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
-    replyMessageId: null,
     media: "https://example.com/report.pdf",
   },
   {
@@ -142,7 +134,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -158,7 +149,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.error,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -174,7 +164,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -190,7 +179,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -206,7 +194,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -222,7 +209,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -238,7 +224,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -254,7 +239,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.error,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -270,7 +254,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: true,
-    replyMessageId: "msg9",
     media: "",
   },
   {
@@ -286,7 +269,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -302,7 +284,6 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
   {
@@ -318,12 +299,11 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
-    replyMessageId: null,
     media: "",
   },
 ];
 
-const generateMessages = (count: number): MessageInterface[] => {
+const generateMessages = (count: number) => {
   return Array.from({ length: count }, (_, index) => {
     const id = index + 21; // Start after the 20th message
     const contentTypes = ["text", "file", "image", "audio", "video", "link"];
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 20c251dc..6c0b9931 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -2,28 +2,32 @@ import { useState, useEffect, ReactNode } from "react";
 import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
 
+import { SocketContext } from "./SocketContext";
+import { getSocket } from "utils/socket";
+
+import { MessageInterface } from "types/messages";
 import {
   addMessage,
-  editMessage,
-  MessageInterface,
-  pinMessage,
   setIsTyping,
+  pinMessage,
   unpinMessage,
-} from "@state/messages/messages";
-
-import { SocketContext } from "./SocketContext";
-import { getSocket } from "utils/socket.tsx";
+  editMessage,
+} from "@state/messages/chats";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
-  message: MessageInterface
+  message: MessageInterface,
+  chatId: string
 ) => {
-  console.log(message);
-  dispatch(addMessage(message));
+  dispatch(addMessage({ chatId, message }));
 };
 
-const handleIsTyping = (dispatch: Dispatch, isTyping: boolean) => {
-  dispatch(setIsTyping({ isTyping: isTyping }));
+const handleIsTyping = (
+  dispatch: Dispatch,
+  isTyping: boolean,
+  chatId: string
+) => {
+  dispatch(setIsTyping({ chatId, isTyping }));
 };
 
 type SocketProviderProps = {
@@ -59,8 +63,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.on("RECEIVE_MESSAGE", (message: MessageInterface) => {
         console.log("inside recieve");
         console.log(message);
-
-        handleIncomingMessage(dispatch, message);
+        handleIncomingMessage(dispatch, message, message.chatId);
       });
 
       socket.on(
@@ -95,18 +98,17 @@ function SocketProvider({ children }: SocketProviderProps) {
         }
       );
 
-      socket.on("EDIT_MESSAGE_SERVER", (message: MessageInterface) => {
-        console.log(message);
-        dispatch(
-          editMessage({
-            chatId: message.chatId,
-            messageId: message._id,
-            content: message.content,
-          })
-        );
-      });
+      socket.on(
+        "EDIT_MESSAGE_SERVER",
+        (chatId: string, messageId: string, content: string) => {
+          console.log("EDIT_MESSAGE_SERVER", chatId, messageId, content);
+          dispatch(editMessage({ chatId, messageId, content }));
+        }
+      );
 
-      socket.on("typing", (isTyping) => handleIsTyping(dispatch, isTyping));
+      socket.on("typing", (isTyping, message) =>
+        handleIsTyping(dispatch, isTyping, message.chatId)
+      );
       socket.emit("typing");
       return () => {
         socket.disconnect();
@@ -119,21 +121,40 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }, [dispatch, socket]);
 
+  // useEffect(() => {
+  //   if (!isPending && chats?.length) {
+  //     chats.forEach((chat) => {
+  //       socket.emit("join", { chatId: chat._id });
+  //     });
+  //     console.log(
+  //       "Joined all chats:",
+  //       chats.map((chat) => chat._id)
+  //     );
+  //   }
+  // }, [isConnected, isPending, chats, socket]);
+
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
       socket.emit(
         "SEND_MESSAGE",
         { ...sentMessage, isFirstTime: false, chatType: "private" },
         ({ success, message, res }: AcknowledgmentResponse) => {
-          console.log("message sent");
-          
+          console.log("I'm inside send event!!");
+          console.log(success);
           if (!success) {
             console.log(res);
           }
           if (success) {
             console.log(message);
             const _id = res.messageId;
-            handleIncomingMessage(dispatch, { ...sentMessage, _id });
+            handleIncomingMessage(
+              dispatch,
+              {
+                ...sentMessage,
+                _id,
+              },
+              sentMessage.chatId
+            );
           }
         }
       );
@@ -154,13 +175,13 @@ function SocketProvider({ children }: SocketProviderProps) {
         (response: any) => {
           if (response.success) {
             console.log("Message edited successfully:", response.res.message);
-             dispatch(
-               editMessage({
-                 chatId: response.res.message.chatId,
-                 messageId: response.res.message._id,
-                 content: response.res.message.content,
-               })
-             );
+            dispatch(
+              editMessage({
+                chatId: response.res.message.chatId,
+                messageId: response.res.message._id,
+                content: response.res.message.content,
+              })
+            );
           } else {
             console.error("Failed to edit message:", response.error);
           }
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
new file mode 100644
index 00000000..68d0cfe3
--- /dev/null
+++ b/app/src/state/messages/chats.ts
@@ -0,0 +1,196 @@
+import { getChatByID } from "@features/chats/helpers";
+import { Chat, Member } from "@mocks/data/chats";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { MessageInterface } from "types/messages";
+
+interface DetailedChatInterface extends Chat {
+  messages: MessageInterface[];
+  isTyping: boolean;
+  showCheckBox: boolean;
+  selectedMessages: string[]; //indicates ids only of selected messages
+  lastMessage?: {
+    _id: string;
+    content: string;
+    senderId: string;
+    timestamp: string;
+  };
+}
+
+interface ChatsState {
+  chats: DetailedChatInterface[];
+  members: Member[];
+}
+
+const initialState: ChatsState = {
+  chats: [],
+  members: [],
+};
+
+const chatsSlice = createSlice({
+  name: "chats",
+  initialState,
+  reducers: {
+    setAllChats: (state, action: PayloadAction<{ chatsData: ChatsState }>) => {
+      state.chats = action.payload.chatsData.chats;
+      state.members = action.payload.chatsData.members;
+    },
+
+    addMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; message: MessageInterface }>
+    ) => {
+      const { chatId, message } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      chat?.messages.push(message);
+    },
+
+    deleteMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      chat?.messages.filter((msg) => msg._id !== messageId);
+    },
+
+    editMessage: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        content: string;
+      }>
+    ) => {
+      const { chatId, messageId, content } = action.payload;
+
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const message = chat?.messages.find((msg) => msg._id === messageId);
+
+      if (message) {
+        message.content = content;
+      }
+    },
+
+    pinMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const message = chat?.messages.find((msg) => msg._id === messageId);
+      if (message) {
+        message.isPinned = true;
+      }
+    },
+
+    unpinMessage: (
+      state,
+      action: PayloadAction<{ messageId: string; chatId: string }>
+    ) => {
+      const { messageId, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const message = chat?.messages.find((msg) => msg._id === messageId);
+      if (message) {
+        message.isPinned = false;
+      }
+    },
+
+    clearMessages: (state, action: PayloadAction<{ chatId: string }>) => {
+      const { chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      chat?.messages.filter((msg) => msg.chatId !== chatId);
+    },
+
+    setIsTyping: (
+      state,
+      action: PayloadAction<{ chatId: string; isTyping: boolean }>
+    ) => {
+      const { isTyping, chatId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.isTyping = isTyping;
+      }
+    },
+
+    setShowCheckBox: (
+      state,
+      action: PayloadAction<{ chatId: string; showCheckBox: boolean }>
+    ) => {
+      const { chatId, showCheckBox } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      if (chat) {
+        if (!showCheckBox) chat.selectedMessages = [];
+
+        chat.showCheckBox = showCheckBox;
+      }
+    },
+
+    SelectMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; id: string }>
+    ) => {
+      const { chatId, id } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      chat?.selectedMessages.push(id);
+    },
+
+    removeSelectedMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; id: string }>
+    ) => {
+      const { chatId, id } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.selectedMessages = chat?.selectedMessages.filter(
+          (msgId) => msgId !== id
+        );
+      }
+    },
+
+    mergeMessages: (
+      state,
+      action: PayloadAction<{ chatId: string; newMessages: MessageInterface[] }>
+    ) => {
+      const { chatId, newMessages } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.messages = [...newMessages, ...chat.messages];
+      }
+    },
+
+    updateLastMessage: (
+      state,
+      action: PayloadAction<{ chatId: string; lastMessage: MessageInterface }>
+    ) => {
+      const { chatId, lastMessage } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.lastMessage = lastMessage;
+      }
+    },
+  },
+});
+
+export const {
+  setAllChats,
+  addMessage,
+  deleteMessage,
+  editMessage,
+  clearMessages,
+  pinMessage,
+  unpinMessage,
+  setIsTyping,
+  setShowCheckBox,
+  SelectMessage,
+  removeSelectedMessage,
+  mergeMessages,
+  updateLastMessage,
+} = chatsSlice.actions;
+export default chatsSlice.reducer;
+export type { DetailedChatInterface, ChatsState };
diff --git a/app/src/state/messages/messages.ts b/app/src/state/messages/messages.ts
deleted file mode 100644
index b93b3e51..00000000
--- a/app/src/state/messages/messages.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { MessageInterface } from "types/messages";
-
-interface MessagesState {
-  messages: MessageInterface[];
-  isTyping: boolean;
-  showCheckBox: boolean;
-  selectedMessages: string[]; //indicates ids only of selected messages
-}
-
-const initialState: MessagesState = {
-  messages: [],
-  isTyping: false,
-  showCheckBox: false,
-  selectedMessages: [],
-};
-
-const messagesSlice = createSlice({
-  name: "messages",
-  initialState,
-  reducers: {
-    addMessage: (state, action: PayloadAction<MessageInterface>) => {
-      state.messages.push(action.payload);
-    },
-
-    deleteMessage: (
-      state,
-      action: PayloadAction<{ id: string; chatId: string }>
-    ) => {
-      state.messages = state.messages.filter((message) => {
-        const { chatId, id } = action.payload;
-        if (message.chatId == chatId) return message._id !== id;
-        else return message;
-      });
-    },
-
-    editMessage: (
-      state,
-      action: PayloadAction<{
-        chatId: string;
-        messageId: string;
-        content: string;
-      }>
-    ) => {
-      const { chatId, messageId, content } = action.payload;
-
-      const message = state.messages.find(
-        (msg) => msg._id === messageId && msg,
-        chatId === chatId
-      );
-
-      if (message) {
-        message.content = content;
-      }
-    },
-
-    pinMessage: (
-      state,
-      action: PayloadAction<{ messageId: string; chatId: string }>
-    ) => {
-      const { messageId, chatId } = action.payload;
-      const message = state.messages.find(
-        (msg) => msg._id === messageId && msg.chatId == chatId
-      );
-      if (message) {
-        message.isPinned = true;
-      }
-    },
-
-    unpinMessage: (
-      state,
-      action: PayloadAction<{ messageId: string; chatId: string }>
-    ) => {
-      const { messageId, chatId } = action.payload;
-      const message = state.messages.find(
-        (msg) => msg._id === messageId && msg.chatId == chatId
-      );
-      if (message) {
-        message.isPinned = false;
-      }
-    },
-
-    clearMessages: (state, action: PayloadAction<{ chatId: string }>) => {
-      const { chatId } = action.payload;
-      state.messages.filter((msg) => msg.chatId !== chatId);
-    },
-    setIsTyping: (state, action: PayloadAction<{ isTyping: boolean }>) => {
-      const { isTyping } = action.payload;
-      state.isTyping = isTyping;
-    },
-
-    setShowCheckBox: (
-      state,
-      action: PayloadAction<{ showCheckBox: boolean }>
-    ) => {
-      const { showCheckBox } = action.payload;
-      if (!showCheckBox) {
-        state.selectedMessages = [];
-      }
-      state.showCheckBox = showCheckBox;
-    },
-
-    SelectMessage: (state, action: PayloadAction<{ id: string }>) => {
-      const { id } = action.payload;
-      state.selectedMessages.push(id);
-    },
-
-    removeSelectedMessage: (state, action: PayloadAction<{ id: string }>) => {
-      const { id } = action.payload;
-      state.selectedMessages = state.selectedMessages.filter(
-        (msgId) => msgId !== id
-      );
-    },
-
-    mergeMessages: (
-      state,
-      action: PayloadAction<{ messages: MessageInterface[] }>
-    ) => {
-      state.messages = [...action.payload.messages, ...state.messages];
-    },
-  },
-});
-
-export const {
-  addMessage,
-  deleteMessage,
-  editMessage,
-  clearMessages,
-  pinMessage,
-  unpinMessage,
-  setIsTyping,
-  setShowCheckBox,
-  SelectMessage,
-  removeSelectedMessage,
-  mergeMessages,
-} = messagesSlice.actions;
-export default messagesSlice.reducer;
-export type { MessageInterface, MessagesState };
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index eaa2d749..accfa834 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -2,18 +2,18 @@ import { configureStore } from "@reduxjs/toolkit";
 import themeReducer from "./theme/theme";
 import sideBarReducer from "./side-bar/sideBar";
 import userReducer from "./user/user";
-import messagesReducer from "./messages/messages";
 import searchReducer from "./messages/search";
 import activeMessageReducer from "./messages/activeMessage";
+import chatsReducer from "./messages/chats";
 
 export const store = configureStore({
   reducer: {
     theme: themeReducer,
     sideBarData: sideBarReducer,
     user: userReducer,
-    messages: messagesReducer,
     search: searchReducer,
     activeMessage: activeMessageReducer,
+    chats: chatsReducer,
   },
 });
 
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 43c1a11a..a4adc749 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -28,7 +28,7 @@ export interface MessageInterface {
   senderId: string;
   chatId: string;
 
-  parentMessageId: string | undefined;
+  parentMessageId: string | null;
   isReply: boolean;
   status: MessageStatus;
 

From c150cb6dbfbcccf51d3e8913b55056b6944f5a39 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Tue, 3 Dec 2024 00:47:26 +0200
Subject: [PATCH 059/136] fix(search): fix broken searchbar (#96)

---
 app/src/features/chats/Message.tsx            | 20 ++-----------------
 app/src/features/chats/Topbar.tsx             |  9 ++++-----
 app/src/features/chats/hooks/useChatMember.ts |  1 +
 .../features/search/components/SearchBar.tsx  | 10 +++++++---
 .../hooks/useScrollToSearchResultsMsg.ts      | 14 ++++++++-----
 app/src/utils/renderWithHighlight.tsx         |  4 ++--
 6 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 94624231..5dc81cf0 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -140,7 +140,7 @@ function Message({
   },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useAppSelector(
-    (state) => state.search
+    (state) => state.search,
   );
 
   const mergedRef = useRef<HTMLDivElement>(null);
@@ -154,23 +154,7 @@ function Message({
   useEffect(() => {
     lastMessageRef.current =
       index === messagesLength - 1 ? mergedRef.current : null;
-    const isSearchResult = searchResults.find(
-      (result) => result.messageId === id
-    );
-    const isCurrentResult =
-      isSearchResult && searchResults[currentResultIndex]?.messageId === id;
-
-    searchResultRef.current = isCurrentResult ? mergedRef.current : null;
-  }, [
-    searchResults,
-    currentResultIndex,
-    searchTerm,
-    id,
-    index,
-    messagesLength,
-    lastMessageRef,
-    searchResultRef,
-  ]);
+  }, [id, index, messagesLength, lastMessageRef, searchResultRef]);
 
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
     chatId,
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 5e83cdd4..95b5c1a4 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -79,6 +79,8 @@ const IconButton = styled.button`
 function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
   const chats = useAppSelector((state) => state.chats.chats);
+  const [isSearching, setIsSearching] = useState(false);
+
   const chat =
     chatId &&
     getChatByID({
@@ -86,12 +88,12 @@ function Topbar() {
       chats: chats,
     });
 
-  let membersData;
+  let membersData = useChatMembers(chat?.members);
+
   let name;
   let image;
   let lastSeen;
   if (chat) {
-    membersData = useChatMembers(chat?.members);
     name = membersData[0]?.screenFirstName || membersData[0]?.username;
 
     lastSeen = chat?.lastMessage?.timestamp;
@@ -99,11 +101,8 @@ function Topbar() {
       membersData[0]?.photo?.length > 50 ? membersData[0]?.photo : undefined;
   }
 
-  const [isSearching, setIsSearching] = useState(false);
-
   if (!chat) return null;
 
-
   const toggleSearch = () => {
     setIsSearching(!isSearching);
   };
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMember.ts
index 02e65fc9..ece2aa00 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMember.ts
@@ -3,6 +3,7 @@ import { Member } from "@mocks/data/chats";
 
 export function useChatMembers(memberIDs: string[]): Member[] {
   const members = useAppSelector((state) => state.chats.members);
+  if (!memberIDs || !members) return [];
 
   return memberIDs
     .map((id) => members.find((member) => member._id === id))
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index 96678399..02e1a75d 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -11,6 +11,7 @@ import {
   moveToPreviousResult,
   clearSearch,
 } from "@state/messages/search";
+import { useParams } from "react-router-dom";
 
 const SearchContainer = styled.div`
   display: flex;
@@ -71,10 +72,15 @@ interface SearchBarProps {
 
 const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   const dispatch = useDispatch();
+  const chatId = useParams<{ chatId: string }>().chatId;
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
     (state: RootState) => state.search,
   );
-  const { messages } = useSelector((state: RootState) => state.messages);
+  const currentChat = useSelector((state: RootState) =>
+    state.chats.chats.find((chat) => chat._id === chatId),
+  );
+  const messages = currentChat?.messages ?? [];
+
   const [isSearchLoading, setIsSearchLoading] = useState(false);
 
   const performSearch = (term: string) => {
@@ -146,8 +152,6 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
         onChange={handleSearch}
       />
       <ResultCounter data-testid="search-result-counter">
-        {" "}
-        // Added for testing the result counter
         {searchResults.length > 0
           ? `${currentResultIndex + 1} of ${searchResults.length}`
           : searchTerm.length > 0
diff --git a/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
index 26cfb318..8f377041 100644
--- a/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
+++ b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
@@ -10,11 +10,15 @@ function useScrollToSearchResultsMsg() {
   const searchResultRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (searchResults.length > 0 && searchResultRef.current) {
-      searchResultRef.current?.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
+    if (searchResults.length > 0) {
+      const searchResult = searchResults[currentResultIndex];
+      console.log("searchResult", searchResult);
+      document
+        .querySelector("[data-message-id='" + searchResult.messageId + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
     }
   }, [searchResults, currentResultIndex, searchTerm]);
 
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 114292b6..5f1ce0e8 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -29,11 +29,11 @@ function renderWithHighlight(
   const after = content.slice(result.highlightIndex + searchTerm.length);
 
   return (
-    <>
+    <span>
       {before}
       <HighlightedText $highlight>{highlighted}</HighlightedText>
       {after}
-    </>
+    </span>
   );
 }
 

From ef2fbf4b5ab1aab9fa3c485810de16ac74ef3414 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Tue, 3 Dec 2024 00:56:31 +0200
Subject: [PATCH 060/136] hot-fix: accessing media input alert (#97)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/components/CircleIcon.tsx              | 2 +-
 app/src/features/chats/ChatInput.tsx           | 4 +++-
 app/src/features/chats/SendButton.tsx          | 2 +-
 app/src/features/chats/audio/VoiceRecorder.tsx | 3 ++-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index b73ff60f..21bd22c3 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -10,7 +10,7 @@ interface CircleIconProps {
   $color?: string;
   $bgColor?: string;
   $opacity?: number;
-  onClick?: () => void;
+  onClick?: (e: Event, voiceNoteName?: string) => void;
   children?: React.ReactNode;
 }
 
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 478e9ba2..0e166fcb 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -126,8 +126,9 @@ function ChatInput() {
     setIsFilePreviewOpen(false);
   }
 
-  if (error) {
+  if (error.length) {
     alert(error);
+    setError("");
   }
   return (
     <>
@@ -187,6 +188,7 @@ function ChatInput() {
               />
             ) : (
               <VoiceRecorder
+                Error={Error}
                 isRecording={isRecording}
                 setIsRecording={setIsRecording}
                 setError={setError}
diff --git a/app/src/features/chats/SendButton.tsx b/app/src/features/chats/SendButton.tsx
index b9435513..9c01bcf6 100644
--- a/app/src/features/chats/SendButton.tsx
+++ b/app/src/features/chats/SendButton.tsx
@@ -2,7 +2,7 @@ import CircleIcon from "@components/CircleIcon";
 
 interface ButtonType {
   type: "record" | "message";
-  onClick: () => void;
+  onClick: (e: Event, voiceNoteName?: string) => void;
 }
 
 function RecordInput({ type, onClick }: ButtonType) {
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
index 2ccf82b8..1862812b 100644
--- a/app/src/features/chats/audio/VoiceRecorder.tsx
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -15,6 +15,7 @@ type VoiceRecorderProps = {
   isRecording: RecordingStates;
   setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
   setError: Dispatch<SetStateAction<string>>;
+  Error: string;
   handleSendMessage: (data: string, file: string) => void;
 };
 
@@ -24,12 +25,12 @@ const VoiceRecorder: React.FC<VoiceRecorderProps> = ({
   isRecording,
   setIsRecording,
   setError,
+  Error,
 }) => {
   const mediaRecorder = useRef<MediaRecorder | null>(null);
   const audioChunks = useRef<Blob[]>([]);
   const { data: voiceNoteURL, mutate: uploadVoiceNote } = useUploadMedia();
 
-  // Initialize media recorder when recording starts
   useEffect(() => {
     if (isRecording === "recording") {
       navigator.mediaDevices

From a6f37120a253a5ac9a840915bb1204d3678d6003 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Tue, 3 Dec 2024 06:09:23 +0200
Subject: [PATCH 061/136] :bug: (media-messaging): re-enabling emojie picker
 (#98)

---
 app/src/features/chats/ChatInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 0e166fcb..ade755ed 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -145,12 +145,12 @@ function ChatInput() {
       <Container data-testid="chat-input-container">
         {!showCheckBox ? (
           <Input data-testid="chat-input">
-            {/* {isEmojiSelectorOpen && (
+            {isEmojiSelectorOpen && (
               <EmojiPickerItem
                 setInputText={setInput}
                 data-testid="emoji-picker"
               />
-            )} */}
+            )}
             <InputContainer>
               {activeMessage.id && <ReplyWrapper setInput={setInput} />}
 

From 39d57cac0968af80f35dbf5c37b25cdfb618af11 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Tue, 3 Dec 2024 08:10:57 +0200
Subject: [PATCH 062/136] Feature/gifs stickers (#99)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* gifs_stickers

* fix: avatar in chat topbar

* fix: fix Gifs & stickers not working
---
 app/package-lock.json                         | 221 +-------
 app/src/components/AppLayout.tsx              |   2 +-
 app/src/components/Avatar.tsx                 |   5 +-
 app/src/constants.ts                          |   6 -
 app/src/data/gifs.ts                          | 242 +++++++++
 app/src/data/stickers.ts                      | 497 ++++++++++++++++++
 app/src/features/chats/Avatar.tsx             |  35 --
 app/src/features/chats/ChatBody.tsx           |   2 +-
 app/src/features/chats/ChatInput.tsx          |  17 +-
 app/src/features/chats/ChatItem.tsx           |   8 +-
 app/src/features/chats/Message.tsx            |  16 +-
 app/src/features/chats/MessageOptionList.tsx  |   2 +-
 app/src/features/chats/Topbar.tsx             |   9 +-
 .../features/chats/emojies/EmojiPicker.tsx    |  74 ---
 app/src/features/chats/emojies/GifsPicker.tsx |  73 ---
 app/src/features/chats/emojies/GridPicker.tsx |  42 ++
 app/src/features/chats/emojies/Picker.tsx     | 144 +++++
 app/src/features/chats/emojies/PickerItem.tsx |  45 ++
 app/src/features/chats/emojies/Viewer.tsx     |  21 +
 ...eFetchNextPage.tsx => useFetchNextPage.ts} |   0
 app/src/features/chats/hooks/useGIFS.ts       |  33 +-
 .../features/chats/hooks/useMessageSender.ts  |  11 +-
 app/src/features/chats/hooks/useStickers.ts   |  33 +-
 .../features/chats/hooks/useVoiceRecorder.ts  |  41 --
 app/src/features/chats/media/FileViewer.tsx   |   2 +-
 app/src/features/chats/services/GetGIFS.ts    |  32 +-
 .../features/chats/services/GetStickers.ts    |  30 +-
 app/src/features/forward/chatPopupItem.tsx    |   2 +-
 .../components/PinnedMessageProgressBar.tsx   |   4 +-
 .../features/privacy-settings/BlockItem.tsx   |   2 +-
 .../features/stories/components/AddStory.tsx  |  19 +-
 .../features/stories/components/StoryIcon.tsx |   8 +-
 .../stories/components/StoryListContainer.tsx |   8 +-
 app/src/types/messages.ts                     |  14 +
 34 files changed, 1104 insertions(+), 596 deletions(-)
 create mode 100644 app/src/data/gifs.ts
 create mode 100644 app/src/data/stickers.ts
 delete mode 100644 app/src/features/chats/Avatar.tsx
 delete mode 100644 app/src/features/chats/emojies/EmojiPicker.tsx
 delete mode 100644 app/src/features/chats/emojies/GifsPicker.tsx
 create mode 100644 app/src/features/chats/emojies/GridPicker.tsx
 create mode 100644 app/src/features/chats/emojies/Picker.tsx
 create mode 100644 app/src/features/chats/emojies/PickerItem.tsx
 create mode 100644 app/src/features/chats/emojies/Viewer.tsx
 rename app/src/features/chats/hooks/{useFetchNextPage.tsx => useFetchNextPage.ts} (100%)
 delete mode 100644 app/src/features/chats/hooks/useVoiceRecorder.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index 15128a47..54b90903 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -80,6 +80,7 @@
         "typescript-eslint": "^8.7.0",
         "undici": "^6.20.1",
         "vite": "^5.4.8",
+        "vite-plugin-mkcert": "^1.17.6",
         "vite-tsconfig-paths": "^5.0.1"
       }
     },
@@ -3985,173 +3986,6 @@
         "@octokit/openapi-types": "^22.2.0"
       }
     },
-    "node_modules/@octokit/auth-token": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
-      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/core": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
-      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/auth-token": "^4.0.0",
-        "@octokit/graphql": "^7.1.0",
-        "@octokit/request": "^8.3.1",
-        "@octokit/request-error": "^5.1.0",
-        "@octokit/types": "^13.0.0",
-        "before-after-hook": "^2.2.0",
-        "universal-user-agent": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/endpoint": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz",
-      "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/types": "^13.1.0",
-        "universal-user-agent": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/graphql": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
-      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/request": "^8.3.0",
-        "@octokit/types": "^13.0.0",
-        "universal-user-agent": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/openapi-types": {
-      "version": "22.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
-      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@octokit/plugin-paginate-rest": {
-      "version": "11.3.1",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.1.tgz",
-      "integrity": "sha512-ryqobs26cLtM1kQxqeZui4v8FeznirUsksiA+RYemMPJ7Micju0WSkv50dBksTuZks9O5cg4wp+t8fZ/cLY56g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/types": "^13.5.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "@octokit/core": "5"
-      }
-    },
-    "node_modules/@octokit/plugin-request-log": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz",
-      "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "@octokit/core": "5"
-      }
-    },
-    "node_modules/@octokit/plugin-rest-endpoint-methods": {
-      "version": "13.2.2",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-13.2.2.tgz",
-      "integrity": "sha512-EI7kXWidkt3Xlok5uN43suK99VWqc8OaIMktY9d9+RNKl69juoTyxmLoWPIZgJYzi41qj/9zU7G/ljnNOJ5AFA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/types": "^13.5.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "@octokit/core": "^5"
-      }
-    },
-    "node_modules/@octokit/request": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz",
-      "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/endpoint": "^9.0.1",
-        "@octokit/request-error": "^5.1.0",
-        "@octokit/types": "^13.1.0",
-        "universal-user-agent": "^6.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/request-error": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz",
-      "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/types": "^13.1.0",
-        "deprecation": "^2.0.0",
-        "once": "^1.4.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/rest": {
-      "version": "20.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.1.1.tgz",
-      "integrity": "sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/core": "^5.0.2",
-        "@octokit/plugin-paginate-rest": "11.3.1",
-        "@octokit/plugin-request-log": "^4.0.0",
-        "@octokit/plugin-rest-endpoint-methods": "13.2.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/types": {
-      "version": "13.6.2",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.6.2.tgz",
-      "integrity": "sha512-WpbZfZUcZU77DrSW4wbsSgTPfKcp286q3ItaIgvSbBpZJlu6mnYXAkjZz6LVZPXkEvLIM8McanyZejKTYUHipA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@octokit/openapi-types": "^22.2.0"
-      }
-    },
     "node_modules/@open-draft/deferred-promise": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
@@ -5589,17 +5423,6 @@
         "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/axios": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
-      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -5896,13 +5719,6 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/before-after-hook": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
-      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6445,13 +6261,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/deprecation": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -7325,27 +7134,6 @@
         }
       }
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -10105,13 +9893,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/psl": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.13.0.tgz",
diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index e1065583..1f826e0b 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -17,7 +17,7 @@ const StyledApp = styled.div<{ $isChatOpen: boolean }>`
 
   @media ${DESKTOP_VIEW} {
     display: grid;
-    grid-template-columns: 2fr 5fr;
+    grid-template-columns: minmax(20rem, 2.5fr) 5fr;
 
     & > main {
       display: block;
diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
index 131e05d1..7b09b5d7 100644
--- a/app/src/components/Avatar.tsx
+++ b/app/src/components/Avatar.tsx
@@ -1,3 +1,4 @@
+import { STATIC_MEDIA_URL } from "@constants";
 import styled from "styled-components";
 import { getAvatarName } from "utils/helpers";
 
@@ -9,7 +10,9 @@ const StyledAvatar = styled.div<{ $image?: string }>`
   margin-right: 1rem;
 
   background: ${({ $image }) =>
-    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
+    $image
+      ? `url(${STATIC_MEDIA_URL + $image}) center/cover no-repeat`
+      : "var(--color-avatar)"};
 
   color: white;
 
diff --git a/app/src/constants.ts b/app/src/constants.ts
index bc256c9d..a50eb37e 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -5,13 +5,10 @@ const {
   VITE_PORT: PORT,
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
-  VITE_GIPHY_API_KEY: GIPHY_API_KEY,
-  VITE_GIPHY_API_URL: GIPHY_API_URL,
 } = import.meta.env;
 
 const MOBILE_VIEW = "(max-width: 600px)";
 const DESKTOP_VIEW = "(min-width: 600px)";
-const GIPHY_LIMIT = 10;
 export {
   ENVIRONMENT,
   RECAPTCHA_SITE_KEY,
@@ -21,7 +18,4 @@ export {
   STATIC_MEDIA_URL,
   MOBILE_VIEW,
   DESKTOP_VIEW,
-  GIPHY_API_KEY,
-  GIPHY_API_URL,
-  GIPHY_LIMIT,
 };
diff --git a/app/src/data/gifs.ts b/app/src/data/gifs.ts
new file mode 100644
index 00000000..87c26017
--- /dev/null
+++ b/app/src/data/gifs.ts
@@ -0,0 +1,242 @@
+export const gifs = [
+  {
+    id: "bCTbZchgFKieymYPuB",
+    title: "Happy Birthday Dancing GIF by Mickey Mouse",
+    url: "https://media1.giphy.com/media/bCTbZchgFKieymYPuB/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "jle0nmfHz4YHxsOc6d",
+    title: "Good Morning Love GIF by Pengu",
+    url: "https://media0.giphy.com/media/jle0nmfHz4YHxsOc6d/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "vVzH2XY3Y0Ar6",
+    title: "Dog Dancing GIF",
+    url: "https://media1.giphy.com/media/vVzH2XY3Y0Ar6/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "ha6vsupXjJVMZ4WJsT",
+    title: "I Love You Baby GIF by Pengu",
+    url: "https://media3.giphy.com/media/ha6vsupXjJVMZ4WJsT/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "tqj4m9BRURayxQAIW9",
+    title: "Monday Morning Cat GIF by GrowthX",
+    url: "https://media4.giphy.com/media/tqj4m9BRURayxQAIW9/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "HeArjdf9JB6uc5DEJS",
+    title: "Merry Christmas GIF by Storyful",
+    url: "https://media0.giphy.com/media/HeArjdf9JB6uc5DEJS/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "3oNMQtqpnse0dbFe06",
+    title: "Kisses And Hugs Heart GIF",
+    url: "https://media3.giphy.com/media/3oNMQtqpnse0dbFe06/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "HTbDRsSHeu97VeXcBz",
+    title: "Angry Season 2 GIF by The Office",
+    url: "https://media0.giphy.com/media/HTbDRsSHeu97VeXcBz/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "fsE2EPGU9IA0pZBPA7",
+    title: "Happy Birthday GIF by Todd Rocheford",
+    url: "https://media1.giphy.com/media/fsE2EPGU9IA0pZBPA7/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "9gkwDaCB4pmoOe73x2",
+    title: "Good Morning GIF",
+    url: "https://media0.giphy.com/media/9gkwDaCB4pmoOe73x2/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xvGEx3cazysda",
+    title: "Water Bird GIF",
+    url: "https://media0.giphy.com/media/xvGEx3cazysda/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "rZMNNOGFCaXHluoGkI",
+    title: "Love You GIF by Teddy Too Big",
+    url: "https://media3.giphy.com/media/rZMNNOGFCaXHluoGkI/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "bbshzgyFQDqPHXBo4c",
+    title: "Dog Morning GIF",
+    url: "https://media4.giphy.com/media/bbshzgyFQDqPHXBo4c/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "26BRxeLkRqmzttSxy",
+    title: "Happy Birthday GIF",
+    url: "https://media1.giphy.com/media/26BRxeLkRqmzttSxy/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "5ZZSYqvcH6QppFQGI5",
+    title: "Monday Omg GIF by JustViral",
+    url: "https://media3.giphy.com/media/5ZZSYqvcH6QppFQGI5/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "ahZZZZFGLGhvq",
+    title: "Christmas Eve Smile GIF",
+    url: "https://media2.giphy.com/media/ahZZZZFGLGhvq/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "v65rDtklV9l6g",
+    title: "Hugs GIF",
+    url: "https://media3.giphy.com/media/v65rDtklV9l6g/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "Vb8jJpj99hxtbwTi7j",
+    title: "Happy Pixel GIF by Anne Horel",
+    url: "https://media1.giphy.com/media/Vb8jJpj99hxtbwTi7j/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "t7YnMUMYwD4cxwaN9y",
+    title: "Happy Birthday Dancing GIF by Pudgy Penguins",
+    url: "https://media2.giphy.com/media/t7YnMUMYwD4cxwaN9y/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "FnsyaPjzV7ZdNLB9sx",
+    title: "Good Morning Smile GIF by Holler Studios",
+    url: "https://media2.giphy.com/media/FnsyaPjzV7ZdNLB9sx/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "SvkTzTecFJip2",
+    title: "Iguana Running GIF",
+    url: "https://media1.giphy.com/media/SvkTzTecFJip2/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xtnUcarKhT6sHfEZ2u",
+    title: "I Love You Animation GIF",
+    url: "https://media3.giphy.com/media/xtnUcarKhT6sHfEZ2u/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "mxjzBpyu8DDLIcEKVC",
+    title: "Good Morning Coffee GIF by 大姚Dayao",
+    url: "https://media4.giphy.com/media/mxjzBpyu8DDLIcEKVC/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "LnQoAUr1UlBCBaqjaI",
+    title: "Happy Birthday Love GIF by Hallmark Gold Crown",
+    url: "https://media0.giphy.com/media/LnQoAUr1UlBCBaqjaI/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "3o6fJbwYFe3SmVVQ4M",
+    title: "Tired Manic Monday GIF by Nebraska Humane Society",
+    url: "https://media1.giphy.com/media/3o6fJbwYFe3SmVVQ4M/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "x7gjmBuaHrWak",
+    title: "Grinch Smile GIF",
+    url: "https://media0.giphy.com/media/x7gjmBuaHrWak/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "UuB5lh1bL1Dl6svihe",
+    title: "Happy I Love You GIF by Life of a Potato",
+    url: "https://media1.giphy.com/media/UuB5lh1bL1Dl6svihe/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "YOqDymLgjWk0dg3pi3",
+    title: "Fail Birthday Cake GIF by Holler Studios",
+    url: "https://media0.giphy.com/media/YOqDymLgjWk0dg3pi3/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "o7BebTgj44jmw",
+    title: "Water Dogs GIF by AFV Pets",
+    url: "https://media0.giphy.com/media/o7BebTgj44jmw/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "l0HlGfnQY9XvE4jVC",
+    title: "I Love You GIF by Denyse®",
+    url: "https://media0.giphy.com/media/l0HlGfnQY9XvE4jVC/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "9s8Jq3Sc1ZnZS",
+    title: "Wake Up Dog GIF",
+    url: "https://media1.giphy.com/media/9s8Jq3Sc1ZnZS/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "13sz48R33vovLi",
+    title: "Cat Monday GIF",
+    url: "https://media0.giphy.com/media/13sz48R33vovLi/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "TlfY7QPkCPTjE3OaHF",
+    title: "The Grinch Happy Dance GIF by Dear Silas",
+    url: "https://media0.giphy.com/media/TlfY7QPkCPTjE3OaHF/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "wIePCLOwUQ4RW",
+    title: "Hugs GIF",
+    url: "https://media0.giphy.com/media/wIePCLOwUQ4RW/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xNZe21P0bOROSAsjBC",
+    title: "Happy Birthday Dancing GIF",
+    url: "https://media2.giphy.com/media/xNZe21P0bOROSAsjBC/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "LPO1GfRfJCNVmvbKCe",
+    title: "Happy Birthday GIF by Todd Rocheford",
+    url: "https://media4.giphy.com/media/LPO1GfRfJCNVmvbKCe/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "WlbzfPOK8i21lESvYy",
+    title: "Good Morning Love GIF by Lucas and Friends by RV AppStudios",
+    url: "https://media4.giphy.com/media/WlbzfPOK8i21lESvYy/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "8FnZtdlK1k3Ly",
+    title: "Lion Love GIF",
+    url: "https://media3.giphy.com/media/8FnZtdlK1k3Ly/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "1fMjj5j2Z7chq",
+    title: "Tapping Wake Up GIF",
+    url: "https://media4.giphy.com/media/1fMjj5j2Z7chq/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "xUA7b5WwMudP2eVafu",
+    title: "Happy Monday GIF by Chippy the Dog",
+    url: "https://media0.giphy.com/media/xUA7b5WwMudP2eVafu/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "UChPEs9ghFo2s",
+    title: "The Grinch Film GIF by The Good Films",
+    url: "https://media3.giphy.com/media/UChPEs9ghFo2s/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "yidUzriaAGJbsxt58k",
+    title: "The Office Hug GIF",
+    url: "https://media0.giphy.com/media/yidUzriaAGJbsxt58k/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "8cOkSOuvIChHNYOyP7",
+    title: "Good Morning Love GIF by ircha_gram",
+    url: "https://media0.giphy.com/media/8cOkSOuvIChHNYOyP7/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "mI6B532k3otUc",
+    title: "black and white bear GIF",
+    url: "https://media3.giphy.com/media/mI6B532k3otUc/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "3CCXHZWV6F6O9VQ7FL",
+    title: "Valentines Day Love GIF by Digital Pratik",
+    url: "https://media2.giphy.com/media/3CCXHZWV6F6O9VQ7FL/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "ZNzmLhL5ZVbq697LwT",
+    title: "Coffee Time GIF",
+    url: "https://media2.giphy.com/media/ZNzmLhL5ZVbq697LwT/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "YdGUYXws5mD2fxFKxg",
+    title: "Happy Monday Morning GIF by Lucas and Friends by RV AppStudios",
+    url: "https://media2.giphy.com/media/YdGUYXws5mD2fxFKxg/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+  {
+    id: "UTFiHeDL8cOSA",
+    title: "The Grinch Smiling GIF by The Good Films",
+    url: "https://media0.giphy.com/media/UTFiHeDL8cOSA/200.gif?cid=08e3ca17z6emrggyp3rusefjuc4symlrp6c32iipbagbz8fr&ep=v1_gifs_trending&rid=200.gif",
+  },
+];
diff --git a/app/src/data/stickers.ts b/app/src/data/stickers.ts
new file mode 100644
index 00000000..2d8c7417
--- /dev/null
+++ b/app/src/data/stickers.ts
@@ -0,0 +1,497 @@
+export const stickers = [
+  {
+    id: "U3RpY2tlci01OTQ4OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv31lN2+qt18mvpkwZZqtRRO2Yrw6T03+QG7blM7MoTSA=.png",
+    title: "sticker-by-Shallu-0",
+  },
+  {
+    id: "U3RpY2tlci01OTU4NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvytDWLINJxOkwqYa8B5GB4+89czlknrjmKfrL7/qYh/k=.png",
+    title: "sticker-by-Shallu-1",
+  },
+  {
+    id: "U3RpY2tlci01OTYyNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv6UnmsctBvl3+CtiysVLXznRuP18dhtyXpFXXsJawR9k=.png",
+    title: "sticker-by-Shallu-2",
+  },
+  {
+    id: "U3RpY2tlci01OTY0OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv6UnmsctBvl3+CtiysVLXzgaMNTj8tcbCMZBZbsFIvi4=.png",
+    title: "sticker-by-Rouba Daghistani-3",
+  },
+  {
+    id: "U3RpY2tlci01NDg2NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvRHkgd68AUfZ88bl0bxSNqAkGp907DWCTsjt7TJfT86A=.png",
+    title: "sticker-by-Ernest Smeg-4",
+  },
+  {
+    id: "U3RpY2tlci01MTM4Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvRsHElkgyoP4xVcYowU97x3lFH3yUBrIxw2PlqS94OuE=.png",
+    title: "sticker-by-Mike Nudelman-5",
+  },
+  {
+    id: "U3RpY2tlci01MjQ5",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvuBRMZi3QD/hVgP+OxHlr4Rcqpx/pGI/tSisCr3F3PQg=.png",
+    title: "sticker-by-Konstantin-6",
+  },
+  {
+    id: "U3RpY2tlci05NzUz",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y63OG7dZbEFEPQHjK5RtD3KqvPgIDz7S2Obwd1/6GeW80=.webp",
+    title: "sticker-by-Sandra Campos-7",
+  },
+  {
+    id: "U3RpY2tlci0xMDAwOA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvhkNNJ31lLo4w8cXIVsJMIYvgAC4QXoF2M0J7lEwcveE=.png",
+    title: "sticker-by-Irvan Ramdani-8",
+  },
+  {
+    id: "U3RpY2tlci0xMTQzNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv9LGea08EqK5beUUbFYaBY0mN3dGYYhQ3NcYS28hZd1g=.png",
+    title: "sticker-by-Seifert Johannes-9",
+  },
+  {
+    id: "U3RpY2tlci0xMzM0MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvF9fLGRv6MUsaBy5HrO2By27WZJ9XWs60wpgvaZ0qNx0=.png",
+    title: "sticker-by-Joyce Diaz-10",
+  },
+  {
+    id: "U3RpY2tlci0xOTU2Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvRL6KU105hEk1Vbv4mDhqNgDzsqGoD5l04BSaQanRbEM=.png",
+    title: "sticker-by-Iv Ivanova-11",
+  },
+  {
+    id: "U3RpY2tlci0xOTIxNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvj8WTkuxvU6/FMIU/uoofPFrSib3v5ECGShgUpc+33aw=.png",
+    title: "sticker-by-George Radu-12",
+  },
+  {
+    id: "U3RpY2tlci0yNDEzNQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv9JEMd2wkTyO0RMfuu3YxIP7mNfY5ZwBeakVfrXUaLY4=.png",
+    title: "sticker-by-Agus Prajogo-13",
+  },
+  {
+    id: "U3RpY2tlci0zNTI0NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvpcbaJBmOTbL7ps8ZgzdK4uiGS5Y0tI1q8YtI6Z3q6wo=.png",
+    title: "sticker-by-NestedApps Limited-15",
+  },
+  {
+    id: "U3RpY2tlci0zODYxMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvIT0acgnVZjh7mKOQxvmns935J4Yl1hn3iJTcrjVMyrk=.png",
+    title: "sticker-by-NestedApps Limited-16",
+  },
+  {
+    id: "U3RpY2tlci0zODU2Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvM7l6nkb2TKVehkCRjibcuC9pbXktVrufVhOCtyQ4uUQ=.png",
+    title: "sticker-by-NestedApps Limited-17",
+  },
+  {
+    id: "U3RpY2tlci0zOTE2OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv1WAoTqTvpdQ3A6p5vj4an7g5GP5Fkd2BSEdTTOxkJbM=.png",
+    title: "sticker-by-NestedApps Limited-18",
+  },
+  {
+    id: "U3RpY2tlci00MDAxMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6ANyQOdlYtShUlhbnWPLlDuL8h3TvTkbN9ykwdqxISlw=.webp",
+    title: "sticker-by-Unimotion-19",
+  },
+  {
+    id: "U3RpY2tlci00MDE0NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6ANyQOdlYtShUlhbnWPLlDi6zURFwWcGMnaej8JgECsQ=.webp",
+    title: "sticker-by-Sebastian-20",
+  },
+  {
+    id: "U3RpY2tlci00MjcyNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6KLhNvOlOJTr/QUycBSRbV7hvUH7UljlKKJXcm+gSGEE=.webp",
+    title: "sticker-by-juhan-21",
+  },
+  {
+    id: "U3RpY2tlci00MzM1Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvy6F/dXsOWbEw+TKXqqhDMUrlyyspo1Q5sZ4Va3+Szjk=.png",
+    title: "sticker-by-Elina-22",
+  },
+  {
+    id: "U3RpY2tlci00Njc3OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJZ9Ed7cwQZ0I/NRHJaqrhobNaCmHYkU2/UVeWwC5hFc=.png",
+    title: "sticker-by-Lim Boon Pee-23",
+  },
+  {
+    id: "U3RpY2tlci00NjgyMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvGPckNpxv8KhymLw+mNEkiSunoStlPorHucscyqg+zkw=.png",
+    title: "sticker-by-Lim Boon Pee-24",
+  },
+  {
+    id: "U3RpY2tlci01MDYxOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv9SpBMAXS+IycPoBmFseKIyfhEx2OGgXVZlEOXG9uzHI=.png",
+    title: "sticker-by-Macarena Vásquez Rodríguez-25",
+  },
+  {
+    id: "U3RpY2tlci01MzA4NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvj8GSevC/8XzAKY3MoFBTgxHuziZN3tHaQe2sZylW/zo=.png",
+    title: "sticker-by-john paul trinidad-26",
+  },
+  {
+    id: "U3RpY2tlci01MTA1OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvZ3nOLW32qWKlIM3pq7VWULYerMPBw+aQSWQTlNpEVdk=.png",
+    title: "sticker-by-Alew-27",
+  },
+  {
+    id: "U3RpY2tlci0xMjg3",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvDqYl9FiOU1KfZw7u4+Ctv3mwoi0D8PDSNT2kRJqWBxo=.png",
+    title: "sticker-by-Marko Njegovan-28",
+  },
+  {
+    id: "U3RpY2tlci0xMzE0",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv/HwbM7m066cDVTKOVDSdyAnZRcLnXg5dZSmPLIfSVok=.png",
+    title: "sticker-by-Marko Njegovan-29",
+  },
+  {
+    id: "U3RpY2tlci01MjM1Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvjM4lkW3/qWudUzLHuySPDGlQAEeG5uyzYqUHMDp91A0=.png",
+    title: "sticker-by-Lim Boon Pee-30",
+  },
+  {
+    id: "U3RpY2tlci0yNjI1MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvUx77bntUCJi7nXgM0pKxxmPk/4W0iJtX3LPlbKoDxHY=.png",
+    title: "sticker-by-Lim Boon Pee-31",
+  },
+  {
+    id: "U3RpY2tlci0yNjM0Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvgWOMRhu+zr2aWWrosed1TsWziWrrTRegebr94m88vUQ=.png",
+    title: "sticker-by-Lim Boon Pee-32",
+  },
+  {
+    id: "U3RpY2tlci0yNjQ3Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvr66Peo1H8OlcqLpSUzCRNsKKcJhRWG35iaRwPW/tJ9A=.png",
+    title: "sticker-by-Janine Gutierrez-33",
+  },
+  {
+    id: "U3RpY2tlci0yNjU5Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvmy7zOq0kIQh1cmJTSmEEToLZe6BCvTG+41nDCaem/1E=.png",
+    title: "sticker-by-Marnus van Staden-34",
+  },
+  {
+    id: "U3RpY2tlci0yNjk0Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvHyNPplbAgWngXsSewSVTh8vilu8b2G6QRVe2BTdmyyY=.png",
+    title: "sticker-by-Marnus van Staden-35",
+  },
+  {
+    id: "U3RpY2tlci0yNzA5MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvePVbUgj+rcx2xW/rDQWob4gSLpTcrsCX+TjsDgPcYeI=.png",
+    title: "sticker-by-Uvindu Thilanka-36",
+  },
+  {
+    id: "U3RpY2tlci0yNzMyMw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvroTDe0bH6tlVOCbh77zLnb8iYAyD0brHbKtmXq5KaCs=.png",
+    title: "sticker-by-Rolan Kenth Sahidsahid-37",
+  },
+  {
+    id: "U3RpY2tlci0yNzM0NA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvroTDe0bH6tlVOCbh77zLnSJBy8s/eRnl6QvWzpw+a84=.png",
+    title: "sticker-by-Rob-38",
+  },
+  {
+    id: "U3RpY2tlci0yNzQ5Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv4RHyeuuYBOreGdAfe++MxM1FD1nRc7+ikCmvc0DdM/I=.png",
+    title: "sticker-by-Annie-39",
+  },
+  {
+    id: "U3RpY2tlci0yNzU4MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvokYXkPpTEOdUjh5iHcLoHNwJmabBeZI5JcweE/MCITQ=.png",
+    title: "sticker-by-Marija Jovanovic-40",
+  },
+  {
+    id: "U3RpY2tlci0yNzYyMg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvC6LWBtwLEAOCcaZlk6JTSCV49Q+AFbUyR6kCiFyq3EA=.png",
+    title: "sticker-by-Uten Sutham-41",
+  },
+  {
+    id: "U3RpY2tlci0yNzY1Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvC6LWBtwLEAOCcaZlk6JTSOfvSCTcrb7Axdw0czgoyUo=.png",
+    title: "sticker-by-Kirill&Sofia-42",
+  },
+  {
+    id: "U3RpY2tlci0yNzY3Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvC6LWBtwLEAOCcaZlk6JTSGL/05wSt3lUEmNpbgHp25M=.png",
+    title: "sticker-by-taeyen-43",
+  },
+  {
+    id: "U3RpY2tlci0yODAyNQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv8x8Gp8GINQq7ajLS2cbvJjs7E8f5Pp32+u5v6Q+4Io4=.png",
+    title: "sticker-by-Lim Boon Pee-44",
+  },
+  {
+    id: "U3RpY2tlci0yODA0OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6nfsy3gg9SlIeOXFdN++o1tXzCHqx4pXRInuQG+3rZ4Y=.webp",
+    title: "sticker-by-Nuy hoho-45",
+  },
+  {
+    id: "U3RpY2tlci0yODMyMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvOKPeAMcGk05vwMplMJ5PqsHRFp7/EFLLTUF0oA0z33g=.png",
+    title: "sticker-by-Lim Boon Pee-46",
+  },
+  {
+    id: "U3RpY2tlci0yODUyNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv5Wx2l2KD3j6SUloJFk55zmnOCK3h3fgP46X5N2giMSM=.png",
+    title: "sticker-by-taeyen-47",
+  },
+  {
+    id: "U3RpY2tlci0yODcxMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJXolJx3fFnGU7FOyk2gSUbPglnPkJ+aryNyEFgCwobY=.png",
+    title: "sticker-by-Marnus van Staden-48",
+  },
+  {
+    id: "U3RpY2tlci0yODc5MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJXolJx3fFnGU7FOyk2gSUbQeGs1RyzVY+heVvHHiDlw=.png",
+    title: "sticker-by-Mike Nudelman-49",
+  },
+  {
+    id: "U3RpY2tlci05MTMzMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x1dlmJJhM2LB5THdwcGIMks=.png",
+    title: "sticker0",
+  },
+  {
+    id: "U3RpY2tlci05MTMzNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x5e9Q/gOar/ltjfh/SuiOOg=.png",
+    title: "sticker1",
+  },
+  {
+    id: "U3RpY2tlci05MTM0MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x7GXUJc3TfciFKunwaR8IpI=.png",
+    title: "sticker2",
+  },
+  {
+    id: "U3RpY2tlci05MTM0Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ/5QA+TDOYJufPX7vB0/x0YyOBHfDxlkl2GNoaaEoKA=.png",
+    title: "sticker3",
+  },
+  {
+    id: "U3RpY2tlci02Nzg1Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvxDuqFrhGohwbj7aDFNI0CKwejWRham6mx5trg3EOk2A=.png",
+    title: "sticker4",
+  },
+  {
+    id: "U3RpY2tlci02Nzk0MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv7aFWPaMql2r5fxoyGL3WjPeKqBYg4srSINWEcqT4QXE=.png",
+    title: "sticker5",
+  },
+  {
+    id: "U3RpY2tlci02Nzk1NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv7aFWPaMql2r5fxoyGL3WjMbRmNZpZw8M8vl8KF8oqRk=.png",
+    title: "sticker6",
+  },
+  {
+    id: "U3RpY2tlci02ODAzNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvnzw5wOlGGtG70G9PQedVa+rA77X0siCi4XpWm+KFwh0=.png",
+    title: "sticker7",
+  },
+  {
+    id: "U3RpY2tlci02ODMyMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvtSv0vVu6LgPEUufZw4v7brFW0/Yo3CqNLBxGpsTO360=.png",
+    title: "sticker8",
+  },
+  {
+    id: "U3RpY2tlci02ODQ1MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvFHPBf5DwDRB9wQWtDRYKh3rd3upyIlDHJe6G6f2U2gM=.png",
+    title: "sticker9",
+  },
+  {
+    id: "U3RpY2tlci02NjkyMQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPctu5yJcnMg6wq+bo+2n5ahp4YcosyVvRh1EY6xQnWo=.png",
+    title: "sticker10",
+  },
+  {
+    id: "U3RpY2tlci02Njk3NQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPctu5yJcnMg6wq+bo+2n5aK4VyvohPBV4tKTdtzZKis=.png",
+    title: "sticker11",
+  },
+  {
+    id: "U3RpY2tlci02NzAzNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvn/K433f/coRXRciHFqKbc7ruS8sh0DFH8svzDfb63nk=.png",
+    title: "sticker12",
+  },
+  {
+    id: "U3RpY2tlci02NTkwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv+EREE7K8EgTRHe6tyUdx9+2QqIELq5rYqZBalf32fks=.png",
+    title: "sticker13",
+  },
+  {
+    id: "U3RpY2tlci02NjA0Nw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv30JdOVz7mmrpAuo/QbDNKxCen0PJzVDvirfSJzl64ic=.png",
+    title: "sticker14",
+  },
+  {
+    id: "U3RpY2tlci02NjU3NA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv/wm7cg+pFp6KHayGQ9q59lYk+ubCRwVUMhZ2GbUrWtw=.png",
+    title: "sticker15",
+  },
+  {
+    id: "U3RpY2tlci02NjYxOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnve5qWszETfti4d3yw9LK12V2XARIXujxla8huyZrHgpY=.png",
+    title: "sticker16",
+  },
+  {
+    id: "U3RpY2tlci02NjcwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvXKK99hX/lEyO+qjP8eMdAFDwF4XhEtKsQAARZXFPjtw=.png",
+    title: "sticker17",
+  },
+  {
+    id: "U3RpY2tlci02NjM3MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvqktJOcD3PlJ8y43FvVeDSTXeHhX/OssjSpgGE7XbaD4=.png",
+    title: "sticker18",
+  },
+  {
+    id: "U3RpY2tlci02NjQwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvY/EYrLH2fgV5eztQBUbYmMgFCNE3jCraDZehCa4Tgyg=.png",
+    title: "sticker19",
+  },
+  {
+    id: "U3RpY2tlci02NjU5MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv/wm7cg+pFp6KHayGQ9q59gZb3CKdbEu6fwtpmraKBLY=.png",
+    title: "sticker20",
+  },
+  {
+    id: "U3RpY2tlci02NTA3MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6MRDWVIfJaLd9ULe0Wjbo3koLXEDyVEAhJDFRCozRHwc=.webp",
+    title: "sticker21",
+  },
+  {
+    id: "U3RpY2tlci02NTEwMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvF3+jYvLzLtMrv63FDLlFjM4fdgh5AaIfN36+7plGghw=.png",
+    title: "sticker22",
+  },
+  {
+    id: "U3RpY2tlci02NTIzNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ1rwfVJR/LbbKMwjoTBC3gPqlfWWxyc4YmeEDNxIp1Y=.png",
+    title: "sticker23",
+  },
+  {
+    id: "U3RpY2tlci02NTQ1Mg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6MRDWVIfJaLd9ULe0Wjbo3ikgBgexOQ9+6g/J6NxjJbk=.webp",
+    title: "sticker24",
+  },
+  {
+    id: "U3RpY2tlci02NTQ3Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvCy90P5mxpbjTEGqZBhIogt/hnNLofFFvQQ544tke/T8=.png",
+    title: "sticker25",
+  },
+  {
+    id: "U3RpY2tlci02NTQ3MA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvCy90P5mxpbjTEGqZBhIogpD4xXLbGLNLA2plRoOCqSw=.png",
+    title: "sticker26",
+  },
+  {
+    id: "U3RpY2tlci02NTYxOA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvoOruRchlcnvETZoVME2ZlBeli7P9A/QGl8H4jXUW2GM=.png",
+    title: "sticker27",
+  },
+  {
+    id: "U3RpY2tlci02NTIxMA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvJ1rwfVJR/LbbKMwjoTBC3q+Nv+Ms258rA5p736cvXNU=.png",
+    title: "sticker28",
+  },
+  {
+    id: "U3RpY2tlci02NTEwNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvF3+jYvLzLtMrv63FDLlFjFYtJOIOrhfgwsMT3pQprYE=.png",
+    title: "sticker29",
+  },
+  {
+    id: "U3RpY2tlci02NTM4OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv7CZnm1KrvNl5gUbOSatTWWqA8Vfdu0for1BOUcjoBtY=.png",
+    title: "sticker30",
+  },
+  {
+    id: "U3RpY2tlci02NDY5OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPYE7nWhv/jsLANXW4p/w3rpvcSj1TzU4Fzh5w7mB6GM=.png",
+    title: "sticker31",
+  },
+  {
+    id: "U3RpY2tlci02NDkxMw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZabAJ2AodK8XLgstXZKAxioY=.png",
+    title: "sticker32",
+  },
+  {
+    id: "U3RpY2tlci02NDkyOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZaSu6wY9anuejm22Jo/3dvHk=.png",
+    title: "sticker33",
+  },
+  {
+    id: "U3RpY2tlci02NTA5Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvBZ1JFCrsBVHaW+X0f60x2cy7vXAqsh4P+A5b/ftIl0Y=.png",
+    title: "sticker34",
+  },
+  {
+    id: "U3RpY2tlci02NDkyMw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZaV654+Kya0fuwhMF4bUU5T0=.png",
+    title: "sticker35",
+  },
+  {
+    id: "U3RpY2tlci02NDk1OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvQS7Isddk5rZPWZG3b4wZaaBRU0nkXdMRyAnnVrIqQGQ=.png",
+    title: "sticker36",
+  },
+  {
+    id: "U3RpY2tlci02NDcxOQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv74OTYmgpinBP7yNDBF+lMELi6obb9JeCb8nGK/TbpgQ=.png",
+    title: "sticker37",
+  },
+  {
+    id: "U3RpY2tlci02NDEzNg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnv+39W05khuVmmtirZnS31hpvFLCDf3OAycSbEdPOJZjA=.png",
+    title: "sticker38",
+  },
+  {
+    id: "U3RpY2tlci02NDI5OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvG741sDh/7vM0UCi0hdX6J/0jGyW+gIJW6/0m0h2Km5U=.png",
+    title: "sticker39",
+  },
+  {
+    id: "U3RpY2tlci02NDM3Mw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvo0dkzKSEkPPPUgIiL6NVyaDGac1Vlwt6uUhxRzBEsAQ=.png",
+    title: "sticker40",
+  },
+  {
+    id: "U3RpY2tlci02NDQ1OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvgDhtO8WbclqM+n+M0qg7ZO1xDcvZdTZFsP40Df0M47A=.png",
+    title: "sticker41",
+  },
+  {
+    id: "U3RpY2tlci02NDU1Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPS541a+Nod4BlWfgv9TsyuFWeffsd1IRBbhq7NOglMc=.png",
+    title: "sticker42",
+  },
+  {
+    id: "U3RpY2tlci02NDU1OQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPS541a+Nod4BlWfgv9Tsytrs7W6rP2N+n/QO9fFfDRA=.png",
+    title: "sticker43",
+  },
+  {
+    id: "U3RpY2tlci02NDYyNw==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvPYE7nWhv/jsLANXW4p/w3hpx9Von2LNf/Ofk8DxHqes=.png",
+    title: "sticker44",
+  },
+  {
+    id: "U3RpY2tlci02MzQxNA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6lwa/X+0A2Rv3d5D91N7wuknl8uAS09uNi2HUbFs5Rzk=.webp",
+    title: "sticker45",
+  },
+  {
+    id: "U3RpY2tlci02MzQ3Ng==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6lwa/X+0A2Rv3d5D91N7wuib0dbqcaxX/jKW//lrn1Ic=.webp",
+    title: "sticker46",
+  },
+  {
+    id: "U3RpY2tlci02MzU1MQ==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc21DnDN+2faE1Bk8Mt+qlLGDRJn1165x5F6CK/7+/BpOvK8Jfutuss4GPx5kKFSG42jCjJrQmzHGKoeS7b7LvQlrViAsswR6iOvN2yQP9Q0Y6lwa/X+0A2Rv3d5D91N7wuuB4cDHqNatw3Bn6GlXHnb8=.webp",
+    title: "sticker47",
+  },
+  {
+    id: "U3RpY2tlci02Mzk4OA==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvV2cjVa1g2F2MIwH87pqyPVIye7glXXFOGqDE+xn2sPw=.png",
+    title: "sticker48",
+  },
+  {
+    id: "U3RpY2tlci02NDAyMg==",
+    url: "https://cdn-stickers.mojilala.com/convert/4Yc/0W97kX5hyNZkT4vc20Bd5zhSx0Yb0LTHpDFbyNnNa9MvHY2Hj4nlLJe39Jr/OavO241tfgmuMIh1iAd+6g2n9oJ6kGcglLwSDKs/3tfd28xqVj3TB2HktM6Z4hnvBpSB3If4fn0CLQzAD1mkxwkUNjd3jZkfkp3bQ4fTbY8=.png",
+    title: "sticker49",
+  },
+];
diff --git a/app/src/features/chats/Avatar.tsx b/app/src/features/chats/Avatar.tsx
deleted file mode 100644
index 41942c49..00000000
--- a/app/src/features/chats/Avatar.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import styled from "styled-components";
-
-const StyledAvatar = styled.div<{ $image?: string }>`
-  width: 2.625rem;
-  height: 2.625rem;
-
-  border-radius: 50%;
-  margin-right: 1rem;
-
-  background: ${({ $image }) =>
-    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
-
-  color: white;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  flex-shrink: 0;
-
-  font-weight: bold;
-  font-size: 1rem;
-  text-transform: uppercase;
-`;
-
-type PropsType = {
-  image?: string | undefined;
-  name: string | undefined;
-};
-
-function Avatar({ image, name }: PropsType) {
-  return <StyledAvatar $image={image}>{!image && name}</StyledAvatar>;
-}
-
-export default Avatar;
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 7fa7b2ed..7848b7f6 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -50,7 +50,7 @@ function ChatBody() {
 
   const { fetchNextPage, data } = useFetchNextPage();
 
-  const { inView, ref } = useInView({});
+  const { inView, ref } = useInView({ threshold: 0.5 });
 
   useEffect(() => {
     console.log(inView);
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index ade755ed..299a8467 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -9,7 +9,7 @@ import Icon from "@components/Icon";
 import RecordInput from "./SendButton";
 import ForwardingInputBar from "@features/forward/ForwardingInputBar";
 import ScrollableChats from "@features/forward/ScrollableChats";
-import EmojiPickerItem from "./emojies/EmojiPicker";
+import Picker from "./emojies/Picker";
 import { useMessageSender } from "./hooks/useMessageSender";
 import ReplyWrapper from "./ReplyWrapper";
 import { clearActiveMessage } from "@state/messages/activeMessage";
@@ -94,8 +94,19 @@ function ChatInput() {
   const toggleShowEmojies = () => {
     setIsEmojiSelectorOpen((show) => !show);
   };
+  const sendGIF = (gif: string) => {
+    handleSendMessage("", gif, "GIF");
+    setIsEmojiSelectorOpen(false);
+  };
 
+  const sendSticker = (sticker: string) => {
+    handleSendMessage("", sticker, "sticker");
+    setIsEmojiSelectorOpen(false);
+  };
   const handleSubmit = (e: Event, voiceNoteName = "") => {
+    e.preventDefault();
+    setIsEmojiSelectorOpen(false);
+    if (isRecording !== "idle") return;
     handleSendMessage(input, voiceNoteName);
     dispatch(clearActiveMessage());
     setInput("");
@@ -146,9 +157,11 @@ function ChatInput() {
         {!showCheckBox ? (
           <Input data-testid="chat-input">
             {isEmojiSelectorOpen && (
-              <EmojiPickerItem
+              <Picker
                 setInputText={setInput}
                 data-testid="emoji-picker"
+                onSendGIF={sendGIF}
+                onSendSticker={sendSticker}
               />
             )}
             <InputContainer>
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 3ee5fa2a..b4ebe883 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -1,7 +1,8 @@
 import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 
-import Avatar from "./Avatar";
+import Avatar from "@components/Avatar";
+import { Chat } from "@mocks/data/chats";
 import { DetailedChatInterface } from "@state/messages/chats";
 import { useChatMembers } from "./hooks/useChatMember";
 
@@ -63,8 +64,7 @@ function ChatItem({
   const membersData = useChatMembers(members);
 
   const name = membersData[0]?.screenFirstName || membersData[0]?.username;
-  const image =
-    membersData[0]?.photo?.length > 50 ? membersData[0]?.photo : undefined;
+  const image = membersData[0]?.photo;
   const navigate = useNavigate();
 
   const timestamp = lastMessage?.timestamp || "No messages";
@@ -83,7 +83,7 @@ function ChatItem({
       onClick={handleOpenChat}
       key={_id}
     >
-      <Avatar data-testid="chat-avatar" image={image} name={name?.charAt(0)} />
+      <Avatar data-testid="chat-avatar" image={image} name={name} />
       <ChatContent>
         <ChatHeader>
           <Name data-testid="chat-name">
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 5dc81cf0..89526e1c 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -84,7 +84,13 @@ const MessageRow = styled.div<{ $isChecked: boolean }>`
 
   width: 100%;
 `;
-
+const Gif = styled.img`
+  width: 120px;
+  height: 120px;
+  object-fit: fill;
+  cursor: pointer;
+  border-radius: 0.5rem;
+`;
 const CheckBoxWrapper = styled.div`
   padding-left: 1rem;
   align-self: center;
@@ -137,6 +143,7 @@ function Message({
     chatId,
     parentMessageId,
     media,
+    contentType,
   },
 }: MessageProps) {
   const { searchTerm, searchResults, currentResultIndex } = useAppSelector(
@@ -207,7 +214,12 @@ function Message({
                 <MessageBox messageId={parentMessageId} />
               </MessageBoxWrapper>
             )}
-            {media && <FileViewer file={media} />}
+            {(contentType === "gif" || contentType === "sticker") && media && (
+              <Gif src={media} loading="lazy" />
+            )}
+            {media && !(contentType === "gif" || contentType === "sticker") && (
+              <FileViewer file={media} />
+            )}
             {renderWithHighlight(content, searchTerm, searchResults, id)}
           </StyledCol>
 
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index bdf58ca4..9b6c026b 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -8,7 +8,7 @@ const StyledList = styled.ul<{ $isMine: boolean }>`
   right: ${(props) => !props.$isMine && -6.5}rem;
   left: ${(props) => props.$isMine && -6.5}rem;
 
-  z-index: 10 !important;
+  z-index: 20 !important;
   overflow: auto;
 
   display: flex;
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 95b5c1a4..4a8ee21c 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import styled from "styled-components";
 
-import Avatar from "@features/chats/Avatar";
+import Avatar from "@components/Avatar";
+import { useChat } from "@features/chats/hooks/useChat";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
@@ -10,6 +11,7 @@ import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { getChatByID } from "./helpers";
 import { useChatMembers } from "./hooks/useChatMember";
+import { getElapsedTime } from "@utils/helpers";
 
 const Container = styled.div`
   position: absolute;
@@ -97,8 +99,7 @@ function Topbar() {
     name = membersData[0]?.screenFirstName || membersData[0]?.username;
 
     lastSeen = chat?.lastMessage?.timestamp;
-    image =
-      membersData[0]?.photo?.length > 50 ? membersData[0]?.photo : undefined;
+    image = membersData[0]?.photo;
   }
 
   if (!chat) return null;
@@ -118,7 +119,7 @@ function Topbar() {
             <Content>
               <Name data-testid="chat-name">{name}</Name>
               <LastSeen data-testid="chat-last-seen">
-                last seen {lastSeen}
+                last seen {getElapsedTime(lastSeen)}
               </LastSeen>
             </Content>
           </Info>
diff --git a/app/src/features/chats/emojies/EmojiPicker.tsx b/app/src/features/chats/emojies/EmojiPicker.tsx
deleted file mode 100644
index b80a2ee5..00000000
--- a/app/src/features/chats/emojies/EmojiPicker.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import { useAppSelector } from "@hooks/useGlobalState";
-import { Theme } from "@state/theme/theme";
-import EmojiPicker, {
-  EmojiClickData,
-  Theme as emojitheme,
-} from "emoji-picker-react";
-import styled from "styled-components";
-
-const StyledEmojiPickerContainer = styled.div`
-  z-index: 4;
-  position: absolute;
-  width: 30%;
-  min-width: 300px;
-  height: 35%;
-  min-height: 400px;
-  max-height: 400px;
-  bottom: 105%;
-  background: var(--color-secondary);
-  border: 1px solid #e6e6e6;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  padding: 0;
-`;
-
-const EmojiPickerWrapper = styled.div`
-  .emoji-picker {
-    background: none;
-    border: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
-    gap: 8px;
-  }
-
-  .emoji {
-    font-size: 1.2rem;
-    padding: 5px;
-    cursor: pointer;
-    border-radius: 5px;
-
-    &:hover {
-      background: #f0f0f0;
-    }
-  }
-`;
-
-interface EmojiPickerItemProps {
-  setInputText: React.Dispatch<React.SetStateAction<string>>;
-}
-
-export default function EmojiPickerItem({
-  setInputText,
-}: EmojiPickerItemProps) {
-  const currentTheme = useAppSelector((state) => state.theme.value);
-
-  const handleEmojiClicked = (emojiData: EmojiClickData, event: MouseEvent) => {
-    setInputText((text) => text + emojiData.emoji);
-  };
-
-  return (
-    <StyledEmojiPickerContainer>
-      <EmojiPickerWrapper>
-        <EmojiPicker
-          width="100%"
-          theme={
-            currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
-          }
-          onEmojiClick={handleEmojiClicked}
-        />
-      </EmojiPickerWrapper>
-    </StyledEmojiPickerContainer>
-  );
-}
diff --git a/app/src/features/chats/emojies/GifsPicker.tsx b/app/src/features/chats/emojies/GifsPicker.tsx
deleted file mode 100644
index 9ef63a41..00000000
--- a/app/src/features/chats/emojies/GifsPicker.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import styled from "styled-components";
-import { useGifs, useTrendingGifs } from "../hooks/useGIFS";
-
-interface GifPickerProps {
-  onGifSelect: (gifUrl: string) => void;
-  searchQuery?: string;
-}
-interface Gif {
-  id: string;
-  images: any;
-  title: string;
-}
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const GifGrid = styled.div`
-  padding: 10px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-  gap: 2px;
-`;
-
-const GifItem = styled.img`
-  width: 90px;
-  height: 90px;
-  object-fit: fill !important;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-const GifPicker = (props: GifPickerProps) => {
-  const { onGifSelect, searchQuery } = props;
-  const { gifs, isLoading } = useGifs(searchQuery || "");
-  const { trendingGifs } = useTrendingGifs();
-  return (
-    <Container>
-      {isLoading ? (
-        <GifGrid>
-          {gifs?.map((gif: Gif) => (
-            <GifItem
-              key={gif.id}
-              src={gif.images.fixed_height.url}
-              alt={gif.title}
-              onClick={() => onGifSelect(gif.images.fixed_height.url)}
-              data-testid={`gif-item-${gif.id}`}
-            />
-          ))}
-        </GifGrid>
-      ) : (
-        <GifGrid>
-          {trendingGifs?.map((gif: Gif) => (
-            <GifItem
-              key={gif.id}
-              src={gif.images.fixed_height.url}
-              alt={gif.title}
-              onClick={() => onGifSelect(gif.images.fixed_height.url)}
-              data-testid={`gif-item-${gif.id}`}
-            />
-          ))}
-        </GifGrid>
-      )}
-    </Container>
-  );
-};
-
-export default GifPicker;
diff --git a/app/src/features/chats/emojies/GridPicker.tsx b/app/src/features/chats/emojies/GridPicker.tsx
new file mode 100644
index 00000000..99fc3fbc
--- /dev/null
+++ b/app/src/features/chats/emojies/GridPicker.tsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import PickerItem from "./PickerItem";
+
+interface PickerProps {
+  onItemSelect: (url: string) => void;
+  onMount: () => any;
+}
+
+const Grid = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(3, 90px);
+  gap: 2px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  list-style: none;
+
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: block;
+    width: 0.4rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    border-radius: 1rem;
+  }
+`;
+
+const GridPicker = (props: PickerProps) => {
+  const { onItemSelect, onMount } = props;
+  const { data: displayedItems } = onMount();
+  return (
+    <Grid>
+      {displayedItems?.map((element, index: number) => (
+        <PickerItem key={index} onItemSelect={onItemSelect} {...element} />
+      ))}
+    </Grid>
+  );
+};
+
+export default GridPicker;
diff --git a/app/src/features/chats/emojies/Picker.tsx b/app/src/features/chats/emojies/Picker.tsx
new file mode 100644
index 00000000..bc7de611
--- /dev/null
+++ b/app/src/features/chats/emojies/Picker.tsx
@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Theme } from "@state/theme/theme";
+import EmojiPicker, {
+  EmojiClickData,
+  Theme as emojitheme,
+} from "emoji-picker-react";
+import styled from "styled-components";
+import { getIcon } from "@data/icons";
+import { StickerTap } from "types/messages";
+import GridPicker from "./GridPicker";
+import { useStickers } from "../hooks/useStickers";
+import { useGifs } from "../hooks/useGIFS";
+const Container = styled.div`
+  z-index: 4;
+  position: absolute;
+  width: 30%;
+  min-width: 300px;
+  height: 50%;
+  min-height: 500px;
+  max-height: 600px;
+  bottom: 105%;
+  background: var(--color-background);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  padding: 0;
+`;
+
+const TabBar = styled.div`
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1px solid #e6e6e6;
+  background: var(--color-secondary);
+`;
+
+const Tab = styled.button<{ $active: boolean }>`
+  flex: 1;
+  padding: 10px;
+  font-size: 1rem;
+  background: ${({ $active }) =>
+    $active ? "var(--color-item-active)" : "var(--color-background)"};
+  border: none;
+  cursor: pointer;
+  color: var(--color-primary);
+  font-weight: ${({ $active }) => ($active ? "bold" : "normal")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    background: var(--color-item-active);
+  }
+`;
+
+const EmojiWrapper = styled.div`
+  height: 90%;
+  .emoji-picker {
+    background: none;
+    border: none;
+  }
+  .epr-body {
+    &::-webkit-scrollbar {
+      display: block;
+      width: 0.4rem;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-color);
+      border-radius: 1rem;
+    }
+  }
+`;
+
+interface PickerProps {
+  setInputText: React.Dispatch<React.SetStateAction<string>>;
+  onSendGIF: (gifUrl: string) => void;
+  onSendSticker: (stickerUrl: string) => void;
+}
+
+function Picker(props: PickerProps) {
+  const { setInputText, onSendGIF, onSendSticker } = props;
+  const currentTheme = useAppSelector((state) => state.theme.value);
+  const [activeTab, setActiveTab] = useState<StickerTap>(StickerTap.gif);
+
+  const handleEmojiClicked = (emojiData: EmojiClickData) => {
+    setInputText((text) => text + emojiData.emoji);
+  };
+
+  const handleGIFSelect = (gifUrl: string) => {
+    onSendGIF(gifUrl);
+  };
+
+  const handleStickerSelect = (stickerUrl: string) => {
+    onSendSticker(stickerUrl);
+  };
+
+  return (
+    <Container>
+      <TabBar>
+        <Tab
+          $active={activeTab === StickerTap.emoji}
+          onClick={() => setActiveTab(StickerTap.emoji)}
+        >
+          {getIcon("EmojiBox")}
+        </Tab>
+        <Tab
+          $active={activeTab === StickerTap.gif}
+          onClick={() => setActiveTab(StickerTap.gif)}
+        >
+          {getIcon("GifBox")}
+        </Tab>
+        <Tab
+          $active={activeTab === StickerTap.sticker}
+          onClick={() => setActiveTab(StickerTap.sticker)}
+        >
+          {getIcon("StickerBox")}
+        </Tab>
+      </TabBar>
+      <EmojiWrapper>
+        {activeTab === StickerTap.emoji && (
+          <EmojiPicker
+            width="100%"
+            theme={
+              currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+            }
+            onEmojiClick={handleEmojiClicked}
+            lazyLoadEmojis={true}
+          />
+        )}
+        {activeTab === StickerTap.gif && (
+          <GridPicker onItemSelect={handleGIFSelect} onMount={useGifs} />
+        )}
+        {activeTab === StickerTap.sticker && (
+          <GridPicker
+            onItemSelect={handleStickerSelect}
+            onMount={useStickers}
+          />
+        )}
+      </EmojiWrapper>
+    </Container>
+  );
+}
+
+export default Picker;
diff --git a/app/src/features/chats/emojies/PickerItem.tsx b/app/src/features/chats/emojies/PickerItem.tsx
new file mode 100644
index 00000000..209e5901
--- /dev/null
+++ b/app/src/features/chats/emojies/PickerItem.tsx
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { useInView } from "react-intersection-observer";
+import SpinnerMini from "@components/SpinnerMini";
+interface PickerItemProps {
+  id: string;
+  title: string;
+  url: string;
+  onItemSelect: (url: string) => void;
+}
+
+const StyledPickerItem = styled.img`
+  width: 90px;
+  height: 90px;
+  object-fit: fill;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-icon-secondary);
+    border-radius: 0.5rem;
+  }
+`;
+const ItemWrapper = styled.li`
+  cursor: pointer;
+  width: 90px;
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+function PickerItem(props: PickerItemProps) {
+  const { id, title, url, onItemSelect } = props;
+  const { ref, inView } = useInView({ triggerOnce: true });
+
+  return (
+    <ItemWrapper ref={ref} onClick={() => onItemSelect(url)}>
+      {inView ? (
+        <StyledPickerItem id={id} title={title} src={url} />
+      ) : (
+        <SpinnerMini />
+      )}
+    </ItemWrapper>
+  );
+}
+
+export default PickerItem;
diff --git a/app/src/features/chats/emojies/Viewer.tsx b/app/src/features/chats/emojies/Viewer.tsx
new file mode 100644
index 00000000..5709798f
--- /dev/null
+++ b/app/src/features/chats/emojies/Viewer.tsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+interface ViewerProps {
+  contentType: string;
+  id: string;
+  url: string;
+  title: string;
+}
+const Gif = styled.img`
+  width: 120px;
+  height: 120px;
+  object-fit: fill;
+`;
+
+function Viewer(props: ViewerProps) {
+  const { id, url, title } = props;
+
+  return <Gif id={id} src={url} alt={title} loading="lazy" />;
+}
+
+export default Viewer;
diff --git a/app/src/features/chats/hooks/useFetchNextPage.tsx b/app/src/features/chats/hooks/useFetchNextPage.ts
similarity index 100%
rename from app/src/features/chats/hooks/useFetchNextPage.tsx
rename to app/src/features/chats/hooks/useFetchNextPage.ts
diff --git a/app/src/features/chats/hooks/useGIFS.ts b/app/src/features/chats/hooks/useGIFS.ts
index 2c644161..3e9647ea 100644
--- a/app/src/features/chats/hooks/useGIFS.ts
+++ b/app/src/features/chats/hooks/useGIFS.ts
@@ -1,34 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
-
 import { getGifs as getGifsAPI } from "../services/GetGIFS";
-import { getTrendingGifs as getTrendingGifsAPI } from "../services/GetGIFS";
-import { GIPHY_LIMIT } from "@constants";
-
-function useGifs(query: string) {
-  const {
-    data: gifs,
-    error,
-    isLoading,
-  } = useQuery({
-    queryKey: ["gifs", query],
-    queryFn: () => getGifsAPI(query, GIPHY_LIMIT),
-    enabled: !!query,
-  });
-
-  return { gifs, error, isLoading };
-}
 
-function useTrendingGifs() {
-  const {
-    data: trendingGifs,
-    error,
-    isLoading,
-  } = useQuery({
-    queryKey: ["trendingGifs"],
-    queryFn: () => getTrendingGifsAPI(GIPHY_LIMIT),
+function useGifs() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["gifs"],
+    queryFn: () => getGifsAPI(),
   });
 
-  return { trendingGifs, error, isLoading };
+  return { data, error, isLoading };
 }
 
-export { useTrendingGifs, useGifs };
+export { useGifs };
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 4a91b2e0..e39d24c1 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
-import { MessageInterface, MessageStatus } from "types/messages";
+import { ContentType, MessageInterface, MessageStatus } from "types/messages";
 import { useSocket } from "@hooks/useSocket";
 
 export const useMessageSender = () => {
@@ -9,7 +9,11 @@ export const useMessageSender = () => {
   const activeMessage = useAppSelector((state) => state.activeMessage);
   const { chatId } = useParams<{ chatId: string }>();
 
-  const handleSendMessage = (data: string, file?: string) => {
+  const handleSendMessage = (
+    data: string,
+    file?: string,
+    type: ContentType = "text"
+  ) => {
     if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id!, data, chatId!);
       return;
@@ -22,7 +26,7 @@ export const useMessageSender = () => {
         _id: "",
         timestamp: new Date().toISOString(),
         content: data,
-        contentType: "text",
+        contentType: type,
         isPinned: false,
         isForward: false,
         isAnnouncement: false,
@@ -33,6 +37,7 @@ export const useMessageSender = () => {
         isReply,
         status: MessageStatus.sent,
         media: file,
+        replyMessageId: null, // or provide the appropriate value
       };
       sendMessage(message);
     }
diff --git a/app/src/features/chats/hooks/useStickers.ts b/app/src/features/chats/hooks/useStickers.ts
index 8abc9eda..6bd2c559 100644
--- a/app/src/features/chats/hooks/useStickers.ts
+++ b/app/src/features/chats/hooks/useStickers.ts
@@ -1,34 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
-
 import { getStickers as getStickersAPI } from "../services/GetStickers";
-import { getTrendingStickers as getTrendingStickersAPI } from "../services/GetStickers";
-import { GIPHY_LIMIT } from "@constants";
-
-function useStickers(query: string) {
-  const {
-    data: stickers,
-    error,
-    isLoading,
-  } = useQuery({
-    queryKey: ["Stickers", query],
-    queryFn: () => getStickersAPI(query, GIPHY_LIMIT),
-    enabled: !!query,
-  });
-
-  return { stickers, error, isLoading };
-}
 
-function useTrendingStickers() {
-  const {
-    data: trendingStickers,
-    error,
-    isLoading,
-  } = useQuery({
-    queryKey: ["trendingStickers"],
-    queryFn: () => getTrendingStickersAPI(GIPHY_LIMIT),
+function useStickers() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["stickers"],
+    queryFn: () => getStickersAPI(),
   });
 
-  return { trendingStickers, error, isLoading };
+  return { data, error, isLoading };
 }
 
-export { useTrendingStickers, useStickers };
+export { useStickers };
diff --git a/app/src/features/chats/hooks/useVoiceRecorder.ts b/app/src/features/chats/hooks/useVoiceRecorder.ts
deleted file mode 100644
index 72ba60e6..00000000
--- a/app/src/features/chats/hooks/useVoiceRecorder.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useState, useRef } from "react";
-
-const useVoiceRecorder = () => {
-  const [isRecording, setIsRecording] = useState(false);
-  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-
-  const startRecording = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      mediaRecorderRef.current = new MediaRecorder(stream);
-
-      const chunks: Blob[] = [];
-      mediaRecorderRef.current.ondataavailable = (event: BlobEvent) => {
-        chunks.push(event.data);
-      };
-
-      mediaRecorderRef.current.onstop = () => {
-        const audio = new Blob(chunks, { type: "audio/webm" });
-        setAudioBlob(audio);
-        stream.getTracks().forEach((track) => track.stop());
-      };
-
-      mediaRecorderRef.current.start();
-      setIsRecording(true);
-    } catch (error) {
-      console.error("Error starting recording:", error);
-    }
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorderRef.current) {
-      mediaRecorderRef.current.stop();
-      setIsRecording(false);
-    }
-  };
-
-  return { isRecording, audioBlob, startRecording, stopRecording };
-};
-
-export default useVoiceRecorder;
diff --git a/app/src/features/chats/media/FileViewer.tsx b/app/src/features/chats/media/FileViewer.tsx
index 3e24a0ee..29c3d7ab 100644
--- a/app/src/features/chats/media/FileViewer.tsx
+++ b/app/src/features/chats/media/FileViewer.tsx
@@ -27,7 +27,7 @@ function getFileType(fileName: string): string {
   const extension = fileName.split(".").pop()?.toLowerCase();
   if (!extension) return "unknown";
 
-  const imageTypes = ["png", "jpg", "jpeg", "gif", "bmp"];
+  const imageTypes = ["png", "jpg", "jpeg", "gif", "bmp", "webp"];
   const videoTypes = ["mp4"];
   const audioTypes = ["mp3", "wav", "webm"];
   const pdfTypes = ["pdf"];
diff --git a/app/src/features/chats/services/GetGIFS.ts b/app/src/features/chats/services/GetGIFS.ts
index 297b8b92..e16007f0 100644
--- a/app/src/features/chats/services/GetGIFS.ts
+++ b/app/src/features/chats/services/GetGIFS.ts
@@ -1,30 +1,6 @@
-import { GIPHY_API_KEY as API_KEY, GIPHY_API_URL as API_URL } from "@constants";
-async function getGifs(query: string, limit: number = 20) {
-  const res = await fetch(
-    `${API_URL}/gifs/search?api_key=${API_KEY}&q=${query}&limit=${limit}&offset=0&rating=g&lang=en`
-  );
-
-  if (!res.ok) {
-    throw new Error("Failed to fetch GIFs");
-  }
-
-  const data = await res.json();
-
-  console.log(data.data);
-  return data.data;
-}
-
-async function getTrendingGifs(limit: number = 20) {
-  const res = await fetch(
-    `${API_URL}/gifs/trending?api_key=${API_KEY}&limit=${limit}&offset=0&rating=g&lang=en`
-  );
-
-  if (!res.ok) {
-    throw new Error("Failed to fetch GIFs");
-  }
-  const data = await res.json();
-  console.log(data.data);
-  return data.data;
+import { gifs } from "@data/gifs";
+async function getGifs() {
+  return gifs;
 }
 
-export { getGifs, getTrendingGifs };
+export { getGifs };
diff --git a/app/src/features/chats/services/GetStickers.ts b/app/src/features/chats/services/GetStickers.ts
index 2427d139..3f2d7e3d 100644
--- a/app/src/features/chats/services/GetStickers.ts
+++ b/app/src/features/chats/services/GetStickers.ts
@@ -1,28 +1,6 @@
-import { GIPHY_API_KEY as API_KEY, GIPHY_API_URL as API_URL } from "@constants";
-async function getStickers(query: string, limit: number = 20) {
-  const res = await fetch(
-    `${API_URL}/stickers/search?api_key=${API_KEY}&q=${query}&limit=${limit}&offset=0&rating=g&lang=en`
-  );
-
-  if (!res.ok) {
-    throw new Error("Failed to fetch stickers");
-  }
-
-  const data = await res.json();
-  console.log(data.data);
-  return data.data;
-}
-
-async function getTrendingStickers(limit: number = 20) {
-  const res = await fetch(
-    `${API_URL}/stickers/trending?api_key=${API_KEY}&limit=${limit}&offset=0&rating=g&lang=en`
-  );
-
-  if (!res.ok) {
-    throw new Error("Failed to fetch stickers");
-  }
-  const data = await res.json();
-  return data.data;
+import { stickers } from "@data/stickers";
+async function getStickers() {
+  return stickers;
 }
 
-export { getStickers, getTrendingStickers };
+export { getStickers };
diff --git a/app/src/features/forward/chatPopupItem.tsx b/app/src/features/forward/chatPopupItem.tsx
index 0f130d3a..b68df567 100644
--- a/app/src/features/forward/chatPopupItem.tsx
+++ b/app/src/features/forward/chatPopupItem.tsx
@@ -1,5 +1,5 @@
 import Heading from "@components/Heading";
-import Avatar from "@features/chats/Avatar";
+import Avatar from "@components/Avatar";
 import styled from "styled-components";
 
 const StyledSideBarRow = styled.div`
diff --git a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
index b8f2c813..868201ab 100644
--- a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
@@ -10,7 +10,7 @@ const ProgressBarContainer = styled.div`
   margin-left: 0.5rem;
 `;
 
-const ProgressBarSegment = styled.div<{ active: boolean }>`
+const ProgressBarSegment = styled.div<{ $active: boolean }>`
   flex-grow: 1;
   height: 100%;
   background-color: ${(props) =>
@@ -41,7 +41,7 @@ const PinnedMessageProgressBar: React.FC<PinnedMessageProgressBarProps> = ({
         {pinnedMessages.map((_, index) => (
           <ProgressBarSegment
             key={index}
-            active={index === currentPinnedIndex}
+            $active={index === currentPinnedIndex}
           />
         ))}
       </ProgressBar>
diff --git a/app/src/features/privacy-settings/BlockItem.tsx b/app/src/features/privacy-settings/BlockItem.tsx
index 2b950b76..05efffe5 100644
--- a/app/src/features/privacy-settings/BlockItem.tsx
+++ b/app/src/features/privacy-settings/BlockItem.tsx
@@ -1,5 +1,5 @@
 import Heading from "@components/Heading";
-import Avatar from "@features/chats/Avatar";
+import Avatar from "@components/Avatar";
 import styled from "styled-components";
 import { StyledList, StyledListProps } from "./AddToBlockMenuList";
 import { getIcon } from "@data/icons";
diff --git a/app/src/features/stories/components/AddStory.tsx b/app/src/features/stories/components/AddStory.tsx
index 83038f8e..ec8d8d09 100644
--- a/app/src/features/stories/components/AddStory.tsx
+++ b/app/src/features/stories/components/AddStory.tsx
@@ -40,6 +40,7 @@ function AddStory() {
     }
   };
   const handleClose = () => {
+    fileInputRef.current!.value = "";
     setIsImageEditorOpen(false);
   };
 
@@ -48,11 +49,22 @@ function AddStory() {
     setIsImageEditorOpen(false);
     setIsPreviewOpened(true);
   };
+  const handleImageEditorClose = () => {
+    setStory(null);
+    fileInputRef.current!.value = "";
+    setIsImageEditorOpen(false);
+  };
 
   const handleAddStoryClicked = () => {
     fileInputRef.current?.click();
   };
 
+  const handleStoryPreviewClose = () => {
+    fileInputRef.current!.value = "";
+    setStory(null);
+    setIsPreviewOpened(false);
+  };
+
   return (
     <>
       <StyledStoryCreator onClick={handleAddStoryClicked}>
@@ -78,10 +90,7 @@ function AddStory() {
       </StyledStoryCreator>
 
       {
-        <Popup
-          isOpen={isImageEditorOpen}
-          onClose={() => setIsImageEditorOpen(false)}
-        >
+        <Popup isOpen={isImageEditorOpen} onClose={handleImageEditorClose}>
           <ImageEditor
             src={story ? URL.createObjectURL(story) : ""}
             isOpen={isImageEditorOpen}
@@ -95,7 +104,7 @@ function AddStory() {
       }
       <StoryPreview
         isOpen={isPreviewOpened && !!story}
-        onClose={() => setIsPreviewOpened(false)}
+        onClose={handleStoryPreviewClose}
         story={story}
       />
     </>
diff --git a/app/src/features/stories/components/StoryIcon.tsx b/app/src/features/stories/components/StoryIcon.tsx
index ed0c5abe..bf6bf2f5 100644
--- a/app/src/features/stories/components/StoryIcon.tsx
+++ b/app/src/features/stories/components/StoryIcon.tsx
@@ -53,13 +53,7 @@ const StyledName = styled.p`
 function StoryIcon(props: StoryIconProps) {
   const { photo, name, userId, onView, isMyStory, isCollapsed = false } = props;
 
-  const firstName =
-    name?.split(" ")[0]?.slice(0, 4) +
-      (name?.split(" ")[0]?.length > 4 ? "..." : "") || "";
-  const lastName =
-    name?.split(" ")[1]?.slice(0, 4) +
-      (name?.split(" ")[1]?.length > 4 ? "..." : "") || "";
-  const displayName = `${firstName} ${lastName}`.trim();
+  const displayName = name?.slice(0, 8) + (name?.length > 8 ? "..." : "") || "";
 
   const handleIconClicked = () => {
     if (userId && onView) {
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index 49bb10e3..7aad1f2a 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -31,11 +31,13 @@ const StyledContainer = styled.div<{ $isOpened: boolean }>`
 
 function StoryListContainer() {
   const { stories: userStoriesData } = useStroies();
-  const userStories = userStoriesData?.data;
+  const userStories = userStoriesData?.data?.filter(
+    (userStory) => userStory.stories.length > 0
+  );
   const { myStories: myStoriesData } = useMyStroies();
   const myStories = myStoriesData?.data?.stories;
   const [isOpened, setIsOpened] = useState(
-    userStories?.length !== 0 || myStories?.length !== 0
+    userStories?.length || myStories?.length
   );
   const { userInfo } = useAppSelector((state) => state.user);
 
@@ -43,7 +45,7 @@ function StoryListContainer() {
     setIsOpened(true);
   };
   useEffect(() => {
-    setIsOpened(userStories?.length !== 0 || myStories?.length !== 0);
+    setIsOpened(userStories?.length || myStories?.length);
   }, [myStories, userStories]);
   return (
     <StyledContainer $isOpened={isOpened} data-testid="story-list-container">
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index a4adc749..11ec5d51 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -33,6 +33,10 @@ export interface MessageInterface {
   status: MessageStatus;
 
   media?: string;
+
+  //TODO: should use parentMessageId
+  isReply: boolean;
+  replyMessageId: string | null;
 }
 
 export enum StickerTap {
@@ -40,3 +44,13 @@ export enum StickerTap {
   emoji,
   sticker,
 }
+export interface Gif {
+  id: string;
+  title: string;
+  url: string;
+}
+export interface Sticker {
+  id: string;
+  title: string;
+  url: string;
+}

From 845bb08518064e0e8d13bb7a369632b100af2e5d Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:19:53 +0200
Subject: [PATCH 063/136] :bug: +90 edits :fire: (#100)

---
 app/src/features/chats/ChatInput.tsx          |  3 +-
 app/src/features/chats/ChatItem.tsx           |  1 -
 app/src/features/chats/Message.tsx            |  8 +-
 app/src/features/chats/Topbar.tsx             | 21 +++---
 .../features/chats/audio/VoiceRecorder.tsx    |  4 +-
 .../features/chats/emojies/EmojiPicker.tsx    | 74 +++++++++++++++++++
 app/src/features/chats/hooks/useChatMember.ts |  8 +-
 .../features/chats/hooks/useFetchNextPage.tsx | 53 +++++++++++++
 .../components/PinnedMessageProgressBar.tsx   |  2 -
 app/src/mocks/chats/pagination.ts             |  2 +-
 app/src/mocks/data/messages.ts                | 20 +++++
 app/src/types/messages.ts                     |  1 -
 12 files changed, 171 insertions(+), 26 deletions(-)
 create mode 100644 app/src/features/chats/emojies/EmojiPicker.tsx
 create mode 100644 app/src/features/chats/hooks/useFetchNextPage.tsx

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 299a8467..65530b10 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -141,6 +141,7 @@ function ChatInput() {
     alert(error);
     setError("");
   }
+  
   return (
     <>
       {isFilePreviewOpen && file && (
@@ -201,7 +202,7 @@ function ChatInput() {
               />
             ) : (
               <VoiceRecorder
-                Error={Error}
+                error={error}
                 isRecording={isRecording}
                 setIsRecording={setIsRecording}
                 setError={setError}
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index b4ebe883..13288d31 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -2,7 +2,6 @@ import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
-import { Chat } from "@mocks/data/chats";
 import { DetailedChatInterface } from "@state/messages/chats";
 import { useChatMembers } from "./hooks/useChatMember";
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 89526e1c..8db3f1af 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -146,9 +146,7 @@ function Message({
     contentType,
   },
 }: MessageProps) {
-  const { searchTerm, searchResults, currentResultIndex } = useAppSelector(
-    (state) => state.search,
-  );
+  const { searchTerm, searchResults } = useAppSelector((state) => state.search);
 
   const mergedRef = useRef<HTMLDivElement>(null);
   const { lastMessageRef } = useScrollToLastMsg();
@@ -214,10 +212,10 @@ function Message({
                 <MessageBox messageId={parentMessageId} />
               </MessageBoxWrapper>
             )}
-            {(contentType === "gif" || contentType === "sticker") && media && (
+            {(contentType === "GIF" || contentType === "sticker") && media && (
               <Gif src={media} loading="lazy" />
             )}
-            {media && !(contentType === "gif" || contentType === "sticker") && (
+            {media && !(contentType === "GIF" || contentType === "sticker") && (
               <FileViewer file={media} />
             )}
             {renderWithHighlight(content, searchTerm, searchResults, id)}
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 4a8ee21c..ac34c480 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
-import { useChat } from "@features/chats/hooks/useChat";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
@@ -83,12 +82,12 @@ function Topbar() {
   const chats = useAppSelector((state) => state.chats.chats);
   const [isSearching, setIsSearching] = useState(false);
 
-  const chat =
-    chatId &&
-    getChatByID({
-      chatID: chatId,
-      chats: chats,
-    });
+  const chat = chatId
+    ? getChatByID({
+        chatID: chatId,
+        chats: chats,
+      })
+    : undefined;
 
   let membersData = useChatMembers(chat?.members);
 
@@ -118,9 +117,11 @@ function Topbar() {
           <Info data-testid="chat-info">
             <Content>
               <Name data-testid="chat-name">{name}</Name>
-              <LastSeen data-testid="chat-last-seen">
-                last seen {getElapsedTime(lastSeen)}
-              </LastSeen>
+              {lastSeen && (
+                <LastSeen data-testid="chat-last-seen">
+                  last seen {getElapsedTime(lastSeen)}
+                </LastSeen>
+              )}
             </Content>
           </Info>
           <PinnedMessages />
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
index 1862812b..b54a11a5 100644
--- a/app/src/features/chats/audio/VoiceRecorder.tsx
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -15,7 +15,7 @@ type VoiceRecorderProps = {
   isRecording: RecordingStates;
   setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
   setError: Dispatch<SetStateAction<string>>;
-  Error: string;
+  error: string;
   handleSendMessage: (data: string, file: string) => void;
 };
 
@@ -25,7 +25,7 @@ const VoiceRecorder: React.FC<VoiceRecorderProps> = ({
   isRecording,
   setIsRecording,
   setError,
-  Error,
+  error,
 }) => {
   const mediaRecorder = useRef<MediaRecorder | null>(null);
   const audioChunks = useRef<Blob[]>([]);
diff --git a/app/src/features/chats/emojies/EmojiPicker.tsx b/app/src/features/chats/emojies/EmojiPicker.tsx
new file mode 100644
index 00000000..70a751f1
--- /dev/null
+++ b/app/src/features/chats/emojies/EmojiPicker.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import EmojiPicker, {
+  EmojiClickData,
+  Theme as emojitheme,
+} from "emoji-picker-react";
+import styled from "styled-components";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { Theme } from "@state/theme/theme";
+
+const StyledEmojiPickerContainer = styled.div`
+  z-index: 4;
+  position: absolute;
+  width: 30%;
+  min-width: 300px;
+  height: 35%;
+  min-height: 400px;
+  max-height: 400px;
+  bottom: 105%;
+  background: var(--color-secondary);
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  padding: 0;
+`;
+
+const EmojiPickerWrapper = styled.div`
+  .emoji-picker {
+    background: none;
+    border: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+    gap: 8px;
+  }
+
+  .emoji {
+    font-size: 1.2rem;
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+`;
+
+interface EmojiPickerItemProps {
+  setInputText: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export default function EmojiPickerItem({
+  setInputText,
+}: EmojiPickerItemProps) {
+  const currentTheme = useAppSelector((state) => state.theme.value);
+
+  const handleEmojiClicked = (emojiData: EmojiClickData) => {
+    setInputText((text) => text + emojiData.emoji);
+  };
+
+  return (
+    <StyledEmojiPickerContainer>
+      <EmojiPickerWrapper>
+        <EmojiPicker
+          width="100%"
+          theme={
+            currentTheme === Theme.DARK ? emojitheme.DARK : emojitheme.LIGHT
+          }
+          onEmojiClick={handleEmojiClicked}
+        />
+      </EmojiPickerWrapper>
+    </StyledEmojiPickerContainer>
+  );
+}
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMember.ts
index ece2aa00..4614acc7 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMember.ts
@@ -1,11 +1,13 @@
 import { useAppSelector } from "@hooks/useGlobalState";
 import { Member } from "@mocks/data/chats";
 
-export function useChatMembers(memberIDs: string[]): Member[] {
+export function useChatMembers(memberIDs?: string[]): Member[] {
+  const id = useAppSelector((state) => state.user.userInfo.id);
   const members = useAppSelector((state) => state.chats.members);
   if (!memberIDs || !members) return [];
 
   return memberIDs
-    .map((id) => members.find((member) => member._id === id))
-    .filter((member): member is Member => member !== undefined);
+    .filter((memberID) => memberID !== id) // Exclude the specific ID
+    .map((filteredID) => members.find((member) => member._id === filteredID))
+    .filter((member): member is Member => member !== undefined); // Ensure no undefined values
 }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.tsx b/app/src/features/chats/hooks/useFetchNextPage.tsx
new file mode 100644
index 00000000..74f5019e
--- /dev/null
+++ b/app/src/features/chats/hooks/useFetchNextPage.tsx
@@ -0,0 +1,53 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { apiFetchNextPage } from "../services/apiFetchNextPage";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { mergeMessages } from "../../../state/messages/chats";
+
+function useFetchNextPage() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const dispatch = useDispatch();
+
+  const {
+    data,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+  } = useInfiniteQuery({
+    queryKey: [`chat-${chatId}-pages`],
+    queryFn: ({ pageParam = 1 }) =>
+      apiFetchNextPage({ chatId: chatId!, pageParam }),
+    getNextPageParam: (lastPage) => lastPage.nextPage,
+    initialPageParam: 1,
+  });
+
+  useEffect(() => {
+    if (data) {
+      const lastFetchedPage = data.pages[data.pages.length - 1];
+      if (lastFetchedPage && chatId) {
+        dispatch(
+          mergeMessages({
+            chatId: chatId,
+            newMessages: lastFetchedPage.messages,
+          })
+        );
+      }
+    }
+  }, [data, chatId, dispatch]);
+
+  return {
+    data,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage,
+    hasPreviousPage,
+    isFetchingNextPage,
+    isFetchingPreviousPage,
+  };
+}
+
+export { useFetchNextPage };
diff --git a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
index 868201ab..af8e09b9 100644
--- a/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessageProgressBar.tsx
@@ -13,8 +13,6 @@ const ProgressBarContainer = styled.div`
 const ProgressBarSegment = styled.div<{ $active: boolean }>`
   flex-grow: 1;
   height: 100%;
-  background-color: ${(props) =>
-    props.active ? "var(--accent-color)" : "var(--color-background-tertiary)"};
   transition: background-color 0.3s ease-in-out;
 `;
 
diff --git a/app/src/mocks/chats/pagination.ts b/app/src/mocks/chats/pagination.ts
index d2edd057..d21722cd 100644
--- a/app/src/mocks/chats/pagination.ts
+++ b/app/src/mocks/chats/pagination.ts
@@ -2,7 +2,7 @@ import { newMessages } from "@mocks/data/messages";
 import { http, HttpResponse } from "msw";
 
 export const paginationMock = [
-  http.get("/chats/messages/:chatId", async ({ params, request }) => {
+  http.get("/chats/messages/:chatId", async ({ request }) => {
     const url = new URL(request.url);
 
     console.log(url.searchParams.get("page"));
diff --git a/app/src/mocks/data/messages.ts b/app/src/mocks/data/messages.ts
index 4b3db478..1a89807d 100644
--- a/app/src/mocks/data/messages.ts
+++ b/app/src/mocks/data/messages.ts
@@ -14,6 +14,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -29,6 +30,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
+    replyMessageId: null,
     media: "https://example.com/doc.pdf",
   },
   {
@@ -44,6 +46,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -59,6 +62,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -74,6 +78,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.error,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -89,6 +94,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -104,6 +110,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: true,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -119,6 +126,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
+    replyMessageId: null,
     media: "https://example.com/report.pdf",
   },
   {
@@ -134,6 +142,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -149,6 +158,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.error,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -164,6 +174,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -179,6 +190,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -194,6 +206,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -209,6 +222,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -224,6 +238,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -239,6 +254,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.error,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -254,6 +270,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: true,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -269,6 +286,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.delivered,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -284,6 +302,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.seen,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
   {
@@ -299,6 +318,7 @@ const messages: MessageInterface[] = [
     parentMessageId: "",
     status: MessageStatus.sent,
     isReply: false,
+    replyMessageId: null,
     media: "",
   },
 ];
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 11ec5d51..bf17c314 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -29,7 +29,6 @@ export interface MessageInterface {
   chatId: string;
 
   parentMessageId: string | null;
-  isReply: boolean;
   status: MessageStatus;
 
   media?: string;

From 043d2faf3a1b027ba77018fc9cf999adb945acc8 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Thu, 5 Dec 2024 17:56:50 +0200
Subject: [PATCH 064/136] fix: page loading optimization + fixing some eslint
 errors (#101)

* optmize: improve loading time by lazyloading icons and image editor

* refactor: fix most of eslint erros and warnings
---
 app/package.json                              |   1 +
 app/public/mockServiceWorker.js               |   2 +-
 app/src/components/CloseButton.tsx            |   1 -
 app/src/components/ImageEditor.tsx            | 192 +++---
 app/src/components/Popup.tsx                  |   2 +-
 .../FloatingLabelInputDemo.tsx                |   2 +-
 .../inputs/input-field/CodeInputField.tsx     |   2 +-
 .../inputs/input-field/InputField.test.tsx    |  10 +-
 .../inputs/radio-input/RadioInput.test.tsx    |  20 +-
 .../inputs/radio-input/RadioInput.tsx         |   2 +-
 .../protected-route/ProtectedRoute.test.tsx   |   4 +-
 .../components/side-bar/chats/SearchBar.tsx   |  22 +-
 .../side-bar/chats/SideBarToolsButton.tsx     |  28 +-
 .../chats/theme-toggle/ToggleMode.test.tsx    |   4 +-
 .../side-bar/settings/OptionsList.tsx         |   2 +-
 .../settings/SettingsSideBarHeader.tsx        |   2 +-
 .../settings/side-bar-row/SideBarRow.tsx      |   6 +-
 .../settings/side-bar-row/getDataFactory.ts   |   8 +-
 .../settings/side-bar-row/sideBarRow.test.tsx |   4 +-
 app/src/data/icons.tsx                        | 616 ++++++++++--------
 .../login/LoginForm/LoginForm.test.tsx        |  12 +-
 .../authentication/login/schema/login.ts      |   5 +-
 .../authentication/oauth/LoginWith.test.tsx   |   2 +-
 .../authentication/oauth/hooks/useOauth.ts    |   2 +-
 .../authentication/oauth/services/apiOauth.ts |   3 +-
 .../signup/ConfirmationEmailModal.tsx         |   2 +-
 app/src/features/chats/ChatBox.tsx            |   2 +-
 app/src/features/chats/ChatInput.tsx          |   2 +-
 app/src/features/chats/Message.tsx            |  21 +-
 app/src/features/chats/MessageBox.tsx         |   6 +-
 app/src/features/chats/ReplyWrapper.tsx       |   1 -
 app/src/features/chats/Topbar.tsx             |   2 +-
 app/src/features/chats/helpers.ts             |   2 +-
 app/src/features/chats/hooks/useChats.ts      |   3 +-
 .../features/chats/hooks/useFetchNextPage.ts  |   2 +-
 .../features/chats/hooks/useFetchNextPage.tsx |   2 +-
 .../features/chats/hooks/useMessageSender.ts  |   2 +-
 .../chats/hooks/useOptionListAction.ts        |   2 +-
 .../chats/services/apiFetchNextPage.ts        |   3 +-
 app/src/features/devices/Devices.tsx          |   6 +-
 app/src/features/forward/ScrollableChats.tsx  |   2 +-
 .../components/PinnedMessages.tsx             |   2 +-
 .../privacy-settings/AddToBlockMenuList.tsx   |   4 +-
 .../privacy-settings/hooks/useBlock.ts        |   6 +-
 app/src/features/profile-info/ProfileInfo.tsx |  10 +-
 .../profile-info/components/ProfileItem.tsx   |   9 +-
 .../profile-settings/ProfileSettings.tsx      |   9 +-
 .../hooks/useScrollToSearchResultsMsg.ts      |   9 +-
 .../features/stories/components/StoryList.tsx |   6 +-
 .../stories/components/StoryListContainer.tsx |   4 +-
 .../stories/components/StorySlide.tsx         |   6 +-
 .../stories/components/StorySlideCounter.tsx  |   3 +-
 app/src/hooks/useIndexedDB.ts                 |   4 +-
 app/src/hooks/useMouseLeave.ts                |   4 +-
 app/src/main.tsx                              |   2 +-
 app/src/mocks/chats/media.ts                  |   4 +-
 app/src/mocks/chats/pagination.ts             |   2 +-
 app/src/mocks/data/blocklist.ts               |   2 +-
 app/src/mocks/oauth/oauth.ts                  |   4 +-
 .../mocks/privacy-settings/privacySettings.ts |   7 +-
 .../mocks/profile-settings/profile-picture.ts |   6 +-
 app/src/mocks/stories/stories.ts              |  32 +-
 app/src/mocks/userauth/login.ts               |  12 +-
 app/src/mocks/userauth/resetpassword.ts       |  12 +-
 app/src/mocks/userauth/signup.ts              |   6 +-
 app/src/mocks/userauth/verfiyEmail.ts         |  12 +-
 app/src/sockets/SocketProvider.tsx            |  41 +-
 app/src/state/messages/chats.ts               |  27 +-
 app/src/state/side-bar/sideBar.ts             |   4 +-
 app/src/utils/renderWithHighlight.tsx         |   8 +-
 app/src/utils/socket.tsx                      |   4 +-
 telware-frontend.tmux                         |  23 +
 72 files changed, 697 insertions(+), 601 deletions(-)
 create mode 100755 telware-frontend.tmux

diff --git a/app/package.json b/app/package.json
index 01c4f2ee..ddbee848 100644
--- a/app/package.json
+++ b/app/package.json
@@ -8,6 +8,7 @@
     "build": "tsc -b && vite build",
     "build-ignore": "vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "static-analysis": "node src/utils/static-analysis-script.js",
     "preview": "vite preview",
     "test": "jest",
diff --git a/app/public/mockServiceWorker.js b/app/public/mockServiceWorker.js
index fead0b3f..7c0ee718 100644
--- a/app/public/mockServiceWorker.js
+++ b/app/public/mockServiceWorker.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* tslint:disable */
 
 /**
diff --git a/app/src/components/CloseButton.tsx b/app/src/components/CloseButton.tsx
index 639c7bed..c29adf99 100644
--- a/app/src/components/CloseButton.tsx
+++ b/app/src/components/CloseButton.tsx
@@ -13,7 +13,6 @@ const StyledCloseButton = styled.div`
   color: white;
 
   z-index: 2;
-
 `;
 
 function CloseButton(props: CloseButtonProps) {
diff --git a/app/src/components/ImageEditor.tsx b/app/src/components/ImageEditor.tsx
index 31bb9322..794b14f4 100644
--- a/app/src/components/ImageEditor.tsx
+++ b/app/src/components/ImageEditor.tsx
@@ -1,7 +1,43 @@
-import FilerobotImageEditor, {
-  TABS,
-  TOOLS,
-} from "react-filerobot-image-editor";
+import { lazy, Suspense } from "react";
+
+const FilerobotImageEditor = lazy(() => import("react-filerobot-image-editor"));
+
+const TABS = {
+  FINETUNE: "Finetune",
+  FILTERS: "Filters",
+  ADJUST: "Adjust",
+  WATERMARK: "Watermark",
+  ANNOTATE: "Annotate",
+  RESIZE: "Resize",
+} as const;
+
+const TOOLS = {
+  CROP: "Crop",
+  ROTATE: "Rotate",
+  FLIP_X: "Flip_X",
+  FLIP_Y: "Flip_Y",
+  BRIGHTNESS: "Brightness",
+  CONTRAST: "Contrast",
+  HSV: "HueSaturationValue",
+  WARMTH: "Warmth",
+  BLUR: "Blur",
+  THRESHOLD: "Threshold",
+  POSTERIZE: "Posterize",
+  PIXELATE: "Pixelate",
+  NOISE: "Noise",
+  FILTERS: "Filters",
+  RECT: "Rect",
+  ELLIPSE: "Ellipse",
+  POLYGON: "Polygon",
+  TEXT: "Text",
+  LINE: "Line",
+  IMAGE: "Image",
+  ARROW: "Arrow",
+  WATERMARK: "Watermark",
+  PEN: "Pen",
+  RESIZE: "Resize",
+} as const;
+
 import styled from "styled-components";
 
 interface imageEditorProps {
@@ -73,79 +109,81 @@ function ImageEditor({
             $heightRatio: heightRatio,
           }}
         >
-          <FilerobotImageEditor
-            source={src}
-            forceToPngInEllipticalCrop={true}
-            onSave={(editedImageObject) => handleSave(editedImageObject)}
-            onClose={closeImgEditor}
-            annotationsCommon={{
-              fill: "#ff0000",
-            }}
-            Text={{ text: "I Love TelWare" }}
-            Rotate={{ angle: 90, componentType: "slider" }}
-            Crop={
-              isProfileImage
-                ? {
-                    ratio: 1,
-                  }
-                : {
-                    presetsItems: [
-                      {
-                        titleKey: "classicTv",
-                        descriptionKey: "4:3",
-                        ratio: 4 / 3,
-                      },
-                      {
-                        titleKey: "cinemascope",
-                        descriptionKey: "21:9",
-                        ratio: 21 / 9,
-                      },
-                    ],
-                    presetsFolders: [
-                      {
-                        titleKey: "socialMedia",
-                        groups: [
-                          {
-                            titleKey: "facebook",
-                            items: [
-                              {
-                                titleKey: "profile",
-                                width: 180,
-                                height: 180,
-                                descriptionKey: "fbProfileSize",
-                              },
-                              {
-                                titleKey: "coverPhoto",
-                                width: 820,
-                                height: 312,
-                                descriptionKey: "fbCoverPhotoSize",
-                              },
-                            ],
-                          },
-                        ],
-                      },
-                    ],
-                  }
-            }
-            theme={{
-              palette: {
-                warning: "#ff0000c0",
-                "warning-active": "#ff0000",
-                "warning-hover": "#ff0000",
-              },
-            }}
-            tabsIds={
-              isProfileImage
-                ? [TABS.ADJUST]
-                : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE]
-            }
-            defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
-            defaultToolId={TOOLS.RESIZE}
-            defaultSavedImageQuality={0.95}
-            savingPixelRatio={4}
-            previewPixelRatio={4}
-            data-testid="image-editor"
-          />
+          <Suspense fallback={<div>Loading...</div>}>
+            <FilerobotImageEditor
+              source={src}
+              forceToPngInEllipticalCrop={true}
+              onSave={(editedImageObject) => handleSave(editedImageObject)}
+              onClose={closeImgEditor}
+              annotationsCommon={{
+                fill: "#ff0000",
+              }}
+              Text={{ text: "I Love TelWare" }}
+              Rotate={{ angle: 90, componentType: "slider" }}
+              Crop={
+                isProfileImage
+                  ? {
+                      ratio: 1,
+                    }
+                  : {
+                      presetsItems: [
+                        {
+                          titleKey: "classicTv",
+                          descriptionKey: "4:3",
+                          ratio: 4 / 3,
+                        },
+                        {
+                          titleKey: "cinemascope",
+                          descriptionKey: "21:9",
+                          ratio: 21 / 9,
+                        },
+                      ],
+                      presetsFolders: [
+                        {
+                          titleKey: "socialMedia",
+                          groups: [
+                            {
+                              titleKey: "facebook",
+                              items: [
+                                {
+                                  titleKey: "profile",
+                                  width: 180,
+                                  height: 180,
+                                  descriptionKey: "fbProfileSize",
+                                },
+                                {
+                                  titleKey: "coverPhoto",
+                                  width: 820,
+                                  height: 312,
+                                  descriptionKey: "fbCoverPhotoSize",
+                                },
+                              ],
+                            },
+                          ],
+                        },
+                      ],
+                    }
+              }
+              theme={{
+                palette: {
+                  warning: "#ff0000c0",
+                  "warning-active": "#ff0000",
+                  "warning-hover": "#ff0000",
+                },
+              }}
+              tabsIds={
+                isProfileImage
+                  ? [TABS.ADJUST]
+                  : [TABS.ADJUST, TABS.ANNOTATE, TABS.FINETUNE]
+              }
+              defaultTabId={isProfileImage ? TABS.ADJUST : TABS.ANNOTATE}
+              defaultToolId={TOOLS.RESIZE}
+              defaultSavedImageQuality={0.95}
+              savingPixelRatio={4}
+              previewPixelRatio={4}
+              data-testid="image-editor"
+            />
+          </Suspense>
         </StyledContainer>
       )}
     </StyledBackGround>
diff --git a/app/src/components/Popup.tsx b/app/src/components/Popup.tsx
index 55619678..d7c270ba 100644
--- a/app/src/components/Popup.tsx
+++ b/app/src/components/Popup.tsx
@@ -38,7 +38,7 @@ function Popup({ onClose, isOpen, children }: PopupProps) {
         {children}
       </PopupContainer>
     </PopupOverlay>,
-    document.body
+    document.body,
   );
 }
 export default Popup;
diff --git a/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx b/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx
index a09423f7..2adfc18c 100644
--- a/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx
+++ b/app/src/components/inputs/float-label-input/FloatingLabelInputDemo.tsx
@@ -84,7 +84,7 @@ const validationSchema = yup.object({
     .min(8, "Password must be at least 8 characters")
     .matches(
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
-      "Password must contain at least one uppercase letter, one lowercase letter, and one number"
+      "Password must contain at least one uppercase letter, one lowercase letter, and one number",
     ),
   maxLengthInput: yup.string().max(20, "Maximum 20 characters allowed"),
   numberInput: yup
diff --git a/app/src/components/inputs/input-field/CodeInputField.tsx b/app/src/components/inputs/input-field/CodeInputField.tsx
index daf6c368..929f83f9 100644
--- a/app/src/components/inputs/input-field/CodeInputField.tsx
+++ b/app/src/components/inputs/input-field/CodeInputField.tsx
@@ -32,7 +32,7 @@ interface CodeInputFieldProps {
 function CodeInputField({ code, setCode, ...rest }: CodeInputFieldProps) {
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement>,
-    index: number
+    index: number,
   ) => {
     const newCode = [...code];
     newCode[index] = e.target.value.slice(0, 1);
diff --git a/app/src/components/inputs/input-field/InputField.test.tsx b/app/src/components/inputs/input-field/InputField.test.tsx
index 86d3155d..c177406b 100644
--- a/app/src/components/inputs/input-field/InputField.test.tsx
+++ b/app/src/components/inputs/input-field/InputField.test.tsx
@@ -21,7 +21,7 @@ describe("InputField", () => {
         register={mockRegister}
         error={undefined}
         type={type}
-      />
+      />,
     );
 
     const input = screen.getByLabelText(label);
@@ -37,7 +37,7 @@ describe("InputField", () => {
         id={id}
         register={mockRegister}
         error={undefined}
-      />
+      />,
     );
 
     expect(mockRegister).toHaveBeenCalledWith(id);
@@ -50,7 +50,7 @@ describe("InputField", () => {
         id={id}
         register={mockRegister}
         error={errorMessage}
-      />
+      />,
     );
 
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe("InputField", () => {
         id={id}
         register={mockRegister}
         error={undefined}
-      />
+      />,
     );
 
     const input = screen.getByLabelText(label);
@@ -79,7 +79,7 @@ describe("InputField", () => {
         register={mockRegister}
         error={undefined}
         placeholder={placeholder}
-      />
+      />,
     );
 
     const input = screen.getByLabelText(label);
diff --git a/app/src/components/inputs/radio-input/RadioInput.test.tsx b/app/src/components/inputs/radio-input/RadioInput.test.tsx
index 139e442f..9308e815 100644
--- a/app/src/components/inputs/radio-input/RadioInput.test.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.test.tsx
@@ -63,13 +63,13 @@ describe("RadioInput", () => {
     render(renderWithStore(<SettingsUpdate {...data} />));
 
     expect(
-      (screen.getByLabelText("Option 2") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 2") as HTMLInputElement).checked,
     ).toBe(true);
     expect(
-      (screen.getByLabelText("Option 1") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 1") as HTMLInputElement).checked,
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
     ).toBe(false);
   });
 
@@ -82,20 +82,20 @@ describe("RadioInput", () => {
     render(renderWithStore(<SettingsUpdate {...data} />));
 
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
     ).toBe(false);
 
     const option3RadioButton = screen.getByLabelText("Option 3");
     fireEvent.click(option3RadioButton);
 
     expect(
-      (screen.getByLabelText("Option 2") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 2") as HTMLInputElement).checked,
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 1") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 1") as HTMLInputElement).checked,
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
     ).toBe(true);
   });
 
@@ -108,13 +108,13 @@ describe("RadioInput", () => {
     render(renderWithStore(<SettingsUpdate {...data} />));
 
     expect(
-      (screen.getByLabelText("Option 1") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 1") as HTMLInputElement).checked,
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 2") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 2") as HTMLInputElement).checked,
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
     ).toBe(false);
   });
 });
diff --git a/app/src/components/inputs/radio-input/RadioInput.tsx b/app/src/components/inputs/radio-input/RadioInput.tsx
index c86b2f47..a897a9ce 100644
--- a/app/src/components/inputs/radio-input/RadioInput.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.tsx
@@ -103,7 +103,7 @@ function RadioInput({ state, data, updateFnType }: RadioInputProps) {
     dispatch(updateFn(payload));
   }
 
-  let selectedValue = watch(data.id);
+  const selectedValue = watch(data.id);
 
   useEffect(() => {
     const payload = { key: data.id, value: selectedValue };
diff --git a/app/src/components/protected-route/ProtectedRoute.test.tsx b/app/src/components/protected-route/ProtectedRoute.test.tsx
index 51ac0e02..7878231d 100644
--- a/app/src/components/protected-route/ProtectedRoute.test.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.test.tsx
@@ -20,7 +20,7 @@ describe("ProtectedRoute", () => {
     render(
       <ProtectedRoute>
         <MockChildComponent />
-      </ProtectedRoute>
+      </ProtectedRoute>,
     );
 
     const protectedContent = screen.getByText(/protected content/i);
@@ -33,7 +33,7 @@ describe("ProtectedRoute", () => {
     render(
       <ProtectedRoute>
         <MockChildComponent />
-      </ProtectedRoute>
+      </ProtectedRoute>,
     );
 
     const protectedContent = screen.queryByText(/protected content/i);
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index 77522df2..3ea94d2e 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -1,5 +1,5 @@
+import { getIcon } from "@data/icons";
 import styled from "styled-components";
-import { SearchOutlined } from "@mui/icons-material";
 
 const StyledSearchBar = styled.div`
   margin-left: 1rem;
@@ -11,13 +11,15 @@ const StyledSearchBar = styled.div`
   }
 `;
 
-const StyledSearchIcon = styled(SearchOutlined)`
-  position: absolute;
-  left: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-text-secondary);
-  font-size: 1.2rem;
+const StyledSearchIcon = styled.div`
+  > svg {
+    position: absolute;
+    left: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--color-text-secondary);
+    font-size: 1.2rem;
+  }
 `;
 
 const StyledInput = styled.input`
@@ -48,7 +50,9 @@ function SearchBar() {
         placeholder="Search"
         data-testid="general-search"
       />
-      <StyledSearchIcon data-testid="general-serach-icon" />
+      <StyledSearchIcon data-testid="general-serach-icon">
+        {getIcon("Search")}
+      </StyledSearchIcon>
     </StyledSearchBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index ae9590dd..7bfe15e8 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import styled from "styled-components";
-import { MenuOutlined } from "@mui/icons-material";
 import ThemeToggle from "./theme-toggle/ThemeToggle";
 import { useAppDispatch } from "@hooks/useGlobalState";
 import { toggleTheme } from "@state/theme/theme";
@@ -8,14 +7,17 @@ import SideBarMenuItem from "./SideBarMenuItem";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "@data/sideBar";
 import { useMouseLeave } from "@hooks/useMouseLeave";
+import { getIcon } from "@data/icons";
 
-const StyledToolsIcon = styled(MenuOutlined)`
-  color: var(--color-icon-secondary);
-  border-radius: var(--border-radius-modal);
-  padding: 0.3rem;
-  &:hover {
-    cursor: pointer;
-    background-color: var(--color-background-compact-menu-hover);
+const StyledToolsIcon = styled.div`
+  > svg {
+    color: var(--color-icon-secondary);
+    border-radius: var(--border-radius-modal);
+    padding: 0.3rem;
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-background-compact-menu-hover);
+    }
   }
 `;
 
@@ -36,7 +38,6 @@ const StyledList = styled.ul<{ $isOpened?: boolean }>`
   visibility: ${({ $isOpened }) => ($isOpened ? "visible" : "hidden")};
 
   z-index: 2;
-
 `;
 
 function SettingsToolbar() {
@@ -50,9 +51,10 @@ function SettingsToolbar() {
     <>
       <StyledToolsIcon
         onClick={handleOpenSettings}
-        fontSize="large"
         data-testid="menu-items-icon"
-      />
+      >
+        {getIcon("Menu")}
+      </StyledToolsIcon>
       {isOpened && (
         <StyledList
           $isOpened={isOpened}
@@ -67,7 +69,7 @@ function SettingsToolbar() {
                 updateSideBarView({
                   redirect: sideBarPages.CONTACTS,
                   data: undefined,
-                })
+                }),
               )
             }
           />
@@ -80,7 +82,7 @@ function SettingsToolbar() {
                 updateSideBarView({
                   redirect: sideBarPages.SETTINGS,
                   data: undefined,
-                })
+                }),
               )
             }
           />
diff --git a/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx b/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx
index 40824000..f8ae4351 100644
--- a/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx
+++ b/app/src/components/side-bar/chats/theme-toggle/ToggleMode.test.tsx
@@ -8,7 +8,7 @@ describe("ThemeToggle Component", () => {
 
     const slider = screen.getByTestId("toggle-mode-slider");
     const checkbox = screen.getByTestId(
-      "toggle-mode-checkbox"
+      "toggle-mode-checkbox",
     ) as HTMLInputElement;
 
     expect(checkbox.checked).toBe(true);
@@ -19,7 +19,7 @@ describe("ThemeToggle Component", () => {
     render(renderWithStore(<ThemeToggle />));
 
     const checkbox = screen.getByTestId(
-      "toggle-mode-checkbox"
+      "toggle-mode-checkbox",
     ) as HTMLInputElement;
 
     fireEvent.click(checkbox);
diff --git a/app/src/components/side-bar/settings/OptionsList.tsx b/app/src/components/side-bar/settings/OptionsList.tsx
index 4de7b4fe..93a4c034 100644
--- a/app/src/components/side-bar/settings/OptionsList.tsx
+++ b/app/src/components/side-bar/settings/OptionsList.tsx
@@ -32,7 +32,7 @@ function getKey(
     | permissionSettingsID
     | undefined,
   type: StatusType | undefined,
-  index: number
+  index: number,
 ) {
   let key;
   if (status !== undefined && type !== undefined) {
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index 200df55e..26979148 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -52,7 +52,7 @@ function SettingsSideBarHeader() {
             $bgColor="var(--color-pattern)"
             onClick={() =>
               dispatch(
-                updateSideBarView({ redirect: sideBarPages.PROFILE_UPDATE })
+                updateSideBarView({ redirect: sideBarPages.PROFILE_UPDATE }),
               )
             }
           />
diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index a9c2a2dd..284d270c 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -95,7 +95,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
             setCurrStatus(
               userData?.privacySettings?.[
                 key as keyof privacySettingsInterface
-              ] || "everyone"
+              ] || "everyone",
             );
           break;
         case StatusType.ACTIVITY:
@@ -103,7 +103,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
           setCurrStatus(
             userData?.activitySettings?.[
               key as keyof activitySettingsInterface
-            ] || "everyone"
+            ] || "everyone",
           );
           break;
         case StatusType.PERMISSION:
@@ -111,7 +111,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
           setCurrStatus(
             userData?.permissionSettings?.[
               key as keyof permissionsSettingsInterface
-            ] || "everyone"
+            ] || "everyone",
           );
           break;
         default:
diff --git a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
index 7ec5db16..2617b509 100644
--- a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
+++ b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
@@ -17,7 +17,7 @@ function ExtractData(
     | privacySettingsID
     | activitySettingsID
     | permissionSettingsID
-    | undefined
+    | undefined,
 ): DataInterface {
   switch (type) {
     case StatusType.PRIVACY:
@@ -37,7 +37,7 @@ interface DataInterface {
 
 function getPrivacyData(
   privacyStatus: privacySettingsID | undefined,
-  currStatus: string | undefined
+  currStatus: string | undefined,
 ): DataInterface {
   return {
     getData: () => {
@@ -78,7 +78,7 @@ function getPrivacyData(
 
 function getActivityData(
   activityStatus: activitySettingsID | undefined,
-  currStatus: string | undefined
+  currStatus: string | undefined,
 ): DataInterface {
   return {
     getData: () => {
@@ -119,7 +119,7 @@ function getActivityData(
 
 function getPermissionData(
   permissionStatus: permissionSettingsID | undefined,
-  currStatus: string | undefined
+  currStatus: string | undefined,
 ): DataInterface {
   return {
     getData: () => {
diff --git a/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx b/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx
index ab46cd43..df21bbeb 100644
--- a/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/sideBarRow.test.tsx
@@ -85,7 +85,7 @@ describe("SideBarRow", () => {
     expect(mockDispatch).toHaveBeenCalledWith(
       updateSideBarView({
         redirect: 1,
-      })
+      }),
     );
   });
 
@@ -130,7 +130,7 @@ describe("SideBarRow", () => {
           state: expect.any(String),
           data: expect.any(Object),
         }),
-      })
+      }),
     );
   });
 });
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 6d734452..a7d53e26 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -1,48 +1,6 @@
-import BlockIcon from "@mui/icons-material/Block";
-import NotificationsOutlinedIcon from "@mui/icons-material/NotificationsOutlined";
-import HttpsOutlinedIcon from "@mui/icons-material/HttpsOutlined";
-import DevicesOutlinedIcon from "@mui/icons-material/DevicesOutlined";
-import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
-import ArrowBackOutlinedIcon from "@mui/icons-material/ArrowBackOutlined";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
-import NightlightOutlinedIcon from "@mui/icons-material/NightlightOutlined";
-import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
-import CampaignOutlinedIcon from "@mui/icons-material/CampaignOutlined";
-import PersonAddAltOutlinedIcon from "@mui/icons-material/PersonAddAltOutlined";
-import LogoutIcon from "@mui/icons-material/Logout";
-import PersonIcon from "@mui/icons-material/Person";
-import EditIcon from "@mui/icons-material/Edit";
-import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
-import AddIcon from "@mui/icons-material/Add";
-import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import NoEncryptionOutlinedIcon from "@mui/icons-material/NoEncryptionOutlined";
-import KeyboardVoiceIcon from "@mui/icons-material/KeyboardVoice";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import SentimentSatisfiedAltIcon from "@mui/icons-material/SentimentSatisfiedAlt";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import LocalPhoneIcon from "@mui/icons-material/LocalPhone";
-import SearchIcon from "@mui/icons-material/Search";
-import AddAPhotoOutlined from "@mui/icons-material/AddAPhotoOutlined";
-import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
-import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import CircularProgress from "@mui/material/CircularProgress";
-import KeyboardArrowLeftOutlinedIcon from "@mui/icons-material/KeyboardArrowLeftOutlined";
-import KeyboardArrowRightOutlinedIcon from "@mui/icons-material/KeyboardArrowRightOutlined";
-import SendIcon from "@mui/icons-material/Send";
-import ReplyOutlinedIcon from "@mui/icons-material/ReplyOutlined";
-import ShortcutIcon from "@mui/icons-material/Shortcut";
-import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
-import PinIcon from "@mui/icons-material/Pin";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
-import GifBoxOutlinedIcon from "@mui/icons-material/GifBoxOutlined";
-import EmojiEmotionsOutlinedIcon from "@mui/icons-material/EmojiEmotionsOutlined";
-import StickyNote2OutlinedIcon from "@mui/icons-material/StickyNote2Outlined";
+import React, { lazy, Suspense } from "react";
+import { SxProps } from "@mui/material/styles";
+
 enum icons {
   BlockIcon,
   SettingsOutlinedIcon,
@@ -91,286 +49,372 @@ enum icons {
   GifBox,
   EmojiBox,
   StickerBox,
+  Menu,
+  DoDisturb,
+  Check,
+  AlternateEmailTwoTone,
+  Email,
+  Info,
+  Phone,
 }
 
 type iconStrings = keyof typeof icons;
 
-const iconMap: { [K in iconStrings]: React.ReactNode } = {
-  BlockIcon: <BlockIcon sx={{ color: `var(--color-icon-secondary)` }} />,
-  SettingsOutlinedIcon: (
-    <SettingsOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  NotificationsOutlinedIcon: (
-    <NotificationsOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  HttpsOutlinedIcon: (
-    <HttpsOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  DevicesOutlinedIcon: (
-    <DevicesOutlinedIcon sx={{ color: `var(--color-icon-secondary)` }} />
-  ),
-  BackArrow: (
-    <ArrowBackOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Contacts: (
-    <PersonOutlineOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Settings: (
-    <SettingsOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  NightMode: (
-    <NightlightOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Add: (
-    <AddIcon fontSize="large" sx={{ color: `var(--color-search-border)` }} />
-  ),
-  Edit: <EditIcon sx={{ color: `var(--color-icon-secondary)` }} />,
-  AddStory: (
-    <PhotoCameraIcon
-      fontSize="large"
-      sx={{ color: `var(--color-search-border)` }}
-    />
-  ),
-  Logout: (
-    <LogoutIcon
-      fontSize="large"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  ProflePicture: (
-    <PersonIcon fontSize="large" sx={{ color: `var(--color-background)` }} />
-  ),
-  NewGroup: (
-    <GroupOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  NewChannel: (
-    <CampaignOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  NewChat: (
-    <PersonAddAltOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Show: (
-    <VisibilityIcon
-      fontSize="medium"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  Hide: (
-    <VisibilityOffIcon
-      fontSize="medium"
-      sx={{ color: `var(--color-icon-secondary)` }}
-    />
-  ),
-  Close: (
-    <CloseOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-        fontSize: "1.75rem",
-      }}
-    />
-  ),
-  Unlock: (
-    <NoEncryptionOutlinedIcon
-      sx={{
-        color: `var(--color-icon-secondary)`,
-      }}
-    />
-  ),
-  Record: <KeyboardVoiceIcon sx={{ fontSize: "1rem" }} />,
-  Attatch: (
-    <AttachFileIcon
-      sx={{
+type IconConfig = {
+  importFn: () => Promise<{
+    default: React.ComponentType<object>;
+  }>;
+  defaultProps?: {
+    sx?: SxProps;
+    fontSize?: "small" | "medium" | "large";
+    style?: React.CSSProperties;
+  };
+};
+
+const iconImports: Record<iconStrings, IconConfig> = {
+  BlockIcon: {
+    importFn: () => import("@mui/icons-material/Block"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  SettingsOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/SettingsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NotificationsOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/NotificationsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  HttpsOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/HttpsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  DevicesOutlinedIcon: {
+    importFn: () => import("@mui/icons-material/DevicesOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  BackArrow: {
+    importFn: () => import("@mui/icons-material/ArrowBackOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Contacts: {
+    importFn: () => import("@mui/icons-material/PersonOutlineOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Settings: {
+    importFn: () => import("@mui/icons-material/SettingsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NightMode: {
+    importFn: () => import("@mui/icons-material/NightlightOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Add: {
+    importFn: () => import("@mui/icons-material/Add"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-search-border)` },
+    },
+  },
+  Edit: {
+    importFn: () => import("@mui/icons-material/Edit"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  AddStory: {
+    importFn: () => import("@mui/icons-material/PhotoCamera"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-search-border)` },
+    },
+  },
+  Logout: {
+    importFn: () => import("@mui/icons-material/Logout"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-icon-secondary)` },
+    },
+  },
+  ProflePicture: {
+    importFn: () => import("@mui/icons-material/Person"),
+    defaultProps: {
+      fontSize: "large",
+      sx: { color: `var(--color-background)` },
+    },
+  },
+  NewGroup: {
+    importFn: () => import("@mui/icons-material/GroupOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NewChannel: {
+    importFn: () => import("@mui/icons-material/CampaignOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  NewChat: {
+    importFn: () => import("@mui/icons-material/PersonAddAltOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Show: {
+    importFn: () => import("@mui/icons-material/Visibility"),
+    defaultProps: {
+      fontSize: "medium",
+      sx: { color: `var(--color-icon-secondary)` },
+    },
+  },
+  Hide: {
+    importFn: () => import("@mui/icons-material/VisibilityOff"),
+    defaultProps: {
+      fontSize: "medium",
+      sx: { color: `var(--color-icon-secondary)` },
+    },
+  },
+  Close: {
+    importFn: () => import("@mui/icons-material/CloseOutlined"),
+    defaultProps: {
+      sx: { color: `var(--color-icon-secondary)`, fontSize: "1.75rem" },
+    },
+  },
+  Unlock: {
+    importFn: () => import("@mui/icons-material/NoEncryptionOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Record: {
+    importFn: () => import("@mui/icons-material/KeyboardVoice"),
+    defaultProps: { fontSize: "medium" },
+  },
+  Attatch: {
+    importFn: () => import("@mui/icons-material/AttachFile"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-
-  Emojie: (
-    <SentimentSatisfiedAltIcon
-      sx={{
+      },
+    },
+  },
+  Emojie: {
+    importFn: () => import("@mui/icons-material/SentimentSatisfiedAlt"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  More: (
-    <MoreVertIcon
-      sx={{
+      },
+    },
+  },
+  More: {
+    importFn: () => import("@mui/icons-material/MoreVert"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  Search: (
-    <SearchIcon
-      sx={{
+      },
+    },
+  },
+  Search: {
+    importFn: () => import("@mui/icons-material/Search"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  Call: (
-    <LocalPhoneIcon
-      sx={{
+      },
+    },
+  },
+  Call: {
+    importFn: () => import("@mui/icons-material/LocalPhone"),
+    defaultProps: {
+      sx: {
         cursor: "pointer",
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  AddPhoto: <AddAPhotoOutlined fontSize="large" />,
-  Delete: (
-    <DeleteOutlineOutlinedIcon
-      sx={{
-        color: "white",
-      }}
-    />
-  ),
-  Send: <SendIcon />,
-  Pause: <PauseOutlinedIcon />,
-  Play: <PlayArrowIcon />,
-  CalendarToday: (
-    <CalendarTodayIcon
-      sx={{
+      },
+    },
+  },
+  AddPhoto: {
+    importFn: () => import("@mui/icons-material/AddAPhotoOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  Delete: {
+    importFn: () => import("@mui/icons-material/DeleteOutlineOutlined"),
+    defaultProps: { sx: { color: "white" } },
+  },
+  Send: {
+    importFn: () => import("@mui/icons-material/Send"),
+    defaultProps: {},
+  },
+  Pause: {
+    importFn: () => import("@mui/icons-material/PauseOutlined"),
+    defaultProps: {},
+  },
+  Play: {
+    importFn: () => import("@mui/icons-material/PlayArrow"),
+    defaultProps: {},
+  },
+  CalendarToday: {
+    importFn: () => import("@mui/icons-material/CalendarToday"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  ContentCopy: (
-    <ContentCopyIcon
-      sx={{
+      },
+    },
+  },
+  ContentCopy: {
+    importFn: () => import("@mui/icons-material/ContentCopy"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  KeyboardArrowUp: (
-    <KeyboardArrowUpIcon
-      sx={{
+      },
+    },
+  },
+  KeyboardArrowUp: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowUp"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  KeyboardArrowDown: (
-    <KeyboardArrowDownIcon
-      sx={{
+      },
+    },
+  },
+  KeyboardArrowDown: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowDown"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  CircularProgress: (
-    <CircularProgress
-      sx={{
+      },
+    },
+  },
+  CircularProgress: {
+    importFn: () => import("@mui/material/CircularProgress"),
+    defaultProps: {
+      sx: {
         color: `var(--accent-color)`,
         fontSize: "1.5rem",
-      }}
-      style={{ width: "1.5rem", height: "1.5rem" }}
-    />
-  ),
-  RightArrow: (
-    <KeyboardArrowRightOutlinedIcon
-      sx={{
+      },
+      style: { width: "1.5rem", height: "1.5rem" },
+    },
+  },
+  RightArrow: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowRightOutlined"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "3.5rem",
-      }}
-    />
-  ),
-  LeftArrow: (
-    <KeyboardArrowLeftOutlinedIcon
-      sx={{
+      },
+    },
+  },
+  LeftArrow: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowLeftOutlined"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "3.5rem",
-      }}
-    />
-  ),
-
-  Forward: (
-    <ShortcutIcon
-      sx={{
+      },
+    },
+  },
+  Forward: {
+    importFn: () => import("@mui/icons-material/Shortcut"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "1.75rem",
-      }}
-    />
-  ),
-
-  MessagingOptions: <KeyboardArrowDownIcon />,
-  Pin: (
-    <PinIcon
-      sx={{
+      },
+    },
+  },
+  MessagingOptions: {
+    importFn: () => import("@mui/icons-material/KeyboardArrowDown"),
+    defaultProps: {},
+  },
+  Pin: {
+    importFn: () => import("@mui/icons-material/Pin"),
+    defaultProps: {
+      sx: {
         color: `var(--color-icon-secondary)`,
         fontSize: "1.5rem",
-      }}
-    />
-  ),
-  Reply: <ReplyOutlinedIcon />,
-  PushPin: (
-    <PushPinOutlinedIcon
-      sx={{
-        fontSize: "0.9rem",
-      }}
-    />
-  ),
-  GifBox: (
-    <GifBoxOutlinedIcon
-      sx={{
-        fontSize: "1.5rem",
-      }}
-    />
-  ),
-  EmojiBox: (
-    <EmojiEmotionsOutlinedIcon
-      sx={{
-        fontSize: "1.5rem",
-      }}
-    />
-  ),
-  StickerBox: (
-    <StickyNote2OutlinedIcon
-      sx={{
-        fontSize: "1.5rem",
-      }}
-    />
-  ),
+      },
+    },
+  },
+  Reply: {
+    importFn: () => import("@mui/icons-material/ReplyOutlined"),
+    defaultProps: {},
+  },
+  PushPin: {
+    importFn: () => import("@mui/icons-material/PushPinOutlined"),
+    defaultProps: { fontSize: "small" },
+  },
+  GifBox: {
+    importFn: () => import("@mui/icons-material/GifBoxOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  EmojiBox: {
+    importFn: () => import("@mui/icons-material/EmojiEmotionsOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  StickerBox: {
+    importFn: () => import("@mui/icons-material/StickyNote2Outlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  Menu: {
+    importFn: () => import("@mui/icons-material/MenuOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  Check: {
+    importFn: () => import("@mui/icons-material/Check"),
+    defaultProps: { fontSize: "large" },
+  },
+  DoDisturb: {
+    importFn: () => import("@mui/icons-material/DoDisturbOnOutlined"),
+    defaultProps: { fontSize: "large" },
+  },
+  AlternateEmailTwoTone: {
+    importFn: () => import("@mui/icons-material/AlternateEmailTwoTone"),
+    defaultProps: { fontSize: "large" },
+  },
+  Email: {
+    importFn: () => import("@mui/icons-material/Email"),
+    defaultProps: { fontSize: "large" },
+  },
+  Info: {
+    importFn: () => import("@mui/icons-material/Info"),
+    defaultProps: { fontSize: "large" },
+  },
+  Phone: {
+    importFn: () => import("@mui/icons-material/Phone"),
+    defaultProps: { fontSize: "large" },
+  },
 };
 
-function getIcon(iconName?: iconStrings) {
-  return iconName ? iconMap[iconName] : undefined;
+function getIcon(
+  iconName?: iconStrings,
+  customProps?: {
+    sx?: SxProps;
+    fontSize?: "small" | "medium" | "large";
+    style?: React.CSSProperties;
+  },
+) {
+  if (!iconName) return undefined;
+
+  const iconConfig = iconImports[iconName];
+  if (!iconConfig) return undefined;
+
+  const LazyIcon = lazy(iconConfig.importFn);
+
+  const mergedProps = {
+    ...iconConfig.defaultProps,
+    ...customProps,
+    sx: {
+      ...iconConfig.defaultProps?.sx,
+      ...customProps?.sx,
+    },
+  };
+
+  return (
+    <Suspense fallback={<div style={{ width: "24px", height: "24px" }}></div>}>
+      <LazyIcon {...mergedProps} />
+    </Suspense>
+  );
 }
 
 export { getIcon };
diff --git a/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx b/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
index be11446f..5f9bdd1d 100644
--- a/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
+++ b/app/src/features/authentication/login/LoginForm/LoginForm.test.tsx
@@ -21,7 +21,7 @@ describe("LoginForm", () => {
 
   const renderWithQueryClient = (ui: React.ReactElement) => {
     return render(
-      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>,
     );
   };
 
@@ -48,7 +48,7 @@ describe("LoginForm", () => {
     await waitFor(() => {
       expect(mockLogin).toHaveBeenCalledWith(
         { email: "test@example.com", password: "password123" },
-        expect.any(Object)
+        expect.any(Object),
       );
     });
   });
@@ -58,7 +58,7 @@ describe("LoginForm", () => {
     mockLogin.mockImplementation(
       (_, { onSettled } = { onSettled: jest.fn() }) => {
         onSettled(null, { message: errorMessage });
-      }
+      },
     );
 
     renderWithQueryClient(<LoginForm />);
@@ -109,7 +109,7 @@ describe("LoginForm", () => {
     renderWithQueryClient(<LoginForm />);
 
     expect(screen.getByRole("button")).toContainElement(
-      screen.getByTestId("spinner")
+      screen.getByTestId("spinner"),
     );
   });
 
@@ -138,10 +138,10 @@ describe("LoginForm", () => {
       expect(loginSuccess).toHaveBeenCalled();
 
       expect((screen.getByLabelText(/email/i) as HTMLInputElement).value).toBe(
-        ""
+        "",
       );
       expect(
-        (screen.getByLabelText(/password/i) as HTMLInputElement).value
+        (screen.getByLabelText(/password/i) as HTMLInputElement).value,
       ).toBe("");
     });
   });
diff --git a/app/src/features/authentication/login/schema/login.ts b/app/src/features/authentication/login/schema/login.ts
index bee76e3e..598d5f7f 100644
--- a/app/src/features/authentication/login/schema/login.ts
+++ b/app/src/features/authentication/login/schema/login.ts
@@ -1,6 +1,9 @@
 import * as yup from "yup";
 
 export const schema = yup.object({
-  email: yup.string().email("Please enter a valid email").required("Email is required"),
+  email: yup
+    .string()
+    .email("Please enter a valid email")
+    .required("Email is required"),
   password: yup.string().required("Password is required"),
 });
diff --git a/app/src/features/authentication/oauth/LoginWith.test.tsx b/app/src/features/authentication/oauth/LoginWith.test.tsx
index 3ddee61c..9e187845 100644
--- a/app/src/features/authentication/oauth/LoginWith.test.tsx
+++ b/app/src/features/authentication/oauth/LoginWith.test.tsx
@@ -19,7 +19,7 @@ describe("LoginWith Component", () => {
 
   test("calls onClick when the icon is clicked", () => {
     const iconElement = screen.getByAltText(
-      new RegExp(altText, "i")
+      new RegExp(altText, "i"),
     ).parentElement;
 
     fireEvent.click(iconElement!);
diff --git a/app/src/features/authentication/oauth/hooks/useOauth.ts b/app/src/features/authentication/oauth/hooks/useOauth.ts
index 7a761760..3d0afd61 100644
--- a/app/src/features/authentication/oauth/hooks/useOauth.ts
+++ b/app/src/features/authentication/oauth/hooks/useOauth.ts
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useOauthLogin } from "./useOauthLogin";
 
 export function useOauth() {
-  const { login } = useOauthLogin()
+  const { login } = useOauthLogin();
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
diff --git a/app/src/features/authentication/oauth/services/apiOauth.ts b/app/src/features/authentication/oauth/services/apiOauth.ts
index 2e0fc86a..1f1be9d0 100644
--- a/app/src/features/authentication/oauth/services/apiOauth.ts
+++ b/app/src/features/authentication/oauth/services/apiOauth.ts
@@ -1,10 +1,9 @@
 import { API_URL } from "@constants";
 
 export async function apiGoogleOauth() {
-   window.location.href = `${API_URL}/auth/oauth/google?platform=web`;
+  window.location.href = `${API_URL}/auth/oauth/google?platform=web`;
 }
 
 export async function apiGithubOauth() {
   window.location.href = `${API_URL}/auth/oauth/github?platform=web`;
 }
-
diff --git a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
index efc357e4..8f01278f 100644
--- a/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
+++ b/app/src/features/authentication/signup/ConfirmationEmailModal.tsx
@@ -132,7 +132,7 @@ function ConfirmationEmailModal({
         onError: (err: Error) => {
           setError(err.message);
         },
-      }
+      },
     );
   }
   function handleResendEmail() {
diff --git a/app/src/features/chats/ChatBox.tsx b/app/src/features/chats/ChatBox.tsx
index 9eaf0eb0..23965572 100644
--- a/app/src/features/chats/ChatBox.tsx
+++ b/app/src/features/chats/ChatBox.tsx
@@ -11,7 +11,7 @@ const Container = styled.div`
   flex-direction: column;
 
   height: 100%;
-`
+`;
 
 function ChatBox() {
   useCloseChat();
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 65530b10..79fc54b1 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -141,7 +141,7 @@ function ChatInput() {
     alert(error);
     setError("");
   }
-  
+
   return (
     <>
       {isFilePreviewOpen && file && (
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 8db3f1af..fd1e607c 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useRef } from "react";
 import styled from "styled-components";
 
 import { MessageInterface } from "types/messages";
@@ -9,7 +8,7 @@ import CheckBox from "@features/forward/checkBox";
 import MessageOptionList from "./MessageOptionList";
 import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
 
-import renderWithHighlight from "@utils/renderWithHighlight";
+import RenderWithHighlight from "@utils/renderWithHighlight";
 
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
@@ -127,14 +126,10 @@ const Details = styled.div`
 `;
 
 type MessageProps = {
-  index: number;
-  messagesLength: number;
   data: MessageInterface;
 };
 
 function Message({
-  index,
-  messagesLength,
   data: {
     _id: id,
     senderId,
@@ -147,20 +142,12 @@ function Message({
   },
 }: MessageProps) {
   const { searchTerm, searchResults } = useAppSelector((state) => state.search);
-
-  const mergedRef = useRef<HTMLDivElement>(null);
   const { lastMessageRef } = useScrollToLastMsg();
-  const { searchResultRef } = useScrollToSearchResultsMsg();
+  useScrollToSearchResultsMsg();
 
   const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
     useSocket();
 
-  // TODO: make merge ref util
-  useEffect(() => {
-    lastMessageRef.current =
-      index === messagesLength - 1 ? mergedRef.current : null;
-  }, [id, index, messagesLength, lastMessageRef, searchResultRef]);
-
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
     chatId,
     messageId: id,
@@ -194,7 +181,7 @@ function Message({
       )}
 
       <StyledMessage
-        ref={mergedRef}
+        ref={lastMessageRef}
         key={id}
         $isMine={senderId === userId}
         data-message-id={id}
@@ -218,7 +205,7 @@ function Message({
             {media && !(contentType === "GIF" || contentType === "sticker") && (
               <FileViewer file={media} />
             )}
-            {renderWithHighlight(content, searchTerm, searchResults, id)}
+            {RenderWithHighlight(content, searchTerm, searchResults, id)}
           </StyledCol>
 
           {isHovered && (
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index 970f2d57..7077e532 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -52,7 +52,7 @@ const StyledMessageBox = styled.div`
 
 function getMessageById(
   messageId: string,
-  messages?: MessageInterface[]
+  messages?: MessageInterface[],
 ): MessageInterface | undefined {
   return messages
     ? messages.find((message) => message._id === messageId)
@@ -60,7 +60,7 @@ function getMessageById(
 }
 
 function MessageBox({ messageId }: MessageBoxProps) {
-  let id = useAppSelector((state) => state.user.userInfo.id);
+  const id = useAppSelector((state) => state.user.userInfo.id);
   const { chats, members } = useAppSelector((state) => state.chats);
 
   const { chatId } = useParams<{ chatId: string }>();
@@ -84,7 +84,7 @@ function MessageBox({ messageId }: MessageBoxProps) {
   }
 
   const activeMessage = useAppSelector(
-    (state: RootState) => state.activeMessage
+    (state: RootState) => state.activeMessage,
   );
 
   return (
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index 1b8173d7..72cce171 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -36,7 +36,6 @@ export default function ReplyWrapper({ setInput }: Props) {
   }
 
   console.log(activeMessage);
-  
 
   return (
     <Container data-testid="reply-wrapper">
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index ac34c480..120c96d9 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -89,7 +89,7 @@ function Topbar() {
       })
     : undefined;
 
-  let membersData = useChatMembers(chat?.members);
+  const membersData = useChatMembers(chat?.members);
 
   let name;
   let image;
diff --git a/app/src/features/chats/helpers.ts b/app/src/features/chats/helpers.ts
index 53db3a46..f138c0b9 100644
--- a/app/src/features/chats/helpers.ts
+++ b/app/src/features/chats/helpers.ts
@@ -17,7 +17,7 @@ export function parseChatsToState(chatData?: ChatDataType) {
   return chatData.chats.map((chat) => ({
     ...chat,
     lastMessage: chatData.lastMessages.find(
-      (lastMessage) => lastMessage.chatId === chat._id
+      (lastMessage) => lastMessage.chatId === chat._id,
     )?.lastMessage,
     messages: [],
     isTyping: false,
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 5eafad84..e45e2b72 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -14,7 +14,7 @@ export function useChats() {
   const dispatch = useAppDispatch();
 
   useEffect(() => {
-    let initialChatState: ChatsState = {
+    const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),
       members: chatData?.members || [],
     };
@@ -22,6 +22,5 @@ export function useChats() {
     dispatch(setAllChats({ chatsData: initialChatState }));
   }, [isPending, chatData]);
 
-
   return { isPending };
 }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index 50301e8b..53066082 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -33,7 +33,7 @@ function useFetchNextPage() {
           mergeMessages({
             chatId: chatId,
             newMessages: lastFetchedPage.messages,
-          })
+          }),
         );
       }
     }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.tsx b/app/src/features/chats/hooks/useFetchNextPage.tsx
index 74f5019e..dc0fddd0 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.tsx
+++ b/app/src/features/chats/hooks/useFetchNextPage.tsx
@@ -33,7 +33,7 @@ function useFetchNextPage() {
           mergeMessages({
             chatId: chatId,
             newMessages: lastFetchedPage.messages,
-          })
+          }),
         );
       }
     }
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index e39d24c1..37216c49 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -12,7 +12,7 @@ export const useMessageSender = () => {
   const handleSendMessage = (
     data: string,
     file?: string,
-    type: ContentType = "text"
+    type: ContentType = "text",
   ) => {
     if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id!, data, chatId!);
diff --git a/app/src/features/chats/hooks/useOptionListAction.ts b/app/src/features/chats/hooks/useOptionListAction.ts
index 98e46304..52b71450 100644
--- a/app/src/features/chats/hooks/useOptionListAction.ts
+++ b/app/src/features/chats/hooks/useOptionListAction.ts
@@ -21,7 +21,7 @@ function useOptionListAction({
 
   function MoveToReplyMessage() {
     const targetMsg = document.querySelector(
-      "[data-message-id='" + parentMessageId + "']"
+      "[data-message-id='" + parentMessageId + "']",
     );
 
     if (targetMsg) {
diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
index faa20809..63e510fc 100644
--- a/app/src/features/chats/services/apiFetchNextPage.ts
+++ b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -18,10 +18,9 @@ async function apiFetchNextPage({
         "Content-Type": "application/json",
         "X-Session-Token": localStorage.getItem("sessionId") || "",
       },
-    }
+    },
   );
 
-
   const data = await res.json();
 
   if (data.status !== "success") {
diff --git a/app/src/features/devices/Devices.tsx b/app/src/features/devices/Devices.tsx
index 0a0c6b9e..61d62dea 100644
--- a/app/src/features/devices/Devices.tsx
+++ b/app/src/features/devices/Devices.tsx
@@ -4,8 +4,8 @@ import { useGetAllSessions } from "./hooks/useGetAllSessions";
 import { useGetCurrentSession } from "./hooks/useGetCurrentSessions";
 import SessionItem from "./components/SessionItem";
 import laptopAnimation from "@data/animations/devices.json";
-import { DoDisturbOnOutlined } from "@mui/icons-material";
 import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
 import { useLogoutOtherSessions } from "./hooks/useLogoutOtherSessions";
 
 const SideBarContainer = styled.div`
@@ -83,9 +83,7 @@ function Devices() {
           onClick={handleLogoutOthers}
           data-testid="terminate-other-sessions-button"
         >
-          <Icon>
-            <DoDisturbOnOutlined fontSize="large" />
-          </Icon>
+          <Icon>{getIcon("DoDisturb")}</Icon>
           <span>Terminate All Other Sessions</span>
         </TerminateOtherSessionsButton>
       </SettingSection>
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index d1c6aecb..479a6bda 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -72,7 +72,7 @@ function ScrollableChats(props: Props) {
 
   const handleSubmit = () => {
     const messagesToForward = messages?.filter((message) =>
-      selectedMessages?.includes(message._id)
+      selectedMessages?.includes(message._id),
     );
 
     messagesToForward?.map((message) => {
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
index b67679aa..76f50c87 100644
--- a/app/src/features/pin-messages/components/PinnedMessages.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -61,7 +61,7 @@ const PinnedMessages: React.FC = () => {
   const handleNextPinnedMessage = () => {
     if (pinnedMessages.length > 0) {
       setCurrentPinnedIndex(
-        (prevIndex) => (prevIndex + 1) % pinnedMessages.length
+        (prevIndex) => (prevIndex + 1) % pinnedMessages.length,
       );
       document
         .querySelector("[data-message-id='" + currentPinnedMessage?._id + "']")
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
index 3ae71d39..0ef895ca 100644
--- a/app/src/features/privacy-settings/AddToBlockMenuList.tsx
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -52,7 +52,7 @@ const StyledP = styled.p`
 `;
 function filterChats(
   blockList: BlockedUserProps[],
-  chats: DetailedChatInterface[]
+  chats: DetailedChatInterface[],
 ) {
   const blockIds = blockList
     ? new Set(blockList.map((val) => val.id))
@@ -70,7 +70,7 @@ function AddToBlockMenuList({ setIsMenuOpened }: any) {
 
   const filteredChats = filterChats(
     blockList as BlockedUserProps[],
-    chats as DetailedChatInterface[]
+    chats as DetailedChatInterface[],
   );
 
   function handleClick(item: DetailedChatInterface) {
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
index 591de5d3..69f194d3 100644
--- a/app/src/features/privacy-settings/hooks/useBlock.ts
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -1,8 +1,4 @@
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import getBlockList from "@features/privacy-settings/service/getBlockList";
 import { blockUser } from "../service/blockUser";
 import { BlockedUserProps } from "../BlockItem";
diff --git a/app/src/features/profile-info/ProfileInfo.tsx b/app/src/features/profile-info/ProfileInfo.tsx
index 9230227d..a246b67c 100644
--- a/app/src/features/profile-info/ProfileInfo.tsx
+++ b/app/src/features/profile-info/ProfileInfo.tsx
@@ -1,7 +1,7 @@
 import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
-import { AlternateEmailTwoTone, Email, Info, Phone } from "@mui/icons-material";
 import styled from "styled-components";
 import ProfileItem from "./components/ProfileItem";
+import { getIcon } from "@data/icons";
 
 const ProfileInfoStyled = styled.div`
   border-bottom: 0.625rem solid var(--color-background-secondary);
@@ -21,7 +21,7 @@ function ProfileInfo() {
         <ProfileItem
           data={profileSettings.phone}
           ribbon="Phone"
-          Icon={Phone}
+          icon="Phone"
           data-testid="phone-profile-item"
         />
       )}
@@ -29,7 +29,7 @@ function ProfileInfo() {
         <ProfileItem
           data={profileSettings.email}
           ribbon="Email"
-          Icon={Email}
+          icon="Email"
           data-testid="email-profile-item"
         />
       )}
@@ -37,7 +37,7 @@ function ProfileInfo() {
         <ProfileItem
           data={profileSettings.username}
           ribbon="Username"
-          Icon={AlternateEmailTwoTone}
+          icon="AlternateEmailTwoTone"
           data-testid="username-profile-item"
         />
       )}
@@ -45,7 +45,7 @@ function ProfileInfo() {
         <ProfileItem
           data={profileSettings.bio}
           ribbon="Bio"
-          Icon={Info}
+          icon="info"
           data-testid="bio-profile-item"
         />
       )}
diff --git a/app/src/features/profile-info/components/ProfileItem.tsx b/app/src/features/profile-info/components/ProfileItem.tsx
index e0d8ac2f..abe162d1 100644
--- a/app/src/features/profile-info/components/ProfileItem.tsx
+++ b/app/src/features/profile-info/components/ProfileItem.tsx
@@ -1,3 +1,4 @@
+import { getIcon } from "@data/icons";
 import styled from "styled-components";
 
 const ProfileItemStyled = styled.div`
@@ -27,15 +28,13 @@ const ProfileItemRibbon = styled.span`
 interface ProfileItemProps {
   data: string;
   ribbon: string;
-  Icon: React.ElementType;
+  icon: string;
 }
 
-function ProfileItem({ data, ribbon, Icon }: ProfileItemProps) {
+function ProfileItem({ data, ribbon, icon }: ProfileItemProps) {
   return (
     <ProfileItemStyled>
-      <ProfileItemIcon>
-        <Icon />
-      </ProfileItemIcon>
+      <ProfileItemIcon>{getIcon(icon)}</ProfileItemIcon>
       <ProfileItemInfo>
         <ProfileItemData>{data}</ProfileItemData>
         <ProfileItemRibbon>{ribbon}</ProfileItemRibbon>
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 4e6d30fa..454e64ec 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";
 
-import { Check } from "@mui/icons-material";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import FloatingLabelInput from "@components/inputs/float-label-input/FloatingLabelInput";
@@ -216,7 +215,7 @@ function ProfileSettings() {
   const userHandle = `https://telware.tech/${watch("username") || "username"}`;
 
   const handleImageUpload = async (
-    event: React.ChangeEvent<HTMLInputElement>
+    event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     if (event.target.files) {
       setPhotoChanged(true);
@@ -248,12 +247,12 @@ function ProfileSettings() {
           updateSideBarView({
             redirect: sideBarPages.SETTINGS,
             data: undefined,
-          })
+          }),
         );
       }
     } catch (error) {
       toast.error(
-        (error as Error).message || "Failed to update profile settings"
+        (error as Error).message || "Failed to update profile settings",
       );
     }
   };
@@ -401,7 +400,7 @@ function ProfileSettings() {
           $revealed={isDirty || photoChanged}
           data-testid="submit-button"
         >
-          <Check />
+          {getIcon("Check")}
         </SubmitButton>
       </form>
     </SideBarContainer>
diff --git a/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
index 8f377041..6c6b80a9 100644
--- a/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
+++ b/app/src/features/search/hooks/useScrollToSearchResultsMsg.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { useSelector } from "react-redux";
 
 import { RootState } from "@state/store";
@@ -7,22 +7,21 @@ function useScrollToSearchResultsMsg() {
   const { searchResults, searchTerm, currentResultIndex } = useSelector(
     (state: RootState) => state.search,
   );
-  const searchResultRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (searchResults.length > 0) {
       const searchResult = searchResults[currentResultIndex];
       console.log("searchResult", searchResult);
       document
-        .querySelector("[data-message-id='" + searchResult.messageId + "']")
+        .querySelectorAll(
+          "[data-message-id='" + searchResult.messageId + "']",
+        )[0]
         ?.scrollIntoView({
           behavior: "smooth",
           block: "center",
         });
     }
   }, [searchResults, currentResultIndex, searchTerm]);
-
-  return { searchResultRef };
 }
 
 export default useScrollToSearchResultsMsg;
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
index 1b30beb6..1c2f0785 100644
--- a/app/src/features/stories/components/StoryList.tsx
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -57,19 +57,19 @@ function StoryList(props: StoryListProps) {
         currentStoryUserId == "me"
           ? "My Story"
           : userStories.find((user) => user.userId === currentStoryUserId)
-              ?.name || ""
+              ?.name || "",
       );
       setUserAvatar(
         currentStoryUserId == "me"
           ? userInfo.photo || ""
           : userStories.find((user) => user.userId === currentStoryUserId)
-              ?.photo || ""
+              ?.photo || "",
       );
       setStories(
         currentStoryUserId == "me"
           ? myStories
           : userStories.find((user) => user.userId === currentStoryUserId)
-              ?.stories || []
+              ?.stories || [],
       );
     }
   }, [
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index 7aad1f2a..6c9c840b 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -32,12 +32,12 @@ const StyledContainer = styled.div<{ $isOpened: boolean }>`
 function StoryListContainer() {
   const { stories: userStoriesData } = useStroies();
   const userStories = userStoriesData?.data?.filter(
-    (userStory) => userStory.stories.length > 0
+    (userStory) => userStory.stories.length > 0,
   );
   const { myStories: myStoriesData } = useMyStroies();
   const myStories = myStoriesData?.data?.stories;
   const [isOpened, setIsOpened] = useState(
-    userStories?.length || myStories?.length
+    userStories?.length || myStories?.length,
   );
   const { userInfo } = useAppSelector((state) => state.user);
 
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
index 83581671..53c96f17 100644
--- a/app/src/features/stories/components/StorySlide.tsx
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -128,7 +128,7 @@ function StorySlide(props: StorySlideProps) {
         onClose();
       }
     },
-    [onClose]
+    [onClose],
   );
   const handleSpaceKey = useCallback(
     (e: KeyboardEvent) => {
@@ -136,7 +136,7 @@ function StorySlide(props: StorySlideProps) {
         handlePause();
       }
     },
-    [handlePause]
+    [handlePause],
   );
   const handleLeftArrow = useCallback(() => {
     if (index > 0) {
@@ -158,7 +158,7 @@ function StorySlide(props: StorySlideProps) {
         handleEcsKey(e);
       }
     },
-    [handleRightArrow, handleLeftArrow, handleSpaceKey, handleEcsKey]
+    [handleRightArrow, handleLeftArrow, handleSpaceKey, handleEcsKey],
   );
 
   const handleDelete = () => {
diff --git a/app/src/features/stories/components/StorySlideCounter.tsx b/app/src/features/stories/components/StorySlideCounter.tsx
index bb5a41cc..cf6ab932 100644
--- a/app/src/features/stories/components/StorySlideCounter.tsx
+++ b/app/src/features/stories/components/StorySlideCounter.tsx
@@ -26,7 +26,6 @@ const StyledSliderContainer = styled.div`
   height: 2rem;
 
   z-index: 1;
-
 `;
 
 const Segment = styled.div<SegmentProps>`
@@ -43,7 +42,7 @@ function StorySlideCounter(props: StorySlideCounterProps) {
   const { currentIndex, totalSlides, onSlideChange, isPaused } = props;
   const [progress, setProgress] = useState(0);
   const [viewedStories, setViewedStories] = useState(
-    Array(totalSlides).fill(false)
+    Array(totalSlides).fill(false),
   );
 
   useEffect(() => {
diff --git a/app/src/hooks/useIndexedDB.ts b/app/src/hooks/useIndexedDB.ts
index 27d813ae..ca36c582 100644
--- a/app/src/hooks/useIndexedDB.ts
+++ b/app/src/hooks/useIndexedDB.ts
@@ -24,7 +24,7 @@ function useIndexedDB(dbName: string, storeName: string) {
       if (!db) return null;
       return await db.get(storeName, key);
     },
-    [db, storeName]
+    [db, storeName],
   );
 
   interface SetItemFunction {
@@ -36,7 +36,7 @@ function useIndexedDB(dbName: string, storeName: string) {
       if (!db) return;
       await db.put(storeName, value, key);
     },
-    [db, storeName]
+    [db, storeName],
   );
 
   return { getItem, setItem };
diff --git a/app/src/hooks/useMouseLeave.ts b/app/src/hooks/useMouseLeave.ts
index 03aa2dd3..7fe645d1 100644
--- a/app/src/hooks/useMouseLeave.ts
+++ b/app/src/hooks/useMouseLeave.ts
@@ -18,7 +18,7 @@ export function useMouseLeave(handler: () => void, listenCapturing = true) {
       currentRef.addEventListener(
         "mouseleave",
         handleMouseLeave,
-        listenCapturing
+        listenCapturing,
       );
     }
 
@@ -27,7 +27,7 @@ export function useMouseLeave(handler: () => void, listenCapturing = true) {
         currentRef.removeEventListener(
           "mouseleave",
           handleMouseLeave,
-          listenCapturing
+          listenCapturing,
         );
       }
     };
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 6496bcc5..36f4a42b 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -19,7 +19,7 @@ enableMocking().then(() => {
     // <StrictMode>
     <Provider store={store}>
       <App />
-    </Provider>
+    </Provider>,
     // </StrictMode>
   );
 });
diff --git a/app/src/mocks/chats/media.ts b/app/src/mocks/chats/media.ts
index 012af5fe..85b2410c 100644
--- a/app/src/mocks/chats/media.ts
+++ b/app/src/mocks/chats/media.ts
@@ -12,7 +12,7 @@ export const media = [
           status: "error",
           message: "File is required or invalid",
         },
-        { status: 400 }
+        { status: 400 },
       );
     }
 
@@ -24,7 +24,7 @@ export const media = [
           mediaFileName: "927b84545f5258ac.webm",
         },
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 ];
diff --git a/app/src/mocks/chats/pagination.ts b/app/src/mocks/chats/pagination.ts
index d21722cd..1aaeee4d 100644
--- a/app/src/mocks/chats/pagination.ts
+++ b/app/src/mocks/chats/pagination.ts
@@ -19,7 +19,7 @@ export const paginationMock = [
         data: { messages: paginatedMessages, nextPage: page + 1 },
         message: "Messages retrieved successfully",
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 ];
diff --git a/app/src/mocks/data/blocklist.ts b/app/src/mocks/data/blocklist.ts
index 7d097005..f45231fa 100644
--- a/app/src/mocks/data/blocklist.ts
+++ b/app/src/mocks/data/blocklist.ts
@@ -1,6 +1,6 @@
 import { BlockedUserProps } from "@features/privacy-settings/BlockItem";
 
-let blockList: BlockedUserProps[] = [
+const blockList: BlockedUserProps[] = [
   {
     id: 1,
     name: "Alice",
diff --git a/app/src/mocks/oauth/oauth.ts b/app/src/mocks/oauth/oauth.ts
index 85903fae..7281dd9b 100644
--- a/app/src/mocks/oauth/oauth.ts
+++ b/app/src/mocks/oauth/oauth.ts
@@ -38,7 +38,7 @@ export const OauthMock = [
         headers: {
           "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
         },
-      }
+      },
     );
   }),
 
@@ -57,7 +57,7 @@ export const OauthMock = [
         headers: {
           "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
         },
-      }
+      },
     );
   }),
 ];
diff --git a/app/src/mocks/privacy-settings/privacySettings.ts b/app/src/mocks/privacy-settings/privacySettings.ts
index 5eff4584..a0f3bd85 100644
--- a/app/src/mocks/privacy-settings/privacySettings.ts
+++ b/app/src/mocks/privacy-settings/privacySettings.ts
@@ -8,7 +8,6 @@ type requestType = {
   privacy: activeStatesStrings | privacyStatesStrings;
 };
 
-
 export const privacySettingsMock = [
   http.patch<{ path: endPts }, requestType>(
     "/users/privacy/:path",
@@ -16,7 +15,7 @@ export const privacySettingsMock = [
       const body = await request.json();
       if (!body.privacy) return HttpResponse.json({}, { status: 401 });
       return HttpResponse.json({}, { status: 200 });
-    }
+    },
   ),
 
   http.get("/users/block", async () => {
@@ -27,7 +26,7 @@ export const privacySettingsMock = [
 
   http.patch("/users/block/:id", async (req) => {
     const id = req.params.id;
-    let user = allChats.find((item) => item.id.toString() === id);
+    const user = allChats.find((item) => item.id.toString() === id);
     if (user) {
       blockList.push({
         id: user.id,
@@ -47,7 +46,7 @@ export const privacySettingsMock = [
     if (index === -1)
       return HttpResponse.json(
         { status: "user not in block list" },
-        { status: 404 }
+        { status: 404 },
       );
 
     blockList.splice(index, 1);
diff --git a/app/src/mocks/profile-settings/profile-picture.ts b/app/src/mocks/profile-settings/profile-picture.ts
index 97dee514..cf5322db 100644
--- a/app/src/mocks/profile-settings/profile-picture.ts
+++ b/app/src/mocks/profile-settings/profile-picture.ts
@@ -12,7 +12,7 @@ export const profilePictureMock = [
         status: "success",
         data: {},
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
   http.patch("/users/picture", async ({ request }) => {
@@ -33,7 +33,7 @@ export const profilePictureMock = [
           headers: {
             "Content-Type": "application/json",
           },
-        }
+        },
       );
     } else {
       return HttpResponse.json(
@@ -44,7 +44,7 @@ export const profilePictureMock = [
         },
         {
           status: 400,
-        }
+        },
       );
     }
   }),
diff --git a/app/src/mocks/stories/stories.ts b/app/src/mocks/stories/stories.ts
index 638424dd..b110fb79 100644
--- a/app/src/mocks/stories/stories.ts
+++ b/app/src/mocks/stories/stories.ts
@@ -10,13 +10,13 @@ type AddStoryRequestBody = {
 type AddStoryResponseBodySuccess = {
   status: "success";
   message: string;
-  data: {};
+  data: object;
 };
 
 type AddStoryResponseBodyFail = {
   status: "fail" | "error";
   message: string;
-  data: {};
+  data: object;
 };
 
 type AddStoryResponseBody =
@@ -29,12 +29,12 @@ type ViewStoryRequestBody = {
 type ViewStoryResponseBodySuccess = {
   status: "success";
   message: string;
-  data: {};
+  data: object | boolean;
 };
 type ViewStoryResponseBodyFail = {
   status: "fail" | "error";
   message: string;
-  data: {};
+  data: object;
 };
 
 type ViewStoryResponseBody =
@@ -46,7 +46,7 @@ export const storiesMock = [
     return undefined;
   }),
 
-  http.post<{}, AddStoryRequestBody, AddStoryResponseBody>(
+  http.post<object, AddStoryRequestBody, AddStoryResponseBody>(
     "/users/stories",
     async ({ request }) => {
       const formData = await request.formData();
@@ -73,7 +73,7 @@ export const storiesMock = [
             headers: {
               "Content-Type": "application/json",
             },
-          }
+          },
         );
       } else {
         return HttpResponse.json(
@@ -84,10 +84,10 @@ export const storiesMock = [
           },
           {
             status: 400,
-          }
+          },
         );
       }
-    }
+    },
   ),
   http.post<{ storyId: string }, ViewStoryRequestBody, ViewStoryResponseBody>(
     "/stories/:storyId/views",
@@ -121,7 +121,7 @@ export const storiesMock = [
             headers: {
               "Content-Type": "application/json",
             },
-          }
+          },
         );
       } else {
         return HttpResponse.json(
@@ -132,16 +132,16 @@ export const storiesMock = [
           },
           {
             status: 404,
-          }
+          },
         );
       }
-    }
+    },
   ),
   http.delete("/users/stories/:storyId", async ({ params }) => {
     const { storyId } = params;
     if (storyId) {
       const index = MOCK_MY_STORIES.stories.findIndex(
-        (story) => story.id === storyId
+        (story) => story.id === storyId,
       );
       if (index !== -1) {
         MOCK_MY_STORIES.stories.splice(index, 1);
@@ -154,7 +154,7 @@ export const storiesMock = [
         },
         {
           status: 200,
-        }
+        },
       );
     } else {
       return HttpResponse.json(
@@ -165,7 +165,7 @@ export const storiesMock = [
         },
         {
           status: 400,
-        }
+        },
       );
     }
   }),
@@ -175,7 +175,7 @@ export const storiesMock = [
       {
         data: MOCK_MY_STORIES,
       },
-      { status: 200 }
+      { status: 200 },
     );
   }),
 
@@ -186,7 +186,7 @@ export const storiesMock = [
       },
       {
         status: 200,
-      }
+      },
     );
   }),
 ];
diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index f465ce19..28527bcb 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -10,7 +10,7 @@ type LoginResponseBodySuccess = {
   status: "success";
   message: string;
   data: {
-    user: {};
+    user: object;
     sessionID: string;
   };
 };
@@ -18,7 +18,7 @@ type LoginResponseBodySuccess = {
 type LoginResponseBodyFail = {
   status: "fail" | "error";
   message: string;
-  data: {};
+  data: object;
 };
 
 type LoginResponseBody = LoginResponseBodySuccess | LoginResponseBodyFail;
@@ -28,7 +28,7 @@ export const loginMock = [
     return undefined;
   }),
 
-  http.post<{}, LoginRequestBody, LoginResponseBody>(
+  http.post<object, LoginRequestBody, LoginResponseBody>(
     "/auth/login",
     async ({ request }) => {
       const { email, password } = await request.json();
@@ -44,7 +44,7 @@ export const loginMock = [
             status: "error",
             data: {},
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -64,8 +64,8 @@ export const loginMock = [
           headers: {
             "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
           },
-        }
+        },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/mocks/userauth/resetpassword.ts b/app/src/mocks/userauth/resetpassword.ts
index b032ab6e..2f0efc94 100644
--- a/app/src/mocks/userauth/resetpassword.ts
+++ b/app/src/mocks/userauth/resetpassword.ts
@@ -34,7 +34,7 @@ export const forgetPassword = [
             message: "Cannot send the email, please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -43,9 +43,9 @@ export const forgetPassword = [
           message: "Check your email.",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
 
@@ -62,7 +62,7 @@ export const resetPassword = [
             message: "Incorrect code , please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -71,8 +71,8 @@ export const resetPassword = [
           message: "Successful! Redirecting...",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/mocks/userauth/signup.ts b/app/src/mocks/userauth/signup.ts
index 780e9df7..715329bb 100644
--- a/app/src/mocks/userauth/signup.ts
+++ b/app/src/mocks/userauth/signup.ts
@@ -36,7 +36,7 @@ export const signupMock = [
             status: "error",
             data: {},
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -46,8 +46,8 @@ export const signupMock = [
           status: "success",
           data: {},
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/mocks/userauth/verfiyEmail.ts b/app/src/mocks/userauth/verfiyEmail.ts
index 2c99bbdf..57637dd0 100644
--- a/app/src/mocks/userauth/verfiyEmail.ts
+++ b/app/src/mocks/userauth/verfiyEmail.ts
@@ -34,7 +34,7 @@ export const sendEmailConfirmationMock = [
             message: "Cannot send the confirmation, please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -43,9 +43,9 @@ export const sendEmailConfirmationMock = [
           message: "Confirmation code sent. Check your email.",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
 
@@ -62,7 +62,7 @@ export const verifyEmailMock = [
             message: "Incorrect code, please retry",
             status: "error",
           },
-          { status: 401 }
+          { status: 401 },
         );
       }
 
@@ -71,8 +71,8 @@ export const verifyEmailMock = [
           message: "Successful! Redirecting...",
           status: "success",
         },
-        { status: 201 }
+        { status: 201 },
       );
-    }
+    },
   ),
 ];
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 6c0b9931..05e56f70 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
 
 import { SocketContext } from "./SocketContext";
-import { getSocket } from "utils/socket";
+import { useSocket } from "utils/socket";
 
 import { MessageInterface } from "types/messages";
 import {
@@ -17,7 +17,7 @@ import {
 const handleIncomingMessage = (
   dispatch: Dispatch,
   message: MessageInterface,
-  chatId: string
+  chatId: string,
 ) => {
   dispatch(addMessage({ chatId, message }));
 };
@@ -25,7 +25,7 @@ const handleIncomingMessage = (
 const handleIsTyping = (
   dispatch: Dispatch,
   isTyping: boolean,
-  chatId: string
+  chatId: string,
 ) => {
   dispatch(setIsTyping({ chatId, isTyping }));
 };
@@ -37,13 +37,16 @@ type SocketProviderProps = {
 interface AcknowledgmentResponse {
   success: boolean;
   message: string;
-  res: any;
+  res: {
+    messageId: string;
+    message: MessageInterface;
+  };
 }
 
 function SocketProvider({ children }: SocketProviderProps) {
   const [isConnected, setIsConnected] = useState(false);
   const dispatch = useDispatch();
-  const socket = getSocket();
+  const socket = useSocket();
 
   useEffect(() => {
     if (socket) {
@@ -79,7 +82,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(pinMessage({ messageId, chatId }));
-        }
+        },
       );
 
       socket.on(
@@ -95,7 +98,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(unpinMessage({ messageId, chatId }));
-        }
+        },
       );
 
       socket.on(
@@ -103,11 +106,11 @@ function SocketProvider({ children }: SocketProviderProps) {
         (chatId: string, messageId: string, content: string) => {
           console.log("EDIT_MESSAGE_SERVER", chatId, messageId, content);
           dispatch(editMessage({ chatId, messageId, content }));
-        }
+        },
       );
 
       socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId)
+        handleIsTyping(dispatch, isTyping, message.chatId),
       );
       socket.emit("typing");
       return () => {
@@ -153,10 +156,10 @@ function SocketProvider({ children }: SocketProviderProps) {
                 ...sentMessage,
                 _id,
               },
-              sentMessage.chatId
+              sentMessage.chatId,
             );
           }
-        }
+        },
       );
     } else {
       console.warn("Cannot send message: not connected to socket server");
@@ -166,13 +169,17 @@ function SocketProvider({ children }: SocketProviderProps) {
   const editMessageSocket = (
     messageId: string,
     content: string,
-    chatId: string
+    chatId: string,
   ) => {
     if (isConnected && socket) {
       socket.emit(
         "EDIT_MESSAGE_CLIENT",
         { messageId, content, chatId },
-        (response: any) => {
+        (response: {
+          success: boolean;
+          res: { message: MessageInterface };
+          error?: string;
+        }) => {
           if (response.success) {
             console.log("Message edited successfully:", response.res.message);
             dispatch(
@@ -180,12 +187,12 @@ function SocketProvider({ children }: SocketProviderProps) {
                 chatId: response.res.message.chatId,
                 messageId: response.res.message._id,
                 content: response.res.message.content,
-              })
+              }),
             );
           } else {
             console.error("Failed to edit message:", response.error);
           }
-        }
+        },
       );
     }
   };
@@ -193,7 +200,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string
+    userId: string,
   ) => {
     if (isConnected && socket) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -205,7 +212,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string
+    userId: string,
   ) => {
     if (isConnected && socket) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 68d0cfe3..eb0933cf 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -37,7 +37,7 @@ const chatsSlice = createSlice({
 
     addMessage: (
       state,
-      action: PayloadAction<{ chatId: string; message: MessageInterface }>
+      action: PayloadAction<{ chatId: string; message: MessageInterface }>,
     ) => {
       const { chatId, message } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -46,7 +46,7 @@ const chatsSlice = createSlice({
 
     deleteMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>
+      action: PayloadAction<{ messageId: string; chatId: string }>,
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -59,7 +59,7 @@ const chatsSlice = createSlice({
         chatId: string;
         messageId: string;
         content: string;
-      }>
+      }>,
     ) => {
       const { chatId, messageId, content } = action.payload;
 
@@ -74,7 +74,7 @@ const chatsSlice = createSlice({
 
     pinMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>
+      action: PayloadAction<{ messageId: string; chatId: string }>,
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -87,7 +87,7 @@ const chatsSlice = createSlice({
 
     unpinMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>
+      action: PayloadAction<{ messageId: string; chatId: string }>,
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -107,7 +107,7 @@ const chatsSlice = createSlice({
 
     setIsTyping: (
       state,
-      action: PayloadAction<{ chatId: string; isTyping: boolean }>
+      action: PayloadAction<{ chatId: string; isTyping: boolean }>,
     ) => {
       const { isTyping, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -118,7 +118,7 @@ const chatsSlice = createSlice({
 
     setShowCheckBox: (
       state,
-      action: PayloadAction<{ chatId: string; showCheckBox: boolean }>
+      action: PayloadAction<{ chatId: string; showCheckBox: boolean }>,
     ) => {
       const { chatId, showCheckBox } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -132,7 +132,7 @@ const chatsSlice = createSlice({
 
     SelectMessage: (
       state,
-      action: PayloadAction<{ chatId: string; id: string }>
+      action: PayloadAction<{ chatId: string; id: string }>,
     ) => {
       const { chatId, id } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -142,20 +142,23 @@ const chatsSlice = createSlice({
 
     removeSelectedMessage: (
       state,
-      action: PayloadAction<{ chatId: string; id: string }>
+      action: PayloadAction<{ chatId: string; id: string }>,
     ) => {
       const { chatId, id } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
       if (chat) {
         chat.selectedMessages = chat?.selectedMessages.filter(
-          (msgId) => msgId !== id
+          (msgId) => msgId !== id,
         );
       }
     },
 
     mergeMessages: (
       state,
-      action: PayloadAction<{ chatId: string; newMessages: MessageInterface[] }>
+      action: PayloadAction<{
+        chatId: string;
+        newMessages: MessageInterface[];
+      }>,
     ) => {
       const { chatId, newMessages } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -166,7 +169,7 @@ const chatsSlice = createSlice({
 
     updateLastMessage: (
       state,
-      action: PayloadAction<{ chatId: string; lastMessage: MessageInterface }>
+      action: PayloadAction<{ chatId: string; lastMessage: MessageInterface }>,
     ) => {
       const { chatId, lastMessage } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index ce2bf077..c6689d3c 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -45,7 +45,7 @@ function getSideBarPage(type: number): SideBarView {
 
 interface actionType {
   redirect: sideBarPages;
-  data?: any;
+  data?: { [key: string]: string };
 }
 
 const sideBarSlice = createSlice({
@@ -65,7 +65,7 @@ const sideBarSlice = createSlice({
 
       if (redirect === sideBarPages.SETTINGS_UPDATE) {
         state.props = { data: data };
-        state.title = data.header;
+        state.title = data?.header || newData.title;
       } else if (redirect === sideBarPages.BLOCKED_USERS) {
         state.props = { ...newData.props, data: data };
         state.title = newData.title;
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 5f1ce0e8..8e8284b4 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -5,17 +5,17 @@ const HighlightedText = styled.span<{ $highlight?: boolean }>`
   color: ${(props) => (props.$highlight ? "black" : "inherit")};
 `;
 
-function renderWithHighlight(
+function RenderWithHighlight(
   content: string,
   searchTerm?: string,
-  searchResults?: any,
+  searchResults?: Array<{ messageId: string; highlightIndex: number }>,
   id?: string,
 ) {
   if (!searchTerm) {
     return content;
   }
 
-  const result = searchResults.find((result) => result.messageId === id);
+  const result = searchResults?.find((result) => result.messageId === id);
 
   if (!result) {
     return content;
@@ -37,4 +37,4 @@ function renderWithHighlight(
   );
 }
 
-export default renderWithHighlight;
+export default RenderWithHighlight;
diff --git a/app/src/utils/socket.tsx b/app/src/utils/socket.tsx
index 793cf481..6cc488a5 100644
--- a/app/src/utils/socket.tsx
+++ b/app/src/utils/socket.tsx
@@ -5,7 +5,7 @@ import { DefaultEventsMap } from "@socket.io/component-emitter";
 
 let socketInstance: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
 
-function getSocket() {
+function useSocket() {
   const { user, isPending } = useUser();
   const [socket, setSocket] = useState<Socket<
     DefaultEventsMap,
@@ -42,4 +42,4 @@ function getSocket() {
   return socket;
 }
 
-export { getSocket };
+export { useSocket };
diff --git a/telware-frontend.tmux b/telware-frontend.tmux
new file mode 100755
index 00000000..3748a77f
--- /dev/null
+++ b/telware-frontend.tmux
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+SESSION_NAME="telware-frontend"
+
+tmux has-session -t $SESSION_NAME 2>/dev/null
+
+if [ $? != 0 ]; then
+
+  # Window 1: Open nvim
+  tmux new-session -d -s $SESSION_NAME -n vim
+  tmux send-keys -t $SESSION_NAME 'v' C-m
+
+  # Window 2: Docker Compose
+  tmux new-window -t $SESSION_NAME -n docker
+  tmux send-keys -t $SESSION_NAME:2 'docker-compose up' C-m
+
+  # Window 3: Attach to the container
+  tmux new-window -t $SESSION_NAME -n container
+  tmux send-keys -t $SESSION_NAME:3 'docker exec -it telware-frontend-frontend-1 /bin/sh' C-m
+fi
+
+# Attach to the session
+tmux attach-session -t $SESSION_NAME

From ad9c2aa421acf568cee4808db8d96650935a3bbd Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:35:15 +0200
Subject: [PATCH 065/136] :bug: : Fixed forward, edit , reply bugs + tested
 using UI (#102)

* :bug: (messaging): forward bug fixed

* :bug: (messaging): fixing edit bug

* :bug: (messaging): fixing icon size
---
 app/src/features/chats/ChatInput.tsx          | 11 +++--
 app/src/features/chats/ChatItem.tsx           |  4 +-
 app/src/features/chats/Message.tsx            |  2 +-
 app/src/features/chats/hooks/useChatMember.ts |  4 +-
 .../features/chats/hooks/useMessageSender.ts  |  5 +--
 app/src/features/forward/ScrollableChats.tsx  | 38 ++++++------------
 app/src/sockets/SocketProvider.tsx            | 40 +++++++++++--------
 7 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 79fc54b1..167cd598 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -82,6 +82,8 @@ function ChatInput() {
   const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
   const [isRecording, setIsRecording] = useState<RecordingStates>("idle");
   const [error, setError] = useState<string>("");
+  const { chatId } = useParams<{ chatId: string }>();
+
   useEffect(() => {
     if (activeMessage.state === "edit" && activeMessage?.content)
       setInput(activeMessage?.content);
@@ -95,25 +97,23 @@ function ChatInput() {
     setIsEmojiSelectorOpen((show) => !show);
   };
   const sendGIF = (gif: string) => {
-    handleSendMessage("", gif, "GIF");
+    handleSendMessage("", chatId, gif, "GIF");
     setIsEmojiSelectorOpen(false);
   };
 
   const sendSticker = (sticker: string) => {
-    handleSendMessage("", sticker, "sticker");
+    handleSendMessage("", chatId, sticker, "sticker");
     setIsEmojiSelectorOpen(false);
   };
   const handleSubmit = (e: Event, voiceNoteName = "") => {
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;
-    handleSendMessage(input, voiceNoteName);
+    handleSendMessage(input, chatId, voiceNoteName);
     dispatch(clearActiveMessage());
     setInput("");
   };
 
-  const { chatId } = useParams<{ chatId: string }>();
-
   const chats = useAppSelector((state) => state.chats.chats);
   const showCheckBox =
     chatId && getChatByID({ chats: chats, chatID: chatId })?.showCheckBox;
@@ -153,7 +153,6 @@ function ChatInput() {
           data-testid="file-preview"
         />
       )}
-      // TODO: Fix the emoji picker
       <Container data-testid="chat-input-container">
         {!showCheckBox ? (
           <Input data-testid="chat-input">
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 13288d31..15776b7d 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -55,10 +55,12 @@ const LastMessage = styled.p`
 
 type ChatItemProps = {
   chat: DetailedChatInterface;
+  onClick?: () => void;
 };
 
 function ChatItem({
   chat: { _id, members, type, lastMessage },
+  onClick,
 }: ChatItemProps) {
   const membersData = useChatMembers(members);
 
@@ -79,7 +81,7 @@ function ChatItem({
     <Container
       data-testid="chat-container"
       $active={chatId === _id}
-      onClick={handleOpenChat}
+      onClick={onClick ? onClick : handleOpenChat}
       key={_id}
     >
       <Avatar data-testid="chat-avatar" image={image} name={name} />
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index fd1e607c..b73a140b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -219,7 +219,7 @@ function Message({
             />
           )}
           <Details>
-            {isPinned && getIcon("PushPin")}
+            {isPinned && getIcon("PushPin", { sx: { fontSize: "1rem" } })}
             <TimeStamp $isMine={senderId === userId}>11:09AM</TimeStamp>
           </Details>
         </Bubble>
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMember.ts
index 4614acc7..1b6f4bfd 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMember.ts
@@ -2,12 +2,12 @@ import { useAppSelector } from "@hooks/useGlobalState";
 import { Member } from "@mocks/data/chats";
 
 export function useChatMembers(memberIDs?: string[]): Member[] {
-  const id = useAppSelector((state) => state.user.userInfo.id);
+  const user = useAppSelector((state) => state.user.userInfo);
   const members = useAppSelector((state) => state.chats.members);
   if (!memberIDs || !members) return [];
 
   return memberIDs
-    .filter((memberID) => memberID !== id) // Exclude the specific ID
+    .filter((memberID) => memberID !== user.id) // Exclude the specific ID
     .map((filteredID) => members.find((member) => member._id === filteredID))
     .filter((member): member is Member => member !== undefined); // Ensure no undefined values
 }
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 37216c49..98409763 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,4 +1,3 @@
-import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { ContentType, MessageInterface, MessageStatus } from "types/messages";
 import { useSocket } from "@hooks/useSocket";
@@ -7,12 +6,12 @@ export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const activeMessage = useAppSelector((state) => state.activeMessage);
-  const { chatId } = useParams<{ chatId: string }>();
 
   const handleSendMessage = (
     data: string,
+    chatId?: string,
     file?: string,
-    type: ContentType = "text",
+    type: ContentType = "text"
   ) => {
     if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id!, data, chatId!);
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index 479a6bda..5072fbdd 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -1,6 +1,5 @@
 import { ScrollContainer } from "styles/GlobalStyles";
 import styled from "styled-components";
-import ChatPopupItem, { ChatPopupItemProps } from "./chatPopupItem";
 import Heading from "@components/Heading";
 import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
@@ -9,7 +8,7 @@ import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { useSelectedMessages } from "@features/chats/hooks/useSelectedMessages";
 import { getChatByID } from "@features/chats/helpers";
-import { useChatMembers } from "@features/chats/hooks/useChatMember";
+import ChatItem from "@features/chats/ChatItem";
 
 const OuterContainer = styled.ul`
   position: absolute;
@@ -49,9 +48,6 @@ const HeaderRow = styled.div`
   height: 4rem;
 `;
 
-const StylingWrapper = styled.div`
-  width: 100%;
-`;
 
 interface Props {
   onClose: () => void;
@@ -70,18 +66,20 @@ function ScrollableChats(props: Props) {
 
   const { handleSendMessage } = useMessageSender();
 
-  const handleSubmit = () => {
+  const handleSubmit = (chatId: string) => {
     const messagesToForward = messages?.filter((message) =>
       selectedMessages?.includes(message._id),
     );
 
     messagesToForward?.map((message) => {
-      handleSendMessage(message.content);
+      handleSendMessage(message.content, chatId);
     });
 
     onClose();
   };
 
+  console.log("chats = ", chats);
+
   //TODO: refactor
   return (
     <OuterContainer>
@@ -92,25 +90,13 @@ function ScrollableChats(props: Props) {
         <Heading as="h4">Forward To...</Heading>
       </HeaderRow>
       <ScrollContainer>
-        {chats?.map((item) => {
-          const membersData = useChatMembers(item.members);
-
-          const data: ChatPopupItemProps = {
-            id: item._id,
-            name:
-              membersData[0].screenFirstName + membersData[0].screenFirstName,
-            username: membersData[0].username,
-          };
-          return (
-            <StylingWrapper
-              onClick={() => handleSubmit()}
-              key={data.id}
-              data-testid={`user-${data.id}`}
-            >
-              <ChatPopupItem {...data} />
-            </StylingWrapper>
-          );
-        })}
+        {chats?.map((chat) => (
+          <ChatItem
+            chat={chat}
+            key={chat._id}
+            onClick={() => handleSubmit(chat._id)}
+          />
+        ))}
       </ScrollContainer>
     </OuterContainer>
   );
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 05e56f70..0019dd89 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -17,7 +17,7 @@ import {
 const handleIncomingMessage = (
   dispatch: Dispatch,
   message: MessageInterface,
-  chatId: string,
+  chatId: string
 ) => {
   dispatch(addMessage({ chatId, message }));
 };
@@ -25,7 +25,7 @@ const handleIncomingMessage = (
 const handleIsTyping = (
   dispatch: Dispatch,
   isTyping: boolean,
-  chatId: string,
+  chatId: string
 ) => {
   dispatch(setIsTyping({ chatId, isTyping }));
 };
@@ -82,7 +82,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(pinMessage({ messageId, chatId }));
-        },
+        }
       );
 
       socket.on(
@@ -98,19 +98,27 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(unpinMessage({ messageId, chatId }));
-        },
+        }
       );
 
       socket.on(
         "EDIT_MESSAGE_SERVER",
-        (chatId: string, messageId: string, content: string) => {
-          console.log("EDIT_MESSAGE_SERVER", chatId, messageId, content);
-          dispatch(editMessage({ chatId, messageId, content }));
-        },
+        ({
+          chatId,
+          content,
+          id,
+        }: {
+          chatId: string;
+          content: string;
+          id: string;
+        }) => {
+          console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
+          dispatch(editMessage({ chatId, messageId: id, content }));
+        }
       );
 
       socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId),
+        handleIsTyping(dispatch, isTyping, message.chatId)
       );
       socket.emit("typing");
       return () => {
@@ -156,10 +164,10 @@ function SocketProvider({ children }: SocketProviderProps) {
                 ...sentMessage,
                 _id,
               },
-              sentMessage.chatId,
+              sentMessage.chatId
             );
           }
-        },
+        }
       );
     } else {
       console.warn("Cannot send message: not connected to socket server");
@@ -169,7 +177,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const editMessageSocket = (
     messageId: string,
     content: string,
-    chatId: string,
+    chatId: string
   ) => {
     if (isConnected && socket) {
       socket.emit(
@@ -187,12 +195,12 @@ function SocketProvider({ children }: SocketProviderProps) {
                 chatId: response.res.message.chatId,
                 messageId: response.res.message._id,
                 content: response.res.message.content,
-              }),
+              })
             );
           } else {
             console.error("Failed to edit message:", response.error);
           }
-        },
+        }
       );
     }
   };
@@ -200,7 +208,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
     if (isConnected && socket) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -212,7 +220,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
     if (isConnected && socket) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });

From bdd53dd5d6bd19daf34f0bf528f71965c3108b3a Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 7 Dec 2024 10:07:03 +0200
Subject: [PATCH 066/136] =?UTF-8?q?=F0=9F=92=84=20Responsive=20login=20(#1?=
 =?UTF-8?q?04)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authentication/login/LoginSection.tsx     |  5 ++---
 app/src/pages/Login.tsx                       | 21 +++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/src/features/authentication/login/LoginSection.tsx b/app/src/features/authentication/login/LoginSection.tsx
index 1c3fa9ca..d1866ee3 100644
--- a/app/src/features/authentication/login/LoginSection.tsx
+++ b/app/src/features/authentication/login/LoginSection.tsx
@@ -6,9 +6,6 @@ import StyledLink from "@components/StyledLink";
 import OauthOptions from "../oauth/OauthOptions";
 
 const Container = styled.div`
-  max-width: 120rem;
-  margin: 0 auto;
-
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -20,6 +17,8 @@ const P = styled.p`
   position: absolute;
   bottom: -4rem;
 
+  text-align: center;
+
   margin: 0 auto;
   color: var(--color-text-secondary);
 
diff --git a/app/src/pages/Login.tsx b/app/src/pages/Login.tsx
index 37fb65fe..db2bff1a 100644
--- a/app/src/pages/Login.tsx
+++ b/app/src/pages/Login.tsx
@@ -2,30 +2,33 @@ import styled from "styled-components";
 
 import LoginSection from "@features/authentication/login/LoginSection";
 import Heading from "@components/Heading";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
 
 const LoginLayout = styled.div`
-  display: grid;
-  grid-template-columns: 26rem 1fr;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   height: 100dvh;
 
   background-color: var(--color-background);
-`;
 
-const Main = styled.main`
-  margin: auto 8rem;
+  @media ${MOBILE_VIEW} {
+    font-size: smaller;
+  }
 `;
 
-const SideBar = styled.div`
-  grid-row: 1 / -1;
+const Main = styled.main`
+  width: 85%;
 
-  background-color: var(--accent-color);
+  @media ${DESKTOP_VIEW} {
+    width: 60%;
+  }
 `;
 
 function Login() {
   return (
     <LoginLayout>
-      <SideBar />
       <Main>
         <Heading data-test="login-header">Welcome back!</Heading>
         <LoginSection />

From 313eff1fbdf54e4bcc85713cee35a3a4499aa4c7 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 7 Dec 2024 11:38:14 +0200
Subject: [PATCH 067/136] upload video stories (#103)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* feat: add video type for stories

* hotfix: dix duplicated chatId in chatInput

* hotfix: dix duplicated chatId in chatInput
---
 app/src/components/CircleIcon.tsx             |  6 +-
 app/src/components/CollapsedList.tsx          | 16 ++--
 app/src/components/ExpandingTextArea.tsx      | 14 +++-
 app/src/components/ImageEditor.tsx            |  2 +-
 app/src/components/Modal.tsx                  |  2 +-
 .../inputs/radio-input/RadioInput.test.tsx    | 22 ++---
 app/src/components/side-bar/SideBar.test.tsx  |  6 +-
 .../side-bar/chats/ChatsSideBar.tsx           |  6 +-
 .../side-bar/chats/ChatsSideBarHeader.tsx     |  6 +-
 .../components/side-bar/chats/SearchBar.tsx   | 14 +---
 .../side-bar/chats/SideBarMenuItem.tsx        |  6 +-
 .../side-bar/chats/SideBarToolsButton.tsx     | 13 ++-
 .../side-bar/settings/ProfilePicture.tsx      | 33 ++++++--
 .../settings/SettingsSideBarHeader.tsx        |  8 +-
 app/src/constants.ts                          |  6 +-
 app/src/data/icons.tsx                        |  2 +-
 .../login/hooks/useAuthStatus.ts              |  2 +-
 .../{checkAuth.ts => apiCheckAuth.ts}         |  0
 app/src/features/chats/ChatInput.tsx          | 15 +++-
 .../features/chats/audio/VoiceRecorder.tsx    |  2 -
 app/src/features/chats/hooks/useGIFS.ts       |  2 +-
 app/src/features/chats/hooks/useStickers.ts   |  2 +-
 .../features/chats/media/FilePreviewItem.tsx  | 15 +++-
 .../services/{GetGIFS.ts => apiGetGIFS.ts}    |  0
 .../{GetStickers.ts => apiGetStickers.ts}     |  0
 .../devices/hooks/useGetAllSessions.ts        |  2 +-
 .../devices/hooks/useGetCurrentSessions.ts    |  3 +-
 .../devices/hooks/useLogoutOtherSessions.ts   |  2 +-
 ...GetAllSessions.ts => apiGetAllSessions.ts} |  0
 ...rentSession.ts => apiGetCurrentSession.ts} |  0
 ...rSessions.ts => apiLogoutOtherSessions.ts} |  0
 .../privacy-settings/hooks/useBlock.ts        |  6 +-
 .../hooks/useUpdatePrivacy.ts                 |  2 +-
 .../service/{blockUser.ts => apiBlockUser.ts} |  0
 ...changeSettings.ts => apiChangeSettings.ts} |  0
 .../{getBlockList.ts => apiGetBlockList.ts}   |  0
 ...veFromBlocks.ts => apiRemoveFromBlocks.ts} |  0
 .../profile-settings/ProfileSettings.tsx      | 27 ++++---
 .../hooks/useDeleteProfilePicture.ts          |  6 +-
 .../hooks/useProfileSettings.ts               |  2 +-
 .../hooks/useUpdateProfilePicture.ts          |  6 +-
 .../hooks/useUpdateProfileSettings.ts         |  2 +-
 ...ePicture.ts => apiDeleteProfilePicture.ts} |  4 +
 ...leSettings.ts => apiGetProfileSettings.ts} |  0
 ...ePicture.ts => apiUpdateProfilePicture.ts} |  0
 ...ettings.ts => apiUpdateProfileSettings.ts} |  0
 .../features/stories/components/AddStory.tsx  | 37 ++++++---
 .../stories/components/ContactStoryIcon.tsx   | 80 -------------------
 app/src/features/stories/components/Story.tsx | 77 +++++++++++-------
 .../features/stories/components/StoryIcon.tsx | 16 ++--
 .../features/stories/components/StoryList.tsx |  6 +-
 .../stories/components/StoryListContainer.tsx | 10 +--
 .../stories/components/StoryPreview.tsx       | 75 ++++++++++-------
 .../stories/components/StorySlide.tsx         | 35 +++++---
 .../stories/components/StorySlideCounter.tsx  |  8 +-
 .../stories/components/StorySliderTooltip.tsx | 10 +--
 .../features/stories/components/UserInfo.tsx  | 10 +--
 .../features/stories/hooks/useDeleteStory.ts  |  2 +-
 .../features/stories/hooks/useMyStories.ts    |  2 +-
 .../features/stories/hooks/usePostStory.ts    |  2 +-
 app/src/features/stories/hooks/useStories.ts  |  2 +-
 .../features/stories/hooks/useViewStory.ts    |  2 +-
 .../{deleteStory.ts => apiDeleteStory.ts}     |  0
 .../{getMyStories.ts => apiGetMyStories.ts}   |  0
 .../{getStories.ts => apiGetStories.ts}       |  0
 .../{postStory.ts => apiPostStory.ts}         |  0
 .../{viewStory.ts => apiViewStory.ts}         |  0
 .../mocks/privacy-settings/privacySettings.ts |  6 +-
 app/src/types/story.ts                        |  2 -
 69 files changed, 344 insertions(+), 300 deletions(-)
 rename app/src/features/authentication/login/services/{checkAuth.ts => apiCheckAuth.ts} (100%)
 rename app/src/features/chats/services/{GetGIFS.ts => apiGetGIFS.ts} (100%)
 rename app/src/features/chats/services/{GetStickers.ts => apiGetStickers.ts} (100%)
 rename app/src/features/devices/services/{GetAllSessions.ts => apiGetAllSessions.ts} (100%)
 rename app/src/features/devices/services/{GetCurrentSession.ts => apiGetCurrentSession.ts} (100%)
 rename app/src/features/devices/services/{LogoutOtherSessions.ts => apiLogoutOtherSessions.ts} (100%)
 rename app/src/features/privacy-settings/service/{blockUser.ts => apiBlockUser.ts} (100%)
 rename app/src/features/privacy-settings/service/{changeSettings.ts => apiChangeSettings.ts} (100%)
 rename app/src/features/privacy-settings/service/{getBlockList.ts => apiGetBlockList.ts} (100%)
 rename app/src/features/privacy-settings/service/{removeFromBlocks.ts => apiRemoveFromBlocks.ts} (100%)
 rename app/src/features/profile-settings/services/{DeleteProfilePicture.ts => apiDeleteProfilePicture.ts} (80%)
 rename app/src/features/profile-settings/services/{GetProfileSettings.ts => apiGetProfileSettings.ts} (100%)
 rename app/src/features/profile-settings/services/{UpdateProfilePicture.ts => apiUpdateProfilePicture.ts} (100%)
 rename app/src/features/profile-settings/services/{UpdateProfileSettings.ts => apiUpdateProfileSettings.ts} (100%)
 delete mode 100644 app/src/features/stories/components/ContactStoryIcon.tsx
 rename app/src/features/stories/services/{deleteStory.ts => apiDeleteStory.ts} (100%)
 rename app/src/features/stories/services/{getMyStories.ts => apiGetMyStories.ts} (100%)
 rename app/src/features/stories/services/{getStories.ts => apiGetStories.ts} (100%)
 rename app/src/features/stories/services/{postStory.ts => apiPostStory.ts} (100%)
 rename app/src/features/stories/services/{viewStory.ts => apiViewStory.ts} (100%)

diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index 21bd22c3..bf445dc2 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -14,7 +14,7 @@ interface CircleIconProps {
   children?: React.ReactNode;
 }
 
-const StyledIcon = styled.div<CircleIconProps>`
+const StyledCircleIcon = styled.div<CircleIconProps>`
   right: ${(props) => props.$right}rem;
   bottom: ${(props) => props.$bottom}rem;
   ${(props) =>
@@ -58,7 +58,7 @@ function CircleIcon({
   children,
 }: CircleIconProps) {
   return (
-    <StyledIcon
+    <StyledCircleIcon
       onClick={onClick}
       {...{
         $icon,
@@ -73,7 +73,7 @@ function CircleIcon({
     >
       {getIcon($icon)}
       {children}
-    </StyledIcon>
+    </StyledCircleIcon>
   );
 }
 
diff --git a/app/src/components/CollapsedList.tsx b/app/src/components/CollapsedList.tsx
index f1531313..6e3a0667 100644
--- a/app/src/components/CollapsedList.tsx
+++ b/app/src/components/CollapsedList.tsx
@@ -2,11 +2,11 @@ import styled from "styled-components";
 
 interface CollapsedListProps {
   onOpen: () => void;
-  render: (data: any) => JSX.Element;
-  list: any[];
+  render: (data: unknown) => JSX.Element;
+  list: unknown[];
 }
 
-const StyledCollapsedContainer = styled.div`
+const StyledCollapsedList = styled.div`
   position: relative;
   cursor: pointer;
   display: flex;
@@ -16,7 +16,7 @@ const StyledCollapsedContainer = styled.div`
   height: 100%;
   width: 100%;
 `;
-const StyledCollapsed = styled.div<{ $index: number }>`
+const CollapsedItem = styled.div<{ $index: number }>`
   position: absolute;
   z-index: 30 - index;
   right: ${(props) => props.$index * 15 + 20}px;
@@ -35,13 +35,13 @@ function CollapsedList(Props: CollapsedListProps) {
   const displayedItems = list?.slice(0, 3);
 
   return (
-    <StyledCollapsedContainer onClick={onOpen}>
+    <StyledCollapsedList onClick={onOpen}>
       {displayedItems?.map((element, index) => (
-        <StyledCollapsed key={index} $index={index}>
+        <CollapsedItem key={index} $index={index}>
           {render(element)}
-        </StyledCollapsed>
+        </CollapsedItem>
       ))}
-    </StyledCollapsedContainer>
+    </StyledCollapsedList>
   );
 }
 
diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index d2bbbb48..86a1ca4d 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import styled from "styled-components";
 
 const Textarea = styled.textarea`
@@ -16,6 +16,7 @@ const Textarea = styled.textarea`
 
   font-size: 1rem;
   line-height: 1.5;
+  padding: 0.25rem;
 
   max-height: 300px;
 `;
@@ -23,9 +24,10 @@ const Textarea = styled.textarea`
 type PropsType = {
   input: string;
   setInput: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
 };
 
-function ExpandingTextArea({ input, setInput }: PropsType) {
+function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   function handleInput() {
@@ -34,6 +36,13 @@ function ExpandingTextArea({ input, setInput }: PropsType) {
       ref.current.style.height = `${ref.current.scrollHeight}px`;
     }
   }
+  useEffect(() => {
+    if (ref.current) {
+      if (ref.current.value === "" || input === "") {
+        ref.current.style.height = "32px";
+      }
+    }
+  }, [input]);
 
   return (
     <Textarea
@@ -43,6 +52,7 @@ function ExpandingTextArea({ input, setInput }: PropsType) {
       placeholder="Message"
       rows={1}
       onInput={handleInput}
+      onKeyDown={onKeyDown}
     />
   );
 }
diff --git a/app/src/components/ImageEditor.tsx b/app/src/components/ImageEditor.tsx
index 794b14f4..c8594b07 100644
--- a/app/src/components/ImageEditor.tsx
+++ b/app/src/components/ImageEditor.tsx
@@ -116,7 +116,7 @@ function ImageEditor({
               onSave={(editedImageObject) => handleSave(editedImageObject)}
               onClose={closeImgEditor}
               annotationsCommon={{
-                fill: "#ff0000",
+                fill: "#2221f1",
               }}
               Text={{ text: "I Love TelWare" }}
               Rotate={{ angle: 90, componentType: "slider" }}
diff --git a/app/src/components/Modal.tsx b/app/src/components/Modal.tsx
index fa3fb7fb..74b84e1d 100644
--- a/app/src/components/Modal.tsx
+++ b/app/src/components/Modal.tsx
@@ -11,7 +11,7 @@ const ModalOverlay = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1;
+  z-index: 10;
 `;
 
 const ModalContainer = styled.div`
diff --git a/app/src/components/inputs/radio-input/RadioInput.test.tsx b/app/src/components/inputs/radio-input/RadioInput.test.tsx
index 9308e815..85a1b20c 100644
--- a/app/src/components/inputs/radio-input/RadioInput.test.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.test.tsx
@@ -1,6 +1,6 @@
 import { RadioInputProps } from "@components/inputs/radio-input/RadioInput";
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as update from "@features/privacy-settings/service/changeSettings";
+import * as update from "@features/privacy-settings/service/apiChangeSettings";
 import SettingsUpdate from "@components/side-bar/settings/SettingsUpdate";
 import renderWithStore from "@tests/test-utils";
 
@@ -63,13 +63,13 @@ describe("RadioInput", () => {
     render(renderWithStore(<SettingsUpdate {...data} />));
 
     expect(
-      (screen.getByLabelText("Option 2") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 2") as HTMLInputElement).checked
     ).toBe(true);
     expect(
-      (screen.getByLabelText("Option 1") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 1") as HTMLInputElement).checked
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
     ).toBe(false);
   });
 
@@ -82,20 +82,20 @@ describe("RadioInput", () => {
     render(renderWithStore(<SettingsUpdate {...data} />));
 
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
     ).toBe(false);
 
     const option3RadioButton = screen.getByLabelText("Option 3");
     fireEvent.click(option3RadioButton);
 
     expect(
-      (screen.getByLabelText("Option 2") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 2") as HTMLInputElement).checked
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 1") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 1") as HTMLInputElement).checked
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
     ).toBe(true);
   });
 
@@ -108,13 +108,13 @@ describe("RadioInput", () => {
     render(renderWithStore(<SettingsUpdate {...data} />));
 
     expect(
-      (screen.getByLabelText("Option 1") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 1") as HTMLInputElement).checked
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 2") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 2") as HTMLInputElement).checked
     ).toBe(false);
     expect(
-      (screen.getByLabelText("Option 3") as HTMLInputElement).checked,
+      (screen.getByLabelText("Option 3") as HTMLInputElement).checked
     ).toBe(false);
   });
 });
diff --git a/app/src/components/side-bar/SideBar.test.tsx b/app/src/components/side-bar/SideBar.test.tsx
index 9ba25390..d53c4060 100644
--- a/app/src/components/side-bar/SideBar.test.tsx
+++ b/app/src/components/side-bar/SideBar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import * as update from "@features/privacy-settings/service/changeSettings";
+import * as update from "@features/privacy-settings/service/apiChangeSettings";
 import renderWithStore from "@tests/test-utils";
 import SideBar from "./SideBar";
 import { privacySettingsRows, settingsRows } from "@data/sideBar";
@@ -88,10 +88,10 @@ describe("Sidebar", () => {
     expect(screen.getByText("Who can see my stories?")).toBeInTheDocument();
     expect(screen.getByText("Who can see my last seen?")).toBeInTheDocument();
     expect(
-      screen.getByText("Who can see my profile photo?"),
+      screen.getByText("Who can see my profile photo?")
     ).toBeInTheDocument();
     expect(
-      screen.getByText("Who can add me to group chats?"),
+      screen.getByText("Who can add me to group chats?")
     ).toBeInTheDocument();
     expect(screen.getByText("Who can add me to channels?")).toBeInTheDocument();
   });
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index 9aff6b6d..7d3af972 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -19,7 +19,7 @@ const StyledChatsSideBar = styled.div`
   overflow-x: hidden;
 `;
 
-const StyledButtonContainer = styled.div`
+const ButtonsContainer = styled.div`
   position: sticky;
   bottom: 1rem;
   width: 3.3rem;
@@ -39,10 +39,10 @@ function ChatsSideBar({ children }: ChatsSideBarProps) {
       <ChatsSidebarHeader />
       <StoryListContainer />
       <div style={{ flex: 1 }}>{children}</div>{" "}
-      <StyledButtonContainer data-testid="button-container">
+      <ButtonsContainer data-testid="button-container">
         <AddStory data-testid="add-story-button" />
         <StartNewChat data-testid="start-new-chat-button" />
-      </StyledButtonContainer>
+      </ButtonsContainer>
     </StyledChatsSideBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
index e7da3643..a5945e49 100644
--- a/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBarHeader.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import SideBarToolsButton from "./SideBarToolsButton";
 import SearchBar from "./SearchBar";
 
-const StyledHeader = styled.header`
+const Header = styled.header`
   background: var(--color-background);
   display: flex;
   flex-direction: row;
@@ -15,10 +15,10 @@ const StyledHeader = styled.header`
 
 function ChatsSidebarHeader() {
   return (
-    <StyledHeader data-testid="chatlist-header">
+    <Header data-testid="chatlist-header">
       <SideBarToolsButton />
       <SearchBar />
-    </StyledHeader>
+    </Header>
   );
 }
 
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index 3ea94d2e..d476b5cb 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -11,7 +11,7 @@ const StyledSearchBar = styled.div`
   }
 `;
 
-const StyledSearchIcon = styled.div`
+const Icon = styled.div`
   > svg {
     position: absolute;
     left: 0.5rem;
@@ -22,7 +22,7 @@ const StyledSearchIcon = styled.div`
   }
 `;
 
-const StyledInput = styled.input`
+const Input = styled.input`
   background-color: var(--color-chat-hover);
   border: 1px solid var(--pattern-color);
   border-radius: var(--border-radius-searchbar);
@@ -45,14 +45,8 @@ const StyledInput = styled.input`
 function SearchBar() {
   return (
     <StyledSearchBar data-testid="general-search-bar">
-      <StyledInput
-        type="text"
-        placeholder="Search"
-        data-testid="general-search"
-      />
-      <StyledSearchIcon data-testid="general-serach-icon">
-        {getIcon("Search")}
-      </StyledSearchIcon>
+      <Input type="text" placeholder="Search" data-testid="general-search" />
+      <Icon data-testid="general-serach-icon">{getIcon("Search")}</Icon>
     </StyledSearchBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/SideBarMenuItem.tsx b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
index 69031f56..2b438f21 100644
--- a/app/src/components/side-bar/chats/SideBarMenuItem.tsx
+++ b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
@@ -8,7 +8,7 @@ interface SideBarMenuItemProps {
   onClick?: () => void;
 }
 
-const StyledLi = styled.li`
+const StyledMenuItem = styled.li`
   display: flex;
   justify-content: start;
   align-items: center;
@@ -31,11 +31,11 @@ function SideBarMenuItem({
   iconMapValue,
 }: SideBarMenuItemProps) {
   return (
-    <StyledLi onClick={onClick}>
+    <StyledMenuItem onClick={onClick}>
       {getIcon(iconMapValue)}
       {title}
       {children}
-    </StyledLi>
+    </StyledMenuItem>
   );
 }
 export type { SideBarMenuItemProps };
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index 7bfe15e8..45096978 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -9,7 +9,7 @@ import { sideBarPages } from "@data/sideBar";
 import { useMouseLeave } from "@hooks/useMouseLeave";
 import { getIcon } from "@data/icons";
 
-const StyledToolsIcon = styled.div`
+const ToolsIcon = styled.div`
   > svg {
     color: var(--color-icon-secondary);
     border-radius: var(--border-radius-modal);
@@ -49,12 +49,9 @@ function SettingsToolbar() {
   };
   return (
     <>
-      <StyledToolsIcon
-        onClick={handleOpenSettings}
-        data-testid="menu-items-icon"
-      >
+      <ToolsIcon onClick={handleOpenSettings} data-testid="menu-items-icon">
         {getIcon("Menu")}
-      </StyledToolsIcon>
+      </ToolsIcon>
       {isOpened && (
         <StyledList
           $isOpened={isOpened}
@@ -69,7 +66,7 @@ function SettingsToolbar() {
                 updateSideBarView({
                   redirect: sideBarPages.CONTACTS,
                   data: undefined,
-                }),
+                })
               )
             }
           />
@@ -82,7 +79,7 @@ function SettingsToolbar() {
                 updateSideBarView({
                   redirect: sideBarPages.SETTINGS,
                   data: undefined,
-                }),
+                })
               )
             }
           />
diff --git a/app/src/components/side-bar/settings/ProfilePicture.tsx b/app/src/components/side-bar/settings/ProfilePicture.tsx
index ec99f147..704ca34c 100644
--- a/app/src/components/side-bar/settings/ProfilePicture.tsx
+++ b/app/src/components/side-bar/settings/ProfilePicture.tsx
@@ -1,20 +1,37 @@
 import { STATIC_MEDIA_URL } from "@constants";
 import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
+import { getAvatarName } from "@utils/helpers";
 import styled from "styled-components";
 
 const ProfilePictureContainer = styled.div`
   position: relative;
 `;
 
-const StyledImg = styled.img<{ $isCircleStyle?: boolean }>`
+const Image = styled.div<{ $isCircleStyle?: boolean; $image?: string }>`
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 20rem;
   aspect-ratio: 1/1;
   width: 100%;
-  object-fit: fill;
+  background: ${({ $image }) =>
+    $image
+      ? `url(${STATIC_MEDIA_URL + $image}) center/cover no-repeat`
+      : "var(--color-avatar)"};
+
   border-radius: ${({ $isCircleStyle }) => ($isCircleStyle ? "50%" : "0")};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+
+  font-weight: bold;
+  font-size: 8rem;
+  text-transform: uppercase;
 `;
 
 const ProfileInfo = styled.div`
@@ -52,12 +69,16 @@ function ProfilePicture({ isCircleStyle }: { isCircleStyle?: boolean }) {
   const { data: profileSettings } = useProfileSettings();
   return (
     <ProfilePictureContainer>
-      <StyledImg
-        alt="profile"
+      <Image
         $isCircleStyle={isCircleStyle}
+        $image={profileSettings?.photo}
         data-testid="profile-picture"
-        src={STATIC_MEDIA_URL + profileSettings?.photo}
-      />
+      >
+        {!profileSettings?.photo &&
+          getAvatarName(
+            (profileSettings?.firstName + profileSettings?.lastName).toString()
+          )}
+      </Image>
       {!isCircleStyle && (
         <ProfileInfo>
           <ProfileNameH2>
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index 26979148..1e748578 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -20,7 +20,7 @@ const StyledSideBarHeader = styled.div`
   background-color: var(--color-background);
   border-bottom: 2px solid var(--color-item-hover);
 `;
-const StyledIconsContainer = styled.div`
+const IconsContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -42,7 +42,7 @@ function SettingsSideBarHeader() {
         {title}
       </Heading>
       {title === "Settings" && (
-        <StyledIconsContainer>
+        <IconsContainer>
           <CircleIcon
             data-testid="profile-update-icon"
             $icon="Edit"
@@ -52,7 +52,7 @@ function SettingsSideBarHeader() {
             $bgColor="var(--color-pattern)"
             onClick={() =>
               dispatch(
-                updateSideBarView({ redirect: sideBarPages.PROFILE_UPDATE }),
+                updateSideBarView({ redirect: sideBarPages.PROFILE_UPDATE })
               )
             }
           />
@@ -65,7 +65,7 @@ function SettingsSideBarHeader() {
             $color="var(--color-text)"
             $bgColor="var(--color-pattern)"
           />
-        </StyledIconsContainer>
+        </IconsContainer>
       )}
     </StyledSideBarHeader>
   );
diff --git a/app/src/constants.ts b/app/src/constants.ts
index a50eb37e..aab78904 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -7,8 +7,9 @@ const {
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
 } = import.meta.env;
 
-const MOBILE_VIEW = "(max-width: 600px)";
-const DESKTOP_VIEW = "(min-width: 600px)";
+const MOBILE_VIEW = "(max-width: 800px)";
+const DESKTOP_VIEW = "(min-width: 800px)";
+const MAX_STORY_SIZE = 5 * 1024 * 1024;
 export {
   ENVIRONMENT,
   RECAPTCHA_SITE_KEY,
@@ -18,4 +19,5 @@ export {
   STATIC_MEDIA_URL,
   MOBILE_VIEW,
   DESKTOP_VIEW,
+  MAX_STORY_SIZE,
 };
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index a7d53e26..1367a1ba 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -392,7 +392,7 @@ function getIcon(
     sx?: SxProps;
     fontSize?: "small" | "medium" | "large";
     style?: React.CSSProperties;
-  },
+  }
 ) {
   if (!iconName) return undefined;
 
diff --git a/app/src/features/authentication/login/hooks/useAuthStatus.ts b/app/src/features/authentication/login/hooks/useAuthStatus.ts
index 0636b959..a69bfc31 100644
--- a/app/src/features/authentication/login/hooks/useAuthStatus.ts
+++ b/app/src/features/authentication/login/hooks/useAuthStatus.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { checkAuth } from "../services/checkAuth";
+import { checkAuth } from "../services/apiCheckAuth";
 
 export function useAuthStatus() {
   const { data: isAuth, isPending } = useQuery({
diff --git a/app/src/features/authentication/login/services/checkAuth.ts b/app/src/features/authentication/login/services/apiCheckAuth.ts
similarity index 100%
rename from app/src/features/authentication/login/services/checkAuth.ts
rename to app/src/features/authentication/login/services/apiCheckAuth.ts
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 167cd598..d814177e 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -47,7 +47,6 @@ const InputContainer = styled.div`
   flex: 3 auto;
 
   display: flex;
-  /* align-items: center; */
   align-self: center;
   flex-direction: column;
 
@@ -114,6 +113,13 @@ function ChatInput() {
     setInput("");
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e as unknown as Event);
+    }
+  };
+
   const chats = useAppSelector((state) => state.chats.chats);
   const showCheckBox =
     chatId && getChatByID({ chats: chats, chatID: chatId })?.showCheckBox;
@@ -182,7 +188,11 @@ function ChatInput() {
                       <Icon>{getIcon("Emojie")}</Icon>
                     </InvisibleButton>
 
-                    <ExpandingTextArea input={input} setInput={setInput} />
+                    <ExpandingTextArea
+                      input={input}
+                      setInput={setInput}
+                      onKeyDown={handleKeyDown}
+                    />
 
                     <MediaUploadComponent
                       file={file}
@@ -201,7 +211,6 @@ function ChatInput() {
               />
             ) : (
               <VoiceRecorder
-                error={error}
                 isRecording={isRecording}
                 setIsRecording={setIsRecording}
                 setError={setError}
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
index b54a11a5..dee33863 100644
--- a/app/src/features/chats/audio/VoiceRecorder.tsx
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -15,7 +15,6 @@ type VoiceRecorderProps = {
   isRecording: RecordingStates;
   setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
   setError: Dispatch<SetStateAction<string>>;
-  error: string;
   handleSendMessage: (data: string, file: string) => void;
 };
 
@@ -25,7 +24,6 @@ const VoiceRecorder: React.FC<VoiceRecorderProps> = ({
   isRecording,
   setIsRecording,
   setError,
-  error,
 }) => {
   const mediaRecorder = useRef<MediaRecorder | null>(null);
   const audioChunks = useRef<Blob[]>([]);
diff --git a/app/src/features/chats/hooks/useGIFS.ts b/app/src/features/chats/hooks/useGIFS.ts
index 3e9647ea..f1b20896 100644
--- a/app/src/features/chats/hooks/useGIFS.ts
+++ b/app/src/features/chats/hooks/useGIFS.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getGifs as getGifsAPI } from "../services/GetGIFS";
+import { getGifs as getGifsAPI } from "../services/apiGetGIFS";
 
 function useGifs() {
   const { data, error, isLoading } = useQuery({
diff --git a/app/src/features/chats/hooks/useStickers.ts b/app/src/features/chats/hooks/useStickers.ts
index 6bd2c559..4923c3db 100644
--- a/app/src/features/chats/hooks/useStickers.ts
+++ b/app/src/features/chats/hooks/useStickers.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getStickers as getStickersAPI } from "../services/GetStickers";
+import { getStickers as getStickersAPI } from "../services/apiGetStickers";
 
 function useStickers() {
   const { data, error, isLoading } = useQuery({
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
index 69e486bb..1c62925e 100644
--- a/app/src/features/chats/media/FilePreviewItem.tsx
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -32,6 +32,17 @@ const InputWrapper = styled.div`
   flex: 1;
 `;
 
+const StyledBackground = styled.div`
+  border: 1px solid var(--color-text-secondary);
+  background-color: var(--color-background);
+  border-radius: 5px;
+  padding: 0.25rem;
+  width: calc(100% - 5.6rem);
+  height: 2.5rem;
+  & > textarea {
+    width: 100%;
+  }
+`;
 interface FileProps {
   file: File | string;
   handleCloseFilePreview: () => void;
@@ -85,7 +96,9 @@ function FilePreviewItem({
       </FileViewerContainer>
       <FileDetailsBanner file={file} />
       <InputWrapper>
-        <ExpandingTextArea input={caption} setInput={setCaption} />
+        <StyledBackground>
+          <ExpandingTextArea input={caption} setInput={setCaption} />
+        </StyledBackground>
         <Button disabled={isPending} onClick={handleSendFile}>
           {isPending ? "Sending..." : "Send"}
         </Button>
diff --git a/app/src/features/chats/services/GetGIFS.ts b/app/src/features/chats/services/apiGetGIFS.ts
similarity index 100%
rename from app/src/features/chats/services/GetGIFS.ts
rename to app/src/features/chats/services/apiGetGIFS.ts
diff --git a/app/src/features/chats/services/GetStickers.ts b/app/src/features/chats/services/apiGetStickers.ts
similarity index 100%
rename from app/src/features/chats/services/GetStickers.ts
rename to app/src/features/chats/services/apiGetStickers.ts
diff --git a/app/src/features/devices/hooks/useGetAllSessions.ts b/app/src/features/devices/hooks/useGetAllSessions.ts
index 01cbfbef..275f48fd 100644
--- a/app/src/features/devices/hooks/useGetAllSessions.ts
+++ b/app/src/features/devices/hooks/useGetAllSessions.ts
@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { GetAllSessions } from "../services/GetAllSessions";
+import { GetAllSessions } from "../services/apiGetAllSessions";
 import { Session } from "../types/sessions";
 
 function useGetAllSessions() {
diff --git a/app/src/features/devices/hooks/useGetCurrentSessions.ts b/app/src/features/devices/hooks/useGetCurrentSessions.ts
index a6fa2f8a..35f32be5 100644
--- a/app/src/features/devices/hooks/useGetCurrentSessions.ts
+++ b/app/src/features/devices/hooks/useGetCurrentSessions.ts
@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { GetAllSessions } from "../services/GetAllSessions";
 import { Session } from "../types/sessions";
-import { GetCurrentSession } from "../services/GetCurrentSession";
+import { GetCurrentSession } from "../services/apiGetCurrentSession";
 
 function useGetCurrentSession() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/devices/hooks/useLogoutOtherSessions.ts b/app/src/features/devices/hooks/useLogoutOtherSessions.ts
index 0ef99f59..6dd23a56 100644
--- a/app/src/features/devices/hooks/useLogoutOtherSessions.ts
+++ b/app/src/features/devices/hooks/useLogoutOtherSessions.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { LogoutOtherSessions } from "../services/LogoutOtherSessions";
+import { LogoutOtherSessions } from "../services/apiLogoutOtherSessions";
 import toast from "react-hot-toast";
 
 function useLogoutOtherSessions() {
diff --git a/app/src/features/devices/services/GetAllSessions.ts b/app/src/features/devices/services/apiGetAllSessions.ts
similarity index 100%
rename from app/src/features/devices/services/GetAllSessions.ts
rename to app/src/features/devices/services/apiGetAllSessions.ts
diff --git a/app/src/features/devices/services/GetCurrentSession.ts b/app/src/features/devices/services/apiGetCurrentSession.ts
similarity index 100%
rename from app/src/features/devices/services/GetCurrentSession.ts
rename to app/src/features/devices/services/apiGetCurrentSession.ts
diff --git a/app/src/features/devices/services/LogoutOtherSessions.ts b/app/src/features/devices/services/apiLogoutOtherSessions.ts
similarity index 100%
rename from app/src/features/devices/services/LogoutOtherSessions.ts
rename to app/src/features/devices/services/apiLogoutOtherSessions.ts
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
index 69f194d3..f6ea57f7 100644
--- a/app/src/features/privacy-settings/hooks/useBlock.ts
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import getBlockList from "@features/privacy-settings/service/getBlockList";
-import { blockUser } from "../service/blockUser";
+import getBlockList from "@features/privacy-settings/service/apiGetBlockList";
+import { blockUser } from "../service/apiBlockUser";
 import { BlockedUserProps } from "../BlockItem";
-import { removeFromBlock } from "../service/removeFromBlocks";
+import { removeFromBlock } from "../service/apiRemoveFromBlocks";
 
 export function useBlock() {
   const { data: blockList } = useQuery<BlockedUserProps[]>({
diff --git a/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts b/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
index 5f6f4d44..8107a9a7 100644
--- a/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
+++ b/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { changeSettings } from "@features/privacy-settings/service/changeSettings";
+import { changeSettings } from "@features/privacy-settings/service/apiChangeSettings";
 
 export function useUpdatePrivacy() {
   const { mutateAsync: updatePrivacy } = useMutation({
diff --git a/app/src/features/privacy-settings/service/blockUser.ts b/app/src/features/privacy-settings/service/apiBlockUser.ts
similarity index 100%
rename from app/src/features/privacy-settings/service/blockUser.ts
rename to app/src/features/privacy-settings/service/apiBlockUser.ts
diff --git a/app/src/features/privacy-settings/service/changeSettings.ts b/app/src/features/privacy-settings/service/apiChangeSettings.ts
similarity index 100%
rename from app/src/features/privacy-settings/service/changeSettings.ts
rename to app/src/features/privacy-settings/service/apiChangeSettings.ts
diff --git a/app/src/features/privacy-settings/service/getBlockList.ts b/app/src/features/privacy-settings/service/apiGetBlockList.ts
similarity index 100%
rename from app/src/features/privacy-settings/service/getBlockList.ts
rename to app/src/features/privacy-settings/service/apiGetBlockList.ts
diff --git a/app/src/features/privacy-settings/service/removeFromBlocks.ts b/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
similarity index 100%
rename from app/src/features/privacy-settings/service/removeFromBlocks.ts
rename to app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 454e64ec..7b30ea9d 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -81,7 +81,7 @@ const DeleteProfilePictureContainer = styled.div`
   position: absolute;
   bottom: 1rem;
   right: calc(50% - 4rem);
-  z-index: 5;
+  z-index: 20;
   background-color: red;
   border: 0.1rem solid var(--color-border);
   border-radius: 50%;
@@ -177,10 +177,15 @@ export interface EditProfileForm {
 function ProfileSettings() {
   const { data: initialProfileSettings } = useProfileSettings();
   const { updateProfileSettings, isPending } = useUpdateProfileSettings();
-  const { deleteProfilePicture } = useDeleteProfilePicture();
-  const { updateProfilePicture } = useUpdateProfilePicture();
+  const { deleteProfilePicture, isPending: isDeletingProfilePicture } =
+    useDeleteProfilePicture();
+  const { updateProfilePicture, isPending: isUpdatingProfilePicture } =
+    useUpdateProfilePicture();
 
   const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
+  const [hasImage, setHasImage] = useState(
+    Boolean(initialProfileSettings?.photo)
+  );
   const [photoChanged, setPhotoChanged] = useState(false);
 
   const [isDeleting, setIsDeleting] = useState(false);
@@ -215,21 +220,22 @@ function ProfileSettings() {
   const userHandle = `https://telware.tech/${watch("username") || "username"}`;
 
   const handleImageUpload = async (
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     if (event.target.files) {
       setPhotoChanged(true);
       const file = event.target.files[0];
       setSelectedImageFile(file);
+      setHasImage(true);
     }
   };
 
   const handleDeleteImage = () => {
     setSelectedImageFile(null);
     setIsDeleting(false);
+    setHasImage(false);
     setPhotoChanged(true);
   };
-
   const onSubmit = async (data: EditProfileForm) => {
     try {
       if (photoChanged) {
@@ -241,21 +247,23 @@ function ProfileSettings() {
       }
 
       updateProfileSettings(data);
-      toast.success("updated profile settings successfully");
+      toast.success("Profile settings updated successfully!");
+
       if (!isPending) {
         dispatch(
           updateSideBarView({
             redirect: sideBarPages.SETTINGS,
             data: undefined,
-          }),
+          })
         );
       }
     } catch (error) {
       toast.error(
-        (error as Error).message || "Failed to update profile settings",
+        (error as Error).message || "Failed to update profile settings"
       );
     }
   };
+
   const firstName = watch("firstName") || "";
   const lastName = watch("lastName") || "";
   const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
@@ -268,13 +276,14 @@ function ProfileSettings() {
 
         <SettingSection>
           <ProfilePictureSection>
-            {selectedImageFile && (
+            {hasImage && (
               <>
                 <DeleteProfilePictureContainer
                   onClick={() => setIsDeleting(true)}
                 >
                   {getIcon("Delete")}
                 </DeleteProfilePictureContainer>
+
                 <Modal
                   isOpen={isDeleting}
                   title="Delete photo"
diff --git a/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts b/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
index 69019f49..e8ba8a04 100644
--- a/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
+++ b/app/src/features/profile-settings/hooks/useDeleteProfilePicture.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { DeleteProfilePicture as DeleteProfilePictureAPI } from "../services/DeleteProfilePicture";
+import { DeleteProfilePicture as DeleteProfilePictureAPI } from "../services/apiDeleteProfilePicture";
+import toast from "react-hot-toast";
 
 function useDeleteProfilePicture() {
   const queryClient = useQueryClient();
@@ -15,6 +16,9 @@ function useDeleteProfilePicture() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["profilePicture"] });
     },
+    onError: () => {
+      toast.error("Something went wrong. Please try again.");
+    },
   });
 
   return { deleteProfilePicture, data, error, isPending };
diff --git a/app/src/features/profile-settings/hooks/useProfileSettings.ts b/app/src/features/profile-settings/hooks/useProfileSettings.ts
index 5180a596..12015468 100644
--- a/app/src/features/profile-settings/hooks/useProfileSettings.ts
+++ b/app/src/features/profile-settings/hooks/useProfileSettings.ts
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { GetProfileSettings as GetProfileSettingsAPI } from "../services/GetProfileSettings";
+import { GetProfileSettings as GetProfileSettingsAPI } from "../services/apiGetProfileSettings";
 
 function useProfileSettings() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts b/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
index 514f02be..37876706 100644
--- a/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
+++ b/app/src/features/profile-settings/hooks/useUpdateProfilePicture.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { UpdateProfilePicture as UpdateProfilePictureAPI } from "../services/UpdateProfilePicture";
+import { UpdateProfilePicture as UpdateProfilePictureAPI } from "../services/apiUpdateProfilePicture";
+import toast from "react-hot-toast";
 
 function useUpdateProfilePicture() {
   const queryClient = useQueryClient();
@@ -15,6 +16,9 @@ function useUpdateProfilePicture() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["profilePicture"] });
     },
+    onError: () => {
+      toast.error("Something went wrong. Please try again.");
+    },
   });
 
   return { updateProfilePicture, data, error, isPending };
diff --git a/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts b/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
index 20fbb1f1..fd553a56 100644
--- a/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
+++ b/app/src/features/profile-settings/hooks/useUpdateProfileSettings.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { UpdateProfileSettings as UpdateProfileSettingsAPI } from "../services/UpdateProfileSettings";
+import { UpdateProfileSettings as UpdateProfileSettingsAPI } from "../services/apiUpdateProfileSettings";
 
 function useUpdateProfileSettings() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/profile-settings/services/DeleteProfilePicture.ts b/app/src/features/profile-settings/services/apiDeleteProfilePicture.ts
similarity index 80%
rename from app/src/features/profile-settings/services/DeleteProfilePicture.ts
rename to app/src/features/profile-settings/services/apiDeleteProfilePicture.ts
index ac3b20c3..e81a1b17 100644
--- a/app/src/features/profile-settings/services/DeleteProfilePicture.ts
+++ b/app/src/features/profile-settings/services/apiDeleteProfilePicture.ts
@@ -9,6 +9,10 @@ async function DeleteProfilePicture() {
     },
   });
 
+  if (res.status === 204) {
+    return { status: "success", message: "Story deleted successfully." };
+  }
+
   const data = await res.json();
 
   if (data.status !== "success") {
diff --git a/app/src/features/profile-settings/services/GetProfileSettings.ts b/app/src/features/profile-settings/services/apiGetProfileSettings.ts
similarity index 100%
rename from app/src/features/profile-settings/services/GetProfileSettings.ts
rename to app/src/features/profile-settings/services/apiGetProfileSettings.ts
diff --git a/app/src/features/profile-settings/services/UpdateProfilePicture.ts b/app/src/features/profile-settings/services/apiUpdateProfilePicture.ts
similarity index 100%
rename from app/src/features/profile-settings/services/UpdateProfilePicture.ts
rename to app/src/features/profile-settings/services/apiUpdateProfilePicture.ts
diff --git a/app/src/features/profile-settings/services/UpdateProfileSettings.ts b/app/src/features/profile-settings/services/apiUpdateProfileSettings.ts
similarity index 100%
rename from app/src/features/profile-settings/services/UpdateProfileSettings.ts
rename to app/src/features/profile-settings/services/apiUpdateProfileSettings.ts
diff --git a/app/src/features/stories/components/AddStory.tsx b/app/src/features/stories/components/AddStory.tsx
index ec8d8d09..56c76040 100644
--- a/app/src/features/stories/components/AddStory.tsx
+++ b/app/src/features/stories/components/AddStory.tsx
@@ -5,11 +5,12 @@ import ImageEditor from "@components/ImageEditor";
 import Popup from "@components/Popup";
 import StoryPreview from "./StoryPreview";
 import toast from "react-hot-toast";
+import { MAX_STORY_SIZE } from "@constants";
 
-const StyledStoryCreator = styled.div`
+const StoryCreator = styled.div`
   cursor: pointer;
 `;
-const StyledImageInput = styled.input`
+const ImageInput = styled.input`
   position: absolute;
   bottom: 0;
   right: 2rem;
@@ -30,13 +31,27 @@ function AddStory() {
 
   const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file?.type.includes("tif") || file?.type.includes("tiff")) {
-      toast.error("TIF files are not supported");
-      return;
-    }
     if (file) {
+      const fileType = file.type;
+      if (fileType.includes("tif") || fileType.includes("tiff")) {
+        toast.error("TIF files are not supported");
+        return;
+      }
+
+      if (!fileType.includes("image") && !fileType.includes("video")) {
+        toast.error("Unsupported file type. Please upload an image or video.");
+        return;
+      }
+      if (file.size > MAX_STORY_SIZE) {
+        toast.error("File size too large. Please upload a file less than 5MB.");
+        return;
+      }
       setStory(file);
-      setIsImageEditorOpen(true);
+      if (fileType.includes("image")) {
+        setIsImageEditorOpen(true);
+      } else {
+        setIsPreviewOpened(true);
+      }
     }
   };
   const handleClose = () => {
@@ -67,7 +82,7 @@ function AddStory() {
 
   return (
     <>
-      <StyledStoryCreator onClick={handleAddStoryClicked}>
+      <StoryCreator onClick={handleAddStoryClicked}>
         <CircleIcon
           data-testid="add-story-icon"
           $icon="AddStory"
@@ -79,15 +94,15 @@ function AddStory() {
           $bgColor="var(--accent-color)"
           $opacity={0.95}
         />
-        <StyledImageInput
+        <ImageInput
           type="file"
           ref={fileInputRef}
-          accept="image/*"
+          accept="image/*,video/*"
           onChange={handleImageUpload}
           data-testid="story-upload-input"
           id="story-upload"
         />
-      </StyledStoryCreator>
+      </StoryCreator>
 
       {
         <Popup isOpen={isImageEditorOpen} onClose={handleImageEditorClose}>
diff --git a/app/src/features/stories/components/ContactStoryIcon.tsx b/app/src/features/stories/components/ContactStoryIcon.tsx
deleted file mode 100644
index 0ba5e9b9..00000000
--- a/app/src/features/stories/components/ContactStoryIcon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { STATIC_MEDIA_URL } from "@constants";
-import styled from "styled-components";
-import { story } from "types/story";
-
-interface StoryIconProps {
-  isMe: boolean;
-  stories: story[];
-  seenCounter: number;
-  photo?: string;
-  name: string;
-}
-
-const StyledContainer = styled.div<{
-  $seenCounter: number;
-  $storiesCounter: number;
-  $isMe: boolean;
-}>`
-  ${({ $isMe }) => $isMe && "align-self: flex-start;"}
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: ${(props) =>
-      props.$seenCounter === props.$storiesCounter
-        ? "2px solid gray"
-        : "2px solid #f39c12"};
-  }
-`;
-
-const StyledImage = styled.img`
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid white;
-`;
-
-const StyledName = styled.p`
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  color: #333;
-  text-align: center;
-`;
-
-function ContactStoryIcon(props: StoryIconProps) {
-  const { isMe, stories, photo, name } = props;
-  const storiesCounter = stories.length;
-  const seenCounter = stories.filter((story: story) => story.viewed).length;
-
-  return (
-    <StyledContainer
-      $seenCounter={seenCounter}
-      $storiesCounter={storiesCounter}
-      $isMe={isMe}
-    >
-      <StyledImage
-        src={photo ? `${STATIC_MEDIA_URL}/${photo}` : "/default-avatar.png"}
-        alt={`${name}'s avatar`}
-      />
-      <StyledName>{isMe ? "Your Story" : name}</StyledName>
-    </StyledContainer>
-  );
-}
-
-export default ContactStoryIcon;
diff --git a/app/src/features/stories/components/Story.tsx b/app/src/features/stories/components/Story.tsx
index 3b2a0326..766e6c22 100644
--- a/app/src/features/stories/components/Story.tsx
+++ b/app/src/features/stories/components/Story.tsx
@@ -1,27 +1,26 @@
 import { STATIC_MEDIA_URL } from "@constants";
+import { useEffect, useRef } from "react";
 import ModalImage from "react-modal-image";
 import styled from "styled-components";
 
 interface StoryProps {
   content: string;
   caption: string;
+  isPaused?: boolean;
+  isImage: boolean;
+  onFinish: () => void;
 }
-const StyledImageContainer = styled.div`
+
+const Container = styled.div`
   position: relative;
-  div {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--color-background);
-    border-radius: var(--border-radius-default);
-    width: 100%;
-    height: 100%;
-    img {
-      width: 100vw;
-      height: 100vh;
-      object-fit: cover !important;
-    }
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-background);
+  border-radius: var(--border-radius-default);
+  width: 100%;
+  height: 100vh;
+
   ::before {
     content: "";
     position: absolute;
@@ -38,7 +37,13 @@ const StyledImageContainer = styled.div`
     );
   }
 `;
-const StyledCaption = styled.p<{ $captionLength: number }>`
+const Video = styled.video`
+  object-fit: cover;
+  border-radius: var(--border-radius-default);
+  width: 100%;
+`;
+
+const Caption = styled.p<{ $captionLength: number }>`
   position: absolute;
   bottom: ${({ $captionLength }) =>
     `clamp(5%, ${Math.max(2, 8 - $captionLength * 0.01)}vh, 15%)`};
@@ -48,25 +53,37 @@ const StyledCaption = styled.p<{ $captionLength: number }>`
   color: white;
   padding: 0.5rem;
   text-align: center;
-
+  width: 100%;
   font-size: ${({ $captionLength }) =>
     `clamp(1rem, ${Math.max(2.5 - $captionLength * 0.02, 1)}vw, 2.5rem)`};
 `;
-function Story(props: StoryProps) {
-  const { content, caption } = props;
+
+function Story({ content, caption, isPaused, isImage, onFinish }: StoryProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  useEffect(() => {
+    if (!isPaused) {
+      videoRef.current?.play();
+    } else {
+      videoRef.current?.pause();
+    }
+  }, [isPaused]);
   return (
-    <StyledImageContainer>
-      <ModalImage
-        small={STATIC_MEDIA_URL + content}
-        large={STATIC_MEDIA_URL + content}
-        alt={caption}
-        hideDownload={true}
-        hideZoom={true}
-      />
-      {caption && (
-        <StyledCaption $captionLength={caption.length}>{caption}</StyledCaption>
+    <Container>
+      {isImage ? (
+        <ModalImage
+          small={STATIC_MEDIA_URL + content}
+          large={STATIC_MEDIA_URL + content}
+          alt={caption}
+          hideDownload={true}
+          hideZoom={true}
+        />
+      ) : (
+        <Video controls={false} ref={videoRef} onEnded={onFinish}>
+          <source src={`${STATIC_MEDIA_URL}${content}`} />
+        </Video>
       )}
-    </StyledImageContainer>
+      {caption && <Caption $captionLength={caption.length}>{caption}</Caption>}
+    </Container>
   );
 }
 
diff --git a/app/src/features/stories/components/StoryIcon.tsx b/app/src/features/stories/components/StoryIcon.tsx
index bf6bf2f5..0d3695f6 100644
--- a/app/src/features/stories/components/StoryIcon.tsx
+++ b/app/src/features/stories/components/StoryIcon.tsx
@@ -12,7 +12,7 @@ interface StoryIconProps {
   isMyStory?: boolean;
 }
 
-const StyledContainer = styled.div<{ $isCollapsed: boolean }>`
+const Container = styled.div<{ $isCollapsed: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -28,7 +28,7 @@ const StyledContainer = styled.div<{ $isCollapsed: boolean }>`
     background-color: rgba(0, 0, 0, 0.1);
   }
 `;
-const StyledImageContainer = styled.div<{
+const Image = styled.div<{
   $isMyStory?: boolean;
 }>`
   height: 48px;
@@ -42,7 +42,7 @@ const StyledImageContainer = styled.div<{
   display: block;
 `;
 
-const StyledName = styled.p`
+const Name = styled.p`
   margin-top: 0.3rem;
   font-size: 0.7rem;
   color: var(--secondary-text-color);
@@ -62,12 +62,12 @@ function StoryIcon(props: StoryIconProps) {
   };
 
   return (
-    <StyledContainer $isCollapsed={isCollapsed} onClick={handleIconClicked}>
-      <StyledImageContainer $isMyStory={isMyStory}>
+    <Container $isCollapsed={isCollapsed} onClick={handleIconClicked}>
+      <Image $isMyStory={isMyStory}>
         <Avatar name={name} image={photo} />
-      </StyledImageContainer>
-      {!isCollapsed && <StyledName>{displayName}</StyledName>}
-    </StyledContainer>
+      </Image>
+      {!isCollapsed && <Name>{displayName}</Name>}
+    </Container>
   );
 }
 
diff --git a/app/src/features/stories/components/StoryList.tsx b/app/src/features/stories/components/StoryList.tsx
index 1c2f0785..eb83a0a7 100644
--- a/app/src/features/stories/components/StoryList.tsx
+++ b/app/src/features/stories/components/StoryList.tsx
@@ -15,7 +15,7 @@ interface StoryListProps {
   };
 }
 
-const StyledStoryListContainer = styled.div`
+const Container = styled.div`
   position: relative;
   width: 100%;
   height: 10rem;
@@ -91,7 +91,7 @@ function StoryList(props: StoryListProps) {
           onClose={() => handleStoryClick("")}
         />
       )}
-      <StyledStoryListContainer>
+      <Container>
         <CloseButton onClose={onClose} data-testid="close-story-list" />
         <StyledStoryList data-testid="storylist">
           {myStories?.length > 0 && (
@@ -118,7 +118,7 @@ function StoryList(props: StoryListProps) {
             />
           ))}
         </StyledStoryList>
-      </StyledStoryListContainer>
+      </Container>
     </>
   );
 }
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index 6c9c840b..209efc2e 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -7,7 +7,7 @@ import CollapsedList from "@components/CollapsedList";
 import StoryList from "./StoryList";
 import StoryIcon from "./StoryIcon";
 
-const StyledContainer = styled.div<{ $isOpened: boolean }>`
+const Container = styled.div<{ $isOpened: boolean }>`
   width: 100%;
   ${(props) =>
     !props.$isOpened
@@ -32,12 +32,12 @@ const StyledContainer = styled.div<{ $isOpened: boolean }>`
 function StoryListContainer() {
   const { stories: userStoriesData } = useStroies();
   const userStories = userStoriesData?.data?.filter(
-    (userStory) => userStory.stories.length > 0,
+    (userStory) => userStory.stories.length > 0
   );
   const { myStories: myStoriesData } = useMyStroies();
   const myStories = myStoriesData?.data?.stories;
   const [isOpened, setIsOpened] = useState(
-    userStories?.length || myStories?.length,
+    userStories?.length || myStories?.length
   );
   const { userInfo } = useAppSelector((state) => state.user);
 
@@ -48,7 +48,7 @@ function StoryListContainer() {
     setIsOpened(userStories?.length || myStories?.length);
   }, [myStories, userStories]);
   return (
-    <StyledContainer $isOpened={isOpened} data-testid="story-list-container">
+    <Container $isOpened={isOpened} data-testid="story-list-container">
       {isOpened ? (
         <StoryList
           userStories={userStories}
@@ -73,7 +73,7 @@ function StoryListContainer() {
           list={userStories?.length !== 0 ? userStories : myStories}
         />
       )}
-    </StyledContainer>
+    </Container>
   );
 }
 
diff --git a/app/src/features/stories/components/StoryPreview.tsx b/app/src/features/stories/components/StoryPreview.tsx
index 149f0f6a..879d7726 100644
--- a/app/src/features/stories/components/StoryPreview.tsx
+++ b/app/src/features/stories/components/StoryPreview.tsx
@@ -10,6 +10,8 @@ interface StoryPreviewProps {
   onClose: () => void;
   isOpen: boolean;
 }
+
+// Styled Components
 const StyledContainer = styled.div`
   cursor: pointer;
   position: fixed;
@@ -27,40 +29,42 @@ const StyledContainer = styled.div`
   flex-direction: column;
   background-color: #000;
 `;
-const StyledImageContainer = styled.div`
+
+const MediaContainer = styled.div`
   width: 80%;
   height: 80%;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  div {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--color-background);
+  background-color: var(--color-background);
+  border-radius: var(--border-radius-default);
+
+  img,
+  video {
+    width: 80vw;
+    height: 80vh;
+    object-fit: cover;
     border-radius: var(--border-radius-default);
-    img {
-      width: 80vw;
-      height: 80vh;
-      object-fit: cover !important;
-    }
   }
 `;
-const StyledCaption = styled.input`
+
+const Caption = styled.input`
   width: 80%;
   padding: 1rem;
   border-radius: 0.5rem;
   background-color: var(--color-background);
-  color: var(--text-color);
+  color: white;
   font-size: 1rem;
 `;
+
 const SendContainer = styled.form`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;
 `;
+
 const SubmitButton = styled.button`
   --button-width: 3.2rem;
   background-color: var(--accent-color);
@@ -77,32 +81,43 @@ const SubmitButton = styled.button`
   box-shadow: 0 0 0.1rem var(--accent-color);
 `;
 
-function StoryPreview(props: StoryPreviewProps) {
-  const { story, onClose, isOpen } = props;
+function StoryPreview({ story, onClose, isOpen }: StoryPreviewProps) {
   const [caption, setCaption] = useState("");
   const { postStory } = usePostStory();
-  const sendStory = () => {
-    if (story) postStory({ story, caption });
-    handleClose();
-  };
 
   const handleClose = () => {
     setCaption("");
     onClose();
   };
+
+  const sendStory = () => {
+    if (story) postStory({ story, caption });
+    handleClose();
+  };
+
   if (!story) return null;
+
+  const isImage = story.type.startsWith("image");
+
   return (
     <Popup isOpen={isOpen} onClose={handleClose}>
       <StyledContainer>
-        <StyledImageContainer>
-          <ModalImage
-            small={URL.createObjectURL(story!)}
-            medium={URL.createObjectURL(story!)}
-            alt="story"
-          />
-        </StyledImageContainer>
+        <MediaContainer>
+          {isImage ? (
+            <ModalImage
+              small={URL.createObjectURL(story)}
+              medium={URL.createObjectURL(story)}
+              alt="Story"
+            />
+          ) : (
+            <video controls>
+              <source src={URL.createObjectURL(story)} type={story.type} />
+              Your browser does not support the video tag.
+            </video>
+          )}
+        </MediaContainer>
         <SendContainer>
-          <StyledCaption
+          <Caption
             type="text"
             id="caption"
             data-testid="caption"
@@ -112,9 +127,11 @@ function StoryPreview(props: StoryPreviewProps) {
             maxLength={100}
           />
           <SubmitButton
-            onClick={sendStory}
+            onClick={(e) => {
+              e.preventDefault();
+              sendStory();
+            }}
             data-testid="send-story"
-            type="submit"
           >
             {getIcon("Send")}
           </SubmitButton>
diff --git a/app/src/features/stories/components/StorySlide.tsx b/app/src/features/stories/components/StorySlide.tsx
index 53c96f17..faf3dbd2 100644
--- a/app/src/features/stories/components/StorySlide.tsx
+++ b/app/src/features/stories/components/StorySlide.tsx
@@ -22,7 +22,7 @@ interface StorySlideProps {
   onClose: () => void;
 }
 
-const StyledContainer = styled.div`
+const Container = styled.div`
   cursor: pointer;
   position: fixed;
   top: 0;
@@ -51,7 +51,7 @@ const StyledSlide = styled.div`
   width: 60%;
 `;
 
-const StyledNavButton = styled.div<{ isLeft?: boolean }>`
+const NavButton = styled.div<{ isLeft?: boolean }>`
   position: absolute;
   top: 50%;
   ${({ isLeft }) => (isLeft ? "left: 0;" : "right: 0;")}
@@ -108,6 +108,7 @@ function StorySlide(props: StorySlideProps) {
       getNextUserStories();
       setIndex(0);
     }
+    setIsPaused(false);
   };
 
   const handlePause = useCallback(() => {
@@ -128,7 +129,7 @@ function StorySlide(props: StorySlideProps) {
         onClose();
       }
     },
-    [onClose],
+    [onClose]
   );
   const handleSpaceKey = useCallback(
     (e: KeyboardEvent) => {
@@ -136,7 +137,7 @@ function StorySlide(props: StorySlideProps) {
         handlePause();
       }
     },
-    [handlePause],
+    [handlePause]
   );
   const handleLeftArrow = useCallback(() => {
     if (index > 0) {
@@ -158,7 +159,7 @@ function StorySlide(props: StorySlideProps) {
         handleEcsKey(e);
       }
     },
-    [handleRightArrow, handleLeftArrow, handleSpaceKey, handleEcsKey],
+    [handleRightArrow, handleLeftArrow, handleSpaceKey, handleEcsKey]
   );
 
   const handleDelete = () => {
@@ -183,23 +184,32 @@ function StorySlide(props: StorySlideProps) {
   if (!stories.length) {
     return null;
   }
+  const isImage =
+    stories[index].content.includes(".jpg") ||
+    stories[index].content.includes(".png") ||
+    stories[index].content.includes(".jpeg") ||
+    stories[index].content.includes(".gif") ||
+    stories[index].content.includes(".webp") ||
+    stories[index].content.includes(".svg") ||
+    stories[index].content.includes(".bmp");
 
   return (
     <Popup isOpen={true} onClose={onClose}>
-      <StyledContainer>
+      <Container>
         <CloseButton onClose={onClose} />
         <StyledSlide ref={ref} className="story">
-          <StyledNavButton isLeft onClick={handleLeftArrow}>
+          <NavButton isLeft onClick={handleLeftArrow}>
             {getIcon("LeftArrow")}
-          </StyledNavButton>
-          <StyledNavButton onClick={handleRightArrow}>
+          </NavButton>
+          <NavButton onClick={handleRightArrow}>
             {getIcon("RightArrow")}
-          </StyledNavButton>
+          </NavButton>
           <StorySlideCounter
             isPaused={isPaused}
             currentIndex={index}
             totalSlides={stories.length}
             onSlideChange={handleSlideChange}
+            isImage={isImage}
           />
           <StorySliderTooltip
             isMine={isMine}
@@ -216,6 +226,9 @@ function StorySlide(props: StorySlideProps) {
             />
           </StyledUserInfo>
           <Story
+            onFinish={handleSlideChange}
+            isPaused={isPaused}
+            isImage={isImage}
             content={stories[index].content}
             caption={stories[index].caption || ""}
           />
@@ -227,7 +240,7 @@ function StorySlide(props: StorySlideProps) {
             </ViewsContainer>
           )}
         </StyledSlide>
-      </StyledContainer>
+      </Container>
     </Popup>
   );
 }
diff --git a/app/src/features/stories/components/StorySlideCounter.tsx b/app/src/features/stories/components/StorySlideCounter.tsx
index cf6ab932..c1ace0b8 100644
--- a/app/src/features/stories/components/StorySlideCounter.tsx
+++ b/app/src/features/stories/components/StorySlideCounter.tsx
@@ -6,6 +6,7 @@ interface StorySlideCounterProps {
   totalSlides: number;
   isPaused: boolean;
   onSlideChange: (index: number) => void;
+  isImage: boolean;
 }
 interface SegmentProps {
   $progress: number;
@@ -39,14 +40,15 @@ const Segment = styled.div<SegmentProps>`
 `;
 
 function StorySlideCounter(props: StorySlideCounterProps) {
-  const { currentIndex, totalSlides, onSlideChange, isPaused } = props;
+  const { currentIndex, totalSlides, onSlideChange, isPaused, isImage } = props;
   const [progress, setProgress] = useState(0);
   const [viewedStories, setViewedStories] = useState(
-    Array(totalSlides).fill(false),
+    Array(totalSlides).fill(false)
   );
 
   useEffect(() => {
     if (isPaused) return;
+    if (!isImage) return;
     const interval = setInterval(() => {
       setProgress((prev) => prev + 1);
     }, 50);
@@ -62,7 +64,7 @@ function StorySlideCounter(props: StorySlideCounterProps) {
     }
 
     return () => clearInterval(interval);
-  }, [progress, currentIndex, totalSlides, onSlideChange, isPaused]);
+  }, [progress, currentIndex, totalSlides, onSlideChange, isPaused, isImage]);
 
   return (
     <StyledSliderContainer>
diff --git a/app/src/features/stories/components/StorySliderTooltip.tsx b/app/src/features/stories/components/StorySliderTooltip.tsx
index 2f81acc4..c3d2337b 100644
--- a/app/src/features/stories/components/StorySliderTooltip.tsx
+++ b/app/src/features/stories/components/StorySliderTooltip.tsx
@@ -20,7 +20,7 @@ const StyledToolTip = styled.div`
   align-items: center;
   gap: 0.5rem;
 `;
-const StyledButton = styled.div`
+const Button = styled.div`
   cursor: pointer;
   color: white;
   svg {
@@ -32,13 +32,11 @@ function StorySliderTooltip(props: StorySliderTooltipProps) {
   return (
     <StyledToolTip>
       {isPaused ? (
-        <StyledButton onClick={onPause}>{getIcon("Play")}</StyledButton>
+        <Button onClick={onPause}>{getIcon("Play")}</Button>
       ) : (
-        <StyledButton onClick={onPause}>{getIcon("Pause")}</StyledButton>
-      )}
-      {isMine && (
-        <StyledButton onClick={onDelete}>{getIcon("Delete")}</StyledButton>
+        <Button onClick={onPause}>{getIcon("Pause")}</Button>
       )}
+      {isMine && <Button onClick={onDelete}>{getIcon("Delete")}</Button>}
     </StyledToolTip>
   );
 }
diff --git a/app/src/features/stories/components/UserInfo.tsx b/app/src/features/stories/components/UserInfo.tsx
index 132e6cd0..eae163d9 100644
--- a/app/src/features/stories/components/UserInfo.tsx
+++ b/app/src/features/stories/components/UserInfo.tsx
@@ -8,7 +8,7 @@ interface UserInfoProps {
   elapsedTime: string;
   isVertical?: boolean;
 }
-const StyledStoryHeader = styled.div`
+const StoryHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -33,7 +33,7 @@ const StyledUserInfo = styled.div<{ $isVertical?: boolean }>`
     color: white !important;
   }
 `;
-const StyledElapsedTime = styled.p`
+const ElapsedTime = styled.p`
   font-size: 0.8rem;
   color: white;
   text-align: left;
@@ -42,13 +42,13 @@ function UserInfo(props: UserInfoProps) {
   const { name, photo, elapsedTime, isVertical } = props;
 
   return (
-    <StyledStoryHeader>
+    <StoryHeader>
       <Avatar name={name} image={photo} />
       <StyledUserInfo $isVertical={isVertical}>
         <Heading as="h5">{name}</Heading>
-        <StyledElapsedTime>{elapsedTime}</StyledElapsedTime>
+        <ElapsedTime>{elapsedTime}</ElapsedTime>
       </StyledUserInfo>
-    </StyledStoryHeader>
+    </StoryHeader>
   );
 }
 
diff --git a/app/src/features/stories/hooks/useDeleteStory.ts b/app/src/features/stories/hooks/useDeleteStory.ts
index ff9c419e..14693f89 100644
--- a/app/src/features/stories/hooks/useDeleteStory.ts
+++ b/app/src/features/stories/hooks/useDeleteStory.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { DeleteStory as DeleteStoryAPI } from "../services/deleteStory";
+import { DeleteStory as DeleteStoryAPI } from "../services/apiDeleteStory";
 import toast from "react-hot-toast";
 
 function useDeleteStory() {
diff --git a/app/src/features/stories/hooks/useMyStories.ts b/app/src/features/stories/hooks/useMyStories.ts
index 6cbee671..685dffba 100644
--- a/app/src/features/stories/hooks/useMyStories.ts
+++ b/app/src/features/stories/hooks/useMyStories.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { getMyStories as getMyStoriesAPI } from "../services/getMyStories";
+import { getMyStories as getMyStoriesAPI } from "../services/apiGetMyStories";
 
 function useMyStroies() {
   const {
diff --git a/app/src/features/stories/hooks/usePostStory.ts b/app/src/features/stories/hooks/usePostStory.ts
index 9fab7130..3890fd68 100644
--- a/app/src/features/stories/hooks/usePostStory.ts
+++ b/app/src/features/stories/hooks/usePostStory.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { postStory as postStoryAPI } from "../services/postStory";
+import { postStory as postStoryAPI } from "../services/apiPostStory";
 import toast from "react-hot-toast";
 function usePostStory() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/stories/hooks/useStories.ts b/app/src/features/stories/hooks/useStories.ts
index d288006c..8541fec9 100644
--- a/app/src/features/stories/hooks/useStories.ts
+++ b/app/src/features/stories/hooks/useStories.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { getStories as getStoriesAPI } from "../services/getStories";
+import { getStories as getStoriesAPI } from "../services/apiGetStories";
 
 function useStroies() {
   const {
diff --git a/app/src/features/stories/hooks/useViewStory.ts b/app/src/features/stories/hooks/useViewStory.ts
index 31e8cd44..dad9ab60 100644
--- a/app/src/features/stories/hooks/useViewStory.ts
+++ b/app/src/features/stories/hooks/useViewStory.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { viewStory as viewStoryAPI } from "../services/viewStory";
+import { viewStory as viewStoryAPI } from "../services/apiViewStory";
 
 function useViewStory() {
   const queryClient = useQueryClient();
diff --git a/app/src/features/stories/services/deleteStory.ts b/app/src/features/stories/services/apiDeleteStory.ts
similarity index 100%
rename from app/src/features/stories/services/deleteStory.ts
rename to app/src/features/stories/services/apiDeleteStory.ts
diff --git a/app/src/features/stories/services/getMyStories.ts b/app/src/features/stories/services/apiGetMyStories.ts
similarity index 100%
rename from app/src/features/stories/services/getMyStories.ts
rename to app/src/features/stories/services/apiGetMyStories.ts
diff --git a/app/src/features/stories/services/getStories.ts b/app/src/features/stories/services/apiGetStories.ts
similarity index 100%
rename from app/src/features/stories/services/getStories.ts
rename to app/src/features/stories/services/apiGetStories.ts
diff --git a/app/src/features/stories/services/postStory.ts b/app/src/features/stories/services/apiPostStory.ts
similarity index 100%
rename from app/src/features/stories/services/postStory.ts
rename to app/src/features/stories/services/apiPostStory.ts
diff --git a/app/src/features/stories/services/viewStory.ts b/app/src/features/stories/services/apiViewStory.ts
similarity index 100%
rename from app/src/features/stories/services/viewStory.ts
rename to app/src/features/stories/services/apiViewStory.ts
diff --git a/app/src/mocks/privacy-settings/privacySettings.ts b/app/src/mocks/privacy-settings/privacySettings.ts
index a0f3bd85..1b0228a4 100644
--- a/app/src/mocks/privacy-settings/privacySettings.ts
+++ b/app/src/mocks/privacy-settings/privacySettings.ts
@@ -1,6 +1,6 @@
 import blockList from "@mocks/data/blocklist";
 import { allChats } from "@mocks/data/chats";
-import { endPts } from "features/privacy-settings/service/changeSettings";
+import { endPts } from "@features/privacy-settings/service/apiChangeSettings";
 import { http, HttpResponse } from "msw";
 import { activeStatesStrings, privacyStatesStrings } from "types/sideBar";
 
@@ -15,7 +15,7 @@ export const privacySettingsMock = [
       const body = await request.json();
       if (!body.privacy) return HttpResponse.json({}, { status: 401 });
       return HttpResponse.json({}, { status: 200 });
-    },
+    }
   ),
 
   http.get("/users/block", async () => {
@@ -46,7 +46,7 @@ export const privacySettingsMock = [
     if (index === -1)
       return HttpResponse.json(
         { status: "user not in block list" },
-        { status: 404 },
+        { status: 404 }
       );
 
     blockList.splice(index, 1);
diff --git a/app/src/types/story.ts b/app/src/types/story.ts
index 8f122e03..c209d8f7 100644
--- a/app/src/types/story.ts
+++ b/app/src/types/story.ts
@@ -8,11 +8,9 @@ interface story {
   viewed?: boolean;
 }
 interface userStories {
-  userId: string;
   userId: string;
   name: string;
   photo: string;
-  photo: string;
   stories: story[];
 }
 

From 84986178568bf9bc6f5d5c9b95417c8d62a42033 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:32:37 +0200
Subject: [PATCH 068/136] :bug: (messaging): Solved interface problems with BE
 (#106)

* :bug: (messaging): forward bug fixed

* :bug: (messaging): fixing edit bug

* :bug: (messaging): fixing icon size

* :bug: (messaging): fixing interface with BE (messages back to life) :fire:
---
 app/src/features/chats/ChatBody.tsx           |  13 +-
 app/src/features/chats/helpers.ts             |  56 ++++--
 app/src/features/chats/hooks/useChatMember.ts |  10 +-
 app/src/features/chats/hooks/useChats.ts      |   2 +-
 .../features/chats/hooks/useMessageSender.ts  |   2 +-
 app/src/mocks/data/chats.ts                   | 170 +++++++++++-------
 app/src/sockets/SocketProvider.tsx            |  13 +-
 7 files changed, 168 insertions(+), 98 deletions(-)

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 7848b7f6..bd9b027d 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -59,8 +59,6 @@ function ChatBody() {
     }
   }, [fetchNextPage, inView]);
 
-  console.log(data?.pages);
-
   //TODO: fix the ordering of pages and message within each page
   //TODO: fix new page scroll to the top most message
   return (
@@ -69,15 +67,8 @@ function ChatBody() {
         <div ref={ref}></div>
 
         {messages &&
-          messages.map((data, index) => {
-            return (
-              <Message
-                key={data._id}
-                index={index}
-                messagesLength={messages.length}
-                data={data}
-              />
-            );
+          messages.map((data) => {
+            return <Message key={data._id} data={data} />;
           })}
       </ScrollContainer>
     </>
diff --git a/app/src/features/chats/helpers.ts b/app/src/features/chats/helpers.ts
index f138c0b9..ae89868d 100644
--- a/app/src/features/chats/helpers.ts
+++ b/app/src/features/chats/helpers.ts
@@ -1,5 +1,5 @@
 import { DetailedChatInterface } from "@state/messages/chats";
-import { ChatDataType } from "@mocks/data/chats";
+import { ChatDataType, ChatMember } from "@mocks/data/chats";
 
 export function getChatByID({
   chats,
@@ -11,17 +11,49 @@ export function getChatByID({
   return chats.find((chat) => chat._id === chatID);
 }
 
-export function parseChatsToState(chatData?: ChatDataType) {
+export function parseChatsToState(chatData?: any) {
   if (!chatData) return [];
+  return chatData.chats.map((chat: any): DetailedChatInterface => {
+    const { isMuted, draft, chat: currChat } = chat;
+    const {
+      _id: chatId,
+      isSeen,
+      members,
+      type,
+      isDeleted,
+      numberOfMembers,
+    } = currChat;
 
-  return chatData.chats.map((chat) => ({
-    ...chat,
-    lastMessage: chatData.lastMessages.find(
-      (lastMessage) => lastMessage.chatId === chat._id,
-    )?.lastMessage,
-    messages: [],
-    isTyping: false,
-    showCheckBox: false,
-    selectedMessages: [],
-  }));
+    const filteredMembers = members.map((member: any) => {
+      return {
+        _id: member.user,
+        Role: member.Role,
+      } as ChatMember;
+    });
+
+    const incomingLastMessage = chatData.lastMessages.find(
+      (lastMessage: any) => lastMessage.chatId === chatId
+    )?.lastMessage;
+
+    return {
+      _id: chatId,
+      isSeen: isSeen,
+      isDeleted: isDeleted,
+      members: filteredMembers,
+      type: type,
+      numberOfMembers: numberOfMembers,
+
+      lastMessage: {
+        _id: incomingLastMessage?.id,
+        content: incomingLastMessage?.content,
+        senderId: incomingLastMessage?.senderId,
+        timestamp: incomingLastMessage?.timestamp,
+      },
+
+      messages: [],
+      isTyping: false,
+      showCheckBox: false,
+      selectedMessages: [],
+    } as DetailedChatInterface;
+  });
 }
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMember.ts
index 1b6f4bfd..b763df6b 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMember.ts
@@ -1,13 +1,15 @@
 import { useAppSelector } from "@hooks/useGlobalState";
-import { Member } from "@mocks/data/chats";
+import { ChatMember, Member } from "@mocks/data/chats";
 
-export function useChatMembers(memberIDs?: string[]): Member[] {
+export function useChatMembers(memberIDs?: ChatMember[]): Member[] {
   const user = useAppSelector((state) => state.user.userInfo);
   const members = useAppSelector((state) => state.chats.members);
   if (!memberIDs || !members) return [];
 
   return memberIDs
-    .filter((memberID) => memberID !== user.id) // Exclude the specific ID
-    .map((filteredID) => members.find((member) => member._id === filteredID))
+    .filter((memberID) => memberID._id !== user.id) // Exclude the specific ID
+    .map((filteredID) =>
+      members.find((member) => member._id === filteredID._id)
+    )
     .filter((member): member is Member => member !== undefined); // Ensure no undefined values
 }
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index e45e2b72..8ecb9ce1 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -20,7 +20,7 @@ export function useChats() {
     };
 
     dispatch(setAllChats({ chatsData: initialChatState }));
-  }, [isPending, chatData]);
+  }, [isPending, chatData, dispatch]);
 
   return { isPending };
 }
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 98409763..fa116f78 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -14,7 +14,7 @@ export const useMessageSender = () => {
     type: ContentType = "text"
   ) => {
     if (activeMessage?.id && activeMessage.state === "edit") {
-      editMessage(activeMessage?.id!, data, chatId!);
+      editMessage(activeMessage?.id, data, chatId!);
       return;
     }
 
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 88706ef1..24154817 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -7,13 +7,21 @@ export type Member = {
   photo: string;
   status: string;
   isAdmin: boolean;
+  stories: string[];
+  blockedUsers: string[];
   Role: "member" | "admin" | "creator";
 };
 
+export type ChatMember = {
+  Role: "member" | "admin";
+  _id: string;
+};
+
 export type Chat = {
   _id: string;
   isSeen: boolean;
-  members: string[];
+  isDeleted: boolean;
+  members: ChatMember[];
   type: "private" | "group" | "channel";
   numberOfMembers: number;
 };
@@ -32,71 +40,71 @@ export type ChatDataType = {
   }[];
 };
 
-export const allChats: Chat[] = [
-  {
-    _id: "1",
-    isSeen: false,
-    members: ["1", "2"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "2",
-    isSeen: false,
-    members: ["2", "1"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "3",
-    isSeen: false,
-    members: ["3"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "4",
-    isSeen: false,
-    members: ["4"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "5",
-    isSeen: false,
-    members: ["5"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "6",
-    isSeen: false,
-    members: ["6"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "7",
-    isSeen: false,
-    members: ["7"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "8",
-    isSeen: false,
-    members: ["8"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "9",
-    isSeen: false,
-    members: ["9"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-];
+// export const allChats: Chat[] = [
+//   {
+//     _id: "1",
+//     isSeen: false,
+//     members: ["1", "2"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "2",
+//     isSeen: false,
+//     members: ["2", "1"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "3",
+//     isSeen: false,
+//     members: ["3"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "4",
+//     isSeen: false,
+//     members: ["4"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "5",
+//     isSeen: false,
+//     members: ["5"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "6",
+//     isSeen: false,
+//     members: ["6"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "7",
+//     isSeen: false,
+//     members: ["7"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "8",
+//     isSeen: false,
+//     members: ["8"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "9",
+//     isSeen: false,
+//     members: ["9"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+// ];
 
 export const members: Member[] = [
   {
@@ -109,6 +117,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "2",
@@ -120,6 +130,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "3",
@@ -131,6 +143,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "4",
@@ -142,6 +156,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "5",
@@ -153,6 +169,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "6",
@@ -164,6 +182,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "7",
@@ -175,6 +195,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "8",
@@ -186,6 +208,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "9",
@@ -197,6 +221,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "10",
@@ -208,6 +234,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "11",
@@ -219,6 +247,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "12",
@@ -230,6 +260,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "13",
@@ -241,6 +273,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "14",
@@ -252,6 +286,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
   {
     _id: "15",
@@ -263,6 +299,8 @@ export const members: Member[] = [
     status: "active",
     isAdmin: false,
     Role: "member",
+    stories: [],
+    blockedUsers: [],
   },
 ];
 
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 0019dd89..9bc34cf9 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -63,7 +63,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         });
       });
 
-      socket.on("RECEIVE_MESSAGE", (message: MessageInterface) => {
+      socket.on("RECEIVE_MESSAGE", (message) => {
         console.log("inside recieve");
         console.log(message);
         handleIncomingMessage(dispatch, message, message.chatId);
@@ -146,14 +146,21 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
+      const messageToSend = {
+        ...sentMessage,
+        isFirstTime: false,
+        chatType: "private",
+        threadMessages: [],
+      };
+      console.log("messageToSend", messageToSend);
       socket.emit(
         "SEND_MESSAGE",
-        { ...sentMessage, isFirstTime: false, chatType: "private" },
+        messageToSend,
         ({ success, message, res }: AcknowledgmentResponse) => {
           console.log("I'm inside send event!!");
           console.log(success);
           if (!success) {
-            console.log(res);
+            console.log("Failed to send", res);
           }
           if (success) {
             console.log(message);

From 8fa3e069402da8530b7a525685caffa443885aa9 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:40:03 +0200
Subject: [PATCH 069/136] =?UTF-8?q?=F0=9F=92=84=20(groups):=20Finish=20cre?=
 =?UTF-8?q?ate=20group=20ui=20(#107)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 (groups): Finished create group ui

* 💄 (groups): Finish create group ui
---
 app/src/components/Checkbox.tsx               |  65 +++++++++++
 app/src/components/CircleIcon.tsx             |  14 +++
 app/src/components/UploadImage.tsx            | 105 ++++++++++++++++++
 app/src/components/User.tsx                   |  76 +++++++++++++
 app/src/components/UsersList.tsx              |  81 ++++++++++++++
 app/src/components/side-bar/SideBar.tsx       |  12 ++
 .../side-bar/chats/SideBarMenuItem.tsx        |   3 +
 .../side-bar/groups/AddGroupMembers.tsx       |  14 +++
 .../settings/SettingsSideBarHeader.tsx        |   3 +-
 app/src/data/icons.tsx                        |   6 +
 app/src/data/sideBar.ts                       |  16 +++
 .../authentication/login/hooks/useUser.ts     |   1 -
 app/src/features/chats/ChatBody.tsx           |   3 +-
 app/src/features/chats/StartNewChat.tsx       |  14 +++
 .../chats/services/apiFetchNextPage.ts        |   4 -
 app/src/features/groups/CreateGroupForm.tsx   |  86 ++++++++++++++
 app/src/features/groups/NewGroup.tsx          |  54 +++++++++
 app/src/features/groups/hooks/useAllUsers.ts  |  26 +++++
 .../features/groups/services/createGroup.ts   |  28 +++++
 .../features/groups/services/getAllUsers.ts   |  20 ++++
 .../profile-settings/ProfileSettings.tsx      |   1 +
 app/src/main.tsx                              |  12 +-
 app/src/state/groups/selectedUsers.ts         |  28 +++++
 app/src/state/side-bar/sideBar.ts             |   6 +
 app/src/state/store.ts                        |   2 +
 app/src/types/sideBar.ts                      |   2 +
 app/src/utils/socket.tsx                      |   6 -
 27 files changed, 668 insertions(+), 20 deletions(-)
 create mode 100644 app/src/components/Checkbox.tsx
 create mode 100644 app/src/components/UploadImage.tsx
 create mode 100644 app/src/components/User.tsx
 create mode 100644 app/src/components/UsersList.tsx
 create mode 100644 app/src/components/side-bar/groups/AddGroupMembers.tsx
 create mode 100644 app/src/features/groups/CreateGroupForm.tsx
 create mode 100644 app/src/features/groups/NewGroup.tsx
 create mode 100644 app/src/features/groups/hooks/useAllUsers.ts
 create mode 100644 app/src/features/groups/services/createGroup.ts
 create mode 100644 app/src/features/groups/services/getAllUsers.ts
 create mode 100644 app/src/state/groups/selectedUsers.ts

diff --git a/app/src/components/Checkbox.tsx b/app/src/components/Checkbox.tsx
new file mode 100644
index 00000000..c02f15c7
--- /dev/null
+++ b/app/src/components/Checkbox.tsx
@@ -0,0 +1,65 @@
+import styled from "styled-components";
+
+const CheckboxWrapper = styled.label`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    width: 1.2em;
+    height: 1.2rem;
+    
+    margin-right: 1.5rem;
+
+    border: 2px solid var(--color-text-secondary);
+    border-radius: 4px;
+
+    background-color: var(--color-background);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: "";
+      width: 10px;
+      height: 5px;
+      border: solid white;
+      border-width: 0 0 2px 2px;
+      transform: scale(0) rotate(-45deg);
+      opacity: 0;
+      transition:
+        transform 0.2s ease,
+        opacity 0.2s ease;
+    }
+
+    &:checked {
+      background-color: var(--accent-color);
+
+      &::after {
+        transform: scale(1) rotate(-45deg);
+        opacity: 1;
+      }
+    }
+
+    &:focus {
+      outline: 2px solid var(--focus-color);
+    }
+  }
+`;
+
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+function Checkbox(props: CheckboxProps) {
+  return (
+    <CheckboxWrapper>
+      <input type="checkbox" {...props} />
+    </CheckboxWrapper>
+  );
+}
+
+export default Checkbox;
diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index bf445dc2..1e6e6345 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -12,6 +12,8 @@ interface CircleIconProps {
   $opacity?: number;
   onClick?: (e: Event, voiceNoteName?: string) => void;
   children?: React.ReactNode;
+  as?: React.ElementType;
+  type?: string;
 }
 
 const StyledCircleIcon = styled.div<CircleIconProps>`
@@ -43,6 +45,14 @@ const StyledCircleIcon = styled.div<CircleIconProps>`
     height: 100%;
     color: ${(props) => props.$color};
   }
+
+  ${(props) =>
+    props.as === "button" &&
+    css`
+      border: none;
+      outline: none;
+      cursor: pointer;
+    `};
 `;
 
 function CircleIcon({
@@ -56,6 +66,8 @@ function CircleIcon({
   $opacity = 0.9,
   onClick,
   children,
+  as,
+  type,
 }: CircleIconProps) {
   return (
     <StyledCircleIcon
@@ -69,6 +81,8 @@ function CircleIcon({
         $color,
         $bgColor,
         $opacity,
+        as,
+        type,
       }}
     >
       {getIcon($icon)}
diff --git a/app/src/components/UploadImage.tsx b/app/src/components/UploadImage.tsx
new file mode 100644
index 00000000..79d4b833
--- /dev/null
+++ b/app/src/components/UploadImage.tsx
@@ -0,0 +1,105 @@
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+
+const UploadProfilePictureContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  cursor: pointer;
+  z-index: 5;
+  &:hover svg {
+    transform: scale(1.2);
+  }
+  svg {
+    transition: all 0.2s ease-out;
+    transform-origin: center;
+    font-size: 3rem;
+  }
+`;
+
+const StyledImageInput = styled.input`
+  position: absolute;
+  top: calc(50% - 4rem);
+  left: calc(50% - 4rem);
+  width: 8rem;
+  height: 8rem;
+  opacity: 0;
+  z-index: 10;
+  cursor: pointer;
+`;
+
+const StyledProfileImage = styled.img`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  object-fit: cover;
+`;
+
+const DefaultProfilePicture = styled.div`
+  width: 8rem;
+  height: 8rem;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+  opacity: 0.8;
+`;
+
+const ProfilePictureSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background-color: var(--color-background);
+  position: relative;
+`;
+
+interface UploadImgProps {
+  setSelectedImageFile: (file: File | null) => void;
+  selectedImageFile?: File | null;
+}
+
+export default function UploadImage({
+  setSelectedImageFile,
+  selectedImageFile,
+}: UploadImgProps) {
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.files) {
+      const file = event.target.files[0];
+      setSelectedImageFile(file);
+    }
+  };
+
+  return (
+    <ProfilePictureSection>
+      <UploadProfilePictureContainer>
+        <StyledImageInput
+          type="file"
+          accept="image/*"
+          onChange={handleImageUpload}
+          data-testid="image-upload"
+          id="photo"
+        />
+        {getIcon("AddPhoto")}
+      </UploadProfilePictureContainer>
+
+      {selectedImageFile ? (
+        <StyledProfileImage
+          src={URL.createObjectURL(selectedImageFile)}
+          alt="Profile Picture"
+        />
+      ) : (
+        <DefaultProfilePicture />
+      )}
+    </ProfilePictureSection>
+  );
+}
diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
new file mode 100644
index 00000000..fe17e1fa
--- /dev/null
+++ b/app/src/components/User.tsx
@@ -0,0 +1,76 @@
+import styled from "styled-components";
+
+import Avatar from "./Avatar";
+import Checkbox from "./Checkbox";
+
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+
+import type { UserType } from "@features/groups/hooks/useAllUsers";
+import { toggleSelectUser } from "@state/groups/selectedUsers";
+
+const UserRow = styled.div`
+  display: flex;
+  align-items: center;
+
+  padding: 1rem;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-background-secondary);
+  }
+`;
+
+const UserDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Username = styled.span`
+  color: var(--color-text);
+`;
+
+const Status = styled.span`
+  font-size: small;
+  color: var(--color-text-secondary);
+`;
+
+type UserProps = {
+  user: UserType;
+  view: "display" | "update";
+};
+
+export default function User({ user, view }: UserProps) {
+  const { _id, photo, status, screenFirstName, screenLastName } = user;
+
+  const dispatch = useAppDispatch();
+  const selectedUsers = useAppSelector((state) => state.selectedUsers);
+
+  function handleToggleMember() {
+    if (view === "update") dispatch(toggleSelectUser(user));
+  }
+
+  return (
+    <UserRow onClick={handleToggleMember} key={_id}>
+      {view === "update" && (
+        <Checkbox
+          checked={selectedUsers.some(
+            (selectedUser) => selectedUser._id === _id
+          )}
+          onChange={handleToggleMember}
+        />
+      )}
+
+      <Avatar name={screenFirstName} image={photo} />
+      <UserDetails>
+        <Username>{`${screenFirstName} ${screenLastName}`}</Username>
+        <Status>{status}</Status>
+      </UserDetails>
+    </UserRow>
+  );
+}
diff --git a/app/src/components/UsersList.tsx b/app/src/components/UsersList.tsx
new file mode 100644
index 00000000..43141e5d
--- /dev/null
+++ b/app/src/components/UsersList.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useAppDispatch } from "@hooks/useGlobalState";
+import styled from "styled-components";
+
+import User from "./User";
+import CircleIcon from "./CircleIcon";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+
+import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 8.5rem);
+  overflow-y: scroll;
+  position: relative;
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  padding: 1rem;
+  font-size: 0.9rem;
+  caret-color: var(--accent-color);
+  color: var(--color-text);
+  outline: none;
+  border: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+`;
+
+function UsersList() {
+  const { users, isPending } = useAllUsers();
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const dispatch = useAppDispatch();
+
+  if (isPending) return null;
+
+  const filteredUsers = users?.filter((user) =>
+    `${user.screenFirstName} ${user.screenLastName}`
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <Container>
+      <SearchInput
+        type="text"
+        placeholder="Add people..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+      <StyledUsersList>
+        {filteredUsers?.map((user) => (
+          <User key={user._id} user={user} view="update" />
+        ))}
+      </StyledUsersList>
+
+      <CircleIcon
+        data-testid="confirm-add-members-button"
+        $icon="ArrowForward"
+        $right={1}
+        $bottom={2}
+        $size={3.3}
+        $padding={0.5}
+        $color="white"
+        $bgColor="var(--accent-color)"
+        $opacity={0.95}
+        onClick={() =>
+          dispatch(updateSideBarView({ redirect: sideBarPages.NEW_GROUP }))
+        }
+      />
+    </Container>
+  );
+}
+
+export default UsersList;
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 55ba6f4b..c605fa35 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -13,10 +13,12 @@ import { SideBarRowProps } from "./settings/side-bar-row/SideBarRow";
 import ProfileSettings from "@features/profile-settings/ProfileSettings";
 import ProfileInfo from "@features/profile-info/ProfileInfo";
 import ChatList from "@features/chats/ChatsList";
+import AddGroupMembers from "./groups/AddGroupMembers.js";
 
 import { useAppSelector } from "@hooks/useGlobalState";
 import BlockList from "@features/privacy-settings/BlockList";
 import Devices from "@features/devices/Devices";
+import NewGroup from "@features/groups/NewGroup.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -89,6 +91,16 @@ const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
       </SettingsSideBar>
     ),
     Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
+    AddMembers: () => (
+      <SettingsSideBar rows={[]}>
+        <AddGroupMembers />
+      </SettingsSideBar>
+    ),
+    NewGroup: () => (
+      <SettingsSideBar rows={[]}>
+        <NewGroup />
+      </SettingsSideBar>
+    ),
   };
 
 function Sidebar() {
diff --git a/app/src/components/side-bar/chats/SideBarMenuItem.tsx b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
index 2b438f21..4e68a0da 100644
--- a/app/src/components/side-bar/chats/SideBarMenuItem.tsx
+++ b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
@@ -1,5 +1,8 @@
 import styled from "styled-components";
 import { getIcon, iconStrings } from "../../../data/icons";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
 
 interface SideBarMenuItemProps {
   title: string;
diff --git a/app/src/components/side-bar/groups/AddGroupMembers.tsx b/app/src/components/side-bar/groups/AddGroupMembers.tsx
new file mode 100644
index 00000000..67e44324
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddGroupMembers.tsx
@@ -0,0 +1,14 @@
+import UsersList from "@components/UsersList";
+import styled from "styled-components";
+
+const Container = styled.div`
+  position: relative;
+`;
+
+export default function AddGroupMembers() {
+  return (
+    <Container>
+      <UsersList />
+    </Container>
+  );
+}
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index 1e748578..bfe77937 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -6,6 +6,7 @@ import CircleIcon from "@components/CircleIcon";
 import { useLogout } from "@features/authentication/logout/hooks/useLogout";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
+
 const StyledSideBarHeader = styled.div`
   height: 4rem !important;
   position: relative;
@@ -58,7 +59,7 @@ function SettingsSideBarHeader() {
           />
           <CircleIcon
             data-testid="logout-icon"
-            onClick={logout}
+            onClick={() => logout}
             $icon="Logout"
             $padding={0.2}
             $size={1.8}
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 1367a1ba..42b0b8b2 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -56,6 +56,7 @@ enum icons {
   Email,
   Info,
   Phone,
+  ArrowForward,
 }
 
 type iconStrings = keyof typeof icons;
@@ -384,6 +385,11 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/Phone"),
     defaultProps: { fontSize: "large" },
   },
+
+  ArrowForward: {
+    importFn: () => import("@mui/icons-material/ArrowForward"),
+    defaultProps: { fontSize: "large" },
+  },
 };
 
 function getIcon(
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 1ade1869..4f6f6efe 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -82,6 +82,8 @@ const pagesMap: { [K in pagesStrings]: string } = {
   PROFILE_UPDATE: "ProfileUpdate",
   BLOCKED_USERS: "blockList",
   DEVICES: "Devices",
+  ADD_MEMBERS: "AddMembers",
+  NEW_GROUP: "NewGroup"
 };
 
 const settingsRows = [
@@ -200,6 +202,18 @@ const devices: SideBarView = {
   page: "DEVICES",
 };
 
+const addMembers: SideBarView = {
+  title: "AddMembers",
+  backView: sideBarPages.CHATS,
+  page: "ADD_MEMBERS",
+};
+
+const newGroup: SideBarView = {
+  title: "NewGroup",
+  backView: sideBarPages.ADD_MEMBERS,
+  page: "NEW_GROUP",
+};
+
 export {
   chats,
   contacts,
@@ -217,4 +231,6 @@ export {
   devices,
   pagesMap,
   blockList,
+  addMembers,
+  newGroup,
 };
diff --git a/app/src/features/authentication/login/hooks/useUser.ts b/app/src/features/authentication/login/hooks/useUser.ts
index b3172230..28996fea 100644
--- a/app/src/features/authentication/login/hooks/useUser.ts
+++ b/app/src/features/authentication/login/hooks/useUser.ts
@@ -8,7 +8,6 @@ export function useUser() {
   });
 
   const user = data?.user;
-  console.log(user);
 
   return { user, isPending };
 }
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index bd9b027d..d64af374 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -48,12 +48,11 @@ function ChatBody() {
       chatID: chatId,
     })?.messages;
 
-  const { fetchNextPage, data } = useFetchNextPage();
+  const { fetchNextPage } = useFetchNextPage();
 
   const { inView, ref } = useInView({ threshold: 0.5 });
 
   useEffect(() => {
-    console.log(inView);
     if (inView) {
       fetchNextPage();
     }
diff --git a/app/src/features/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
index 6f5f7364..656a8b43 100644
--- a/app/src/features/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -5,6 +5,9 @@ import SideBarMenuItem, {
 } from "@components/side-bar/chats/SideBarMenuItem";
 import CircleIcon from "@components/CircleIcon";
 import { useMouseLeave } from "@hooks/useMouseLeave";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
 
 interface StyledListProps {
   $bottom?: number;
@@ -48,9 +51,12 @@ const StyledList = styled.ul<StyledListProps>`
 function StartNewChat() {
   const [isMenuOpened, setIsMenuOpened] = useState(false);
   const ref = useMouseLeave(() => setIsMenuOpened(false), false);
+  const dispatch = useDispatch();
+
   const handleOpenMenu = () => {
     setIsMenuOpened((prevState) => !prevState);
   };
+
   return (
     <>
       <StyledCircleIconContainer>
@@ -78,6 +84,14 @@ function StartNewChat() {
               data-testid={`new-chat-menu-item-${id}`}
               {...item}
               key={id}
+              onClick={() => {
+                dispatch(
+                  updateSideBarView({
+                    redirect: sideBarPages.ADD_MEMBERS,
+                    data: undefined,
+                  })
+                );
+              }}
             />
           ))}
         </StyledList>
diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
index 63e510fc..e109ad80 100644
--- a/app/src/features/chats/services/apiFetchNextPage.ts
+++ b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -7,8 +7,6 @@ async function apiFetchNextPage({
   pageParam?: number;
   chatId: string;
 }) {
-  console.log(chatId);
-  console.log(pageParam);
   const res = await fetch(
     `${API_URL}/chats/messages/${chatId}?page=${pageParam}`,
     {
@@ -27,8 +25,6 @@ async function apiFetchNextPage({
     throw new Error(data.message);
   }
 
-  console.log(data);
-
   if (data.status !== "success") {
     throw new Error(data.message);
   }
diff --git a/app/src/features/groups/CreateGroupForm.tsx b/app/src/features/groups/CreateGroupForm.tsx
new file mode 100644
index 00000000..dd8c985f
--- /dev/null
+++ b/app/src/features/groups/CreateGroupForm.tsx
@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useForm } from "react-hook-form";
+import styled from "styled-components";
+
+import FloatingLabelInput from "@components/inputs/float-label-input/FloatingLabelInput";
+import UploadImage from "@components/UploadImage";
+import CircleIcon from "@components/CircleIcon";
+import { NewGroupForm } from "./NewGroup";
+
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+import { useAppSelector } from "@hooks/useGlobalState";
+import { clearSelectedUsers } from "@state/groups/selectedUsers";
+
+const Form = styled.form`
+  padding: 1rem;
+  background-color: var(--color-background);
+
+  & button {
+    z-index: 1;
+  }
+`;
+
+function GroupInfoForm() {
+  const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
+  const { register, handleSubmit, watch } = useForm<NewGroupForm>({
+    mode: "onChange",
+    defaultValues: {
+      photo: "",
+      groupName: "",
+    },
+  });
+
+  const groupName = watch("groupName");
+  const dispatch = useDispatch();
+  const members = useAppSelector((state) => state.selectedUsers);
+
+  const onSubmit = (data: NewGroupForm) => {
+    const newGroupData = {
+      groupName: data.groupName,
+      photo: selectedImageFile || null,
+      members: members.map((member) => member._id),
+    };
+
+    console.log("New Group Data:", newGroupData);
+    dispatch(updateSideBarView({ redirect: sideBarPages.CHATS }));
+    dispatch(clearSelectedUsers());
+  };
+
+  return (
+    <Form data-testid="new-group-form" onSubmit={handleSubmit(onSubmit)}>
+      <UploadImage
+        setSelectedImageFile={setSelectedImageFile}
+        selectedImageFile={selectedImageFile}
+      />
+
+      <FloatingLabelInput<NewGroupForm>
+        id="groupName"
+        label="Group Name"
+        register={register}
+        watch={watch}
+        data-testid="group-name"
+      />
+
+      {!!groupName && (
+        <CircleIcon
+          type="submit"
+          as="button"
+          data-testid="confirm-create-group-button"
+          $icon="ArrowForward"
+          $right={1}
+          $bottom={2}
+          $size={3.3}
+          $padding={0.5}
+          $color="white"
+          $bgColor="var(--accent-color)"
+          $opacity={0.95}
+        />
+      )}
+    </Form>
+  );
+}
+
+export default GroupInfoForm;
diff --git a/app/src/features/groups/NewGroup.tsx b/app/src/features/groups/NewGroup.tsx
new file mode 100644
index 00000000..7216af80
--- /dev/null
+++ b/app/src/features/groups/NewGroup.tsx
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+import User from "@components/User";
+import { useAppSelector } from "@hooks/useGlobalState";
+import CreateGroupForm from "./CreateGroupForm";
+
+export interface NewGroupForm {
+  photo: string;
+  groupName: string;
+}
+
+const Container = styled.div`
+  background-color: var(--color-background-secondary);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+
+  position: relative;
+  padding: 1rem 0;
+
+  background-color: var(--color-background);
+`;
+
+const Count = styled.span`
+  padding-left: 1rem;
+  color: var(--accent-color);
+
+  position: relative;
+`;
+
+export default function NewGroup() {
+  const members = useAppSelector((state) => state.selectedUsers);
+  const membersCount = members.length;
+
+  return (
+    <Container>
+      <CreateGroupForm />
+
+      {membersCount > 0 && (
+        <StyledUsersList>
+          <Count>{`${membersCount} member${membersCount > 1 ? "s" : ""}`}</Count>
+          {members?.map((user) => (
+            <User view="display" key={user._id} user={user} />
+          ))}
+        </StyledUsersList>
+      )}
+    </Container>
+  );
+}
diff --git a/app/src/features/groups/hooks/useAllUsers.ts b/app/src/features/groups/hooks/useAllUsers.ts
new file mode 100644
index 00000000..94bfbb8d
--- /dev/null
+++ b/app/src/features/groups/hooks/useAllUsers.ts
@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getAllUsers } from "../services/getAllUsers";
+
+type UserType = {
+  _id: string;
+  username: string;
+  screenFirstName: string;
+  screenLastName: string;
+  email: string;
+  photo: string;
+  status: string;
+  bio: string;
+};
+
+function useAllUsers() {
+  const { data: users, isPending } = useQuery<UserType[]>({
+    queryKey: ["users"],
+    queryFn: getAllUsers,
+  });
+
+  return { users, isPending };
+}
+
+export { useAllUsers };
+export type { UserType };
diff --git a/app/src/features/groups/services/createGroup.ts b/app/src/features/groups/services/createGroup.ts
new file mode 100644
index 00000000..7ab8080a
--- /dev/null
+++ b/app/src/features/groups/services/createGroup.ts
@@ -0,0 +1,28 @@
+import { API_URL } from "@constants";
+
+type dataType = {
+  name: string;
+  picture: string;
+  members: [];
+};
+
+async function createGroup(group: dataType) {
+  //TODO: change when the backend rename it😆
+  const res = await fetch(`${API_URL}/group`, {
+    method: "POST",
+    body: JSON.stringify(group),
+    headers: {
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+    credentials: "include",
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to create group");
+  }
+
+  const data = await res.json();
+  return data;
+}
+
+export { createGroup };
diff --git a/app/src/features/groups/services/getAllUsers.ts b/app/src/features/groups/services/getAllUsers.ts
new file mode 100644
index 00000000..24c809ae
--- /dev/null
+++ b/app/src/features/groups/services/getAllUsers.ts
@@ -0,0 +1,20 @@
+import { API_URL } from "@constants";
+
+export async function getAllUsers() {
+  const res = await fetch(`${API_URL}/users`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (data.status !== "success") {
+    throw new Error(data.message);
+  }
+
+  return data.data.users;
+}
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 7b30ea9d..36e3baf3 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -417,3 +417,4 @@ function ProfileSettings() {
 }
 
 export default ProfileSettings;
+export { SubmitButton };
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 36f4a42b..81323678 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,4 +1,4 @@
-// import { StrictMode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import { Provider } from "react-redux";
@@ -16,10 +16,10 @@ async function enableMocking() {
 
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
-    // <StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>,
-    // </StrictMode>
+    <StrictMode>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </StrictMode>
   );
 });
diff --git a/app/src/state/groups/selectedUsers.ts b/app/src/state/groups/selectedUsers.ts
new file mode 100644
index 00000000..84dbc453
--- /dev/null
+++ b/app/src/state/groups/selectedUsers.ts
@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { UserType } from "@features/groups/hooks/useAllUsers";
+
+const initialState = [] as UserType[];
+
+const selectedUsersSlice = createSlice({
+  name: "selectedUsers",
+  initialState,
+  reducers: {
+    toggleSelectUser: (state, action: PayloadAction<UserType>) => {
+      const userIndex = state.findIndex(
+        (user) => user._id === action.payload._id
+      );
+      if (userIndex === -1) {
+        state.push(action.payload);
+      } else {
+        state.splice(userIndex, 1);
+      }
+    },
+
+    clearSelectedUsers: () => {
+      return initialState;
+    },
+  },
+});
+
+export const { toggleSelectUser, clearSelectedUsers } = selectedUsersSlice.actions;
+export default selectedUsersSlice.reducer;
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index c6689d3c..99524c6e 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -9,6 +9,8 @@ import {
   profileUpdate,
   sideBarPages,
   blockList,
+  addMembers,
+  newGroup,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -38,6 +40,10 @@ function getSideBarPage(type: number): SideBarView {
       return blockList;
     case sideBarPages.DEVICES:
       return devices;
+    case sideBarPages.ADD_MEMBERS:
+      return addMembers;
+    case sideBarPages.NEW_GROUP:
+      return newGroup;
     default:
       throw new Error("Unknown Type");
   }
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index accfa834..d1ed2800 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -5,6 +5,7 @@ import userReducer from "./user/user";
 import searchReducer from "./messages/search";
 import activeMessageReducer from "./messages/activeMessage";
 import chatsReducer from "./messages/chats";
+import selectedUsersReducer from "./groups/selectedUsers";
 
 export const store = configureStore({
   reducer: {
@@ -14,6 +15,7 @@ export const store = configureStore({
     search: searchReducer,
     activeMessage: activeMessageReducer,
     chats: chatsReducer,
+    selectedUsers: selectedUsersReducer,
   },
 });
 
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 6b4bcfdc..7ac2a143 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -7,6 +7,8 @@ enum sideBarPages {
   PROFILE_UPDATE,
   BLOCKED_USERS,
   DEVICES,
+  ADD_MEMBERS,
+  NEW_GROUP,
 }
 
 type pagesStrings = keyof typeof sideBarPages;
diff --git a/app/src/utils/socket.tsx b/app/src/utils/socket.tsx
index 6cc488a5..66878a88 100644
--- a/app/src/utils/socket.tsx
+++ b/app/src/utils/socket.tsx
@@ -12,13 +12,8 @@ function useSocket() {
     DefaultEventsMap
   > | null>(null);
 
-  console.log(localStorage.getItem("sessionId"));
-
   useEffect(() => {
     if (!isPending && user && !socketInstance) {
-      console.log("Initializing socket with user:", user);
-      console.log(user._id);
-
       socketInstance = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
         query: {
           userId: user._id,
@@ -30,7 +25,6 @@ function useSocket() {
 
       setSocket(socketInstance);
 
-      // Cleanup on unmount
       return () => {
         console.log("Disconnecting socket");
         socketInstance?.disconnect();

From e7750fea76de20e6c9f0dc7c18eec526b9afd73e Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:11:48 +0200
Subject: [PATCH 070/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Merge=20creatin?=
 =?UTF-8?q?g=20new=20group=20with=20backend=20(#108)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 (groups): Finished create group ui

* 💄 (groups): Finish create group ui

* ✨ (groups): Merged create group with backend

* ✨ (groups): Notify all added members
---
 .../side-bar/groups/AddGroupMembers.tsx       | 11 +---
 .../side-bar/settings/SettingsSideBarBody.tsx |  1 -
 .../settings/SettingsSideBarHeader.tsx        |  2 +-
 app/src/data/sideBar.ts                       |  4 +-
 app/src/features/chats/ChatBody.tsx           |  2 +-
 app/src/features/chats/ChatInput.tsx          |  2 +-
 app/src/features/chats/ChatItem.tsx           | 19 ++++--
 app/src/features/chats/ChatsList.tsx          |  5 +-
 app/src/features/chats/MessageBox.tsx         |  6 +-
 app/src/features/chats/Topbar.tsx             | 16 +++--
 app/src/features/chats/hooks/useChats.ts      |  2 +-
 .../chats/hooks/useSelectedMessages.ts        |  2 +-
 app/src/features/chats/{ => utils}/helpers.ts |  4 +-
 .../features/forward/ForwardingInputBar.tsx   |  2 +-
 app/src/features/forward/ScrollableChats.tsx  |  5 +-
 app/src/features/forward/hooks/useCheckBox.ts |  2 +-
 app/src/features/groups/CreateGroupForm.tsx   | 17 ++---
 .../components/PinnedMessages.tsx             |  4 +-
 app/src/sockets/SocketProvider.tsx            | 66 ++++++++++++++-----
 app/src/state/messages/chats.ts               | 27 ++++----
 app/src/types/socket.ts                       |  9 +++
 21 files changed, 131 insertions(+), 77 deletions(-)
 rename app/src/features/chats/{ => utils}/helpers.ts (95%)

diff --git a/app/src/components/side-bar/groups/AddGroupMembers.tsx b/app/src/components/side-bar/groups/AddGroupMembers.tsx
index 67e44324..ce7530cb 100644
--- a/app/src/components/side-bar/groups/AddGroupMembers.tsx
+++ b/app/src/components/side-bar/groups/AddGroupMembers.tsx
@@ -1,14 +1,5 @@
 import UsersList from "@components/UsersList";
-import styled from "styled-components";
-
-const Container = styled.div`
-  position: relative;
-`;
 
 export default function AddGroupMembers() {
-  return (
-    <Container>
-      <UsersList />
-    </Container>
-  );
+  return <UsersList />;
 }
diff --git a/app/src/components/side-bar/settings/SettingsSideBarBody.tsx b/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
index ffd527e8..38c02f41 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
@@ -12,7 +12,6 @@ const StyledSettingsSideBar = styled.div`
   height: 100vh;
   background-color: var(--color-background);
   overflow-y: auto;
-  position: relative;
 `;
 
 function SettingsSideBar({ rows, children }: SettingsSideBarProps) {
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index bfe77937..73ae870e 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -59,7 +59,7 @@ function SettingsSideBarHeader() {
           />
           <CircleIcon
             data-testid="logout-icon"
-            onClick={() => logout}
+            onClick={() => logout()}
             $icon="Logout"
             $padding={0.2}
             $size={1.8}
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 4f6f6efe..1fe18d1b 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -203,13 +203,13 @@ const devices: SideBarView = {
 };
 
 const addMembers: SideBarView = {
-  title: "AddMembers",
+  title: "Add Members",
   backView: sideBarPages.CHATS,
   page: "ADD_MEMBERS",
 };
 
 const newGroup: SideBarView = {
-  title: "NewGroup",
+  title: "New Group",
   backView: sideBarPages.ADD_MEMBERS,
   page: "NEW_GROUP",
 };
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index d64af374..d3ac63f6 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -4,7 +4,7 @@ import Message from "./Message";
 import { useInView } from "@features/stories/hooks/useInView";
 import { useEffect } from "react";
 import { useFetchNextPage } from "./hooks/useFetchNextPage";
-import { getChatByID } from "./helpers";
+import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index d814177e..faeacd45 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -17,7 +17,7 @@ import MediaUploadComponent from "./media/MediaUploadComponent";
 import FilePreviewItem from "./media/FilePreviewItem";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { setShowCheckBox } from "@state/messages/chats";
-import { getChatByID } from "./helpers";
+import { getChatByID } from "./utils/helpers";
 import VoiceRecorder, { RecordingStates } from "./audio/VoiceRecorder";
 import RecordingView from "./audio/RecordingView";
 
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 15776b7d..c956a6e4 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -59,12 +59,11 @@ type ChatItemProps = {
 };
 
 function ChatItem({
-  chat: { _id, members, type, lastMessage },
+  chat: { _id, members, type, lastMessage, name },
   onClick,
 }: ChatItemProps) {
   const membersData = useChatMembers(members);
 
-  const name = membersData[0]?.screenFirstName || membersData[0]?.username;
   const image = membersData[0]?.photo;
   const navigate = useNavigate();
 
@@ -77,6 +76,16 @@ function ChatItem({
     navigate(`/${_id}`);
   };
 
+  function getChatName() {
+    let chatName;
+    if (type === "group" || type === "channel") {
+      chatName = name;
+    } else {
+      chatName = membersData[0]?.screenFirstName || membersData[0]?.username;
+    }
+    return chatName;
+  }
+
   return (
     <Container
       data-testid="chat-container"
@@ -84,12 +93,10 @@ function ChatItem({
       onClick={onClick ? onClick : handleOpenChat}
       key={_id}
     >
-      <Avatar data-testid="chat-avatar" image={image} name={name} />
+      <Avatar data-testid="chat-avatar" image={image} name={getChatName()} />
       <ChatContent>
         <ChatHeader>
-          <Name data-testid="chat-name">
-            {type === "private" ? name : `Group ${membersData[0]?.username}`}
-          </Name>
+          <Name data-testid="chat-name">{getChatName()}</Name>
           <Timestamp data-testid="chat-timestamp">
             {new Date(timestamp).toLocaleTimeString("en-US", {
               hour: "2-digit",
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index 6f7d275b..f328407f 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -20,7 +20,10 @@ const ChatsList = () => {
 
   return (
     <ChatListContainer>
-      {chats?.map((chat) => <ChatItem chat={chat} key={chat._id} />)}
+      {chats
+        ?.slice()
+        .reverse()
+        .map((chat) => <ChatItem chat={chat} key={chat._id} />)}
     </ChatListContainer>
   );
 };
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index 7077e532..c14cbaf3 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -3,7 +3,7 @@ import { RootState } from "@state/store";
 import styled from "styled-components";
 import { MessageInterface } from "types/messages";
 import { useParams } from "react-router-dom";
-import { getChatByID } from "./helpers";
+import { getChatByID } from "./utils/helpers";
 
 interface MessageBoxProps {
   messageId?: string | null;
@@ -52,7 +52,7 @@ const StyledMessageBox = styled.div`
 
 function getMessageById(
   messageId: string,
-  messages?: MessageInterface[],
+  messages?: MessageInterface[]
 ): MessageInterface | undefined {
   return messages
     ? messages.find((message) => message._id === messageId)
@@ -84,7 +84,7 @@ function MessageBox({ messageId }: MessageBoxProps) {
   }
 
   const activeMessage = useAppSelector(
-    (state: RootState) => state.activeMessage,
+    (state: RootState) => state.activeMessage
   );
 
   return (
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 120c96d9..cd79c8cf 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -8,7 +8,7 @@ import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
-import { getChatByID } from "./helpers";
+import { getChatByID } from "./utils/helpers";
 import { useChatMembers } from "./hooks/useChatMember";
 import { getElapsedTime } from "@utils/helpers";
 
@@ -94,11 +94,17 @@ function Topbar() {
   let name;
   let image;
   let lastSeen;
-  if (chat) {
-    name = membersData[0]?.screenFirstName || membersData[0]?.username;
 
-    lastSeen = chat?.lastMessage?.timestamp;
-    image = membersData[0]?.photo;
+  if (chat) {
+    if (chat?.type === "group" || chat?.type === "channel") {
+      console.log(chat?.name);
+      name = chat?.name;
+    } else {
+      name = membersData[0]?.screenFirstName || membersData[0]?.username;
+
+      lastSeen = chat?.lastMessage?.timestamp;
+      image = membersData[0]?.photo;
+    }
   }
 
   if (!chat) return null;
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 8ecb9ce1..b2960921 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { getAllChatsApi } from "../services/apiGetChats";
 import { ChatDataType } from "@mocks/data/chats";
 import { ChatsState, setAllChats } from "@state/messages/chats";
-import { parseChatsToState } from "../helpers";
+import { parseChatsToState } from "../utils/helpers";
 import { useAppDispatch } from "@hooks/useGlobalState";
 import { useEffect } from "react";
 
diff --git a/app/src/features/chats/hooks/useSelectedMessages.ts b/app/src/features/chats/hooks/useSelectedMessages.ts
index 7af9c532..7c84537e 100644
--- a/app/src/features/chats/hooks/useSelectedMessages.ts
+++ b/app/src/features/chats/hooks/useSelectedMessages.ts
@@ -1,5 +1,5 @@
 import { useAppSelector } from "@hooks/useGlobalState";
-import { getChatByID } from "../helpers";
+import { getChatByID } from "../utils/helpers";
 
 function useSelectedMessages({ chatId }: { chatId?: string }) {
   const chats = useAppSelector((state) => state.chats.chats);
diff --git a/app/src/features/chats/helpers.ts b/app/src/features/chats/utils/helpers.ts
similarity index 95%
rename from app/src/features/chats/helpers.ts
rename to app/src/features/chats/utils/helpers.ts
index ae89868d..b3287a9f 100644
--- a/app/src/features/chats/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -1,5 +1,5 @@
 import { DetailedChatInterface } from "@state/messages/chats";
-import { ChatDataType, ChatMember } from "@mocks/data/chats";
+import { ChatMember } from "@mocks/data/chats";
 
 export function getChatByID({
   chats,
@@ -22,6 +22,7 @@ export function parseChatsToState(chatData?: any) {
       type,
       isDeleted,
       numberOfMembers,
+      name,
     } = currChat;
 
     const filteredMembers = members.map((member: any) => {
@@ -41,6 +42,7 @@ export function parseChatsToState(chatData?: any) {
       isDeleted: isDeleted,
       members: filteredMembers,
       type: type,
+      name,
       numberOfMembers: numberOfMembers,
 
       lastMessage: {
diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
index e267ff8f..7bab3ad1 100644
--- a/app/src/features/forward/ForwardingInputBar.tsx
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -1,6 +1,6 @@
 import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
-import { getChatByID } from "@features/chats/helpers";
+import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index 5072fbdd..87855f0f 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -7,7 +7,7 @@ import { useMessageSender } from "@features/chats/hooks/useMessageSender";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { useSelectedMessages } from "@features/chats/hooks/useSelectedMessages";
-import { getChatByID } from "@features/chats/helpers";
+import { getChatByID } from "@features/chats/utils/helpers";
 import ChatItem from "@features/chats/ChatItem";
 
 const OuterContainer = styled.ul`
@@ -48,7 +48,6 @@ const HeaderRow = styled.div`
   height: 4rem;
 `;
 
-
 interface Props {
   onClose: () => void;
 }
@@ -68,7 +67,7 @@ function ScrollableChats(props: Props) {
 
   const handleSubmit = (chatId: string) => {
     const messagesToForward = messages?.filter((message) =>
-      selectedMessages?.includes(message._id),
+      selectedMessages?.includes(message._id)
     );
 
     messagesToForward?.map((message) => {
diff --git a/app/src/features/forward/hooks/useCheckBox.ts b/app/src/features/forward/hooks/useCheckBox.ts
index 980164ee..070a137c 100644
--- a/app/src/features/forward/hooks/useCheckBox.ts
+++ b/app/src/features/forward/hooks/useCheckBox.ts
@@ -1,4 +1,4 @@
-import { getChatByID } from "@features/chats/helpers";
+import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector, useAppDispatch } from "@hooks/useGlobalState";
 import { SelectMessage, removeSelectedMessage } from "@state/messages/chats";
 import { useState, useEffect } from "react";
diff --git a/app/src/features/groups/CreateGroupForm.tsx b/app/src/features/groups/CreateGroupForm.tsx
index dd8c985f..92af084b 100644
--- a/app/src/features/groups/CreateGroupForm.tsx
+++ b/app/src/features/groups/CreateGroupForm.tsx
@@ -13,6 +13,7 @@ import { sideBarPages } from "types/sideBar";
 
 import { useAppSelector } from "@hooks/useGlobalState";
 import { clearSelectedUsers } from "@state/groups/selectedUsers";
+import { useSocket } from "@hooks/useSocket";
 
 const Form = styled.form`
   padding: 1rem;
@@ -36,17 +37,17 @@ function GroupInfoForm() {
   const groupName = watch("groupName");
   const dispatch = useDispatch();
   const members = useAppSelector((state) => state.selectedUsers);
+  const { createGroupOrChannel } = useSocket();
 
   const onSubmit = (data: NewGroupForm) => {
-    const newGroupData = {
-      groupName: data.groupName,
-      photo: selectedImageFile || null,
-      members: members.map((member) => member._id),
-    };
-
-    console.log("New Group Data:", newGroupData);
     dispatch(updateSideBarView({ redirect: sideBarPages.CHATS }));
     dispatch(clearSelectedUsers());
+
+    createGroupOrChannel({
+      name: data.groupName,
+      type: "group",
+      members: members.map((member) => member._id),
+    });
   };
 
   return (
@@ -58,7 +59,7 @@ function GroupInfoForm() {
 
       <FloatingLabelInput<NewGroupForm>
         id="groupName"
-        label="Group Name"
+        label="Group Name (required)"
         register={register}
         watch={watch}
         data-testid="group-name"
diff --git a/app/src/features/pin-messages/components/PinnedMessages.tsx b/app/src/features/pin-messages/components/PinnedMessages.tsx
index 76f50c87..a523617d 100644
--- a/app/src/features/pin-messages/components/PinnedMessages.tsx
+++ b/app/src/features/pin-messages/components/PinnedMessages.tsx
@@ -2,7 +2,7 @@ import React, { useState, useMemo } from "react";
 import styled from "styled-components";
 import PinnedMessageProgressBar from "./PinnedMessageProgressBar";
 import { useAppSelector } from "@hooks/useGlobalState";
-import { getChatByID } from "@features/chats/helpers";
+import { getChatByID } from "@features/chats/utils/helpers";
 import { useParams } from "react-router-dom";
 import { MessageInterface } from "types/messages";
 
@@ -61,7 +61,7 @@ const PinnedMessages: React.FC = () => {
   const handleNextPinnedMessage = () => {
     if (pinnedMessages.length > 0) {
       setCurrentPinnedIndex(
-        (prevIndex) => (prevIndex + 1) % pinnedMessages.length,
+        (prevIndex) => (prevIndex + 1) % pinnedMessages.length
       );
       document
         .querySelector("[data-message-id='" + currentPinnedMessage?._id + "']")
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 9bc34cf9..33883536 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect, ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
+import { useQueryClient } from "@tanstack/react-query";
 
 import { SocketContext } from "./SocketContext";
 import { useSocket } from "utils/socket";
@@ -43,16 +45,25 @@ interface AcknowledgmentResponse {
   };
 }
 
+interface AckCreateGroup {
+  success: boolean;
+  message: string;
+  data: {
+    _id: string;
+  };
+}
+
 function SocketProvider({ children }: SocketProviderProps) {
   const [isConnected, setIsConnected] = useState(false);
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const socket = useSocket();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     if (socket) {
       socket.connect();
 
-      //TODO: remove and make sure it still works
       socket.on("connect", () => {
         const engine = socket.io.engine;
         setIsConnected(true);
@@ -64,8 +75,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
 
       socket.on("RECEIVE_MESSAGE", (message) => {
-        console.log("inside recieve");
-        console.log(message);
+        console.log("RECEIVED_MESSAGE");
         handleIncomingMessage(dispatch, message, message.chatId);
       });
 
@@ -117,9 +127,14 @@ function SocketProvider({ children }: SocketProviderProps) {
         }
       );
 
+      socket.on("JOIN_GROUP_CHANNEL", () => {
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      });
+
       socket.on("typing", (isTyping, message) =>
         handleIsTyping(dispatch, isTyping, message.chatId)
       );
+
       socket.emit("typing");
       return () => {
         socket.disconnect();
@@ -132,18 +147,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }, [dispatch, socket]);
 
-  // useEffect(() => {
-  //   if (!isPending && chats?.length) {
-  //     chats.forEach((chat) => {
-  //       socket.emit("join", { chatId: chat._id });
-  //     });
-  //     console.log(
-  //       "Joined all chats:",
-  //       chats.map((chat) => chat._id)
-  //     );
-  //   }
-  // }, [isConnected, isPending, chats, socket]);
-
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
       const messageToSend = {
@@ -236,6 +239,38 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   };
 
+  function createGroupOrChannel({
+    type,
+    name,
+    members,
+  }: {
+    type: "group" | "channel";
+    name: string;
+    members: string[];
+  }) {
+    if (isConnected && socket) {
+      console.log(type, members, name);
+      socket.emit(
+        "CREATE_GROUP_CHANNEL",
+        { type, name, members },
+        ({ success, data }: AckCreateGroup) => {
+          console.log("CREATE_GROUP_CHANNEL_CALLBACK");
+          if (success) {
+            console.log(data._id);
+            navigate(`/${data._id}`);
+          }
+          if (!success) {
+            console.log("failed creating group");
+          }
+        }
+      );
+    } else {
+      console.warn(
+        "Cannot create group or channel: not connected to socket server"
+      );
+    }
+  }
+
   return (
     <SocketContext.Provider
       value={{
@@ -244,6 +279,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         pinMessage: pinMessageSocket,
         unpinMessage: unpinMessageSocket,
         editMessage: editMessageSocket,
+        createGroupOrChannel,
       }}
     >
       {children}
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index eb0933cf..b8b6fb85 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -1,4 +1,4 @@
-import { getChatByID } from "@features/chats/helpers";
+import { getChatByID } from "@features/chats/utils/helpers";
 import { Chat, Member } from "@mocks/data/chats";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { MessageInterface } from "types/messages";
@@ -14,6 +14,7 @@ interface DetailedChatInterface extends Chat {
     senderId: string;
     timestamp: string;
   };
+  name?: string;
 }
 
 interface ChatsState {
@@ -37,7 +38,7 @@ const chatsSlice = createSlice({
 
     addMessage: (
       state,
-      action: PayloadAction<{ chatId: string; message: MessageInterface }>,
+      action: PayloadAction<{ chatId: string; message: MessageInterface }>
     ) => {
       const { chatId, message } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -46,7 +47,7 @@ const chatsSlice = createSlice({
 
     deleteMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>,
+      action: PayloadAction<{ messageId: string; chatId: string }>
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -59,7 +60,7 @@ const chatsSlice = createSlice({
         chatId: string;
         messageId: string;
         content: string;
-      }>,
+      }>
     ) => {
       const { chatId, messageId, content } = action.payload;
 
@@ -74,7 +75,7 @@ const chatsSlice = createSlice({
 
     pinMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>,
+      action: PayloadAction<{ messageId: string; chatId: string }>
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -87,7 +88,7 @@ const chatsSlice = createSlice({
 
     unpinMessage: (
       state,
-      action: PayloadAction<{ messageId: string; chatId: string }>,
+      action: PayloadAction<{ messageId: string; chatId: string }>
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -107,7 +108,7 @@ const chatsSlice = createSlice({
 
     setIsTyping: (
       state,
-      action: PayloadAction<{ chatId: string; isTyping: boolean }>,
+      action: PayloadAction<{ chatId: string; isTyping: boolean }>
     ) => {
       const { isTyping, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -118,7 +119,7 @@ const chatsSlice = createSlice({
 
     setShowCheckBox: (
       state,
-      action: PayloadAction<{ chatId: string; showCheckBox: boolean }>,
+      action: PayloadAction<{ chatId: string; showCheckBox: boolean }>
     ) => {
       const { chatId, showCheckBox } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -132,7 +133,7 @@ const chatsSlice = createSlice({
 
     SelectMessage: (
       state,
-      action: PayloadAction<{ chatId: string; id: string }>,
+      action: PayloadAction<{ chatId: string; id: string }>
     ) => {
       const { chatId, id } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -142,13 +143,13 @@ const chatsSlice = createSlice({
 
     removeSelectedMessage: (
       state,
-      action: PayloadAction<{ chatId: string; id: string }>,
+      action: PayloadAction<{ chatId: string; id: string }>
     ) => {
       const { chatId, id } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
       if (chat) {
         chat.selectedMessages = chat?.selectedMessages.filter(
-          (msgId) => msgId !== id,
+          (msgId) => msgId !== id
         );
       }
     },
@@ -158,7 +159,7 @@ const chatsSlice = createSlice({
       action: PayloadAction<{
         chatId: string;
         newMessages: MessageInterface[];
-      }>,
+      }>
     ) => {
       const { chatId, newMessages } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
@@ -169,7 +170,7 @@ const chatsSlice = createSlice({
 
     updateLastMessage: (
       state,
-      action: PayloadAction<{ chatId: string; lastMessage: MessageInterface }>,
+      action: PayloadAction<{ chatId: string; lastMessage: MessageInterface }>
     ) => {
       const { chatId, lastMessage } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 61662664..59029ad4 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -7,6 +7,15 @@ export interface SocketContextType {
   pinMessage: (chatId: string, messageId: string, userId: string) => void;
   unpinMessage: (chatId: string, messageId: string, userId: string) => void;
   editMessage: (messageId: string, content: string, chatId: string) => void;
+  createGroupOrChannel: ({
+    type,
+    name,
+    members,
+  }: {
+    type: "group" | "channel";
+    name: string;
+    members: string[];
+  }) => void;
 }
 
 export interface SocketProviderProps {

From 7ca185eaaa3d67cd365c7d234236cd357e359221 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Mon, 9 Dec 2024 22:33:17 +0200
Subject: [PATCH 071/136] =?UTF-8?q?=F0=9F=92=84=20(groups):=20Added=20some?=
 =?UTF-8?q?=20styles=20for=20group-view=20(#109)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/features/chats/Message.tsx      | 11 ++++----
 app/src/features/chats/MessageBox.tsx   | 29 ++++++++++++-------
 app/src/features/chats/ReplyWrapper.tsx |  2 --
 app/src/features/chats/SenderName.tsx   | 37 +++++++++++++++++++++++++
 app/src/features/chats/Topbar.tsx       |  1 -
 app/src/sockets/SocketProvider.tsx      |  2 --
 app/src/styles/GlobalStyles.tsx         |  2 +-
 7 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 app/src/features/chats/SenderName.tsx

diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index b73a140b..48fc2edd 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -23,6 +23,7 @@ import {
   unpinMessage,
 } from "@state/messages/chats";
 import { useSocket } from "@hooks/useSocket";
+import SenderName from "./SenderName";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -102,7 +103,6 @@ const MessageBoxWrapper = styled.div`
 const StyledCol = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
 `;
 
 const TimeStamp = styled.div<{ $isMine: boolean }>`
@@ -129,8 +129,8 @@ type MessageProps = {
   data: MessageInterface;
 };
 
-function Message({
-  data: {
+function Message({ data }: MessageProps) {
+  const {
     _id: id,
     senderId,
     content,
@@ -139,8 +139,8 @@ function Message({
     parentMessageId,
     media,
     contentType,
-  },
-}: MessageProps) {
+  } = data;
+
   const { searchTerm, searchResults } = useAppSelector((state) => state.search);
   const { lastMessageRef } = useScrollToLastMsg();
   useScrollToSearchResultsMsg();
@@ -191,6 +191,7 @@ function Message({
       >
         <Bubble $isMine={senderId === userId}>
           <StyledCol>
+            <SenderName $isMine={senderId === userId} senderId={senderId} />
             {parentMessageId && (
               <MessageBoxWrapper
                 onClick={MoveToReplyMessage}
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index c14cbaf3..cc09e6de 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -9,8 +9,8 @@ interface MessageBoxProps {
   messageId?: string | null;
 }
 
-const State = styled.div`
-  color: var(--accent-color);
+const State = styled.div<{ $colorIndex: number }>`
+  color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
   text-transform: capitalize;
 `;
 
@@ -20,21 +20,24 @@ const Message = styled.div`
   opacity: 0.9;
 `;
 
-const StyledMessageBox = styled.div`
+const StyledMessageBox = styled.div<{ $colorIndex: number }>`
   line-height: 1rem;
 
-  background-color: var(--color-background-compact-menu);
+  color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
+  background-color: var(--color-peer-bg-${({ $colorIndex }) => $colorIndex});
 
   position: relative;
   flex: 1 1;
 
-  border-left: var(--accent-color) 3px solid;
+  border-left: var(--color-peer-${({ $colorIndex }) => $colorIndex}) 3px solid;
   border-radius: 5px;
 
   padding: 7px 0.5rem;
 
   &:hover {
-    background-color: var(--color-background-compact-menu-hover);
+    background-color: var(
+      --color-peer-bg-active ${({ $colorIndex }) => $colorIndex}
+    );
   }
 
   &::before {
@@ -46,7 +49,7 @@ const StyledMessageBox = styled.div`
     width: 1px;
     height: 100%;
 
-    background-color: var(--accent-color);
+    background-color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
   }
 `;
 
@@ -75,7 +78,6 @@ function MessageBox({ messageId }: MessageBoxProps) {
   // TODO: refactor this
   if (messageId) {
     msg = getMessageById(messageId, messages);
-    console.log(msg);
     if (id === msg?.senderId) name = "you";
     else {
       const sender = members.find((member) => member._id === msg?.senderId);
@@ -83,13 +85,20 @@ function MessageBox({ messageId }: MessageBoxProps) {
     }
   }
 
+  const memberIndex = members.findIndex(
+    (member) => member._id === msg?.senderId
+  );
+   const colorIndex = memberIndex >= 0 ? (memberIndex % 5) + 2 : 2;
+
   const activeMessage = useAppSelector(
     (state: RootState) => state.activeMessage
   );
 
   return (
-    <StyledMessageBox>
-      <State>{name ? name : `${activeMessage.state}ing`}</State>
+    <StyledMessageBox $colorIndex={colorIndex}>
+      <State $colorIndex={colorIndex}>
+        {name ? name : `${activeMessage.state}ing`}
+      </State>
       <Message>{msg ? msg.content : activeMessage.content}</Message>
     </StyledMessageBox>
   );
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index 72cce171..f7c7cdbe 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -35,8 +35,6 @@ export default function ReplyWrapper({ setInput }: Props) {
     if (activeMessage.state === "edit") setInput("");
   }
 
-  console.log(activeMessage);
-
   return (
     <Container data-testid="reply-wrapper">
       <Icon>{getIcon(activeMessage.state === "edit" ? "Edit" : "Reply")}</Icon>
diff --git a/app/src/features/chats/SenderName.tsx b/app/src/features/chats/SenderName.tsx
new file mode 100644
index 00000000..a9bf69a1
--- /dev/null
+++ b/app/src/features/chats/SenderName.tsx
@@ -0,0 +1,37 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import styled from "styled-components";
+import { useChatMembers } from "./hooks/useChatMember";
+import { useParams } from "react-router-dom";
+
+const Name = styled.div<{ $colorIndex: number }>`
+  color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
+`;
+
+type SenderNameProps = {
+  $isMine: boolean;
+  senderId: string;
+};
+
+function SenderName({ $isMine, senderId }: SenderNameProps) {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chat = useAppSelector((state) =>
+    state.chats.chats.find((chat) => chat?._id === chatId)
+  );
+
+  const members = useChatMembers(chat?.members);
+
+  const memberIndex = members.findIndex((member) => member._id === senderId);
+  const memberData = members[memberIndex];
+
+  const colorIndex = (memberIndex % 5) + 2;
+
+  if ($isMine || chat?.type === "private") return null;
+
+  return (
+    <Name $colorIndex={colorIndex}>
+      {`${memberData?.screenFirstName} ${memberData?.screenLastName}`}
+    </Name>
+  );
+}
+
+export default SenderName;
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index cd79c8cf..1463c126 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -97,7 +97,6 @@ function Topbar() {
 
   if (chat) {
     if (chat?.type === "group" || chat?.type === "channel") {
-      console.log(chat?.name);
       name = chat?.name;
     } else {
       name = membersData[0]?.screenFirstName || membersData[0]?.username;
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 33883536..7b26d05d 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -160,8 +160,6 @@ function SocketProvider({ children }: SocketProviderProps) {
         "SEND_MESSAGE",
         messageToSend,
         ({ success, message, res }: AcknowledgmentResponse) => {
-          console.log("I'm inside send event!!");
-          console.log(success);
           if (!success) {
             console.log("Failed to send", res);
           }
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 7dec5c1f..930469eb 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -147,7 +147,7 @@ const GlobalStyles = createGlobalStyle`
   --color-background-own-3: #8849B4;
   --color-background-own-4: #A751A8;
   
-  --color-reply-own: #f5f5f52e;
+  --color-peer-1: var(--accent-color);
   
   --color-peer-2: #a695e7;
   --color-peer-bg-2: #a695e71a;

From ee69c1926daaf4a5575cf29268680f6ce92eb78c Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:51:48 +0200
Subject: [PATCH 072/136] :sparkles: (messaging): integrating block with
 messaging (#110)

* :bug: (messaging): fixing screen name

* :sparkles: (messaging): integrating block with messaging

* :sparkles: (messaging): prevent sending to blocked user

* :sparkles: (messaging): prevent recieving from blocked user

* :bug: (messaging-block): adding testids

* :recycle: (messaging): added photo and name as attributes in chats

* :bug: (messaging): hook issue fixed
---
 app/src/features/chats/ChatInput.tsx          | 142 +++++++++---------
 app/src/features/chats/ChatItem.tsx           |  43 ++++--
 app/src/features/chats/ChatsList.tsx          |   6 +-
 app/src/features/chats/Topbar.tsx             |  73 ++++++---
 app/src/features/chats/hooks/useChats.ts      |   8 +-
 .../privacy-settings/AddToBlockMenuList.tsx   |  47 ++----
 .../features/privacy-settings/BlockItem.tsx   |  21 ++-
 .../features/privacy-settings/BlockList.tsx   |  11 +-
 .../privacy-settings/hooks/useBlock.ts        |   3 +-
 .../privacy-settings/service/apiBlockUser.ts  |   4 +-
 .../service/apiGetBlockList.ts                |   6 +-
 app/src/mocks/data/blocklist.ts               |   8 +-
 app/src/mocks/data/chats.ts                   |   1 +
 .../mocks/privacy-settings/privacySettings.ts |   6 +-
 app/src/state/messages/chats.ts               | 108 ++++++++++++-
 15 files changed, 320 insertions(+), 167 deletions(-)

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index faeacd45..a2dcd465 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -121,11 +121,14 @@ function ChatInput() {
   };
 
   const chats = useAppSelector((state) => state.chats.chats);
-  const showCheckBox =
-    chatId && getChatByID({ chats: chats, chatID: chatId })?.showCheckBox;
 
   const [showForwardUsers, setShowForwardUsers] = useState(false);
 
+  const currChat = getChatByID({ chats: chats, chatID: chatId! });
+
+  const showCheckBox = currChat?.showCheckBox;
+  const isBlocked = currChat?.isBlocked;
+
   function handleClose() {
     if (!chatId) {
       return;
@@ -159,74 +162,77 @@ function ChatInput() {
           data-testid="file-preview"
         />
       )}
-      <Container data-testid="chat-input-container">
-        {!showCheckBox ? (
-          <Input data-testid="chat-input">
-            {isEmojiSelectorOpen && (
-              <Picker
-                setInputText={setInput}
-                data-testid="emoji-picker"
-                onSendGIF={sendGIF}
-                onSendSticker={sendSticker}
-              />
-            )}
-            <InputContainer>
-              {activeMessage.id && <ReplyWrapper setInput={setInput} />}
-
-              <InputWrapper>
-                {isRecording !== "idle" ? (
-                  <RecordingView
-                    setIsRecording={setIsRecording}
-                    isRecording={isRecording}
-                  />
-                ) : (
-                  <>
-                    <InvisibleButton
-                      onClick={toggleShowEmojies}
-                      data-testid="emoji-button"
-                    >
-                      <Icon>{getIcon("Emojie")}</Icon>
-                    </InvisibleButton>
-
-                    <ExpandingTextArea
-                      input={input}
-                      setInput={setInput}
-                      onKeyDown={handleKeyDown}
-                    />
 
-                    <MediaUploadComponent
-                      file={file}
-                      setFile={setFile}
-                      setIsFilePreviewOpen={setIsFilePreviewOpen}
+      {isBlocked ? null : (
+        <Container data-testid="chat-input-container">
+          {!showCheckBox ? (
+            <Input data-testid="chat-input">
+              {isEmojiSelectorOpen && (
+                <Picker
+                  setInputText={setInput}
+                  data-testid="emoji-picker"
+                  onSendGIF={sendGIF}
+                  onSendSticker={sendSticker}
+                />
+              )}
+              <InputContainer>
+                {activeMessage.id && <ReplyWrapper setInput={setInput} />}
+
+                <InputWrapper>
+                  {isRecording !== "idle" ? (
+                    <RecordingView
+                      setIsRecording={setIsRecording}
+                      isRecording={isRecording}
                     />
-                  </>
-                )}
-              </InputWrapper>
-            </InputContainer>
-            {input ? (
-              <RecordInput
-                onClick={handleSubmit}
-                type={!input ? "record" : "message"}
-                data-testid="send-button"
-              />
-            ) : (
-              <VoiceRecorder
-                isRecording={isRecording}
-                setIsRecording={setIsRecording}
-                setError={setError}
-                handleSendMessage={handleSendMessage}
-              />
-            )}
-          </Input>
-        ) : (
-          <ForwardingInputBar
-            onClose={handleClose}
-            onForward={handleForward}
-            data-testid="forwarding-input-bar"
-          />
-        )}
-        {showForwardUsers && <ScrollableChats onClose={handleClose} />}
-      </Container>
+                  ) : (
+                    <>
+                      <InvisibleButton
+                        onClick={toggleShowEmojies}
+                        data-testid="emoji-button"
+                      >
+                        <Icon>{getIcon("Emojie")}</Icon>
+                      </InvisibleButton>
+
+                      <ExpandingTextArea
+                        input={input}
+                        setInput={setInput}
+                        onKeyDown={handleKeyDown}
+                      />
+
+                      <MediaUploadComponent
+                        file={file}
+                        setFile={setFile}
+                        setIsFilePreviewOpen={setIsFilePreviewOpen}
+                      />
+                    </>
+                  )}
+                </InputWrapper>
+              </InputContainer>
+              {input ? (
+                <RecordInput
+                  onClick={handleSubmit}
+                  type={!input ? "record" : "message"}
+                  data-testid="send-button"
+                />
+              ) : (
+                <VoiceRecorder
+                  isRecording={isRecording}
+                  setIsRecording={setIsRecording}
+                  setError={setError}
+                  handleSendMessage={handleSendMessage}
+                />
+              )}
+            </Input>
+          ) : (
+            <ForwardingInputBar
+              onClose={handleClose}
+              onForward={handleForward}
+              data-testid="forwarding-input-bar"
+            />
+          )}
+          {showForwardUsers && <ScrollableChats onClose={handleClose} />}
+        </Container>
+      )}
     </>
   );
 }
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index c956a6e4..56c2eb5e 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -2,8 +2,13 @@ import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
-import { DetailedChatInterface } from "@state/messages/chats";
+import {
+  DetailedChatInterface,
+  setName,
+  setPhoto,
+} from "@state/messages/chats";
 import { useChatMembers } from "./hooks/useChatMember";
+import { useAppDispatch } from "@hooks/useGlobalState";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -59,12 +64,9 @@ type ChatItemProps = {
 };
 
 function ChatItem({
-  chat: { _id, members, type, lastMessage, name },
+  chat: { _id, type, lastMessage, name, photo, members },
   onClick,
 }: ChatItemProps) {
-  const membersData = useChatMembers(members);
-
-  const image = membersData[0]?.photo;
   const navigate = useNavigate();
 
   const timestamp = lastMessage?.timestamp || "No messages";
@@ -76,14 +78,25 @@ function ChatItem({
     navigate(`/${_id}`);
   };
 
-  function getChatName() {
-    let chatName;
-    if (type === "group" || type === "channel") {
-      chatName = name;
-    } else {
-      chatName = membersData[0]?.screenFirstName || membersData[0]?.username;
-    }
-    return chatName;
+  const dispatch = useAppDispatch();
+
+  if (type === "private") {
+    const memberData = useChatMembers(members)[0];
+    dispatch(
+      setName({
+        chatId: _id,
+        name:
+          memberData?.screenFirstName + " " + memberData?.screenLastName ||
+          memberData?.username,
+      })
+    );
+
+    dispatch(
+      setPhoto({
+        chatId: _id,
+        photo: memberData?.photo,
+      })
+    );
   }
 
   return (
@@ -93,10 +106,10 @@ function ChatItem({
       onClick={onClick ? onClick : handleOpenChat}
       key={_id}
     >
-      <Avatar data-testid="chat-avatar" image={image} name={getChatName()} />
+      <Avatar data-testid="chat-avatar" image={photo} name={name} />
       <ChatContent>
         <ChatHeader>
-          <Name data-testid="chat-name">{getChatName()}</Name>
+          <Name data-testid="chat-name">{name}</Name>
           <Timestamp data-testid="chat-timestamp">
             {new Date(timestamp).toLocaleTimeString("en-US", {
               hour: "2-digit",
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index f328407f..70b12f49 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import ChatItem from "./ChatItem";
 import { useChats } from "./hooks/useChats";
-import { useAppSelector } from "@hooks/useGlobalState";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 
 const ChatListContainer = styled.ul`
   display: flex;
@@ -23,7 +23,9 @@ const ChatsList = () => {
       {chats
         ?.slice()
         .reverse()
-        .map((chat) => <ChatItem chat={chat} key={chat._id} />)}
+        .map((chat) => {
+          return <ChatItem chat={chat} key={chat._id} />;
+        })}
     </ChatListContainer>
   );
 };
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 1463c126..9f95d0f4 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -6,11 +6,13 @@ import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
-import { useAppSelector } from "@hooks/useGlobalState";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { getChatByID } from "./utils/helpers";
 import { useChatMembers } from "./hooks/useChatMember";
 import { getElapsedTime } from "@utils/helpers";
+import { useBlock } from "@features/privacy-settings/hooks/useBlock";
+import { setChatIsBlocked } from "@state/messages/chats";
 
 const Container = styled.div`
   position: absolute;
@@ -76,34 +78,42 @@ const IconButton = styled.button`
   justify-content: center;
 `;
 
+const StyledButton = styled.button`
+  background: linear-gradient(
+    to left,
+    var(--color-background-own-3),
+    var(--color-background-own-4)
+  );
+
+  border: none;
+  width: 7rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  color: var(--color-text);
+  margin-right: 1rem;
+
+  color: var(--color-background);
+`;
+
 //TODO: refactor
 function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
   const chats = useAppSelector((state) => state.chats.chats);
+  const { removeFromBlockList } = useBlock();
+  const dispatch = useAppDispatch();
   const [isSearching, setIsSearching] = useState(false);
-
-  const chat = chatId
-    ? getChatByID({
-        chatID: chatId,
-        chats: chats,
-      })
-    : undefined;
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const chat = getChatByID({
+    chatID: chatId!,
+    chats: chats,
+  });
 
   const membersData = useChatMembers(chat?.members);
 
-  let name;
-  let image;
   let lastSeen;
 
   if (chat) {
-    if (chat?.type === "group" || chat?.type === "channel") {
-      name = chat?.name;
-    } else {
-      name = membersData[0]?.screenFirstName || membersData[0]?.username;
-
-      lastSeen = chat?.lastMessage?.timestamp;
-      image = membersData[0]?.photo;
-    }
+    lastSeen = chat?.lastMessage?.timestamp;
   }
 
   if (!chat) return null;
@@ -112,16 +122,31 @@ function Topbar() {
     setIsSearching(!isSearching);
   };
 
+  async function handleRemoveFromBlock() {
+    await removeFromBlockList({ id: membersData[0]._id });
+    dispatch(
+      setChatIsBlocked({
+        chatId: chatId!,
+        isBlocked: false,
+        userId: userId,
+      })
+    );
+  }
+
   return (
     <Container>
-      <Avatar data-testid="chat-avatar" image={image} name={name?.charAt(0)} />
+      <Avatar
+        data-testid="chat-avatar"
+        image={chat.photo}
+        name={chat.name?.charAt(0)}
+      />
       {isSearching ? (
         <SearchBar onClose={toggleSearch} />
       ) : (
         <>
           <Info data-testid="chat-info">
             <Content>
-              <Name data-testid="chat-name">{name}</Name>
+              <Name data-testid="chat-name">{chat.name}</Name>
               {lastSeen && (
                 <LastSeen data-testid="chat-last-seen">
                   last seen {getElapsedTime(lastSeen)}
@@ -130,6 +155,14 @@ function Topbar() {
             </Content>
           </Info>
           <PinnedMessages />
+          {chat.isBlocked && (
+            <StyledButton
+              onClick={handleRemoveFromBlock}
+              data-testid="unblock-button"
+            >
+              Unblock
+            </StyledButton>
+          )}
           <Icons>
             <Icon>{getIcon("Call")}</Icon>
             <IconButton onClick={toggleSearch} data-testid="search-button">
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index b2960921..c378dd0c 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -3,8 +3,9 @@ import { getAllChatsApi } from "../services/apiGetChats";
 import { ChatDataType } from "@mocks/data/chats";
 import { ChatsState, setAllChats } from "@state/messages/chats";
 import { parseChatsToState } from "../utils/helpers";
-import { useAppDispatch } from "@hooks/useGlobalState";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { useEffect } from "react";
+import { useBlock } from "@features/privacy-settings/hooks/useBlock";
 
 export function useChats() {
   const { data: chatData, isPending } = useQuery<ChatDataType>({
@@ -13,13 +14,16 @@ export function useChats() {
   });
   const dispatch = useAppDispatch();
 
+  const { blockList } = useBlock();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  console.log(userId);
   useEffect(() => {
     const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),
       members: chatData?.members || [],
     };
 
-    dispatch(setAllChats({ chatsData: initialChatState }));
+    dispatch(setAllChats({ chatsData: initialChatState, blockList, userId }));
   }, [isPending, chatData, dispatch]);
 
   return { isPending };
diff --git a/app/src/features/privacy-settings/AddToBlockMenuList.tsx b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
index 0ef895ca..7338448e 100644
--- a/app/src/features/privacy-settings/AddToBlockMenuList.tsx
+++ b/app/src/features/privacy-settings/AddToBlockMenuList.tsx
@@ -2,9 +2,8 @@ import styled from "styled-components";
 import BlockItem, { BlockedUserProps } from "./BlockItem";
 import { useBlock } from "./hooks/useBlock";
 import { ScrollContainer } from "styles/GlobalStyles";
-import { useAppSelector } from "@hooks/useGlobalState";
-import { DetailedChatInterface } from "@state/messages/chats";
-import { useChatMembers } from "@features/chats/hooks/useChatMember";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { setMemberIsBlocked } from "@state/messages/chats";
 
 const StyledList = styled.ul<StyledListProps>`
   position: absolute;
@@ -50,52 +49,34 @@ const StyledP = styled.p`
   justify-self: center;
   align-self: center;
 `;
-function filterChats(
-  blockList: BlockedUserProps[],
-  chats: DetailedChatInterface[],
-) {
-  const blockIds = blockList
-    ? new Set(blockList.map((val) => val.id))
-    : new Set();
-  const filteredChats = chats?.filter((item) => !blockIds.has(item._id));
-
-  return filteredChats;
-}
 
 function AddToBlockMenuList({ setIsMenuOpened }: any) {
   const { addToBlockList } = useBlock();
 
-  const { blockList } = useBlock();
-  const chats = useAppSelector((state) => state.chats.chats);
+  const members = useAppSelector((state) => state.chats.members);
+  const userId = useAppSelector((state) => state.user.userInfo.id);
 
-  const filteredChats = filterChats(
-    blockList as BlockedUserProps[],
-    chats as DetailedChatInterface[],
-  );
+  const dispatch = useAppDispatch();
 
-  function handleClick(item: DetailedChatInterface) {
+  function handleClick(item: BlockedUserProps) {
     setIsMenuOpened(false);
-    addToBlockList({ id: item._id });
+    addToBlockList({ id: item.id });
+    dispatch(
+      setMemberIsBlocked({ memberId: item.id, isBlocked: true, userId })
+    );
   }
 
   return (
     <StyledList {...menuStyles}>
       <ScrollContainer>
-        {filteredChats.length ? (
-          filteredChats.map((item) => {
-            const membersData = useChatMembers(item.members);
-
+        {members.length ? (
+          members.map((member) => {
             const data: BlockedUserProps = {
-              id: item._id,
-              name:
-                membersData[0].screenFirstName +
-                " " +
-                membersData[0].screenLastName,
-              username: membersData[0].username,
+              id: member._id,
             };
             return (
               <StylingWrapper
-                onClick={() => handleClick(item)}
+                onClick={() => handleClick(data)}
                 key={data.id}
                 data-testid={`block-user-${data.id}`}
               >
diff --git a/app/src/features/privacy-settings/BlockItem.tsx b/app/src/features/privacy-settings/BlockItem.tsx
index 05efffe5..41b50de8 100644
--- a/app/src/features/privacy-settings/BlockItem.tsx
+++ b/app/src/features/privacy-settings/BlockItem.tsx
@@ -5,6 +5,8 @@ import { StyledList, StyledListProps } from "./AddToBlockMenuList";
 import { getIcon } from "@data/icons";
 import { useState } from "react";
 import { useBlock } from "./hooks/useBlock";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { setMemberIsBlocked } from "@state/messages/chats";
 
 const StyledSideBarRow = styled.div`
   width: 100%;
@@ -66,18 +68,25 @@ const HoverMask = styled.div`
 
 interface BlockedUserInterface {
   id: string;
-  name: string;
-  username: string;
 }
 
-function BlockItem({ id, name, username }: BlockedUserInterface) {
+function BlockItem({ id }: BlockedUserInterface) {
   const [isBlockButtonEnabled, setIsBlockButtonEnabled] = useState(false);
-
   const { removeFromBlockList } = useBlock();
 
-  function handleRemove(id: string) {
+  const members = useAppSelector((state) => state.chats.members);
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const { screenFirstName, screenLastName, username } =
+    members.find((member) => member._id === id) || {};
+
+  const name = screenFirstName + " " + screenLastName || "";
+
+  const dispatch = useAppDispatch();
+
+  function handleRemoveFromBlock(id: string) {
     removeFromBlockList({ id: id.toString() });
     setIsBlockButtonEnabled(false);
+    dispatch(setMemberIsBlocked({ memberId: id, isBlocked: false, userId }));
   }
 
   return (
@@ -96,7 +105,7 @@ function BlockItem({ id, name, username }: BlockedUserInterface) {
       {isBlockButtonEnabled && (
         <StyledList
           {...menuStyles}
-          onClick={() => handleRemove(id)}
+          onClick={() => handleRemoveFromBlock(id)}
           data-testid={`remove-from-blocklist-${id}`}
         >
           <HoverMask>
diff --git a/app/src/features/privacy-settings/BlockList.tsx b/app/src/features/privacy-settings/BlockList.tsx
index 5611d2d5..35913faa 100644
--- a/app/src/features/privacy-settings/BlockList.tsx
+++ b/app/src/features/privacy-settings/BlockList.tsx
@@ -22,6 +22,13 @@ const PlaceHeader = styled.div`
   padding-bottom: 0.5rem;
 `;
 
+export interface BlockListInterface {
+  id: string;
+  username: string;
+  email: string;
+  _id: string;
+}
+
 function BlockList() {
   const { props } = useAppSelector((state) => state.sideBarData);
 
@@ -39,8 +46,8 @@ function BlockList() {
         )}
       </PlaceHeader>
 
-      {blockList?.map((item) => {
-        return <BlockItem {...item} key={item.id} />;
+      {blockList?.map((item: BlockListInterface) => {
+        return <BlockItem id={item.id} key={item.id} />;
       })}
 
       <CircleIcon
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
index f6ea57f7..42430655 100644
--- a/app/src/features/privacy-settings/hooks/useBlock.ts
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -1,11 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import getBlockList from "@features/privacy-settings/service/apiGetBlockList";
 import { blockUser } from "../service/apiBlockUser";
-import { BlockedUserProps } from "../BlockItem";
 import { removeFromBlock } from "../service/apiRemoveFromBlocks";
 
 export function useBlock() {
-  const { data: blockList } = useQuery<BlockedUserProps[]>({
+  const { data: blockList } = useQuery({
     queryKey: ["block"],
     queryFn: () => getBlockList(),
   });
diff --git a/app/src/features/privacy-settings/service/apiBlockUser.ts b/app/src/features/privacy-settings/service/apiBlockUser.ts
index 35fd3186..71273c44 100644
--- a/app/src/features/privacy-settings/service/apiBlockUser.ts
+++ b/app/src/features/privacy-settings/service/apiBlockUser.ts
@@ -6,7 +6,7 @@ interface requestType {
 
 async function blockUser(data: requestType) {
   const res = await fetch(`${API_URL}/users/block/${data.id}`, {
-    method: "PATCH",
+    method: "POST",
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
@@ -14,7 +14,7 @@ async function blockUser(data: requestType) {
     },
   });
 
-  if (res.status !== 200) {
+  if (!res.ok) {
     throw new Error(res.statusText);
   }
 }
diff --git a/app/src/features/privacy-settings/service/apiGetBlockList.ts b/app/src/features/privacy-settings/service/apiGetBlockList.ts
index 267df334..332b9657 100644
--- a/app/src/features/privacy-settings/service/apiGetBlockList.ts
+++ b/app/src/features/privacy-settings/service/apiGetBlockList.ts
@@ -1,9 +1,7 @@
 import { API_URL } from "@constants";
 
-import { BlockedUserProps } from "../BlockItem";
-
 async function getBlockList() {
-  const response = await fetch(`${API_URL}/users/blocked`, {
+  const response = await fetch(`${API_URL}/users/block`, {
     method: "GET",
     credentials: "include",
     headers: {
@@ -14,7 +12,7 @@ async function getBlockList() {
   const data = await response.json();
 
   if (!response.ok) throw new Error(data.message);
-  return data.users as BlockedUserProps[];
+  return data.data.users;
 }
 
 export default getBlockList;
diff --git a/app/src/mocks/data/blocklist.ts b/app/src/mocks/data/blocklist.ts
index f45231fa..8f9287b6 100644
--- a/app/src/mocks/data/blocklist.ts
+++ b/app/src/mocks/data/blocklist.ts
@@ -2,14 +2,10 @@ import { BlockedUserProps } from "@features/privacy-settings/BlockItem";
 
 const blockList: BlockedUserProps[] = [
   {
-    id: 1,
-    name: "Alice",
-    username: "alice123",
+    id: "1",
   },
   {
-    id: 2,
-    name: "Bob",
-    username: "bob123",
+    id: "2",
   },
 ];
 
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 24154817..7f9954b8 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -10,6 +10,7 @@ export type Member = {
   stories: string[];
   blockedUsers: string[];
   Role: "member" | "admin" | "creator";
+  isBlocked?: boolean;
 };
 
 export type ChatMember = {
diff --git a/app/src/mocks/privacy-settings/privacySettings.ts b/app/src/mocks/privacy-settings/privacySettings.ts
index 1b0228a4..6190b7e5 100644
--- a/app/src/mocks/privacy-settings/privacySettings.ts
+++ b/app/src/mocks/privacy-settings/privacySettings.ts
@@ -26,12 +26,12 @@ export const privacySettingsMock = [
 
   http.patch("/users/block/:id", async (req) => {
     const id = req.params.id;
-    const user = allChats.find((item) => item.id.toString() === id);
+    const user = allChats.find(
+      (item: { id: string }) => item.id.toString() === id
+    );
     if (user) {
       blockList.push({
         id: user.id,
-        name: user.name,
-        username: user.name.toLowerCase() + "123",
       });
 
       return HttpResponse.json({}, { status: 200 });
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index b8b6fb85..3cc9c055 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -1,4 +1,5 @@
 import { getChatByID } from "@features/chats/utils/helpers";
+import { BlockListInterface } from "@features/privacy-settings/BlockList";
 import { Chat, Member } from "@mocks/data/chats";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { MessageInterface } from "types/messages";
@@ -15,6 +16,8 @@ interface DetailedChatInterface extends Chat {
     timestamp: string;
   };
   name?: string;
+  isBlocked?: boolean;
+  photo?: string;
 }
 
 interface ChatsState {
@@ -31,8 +34,32 @@ const chatsSlice = createSlice({
   name: "chats",
   initialState,
   reducers: {
-    setAllChats: (state, action: PayloadAction<{ chatsData: ChatsState }>) => {
-      state.chats = action.payload.chatsData.chats;
+    setAllChats: (
+      state,
+      action: PayloadAction<{
+        chatsData: ChatsState;
+        blockList: BlockListInterface[];
+        userId: string;
+      }>
+    ) => {
+      const { blockList, userId, chatsData } = action.payload;
+      const incomminingChats = chatsData.chats;
+      incomminingChats
+        .map((chat) => {
+          if (chat.type === "private") {
+            const members = chat.members;
+            const otherUser = members.filter(
+              (member) => member._id !== userId
+            )[0];
+
+            if (blockList.find((user: any) => user.id === otherUser._id)) {
+              chat.isBlocked = true;
+            }
+          }
+          return chat;
+        })
+        .filter((chat) => chat !== undefined) as DetailedChatInterface[];
+      state.chats = incomminingChats;
       state.members = action.payload.chatsData.members;
     },
 
@@ -42,6 +69,9 @@ const chatsSlice = createSlice({
     ) => {
       const { chatId, message } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      if (chat?.type === "private" && chat?.isBlocked) return;
+
       chat?.messages.push(message);
     },
 
@@ -178,6 +208,76 @@ const chatsSlice = createSlice({
         chat.lastMessage = lastMessage;
       }
     },
+
+    setChatIsBlocked: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        isBlocked: boolean;
+        userId: string;
+      }>
+    ) => {
+      const { chatId, isBlocked, userId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      console.log(chat);
+      if (chat) chat.isBlocked = isBlocked;
+
+      const members = chat?.members;
+      const otherUser = members?.filter((member) => member._id !== userId)[0];
+
+      const user = state.members.find(
+        (member) => member._id === otherUser?._id
+      );
+
+      if (user) user.isBlocked = isBlocked;
+    },
+
+    setMemberIsBlocked: (
+      state,
+      action: PayloadAction<{
+        memberId: string;
+        isBlocked: boolean;
+        userId: string;
+      }>
+    ) => {
+      const { memberId, isBlocked, userId } = action.payload;
+      const member = state.members.find((member) => member._id === memberId);
+      if (member) member.isBlocked = isBlocked;
+
+      state.chats.forEach((chat) => {
+        if (chat.type === "private") {
+          const otherUser = chat.members.find(
+            (member) => member._id !== userId
+          );
+
+          if (otherUser?._id === memberId) {
+            chat.isBlocked = isBlocked;
+          }
+        }
+      });
+    },
+    setName: (
+      state,
+      action: PayloadAction<{ chatId: string; name: string }>
+    ) => {
+      const { chatId, name } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.name = name;
+      }
+    },
+
+    setPhoto: (
+      state,
+      action: PayloadAction<{ chatId: string; photo: string }>
+    ) => {
+      const { chatId, photo } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      if (chat) {
+        chat.photo = photo;
+      }
+    },
   },
 });
 
@@ -195,6 +295,10 @@ export const {
   removeSelectedMessage,
   mergeMessages,
   updateLastMessage,
+  setChatIsBlocked,
+  setMemberIsBlocked,
+  setName,
+  setPhoto,
 } = chatsSlice.actions;
 export default chatsSlice.reducer;
 export type { DetailedChatInterface, ChatsState };

From 2c5050fac3afa76d3ac441086fc139e2d4c57287 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:13:40 +0200
Subject: [PATCH 073/136] :sparkles: (messaging): lastmessage updates on
 sending (#111)

* :bug: (messaging): fixing screen name

* :sparkles: (messaging): integrating block with messaging

* :sparkles: (messaging): prevent sending to blocked user

* :sparkles: (messaging): prevent recieving from blocked user

* :bug: (messaging-block): adding testids

* :recycle: (messaging): added photo and name as attributes in chats

* :bug: (messaging): hook issue fixed

* :sparkles: (messaging): updating last message in chatlist
---
 app/src/state/messages/chats.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 3cc9c055..d70ea292 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -71,8 +71,12 @@ const chatsSlice = createSlice({
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
 
       if (chat?.type === "private" && chat?.isBlocked) return;
+      const { _id, content, senderId, timestamp } = message;
 
-      chat?.messages.push(message);
+      if (chat) {
+        chat.lastMessage = { _id, content, senderId, timestamp };
+        chat.messages.push(message);
+      }
     },
 
     deleteMessage: (

From 0a9e2be39e4e37a5360690fabdc92d7dac6b1ee3 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:32:17 +0200
Subject: [PATCH 074/136] feat: search UI  (#112)

* chore: install motion for fancy user interactions

* feat: basic global search state

* feat: fancy search sidebar element

* feat: search side bar intergration

* refact: move selected tab to redux instead of local useState

* refact: avatar to have different sized and be more resuable

* feat: add message and channel result UI elements

* feat: audio result done

* fix: scroll issues
---
 app/package-lock.json                         |  64 +++++
 app/package.json                              |   1 +
 app/src/components/Avatar.tsx                 |  21 +-
 .../side-bar/chats/ChatsSideBar.tsx           |  16 +-
 .../components/side-bar/chats/SearchBar.tsx   |  15 +-
 app/src/data/icons.tsx                        |   2 +-
 .../search/components/TabedSearch.tsx         | 121 +++++++++
 .../components/result-items/AudioResult.tsx   | 134 +++++++++
 .../components/result-items/ChannelResult.tsx |  74 +++++
 .../components/result-items/FileResult.tsx    |  80 ++++++
 .../components/result-items/MessageResult.tsx | 130 +++++++++
 .../search/data/tabs-components-map.tsx       | 147 ++++++++++
 app/src/state/messages/global-search.ts       |  27 ++
 app/src/state/store.ts                        |   2 +
 app/src/styles/GlobalStyles.tsx               |   1 +
 app/src/utils/helpers.ts                      |   8 +-
 package-lock.json                             | 255 ------------------
 17 files changed, 826 insertions(+), 272 deletions(-)
 create mode 100644 app/src/features/search/components/TabedSearch.tsx
 create mode 100644 app/src/features/search/components/result-items/AudioResult.tsx
 create mode 100644 app/src/features/search/components/result-items/ChannelResult.tsx
 create mode 100644 app/src/features/search/components/result-items/FileResult.tsx
 create mode 100644 app/src/features/search/components/result-items/MessageResult.tsx
 create mode 100644 app/src/features/search/data/tabs-components-map.tsx
 create mode 100644 app/src/state/messages/global-search.ts
 delete mode 100644 package-lock.json

diff --git a/app/package-lock.json b/app/package-lock.json
index 54b90903..0d968f3d 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -22,6 +22,7 @@
         "emoji-picker-react": "^4.12.0",
         "idb": "^8.0.0",
         "lottie-react": "^2.4.0",
+        "motion": "^11.13.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-filerobot-image-editor": "^4.9.0",
@@ -7178,6 +7179,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz",
+      "integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.13.0",
+        "motion-utils": "^11.13.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -9224,6 +9252,42 @@
         "node": ">=8"
       }
     },
+    "node_modules/motion": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.13.1.tgz",
+      "integrity": "sha512-64+QpZQv8WJJFn+tEEzX04il9s6ReA6lhKRZaxzD6SunGqoaq5g+AFVfcKWme8N83eytUOpGp7mpfJ9cyZlhAA==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.13.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+    },
+    "node_modules/motion-utils": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/app/package.json b/app/package.json
index ddbee848..e143d955 100644
--- a/app/package.json
+++ b/app/package.json
@@ -30,6 +30,7 @@
     "emoji-picker-react": "^4.12.0",
     "idb": "^8.0.0",
     "lottie-react": "^2.4.0",
+    "motion": "^11.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-filerobot-image-editor": "^4.9.0",
diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
index 7b09b5d7..96e167ea 100644
--- a/app/src/components/Avatar.tsx
+++ b/app/src/components/Avatar.tsx
@@ -2,17 +2,15 @@ import { STATIC_MEDIA_URL } from "@constants";
 import styled from "styled-components";
 import { getAvatarName } from "utils/helpers";
 
-const StyledAvatar = styled.div<{ $image?: string }>`
-  width: 2.625rem;
-  height: 2.625rem;
+const StyledAvatar = styled.div<{ $image?: string; $size?: string }>`
+  width: ${({ $size }) => ($size === "small" ? "2.625rem" : "3.125rem")};
+  height: ${({ $size }) => ($size === "small" ? "2.625rem" : "3.125rem")};
 
   border-radius: 50%;
   margin-right: 1rem;
 
   background: ${({ $image }) =>
-    $image
-      ? `url(${STATIC_MEDIA_URL + $image}) center/cover no-repeat`
-      : "var(--color-avatar)"};
+    $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
 
   color: white;
 
@@ -30,11 +28,18 @@ const StyledAvatar = styled.div<{ $image?: string }>`
 type PropsType = {
   image?: string | undefined;
   name: string | undefined;
+  size?: string;
 };
 
-function Avatar({ image, name }: PropsType) {
+function Avatar({ image, name, size }: PropsType) {
+  if (image && !image.startsWith("http")) {
+    image = STATIC_MEDIA_URL + image;
+  }
+
   return (
-    <StyledAvatar $image={image}>{!image && getAvatarName(name)}</StyledAvatar>
+    <StyledAvatar $image={image} $size={size || "small"}>
+      {!image && getAvatarName(name)}
+    </StyledAvatar>
   );
 }
 
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index 7d3af972..9f69866e 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -3,6 +3,7 @@ import ChatsSidebarHeader from "./ChatsSideBarHeader";
 import StartNewChat from "@features/chats/StartNewChat";
 import AddStory from "@features/stories/components/AddStory";
 import StoryListContainer from "@features/stories/components/StoryListContainer";
+import TabedSearch from "@features/search/components/TabedSearch";
 
 interface ChatsSideBarProps {
   children?: React.ReactNode;
@@ -37,12 +38,15 @@ function ChatsSideBar({ children }: ChatsSideBarProps) {
   return (
     <StyledChatsSideBar>
       <ChatsSidebarHeader />
-      <StoryListContainer />
-      <div style={{ flex: 1 }}>{children}</div>{" "}
-      <ButtonsContainer data-testid="button-container">
-        <AddStory data-testid="add-story-button" />
-        <StartNewChat data-testid="start-new-chat-button" />
-      </ButtonsContainer>
+      <div style={{ position: "relative", height: "100%" }}>
+        <StoryListContainer />
+        <div style={{ flex: 1 }}>{children}</div>{" "}
+        <ButtonsContainer data-testid="button-container">
+          <AddStory data-testid="add-story-button" />
+          <StartNewChat data-testid="start-new-chat-button" />
+        </ButtonsContainer>
+        <TabedSearch />
+      </div>
     </StyledChatsSideBar>
   );
 }
diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index d476b5cb..d9c0364f 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -1,4 +1,6 @@
 import { getIcon } from "@data/icons";
+import { setSearchTerm } from "@state/messages/global-search";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 
 const StyledSearchBar = styled.div`
@@ -43,9 +45,20 @@ const Input = styled.input`
 `;
 
 function SearchBar() {
+  const dispatch = useDispatch();
+
+  const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(setSearchTerm(e.target.value));
+  };
+
   return (
     <StyledSearchBar data-testid="general-search-bar">
-      <Input type="text" placeholder="Search" data-testid="general-search" />
+      <Input
+        type="text"
+        placeholder="Search"
+        data-testid="general-search"
+        onChange={onSearch}
+      />
       <Icon data-testid="general-serach-icon">{getIcon("Search")}</Icon>
     </StyledSearchBar>
   );
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 42b0b8b2..50da8c37 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -398,7 +398,7 @@ function getIcon(
     sx?: SxProps;
     fontSize?: "small" | "medium" | "large";
     style?: React.CSSProperties;
-  }
+  },
 ) {
   if (!iconName) return undefined;
 
diff --git a/app/src/features/search/components/TabedSearch.tsx b/app/src/features/search/components/TabedSearch.tsx
new file mode 100644
index 00000000..2be87467
--- /dev/null
+++ b/app/src/features/search/components/TabedSearch.tsx
@@ -0,0 +1,121 @@
+import { RootState } from "@state/store";
+import { motion, AnimatePresence, LayoutGroup } from "motion/react";
+import { useDispatch, useSelector } from "react-redux";
+import styled from "styled-components";
+import { SEARCH_TABS } from "../data/tabs-components-map";
+import { setSelectedTab } from "@state/messages/global-search";
+
+const TabedSearchContainer = styled(motion.div)`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: var(--color-background-secondary);
+`;
+
+const TabListWrapper = styled.div`
+  display: flex;
+  position: relative;
+  overflow-x: scroll;
+  box-shadow: 0 2px 2px var(--color-light-shadow);
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const TabButton = styled.button<{ $active?: boolean }>`
+  position: relative;
+  padding: 12px 18px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  color: ${(props) =>
+    props.$active ? "var(--accent-color)" : "var(--color-text-secondary)"};
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  z-index: 1;
+`;
+
+const TabUnderline = styled(motion.div)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: var(--accent-color);
+  border-radius: 2px;
+`;
+
+const TabContent = styled(motion.div)`
+  overflow-y: scroll;
+  height: calc(100% - 48px);
+`;
+
+const TabedSearch: React.FC = () => {
+  const dispatch = useDispatch();
+  const { searchTerm, selectedTab } = useSelector(
+    (state: RootState) => state.globalSearch,
+  );
+
+  const isSearching = searchTerm.length > 0;
+
+  return (
+    <AnimatePresence>
+      {isSearching && (
+        <TabedSearchContainer
+          initial={{ opacity: 0, x: "-100%" }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: "-100%" }}
+          transition={{ type: "spring", duration: 0.2 }}
+          key="tap-search"
+        >
+          <LayoutGroup>
+            <TabListWrapper>
+              {SEARCH_TABS.map((tab) => (
+                <TabButton
+                  key={tab.title}
+                  onClick={() => dispatch(setSelectedTab(tab.title))}
+                  $active={selectedTab === tab.title}
+                >
+                  {tab.title}
+                  {selectedTab === tab.title && (
+                    <TabUnderline
+                      layoutId="underline"
+                      transition={{
+                        type: "spring",
+                        duration: 0.3,
+                      }}
+                    />
+                  )}
+                </TabButton>
+              ))}
+            </TabListWrapper>
+
+            <AnimatePresence mode="wait">
+              <TabContent
+                key={selectedTab}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ type: "tween", duration: 0.2 }}
+              >
+                {SEARCH_TABS.find(
+                  (tab) => tab.title === selectedTab,
+                )?.component()}
+              </TabContent>
+            </AnimatePresence>
+          </LayoutGroup>
+        </TabedSearchContainer>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default TabedSearch;
diff --git a/app/src/features/search/components/result-items/AudioResult.tsx b/app/src/features/search/components/result-items/AudioResult.tsx
new file mode 100644
index 00000000..ba1f9cd6
--- /dev/null
+++ b/app/src/features/search/components/result-items/AudioResult.tsx
@@ -0,0 +1,134 @@
+import React, { useState, useRef } from "react";
+import styled from "styled-components";
+import { motion } from "framer-motion";
+
+import { isValidDate } from "@utils/helpers";
+import { getIcon } from "@data/icons";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1rem;
+`;
+
+const PlayPauseButton = styled(motion.button)`
+  background-color: var(--accent-color);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 3.125rem;
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const DateSpan = styled.span`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+`;
+
+const Preview = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+`;
+
+interface AudioResultProps {
+  title: string;
+  date: string;
+  duration?: string;
+  file?: string;
+}
+
+const AudioResult: React.FC<AudioResultProps> = ({
+  title,
+  date,
+  duration,
+  file,
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const togglePlayPause = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleAudioEnded = () => {
+    setIsPlaying(false);
+  };
+
+  return (
+    <ItemWrapper>
+      <ImageWrapper>
+        {file && (
+          <>
+            <PlayPauseButton
+              onClick={togglePlayPause}
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              {isPlaying ? getIcon("Pause") : getIcon("Play")}
+            </PlayPauseButton>
+            <audio ref={audioRef} src={file} onEnded={handleAudioEnded} />
+          </>
+        )}
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+          <DateSpan>
+            {isValidDate(date)
+              ? new Date(date).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })
+              : ""}
+          </DateSpan>
+        </ItemHeader>
+        <Preview>
+          {duration && <span>{duration} • </span>}
+          {title}
+        </Preview>
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default AudioResult;
diff --git a/app/src/features/search/components/result-items/ChannelResult.tsx b/app/src/features/search/components/result-items/ChannelResult.tsx
new file mode 100644
index 00000000..192e22d3
--- /dev/null
+++ b/app/src/features/search/components/result-items/ChannelResult.tsx
@@ -0,0 +1,74 @@
+import styled from "styled-components";
+
+import Avatar from "@components/Avatar";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const Preview = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+const UserNameSpan = styled.span`
+  color: var(--accent-color);
+`;
+
+interface ChannelResultProps {
+  title: string;
+  image?: string;
+  username?: string;
+  subscribers?: number;
+}
+
+const ChannelResult: React.FC<ChannelResultProps> = ({
+  title,
+  image,
+  username,
+  subscribers,
+}) => {
+  return (
+    <ItemWrapper>
+      <ImageWrapper>
+        <Avatar name={title} image={image} size="large" />
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+        </ItemHeader>
+        <Preview>
+          {username && <UserNameSpan>@{username}</UserNameSpan>}
+          {subscribers && ` • ${subscribers} subscribers`}
+        </Preview>
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default ChannelResult;
diff --git a/app/src/features/search/components/result-items/FileResult.tsx b/app/src/features/search/components/result-items/FileResult.tsx
new file mode 100644
index 00000000..9b45ce95
--- /dev/null
+++ b/app/src/features/search/components/result-items/FileResult.tsx
@@ -0,0 +1,80 @@
+import styled from "styled-components";
+
+import Avatar from "@components/Avatar";
+import { isValidDate } from "@utils/helpers";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const Preview = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+interface FileResultProps {
+  title: string;
+  image?: string;
+  size?: string;
+  date?: string;
+}
+
+const FileResult: React.FC<FileResultProps> = ({
+  title,
+  image,
+  size,
+  date,
+}) => {
+  return (
+    <ItemWrapper>
+      <ImageWrapper>
+        <Avatar name={title} image={image} size="large" />
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+        </ItemHeader>
+        <Preview>
+          {size && <span>{size} MB • </span>}
+          {(date &&
+            isValidDate(date) &&
+            new Date(date).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+            })) ||
+            ""}
+        </Preview>
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default FileResult;
diff --git a/app/src/features/search/components/result-items/MessageResult.tsx b/app/src/features/search/components/result-items/MessageResult.tsx
new file mode 100644
index 00000000..f731adc7
--- /dev/null
+++ b/app/src/features/search/components/result-items/MessageResult.tsx
@@ -0,0 +1,130 @@
+import styled from "styled-components";
+
+import Avatar from "@components/Avatar";
+import { isValidDate } from "@utils/helpers";
+
+const ItemWrapper = styled.div`
+  display: flex;
+  padding: 1rem;
+  cursor: pointer;
+`;
+
+const ImageWrapper = styled.div`
+  overflow: hidden;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h3`
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const DateSpan = styled.span`
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+`;
+
+const Message = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+`;
+
+const MediaPreview = styled.img`
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  border-radius: 0.25rem;
+  margin-right: 0.3rem;
+`;
+
+const Highlight = styled.span`
+  background: #cae3f7;
+  color: #000000;
+  padding: 0 0.125rem;
+  border-radius: 2px;
+`;
+
+const LinkPreview = styled.a`
+  font-size: 0.875rem;
+  color: var(--accent-color);
+`;
+
+interface MessageResultProps {
+  title: string;
+  message: string;
+  date: string;
+  searchTerm?: string;
+  image?: string;
+  media?: string;
+  link?: string;
+}
+
+const MessageResult: React.FC<MessageResultProps> = ({
+  title,
+  message,
+  date,
+  searchTerm,
+  image,
+  media,
+  link,
+}) => {
+  const highlight = (text: string) => {
+    if (!searchTerm) return text;
+    const split = text.split(new RegExp(`(${searchTerm})`, "gi"));
+    return split.map((part, index) =>
+      part.toLowerCase() === searchTerm.toLowerCase() ? (
+        <Highlight key={index}>{part}</Highlight>
+      ) : (
+        part
+      ),
+    );
+  };
+
+  return (
+    <ItemWrapper>
+      <ImageWrapper>
+        <Avatar name={title} image={image} size="large" />
+      </ImageWrapper>
+      <ContentWrapper>
+        <ItemHeader>
+          <Title>{title}</Title>
+          <DateSpan>
+            {isValidDate(date)
+              ? new Date(date).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })
+              : ""}
+          </DateSpan>
+        </ItemHeader>
+        <Message>
+          {media && <MediaPreview src={media} alt={title} />}
+          {highlight(message)}
+        </Message>
+        {link && (
+          <LinkPreview href={link} target="_blank" rel="noreferrer">
+            {link}
+          </LinkPreview>
+        )}
+      </ContentWrapper>
+    </ItemWrapper>
+  );
+};
+
+export default MessageResult;
diff --git a/app/src/features/search/data/tabs-components-map.tsx b/app/src/features/search/data/tabs-components-map.tsx
new file mode 100644
index 00000000..d84f8266
--- /dev/null
+++ b/app/src/features/search/data/tabs-components-map.tsx
@@ -0,0 +1,147 @@
+import AudioResult from "../components/result-items/AudioResult";
+import ChannelResult from "../components/result-items/ChannelResult";
+import FileResult from "../components/result-items/FileResult";
+import MessageResult from "../components/result-items/MessageResult";
+
+export const SEARCH_TABS = [
+  {
+    title: "Chats",
+    component: () => (
+      <div>
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+        />
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/neo/200/200"
+          media="https://placecats.com/20/20"
+        />
+        <ChannelResult
+          title="Telware Testing"
+          image="https://placecats.com/200/200"
+          username="Telware"
+          subscribers={100}
+        />
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+          link="https://placecats.com/20/20"
+        />
+        <FileResult
+          title="Telware Testing"
+          image="https://www.svgrepo.com/show/144578/pdf.svg"
+          size="20"
+          date={new Date().toString()}
+        />
+        <AudioResult
+          title="Telware Testing"
+          date={new Date().toString()}
+          duration="20"
+          file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
+        />
+        {Array.from({ length: 10 }).map((_, index) => (
+          <MessageResult
+            key={index}
+            searchTerm="hi"
+            message=" Hello hi there"
+            title="Telware Testing"
+            date={new Date().toString()}
+            image="https://placecats.com/200/200"
+          />
+        ))}
+      </div>
+    ),
+  },
+  {
+    title: "Channnels",
+    component: () => (
+      <div>
+        <ChannelResult
+          title="Telware Testing"
+          image="https://placecats.com/200/200"
+          username="Telware"
+          subscribers={100}
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Media",
+    component: () => (
+      <div>
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+          media="https://placecats.com/20/20"
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Links",
+    component: () => (
+      <div>
+        <MessageResult
+          searchTerm="hi"
+          message=" Hello hi there"
+          title="Telware Testing"
+          date={new Date().toString()}
+          image="https://placecats.com/200/200"
+          link="https://placecats.com/20/20"
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Files",
+    component: () => (
+      <div>
+        <FileResult
+          title="Telware Testing"
+          image="https://www.svgrepo.com/show/144578/pdf.svg"
+          size="20"
+          date={new Date().toString()}
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Music",
+    component: () => (
+      <div>
+        <AudioResult
+          title="Telware Testing"
+          date={new Date().toString()}
+          duration="20"
+          file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
+        />
+      </div>
+    ),
+  },
+  {
+    title: "Voice",
+    component: () => (
+      <div>
+        <AudioResult
+          title="Telware Testing"
+          date={new Date().toString()}
+          duration="20"
+          file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
+        />
+      </div>
+    ),
+  },
+];
diff --git a/app/src/state/messages/global-search.ts b/app/src/state/messages/global-search.ts
new file mode 100644
index 00000000..a5ee813d
--- /dev/null
+++ b/app/src/state/messages/global-search.ts
@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface SearchState {
+  searchTerm: string;
+  selectedTab: string;
+}
+
+const initialState: SearchState = {
+  searchTerm: "",
+  selectedTab: "Chats",
+};
+
+const globalSearchSlice = createSlice({
+  name: "globalSearch",
+  initialState,
+  reducers: {
+    setSearchTerm: (state, action: PayloadAction<string>) => {
+      state.searchTerm = action.payload;
+    },
+    setSelectedTab: (state, action: PayloadAction<string>) => {
+      state.selectedTab = action.payload;
+    },
+  },
+});
+
+export const { setSearchTerm, setSelectedTab } = globalSearchSlice.actions;
+export default globalSearchSlice.reducer;
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index d1ed2800..ebdba35f 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -3,6 +3,7 @@ import themeReducer from "./theme/theme";
 import sideBarReducer from "./side-bar/sideBar";
 import userReducer from "./user/user";
 import searchReducer from "./messages/search";
+import globalSearchReducer from "./messages/global-search";
 import activeMessageReducer from "./messages/activeMessage";
 import chatsReducer from "./messages/chats";
 import selectedUsersReducer from "./groups/selectedUsers";
@@ -15,6 +16,7 @@ export const store = configureStore({
     search: searchReducer,
     activeMessage: activeMessageReducer,
     chats: chatsReducer,
+    globalSearch: globalSearchReducer,
     selectedUsers: selectedUsersReducer,
   },
 });
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 930469eb..6d91844a 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -112,6 +112,7 @@ const GlobalStyles = createGlobalStyle`
     
     --scrollbar-color:rgba(255, 255, 255, .2);
     --color-default-shadow: rgb(16, 16, 16, 0.612);
+    --color-light-shadow: rgb(16, 16, 16, 0.212);
     
     --color-chat-active: #1e4454;
     --color-chat-hover: #25353f;
diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts
index 0a82eb40..652cdc2f 100644
--- a/app/src/utils/helpers.ts
+++ b/app/src/utils/helpers.ts
@@ -27,9 +27,15 @@ function getElapsedTime(timestamp: string): string {
     return `${seconds}s`;
   }
 }
+
 function getAvatarName(name: string | undefined): string {
   const firstName = name?.split(" ")[0];
   const lastName = name?.split(" ")[1];
   return `${firstName?.charAt(0) || ""} ${lastName?.charAt(0) || ""}`;
 }
-export { getElapsedTime, getAvatarName };
+
+function isValidDate(date: string): boolean {
+  return new Date(date).toString() !== "Invalid Date";
+}
+
+export { getElapsedTime, getAvatarName, isValidDate };
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index f95d44b9..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,255 +0,0 @@
-{
-  "name": "telware-frontend",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "socket.io": "^4.8.1"
-      }
-    },
-    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
-      "license": "MIT"
-    },
-    "node_modules/@types/cors": {
-      "version": "2.8.17",
-      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
-      "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "22.9.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.3.tgz",
-      "integrity": "sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.19.8"
-      }
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/base64id": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
-      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
-      "license": "MIT",
-      "engines": {
-        "node": "^4.5.0 || >= 5.9"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
-      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4",
-        "vary": "^1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
-      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/engine.io": {
-      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz",
-      "integrity": "sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/cookie": "^0.4.1",
-        "@types/cors": "^2.8.12",
-        "@types/node": ">=10.0.0",
-        "accepts": "~1.3.4",
-        "base64id": "2.0.0",
-        "cookie": "~0.7.2",
-        "cors": "~2.8.5",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~5.2.1",
-        "ws": "~8.17.1"
-      },
-      "engines": {
-        "node": ">=10.2.0"
-      }
-    },
-    "node_modules/engine.io-parser": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
-      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/socket.io": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
-      "integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "~1.3.4",
-        "base64id": "~2.0.0",
-        "cors": "~2.8.5",
-        "debug": "~4.3.2",
-        "engine.io": "~6.6.0",
-        "socket.io-adapter": "~2.5.2",
-        "socket.io-parser": "~4.2.4"
-      },
-      "engines": {
-        "node": ">=10.2.0"
-      }
-    },
-    "node_modules/socket.io-adapter": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
-      "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "~4.3.4",
-        "ws": "~8.17.1"
-      }
-    },
-    "node_modules/socket.io-parser": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
-      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
-      "license": "MIT",
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.3.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "license": "MIT"
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/ws": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    }
-  }
-}

From eafbfbd759e027576675a8b2f298ae2e236c1c25 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:50:35 +0200
Subject: [PATCH 075/136] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(messaging):=20Ref?=
 =?UTF-8?q?actor=20message=20component=20(#114)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/features/chats/ChatBody.tsx           |  23 +--
 app/src/features/chats/ChatsList.tsx          |   2 +-
 app/src/features/chats/Message.tsx            | 138 ++----------------
 app/src/features/chats/MessageBox.tsx         |   2 +-
 app/src/features/chats/MessageContent.tsx     |  70 +++++++++
 app/src/features/chats/MessageDetails.tsx     |  38 +++++
 app/src/features/chats/MessageOptionList.tsx  |  73 ++++++---
 app/src/features/chats/SenderName.tsx         |  18 +--
 .../chats/contexts/MessageProvider.tsx        |  36 +++++
 app/src/features/chats/hooks/useChats.ts      |   1 -
 10 files changed, 231 insertions(+), 170 deletions(-)
 create mode 100644 app/src/features/chats/MessageContent.tsx
 create mode 100644 app/src/features/chats/MessageDetails.tsx
 create mode 100644 app/src/features/chats/contexts/MessageProvider.tsx

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index d3ac63f6..edf62739 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -7,6 +7,7 @@ import { useFetchNextPage } from "./hooks/useFetchNextPage";
 import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
+import MessageProvider from "./contexts/MessageProvider";
 
 const ScrollContainer = styled.div`
   width: 100%;
@@ -61,16 +62,18 @@ function ChatBody() {
   //TODO: fix the ordering of pages and message within each page
   //TODO: fix new page scroll to the top most message
   return (
-    <>
-      <ScrollContainer>
-        <div ref={ref}></div>
-
-        {messages &&
-          messages.map((data) => {
-            return <Message key={data._id} data={data} />;
-          })}
-      </ScrollContainer>
-    </>
+    <ScrollContainer>
+      <div ref={ref}></div>
+
+      {messages &&
+        messages.map((data) => {
+          return (
+            <MessageProvider data={data}>
+              <Message key={data._id}/>
+            </MessageProvider>
+          );
+        })}
+    </ScrollContainer>
   );
 }
 
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index 70b12f49..3fec513a 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import ChatItem from "./ChatItem";
 import { useChats } from "./hooks/useChats";
-import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const ChatListContainer = styled.ul`
   display: flex;
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 48fc2edd..edea88c4 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -1,29 +1,15 @@
 import styled from "styled-components";
 
-import { MessageInterface } from "types/messages";
-
-import { getIcon } from "@data/icons";
-
 import CheckBox from "@features/forward/checkBox";
 import MessageOptionList from "./MessageOptionList";
 import useScrollToSearchResultsMsg from "@features/search/hooks/useScrollToSearchResultsMsg";
+import MessageContent from "./MessageContent";
+import useCheckBox from "@features/forward/hooks/useCheckBox";
+import MessageDetails from "./MessageDetails";
 
-import RenderWithHighlight from "@utils/renderWithHighlight";
-
-import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
-import MessageBox from "./MessageBox";
-import useCheckBox from "@features/forward/hooks/useCheckBox";
 import useHover from "./hooks/useHover";
-import useOptionListAction from "./hooks/useOptionListAction";
-import FileViewer from "./media/FileViewer";
-import {
-  pinMessage,
-  setShowCheckBox,
-  unpinMessage,
-} from "@state/messages/chats";
-import { useSocket } from "@hooks/useSocket";
-import SenderName from "./SenderName";
+import { useMessageContext } from "./contexts/MessageProvider";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -84,93 +70,23 @@ const MessageRow = styled.div<{ $isChecked: boolean }>`
 
   width: 100%;
 `;
-const Gif = styled.img`
-  width: 120px;
-  height: 120px;
-  object-fit: fill;
-  cursor: pointer;
-  border-radius: 0.5rem;
-`;
+
 const CheckBoxWrapper = styled.div`
   padding-left: 1rem;
   align-self: center;
 `;
 
-const MessageBoxWrapper = styled.div`
-  display: block;
-`;
-
-const StyledCol = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const TimeStamp = styled.div<{ $isMine: boolean }>`
-  font-size: x-small;
-  font-size: x-small;
-  color: ${({ $isMine }) =>
-    $isMine ? "var(--color-text)" : "var(--color-text-secondary)"};
-
-  float: none;
-  display: block;
+function Message() {
+  const { _id: id, chatId, isMine } = useMessageContext();
 
-  float: none;
-  display: block;
-`;
-
-const Details = styled.div`
-  display: flex;
-  align-self: flex-end;
-
-  gap: 0.2rem;
-`;
-
-type MessageProps = {
-  data: MessageInterface;
-};
-
-function Message({ data }: MessageProps) {
-  const {
-    _id: id,
-    senderId,
-    content,
-    isPinned,
-    chatId,
-    parentMessageId,
-    media,
-    contentType,
-  } = data;
-
-  const { searchTerm, searchResults } = useAppSelector((state) => state.search);
   const { lastMessageRef } = useScrollToLastMsg();
   useScrollToSearchResultsMsg();
 
-  const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
-    useSocket();
-
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
     chatId,
     messageId: id,
   });
   const { isHovered, handleMouseLeave, handleOpenList } = useHover();
-  const userId = useAppSelector((state) => state.user.userInfo.id);
-  const { handleEditMessage, handleReply, MoveToReplyMessage } =
-    useOptionListAction({ id, content, parentMessageId });
-  const dispatch = useAppDispatch();
-
-  function pinOnClick() {
-    if (isPinned) {
-      dispatch(unpinMessage({ messageId: id, chatId: chatId }));
-      unpinMessageSocket(chatId, id, userId);
-      return;
-    }
-    dispatch(pinMessage({ messageId: id, chatId: chatId }));
-    pinMessageSocket(chatId, id, userId);
-  }
-
-  function forwardOnClick() {
-    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: !showCheckBox }));
-  }
 
   return (
     <MessageRow $isChecked={isChecked}>
@@ -183,46 +99,16 @@ function Message({ data }: MessageProps) {
       <StyledMessage
         ref={lastMessageRef}
         key={id}
-        $isMine={senderId === userId}
+        $isMine={isMine}
         data-message-id={id}
         data-testid={`message-${id}`}
         onMouseLeave={handleMouseLeave}
         onContextMenu={handleOpenList}
       >
-        <Bubble $isMine={senderId === userId}>
-          <StyledCol>
-            <SenderName $isMine={senderId === userId} senderId={senderId} />
-            {parentMessageId && (
-              <MessageBoxWrapper
-                onClick={MoveToReplyMessage}
-                test-id={`reply-box-${id}`}
-              >
-                <MessageBox messageId={parentMessageId} />
-              </MessageBoxWrapper>
-            )}
-            {(contentType === "GIF" || contentType === "sticker") && media && (
-              <Gif src={media} loading="lazy" />
-            )}
-            {media && !(contentType === "GIF" || contentType === "sticker") && (
-              <FileViewer file={media} />
-            )}
-            {RenderWithHighlight(content, searchTerm, searchResults, id)}
-          </StyledCol>
-
-          {isHovered && (
-            <MessageOptionList
-              $isMine={senderId === userId}
-              forwardOnClick={forwardOnClick}
-              isPinned={isPinned}
-              pinOnClick={pinOnClick}
-              replyOnClick={handleReply}
-              editOnClick={handleEditMessage}
-            />
-          )}
-          <Details>
-            {isPinned && getIcon("PushPin", { sx: { fontSize: "1rem" } })}
-            <TimeStamp $isMine={senderId === userId}>11:09AM</TimeStamp>
-          </Details>
+        <Bubble $isMine={isMine}>
+          <MessageContent />
+          {isHovered && <MessageOptionList />}
+          <MessageDetails />
         </Bubble>
       </StyledMessage>
     </MessageRow>
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index cc09e6de..fb7b9ed4 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -88,7 +88,7 @@ function MessageBox({ messageId }: MessageBoxProps) {
   const memberIndex = members.findIndex(
     (member) => member._id === msg?.senderId
   );
-   const colorIndex = memberIndex >= 0 ? (memberIndex % 5) + 2 : 2;
+  const colorIndex = memberIndex >= 0 ? (memberIndex % 5) + 2 : 2;
 
   const activeMessage = useAppSelector(
     (state: RootState) => state.activeMessage
diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
new file mode 100644
index 00000000..50d2ca15
--- /dev/null
+++ b/app/src/features/chats/MessageContent.tsx
@@ -0,0 +1,70 @@
+import styled from "styled-components";
+
+import MessageBox from "./MessageBox";
+import SenderName from "./SenderName";
+import FileViewer from "./media/FileViewer";
+
+import RenderWithHighlight from "@utils/renderWithHighlight";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+
+import useOptionListAction from "./hooks/useOptionListAction";
+import { useAppSelector } from "@hooks/useGlobalState";
+
+const MessageBoxWrapper = styled.div`
+  display: block;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Gif = styled.img`
+  width: 120px;
+  height: 120px;
+  object-fit: fill;
+  cursor: pointer;
+  border-radius: 0.5rem;
+`;
+
+function MessageContent() {
+  const {
+    _id: id,
+    content,
+    parentMessageId,
+    media,
+    contentType,
+  } = useMessageContext();
+
+  const { searchTerm, searchResults } = useAppSelector((state) => state.search);
+  const { MoveToReplyMessage } = useOptionListAction({
+    id,
+    content,
+    parentMessageId,
+  });
+
+  const isGifOrSticker =
+    media && (contentType === "GIF" || contentType === "sticker");
+
+  const isFile = media && !(contentType === "GIF" || contentType === "sticker");
+
+  return (
+    <Container>
+      <SenderName />
+      {parentMessageId && (
+        <MessageBoxWrapper
+          onClick={MoveToReplyMessage}
+          test-id={`reply-box-${id}`}
+        >
+          <MessageBox messageId={parentMessageId} />
+        </MessageBoxWrapper>
+      )}
+      {isGifOrSticker && <Gif src={media} loading="lazy" />}
+      {isFile && <FileViewer file={media} />}
+      {RenderWithHighlight(content, searchTerm, searchResults, id)}
+    </Container>
+  );
+}
+
+export default MessageContent;
diff --git a/app/src/features/chats/MessageDetails.tsx b/app/src/features/chats/MessageDetails.tsx
new file mode 100644
index 00000000..a68a8f09
--- /dev/null
+++ b/app/src/features/chats/MessageDetails.tsx
@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+import { getIcon } from "@data/icons";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+
+const TimeStamp = styled.div<{ $isMine: boolean }>`
+  font-size: x-small;
+  font-size: x-small;
+  color: ${({ $isMine }) =>
+    $isMine ? "var(--color-text)" : "var(--color-text-secondary)"};
+
+  float: none;
+  display: block;
+
+  float: none;
+  display: block;
+`;
+
+const Details = styled.div`
+  display: flex;
+  align-self: flex-end;
+
+  gap: 0.2rem;
+`;
+
+function MessageDetails() {
+  const { isPinned, isMine } = useMessageContext();
+
+  return (
+    <Details>
+      {isPinned && getIcon("PushPin", { sx: { fontSize: "1rem" } })}
+      <TimeStamp $isMine={isMine}>11:09AM</TimeStamp>
+    </Details>
+  );
+}
+
+export default MessageDetails;
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index 9b6c026b..0f9169aa 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -1,4 +1,14 @@
 import styled from "styled-components";
+import { useMessageContext } from "./contexts/MessageProvider";
+import useOptionListAction from "./hooks/useOptionListAction";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import {
+  pinMessage,
+  setShowCheckBox,
+  unpinMessage,
+} from "@state/messages/chats";
+import { useSocket } from "@hooks/useSocket";
+import useCheckBox from "@features/forward/hooks/useCheckBox";
 
 const StyledList = styled.ul<{ $isMine: boolean }>`
   position: absolute;
@@ -48,39 +58,58 @@ const StyledP = styled.p`
   color: var(--color-text-secondary);
 `;
 
-interface Props {
-  $isMine: boolean;
-  forwardOnClick: () => void;
-  replyOnClick: () => void;
-  editOnClick: () => void;
-  pinOnClick: () => void;
-  isPinned: boolean;
-}
-
-function MessageOptionList(props: Props) {
+function MessageOptionList() {
   const {
-    $isMine,
-    forwardOnClick,
-    replyOnClick,
-    editOnClick,
-    pinOnClick,
+    isMine,
     isPinned,
-  } = props;
+    _id: id,
+    content,
+    parentMessageId,
+    chatId,
+  } = useMessageContext();
+
+  const { handleEditMessage, handleReply } = useOptionListAction({
+    id,
+    content,
+    parentMessageId,
+  });
+
+  const { showCheckBox } = useCheckBox({ chatId, messageId: id });
+
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+
+  const dispatch = useAppDispatch();
+  const { pinMessage: pinMessageSocket, unpinMessage: unpinMessageSocket } =
+    useSocket();
+
+  function handlePin() {
+    if (isPinned) {
+      dispatch(unpinMessage({ messageId: id, chatId: chatId }));
+      unpinMessageSocket(chatId, id, userId);
+      return;
+    }
+    dispatch(pinMessage({ messageId: id, chatId: chatId }));
+    pinMessageSocket(chatId, id, userId);
+  }
+
+  function handleForward() {
+    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: !showCheckBox }));
+  }
 
   return (
-    <StyledList $isMine={$isMine} data-testid="message-option-list">
-      <HoverMask onClick={forwardOnClick} data-testid="forward-option">
+    <StyledList $isMine={isMine} data-testid="message-option-list">
+      <HoverMask onClick={handleForward} data-testid="forward-option">
         <StyledP>Forward</StyledP>
       </HoverMask>
-      <HoverMask onClick={replyOnClick} data-testid="reply-option">
+      <HoverMask onClick={handleReply} data-testid="reply-option">
         <StyledP>Reply</StyledP>
       </HoverMask>
-      {$isMine && (
-        <HoverMask onClick={editOnClick} data-testid="edit-option">
+      {isMine && (
+        <HoverMask onClick={handleEditMessage} data-testid="edit-option">
           <StyledP>Edit</StyledP>
         </HoverMask>
       )}
-      <HoverMask onClick={pinOnClick} data-testid="pin-option">
+      <HoverMask onClick={handlePin} data-testid="pin-option">
         <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
       </HoverMask>
     </StyledList>
diff --git a/app/src/features/chats/SenderName.tsx b/app/src/features/chats/SenderName.tsx
index a9bf69a1..236b277e 100644
--- a/app/src/features/chats/SenderName.tsx
+++ b/app/src/features/chats/SenderName.tsx
@@ -1,19 +1,19 @@
-import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
+
+import { useAppSelector } from "@hooks/useGlobalState";
 import { useChatMembers } from "./hooks/useChatMember";
-import { useParams } from "react-router-dom";
+
+import { useMessageContext } from "./contexts/MessageProvider";
 
 const Name = styled.div<{ $colorIndex: number }>`
   color: var(--color-peer-${({ $colorIndex }) => $colorIndex});
 `;
 
-type SenderNameProps = {
-  $isMine: boolean;
-  senderId: string;
-};
-
-function SenderName({ $isMine, senderId }: SenderNameProps) {
+function SenderName() {
   const { chatId } = useParams<{ chatId: string }>();
+  const { senderId, isMine } = useMessageContext();
+
   const chat = useAppSelector((state) =>
     state.chats.chats.find((chat) => chat?._id === chatId)
   );
@@ -25,7 +25,7 @@ function SenderName({ $isMine, senderId }: SenderNameProps) {
 
   const colorIndex = (memberIndex % 5) + 2;
 
-  if ($isMine || chat?.type === "private") return null;
+  if (isMine || chat?.type === "private") return null;
 
   return (
     <Name $colorIndex={colorIndex}>
diff --git a/app/src/features/chats/contexts/MessageProvider.tsx b/app/src/features/chats/contexts/MessageProvider.tsx
new file mode 100644
index 00000000..fa4c3ecf
--- /dev/null
+++ b/app/src/features/chats/contexts/MessageProvider.tsx
@@ -0,0 +1,36 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import React, { createContext, useContext } from "react";
+import { MessageInterface } from "types/messages";
+
+type ContextType = MessageInterface & {
+  isMine: boolean;
+};
+
+const MessageContext = createContext<ContextType | null>(null);
+
+type ProviderProps = {
+  children: React.ReactNode;
+  data: MessageInterface;
+};
+
+function MessageProvider({ children, data }: ProviderProps) {
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+  const isMine = userId === data.senderId;
+
+  return (
+    <MessageContext.Provider value={{ ...data, isMine }}>
+      {children}
+    </MessageContext.Provider>
+  );
+}
+
+export function useMessageContext() {
+  const context = useContext(MessageContext);
+  if (!context) {
+    throw new Error("useMessageContext must be used within a MessageProvider");
+  }
+  return context;
+}
+
+export default MessageProvider;
+export { MessageContext };
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index c378dd0c..47dfe958 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -16,7 +16,6 @@ export function useChats() {
 
   const { blockList } = useBlock();
   const userId = useAppSelector((state) => state.user.userInfo.id);
-  console.log(userId);
   useEffect(() => {
     const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),

From d3441fd23ae5f41e44fe4ac3191c432c91ce8a2b Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:58:21 +0200
Subject: [PATCH 076/136] bugfixs: scroll + flickering (solved using
 memoization) (#113)

* fix: scroll overflowing to background in search

* fix: icons flickering using memoization and Hashmaps
---
 .../components/side-bar/chats/ChatsSideBar.tsx    |  7 ++++---
 app/src/data/icons.tsx                            | 15 +++++++++++++--
 app/src/features/chats/ChatsList.tsx              |  2 ++
 .../features/search/components/TabedSearch.tsx    |  2 +-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index 9f69866e..b29ea709 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -4,6 +4,8 @@ import StartNewChat from "@features/chats/StartNewChat";
 import AddStory from "@features/stories/components/AddStory";
 import StoryListContainer from "@features/stories/components/StoryListContainer";
 import TabedSearch from "@features/search/components/TabedSearch";
+import { useSelector } from "react-redux";
+import { RootState } from "@state/store";
 
 interface ChatsSideBarProps {
   children?: React.ReactNode;
@@ -16,8 +18,7 @@ const StyledChatsSideBar = styled.div`
   flex-direction: column;
   color: var(--color-icon-secondary);
   background-color: var(--color-background);
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 `;
 
 const ButtonsContainer = styled.div`
@@ -40,7 +41,7 @@ function ChatsSideBar({ children }: ChatsSideBarProps) {
       <ChatsSidebarHeader />
       <div style={{ position: "relative", height: "100%" }}>
         <StoryListContainer />
-        <div style={{ flex: 1 }}>{children}</div>{" "}
+        <div style={{ flex: 1, height: "calc(100% - 48px)" }}>{children}</div>
         <ButtonsContainer data-testid="button-container">
           <AddStory data-testid="add-story-button" />
           <StartNewChat data-testid="start-new-chat-button" />
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 50da8c37..94062158 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -392,6 +392,8 @@ const iconImports: Record<iconStrings, IconConfig> = {
   },
 };
 
+const iconCache = new Map<string, React.ReactElement>();
+
 function getIcon(
   iconName?: iconStrings,
   customProps?: {
@@ -405,6 +407,11 @@ function getIcon(
   const iconConfig = iconImports[iconName];
   if (!iconConfig) return undefined;
 
+  const cacheKey = `${iconName}-${JSON.stringify(customProps)}`;
+  if (iconCache.has(cacheKey)) {
+    return iconCache.get(cacheKey);
+  }
+
   const LazyIcon = lazy(iconConfig.importFn);
 
   const mergedProps = {
@@ -416,12 +423,16 @@ function getIcon(
     },
   };
 
-  return (
+  const iconElement = (
     <Suspense fallback={<div style={{ width: "24px", height: "24px" }}></div>}>
       <LazyIcon {...mergedProps} />
     </Suspense>
   );
+
+  iconCache.set(cacheKey, iconElement);
+
+  return iconElement;
 }
 
-export { getIcon };
+export { getIcon, icons };
 export type { iconStrings };
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index 3fec513a..fb5e7c43 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -7,9 +7,11 @@ const ChatListContainer = styled.ul`
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   max-width: 600px;
   margin: auto;
   background-color: var(--color-background);
+  overflow-y: scroll;
 `;
 
 const ChatsList = () => {
diff --git a/app/src/features/search/components/TabedSearch.tsx b/app/src/features/search/components/TabedSearch.tsx
index 2be87467..198d7733 100644
--- a/app/src/features/search/components/TabedSearch.tsx
+++ b/app/src/features/search/components/TabedSearch.tsx
@@ -55,7 +55,7 @@ const TabUnderline = styled(motion.div)`
 
 const TabContent = styled(motion.div)`
   overflow-y: scroll;
-  height: calc(100% - 48px);
+  height: calc(100% - 96px);
 `;
 
 const TabedSearch: React.FC = () => {

From 6d4c9a711be1ebab45fc714239583d4c0319fcce Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Wed, 11 Dec 2024 19:35:02 +0200
Subject: [PATCH 077/136] :bug: (messaging): fixing scrolling behavior (#115)

* :bug: (messaging): fixing screen name

* :sparkles: (messaging): integrating block with messaging

* :sparkles: (messaging): prevent sending to blocked user

* :sparkles: (messaging): prevent recieving from blocked user

* :bug: (messaging-block): adding testids

* :recycle: (messaging): added photo and name as attributes in chats

* :bug: (messaging): hook issue fixed

* :sparkles: (messaging): updating last message in chatlist

* :zap: (messaging): scroll performance improved

* :bug: fixing function parameters
---
 app/src/features/chats/ChatBody.tsx | 29 ++++++++++++++++++-----------
 app/src/features/chats/Message.tsx  |  5 +++--
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index edf62739..9b9c483f 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 import Message from "./Message";
 import { useInView } from "@features/stories/hooks/useInView";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useFetchNextPage } from "./hooks/useFetchNextPage";
 import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
@@ -11,7 +11,6 @@ import MessageProvider from "./contexts/MessageProvider";
 
 const ScrollContainer = styled.div`
   width: 100%;
-  /* margin-top: 100px; */
   height: 87dvh;
   overflow-y: auto;
   position: relative;
@@ -29,10 +28,7 @@ const ScrollContainer = styled.div`
     border-radius: 5px;
   }
 
-  scroll-behavior: smooth;
-
   z-index: 1;
-
   display: flex;
   flex-direction: column;
   padding: 10px;
@@ -51,25 +47,36 @@ function ChatBody() {
 
   const { fetchNextPage } = useFetchNextPage();
 
-  const { inView, ref } = useInView({ threshold: 0.5 });
+  const { inView, ref } = useInView({ threshold: 0.01 });
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (inView) {
-      fetchNextPage();
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      const previousScrollHeight = container.scrollHeight;
+      const previousScrollTop = container.scrollTop;
+
+      fetchNextPage().then(() => {
+        requestAnimationFrame(() => {
+          const newScrollHeight = container.scrollHeight;
+          container.scrollTop =
+            previousScrollTop + (newScrollHeight - previousScrollHeight);
+        });
+      });
     }
   }, [fetchNextPage, inView]);
 
-  //TODO: fix the ordering of pages and message within each page
-  //TODO: fix new page scroll to the top most message
   return (
-    <ScrollContainer>
+    <ScrollContainer ref={scrollContainerRef}>
       <div ref={ref}></div>
 
       {messages &&
         messages.map((data) => {
           return (
             <MessageProvider data={data}>
-              <Message key={data._id}/>
+              <Message key={data._id} />
             </MessageProvider>
           );
         })}
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index edea88c4..2415b8f6 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -10,6 +10,7 @@ import MessageDetails from "./MessageDetails";
 import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
 import useHover from "./hooks/useHover";
 import { useMessageContext } from "./contexts/MessageProvider";
+import React from "react";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -76,7 +77,7 @@ const CheckBoxWrapper = styled.div`
   align-self: center;
 `;
 
-function Message() {
+const Message = React.memo(({ data }: MessageProps) => {
   const { _id: id, chatId, isMine } = useMessageContext();
 
   const { lastMessageRef } = useScrollToLastMsg();
@@ -113,6 +114,6 @@ function Message() {
       </StyledMessage>
     </MessageRow>
   );
-}
+});
 
 export default Message;

From e3408042fa52e1f5bfaf492d171782ccafb41f75 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Thu, 12 Dec 2024 09:43:07 +0200
Subject: [PATCH 078/136] :recycle: (messaging): refactoring chatInput (#116)

---
 app/src/features/chats/ChatBox.tsx            |  11 +-
 app/src/features/chats/ChatInput.tsx          | 156 ++++--------------
 app/src/features/chats/ChatInputIcons.tsx     |  61 +++++++
 app/src/features/chats/ReplyWrapper.tsx       |   9 +-
 .../features/chats/audio/RecordingView.tsx    |  18 +-
 .../features/chats/audio/VoiceRecorder.tsx    |  26 ++-
 app/src/features/chats/emojies/Picker.tsx     |  20 +--
 .../features/chats/hooks/useActiveMessage.ts  |  14 ++
 app/src/features/chats/hooks/useChatInput.ts  |  64 +++++++
 .../features/chats/media/FilePreviewItem.tsx  |  20 +--
 .../features/forward/ForwardingInputBar.tsx   |  22 ++-
 .../features/forward/hooks/useShowForward.ts  |  24 +++
 12 files changed, 248 insertions(+), 197 deletions(-)
 create mode 100644 app/src/features/chats/ChatInputIcons.tsx
 create mode 100644 app/src/features/chats/hooks/useActiveMessage.ts
 create mode 100644 app/src/features/chats/hooks/useChatInput.ts
 create mode 100644 app/src/features/forward/hooks/useShowForward.ts

diff --git a/app/src/features/chats/ChatBox.tsx b/app/src/features/chats/ChatBox.tsx
index 23965572..c40c33f1 100644
--- a/app/src/features/chats/ChatBox.tsx
+++ b/app/src/features/chats/ChatBox.tsx
@@ -5,6 +5,9 @@ import Topbar from "@features/chats/Topbar";
 import ChatBody from "./ChatBody";
 
 import { useCloseChat } from "@hooks/useCloseChat";
+import { createContext } from "react";
+import useChatInput from "./hooks/useChatInput";
+import useShowForward from "@features/forward/hooks/useShowForward";
 
 const Container = styled.div`
   display: flex;
@@ -13,14 +16,20 @@ const Container = styled.div`
   height: 100%;
 `;
 
+export const ChatInputContext = createContext<any>(null);
+
 function ChatBox() {
   useCloseChat();
 
+  const chatInputData = useChatInput();
+  const forwardData = useShowForward();
   return (
     <Container>
       <Topbar />
       <ChatBody />
-      <ChatInput />
+      <ChatInputContext.Provider value={{ ...chatInputData, ...forwardData }}>
+        <ChatInput />
+      </ChatInputContext.Provider>
     </Container>
   );
 }
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index a2dcd465..dde00d1f 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -1,25 +1,20 @@
-import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { useDispatch } from "react-redux";
 import styled from "styled-components";
-import { getIcon } from "@data/icons";
-import ExpandingTextArea from "@components/ExpandingTextArea";
-import Icon from "@components/Icon";
 
 import RecordInput from "./SendButton";
 import ForwardingInputBar from "@features/forward/ForwardingInputBar";
 import ScrollableChats from "@features/forward/ScrollableChats";
 import Picker from "./emojies/Picker";
-import { useMessageSender } from "./hooks/useMessageSender";
 import ReplyWrapper from "./ReplyWrapper";
-import { clearActiveMessage } from "@state/messages/activeMessage";
-import MediaUploadComponent from "./media/MediaUploadComponent";
-import FilePreviewItem from "./media/FilePreviewItem";
 import { useAppSelector } from "@hooks/useGlobalState";
-import { setShowCheckBox } from "@state/messages/chats";
 import { getChatByID } from "./utils/helpers";
-import VoiceRecorder, { RecordingStates } from "./audio/VoiceRecorder";
+import VoiceRecorder from "./audio/VoiceRecorder";
 import RecordingView from "./audio/RecordingView";
+import ChatInputIcons from "./ChatInputIcons";
+import FilePreviewItem from "./media/FilePreviewItem";
+import useActiveMessage from "./hooks/useActiveMessage";
+import { useContext } from "react";
+import { ChatInputContext } from "./ChatBox";
 
 const Container = styled.div`
   z-index: 1;
@@ -52,11 +47,6 @@ const InputContainer = styled.div`
 
   height: 100%;
 `;
-const InvisibleButton = styled.button`
-  all: unset;
-  display: inline-block;
-  cursor: pointer;
-`;
 
 const InputWrapper = styled.div`
   display: flex;
@@ -75,76 +65,29 @@ const Input = styled.div`
 `;
 
 function ChatInput() {
-  const activeMessage = useAppSelector((state) => state.activeMessage);
-  const [input, setInput] = useState<string>("");
-  const [file, setFile] = useState<File | null>(null);
-  const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
-  const [isRecording, setIsRecording] = useState<RecordingStates>("idle");
-  const [error, setError] = useState<string>("");
   const { chatId } = useParams<{ chatId: string }>();
 
-  useEffect(() => {
-    if (activeMessage.state === "edit" && activeMessage?.content)
-      setInput(activeMessage?.content);
-  }, [activeMessage]);
-
-  const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
-  const { handleSendMessage } = useMessageSender();
-  const dispatch = useDispatch();
-
-  const toggleShowEmojies = () => {
-    setIsEmojiSelectorOpen((show) => !show);
-  };
-  const sendGIF = (gif: string) => {
-    handleSendMessage("", chatId, gif, "GIF");
-    setIsEmojiSelectorOpen(false);
-  };
-
-  const sendSticker = (sticker: string) => {
-    handleSendMessage("", chatId, sticker, "sticker");
-    setIsEmojiSelectorOpen(false);
-  };
-  const handleSubmit = (e: Event, voiceNoteName = "") => {
-    e.preventDefault();
-    setIsEmojiSelectorOpen(false);
-    if (isRecording !== "idle") return;
-    handleSendMessage(input, chatId, voiceNoteName);
-    dispatch(clearActiveMessage());
-    setInput("");
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e as unknown as Event);
-    }
-  };
+  const {
+    input,
+    setInput,
+    file,
+    isFilePreviewOpen,
+    isRecording,
+    error,
+    setError,
+    isEmojiSelectorOpen,
+    handleSubmit,
+    showForwardUsers,
+    handleClose,
+  } = useContext(ChatInputContext);
 
   const chats = useAppSelector((state) => state.chats.chats);
-
-  const [showForwardUsers, setShowForwardUsers] = useState(false);
-
   const currChat = getChatByID({ chats: chats, chatID: chatId! });
 
   const showCheckBox = currChat?.showCheckBox;
   const isBlocked = currChat?.isBlocked;
 
-  function handleClose() {
-    if (!chatId) {
-      return;
-    }
-
-    setShowForwardUsers(false);
-    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: false }));
-  }
-
-  function handleForward() {
-    setShowForwardUsers(true);
-  }
-  function handleCloseFilePreview() {
-    setFile(null);
-    setIsFilePreviewOpen(false);
-  }
+  const { activeMessage } = useActiveMessage({ setInput });
 
   if (error.length) {
     alert(error);
@@ -154,60 +97,26 @@ function ChatInput() {
   return (
     <>
       {isFilePreviewOpen && file && (
-        <FilePreviewItem
-          file={file}
-          handleCloseFilePreview={handleCloseFilePreview}
-          handleSendMessage={handleSendMessage}
-          setFile={setFile}
-          data-testid="file-preview"
-        />
+        <FilePreviewItem data-testid="file-preview" />
       )}
 
       {isBlocked ? null : (
         <Container data-testid="chat-input-container">
           {!showCheckBox ? (
             <Input data-testid="chat-input">
-              {isEmojiSelectorOpen && (
-                <Picker
-                  setInputText={setInput}
-                  data-testid="emoji-picker"
-                  onSendGIF={sendGIF}
-                  onSendSticker={sendSticker}
-                />
-              )}
+              {isEmojiSelectorOpen && <Picker data-testid="emoji-picker" />}
               <InputContainer>
-                {activeMessage.id && <ReplyWrapper setInput={setInput} />}
+                {activeMessage.id && <ReplyWrapper />}
 
                 <InputWrapper>
                   {isRecording !== "idle" ? (
-                    <RecordingView
-                      setIsRecording={setIsRecording}
-                      isRecording={isRecording}
-                    />
+                    <RecordingView />
                   ) : (
-                    <>
-                      <InvisibleButton
-                        onClick={toggleShowEmojies}
-                        data-testid="emoji-button"
-                      >
-                        <Icon>{getIcon("Emojie")}</Icon>
-                      </InvisibleButton>
-
-                      <ExpandingTextArea
-                        input={input}
-                        setInput={setInput}
-                        onKeyDown={handleKeyDown}
-                      />
-
-                      <MediaUploadComponent
-                        file={file}
-                        setFile={setFile}
-                        setIsFilePreviewOpen={setIsFilePreviewOpen}
-                      />
-                    </>
+                    <ChatInputIcons />
                   )}
                 </InputWrapper>
               </InputContainer>
+
               {input ? (
                 <RecordInput
                   onClick={handleSubmit}
@@ -215,20 +124,11 @@ function ChatInput() {
                   data-testid="send-button"
                 />
               ) : (
-                <VoiceRecorder
-                  isRecording={isRecording}
-                  setIsRecording={setIsRecording}
-                  setError={setError}
-                  handleSendMessage={handleSendMessage}
-                />
+                <VoiceRecorder />
               )}
             </Input>
           ) : (
-            <ForwardingInputBar
-              onClose={handleClose}
-              onForward={handleForward}
-              data-testid="forwarding-input-bar"
-            />
+            <ForwardingInputBar data-testid="forwarding-input-bar" />
           )}
           {showForwardUsers && <ScrollableChats onClose={handleClose} />}
         </Container>
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
new file mode 100644
index 00000000..08de6fbe
--- /dev/null
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -0,0 +1,61 @@
+import ExpandingTextArea from "@components/ExpandingTextArea";
+import { getIcon } from "@data/icons";
+import styled from "styled-components";
+import MediaUploadComponent from "./media/MediaUploadComponent";
+import Icon from "@components/Icon";
+import { useContext } from "react";
+import { ChatInputContext } from "./ChatBox";
+
+const InvisibleButton = styled.button`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
+`;
+
+function ChatInputIcons() {
+  const {
+    setIsEmojiSelectorOpen,
+    handleSubmit,
+    input,
+    setInput,
+    file,
+    setFile,
+    setIsFilePreviewOpen,
+  } = useContext(ChatInputContext);
+
+  const toggleShowEmojies = () => {
+    setIsEmojiSelectorOpen((show: boolean) => !show);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e as unknown as Event);
+    }
+  };
+
+  return (
+    <>
+      <InvisibleButton
+        onClick={() => toggleShowEmojies()}
+        data-testid="emoji-button"
+      >
+        <Icon>{getIcon("Emojie")}</Icon>
+      </InvisibleButton>
+
+      <ExpandingTextArea
+        input={input}
+        setInput={setInput}
+        onKeyDown={handleKeyDown}
+      />
+
+      <MediaUploadComponent
+        file={file}
+        setFile={setFile}
+        setIsFilePreviewOpen={setIsFilePreviewOpen}
+      />
+    </>
+  );
+}
+
+export default ChatInputIcons;
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index f7c7cdbe..618ddb89 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -7,6 +7,8 @@ import { getIcon } from "@data/icons";
 import { clearActiveMessage } from "@state/messages/activeMessage";
 import { useAppSelector } from "@hooks/useGlobalState";
 import MessageBox from "./MessageBox";
+import { useContext } from "react";
+import { ChatInputContext } from "./ChatBox";
 
 const Container = styled.div`
   display: flex;
@@ -21,13 +23,10 @@ const Container = styled.div`
   }
 `;
 
-type Props = {
-  setInput: (state: string) => void;
-};
-
-export default function ReplyWrapper({ setInput }: Props) {
+export default function ReplyWrapper() {
   const dispatch = useDispatch();
 
+  const { setInput } = useContext(ChatInputContext);
   const activeMessage = useAppSelector((state) => state.activeMessage);
 
   function handleHideWrapper() {
diff --git a/app/src/features/chats/audio/RecordingView.tsx b/app/src/features/chats/audio/RecordingView.tsx
index 180f6a2c..4410f32a 100644
--- a/app/src/features/chats/audio/RecordingView.tsx
+++ b/app/src/features/chats/audio/RecordingView.tsx
@@ -1,8 +1,8 @@
 import styled, { keyframes } from "styled-components";
-import { RecordingStates } from "./VoiceRecorder";
-import { Dispatch, SetStateAction } from "react";
+import { useContext } from "react";
 import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
+import { ChatInputContext } from "../ChatBox";
 
 const blinkAnimation = keyframes`
   50% {
@@ -39,18 +39,14 @@ const InvisibleButton = styled.button`
   display: inline-block;
   cursor: pointer;
 `;
-type RecordingViewProps = {
-  isRecording: RecordingStates;
-  setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
-};
-//TODO: add voice note wave form :)
-export default function RecordingView({
-  isRecording,
-  setIsRecording,
-}: RecordingViewProps) {
+
+export default function RecordingView() {
+  const { isRecording, setIsRecording } = useContext(ChatInputContext);
+
   const handleCanelReecord = () => {
     setIsRecording("idle");
   };
+
   return (
     <>
       {isRecording == "recording" && (
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
index dee33863..c4000c75 100644
--- a/app/src/features/chats/audio/VoiceRecorder.tsx
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -1,34 +1,30 @@
 import React, {
   useRef,
-  Dispatch,
-  SetStateAction,
   useEffect,
   useCallback,
+  useContext,
 } from "react";
 import RecordInput from "../SendButton";
 import { useUploadMedia } from "../media/hooks/useUploadMedia";
+import { useMessageSender } from "../hooks/useMessageSender";
+import { ChatInputContext } from "../ChatBox";
 
 export type RecordingStates = "idle" | "recording" | "pause";
 
-type VoiceRecorderProps = {
-  recordingMimeType?: string;
-  isRecording: RecordingStates;
-  setIsRecording: Dispatch<SetStateAction<RecordingStates>>;
-  setError: Dispatch<SetStateAction<string>>;
-  handleSendMessage: (data: string, file: string) => void;
-};
-
-const VoiceRecorder: React.FC<VoiceRecorderProps> = ({
-  handleSendMessage,
+const VoiceRecorder: React.FC = ({
   recordingMimeType = "audio/webm",
-  isRecording,
-  setIsRecording,
-  setError,
+}: {
+  recordingMimeType?: string;
 }) => {
   const mediaRecorder = useRef<MediaRecorder | null>(null);
   const audioChunks = useRef<Blob[]>([]);
   const { data: voiceNoteURL, mutate: uploadVoiceNote } = useUploadMedia();
 
+  const { isRecording, setIsRecording, setError } =
+    useContext(ChatInputContext);
+
+  const { handleSendMessage } = useMessageSender();
+
   useEffect(() => {
     if (isRecording === "recording") {
       navigator.mediaDevices
diff --git a/app/src/features/chats/emojies/Picker.tsx b/app/src/features/chats/emojies/Picker.tsx
index bc7de611..efe78267 100644
--- a/app/src/features/chats/emojies/Picker.tsx
+++ b/app/src/features/chats/emojies/Picker.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useContext, useState } from "react";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { Theme } from "@state/theme/theme";
 import EmojiPicker, {
@@ -11,6 +11,7 @@ import { StickerTap } from "types/messages";
 import GridPicker from "./GridPicker";
 import { useStickers } from "../hooks/useStickers";
 import { useGifs } from "../hooks/useGIFS";
+import { ChatInputContext } from "../ChatBox";
 const Container = styled.div`
   z-index: 4;
   position: absolute;
@@ -71,27 +72,22 @@ const EmojiWrapper = styled.div`
   }
 `;
 
-interface PickerProps {
-  setInputText: React.Dispatch<React.SetStateAction<string>>;
-  onSendGIF: (gifUrl: string) => void;
-  onSendSticker: (stickerUrl: string) => void;
-}
-
-function Picker(props: PickerProps) {
-  const { setInputText, onSendGIF, onSendSticker } = props;
+function Picker() {
   const currentTheme = useAppSelector((state) => state.theme.value);
   const [activeTab, setActiveTab] = useState<StickerTap>(StickerTap.gif);
 
+  const { setInput, sendGIF, sendSticker } = useContext(ChatInputContext);
+
   const handleEmojiClicked = (emojiData: EmojiClickData) => {
-    setInputText((text) => text + emojiData.emoji);
+    setInput((text: string) => text + emojiData.emoji);
   };
 
   const handleGIFSelect = (gifUrl: string) => {
-    onSendGIF(gifUrl);
+    sendGIF(gifUrl);
   };
 
   const handleStickerSelect = (stickerUrl: string) => {
-    onSendSticker(stickerUrl);
+    sendSticker(stickerUrl);
   };
 
   return (
diff --git a/app/src/features/chats/hooks/useActiveMessage.ts b/app/src/features/chats/hooks/useActiveMessage.ts
new file mode 100644
index 00000000..5ce756c5
--- /dev/null
+++ b/app/src/features/chats/hooks/useActiveMessage.ts
@@ -0,0 +1,14 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useEffect } from "react";
+
+function useActiveMessage({ setInput }: { setInput: (value: string) => void }) {
+  const activeMessage = useAppSelector((state) => state.activeMessage);
+  useEffect(() => {
+    if (activeMessage.state === "edit" && activeMessage?.content)
+      setInput(activeMessage?.content);
+  }, [activeMessage]);
+
+  return { activeMessage };
+}
+
+export default useActiveMessage;
diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
new file mode 100644
index 00000000..8189435c
--- /dev/null
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -0,0 +1,64 @@
+import { clearActiveMessage } from "@state/messages/activeMessage";
+import { useState } from "react";
+import { RecordingStates } from "../audio/VoiceRecorder";
+import { useMessageSender } from "./useMessageSender";
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+
+function useChatInput() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const [input, setInput] = useState<string>("");
+  const [file, setFile] = useState<File | null>(null);
+  const [isFilePreviewOpen, setIsFilePreviewOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState<RecordingStates>("idle");
+  const [error, setError] = useState<string>("");
+
+  const [isEmojiSelectorOpen, setIsEmojiSelectorOpen] = useState(false);
+  const { handleSendMessage } = useMessageSender();
+  const dispatch = useAppDispatch();
+
+  const sendGIF = (gif: string) => {
+    handleSendMessage("", chatId, gif, "GIF");
+    setIsEmojiSelectorOpen(false);
+  };
+
+  const sendSticker = (sticker: string) => {
+    handleSendMessage("", chatId, sticker, "sticker");
+    setIsEmojiSelectorOpen(false);
+  };
+  const handleSubmit = (e: Event, voiceNoteName = "") => {
+    e.preventDefault();
+    setIsEmojiSelectorOpen(false);
+    if (isRecording !== "idle") return;
+    handleSendMessage(input, chatId, voiceNoteName);
+    dispatch(clearActiveMessage());
+    setInput("");
+  };
+
+  function handleCloseFilePreview() {
+    setFile(null);
+    setIsFilePreviewOpen(false);
+  }
+
+  return {
+    input,
+    setInput,
+    file,
+    setFile,
+    isFilePreviewOpen,
+    setIsFilePreviewOpen,
+    isRecording,
+    setIsRecording,
+    error,
+    setError,
+    isEmojiSelectorOpen,
+    setIsEmojiSelectorOpen,
+    sendGIF,
+    sendSticker,
+    handleSubmit,
+    handleCloseFilePreview,
+  };
+}
+
+export default useChatInput;
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
index 1c62925e..d9150a36 100644
--- a/app/src/features/chats/media/FilePreviewItem.tsx
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -3,9 +3,11 @@ import FileViewer from "./FileViewer";
 import Modal from "@components/Modal";
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Button from "@components/Button";
-import { Dispatch, SetStateAction, useState } from "react";
+import { useState } from "react";
 import FileDetailsBanner from "./FileDetailsBanner";
 import { useUploadMedia } from "./hooks/useUploadMedia";
+import useChatInput from "../hooks/useChatInput";
+import { useMessageSender } from "../hooks/useMessageSender";
 
 const FileViewerContainer = styled.div`
   z-index: 7;
@@ -43,22 +45,14 @@ const StyledBackground = styled.div`
     width: 100%;
   }
 `;
-interface FileProps {
-  file: File | string;
-  handleCloseFilePreview: () => void;
-  handleSendMessage: (data: string, file: string) => void;
-  setFile: Dispatch<SetStateAction<File | null>>;
-}
 
-function FilePreviewItem({
-  file,
-  handleCloseFilePreview,
-  handleSendMessage,
-  setFile,
-}: FileProps) {
+function FilePreviewItem() {
   const [caption, setCaption] = useState("");
   const { data: uploadedUrl, mutate: uploadFile, isPending } = useUploadMedia();
 
+  const { file, handleCloseFilePreview, setFile } = useChatInput();
+  const { handleSendMessage } = useMessageSender();
+
   const handleSendFile = async () => {
     if (!file) {
       console.error("No file selected to send.");
diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
index 7bab3ad1..45c5a3da 100644
--- a/app/src/features/forward/ForwardingInputBar.tsx
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -4,6 +4,8 @@ import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
+import { useContext } from "react";
+import { ChatInputContext } from "@features/chats/ChatBox";
 
 const Wrapper = styled.div`
   background: var(--color-background);
@@ -31,15 +33,10 @@ const IconButton = styled.div`
   cursor: pointer;
 `;
 
-interface Props {
-  onClose: () => void;
-  onForward: () => void;
-}
-
-function ForwardingInputBar(props: Props) {
+function ForwardingInputBar() {
   const { chatId } = useParams<{ chatId: string }>();
 
-  const { onClose, onForward } = props;
+  const { setShowForwardUsers, handleClose } = useContext(ChatInputContext);
 
   const chats = useAppSelector((state) => state.chats.chats);
   const chat = chatId ? getChatByID({ chatID: chatId, chats }) : undefined;
@@ -48,17 +45,18 @@ function ForwardingInputBar(props: Props) {
 
   return selectedMessages ? (
     <Wrapper>
-      <IconButton onClick={onClose} test-id="close-icon">
+      <IconButton onClick={handleClose} test-id="close-icon">
         <Icon>{getIcon("Close")}</Icon>
       </IconButton>
       <StyledHeader>{selectedMessages.length} messages selected</StyledHeader>
-      <IconButton onClick={onForward} test-id="forward-icon">
+      <IconButton
+        onClick={() => setShowForwardUsers(true)}
+        test-id="forward-icon"
+      >
         <Icon>{getIcon("Forward")}</Icon>
       </IconButton>
     </Wrapper>
-  ) : (
-    <></>
-  );
+  ) : null;
 }
 
 export default ForwardingInputBar;
diff --git a/app/src/features/forward/hooks/useShowForward.ts b/app/src/features/forward/hooks/useShowForward.ts
new file mode 100644
index 00000000..9b2b60a2
--- /dev/null
+++ b/app/src/features/forward/hooks/useShowForward.ts
@@ -0,0 +1,24 @@
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { setShowCheckBox } from "@state/messages/chats";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+
+function useShowForward() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const dispatch = useAppDispatch();
+  const [showForwardUsers, setShowForwardUsers] = useState(false);
+
+  function handleClose() {
+    if (!chatId) {
+      return;
+    }
+
+    setShowForwardUsers(false);
+    dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: false }));
+  }
+
+  return { showForwardUsers, setShowForwardUsers, handleClose };
+}
+
+export default useShowForward;

From ee4d8df2e90f4c00a034ff72728b3f239eef15a9 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:03:51 +0200
Subject: [PATCH 079/136] :bug: : (hot fix): fixing chat sudden close + fixing
 UI bugs in chat (#117)

* :recycle: (messaging): refactoring chatInput

* :bug: (chatInput): centering elements

* :bug: (hotfix): fixing sudden close of chat

* :lipstick: (chatBody): fixing z-layers bug
---
 app/src/features/chats/ChatBody.tsx              | 2 +-
 app/src/features/chats/ChatInput.tsx             | 2 +-
 app/src/features/chats/Message.tsx               | 3 +--
 app/src/features/chats/MessageOptionList.tsx     | 2 +-
 app/src/features/chats/media/FilePreviewItem.tsx | 9 +++++----
 app/src/state/messages/chats.ts                  | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 9b9c483f..086c38ab 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -11,7 +11,7 @@ import MessageProvider from "./contexts/MessageProvider";
 
 const ScrollContainer = styled.div`
   width: 100%;
-  height: 87dvh;
+  height: 90dvh;
   overflow-y: auto;
   position: relative;
 
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index dde00d1f..15f6fd7d 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -50,7 +50,7 @@ const InputContainer = styled.div`
 
 const InputWrapper = styled.div`
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: 1rem;
   position: relative;
   flex: 1;
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 2415b8f6..f4e1cd3e 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -48,7 +48,6 @@ const Bubble = styled.div<{ $isMine: boolean }>`
 
   color: ${({ $isMine }) => ($isMine ? "#fff" : "var(--color-text)")};
   margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
-  z-index: 1;
 
   -webkit-user-select: text;
   -moz-user-select: text;
@@ -77,7 +76,7 @@ const CheckBoxWrapper = styled.div`
   align-self: center;
 `;
 
-const Message = React.memo(({ data }: MessageProps) => {
+const Message = React.memo(() => {
   const { _id: id, chatId, isMine } = useMessageContext();
 
   const { lastMessageRef } = useScrollToLastMsg();
diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index 0f9169aa..c5e63af8 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -18,7 +18,7 @@ const StyledList = styled.ul<{ $isMine: boolean }>`
   right: ${(props) => !props.$isMine && -6.5}rem;
   left: ${(props) => props.$isMine && -6.5}rem;
 
-  z-index: 20 !important;
+  z-index: 10;
   overflow: auto;
 
   display: flex;
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
index d9150a36..7e7e1595 100644
--- a/app/src/features/chats/media/FilePreviewItem.tsx
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -3,11 +3,11 @@ import FileViewer from "./FileViewer";
 import Modal from "@components/Modal";
 import ExpandingTextArea from "@components/ExpandingTextArea";
 import Button from "@components/Button";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import FileDetailsBanner from "./FileDetailsBanner";
 import { useUploadMedia } from "./hooks/useUploadMedia";
-import useChatInput from "../hooks/useChatInput";
 import { useMessageSender } from "../hooks/useMessageSender";
+import { ChatInputContext } from "../ChatBox";
 
 const FileViewerContainer = styled.div`
   z-index: 7;
@@ -48,9 +48,10 @@ const StyledBackground = styled.div`
 
 function FilePreviewItem() {
   const [caption, setCaption] = useState("");
-  const { data: uploadedUrl, mutate: uploadFile, isPending } = useUploadMedia();
+  const { mutate: uploadFile, isPending } = useUploadMedia();
 
-  const { file, handleCloseFilePreview, setFile } = useChatInput();
+  const { file, handleCloseFilePreview, setFile } =
+    useContext(ChatInputContext);
   const { handleSendMessage } = useMessageSender();
 
   const handleSendFile = async () => {
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index d70ea292..3b0effe7 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -52,7 +52,7 @@ const chatsSlice = createSlice({
               (member) => member._id !== userId
             )[0];
 
-            if (blockList.find((user: any) => user.id === otherUser._id)) {
+            if (blockList?.find((user: any) => user.id === otherUser._id)) {
               chat.isBlocked = true;
             }
           }

From 0d69370b60767575120a17ef9f34bf59ef454d66 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:14:33 +0200
Subject: [PATCH 080/136] Calls prototype (#118)

* setup: calls-infrastructure

* call apperance

* merge modifications

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/components/Avatar.tsx           |   1 +
 app/src/components/Main.tsx             |   2 +-
 app/src/components/side-bar/SideBar.tsx |   2 +-
 app/src/data/icons.tsx                  |  10 +
 app/src/features/calls/CallLayout.tsx   | 254 ++++++++++++++++++++++++
 app/src/features/calls/call.ts          |  62 ++++++
 app/src/features/chats/Topbar.tsx       | 156 +++++++--------
 app/src/mocks/data/chats.ts             | 130 ++++++------
 app/src/sockets/SocketProvider.tsx      | 175 ++++++++++++++--
 app/src/types/socket.ts                 |   1 +
 10 files changed, 626 insertions(+), 167 deletions(-)
 create mode 100644 app/src/features/calls/CallLayout.tsx
 create mode 100644 app/src/features/calls/call.ts

diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
index 96e167ea..06c22e47 100644
--- a/app/src/components/Avatar.tsx
+++ b/app/src/components/Avatar.tsx
@@ -23,6 +23,7 @@ const StyledAvatar = styled.div<{ $image?: string; $size?: string }>`
   font-weight: bold;
   font-size: 1rem;
   text-transform: uppercase;
+  z-index: 1;
 `;
 
 type PropsType = {
diff --git a/app/src/components/Main.tsx b/app/src/components/Main.tsx
index eef739de..b03092e7 100644
--- a/app/src/components/Main.tsx
+++ b/app/src/components/Main.tsx
@@ -10,7 +10,7 @@ const StyledMain = styled.main`
   position: relative;
   overflow: hidden;
   background: var(--color-chat-wallpaper-1);
-
+  padding-top: 1rem;
   &::before {
     content: "";
     position: absolute;
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index c605fa35..7f4fcedc 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -40,7 +40,7 @@ const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   background-color: var(--color-background);
   overflow: hidden;
   position: relative;
-
+  padding-top: 1rem;
   display: flex;
   flex-direction: column;
 
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 94062158..82bb96b4 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -57,6 +57,8 @@ enum icons {
   Info,
   Phone,
   ArrowForward,
+  Mute,
+  EndCall,
 }
 
 type iconStrings = keyof typeof icons;
@@ -390,6 +392,14 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/ArrowForward"),
     defaultProps: { fontSize: "large" },
   },
+  Mute: {
+    importFn: () => import("@mui/icons-material/Mic"),
+    defaultProps: { fontSize: "large" },
+  },
+  EndCall: {
+    importFn: () => import("@mui/icons-material/CallEnd"),
+    defaultProps: { fontSize: "large" },
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
new file mode 100644
index 00000000..abf2a47c
--- /dev/null
+++ b/app/src/features/calls/CallLayout.tsx
@@ -0,0 +1,254 @@
+import styled from "styled-components";
+import { peerConnection } from "./call";
+import { STATIC_MEDIA_URL } from "@constants";
+
+import { getAvatarName } from "utils/helpers";
+import { createPortal } from "react-dom";
+import Icon from "@components/Icon";
+import { getIcon } from "@data/icons";
+import { useState } from "react";
+
+const ModalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.15s ease;
+  z-index: 6;
+`;
+
+const ModalBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background-color: rgba(0, 0, 0, 0.25);
+`;
+
+const ModalDialog = styled.div`
+  border-radius: 5px;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 35rem;
+  min-width: 17.5rem;
+  margin: 2rem auto;
+  background-color: var(--color-background);
+  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
+  transform: translate3d(0, -1rem, 0);
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
+`;
+const ButtonsContainer = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: 1rem;
+  -webkit-user-select: none;
+  user-select: none;
+`;
+const AvatarContainer = styled.div`
+  border-radius: inherit;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: linear-gradient(
+    var(--color-white) -125%,
+    var(--color-user)
+  );
+`;
+const ModalContent = styled.div`
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 80vh;
+  padding: 0;
+`;
+const StyledAvatar = styled.div<{ $image?: string }>`
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+
+  background: ${({ $image }) =>
+    $image
+      ? `url(${STATIC_MEDIA_URL + $image}) center/cover no-repeat`
+      : "var(--color-avatar)"};
+
+  color: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 5rem;
+  text-transform: uppercase;
+`;
+const RoundButton = styled.button<{
+  $bgColor?: string;
+  $bgColorHover?: string;
+}>`
+  outline: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3.5rem;
+  border-radius: 50%;
+  border: 0;
+  background-color: ${({ $bgColor }) => $bgColor || "rgba(0, 0, 0, 0)"};
+  background-size: cover;
+  padding: 0.625rem;
+  color: #fff;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+  text-decoration: none !important;
+  text-transform: uppercase;
+  text-align: right;
+  font-size: 3.5rem;
+  font-weight: 200;
+  &:hover {
+    background-color: ${({ $bgColorHover }) =>
+      $bgColorHover || "rgba(0, 0, 0, 0.1)"};
+  }
+`;
+
+const ButtonContainer = styled.div`
+  width: 5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const ButtonText = styled.div`
+  color: #fff;
+  font-size: 0.75rem;
+  text-transform: lowercase;
+  margin-top: 0.25rem;
+  white-space: nowrap;
+`;
+const NameContainer = styled.div`
+  position: absolute;
+  top: 1rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0;
+  padding-top: 4rem;
+  padding-bottom: 2rem;
+  margin-bottom: auto;
+  color: #fff;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+`;
+const TopBar = styled.div`
+  top: 0.5rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: #fff;
+  position: absolute;
+  padding: 0.5rem;
+  text-align: right;
+`;
+const ActiveHeaderOpen = styled.div`
+  position: fixed;
+  margin-bottom: 0.5rem;
+  top: 0;
+  left: 0;
+  height: 1rem;
+  width: 100%;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #fff;
+  align-items: center;
+  padding: 0 1rem;
+  background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172));
+  transform: translateY(0);
+`;
+type PropsType = {
+  image?: string | undefined;
+  name: string | undefined;
+  isCollapsed: boolean;
+  setIsCollapsed: (arg0: boolean) => void;
+};
+
+export default function CallLayout({
+  name,
+  image,
+  isCollapsed,
+  setIsCollapsed,
+}: PropsType) {
+  return (
+    <>
+      {!isCollapsed
+        ? createPortal(
+            <ModalContainer>
+              <ModalBackdrop> </ModalBackdrop>
+              <ModalDialog>
+                <ModalContent>
+                  <AvatarContainer>
+                    <StyledAvatar $image={image}>
+                      {!image && getAvatarName(name)}
+                    </StyledAvatar>
+                    <TopBar>
+                      <RoundButton onClick={() => setIsCollapsed(true)}>
+                        &times;
+                      </RoundButton>
+                    </TopBar>
+                    <NameContainer>
+                      <h1>{name}</h1>
+                      <span>state</span>
+                    </NameContainer>
+                    <ButtonsContainer>
+                      <ButtonContainer>
+                        <RoundButton>{getIcon("Mute")}</RoundButton>
+                        <ButtonText>unmute</ButtonText>
+                      </ButtonContainer>
+                      <ButtonContainer>
+                        <RoundButton
+                          $bgColor="var(--color-error)"
+                          $bgColorHover="var(--color-error-shade)"
+                        >
+                          {getIcon("EndCall")}
+                        </RoundButton>
+                        <ButtonText>end call</ButtonText>
+                      </ButtonContainer>
+                    </ButtonsContainer>
+                  </AvatarContainer>
+                </ModalContent>
+              </ModalDialog>
+            </ModalContainer>,
+            document.body,
+          )
+        : createPortal(
+            <ActiveHeaderOpen onClick={() => setIsCollapsed(false)}>
+              <span>{name}</span>
+            </ActiveHeaderOpen>,
+            document.body,
+          )}
+    </>
+  );
+}
diff --git a/app/src/features/calls/call.ts b/app/src/features/calls/call.ts
new file mode 100644
index 00000000..bc5ba96e
--- /dev/null
+++ b/app/src/features/calls/call.ts
@@ -0,0 +1,62 @@
+export let callState = "idle";
+const stunServers = {
+  iceServers: [
+    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] },
+  ],
+};
+async function getVoiceInput(): Promise<MediaStream | null> {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    return stream;
+  } catch (error) {
+    console.error("Error accessing microphone:", error);
+    return null;
+  }
+}
+export let peerConnection: RTCPeerConnection;
+let localStream: MediaStream | null;
+let RemoteStream: MediaStream;
+export const connectToPeer = async () => {
+  callState = "connecting";
+  peerConnection = new RTCPeerConnection(stunServers);
+  if (!localStream) localStream = await getVoiceInput();
+  console.log(localStream);
+  localStream?.getTracks().forEach((t) => {
+    peerConnection.addTrack(t, localStream);
+  });
+
+  peerConnection.ontrack = (e) => {
+    e.streams[0]?.getTracks().forEach((track) => RemoteStream.addTrack(track));
+  };
+
+  await new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      resolve(null);
+    }, 10000);
+
+    peerConnection.onicecandidate = (event) => {
+      if (!event.candidate) {
+        clearTimeout(timeout);
+        resolve(null);
+      }
+    };
+  });
+  const offer = await peerConnection.createOffer();
+  await peerConnection.setLocalDescription(offer);
+  return JSON.stringify(offer);
+};
+
+export const createAnswer = async (offer: string) => {
+  await connectToPeer();
+  const offer_parsed = JSON.parse(offer);
+  await peerConnection.setRemoteDescription(offer_parsed);
+  const answer = await peerConnection.createAnswer();
+  await peerConnection.setLocalDescription(answer);
+  return JSON.stringify(answer);
+};
+export const startCall = async (answer: string) => {
+  callState = "ongoing";
+  const offer_parsed = JSON.parse(answer);
+  await peerConnection.setRemoteDescription(offer_parsed);
+  //start call
+};
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 9f95d0f4..4a4e17b7 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,28 +1,24 @@
 import { useState } from "react";
 import styled from "styled-components";
-
 import Avatar from "@components/Avatar";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
-import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { getChatByID } from "./utils/helpers";
 import { useChatMembers } from "./hooks/useChatMember";
 import { getElapsedTime } from "@utils/helpers";
-import { useBlock } from "@features/privacy-settings/hooks/useBlock";
-import { setChatIsBlocked } from "@state/messages/chats";
-
-const Container = styled.div`
+import { useSocket } from "@hooks/useSocket";
+import CallLayout from "@features/calls/CallLayout";
+const Container = styled.div<{ hasMargin?: boolean }>`
   position: absolute;
   top: 0;
-
   z-index: 2;
 
   height: 3.5rem;
   width: 100%;
-
   background-color: var(--color-background);
 
   display: flex;
@@ -30,6 +26,8 @@ const Container = styled.div`
   align-items: center;
 
   padding-inline: 1rem;
+
+  margin: ${({ hasMargin }) => (hasMargin ? "1rem 0" : "0")};
 `;
 
 const Info = styled.div`
@@ -78,42 +76,40 @@ const IconButton = styled.button`
   justify-content: center;
 `;
 
-const StyledButton = styled.button`
-  background: linear-gradient(
-    to left,
-    var(--color-background-own-3),
-    var(--color-background-own-4)
-  );
-
-  border: none;
-  width: 7rem;
-  height: 2rem;
-  border-radius: 0.5rem;
-  color: var(--color-text);
-  margin-right: 1rem;
-
-  color: var(--color-background);
+const InvisibleButton = styled.button`
+  all: unset;
+  display: inline-block;
+  cursor: pointer;
 `;
-
 //TODO: refactor
 function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
   const chats = useAppSelector((state) => state.chats.chats);
-  const { removeFromBlockList } = useBlock();
-  const dispatch = useAppDispatch();
   const [isSearching, setIsSearching] = useState(false);
-  const userId = useAppSelector((state) => state.user.userInfo.id);
-  const chat = getChatByID({
-    chatID: chatId!,
-    chats: chats,
-  });
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const { startConnection } = useSocket();
+  const chat = chatId
+    ? getChatByID({
+        chatID: chatId,
+        chats: chats,
+      })
+    : undefined;
 
   const membersData = useChatMembers(chat?.members);
 
+  let name;
+  let image;
   let lastSeen;
 
   if (chat) {
-    lastSeen = chat?.lastMessage?.timestamp;
+    if (chat?.type === "group" || chat?.type === "channel") {
+      name = chat?.name;
+    } else {
+      name = membersData[0]?.screenFirstName || membersData[0]?.username;
+
+      lastSeen = chat?.lastMessage?.timestamp;
+      image = membersData[0]?.photo;
+    }
   }
 
   if (!chat) return null;
@@ -121,59 +117,53 @@ function Topbar() {
   const toggleSearch = () => {
     setIsSearching(!isSearching);
   };
-
-  async function handleRemoveFromBlock() {
-    await removeFromBlockList({ id: membersData[0]._id });
-    dispatch(
-      setChatIsBlocked({
-        chatId: chatId!,
-        isBlocked: false,
-        userId: userId,
-      })
-    );
-  }
-
+  const isCall = true;
   return (
-    <Container>
-      <Avatar
-        data-testid="chat-avatar"
-        image={chat.photo}
-        name={chat.name?.charAt(0)}
-      />
-      {isSearching ? (
-        <SearchBar onClose={toggleSearch} />
-      ) : (
-        <>
-          <Info data-testid="chat-info">
-            <Content>
-              <Name data-testid="chat-name">{chat.name}</Name>
-              {lastSeen && (
-                <LastSeen data-testid="chat-last-seen">
-                  last seen {getElapsedTime(lastSeen)}
-                </LastSeen>
-              )}
-            </Content>
-          </Info>
-          <PinnedMessages />
-          {chat.isBlocked && (
-            <StyledButton
-              onClick={handleRemoveFromBlock}
-              data-testid="unblock-button"
-            >
-              Unblock
-            </StyledButton>
-          )}
-          <Icons>
-            <Icon>{getIcon("Call")}</Icon>
-            <IconButton onClick={toggleSearch} data-testid="search-button">
-              {getIcon("Search")}
-            </IconButton>
-            <Icon>{getIcon("More")}</Icon>
-          </Icons>
-        </>
+    <>
+      {isCall && (
+        <CallLayout
+          isCollapsed={isCollapsed}
+          setIsCollapsed={setIsCollapsed}
+          name={name}
+          image={image}
+        />
       )}
-      {isSearching && <IconButton>{getIcon("CalendarToday")}</IconButton>}
-    </Container>
+      <Container hasMargin={isCollapsed}>
+        <Avatar
+          data-testid="chat-avatar"
+          image={image}
+          name={name?.charAt(0)}
+        />
+        {isSearching ? (
+          <SearchBar onClose={toggleSearch} />
+        ) : (
+          <>
+            <Info data-testid="chat-info">
+              <Content>
+                <Name data-testid="chat-name">{name}</Name>
+                {lastSeen && (
+                  <LastSeen data-testid="chat-last-seen">
+                    last seen {getElapsedTime(lastSeen)}
+                  </LastSeen>
+                )}
+              </Content>
+            </Info>
+            <PinnedMessages />
+            <Icons>
+              <InvisibleButton onClick={startConnection}>
+                <Icon>{getIcon("Call")}</Icon>
+              </InvisibleButton>
+
+              <IconButton onClick={toggleSearch} data-testid="search-button">
+                {getIcon("Search")}
+              </IconButton>
+              <Icon>{getIcon("More")}</Icon>
+            </Icons>
+          </>
+        )}
+        {isSearching && <IconButton>{getIcon("CalendarToday")}</IconButton>}
+      </Container>
+    </>
   );
 }
 
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 7f9954b8..73a4e4ff 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,71 +41,71 @@ export type ChatDataType = {
   }[];
 };
 
-// export const allChats: Chat[] = [
-//   {
-//     _id: "1",
-//     isSeen: false,
-//     members: ["1", "2"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "2",
-//     isSeen: false,
-//     members: ["2", "1"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "3",
-//     isSeen: false,
-//     members: ["3"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "4",
-//     isSeen: false,
-//     members: ["4"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "5",
-//     isSeen: false,
-//     members: ["5"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "6",
-//     isSeen: false,
-//     members: ["6"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "7",
-//     isSeen: false,
-//     members: ["7"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "8",
-//     isSeen: false,
-//     members: ["8"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "9",
-//     isSeen: false,
-//     members: ["9"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-// ];
+export const allChats: Chat[] = [
+  {
+    _id: "1",
+    isSeen: false,
+    members: ["1", "2"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "2",
+    isSeen: false,
+    members: ["2", "1"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "3",
+    isSeen: false,
+    members: ["3"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "4",
+    isSeen: false,
+    members: ["4"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "5",
+    isSeen: false,
+    members: ["5"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "6",
+    isSeen: false,
+    members: ["6"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "7",
+    isSeen: false,
+    members: ["7"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "8",
+    isSeen: false,
+    members: ["8"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "9",
+    isSeen: false,
+    members: ["9"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+];
 
 export const members: Member[] = [
   {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 7b26d05d..bbb69158 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect, ReactNode, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
@@ -15,11 +15,12 @@ import {
   unpinMessage,
   editMessage,
 } from "@state/messages/chats";
+import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
   message: MessageInterface,
-  chatId: string
+  chatId: string,
 ) => {
   dispatch(addMessage({ chatId, message }));
 };
@@ -27,7 +28,7 @@ const handleIncomingMessage = (
 const handleIsTyping = (
   dispatch: Dispatch,
   isTyping: boolean,
-  chatId: string
+  chatId: string,
 ) => {
   dispatch(setIsTyping({ chatId, isTyping }));
 };
@@ -92,7 +93,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(pinMessage({ messageId, chatId }));
-        }
+        },
       );
 
       socket.on(
@@ -108,7 +109,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(unpinMessage({ messageId, chatId }));
-        }
+        },
       );
 
       socket.on(
@@ -124,7 +125,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
           dispatch(editMessage({ chatId, messageId: id, content }));
-        }
+        },
       );
 
       socket.on("JOIN_GROUP_CHANNEL", () => {
@@ -132,7 +133,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
 
       socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId)
+        handleIsTyping(dispatch, isTyping, message.chatId),
       );
 
       socket.emit("typing");
@@ -145,7 +146,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         socket.off("typing");
       };
     }
-  }, [dispatch, socket]);
+  }, [dispatch, queryClient, socket]);
 
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
@@ -172,10 +173,10 @@ function SocketProvider({ children }: SocketProviderProps) {
                 ...sentMessage,
                 _id,
               },
-              sentMessage.chatId
+              sentMessage.chatId,
             );
           }
-        }
+        },
       );
     } else {
       console.warn("Cannot send message: not connected to socket server");
@@ -185,7 +186,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const editMessageSocket = (
     messageId: string,
     content: string,
-    chatId: string
+    chatId: string,
   ) => {
     if (isConnected && socket) {
       socket.emit(
@@ -203,12 +204,12 @@ function SocketProvider({ children }: SocketProviderProps) {
                 chatId: response.res.message.chatId,
                 messageId: response.res.message._id,
                 content: response.res.message.content,
-              })
+              }),
             );
           } else {
             console.error("Failed to edit message:", response.error);
           }
-        }
+        },
       );
     }
   };
@@ -216,7 +217,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string
+    userId: string,
   ) => {
     if (isConnected && socket) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -228,7 +229,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string
+    userId: string,
   ) => {
     if (isConnected && socket) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -236,6 +237,145 @@ function SocketProvider({ children }: SocketProviderProps) {
       console.warn("Cannot unpin message: not connected to socket server");
     }
   };
+  const startConnection = async () => {
+    console.log("kkk");
+    const offer = await connectToPeer();
+    if (isConnected && socket) {
+      console.log(offer);
+      socket.emit("SEND_OFFER", { offer });
+    } else {
+      console.warn("Cannot unpin message: not connected to socket server");
+    }
+  };
+  const sendAnswer = useCallback(
+    (
+      answer: string,
+      callback?: (response: { success: boolean; error?: string }) => void,
+    ) => {
+      if (isConnected && socket) {
+        socket.emit(
+          "SEND_ANSWER",
+          { answer },
+          (response: { success: boolean; error?: string }) => {
+            if (callback) {
+              callback(response);
+            } else if (!response.success) {
+              console.error("Failed to send answer:", response.error);
+            } else {
+              console.log("Answer sent successfully");
+            }
+          },
+        );
+      } else {
+        console.warn("Cannot send answer: not connected to socket server");
+      }
+    },
+    [isConnected, socket],
+  );
+  useEffect(() => {
+    if (socket) {
+      socket.connect();
+
+      //TODO: remove and make sure it still works
+      socket.on("connect", () => {
+        const engine = socket.io.engine;
+        setIsConnected(true);
+        console.log("connected");
+
+        engine.on("close", (reason) => {
+          console.log(reason);
+        });
+      });
+
+      socket.on("RECEIVE_MESSAGE", (message) => {
+        console.log("inside recieve");
+        console.log(message);
+        handleIncomingMessage(dispatch, message, message.chatId);
+      });
+      socket.on("RECIEVE_OFFER", async (offer) => {
+        console.log(offer);
+        const answer = await createAnswer(offer);
+        sendAnswer(answer);
+      });
+      socket.on("RECEIVE_ANSWER", async (answer: string) => {
+        console.log(answer);
+        await startCall(answer);
+      });
+      socket.on(
+        "PIN_MESSAGE_SERVER",
+        ({
+          chatId,
+          messageId,
+          userId,
+        }: {
+          chatId: string;
+          messageId: string;
+          userId: string;
+        }) => {
+          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+          dispatch(pinMessage({ messageId, chatId }));
+        },
+      );
+
+      socket.on(
+        "UNPIN_MESSAGE_SERVER",
+        ({
+          chatId,
+          messageId,
+          userId,
+        }: {
+          chatId: string;
+          messageId: string;
+          userId: string;
+        }) => {
+          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+          dispatch(unpinMessage({ messageId, chatId }));
+        },
+      );
+
+      socket.on(
+        "EDIT_MESSAGE_SERVER",
+        ({
+          chatId,
+          content,
+          id,
+        }: {
+          chatId: string;
+          content: string;
+          id: string;
+        }) => {
+          console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
+          dispatch(editMessage({ chatId, messageId: id, content }));
+        },
+      );
+
+      socket.on("typing", (isTyping, message) =>
+        handleIsTyping(dispatch, isTyping, message.chatId),
+      );
+      socket.emit("typing");
+      return () => {
+        socket.disconnect();
+
+        socket.off("connect");
+        socket.off("disconnect");
+        socket.off("receive_message");
+        socket.off("typing");
+        socket.off("RECIEVE_OFFER");
+      };
+    }
+  }, [dispatch, sendAnswer, socket]);
+
+  // useEffect(() => {
+  //   if (!isPending && chats?.length) {
+  //     chats.forEach((chat) => {
+  //       socket.emit("join", { chatId: chat._id });
+  //     });
+  //     console.log(
+  //       "Joined all chats:",
+  //       chats.map((chat) => chat._id)
+  //     );
+  //   }
+  // }, [isConnected, isPending, chats, socket]);
 
   function createGroupOrChannel({
     type,
@@ -260,11 +400,11 @@ function SocketProvider({ children }: SocketProviderProps) {
           if (!success) {
             console.log("failed creating group");
           }
-        }
+        },
       );
     } else {
       console.warn(
-        "Cannot create group or channel: not connected to socket server"
+        "Cannot create group or channel: not connected to socket server",
       );
     }
   }
@@ -277,6 +417,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         pinMessage: pinMessageSocket,
         unpinMessage: unpinMessageSocket,
         editMessage: editMessageSocket,
+        startConnection,
         createGroupOrChannel,
       }}
     >
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 59029ad4..4ebb96ef 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -16,6 +16,7 @@ export interface SocketContextType {
     name: string;
     members: string[];
   }) => void;
+  startConnection: (offer: RTCSessionDescription) => void;
 }
 
 export interface SocketProviderProps {

From 105d199a777467a7ae4933a43821c3c178126c6c Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Thu, 12 Dec 2024 22:08:28 +0200
Subject: [PATCH 081/136] =?UTF-8?q?=E2=9C=A8=20(channels):=20Create=20new?=
 =?UTF-8?q?=20channel=20(#119)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (messaging): Display message timestamp

* 🚧 (channels): Create channel

* ✨ (channels): Create new channel

* 🐛 (hotfix): Fix current user can add himself to group
---
 app/src/components/UsersList.tsx              | 28 +++++++++------
 .../inputs/radio-input/RadioInput.tsx         |  1 +
 app/src/components/side-bar/SideBar.tsx       | 14 ++++++--
 .../side-bar/chats/SideBarMenuItem.tsx        |  3 --
 .../side-bar/groups/AddGroupMembers.tsx       |  9 +++--
 app/src/data/sideBar.ts                       | 10 +++++-
 app/src/features/chats/Comments.tsx           | 36 +++++++++++++++++++
 app/src/features/chats/Message.tsx            |  6 ----
 app/src/features/chats/MessageDetails.tsx     |  9 +++--
 app/src/features/chats/StartNewChat.tsx       | 29 ++++++++++-----
 app/src/features/groups/CreateGroupForm.tsx   |  8 ++---
 app/src/features/groups/NewGroup.tsx          |  6 ++--
 app/src/state/side-bar/sideBar.ts             |  9 ++++-
 app/src/types/sideBar.ts                      |  1 +
 14 files changed, 126 insertions(+), 43 deletions(-)
 create mode 100644 app/src/features/chats/Comments.tsx

diff --git a/app/src/components/UsersList.tsx b/app/src/components/UsersList.tsx
index 43141e5d..e298b124 100644
--- a/app/src/components/UsersList.tsx
+++ b/app/src/components/UsersList.tsx
@@ -9,6 +9,7 @@ import { sideBarPages } from "types/sideBar";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 
 import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+import { useUser } from "@features/authentication/login/hooks/useUser";
 
 const Container = styled.div`
   width: 100%;
@@ -33,17 +34,26 @@ const SearchInput = styled.input`
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
 `;
 
-function UsersList() {
-  const { users, isPending } = useAllUsers();
+function UsersList({ type }: { type: "channel" | "group" }) {
+  const { users, isPending: isPendenigAllUsers } = useAllUsers();
+  const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
   const [searchQuery, setSearchQuery] = useState<string>("");
   const dispatch = useAppDispatch();
 
-  if (isPending) return null;
+  if (isPendenigAllUsers || isPendingCurrentUser) return null;
 
-  const filteredUsers = users?.filter((user) =>
-    `${user.screenFirstName} ${user.screenLastName}`
-      .toLowerCase()
-      .includes(searchQuery.toLowerCase())
+  function handleClick() {
+    const redirect =
+      type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
+    dispatch(updateSideBarView({ redirect }));
+  }
+
+  const filteredUsers = users?.filter(
+    (user) =>
+      user._id !== currentUser._id &&
+      `${user.screenFirstName} ${user.screenLastName}`
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
   );
 
   return (
@@ -70,9 +80,7 @@ function UsersList() {
         $color="white"
         $bgColor="var(--accent-color)"
         $opacity={0.95}
-        onClick={() =>
-          dispatch(updateSideBarView({ redirect: sideBarPages.NEW_GROUP }))
-        }
+        onClick={handleClick}
       />
     </Container>
   );
diff --git a/app/src/components/inputs/radio-input/RadioInput.tsx b/app/src/components/inputs/radio-input/RadioInput.tsx
index a897a9ce..c28c8a01 100644
--- a/app/src/components/inputs/radio-input/RadioInput.tsx
+++ b/app/src/components/inputs/radio-input/RadioInput.tsx
@@ -37,6 +37,7 @@ interface RadioInputProps {
   state?: string;
   data: RadioInputInterface;
   updateFnType: StatusType;
+  type?: 'channel' | 'group';
 }
 
 const StyledForm = styled.div`
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 7f4fcedc..86968975 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -23,6 +23,7 @@ import NewGroup from "@features/groups/NewGroup.js";
 interface SideBarProps {
   rows?: SideBarRowProps[];
   data?: RadioInputProps;
+  type?: "channel" | "group";
 }
 
 const fadeIn = keyframes`
@@ -91,14 +92,19 @@ const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
       </SettingsSideBar>
     ),
     Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
-    AddMembers: () => (
+    AddMembers: (props) => (
       <SettingsSideBar rows={[]}>
-        <AddGroupMembers />
+        <AddGroupMembers type={props.data?.type!} />
       </SettingsSideBar>
     ),
     NewGroup: () => (
       <SettingsSideBar rows={[]}>
-        <NewGroup />
+        <NewGroup type="group" />
+      </SettingsSideBar>
+    ),
+    NewChannel: () => (
+      <SettingsSideBar rows={[]}>
+        <NewGroup type="channel" />
       </SettingsSideBar>
     ),
   };
@@ -108,6 +114,8 @@ function Sidebar() {
   const [currentPage, setCurrentPage] = useState(page);
   const [isExiting, setIsExiting] = useState(false);
 
+  console.log(currentPage);
+
   useEffect(() => {
     if (currentPage !== page) {
       setIsExiting(true);
diff --git a/app/src/components/side-bar/chats/SideBarMenuItem.tsx b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
index 4e68a0da..2b438f21 100644
--- a/app/src/components/side-bar/chats/SideBarMenuItem.tsx
+++ b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
@@ -1,8 +1,5 @@
 import styled from "styled-components";
 import { getIcon, iconStrings } from "../../../data/icons";
-import { useDispatch } from "react-redux";
-import { updateSideBarView } from "@state/side-bar/sideBar";
-import { sideBarPages } from "types/sideBar";
 
 interface SideBarMenuItemProps {
   title: string;
diff --git a/app/src/components/side-bar/groups/AddGroupMembers.tsx b/app/src/components/side-bar/groups/AddGroupMembers.tsx
index ce7530cb..9ba0600e 100644
--- a/app/src/components/side-bar/groups/AddGroupMembers.tsx
+++ b/app/src/components/side-bar/groups/AddGroupMembers.tsx
@@ -1,5 +1,10 @@
 import UsersList from "@components/UsersList";
 
-export default function AddGroupMembers() {
-  return <UsersList />;
+export default function AddGroupMembers({
+  type,
+}: {
+  type: "group" | "channel";
+}) {
+  console.log(type);
+  return <UsersList type={type} />;
 }
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 1fe18d1b..13ad4232 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -83,7 +83,8 @@ const pagesMap: { [K in pagesStrings]: string } = {
   BLOCKED_USERS: "blockList",
   DEVICES: "Devices",
   ADD_MEMBERS: "AddMembers",
-  NEW_GROUP: "NewGroup"
+  NEW_GROUP: "NewGroup",
+  NEW_CHANNEL: "NewChannel",
 };
 
 const settingsRows = [
@@ -214,6 +215,12 @@ const newGroup: SideBarView = {
   page: "NEW_GROUP",
 };
 
+const newChannel: SideBarView = {
+  title: "New Channel",
+  backView: sideBarPages.ADD_MEMBERS,
+  page: "NEW_CHANNEL",
+};
+
 export {
   chats,
   contacts,
@@ -233,4 +240,5 @@ export {
   blockList,
   addMembers,
   newGroup,
+  newChannel,
 };
diff --git a/app/src/features/chats/Comments.tsx b/app/src/features/chats/Comments.tsx
new file mode 100644
index 00000000..057b74d9
--- /dev/null
+++ b/app/src/features/chats/Comments.tsx
@@ -0,0 +1,36 @@
+import { getIcon } from "@data/icons";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import { useMessageContext } from "./contexts/MessageProvider";
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  color: var(--accent-color);
+
+  cursor: pointer;
+
+  & svg {
+    font-size: 1rem;
+    color: var(--accent-color);
+  }
+`;
+
+function Comments() {
+  const { _id: id } = useMessageContext();
+  const navigate = useNavigate();
+  function handleClick() {
+    navigate(`/${id}`);
+  }
+
+  return (
+    <Container onClick={handleClick}>
+      <span>20 Comments</span>
+      {getIcon("RightArrow")}
+    </Container>
+  );
+}
+
+export default Comments;
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index f4e1cd3e..29ed3b5b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -49,12 +49,6 @@ const Bubble = styled.div<{ $isMine: boolean }>`
   color: ${({ $isMine }) => ($isMine ? "#fff" : "var(--color-text)")};
   margin: ${({ $isMine }) => ($isMine ? "0 0 0 10px" : "0 10px 0 0")};
 
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text !important;
-  cursor: text;
-
   word-break: break-word;
   white-space: pre-wrap;
 `;
diff --git a/app/src/features/chats/MessageDetails.tsx b/app/src/features/chats/MessageDetails.tsx
index a68a8f09..157e7069 100644
--- a/app/src/features/chats/MessageDetails.tsx
+++ b/app/src/features/chats/MessageDetails.tsx
@@ -25,12 +25,17 @@ const Details = styled.div`
 `;
 
 function MessageDetails() {
-  const { isPinned, isMine } = useMessageContext();
+  const { isPinned, isMine, timestamp } = useMessageContext();
 
   return (
     <Details>
       {isPinned && getIcon("PushPin", { sx: { fontSize: "1rem" } })}
-      <TimeStamp $isMine={isMine}>11:09AM</TimeStamp>
+      <TimeStamp $isMine={isMine}>
+        {new Date(timestamp).toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}
+      </TimeStamp>
     </Details>
   );
 }
diff --git a/app/src/features/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
index 656a8b43..7c833cef 100644
--- a/app/src/features/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -57,6 +57,26 @@ function StartNewChat() {
     setIsMenuOpened((prevState) => !prevState);
   };
 
+  function handleMenuItemClick(title: string) {
+    if (title === "New Channel") {
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.ADD_MEMBERS,
+          data: { type: "channel" },
+        })
+      );
+    } else if (title === "New Group") {
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.ADD_MEMBERS,
+          data: { type: "group" },
+        })
+      );
+    } else {
+      //TODO: implemn
+    }
+  }
+
   return (
     <>
       <StyledCircleIconContainer>
@@ -84,14 +104,7 @@ function StartNewChat() {
               data-testid={`new-chat-menu-item-${id}`}
               {...item}
               key={id}
-              onClick={() => {
-                dispatch(
-                  updateSideBarView({
-                    redirect: sideBarPages.ADD_MEMBERS,
-                    data: undefined,
-                  })
-                );
-              }}
+              onClick={() => handleMenuItemClick(item?.title)}
             />
           ))}
         </StyledList>
diff --git a/app/src/features/groups/CreateGroupForm.tsx b/app/src/features/groups/CreateGroupForm.tsx
index 92af084b..5202d5be 100644
--- a/app/src/features/groups/CreateGroupForm.tsx
+++ b/app/src/features/groups/CreateGroupForm.tsx
@@ -24,7 +24,7 @@ const Form = styled.form`
   }
 `;
 
-function GroupInfoForm() {
+function GroupInfoForm({ type }: { type: "channel" | "group" }) {
   const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
   const { register, handleSubmit, watch } = useForm<NewGroupForm>({
     mode: "onChange",
@@ -45,13 +45,13 @@ function GroupInfoForm() {
 
     createGroupOrChannel({
       name: data.groupName,
-      type: "group",
+      type,
       members: members.map((member) => member._id),
     });
   };
 
   return (
-    <Form data-testid="new-group-form" onSubmit={handleSubmit(onSubmit)}>
+    <Form data-testid={`new-${type}-form`} onSubmit={handleSubmit(onSubmit)}>
       <UploadImage
         setSelectedImageFile={setSelectedImageFile}
         selectedImageFile={selectedImageFile}
@@ -59,7 +59,7 @@ function GroupInfoForm() {
 
       <FloatingLabelInput<NewGroupForm>
         id="groupName"
-        label="Group Name (required)"
+        label={`${type} Name (required)`}
         register={register}
         watch={watch}
         data-testid="group-name"
diff --git a/app/src/features/groups/NewGroup.tsx b/app/src/features/groups/NewGroup.tsx
index 7216af80..d376bef8 100644
--- a/app/src/features/groups/NewGroup.tsx
+++ b/app/src/features/groups/NewGroup.tsx
@@ -33,17 +33,17 @@ const Count = styled.span`
   position: relative;
 `;
 
-export default function NewGroup() {
+export default function NewGroup({ type }: { type: "channel" | "group" }) {
   const members = useAppSelector((state) => state.selectedUsers);
   const membersCount = members.length;
 
   return (
     <Container>
-      <CreateGroupForm />
+      <CreateGroupForm type={type} />
 
       {membersCount > 0 && (
         <StyledUsersList>
-          <Count>{`${membersCount} member${membersCount > 1 ? "s" : ""}`}</Count>
+          <Count>{`${membersCount} ${type === "channel" ? "subscriber" : "member"}${membersCount > 1 ? "s" : ""}`}</Count>
           {members?.map((user) => (
             <User view="display" key={user._id} user={user} />
           ))}
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 99524c6e..cb82817f 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -11,6 +11,7 @@ import {
   blockList,
   addMembers,
   newGroup,
+  newChannel,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -44,6 +45,8 @@ function getSideBarPage(type: number): SideBarView {
       return addMembers;
     case sideBarPages.NEW_GROUP:
       return newGroup;
+    case sideBarPages.NEW_CHANNEL:
+      return newChannel;
     default:
       throw new Error("Unknown Type");
   }
@@ -72,7 +75,11 @@ const sideBarSlice = createSlice({
       if (redirect === sideBarPages.SETTINGS_UPDATE) {
         state.props = { data: data };
         state.title = data?.header || newData.title;
-      } else if (redirect === sideBarPages.BLOCKED_USERS) {
+      } else if (
+        redirect === sideBarPages.BLOCKED_USERS ||
+        redirect === sideBarPages.ADD_MEMBERS ||
+        redirect === sideBarPages.NEW_GROUP
+      ) {
         state.props = { ...newData.props, data: data };
         state.title = newData.title;
       } else {
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 7ac2a143..dd549c7c 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -9,6 +9,7 @@ enum sideBarPages {
   DEVICES,
   ADD_MEMBERS,
   NEW_GROUP,
+  NEW_CHANNEL,
 }
 
 type pagesStrings = keyof typeof sideBarPages;

From 8dd619fd3d8763542b6e6b8f2abdb01699dd0be0 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 13 Dec 2024 09:51:57 +0200
Subject: [PATCH 082/136] :bug: (messaging): fixing messaging bugs (#120)

* :bug: (block): restoring my unblock-button from merge hunters

* :bug: (testids): adding testids everywhere

* :bug: (Emojies): fixing icons size

* :bug: (UI): fixing UI bugs

* :lipstick: (messaging): chat input ui improvement
---
 .../authentication/oauth/LoginWith.tsx        |  4 +-
 app/src/features/chats/ChatBody.tsx           |  4 +-
 app/src/features/chats/ChatInput.tsx          |  3 +-
 app/src/features/chats/ChatInputIcons.tsx     | 11 ++-
 app/src/features/chats/ChatsList.tsx          |  2 +-
 app/src/features/chats/ReplyWrapper.tsx       |  8 +-
 app/src/features/chats/Topbar.tsx             | 73 ++++++++++++++-----
 .../features/chats/audio/RecordingView.tsx    |  8 +-
 app/src/features/chats/emojies/Picker.tsx     |  6 +-
 app/src/features/chats/hooks/useChats.ts      |  3 +-
 .../chats/media/MediaUploadComponent.tsx      |  8 +-
 app/src/features/chats/utils/helpers.ts       | 14 ++--
 app/src/features/devices/Devices.tsx          | 14 ++--
 .../features/forward/ForwardingInputBar.tsx   | 15 ++--
 app/src/features/forward/ScrollableChats.tsx  |  6 +-
 .../features/search/components/SearchBar.tsx  | 10 +--
 .../mocks/privacy-settings/privacySettings.ts |  6 +-
 app/src/types/socket.ts                       |  2 +-
 18 files changed, 125 insertions(+), 72 deletions(-)

diff --git a/app/src/features/authentication/oauth/LoginWith.tsx b/app/src/features/authentication/oauth/LoginWith.tsx
index 91657446..3d6b60dd 100644
--- a/app/src/features/authentication/oauth/LoginWith.tsx
+++ b/app/src/features/authentication/oauth/LoginWith.tsx
@@ -29,8 +29,8 @@ type LoginWithProps = ComponentProps<"img"> & ComponentProps<"div">;
 
 function LoginWith({ onClick, alt, src }: LoginWithProps) {
   return (
-    <Icon onClick={onClick}>
-      <Img data-test={`${alt}-img`} src={src} alt={alt} />
+    <Icon data-testid={`${alt}-img`} onClick={onClick}>
+      <Img src={src} alt={alt} />
     </Icon>
   );
 }
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 086c38ab..4284f653 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -11,10 +11,10 @@ import MessageProvider from "./contexts/MessageProvider";
 
 const ScrollContainer = styled.div`
   width: 100%;
-  height: 90dvh;
+  height: 82dvh;
   overflow-y: auto;
   position: relative;
-
+  margin-top: 3rem;
   &::-webkit-scrollbar {
     width: 5px;
   }
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 15f6fd7d..b89faae9 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -36,7 +36,6 @@ const InputContainer = styled.div`
 
   padding: 0.3125rem 0.6rem;
   border-radius: 1rem;
-
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 
   flex: 3 auto;
@@ -44,7 +43,7 @@ const InputContainer = styled.div`
   display: flex;
   align-self: center;
   flex-direction: column;
-
+  align-content: center;
   height: 100%;
 `;
 
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
index 08de6fbe..4d234f58 100644
--- a/app/src/features/chats/ChatInputIcons.tsx
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -6,7 +6,7 @@ import Icon from "@components/Icon";
 import { useContext } from "react";
 import { ChatInputContext } from "./ChatBox";
 
-const InvisibleButton = styled.button`
+const InvisibleButton = styled.div`
   all: unset;
   display: inline-block;
   cursor: pointer;
@@ -36,11 +36,10 @@ function ChatInputIcons() {
 
   return (
     <>
-      <InvisibleButton
-        onClick={() => toggleShowEmojies()}
-        data-testid="emoji-button"
-      >
-        <Icon>{getIcon("Emojie")}</Icon>
+      <InvisibleButton>
+        <Icon data-testid="Emojie-button" onClick={() => toggleShowEmojies()}>
+          {getIcon("Emojie")}
+        </Icon>
       </InvisibleButton>
 
       <ExpandingTextArea
diff --git a/app/src/features/chats/ChatsList.tsx b/app/src/features/chats/ChatsList.tsx
index fb5e7c43..1784795f 100644
--- a/app/src/features/chats/ChatsList.tsx
+++ b/app/src/features/chats/ChatsList.tsx
@@ -9,9 +9,9 @@ const ChatListContainer = styled.ul`
   width: 100%;
   height: 100%;
   max-width: 600px;
-  margin: auto;
   background-color: var(--color-background);
   overflow-y: scroll;
+  padding-bottom: 2rem;
 `;
 
 const ChatsList = () => {
diff --git a/app/src/features/chats/ReplyWrapper.tsx b/app/src/features/chats/ReplyWrapper.tsx
index 618ddb89..f26145d3 100644
--- a/app/src/features/chats/ReplyWrapper.tsx
+++ b/app/src/features/chats/ReplyWrapper.tsx
@@ -34,11 +34,15 @@ export default function ReplyWrapper() {
     if (activeMessage.state === "edit") setInput("");
   }
 
+  const isEdit = activeMessage.state === "edit";
+
   return (
     <Container data-testid="reply-wrapper">
-      <Icon>{getIcon(activeMessage.state === "edit" ? "Edit" : "Reply")}</Icon>
+      <Icon data-testid={isEdit ? "edit-icon" : "reply-icon"}>
+        {getIcon(isEdit ? "Edit" : "Reply")}
+      </Icon>
       <MessageBox />
-      <Icon onClick={handleHideWrapper} test-id="close-icon">
+      <Icon onClick={handleHideWrapper} data-testid="close-icon">
         {getIcon("Close")}
       </Icon>
     </Container>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 4a4e17b7..bbc282e3 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -5,13 +5,15 @@ import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
-import { useAppSelector } from "@hooks/useGlobalState";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { getChatByID } from "./utils/helpers";
 import { useChatMembers } from "./hooks/useChatMember";
 import { getElapsedTime } from "@utils/helpers";
 import { useSocket } from "@hooks/useSocket";
 import CallLayout from "@features/calls/CallLayout";
+import { useBlock } from "@features/privacy-settings/hooks/useBlock";
+import { setChatIsBlocked } from "@state/messages/chats";
 const Container = styled.div<{ hasMargin?: boolean }>`
   position: absolute;
   top: 0;
@@ -76,14 +78,33 @@ const IconButton = styled.button`
   justify-content: center;
 `;
 
-const InvisibleButton = styled.button`
+const InvisibleButton = styled.div`
   all: unset;
   display: inline-block;
   cursor: pointer;
 `;
+
+const StyledButton = styled.button`
+  background: linear-gradient(
+    to left,
+    var(--color-background-own-3),
+    var(--color-background-own-4)
+  );
+
+  border: none;
+  width: 7rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  color: var(--color-text);
+  margin-right: 1rem;
+
+  color: var(--color-background);
+`;
+
 //TODO: refactor
 function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
+  const userId = useAppSelector((state) => state.user.userInfo.id);
   const chats = useAppSelector((state) => state.chats.chats);
   const [isSearching, setIsSearching] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -96,20 +117,14 @@ function Topbar() {
     : undefined;
 
   const membersData = useChatMembers(chat?.members);
+  const { removeFromBlockList } = useBlock();
 
-  let name;
   let image;
   let lastSeen;
 
   if (chat) {
-    if (chat?.type === "group" || chat?.type === "channel") {
-      name = chat?.name;
-    } else {
-      name = membersData[0]?.screenFirstName || membersData[0]?.username;
-
-      lastSeen = chat?.lastMessage?.timestamp;
-      image = membersData[0]?.photo;
-    }
+    lastSeen = chat?.lastMessage?.timestamp;
+    image = membersData[0]?.photo;
   }
 
   if (!chat) return null;
@@ -117,6 +132,20 @@ function Topbar() {
   const toggleSearch = () => {
     setIsSearching(!isSearching);
   };
+
+  const dispatch = useAppDispatch();
+
+  async function handleRemoveFromBlock() {
+    await removeFromBlockList({ id: membersData[0]._id });
+    dispatch(
+      setChatIsBlocked({
+        chatId: chatId!,
+        isBlocked: false,
+        userId: userId,
+      })
+    );
+  }
+
   const isCall = true;
   return (
     <>
@@ -124,7 +153,7 @@ function Topbar() {
         <CallLayout
           isCollapsed={isCollapsed}
           setIsCollapsed={setIsCollapsed}
-          name={name}
+          name={chat.name}
           image={image}
         />
       )}
@@ -132,7 +161,7 @@ function Topbar() {
         <Avatar
           data-testid="chat-avatar"
           image={image}
-          name={name?.charAt(0)}
+          name={chat.name?.charAt(0)}
         />
         {isSearching ? (
           <SearchBar onClose={toggleSearch} />
@@ -140,7 +169,7 @@ function Topbar() {
           <>
             <Info data-testid="chat-info">
               <Content>
-                <Name data-testid="chat-name">{name}</Name>
+                <Name data-testid="chat-name">{chat.name}</Name>
                 {lastSeen && (
                   <LastSeen data-testid="chat-last-seen">
                     last seen {getElapsedTime(lastSeen)}
@@ -149,15 +178,25 @@ function Topbar() {
               </Content>
             </Info>
             <PinnedMessages />
+            {chat.isBlocked && (
+              <StyledButton
+                onClick={handleRemoveFromBlock}
+                data-testid="unblock-button"
+              >
+                Unblock
+              </StyledButton>
+            )}
             <Icons>
-              <InvisibleButton onClick={startConnection}>
-                <Icon>{getIcon("Call")}</Icon>
+              <InvisibleButton>
+                <Icon onClick={() => startConnection()} data-testid="call-icon">
+                  {getIcon("Call")}
+                </Icon>
               </InvisibleButton>
 
               <IconButton onClick={toggleSearch} data-testid="search-button">
                 {getIcon("Search")}
               </IconButton>
-              <Icon>{getIcon("More")}</Icon>
+              <Icon data-testid="more-icon">{getIcon("More")}</Icon>
             </Icons>
           </>
         )}
diff --git a/app/src/features/chats/audio/RecordingView.tsx b/app/src/features/chats/audio/RecordingView.tsx
index 4410f32a..441c439b 100644
--- a/app/src/features/chats/audio/RecordingView.tsx
+++ b/app/src/features/chats/audio/RecordingView.tsx
@@ -30,7 +30,7 @@ const StyledP = styled.p`
   font-size: 1rem;
   color: var(--color-text-secondary);
 `;
-const InvisibleButton = styled.button`
+const InvisibleButton = styled.div`
   all: unset;
   position: absolute;
   top: 50%;
@@ -58,8 +58,10 @@ export default function RecordingView() {
       {isRecording == "pause" && (
         <>
           <StyledP>Record</StyledP>
-          <InvisibleButton onClick={handleCanelReecord}>
-            <Icon>{getIcon("Delete")}</Icon>
+          <InvisibleButton>
+            <Icon onClick={handleCanelReecord} data-testid>
+              {getIcon("Delete")}
+            </Icon>
           </InvisibleButton>
         </>
       )}
diff --git a/app/src/features/chats/emojies/Picker.tsx b/app/src/features/chats/emojies/Picker.tsx
index efe78267..f081af2f 100644
--- a/app/src/features/chats/emojies/Picker.tsx
+++ b/app/src/features/chats/emojies/Picker.tsx
@@ -97,19 +97,19 @@ function Picker() {
           $active={activeTab === StickerTap.emoji}
           onClick={() => setActiveTab(StickerTap.emoji)}
         >
-          {getIcon("EmojiBox")}
+          {getIcon("EmojiBox", { fontSize: "small" })}
         </Tab>
         <Tab
           $active={activeTab === StickerTap.gif}
           onClick={() => setActiveTab(StickerTap.gif)}
         >
-          {getIcon("GifBox")}
+          {getIcon("GifBox", { fontSize: "small" })}
         </Tab>
         <Tab
           $active={activeTab === StickerTap.sticker}
           onClick={() => setActiveTab(StickerTap.sticker)}
         >
-          {getIcon("StickerBox")}
+          {getIcon("StickerBox", { fontSize: "small" })}
         </Tab>
       </TabBar>
       <EmojiWrapper>
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 47dfe958..a48b6690 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -19,7 +19,8 @@ export function useChats() {
   useEffect(() => {
     const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),
-      members: chatData?.members || [],
+      members:
+        chatData?.members.filter((member) => member._id !== userId) || [],
     };
 
     dispatch(setAllChats({ chatsData: initialChatState, blockList, userId }));
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
index a7d0275a..1cccbddb 100644
--- a/app/src/features/chats/media/MediaUploadComponent.tsx
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 
-const InvisibleButton = styled.button`
+const InvisibleButton = styled.div`
   all: unset;
   display: inline-block;
   cursor: pointer;
@@ -37,9 +37,13 @@ export default function MediaUploadComponent({
         ref={fileInput}
         onChange={onAddFile}
         style={{ display: "none" }}
+        data-testid="file-input"
       />
       <InvisibleButton>
-        <Icon onClick={() => fileInput.current.click()}>
+        <Icon
+          data-testid="upload-media-button"
+          onClick={() => fileInput.current?.click()}
+        >
           {getIcon("Attatch")}
         </Icon>
       </InvisibleButton>
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index b3287a9f..f4b65735 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -25,12 +25,14 @@ export function parseChatsToState(chatData?: any) {
       name,
     } = currChat;
 
-    const filteredMembers = members.map((member: any) => {
-      return {
-        _id: member.user,
-        Role: member.Role,
-      } as ChatMember;
-    });
+    const filteredMembers = members
+      .map((member: any) => {
+        return {
+          _id: member.user,
+          Role: member.Role,
+        } as ChatMember;
+      })
+
 
     const incomingLastMessage = chatData.lastMessages.find(
       (lastMessage: any) => lastMessage.chatId === chatId
diff --git a/app/src/features/devices/Devices.tsx b/app/src/features/devices/Devices.tsx
index 61d62dea..1e7f188d 100644
--- a/app/src/features/devices/Devices.tsx
+++ b/app/src/features/devices/Devices.tsx
@@ -48,7 +48,7 @@ const HeaderAnimatinoContainer = styled.div`
   }
 `;
 
-const TerminateOtherSessionsButton = styled.button`
+const TerminateOtherSessionsButton = styled.div`
   color: var(--color-error);
   background-color: var(--color-background);
   font-size: 1rem;
@@ -79,11 +79,13 @@ function Devices() {
       <SettingSection>
         <SectionTitle data-testid="this-device-title">THIS DEVICE</SectionTitle>
         <SessionItem session={activeSession} />
-        <TerminateOtherSessionsButton
-          onClick={handleLogoutOthers}
-          data-testid="terminate-other-sessions-button"
-        >
-          <Icon>{getIcon("DoDisturb")}</Icon>
+        <TerminateOtherSessionsButton>
+          <Icon
+            onClick={handleLogoutOthers}
+            data-testid="terminate-other-sessions-button"
+          >
+            {getIcon("DoDisturb")}
+          </Icon>
           <span>Terminate All Other Sessions</span>
         </TerminateOtherSessionsButton>
       </SettingSection>
diff --git a/app/src/features/forward/ForwardingInputBar.tsx b/app/src/features/forward/ForwardingInputBar.tsx
index 45c5a3da..f0b506b8 100644
--- a/app/src/features/forward/ForwardingInputBar.tsx
+++ b/app/src/features/forward/ForwardingInputBar.tsx
@@ -45,15 +45,16 @@ function ForwardingInputBar() {
 
   return selectedMessages ? (
     <Wrapper>
-      <IconButton onClick={handleClose} test-id="close-icon">
-        <Icon>{getIcon("Close")}</Icon>
+      <IconButton>
+        <Icon onClick={handleClose} test-id="close-icon">
+          {getIcon("Close")}
+        </Icon>
       </IconButton>
       <StyledHeader>{selectedMessages.length} messages selected</StyledHeader>
-      <IconButton
-        onClick={() => setShowForwardUsers(true)}
-        test-id="forward-icon"
-      >
-        <Icon>{getIcon("Forward")}</Icon>
+      <IconButton>
+        <Icon onClick={() => setShowForwardUsers(true)} test-id="forward-icon">
+          {getIcon("Forward")}
+        </Icon>
       </IconButton>
     </Wrapper>
   ) : null;
diff --git a/app/src/features/forward/ScrollableChats.tsx b/app/src/features/forward/ScrollableChats.tsx
index 87855f0f..bd316cae 100644
--- a/app/src/features/forward/ScrollableChats.tsx
+++ b/app/src/features/forward/ScrollableChats.tsx
@@ -83,8 +83,10 @@ function ScrollableChats(props: Props) {
   return (
     <OuterContainer>
       <HeaderRow>
-        <IconWrapper onClick={onClose} test-id="close-icon">
-          <Icon>{getIcon("Close")}</Icon>
+        <IconWrapper>
+          <Icon onClick={onClose} test-id="close-icon">
+            {getIcon("Close")}
+          </Icon>
         </IconWrapper>
         <Heading as="h4">Forward To...</Heading>
       </HeaderRow>
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index 02e1a75d..54e584c8 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -74,10 +74,10 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   const dispatch = useDispatch();
   const chatId = useParams<{ chatId: string }>().chatId;
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-    (state: RootState) => state.search,
+    (state: RootState) => state.search
   );
   const currentChat = useSelector((state: RootState) =>
-    state.chats.chats.find((chat) => chat._id === chatId),
+    state.chats.chats.find((chat) => chat._id === chatId)
   );
   const messages = currentChat?.messages ?? [];
 
@@ -90,7 +90,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
       return;
     }
 
-    const results = messages.reduce((acc, message) => {
+    const results = messages.reduce<{ messageId: string; highlightIndex: number }[]>((acc, message) => {
       const lowerCaseTerm = term.toLowerCase();
       const lowerCaseContent = message.content.toLowerCase();
 
@@ -98,7 +98,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
         const matchIndices = findAllMatchIndices(message.content, term);
         matchIndices.forEach((highlightIndex) => {
           acc.push({
-            messageId: message.id,
+            messageId: message._id,
             highlightIndex,
           });
         });
@@ -141,7 +141,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
 
   return (
     <SearchContainer>
-      <Icon>
+      <Icon data-testid="search-icon">
         {isSearchLoading ? getIcon("CircularProgress") : getIcon("Search")}
       </Icon>
       <SearchInput
diff --git a/app/src/mocks/privacy-settings/privacySettings.ts b/app/src/mocks/privacy-settings/privacySettings.ts
index 6190b7e5..254e380a 100644
--- a/app/src/mocks/privacy-settings/privacySettings.ts
+++ b/app/src/mocks/privacy-settings/privacySettings.ts
@@ -26,12 +26,10 @@ export const privacySettingsMock = [
 
   http.patch("/users/block/:id", async (req) => {
     const id = req.params.id;
-    const user = allChats.find(
-      (item: { id: string }) => item.id.toString() === id
-    );
+    const user = allChats.find((item) => item._id.toString() === id);
     if (user) {
       blockList.push({
-        id: user.id,
+        id: user._id,
       });
 
       return HttpResponse.json({}, { status: 200 });
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 4ebb96ef..faf16ee7 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -16,7 +16,7 @@ export interface SocketContextType {
     name: string;
     members: string[];
   }) => void;
-  startConnection: (offer: RTCSessionDescription) => void;
+  startConnection: (offer?: RTCSessionDescription) => void;
 }
 
 export interface SocketProviderProps {

From 549923f263fefa92ec09cbcdc979ebf40e94d304 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 13 Dec 2024 10:53:15 +0200
Subject: [PATCH 083/136] :bug: (messages): fix message being received
 duplicated (#121)

---
 app/src/sockets/SocketProvider.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index bbb69158..d8ace70f 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -287,11 +287,12 @@ function SocketProvider({ children }: SocketProviderProps) {
         });
       });
 
-      socket.on("RECEIVE_MESSAGE", (message) => {
-        console.log("inside recieve");
-        console.log(message);
-        handleIncomingMessage(dispatch, message, message.chatId);
-      });
+      // TODO Fix: This makes message got received 3 times
+      // socket.on("RECEIVE_MESSAGE", (message) => {
+      //   console.log("inside recieve");
+      //   console.log(message);
+      //   handleIncomingMessage(dispatch, message, message.chatId);
+      // });
       socket.on("RECIEVE_OFFER", async (offer) => {
         console.log(offer);
         const answer = await createAnswer(offer);

From 775d616f95b656f06e0ff4b9bf98aae941690d66 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 13 Dec 2024 13:25:08 +0200
Subject: [PATCH 084/136] =?UTF-8?q?=F0=9F=90=9B=20(hotfix):=20Fix=20changi?=
 =?UTF-8?q?ng=20hooks=20order=20(#122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/features/chats/Topbar.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index bbc282e3..08e9355d 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -14,7 +14,8 @@ import { useSocket } from "@hooks/useSocket";
 import CallLayout from "@features/calls/CallLayout";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
 import { setChatIsBlocked } from "@state/messages/chats";
-const Container = styled.div<{ hasMargin?: boolean }>`
+
+const Container = styled.div<{ $hasMargin?: boolean }>`
   position: absolute;
   top: 0;
   z-index: 2;
@@ -29,7 +30,7 @@ const Container = styled.div<{ hasMargin?: boolean }>`
 
   padding-inline: 1rem;
 
-  margin: ${({ hasMargin }) => (hasMargin ? "1rem 0" : "0")};
+  margin: ${({ $hasMargin }) => ($hasMargin ? "1rem 0" : "0")};
 `;
 
 const Info = styled.div`
@@ -127,8 +128,6 @@ function Topbar() {
     image = membersData[0]?.photo;
   }
 
-  if (!chat) return null;
-
   const toggleSearch = () => {
     setIsSearching(!isSearching);
   };
@@ -146,7 +145,10 @@ function Topbar() {
     );
   }
 
-  const isCall = true;
+  const isCall = false;
+
+  if (!chat) return null;
+
   return (
     <>
       {isCall && (
@@ -157,7 +159,7 @@ function Topbar() {
           image={image}
         />
       )}
-      <Container hasMargin={isCollapsed}>
+      <Container $hasMargin={isCollapsed}>
         <Avatar
           data-testid="chat-avatar"
           image={image}

From 46f550f5705d4093d323529c5755aa570b4ad7a4 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:04:50 +0200
Subject: [PATCH 085/136] :zap: (hotfix): improving loading chatlist
 performance (#123)

---
 app/src/features/chats/ChatBody.tsx |   2 +-
 app/src/features/chats/ChatItem.tsx | 121 ++++++++++++++--------------
 2 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 4284f653..326f9813 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -75,7 +75,7 @@ function ChatBody() {
       {messages &&
         messages.map((data) => {
           return (
-            <MessageProvider data={data}>
+            <MessageProvider key={data._id} data={data}>
               <Message key={data._id} />
             </MessageProvider>
           );
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 56c2eb5e..fd7d1266 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -9,6 +9,7 @@ import {
 } from "@state/messages/chats";
 import { useChatMembers } from "./hooks/useChatMember";
 import { useAppDispatch } from "@hooks/useGlobalState";
+import React from "react";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -63,66 +64,68 @@ type ChatItemProps = {
   onClick?: () => void;
 };
 
-function ChatItem({
-  chat: { _id, type, lastMessage, name, photo, members },
-  onClick,
-}: ChatItemProps) {
-  const navigate = useNavigate();
-
-  const timestamp = lastMessage?.timestamp || "No messages";
-  const lastMessageContent = lastMessage?.content || "No messages";
-
-  const { chatId } = useParams<{ chatId: string }>();
-
-  const handleOpenChat = () => {
-    navigate(`/${_id}`);
-  };
-
-  const dispatch = useAppDispatch();
-
-  if (type === "private") {
-    const memberData = useChatMembers(members)[0];
-    dispatch(
-      setName({
-        chatId: _id,
-        name:
-          memberData?.screenFirstName + " " + memberData?.screenLastName ||
-          memberData?.username,
-      })
-    );
-
-    dispatch(
-      setPhoto({
-        chatId: _id,
-        photo: memberData?.photo,
-      })
+const ChatItem = React.memo(
+  ({
+    chat: { _id, type, lastMessage, name, photo, members },
+    onClick,
+  }: ChatItemProps) => {
+    const navigate = useNavigate();
+
+    const timestamp = lastMessage?.timestamp || "No messages";
+    const lastMessageContent = lastMessage?.content || "No messages";
+
+    const { chatId } = useParams<{ chatId: string }>();
+
+    const handleOpenChat = () => {
+      navigate(`/${_id}`);
+    };
+
+    const dispatch = useAppDispatch();
+
+    if (type === "private") {
+      const memberData = useChatMembers(members)[0];
+      dispatch(
+        setName({
+          chatId: _id,
+          name:
+            memberData?.screenFirstName + " " + memberData?.screenLastName ||
+            memberData?.username,
+        })
+      );
+
+      dispatch(
+        setPhoto({
+          chatId: _id,
+          photo: memberData?.photo,
+        })
+      );
+    }
+
+    return (
+      <Container
+        data-testid="chat-container"
+        $active={chatId === _id}
+        onClick={onClick ? onClick : handleOpenChat}
+        key={_id}
+      >
+        <Avatar data-testid="chat-avatar" image={photo} name={name} />
+        <ChatContent>
+          <ChatHeader>
+            <Name data-testid="chat-name">{name}</Name>
+            <Timestamp data-testid="chat-timestamp">
+              {new Date(timestamp).toLocaleTimeString("en-US", {
+                hour: "2-digit",
+                minute: "2-digit",
+              }) || "No messages"}
+            </Timestamp>
+          </ChatHeader>
+          <LastMessage data-testid="chat-last-message">
+            {lastMessageContent || "No messages"}
+          </LastMessage>
+        </ChatContent>
+      </Container>
     );
   }
-
-  return (
-    <Container
-      data-testid="chat-container"
-      $active={chatId === _id}
-      onClick={onClick ? onClick : handleOpenChat}
-      key={_id}
-    >
-      <Avatar data-testid="chat-avatar" image={photo} name={name} />
-      <ChatContent>
-        <ChatHeader>
-          <Name data-testid="chat-name">{name}</Name>
-          <Timestamp data-testid="chat-timestamp">
-            {new Date(timestamp).toLocaleTimeString("en-US", {
-              hour: "2-digit",
-              minute: "2-digit",
-            }) || "No messages"}
-          </Timestamp>
-        </ChatHeader>
-        <LastMessage data-testid="chat-last-message">
-          {lastMessageContent || "No messages"}
-        </LastMessage>
-      </ChatContent>
-    </Container>
-  );
-}
+);
 
 export default ChatItem;

From 61e98671eb0617bd9651d942cc5515171491259f Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 13 Dec 2024 17:05:19 +0200
Subject: [PATCH 086/136] feature(search): close with menu button + tabs + No
 result fount element (#125)

* feat: add no results found components

* feat: handle close search with menu button + tabs
---
 .../components/side-bar/chats/SearchBar.tsx   |  5 ++-
 .../side-bar/chats/SideBarToolsButton.tsx     | 26 +++++++++--
 app/src/data/animations/not_found.json        |  1 +
 app/src/features/profile-info/ProfileInfo.tsx |  3 +-
 .../search/components/NoResultsFound.tsx      | 44 +++++++++++++++++++
 .../features/search/components/SearchBar.tsx  | 41 ++++++++++-------
 .../search/components/TabedSearch.tsx         |  6 +--
 .../search/components/tabs/MessagesTab.tsx    | 34 ++++++++++++++
 .../search/data/tabs-components-map.tsx       | 43 +++++++++++++-----
 app/src/state/messages/global-search.ts       |  7 ++-
 10 files changed, 173 insertions(+), 37 deletions(-)
 create mode 100644 app/src/data/animations/not_found.json
 create mode 100644 app/src/features/search/components/NoResultsFound.tsx
 create mode 100644 app/src/features/search/components/tabs/MessagesTab.tsx

diff --git a/app/src/components/side-bar/chats/SearchBar.tsx b/app/src/components/side-bar/chats/SearchBar.tsx
index d9c0364f..72c33fc8 100644
--- a/app/src/components/side-bar/chats/SearchBar.tsx
+++ b/app/src/components/side-bar/chats/SearchBar.tsx
@@ -1,6 +1,7 @@
 import { getIcon } from "@data/icons";
 import { setSearchTerm } from "@state/messages/global-search";
-import { useDispatch } from "react-redux";
+import { RootState } from "@state/store";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 
 const StyledSearchBar = styled.div`
@@ -46,6 +47,7 @@ const Input = styled.input`
 
 function SearchBar() {
   const dispatch = useDispatch();
+  const { searchTerm } = useSelector((state: RootState) => state.globalSearch);
 
   const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(setSearchTerm(e.target.value));
@@ -58,6 +60,7 @@ function SearchBar() {
         placeholder="Search"
         data-testid="general-search"
         onChange={onSearch}
+        value={searchTerm}
       />
       <Icon data-testid="general-serach-icon">{getIcon("Search")}</Icon>
     </StyledSearchBar>
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index 45096978..5f7b6dd8 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -8,6 +8,9 @@ import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "@data/sideBar";
 import { useMouseLeave } from "@hooks/useMouseLeave";
 import { getIcon } from "@data/icons";
+import { RootState } from "@state/store";
+import { clearSearch } from "@state/messages/global-search";
+import { useSelector } from "react-redux";
 
 const ToolsIcon = styled.div`
   > svg {
@@ -41,16 +44,31 @@ const StyledList = styled.ul<{ $isOpened?: boolean }>`
 `;
 
 function SettingsToolbar() {
+  const { searchTerm } = useSelector((state: RootState) => state.globalSearch);
+  const isSearching = searchTerm.length > 0;
   const [isOpened, setIsOpened] = useState(false);
   const dispatch = useAppDispatch();
   const ref = useMouseLeave(() => setIsOpened(false), false);
+
   const handleOpenSettings = () => {
     setIsOpened((prevState) => !prevState);
   };
+
+  const handleResetSearch = () => {
+    dispatch(clearSearch());
+  };
+
   return (
     <>
-      <ToolsIcon onClick={handleOpenSettings} data-testid="menu-items-icon">
-        {getIcon("Menu")}
+      <ToolsIcon
+        onClick={() =>
+          isSearching ? handleResetSearch() : handleOpenSettings()
+        }
+        data-testid="menu-items-icon"
+      >
+        {isSearching
+          ? getIcon("Close", { fontSize: "large", sx: { fontSize: "2rem" } })
+          : getIcon("Menu")}
       </ToolsIcon>
       {isOpened && (
         <StyledList
@@ -66,7 +84,7 @@ function SettingsToolbar() {
                 updateSideBarView({
                   redirect: sideBarPages.CONTACTS,
                   data: undefined,
-                })
+                }),
               )
             }
           />
@@ -79,7 +97,7 @@ function SettingsToolbar() {
                 updateSideBarView({
                   redirect: sideBarPages.SETTINGS,
                   data: undefined,
-                })
+                }),
               )
             }
           />
diff --git a/app/src/data/animations/not_found.json b/app/src/data/animations/not_found.json
new file mode 100644
index 00000000..81e40a48
--- /dev/null
+++ b/app/src/data/animations/not_found.json
@@ -0,0 +1 @@
+{"tgs":1,"v":"5.5.2","fr":60,"ip":60,"op":240,"w":512,"h":512,"nm":"_103_SRCH","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1268","sr":1,"ks":{"o":{"a":0,"k":0},"p":{"a":0,"k":[256,256,0]}},"ao":0,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"wing","parent":23,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[9.032]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[9.032]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":68,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":100,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-109,126,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-143.884,133.056,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-143.884,133.056,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-109,126,0]}]},"a":{"a":0,"k":[-109,126,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-10.127,-2.893],[0,0]],"v":[[-51.75,144.46],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":82,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-55.236,153.922],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":102,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-55.236,153.922],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-53.682,151.084],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-8.191,-7.579],[0,0]],"v":[[-53.682,151.084],[-79.236,130.476]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0,0],[6.768,5.622]],"o":[[-5.359,-10.003],[0,0]],"v":[[-76.634,159.308],[-93.788,134.314]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":163,"s":[{"i":[[0,0],[6.768,5.622]],"o":[[-11.051,-7.124],[0,0]],"v":[[-74.448,146.367],[-97.326,130.781]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":186,"s":[{"i":[[0,0],[6.768,5.622]],"o":[[-11.051,-7.124],[0,0]],"v":[[-74.448,146.367],[-97.326,130.781]],"c":false}]},{"t":203,"s":[{"i":[[0,0],[6.269,5.304]],"o":[[-10.127,-2.893],[0,0]],"v":[[-51.75,144.46],[-79.236,130.476]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":70,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-31.014,150.247],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":82,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.12,171.494],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":102,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.12,171.494],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.253,158.041],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-36.253,158.041],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-102.55,110.665],[-65.753,175.949],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":163,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-102.55,110.665],[-58.41,153.177],[-118.779,146.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":186,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-102.55,110.665],[-58.41,153.177],[-118.779,146.389]],"c":false}]},{"t":203,"s":[{"i":[[0,0],[3.584,-10.359],[33.756,31.345]],"o":[[30.38,26.522],[-2.812,8.126],[0,0]],"v":[[-85.987,113.116],[-31.014,150.247],[-118.779,146.389]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"book","parent":1,"sr":1,"ks":{"p":{"a":0,"k":[56.301,155.621,0]},"a":{"a":0,"k":[56.301,135.621,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[129.355,114.894],[217.852,78],[145.472,186.788],[70.001,219.157]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[129.355,114.894],[217.852,78],[145.472,186.788],[70.001,219.157]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.77,92.434],[192.757,45.219],[157.343,177.807],[70.001,217.049]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[101.77,92.434],[192.757,45.219],[157.343,177.807],[70.001,217.049]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[134.226,87.972],[209.796,40.756],[139.898,181.864],[70.001,217.049]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.027450980619,0.396078437567,0.647058844566,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.560784339905,0.792156875134,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[-0.825,9.608],[8.106,-16.468],[8.792,9.992]],"o":[[22.068,14.989],[-17.842,46.188],[-8.167,16.592],[10.553,-22.829]],"v":[[83.386,122.196],[129.355,114.894],[70.001,219.157],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[-0.825,9.608],[8.106,-16.468],[8.792,9.992]],"o":[[22.068,14.989],[-17.842,46.188],[-8.167,16.592],[10.553,-22.829]],"v":[[83.386,122.196],[129.355,114.894],[70.001,219.157],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[-0.825,10.829],[4.578,-15.611],[8.792,11.262]],"o":[[22.068,16.893],[-11.979,52.222],[-4.689,16.092],[5.016,-23.333]],"v":[[55.801,100.664],[101.77,92.434],[70.001,217.049],[29.125,220.514]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[-0.825,10.829],[4.578,-15.611],[8.792,11.262]],"o":[[22.068,16.893],[-11.979,52.222],[-4.689,16.092],[5.016,-23.333]],"v":[[55.801,100.664],[101.77,92.434],[70.001,217.049],[29.125,220.514]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[-0.825,10.829],[9.801,-19.925],[8.792,11.262]],"o":[[22.068,16.893],[-20.595,51.977],[-9.801,19.925],[13.153,-26.855]],"v":[[88.257,96.201],[134.226,87.972],[70.001,217.049],[29.125,220.514]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.027450980619,0.396078437567,0.647058844566,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.560784339905,0.792156875134,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[-0.265,-1.153],[0,0],[0,0]],"o":[[0,0],[0.265,1.153],[0,0],[0,0]],"v":[[-97.193,219.157],[-52.208,112.36],[83.386,122.196],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[-0.265,-1.153],[0,0],[0,0]],"o":[[0,0],[0.265,1.153],[0,0],[0,0]],"v":[[-97.193,219.157],[-52.208,112.36],[83.386,122.196],[29.125,222.231]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-66.845,87.105],[55.801,100.664],[29.125,220.514]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-66.845,87.105],[55.801,100.664],[29.125,220.514]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[-0.265,-1.299],[0,0],[0,0]],"o":[[0,0],[0.265,1.299],[0,0],[0,0]],"v":[[-97.193,217.049],[-33.578,87.105],[88.257,96.201],[29.125,220.514]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.027450980619,0.396078437567,0.647058844566,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.560784339905,0.792156875134,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"book","parent":3,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-56.295,82.949],[-52.93,116.144],[-94.075,218.593],[-97.197,185.801]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-56.295,82.949],[-52.93,116.144],[-94.075,218.593],[-97.197,185.801]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-70.411,70.075],[-64.411,88.728],[-94.075,210.593],[-100.9,190.249]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-70.411,70.075],[-64.411,88.728],[-94.075,210.593],[-100.9,190.249]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-45.258,68.047],[-33.578,87.105],[-94.075,210.593],[-109.419,191.06]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.776470601559,0.713725507259,0.458823531866,1]},"o":{"a":0,"k":50},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":80,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-22.109],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-10.056],[14.633,-28.094],[0,0],[0,0],[0,0]],"v":[[-95.204,217.383],[-97.197,185.801],[-56.295,82.949],[100.867,111.094],[183.686,66],[205.747,83.604],[71.027,213.584]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":100,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-22.109],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-10.056],[14.633,-28.094],[0,0],[0,0],[0,0]],"v":[[-95.204,217.383],[-97.197,185.801],[-56.295,82.949],[100.867,111.094],[183.686,66],[205.747,83.604],[71.027,213.584]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-100.9,190.249],[-70.411,70.075],[74.954,96.907],[166.336,37.574],[182.048,55.034],[71.027,213.584]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-100.9,190.249],[-70.411,70.075],[74.954,96.907],[166.336,37.574],[182.048,55.034],[71.027,213.584]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[0,0],[0,0],[-17.228,-26.664],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[59.902,-12.128],[11.554,-47.106],[0,0],[0,0],[0,0]],"v":[[-90.704,214.883],[-109.419,191.06],[-45.258,68.047],[108.626,92.038],[175.667,35.546],[200.71,50.572],[71.027,213.584]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.776470601559,0.713725507259,0.458823531866,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.949019610882,0.741176486015,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"lupa11","parent":6,"sr":1,"ks":{"o":{"a":0,"k":50},"r":{"a":0,"k":180},"s":{"a":0,"k":[100,102.141,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[-1.66,1.415],[-5.79,-1.497]],"o":[[2.372,-2.022],[0.78,0.202]],"v":[[-12.923,-22.552],[4.563,-25.64]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-1.66,1.415],[-5.79,-1.497]],"o":[[2.372,-2.022],[0.78,0.202]],"v":[[-12.923,-22.552],[4.563,-25.64]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-2.084,0.643],[-4.726,-3.664]],"o":[[2.978,-0.919],[0.637,0.494]],"v":[[-8.57,-28.991],[8.712,-24.913]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-2.084,0.643],[-4.726,-3.664]],"o":[[2.978,-0.919],[0.637,0.494]],"v":[[-8.57,-28.991],[8.712,-24.913]],"c":false}]},{"t":199,"s":[{"i":[[-2.139,0.427],[-4.327,-4.127]],"o":[[3.056,-0.611],[0.583,0.556]],"v":[[-0.847,-27.713],[15.929,-21.894]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"lupa10","parent":8,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[-1.355,0.894],[-3.502,-0.859]],"o":[[5.268,-3.474],[1.145,0.281]],"v":[[-13.739,-21.435],[0.317,-25.599]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-1.355,0.894],[-3.502,-0.859]],"o":[[5.268,-3.474],[1.145,0.281]],"v":[[-13.739,-21.435],[0.317,-25.599]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-1.611,0.197],[-2.754,-2.328]],"o":[[6.264,-0.767],[0.9,0.761]],"v":[[-6.857,-8.696],[7.584,-6.17]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-1.611,0.197],[-2.754,-2.328]],"o":[[6.264,-0.767],[0.9,0.761]],"v":[[-6.857,-8.696],[7.584,-6.17]],"c":false}]},{"t":199,"s":[{"i":[[-1.622,-0.061],[-2.349,-2.735]],"o":[[6.306,0.238],[0.768,0.894]],"v":[[-0.876,-10.128],[12.98,-5.34]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[10]},{"t":240,"s":[20]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[80]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"lupa12","parent":8,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[13.639,6.224],[5.844,0],[4.004,-17.574]],"o":[[-4.99,-2.277],[-18.786,0],[-0.24,1.053]],"v":[[16.381,-35.954],[0,-39.5],[-38.514,-8.811]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[13.639,6.224],[5.844,0],[4.004,-17.574]],"o":[[-4.99,-2.277],[-18.786,0],[-0.24,1.053]],"v":[[16.381,-35.954],[0,-39.5],[-38.514,-8.811]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":114,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":140,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[12.021,7.891],[5.649,1.495],[7.159,-11.405]],"o":[[-4.398,-2.887],[-18.161,-4.805],[-0.429,0.683]],"v":[[23.801,-15.061],[8.628,-21.76],[-34.347,-9.907]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[12.021,7.891],[5.649,1.495],[7.159,-11.405]],"o":[[-4.398,-2.887],[-18.161,-4.805],[-0.429,0.683]],"v":[[23.801,-15.061],[8.628,-21.76],[-34.347,-9.907]],"c":false}]},{"t":199,"s":[{"i":[[13.07,5.995],[5.81,0.629],[5.365,-12.351]],"o":[[-4.782,-2.194],[-18.677,-2.022],[-0.321,0.74]],"v":[[18.741,-17.799],[2.734,-22.142],[-37.973,-3.967]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.244577205882,0.244577205882,0.244577205882,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"lupa1","parent":12,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":140,"s":[-10.978]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":158,"s":[39.022]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":184,"s":[39.022]},{"t":199,"s":[-10.978]}]},"p":{"a":0,"k":[0,-74.75,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[23.994,35.979],[-30.941,25.983],[-23.994,-17.794],[30.941,-7.798]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[21.12,2.689],[-2.689,21.12],[-21.12,-2.689],[2.689,-21.12]],"o":[[-21.12,-2.689],[2.689,-21.12],[21.12,2.689],[-2.689,21.12]],"v":[[-4.869,38.24],[-38.24,-4.869],[4.869,-38.24],[38.24,4.869]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[21.12,2.689],[-2.689,21.12],[-21.12,-2.689],[2.689,-21.12]],"o":[[-21.12,-2.689],[2.689,-21.12],[21.12,2.689],[-2.689,21.12]],"v":[[-4.869,38.24],[-38.24,-4.869],[4.869,-38.24],[38.24,4.869]],"c":true}]},{"t":114,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[23.994,35.979],[-30.941,25.983],[-23.994,-17.794],[30.941,-7.798]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.003921568859,0,0,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":12},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"gf","o":{"a":0,"k":100},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0,0.016,0.706,1,0.5,0.016,0.706,1,1,0.016,0.706,1,0,1,0.5,0.5,1,0]}},"s":{"a":0,"k":[-12.358,-89.703]},"e":{"a":0,"k":[42.73,53.2]},"t":1,"nm":"ggg","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":60,"op":240,"st":60,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"lupa14","parent":8,"sr":1,"ks":{"o":{"a":1,"k":[{"t":60,"s":[100],"h":1},{"t":86,"s":[0],"h":1},{"t":100,"s":[100],"h":1}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[25.553,28.511],[-29.382,18.515],[-22.434,-25.262],[32.501,-15.266]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[3.495,-21.533],[21.533,3.495],[-3.495,21.533],[-21.533,-3.495]],"o":[[-3.495,21.533],[-21.533,-3.495],[3.495,-21.533],[21.533,3.495]],"v":[[38.99,6.329],[-6.329,38.99],[-38.99,-6.329],[6.329,-38.99]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[3.495,-21.533],[21.533,3.495],[-3.495,21.533],[-21.533,-3.495]],"o":[[-3.495,21.533],[-21.533,-3.495],[3.495,-21.533],[21.533,3.495]],"v":[[38.99,6.329],[-6.329,38.99],[-38.99,-6.329],[6.329,-38.99]],"c":true}]},{"t":114,"s":[{"i":[[17.088,-9.328],[13.251,14.849],[-17.088,9.328],[-13.251,-14.849]],"o":[[-17.088,9.328],[-13.251,-14.849],[17.088,-9.328],[13.251,14.849]],"v":[[25.553,28.511],[-29.382,18.515],[-22.434,-25.262],[32.501,-15.266]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.243137269862,0.243137269862,0.243137269862,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":12},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":49,"op":260,"st":60,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"lupa13","parent":12,"sr":1,"ks":{"r":{"a":0,"k":93.575},"p":{"a":0,"k":[-1.712,7.87,0]},"s":{"a":0,"k":[73.91,47.016,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[8.996,-2.333],[0.06,-2.922],[-4.267,-1.353]],"o":[[-4.333,1.124],[-0.073,3.546],[7.298,2.313]],"v":[[-0.326,-7.284],[-17.761,0.611],[0.413,9.182]],"c":true}},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.243137269862,0.243137269862,0.243137269862,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":49,"op":262,"st":60,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"lupa9","parent":12,"sr":1,"ks":{"r":{"a":0,"k":-1.786},"p":{"a":0,"k":[-0.764,-24.504,0]},"s":{"a":0,"k":[102.993,97.094,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[6.617,0],[0,-6.617],[-6.617,0],[0,6.617]],"o":[[-6.617,0],[0,6.617],[6.617,0],[0,-6.617]],"v":[[0,-9],[-12,0],[0,9],[12,0]],"c":true}},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.003921568859,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":49,"op":262,"st":60,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"lupa3","parent":1,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[-393.494]},{"t":86,"s":[-360.209],"h":1},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[-360.209]},{"t":114,"s":[-397.201],"h":1},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[-397.201]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[-424.756]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[-424.756]},{"t":199,"s":[-393.494]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[104.319,85.197,0],"to":[0,0,0],"ti":[-26.681,25.197,0]},{"t":86,"s":[155.319,105.197,0],"h":1},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[155.319,105.197,0],"to":[0,0,0],"ti":[-1.181,21.947,0]},{"t":114,"s":[133.319,86.197,0],"h":1},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[133.319,86.197,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[148.319,107.197,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[148.319,107.197,0],"to":[0,0,0],"ti":[0,0,0]},{"t":199,"s":[104.319,85.197,0]}]},"s":{"a":0,"k":[133,133,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[2.537,0],[0,-2.268],[-7.11,0],[0,7.111]],"o":[[-2.537,0],[0,7.111],[7.11,0],[0,-2.268]],"v":[[0,-26],[-12.894,13.105],[0,26],[12.894,13.105]],"c":true}},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.003921568859,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":60,"op":244,"st":60,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"beak","parent":20,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[7.15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[7.15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[-12.915,31.417,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-26.439,51.452,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[-26.439,51.452,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-5.165,30.382,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-5.165,30.382,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-42.822,42.747,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-42.822,42.747,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-12.915,31.417,0]}]},"a":{"a":0,"k":[-12.915,31.417,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-18.269,19.553],[-34.427,35.06]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-18.269,19.553],[-34.427,35.06]],"c":false}]},{"t":200,"s":[{"i":[[4.671,-8.942],[6.306,-2.183]],"o":[[-4.671,8.942],[-6.021,2.084]],"v":[[-17.528,19.391],[-33.686,34.898]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[10]},{"t":240,"s":[20]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[80]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":33},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-46.539,48.211],[28.942,44.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-45.849,55.686],[28.679,46.812]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-45.849,55.686],[28.679,46.812]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-18.521,-1.643],[-18.92,6.968]],"o":[[20.636,1.83],[26.271,-9.675]],"v":[[-36.429,47.028],[20.628,42.399]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-18.521,-1.643],[-18.92,6.968]],"o":[[20.636,1.83],[26.271,-9.675]],"v":[[-36.429,47.028],[20.628,42.399]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-18.165,-3.969],[-23.726,8.4]],"o":[[20.37,4.45],[26.391,-9.343]],"v":[[-53.206,46.398],[31.607,42.075]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-18.165,-3.969],[-23.726,8.4]],"o":[[20.37,4.45],[26.391,-9.343]],"v":[[-53.206,46.398],[31.607,42.075]],"c":false}]},{"t":200,"s":[{"i":[[-17.23,-6.988],[-18.509,12.549]],"o":[[17.23,6.988],[23.172,-15.71]],"v":[[-46.539,48.211],[28.942,44.953]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.490196079016,0.035294119269,0.035294119269,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-63.737,35.599],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[36.502,33.455],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-63.737,35.599],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[36.502,33.455],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-61.63,41.699],[-36.296,26.883],[-12.603,2.992],[11.671,25.576],[38.332,39.329],[-18.316,56.06]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-61.63,41.699],[-36.296,26.883],[-12.603,2.992],[11.671,25.576],[38.332,39.329],[-18.316,56.06]],"c":true}]},{"t":200,"s":[{"i":[[-1.271,15.228],[-10.654,5.625],[-13.947,0.286],[-9.835,-8.372],[-0.32,-6.001],[31.552,-0.32]],"o":[[0.784,-9.387],[13.435,-7.093],[13.822,-0.283],[7.959,6.775],[0.716,13.417],[-24.054,0.244]],"v":[[-62.877,41.75],[-34.815,26.539],[-12.603,2.992],[10.424,25.627],[37.085,39.38],[-18.368,59.833]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.811764717102,0.207843139768,0.007843137719,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.364705890417,0.121568627656,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"eye 3","parent":13,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[12.187]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[12.187]},{"t":114,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[48.31,-3.201,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[49.804,0.784,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[49.804,0.784,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[48.31,-3.201,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[48.31,-3.201,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[54.79,-3.541,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[54.79,-3.541,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[48.31,-3.201,0]}]},"a":{"a":0,"k":[-87.19,4.299,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":68,"s":[-120,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":80,"s":[-90,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":100,"s":[-90,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":114,"s":[-120,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":140,"s":[-120,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":158,"s":[-150,150,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":184,"s":[-150,150,100]},{"t":200,"s":[-120,150,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"t":238,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":1,"k":[{"t":60,"s":[0],"h":1},{"t":79,"s":[100],"h":1},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":103,"s":[100]},{"t":109,"s":[0]}]},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[-5.545,-4.517],[14.097,0.888],[-1.191,13.319],[-14.097,-0.888]],"o":[[-0.283,10.598],[-14.097,-0.888],[5.467,-6.668],[14.097,0.888]],"v":[[-64.054,11.709],[-89.032,33.552],[-112.53,5.083],[-89.032,-4.102]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-5.545,-4.517],[14.097,0.888],[-1.191,13.319],[-14.097,-0.888]],"o":[[-0.283,10.598],[-14.097,-0.888],[5.467,-6.668],[14.097,0.888]],"v":[[-64.054,11.709],[-89.032,33.552],[-112.53,5.083],[-89.032,-4.102]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"t":238,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":103,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":109,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":116,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":142,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[10]},{"t":238,"s":[0]}]},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"eye 2","parent":14,"sr":1,"ks":{"p":{"a":0,"k":[-87.19,4.299,0]},"a":{"a":0,"k":[-87.19,4.299,0]},"s":{"a":0,"k":[66.667,66.667,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.327,-0.293],[5.671,0.02],[-0.327,0.293],[-5.671,-0.02]],"o":[[-0.327,0.293],[-5.671,-0.02],[0.327,-0.293],[5.671,0.02]],"v":[[-78.409,15.362],[-88.778,17.148],[-99.191,15.021],[-87.594,16.087]],"c":true}]},{"t":238,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[0]},{"t":238,"s":[100]}]},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.863,-0.609],[20.392,0.819],[-0.267,0.15],[-15.665,-0.887]],"o":[[-3.412,2.41],[-19.092,-0.767],[1.207,-1.153],[19.396,1.099]],"v":[[-61.665,5.907],[-90.754,17.735],[-112.714,2.691],[-90.258,16.3]],"c":true}]},{"t":238,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[10]},{"t":238,"s":[0]}]},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":153,"op":188,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"eye","parent":13,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[-15.932]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[-15.932]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":140,"s":[-87.19,4.299,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-87.19,4.299,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":184,"s":[-87.19,4.299,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-87.19,4.299,0]}]},"a":{"a":0,"k":[-87.19,4.299,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":140,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":158,"s":[100,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":184,"s":[100,90,100]},{"t":200,"s":[100,100,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[0.327,-0.374],[5.671,0.026],[-0.327,0.374],[-5.671,-0.026]],"o":[[-0.327,0.374],[-5.671,-0.026],[0.327,-0.374],[5.671,0.026]],"v":[[-75.818,7.069],[-86.677,7.7],[-96.354,6.975],[-85.494,6.345]],"c":true}]},{"t":238,"s":[{"i":[[0.327,-5.188],[5.671,0.357],[-0.327,5.188],[-5.671,-0.357]],"o":[[-0.327,5.188],[-5.671,-0.357],[0.327,-5.188],[5.671,0.357]],"v":[[-74.724,-9.46],[-85.584,-0.712],[-95.26,-10.753],[-84.401,-19.5]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1]},"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":103,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":109,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":116,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":142,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":148,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":155,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":184,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":190,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":196,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":211,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":217,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":223,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":226,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[1],"y":[0]},"t":232,"s":[0]},{"t":238,"s":[100]}]},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":103,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":109,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":116,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":142,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":148,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":155,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":190,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":196,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":211,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":217,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":223,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":226,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":232,"s":[{"i":[[1.018,-1.165],[14.097,0.064],[-1.018,1.165],[-14.097,-0.064]],"o":[[-1.018,1.165],[-14.097,-0.064],[1.018,-1.165],[14.097,0.064]],"v":[[-61.665,4.415],[-90.126,10.17],[-112.714,4.183],[-86.441,5.951]],"c":true}]},{"t":238,"s":[{"i":[[1.018,-16.156],[14.097,0.888],[-1.018,16.156],[-14.097,-0.888]],"o":[[-1.018,16.156],[-14.097,-0.888],[1.018,-16.156],[14.097,0.888]],"v":[[-61.665,5.907],[-89.032,33.552],[-112.714,2.691],[-85.347,-24.953]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":103,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":109,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":116,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":142,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":148,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":155,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":190,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":196,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":211,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":217,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":223,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":232,"s":[10]},{"t":238,"s":[0]}]},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"l","parent":18,"sr":1,"ks":{"o":{"a":0,"k":50}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-85.407,-68.958],[123.984,-100.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-85.407,-68.958],[123.984,-100.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-40.622,15.476],[-45.494,-1.491]],"o":[[46.843,-17.846],[35.831,1.174]],"v":[[-160.125,-47.076],[74.286,-94.752]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-40.622,15.476],[-45.494,-1.491]],"o":[[46.843,-17.846],[35.831,1.174]],"v":[[-160.125,-47.076],[74.286,-94.752]],"c":false}]},{"t":200,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-82.243,-74.312],[116.617,-109.405]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-112.851,-83.185],[102.453,-115.713]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-112.851,-83.185],[102.453,-115.713]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-34.805,26.045],[-46.206,-7.019]],"o":[[46.632,-34.896],[35.443,5.384]],"v":[[-170.645,-56.368],[72.969,-110.418]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-34.805,26.045],[-46.206,-7.019]],"o":[[46.632,-34.896],[35.443,5.384]],"v":[[-170.645,-56.368],[72.969,-110.418]],"c":false}]},{"t":200,"s":[{"i":[[-37.743,21.567],[-46.206,-7.019]],"o":[[53.224,-30.414],[35.443,5.384]],"v":[[-108.562,-86.01],[96.731,-121.103]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[14.263,-199.49]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[11.124,-199.848]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[11.124,-199.848]],"c":false}]},{"t":200,"s":[{"i":[[-12.99,19.111],[-46.206,-19.287]],"o":[[25.15,-37.001],[27.791,11.601]],"v":[[-170.56,-149.762],[14.263,-199.49]],"c":false}]}]},"nm":"Path 1","hd":false},{"ind":1,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-18.455,23.134],[-43.866,-24.565]],"o":[[41.527,-52.054],[33.927,18.999]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-15.717,25.074],[-53.787,-21.824]],"o":[[30.266,-48.285],[36.032,14.62]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-15.717,25.074],[-53.787,-21.824]],"o":[[30.266,-48.285],[36.032,14.62]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]},{"t":200,"s":[{"i":[[-18.455,23.134],[-43.866,-24.565]],"o":[[41.527,-52.054],[33.927,18.999]],"v":[[-186.936,-115.254],[41.752,-176.666]],"c":false}]}]},"nm":"Path 2","hd":false},{"ind":2,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-11.056,27.45],[-28.074,-26.905]],"o":[[16.962,-42.111],[28.074,26.905]],"v":[[-193.37,-84.84],[56.959,-151.516]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-11.056,27.45],[-38.093,-21.734]],"o":[[16.962,-42.111],[33.774,19.27]],"v":[[-193.37,-84.84],[54.902,-151.591]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-11.056,27.45],[-38.093,-21.734]],"o":[[16.962,-42.111],[33.774,19.27]],"v":[[-193.37,-84.84],[54.902,-151.591]],"c":false}]},{"t":200,"s":[{"i":[[-11.056,27.45],[-28.074,-26.905]],"o":[[16.962,-42.111],[28.074,26.905]],"v":[[-193.37,-84.84],[56.959,-151.516]],"c":false}]}]},"nm":"Path 3","hd":false},{"ind":3,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-26.905,-5.849],[-15.825,-22.126]],"o":[[26.905,5.849],[7.361,10.292]],"v":[[-12.642,-129.291],[54.996,-86.349]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-26.905,-5.849],[-15.825,-22.126]],"o":[[26.905,5.849],[7.361,10.292]],"v":[[-12.642,-129.291],[54.996,-86.349]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-17.721,-21.072],[-2.787,-16.658]],"o":[[9.064,10.778],[2.088,12.479]],"v":[[-26.811,-119.08],[-9.848,-60.529]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-17.721,-21.072],[-2.787,-16.658]],"o":[[9.064,10.778],[2.088,12.479]],"v":[[-26.811,-119.08],[-9.848,-60.529]],"c":false}]},{"t":200,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-12.642,-129.291],[50.525,-95.953]],"c":false}]}]},"nm":"Path 4","hd":false},{"ind":4,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-26.905,-5.849],[-14.14,-22.007]],"o":[[26.905,5.849],[6.84,10.645]],"v":[[-57.678,-118.763],[11.028,-74.324]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-26.905,-5.849],[-14.14,-22.007]],"o":[[26.905,5.849],[6.84,10.645]],"v":[[-57.678,-118.763],[11.028,-74.324]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-16.495,-22.045],[-2.613,-12]],"o":[[9.824,13.129],[2.692,12.363]],"v":[[-95.482,-104.536],[-68.945,-49.037]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-16.495,-22.045],[-2.613,-12]],"o":[[9.824,13.129],[2.692,12.363]],"v":[[-95.482,-104.536],[-68.945,-49.037]],"c":false}]},{"t":200,"s":[{"i":[[-26.905,-5.849],[-11.698,-11.698]],"o":[[26.905,5.849],[8.947,8.947]],"v":[[-57.678,-118.763],[5.49,-85.425]],"c":false}]}]},"nm":"Path 5","hd":false},{"ind":5,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-26.32,-5.849],[-13.55,-22.627]],"o":[[26.32,5.849],[6.59,11.005]],"v":[[37.073,-132.215],[109.288,-89.439]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-26.32,-5.849],[-13.55,-22.627]],"o":[[26.32,5.849],[6.59,11.005]],"v":[[37.073,-132.215],[109.288,-89.439]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-12.053,-24.118],[1.008,-19.596]],"o":[[7.824,15.655],[-0.659,12.811]],"v":[[35.966,-127.876],[41.414,-71.915]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-12.053,-24.118],[1.008,-19.596]],"o":[[7.824,15.655],[-0.659,12.811]],"v":[[35.966,-127.876],[41.414,-71.915]],"c":false}]},{"t":200,"s":[{"i":[[-26.32,-5.849],[-8.773,-9.358]],"o":[[26.32,5.849],[8.773,9.358]],"v":[[37.073,-132.215],[106.674,-101.217]],"c":false}]}]},"nm":"Path 6","hd":false},{"ind":6,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[-36.267,0],[-10.985,-13.603]],"o":[[36.263,0],[4.944,6.122]],"v":[[-104.468,-104.141],[-32.708,-66.531]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[-36.267,0],[-10.985,-13.603]],"o":[[36.263,0],[4.944,6.122]],"v":[[-104.468,-104.141],[-32.708,-66.531]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-26.525,-24.734],[-4.837,-10.688]],"o":[[13.719,12.793],[3.244,7.169]],"v":[[-147.599,-86.215],[-120.17,-42.085]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-26.525,-24.734],[-4.837,-10.688]],"o":[[13.719,12.793],[3.244,7.169]],"v":[[-147.599,-86.215],[-120.17,-42.085]],"c":false}]},{"t":200,"s":[{"i":[[-36.267,0],[-5.849,-5.264]],"o":[[36.263,0],[5.849,5.264]],"v":[[-104.468,-104.141],[-37.207,-76.652]],"c":false}]}]},"nm":"Path 7","hd":false},{"ind":7,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[7.416,46.618],[16.137,24.206],[-7.06,-56.48]],"o":[[-7.06,-44.377],[27.736,6.556],[7.561,60.487]],"v":[[-49.149,-120.382],[-78.397,-217.205],[-17.379,-128.451]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[7.533,46.599],[-14.397,20.535],[-7.06,-56.48]],"o":[[-10.167,-62.892],[6.093,13.689],[7.561,60.487]],"v":[[-89.526,-108.691],[-85.733,-215.641],[-54.696,-114.332]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[7.533,46.599],[-14.397,20.535],[-7.06,-56.48]],"o":[[-10.167,-62.892],[6.093,13.689],[7.561,60.487]],"v":[[-89.526,-108.691],[-85.733,-215.641],[-54.696,-114.332]],"c":false}]},{"t":200,"s":[{"i":[[7.416,46.618],[16.137,24.206],[-7.06,-56.48]],"o":[[-7.06,-44.377],[27.736,6.556],[7.561,60.487]],"v":[[-49.149,-120.382],[-78.397,-217.205],[-17.379,-128.451]],"c":false}]}]},"nm":"Path 8","hd":false},{"ind":8,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[12.584,45.496],[-6.051,15.633],[-17.146,-58.497]],"o":[[-13.111,-47.403],[48.411,1.009],[17.146,58.497]],"v":[[-79.91,-111.305],[-78.397,-217.205],[20.947,-130.972]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[6.518,46.752],[-13.737,11.667],[-17.146,-58.497]],"o":[[-10.814,-77.558],[34.105,8.652],[17.146,58.497]],"v":[[-127.416,-97.073],[-85.733,-215.641],[-14.964,-122.281]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[6.518,46.752],[-13.737,11.667],[-17.146,-58.497]],"o":[[-10.814,-77.558],[34.105,8.652],[17.146,58.497]],"v":[[-127.416,-97.073],[-85.733,-215.641],[-14.964,-122.281]],"c":false}]},{"t":200,"s":[{"i":[[12.584,45.496],[-6.051,15.633],[-17.146,-58.497]],"o":[[-13.111,-47.403],[48.411,1.009],[17.146,58.497]],"v":[[-79.91,-111.305],[-78.397,-217.205],[20.947,-130.972]],"c":false}]}]},"nm":"Path 9","hd":false},{"ind":9,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[8.444,46.443],[-26.727,31.77],[-17.146,-58.497]],"o":[[-9.077,-49.924],[48.411,1.009],[17.146,58.497]],"v":[[-108.655,-102.228],[-78.397,-217.205],[49.187,-132.485]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[6.306,46.781],[-33.262,23.018],[-19.448,-69.273]],"o":[[-10.72,-79.524],[48.411,1.009],[16.476,58.689]],"v":[[-157.483,-84.625],[-85.733,-215.641],[17.258,-126.701]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[6.306,46.781],[-33.262,23.018],[-19.448,-69.273]],"o":[[-10.72,-79.524],[48.411,1.009],[16.476,58.689]],"v":[[-157.483,-84.625],[-85.733,-215.641],[17.258,-126.701]],"c":false}]},{"t":200,"s":[{"i":[[8.444,46.443],[-26.727,31.77],[-17.146,-58.497]],"o":[[-9.077,-49.924],[48.411,1.009],[17.146,58.497]],"v":[[-108.655,-102.228],[-78.397,-217.205],[49.187,-132.485]],"c":false}]}]},"nm":"Path 10","hd":false},{"ind":10,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-75.361,-217.345],[64.343,-134.615]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-68.272,-215.274],[47.433,-129.046]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-68.272,-215.274],[47.433,-129.046]],"c":false}]},{"t":200,"s":[{"i":[[-33.262,23.018],[-18.998,-64.768]],"o":[[48.411,1.009],[17.158,58.494]],"v":[[-75.361,-217.345],[64.343,-134.615]],"c":false}]}]},"nm":"Path 12","hd":false},{"ind":11,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[7.564,49.924],[-75.139,39.334],[-8.069,-46.394]],"o":[[-7.564,-49.924],[-58.497,27.736],[8.652,49.747]],"v":[[-171.186,-79.535],[-84.953,-215.692],[-146.476,-87.604]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[6.947,50.014],[-75.139,39.334],[-12.637,-82.602]],"o":[[-8.144,-58.636],[-58.497,27.736],[7.636,49.913]],"v":[[-189.839,-68.883],[-92.288,-214.128],[-188.538,-69.384]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[6.947,50.014],[-75.139,39.334],[-12.637,-82.602]],"o":[[-8.144,-58.636],[-58.497,27.736],[7.636,49.913]],"v":[[-189.839,-68.883],[-92.288,-214.128],[-188.538,-69.384]],"c":false}]},{"t":200,"s":[{"i":[[7.564,49.924],[-75.139,39.334],[-8.069,-46.394]],"o":[[-7.564,-49.924],[-58.497,27.736],[8.652,49.747]],"v":[[-171.186,-79.535],[-84.953,-215.692],[-146.476,-87.604]],"c":false}]}]},"nm":"Path 11","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"hat","parent":13,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[7.966]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[7.966]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[9.038]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[9.038]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[9.038]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[9.038]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[-47.404,-118.425,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-44.447,-118.425,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[-44.447,-118.425,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-54.168,-116.535,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-54.168,-116.535,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-4.389,-119.194,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-4.389,-119.194,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-47.404,-118.425,0]}]},"a":{"a":0,"k":[-47.404,-118.425,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[137.247,-82.637],[-50.812,-63.522]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[137.247,-82.637],[-50.812,-63.522]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[0,0],[-54.526,-13.862],[30.754,-6.442],[53.364,-2.788]],"o":[[35.582,-22.564],[4.181,14.748],[-36.021,7.545],[-29.912,1.563]],"v":[[-186.877,-70.488],[70.282,-125.927],[54.177,-76.427],[-137.657,-39.051]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0,0],[-54.526,-13.862],[30.754,-6.442],[53.364,-2.788]],"o":[[35.582,-22.564],[4.181,14.748],[-36.021,7.545],[-29.912,1.563]],"v":[[-186.877,-70.488],[70.282,-125.927],[54.177,-76.427],[-137.657,-39.051]],"c":true}]},{"t":200,"s":[{"i":[[0,0],[-54.526,-13.862],[-6.075,-13.452],[53.373,-2.604]],"o":[[35.582,-22.564],[25.602,6.509],[-39.054,-19.961],[-53.373,2.604]],"v":[[-123.824,-93.176],[78.58,-127.696],[136.503,-92.443],[-51.557,-73.328]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-232.145,-7.387],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-232.145,-7.387],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-0.526,-17.111],[-7.668,4.218]],"o":[[-1.31,-17.201],[-9.81,12.119]],"v":[[-196.6,-16.641],[-188.397,-70.027]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-0.526,-17.111],[-7.668,4.218]],"o":[[-1.31,-17.201],[-9.81,12.119]],"v":[[-196.6,-16.641],[-188.397,-70.027]],"c":true}]},{"t":200,"s":[{"i":[[15.392,-27.972],[-69.503,26.122]],"o":[[-1.824,-33.93],[-31.499,29.545]],"v":[[-231.245,5.52],[-127.994,-93.176]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-22.998,21.696],[-9.113,-102.841],[-32.979,14.32]],"o":[[-58.58,20.395],[36.016,-27.771],[-13.452,-68.127]],"v":[[-80.671,-217.954],[-193.059,-47.854],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-47.535,16.771],[-9.113,-102.841],[-2.975,6.932]],"o":[[-58.58,20.395],[1.368,-7.08],[-4.797,-93.906]],"v":[[-88.467,-216.153],[-195.958,-48.256],[-192.362,-65.858]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-47.535,16.771],[-9.113,-102.841],[-2.975,6.932]],"o":[[-58.58,20.395],[1.368,-7.08],[-4.797,-93.906]],"v":[[-88.467,-216.153],[-195.958,-48.256],[-192.362,-65.858]],"c":true}]},{"t":200,"s":[{"i":[[-22.998,21.696],[-9.113,-102.841],[-32.979,14.32]],"o":[[-58.58,20.395],[36.016,-27.771],[-13.452,-68.127]],"v":[[-80.671,-217.954],[-193.059,-47.854],[-127.994,-93.176]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 3","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-11.839,-56.909]],"o":[[-18.225,-59.448],[-33.846,29.507],[35.582,-13.886]],"v":[[67.298,-128.13],[-80.671,-217.954],[-127.994,-93.176]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-7.88,-81.998]],"o":[[-18.225,-59.448],[-50.796,14.643],[35.582,-13.886]],"v":[[67.298,-128.13],[-88.467,-216.153],[-192.832,-68.061]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-7.88,-81.998]],"o":[[-18.225,-59.448],[-50.796,14.643],[35.582,-13.886]],"v":[[67.298,-128.13],[-88.467,-216.153],[-192.832,-68.061]],"c":true}]},{"t":200,"s":[{"i":[[-40.789,-5.641],[72.9,-6.943],[-11.839,-56.909]],"o":[[-18.225,-59.448],[-33.846,29.507],[35.582,-13.886]],"v":[[67.298,-128.13],[-80.671,-217.954],[-127.994,-93.176]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.511786247702,0.321371818991,0.179668082443,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.843137264252,0.623529434204,0.43137255311,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 4","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[16.848,-22.693],[0.708,10.888],[-32.125,-20.946],[3.87,11.663]],"o":[[-36.45,9.98],[-0.903,-13.883],[29.507,3.038],[-4.216,-12.705]],"v":[[-80.671,-218.821],[-137.516,-223.161],[-80.671,-217.954],[-32.505,-236.179]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":114,"s":[{"i":[[9.996,-26.437],[3.66,10.278],[-36.63,-11.356],[6.914,10.159]],"o":[[-32.328,19.573],[-4.668,-13.107],[29.212,-5.152],[-7.532,-11.067]],"v":[[-78.033,-219.986],[-133.896,-208.606],[-77.795,-219.151],[-36.454,-249.86]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":140,"s":[{"i":[[9.996,-26.437],[3.66,10.278],[-36.63,-11.356],[6.914,10.159]],"o":[[-32.328,19.573],[-4.668,-13.107],[29.212,-5.152],[-7.532,-11.067]],"v":[[-78.033,-219.986],[-133.896,-208.606],[-77.795,-219.151],[-36.454,-249.86]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":158,"s":[{"i":[[16.646,-22.841],[0.805,10.881],[-32.31,-20.66],[3.973,11.629]],"o":[[-36.36,10.303],[-1.026,-13.875],[29.533,2.776],[-4.329,-12.668]],"v":[[-87.485,-217.129],[-145.015,-227.012],[-87.477,-216.261],[-39.475,-234.912]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":184,"s":[{"i":[[16.646,-22.841],[0.805,10.881],[-32.31,-20.66],[3.973,11.629]],"o":[[-36.36,10.303],[-1.026,-13.875],[29.533,2.776],[-4.329,-12.668]],"v":[[-87.485,-217.129],[-145.015,-227.012],[-87.477,-216.261],[-39.475,-234.912]],"c":true}]},{"t":200,"s":[{"i":[[16.848,-22.693],[0.708,10.888],[-32.125,-20.946],[3.87,11.663]],"o":[[-36.45,9.98],[-0.903,-13.883],[29.507,3.038],[-4.216,-12.705]],"v":[[-80.671,-218.821],[-137.516,-223.161],[-80.671,-217.954],[-32.505,-236.179]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.20000000298,0.050980392843,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 5","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"bl","parent":20,"sr":1,"ks":{"p":{"a":0,"k":[-52.629,-26.409,0]},"a":{"a":0,"k":[-52.629,-26.409,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,-29.404],[-15.676,-15.205]],"o":[[0,23.578],[0,0]],"v":[[-170.512,-31.264],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[2.549,-29.293],[-15.676,-15.205]],"o":[[-3.132,35.993],[0,0]],"v":[[-171.005,-45.753],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[2.549,-29.293],[-15.676,-15.205]],"o":[[-3.132,35.993],[0,0]],"v":[[-171.005,-45.753],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[6.103,-28.763],[-15.676,-15.205]],"o":[[-9.551,45.014],[0,0]],"v":[[-169.927,-61.354],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[6.103,-28.763],[-15.676,-15.205]],"o":[[-9.551,45.014],[0,0]],"v":[[-169.927,-61.354],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[3.495,-29.195],[-15.676,-15.205]],"o":[[-3.367,28.123],[0,0]],"v":[[-168.488,-40.42],[-145.487,27.486]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[3.495,-29.195],[-15.676,-15.205]],"o":[[-3.367,28.123],[0,0]],"v":[[-168.488,-40.42],[-145.487,27.486]],"c":false}]},{"t":200,"s":[{"i":[[0,-29.404],[-15.676,-15.205]],"o":[[0,23.578],[0,0]],"v":[[-170.512,-31.264],[-145.487,27.486]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[5.434,10.152]],"o":[[-2.201,-10.956],[-6.376,-11.912]],"v":[[65.253,-48.412],[53.695,-80.305]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,0],[-0.253,11.512]],"o":[[3.465,-10.624],[0.297,-13.507]],"v":[[63.196,2.846],[68.793,-30.612]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-0.253,11.512]],"o":[[3.465,-10.624],[0.297,-13.507]],"v":[[63.196,2.846],[68.793,-30.612]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[1.138,18.195]],"o":[[3.465,-10.624],[-0.843,-13.484]],"v":[[67.417,-7.47],[70.729,-47.35]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[1.138,18.195]],"o":[[3.465,-10.624],[-0.843,-13.484]],"v":[[67.417,-7.47],[70.729,-47.35]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[0,0],[1.392,7.685]],"o":[[3.465,-10.624],[-2.408,-13.294]],"v":[[67.417,-7.47],[69.733,-37.744]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0,0],[1.392,7.685]],"o":[[3.465,-10.624],[-2.408,-13.294]],"v":[[67.417,-7.47],[69.733,-37.744]],"c":false}]},{"t":200,"s":[{"i":[[0,0],[5.434,10.152]],"o":[[-2.201,-10.956],[-6.376,-11.912]],"v":[[65.253,-48.412],[53.695,-80.305]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.988235294118,0.933333333333,0.129411764706,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84.834,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":97.666,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":110.5,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":123.334,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":136.166,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":149,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":161.834,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":174.666,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":187.5,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200.334,"s":[20]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":213.166,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[10]},{"t":240,"s":[20]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84.834,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":97.666,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":110.5,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":123.334,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":136.166,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":149,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":161.834,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":174.666,"s":[90]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":187.5,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200.334,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":213.166,"s":[70]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":226,"s":[90]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"head","parent":23,"sr":1,"ks":{"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":68,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":80,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":100,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":114,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":158,"s":[3]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":184,"s":[3]},{"t":200,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[-51.557,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":80,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":100,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":114,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-31.842,48.045,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-51.808,68.205,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-51.808,68.205,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-51.557,48.045,0]}]},"a":{"a":0,"k":[-51.557,48.045,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[0,0],[-1.695,32.329],[-76.826,-4.029],[3.602,-73.333],[25.522,-14]],"o":[[-22.882,-20.972],[3.602,-68.679],[76.825,4.029],[-1.7,34.614],[0,0]],"v":[[-156.075,45.152],[-189.706,-36.438],[-43.454,-165.43],[88.504,-17.195],[42.763,64]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-1.695,32.329],[-76.826,-4.029],[3.602,-73.333],[25.522,-14]],"o":[[-22.882,-20.972],[3.602,-68.679],[76.825,4.029],[-1.7,34.614],[0,0]],"v":[[-156.075,45.152],[-189.706,-36.438],[-43.454,-165.43],[88.504,-17.195],[42.763,64]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":140,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":158,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-188.36,-31.803],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0.167},"t":184,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-188.36,-31.803],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]},{"t":200,"s":[{"i":[[0,0],[0,32.374],[-76.932,0],[0,-68.773],[23.65,-19.591]],"o":[[-23.949,-19.745],[0,-68.773],[76.931,0],[0,32.461],[0,0]],"v":[[-152.996,48.045],[-190.852,-31.672],[-51.556,-168.145],[87.739,-31.672],[50.112,47.854]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"hat","parent":18,"sr":1,"ks":{"p":{"a":0,"k":[-47.11,-53.437,0]},"a":{"a":0,"k":[-47.11,-53.437,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":80,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.946,-7.398],[-103.67,-102.529],[136.553,-82.368]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.946,-7.398],[-103.67,-102.529],[136.553,-82.368]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":148,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-87.658,31.247],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[85.165,-30.645],[5.641,23.432]],"v":[[-55.937,-7.498],[-214.85,1.06],[-103.67,-102.529],[103.731,-89.814]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-94.338,22.759],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[88.359,-21.317],[5.641,23.432]],"v":[[-55.938,-7.498],[-194.634,-4.689],[-103.67,-102.529],[69.005,-82.074]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-94.338,22.759],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[88.359,-21.317],[5.641,23.432]],"v":[[-55.937,-7.498],[-194.634,-4.689],[-103.67,-102.529],[69.005,-82.074]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":191,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-89.678,28.681],[-8.427,-35.003]],"o":[[-41.863,13.464],[-4.361,-14.174],[86.131,-27.825],[5.641,23.432]],"v":[[-55.937,-7.498],[-207.921,-0.825],[-103.67,-102.529],[91.371,-88.691]],"c":true}]},{"t":200,"s":[{"i":[[86.352,-27.771],[8.679,28.205],[-82.88,37.318],[-8.427,-35.003]],"o":[[-41.863,13.463],[-4.361,-14.174],[82.88,-37.318],[5.641,23.432]],"v":[[-55.937,-7.498],[-231.245,5.52],[-103.67,-102.529],[137.088,-90.689]],"c":true}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.513725490196,0.321568627451,0.180392156863,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[0.543997970282,0.357340584549,0.225831963034,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"bl 2","parent":23,"sr":1,"ks":{},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-0.843,28.658],[0,0]],"o":[[0.843,-28.658],[0,0]],"v":[[-167.357,135.684],[-157.242,85.112]],"c":false}},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[11.029,3.102],[6.438,7.684]],"o":[[-13.432,-3.778],[0,0]],"v":[[-130.953,180.023],[-161.823,163.043]],"c":false}},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.988235294819,0.933333337307,0.129411771894,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[0]},{"t":240,"s":[5]}]},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":84,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":96,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":108,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":120,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":132,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":144,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":156,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":168,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":180,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":192,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":204,"s":[95]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":216,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":228,"s":[95]},{"t":240,"s":[100]}]},"o":{"a":0,"k":0},"m":1,"nm":"Trim Paths 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":23,"ty":4,"nm":"body","parent":1,"sr":1,"ks":{"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[-45.494,205.212,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":158,"s":[-15.494,205.212,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[-15.494,205.212,0],"to":[0,0,0],"ti":[0,0,0]},{"t":200,"s":[-45.494,205.212,0]}]},"a":{"a":0,"k":[-45.494,205.212,0]},"s":{"a":1,"k":[{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":68,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":76,"s":[102,95.355,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.329,0.329,0.329],"y":[-0.09,0.26,0]},"t":88,"s":[100,100,100]},{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":100,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":108,"s":[102,95.355,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.338,0.338,0.338],"y":[-0.154,0.445,0]},"t":120,"s":[100,100,100]},{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":140,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":148,"s":[102,95.355,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.329,0.329,0.329],"y":[0,0,0]},"t":160,"s":[100,100,100]},{"i":{"x":[0.595,0.595,0.595],"y":[1,1,1]},"o":{"x":[0.254,0.254,0.254],"y":[0,0,0]},"t":184,"s":[100,100,100]},{"i":{"x":[0.661,0.661,0.661],"y":[0.954,0.942,1]},"o":{"x":[0.29,0.29,0.29],"y":[0,0,0]},"t":192,"s":[102,95.355,100]},{"t":204,"s":[100,100,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[1.646,0.836],[0,0],[-2.946,-112.778],[-0.629,66.814]],"o":[[0,0],[-8.121,0.134],[1.826,69.905],[0.954,-101.238]],"v":[[38.926,20.582],[-114.066,12.715],[-183.077,154.202],[92.175,153.658]],"c":true}},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 1","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":24,"ty":4,"nm":"wing 2","parent":23,"sr":1,"ks":{"p":{"a":0,"k":[71,76,0]},"a":{"a":0,"k":[-109,126,0]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":68,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[30.987,-12.116],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-59.014,119.247],[-115.779,169.389]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":86,"s":[{"i":[[0,0],[-8.57,-6.834],[34.687,10.569]],"o":[[38.36,8.962],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-29.442,133.219],[-113.807,178.704]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":100,"s":[{"i":[[0,0],[-8.57,-6.834],[34.687,10.569]],"o":[[38.36,8.962],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-29.442,133.219],[-113.807,178.704]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":114,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[44.484,25.593],[23.514,18.753],[0,0]],"v":[[-111.046,122.951],[-39.209,120.782],[-95.478,173.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":140,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[44.484,25.593],[23.514,18.753],[0,0]],"v":[[-111.046,122.951],[-39.209,120.782],[-95.478,173.995]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":158,"s":[{"i":[[0,0],[-5.843,-9.274],[31.779,2.611]],"o":[[39.281,-11.049],[7.375,11.705],[0,0]],"v":[[-130.512,136.005],[-68.159,138.356],[-111.95,187.05]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":184,"s":[{"i":[[0,0],[-5.843,-9.274],[31.779,2.611]],"o":[[39.281,-11.049],[7.375,11.705],[0,0]],"v":[[-130.512,136.005],[-68.159,138.356],[-111.95,187.05]],"c":false}]},{"t":199,"s":[{"i":[[0,0],[-8.57,-6.834],[31.779,2.611]],"o":[[30.987,-12.116],[23.514,18.753],[0,0]],"v":[[-116.987,130.116],[-59.014,119.247],[-115.779,169.389]],"c":false}]}]},"nm":"Path 1","hd":false},{"ty":"st","c":{"a":0,"k":[0.980392158031,0.564705908298,0.086274512112,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.835294127464,0.152941182256,1]},"o":{"a":0,"k":100},"r":1,"bm":0,"nm":"Fill 1","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0},"nm":"Transform"}],"nm":"Group 2","bm":0,"hd":false}],"ip":0,"op":300,"st":0,"bm":0}]}
\ No newline at end of file
diff --git a/app/src/features/profile-info/ProfileInfo.tsx b/app/src/features/profile-info/ProfileInfo.tsx
index a246b67c..aa517297 100644
--- a/app/src/features/profile-info/ProfileInfo.tsx
+++ b/app/src/features/profile-info/ProfileInfo.tsx
@@ -1,7 +1,6 @@
 import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
 import styled from "styled-components";
 import ProfileItem from "./components/ProfileItem";
-import { getIcon } from "@data/icons";
 
 const ProfileInfoStyled = styled.div`
   border-bottom: 0.625rem solid var(--color-background-secondary);
@@ -45,7 +44,7 @@ function ProfileInfo() {
         <ProfileItem
           data={profileSettings.bio}
           ribbon="Bio"
-          icon="info"
+          icon="Info"
           data-testid="bio-profile-item"
         />
       )}
diff --git a/app/src/features/search/components/NoResultsFound.tsx b/app/src/features/search/components/NoResultsFound.tsx
new file mode 100644
index 00000000..70c80d9e
--- /dev/null
+++ b/app/src/features/search/components/NoResultsFound.tsx
@@ -0,0 +1,44 @@
+import Lottie from "lottie-react";
+import styled from "styled-components";
+import noResultsAnimation from "@data/animations/not_found.json";
+
+const NoResultsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding-bottom: 2rem;
+`;
+
+const NoResultsIcon = styled.div`
+  --icon-size: 8rem;
+  width: var(--icon-size);
+  height: var(--icon-size);
+`;
+
+const NoResultsText = styled.p`
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+`;
+
+const NoResultsSubText = styled.p`
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+`;
+
+const NoResultsFound: React.FC = () => {
+  return (
+    <NoResultsContainer>
+      <NoResultsIcon>
+        <Lottie animationData={noResultsAnimation} />
+      </NoResultsIcon>
+      <NoResultsText>No results found</NoResultsText>
+      <NoResultsSubText>Try searching for something else</NoResultsSubText>
+    </NoResultsContainer>
+  );
+};
+
+export default NoResultsFound;
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index 54e584c8..b7d87cdb 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -74,10 +74,10 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   const dispatch = useDispatch();
   const chatId = useParams<{ chatId: string }>().chatId;
   const { searchTerm, searchResults, currentResultIndex } = useSelector(
-    (state: RootState) => state.search
+    (state: RootState) => state.search,
   );
   const currentChat = useSelector((state: RootState) =>
-    state.chats.chats.find((chat) => chat._id === chatId)
+    state.chats.chats.find((chat) => chat._id === chatId),
   );
   const messages = currentChat?.messages ?? [];
 
@@ -90,22 +90,31 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
       return;
     }
 
-    const results = messages.reduce<{ messageId: string; highlightIndex: number }[]>((acc, message) => {
-      const lowerCaseTerm = term.toLowerCase();
-      const lowerCaseContent = message.content.toLowerCase();
-
-      if (lowerCaseContent.includes(lowerCaseTerm)) {
-        const matchIndices = findAllMatchIndices(message.content, term);
-        matchIndices.forEach((highlightIndex) => {
-          acc.push({
-            messageId: message._id,
-            highlightIndex,
+    const results = messages.reduce(
+      (
+        acc: Array<{
+          messageId: string;
+          highlightIndex: number;
+        }>,
+        message,
+      ) => {
+        const lowerCaseTerm = term.toLowerCase();
+        const lowerCaseContent = message.content.toLowerCase();
+
+        if (lowerCaseContent.includes(lowerCaseTerm)) {
+          const matchIndices = findAllMatchIndices(message.content, term);
+          matchIndices.forEach((highlightIndex) => {
+            acc.push({
+              messageId: message._id,
+              highlightIndex,
+            });
           });
-        });
-      }
+        }
 
-      return acc;
-    }, []);
+        return acc;
+      },
+      [],
+    );
 
     dispatch(setSearchTerm(term));
     dispatch(setSearchResults(results));
diff --git a/app/src/features/search/components/TabedSearch.tsx b/app/src/features/search/components/TabedSearch.tsx
index 198d7733..1d783c15 100644
--- a/app/src/features/search/components/TabedSearch.tsx
+++ b/app/src/features/search/components/TabedSearch.tsx
@@ -2,7 +2,7 @@ import { RootState } from "@state/store";
 import { motion, AnimatePresence, LayoutGroup } from "motion/react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-import { SEARCH_TABS } from "../data/tabs-components-map";
+import { SEARCH_TABS_MOCK } from "../data/tabs-components-map";
 import { setSelectedTab } from "@state/messages/global-search";
 
 const TabedSearchContainer = styled(motion.div)`
@@ -78,7 +78,7 @@ const TabedSearch: React.FC = () => {
         >
           <LayoutGroup>
             <TabListWrapper>
-              {SEARCH_TABS.map((tab) => (
+              {SEARCH_TABS_MOCK.map((tab) => (
                 <TabButton
                   key={tab.title}
                   onClick={() => dispatch(setSelectedTab(tab.title))}
@@ -106,7 +106,7 @@ const TabedSearch: React.FC = () => {
                 exit={{ opacity: 0 }}
                 transition={{ type: "tween", duration: 0.2 }}
               >
-                {SEARCH_TABS.find(
+                {SEARCH_TABS_MOCK.find(
                   (tab) => tab.title === selectedTab,
                 )?.component()}
               </TabContent>
diff --git a/app/src/features/search/components/tabs/MessagesTab.tsx b/app/src/features/search/components/tabs/MessagesTab.tsx
new file mode 100644
index 00000000..dba14faf
--- /dev/null
+++ b/app/src/features/search/components/tabs/MessagesTab.tsx
@@ -0,0 +1,34 @@
+import { RootState } from "@state/store";
+import { useSelector } from "react-redux";
+import MessageResult from "../result-items/MessageResult";
+import NoResultsFound from "../NoResultsFound";
+
+const MESSAGES = [
+  {
+    title: "Telware Testing",
+    date: new Date().toString(),
+    image: "https://placecats.com/200/200",
+    message: "Hello hi there",
+  },
+];
+
+const MessagesTab: React.FC = () => {
+  const { searchTerm } = useSelector((state: RootState) => state.globalSearch);
+
+  return (
+    <div style={{ height: "100%" }}>
+      {MESSAGES.length === 0 && <NoResultsFound />}
+      {MESSAGES.map((message) => (
+        <MessageResult
+          searchTerm={searchTerm}
+          message={message.message}
+          title={message.title}
+          date={message.date}
+          image={message.image}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default MessagesTab;
diff --git a/app/src/features/search/data/tabs-components-map.tsx b/app/src/features/search/data/tabs-components-map.tsx
index d84f8266..81311ee4 100644
--- a/app/src/features/search/data/tabs-components-map.tsx
+++ b/app/src/features/search/data/tabs-components-map.tsx
@@ -1,8 +1,40 @@
+import NoResultsFound from "../components/NoResultsFound";
 import AudioResult from "../components/result-items/AudioResult";
 import ChannelResult from "../components/result-items/ChannelResult";
 import FileResult from "../components/result-items/FileResult";
 import MessageResult from "../components/result-items/MessageResult";
+import MessagesTab from "../components/tabs/MessagesTab";
 
+export const SEARCH_TABS_MOCK = [
+  {
+    title: "Chats",
+    component: () => <MessagesTab />,
+  },
+  {
+    title: "Channnels",
+    component: () => <NoResultsFound />,
+  },
+  {
+    title: "Media",
+    component: () => <NoResultsFound />,
+  },
+  {
+    title: "Links",
+    component: () => <NoResultsFound />,
+  },
+  {
+    title: "Files",
+    component: () => <NoResultsFound />,
+  },
+  {
+    title: "Music",
+    component: () => <NoResultsFound />,
+  },
+  {
+    title: "Voice",
+    component: () => <NoResultsFound />,
+  },
+];
 export const SEARCH_TABS = [
   {
     title: "Chats",
@@ -107,16 +139,7 @@ export const SEARCH_TABS = [
   },
   {
     title: "Files",
-    component: () => (
-      <div>
-        <FileResult
-          title="Telware Testing"
-          image="https://www.svgrepo.com/show/144578/pdf.svg"
-          size="20"
-          date={new Date().toString()}
-        />
-      </div>
-    ),
+    component: () => <NoResultsFound />,
   },
   {
     title: "Music",
diff --git a/app/src/state/messages/global-search.ts b/app/src/state/messages/global-search.ts
index a5ee813d..10ccec7d 100644
--- a/app/src/state/messages/global-search.ts
+++ b/app/src/state/messages/global-search.ts
@@ -14,6 +14,10 @@ const globalSearchSlice = createSlice({
   name: "globalSearch",
   initialState,
   reducers: {
+    clearSearch: (state) => {
+      state.searchTerm = "";
+      state.selectedTab = "Chats";
+    },
     setSearchTerm: (state, action: PayloadAction<string>) => {
       state.searchTerm = action.payload;
     },
@@ -23,5 +27,6 @@ const globalSearchSlice = createSlice({
   },
 });
 
-export const { setSearchTerm, setSelectedTab } = globalSearchSlice.actions;
+export const { setSearchTerm, setSelectedTab, clearSearch } =
+  globalSearchSlice.actions;
 export default globalSearchSlice.reducer;

From b8abb6674a7b189e366cdc68db9ba0f266a198e4 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sun, 15 Dec 2024 23:26:34 +0200
Subject: [PATCH 087/136] :sparkles: (sidebar): introducing right sidebar from
 same component (#126)

---
 app/src/components/AppLayout.tsx              |  24 +++-
 app/src/components/BackArrow.tsx              |  10 +-
 app/src/components/UsersList.tsx              |   5 +-
 app/src/components/side-bar/SideBar.tsx       | 111 ++++++++++--------
 .../components/side-bar/SideBarContext.tsx    |  13 ++
 .../side-bar/chats/SideBarToolsButton.tsx     |  12 +-
 .../side-bar/settings/OptionsList.tsx         |  10 +-
 .../settings/SettingsSideBarHeader.tsx        |  14 ++-
 .../settings/side-bar-row/SideBarRow.tsx      |  13 +-
 .../settings/side-bar-row/getDataFactory.ts   |  12 +-
 app/src/features/chats/StartNewChat.tsx       |   6 +-
 app/src/features/chats/Topbar.tsx             |  16 ++-
 app/src/features/groups/CreateGroupForm.tsx   |  10 +-
 .../features/privacy-settings/BlockList.tsx   |   8 +-
 .../profile-settings/ProfileSettings.tsx      |  10 +-
 app/src/state/side-bar/sideBar.ts             |  42 +++----
 16 files changed, 207 insertions(+), 109 deletions(-)
 create mode 100644 app/src/components/side-bar/SideBarContext.tsx

diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index 1f826e0b..98e543c9 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -3,8 +3,12 @@ import styled from "styled-components";
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
 import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import { useState } from "react";
 
-const StyledApp = styled.div<{ $isChatOpen: boolean }>`
+const StyledApp = styled.div<{
+  $isChatOpen: boolean;
+  $isRightSideBarOpen: boolean;
+}>`
   @media ${MOBILE_VIEW} {
     & > main {
       display: ${({ $isChatOpen }) => ($isChatOpen ? "contents" : "none")};
@@ -17,7 +21,10 @@ const StyledApp = styled.div<{ $isChatOpen: boolean }>`
 
   @media ${DESKTOP_VIEW} {
     display: grid;
-    grid-template-columns: minmax(20rem, 2.5fr) 5fr;
+    grid-template-columns: ${({ $isRightSideBarOpen }) =>
+      $isRightSideBarOpen ? "1.5fr 3fr 1.5fr" : "1.5fr 4.5fr"};
+
+    overflow-x: hidden;
 
     & > main {
       display: block;
@@ -34,12 +41,19 @@ function AppLayout() {
 
   const isChatOpen = !!chatId;
 
+  const [showRightSideBar, setShowRightSideBar] = useState<boolean>(false);
+
   return (
-    <StyledApp $isChatOpen={isChatOpen} data-testid="app-layout">
-      <SideBar />
+    <StyledApp
+      $isChatOpen={isChatOpen}
+      data-testid="app-layout"
+      $isRightSideBarOpen={showRightSideBar}
+    >
+      <SideBar type="left" />
       <Main>
-        <Outlet />
+        <Outlet context={{ setShowRightSideBar, showRightSideBar }} />
       </Main>
+      {showRightSideBar && <SideBar type="right" />}
     </StyledApp>
   );
 }
diff --git a/app/src/components/BackArrow.tsx b/app/src/components/BackArrow.tsx
index c62ba7a2..fecbda3b 100644
--- a/app/src/components/BackArrow.tsx
+++ b/app/src/components/BackArrow.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { getIcon } from "@data/icons";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { updateSideBarView } from "@state/side-bar/sideBar";
+import { useSidebarType } from "./side-bar/SideBarContext";
 
 const StyledArrow = styled.div`
   width: 30px;
@@ -20,14 +21,19 @@ const StyledArrow = styled.div`
 
 function BackArrow() {
   const dispatch = useAppDispatch();
-  const { backView } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
+  const { backView } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
 
   return (
     <StyledArrow
       data-testid="back-arrow-icon"
       onClick={() =>
         backView !== undefined &&
-        dispatch(updateSideBarView({ redirect: backView }))
+        dispatch(updateSideBarView({ redirect: backView, data: { type } }))
       }
     >
       {getIcon("BackArrow")}
diff --git a/app/src/components/UsersList.tsx b/app/src/components/UsersList.tsx
index e298b124..d6b47df0 100644
--- a/app/src/components/UsersList.tsx
+++ b/app/src/components/UsersList.tsx
@@ -10,6 +10,7 @@ import { updateSideBarView } from "@state/side-bar/sideBar";
 
 import { useAllUsers } from "@features/groups/hooks/useAllUsers";
 import { useUser } from "@features/authentication/login/hooks/useUser";
+import { useSidebarType } from "./side-bar/SideBarContext";
 
 const Container = styled.div`
   width: 100%;
@@ -39,13 +40,13 @@ function UsersList({ type }: { type: "channel" | "group" }) {
   const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
   const [searchQuery, setSearchQuery] = useState<string>("");
   const dispatch = useAppDispatch();
-
+  const sideBarType = useSidebarType();
   if (isPendenigAllUsers || isPendingCurrentUser) return null;
 
   function handleClick() {
     const redirect =
       type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
-    dispatch(updateSideBarView({ redirect }));
+    dispatch(updateSideBarView({ redirect, data: { type: sideBarType } }));
   }
 
   const filteredUsers = users?.filter(
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 86968975..df837d92 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -19,6 +19,7 @@ import { useAppSelector } from "@hooks/useGlobalState";
 import BlockList from "@features/privacy-settings/BlockList";
 import Devices from "@features/devices/Devices";
 import NewGroup from "@features/groups/NewGroup.js";
+import { SidebarContext } from "./SideBarContext.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -65,57 +66,63 @@ const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   }
 `;
 
-const sideBarMap: { [key: string]: (props: SideBarProps) => React.ReactNode } =
-  {
-    Chats: () => (
-      <ChatsSideBar>
-        <ChatList />
-      </ChatsSideBar>
-    ),
-    Contacts: () => <ContactsSideBar />,
-    Settings: (props) => (
-      <SettingsSideBar rows={props.rows || []}>
-        <ProfilePicture />
-        <ProfileInfo />
-      </SettingsSideBar>
-    ),
-    Privacy: (props) => <SettingsSideBar rows={props.rows || []} />,
-    SettingsUpdate: (props) => (
-      <SettingsSideBar rows={[]}>
-        {props.data && <SettingsUpdate {...props.data} />}
-      </SettingsSideBar>
-    ),
-    ProfileUpdate: () => <ProfileSettings />,
-    blockList: () => (
-      <SettingsSideBar rows={[]}>
-        <BlockList />
-      </SettingsSideBar>
-    ),
-    Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
-    AddMembers: (props) => (
-      <SettingsSideBar rows={[]}>
-        <AddGroupMembers type={props.data?.type!} />
-      </SettingsSideBar>
-    ),
-    NewGroup: () => (
-      <SettingsSideBar rows={[]}>
-        <NewGroup type="group" />
-      </SettingsSideBar>
-    ),
-    NewChannel: () => (
-      <SettingsSideBar rows={[]}>
-        <NewGroup type="channel" />
-      </SettingsSideBar>
-    ),
-  };
-
-function Sidebar() {
-  const { page, props } = useAppSelector((state) => state.sideBarData);
+const sideBarMap: {
+  [key: string]: (
+    props: SideBarProps,
+    type: "left" | "right"
+  ) => React.ReactNode;
+} = {
+  Chats: () => (
+    <ChatsSideBar>
+      <ChatList />
+    </ChatsSideBar>
+  ),
+  Contacts: () => <ContactsSideBar />,
+  Settings: (props) => (
+    <SettingsSideBar rows={props.rows || []}>
+      <ProfilePicture />
+      <ProfileInfo />
+    </SettingsSideBar>
+  ),
+  Privacy: (props) => <SettingsSideBar rows={props.rows || []} />,
+  SettingsUpdate: (props) => (
+    <SettingsSideBar rows={[]}>
+      {props.data && <SettingsUpdate {...props.data} />}
+    </SettingsSideBar>
+  ),
+  ProfileUpdate: () => <ProfileSettings />,
+  blockList: () => (
+    <SettingsSideBar rows={[]}>
+      <BlockList />
+    </SettingsSideBar>
+  ),
+  Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
+  AddMembers: (props) => (
+    <SettingsSideBar rows={[]}>
+      <AddGroupMembers type={props.data?.type!} />
+    </SettingsSideBar>
+  ),
+  NewGroup: () => (
+    <SettingsSideBar rows={[]}>
+      <NewGroup type="group" />
+    </SettingsSideBar>
+  ),
+  NewChannel: () => (
+    <SettingsSideBar rows={[]}>
+      <NewGroup type="channel" />
+    </SettingsSideBar>
+  ),
+};
+
+function Sidebar({ type }: { type: "left" | "right" }) {
+  const { page, props } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   const [currentPage, setCurrentPage] = useState(page);
   const [isExiting, setIsExiting] = useState(false);
 
-  console.log(currentPage);
-
   useEffect(() => {
     if (currentPage !== page) {
       setIsExiting(true);
@@ -133,9 +140,11 @@ function Sidebar() {
   const pageString = pagesMap[currentPage] || "Settings";
 
   return (
-    <StyledSidebar $isExiting={isExiting} data-testid="side-bar">
-      {sideBarMap[pageString](props || {})}
-    </StyledSidebar>
+    <SidebarContext.Provider value={type}>
+      <StyledSidebar $isExiting={isExiting} data-testid={`${type}-side-bar`}>
+        {sideBarMap[pageString](props!, type)}
+      </StyledSidebar>
+    </SidebarContext.Provider>
   );
 }
 
diff --git a/app/src/components/side-bar/SideBarContext.tsx b/app/src/components/side-bar/SideBarContext.tsx
new file mode 100644
index 00000000..d25f857b
--- /dev/null
+++ b/app/src/components/side-bar/SideBarContext.tsx
@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+type SidebarType = "left" | "right";
+
+export const SidebarContext = createContext<SidebarType | undefined>(undefined);
+
+export const useSidebarType = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarType must be used within a SidebarProvider");
+  }
+  return context;
+};
diff --git a/app/src/components/side-bar/chats/SideBarToolsButton.tsx b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
index 5f7b6dd8..11c95e25 100644
--- a/app/src/components/side-bar/chats/SideBarToolsButton.tsx
+++ b/app/src/components/side-bar/chats/SideBarToolsButton.tsx
@@ -8,6 +8,7 @@ import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "@data/sideBar";
 import { useMouseLeave } from "@hooks/useMouseLeave";
 import { getIcon } from "@data/icons";
+import { useSidebarType } from "../SideBarContext";
 import { RootState } from "@state/store";
 import { clearSearch } from "@state/messages/global-search";
 import { useSelector } from "react-redux";
@@ -58,6 +59,9 @@ function SettingsToolbar() {
     dispatch(clearSearch());
   };
 
+
+  const type = useSidebarType();
+
   return (
     <>
       <ToolsIcon
@@ -83,8 +87,8 @@ function SettingsToolbar() {
               dispatch(
                 updateSideBarView({
                   redirect: sideBarPages.CONTACTS,
-                  data: undefined,
-                }),
+                  data: { type },
+                })
               )
             }
           />
@@ -96,8 +100,8 @@ function SettingsToolbar() {
               dispatch(
                 updateSideBarView({
                   redirect: sideBarPages.SETTINGS,
-                  data: undefined,
-                }),
+                  data: { type },
+                })
               )
             }
           />
diff --git a/app/src/components/side-bar/settings/OptionsList.tsx b/app/src/components/side-bar/settings/OptionsList.tsx
index 93a4c034..d6ea940f 100644
--- a/app/src/components/side-bar/settings/OptionsList.tsx
+++ b/app/src/components/side-bar/settings/OptionsList.tsx
@@ -9,6 +9,7 @@ import {
   StatusType,
 } from "types/sideBar";
 import { statusMap } from "@data/sideBar";
+import { useSidebarType } from "../SideBarContext";
 
 const StyledOptionsList = styled.div`
   display: flex;
@@ -32,7 +33,7 @@ function getKey(
     | permissionSettingsID
     | undefined,
   type: StatusType | undefined,
-  index: number,
+  index: number
 ) {
   let key;
   if (status !== undefined && type !== undefined) {
@@ -48,8 +49,13 @@ function getKey(
 }
 
 function OptionsList({ rows }: { rows: SideBarRowProps[] }) {
-  const { title } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
 
+  const { title } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   return (
     <>
       {rows.length > 0 && (
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index 73ae870e..d84406f0 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -6,6 +6,7 @@ import CircleIcon from "@components/CircleIcon";
 import { useLogout } from "@features/authentication/logout/hooks/useLogout";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
+import { useSidebarType } from "../SideBarContext";
 
 const StyledSideBarHeader = styled.div`
   height: 4rem !important;
@@ -32,7 +33,13 @@ const IconsContainer = styled.div`
 `;
 
 function SettingsSideBarHeader() {
-  const { title } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
+
+  const { title } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   const { logout } = useLogout();
   const dispatch = useAppDispatch();
 
@@ -53,7 +60,10 @@ function SettingsSideBarHeader() {
             $bgColor="var(--color-pattern)"
             onClick={() =>
               dispatch(
-                updateSideBarView({ redirect: sideBarPages.PROFILE_UPDATE })
+                updateSideBarView({
+                  redirect: sideBarPages.PROFILE_UPDATE,
+                  data: { type },
+                })
               )
             }
           />
diff --git a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
index 284d270c..ce4d20ee 100644
--- a/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
+++ b/app/src/components/side-bar/settings/side-bar-row/SideBarRow.tsx
@@ -17,6 +17,7 @@ import {
   privacySettingsInterface,
 } from "types/user";
 import { DataInterface, ExtractData } from "./getDataFactory";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const StyledSideBarRow = styled.div`
   height: 4rem;
@@ -83,6 +84,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
 
   const dataExtractor: DataInterface = ExtractData(type, currStatus, status);
   const data = dataExtractor.getData();
+  const sideBarType = useSidebarType();
 
   useEffect(() => {
     if (status !== undefined && type !== undefined) {
@@ -95,7 +97,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
             setCurrStatus(
               userData?.privacySettings?.[
                 key as keyof privacySettingsInterface
-              ] || "everyone",
+              ] || "everyone"
             );
           break;
         case StatusType.ACTIVITY:
@@ -103,7 +105,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
           setCurrStatus(
             userData?.activitySettings?.[
               key as keyof activitySettingsInterface
-            ] || "everyone",
+            ] || "everyone"
           );
           break;
         case StatusType.PERMISSION:
@@ -111,7 +113,7 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
           setCurrStatus(
             userData?.permissionSettings?.[
               key as keyof permissionsSettingsInterface
-            ] || "everyone",
+            ] || "everyone"
           );
           break;
         default:
@@ -127,7 +129,10 @@ function SideBarRow({ redirect, icon, title, status, type }: SideBarRowProps) {
   return (
     <StyledSideBarRow
       onClick={() =>
-        redirect && dispatch(updateSideBarView({ redirect, data }))
+        redirect &&
+        dispatch(
+          updateSideBarView({ redirect, data: { ...data, type: sideBarType } })
+        )
       }
       data-testid={key && `menu-item-${key}`}
     >
diff --git a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
index 2617b509..c7f2a890 100644
--- a/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
+++ b/app/src/components/side-bar/settings/side-bar-row/getDataFactory.ts
@@ -17,7 +17,7 @@ function ExtractData(
     | privacySettingsID
     | activitySettingsID
     | permissionSettingsID
-    | undefined,
+    | undefined
 ): DataInterface {
   switch (type) {
     case StatusType.PRIVACY:
@@ -27,17 +27,17 @@ function ExtractData(
     case StatusType.PERMISSION:
       return getPermissionData(itemStatus as permissionSettingsID, currStatus);
     default:
-      return { getData: () => {} };
+      return { getData: () => ({}) };
   }
 }
 
 interface DataInterface {
-  getData: () => void;
+  getData: () => object;
 }
 
 function getPrivacyData(
   privacyStatus: privacySettingsID | undefined,
-  currStatus: string | undefined,
+  currStatus: string | undefined
 ): DataInterface {
   return {
     getData: () => {
@@ -78,7 +78,7 @@ function getPrivacyData(
 
 function getActivityData(
   activityStatus: activitySettingsID | undefined,
-  currStatus: string | undefined,
+  currStatus: string | undefined
 ): DataInterface {
   return {
     getData: () => {
@@ -119,7 +119,7 @@ function getActivityData(
 
 function getPermissionData(
   permissionStatus: permissionSettingsID | undefined,
-  currStatus: string | undefined,
+  currStatus: string | undefined
 ): DataInterface {
   return {
     getData: () => {
diff --git a/app/src/features/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
index 7c833cef..85af66d2 100644
--- a/app/src/features/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -8,6 +8,7 @@ import { useMouseLeave } from "@hooks/useMouseLeave";
 import { useDispatch } from "react-redux";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 interface StyledListProps {
   $bottom?: number;
@@ -52,6 +53,7 @@ function StartNewChat() {
   const [isMenuOpened, setIsMenuOpened] = useState(false);
   const ref = useMouseLeave(() => setIsMenuOpened(false), false);
   const dispatch = useDispatch();
+  const sideBarType = useSidebarType();
 
   const handleOpenMenu = () => {
     setIsMenuOpened((prevState) => !prevState);
@@ -62,14 +64,14 @@ function StartNewChat() {
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.ADD_MEMBERS,
-          data: { type: "channel" },
+          data: { type: sideBarType },
         })
       );
     } else if (title === "New Group") {
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.ADD_MEMBERS,
-          data: { type: "group" },
+          data: { type: sideBarType },
         })
       );
     } else {
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 08e9355d..6df08184 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -6,7 +6,7 @@ import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
-import { useParams } from "react-router-dom";
+import { useOutletContext, useParams } from "react-router-dom";
 import { getChatByID } from "./utils/helpers";
 import { useChatMembers } from "./hooks/useChatMember";
 import { getElapsedTime } from "@utils/helpers";
@@ -29,6 +29,7 @@ const Container = styled.div<{ $hasMargin?: boolean }>`
   align-items: center;
 
   padding-inline: 1rem;
+  cursor: pointer;
 
   margin: ${({ $hasMargin }) => ($hasMargin ? "1rem 0" : "0")};
 `;
@@ -102,6 +103,11 @@ const StyledButton = styled.button`
   color: var(--color-background);
 `;
 
+interface OutletContextProps {
+  setShowRightSideBar: React.Dispatch<React.SetStateAction<boolean>>;
+  showRightSideBar: boolean;
+}
+
 //TODO: refactor
 function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
@@ -120,6 +126,9 @@ function Topbar() {
   const membersData = useChatMembers(chat?.members);
   const { removeFromBlockList } = useBlock();
 
+  const { showRightSideBar, setShowRightSideBar } =
+    useOutletContext<OutletContextProps>();
+
   let image;
   let lastSeen;
 
@@ -159,7 +168,10 @@ function Topbar() {
           image={image}
         />
       )}
-      <Container $hasMargin={isCollapsed}>
+      <Container
+        $hasMargin={isCollapsed}
+        onClick={() => setShowRightSideBar(!showRightSideBar)}
+      >
         <Avatar
           data-testid="chat-avatar"
           image={image}
diff --git a/app/src/features/groups/CreateGroupForm.tsx b/app/src/features/groups/CreateGroupForm.tsx
index 5202d5be..8e79ce0c 100644
--- a/app/src/features/groups/CreateGroupForm.tsx
+++ b/app/src/features/groups/CreateGroupForm.tsx
@@ -14,6 +14,7 @@ import { sideBarPages } from "types/sideBar";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { clearSelectedUsers } from "@state/groups/selectedUsers";
 import { useSocket } from "@hooks/useSocket";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const Form = styled.form`
   padding: 1rem;
@@ -34,13 +35,20 @@ function GroupInfoForm({ type }: { type: "channel" | "group" }) {
     },
   });
 
+  const sideBarType = useSidebarType();
+
   const groupName = watch("groupName");
   const dispatch = useDispatch();
   const members = useAppSelector((state) => state.selectedUsers);
   const { createGroupOrChannel } = useSocket();
 
   const onSubmit = (data: NewGroupForm) => {
-    dispatch(updateSideBarView({ redirect: sideBarPages.CHATS }));
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.CHATS,
+        data: { type: sideBarType },
+      })
+    );
     dispatch(clearSelectedUsers());
 
     createGroupOrChannel({
diff --git a/app/src/features/privacy-settings/BlockList.tsx b/app/src/features/privacy-settings/BlockList.tsx
index 35913faa..ed5d9ad1 100644
--- a/app/src/features/privacy-settings/BlockList.tsx
+++ b/app/src/features/privacy-settings/BlockList.tsx
@@ -6,6 +6,7 @@ import { useBlock } from "./hooks/useBlock";
 import CircleIcon from "@components/CircleIcon";
 import { useState } from "react";
 import AddToBlockMenuList from "./AddToBlockMenuList";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const StyledOptionsList = styled.div`
   display: flex;
@@ -30,8 +31,13 @@ export interface BlockListInterface {
 }
 
 function BlockList() {
-  const { props } = useAppSelector((state) => state.sideBarData);
+  const type = useSidebarType();
 
+  const { props } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
   const { blockList } = useBlock();
 
   const [isMenuOpened, setIsMenuOpened] = useState(false);
diff --git a/app/src/features/profile-settings/ProfileSettings.tsx b/app/src/features/profile-settings/ProfileSettings.tsx
index 36e3baf3..e24575c6 100644
--- a/app/src/features/profile-settings/ProfileSettings.tsx
+++ b/app/src/features/profile-settings/ProfileSettings.tsx
@@ -20,6 +20,7 @@ import { sideBarPages } from "types/sideBar";
 import { useAppDispatch } from "@hooks/useGlobalState";
 import { useUpdateProfilePicture } from "./hooks/useUpdateProfilePicture";
 import { useDeleteProfilePicture } from "./hooks/useDeleteProfilePicture";
+import { useSidebarType } from "@components/side-bar/SideBarContext";
 
 const SideBarContainer = styled.div`
   overflow-y: auto;
@@ -177,10 +178,9 @@ export interface EditProfileForm {
 function ProfileSettings() {
   const { data: initialProfileSettings } = useProfileSettings();
   const { updateProfileSettings, isPending } = useUpdateProfileSettings();
-  const { deleteProfilePicture, isPending: isDeletingProfilePicture } =
-    useDeleteProfilePicture();
-  const { updateProfilePicture, isPending: isUpdatingProfilePicture } =
-    useUpdateProfilePicture();
+  const { deleteProfilePicture } = useDeleteProfilePicture();
+  const { updateProfilePicture } = useUpdateProfilePicture();
+  const sideBarType = useSidebarType();
 
   const [selectedImageFile, setSelectedImageFile] = useState<File | null>(null);
   const [hasImage, setHasImage] = useState(
@@ -253,7 +253,7 @@ function ProfileSettings() {
         dispatch(
           updateSideBarView({
             redirect: sideBarPages.SETTINGS,
-            data: undefined,
+            data: { type: sideBarType },
           })
         );
       }
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index cb82817f..e8dfbe9d 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -21,7 +21,16 @@ interface SideBarView {
   backView?: sideBarPages;
   props?: object;
 }
-const initialState: SideBarView = chats;
+
+interface SideBarState {
+  leftSideBar: SideBarView;
+  rightSideBar: SideBarView;
+}
+
+const initialState: SideBarState = {
+  leftSideBar: chats,
+  rightSideBar: settings,
+};
 
 function getSideBarPage(type: number): SideBarView {
   switch (type) {
@@ -54,7 +63,7 @@ function getSideBarPage(type: number): SideBarView {
 
 interface actionType {
   redirect: sideBarPages;
-  data?: { [key: string]: string };
+  data: { type: "left" | "right"; [key: string]: string };
 }
 
 const sideBarSlice = createSlice({
@@ -64,27 +73,20 @@ const sideBarSlice = createSlice({
     updateSideBarView: (state, action: PayloadAction<actionType>) => {
       const { redirect, data } = action.payload;
 
-      // redirect can take value 0, so don't try "if(redirect)"
-      if (redirect === undefined) return;
-
-      // state assigned one by one to avoid state de-serialization
+      const whichSide = data.type;
       const newData = getSideBarPage(redirect);
-      state.backView = newData.backView;
-      state.page = newData.page;
 
-      if (redirect === sideBarPages.SETTINGS_UPDATE) {
-        state.props = { data: data };
-        state.title = data?.header || newData.title;
-      } else if (
-        redirect === sideBarPages.BLOCKED_USERS ||
-        redirect === sideBarPages.ADD_MEMBERS ||
-        redirect === sideBarPages.NEW_GROUP
-      ) {
-        state.props = { ...newData.props, data: data };
-        state.title = newData.title;
+      const updatedSideBar = {
+        page: newData.page,
+        title: newData.title,
+        backView: newData.backView,
+        props: { ...newData.props },
+      };
+
+      if (whichSide === "left") {
+        state.leftSideBar = updatedSideBar;
       } else {
-        state.title = newData.title;
-        state.props = { ...newData.props };
+        state.rightSideBar = updatedSideBar;
       }
     },
   },

From 45b25fc62554ce795c1cc83cf94a7e81564e7c04 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:44:28 +0200
Subject: [PATCH 088/136] =?UTF-8?q?=20=E2=9C=A8=20(groups):=20Show=20group?=
 =?UTF-8?q?=20info=20(#128)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 👽️ (messaging): Update messages pagination to start from 0

* ✨ (groups): Show group info
---
 app/src/components/Avatar.tsx                 | 10 +-
 app/src/components/User.tsx                   | 38 +++++++-
 app/src/components/UsersList.tsx              | 96 ++-----------------
 app/src/components/side-bar/SideBar.tsx       | 15 ++-
 .../side-bar/groups/AddGroupMembers.tsx       | 88 ++++++++++++++++-
 .../side-bar/settings/GroupInfoHeader.tsx     | 70 ++++++++++++++
 .../side-bar/settings/SettingsSideBarBody.tsx |  5 +-
 app/src/data/icons.tsx                        |  7 +-
 app/src/data/sideBar.ts                       | 16 ++++
 app/src/features/chats/Topbar.tsx             |  2 +-
 .../features/chats/hooks/useFetchNextPage.ts  |  6 +-
 .../features/chats/hooks/useFetchNextPage.tsx | 53 ----------
 .../chats/services/apiFetchNextPage.ts        |  4 +-
 app/src/features/groups/EditGroupInfo.tsx     |  5 +
 app/src/features/groups/GroupInfo.tsx         | 82 ++++++++++++++++
 app/src/features/groups/hooks/useAllUsers.ts  |  5 +-
 app/src/features/groups/hooks/useGroupInfo.ts | 39 ++++++++
 .../features/groups/services/createGroup.ts   | 28 ------
 app/src/state/side-bar/sideBar.ts             |  8 +-
 app/src/types/sideBar.ts                      |  2 +
 20 files changed, 391 insertions(+), 188 deletions(-)
 create mode 100644 app/src/components/side-bar/settings/GroupInfoHeader.tsx
 delete mode 100644 app/src/features/chats/hooks/useFetchNextPage.tsx
 create mode 100644 app/src/features/groups/EditGroupInfo.tsx
 create mode 100644 app/src/features/groups/GroupInfo.tsx
 create mode 100644 app/src/features/groups/hooks/useGroupInfo.ts
 delete mode 100644 app/src/features/groups/services/createGroup.ts

diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
index 06c22e47..be20eb6e 100644
--- a/app/src/components/Avatar.tsx
+++ b/app/src/components/Avatar.tsx
@@ -3,11 +3,13 @@ import styled from "styled-components";
 import { getAvatarName } from "utils/helpers";
 
 const StyledAvatar = styled.div<{ $image?: string; $size?: string }>`
-  width: ${({ $size }) => ($size === "small" ? "2.625rem" : "3.125rem")};
-  height: ${({ $size }) => ($size === "small" ? "2.625rem" : "3.125rem")};
+  width: ${({ $size }) =>
+    $size === "small" ? "2.625rem" : $size === "large" ? "7.5rem" : "3.125rem"};
+  height: ${({ $size }) =>
+    $size === "small" ? "2.625rem" : $size === "large" ? "7.5rem" : "3.125rem"};
 
   border-radius: 50%;
-  margin-right: 1rem;
+  margin-right: ${({ $size }) => ($size === "large" ? "0" : "1rem")};
 
   background: ${({ $image }) =>
     $image ? `url(${$image}) center/cover no-repeat` : "var(--color-avatar)"};
@@ -21,7 +23,7 @@ const StyledAvatar = styled.div<{ $image?: string; $size?: string }>`
   flex-shrink: 0;
 
   font-weight: bold;
-  font-size: 1rem;
+  font-size: ${({ $size }) => ($size === "large" ? "1.5rem" : "1rem")};
   text-transform: uppercase;
   z-index: 1;
 `;
diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
index fe17e1fa..9163b24a 100644
--- a/app/src/components/User.tsx
+++ b/app/src/components/User.tsx
@@ -5,8 +5,8 @@ import Checkbox from "./Checkbox";
 
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 
-import type { UserType } from "@features/groups/hooks/useAllUsers";
 import { toggleSelectUser } from "@state/groups/selectedUsers";
+import { UserType } from "@features/groups/hooks/useAllUsers";
 
 const UserRow = styled.div`
   display: flex;
@@ -29,10 +29,28 @@ const UserRow = styled.div`
 const UserDetails = styled.div`
   display: flex;
   flex-direction: column;
+
+  width: 100%;
+  overflow: hidden;
+`;
+
+const Details = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  overflow: hidden;
 `;
 
 const Username = styled.span`
   color: var(--color-text);
+
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 `;
 
 const Status = styled.span`
@@ -40,13 +58,24 @@ const Status = styled.span`
   color: var(--color-text-secondary);
 `;
 
+const Role = styled.span`
+  color: var(--color-text-secondary);
+  font-size: small;
+
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 type UserProps = {
   user: UserType;
   view: "display" | "update";
 };
 
 export default function User({ user, view }: UserProps) {
-  const { _id, photo, status, screenFirstName, screenLastName } = user;
+  const { _id, photo, status, screenFirstName, screenLastName, role } = user;
 
   const dispatch = useAppDispatch();
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
@@ -68,7 +97,10 @@ export default function User({ user, view }: UserProps) {
 
       <Avatar name={screenFirstName} image={photo} />
       <UserDetails>
-        <Username>{`${screenFirstName} ${screenLastName}`}</Username>
+        <Details>
+          <Username>{`${screenFirstName} ${screenLastName}`}</Username>
+          {role === "admin" && <Role>{role}</Role>}
+        </Details>
         <Status>{status}</Status>
       </UserDetails>
     </UserRow>
diff --git a/app/src/components/UsersList.tsx b/app/src/components/UsersList.tsx
index d6b47df0..da262c89 100644
--- a/app/src/components/UsersList.tsx
+++ b/app/src/components/UsersList.tsx
@@ -1,90 +1,14 @@
-import { useState } from "react";
-import { useAppDispatch } from "@hooks/useGlobalState";
-import styled from "styled-components";
-
 import User from "./User";
-import CircleIcon from "./CircleIcon";
-
-import { sideBarPages } from "types/sideBar";
-import { updateSideBarView } from "@state/side-bar/sideBar";
-
-import { useAllUsers } from "@features/groups/hooks/useAllUsers";
-import { useUser } from "@features/authentication/login/hooks/useUser";
-import { useSidebarType } from "./side-bar/SideBarContext";
-
-const Container = styled.div`
-  width: 100%;
-  background-color: var(--color-background);
-`;
-
-const StyledUsersList = styled.div`
-  width: 100%;
-  max-height: calc(100vh - 8.5rem);
-  overflow-y: scroll;
-  position: relative;
-`;
-
-const SearchInput = styled.input`
-  width: 100%;
-  padding: 1rem;
-  font-size: 0.9rem;
-  caret-color: var(--accent-color);
-  color: var(--color-text);
-  outline: none;
-  border: none;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-`;
-
-function UsersList({ type }: { type: "channel" | "group" }) {
-  const { users, isPending: isPendenigAllUsers } = useAllUsers();
-  const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
-  const [searchQuery, setSearchQuery] = useState<string>("");
-  const dispatch = useAppDispatch();
-  const sideBarType = useSidebarType();
-  if (isPendenigAllUsers || isPendingCurrentUser) return null;
-
-  function handleClick() {
-    const redirect =
-      type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
-    dispatch(updateSideBarView({ redirect, data: { type: sideBarType } }));
-  }
-
-  const filteredUsers = users?.filter(
-    (user) =>
-      user._id !== currentUser._id &&
-      `${user.screenFirstName} ${user.screenLastName}`
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase())
-  );
-
-  return (
-    <Container>
-      <SearchInput
-        type="text"
-        placeholder="Add people..."
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-      />
-      <StyledUsersList>
-        {filteredUsers?.map((user) => (
-          <User key={user._id} user={user} view="update" />
-        ))}
-      </StyledUsersList>
-
-      <CircleIcon
-        data-testid="confirm-add-members-button"
-        $icon="ArrowForward"
-        $right={1}
-        $bottom={2}
-        $size={3.3}
-        $padding={0.5}
-        $color="white"
-        $bgColor="var(--accent-color)"
-        $opacity={0.95}
-        onClick={handleClick}
-      />
-    </Container>
-  );
+import { UserType } from "@features/groups/hooks/useAllUsers";
+
+function UsersList({
+  view,
+  users,
+}: {
+  view: "update" | "display";
+  users: UserType[];
+}) {
+  return users?.map((user) => <User key={user._id} user={user} view={view} />);
 }
 
 export default UsersList;
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index df837d92..642f7c7d 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -20,6 +20,8 @@ import BlockList from "@features/privacy-settings/BlockList";
 import Devices from "@features/devices/Devices";
 import NewGroup from "@features/groups/NewGroup.js";
 import { SidebarContext } from "./SideBarContext.js";
+import GroupInfo from "@features/groups/GroupInfo.js";
+import EditGroupInfo from "@features/groups/EditGroupInfo.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -42,11 +44,12 @@ const StyledSidebar = styled.aside<{ $isExiting: boolean }>`
   background-color: var(--color-background);
   overflow: hidden;
   position: relative;
-  padding-top: 1rem;
+
   display: flex;
   flex-direction: column;
 
   border-right: 1px solid var(--color-border);
+  z-index: 100;
 
   animation: ${({ $isExiting }) => ($isExiting ? fadeOut : fadeIn)} 0.1s;
   animation: ${({ $isExiting }) => ($isExiting ? fadeOut : fadeIn)} 0.1s
@@ -112,6 +115,16 @@ const sideBarMap: {
       <NewGroup type="channel" />
     </SettingsSideBar>
   ),
+  GroupInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <GroupInfo />
+    </SettingsSideBar>
+  ),
+  EditGroupInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <EditGroupInfo />
+    </SettingsSideBar>
+  ),
 };
 
 function Sidebar({ type }: { type: "left" | "right" }) {
diff --git a/app/src/components/side-bar/groups/AddGroupMembers.tsx b/app/src/components/side-bar/groups/AddGroupMembers.tsx
index 9ba0600e..c85c4c95 100644
--- a/app/src/components/side-bar/groups/AddGroupMembers.tsx
+++ b/app/src/components/side-bar/groups/AddGroupMembers.tsx
@@ -1,10 +1,94 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import CircleIcon from "@components/CircleIcon";
 import UsersList from "@components/UsersList";
 
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+
+import { useAppDispatch } from "@hooks/useGlobalState";
+import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+import { useUser } from "@features/authentication/login/hooks/useUser";
+import { useSidebarType } from "../SideBarContext";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  padding: 1rem;
+  font-size: 0.9rem;
+  caret-color: var(--accent-color);
+  color: var(--color-text);
+  outline: none;
+  border: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 7.5rem);
+  overflow-y: scroll;
+  position: relative;
+
+  background-color: var(--color-background);
+`;
+
 export default function AddGroupMembers({
   type,
 }: {
   type: "group" | "channel";
 }) {
-  console.log(type);
-  return <UsersList type={type} />;
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const { users, isPending: isPendenigAllUsers } = useAllUsers();
+  const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
+  const dispatch = useAppDispatch();
+  const sideBarType = useSidebarType();
+
+  const filteredUsers = users?.filter(
+    (user) =>
+      user._id !== currentUser._id &&
+      `${user.screenFirstName} ${user.screenLastName}`
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
+  );
+
+  if (isPendenigAllUsers || isPendingCurrentUser) return null;
+
+  function handleClick() {
+    const redirect =
+      type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
+    dispatch(updateSideBarView({ redirect, data: { type: sideBarType } }));
+  }
+
+  return (
+    <Container>
+      <SearchInput
+        type="text"
+        placeholder="Add people..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+
+      <StyledUsersList>
+        <UsersList users={filteredUsers!} view="update" />
+      </StyledUsersList>
+
+      <CircleIcon
+        data-testid="confirm-add-members-button"
+        $icon="ArrowForward"
+        $right={1}
+        $bottom={2}
+        $size={3.3}
+        $padding={0.5}
+        $color="white"
+        $bgColor="var(--accent-color)"
+        $opacity={0.95}
+        onClick={handleClick}
+      />
+    </Container>
+  );
 }
diff --git a/app/src/components/side-bar/settings/GroupInfoHeader.tsx b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
new file mode 100644
index 00000000..90e748a8
--- /dev/null
+++ b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
@@ -0,0 +1,70 @@
+import styled from "styled-components";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+
+import Heading from "@components/Heading";
+import Icon from "@components/Icon";
+
+import { getIcon } from "@data/icons";
+
+import { useSidebarType } from "../SideBarContext";
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import BackArrow from "@components/BackArrow";
+
+const StyledSideBarHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 1rem;
+
+  background-color: var(--color-background);
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+`;
+
+function GroupInfoHeader() {
+  const type = useSidebarType();
+
+  const { title } = useAppSelector((state) =>
+    type === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
+
+  const dispatch = useAppDispatch();
+
+  function handleEdit() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.EDIT_GROUP_INFO,
+        data: { type },
+      })
+    );
+  }
+
+  //TODO: handle onClose
+  return (
+    <StyledSideBarHeader data-testid="settings-side-bar-header">
+      <Container>
+        {title === "Group Info" ? (
+          <Icon>{getIcon("Close")}</Icon>
+        ) : (
+          <BackArrow />
+        )}
+        <Heading data-testid="settings-title" as={"h4"}>
+          {title}
+        </Heading>
+      </Container>
+      {title === "Group Info" && (
+        <Icon onClick={handleEdit}>{getIcon("Edit")}</Icon>
+      )}
+    </StyledSideBarHeader>
+  );
+}
+
+export default GroupInfoHeader;
diff --git a/app/src/components/side-bar/settings/SettingsSideBarBody.tsx b/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
index 38c02f41..20370171 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarBody.tsx
@@ -2,6 +2,8 @@ import styled from "styled-components";
 import OptionsList from "./OptionsList";
 import SettingsSideBarHeader from "./SettingsSideBarHeader";
 import { SideBarRowProps } from "./side-bar-row/SideBarRow";
+import { useSidebarType } from "../SideBarContext";
+import GroupInfoHeader from "./GroupInfoHeader";
 
 interface SettingsSideBarProps {
   children?: React.ReactNode;
@@ -15,9 +17,10 @@ const StyledSettingsSideBar = styled.div`
 `;
 
 function SettingsSideBar({ rows, children }: SettingsSideBarProps) {
+  const type = useSidebarType();
   return (
     <StyledSettingsSideBar>
-      <SettingsSideBarHeader />
+      {type === "left" ? <SettingsSideBarHeader /> : <GroupInfoHeader />}
       {children}
       <OptionsList rows={rows} />
     </StyledSettingsSideBar>
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 82bb96b4..9bf1efbf 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -59,6 +59,7 @@ enum icons {
   ArrowForward,
   Mute,
   EndCall,
+  AddMembers,
 }
 
 type iconStrings = keyof typeof icons;
@@ -400,6 +401,10 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/CallEnd"),
     defaultProps: { fontSize: "large" },
   },
+  AddMembers: {
+    importFn: () => import("@mui/icons-material/PersonAddAlt1"),
+    defaultProps: { fontSize: "large" },
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
@@ -410,7 +415,7 @@ function getIcon(
     sx?: SxProps;
     fontSize?: "small" | "medium" | "large";
     style?: React.CSSProperties;
-  },
+  }
 ) {
   if (!iconName) return undefined;
 
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 13ad4232..8100eb9a 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -85,6 +85,8 @@ const pagesMap: { [K in pagesStrings]: string } = {
   ADD_MEMBERS: "AddMembers",
   NEW_GROUP: "NewGroup",
   NEW_CHANNEL: "NewChannel",
+  GROUP_INFO: "GroupInfo",
+  EDIT_GROUP_INFO: "EditGroupInfo",
 };
 
 const settingsRows = [
@@ -221,6 +223,18 @@ const newChannel: SideBarView = {
   page: "NEW_CHANNEL",
 };
 
+const groupInfo: SideBarView = {
+  title: "Group Info",
+  backView: undefined,
+  page: "GROUP_INFO",
+};
+
+const editGroupInfo: SideBarView = {
+  title: "Edit",
+  backView: sideBarPages.GROUP_INFO,
+  page: "EDIT_GROUP_INFO",
+};
+
 export {
   chats,
   contacts,
@@ -241,4 +255,6 @@ export {
   addMembers,
   newGroup,
   newChannel,
+  groupInfo,
+  editGroupInfo,
 };
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 6df08184..3aea0370 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -103,7 +103,7 @@ const StyledButton = styled.button`
   color: var(--color-background);
 `;
 
-interface OutletContextProps {
+export interface OutletContextProps {
   setShowRightSideBar: React.Dispatch<React.SetStateAction<boolean>>;
   showRightSideBar: boolean;
 }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index 53066082..f81172bb 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -19,10 +19,10 @@ function useFetchNextPage() {
     isFetchingPreviousPage,
   } = useInfiniteQuery({
     queryKey: [`chat-${chatId}-pages`],
-    queryFn: ({ pageParam = 1 }) =>
+    queryFn: ({ pageParam }) =>
       apiFetchNextPage({ chatId: chatId!, pageParam }),
     getNextPageParam: (lastPage) => lastPage.nextPage,
-    initialPageParam: 1,
+    initialPageParam: 0,
   });
 
   useEffect(() => {
@@ -33,7 +33,7 @@ function useFetchNextPage() {
           mergeMessages({
             chatId: chatId,
             newMessages: lastFetchedPage.messages,
-          }),
+          })
         );
       }
     }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.tsx b/app/src/features/chats/hooks/useFetchNextPage.tsx
deleted file mode 100644
index dc0fddd0..00000000
--- a/app/src/features/chats/hooks/useFetchNextPage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
-import { apiFetchNextPage } from "../services/apiFetchNextPage";
-import { useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { mergeMessages } from "../../../state/messages/chats";
-
-function useFetchNextPage() {
-  const { chatId } = useParams<{ chatId: string }>();
-  const dispatch = useDispatch();
-
-  const {
-    data,
-    fetchNextPage,
-    fetchPreviousPage,
-    hasNextPage,
-    hasPreviousPage,
-    isFetchingNextPage,
-    isFetchingPreviousPage,
-  } = useInfiniteQuery({
-    queryKey: [`chat-${chatId}-pages`],
-    queryFn: ({ pageParam = 1 }) =>
-      apiFetchNextPage({ chatId: chatId!, pageParam }),
-    getNextPageParam: (lastPage) => lastPage.nextPage,
-    initialPageParam: 1,
-  });
-
-  useEffect(() => {
-    if (data) {
-      const lastFetchedPage = data.pages[data.pages.length - 1];
-      if (lastFetchedPage && chatId) {
-        dispatch(
-          mergeMessages({
-            chatId: chatId,
-            newMessages: lastFetchedPage.messages,
-          }),
-        );
-      }
-    }
-  }, [data, chatId, dispatch]);
-
-  return {
-    data,
-    fetchNextPage,
-    fetchPreviousPage,
-    hasNextPage,
-    hasPreviousPage,
-    isFetchingNextPage,
-    isFetchingPreviousPage,
-  };
-}
-
-export { useFetchNextPage };
diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
index e109ad80..eeb00466 100644
--- a/app/src/features/chats/services/apiFetchNextPage.ts
+++ b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -2,7 +2,7 @@ import { API_URL } from "@constants";
 
 async function apiFetchNextPage({
   chatId,
-  pageParam = 1,
+  pageParam,
 }: {
   pageParam?: number;
   chatId: string;
@@ -16,7 +16,7 @@ async function apiFetchNextPage({
         "Content-Type": "application/json",
         "X-Session-Token": localStorage.getItem("sessionId") || "",
       },
-    },
+    }
   );
 
   const data = await res.json();
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
new file mode 100644
index 00000000..caef9c4e
--- /dev/null
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -0,0 +1,5 @@
+function EditGroupInfo() {
+  return <div>EditGroupInfo</div>;
+}
+
+export default EditGroupInfo;
diff --git a/app/src/features/groups/GroupInfo.tsx b/app/src/features/groups/GroupInfo.tsx
new file mode 100644
index 00000000..ee223299
--- /dev/null
+++ b/app/src/features/groups/GroupInfo.tsx
@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import UsersList from "@components/UsersList";
+import Avatar from "@components/Avatar";
+import CircleIcon from "@components/CircleIcon";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const GroupDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 1.5rem;
+  padding: 1rem;
+
+  width: 100%;
+`;
+
+const GroupName = styled.div`
+  color: var(--color-text);
+`;
+
+const MembersCount = styled.div`
+  color: var(--color-text-secondary);
+  font-size: 0.8rem;
+`;
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 19rem);
+  overflow-y: scroll;
+  position: relative;
+
+  background-color: var(--color-background);
+`;
+
+function GroupInfo() {
+  const { group, groupMembers, isPending } = useGroupInfo();
+  if (isPending) return;
+
+  return (
+    <Container>
+      <GroupDetails>
+        <Avatar name={group?.name} image={group?.photo} size="large" />
+        <Info>
+          <GroupName>{group?.name}</GroupName>
+          <MembersCount>{groupMembers.length} members</MembersCount>
+        </Info>
+      </GroupDetails>
+      <StyledUsersList>
+        <UsersList view="display" users={groupMembers!} />
+      </StyledUsersList>
+
+      <CircleIcon
+        type="submit"
+        as="button"
+        data-testid="add-members-button"
+        $icon="AddMembers"
+        $right={1}
+        $bottom={2}
+        $size={3.3}
+        $padding={0.8}
+        $color="white"
+        $bgColor="var(--accent-color)"
+        onClick={() => {}}
+      />
+    </Container>
+  );
+}
+
+export default GroupInfo;
diff --git a/app/src/features/groups/hooks/useAllUsers.ts b/app/src/features/groups/hooks/useAllUsers.ts
index 94bfbb8d..8e761746 100644
--- a/app/src/features/groups/hooks/useAllUsers.ts
+++ b/app/src/features/groups/hooks/useAllUsers.ts
@@ -7,10 +7,11 @@ type UserType = {
   username: string;
   screenFirstName: string;
   screenLastName: string;
-  email: string;
+  email?: string;
   photo: string;
   status: string;
-  bio: string;
+  bio?: string;
+  role?: "admin" | "member" | undefined;
 };
 
 function useAllUsers() {
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
new file mode 100644
index 00000000..911ec453
--- /dev/null
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -0,0 +1,39 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { useAllUsers } from "./useAllUsers";
+import { useState, useEffect } from "react";
+
+function useGroupInfo() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const [groupMembers, setGroupMembers] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const group = useAppSelector((state) =>
+    state.chats.chats.find((chat) => chat._id === chatId)
+  );
+
+  const { users, isPending } = useAllUsers();
+
+  useEffect(() => {
+    if (!isPending && group && users?.length) {
+      const members = group.members
+        .map((groupMember) => {
+          const user = users?.find((member) => member._id === groupMember._id);
+          return user
+            ? {
+                ...user,
+                role: groupMember.Role,
+              }
+            : null;
+        })
+        .filter((member) => member !== null);
+
+      setGroupMembers(members);
+      setIsLoading(false);
+    }
+  }, [group, users, isPending]);
+
+  return { groupMembers, group, isPending: isLoading };
+}
+
+export { useGroupInfo };
diff --git a/app/src/features/groups/services/createGroup.ts b/app/src/features/groups/services/createGroup.ts
deleted file mode 100644
index 7ab8080a..00000000
--- a/app/src/features/groups/services/createGroup.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { API_URL } from "@constants";
-
-type dataType = {
-  name: string;
-  picture: string;
-  members: [];
-};
-
-async function createGroup(group: dataType) {
-  //TODO: change when the backend rename it😆
-  const res = await fetch(`${API_URL}/group`, {
-    method: "POST",
-    body: JSON.stringify(group),
-    headers: {
-      "X-Session-Token": localStorage.getItem("sessionId") || "",
-    },
-    credentials: "include",
-  });
-
-  if (!res.ok) {
-    throw new Error("Failed to create group");
-  }
-
-  const data = await res.json();
-  return data;
-}
-
-export { createGroup };
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index e8dfbe9d..2733d750 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -12,6 +12,8 @@ import {
   addMembers,
   newGroup,
   newChannel,
+  groupInfo,
+  editGroupInfo,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -29,7 +31,7 @@ interface SideBarState {
 
 const initialState: SideBarState = {
   leftSideBar: chats,
-  rightSideBar: settings,
+  rightSideBar: groupInfo,
 };
 
 function getSideBarPage(type: number): SideBarView {
@@ -56,6 +58,10 @@ function getSideBarPage(type: number): SideBarView {
       return newGroup;
     case sideBarPages.NEW_CHANNEL:
       return newChannel;
+    case sideBarPages.GROUP_INFO:
+      return groupInfo;
+    case sideBarPages.EDIT_GROUP_INFO:
+      return editGroupInfo;
     default:
       throw new Error("Unknown Type");
   }
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index dd549c7c..855df217 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -10,6 +10,8 @@ enum sideBarPages {
   ADD_MEMBERS,
   NEW_GROUP,
   NEW_CHANNEL,
+  GROUP_INFO,
+  EDIT_GROUP_INFO,
 }
 
 type pagesStrings = keyof typeof sideBarPages;

From d5a8fc375978f32c4edf2397e4b41ce0c609f064 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Tue, 17 Dec 2024 22:01:24 +0200
Subject: [PATCH 089/136] docs: add static analysis results to README padges
 (#129)

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 0d7ab1a9..b9b56f23 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,9 @@
 # telware frontend
+
+<!-- STATIC ANALYSIS BADGES -->
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=ncloc)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)
+[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=TelwareSW_telware-frontend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=TelwareSW_telware-frontend)

From 05b19cb6543aa4137904f50ff5db73dbe87836d0 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Wed, 18 Dec 2024 00:31:07 +0200
Subject: [PATCH 090/136] :sparkles: (Messaging): Delete Message finished
 (#130)

* :sparkles: (Messaging): Delete Message finished

* :recycle: (messaging): removing unused  lines
---
 app/src/features/chats/MessageOptionList.tsx  | 12 +++
 .../features/chats/hooks/useDeleteMessage.ts  | 11 +++
 app/src/sockets/SocketProvider.tsx            | 77 +++++++++++++------
 app/src/state/messages/chats.ts               |  4 +-
 app/src/types/socket.ts                       |  7 ++
 5 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 app/src/features/chats/hooks/useDeleteMessage.ts

diff --git a/app/src/features/chats/MessageOptionList.tsx b/app/src/features/chats/MessageOptionList.tsx
index c5e63af8..7d462c8c 100644
--- a/app/src/features/chats/MessageOptionList.tsx
+++ b/app/src/features/chats/MessageOptionList.tsx
@@ -9,6 +9,7 @@ import {
 } from "@state/messages/chats";
 import { useSocket } from "@hooks/useSocket";
 import useCheckBox from "@features/forward/hooks/useCheckBox";
+import { useDeleteMessage } from "./hooks/useDeleteMessage";
 
 const StyledList = styled.ul<{ $isMine: boolean }>`
   position: absolute;
@@ -68,6 +69,8 @@ function MessageOptionList() {
     chatId,
   } = useMessageContext();
 
+  const { handleDeleteMessage } = useDeleteMessage();
+
   const { handleEditMessage, handleReply } = useOptionListAction({
     id,
     content,
@@ -96,6 +99,10 @@ function MessageOptionList() {
     dispatch(setShowCheckBox({ chatId: chatId, showCheckBox: !showCheckBox }));
   }
 
+  function handleDelete() {
+    handleDeleteMessage(id, chatId);
+  }
+
   return (
     <StyledList $isMine={isMine} data-testid="message-option-list">
       <HoverMask onClick={handleForward} data-testid="forward-option">
@@ -112,6 +119,11 @@ function MessageOptionList() {
       <HoverMask onClick={handlePin} data-testid="pin-option">
         <StyledP>{isPinned ? "Unpin" : "Pin"}</StyledP>
       </HoverMask>
+      {isMine && (
+        <HoverMask onClick={handleDelete} data-testid="delete-option">
+          <StyledP>Delete</StyledP>
+        </HoverMask>
+      )}
     </StyledList>
   );
 }
diff --git a/app/src/features/chats/hooks/useDeleteMessage.ts b/app/src/features/chats/hooks/useDeleteMessage.ts
new file mode 100644
index 00000000..9cea587a
--- /dev/null
+++ b/app/src/features/chats/hooks/useDeleteMessage.ts
@@ -0,0 +1,11 @@
+import { useSocket } from "@hooks/useSocket";
+
+export const useDeleteMessage = () => {
+  const { deleteMessage } = useSocket();
+
+  const handleDeleteMessage = (messageId: string, chatId: string) => {
+    deleteMessage({ messageId, chatId });
+  };
+
+  return { handleDeleteMessage };
+};
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index d8ace70f..a9254d3a 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -14,13 +14,14 @@ import {
   pinMessage,
   unpinMessage,
   editMessage,
+  deleteMessage as deleteMessageAction,
 } from "@state/messages/chats";
 import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
   message: MessageInterface,
-  chatId: string,
+  chatId: string
 ) => {
   dispatch(addMessage({ chatId, message }));
 };
@@ -28,7 +29,7 @@ const handleIncomingMessage = (
 const handleIsTyping = (
   dispatch: Dispatch,
   isTyping: boolean,
-  chatId: string,
+  chatId: string
 ) => {
   dispatch(setIsTyping({ chatId, isTyping }));
 };
@@ -93,7 +94,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(pinMessage({ messageId, chatId }));
-        },
+        }
       );
 
       socket.on(
@@ -109,7 +110,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(unpinMessage({ messageId, chatId }));
-        },
+        }
       );
 
       socket.on(
@@ -125,7 +126,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
           dispatch(editMessage({ chatId, messageId: id, content }));
-        },
+        }
       );
 
       socket.on("JOIN_GROUP_CHANNEL", () => {
@@ -133,7 +134,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
 
       socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId),
+        handleIsTyping(dispatch, isTyping, message.chatId)
       );
 
       socket.emit("typing");
@@ -173,10 +174,10 @@ function SocketProvider({ children }: SocketProviderProps) {
                 ...sentMessage,
                 _id,
               },
-              sentMessage.chatId,
+              sentMessage.chatId
             );
           }
-        },
+        }
       );
     } else {
       console.warn("Cannot send message: not connected to socket server");
@@ -186,7 +187,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const editMessageSocket = (
     messageId: string,
     content: string,
-    chatId: string,
+    chatId: string
   ) => {
     if (isConnected && socket) {
       socket.emit(
@@ -204,12 +205,12 @@ function SocketProvider({ children }: SocketProviderProps) {
                 chatId: response.res.message.chatId,
                 messageId: response.res.message._id,
                 content: response.res.message.content,
-              }),
+              })
             );
           } else {
             console.error("Failed to edit message:", response.error);
           }
-        },
+        }
       );
     }
   };
@@ -217,7 +218,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
     if (isConnected && socket) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -229,7 +230,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const unpinMessageSocket = (
     chatId: string,
     messageId: string,
-    userId: string,
+    userId: string
   ) => {
     if (isConnected && socket) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
@@ -250,7 +251,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const sendAnswer = useCallback(
     (
       answer: string,
-      callback?: (response: { success: boolean; error?: string }) => void,
+      callback?: (response: { success: boolean; error?: string }) => void
     ) => {
       if (isConnected && socket) {
         socket.emit(
@@ -264,13 +265,13 @@ function SocketProvider({ children }: SocketProviderProps) {
             } else {
               console.log("Answer sent successfully");
             }
-          },
+          }
         );
       } else {
         console.warn("Cannot send answer: not connected to socket server");
       }
     },
-    [isConnected, socket],
+    [isConnected, socket]
   );
   useEffect(() => {
     if (socket) {
@@ -315,7 +316,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(pinMessage({ messageId, chatId }));
-        },
+        }
       );
 
       socket.on(
@@ -331,7 +332,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
           dispatch(unpinMessage({ messageId, chatId }));
-        },
+        }
       );
 
       socket.on(
@@ -347,11 +348,18 @@ function SocketProvider({ children }: SocketProviderProps) {
         }) => {
           console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
           dispatch(editMessage({ chatId, messageId: id, content }));
-        },
+        }
+      );
+
+      socket.on(
+        "DELETE_MESSAGE_SERVER",
+        ({ chatId, id }: { chatId: string; id: string }) => {
+          dispatch(deleteMessageAction({ messageId: id, chatId }));
+        }
       );
 
       socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId),
+        handleIsTyping(dispatch, isTyping, message.chatId)
       );
       socket.emit("typing");
       return () => {
@@ -401,12 +409,36 @@ function SocketProvider({ children }: SocketProviderProps) {
           if (!success) {
             console.log("failed creating group");
           }
-        },
+        }
       );
     } else {
       console.warn(
-        "Cannot create group or channel: not connected to socket server",
+        "Cannot create group or channel: not connected to socket server"
+      );
+    }
+  }
+
+  function deleteMessage({
+    messageId,
+    chatId,
+  }: {
+    messageId: string;
+    chatId: string;
+  }) {
+    if (isConnected && socket) {
+      socket.emit(
+        "DELETE_MESSAGE_CLIENT",
+        { messageId, chatId },
+        ({ success }: { success: boolean }) => {
+          if (success) {
+            dispatch(deleteMessageAction({ messageId, chatId }));
+          } else {
+            console.log("Failed to delete message");
+          }
+        }
       );
+    } else {
+      console.warn("Cannot delete message: not connected to socket server");
     }
   }
 
@@ -420,6 +452,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         editMessage: editMessageSocket,
         startConnection,
         createGroupOrChannel,
+        deleteMessage,
       }}
     >
       {children}
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 3b0effe7..625c6bd4 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -85,7 +85,9 @@ const chatsSlice = createSlice({
     ) => {
       const { messageId, chatId } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
-      chat?.messages.filter((msg) => msg._id !== messageId);
+      if (chat) {
+        chat.messages = chat?.messages.filter((msg) => msg._id !== messageId);
+      }
     },
 
     editMessage: (
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index faf16ee7..e5195d9e 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -17,6 +17,13 @@ export interface SocketContextType {
     members: string[];
   }) => void;
   startConnection: (offer?: RTCSessionDescription) => void;
+  deleteMessage: ({
+    messageId,
+    chatId,
+  }: {
+    messageId: string;
+    chatId: string;
+  }) => void;
 }
 
 export interface SocketProviderProps {

From e6816ed9ed531b51000b54d08eba040a89dedfe4 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:59:18 +0200
Subject: [PATCH 091/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Add=20group=20m?=
 =?UTF-8?q?embers,=20new=20admins=20(#131)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 👽️ (messaging): Update messages pagination to start from 0

* ✨ (groups): Show group info

* 💄 (groups): Added edit-group ui

* ✨ (groups): Add group members, new admins
---
 app/src/App.tsx                               |   5 +-
 app/src/components/AppLayout.tsx              |  12 +--
 app/src/components/Avatar.tsx                 |   5 +-
 app/src/components/User.tsx                   |   1 -
 app/src/components/side-bar/SideBar.tsx       |  34 +++++-
 .../components/side-bar/groups/AddAdmins.tsx  |  52 +++++++++
 .../components/side-bar/groups/AddMembers.tsx |  40 +++++++
 .../side-bar/groups/AddMembersButton.tsx      |  20 ++++
 .../side-bar/groups/AddMoreMembers.tsx        |  55 ++++++++++
 .../side-bar/groups/AddNewGroupMembers.tsx    |  54 ++++++++++
 .../side-bar/groups/SearchInput.tsx           |  35 ++++++
 .../side-bar/settings/GroupInfoHeader.tsx     |   6 +-
 app/src/data/icons.tsx                        |  12 +++
 app/src/data/sideBar.ts                       |  35 +++++-
 app/src/features/chats/ChatBody.tsx           |   4 +-
 app/src/features/chats/StartNewChat.tsx       |   4 +-
 app/src/features/chats/Topbar.tsx             |  35 +++---
 app/src/features/groups/AddMembersButton.tsx  |  21 ++++
 app/src/features/groups/Admins.tsx            |  40 +++++++
 app/src/features/groups/DeleteGroup.tsx       |  12 +++
 app/src/features/groups/EditGroupInfo.tsx     |  66 +++++++++++-
 app/src/features/groups/GroupInfo.tsx         |  29 ++---
 app/src/features/groups/GroupType.tsx         |  10 ++
 app/src/features/groups/NewGroup.tsx          |   9 +-
 app/src/features/groups/SettingsRow.tsx       |  64 +++++++++++
 .../groups/contexts/RightSideBarProvider.tsx  |  39 +++++++
 app/src/features/groups/hooks/useGroupInfo.ts |   9 +-
 app/src/sockets/SocketProvider.tsx            | 100 +++++++++++++-----
 app/src/state/side-bar/sideBar.ts             |  23 +++-
 app/src/styles/GlobalStyles.tsx               |   2 +-
 app/src/types/sideBar.ts                      |   4 +
 app/src/types/socket.ts                       |  14 +++
 32 files changed, 764 insertions(+), 87 deletions(-)
 create mode 100644 app/src/components/side-bar/groups/AddAdmins.tsx
 create mode 100644 app/src/components/side-bar/groups/AddMembers.tsx
 create mode 100644 app/src/components/side-bar/groups/AddMembersButton.tsx
 create mode 100644 app/src/components/side-bar/groups/AddMoreMembers.tsx
 create mode 100644 app/src/components/side-bar/groups/AddNewGroupMembers.tsx
 create mode 100644 app/src/components/side-bar/groups/SearchInput.tsx
 create mode 100644 app/src/features/groups/AddMembersButton.tsx
 create mode 100644 app/src/features/groups/Admins.tsx
 create mode 100644 app/src/features/groups/DeleteGroup.tsx
 create mode 100644 app/src/features/groups/GroupType.tsx
 create mode 100644 app/src/features/groups/SettingsRow.tsx
 create mode 100644 app/src/features/groups/contexts/RightSideBarProvider.tsx

diff --git a/app/src/App.tsx b/app/src/App.tsx
index e0720047..72d204ce 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -17,6 +17,7 @@ import AppLayout from "@components/AppLayout";
 
 import ChatBox from "@features/chats/ChatBox";
 import SocketProvider from "sockets/SocketProvider";
+import RightSideBarProvider from "@features/groups/contexts/RightSideBarProvider";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -47,7 +48,9 @@ function App() {
             element={
               <ProtectedRoute>
                 <SocketProvider>
-                  <AppLayout />
+                  <RightSideBarProvider>
+                    <AppLayout />
+                  </RightSideBarProvider>
                 </SocketProvider>
               </ProtectedRoute>
             }
diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index 98e543c9..833f86d6 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
 import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
-import { useState } from "react";
+import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
 
 const StyledApp = styled.div<{
   $isChatOpen: boolean;
@@ -38,22 +38,20 @@ const StyledApp = styled.div<{
 
 function AppLayout() {
   const { chatId } = useParams();
-
   const isChatOpen = !!chatId;
-
-  const [showRightSideBar, setShowRightSideBar] = useState<boolean>(false);
+  const { isRightSideBarOpen } = useRightSideBarContext();
 
   return (
     <StyledApp
       $isChatOpen={isChatOpen}
       data-testid="app-layout"
-      $isRightSideBarOpen={showRightSideBar}
+      $isRightSideBarOpen={isRightSideBarOpen}
     >
       <SideBar type="left" />
       <Main>
-        <Outlet context={{ setShowRightSideBar, showRightSideBar }} />
+        <Outlet />
       </Main>
-      {showRightSideBar && <SideBar type="right" />}
+      {isRightSideBarOpen && <SideBar type="right" />}
     </StyledApp>
   );
 }
diff --git a/app/src/components/Avatar.tsx b/app/src/components/Avatar.tsx
index be20eb6e..a1b1dc1f 100644
--- a/app/src/components/Avatar.tsx
+++ b/app/src/components/Avatar.tsx
@@ -32,15 +32,16 @@ type PropsType = {
   image?: string | undefined;
   name: string | undefined;
   size?: string;
+  onClick?: () => void;
 };
 
-function Avatar({ image, name, size }: PropsType) {
+function Avatar({ image, name, size, onClick }: PropsType) {
   if (image && !image.startsWith("http")) {
     image = STATIC_MEDIA_URL + image;
   }
 
   return (
-    <StyledAvatar $image={image} $size={size || "small"}>
+    <StyledAvatar onClick={onClick} $image={image} $size={size || "small"}>
       {!image && getAvatarName(name)}
     </StyledAvatar>
   );
diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
index 9163b24a..013ab1c7 100644
--- a/app/src/components/User.tsx
+++ b/app/src/components/User.tsx
@@ -16,7 +16,6 @@ const UserRow = styled.div`
 
   &:last-child {
     border-bottom: none;
-    padding-bottom: 0;
     margin-bottom: 0;
   }
 
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 642f7c7d..49da88f0 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -13,7 +13,6 @@ import { SideBarRowProps } from "./settings/side-bar-row/SideBarRow";
 import ProfileSettings from "@features/profile-settings/ProfileSettings";
 import ProfileInfo from "@features/profile-info/ProfileInfo";
 import ChatList from "@features/chats/ChatsList";
-import AddGroupMembers from "./groups/AddGroupMembers.js";
 
 import { useAppSelector } from "@hooks/useGlobalState";
 import BlockList from "@features/privacy-settings/BlockList";
@@ -22,6 +21,11 @@ import NewGroup from "@features/groups/NewGroup.js";
 import { SidebarContext } from "./SideBarContext.js";
 import GroupInfo from "@features/groups/GroupInfo.js";
 import EditGroupInfo from "@features/groups/EditGroupInfo.js";
+import GroupType from "@features/groups/GroupType.js";
+import AddNewGroupMembers from "./groups/AddNewGroupMembers.js";
+import AddMoreMembers from "./groups/AddMoreMembers.js";
+import Admins from "@features/groups/Admins.js";
+import AddAdmins from "./groups/AddAdmins.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -100,19 +104,19 @@ const sideBarMap: {
     </SettingsSideBar>
   ),
   Devices: () => <SettingsSideBar rows={[]} children={<Devices />} />,
-  AddMembers: (props) => (
+  AddMembers: () => (
     <SettingsSideBar rows={[]}>
-      <AddGroupMembers type={props.data?.type!} />
+      <AddNewGroupMembers />
     </SettingsSideBar>
   ),
   NewGroup: () => (
     <SettingsSideBar rows={[]}>
-      <NewGroup type="group" />
+      <NewGroup />
     </SettingsSideBar>
   ),
   NewChannel: () => (
     <SettingsSideBar rows={[]}>
-      <NewGroup type="channel" />
+      <NewGroup />
     </SettingsSideBar>
   ),
   GroupInfo: () => (
@@ -125,6 +129,26 @@ const sideBarMap: {
       <EditGroupInfo />
     </SettingsSideBar>
   ),
+  GroupType: () => (
+    <SettingsSideBar rows={[]}>
+      <GroupType />
+    </SettingsSideBar>
+  ),
+  AddMoreMembers: () => (
+    <SettingsSideBar rows={[]}>
+      <AddMoreMembers />
+    </SettingsSideBar>
+  ),
+  Admins: () => (
+    <SettingsSideBar rows={[]}>
+      <Admins />
+    </SettingsSideBar>
+  ),
+  AddAdmins: () => (
+    <SettingsSideBar rows={[]}>
+      <AddAdmins />
+    </SettingsSideBar>
+  ),
 };
 
 function Sidebar({ type }: { type: "left" | "right" }) {
diff --git a/app/src/components/side-bar/groups/AddAdmins.tsx b/app/src/components/side-bar/groups/AddAdmins.tsx
new file mode 100644
index 00000000..70daf6fe
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddAdmins.tsx
@@ -0,0 +1,52 @@
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+
+import AddMembers from "./AddMembers";
+
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import AddMembersButton from "./AddMembersButton";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useSocket } from "@hooks/useSocket";
+import { useParams } from "react-router-dom";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function AddAdmins() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const { groupMembers, isPending } = useGroupInfo();
+
+  const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  console.log(selectedUsers);
+
+  const dispatch = useDispatch();
+  const { addAdmins } = useSocket();
+
+  function handleClick() {
+    addAdmins({
+      chatId: chatId!,
+      members: selectedUsers.map((user) => user._id),
+    });
+    const redirect = sideBarPages.ADMINS;
+    dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
+  }
+
+  if (isPending) return;
+
+  const normalMembers = groupMembers?.filter((user) => user.role === "member");
+
+  return (
+    <Container>
+      <AddMembers users={normalMembers!} />
+      {selectedUsers.length && <AddMembersButton onClick={handleClick} />}
+    </Container>
+  );
+}
+
+export default AddAdmins;
diff --git a/app/src/components/side-bar/groups/AddMembers.tsx b/app/src/components/side-bar/groups/AddMembers.tsx
new file mode 100644
index 00000000..8fd24bdd
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddMembers.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import UsersList from "@components/UsersList";
+import { UserType } from "@features/groups/hooks/useAllUsers";
+import SearchInput from "./SearchInput";
+
+const StyledUsersList = styled.div`
+  width: 100%;
+  max-height: calc(100vh - 7.5rem);
+  overflow-y: scroll;
+  position: relative;
+
+  background-color: var(--color-background);
+`;
+
+function AddMembers({ users }: { users: UserType[] }) {
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const filteredUsers = users?.filter((user) =>
+    `${user.screenFirstName} ${user.screenLastName}`
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      <SearchInput
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        placeholder="Add people..."
+      />
+      <StyledUsersList>
+        <UsersList users={filteredUsers!} view="update" />
+      </StyledUsersList>
+    </>
+  );
+}
+
+export default AddMembers;
diff --git a/app/src/components/side-bar/groups/AddMembersButton.tsx b/app/src/components/side-bar/groups/AddMembersButton.tsx
new file mode 100644
index 00000000..a82e3ed5
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddMembersButton.tsx
@@ -0,0 +1,20 @@
+import CircleIcon from "@components/CircleIcon";
+
+function AddMembersButton({ onClick }: { onClick: () => void }) {
+  return (
+    <CircleIcon
+      data-testid="confirm-add-members-button"
+      $icon="ArrowForward"
+      $right={1}
+      $bottom={2}
+      $size={3.3}
+      $padding={0.5}
+      $color="white"
+      $bgColor="var(--accent-color)"
+      $opacity={0.95}
+      onClick={onClick}
+    />
+  );
+}
+
+export default AddMembersButton;
diff --git a/app/src/components/side-bar/groups/AddMoreMembers.tsx b/app/src/components/side-bar/groups/AddMoreMembers.tsx
new file mode 100644
index 00000000..d5b77e09
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddMoreMembers.tsx
@@ -0,0 +1,55 @@
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+
+import AddMembers from "./AddMembers";
+
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import AddMembersButton from "./AddMembersButton";
+import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useSocket } from "@hooks/useSocket";
+import { useParams } from "react-router-dom";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function AddMoreMembers() {
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const { groupMembers, isPending: isPendingGroupMembers } = useGroupInfo();
+  const { users, isPending: isPendenigAllUsers } = useAllUsers();
+  const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  console.log(selectedUsers);
+  const { addGroupMembers } = useSocket();
+
+  const dispatch = useDispatch();
+
+  function handleClick() {
+    addGroupMembers({
+      chatId: chatId!,
+      users: selectedUsers.map((user) => user._id),
+    });
+    const redirect = sideBarPages.GROUP_INFO;
+    dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
+  }
+
+  if (isPendingGroupMembers || isPendenigAllUsers) return;
+
+  const filteredUsers = users?.filter(
+    (user) => !groupMembers.some((member) => member._id === user._id)
+  );
+
+  return (
+    <Container>
+      <AddMembers users={filteredUsers!} />
+      {!!selectedUsers.length && <AddMembersButton onClick={handleClick} />}
+    </Container>
+  );
+}
+
+export default AddMoreMembers;
diff --git a/app/src/components/side-bar/groups/AddNewGroupMembers.tsx b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
new file mode 100644
index 00000000..28d7bf6c
--- /dev/null
+++ b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+import AddMembers from "./AddMembers";
+
+import { sideBarPages } from "types/sideBar";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+
+import { useSidebarType } from "../SideBarContext";
+import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+import { useUser } from "@features/authentication/login/hooks/useUser";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import AddMembersButton from "./AddMembersButton";
+
+const Container = styled.div`
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function AddNewGroupMembers() {
+  const sideBarType = useSidebarType();
+  const { props } = useAppSelector((state) =>
+    sideBarType === "left"
+      ? state.sideBarData.leftSideBar
+      : state.sideBarData.rightSideBar
+  );
+  console.log(props);
+
+  const type = props?.view;
+
+  console.log(type);
+
+  const { users, isPending: isPendenigAllUsers } = useAllUsers();
+  const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
+  const dispatch = useAppDispatch();
+
+  if (isPendenigAllUsers || isPendingCurrentUser) return null;
+
+  const filteredUsers = users?.filter((user) => user._id !== currentUser._id);
+
+  function handleClick() {
+    const redirect =
+      type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
+    dispatch(updateSideBarView({ redirect, data: { type: sideBarType } }));
+  }
+
+  return (
+    <Container>
+      <AddMembers users={filteredUsers!} />
+      <AddMembersButton onClick={handleClick} />
+    </Container>
+  );
+}
+
+export default AddNewGroupMembers;
diff --git a/app/src/components/side-bar/groups/SearchInput.tsx b/app/src/components/side-bar/groups/SearchInput.tsx
new file mode 100644
index 00000000..09f8cd5f
--- /dev/null
+++ b/app/src/components/side-bar/groups/SearchInput.tsx
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const StyledSearchInput = styled.input`
+  width: 100%;
+  padding: 1rem;
+  font-size: 0.9rem;
+  caret-color: var(--accent-color);
+  color: var(--color-text);
+  outline: none;
+  border: none;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+`;
+
+type SearchInputProps = {
+  searchQuery: string;
+  setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+  placeholder?: string;
+};
+
+function SearchInput({
+  searchQuery,
+  setSearchQuery,
+  placeholder,
+}: SearchInputProps) {
+  return (
+    <StyledSearchInput
+      type="text"
+      placeholder={placeholder || "Search..."}
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+    />
+  );
+}
+
+export default SearchInput;
diff --git a/app/src/components/side-bar/settings/GroupInfoHeader.tsx b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
index 90e748a8..6de77127 100644
--- a/app/src/components/side-bar/settings/GroupInfoHeader.tsx
+++ b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
@@ -10,6 +10,7 @@ import { useSidebarType } from "../SideBarContext";
 import { sideBarPages } from "types/sideBar";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import BackArrow from "@components/BackArrow";
+import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
 
 const StyledSideBarHeader = styled.div`
   display: flex;
@@ -29,6 +30,7 @@ const Container = styled.div`
 
 function GroupInfoHeader() {
   const type = useSidebarType();
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
 
   const { title } = useAppSelector((state) =>
     type === "left"
@@ -52,7 +54,9 @@ function GroupInfoHeader() {
     <StyledSideBarHeader data-testid="settings-side-bar-header">
       <Container>
         {title === "Group Info" ? (
-          <Icon>{getIcon("Close")}</Icon>
+          <Icon onClick={() => setIsRightSideBarOpen(false)}>
+            {getIcon("Close")}
+          </Icon>
         ) : (
           <BackArrow />
         )}
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 9bf1efbf..e9687447 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -60,6 +60,9 @@ enum icons {
   Mute,
   EndCall,
   AddMembers,
+  Lock,
+  Admin,
+  Members,
 }
 
 type iconStrings = keyof typeof icons;
@@ -405,6 +408,15 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/PersonAddAlt1"),
     defaultProps: { fontSize: "large" },
   },
+  Lock: {
+    importFn: () => import("@mui/icons-material/LockOutlined"),
+  },
+  Admin: {
+    importFn: () => import("@mui/icons-material/AdminPanelSettingsOutlined"),
+  },
+  Members: {
+    importFn: () => import("@mui/icons-material/PeopleOutlineOutlined"),
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 8100eb9a..8f58c04e 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -87,6 +87,10 @@ const pagesMap: { [K in pagesStrings]: string } = {
   NEW_CHANNEL: "NewChannel",
   GROUP_INFO: "GroupInfo",
   EDIT_GROUP_INFO: "EditGroupInfo",
+  GROUP_TYPE: "GroupType",
+  ADD_MORE_MEMBERS: "AddMoreMembers",
+  ADMINS: "Admins",
+  ADD_ADMINS: "AddAdmins",
 };
 
 const settingsRows = [
@@ -215,17 +219,18 @@ const newGroup: SideBarView = {
   title: "New Group",
   backView: sideBarPages.ADD_MEMBERS,
   page: "NEW_GROUP",
+  props: { view: "group" },
 };
 
 const newChannel: SideBarView = {
   title: "New Channel",
   backView: sideBarPages.ADD_MEMBERS,
   page: "NEW_CHANNEL",
+  props: { view: "channel" },
 };
 
 const groupInfo: SideBarView = {
   title: "Group Info",
-  backView: undefined,
   page: "GROUP_INFO",
 };
 
@@ -235,6 +240,30 @@ const editGroupInfo: SideBarView = {
   page: "EDIT_GROUP_INFO",
 };
 
+const groupType: SideBarView = {
+  title: "Group Type",
+  backView: sideBarPages.EDIT_GROUP_INFO,
+  page: "GROUP_TYPE",
+};
+
+const addMoreMembers: SideBarView = {
+  title: "Add Members",
+  backView: sideBarPages.GROUP_INFO,
+  page: "ADD_MORE_MEMBERS",
+};
+
+const admins: SideBarView = {
+  title: "Adminstrators",
+  backView: sideBarPages.EDIT_GROUP_INFO,
+  page: "ADMINS",
+};
+
+const addAdmins: SideBarView = {
+  title: "Add Admins",
+  backView: sideBarPages.ADMINS,
+  page: "ADD_ADMINS",
+};
+
 export {
   chats,
   contacts,
@@ -257,4 +286,8 @@ export {
   newChannel,
   groupInfo,
   editGroupInfo,
+  groupType,
+  addMoreMembers,
+  admins,
+  addAdmins,
 };
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 326f9813..45a34b16 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -45,13 +45,13 @@ function ChatBody() {
       chatID: chatId,
     })?.messages;
 
-  const { fetchNextPage } = useFetchNextPage();
+  const { fetchNextPage, hasNextPage } = useFetchNextPage();
 
   const { inView, ref } = useInView({ threshold: 0.01 });
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (inView) {
+    if (inView && hasNextPage) {
       const container = scrollContainerRef.current;
       if (!container) return;
 
diff --git a/app/src/features/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
index 85af66d2..fe344122 100644
--- a/app/src/features/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -64,14 +64,14 @@ function StartNewChat() {
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.ADD_MEMBERS,
-          data: { type: sideBarType },
+          data: { type: sideBarType, view: "channel" },
         })
       );
     } else if (title === "New Group") {
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.ADD_MEMBERS,
-          data: { type: sideBarType },
+          data: { type: sideBarType, view: "group" },
         })
       );
     } else {
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 3aea0370..21657a57 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,19 +1,24 @@
 import { useState } from "react";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
+
 import Avatar from "@components/Avatar";
-import { getIcon } from "@data/icons";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
+import CallLayout from "@features/calls/CallLayout";
+
+import { getIcon } from "@data/icons";
+import { setChatIsBlocked } from "@state/messages/chats";
+
+import { useSocket } from "@hooks/useSocket";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
-import { useOutletContext, useParams } from "react-router-dom";
-import { getChatByID } from "./utils/helpers";
 import { useChatMembers } from "./hooks/useChatMember";
-import { getElapsedTime } from "@utils/helpers";
-import { useSocket } from "@hooks/useSocket";
-import CallLayout from "@features/calls/CallLayout";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
-import { setChatIsBlocked } from "@state/messages/chats";
+import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+
+import { getElapsedTime } from "@utils/helpers";
+import { getChatByID } from "./utils/helpers";
 
 const Container = styled.div<{ $hasMargin?: boolean }>`
   position: absolute;
@@ -126,8 +131,12 @@ function Topbar() {
   const membersData = useChatMembers(chat?.members);
   const { removeFromBlockList } = useBlock();
 
-  const { showRightSideBar, setShowRightSideBar } =
-    useOutletContext<OutletContextProps>();
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
+
+  function handleOpenRightSideBar() {
+    if (chat?.type === "channel" || chat?.type === "group")
+      setIsRightSideBarOpen((prev) => !prev);
+  }
 
   let image;
   let lastSeen;
@@ -168,20 +177,18 @@ function Topbar() {
           image={image}
         />
       )}
-      <Container
-        $hasMargin={isCollapsed}
-        onClick={() => setShowRightSideBar(!showRightSideBar)}
-      >
+      <Container $hasMargin={isCollapsed}>
         <Avatar
           data-testid="chat-avatar"
           image={image}
           name={chat.name?.charAt(0)}
+          onClick={handleOpenRightSideBar}
         />
         {isSearching ? (
           <SearchBar onClose={toggleSearch} />
         ) : (
           <>
-            <Info data-testid="chat-info">
+            <Info data-testid="chat-info" onClick={handleOpenRightSideBar}>
               <Content>
                 <Name data-testid="chat-name">{chat.name}</Name>
                 {lastSeen && (
diff --git a/app/src/features/groups/AddMembersButton.tsx b/app/src/features/groups/AddMembersButton.tsx
new file mode 100644
index 00000000..e50aaa62
--- /dev/null
+++ b/app/src/features/groups/AddMembersButton.tsx
@@ -0,0 +1,21 @@
+import CircleIcon from "@components/CircleIcon";
+
+function AddMembersButton({ onClick }: { onClick: () => void }) {
+  return (
+    <CircleIcon
+      type="submit"
+      as="button"
+      data-testid="add-members-button"
+      $icon="AddMembers"
+      $right={1}
+      $bottom={2}
+      $size={3.3}
+      $padding={0.8}
+      $color="white"
+      $bgColor="var(--accent-color)"
+      onClick={onClick}
+    />
+  );
+}
+
+export default AddMembersButton;
diff --git a/app/src/features/groups/Admins.tsx b/app/src/features/groups/Admins.tsx
new file mode 100644
index 00000000..f521fb39
--- /dev/null
+++ b/app/src/features/groups/Admins.tsx
@@ -0,0 +1,40 @@
+import UsersList from "@components/UsersList";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import AddMembersButton from "./AddMembersButton";
+import SearchInput from "@components/side-bar/groups/SearchInput";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+function Admins() {
+  const { isPending, admins } = useGroupInfo();
+  const [searchQuery, setSearchQuery] = useState("");
+  const dispatch = useDispatch();
+
+  if (isPending) return;
+
+  const filteredAdmins = admins?.filter((admin) =>
+    `${admin.screenFirstName} ${admin.screenLastName}`
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase())
+  );
+
+  function handleClick() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADD_ADMINS,
+        data: { type: "right" },
+      })
+    );
+  }
+
+  return (
+    <>
+      <SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+      <UsersList view="display" users={filteredAdmins} />
+      <AddMembersButton onClick={handleClick} />
+    </>
+  );
+}
+export default Admins;
diff --git a/app/src/features/groups/DeleteGroup.tsx b/app/src/features/groups/DeleteGroup.tsx
new file mode 100644
index 00000000..37c19388
--- /dev/null
+++ b/app/src/features/groups/DeleteGroup.tsx
@@ -0,0 +1,12 @@
+import SettingsRow from "./SettingsRow";
+
+export default function DeleteGroup() {
+  return (
+    <SettingsRow
+      icon="Delete"
+      title="Delete and Leave Group"
+      subtitle=""
+      onClick={() => {}}
+    />
+  );
+}
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index caef9c4e..94ce4fa6 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -1,5 +1,69 @@
+import styled from "styled-components";
+import SettingsRow from "./SettingsRow";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+
+const Container = styled.div`
+  background-color: var(--color-background);
+
+  display: flex;
+  flex-direction: column;
+`;
+
 function EditGroupInfo() {
-  return <div>EditGroupInfo</div>;
+  const dispatch = useDispatch();
+  const { admins, groupMembers, isPending } = useGroupInfo();
+
+  if (isPending) return;
+
+  function handleGroupTypeClick() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.GROUP_TYPE,
+        data: { type: "right" },
+      })
+    );
+  }
+
+  function handleDisplayAdmins() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADMINS,
+        data: { type: "right" },
+      })
+    );
+  }
+
+  return (
+    <Container>
+      <SettingsRow
+        icon="Lock"
+        title="Group Type"
+        subtitle="private"
+        onClick={handleGroupTypeClick}
+      />
+      <SettingsRow
+        icon="Admin"
+        title="Adminstators"
+        subtitle={admins.length}
+        onClick={handleDisplayAdmins}
+      />
+      <SettingsRow
+        icon="Members"
+        title="Members"
+        subtitle={groupMembers.length}
+        onClick={() => {}}
+      />
+      <SettingsRow
+        icon="Delete"
+        title="Delete and Leave Group"
+        subtitle=""
+        onClick={() => {}}
+      />
+    </Container>
+  );
 }
 
 export default EditGroupInfo;
diff --git a/app/src/features/groups/GroupInfo.tsx b/app/src/features/groups/GroupInfo.tsx
index ee223299..f0543a2f 100644
--- a/app/src/features/groups/GroupInfo.tsx
+++ b/app/src/features/groups/GroupInfo.tsx
@@ -2,7 +2,10 @@ import styled from "styled-components";
 import { useGroupInfo } from "./hooks/useGroupInfo";
 import UsersList from "@components/UsersList";
 import Avatar from "@components/Avatar";
-import CircleIcon from "@components/CircleIcon";
+import { sideBarPages } from "types/sideBar";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import AddMembersButton from "./AddMembersButton";
 
 const Container = styled.div`
   display: flex;
@@ -47,8 +50,18 @@ const StyledUsersList = styled.div`
 
 function GroupInfo() {
   const { group, groupMembers, isPending } = useGroupInfo();
+  const dispatch = useDispatch();
   if (isPending) return;
 
+  function handleAddMembers() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADD_MORE_MEMBERS,
+        data: { type: "right", view: "existing group" },
+      })
+    );
+  }
+
   return (
     <Container>
       <GroupDetails>
@@ -62,19 +75,7 @@ function GroupInfo() {
         <UsersList view="display" users={groupMembers!} />
       </StyledUsersList>
 
-      <CircleIcon
-        type="submit"
-        as="button"
-        data-testid="add-members-button"
-        $icon="AddMembers"
-        $right={1}
-        $bottom={2}
-        $size={3.3}
-        $padding={0.8}
-        $color="white"
-        $bgColor="var(--accent-color)"
-        onClick={() => {}}
-      />
+      <AddMembersButton onClick={handleAddMembers} />
     </Container>
   );
 }
diff --git a/app/src/features/groups/GroupType.tsx b/app/src/features/groups/GroupType.tsx
new file mode 100644
index 00000000..f4bc9866
--- /dev/null
+++ b/app/src/features/groups/GroupType.tsx
@@ -0,0 +1,10 @@
+function GroupType() {
+  return (
+    <div>
+      <p>private group</p>
+      <p>public group</p>
+    </div>
+  );
+}
+
+export default GroupType;
diff --git a/app/src/features/groups/NewGroup.tsx b/app/src/features/groups/NewGroup.tsx
index d376bef8..3a1d47a6 100644
--- a/app/src/features/groups/NewGroup.tsx
+++ b/app/src/features/groups/NewGroup.tsx
@@ -33,13 +33,18 @@ const Count = styled.span`
   position: relative;
 `;
 
-export default function NewGroup({ type }: { type: "channel" | "group" }) {
+export default function NewGroup() {
+  const { props } = useAppSelector((state) => state.sideBarData.leftSideBar);
+  const type = props?.view;
+
   const members = useAppSelector((state) => state.selectedUsers);
   const membersCount = members.length;
 
   return (
     <Container>
-      <CreateGroupForm type={type} />
+      {(type === "channel" || type === "group") && (
+        <CreateGroupForm type={type} />
+      )}
 
       {membersCount > 0 && (
         <StyledUsersList>
diff --git a/app/src/features/groups/SettingsRow.tsx b/app/src/features/groups/SettingsRow.tsx
new file mode 100644
index 00000000..f4603dd3
--- /dev/null
+++ b/app/src/features/groups/SettingsRow.tsx
@@ -0,0 +1,64 @@
+import { getIcon, iconStrings } from "@data/icons";
+import styled from "styled-components";
+
+const Row = styled.li<{ $type: string }>`
+  padding: 0.5rem 1rem;
+  list-style: none;
+
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+
+  color: ${(props) =>
+    props.$type === "Delete" ? "var(--color-error)" : "var(--color-text)"};
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.$type === "Delete"
+        ? "var(--color-error-shade)"
+        : "var(--color-chat-hover)"};
+  }
+
+  & svg {
+    fill: ${(props) =>
+      props.$type === "Delete" ? "var(--color-error)" : "var(--color-text)"};
+  }
+`;
+
+const Title = styled.p`
+  text-transform: capitalize;
+`;
+
+const Subtitle = styled.p`
+  text-transform: capitalize;
+  font-size: small;
+
+  color: var(--color-text-secondary);
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type SettingsRowProps = {
+  icon: iconStrings;
+  title: string;
+  subtitle: string | number;
+  onClick: () => void;
+};
+
+function SettingsRow({ icon, title, subtitle, onClick }: SettingsRowProps) {
+  return (
+    <Row onClick={onClick} $type={icon}>
+      {getIcon(icon)}
+      <Content>
+        <Title>{title}</Title>
+        <Subtitle>{subtitle}</Subtitle>
+      </Content>
+    </Row>
+  );
+}
+
+export default SettingsRow;
diff --git a/app/src/features/groups/contexts/RightSideBarProvider.tsx b/app/src/features/groups/contexts/RightSideBarProvider.tsx
new file mode 100644
index 00000000..c3e76897
--- /dev/null
+++ b/app/src/features/groups/contexts/RightSideBarProvider.tsx
@@ -0,0 +1,39 @@
+import { createContext, useState, ReactNode, useContext } from "react";
+
+interface RightSideBarContextType {
+  isRightSideBarOpen: boolean;
+  setIsRightSideBarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const RightSideBarContext = createContext<RightSideBarContextType | undefined>(
+  undefined
+);
+
+interface RightSideBarProviderProps {
+  children: ReactNode;
+}
+
+function RightSideBarProvider({ children }: RightSideBarProviderProps) {
+  const [isRightSideBarOpen, setIsRightSideBarOpen] = useState<boolean>(false);
+
+  return (
+    <RightSideBarContext.Provider
+      value={{ isRightSideBarOpen, setIsRightSideBarOpen }}
+    >
+      {children}
+    </RightSideBarContext.Provider>
+  );
+}
+
+function useRightSideBarContext() {
+  const context = useContext(RightSideBarContext);
+  if (!context) {
+    throw new Error(
+      "useRightSideBarContext must be used within a RightSideBarProvider"
+    );
+  }
+  return context;
+}
+
+export { useRightSideBarContext };
+export default RightSideBarProvider;
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index 911ec453..53304641 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -1,11 +1,12 @@
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
-import { useAllUsers } from "./useAllUsers";
+import { useAllUsers, UserType } from "./useAllUsers";
 import { useState, useEffect } from "react";
 
 function useGroupInfo() {
   const { chatId } = useParams<{ chatId: string }>();
-  const [groupMembers, setGroupMembers] = useState<any[]>([]);
+  const [groupMembers, setGroupMembers] = useState<UserType[]>([]);
+  const [admins, setAdmins] = useState<UserType[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   const group = useAppSelector((state) =>
@@ -28,12 +29,14 @@ function useGroupInfo() {
         })
         .filter((member) => member !== null);
 
+      const groupAdmins = members.filter((member) => member.role === "admin");
       setGroupMembers(members);
+      setAdmins(groupAdmins);
       setIsLoading(false);
     }
   }, [group, users, isPending]);
 
-  return { groupMembers, group, isPending: isLoading };
+  return { groupMembers, group, isPending: isLoading, admins };
 }
 
 export { useGroupInfo };
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index a9254d3a..7c7ac0e0 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -17,6 +17,7 @@ import {
   deleteMessage as deleteMessageAction,
 } from "@state/messages/chats";
 import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
+import toast from "react-hot-toast";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
@@ -50,9 +51,10 @@ interface AcknowledgmentResponse {
 interface AckCreateGroup {
   success: boolean;
   message: string;
-  data: {
+  data?: {
     _id: string;
   };
+  error?: string;
 }
 
 function SocketProvider({ children }: SocketProviderProps) {
@@ -133,6 +135,15 @@ function SocketProvider({ children }: SocketProviderProps) {
         queryClient.invalidateQueries({ queryKey: ["chats"] });
       });
 
+      socket.on("ADD_ADMINS_SERVER", () => {
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      });
+
+      socket.on("ADD_MEMBERS_SERVER", () => {
+        console.log("added");
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      });
+
       socket.on("typing", (isTyping, message) =>
         handleIsTyping(dispatch, isTyping, message.chatId)
       );
@@ -239,7 +250,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   };
   const startConnection = async () => {
-    console.log("kkk");
     const offer = await connectToPeer();
     if (isConnected && socket) {
       console.log(offer);
@@ -288,12 +298,6 @@ function SocketProvider({ children }: SocketProviderProps) {
         });
       });
 
-      // TODO Fix: This makes message got received 3 times
-      // socket.on("RECEIVE_MESSAGE", (message) => {
-      //   console.log("inside recieve");
-      //   console.log(message);
-      //   handleIncomingMessage(dispatch, message, message.chatId);
-      // });
       socket.on("RECIEVE_OFFER", async (offer) => {
         console.log(offer);
         const answer = await createAnswer(offer);
@@ -361,6 +365,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.on("typing", (isTyping, message) =>
         handleIsTyping(dispatch, isTyping, message.chatId)
       );
+
       socket.emit("typing");
       return () => {
         socket.disconnect();
@@ -374,18 +379,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }, [dispatch, sendAnswer, socket]);
 
-  // useEffect(() => {
-  //   if (!isPending && chats?.length) {
-  //     chats.forEach((chat) => {
-  //       socket.emit("join", { chatId: chat._id });
-  //     });
-  //     console.log(
-  //       "Joined all chats:",
-  //       chats.map((chat) => chat._id)
-  //     );
-  //   }
-  // }, [isConnected, isPending, chats, socket]);
-
   function createGroupOrChannel({
     type,
     name,
@@ -396,18 +389,15 @@ function SocketProvider({ children }: SocketProviderProps) {
     members: string[];
   }) {
     if (isConnected && socket) {
-      console.log(type, members, name);
       socket.emit(
         "CREATE_GROUP_CHANNEL",
         { type, name, members },
-        ({ success, data }: AckCreateGroup) => {
-          console.log("CREATE_GROUP_CHANNEL_CALLBACK");
+        ({ success, data, error }: AckCreateGroup) => {
           if (success) {
-            console.log(data._id);
-            navigate(`/${data._id}`);
-          }
-          if (!success) {
-            console.log("failed creating group");
+            console.log("Group/Channel ID:", data?._id);
+            navigate(`/${data?._id}`);
+          } else {
+            toast.error(error || `Failed to create ${type}`);
           }
         }
       );
@@ -418,6 +408,58 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }
 
+  function addGroupMembers({
+    chatId,
+    users,
+  }: {
+    chatId: string;
+    users: string[];
+  }) {
+    if (isConnected && socket) {
+      socket.emit(
+        "ADD_MEMBERS_CLIENT",
+        { chatId, users },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.log(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot add members: not connected to socket server");
+    }
+  }
+
+  function addAdmins({
+    chatId,
+    members,
+  }: {
+    chatId: string;
+    members: string[];
+  }) {
+    console.log(chatId, members);
+    if (isConnected && socket) {
+      socket.emit(
+        "ADD_ADMINS_CLIENT",
+        { chatId, members },
+        ({ success, message }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(`Group size limit exceeded. ${message}`);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot add admins: not connected to socket server");
+    }
+  }
+
   function deleteMessage({
     messageId,
     chatId,
@@ -453,6 +495,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         startConnection,
         createGroupOrChannel,
         deleteMessage,
+        addGroupMembers,
+        addAdmins,
       }}
     >
       {children}
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 2733d750..3d6b0bbf 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -14,6 +14,10 @@ import {
   newChannel,
   groupInfo,
   editGroupInfo,
+  groupType,
+  addMoreMembers,
+  admins,
+  addAdmins,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -21,7 +25,7 @@ interface SideBarView {
   page: pagesStrings;
   title: string;
   backView?: sideBarPages;
-  props?: object;
+  props?: { [key: string]: any };
 }
 
 interface SideBarState {
@@ -62,6 +66,14 @@ function getSideBarPage(type: number): SideBarView {
       return groupInfo;
     case sideBarPages.EDIT_GROUP_INFO:
       return editGroupInfo;
+    case sideBarPages.GROUP_TYPE:
+      return groupType;
+    case sideBarPages.ADD_MORE_MEMBERS:
+      return addMoreMembers;
+    case sideBarPages.ADMINS:
+      return admins;
+    case sideBarPages.ADD_ADMINS:
+      return addAdmins;
     default:
       throw new Error("Unknown Type");
   }
@@ -69,7 +81,7 @@ function getSideBarPage(type: number): SideBarView {
 
 interface actionType {
   redirect: sideBarPages;
-  data: { type: "left" | "right"; [key: string]: string };
+  data: { type: "left" | "right"; [key: string]: any };
 }
 
 const sideBarSlice = createSlice({
@@ -89,6 +101,13 @@ const sideBarSlice = createSlice({
         props: { ...newData.props },
       };
 
+      if (redirect === sideBarPages.ADD_MEMBERS) {
+        updatedSideBar.props = {
+          ...updatedSideBar.props,
+          view: data.view,
+        };
+      }
+
       if (whichSide === "left") {
         state.leftSideBar = updatedSideBar;
       } else {
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index 6d91844a..bc77d5d0 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -188,7 +188,7 @@ const GlobalStyles = createGlobalStyle`
 
   
   --color-error: #e53935;
-  --color-error-shade: #c62828;
+  --color-error-shade: #c628282f;
   --color-success: rgb(0, 199, 62);
   font-size: 16px;
 }
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 855df217..4ba1d09f 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -12,6 +12,10 @@ enum sideBarPages {
   NEW_CHANNEL,
   GROUP_INFO,
   EDIT_GROUP_INFO,
+  GROUP_TYPE,
+  ADD_MORE_MEMBERS,
+  ADMINS,
+  ADD_ADMINS,
 }
 
 type pagesStrings = keyof typeof sideBarPages;
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index e5195d9e..90ccea92 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -16,6 +16,20 @@ export interface SocketContextType {
     name: string;
     members: string[];
   }) => void;
+  addGroupMembers: ({
+    chatId,
+    users,
+  }: {
+    chatId: string;
+    users: string[];
+  }) => void;
+  addAdmins: ({
+    chatId,
+    members,
+  }: {
+    chatId: string;
+    members: string[];
+  }) => void;
   startConnection: (offer?: RTCSessionDescription) => void;
   deleteMessage: ({
     messageId,

From 84e839bcd7c93ab3e67b516f7ea252071b02f7f9 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:33:31 +0200
Subject: [PATCH 092/136] feat(search): global search + integration with
 backend (#132)

* fix: change avatar size to be normal instead of large

* feat: change NoResultsFound to be more reusable

* feat: add search logic infratstructure

* feat: add search integration with the backend

* feat: search tab smart rendering and refactor
---
 .../search/components/NoResultsFound.tsx      |  16 +-
 .../features/search/components/SearchBar.tsx  |  81 +++++-----
 .../features/search/components/SearchTab.tsx  | 112 ++++++++++++++
 .../search/components/TabedSearch.tsx         |   6 +-
 .../components/result-items/ChannelResult.tsx |   2 +-
 .../components/result-items/FileResult.tsx    |   2 +-
 .../components/result-items/MessageResult.tsx |   5 +-
 .../search/components/tabs/MessagesTab.tsx    |  34 -----
 .../search/data/tabs-components-map.tsx       |  43 ++++--
 app/src/features/search/hooks/useSearch.ts    |  32 ++++
 app/src/features/search/services/searchAPI.ts |  40 +++++
 app/src/features/search/types/search.d.ts     |  80 ++++++++++
 .../search/utils/searchTabsHelpers.tsx        | 138 ++++++++++++++++++
 13 files changed, 494 insertions(+), 97 deletions(-)
 create mode 100644 app/src/features/search/components/SearchTab.tsx
 delete mode 100644 app/src/features/search/components/tabs/MessagesTab.tsx
 create mode 100644 app/src/features/search/hooks/useSearch.ts
 create mode 100644 app/src/features/search/services/searchAPI.ts
 create mode 100644 app/src/features/search/types/search.d.ts
 create mode 100644 app/src/features/search/utils/searchTabsHelpers.tsx

diff --git a/app/src/features/search/components/NoResultsFound.tsx b/app/src/features/search/components/NoResultsFound.tsx
index 70c80d9e..a6e102be 100644
--- a/app/src/features/search/components/NoResultsFound.tsx
+++ b/app/src/features/search/components/NoResultsFound.tsx
@@ -29,14 +29,22 @@ const NoResultsSubText = styled.p`
   color: var(--color-text-secondary);
 `;
 
-const NoResultsFound: React.FC = () => {
+interface NoResultsFoundProps {
+  message?: string;
+  subMessage?: string;
+}
+
+const NoResultsFound: React.FC<NoResultsFoundProps> = ({
+  message = "No results found",
+  subMessage = "Try searching for something else",
+}) => {
   return (
     <NoResultsContainer>
       <NoResultsIcon>
-        <Lottie animationData={noResultsAnimation} />
+        <Lottie animationData={noResultsAnimation} key="no-results-image" />
       </NoResultsIcon>
-      <NoResultsText>No results found</NoResultsText>
-      <NoResultsSubText>Try searching for something else</NoResultsSubText>
+      <NoResultsText>{message}</NoResultsText>
+      <NoResultsSubText>{subMessage}</NoResultsSubText>
     </NoResultsContainer>
   );
 };
diff --git a/app/src/features/search/components/SearchBar.tsx b/app/src/features/search/components/SearchBar.tsx
index b7d87cdb..f273eec6 100644
--- a/app/src/features/search/components/SearchBar.tsx
+++ b/app/src/features/search/components/SearchBar.tsx
@@ -79,48 +79,9 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   const currentChat = useSelector((state: RootState) =>
     state.chats.chats.find((chat) => chat._id === chatId),
   );
-  const messages = currentChat?.messages ?? [];
 
   const [isSearchLoading, setIsSearchLoading] = useState(false);
 
-  const performSearch = (term: string) => {
-    if (!term) {
-      dispatch(setSearchResults([]));
-      setIsSearchLoading(false);
-      return;
-    }
-
-    const results = messages.reduce(
-      (
-        acc: Array<{
-          messageId: string;
-          highlightIndex: number;
-        }>,
-        message,
-      ) => {
-        const lowerCaseTerm = term.toLowerCase();
-        const lowerCaseContent = message.content.toLowerCase();
-
-        if (lowerCaseContent.includes(lowerCaseTerm)) {
-          const matchIndices = findAllMatchIndices(message.content, term);
-          matchIndices.forEach((highlightIndex) => {
-            acc.push({
-              messageId: message._id,
-              highlightIndex,
-            });
-          });
-        }
-
-        return acc;
-      },
-      [],
-    );
-
-    dispatch(setSearchTerm(term));
-    dispatch(setSearchResults(results));
-    setIsSearchLoading(false);
-  };
-
   const findAllMatchIndices = (text: string, term: string) => {
     const indices = [];
     let index = text.toLowerCase().indexOf(term.toLowerCase());
@@ -132,11 +93,51 @@ const SearchBar: React.FC<SearchBarProps> = ({ onClose }) => {
   };
 
   useEffect(() => {
+    const messages = currentChat?.messages ?? [];
+
+    const performSearch = (term: string) => {
+      if (!term) {
+        dispatch(setSearchResults([]));
+        setIsSearchLoading(false);
+        return;
+      }
+
+      const results = messages.reduce(
+        (
+          acc: Array<{
+            messageId: string;
+            highlightIndex: number;
+          }>,
+          message,
+        ) => {
+          const lowerCaseTerm = term.toLowerCase();
+          const lowerCaseContent = message.content.toLowerCase();
+
+          if (lowerCaseContent.includes(lowerCaseTerm)) {
+            const matchIndices = findAllMatchIndices(message.content, term);
+            matchIndices.forEach((highlightIndex) => {
+              acc.push({
+                messageId: message._id,
+                highlightIndex,
+              });
+            });
+          }
+
+          return acc;
+        },
+        [],
+      );
+
+      dispatch(setSearchTerm(term));
+      dispatch(setSearchResults(results));
+      setIsSearchLoading(false);
+    };
+
     const timer = setTimeout(() => {
       performSearch(searchTerm);
     }, 100);
     return () => clearTimeout(timer);
-  }, [searchTerm]);
+  }, [searchTerm, dispatch, currentChat?.messages]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch(setSearchTerm(e.target.value));
diff --git a/app/src/features/search/components/SearchTab.tsx b/app/src/features/search/components/SearchTab.tsx
new file mode 100644
index 00000000..d6e5a0a7
--- /dev/null
+++ b/app/src/features/search/components/SearchTab.tsx
@@ -0,0 +1,112 @@
+import React, { useMemo } from "react";
+import { RootState } from "@state/store";
+import { useSelector } from "react-redux";
+import { useSearch } from "@features/search/hooks/useSearch";
+import { SEARCH_TABS } from "@features/search/data/tabs-components-map";
+import NoResultsFound from "./NoResultsFound";
+import {
+  hasResults,
+  renderGlobalResults,
+  renderMessageResults,
+} from "../utils/searchTabsHelpers";
+import ChannelResult from "./result-items/ChannelResult";
+import {
+  SearchResultChannel,
+  SearchResultGroup,
+  SearchResultUser,
+} from "../types/search";
+
+const SearchTab: React.FC = () => {
+  const { searchTerm, selectedTab } = useSelector(
+    (state: RootState) => state.globalSearch,
+  );
+
+  const currentTab = SEARCH_TABS.find((tab) => tab.title === selectedTab);
+
+  const searchRequest = useMemo(
+    () => ({
+      query: searchTerm,
+      filter: currentTab?.filter || [],
+      searchSpace: currentTab?.searchSpace || [],
+      isGlobalSearch: currentTab?.isGlobalSearch || false,
+    }),
+    [searchTerm, currentTab],
+  );
+
+  const { data, isLoading, error } = useSearch(searchRequest);
+
+  if (isLoading)
+    return (
+      <NoResultsFound
+        message="Loading..."
+        subMessage="Wait for a moment please"
+      />
+    );
+
+  if (error)
+    return (
+      <NoResultsFound
+        message="An error occurred"
+        subMessage="Please try again later"
+      />
+    );
+
+  if (!hasResults(data)) return <NoResultsFound />;
+
+  return (
+    <div style={{ height: "100%" }}>
+      {renderMessageResults(data!.searchResult, ["text"], searchTerm)}
+      {renderMessageResults(
+        data!.searchResult,
+        ["image", "video", "GIF", "sticker"],
+        searchTerm,
+      )}
+      {renderMessageResults(data!.searchResult, ["link"], searchTerm)}
+      {renderMessageResults(data!.searchResult, ["file"], searchTerm)}
+      {renderMessageResults(data!.searchResult, ["audio"], searchTerm)}
+
+      {renderGlobalResults<SearchResultGroup>(
+        data?.globalSearchResult?.groups || [],
+        "Groups",
+        (group) => (
+          <ChannelResult
+            key={`group-${group?.id}`}
+            title={group?.name}
+            image={group?.photo}
+            username={group?.name}
+            subscribers={group?.numberOfMembers}
+          />
+        ),
+      )}
+
+      {renderGlobalResults<SearchResultChannel>(
+        data?.globalSearchResult?.channels || [],
+        "Channels",
+        (channel) => (
+          <ChannelResult
+            key={`channel-${channel?.id}`}
+            title={channel?.name}
+            image={channel?.photo}
+            username={channel?.name}
+            subscribers={channel?.numberOfMembers}
+          />
+        ),
+      )}
+
+      {renderGlobalResults<SearchResultUser>(
+        data?.globalSearchResult?.users || [],
+        "Users",
+        (user) => (
+          <ChannelResult
+            key={`user-${user?.id}`}
+            title={`${user?.screenFirstName} ${user?.screenLastName}`}
+            image={user?.photo}
+            username={user?.username}
+          />
+        ),
+      )}
+    </div>
+  );
+};
+
+export default SearchTab;
diff --git a/app/src/features/search/components/TabedSearch.tsx b/app/src/features/search/components/TabedSearch.tsx
index 1d783c15..198d7733 100644
--- a/app/src/features/search/components/TabedSearch.tsx
+++ b/app/src/features/search/components/TabedSearch.tsx
@@ -2,7 +2,7 @@ import { RootState } from "@state/store";
 import { motion, AnimatePresence, LayoutGroup } from "motion/react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-import { SEARCH_TABS_MOCK } from "../data/tabs-components-map";
+import { SEARCH_TABS } from "../data/tabs-components-map";
 import { setSelectedTab } from "@state/messages/global-search";
 
 const TabedSearchContainer = styled(motion.div)`
@@ -78,7 +78,7 @@ const TabedSearch: React.FC = () => {
         >
           <LayoutGroup>
             <TabListWrapper>
-              {SEARCH_TABS_MOCK.map((tab) => (
+              {SEARCH_TABS.map((tab) => (
                 <TabButton
                   key={tab.title}
                   onClick={() => dispatch(setSelectedTab(tab.title))}
@@ -106,7 +106,7 @@ const TabedSearch: React.FC = () => {
                 exit={{ opacity: 0 }}
                 transition={{ type: "tween", duration: 0.2 }}
               >
-                {SEARCH_TABS_MOCK.find(
+                {SEARCH_TABS.find(
                   (tab) => tab.title === selectedTab,
                 )?.component()}
               </TabContent>
diff --git a/app/src/features/search/components/result-items/ChannelResult.tsx b/app/src/features/search/components/result-items/ChannelResult.tsx
index 192e22d3..691a73f4 100644
--- a/app/src/features/search/components/result-items/ChannelResult.tsx
+++ b/app/src/features/search/components/result-items/ChannelResult.tsx
@@ -56,7 +56,7 @@ const ChannelResult: React.FC<ChannelResultProps> = ({
   return (
     <ItemWrapper>
       <ImageWrapper>
-        <Avatar name={title} image={image} size="large" />
+        <Avatar name={title} image={image} />
       </ImageWrapper>
       <ContentWrapper>
         <ItemHeader>
diff --git a/app/src/features/search/components/result-items/FileResult.tsx b/app/src/features/search/components/result-items/FileResult.tsx
index 9b45ce95..d42ea588 100644
--- a/app/src/features/search/components/result-items/FileResult.tsx
+++ b/app/src/features/search/components/result-items/FileResult.tsx
@@ -53,7 +53,7 @@ const FileResult: React.FC<FileResultProps> = ({
   return (
     <ItemWrapper>
       <ImageWrapper>
-        <Avatar name={title} image={image} size="large" />
+        <Avatar name={title} image={image} />
       </ImageWrapper>
       <ContentWrapper>
         <ItemHeader>
diff --git a/app/src/features/search/components/result-items/MessageResult.tsx b/app/src/features/search/components/result-items/MessageResult.tsx
index f731adc7..7ede6b21 100644
--- a/app/src/features/search/components/result-items/MessageResult.tsx
+++ b/app/src/features/search/components/result-items/MessageResult.tsx
@@ -40,8 +40,6 @@ const DateSpan = styled.span`
 const Message = styled.p`
   font-size: 0.875rem;
   color: var(--color-text-secondary);
-  display: flex;
-  align-items: center;
 `;
 
 const MediaPreview = styled.img`
@@ -55,7 +53,6 @@ const MediaPreview = styled.img`
 const Highlight = styled.span`
   background: #cae3f7;
   color: #000000;
-  padding: 0 0.125rem;
   border-radius: 2px;
 `;
 
@@ -98,7 +95,7 @@ const MessageResult: React.FC<MessageResultProps> = ({
   return (
     <ItemWrapper>
       <ImageWrapper>
-        <Avatar name={title} image={image} size="large" />
+        <Avatar name={title} image={image} />
       </ImageWrapper>
       <ContentWrapper>
         <ItemHeader>
diff --git a/app/src/features/search/components/tabs/MessagesTab.tsx b/app/src/features/search/components/tabs/MessagesTab.tsx
deleted file mode 100644
index dba14faf..00000000
--- a/app/src/features/search/components/tabs/MessagesTab.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { RootState } from "@state/store";
-import { useSelector } from "react-redux";
-import MessageResult from "../result-items/MessageResult";
-import NoResultsFound from "../NoResultsFound";
-
-const MESSAGES = [
-  {
-    title: "Telware Testing",
-    date: new Date().toString(),
-    image: "https://placecats.com/200/200",
-    message: "Hello hi there",
-  },
-];
-
-const MessagesTab: React.FC = () => {
-  const { searchTerm } = useSelector((state: RootState) => state.globalSearch);
-
-  return (
-    <div style={{ height: "100%" }}>
-      {MESSAGES.length === 0 && <NoResultsFound />}
-      {MESSAGES.map((message) => (
-        <MessageResult
-          searchTerm={searchTerm}
-          message={message.message}
-          title={message.title}
-          date={message.date}
-          image={message.image}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default MessagesTab;
diff --git a/app/src/features/search/data/tabs-components-map.tsx b/app/src/features/search/data/tabs-components-map.tsx
index 81311ee4..eb9704c0 100644
--- a/app/src/features/search/data/tabs-components-map.tsx
+++ b/app/src/features/search/data/tabs-components-map.tsx
@@ -3,39 +3,62 @@ import AudioResult from "../components/result-items/AudioResult";
 import ChannelResult from "../components/result-items/ChannelResult";
 import FileResult from "../components/result-items/FileResult";
 import MessageResult from "../components/result-items/MessageResult";
-import MessagesTab from "../components/tabs/MessagesTab";
+import SearchTab from "../components/SearchTab";
+import { SearchTabType } from "../types/search";
 
-export const SEARCH_TABS_MOCK = [
+export const SEARCH_TABS: SearchTabType[] = [
   {
     title: "Chats",
-    component: () => <MessagesTab />,
+    component: () => <SearchTab />,
+    filter: ["text"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: true,
   },
   {
     title: "Channnels",
-    component: () => <NoResultsFound />,
+    component: () => <SearchTab />,
+    filter: ["text"],
+    searchSpace: ["channels", "groups"],
+    isGlobalSearch: true,
   },
   {
     title: "Media",
-    component: () => <NoResultsFound />,
+    component: () => <SearchTab />,
+    filter: ["text", "image", "video", "GIF", "sticker"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false,
   },
   {
     title: "Links",
-    component: () => <NoResultsFound />,
+    component: () => <SearchTab />,
+    filter: ["link"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false,
   },
   {
     title: "Files",
-    component: () => <NoResultsFound />,
+    component: () => <SearchTab />,
+    filter: ["file"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false,
   },
   {
     title: "Music",
-    component: () => <NoResultsFound />,
+    component: () => <SearchTab />,
+    filter: ["audio"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false,
   },
   {
     title: "Voice",
-    component: () => <NoResultsFound />,
+    component: () => <SearchTab />,
+    filter: ["audio"],
+    searchSpace: ["groups", "channels"],
+    isGlobalSearch: false,
   },
 ];
-export const SEARCH_TABS = [
+
+export const SEARCH_TABS_MOCK = [
   {
     title: "Chats",
     component: () => (
diff --git a/app/src/features/search/hooks/useSearch.ts b/app/src/features/search/hooks/useSearch.ts
new file mode 100644
index 00000000..8e45f6f8
--- /dev/null
+++ b/app/src/features/search/hooks/useSearch.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { SearchRequest, SearchResponseData } from "../types/search";
+import { Search } from "../services/searchAPI";
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+
+interface UseSearchResponse {
+  data: SearchResponseData | undefined;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+function useSearch(searchRequest: SearchRequest): UseSearchResponse {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ["global-search", searchRequest],
+    queryFn: () => Search(searchRequest),
+    enabled: searchRequest?.query.length > 0,
+    retry: 3,
+    retryDelay: 1000,
+  });
+
+  useEffect(() => {
+    if (error) {
+      toast.error("Failed to search");
+    }
+  }, [error]);
+
+  return { data, isLoading, error, refetch };
+}
+
+export { useSearch };
diff --git a/app/src/features/search/services/searchAPI.ts b/app/src/features/search/services/searchAPI.ts
new file mode 100644
index 00000000..7c3aa174
--- /dev/null
+++ b/app/src/features/search/services/searchAPI.ts
@@ -0,0 +1,40 @@
+import { API_URL } from "@constants";
+import { SearchRequest, SearchResponseData } from "../types/search";
+
+async function Search(
+  searchRequest: SearchRequest,
+): Promise<SearchResponseData | undefined> {
+  if (!searchRequest.query) {
+    return undefined;
+  }
+
+  const filterString = searchRequest.filter.join(",");
+  const searchSpaceString = searchRequest.searchSpace.join(",");
+
+  const res = await fetch(`${API_URL}/search/search-request`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Session-Token": localStorage.getItem("sessionId") || "",
+    },
+    body: JSON.stringify({
+      query: searchRequest.query,
+      searchSpace: searchSpaceString,
+      filter: filterString,
+      isGlobalSearch: searchRequest.isGlobalSearch,
+    }),
+    credentials: "include",
+  });
+
+  const data = await res.json();
+
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+
+  const resultData = data.data;
+
+  return resultData;
+}
+
+export { Search };
diff --git a/app/src/features/search/types/search.d.ts b/app/src/features/search/types/search.d.ts
new file mode 100644
index 00000000..63095703
--- /dev/null
+++ b/app/src/features/search/types/search.d.ts
@@ -0,0 +1,80 @@
+export type SearchFilter =
+  | "text"
+  | "image"
+  | "GIF"
+  | "sticker"
+  | "audio"
+  | "video"
+  | "file"
+  | "link";
+
+export type SearchSpace = "chats" | "groups" | "channels";
+
+export type SearchRequest = {
+  query: string;
+  filter: SearchFilter[];
+  searchSpace: SearchSpace[];
+  isGlobalSearch: boolean;
+};
+
+export type SearchResultMessage = {
+  id: string;
+  content: string;
+  media: string;
+  contentType: SearchFilter;
+  senderId: {
+    username: string;
+    screenFirstName: string;
+    screenLastName: string;
+    photo: string;
+  };
+  chatId: {
+    id: string;
+    name: string;
+    numberOfMembers: number;
+    type: string;
+    photo?: string;
+  };
+  timestamp: string;
+};
+
+export type SearchResultGroup = {
+  id: string;
+  name: string;
+  photo: string;
+  type: string;
+  numberOfMembers: number;
+};
+
+export type SearchResultChannel = {
+  id: string;
+  name: string;
+  photo: string;
+  type: string;
+  numberOfMembers: number;
+};
+
+export type SearchResultUser = {
+  id: string;
+  username: string;
+  photo: string;
+  screenFirstName: string;
+  screenLastName: string;
+};
+
+export type SearchResponseData = {
+  searchResult: SearchResultMessage[];
+  globalSearchResult: {
+    users: SearchResultUser[];
+    groups: SearchResultGroup[];
+    channels: SearchResultChannel[];
+  };
+};
+
+export type SearchTabType = {
+  title: string;
+  component: () => JSX.Element;
+  filter: SearchFilter[];
+  searchSpace: SearchSpace[];
+  isGlobalSearch: boolean;
+};
diff --git a/app/src/features/search/utils/searchTabsHelpers.tsx b/app/src/features/search/utils/searchTabsHelpers.tsx
new file mode 100644
index 00000000..25e419e0
--- /dev/null
+++ b/app/src/features/search/utils/searchTabsHelpers.tsx
@@ -0,0 +1,138 @@
+import styled from "styled-components";
+import AudioResult from "../components/result-items/AudioResult";
+import FileResult from "../components/result-items/FileResult";
+import MessageResult from "../components/result-items/MessageResult";
+import {
+  SearchFilter,
+  SearchResponseData,
+  SearchResultChannel,
+  SearchResultGroup,
+  SearchResultMessage,
+  SearchResultUser,
+} from "../types/search";
+
+const SearchSectionHeader = styled.div`
+  padding: 1rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background-color: var(--color-background-secondary);
+`;
+
+export const getTitle = (
+  item:
+    | SearchResultMessage
+    | SearchResultGroup
+    | SearchResultChannel
+    | SearchResultUser,
+) => {
+  return (
+    (item as SearchResultMessage).chatId?.name ||
+    `${(item as SearchResultUser).screenFirstName} ${(item as SearchResultUser).screenLastName}` ||
+    `${(item as SearchResultMessage).senderId?.screenFirstName} ${(item as SearchResultMessage).senderId?.screenLastName}`
+  );
+};
+
+export const getImage = (
+  item:
+    | SearchResultMessage
+    | SearchResultGroup
+    | SearchResultChannel
+    | SearchResultUser,
+) => {
+  return (
+    (item as SearchResultMessage).chatId?.photo ||
+    (item as SearchResultUser | SearchResultChannel | SearchResultChannel)
+      .photo ||
+    (item as SearchResultMessage).senderId?.photo
+  );
+};
+
+export const hasResults = (data: SearchResponseData | undefined) => {
+  return (
+    !!data &&
+    (data?.searchResult.length > 0 ||
+      data?.globalSearchResult.users.length > 0 ||
+      data?.globalSearchResult.groups.length > 0 ||
+      data?.globalSearchResult.channels.length > 0)
+  );
+};
+
+export const renderMessageResults = (
+  messages: SearchResultMessage[],
+  contentTypes: SearchFilter[],
+  searchTerm: string,
+) => {
+  return messages
+    .filter((message) => contentTypes.includes(message?.contentType))
+    .map((message) => {
+      const commonProps = {
+        searchTerm,
+        message: message?.content,
+        title: getTitle(message),
+        image: getImage(message),
+        date: message?.timestamp,
+      };
+
+      switch (message?.contentType) {
+        case "text":
+          return (
+            <MessageResult
+              key={`search-message-${message?.id}`}
+              {...commonProps}
+            />
+          );
+        case "image":
+        case "video":
+        case "GIF":
+        case "sticker":
+          return (
+            <MessageResult
+              key={`search-message-${message?.id}`}
+              {...commonProps}
+              media={message?.media}
+            />
+          );
+        case "link":
+          return (
+            <MessageResult
+              key={`search-message-${message?.id}`}
+              {...commonProps}
+              link={message?.content}
+            />
+          );
+        case "file":
+          return (
+            <FileResult
+              key={`search-message-${message?.id}`}
+              {...commonProps}
+            />
+          );
+        case "audio":
+          return (
+            <AudioResult
+              key={`search-message-${message?.id}`}
+              {...commonProps}
+              file={message?.media}
+            />
+          );
+        default:
+          return null;
+      }
+    });
+};
+
+export const renderGlobalResults = <T,>(
+  results: T[],
+  sectionTitle: string,
+  renderItem: (item: T) => JSX.Element,
+) => {
+  if (!results || results.length === 0) return null;
+  return (
+    <>
+      <SearchSectionHeader>{sectionTitle}</SearchSectionHeader>
+      {results.map(renderItem)}
+    </>
+  );
+};

From 20ec20af7566f7872d714d3dea47eaa5573ace5f Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:52:19 +0200
Subject: [PATCH 093/136] =?UTF-8?q?=20=F0=9F=90=9B=20Fix=20white=20screen?=
 =?UTF-8?q?=20on=20signup=20(#133)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 👽️ (messaging): Update messages pagination to start from 0

* ✨ (groups): Show group info

* 💄 (groups): Added edit-group ui

* ✨ (groups): Add group members, new admins

* 🐛 Fix white screen on signup
---
 app/src/features/chats/hooks/useChats.ts |  2 +-
 app/src/features/chats/utils/helpers.ts  | 20 +++++++++-----------
 app/src/state/messages/chats.ts          |  6 +++---
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index a48b6690..0c5cbac9 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -20,7 +20,7 @@ export function useChats() {
     const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),
       members:
-        chatData?.members.filter((member) => member._id !== userId) || [],
+        chatData?.members?.filter((member) => member._id !== userId) || [],
     };
 
     dispatch(setAllChats({ chatsData: initialChatState, blockList, userId }));
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index f4b65735..14e5ed7b 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -13,7 +13,7 @@ export function getChatByID({
 
 export function parseChatsToState(chatData?: any) {
   if (!chatData) return [];
-  return chatData.chats.map((chat: any): DetailedChatInterface => {
+  return chatData?.chats?.map((chat: any): DetailedChatInterface => {
     const { isMuted, draft, chat: currChat } = chat;
     const {
       _id: chatId,
@@ -25,17 +25,15 @@ export function parseChatsToState(chatData?: any) {
       name,
     } = currChat;
 
-    const filteredMembers = members
-      .map((member: any) => {
-        return {
-          _id: member.user,
-          Role: member.Role,
-        } as ChatMember;
-      })
+    const filteredMembers = members?.map((member: any) => {
+      return {
+        _id: member.user,
+        Role: member.Role,
+      } as ChatMember;
+    });
 
-
-    const incomingLastMessage = chatData.lastMessages.find(
-      (lastMessage: any) => lastMessage.chatId === chatId
+    const incomingLastMessage = chatData?.lastMessages?.find(
+      (lastMessage: any) => lastMessage?.chatId === chatId
     )?.lastMessage;
 
     return {
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 625c6bd4..e528e5c9 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -43,9 +43,9 @@ const chatsSlice = createSlice({
       }>
     ) => {
       const { blockList, userId, chatsData } = action.payload;
-      const incomminingChats = chatsData.chats;
+      const incomminingChats = chatsData?.chats;
       incomminingChats
-        .map((chat) => {
+        ?.map((chat) => {
           if (chat.type === "private") {
             const members = chat.members;
             const otherUser = members.filter(
@@ -58,7 +58,7 @@ const chatsSlice = createSlice({
           }
           return chat;
         })
-        .filter((chat) => chat !== undefined) as DetailedChatInterface[];
+        ?.filter((chat) => chat !== undefined) as DetailedChatInterface[];
       state.chats = incomminingChats;
       state.members = action.payload.chatsData.members;
     },

From b8b2a3af29d28c31442925ce1539488c797c2c28 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Wed, 18 Dec 2024 18:21:03 +0200
Subject: [PATCH 094/136] feat(search): search in e2ee chats (#134)

* feat: private search in e2ee

* feat: click on result gets you to the chat
---
 .../features/search/components/SearchTab.tsx  | 16 +++-
 .../components/result-items/ChannelResult.tsx | 10 +-
 .../components/result-items/FileResult.tsx    | 10 +-
 .../components/result-items/MessageResult.tsx | 11 ++-
 .../features/search/hooks/useSearchPrivate.ts | 95 +++++++++++++++++++
 .../search/utils/searchTabsHelpers.tsx        |  1 +
 6 files changed, 138 insertions(+), 5 deletions(-)
 create mode 100644 app/src/features/search/hooks/useSearchPrivate.ts

diff --git a/app/src/features/search/components/SearchTab.tsx b/app/src/features/search/components/SearchTab.tsx
index d6e5a0a7..84b0ba2b 100644
--- a/app/src/features/search/components/SearchTab.tsx
+++ b/app/src/features/search/components/SearchTab.tsx
@@ -13,8 +13,10 @@ import ChannelResult from "./result-items/ChannelResult";
 import {
   SearchResultChannel,
   SearchResultGroup,
+  SearchResultMessage,
   SearchResultUser,
 } from "../types/search";
+import { useSearchPrivate } from "../hooks/useSearchPrivate";
 
 const SearchTab: React.FC = () => {
   const { searchTerm, selectedTab } = useSelector(
@@ -34,8 +36,13 @@ const SearchTab: React.FC = () => {
   );
 
   const { data, isLoading, error } = useSearch(searchRequest);
+  const {
+    searchResults: privateSearchResults,
+    isLoading: isPrivateLoading,
+    error: privateError,
+  } = useSearchPrivate(searchRequest);
 
-  if (isLoading)
+  if (isLoading || isPrivateLoading)
     return (
       <NoResultsFound
         message="Loading..."
@@ -43,7 +50,7 @@ const SearchTab: React.FC = () => {
       />
     );
 
-  if (error)
+  if (error || privateError)
     return (
       <NoResultsFound
         message="An error occurred"
@@ -55,6 +62,11 @@ const SearchTab: React.FC = () => {
 
   return (
     <div style={{ height: "100%" }}>
+      {renderMessageResults(
+        privateSearchResults as SearchResultMessage[],
+        ["text", "image", "video", "GIF", "sticker", "link", "file", "audio"],
+        searchTerm,
+      )}
       {renderMessageResults(data!.searchResult, ["text"], searchTerm)}
       {renderMessageResults(
         data!.searchResult,
diff --git a/app/src/features/search/components/result-items/ChannelResult.tsx b/app/src/features/search/components/result-items/ChannelResult.tsx
index 691a73f4..043a5c91 100644
--- a/app/src/features/search/components/result-items/ChannelResult.tsx
+++ b/app/src/features/search/components/result-items/ChannelResult.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
+import { useNavigate } from "react-router-dom";
 
 const ItemWrapper = styled.div`
   display: flex;
@@ -45,6 +46,7 @@ interface ChannelResultProps {
   image?: string;
   username?: string;
   subscribers?: number;
+  chatId?: string;
 }
 
 const ChannelResult: React.FC<ChannelResultProps> = ({
@@ -52,9 +54,15 @@ const ChannelResult: React.FC<ChannelResultProps> = ({
   image,
   username,
   subscribers,
+  chatId,
 }) => {
+  const navigate = useNavigate();
+  const handleItemClick = () => {
+    if (chatId) navigate(`/${chatId}`);
+  };
+
   return (
-    <ItemWrapper>
+    <ItemWrapper onClick={handleItemClick}>
       <ImageWrapper>
         <Avatar name={title} image={image} />
       </ImageWrapper>
diff --git a/app/src/features/search/components/result-items/FileResult.tsx b/app/src/features/search/components/result-items/FileResult.tsx
index d42ea588..e6e51450 100644
--- a/app/src/features/search/components/result-items/FileResult.tsx
+++ b/app/src/features/search/components/result-items/FileResult.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
 import { isValidDate } from "@utils/helpers";
+import { useNavigate } from "react-router-dom";
 
 const ItemWrapper = styled.div`
   display: flex;
@@ -42,6 +43,7 @@ interface FileResultProps {
   image?: string;
   size?: string;
   date?: string;
+  chatId?: string;
 }
 
 const FileResult: React.FC<FileResultProps> = ({
@@ -49,9 +51,15 @@ const FileResult: React.FC<FileResultProps> = ({
   image,
   size,
   date,
+  chatId,
 }) => {
+  const navigate = useNavigate();
+  const handleItemClick = () => {
+    if (chatId) navigate(`/${chatId}`);
+  };
+
   return (
-    <ItemWrapper>
+    <ItemWrapper onClick={handleItemClick}>
       <ImageWrapper>
         <Avatar name={title} image={image} />
       </ImageWrapper>
diff --git a/app/src/features/search/components/result-items/MessageResult.tsx b/app/src/features/search/components/result-items/MessageResult.tsx
index 7ede6b21..99027436 100644
--- a/app/src/features/search/components/result-items/MessageResult.tsx
+++ b/app/src/features/search/components/result-items/MessageResult.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
 import { isValidDate } from "@utils/helpers";
+import { useNavigate } from "react-router-dom";
 
 const ItemWrapper = styled.div`
   display: flex;
@@ -69,6 +70,7 @@ interface MessageResultProps {
   image?: string;
   media?: string;
   link?: string;
+  chatId?: string;
 }
 
 const MessageResult: React.FC<MessageResultProps> = ({
@@ -79,7 +81,10 @@ const MessageResult: React.FC<MessageResultProps> = ({
   image,
   media,
   link,
+  chatId,
 }) => {
+  const navigate = useNavigate();
+
   const highlight = (text: string) => {
     if (!searchTerm) return text;
     const split = text.split(new RegExp(`(${searchTerm})`, "gi"));
@@ -92,8 +97,12 @@ const MessageResult: React.FC<MessageResultProps> = ({
     );
   };
 
+  const handleItemClick = () => {
+    if (chatId) navigate(`/${chatId}`);
+  };
+
   return (
-    <ItemWrapper>
+    <ItemWrapper onClick={handleItemClick}>
       <ImageWrapper>
         <Avatar name={title} image={image} />
       </ImageWrapper>
diff --git a/app/src/features/search/hooks/useSearchPrivate.ts b/app/src/features/search/hooks/useSearchPrivate.ts
new file mode 100644
index 00000000..fd48e068
--- /dev/null
+++ b/app/src/features/search/hooks/useSearchPrivate.ts
@@ -0,0 +1,95 @@
+import { SearchRequest } from "../types/search";
+import { useSelector } from "react-redux";
+import { RootState } from "@state/store";
+import { useEffect, useState } from "react";
+
+type SearchResult = {
+  id?: string;
+  content?: string;
+  media?: string;
+  contentType?: string;
+  senderId?: {
+    username?: string;
+    screenFirstName?: string;
+    screenLastName?: string;
+    photo?: string;
+  };
+  chatId?: {
+    id?: string;
+    name?: string;
+    numberOfMembers?: number;
+    type?: string;
+    photo?: string;
+  };
+  timestamp?: string;
+};
+function useSearchPrivate(searchRequest: SearchRequest) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+
+  const { chats, members } = useSelector((state: RootState) => state.chats);
+
+  useEffect(() => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      if (!searchRequest.query) {
+        setSearchResults([]);
+        setIsLoading(false);
+        return;
+      }
+
+      const privateChats = chats.filter((chat) => chat.type === "private");
+      const messages = privateChats.map((chat) => chat.messages).flat();
+
+      const filteredMessages = messages.filter(
+        (message) =>
+          searchRequest.filter.includes(message?.contentType) &&
+          message?.content
+            .toLowerCase()
+            .includes(searchRequest.query.toLowerCase()),
+      );
+
+      const mergedSearchResults = filteredMessages.map((message) => {
+        const sender = members.find(
+          (member) => member._id === message.senderId,
+        );
+
+        const chat = privateChats.find((chat) => chat._id === message.chatId);
+
+        return {
+          id: message._id,
+          content: message.content,
+          media: message.media,
+          contentType: message.contentType,
+          senderId: {
+            username: sender?.username,
+            screenFirstName: sender?.screenFirstName,
+            screenLastName: sender?.screenLastName,
+            photo: sender?.photo,
+          },
+          chatId: {
+            id: chat?._id,
+            name: chat?.name,
+            numberOfMembers: chat?.members.length,
+            type: chat?.type,
+            photo: chat?.photo,
+          },
+          timestamp: message.timestamp,
+        };
+      });
+
+      setSearchResults(mergedSearchResults);
+      setIsLoading(false);
+    } catch (error) {
+      setError(error instanceof Error ? error : new Error("An error occurred"));
+      setIsLoading(false);
+    }
+  }, [searchRequest, chats, members]);
+
+  return { searchResults, isLoading, error };
+}
+
+export { useSearchPrivate };
diff --git a/app/src/features/search/utils/searchTabsHelpers.tsx b/app/src/features/search/utils/searchTabsHelpers.tsx
index 25e419e0..d20f3213 100644
--- a/app/src/features/search/utils/searchTabsHelpers.tsx
+++ b/app/src/features/search/utils/searchTabsHelpers.tsx
@@ -73,6 +73,7 @@ export const renderMessageResults = (
         title: getTitle(message),
         image: getImage(message),
         date: message?.timestamp,
+        chatId: message?.chatId?.id,
       };
 
       switch (message?.contentType) {

From ca057f8573ee5647675297a0ac916fb17163e8b3 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:12:33 +0200
Subject: [PATCH 095/136] :sparkles: (messaging): E2E encryption finished
 (#135)

* :sparkles: (messaging): E2E encryption finished

* :bug: (messaging): Solving all e2e encryption bugs
---
 app/src/features/chats/ChatItem.tsx           |   2 +-
 app/src/features/chats/hooks/useChat.ts       |   4 +-
 app/src/features/chats/hooks/useChats.ts      |  50 ++-
 .../features/chats/hooks/useEncryptDecrypt.ts |  31 ++
 .../features/chats/hooks/useFetchNextPage.ts  |  48 ++-
 .../features/chats/hooks/useMessageSender.ts  |  19 +-
 app/src/features/chats/utils/helpers.ts       |  90 ++++-
 app/src/mocks/data/chats.ts                   | 130 ++++----
 app/src/sockets/SocketProvider.tsx            | 310 +++++++-----------
 app/src/state/messages/chats.ts               |   3 +
 app/src/utils/renderWithHighlight.tsx         |   4 +-
 11 files changed, 412 insertions(+), 279 deletions(-)
 create mode 100644 app/src/features/chats/hooks/useEncryptDecrypt.ts

diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index fd7d1266..9ec5b67f 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -66,7 +66,7 @@ type ChatItemProps = {
 
 const ChatItem = React.memo(
   ({
-    chat: { _id, type, lastMessage, name, photo, members },
+    chat: { _id, type, lastMessage, name, photo, members, numberOfMembers },
     onClick,
   }: ChatItemProps) => {
     const navigate = useNavigate();
diff --git a/app/src/features/chats/hooks/useChat.ts b/app/src/features/chats/hooks/useChat.ts
index 2e826a9a..38553bcb 100644
--- a/app/src/features/chats/hooks/useChat.ts
+++ b/app/src/features/chats/hooks/useChat.ts
@@ -2,12 +2,12 @@ import { useParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 
 import { getChatApi } from "../services/apiGetChats";
-import { Chat } from "@mocks/data/chats";
+import { DetailedChatInterface } from "@state/messages/chats";
 
 export function useChat() {
   const { chatId } = useParams<{ chatId: string }>();
 
-  const { data: chat, isPending } = useQuery<Chat>({
+  const { data: chat, isPending } = useQuery<DetailedChatInterface>({
     queryKey: ["current-chat", chatId!],
     queryFn: () => getChatApi(chatId!),
   });
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 0c5cbac9..104143c5 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -1,11 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAllChatsApi } from "../services/apiGetChats";
 import { ChatDataType } from "@mocks/data/chats";
-import { ChatsState, setAllChats } from "@state/messages/chats";
+import {
+  ChatsState,
+  DetailedChatInterface,
+  setAllChats,
+} from "@state/messages/chats";
 import { parseChatsToState } from "../utils/helpers";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { useEffect } from "react";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
+import { useEncryptDecrypt } from "./useEncryptDecrypt";
 
 export function useChats() {
   const { data: chatData, isPending } = useQuery<ChatDataType>({
@@ -15,15 +20,56 @@ export function useChats() {
   const dispatch = useAppDispatch();
 
   const { blockList } = useBlock();
+  const { decrypt } = useEncryptDecrypt();
   const userId = useAppSelector((state) => state.user.userInfo.id);
+
+  let DecryptedChats: DetailedChatInterface[] = [];
+
   useEffect(() => {
+    const processMessages = async (chats: DetailedChatInterface[]) => {
+      await Promise.all(
+        chats.map(async (chat) => {
+          const decryptedMsg = await decrypt({
+            message: chat.lastMessage?.content!,
+            key: chat?.encryptionKey!,
+            iv: chat?.initializationVector!,
+          });
+
+
+          return {
+            ...chat,
+            lastMessage: {
+              ...chat.lastMessage,
+              content:
+                typeof decryptedMsg === "string"
+                  ? decryptedMsg
+                  : chat.lastMessage?.content!,
+            },
+          };
+        })
+      ).then((decryptedMessagesArray) => {
+        DecryptedChats = decryptedMessagesArray as DetailedChatInterface[];
+      });
+    };
+
     const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),
       members:
         chatData?.members?.filter((member) => member._id !== userId) || [],
     };
 
-    dispatch(setAllChats({ chatsData: initialChatState, blockList, userId }));
+    processMessages(initialChatState.chats).then(() => {
+      dispatch(
+        setAllChats({
+          chatsData: {
+            chats: DecryptedChats,
+            members: initialChatState.members,
+          },
+          blockList,
+          userId,
+        })
+      );
+    });
   }, [isPending, chatData, dispatch]);
 
   return { isPending };
diff --git a/app/src/features/chats/hooks/useEncryptDecrypt.ts b/app/src/features/chats/hooks/useEncryptDecrypt.ts
new file mode 100644
index 00000000..7e8cd1dc
--- /dev/null
+++ b/app/src/features/chats/hooks/useEncryptDecrypt.ts
@@ -0,0 +1,31 @@
+import { decryptMessage, encryptMessage } from "../utils/helpers";
+
+export const useEncryptDecrypt = () => {
+  const decrypt = async (data: {
+    message: string;
+    key: string;
+    iv: string;
+  }) => {
+    const { message, key, iv } = data;
+    return await decryptMessage({
+      encryptedMessageHex: message,
+      keyHex: key,
+      ivHex: iv,
+    });
+  };
+
+  const encrypt = async (data: {
+    message: string;
+    key: string;
+    iv: string;
+  }) => {
+    const { message, key, iv } = data;
+    return await encryptMessage({
+      message: message,
+      keyHex: key,
+      ivHex: iv,
+    });
+  };
+
+  return { decrypt, encrypt };
+};
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index f81172bb..d977072f 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -2,13 +2,17 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
 import { apiFetchNextPage } from "../services/apiFetchNextPage";
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
 import { mergeMessages } from "@state/messages/chats";
+import { MessageInterface } from "types/messages";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useEncryptDecrypt } from "./useEncryptDecrypt";
+import { getChatByID } from "../utils/helpers";
 
 function useFetchNextPage() {
   const { chatId } = useParams<{ chatId: string }>();
-  const dispatch = useDispatch();
-
+  const dispatch = useAppDispatch();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats, chatID: chatId! });
   const {
     data,
     fetchNextPage,
@@ -25,16 +29,42 @@ function useFetchNextPage() {
     initialPageParam: 0,
   });
 
+  const { decrypt } = useEncryptDecrypt();
+
+  let decryptedMessages: MessageInterface[] = [];
+
   useEffect(() => {
+    const processMessages = async (messages: MessageInterface[]) => {
+      await Promise.all(
+        messages.map(async (msg: MessageInterface) => {
+          const decryptedMsg = await decrypt({
+            message: msg.content,
+            key: chat?.encryptionKey!,
+            iv: chat?.initializationVector!,
+          });
+
+          return {
+            ...msg,
+            content:
+              typeof decryptedMsg === "string" ? decryptedMsg : msg.content,
+          };
+        })
+      ).then((decryptedMessagesArray) => {
+        decryptedMessages = decryptedMessagesArray;
+      });
+    };
+
     if (data) {
       const lastFetchedPage = data.pages[data.pages.length - 1];
       if (lastFetchedPage && chatId) {
-        dispatch(
-          mergeMessages({
-            chatId: chatId,
-            newMessages: lastFetchedPage.messages,
-          })
-        );
+        processMessages(lastFetchedPage.messages).then(() => {
+          dispatch(
+            mergeMessages({
+              chatId: chatId,
+              newMessages: decryptedMessages,
+            })
+          );
+        });
       }
     }
   }, [data, chatId, dispatch]);
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index fa116f78..f1b71819 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -1,18 +1,31 @@
 import { useAppSelector } from "@hooks/useGlobalState";
 import { ContentType, MessageInterface, MessageStatus } from "types/messages";
 import { useSocket } from "@hooks/useSocket";
+import { useEncryptDecrypt } from "./useEncryptDecrypt";
+import { getChatByID } from "../utils/helpers";
 
 export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const activeMessage = useAppSelector((state) => state.activeMessage);
 
-  const handleSendMessage = (
+  const { encrypt } = useEncryptDecrypt();
+  const chats = useAppSelector((state) => state.chats.chats);
+
+  const handleSendMessage = async (
     data: string,
     chatId?: string,
     file?: string,
     type: ContentType = "text"
   ) => {
+    const chat = getChatByID({ chats, chatID: chatId as string });
+
+    const encrypedMessage = await encrypt({
+      message: data,
+      key: chat?.encryptionKey!,
+      iv: chat?.initializationVector!,
+    });
+
     if (activeMessage?.id && activeMessage.state === "edit") {
       editMessage(activeMessage?.id, data, chatId!);
       return;
@@ -20,11 +33,11 @@ export const useMessageSender = () => {
 
     const isReply = activeMessage.state === "reply";
 
-    if (data || file) {
+    if (encrypedMessage || file) {
       const message: MessageInterface = {
         _id: "",
         timestamp: new Date().toISOString(),
-        content: data,
+        content: typeof encrypedMessage === "string" ? encrypedMessage : "",
         contentType: type,
         isPinned: false,
         isForward: false,
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index 14e5ed7b..a519a1db 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -23,6 +23,8 @@ export function parseChatsToState(chatData?: any) {
       isDeleted,
       numberOfMembers,
       name,
+      encryptionKey,
+      initializationVector,
     } = currChat;
 
     const filteredMembers = members?.map((member: any) => {
@@ -32,8 +34,8 @@ export function parseChatsToState(chatData?: any) {
       } as ChatMember;
     });
 
-    const incomingLastMessage = chatData?.lastMessages?.find(
-      (lastMessage: any) => lastMessage?.chatId === chatId
+    const incomingLastMessage = chatData.lastMessages.find(
+      (lastMessage: any) => lastMessage.chatId === chatId
     )?.lastMessage;
 
     return {
@@ -56,6 +58,90 @@ export function parseChatsToState(chatData?: any) {
       isTyping: false,
       showCheckBox: false,
       selectedMessages: [],
+
+      encryptionKey,
+      initializationVector,
     } as DetailedChatInterface;
   });
 }
+
+const hexToArrayBuffer = (hex: string) => {
+  const match = hex.match(/.{1,2}/g);
+  return new Uint8Array(match ? match.map((byte) => parseInt(byte, 16)) : [])
+    .buffer;
+};
+
+const arrayBufferToHex = (buffer: ArrayBuffer) => {
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+};
+
+export const encryptMessage = async ({
+  message,
+  keyHex,
+  ivHex,
+}: {
+  message: string;
+  keyHex: string;
+  ivHex: string;
+}) => {
+  try {
+    const keyBuffer = hexToArrayBuffer(keyHex);
+    const ivBuffer = hexToArrayBuffer(ivHex);
+
+    const cryptoKey = await window.crypto.subtle.importKey(
+      "raw",
+      keyBuffer,
+      { name: "AES-CBC", length: 256 },
+      false,
+      ["encrypt"]
+    );
+
+    const messageBuffer = new TextEncoder().encode(message);
+
+    const encryptedBuffer = await window.crypto.subtle.encrypt(
+      { name: "AES-CBC", iv: ivBuffer },
+      cryptoKey,
+      messageBuffer
+    );
+
+    return arrayBufferToHex(encryptedBuffer);
+  } catch (err: any) {
+    return Error(`Decryption error: ${err.message}`);
+  }
+};
+
+export const decryptMessage = async ({
+  encryptedMessageHex,
+  keyHex,
+  ivHex,
+}: {
+  encryptedMessageHex: string;
+  keyHex: string;
+  ivHex: string;
+}) => {
+  try {
+    const keyBuffer = hexToArrayBuffer(keyHex);
+    const ivBuffer = hexToArrayBuffer(ivHex);
+    const encryptedBuffer = hexToArrayBuffer(encryptedMessageHex);
+
+    const cryptoKey = await window.crypto.subtle.importKey(
+      "raw",
+      keyBuffer,
+      { name: "AES-CBC", length: 256 },
+      false,
+      ["decrypt"]
+    );
+
+    const decryptedBuffer = await window.crypto.subtle.decrypt(
+      { name: "AES-CBC", iv: ivBuffer },
+      cryptoKey,
+      encryptedBuffer
+    );
+
+    return new TextDecoder().decode(decryptedBuffer);
+  } catch (err: any) {
+    return Error(`Decryption error: ${err.message}`);
+  }
+};
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 73a4e4ff..7f9954b8 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,71 +41,71 @@ export type ChatDataType = {
   }[];
 };
 
-export const allChats: Chat[] = [
-  {
-    _id: "1",
-    isSeen: false,
-    members: ["1", "2"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "2",
-    isSeen: false,
-    members: ["2", "1"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "3",
-    isSeen: false,
-    members: ["3"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "4",
-    isSeen: false,
-    members: ["4"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "5",
-    isSeen: false,
-    members: ["5"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "6",
-    isSeen: false,
-    members: ["6"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "7",
-    isSeen: false,
-    members: ["7"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "8",
-    isSeen: false,
-    members: ["8"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "9",
-    isSeen: false,
-    members: ["9"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-];
+// export const allChats: Chat[] = [
+//   {
+//     _id: "1",
+//     isSeen: false,
+//     members: ["1", "2"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "2",
+//     isSeen: false,
+//     members: ["2", "1"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "3",
+//     isSeen: false,
+//     members: ["3"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "4",
+//     isSeen: false,
+//     members: ["4"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "5",
+//     isSeen: false,
+//     members: ["5"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "6",
+//     isSeen: false,
+//     members: ["6"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "7",
+//     isSeen: false,
+//     members: ["7"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "8",
+//     isSeen: false,
+//     members: ["8"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "9",
+//     isSeen: false,
+//     members: ["9"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+// ];
 
 export const members: Member[] = [
   {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 7c7ac0e0..6c894e2c 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -17,6 +17,9 @@ import {
   deleteMessage as deleteMessageAction,
 } from "@state/messages/chats";
 import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
+import { useEncryptDecrypt } from "@features/chats/hooks/useEncryptDecrypt";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "@features/chats/utils/helpers";
 import toast from "react-hot-toast";
 
 const handleIncomingMessage = (
@@ -64,129 +67,145 @@ function SocketProvider({ children }: SocketProviderProps) {
   const socket = useSocket();
   const queryClient = useQueryClient();
 
-  useEffect(() => {
-    if (socket) {
-      socket.connect();
-
-      socket.on("connect", () => {
-        const engine = socket.io.engine;
-        setIsConnected(true);
-        console.log("connected");
-
-        engine.on("close", (reason) => {
-          console.log(reason);
-        });
-      });
-
-      socket.on("RECEIVE_MESSAGE", (message) => {
-        console.log("RECEIVED_MESSAGE");
-        handleIncomingMessage(dispatch, message, message.chatId);
-      });
-
-      socket.on(
-        "PIN_MESSAGE_SERVER",
-        ({
-          chatId,
-          messageId,
-          userId,
-        }: {
-          chatId: string;
-          messageId: string;
-          userId: string;
-        }) => {
-          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
-          dispatch(pinMessage({ messageId, chatId }));
-        }
-      );
-
-      socket.on(
-        "UNPIN_MESSAGE_SERVER",
-        ({
-          chatId,
-          messageId,
-          userId,
-        }: {
-          chatId: string;
-          messageId: string;
-          userId: string;
-        }) => {
-          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
-          dispatch(unpinMessage({ messageId, chatId }));
-        }
-      );
+  const { decrypt } = useEncryptDecrypt();
+  const chats = useAppSelector((state) => state.chats.chats);
 
-      socket.on(
-        "EDIT_MESSAGE_SERVER",
-        ({
-          chatId,
-          content,
-          id,
-        }: {
-          chatId: string;
-          content: string;
-          id: string;
-        }) => {
-          console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
-          dispatch(editMessage({ chatId, messageId: id, content }));
-        }
-      );
+  useEffect(() => {
+    if (!socket) return;
 
-      socket.on("JOIN_GROUP_CHANNEL", () => {
-        queryClient.invalidateQueries({ queryKey: ["chats"] });
-      });
+    socket.connect();
 
-      socket.on("ADD_ADMINS_SERVER", () => {
-        queryClient.invalidateQueries({ queryKey: ["chats"] });
-      });
+    const onConnect = () => {
+      setIsConnected(true);
+      console.log("Socket connected");
 
-      socket.on("ADD_MEMBERS_SERVER", () => {
-        console.log("added");
-        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      socket.io.engine.on("close", (reason) => {
+        console.log("Socket connection closed:", reason);
       });
+    };
 
-      socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId)
-      );
+    const onReceiveMessage = (message: MessageInterface) => {
+      const chat = getChatByID({ chats, chatID: message.chatId });
 
-      socket.emit("typing");
-      return () => {
-        socket.disconnect();
+      console.log("Received message:", message);
+      if (!chat) {
+        console.warn("No chat context available for decryption");
+        return;
+      }
 
-        socket.off("connect");
-        socket.off("disconnect");
-        socket.off("receive_message");
-        socket.off("typing");
-      };
-    }
-  }, [dispatch, queryClient, socket]);
+      if (chat.type === "private") {
+        decrypt({
+          message: message.content,
+          key: chat.encryptionKey!,
+          iv: chat.initializationVector!,
+        })
+          .then((content) => {
+            console.log("Decrypted content:", content);
+            handleIncomingMessage(
+              dispatch,
+              { ...message, content: content as string },
+              message.chatId
+            );
+          })
+          .catch((error) => {
+            console.error("Decryption failed:", error);
+          });
+      } else {
+        handleIncomingMessage(dispatch, message, message.chatId);
+      }
+    };
+
+    socket.on("connect", onConnect);
+    socket.on("RECEIVE_MESSAGE", onReceiveMessage);
+    socket.on("PIN_MESSAGE_SERVER", ({ chatId, messageId, userId }) => {
+      console.log("PIN_MESSAGE_SERVER", chatId, messageId, userId);
+      dispatch(pinMessage({ messageId, chatId }));
+    });
+    socket.on("UNPIN_MESSAGE_SERVER", ({ chatId, messageId, userId }) => {
+      console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
+      dispatch(unpinMessage({ messageId, chatId }));
+    });
+    socket.on("EDIT_MESSAGE_SERVER", ({ chatId, content, id }) => {
+      console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
+      dispatch(editMessage({ chatId, messageId: id, content }));
+    });
+    socket.on("JOIN_GROUP_CHANNEL", () => {
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+    socket.on("typing", (isTyping, message) =>
+      handleIsTyping(dispatch, isTyping, message.chatId)
+    );
+
+    socket.on("RECIEVE_OFFER", async (offer) => {
+      console.log(offer);
+      const answer = await createAnswer(offer);
+      sendAnswer(answer);
+    });
+    socket.on("RECEIVE_ANSWER", async (answer: string) => {
+      console.log(answer);
+      await startCall(answer);
+    });
+
+    socket.emit("typing");
+
+    return () => {
+      console.log("Cleaning up socket listeners");
+
+      socket.disconnect();
+
+      socket.off("connect", onConnect);
+      socket.off("RECEIVE_MESSAGE", onReceiveMessage);
+      socket.off("PIN_MESSAGE_SERVER");
+      socket.off("UNPIN_MESSAGE_SERVER");
+      socket.off("EDIT_MESSAGE_SERVER");
+      socket.off("JOIN_GROUP_CHANNEL");
+      socket.off("typing");
+      socket.io.engine.off("close");
+    };
+  }, [socket, chats, decrypt, dispatch, queryClient]);
 
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
+      const chat = getChatByID({ chats, chatID: sentMessage.chatId });
+
       const messageToSend = {
         ...sentMessage,
         isFirstTime: false,
-        chatType: "private",
+        chatType: chat?.type,
         threadMessages: [],
       };
       console.log("messageToSend", messageToSend);
       socket.emit(
         "SEND_MESSAGE",
         messageToSend,
-        ({ success, message, res }: AcknowledgmentResponse) => {
+        ({ success, res }: AcknowledgmentResponse) => {
           if (!success) {
             console.log("Failed to send", res);
           }
           if (success) {
-            console.log(message);
             const _id = res.messageId;
-            handleIncomingMessage(
-              dispatch,
-              {
-                ...sentMessage,
-                _id,
-              },
-              sentMessage.chatId
-            );
+
+            if (!chat) return;
+
+            if (chat?.type === "private") {
+              decrypt({
+                message: sentMessage.content,
+                key: chat?.encryptionKey!,
+                iv: chat?.initializationVector!,
+              }).then((content) => {
+                handleIncomingMessage(
+                  dispatch,
+                  { ...sentMessage, content: content as string, _id },
+                  sentMessage.chatId
+                );
+              });
+            } else {
+              handleIncomingMessage(
+                dispatch,
+                { ...sentMessage, _id },
+                sentMessage.chatId
+              );
+            }
           }
         }
       );
@@ -283,101 +302,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     },
     [isConnected, socket]
   );
-  useEffect(() => {
-    if (socket) {
-      socket.connect();
-
-      //TODO: remove and make sure it still works
-      socket.on("connect", () => {
-        const engine = socket.io.engine;
-        setIsConnected(true);
-        console.log("connected");
-
-        engine.on("close", (reason) => {
-          console.log(reason);
-        });
-      });
-
-      socket.on("RECIEVE_OFFER", async (offer) => {
-        console.log(offer);
-        const answer = await createAnswer(offer);
-        sendAnswer(answer);
-      });
-      socket.on("RECEIVE_ANSWER", async (answer: string) => {
-        console.log(answer);
-        await startCall(answer);
-      });
-      socket.on(
-        "PIN_MESSAGE_SERVER",
-        ({
-          chatId,
-          messageId,
-          userId,
-        }: {
-          chatId: string;
-          messageId: string;
-          userId: string;
-        }) => {
-          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
-          dispatch(pinMessage({ messageId, chatId }));
-        }
-      );
-
-      socket.on(
-        "UNPIN_MESSAGE_SERVER",
-        ({
-          chatId,
-          messageId,
-          userId,
-        }: {
-          chatId: string;
-          messageId: string;
-          userId: string;
-        }) => {
-          console.log("UNPIN_MESSAGE_SERVER", chatId, messageId, userId);
-          dispatch(unpinMessage({ messageId, chatId }));
-        }
-      );
-
-      socket.on(
-        "EDIT_MESSAGE_SERVER",
-        ({
-          chatId,
-          content,
-          id,
-        }: {
-          chatId: string;
-          content: string;
-          id: string;
-        }) => {
-          console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
-          dispatch(editMessage({ chatId, messageId: id, content }));
-        }
-      );
-
-      socket.on(
-        "DELETE_MESSAGE_SERVER",
-        ({ chatId, id }: { chatId: string; id: string }) => {
-          dispatch(deleteMessageAction({ messageId: id, chatId }));
-        }
-      );
-
-      socket.on("typing", (isTyping, message) =>
-        handleIsTyping(dispatch, isTyping, message.chatId)
-      );
-
-      socket.emit("typing");
-      return () => {
-        socket.disconnect();
-
-        socket.off("connect");
-        socket.off("disconnect");
-        socket.off("receive_message");
-        socket.off("typing");
-        socket.off("RECIEVE_OFFER");
-      };
-    }
-  }, [dispatch, sendAnswer, socket]);
 
   function createGroupOrChannel({
     type,
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index e528e5c9..d23f90cf 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -18,6 +18,9 @@ interface DetailedChatInterface extends Chat {
   name?: string;
   isBlocked?: boolean;
   photo?: string;
+
+  encryptionKey?: string;
+  initializationVector?: string;
 }
 
 interface ChatsState {
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 8e8284b4..611f47f4 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -9,7 +9,7 @@ function RenderWithHighlight(
   content: string,
   searchTerm?: string,
   searchResults?: Array<{ messageId: string; highlightIndex: number }>,
-  id?: string,
+  id?: string
 ) {
   if (!searchTerm) {
     return content;
@@ -24,7 +24,7 @@ function RenderWithHighlight(
   const before = content.slice(0, result.highlightIndex);
   const highlighted = content.slice(
     result.highlightIndex,
-    result.highlightIndex + searchTerm.length,
+    result.highlightIndex + searchTerm.length
   );
   const after = content.slice(result.highlightIndex + searchTerm.length);
 

From 09c6498431e544182c3ccd798eb01293edee240c Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:45:49 +0200
Subject: [PATCH 096/136] =?UTF-8?q?=F0=9F=90=9B=20(groups):=20Fix=20adding?=
 =?UTF-8?q?=20exisiting=20members=20to=20group=20(#136)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/side-bar/groups/AddAdmins.tsx    | 13 ++++++++-----
 .../components/side-bar/groups/AddMoreMembers.tsx   |  6 ++++--
 app/src/features/groups/hooks/useGroupInfo.ts       |  3 +++
 app/src/sockets/SocketProvider.tsx                  |  5 +++--
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/src/components/side-bar/groups/AddAdmins.tsx b/app/src/components/side-bar/groups/AddAdmins.tsx
index 70daf6fe..25cf48a8 100644
--- a/app/src/components/side-bar/groups/AddAdmins.tsx
+++ b/app/src/components/side-bar/groups/AddAdmins.tsx
@@ -1,16 +1,18 @@
 import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import AddMembers from "./AddMembers";
+import AddMembersButton from "./AddMembersButton";
 
-import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+import { updateSideBarView } from "@state/side-bar/sideBar";
 
 import { sideBarPages } from "types/sideBar";
-import { updateSideBarView } from "@state/side-bar/sideBar";
-import AddMembersButton from "./AddMembersButton";
+
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
-import { useParams } from "react-router-dom";
+import { clearSelectedUsers } from "@state/groups/selectedUsers";
 
 const Container = styled.div`
   width: 100%;
@@ -35,6 +37,7 @@ function AddAdmins() {
     });
     const redirect = sideBarPages.ADMINS;
     dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
+    dispatch(clearSelectedUsers());
   }
 
   if (isPending) return;
@@ -44,7 +47,7 @@ function AddAdmins() {
   return (
     <Container>
       <AddMembers users={normalMembers!} />
-      {selectedUsers.length && <AddMembersButton onClick={handleClick} />}
+      {!!selectedUsers.length && <AddMembersButton onClick={handleClick} />}
     </Container>
   );
 }
diff --git a/app/src/components/side-bar/groups/AddMoreMembers.tsx b/app/src/components/side-bar/groups/AddMoreMembers.tsx
index d5b77e09..6d143f91 100644
--- a/app/src/components/side-bar/groups/AddMoreMembers.tsx
+++ b/app/src/components/side-bar/groups/AddMoreMembers.tsx
@@ -12,6 +12,7 @@ import { useAllUsers } from "@features/groups/hooks/useAllUsers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
 import { useParams } from "react-router-dom";
+import { clearSelectedUsers } from "@state/groups/selectedUsers";
 
 const Container = styled.div`
   width: 100%;
@@ -29,6 +30,8 @@ function AddMoreMembers() {
 
   const dispatch = useDispatch();
 
+  if (isPendingGroupMembers || isPendenigAllUsers) return;
+
   function handleClick() {
     addGroupMembers({
       chatId: chatId!,
@@ -36,10 +39,9 @@ function AddMoreMembers() {
     });
     const redirect = sideBarPages.GROUP_INFO;
     dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
+    dispatch(clearSelectedUsers());
   }
 
-  if (isPendingGroupMembers || isPendenigAllUsers) return;
-
   const filteredUsers = users?.filter(
     (user) => !groupMembers.some((member) => member._id === user._id)
   );
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index 53304641..af7533da 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -15,6 +15,9 @@ function useGroupInfo() {
 
   const { users, isPending } = useAllUsers();
 
+  console.log(groupMembers);
+  console.log(users);
+
   useEffect(() => {
     if (!isPending && group && users?.length) {
       const members = group.members
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 6c894e2c..b6c62b5d 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -349,7 +349,7 @@ function SocketProvider({ children }: SocketProviderProps) {
             queryClient.invalidateQueries({ queryKey: ["chats"] });
           } else {
             toast.error(message);
-            console.log(error);
+            console.error(error);
           }
         }
       );
@@ -370,12 +370,13 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.emit(
         "ADD_ADMINS_CLIENT",
         { chatId, members },
-        ({ success, message }: AckCreateGroup) => {
+        ({ success, message, error }: AckCreateGroup) => {
           if (success) {
             toast.success(message);
             queryClient.invalidateQueries({ queryKey: ["chats"] });
           } else {
             toast.error(`Group size limit exceeded. ${message}`);
+            console.error(error);
           }
         }
       );

From 0ff8e21a40e365846531582673ef80533e91ef4b Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:57:13 +0200
Subject: [PATCH 097/136] chore: add test ids for search module (#137)

---
 app/src/features/search/components/NoResultsFound.tsx |  4 ++--
 app/src/features/search/components/SearchTab.tsx      |  3 +++
 app/src/features/search/components/TabedSearch.tsx    | 11 +++++------
 app/src/features/search/utils/searchTabsHelpers.tsx   |  9 ++++++++-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/src/features/search/components/NoResultsFound.tsx b/app/src/features/search/components/NoResultsFound.tsx
index a6e102be..26edae5e 100644
--- a/app/src/features/search/components/NoResultsFound.tsx
+++ b/app/src/features/search/components/NoResultsFound.tsx
@@ -39,11 +39,11 @@ const NoResultsFound: React.FC<NoResultsFoundProps> = ({
   subMessage = "Try searching for something else",
 }) => {
   return (
-    <NoResultsContainer>
+    <NoResultsContainer data-testid="no-results-container">
       <NoResultsIcon>
         <Lottie animationData={noResultsAnimation} key="no-results-image" />
       </NoResultsIcon>
-      <NoResultsText>{message}</NoResultsText>
+      <NoResultsText data-testid="no-results-text">{message}</NoResultsText>
       <NoResultsSubText>{subMessage}</NoResultsSubText>
     </NoResultsContainer>
   );
diff --git a/app/src/features/search/components/SearchTab.tsx b/app/src/features/search/components/SearchTab.tsx
index 84b0ba2b..c88659c9 100644
--- a/app/src/features/search/components/SearchTab.tsx
+++ b/app/src/features/search/components/SearchTab.tsx
@@ -82,6 +82,7 @@ const SearchTab: React.FC = () => {
         "Groups",
         (group) => (
           <ChannelResult
+            data-testid={`search-group-${group?.id}`}
             key={`group-${group?.id}`}
             title={group?.name}
             image={group?.photo}
@@ -96,6 +97,7 @@ const SearchTab: React.FC = () => {
         "Channels",
         (channel) => (
           <ChannelResult
+            data-testid={`search-channel-${channel?.id}`}
             key={`channel-${channel?.id}`}
             title={channel?.name}
             image={channel?.photo}
@@ -110,6 +112,7 @@ const SearchTab: React.FC = () => {
         "Users",
         (user) => (
           <ChannelResult
+            data-testid={`search-user-${user?.id}`}
             key={`user-${user?.id}`}
             title={`${user?.screenFirstName} ${user?.screenLastName}`}
             image={user?.photo}
diff --git a/app/src/features/search/components/TabedSearch.tsx b/app/src/features/search/components/TabedSearch.tsx
index 198d7733..d42a2506 100644
--- a/app/src/features/search/components/TabedSearch.tsx
+++ b/app/src/features/search/components/TabedSearch.tsx
@@ -75,29 +75,27 @@ const TabedSearch: React.FC = () => {
           exit={{ opacity: 0, x: "-100%" }}
           transition={{ type: "spring", duration: 0.2 }}
           key="tap-search"
+          data-testid="active-tabed-search-container"
         >
           <LayoutGroup>
-            <TabListWrapper>
+            <TabListWrapper data-testid="tab-list-wrapper">
               {SEARCH_TABS.map((tab) => (
                 <TabButton
                   key={tab.title}
                   onClick={() => dispatch(setSelectedTab(tab.title))}
                   $active={selectedTab === tab.title}
+                  data-testid={`tab-button-${tab.title}`}
                 >
                   {tab.title}
                   {selectedTab === tab.title && (
                     <TabUnderline
                       layoutId="underline"
-                      transition={{
-                        type: "spring",
-                        duration: 0.3,
-                      }}
+                      transition={{ type: "spring", duration: 0.3 }}
                     />
                   )}
                 </TabButton>
               ))}
             </TabListWrapper>
-
             <AnimatePresence mode="wait">
               <TabContent
                 key={selectedTab}
@@ -105,6 +103,7 @@ const TabedSearch: React.FC = () => {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ type: "tween", duration: 0.2 }}
+                data-testid="tab-content"
               >
                 {SEARCH_TABS.find(
                   (tab) => tab.title === selectedTab,
diff --git a/app/src/features/search/utils/searchTabsHelpers.tsx b/app/src/features/search/utils/searchTabsHelpers.tsx
index d20f3213..752815cc 100644
--- a/app/src/features/search/utils/searchTabsHelpers.tsx
+++ b/app/src/features/search/utils/searchTabsHelpers.tsx
@@ -81,6 +81,7 @@ export const renderMessageResults = (
           return (
             <MessageResult
               key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
               {...commonProps}
             />
           );
@@ -91,6 +92,7 @@ export const renderMessageResults = (
           return (
             <MessageResult
               key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
               {...commonProps}
               media={message?.media}
             />
@@ -99,6 +101,7 @@ export const renderMessageResults = (
           return (
             <MessageResult
               key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
               {...commonProps}
               link={message?.content}
             />
@@ -107,6 +110,7 @@ export const renderMessageResults = (
           return (
             <FileResult
               key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
               {...commonProps}
             />
           );
@@ -114,6 +118,7 @@ export const renderMessageResults = (
           return (
             <AudioResult
               key={`search-message-${message?.id}`}
+              data-testid={`search-message-${message?.id}`}
               {...commonProps}
               file={message?.media}
             />
@@ -132,7 +137,9 @@ export const renderGlobalResults = <T,>(
   if (!results || results.length === 0) return null;
   return (
     <>
-      <SearchSectionHeader>{sectionTitle}</SearchSectionHeader>
+      <SearchSectionHeader data-testid={`search-section-${sectionTitle}`}>
+        {sectionTitle}
+      </SearchSectionHeader>
       {results.map(renderItem)}
     </>
   );

From 19685488cb9b98489377305591797db83cb0647d Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Thu, 19 Dec 2024 17:57:03 +0200
Subject: [PATCH 098/136] :bug: (messaging): delete back to life (#138)

---
 app/src/sockets/SocketProvider.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index b6c62b5d..5b06157a 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -146,6 +146,13 @@ function SocketProvider({ children }: SocketProviderProps) {
       await startCall(answer);
     });
 
+    socket.on(
+      "DELETE_MESSAGE_SERVER",
+      ({ chatId, id }: { chatId: string; id: string }) => {
+        dispatch(deleteMessageAction({ messageId: id, chatId }));
+      }
+    );
+
     socket.emit("typing");
 
     return () => {

From cc8c2164f56bcc4287faca061033c062d0a17cdb Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Thu, 19 Dec 2024 20:30:57 +0200
Subject: [PATCH 099/136] =?UTF-8?q?=F0=9F=90=9B=20(groups):=20Fix=20receiv?=
 =?UTF-8?q?e=20empty=20messages=20(#139)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 (groups): Added socket server-event for add members

* 🔇 (groups): Removed unnecessary logs

* 🐛 (groups): Fix receive empty messages
---
 app/src/components/CircleIcon.tsx             |  3 ++
 app/src/components/User.tsx                   | 23 +++++++---
 .../components/side-bar/groups/AddAdmins.tsx  |  1 -
 .../components/side-bar/groups/AddMembers.tsx |  8 +++-
 .../side-bar/groups/AddMembersButton.tsx      |  2 +-
 .../side-bar/groups/AddMoreMembers.tsx        |  1 -
 .../side-bar/groups/AddNewGroupMembers.tsx    |  3 --
 .../side-bar/groups/SearchInput.tsx           |  1 +
 .../side-bar/settings/GroupInfoHeader.tsx     | 16 ++++---
 app/src/features/chats/ChatItem.tsx           |  2 +-
 app/src/features/chats/Topbar.tsx             |  2 +-
 .../features/chats/hooks/useMessageSender.ts  |  8 ++--
 app/src/features/groups/AddMembersButton.tsx  |  2 +-
 app/src/features/groups/Admins.tsx            |  5 ++-
 app/src/features/groups/EditGroupInfo.tsx     |  6 ++-
 app/src/features/groups/GroupInfo.tsx         | 17 ++++---
 app/src/features/groups/SettingsRow.tsx       | 15 +++++--
 app/src/features/groups/hooks/useGroupInfo.ts |  3 --
 app/src/main.tsx                              | 12 ++---
 app/src/sockets/SocketProvider.tsx            | 44 ++++++++++++-------
 app/src/types/messages.ts                     |  2 +-
 app/src/types/socket.ts                       |  2 +-
 22 files changed, 111 insertions(+), 67 deletions(-)

diff --git a/app/src/components/CircleIcon.tsx b/app/src/components/CircleIcon.tsx
index 1e6e6345..da713c84 100644
--- a/app/src/components/CircleIcon.tsx
+++ b/app/src/components/CircleIcon.tsx
@@ -14,6 +14,7 @@ interface CircleIconProps {
   children?: React.ReactNode;
   as?: React.ElementType;
   type?: string;
+  testid?: string;
 }
 
 const StyledCircleIcon = styled.div<CircleIconProps>`
@@ -68,9 +69,11 @@ function CircleIcon({
   children,
   as,
   type,
+  testid,
 }: CircleIconProps) {
   return (
     <StyledCircleIcon
+      data-testid={testid}
       onClick={onClick}
       {...{
         $icon,
diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
index 013ab1c7..3620aa17 100644
--- a/app/src/components/User.tsx
+++ b/app/src/components/User.tsx
@@ -73,7 +73,7 @@ type UserProps = {
   view: "display" | "update";
 };
 
-export default function User({ user, view }: UserProps) {
+function User({ user, view }: UserProps) {
   const { _id, photo, status, screenFirstName, screenLastName, role } = user;
 
   const dispatch = useAppDispatch();
@@ -84,24 +84,33 @@ export default function User({ user, view }: UserProps) {
   }
 
   return (
-    <UserRow onClick={handleToggleMember} key={_id}>
+    <UserRow
+      data-testid={`user-row-${_id}`}
+      onClick={handleToggleMember}
+      key={_id}
+    >
       {view === "update" && (
         <Checkbox
+          data-testid="user-selection-checkbox"
+          onChange={handleToggleMember}
           checked={selectedUsers.some(
             (selectedUser) => selectedUser._id === _id
           )}
-          onChange={handleToggleMember}
         />
       )}
 
-      <Avatar name={screenFirstName} image={photo} />
+      <Avatar data-testid={`avatar-user-${_id}`} name={screenFirstName} image={photo} />
       <UserDetails>
         <Details>
-          <Username>{`${screenFirstName} ${screenLastName}`}</Username>
-          {role === "admin" && <Role>{role}</Role>}
+          <Username data-testid="user-screen-name">
+            {`${screenFirstName} ${screenLastName}`}
+          </Username>
+          {role === "admin" && <Role data-testid="user-role">{role}</Role>}
         </Details>
-        <Status>{status}</Status>
+        <Status data-testid="user-status">{status}</Status>
       </UserDetails>
     </UserRow>
   );
 }
+
+export default User;
diff --git a/app/src/components/side-bar/groups/AddAdmins.tsx b/app/src/components/side-bar/groups/AddAdmins.tsx
index 25cf48a8..2217c3db 100644
--- a/app/src/components/side-bar/groups/AddAdmins.tsx
+++ b/app/src/components/side-bar/groups/AddAdmins.tsx
@@ -25,7 +25,6 @@ function AddAdmins() {
   const { groupMembers, isPending } = useGroupInfo();
 
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
-  console.log(selectedUsers);
 
   const dispatch = useDispatch();
   const { addAdmins } = useSocket();
diff --git a/app/src/components/side-bar/groups/AddMembers.tsx b/app/src/components/side-bar/groups/AddMembers.tsx
index 8fd24bdd..56de674a 100644
--- a/app/src/components/side-bar/groups/AddMembers.tsx
+++ b/app/src/components/side-bar/groups/AddMembers.tsx
@@ -30,8 +30,12 @@ function AddMembers({ users }: { users: UserType[] }) {
         setSearchQuery={setSearchQuery}
         placeholder="Add people..."
       />
-      <StyledUsersList>
-        <UsersList users={filteredUsers!} view="update" />
+      <StyledUsersList data-testid="users-container">
+        <UsersList
+          data-testid="users-list"
+          users={filteredUsers!}
+          view="update"
+        />
       </StyledUsersList>
     </>
   );
diff --git a/app/src/components/side-bar/groups/AddMembersButton.tsx b/app/src/components/side-bar/groups/AddMembersButton.tsx
index a82e3ed5..9a97ad00 100644
--- a/app/src/components/side-bar/groups/AddMembersButton.tsx
+++ b/app/src/components/side-bar/groups/AddMembersButton.tsx
@@ -3,7 +3,7 @@ import CircleIcon from "@components/CircleIcon";
 function AddMembersButton({ onClick }: { onClick: () => void }) {
   return (
     <CircleIcon
-      data-testid="confirm-add-members-button"
+      testid="add-members-button"
       $icon="ArrowForward"
       $right={1}
       $bottom={2}
diff --git a/app/src/components/side-bar/groups/AddMoreMembers.tsx b/app/src/components/side-bar/groups/AddMoreMembers.tsx
index 6d143f91..c4d4cd8c 100644
--- a/app/src/components/side-bar/groups/AddMoreMembers.tsx
+++ b/app/src/components/side-bar/groups/AddMoreMembers.tsx
@@ -25,7 +25,6 @@ function AddMoreMembers() {
   const { groupMembers, isPending: isPendingGroupMembers } = useGroupInfo();
   const { users, isPending: isPendenigAllUsers } = useAllUsers();
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
-  console.log(selectedUsers);
   const { addGroupMembers } = useSocket();
 
   const dispatch = useDispatch();
diff --git a/app/src/components/side-bar/groups/AddNewGroupMembers.tsx b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
index 28d7bf6c..bc5fc5b0 100644
--- a/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
+++ b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
@@ -23,12 +23,9 @@ function AddNewGroupMembers() {
       ? state.sideBarData.leftSideBar
       : state.sideBarData.rightSideBar
   );
-  console.log(props);
 
   const type = props?.view;
 
-  console.log(type);
-
   const { users, isPending: isPendenigAllUsers } = useAllUsers();
   const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
   const dispatch = useAppDispatch();
diff --git a/app/src/components/side-bar/groups/SearchInput.tsx b/app/src/components/side-bar/groups/SearchInput.tsx
index 09f8cd5f..d442e14c 100644
--- a/app/src/components/side-bar/groups/SearchInput.tsx
+++ b/app/src/components/side-bar/groups/SearchInput.tsx
@@ -24,6 +24,7 @@ function SearchInput({
 }: SearchInputProps) {
   return (
     <StyledSearchInput
+      data-testid="search-input-users"
       type="text"
       placeholder={placeholder || "Search..."}
       value={searchQuery}
diff --git a/app/src/components/side-bar/settings/GroupInfoHeader.tsx b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
index 6de77127..2d815cb8 100644
--- a/app/src/components/side-bar/settings/GroupInfoHeader.tsx
+++ b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
@@ -49,23 +49,27 @@ function GroupInfoHeader() {
     );
   }
 
-  //TODO: handle onClose
   return (
-    <StyledSideBarHeader data-testid="settings-side-bar-header">
+    <StyledSideBarHeader data-testid="group-info-header">
       <Container>
         {title === "Group Info" ? (
-          <Icon onClick={() => setIsRightSideBarOpen(false)}>
+          <Icon
+            data-testid="close-button"
+            onClick={() => setIsRightSideBarOpen(false)}
+          >
             {getIcon("Close")}
           </Icon>
         ) : (
-          <BackArrow />
+          <BackArrow data-testid="back-arrow" />
         )}
-        <Heading data-testid="settings-title" as={"h4"}>
+        <Heading data-testid="group-settings-title" as={"h4"}>
           {title}
         </Heading>
       </Container>
       {title === "Group Info" && (
-        <Icon onClick={handleEdit}>{getIcon("Edit")}</Icon>
+        <Icon data-testid="edit-button" onClick={handleEdit}>
+          {getIcon("Edit")}
+        </Icon>
       )}
     </StyledSideBarHeader>
   );
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 9ec5b67f..fd7d1266 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -66,7 +66,7 @@ type ChatItemProps = {
 
 const ChatItem = React.memo(
   ({
-    chat: { _id, type, lastMessage, name, photo, members, numberOfMembers },
+    chat: { _id, type, lastMessage, name, photo, members },
     onClick,
   }: ChatItemProps) => {
     const navigate = useNavigate();
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 21657a57..74321a2e 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -177,7 +177,7 @@ function Topbar() {
           image={image}
         />
       )}
-      <Container $hasMargin={isCollapsed}>
+      <Container data-testid="chat-topbar" $hasMargin={isCollapsed}>
         <Avatar
           data-testid="chat-avatar"
           image={image}
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index f1b71819..c82c1d9a 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -32,12 +32,14 @@ export const useMessageSender = () => {
     }
 
     const isReply = activeMessage.state === "reply";
+    const isEncryptedContent =
+      chat?.type! === "private" && typeof encrypedMessage === "string";
 
     if (encrypedMessage || file) {
       const message: MessageInterface = {
         _id: "",
         timestamp: new Date().toISOString(),
-        content: typeof encrypedMessage === "string" ? encrypedMessage : "",
+        content: isEncryptedContent ? encrypedMessage : data,
         contentType: type,
         isPinned: false,
         isForward: false,
@@ -49,9 +51,9 @@ export const useMessageSender = () => {
         isReply,
         status: MessageStatus.sent,
         media: file,
-        replyMessageId: null, // or provide the appropriate value
+        threadMessages: [],
       };
-      sendMessage(message);
+      sendMessage({ ...message, chatType: chat?.type! });
     }
   };
 
diff --git a/app/src/features/groups/AddMembersButton.tsx b/app/src/features/groups/AddMembersButton.tsx
index e50aaa62..d5722981 100644
--- a/app/src/features/groups/AddMembersButton.tsx
+++ b/app/src/features/groups/AddMembersButton.tsx
@@ -5,7 +5,6 @@ function AddMembersButton({ onClick }: { onClick: () => void }) {
     <CircleIcon
       type="submit"
       as="button"
-      data-testid="add-members-button"
       $icon="AddMembers"
       $right={1}
       $bottom={2}
@@ -14,6 +13,7 @@ function AddMembersButton({ onClick }: { onClick: () => void }) {
       $color="white"
       $bgColor="var(--accent-color)"
       onClick={onClick}
+      testid='add-members-button'
     />
   );
 }
diff --git a/app/src/features/groups/Admins.tsx b/app/src/features/groups/Admins.tsx
index f521fb39..2024f5e1 100644
--- a/app/src/features/groups/Admins.tsx
+++ b/app/src/features/groups/Admins.tsx
@@ -33,7 +33,10 @@ function Admins() {
     <>
       <SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
       <UsersList view="display" users={filteredAdmins} />
-      <AddMembersButton onClick={handleClick} />
+      <AddMembersButton
+        data-testid="add-members-button"
+        onClick={handleClick}
+      />
     </>
   );
 }
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index 94ce4fa6..7d6f1ed8 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -37,26 +37,30 @@ function EditGroupInfo() {
   }
 
   return (
-    <Container>
+    <Container data-testid="group-settings-container">
       <SettingsRow
+        testid="group-type"
         icon="Lock"
         title="Group Type"
         subtitle="private"
         onClick={handleGroupTypeClick}
       />
       <SettingsRow
+        testid="admins"
         icon="Admin"
         title="Adminstators"
         subtitle={admins.length}
         onClick={handleDisplayAdmins}
       />
       <SettingsRow
+        testid="members"
         icon="Members"
         title="Members"
         subtitle={groupMembers.length}
         onClick={() => {}}
       />
       <SettingsRow
+        testid="leave-group-button"
         icon="Delete"
         title="Delete and Leave Group"
         subtitle=""
diff --git a/app/src/features/groups/GroupInfo.tsx b/app/src/features/groups/GroupInfo.tsx
index f0543a2f..e6a225d8 100644
--- a/app/src/features/groups/GroupInfo.tsx
+++ b/app/src/features/groups/GroupInfo.tsx
@@ -63,19 +63,24 @@ function GroupInfo() {
   }
 
   return (
-    <Container>
-      <GroupDetails>
+    <Container data-testid="group-info-container">
+      <GroupDetails data-testid="groups-details-container">
         <Avatar name={group?.name} image={group?.photo} size="large" />
         <Info>
-          <GroupName>{group?.name}</GroupName>
-          <MembersCount>{groupMembers.length} members</MembersCount>
+          <GroupName data-testid="group-name">{group?.name}</GroupName>
+          <MembersCount data-testid="group-members-count">
+            {groupMembers.length} members
+          </MembersCount>
         </Info>
       </GroupDetails>
-      <StyledUsersList>
+      <StyledUsersList data-testid="members-list">
         <UsersList view="display" users={groupMembers!} />
       </StyledUsersList>
 
-      <AddMembersButton onClick={handleAddMembers} />
+      <AddMembersButton
+        data-testid="add-members-button"
+        onClick={handleAddMembers}
+      />
     </Container>
   );
 }
diff --git a/app/src/features/groups/SettingsRow.tsx b/app/src/features/groups/SettingsRow.tsx
index f4603dd3..02e4c2bb 100644
--- a/app/src/features/groups/SettingsRow.tsx
+++ b/app/src/features/groups/SettingsRow.tsx
@@ -46,16 +46,23 @@ type SettingsRowProps = {
   icon: iconStrings;
   title: string;
   subtitle: string | number;
+  testid?: string;
   onClick: () => void;
 };
 
-function SettingsRow({ icon, title, subtitle, onClick }: SettingsRowProps) {
+function SettingsRow({
+  icon,
+  title,
+  subtitle,
+  onClick,
+  testid,
+}: SettingsRowProps) {
   return (
-    <Row onClick={onClick} $type={icon}>
+    <Row data-testid={testid} onClick={onClick} $type={icon}>
       {getIcon(icon)}
       <Content>
-        <Title>{title}</Title>
-        <Subtitle>{subtitle}</Subtitle>
+        <Title data-testid={`setting-${title}`}>{title}</Title>
+        <Subtitle data-testid="subtitle">{subtitle}</Subtitle>
       </Content>
     </Row>
   );
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index af7533da..53304641 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -15,9 +15,6 @@ function useGroupInfo() {
 
   const { users, isPending } = useAllUsers();
 
-  console.log(groupMembers);
-  console.log(users);
-
   useEffect(() => {
     if (!isPending && group && users?.length) {
       const members = group.members
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 81323678..6496bcc5 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+// import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import { Provider } from "react-redux";
@@ -16,10 +16,10 @@ async function enableMocking() {
 
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-      <Provider store={store}>
-        <App />
-      </Provider>
-    </StrictMode>
+    // <StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+    // </StrictMode>
   );
 });
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 5b06157a..bdd85b88 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -18,9 +18,8 @@ import {
 } from "@state/messages/chats";
 import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
 import { useEncryptDecrypt } from "@features/chats/hooks/useEncryptDecrypt";
-import { useAppSelector } from "@hooks/useGlobalState";
-import { getChatByID } from "@features/chats/utils/helpers";
 import toast from "react-hot-toast";
+import { useChat } from "@features/chats/hooks/useChat";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
@@ -45,6 +44,7 @@ type SocketProviderProps = {
 interface AcknowledgmentResponse {
   success: boolean;
   message: string;
+  error?: string;
   res: {
     messageId: string;
     message: MessageInterface;
@@ -68,11 +68,14 @@ function SocketProvider({ children }: SocketProviderProps) {
   const queryClient = useQueryClient();
 
   const { decrypt } = useEncryptDecrypt();
-  const chats = useAppSelector((state) => state.chats.chats);
+  const { chat } = useChat();
+  // const chats = useAppSelector((state) => state.chats.chats);
 
   useEffect(() => {
     if (!socket) return;
 
+    console.log(socket);
+
     socket.connect();
 
     const onConnect = () => {
@@ -85,7 +88,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     };
 
     const onReceiveMessage = (message: MessageInterface) => {
-      const chat = getChatByID({ chats, chatID: message.chatId });
+      // const chat = getChatByID({ chats, chatID: message.chatId });
 
       console.log("Received message:", message);
       if (!chat) {
@@ -129,9 +132,20 @@ function SocketProvider({ children }: SocketProviderProps) {
       console.log("EDIT_MESSAGE_SERVER", chatId, id, content);
       dispatch(editMessage({ chatId, messageId: id, content }));
     });
+
     socket.on("JOIN_GROUP_CHANNEL", () => {
+      console.log("YOU'RE ADDED TO GROUP");
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+    socket.on("ADD_ADMINS_SERVER", () => {
+      console.log("NEW ADMINS ARE ADDED");
       queryClient.invalidateQueries({ queryKey: ["chats"] });
     });
+    socket.on("ADD_MEMBERS_SERVER", () => {
+      console.log("NEW MEMBERS ARE ADDED");
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+
     socket.on("typing", (isTyping, message) =>
       handleIsTyping(dispatch, isTyping, message.chatId)
     );
@@ -169,25 +183,21 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.off("typing");
       socket.io.engine.off("close");
     };
-  }, [socket, chats, decrypt, dispatch, queryClient]);
+  }, [socket, chat, decrypt, dispatch, queryClient]);
 
+  //TODO: remove isFirstTime
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
-      const chat = getChatByID({ chats, chatID: sentMessage.chatId });
-
-      const messageToSend = {
-        ...sentMessage,
-        isFirstTime: false,
-        chatType: chat?.type,
-        threadMessages: [],
-      };
-      console.log("messageToSend", messageToSend);
+      // const chat = getChatByID({ chats, chatID: sentMessage.chatId });
+
+      console.log("messageToSend", sentMessage);
       socket.emit(
         "SEND_MESSAGE",
-        messageToSend,
-        ({ success, res }: AcknowledgmentResponse) => {
+        sentMessage,
+        ({ success, res, error, message }: AcknowledgmentResponse) => {
           if (!success) {
-            console.log("Failed to send", res);
+            console.log(message);
+            console.log("Failed to send", error);
           }
           if (success) {
             const _id = res.messageId;
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index bf17c314..767a1edd 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -35,7 +35,7 @@ export interface MessageInterface {
 
   //TODO: should use parentMessageId
   isReply: boolean;
-  replyMessageId: string | null;
+  threadMessages: string[];
 }
 
 export enum StickerTap {
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 90ccea92..9229d506 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -3,7 +3,7 @@ import { MessageInterface } from "./messages";
 
 export interface SocketContextType {
   isConnected: boolean;
-  sendMessage: (message: MessageInterface) => void;
+  sendMessage: (message: MessageInterface & { chatType: string }) => void;
   pinMessage: (chatId: string, messageId: string, userId: string) => void;
   unpinMessage: (chatId: string, messageId: string, userId: string) => void;
   editMessage: (messageId: string, content: string, chatId: string) => void;

From ccc0c024d6848e96e1aea36f99ddd2848aaf9b46 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:41:00 +0200
Subject: [PATCH 100/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Show=20list=20o?=
 =?UTF-8?q?f=20members=20and=20search=20for=20a=20certain=20one=20(#140)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/side-bar/SideBar.tsx       |  6 +++
 app/src/data/sideBar.ts                       |  8 ++++
 app/src/features/groups/AddMembersButton.tsx  |  7 ++-
 app/src/features/groups/EditGroupInfo.tsx     | 10 ++++-
 app/src/features/groups/Members.tsx           | 43 +++++++++++++++++++
 app/src/features/groups/hooks/useGroupInfo.ts | 12 +++++-
 app/src/state/side-bar/sideBar.ts             |  3 ++
 app/src/types/sideBar.ts                      |  1 +
 8 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 app/src/features/groups/Members.tsx

diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 49da88f0..79dc1616 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -26,6 +26,7 @@ import AddNewGroupMembers from "./groups/AddNewGroupMembers.js";
 import AddMoreMembers from "./groups/AddMoreMembers.js";
 import Admins from "@features/groups/Admins.js";
 import AddAdmins from "./groups/AddAdmins.js";
+import Members from "@features/groups/Members.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -149,6 +150,11 @@ const sideBarMap: {
       <AddAdmins />
     </SettingsSideBar>
   ),
+  Members: () => (
+    <SettingsSideBar rows={[]}>
+      <Members />
+    </SettingsSideBar>
+  ),
 };
 
 function Sidebar({ type }: { type: "left" | "right" }) {
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 8f58c04e..e7cbdee2 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -91,6 +91,7 @@ const pagesMap: { [K in pagesStrings]: string } = {
   ADD_MORE_MEMBERS: "AddMoreMembers",
   ADMINS: "Admins",
   ADD_ADMINS: "AddAdmins",
+  MEMBERS: "Members",
 };
 
 const settingsRows = [
@@ -264,6 +265,12 @@ const addAdmins: SideBarView = {
   page: "ADD_ADMINS",
 };
 
+const members: SideBarView = {
+  title: "Members",
+  backView: sideBarPages.EDIT_GROUP_INFO,
+  page: "MEMBERS",
+};
+
 export {
   chats,
   contacts,
@@ -290,4 +297,5 @@ export {
   addMoreMembers,
   admins,
   addAdmins,
+  members,
 };
diff --git a/app/src/features/groups/AddMembersButton.tsx b/app/src/features/groups/AddMembersButton.tsx
index d5722981..18d1d8a2 100644
--- a/app/src/features/groups/AddMembersButton.tsx
+++ b/app/src/features/groups/AddMembersButton.tsx
@@ -1,6 +1,11 @@
 import CircleIcon from "@components/CircleIcon";
+import { useGroupInfo } from "./hooks/useGroupInfo";
 
 function AddMembersButton({ onClick }: { onClick: () => void }) {
+  const { isCurrUserAdmin, isPending } = useGroupInfo();
+
+  if (isPending || !isCurrUserAdmin) return;
+
   return (
     <CircleIcon
       type="submit"
@@ -13,7 +18,7 @@ function AddMembersButton({ onClick }: { onClick: () => void }) {
       $color="white"
       $bgColor="var(--accent-color)"
       onClick={onClick}
-      testid='add-members-button'
+      testid="add-members-button"
     />
   );
 }
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index 7d6f1ed8..bbd17a7f 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -35,6 +35,14 @@ function EditGroupInfo() {
       })
     );
   }
+  function handleDisplayMembers() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.MEMBERS,
+        data: { type: "right" },
+      })
+    );
+  }
 
   return (
     <Container data-testid="group-settings-container">
@@ -57,7 +65,7 @@ function EditGroupInfo() {
         icon="Members"
         title="Members"
         subtitle={groupMembers.length}
-        onClick={() => {}}
+        onClick={handleDisplayMembers}
       />
       <SettingsRow
         testid="leave-group-button"
diff --git a/app/src/features/groups/Members.tsx b/app/src/features/groups/Members.tsx
new file mode 100644
index 00000000..f93dd351
--- /dev/null
+++ b/app/src/features/groups/Members.tsx
@@ -0,0 +1,43 @@
+import UsersList from "@components/UsersList";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import AddMembersButton from "./AddMembersButton";
+import SearchInput from "@components/side-bar/groups/SearchInput";
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+function Members() {
+  const { isPending, groupMembers } = useGroupInfo();
+  const [searchQuery, setSearchQuery] = useState("");
+  const dispatch = useDispatch();
+
+  if (isPending) return;
+
+  const filteredMembers = groupMembers?.filter((member) =>
+    `${member.screenFirstName} ${member.screenLastName}`
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase())
+  );
+
+  function handleClick() {
+    dispatch(
+      updateSideBarView({
+        redirect: sideBarPages.ADD_MORE_MEMBERS,
+        data: { type: "right" },
+      })
+    );
+  }
+
+  return (
+    <>
+      <SearchInput searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+      <UsersList view="display" users={filteredMembers} />
+      <AddMembersButton
+        data-testid="add-members-button"
+        onClick={handleClick}
+      />
+    </>
+  );
+}
+export default Members;
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index 53304641..047d0f10 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -2,12 +2,15 @@ import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
 import { useAllUsers, UserType } from "./useAllUsers";
 import { useState, useEffect } from "react";
+import { useUser } from "@features/authentication/login/hooks/useUser";
 
 function useGroupInfo() {
   const { chatId } = useParams<{ chatId: string }>();
   const [groupMembers, setGroupMembers] = useState<UserType[]>([]);
   const [admins, setAdmins] = useState<UserType[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isCurrUserAdmin, setIsCurrUserAdmin] = useState(false);
+  const { user, isPending: isPendingCurrUser } = useUser();
 
   const group = useAppSelector((state) =>
     state.chats.chats.find((chat) => chat._id === chatId)
@@ -30,13 +33,18 @@ function useGroupInfo() {
         .filter((member) => member !== null);
 
       const groupAdmins = members.filter((member) => member.role === "admin");
+      setIsCurrUserAdmin(
+        members.some(
+          (member) => member._id === user._id && member.role === "admin"
+        )
+      );
       setGroupMembers(members);
       setAdmins(groupAdmins);
       setIsLoading(false);
     }
-  }, [group, users, isPending]);
+  }, [group, users, isPending, isPendingCurrUser, user]);
 
-  return { groupMembers, group, isPending: isLoading, admins };
+  return { groupMembers, group, isPending: isLoading, admins, isCurrUserAdmin };
 }
 
 export { useGroupInfo };
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 3d6b0bbf..d66254e6 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -18,6 +18,7 @@ import {
   addMoreMembers,
   admins,
   addAdmins,
+  members,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -74,6 +75,8 @@ function getSideBarPage(type: number): SideBarView {
       return admins;
     case sideBarPages.ADD_ADMINS:
       return addAdmins;
+    case sideBarPages.MEMBERS:
+      return members;
     default:
       throw new Error("Unknown Type");
   }
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 4ba1d09f..d33993a5 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -16,6 +16,7 @@ enum sideBarPages {
   ADD_MORE_MEMBERS,
   ADMINS,
   ADD_ADMINS,
+  MEMBERS,
 }
 
 type pagesStrings = keyof typeof sideBarPages;

From f377fb96828be12c7239165da519aa2594691bf6 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 20 Dec 2024 05:50:58 +0200
Subject: [PATCH 101/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Remove=20users?=
 =?UTF-8?q?=20from=20group=20by=20admin,=20Leave=20group=20(#141)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (groups): Leave group

* ✨ (groups): Remove users from group by admin
---
 app/src/components/OptionList.tsx             | 44 +++++++++++
 app/src/components/User.tsx                   | 44 ++++++++++-
 app/src/data/icons.tsx                        |  5 ++
 app/src/features/groups/EditGroupInfo.tsx     | 17 ++++-
 app/src/features/groups/hooks/useGroupInfo.ts |  9 ++-
 app/src/sockets/SocketProvider.tsx            | 73 ++++++++++++++++---
 app/src/state/side-bar/sideBar.ts             |  5 +-
 app/src/types/socket.ts                       |  8 ++
 8 files changed, 188 insertions(+), 17 deletions(-)
 create mode 100644 app/src/components/OptionList.tsx

diff --git a/app/src/components/OptionList.tsx b/app/src/components/OptionList.tsx
new file mode 100644
index 00000000..34bb5b98
--- /dev/null
+++ b/app/src/components/OptionList.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+const OptionListContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+
+  background-color: var(--color-background-compact-menu);
+  backdrop-filter: blur(0.3125rem);
+  -webkit-backdrop-filter: blur(0.3125rem);
+
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
+  min-width: 9.375rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-background-compact-menu-hover);
+  }
+`;
+
+const Option = styled.div`
+  display: flex;
+  justify-content: space-around;
+  gap: 0.3125rem;
+  font-size: 0.9rem;
+  color: var(--color-text);
+`;
+
+type OptionListProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+const OptionList = ({ onClick, children }: OptionListProps) => {
+  return (
+    <OptionListContainer onClick={onClick}>
+      <Option>{children}</Option>
+    </OptionListContainer>
+  );
+};
+
+export default OptionList;
diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
index 3620aa17..40d55f63 100644
--- a/app/src/components/User.tsx
+++ b/app/src/components/User.tsx
@@ -1,14 +1,20 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import Avatar from "./Avatar";
 import Checkbox from "./Checkbox";
-
-import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import OptionList from "./OptionList";
 
 import { toggleSelectUser } from "@state/groups/selectedUsers";
 import { UserType } from "@features/groups/hooks/useAllUsers";
+import { useSocket } from "@hooks/useSocket";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+import { getIcon } from "@data/icons";
 
 const UserRow = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
 
@@ -75,16 +81,37 @@ type UserProps = {
 
 function User({ user, view }: UserProps) {
   const { _id, photo, status, screenFirstName, screenLastName, role } = user;
+  const { chatId } = useParams<{ chatId: string }>();
+  const { isPending, isCurrUserAdmin } = useGroupInfo();
 
   const dispatch = useAppDispatch();
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  const { removeMembers } = useSocket();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  if (isPending) return;
+
+  function handleContextMenu(e: React.MouseEvent) {
+    e.preventDefault();
+    setIsModalVisible(true);
+  }
 
   function handleToggleMember() {
     if (view === "update") dispatch(toggleSelectUser(user));
   }
 
+  function handleRemoveUser() {
+    removeMembers({ chatId: chatId!, members: [_id] });
+  }
+
+  function handleCloseModal() {
+    setIsModalVisible(false);
+  }
+
   return (
     <UserRow
+      onContextMenu={handleContextMenu}
+      onMouseLeave={handleCloseModal}
       data-testid={`user-row-${_id}`}
       onClick={handleToggleMember}
       key={_id}
@@ -99,7 +126,11 @@ function User({ user, view }: UserProps) {
         />
       )}
 
-      <Avatar data-testid={`avatar-user-${_id}`} name={screenFirstName} image={photo} />
+      <Avatar
+        data-testid={`avatar-user-${_id}`}
+        name={screenFirstName}
+        image={photo}
+      />
       <UserDetails>
         <Details>
           <Username data-testid="user-screen-name">
@@ -109,6 +140,13 @@ function User({ user, view }: UserProps) {
         </Details>
         <Status data-testid="user-status">{status}</Status>
       </UserDetails>
+
+      {isModalVisible && isCurrUserAdmin && role !== "admin" && (
+        <OptionList onClick={handleRemoveUser}>
+          {getIcon("RemoveMember")}
+          <p>Remove this user</p>
+        </OptionList>
+      )}
     </UserRow>
   );
 }
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index e9687447..af1cadc6 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -63,6 +63,7 @@ enum icons {
   Lock,
   Admin,
   Members,
+  RemoveMember,
 }
 
 type iconStrings = keyof typeof icons;
@@ -417,6 +418,10 @@ const iconImports: Record<iconStrings, IconConfig> = {
   Members: {
     importFn: () => import("@mui/icons-material/PeopleOutlineOutlined"),
   },
+  RemoveMember: {
+    importFn: () => import("@mui/icons-material/RemoveCircleOutline"),
+    defaultProps: { fontSize: "small" },
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index bbd17a7f..8d9a8239 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -1,9 +1,11 @@
 import styled from "styled-components";
 import SettingsRow from "./SettingsRow";
 import { useDispatch } from "react-redux";
-import { updateSideBarView } from "@state/side-bar/sideBar";
+import { updateSideBarView, resetRightSideBar } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
 import { useGroupInfo } from "./hooks/useGroupInfo";
+import { useSocket } from "@hooks/useSocket";
+import { useRightSideBarContext } from "./contexts/RightSideBarProvider";
 
 const Container = styled.div`
   background-color: var(--color-background);
@@ -14,7 +16,9 @@ const Container = styled.div`
 
 function EditGroupInfo() {
   const dispatch = useDispatch();
-  const { admins, groupMembers, isPending } = useGroupInfo();
+  const { admins, groupMembers, chatId, isPending } = useGroupInfo();
+  const { leaveGroup } = useSocket();
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
 
   if (isPending) return;
 
@@ -35,6 +39,7 @@ function EditGroupInfo() {
       })
     );
   }
+
   function handleDisplayMembers() {
     dispatch(
       updateSideBarView({
@@ -44,6 +49,12 @@ function EditGroupInfo() {
     );
   }
 
+  function handleLeaveGroup() {
+    leaveGroup({ chatId: chatId! });
+    setIsRightSideBarOpen(false);
+    dispatch(resetRightSideBar());
+  }
+
   return (
     <Container data-testid="group-settings-container">
       <SettingsRow
@@ -72,7 +83,7 @@ function EditGroupInfo() {
         icon="Delete"
         title="Delete and Leave Group"
         subtitle=""
-        onClick={() => {}}
+        onClick={handleLeaveGroup}
       />
     </Container>
   );
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index 047d0f10..645bc075 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -44,7 +44,14 @@ function useGroupInfo() {
     }
   }, [group, users, isPending, isPendingCurrUser, user]);
 
-  return { groupMembers, group, isPending: isLoading, admins, isCurrUserAdmin };
+  return {
+    groupMembers,
+    group,
+    isPending: isLoading,
+    admins,
+    isCurrUserAdmin,
+    chatId,
+  };
 }
 
 export { useGroupInfo };
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index bdd85b88..7bf04010 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -69,13 +69,10 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   const { decrypt } = useEncryptDecrypt();
   const { chat } = useChat();
-  // const chats = useAppSelector((state) => state.chats.chats);
 
   useEffect(() => {
     if (!socket) return;
 
-    console.log(socket);
-
     socket.connect();
 
     const onConnect = () => {
@@ -88,8 +85,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     };
 
     const onReceiveMessage = (message: MessageInterface) => {
-      // const chat = getChatByID({ chats, chatID: message.chatId });
-
       console.log("Received message:", message);
       if (!chat) {
         console.warn("No chat context available for decryption");
@@ -167,6 +162,19 @@ function SocketProvider({ children }: SocketProviderProps) {
       }
     );
 
+    socket.on(
+      "LEAVE_GROUP_CHANNEL_SERVER",
+      ({ chatId, memberId }: { chatId: string; memberId: string }) => {
+        console.log("LEAVE_GROUP_CHANNEL_SERVER", chatId, memberId);
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      }
+    );
+
+    socket.on("REMOVE_MEMBERS_SERVER", () => {
+      console.log("REMOVE_MEMBERS_SERVER");
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
+
     socket.emit("typing");
 
     return () => {
@@ -185,11 +193,8 @@ function SocketProvider({ children }: SocketProviderProps) {
     };
   }, [socket, chat, decrypt, dispatch, queryClient]);
 
-  //TODO: remove isFirstTime
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
-      // const chat = getChatByID({ chats, chatID: sentMessage.chatId });
-
       console.log("messageToSend", sentMessage);
       socket.emit(
         "SEND_MESSAGE",
@@ -392,7 +397,7 @@ function SocketProvider({ children }: SocketProviderProps) {
             toast.success(message);
             queryClient.invalidateQueries({ queryKey: ["chats"] });
           } else {
-            toast.error(`Group size limit exceeded. ${message}`);
+            toast.error(message);
             console.error(error);
           }
         }
@@ -426,6 +431,54 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }
 
+  function leaveGroup({ chatId }: { chatId: string }) {
+    if (isConnected && socket) {
+      socket.emit(
+        "LEAVE_GROUP_CHANNEL_CLIENT",
+        { chatId },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+            navigate("/");
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot leave group: not connected to socket server");
+    }
+  }
+
+  function removeMembers({
+    chatId,
+    members,
+  }: {
+    chatId: string;
+    members: string[];
+  }) {
+    console.log(chatId, members);
+    if (isConnected && socket) {
+      socket.emit(
+        "REMOVE_MEMBERS_CLIENT",
+        { chatId, members },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot remove members: not connected to socket server");
+    }
+  }
+
   return (
     <SocketContext.Provider
       value={{
@@ -439,6 +492,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         deleteMessage,
         addGroupMembers,
         addAdmins,
+        leaveGroup,
+        removeMembers,
       }}
     >
       {children}
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index d66254e6..14ac8495 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -91,6 +91,9 @@ const sideBarSlice = createSlice({
   name: "sideBarData",
   initialState,
   reducers: {
+    resetRightSideBar: (state) => {
+      state.rightSideBar = groupInfo;
+    },
     updateSideBarView: (state, action: PayloadAction<actionType>) => {
       const { redirect, data } = action.payload;
 
@@ -120,6 +123,6 @@ const sideBarSlice = createSlice({
   },
 });
 
-export const { updateSideBarView } = sideBarSlice.actions;
+export const { updateSideBarView, resetRightSideBar } = sideBarSlice.actions;
 export default sideBarSlice.reducer;
 export type { SideBarView, actionType };
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 9229d506..55996676 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -30,6 +30,13 @@ export interface SocketContextType {
     chatId: string;
     members: string[];
   }) => void;
+  removeMembers: ({
+    chatId,
+    members,
+  }: {
+    chatId: string;
+    members: string[];
+  }) => void;
   startConnection: (offer?: RTCSessionDescription) => void;
   deleteMessage: ({
     messageId,
@@ -38,6 +45,7 @@ export interface SocketContextType {
     messageId: string;
     chatId: string;
   }) => void;
+  leaveGroup: ({ chatId }: { chatId: string }) => void;
 }
 
 export interface SocketProviderProps {

From 7f30d407437d4ce5b42a196531486a95b13e4339 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 20 Dec 2024 09:17:08 +0200
Subject: [PATCH 102/136] :bug: (messaging): fixing almost all errors appearing
 in terminal (#142)

* :bug: (messaging): fixing chatlList error: 0 errors when app startsgit checkout -b bugfix/pagination

* :bug: (messaging): fixing pagination
---
 app/src/features/chats/ChatItem.tsx      | 112 +++++++++--------------
 app/src/features/chats/hooks/useChats.ts |  50 ++++++----
 app/src/state/messages/chats.ts          |   7 +-
 3 files changed, 80 insertions(+), 89 deletions(-)

diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index fd7d1266..960b6ebf 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -2,14 +2,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
-import {
-  DetailedChatInterface,
-  setName,
-  setPhoto,
-} from "@state/messages/chats";
-import { useChatMembers } from "./hooks/useChatMember";
-import { useAppDispatch } from "@hooks/useGlobalState";
-import React from "react";
+import { DetailedChatInterface } from "@state/messages/chats";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -64,68 +57,45 @@ type ChatItemProps = {
   onClick?: () => void;
 };
 
-const ChatItem = React.memo(
-  ({
-    chat: { _id, type, lastMessage, name, photo, members },
-    onClick,
-  }: ChatItemProps) => {
-    const navigate = useNavigate();
-
-    const timestamp = lastMessage?.timestamp || "No messages";
-    const lastMessageContent = lastMessage?.content || "No messages";
-
-    const { chatId } = useParams<{ chatId: string }>();
-
-    const handleOpenChat = () => {
-      navigate(`/${_id}`);
-    };
-
-    const dispatch = useAppDispatch();
-
-    if (type === "private") {
-      const memberData = useChatMembers(members)[0];
-      dispatch(
-        setName({
-          chatId: _id,
-          name:
-            memberData?.screenFirstName + " " + memberData?.screenLastName ||
-            memberData?.username,
-        })
-      );
-
-      dispatch(
-        setPhoto({
-          chatId: _id,
-          photo: memberData?.photo,
-        })
-      );
-    }
-
-    return (
-      <Container
-        data-testid="chat-container"
-        $active={chatId === _id}
-        onClick={onClick ? onClick : handleOpenChat}
-        key={_id}
-      >
-        <Avatar data-testid="chat-avatar" image={photo} name={name} />
-        <ChatContent>
-          <ChatHeader>
-            <Name data-testid="chat-name">{name}</Name>
-            <Timestamp data-testid="chat-timestamp">
-              {new Date(timestamp).toLocaleTimeString("en-US", {
-                hour: "2-digit",
-                minute: "2-digit",
-              }) || "No messages"}
-            </Timestamp>
-          </ChatHeader>
-          <LastMessage data-testid="chat-last-message">
-            {lastMessageContent || "No messages"}
-          </LastMessage>
-        </ChatContent>
-      </Container>
-    );
-  }
-);
+const ChatItem = ({
+  chat: { _id, lastMessage, name, photo },
+  onClick,
+}: ChatItemProps) => {
+  const navigate = useNavigate();
+
+  const timestamp = lastMessage?.timestamp || "No messages";
+  const lastMessageContent = lastMessage?.content || "No messages";
+
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const handleOpenChat = () => {
+    navigate(`/${_id}`);
+  };
+
+  return (
+    <Container
+      data-testid="chat-container"
+      $active={chatId === _id}
+      onClick={onClick ? onClick : handleOpenChat}
+      key={_id}
+    >
+      <Avatar data-testid="chat-avatar" image={photo} name={name} />
+      <ChatContent>
+        <ChatHeader>
+          <Name data-testid="chat-name">{name}</Name>
+          <Timestamp data-testid="chat-timestamp">
+            {new Date(timestamp).toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit",
+            }) || "No messages"}
+          </Timestamp>
+        </ChatHeader>
+        <LastMessage data-testid="chat-last-message">
+          {lastMessageContent || "No messages"}
+        </LastMessage>
+      </ChatContent>
+    </Container>
+  );
+};
 
 export default ChatItem;
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 104143c5..c4792509 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -26,26 +26,42 @@ export function useChats() {
   let DecryptedChats: DetailedChatInterface[] = [];
 
   useEffect(() => {
-    const processMessages = async (chats: DetailedChatInterface[]) => {
+    const processMessages = async ({ chats, members }: ChatsState) => {
       await Promise.all(
         chats.map(async (chat) => {
-          const decryptedMsg = await decrypt({
-            message: chat.lastMessage?.content!,
-            key: chat?.encryptionKey!,
-            iv: chat?.initializationVector!,
-          });
+          if (chat.type === "private") {
+            const decryptedMsg = await decrypt({
+              message: chat.lastMessage?.content!,
+              key: chat?.encryptionKey!,
+              iv: chat?.initializationVector!,
+            });
 
+            const otherUserId = chat.members.filter(
+              (member) => member._id !== userId
+            )[0]._id;
 
-          return {
-            ...chat,
-            lastMessage: {
-              ...chat.lastMessage,
-              content:
-                typeof decryptedMsg === "string"
-                  ? decryptedMsg
-                  : chat.lastMessage?.content!,
-            },
-          };
+            const otherUserFullData = members.find(
+              (member) => member._id === otherUserId
+            );
+
+            return {
+              ...chat,
+              lastMessage: {
+                ...chat.lastMessage,
+                content:
+                  typeof decryptedMsg === "string"
+                    ? decryptedMsg
+                    : chat.lastMessage?.content!,
+              },
+              name:
+                otherUserFullData?.screenFirstName +
+                " " +
+                otherUserFullData?.screenLastName,
+              photo: otherUserFullData?.photo!,
+            };
+          } else {
+            return chat;
+          }
         })
       ).then((decryptedMessagesArray) => {
         DecryptedChats = decryptedMessagesArray as DetailedChatInterface[];
@@ -58,7 +74,7 @@ export function useChats() {
         chatData?.members?.filter((member) => member._id !== userId) || [],
     };
 
-    processMessages(initialChatState.chats).then(() => {
+    processMessages(initialChatState).then(() => {
       dispatch(
         setAllChats({
           chatsData: {
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index d23f90cf..b458c5c2 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -202,8 +202,13 @@ const chatsSlice = createSlice({
     ) => {
       const { chatId, newMessages } = action.payload;
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
+
+      const filteredMessages = newMessages.filter(
+        (msg) => !chat?.messages.find((m) => m._id === msg._id)
+      );
+
       if (chat) {
-        chat.messages = [...newMessages, ...chat.messages];
+        chat.messages = [...filteredMessages, ...chat.messages];
       }
     },
 

From 816412d4ff69624d27bb9bb9a59b6d8f9ebd8466 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:57:37 +0200
Subject: [PATCH 103/136] =?UTF-8?q?=F0=9F=92=84=20(groups):=20Added=20perm?=
 =?UTF-8?q?issions=20ui=20(#143)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/side-bar/SideBar.tsx       |  6 ++
 app/src/data/sideBar.ts                       |  8 ++
 .../features/chats/services/apiGetChats.ts    |  1 +
 app/src/features/groups/EditGroupInfo.tsx     | 86 +++++-------------
 app/src/features/groups/Permissions.tsx       | 80 +++++++++++++++++
 app/src/features/groups/data/settings.ts      | 90 +++++++++++++++++++
 app/src/state/side-bar/sideBar.ts             |  3 +
 app/src/types/sideBar.ts                      |  1 +
 8 files changed, 211 insertions(+), 64 deletions(-)
 create mode 100644 app/src/features/groups/Permissions.tsx
 create mode 100644 app/src/features/groups/data/settings.ts

diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index 79dc1616..d19c2199 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -27,6 +27,7 @@ import AddMoreMembers from "./groups/AddMoreMembers.js";
 import Admins from "@features/groups/Admins.js";
 import AddAdmins from "./groups/AddAdmins.js";
 import Members from "@features/groups/Members.js";
+import Permissions from "@features/groups/Permissions.js";
 
 interface SideBarProps {
   rows?: SideBarRowProps[];
@@ -155,6 +156,11 @@ const sideBarMap: {
       <Members />
     </SettingsSideBar>
   ),
+  Permissions: () => (
+    <SettingsSideBar rows={[]}>
+      <Permissions />
+    </SettingsSideBar>
+  ),
 };
 
 function Sidebar({ type }: { type: "left" | "right" }) {
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index e7cbdee2..0bcc3ef8 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -92,6 +92,7 @@ const pagesMap: { [K in pagesStrings]: string } = {
   ADMINS: "Admins",
   ADD_ADMINS: "AddAdmins",
   MEMBERS: "Members",
+  PERMISSIONS: "Permissions",
 };
 
 const settingsRows = [
@@ -271,6 +272,12 @@ const members: SideBarView = {
   page: "MEMBERS",
 };
 
+const permissions: SideBarView = {
+  title: "Permissions",
+  backView: sideBarPages.EDIT_GROUP_INFO,
+  page: "PERMISSIONS",
+};
+
 export {
   chats,
   contacts,
@@ -298,4 +305,5 @@ export {
   admins,
   addAdmins,
   members,
+  permissions,
 };
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index 2d908f0b..241826c3 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -20,6 +20,7 @@ export async function getAllChatsApi() {
 }
 
 export async function getChatApi(id: string) {
+  if (!id) return;
   const res = await fetch(`${API_URL}/chats/${id}`, {
     method: "GET",
     headers: {
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index 8d9a8239..a041fd99 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -1,15 +1,14 @@
 import styled from "styled-components";
 import SettingsRow from "./SettingsRow";
 import { useDispatch } from "react-redux";
-import { updateSideBarView, resetRightSideBar } from "@state/side-bar/sideBar";
-import { sideBarPages } from "types/sideBar";
+import { resetRightSideBar } from "@state/side-bar/sideBar";
 import { useGroupInfo } from "./hooks/useGroupInfo";
 import { useSocket } from "@hooks/useSocket";
 import { useRightSideBarContext } from "./contexts/RightSideBarProvider";
+import { getSettings } from "./data/settings";
 
 const Container = styled.div`
   background-color: var(--color-background);
-
   display: flex;
   flex-direction: column;
 `;
@@ -20,71 +19,30 @@ function EditGroupInfo() {
   const { leaveGroup } = useSocket();
   const { setIsRightSideBarOpen } = useRightSideBarContext();
 
-  if (isPending) return;
-
-  function handleGroupTypeClick() {
-    dispatch(
-      updateSideBarView({
-        redirect: sideBarPages.GROUP_TYPE,
-        data: { type: "right" },
-      })
-    );
-  }
-
-  function handleDisplayAdmins() {
-    dispatch(
-      updateSideBarView({
-        redirect: sideBarPages.ADMINS,
-        data: { type: "right" },
-      })
-    );
-  }
-
-  function handleDisplayMembers() {
-    dispatch(
-      updateSideBarView({
-        redirect: sideBarPages.MEMBERS,
-        data: { type: "right" },
-      })
-    );
-  }
+  if (isPending) return null;
 
-  function handleLeaveGroup() {
-    leaveGroup({ chatId: chatId! });
-    setIsRightSideBarOpen(false);
-    dispatch(resetRightSideBar());
-  }
+  const settings = getSettings({
+    dispatch,
+    admins,
+    groupMembers,
+    chatId: chatId!,
+    leaveGroup,
+    setIsRightSideBarOpen,
+    resetRightSideBar,
+  });
 
   return (
     <Container data-testid="group-settings-container">
-      <SettingsRow
-        testid="group-type"
-        icon="Lock"
-        title="Group Type"
-        subtitle="private"
-        onClick={handleGroupTypeClick}
-      />
-      <SettingsRow
-        testid="admins"
-        icon="Admin"
-        title="Adminstators"
-        subtitle={admins.length}
-        onClick={handleDisplayAdmins}
-      />
-      <SettingsRow
-        testid="members"
-        icon="Members"
-        title="Members"
-        subtitle={groupMembers.length}
-        onClick={handleDisplayMembers}
-      />
-      <SettingsRow
-        testid="leave-group-button"
-        icon="Delete"
-        title="Delete and Leave Group"
-        subtitle=""
-        onClick={handleLeaveGroup}
-      />
+      {settings.map((setting, index) => (
+        <SettingsRow
+          key={index}
+          testid={setting.testid}
+          icon={setting.icon}
+          title={setting.title}
+          subtitle={setting.subtitle}
+          onClick={setting.onClick}
+        />
+      ))}
     </Container>
   );
 }
diff --git a/app/src/features/groups/Permissions.tsx b/app/src/features/groups/Permissions.tsx
new file mode 100644
index 00000000..acbd853a
--- /dev/null
+++ b/app/src/features/groups/Permissions.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Checkbox from "@components/Checkbox";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+`;
+
+const P = styled.p`
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+`;
+
+const PermissionRow = styled.div`
+  display: flex;
+
+  align-items: center;
+  padding: 0.75rem;
+`;
+
+const PermissionText = styled.span`
+  color: var(--color-text);
+  font-size: 0.875rem;
+`;
+
+interface Permission {
+  id: string;
+  label: string;
+  enabled: boolean;
+}
+
+//TODO: Integrate with backend
+function Permissions() {
+  const [permissions, setPermissions] = useState<Permission[]>([
+    {
+      id: "post",
+      label: "Send messages",
+      enabled: false,
+    },
+    {
+      id: "vidoe",
+      label: "Download video messages",
+      enabled: false,
+    },
+    {
+      id: "audio",
+      label: "Download audio messages",
+      enabled: false,
+    },
+  ]);
+
+  const togglePermission = (id: string) => {
+    setPermissions(
+      permissions.map((perm) =>
+        perm.id === id ? { ...perm, enabled: !perm.enabled } : perm
+      )
+    );
+  };
+
+  return (
+    <Container>
+      <P>What can members of this chat do?</P>
+      {permissions.map((permission) => (
+        <PermissionRow key={permission.id}>
+          <Checkbox
+            checked={permission.enabled}
+            onChange={() => togglePermission(permission.id)}
+            data-testid={`permission-${permission.id}`}
+          />
+          <PermissionText>{permission.label}</PermissionText>
+        </PermissionRow>
+      ))}
+    </Container>
+  );
+}
+
+export default Permissions;
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
new file mode 100644
index 00000000..2e553a34
--- /dev/null
+++ b/app/src/features/groups/data/settings.ts
@@ -0,0 +1,90 @@
+import { iconStrings } from "@data/icons";
+import { Dispatch } from "@reduxjs/toolkit";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
+
+type SettingsProps = {
+  dispatch: Dispatch;
+  admins: any[];
+  groupMembers: any[];
+  chatId: string;
+  leaveGroup: (params: { chatId: string }) => void;
+  setIsRightSideBarOpen: (value: boolean) => void;
+  resetRightSideBar: () => { type: string };
+};
+
+const getSettings = ({
+  dispatch,
+  admins,
+  groupMembers,
+  chatId,
+  leaveGroup,
+  setIsRightSideBarOpen,
+  resetRightSideBar,
+}: SettingsProps) => [
+  {
+    testid: "group-type",
+    icon: "Lock" as iconStrings,
+    title: "Group Type",
+    subtitle: "private",
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.GROUP_TYPE,
+          data: { type: "right" },
+        })
+      ),
+  },
+  {
+    testid: "admins",
+    icon: "Admin" as iconStrings,
+    title: "Administrators",
+    subtitle: admins.length,
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.ADMINS,
+          data: { type: "right" },
+        })
+      ),
+  },
+  {
+    testid: "members",
+    icon: "Members" as iconStrings,
+    title: "Members",
+    subtitle: groupMembers.length,
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.MEMBERS,
+          data: { type: "right" },
+        })
+      ),
+  },
+  {
+    testid: "permissions",
+    icon: "Members" as iconStrings,
+    title: "Permissions",
+    subtitle: "13/13",
+    onClick: () =>
+      dispatch(
+        updateSideBarView({
+          redirect: sideBarPages.PERMISSIONS,
+          data: { type: "right" },
+        })
+      ),
+  },
+  {
+    testid: "leave-group-button",
+    icon: "Delete" as iconStrings,
+    title: "Delete and Leave Group",
+    subtitle: "",
+    onClick: () => {
+      leaveGroup({ chatId });
+      setIsRightSideBarOpen(false);
+      dispatch(resetRightSideBar());
+    },
+  },
+];
+
+export { getSettings };
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 14ac8495..7c695a5b 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -19,6 +19,7 @@ import {
   admins,
   addAdmins,
   members,
+  permissions,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -77,6 +78,8 @@ function getSideBarPage(type: number): SideBarView {
       return addAdmins;
     case sideBarPages.MEMBERS:
       return members;
+    case sideBarPages.PERMISSIONS:
+      return permissions;
     default:
       throw new Error("Unknown Type");
   }
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index d33993a5..2d2a43ff 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -17,6 +17,7 @@ enum sideBarPages {
   ADMINS,
   ADD_ADMINS,
   MEMBERS,
+  PERMISSIONS,
 }
 
 type pagesStrings = keyof typeof sideBarPages;

From f9d8c3549c81adcd9342b013b4fa7a5d6fca8e13 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:13:20 +0200
Subject: [PATCH 104/136] :bug: (messaging): fix messages not rendered upon
 reload  (#144)

* :bug: (messaging): fixing chatlList error: 0 errors when app startsgit checkout -b bugfix/pagination

* :bug: (messaging): fixing pagination

* :bug: (messaging): fixing messages  not rendered upon reloading
---
 app/src/features/chats/ChatBody.tsx           | 30 ++++++++-----------
 .../features/chats/hooks/useFetchNextPage.ts  |  7 +++--
 .../features/chats/services/apiGetChats.ts    |  3 +-
 app/src/state/messages/chats.ts               | 18 +++++++----
 4 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 45a34b16..00320de5 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -2,12 +2,13 @@ import styled from "styled-components";
 
 import Message from "./Message";
 import { useInView } from "@features/stories/hooks/useInView";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useFetchNextPage } from "./hooks/useFetchNextPage";
 import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 import MessageProvider from "./contexts/MessageProvider";
+import { MessageInterface } from "types/messages";
 
 const ScrollContainer = styled.div`
   width: 100%;
@@ -37,13 +38,7 @@ const ScrollContainer = styled.div`
 function ChatBody() {
   const { chatId } = useParams<{ chatId: string }>();
   const chats = useAppSelector((state) => state.chats.chats);
-
-  const messages =
-    chatId &&
-    getChatByID({
-      chats: chats,
-      chatID: chatId,
-    })?.messages;
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
 
   const { fetchNextPage, hasNextPage } = useFetchNextPage();
 
@@ -51,7 +46,7 @@ function ChatBody() {
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (inView && hasNextPage) {
+    if (inView && hasNextPage && chatId) {
       const container = scrollContainerRef.current;
       if (!container) return;
 
@@ -66,20 +61,19 @@ function ChatBody() {
         });
       });
     }
-  }, [fetchNextPage, inView]);
+  }, [fetchNextPage, inView, chatId]);
 
   return (
     <ScrollContainer ref={scrollContainerRef}>
       <div ref={ref}></div>
 
-      {messages &&
-        messages.map((data) => {
-          return (
-            <MessageProvider key={data._id} data={data}>
-              <Message key={data._id} />
-            </MessageProvider>
-          );
-        })}
+      {chat?.messages.map((data) => {
+        return (
+          <MessageProvider key={data._id} data={data}>
+            <Message key={data._id} />
+          </MessageProvider>
+        );
+      })}
     </ScrollContainer>
   );
 }
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index d977072f..c9b4885b 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -22,10 +22,11 @@ function useFetchNextPage() {
     isFetchingNextPage,
     isFetchingPreviousPage,
   } = useInfiniteQuery({
-    queryKey: [`chat-${chatId}-pages`],
+    queryKey: chatId ? [`chat-${chatId}-pages`] : [],
     queryFn: ({ pageParam }) =>
       apiFetchNextPage({ chatId: chatId!, pageParam }),
-    getNextPageParam: (lastPage) => lastPage.nextPage,
+    getNextPageParam: (lastPage) => lastPage?.nextPage,
+    enabled: !!chatId,
     initialPageParam: 0,
   });
 
@@ -67,7 +68,7 @@ function useFetchNextPage() {
         });
       }
     }
-  }, [data, chatId, dispatch]);
+  }, [data, chatId, dispatch, chats.length]);
 
   return {
     data,
diff --git a/app/src/features/chats/services/apiGetChats.ts b/app/src/features/chats/services/apiGetChats.ts
index 241826c3..a76ae842 100644
--- a/app/src/features/chats/services/apiGetChats.ts
+++ b/app/src/features/chats/services/apiGetChats.ts
@@ -20,7 +20,8 @@ export async function getAllChatsApi() {
 }
 
 export async function getChatApi(id: string) {
-  if (!id) return;
+  if (!id) return null;
+
   const res = await fetch(`${API_URL}/chats/${id}`, {
     method: "GET",
     headers: {
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index b458c5c2..1665c4d8 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -201,14 +201,20 @@ const chatsSlice = createSlice({
       }>
     ) => {
       const { chatId, newMessages } = action.payload;
-      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const chatIndex = state.chats.findIndex((chat) => chat._id === chatId);
 
-      const filteredMessages = newMessages.filter(
-        (msg) => !chat?.messages.find((m) => m._id === msg._id)
-      );
 
-      if (chat) {
-        chat.messages = [...filteredMessages, ...chat.messages];
+      if (chatIndex !== -1) {
+        const chat = state.chats[chatIndex];
+
+        const filteredMessages = newMessages.filter(
+          (msg) => !chat.messages.find((m) => m._id === msg._id)
+        );
+
+        state.chats[chatIndex] = {
+          ...chat,
+          messages: [...filteredMessages, ...chat.messages],
+        };
       }
     },
 

From 9f2821991085f61cfcd7b19ae89673e9597e322c Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 20 Dec 2024 20:27:50 +0200
Subject: [PATCH 105/136] feat(channels): message + comment box UI (#145)

* feat(channels): message adjustment to look like channels

* feat(channels): add comments box UI
---
 app/src/data/icons.tsx                        |  7 +++-
 app/src/features/chats/ChatBody.tsx           | 13 ++++--
 app/src/features/chats/CommentBox.tsx         | 40 +++++++++++++++++++
 app/src/features/chats/Message.tsx            |  8 ++--
 app/src/features/chats/MessageBox.tsx         |  6 +--
 app/src/features/chats/MessageContent.tsx     |  3 +-
 app/src/features/chats/MessageDetails.tsx     | 27 +++++++++++--
 .../chats/contexts/MessageProvider.tsx        | 19 ++++++++-
 8 files changed, 105 insertions(+), 18 deletions(-)
 create mode 100644 app/src/features/chats/CommentBox.tsx

diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index af1cadc6..7806e197 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -64,6 +64,7 @@ enum icons {
   Admin,
   Members,
   RemoveMember,
+  Eye,
 }
 
 type iconStrings = keyof typeof icons;
@@ -422,6 +423,10 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/RemoveCircleOutline"),
     defaultProps: { fontSize: "small" },
   },
+  Eye: {
+    importFn: () => import("@mui/icons-material/Visibility"),
+    defaultProps: { fontSize: "small" },
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
@@ -432,7 +437,7 @@ function getIcon(
     sx?: SxProps;
     fontSize?: "small" | "medium" | "large";
     style?: React.CSSProperties;
-  }
+  },
 ) {
   if (!iconName) return undefined;
 
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 00320de5..d1d01090 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -2,13 +2,12 @@ import styled from "styled-components";
 
 import Message from "./Message";
 import { useInView } from "@features/stories/hooks/useInView";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useFetchNextPage } from "./hooks/useFetchNextPage";
 import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 import MessageProvider from "./contexts/MessageProvider";
-import { MessageInterface } from "types/messages";
 
 const ScrollContainer = styled.div`
   width: 100%;
@@ -37,7 +36,7 @@ const ScrollContainer = styled.div`
 
 function ChatBody() {
   const { chatId } = useParams<{ chatId: string }>();
-  const chats = useAppSelector((state) => state.chats.chats);
+  const { chats, members } = useAppSelector((state) => state.chats);
   const chat = getChatByID({ chats: chats, chatID: chatId! });
 
   const { fetchNextPage, hasNextPage } = useFetchNextPage();
@@ -69,7 +68,13 @@ function ChatBody() {
 
       {chat?.messages.map((data) => {
         return (
-          <MessageProvider key={data._id} data={data}>
+          <MessageProvider
+            key={data._id}
+            data={data}
+            chatType={chat?.type}
+            sender={members.find((member) => member._id === data.senderId)}
+            numberOfMembers={chat?.numberOfMembers}
+          >
             <Message key={data._id} />
           </MessageProvider>
         );
diff --git a/app/src/features/chats/CommentBox.tsx b/app/src/features/chats/CommentBox.tsx
new file mode 100644
index 00000000..b7017537
--- /dev/null
+++ b/app/src/features/chats/CommentBox.tsx
@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+import { useMessageContext } from "./contexts/MessageProvider";
+import { getIcon } from "@data/icons";
+
+const Container = styled.div`
+  cursor: pointer;
+  display: flex;
+  border-top: 1px solid rgb(59, 75, 74);
+  margin-inline: -8px;
+  padding-inline: 0.6rem;
+  padding-top: 0.2rem;
+  margin-top: 0.5rem;
+  color: var(--accent-color);
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const CommentsText = styled.div`
+  font-size: 0.8rem;
+`;
+
+const CommentsIcon = styled.div``;
+
+function CommentBox() {
+  const { threadMessages } = useMessageContext();
+
+  return (
+    <Container>
+      <CommentsText>{threadMessages?.length} Comments</CommentsText>
+      <CommentsIcon>
+        {getIcon("RightArrow", {
+          sx: { fontSize: "1.8rem", color: "var(--accent-color)" },
+        })}
+      </CommentsIcon>
+    </Container>
+  );
+}
+
+export default CommentBox;
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 29ed3b5b..79510ef4 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -11,6 +11,7 @@ import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
 import useHover from "./hooks/useHover";
 import { useMessageContext } from "./contexts/MessageProvider";
 import React from "react";
+import CommentBox from "./CommentBox";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -71,7 +72,7 @@ const CheckBoxWrapper = styled.div`
 `;
 
 const Message = React.memo(() => {
-  const { _id: id, chatId, isMine } = useMessageContext();
+  const { _id: id, chatId, isMine, chatType } = useMessageContext();
 
   const { lastMessageRef } = useScrollToLastMsg();
   useScrollToSearchResultsMsg();
@@ -93,16 +94,17 @@ const Message = React.memo(() => {
       <StyledMessage
         ref={lastMessageRef}
         key={id}
-        $isMine={isMine}
+        $isMine={chatType === "channel" ? false : isMine}
         data-message-id={id}
         data-testid={`message-${id}`}
         onMouseLeave={handleMouseLeave}
         onContextMenu={handleOpenList}
       >
-        <Bubble $isMine={isMine}>
+        <Bubble $isMine={chatType === "channel" ? false : isMine}>
           <MessageContent />
           {isHovered && <MessageOptionList />}
           <MessageDetails />
+          {chatType === "channel" && <CommentBox />}
         </Bubble>
       </StyledMessage>
     </MessageRow>
diff --git a/app/src/features/chats/MessageBox.tsx b/app/src/features/chats/MessageBox.tsx
index fb7b9ed4..4ea49d46 100644
--- a/app/src/features/chats/MessageBox.tsx
+++ b/app/src/features/chats/MessageBox.tsx
@@ -55,7 +55,7 @@ const StyledMessageBox = styled.div<{ $colorIndex: number }>`
 
 function getMessageById(
   messageId: string,
-  messages?: MessageInterface[]
+  messages?: MessageInterface[],
 ): MessageInterface | undefined {
   return messages
     ? messages.find((message) => message._id === messageId)
@@ -86,12 +86,12 @@ function MessageBox({ messageId }: MessageBoxProps) {
   }
 
   const memberIndex = members.findIndex(
-    (member) => member._id === msg?.senderId
+    (member) => member._id === msg?.senderId,
   );
   const colorIndex = memberIndex >= 0 ? (memberIndex % 5) + 2 : 2;
 
   const activeMessage = useAppSelector(
-    (state: RootState) => state.activeMessage
+    (state: RootState) => state.activeMessage,
   );
 
   return (
diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
index 50d2ca15..ce977bc8 100644
--- a/app/src/features/chats/MessageContent.tsx
+++ b/app/src/features/chats/MessageContent.tsx
@@ -35,6 +35,7 @@ function MessageContent() {
     parentMessageId,
     media,
     contentType,
+    chatType,
   } = useMessageContext();
 
   const { searchTerm, searchResults } = useAppSelector((state) => state.search);
@@ -51,7 +52,7 @@ function MessageContent() {
 
   return (
     <Container>
-      <SenderName />
+      {chatType !== "channel" && <SenderName />}
       {parentMessageId && (
         <MessageBoxWrapper
           onClick={MoveToReplyMessage}
diff --git a/app/src/features/chats/MessageDetails.tsx b/app/src/features/chats/MessageDetails.tsx
index 157e7069..502bfcaa 100644
--- a/app/src/features/chats/MessageDetails.tsx
+++ b/app/src/features/chats/MessageDetails.tsx
@@ -18,19 +18,38 @@ const TimeStamp = styled.div<{ $isMine: boolean }>`
 `;
 
 const Details = styled.div`
+  padding-top: 0.2rem;
   display: flex;
   align-self: flex-end;
-
+  align-items: center;
   gap: 0.2rem;
+  font-size: 0.6rem;
+  color: var(--color-text-secondary);
 `;
 
 function MessageDetails() {
-  const { isPinned, isMine, timestamp } = useMessageContext();
+  const { isPinned, isMine, timestamp, chatType, sender, numberOfMembers } =
+    useMessageContext();
 
   return (
     <Details>
-      {isPinned && getIcon("PushPin", { sx: { fontSize: "1rem" } })}
-      <TimeStamp $isMine={isMine}>
+      {chatType === "channel" && (
+        <>
+          <span>{sender?.username}</span>
+          <span>{numberOfMembers}</span>
+          <span>
+            {getIcon("Eye", {
+              sx: { fontSize: "0.8rem", color: "var(--color-text-secondary)" },
+            })}
+          </span>
+        </>
+      )}
+
+      {isPinned &&
+        getIcon("PushPin", {
+          sx: { fontSize: "0.8rem", color: "var(--color-text-secondary)" },
+        })}
+      <TimeStamp $isMine={chatType === "channel" ? false : isMine}>
         {new Date(timestamp).toLocaleTimeString("en-US", {
           hour: "2-digit",
           minute: "2-digit",
diff --git a/app/src/features/chats/contexts/MessageProvider.tsx b/app/src/features/chats/contexts/MessageProvider.tsx
index fa4c3ecf..af1983f4 100644
--- a/app/src/features/chats/contexts/MessageProvider.tsx
+++ b/app/src/features/chats/contexts/MessageProvider.tsx
@@ -1,9 +1,13 @@
 import { useAppSelector } from "@hooks/useGlobalState";
+import { Member } from "@mocks/data/chats";
 import React, { createContext, useContext } from "react";
 import { MessageInterface } from "types/messages";
 
 type ContextType = MessageInterface & {
   isMine: boolean;
+  chatType: string;
+  sender?: Member;
+  numberOfMembers?: number;
 };
 
 const MessageContext = createContext<ContextType | null>(null);
@@ -11,14 +15,25 @@ const MessageContext = createContext<ContextType | null>(null);
 type ProviderProps = {
   children: React.ReactNode;
   data: MessageInterface;
+  chatType: string;
+  sender?: Member;
+  numberOfMembers?: number;
 };
 
-function MessageProvider({ children, data }: ProviderProps) {
+function MessageProvider({
+  children,
+  data,
+  chatType,
+  sender,
+  numberOfMembers,
+}: ProviderProps) {
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const isMine = userId === data.senderId;
 
   return (
-    <MessageContext.Provider value={{ ...data, isMine }}>
+    <MessageContext.Provider
+      value={{ ...data, isMine, chatType, sender, numberOfMembers }}
+    >
       {children}
     </MessageContext.Provider>
   );

From cd76d5b2b2528443824b738a2875898114128fd2 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Fri, 20 Dec 2024 22:13:30 +0200
Subject: [PATCH 106/136] bug-fix: media upload (#146)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/features/chats/ChatInput.tsx             | 4 ++--
 app/src/features/chats/media/FilePreviewItem.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index b89faae9..0e809749 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -77,7 +77,7 @@ function ChatInput() {
     isEmojiSelectorOpen,
     handleSubmit,
     showForwardUsers,
-    handleClose,
+    handleClose
   } = useContext(ChatInputContext);
 
   const chats = useAppSelector((state) => state.chats.chats);
@@ -96,7 +96,7 @@ function ChatInput() {
   return (
     <>
       {isFilePreviewOpen && file && (
-        <FilePreviewItem data-testid="file-preview" />
+        <FilePreviewItem data-testid="file-preview" chatId={chatId} />
       )}
 
       {isBlocked ? null : (
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
index 7e7e1595..ddac6c8c 100644
--- a/app/src/features/chats/media/FilePreviewItem.tsx
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -46,7 +46,7 @@ const StyledBackground = styled.div`
   }
 `;
 
-function FilePreviewItem() {
+function FilePreviewItem({ chatId }: { chatId: string | undefined }) {
   const [caption, setCaption] = useState("");
   const { mutate: uploadFile, isPending } = useUploadMedia();
 
@@ -64,14 +64,14 @@ function FilePreviewItem() {
       uploadFile(file, {
         onSuccess: (url) => {
           console.log("File uploaded successfully:", url);
-          handleSendMessage(caption, url);
+          handleSendMessage(caption, chatId, url);
           setCaption("");
           setFile(null);
         },
         onError: (error) => {
           console.error("Error uploading file:", error);
           alert("Failed to upload the file. Please try again.");
-        },
+        }
       });
     } catch (error) {
       console.error("Unexpected error while sending file:", error);

From 59c05867ccc044fcf55de2a75f0bd4b5cffc67cb Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Fri, 20 Dec 2024 22:58:16 +0200
Subject: [PATCH 107/136] feat(channels): comments UI + send comment (#147)

* feat(channels): open comments section

* feat(channels): send comments
---
 app/src/features/chats/ChatBody.tsx           | 48 ++++++++++++++-----
 app/src/features/chats/CommentBox.tsx         | 18 ++++++-
 app/src/features/chats/Topbar.tsx             | 34 +++++++++----
 .../features/chats/hooks/useMessageSender.ts  | 15 +++++-
 app/src/state/messages/channels.ts            | 34 +++++++++++++
 app/src/state/store.ts                        |  2 +
 6 files changed, 126 insertions(+), 25 deletions(-)
 create mode 100644 app/src/state/messages/channels.ts

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index d1d01090..5fd1969f 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -37,6 +37,7 @@ const ScrollContainer = styled.div`
 function ChatBody() {
   const { chatId } = useParams<{ chatId: string }>();
   const { chats, members } = useAppSelector((state) => state.chats);
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
   const chat = getChatByID({ chats: chats, chatID: chatId! });
 
   const { fetchNextPage, hasNextPage } = useFetchNextPage();
@@ -62,23 +63,44 @@ function ChatBody() {
     }
   }, [fetchNextPage, inView, chatId]);
 
+  const messages = chat?.messages?.filter((msg) => !msg.parentMessageId);
+  const threadMessages = activeThread
+    ? chat?.messages.filter((msg) => msg.parentMessageId === activeThread)
+    : [];
+
   return (
     <ScrollContainer ref={scrollContainerRef}>
       <div ref={ref}></div>
 
-      {chat?.messages.map((data) => {
-        return (
-          <MessageProvider
-            key={data._id}
-            data={data}
-            chatType={chat?.type}
-            sender={members.find((member) => member._id === data.senderId)}
-            numberOfMembers={chat?.numberOfMembers}
-          >
-            <Message key={data._id} />
-          </MessageProvider>
-        );
-      })}
+      {!activeThread &&
+        messages?.map((data) => {
+          return (
+            <MessageProvider
+              key={data._id}
+              data={data}
+              chatType={chat?.type as "private" | "group" | "channel"}
+              sender={members.find((member) => member._id === data.senderId)}
+              numberOfMembers={chat?.numberOfMembers}
+            >
+              <Message key={data._id} />
+            </MessageProvider>
+          );
+        })}
+
+      {activeThread &&
+        threadMessages?.map((data) => {
+          return (
+            <MessageProvider
+              key={data._id}
+              data={data}
+              chatType="channel"
+              sender={members.find((member) => member._id === data.senderId)}
+              numberOfMembers={chat?.numberOfMembers}
+            >
+              <Message key={data._id} />
+            </MessageProvider>
+          );
+        })}
     </ScrollContainer>
   );
 }
diff --git a/app/src/features/chats/CommentBox.tsx b/app/src/features/chats/CommentBox.tsx
index b7017537..97a3270a 100644
--- a/app/src/features/chats/CommentBox.tsx
+++ b/app/src/features/chats/CommentBox.tsx
@@ -2,6 +2,8 @@ import styled from "styled-components";
 
 import { useMessageContext } from "./contexts/MessageProvider";
 import { getIcon } from "@data/icons";
+import { useDispatch } from "react-redux";
+import { setActiveThread } from "@state/messages/channels";
 
 const Container = styled.div`
   cursor: pointer;
@@ -14,6 +16,13 @@ const Container = styled.div`
   color: var(--accent-color);
   justify-content: space-between;
   align-items: center;
+  border-radius: 0 0 0.5rem 0.5rem;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--color-chat-hover);
+    backdrop-filter: hue-rotate(10deg);
+  }
 `;
 
 const CommentsText = styled.div`
@@ -23,10 +32,15 @@ const CommentsText = styled.div`
 const CommentsIcon = styled.div``;
 
 function CommentBox() {
-  const { threadMessages } = useMessageContext();
+  const { threadMessages, _id: messageId } = useMessageContext();
+  const dispatch = useDispatch();
+
+  const handleOpenComments = () => {
+    dispatch(setActiveThread({ threadId: messageId, threadMessages }));
+  };
 
   return (
-    <Container>
+    <Container onClick={handleOpenComments}>
       <CommentsText>{threadMessages?.length} Comments</CommentsText>
       <CommentsIcon>
         {getIcon("RightArrow", {
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 74321a2e..e515fa2e 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -19,6 +19,8 @@ import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarPr
 
 import { getElapsedTime } from "@utils/helpers";
 import { getChatByID } from "./utils/helpers";
+import Button from "@components/Button";
+import { resetActiveThread } from "@state/messages/channels";
 
 const Container = styled.div<{ $hasMargin?: boolean }>`
   position: absolute;
@@ -118,6 +120,7 @@ function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const chats = useAppSelector((state) => state.chats.chats);
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
   const [isSearching, setIsSearching] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
   const { startConnection } = useSocket();
@@ -159,10 +162,14 @@ function Topbar() {
         chatId: chatId!,
         isBlocked: false,
         userId: userId,
-      })
+      }),
     );
   }
 
+  const closeThread = () => {
+    dispatch(resetActiveThread());
+  };
+
   const isCall = false;
 
   if (!chat) return null;
@@ -178,19 +185,30 @@ function Topbar() {
         />
       )}
       <Container data-testid="chat-topbar" $hasMargin={isCollapsed}>
-        <Avatar
-          data-testid="chat-avatar"
-          image={image}
-          name={chat.name?.charAt(0)}
-          onClick={handleOpenRightSideBar}
-        />
+        {!activeThread && (
+          <Avatar
+            data-testid="chat-avatar"
+            image={image}
+            name={chat.name?.charAt(0)}
+            onClick={handleOpenRightSideBar}
+          />
+        )}
+        {activeThread && (
+          <div onClick={closeThread} data-testid="back-button">
+            {getIcon("LeftArrow", {
+              sx: { fontSize: "3rem", color: "var(--accent-color)" },
+            })}
+          </div>
+        )}
         {isSearching ? (
           <SearchBar onClose={toggleSearch} />
         ) : (
           <>
             <Info data-testid="chat-info" onClick={handleOpenRightSideBar}>
               <Content>
-                <Name data-testid="chat-name">{chat.name}</Name>
+                <Name data-testid="chat-name">
+                  {activeThread ? "Comments" : chat.name}
+                </Name>
                 {lastSeen && (
                   <LastSeen data-testid="chat-last-seen">
                     last seen {getElapsedTime(lastSeen)}
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index c82c1d9a..26831bba 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -8,6 +8,7 @@ export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const activeMessage = useAppSelector((state) => state.activeMessage);
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
 
   const { encrypt } = useEncryptDecrypt();
   const chats = useAppSelector((state) => state.chats.chats);
@@ -16,7 +17,7 @@ export const useMessageSender = () => {
     data: string,
     chatId?: string,
     file?: string,
-    type: ContentType = "text"
+    type: ContentType = "text",
   ) => {
     const chat = getChatByID({ chats, chatID: chatId as string });
 
@@ -53,7 +54,17 @@ export const useMessageSender = () => {
         media: file,
         threadMessages: [],
       };
-      sendMessage({ ...message, chatType: chat?.type! });
+
+      const threadMessage = {
+        ...message,
+        parentMessageId: activeThread,
+        isReply: true,
+        chatType: "channel",
+      };
+
+      const messageToSend = activeThread ? threadMessage : message;
+
+      sendMessage({ ...messageToSend, chatType: chat?.type! });
     }
   };
 
diff --git a/app/src/state/messages/channels.ts b/app/src/state/messages/channels.ts
new file mode 100644
index 00000000..cd7c6e68
--- /dev/null
+++ b/app/src/state/messages/channels.ts
@@ -0,0 +1,34 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { MessageInterface } from "types/messages";
+
+interface ChannelsState {
+  activeThread: string;
+  activeThreadMessages: MessageInterface[];
+}
+
+const initialState: ChannelsState = {
+  activeThread: "",
+  activeThreadMessages: [],
+};
+
+const channelsThreadsSlice = createSlice({
+  name: "channelThreads",
+  initialState,
+  reducers: {
+    setActiveThread: (
+      state,
+      action: PayloadAction<{ threadId: string; messages: MessageInterface[] }>,
+    ) => {
+      state.activeThread = action.payload.threadId;
+      state.activeThreadMessages = action.payload.messages;
+    },
+    resetActiveThread: (state) => {
+      state.activeThread = "";
+      state.activeThreadMessages = [];
+    },
+  },
+});
+
+export const { setActiveThread, resetActiveThread } =
+  channelsThreadsSlice.actions;
+export default channelsThreadsSlice.reducer;
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index ebdba35f..a380402e 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -7,6 +7,7 @@ import globalSearchReducer from "./messages/global-search";
 import activeMessageReducer from "./messages/activeMessage";
 import chatsReducer from "./messages/chats";
 import selectedUsersReducer from "./groups/selectedUsers";
+import channelThreadsReducer from "./messages/channels";
 
 export const store = configureStore({
   reducer: {
@@ -18,6 +19,7 @@ export const store = configureStore({
     chats: chatsReducer,
     globalSearch: globalSearchReducer,
     selectedUsers: selectedUsersReducer,
+    channelsThreads: channelThreadsReducer,
   },
 });
 

From 706089b97f29ca98c458566c7fef88885c54e81c Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 01:19:09 +0200
Subject: [PATCH 108/136] =?UTF-8?q?=F0=9F=92=84=20(channels):=20Finish=20c?=
 =?UTF-8?q?hannel-settings=20ui=20(#148)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 (channels): Finish channel-settings ui

* 🐛 (groups): Get group members from local state

* 🔇 Removed unnecessary comments
---
 app/src/components/User.tsx                   |  2 ++
 app/src/components/side-bar/SideBar.tsx       | 10 +++++++
 .../side-bar/groups/AddMoreMembers.tsx        | 18 ++++++-----
 .../side-bar/groups/AddNewGroupMembers.tsx    | 12 ++------
 .../side-bar/settings/GroupInfoHeader.tsx     | 13 ++++++--
 app/src/data/sideBar.ts                       | 19 +++++++++---
 app/src/features/chats/Topbar.tsx             | 30 +++++++++++++++----
 app/src/features/chats/hooks/useChats.ts      |  3 +-
 app/src/features/groups/EditGroupInfo.tsx     | 10 ++++++-
 app/src/features/groups/data/settings.ts      | 18 ++++++-----
 app/src/features/groups/hooks/useGroupInfo.ts | 23 +++++++-------
 app/src/state/side-bar/sideBar.ts             |  8 ++++-
 app/src/types/sideBar.ts                      |  2 ++
 13 files changed, 118 insertions(+), 50 deletions(-)

diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
index 40d55f63..ecfe1cac 100644
--- a/app/src/components/User.tsx
+++ b/app/src/components/User.tsx
@@ -84,6 +84,8 @@ function User({ user, view }: UserProps) {
   const { chatId } = useParams<{ chatId: string }>();
   const { isPending, isCurrUserAdmin } = useGroupInfo();
 
+  console.log(isCurrUserAdmin);
+
   const dispatch = useAppDispatch();
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
   const { removeMembers } = useSocket();
diff --git a/app/src/components/side-bar/SideBar.tsx b/app/src/components/side-bar/SideBar.tsx
index d19c2199..fca3e253 100644
--- a/app/src/components/side-bar/SideBar.tsx
+++ b/app/src/components/side-bar/SideBar.tsx
@@ -161,6 +161,16 @@ const sideBarMap: {
       <Permissions />
     </SettingsSideBar>
   ),
+  ChannelInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <GroupInfo />
+    </SettingsSideBar>
+  ),
+  EditChannelInfo: () => (
+    <SettingsSideBar rows={[]}>
+      <EditGroupInfo />
+    </SettingsSideBar>
+  ),
 };
 
 function Sidebar({ type }: { type: "left" | "right" }) {
diff --git a/app/src/components/side-bar/groups/AddMoreMembers.tsx b/app/src/components/side-bar/groups/AddMoreMembers.tsx
index c4d4cd8c..102cf7f2 100644
--- a/app/src/components/side-bar/groups/AddMoreMembers.tsx
+++ b/app/src/components/side-bar/groups/AddMoreMembers.tsx
@@ -1,5 +1,6 @@
-import { useDispatch } from "react-redux";
 import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
 
 import AddMembers from "./AddMembers";
 
@@ -8,10 +9,9 @@ import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
 import { sideBarPages } from "types/sideBar";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import AddMembersButton from "./AddMembersButton";
-import { useAllUsers } from "@features/groups/hooks/useAllUsers";
+
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
-import { useParams } from "react-router-dom";
 import { clearSelectedUsers } from "@state/groups/selectedUsers";
 
 const Container = styled.div`
@@ -22,21 +22,25 @@ const Container = styled.div`
 function AddMoreMembers() {
   const { chatId } = useParams<{ chatId: string }>();
 
-  const { groupMembers, isPending: isPendingGroupMembers } = useGroupInfo();
-  const { users, isPending: isPendenigAllUsers } = useAllUsers();
+  const { groupMembers, isPending, chatType } = useGroupInfo();
+  const users = useAppSelector((state) => state.chats.members);
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
   const { addGroupMembers } = useSocket();
 
   const dispatch = useDispatch();
 
-  if (isPendingGroupMembers || isPendenigAllUsers) return;
+  if (isPending) return;
+  console.log(chatType);
 
   function handleClick() {
     addGroupMembers({
       chatId: chatId!,
       users: selectedUsers.map((user) => user._id),
     });
-    const redirect = sideBarPages.GROUP_INFO;
+    const redirect =
+      chatType === "group"
+        ? sideBarPages.GROUP_INFO
+        : sideBarPages.CHANNEL_INFO;
     dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
     dispatch(clearSelectedUsers());
   }
diff --git a/app/src/components/side-bar/groups/AddNewGroupMembers.tsx b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
index bc5fc5b0..37b0e34f 100644
--- a/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
+++ b/app/src/components/side-bar/groups/AddNewGroupMembers.tsx
@@ -6,8 +6,7 @@ import { sideBarPages } from "types/sideBar";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 
 import { useSidebarType } from "../SideBarContext";
-import { useAllUsers } from "@features/groups/hooks/useAllUsers";
-import { useUser } from "@features/authentication/login/hooks/useUser";
+
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import AddMembersButton from "./AddMembersButton";
 
@@ -25,15 +24,10 @@ function AddNewGroupMembers() {
   );
 
   const type = props?.view;
+  const users = useAppSelector((state) => state.chats.members);
 
-  const { users, isPending: isPendenigAllUsers } = useAllUsers();
-  const { user: currentUser, isPending: isPendingCurrentUser } = useUser();
   const dispatch = useAppDispatch();
 
-  if (isPendenigAllUsers || isPendingCurrentUser) return null;
-
-  const filteredUsers = users?.filter((user) => user._id !== currentUser._id);
-
   function handleClick() {
     const redirect =
       type === "channel" ? sideBarPages.NEW_CHANNEL : sideBarPages.NEW_GROUP;
@@ -42,7 +36,7 @@ function AddNewGroupMembers() {
 
   return (
     <Container>
-      <AddMembers users={filteredUsers!} />
+      <AddMembers users={users} />
       <AddMembersButton onClick={handleClick} />
     </Container>
   );
diff --git a/app/src/components/side-bar/settings/GroupInfoHeader.tsx b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
index 2d815cb8..fe356545 100644
--- a/app/src/components/side-bar/settings/GroupInfoHeader.tsx
+++ b/app/src/components/side-bar/settings/GroupInfoHeader.tsx
@@ -11,6 +11,7 @@ import { sideBarPages } from "types/sideBar";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import BackArrow from "@components/BackArrow";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+import { useChat } from "@features/chats/hooks/useChat";
 
 const StyledSideBarHeader = styled.div`
   display: flex;
@@ -29,6 +30,8 @@ const Container = styled.div`
 `;
 
 function GroupInfoHeader() {
+  const { chat, isPending } = useChat();
+
   const type = useSidebarType();
   const { setIsRightSideBarOpen } = useRightSideBarContext();
 
@@ -39,11 +42,15 @@ function GroupInfoHeader() {
   );
 
   const dispatch = useAppDispatch();
+  if (!chat || isPending) return null;
 
   function handleEdit() {
     dispatch(
       updateSideBarView({
-        redirect: sideBarPages.EDIT_GROUP_INFO,
+        redirect:
+          chat?.type === "group"
+            ? sideBarPages.EDIT_GROUP_INFO
+            : sideBarPages.EDIT_CHANNEL_INFO,
         data: { type },
       })
     );
@@ -52,7 +59,7 @@ function GroupInfoHeader() {
   return (
     <StyledSideBarHeader data-testid="group-info-header">
       <Container>
-        {title === "Group Info" ? (
+        {title === "Group Info" || title === "Channel Info" ? (
           <Icon
             data-testid="close-button"
             onClick={() => setIsRightSideBarOpen(false)}
@@ -66,7 +73,7 @@ function GroupInfoHeader() {
           {title}
         </Heading>
       </Container>
-      {title === "Group Info" && (
+      {(title === "Group Info" || title === "Channel Info") && (
         <Icon data-testid="edit-button" onClick={handleEdit}>
           {getIcon("Edit")}
         </Icon>
diff --git a/app/src/data/sideBar.ts b/app/src/data/sideBar.ts
index 0bcc3ef8..ad26ee24 100644
--- a/app/src/data/sideBar.ts
+++ b/app/src/data/sideBar.ts
@@ -93,6 +93,8 @@ const pagesMap: { [K in pagesStrings]: string } = {
   ADD_ADMINS: "AddAdmins",
   MEMBERS: "Members",
   PERMISSIONS: "Permissions",
+  CHANNEL_INFO: "ChannelInfo",
+  EDIT_CHANNEL_INFO: "EditChannelInfo",
 };
 
 const settingsRows = [
@@ -244,7 +246,6 @@ const editGroupInfo: SideBarView = {
 
 const groupType: SideBarView = {
   title: "Group Type",
-  backView: sideBarPages.EDIT_GROUP_INFO,
   page: "GROUP_TYPE",
 };
 
@@ -256,7 +257,6 @@ const addMoreMembers: SideBarView = {
 
 const admins: SideBarView = {
   title: "Adminstrators",
-  backView: sideBarPages.EDIT_GROUP_INFO,
   page: "ADMINS",
 };
 
@@ -268,16 +268,25 @@ const addAdmins: SideBarView = {
 
 const members: SideBarView = {
   title: "Members",
-  backView: sideBarPages.EDIT_GROUP_INFO,
   page: "MEMBERS",
 };
 
 const permissions: SideBarView = {
   title: "Permissions",
-  backView: sideBarPages.EDIT_GROUP_INFO,
   page: "PERMISSIONS",
 };
 
+const channelInfo: SideBarView = {
+  title: "Channel Info",
+  page: "CHANNEL_INFO",
+};
+
+const editChannelInfo: SideBarView = {
+  title: "Edit",
+  backView: sideBarPages.CHANNEL_INFO,
+  page: "EDIT_CHANNEL_INFO",
+};
+
 export {
   chats,
   contacts,
@@ -306,4 +315,6 @@ export {
   addAdmins,
   members,
   permissions,
+  channelInfo,
+  editChannelInfo,
 };
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index e515fa2e..43319d26 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
@@ -19,7 +19,8 @@ import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarPr
 
 import { getElapsedTime } from "@utils/helpers";
 import { getChatByID } from "./utils/helpers";
-import Button from "@components/Button";
+import { updateSideBarView } from "@state/side-bar/sideBar";
+import { sideBarPages } from "types/sideBar";
 import { resetActiveThread } from "@state/messages/channels";
 
 const Container = styled.div<{ $hasMargin?: boolean }>`
@@ -137,10 +138,24 @@ function Topbar() {
   const { setIsRightSideBarOpen } = useRightSideBarContext();
 
   function handleOpenRightSideBar() {
-    if (chat?.type === "channel" || chat?.type === "group")
-      setIsRightSideBarOpen((prev) => !prev);
+    if (chat?.type === "channel" || chat?.type === "group") {
+      dispatch(
+        updateSideBarView({
+          redirect:
+            chat?.type === "group"
+              ? sideBarPages.GROUP_INFO
+              : sideBarPages.CHANNEL_INFO,
+          data: { type: "right" },
+        })
+      );
+    }
   }
 
+  useEffect(() => {
+    if (!chatId) return;
+    handleOpenRightSideBar();
+  }, [chatId]);
+
   let image;
   let lastSeen;
 
@@ -190,7 +205,7 @@ function Topbar() {
             data-testid="chat-avatar"
             image={image}
             name={chat.name?.charAt(0)}
-            onClick={handleOpenRightSideBar}
+            onClick={() => setIsRightSideBarOpen((prev) => !prev)}
           />
         )}
         {activeThread && (
@@ -204,7 +219,10 @@ function Topbar() {
           <SearchBar onClose={toggleSearch} />
         ) : (
           <>
-            <Info data-testid="chat-info" onClick={handleOpenRightSideBar}>
+            <Info
+              data-testid="chat-info"
+              onClick={() => setIsRightSideBarOpen((prev) => !prev)}
+            >
               <Content>
                 <Name data-testid="chat-name">
                   {activeThread ? "Comments" : chat.name}
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index c4792509..2efbe381 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -70,8 +70,7 @@ export function useChats() {
 
     const initialChatState: ChatsState = {
       chats: parseChatsToState(chatData),
-      members:
-        chatData?.members?.filter((member) => member._id !== userId) || [],
+      members: chatData?.members || [],
     };
 
     processMessages(initialChatState).then(() => {
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index a041fd99..020a57c2 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -6,6 +6,7 @@ import { useGroupInfo } from "./hooks/useGroupInfo";
 import { useSocket } from "@hooks/useSocket";
 import { useRightSideBarContext } from "./contexts/RightSideBarProvider";
 import { getSettings } from "./data/settings";
+import { sideBarPages } from "types/sideBar";
 
 const Container = styled.div`
   background-color: var(--color-background);
@@ -15,12 +16,17 @@ const Container = styled.div`
 
 function EditGroupInfo() {
   const dispatch = useDispatch();
-  const { admins, groupMembers, chatId, isPending } = useGroupInfo();
+  const { admins, groupMembers, chatId, isPending, chatType } = useGroupInfo();
   const { leaveGroup } = useSocket();
   const { setIsRightSideBarOpen } = useRightSideBarContext();
 
   if (isPending) return null;
 
+  const backView =
+    chatType === "group"
+      ? sideBarPages.EDIT_GROUP_INFO
+      : sideBarPages.EDIT_CHANNEL_INFO;
+
   const settings = getSettings({
     dispatch,
     admins,
@@ -29,6 +35,8 @@ function EditGroupInfo() {
     leaveGroup,
     setIsRightSideBarOpen,
     resetRightSideBar,
+    chatType: chatType!,
+    backView,
   });
 
   return (
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
index 2e553a34..a166fd0e 100644
--- a/app/src/features/groups/data/settings.ts
+++ b/app/src/features/groups/data/settings.ts
@@ -8,12 +8,15 @@ type SettingsProps = {
   admins: any[];
   groupMembers: any[];
   chatId: string;
+  chatType: string;
+  backView: sideBarPages;
   leaveGroup: (params: { chatId: string }) => void;
   setIsRightSideBarOpen: (value: boolean) => void;
   resetRightSideBar: () => { type: string };
 };
 
 const getSettings = ({
+  chatType,
   dispatch,
   admins,
   groupMembers,
@@ -21,17 +24,18 @@ const getSettings = ({
   leaveGroup,
   setIsRightSideBarOpen,
   resetRightSideBar,
+  backView,
 }: SettingsProps) => [
   {
     testid: "group-type",
     icon: "Lock" as iconStrings,
-    title: "Group Type",
+    title: `${chatType?.charAt(0)?.toUpperCase()}${chatType?.slice(1)} Type`,
     subtitle: "private",
     onClick: () =>
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.GROUP_TYPE,
-          data: { type: "right" },
+          data: { type: "right", backView },
         })
       ),
   },
@@ -44,20 +48,20 @@ const getSettings = ({
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.ADMINS,
-          data: { type: "right" },
+          data: { type: "right", backView },
         })
       ),
   },
   {
     testid: "members",
     icon: "Members" as iconStrings,
-    title: "Members",
+    title: chatType === "group" ? "Members" : "Subscribers",
     subtitle: groupMembers.length,
     onClick: () =>
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.MEMBERS,
-          data: { type: "right" },
+          data: { type: "right", backView },
         })
       ),
   },
@@ -70,14 +74,14 @@ const getSettings = ({
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.PERMISSIONS,
-          data: { type: "right" },
+          data: { type: "right", backView },
         })
       ),
   },
   {
     testid: "leave-group-button",
     icon: "Delete" as iconStrings,
-    title: "Delete and Leave Group",
+    title: `Delete and Leave ${chatType}`,
     subtitle: "",
     onClick: () => {
       leaveGroup({ chatId });
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index 645bc075..785b62b2 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -1,8 +1,7 @@
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useParams } from "react-router-dom";
-import { useAllUsers, UserType } from "./useAllUsers";
+import { UserType } from "./useAllUsers";
 import { useState, useEffect } from "react";
-import { useUser } from "@features/authentication/login/hooks/useUser";
 
 function useGroupInfo() {
   const { chatId } = useParams<{ chatId: string }>();
@@ -10,16 +9,17 @@ function useGroupInfo() {
   const [admins, setAdmins] = useState<UserType[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isCurrUserAdmin, setIsCurrUserAdmin] = useState(false);
-  const { user, isPending: isPendingCurrUser } = useUser();
 
-  const group = useAppSelector((state) =>
-    state.chats.chats.find((chat) => chat._id === chatId)
-  );
+  const { chats, members: users } = useAppSelector((state) => state.chats);
+  const user = useAppSelector((state) => state.user.userInfo);
 
-  const { users, isPending } = useAllUsers();
+  const group = chats.find((chat) => chat._id === chatId);
+
+  console.log("group members ids", group?.members);
+  console.log("ALl users", users);
 
   useEffect(() => {
-    if (!isPending && group && users?.length) {
+    if (group && users?.length) {
       const members = group.members
         .map((groupMember) => {
           const user = users?.find((member) => member._id === groupMember._id);
@@ -32,17 +32,19 @@ function useGroupInfo() {
         })
         .filter((member) => member !== null);
 
+      console.log("current members", members);
+
       const groupAdmins = members.filter((member) => member.role === "admin");
       setIsCurrUserAdmin(
         members.some(
-          (member) => member._id === user._id && member.role === "admin"
+          (member) => member._id === user.id && member.role === "admin"
         )
       );
       setGroupMembers(members);
       setAdmins(groupAdmins);
       setIsLoading(false);
     }
-  }, [group, users, isPending, isPendingCurrUser, user]);
+  }, [group, users, user]);
 
   return {
     groupMembers,
@@ -51,6 +53,7 @@ function useGroupInfo() {
     admins,
     isCurrUserAdmin,
     chatId,
+    chatType: group?.type,
   };
 }
 
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 7c695a5b..50501f68 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -20,6 +20,8 @@ import {
   addAdmins,
   members,
   permissions,
+  channelInfo,
+  editChannelInfo,
 } from "../../data/sideBar";
 import { pagesStrings } from "types/sideBar";
 
@@ -80,6 +82,10 @@ function getSideBarPage(type: number): SideBarView {
       return members;
     case sideBarPages.PERMISSIONS:
       return permissions;
+    case sideBarPages.CHANNEL_INFO:
+      return channelInfo;
+    case sideBarPages.EDIT_CHANNEL_INFO:
+      return editChannelInfo;
     default:
       throw new Error("Unknown Type");
   }
@@ -106,7 +112,7 @@ const sideBarSlice = createSlice({
       const updatedSideBar = {
         page: newData.page,
         title: newData.title,
-        backView: newData.backView,
+        backView: data?.backView ? data?.backView : newData?.backView,
         props: { ...newData.props },
       };
 
diff --git a/app/src/types/sideBar.ts b/app/src/types/sideBar.ts
index 2d2a43ff..176cdb28 100644
--- a/app/src/types/sideBar.ts
+++ b/app/src/types/sideBar.ts
@@ -18,6 +18,8 @@ enum sideBarPages {
   ADD_ADMINS,
   MEMBERS,
   PERMISSIONS,
+  CHANNEL_INFO,
+  EDIT_CHANNEL_INFO,
 }
 
 type pagesStrings = keyof typeof sideBarPages;

From 5243c8a23773a19b7f5b59d9976a8a53d9085734 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 02:06:59 +0200
Subject: [PATCH 109/136] =?UTF-8?q?=F0=9F=90=9B(groups):=20Fix=20backView?=
 =?UTF-8?q?=20of=20admin=20page=20(#150)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 (channels): Finish channel-settings ui

* 🐛 (groups): Get group members from local state

* 🔇 Removed unnecessary comments

* 🐛 Fix backView of admin page
---
 .../components/side-bar/groups/AddAdmins.tsx  |  8 ++++++-
 app/src/features/chats/Topbar.tsx             | 21 ++++++++++++-------
 app/src/features/groups/Admins.tsx            |  6 +++++-
 app/src/state/side-bar/sideBar.ts             |  7 +++++++
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/app/src/components/side-bar/groups/AddAdmins.tsx b/app/src/components/side-bar/groups/AddAdmins.tsx
index 2217c3db..5ee62cc2 100644
--- a/app/src/components/side-bar/groups/AddAdmins.tsx
+++ b/app/src/components/side-bar/groups/AddAdmins.tsx
@@ -25,6 +25,7 @@ function AddAdmins() {
   const { groupMembers, isPending } = useGroupInfo();
 
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
+  const { props } = useAppSelector((state) => state.sideBarData.rightSideBar);
 
   const dispatch = useDispatch();
   const { addAdmins } = useSocket();
@@ -35,7 +36,12 @@ function AddAdmins() {
       members: selectedUsers.map((user) => user._id),
     });
     const redirect = sideBarPages.ADMINS;
-    dispatch(updateSideBarView({ redirect, data: { type: "right" } }));
+    dispatch(
+      updateSideBarView({
+        redirect,
+        data: { type: "right", backView: props?.prevBackView! },
+      })
+    );
     dispatch(clearSelectedUsers());
   }
 
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 43319d26..ec2fc116 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -21,6 +21,7 @@ import { getElapsedTime } from "@utils/helpers";
 import { getChatByID } from "./utils/helpers";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
+
 import { resetActiveThread } from "@state/messages/channels";
 
 const Container = styled.div<{ $hasMargin?: boolean }>`
@@ -138,7 +139,9 @@ function Topbar() {
   const { setIsRightSideBarOpen } = useRightSideBarContext();
 
   function handleOpenRightSideBar() {
-    if (chat?.type === "channel" || chat?.type === "group") {
+    if (!chat) return;
+    if (chat?.type === "private") setIsRightSideBarOpen(false);
+    else {
       dispatch(
         updateSideBarView({
           redirect:
@@ -154,7 +157,7 @@ function Topbar() {
   useEffect(() => {
     if (!chatId) return;
     handleOpenRightSideBar();
-  }, [chatId]);
+  }, [chatId, chat]);
 
   let image;
   let lastSeen;
@@ -177,10 +180,15 @@ function Topbar() {
         chatId: chatId!,
         isBlocked: false,
         userId: userId,
-      }),
+      })
     );
   }
 
+  function toggleRightSideBar() {
+    if (chat?.type === "private") return;
+    setIsRightSideBarOpen((prev) => !prev);
+  }
+
   const closeThread = () => {
     dispatch(resetActiveThread());
   };
@@ -205,7 +213,7 @@ function Topbar() {
             data-testid="chat-avatar"
             image={image}
             name={chat.name?.charAt(0)}
-            onClick={() => setIsRightSideBarOpen((prev) => !prev)}
+            onClick={toggleRightSideBar}
           />
         )}
         {activeThread && (
@@ -219,10 +227,7 @@ function Topbar() {
           <SearchBar onClose={toggleSearch} />
         ) : (
           <>
-            <Info
-              data-testid="chat-info"
-              onClick={() => setIsRightSideBarOpen((prev) => !prev)}
-            >
+            <Info data-testid="chat-info" onClick={toggleRightSideBar}>
               <Content>
                 <Name data-testid="chat-name">
                   {activeThread ? "Comments" : chat.name}
diff --git a/app/src/features/groups/Admins.tsx b/app/src/features/groups/Admins.tsx
index 2024f5e1..c4aa76f3 100644
--- a/app/src/features/groups/Admins.tsx
+++ b/app/src/features/groups/Admins.tsx
@@ -6,11 +6,15 @@ import { useState } from "react";
 import { useDispatch } from "react-redux";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 function Admins() {
   const { isPending, admins } = useGroupInfo();
   const [searchQuery, setSearchQuery] = useState("");
   const dispatch = useDispatch();
+  const { backView } = useAppSelector(
+    (state) => state.sideBarData.rightSideBar
+  );
 
   if (isPending) return;
 
@@ -24,7 +28,7 @@ function Admins() {
     dispatch(
       updateSideBarView({
         redirect: sideBarPages.ADD_ADMINS,
-        data: { type: "right" },
+        data: { type: "right", prevBackView: backView },
       })
     );
   }
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index 50501f68..d08201a0 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -116,6 +116,13 @@ const sideBarSlice = createSlice({
         props: { ...newData.props },
       };
 
+      if (redirect === sideBarPages.ADD_ADMINS) {
+        updatedSideBar.props = {
+          ...updatedSideBar.props,
+          prevBackView: data.prevBackView,
+        };
+      }
+
       if (redirect === sideBarPages.ADD_MEMBERS) {
         updatedSideBar.props = {
           ...updatedSideBar.props,

From 6f3bc3927778aa9643efd919b7d6daa94752a14e Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 02:12:26 +0200
Subject: [PATCH 110/136] Feature/admin dashboard (#149)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* feat: ban user

* test: add testid
---
 app/public/{ => assets}/TelWare.png           | Bin
 app/src/components/Button.tsx                 |  49 ++++---
 app/src/components/Logout.tsx                 |  20 +++
 app/src/components/Main.tsx                   |   2 +-
 .../side-bar/chats/SideBarMenuItem.tsx        |   2 +-
 .../chats/theme-toggle/ThemeToggle.tsx        |  58 +++++---
 .../settings/SettingsSideBarHeader.tsx        |   1 -
 app/src/data/icons.tsx                        |  12 +-
 .../admin/components/AdminAppLayout.tsx       |  64 +++++++++
 .../admin/components/AdminGroupsList.tsx      |  64 +++++++++
 .../features/admin/components/AdminHeader.tsx |  45 ++++++
 .../admin/components/AdminHeaderMenu.tsx      |  33 +++++
 .../admin/components/AdminMainNav.tsx         |  88 ++++++++++++
 .../admin/components/AdminNavMenu.tsx         |  87 ++++++++++++
 .../admin/components/AdminSidebar.tsx         |  30 ++++
 .../admin/components/AdminUsersList.tsx       |  63 +++++++++
 app/src/features/admin/components/Filter.tsx  |  77 +++++++++++
 .../features/admin/components/GroupCard.tsx   |  80 +++++++++++
 app/src/features/admin/components/Logo.tsx    |  20 +++
 .../features/admin/components/UserCard.tsx    |  83 +++++++++++
 .../admin/components/UserCardButton.tsx       |  72 ++++++++++
 .../features/admin/hooks/useActivateUser.ts   |  28 ++++
 app/src/features/admin/hooks/useBanUser.ts    |  28 ++++
 .../features/admin/hooks/useDeactivateUser.ts |  28 ++++
 .../features/admin/hooks/useFilterGroup.ts    |  28 ++++
 app/src/features/admin/hooks/useGroups.ts     |  12 ++
 .../features/admin/hooks/useUnfilterGroup.ts  |  28 ++++
 app/src/features/admin/hooks/useUsers.ts      |  16 +++
 app/src/features/admin/services/apiGroups.ts  |  71 ++++++++++
 app/src/features/admin/services/apiUsers.ts   |  92 +++++++++++++
 app/src/features/chats/StartNewChat.tsx       |   1 -
 .../privacy-settings/hooks/useBlock.ts        |  12 +-
 .../hooks/useUpdatePrivacy.ts                 |   4 +-
 .../privacy-settings/service/apiBlockUser.ts  |   4 +-
 .../service/apiChangeSettings.ts              |   4 +-
 .../service/apiGetBlockList.ts                |   4 +-
 .../service/apiRemoveFromBlocks.ts            |   4 +-
 .../stories/components/StoryListContainer.tsx |   2 +-
 .../features/stories/hooks/useMyStories.ts    |   2 +-
 .../stories/services/apiGetStories.ts         |   1 +
 app/src/mocks/admin/admin.ts                  | 123 +++++++++++++++++
 app/src/mocks/data/admin.ts                   | 122 ++++++++++++++++
 app/src/mocks/data/chats.ts                   | 130 +++++++++---------
 app/src/mocks/data/users.ts                   |  42 ++++++
 app/src/mocks/handlers.ts                     |   2 +
 app/src/mocks/userauth/login.ts               |  64 ++++++++-
 app/src/state/admin/adminView.ts              |  25 ++++
 app/src/state/store.ts                        |   2 +
 app/src/styles/GlobalStyles.tsx               |  38 ++++-
 app/src/types/admin.ts                        |  21 +++
 ....timestamp-1734385645418-efb6d73151a22.mjs |  18 +++
 51 files changed, 1776 insertions(+), 130 deletions(-)
 rename app/public/{ => assets}/TelWare.png (100%)
 create mode 100644 app/src/components/Logout.tsx
 create mode 100644 app/src/features/admin/components/AdminAppLayout.tsx
 create mode 100644 app/src/features/admin/components/AdminGroupsList.tsx
 create mode 100644 app/src/features/admin/components/AdminHeader.tsx
 create mode 100644 app/src/features/admin/components/AdminHeaderMenu.tsx
 create mode 100644 app/src/features/admin/components/AdminMainNav.tsx
 create mode 100644 app/src/features/admin/components/AdminNavMenu.tsx
 create mode 100644 app/src/features/admin/components/AdminSidebar.tsx
 create mode 100644 app/src/features/admin/components/AdminUsersList.tsx
 create mode 100644 app/src/features/admin/components/Filter.tsx
 create mode 100644 app/src/features/admin/components/GroupCard.tsx
 create mode 100644 app/src/features/admin/components/Logo.tsx
 create mode 100644 app/src/features/admin/components/UserCard.tsx
 create mode 100644 app/src/features/admin/components/UserCardButton.tsx
 create mode 100644 app/src/features/admin/hooks/useActivateUser.ts
 create mode 100644 app/src/features/admin/hooks/useBanUser.ts
 create mode 100644 app/src/features/admin/hooks/useDeactivateUser.ts
 create mode 100644 app/src/features/admin/hooks/useFilterGroup.ts
 create mode 100644 app/src/features/admin/hooks/useGroups.ts
 create mode 100644 app/src/features/admin/hooks/useUnfilterGroup.ts
 create mode 100644 app/src/features/admin/hooks/useUsers.ts
 create mode 100644 app/src/features/admin/services/apiGroups.ts
 create mode 100644 app/src/features/admin/services/apiUsers.ts
 create mode 100644 app/src/mocks/admin/admin.ts
 create mode 100644 app/src/mocks/data/admin.ts
 create mode 100644 app/src/state/admin/adminView.ts
 create mode 100644 app/src/types/admin.ts
 create mode 100644 app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs

diff --git a/app/public/TelWare.png b/app/public/assets/TelWare.png
similarity index 100%
rename from app/public/TelWare.png
rename to app/public/assets/TelWare.png
diff --git a/app/src/components/Button.tsx b/app/src/components/Button.tsx
index 6f9adeef..42094180 100644
--- a/app/src/components/Button.tsx
+++ b/app/src/components/Button.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 
-const Button = styled.button<{ $type?: string }>`
+const Button = styled.button<{ $type?: string; $width?: string }>`
   font-weight: bold;
   letter-spacing: 1.5px;
   border: none;
@@ -24,22 +24,37 @@ const Button = styled.button<{ $type?: string }>`
     opacity: 0.6;
   }
 
-  ${(props) =>
-    props.$type === "modal" &&
-    css`
-      font-weight: normal;
-      letter-spacing: normal;
-    `}
-  ${(props) =>
-    props.$type === "danger" &&
-    css`
-      background-color: var(--color-error);
-      color: var(--color-text-button);
-      font-weight: normal;
-      &:hover {
-        background-color: var(--color-error-shade);
-      }
-    `}
+  width: ${(props) => props.$width || "auto"};
+  ${(props) => {
+    switch (props.$type) {
+      case "normal":
+        return css`
+          background-color: var(--color-border);
+          color: var(--color-text);
+          font-weight: normal;
+          letter-spacing: normal;
+          &:hover {
+            background-color: var(--color-border-hover);
+          }
+        `;
+      case "modal":
+        return css`
+          font-weight: normal;
+          letter-spacing: normal;
+        `;
+      case "danger":
+        return css`
+          background-color: var(--color-error);
+          color: var(--color-text-button);
+          font-weight: normal;
+          &:hover {
+            background-color: var(--color-error-shade);
+          }
+        `;
+      default:
+        return;
+    }
+  }}
 `;
 
 export default Button;
diff --git a/app/src/components/Logout.tsx b/app/src/components/Logout.tsx
new file mode 100644
index 00000000..68ab47aa
--- /dev/null
+++ b/app/src/components/Logout.tsx
@@ -0,0 +1,20 @@
+import { useLogout } from "@features/authentication/logout/hooks/useLogout";
+import CircleIcon from "./CircleIcon";
+
+function Logout({ size = 1.8 }) {
+  const { logout } = useLogout();
+
+  return (
+    <CircleIcon
+      data-testid="logout-icon"
+      onClick={() => logout()}
+      $icon="Logout"
+      $padding={0.2}
+      $size={size}
+      $color="var(--color-text)"
+      $bgColor="var(--color-pattern)"
+    />
+  );
+}
+
+export default Logout;
diff --git a/app/src/components/Main.tsx b/app/src/components/Main.tsx
index b03092e7..282a1cd0 100644
--- a/app/src/components/Main.tsx
+++ b/app/src/components/Main.tsx
@@ -47,7 +47,7 @@ function Main({ children }: { children?: React.ReactNode }) {
     if (user && !isPending) {
       dispatch(setUserInfo(user));
     }
-  }, [dispatch, user]);
+  }, [dispatch, user, isPending]);
   return <StyledMain data-testid="main">{children}</StyledMain>;
 }
 
diff --git a/app/src/components/side-bar/chats/SideBarMenuItem.tsx b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
index 2b438f21..fb9fdbd8 100644
--- a/app/src/components/side-bar/chats/SideBarMenuItem.tsx
+++ b/app/src/components/side-bar/chats/SideBarMenuItem.tsx
@@ -31,7 +31,7 @@ function SideBarMenuItem({
   iconMapValue,
 }: SideBarMenuItemProps) {
   return (
-    <StyledMenuItem onClick={onClick}>
+    <StyledMenuItem onClick={onClick} data-testid={`side-bar-menu-${title}`}>
       {getIcon(iconMapValue)}
       {title}
       {children}
diff --git a/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx b/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx
index ab0b64b9..027d8e2e 100644
--- a/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx
+++ b/app/src/components/side-bar/chats/theme-toggle/ThemeToggle.tsx
@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { Theme, toggleTheme } from "@state/theme/theme";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { getIcon } from "@data/icons";
 
 const Switch = styled.label`
   position: relative;
@@ -26,7 +27,6 @@ const Slider = styled.span<{ $theme?: Theme }>`
   border-radius: 10px;
   padding: 4px;
   background-color: var(--accent-color);
-  background-color: var(--accent-color);
 
   ${({ $theme }) =>
     $theme === Theme.LIGHT &&
@@ -41,21 +41,15 @@ const Slider = styled.span<{ $theme?: Theme }>`
     left: -7px;
     bottom: -3px;
     transition: 0.2s;
-    transition: 0.2s;
     border-radius: 50%;
     background-color: var(--color-background);
     border: 2px solid;
     border-color: var(--accent-color);
 
-    border: 2px solid;
-    border-color: var(--accent-color);
-
     ${({ $theme }) =>
-      $theme === Theme.LIGHT &&
       $theme === Theme.LIGHT &&
       css`
         border-color: var(--pattern-color);
-        border-color: var(--pattern-color);
       `};
   }
 
@@ -63,22 +57,52 @@ const Slider = styled.span<{ $theme?: Theme }>`
     transform: translateX(25px);
   }
 `;
-function ThemeToggle() {
+const Container = styled.li<{ $theme?: Theme }>`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem;
+  height: 2.4rem;
+  width: 2.4rem;
+  justify-content: center;
+  background-color: var(--accent-color);
+
+  border-radius: 50%;
+  cursor: pointer;
+  ${({ $theme }) =>
+    $theme === Theme.LIGHT &&
+    css`
+      background-color: var(--pattern-color);
+    `};
+`;
+function ThemeToggle({ isAdmin = false }: { isAdmin?: boolean }) {
   const currentTheme = useAppSelector((state) => state.theme.value);
   const dispatch = useAppDispatch();
   const handleChange = () => {
     dispatch(toggleTheme());
   };
   return (
-    <Switch data-testid="toggle-mode-label">
-      <Input
-        data-testid="toggle-mode-checkbox"
-        type="checkbox"
-        checked={currentTheme === Theme.DARK}
-        onChange={handleChange}
-      />
-      <Slider $theme={currentTheme} data-testid="toggle-mode-slider" />
-    </Switch>
+    <>
+      {isAdmin ? (
+        <Container
+          $theme={currentTheme}
+          onClick={handleChange}
+          data-testid="toggle-mode-button"
+        >
+          {currentTheme === Theme.LIGHT ? getIcon("NightMode") : getIcon("Sun")}
+        </Container>
+      ) : (
+        <Switch data-testid="toggle-mode-label">
+          <Input
+            data-testid="toggle-mode-checkbox"
+            type="checkbox"
+            checked={currentTheme === Theme.DARK}
+            onChange={handleChange}
+          />
+          <Slider $theme={currentTheme} data-testid="toggle-mode-slider" />
+        </Switch>
+      )}
+    </>
   );
 }
 
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index d84406f0..ba73b5be 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -3,7 +3,6 @@ import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import Heading from "@components/Heading";
 import BackArrow from "@components/BackArrow";
 import CircleIcon from "@components/CircleIcon";
-import { useLogout } from "@features/authentication/logout/hooks/useLogout";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
 import { useSidebarType } from "../SideBarContext";
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 7806e197..81c37cc8 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -65,6 +65,8 @@ enum icons {
   Members,
   RemoveMember,
   Eye,
+  Sun,
+  Group,
 }
 
 type iconStrings = keyof typeof icons;
@@ -81,6 +83,14 @@ type IconConfig = {
 };
 
 const iconImports: Record<iconStrings, IconConfig> = {
+  Group: {
+    importFn: () => import("@mui/icons-material/GroupsOutlined"),
+    defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
+  },
+  Sun: {
+    importFn: () => import("@mui/icons-material/WbSunny"),
+    defaultProps: { sx: { color: `white` } },
+  },
   BlockIcon: {
     importFn: () => import("@mui/icons-material/Block"),
     defaultProps: { sx: { color: `var(--color-icon-secondary)` } },
@@ -437,7 +447,7 @@ function getIcon(
     sx?: SxProps;
     fontSize?: "small" | "medium" | "large";
     style?: React.CSSProperties;
-  },
+  }
 ) {
   if (!iconName) return undefined;
 
diff --git a/app/src/features/admin/components/AdminAppLayout.tsx b/app/src/features/admin/components/AdminAppLayout.tsx
new file mode 100644
index 00000000..250d41c7
--- /dev/null
+++ b/app/src/features/admin/components/AdminAppLayout.tsx
@@ -0,0 +1,64 @@
+import AdminSidebar from "./AdminSidebar";
+import AdminHeader from "./AdminHeader";
+import styled from "styled-components";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { View } from "@state/admin/adminView";
+import UsersList from "./AdminUsersList";
+import GroupsList from "./AdminGroupsList";
+
+const StyledAppLayout = styled.div`
+  display: grid;
+  height: 100vh;
+  grid-template-rows: auto 1fr;
+  overflow-x: auto;
+  @media ${MOBILE_VIEW} {
+    grid-template-columns: 1fr;
+    & > main {
+      padding: 0;
+    }
+    & > aside {
+      display: none;
+    }
+  }
+
+  @media ${DESKTOP_VIEW} {
+    display: grid;
+    grid-template-columns: minmax(20rem, 1.3fr) 5fr;
+
+    & > main {
+      display: block;
+    }
+
+    & > aside {
+      display: block;
+    }
+  }
+`;
+
+const Main = styled.main`
+  overflow-y: auto;
+  padding: 4rem 2.4rem;
+  background-color: var(--admin-header-bg);
+  &::-webkit-scrollbar {
+    display: block;
+    width: 0.6rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    border-radius: 0.4rem;
+  }
+`;
+
+function AdminAppLayout() {
+  const adminView = useAppSelector((state) => state.adminView.value);
+  return (
+    <StyledAppLayout>
+      <AdminHeader />
+      <AdminSidebar />
+      <Main>{adminView === View.USERS ? <UsersList /> : <GroupsList />}</Main>
+    </StyledAppLayout>
+  );
+}
+
+export default AdminAppLayout;
diff --git a/app/src/features/admin/components/AdminGroupsList.tsx b/app/src/features/admin/components/AdminGroupsList.tsx
new file mode 100644
index 00000000..f47e0798
--- /dev/null
+++ b/app/src/features/admin/components/AdminGroupsList.tsx
@@ -0,0 +1,64 @@
+import styled from "styled-components";
+import { useEffect, useState } from "react";
+import { useGroups } from "../hooks/useGroups";
+import { Group } from "types/admin";
+import Filter from "./Filter";
+import GroupCard from "./GroupCard";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+
+const groupFilters = ["all", "filtered", "unfiltered"];
+const Container = styled.div`
+  gap: 3.2rem;
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+`;
+const StyledGroupsList = styled.ul`
+  display: grid;
+  gap: 1.6rem 0.6rem;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  @media ${MOBILE_VIEW} {
+    padding: 0 calc(50% - 7.5rem);
+  }
+  @media ${DESKTOP_VIEW} {
+    padding: 1.6rem;
+  }
+`;
+function GroupsList() {
+  const { data } = useGroups();
+  const groups = data?.data.groupsAndChannels;
+  const [renderedGroups, setRenderedGroups] = useState<Group[]>(groups);
+  const [currentFilter, setCurrentFilter] = useState("all");
+
+  useEffect(() => {
+    const filteredGroups: Group[] =
+      currentFilter === "all"
+        ? groups
+        : currentFilter === "filtered"
+          ? groups?.filter((group: Group) => group.isFilterd)
+          : groups?.filter((group: Group) => !group.isFilterd);
+    setRenderedGroups(filteredGroups);
+  }, [groups, currentFilter]);
+  return (
+    <Container>
+      <Filter
+        filters={groupFilters}
+        onFilterChange={(filter: string) => setCurrentFilter(filter)}
+      />
+      <StyledGroupsList>
+        {renderedGroups?.map((group: Group) => (
+          <GroupCard
+            key={group.id}
+            id={group.id}
+            name={group.name}
+            photo={group.picture}
+            filtered={group.isFilterd}
+            numberOfMembers={group.numberOfMembers}
+          />
+        ))}
+      </StyledGroupsList>
+    </Container>
+  );
+}
+
+export default GroupsList;
diff --git a/app/src/features/admin/components/AdminHeader.tsx b/app/src/features/admin/components/AdminHeader.tsx
new file mode 100644
index 00000000..b8829fa8
--- /dev/null
+++ b/app/src/features/admin/components/AdminHeader.tsx
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import AdminHeaderMenu from "./AdminHeaderMenu";
+import AdminNavMenu from "./AdminNavMenu";
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import Heading from "@components/Heading";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useProfileSettings } from "@features/profile-settings/hooks/useProfileSettings";
+
+const Header = styled.header`
+  display: flex;
+  align-items: center;
+  gap: minmax(2.4rem, 20px);
+  padding: 1.2rem 2.4rem;
+  justify-content: flex-start;
+  background-color: var(--admin-header-bg);
+  border-bottom: 1px solid var(--scrollbar-color);
+  @media ${MOBILE_VIEW} {
+    & > :first-child {
+      display: block;
+    }
+  }
+
+  @media ${DESKTOP_VIEW} {
+    & > :first-child {
+      display: none;
+    }
+  }
+`;
+const H4 = styled(Heading)`
+  color: var(--color-text);
+  flex: 1;
+`;
+
+function AdminHeader() {
+  const { data: user } = useProfileSettings();
+  return (
+    <Header>
+      <AdminNavMenu />
+      <H4 as="h4">Hi, {user?.firstName + " " + user?.lastName} 👋️</H4>
+      <AdminHeaderMenu />
+    </Header>
+  );
+}
+
+export default AdminHeader;
diff --git a/app/src/features/admin/components/AdminHeaderMenu.tsx b/app/src/features/admin/components/AdminHeaderMenu.tsx
new file mode 100644
index 00000000..5d921136
--- /dev/null
+++ b/app/src/features/admin/components/AdminHeaderMenu.tsx
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import Logout from "@components/Logout";
+import ThemeToggle from "@components/side-bar/chats/theme-toggle/ThemeToggle";
+
+const StyledHeaderMenu = styled.ul`
+  margin: 0;
+  padding: 0;
+  gap: 2rem;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  width: 8rem;
+`;
+const ListItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+
+function AdminHeaderMenu() {
+  return (
+    <StyledHeaderMenu data-testid="admin-header-menu">
+      <ThemeToggle isAdmin={true} />
+      <ListItem>
+        <Logout size={2.2} />
+      </ListItem>
+    </StyledHeaderMenu>
+  );
+}
+
+export default AdminHeaderMenu;
diff --git a/app/src/features/admin/components/AdminMainNav.tsx b/app/src/features/admin/components/AdminMainNav.tsx
new file mode 100644
index 00000000..b03ed32e
--- /dev/null
+++ b/app/src/features/admin/components/AdminMainNav.tsx
@@ -0,0 +1,88 @@
+import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
+import { getIcon } from "@data/icons";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { setView, View } from "@state/admin/adminView";
+import styled, { css } from "styled-components";
+
+const NavList = styled.ul`
+  display: flex;
+  gap: 2.8rem;
+  list-style: none;
+  flex-direction: column;
+  color: var(--color-text);
+  margin-top: 5.4rem;
+`;
+
+const NavLink = styled.li<{ $active?: boolean }>`
+  text-decoration: none;
+  margin-right: -2.5rem;
+  color: #f5f5f5;
+  cursor: pointer;
+
+  gap: 1.2rem;
+  display: flex;
+  font-weight: 500;
+  font-size: 1.2rem;
+  align-items: center;
+  transition: all 0.3s;
+  padding: 1.2rem 1.2rem;
+  border-radius: var(--border-radius-one-sided);
+
+  & svg {
+    width: 2.4rem;
+    height: 2.4rem;
+    color: #f5f5f5;
+    transition: all 0.2s;
+  }
+  ${({ $active }) =>
+    $active &&
+    css`
+      background-color: var(--admin-main-bg);
+      color: var(--accent-color);
+      svg {
+        color: var(--accent-color);
+      }
+    `};
+`;
+
+function AdminMainNav() {
+  const activeView = useAppSelector((state) => state.adminView.value);
+  const dispatch = useAppDispatch();
+  const handleViewChange = (view: View) => {
+    if (activeView !== view) {
+      dispatch(
+        setView({
+          value: view,
+        })
+      );
+    }
+  };
+  return (
+    <nav data-testid="admin-main-nav">
+      <NavList data-testid="nav-list">
+        <NavLink
+          onClick={() => {
+            handleViewChange(View.USERS);
+          }}
+          $active={activeView === View.USERS}
+          data-testid="users-nav"
+        >
+          {getIcon("Contacts")}
+          <span>Users</span>
+        </NavLink>
+        <NavLink
+          onClick={() => {
+            handleViewChange(View.GROUPS);
+          }}
+          $active={activeView === View.GROUPS}
+          data-testid="groups-nav"
+        >
+          {getIcon("Group")}
+          <span>Groups</span>
+        </NavLink>
+      </NavList>
+    </nav>
+  );
+}
+
+export default AdminMainNav;
diff --git a/app/src/features/admin/components/AdminNavMenu.tsx b/app/src/features/admin/components/AdminNavMenu.tsx
new file mode 100644
index 00000000..a76d8582
--- /dev/null
+++ b/app/src/features/admin/components/AdminNavMenu.tsx
@@ -0,0 +1,87 @@
+import SideBarMenuItem from "@components/side-bar/chats/SideBarMenuItem";
+import { getIcon } from "@data/icons";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { useMouseLeave } from "@hooks/useMouseLeave";
+import { setView, View } from "@state/admin/adminView";
+import { useState } from "react";
+import styled from "styled-components";
+
+const ToolsIcon = styled.div`
+  > svg {
+    color: var(--color-icon-secondary);
+    border-radius: var(--border-radius-modal);
+    padding: 0.3rem;
+    &:hover {
+      cursor: pointer;
+      background-color: var(--color-background-compact-menu-hover);
+    }
+  }
+  margin: 0 1rem 0 -1rem;
+`;
+const StyledList = styled.ul<{ $isOpened?: boolean }>`
+  width: 13rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0.5rem 0.2rem;
+  background-color: var(--color-background);
+  box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
+  border-radius: var(--border-radius-default);
+  visibility: ${({ $isOpened }) => ($isOpened ? "visible" : "hidden")};
+
+  z-index: 2;
+`;
+
+function AdminNavMenu() {
+  const [isOpened, setIsOpened] = useState(false);
+  const ref = useMouseLeave(() => setIsOpened(false), false);
+  const handleOpenSettings = () => {
+    setIsOpened((prevState) => !prevState);
+  };
+  const activeView = useAppSelector((state) => state.adminView.value);
+  const dispatch = useAppDispatch();
+  const handleViewChange = (view: View) => {
+    if (activeView !== view) {
+      dispatch(
+        setView({
+          value: view,
+        })
+      );
+    }
+    setIsOpened(false);
+  };
+  return (
+    <>
+      <ToolsIcon onClick={handleOpenSettings} data-testid="menu-items-icon">
+        {getIcon("Menu")}
+      </ToolsIcon>
+      {isOpened && (
+        <StyledList
+          $isOpened={isOpened}
+          ref={ref as React.RefObject<HTMLUListElement>}
+        >
+          <SideBarMenuItem
+            data-testid="menu-item-users"
+            title="Users"
+            iconMapValue="Contacts"
+            onClick={() => {
+              handleViewChange(View.USERS);
+            }}
+          />
+          <SideBarMenuItem
+            data-testid="menu-item-groups"
+            title="Groups"
+            iconMapValue="NewGroup"
+            onClick={() => {
+              handleViewChange(View.GROUPS);
+            }}
+          />
+        </StyledList>
+      )}
+    </>
+  );
+}
+
+export default AdminNavMenu;
diff --git a/app/src/features/admin/components/AdminSidebar.tsx b/app/src/features/admin/components/AdminSidebar.tsx
new file mode 100644
index 00000000..fa28ab70
--- /dev/null
+++ b/app/src/features/admin/components/AdminSidebar.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import Logo from "./Logo";
+import AdminMainNav from "./AdminMainNav";
+import Heading from "@components/Heading";
+
+const Sidebar = styled.aside`
+  gap: 3.2rem;
+  display: flex;
+  grid-row: 1 / -1;
+  flex-direction: column;
+  padding: 3.2rem 2.4rem;
+  background-color: var(--admin-sidebar-bg);
+`;
+const H1 = styled(Heading)`
+  color: white;
+  margin-bottom: 2.4rem;
+  text-align: center;
+`;
+
+function AdminSidebar() {
+  return (
+    <Sidebar data-testid="admin-sidebar">
+      <Logo />
+      <H1 as="h1">TelWare</H1>
+      <AdminMainNav />
+    </Sidebar>
+  );
+}
+
+export default AdminSidebar;
diff --git a/app/src/features/admin/components/AdminUsersList.tsx b/app/src/features/admin/components/AdminUsersList.tsx
new file mode 100644
index 00000000..2efd9124
--- /dev/null
+++ b/app/src/features/admin/components/AdminUsersList.tsx
@@ -0,0 +1,63 @@
+import styled from "styled-components";
+import { useEffect, useState } from "react";
+import { useUsers } from "../hooks/useUsers";
+import { User } from "types/admin";
+import Filter from "./Filter";
+import UserCard from "./UserCard";
+import { MOBILE_VIEW, DESKTOP_VIEW } from "@constants";
+
+const userFilters = ["all", "active", "deactivated", "banned"];
+const Container = styled.div`
+  gap: 3.2rem;
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+`;
+const StyledUsersList = styled.ul`
+  display: grid;
+  gap: 1.6rem;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  @media ${MOBILE_VIEW} {
+    padding: 0 calc(50% - 10.5rem);
+  }
+  @media ${DESKTOP_VIEW} {
+    padding: 1.6rem;
+  }
+`;
+function UsersList() {
+  const { users: usersData } = useUsers();
+  const users = usersData?.data.users;
+  console.log(users);
+  const [renderedUsers, setRenderedUsers] = useState<User[]>(users);
+  const [currentFilter, setCurrentFilter] = useState("all");
+
+  useEffect(() => {
+    const filteredUsers: User[] =
+      currentFilter === "all"
+        ? users
+        : users?.filter((user: User) => user.accountStatus === currentFilter);
+    setRenderedUsers(filteredUsers);
+  }, [users, currentFilter]);
+
+  return (
+    <Container>
+      <Filter
+        filters={userFilters}
+        onFilterChange={(filter: string) => setCurrentFilter(filter)}
+      />
+      <StyledUsersList data-testid="users-list">
+        {renderedUsers?.map((user: User) => (
+          <UserCard
+            key={user.id}
+            id={user.id}
+            userName={user.username}
+            photo={user.photo}
+            status={user.accountStatus}
+          />
+        ))}
+      </StyledUsersList>
+    </Container>
+  );
+}
+
+export default UsersList;
diff --git a/app/src/features/admin/components/Filter.tsx b/app/src/features/admin/components/Filter.tsx
new file mode 100644
index 00000000..e1b5e1a0
--- /dev/null
+++ b/app/src/features/admin/components/Filter.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { MOBILE_VIEW, DESKTOP_VIEW } from "@constants";
+
+interface Props {
+  filters: string[];
+  onFilterChange: (filter: string) => void;
+}
+
+const FilterContainer = styled.div<{ $filters: number }>`
+  display: flex;
+
+  padding: 0;
+  background-color: var(--admin-sidebar-bg);
+  width: ${({ $filters }) => ($filters > 1 ? "fit-content" : "100%")};
+  margin: 0 auto;
+  & > div {
+    border: 1px solid var(--color-border) none;
+  }
+  & > :first-child {
+    border-left: none;
+    border-radius: var(--border-radius-left-sided-small);
+  }
+  & > :last-child {
+    border-right: none;
+    border-radius: var(--border-radius-right-sided-small);
+  }
+  border-radius: var(--border-radius-default-small);
+`;
+
+const FilterCategory = styled.div<{ $active?: boolean }>`
+  text-align: center;
+  cursor: pointer;
+  color: var(--color-text);
+  font-size: 1.2rem;
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: var(--color-chat-active);
+  }
+  background-color: ${({ $active }) =>
+    $active ? "var(--color-chat-active)" : "inherit"};
+  @media ${MOBILE_VIEW} {
+    font-size: 0.8rem;
+    width: 5rem;
+    padding: 0.4rem 0.2rem;
+  }
+  @media ${DESKTOP_VIEW} {
+    font-size: 1.2rem;
+    width: 10rem;
+    padding: 0.8rem;
+  }
+`;
+function Filter(props: Props) {
+  const { filters, onFilterChange } = props;
+  const [activeFilter, setActiveFilter] = useState(0);
+  const handleFilterChange = (filter: string, index: number) => {
+    setActiveFilter(index);
+    onFilterChange(filter);
+  };
+
+  return (
+    <FilterContainer $filters={filters?.length} data-testid="filter-container">
+      {filters.map((filter, index) => (
+        <FilterCategory
+          key={filter}
+          onClick={() => handleFilterChange(filter, index)}
+          $active={activeFilter === index}
+          data-testid={`filter-${filter}`}
+        >
+          {filter}
+        </FilterCategory>
+      ))}
+    </FilterContainer>
+  );
+}
+
+export default Filter;
diff --git a/app/src/features/admin/components/GroupCard.tsx b/app/src/features/admin/components/GroupCard.tsx
new file mode 100644
index 00000000..d7c2972a
--- /dev/null
+++ b/app/src/features/admin/components/GroupCard.tsx
@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import { useUnfilterGroup } from "../hooks/useUnfilterGroup";
+import { useFilterGroup } from "../hooks/useFilterGroup";
+import Avatar from "@components/Avatar";
+import Heading from "@components/Heading";
+import Button from "@components/Button";
+
+interface GroupCardProps {
+  id: string;
+  name: string;
+  photo: string;
+  filtered: boolean;
+  numberOfMembers: number;
+}
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 1.2rem;
+  border-radius: 0.8rem;
+  background-color: var(--admin-sidebar-bg);
+  height: 15rem;
+  width: 15rem;
+  align-items: center;
+`;
+const P = styled.p<{ $filtered?: boolean }>`
+  color: ${({ $filtered }) =>
+    $filtered === undefined
+      ? "var(--color-text)"
+      : $filtered === false
+        ? "var(--color-error)"
+        : "var(--admin-card-active)"};
+`;
+const GroupInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+
+function GroupCard(props: GroupCardProps) {
+  const { id, name, photo, filtered, numberOfMembers } = props;
+  const { filterGroup } = useFilterGroup();
+  const { unfilterGroup } = useUnfilterGroup();
+  const handleFilterGroup = () => {
+    if (filtered) unfilterGroup(id);
+    else filterGroup(id);
+  };
+  const displayedName = name.length > 9 ? `${name.slice(0, 9)}...` : name;
+
+  return (
+    <Card data-testid={`group-card-${id}`}>
+      <GroupInfo>
+        <Avatar image={photo} name={name} />
+        <>
+          <Heading as="h4">{displayedName}</Heading>
+          <P $filtered={filtered}>{filtered ? "Filtered" : "Unfiltered"}</P>
+          <P>{numberOfMembers} members</P>
+        </>
+      </GroupInfo>
+      {
+        <Button
+          $type={filtered ? "danger" : "normal"}
+          onClick={handleFilterGroup}
+          $width="8rem"
+          data-testid={
+            filtered ? `unfilter-button-${id}` : `filter-button-${id}`
+          }
+        >
+          {filtered ? "Unfilter" : "Filter"}
+        </Button>
+      }
+    </Card>
+  );
+}
+
+export default GroupCard;
diff --git a/app/src/features/admin/components/Logo.tsx b/app/src/features/admin/components/Logo.tsx
new file mode 100644
index 00000000..2b93ad6e
--- /dev/null
+++ b/app/src/features/admin/components/Logo.tsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import src from "/assets/TelWare.png";
+const StyledLogo = styled.div`
+  text-align: center;
+`;
+
+const Img = styled.img`
+  height: 9.6rem;
+  width: auto;
+`;
+
+function Logo() {
+  return (
+    <StyledLogo>
+      <Img src={src} alt="Logo" data-testid="logo" />
+    </StyledLogo>
+  );
+}
+
+export default Logo;
diff --git a/app/src/features/admin/components/UserCard.tsx b/app/src/features/admin/components/UserCard.tsx
new file mode 100644
index 00000000..620784b0
--- /dev/null
+++ b/app/src/features/admin/components/UserCard.tsx
@@ -0,0 +1,83 @@
+import styled from "styled-components";
+import { userStatus } from "types/admin";
+import { useBanUser } from "../hooks/useBanUser";
+import { useActivateUser } from "../hooks/useActivateUser";
+import { useDeactivateUser } from "../hooks/useDeactivateUser";
+import Avatar from "@components/Avatar";
+import Heading from "@components/Heading";
+import UserCardButton from "./UserCardButton";
+
+interface UserCardProps {
+  id: string;
+  userName: string;
+  photo: string;
+  status: userStatus;
+}
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: 2.4rem;
+  border-radius: 0.8rem;
+  background-color: var(--admin-sidebar-bg);
+  height: 15rem;
+  width: 21rem;
+`;
+const P = styled.p<{ $status: userStatus }>`
+  color: ${({ $status }) =>
+    $status === userStatus.active
+      ? "var(--admin-card-active)"
+      : "var(--color-error)"};
+`;
+const UserInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+
+function UserCard(props: UserCardProps) {
+  const { id, userName, photo, status } = props;
+  const { activateUser } = useActivateUser();
+  const { deactivateUser } = useDeactivateUser();
+  const { banUser } = useBanUser();
+  const handleUserStatusChange = (status: string) => {
+    switch (status) {
+      case userStatus.active:
+        activateUser(id);
+        break;
+      case userStatus.deactivated:
+        deactivateUser(id);
+        break;
+      case userStatus.banned:
+        banUser(id);
+        break;
+      default:
+        break;
+    }
+  };
+  const displayedName =
+    userName?.length > 9 ? `${userName?.slice(0, 9)}...` : userName;
+
+  return (
+    <Card data-testid={`user-card-${id}`}>
+      <UserInfo>
+        <Avatar image={photo} name={userName} />
+        <>
+          <Heading as="h4">{displayedName}</Heading>
+          <P $status={status}>{status}</P>
+        </>
+      </UserInfo>
+      <UserCardButton
+        status={status}
+        onChangeStatus={handleUserStatusChange}
+        data-testid={`user-card-button-${id}`}
+      />
+    </Card>
+  );
+}
+
+export default UserCard;
diff --git a/app/src/features/admin/components/UserCardButton.tsx b/app/src/features/admin/components/UserCardButton.tsx
new file mode 100644
index 00000000..0cfedb1a
--- /dev/null
+++ b/app/src/features/admin/components/UserCardButton.tsx
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import { userStatus } from "types/admin";
+import Button from "@components/Button";
+
+interface Props {
+  status: userStatus;
+  onChangeStatus: (status: userStatus) => void;
+}
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 0.8rem 0;
+`;
+
+function UserCardButton(props: Props) {
+  const { status, onChangeStatus } = props;
+  let renderedButtons;
+  switch (status) {
+    case userStatus.active:
+      renderedButtons = (
+        <>
+          <Button
+            onClick={() => onChangeStatus(userStatus.deactivated)}
+            $type="normal"
+            $width="15rem"
+            data-testid="deactivate-button"
+          >
+            Deactivate
+          </Button>
+          <Button
+            onClick={() => onChangeStatus(userStatus.banned)}
+            $type="danger"
+            $width="15rem"
+            datatype="ban-button"
+          >
+            Ban
+          </Button>
+        </>
+      );
+      break;
+    case userStatus.deactivated:
+      renderedButtons = (
+        <>
+          <Button
+            $type="modal"
+            $width="15rem"
+            onClick={() => onChangeStatus(userStatus.active)}
+            data-testid="activate-button"
+          >
+            Activate
+          </Button>
+          <Button
+            onClick={() => onChangeStatus(userStatus.banned)}
+            $type="danger"
+            $width="15rem"
+            data-testid="ban-button"
+          >
+            Ban
+          </Button>
+        </>
+      );
+      break;
+    default:
+      renderedButtons = null;
+      break;
+  }
+  return <ButtonContainer>{renderedButtons}</ButtonContainer>;
+}
+
+export default UserCardButton;
diff --git a/app/src/features/admin/hooks/useActivateUser.ts b/app/src/features/admin/hooks/useActivateUser.ts
new file mode 100644
index 00000000..fb3d0efd
--- /dev/null
+++ b/app/src/features/admin/hooks/useActivateUser.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiActivateUser } from "../services/apiUsers";
+
+function useActivateUser() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: activateUser,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (userId: string) => apiActivateUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-users"] });
+      toast.success("User activated successfully");
+    },
+    onError: () => {
+      toast.error("Error activating user");
+    },
+  });
+
+  return { activateUser, data, error, isPending, isSuccess };
+}
+
+export { useActivateUser };
diff --git a/app/src/features/admin/hooks/useBanUser.ts b/app/src/features/admin/hooks/useBanUser.ts
new file mode 100644
index 00000000..32a592e4
--- /dev/null
+++ b/app/src/features/admin/hooks/useBanUser.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiBanUser } from "../services/apiUsers";
+
+function useBanUser() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: banUser,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (userId: string) => apiBanUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-users"] });
+      toast.success("User banned successfully");
+    },
+    onError: () => {
+      toast.error("Error banning user");
+    },
+  });
+
+  return { banUser, data, error, isPending, isSuccess };
+}
+
+export { useBanUser };
diff --git a/app/src/features/admin/hooks/useDeactivateUser.ts b/app/src/features/admin/hooks/useDeactivateUser.ts
new file mode 100644
index 00000000..c45830c5
--- /dev/null
+++ b/app/src/features/admin/hooks/useDeactivateUser.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiDeactivateUser } from "../services/apiUsers";
+
+function useDeactivateUser() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: deactivateUser,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (userId: string) => apiDeactivateUser(userId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-users"] });
+      toast.success("User deactivated successfully");
+    },
+    onError: () => {
+      toast.error("Error deactivating user");
+    },
+  });
+
+  return { deactivateUser, data, error, isPending, isSuccess };
+}
+
+export { useDeactivateUser };
diff --git a/app/src/features/admin/hooks/useFilterGroup.ts b/app/src/features/admin/hooks/useFilterGroup.ts
new file mode 100644
index 00000000..4073fb84
--- /dev/null
+++ b/app/src/features/admin/hooks/useFilterGroup.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiFilterGroup } from "../services/apiGroups";
+
+function useFilterGroup() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: filterGroup,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (groupId: string) => apiFilterGroup(groupId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-groups"] });
+      toast.success("Group Filtered successfully");
+    },
+    onError: () => {
+      toast.error("Error filtering group");
+    },
+  });
+
+  return { filterGroup, data, error, isPending, isSuccess };
+}
+
+export { useFilterGroup };
diff --git a/app/src/features/admin/hooks/useGroups.ts b/app/src/features/admin/hooks/useGroups.ts
new file mode 100644
index 00000000..1f38aff5
--- /dev/null
+++ b/app/src/features/admin/hooks/useGroups.ts
@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiGetGroups } from "../services/apiGroups";
+
+function useGroups() {
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["all-groups"],
+    queryFn: apiGetGroups,
+  });
+  return { data, error, isLoading };
+}
+
+export { useGroups };
diff --git a/app/src/features/admin/hooks/useUnfilterGroup.ts b/app/src/features/admin/hooks/useUnfilterGroup.ts
new file mode 100644
index 00000000..1125cda9
--- /dev/null
+++ b/app/src/features/admin/hooks/useUnfilterGroup.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { apiUnfilterGroup } from "../services/apiGroups";
+
+function useUnfilterGroup() {
+  const queryClient = useQueryClient();
+
+  const {
+    mutate: unfilterGroup,
+    data,
+    error,
+    isPending,
+    isSuccess,
+  } = useMutation({
+    mutationFn: (groupId: string) => apiUnfilterGroup(groupId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["all-groups"] });
+      toast.success("Group Unfiltered successfully");
+    },
+    onError: () => {
+      toast.error("Error unfiltering group");
+    },
+  });
+
+  return { unfilterGroup, data, error, isPending, isSuccess };
+}
+
+export { useUnfilterGroup };
diff --git a/app/src/features/admin/hooks/useUsers.ts b/app/src/features/admin/hooks/useUsers.ts
new file mode 100644
index 00000000..f126665d
--- /dev/null
+++ b/app/src/features/admin/hooks/useUsers.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiGetUsers } from "../services/apiUsers";
+
+function useUsers() {
+  const {
+    data: users,
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["all-users"],
+    queryFn: apiGetUsers,
+  });
+  return { users, error, isLoading };
+}
+
+export { useUsers };
diff --git a/app/src/features/admin/services/apiGroups.ts b/app/src/features/admin/services/apiGroups.ts
new file mode 100644
index 00000000..97bda3d8
--- /dev/null
+++ b/app/src/features/admin/services/apiGroups.ts
@@ -0,0 +1,71 @@
+import { API_URL } from "@constants";
+
+async function apiGetGroups() {
+  try {
+    const res = await fetch(`${API_URL}/users/all-groups`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch groups", error);
+    throw error;
+  }
+}
+async function apiFilterGroup(groupId: string) {
+  try {
+    const res = await fetch(`${API_URL}/chats/groups/filter/${groupId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to filter group", error);
+    throw error;
+  }
+}
+
+async function apiUnfilterGroup(groupId: string) {
+  try {
+    const res = await fetch(`${API_URL}/chats/groups/unfilter/${groupId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to unfilter group", error);
+    throw error;
+  }
+}
+
+export { apiGetGroups, apiFilterGroup, apiUnfilterGroup };
diff --git a/app/src/features/admin/services/apiUsers.ts b/app/src/features/admin/services/apiUsers.ts
new file mode 100644
index 00000000..2937699a
--- /dev/null
+++ b/app/src/features/admin/services/apiUsers.ts
@@ -0,0 +1,92 @@
+import { API_URL } from "@constants";
+
+async function apiGetUsers() {
+  try {
+    const res = await fetch(`${API_URL}/users`, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch users", error);
+    throw error;
+  }
+}
+async function apiDeactivateUser(userId: string) {
+  try {
+    const res = await fetch(`${API_URL}/users/deactivate/${userId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to deactivate user", error);
+    throw error;
+  }
+}
+async function apiBanUser(userId: string) {
+  try {
+    const res = await fetch(`${API_URL}/users/ban/${userId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to ban user", error);
+    throw error;
+  }
+}
+
+async function apiActivateUser(userId: string) {
+  try {
+    const res = await fetch(`${API_URL}/users/activate/${userId}`, {
+      method: "PATCH",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Session-Token": localStorage.getItem("sessionId") || "",
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error(res.statusText);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Failed to activate user", error);
+    throw error;
+  }
+}
+
+export { apiGetUsers, apiDeactivateUser, apiBanUser, apiActivateUser };
diff --git a/app/src/features/chats/StartNewChat.tsx b/app/src/features/chats/StartNewChat.tsx
index fe344122..d9e44e04 100644
--- a/app/src/features/chats/StartNewChat.tsx
+++ b/app/src/features/chats/StartNewChat.tsx
@@ -103,7 +103,6 @@ function StartNewChat() {
         >
           {items.map((item: SideBarMenuItemProps, id: number) => (
             <SideBarMenuItem
-              data-testid={`new-chat-menu-item-${id}`}
               {...item}
               key={id}
               onClick={() => handleMenuItemClick(item?.title)}
diff --git a/app/src/features/privacy-settings/hooks/useBlock.ts b/app/src/features/privacy-settings/hooks/useBlock.ts
index 42430655..40f60b83 100644
--- a/app/src/features/privacy-settings/hooks/useBlock.ts
+++ b/app/src/features/privacy-settings/hooks/useBlock.ts
@@ -1,22 +1,22 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import getBlockList from "@features/privacy-settings/service/apiGetBlockList";
-import { blockUser } from "../service/apiBlockUser";
-import { removeFromBlock } from "../service/apiRemoveFromBlocks";
+import apiGetBlockList from "@features/privacy-settings/service/apiGetBlockList";
+import { apiBlockUser } from "../service/apiBlockUser";
+import { apiRemoveFromBlock } from "../service/apiRemoveFromBlocks";
 
 export function useBlock() {
   const { data: blockList } = useQuery({
     queryKey: ["block"],
-    queryFn: () => getBlockList(),
+    queryFn: () => apiGetBlockList(),
   });
 
   const queryClient = useQueryClient();
   const { mutateAsync: addToBlockList } = useMutation({
-    mutationFn: blockUser,
+    mutationFn: apiBlockUser,
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["block"] }),
   });
 
   const { mutateAsync: removeFromBlockList } = useMutation({
-    mutationFn: removeFromBlock,
+    mutationFn: apiRemoveFromBlock,
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["block"] }),
   });
 
diff --git a/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts b/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
index 8107a9a7..7191a600 100644
--- a/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
+++ b/app/src/features/privacy-settings/hooks/useUpdatePrivacy.ts
@@ -1,10 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
-import { changeSettings } from "@features/privacy-settings/service/apiChangeSettings";
+import { apiChangeSettings } from "@features/privacy-settings/service/apiChangeSettings";
 
 export function useUpdatePrivacy() {
   const { mutateAsync: updatePrivacy } = useMutation({
     mutationKey: ["privacy"],
-    mutationFn: changeSettings,
+    mutationFn: apiChangeSettings,
     onSuccess: () => {},
   });
 
diff --git a/app/src/features/privacy-settings/service/apiBlockUser.ts b/app/src/features/privacy-settings/service/apiBlockUser.ts
index 71273c44..ca91e50e 100644
--- a/app/src/features/privacy-settings/service/apiBlockUser.ts
+++ b/app/src/features/privacy-settings/service/apiBlockUser.ts
@@ -4,7 +4,7 @@ interface requestType {
   id: string;
 }
 
-async function blockUser(data: requestType) {
+async function apiBlockUser(data: requestType) {
   const res = await fetch(`${API_URL}/users/block/${data.id}`, {
     method: "POST",
     credentials: "include",
@@ -19,4 +19,4 @@ async function blockUser(data: requestType) {
   }
 }
 
-export { blockUser };
+export { apiBlockUser };
diff --git a/app/src/features/privacy-settings/service/apiChangeSettings.ts b/app/src/features/privacy-settings/service/apiChangeSettings.ts
index 172c2619..9f081861 100644
--- a/app/src/features/privacy-settings/service/apiChangeSettings.ts
+++ b/app/src/features/privacy-settings/service/apiChangeSettings.ts
@@ -10,7 +10,7 @@ enum endPts {
   addToChannelPrivacy = "invite-permissions",
 }
 
-async function changeSettings(data: {
+async function apiChangeSettings(data: {
   key: keyof typeof endPts;
   value: privacyStatesStrings | activeStatesStrings;
 }) {
@@ -34,5 +34,5 @@ async function changeSettings(data: {
   }
 }
 
-export { changeSettings };
+export { apiChangeSettings };
 export { endPts };
diff --git a/app/src/features/privacy-settings/service/apiGetBlockList.ts b/app/src/features/privacy-settings/service/apiGetBlockList.ts
index 332b9657..26f2951d 100644
--- a/app/src/features/privacy-settings/service/apiGetBlockList.ts
+++ b/app/src/features/privacy-settings/service/apiGetBlockList.ts
@@ -1,6 +1,6 @@
 import { API_URL } from "@constants";
 
-async function getBlockList() {
+async function apiGetBlockList() {
   const response = await fetch(`${API_URL}/users/block`, {
     method: "GET",
     credentials: "include",
@@ -15,4 +15,4 @@ async function getBlockList() {
   return data.data.users;
 }
 
-export default getBlockList;
+export default apiGetBlockList;
diff --git a/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts b/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
index a1e2c65c..a360bea5 100644
--- a/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
+++ b/app/src/features/privacy-settings/service/apiRemoveFromBlocks.ts
@@ -4,7 +4,7 @@ interface requestType {
   id: string;
 }
 
-async function removeFromBlock(data: requestType) {
+async function apiRemoveFromBlock(data: requestType) {
   const res = await fetch(`${API_URL}/users/block/${data.id}`, {
     method: "DELETE",
     credentials: "include",
@@ -19,4 +19,4 @@ async function removeFromBlock(data: requestType) {
   }
 }
 
-export { removeFromBlock };
+export { apiRemoveFromBlock };
diff --git a/app/src/features/stories/components/StoryListContainer.tsx b/app/src/features/stories/components/StoryListContainer.tsx
index 209efc2e..14e16e8d 100644
--- a/app/src/features/stories/components/StoryListContainer.tsx
+++ b/app/src/features/stories/components/StoryListContainer.tsx
@@ -61,7 +61,7 @@ function StoryListContainer() {
         <CollapsedList
           data-testid="stories-collapsed-list"
           onOpen={handleOpen}
-          render={(userStory) => (
+          render={(userStory: unknown) => (
             <StoryIcon
               isCollapsed={true}
               name={userStory.name}
diff --git a/app/src/features/stories/hooks/useMyStories.ts b/app/src/features/stories/hooks/useMyStories.ts
index 685dffba..45e1779c 100644
--- a/app/src/features/stories/hooks/useMyStories.ts
+++ b/app/src/features/stories/hooks/useMyStories.ts
@@ -8,7 +8,7 @@ function useMyStroies() {
     error,
     isLoading,
   } = useQuery({
-    queryKey: ["myStories"],
+    queryKey: ["my-stories"],
     queryFn: getMyStoriesAPI,
   });
   return { myStories, error, isLoading };
diff --git a/app/src/features/stories/services/apiGetStories.ts b/app/src/features/stories/services/apiGetStories.ts
index 32100b9a..489f08d0 100644
--- a/app/src/features/stories/services/apiGetStories.ts
+++ b/app/src/features/stories/services/apiGetStories.ts
@@ -6,6 +6,7 @@ async function getStories() {
       method: "GET",
       credentials: "include",
       headers: {
+        "Content-Type": "application/json",
         "X-Session-Token": localStorage.getItem("sessionId") || "",
       },
     });
diff --git a/app/src/mocks/admin/admin.ts b/app/src/mocks/admin/admin.ts
new file mode 100644
index 00000000..8e8ec706
--- /dev/null
+++ b/app/src/mocks/admin/admin.ts
@@ -0,0 +1,123 @@
+import { http, HttpResponse } from "msw";
+import { MOCK_USERS, MOCK_GROUPS } from "../data/admin";
+import { Group, User, userStatus } from "types/admin";
+
+type BanUserRequestBody = {
+  data: string;
+};
+type BanUserResponseBodySuccess = {
+  status: "success";
+  message: string;
+  data: object | boolean;
+};
+type BanUserResponseBodyFail = {
+  status: "fail" | "error";
+  message: string;
+  data: object;
+};
+type BanUserResponseBody = BanUserResponseBodySuccess | BanUserResponseBodyFail;
+
+export const adminMock = [
+  http.patch<{ userId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/users/deactivate/:userId",
+    async ({ params }) => {
+      const { userId } = params;
+      const userIndex = MOCK_USERS.findIndex(
+        (user: User) => user.id === userId
+      );
+      if (userIndex != -1) {
+        MOCK_USERS[userIndex].accountStatus = userStatus.deactivated;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "user not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ userId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/users/activate/:userId",
+    async ({ params }) => {
+      const { userId } = params;
+      const userIndex = MOCK_USERS.findIndex(
+        (user: User) => user.id === userId
+      );
+      if (userIndex != -1) {
+        MOCK_USERS[userIndex].accountStatus = userStatus.active;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "user not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ userId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/users/ban/:userId",
+    async ({ params }) => {
+      const { userId } = params;
+      const userIndex = MOCK_USERS.findIndex(
+        (user: User) => user.id === userId
+      );
+      if (userIndex != -1) {
+        MOCK_USERS[userIndex].accountStatus = userStatus.banned;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "user not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ groupId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/chats/groups/filter/:groupId",
+    async ({ params }) => {
+      const { groupId } = params;
+      const groupIndex = MOCK_GROUPS.findIndex(
+        (group: Group) => group.id === groupId
+      );
+      if (groupIndex != -1) {
+        MOCK_GROUPS[groupIndex].isFilterd = true;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "group not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+  http.patch<{ groupId: string }, BanUserRequestBody, BanUserResponseBody>(
+    "/chats/groups/unfilter/:groupId",
+    async ({ params }) => {
+      const { groupId } = params;
+      const groupIndex = MOCK_GROUPS.findIndex(
+        (group: Group) => group.id === groupId
+      );
+      if (groupIndex != -1) {
+        MOCK_GROUPS[groupIndex].isFilterd = false;
+        return HttpResponse.json({}, { status: 200 });
+      }
+      return HttpResponse.json(
+        { status: "fail", message: "group not found", data: {} },
+        { status: 404 }
+      );
+    }
+  ),
+
+  http.get("/users", async () => {
+    return HttpResponse.json(
+      {
+        data: { users: MOCK_USERS },
+      },
+      { status: 200 }
+    );
+  }),
+  http.get("/users/all-groups", async () => {
+    return HttpResponse.json(
+      {
+        data: { groupsAndChannels: MOCK_GROUPS },
+      },
+      { status: 200 }
+    );
+  }),
+];
diff --git a/app/src/mocks/data/admin.ts b/app/src/mocks/data/admin.ts
new file mode 100644
index 00000000..88a19101
--- /dev/null
+++ b/app/src/mocks/data/admin.ts
@@ -0,0 +1,122 @@
+import { Group, User, userStatus } from "types/admin";
+
+const MOCK_USERS: User[] = [
+  {
+    id: "1",
+    username: "Eddie Brock",
+    photo: "https://i.pravatar.cc/70?=0.05",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "2",
+    username: "Gwen Stacy",
+    photo: "https://i.pravatar.cc/70?=0.06",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "3",
+    username: "Mary Jane",
+    photo: "https://i.pravatar.cc/70?=0.07",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "4",
+    username: "Peter Parker",
+    photo: "https://i.pravatar.cc/70?=0.08",
+    accountStatus: userStatus.banned,
+  },
+  {
+    id: "5",
+    username: "Clark Kent",
+    photo: "https://i.pravatar.cc/70?=0.09",
+    accountStatus: userStatus.deactivated,
+  },
+  {
+    id: "6",
+    username: "Bruce Wayne",
+    photo: "https://i.pravatar.cc/70?=0.11",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "7",
+    username: "Diana Prince",
+    photo: "https://i.pravatar.cc/70?=0.12",
+    accountStatus: userStatus.deactivated,
+  },
+  {
+    id: "8",
+    username: "Tony Stark",
+    photo: "https://i.pravatar.cc/70?=0.13",
+    accountStatus: userStatus.deactivated,
+  },
+  {
+    id: "9",
+    username: "Steve Rogers",
+    photo: "https://i.pravatar.cc/70?=0.14",
+    accountStatus: userStatus.banned,
+  },
+  {
+    id: "10",
+    username: "Natasha Romanoff",
+    photo: "https://i.pravatar.cc/70?=0.15",
+    accountStatus: userStatus.active,
+  },
+  {
+    id: "11",
+    username: "Wade Wilson",
+    photo: "https://i.pravatar.cc/70?=0.36",
+    accountStatus: userStatus.active,
+  },
+];
+
+const MOCK_GROUPS: Group[] = [
+  {
+    id: "1",
+    name: "Avengers",
+    picture: "https://i.redd.it/gf9yyhdo08m11.jpg",
+    isFilterd: false,
+    numberOfMembers: 12,
+  },
+  {
+    id: "2",
+    name: "Justice League",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSk0jgB0khxHpWlQ2WIrTWbbCcRVvzXusD-w&s",
+    isFilterd: false,
+    numberOfMembers: 8,
+  },
+  {
+    id: "3",
+    name: "Guardians of the Galaxy",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSk0TL205opaVnA2dYCebuk552-PP-ROsLgRw&s",
+    isFilterd: false,
+    numberOfMembers: 4,
+  },
+  {
+    id: "4",
+    name: "Power Rangers",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrtYzIiKsxu86ysm1wLFydr5yiTVA05dfHwA&s",
+    isFilterd: false,
+    numberOfMembers: 6,
+  },
+  {
+    id: "5",
+    name: "Teen Titans",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0vBXO-BKKBlWT5gV1PzDbUZ4BcS3TGT8NGw&s",
+    isFilterd: true,
+    numberOfMembers: 5,
+  },
+  {
+    id: "6",
+    name: "Ninga Turtles",
+    picture:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlLycnffNMBrxjCKrG80nlmKWW3eAPfbhlow&s",
+    isFilterd: false,
+    numberOfMembers: 4,
+  },
+];
+
+export { MOCK_USERS, MOCK_GROUPS };
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 7f9954b8..73a4e4ff 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,71 +41,71 @@ export type ChatDataType = {
   }[];
 };
 
-// export const allChats: Chat[] = [
-//   {
-//     _id: "1",
-//     isSeen: false,
-//     members: ["1", "2"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "2",
-//     isSeen: false,
-//     members: ["2", "1"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "3",
-//     isSeen: false,
-//     members: ["3"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "4",
-//     isSeen: false,
-//     members: ["4"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "5",
-//     isSeen: false,
-//     members: ["5"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "6",
-//     isSeen: false,
-//     members: ["6"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "7",
-//     isSeen: false,
-//     members: ["7"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "8",
-//     isSeen: false,
-//     members: ["8"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-//   {
-//     _id: "9",
-//     isSeen: false,
-//     members: ["9"],
-//     type: "private",
-//     numberOfMembers: 1,
-//   },
-// ];
+export const allChats: Chat[] = [
+  {
+    _id: "1",
+    isSeen: false,
+    members: ["1", "2"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "2",
+    isSeen: false,
+    members: ["2", "1"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "3",
+    isSeen: false,
+    members: ["3"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "4",
+    isSeen: false,
+    members: ["4"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "5",
+    isSeen: false,
+    members: ["5"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "6",
+    isSeen: false,
+    members: ["6"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "7",
+    isSeen: false,
+    members: ["7"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "8",
+    isSeen: false,
+    members: ["8"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+  {
+    _id: "9",
+    isSeen: false,
+    members: ["9"],
+    type: "private",
+    numberOfMembers: 1,
+  },
+];
 
 export const members: Member[] = [
   {
diff --git a/app/src/mocks/data/users.ts b/app/src/mocks/data/users.ts
index 27b3368d..28d96180 100644
--- a/app/src/mocks/data/users.ts
+++ b/app/src/mocks/data/users.ts
@@ -1,3 +1,4 @@
+import { userStatus } from "types/admin";
 export const MOCK_USER1 = {
   id: "1",
   email: "johndoe@example.com",
@@ -10,6 +11,7 @@ export const MOCK_USER1 = {
   phoneNumber: "0123456789",
   status: "Online",
   screenName: "John Doe",
+  state: userStatus.active,
 };
 
 export const MOCK_USER2 = {
@@ -24,6 +26,46 @@ export const MOCK_USER2 = {
   phoneNumber: "0123456798",
   status: "Online",
   screenName: "Ay 7aga",
+  state: userStatus.active,
+};
+
+export const BANNNED = {
+  id: "3",
+  email: "banned@example.com",
+  password: "1234",
+  firstName: "المصفوع",
+  lastName: "من",
+  bio: "أهلا أنا المصفوع من شخصيا",
+  photo: "",
+  username: "theBannedUser",
+  phoneNumber: "0125456798",
+  status: "Online",
+  screenName: "theBannedUser",
+  state: userStatus.banned,
+};
+
+export const DEACTIVATED = {
+  id: "4",
+  email: "deactivated@example.com",
+  password: "1234",
+  firstName: "Mr. ",
+  lastName: "deactivtaed",
+  bio: "أهلا أنا المصفوع من شخصيا",
+  photo: "",
+  username: "theDeactivatedUser",
+  phoneNumber: "0125451598",
+  status: "Online",
+  screenName: "theDeactivatedUser",
+  state: userStatus.deactivated,
+};
+export const ADMIN = {
+  id: "5",
+  screenFirstName: "Eng.",
+  screenLastName: "Hashish",
+  email: "admin@gmail.com",
+  password: "12345678",
+  username: "admin",
+  isAdmin: true,
 };
 
 export const TOKEN =
diff --git a/app/src/mocks/handlers.ts b/app/src/mocks/handlers.ts
index c4b19c92..bf4ee1fc 100644
--- a/app/src/mocks/handlers.ts
+++ b/app/src/mocks/handlers.ts
@@ -13,6 +13,7 @@ import { chats } from "./chats/chats";
 import { devicesMock } from "./devices/devices";
 import { paginationMock } from "./chats/pagination";
 import { media } from "./chats/media";
+import { adminMock } from "./admin/admin";
 
 export default [
   ...loginMock,
@@ -31,4 +32,5 @@ export default [
   ...devicesMock,
   ...paginationMock,
   ...media,
+  ...adminMock,
 ];
diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index 28527bcb..0290528c 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -1,4 +1,11 @@
-import { MOCK_USER1, MOCK_USER2, TOKEN } from "@mocks/data/users";
+import {
+  MOCK_USER1,
+  MOCK_USER2,
+  BANNNED,
+  DEACTIVATED,
+  ADMIN,
+  TOKEN,
+} from "@mocks/data/users";
 import { http, HttpResponse } from "msw";
 
 type LoginRequestBody = {
@@ -35,7 +42,10 @@ export const loginMock = [
 
       const isValidUser =
         (email === MOCK_USER1.email && password === MOCK_USER1.password) ||
-        (email === MOCK_USER2.email && password === MOCK_USER2.password);
+        (email === MOCK_USER2.email && password === MOCK_USER2.password) ||
+        (email === BANNNED.email && password === BANNNED.password) ||
+        (email === DEACTIVATED.email && password === DEACTIVATED.password) ||
+        (email === ADMIN.email && password === ADMIN.password);
 
       if (!isValidUser) {
         return HttpResponse.json(
@@ -44,7 +54,51 @@ export const loginMock = [
             status: "error",
             data: {},
           },
-          { status: 401 },
+          { status: 401 }
+        );
+      }
+
+      const isAdmin = email === ADMIN.email;
+      if (isAdmin) {
+        localStorage.setItem("user", JSON.stringify(ADMIN));
+        return HttpResponse.json(
+          {
+            message: "Successful login",
+            status: "success",
+            data: {
+              user: ADMIN,
+              sessionID: TOKEN,
+            },
+          },
+          {
+            status: 201,
+            headers: {
+              "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
+            },
+          }
+        );
+      }
+
+      const isBannedUser = email === BANNNED.email;
+      if (isBannedUser) {
+        return HttpResponse.json(
+          {
+            message: "User is banned",
+            status: "error",
+            data: {},
+          },
+          { status: 403 }
+        );
+      }
+      const isDeactivatedUser = email === DEACTIVATED.email;
+      if (isDeactivatedUser) {
+        return HttpResponse.json(
+          {
+            message: "User is deactivated",
+            status: "error",
+            data: {},
+          },
+          { status: 403 }
         );
       }
 
@@ -64,8 +118,8 @@ export const loginMock = [
           headers: {
             "Set-Cookie": `sessionID=${TOKEN}; HttpOnly; SameSite=Strict; Path=/`,
           },
-        },
+        }
       );
-    },
+    }
   ),
 ];
diff --git a/app/src/state/admin/adminView.ts b/app/src/state/admin/adminView.ts
new file mode 100644
index 00000000..aa5d9c21
--- /dev/null
+++ b/app/src/state/admin/adminView.ts
@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export enum View {
+  USERS,
+  GROUPS,
+}
+
+interface adminViewState {
+  value: View;
+}
+
+const initialState: adminViewState = { value: View.USERS };
+
+const adminViewSlice = createSlice({
+  name: "adminView",
+  initialState,
+  reducers: {
+    setView: (state, action: PayloadAction<adminViewState>) => {
+      state.value = action.payload.value;
+    },
+  },
+});
+
+export const { setView } = adminViewSlice.actions;
+export default adminViewSlice.reducer;
diff --git a/app/src/state/store.ts b/app/src/state/store.ts
index a380402e..775d6791 100644
--- a/app/src/state/store.ts
+++ b/app/src/state/store.ts
@@ -8,6 +8,7 @@ import activeMessageReducer from "./messages/activeMessage";
 import chatsReducer from "./messages/chats";
 import selectedUsersReducer from "./groups/selectedUsers";
 import channelThreadsReducer from "./messages/channels";
+import adminViewReducer from "./admin/adminView";
 
 export const store = configureStore({
   reducer: {
@@ -20,6 +21,7 @@ export const store = configureStore({
     globalSearch: globalSearchReducer,
     selectedUsers: selectedUsersReducer,
     channelsThreads: channelThreadsReducer,
+    adminView: adminViewReducer,
   },
 });
 
diff --git a/app/src/styles/GlobalStyles.tsx b/app/src/styles/GlobalStyles.tsx
index bc77d5d0..64000808 100644
--- a/app/src/styles/GlobalStyles.tsx
+++ b/app/src/styles/GlobalStyles.tsx
@@ -58,6 +58,7 @@ const GlobalStyles = createGlobalStyle`
     --color-background-compact-menu-hover: #4c90b23b;
     
     --color-border: #dfe1e5;
+    --color-border-hover: #c1c1c1;
     --color-borders-input: rgb(218, 220, 224);
     
     --color-search-border: #3390ec;
@@ -68,6 +69,19 @@ const GlobalStyles = createGlobalStyle`
     --scrollbar-color: rgba(0, 0, 0, .2);
     --color-avatar: linear-gradient(135deg, #d6d46c, #5e924e);
     --color-avatar-shadow:linear-gradient(135deg,#d6d46c, #5e924e);
+    --admin-sidebar-bg: #56a2c9;
+    --admin-sidebar-bg-hover: #447f9c;
+
+    --admin-main-bg: #fff;
+    --admin-main-bg-hover: #f5f5f5;
+
+    --admin-header-bg:  #f5f5f5;
+    --admin-header-bg-hover: #e5e5e5;
+
+
+    --admin-nav-menu-item-hover-text: #56a2c9;
+  --admin-nav-menu-item-hover: rgba(213, 213, 216, 0.666);
+  --admin-card-active: #f0f0f0;
 
   }
   
@@ -124,6 +138,9 @@ const GlobalStyles = createGlobalStyle`
     --color-background-compact-menu-hover: #ffffff36;
  
     --color-border: #09182299;
+    --color-border-hover: #091822;
+
+    --admin-card-active: #56a2c9;
     --color-borders-input: var(--color-text-secondary);
 
     --color-search-border: #7644CB;
@@ -137,7 +154,20 @@ const GlobalStyles = createGlobalStyle`
     --scrollbar-color: rgba(255, 255, 255, .2);
     --color-avatar: linear-gradient(135deg, #72C6EF, #004E92);
     --color-avatar-shadow:linear-gradient(135deg, #72C6EF, #004E92);
-    
+
+    --admin-sidebar-bg: #192b35;
+    --admin-sidebar-bg-hover: #25353f;
+
+    --admin-main-bg: #24343e;
+    --admin-main-bg-hover: #25353f;
+
+    --admin-header-bg:  #25353f;
+    --admin-header-bg-hover: #203030;
+
+    --admin-nav-menu-item-hover-text: #24343e79;
+  --admin-nav-menu-item-hover: rgba(213, 213, 216, 0.466);
+  --admin-card-active: #4c90b2;
+
   }
 
   --story-views-background: #181a1b;
@@ -183,6 +213,10 @@ const GlobalStyles = createGlobalStyle`
   --border-radius-messages-small: 0.375rem;
   --border-radius-forum-avatar: 25%;
   --border-radius-circle: 50%;
+  --border-radius-one-sided: 50px 0 0 50px;
+  --border-radius-left-sided-small: 0.625rem 0 0 0.625rem;
+  --border-radius-right-sided-small: 0 0.625rem 0.625rem 0;
+
   
   --color-borders-input: rgb(218, 220, 224);
 
@@ -218,8 +252,6 @@ select:-webkit-autofill:focus {
   transition: background-color 0.3s, border 0.3s;
 
   user-select: none;
-  user-drag: none;
-  app-region: no-drag;
 }
 
 body {
diff --git a/app/src/types/admin.ts b/app/src/types/admin.ts
new file mode 100644
index 00000000..50f7a0ce
--- /dev/null
+++ b/app/src/types/admin.ts
@@ -0,0 +1,21 @@
+enum userStatus {
+  active = "active",
+  banned = "banned",
+  deactivated = "deactivated",
+}
+interface User {
+  id: string;
+  username: string;
+  photo: string;
+  accountStatus: userStatus;
+}
+interface Group {
+  id: string;
+  name: string;
+  picture: string;
+  isFilterd: boolean;
+  numberOfMembers: number;
+}
+
+export type { User, Group };
+export { userStatus };
diff --git a/app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs b/app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs
new file mode 100644
index 00000000..41da1e71
--- /dev/null
+++ b/app/vite.config.ts.timestamp-1734385645418-efb6d73151a22.mjs
@@ -0,0 +1,18 @@
+// vite.config.ts
+import { defineConfig, loadEnv } from "file:///home/ahmed/Desktop/projects/telware-frontend/app/node_modules/vite/dist/node/index.js";
+import react from "file:///home/ahmed/Desktop/projects/telware-frontend/app/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import tsconfigPaths from "file:///home/ahmed/Desktop/projects/telware-frontend/app/node_modules/vite-tsconfig-paths/dist/index.js";
+var vite_config_default = ({ mode }) => {
+  process.env = {
+    ...process.env,
+    ...loadEnv(mode, process.cwd())
+  };
+  return defineConfig({
+    server: { port: parseInt(process.env.VITE_PORT) },
+    plugins: [react(), tsconfigPaths()]
+  });
+};
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9haG1lZC9EZXNrdG9wL3Byb2plY3RzL3RlbHdhcmUtZnJvbnRlbmQvYXBwXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvaG9tZS9haG1lZC9EZXNrdG9wL3Byb2plY3RzL3RlbHdhcmUtZnJvbnRlbmQvYXBwL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9ob21lL2FobWVkL0Rlc2t0b3AvcHJvamVjdHMvdGVsd2FyZS1mcm9udGVuZC9hcHAvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcsIGxvYWRFbnYgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdFwiO1xuaW1wb3J0IHRzY29uZmlnUGF0aHMgZnJvbSBcInZpdGUtdHNjb25maWctcGF0aHNcIjtcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cblxuZXhwb3J0IGRlZmF1bHQgKHsgbW9kZSB9KSA9PiB7XG4gIHByb2Nlc3MuZW52ID0ge1xuICAgIC4uLnByb2Nlc3MuZW52LFxuICAgIC4uLmxvYWRFbnYobW9kZSwgcHJvY2Vzcy5jd2QoKSksXG4gIH07XG4gIHJldHVybiBkZWZpbmVDb25maWcoe1xuICAgIHNlcnZlcjogeyBwb3J0OiBwYXJzZUludChwcm9jZXNzLmVudi5WSVRFX1BPUlQpIH0sXG4gICAgcGx1Z2luczogW3JlYWN0KCksIHRzY29uZmlnUGF0aHMoKV0sXG4gIH0pO1xufTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBcVUsU0FBUyxjQUFjLGVBQWU7QUFDM1csT0FBTyxXQUFXO0FBQ2xCLE9BQU8sbUJBQW1CO0FBSTFCLElBQU8sc0JBQVEsQ0FBQyxFQUFFLEtBQUssTUFBTTtBQUMzQixVQUFRLE1BQU07QUFBQSxJQUNaLEdBQUcsUUFBUTtBQUFBLElBQ1gsR0FBRyxRQUFRLE1BQU0sUUFBUSxJQUFJLENBQUM7QUFBQSxFQUNoQztBQUNBLFNBQU8sYUFBYTtBQUFBLElBQ2xCLFFBQVEsRUFBRSxNQUFNLFNBQVMsUUFBUSxJQUFJLFNBQVMsRUFBRTtBQUFBLElBQ2hELFNBQVMsQ0FBQyxNQUFNLEdBQUcsY0FBYyxDQUFDO0FBQUEsRUFDcEMsQ0FBQztBQUNIOyIsCiAgIm5hbWVzIjogW10KfQo=

From 439a5d91f2f2f56f200b84658343cc16bf2629ba Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 03:41:35 +0200
Subject: [PATCH 111/136] :bug: (groups): fix add new group (#151)

---
 app/src/components/User.tsx                   |  6 ++----
 .../components/side-bar/groups/AddMembers.tsx | 12 +++++++----
 .../settings/SettingsSideBarHeader.tsx        |  1 +
 app/src/features/groups/hooks/useGroupInfo.ts | 20 ++++++++-----------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/src/components/User.tsx b/app/src/components/User.tsx
index ecfe1cac..21d71177 100644
--- a/app/src/components/User.tsx
+++ b/app/src/components/User.tsx
@@ -84,15 +84,11 @@ function User({ user, view }: UserProps) {
   const { chatId } = useParams<{ chatId: string }>();
   const { isPending, isCurrUserAdmin } = useGroupInfo();
 
-  console.log(isCurrUserAdmin);
-
   const dispatch = useAppDispatch();
   const selectedUsers = useAppSelector((state) => state.selectedUsers);
   const { removeMembers } = useSocket();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  if (isPending) return;
-
   function handleContextMenu(e: React.MouseEvent) {
     e.preventDefault();
     setIsModalVisible(true);
@@ -110,6 +106,8 @@ function User({ user, view }: UserProps) {
     setIsModalVisible(false);
   }
 
+  if (isPending) return;
+
   return (
     <UserRow
       onContextMenu={handleContextMenu}
diff --git a/app/src/components/side-bar/groups/AddMembers.tsx b/app/src/components/side-bar/groups/AddMembers.tsx
index 56de674a..6616cd14 100644
--- a/app/src/components/side-bar/groups/AddMembers.tsx
+++ b/app/src/components/side-bar/groups/AddMembers.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import UsersList from "@components/UsersList";
 import { UserType } from "@features/groups/hooks/useAllUsers";
 import SearchInput from "./SearchInput";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const StyledUsersList = styled.div`
   width: 100%;
@@ -16,11 +17,14 @@ const StyledUsersList = styled.div`
 
 function AddMembers({ users }: { users: UserType[] }) {
   const [searchQuery, setSearchQuery] = useState<string>("");
+  const currUser = useAppSelector((state) => state.user.userInfo);
 
-  const filteredUsers = users?.filter((user) =>
-    `${user.screenFirstName} ${user.screenLastName}`
-      .toLowerCase()
-      .includes(searchQuery.toLowerCase())
+  const filteredUsers = users?.filter(
+    (user) =>
+      currUser.id !== user._id &&
+      `${user.screenFirstName} ${user.screenLastName}`
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase())
   );
 
   return (
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index ba73b5be..f33fce7c 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -6,6 +6,7 @@ import CircleIcon from "@components/CircleIcon";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
 import { useSidebarType } from "../SideBarContext";
+import { useLogout } from "@features/authentication/logout/hooks/useLogout";
 
 const StyledSideBarHeader = styled.div`
   height: 4rem !important;
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index 785b62b2..cadc17fd 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -15,12 +15,9 @@ function useGroupInfo() {
 
   const group = chats.find((chat) => chat._id === chatId);
 
-  console.log("group members ids", group?.members);
-  console.log("ALl users", users);
-
   useEffect(() => {
-    if (group && users?.length) {
-      const members = group.members
+    if (users?.length) {
+      const members = group?.members
         .map((groupMember) => {
           const user = users?.find((member) => member._id === groupMember._id);
           return user
@@ -32,19 +29,18 @@ function useGroupInfo() {
         })
         .filter((member) => member !== null);
 
-      console.log("current members", members);
 
-      const groupAdmins = members.filter((member) => member.role === "admin");
+      const groupAdmins = members?.filter((member) => member.role === "admin");
       setIsCurrUserAdmin(
-        members.some(
+        members?.some(
           (member) => member._id === user.id && member.role === "admin"
-        )
+        ) || false
       );
-      setGroupMembers(members);
-      setAdmins(groupAdmins);
+      setGroupMembers(members!);
+      setAdmins(groupAdmins!);
       setIsLoading(false);
     }
-  }, [group, users, user]);
+  }, [group, users, user, isLoading]);
 
   return {
     groupMembers,

From afa562650f65ef6c74dfaa5b30bcccf19fd9df3f Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 04:33:50 +0200
Subject: [PATCH 112/136] Feature/admin dashboard (#152)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* feat: ban user

* test: add testid

* feat: authorizarion and user roles

* fix: fix typo in unauthorized
---
 app/src/App.tsx                               | 24 ++++++++-
 .../protected-route/ProtectedRoute.tsx        | 19 +++++--
 .../components/unauthorized/Unauthorized.tsx  | 54 +++++++++++++++++++
 app/src/constants.ts                          |  1 +
 .../login/hooks/useAuthCheck.ts               | 14 ++++-
 app/src/mocks/data/users.ts                   |  8 +--
 app/src/mocks/userauth/login.ts               | 18 ++-----
 app/src/state/side-bar/sideBar.ts             |  6 ++-
 app/src/state/user/user.ts                    | 11 ++--
 app/src/types/user.ts                         |  1 +
 10 files changed, 126 insertions(+), 30 deletions(-)
 create mode 100644 app/src/components/unauthorized/Unauthorized.tsx

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 72d204ce..2fe971ee 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -18,6 +18,8 @@ import AppLayout from "@components/AppLayout";
 import ChatBox from "@features/chats/ChatBox";
 import SocketProvider from "sockets/SocketProvider";
 import RightSideBarProvider from "@features/groups/contexts/RightSideBarProvider";
+import AdminAppLayout from "@features/admin/components/AdminAppLayout";
+import Unauthorized from "@components/unauthorized/Unauthorized";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -30,6 +32,10 @@ const queryClient = new QueryClient({
 
 function App() {
   const currentTheme = useAppSelector((state) => state.theme.value);
+  const currentUserRole = useAppSelector((state) =>
+    state.user.userInfo.isAdmin ? "admin" : "user"
+  );
+  console.log("currentUserRole :", currentUserRole);
 
   useEffect(() => {
     document.documentElement.className =
@@ -43,10 +49,25 @@ function App() {
       <GlobalStyles />
       <BrowserRouter>
         <Routes>
+          <Route path="/unauthorized" element={<Unauthorized />} />
+          <Route
+            path="/admin"
+            element={
+              <ProtectedRoute
+                allowedRoles={["admin"]}
+                userRole={currentUserRole}
+              >
+                <AdminAppLayout />
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/"
             element={
-              <ProtectedRoute>
+              <ProtectedRoute
+                allowedRoles={["user"]}
+                userRole={currentUserRole}
+              >
                 <SocketProvider>
                   <RightSideBarProvider>
                     <AppLayout />
@@ -57,6 +78,7 @@ function App() {
           >
             <Route path=":chatId" element={<ChatBox />} />
           </Route>
+
           <Route path="login" element={<Login />} />
           <Route
             path="password-reset/:token"
diff --git a/app/src/components/protected-route/ProtectedRoute.tsx b/app/src/components/protected-route/ProtectedRoute.tsx
index ef59fb17..64642b3b 100644
--- a/app/src/components/protected-route/ProtectedRoute.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.tsx
@@ -1,13 +1,19 @@
 import { ReactNode, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { Navigate, useNavigate } from "react-router-dom";
 
 import { useAuthStatus } from "@features/authentication/login/hooks/useAuthStatus";
 
 type prortectedRouteType = {
   children: ReactNode;
+  allowedRoles: string[];
+  userRole: string;
 };
 
-function ProtectedRoute({ children }: prortectedRouteType) {
+function ProtectedRoute({
+  children,
+  allowedRoles,
+  userRole,
+}: prortectedRouteType) {
   const navigate = useNavigate();
   const { isAuth, isPending } = useAuthStatus();
 
@@ -16,8 +22,15 @@ function ProtectedRoute({ children }: prortectedRouteType) {
       navigate("/login");
     }
   }, [navigate, isAuth, isPending]);
+  console.log(allowedRoles);
+  console.log(userRole);
 
-  if (isAuth) return children;
+  if (isAuth)
+    return allowedRoles.includes(userRole) ? (
+      children
+    ) : (
+      <Navigate to="/unauthorized" />
+    );
   else return null;
 }
 
diff --git a/app/src/components/unauthorized/Unauthorized.tsx b/app/src/components/unauthorized/Unauthorized.tsx
new file mode 100644
index 00000000..855bffe5
--- /dev/null
+++ b/app/src/components/unauthorized/Unauthorized.tsx
@@ -0,0 +1,54 @@
+import Heading from "@components/Heading";
+import { getIcon } from "@data/icons";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  height: 100dvh;
+`;
+const Sign = styled.p`
+  font-size: 15rem;
+  text-align: center;
+`;
+const ErrorMessage = styled.p`
+  color: var(--color-error);
+  font-size: 1.5rem;
+`;
+const Arrow = styled.button`
+  background-color: var(--accent-color);
+  color: var(--color-text);
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 3rem !important;
+  cursor: pointer;
+  border: none;
+  & > svg {
+    margin-right: 0.5rem;
+    color: var(--color-primary);
+    font-size: 2rem;
+  }
+`;
+function Unauthorized() {
+  const navigate = useNavigate();
+  const isAdmin = useAppSelector((state) => state.user.userInfo.isAdmin);
+  return (
+    <Container>
+      <Sign>🚫️</Sign>
+      <Heading as="h1">403 - Unauthorized</Heading>
+      <ErrorMessage>You do not have access to this page.</ErrorMessage>
+      <Arrow
+        onClick={() => navigate(isAdmin ? "/admin" : "/", { replace: true })}
+      >
+        {getIcon("BackArrow")} Back To Home
+      </Arrow>
+    </Container>
+  );
+}
+
+export default Unauthorized;
diff --git a/app/src/constants.ts b/app/src/constants.ts
index aab78904..a6a2f2c3 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -10,6 +10,7 @@ const {
 const MOBILE_VIEW = "(max-width: 800px)";
 const DESKTOP_VIEW = "(min-width: 800px)";
 const MAX_STORY_SIZE = 5 * 1024 * 1024;
+
 export {
   ENVIRONMENT,
   RECAPTCHA_SITE_KEY,
diff --git a/app/src/features/authentication/login/hooks/useAuthCheck.ts b/app/src/features/authentication/login/hooks/useAuthCheck.ts
index ee0111a3..758c3496 100644
--- a/app/src/features/authentication/login/hooks/useAuthCheck.ts
+++ b/app/src/features/authentication/login/hooks/useAuthCheck.ts
@@ -2,14 +2,24 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useAuthStatus } from "./useAuthStatus";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { resetLeftSideBar } from "@state/side-bar/sideBar";
 
 const useAuthCheck = () => {
   const { isAuth } = useAuthStatus();
   const navigate = useNavigate();
+  const isAdmin = useAppSelector((state) => state.user.userInfo.isAdmin);
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
-    if (isAuth) navigate("/", { replace: true });
-  }, [isAuth, navigate]);
+    if (isAuth) {
+      if (isAdmin) navigate("/admin", { replace: true });
+      else {
+        navigate("/", { replace: true });
+        dispatch(resetLeftSideBar());
+      }
+    }
+  }, [isAuth, navigate, isAdmin, dispatch]);
 };
 
 export default useAuthCheck;
diff --git a/app/src/mocks/data/users.ts b/app/src/mocks/data/users.ts
index 28d96180..6aaa89e6 100644
--- a/app/src/mocks/data/users.ts
+++ b/app/src/mocks/data/users.ts
@@ -11,7 +11,7 @@ export const MOCK_USER1 = {
   phoneNumber: "0123456789",
   status: "Online",
   screenName: "John Doe",
-  state: userStatus.active,
+  accountStatus: userStatus.active,
 };
 
 export const MOCK_USER2 = {
@@ -26,7 +26,7 @@ export const MOCK_USER2 = {
   phoneNumber: "0123456798",
   status: "Online",
   screenName: "Ay 7aga",
-  state: userStatus.active,
+  accountStatus: userStatus.active,
 };
 
 export const BANNNED = {
@@ -41,7 +41,7 @@ export const BANNNED = {
   phoneNumber: "0125456798",
   status: "Online",
   screenName: "theBannedUser",
-  state: userStatus.banned,
+  accountStatus: userStatus.banned,
 };
 
 export const DEACTIVATED = {
@@ -56,7 +56,7 @@ export const DEACTIVATED = {
   phoneNumber: "0125451598",
   status: "Online",
   screenName: "theDeactivatedUser",
-  state: userStatus.deactivated,
+  accountStatus: userStatus.deactivated,
 };
 export const ADMIN = {
   id: "5",
diff --git a/app/src/mocks/userauth/login.ts b/app/src/mocks/userauth/login.ts
index 0290528c..82a7fe06 100644
--- a/app/src/mocks/userauth/login.ts
+++ b/app/src/mocks/userauth/login.ts
@@ -79,22 +79,12 @@ export const loginMock = [
         );
       }
 
-      const isBannedUser = email === BANNNED.email;
-      if (isBannedUser) {
+      const isnotActiveUser =
+        email === BANNNED.email || email === DEACTIVATED.email;
+      if (isnotActiveUser) {
         return HttpResponse.json(
           {
-            message: "User is banned",
-            status: "error",
-            data: {},
-          },
-          { status: 403 }
-        );
-      }
-      const isDeactivatedUser = email === DEACTIVATED.email;
-      if (isDeactivatedUser) {
-        return HttpResponse.json(
-          {
-            message: "User is deactivated",
+            message: "User is banned or deactivated",
             status: "error",
             data: {},
           },
diff --git a/app/src/state/side-bar/sideBar.ts b/app/src/state/side-bar/sideBar.ts
index d08201a0..f896c7f6 100644
--- a/app/src/state/side-bar/sideBar.ts
+++ b/app/src/state/side-bar/sideBar.ts
@@ -100,6 +100,9 @@ const sideBarSlice = createSlice({
   name: "sideBarData",
   initialState,
   reducers: {
+    resetLeftSideBar: (state) => {
+      state.leftSideBar = chats;
+    },
     resetRightSideBar: (state) => {
       state.rightSideBar = groupInfo;
     },
@@ -139,6 +142,7 @@ const sideBarSlice = createSlice({
   },
 });
 
-export const { updateSideBarView, resetRightSideBar } = sideBarSlice.actions;
+export const { updateSideBarView, resetRightSideBar, resetLeftSideBar } =
+  sideBarSlice.actions;
 export default sideBarSlice.reducer;
 export type { SideBarView, actionType };
diff --git a/app/src/state/user/user.ts b/app/src/state/user/user.ts
index 3ae1e328..14d668ff 100644
--- a/app/src/state/user/user.ts
+++ b/app/src/state/user/user.ts
@@ -33,6 +33,7 @@ const initialState: userState = {
     photo: "",
     status: "",
     bio: "",
+    isAdmin: false,
   },
 
   privacySettings: {
@@ -56,34 +57,34 @@ const userSlice = createSlice({
   reducers: {
     setUserInfo: (
       state: userState,
-      action: PayloadAction<userInfoInterface>,
+      action: PayloadAction<userInfoInterface>
     ) => {
       state.userInfo = action.payload;
     },
     updateUserPrivacy: (
       state: userState,
-      action: PayloadAction<updatePrivacyInterface>,
+      action: PayloadAction<updatePrivacyInterface>
     ) => {
       const { key, value } = action.payload;
       state.privacySettings[key] = privacyStates[value];
     },
     updateUserInfo: (
       state: userState,
-      action: PayloadAction<updateInfoInterface>,
+      action: PayloadAction<updateInfoInterface>
     ) => {
       const { key, value } = action.payload;
       state.userInfo[key] = value;
     },
     updateUserActivity: (
       state: userState,
-      action: PayloadAction<updateActivityInterface>,
+      action: PayloadAction<updateActivityInterface>
     ) => {
       const { key, value } = action.payload;
       state.activitySettings[key] = activeStates[value];
     },
     updateUserPermission: (
       state: userState,
-      action: PayloadAction<updatePermissionInterface>,
+      action: PayloadAction<updatePermissionInterface>
     ) => {
       const { key, value } = action.payload;
       state.permissionSettings[key] = permissionStates[value];
diff --git a/app/src/types/user.ts b/app/src/types/user.ts
index fe599e13..cff126fc 100644
--- a/app/src/types/user.ts
+++ b/app/src/types/user.ts
@@ -31,6 +31,7 @@ interface userInfoInterface {
   status: string;
   bio: string;
   id: string;
+  isAdmin?: boolean;
 }
 
 interface updatePrivacyInterface {

From 0a11a1554e96f0f930795f33ffeb33e4707e1fcf Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 06:28:07 +0200
Subject: [PATCH 113/136] =?UTF-8?q?=F0=9F=90=9B=20(groups):=20Fix=20remove?=
 =?UTF-8?q?d=20member=20still=20has=20the=20chat=20(#153)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/features/groups/GroupInfo.tsx    |  2 +-
 app/src/features/groups/data/settings.ts |  2 +-
 app/src/sockets/SocketProvider.tsx       | 14 ++++++++++++--
 app/src/state/messages/chats.ts          |  1 -
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/src/features/groups/GroupInfo.tsx b/app/src/features/groups/GroupInfo.tsx
index e6a225d8..c7e75407 100644
--- a/app/src/features/groups/GroupInfo.tsx
+++ b/app/src/features/groups/GroupInfo.tsx
@@ -69,7 +69,7 @@ function GroupInfo() {
         <Info>
           <GroupName data-testid="group-name">{group?.name}</GroupName>
           <MembersCount data-testid="group-members-count">
-            {groupMembers.length} members
+            {groupMembers?.length} members
           </MembersCount>
         </Info>
       </GroupDetails>
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
index a166fd0e..808d4090 100644
--- a/app/src/features/groups/data/settings.ts
+++ b/app/src/features/groups/data/settings.ts
@@ -43,7 +43,7 @@ const getSettings = ({
     testid: "admins",
     icon: "Admin" as iconStrings,
     title: "Administrators",
-    subtitle: admins.length,
+    subtitle: admins?.length,
     onClick: () =>
       dispatch(
         updateSideBarView({
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 7bf04010..2aa05893 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -20,6 +20,8 @@ import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
 import { useEncryptDecrypt } from "@features/chats/hooks/useEncryptDecrypt";
 import toast from "react-hot-toast";
 import { useChat } from "@features/chats/hooks/useChat";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { resetRightSideBar } from "@state/side-bar/sideBar";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
@@ -66,6 +68,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const dispatch = useDispatch();
   const socket = useSocket();
   const queryClient = useQueryClient();
+  const user = useAppSelector((state) => state.user.userInfo);
 
   const { decrypt } = useEncryptDecrypt();
   const { chat } = useChat();
@@ -170,8 +173,14 @@ function SocketProvider({ children }: SocketProviderProps) {
       }
     );
 
-    socket.on("REMOVE_MEMBERS_SERVER", () => {
+    socket.on("REMOVE_MEMBERS_SERVER", ({ memberId }: { memberId: string }) => {
       console.log("REMOVE_MEMBERS_SERVER");
+
+      if (memberId === user.id) {
+        navigate("/");
+        dispatch(resetRightSideBar());
+        //TODO: close the right sidebar
+      }
       queryClient.invalidateQueries({ queryKey: ["chats"] });
     });
 
@@ -191,7 +200,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.off("typing");
       socket.io.engine.off("close");
     };
-  }, [socket, chat, decrypt, dispatch, queryClient]);
+  }, [socket, chat, decrypt, dispatch, queryClient, user]);
 
   const sendMessage = (sentMessage: MessageInterface) => {
     if (isConnected && socket) {
@@ -437,6 +446,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         "LEAVE_GROUP_CHANNEL_CLIENT",
         { chatId },
         ({ success, message, error }: AckCreateGroup) => {
+          console.log(message, error, success);
           if (success) {
             toast.success(message);
             queryClient.invalidateQueries({ queryKey: ["chats"] });
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 1665c4d8..3197922c 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -203,7 +203,6 @@ const chatsSlice = createSlice({
       const { chatId, newMessages } = action.payload;
       const chatIndex = state.chats.findIndex((chat) => chat._id === chatId);
 
-
       if (chatIndex !== -1) {
         const chat = state.chats[chatIndex];
 

From 6e70b12f2535ebe0aa47fe6d017632782fdaf917 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sat, 21 Dec 2024 06:37:36 +0200
Subject: [PATCH 114/136] add phase 1 (#154)

---
 .prettierrc                                   |  12 +
 app/src/App.tsx                               |  20 +-
 .../side-bar/chats/ChatsSideBar.tsx           |   2 -
 .../settings/SettingsSideBarHeader.tsx        |   2 +-
 app/src/data/icons.tsx                        |   5 +
 app/src/features/calls/CallLayout.tsx         |  59 +++--
 app/src/features/calls/call.ts                |  54 ++++-
 .../features/calls/context/CallContext.tsx    |   6 +
 .../features/calls/context/CallProvider.tsx   | 102 +++++++++
 .../calls/context/callStatusEmitter.tsx       |   4 +
 .../features/calls/hooks/useCallContext.tsx   |  11 +
 app/src/features/chats/Topbar.tsx             |  48 ++--
 app/src/sockets/SocketProvider.tsx            | 212 +++++++++++++-----
 app/src/types/calls.ts                        |  16 ++
 app/src/types/socket.ts                       |  14 +-
 app/src/utils/socket.tsx                      |  51 +++--
 16 files changed, 475 insertions(+), 143 deletions(-)
 create mode 100644 .prettierrc
 create mode 100644 app/src/features/calls/context/CallContext.tsx
 create mode 100644 app/src/features/calls/context/CallProvider.tsx
 create mode 100644 app/src/features/calls/context/callStatusEmitter.tsx
 create mode 100644 app/src/features/calls/hooks/useCallContext.tsx
 create mode 100644 app/src/types/calls.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..dc7cdd26
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,12 @@
+{
+    "semi": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "printWidth": 80,
+    "tabWidth": 2,
+    "useTabs": false,
+    "quoteProps": "as-needed",
+    "arrowParens": "always",
+    "singleQuote": false
+}
\ No newline at end of file
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 2fe971ee..ac7f4b82 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -14,10 +14,10 @@ import Signup from "./pages/Signup";
 import ResetPasswordModal from "@features/authentication/reset-password/ResetPasswordModal";
 import ProtectedRoute from "@components/protected-route/ProtectedRoute";
 import AppLayout from "@components/AppLayout";
-
 import ChatBox from "@features/chats/ChatBox";
 import SocketProvider from "sockets/SocketProvider";
 import RightSideBarProvider from "@features/groups/contexts/RightSideBarProvider";
+import { CallProvider } from "@features/calls/context/CallProvider";
 import AdminAppLayout from "@features/admin/components/AdminAppLayout";
 import Unauthorized from "@components/unauthorized/Unauthorized";
 
@@ -25,9 +25,9 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 0,
-      retry: 3,
-    },
-  },
+      retry: 3
+    }
+  }
 });
 
 function App() {
@@ -68,11 +68,13 @@ function App() {
                 allowedRoles={["user"]}
                 userRole={currentUserRole}
               >
-                <SocketProvider>
-                  <RightSideBarProvider>
-                    <AppLayout />
-                  </RightSideBarProvider>
-                </SocketProvider>
+                <CallProvider>
+                  <SocketProvider>
+                    <RightSideBarProvider>
+                      <AppLayout />
+                    </RightSideBarProvider>
+                  </SocketProvider>
+                </CallProvider>
               </ProtectedRoute>
             }
           >
diff --git a/app/src/components/side-bar/chats/ChatsSideBar.tsx b/app/src/components/side-bar/chats/ChatsSideBar.tsx
index b29ea709..29d4788c 100644
--- a/app/src/components/side-bar/chats/ChatsSideBar.tsx
+++ b/app/src/components/side-bar/chats/ChatsSideBar.tsx
@@ -4,8 +4,6 @@ import StartNewChat from "@features/chats/StartNewChat";
 import AddStory from "@features/stories/components/AddStory";
 import StoryListContainer from "@features/stories/components/StoryListContainer";
 import TabedSearch from "@features/search/components/TabedSearch";
-import { useSelector } from "react-redux";
-import { RootState } from "@state/store";
 
 interface ChatsSideBarProps {
   children?: React.ReactNode;
diff --git a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
index f33fce7c..45bb966a 100644
--- a/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
+++ b/app/src/components/side-bar/settings/SettingsSideBarHeader.tsx
@@ -62,7 +62,7 @@ function SettingsSideBarHeader() {
               dispatch(
                 updateSideBarView({
                   redirect: sideBarPages.PROFILE_UPDATE,
-                  data: { type },
+                  data: { type }
                 })
               )
             }
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 81c37cc8..e377d491 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -67,6 +67,7 @@ enum icons {
   Eye,
   Sun,
   Group,
+  CallAccept
 }
 
 type iconStrings = keyof typeof icons;
@@ -249,6 +250,10 @@ const iconImports: Record<iconStrings, IconConfig> = {
       },
     },
   },
+  CallAccept: {
+    importFn: () => import("@mui/icons-material/LocalPhone"),
+    defaultProps: { fontSize: "large" },
+  },
   AddPhoto: {
     importFn: () => import("@mui/icons-material/AddAPhotoOutlined"),
     defaultProps: { fontSize: "large" },
diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
index abf2a47c..c2c4a2ef 100644
--- a/app/src/features/calls/CallLayout.tsx
+++ b/app/src/features/calls/CallLayout.tsx
@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import { peerConnection } from "./call";
 import { STATIC_MEDIA_URL } from "@constants";
-
 import { getAvatarName } from "utils/helpers";
 import { createPortal } from "react-dom";
-import Icon from "@components/Icon";
 import { getIcon } from "@data/icons";
-import { useState } from "react";
+import { useCallContext } from "./hooks/useCallContext";
+import { getChatByID } from "@features/chats/utils/helpers";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useSocket } from "@hooks/useSocket";
 
 const ModalContainer = styled.div`
   position: fixed;
@@ -19,7 +19,7 @@ const ModalContainer = styled.div`
   align-items: center;
   opacity: 1;
   transition: opacity 0.15s ease;
-  z-index: 6;
+  z-index: 102;
 `;
 
 const ModalBackdrop = styled.div`
@@ -131,7 +131,8 @@ const RoundButton = styled.button<{
 `;
 
 const ButtonContainer = styled.div`
-  width: 5rem;
+  width: 6rem;
+  height: 6rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -176,7 +177,7 @@ const ActiveHeaderOpen = styled.div`
   top: 0;
   left: 0;
   height: 1rem;
-  width: 100%;
+  width: 100vw;
   z-index: 6;
   display: flex;
   justify-content: center;
@@ -187,20 +188,29 @@ const ActiveHeaderOpen = styled.div`
   padding: 0 1rem;
   background: linear-gradient(135deg, rgb(49, 82, 232), rgb(143, 74, 172));
   transform: translateY(0);
+  z-index: 102;
 `;
 type PropsType = {
-  image?: string | undefined;
-  name: string | undefined;
   isCollapsed: boolean;
   setIsCollapsed: (arg0: boolean) => void;
+  chatId: string | undefined;
+  callStatus: string | undefined;
 };
 
 export default function CallLayout({
-  name,
-  image,
   isCollapsed,
   setIsCollapsed,
+  chatId,
+  callStatus
 }: PropsType) {
+  const { endCall } = useCallContext();
+  const { acceptCall } = useSocket();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({
+    chatID: chatId ?? "",
+    chats: chats
+  });
+
   return (
     <>
       {!isCollapsed
@@ -210,8 +220,8 @@ export default function CallLayout({
               <ModalDialog>
                 <ModalContent>
                   <AvatarContainer>
-                    <StyledAvatar $image={image}>
-                      {!image && getAvatarName(name)}
+                    <StyledAvatar $image={chat?.photo}>
+                      {!chat?.photo && getAvatarName(chat?.name)}
                     </StyledAvatar>
                     <TopBar>
                       <RoundButton onClick={() => setIsCollapsed(true)}>
@@ -219,16 +229,29 @@ export default function CallLayout({
                       </RoundButton>
                     </TopBar>
                     <NameContainer>
-                      <h1>{name}</h1>
-                      <span>state</span>
+                      <h1>{chat?.name}</h1>
+                      <span>{callStatus}...</span>
                     </NameContainer>
                     <ButtonsContainer>
                       <ButtonContainer>
                         <RoundButton>{getIcon("Mute")}</RoundButton>
                         <ButtonText>unmute</ButtonText>
                       </ButtonContainer>
+                      {callStatus === "incoming" && (
+                        <ButtonContainer>
+                          <RoundButton
+                            $bgColor="var(--color-success)"
+                            $bgColorHover="var(--color-success-shade)"
+                            onClick={() => acceptCall()}
+                          >
+                            {getIcon("CallAccept")}
+                          </RoundButton>
+                          <ButtonText>accept</ButtonText>
+                        </ButtonContainer>
+                      )}
                       <ButtonContainer>
                         <RoundButton
+                          onClick={() => endCall()}
                           $bgColor="var(--color-error)"
                           $bgColorHover="var(--color-error-shade)"
                         >
@@ -241,13 +264,13 @@ export default function CallLayout({
                 </ModalContent>
               </ModalDialog>
             </ModalContainer>,
-            document.body,
+            document.body
           )
         : createPortal(
             <ActiveHeaderOpen onClick={() => setIsCollapsed(false)}>
-              <span>{name}</span>
+              <span>{chat?.name}</span>
             </ActiveHeaderOpen>,
-            document.body,
+            document.body
           )}
     </>
   );
diff --git a/app/src/features/calls/call.ts b/app/src/features/calls/call.ts
index bc5ba96e..c7d9f28f 100644
--- a/app/src/features/calls/call.ts
+++ b/app/src/features/calls/call.ts
@@ -1,10 +1,10 @@
 export let callState = "idle";
 const stunServers = {
   iceServers: [
-    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] },
-  ],
+    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] }
+  ]
 };
-async function getVoiceInput(): Promise<MediaStream | null> {
+export async function getVoiceInput(): Promise<MediaStream | null> {
   try {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
     return stream;
@@ -13,10 +13,12 @@ async function getVoiceInput(): Promise<MediaStream | null> {
     return null;
   }
 }
-export let peerConnection: RTCPeerConnection;
-let localStream: MediaStream | null;
-let RemoteStream: MediaStream;
-export const connectToPeer = async () => {
+
+const RemoteStream: MediaStream = new MediaStream();
+export const connectToPeer = async (
+  peerConnection: RTCPeerConnection | null,
+  localStream: MediaStream | null
+) => {
   callState = "connecting";
   peerConnection = new RTCPeerConnection(stunServers);
   if (!localStream) localStream = await getVoiceInput();
@@ -45,7 +47,44 @@ export const connectToPeer = async () => {
   await peerConnection.setLocalDescription(offer);
   return JSON.stringify(offer);
 };
+export const createOffer = async (
+  peerConnection: RTCPeerConnection | null,
+  localStream: MediaStream | null
+) => {
+  peerConnection = new RTCPeerConnection(stunServers);
+  if (!localStream) localStream = await getVoiceInput();
+  console.log(localStream);
+  localStream?.getTracks().forEach((t) => {
+    peerConnection.addTrack(t, localStream);
+  });
+
+  peerConnection.ontrack = (e) => {
+    e.streams[0]?.getTracks().forEach((track) => RemoteStream.addTrack(track));
+  };
+
+  const offer = await peerConnection.createOffer();
+  await peerConnection.setLocalDescription(offer);
+
+  return JSON.stringify(offer);
+};
+export const handleIceCandidates = async (
+  peerConnection: RTCPeerConnection,
+  sendCandidate: (candidate: string) => void
+) => {
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      resolve(null);
+    }, 10000);
 
+    peerConnection.onicecandidate = (event) => {
+      if (!event.candidate) {
+        clearTimeout(timeout);
+        resolve(null);
+      }
+      sendCandidate(JSON.stringify(event.candidate));
+    };
+  });
+};
 export const createAnswer = async (offer: string) => {
   await connectToPeer();
   const offer_parsed = JSON.parse(offer);
@@ -58,5 +97,4 @@ export const startCall = async (answer: string) => {
   callState = "ongoing";
   const offer_parsed = JSON.parse(answer);
   await peerConnection.setRemoteDescription(offer_parsed);
-  //start call
 };
diff --git a/app/src/features/calls/context/CallContext.tsx b/app/src/features/calls/context/CallContext.tsx
new file mode 100644
index 00000000..c6fc1d34
--- /dev/null
+++ b/app/src/features/calls/context/CallContext.tsx
@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { CallContextType } from "types/calls";
+
+export const CallContext = createContext<CallContextType | undefined>(
+  undefined
+);
diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
new file mode 100644
index 00000000..c35b6dd6
--- /dev/null
+++ b/app/src/features/calls/context/CallProvider.tsx
@@ -0,0 +1,102 @@
+import React, { ReactNode, useCallback, useRef } from "react";
+import { CallContext } from "./CallContext";
+import { useAppSelector } from "@hooks/useGlobalState";
+import { createOffer, getVoiceInput } from "../call";
+import { callStatusEmitter } from "./callStatusEmitter";
+import { CallStatus } from "types/calls";
+
+export const CallProvider: React.FC<{ children: ReactNode }> = ({
+  children
+}) => {
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+
+  const callAccepted = useRef<string | null>(null);
+  const callIdRef = useRef<string | null>(null);
+  const senderIdRef = useRef<string | null>(null);
+  const chatIdRef = useRef<string | null>(null);
+  const peerConnection = useRef<RTCPeerConnection | null>(null);
+  const localStream = useRef<MediaStream | null>(null);
+  const offer = useRef<string | null>(null);
+  const answer = useRef<string | null>(null);
+  const callStatus = useRef<CallStatus>("inactive");
+
+  const setCallStatus = (status: typeof callStatus.current) => {
+    callStatus.current = status;
+    console.log(status);
+    callStatusEmitter.emit("update", status);
+  };
+
+  const joinCall = useCallback(
+    (newSenderId: string, newChatId: string, newCallId: string) => {
+      console.log(callIdRef.current, newCallId);
+      if (!callIdRef.current) {
+        if (newSenderId === userId) {
+          setCallStatus("calling");
+        } else {
+          setCallStatus("incoming");
+        }
+        callIdRef.current = newCallId;
+        senderIdRef.current = newSenderId;
+        chatIdRef.current = newChatId;
+      }
+    },
+    [userId]
+  );
+
+  const endCall = useCallback(() => {
+    setCallStatus("inactive");
+    callIdRef.current = null;
+    senderIdRef.current = null;
+    chatIdRef.current = null;
+    callAccepted.current = null;
+    peerConnection.current?.close();
+    peerConnection.current = null;
+    localStream.current = null;
+  }, []);
+
+  const acceptCall = useCallback(() => {
+    setCallStatus("active");
+    callAccepted.current = callIdRef.current;
+  }, []);
+
+  const startPeerConnection = useCallback(async () => {
+    localStream.current = await getVoiceInput();
+    offer.current = await createOffer(
+      peerConnection.current,
+      localStream.current
+    );
+  }, []);
+
+  const recieveICE = useCallback(async (candidate: RTCIceCandidateInit) => {
+    if (peerConnection.current) {
+      try {
+        await peerConnection.current.addIceCandidate(candidate);
+        console.log("ICE candidate added successfully.");
+      } catch (error) {
+        console.error("Failed to add ICE candidate:", error);
+      }
+    }
+  }, []);
+
+  const recieveAnswer = useCallback(() => {}, []);
+
+  const contextValue = {
+    peerConnection: peerConnection,
+    callId: callIdRef,
+    senderId: senderIdRef,
+    chatId: chatIdRef,
+    startPeerConnection,
+    offer: offer,
+    answer: answer,
+    acceptCall,
+    callAccepted: callAccepted,
+    joinCall,
+    endCall,
+    recieveICE,
+    recieveAnswer
+  };
+
+  return (
+    <CallContext.Provider value={contextValue}>{children}</CallContext.Provider>
+  );
+};
diff --git a/app/src/features/calls/context/callStatusEmitter.tsx b/app/src/features/calls/context/callStatusEmitter.tsx
new file mode 100644
index 00000000..47ff94ab
--- /dev/null
+++ b/app/src/features/calls/context/callStatusEmitter.tsx
@@ -0,0 +1,4 @@
+import mitt from "mitt";
+export const callStatusEmitter = mitt<{
+  update: "inactive" | "active" | "calling" | "incoming" | "ended";
+}>();
diff --git a/app/src/features/calls/hooks/useCallContext.tsx b/app/src/features/calls/hooks/useCallContext.tsx
new file mode 100644
index 00000000..94079caf
--- /dev/null
+++ b/app/src/features/calls/hooks/useCallContext.tsx
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { CallContext } from "../context/CallContext";
+import { CallContextType } from "types/calls";
+
+export const useCallContext = (): CallContextType => {
+  const context = useContext(CallContext);
+  if (!context) {
+    throw new Error("useCallContext must be used within a CallProvider");
+  }
+  return context;
+};
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index ec2fc116..768adcb5 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
@@ -23,6 +23,7 @@ import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
 
 import { resetActiveThread } from "@state/messages/channels";
+import { callStatusEmitter } from "@features/calls/context/callStatusEmitter";
 
 const Container = styled.div<{ $hasMargin?: boolean }>`
   position: absolute;
@@ -125,11 +126,26 @@ function Topbar() {
   const { activeThread } = useAppSelector((state) => state.channelsThreads);
   const [isSearching, setIsSearching] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const { startConnection } = useSocket();
+  const { createVoiceCall } = useSocket();
+  const [callStatus, setCallStatus] = useState<
+    "inactive" | "active" | "calling" | "incoming" | "ended"
+  >("inactive");
+
+  useEffect(() => {
+    const handler = (status: typeof callStatus) => setCallStatus(status);
+    callStatusEmitter.on("update", handler);
+
+    return () => callStatusEmitter.off("update", handler);
+  }, []);
+  const startCall = () => {
+    if (chatId && callStatus === "inactive") {
+      createVoiceCall({ chatId });
+    }
+  };
   const chat = chatId
     ? getChatByID({
         chatID: chatId,
-        chats: chats,
+        chats: chats
       })
     : undefined;
 
@@ -137,8 +153,9 @@ function Topbar() {
   const { removeFromBlockList } = useBlock();
 
   const { setIsRightSideBarOpen } = useRightSideBarContext();
+  const dispatch = useAppDispatch();
 
-  function handleOpenRightSideBar() {
+  const handleOpenRightSideBar = useCallback(() => {
     if (!chat) return;
     if (chat?.type === "private") setIsRightSideBarOpen(false);
     else {
@@ -148,17 +165,16 @@ function Topbar() {
             chat?.type === "group"
               ? sideBarPages.GROUP_INFO
               : sideBarPages.CHANNEL_INFO,
-          data: { type: "right" },
+          data: { type: "right" }
         })
       );
     }
-  }
+  }, [chat, dispatch, setIsRightSideBarOpen]);
 
   useEffect(() => {
     if (!chatId) return;
     handleOpenRightSideBar();
-  }, [chatId, chat]);
-
+  }, [chatId, handleOpenRightSideBar]);
   let image;
   let lastSeen;
 
@@ -171,15 +187,13 @@ function Topbar() {
     setIsSearching(!isSearching);
   };
 
-  const dispatch = useAppDispatch();
-
   async function handleRemoveFromBlock() {
     await removeFromBlockList({ id: membersData[0]._id });
     dispatch(
       setChatIsBlocked({
         chatId: chatId!,
         isBlocked: false,
-        userId: userId,
+        userId: userId
       })
     );
   }
@@ -193,18 +207,16 @@ function Topbar() {
     dispatch(resetActiveThread());
   };
 
-  const isCall = false;
-
   if (!chat) return null;
 
   return (
     <>
-      {isCall && (
+      {callStatus != "inactive" && (
         <CallLayout
           isCollapsed={isCollapsed}
           setIsCollapsed={setIsCollapsed}
-          name={chat.name}
-          image={image}
+          chatId={chatId}
+          callStatus={callStatus}
         />
       )}
       <Container data-testid="chat-topbar" $hasMargin={isCollapsed}>
@@ -219,7 +231,7 @@ function Topbar() {
         {activeThread && (
           <div onClick={closeThread} data-testid="back-button">
             {getIcon("LeftArrow", {
-              sx: { fontSize: "3rem", color: "var(--accent-color)" },
+              sx: { fontSize: "3rem", color: "var(--accent-color)" }
             })}
           </div>
         )}
@@ -250,7 +262,7 @@ function Topbar() {
             )}
             <Icons>
               <InvisibleButton>
-                <Icon onClick={() => startConnection()} data-testid="call-icon">
+                <Icon onClick={startCall} data-testid="call-icon">
                   {getIcon("Call")}
                 </Icon>
               </InvisibleButton>
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 2aa05893..192106c1 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -14,15 +14,18 @@ import {
   pinMessage,
   unpinMessage,
   editMessage,
-  deleteMessage as deleteMessageAction,
+  deleteMessage as deleteMessageAction
 } from "@state/messages/chats";
-import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
+// import { connectToPeer, createAnswer, startCall } from "@features/calls/call";
 import { useEncryptDecrypt } from "@features/chats/hooks/useEncryptDecrypt";
 import toast from "react-hot-toast";
 import { useChat } from "@features/chats/hooks/useChat";
+import { useCallContext } from "@features/calls/hooks/useCallContext";
+import { useAppSelector } from "@hooks/useGlobalState";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { resetRightSideBar } from "@state/side-bar/sideBar";
 
+
 const handleIncomingMessage = (
   dispatch: Dispatch,
   message: MessageInterface,
@@ -64,19 +67,96 @@ interface AckCreateGroup {
 
 function SocketProvider({ children }: SocketProviderProps) {
   const [isConnected, setIsConnected] = useState(false);
+  const {
+    callId,
+    joinCall,
+    endCall,
+    recieveICE,
+    recieveAnswer,
+    peerConnection,
+    startPeerConnection,
+    offer,
+    acceptCall: setAcceptedCall,
+    callAccepted
+  } = useCallContext();
+  console.log(callId, callAccepted);
+  console.log("reredder");
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const socket = useSocket();
   const queryClient = useQueryClient();
+
+  const userId = useAppSelector((state) => state.user.userInfo.id);
+
   const user = useAppSelector((state) => state.user.userInfo);
 
   const { decrypt } = useEncryptDecrypt();
   const { chat } = useChat();
-
+  const handleIceCandidates = useCallback(async () => {
+    return new Promise((resolve) => {
+      const timeout = setTimeout(() => {
+        resolve(null);
+      }, 10000);
+      if (peerConnection && isConnected && socket && callId) {
+        peerConnection.onicecandidate = (event) => {
+          if (!event.candidate) {
+            clearTimeout(timeout);
+            resolve(null);
+          }
+          socket.emit("SIGNAL-SERVER", {
+            type: "ICE",
+            voiceCallId: callId,
+            data: event.candidate
+          });
+        };
+      }
+    });
+  }, [peerConnection, isConnected, socket, callId]);
+  const sendOffer = useCallback(() => {
+    if (offer && isConnected && socket && callId) {
+      socket.emit("SIGNAL-SERVER", {
+        type: "OFFER",
+        voiceCallId: callId,
+        data: offer
+      });
+    }
+  }, [offer, isConnected, socket, callId]);
+  const acceptCall = useCallback(() => {
+    console.log(callId, callAccepted, isConnected, socket);
+    if (isConnected && socket && callId.current && !callAccepted.current) {
+      console.log("acceptCall", callId.current);
+      setAcceptedCall();
+      socket.emit("JOIN-CALL", { voiceCallId: callId.current });
+    }
+  }, [callAccepted, isConnected, socket, callId, setAcceptedCall]);
+  const sendAnswer = useCallback(
+    (
+      answer: string,
+      callback?: (response: { success: boolean; error?: string }) => void
+    ) => {
+      if (isConnected && socket) {
+        socket.emit(
+          "SEND_ANSWER",
+          { answer },
+          (response: { success: boolean; error?: string }) => {
+            if (callback) {
+              callback(response);
+            } else if (!response.success) {
+              console.error("Failed to send answer:", response.error);
+            } else {
+              console.log("Answer sent successfully");
+            }
+          }
+        );
+      } else {
+        console.warn("Cannot send answer: not connected to socket server");
+      }
+    },
+    [isConnected, socket]
+  );
   useEffect(() => {
     if (!socket) return;
-
-    socket.connect();
+    if (!socket.connected) socket.connect();
 
     const onConnect = () => {
       setIsConnected(true);
@@ -86,7 +166,6 @@ function SocketProvider({ children }: SocketProviderProps) {
         console.log("Socket connection closed:", reason);
       });
     };
-
     const onReceiveMessage = (message: MessageInterface) => {
       console.log("Received message:", message);
       if (!chat) {
@@ -98,7 +177,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         decrypt({
           message: message.content,
           key: chat.encryptionKey!,
-          iv: chat.initializationVector!,
+          iv: chat.initializationVector!
         })
           .then((content) => {
             console.log("Decrypted content:", content);
@@ -148,15 +227,15 @@ function SocketProvider({ children }: SocketProviderProps) {
       handleIsTyping(dispatch, isTyping, message.chatId)
     );
 
-    socket.on("RECIEVE_OFFER", async (offer) => {
-      console.log(offer);
-      const answer = await createAnswer(offer);
-      sendAnswer(answer);
-    });
-    socket.on("RECEIVE_ANSWER", async (answer: string) => {
-      console.log(answer);
-      await startCall(answer);
-    });
+    // socket.on("RECIEVE_OFFER", async (offer) => {
+    //   console.log(offer);
+    //   const answer = await createAnswer(offer);
+    //   sendAnswer(answer);
+    // });
+    // socket.on("RECEIVE_ANSWER", async (answer: string) => {
+    //   console.log(answer);
+    //   startCall(answer);
+    // });
 
     socket.on(
       "DELETE_MESSAGE_SERVER",
@@ -184,13 +263,39 @@ function SocketProvider({ children }: SocketProviderProps) {
       queryClient.invalidateQueries({ queryKey: ["chats"] });
     });
 
+    socket.on(
+      "CALL-STARTED",
+      ({
+        snederId,
+        voiceCallId,
+        chatId
+      }: {
+        snederId: string;
+        voiceCallId: string;
+        chatId: string;
+      }) => {
+        console.log("call id", voiceCallId);
+        joinCall(snederId, chatId, voiceCallId);
+        console.log(snederId, userId);
+        if (snederId === userId) acceptCall();
+      }
+    );
+    socket.on("CLIENT-JOINED", () => {
+      console.log("CLIENT-JOINED");
+      startPeerConnection();
+      sendOffer();
+      handleIceCandidates();
+    });
+    socket.on("SIGNAL-SERVER", async ({ type, voiceCallId, data }) => {
+      console.log(typeof data);
+      if (type === "ANSWER") recieveAnswer(data);
+      if (type === "ICE") recieveICE(data);
+    });
     socket.emit("typing");
 
     return () => {
       console.log("Cleaning up socket listeners");
-
-      socket.disconnect();
-
+      // if (socket.connected) socket.disconnect();
       socket.off("connect", onConnect);
       socket.off("RECEIVE_MESSAGE", onReceiveMessage);
       socket.off("PIN_MESSAGE_SERVER");
@@ -198,7 +303,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.off("EDIT_MESSAGE_SERVER");
       socket.off("JOIN_GROUP_CHANNEL");
       socket.off("typing");
-      socket.io.engine.off("close");
+      // socket.io.engine.off("close");
     };
   }, [socket, chat, decrypt, dispatch, queryClient, user]);
 
@@ -221,8 +326,8 @@ function SocketProvider({ children }: SocketProviderProps) {
             if (chat?.type === "private") {
               decrypt({
                 message: sentMessage.content,
-                key: chat?.encryptionKey!,
-                iv: chat?.initializationVector!,
+                key: chat?.encryptionKey || "",
+                iv: chat?.initializationVector || ""
               }).then((content) => {
                 handleIncomingMessage(
                   dispatch,
@@ -265,7 +370,7 @@ function SocketProvider({ children }: SocketProviderProps) {
               editMessage({
                 chatId: response.res.message.chatId,
                 messageId: response.res.message._id,
-                content: response.res.message.content,
+                content: response.res.message.content
               })
             );
           } else {
@@ -299,45 +404,28 @@ function SocketProvider({ children }: SocketProviderProps) {
       console.warn("Cannot unpin message: not connected to socket server");
     }
   };
-  const startConnection = async () => {
-    const offer = await connectToPeer();
-    if (isConnected && socket) {
-      console.log(offer);
-      socket.emit("SEND_OFFER", { offer });
-    } else {
-      console.warn("Cannot unpin message: not connected to socket server");
+  const createVoiceCall = ({ chatId }: { chatId: string }) => {
+    console.log("create call", isConnected, socket, chatId, callId.current);
+    if (isConnected && socket && !callId.current) {
+      socket.emit("CREATE-CALL", {
+        chatId
+      });
     }
   };
-  const sendAnswer = useCallback(
-    (
-      answer: string,
-      callback?: (response: { success: boolean; error?: string }) => void
-    ) => {
-      if (isConnected && socket) {
-        socket.emit(
-          "SEND_ANSWER",
-          { answer },
-          (response: { success: boolean; error?: string }) => {
-            if (callback) {
-              callback(response);
-            } else if (!response.success) {
-              console.error("Failed to send answer:", response.error);
-            } else {
-              console.log("Answer sent successfully");
-            }
-          }
-        );
-      } else {
-        console.warn("Cannot send answer: not connected to socket server");
-      }
-    },
-    [isConnected, socket]
-  );
+  // const startConnection = async (callId: string) => {
+  //   const offer = await connectToPeer();
+  //   if (isConnected && socket) {
+  //     console.log(offer);
+  //     socket.emit("SEND_OFFER", { offer });
+  //   } else {
+  //     console.warn("Cannot unpin message: not connected to socket server");
+  //   }
+  // };
 
   function createGroupOrChannel({
     type,
     name,
-    members,
+    members
   }: {
     type: "group" | "channel";
     name: string;
@@ -365,7 +453,7 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   function addGroupMembers({
     chatId,
-    users,
+    users
   }: {
     chatId: string;
     users: string[];
@@ -391,7 +479,7 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   function addAdmins({
     chatId,
-    members,
+    members
   }: {
     chatId: string;
     members: string[];
@@ -418,7 +506,7 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   function deleteMessage({
     messageId,
-    chatId,
+    chatId
   }: {
     messageId: string;
     chatId: string;
@@ -464,7 +552,7 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   function removeMembers({
     chatId,
-    members,
+    members
   }: {
     chatId: string;
     members: string[];
@@ -497,13 +585,15 @@ function SocketProvider({ children }: SocketProviderProps) {
         pinMessage: pinMessageSocket,
         unpinMessage: unpinMessageSocket,
         editMessage: editMessageSocket,
-        startConnection,
+        //startConnection,
         createGroupOrChannel,
         deleteMessage,
         addGroupMembers,
         addAdmins,
         leaveGroup,
         removeMembers,
+        acceptCall,
+        createVoiceCall
       }}
     >
       {children}
diff --git a/app/src/types/calls.ts b/app/src/types/calls.ts
new file mode 100644
index 00000000..4c75782f
--- /dev/null
+++ b/app/src/types/calls.ts
@@ -0,0 +1,16 @@
+export interface CallContextType {
+  callId: React.RefObject<string | null>;
+  senderId: React.RefObject<string | null>;
+  chatId: React.RefObject<string | null>;
+  callAccepted: React.RefObject<string | null>;
+  joinCall: (newCallId: string, newSenderId: string, newChatId: string) => void;
+  endCall: () => void;
+  acceptCall: () => void;
+  startPeerConnection: () => Promise<void>;
+  offer: React.RefObject<string | null>;
+  answer: React.RefObject<string | null>;
+  peerConnection: React.RefObject<RTCPeerConnection | null>;
+  //recieveAnswer: (answer: string) => Promise<void>;
+  recieveICE: (candidate: RTCIceCandidateInit) => Promise<void>;
+}
+export type CallStatus = "inactive" | "active" | "calling" | "incoming" | "ended";
\ No newline at end of file
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 55996676..ce7e9598 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -10,7 +10,7 @@ export interface SocketContextType {
   createGroupOrChannel: ({
     type,
     name,
-    members,
+    members
   }: {
     type: "group" | "channel";
     name: string;
@@ -18,34 +18,36 @@ export interface SocketContextType {
   }) => void;
   addGroupMembers: ({
     chatId,
-    users,
+    users
   }: {
     chatId: string;
     users: string[];
   }) => void;
   addAdmins: ({
     chatId,
-    members,
+    members
   }: {
     chatId: string;
     members: string[];
   }) => void;
   removeMembers: ({
     chatId,
-    members,
+    members
   }: {
     chatId: string;
     members: string[];
   }) => void;
-  startConnection: (offer?: RTCSessionDescription) => void;
+  //startConnection: (offer?: RTCSessionDescription) => void;
   deleteMessage: ({
     messageId,
-    chatId,
+    chatId
   }: {
     messageId: string;
     chatId: string;
   }) => void;
   leaveGroup: ({ chatId }: { chatId: string }) => void;
+  createVoiceCall: ({ chatId }: { chatId: string }) => void;
+  acceptCall: (callId: string | null) => void;
 }
 
 export interface SocketProviderProps {
diff --git a/app/src/utils/socket.tsx b/app/src/utils/socket.tsx
index 66878a88..17c07f52 100644
--- a/app/src/utils/socket.tsx
+++ b/app/src/utils/socket.tsx
@@ -1,39 +1,50 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef } from "react";
 import { io, Socket } from "socket.io-client";
 import { useUser } from "@features/authentication/login/hooks/useUser";
 import { DefaultEventsMap } from "@socket.io/component-emitter";
 
-let socketInstance: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
+let socket: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
+
+function initializeSocket(
+  userId: string,
+  sessionId: string | null
+): Socket<DefaultEventsMap, DefaultEventsMap> {
+  if (!socket) {
+    socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
+      query: {
+        userId
+      },
+      auth: {
+        sessionId
+      }
+    });
+
+    console.log("Socket initialized");
+  }
+
+  return socket;
+}
 
 function useSocket() {
   const { user, isPending } = useUser();
-  const [socket, setSocket] = useState<Socket<
-    DefaultEventsMap,
-    DefaultEventsMap
-  > | null>(null);
+  const socketRef = useRef<Socket<DefaultEventsMap, DefaultEventsMap> | null>(
+    null
+  );
 
   useEffect(() => {
-    if (!isPending && user && !socketInstance) {
-      socketInstance = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
-        query: {
-          userId: user._id,
-        },
-        auth: {
-          sessionId: localStorage.getItem("sessionId"),
-        },
-      });
-
-      setSocket(socketInstance);
+    if (!isPending && user && !socketRef.current) {
+      const sessionId = localStorage.getItem("sessionId");
+      socketRef.current = initializeSocket(user._id, sessionId);
 
       return () => {
         console.log("Disconnecting socket");
-        socketInstance?.disconnect();
-        socketInstance = null;
+        socketRef.current?.disconnect();
+        socket = null;
       };
     }
   }, [user, isPending]);
 
-  return socket;
+  return socketRef.current;
 }
 
 export { useSocket };

From 56d313fa1bfaaa521d21712a94a3798758551fec Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 21 Dec 2024 09:07:21 +0200
Subject: [PATCH 115/136] hotfix: fix vite build crashing (#155)

---
 app/package-lock.json              | 7 +++++++
 app/package.json                   | 3 ++-
 app/src/sockets/SocketProvider.tsx | 2 --
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 0d968f3d..5319c4b2 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -22,6 +22,7 @@
         "emoji-picker-react": "^4.12.0",
         "idb": "^8.0.0",
         "lottie-react": "^2.4.0",
+        "mitt": "^3.0.1",
         "motion": "^11.13.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -9252,6 +9253,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/motion": {
       "version": "11.13.1",
       "resolved": "https://registry.npmjs.org/motion/-/motion-11.13.1.tgz",
diff --git a/app/package.json b/app/package.json
index e143d955..d5252904 100644
--- a/app/package.json
+++ b/app/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "build-ignore": "vite build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
@@ -30,6 +30,7 @@
     "emoji-picker-react": "^4.12.0",
     "idb": "^8.0.0",
     "lottie-react": "^2.4.0",
+    "mitt": "^3.0.1",
     "motion": "^11.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 192106c1..1424d0da 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -22,10 +22,8 @@ import toast from "react-hot-toast";
 import { useChat } from "@features/chats/hooks/useChat";
 import { useCallContext } from "@features/calls/hooks/useCallContext";
 import { useAppSelector } from "@hooks/useGlobalState";
-import { useAppSelector } from "@hooks/useGlobalState";
 import { resetRightSideBar } from "@state/side-bar/sideBar";
 
-
 const handleIncomingMessage = (
   dispatch: Dispatch,
   message: MessageInterface,

From 385bb34761cbd8422789b0fe39e22724a7e3e34e Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 13:34:56 +0200
Subject: [PATCH 116/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Admins=20can=20?=
 =?UTF-8?q?set=20post=20permission=20(#156)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/features/chats/ChatInput.tsx          | 10 +++
 app/src/features/chats/DisabledChatInput.tsx  | 30 +++++++
 app/src/features/chats/utils/helpers.ts       | 14 +--
 app/src/features/groups/EditGroupInfo.tsx     | 10 ++-
 app/src/features/groups/Permissions.tsx       | 85 ++++++++++---------
 app/src/features/groups/data/settings.ts      | 24 +++---
 app/src/features/groups/hooks/useGroupInfo.ts |  5 +-
 app/src/sockets/SocketProvider.tsx            | 35 +++++++-
 app/src/state/messages/chats.ts               | 12 +--
 app/src/types/socket.ts                       |  9 ++
 10 files changed, 171 insertions(+), 63 deletions(-)
 create mode 100644 app/src/features/chats/DisabledChatInput.tsx

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 0e809749..cc68a711 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -15,6 +15,8 @@ import FilePreviewItem from "./media/FilePreviewItem";
 import useActiveMessage from "./hooks/useActiveMessage";
 import { useContext } from "react";
 import { ChatInputContext } from "./ChatBox";
+import { useGroupInfo } from "@features/groups/hooks/useGroupInfo";
+import DisabledChatInput from "./DisabledChatInput";
 
 const Container = styled.div`
   z-index: 1;
@@ -65,6 +67,7 @@ const Input = styled.div`
 
 function ChatInput() {
   const { chatId } = useParams<{ chatId: string }>();
+  const { isCurrUserAdmin } = useGroupInfo();
 
   const {
     input,
@@ -82,6 +85,10 @@ function ChatInput() {
 
   const chats = useAppSelector((state) => state.chats.chats);
   const currChat = getChatByID({ chats: chats, chatID: chatId! });
+  const hasNoPostPermission =
+    currChat?.type === "group" &&
+    !currChat?.messagingPermission &&
+    !isCurrUserAdmin;
 
   const showCheckBox = currChat?.showCheckBox;
   const isBlocked = currChat?.isBlocked;
@@ -92,6 +99,9 @@ function ChatInput() {
     alert(error);
     setError("");
   }
+  console.log(isCurrUserAdmin);
+
+  if (hasNoPostPermission) return <DisabledChatInput />;
 
   return (
     <>
diff --git a/app/src/features/chats/DisabledChatInput.tsx b/app/src/features/chats/DisabledChatInput.tsx
new file mode 100644
index 00000000..92997404
--- /dev/null
+++ b/app/src/features/chats/DisabledChatInput.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  z-index: 1;
+
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  left: 50%;
+  width: 100%;
+  transform: translateX(-50%);
+  margin: auto;
+`;
+
+const P = styled.p`
+  color: var(--color-text-secondary);
+  padding: 1rem;
+  text-align: center;
+  width: 100%;
+  background-color: var(--color-background);
+`;
+
+function DisabledChatInput() {
+  return (
+    <Container>
+      <P>Only admins can send messages</P>
+    </Container>
+  );
+}
+export default DisabledChatInput;
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index a519a1db..2286ec3a 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -3,7 +3,7 @@ import { ChatMember } from "@mocks/data/chats";
 
 export function getChatByID({
   chats,
-  chatID,
+  chatID
 }: {
   chats: DetailedChatInterface[];
   chatID: string;
@@ -25,12 +25,14 @@ export function parseChatsToState(chatData?: any) {
       name,
       encryptionKey,
       initializationVector,
+      messagingPermission,
+      downloadingPermission
     } = currChat;
 
     const filteredMembers = members?.map((member: any) => {
       return {
         _id: member.user,
-        Role: member.Role,
+        Role: member.Role
       } as ChatMember;
     });
 
@@ -51,7 +53,7 @@ export function parseChatsToState(chatData?: any) {
         _id: incomingLastMessage?.id,
         content: incomingLastMessage?.content,
         senderId: incomingLastMessage?.senderId,
-        timestamp: incomingLastMessage?.timestamp,
+        timestamp: incomingLastMessage?.timestamp
       },
 
       messages: [],
@@ -61,6 +63,8 @@ export function parseChatsToState(chatData?: any) {
 
       encryptionKey,
       initializationVector,
+      messagingPermission,
+      downloadingPermission
     } as DetailedChatInterface;
   });
 }
@@ -80,7 +84,7 @@ const arrayBufferToHex = (buffer: ArrayBuffer) => {
 export const encryptMessage = async ({
   message,
   keyHex,
-  ivHex,
+  ivHex
 }: {
   message: string;
   keyHex: string;
@@ -115,7 +119,7 @@ export const encryptMessage = async ({
 export const decryptMessage = async ({
   encryptedMessageHex,
   keyHex,
-  ivHex,
+  ivHex
 }: {
   encryptedMessageHex: string;
   keyHex: string;
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index 020a57c2..827a9161 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -16,7 +16,14 @@ const Container = styled.div`
 
 function EditGroupInfo() {
   const dispatch = useDispatch();
-  const { admins, groupMembers, chatId, isPending, chatType } = useGroupInfo();
+  const {
+    admins,
+    groupMembers,
+    chatId,
+    isPending,
+    chatType,
+    numGivenPermissions
+  } = useGroupInfo();
   const { leaveGroup } = useSocket();
   const { setIsRightSideBarOpen } = useRightSideBarContext();
 
@@ -37,6 +44,7 @@ function EditGroupInfo() {
     resetRightSideBar,
     chatType: chatType!,
     backView,
+    numGivenPermissions
   });
 
   return (
diff --git a/app/src/features/groups/Permissions.tsx b/app/src/features/groups/Permissions.tsx
index acbd853a..0d595c9f 100644
--- a/app/src/features/groups/Permissions.tsx
+++ b/app/src/features/groups/Permissions.tsx
@@ -1,6 +1,9 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import styled from "styled-components";
 import Checkbox from "@components/Checkbox";
+import { useSocket } from "@hooks/useSocket";
+import { useParams } from "react-router-dom";
+import { useGroupInfo } from "./hooks/useGroupInfo";
 
 const Container = styled.div`
   display: flex;
@@ -16,7 +19,6 @@ const P = styled.p`
 
 const PermissionRow = styled.div`
   display: flex;
-
   align-items: center;
   padding: 0.75rem;
 `;
@@ -26,55 +28,62 @@ const PermissionText = styled.span`
   font-size: 0.875rem;
 `;
 
-interface Permission {
-  id: string;
-  label: string;
-  enabled: boolean;
+interface PermissionsState {
+  [key: string]: boolean;
 }
 
-//TODO: Integrate with backend
-function Permissions() {
-  const [permissions, setPermissions] = useState<Permission[]>([
-    {
-      id: "post",
-      label: "Send messages",
-      enabled: false,
-    },
-    {
-      id: "vidoe",
-      label: "Download video messages",
-      enabled: false,
-    },
-    {
-      id: "audio",
-      label: "Download audio messages",
-      enabled: false,
-    },
-  ]);
+const Permissions = () => {
+  const { group, isCurrUserAdmin } = useGroupInfo();
+  const { chatId } = useParams<{ chatId: string }>();
+
+  const [permissions, setPermissions] = useState<PermissionsState>({
+    post: group?.messagingPermission!,
+    video: group?.downloadingPermission!,
+    audio: false
+  });
+
+  const { setPermission: socketSetPermission } = useSocket();
+
+  const togglePermission = useCallback((id: string) => {
+    setPermissions((prev) => {
+      const isEnabled = !prev[id];
 
-  const togglePermission = (id: string) => {
-    setPermissions(
-      permissions.map((perm) =>
-        perm.id === id ? { ...perm, enabled: !perm.enabled } : perm
-      )
-    );
+      console.log(id, isEnabled);
+
+      if (id === "post") {
+        socketSetPermission({
+          chatId: chatId!,
+          type: "post",
+          who: isEnabled ? "everyone" : "admins"
+        });
+      }
+
+      return { ...prev, [id]: isEnabled };
+    });
+  }, []);
+
+  const permissionLabels: { [key: string]: string } = {
+    post: "Send messages",
+    video: "Download video messages",
+    audio: "Download audio messages"
   };
 
   return (
     <Container>
       <P>What can members of this chat do?</P>
-      {permissions.map((permission) => (
-        <PermissionRow key={permission.id}>
+      {Object.entries(permissionLabels).map(([id, label]) => (
+        <PermissionRow key={id}>
           <Checkbox
-            checked={permission.enabled}
-            onChange={() => togglePermission(permission.id)}
-            data-testid={`permission-${permission.id}`}
+            checked={permissions[id]}
+            onChange={() => togglePermission(id)}
+            data-testid={`permission-${id}`}
+            disabled={!isCurrUserAdmin}
           />
-          <PermissionText>{permission.label}</PermissionText>
+          <PermissionText>{label}</PermissionText>
         </PermissionRow>
       ))}
     </Container>
   );
-}
+};
 
 export default Permissions;
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
index 808d4090..c9f1869c 100644
--- a/app/src/features/groups/data/settings.ts
+++ b/app/src/features/groups/data/settings.ts
@@ -10,6 +10,7 @@ type SettingsProps = {
   chatId: string;
   chatType: string;
   backView: sideBarPages;
+  numGivenPermissions: number;
   leaveGroup: (params: { chatId: string }) => void;
   setIsRightSideBarOpen: (value: boolean) => void;
   resetRightSideBar: () => { type: string };
@@ -25,6 +26,7 @@ const getSettings = ({
   setIsRightSideBarOpen,
   resetRightSideBar,
   backView,
+  numGivenPermissions
 }: SettingsProps) => [
   {
     testid: "group-type",
@@ -35,9 +37,9 @@ const getSettings = ({
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.GROUP_TYPE,
-          data: { type: "right", backView },
+          data: { type: "right", backView }
         })
-      ),
+      )
   },
   {
     testid: "admins",
@@ -48,9 +50,9 @@ const getSettings = ({
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.ADMINS,
-          data: { type: "right", backView },
+          data: { type: "right", backView }
         })
-      ),
+      )
   },
   {
     testid: "members",
@@ -61,22 +63,22 @@ const getSettings = ({
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.MEMBERS,
-          data: { type: "right", backView },
+          data: { type: "right", backView }
         })
-      ),
+      )
   },
   {
     testid: "permissions",
     icon: "Members" as iconStrings,
     title: "Permissions",
-    subtitle: "13/13",
+    subtitle: `${numGivenPermissions}/3`,
     onClick: () =>
       dispatch(
         updateSideBarView({
           redirect: sideBarPages.PERMISSIONS,
-          data: { type: "right", backView },
+          data: { type: "right", backView }
         })
-      ),
+      )
   },
   {
     testid: "leave-group-button",
@@ -87,8 +89,8 @@ const getSettings = ({
       leaveGroup({ chatId });
       setIsRightSideBarOpen(false);
       dispatch(resetRightSideBar());
-    },
-  },
+    }
+  }
 ];
 
 export { getSettings };
diff --git a/app/src/features/groups/hooks/useGroupInfo.ts b/app/src/features/groups/hooks/useGroupInfo.ts
index cadc17fd..b2203ffb 100644
--- a/app/src/features/groups/hooks/useGroupInfo.ts
+++ b/app/src/features/groups/hooks/useGroupInfo.ts
@@ -23,13 +23,12 @@ function useGroupInfo() {
           return user
             ? {
                 ...user,
-                role: groupMember.Role,
+                role: groupMember.Role
               }
             : null;
         })
         .filter((member) => member !== null);
 
-
       const groupAdmins = members?.filter((member) => member.role === "admin");
       setIsCurrUserAdmin(
         members?.some(
@@ -50,6 +49,8 @@ function useGroupInfo() {
     isCurrUserAdmin,
     chatId,
     chatType: group?.type,
+    numGivenPermissions:
+      Number(group?.messagingPermission) + Number(group?.downloadingPermission)
   };
 }
 
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 1424d0da..0622ed20 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -220,6 +220,10 @@ function SocketProvider({ children }: SocketProviderProps) {
       console.log("NEW MEMBERS ARE ADDED");
       queryClient.invalidateQueries({ queryKey: ["chats"] });
     });
+    socket.on("SET_PERMISSION_SERVER", ({ chatId, type, who }) => {
+      console.log("SET_PERMISSION_SERVER", chatId, type, who);
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
 
     socket.on("typing", (isTyping, message) =>
       handleIsTyping(dispatch, isTyping, message.chatId)
@@ -575,6 +579,34 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }
 
+  function setPermission({
+    chatId,
+    type,
+    who
+  }: {
+    chatId: string;
+    type: "post" | "download";
+    who: "admins" | "everyone";
+  }) {
+    if (isConnected && socket) {
+      socket.emit(
+        "SET_PERMISSION_CLIENT",
+        { chatId, type, who },
+        ({ success, message, error }: AckCreateGroup) => {
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot remove members: not connected to socket");
+    }
+  }
+
   return (
     <SocketContext.Provider
       value={{
@@ -591,7 +623,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         leaveGroup,
         removeMembers,
         acceptCall,
-        createVoiceCall
+        createVoiceCall,
+        setPermission
       }}
     >
       {children}
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index 3197922c..c3475983 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -21,6 +21,8 @@ interface DetailedChatInterface extends Chat {
 
   encryptionKey?: string;
   initializationVector?: string;
+  messagingPermission?: boolean;
+  downloadingPermission?: boolean;
 }
 
 interface ChatsState {
@@ -30,7 +32,7 @@ interface ChatsState {
 
 const initialState: ChatsState = {
   chats: [],
-  members: [],
+  members: []
 };
 
 const chatsSlice = createSlice({
@@ -212,7 +214,7 @@ const chatsSlice = createSlice({
 
         state.chats[chatIndex] = {
           ...chat,
-          messages: [...filteredMessages, ...chat.messages],
+          messages: [...filteredMessages, ...chat.messages]
         };
       }
     },
@@ -296,8 +298,8 @@ const chatsSlice = createSlice({
       if (chat) {
         chat.photo = photo;
       }
-    },
-  },
+    }
+  }
 });
 
 export const {
@@ -317,7 +319,7 @@ export const {
   setChatIsBlocked,
   setMemberIsBlocked,
   setName,
-  setPhoto,
+  setPhoto
 } = chatsSlice.actions;
 export default chatsSlice.reducer;
 export type { DetailedChatInterface, ChatsState };
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index ce7e9598..1ebbe548 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -45,6 +45,15 @@ export interface SocketContextType {
     messageId: string;
     chatId: string;
   }) => void;
+  setPermission: ({
+    chatId,
+    type,
+    who
+  }: {
+    chatId: string;
+    type: "post" | "download";
+    who: "everyone" | "admins";
+  }) => void;
   leaveGroup: ({ chatId }: { chatId: string }) => void;
   createVoiceCall: ({ chatId }: { chatId: string }) => void;
   acceptCall: (callId: string | null) => void;

From af51cfbf30cac0ff0ab95684eab2a7406e17b418 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sat, 21 Dec 2024 13:54:16 +0200
Subject: [PATCH 117/136] fix: adjust sixing (#158)

fix: voice notes
---
 .../features/chats/audio/VoiceRecorder.tsx    | 23 ++++++++-----------
 app/src/features/chats/hooks/useChatInput.ts  |  3 ++-
 .../features/chats/media/FilePreviewItem.tsx  |  6 ++++-
 .../chats/media/MediaUploadComponent.tsx      | 23 +++++++++++--------
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
index c4000c75..1106f081 100644
--- a/app/src/features/chats/audio/VoiceRecorder.tsx
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -1,23 +1,20 @@
-import React, {
-  useRef,
-  useEffect,
-  useCallback,
-  useContext,
-} from "react";
+import React, { useRef, useEffect, useCallback, useContext } from "react";
 import RecordInput from "../SendButton";
 import { useUploadMedia } from "../media/hooks/useUploadMedia";
 import { useMessageSender } from "../hooks/useMessageSender";
 import { ChatInputContext } from "../ChatBox";
+import { useParams } from "react-router-dom";
 
 export type RecordingStates = "idle" | "recording" | "pause";
 
 const VoiceRecorder: React.FC = ({
-  recordingMimeType = "audio/webm",
+  recordingMimeType = "audio/webm"
 }: {
   recordingMimeType?: string;
 }) => {
   const mediaRecorder = useRef<MediaRecorder | null>(null);
   const audioChunks = useRef<Blob[]>([]);
+  const { chatId } = useParams<{ chatId: string }>();
   const { data: voiceNoteURL, mutate: uploadVoiceNote } = useUploadMedia();
 
   const { isRecording, setIsRecording, setError } =
@@ -31,7 +28,7 @@ const VoiceRecorder: React.FC = ({
         .getUserMedia({ audio: true })
         .then((stream) => {
           const recorder = new MediaRecorder(stream, {
-            mimeType: recordingMimeType,
+            mimeType: recordingMimeType
           });
           mediaRecorder.current = recorder;
 
@@ -76,13 +73,13 @@ const VoiceRecorder: React.FC = ({
   }, [setIsRecording]);
 
   const handleSendRecord = useCallback(() => {
-    if (isRecording === "pause") {
+    if (isRecording === "pause" && audioChunks.current.length) {
       const audioBlob = new Blob(audioChunks.current, {
-        type: recordingMimeType,
+        type: recordingMimeType
       });
       const file = new File([audioBlob], "recording.webm", {
         type: audioBlob.type,
-        lastModified: Date.now(),
+        lastModified: Date.now()
       });
       audioChunks.current = [];
       uploadVoiceNote(file);
@@ -91,9 +88,8 @@ const VoiceRecorder: React.FC = ({
 
   useEffect(() => {
     if (voiceNoteURL && isRecording === "pause") {
-      handleSendMessage("", voiceNoteURL);
+      handleSendMessage("", chatId, voiceNoteURL, "audio");
       setIsRecording("idle");
-      uploadVoiceNote(null);
     }
   }, [
     voiceNoteURL,
@@ -101,6 +97,7 @@ const VoiceRecorder: React.FC = ({
     handleSendMessage,
     setIsRecording,
     uploadVoiceNote,
+    chatId
   ]);
 
   return (
diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
index 8189435c..aade6945 100644
--- a/app/src/features/chats/hooks/useChatInput.ts
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -28,6 +28,7 @@ function useChatInput() {
     setIsEmojiSelectorOpen(false);
   };
   const handleSubmit = (e: Event, voiceNoteName = "") => {
+    console.log(voiceNoteName);
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;
@@ -57,7 +58,7 @@ function useChatInput() {
     sendGIF,
     sendSticker,
     handleSubmit,
-    handleCloseFilePreview,
+    handleCloseFilePreview
   };
 }
 
diff --git a/app/src/features/chats/media/FilePreviewItem.tsx b/app/src/features/chats/media/FilePreviewItem.tsx
index ddac6c8c..fbde2cce 100644
--- a/app/src/features/chats/media/FilePreviewItem.tsx
+++ b/app/src/features/chats/media/FilePreviewItem.tsx
@@ -13,6 +13,8 @@ const FileViewerContainer = styled.div`
   z-index: 7;
   min-width: fit-content;
   height: fit-content;
+  max-width: 200px;
+  max-height: 200px;
   padding: 4px;
   background: var(--color-secondary);
   border: 1px solid #e6e6e6;
@@ -66,11 +68,13 @@ function FilePreviewItem({ chatId }: { chatId: string | undefined }) {
           console.log("File uploaded successfully:", url);
           handleSendMessage(caption, chatId, url);
           setCaption("");
-          setFile(null);
         },
         onError: (error) => {
           console.error("Error uploading file:", error);
           alert("Failed to upload the file. Please try again.");
+        },
+        onSettled: () => {
+          setFile(null);
         }
       });
     } catch (error) {
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
index 1cccbddb..62693c8c 100644
--- a/app/src/features/chats/media/MediaUploadComponent.tsx
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -17,13 +17,16 @@ interface ChildProps {
 export default function MediaUploadComponent({
   file,
   setFile,
-  setIsFilePreviewOpen,
+  setIsFilePreviewOpen
 }: ChildProps) {
   const fileInput = useRef(null);
 
   const onAddFile = async (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && !file) {
+    console.log("file");
+    if (e.target.files) {
+      console.log("file", e.target.files[0]);
       setFile(e.target.files[0]);
+      event.target.value = "";
     }
 
     setIsFilePreviewOpen(true);
@@ -31,15 +34,15 @@ export default function MediaUploadComponent({
 
   return (
     <>
-      <input
-        type="file"
-        multiple={false}
-        ref={fileInput}
-        onChange={onAddFile}
-        style={{ display: "none" }}
-        data-testid="file-input"
-      />
       <InvisibleButton>
+        <input
+          type="file"
+          multiple={false}
+          ref={fileInput}
+          onChange={onAddFile}
+          style={{ display: "none" }}
+          data-testid="file-input"
+        />
         <Icon
           data-testid="upload-media-button"
           onClick={() => fileInput.current?.click()}

From 603c25938ab61b9a40b94f9acd665092a2c9dc10 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 14:14:06 +0200
Subject: [PATCH 118/136] fix media messaging bugs (#157)

* feat: ban user

* test: add testid

* feat: authorizarion and user roles

* fix: fix typo in unauthorized

* fix: fix sending voice recording

* fix: fix typo in Error interface

* fix: fix typo in Error interface

* fix: send voice recording
---
 .../authentication/login/services/apiLogin.ts |  2 +
 app/src/features/chats/ChatBody.tsx           |  2 +
 app/src/features/chats/ChatInput.tsx          |  4 +-
 app/src/features/chats/MessageContent.tsx     |  5 +++
 app/src/features/chats/Topbar.tsx             | 41 +++++++++++--------
 .../features/chats/audio/VoiceRecorder.tsx    | 24 ++++++++++-
 .../chats/contexts/MessageProvider.tsx        | 11 ++++-
 app/src/features/chats/hooks/useChatInput.ts  |  2 +-
 .../chats/media/hooks/useUploadMedia.tsx      |  3 ++
 .../chats/services/apiFetchNextPage.ts        |  4 --
 app/src/types/messages.ts                     |  1 +
 app/src/utils/helpers.ts                      |  2 +-
 12 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/app/src/features/authentication/login/services/apiLogin.ts b/app/src/features/authentication/login/services/apiLogin.ts
index bef7de74..93975f0d 100644
--- a/app/src/features/authentication/login/services/apiLogin.ts
+++ b/app/src/features/authentication/login/services/apiLogin.ts
@@ -1,5 +1,6 @@
 import { API_URL } from "@constants";
 import { User } from "../LoginForm/LoginForm";
+import toast from "react-hot-toast";
 
 export async function login(user: User) {
   const res = await fetch(`${API_URL}/auth/login`, {
@@ -15,6 +16,7 @@ export async function login(user: User) {
 
   const data = await res.json();
   if (data.status !== "success") {
+    toast.error(data.message);
     throw new Error(data.message);
   }
 
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 5fd1969f..9a09fb76 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -81,6 +81,7 @@ function ChatBody() {
               chatType={chat?.type as "private" | "group" | "channel"}
               sender={members.find((member) => member._id === data.senderId)}
               numberOfMembers={chat?.numberOfMembers}
+              isAppropriate={data.isAppropriate}
             >
               <Message key={data._id} />
             </MessageProvider>
@@ -96,6 +97,7 @@ function ChatBody() {
               chatType="channel"
               sender={members.find((member) => member._id === data.senderId)}
               numberOfMembers={chat?.numberOfMembers}
+              isAppropriate={data.isAppropriate}
             >
               <Message key={data._id} />
             </MessageProvider>
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index cc68a711..aa139d0e 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -80,7 +80,7 @@ function ChatInput() {
     isEmojiSelectorOpen,
     handleSubmit,
     showForwardUsers,
-    handleClose
+    handleClose,
   } = useContext(ChatInputContext);
 
   const chats = useAppSelector((state) => state.chats.chats);
@@ -133,7 +133,7 @@ function ChatInput() {
                   data-testid="send-button"
                 />
               ) : (
-                <VoiceRecorder />
+                <VoiceRecorder chatId={chatId} />
               )}
             </Input>
           ) : (
diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
index ce977bc8..873a0d1d 100644
--- a/app/src/features/chats/MessageContent.tsx
+++ b/app/src/features/chats/MessageContent.tsx
@@ -36,6 +36,7 @@ function MessageContent() {
     media,
     contentType,
     chatType,
+    isAppropriate,
   } = useMessageContext();
 
   const { searchTerm, searchResults } = useAppSelector((state) => state.search);
@@ -49,6 +50,10 @@ function MessageContent() {
     media && (contentType === "GIF" || contentType === "sticker");
 
   const isFile = media && !(contentType === "GIF" || contentType === "sticker");
+  const filteredContent =
+    (chatType === "group" || chatType === "channel") && !isAppropriate
+      ? content
+      : "🚫️ This mesaage has unappropriate content";
 
   return (
     <Container>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 768adcb5..90cfa423 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
@@ -123,6 +124,7 @@ function Topbar() {
   const { chatId } = useParams<{ chatId: string }>();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const chats = useAppSelector((state) => state.chats.chats);
+  const dispatch = useAppDispatch();
   const { activeThread } = useAppSelector((state) => state.channelsThreads);
   const [isSearching, setIsSearching] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -153,28 +155,31 @@ function Topbar() {
   const { removeFromBlockList } = useBlock();
 
   const { setIsRightSideBarOpen } = useRightSideBarContext();
-  const dispatch = useAppDispatch();
 
-  const handleOpenRightSideBar = useCallback(() => {
-    if (!chat) return;
-    if (chat?.type === "private") setIsRightSideBarOpen(false);
-    else {
-      dispatch(
-        updateSideBarView({
-          redirect:
-            chat?.type === "group"
-              ? sideBarPages.GROUP_INFO
-              : sideBarPages.CHANNEL_INFO,
-          data: { type: "right" }
-        })
-      );
-    }
-  }, [chat, dispatch, setIsRightSideBarOpen]);
+  const cachedOpenRightSideBar = useCallback(
+    function handleOpenRightSideBar() {
+      if (!chat) return;
+      if (chat?.type === "private") setIsRightSideBarOpen(false);
+      else {
+        dispatch(
+          updateSideBarView({
+            redirect:
+              chat?.type === "group"
+                ? sideBarPages.GROUP_INFO
+                : sideBarPages.CHANNEL_INFO,
+            data: { type: "right" }
+          })
+        );
+      }
+    },
+    [chat, dispatch, setIsRightSideBarOpen]
+  );
 
   useEffect(() => {
     if (!chatId) return;
-    handleOpenRightSideBar();
-  }, [chatId, handleOpenRightSideBar]);
+    cachedOpenRightSideBar();
+  }, [chatId, chat, cachedOpenRightSideBar]);
+
   let image;
   let lastSeen;
 
diff --git a/app/src/features/chats/audio/VoiceRecorder.tsx b/app/src/features/chats/audio/VoiceRecorder.tsx
index 1106f081..fe34f6eb 100644
--- a/app/src/features/chats/audio/VoiceRecorder.tsx
+++ b/app/src/features/chats/audio/VoiceRecorder.tsx
@@ -82,9 +82,29 @@ const VoiceRecorder: React.FC = ({
         lastModified: Date.now()
       });
       audioChunks.current = [];
-      uploadVoiceNote(file);
+      try {
+        uploadVoiceNote(file, {
+          onSuccess: (url) => {
+            console.log("File uploaded successfully:", url);
+            handleSendMessage("", chatId, url);
+          },
+          onError: (error) => {
+            console.error("Error uploading file:", error);
+          }
+        });
+      } catch (error) {
+        console.error("Unexpected error while sending file:", error);
+      }
+      setIsRecording("idle");
     }
-  }, [isRecording, recordingMimeType, uploadVoiceNote]);
+  }, [
+    isRecording,
+    recordingMimeType,
+    setIsRecording,
+    uploadVoiceNote,
+    handleSendMessage,
+    chatId
+  ]);
 
   useEffect(() => {
     if (voiceNoteURL && isRecording === "pause") {
diff --git a/app/src/features/chats/contexts/MessageProvider.tsx b/app/src/features/chats/contexts/MessageProvider.tsx
index af1983f4..65894c02 100644
--- a/app/src/features/chats/contexts/MessageProvider.tsx
+++ b/app/src/features/chats/contexts/MessageProvider.tsx
@@ -18,6 +18,7 @@ type ProviderProps = {
   chatType: string;
   sender?: Member;
   numberOfMembers?: number;
+  isAppropriate: boolean;
 };
 
 function MessageProvider({
@@ -26,13 +27,21 @@ function MessageProvider({
   chatType,
   sender,
   numberOfMembers,
+  isAppropriate,
 }: ProviderProps) {
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const isMine = userId === data.senderId;
 
   return (
     <MessageContext.Provider
-      value={{ ...data, isMine, chatType, sender, numberOfMembers }}
+      value={{
+        ...data,
+        isMine,
+        chatType,
+        sender,
+        numberOfMembers,
+        isAppropriate,
+      }}
     >
       {children}
     </MessageContext.Provider>
diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
index aade6945..e85de81a 100644
--- a/app/src/features/chats/hooks/useChatInput.ts
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -32,7 +32,7 @@ function useChatInput() {
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;
-    handleSendMessage(input, chatId, voiceNoteName);
+    handleSendMessage(input, chatId, voiceNoteName, "audio");
     dispatch(clearActiveMessage());
     setInput("");
   };
diff --git a/app/src/features/chats/media/hooks/useUploadMedia.tsx b/app/src/features/chats/media/hooks/useUploadMedia.tsx
index 59b44545..c33afd6a 100644
--- a/app/src/features/chats/media/hooks/useUploadMedia.tsx
+++ b/app/src/features/chats/media/hooks/useUploadMedia.tsx
@@ -1,5 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { uploadFile } from "../services/uploadfileHandler";
+import toast from "react-hot-toast";
 
 export function useUploadMedia() {
   const { mutate, isPending, error, data } = useMutation({
@@ -7,9 +8,11 @@ export function useUploadMedia() {
     onError: (error) => {
       const errorMessage =
         error instanceof Error ? error.message : "An unknown error occurred";
+      toast.error("Error uploading file: " + errorMessage);
       console.error("Error uploading file:", errorMessage);
     },
     onSuccess: (data) => {
+      toast.success("File uploaded successfully");
       console.log("File uploaded successfully:", data);
     },
   });
diff --git a/app/src/features/chats/services/apiFetchNextPage.ts b/app/src/features/chats/services/apiFetchNextPage.ts
index eeb00466..a2c2fba1 100644
--- a/app/src/features/chats/services/apiFetchNextPage.ts
+++ b/app/src/features/chats/services/apiFetchNextPage.ts
@@ -25,10 +25,6 @@ async function apiFetchNextPage({
     throw new Error(data.message);
   }
 
-  if (data.status !== "success") {
-    throw new Error(data.message);
-  }
-
   return { messages: data.data.messages, nextPage: data.data.nextPage };
 }
 
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 767a1edd..8a4329a2 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -30,6 +30,7 @@ export interface MessageInterface {
 
   parentMessageId: string | null;
   status: MessageStatus;
+  isAppropriate: boolean;
 
   media?: string;
 
diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts
index 652cdc2f..91150cad 100644
--- a/app/src/utils/helpers.ts
+++ b/app/src/utils/helpers.ts
@@ -24,7 +24,7 @@ function getElapsedTime(timestamp: string): string {
   } else if (minutes > 0) {
     return `${minutes}m`;
   } else {
-    return `${seconds}s`;
+    return `${Math.max(seconds, 1)}s`;
   }
 }
 

From d67900957c2531f46ceace65c371b34863ee45df Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 15:36:39 +0200
Subject: [PATCH 119/136] Fix voice recorder (#159)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* fix: voice recoder

---------

Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/features/admin/components/FilteredList.tsx    |  0
 app/src/features/chats/ChatInput.tsx                  |  4 ++--
 app/src/features/chats/ChatInputIcons.tsx             | 10 ++++++++--
 app/src/features/chats/ChatItem.tsx                   |  4 ++--
 app/src/features/chats/Topbar.tsx                     |  1 -
 app/src/features/chats/media/MediaUploadComponent.tsx |  2 +-
 6 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 app/src/features/admin/components/FilteredList.tsx

diff --git a/app/src/features/admin/components/FilteredList.tsx b/app/src/features/admin/components/FilteredList.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index aa139d0e..cc68a711 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -80,7 +80,7 @@ function ChatInput() {
     isEmojiSelectorOpen,
     handleSubmit,
     showForwardUsers,
-    handleClose,
+    handleClose
   } = useContext(ChatInputContext);
 
   const chats = useAppSelector((state) => state.chats.chats);
@@ -133,7 +133,7 @@ function ChatInput() {
                   data-testid="send-button"
                 />
               ) : (
-                <VoiceRecorder chatId={chatId} />
+                <VoiceRecorder />
               )}
             </Input>
           ) : (
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
index 4d234f58..85c5ca6e 100644
--- a/app/src/features/chats/ChatInputIcons.tsx
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -20,7 +20,7 @@ function ChatInputIcons() {
     setInput,
     file,
     setFile,
-    setIsFilePreviewOpen,
+    setIsFilePreviewOpen
   } = useContext(ChatInputContext);
 
   const toggleShowEmojies = () => {
@@ -28,11 +28,17 @@ function ChatInputIcons() {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    setIsEmojiSelectorOpen(false);
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e as unknown as Event);
     }
   };
+  const handleSetFile = (file: File) => {
+    setIsEmojiSelectorOpen(false);
+    setFile(file);
+    setIsFilePreviewOpen(true);
+  };
 
   return (
     <>
@@ -50,7 +56,7 @@ function ChatInputIcons() {
 
       <MediaUploadComponent
         file={file}
-        setFile={setFile}
+        setFile={handleSetFile}
         setIsFilePreviewOpen={setIsFilePreviewOpen}
       />
     </>
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 960b6ebf..246a515e 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -59,7 +59,7 @@ type ChatItemProps = {
 
 const ChatItem = ({
   chat: { _id, lastMessage, name, photo },
-  onClick,
+  onClick
 }: ChatItemProps) => {
   const navigate = useNavigate();
 
@@ -86,7 +86,7 @@ const ChatItem = ({
           <Timestamp data-testid="chat-timestamp">
             {new Date(timestamp).toLocaleTimeString("en-US", {
               hour: "2-digit",
-              minute: "2-digit",
+              minute: "2-digit"
             }) || "No messages"}
           </Timestamp>
         </ChatHeader>
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 90cfa423..fe6c4599 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react";
-import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
index 62693c8c..be0e1e3e 100644
--- a/app/src/features/chats/media/MediaUploadComponent.tsx
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -10,7 +10,7 @@ const InvisibleButton = styled.div`
 `;
 interface ChildProps {
   file: File | null;
-  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  setFile: (file: File) => void;
   setIsFilePreviewOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 

From 34e286040c321316d103c5a03797b34b4fb04d27 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 15:54:13 +0200
Subject: [PATCH 120/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Admin=20can=20d?=
 =?UTF-8?q?elete=20group=20for=20all=20members=20(#160)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* ✨ (groups): Admin can delete group for all members

---------

Co-authored-by: ahmedHamdiy <ah2882003@gmail.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/components/Modal.tsx                  |  13 +-
 .../groups/ConfirmDeleteGroupModal.tsx        | 116 ++++++++++++++++++
 app/src/features/groups/EditGroupInfo.tsx     |  28 +++--
 app/src/features/groups/data/settings.ts      |  24 ++--
 app/src/sockets/SocketProvider.tsx            |  33 ++++-
 app/src/types/socket.ts                       |   1 +
 6 files changed, 184 insertions(+), 31 deletions(-)
 create mode 100644 app/src/features/groups/ConfirmDeleteGroupModal.tsx

diff --git a/app/src/components/Modal.tsx b/app/src/components/Modal.tsx
index 74b84e1d..e2bbee32 100644
--- a/app/src/components/Modal.tsx
+++ b/app/src/components/Modal.tsx
@@ -20,17 +20,20 @@ const ModalContainer = styled.div`
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  text-align: center;
   width: 400px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  gap: 1rem;
 `;
 
 const ModalTitle = styled.h2`
-  margin-bottom: 1rem;
   color: var(--color-text);
 `;
 
 const ModalMessage = styled.p`
-  margin-bottom: 2rem;
   color: var(--color-text-secondary);
 `;
 
@@ -53,7 +56,7 @@ type ModalProps = {
   isOpen: boolean;
   onClose: () => void;
   title: string;
-  message: string;
+  message?: string;
   children: React.ReactNode;
 };
 
@@ -75,7 +78,7 @@ function Modal({ onClose, isOpen, title, message, children }: ModalProps) {
           &times;
         </CloseButton>
         <ModalTitle>{title}</ModalTitle>
-        <ModalMessage>{message}</ModalMessage>
+        {message && <ModalMessage>{message}</ModalMessage>}
         {children}
       </ModalContainer>
     </ModalOverlay>
diff --git a/app/src/features/groups/ConfirmDeleteGroupModal.tsx b/app/src/features/groups/ConfirmDeleteGroupModal.tsx
new file mode 100644
index 00000000..8c9f17aa
--- /dev/null
+++ b/app/src/features/groups/ConfirmDeleteGroupModal.tsx
@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+
+import Checkbox from "@components/Checkbox";
+import Modal from "@components/Modal";
+
+import { useSocket } from "@hooks/useSocket";
+import { useRightSideBarContext } from "./contexts/RightSideBarProvider";
+import { resetRightSideBar } from "@state/side-bar/sideBar";
+import { useGroupInfo } from "./hooks/useGroupInfo";
+
+const Buttons = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+`;
+
+const CheckboxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  cursor: pointer;
+
+  width: 100%;
+  padding: 0.5rem 1rem;
+
+  border-radius: var(--border-radius-default-tiny);
+
+  & span {
+    color: var(--color-text);
+  }
+
+  &:hover {
+    background-color: var(--color-item-hover);
+  }
+`;
+
+const Button = styled.button<{ $type?: string }>`
+  border: none;
+  border-radius: var(--border-radius-default-tiny);
+  padding: 0.5rem 1rem;
+
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+  font-size: 1rem;
+
+  background-color: transparent;
+  color: ${({ $type }) =>
+    $type === "error" ? "var(--color-error)" : "var(--accent-color)"};
+
+  &:hover {
+    background-color: ${({ $type }) =>
+      $type === "error"
+        ? "var(--color-error-shade)"
+        : "var(--color-item-hover)"};
+  }
+`;
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+function ConfirmDeleteGroupModal({ isOpen, onClose }: ModalProps) {
+  const [checked, setChecked] = useState(false);
+  const { leaveGroup, deleteGroup } = useSocket();
+  const { setIsRightSideBarOpen } = useRightSideBarContext();
+  const dispatch = useDispatch();
+  const { chatId, isCurrUserAdmin } = useGroupInfo();
+
+  function handleDelete() {
+    if (checked) {
+      deleteGroup({ chatId: chatId! });
+    } else {
+      leaveGroup({ chatId: chatId! });
+    }
+    dispatch(resetRightSideBar());
+    setIsRightSideBarOpen(false);
+  }
+
+  return (
+    <Modal
+      title="Delete Group"
+      onClose={onClose}
+      isOpen={isOpen}
+      message="Are you sure you want to delete and leave this group?"
+    >
+      {isCurrUserAdmin && (
+        <CheckboxContainer onClick={() => setChecked((prev) => !prev)}>
+          <Checkbox
+            data-testid="delete-for-all-checkbox"
+            // onChange={() => setChecked((prev) => !prev)}
+            checked={checked}
+          />
+          <span>delete for all users</span>
+        </CheckboxContainer>
+      )}
+      <Buttons>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          data-testid="delete-button"
+          $type="error"
+          onClick={handleDelete}
+        >
+          Delete
+        </Button>
+      </Buttons>
+    </Modal>
+  );
+}
+
+export default ConfirmDeleteGroupModal;
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index 827a9161..7a8882e4 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -1,10 +1,11 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
+
 import SettingsRow from "./SettingsRow";
-import { useDispatch } from "react-redux";
-import { resetRightSideBar } from "@state/side-bar/sideBar";
+import ConfirmDeleteGroupModal from "./ConfirmDeleteGroupModal";
 import { useGroupInfo } from "./hooks/useGroupInfo";
-import { useSocket } from "@hooks/useSocket";
-import { useRightSideBarContext } from "./contexts/RightSideBarProvider";
+
 import { getSettings } from "./data/settings";
 import { sideBarPages } from "types/sideBar";
 
@@ -19,13 +20,12 @@ function EditGroupInfo() {
   const {
     admins,
     groupMembers,
-    chatId,
     isPending,
     chatType,
     numGivenPermissions
   } = useGroupInfo();
-  const { leaveGroup } = useSocket();
-  const { setIsRightSideBarOpen } = useRightSideBarContext();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   if (isPending) return null;
 
@@ -38,17 +38,21 @@ function EditGroupInfo() {
     dispatch,
     admins,
     groupMembers,
-    chatId: chatId!,
-    leaveGroup,
-    setIsRightSideBarOpen,
-    resetRightSideBar,
     chatType: chatType!,
     backView,
-    numGivenPermissions
+    numGivenPermissions,
+    setIsModalOpen
   });
 
   return (
     <Container data-testid="group-settings-container">
+      {isModalOpen && (
+        <ConfirmDeleteGroupModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+
+        />
+      )}
       {settings.map((setting, index) => (
         <SettingsRow
           key={index}
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
index c9f1869c..1ff54532 100644
--- a/app/src/features/groups/data/settings.ts
+++ b/app/src/features/groups/data/settings.ts
@@ -7,13 +7,12 @@ type SettingsProps = {
   dispatch: Dispatch;
   admins: any[];
   groupMembers: any[];
-  chatId: string;
+
   chatType: string;
   backView: sideBarPages;
   numGivenPermissions: number;
-  leaveGroup: (params: { chatId: string }) => void;
-  setIsRightSideBarOpen: (value: boolean) => void;
-  resetRightSideBar: () => { type: string };
+
+  setIsModalOpen: (value: boolean) => void;
 };
 
 const getSettings = ({
@@ -21,12 +20,10 @@ const getSettings = ({
   dispatch,
   admins,
   groupMembers,
-  chatId,
-  leaveGroup,
-  setIsRightSideBarOpen,
-  resetRightSideBar,
+
   backView,
-  numGivenPermissions
+  numGivenPermissions,
+  setIsModalOpen
 }: SettingsProps) => [
   {
     testid: "group-type",
@@ -58,7 +55,7 @@ const getSettings = ({
     testid: "members",
     icon: "Members" as iconStrings,
     title: chatType === "group" ? "Members" : "Subscribers",
-    subtitle: groupMembers.length,
+    subtitle: groupMembers?.length,
     onClick: () =>
       dispatch(
         updateSideBarView({
@@ -86,9 +83,10 @@ const getSettings = ({
     title: `Delete and Leave ${chatType}`,
     subtitle: "",
     onClick: () => {
-      leaveGroup({ chatId });
-      setIsRightSideBarOpen(false);
-      dispatch(resetRightSideBar());
+      setIsModalOpen(true);
+      // leaveGroup({ chatId });
+      // setIsRightSideBarOpen(false);
+      // dispatch(resetRightSideBar());
     }
   }
 ];
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 0622ed20..ce89515b 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -254,6 +254,14 @@ function SocketProvider({ children }: SocketProviderProps) {
       }
     );
 
+    socket.on(
+      "DELETE_GROUP_CHANNEL_SERVER",
+      ({ chatId }: { chatId: string }) => {
+        console.log("DELETE_GROUP_CHANNEL_SERVER", chatId);
+        queryClient.invalidateQueries({ queryKey: ["chats"] });
+      }
+    );
+
     socket.on("REMOVE_MEMBERS_SERVER", ({ memberId }: { memberId: string }) => {
       console.log("REMOVE_MEMBERS_SERVER");
 
@@ -607,6 +615,28 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }
 
+  function deleteGroup({ chatId }: { chatId: string }) {
+    if (isConnected && socket) {
+      socket.emit(
+        "DELETE_GROUP_CHANNEL_CLIENT",
+        { chatId },
+        ({ success, message, error }: AckCreateGroup) => {
+          console.log(message, error, success);
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+            navigate("/");
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot delete group: not connected to socket server");
+    }
+  }
+
   return (
     <SocketContext.Provider
       value={{
@@ -624,7 +654,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         removeMembers,
         acceptCall,
         createVoiceCall,
-        setPermission
+        setPermission,
+        deleteGroup
       }}
     >
       {children}
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 1ebbe548..c6c9d3ab 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -55,6 +55,7 @@ export interface SocketContextType {
     who: "everyone" | "admins";
   }) => void;
   leaveGroup: ({ chatId }: { chatId: string }) => void;
+  deleteGroup: ({ chatId }: { chatId: string }) => void;
   createVoiceCall: ({ chatId }: { chatId: string }) => void;
   acceptCall: (callId: string | null) => void;
 }

From 85e6105dd2f8569df746787fe7e216754fed3ad3 Mon Sep 17 00:00:00 2001
From: amir-kedis <amir.kedis@gmail.com>
Date: Sat, 21 Dec 2024 18:19:53 +0200
Subject: [PATCH 121/136] fix: search not getting results in filters

---
 .../features/search/components/SearchTab.tsx  | 31 ++++++++--------
 .../components/result-items/FileResult.tsx    |  4 +--
 .../components/result-items/MessageResult.tsx |  6 ++--
 .../search/data/tabs-components-map.tsx       | 36 +++++++++----------
 .../features/search/hooks/useSearchPrivate.ts | 10 +++---
 .../search/utils/searchTabsHelpers.tsx        | 15 ++++----
 app/src/state/messages/search.ts              | 10 +++---
 7 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/app/src/features/search/components/SearchTab.tsx b/app/src/features/search/components/SearchTab.tsx
index c88659c9..af6d0cee 100644
--- a/app/src/features/search/components/SearchTab.tsx
+++ b/app/src/features/search/components/SearchTab.tsx
@@ -7,20 +7,20 @@ import NoResultsFound from "./NoResultsFound";
 import {
   hasResults,
   renderGlobalResults,
-  renderMessageResults,
+  renderMessageResults
 } from "../utils/searchTabsHelpers";
 import ChannelResult from "./result-items/ChannelResult";
 import {
   SearchResultChannel,
   SearchResultGroup,
   SearchResultMessage,
-  SearchResultUser,
+  SearchResultUser
 } from "../types/search";
 import { useSearchPrivate } from "../hooks/useSearchPrivate";
 
 const SearchTab: React.FC = () => {
   const { searchTerm, selectedTab } = useSelector(
-    (state: RootState) => state.globalSearch,
+    (state: RootState) => state.globalSearch
   );
 
   const currentTab = SEARCH_TABS.find((tab) => tab.title === selectedTab);
@@ -30,16 +30,16 @@ const SearchTab: React.FC = () => {
       query: searchTerm,
       filter: currentTab?.filter || [],
       searchSpace: currentTab?.searchSpace || [],
-      isGlobalSearch: currentTab?.isGlobalSearch || false,
+      isGlobalSearch: currentTab?.isGlobalSearch || false
     }),
-    [searchTerm, currentTab],
+    [searchTerm, currentTab]
   );
 
   const { data, isLoading, error } = useSearch(searchRequest);
   const {
     searchResults: privateSearchResults,
     isLoading: isPrivateLoading,
-    error: privateError,
+    error: privateError
   } = useSearchPrivate(searchRequest);
 
   if (isLoading || isPrivateLoading)
@@ -62,16 +62,17 @@ const SearchTab: React.FC = () => {
 
   return (
     <div style={{ height: "100%" }}>
-      {renderMessageResults(
-        privateSearchResults as SearchResultMessage[],
-        ["text", "image", "video", "GIF", "sticker", "link", "file", "audio"],
-        searchTerm,
-      )}
+      {selectedTab !== "Channels" &&
+        renderMessageResults(
+          privateSearchResults as SearchResultMessage[],
+          ["text", "image", "video", "GIF", "sticker", "link", "file", "audio"],
+          searchTerm
+        )}
       {renderMessageResults(data!.searchResult, ["text"], searchTerm)}
       {renderMessageResults(
         data!.searchResult,
         ["image", "video", "GIF", "sticker"],
-        searchTerm,
+        searchTerm
       )}
       {renderMessageResults(data!.searchResult, ["link"], searchTerm)}
       {renderMessageResults(data!.searchResult, ["file"], searchTerm)}
@@ -89,7 +90,7 @@ const SearchTab: React.FC = () => {
             username={group?.name}
             subscribers={group?.numberOfMembers}
           />
-        ),
+        )
       )}
 
       {renderGlobalResults<SearchResultChannel>(
@@ -104,7 +105,7 @@ const SearchTab: React.FC = () => {
             username={channel?.name}
             subscribers={channel?.numberOfMembers}
           />
-        ),
+        )
       )}
 
       {renderGlobalResults<SearchResultUser>(
@@ -118,7 +119,7 @@ const SearchTab: React.FC = () => {
             image={user?.photo}
             username={user?.username}
           />
-        ),
+        )
       )}
     </div>
   );
diff --git a/app/src/features/search/components/result-items/FileResult.tsx b/app/src/features/search/components/result-items/FileResult.tsx
index e6e51450..de863f0a 100644
--- a/app/src/features/search/components/result-items/FileResult.tsx
+++ b/app/src/features/search/components/result-items/FileResult.tsx
@@ -51,7 +51,7 @@ const FileResult: React.FC<FileResultProps> = ({
   image,
   size,
   date,
-  chatId,
+  chatId
 }) => {
   const navigate = useNavigate();
   const handleItemClick = () => {
@@ -76,7 +76,7 @@ const FileResult: React.FC<FileResultProps> = ({
               day: "numeric",
               year: "numeric",
               hour: "numeric",
-              minute: "numeric",
+              minute: "numeric"
             })) ||
             ""}
         </Preview>
diff --git a/app/src/features/search/components/result-items/MessageResult.tsx b/app/src/features/search/components/result-items/MessageResult.tsx
index 99027436..5665050a 100644
--- a/app/src/features/search/components/result-items/MessageResult.tsx
+++ b/app/src/features/search/components/result-items/MessageResult.tsx
@@ -81,7 +81,7 @@ const MessageResult: React.FC<MessageResultProps> = ({
   image,
   media,
   link,
-  chatId,
+  chatId
 }) => {
   const navigate = useNavigate();
 
@@ -93,7 +93,7 @@ const MessageResult: React.FC<MessageResultProps> = ({
         <Highlight key={index}>{part}</Highlight>
       ) : (
         part
-      ),
+      )
     );
   };
 
@@ -114,7 +114,7 @@ const MessageResult: React.FC<MessageResultProps> = ({
               ? new Date(date).toLocaleDateString("en-US", {
                   month: "short",
                   day: "numeric",
-                  year: "numeric",
+                  year: "numeric"
                 })
               : ""}
           </DateSpan>
diff --git a/app/src/features/search/data/tabs-components-map.tsx b/app/src/features/search/data/tabs-components-map.tsx
index eb9704c0..e5bd305d 100644
--- a/app/src/features/search/data/tabs-components-map.tsx
+++ b/app/src/features/search/data/tabs-components-map.tsx
@@ -12,50 +12,50 @@ export const SEARCH_TABS: SearchTabType[] = [
     component: () => <SearchTab />,
     filter: ["text"],
     searchSpace: ["groups", "channels"],
-    isGlobalSearch: true,
+    isGlobalSearch: true
   },
   {
-    title: "Channnels",
+    title: "Channels",
     component: () => <SearchTab />,
     filter: ["text"],
     searchSpace: ["channels", "groups"],
-    isGlobalSearch: true,
+    isGlobalSearch: true
   },
   {
     title: "Media",
     component: () => <SearchTab />,
-    filter: ["text", "image", "video", "GIF", "sticker"],
+    filter: ["image", "video", "GIF", "sticker"],
     searchSpace: ["groups", "channels"],
-    isGlobalSearch: false,
+    isGlobalSearch: false
   },
   {
     title: "Links",
     component: () => <SearchTab />,
     filter: ["link"],
     searchSpace: ["groups", "channels"],
-    isGlobalSearch: false,
+    isGlobalSearch: false
   },
   {
     title: "Files",
     component: () => <SearchTab />,
     filter: ["file"],
     searchSpace: ["groups", "channels"],
-    isGlobalSearch: false,
+    isGlobalSearch: false
   },
   {
     title: "Music",
     component: () => <SearchTab />,
     filter: ["audio"],
     searchSpace: ["groups", "channels"],
-    isGlobalSearch: false,
+    isGlobalSearch: false
   },
   {
     title: "Voice",
     component: () => <SearchTab />,
     filter: ["audio"],
     searchSpace: ["groups", "channels"],
-    isGlobalSearch: false,
-  },
+    isGlobalSearch: false
+  }
 ];
 
 export const SEARCH_TABS_MOCK = [
@@ -115,7 +115,7 @@ export const SEARCH_TABS_MOCK = [
           />
         ))}
       </div>
-    ),
+    )
   },
   {
     title: "Channnels",
@@ -128,7 +128,7 @@ export const SEARCH_TABS_MOCK = [
           subscribers={100}
         />
       </div>
-    ),
+    )
   },
   {
     title: "Media",
@@ -143,7 +143,7 @@ export const SEARCH_TABS_MOCK = [
           media="https://placecats.com/20/20"
         />
       </div>
-    ),
+    )
   },
   {
     title: "Links",
@@ -158,11 +158,11 @@ export const SEARCH_TABS_MOCK = [
           link="https://placecats.com/20/20"
         />
       </div>
-    ),
+    )
   },
   {
     title: "Files",
-    component: () => <NoResultsFound />,
+    component: () => <NoResultsFound />
   },
   {
     title: "Music",
@@ -175,7 +175,7 @@ export const SEARCH_TABS_MOCK = [
           file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
         />
       </div>
-    ),
+    )
   },
   {
     title: "Voice",
@@ -188,6 +188,6 @@ export const SEARCH_TABS_MOCK = [
           file="https://ia802306.us.archive.org/20/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3"
         />
       </div>
-    ),
-  },
+    )
+  }
 ];
diff --git a/app/src/features/search/hooks/useSearchPrivate.ts b/app/src/features/search/hooks/useSearchPrivate.ts
index fd48e068..3a642933 100644
--- a/app/src/features/search/hooks/useSearchPrivate.ts
+++ b/app/src/features/search/hooks/useSearchPrivate.ts
@@ -49,12 +49,12 @@ function useSearchPrivate(searchRequest: SearchRequest) {
           searchRequest.filter.includes(message?.contentType) &&
           message?.content
             .toLowerCase()
-            .includes(searchRequest.query.toLowerCase()),
+            .includes(searchRequest.query.toLowerCase())
       );
 
       const mergedSearchResults = filteredMessages.map((message) => {
         const sender = members.find(
-          (member) => member._id === message.senderId,
+          (member) => member._id === message.senderId
         );
 
         const chat = privateChats.find((chat) => chat._id === message.chatId);
@@ -68,16 +68,16 @@ function useSearchPrivate(searchRequest: SearchRequest) {
             username: sender?.username,
             screenFirstName: sender?.screenFirstName,
             screenLastName: sender?.screenLastName,
-            photo: sender?.photo,
+            photo: sender?.photo
           },
           chatId: {
             id: chat?._id,
             name: chat?.name,
             numberOfMembers: chat?.members.length,
             type: chat?.type,
-            photo: chat?.photo,
+            photo: chat?.photo
           },
-          timestamp: message.timestamp,
+          timestamp: message.timestamp
         };
       });
 
diff --git a/app/src/features/search/utils/searchTabsHelpers.tsx b/app/src/features/search/utils/searchTabsHelpers.tsx
index 752815cc..8446828d 100644
--- a/app/src/features/search/utils/searchTabsHelpers.tsx
+++ b/app/src/features/search/utils/searchTabsHelpers.tsx
@@ -8,7 +8,7 @@ import {
   SearchResultChannel,
   SearchResultGroup,
   SearchResultMessage,
-  SearchResultUser,
+  SearchResultUser
 } from "../types/search";
 
 const SearchSectionHeader = styled.div`
@@ -25,7 +25,7 @@ export const getTitle = (
     | SearchResultMessage
     | SearchResultGroup
     | SearchResultChannel
-    | SearchResultUser,
+    | SearchResultUser
 ) => {
   return (
     (item as SearchResultMessage).chatId?.name ||
@@ -39,7 +39,7 @@ export const getImage = (
     | SearchResultMessage
     | SearchResultGroup
     | SearchResultChannel
-    | SearchResultUser,
+    | SearchResultUser
 ) => {
   return (
     (item as SearchResultMessage).chatId?.photo ||
@@ -62,7 +62,7 @@ export const hasResults = (data: SearchResponseData | undefined) => {
 export const renderMessageResults = (
   messages: SearchResultMessage[],
   contentTypes: SearchFilter[],
-  searchTerm: string,
+  searchTerm: string
 ) => {
   return messages
     .filter((message) => contentTypes.includes(message?.contentType))
@@ -73,7 +73,7 @@ export const renderMessageResults = (
         title: getTitle(message),
         image: getImage(message),
         date: message?.timestamp,
-        chatId: message?.chatId?.id,
+        chatId: message?.chatId?.id
       };
 
       switch (message?.contentType) {
@@ -83,6 +83,7 @@ export const renderMessageResults = (
               key={`search-message-${message?.id}`}
               data-testid={`search-message-${message?.id}`}
               {...commonProps}
+              media={message?.media}
             />
           );
         case "image":
@@ -111,7 +112,9 @@ export const renderMessageResults = (
             <FileResult
               key={`search-message-${message?.id}`}
               data-testid={`search-message-${message?.id}`}
+              size="30KB"
               {...commonProps}
+              image="https://www.svgrepo.com/show/144578/pdf.svg"
             />
           );
         case "audio":
@@ -132,7 +135,7 @@ export const renderMessageResults = (
 export const renderGlobalResults = <T,>(
   results: T[],
   sectionTitle: string,
-  renderItem: (item: T) => JSX.Element,
+  renderItem: (item: T) => JSX.Element
 ) => {
   if (!results || results.length === 0) return null;
   return (
diff --git a/app/src/state/messages/search.ts b/app/src/state/messages/search.ts
index ca46dc16..eba72ff0 100644
--- a/app/src/state/messages/search.ts
+++ b/app/src/state/messages/search.ts
@@ -12,7 +12,7 @@ interface SearchState {
 const initialState: SearchState = {
   searchTerm: "",
   searchResults: [],
-  currentResultIndex: -1,
+  currentResultIndex: -1
 };
 
 const searchSlice = createSlice({
@@ -24,7 +24,7 @@ const searchSlice = createSlice({
     },
     setSearchResults: (
       state,
-      action: PayloadAction<{ messageId: string; highlightIndex: number }[]>,
+      action: PayloadAction<{ messageId: string; highlightIndex: number }[]>
     ) => {
       state.searchResults = action.payload;
       state.currentResultIndex = state.searchResults.length > 0 ? 0 : -1;
@@ -46,8 +46,8 @@ const searchSlice = createSlice({
       state.searchTerm = "";
       state.searchResults = [];
       state.currentResultIndex = -1;
-    },
-  },
+    }
+  }
 });
 
 export const {
@@ -55,6 +55,6 @@ export const {
   setSearchResults,
   moveToNextResult,
   moveToPreviousResult,
-  clearSearch,
+  clearSearch
 } = searchSlice.actions;
 export default searchSlice.reducer;

From 455dd2ecc421ce86df698cee0ca6672bfeb02ad7 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 21 Dec 2024 19:00:07 +0200
Subject: [PATCH 122/136] fix: search and correct send types finally (based on
 file ext) (#161)

* fix(search): when clicking takes you to correct page

* feat(send): finally correct message type to sent messages
---
 app/src/features/chats/hooks/useChatInput.ts  |  5 ++-
 .../features/chats/hooks/useMessageSender.ts  | 19 +++++----
 .../features/search/components/SearchTab.tsx  |  2 +
 .../components/result-items/ChannelResult.tsx |  2 +-
 app/src/utils/helpers.ts                      | 41 ++++++++++++++++++-
 5 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
index e85de81a..860aa938 100644
--- a/app/src/features/chats/hooks/useChatInput.ts
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -27,12 +27,13 @@ function useChatInput() {
     handleSendMessage("", chatId, sticker, "sticker");
     setIsEmojiSelectorOpen(false);
   };
-  const handleSubmit = (e: Event, voiceNoteName = "") => {
+
+  const handleSubmit = (e: Event, voiceNoteName = "voice") => {
     console.log(voiceNoteName);
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;
-    handleSendMessage(input, chatId, voiceNoteName, "audio");
+    handleSendMessage(input, chatId);
     dispatch(clearActiveMessage());
     setInput("");
   };
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 26831bba..afb5f5a1 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -3,6 +3,7 @@ import { ContentType, MessageInterface, MessageStatus } from "types/messages";
 import { useSocket } from "@hooks/useSocket";
 import { useEncryptDecrypt } from "./useEncryptDecrypt";
 import { getChatByID } from "../utils/helpers";
+import { getFileType } from "@utils/helpers";
 
 export const useMessageSender = () => {
   const { sendMessage, editMessage } = useSocket();
@@ -17,14 +18,14 @@ export const useMessageSender = () => {
     data: string,
     chatId?: string,
     file?: string,
-    type: ContentType = "text",
+    type: ContentType = "text"
   ) => {
     const chat = getChatByID({ chats, chatID: chatId as string });
 
     const encrypedMessage = await encrypt({
       message: data,
-      key: chat?.encryptionKey!,
-      iv: chat?.initializationVector!,
+      key: chat?.encryptionKey as string,
+      iv: chat?.initializationVector as string
     });
 
     if (activeMessage?.id && activeMessage.state === "edit") {
@@ -34,7 +35,9 @@ export const useMessageSender = () => {
 
     const isReply = activeMessage.state === "reply";
     const isEncryptedContent =
-      chat?.type! === "private" && typeof encrypedMessage === "string";
+      chat?.type === "private" && typeof encrypedMessage === "string";
+
+    type = getFileType(file, isEncryptedContent ? encrypedMessage : data);
 
     if (encrypedMessage || file) {
       const message: MessageInterface = {
@@ -45,26 +48,26 @@ export const useMessageSender = () => {
         isPinned: false,
         isForward: false,
         isAnnouncement: false,
+        isAppropriate: false,
         senderId: userId,
         chatId: chatId!,
-
         parentMessageId: isReply ? activeMessage.id : null,
         isReply,
         status: MessageStatus.sent,
         media: file,
-        threadMessages: [],
+        threadMessages: []
       };
 
       const threadMessage = {
         ...message,
         parentMessageId: activeThread,
         isReply: true,
-        chatType: "channel",
+        chatType: "channel"
       };
 
       const messageToSend = activeThread ? threadMessage : message;
 
-      sendMessage({ ...messageToSend, chatType: chat?.type! });
+      sendMessage({ ...messageToSend, chatType: chat?.type || "private" });
     }
   };
 
diff --git a/app/src/features/search/components/SearchTab.tsx b/app/src/features/search/components/SearchTab.tsx
index af6d0cee..8a2b06da 100644
--- a/app/src/features/search/components/SearchTab.tsx
+++ b/app/src/features/search/components/SearchTab.tsx
@@ -89,6 +89,7 @@ const SearchTab: React.FC = () => {
             image={group?.photo}
             username={group?.name}
             subscribers={group?.numberOfMembers}
+            chatId={group?.id}
           />
         )
       )}
@@ -104,6 +105,7 @@ const SearchTab: React.FC = () => {
             image={channel?.photo}
             username={channel?.name}
             subscribers={channel?.numberOfMembers}
+            chatId={channel?.id}
           />
         )
       )}
diff --git a/app/src/features/search/components/result-items/ChannelResult.tsx b/app/src/features/search/components/result-items/ChannelResult.tsx
index 043a5c91..604f2bc8 100644
--- a/app/src/features/search/components/result-items/ChannelResult.tsx
+++ b/app/src/features/search/components/result-items/ChannelResult.tsx
@@ -54,7 +54,7 @@ const ChannelResult: React.FC<ChannelResultProps> = ({
   image,
   username,
   subscribers,
-  chatId,
+  chatId
 }) => {
   const navigate = useNavigate();
   const handleItemClick = () => {
diff --git a/app/src/utils/helpers.ts b/app/src/utils/helpers.ts
index 91150cad..98606e03 100644
--- a/app/src/utils/helpers.ts
+++ b/app/src/utils/helpers.ts
@@ -38,4 +38,43 @@ function isValidDate(date: string): boolean {
   return new Date(date).toString() !== "Invalid Date";
 }
 
-export { getElapsedTime, getAvatarName, isValidDate };
+export type SearchFilter =
+  | "text"
+  | "image"
+  | "GIF"
+  | "sticker"
+  | "audio"
+  | "video"
+  | "file"
+  | "link";
+
+function getFileType(filename?: string, content?: string): SearchFilter {
+  if (content === undefined) return "text";
+
+  const urlPattern = /(https?:\/\/)/i;
+  if (urlPattern.test(content)) return "link";
+
+  if (!filename) return "text";
+
+  const ext = filename.toLowerCase().split(".").pop() || "";
+
+  const imageExts = ["jpg", "jpeg", "png", "webp", "svg", "bmp"];
+  if (imageExts.includes(ext)) return "image";
+
+  if (ext === "gif") return "GIF";
+
+  const stickerExts = ["webp", "apng"];
+  if (stickerExts.includes(ext)) return "sticker";
+
+  const audioExts = ["mp3", "wav", "ogg", "m4a", "aac", "webm"];
+  if (audioExts.includes(ext)) return "audio";
+
+  const videoExts = ["mp4", "mov", "avi", "mkv"];
+  if (videoExts.includes(ext)) return "video";
+
+  if (ext) return "file";
+
+  return "text";
+}
+
+export { getElapsedTime, getAvatarName, isValidDate, getFileType };

From 73e6a8bcca2f0913f4b71b5380204a3d109594d0 Mon Sep 17 00:00:00 2001
From: Amir Kedis <88613195+amir-kedis@users.noreply.github.com>
Date: Sat, 21 Dec 2024 19:16:11 +0200
Subject: [PATCH 123/136] feat(search): click on user gets you to his chat
 (doesn't create if none) (#162)

---
 .../components/result-items/ChannelResult.tsx       | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/src/features/search/components/result-items/ChannelResult.tsx b/app/src/features/search/components/result-items/ChannelResult.tsx
index 604f2bc8..291ffa6d 100644
--- a/app/src/features/search/components/result-items/ChannelResult.tsx
+++ b/app/src/features/search/components/result-items/ChannelResult.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
 import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const ItemWrapper = styled.div`
   display: flex;
@@ -57,8 +58,20 @@ const ChannelResult: React.FC<ChannelResultProps> = ({
   chatId
 }) => {
   const navigate = useNavigate();
+  const { chats, members } = useAppSelector((state) => state.chats);
+
   const handleItemClick = () => {
     if (chatId) navigate(`/${chatId}`);
+
+    const user = members.find((member) => member.username === username);
+    const userChat = chats.find(
+      (chat) =>
+        chat?.type === "private" &&
+        chat.members
+          .flatMap((member) => member._id)
+          .includes(user?._id as string)
+    );
+    if (userChat) navigate(`/${userChat._id}`);
   };
 
   return (

From 135188b1a54db9ebbbc6f06579c3d1ee455d706f Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 19:30:56 +0200
Subject: [PATCH 124/136] =?UTF-8?q?=E2=9C=A8=20(groups):=20Admins=20can=20?=
 =?UTF-8?q?set=20privacy=20for=20groups=20and=20channels=20(#163)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* ✨ (groups): Admins can set privacy for groups and channels

* ♻️ Refactor group type settings

* 🐛 Fix normal user can set privacy

---------

Co-authored-by: ahmedHamdiy <ah2882003@gmail.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/features/chats/ChatInput.tsx        |  1 -
 app/src/features/chats/utils/helpers.ts     |  6 +-
 app/src/features/groups/EditGroupInfo.tsx   |  7 +-
 app/src/features/groups/GroupType.tsx       | 49 +++++++++++-
 app/src/features/groups/GroupTypeOption.tsx | 84 +++++++++++++++++++++
 app/src/features/groups/data/settings.ts    |  9 +--
 app/src/sockets/SocketProvider.tsx          | 35 ++++++++-
 app/src/state/messages/chats.ts             |  3 +-
 app/src/types/socket.ts                     |  7 ++
 9 files changed, 183 insertions(+), 18 deletions(-)
 create mode 100644 app/src/features/groups/GroupTypeOption.tsx

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index cc68a711..929713f9 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -99,7 +99,6 @@ function ChatInput() {
     alert(error);
     setError("");
   }
-  console.log(isCurrUserAdmin);
 
   if (hasNoPostPermission) return <DisabledChatInput />;
 
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index 2286ec3a..5711a542 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -26,7 +26,8 @@ export function parseChatsToState(chatData?: any) {
       encryptionKey,
       initializationVector,
       messagingPermission,
-      downloadingPermission
+      downloadingPermission,
+      privacy
     } = currChat;
 
     const filteredMembers = members?.map((member: any) => {
@@ -64,7 +65,8 @@ export function parseChatsToState(chatData?: any) {
       encryptionKey,
       initializationVector,
       messagingPermission,
-      downloadingPermission
+      downloadingPermission,
+      privacy
     } as DetailedChatInterface;
   });
 }
diff --git a/app/src/features/groups/EditGroupInfo.tsx b/app/src/features/groups/EditGroupInfo.tsx
index 7a8882e4..a7db811b 100644
--- a/app/src/features/groups/EditGroupInfo.tsx
+++ b/app/src/features/groups/EditGroupInfo.tsx
@@ -22,7 +22,8 @@ function EditGroupInfo() {
     groupMembers,
     isPending,
     chatType,
-    numGivenPermissions
+    numGivenPermissions,
+    group
   } = useGroupInfo();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -41,7 +42,8 @@ function EditGroupInfo() {
     chatType: chatType!,
     backView,
     numGivenPermissions,
-    setIsModalOpen
+    setIsModalOpen,
+    privacy: group?.privacy!,
   });
 
   return (
@@ -50,7 +52,6 @@ function EditGroupInfo() {
         <ConfirmDeleteGroupModal
           isOpen={isModalOpen}
           onClose={() => setIsModalOpen(false)}
-
         />
       )}
       {settings.map((setting, index) => (
diff --git a/app/src/features/groups/GroupType.tsx b/app/src/features/groups/GroupType.tsx
index f4bc9866..700ddb94 100644
--- a/app/src/features/groups/GroupType.tsx
+++ b/app/src/features/groups/GroupType.tsx
@@ -1,9 +1,50 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+import GroupTypeOption from "./GroupTypeOption";
+
+import { useGroupInfo } from "./hooks/useGroupInfo";
+import { useSocket } from "@hooks/useSocket";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1rem;
+`;
+
 function GroupType() {
+  const { group, chatId, isCurrUserAdmin } = useGroupInfo();
+  const { setPrivacy } = useSocket();
+  const [selectedGroupType, setSelectedGroupType] = useState<
+    "private" | "public"
+  >(group?.privacy ? "private" : "public");
+
+  const handleSelection = (type: "private" | "public") => {
+    setSelectedGroupType(type);
+    setPrivacy({
+      chatId: chatId!,
+      privacy: type === "private"
+    });
+  };
+
   return (
-    <div>
-      <p>private group</p>
-      <p>public group</p>
-    </div>
+    <Container>
+      <GroupTypeOption
+        type="private"
+        selected={selectedGroupType === "private"}
+        onClick={() => handleSelection("private")}
+        groupType={group?.type}
+        isAdmin={isCurrUserAdmin}
+      />
+      <GroupTypeOption
+        type="public"
+        selected={selectedGroupType === "public"}
+        onClick={() => handleSelection("public")}
+        groupType={group?.type}
+        isAdmin={isCurrUserAdmin}
+      />
+    </Container>
   );
 }
 
diff --git a/app/src/features/groups/GroupTypeOption.tsx b/app/src/features/groups/GroupTypeOption.tsx
new file mode 100644
index 00000000..2f500562
--- /dev/null
+++ b/app/src/features/groups/GroupTypeOption.tsx
@@ -0,0 +1,84 @@
+import styled from "styled-components";
+
+const Option = styled.div<{ disabled: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+`;
+
+const RadioButton = styled.button<{ selected: boolean; disabled: boolean }>`
+  background: transparent;
+  flex-shrink: 0;
+
+  width: 1.2rem;
+  height: 1.2rem;
+
+  border-radius: 50%;
+  border: 2px solid
+    ${({ selected }) =>
+      selected ? "var(--accent-color)" : "var(--color-text-secondary)"};
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+
+  &::after {
+    content: "";
+    width: ${({ selected }) => (selected ? "0.7rem" : "0")};
+    height: ${({ selected }) => (selected ? "0.7rem" : "0")};
+    background-color: var(--accent-color);
+    border-radius: 50%;
+    transition: all 0.2s ease-in-out;
+  }
+`;
+
+const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+const Title = styled.p`
+  font-weight: 500;
+  color: var(--color-text);
+`;
+
+const Description = styled.p`
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+`;
+
+interface GroupTypeOptionProps {
+  type: "private" | "public";
+  selected: boolean;
+  isAdmin: boolean;
+  onClick: () => void;
+  groupType: string | undefined;
+}
+
+const GroupTypeOption = ({
+  type,
+  selected,
+  onClick,
+  groupType,
+  isAdmin
+}: GroupTypeOptionProps) => (
+  <Option disabled={!isAdmin} onClick={onClick}>
+    <RadioButton selected={selected} disabled={!isAdmin} />
+    <Details>
+      <Title>{`${type.charAt(0).toUpperCase() + type.slice(1)} ${groupType}`}</Title>
+      <Description>
+        {`${type.charAt(0).toUpperCase() + type.slice(1)} ${groupType} ${
+          type === "private"
+            ? "cannot be found in search."
+            : "can be found in search."
+        }`}
+      </Description>
+    </Details>
+  </Option>
+);
+
+export default GroupTypeOption;
diff --git a/app/src/features/groups/data/settings.ts b/app/src/features/groups/data/settings.ts
index 1ff54532..e2d958eb 100644
--- a/app/src/features/groups/data/settings.ts
+++ b/app/src/features/groups/data/settings.ts
@@ -7,7 +7,7 @@ type SettingsProps = {
   dispatch: Dispatch;
   admins: any[];
   groupMembers: any[];
-
+  privacy: boolean;
   chatType: string;
   backView: sideBarPages;
   numGivenPermissions: number;
@@ -20,7 +20,7 @@ const getSettings = ({
   dispatch,
   admins,
   groupMembers,
-
+  privacy,
   backView,
   numGivenPermissions,
   setIsModalOpen
@@ -29,7 +29,7 @@ const getSettings = ({
     testid: "group-type",
     icon: "Lock" as iconStrings,
     title: `${chatType?.charAt(0)?.toUpperCase()}${chatType?.slice(1)} Type`,
-    subtitle: "private",
+    subtitle: privacy ? "private" : "public",
     onClick: () =>
       dispatch(
         updateSideBarView({
@@ -84,9 +84,6 @@ const getSettings = ({
     subtitle: "",
     onClick: () => {
       setIsModalOpen(true);
-      // leaveGroup({ chatId });
-      // setIsRightSideBarOpen(false);
-      // dispatch(resetRightSideBar());
     }
   }
 ];
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index ce89515b..5d36566e 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -224,6 +224,10 @@ function SocketProvider({ children }: SocketProviderProps) {
       console.log("SET_PERMISSION_SERVER", chatId, type, who);
       queryClient.invalidateQueries({ queryKey: ["chats"] });
     });
+    socket.on("SET_PRIVACY_SERVER", ({ chatId, privacy }) => {
+      console.log("SET_PERMISSION_SERVER", chatId, privacy);
+      queryClient.invalidateQueries({ queryKey: ["chats"] });
+    });
 
     socket.on("typing", (isTyping, message) =>
       handleIsTyping(dispatch, isTyping, message.chatId)
@@ -637,6 +641,34 @@ function SocketProvider({ children }: SocketProviderProps) {
     }
   }
 
+  function setPrivacy({
+    chatId,
+    privacy
+  }: {
+    chatId: string;
+    privacy: boolean;
+  }) {
+    console.log(privacy);
+    if (isConnected && socket) {
+      socket.emit(
+        "SET_PRIVACY_CLIENT",
+        { chatId, privacy },
+        ({ success, message, error }: AckCreateGroup) => {
+          console.log(message, error, success);
+          if (success) {
+            toast.success(message);
+            queryClient.invalidateQueries({ queryKey: ["chats"] });
+          } else {
+            toast.error(message);
+            console.error(error);
+          }
+        }
+      );
+    } else {
+      console.warn("Cannot set privacy: not connected to socket server");
+    }
+  }
+
   return (
     <SocketContext.Provider
       value={{
@@ -655,7 +687,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         acceptCall,
         createVoiceCall,
         setPermission,
-        deleteGroup
+        deleteGroup,
+        setPrivacy
       }}
     >
       {children}
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index c3475983..ff70e298 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -8,7 +8,7 @@ interface DetailedChatInterface extends Chat {
   messages: MessageInterface[];
   isTyping: boolean;
   showCheckBox: boolean;
-  selectedMessages: string[]; //indicates ids only of selected messages
+  selectedMessages: string[];
   lastMessage?: {
     _id: string;
     content: string;
@@ -23,6 +23,7 @@ interface DetailedChatInterface extends Chat {
   initializationVector?: string;
   messagingPermission?: boolean;
   downloadingPermission?: boolean;
+  privacy: boolean;
 }
 
 interface ChatsState {
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index c6c9d3ab..36624587 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -54,6 +54,13 @@ export interface SocketContextType {
     type: "post" | "download";
     who: "everyone" | "admins";
   }) => void;
+  setPrivacy: ({
+    chatId,
+    privacy
+  }: {
+    chatId: string;
+    privacy: boolean;
+  }) => void;
   leaveGroup: ({ chatId }: { chatId: string }) => void;
   deleteGroup: ({ chatId }: { chatId: string }) => void;
   createVoiceCall: ({ chatId }: { chatId: string }) => void;

From c9dc90938e86cbb67af3730985f9a4620e912343 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 20:15:40 +0200
Subject: [PATCH 125/136] =?UTF-8?q?=F0=9F=90=9B=20(channels):=20Fix=20non?=
 =?UTF-8?q?=20admins=20have=20chat=20input=20(#164)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* 🐛 (channels): Fix non admins have chat input

---------

Co-authored-by: ahmedHamdiy <ah2882003@gmail.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/App.tsx                                       | 1 -
 app/src/components/protected-route/ProtectedRoute.tsx | 2 --
 app/src/features/chats/ChatInput.tsx                  | 3 +++
 app/src/features/chats/Message.tsx                    | 6 ++++--
 app/src/features/chats/MessageContent.tsx             | 2 +-
 app/src/sockets/SocketProvider.tsx                    | 2 --
 app/src/state/messages/channels.ts                    | 8 ++++----
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index ac7f4b82..aeed77d9 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -35,7 +35,6 @@ function App() {
   const currentUserRole = useAppSelector((state) =>
     state.user.userInfo.isAdmin ? "admin" : "user"
   );
-  console.log("currentUserRole :", currentUserRole);
 
   useEffect(() => {
     document.documentElement.className =
diff --git a/app/src/components/protected-route/ProtectedRoute.tsx b/app/src/components/protected-route/ProtectedRoute.tsx
index 64642b3b..4bca88bf 100644
--- a/app/src/components/protected-route/ProtectedRoute.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.tsx
@@ -22,8 +22,6 @@ function ProtectedRoute({
       navigate("/login");
     }
   }, [navigate, isAuth, isPending]);
-  console.log(allowedRoles);
-  console.log(userRole);
 
   if (isAuth)
     return allowedRoles.includes(userRole) ? (
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 929713f9..cf2eb7e4 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -68,6 +68,7 @@ const Input = styled.div`
 function ChatInput() {
   const { chatId } = useParams<{ chatId: string }>();
   const { isCurrUserAdmin } = useGroupInfo();
+  const { activeThread } = useAppSelector((state) => state?.channelsThreads);
 
   const {
     input,
@@ -100,6 +101,8 @@ function ChatInput() {
     setError("");
   }
 
+  if (!activeThread && !isCurrUserAdmin && currChat?.type === "channel")
+    return <DisabledChatInput />;
   if (hasNoPostPermission) return <DisabledChatInput />;
 
   return (
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index 79510ef4..b2e9c72e 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -12,6 +12,7 @@ import useHover from "./hooks/useHover";
 import { useMessageContext } from "./contexts/MessageProvider";
 import React from "react";
 import CommentBox from "./CommentBox";
+import { useAppSelector } from "@hooks/useGlobalState";
 
 const StyledMessage = styled.div<{ $isMine: boolean }>`
   display: flex;
@@ -79,9 +80,10 @@ const Message = React.memo(() => {
 
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
     chatId,
-    messageId: id,
+    messageId: id
   });
   const { isHovered, handleMouseLeave, handleOpenList } = useHover();
+  const { activeThread } = useAppSelector((state) => state.channelsThreads);
 
   return (
     <MessageRow $isChecked={isChecked}>
@@ -104,7 +106,7 @@ const Message = React.memo(() => {
           <MessageContent />
           {isHovered && <MessageOptionList />}
           <MessageDetails />
-          {chatType === "channel" && <CommentBox />}
+          {chatType === "channel" && !activeThread && <CommentBox />}
         </Bubble>
       </StyledMessage>
     </MessageRow>
diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
index 873a0d1d..76a64390 100644
--- a/app/src/features/chats/MessageContent.tsx
+++ b/app/src/features/chats/MessageContent.tsx
@@ -61,7 +61,7 @@ function MessageContent() {
       {parentMessageId && (
         <MessageBoxWrapper
           onClick={MoveToReplyMessage}
-          test-id={`reply-box-${id}`}
+          data-testid={`reply-box-${id}`}
         >
           <MessageBox messageId={parentMessageId} />
         </MessageBoxWrapper>
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 5d36566e..55d0e444 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -77,8 +77,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     acceptCall: setAcceptedCall,
     callAccepted
   } = useCallContext();
-  console.log(callId, callAccepted);
-  console.log("reredder");
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const socket = useSocket();
diff --git a/app/src/state/messages/channels.ts b/app/src/state/messages/channels.ts
index cd7c6e68..1c2a4c15 100644
--- a/app/src/state/messages/channels.ts
+++ b/app/src/state/messages/channels.ts
@@ -8,7 +8,7 @@ interface ChannelsState {
 
 const initialState: ChannelsState = {
   activeThread: "",
-  activeThreadMessages: [],
+  activeThreadMessages: []
 };
 
 const channelsThreadsSlice = createSlice({
@@ -17,7 +17,7 @@ const channelsThreadsSlice = createSlice({
   reducers: {
     setActiveThread: (
       state,
-      action: PayloadAction<{ threadId: string; messages: MessageInterface[] }>,
+      action: PayloadAction<{ threadId: string; messages: MessageInterface[] }>
     ) => {
       state.activeThread = action.payload.threadId;
       state.activeThreadMessages = action.payload.messages;
@@ -25,8 +25,8 @@ const channelsThreadsSlice = createSlice({
     resetActiveThread: (state) => {
       state.activeThread = "";
       state.activeThreadMessages = [];
-    },
-  },
+    }
+  }
 });
 
 export const { setActiveThread, resetActiveThread } =

From 72e0ea43d2c410144b22d1c8ffceff05a4945b87 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 20:25:14 +0200
Subject: [PATCH 126/136] feat(admin):  double check before ban/deactivate
 users (#165)

* feat(admin): fouble check before ban/deactivate

* feat(admin): fouble check before ban/deactivate
---
 app/public/mockServiceWorker.js               |  2 +-
 .../protected-route/ProtectedRoute.tsx        |  2 +-
 .../admin/components/UserCardButton.tsx       | 45 +++++++++++++++++--
 app/src/features/chats/MessageContent.tsx     | 14 +++---
 app/src/features/chats/utils/helpers.ts       |  3 +-
 app/src/state/messages/chats.ts               |  5 ++-
 6 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/app/public/mockServiceWorker.js b/app/public/mockServiceWorker.js
index 7c0ee718..fead0b3f 100644
--- a/app/public/mockServiceWorker.js
+++ b/app/public/mockServiceWorker.js
@@ -1,4 +1,4 @@
- 
+/* eslint-disable */
 /* tslint:disable */
 
 /**
diff --git a/app/src/components/protected-route/ProtectedRoute.tsx b/app/src/components/protected-route/ProtectedRoute.tsx
index 4bca88bf..f9dd66ae 100644
--- a/app/src/components/protected-route/ProtectedRoute.tsx
+++ b/app/src/components/protected-route/ProtectedRoute.tsx
@@ -12,7 +12,7 @@ type prortectedRouteType = {
 function ProtectedRoute({
   children,
   allowedRoles,
-  userRole,
+  userRole
 }: prortectedRouteType) {
   const navigate = useNavigate();
   const { isAuth, isPending } = useAuthStatus();
diff --git a/app/src/features/admin/components/UserCardButton.tsx b/app/src/features/admin/components/UserCardButton.tsx
index 0cfedb1a..873633e9 100644
--- a/app/src/features/admin/components/UserCardButton.tsx
+++ b/app/src/features/admin/components/UserCardButton.tsx
@@ -1,6 +1,9 @@
 import styled from "styled-components";
 import { userStatus } from "types/admin";
 import Button from "@components/Button";
+import Modal from "@components/Modal";
+import { useState } from "react";
+import { set } from "react-hook-form";
 
 interface Props {
   status: userStatus;
@@ -16,13 +19,23 @@ const ButtonContainer = styled.div`
 
 function UserCardButton(props: Props) {
   const { status, onChangeStatus } = props;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [action, setAction] = useState("");
   let renderedButtons;
+  const handleDeactivate = () => {
+    setAction("deactivate");
+    setIsModalOpen(true);
+  };
+  const handleBan = () => {
+    setAction("ban");
+    setIsModalOpen(true);
+  };
   switch (status) {
     case userStatus.active:
       renderedButtons = (
         <>
           <Button
-            onClick={() => onChangeStatus(userStatus.deactivated)}
+            onClick={handleDeactivate}
             $type="normal"
             $width="15rem"
             data-testid="deactivate-button"
@@ -30,10 +43,10 @@ function UserCardButton(props: Props) {
             Deactivate
           </Button>
           <Button
-            onClick={() => onChangeStatus(userStatus.banned)}
             $type="danger"
             $width="15rem"
             datatype="ban-button"
+            onClick={handleBan}
           >
             Ban
           </Button>
@@ -52,7 +65,7 @@ function UserCardButton(props: Props) {
             Activate
           </Button>
           <Button
-            onClick={() => onChangeStatus(userStatus.banned)}
+            onClick={handleBan}
             $type="danger"
             $width="15rem"
             data-testid="ban-button"
@@ -66,7 +79,31 @@ function UserCardButton(props: Props) {
       renderedButtons = null;
       break;
   }
-  return <ButtonContainer>{renderedButtons}</ButtonContainer>;
+  return (
+    <>
+      <Modal
+        isOpen={isModalOpen}
+        message={`You are going to ${action} this user${action === "ban" ? "for ever" : ""}.`}
+        title={`${action} User`}
+        onClose={() => setIsModalOpen(false)}
+      >
+        <Button
+          onClick={() =>
+            onChangeStatus(
+              action === "ban" ? userStatus.banned : userStatus.deactivated
+            )
+          }
+          $type="danger"
+          $width="10rem"
+          data-testid="ban-button"
+          style={{ margin: "auto" }}
+        >
+          {action}
+        </Button>
+      </Modal>
+      <ButtonContainer>{renderedButtons}</ButtonContainer>
+    </>
+  );
 }
 
 export default UserCardButton;
diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
index 76a64390..d89c52d9 100644
--- a/app/src/features/chats/MessageContent.tsx
+++ b/app/src/features/chats/MessageContent.tsx
@@ -36,24 +36,24 @@ function MessageContent() {
     media,
     contentType,
     chatType,
-    isAppropriate,
+    isAppropriate
   } = useMessageContext();
 
   const { searchTerm, searchResults } = useAppSelector((state) => state.search);
   const { MoveToReplyMessage } = useOptionListAction({
     id,
     content,
-    parentMessageId,
+    parentMessageId
   });
 
   const isGifOrSticker =
     media && (contentType === "GIF" || contentType === "sticker");
 
   const isFile = media && !(contentType === "GIF" || contentType === "sticker");
-  const filteredContent =
-    (chatType === "group" || chatType === "channel") && !isAppropriate
-      ? content
-      : "🚫️ This mesaage has unappropriate content";
+  console.log("isAppropriate", isAppropriate);
+  const filteredContent = isAppropriate
+    ? content
+    : "🚫️ This mesaage has unappropriate content";
 
   return (
     <Container>
@@ -68,7 +68,7 @@ function MessageContent() {
       )}
       {isGifOrSticker && <Gif src={media} loading="lazy" />}
       {isFile && <FileViewer file={media} />}
-      {RenderWithHighlight(content, searchTerm, searchResults, id)}
+      {RenderWithHighlight(filteredContent, searchTerm, searchResults, id)}
     </Container>
   );
 }
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index 5711a542..3cbb302f 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -54,7 +54,8 @@ export function parseChatsToState(chatData?: any) {
         _id: incomingLastMessage?.id,
         content: incomingLastMessage?.content,
         senderId: incomingLastMessage?.senderId,
-        timestamp: incomingLastMessage?.timestamp
+        timestamp: incomingLastMessage?.timestamp,
+        contentType: incomingLastMessage?.contentType
       },
 
       messages: [],
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index ff70e298..d1def1f8 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -14,6 +14,7 @@ interface DetailedChatInterface extends Chat {
     content: string;
     senderId: string;
     timestamp: string;
+    contentType: string;
   };
   name?: string;
   isBlocked?: boolean;
@@ -77,10 +78,10 @@ const chatsSlice = createSlice({
       const chat = getChatByID({ chats: state.chats, chatID: chatId });
 
       if (chat?.type === "private" && chat?.isBlocked) return;
-      const { _id, content, senderId, timestamp } = message;
+      const { _id, content, senderId, timestamp, contentType } = message;
 
       if (chat) {
-        chat.lastMessage = { _id, content, senderId, timestamp };
+        chat.lastMessage = { _id, content, senderId, timestamp, contentType };
         chat.messages.push(message);
       }
     },

From 10c767324ef5b43c6d9c1dc59db291e435adb024 Mon Sep 17 00:00:00 2001
From: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Date: Sat, 21 Dec 2024 21:01:53 +0200
Subject: [PATCH 127/136] =?UTF-8?q?=F0=9F=90=9B=20(channels):=20Fix=20user?=
 =?UTF-8?q?s=20can=20reply=20on=20threads=20with=20no=20permission=20(#166?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* 🐛 (channels): Fix users can reply on threads with no permission

---------

Co-authored-by: ahmedHamdiy <ah2882003@gmail.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/features/chats/ChatInput.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index cf2eb7e4..831f6814 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -86,11 +86,6 @@ function ChatInput() {
 
   const chats = useAppSelector((state) => state.chats.chats);
   const currChat = getChatByID({ chats: chats, chatID: chatId! });
-  const hasNoPostPermission =
-    currChat?.type === "group" &&
-    !currChat?.messagingPermission &&
-    !isCurrUserAdmin;
-
   const showCheckBox = currChat?.showCheckBox;
   const isBlocked = currChat?.isBlocked;
 
@@ -101,9 +96,21 @@ function ChatInput() {
     setError("");
   }
 
-  if (!activeThread && !isCurrUserAdmin && currChat?.type === "channel")
+  console.log(currChat?.messagingPermission);
+
+  const isGroupWithoutPostPermission =
+    currChat?.type === "group" &&
+    !currChat?.messagingPermission &&
+    !isCurrUserAdmin;
+
+  const isChannelWithoutPostPermission =
+    currChat?.type === "channel" &&
+    !isCurrUserAdmin &&
+    (!activeThread || !currChat?.messagingPermission);
+
+  if (isChannelWithoutPostPermission || isGroupWithoutPostPermission) {
     return <DisabledChatInput />;
-  if (hasNoPostPermission) return <DisabledChatInput />;
+  }
 
   return (
     <>

From b917960067089312e028264a5105d1a0eaad5ac3 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 23:15:09 +0200
Subject: [PATCH 128/136] filter chat (#167)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(admin): fouble check before ban/deactivate

* feat(admin): fouble check before ban/deactivate

* feat: filter groups

* 🐛 (channels): Fix non admins have chat input (#164)

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* 🐛 (channels): Fix non admins have chat input

---------

Co-authored-by: ahmedHamdiy <ah2882003@gmail.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>

* 🐛 (channels): Fix users can reply on threads with no permission (#166)

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* 🐛 (channels): Fix users can reply on threads with no permission

---------

Co-authored-by: ahmedHamdiy <ah2882003@gmail.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>

* feat(admin):  double check before ban/deactivate users (#165)

* feat(admin): fouble check before ban/deactivate

* feat(admin): fouble check before ban/deactivate

---------

Co-authored-by: Asmaa Abozaid <130288326+Asmaa-204@users.noreply.github.com>
Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/features/chats/MessageContent.tsx     |  3 +--
 app/src/features/chats/hooks/useChatInput.ts  |  2 +-
 .../features/chats/hooks/useMessageSender.ts  |  2 +-
 app/src/sockets/SocketProvider.tsx            | 26 +++++++++++--------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
index d89c52d9..98c8cdbc 100644
--- a/app/src/features/chats/MessageContent.tsx
+++ b/app/src/features/chats/MessageContent.tsx
@@ -50,10 +50,9 @@ function MessageContent() {
     media && (contentType === "GIF" || contentType === "sticker");
 
   const isFile = media && !(contentType === "GIF" || contentType === "sticker");
-  console.log("isAppropriate", isAppropriate);
   const filteredContent = isAppropriate
     ? content
-    : "🚫️ This mesaage has unappropriate content";
+    : "🚫️ This mesaage has unappropriate content.";
 
   return (
     <Container>
diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
index 860aa938..b52e8f69 100644
--- a/app/src/features/chats/hooks/useChatInput.ts
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -28,7 +28,7 @@ function useChatInput() {
     setIsEmojiSelectorOpen(false);
   };
 
-  const handleSubmit = (e: Event, voiceNoteName = "voice") => {
+  const handleSubmit = (e: Event, voiceNoteName = "") => {
     console.log(voiceNoteName);
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index afb5f5a1..80032b60 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -48,7 +48,7 @@ export const useMessageSender = () => {
         isPinned: false,
         isForward: false,
         isAnnouncement: false,
-        isAppropriate: false,
+        isAppropriate: true,
         senderId: userId,
         chatId: chatId!,
         parentMessageId: isReply ? activeMessage.id : null,
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 55d0e444..3b760270 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -48,10 +48,7 @@ interface AcknowledgmentResponse {
   success: boolean;
   message: string;
   error?: string;
-  res: {
-    messageId: string;
-    message: MessageInterface;
-  };
+  data: MessageInterface;
 }
 
 interface AckCreateGroup {
@@ -325,33 +322,40 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.emit(
         "SEND_MESSAGE",
         sentMessage,
-        ({ success, res, error, message }: AcknowledgmentResponse) => {
+        ({
+          success,
+          data: recieved_message,
+          error,
+          message
+        }: AcknowledgmentResponse) => {
           if (!success) {
             console.log(message);
             console.log("Failed to send", error);
           }
           if (success) {
-            const _id = res.messageId;
+            console.log(recieved_message);
+            console.log("message sent successfully 2");
+            const _id = recieved_message._id;
 
             if (!chat) return;
 
             if (chat?.type === "private") {
               decrypt({
-                message: sentMessage.content,
+                message: recieved_message.content,
                 key: chat?.encryptionKey || "",
                 iv: chat?.initializationVector || ""
               }).then((content) => {
                 handleIncomingMessage(
                   dispatch,
-                  { ...sentMessage, content: content as string, _id },
-                  sentMessage.chatId
+                  { ...recieved_message, content: content as string, _id },
+                  recieved_message.chatId
                 );
               });
             } else {
               handleIncomingMessage(
                 dispatch,
-                { ...sentMessage, _id },
-                sentMessage.chatId
+                { ...recieved_message, _id },
+                recieved_message.chatId
               );
             }
           }

From cfea05a3313c203d99044a4d5f487537ea6a1731 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <111378492+AhmedHamdiy@users.noreply.github.com>
Date: Sat, 21 Dec 2024 23:55:05 +0200
Subject: [PATCH 129/136] Fix render the inappropriate messages (#168)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat(profile-picture): set/remove profile picture

feat(profile-picture): set/remove profile picture

* admin mock

* fix: adjust sixing (#158)

fix: voice notes

* fix(filter): rendering the inappropriate in chatitem

---------

Co-authored-by: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
---
 app/src/features/chats/MessageContent.tsx |  2 +-
 app/src/features/chats/utils/helpers.ts   |  4 +++-
 app/src/sockets/SocketProvider.tsx        | 11 +++++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/src/features/chats/MessageContent.tsx b/app/src/features/chats/MessageContent.tsx
index 98c8cdbc..a7901199 100644
--- a/app/src/features/chats/MessageContent.tsx
+++ b/app/src/features/chats/MessageContent.tsx
@@ -52,7 +52,7 @@ function MessageContent() {
   const isFile = media && !(contentType === "GIF" || contentType === "sticker");
   const filteredContent = isAppropriate
     ? content
-    : "🚫️ This mesaage has unappropriate content.";
+    : "🚫️ This mesaage has inappropriate content.";
 
   return (
     <Container>
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index 3cbb302f..cf8148a7 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -52,7 +52,9 @@ export function parseChatsToState(chatData?: any) {
 
       lastMessage: {
         _id: incomingLastMessage?.id,
-        content: incomingLastMessage?.content,
+        content: incomingLastMessage?.isAppropriate
+          ? incomingLastMessage?.content
+          : "🚫️ This message has inappropriate content.",
         senderId: incomingLastMessage?.senderId,
         timestamp: incomingLastMessage?.timestamp,
         contentType: incomingLastMessage?.contentType
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 3b760270..d597a632 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -333,10 +333,17 @@ function SocketProvider({ children }: SocketProviderProps) {
             console.log("Failed to send", error);
           }
           if (success) {
-            console.log(recieved_message);
-            console.log("message sent successfully 2");
             const _id = recieved_message._id;
 
+            if (
+              recieved_message.isAppropriate === false &&
+              chat?.type !== "private"
+            ) {
+              toast.error("Your message was inappropriate.");
+              recieved_message.content =
+                "🚫️ This mesaage has inappropriate content.";
+            }
+
             if (!chat) return;
 
             if (chat?.type === "private") {

From 490952a4797418b33911726cc51e87d0e82bdae1 Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sun, 22 Dec 2024 00:06:49 +0200
Subject: [PATCH 130/136] Feat/mentions (#169)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 (messaging): Mentions UI almost finished

* ✨ (messaging): Mentions almost finished

* 🐛 (messaging): Fixing merge problems
---
 app/src/components/ExpandingTextArea.tsx      | 105 +++++++++-----
 app/src/data/icons.tsx                        |   6 +-
 app/src/features/chats/ChatBody.tsx           |  27 +++-
 app/src/features/chats/ChatInputIcons.tsx     |   8 +-
 app/src/features/chats/ChatItem.tsx           |   4 +-
 app/src/features/chats/Message.tsx            |   3 -
 app/src/features/chats/SenderName.tsx         |   2 +-
 app/src/features/chats/Topbar.tsx             |   2 +-
 .../{useChatMember.ts => useChatMembers.ts}   |   1 +
 app/src/features/chats/hooks/useChats.ts      |   1 +
 .../features/chats/hooks/useFetchNextPage.ts  |   5 +
 .../features/chats/hooks/useMentionList.ts    |  20 +++
 .../features/chats/hooks/useMessageSender.ts  |   4 +-
 .../chats/hooks/useTraverseMentions.ts        |  80 +++++++++++
 app/src/features/chats/utils/helpers.ts       |   4 +-
 app/src/mocks/data/chats.ts                   | 130 +++++++++---------
 app/src/sockets/SocketProvider.tsx            |   3 +-
 app/src/state/messages/chats.ts               |  40 +++++-
 app/src/types/messages.ts                     |   2 +
 app/src/utils/renderWithHighlight.tsx         |  18 +--
 app/src/utils/renderWithMentions.tsx          |  47 +++++++
 21 files changed, 387 insertions(+), 125 deletions(-)
 rename app/src/features/chats/hooks/{useChatMember.ts => useChatMembers.ts} (99%)
 create mode 100644 app/src/features/chats/hooks/useMentionList.ts
 create mode 100644 app/src/features/chats/hooks/useTraverseMentions.ts
 create mode 100644 app/src/utils/renderWithMentions.tsx

diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 86a1ca4d..74beb98e 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -1,59 +1,96 @@
 import { useEffect, useRef } from "react";
 import styled from "styled-components";
+import { MentionsInput, Mention } from "react-mentions";
+import useMentionList from "@features/chats/hooks/useMentionList";
 
-const Textarea = styled.textarea`
-  outline: none;
-  border: none;
-
-  flex: 1;
-  align-self: center;
-
-  caret-color: var(--accent-color);
+const StyledMentionsInput = styled.div`
+  width: 100%;
+  max-width: 27rem;
   color: var(--color-text);
-
-  resize: none;
-  overflow: hidden;
-
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 0.25rem;
-
-  max-height: 300px;
 `;
 
 type PropsType = {
   input: string;
   setInput: (value: string) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => void;
 };
 
 function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
-  const ref = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const { filteredMembers } = useMentionList();
 
   function handleInput() {
-    if (ref.current) {
-      ref.current.style.height = "auto";
-      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
     }
   }
+
   useEffect(() => {
-    if (ref.current) {
-      if (ref.current.value === "" || input === "") {
-        ref.current.style.height = "32px";
+    if (textareaRef.current) {
+      if (textareaRef.current.value === "" || input === "") {
+        textareaRef.current.style.height = "32px";
       }
     }
   }, [input]);
 
+  console.log(filteredMembers);
+
   return (
-    <Textarea
-      ref={ref}
-      value={input}
-      onChange={(e) => setInput(e.target.value)}
-      placeholder="Message"
-      rows={1}
-      onInput={handleInput}
-      onKeyDown={onKeyDown}
-    />
+    <StyledMentionsInput>
+      <MentionsInput
+        value={input}
+        onChange={(e: any) => setInput(e.target.value)}
+        onKeyDown={onKeyDown!}
+        onInput={handleInput}
+        placeholder="Message"
+        a11ySuggestionsListLabel="Suggested mentions"
+        style={{
+          input: {
+            overflow: "hidden",
+            border: "none",
+            forcedColorAdjust: "none",
+            color: "var(--color-text)",
+            outline: "none"
+          },
+          suggestions: {
+            list: {
+              backgroundColor: "var(--color-background)",
+              border: "none",
+              borderRadius: "0.5rem",
+              position: "absolute",
+              zIndex: 1,
+              bottom: "2rem",
+              width: "20rem",
+              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)"
+            },
+            item: {
+              padding: "0.5rem 1rem",
+              "&focused": {
+                backgroundColor: "var(--accent-color)",
+                color: "white"
+              }
+            }
+          }
+        }}
+      >
+        <Mention
+          trigger="@"
+          data={filteredMembers}
+          displayTransform={(display) => `@${display}`}
+          style={{
+            backgroundColor: "transparent",
+            color: "ButtonFace",
+            border: "none"
+          }}
+        />
+      </MentionsInput>
+    </StyledMentionsInput>
   );
 }
 
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index e377d491..3429c304 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -67,7 +67,8 @@ enum icons {
   Eye,
   Sun,
   Group,
-  CallAccept
+  CallAccept,
+  Mention,
 }
 
 type iconStrings = keyof typeof icons;
@@ -442,6 +443,9 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/Visibility"),
     defaultProps: { fontSize: "small" },
   },
+  Mention:{
+    importFn: () => import ("@mui/icons-material/AlternateEmail"),
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 9a09fb76..e493071a 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -8,12 +8,14 @@ import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 import MessageProvider from "./contexts/MessageProvider";
+import { getIcon } from "@data/icons";
+import useTraversalMentions from "./hooks/useTraverseMentions";
+import Icon from "@components/Icon";
 
 const ScrollContainer = styled.div`
   width: 100%;
   height: 82dvh;
   overflow-y: auto;
-  position: relative;
   margin-top: 3rem;
   &::-webkit-scrollbar {
     width: 5px;
@@ -45,6 +47,9 @@ function ChatBody() {
   const { inView, ref } = useInView({ threshold: 0.01 });
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
+  const { handleNextMentionMessage, mentionMessages } = useTraversalMentions();
+
+
   useEffect(() => {
     if (inView && hasNextPage && chatId) {
       const container = scrollContainerRef.current;
@@ -103,6 +108,26 @@ function ChatBody() {
             </MessageProvider>
           );
         })}
+      <Icon onClick={handleNextMentionMessage} data-testid="mention-icon">
+        {mentionMessages.length > 0 &&
+          getIcon("Mention", {
+            sx: {
+              fontSize: "2.5rem",
+              color: "var(--accent-color)",
+              backgroundColor: `var(--color-background)`,
+              borderRadius: "50%",
+              position: "absolute",
+              bottom: "8rem",
+              right: "3%",
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: "var(--color-background-own-1)",
+                color: "white",
+                transition: "0.2s",
+              },
+            },
+          })}
+      </Icon>
     </ScrollContainer>
   );
 }
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
index 85c5ca6e..f1ad0e04 100644
--- a/app/src/features/chats/ChatInputIcons.tsx
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -3,7 +3,7 @@ import { getIcon } from "@data/icons";
 import styled from "styled-components";
 import MediaUploadComponent from "./media/MediaUploadComponent";
 import Icon from "@components/Icon";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { ChatInputContext } from "./ChatBox";
 
 const InvisibleButton = styled.div`
@@ -27,7 +27,11 @@ function ChatInputIcons() {
     setIsEmojiSelectorOpen((show: boolean) => !show);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeyDown = (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
     setIsEmojiSelectorOpen(false);
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 246a515e..b1d51954 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
 import { DetailedChatInterface } from "@state/messages/chats";
+import RenderWithMention from "@utils/renderWithMentions";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -64,7 +65,8 @@ const ChatItem = ({
   const navigate = useNavigate();
 
   const timestamp = lastMessage?.timestamp || "No messages";
-  const lastMessageContent = lastMessage?.content || "No messages";
+  const lastMessageContent =
+    RenderWithMention(lastMessage?.content!, lastMessage?._id!) || "No messages";
 
   const { chatId } = useParams<{ chatId: string }>();
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index b2e9c72e..559dbd0b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -7,7 +7,6 @@ import MessageContent from "./MessageContent";
 import useCheckBox from "@features/forward/hooks/useCheckBox";
 import MessageDetails from "./MessageDetails";
 
-import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
 import useHover from "./hooks/useHover";
 import { useMessageContext } from "./contexts/MessageProvider";
 import React from "react";
@@ -75,7 +74,6 @@ const CheckBoxWrapper = styled.div`
 const Message = React.memo(() => {
   const { _id: id, chatId, isMine, chatType } = useMessageContext();
 
-  const { lastMessageRef } = useScrollToLastMsg();
   useScrollToSearchResultsMsg();
 
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
@@ -94,7 +92,6 @@ const Message = React.memo(() => {
       )}
 
       <StyledMessage
-        ref={lastMessageRef}
         key={id}
         $isMine={chatType === "channel" ? false : isMine}
         data-message-id={id}
diff --git a/app/src/features/chats/SenderName.tsx b/app/src/features/chats/SenderName.tsx
index 236b277e..b5f66c86 100644
--- a/app/src/features/chats/SenderName.tsx
+++ b/app/src/features/chats/SenderName.tsx
@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import { useAppSelector } from "@hooks/useGlobalState";
-import { useChatMembers } from "./hooks/useChatMember";
+import { useChatMembers } from "./hooks/useChatMembers";
 
 import { useMessageContext } from "./contexts/MessageProvider";
 
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index fe6c4599..7baebe61 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -13,7 +13,7 @@ import { setChatIsBlocked } from "@state/messages/chats";
 
 import { useSocket } from "@hooks/useSocket";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
-import { useChatMembers } from "./hooks/useChatMember";
+import { useChatMembers } from "./hooks/useChatMembers";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
 
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMembers.ts
similarity index 99%
rename from app/src/features/chats/hooks/useChatMember.ts
rename to app/src/features/chats/hooks/useChatMembers.ts
index b763df6b..07dc1ed9 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMembers.ts
@@ -12,4 +12,5 @@ export function useChatMembers(memberIDs?: ChatMember[]): Member[] {
       members.find((member) => member._id === filteredID._id)
     )
     .filter((member): member is Member => member !== undefined); // Ensure no undefined values
+    
 }
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 2efbe381..335f5b0d 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -27,6 +27,7 @@ export function useChats() {
 
   useEffect(() => {
     const processMessages = async ({ chats, members }: ChatsState) => {
+      if (!chats) return;
       await Promise.all(
         chats.map(async (chat) => {
           if (chat.type === "private") {
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index c9b4885b..b54d6d0c 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -57,6 +57,11 @@ function useFetchNextPage() {
 
     if (data) {
       const lastFetchedPage = data.pages[data.pages.length - 1];
+      lastFetchedPage.messages.forEach((element: any) => {
+        element.isMention = false;
+        element.isSeen = false;
+      });
+
       if (lastFetchedPage && chatId) {
         processMessages(lastFetchedPage.messages).then(() => {
           dispatch(
diff --git a/app/src/features/chats/hooks/useMentionList.ts b/app/src/features/chats/hooks/useMentionList.ts
new file mode 100644
index 00000000..165aa557
--- /dev/null
+++ b/app/src/features/chats/hooks/useMentionList.ts
@@ -0,0 +1,20 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "../utils/helpers";
+import { useChatMembers } from "./useChatMembers";
+
+function useMentionList() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+
+  const chatMembers = useChatMembers(chat?.members);
+  const filteredMembers = chatMembers.map((member) => ({
+    id: member.username,
+    display: `${member.screenFirstName} ${member.screenLastName}`,
+  }));
+
+  return { filteredMembers };
+}
+
+export default useMentionList;
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 80032b60..1407ae01 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -55,7 +55,9 @@ export const useMessageSender = () => {
         isReply,
         status: MessageStatus.sent,
         media: file,
-        threadMessages: []
+        threadMessages: [],
+        isMention: false,
+        isSeen: false,
       };
 
       const threadMessage = {
diff --git a/app/src/features/chats/hooks/useTraverseMentions.ts b/app/src/features/chats/hooks/useTraverseMentions.ts
new file mode 100644
index 00000000..6d82c138
--- /dev/null
+++ b/app/src/features/chats/hooks/useTraverseMentions.ts
@@ -0,0 +1,80 @@
+import { useParams } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "../utils/helpers";
+import { useEffect, useMemo, useState } from "react";
+import { MessageInterface } from "types/messages";
+import { setIsMention, setIsSeen } from "@state/messages/chats";
+
+function useTraversalMentions() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+  const chatMessages = chat?.messages;
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+
+  const user = useAppSelector((state) => state.user.userInfo);
+  const dispatch = useAppDispatch();
+
+  const [mentionMessages, setMentionMessages] = useState<MessageInterface[]>(
+    []
+  );
+
+  const [currentMentionIndex, setCurrentMentionIndex] = useState(0);
+
+  const currentMentionMessage = useMemo(() => {
+    return mentionMessages[currentMentionIndex];
+  }, [mentionMessages, currentMentionIndex]);
+
+  useEffect(() => {
+    if (chatMessages) {
+      const mentions = chatMessages.filter(
+        (message) => message.isMention && !message.isSeen
+      );
+
+      const userMentions = mentions
+        .filter((mention) => {
+          const match = mentionRegex.exec(mention.content);
+          return match?.[1] === user.username;
+        })
+        .map((mention) => mention._id);
+
+      const filteredMentions = mentions.filter((mention) =>
+        userMentions.includes(mention._id)
+      );
+
+      setMentionMessages(filteredMentions);
+    }
+  }, [chatMessages]);
+
+  const handleNextMentionMessage = () => {
+    if (mentionMessages.length > 0) {
+      setCurrentMentionIndex(
+        (prevIndex) => (prevIndex + 1) % mentionMessages.length
+      );
+      document
+        .querySelector("[data-message-id='" + currentMentionMessage?._id + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      const updatedMessages = [...mentionMessages];
+      updatedMessages.splice(currentMentionIndex, 1);
+      setIsMention({
+        chatId: chatId!,
+        isMention: false,
+        messageId: currentMentionMessage._id,
+      });
+      setMentionMessages(updatedMessages);
+      dispatch(
+        setIsSeen({
+          chatId: chatId!,
+          messageId: currentMentionMessage._id,
+          isSeen: true,
+        })
+      );
+    }
+  };
+  return { handleNextMentionMessage, mentionMessages };
+}
+
+export default useTraversalMentions;
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index cf8148a7..e2dc5db7 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -14,7 +14,7 @@ export function getChatByID({
 export function parseChatsToState(chatData?: any) {
   if (!chatData) return [];
   return chatData?.chats?.map((chat: any): DetailedChatInterface => {
-    const { isMuted, draft, chat: currChat } = chat;
+    const { chat: currChat } = chat;
     const {
       _id: chatId,
       isSeen,
@@ -64,7 +64,7 @@ export function parseChatsToState(chatData?: any) {
       isTyping: false,
       showCheckBox: false,
       selectedMessages: [],
-
+      isMention: false,
       encryptionKey,
       initializationVector,
       messagingPermission,
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 73a4e4ff..7f9954b8 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,71 +41,71 @@ export type ChatDataType = {
   }[];
 };
 
-export const allChats: Chat[] = [
-  {
-    _id: "1",
-    isSeen: false,
-    members: ["1", "2"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "2",
-    isSeen: false,
-    members: ["2", "1"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "3",
-    isSeen: false,
-    members: ["3"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "4",
-    isSeen: false,
-    members: ["4"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "5",
-    isSeen: false,
-    members: ["5"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "6",
-    isSeen: false,
-    members: ["6"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "7",
-    isSeen: false,
-    members: ["7"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "8",
-    isSeen: false,
-    members: ["8"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "9",
-    isSeen: false,
-    members: ["9"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-];
+// export const allChats: Chat[] = [
+//   {
+//     _id: "1",
+//     isSeen: false,
+//     members: ["1", "2"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "2",
+//     isSeen: false,
+//     members: ["2", "1"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "3",
+//     isSeen: false,
+//     members: ["3"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "4",
+//     isSeen: false,
+//     members: ["4"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "5",
+//     isSeen: false,
+//     members: ["5"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "6",
+//     isSeen: false,
+//     members: ["6"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "7",
+//     isSeen: false,
+//     members: ["7"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "8",
+//     isSeen: false,
+//     members: ["8"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "9",
+//     isSeen: false,
+//     members: ["9"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+// ];
 
 export const members: Member[] = [
   {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index d597a632..f7fde1b4 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -65,7 +65,6 @@ function SocketProvider({ children }: SocketProviderProps) {
   const {
     callId,
     joinCall,
-    endCall,
     recieveICE,
     recieveAnswer,
     peerConnection,
@@ -295,7 +294,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       sendOffer();
       handleIceCandidates();
     });
-    socket.on("SIGNAL-SERVER", async ({ type, voiceCallId, data }) => {
+    socket.on("SIGNAL-SERVER", async ({ type, data }) => {
       console.log(typeof data);
       if (type === "ANSWER") recieveAnswer(data);
       if (type === "ICE") recieveICE(data);
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index d1def1f8..faa45904 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -300,8 +300,40 @@ const chatsSlice = createSlice({
       if (chat) {
         chat.photo = photo;
       }
-    }
-  }
+    },
+
+    setIsMention: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isMention: boolean;
+      }>
+    ) => {
+      const { chatId, isMention, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isMention = isMention;
+      }
+    },
+
+    setIsSeen: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isSeen: boolean;
+      }>
+    ) => {
+      const { chatId, isSeen, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isSeen = isSeen;
+      }
+    },
+  },
 });
 
 export const {
@@ -321,7 +353,9 @@ export const {
   setChatIsBlocked,
   setMemberIsBlocked,
   setName,
-  setPhoto
+  setPhoto,
+  setIsMention,
+  setIsSeen,
 } = chatsSlice.actions;
 export default chatsSlice.reducer;
 export type { DetailedChatInterface, ChatsState };
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 8a4329a2..eade1604 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -37,6 +37,8 @@ export interface MessageInterface {
   //TODO: should use parentMessageId
   isReply: boolean;
   threadMessages: string[];
+  isMention: boolean;
+  isSeen: boolean;
 }
 
 export enum StickerTap {
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 611f47f4..4c4a2d78 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import RenderWithMention from "./renderWithMentions";
 
 const HighlightedText = styled.span<{ $highlight?: boolean }>`
   background-color: ${(props) => (props.$highlight ? "yellow" : "transparent")};
@@ -12,21 +13,22 @@ function RenderWithHighlight(
   id?: string
 ) {
   if (!searchTerm) {
-    return content;
+    return RenderWithMention(content, id!);
   }
 
   const result = searchResults?.find((result) => result.messageId === id);
 
   if (!result) {
-    return content;
+    return RenderWithMention(content, id!);
   }
 
-  const before = content.slice(0, result.highlightIndex);
-  const highlighted = content.slice(
-    result.highlightIndex,
-    result.highlightIndex + searchTerm.length
-  );
-  const after = content.slice(result.highlightIndex + searchTerm.length);
+  const before = content.toString().slice(0, result.highlightIndex);
+  const highlighted = content
+    .toString()
+    .slice(result.highlightIndex, result.highlightIndex + searchTerm.length);
+  const after = content
+    .toString()
+    .slice(result.highlightIndex + searchTerm.length);
 
   return (
     <span>
diff --git a/app/src/utils/renderWithMentions.tsx b/app/src/utils/renderWithMentions.tsx
new file mode 100644
index 00000000..5c749cc2
--- /dev/null
+++ b/app/src/utils/renderWithMentions.tsx
@@ -0,0 +1,47 @@
+import { setIsMention } from "@state/messages/chats";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+
+const HighlightedMention = styled.span`
+  font-weight: bolder;
+  cursor: pointer;
+`;
+
+function RenderWithMention(content: string, messageId: string) {
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+  const { chatId } = useParams<{ chatId: string }>();
+  const dispatch = useDispatch();
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  let hasMention = false;
+  while (content && (match = mentionRegex.exec(content)) !== null) {
+    hasMention = true;
+
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+
+    parts.push(
+      <HighlightedMention color="green" key={match[1]}>
+        @{match[1]}
+      </HighlightedMention>
+    );
+
+    lastIndex = mentionRegex.lastIndex;
+  }
+
+  if (hasMention) {
+    dispatch(setIsMention({ chatId: chatId!, isMention: true, messageId }));
+  }
+
+  if (content && lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+
+  return <>{parts}</>;
+}
+
+export default RenderWithMention;

From c0d83ff9b3f634de6aee6be3a229c51de4b5bc03 Mon Sep 17 00:00:00 2001
From: AbdelruhmanSamy <abdelruhman.mohamad04@eng-st.cu.edu.eg>
Date: Sun, 22 Dec 2024 00:45:27 +0200
Subject: [PATCH 131/136] =?UTF-8?q?=F0=9F=90=9B=20Fixing=20=20merge=20issu?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/package-lock.json        | 49 +++++++++++++++++++
 app/package.json             |  1 +
 app/src/mocks/chats/chats.ts |  2 +-
 app/src/mocks/data/chats.ts  | 92 ++++++++++++++++++------------------
 4 files changed, 97 insertions(+), 47 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 5319c4b2..25fc8b5a 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -32,6 +32,7 @@
         "react-hot-toast": "^2.4.1",
         "react-international-phone": "^4.3.0",
         "react-intersection-observer": "^9.13.1",
+        "react-mentions": "^4.4.10",
         "react-modal-image": "^2.6.0",
         "react-router-dom": "^6.27.0",
         "redux-mock-store": "^1.5.5",
@@ -7640,6 +7641,14 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -10231,6 +10240,34 @@
         "react-dom": ">=18.0.0"
       }
     },
+    "node_modules/react-mentions": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/react-mentions/-/react-mentions-4.4.10.tgz",
+      "integrity": "sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==",
+      "dependencies": {
+        "@babel/runtime": "7.4.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.8",
+        "substyle": "^9.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.3",
+        "react-dom": ">=16.8.3"
+      }
+    },
+    "node_modules/react-mentions/node_modules/@babel/runtime": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+      "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.2"
+      }
+    },
+    "node_modules/react-mentions/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/react-modal-image": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-modal-image/-/react-modal-image-2.6.0.tgz",
@@ -10999,6 +11036,18 @@
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
       "license": "MIT"
     },
+    "node_modules/substyle": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/substyle/-/substyle-9.4.1.tgz",
+      "integrity": "sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.4",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.3"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/app/package.json b/app/package.json
index d5252904..85cc4a60 100644
--- a/app/package.json
+++ b/app/package.json
@@ -40,6 +40,7 @@
     "react-hot-toast": "^2.4.1",
     "react-international-phone": "^4.3.0",
     "react-intersection-observer": "^9.13.1",
+    "react-mentions": "^4.4.10",
     "react-modal-image": "^2.6.0",
     "react-router-dom": "^6.27.0",
     "redux-mock-store": "^1.5.5",
diff --git a/app/src/mocks/chats/chats.ts b/app/src/mocks/chats/chats.ts
index f8e02fc2..4e89957f 100644
--- a/app/src/mocks/chats/chats.ts
+++ b/app/src/mocks/chats/chats.ts
@@ -14,7 +14,7 @@ export const chats = [
 
   http.get("/chats/:id", async ({ params }) => {
     const chat = allChats.find((chat) => chat._id.toString() === params.id);
-
+    
     return HttpResponse.json(
       {
         status: "success",
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 7f9954b8..bf471006 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,70 +41,70 @@ export type ChatDataType = {
   }[];
 };
 
-// export const allChats: Chat[] = [
+export const allChats: Chat[] = [];
 //   {
 //     _id: "1",
 //     isSeen: false,
 //     members: ["1", "2"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "2",
 //     isSeen: false,
 //     members: ["2", "1"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "3",
 //     isSeen: false,
 //     members: ["3"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "4",
 //     isSeen: false,
 //     members: ["4"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "5",
 //     isSeen: false,
 //     members: ["5"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "6",
 //     isSeen: false,
 //     members: ["6"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "7",
 //     isSeen: false,
 //     members: ["7"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "8",
 //     isSeen: false,
 //     members: ["8"],
 //     type: "private",
-//     numberOfMembers: 1,
+//     numberOfMembers: 1
 //   },
 //   {
 //     _id: "9",
 //     isSeen: false,
 //     members: ["9"],
 //     type: "private",
-//     numberOfMembers: 1,
-//   },
+//     numberOfMembers: 1
+//   }
 // ];
 
 export const members: Member[] = [
@@ -119,7 +119,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "2",
@@ -132,7 +132,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "3",
@@ -145,7 +145,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "4",
@@ -158,7 +158,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "5",
@@ -171,7 +171,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "6",
@@ -184,7 +184,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "7",
@@ -197,7 +197,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "8",
@@ -210,7 +210,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "9",
@@ -223,7 +223,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "10",
@@ -236,7 +236,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "11",
@@ -249,7 +249,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "12",
@@ -262,7 +262,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "13",
@@ -275,7 +275,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "14",
@@ -288,7 +288,7 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
+    blockedUsers: []
   },
   {
     _id: "15",
@@ -301,8 +301,8 @@ export const members: Member[] = [
     isAdmin: false,
     Role: "member",
     stories: [],
-    blockedUsers: [],
-  },
+    blockedUsers: []
+  }
 ];
 
 export const lastMessages = [
@@ -310,63 +310,63 @@ export const lastMessages = [
     chatId: "1",
     lastMessage: {
       content: "Hello, Alice!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "2",
     lastMessage: {
       content: "Hi, Bob!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "3",
     lastMessage: {
       content: "Hello, Charlie!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "4",
     lastMessage: {
       content: "Hi, David!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "5",
     lastMessage: {
       content: "Hello, Eve!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "6",
     lastMessage: {
       content: "Hi, Frank!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "7",
     lastMessage: {
       content: "Hello, Grace!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "8",
     lastMessage: {
       content: "Hi, Hannah!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
   },
   {
     chatId: "9",
     lastMessage: {
       content: "Hello, Ivy!",
-      timestaamp: "2021-09-01T12:00:00.000Z",
-    },
-  },
+      timestaamp: "2021-09-01T12:00:00.000Z"
+    }
+  }
 ];

From dcae4e851711840eecf11ed6746fb7bcc871f523 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sun, 22 Dec 2024 01:25:49 +0200
Subject: [PATCH 132/136] Feat/calls (#170)

* feat: calls :0

* feat: add turn servers

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/components/AppLayout.tsx              |  21 ++
 .../side-bar/groups/AddMoreMembers.tsx        |   1 -
 app/src/constants.ts                          |   6 +
 .../authentication/signup/hooks/useSignup.ts  |  10 +-
 app/src/features/calls/CallLayout.tsx         |  43 ++-
 app/src/features/calls/SpeakerEnable.tsx      |  48 +++
 app/src/features/calls/call.ts                | 100 -------
 .../features/calls/context/CallProvider.tsx   | 276 +++++++++++++++---
 app/src/features/chats/ChatInput.tsx          |   3 +-
 app/src/features/chats/Topbar.tsx             |  25 +-
 .../chats/media/MediaUploadComponent.tsx      |   3 +-
 app/src/features/chats/utils/helpers.ts       |   2 +-
 app/src/main.tsx                              |  12 +-
 app/src/sockets/SocketProvider.tsx            | 238 +++++++--------
 app/src/types/calls.ts                        |  39 ++-
 app/src/types/socket.ts                       |   1 +
 app/src/utils/socket.tsx                      |  28 +-
 17 files changed, 522 insertions(+), 334 deletions(-)
 create mode 100644 app/src/features/calls/SpeakerEnable.tsx
 delete mode 100644 app/src/features/calls/call.ts

diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
index 833f86d6..0adac60d 100644
--- a/app/src/components/AppLayout.tsx
+++ b/app/src/components/AppLayout.tsx
@@ -4,6 +4,10 @@ import Main from "./Main";
 import SideBar from "./side-bar/SideBar";
 import { DESKTOP_VIEW, MOBILE_VIEW } from "@constants";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
+import { useEffect, useState } from "react";
+import { useSocket } from "@hooks/useSocket";
+import { callStatusEmitter } from "@features/calls/context/callStatusEmitter";
+import CallLayout from "@features/calls/CallLayout";
 
 const StyledApp = styled.div<{
   $isChatOpen: boolean;
@@ -40,7 +44,17 @@ function AppLayout() {
   const { chatId } = useParams();
   const isChatOpen = !!chatId;
   const { isRightSideBarOpen } = useRightSideBarContext();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [callStatus, setCallStatus] = useState<
+    "inactive" | "active" | "calling" | "incoming" | "ended"
+  >("inactive");
 
+  useEffect(() => {
+    const handler = (status: typeof callStatus) => setCallStatus(status);
+    callStatusEmitter.on("update", handler);
+
+    return () => callStatusEmitter.off("update", handler);
+  }, []);
   return (
     <StyledApp
       $isChatOpen={isChatOpen}
@@ -50,6 +64,13 @@ function AppLayout() {
       <SideBar type="left" />
       <Main>
         <Outlet />
+        {callStatus != "inactive" && (
+          <CallLayout
+            isCollapsed={isCollapsed}
+            setIsCollapsed={setIsCollapsed}
+            callStatus={callStatus}
+          />
+        )}
       </Main>
       {isRightSideBarOpen && <SideBar type="right" />}
     </StyledApp>
diff --git a/app/src/components/side-bar/groups/AddMoreMembers.tsx b/app/src/components/side-bar/groups/AddMoreMembers.tsx
index 102cf7f2..dbd24ca5 100644
--- a/app/src/components/side-bar/groups/AddMoreMembers.tsx
+++ b/app/src/components/side-bar/groups/AddMoreMembers.tsx
@@ -30,7 +30,6 @@ function AddMoreMembers() {
   const dispatch = useDispatch();
 
   if (isPending) return;
-  console.log(chatType);
 
   function handleClick() {
     addGroupMembers({
diff --git a/app/src/constants.ts b/app/src/constants.ts
index a6a2f2c3..66f674b9 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -5,6 +5,9 @@ const {
   VITE_PORT: PORT,
   VITE_ENV: ENV,
   VITE_BACKEND_STORGAE: STATIC_MEDIA_URL,
+  TURN_URL,
+  VITE_TURN_USERNAME: TURN_USERNAME,
+  VITE_TURN_PASSWORD: TURN_PASSWORD
 } = import.meta.env;
 
 const MOBILE_VIEW = "(max-width: 800px)";
@@ -21,4 +24,7 @@ export {
   MOBILE_VIEW,
   DESKTOP_VIEW,
   MAX_STORY_SIZE,
+  TURN_URL,
+  TURN_USERNAME,
+  TURN_PASSWORD
 };
diff --git a/app/src/features/authentication/signup/hooks/useSignup.ts b/app/src/features/authentication/signup/hooks/useSignup.ts
index 66ad2bf3..e594a0b6 100644
--- a/app/src/features/authentication/signup/hooks/useSignup.ts
+++ b/app/src/features/authentication/signup/hooks/useSignup.ts
@@ -6,19 +6,15 @@ export function useSignup() {
     mutate: signup,
     isSuccess,
     isPending,
-    isError,
+    isError
   } = useMutation({
-    mutationFn: Signup,
-
-    onSuccess: (email) => {
-      console.log(email);
-    },
+    mutationFn: Signup
   });
 
   return {
     signup,
     isPending,
     isSuccess,
-    isError,
+    isError
   };
 }
diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
index c2c4a2ef..99470a8b 100644
--- a/app/src/features/calls/CallLayout.tsx
+++ b/app/src/features/calls/CallLayout.tsx
@@ -7,6 +7,7 @@ import { useCallContext } from "./hooks/useCallContext";
 import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
+import { EnableSpeaker } from "./SpeakerEnable";
 
 const ModalContainer = styled.div`
   position: fixed;
@@ -193,21 +194,19 @@ const ActiveHeaderOpen = styled.div`
 type PropsType = {
   isCollapsed: boolean;
   setIsCollapsed: (arg0: boolean) => void;
-  chatId: string | undefined;
   callStatus: string | undefined;
 };
 
 export default function CallLayout({
   isCollapsed,
   setIsCollapsed,
-  chatId,
   callStatus
 }: PropsType) {
-  const { endCall } = useCallContext();
-  const { acceptCall } = useSocket();
+  const { acceptCall, finishCall } = useSocket();
+  const { endCall, chatId } = useCallContext();
   const chats = useAppSelector((state) => state.chats.chats);
   const chat = getChatByID({
-    chatID: chatId ?? "",
+    chatID: chatId.current ?? "",
     chats: chats
   });
 
@@ -249,16 +248,30 @@ export default function CallLayout({
                           <ButtonText>accept</ButtonText>
                         </ButtonContainer>
                       )}
-                      <ButtonContainer>
-                        <RoundButton
-                          onClick={() => endCall()}
-                          $bgColor="var(--color-error)"
-                          $bgColorHover="var(--color-error-shade)"
-                        >
-                          {getIcon("EndCall")}
-                        </RoundButton>
-                        <ButtonText>end call</ButtonText>
-                      </ButtonContainer>
+
+                      {callStatus === "incoming" ? (
+                        <ButtonContainer>
+                          <RoundButton
+                            onClick={() => endCall()}
+                            $bgColor="var(--color-error)"
+                            $bgColorHover="var(--color-error-shade)"
+                          >
+                            {getIcon("EndCall")}
+                          </RoundButton>
+                          <ButtonText>end call</ButtonText>
+                        </ButtonContainer>
+                      ) : (
+                        <ButtonContainer>
+                          <RoundButton
+                            onClick={() => finishCall()}
+                            $bgColor="var(--color-error)"
+                            $bgColorHover="var(--color-error-shade)"
+                          >
+                            {getIcon("EndCall")}
+                          </RoundButton>
+                          <ButtonText>end call</ButtonText>
+                        </ButtonContainer>
+                      )}
                     </ButtonsContainer>
                   </AvatarContainer>
                 </ModalContent>
diff --git a/app/src/features/calls/SpeakerEnable.tsx b/app/src/features/calls/SpeakerEnable.tsx
new file mode 100644
index 00000000..16f32892
--- /dev/null
+++ b/app/src/features/calls/SpeakerEnable.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { useCallContext } from "./hooks/useCallContext";
+
+interface EnableSpeakerProps {
+  children?: React.ReactNode;
+}
+
+export const EnableSpeaker: React.FC<EnableSpeakerProps> = ({ children }) => {
+  const { clientId } = useCallContext();
+
+  useEffect(() => {
+    const playStreamsToSpeaker = () => {
+      if (!clientId?.current) {
+        console.warn("clientId is not available or has no current value.");
+        return;
+      }
+
+      clientId.current.forEach((clientData, clientIdKey) => {
+        if (!clientData || !clientData.connection) {
+          console.warn(`No connection found for client: ${clientIdKey}`);
+          return;
+        }
+
+        // Get all tracks from the remote connection
+        const receivers = clientData.connection.getReceivers();
+        const remoteStream = new MediaStream(
+          receivers.map((receiver) => receiver.track).filter(Boolean)
+        );
+
+        if (remoteStream && remoteStream.getTracks().length > 0) {
+          const audio = new Audio();
+          audio.srcObject = remoteStream;
+          audio.play().catch((err) => {
+            console.error(
+              `Failed to play audio for client: ${clientIdKey}`,
+              err
+            );
+          });
+          console.log(`Playing audio for client: ${clientIdKey}`);
+        }
+      });
+    };
+
+    playStreamsToSpeaker();
+  }, [clientId]);
+
+  return <div>{children}</div>;
+};
diff --git a/app/src/features/calls/call.ts b/app/src/features/calls/call.ts
deleted file mode 100644
index c7d9f28f..00000000
--- a/app/src/features/calls/call.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-export let callState = "idle";
-const stunServers = {
-  iceServers: [
-    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] }
-  ]
-};
-export async function getVoiceInput(): Promise<MediaStream | null> {
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    return stream;
-  } catch (error) {
-    console.error("Error accessing microphone:", error);
-    return null;
-  }
-}
-
-const RemoteStream: MediaStream = new MediaStream();
-export const connectToPeer = async (
-  peerConnection: RTCPeerConnection | null,
-  localStream: MediaStream | null
-) => {
-  callState = "connecting";
-  peerConnection = new RTCPeerConnection(stunServers);
-  if (!localStream) localStream = await getVoiceInput();
-  console.log(localStream);
-  localStream?.getTracks().forEach((t) => {
-    peerConnection.addTrack(t, localStream);
-  });
-
-  peerConnection.ontrack = (e) => {
-    e.streams[0]?.getTracks().forEach((track) => RemoteStream.addTrack(track));
-  };
-
-  await new Promise((resolve) => {
-    const timeout = setTimeout(() => {
-      resolve(null);
-    }, 10000);
-
-    peerConnection.onicecandidate = (event) => {
-      if (!event.candidate) {
-        clearTimeout(timeout);
-        resolve(null);
-      }
-    };
-  });
-  const offer = await peerConnection.createOffer();
-  await peerConnection.setLocalDescription(offer);
-  return JSON.stringify(offer);
-};
-export const createOffer = async (
-  peerConnection: RTCPeerConnection | null,
-  localStream: MediaStream | null
-) => {
-  peerConnection = new RTCPeerConnection(stunServers);
-  if (!localStream) localStream = await getVoiceInput();
-  console.log(localStream);
-  localStream?.getTracks().forEach((t) => {
-    peerConnection.addTrack(t, localStream);
-  });
-
-  peerConnection.ontrack = (e) => {
-    e.streams[0]?.getTracks().forEach((track) => RemoteStream.addTrack(track));
-  };
-
-  const offer = await peerConnection.createOffer();
-  await peerConnection.setLocalDescription(offer);
-
-  return JSON.stringify(offer);
-};
-export const handleIceCandidates = async (
-  peerConnection: RTCPeerConnection,
-  sendCandidate: (candidate: string) => void
-) => {
-  return new Promise((resolve) => {
-    const timeout = setTimeout(() => {
-      resolve(null);
-    }, 10000);
-
-    peerConnection.onicecandidate = (event) => {
-      if (!event.candidate) {
-        clearTimeout(timeout);
-        resolve(null);
-      }
-      sendCandidate(JSON.stringify(event.candidate));
-    };
-  });
-};
-export const createAnswer = async (offer: string) => {
-  await connectToPeer();
-  const offer_parsed = JSON.parse(offer);
-  await peerConnection.setRemoteDescription(offer_parsed);
-  const answer = await peerConnection.createAnswer();
-  await peerConnection.setLocalDescription(answer);
-  return JSON.stringify(answer);
-};
-export const startCall = async (answer: string) => {
-  callState = "ongoing";
-  const offer_parsed = JSON.parse(answer);
-  await peerConnection.setRemoteDescription(offer_parsed);
-};
diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
index c35b6dd6..fb4d6320 100644
--- a/app/src/features/calls/context/CallProvider.tsx
+++ b/app/src/features/calls/context/CallProvider.tsx
@@ -1,34 +1,92 @@
 import React, { ReactNode, useCallback, useRef } from "react";
 import { CallContext } from "./CallContext";
 import { useAppSelector } from "@hooks/useGlobalState";
-import { createOffer, getVoiceInput } from "../call";
 import { callStatusEmitter } from "./callStatusEmitter";
 import { CallStatus } from "types/calls";
-
+import { TURN_USERNAME, TURN_PASSWORD } from "@constants";
+const Servers = {
+  iceServers: [
+    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] },
+    {
+      urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"]
+    },
+    {
+      urls: "turn:global.relay.metered.ca:80",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    },
+    {
+      urls: "turn:global.relay.metered.ca:80?transport=tcp",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    },
+    {
+      urls: "turn:global.relay.metered.ca:443",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    },
+    {
+      urls: "turns:global.relay.metered.ca:443?transport=tcp",
+      username: TURN_USERNAME,
+      credential: TURN_PASSWORD
+    }
+  ]
+};
 export const CallProvider: React.FC<{ children: ReactNode }> = ({
   children
 }) => {
   const userId = useAppSelector((state) => state.user.userInfo.id);
-
-  const callAccepted = useRef<string | null>(null);
   const callIdRef = useRef<string | null>(null);
   const senderIdRef = useRef<string | null>(null);
   const chatIdRef = useRef<string | null>(null);
-  const peerConnection = useRef<RTCPeerConnection | null>(null);
   const localStream = useRef<MediaStream | null>(null);
-  const offer = useRef<string | null>(null);
-  const answer = useRef<string | null>(null);
+  const offer = useRef<RTCSessionDescriptionInit | null>(null);
   const callStatus = useRef<CallStatus>("inactive");
+  const clientIdRef = useRef<
+    Map<string, { connection: RTCPeerConnection | null; offerSent: boolean }>
+  >(new Map());
 
-  const setCallStatus = (status: typeof callStatus.current) => {
+  const addClientId = useCallback(
+    (
+      clientId: string,
+      connection: RTCPeerConnection | null,
+      offerSent: boolean
+    ) => {
+      clientIdRef.current.set(clientId, { connection, offerSent });
+    },
+    []
+  );
+
+  const removeClientId = useCallback((clientId: string) => {
+    if (clientIdRef.current.has(clientId)) {
+      clientIdRef.current.delete(clientId);
+    }
+  }, []);
+
+  const clearClientIds = useCallback(() => {
+    clientIdRef.current.clear();
+  }, []);
+  const setChatId = useCallback((chatId: string) => {
+    chatIdRef.current = chatId;
+  }, []);
+  const hasClientId = useCallback(
+    (clientId: string, offerSent: boolean | null = null) => {
+      const clientData = clientIdRef.current.get(clientId);
+      return (
+        !!clientData &&
+        (offerSent === null || clientData.offerSent === offerSent)
+      );
+    },
+    []
+  );
+
+  const setCallStatus = useCallback((status: CallStatus) => {
     callStatus.current = status;
-    console.log(status);
     callStatusEmitter.emit("update", status);
-  };
+  }, []);
 
   const joinCall = useCallback(
     (newSenderId: string, newChatId: string, newCallId: string) => {
-      console.log(callIdRef.current, newCallId);
       if (!callIdRef.current) {
         if (newSenderId === userId) {
           setCallStatus("calling");
@@ -40,7 +98,7 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
         chatIdRef.current = newChatId;
       }
     },
-    [userId]
+    [setCallStatus, userId]
   );
 
   const endCall = useCallback(() => {
@@ -48,52 +106,194 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
     callIdRef.current = null;
     senderIdRef.current = null;
     chatIdRef.current = null;
-    callAccepted.current = null;
-    peerConnection.current?.close();
-    peerConnection.current = null;
+    if (localStream.current) {
+      localStream.current.getTracks().forEach((track) => {
+        track.stop();
+      });
+    }
+    clientIdRef.current.forEach((clientData, clientId) => {
+      if (clientData.connection) {
+        clientData.connection.close();
+      }
+
+      removeClientId(clientId);
+    });
+    const remoteAudioElements = document.querySelectorAll("audio");
+    remoteAudioElements.forEach((audio) => audio.remove());
+
     localStream.current = null;
-  }, []);
+    clearClientIds();
+  }, [clearClientIds, removeClientId, setCallStatus]);
 
   const acceptCall = useCallback(() => {
-    setCallStatus("active");
-    callAccepted.current = callIdRef.current;
-  }, []);
+    if (callIdRef.current && chatIdRef.current) {
+      if (
+        senderIdRef.current === userId &&
+        (!clientIdRef.current || clientIdRef.current.size === 0)
+      ) {
+        setCallStatus("calling");
+      } else {
+        setCallStatus("active");
+      }
+    }
+  }, [setCallStatus, userId]);
 
-  const startPeerConnection = useCallback(async () => {
-    localStream.current = await getVoiceInput();
-    offer.current = await createOffer(
-      peerConnection.current,
-      localStream.current
-    );
-  }, []);
+  const startPeerConnection = useCallback(
+    async (clientId: string) => {
+      if (!clientId) return null;
+      if (!localStream.current) {
+        localStream.current = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+          video: false
+        });
+      }
+
+      if (!localStream.current) {
+        alert("Failed to get voice input.");
+        endCall();
+        return null;
+      }
+      const peerConnection = new RTCPeerConnection(Servers);
+      localStream.current.getTracks().forEach((track) => {
+        peerConnection?.addTrack(track, localStream.current);
+      });
+      peerConnection.ontrack = (event) => {
+        if (event.track.kind === "audio") {
+          const remoteAudio = document.createElement("audio");
+          remoteAudio.srcObject = event.streams[0];
+          remoteAudio.autoplay = true;
+          remoteAudio.controls = true;
+          document.body.appendChild(remoteAudio);
+        }
+      };
+      const offer = await peerConnection.createOffer();
+      if (!hasClientId(clientId) || hasClientId(clientId, false)) {
+        await peerConnection.setLocalDescription(offer);
+        addClientId(clientId, peerConnection, true);
+        setCallStatus("active");
+        return offer;
+      }
+      return null;
+    },
+    [addClientId, endCall, hasClientId, setCallStatus]
+  );
+
+  const recieveICE = useCallback(
+    async (candidate: RTCIceCandidateInit, senderId: string) => {
+      if (hasClientId(senderId, true)) {
+        const clientData = clientIdRef.current.get(senderId);
+        if (clientData) {
+          if (!clientData.connection) return;
+          clientData.connection.addIceCandidate(candidate);
+        }
+      }
+    },
+    [hasClientId]
+  );
+
+  const recieveAnswer = useCallback(
+    (data: RTCSessionDescriptionInit, senderId: string) => {
+      if (hasClientId(senderId, true)) {
+        const clientData = clientIdRef.current.get(senderId);
+        if (clientData && clientData.connection) {
+          clientData.connection.setRemoteDescription(data);
+          setCallStatus("active");
+        }
+      }
+    },
+    [hasClientId, setCallStatus]
+  );
+  const createAnswer = useCallback(
+    async (data: RTCSessionDescriptionInit, senderId: string) => {
+      if (!senderId || !data) {
+        console.warn("Invalid senderId or data provided.");
+        return null;
+      }
 
-  const recieveICE = useCallback(async (candidate: RTCIceCandidateInit) => {
-    if (peerConnection.current) {
       try {
-        await peerConnection.current.addIceCandidate(candidate);
-        console.log("ICE candidate added successfully.");
+        const peerConnection = new RTCPeerConnection(Servers);
+        if (!localStream.current) {
+          localStream.current = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: false
+          });
+        }
+
+        if (!localStream.current) {
+          alert("Failed to get voice input.");
+          endCall();
+          return null;
+        }
+        localStream.current.getTracks().forEach((track) => {
+          peerConnection.addTrack(track, localStream.current);
+        });
+        await peerConnection.setRemoteDescription(data);
+        const answer = await peerConnection.createAnswer();
+        await peerConnection.setLocalDescription(answer);
+        peerConnection.ontrack = (event) => {
+          if (event.track.kind === "audio") {
+            const remoteAudio = document.createElement("audio");
+            remoteAudio.srcObject = event.streams[0];
+            remoteAudio.autoplay = true;
+            remoteAudio.controls = true;
+            document.body.appendChild(remoteAudio);
+          }
+        };
+        peerConnection.oniceconnectionstatechange = () => {
+          const state = peerConnection.iceConnectionState;
+
+          switch (state) {
+            case "connected":
+              console.log("Peer connection established.");
+              break;
+            case "disconnected":
+              console.warn("Peer connection disconnected.");
+              break;
+            case "failed":
+              console.error("Peer connection failed. Restarting ICE?");
+              break;
+            case "closed":
+              console.log("Peer connection closed.");
+              break;
+            default:
+              console.log("ICE connection state:", state);
+              break;
+          }
+        };
+
+        addClientId(senderId, peerConnection, false);
+        return answer;
       } catch (error) {
-        console.error("Failed to add ICE candidate:", error);
+        console.error("Error creating answer:", error);
+        return null;
       }
+    },
+    [addClientId, endCall]
+  );
+
+  const getPeerConnection = useCallback((clientId: string) => {
+    const clientData = clientIdRef.current.get(clientId);
+    if (clientData) {
+      return clientData.connection;
     }
+    return null;
   }, []);
 
-  const recieveAnswer = useCallback(() => {}, []);
-
   const contextValue = {
-    peerConnection: peerConnection,
     callId: callIdRef,
     senderId: senderIdRef,
     chatId: chatIdRef,
     startPeerConnection,
-    offer: offer,
-    answer: answer,
+    offer,
+    clientId: clientIdRef,
+    setChatId,
     acceptCall,
-    callAccepted: callAccepted,
     joinCall,
+    createAnswer,
     endCall,
     recieveICE,
-    recieveAnswer
+    recieveAnswer,
+    getPeerConnection
   };
 
   return (
diff --git a/app/src/features/chats/ChatInput.tsx b/app/src/features/chats/ChatInput.tsx
index 831f6814..eb7d7192 100644
--- a/app/src/features/chats/ChatInput.tsx
+++ b/app/src/features/chats/ChatInput.tsx
@@ -96,7 +96,6 @@ function ChatInput() {
     setError("");
   }
 
-  console.log(currChat?.messagingPermission);
 
   const isGroupWithoutPostPermission =
     currChat?.type === "group" &&
@@ -115,7 +114,7 @@ function ChatInput() {
   return (
     <>
       {isFilePreviewOpen && file && (
-        <FilePreviewItem data-testid="file-preview" chatId={chatId} />
+        <FilePreviewItem data-testid="file-preview" chatId={chatId}  />
       )}
 
       {isBlocked ? null : (
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index 7baebe61..f9c435aa 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -1,29 +1,22 @@
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
-
 import Avatar from "@components/Avatar";
 import Icon from "@components/Icon";
 import SearchBar from "@features/search/components/SearchBar";
 import PinnedMessages from "@features/pin-messages/components/PinnedMessages";
-import CallLayout from "@features/calls/CallLayout";
-
 import { getIcon } from "@data/icons";
 import { setChatIsBlocked } from "@state/messages/chats";
-
 import { useSocket } from "@hooks/useSocket";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
 import { useChatMembers } from "./hooks/useChatMembers";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
-
 import { getElapsedTime } from "@utils/helpers";
 import { getChatByID } from "./utils/helpers";
 import { updateSideBarView } from "@state/side-bar/sideBar";
 import { sideBarPages } from "types/sideBar";
-
 import { resetActiveThread } from "@state/messages/channels";
-import { callStatusEmitter } from "@features/calls/context/callStatusEmitter";
 
 const Container = styled.div<{ $hasMargin?: boolean }>`
   position: absolute;
@@ -126,18 +119,10 @@ function Topbar() {
   const dispatch = useAppDispatch();
   const { activeThread } = useAppSelector((state) => state.channelsThreads);
   const [isSearching, setIsSearching] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(false);
   const { createVoiceCall } = useSocket();
   const [callStatus, setCallStatus] = useState<
     "inactive" | "active" | "calling" | "incoming" | "ended"
   >("inactive");
-
-  useEffect(() => {
-    const handler = (status: typeof callStatus) => setCallStatus(status);
-    callStatusEmitter.on("update", handler);
-
-    return () => callStatusEmitter.off("update", handler);
-  }, []);
   const startCall = () => {
     if (chatId && callStatus === "inactive") {
       createVoiceCall({ chatId });
@@ -215,15 +200,7 @@ function Topbar() {
 
   return (
     <>
-      {callStatus != "inactive" && (
-        <CallLayout
-          isCollapsed={isCollapsed}
-          setIsCollapsed={setIsCollapsed}
-          chatId={chatId}
-          callStatus={callStatus}
-        />
-      )}
-      <Container data-testid="chat-topbar" $hasMargin={isCollapsed}>
+      <Container data-testid="chat-topbar">
         {!activeThread && (
           <Avatar
             data-testid="chat-avatar"
diff --git a/app/src/features/chats/media/MediaUploadComponent.tsx b/app/src/features/chats/media/MediaUploadComponent.tsx
index be0e1e3e..de751702 100644
--- a/app/src/features/chats/media/MediaUploadComponent.tsx
+++ b/app/src/features/chats/media/MediaUploadComponent.tsx
@@ -22,11 +22,10 @@ export default function MediaUploadComponent({
   const fileInput = useRef(null);
 
   const onAddFile = async (e: ChangeEvent<HTMLInputElement>) => {
-    console.log("file");
     if (e.target.files) {
       console.log("file", e.target.files[0]);
       setFile(e.target.files[0]);
-      event.target.value = "";
+      e.target.value = "";
     }
 
     setIsFilePreviewOpen(true);
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index e2dc5db7..1308bb23 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -151,6 +151,6 @@ export const decryptMessage = async ({
 
     return new TextDecoder().decode(decryptedBuffer);
   } catch (err: any) {
-    return Error(`Decryption error: ${err.message}`);
+    console.error(`Decryption error: ${err.message}`);
   }
 };
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 6496bcc5..81323678 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,4 +1,4 @@
-// import { StrictMode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import { Provider } from "react-redux";
@@ -16,10 +16,10 @@ async function enableMocking() {
 
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
-    // <StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
-    // </StrictMode>
+    <StrictMode>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </StrictMode>
   );
 });
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index f7fde1b4..219014bf 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactNode, useCallback } from "react";
+import { useEffect, ReactNode, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
@@ -61,17 +61,17 @@ interface AckCreateGroup {
 }
 
 function SocketProvider({ children }: SocketProviderProps) {
-  const [isConnected, setIsConnected] = useState(false);
   const {
     callId,
     joinCall,
     recieveICE,
     recieveAnswer,
-    peerConnection,
+    setChatId,
+    getPeerConnection,
+    createAnswer,
     startPeerConnection,
     offer,
-    acceptCall: setAcceptedCall,
-    callAccepted
+    acceptCall: setAcceptedCall
   } = useCallContext();
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -84,82 +84,93 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   const { decrypt } = useEncryptDecrypt();
   const { chat } = useChat();
-  const handleIceCandidates = useCallback(async () => {
-    return new Promise((resolve) => {
-      const timeout = setTimeout(() => {
-        resolve(null);
-      }, 10000);
-      if (peerConnection && isConnected && socket && callId) {
-        peerConnection.onicecandidate = (event) => {
-          if (!event.candidate) {
-            clearTimeout(timeout);
-            resolve(null);
-          }
-          socket.emit("SIGNAL-SERVER", {
-            type: "ICE",
-            voiceCallId: callId,
-            data: event.candidate
-          });
-        };
-      }
-    });
-  }, [peerConnection, isConnected, socket, callId]);
-  const sendOffer = useCallback(() => {
-    if (offer && isConnected && socket && callId) {
-      socket.emit("SIGNAL-SERVER", {
-        type: "OFFER",
-        voiceCallId: callId,
-        data: offer
+  const handleIceCandidates = useCallback(
+    async (clientId: string) => {
+      return new Promise((resolve) => {
+        const timeout = setTimeout(() => {
+          resolve(null);
+        }, 10000);
+        if (socket?.connected && socket && callId.current) {
+          const peerConnection = getPeerConnection(clientId);
+          if (!peerConnection) return;
+          peerConnection.onicecandidate = (event) => {
+            if (!event.candidate) {
+              clearTimeout(timeout);
+              resolve(null);
+            }
+            socket.emit("SIGNAL-SERVER", {
+              type: "ICE",
+              voiceCallId: callId.current,
+              data: event.candidate,
+              targetId: clientId
+            });
+          };
+        }
       });
-    }
-  }, [offer, isConnected, socket, callId]);
+    },
+    [socket, callId, getPeerConnection]
+  );
+  const sendOffer = useCallback(
+    (clientId: string, offer: RTCSessionDescriptionInit) => {
+      if (
+        socket &&
+        offer &&
+        socket?.connected &&
+        socket &&
+        callId.current &&
+        clientId
+      ) {
+        socket.emit("SIGNAL-SERVER", {
+          type: "OFFER",
+          voiceCallId: callId.current,
+          data: offer,
+          targetId: clientId
+        });
+      }
+    },
+    [socket, callId]
+  );
   const acceptCall = useCallback(() => {
-    console.log(callId, callAccepted, isConnected, socket);
-    if (isConnected && socket && callId.current && !callAccepted.current) {
-      console.log("acceptCall", callId.current);
+    if (socket?.connected && socket && callId.current) {
       setAcceptedCall();
       socket.emit("JOIN-CALL", { voiceCallId: callId.current });
     }
-  }, [callAccepted, isConnected, socket, callId, setAcceptedCall]);
+  }, [socket, callId, setAcceptedCall]);
+  const finishCall = useCallback(() => {
+    if (socket?.connected && socket && callId.current) {
+      socket.emit("LEAVE", { voiceCallId: callId.current });
+      endCall();
+    }
+  }, [socket, callId, endCall]);
   const sendAnswer = useCallback(
-    (
-      answer: string,
-      callback?: (response: { success: boolean; error?: string }) => void
-    ) => {
-      if (isConnected && socket) {
-        socket.emit(
-          "SEND_ANSWER",
-          { answer },
-          (response: { success: boolean; error?: string }) => {
-            if (callback) {
-              callback(response);
-            } else if (!response.success) {
-              console.error("Failed to send answer:", response.error);
-            } else {
-              console.log("Answer sent successfully");
-            }
-          }
-        );
-      } else {
-        console.warn("Cannot send answer: not connected to socket server");
+    (clientId: string, answer: RTCSessionDescriptionInit) => {
+      if (
+        socket &&
+        offer &&
+        socket?.connected &&
+        socket &&
+        callId.current &&
+        clientId
+      ) {
+        socket.emit("SIGNAL-SERVER", {
+          type: "ANSWER",
+          voiceCallId: callId.current,
+          data: answer,
+          targetId: clientId
+        });
       }
     },
-    [isConnected, socket]
+    [socket, callId, offer]
   );
   useEffect(() => {
     if (!socket) return;
-    if (!socket.connected) socket.connect();
 
     const onConnect = () => {
-      setIsConnected(true);
-      console.log("Socket connected");
-
       socket.io.engine.on("close", (reason) => {
         console.log("Socket connection closed:", reason);
       });
     };
     const onReceiveMessage = (message: MessageInterface) => {
-      console.log("Received message:", message);
       if (!chat) {
         console.warn("No chat context available for decryption");
         return;
@@ -226,17 +237,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     socket.on("typing", (isTyping, message) =>
       handleIsTyping(dispatch, isTyping, message.chatId)
     );
-
-    // socket.on("RECIEVE_OFFER", async (offer) => {
-    //   console.log(offer);
-    //   const answer = await createAnswer(offer);
-    //   sendAnswer(answer);
-    // });
-    // socket.on("RECEIVE_ANSWER", async (answer: string) => {
-    //   console.log(answer);
-    //   startCall(answer);
-    // });
-
     socket.on(
       "DELETE_MESSAGE_SERVER",
       ({ chatId, id }: { chatId: string; id: string }) => {
@@ -282,22 +282,43 @@ function SocketProvider({ children }: SocketProviderProps) {
         voiceCallId: string;
         chatId: string;
       }) => {
-        console.log("call id", voiceCallId);
         joinCall(snederId, chatId, voiceCallId);
-        console.log(snederId, userId);
         if (snederId === userId) acceptCall();
       }
     );
-    socket.on("CLIENT-JOINED", () => {
-      console.log("CLIENT-JOINED");
-      startPeerConnection();
-      sendOffer();
-      handleIceCandidates();
+    socket.on("CLIENT-JOINED", async ({ clientId }) => {
+      const offer = await startPeerConnection(clientId);
+      try {
+        if (offer && clientId) {
+          sendOffer(clientId, offer);
+          handleIceCandidates(clientId);
+        } else throw new Error("Failed to send offer");
+      } catch {
+        console.error("Failed to send offer");
+      }
     });
-    socket.on("SIGNAL-SERVER", async ({ type, data }) => {
-      console.log(typeof data);
-      if (type === "ANSWER") recieveAnswer(data);
-      if (type === "ICE") recieveICE(data);
+    socket.on(
+      "SIGNAL-CLIENT",
+      async ({ type, voiceCallId, data, senderId }) => {
+        if (voiceCallId == callId.current) {
+          if (type === "OFFER") {
+            const answer = await createAnswer(data, senderId);
+            if (answer) {
+              sendAnswer(senderId, answer);
+              handleIceCandidates(senderId);
+            } else {
+              console.error("Failed to create answer");
+            }
+          }
+          if (type === "ANSWER") recieveAnswer(data, senderId);
+          if (type === "ICE") recieveICE(data, senderId);
+        }
+      }
+    );
+    socket.on("CLIENT-LEFT", ({ voiceCallId, clientId }) => {
+      if (voiceCallId === callId.current) {
+        endCall(clientId);
+      }
     });
     socket.emit("typing");
 
@@ -313,10 +334,10 @@ function SocketProvider({ children }: SocketProviderProps) {
       socket.off("typing");
       // socket.io.engine.off("close");
     };
-  }, [socket, chat, decrypt, dispatch, queryClient, user]);
+  }, [socket, chat]);
 
   const sendMessage = (sentMessage: MessageInterface) => {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       console.log("messageToSend", sentMessage);
       socket.emit(
         "SEND_MESSAGE",
@@ -377,7 +398,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     content: string,
     chatId: string
   ) => {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "EDIT_MESSAGE_CLIENT",
         { messageId, content, chatId },
@@ -402,13 +423,12 @@ function SocketProvider({ children }: SocketProviderProps) {
       );
     }
   };
-
   const pinMessageSocket = (
     chatId: string,
     messageId: string,
     userId: string
   ) => {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit("PIN_MESSAGE_CLIENT", { messageId, chatId, userId });
     } else {
       console.warn("Cannot pin message: not connected to socket server");
@@ -420,29 +440,20 @@ function SocketProvider({ children }: SocketProviderProps) {
     messageId: string,
     userId: string
   ) => {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit("UNPIN_MESSAGE_CLIENT", { messageId, chatId, userId });
     } else {
       console.warn("Cannot unpin message: not connected to socket server");
     }
   };
   const createVoiceCall = ({ chatId }: { chatId: string }) => {
-    console.log("create call", isConnected, socket, chatId, callId.current);
-    if (isConnected && socket && !callId.current) {
+    if (socket?.connected && socket && !callId.current) {
+      setChatId(chatId);
       socket.emit("CREATE-CALL", {
         chatId
       });
     }
   };
-  // const startConnection = async (callId: string) => {
-  //   const offer = await connectToPeer();
-  //   if (isConnected && socket) {
-  //     console.log(offer);
-  //     socket.emit("SEND_OFFER", { offer });
-  //   } else {
-  //     console.warn("Cannot unpin message: not connected to socket server");
-  //   }
-  // };
 
   function createGroupOrChannel({
     type,
@@ -453,13 +464,12 @@ function SocketProvider({ children }: SocketProviderProps) {
     name: string;
     members: string[];
   }) {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "CREATE_GROUP_CHANNEL",
         { type, name, members },
         ({ success, data, error }: AckCreateGroup) => {
           if (success) {
-            console.log("Group/Channel ID:", data?._id);
             navigate(`/${data?._id}`);
           } else {
             toast.error(error || `Failed to create ${type}`);
@@ -480,7 +490,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     chatId: string;
     users: string[];
   }) {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "ADD_MEMBERS_CLIENT",
         { chatId, users },
@@ -506,8 +516,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     chatId: string;
     members: string[];
   }) {
-    console.log(chatId, members);
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "ADD_ADMINS_CLIENT",
         { chatId, members },
@@ -533,7 +542,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     messageId: string;
     chatId: string;
   }) {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "DELETE_MESSAGE_CLIENT",
         { messageId, chatId },
@@ -551,12 +560,11 @@ function SocketProvider({ children }: SocketProviderProps) {
   }
 
   function leaveGroup({ chatId }: { chatId: string }) {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "LEAVE_GROUP_CHANNEL_CLIENT",
         { chatId },
         ({ success, message, error }: AckCreateGroup) => {
-          console.log(message, error, success);
           if (success) {
             toast.success(message);
             queryClient.invalidateQueries({ queryKey: ["chats"] });
@@ -580,7 +588,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     members: string[];
   }) {
     console.log(chatId, members);
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "REMOVE_MEMBERS_CLIENT",
         { chatId, members },
@@ -608,7 +616,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     type: "post" | "download";
     who: "admins" | "everyone";
   }) {
-    if (isConnected && socket) {
+    if (socket?.connected && socket) {
       socket.emit(
         "SET_PERMISSION_CLIENT",
         { chatId, type, who },
@@ -662,7 +670,6 @@ function SocketProvider({ children }: SocketProviderProps) {
         "SET_PRIVACY_CLIENT",
         { chatId, privacy },
         ({ success, message, error }: AckCreateGroup) => {
-          console.log(message, error, success);
           if (success) {
             toast.success(message);
             queryClient.invalidateQueries({ queryKey: ["chats"] });
@@ -680,7 +687,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   return (
     <SocketContext.Provider
       value={{
-        isConnected,
+        isConnected: socket?.connected || false,
         sendMessage,
         pinMessage: pinMessageSocket,
         unpinMessage: unpinMessageSocket,
@@ -696,7 +703,8 @@ function SocketProvider({ children }: SocketProviderProps) {
         createVoiceCall,
         setPermission,
         deleteGroup,
-        setPrivacy
+        setPrivacy,
+        finishCall
       }}
     >
       {children}
diff --git a/app/src/types/calls.ts b/app/src/types/calls.ts
index 4c75782f..a877a533 100644
--- a/app/src/types/calls.ts
+++ b/app/src/types/calls.ts
@@ -2,15 +2,40 @@ export interface CallContextType {
   callId: React.RefObject<string | null>;
   senderId: React.RefObject<string | null>;
   chatId: React.RefObject<string | null>;
-  callAccepted: React.RefObject<string | null>;
+  clientId: React.RefObject<
+    Map<
+      string,
+      {
+        connection: RTCPeerConnection | null;
+        offerSent: boolean;
+      }
+    >
+  >;
+  // callAccepted: React.RefObject<string | null>;
   joinCall: (newCallId: string, newSenderId: string, newChatId: string) => void;
   endCall: () => void;
+
   acceptCall: () => void;
-  startPeerConnection: () => Promise<void>;
-  offer: React.RefObject<string | null>;
-  answer: React.RefObject<string | null>;
-  peerConnection: React.RefObject<RTCPeerConnection | null>;
+  startPeerConnection: (
+    clientId: string
+  ) => Promise<RTCSessionDescriptionInit | null>;
+  offer: React.RefObject<RTCSessionDescriptionInit | null>;
+  getPeerConnection: (clientId: string) => RTCPeerConnection | null;
   //recieveAnswer: (answer: string) => Promise<void>;
-  recieveICE: (candidate: RTCIceCandidateInit) => Promise<void>;
+  recieveICE: (
+    candidate: RTCIceCandidateInit,
+    senderId: string
+  ) => Promise<void>;
+  createAnswer: (
+    data: RTCSessionDescriptionInit,
+    senderId: string
+  ) => Promise<RTCSessionDescriptionInit | null>;
+  setChatId: (chatId: string) => void;
+  recieveAnswer: (answer: RTCSessionDescriptionInit, senderId: string) => void; 
 }
-export type CallStatus = "inactive" | "active" | "calling" | "incoming" | "ended";
\ No newline at end of file
+export type CallStatus =
+  | "inactive"
+  | "active"
+  | "calling"
+  | "incoming"
+  | "ended";
diff --git a/app/src/types/socket.ts b/app/src/types/socket.ts
index 36624587..5b544ac4 100644
--- a/app/src/types/socket.ts
+++ b/app/src/types/socket.ts
@@ -65,6 +65,7 @@ export interface SocketContextType {
   deleteGroup: ({ chatId }: { chatId: string }) => void;
   createVoiceCall: ({ chatId }: { chatId: string }) => void;
   acceptCall: (callId: string | null) => void;
+  finishCall: () => void;
 }
 
 export interface SocketProviderProps {
diff --git a/app/src/utils/socket.tsx b/app/src/utils/socket.tsx
index 17c07f52..b5250a09 100644
--- a/app/src/utils/socket.tsx
+++ b/app/src/utils/socket.tsx
@@ -3,24 +3,20 @@ import { io, Socket } from "socket.io-client";
 import { useUser } from "@features/authentication/login/hooks/useUser";
 import { DefaultEventsMap } from "@socket.io/component-emitter";
 
-let socket: Socket<DefaultEventsMap, DefaultEventsMap> | null = null;
-
 function initializeSocket(
   userId: string,
   sessionId: string | null
 ): Socket<DefaultEventsMap, DefaultEventsMap> {
-  if (!socket) {
-    socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
-      query: {
-        userId
-      },
-      auth: {
-        sessionId
-      }
-    });
-
-    console.log("Socket initialized");
-  }
+  const socket = io(`${import.meta.env.VITE_SOCKET_BACKEND_API}`, {
+    query: {
+      userId
+    },
+    auth: {
+      sessionId
+    }
+  });
+
+  console.log("Socket initialized");
 
   return socket;
 }
@@ -37,9 +33,9 @@ function useSocket() {
       socketRef.current = initializeSocket(user._id, sessionId);
 
       return () => {
-        console.log("Disconnecting socket");
+        ("Disconnecting socket");
         socketRef.current?.disconnect();
-        socket = null;
+        socketRef.current = null;
       };
     }
   }, [user, isPending]);

From 904d9b92712db4b85bcaa87befa8c9cf381be7e5 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sun, 22 Dec 2024 01:43:31 +0200
Subject: [PATCH 133/136] fix: call ended (#171)

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/features/calls/CallLayout.tsx         |  2 +-
 .../features/calls/context/CallProvider.tsx   | 51 +++++++++++--------
 app/src/sockets/SocketProvider.tsx            |  3 +-
 app/src/types/calls.ts                        |  4 +-
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
index 99470a8b..760c0b63 100644
--- a/app/src/features/calls/CallLayout.tsx
+++ b/app/src/features/calls/CallLayout.tsx
@@ -252,7 +252,7 @@ export default function CallLayout({
                       {callStatus === "incoming" ? (
                         <ButtonContainer>
                           <RoundButton
-                            onClick={() => endCall()}
+                            onClick={() => endCall(null)}
                             $bgColor="var(--color-error)"
                             $bgColorHover="var(--color-error-shade)"
                           >
diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
index fb4d6320..25d6ba71 100644
--- a/app/src/features/calls/context/CallProvider.tsx
+++ b/app/src/features/calls/context/CallProvider.tsx
@@ -101,29 +101,38 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
     [setCallStatus, userId]
   );
 
-  const endCall = useCallback(() => {
-    setCallStatus("inactive");
-    callIdRef.current = null;
-    senderIdRef.current = null;
-    chatIdRef.current = null;
-    if (localStream.current) {
-      localStream.current.getTracks().forEach((track) => {
-        track.stop();
-      });
-    }
-    clientIdRef.current.forEach((clientData, clientId) => {
-      if (clientData.connection) {
-        clientData.connection.close();
-      }
+  const endCall = useCallback(
+    (clientId = null) => {
+      if (clientId) {
+        const clientData = clientIdRef.current.get(clientId);
+        if (clientData?.connection) clientData.connection.close();
+        removeClientId(clientId);
+      } else {
+        setCallStatus("inactive");
+        callIdRef.current = null;
+        senderIdRef.current = null;
+        chatIdRef.current = null;
+        if (localStream.current) {
+          localStream.current.getTracks().forEach((track) => {
+            track.stop();
+          });
+        }
+        clientIdRef.current.forEach((clientData, clientId) => {
+          if (clientData.connection) {
+            clientData.connection.close();
+          }
 
-      removeClientId(clientId);
-    });
-    const remoteAudioElements = document.querySelectorAll("audio");
-    remoteAudioElements.forEach((audio) => audio.remove());
+          removeClientId(clientId);
+        });
+        const remoteAudioElements = document.querySelectorAll("audio");
+        remoteAudioElements.forEach((audio) => audio.remove());
 
-    localStream.current = null;
-    clearClientIds();
-  }, [clearClientIds, removeClientId, setCallStatus]);
+        localStream.current = null;
+        clearClientIds();
+      }
+    },
+    [clearClientIds, removeClientId, setCallStatus]
+  );
 
   const acceptCall = useCallback(() => {
     if (callIdRef.current && chatIdRef.current) {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 219014bf..6496ec5a 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -71,6 +71,7 @@ function SocketProvider({ children }: SocketProviderProps) {
     createAnswer,
     startPeerConnection,
     offer,
+    endCall,
     acceptCall: setAcceptedCall
   } = useCallContext();
   const navigate = useNavigate();
@@ -139,7 +140,7 @@ function SocketProvider({ children }: SocketProviderProps) {
   const finishCall = useCallback(() => {
     if (socket?.connected && socket && callId.current) {
       socket.emit("LEAVE", { voiceCallId: callId.current });
-      endCall();
+      endCall(null);
     }
   }, [socket, callId, endCall]);
   const sendAnswer = useCallback(
diff --git a/app/src/types/calls.ts b/app/src/types/calls.ts
index a877a533..b5f96fab 100644
--- a/app/src/types/calls.ts
+++ b/app/src/types/calls.ts
@@ -13,7 +13,7 @@ export interface CallContextType {
   >;
   // callAccepted: React.RefObject<string | null>;
   joinCall: (newCallId: string, newSenderId: string, newChatId: string) => void;
-  endCall: () => void;
+  endCall: (clientId: string | null) => void;
 
   acceptCall: () => void;
   startPeerConnection: (
@@ -31,7 +31,7 @@ export interface CallContextType {
     senderId: string
   ) => Promise<RTCSessionDescriptionInit | null>;
   setChatId: (chatId: string) => void;
-  recieveAnswer: (answer: RTCSessionDescriptionInit, senderId: string) => void; 
+  recieveAnswer: (answer: RTCSessionDescriptionInit, senderId: string) => void;
 }
 export type CallStatus =
   | "inactive"

From 80f46ad0e1cb0cfe612953491fb5fd4cd5f874ca Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:23:08 +0200
Subject: [PATCH 134/136] Fix calls (#172)

* fix: call ended

* fix: fix mute button

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 app/src/components/ExpandingTextArea.tsx        |  2 --
 app/src/data/icons.tsx                          |  5 +++++
 app/src/features/calls/CallLayout.tsx           | 17 +++++++++++++++--
 app/src/features/calls/context/CallProvider.tsx | 11 ++++++++++-
 app/src/features/chats/hooks/useChatInput.ts    |  3 +--
 app/src/types/calls.ts                          |  3 +++
 6 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 74beb98e..c49ea04b 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -39,8 +39,6 @@ function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
     }
   }, [input]);
 
-  console.log(filteredMembers);
-
   return (
     <StyledMentionsInput>
       <MentionsInput
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index 3429c304..468c5e07 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -69,6 +69,7 @@ enum icons {
   Group,
   CallAccept,
   Mention,
+  UnMute
 }
 
 type iconStrings = keyof typeof icons;
@@ -446,6 +447,10 @@ const iconImports: Record<iconStrings, IconConfig> = {
   Mention:{
     importFn: () => import ("@mui/icons-material/AlternateEmail"),
   },
+  UnMute: {
+    importFn: () => import("@mui/icons-material/MicOff"),
+    defaultProps: { fontSize: "large" },
+  }
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/features/calls/CallLayout.tsx b/app/src/features/calls/CallLayout.tsx
index 760c0b63..c36dc049 100644
--- a/app/src/features/calls/CallLayout.tsx
+++ b/app/src/features/calls/CallLayout.tsx
@@ -8,6 +8,7 @@ import { getChatByID } from "@features/chats/utils/helpers";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { useSocket } from "@hooks/useSocket";
 import { EnableSpeaker } from "./SpeakerEnable";
+import { useState } from "react";
 
 const ModalContainer = styled.div`
   position: fixed;
@@ -203,12 +204,22 @@ export default function CallLayout({
   callStatus
 }: PropsType) {
   const { acceptCall, finishCall } = useSocket();
-  const { endCall, chatId } = useCallContext();
+  const { endCall, chatId, mute, unmute } = useCallContext();
+  const [isMuted, setIsMuted] = useState(false);
   const chats = useAppSelector((state) => state.chats.chats);
   const chat = getChatByID({
     chatID: chatId.current ?? "",
     chats: chats
   });
+  const toggleMute = () => {
+    if (isMuted) {
+      setIsMuted(false);
+      unmute();
+    } else {
+      setIsMuted(true);
+      mute();
+    }
+  };
 
   return (
     <>
@@ -233,7 +244,9 @@ export default function CallLayout({
                     </NameContainer>
                     <ButtonsContainer>
                       <ButtonContainer>
-                        <RoundButton>{getIcon("Mute")}</RoundButton>
+                        <RoundButton onClick={toggleMute}>
+                          {isMuted ? getIcon("UnMute") : getIcon("Mute")}
+                        </RoundButton>
                         <ButtonText>unmute</ButtonText>
                       </ButtonContainer>
                       {callStatus === "incoming" && (
diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
index 25d6ba71..b0a829d2 100644
--- a/app/src/features/calls/context/CallProvider.tsx
+++ b/app/src/features/calls/context/CallProvider.tsx
@@ -6,7 +6,6 @@ import { CallStatus } from "types/calls";
 import { TURN_USERNAME, TURN_PASSWORD } from "@constants";
 const Servers = {
   iceServers: [
-    { urls: ["stun:stun.l.google.com:19302", "stun:stun.l.google.com:5349"] },
     {
       urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"]
     },
@@ -134,6 +133,14 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
     [clearClientIds, removeClientId, setCallStatus]
   );
 
+  const mute = () => {
+    if (localStream.current)
+      localStream.current.getAudioTracks()[0].enabled = false;
+  };
+  const unmute = () => {
+    if (localStream.current)
+      localStream.current.getAudioTracks()[0].enabled = true;
+  };
   const acceptCall = useCallback(() => {
     if (callIdRef.current && chatIdRef.current) {
       if (
@@ -302,6 +309,8 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
     endCall,
     recieveICE,
     recieveAnswer,
+    mute,
+    unmute,
     getPeerConnection
   };
 
diff --git a/app/src/features/chats/hooks/useChatInput.ts b/app/src/features/chats/hooks/useChatInput.ts
index b52e8f69..3cec2f65 100644
--- a/app/src/features/chats/hooks/useChatInput.ts
+++ b/app/src/features/chats/hooks/useChatInput.ts
@@ -28,8 +28,7 @@ function useChatInput() {
     setIsEmojiSelectorOpen(false);
   };
 
-  const handleSubmit = (e: Event, voiceNoteName = "") => {
-    console.log(voiceNoteName);
+  const handleSubmit = (e: Event) => {
     e.preventDefault();
     setIsEmojiSelectorOpen(false);
     if (isRecording !== "idle") return;
diff --git a/app/src/types/calls.ts b/app/src/types/calls.ts
index b5f96fab..36758e03 100644
--- a/app/src/types/calls.ts
+++ b/app/src/types/calls.ts
@@ -15,6 +15,9 @@ export interface CallContextType {
   joinCall: (newCallId: string, newSenderId: string, newChatId: string) => void;
   endCall: (clientId: string | null) => void;
 
+  mute: () => void;
+  unmute: () => void;
+
   acceptCall: () => void;
   startPeerConnection: (
     clientId: string

From 0987e8bd60420c3353f12fade092fb883ab7b41d Mon Sep 17 00:00:00 2001
From: Abdelruhman Sami <121282837+AbdelruhmanSamy@users.noreply.github.com>
Date: Sun, 22 Dec 2024 20:40:55 +0200
Subject: [PATCH 135/136] =?UTF-8?q?=F0=9F=90=9B=20(messaging):=20Reply=20a?=
 =?UTF-8?q?nd=20Forward=20Fixed=20(#173)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 (messaging): Reply fixed

* 🐛 (messaging): Forward fixed
---
 app/src/features/chats/ChatBody.tsx | 13 +++++++++----
 app/src/sockets/SocketProvider.tsx  | 17 ++++++++++-------
 app/src/state/messages/chats.ts     |  2 +-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index e493071a..3376ee3d 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -68,7 +68,12 @@ function ChatBody() {
     }
   }, [fetchNextPage, inView, chatId]);
 
-  const messages = chat?.messages?.filter((msg) => !msg.parentMessageId);
+  let messages = chat?.messages;
+
+  if (chat?.type === "channel") {
+    messages?.filter((msg) => !msg.parentMessageId);
+  }
+
   const threadMessages = activeThread
     ? chat?.messages.filter((msg) => msg.parentMessageId === activeThread)
     : [];
@@ -123,9 +128,9 @@ function ChatBody() {
               ":hover": {
                 backgroundColor: "var(--color-background-own-1)",
                 color: "white",
-                transition: "0.2s",
-              },
-            },
+                transition: "0.2s"
+              }
+            }
           })}
       </Icon>
     </ScrollContainer>
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 6496ec5a..83a55a55 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -23,6 +23,7 @@ import { useChat } from "@features/chats/hooks/useChat";
 import { useCallContext } from "@features/calls/hooks/useCallContext";
 import { useAppSelector } from "@hooks/useGlobalState";
 import { resetRightSideBar } from "@state/side-bar/sideBar";
+import { getChatByID } from "@features/chats/utils/helpers";
 
 const handleIncomingMessage = (
   dispatch: Dispatch,
@@ -79,9 +80,9 @@ function SocketProvider({ children }: SocketProviderProps) {
   const socket = useSocket();
   const queryClient = useQueryClient();
 
-  const userId = useAppSelector((state) => state.user.userInfo.id);
-
+  const chats = useAppSelector((state) => state.chats.chats);
   const user = useAppSelector((state) => state.user.userInfo);
+  const userId = user.id;
 
   const { decrypt } = useEncryptDecrypt();
   const { chat } = useChat();
@@ -172,16 +173,18 @@ function SocketProvider({ children }: SocketProviderProps) {
       });
     };
     const onReceiveMessage = (message: MessageInterface) => {
-      if (!chat) {
-        console.warn("No chat context available for decryption");
+      const messageChat = getChatByID({ chats, chatID: message.chatId });
+
+      if (!messageChat) {
+        console.warn("No messageChat context available for decryption");
         return;
       }
 
-      if (chat.type === "private") {
+      if (messageChat.type === "private") {
         decrypt({
           message: message.content,
-          key: chat.encryptionKey!,
-          iv: chat.initializationVector!
+          key: messageChat.encryptionKey!,
+          iv: messageChat.initializationVector!
         })
           .then((content) => {
             console.log("Decrypted content:", content);
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index faa45904..fe7d4175 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -355,7 +355,7 @@ export const {
   setName,
   setPhoto,
   setIsMention,
-  setIsSeen,
+  setIsSeen
 } = chatsSlice.actions;
 export default chatsSlice.reducer;
 export type { DetailedChatInterface, ChatsState };

From 9259b57af48a87ae2f7f262e3b5a2136c1f4ac65 Mon Sep 17 00:00:00 2001
From: Sarah Kamal <143711089+sarah-kamall@users.noreply.github.com>
Date: Sun, 22 Dec 2024 22:53:24 +0200
Subject: [PATCH 136/136] Fix calls (#174)

* fix: call ended

* fix: fix mute button

* fix-0

* fix-1

* remove audio

---------

Co-authored-by: sarah kamal <sarah.zaky02@eng-std.cu.edu.eg>
---
 .../features/calls/context/CallProvider.tsx   | 84 +++++++++++++++----
 app/src/sockets/SocketProvider.tsx            | 33 +-------
 2 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/app/src/features/calls/context/CallProvider.tsx b/app/src/features/calls/context/CallProvider.tsx
index b0a829d2..0a321897 100644
--- a/app/src/features/calls/context/CallProvider.tsx
+++ b/app/src/features/calls/context/CallProvider.tsx
@@ -4,6 +4,9 @@ import { useAppSelector } from "@hooks/useGlobalState";
 import { callStatusEmitter } from "./callStatusEmitter";
 import { CallStatus } from "types/calls";
 import { TURN_USERNAME, TURN_PASSWORD } from "@constants";
+import { useSocket } from "utils/socket";
+
+console.log(TURN_PASSWORD, TURN_USERNAME);
 const Servers = {
   iceServers: [
     {
@@ -34,6 +37,7 @@ const Servers = {
 export const CallProvider: React.FC<{ children: ReactNode }> = ({
   children
 }) => {
+  const socket = useSocket();
   const userId = useAppSelector((state) => state.user.userInfo.id);
   const callIdRef = useRef<string | null>(null);
   const senderIdRef = useRef<string | null>(null);
@@ -171,18 +175,52 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
       }
       const peerConnection = new RTCPeerConnection(Servers);
       localStream.current.getTracks().forEach((track) => {
-        peerConnection?.addTrack(track, localStream.current);
+        peerConnection.addTrack(track, localStream.current);
       });
+      peerConnection.oniceconnectionstatechange = () => {
+        const state = peerConnection.iceConnectionState;
+
+        switch (state) {
+          case "connected":
+            console.log("Peer connection established.");
+            break;
+          case "disconnected":
+            console.warn("Peer connection disconnected.");
+            break;
+          case "failed":
+            console.error("Peer connection failed. Restarting ICE?");
+            break;
+          case "closed":
+            console.log("Peer connection closed.");
+            break;
+          default:
+            console.log("ICE connection state:", state);
+            break;
+        }
+      };
+      peerConnection.onicecandidate = (event) => {
+        if (event.candidate && socket?.connected) {
+          socket.emit("SIGNAL-SERVER", {
+            type: "ICE",
+            voiceCallId: callIdRef.current,
+            data: event.candidate,
+            targetId: clientId
+          });
+        }
+      };
       peerConnection.ontrack = (event) => {
+        console.log("audio");
         if (event.track.kind === "audio") {
           const remoteAudio = document.createElement("audio");
           remoteAudio.srcObject = event.streams[0];
           remoteAudio.autoplay = true;
           remoteAudio.controls = true;
+          remoteAudio.style.display = "none";
           document.body.appendChild(remoteAudio);
         }
       };
       const offer = await peerConnection.createOffer();
+      console.log(clientIdRef.current);
       if (!hasClientId(clientId) || hasClientId(clientId, false)) {
         await peerConnection.setLocalDescription(offer);
         addClientId(clientId, peerConnection, true);
@@ -191,17 +229,21 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
       }
       return null;
     },
-    [addClientId, endCall, hasClientId, setCallStatus]
+    [addClientId, endCall, hasClientId, setCallStatus, socket]
   );
 
   const recieveICE = useCallback(
     async (candidate: RTCIceCandidateInit, senderId: string) => {
-      if (hasClientId(senderId, true)) {
-        const clientData = clientIdRef.current.get(senderId);
-        if (clientData) {
-          if (!clientData.connection) return;
-          clientData.connection.addIceCandidate(candidate);
-        }
+      try {
+        if (hasClientId(senderId, true)) {
+          const clientData = clientIdRef.current.get(senderId);
+          if (clientData) {
+            if (!clientData.connection) throw new Error("No connection found.");
+            clientData.connection.addIceCandidate(candidate);
+          } else throw new Error("No connection found.");
+        } else throw new Error("No connection found.");
+      } catch (error) {
+        console.error("Error recieving ICE candidate:", error);
       }
     },
     [hasClientId]
@@ -243,15 +285,15 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
         localStream.current.getTracks().forEach((track) => {
           peerConnection.addTrack(track, localStream.current);
         });
-        await peerConnection.setRemoteDescription(data);
-        const answer = await peerConnection.createAnswer();
-        await peerConnection.setLocalDescription(answer);
+
         peerConnection.ontrack = (event) => {
+          console.log("adiooo");
           if (event.track.kind === "audio") {
             const remoteAudio = document.createElement("audio");
             remoteAudio.srcObject = event.streams[0];
             remoteAudio.autoplay = true;
-            remoteAudio.controls = true;
+            remoteAudio.controls = false;
+            remoteAudio.style.display = "none";
             document.body.appendChild(remoteAudio);
           }
         };
@@ -276,15 +318,27 @@ export const CallProvider: React.FC<{ children: ReactNode }> = ({
               break;
           }
         };
-
-        addClientId(senderId, peerConnection, false);
+        peerConnection.onicecandidate = (event) => {
+          if (event.candidate && socket?.connected) {
+            socket.emit("SIGNAL-SERVER", {
+              type: "ICE",
+              voiceCallId: callIdRef.current,
+              data: event.candidate,
+              targetId: senderId
+            });
+          }
+        };
+        await peerConnection.setRemoteDescription(data);
+        const answer = await peerConnection.createAnswer();
+        await peerConnection.setLocalDescription(answer);
+        addClientId(senderId, peerConnection, true);
         return answer;
       } catch (error) {
         console.error("Error creating answer:", error);
         return null;
       }
     },
-    [addClientId, endCall]
+    [addClientId, endCall, socket]
   );
 
   const getPeerConnection = useCallback((clientId: string) => {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 83a55a55..c7ff48a7 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -68,7 +68,6 @@ function SocketProvider({ children }: SocketProviderProps) {
     recieveICE,
     recieveAnswer,
     setChatId,
-    getPeerConnection,
     createAnswer,
     startPeerConnection,
     offer,
@@ -86,32 +85,6 @@ function SocketProvider({ children }: SocketProviderProps) {
 
   const { decrypt } = useEncryptDecrypt();
   const { chat } = useChat();
-  const handleIceCandidates = useCallback(
-    async (clientId: string) => {
-      return new Promise((resolve) => {
-        const timeout = setTimeout(() => {
-          resolve(null);
-        }, 10000);
-        if (socket?.connected && socket && callId.current) {
-          const peerConnection = getPeerConnection(clientId);
-          if (!peerConnection) return;
-          peerConnection.onicecandidate = (event) => {
-            if (!event.candidate) {
-              clearTimeout(timeout);
-              resolve(null);
-            }
-            socket.emit("SIGNAL-SERVER", {
-              type: "ICE",
-              voiceCallId: callId.current,
-              data: event.candidate,
-              targetId: clientId
-            });
-          };
-        }
-      });
-    },
-    [socket, callId, getPeerConnection]
-  );
   const sendOffer = useCallback(
     (clientId: string, offer: RTCSessionDescriptionInit) => {
       if (
@@ -122,6 +95,7 @@ function SocketProvider({ children }: SocketProviderProps) {
         callId.current &&
         clientId
       ) {
+        console.log("Sending offer to", clientId);
         socket.emit("SIGNAL-SERVER", {
           type: "OFFER",
           voiceCallId: callId.current,
@@ -291,11 +265,13 @@ function SocketProvider({ children }: SocketProviderProps) {
       }
     );
     socket.on("CLIENT-JOINED", async ({ clientId }) => {
+      console.log("client joined", clientId);
       const offer = await startPeerConnection(clientId);
       try {
+        console.log("offer", offer);
+        console.log("clientId", clientId);
         if (offer && clientId) {
           sendOffer(clientId, offer);
-          handleIceCandidates(clientId);
         } else throw new Error("Failed to send offer");
       } catch {
         console.error("Failed to send offer");
@@ -309,7 +285,6 @@ function SocketProvider({ children }: SocketProviderProps) {
             const answer = await createAnswer(data, senderId);
             if (answer) {
               sendAnswer(senderId, answer);
-              handleIceCandidates(senderId);
             } else {
               console.error("Failed to create answer");
             }