Feature/chats unread count

package.json

@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/ns-query": "^1.0.6",
+    "@ecency/ns-query": "^1.0.7",
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
     "@emoji-mart/data": "^1.1.2",

src/common/app.tsx

@@ -36,7 +36,6 @@ import { UIManager } from "@ui/core";
 import defaults from "./constants/defaults.json";
 import { getAccessToken } from "./helper/user-token";
 
-
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
 const ProfilePage = (props: any) => <ProfileContainer {...props} />;

src/common/features/chats/components/chat-floating-date.tsx

@@ -27,7 +27,7 @@ export function ChatFloatingDate({
       className={classNameObject({
         "sticky z-10 flex justify-center text-xs text-center": true,
         "top-0": !isPage,
-        "top-[57px]": isPage
+        "top-[180px] md:top-[57px]": isPage
       })}
     >
       <div className="bg-gray-200 my-3 dark:bg-gray-800 rounded-full p-1 ">

src/common/features/chats/components/chat-input.tsx

@@ -29,13 +29,15 @@ import {
 import Tooltip from "../../../components/tooltip";
 import { ChatInputFiles } from "./chat-input-files";
 import Gallery from "../../../components/gallery";
+import useWindowSize from "react-use/lib/useWindowSize";
 
 interface Props {
   currentChannel?: Channel;
   currentContact?: DirectContact;
 }
 
 export default function ChatInput({ currentChannel, currentContact }: Props) {
+  const size = useWindowSize();
   useChannelsQuery();
 
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -201,13 +203,15 @@ export default function ChatInput({ currentChannel, currentContact }: Props) {
             />
             <div className="flex items-center px-2 h-full gap-3">
               <div className="relative">
-                <Button
-                  ref={emojiButtonRef}
-                  noPadding={true}
-                  appearance="gray-link"
-                  disabled={isDisabled}
-                  icon={emoticonHappyOutlineSvg}
-                />
+                {size.width > 768 && (
+                  <Button
+                    ref={emojiButtonRef}
+                    noPadding={true}
+                    appearance="gray-link"
+                    disabled={isDisabled}
+                    icon={emoticonHappyOutlineSvg}
+                  />
+                )}
                 <EmojiPicker
                   isDisabled={isDisabled || isSendMessageLoading}
                   position="top"

src/common/features/chats/components/chat-messages-header.tsx

@@ -30,7 +30,7 @@ export default function ChatsMessagesHeader(props: Props) {
   };
 
   return (
-    <div className="flex sticky z-[10] top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[57px]">
+    <div className="flex sticky z-[10] top-[63px] md:top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[57px]">
       <div className="flex items-center gap-4">
         <Button
           appearance="gray-link"

src/common/features/chats/components/chat-messages-view.tsx

@@ -27,7 +27,7 @@ export default function ChatsMessagesView({ currentContact, currentChannel }: Pr
     <>
       <div
         className={classNameObject({
-          "h-[100vh] md:h-full": true
+          "h-[100vh] md:h-full overflow-y-auto md:overflow-y-static": true
         })}
         ref={messagesBoxRef}
       >

src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx

@@ -52,7 +52,7 @@ export function ChatPopupContactsAndChannels({
               isLink={false}
               contact={user}
               onClick={() => userClicked(user.name)}
-              key={user.pubkey}
+              key={user.pubkey + user.unread}
             />
           ))}
         </>

src/common/features/chats/components/chat-popup/index.tsx

@@ -18,7 +18,8 @@ import {
   useChannelsQuery,
   useDirectContactsQuery,
   useJoinChat,
-  useKeysQuery
+  useKeysQuery,
+  useUpdateDirectContactsUnreadCount
 } from "@ecency/ns-query";
 import { ChatInvitation } from "../chat-invitation";
 
@@ -61,6 +62,8 @@ export const ChatPopUp = () => {
     [hasUserJoinedChat, privateKey, currentChannel, revealPrivateKey]
   );
 
+  const updateDirectContactsUnreadCount = useUpdateDirectContactsUnreadCount();
+
   useMount(() => {
     setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
   });
@@ -76,6 +79,13 @@ export const ChatPopUp = () => {
     }
   }, [global.theme, activeUser]);
 
+  // Whenever current contact is exists need to turn unread to 0
+  useEffect(() => {
+    if (currentContact) {
+      updateDirectContactsUnreadCount.mutateAsync({ contact: currentContact, unread: 0 });
+    }
+  }, [currentContact]);
+
   const handleMessageSvgClick = () => {
     setShowSearchUser(!showSearchUser);
     setExpanded(true);

src/common/features/chats/components/chats-default-screen.tsx

@@ -28,7 +28,7 @@ export function ChatsDefaultScreen(props: HTMLProps<HTMLDivElement>) {
     <div
       {...props}
       className={classNameObject({
-        "flex flex-col justify-center items-center px-4 w-full h-full": true,
+        "flex flex-col justify-center items-center px-4 w-full pt-6 md:pt-0 md:h-full": true,
         [props.className ?? ""]: !!props.className
       })}
     >

src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx

@@ -14,6 +14,7 @@ import Tooltip from "../../../../components/tooltip";
 import { informationOutlineSvg } from "../../../../img/svg";
 import { Button } from "@ui/button";
 import { Link } from "react-router-dom";
+import { Badge } from "@ui/badge";
 
 interface Props {
   contact: DirectContact;
@@ -70,11 +71,14 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
           </div>
           <div className="text-xs text-gray-500">{lastMessageDate}</div>
         </div>
-        <div className="text-sm text-gray-600 truncate">
-          {lastMessage?.creator === publicKey && (
-            <span className="mr-1 text-gray-500 dark:text-gray-700">{_t("g.you")}:</span>
-          )}
-          {lastMessage?.content}
+        <div className="flex justify-between">
+          <div className="text-sm text-gray-600 truncate">
+            {lastMessage?.creator === publicKey && (
+              <span className="mr-1 text-gray-500 dark:text-gray-700">{_t("g.you")}:</span>
+            )}
+            {lastMessage?.content}
+          </div>
+          {!!contact.unread && <Badge appearance="secondary">{contact.unread}</Badge>}
         </div>
       </div>
     </>

src/common/features/chats/components/chats-sidebar/index.tsx

@@ -45,7 +45,7 @@ export default function ChatsSideBar(props: Props) {
   useCreateTemporaryChannel(selectedCommunity);
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col md:h-full">
       <ChatSidebarHeader history={props.history} />
       <ChatSidebarSearch setSearch={setSearchQuery} />
       {showDivider && <div className="divider" />}

src/common/features/chats/screens/chats-user-not-joined-section.tsx

@@ -11,7 +11,7 @@ export function ChatsUserNotJoinedSection({
   return (
     <div
       className={classNameObject({
-        "flex flex-col justify-center h-full items-center px-4": true,
+        "flex flex-col justify-center md:h-full items-center px-4": true,
         [className ?? ""]: !!className
       })}
     >

src/common/features/chats/screens/chats.tsx

@@ -107,8 +107,8 @@ export const Chats = ({ match, history }: Props) => {
       <Meta title={title || _t("chat.page-title")} />
 
       <div className="container mx-auto md:py-6">
-        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
-          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto">
+        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white md:border border-[--border-color] relative h-[100vh] md:h-auto">
+          <div className="col-span-12 md:col-span-4 xl:col-span-3 md:border-r border-[--border-color] md:h-[calc(100vh-69px-3rem)] overflow-y-auto">
             {isReady ? (
               <ChatsSideBar
                 isChannel={isChannel}
@@ -122,7 +122,7 @@ export const Chats = ({ match, history }: Props) => {
               <ChatsDefaultScreen className="md:hidden" />
             )}
             {(!directContacts?.length || !channels?.length) && isShowImportChats && activeUser && (
-              <div className="h-full w-full flex items-center justify-center md:hidden">
+              <div className="md:h-full w-full flex items-center justify-center md:hidden">
                 <ChatsWelcome />
               </div>
             )}
@@ -132,15 +132,15 @@ export const Chats = ({ match, history }: Props) => {
           </div>
           <div
             className={classNameObject({
-              "col-span-12 md:col-span-8 xl:col-span-9 max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
+              "col-span-12 md:col-span-8 xl:col-span-9 md:h-[calc(100vh-69px-3rem)] md:overflow-y-auto absolute w-full bg-white z-10 md:static":
                 true,
               "translate-x-0": isShowChatRoom || isShowManageKey,
               "translate-x-[100%] md:translate-x-0": !isShowChatRoom && !isShowManageKey
             })}
           >
             {isShowManageKey && <ChatsManageKeySection />}
             {isShowImportChats && activeUser && (
-              <div className="h-full w-full flex items-center justify-center">
+              <div className="md:h-full w-full flex items-center justify-center">
                 <ChatsWelcome />
               </div>
             )}

src/common/features/ui/badge/badge-styles.ts

@@ -1,6 +1,7 @@
-export type BadgeAppearance = "primary";
+export type BadgeAppearance = "primary" | "secondary";
 
 export const BADGE_STYLES: Record<BadgeAppearance, string> = {
   primary:
-    "bg-blue-dark-sky-040 border border-blue-dark-sky-030 text-blue-dark-sky dark:bg-blue-metallic-10 dark:border-blue-metallic-20 dark:text-gray-200"
+    "bg-blue-dark-sky-040 border border-blue-dark-sky-030 text-blue-dark-sky dark:bg-blue-metallic-10 dark:border-blue-metallic-20 dark:text-gray-200",
+  secondary: "bg-gray-400 text-gray-600 dark:bg-gray-600 dark:text-gray-400 text-xs font-bold"
 };

yarn.lock

@@ -1374,10 +1374,10 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@ecency/ns-query@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.0.6.tgz#189ddf453ec33108e151460e0c2d8b20d1706606"
-  integrity sha512-jWR+d3ylMwjkxFXyfezMssAI1HAfWH2J8T51Z7y/92D5G57vSSxcVUYpEQczohguqoj3t/exaJD9spu6NkeXYg==
+"@ecency/ns-query@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.0.7.tgz#edbc988ee553ee3707f13d14d2a3cf166019f051"
+  integrity sha512-uYus9nlmxl2R/vgPQgAj4RGIioXfrEZLrJH0eS2LJfxIkxhaAOWk2s07cnY7ewcgf+R744l287EOsH2tR1bYGg==
   dependencies:
     "@tanstack/react-query" "^4.29.7"
     axios "^0.21.2"
@@ -2021,9 +2021,9 @@
     "@sinonjs/commons" "^1.7.0"
 
 "@tanstack/match-sorter-utils@^8.7.0":
-  version "8.8.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
-  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
+  version "8.11.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.11.3.tgz#904bf4916bac1338751491de0685151126e5c29b"
+  integrity sha512-2XVYTN6fLFyeIPywDL/HGKIQce3V6oUch1FHweGwxruPKEXip6Z9qg+zWZwNE26WG6CktqJh6NqTq90a42jeEw==
   dependencies:
     remove-accents "0.4.2"
 
@@ -2033,9 +2033,9 @@
   integrity sha512-GXG4b5hV2Loir+h2G+RXhJdoZhJLnrBWsuLB2r0qBRyhWuXq9w/dWxzvpP89H0UARlH6Mr9DiVj4SMtpkF/aUA==
 
 "@tanstack/react-query-devtools@^4.29.7":
-  version "4.29.7"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.29.7.tgz#1e2b742b144748efa3ae0f0f7abe945fb4179085"
-  integrity sha512-fckNnBV6Kfbtq6EJqQen8oBjPqGFcOPS9SJmNKLbFLQgd7OpNIlA4M0r37iJYUY9m14/ESKc1wzKd36VfeiPjg==
+  version "4.36.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.36.1.tgz#7e63601135902a993ca9af73507b125233b1554e"
+  integrity sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==
   dependencies:
     "@tanstack/match-sorter-utils" "^8.7.0"
     superjson "^1.10.0"
@@ -7384,9 +7384,9 @@ is-typedarray@^1.0.0:
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
 is-what@^4.1.8:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.11.tgz#b66ff87937f51286dc129a0bd0a9ebe0c3543d53"
-  integrity sha512-gr9+qDrJvdwT4+N2TAACsZQIB4Ow9j2eefqlh3m9JUV41M1LoKhcE+/j+IVni/r6U8Jnc1PwhjdjVJr+Xmtb0A==
+  version "4.1.16"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.16.tgz#1ad860a19da8b4895ad5495da3182ce2acdd7a6f"
+  integrity sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==
 
 is-windows@^1.0.2:
   version "1.0.2"
@@ -12365,9 +12365,9 @@ sucrase@^3.32.0:
     ts-interface-checker "^0.1.9"
 
 superjson@^1.10.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.12.3.tgz#383aacfd795c6eef24c383c70154c6cbbcbfb31a"
-  integrity sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.3.tgz#3bd64046f6c0a47062850bb3180ef352a471f930"
+  integrity sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==
   dependencies:
     copy-anything "^3.0.2"