From 9e38b4e222ee82a0ba5fee27f5d64b68ee80efc6 Mon Sep 17 00:00:00 2001
From: Ahmed yasser <26207361+1AhmedYasser@users.noreply.github.com>
Date: Wed, 5 Mar 2025 16:03:36 +0200
Subject: [PATCH] Hot-Fix: Chat Notifications (#1199)

* chore(1133): Handled focused chat

* chore(1133): Bumped header version
---
 GUI/package.json                  |  2 +-
 GUI/src/components/Chat/index.tsx | 30 +++++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/GUI/package.json b/GUI/package.json
index dd0d3f25..8a5833f9 100644
--- a/GUI/package.json
+++ b/GUI/package.json
@@ -11,7 +11,7 @@
     "prettier": "prettier --write \"{,!(node_modules)/**/}*.{ts,tsx,js,json,css,less,scss}\""
   },
   "dependencies": {
-    "@buerokratt-ria/header": "^0.1.21",
+    "@buerokratt-ria/header": "^0.1.22",
     "@buerokratt-ria/menu": "^0.2.6",
     "@buerokratt-ria/styles": "^0.0.1",
     "@buerokratt-ria/common-gui-components": "^0.0.4",
diff --git a/GUI/src/components/Chat/index.tsx b/GUI/src/components/Chat/index.tsx
index c52180aa..b7bd0b4c 100644
--- a/GUI/src/components/Chat/index.tsx
+++ b/GUI/src/components/Chat/index.tsx
@@ -1,4 +1,11 @@
-import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FC,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 import { et } from 'date-fns/locale';
@@ -141,6 +148,27 @@ const Chat: FC<ChatProps> = ({
       : null
   );
 
+  const onVisibilityChange = () => {
+    if (document.visibilityState === 'visible') {
+      localStorage.setItem('focused_chat', chat.id);
+    } else if (document.visibilityState === 'hidden') {
+      localStorage.removeItem('focused_chat');
+    }
+  };
+
+  useEffect(() => {
+    localStorage.setItem('focused_chat', chat.id);
+    return () => {
+      localStorage.removeItem('focused_chat');
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () =>
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+  }, []);
+
   useEffect(() => {
     getMessages();
   }, []);