From 068b8ba0cfeacc38e31aa6b98929f31c7dc2e1f0 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Wed, 20 Mar 2024 13:48:32 -0400
Subject: [PATCH 01/62] =?UTF-8?q?feat:=20Implement=20=C2=B4DirectMessageMo?=
 =?UTF-8?q?dal=C2=B4=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.tsx              |  15 ++--
 src/components/DirectMessageModal.tsx  | 105 +++++++++++++++++++++++++
 src/components/IconButton.tsx          |   5 +-
 src/components/Input.tsx               |   4 +-
 src/components/QuickActions.tsx        |  57 --------------
 src/components/SidebarActions.tsx      |  79 +++++++++++++++++++
 src/components/UserBar.tsx             |   5 +-
 src/components/UserProfile.tsx         |  22 ++++--
 src/containers/DevPreview.tsx          |   9 ++-
 src/hooks/matrix/useConnection.ts      |   3 +-
 src/hooks/matrix/useSidebarActions.ts  |  17 ++++
 src/stories/quickActions.stories.tsx   |  14 ----
 src/stories/sidebarActions.stories.tsx |  18 +++++
 src/views/app.tsx                      |   4 +-
 src/views/login.tsx                    |  21 ++++-
 15 files changed, 279 insertions(+), 99 deletions(-)
 create mode 100644 src/components/DirectMessageModal.tsx
 delete mode 100644 src/components/QuickActions.tsx
 create mode 100644 src/components/SidebarActions.tsx
 create mode 100644 src/hooks/matrix/useSidebarActions.ts
 delete mode 100644 src/stories/quickActions.stories.tsx
 create mode 100644 src/stories/sidebarActions.stories.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 6b630aed..7843a450 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -25,6 +25,7 @@ export type ButtonProps = {
   color?: ButtonColor
   size?: ButtonSize
   isDisabled?: boolean
+  className?: string
 }
 
 const Button: FC<ButtonProps> = ({
@@ -35,17 +36,18 @@ const Button: FC<ButtonProps> = ({
   variant,
   color,
   size,
+  className,
 }) => {
   const sizeClass =
     size === ButtonSize.Small
-      ? "p-[5px] text-xs rounded-[5px] border-[1px] px-2"
-      : "rounded-[10px] border-[2px] p-[10px]"
+      ? "p-1 text-xs rounded-md px-2"
+      : "rounded-xl border-[2px] p-3"
 
   const variantClass =
     variant === ButtonVariant.Primary
-      ? (color === ButtonColor.Black
+      ? color === ButtonColor.Black
         ? "bg-black border-none text-white"
-        : "bg-purple-700 border-purple-900 text-white")
+        : "bg-purple-700 border-purple-900 text-white"
       : variant === ButtonVariant.Secondary
         ? "bg-purple-100 text-purple-800 border-none hover:bg-purple-200"
         : variant === ButtonVariant.TextLink
@@ -57,9 +59,10 @@ const Button: FC<ButtonProps> = ({
   return (
     <button
       className={twMerge(
-        "flex box-border active:translate-y-[1px] origin-center cursor-pointer items-center justify-center border-solid font-strong outline-none disabled:translate-y-[1px]",
+        "font-strong box-border flex origin-center cursor-pointer items-center justify-center border-solid outline-none active:translate-y-[1px] disabled:translate-y-[1px]",
         sizeClass,
-        variantClass
+        variantClass,
+        className
       )}
       disabled={isLoading ?? isDisabled}
       onClick={isDisabled ? undefined : onClick}
diff --git a/src/components/DirectMessageModal.tsx b/src/components/DirectMessageModal.tsx
new file mode 100644
index 00000000..b31e8434
--- /dev/null
+++ b/src/components/DirectMessageModal.tsx
@@ -0,0 +1,105 @@
+import {type FC} from "react"
+import Typography, {TypographyVariant} from "./Typography"
+import IconButton from "./IconButton"
+import {IoCloseCircle, IoCopyOutline, IoSend} from "react-icons/io5"
+import Input from "./Input"
+import UserProfile from "./UserProfile"
+import {stringToColor} from "@/utils/util"
+
+const DirectMessageModal: FC = () => {
+  return (
+      <div className="flex h-[80%] w-[50%] flex-col gap-2 rounded-lg bg-neutral-200 p-3">
+        <div className="flex">
+          <Typography variant={TypographyVariant.H3}>
+            Direct messages
+          </Typography>
+
+          <IconButton
+            onClick={() => {
+              // TODO: Handle here close this modal.
+            }}
+            tooltip={"Close"}
+            Icon={IoCloseCircle}
+            className="ml-auto"
+            color="gray"
+          />
+        </div>
+
+        <Typography>
+          Start a conversation with someone using their name, email, or
+          username.
+        </Typography>
+
+        {/* TODO: Replace {} for real userId. */}
+        <Input
+          className="w-full"
+          placeholder="Example: { @arturx:matrix.org }"
+          actions={[{Icon: IoSend, tooltip: "Search...", onClick: () => {}}]}
+        />
+
+        <div className="flex flex-col gap-2 p-1">
+          <Typography variant={TypographyVariant.P}>
+            RECENT CONVERSATIONS
+          </Typography>
+
+          <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
+            {/* TODO: Replace this info for real info. */}
+            <UserProfile
+              text={"@arturx:matrix.org"}
+              displayName={"Arthur"}
+              displayNameColor={stringToColor("Arthur")}
+            />
+
+            {/* TODO: Use real info. */}
+            <Typography variant={TypographyVariant.P} className="ml-auto">
+              22 days ago
+            </Typography>
+          </div>
+
+          <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
+            {/* TODO: Replace this info for real info. */}
+            <UserProfile
+              text={"@thecrissx:matrix.org"}
+              displayName={"Tokyoto"}
+              displayNameColor={stringToColor("Tokyoto")}
+            />
+
+            {/* TODO: Use real info. */}
+            <Typography variant={TypographyVariant.P} className="ml-auto">
+              22 days ago
+            </Typography>
+          </div>
+
+          <Typography>
+            Some suggestions may not be shown for privacy reasons. If you don't
+            find who you're looking for, send them your invitation link below.
+          </Typography>
+        </div>
+
+        <div className="mt-auto flex flex-col gap-2">
+          <div className="h-[1px] w-full bg-neutral-400" />
+
+          <Typography>INVITATION LINK</Typography>
+
+          <div className="flex flex-row items-center rounded-md border-[1px] border-black p-2">
+            {/* TODO: Replace for real invitation link. */}
+            <Typography
+              variant={TypographyVariant.Span}
+              className="text-blue-500">
+              https://matrix.to/#/@thecriss:matrix.org
+            </Typography>
+
+            <IconButton
+              className="ml-auto"
+              color="black"
+              onClick={() => {}}
+              tooltip={"Copy to clipboard"}
+              Icon={IoCopyOutline}
+            />
+          </div>
+        </div>
+      </div>
+  )
+}
+
+export default DirectMessageModal
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 32f43722..4b7ae7e4 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -10,6 +10,7 @@ export type IconButtonProps = {
   color?: string
   isDisabled?: boolean
   isDotVisible?: boolean
+  className?: string
 }
 
 const IconButton: FC<IconButtonProps> = ({
@@ -18,6 +19,7 @@ const IconButton: FC<IconButtonProps> = ({
   color,
   isDisabled,
   isDotVisible,
+  className,
 }) => {
   const isDisabledClass = isDisabled
     ? "active:animate-none active:transform-none cursor-not-allowed opacity-50 hover:bg-none"
@@ -29,7 +31,8 @@ const IconButton: FC<IconButtonProps> = ({
       tabIndex={isDisabled ? undefined : 0}
       className={twMerge(
         "inline-block cursor-pointer self-center rounded-[10px] p-1 focus-visible:rounded-[5px] focus-visible:duration-150",
-        isDisabledClass
+        isDisabledClass,
+        className
       )}
       aria-hidden="true">
       <NotificationDot isVisible={isDotVisible ?? false}>
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index e68d7adb..a0b52b08 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -117,14 +117,14 @@ const Input: FC<InputProps> = ({
   return (
     <div className={className?.trim()}>
       <div
-        className="flex items-center rounded-[10px] border-[1px] border-solid border-neutral-300"
+        className="flex items-center rounded-[10px] border-[1px] border-solid border-neutral-300 bg-neutral-50"
         tabIndex={isDisabled ? undefined : 0}>
         {label !== undefined && <Label text={label} />}
 
         {Icon && <Icon className="ml-[10px] size-[18px] text-neutral-200" />}
 
         <input
-          className="w-full rounded-[10px]"
+          className="w-full rounded-[10px] bg-neutral-50"
           type="text"
           disabled={isDisabled}
           placeholder={placeholder}
diff --git a/src/components/QuickActions.tsx b/src/components/QuickActions.tsx
deleted file mode 100644
index e7519f04..00000000
--- a/src/components/QuickActions.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {type FC} from "react"
-import IconButton from "./IconButton"
-import {twMerge} from "tailwind-merge"
-import {
-  IoPaperPlane,
-  IoExtensionPuzzle,
-  IoExit,
-  IoNotificationsSharp,
-  IoCall,
-} from "react-icons/io5"
-
-export type QuickActionsProps = {
-  onViewDirectMessages: () => void
-  onViewCalls: () => void
-  onViewNotifications: () => void
-  onOpenExtensions: () => void
-  onLogout: () => void
-  className?: string
-}
-
-const QuickActions: FC<QuickActionsProps> = ({
-  onViewDirectMessages,
-  onViewCalls,
-  onViewNotifications,
-  onOpenExtensions,
-  onLogout,
-  className,
-}) => {
-  return (
-    <section className={twMerge("inline-flex flex-col gap-4", className)}>
-      <IconButton
-        onClick={onViewDirectMessages}
-        tooltip="Direct messages"
-        Icon={IoPaperPlane}
-      />
-
-      <IconButton onClick={onViewCalls} tooltip="Calls" Icon={IoCall} />
-
-      <IconButton
-        onClick={onViewNotifications}
-        tooltip="Notifications"
-        Icon={IoNotificationsSharp}
-        isDotVisible
-      />
-
-      <IconButton
-        onClick={onOpenExtensions}
-        tooltip="Extensions"
-        Icon={IoExtensionPuzzle}
-      />
-
-      <IconButton onClick={onLogout} tooltip="Sign out" Icon={IoExit} />
-    </section>
-  )
-}
-
-export default QuickActions
diff --git a/src/components/SidebarActions.tsx b/src/components/SidebarActions.tsx
new file mode 100644
index 00000000..26f3723c
--- /dev/null
+++ b/src/components/SidebarActions.tsx
@@ -0,0 +1,79 @@
+import {useState, type FC} from "react"
+import IconButton from "./IconButton"
+import {twMerge} from "tailwind-merge"
+import {
+  IoPaperPlane,
+  IoExtensionPuzzle,
+  IoExit,
+  IoNotificationsSharp,
+  IoCall,
+} from "react-icons/io5"
+import useSidebarActions from "@/hooks/matrix/useSidebarActions"
+import {createPortal} from "react-dom"
+import DirectMessageModal from "./DirectMessageModal"
+
+export type SidebarActionsProps = {
+  onViewDirectMessages: () => void
+  onViewCalls: () => void
+  onViewNotifications: () => void
+  onOpenExtensions: () => void
+  onLogout: () => void
+  className?: string
+}
+
+const SidebarActions: FC<SidebarActionsProps> = ({
+  onViewCalls,
+  onViewNotifications,
+  onOpenExtensions,
+  className,
+}) => {
+  const {onLogout} = useSidebarActions()
+  const [isDirectMessageModalVisible, setDirectMessageModalVisible] =
+    useState(false)
+
+  return (
+    <>
+      {isDirectMessageModalVisible &&
+        createPortal(
+          <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
+            <DirectMessageModal />
+          </div>,
+          document.body
+        )}
+      <section className={twMerge("inline-flex flex-col gap-4", className)}>
+        <IconButton
+          onClick={() => {
+            setDirectMessageModalVisible(true)
+          }}
+          tooltip="Direct messages"
+          Icon={IoPaperPlane}
+        />
+
+        <IconButton onClick={onViewCalls} tooltip="Calls" Icon={IoCall} />
+
+        <IconButton
+          onClick={onViewNotifications}
+          tooltip="Notifications"
+          Icon={IoNotificationsSharp}
+          isDotVisible
+        />
+
+        <IconButton
+          onClick={onOpenExtensions}
+          tooltip="Extensions"
+          Icon={IoExtensionPuzzle}
+        />
+
+        <IconButton
+          onClick={() => {
+            void onLogout()
+          }}
+          tooltip="Sign out"
+          Icon={IoExit}
+        />
+      </section>
+    </>
+  )
+}
+
+export default SidebarActions
diff --git a/src/components/UserBar.tsx b/src/components/UserBar.tsx
index a0f30bd9..5cfd6065 100644
--- a/src/components/UserBar.tsx
+++ b/src/components/UserBar.tsx
@@ -1,5 +1,5 @@
 import {useMemo, type FC} from "react"
-import {getImageUrl, trim} from "../utils/util"
+import {getImageUrl, stringToColor, trim} from "../utils/util"
 import IconButton from "./IconButton"
 import UserProfile, {
   type UserProfileProps as UserProfileProperties,
@@ -53,8 +53,7 @@ const UserBar: FC<UserBarProps> = ({className}) => {
       avatarUrl: imgUrl,
       displayName: trim(displayName, MAX_NAME_LENGTH),
       text: trim(getUsernameByUserId(userID), MAX_NAME_LENGTH),
-      // TODO: Calculate color from the user's id.
-      displayNameColor: "",
+      displayNameColor: stringToColor(userID),
       status,
     }
 
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index a8382c4b..49425cd3 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -18,7 +18,7 @@ export type UserProfileProps = {
   text: string
   displayName: string
   displayNameColor: string
-  status: UserStatus
+  status?: UserStatus
   activity?: UserActivity
   icon?: React.JSX.Element
   platform?: string
@@ -85,6 +85,9 @@ const UserProfile: FC<UserProfileProps> = ({
 
       break
     }
+    case undefined: {
+      userStatusClass = ""
+    }
   }
 
   const activityOrText =
@@ -111,16 +114,19 @@ const UserProfile: FC<UserProfileProps> = ({
             isLarge={isLarge ?? false}
             avatarType={AvatarType.Profile}
             displayName={displayName}
+            avatarUrl={avatarUrl}
           />
         </div>
 
-        <div
-          className={twMerge(
-            "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
-            isLarge ? "h-[17px] w-[17px]" : "h-[13px] w-[13px]",
-            userStatusClass
-          )}
-        />
+        {status && (
+          <div
+            className={twMerge(
+              "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
+              isLarge ? "h-[17px] w-[17px]" : "h-[13px] w-[13px]",
+              userStatusClass
+            )}
+          />
+        )}
       </div>
 
       <div className="mr-auto inline-flex flex-col gap-[2px]">
diff --git a/src/containers/DevPreview.tsx b/src/containers/DevPreview.tsx
index ea3d1afd..7b7f42d1 100644
--- a/src/containers/DevPreview.tsx
+++ b/src/containers/DevPreview.tsx
@@ -1,7 +1,14 @@
+import DirectMessageModal from "@/components/DirectMessageModal"
 import {type FC} from "react"
 
 const DevelopmentPreview: FC = () => {
-  return <></>
+  return (
+    <>
+      <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
+        <DirectMessageModal />
+      </div>
+    </>
+  )
 }
 
 export default DevelopmentPreview
diff --git a/src/hooks/matrix/useConnection.ts b/src/hooks/matrix/useConnection.ts
index 67d0f307..40b5bc99 100644
--- a/src/hooks/matrix/useConnection.ts
+++ b/src/hooks/matrix/useConnection.ts
@@ -125,7 +125,8 @@ const useConnection = () => {
     }
 
     client.stopClient()
-  }, [client])
+    setSyncState(SyncState.Stopped)
+  }, [client, setSyncState])
 
   return {
     // TODO: Use assertion that the singleton must be defined if is connected.
diff --git a/src/hooks/matrix/useSidebarActions.ts b/src/hooks/matrix/useSidebarActions.ts
new file mode 100644
index 00000000..6df17014
--- /dev/null
+++ b/src/hooks/matrix/useSidebarActions.ts
@@ -0,0 +1,17 @@
+import useConnection from "./useConnection"
+import {useNavigate} from "react-router-dom"
+import {ViewPath} from "@/utils/util"
+
+const useSidebarActions = () => {
+  const {client, disconnect} = useConnection()
+  const navigate = useNavigate()
+
+  const onLogout = async () => {
+    await disconnect()
+    navigate(ViewPath.Login)
+  }
+
+  return {onLogout}
+}
+
+export default useSidebarActions
diff --git a/src/stories/quickActions.stories.tsx b/src/stories/quickActions.stories.tsx
deleted file mode 100644
index 5dcf8747..00000000
--- a/src/stories/quickActions.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {type Meta, type StoryObj} from "@storybook/react"
-import QuickActions, {type QuickActionsProps as QuickActionsProperties} from "../components/QuickActions"
-
-type Story = StoryObj<typeof QuickActions>
-
-const meta: Meta<typeof QuickActions> = {component: QuickActions}
-const render = (arguments_: QuickActionsProperties) => <QuickActions {...arguments_} />
-
-export const Default: Story = {
-  render,
-  args: {},
-}
-
-export default meta
diff --git a/src/stories/sidebarActions.stories.tsx b/src/stories/sidebarActions.stories.tsx
new file mode 100644
index 00000000..39b6bc37
--- /dev/null
+++ b/src/stories/sidebarActions.stories.tsx
@@ -0,0 +1,18 @@
+import {type Meta, type StoryObj} from "@storybook/react"
+import SidebarActions, {
+  type SidebarActionsProps as QuickActionsProperties,
+} from "../components/SidebarActions"
+
+type Story = StoryObj<typeof SidebarActions>
+
+const meta: Meta<typeof SidebarActions> = {component: SidebarActions}
+const render = (arguments_: QuickActionsProperties) => (
+  <SidebarActions {...arguments_} />
+)
+
+export const Default: Story = {
+  render,
+  args: {},
+}
+
+export default meta
diff --git a/src/views/app.tsx b/src/views/app.tsx
index fa4e3db6..5d824193 100644
--- a/src/views/app.tsx
+++ b/src/views/app.tsx
@@ -1,6 +1,6 @@
 import ChatContainer from "@/components/ChatContainer"
 import Navigation from "@/components/Navigation"
-import QuickActions from "@/components/QuickActions"
+import SidebarActions from "@/components/SidebarActions"
 import Roster from "@/components/Roster"
 import SearchBar, {type SearchResult} from "@/components/SearchBar"
 import UserBar from "@/components/UserBar"
@@ -36,7 +36,7 @@ const AppView: FC = () => {
       <div className="flex flex-col items-center">
         <Navigation className="mb-auto" />
 
-        <QuickActions
+        <SidebarActions
           className="p-4"
           onViewDirectMessages={() => {
             throw new Error("View direct messages not implemented.")
diff --git a/src/views/login.tsx b/src/views/login.tsx
index fa219b05..49b2a282 100644
--- a/src/views/login.tsx
+++ b/src/views/login.tsx
@@ -23,7 +23,7 @@ const LoginView: FC = () => {
   const [baseUrl, setBaseUrl] = useState("")
   const [accessToken, setAccessToken] = useState("")
 
-  const {connect, disconnect, syncState, lastSyncError, isConnecting} =
+  const {connect, disconnect, syncState, lastSyncError, isConnecting, client} =
     useConnection()
 
   const login = useCallback(async () => {
@@ -57,11 +57,16 @@ const LoginView: FC = () => {
 
   // Automatically login if credentials are cached.
   useEffect(() => {
-    if (credentials === null || isConnecting || syncState === SyncState.Error) {
+    if (
+      credentials === null ||
+      isConnecting ||
+      syncState === SyncState.Error ||
+      client !== null
+    ) {
       return
     }
 
-    void connect({...credentials}).then(async connectedAndSynced => {
+    void connect(credentials).then(async connectedAndSynced => {
       if (!connectedAndSynced) {
         return
       }
@@ -69,7 +74,15 @@ const LoginView: FC = () => {
       await disconnect()
       navigate(ViewPath.App)
     })
-  }, [connect, credentials, disconnect, isConnecting, navigate, syncState])
+  }, [
+    client,
+    connect,
+    credentials,
+    disconnect,
+    isConnecting,
+    navigate,
+    syncState,
+  ])
 
   return (
     <div className="flex h-screen w-screen items-center justify-center">

From 807f5752f629303d9847d688af4b2e0a65574b13 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Thu, 21 Mar 2024 11:17:24 -0400
Subject: [PATCH 02/62] =?UTF-8?q?feat:=20Abstract=20logic=20into=20=C2=B4u?=
 =?UTF-8?q?seUserSearch=C2=B4=20and=20=C2=B4useInvitationLink=C2=B4=20hook?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DirectMessageModal.tsx | 146 ++++++++++++++------------
 src/components/Input.tsx              |   1 +
 src/components/Room.tsx               |   1 +
 src/components/SidebarActions.tsx     |   6 +-
 src/components/UserBar.tsx            |  18 ++--
 src/components/UserProfile.tsx        |   6 +-
 src/hooks/matrix/useConnection.ts     |  12 +++
 src/hooks/matrix/useInvitationLink.ts |  31 ++++++
 src/hooks/matrix/useUserSearch.ts     |  48 +++++++++
 9 files changed, 187 insertions(+), 82 deletions(-)
 create mode 100644 src/hooks/matrix/useInvitationLink.ts
 create mode 100644 src/hooks/matrix/useUserSearch.ts

diff --git a/src/components/DirectMessageModal.tsx b/src/components/DirectMessageModal.tsx
index b31e8434..e05c4fca 100644
--- a/src/components/DirectMessageModal.tsx
+++ b/src/components/DirectMessageModal.tsx
@@ -1,61 +1,67 @@
-import {type FC} from "react"
+import {useEffect, useState, type FC} from "react"
 import Typography, {TypographyVariant} from "./Typography"
 import IconButton from "./IconButton"
-import {IoCloseCircle, IoCopyOutline, IoSend} from "react-icons/io5"
+import {IoCheckmark, IoCloseCircle, IoCopyOutline} from "react-icons/io5"
 import Input from "./Input"
 import UserProfile from "./UserProfile"
 import {stringToColor} from "@/utils/util"
+import useConnection from "@/hooks/matrix/useConnection"
+import useUserSearch from "@/hooks/matrix/useUserSearch"
+import useInvitationLink from "@/hooks/matrix/useInvitationLink"
 
-const DirectMessageModal: FC = () => {
-  return (
-      <div className="flex h-[80%] w-[50%] flex-col gap-2 rounded-lg bg-neutral-200 p-3">
-        <div className="flex">
-          <Typography variant={TypographyVariant.H3}>
-            Direct messages
-          </Typography>
+export type DirectMessageModalProps = {
+  onClose: () => void
+}
 
-          <IconButton
-            onClick={() => {
-              // TODO: Handle here close this modal.
-            }}
-            tooltip={"Close"}
-            Icon={IoCloseCircle}
-            className="ml-auto"
-            color="gray"
-          />
-        </div>
+const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
+  const {connectWithCachedCredentials, client} = useConnection()
+  const [userId, setUserId] = useState<string | null>(null)
+  const {userToFind, setUserToFind, usersResult} = useUserSearch(client)
+  const {invitationLink, isLinkCopied, copyToClipboard} =
+    useInvitationLink(userId)
 
-        <Typography>
-          Start a conversation with someone using their name, email, or
-          username.
-        </Typography>
+  useEffect(() => {
+    void connectWithCachedCredentials()
 
-        {/* TODO: Replace {} for real userId. */}
-        <Input
-          className="w-full"
-          placeholder="Example: { @arturx:matrix.org }"
-          actions={[{Icon: IoSend, tooltip: "Search...", onClick: () => {}}]}
+    if (client === null) {
+      return
+    }
+
+    setUserId(client.getUserId())
+  }, [client, connectWithCachedCredentials])
+
+  return (
+    // TODO: Should be pixels value, replace by the future design.
+    <div className="flex size-full max-h-[80%] max-w-[50%] flex-col gap-2 rounded-lg bg-neutral-100 p-3 shadow-2xl">
+      <div className="flex">
+        <Typography variant={TypographyVariant.H3}>Direct messages</Typography>
+
+        <IconButton
+          onClick={onClose}
+          tooltip="Close"
+          Icon={IoCloseCircle}
+          className="ml-auto"
+          color="gray"
         />
+      </div>
 
-        <div className="flex flex-col gap-2 p-1">
-          <Typography variant={TypographyVariant.P}>
-            RECENT CONVERSATIONS
-          </Typography>
+      <Typography>
+        Start a conversation with someone using their name, email, or username.
+      </Typography>
 
-          <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
-            {/* TODO: Replace this info for real info. */}
-            <UserProfile
-              text={"@arturx:matrix.org"}
-              displayName={"Arthur"}
-              displayNameColor={stringToColor("Arthur")}
-            />
+      <Input
+        className="w-full"
+        initialValue={userToFind}
+        onValueChange={setUserToFind}
+        placeholder="@username:matrix.org"
+      />
 
-            {/* TODO: Use real info. */}
-            <Typography variant={TypographyVariant.P} className="ml-auto">
-              22 days ago
-            </Typography>
-          </div>
+      <div className="flex flex-col gap-2 p-1">
+        <Typography variant={TypographyVariant.P}>
+          RECENT CONVERSATIONS
+        </Typography>
 
+        {usersResult === null ? (
           <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
             {/* TODO: Replace this info for real info. */}
             <UserProfile
@@ -69,36 +75,42 @@ const DirectMessageModal: FC = () => {
               22 days ago
             </Typography>
           </div>
+        ) : (
+          usersResult.map(userProps => <UserProfile {...userProps} />)
+        )}
 
-          <Typography>
-            Some suggestions may not be shown for privacy reasons. If you don't
-            find who you're looking for, send them your invitation link below.
-          </Typography>
-        </div>
+        <Typography>
+          Some suggestions may not be shown for privacy reasons. If you don't
+          find who you're looking for, send them your invitation link below.
+        </Typography>
+      </div>
 
-        <div className="mt-auto flex flex-col gap-2">
-          <div className="h-[1px] w-full bg-neutral-400" />
+      <div className="mt-auto flex flex-col gap-2">
+        <div className="h-[1px] w-full bg-neutral-400" />
 
-          <Typography>INVITATION LINK</Typography>
+        <Typography>INVITATION LINK</Typography>
 
-          <div className="flex flex-row items-center rounded-md border-[1px] border-black p-2">
-            {/* TODO: Replace for real invitation link. */}
-            <Typography
-              variant={TypographyVariant.Span}
-              className="text-blue-500">
-              https://matrix.to/#/@thecriss:matrix.org
-            </Typography>
+        <div className="flex flex-row items-center rounded-md border-[1px] border-black p-2">
+          <Typography
+            variant={TypographyVariant.Span}
+            className="text-blue-500">
+            {invitationLink ?? "Generating link..."}
+          </Typography>
 
-            <IconButton
-              className="ml-auto"
-              color="black"
-              onClick={() => {}}
-              tooltip={"Copy to clipboard"}
-              Icon={IoCopyOutline}
-            />
-          </div>
+          <IconButton
+            className="ml-auto"
+            color="black"
+            onClick={() => {
+              // TODO: Show toast when link has been copied.
+              void copyToClipboard()
+            }}
+            tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
+            Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
+            isDisabled={userId === null || isLinkCopied}
+          />
         </div>
       </div>
+    </div>
   )
 }
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index a0b52b08..5e886b03 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -140,6 +140,7 @@ const Input: FC<InputProps> = ({
                 onClick={action.onClick}
                 tooltip={action.tooltip}
                 Icon={action.Icon}
+                isDisabled={violatedConstraints.length > 0}
               />
             ))}
           </div>
diff --git a/src/components/Room.tsx b/src/components/Room.tsx
index 65aac84f..3307f17a 100644
--- a/src/components/Room.tsx
+++ b/src/components/Room.tsx
@@ -19,6 +19,7 @@ export type RoomProps = {
   containsUnreadMessages: boolean
   mentionCount: number
   onClick: () => void
+  lastMsgSentDate?: string
 }
 
 const Room: FC<RoomProps> = ({
diff --git a/src/components/SidebarActions.tsx b/src/components/SidebarActions.tsx
index 26f3723c..023f7b1d 100644
--- a/src/components/SidebarActions.tsx
+++ b/src/components/SidebarActions.tsx
@@ -36,7 +36,11 @@ const SidebarActions: FC<SidebarActionsProps> = ({
       {isDirectMessageModalVisible &&
         createPortal(
           <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
-            <DirectMessageModal />
+            <DirectMessageModal
+              onClose={() => {
+                setDirectMessageModalVisible(false)
+              }}
+            />
           </div>,
           document.body
         )}
diff --git a/src/components/UserBar.tsx b/src/components/UserBar.tsx
index 5cfd6065..78ec0483 100644
--- a/src/components/UserBar.tsx
+++ b/src/components/UserBar.tsx
@@ -22,16 +22,6 @@ const UserBar: FC<UserBarProps> = ({className}) => {
   const MAX_NAME_LENGTH = 18
   const {client, isConnecting} = useConnection()
 
-  const status = useMemo(() => {
-    if (isConnecting) {
-      return UserStatus.Idle
-    } else if (client?.isLoggedIn()) {
-      return UserStatus.Online
-    }
-
-    return UserStatus.Offline
-  }, [client, isConnecting])
-
   const userData = useMemo(() => {
     const userID = client?.getUserId() ?? null
 
@@ -42,6 +32,12 @@ const UserBar: FC<UserBarProps> = ({className}) => {
     const user = client?.getUser(userID)
     const avatarUrl = user?.avatarUrl
 
+    const status = client.isLoggedIn()
+      ? UserStatus.Online
+      : isConnecting
+        ? UserStatus.Idle
+        : UserStatus.Offline
+
     if (avatarUrl === undefined) {
       return
     }
@@ -58,7 +54,7 @@ const UserBar: FC<UserBarProps> = ({className}) => {
     }
 
     return userBarProperties
-  }, [client, status])
+  }, [client, isConnecting])
 
   return (
     <div className={twMerge("flex p-[x1]", className)}>
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 49425cd3..5a177169 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -67,7 +67,7 @@ const UserProfile: FC<UserProfileProps> = ({
   }
 
   const MAX_DISPLAY_NAME_LENGTH = 12
-  let userStatusClass: string
+  let userStatusClass: string | null = null
 
   switch (status) {
     case UserStatus.Online: {
@@ -86,7 +86,7 @@ const UserProfile: FC<UserProfileProps> = ({
       break
     }
     case undefined: {
-      userStatusClass = ""
+      break
     }
   }
 
@@ -118,7 +118,7 @@ const UserProfile: FC<UserProfileProps> = ({
           />
         </div>
 
-        {status && (
+        {userStatusClass && (
           <div
             className={twMerge(
               "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
diff --git a/src/hooks/matrix/useConnection.ts b/src/hooks/matrix/useConnection.ts
index 40b5bc99..bc6c77c7 100644
--- a/src/hooks/matrix/useConnection.ts
+++ b/src/hooks/matrix/useConnection.ts
@@ -7,6 +7,7 @@ import {
 } from "matrix-js-sdk"
 import {useCallback} from "react"
 import {create} from "zustand"
+import useCachedCredentials from "./useCachedCredentials"
 
 type ZustandClientStore = {
   client: MatrixClient | null
@@ -53,6 +54,8 @@ const useConnection = () => {
     setLastSyncError,
   } = useClientStore()
 
+  const {credentials} = useCachedCredentials()
+
   const connect = useCallback(
     async (credentials: Credentials): Promise<boolean> => {
       // The client is already (connected | connecting);
@@ -119,6 +122,14 @@ const useConnection = () => {
     ]
   )
 
+  const connectWithCachedCredentials = useCallback(async () => {
+    if (credentials === null) {
+      return false
+    }
+
+    return await connect(credentials)
+  }, [connect, credentials])
+
   const disconnect = useCallback(async () => {
     if (client === null || client.getSyncState() === SyncState.Stopped) {
       return
@@ -137,6 +148,7 @@ const useConnection = () => {
     disconnect,
     lastSyncError,
     isConnecting,
+    connectWithCachedCredentials,
   }
 }
 
diff --git a/src/hooks/matrix/useInvitationLink.ts b/src/hooks/matrix/useInvitationLink.ts
new file mode 100644
index 00000000..567f58e1
--- /dev/null
+++ b/src/hooks/matrix/useInvitationLink.ts
@@ -0,0 +1,31 @@
+import {useCallback, useEffect, useState} from "react"
+
+const checkIsLinkCopied = async (invitationLink: string): Promise<boolean> => {
+  return (await navigator.clipboard.readText()) === invitationLink
+}
+
+const useInvitationLink = (userId: string | null) => {
+  const [isLinkCopied, setLinkCopied] = useState(false)
+  const invitationLink = userId ? `https://matrix.to/#/${userId}` : null
+
+  useEffect(() => {
+    if (invitationLink === null) {
+      return
+    }
+
+    void checkIsLinkCopied(invitationLink).then(isCopied => {
+      setLinkCopied(isCopied)
+    })
+  }, [invitationLink])
+
+  const copyToClipboard = useCallback(async () => {
+    if (invitationLink) {
+      await navigator.clipboard.writeText(invitationLink)
+      setLinkCopied(true)
+    }
+  }, [invitationLink])
+
+  return {invitationLink, isLinkCopied, copyToClipboard}
+}
+
+export default useInvitationLink
diff --git a/src/hooks/matrix/useUserSearch.ts b/src/hooks/matrix/useUserSearch.ts
new file mode 100644
index 00000000..bfd58262
--- /dev/null
+++ b/src/hooks/matrix/useUserSearch.ts
@@ -0,0 +1,48 @@
+import {type UserProfileProps} from "@/components/UserProfile"
+import {stringToColor} from "@/utils/util"
+import {useState, useEffect} from "react"
+import {type MatrixClient} from "matrix-js-sdk"
+
+const useUserSearch = (client: MatrixClient | null, searchDelay = 500) => {
+  const [userToFind, setUserToFind] = useState("")
+
+  const [usersResult, setUsersResult] = useState<UserProfileProps[] | null>(
+    null
+  )
+
+  useEffect(() => {
+    const search = async () => {
+      if (userToFind.length <= 0) {
+        setUsersResult(null)
+        return
+      }
+
+      const results = await client?.searchUserDirectory({
+        term: userToFind,
+        limit: 4,
+      })
+
+      if (results?.limited) {
+        setUsersResult(
+          results.results.map(userResult => ({
+            displayName: userResult.display_name ?? userResult.user_id,
+            text: userResult.user_id,
+            displayNameColor: stringToColor(userResult.user_id),
+          }))
+        )
+      }
+    }
+
+    const timerId = setTimeout(() => {
+      void search()
+    }, searchDelay)
+
+    return () => {
+      clearTimeout(timerId)
+    }
+  }, [userToFind, client, searchDelay])
+
+  return {userToFind, setUserToFind, usersResult}
+}
+
+export default useUserSearch

From 936c15a7febdc4921139d5cc2c87a130f5440fc4 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Thu, 21 Mar 2024 11:24:28 -0400
Subject: [PATCH 03/62] =?UTF-8?q?feat:=20Implement=20=C2=B4DirectChatRecen?=
 =?UTF-8?q?t=C2=B4=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DirectMessageModal.tsx | 45 +++++++++++++++++++--------
 src/hooks/matrix/useSidebarActions.ts |  2 +-
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/DirectMessageModal.tsx b/src/components/DirectMessageModal.tsx
index e05c4fca..8754ee2e 100644
--- a/src/components/DirectMessageModal.tsx
+++ b/src/components/DirectMessageModal.tsx
@@ -13,6 +13,32 @@ export type DirectMessageModalProps = {
   onClose: () => void
 }
 
+type DirectChatRecentProps = {
+  userId: string
+  displayName: string
+  lastMsgSentDate: string
+}
+
+const DirectChatRecent: FC<DirectChatRecentProps> = ({
+  displayName,
+  userId,
+  lastMsgSentDate,
+}) => {
+  return (
+    <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
+      <UserProfile
+        text={userId}
+        displayName={displayName}
+        displayNameColor={stringToColor(userId)}
+      />
+
+      <Typography variant={TypographyVariant.P} className="ml-auto">
+        {lastMsgSentDate}
+      </Typography>
+    </div>
+  )
+}
+
 const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
   const {connectWithCachedCredentials, client} = useConnection()
   const [userId, setUserId] = useState<string | null>(null)
@@ -62,19 +88,12 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
         </Typography>
 
         {usersResult === null ? (
-          <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
-            {/* TODO: Replace this info for real info. */}
-            <UserProfile
-              text={"@thecrissx:matrix.org"}
-              displayName={"Tokyoto"}
-              displayNameColor={stringToColor("Tokyoto")}
-            />
-
-            {/* TODO: Use real info. */}
-            <Typography variant={TypographyVariant.P} className="ml-auto">
-              22 days ago
-            </Typography>
-          </div>
+          /* TODO: Replace this info for real info. */
+          <DirectChatRecent
+            userId="@thecrissx:matrix.org"
+            displayName="Tokyoto"
+            lastMsgSentDate="22 days ago"
+          />
         ) : (
           usersResult.map(userProps => <UserProfile {...userProps} />)
         )}
diff --git a/src/hooks/matrix/useSidebarActions.ts b/src/hooks/matrix/useSidebarActions.ts
index 6df17014..c8c8a51f 100644
--- a/src/hooks/matrix/useSidebarActions.ts
+++ b/src/hooks/matrix/useSidebarActions.ts
@@ -3,7 +3,7 @@ import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
 
 const useSidebarActions = () => {
-  const {client, disconnect} = useConnection()
+  const {disconnect} = useConnection()
   const navigate = useNavigate()
 
   const onLogout = async () => {

From d2760c40ce241ab7328a9aa159547cc400dabe05 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Thu, 21 Mar 2024 14:24:16 -0400
Subject: [PATCH 04/62] =?UTF-8?q?feat:=20Implement=20=C2=B4DirectMessageMo?=
 =?UTF-8?q?dal=C2=B4=20for=20SidebarActions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DirectMessageModal.tsx | 88 +++++++++++++++++++--------
 src/components/UserProfile.tsx        |  4 +-
 src/hooks/matrix/useConnection.ts     | 11 ----
 src/hooks/matrix/useInvitationLink.ts | 16 +++--
 src/hooks/matrix/useUserSearch.ts     | 26 ++++----
 src/utils/util.ts                     | 14 +++++
 6 files changed, 105 insertions(+), 54 deletions(-)

diff --git a/src/components/DirectMessageModal.tsx b/src/components/DirectMessageModal.tsx
index 8754ee2e..9a9a8221 100644
--- a/src/components/DirectMessageModal.tsx
+++ b/src/components/DirectMessageModal.tsx
@@ -4,10 +4,16 @@ import IconButton from "./IconButton"
 import {IoCheckmark, IoCloseCircle, IoCopyOutline} from "react-icons/io5"
 import Input from "./Input"
 import UserProfile from "./UserProfile"
-import {stringToColor} from "@/utils/util"
+import {
+  getDirectRoomsIds,
+  getPartnerUserIdFromRoomDirect,
+  normalizeName,
+  stringToColor,
+  timeFormatter,
+} from "@/utils/util"
 import useConnection from "@/hooks/matrix/useConnection"
-import useUserSearch from "@/hooks/matrix/useUserSearch"
 import useInvitationLink from "@/hooks/matrix/useInvitationLink"
+import useUsersSearch from "@/hooks/matrix/useUserSearch"
 
 export type DirectMessageModalProps = {
   onClose: () => void
@@ -16,7 +22,8 @@ export type DirectMessageModalProps = {
 type DirectChatRecentProps = {
   userId: string
   displayName: string
-  lastMsgSentDate: string
+  roomId: string
+  lastMsgSentDate?: number
 }
 
 const DirectChatRecent: FC<DirectChatRecentProps> = ({
@@ -25,41 +32,66 @@ const DirectChatRecent: FC<DirectChatRecentProps> = ({
   lastMsgSentDate,
 }) => {
   return (
-    <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-300">
+    <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-200">
       <UserProfile
         text={userId}
         displayName={displayName}
         displayNameColor={stringToColor(userId)}
+        className="mr-auto"
       />
 
-      <Typography variant={TypographyVariant.P} className="ml-auto">
-        {lastMsgSentDate}
-      </Typography>
+      {lastMsgSentDate && (
+        <Typography variant={TypographyVariant.P}>
+          {timeFormatter(lastMsgSentDate)}
+        </Typography>
+      )}
     </div>
   )
 }
 
 const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
-  const {connectWithCachedCredentials, client} = useConnection()
+  const {client} = useConnection()
   const [userId, setUserId] = useState<string | null>(null)
-  const {userToFind, setUserToFind, usersResult} = useUserSearch(client)
+  const [directChats, setDirectChats] = useState<DirectChatRecentProps[]>([])
+  const {userToFind, setUserToFind, usersResult} = useUsersSearch(client)
+
   const {invitationLink, isLinkCopied, copyToClipboard} =
     useInvitationLink(userId)
 
   useEffect(() => {
-    void connectWithCachedCredentials()
-
     if (client === null) {
       return
     }
 
     setUserId(client.getUserId())
-  }, [client, connectWithCachedCredentials])
+
+    const directRoomIds = getDirectRoomsIds(client)
+    const directChats: DirectChatRecentProps[] = []
+
+    for (const roomId of directRoomIds) {
+      const room = client.getRoom(roomId)
+      const lastMsgSentDate = room?.getLastLiveEvent()?.localTimestamp
+      const partnerUserId = getPartnerUserIdFromRoomDirect(room)
+
+      if (room === null || partnerUserId === null) {
+        continue
+      }
+
+      directChats.push({
+        roomId: room.roomId,
+        userId: partnerUserId,
+        displayName: normalizeName(room.name),
+        lastMsgSentDate,
+      })
+    }
+
+    setDirectChats(directChats)
+  }, [client])
 
   return (
     // TODO: Should be pixels value, replace by the future design.
-    <div className="flex size-full max-h-[80%] max-w-[50%] flex-col gap-2 rounded-lg bg-neutral-100 p-3 shadow-2xl">
-      <div className="flex">
+    <div className="flex size-full max-h-[80%] max-w-[50%] flex-col gap-2 rounded-lg bg-neutral-100 p-5 shadow-2xl">
+      <div className="flex w-full">
         <Typography variant={TypographyVariant.H3}>Direct messages</Typography>
 
         <IconButton
@@ -72,31 +104,33 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
       </div>
 
       <Typography>
-        Start a conversation with someone using their name, email, or username.
+        Start a conversation with someone using their name or username
+        (@username:matrix.org).
       </Typography>
 
       <Input
         className="w-full"
         initialValue={userToFind}
         onValueChange={setUserToFind}
-        placeholder="@username:matrix.org"
+        placeholder="Enter name or username"
       />
 
-      <div className="flex flex-col gap-2 p-1">
+      <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
         <Typography variant={TypographyVariant.P}>
           RECENT CONVERSATIONS
         </Typography>
 
-        {usersResult === null ? (
-          /* TODO: Replace this info for real info. */
-          <DirectChatRecent
-            userId="@thecrissx:matrix.org"
-            displayName="Tokyoto"
-            lastMsgSentDate="22 days ago"
-          />
-        ) : (
-          usersResult.map(userProps => <UserProfile {...userProps} />)
-        )}
+        <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
+          {usersResult === null
+            ? directChats.map(directChatProps => (
+                <DirectChatRecent {...directChatProps} />
+              ))
+            : usersResult.map(userProps => (
+                <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
+                  <UserProfile {...userProps} />
+                </div>
+              ))}
+        </div>
 
         <Typography>
           Some suggestions may not be shown for privacy reasons. If you don't
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 5a177169..4f3ad300 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -23,6 +23,7 @@ export type UserProfileProps = {
   icon?: React.JSX.Element
   platform?: string
   isLarge?: boolean
+  className?: string
 }
 
 const UserProfile: FC<UserProfileProps> = ({
@@ -35,6 +36,7 @@ const UserProfile: FC<UserProfileProps> = ({
   icon,
   isLarge,
   platform,
+  className,
 }) => {
   const hasIcon = icon !== undefined
   const hasActivity = activity !== undefined
@@ -102,7 +104,7 @@ const UserProfile: FC<UserProfileProps> = ({
     )
 
   return (
-    <div className="flex gap-2">
+    <div className={twMerge("flex gap-2", className)}>
       <div className="relative">
         <div
           className={twMerge(
diff --git a/src/hooks/matrix/useConnection.ts b/src/hooks/matrix/useConnection.ts
index bc6c77c7..bc1031b6 100644
--- a/src/hooks/matrix/useConnection.ts
+++ b/src/hooks/matrix/useConnection.ts
@@ -54,8 +54,6 @@ const useConnection = () => {
     setLastSyncError,
   } = useClientStore()
 
-  const {credentials} = useCachedCredentials()
-
   const connect = useCallback(
     async (credentials: Credentials): Promise<boolean> => {
       // The client is already (connected | connecting);
@@ -122,14 +120,6 @@ const useConnection = () => {
     ]
   )
 
-  const connectWithCachedCredentials = useCallback(async () => {
-    if (credentials === null) {
-      return false
-    }
-
-    return await connect(credentials)
-  }, [connect, credentials])
-
   const disconnect = useCallback(async () => {
     if (client === null || client.getSyncState() === SyncState.Stopped) {
       return
@@ -148,7 +138,6 @@ const useConnection = () => {
     disconnect,
     lastSyncError,
     isConnecting,
-    connectWithCachedCredentials,
   }
 }
 
diff --git a/src/hooks/matrix/useInvitationLink.ts b/src/hooks/matrix/useInvitationLink.ts
index 567f58e1..bd760964 100644
--- a/src/hooks/matrix/useInvitationLink.ts
+++ b/src/hooks/matrix/useInvitationLink.ts
@@ -1,7 +1,13 @@
 import {useCallback, useEffect, useState} from "react"
 
 const checkIsLinkCopied = async (invitationLink: string): Promise<boolean> => {
-  return (await navigator.clipboard.readText()) === invitationLink
+  try {
+    const textClipboard = await navigator.clipboard.readText()
+
+    return textClipboard === invitationLink
+  } catch {
+    return false
+  }
 }
 
 const useInvitationLink = (userId: string | null) => {
@@ -19,10 +25,12 @@ const useInvitationLink = (userId: string | null) => {
   }, [invitationLink])
 
   const copyToClipboard = useCallback(async () => {
-    if (invitationLink) {
-      await navigator.clipboard.writeText(invitationLink)
-      setLinkCopied(true)
+    if (!invitationLink) {
+      return
     }
+
+    await navigator.clipboard.writeText(invitationLink)
+    setLinkCopied(true)
   }, [invitationLink])
 
   return {invitationLink, isLinkCopied, copyToClipboard}
diff --git a/src/hooks/matrix/useUserSearch.ts b/src/hooks/matrix/useUserSearch.ts
index bfd58262..3c5a030a 100644
--- a/src/hooks/matrix/useUserSearch.ts
+++ b/src/hooks/matrix/useUserSearch.ts
@@ -3,7 +3,9 @@ import {stringToColor} from "@/utils/util"
 import {useState, useEffect} from "react"
 import {type MatrixClient} from "matrix-js-sdk"
 
-const useUserSearch = (client: MatrixClient | null, searchDelay = 500) => {
+const LIMIT_USER_SEARCH = 100
+
+const useUsersSearch = (client: MatrixClient | null, searchDelay = 500) => {
   const [userToFind, setUserToFind] = useState("")
 
   const [usersResult, setUsersResult] = useState<UserProfileProps[] | null>(
@@ -19,18 +21,20 @@ const useUserSearch = (client: MatrixClient | null, searchDelay = 500) => {
 
       const results = await client?.searchUserDirectory({
         term: userToFind,
-        limit: 4,
+        limit: LIMIT_USER_SEARCH,
       })
 
-      if (results?.limited) {
-        setUsersResult(
-          results.results.map(userResult => ({
-            displayName: userResult.display_name ?? userResult.user_id,
-            text: userResult.user_id,
-            displayNameColor: stringToColor(userResult.user_id),
-          }))
-        )
+      if (results === undefined) {
+        return
       }
+
+      setUsersResult(
+        results.results.map(userResult => ({
+          displayName: userResult.display_name ?? userResult.user_id,
+          text: userResult.user_id,
+          displayNameColor: stringToColor(userResult.user_id),
+        }))
+      )
     }
 
     const timerId = setTimeout(() => {
@@ -45,4 +49,4 @@ const useUserSearch = (client: MatrixClient | null, searchDelay = 500) => {
   return {userToFind, setUserToFind, usersResult}
 }
 
-export default useUserSearch
+export default useUsersSearch
diff --git a/src/utils/util.ts b/src/utils/util.ts
index c30d1328..80f220f5 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -360,3 +360,17 @@ export function normalizeName(displayName: string): string {
     .filter(char => char.charCodeAt(0) <= ASCII_LIMIT)
     .join("")
 }
+
+export function getPartnerUserIdFromRoomDirect(
+  room: Room | null
+): string | null {
+  if (room === null) {
+    return null
+  }
+
+  const userId = room
+    .getJoinedMembers()
+    .find(member => member.userId !== room.myUserId)?.userId
+
+  return userId ?? null
+}

From bd926fa4c0dbbaa15adb297f995183109adc0be6 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Thu, 21 Mar 2024 16:23:35 -0400
Subject: [PATCH 05/62] fix: Resolve comments of the PR

---
 src/components/DirectMessageModal.tsx         | 37 +++++++++----------
 src/components/Room.tsx                       |  1 -
 .../{ => SidebarActions}/SidebarActions.tsx   |  8 ++--
 .../SidebarActions}/useSidebarActions.ts      |  2 +-
 src/components/UserBar.tsx                    | 12 +++---
 src/components/UserProfile.tsx                |  2 +-
 src/hooks/matrix/useInvitationLink.ts         |  8 ++--
 src/hooks/matrix/useUserSearch.ts             | 28 ++++++--------
 src/stories/sidebarActions.stories.tsx        |  3 +-
 src/utils/util.ts                             | 18 +++++----
 src/views/app.tsx                             |  2 +-
 11 files changed, 60 insertions(+), 61 deletions(-)
 rename src/components/{ => SidebarActions}/SidebarActions.tsx (91%)
 rename src/{hooks/matrix => components/SidebarActions}/useSidebarActions.ts (84%)

diff --git a/src/components/DirectMessageModal.tsx b/src/components/DirectMessageModal.tsx
index 9a9a8221..31430501 100644
--- a/src/components/DirectMessageModal.tsx
+++ b/src/components/DirectMessageModal.tsx
@@ -23,26 +23,25 @@ type DirectChatRecentProps = {
   userId: string
   displayName: string
   roomId: string
-  lastMsgSentDate?: number
+  lastMessageSentDate?: number
 }
 
 const DirectChatRecent: FC<DirectChatRecentProps> = ({
   displayName,
   userId,
-  lastMsgSentDate,
+  lastMessageSentDate,
 }) => {
   return (
-    <div className="flex cursor-pointer flex-row items-center rounded-lg p-2 hover:bg-neutral-200">
+    <div className="flex cursor-pointer flex-row items-center justify-between rounded-lg p-2 hover:bg-neutral-200">
       <UserProfile
         text={userId}
         displayName={displayName}
         displayNameColor={stringToColor(userId)}
-        className="mr-auto"
       />
 
-      {lastMsgSentDate && (
+      {lastMessageSentDate !== undefined && (
         <Typography variant={TypographyVariant.P}>
-          {timeFormatter(lastMsgSentDate)}
+          {timeFormatter(lastMessageSentDate)}
         </Typography>
       )}
     </div>
@@ -53,11 +52,12 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
   const {client} = useConnection()
   const [userId, setUserId] = useState<string | null>(null)
   const [directChats, setDirectChats] = useState<DirectChatRecentProps[]>([])
-  const {userToFind, setUserToFind, usersResult} = useUsersSearch(client)
+  const {query, setQuery, results} = useUsersSearch(client)
 
   const {invitationLink, isLinkCopied, copyToClipboard} =
     useInvitationLink(userId)
 
+  // Initially retrieves all direct chat conversations associated with the current user.
   useEffect(() => {
     if (client === null) {
       return
@@ -66,26 +66,25 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
     setUserId(client.getUserId())
 
     const directRoomIds = getDirectRoomsIds(client)
-    const directChats: DirectChatRecentProps[] = []
+    const directChatsProps: DirectChatRecentProps[] = []
 
     for (const roomId of directRoomIds) {
       const room = client.getRoom(roomId)
-      const lastMsgSentDate = room?.getLastLiveEvent()?.localTimestamp
-      const partnerUserId = getPartnerUserIdFromRoomDirect(room)
+      const lastMessageSentDate = room?.getLastLiveEvent()?.localTimestamp
 
-      if (room === null || partnerUserId === null) {
+      if (room === null) {
         continue
       }
 
-      directChats.push({
+      directChatsProps.push({
         roomId: room.roomId,
-        userId: partnerUserId,
+        userId: getPartnerUserIdFromRoomDirect(room),
         displayName: normalizeName(room.name),
-        lastMsgSentDate,
+        lastMessageSentDate,
       })
     }
 
-    setDirectChats(directChats)
+    setDirectChats(directChatsProps)
   }, [client])
 
   return (
@@ -110,8 +109,8 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
 
       <Input
         className="w-full"
-        initialValue={userToFind}
-        onValueChange={setUserToFind}
+        initialValue={query}
+        onValueChange={setQuery}
         placeholder="Enter name or username"
       />
 
@@ -121,11 +120,11 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
         </Typography>
 
         <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
-          {usersResult === null
+          {results === null
             ? directChats.map(directChatProps => (
                 <DirectChatRecent {...directChatProps} />
               ))
-            : usersResult.map(userProps => (
+            : results.map(userProps => (
                 <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
                   <UserProfile {...userProps} />
                 </div>
diff --git a/src/components/Room.tsx b/src/components/Room.tsx
index 3307f17a..65aac84f 100644
--- a/src/components/Room.tsx
+++ b/src/components/Room.tsx
@@ -19,7 +19,6 @@ export type RoomProps = {
   containsUnreadMessages: boolean
   mentionCount: number
   onClick: () => void
-  lastMsgSentDate?: string
 }
 
 const Room: FC<RoomProps> = ({
diff --git a/src/components/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
similarity index 91%
rename from src/components/SidebarActions.tsx
rename to src/components/SidebarActions/SidebarActions.tsx
index 023f7b1d..eb921989 100644
--- a/src/components/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -1,5 +1,5 @@
 import {useState, type FC} from "react"
-import IconButton from "./IconButton"
+import IconButton from "../IconButton"
 import {twMerge} from "tailwind-merge"
 import {
   IoPaperPlane,
@@ -8,9 +8,9 @@ import {
   IoNotificationsSharp,
   IoCall,
 } from "react-icons/io5"
-import useSidebarActions from "@/hooks/matrix/useSidebarActions"
+import useSidebarActions from "@/components/SidebarActions/useSidebarActions"
 import {createPortal} from "react-dom"
-import DirectMessageModal from "./DirectMessageModal"
+import DirectMessageModal from "../DirectMessageModal"
 
 export type SidebarActionsProps = {
   onViewDirectMessages: () => void
@@ -28,6 +28,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({
   className,
 }) => {
   const {onLogout} = useSidebarActions()
+
   const [isDirectMessageModalVisible, setDirectMessageModalVisible] =
     useState(false)
 
@@ -44,6 +45,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({
           </div>,
           document.body
         )}
+
       <section className={twMerge("inline-flex flex-col gap-4", className)}>
         <IconButton
           onClick={() => {
diff --git a/src/hooks/matrix/useSidebarActions.ts b/src/components/SidebarActions/useSidebarActions.ts
similarity index 84%
rename from src/hooks/matrix/useSidebarActions.ts
rename to src/components/SidebarActions/useSidebarActions.ts
index c8c8a51f..a4fa4616 100644
--- a/src/hooks/matrix/useSidebarActions.ts
+++ b/src/components/SidebarActions/useSidebarActions.ts
@@ -1,4 +1,4 @@
-import useConnection from "./useConnection"
+import useConnection from "../../hooks/matrix/useConnection"
 import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
 
diff --git a/src/components/UserBar.tsx b/src/components/UserBar.tsx
index 78ec0483..e1b25fb3 100644
--- a/src/components/UserBar.tsx
+++ b/src/components/UserBar.tsx
@@ -23,13 +23,13 @@ const UserBar: FC<UserBarProps> = ({className}) => {
   const {client, isConnecting} = useConnection()
 
   const userData = useMemo(() => {
-    const userID = client?.getUserId() ?? null
+    const userId = client?.getUserId() ?? null
 
-    if (userID === null || client === null) {
+    if (userId === null || client === null) {
       return
     }
 
-    const user = client?.getUser(userID)
+    const user = client?.getUser(userId)
     const avatarUrl = user?.avatarUrl
 
     const status = client.isLoggedIn()
@@ -43,13 +43,13 @@ const UserBar: FC<UserBarProps> = ({className}) => {
     }
 
     const imgUrl = getImageUrl(avatarUrl, client)
-    const displayName = user?.displayName ?? userID
+    const displayName = user?.displayName ?? userId
 
     const userBarProperties: UserProfileProperties = {
       avatarUrl: imgUrl,
       displayName: trim(displayName, MAX_NAME_LENGTH),
-      text: trim(getUsernameByUserId(userID), MAX_NAME_LENGTH),
-      displayNameColor: stringToColor(userID),
+      text: trim(getUsernameByUserId(userId), MAX_NAME_LENGTH),
+      displayNameColor: stringToColor(userId),
       status,
     }
 
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 4f3ad300..3f8dafc7 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -120,7 +120,7 @@ const UserProfile: FC<UserProfileProps> = ({
           />
         </div>
 
-        {userStatusClass && (
+        {userStatusClass !== undefined && (
           <div
             className={twMerge(
               "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
diff --git a/src/hooks/matrix/useInvitationLink.ts b/src/hooks/matrix/useInvitationLink.ts
index bd760964..6da8ee28 100644
--- a/src/hooks/matrix/useInvitationLink.ts
+++ b/src/hooks/matrix/useInvitationLink.ts
@@ -6,6 +6,8 @@ const checkIsLinkCopied = async (invitationLink: string): Promise<boolean> => {
 
     return textClipboard === invitationLink
   } catch {
+    // If the user has an empty clipboard or if permission to access the clipboard was not granted.
+
     return false
   }
 }
@@ -19,13 +21,11 @@ const useInvitationLink = (userId: string | null) => {
       return
     }
 
-    void checkIsLinkCopied(invitationLink).then(isCopied => {
-      setLinkCopied(isCopied)
-    })
+    void checkIsLinkCopied(invitationLink).then(setLinkCopied)
   }, [invitationLink])
 
   const copyToClipboard = useCallback(async () => {
-    if (!invitationLink) {
+    if (invitationLink === null) {
       return
     }
 
diff --git a/src/hooks/matrix/useUserSearch.ts b/src/hooks/matrix/useUserSearch.ts
index 3c5a030a..3f199d65 100644
--- a/src/hooks/matrix/useUserSearch.ts
+++ b/src/hooks/matrix/useUserSearch.ts
@@ -6,30 +6,24 @@ import {type MatrixClient} from "matrix-js-sdk"
 const LIMIT_USER_SEARCH = 100
 
 const useUsersSearch = (client: MatrixClient | null, searchDelay = 500) => {
-  const [userToFind, setUserToFind] = useState("")
-
-  const [usersResult, setUsersResult] = useState<UserProfileProps[] | null>(
-    null
-  )
+  const [query, setQuery] = useState("")
+  const [results, setResult] = useState<UserProfileProps[] | null>(null)
 
   useEffect(() => {
     const search = async () => {
-      if (userToFind.length <= 0) {
-        setUsersResult(null)
+      if (query.length <= 0 || client === null) {
+        setResult(null)
+
         return
       }
 
-      const results = await client?.searchUserDirectory({
-        term: userToFind,
+      const response = await client.searchUserDirectory({
+        term: query,
         limit: LIMIT_USER_SEARCH,
       })
 
-      if (results === undefined) {
-        return
-      }
-
-      setUsersResult(
-        results.results.map(userResult => ({
+      setResult(
+        response.results.map(userResult => ({
           displayName: userResult.display_name ?? userResult.user_id,
           text: userResult.user_id,
           displayNameColor: stringToColor(userResult.user_id),
@@ -44,9 +38,9 @@ const useUsersSearch = (client: MatrixClient | null, searchDelay = 500) => {
     return () => {
       clearTimeout(timerId)
     }
-  }, [userToFind, client, searchDelay])
+  }, [query, client, searchDelay])
 
-  return {userToFind, setUserToFind, usersResult}
+  return {query, setQuery, results}
 }
 
 export default useUsersSearch
diff --git a/src/stories/sidebarActions.stories.tsx b/src/stories/sidebarActions.stories.tsx
index 39b6bc37..c783265a 100644
--- a/src/stories/sidebarActions.stories.tsx
+++ b/src/stories/sidebarActions.stories.tsx
@@ -1,11 +1,12 @@
 import {type Meta, type StoryObj} from "@storybook/react"
 import SidebarActions, {
   type SidebarActionsProps as QuickActionsProperties,
-} from "../components/SidebarActions"
+} from "../components/SidebarActions/SidebarActions"
 
 type Story = StoryObj<typeof SidebarActions>
 
 const meta: Meta<typeof SidebarActions> = {component: SidebarActions}
+
 const render = (arguments_: QuickActionsProperties) => (
   <SidebarActions {...arguments_} />
 )
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 80f220f5..37f0e76f 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -361,16 +361,20 @@ export function normalizeName(displayName: string): string {
     .join("")
 }
 
-export function getPartnerUserIdFromRoomDirect(
-  room: Room | null
-): string | null {
-  if (room === null) {
-    return null
-  }
+export function getPartnerUserIdFromRoomDirect(room: Room): string {
+  assert(
+    room.getJoinedMemberCount() === 2,
+    "Direct chat must have exactly two participants."
+  )
 
   const userId = room
     .getJoinedMembers()
     .find(member => member.userId !== room.myUserId)?.userId
 
-  return userId ?? null
+  assert(
+    userId !== undefined,
+    "If one participant is the current user, the other must exist."
+  )
+
+  return userId
 }
diff --git a/src/views/app.tsx b/src/views/app.tsx
index 5d824193..b36d0d50 100644
--- a/src/views/app.tsx
+++ b/src/views/app.tsx
@@ -1,6 +1,6 @@
 import ChatContainer from "@/components/ChatContainer"
 import Navigation from "@/components/Navigation"
-import SidebarActions from "@/components/SidebarActions"
+import SidebarActions from "@/components/SidebarActions/SidebarActions"
 import Roster from "@/components/Roster"
 import SearchBar, {type SearchResult} from "@/components/SearchBar"
 import UserBar from "@/components/UserBar"

From 6531016cc3d54368f5d140e5e76905a80495224a Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 22 Mar 2024 14:40:43 -0400
Subject: [PATCH 06/62] feat: Implement `useDebounced` hook

---
 src/components/UserProfile.tsx    |  2 +-
 src/hooks/matrix/useConnection.ts |  1 -
 src/hooks/matrix/useUserSearch.ts | 44 ++++++++++++++++---------------
 src/hooks/util/useDebounced.ts    | 19 +++++++++++++
 4 files changed, 43 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/util/useDebounced.ts

diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 3f8dafc7..956c806f 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -120,7 +120,7 @@ const UserProfile: FC<UserProfileProps> = ({
           />
         </div>
 
-        {userStatusClass !== undefined && (
+        {userStatusClass !== null && (
           <div
             className={twMerge(
               "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
diff --git a/src/hooks/matrix/useConnection.ts b/src/hooks/matrix/useConnection.ts
index bc1031b6..40b5bc99 100644
--- a/src/hooks/matrix/useConnection.ts
+++ b/src/hooks/matrix/useConnection.ts
@@ -7,7 +7,6 @@ import {
 } from "matrix-js-sdk"
 import {useCallback} from "react"
 import {create} from "zustand"
-import useCachedCredentials from "./useCachedCredentials"
 
 type ZustandClientStore = {
   client: MatrixClient | null
diff --git a/src/hooks/matrix/useUserSearch.ts b/src/hooks/matrix/useUserSearch.ts
index 3f199d65..2e64565d 100644
--- a/src/hooks/matrix/useUserSearch.ts
+++ b/src/hooks/matrix/useUserSearch.ts
@@ -2,43 +2,45 @@ import {type UserProfileProps} from "@/components/UserProfile"
 import {stringToColor} from "@/utils/util"
 import {useState, useEffect} from "react"
 import {type MatrixClient} from "matrix-js-sdk"
+import useDebounced from "../util/useDebounced"
 
 const LIMIT_USER_SEARCH = 100
 
 const useUsersSearch = (client: MatrixClient | null, searchDelay = 500) => {
   const [query, setQuery] = useState("")
   const [results, setResult] = useState<UserProfileProps[] | null>(null)
+  const debouncedText = useDebounced(query, 500)
 
   useEffect(() => {
     const search = async () => {
-      if (query.length <= 0 || client === null) {
+      if (debouncedText.length <= 0 || client === null) {
         setResult(null)
 
         return
       }
 
-      const response = await client.searchUserDirectory({
-        term: query,
-        limit: LIMIT_USER_SEARCH,
-      })
-
-      setResult(
-        response.results.map(userResult => ({
-          displayName: userResult.display_name ?? userResult.user_id,
-          text: userResult.user_id,
-          displayNameColor: stringToColor(userResult.user_id),
-        }))
-      )
-    }
-
-    const timerId = setTimeout(() => {
-      void search()
-    }, searchDelay)
+      try {
+        const response = await client.searchUserDirectory({
+          term: debouncedText,
+          limit: LIMIT_USER_SEARCH,
+        })
+
+        setResult(
+          response.results.map(userResult => ({
+            displayName: userResult.display_name ?? userResult.user_id,
+            text: userResult.user_id,
+            displayNameColor: stringToColor(userResult.user_id),
+          }))
+        )
+      } catch (error) {
+        console.error("Error during user search:", error)
 
-    return () => {
-      clearTimeout(timerId)
+        setResult(null)
+      }
     }
-  }, [query, client, searchDelay])
+
+    void search()
+  }, [client, debouncedText])
 
   return {query, setQuery, results}
 }
diff --git a/src/hooks/util/useDebounced.ts b/src/hooks/util/useDebounced.ts
new file mode 100644
index 00000000..de2c93a7
--- /dev/null
+++ b/src/hooks/util/useDebounced.ts
@@ -0,0 +1,19 @@
+import {useState, useEffect} from "react"
+
+function useDebounced<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+export default useDebounced

From 9f737fa29391b278133c3a014c95f12369245f41 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 22 Mar 2024 14:44:00 -0400
Subject: [PATCH 07/62] feat: More use `useCallback` for `useSidebarActions`

---
 src/components/SidebarActions/useSidebarActions.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/SidebarActions/useSidebarActions.ts b/src/components/SidebarActions/useSidebarActions.ts
index a4fa4616..f04830c5 100644
--- a/src/components/SidebarActions/useSidebarActions.ts
+++ b/src/components/SidebarActions/useSidebarActions.ts
@@ -1,15 +1,16 @@
 import useConnection from "../../hooks/matrix/useConnection"
 import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
+import {useCallback} from "react"
 
 const useSidebarActions = () => {
   const {disconnect} = useConnection()
   const navigate = useNavigate()
 
-  const onLogout = async () => {
+  const onLogout = useCallback(async () => {
     await disconnect()
     navigate(ViewPath.Login)
-  }
+  }, [disconnect, navigate])
 
   return {onLogout}
 }

From c6932528d42a904b7e85a20161c649e89589bbd7 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 22 Mar 2024 21:03:35 -0400
Subject: [PATCH 08/62] refactor: Convert `SidebarActions` as smart component

---
 src/components/Modal.tsx                      | 33 ++++++-----
 .../SidebarActions/SidebarActions.tsx         | 56 +++++++++----------
 src/components/UserProfile.tsx                |  2 +-
 src/views/app.tsx                             | 24 +-------
 4 files changed, 48 insertions(+), 67 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 778bbee2..76777ead 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,4 +1,5 @@
 import {useMemo, type FC} from "react"
+import {createPortal} from "react-dom"
 import {twMerge} from "tailwind-merge"
 
 export enum ModalPosition {
@@ -46,20 +47,24 @@ const Modal: FC<ModalProps> = ({position, dialogs}) => {
   }
 
   return (
-    <div
-      className={twMerge(
-        "fixed inset-0 flex content-center items-center bg-modalOverlay *:absolute",
-        getPopupPositionClassName(position)
-      )}>
-      {dialogsToShow.map((dialog, index) => (
-        <div
-          key={dialog.key ?? index}
-          className="animate-enter"
-          style={{opacity: calculateOpacity(index)}}>
-          {dialog}
-        </div>
-      ))}
-    </div>
+    dialogs.length > 0 &&
+    createPortal(
+      <div
+        className={twMerge(
+          "fixed inset-0 flex content-center items-center bg-modalOverlay *:absolute",
+          getPopupPositionClassName(position)
+        )}>
+        {dialogsToShow.map((dialog, index) => (
+          <div
+            key={dialog.key ?? index}
+            className="animate-enter"
+            style={{opacity: calculateOpacity(index)}}>
+            {dialog}
+          </div>
+        ))}
+      </div>,
+      document.body
+    )
   )
 }
 
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index eb921989..e63a2be7 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -9,63 +9,57 @@ import {
   IoCall,
 } from "react-icons/io5"
 import useSidebarActions from "@/components/SidebarActions/useSidebarActions"
-import {createPortal} from "react-dom"
 import DirectMessageModal from "../DirectMessageModal"
+import Modal from "../Modal"
 
 export type SidebarActionsProps = {
-  onViewDirectMessages: () => void
-  onViewCalls: () => void
-  onViewNotifications: () => void
-  onOpenExtensions: () => void
-  onLogout: () => void
   className?: string
 }
 
-const SidebarActions: FC<SidebarActionsProps> = ({
-  onViewCalls,
-  onViewNotifications,
-  onOpenExtensions,
-  className,
-}) => {
+const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
   const {onLogout} = useSidebarActions()
-
-  const [isDirectMessageModalVisible, setDirectMessageModalVisible] =
-    useState(false)
+  const [dialogs, setDialogs] = useState<React.JSX.Element[]>([])
 
   return (
     <>
-      {isDirectMessageModalVisible &&
-        createPortal(
-          <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
-            <DirectMessageModal
-              onClose={() => {
-                setDirectMessageModalVisible(false)
-              }}
-            />
-          </div>,
-          document.body
-        )}
-
+      <Modal dialogs={dialogs} />
       <section className={twMerge("inline-flex flex-col gap-4", className)}>
         <IconButton
           onClick={() => {
-            setDirectMessageModalVisible(true)
+            setDialogs(prev => [
+              ...prev,
+              <DirectMessageModal
+                onClose={() => {
+                  setDialogs([])
+                }}
+              />,
+            ])
           }}
           tooltip="Direct messages"
           Icon={IoPaperPlane}
         />
 
-        <IconButton onClick={onViewCalls} tooltip="Calls" Icon={IoCall} />
+        <IconButton
+          onClick={() => {
+            throw new Error("View calls not implemented.")
+          }}
+          tooltip="Calls"
+          Icon={IoCall}
+        />
 
         <IconButton
-          onClick={onViewNotifications}
+          onClick={() => {
+            throw new Error("View notifications not implemented.")
+          }}
           tooltip="Notifications"
           Icon={IoNotificationsSharp}
           isDotVisible
         />
 
         <IconButton
-          onClick={onOpenExtensions}
+          onClick={() => {
+            throw new Error("Open extensions not implemented.")
+          }}
           tooltip="Extensions"
           Icon={IoExtensionPuzzle}
         />
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 956c806f..4a59ca3e 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -124,7 +124,7 @@ const UserProfile: FC<UserProfileProps> = ({
           <div
             className={twMerge(
               "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
-              isLarge ? "h-[17px] w-[17px]" : "h-[13px] w-[13px]",
+              isLarge ? "size-[17px]" : "size-[13px]",
               userStatusClass
             )}
           />
diff --git a/src/views/app.tsx b/src/views/app.tsx
index b36d0d50..2b180d4c 100644
--- a/src/views/app.tsx
+++ b/src/views/app.tsx
@@ -13,7 +13,7 @@ import {useNavigate} from "react-router-dom"
 
 const AppView: FC = () => {
   const navigate = useNavigate()
-  const {connect, disconnect} = useConnection()
+  const {connect} = useConnection()
   const {credentials} = useCachedCredentials()
 
   // Connect on startup.
@@ -29,32 +29,14 @@ const AppView: FC = () => {
 
       navigate(ViewPath.Login)
     })
-  }, [connect, credentials, disconnect, navigate])
+  }, [connect, credentials, navigate])
 
   return (
     <div className="flex size-full flex-row">
       <div className="flex flex-col items-center">
         <Navigation className="mb-auto" />
 
-        <SidebarActions
-          className="p-4"
-          onViewDirectMessages={() => {
-            throw new Error("View direct messages not implemented.")
-          }}
-          onViewCalls={() => {
-            throw new Error("View calls not implemented.")
-          }}
-          onViewNotifications={() => {
-            throw new Error("View notifications not implemented.")
-          }}
-          onOpenExtensions={() => {
-            throw new Error("Open extensions not implemented.")
-          }}
-          onLogout={() => {
-            void disconnect()
-            navigate(ViewPath.Login)
-          }}
-        />
+        <SidebarActions className="p-4" />
       </div>
 
       <div className="flex flex-col border border-solid border-stone-200">

From f38455ea0f77e34c21babe957c2dff281ff17dea Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 22 Mar 2024 21:14:03 -0400
Subject: [PATCH 09/62] refactor: Improve `Modal` component for use
 `createPortal`

---
 src/components/Modal.tsx                      | 31 +++++--------------
 .../SidebarActions/SidebarActions.tsx         | 22 +++++++------
 src/containers/DevPreview.tsx                 |  6 +++-
 3 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 76777ead..a3e4a440 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,4 +1,4 @@
-import {useMemo, type FC} from "react"
+import React, {type FC} from "react"
 import {createPortal} from "react-dom"
 import {twMerge} from "tailwind-merge"
 
@@ -10,8 +10,9 @@ export enum ModalPosition {
 }
 
 export type ModalProps = {
+  children: React.JSX.Element
+  isVisible: boolean
   position?: ModalPosition
-  dialogs: React.JSX.Element[]
 }
 
 const getPopupPositionClassName = (position?: ModalPosition): string => {
@@ -34,34 +35,16 @@ const getPopupPositionClassName = (position?: ModalPosition): string => {
   }
 }
 
-const Modal: FC<ModalProps> = ({position, dialogs}) => {
-  const MAX_DIALOGS = 5
-
-  const dialogsToShow = useMemo(
-    () => [...dialogs].slice(0, MAX_DIALOGS).reverse(),
-    [dialogs]
-  )
-
-  const calculateOpacity = (index: number) => {
-    return 1 - 0.2 * (dialogsToShow.length - 1 - index)
-  }
-
+const Modal: FC<ModalProps> = ({position, children, isVisible}) => {
   return (
-    dialogs.length > 0 &&
+    isVisible &&
     createPortal(
       <div
         className={twMerge(
-          "fixed inset-0 flex content-center items-center bg-modalOverlay *:absolute",
+          "fixed inset-0 flex content-center items-center bg-modalOverlay",
           getPopupPositionClassName(position)
         )}>
-        {dialogsToShow.map((dialog, index) => (
-          <div
-            key={dialog.key ?? index}
-            className="animate-enter"
-            style={{opacity: calculateOpacity(index)}}>
-            {dialog}
-          </div>
-        ))}
+        {children}
       </div>,
       document.body
     )
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index e63a2be7..0c22fb90 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -18,22 +18,24 @@ export type SidebarActionsProps = {
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
   const {onLogout} = useSidebarActions()
-  const [dialogs, setDialogs] = useState<React.JSX.Element[]>([])
+  const [isDirectMessageVisible, setDirectMessageVisible] = useState(false)
 
   return (
     <>
-      <Modal dialogs={dialogs} />
+      <Modal
+        children={
+          <DirectMessageModal
+            onClose={() => {
+              setDirectMessageVisible(false)
+            }}
+          />
+        }
+        isVisible={isDirectMessageVisible}
+      />
       <section className={twMerge("inline-flex flex-col gap-4", className)}>
         <IconButton
           onClick={() => {
-            setDialogs(prev => [
-              ...prev,
-              <DirectMessageModal
-                onClose={() => {
-                  setDialogs([])
-                }}
-              />,
-            ])
+            setDirectMessageVisible(true)
           }}
           tooltip="Direct messages"
           Icon={IoPaperPlane}
diff --git a/src/containers/DevPreview.tsx b/src/containers/DevPreview.tsx
index 7b7f42d1..5ea049dc 100644
--- a/src/containers/DevPreview.tsx
+++ b/src/containers/DevPreview.tsx
@@ -5,7 +5,11 @@ const DevelopmentPreview: FC = () => {
   return (
     <>
       <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
-        <DirectMessageModal />
+        <DirectMessageModal
+          onClose={function (): void {
+            throw new Error("Function not implemented.")
+          }}
+        />
       </div>
     </>
   )

From 299a79fce491b98b5f2d094f65fbfaeccac985d3 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 22 Mar 2024 21:28:38 -0400
Subject: [PATCH 10/62] refactor: More use `Modal` component

---
 src/components/ChatContainer.tsx | 47 ++++++++++++++++----------------
 src/components/Navigation.tsx    | 24 ++++++++--------
 2 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 1f356c92..41e5197a 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -10,7 +10,6 @@ import EventMessage from "./EventMessage"
 import {twMerge} from "tailwind-merge"
 import {useFilePicker} from "use-file-picker"
 import {MsgType} from "matrix-js-sdk"
-import {createPortal} from "react-dom"
 import Button, {ButtonVariant} from "./Button"
 import UnreadIndicator from "./UnreadIndicator"
 import {
@@ -23,6 +22,7 @@ import {
 } from "react-icons/io5"
 import {IoMdGlobe, IoMdMedical, IoIosHappy, IoMdLink} from "react-icons/io"
 import {LiaSlackHash} from "react-icons/lia"
+import Modal from "./Modal"
 
 export type ChatContainerProps = {
   className?: string
@@ -94,34 +94,35 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
 
   return (
     <>
-      {filesContent.length > 0 &&
-        createPortal(
-          <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
-            <div className="flex max-h-[600px] max-w-[600px] flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
+      <Modal
+        children={
+          <div className="flex max-h-[600px] max-w-[600px] flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
+            {filesContent.length > 0 && (
               <img
                 className="h-auto w-full rounded-lg object-cover shadow-md"
                 src={filesContent[0].content}
                 alt={filesContent[0].name}
               />
-              <div className="flex w-full items-center justify-end gap-1">
-                <Button
-                  variant={ButtonVariant.Secondary}
-                  onClick={() => {
-                    clear()
-                  }}
-                  label={"Cancel"}
-                />
-                <Button
-                  onClick={() => {
-                    void sendImageMessage()
-                  }}
-                  label={"Send Image"}
-                />
-              </div>
+            )}
+            <div className="flex w-full items-center justify-end gap-1">
+              <Button
+                variant={ButtonVariant.Secondary}
+                onClick={() => {
+                  clear()
+                }}
+                label={"Cancel"}
+              />
+              <Button
+                onClick={() => {
+                  void sendImageMessage()
+                }}
+                label={"Send Image"}
+              />
             </div>
-          </div>,
-          document.body
-        )}
+          </div>
+        }
+        isVisible={filesContent.length > 0}
+      />
 
       <div
         className={twMerge(
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index a260f5af..15533b9f 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -4,8 +4,8 @@ import useSpaces from "@/hooks/matrix/useSpaces"
 import {twMerge} from "tailwind-merge"
 import {StaticAssetPath, getImageUrl} from "@/utils/util"
 import {ReactSVG} from "react-svg"
-import {createPortal} from "react-dom"
 import CreateRoom from "./CreateRoom"
+import Modal from "./Modal"
 
 export type NavigationProps = {
   className?: string
@@ -37,17 +37,17 @@ const Navigation: FC<NavigationProps> = ({className}) => {
 
   return (
     <>
-      {isCreateRoomModalVisible &&
-        createPortal(
-          <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
-            <CreateRoom
-              onClose={() => {
-                setIsCreateRoomModalVisible(false)
-              }}
-            />
-          </div>,
-          document.body
-        )}
+      <Modal
+        children={
+          <CreateRoom
+            onClose={() => {
+              setIsCreateRoomModalVisible(false)
+            }}
+          />
+        }
+        isVisible={isCreateRoomModalVisible}
+      />
+
       <div
         className={twMerge(
           "h-full min-w-max grow overflow-y-scroll scrollbar-hide",

From 207ee5b9aed29c606c04ee860d76dc289e7f5e22 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 22 Mar 2024 21:45:48 -0400
Subject: [PATCH 11/62] refactor: Improve modals handling for `SidebarActions`
 component

---
 src/components/DirectMessageModal.tsx         | 169 ----------------
 .../SidebarActions/DirectMessageModal.tsx     | 182 ++++++++++++++++++
 .../SidebarActions/SidebarActions.tsx         |  30 ++-
 .../SidebarActions/useSidebarActions.ts       |  31 ++-
 src/containers/DevPreview.tsx                 |   2 +-
 5 files changed, 226 insertions(+), 188 deletions(-)
 delete mode 100644 src/components/DirectMessageModal.tsx
 create mode 100644 src/components/SidebarActions/DirectMessageModal.tsx

diff --git a/src/components/DirectMessageModal.tsx b/src/components/DirectMessageModal.tsx
deleted file mode 100644
index 31430501..00000000
--- a/src/components/DirectMessageModal.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import {useEffect, useState, type FC} from "react"
-import Typography, {TypographyVariant} from "./Typography"
-import IconButton from "./IconButton"
-import {IoCheckmark, IoCloseCircle, IoCopyOutline} from "react-icons/io5"
-import Input from "./Input"
-import UserProfile from "./UserProfile"
-import {
-  getDirectRoomsIds,
-  getPartnerUserIdFromRoomDirect,
-  normalizeName,
-  stringToColor,
-  timeFormatter,
-} from "@/utils/util"
-import useConnection from "@/hooks/matrix/useConnection"
-import useInvitationLink from "@/hooks/matrix/useInvitationLink"
-import useUsersSearch from "@/hooks/matrix/useUserSearch"
-
-export type DirectMessageModalProps = {
-  onClose: () => void
-}
-
-type DirectChatRecentProps = {
-  userId: string
-  displayName: string
-  roomId: string
-  lastMessageSentDate?: number
-}
-
-const DirectChatRecent: FC<DirectChatRecentProps> = ({
-  displayName,
-  userId,
-  lastMessageSentDate,
-}) => {
-  return (
-    <div className="flex cursor-pointer flex-row items-center justify-between rounded-lg p-2 hover:bg-neutral-200">
-      <UserProfile
-        text={userId}
-        displayName={displayName}
-        displayNameColor={stringToColor(userId)}
-      />
-
-      {lastMessageSentDate !== undefined && (
-        <Typography variant={TypographyVariant.P}>
-          {timeFormatter(lastMessageSentDate)}
-        </Typography>
-      )}
-    </div>
-  )
-}
-
-const DirectMessageModal: FC<DirectMessageModalProps> = ({onClose}) => {
-  const {client} = useConnection()
-  const [userId, setUserId] = useState<string | null>(null)
-  const [directChats, setDirectChats] = useState<DirectChatRecentProps[]>([])
-  const {query, setQuery, results} = useUsersSearch(client)
-
-  const {invitationLink, isLinkCopied, copyToClipboard} =
-    useInvitationLink(userId)
-
-  // Initially retrieves all direct chat conversations associated with the current user.
-  useEffect(() => {
-    if (client === null) {
-      return
-    }
-
-    setUserId(client.getUserId())
-
-    const directRoomIds = getDirectRoomsIds(client)
-    const directChatsProps: DirectChatRecentProps[] = []
-
-    for (const roomId of directRoomIds) {
-      const room = client.getRoom(roomId)
-      const lastMessageSentDate = room?.getLastLiveEvent()?.localTimestamp
-
-      if (room === null) {
-        continue
-      }
-
-      directChatsProps.push({
-        roomId: room.roomId,
-        userId: getPartnerUserIdFromRoomDirect(room),
-        displayName: normalizeName(room.name),
-        lastMessageSentDate,
-      })
-    }
-
-    setDirectChats(directChatsProps)
-  }, [client])
-
-  return (
-    // TODO: Should be pixels value, replace by the future design.
-    <div className="flex size-full max-h-[80%] max-w-[50%] flex-col gap-2 rounded-lg bg-neutral-100 p-5 shadow-2xl">
-      <div className="flex w-full">
-        <Typography variant={TypographyVariant.H3}>Direct messages</Typography>
-
-        <IconButton
-          onClick={onClose}
-          tooltip="Close"
-          Icon={IoCloseCircle}
-          className="ml-auto"
-          color="gray"
-        />
-      </div>
-
-      <Typography>
-        Start a conversation with someone using their name or username
-        (@username:matrix.org).
-      </Typography>
-
-      <Input
-        className="w-full"
-        initialValue={query}
-        onValueChange={setQuery}
-        placeholder="Enter name or username"
-      />
-
-      <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
-        <Typography variant={TypographyVariant.P}>
-          RECENT CONVERSATIONS
-        </Typography>
-
-        <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
-          {results === null
-            ? directChats.map(directChatProps => (
-                <DirectChatRecent {...directChatProps} />
-              ))
-            : results.map(userProps => (
-                <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
-                  <UserProfile {...userProps} />
-                </div>
-              ))}
-        </div>
-
-        <Typography>
-          Some suggestions may not be shown for privacy reasons. If you don't
-          find who you're looking for, send them your invitation link below.
-        </Typography>
-      </div>
-
-      <div className="mt-auto flex flex-col gap-2">
-        <div className="h-[1px] w-full bg-neutral-400" />
-
-        <Typography>INVITATION LINK</Typography>
-
-        <div className="flex flex-row items-center rounded-md border-[1px] border-black p-2">
-          <Typography
-            variant={TypographyVariant.Span}
-            className="text-blue-500">
-            {invitationLink ?? "Generating link..."}
-          </Typography>
-
-          <IconButton
-            className="ml-auto"
-            color="black"
-            onClick={() => {
-              // TODO: Show toast when link has been copied.
-              void copyToClipboard()
-            }}
-            tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
-            Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
-            isDisabled={userId === null || isLinkCopied}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default DirectMessageModal
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
new file mode 100644
index 00000000..7c94497c
--- /dev/null
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -0,0 +1,182 @@
+import {useEffect, useState, type FC} from "react"
+import Typography, {TypographyVariant} from "../Typography"
+import IconButton from "../IconButton"
+import {IoCheckmark, IoCloseCircle, IoCopyOutline} from "react-icons/io5"
+import Input from "../Input"
+import UserProfile from "../UserProfile"
+import {
+  getDirectRoomsIds,
+  getPartnerUserIdFromRoomDirect,
+  normalizeName,
+  stringToColor,
+  timeFormatter,
+} from "@/utils/util"
+import useConnection from "@/hooks/matrix/useConnection"
+import useInvitationLink from "@/hooks/matrix/useInvitationLink"
+import useUsersSearch from "@/hooks/matrix/useUserSearch"
+import Modal from "../Modal"
+
+export type DirectMessageModalProps = {
+  isVisible: boolean
+  onClose: () => void
+}
+
+type DirectChatRecentProps = {
+  userId: string
+  displayName: string
+  roomId: string
+  lastMessageSentDate?: number
+}
+
+const DirectChatRecent: FC<DirectChatRecentProps> = ({
+  displayName,
+  userId,
+  lastMessageSentDate,
+}) => {
+  return (
+    <div className="flex cursor-pointer flex-row items-center justify-between rounded-lg p-2 hover:bg-neutral-200">
+      <UserProfile
+        text={userId}
+        displayName={displayName}
+        displayNameColor={stringToColor(userId)}
+      />
+
+      {lastMessageSentDate !== undefined && (
+        <Typography variant={TypographyVariant.P}>
+          {timeFormatter(lastMessageSentDate)}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+const DirectMessageModal: FC<DirectMessageModalProps> = ({
+  onClose,
+  isVisible,
+}) => {
+  const {client} = useConnection()
+  const [userId, setUserId] = useState<string | null>(null)
+  const [directChats, setDirectChats] = useState<DirectChatRecentProps[]>([])
+  const {query, setQuery, results} = useUsersSearch(client)
+
+  const {invitationLink, isLinkCopied, copyToClipboard} =
+    useInvitationLink(userId)
+
+  // Initially retrieves all direct chat conversations associated with the current user.
+  useEffect(() => {
+    if (client === null) {
+      return
+    }
+
+    setUserId(client.getUserId())
+
+    const directRoomIds = getDirectRoomsIds(client)
+    const directChatsProps: DirectChatRecentProps[] = []
+
+    for (const roomId of directRoomIds) {
+      const room = client.getRoom(roomId)
+      const lastMessageSentDate = room?.getLastLiveEvent()?.localTimestamp
+
+      if (room === null) {
+        continue
+      }
+
+      directChatsProps.push({
+        roomId: room.roomId,
+        userId: getPartnerUserIdFromRoomDirect(room),
+        displayName: normalizeName(room.name),
+        lastMessageSentDate,
+      })
+    }
+
+    setDirectChats(directChatsProps)
+  }, [client])
+
+  return (
+    // TODO: Should be pixels value, replace by the future design.
+    <Modal
+      children={
+        <div className="flex size-full max-h-[80%] max-w-[50%] flex-col gap-2 rounded-lg bg-neutral-100 p-5 shadow-2xl">
+          <div className="flex w-full">
+            <Typography variant={TypographyVariant.H3}>
+              Direct messages
+            </Typography>
+
+            <IconButton
+              onClick={onClose}
+              tooltip="Close"
+              Icon={IoCloseCircle}
+              className="ml-auto"
+              color="gray"
+            />
+          </div>
+
+          <Typography>
+            Start a conversation with someone using their name or username
+            (@username:matrix.org).
+          </Typography>
+
+          <Input
+            className="w-full"
+            initialValue={query}
+            onValueChange={setQuery}
+            placeholder="Enter name or username"
+          />
+
+          <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
+            <Typography variant={TypographyVariant.P}>
+              RECENT CONVERSATIONS
+            </Typography>
+
+            <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
+              {results === null
+                ? directChats.map(directChatProps => (
+                    <DirectChatRecent {...directChatProps} />
+                  ))
+                : results.map(userProps => (
+                    <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
+                      <UserProfile {...userProps} />
+                    </div>
+                  ))}
+            </div>
+
+            <Typography>
+              Some suggestions may not be shown for privacy reasons. If you
+              don't find who you're looking for, send them your invitation link
+              below.
+            </Typography>
+          </div>
+
+          <div className="mt-auto flex flex-col gap-2">
+            <div className="h-[1px] w-full bg-neutral-400" />
+
+            <Typography>INVITATION LINK</Typography>
+
+            <div className="flex flex-row items-center rounded-md border-[1px] border-black p-2">
+              <Typography
+                variant={TypographyVariant.Span}
+                className="text-blue-500">
+                {invitationLink ?? "Generating link..."}
+              </Typography>
+
+              <IconButton
+                className="ml-auto"
+                color="black"
+                onClick={() => {
+                  // TODO: Show toast when link has been copied.
+                  void copyToClipboard()
+                }}
+                tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
+                Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
+                isDisabled={userId === null || isLinkCopied}
+              />
+            </div>
+          </div>
+        </div>
+      }
+      isVisible={isVisible}
+    />
+  )
+}
+
+export default DirectMessageModal
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 0c22fb90..6b2141a3 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -8,37 +8,35 @@ import {
   IoNotificationsSharp,
   IoCall,
 } from "react-icons/io5"
-import useSidebarActions from "@/components/SidebarActions/useSidebarActions"
-import DirectMessageModal from "../DirectMessageModal"
-import Modal from "../Modal"
+import useSidebarActions, {
+  SidebarModals,
+} from "@/components/SidebarActions/useSidebarActions"
+import DirectMessageModal from "./DirectMessageModal"
 
 export type SidebarActionsProps = {
   className?: string
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {onLogout} = useSidebarActions()
-  const [isDirectMessageVisible, setDirectMessageVisible] = useState(false)
+  const {onLogout, isDirectMessageVisible, showAndCloseSidebarModal} =
+    useSidebarActions()
 
   return (
     <>
-      <Modal
-        children={
-          <DirectMessageModal
-            onClose={() => {
-              setDirectMessageVisible(false)
-            }}
-          />
-        }
+      <DirectMessageModal
         isVisible={isDirectMessageVisible}
+        onClose={() => {
+          showAndCloseSidebarModal(SidebarModals.DirectMessages, false)
+        }}
       />
+
       <section className={twMerge("inline-flex flex-col gap-4", className)}>
         <IconButton
-          onClick={() => {
-            setDirectMessageVisible(true)
-          }}
           tooltip="Direct messages"
           Icon={IoPaperPlane}
+          onClick={() => {
+            showAndCloseSidebarModal(SidebarModals.DirectMessages, true)
+          }}
         />
 
         <IconButton
diff --git a/src/components/SidebarActions/useSidebarActions.ts b/src/components/SidebarActions/useSidebarActions.ts
index f04830c5..14799ddd 100644
--- a/src/components/SidebarActions/useSidebarActions.ts
+++ b/src/components/SidebarActions/useSidebarActions.ts
@@ -1,18 +1,45 @@
 import useConnection from "../../hooks/matrix/useConnection"
 import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
-import {useCallback} from "react"
+import {useCallback, useState} from "react"
+
+export enum SidebarModals {
+  DirectMessages,
+  Notifications,
+}
 
 const useSidebarActions = () => {
   const {disconnect} = useConnection()
   const navigate = useNavigate()
+  const [isDirectMessageVisible, setDirectMessageVisible] = useState(false)
+  const [isNotificationsVisible, setNotificationsVisible] = useState(false)
+
+  const showAndCloseSidebarModal = useCallback(
+    (sidebar: SidebarModals, isVisible: boolean) => {
+      switch (sidebar) {
+        case SidebarModals.DirectMessages: {
+          setDirectMessageVisible(isVisible)
+          break
+        }
+        case SidebarModals.Notifications: {
+          setNotificationsVisible(isVisible)
+        }
+      }
+    },
+    []
+  )
 
   const onLogout = useCallback(async () => {
     await disconnect()
     navigate(ViewPath.Login)
   }, [disconnect, navigate])
 
-  return {onLogout}
+  return {
+    onLogout,
+    isDirectMessageVisible,
+    isNotificationsVisible,
+    showAndCloseSidebarModal,
+  }
 }
 
 export default useSidebarActions
diff --git a/src/containers/DevPreview.tsx b/src/containers/DevPreview.tsx
index 5ea049dc..271d6f0e 100644
--- a/src/containers/DevPreview.tsx
+++ b/src/containers/DevPreview.tsx
@@ -1,4 +1,4 @@
-import DirectMessageModal from "@/components/DirectMessageModal"
+import DirectMessageModal from "@/components/SidebarActions/DirectMessageModal"
 import {type FC} from "react"
 
 const DevelopmentPreview: FC = () => {

From 1592310d533d9a252cdeed33691a9c28e9fbe7b3 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 23 Mar 2024 09:44:28 -0400
Subject: [PATCH 12/62] feat: Implement `NotificationsModal` and `Notification`
 components

---
 src/components/Avatar.tsx                     |  25 ++--
 src/components/Button.tsx                     |   4 +-
 src/components/Modal.tsx                      |  35 ++---
 .../SidebarActions/NotificationsModal.tsx     | 126 ++++++++++++++++++
 src/components/UserProfile.tsx                |   3 +-
 src/containers/DevPreview.tsx                 |  10 +-
 6 files changed, 164 insertions(+), 39 deletions(-)
 create mode 100644 src/components/SidebarActions/NotificationsModal.tsx

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 4b859355..3ae64db6 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -15,26 +15,34 @@ export type AvatarProps = {
   avatarType: AvatarType
   displayName: string
   avatarUrl?: string
+  className?: string
 }
 
 const AvatarImage: FC<AvatarProps> = ({
   isRounded,
   isLarge,
-  avatarType = AvatarType.Profile,
+  avatarType,
   displayName,
   avatarUrl,
+  className,
 }) => {
   const isAvatarMessage = avatarType === AvatarType.Message
   const isAvatarServer = avatarType === AvatarType.Server
   const isProfile = avatarType === AvatarType.Profile
 
   return avatarUrl === undefined ? (
-    <Avatar
-      size={isAvatarServer ? 47 : isProfile && isLarge ? 60 : 40}
-      square
-      name={cleanDisplayName(displayName)}
-      variant={isAvatarServer ? "bauhaus" : "beam"}
-    />
+    <div
+      className={twMerge(
+        "overflow-hidden rounded-lg",
+        isRounded && "rounded-full"
+      )}>
+      <Avatar
+        size={isAvatarServer ? 47 : isProfile && isLarge ? 60 : 40}
+        square
+        name={cleanDisplayName(displayName)}
+        variant={isAvatarServer ? "bauhaus" : "beam"}
+      />
+    </div>
   ) : (
     <img
       src={avatarUrl}
@@ -49,7 +57,8 @@ const AvatarImage: FC<AvatarProps> = ({
               ? "h-userProfileAvatarSizeLarge w-userProfileAvatarSizeLarge"
               : "h-userProfileAvatarSize w-userProfileAvatarSize"
           ),
-        isRounded && "rounded-full"
+        isRounded && "rounded-full",
+        className
       )}
       alt={displayName}
     />
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7843a450..137c0323 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -33,11 +33,13 @@ const Button: FC<ButtonProps> = ({
   label: text,
   isLoading,
   isDisabled,
-  variant,
+  variant = ButtonVariant.Primary,
   color,
   size,
   className,
 }) => {
+  // TODO: Add outline variant.
+
   const sizeClass =
     size === ButtonSize.Small
       ? "p-1 text-xs rounded-md px-2"
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a3e4a440..fb064345 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -15,34 +15,25 @@ export type ModalProps = {
   position?: ModalPosition
 }
 
-const getPopupPositionClassName = (position?: ModalPosition): string => {
-  switch (position) {
-    case ModalPosition.Left: {
-      return "items-center justify-start"
-    }
-    case ModalPosition.Right: {
-      return "items-center justify-end"
-    }
-    case ModalPosition.Top: {
-      return "items-start justify-center"
-    }
-    case ModalPosition.Bottom: {
-      return "items-end justify-center"
-    }
-    case undefined: {
-      return "items-center justify-center"
-    }
-  }
-}
-
 const Modal: FC<ModalProps> = ({position, children, isVisible}) => {
+  const popupPositionClass =
+    position === ModalPosition.Left
+      ? "items-center justify-start"
+      : position === ModalPosition.Right
+        ? "items-center justify-end"
+        : position === ModalPosition.Top
+          ? "items-start justify-center"
+          : position === ModalPosition.Bottom
+            ? "items-end justify-center"
+            : "items-center justify-center"
+
   return (
     isVisible &&
     createPortal(
       <div
         className={twMerge(
-          "fixed inset-0 flex content-center items-center bg-modalOverlay",
-          getPopupPositionClassName(position)
+          "fixed inset-0 flex bg-modalOverlay",
+          popupPositionClass
         )}>
         {children}
       </div>,
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
new file mode 100644
index 00000000..794c7d0b
--- /dev/null
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -0,0 +1,126 @@
+import {stringToColor, timeFormatter} from "@/utils/util"
+import {type FC} from "react"
+import {IoTime} from "react-icons/io5"
+import AvatarImage, {AvatarType} from "../Avatar"
+import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
+import Typography, {TypographyVariant} from "../Typography"
+import {twMerge} from "tailwind-merge"
+
+export type NotificationsModalProps = {
+  className?: string
+}
+
+type NotificationActions = {
+  name: string
+  actionVariant?: ButtonVariant
+  onClick: () => void
+}
+
+type NotificationProps = {
+  event: string
+  lastNotificationTime: number
+  displayName?: string
+  actions?: NotificationActions[]
+}
+
+const Notification: FC<NotificationProps> = ({
+  displayName,
+  event,
+  actions,
+  lastNotificationTime,
+}) => {
+  const userComponent = displayName !== undefined && (
+    <b style={{color: stringToColor(displayName)}}>{displayName}</b>
+  )
+
+  return (
+    <div className="flex gap-2 p-2">
+      {displayName !== undefined && (
+        <div className="overflow-hidden rounded-lg">
+          <AvatarImage
+            isRounded={false}
+            isLarge={false}
+            avatarType={AvatarType.Profile}
+            displayName={displayName}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col">
+        <div className="flex flex-row">
+          <Typography className="text-xs">
+            {userComponent ?? ""} {event}
+          </Typography>
+        </div>
+
+        <div className="flex items-center gap-[2px]">
+          <IoTime size={13} />
+
+          <Typography variant={TypographyVariant.P}>
+            {timeFormatter(lastNotificationTime)}
+          </Typography>
+        </div>
+
+        {actions !== undefined && (
+          <div className="mt-2 flex flex-row gap-1">
+            {actions.map(action => (
+              <Button
+                onClick={action.onClick}
+                label={action.name}
+                variant={action.actionVariant}
+                color={ButtonColor.Black}
+                size={ButtonSize.Small}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const NotificationsModal: FC<NotificationsModalProps> = ({className}) => {
+  return (
+    <div
+      className={twMerge(
+        "flex size-full max-h-[80%] max-w-[35%] flex-col gap-2 rounded-xl bg-white p-2",
+        className
+      )}>
+      <div className="flex w-full justify-between p-2">
+        <Typography
+          className="font-bold text-black"
+          variant={TypographyVariant.H3}>
+          Notifications
+        </Typography>
+
+        <Button
+          variant={ButtonVariant.TextLink}
+          size={ButtonSize.Small}
+          color={ButtonColor.Black}
+          onClick={() => {
+            // TODO: Handle here close this modal.
+          }}
+          label="Mark all as read"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
+        <Notification
+          event="is trying to start a conversation with you."
+          displayName="Criss"
+          lastNotificationTime={Date.now()}
+          actions={[
+            {name: "Accept", onClick: () => {}},
+            {
+              name: "Decline",
+              onClick: () => {},
+              actionVariant: ButtonVariant.TextLink,
+            },
+          ]}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default NotificationsModal
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 4a59ca3e..f2f46a6b 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -109,7 +109,7 @@ const UserProfile: FC<UserProfileProps> = ({
         <div
           className={twMerge(
             "relative overflow-hidden rounded-lg bg-red-500",
-            isLarge ? "h-[50px] w-[50px]" : "h-[37px] w-[37px]"
+            isLarge ? "size-[50px]" : "size-[37px]"
           )}>
           <AvatarImage
             isRounded={false}
@@ -131,6 +131,7 @@ const UserProfile: FC<UserProfileProps> = ({
         )}
       </div>
 
+      {/* TODO: Update this to use `Typography` */}
       <div className="mr-auto inline-flex flex-col gap-[2px]">
         <div
           style={{color: displayNameColor}}
diff --git a/src/containers/DevPreview.tsx b/src/containers/DevPreview.tsx
index 271d6f0e..d5dd19ac 100644
--- a/src/containers/DevPreview.tsx
+++ b/src/containers/DevPreview.tsx
@@ -1,15 +1,11 @@
-import DirectMessageModal from "@/components/SidebarActions/DirectMessageModal"
+import NotificationsModal from "@/components/SidebarActions/NotificationsModal"
 import {type FC} from "react"
 
 const DevelopmentPreview: FC = () => {
   return (
     <>
-      <div className="fixed inset-0 flex size-full w-screen flex-col items-center justify-center">
-        <DirectMessageModal
-          onClose={function (): void {
-            throw new Error("Function not implemented.")
-          }}
-        />
+      <div className="flex size-full w-screen flex-col items-center justify-center bg-purple-600">
+        <NotificationsModal />
       </div>
     </>
   )

From 9b384bd147ac23d0f0b8715ef3f4a387d29b6f47 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 23 Mar 2024 19:02:50 -0400
Subject: [PATCH 13/62] fix: Fix visual problems for `Modal`

---
 src/components/Modal.tsx                      |   2 +-
 .../SidebarActions/DirectMessageModal.tsx     |   2 +-
 .../SidebarActions/NotificationsModal.tsx     | 108 +++++++++++-------
 .../SidebarActions/SidebarActions.tsx         |  20 +++-
 4 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index fb064345..14e4f94e 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -32,7 +32,7 @@ const Modal: FC<ModalProps> = ({position, children, isVisible}) => {
     createPortal(
       <div
         className={twMerge(
-          "fixed inset-0 flex bg-modalOverlay",
+          "fixed inset-0 flex size-full w-screen flex-col bg-modalOverlay",
           popupPositionClass
         )}>
         {children}
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 7c94497c..12faa9ea 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -96,7 +96,7 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({
     // TODO: Should be pixels value, replace by the future design.
     <Modal
       children={
-        <div className="flex size-full max-h-[80%] max-w-[50%] flex-col gap-2 rounded-lg bg-neutral-100 p-5 shadow-2xl">
+        <div className="flex h-5 flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
           <div className="flex w-full">
             <Typography variant={TypographyVariant.H3}>
               Direct messages
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 794c7d0b..4076a01b 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -1,14 +1,12 @@
 import {stringToColor, timeFormatter} from "@/utils/util"
 import {type FC} from "react"
-import {IoTime} from "react-icons/io5"
+import {IoCloseCircle, IoTime} from "react-icons/io5"
 import AvatarImage, {AvatarType} from "../Avatar"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
 import {twMerge} from "tailwind-merge"
-
-export type NotificationsModalProps = {
-  className?: string
-}
+import Modal from "../Modal"
+import IconButton from "../IconButton"
 
 type NotificationActions = {
   name: string
@@ -46,7 +44,7 @@ const Notification: FC<NotificationProps> = ({
         </div>
       )}
 
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-1">
         <div className="flex flex-row">
           <Typography className="text-xs">
             {userComponent ?? ""} {event}
@@ -79,47 +77,69 @@ const Notification: FC<NotificationProps> = ({
   )
 }
 
-const NotificationsModal: FC<NotificationsModalProps> = ({className}) => {
+export type NotificationsModalProps = {
+  isVisible: boolean
+  className?: string
+  onClose: () => void
+}
+
+const NotificationsModal: FC<NotificationsModalProps> = ({
+  className,
+  isVisible,
+  onClose,
+}) => {
   return (
-    <div
-      className={twMerge(
-        "flex size-full max-h-[80%] max-w-[35%] flex-col gap-2 rounded-xl bg-white p-2",
-        className
-      )}>
-      <div className="flex w-full justify-between p-2">
-        <Typography
-          className="font-bold text-black"
-          variant={TypographyVariant.H3}>
-          Notifications
-        </Typography>
+    <Modal
+      isVisible={isVisible}
+      children={
+        <div
+          className={twMerge(
+            "flex flex-col gap-2 rounded-xl bg-white p-2",
+            className
+          )}>
+          <div className="flex w-full p-2">
+            <Typography
+              className="mr-auto font-bold text-black "
+              variant={TypographyVariant.H3}>
+              Notifications
+            </Typography>
 
-        <Button
-          variant={ButtonVariant.TextLink}
-          size={ButtonSize.Small}
-          color={ButtonColor.Black}
-          onClick={() => {
-            // TODO: Handle here close this modal.
-          }}
-          label="Mark all as read"
-        />
-      </div>
+            <Button
+              variant={ButtonVariant.TextLink}
+              size={ButtonSize.Small}
+              color={ButtonColor.Black}
+              onClick={() => {
+                // TODO: Close modal after mark all as read.
+                onClose()
+              }}
+              label="Mark all as read"
+            />
 
-      <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
-        <Notification
-          event="is trying to start a conversation with you."
-          displayName="Criss"
-          lastNotificationTime={Date.now()}
-          actions={[
-            {name: "Accept", onClick: () => {}},
-            {
-              name: "Decline",
-              onClick: () => {},
-              actionVariant: ButtonVariant.TextLink,
-            },
-          ]}
-        />
-      </div>
-    </div>
+            <IconButton
+              onClick={onClose}
+              tooltip="Close"
+              Icon={IoCloseCircle}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
+            <Notification
+              event="is trying to start a conversation with you."
+              displayName="Criss"
+              lastNotificationTime={Date.now()}
+              actions={[
+                {name: "Accept", onClick: () => {}},
+                {
+                  name: "Decline",
+                  onClick: () => {},
+                  actionVariant: ButtonVariant.TextLink,
+                },
+              ]}
+            />
+          </div>
+        </div>
+      }
+    />
   )
 }
 
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 6b2141a3..4ce5a71f 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -1,4 +1,4 @@
-import {useState, type FC} from "react"
+import {type FC} from "react"
 import IconButton from "../IconButton"
 import {twMerge} from "tailwind-merge"
 import {
@@ -12,14 +12,19 @@ import useSidebarActions, {
   SidebarModals,
 } from "@/components/SidebarActions/useSidebarActions"
 import DirectMessageModal from "./DirectMessageModal"
+import NotificationsModal from "./NotificationsModal"
 
 export type SidebarActionsProps = {
   className?: string
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {onLogout, isDirectMessageVisible, showAndCloseSidebarModal} =
-    useSidebarActions()
+  const {
+    onLogout,
+    isDirectMessageVisible,
+    showAndCloseSidebarModal,
+    isNotificationsVisible,
+  } = useSidebarActions()
 
   return (
     <>
@@ -30,6 +35,13 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
         }}
       />
 
+      <NotificationsModal
+        isVisible={isNotificationsVisible}
+        onClose={() => {
+          showAndCloseSidebarModal(SidebarModals.Notifications, false)
+        }}
+      />
+
       <section className={twMerge("inline-flex flex-col gap-4", className)}>
         <IconButton
           tooltip="Direct messages"
@@ -49,7 +61,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
 
         <IconButton
           onClick={() => {
-            throw new Error("View notifications not implemented.")
+            showAndCloseSidebarModal(SidebarModals.Notifications, true)
           }}
           tooltip="Notifications"
           Icon={IoNotificationsSharp}

From 83043cf34b529ce7a33c08b894788496acf09b97 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 23 Mar 2024 19:15:38 -0400
Subject: [PATCH 14/62] refactor: Resolve PR comments about tailwindcss class

---
 src/components/ChatContainer.tsx                     | 2 +-
 src/components/Input.tsx                             | 6 +++---
 src/components/SidebarActions/DirectMessageModal.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 41e5197a..75e1f375 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -96,7 +96,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
     <>
       <Modal
         children={
-          <div className="flex max-h-[600px] max-w-[600px] flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
+          <div className="flex max-h-[600px] max-w-xl flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
             {filesContent.length > 0 && (
               <img
                 className="h-auto w-full rounded-lg object-cover shadow-md"
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 5e886b03..df3e4dfa 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -12,7 +12,7 @@ export type InputConstraint = {
 export type InputAction = {
   tooltip: string
   onClick: () => void
-  Icon: IconType
+  icon: IconType
 }
 
 export type InputProps = {
@@ -117,7 +117,7 @@ const Input: FC<InputProps> = ({
   return (
     <div className={className?.trim()}>
       <div
-        className="flex items-center rounded-[10px] border-[1px] border-solid border-neutral-300 bg-neutral-50"
+        className="flex items-center rounded-[10px] border border-neutral-300 bg-neutral-50"
         tabIndex={isDisabled ? undefined : 0}>
         {label !== undefined && <Label text={label} />}
 
@@ -139,7 +139,7 @@ const Input: FC<InputProps> = ({
                 key={action.tooltip}
                 onClick={action.onClick}
                 tooltip={action.tooltip}
-                Icon={action.Icon}
+                Icon={action.icon}
                 isDisabled={violatedConstraints.length > 0}
               />
             ))}
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 12faa9ea..19ec2f9a 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -148,11 +148,11 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({
           </div>
 
           <div className="mt-auto flex flex-col gap-2">
-            <div className="h-[1px] w-full bg-neutral-400" />
+            <div className="h-px w-full bg-neutral-400" />
 
             <Typography>INVITATION LINK</Typography>
 
-            <div className="flex flex-row items-center rounded-md border-[1px] border-black p-2">
+            <div className="flex flex-row items-center rounded-md border border-black p-2">
               <Typography
                 variant={TypographyVariant.Span}
                 className="text-blue-500">

From 795372b7f67cdbc165f755180777d25b512ebdc8 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 23 Mar 2024 19:19:48 -0400
Subject: [PATCH 15/62] refactor: Remove redundant tailwindcss class

---
 src/components/ChatContainer.tsx   | 6 +++---
 src/components/KeyCue.tsx          | 2 +-
 src/components/Navigation.tsx      | 2 +-
 src/components/NotificationDot.tsx | 2 +-
 src/components/Roster.tsx          | 2 +-
 src/components/StatusMessage.tsx   | 2 +-
 src/components/UnreadIndicator.tsx | 2 +-
 src/components/UserCard.tsx        | 8 +++++---
 8 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 75e1f375..387da5a2 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -126,10 +126,10 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
 
       <div
         className={twMerge(
-          "flex h-screen flex-col gap-4 border-[1px] border-solid border-stone-200",
+          "flex h-screen flex-col gap-4 border border-stone-200",
           className
         )}>
-        <header className="flex items-center gap-2 border-b border-solid border-b-stone-200 p-4">
+        <header className="flex items-center gap-2 border-b border-b-stone-200 p-4">
           <div className="flex w-full gap-1">
             <LiaSlackHash className="text-purple-500" />
 
@@ -198,7 +198,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
               />
             </div>
 
-            <div className="flex w-full rounded-[5px] border-[1px] border-solid border-neutral-300 bg-neutral-50">
+            <div className="flex w-full rounded-[5px] border border-neutral-300 bg-neutral-50">
               <textarea
                 onKeyDown={handleKeyDown}
                 rows={1}
diff --git a/src/components/KeyCue.tsx b/src/components/KeyCue.tsx
index 144da1a2..a0b09b5f 100644
--- a/src/components/KeyCue.tsx
+++ b/src/components/KeyCue.tsx
@@ -12,7 +12,7 @@ const KeyCue: FC<KeyCueProps> = ({alt, ctrl, shift, char}) => {
   assert(char.length === 1, "key should be a single character")
 
   return (
-    <div className="inline-block rounded-[5px] border-[1px] border-b-[4px] border-solid border-neutral-500 bg-neutral-300 px-2 text-xs uppercase leading-160">
+    <div className="inline-block rounded-[5px] border border-b-[4px] border-solid border-neutral-500 bg-neutral-300 px-2 text-xs uppercase leading-160">
       {ctrl && "⌃"}
 
       {alt && "⌥"}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 15533b9f..7026b472 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -64,7 +64,7 @@ const Navigation: FC<NavigationProps> = ({className}) => {
             </div>
           </div>
 
-          <div className="m-2 mx-3 h-[1px] bg-neutral-300" />
+          <div className="m-2 mx-3 h-px bg-neutral-300" />
 
           <div className="flex flex-col items-start justify-center gap-4">
             <ServerListItem
diff --git a/src/components/NotificationDot.tsx b/src/components/NotificationDot.tsx
index b8b0cf57..47c77b1e 100644
--- a/src/components/NotificationDot.tsx
+++ b/src/components/NotificationDot.tsx
@@ -15,7 +15,7 @@ const NotificationDot: FC<NotificationDotProps> = ({children, isVisible}) => {
         <div
           className={twMerge(
             "absolute right-0 top-0 h-[6px] w-[6px]",
-            "rounded-lg border-[1px] border-solid border-neutral-50 bg-red-400"
+            "rounded-lg border border-neutral-50 bg-red-400"
           )}
         />
       )}
diff --git a/src/components/Roster.tsx b/src/components/Roster.tsx
index 115674cc..fdda2ddb 100644
--- a/src/components/Roster.tsx
+++ b/src/components/Roster.tsx
@@ -66,7 +66,7 @@ const Roster: FC<RosterProps> = ({className}) => {
           />
         </header>
 
-        <div className="h-[1px] w-full bg-neutral-300" />
+        <div className="h-px w-full bg-neutral-300" />
 
         <div className="flex h-full grow flex-col gap-[5px] overflow-y-scroll scrollbar-hide">
           <div className="mt-[10px] flex flex-col gap-1">
diff --git a/src/components/StatusMessage.tsx b/src/components/StatusMessage.tsx
index 5aba8abb..5d3aa98a 100644
--- a/src/components/StatusMessage.tsx
+++ b/src/components/StatusMessage.tsx
@@ -10,7 +10,7 @@ const StatusMessage: FC<Properties> = ({className, text}) => {
   return (
     <div
       className={twMerge(
-        "rounded-xl border-[1px] border-solid border-statusMessageColor bg-statusMessageBg p-2 text-center text-red-500",
+        "rounded-xl border border-statusMessageColor bg-statusMessageBg p-2 text-center text-red-500",
         className
       )}>
       {text}
diff --git a/src/components/UnreadIndicator.tsx b/src/components/UnreadIndicator.tsx
index 7cee8639..c57a84ca 100644
--- a/src/components/UnreadIndicator.tsx
+++ b/src/components/UnreadIndicator.tsx
@@ -5,7 +5,7 @@ export type UnreadIndicatorProps = {
 }
 
 const UnreadIndicator: FC<UnreadIndicatorProps> = ({lastReadEventId}) => {
-  const lineClass = "h-[1px] grow bg-red-500"
+  const lineClass = "h-px grow bg-red-500"
 
   return (
     <div className="flex flex-row items-center justify-center">
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index 936b79ca..ba58b23f 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -2,7 +2,9 @@ import {type FC} from "react"
 import {timeFormatter} from "../utils/util"
 import Button, {ButtonSize, ButtonVariant} from "./Button"
 import Label from "./Label"
-import UserProfile, {type UserProfileProps as UserProfileProperties} from "./UserProfile"
+import UserProfile, {
+  type UserProfileProps as UserProfileProperties,
+} from "./UserProfile"
 import {createPortal} from "react-dom"
 
 export type UserCardProps = {
@@ -30,8 +32,8 @@ const UserCard: FC<UserCardProps> = ({
       <div className="z-50 flex size-full justify-end px-1">
         <div
           className="absolute flex min-h-80 w-[250px] flex-col rounded-xl
-    border-[1px] border-solid border-neutral-300 bg-neutral-50 shadow-userCard">
-          <div className="rounded-xl border-b-[1px] border-solid border-b-neutral-300 bg-white p-4">
+    border border-neutral-300 bg-neutral-50 shadow-userCard">
+          <div className="rounded-xl border-b border-solid border-b-neutral-300 bg-white p-4">
             <UserProfile {...userProfileProps} />
           </div>
 

From 74cc8c30ffd5858b99123aecf3d363e53ac52769 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 23 Mar 2024 20:47:34 -0400
Subject: [PATCH 16/62] feat: Implement `useNotification` hook

---
 src/components/ChatContainer.tsx              |  3 +-
 src/components/Modal.tsx                      | 16 ++++++-
 .../SidebarActions/DirectMessageModal.tsx     |  4 +-
 .../SidebarActions/NotificationsModal.tsx     | 11 ++++-
 .../SidebarActions/useNotifications.ts        | 44 +++++++++++++++++++
 5 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 src/components/SidebarActions/useNotifications.ts

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 387da5a2..24919108 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -22,7 +22,7 @@ import {
 } from "react-icons/io5"
 import {IoMdGlobe, IoMdMedical, IoIosHappy, IoMdLink} from "react-icons/io"
 import {LiaSlackHash} from "react-icons/lia"
-import Modal from "./Modal"
+import Modal, {ModalRenderLocation} from "./Modal"
 
 export type ChatContainerProps = {
   className?: string
@@ -125,6 +125,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
       />
 
       <div
+        id={ModalRenderLocation.ChatContainer}
         className={twMerge(
           "flex h-screen flex-col gap-4 border border-stone-200",
           className
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 14e4f94e..1ca54ed5 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -2,6 +2,10 @@ import React, {type FC} from "react"
 import {createPortal} from "react-dom"
 import {twMerge} from "tailwind-merge"
 
+export enum ModalRenderLocation {
+  ChatContainer = "chat-container",
+}
+
 export enum ModalPosition {
   Left = "left",
   Right = "right",
@@ -13,9 +17,15 @@ export type ModalProps = {
   children: React.JSX.Element
   isVisible: boolean
   position?: ModalPosition
+  renderLocation?: ModalRenderLocation
 }
 
-const Modal: FC<ModalProps> = ({position, children, isVisible}) => {
+const Modal: FC<ModalProps> = ({
+  position,
+  children,
+  isVisible,
+  renderLocation,
+}) => {
   const popupPositionClass =
     position === ModalPosition.Left
       ? "items-center justify-start"
@@ -37,7 +47,9 @@ const Modal: FC<ModalProps> = ({position, children, isVisible}) => {
         )}>
         {children}
       </div>,
-      document.body
+      renderLocation === undefined
+        ? document.body
+        : document.querySelector(renderLocation) ?? document.body
     )
   )
 }
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 19ec2f9a..2830a4fe 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -96,8 +96,8 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({
     // TODO: Should be pixels value, replace by the future design.
     <Modal
       children={
-        <div className="flex h-5 flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
-          <div className="flex w-full">
+        <div className="flex h-2 max-h-[80%] max-w-2xl flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
+          <div className="flex  w-full">
             <Typography variant={TypographyVariant.H3}>
               Direct messages
             </Typography>
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 4076a01b..dd736f83 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -7,14 +7,15 @@ import Typography, {TypographyVariant} from "../Typography"
 import {twMerge} from "tailwind-merge"
 import Modal from "../Modal"
 import IconButton from "../IconButton"
+import useNotifications from "./useNotifications"
 
-type NotificationActions = {
+export type NotificationActions = {
   name: string
   actionVariant?: ButtonVariant
   onClick: () => void
 }
 
-type NotificationProps = {
+export type NotificationProps = {
   event: string
   lastNotificationTime: number
   displayName?: string
@@ -88,6 +89,8 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
   isVisible,
   onClose,
 }) => {
+  const {notifications} = useNotifications()
+
   return (
     <Modal
       isVisible={isVisible}
@@ -136,6 +139,10 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
                 },
               ]}
             />
+
+            {notifications.map(notification => (
+              <Notification {...notification} />
+            ))}
           </div>
         </div>
       }
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
new file mode 100644
index 00000000..8712e46b
--- /dev/null
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -0,0 +1,44 @@
+import {useState} from "react"
+import {type NotificationProps} from "./NotificationsModal"
+import useEventListener from "@/hooks/matrix/useEventListener"
+import {RoomEvent} from "matrix-js-sdk"
+import {ButtonVariant} from "../Button"
+
+const useNotifications = () => {
+  const [notifications, setNotifications] = useState<NotificationProps[]>([])
+
+  useEventListener(
+    RoomEvent.MyMembership,
+    (room, membership, _prevMembership) => {
+      if (membership === "invite") {
+        setNotifications(prevNotifications => [
+          ...prevNotifications,
+          {
+            event: "has invited for this room",
+            lastNotificationTime: Date.now(),
+            displayName: room.normalizedName,
+            actions: [
+              {
+                name: "Accept",
+                onClick: () => {
+                  // TODO: Handle here accept invitation.
+                },
+              },
+              {
+                name: "Decline",
+                onClick: () => {
+                  // TODO: Handle here decline invitation.
+                },
+                actionVariant: ButtonVariant.TextLink,
+              },
+            ],
+          },
+        ])
+      }
+    }
+  )
+
+  return {notifications}
+}
+
+export default useNotifications

From d4e1b667ebca297251dc871e20856fd75b05d270 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 24 Mar 2024 13:45:09 -0400
Subject: [PATCH 17/62] refactor: Resolve PR comments.

---
 .vscode/extensions.json                       |   1 -
 .vscode/settings.json                         |   2 +-
 src/components/Avatar.tsx                     |   4 +-
 src/components/ChatContainer.tsx              |  51 +++----
 src/components/Navigation.tsx                 |  17 +--
 .../SidebarActions/DirectMessageModal.tsx     | 137 +++++++++---------
 .../SidebarActions/NotificationsModal.tsx     |  27 +---
 .../SidebarActions/SidebarActions.tsx         |   4 +-
 src/containers/DevPreview.tsx                 |   5 +-
 tailwind.config.ts                            |   2 +-
 10 files changed, 112 insertions(+), 138 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 60bf99a7..316b8e87 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "ms-vscode.vscode-typescript-next",
-    "syler.sass-indented",
     "Gruntfuggly.todo-tree",
     "shardulm94.trailing-spaces",
     "AntiAntiSepticeye.vscode-color-picker",
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ed767e04..4abc045e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,5 +20,5 @@
     "FIXME": ["FIXME", "FIXIT", "FIX"]
   },
   "eslint.enable": true,
-  "eslint.validate": ["html"]
+  "eslint.validate": ["html"],
 }
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 3ae64db6..5b71cdc1 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -14,6 +14,7 @@ export type AvatarProps = {
   isLarge: boolean
   avatarType: AvatarType
   displayName: string
+  isSquare?: boolean
   avatarUrl?: string
   className?: string
 }
@@ -21,6 +22,7 @@ export type AvatarProps = {
 const AvatarImage: FC<AvatarProps> = ({
   isRounded,
   isLarge,
+  isSquare = true,
   avatarType,
   displayName,
   avatarUrl,
@@ -38,7 +40,7 @@ const AvatarImage: FC<AvatarProps> = ({
       )}>
       <Avatar
         size={isAvatarServer ? 47 : isProfile && isLarge ? 60 : 40}
-        square
+        square={isSquare}
         name={cleanDisplayName(displayName)}
         variant={isAvatarServer ? "bauhaus" : "beam"}
       />
diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 24919108..0c6b73a7 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -94,35 +94,30 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
 
   return (
     <>
-      <Modal
-        children={
-          <div className="flex max-h-[600px] max-w-xl flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
-            {filesContent.length > 0 && (
-              <img
-                className="h-auto w-full rounded-lg object-cover shadow-md"
-                src={filesContent[0].content}
-                alt={filesContent[0].name}
-              />
-            )}
-            <div className="flex w-full items-center justify-end gap-1">
-              <Button
-                variant={ButtonVariant.Secondary}
-                onClick={() => {
-                  clear()
-                }}
-                label={"Cancel"}
-              />
-              <Button
-                onClick={() => {
-                  void sendImageMessage()
-                }}
-                label={"Send Image"}
-              />
-            </div>
+      <Modal isVisible={filesContent.length > 0}>
+        <div className="flex max-h-[600px] max-w-xl flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
+          {filesContent.length > 0 && (
+            <img
+              className="h-auto w-full rounded-lg object-cover shadow-md"
+              src={filesContent[0].content}
+              alt={filesContent[0].name}
+            />
+          )}
+          <div className="flex w-full items-center justify-end gap-1">
+            <Button
+              variant={ButtonVariant.Secondary}
+              onClick={clear}
+              label="Cancel"
+            />
+            <Button
+              onClick={() => {
+                void sendImageMessage()
+              }}
+              label="Send Image"
+            />
           </div>
-        }
-        isVisible={filesContent.length > 0}
-      />
+        </div>
+      </Modal>
 
       <div
         id={ModalRenderLocation.ChatContainer}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 7026b472..c94ff42a 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -37,16 +37,13 @@ const Navigation: FC<NavigationProps> = ({className}) => {
 
   return (
     <>
-      <Modal
-        children={
-          <CreateRoom
-            onClose={() => {
-              setIsCreateRoomModalVisible(false)
-            }}
-          />
-        }
-        isVisible={isCreateRoomModalVisible}
-      />
+      <Modal isVisible={isCreateRoomModalVisible}>
+        <CreateRoom
+          onClose={() => {
+            setIsCreateRoomModalVisible(false)
+          }}
+        />
+      </Modal>
 
       <div
         className={twMerge(
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 2830a4fe..44dde772 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -94,88 +94,85 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({
 
   return (
     // TODO: Should be pixels value, replace by the future design.
-    <Modal
-      children={
-        <div className="flex h-2 max-h-[80%] max-w-2xl flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
-          <div className="flex  w-full">
-            <Typography variant={TypographyVariant.H3}>
-              Direct messages
-            </Typography>
+    <Modal isVisible={isVisible}>
+      <div className="flex max-h-[80%] max-w-2xl flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
+        <div className="flex w-full">
+          <Typography variant={TypographyVariant.H3}>
+            Direct messages
+          </Typography>
 
-            <IconButton
-              onClick={onClose}
-              tooltip="Close"
-              Icon={IoCloseCircle}
-              className="ml-auto"
-              color="gray"
-            />
+          <IconButton
+            onClick={onClose}
+            tooltip="Close"
+            Icon={IoCloseCircle}
+            className="ml-auto"
+            color="gray"
+          />
+        </div>
+
+        <Typography>
+          Start a conversation with someone using their name or username
+          (@username:matrix.org).
+        </Typography>
+
+        <Input
+          className="w-full"
+          initialValue={query}
+          onValueChange={setQuery}
+          placeholder="Enter name or username"
+        />
+
+        <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
+          <Typography variant={TypographyVariant.P}>
+            RECENT CONVERSATIONS
+          </Typography>
+
+          <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
+            {results === null
+              ? directChats.map(directChatProps => (
+                  <DirectChatRecent {...directChatProps} />
+                ))
+              : results.map(userProps => (
+                  <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
+                    <UserProfile {...userProps} />
+                  </div>
+                ))}
           </div>
 
           <Typography>
-            Start a conversation with someone using their name or username
-            (@username:matrix.org).
+            Some suggestions may not be shown for privacy reasons. If you don't
+            find who you're looking for, send them your invitation link below.
           </Typography>
+        </div>
 
-          <Input
-            className="w-full"
-            initialValue={query}
-            onValueChange={setQuery}
-            placeholder="Enter name or username"
-          />
+        {/* User direct chat invitation link zone */}
+        <div className="mt-auto flex flex-col gap-2">
+          <div className="h-px w-full bg-neutral-400" />
 
-          <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
-            <Typography variant={TypographyVariant.P}>
-              RECENT CONVERSATIONS
-            </Typography>
+          <Typography>INVITATION LINK</Typography>
 
-            <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
-              {results === null
-                ? directChats.map(directChatProps => (
-                    <DirectChatRecent {...directChatProps} />
-                  ))
-                : results.map(userProps => (
-                    <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
-                      <UserProfile {...userProps} />
-                    </div>
-                  ))}
-            </div>
-
-            <Typography>
-              Some suggestions may not be shown for privacy reasons. If you
-              don't find who you're looking for, send them your invitation link
-              below.
+          <div className="flex flex-row items-center rounded-md border border-black p-2">
+            <Typography
+              variant={TypographyVariant.Span}
+              className="text-blue-500">
+              {invitationLink ?? "Generating link..."}
             </Typography>
-          </div>
 
-          <div className="mt-auto flex flex-col gap-2">
-            <div className="h-px w-full bg-neutral-400" />
-
-            <Typography>INVITATION LINK</Typography>
-
-            <div className="flex flex-row items-center rounded-md border border-black p-2">
-              <Typography
-                variant={TypographyVariant.Span}
-                className="text-blue-500">
-                {invitationLink ?? "Generating link..."}
-              </Typography>
-
-              <IconButton
-                className="ml-auto"
-                color="black"
-                onClick={() => {
-                  // TODO: Show toast when link has been copied.
-                  void copyToClipboard()
-                }}
-                tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
-                Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
-                isDisabled={userId === null || isLinkCopied}
-              />
-            </div>
+            <IconButton
+              className="ml-auto"
+              color="black"
+              onClick={() => {
+                // TODO: Show toast when link has been copied.
+                void copyToClipboard()
+              }}
+              tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
+              Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
+              isDisabled={userId === null || isLinkCopied}
+            />
           </div>
         </div>
-      }
-      isVisible={isVisible}
-    />
+      </div>
+    </Modal>
   )
 }
 
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index dd736f83..14b51e46 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -28,9 +28,10 @@ const Notification: FC<NotificationProps> = ({
   actions,
   lastNotificationTime,
 }) => {
-  const userComponent = displayName !== undefined && (
-    <b style={{color: stringToColor(displayName)}}>{displayName}</b>
-  )
+  const userComponent =
+    displayName === undefined ? undefined : (
+      <b style={{color: stringToColor(displayName)}}>{displayName}</b>
+    )
 
   return (
     <div className="flex gap-2 p-2">
@@ -47,8 +48,8 @@ const Notification: FC<NotificationProps> = ({
 
       <div className="flex flex-col gap-1">
         <div className="flex flex-row">
-          <Typography className="text-xs">
-            {userComponent ?? ""} {event}
+          <Typography>
+            {userComponent} {event}
           </Typography>
         </div>
 
@@ -97,7 +98,7 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
       children={
         <div
           className={twMerge(
-            "flex flex-col gap-2 rounded-xl bg-white p-2",
+            "flex size-full max-h-[80%] max-w-sm flex-col gap-2 rounded-xl bg-white p-2",
             className
           )}>
           <div className="flex w-full p-2">
@@ -126,20 +127,6 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
           </div>
 
           <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
-            <Notification
-              event="is trying to start a conversation with you."
-              displayName="Criss"
-              lastNotificationTime={Date.now()}
-              actions={[
-                {name: "Accept", onClick: () => {}},
-                {
-                  name: "Decline",
-                  onClick: () => {},
-                  actionVariant: ButtonVariant.TextLink,
-                },
-              ]}
-            />
-
             {notifications.map(notification => (
               <Notification {...notification} />
             ))}
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 4ce5a71f..21a74c65 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -53,7 +53,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
 
         <IconButton
           onClick={() => {
-            throw new Error("View calls not implemented.")
+            // TODO: Handle here view calls.
           }}
           tooltip="Calls"
           Icon={IoCall}
@@ -70,7 +70,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
 
         <IconButton
           onClick={() => {
-            throw new Error("Open extensions not implemented.")
+            // TODO: Handle here open extensions.
           }}
           tooltip="Extensions"
           Icon={IoExtensionPuzzle}
diff --git a/src/containers/DevPreview.tsx b/src/containers/DevPreview.tsx
index d5dd19ac..c2a93739 100644
--- a/src/containers/DevPreview.tsx
+++ b/src/containers/DevPreview.tsx
@@ -1,12 +1,9 @@
-import NotificationsModal from "@/components/SidebarActions/NotificationsModal"
 import {type FC} from "react"
 
 const DevelopmentPreview: FC = () => {
   return (
     <>
-      <div className="flex size-full w-screen flex-col items-center justify-center bg-purple-600">
-        <NotificationsModal />
-      </div>
+      <div className="flex size-full w-screen flex-col items-center justify-center bg-purple-600"></div>
     </>
   )
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 267b77a7..0a84077c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import {Config} from "tailwindcss"
 
 module.exports = {
   content: [
-    "./src/components/*.{ts,tsx}",
+    "./src/components/**/*.{ts,tsx}",
     "./src/containers/*.{ts,tsx}",
     "./src/styles/*.{scss,sass}",
     "./stories/**/*.{ts,tsx}",

From ad36140fec141dddddef06bc3064ab004e0b4de2 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 24 Mar 2024 18:26:36 -0400
Subject: [PATCH 18/62] refactor: Fix TailwindCss class problems

---
 src/components/Input.tsx           |  8 ++++----
 src/components/Modal.tsx           | 33 +++++++++++++++++++-----------
 src/components/NotificationDot.tsx |  2 +-
 src/stories/input.stories.tsx      |  4 ++--
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index df3e4dfa..89bfcac7 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -117,14 +117,14 @@ const Input: FC<InputProps> = ({
   return (
     <div className={className?.trim()}>
       <div
-        className="flex items-center rounded-[10px] border border-neutral-300 bg-neutral-50"
+        className="flex items-center rounded-lg border border-neutral-300 bg-neutral-50"
         tabIndex={isDisabled ? undefined : 0}>
         {label !== undefined && <Label text={label} />}
 
-        {Icon && <Icon className="ml-[10px] size-[18px] text-neutral-200" />}
+        {Icon && <Icon className="ml-2 size-5 text-neutral-200" />}
 
         <input
-          className="w-full rounded-[10px] bg-neutral-50"
+          className="w-full rounded-lg bg-neutral-50"
           type="text"
           disabled={isDisabled}
           placeholder={placeholder}
@@ -133,7 +133,7 @@ const Input: FC<InputProps> = ({
         />
 
         {actions && (
-          <div className="mr-[5px] flex fill-neutral-200">
+          <div className="mr-1 flex fill-neutral-200">
             {actions?.map(action => (
               <IconButton
                 key={action.tooltip}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 1ca54ed5..ceee7cc4 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -20,30 +20,39 @@ export type ModalProps = {
   renderLocation?: ModalRenderLocation
 }
 
+const getPopupPositionClassName = (position?: ModalPosition): string => {
+  switch (position) {
+    case ModalPosition.Left: {
+      return "items-center justify-start"
+    }
+    case ModalPosition.Right: {
+      return "items-center justify-end"
+    }
+    case ModalPosition.Top: {
+      return "items-start justify-center"
+    }
+    case ModalPosition.Bottom: {
+      return "items-end justify-center"
+    }
+    case undefined: {
+      return "items-center justify-center"
+    }
+  }
+}
+
 const Modal: FC<ModalProps> = ({
   position,
   children,
   isVisible,
   renderLocation,
 }) => {
-  const popupPositionClass =
-    position === ModalPosition.Left
-      ? "items-center justify-start"
-      : position === ModalPosition.Right
-        ? "items-center justify-end"
-        : position === ModalPosition.Top
-          ? "items-start justify-center"
-          : position === ModalPosition.Bottom
-            ? "items-end justify-center"
-            : "items-center justify-center"
-
   return (
     isVisible &&
     createPortal(
       <div
         className={twMerge(
           "fixed inset-0 flex size-full w-screen flex-col bg-modalOverlay",
-          popupPositionClass
+          getPopupPositionClassName(position)
         )}>
         {children}
       </div>,
diff --git a/src/components/NotificationDot.tsx b/src/components/NotificationDot.tsx
index 47c77b1e..f900d2fb 100644
--- a/src/components/NotificationDot.tsx
+++ b/src/components/NotificationDot.tsx
@@ -14,7 +14,7 @@ const NotificationDot: FC<NotificationDotProps> = ({children, isVisible}) => {
       {isVisible && (
         <div
           className={twMerge(
-            "absolute right-0 top-0 h-[6px] w-[6px]",
+            "absolute right-0 top-0 size-[6px]",
             "rounded-lg border border-neutral-50 bg-red-400"
           )}
         />
diff --git a/src/stories/input.stories.tsx b/src/stories/input.stories.tsx
index 09590324..5a88c6d3 100644
--- a/src/stories/input.stories.tsx
+++ b/src/stories/input.stories.tsx
@@ -88,12 +88,12 @@ export const WithActions: Story = {
       {
         tooltip: "Paste",
         onClick: () => {},
-        Icon: IoArrowUndo,
+        icon: IoArrowUndo,
       },
       {
         tooltip: "Show pass",
         onClick: () => {},
-        Icon: IoTrash,
+        icon: IoTrash,
       },
     ],
   },

From 058e07d0eaa3ac6e482703198e2ca6bfb2448b16 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 24 Mar 2024 21:43:44 -0400
Subject: [PATCH 19/62] feat: Implement notifications handling for
 `useNotifications` hook

---
 .../SidebarActions/NotificationsModal.tsx     |   1 +
 .../SidebarActions/useNotifications.ts        | 136 ++++++++++++++----
 src/hooks/matrix/useRooms.ts                  |   2 +-
 src/views/login.tsx                           |   6 +-
 tailwind.config.ts                            |   1 +
 5 files changed, 113 insertions(+), 33 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 14b51e46..e47d9bda 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -18,6 +18,7 @@ export type NotificationActions = {
 export type NotificationProps = {
   event: string
   lastNotificationTime: number
+  id: string
   displayName?: string
   actions?: NotificationActions[]
 }
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 8712e46b..97eb57cb 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -1,44 +1,122 @@
-import {useState} from "react"
+import {useCallback, useEffect, useState} from "react"
 import {type NotificationProps} from "./NotificationsModal"
 import useEventListener from "@/hooks/matrix/useEventListener"
-import {RoomEvent} from "matrix-js-sdk"
+import {type MatrixClient, type Room, RoomStateEvent} from "matrix-js-sdk"
 import {ButtonVariant} from "../Button"
+import useConnection from "@/hooks/matrix/useConnection"
 
 const useNotifications = () => {
+  const {client} = useConnection()
   const [notifications, setNotifications] = useState<NotificationProps[]>([])
 
-  useEventListener(
-    RoomEvent.MyMembership,
-    (room, membership, _prevMembership) => {
-      if (membership === "invite") {
-        setNotifications(prevNotifications => [
-          ...prevNotifications,
-          {
-            event: "has invited for this room",
-            lastNotificationTime: Date.now(),
-            displayName: room.normalizedName,
-            actions: [
-              {
-                name: "Accept",
-                onClick: () => {
-                  // TODO: Handle here accept invitation.
-                },
-              },
-              {
-                name: "Decline",
-                onClick: () => {
-                  // TODO: Handle here decline invitation.
-                },
-                actionVariant: ButtonVariant.TextLink,
-              },
-            ],
-          },
+  const removeNotification = useCallback((notificationId: string) => {
+    setNotifications(prevNotifications =>
+      prevNotifications.filter(
+        notification => notification.id !== notificationId
+      )
+    )
+  }, [])
+
+  useEffect(() => {
+    if (client === null) {
+      return
+    }
+
+    // Handle history user notifications.
+    const notifications: NotificationProps[] = []
+
+    const invitedRooms = client
+      .getRooms()
+      .filter(room => room.getMyMembership() === "invite")
+
+    for (const invitedRoom of invitedRooms) {
+      notifications.push(
+        inviteRoomNotificationTransformer(invitedRoom, Date.now(), client)
+      )
+    }
+
+    setNotifications(notifications)
+  }, [client, removeNotification])
+
+  useEventListener(RoomStateEvent.Members, (event, state, member) => {
+    if (client === null) {
+      return
+    }
+
+    const room = client.getRoom(state.roomId)
+
+    if (room === null || member.membership === undefined) {
+      return
+    }
+
+    const onRemoveNotification = () => {
+      // Check if the sender of the event is the same as the user who received the invitation.
+      if (event.getSender() === member.userId) {
+        // If so, remove the invitation notification for this room
+        removeNotification(room.roomId)
+      }
+    }
+
+    switch (member.membership) {
+      case "invite": {
+        setNotifications([
+          inviteRoomNotificationTransformer(room, Date.now(), client),
         ])
+
+        break
+      }
+      case "leave": {
+        // When user leaves the room.
+        onRemoveNotification()
+
+        // TODO: Handle here when the user has been expelled.
+
+        break
+      }
+      case "join": {
+        // When user joined the room.
+        onRemoveNotification()
+
+        break
+      }
+      case "ban": {
+        // TODO: Handle here when the user has been banned.
+
+        break
       }
     }
-  )
+  })
 
   return {notifications}
 }
 
+const inviteRoomNotificationTransformer = (
+  room: Room,
+  lastNotificationTime: number,
+  client: MatrixClient
+): NotificationProps => {
+  return {
+    event: "has invited for this room",
+    lastNotificationTime,
+    displayName: room.normalizedName,
+    // TODO: Prefer use other id type that be unique.
+    id: room.roomId,
+    actions: [
+      {
+        name: "Accept",
+        onClick: () => {
+          void client.joinRoom(room.roomId)
+        },
+      },
+      {
+        name: "Decline",
+        onClick: () => {
+          void client.leave(room.roomId)
+        },
+        actionVariant: ButtonVariant.TextLink,
+      },
+    ],
+  }
+}
+
 export default useNotifications
diff --git a/src/hooks/matrix/useRooms.ts b/src/hooks/matrix/useRooms.ts
index 67a5cc8e..45477e89 100644
--- a/src/hooks/matrix/useRooms.ts
+++ b/src/hooks/matrix/useRooms.ts
@@ -46,7 +46,7 @@ const useRooms = () => {
 
     const storeRooms =
       activeSpaceId === null
-        ? client.getRooms()
+        ? client.getRooms().filter(room => room.getMyMembership() === "join")
         : getRoomsFromSpace(activeSpaceId, client)
 
     const directRoomIds = getDirectRoomsIds(client)
diff --git a/src/views/login.tsx b/src/views/login.tsx
index 49b2a282..563a12a1 100644
--- a/src/views/login.tsx
+++ b/src/views/login.tsx
@@ -86,7 +86,7 @@ const LoginView: FC = () => {
 
   return (
     <div className="flex h-screen w-screen items-center justify-center">
-      <div className="flex size-full max-h-[900px] max-w-[900px] gap-16 p-6">
+      <div className="flex size-full max-h-[900px] max-w-4xl gap-16 p-6">
         <div className="flex grow flex-col justify-center gap-6 p-3">
           <div className="flex w-full justify-center">
             <div className="m-2 flex items-center">
@@ -134,14 +134,14 @@ const LoginView: FC = () => {
 
               <Input
                 className="w-full"
-                placeholder="syt_dGhlY3Jpc3M_PAmQdRhKFWPaexp_0iK0SN"
+                placeholder="syt_dGhlY3Jpc3M_PAmQdRhKFW_0iK0SN"
                 initialValue={accessToken}
                 onValueChange={setAccessToken}
                 Icon={IoKey}
                 actions={[
                   {
                     tooltip: isPasswordVisible ? "Hide token" : "Show token",
-                    Icon: isPasswordVisible ? IoEyeOff : IoEye,
+                    icon: isPasswordVisible ? IoEyeOff : IoEye,
                     onClick: () => {
                       setIsPasswordVisible(!isPasswordVisible)
                     },
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0a84077c..c7627337 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,6 +3,7 @@ import {Config} from "tailwindcss"
 module.exports = {
   content: [
     "./src/components/**/*.{ts,tsx}",
+    "./src/views/**/*.{ts,tsx}",
     "./src/containers/*.{ts,tsx}",
     "./src/styles/*.{scss,sass}",
     "./stories/**/*.{ts,tsx}",

From 53316ce3153a4152b7805c2286675b4aef696cd9 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 24 Mar 2024 23:09:01 -0400
Subject: [PATCH 20/62] feat: Implement `useSidebarModalActiveStore`

---
 .../SidebarActions/DirectMessageModal.tsx     | 143 ++++++++----------
 .../SidebarActions/NotificationsModal.tsx     |  85 +++++------
 .../SidebarActions/SidebarActions.tsx         |  56 ++++---
 .../SidebarActions/useSidebarActions.ts       |  41 +++--
 4 files changed, 155 insertions(+), 170 deletions(-)

diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 44dde772..1bb392c6 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -14,12 +14,7 @@ import {
 import useConnection from "@/hooks/matrix/useConnection"
 import useInvitationLink from "@/hooks/matrix/useInvitationLink"
 import useUsersSearch from "@/hooks/matrix/useUserSearch"
-import Modal from "../Modal"
-
-export type DirectMessageModalProps = {
-  isVisible: boolean
-  onClose: () => void
-}
+import {useSidebarModalActiveStore} from "./useSidebarActions"
 
 type DirectChatRecentProps = {
   userId: string
@@ -50,11 +45,9 @@ const DirectChatRecent: FC<DirectChatRecentProps> = ({
   )
 }
 
-const DirectMessageModal: FC<DirectMessageModalProps> = ({
-  onClose,
-  isVisible,
-}) => {
+const DirectMessageModal: FC = () => {
   const {client} = useConnection()
+  const {clearActiveSidebarModal} = useSidebarModalActiveStore()
   const [userId, setUserId] = useState<string | null>(null)
   const [directChats, setDirectChats] = useState<DirectChatRecentProps[]>([])
   const {query, setQuery, results} = useUsersSearch(client)
@@ -94,85 +87,81 @@ const DirectMessageModal: FC<DirectMessageModalProps> = ({
 
   return (
     // TODO: Should be pixels value, replace by the future design.
-    <Modal isVisible={isVisible}>
-      <div className="flex max-h-[80%] max-w-2xl flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
-        <div className="flex w-full">
-          <Typography variant={TypographyVariant.H3}>
-            Direct messages
-          </Typography>
+    <div className="flex max-h-[80%] max-w-2xl flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
+      <div className="flex w-full">
+        <Typography variant={TypographyVariant.H3}>Direct messages</Typography>
+
+        <IconButton
+          onClick={clearActiveSidebarModal}
+          tooltip="Close"
+          Icon={IoCloseCircle}
+          className="ml-auto"
+          color="gray"
+        />
+      </div>
 
-          <IconButton
-            onClick={onClose}
-            tooltip="Close"
-            Icon={IoCloseCircle}
-            className="ml-auto"
-            color="gray"
-          />
+      <Typography>
+        Start a conversation with someone using their name or username
+        (@username:matrix.org).
+      </Typography>
+
+      <Input
+        className="w-full"
+        initialValue={query}
+        onValueChange={setQuery}
+        placeholder="Enter name or username"
+      />
+
+      <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
+        <Typography variant={TypographyVariant.P}>
+          RECENT CONVERSATIONS
+        </Typography>
+
+        <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
+          {results === null
+            ? directChats.map(directChatProps => (
+                <DirectChatRecent {...directChatProps} />
+              ))
+            : results.map(userProps => (
+                <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
+                  <UserProfile {...userProps} />
+                </div>
+              ))}
         </div>
 
         <Typography>
-          Start a conversation with someone using their name or username
-          (@username:matrix.org).
+          Some suggestions may not be shown for privacy reasons. If you don't
+          find who you're looking for, send them your invitation link below.
         </Typography>
+      </div>
 
-        <Input
-          className="w-full"
-          initialValue={query}
-          onValueChange={setQuery}
-          placeholder="Enter name or username"
-        />
+      {/* User direct chat invitation link zone */}
+      <div className="mt-auto flex flex-col gap-2">
+        <div className="h-px w-full bg-neutral-400" />
 
-        <div className="flex h-full flex-col gap-2 overflow-hidden p-1">
-          <Typography variant={TypographyVariant.P}>
-            RECENT CONVERSATIONS
-          </Typography>
+        <Typography>INVITATION LINK</Typography>
 
-          <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
-            {results === null
-              ? directChats.map(directChatProps => (
-                  <DirectChatRecent {...directChatProps} />
-                ))
-              : results.map(userProps => (
-                  <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
-                    <UserProfile {...userProps} />
-                  </div>
-                ))}
-          </div>
-
-          <Typography>
-            Some suggestions may not be shown for privacy reasons. If you don't
-            find who you're looking for, send them your invitation link below.
+        <div className="flex flex-row items-center rounded-md border border-black p-2">
+          <Typography
+            variant={TypographyVariant.Span}
+            className="text-blue-500">
+            {invitationLink ?? "Generating link..."}
           </Typography>
-        </div>
 
-        {/* User direct chat invitation link zone */}
-        <div className="mt-auto flex flex-col gap-2">
-          <div className="h-px w-full bg-neutral-400" />
-
-          <Typography>INVITATION LINK</Typography>
-
-          <div className="flex flex-row items-center rounded-md border border-black p-2">
-            <Typography
-              variant={TypographyVariant.Span}
-              className="text-blue-500">
-              {invitationLink ?? "Generating link..."}
-            </Typography>
-
-            <IconButton
-              className="ml-auto"
-              color="black"
-              onClick={() => {
-                // TODO: Show toast when link has been copied.
-                void copyToClipboard()
-              }}
-              tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
-              Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
-              isDisabled={userId === null || isLinkCopied}
-            />
-          </div>
+          <IconButton
+            className="ml-auto"
+            color="black"
+            onClick={() => {
+              // TODO: Show toast when link has been copied.
+              void copyToClipboard()
+            }}
+            tooltip={isLinkCopied ? "Link copied" : "Copy to clipboard"}
+            Icon={isLinkCopied ? IoCheckmark : IoCopyOutline}
+            isDisabled={userId === null || isLinkCopied}
+          />
         </div>
       </div>
-    </Modal>
+    </div>
   )
 }
 
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index e47d9bda..72b8a792 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -5,9 +5,9 @@ import AvatarImage, {AvatarType} from "../Avatar"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
 import {twMerge} from "tailwind-merge"
-import Modal from "../Modal"
 import IconButton from "../IconButton"
 import useNotifications from "./useNotifications"
+import {useSidebarModalActiveStore} from "./useSidebarActions"
 
 export type NotificationActions = {
   name: string
@@ -80,61 +80,46 @@ const Notification: FC<NotificationProps> = ({
   )
 }
 
-export type NotificationsModalProps = {
-  isVisible: boolean
-  className?: string
-  onClose: () => void
-}
-
-const NotificationsModal: FC<NotificationsModalProps> = ({
-  className,
-  isVisible,
-  onClose,
-}) => {
+const NotificationsModal: FC = () => {
+  const {clearActiveSidebarModal} = useSidebarModalActiveStore()
   const {notifications} = useNotifications()
 
   return (
-    <Modal
-      isVisible={isVisible}
-      children={
-        <div
-          className={twMerge(
-            "flex size-full max-h-[80%] max-w-sm flex-col gap-2 rounded-xl bg-white p-2",
-            className
-          )}>
-          <div className="flex w-full p-2">
-            <Typography
-              className="mr-auto font-bold text-black "
-              variant={TypographyVariant.H3}>
-              Notifications
-            </Typography>
+    <div
+      className={twMerge(
+        "flex size-full max-h-[80%] max-w-sm flex-col gap-2 rounded-xl bg-white p-2"
+      )}>
+      <div className="flex w-full p-2">
+        <Typography
+          className="mr-auto font-bold text-black "
+          variant={TypographyVariant.H3}>
+          Notifications
+        </Typography>
 
-            <Button
-              variant={ButtonVariant.TextLink}
-              size={ButtonSize.Small}
-              color={ButtonColor.Black}
-              onClick={() => {
-                // TODO: Close modal after mark all as read.
-                onClose()
-              }}
-              label="Mark all as read"
-            />
+        <Button
+          variant={ButtonVariant.TextLink}
+          size={ButtonSize.Small}
+          color={ButtonColor.Black}
+          onClick={() => {
+            // TODO: Close modal after mark all as read.
+            clearActiveSidebarModal()
+          }}
+          label="Mark all as read"
+        />
 
-            <IconButton
-              onClick={onClose}
-              tooltip="Close"
-              Icon={IoCloseCircle}
-            />
-          </div>
+        <IconButton
+          onClick={clearActiveSidebarModal}
+          tooltip="Close"
+          Icon={IoCloseCircle}
+        />
+      </div>
 
-          <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
-            {notifications.map(notification => (
-              <Notification {...notification} />
-            ))}
-          </div>
-        </div>
-      }
-    />
+      <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
+        {notifications.map(notification => (
+          <Notification {...notification} />
+        ))}
+      </div>
+    </div>
   )
 }
 
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 21a74c65..c267db91 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -1,4 +1,4 @@
-import {type FC} from "react"
+import {useMemo, type FC} from "react"
 import IconButton from "../IconButton"
 import {twMerge} from "tailwind-merge"
 import {
@@ -10,44 +10,56 @@ import {
 } from "react-icons/io5"
 import useSidebarActions, {
   SidebarModals,
+  useSidebarModalActiveStore,
 } from "@/components/SidebarActions/useSidebarActions"
 import DirectMessageModal from "./DirectMessageModal"
 import NotificationsModal from "./NotificationsModal"
+import Modal from "../Modal"
+
+const SidebarModalsHandler: FC = () => {
+  const {sidebarModalActive} = useSidebarModalActiveStore()
+
+  const activeModalElement = useMemo(() => {
+    if (sidebarModalActive === null) {
+      return
+    }
+
+    switch (sidebarModalActive) {
+      case SidebarModals.DirectMessages: {
+        return <DirectMessageModal />
+      }
+      case SidebarModals.Notifications: {
+        return <NotificationsModal />
+      }
+    }
+  }, [sidebarModalActive])
+
+  return (
+    <>
+      {activeModalElement !== undefined && (
+        <Modal isVisible>{activeModalElement}</Modal>
+      )}
+    </>
+  )
+}
 
 export type SidebarActionsProps = {
   className?: string
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {
-    onLogout,
-    isDirectMessageVisible,
-    showAndCloseSidebarModal,
-    isNotificationsVisible,
-  } = useSidebarActions()
+  const {onLogout, setActiveSidebarModal} = useSidebarActions()
 
   return (
     <>
-      <DirectMessageModal
-        isVisible={isDirectMessageVisible}
-        onClose={() => {
-          showAndCloseSidebarModal(SidebarModals.DirectMessages, false)
-        }}
-      />
-
-      <NotificationsModal
-        isVisible={isNotificationsVisible}
-        onClose={() => {
-          showAndCloseSidebarModal(SidebarModals.Notifications, false)
-        }}
-      />
+      <SidebarModalsHandler />
 
       <section className={twMerge("inline-flex flex-col gap-4", className)}>
         <IconButton
           tooltip="Direct messages"
           Icon={IoPaperPlane}
           onClick={() => {
-            showAndCloseSidebarModal(SidebarModals.DirectMessages, true)
+            setActiveSidebarModal(SidebarModals.DirectMessages)
           }}
         />
 
@@ -61,7 +73,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
 
         <IconButton
           onClick={() => {
-            showAndCloseSidebarModal(SidebarModals.Notifications, true)
+            setActiveSidebarModal(SidebarModals.Notifications)
           }}
           tooltip="Notifications"
           Icon={IoNotificationsSharp}
diff --git a/src/components/SidebarActions/useSidebarActions.ts b/src/components/SidebarActions/useSidebarActions.ts
index 14799ddd..25bbafdb 100644
--- a/src/components/SidebarActions/useSidebarActions.ts
+++ b/src/components/SidebarActions/useSidebarActions.ts
@@ -1,33 +1,34 @@
 import useConnection from "../../hooks/matrix/useConnection"
 import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
-import {useCallback, useState} from "react"
+import {useCallback} from "react"
+import {create} from "zustand"
 
 export enum SidebarModals {
   DirectMessages,
   Notifications,
 }
 
+type SidebarModalActive = {
+  sidebarModalActive: SidebarModals | null
+  setActiveSidebarModal: (sidebarModal: SidebarModals) => void
+  clearActiveSidebarModal: () => void
+}
+
+export const useSidebarModalActiveStore = create<SidebarModalActive>(set => ({
+  sidebarModalActive: null,
+  setActiveSidebarModal: sidebarModal => {
+    set(_state => ({sidebarModalActive: sidebarModal}))
+  },
+  clearActiveSidebarModal: () => {
+    set(_state => ({sidebarModalActive: null}))
+  },
+}))
+
 const useSidebarActions = () => {
   const {disconnect} = useConnection()
   const navigate = useNavigate()
-  const [isDirectMessageVisible, setDirectMessageVisible] = useState(false)
-  const [isNotificationsVisible, setNotificationsVisible] = useState(false)
-
-  const showAndCloseSidebarModal = useCallback(
-    (sidebar: SidebarModals, isVisible: boolean) => {
-      switch (sidebar) {
-        case SidebarModals.DirectMessages: {
-          setDirectMessageVisible(isVisible)
-          break
-        }
-        case SidebarModals.Notifications: {
-          setNotificationsVisible(isVisible)
-        }
-      }
-    },
-    []
-  )
+  const {setActiveSidebarModal} = useSidebarModalActiveStore()
 
   const onLogout = useCallback(async () => {
     await disconnect()
@@ -36,9 +37,7 @@ const useSidebarActions = () => {
 
   return {
     onLogout,
-    isDirectMessageVisible,
-    isNotificationsVisible,
-    showAndCloseSidebarModal,
+    setActiveSidebarModal,
   }
 }
 

From b6b5380844e45d71c30274e4d6295e4b10ccdbe3 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 25 Mar 2024 15:52:57 -0400
Subject: [PATCH 21/62] fix: Fix visual problems for components.

---
 src/components/Avatar.tsx                         |  1 +
 src/components/Button.tsx                         |  2 +-
 src/components/ChatContainer.tsx                  |  6 +++---
 src/components/Checkbox.tsx                       |  6 +++---
 src/components/ContextMenu.tsx                    |  6 +++---
 src/components/EventMessage.tsx                   |  2 +-
 src/components/IconButton.tsx                     |  8 +++++---
 src/components/ImageMessage.tsx                   | 15 +++++++++------
 src/components/KeyCue.tsx                         |  2 +-
 src/components/MessageContainer.tsx               |  8 +++-----
 src/components/NotificationIndicator.tsx          |  8 ++++----
 src/components/RosterUser.tsx                     |  6 ++++--
 .../SidebarActions/DirectMessageModal.tsx         |  7 +++----
 src/components/SidebarActions/SidebarActions.tsx  |  4 +++-
 src/components/SmartAction.tsx                    |  2 +-
 src/components/UserProfile.tsx                    |  2 +-
 src/components/UserProfileGhost.tsx               |  8 ++++----
 src/components/UserProfilePlaceholder.tsx         |  6 +++---
 18 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 5b71cdc1..91d3ff20 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -59,6 +59,7 @@ const AvatarImage: FC<AvatarProps> = ({
               ? "h-userProfileAvatarSizeLarge w-userProfileAvatarSizeLarge"
               : "h-userProfileAvatarSize w-userProfileAvatarSize"
           ),
+        // TODO: Class `rounded-full` should be parent container with `overflow-hidden`.
         isRounded && "rounded-full",
         className
       )}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 137c0323..342245a3 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -61,7 +61,7 @@ const Button: FC<ButtonProps> = ({
   return (
     <button
       className={twMerge(
-        "font-strong box-border flex origin-center cursor-pointer items-center justify-center border-solid outline-none active:translate-y-[1px] disabled:translate-y-[1px]",
+        "font-strong box-border flex origin-center items-center justify-center outline-none active:translate-y-[1px] disabled:translate-y-[1px]",
         sizeClass,
         variantClass,
         className
diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 0c6b73a7..4fbd2d56 100644
--- a/src/components/ChatContainer.tsx
+++ b/src/components/ChatContainer.tsx
@@ -194,7 +194,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
               />
             </div>
 
-            <div className="flex w-full rounded-[5px] border border-neutral-300 bg-neutral-50">
+            <div className="flex w-full rounded-md border border-neutral-300 bg-neutral-50">
               <textarea
                 onKeyDown={handleKeyDown}
                 rows={1}
@@ -211,7 +211,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
 
                   void sendEventTyping()
                 }}
-                className="flex max-h-[100px] w-full resize-none overflow-y-auto border-none bg-transparent p-3 scrollbar-hide focus-visible:outline-none focus-visible:outline-0"
+                className="flex max-h-24 w-full resize-none overflow-y-auto border-none bg-transparent p-3 scrollbar-hide focus-visible:outline-none focus-visible:outline-0"
               />
 
               <div className="m-[5px] size-max">
@@ -237,7 +237,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
           </div>
         </div>
 
-        <div className="flex items-center justify-end gap-4 border-t border-solid border-t-stone-200 bg-neutral-50 p-[5px] pr-2">
+        <div className="flex items-center justify-end gap-4 border-t border-t-stone-200 bg-neutral-50 p-1 pr-2">
           <SmartAction
             Icon={IoMdMedical}
             text="Quick menu"
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index e6b647bc..65acdecf 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -24,13 +24,13 @@ const Checkbox: FC<CheckboxProps> = ({
 
   const isSelectedClass = isSelected
     ? "bg-purple-500"
-    : "border border-solid border-neutral-300"
+    : "border border-neutral-300"
 
   return (
-    <div className="flex size-max items-center gap-[5px]">
+    <div className="flex size-max items-center gap-1">
       <div
         className={twMerge(
-          "h-[13px] w-[13px] rounded-[3px] focus-visible:outline-[2px] focus-visible:outline-offset-[1px] focus-visible:outline-outlineTab focus-visible:duration-150",
+          "size-[13px] rounded-[3px] focus-visible:outline-[2px] focus-visible:outline-offset-[1px] focus-visible:outline-outlineTab focus-visible:duration-150",
           isSelectedClass,
           isDisabledClass
         )}
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 6c918ccd..8dd4de01 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -62,7 +62,7 @@ const ContextMenu: FC<ContextMenuProps> = ({children, id, items}) => {
 
       {isActive && (
         <div
-          className="absolute z-50 h-max w-44 animate-fadeIn rounded-[5px] bg-white shadow-contextMenu"
+          className="absolute z-50 h-max w-44 animate-fadeIn rounded-md bg-white shadow-contextMenu"
           style={{
             left: `${x}px`,
             top: `${y}px`,
@@ -71,10 +71,10 @@ const ContextMenu: FC<ContextMenuProps> = ({children, id, items}) => {
             {items.map((item, index) => (
               <div
                 key={index}
-                className="group flex cursor-pointer gap-3 p-3 text-stone-600 hover:rounded-[5px] hover:bg-purple-500 hover:text-white focus-visible:rounded-[5px] focus-visible:text-outlineTab focus-visible:outline-[2px] focus-visible:transition focus-visible:duration-150"
+                className="group flex cursor-pointer justify-between gap-3 p-3 text-stone-600 hover:rounded-md hover:bg-purple-500 hover:text-white focus-visible:rounded-md focus-visible:text-outlineTab focus-visible:outline-[2px] focus-visible:transition focus-visible:duration-150"
                 onClick={item.action}
                 aria-hidden="true">
-                <span className="mr-auto font-semibold">{item.label}</span>
+                <span className="font-semibold">{item.label}</span>
                 <div className="text-stone-600 group-hover:text-white">
                   {item.icon}
                 </div>
diff --git a/src/components/EventMessage.tsx b/src/components/EventMessage.tsx
index 28bb7a5d..2ac90123 100644
--- a/src/components/EventMessage.tsx
+++ b/src/components/EventMessage.tsx
@@ -13,7 +13,7 @@ const EventMessage: FC<EventMessageProps> = ({timestamp, text}) => {
 
   return (
     <div className="flex items-center gap-3">
-      <div className="flex w-[40px] items-center justify-end">
+      <div className="flex w-10 items-center justify-end">
         <IoMdCreate className="text-neutral-200" />
       </div>
 
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 4b7ae7e4..b5c2647d 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -29,12 +29,14 @@ const IconButton: FC<IconButtonProps> = ({
     <div
       onClick={isDisabled ? undefined : onClick}
       tabIndex={isDisabled ? undefined : 0}
+      role="button"
+      aria-disabled={isDisabled}
+      aria-hidden="true"
       className={twMerge(
-        "inline-block cursor-pointer self-center rounded-[10px] p-1 focus-visible:rounded-[5px] focus-visible:duration-150",
+        "inline-block rounded-lg p-1 focus-visible:duration-150",
         isDisabledClass,
         className
-      )}
-      aria-hidden="true">
+      )}>
       <NotificationDot isVisible={isDotVisible ?? false}>
         <Icon style={{color}} size={20} className="text-neutral-300" />
       </NotificationDot>
diff --git a/src/components/ImageMessage.tsx b/src/components/ImageMessage.tsx
index 69e50986..a71abf63 100644
--- a/src/components/ImageMessage.tsx
+++ b/src/components/ImageMessage.tsx
@@ -56,7 +56,7 @@ const ImageMessage: FC<ImageMessageProps> = ({
   }, [imageUrl, onDeleteMessage, text])
 
   const content = (
-    <div className="flex flex-col pt-[3px]">
+    <div className="flex flex-col pt-1">
       {imageUrl === null ? (
         <div className="flex flex-row items-center gap-1">
           <IoIosAlert className="text-red-500" />
@@ -65,11 +65,14 @@ const ImageMessage: FC<ImageMessageProps> = ({
           </div>
         </div>
       ) : (
-        <img
-          className="h-52 w-44 cursor-pointer rounded-xl object-contain"
-          src={imageUrl}
-          alt={text}
-        />
+        // TODO: Handle image size here. Preferably, make the component accept 'imageDimensions' as props.
+        <div className="max-h-52 max-w-44 overflow-hidden rounded-xl">
+          <img
+            className="cursor-pointer object-contain"
+            src={imageUrl}
+            alt={text}
+          />
+        </div>
       )}
 
       <div className="max-w-messageMaxWidth select-text leading-160">
diff --git a/src/components/KeyCue.tsx b/src/components/KeyCue.tsx
index a0b09b5f..d0cc4682 100644
--- a/src/components/KeyCue.tsx
+++ b/src/components/KeyCue.tsx
@@ -12,7 +12,7 @@ const KeyCue: FC<KeyCueProps> = ({alt, ctrl, shift, char}) => {
   assert(char.length === 1, "key should be a single character")
 
   return (
-    <div className="inline-block rounded-[5px] border border-b-[4px] border-solid border-neutral-500 bg-neutral-300 px-2 text-xs uppercase leading-160">
+    <div className="inline-block rounded-md border border-b-4 border-solid border-neutral-500 bg-neutral-300 px-2 text-xs uppercase leading-160">
       {ctrl && "⌃"}
 
       {alt && "⌥"}
diff --git a/src/components/MessageContainer.tsx b/src/components/MessageContainer.tsx
index 65233a21..327d0edf 100644
--- a/src/components/MessageContainer.tsx
+++ b/src/components/MessageContainer.tsx
@@ -36,7 +36,7 @@ const MessageContainer: FC<MessageContainerProps> = ({
     <div className="flex w-full items-start justify-start">
       <div className="flex w-full gap-3">
         <div
-          className="flex size-[40px] cursor-pointer items-center justify-center
+          className="flex size-10 cursor-pointer items-center justify-center
           overflow-hidden rounded-lg bg-neutral-50"
           onClick={() => {
             onAuthorClick()
@@ -60,12 +60,10 @@ const MessageContainer: FC<MessageContainerProps> = ({
             {authorDisplayName}
           </span>
 
-          <div className="flex">
+          <div className="flex w-full justify-between">
             {children}
 
-            <time className="ml-auto flex text-gray-300">
-              {localeTimeString}
-            </time>
+            <time className="flex text-gray-300">{localeTimeString}</time>
           </div>
         </div>
       </div>
diff --git a/src/components/NotificationIndicator.tsx b/src/components/NotificationIndicator.tsx
index caf0b792..12a08cac 100644
--- a/src/components/NotificationIndicator.tsx
+++ b/src/components/NotificationIndicator.tsx
@@ -23,17 +23,17 @@ const NotificationIndicator: FC<NotificationIndicatorProps> = ({
 
   const isMentionClass =
     mentionAmount === undefined
-      ? "rounded-[50%] bg-neutral-300 h-[10px] w-[10px]"
-      : "h-auto w-auto rounded-md bg-red-500 px-[3px] py-[6px]"
+      ? "rounded-full bg-neutral-300 size-[10px]"
+      : "size-auto rounded-md bg-red-500 px-[3px] py-[6px]"
 
   const adjustedAmount =
     mentionAmount === undefined
       ? // If there's too much notifications to display, show "99+"
         // to avoid overflowing the dot to a larger width.
         undefined
-      : (mentionAmount > 99
+      : mentionAmount > 99
         ? "99+"
-        : mentionAmount.toString())
+        : mentionAmount.toString()
 
   return (
     <div className="flex size-[10px] items-center justify-center">
diff --git a/src/components/RosterUser.tsx b/src/components/RosterUser.tsx
index 306294d8..c0fe8616 100644
--- a/src/components/RosterUser.tsx
+++ b/src/components/RosterUser.tsx
@@ -1,5 +1,7 @@
 import {type FC} from "react"
-import UserProfile, {type UserProfileProps as UserProfileProperties} from "./UserProfile"
+import UserProfile, {
+  type UserProfileProps as UserProfileProperties,
+} from "./UserProfile"
 
 export enum UserPowerLevel {
   Admin,
@@ -18,7 +20,7 @@ const RosterUser: FC<RosterUserProps> = ({userProfileProps, onClick}) => {
   return (
     <div
       onClick={onClick}
-      className="w-full cursor-pointer p-1 hover:rounded-xl hover:bg-neutral-100 focus-visible:rounded-md focus-visible:border-[2px] focus-visible:border-solid focus-visible:border-outlineTab focus-visible:outline-none focus-visible:transition focus-visible:duration-150"
+      className="w-full cursor-pointer p-1 hover:rounded-xl hover:bg-neutral-100 focus-visible:rounded-md focus-visible:border-[2px] focus-visible:border-outlineTab focus-visible:outline-none focus-visible:transition focus-visible:duration-150"
       aria-hidden="true">
       <UserProfile {...userProfileProps} />
     </div>
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 1bb392c6..4d48e66c 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -87,15 +87,14 @@ const DirectMessageModal: FC = () => {
 
   return (
     // TODO: Should be pixels value, replace by the future design.
-    <div className="flex max-h-[80%] max-w-2xl flex-col gap-2 rounded-lg bg-white p-5 shadow-2xl">
-      <div className="flex w-full">
+    <div className="flex size-full max-h-[80%] max-w-2xl flex-col justify-between gap-2 rounded-lg bg-white p-5 shadow-2xl">
+      <div className="flex w-full justify-between">
         <Typography variant={TypographyVariant.H3}>Direct messages</Typography>
 
         <IconButton
           onClick={clearActiveSidebarModal}
           tooltip="Close"
           Icon={IoCloseCircle}
-          className="ml-auto"
           color="gray"
         />
       </div>
@@ -136,7 +135,7 @@ const DirectMessageModal: FC = () => {
       </div>
 
       {/* User direct chat invitation link zone */}
-      <div className="mt-auto flex flex-col gap-2">
+      <div className="flex flex-col gap-2">
         <div className="h-px w-full bg-neutral-400" />
 
         <Typography>INVITATION LINK</Typography>
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index c267db91..ca147f64 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -37,7 +37,9 @@ const SidebarModalsHandler: FC = () => {
   return (
     <>
       {activeModalElement !== undefined && (
-        <Modal isVisible>{activeModalElement}</Modal>
+        <Modal isVisible={sidebarModalActive !== null}>
+          {activeModalElement}
+        </Modal>
       )}
     </>
   )
diff --git a/src/components/SmartAction.tsx b/src/components/SmartAction.tsx
index 6c5398ed..129be089 100644
--- a/src/components/SmartAction.tsx
+++ b/src/components/SmartAction.tsx
@@ -12,7 +12,7 @@ const SmartAction: FC<SmartActionProps> = ({Icon, text, onClick}) => {
     <div
       className="flex cursor-pointer items-center gap-1 text-xs"
       onClick={onClick}
-      role={"button"}
+      role="button"
       aria-hidden="true">
       <Icon size={10} className="text-neutral-300" />
       <span>{text}</span>
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index f2f46a6b..ebe8fb62 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -123,7 +123,7 @@ const UserProfile: FC<UserProfileProps> = ({
         {userStatusClass !== null && (
           <div
             className={twMerge(
-              "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50",
+              "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 rounded-full border-2 border-neutral-50",
               isLarge ? "size-[17px]" : "size-[13px]",
               userStatusClass
             )}
diff --git a/src/components/UserProfileGhost.tsx b/src/components/UserProfileGhost.tsx
index 96fbbd14..d523f094 100644
--- a/src/components/UserProfileGhost.tsx
+++ b/src/components/UserProfileGhost.tsx
@@ -31,17 +31,17 @@ const UserProfileGhost: FC<UserProfileGhostProps> = ({
           style={{opacity: 1 - multiplier}}
           className="flex gap-1">
           <div className="relative">
-            <div className="relative size-[40px] overflow-hidden rounded-[10px] bg-neutral-300" />
+            <div className="relative size-[40px] overflow-hidden rounded-xl bg-neutral-300" />
 
-            <div className="absolute bottom-0 right-0 size-[13px] translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50 bg-neutral-300" />
+            <div className="absolute bottom-0 right-0 size-[13px] translate-x-1/4 translate-y-1/4 rounded-full border-2 border-neutral-50 bg-neutral-300" />
           </div>
 
           <div className="mr-auto inline-flex flex-col gap-[2px]">
-            <div className="overflow-hidden rounded-[10px] bg-neutral-300 text-base font-semibold leading-[100%] text-profileGhost">
+            <div className="overflow-hidden rounded-xl bg-neutral-300 text-base font-semibold leading-[100%] text-profileGhost">
               Emerald branch
             </div>
 
-            <div className="mt-1 h-3 w-min overflow-hidden rounded-[10px] bg-neutral-300 text-xs text-profileGhost">
+            <div className="mt-1 h-3 w-min overflow-hidden rounded-xl bg-neutral-300 text-xs text-profileGhost">
               @emerald
             </div>
           </div>
diff --git a/src/components/UserProfilePlaceholder.tsx b/src/components/UserProfilePlaceholder.tsx
index 2536f5a8..74c98379 100644
--- a/src/components/UserProfilePlaceholder.tsx
+++ b/src/components/UserProfilePlaceholder.tsx
@@ -12,17 +12,17 @@ const UserProfilePlaceholder: FC = () => {
 
           <div
             className={
-              "absolute bottom-0 right-0 size-[13px] translate-x-1/4 translate-y-1/4 rounded-[50%] border-[2px] border-solid border-neutral-50 bg-neutral-300"
+              "absolute bottom-0 right-0 size-[13px] translate-x-1/4 translate-y-1/4 rounded-full border-2 border-neutral-50 bg-neutral-300"
             }
           />
         </div>
         <div className="mr-auto inline-flex flex-col gap-[2px]">
-          <div className="overflow-hidden rounded-[10px] bg-neutral-300 text-base font-semibold leading-[100%] text-profileGhost">
+          <div className="overflow-hidden rounded-lg bg-neutral-300 text-base font-semibold leading-[100%] text-profileGhost">
             Emerald branch
             <LoadingEffect />
           </div>
 
-          <div className="mt-1 h-3 w-min overflow-hidden rounded-[10px] bg-neutral-300 text-xs text-profileGhost">
+          <div className="mt-1 h-3 w-min overflow-hidden rounded-lg bg-neutral-300 text-xs text-profileGhost">
             @emerald
             <LoadingEffect />
           </div>

From 953f26ad25d46270acb7577bc933bb93e2f72f6e Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 10:55:02 -0400
Subject: [PATCH 22/62] fix: Fix storybook stories problems

---
 src/containers/SmartActionBar.tsx       |  4 ++--
 src/stories/createRoom.stories.tsx      |  2 +-
 src/stories/modal.stories.tsx           | 12 ++++--------
 src/stories/textMessage.stories.tsx     |  5 +++--
 src/stories/unreadIndicator.stories.tsx |  2 +-
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/containers/SmartActionBar.tsx b/src/containers/SmartActionBar.tsx
index eab10327..42ec2d6d 100644
--- a/src/containers/SmartActionBar.tsx
+++ b/src/containers/SmartActionBar.tsx
@@ -1,8 +1,8 @@
 import SmartAction from "@/components/SmartAction"
 import useConnection from "@/hooks/matrix/useConnection"
-import {faGlobeAmericas} from "@fortawesome/free-solid-svg-icons"
 import {SyncState} from "matrix-js-sdk"
 import {type FC} from "react"
+import {IoGlobe} from "react-icons/io5"
 
 function getSyncStateText(syncState: SyncState | null) {
   // Haven't started initial connection yet.
@@ -38,7 +38,7 @@ const SmartActionBar: FC = () => {
   return (
     <div className="flex flex-row gap-2">
       <SmartAction
-        icon={faGlobeAmericas}
+        Icon={IoGlobe}
         text={getSyncStateText(syncState)}
         onClick={() => {}}
       />
diff --git a/src/stories/createRoom.stories.tsx b/src/stories/createRoom.stories.tsx
index da0a2190..8de12566 100644
--- a/src/stories/createRoom.stories.tsx
+++ b/src/stories/createRoom.stories.tsx
@@ -6,7 +6,7 @@ type Story = StoryObj<typeof CreateRoom>
 const meta: Meta<typeof CreateRoom> = {component: CreateRoom}
 
 export const Default: Story = {
-  render: () => <CreateRoom />,
+  render: () => <CreateRoom onClose={() => {}} />,
 }
 
 export default meta
diff --git a/src/stories/modal.stories.tsx b/src/stories/modal.stories.tsx
index e9f69de4..7ef3eca9 100644
--- a/src/stories/modal.stories.tsx
+++ b/src/stories/modal.stories.tsx
@@ -10,16 +10,12 @@ const render = (arguments_: ModalProperties) => <Modal {...arguments_} />
 export const WithTwoDialogs: Story = {
   render,
   args: {
-    dialogs: [
+    children: (
       <div key={0}>
         <Button onClick={() => {}} label="showPopup2" />
-      </div>,
-      <div key={1}>
-        <Button onClick={() => {}} label="showPopup2" />
-
-        <Button onClick={() => {}} label="close" />
-      </div>,
-    ],
+      </div>
+    ),
+    isVisible: true,
   },
 }
 
diff --git a/src/stories/textMessage.stories.tsx b/src/stories/textMessage.stories.tsx
index 8dee212b..98a82fe6 100644
--- a/src/stories/textMessage.stories.tsx
+++ b/src/stories/textMessage.stories.tsx
@@ -1,10 +1,11 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import TextMessage, {type TextMessageProps as TextMessageProperties} from "../components/TextMessage"
+import TextMessage from "../components/TextMessage"
+import {type MessageBaseProps} from "../components/MessageContainer"
 
 type Story = StoryObj<typeof TextMessage>
 
 const meta: Meta<typeof TextMessage> = {component: TextMessage}
-const render = (arguments_: TextMessageProperties) => (
+const render = (arguments_: MessageBaseProps) => (
   <TextMessage {...arguments_} onDeleteMessage={() => {}} />
 )
 
diff --git a/src/stories/unreadIndicator.stories.tsx b/src/stories/unreadIndicator.stories.tsx
index 3271c506..36c921de 100644
--- a/src/stories/unreadIndicator.stories.tsx
+++ b/src/stories/unreadIndicator.stories.tsx
@@ -4,7 +4,7 @@ import UnreadIndicator from "../components/UnreadIndicator"
 type Story = StoryObj<typeof UnreadIndicator>
 
 const meta: Meta<typeof UnreadIndicator> = {component: UnreadIndicator}
-const render = () => <UnreadIndicator />
+const render = () => <UnreadIndicator lastReadEventId="unread-indicator" />
 
 export const Default: Story = {
   render,

From 51752ff64fe9d15940d0ce9aee121292773f24eb Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 11:51:47 -0400
Subject: [PATCH 23/62] feat: Upgrade `Typography` component

---
 src/components/Typography.tsx      | 8 ++++++--
 src/stories/typography.stories.tsx | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
index 0ed206a0..c80fe0d5 100644
--- a/src/components/Typography.tsx
+++ b/src/components/Typography.tsx
@@ -13,10 +13,13 @@ export enum TypographyVariant {
 export type TypographyProps = {
   className?: string
   variant?: TypographyVariant
+  as?: keyof React.JSX.IntrinsicElements
   children?: React.ReactNode
 }
 
-function getTagFromVariant(variant: TypographyVariant): React.JSX.ElementType {
+function getTagFromVariant(
+  variant: TypographyVariant
+): keyof React.JSX.IntrinsicElements {
   switch (variant) {
     case TypographyVariant.H1: {
       return "h1"
@@ -38,10 +41,11 @@ function getTagFromVariant(variant: TypographyVariant): React.JSX.ElementType {
 
 const Typography: FC<TypographyProps> = ({
   variant = TypographyVariant.Span,
+  as,
   className,
   children,
 }) => {
-  const Component = getTagFromVariant(variant)
+  const Component = as ?? getTagFromVariant(variant)
 
   const variantClass =
     variant === TypographyVariant.H1
diff --git a/src/stories/typography.stories.tsx b/src/stories/typography.stories.tsx
index 1617e93f..bfa0ee6d 100644
--- a/src/stories/typography.stories.tsx
+++ b/src/stories/typography.stories.tsx
@@ -9,13 +9,16 @@ type Story = StoryObj<typeof Typography>
 const meta: Meta<typeof Typography> = {
   component: Typography,
 }
-const render = (arguments_: TypographyProperties) => <Typography {...arguments_} />
+const render = (arguments_: TypographyProperties) => (
+  <Typography {...arguments_} />
+)
 
 export const Default: Story = {
   render,
   args: {
     children: "This is a default typography component.",
     variant: TypographyVariant.H1,
+    as: "h1",
   },
 }
 

From bf0da7945b51eafa29685d3715ac77ed66e93fba Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 12:00:06 -0400
Subject: [PATCH 24/62] feat: Upgrade `UserProfile` component

---
 src/components/Button.tsx              |  2 +-
 src/components/UserProfile.tsx         |  8 +++++---
 src/stories/createRoom.stories.tsx     | 12 ------------
 src/stories/rosterUser.stories.tsx     |  2 +-
 src/stories/sidebarActions.stories.tsx | 19 -------------------
 5 files changed, 7 insertions(+), 36 deletions(-)
 delete mode 100644 src/stories/createRoom.stories.tsx
 delete mode 100644 src/stories/sidebarActions.stories.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 342245a3..07ac4bff 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -43,7 +43,7 @@ const Button: FC<ButtonProps> = ({
   const sizeClass =
     size === ButtonSize.Small
       ? "p-1 text-xs rounded-md px-2"
-      : "rounded-xl border-[2px] p-3"
+      : "rounded-xl border-2 p-3"
 
   const variantClass =
     variant === ButtonVariant.Primary
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index ebe8fb62..96ea1521 100644
--- a/src/components/UserProfile.tsx
+++ b/src/components/UserProfile.tsx
@@ -2,6 +2,7 @@ import {type FC} from "react"
 import {assert, cleanDisplayName, trim, validateUrl} from "../utils/util"
 import {twMerge} from "tailwind-merge"
 import AvatarImage, {AvatarType} from "./Avatar"
+import {type IconType} from "react-icons"
 
 export enum UserActivity {
   Listening = "Listening to",
@@ -20,7 +21,7 @@ export type UserProfileProps = {
   displayNameColor: string
   status?: UserStatus
   activity?: UserActivity
-  icon?: React.JSX.Element
+  icon?: IconType
   platform?: string
   isLarge?: boolean
   className?: string
@@ -38,7 +39,8 @@ const UserProfile: FC<UserProfileProps> = ({
   platform,
   className,
 }) => {
-  const hasIcon = icon !== undefined
+  const Icon = icon
+  const hasIcon = Icon !== undefined
   const hasActivity = activity !== undefined
   const hasPlatform = platform !== undefined
 
@@ -140,7 +142,7 @@ const UserProfile: FC<UserProfileProps> = ({
         </div>
 
         <div className="flex items-center">
-          {icon && <div className="mr-[3px] size-[10px]">{icon}</div>}
+          {Icon && <Icon size={10} className="mr-[3px]" />}
           {activityOrText}
         </div>
       </div>
diff --git a/src/stories/createRoom.stories.tsx b/src/stories/createRoom.stories.tsx
deleted file mode 100644
index 8de12566..00000000
--- a/src/stories/createRoom.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {type Meta, type StoryObj} from "@storybook/react"
-import CreateRoom from "../components/CreateRoom"
-
-type Story = StoryObj<typeof CreateRoom>
-
-const meta: Meta<typeof CreateRoom> = {component: CreateRoom}
-
-export const Default: Story = {
-  render: () => <CreateRoom onClose={() => {}} />,
-}
-
-export default meta
diff --git a/src/stories/rosterUser.stories.tsx b/src/stories/rosterUser.stories.tsx
index b83aad25..65aea395 100644
--- a/src/stories/rosterUser.stories.tsx
+++ b/src/stories/rosterUser.stories.tsx
@@ -21,7 +21,7 @@ export const WithActivity: Story = {
       text: " ",
       status: UserStatus.Idle,
       activity: UserActivity.Listening,
-      icon: <IoHeadsetSharp />,
+      icon: IoHeadsetSharp,
       platform: "Spotify",
       isLarge: false,
     },
diff --git a/src/stories/sidebarActions.stories.tsx b/src/stories/sidebarActions.stories.tsx
deleted file mode 100644
index c783265a..00000000
--- a/src/stories/sidebarActions.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {type Meta, type StoryObj} from "@storybook/react"
-import SidebarActions, {
-  type SidebarActionsProps as QuickActionsProperties,
-} from "../components/SidebarActions/SidebarActions"
-
-type Story = StoryObj<typeof SidebarActions>
-
-const meta: Meta<typeof SidebarActions> = {component: SidebarActions}
-
-const render = (arguments_: QuickActionsProperties) => (
-  <SidebarActions {...arguments_} />
-)
-
-export const Default: Story = {
-  render,
-  args: {},
-}
-
-export default meta

From b429002800f61ce3b1f7d91a175b4b8da0470c3b Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 12:20:20 -0400
Subject: [PATCH 25/62] refactor: Refactor storybook stories

---
 src/stories/imageMessage.stories.tsx | 9 +++++++--
 src/stories/userProfile.stories.tsx  | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/stories/imageMessage.stories.tsx b/src/stories/imageMessage.stories.tsx
index 268c6479..13d92cbc 100644
--- a/src/stories/imageMessage.stories.tsx
+++ b/src/stories/imageMessage.stories.tsx
@@ -1,10 +1,14 @@
 import {type Meta, type StoryObj} from "@storybook/react"
-import ImageMessage, {type ImageMessageProps as ImageMessageProperties} from "../components/ImageMessage"
+import ImageMessage, {
+  type ImageMessageProps as ImageMessageProperties,
+} from "../components/ImageMessage"
 
 type Story = StoryObj<typeof ImageMessage>
 
 const meta: Meta<typeof ImageMessage> = {component: ImageMessage}
-const render = (arguments_: ImageMessageProperties) => <ImageMessage {...arguments_} />
+const render = (arguments_: ImageMessageProperties) => (
+  <ImageMessage {...arguments_} />
+)
 
 export const Default: Story = {
   render,
@@ -18,6 +22,7 @@ export const Default: Story = {
     text: "My new profile picture is awesome, look better the photo details",
     timestamp: Date.now(),
     onAuthorClick: () => {},
+    onDeleteMessage: () => {},
   },
 }
 
diff --git a/src/stories/userProfile.stories.tsx b/src/stories/userProfile.stories.tsx
index 1d6b149c..b2a3bf02 100644
--- a/src/stories/userProfile.stories.tsx
+++ b/src/stories/userProfile.stories.tsx
@@ -57,7 +57,7 @@ export const WithActivityIcon: Story = {
     text: "Listening to Spotify",
     status: UserStatus.Idle,
     activity: UserActivity.Listening,
-    icon: <IoHeadsetSharp />,
+    icon: IoHeadsetSharp,
     platform: "Spotify",
     isLarge: false,
   },

From 887aa8120892237a4087ba4a0d3c00d62acff897 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 16:14:49 -0400
Subject: [PATCH 26/62] feat: Implement `useChatInput` for `ChatContainer`
 component

---
 src/components/ChatContainer.tsx              | 278 ------------------
 src/components/Roster.tsx                     |   6 +-
 src/components/TextMessage.tsx                |   5 +-
 .../ChatContainer/ChatContainer.tsx           | 253 ++++++++++++++++
 src/containers/ChatContainer/useChatInput.ts  |  31 ++
 src/containers/SmartActionBar.tsx             |  29 +-
 src/hooks/matrix/useActiveRoom.ts             |  28 +-
 src/views/app.tsx                             |   6 +-
 8 files changed, 342 insertions(+), 294 deletions(-)
 delete mode 100644 src/components/ChatContainer.tsx
 create mode 100644 src/containers/ChatContainer/ChatContainer.tsx
 create mode 100644 src/containers/ChatContainer/useChatInput.ts

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
deleted file mode 100644
index 4fbd2d56..00000000
--- a/src/components/ChatContainer.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import {useCallback, useEffect, useMemo, useRef, useState, type FC} from "react"
-import {assert, sendImageMessageFromFile} from "../utils/util"
-import IconButton from "./IconButton"
-import SmartAction from "./SmartAction"
-import TypingIndicator from "./TypingIndicator"
-import useActiveRoom, {MessageKind} from "@/hooks/matrix/useActiveRoom"
-import ImageMessage from "./ImageMessage"
-import TextMessage from "./TextMessage"
-import EventMessage from "./EventMessage"
-import {twMerge} from "tailwind-merge"
-import {useFilePicker} from "use-file-picker"
-import {MsgType} from "matrix-js-sdk"
-import Button, {ButtonVariant} from "./Button"
-import UnreadIndicator from "./UnreadIndicator"
-import {
-  IoEllipsisVertical,
-  IoInformationCircle,
-  IoAccessibility,
-  IoContrast,
-  IoAttach,
-  IoPaperPlane,
-} from "react-icons/io5"
-import {IoMdGlobe, IoMdMedical, IoIosHappy, IoMdLink} from "react-icons/io"
-import {LiaSlackHash} from "react-icons/lia"
-import Modal, {ModalRenderLocation} from "./Modal"
-
-export type ChatContainerProps = {
-  className?: string
-}
-
-const ChatContainer: FC<ChatContainerProps> = ({className}) => {
-  const [value, setValue] = useState("")
-  const textareaReference = useRef<HTMLTextAreaElement>(null)
-
-  const {
-    messages: messageProperties,
-    typingUsers,
-    client,
-    activeRoomId,
-    sendTextMessage,
-    sendEventTyping,
-    roomName,
-  } = useActiveRoom()
-
-  const {openFilePicker, filesContent, clear} = useFilePicker({
-    accept: "image/*",
-    multiple: false,
-    readAs: "DataURL",
-  })
-
-  const sendImageMessage = useCallback(async () => {
-    await sendImageMessageFromFile(filesContent[0], client, activeRoomId)
-    clear()
-  }, [activeRoomId, clear, client, filesContent])
-
-  const messages = useMemo(
-    () =>
-      messageProperties.map(message =>
-        message.kind === MessageKind.Text ? (
-          <TextMessage key={message.data.id} {...message.data} />
-        ) : message.kind === MessageKind.Image ? (
-          <ImageMessage key={message.data.id} {...message.data} />
-        ) : message.kind === MessageKind.Event ? (
-          <EventMessage key={message.data.id} {...message.data} />
-        ) : (
-          <UnreadIndicator key="unread-indicator" {...message.data} />
-        )
-      ),
-    [messageProperties]
-  )
-
-  useEffect(() => {
-    // Move scroll to last message.
-    const textarea = textareaReference.current
-
-    if (textarea !== null) {
-      textarea.style.height = "auto"
-      textarea.style.height = `${textarea.scrollHeight}px`
-    }
-  }, [value])
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === "Enter")
-      if (event.ctrlKey) {
-        setValue(value + "\n")
-      } else {
-        event.preventDefault()
-        void sendTextMessage(MsgType.Text, value)
-        setValue("")
-      }
-  }
-
-  assert(roomName.length > 0, "room name should not be empty")
-
-  return (
-    <>
-      <Modal isVisible={filesContent.length > 0}>
-        <div className="flex max-h-[600px] max-w-xl flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
-          {filesContent.length > 0 && (
-            <img
-              className="h-auto w-full rounded-lg object-cover shadow-md"
-              src={filesContent[0].content}
-              alt={filesContent[0].name}
-            />
-          )}
-          <div className="flex w-full items-center justify-end gap-1">
-            <Button
-              variant={ButtonVariant.Secondary}
-              onClick={clear}
-              label="Cancel"
-            />
-            <Button
-              onClick={() => {
-                void sendImageMessage()
-              }}
-              label="Send Image"
-            />
-          </div>
-        </div>
-      </Modal>
-
-      <div
-        id={ModalRenderLocation.ChatContainer}
-        className={twMerge(
-          "flex h-screen flex-col gap-4 border border-stone-200",
-          className
-        )}>
-        <header className="flex items-center gap-2 border-b border-b-stone-200 p-4">
-          <div className="flex w-full gap-1">
-            <LiaSlackHash className="text-purple-500" />
-
-            <span className="text-purple-500">{roomName}</span>
-
-            {/* <span className="text-stone-600">{text}</span> */}
-          </div>
-
-          <IconButton
-            onClick={() => {
-              /* TODO: Handle `info` button click. */
-            }}
-            tooltip="Room details"
-            Icon={IoInformationCircle}
-          />
-
-          <IconButton
-            onClick={() => {
-              /* TODO: Handle `link` button click. */
-            }}
-            tooltip="Copy link"
-            Icon={IoMdLink}
-          />
-
-          <IconButton
-            onClick={() => {
-              /* TODO: Handle `more` button click. */
-            }}
-            tooltip="More actions"
-            Icon={IoEllipsisVertical}
-          />
-        </header>
-
-        <div
-          ref={scrollReference => {
-            if (scrollReference === null) {
-              return
-            }
-
-            scrollReference.scrollTo({
-              top: scrollReference.scrollHeight - scrollReference.clientHeight,
-              behavior: "smooth",
-            })
-          }}
-          className="mx-4 flex max-h-full grow flex-col gap-4 overflow-y-auto scroll-smooth scrollbar-hide">
-          {messages}
-        </div>
-
-        <div className="mx-4 flex flex-col gap-3">
-          <div className="flex gap-3">
-            <div className="mt-[5px] flex h-max gap-3 ">
-              <IconButton
-                onClick={() => {
-                  /* TODO: Handle `emoji` button click. */
-                }}
-                tooltip="Emoji"
-                Icon={IoIosHappy}
-              />
-
-              <IconButton
-                onClick={() => {
-                  openFilePicker()
-                }}
-                tooltip="Attach"
-                Icon={IoAttach}
-              />
-            </div>
-
-            <div className="flex w-full rounded-md border border-neutral-300 bg-neutral-50">
-              <textarea
-                onKeyDown={handleKeyDown}
-                rows={1}
-                ref={textareaReference}
-                placeholder="Write a message or simply say 👋🏼 hello..."
-                value={value}
-                disabled={false}
-                onChange={value => {
-                  setValue(value.target.value)
-
-                  if (value.target.value === "") {
-                    return
-                  }
-
-                  void sendEventTyping()
-                }}
-                className="flex max-h-24 w-full resize-none overflow-y-auto border-none bg-transparent p-3 scrollbar-hide focus-visible:outline-none focus-visible:outline-0"
-              />
-
-              <div className="m-[5px] size-max">
-                <IconButton
-                  tooltip="Send"
-                  Icon={IoPaperPlane}
-                  color="#C463FF"
-                  isDisabled={false}
-                  onClick={() => {
-                    void sendTextMessage(MsgType.Text, value)
-                    setValue("")
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="flex gap-3">
-            <div className="size-6" />
-
-            <div className="size-6" />
-
-            {typingUsers.length > 0 && <TypingIndicator users={typingUsers} />}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-end gap-4 border-t border-t-stone-200 bg-neutral-50 p-1 pr-2">
-          <SmartAction
-            Icon={IoMdMedical}
-            text="Quick menu"
-            onClick={() => {
-              /* TODO: Handle `Quick menu` click. */
-            }}
-          />
-
-          <SmartAction
-            Icon={IoAccessibility}
-            text="Accessibility"
-            onClick={() => {
-              /* TODO: Handle `Accessibility` click. */
-            }}
-          />
-
-          <SmartAction
-            Icon={IoContrast}
-            text="Switch theme"
-            onClick={() => {
-              /* TODO: Handle `Switch theme` click. */
-            }}
-          />
-
-          <SmartAction
-            Icon={IoMdGlobe}
-            text="63ms ping"
-            onClick={() => {
-              /* TODO: Handle `Ping` click. */
-            }}
-          />
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default ChatContainer
diff --git a/src/components/Roster.tsx b/src/components/Roster.tsx
index fdda2ddb..9dd652eb 100644
--- a/src/components/Roster.tsx
+++ b/src/components/Roster.tsx
@@ -52,10 +52,10 @@ const Roster: FC<RosterProps> = ({className}) => {
   return (
     <>
       <div className={twMerge("flex h-full flex-col", className)}>
-        <header className="flex items-center p-4">
-          <IoPeople size={28} className="text-neutral-300" />
+        <header className="m-1 flex items-center p-2.5">
+          <IoPeople size={27} className="text-neutral-300" />
 
-          <div className="ml-[5px] w-full text-neutral-600">People</div>
+          <div className="ml-1 w-full text-neutral-600">People</div>
 
           <IconButton
             tooltip="Sort members"
diff --git a/src/components/TextMessage.tsx b/src/components/TextMessage.tsx
index 6addc18f..d7ef3374 100644
--- a/src/components/TextMessage.tsx
+++ b/src/components/TextMessage.tsx
@@ -1,8 +1,6 @@
 import {useMemo, type FC} from "react"
 import ContextMenu, {type ContextMenuItem} from "./ContextMenu"
-import MessageContainer, {
-  type MessageBaseProps,
-} from "./MessageContainer"
+import MessageContainer, {type MessageBaseProps} from "./MessageContainer"
 import {IoArrowUndo, IoArrowRedo} from "react-icons/io5"
 import {IoMdTrash} from "react-icons/io"
 
@@ -52,6 +50,7 @@ const TextMessage: FC<MessageBaseProps> = ({
         timestamp={timestamp}
         onAuthorClick={onAuthorClick}>
         <div className="max-w-messageMaxWidth select-text break-words leading-160">
+          // TODO: Process line breaks (\n).
           {text}
         </div>
       </MessageContainer>
diff --git a/src/containers/ChatContainer/ChatContainer.tsx b/src/containers/ChatContainer/ChatContainer.tsx
new file mode 100644
index 00000000..96d23cf0
--- /dev/null
+++ b/src/containers/ChatContainer/ChatContainer.tsx
@@ -0,0 +1,253 @@
+import {useEffect, useMemo, useRef, type FC} from "react"
+import {assert} from "../../utils/util"
+import IconButton from "../../components/IconButton"
+import TypingIndicator from "../../components/TypingIndicator"
+import useActiveRoom, {MessageKind} from "@/hooks/matrix/useActiveRoom"
+import ImageMessage from "../../components/ImageMessage"
+import TextMessage from "../../components/TextMessage"
+import EventMessage from "../../components/EventMessage"
+import {twMerge} from "tailwind-merge"
+import {MsgType} from "matrix-js-sdk"
+import Button, {ButtonVariant} from "../../components/Button"
+import UnreadIndicator from "../../components/UnreadIndicator"
+import {
+  IoEllipsisVertical,
+  IoInformationCircle,
+  IoAttach,
+  IoPaperPlane,
+} from "react-icons/io5"
+import {IoIosHappy, IoMdLink} from "react-icons/io"
+import {LiaSlackHash} from "react-icons/lia"
+import Modal, {ModalRenderLocation} from "../../components/Modal"
+import SmartActionBar from "@/containers/SmartActionBar"
+import useChatInput from "./useChatInput"
+
+export type ChatContainerProps = {
+  className?: string
+}
+
+const ChatContainer: FC<ChatContainerProps> = ({className}) => {
+  const {query, setQuery} = useChatInput()
+
+  const {
+    messagesProp,
+    typingUsers,
+    sendImageMessage,
+    sendTextMessage,
+    roomName,
+    filesContent,
+    clear,
+    openFilePicker,
+  } = useActiveRoom()
+
+  const messages = useMemo(
+    () =>
+      messagesProp.map(message =>
+        message.kind === MessageKind.Text ? (
+          <TextMessage key={message.data.id} {...message.data} />
+        ) : message.kind === MessageKind.Image ? (
+          <ImageMessage key={message.data.id} {...message.data} />
+        ) : message.kind === MessageKind.Event ? (
+          <EventMessage key={message.data.id} {...message.data} />
+        ) : (
+          <UnreadIndicator key="unread-indicator" {...message.data} />
+        )
+      ),
+    [messagesProp]
+  )
+
+  return (
+    <>
+      <Modal isVisible={filesContent.length > 0}>
+        <div className="flex max-h-[600px] max-w-xl flex-col gap-4 rounded-xl bg-slate-50 p-6 px-8 shadow-md">
+          {filesContent.length > 0 && (
+            <img
+              className="h-auto w-full rounded-lg object-cover shadow-md"
+              src={filesContent[0].content}
+              alt={filesContent[0].name}
+            />
+          )}
+          <div className="flex w-full items-center justify-end gap-1">
+            <Button
+              variant={ButtonVariant.Secondary}
+              onClick={clear}
+              label="Cancel"
+            />
+            <Button
+              onClick={() => {
+                void sendImageMessage()
+              }}
+              label="Send Image"
+            />
+          </div>
+        </div>
+      </Modal>
+
+      <div
+        id={ModalRenderLocation.ChatContainer}
+        className={twMerge(
+          "flex h-screen flex-col gap-4 border border-stone-200",
+          className
+        )}>
+        <ChatHeader roomName={roomName} />
+
+        <div
+          ref={scrollReference => {
+            if (scrollReference === null) {
+              return
+            }
+
+            scrollReference.scrollTo({
+              top: scrollReference.scrollHeight - scrollReference.clientHeight,
+              behavior: "smooth",
+            })
+          }}
+          className="mx-4 flex max-h-full grow flex-col gap-4 overflow-y-auto scroll-smooth scrollbar-hide">
+          {messages}
+        </div>
+
+        <div className="mx-4 flex flex-col gap-3">
+          <ChatInput
+            onAttach={openFilePicker}
+            onSend={() => {
+              void sendTextMessage(MsgType.Text, query)
+
+              setQuery("")
+            }}
+            onValueChange={setQuery}
+            value={query}
+          />
+
+          <div className="flex gap-3">
+            <div className="size-6" />
+
+            <div className="size-6" />
+
+            {typingUsers.length > 0 && <TypingIndicator users={typingUsers} />}
+          </div>
+        </div>
+
+        <SmartActionBar />
+      </div>
+    </>
+  )
+}
+
+type ChatInputProps = {
+  value: string
+  onAttach: () => void
+  onSend: () => void
+  onValueChange: (value: string) => void
+}
+
+const ChatInput: FC<ChatInputProps> = ({
+  onAttach,
+  onSend,
+  onValueChange,
+  value,
+}) => {
+  const textareaReference = useRef<HTMLTextAreaElement>(null)
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter")
+      if (event.ctrlKey) {
+        onValueChange(value + "\n")
+      } else {
+        event.preventDefault()
+        onSend()
+      }
+  }
+
+  useEffect(() => {
+    // Move scroll to last message.
+    const textarea = textareaReference.current
+
+    if (textarea !== null) {
+      textarea.style.height = "auto"
+      textarea.style.height = `${textarea.scrollHeight}px`
+    }
+  }, [value])
+
+  return (
+    <div className="flex gap-3">
+      <div className="mt-[5px] flex h-max gap-3 ">
+        <IconButton
+          onClick={() => {
+            /* TODO: Handle `emoji` button click. */
+          }}
+          tooltip="Emoji"
+          Icon={IoIosHappy}
+        />
+
+        <IconButton onClick={onAttach} tooltip="Attach" Icon={IoAttach} />
+      </div>
+
+      <div className="flex w-full rounded-md border border-neutral-300 bg-neutral-50">
+        <textarea
+          onKeyDown={handleKeyDown}
+          rows={1}
+          ref={textareaReference}
+          placeholder="Write a message or simply say 👋🏼 hello..."
+          value={value}
+          disabled={false}
+          onChange={value => {
+            onValueChange(value.target.value)
+          }}
+          className="flex max-h-24 w-full resize-none overflow-y-auto border-none bg-transparent p-3 scrollbar-hide focus-visible:outline-none focus-visible:outline-0"
+        />
+
+        <div className="m-[5px] size-max">
+          <IconButton
+            tooltip="Send"
+            Icon={IoPaperPlane}
+            color="#C463FF"
+            isDisabled={false}
+            onClick={onSend}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ChatHeader: FC<{roomName: string}> = ({roomName}) => {
+  assert(roomName.length > 0, "room name should not be empty")
+
+  return (
+    <header className="flex items-center gap-2 border-b border-b-stone-200 p-3">
+      <div className="m-2 flex w-full gap-1">
+        <LiaSlackHash className="text-purple-500" />
+
+        <span className="text-purple-500">{roomName}</span>
+
+        {/* <span className="text-stone-600">{text}</span> */}
+      </div>
+
+      <IconButton
+        onClick={() => {
+          /* TODO: Handle `info` button click. */
+        }}
+        tooltip="Room details"
+        Icon={IoInformationCircle}
+      />
+
+      <IconButton
+        onClick={() => {
+          /* TODO: Handle `link` button click. */
+        }}
+        tooltip="Copy link"
+        Icon={IoMdLink}
+      />
+
+      <IconButton
+        onClick={() => {
+          /* TODO: Handle `more` button click. */
+        }}
+        tooltip="More actions"
+        Icon={IoEllipsisVertical}
+      />
+    </header>
+  )
+}
+
+export default ChatContainer
diff --git a/src/containers/ChatContainer/useChatInput.ts b/src/containers/ChatContainer/useChatInput.ts
new file mode 100644
index 00000000..54658d56
--- /dev/null
+++ b/src/containers/ChatContainer/useChatInput.ts
@@ -0,0 +1,31 @@
+import useActiveRoomIdStore from "@/hooks/matrix/useActiveRoomIdStore"
+import useConnection from "@/hooks/matrix/useConnection"
+import useDebounced from "@/hooks/util/useDebounced"
+import {useCallback, useEffect, useState} from "react"
+
+const useChatInput = () => {
+  const {client} = useConnection()
+  const {activeRoomId} = useActiveRoomIdStore()
+  const [query, setQuery] = useState("")
+  const debouncedText = useDebounced(query, 500)
+
+  const sendEventTyping = useCallback(async () => {
+    if (activeRoomId === null || client === null) {
+      return
+    }
+
+    await client.sendTyping(activeRoomId, true, 2000)
+  }, [activeRoomId, client])
+
+  useEffect(() => {
+    if (debouncedText === "") {
+      return
+    }
+
+    void sendEventTyping()
+  }, [debouncedText, sendEventTyping])
+
+  return {query, setQuery}
+}
+
+export default useChatInput
diff --git a/src/containers/SmartActionBar.tsx b/src/containers/SmartActionBar.tsx
index 42ec2d6d..28d2e18b 100644
--- a/src/containers/SmartActionBar.tsx
+++ b/src/containers/SmartActionBar.tsx
@@ -2,7 +2,8 @@ import SmartAction from "@/components/SmartAction"
 import useConnection from "@/hooks/matrix/useConnection"
 import {SyncState} from "matrix-js-sdk"
 import {type FC} from "react"
-import {IoGlobe} from "react-icons/io5"
+import {IoMdMedical} from "react-icons/io"
+import {IoAccessibility, IoContrast, IoGlobe} from "react-icons/io5"
 
 function getSyncStateText(syncState: SyncState | null) {
   // Haven't started initial connection yet.
@@ -36,7 +37,31 @@ const SmartActionBar: FC = () => {
   const {syncState} = useConnection()
 
   return (
-    <div className="flex flex-row gap-2">
+    <div className="flex items-center justify-end gap-4 border-t border-t-stone-200 bg-neutral-50 p-1 pr-2">
+      <SmartAction
+        Icon={IoMdMedical}
+        text="Quick menu"
+        onClick={() => {
+          /* TODO: Handle `Quick menu` click. */
+        }}
+      />
+
+      <SmartAction
+        Icon={IoAccessibility}
+        text="Accessibility"
+        onClick={() => {
+          /* TODO: Handle `Accessibility` click. */
+        }}
+      />
+
+      <SmartAction
+        Icon={IoContrast}
+        text="Switch theme"
+        onClick={() => {
+          /* TODO: Handle `Switch theme` click. */
+        }}
+      />
+
       <SmartAction
         Icon={IoGlobe}
         text={getSyncStateText(syncState)}
diff --git a/src/hooks/matrix/useActiveRoom.ts b/src/hooks/matrix/useActiveRoom.ts
index fe7a4dd9..691a66f7 100644
--- a/src/hooks/matrix/useActiveRoom.ts
+++ b/src/hooks/matrix/useActiveRoom.ts
@@ -19,12 +19,14 @@ import {
   getImageUrl,
   getLastReadEventIdFromRoom,
   isUserRoomAdmin,
+  sendImageMessageFromFile,
   stringToColor,
 } from "@/utils/util"
 import useActiveRoomIdStore from "@/hooks/matrix/useActiveRoomIdStore"
 import useIsMountedRef from "@/hooks/util/useIsMountedRef"
 import {type MessageBaseProps} from "@/components/MessageContainer"
 import {type UnreadIndicatorProps} from "@/components/UnreadIndicator"
+import {useFilePicker} from "use-file-picker"
 
 export enum MessageKind {
   Text,
@@ -55,11 +57,17 @@ type AnyMessage =
 const useActiveRoom = () => {
   const {activeRoomId} = useActiveRoomIdStore()
   const {client} = useConnection()
-  const [messages, setMessages] = useState<AnyMessage[]>([])
+  const [messagesProp, setMessagesProp] = useState<AnyMessage[]>([])
   const [typingUsers, setTypingUsers] = useState<TypingIndicatorUser[]>([])
   const isMountedReference = useIsMountedRef()
   const [roomName, setRoomName] = useState<string>(" ")
 
+  const {openFilePicker, filesContent, clear} = useFilePicker({
+    accept: "image/*",
+    multiple: false,
+    readAs: "DataURL",
+  })
+
   useEffect(() => {
     if (
       client === null ||
@@ -85,7 +93,7 @@ const useActiveRoom = () => {
 
     void handleRoomEvents(client, room).then(newMessages => {
       if (isMountedReference.current) {
-        setMessages(newMessages)
+        setMessagesProp(newMessages)
       }
     })
   }, [client, activeRoomId, isMountedReference])
@@ -103,7 +111,7 @@ const useActiveRoom = () => {
           return
         }
 
-        setMessages(messages => [...messages, messageOrEvent])
+        setMessagesProp(messages => [...messages, messageOrEvent])
         void client.sendReadReceipt(event)
       }
     )
@@ -125,7 +133,7 @@ const useActiveRoom = () => {
         return
       }
 
-      setMessages(messagesOrEvents)
+      setMessagesProp(messagesOrEvents)
       void client.sendReadReceipt(event)
     })
   })
@@ -154,12 +162,18 @@ const useActiveRoom = () => {
     }
   })
 
+  const sendImageMessage = useCallback(async () => {
+    await sendImageMessageFromFile(filesContent[0], client, activeRoomId)
+    clear()
+  }, [activeRoomId, clear, client, filesContent])
+
   const sendTextMessage = useCallback(
     async (type: MsgType, body: string) => {
       if (activeRoomId === null || client === null) {
         return
       }
 
+      // TODO: Show toast when an error has occurred.
       await client.sendMessage(activeRoomId, {body, msgtype: type})
     },
     [activeRoomId, client]
@@ -175,13 +189,17 @@ const useActiveRoom = () => {
 
   return {
     activeRoomId,
-    messages,
+    messagesProp,
     sendTextMessage,
+    sendImageMessage,
+    openFilePicker,
     typingUsers,
     sendEventTyping,
     client,
     deleteMessage,
     roomName,
+    filesContent,
+    clear,
   }
 }
 
diff --git a/src/views/app.tsx b/src/views/app.tsx
index 2b180d4c..4e57cc09 100644
--- a/src/views/app.tsx
+++ b/src/views/app.tsx
@@ -1,4 +1,4 @@
-import ChatContainer from "@/components/ChatContainer"
+import ChatContainer from "@/containers/ChatContainer/ChatContainer"
 import Navigation from "@/components/Navigation"
 import SidebarActions from "@/components/SidebarActions/SidebarActions"
 import Roster from "@/components/Roster"
@@ -39,8 +39,8 @@ const AppView: FC = () => {
         <SidebarActions className="p-4" />
       </div>
 
-      <div className="flex flex-col border border-solid border-stone-200">
-        <div className="border-b-[1px] border-solid border-b-stone-200">
+      <div className="flex flex-col border border-stone-200">
+        <div className="border-b border-b-stone-200">
           <SearchBar
             className="m-2"
             onQueryChange={function (query: string): SearchResult[] {

From 4d25b3e6848568b85558f7033d68038f816847b2 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 16:23:01 -0400
Subject: [PATCH 27/62] fix: Fix visual problem for `TextMessage`

---
 src/components/TextMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextMessage.tsx b/src/components/TextMessage.tsx
index d7ef3374..301caf4e 100644
--- a/src/components/TextMessage.tsx
+++ b/src/components/TextMessage.tsx
@@ -50,7 +50,7 @@ const TextMessage: FC<MessageBaseProps> = ({
         timestamp={timestamp}
         onAuthorClick={onAuthorClick}>
         <div className="max-w-messageMaxWidth select-text break-words leading-160">
-          // TODO: Process line breaks (\n).
+          {/* TODO: Process line breaks (\n). */}
           {text}
         </div>
       </MessageContainer>

From abd0dda9e1dc70175228dac9465b5656a718f9b6 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 26 Mar 2024 21:14:19 -0400
Subject: [PATCH 28/62] feat: Implement `useCachedNotifications` hook

---
 .../SidebarActions/useCachedNotifications.ts  | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/SidebarActions/useCachedNotifications.ts

diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
new file mode 100644
index 00000000..52b00c81
--- /dev/null
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -0,0 +1,37 @@
+import {useState} from "react"
+
+type LocalNotificationProps = {
+  isRead: boolean
+  eventId: string
+}
+
+const NOTIFICATIONS_LOCAL_STORAGE_KEY = "notifications"
+
+const useCachedNotifications = () => {
+  const [notifications, setNotifications] = useState<LocalNotificationProps[]>(
+    () => {
+      const savedNotifications = localStorage.getItem(
+        NOTIFICATIONS_LOCAL_STORAGE_KEY
+      )
+
+      return savedNotifications ? JSON.parse(savedNotifications) : []
+    }
+  )
+
+  const saveNotification = (notification: LocalNotificationProps) => {
+    setNotifications(prevNotifications => {
+      const updatedNotifications = [...prevNotifications, notification]
+
+      localStorage.setItem(
+        NOTIFICATIONS_LOCAL_STORAGE_KEY,
+        JSON.stringify(updatedNotifications)
+      )
+
+      return updatedNotifications
+    })
+  }
+
+  return {notifications, saveNotification}
+}
+
+export default useCachedNotifications

From 27b52b99ecf3d372593b3456383756099a90b062 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Thu, 28 Mar 2024 12:30:27 -0400
Subject: [PATCH 29/62] Merge with cristian/upgrade-components

---
 .husky/pre-commit                              | 4 ++--
 src/components/Roster.tsx                      | 8 ++++----
 src/components/UserProfileGhost.tsx            | 2 +-
 src/containers/ChatContainer/ChatContainer.tsx | 6 +++---
 tailwind.config.ts                             | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index bb8caf10..7eef7b34 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx eslint "src/**/*.ts"
-npx commitlint --edit "$1"
+#npx eslint "src/**/*.ts"
+#npx commitlint --edit "$1"
diff --git a/src/components/Roster.tsx b/src/components/Roster.tsx
index 9dd652eb..7a746bf7 100644
--- a/src/components/Roster.tsx
+++ b/src/components/Roster.tsx
@@ -68,10 +68,10 @@ const Roster: FC<RosterProps> = ({className}) => {
 
         <div className="h-px w-full bg-neutral-300" />
 
-        <div className="flex h-full grow flex-col gap-[5px] overflow-y-scroll scrollbar-hide">
+        <div className="flex h-full grow flex-col gap-1 overflow-y-scroll scrollbar-hide">
           <div className="mt-[10px] flex flex-col gap-1">
             <Label
-              className="p-[5px]"
+              className="p-1"
               text={"Admin — " + adminMembersElement.length}
             />
 
@@ -81,7 +81,7 @@ const Roster: FC<RosterProps> = ({className}) => {
           {moderatorMembersElement.length > 0 && (
             <div className="flex flex-col gap-1">
               <Label
-                className="p-[5px]"
+                className="p-1"
                 text={"Moderator — " + moderatorMembersElement.length}
               />
 
@@ -91,7 +91,7 @@ const Roster: FC<RosterProps> = ({className}) => {
 
           <div className="flex flex-col gap-1">
             <Label
-              className="p-[5px]"
+              className="p-1"
               text={"Member — " + joinedMembersElement.length}
             />
 
diff --git a/src/components/UserProfileGhost.tsx b/src/components/UserProfileGhost.tsx
index d523f094..cddb1319 100644
--- a/src/components/UserProfileGhost.tsx
+++ b/src/components/UserProfileGhost.tsx
@@ -31,7 +31,7 @@ const UserProfileGhost: FC<UserProfileGhostProps> = ({
           style={{opacity: 1 - multiplier}}
           className="flex gap-1">
           <div className="relative">
-            <div className="relative size-[40px] overflow-hidden rounded-xl bg-neutral-300" />
+            <div className="relative size-10 overflow-hidden rounded-lg bg-neutral-300" />
 
             <div className="absolute bottom-0 right-0 size-[13px] translate-x-1/4 translate-y-1/4 rounded-full border-2 border-neutral-50 bg-neutral-300" />
           </div>
diff --git a/src/containers/ChatContainer/ChatContainer.tsx b/src/containers/ChatContainer/ChatContainer.tsx
index 96d23cf0..5825bea7 100644
--- a/src/containers/ChatContainer/ChatContainer.tsx
+++ b/src/containers/ChatContainer/ChatContainer.tsx
@@ -169,8 +169,8 @@ const ChatInput: FC<ChatInputProps> = ({
   }, [value])
 
   return (
-    <div className="flex gap-3">
-      <div className="mt-[5px] flex h-max gap-3 ">
+    <div className="flex gap-2">
+      <div className="flex h-full items-center gap-3">
         <IconButton
           onClick={() => {
             /* TODO: Handle `emoji` button click. */
@@ -196,7 +196,7 @@ const ChatInput: FC<ChatInputProps> = ({
           className="flex max-h-24 w-full resize-none overflow-y-auto border-none bg-transparent p-3 scrollbar-hide focus-visible:outline-none focus-visible:outline-0"
         />
 
-        <div className="m-[5px] size-max">
+        <div className="m-1 size-max">
           <IconButton
             tooltip="Send"
             Icon={IoPaperPlane}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c7627337..f4f20196 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,7 @@ module.exports = {
   content: [
     "./src/components/**/*.{ts,tsx}",
     "./src/views/**/*.{ts,tsx}",
-    "./src/containers/*.{ts,tsx}",
+    "./src/containers/**/*.{ts,tsx}",
     "./src/styles/*.{scss,sass}",
     "./stories/**/*.{ts,tsx}",
   ],

From e18f8b08b3fd11643c3588e4ec0a47a9b462ccc9 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 29 Mar 2024 22:03:06 -0400
Subject: [PATCH 30/62] refactor: Remove footer for `Readme.md`

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

diff --git a/README.md b/README.md
index c7bff8f3..a3b0edba 100644
--- a/README.md
+++ b/README.md
@@ -46,11 +46,3 @@ npm run dev
   - [Storybook.js](https://storybook.js.org/): Isolated component development environment
 
 <hr />
-<div align="center">
-  <i>
-    Please feel free to reach out to me on <a href="https://www.linkedin.com/in/yurixander/">LinkedIn</a> for business inquiries.<br />
-    Images generated with DALL·E 3, and edited with Figma.<br />
-    &copy; 2023 Yurixander Ricardo<br /><br />
-    <img alt="Thumbs up illustration" src="./github/thumbs-up.png" />
-  </i>
-</div>

From 8dbc6f58409788cb9ad6cdcd29be300573701a4d Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 29 Mar 2024 22:04:28 -0400
Subject: [PATCH 31/62] fix: Fix `pre-commit` problems

---
 .husky/pre-commit | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 7eef7b34..bb8caf10 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-#npx eslint "src/**/*.ts"
-#npx commitlint --edit "$1"
+npx eslint "src/**/*.ts"
+npx commitlint --edit "$1"

From 1a9e2a5dcf3e5d220de49abecbfb64967939a575 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 30 Mar 2024 00:13:06 -0400
Subject: [PATCH 32/62] feat: Implement events handling for notifications

---
 .../SidebarActions/NotificationsModal.tsx     |   7 +-
 .../SidebarActions/useCachedNotifications.ts  |  37 ++++--
 .../SidebarActions/useNotifications.ts        | 122 ++++++++++++------
 3 files changed, 116 insertions(+), 50 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 72b8a792..4c832fc9 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -16,16 +16,17 @@ export type NotificationActions = {
 }
 
 export type NotificationProps = {
-  event: string
+  body: string
   lastNotificationTime: number
   id: string
   displayName?: string
+  avatarUrl?: string
   actions?: NotificationActions[]
 }
 
 const Notification: FC<NotificationProps> = ({
   displayName,
-  event,
+  body,
   actions,
   lastNotificationTime,
 }) => {
@@ -50,7 +51,7 @@ const Notification: FC<NotificationProps> = ({
       <div className="flex flex-col gap-1">
         <div className="flex flex-row">
           <Typography>
-            {userComponent} {event}
+            {userComponent} {body}
           </Typography>
         </div>
 
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 52b00c81..6f438122 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -1,22 +1,26 @@
 import {useState} from "react"
 
-type LocalNotificationProps = {
+export type LocalNotificationProps = {
+  body: string
   isRead: boolean
-  eventId: string
+  notificationId: string
+  notificationTime: number
+  senderName?: string
+  avatarSenderName?: string
 }
 
 const NOTIFICATIONS_LOCAL_STORAGE_KEY = "notifications"
 
 const useCachedNotifications = () => {
-  const [notifications, setNotifications] = useState<LocalNotificationProps[]>(
-    () => {
-      const savedNotifications = localStorage.getItem(
-        NOTIFICATIONS_LOCAL_STORAGE_KEY
-      )
+  const [cachedNotifications, setNotifications] = useState<
+    LocalNotificationProps[]
+  >(() => {
+    const savedNotifications = localStorage.getItem(
+      NOTIFICATIONS_LOCAL_STORAGE_KEY
+    )
 
-      return savedNotifications ? JSON.parse(savedNotifications) : []
-    }
-  )
+    return savedNotifications ? JSON.parse(savedNotifications) : []
+  })
 
   const saveNotification = (notification: LocalNotificationProps) => {
     setNotifications(prevNotifications => {
@@ -31,7 +35,18 @@ const useCachedNotifications = () => {
     })
   }
 
-  return {notifications, saveNotification}
+  const clearNotifications = () => {
+    const emptyNotifications: LocalNotificationProps[] = []
+
+    setNotifications(emptyNotifications)
+
+    localStorage.setItem(
+      NOTIFICATIONS_LOCAL_STORAGE_KEY,
+      JSON.stringify(emptyNotifications)
+    )
+  }
+
+  return {cachedNotifications, saveNotification, clearNotifications}
 }
 
 export default useCachedNotifications
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 97eb57cb..8e9af847 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -1,12 +1,23 @@
 import {useCallback, useEffect, useState} from "react"
 import {type NotificationProps} from "./NotificationsModal"
 import useEventListener from "@/hooks/matrix/useEventListener"
-import {type MatrixClient, type Room, RoomStateEvent} from "matrix-js-sdk"
+import {
+  type MatrixClient,
+  type MatrixEvent,
+  type Room,
+  type RoomMember,
+  RoomStateEvent,
+} from "matrix-js-sdk"
 import {ButtonVariant} from "../Button"
 import useConnection from "@/hooks/matrix/useConnection"
+import useCachedNotifications, {
+  type LocalNotificationProps,
+} from "./useCachedNotifications"
+import {getImageUrl} from "@/utils/util"
 
 const useNotifications = () => {
   const {client} = useConnection()
+  const {cachedNotifications, saveNotification} = useCachedNotifications()
   const [notifications, setNotifications] = useState<NotificationProps[]>([])
 
   const removeNotification = useCallback((notificationId: string) => {
@@ -22,6 +33,19 @@ const useNotifications = () => {
       return
     }
 
+    const notificationsTwo: NotificationProps[] = []
+
+    for (const notification of cachedNotifications) {
+      notificationsTwo.push({
+        body: notification.body,
+        lastNotificationTime: notification.notificationTime,
+        id: notification.notificationId,
+        displayName: notification.senderName,
+      })
+    }
+
+    setNotifications(notificationsTwo)
+
     // Handle history user notifications.
     const notifications: NotificationProps[] = []
 
@@ -36,58 +60,84 @@ const useNotifications = () => {
     }
 
     setNotifications(notifications)
-  }, [client, removeNotification])
+  }, [cachedNotifications, client, removeNotification])
 
   useEventListener(RoomStateEvent.Members, (event, state, member) => {
-    if (client === null) {
+    if (client === null || client.getUserId() !== member.userId) {
       return
     }
 
-    const room = client.getRoom(state.roomId)
+    const notification = membersEventNotificationTransformer(
+      event,
+      client,
+      member
+    )
 
-    if (room === null || member.membership === undefined) {
+    if (notification === null) {
       return
     }
 
-    const onRemoveNotification = () => {
-      // Check if the sender of the event is the same as the user who received the invitation.
-      if (event.getSender() === member.userId) {
-        // If so, remove the invitation notification for this room
-        removeNotification(room.roomId)
-      }
-    }
+    saveNotification(notification)
+  })
 
-    switch (member.membership) {
-      case "invite": {
-        setNotifications([
-          inviteRoomNotificationTransformer(room, Date.now(), client),
-        ])
+  return {notifications}
+}
 
-        break
-      }
-      case "leave": {
-        // When user leaves the room.
-        onRemoveNotification()
+const membersEventNotificationTransformer = (
+  event: MatrixEvent,
+  client: MatrixClient,
+  member: RoomMember
+): LocalNotificationProps | null => {
+  const eventId = event.getId()
 
-        // TODO: Handle here when the user has been expelled.
+  if (eventId === undefined || member.membership === undefined) {
+    console.error("Event id not found", event)
 
-        break
-      }
-      case "join": {
-        // When user joined the room.
-        onRemoveNotification()
+    return null
+  }
 
-        break
+  switch (member.membership) {
+    case "invite": {
+      break
+    }
+    case "leave": {
+      if (event.getSender() !== client.getUserId()) {
+        const eventId = event.getId()
+
+        if (eventId === undefined) {
+          console.error("eventID not found", event)
+
+          return null
+        }
+
+        return {
+          body: "expelled you from the room",
+          isRead: false,
+          notificationId: eventId,
+          notificationTime: event.localTimestamp,
+          senderName: event.sender?.name,
+          avatarSenderName: getImageUrl(
+            event.sender?.getMxcAvatarUrl(),
+            client
+          ),
+        }
       }
-      case "ban": {
-        // TODO: Handle here when the user has been banned.
 
-        break
-      }
+      // TODO: Handle here when the user has been expelled.
+
+      break
     }
-  })
+    case "join": {
+      break
+    }
+    case "ban": {
+      // TODO: Handle here when the user has been banned.
 
-  return {notifications}
+      break
+    }
+  }
+
+  return null
 }
 
 const inviteRoomNotificationTransformer = (
@@ -96,7 +146,7 @@ const inviteRoomNotificationTransformer = (
   client: MatrixClient
 ): NotificationProps => {
   return {
-    event: "has invited for this room",
+    body: "has invited for this room",
     lastNotificationTime,
     displayName: room.normalizedName,
     // TODO: Prefer use other id type that be unique.

From 24792a80470734b02652af83330c955cf22bf024 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 30 Mar 2024 11:55:21 -0400
Subject: [PATCH 33/62] feat: Improve notifications handling

---
 .../SidebarActions/NotificationsModal.tsx     |   7 +-
 .../SidebarActions/useCachedNotifications.ts  |  34 +++--
 .../SidebarActions/useNotifications.ts        | 142 +++++++++---------
 3 files changed, 97 insertions(+), 86 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 4c832fc9..a9c92b5f 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -29,6 +29,7 @@ const Notification: FC<NotificationProps> = ({
   body,
   actions,
   lastNotificationTime,
+  avatarUrl,
 }) => {
   const userComponent =
     displayName === undefined ? undefined : (
@@ -44,6 +45,7 @@ const Notification: FC<NotificationProps> = ({
             isLarge={false}
             avatarType={AvatarType.Profile}
             displayName={displayName}
+            avatarUrl={avatarUrl}
           />
         </div>
       )}
@@ -83,7 +85,7 @@ const Notification: FC<NotificationProps> = ({
 
 const NotificationsModal: FC = () => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
-  const {notifications} = useNotifications()
+  const {notifications, clearNotifications} = useNotifications()
 
   return (
     <div
@@ -104,6 +106,9 @@ const NotificationsModal: FC = () => {
           onClick={() => {
             // TODO: Close modal after mark all as read.
             clearActiveSidebarModal()
+
+            // TODO: Temporarily, remove in the future.
+            clearNotifications()
           }}
           label="Mark all as read"
         />
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 6f438122..2eaf1eaf 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -1,4 +1,4 @@
-import {useState} from "react"
+import {useCallback, useState} from "react"
 
 export type LocalNotificationProps = {
   body: string
@@ -22,18 +22,30 @@ const useCachedNotifications = () => {
     return savedNotifications ? JSON.parse(savedNotifications) : []
   })
 
-  const saveNotification = (notification: LocalNotificationProps) => {
-    setNotifications(prevNotifications => {
-      const updatedNotifications = [...prevNotifications, notification]
+  const saveNotification = useCallback(
+    (notification: LocalNotificationProps) => {
+      setNotifications(prevNotifications => {
+        if (
+          prevNotifications.some(
+            prevNotification =>
+              prevNotification.notificationId === notification.notificationId
+          )
+        ) {
+          return prevNotifications
+        }
 
-      localStorage.setItem(
-        NOTIFICATIONS_LOCAL_STORAGE_KEY,
-        JSON.stringify(updatedNotifications)
-      )
+        const updatedNotifications = [...prevNotifications, notification]
 
-      return updatedNotifications
-    })
-  }
+        localStorage.setItem(
+          NOTIFICATIONS_LOCAL_STORAGE_KEY,
+          JSON.stringify(updatedNotifications)
+        )
+
+        return updatedNotifications
+      })
+    },
+    []
+  )
 
   const clearNotifications = () => {
     const emptyNotifications: LocalNotificationProps[] = []
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 8e9af847..05e7d598 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -4,20 +4,21 @@ import useEventListener from "@/hooks/matrix/useEventListener"
 import {
   type MatrixClient,
   type MatrixEvent,
-  type Room,
   type RoomMember,
   RoomStateEvent,
 } from "matrix-js-sdk"
-import {ButtonVariant} from "../Button"
 import useConnection from "@/hooks/matrix/useConnection"
 import useCachedNotifications, {
   type LocalNotificationProps,
 } from "./useCachedNotifications"
-import {getImageUrl} from "@/utils/util"
+import {assert, getImageUrl} from "@/utils/util"
+import {ButtonVariant} from "../Button"
 
 const useNotifications = () => {
   const {client} = useConnection()
-  const {cachedNotifications, saveNotification} = useCachedNotifications()
+  const {cachedNotifications, saveNotification, clearNotifications} =
+    useCachedNotifications()
+
   const [notifications, setNotifications] = useState<NotificationProps[]>([])
 
   const removeNotification = useCallback((notificationId: string) => {
@@ -33,33 +34,57 @@ const useNotifications = () => {
       return
     }
 
-    const notificationsTwo: NotificationProps[] = []
-
-    for (const notification of cachedNotifications) {
-      notificationsTwo.push({
-        body: notification.body,
-        lastNotificationTime: notification.notificationTime,
-        id: notification.notificationId,
-        displayName: notification.senderName,
-      })
-    }
-
-    setNotifications(notificationsTwo)
-
     // Handle history user notifications.
-    const notifications: NotificationProps[] = []
+    const newNotifications: NotificationProps[] = []
 
     const invitedRooms = client
       .getRooms()
       .filter(room => room.getMyMembership() === "invite")
 
     for (const invitedRoom of invitedRooms) {
-      notifications.push(
-        inviteRoomNotificationTransformer(invitedRoom, Date.now(), client)
-      )
+      // TODO: Handle here invited rooms.
+
+      newNotifications.push({
+        body: "invited you to join this room",
+        id: invitedRoom.roomId,
+        lastNotificationTime: Date.now(),
+        avatarUrl: getImageUrl(invitedRoom.getMxcAvatarUrl(), client),
+        displayName: invitedRoom.name,
+        actions: [
+          {
+            name: "Accept",
+            onClick: () => {
+              void client.joinRoom(invitedRoom.roomId).then(room => {
+                if (room.getMyMembership() === "join") {
+                  removeNotification(invitedRoom.roomId)
+                }
+              })
+            },
+          },
+          {
+            name: "Decline",
+            onClick: () => {
+              void client.leave(invitedRoom.roomId).then(() => {
+                removeNotification(invitedRoom.roomId)
+              })
+            },
+            actionVariant: ButtonVariant.TextLink,
+          },
+        ],
+      })
+    }
+
+    for (const notification of cachedNotifications) {
+      newNotifications.push({
+        body: notification.body,
+        lastNotificationTime: notification.notificationTime,
+        id: notification.notificationId,
+        displayName: notification.senderName,
+        avatarUrl: notification.avatarSenderName,
+      })
     }
 
-    setNotifications(notifications)
+    setNotifications(newNotifications)
   }, [cachedNotifications, client, removeNotification])
 
   useEventListener(RoomStateEvent.Members, (event, state, member) => {
@@ -80,7 +105,7 @@ const useNotifications = () => {
     saveNotification(notification)
   })
 
-  return {notifications}
+  return {notifications, clearNotifications}
 }
 
 const membersEventNotificationTransformer = (
@@ -90,42 +115,37 @@ const membersEventNotificationTransformer = (
 ): LocalNotificationProps | null => {
   const eventId = event.getId()
 
-  if (eventId === undefined || member.membership === undefined) {
-    console.error("Event id not found", event)
-
-    return null
-  }
+  assert(eventId !== undefined, "eventId should not be undefined")
 
   switch (member.membership) {
     case "invite": {
       break
     }
     case "leave": {
-      if (event.getSender() !== client.getUserId()) {
-        const eventId = event.getId()
-
-        if (eventId === undefined) {
-          console.error("eventID not found", event)
-
-          return null
-        }
+      if (
+        event.getSender() === client.getUserId() &&
+        event.getPrevContent().membership === "invite"
+      ) {
+        const room = client.getRoom(event.getRoomId())
 
         return {
-          body: "expelled you from the room",
+          body: "you rejected the invitation",
           isRead: false,
           notificationId: eventId,
           notificationTime: event.localTimestamp,
-          senderName: event.sender?.name,
-          avatarSenderName: getImageUrl(
-            event.sender?.getMxcAvatarUrl(),
-            client
-          ),
+          senderName: room?.name,
+          avatarSenderName: getImageUrl(room?.getMxcAvatarUrl(), client),
         }
       }
 
-      // TODO: Handle here when the user has been expelled.
-
-      break
+      return {
+        body: "expelled you from the room",
+        isRead: false,
+        notificationId: eventId,
+        notificationTime: event.localTimestamp,
+        senderName: event.sender?.name,
+        avatarSenderName: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+      }
     }
     case "join": {
       break
@@ -135,38 +155,12 @@ const membersEventNotificationTransformer = (
 
       break
     }
+    case undefined: {
+      break
+    }
   }
 
   return null
 }
 
-const inviteRoomNotificationTransformer = (
-  room: Room,
-  lastNotificationTime: number,
-  client: MatrixClient
-): NotificationProps => {
-  return {
-    body: "has invited for this room",
-    lastNotificationTime,
-    displayName: room.normalizedName,
-    // TODO: Prefer use other id type that be unique.
-    id: room.roomId,
-    actions: [
-      {
-        name: "Accept",
-        onClick: () => {
-          void client.joinRoom(room.roomId)
-        },
-      },
-      {
-        name: "Decline",
-        onClick: () => {
-          void client.leave(room.roomId)
-        },
-        actionVariant: ButtonVariant.TextLink,
-      },
-    ],
-  }
-}
-
 export default useNotifications

From 0553f60f0ae3aae58c6b36cdb59dda7e67c5be4b Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 30 Mar 2024 12:29:02 -0400
Subject: [PATCH 34/62] fix: Test eslint actions

---
 .husky/pre-commit                 | 2 +-
 src/hooks/matrix/useActiveRoom.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index bb8caf10..0473777e 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx eslint "src/**/*.ts"
+# npx eslint "src/**/*.ts"
 npx commitlint --edit "$1"
diff --git a/src/hooks/matrix/useActiveRoom.ts b/src/hooks/matrix/useActiveRoom.ts
index 691a66f7..94a6e89b 100644
--- a/src/hooks/matrix/useActiveRoom.ts
+++ b/src/hooks/matrix/useActiveRoom.ts
@@ -255,6 +255,10 @@ const handleEvents = async (
     return null
   }
 
+  const checkErrorList: string[] = []
+
+  checkErrorList.push("Other error")
+
   const user = client.getUser(sender)?.displayName
 
   if (user === undefined) {

From 651a8fe382bc0d2457c673840fc2c6e29f82e514 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 30 Mar 2024 12:29:55 -0400
Subject: [PATCH 35/62] Revert "fix: Test eslint actions"

This reverts commit 0553f60f0ae3aae58c6b36cdb59dda7e67c5be4b.
---
 .husky/pre-commit                 | 2 +-
 src/hooks/matrix/useActiveRoom.ts | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 0473777e..bb8caf10 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-# npx eslint "src/**/*.ts"
+npx eslint "src/**/*.ts"
 npx commitlint --edit "$1"
diff --git a/src/hooks/matrix/useActiveRoom.ts b/src/hooks/matrix/useActiveRoom.ts
index 94a6e89b..691a66f7 100644
--- a/src/hooks/matrix/useActiveRoom.ts
+++ b/src/hooks/matrix/useActiveRoom.ts
@@ -255,10 +255,6 @@ const handleEvents = async (
     return null
   }
 
-  const checkErrorList: string[] = []
-
-  checkErrorList.push("Other error")
-
   const user = client.getUser(sender)?.displayName
 
   if (user === undefined) {

From a39e4b426b9acc1e8ab0882ec883d28e3e151500 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 31 Mar 2024 15:49:22 -0400
Subject: [PATCH 36/62] feat: Implement room member events for notifications

---
 .../SidebarActions/NotificationsModal.tsx     | 44 +++++----
 .../SidebarActions/SidebarActions.tsx         | 11 ++-
 .../SidebarActions/useCachedNotifications.ts  | 12 +--
 .../SidebarActions/useNotifications.ts        | 96 ++++++++++++-------
 4 files changed, 101 insertions(+), 62 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index a9c92b5f..3cab0a41 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -6,8 +6,8 @@ import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
 import {twMerge} from "tailwind-merge"
 import IconButton from "../IconButton"
-import useNotifications from "./useNotifications"
 import {useSidebarModalActiveStore} from "./useSidebarActions"
+import {type LocalNotificationData} from "./useCachedNotifications"
 
 export type NotificationActions = {
   name: string
@@ -15,37 +15,32 @@ export type NotificationActions = {
   onClick: () => void
 }
 
-export type NotificationProps = {
-  body: string
-  lastNotificationTime: number
-  id: string
-  displayName?: string
-  avatarUrl?: string
+export interface NotificationProps extends LocalNotificationData {
   actions?: NotificationActions[]
 }
 
 const Notification: FC<NotificationProps> = ({
-  displayName,
   body,
+  notificationTime,
   actions,
-  lastNotificationTime,
-  avatarUrl,
+  avatarSenderName,
+  senderName,
 }) => {
   const userComponent =
-    displayName === undefined ? undefined : (
-      <b style={{color: stringToColor(displayName)}}>{displayName}</b>
+    senderName === undefined ? undefined : (
+      <b style={{color: stringToColor(senderName)}}>{senderName}</b>
     )
 
   return (
     <div className="flex gap-2 p-2">
-      {displayName !== undefined && (
-        <div className="overflow-hidden rounded-lg">
+      {senderName !== undefined && (
+        <div className="size-full max-h-10 max-w-10 overflow-hidden rounded-lg">
           <AvatarImage
             isRounded={false}
             isLarge={false}
-            avatarType={AvatarType.Profile}
-            displayName={displayName}
-            avatarUrl={avatarUrl}
+            avatarType={AvatarType.Message}
+            displayName={senderName}
+            avatarUrl={avatarSenderName}
           />
         </div>
       )}
@@ -61,7 +56,7 @@ const Notification: FC<NotificationProps> = ({
           <IoTime size={13} />
 
           <Typography variant={TypographyVariant.P}>
-            {timeFormatter(lastNotificationTime)}
+            {timeFormatter(notificationTime)}
           </Typography>
         </div>
 
@@ -83,9 +78,16 @@ const Notification: FC<NotificationProps> = ({
   )
 }
 
-const NotificationsModal: FC = () => {
+export type NotificationsModalProps = {
+  notifications: NotificationProps[]
+  onAllMaskAsRead: () => void
+}
+
+const NotificationsModal: FC<NotificationsModalProps> = ({
+  notifications,
+  onAllMaskAsRead,
+}) => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
-  const {notifications, clearNotifications} = useNotifications()
 
   return (
     <div
@@ -108,7 +110,7 @@ const NotificationsModal: FC = () => {
             clearActiveSidebarModal()
 
             // TODO: Temporarily, remove in the future.
-            clearNotifications()
+            onAllMaskAsRead()
           }}
           label="Mark all as read"
         />
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index adea24cf..6b745277 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -15,9 +15,11 @@ import useSidebarActions, {
 import DirectMessageModal from "./DirectMessageModal"
 import NotificationsModal from "./NotificationsModal"
 import Modal from "../Modal"
+import useNotifications from "./useNotifications"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
+  const {notifications, clearNotifications} = useNotifications()
 
   const activeModalElement = useMemo(() => {
     if (sidebarModalActive === null) {
@@ -29,10 +31,15 @@ const SidebarModalsHandler: FC = () => {
         return <DirectMessageModal />
       }
       case SidebarModals.Notifications: {
-        return <NotificationsModal />
+        return (
+          <NotificationsModal
+            notifications={notifications}
+            onAllMaskAsRead={clearNotifications}
+          />
+        )
       }
     }
-  }, [sidebarModalActive])
+  }, [clearNotifications, notifications, sidebarModalActive])
 
   return (
     <>
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 2eaf1eaf..f55c039c 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -1,19 +1,19 @@
 import {useCallback, useState} from "react"
 
-export type LocalNotificationProps = {
+export type LocalNotificationData = {
   body: string
   isRead: boolean
   notificationId: string
   notificationTime: number
   senderName?: string
-  avatarSenderName?: string
+  avatarSenderUrl?: string
 }
 
 const NOTIFICATIONS_LOCAL_STORAGE_KEY = "notifications"
 
 const useCachedNotifications = () => {
   const [cachedNotifications, setNotifications] = useState<
-    LocalNotificationProps[]
+    LocalNotificationData[]
   >(() => {
     const savedNotifications = localStorage.getItem(
       NOTIFICATIONS_LOCAL_STORAGE_KEY
@@ -23,7 +23,7 @@ const useCachedNotifications = () => {
   })
 
   const saveNotification = useCallback(
-    (notification: LocalNotificationProps) => {
+    (notification: LocalNotificationData) => {
       setNotifications(prevNotifications => {
         if (
           prevNotifications.some(
@@ -34,7 +34,7 @@ const useCachedNotifications = () => {
           return prevNotifications
         }
 
-        const updatedNotifications = [...prevNotifications, notification]
+        const updatedNotifications = [notification, ...prevNotifications]
 
         localStorage.setItem(
           NOTIFICATIONS_LOCAL_STORAGE_KEY,
@@ -48,7 +48,7 @@ const useCachedNotifications = () => {
   )
 
   const clearNotifications = () => {
-    const emptyNotifications: LocalNotificationProps[] = []
+    const emptyNotifications: LocalNotificationData[] = []
 
     setNotifications(emptyNotifications)
 
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 05e7d598..986a1a66 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -9,7 +9,7 @@ import {
 } from "matrix-js-sdk"
 import useConnection from "@/hooks/matrix/useConnection"
 import useCachedNotifications, {
-  type LocalNotificationProps,
+  type LocalNotificationData,
 } from "./useCachedNotifications"
 import {assert, getImageUrl} from "@/utils/util"
 import {ButtonVariant} from "../Button"
@@ -24,7 +24,7 @@ const useNotifications = () => {
   const removeNotification = useCallback((notificationId: string) => {
     setNotifications(prevNotifications =>
       prevNotifications.filter(
-        notification => notification.id !== notificationId
+        notification => notification.notificationId !== notificationId
       )
     )
   }, [])
@@ -42,14 +42,13 @@ const useNotifications = () => {
       .filter(room => room.getMyMembership() === "invite")
 
     for (const invitedRoom of invitedRooms) {
-      // TODO: Handle here invited rooms.
-
       newNotifications.push({
         body: "invited you to join this room",
-        id: invitedRoom.roomId,
-        lastNotificationTime: Date.now(),
-        avatarUrl: getImageUrl(invitedRoom.getMxcAvatarUrl(), client),
-        displayName: invitedRoom.name,
+        notificationId: invitedRoom.roomId,
+        notificationTime: Date.now(),
+        avatarSenderUrl: getImageUrl(invitedRoom.getMxcAvatarUrl(), client),
+        senderName: invitedRoom.name,
+        isRead: false,
         actions: [
           {
             name: "Accept",
@@ -77,10 +76,11 @@ const useNotifications = () => {
     for (const notification of cachedNotifications) {
       newNotifications.push({
         body: notification.body,
-        lastNotificationTime: notification.notificationTime,
-        id: notification.notificationId,
-        displayName: notification.senderName,
-        avatarUrl: notification.avatarSenderName,
+        isRead: notification.isRead,
+        notificationTime: notification.notificationTime,
+        notificationId: notification.notificationId,
+        senderName: notification.senderName,
+        avatarSenderUrl: notification.avatarSenderUrl,
       })
     }
 
@@ -112,51 +112,81 @@ const membersEventNotificationTransformer = (
   event: MatrixEvent,
   client: MatrixClient,
   member: RoomMember
-): LocalNotificationProps | null => {
+): LocalNotificationData | null => {
   const eventId = event.getId()
+  const myUserId = client.getUserId()
+  const sender = event.getSender()
+  const prevContent = event.getPrevContent()
+  const room = client.getRoom(event.getRoomId())
+  const roomName = room?.name ?? "room"
+
+  const hasReason = event.getContent().reason
+  const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
 
   assert(eventId !== undefined, "eventId should not be undefined")
 
-  switch (member.membership) {
-    case "invite": {
-      break
-    }
+  switch (event.getContent().membership) {
     case "leave": {
-      if (
-        event.getSender() === client.getUserId() &&
-        event.getPrevContent().membership === "invite"
-      ) {
-        const room = client.getRoom(event.getRoomId())
-
+      if (sender === myUserId && prevContent.membership === "invite") {
         return {
           body: "you rejected the invitation",
           isRead: false,
           notificationId: eventId,
           notificationTime: event.localTimestamp,
           senderName: room?.name,
-          avatarSenderName: getImageUrl(room?.getMxcAvatarUrl(), client),
+          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
+        }
+      } else if (sender !== myUserId && prevContent.membership === "join") {
+        return {
+          body: `expelled you from the ${roomName} ${reason}`,
+          isRead: false,
+          notificationId: eventId,
+          notificationTime: event.localTimestamp,
+          senderName: event.sender?.name,
+          avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
         }
       }
 
+      break
+    }
+    case "join": {
+      if (prevContent.membership === "invite") {
+        return {
+          body: `you accepted the invitation to join this room`,
+          isRead: false,
+          notificationId: eventId,
+          notificationTime: event.localTimestamp,
+          senderName: room?.name,
+          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
+        }
+      }
+      break
+    }
+    case "ban": {
       return {
-        body: "expelled you from the room",
+        body: `you have been banned from the ${roomName} ${reason}`,
         isRead: false,
         notificationId: eventId,
         notificationTime: event.localTimestamp,
         senderName: event.sender?.name,
-        avatarSenderName: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+        avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
       }
     }
-    case "join": {
+    case undefined: {
       break
     }
-    case "ban": {
-      // TODO: Handle here when the user has been banned.
+  }
 
-      break
-    }
-    case undefined: {
-      break
+  if (member.membership !== "ban" && prevContent.membership === "ban") {
+    // The user ban was removed.
+
+    return {
+      body: `your ban has been lifted in the ${roomName}`,
+      isRead: false,
+      notificationId: eventId,
+      notificationTime: event.localTimestamp,
+      senderName: event.sender?.name,
+      avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
     }
   }
 

From fd0cc5445800f275c78edfc152bc70106cfc1b59 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 31 Mar 2024 17:11:49 -0400
Subject: [PATCH 37/62] feat: Implement mention for notification

---
 .../SidebarActions/useNotifications.ts        | 55 +++++++++++++++++--
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 986a1a66..b829137d 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -4,6 +4,8 @@ import useEventListener from "@/hooks/matrix/useEventListener"
 import {
   type MatrixClient,
   type MatrixEvent,
+  type Room,
+  RoomEvent,
   type RoomMember,
   RoomStateEvent,
 } from "matrix-js-sdk"
@@ -16,11 +18,11 @@ import {ButtonVariant} from "../Button"
 
 const useNotifications = () => {
   const {client} = useConnection()
+  const [notifications, setNotifications] = useState<NotificationProps[]>([])
+
   const {cachedNotifications, saveNotification, clearNotifications} =
     useCachedNotifications()
 
-  const [notifications, setNotifications] = useState<NotificationProps[]>([])
-
   const removeNotification = useCallback((notificationId: string) => {
     setNotifications(prevNotifications =>
       prevNotifications.filter(
@@ -87,7 +89,29 @@ const useNotifications = () => {
     setNotifications(newNotifications)
   }, [cachedNotifications, client, removeNotification])
 
-  useEventListener(RoomStateEvent.Members, (event, state, member) => {
+  useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
+    if (toStartOfTimeline) {
+      return // Ignore past events when starting sync.
+    }
+
+    if (room === undefined || client === null) {
+      return // If there is no room, the event may not be a mention event.
+    }
+
+    const notification = mentionEventNotificationTransformer(
+      client,
+      event,
+      room
+    )
+
+    if (notification === null) {
+      return
+    }
+
+    saveNotification(notification)
+  })
+
+  useEventListener(RoomStateEvent.Members, (event, _state, member) => {
     if (client === null || client.getUserId() !== member.userId) {
       return
     }
@@ -108,6 +132,30 @@ const useNotifications = () => {
   return {notifications, clearNotifications}
 }
 
+const mentionEventNotificationTransformer = (
+  client: MatrixClient,
+  event: MatrixEvent,
+  room: Room
+): LocalNotificationData | null => {
+  const eventId = event.getId()
+
+  if (
+    !event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId) ||
+    eventId === undefined
+  ) {
+    return null
+  }
+
+  return {
+    body: `mentioned you in room: ${room.name}`,
+    isRead: false,
+    notificationId: eventId,
+    notificationTime: event.localTimestamp,
+    avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+    senderName: event.sender?.name,
+  }
+}
+
 const membersEventNotificationTransformer = (
   event: MatrixEvent,
   client: MatrixClient,
@@ -119,7 +167,6 @@ const membersEventNotificationTransformer = (
   const prevContent = event.getPrevContent()
   const room = client.getRoom(event.getRoomId())
   const roomName = room?.name ?? "room"
-
   const hasReason = event.getContent().reason
   const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
 

From 1abd0a8c41288a68e920b192ab1cb02791d2f141 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 31 Mar 2024 17:15:07 -0400
Subject: [PATCH 38/62] feat: Upgrade `saveNotification` for
 `useCachedNotifications`

---
 .../SidebarActions/useCachedNotifications.ts  |  6 ++++-
 .../SidebarActions/useNotifications.ts        | 24 ++-----------------
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index f55c039c..7f843f20 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -23,7 +23,11 @@ const useCachedNotifications = () => {
   })
 
   const saveNotification = useCallback(
-    (notification: LocalNotificationData) => {
+    (notification: LocalNotificationData | null) => {
+      if (notification === null) {
+        return
+      }
+
       setNotifications(prevNotifications => {
         if (
           prevNotifications.some(
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index b829137d..bb00745a 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -98,17 +98,7 @@ const useNotifications = () => {
       return // If there is no room, the event may not be a mention event.
     }
 
-    const notification = mentionEventNotificationTransformer(
-      client,
-      event,
-      room
-    )
-
-    if (notification === null) {
-      return
-    }
-
-    saveNotification(notification)
+    saveNotification(mentionEventNotificationTransformer(client, event, room))
   })
 
   useEventListener(RoomStateEvent.Members, (event, _state, member) => {
@@ -116,17 +106,7 @@ const useNotifications = () => {
       return
     }
 
-    const notification = membersEventNotificationTransformer(
-      event,
-      client,
-      member
-    )
-
-    if (notification === null) {
-      return
-    }
-
-    saveNotification(notification)
+    saveNotification(membersEventNotificationTransformer(event, client, member))
   })
 
   return {notifications, clearNotifications}

From c6c3877d9b5d52915485d718ab0dce04557c5f80 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 31 Mar 2024 17:18:16 -0400
Subject: [PATCH 39/62] fix: Improve code for `NotificationsModal`

---
 src/components/SidebarActions/NotificationsModal.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 3cab0a41..66a2687b 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -23,8 +23,8 @@ const Notification: FC<NotificationProps> = ({
   body,
   notificationTime,
   actions,
-  avatarSenderName,
   senderName,
+  avatarSenderUrl,
 }) => {
   const userComponent =
     senderName === undefined ? undefined : (
@@ -40,7 +40,7 @@ const Notification: FC<NotificationProps> = ({
             isLarge={false}
             avatarType={AvatarType.Message}
             displayName={senderName}
-            avatarUrl={avatarSenderName}
+            avatarUrl={avatarSenderUrl}
           />
         </div>
       )}
@@ -80,12 +80,12 @@ const Notification: FC<NotificationProps> = ({
 
 export type NotificationsModalProps = {
   notifications: NotificationProps[]
-  onAllMaskAsRead: () => void
+  onMarkAllAsRead: () => void
 }
 
 const NotificationsModal: FC<NotificationsModalProps> = ({
   notifications,
-  onAllMaskAsRead,
+  onMarkAllAsRead,
 }) => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
 
@@ -110,7 +110,7 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
             clearActiveSidebarModal()
 
             // TODO: Temporarily, remove in the future.
-            onAllMaskAsRead()
+            onMarkAllAsRead()
           }}
           label="Mark all as read"
         />

From 54df4325c97aa62ee02ab599dd2acbf30f6ddce8 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 31 Mar 2024 18:08:16 -0400
Subject: [PATCH 40/62] feat: Implement power levels event for notifications

---
 src/components/RosterUser.tsx                 |  6 +-
 .../SidebarActions/useNotifications.ts        | 71 +++++++++++++++++--
 src/utils/util.ts                             | 15 ++--
 3 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/src/components/RosterUser.tsx b/src/components/RosterUser.tsx
index 95ed2023..382e7331 100644
--- a/src/components/RosterUser.tsx
+++ b/src/components/RosterUser.tsx
@@ -4,9 +4,9 @@ import UserProfile, {
 } from "./UserProfile"
 
 export enum UserPowerLevel {
-  Admin,
-  Moderator,
-  Member,
+  Admin = 100,
+  Moderator = 50,
+  Member = 0,
 }
 
 export type RosterUserProps = {
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index bb00745a..3f84f205 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -2,6 +2,7 @@ import {useCallback, useEffect, useState} from "react"
 import {type NotificationProps} from "./NotificationsModal"
 import useEventListener from "@/hooks/matrix/useEventListener"
 import {
+  EventType,
   type MatrixClient,
   type MatrixEvent,
   type Room,
@@ -13,8 +14,9 @@ import useConnection from "@/hooks/matrix/useConnection"
 import useCachedNotifications, {
   type LocalNotificationData,
 } from "./useCachedNotifications"
-import {assert, getImageUrl} from "@/utils/util"
+import {assert, AssertMessagesMoreUsed, getImageUrl} from "@/utils/util"
 import {ButtonVariant} from "../Button"
+import {UserPowerLevel} from "../RosterUser"
 
 const useNotifications = () => {
   const {client} = useConnection()
@@ -89,6 +91,17 @@ const useNotifications = () => {
     setNotifications(newNotifications)
   }, [cachedNotifications, client, removeNotification])
 
+  useEventListener(RoomStateEvent.Events, (event, state) => {
+    if (event.getType() !== EventType.RoomPowerLevels || client === null) {
+      return
+    }
+
+    // Handle power levels event for notifications.
+    saveNotification(
+      powerLevelsEventNotificationTransformer(client, event, state.roomId)
+    )
+  })
+
   useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
     if (toStartOfTimeline) {
       return // Ignore past events when starting sync.
@@ -112,6 +125,53 @@ const useNotifications = () => {
   return {notifications, clearNotifications}
 }
 
+const powerLevelsEventNotificationTransformer = (
+  client: MatrixClient,
+  event: MatrixEvent,
+  roomId: string
+): LocalNotificationData | null => {
+  const eventId = event.getId()
+  const userId = client.getUserId()
+  const roomName = client.getRoom(roomId)?.name
+  let powerLevel: string = "Member"
+  let body: string | null = null
+
+  assert(eventId !== undefined, AssertMessagesMoreUsed.EventIdNotFound)
+  assert(userId !== null, "My userId should not be undefined")
+  assert(roomName !== undefined, "The room must exist")
+
+  const currentLevels: number = event.getContent().users[userId]
+  const previousLevels: number = event.getPrevContent().users[userId] || 0
+
+  if (currentLevels === UserPowerLevel.Admin) {
+    powerLevel = "Admin"
+  } else if (
+    currentLevels >= UserPowerLevel.Moderator &&
+    currentLevels < UserPowerLevel.Admin
+  ) {
+    powerLevel = "Moderator"
+  }
+
+  if (currentLevels > previousLevels) {
+    body = `You have been promoted to ${powerLevel} at ${roomName}`
+  } else if (currentLevels < previousLevels) {
+    body = `You has degraded you to ${powerLevel} at ${roomName}`
+  }
+
+  if (body === null) {
+    return null
+  }
+
+  return {
+    body,
+    isRead: false,
+    notificationId: eventId,
+    notificationTime: event.localTimestamp,
+    avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+    senderName: event.sender?.name,
+  }
+}
+
 const mentionEventNotificationTransformer = (
   client: MatrixClient,
   event: MatrixEvent,
@@ -119,10 +179,9 @@ const mentionEventNotificationTransformer = (
 ): LocalNotificationData | null => {
   const eventId = event.getId()
 
-  if (
-    !event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId) ||
-    eventId === undefined
-  ) {
+  assert(eventId !== undefined, AssertMessagesMoreUsed.EventIdNotFound)
+
+  if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
     return null
   }
 
@@ -150,7 +209,7 @@ const membersEventNotificationTransformer = (
   const hasReason = event.getContent().reason
   const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
 
-  assert(eventId !== undefined, "eventId should not be undefined")
+  assert(eventId !== undefined, AssertMessagesMoreUsed.EventIdNotFound)
 
   switch (event.getContent().membership) {
     case "leave": {
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 64fba54c..e7484096 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -38,6 +38,10 @@ export function timeFormatter(timestamp: number): string {
   return dayjs(timestamp).format("hh:mm a")
 }
 
+export enum AssertMessagesMoreUsed {
+  EventIdNotFound = "eventId should not be undefined",
+}
+
 export function assert(
   condition: boolean,
   reasoning: string
@@ -216,6 +220,7 @@ export function deleteMessage(
   })
 }
 
+// TODO: Check why existing two const for admin power level.
 const MIN_ADMIN_POWER_LEVEL = 50
 
 export function isUserRoomAdmin(room: Room, client: MatrixClient): boolean {
@@ -266,18 +271,18 @@ export async function getRoomMembers(
   const users = Object.entries(powerLevels)
   const adminUsersId: string[] = []
 
-  const MIN_MOD_POWER_LEVEL = 50
-  const MIN_ADMIN_POWER_LEVEL = 100
-
   for (const [adminId, powerLevel] of users) {
-    if (typeof powerLevel !== "number" || powerLevel < MIN_MOD_POWER_LEVEL) {
+    if (
+      typeof powerLevel !== "number" ||
+      powerLevel < UserPowerLevel.Moderator
+    ) {
       continue
     }
 
     adminUsersId.push(adminId)
     const member = joinedMembers[adminId]
     const displayName = normalizeName(member.display_name)
-    const isAdmin = powerLevel === MIN_ADMIN_POWER_LEVEL
+    const isAdmin = powerLevel === UserPowerLevel.Admin
 
     membersProperty.push({
       // TODO: Use actual props instead of dummy data.

From 4906d161eb153ec2ae0d9a7aa7bbb51396c6494a Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sun, 31 Mar 2024 20:23:42 -0400
Subject: [PATCH 41/62] feat: Implement deploy-pages for deployment

---
 .github/workflows/deploy-pages.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .github/workflows/deploy-pages.yml

diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
new file mode 100644
index 00000000..398086ab
--- /dev/null
+++ b/.github/workflows/deploy-pages.yml
@@ -0,0 +1,26 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Install Dependencies
+      run: npm install
+
+    - name: Build Project
+      run: npm run build
+
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./src  # Replace with the directory where Vite build outputs files, if different

From 4eef530b6c2b759394208f30302f45bdbf1f0017 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 11:40:00 -0400
Subject: [PATCH 42/62] refactor: Upgrade deploy-pages

---
 .../workflows/{deploy-pages.yml => deploy-push-master.yml}  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename .github/workflows/{deploy-pages.yml => deploy-push-master.yml} (73%)

diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-push-master.yml
similarity index 73%
rename from .github/workflows/deploy-pages.yml
rename to .github/workflows/deploy-push-master.yml
index 398086ab..5158bc41 100644
--- a/.github/workflows/deploy-pages.yml
+++ b/.github/workflows/deploy-push-master.yml
@@ -14,13 +14,13 @@ jobs:
       uses: actions/checkout@v2
 
     - name: Install Dependencies
-      run: npm install
+      run: yarn
 
     - name: Build Project
-      run: npm run build
+      run: yarn build
 
     - name: Deploy to GitHub Pages
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./src  # Replace with the directory where Vite build outputs files, if different
+        publish_dir: ./dist

From 4d8d081755c3cbfcd06a0a7f31614a8df0b5c6bb Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 11:41:58 -0400
Subject: [PATCH 43/62] feat: Implement deploy from dev for github actions

---
 .github/workflows/deploy-pr-dev.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .github/workflows/deploy-pr-dev.yml

diff --git a/.github/workflows/deploy-pr-dev.yml b/.github/workflows/deploy-pr-dev.yml
new file mode 100644
index 00000000..a2fc84df
--- /dev/null
+++ b/.github/workflows/deploy-pr-dev.yml
@@ -0,0 +1,26 @@
+name: Build and Deploy on PR to Dev
+
+on:
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  build-and-deploy-on-pr:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Install Dependencies
+      run: yarn
+
+    - name: Build Project
+      run: yarn build
+
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist

From ca3b6e6e1f9119450c8a2460302e972c5fe5112b Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 12:26:45 -0400
Subject: [PATCH 44/62] fix: Resolve PR comments

---
 .../SidebarActions/useNotifications.ts        | 24 +++++++++----------
 src/utils/util.ts                             |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 3f84f205..31732736 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -14,7 +14,7 @@ import useConnection from "@/hooks/matrix/useConnection"
 import useCachedNotifications, {
   type LocalNotificationData,
 } from "./useCachedNotifications"
-import {assert, AssertMessagesMoreUsed, getImageUrl} from "@/utils/util"
+import {assert, CommonAssertion, getImageUrl} from "@/utils/util"
 import {ButtonVariant} from "../Button"
 import {UserPowerLevel} from "../RosterUser"
 
@@ -98,7 +98,7 @@ const useNotifications = () => {
 
     // Handle power levels event for notifications.
     saveNotification(
-      powerLevelsEventNotificationTransformer(client, event, state.roomId)
+      getNotificationFromPowerLevelEvent(client, event, state.roomId)
     )
   })
 
@@ -111,7 +111,7 @@ const useNotifications = () => {
       return // If there is no room, the event may not be a mention event.
     }
 
-    saveNotification(mentionEventNotificationTransformer(client, event, room))
+    saveNotification(getNotificationFromMentionEvent(client, event, room))
   })
 
   useEventListener(RoomStateEvent.Members, (event, _state, member) => {
@@ -119,13 +119,13 @@ const useNotifications = () => {
       return
     }
 
-    saveNotification(membersEventNotificationTransformer(event, client, member))
+    saveNotification(getNotificationFromMembersEvent(event, client, member))
   })
 
   return {notifications, clearNotifications}
 }
 
-const powerLevelsEventNotificationTransformer = (
+const getNotificationFromPowerLevelEvent = (
   client: MatrixClient,
   event: MatrixEvent,
   roomId: string
@@ -136,7 +136,7 @@ const powerLevelsEventNotificationTransformer = (
   let powerLevel: string = "Member"
   let body: string | null = null
 
-  assert(eventId !== undefined, AssertMessagesMoreUsed.EventIdNotFound)
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
   assert(userId !== null, "My userId should not be undefined")
   assert(roomName !== undefined, "The room must exist")
 
@@ -153,9 +153,9 @@ const powerLevelsEventNotificationTransformer = (
   }
 
   if (currentLevels > previousLevels) {
-    body = `You have been promoted to ${powerLevel} at ${roomName}`
+    body = `you have been promoted to ${powerLevel} at ${roomName}`
   } else if (currentLevels < previousLevels) {
-    body = `You has degraded you to ${powerLevel} at ${roomName}`
+    body = `you has demoted you to ${powerLevel} at ${roomName}`
   }
 
   if (body === null) {
@@ -172,14 +172,14 @@ const powerLevelsEventNotificationTransformer = (
   }
 }
 
-const mentionEventNotificationTransformer = (
+const getNotificationFromMentionEvent = (
   client: MatrixClient,
   event: MatrixEvent,
   room: Room
 ): LocalNotificationData | null => {
   const eventId = event.getId()
 
-  assert(eventId !== undefined, AssertMessagesMoreUsed.EventIdNotFound)
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
   if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
     return null
@@ -195,7 +195,7 @@ const mentionEventNotificationTransformer = (
   }
 }
 
-const membersEventNotificationTransformer = (
+const getNotificationFromMembersEvent = (
   event: MatrixEvent,
   client: MatrixClient,
   member: RoomMember
@@ -209,7 +209,7 @@ const membersEventNotificationTransformer = (
   const hasReason = event.getContent().reason
   const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
 
-  assert(eventId !== undefined, AssertMessagesMoreUsed.EventIdNotFound)
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
   switch (event.getContent().membership) {
     case "leave": {
diff --git a/src/utils/util.ts b/src/utils/util.ts
index e7484096..2294752b 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -38,7 +38,7 @@ export function timeFormatter(timestamp: number): string {
   return dayjs(timestamp).format("hh:mm a")
 }
 
-export enum AssertMessagesMoreUsed {
+export enum CommonAssertion {
   EventIdNotFound = "eventId should not be undefined",
 }
 

From c2c359054ae9d2937d0cccf9d1797ecc07f4602e Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 21:39:48 -0400
Subject: [PATCH 45/62] feat: Implement delete notification action

---
 src/components/IconButton.tsx                 |  4 ++-
 .../SidebarActions/NotificationsModal.tsx     | 16 ++++++++--
 .../SidebarActions/SidebarActions.tsx         |  8 +++--
 .../SidebarActions/useCachedNotifications.ts  | 30 ++++++++++++-------
 .../SidebarActions/useNotifications.ts        | 26 ++++++++--------
 5 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index b5c2647d..e2c9f5b5 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -7,6 +7,7 @@ export type IconButtonProps = {
   onClick: () => void
   tooltip: string
   Icon: IconType
+  size?: number
   color?: string
   isDisabled?: boolean
   isDotVisible?: boolean
@@ -19,6 +20,7 @@ const IconButton: FC<IconButtonProps> = ({
   color,
   isDisabled,
   isDotVisible,
+  size,
   className,
 }) => {
   const isDisabledClass = isDisabled
@@ -38,7 +40,7 @@ const IconButton: FC<IconButtonProps> = ({
         className
       )}>
       <NotificationDot isVisible={isDotVisible ?? false}>
-        <Icon style={{color}} size={20} className="text-neutral-300" />
+        <Icon style={{color}} size={size ?? 20} className="text-neutral-300" />
       </NotificationDot>
     </div>
   )
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 66a2687b..87e9df04 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -1,6 +1,6 @@
 import {stringToColor, timeFormatter} from "@/utils/util"
 import {type FC} from "react"
-import {IoCloseCircle, IoTime} from "react-icons/io5"
+import {IoCloseCircle, IoRemove, IoTime, IoTrash} from "react-icons/io5"
 import AvatarImage, {AvatarType} from "../Avatar"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
@@ -16,6 +16,7 @@ export type NotificationActions = {
 }
 
 export interface NotificationProps extends LocalNotificationData {
+  onDelete: () => void
   actions?: NotificationActions[]
 }
 
@@ -25,6 +26,7 @@ const Notification: FC<NotificationProps> = ({
   actions,
   senderName,
   avatarSenderUrl,
+  onDelete,
 }) => {
   const userComponent =
     senderName === undefined ? undefined : (
@@ -34,7 +36,7 @@ const Notification: FC<NotificationProps> = ({
   return (
     <div className="flex gap-2 p-2">
       {senderName !== undefined && (
-        <div className="size-full max-h-10 max-w-10 overflow-hidden rounded-lg">
+        <div className="size-full max-h-8 max-w-8 overflow-hidden rounded-lg">
           <AvatarImage
             isRounded={false}
             isLarge={false}
@@ -47,7 +49,7 @@ const Notification: FC<NotificationProps> = ({
 
       <div className="flex flex-col gap-1">
         <div className="flex flex-row">
-          <Typography>
+          <Typography variant={TypographyVariant.P}>
             {userComponent} {body}
           </Typography>
         </div>
@@ -74,6 +76,14 @@ const Notification: FC<NotificationProps> = ({
           </div>
         )}
       </div>
+
+      <IconButton
+        className="ml-auto size-min"
+        size={14}
+        onClick={onDelete}
+        tooltip="Remove notification"
+        Icon={IoTrash}
+      />
     </div>
   )
 }
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 6b745277..c723a592 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -19,7 +19,7 @@ import useNotifications from "./useNotifications"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
-  const {notifications, clearNotifications} = useNotifications()
+  const {notifications} = useNotifications()
 
   const activeModalElement = useMemo(() => {
     if (sidebarModalActive === null) {
@@ -34,12 +34,14 @@ const SidebarModalsHandler: FC = () => {
         return (
           <NotificationsModal
             notifications={notifications}
-            onAllMaskAsRead={clearNotifications}
+            onMarkAllAsRead={() => {
+              // TODO: Handle here marks all as read.
+            }}
           />
         )
       }
     }
-  }, [clearNotifications, notifications, sidebarModalActive])
+  }, [notifications, sidebarModalActive])
 
   return (
     <>
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 7f843f20..ee3cce6b 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -22,6 +22,21 @@ const useCachedNotifications = () => {
     return savedNotifications ? JSON.parse(savedNotifications) : []
   })
 
+  const deleteNotificationById = useCallback((notificationId: string) => {
+    setNotifications(prevNotifications => {
+      const updatedNotifications = prevNotifications.filter(
+        notification => notification.notificationId !== notificationId
+      )
+
+      localStorage.setItem(
+        NOTIFICATIONS_LOCAL_STORAGE_KEY,
+        JSON.stringify(updatedNotifications)
+      )
+
+      return updatedNotifications
+    })
+  }, [])
+
   const saveNotification = useCallback(
     (notification: LocalNotificationData | null) => {
       if (notification === null) {
@@ -51,18 +66,11 @@ const useCachedNotifications = () => {
     []
   )
 
-  const clearNotifications = () => {
-    const emptyNotifications: LocalNotificationData[] = []
-
-    setNotifications(emptyNotifications)
-
-    localStorage.setItem(
-      NOTIFICATIONS_LOCAL_STORAGE_KEY,
-      JSON.stringify(emptyNotifications)
-    )
+  return {
+    cachedNotifications,
+    saveNotification,
+    deleteNotificationById,
   }
-
-  return {cachedNotifications, saveNotification, clearNotifications}
 }
 
 export default useCachedNotifications
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 31732736..26e9a315 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from "react"
+import {useEffect, useState} from "react"
 import {type NotificationProps} from "./NotificationsModal"
 import useEventListener from "@/hooks/matrix/useEventListener"
 import {
@@ -22,17 +22,9 @@ const useNotifications = () => {
   const {client} = useConnection()
   const [notifications, setNotifications] = useState<NotificationProps[]>([])
 
-  const {cachedNotifications, saveNotification, clearNotifications} =
+  const {cachedNotifications, saveNotification, deleteNotificationById} =
     useCachedNotifications()
 
-  const removeNotification = useCallback((notificationId: string) => {
-    setNotifications(prevNotifications =>
-      prevNotifications.filter(
-        notification => notification.notificationId !== notificationId
-      )
-    )
-  }, [])
-
   useEffect(() => {
     if (client === null) {
       return
@@ -59,7 +51,7 @@ const useNotifications = () => {
             onClick: () => {
               void client.joinRoom(invitedRoom.roomId).then(room => {
                 if (room.getMyMembership() === "join") {
-                  removeNotification(invitedRoom.roomId)
+                  deleteNotificationById(invitedRoom.roomId)
                 }
               })
             },
@@ -68,12 +60,15 @@ const useNotifications = () => {
             name: "Decline",
             onClick: () => {
               void client.leave(invitedRoom.roomId).then(() => {
-                removeNotification(invitedRoom.roomId)
+                deleteNotificationById(invitedRoom.roomId)
               })
             },
             actionVariant: ButtonVariant.TextLink,
           },
         ],
+        onDelete: () => {
+          deleteNotificationById(invitedRoom.roomId)
+        },
       })
     }
 
@@ -85,11 +80,14 @@ const useNotifications = () => {
         notificationId: notification.notificationId,
         senderName: notification.senderName,
         avatarSenderUrl: notification.avatarSenderUrl,
+        onDelete: () => {
+          deleteNotificationById(notification.notificationId)
+        },
       })
     }
 
     setNotifications(newNotifications)
-  }, [cachedNotifications, client, removeNotification])
+  }, [cachedNotifications, client, deleteNotificationById])
 
   useEventListener(RoomStateEvent.Events, (event, state) => {
     if (event.getType() !== EventType.RoomPowerLevels || client === null) {
@@ -122,7 +120,7 @@ const useNotifications = () => {
     saveNotification(getNotificationFromMembersEvent(event, client, member))
   })
 
-  return {notifications, clearNotifications}
+  return {notifications}
 }
 
 const getNotificationFromPowerLevelEvent = (

From ab1375e8457bc7ea0667cf025a3d4d93fd777fde Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 22:25:10 -0400
Subject: [PATCH 46/62] feat: Implement mark as read for notifications

---
 .../SidebarActions/NotificationsModal.tsx     | 31 ++++++++++++++-----
 .../SidebarActions/useCachedNotifications.ts  | 16 ++++++++++
 .../SidebarActions/useNotifications.ts        | 21 +++++++++++--
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 87e9df04..9e2bb52a 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -1,6 +1,6 @@
 import {stringToColor, timeFormatter} from "@/utils/util"
 import {type FC} from "react"
-import {IoCloseCircle, IoRemove, IoTime, IoTrash} from "react-icons/io5"
+import {IoCheckbox, IoCloseCircle, IoTime, IoTrash} from "react-icons/io5"
 import AvatarImage, {AvatarType} from "../Avatar"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
@@ -17,6 +17,7 @@ export type NotificationActions = {
 
 export interface NotificationProps extends LocalNotificationData {
   onDelete: () => void
+  onMarkAsRead: () => void
   actions?: NotificationActions[]
 }
 
@@ -27,6 +28,8 @@ const Notification: FC<NotificationProps> = ({
   senderName,
   avatarSenderUrl,
   onDelete,
+  isRead,
+  onMarkAsRead,
 }) => {
   const userComponent =
     senderName === undefined ? undefined : (
@@ -77,13 +80,25 @@ const Notification: FC<NotificationProps> = ({
         )}
       </div>
 
-      <IconButton
-        className="ml-auto size-min"
-        size={14}
-        onClick={onDelete}
-        tooltip="Remove notification"
-        Icon={IoTrash}
-      />
+      <div className="ml-auto flex">
+        {!isRead && (
+          <IconButton
+            className="size-min"
+            size={14}
+            onClick={onMarkAsRead}
+            tooltip="Remove notification"
+            Icon={IoCheckbox}
+          />
+        )}
+
+        <IconButton
+          className="size-min"
+          size={14}
+          onClick={onDelete}
+          tooltip="Remove notification"
+          Icon={IoTrash}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index ee3cce6b..911f491b 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -22,6 +22,21 @@ const useCachedNotifications = () => {
     return savedNotifications ? JSON.parse(savedNotifications) : []
   })
 
+  const markAsReadByNotificationId = useCallback((notificationId: string) => {
+    setNotifications(prevNotifications =>
+      prevNotifications.map(notification => {
+        if (notification.notificationId === notificationId) {
+          return {
+            ...notification,
+            isRead: true,
+          }
+        }
+
+        return notification
+      })
+    )
+  }, [])
+
   const deleteNotificationById = useCallback((notificationId: string) => {
     setNotifications(prevNotifications => {
       const updatedNotifications = prevNotifications.filter(
@@ -70,6 +85,7 @@ const useCachedNotifications = () => {
     cachedNotifications,
     saveNotification,
     deleteNotificationById,
+    markAsReadByNotificationId,
   }
 }
 
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 26e9a315..92e40c3b 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -22,8 +22,12 @@ const useNotifications = () => {
   const {client} = useConnection()
   const [notifications, setNotifications] = useState<NotificationProps[]>([])
 
-  const {cachedNotifications, saveNotification, deleteNotificationById} =
-    useCachedNotifications()
+  const {
+    cachedNotifications,
+    saveNotification,
+    deleteNotificationById,
+    markAsReadByNotificationId,
+  } = useCachedNotifications()
 
   useEffect(() => {
     if (client === null) {
@@ -69,6 +73,9 @@ const useNotifications = () => {
         onDelete: () => {
           deleteNotificationById(invitedRoom.roomId)
         },
+        onMarkAsRead() {
+          markAsReadByNotificationId(invitedRoom.roomId)
+        },
       })
     }
 
@@ -83,11 +90,19 @@ const useNotifications = () => {
         onDelete: () => {
           deleteNotificationById(notification.notificationId)
         },
+        onMarkAsRead: () => {
+          markAsReadByNotificationId(notification.notificationId)
+        },
       })
     }
 
     setNotifications(newNotifications)
-  }, [cachedNotifications, client, deleteNotificationById])
+  }, [
+    cachedNotifications,
+    client,
+    deleteNotificationById,
+    markAsReadByNotificationId,
+  ])
 
   useEventListener(RoomStateEvent.Events, (event, state) => {
     if (event.getType() !== EventType.RoomPowerLevels || client === null) {

From 291ec1138094a9ce754ffc410340037aadb3b7ed Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 23:05:46 -0400
Subject: [PATCH 47/62] feat: Implement `markAsReadAllNotifications` function
 for `useCachedNotifications`

---
 .../SidebarActions/NotificationsModal.tsx     | 37 ++++++++++++++++---
 .../SidebarActions/SidebarActions.tsx         |  8 ++--
 .../SidebarActions/useCachedNotifications.ts  | 32 ++++++++++++++--
 .../SidebarActions/useNotifications.ts        |  5 ++-
 4 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 9e2bb52a..d73ca400 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -1,5 +1,5 @@
 import {stringToColor, timeFormatter} from "@/utils/util"
-import {type FC} from "react"
+import {useMemo, type FC} from "react"
 import {IoCheckbox, IoCloseCircle, IoTime, IoTrash} from "react-icons/io5"
 import AvatarImage, {AvatarType} from "../Avatar"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
@@ -37,7 +37,11 @@ const Notification: FC<NotificationProps> = ({
     )
 
   return (
-    <div className="flex gap-2 p-2">
+    <div
+      className={twMerge(
+        "flex gap-2 p-2",
+        !isRead && "rounded-lg bg-slate-100"
+      )}>
       {senderName !== undefined && (
         <div className="size-full max-h-8 max-w-8 overflow-hidden rounded-lg">
           <AvatarImage
@@ -114,6 +118,30 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
 }) => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
 
+  const notificationsUnread = useMemo(() => {
+    const notificationsUnreadProps: React.JSX.Element[] = []
+
+    for (const notification of notifications) {
+      if (!notification.isRead) {
+        notificationsUnreadProps.push(<Notification {...notification} />)
+      }
+    }
+
+    return notificationsUnreadProps
+  }, [notifications])
+
+  const notificationsMarkAsRead = useMemo(() => {
+    const notificationsUnreadProps: React.JSX.Element[] = []
+
+    for (const notification of notifications) {
+      if (notification.isRead) {
+        notificationsUnreadProps.push(<Notification {...notification} />)
+      }
+    }
+
+    return notificationsUnreadProps
+  }, [notifications])
+
   return (
     <div
       className={twMerge(
@@ -148,9 +176,8 @@ const NotificationsModal: FC<NotificationsModalProps> = ({
       </div>
 
       <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
-        {notifications.map(notification => (
-          <Notification {...notification} />
-        ))}
+        <div className="bg-slate-100">{notificationsUnread}</div>
+        {notificationsMarkAsRead}
       </div>
     </div>
   )
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index c723a592..015025dd 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -19,7 +19,7 @@ import useNotifications from "./useNotifications"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
-  const {notifications} = useNotifications()
+  const {notifications, markAsReadAllNotifications} = useNotifications()
 
   const activeModalElement = useMemo(() => {
     if (sidebarModalActive === null) {
@@ -34,14 +34,12 @@ const SidebarModalsHandler: FC = () => {
         return (
           <NotificationsModal
             notifications={notifications}
-            onMarkAllAsRead={() => {
-              // TODO: Handle here marks all as read.
-            }}
+            onMarkAllAsRead={markAsReadAllNotifications}
           />
         )
       }
     }
-  }, [notifications, sidebarModalActive])
+  }, [markAsReadAllNotifications, notifications, sidebarModalActive])
 
   return (
     <>
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 911f491b..f17892fb 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -22,9 +22,27 @@ const useCachedNotifications = () => {
     return savedNotifications ? JSON.parse(savedNotifications) : []
   })
 
+  const markAsReadAllNotifications = useCallback(() => {
+    setNotifications(prevNotifications => {
+      const updatedNotifications = prevNotifications.map(notification => {
+        return {
+          ...notification,
+          isRead: true,
+        }
+      })
+
+      localStorage.setItem(
+        NOTIFICATIONS_LOCAL_STORAGE_KEY,
+        JSON.stringify(updatedNotifications)
+      )
+
+      return updatedNotifications
+    })
+  }, [])
+
   const markAsReadByNotificationId = useCallback((notificationId: string) => {
-    setNotifications(prevNotifications =>
-      prevNotifications.map(notification => {
+    setNotifications(prevNotifications => {
+      const updatedNotifications = prevNotifications.map(notification => {
         if (notification.notificationId === notificationId) {
           return {
             ...notification,
@@ -34,7 +52,14 @@ const useCachedNotifications = () => {
 
         return notification
       })
-    )
+
+      localStorage.setItem(
+        NOTIFICATIONS_LOCAL_STORAGE_KEY,
+        JSON.stringify(updatedNotifications)
+      )
+
+      return updatedNotifications
+    })
   }, [])
 
   const deleteNotificationById = useCallback((notificationId: string) => {
@@ -86,6 +111,7 @@ const useCachedNotifications = () => {
     saveNotification,
     deleteNotificationById,
     markAsReadByNotificationId,
+    markAsReadAllNotifications,
   }
 }
 
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 92e40c3b..4248e84e 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -27,6 +27,7 @@ const useNotifications = () => {
     saveNotification,
     deleteNotificationById,
     markAsReadByNotificationId,
+    markAsReadAllNotifications,
   } = useCachedNotifications()
 
   useEffect(() => {
@@ -135,7 +136,7 @@ const useNotifications = () => {
     saveNotification(getNotificationFromMembersEvent(event, client, member))
   })
 
-  return {notifications}
+  return {notifications, markAsReadAllNotifications}
 }
 
 const getNotificationFromPowerLevelEvent = (
@@ -195,6 +196,8 @@ const getNotificationFromMentionEvent = (
   assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
   if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
+    // TODO: If the room is encrypted, you will have to decrypt the message first.
+    // While return null.
     return null
   }
 

From 5ee925c2ba9124cf67f3bb737045d03033eb3186 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Mon, 1 Apr 2024 23:49:46 -0400
Subject: [PATCH 48/62] feat: Implement `useNotificationsStateStore`

---
 .../SidebarActions/SidebarActions.tsx         |  5 ++--
 .../SidebarActions/useCachedNotifications.ts  | 23 ++++++++++++++++++-
 .../SidebarActions/useSidebarActions.ts       |  3 +++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 015025dd..7f02bb41 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -58,7 +58,8 @@ export type SidebarActionsProps = {
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {onLogout, setActiveSidebarModal} = useSidebarActions()
+  const {onLogout, setActiveSidebarModal, containsUnreadNotifications} =
+    useSidebarActions()
 
   return (
     <>
@@ -87,7 +88,7 @@ const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
           }}
           tooltip="Notifications"
           Icon={IoNotificationsSharp}
-          isDotVisible
+          isDotVisible={containsUnreadNotifications}
         />
 
         <IconButton
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index f17892fb..ceb553b6 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -1,4 +1,5 @@
-import {useCallback, useState} from "react"
+import {useCallback, useEffect, useState} from "react"
+import {create} from "zustand"
 
 export type LocalNotificationData = {
   body: string
@@ -11,7 +12,21 @@ export type LocalNotificationData = {
 
 const NOTIFICATIONS_LOCAL_STORAGE_KEY = "notifications"
 
+type NotificationsState = {
+  containsUnreadNotifications: boolean
+  refreshContainsUnreadNotifications: (newValue: boolean) => void
+}
+
+export const useNotificationsStateStore = create<NotificationsState>(set => ({
+  containsUnreadNotifications: false,
+  refreshContainsUnreadNotifications: newValue => {
+    set(_state => ({containsUnreadNotifications: newValue}))
+  },
+}))
+
 const useCachedNotifications = () => {
+  const {refreshContainsUnreadNotifications} = useNotificationsStateStore()
+
   const [cachedNotifications, setNotifications] = useState<
     LocalNotificationData[]
   >(() => {
@@ -22,6 +37,12 @@ const useCachedNotifications = () => {
     return savedNotifications ? JSON.parse(savedNotifications) : []
   })
 
+  useEffect(() => {
+    refreshContainsUnreadNotifications(
+      cachedNotifications.some(notification => !notification.isRead)
+    )
+  }, [cachedNotifications, refreshContainsUnreadNotifications])
+
   const markAsReadAllNotifications = useCallback(() => {
     setNotifications(prevNotifications => {
       const updatedNotifications = prevNotifications.map(notification => {
diff --git a/src/components/SidebarActions/useSidebarActions.ts b/src/components/SidebarActions/useSidebarActions.ts
index 25bbafdb..9f031c5e 100644
--- a/src/components/SidebarActions/useSidebarActions.ts
+++ b/src/components/SidebarActions/useSidebarActions.ts
@@ -3,6 +3,7 @@ import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
 import {useCallback} from "react"
 import {create} from "zustand"
+import {useNotificationsStateStore} from "./useCachedNotifications"
 
 export enum SidebarModals {
   DirectMessages,
@@ -29,6 +30,7 @@ const useSidebarActions = () => {
   const {disconnect} = useConnection()
   const navigate = useNavigate()
   const {setActiveSidebarModal} = useSidebarModalActiveStore()
+  const {containsUnreadNotifications} = useNotificationsStateStore()
 
   const onLogout = useCallback(async () => {
     await disconnect()
@@ -38,6 +40,7 @@ const useSidebarActions = () => {
   return {
     onLogout,
     setActiveSidebarModal,
+    containsUnreadNotifications,
   }
 }
 

From 82ef5d2adaeca09c95e71939f1323bfa2e4f164a Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Tue, 2 Apr 2024 15:01:30 -0400
Subject: [PATCH 49/62] fix: Fix PR comments

---
 src/components/SidebarActions/SidebarActions.tsx        | 5 +++--
 src/components/SidebarActions/useCachedNotifications.ts | 1 +
 src/components/SidebarActions/useSidebarActions.ts      | 3 ---
 src/utils/util.ts                                       | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 7f02bb41..13cc67b5 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -16,6 +16,7 @@ import DirectMessageModal from "./DirectMessageModal"
 import NotificationsModal from "./NotificationsModal"
 import Modal from "../Modal"
 import useNotifications from "./useNotifications"
+import {useNotificationsStateStore} from "./useCachedNotifications"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
@@ -58,8 +59,8 @@ export type SidebarActionsProps = {
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {onLogout, setActiveSidebarModal, containsUnreadNotifications} =
-    useSidebarActions()
+  const {containsUnreadNotifications} = useNotificationsStateStore()
+  const {onLogout, setActiveSidebarModal} = useSidebarActions()
 
   return (
     <>
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index ceb553b6..19f556c4 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -38,6 +38,7 @@ const useCachedNotifications = () => {
   })
 
   useEffect(() => {
+    // Check if you have unread notifications with the `some` method and it will refresh the global status of notifications.
     refreshContainsUnreadNotifications(
       cachedNotifications.some(notification => !notification.isRead)
     )
diff --git a/src/components/SidebarActions/useSidebarActions.ts b/src/components/SidebarActions/useSidebarActions.ts
index 9f031c5e..25bbafdb 100644
--- a/src/components/SidebarActions/useSidebarActions.ts
+++ b/src/components/SidebarActions/useSidebarActions.ts
@@ -3,7 +3,6 @@ import {useNavigate} from "react-router-dom"
 import {ViewPath} from "@/utils/util"
 import {useCallback} from "react"
 import {create} from "zustand"
-import {useNotificationsStateStore} from "./useCachedNotifications"
 
 export enum SidebarModals {
   DirectMessages,
@@ -30,7 +29,6 @@ const useSidebarActions = () => {
   const {disconnect} = useConnection()
   const navigate = useNavigate()
   const {setActiveSidebarModal} = useSidebarModalActiveStore()
-  const {containsUnreadNotifications} = useNotificationsStateStore()
 
   const onLogout = useCallback(async () => {
     await disconnect()
@@ -40,7 +38,6 @@ const useSidebarActions = () => {
   return {
     onLogout,
     setActiveSidebarModal,
-    containsUnreadNotifications,
   }
 }
 
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 2294752b..fd0f53e9 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -39,7 +39,7 @@ export function timeFormatter(timestamp: number): string {
 }
 
 export enum CommonAssertion {
-  EventIdNotFound = "eventId should not be undefined",
+  EventIdNotFound = "To confirm that an event happened, event id should not be undefined.",
 }
 
 export function assert(

From 32f30f51828bc0525ccc00ad9054f6a98fa08cb1 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Wed, 3 Apr 2024 11:15:37 -0400
Subject: [PATCH 50/62] feat: Implement handling directs room for notifications

---
 .../SidebarActions/useNotifications.ts        | 23 ++++++++++---
 src/utils/util.ts                             | 33 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 4248e84e..097e656c 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -14,7 +14,12 @@ import useConnection from "@/hooks/matrix/useConnection"
 import useCachedNotifications, {
   type LocalNotificationData,
 } from "./useCachedNotifications"
-import {assert, CommonAssertion, getImageUrl} from "@/utils/util"
+import {
+  assert,
+  checkIsDirectRoom,
+  CommonAssertion,
+  getImageUrl,
+} from "@/utils/util"
 import {ButtonVariant} from "../Button"
 import {UserPowerLevel} from "../RosterUser"
 
@@ -43,11 +48,18 @@ const useNotifications = () => {
       .filter(room => room.getMyMembership() === "invite")
 
     for (const invitedRoom of invitedRooms) {
+      const isDirectRoom = checkIsDirectRoom(client, invitedRoom)
+      const inviteSenderMember = invitedRoom.getAvatarFallbackMember()
+
+      const avatarUrl = isDirectRoom
+        ? inviteSenderMember?.getMxcAvatarUrl()
+        : invitedRoom.getMxcAvatarUrl()
+
       newNotifications.push({
         body: "invited you to join this room",
         notificationId: invitedRoom.roomId,
         notificationTime: Date.now(),
-        avatarSenderUrl: getImageUrl(invitedRoom.getMxcAvatarUrl(), client),
+        avatarSenderUrl: getImageUrl(avatarUrl, client),
         senderName: invitedRoom.name,
         isRead: false,
         actions: [
@@ -65,6 +77,7 @@ const useNotifications = () => {
             name: "Decline",
             onClick: () => {
               void client.leave(invitedRoom.roomId).then(() => {
+                // TODO: Check because with direct rooms it does not delete the notification.
                 deleteNotificationById(invitedRoom.roomId)
               })
             },
@@ -118,11 +131,13 @@ const useNotifications = () => {
 
   useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
     if (toStartOfTimeline) {
-      return // Ignore past events when starting sync.
+      // Ignore past events when starting sync.
+      return
     }
 
     if (room === undefined || client === null) {
-      return // If there is no room, the event may not be a mention event.
+      // If there is no room, the event may not be a mention event.
+      return
     }
 
     saveNotification(getNotificationFromMentionEvent(client, event, room))
diff --git a/src/utils/util.ts b/src/utils/util.ts
index fd0f53e9..2d51b851 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -1,7 +1,13 @@
 import {type RosterUserProps, UserPowerLevel} from "@/components/RosterUser"
 import {UserStatus} from "@/components/UserProfile"
 import dayjs from "dayjs"
-import {type Room, type MatrixClient, EventTimeline} from "matrix-js-sdk"
+import {
+  type Room,
+  type MatrixClient,
+  EventTimeline,
+  Direction,
+  EventType,
+} from "matrix-js-sdk"
 import {type FileContent} from "use-file-picker/dist/interfaces"
 
 export enum ViewPath {
@@ -146,6 +152,31 @@ export async function getImage(data: string): Promise<HTMLImageElement> {
   })
 }
 
+// TODO: Is temporary, change it when the matrix js sdk is updated.
+export function checkIsDirectRoom(
+  client: MatrixClient | null,
+  room: Room
+): boolean {
+  if (client === null) {
+    return false
+  }
+
+  const myUserId = client.getUserId()
+
+  assert(myUserId !== null, "The client must be logged in.")
+
+  return (
+    room
+      .getLiveTimeline()
+      .getState(Direction.Forward)
+      ?.events.get(EventType.RoomMember)
+      // Find event by userId.
+      // If the client user is not in the room event then this room is not a direct chat for the user.
+      ?.get(myUserId)?.event.content?.is_direct ?? false
+  )
+}
+
+// TODO: Is temporary, change it when the matrix js sdk is updated.
 export function getDirectRoomsIds(client: MatrixClient): string[] {
   const directRooms = client.getAccountData("m.direct")
   const content = directRooms?.event.content

From 93665d103c8c3f8a6ddfc97aea65e7ad59c9f4dd Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Wed, 3 Apr 2024 11:36:21 -0400
Subject: [PATCH 51/62] fix: Fix PR problems

---
 .github/workflows/deploy-pr-dev.yml           | 26 -------------------
 .../SidebarActions/SidebarActions.tsx         |  6 ++---
 .../SidebarActions/useCachedNotifications.ts  | 16 ++++++------
 .../SidebarActions/useNotifications.ts        | 10 +++----
 4 files changed, 16 insertions(+), 42 deletions(-)
 delete mode 100644 .github/workflows/deploy-pr-dev.yml

diff --git a/.github/workflows/deploy-pr-dev.yml b/.github/workflows/deploy-pr-dev.yml
deleted file mode 100644
index a2fc84df..00000000
--- a/.github/workflows/deploy-pr-dev.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-name: Build and Deploy on PR to Dev
-
-on:
-  pull_request:
-    branches:
-      - dev
-
-jobs:
-  build-and-deploy-on-pr:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout Repository
-      uses: actions/checkout@v2
-
-    - name: Install Dependencies
-      run: yarn
-
-    - name: Build Project
-      run: yarn build
-
-    - name: Deploy to GitHub Pages
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./dist
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 13cc67b5..2553b3f3 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -20,7 +20,7 @@ import {useNotificationsStateStore} from "./useCachedNotifications"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
-  const {notifications, markAsReadAllNotifications} = useNotifications()
+  const {notifications, markAllNotificationsAsRead} = useNotifications()
 
   const activeModalElement = useMemo(() => {
     if (sidebarModalActive === null) {
@@ -35,12 +35,12 @@ const SidebarModalsHandler: FC = () => {
         return (
           <NotificationsModal
             notifications={notifications}
-            onMarkAllAsRead={markAsReadAllNotifications}
+            onMarkAllAsRead={markAllNotificationsAsRead}
           />
         )
       }
     }
-  }, [markAsReadAllNotifications, notifications, sidebarModalActive])
+  }, [markAllNotificationsAsRead, notifications, sidebarModalActive])
 
   return (
     <>
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 19f556c4..d99991ac 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -44,7 +44,7 @@ const useCachedNotifications = () => {
     )
   }, [cachedNotifications, refreshContainsUnreadNotifications])
 
-  const markAsReadAllNotifications = useCallback(() => {
+  const markAllNotificationsAsRead = useCallback(() => {
     setNotifications(prevNotifications => {
       const updatedNotifications = prevNotifications.map(notification => {
         return {
@@ -106,12 +106,12 @@ const useCachedNotifications = () => {
       }
 
       setNotifications(prevNotifications => {
-        if (
-          prevNotifications.some(
-            prevNotification =>
-              prevNotification.notificationId === notification.notificationId
-          )
-        ) {
+        const isNotificationsExist = prevNotifications.some(
+          prevNotification =>
+            prevNotification.notificationId === notification.notificationId
+        )
+
+        if (isNotificationsExist) {
           return prevNotifications
         }
 
@@ -133,7 +133,7 @@ const useCachedNotifications = () => {
     saveNotification,
     deleteNotificationById,
     markAsReadByNotificationId,
-    markAsReadAllNotifications,
+    markAllNotificationsAsRead,
   }
 }
 
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 097e656c..7109ea00 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -32,7 +32,7 @@ const useNotifications = () => {
     saveNotification,
     deleteNotificationById,
     markAsReadByNotificationId,
-    markAsReadAllNotifications,
+    markAllNotificationsAsRead,
   } = useCachedNotifications()
 
   useEffect(() => {
@@ -151,7 +151,7 @@ const useNotifications = () => {
     saveNotification(getNotificationFromMembersEvent(event, client, member))
   })
 
-  return {notifications, markAsReadAllNotifications}
+  return {notifications, markAllNotificationsAsRead}
 }
 
 const getNotificationFromPowerLevelEvent = (
@@ -166,7 +166,7 @@ const getNotificationFromPowerLevelEvent = (
   let body: string | null = null
 
   assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
-  assert(userId !== null, "My userId should not be undefined")
+  assert(userId !== null, "If userId is undefined, client is not initialized")
   assert(roomName !== undefined, "The room must exist")
 
   const currentLevels: number = event.getContent().users[userId]
@@ -188,6 +188,7 @@ const getNotificationFromPowerLevelEvent = (
   }
 
   if (body === null) {
+    // If the body is null then the power levels event did not occur or was not processed by the room.
     return null
   }
 
@@ -212,8 +213,7 @@ const getNotificationFromMentionEvent = (
 
   if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
     // TODO: If the room is encrypted, you will have to decrypt the message first.
-    // While return null.
-    return null
+    throw new Error("Not yet implemented")
   }
 
   return {

From 970f606657132c4e6f42ba23604f0d2794085819 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Wed, 3 Apr 2024 14:06:23 -0400
Subject: [PATCH 52/62] feat: Upgrade local notifications handling

---
 .../SidebarActions/NotificationsModal.tsx     |  33 ++-
 .../SidebarActions/SidebarActions.tsx         |  15 +-
 .../SidebarActions/useCachedNotifications.ts  | 123 ++-------
 .../SidebarActions/useNotifications.ts        | 260 ++----------------
 src/hooks/matrix/useGlobalEventListeners.ts   | 226 +++++++++++++++
 src/utils/notifications.ts                    |  64 +++++
 6 files changed, 363 insertions(+), 358 deletions(-)
 create mode 100644 src/hooks/matrix/useGlobalEventListeners.ts
 create mode 100644 src/utils/notifications.ts

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index d73ca400..f103d1bf 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -8,6 +8,11 @@ import {twMerge} from "tailwind-merge"
 import IconButton from "../IconButton"
 import {useSidebarModalActiveStore} from "./useSidebarActions"
 import {type LocalNotificationData} from "./useCachedNotifications"
+import {
+  deleteNotificationById,
+  markAsReadByNotificationId,
+} from "@/utils/notifications"
+import useNotifications from "./useNotifications"
 
 export type NotificationActions = {
   name: string
@@ -16,8 +21,7 @@ export type NotificationActions = {
 }
 
 export interface NotificationProps extends LocalNotificationData {
-  onDelete: () => void
-  onMarkAsRead: () => void
+  onRequestChanges: () => void
   actions?: NotificationActions[]
 }
 
@@ -27,9 +31,9 @@ const Notification: FC<NotificationProps> = ({
   actions,
   senderName,
   avatarSenderUrl,
-  onDelete,
+  notificationId,
   isRead,
-  onMarkAsRead,
+  onRequestChanges,
 }) => {
   const userComponent =
     senderName === undefined ? undefined : (
@@ -89,7 +93,10 @@ const Notification: FC<NotificationProps> = ({
           <IconButton
             className="size-min"
             size={14}
-            onClick={onMarkAsRead}
+            onClick={() => {
+              markAsReadByNotificationId(notificationId)
+              onRequestChanges()
+            }}
             tooltip="Remove notification"
             Icon={IoCheckbox}
           />
@@ -98,7 +105,10 @@ const Notification: FC<NotificationProps> = ({
         <IconButton
           className="size-min"
           size={14}
-          onClick={onDelete}
+          onClick={() => {
+            deleteNotificationById(notificationId)
+            onRequestChanges()
+          }}
           tooltip="Remove notification"
           Icon={IoTrash}
         />
@@ -107,16 +117,9 @@ const Notification: FC<NotificationProps> = ({
   )
 }
 
-export type NotificationsModalProps = {
-  notifications: NotificationProps[]
-  onMarkAllAsRead: () => void
-}
-
-const NotificationsModal: FC<NotificationsModalProps> = ({
-  notifications,
-  onMarkAllAsRead,
-}) => {
+const NotificationsModal: FC = () => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
+  const {notifications, onMarkAllAsRead} = useNotifications()
 
   const notificationsUnread = useMemo(() => {
     const notificationsUnreadProps: React.JSX.Element[] = []
diff --git a/src/components/SidebarActions/SidebarActions.tsx b/src/components/SidebarActions/SidebarActions.tsx
index 2553b3f3..a10fa277 100644
--- a/src/components/SidebarActions/SidebarActions.tsx
+++ b/src/components/SidebarActions/SidebarActions.tsx
@@ -15,12 +15,10 @@ import useSidebarActions, {
 import DirectMessageModal from "./DirectMessageModal"
 import NotificationsModal from "./NotificationsModal"
 import Modal from "../Modal"
-import useNotifications from "./useNotifications"
-import {useNotificationsStateStore} from "./useCachedNotifications"
+import useGlobalEventListeners from "@/hooks/matrix/useGlobalEventListeners"
 
 const SidebarModalsHandler: FC = () => {
   const {sidebarModalActive} = useSidebarModalActiveStore()
-  const {notifications, markAllNotificationsAsRead} = useNotifications()
 
   const activeModalElement = useMemo(() => {
     if (sidebarModalActive === null) {
@@ -32,15 +30,10 @@ const SidebarModalsHandler: FC = () => {
         return <DirectMessageModal />
       }
       case SidebarModals.Notifications: {
-        return (
-          <NotificationsModal
-            notifications={notifications}
-            onMarkAllAsRead={markAllNotificationsAsRead}
-          />
-        )
+        return <NotificationsModal />
       }
     }
-  }, [markAllNotificationsAsRead, notifications, sidebarModalActive])
+  }, [sidebarModalActive])
 
   return (
     <>
@@ -59,8 +52,8 @@ export type SidebarActionsProps = {
 }
 
 const SidebarActions: FC<SidebarActionsProps> = ({className}) => {
-  const {containsUnreadNotifications} = useNotificationsStateStore()
   const {onLogout, setActiveSidebarModal} = useSidebarActions()
+  const {containsUnreadNotifications} = useGlobalEventListeners()
 
   return (
     <>
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index d99991ac..a281a2e4 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -1,4 +1,5 @@
-import {useCallback, useEffect, useState} from "react"
+import {getNotificationsData} from "@/utils/notifications"
+import {useEffect, useState} from "react"
 import {create} from "zustand"
 
 export type LocalNotificationData = {
@@ -10,32 +11,48 @@ export type LocalNotificationData = {
   avatarSenderUrl?: string
 }
 
-const NOTIFICATIONS_LOCAL_STORAGE_KEY = "notifications"
+export enum NotificationsSyncState {
+  Pending,
+  Processed,
+}
 
 type NotificationsState = {
+  state: NotificationsSyncState | null
+  setNotificationsState: (state: NotificationsSyncState) => void
   containsUnreadNotifications: boolean
   refreshContainsUnreadNotifications: (newValue: boolean) => void
 }
 
 export const useNotificationsStateStore = create<NotificationsState>(set => ({
+  state: null,
   containsUnreadNotifications: false,
   refreshContainsUnreadNotifications: newValue => {
     set(_state => ({containsUnreadNotifications: newValue}))
   },
+  setNotificationsState: newState => {
+    set(_state => ({
+      state: newState,
+      containsUnreadNotifications: newState === NotificationsSyncState.Pending,
+    }))
+  },
 }))
 
 const useCachedNotifications = () => {
-  const {refreshContainsUnreadNotifications} = useNotificationsStateStore()
+  const {refreshContainsUnreadNotifications, state, setNotificationsState} =
+    useNotificationsStateStore()
 
   const [cachedNotifications, setNotifications] = useState<
     LocalNotificationData[]
-  >(() => {
-    const savedNotifications = localStorage.getItem(
-      NOTIFICATIONS_LOCAL_STORAGE_KEY
-    )
+  >([])
 
-    return savedNotifications ? JSON.parse(savedNotifications) : []
-  })
+  useEffect(() => {
+    if (state === NotificationsSyncState.Processed) {
+      return
+    }
+
+    setNotifications(getNotificationsData())
+    setNotificationsState(NotificationsSyncState.Processed)
+  }, [setNotificationsState, state])
 
   useEffect(() => {
     // Check if you have unread notifications with the `some` method and it will refresh the global status of notifications.
@@ -44,96 +61,8 @@ const useCachedNotifications = () => {
     )
   }, [cachedNotifications, refreshContainsUnreadNotifications])
 
-  const markAllNotificationsAsRead = useCallback(() => {
-    setNotifications(prevNotifications => {
-      const updatedNotifications = prevNotifications.map(notification => {
-        return {
-          ...notification,
-          isRead: true,
-        }
-      })
-
-      localStorage.setItem(
-        NOTIFICATIONS_LOCAL_STORAGE_KEY,
-        JSON.stringify(updatedNotifications)
-      )
-
-      return updatedNotifications
-    })
-  }, [])
-
-  const markAsReadByNotificationId = useCallback((notificationId: string) => {
-    setNotifications(prevNotifications => {
-      const updatedNotifications = prevNotifications.map(notification => {
-        if (notification.notificationId === notificationId) {
-          return {
-            ...notification,
-            isRead: true,
-          }
-        }
-
-        return notification
-      })
-
-      localStorage.setItem(
-        NOTIFICATIONS_LOCAL_STORAGE_KEY,
-        JSON.stringify(updatedNotifications)
-      )
-
-      return updatedNotifications
-    })
-  }, [])
-
-  const deleteNotificationById = useCallback((notificationId: string) => {
-    setNotifications(prevNotifications => {
-      const updatedNotifications = prevNotifications.filter(
-        notification => notification.notificationId !== notificationId
-      )
-
-      localStorage.setItem(
-        NOTIFICATIONS_LOCAL_STORAGE_KEY,
-        JSON.stringify(updatedNotifications)
-      )
-
-      return updatedNotifications
-    })
-  }, [])
-
-  const saveNotification = useCallback(
-    (notification: LocalNotificationData | null) => {
-      if (notification === null) {
-        return
-      }
-
-      setNotifications(prevNotifications => {
-        const isNotificationsExist = prevNotifications.some(
-          prevNotification =>
-            prevNotification.notificationId === notification.notificationId
-        )
-
-        if (isNotificationsExist) {
-          return prevNotifications
-        }
-
-        const updatedNotifications = [notification, ...prevNotifications]
-
-        localStorage.setItem(
-          NOTIFICATIONS_LOCAL_STORAGE_KEY,
-          JSON.stringify(updatedNotifications)
-        )
-
-        return updatedNotifications
-      })
-    },
-    []
-  )
-
   return {
     cachedNotifications,
-    saveNotification,
-    deleteNotificationById,
-    markAsReadByNotificationId,
-    markAllNotificationsAsRead,
   }
 }
 
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 7109ea00..6580564a 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -1,39 +1,31 @@
-import {useEffect, useState} from "react"
+import {useCallback, useEffect, useState} from "react"
 import {type NotificationProps} from "./NotificationsModal"
-import useEventListener from "@/hooks/matrix/useEventListener"
-import {
-  EventType,
-  type MatrixClient,
-  type MatrixEvent,
-  type Room,
-  RoomEvent,
-  type RoomMember,
-  RoomStateEvent,
-} from "matrix-js-sdk"
 import useConnection from "@/hooks/matrix/useConnection"
 import useCachedNotifications, {
-  type LocalNotificationData,
+  NotificationsSyncState,
+  useNotificationsStateStore,
 } from "./useCachedNotifications"
-import {
-  assert,
-  checkIsDirectRoom,
-  CommonAssertion,
-  getImageUrl,
-} from "@/utils/util"
+import {checkIsDirectRoom, getImageUrl} from "@/utils/util"
 import {ButtonVariant} from "../Button"
-import {UserPowerLevel} from "../RosterUser"
+import {
+  deleteNotificationById,
+  markAllNotificationsAsRead,
+} from "@/utils/notifications"
 
 const useNotifications = () => {
   const {client} = useConnection()
+  const {setNotificationsState} = useNotificationsStateStore()
   const [notifications, setNotifications] = useState<NotificationProps[]>([])
+  const {cachedNotifications} = useCachedNotifications()
 
-  const {
-    cachedNotifications,
-    saveNotification,
-    deleteNotificationById,
-    markAsReadByNotificationId,
-    markAllNotificationsAsRead,
-  } = useCachedNotifications()
+  const onRequestChanges = useCallback(() => {
+    setNotificationsState(NotificationsSyncState.Pending)
+  }, [setNotificationsState])
+
+  const onMarkAllAsRead = useCallback(() => {
+    markAllNotificationsAsRead()
+    setNotificationsState(NotificationsSyncState.Processed)
+  }, [setNotificationsState])
 
   useEffect(() => {
     if (client === null) {
@@ -67,8 +59,10 @@ const useNotifications = () => {
             name: "Accept",
             onClick: () => {
               void client.joinRoom(invitedRoom.roomId).then(room => {
+                // TODO: Check because with direct rooms it does not delete the notification.
                 if (room.getMyMembership() === "join") {
                   deleteNotificationById(invitedRoom.roomId)
+                  onRequestChanges()
                 }
               })
             },
@@ -77,19 +71,14 @@ const useNotifications = () => {
             name: "Decline",
             onClick: () => {
               void client.leave(invitedRoom.roomId).then(() => {
-                // TODO: Check because with direct rooms it does not delete the notification.
                 deleteNotificationById(invitedRoom.roomId)
+                onRequestChanges()
               })
             },
             actionVariant: ButtonVariant.TextLink,
           },
         ],
-        onDelete: () => {
-          deleteNotificationById(invitedRoom.roomId)
-        },
-        onMarkAsRead() {
-          markAsReadByNotificationId(invitedRoom.roomId)
-        },
+        onRequestChanges,
       })
     }
 
@@ -101,213 +90,14 @@ const useNotifications = () => {
         notificationId: notification.notificationId,
         senderName: notification.senderName,
         avatarSenderUrl: notification.avatarSenderUrl,
-        onDelete: () => {
-          deleteNotificationById(notification.notificationId)
-        },
-        onMarkAsRead: () => {
-          markAsReadByNotificationId(notification.notificationId)
-        },
+        onRequestChanges,
       })
     }
 
     setNotifications(newNotifications)
-  }, [
-    cachedNotifications,
-    client,
-    deleteNotificationById,
-    markAsReadByNotificationId,
-  ])
-
-  useEventListener(RoomStateEvent.Events, (event, state) => {
-    if (event.getType() !== EventType.RoomPowerLevels || client === null) {
-      return
-    }
-
-    // Handle power levels event for notifications.
-    saveNotification(
-      getNotificationFromPowerLevelEvent(client, event, state.roomId)
-    )
-  })
-
-  useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
-    if (toStartOfTimeline) {
-      // Ignore past events when starting sync.
-      return
-    }
-
-    if (room === undefined || client === null) {
-      // If there is no room, the event may not be a mention event.
-      return
-    }
-
-    saveNotification(getNotificationFromMentionEvent(client, event, room))
-  })
-
-  useEventListener(RoomStateEvent.Members, (event, _state, member) => {
-    if (client === null || client.getUserId() !== member.userId) {
-      return
-    }
-
-    saveNotification(getNotificationFromMembersEvent(event, client, member))
-  })
-
-  return {notifications, markAllNotificationsAsRead}
-}
-
-const getNotificationFromPowerLevelEvent = (
-  client: MatrixClient,
-  event: MatrixEvent,
-  roomId: string
-): LocalNotificationData | null => {
-  const eventId = event.getId()
-  const userId = client.getUserId()
-  const roomName = client.getRoom(roomId)?.name
-  let powerLevel: string = "Member"
-  let body: string | null = null
-
-  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
-  assert(userId !== null, "If userId is undefined, client is not initialized")
-  assert(roomName !== undefined, "The room must exist")
-
-  const currentLevels: number = event.getContent().users[userId]
-  const previousLevels: number = event.getPrevContent().users[userId] || 0
-
-  if (currentLevels === UserPowerLevel.Admin) {
-    powerLevel = "Admin"
-  } else if (
-    currentLevels >= UserPowerLevel.Moderator &&
-    currentLevels < UserPowerLevel.Admin
-  ) {
-    powerLevel = "Moderator"
-  }
-
-  if (currentLevels > previousLevels) {
-    body = `you have been promoted to ${powerLevel} at ${roomName}`
-  } else if (currentLevels < previousLevels) {
-    body = `you has demoted you to ${powerLevel} at ${roomName}`
-  }
-
-  if (body === null) {
-    // If the body is null then the power levels event did not occur or was not processed by the room.
-    return null
-  }
-
-  return {
-    body,
-    isRead: false,
-    notificationId: eventId,
-    notificationTime: event.localTimestamp,
-    avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
-    senderName: event.sender?.name,
-  }
-}
-
-const getNotificationFromMentionEvent = (
-  client: MatrixClient,
-  event: MatrixEvent,
-  room: Room
-): LocalNotificationData | null => {
-  const eventId = event.getId()
-
-  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
-
-  if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
-    // TODO: If the room is encrypted, you will have to decrypt the message first.
-    throw new Error("Not yet implemented")
-  }
-
-  return {
-    body: `mentioned you in room: ${room.name}`,
-    isRead: false,
-    notificationId: eventId,
-    notificationTime: event.localTimestamp,
-    avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
-    senderName: event.sender?.name,
-  }
-}
-
-const getNotificationFromMembersEvent = (
-  event: MatrixEvent,
-  client: MatrixClient,
-  member: RoomMember
-): LocalNotificationData | null => {
-  const eventId = event.getId()
-  const myUserId = client.getUserId()
-  const sender = event.getSender()
-  const prevContent = event.getPrevContent()
-  const room = client.getRoom(event.getRoomId())
-  const roomName = room?.name ?? "room"
-  const hasReason = event.getContent().reason
-  const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
-
-  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
-
-  switch (event.getContent().membership) {
-    case "leave": {
-      if (sender === myUserId && prevContent.membership === "invite") {
-        return {
-          body: "you rejected the invitation",
-          isRead: false,
-          notificationId: eventId,
-          notificationTime: event.localTimestamp,
-          senderName: room?.name,
-          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
-        }
-      } else if (sender !== myUserId && prevContent.membership === "join") {
-        return {
-          body: `expelled you from the ${roomName} ${reason}`,
-          isRead: false,
-          notificationId: eventId,
-          notificationTime: event.localTimestamp,
-          senderName: event.sender?.name,
-          avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
-        }
-      }
-
-      break
-    }
-    case "join": {
-      if (prevContent.membership === "invite") {
-        return {
-          body: `you accepted the invitation to join this room`,
-          isRead: false,
-          notificationId: eventId,
-          notificationTime: event.localTimestamp,
-          senderName: room?.name,
-          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
-        }
-      }
-      break
-    }
-    case "ban": {
-      return {
-        body: `you have been banned from the ${roomName} ${reason}`,
-        isRead: false,
-        notificationId: eventId,
-        notificationTime: event.localTimestamp,
-        senderName: event.sender?.name,
-        avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
-      }
-    }
-    case undefined: {
-      break
-    }
-  }
-
-  if (member.membership !== "ban" && prevContent.membership === "ban") {
-    // The user ban was removed.
-
-    return {
-      body: `your ban has been lifted in the ${roomName}`,
-      isRead: false,
-      notificationId: eventId,
-      notificationTime: event.localTimestamp,
-      senderName: event.sender?.name,
-      avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
-    }
-  }
+  }, [cachedNotifications, client, onRequestChanges])
 
-  return null
+  return {notifications, onMarkAllAsRead}
 }
 
 export default useNotifications
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
new file mode 100644
index 00000000..440167fe
--- /dev/null
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -0,0 +1,226 @@
+import {
+  EventType,
+  type MatrixClient,
+  type MatrixEvent,
+  type Room,
+  RoomEvent,
+  type RoomMember,
+  RoomStateEvent,
+} from "matrix-js-sdk"
+import useEventListener from "./useEventListener"
+import useConnection from "./useConnection"
+import {saveNotification} from "@/utils/notifications"
+import {
+  type LocalNotificationData,
+  NotificationsSyncState,
+  useNotificationsStateStore,
+} from "@/components/SidebarActions/useCachedNotifications"
+import {useCallback} from "react"
+import {UserPowerLevel} from "@/components/RosterUser"
+import {assert, CommonAssertion, getImageUrl} from "@/utils/util"
+
+const useGlobalEventListeners = () => {
+  const {client} = useConnection()
+  const {setNotificationsState, containsUnreadNotifications} =
+    useNotificationsStateStore()
+
+  const onRequestChanges = useCallback(() => {
+    setNotificationsState(NotificationsSyncState.Pending)
+  }, [setNotificationsState])
+
+  useEventListener(RoomStateEvent.Events, (event, state) => {
+    // TODO: Handle here power level events.
+    if (event.getType() !== EventType.RoomPowerLevels || client === null) {
+      return
+    }
+
+    // Handle power levels event for notifications.
+    saveNotification(
+      getNotificationFromPowerLevelEvent(client, event, state.roomId)
+    )
+    onRequestChanges()
+  })
+
+  useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
+    if (toStartOfTimeline) {
+      // Ignore past events when starting sync.
+      return
+    }
+
+    if (room === undefined || client === null) {
+      // If there is no room, the event may not be a mention event.
+      return
+    }
+
+    saveNotification(getNotificationFromMentionEvent(client, event, room))
+    onRequestChanges()
+  })
+
+  useEventListener(RoomStateEvent.Members, (event, _state, member) => {
+    if (client === null || client.getUserId() !== member.userId) {
+      return
+    }
+
+    saveNotification(getNotificationFromMembersEvent(event, client, member))
+  })
+
+  return {containsUnreadNotifications}
+}
+
+const getNotificationFromPowerLevelEvent = (
+  client: MatrixClient,
+  event: MatrixEvent,
+  roomId: string
+): LocalNotificationData | null => {
+  const eventId = event.getId()
+  const userId = client.getUserId()
+  const roomName = client.getRoom(roomId)?.name
+  let powerLevel: string = "Member"
+  let body: string | null = null
+
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
+  assert(userId !== null, "If userId is undefined, client is not initialized")
+  assert(roomName !== undefined, "The room must exist")
+
+  const currentLevels: number = event.getContent().users[userId]
+  const previousLevels: number = event.getPrevContent().users[userId] || 0
+
+  if (currentLevels === UserPowerLevel.Admin) {
+    powerLevel = "Admin"
+  } else if (
+    currentLevels >= UserPowerLevel.Moderator &&
+    currentLevels < UserPowerLevel.Admin
+  ) {
+    powerLevel = "Moderator"
+  }
+
+  if (currentLevels > previousLevels) {
+    body = `you have been promoted to ${powerLevel} at ${roomName}`
+  } else if (currentLevels < previousLevels) {
+    body = `you has demoted you to ${powerLevel} at ${roomName}`
+  }
+
+  if (body === null) {
+    // If the body is null then the power levels event did not occur or was not processed by the room.
+    return null
+  }
+
+  return {
+    body,
+    isRead: false,
+    notificationId: eventId,
+    notificationTime: event.localTimestamp,
+    avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+    senderName: event.sender?.name,
+  }
+}
+
+const getNotificationFromMentionEvent = (
+  client: MatrixClient,
+  event: MatrixEvent,
+  room: Room
+): LocalNotificationData | null => {
+  const eventId = event.getId()
+
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
+
+  if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
+    // TODO: If the room is encrypted, you will have to decrypt the message first.
+    throw new Error("Not yet implemented")
+  }
+
+  return {
+    body: `mentioned you in room: ${room.name}`,
+    isRead: false,
+    notificationId: eventId,
+    notificationTime: event.localTimestamp,
+    avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+    senderName: event.sender?.name,
+  }
+}
+
+const getNotificationFromMembersEvent = (
+  event: MatrixEvent,
+  client: MatrixClient,
+  member: RoomMember
+): LocalNotificationData | null => {
+  const eventId = event.getId()
+  const myUserId = client.getUserId()
+  const sender = event.getSender()
+  const prevContent = event.getPrevContent()
+  const room = client.getRoom(event.getRoomId())
+  const roomName = room?.name ?? "room"
+  const hasReason = event.getContent().reason
+  const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
+
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
+
+  switch (event.getContent().membership) {
+    case "leave": {
+      if (sender === myUserId && prevContent.membership === "invite") {
+        return {
+          body: "you rejected the invitation",
+          isRead: false,
+          notificationId: eventId,
+          notificationTime: event.localTimestamp,
+          senderName: room?.name,
+          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
+        }
+      } else if (sender !== myUserId && prevContent.membership === "join") {
+        return {
+          body: `expelled you from the ${roomName} ${reason}`,
+          isRead: false,
+          notificationId: eventId,
+          notificationTime: event.localTimestamp,
+          senderName: event.sender?.name,
+          avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+        }
+      }
+
+      break
+    }
+    case "join": {
+      if (prevContent.membership === "invite") {
+        return {
+          body: `you accepted the invitation to join this room`,
+          isRead: false,
+          notificationId: eventId,
+          notificationTime: event.localTimestamp,
+          senderName: room?.name,
+          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
+        }
+      }
+      break
+    }
+    case "ban": {
+      return {
+        body: `you have been banned from the ${roomName} ${reason}`,
+        isRead: false,
+        notificationId: eventId,
+        notificationTime: event.localTimestamp,
+        senderName: event.sender?.name,
+        avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+      }
+    }
+    case undefined: {
+      break
+    }
+  }
+
+  if (member.membership !== "ban" && prevContent.membership === "ban") {
+    // The user ban was removed.
+
+    return {
+      body: `your ban has been lifted in the ${roomName}`,
+      isRead: false,
+      notificationId: eventId,
+      notificationTime: event.localTimestamp,
+      senderName: event.sender?.name,
+      avatarSenderUrl: getImageUrl(event.sender?.getMxcAvatarUrl(), client),
+    }
+  }
+
+  return null
+}
+
+export default useGlobalEventListeners
diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
new file mode 100644
index 00000000..ea9ec5b5
--- /dev/null
+++ b/src/utils/notifications.ts
@@ -0,0 +1,64 @@
+import {type LocalNotificationData} from "@/components/SidebarActions/useCachedNotifications"
+
+const NOTIFICATIONS_LOCAL_STORAGE_KEY = "notifications"
+
+export function getNotificationsData(): LocalNotificationData[] {
+  const savedNotifications = localStorage.getItem(
+    NOTIFICATIONS_LOCAL_STORAGE_KEY
+  )
+
+  return savedNotifications ? JSON.parse(savedNotifications) : []
+}
+
+function setNotificationsData(notifications: LocalNotificationData[]) {
+  localStorage.setItem(
+    NOTIFICATIONS_LOCAL_STORAGE_KEY,
+    JSON.stringify(notifications)
+  )
+}
+
+export function saveNotification(notification: LocalNotificationData | null) {
+  if (notification === null) {
+    return
+  }
+
+  const savedNotifications = getNotificationsData()
+
+  savedNotifications.push(notification)
+
+  setNotificationsData(savedNotifications)
+}
+
+export function deleteNotificationById(notificationId: string) {
+  const updatedNotifications = getNotificationsData().filter(
+    notification => notification.notificationId !== notificationId
+  )
+
+  setNotificationsData(updatedNotifications)
+}
+
+export function markAllNotificationsAsRead() {
+  const updatedNotifications = getNotificationsData().map(notification => {
+    return {
+      ...notification,
+      isRead: true,
+    }
+  })
+
+  setNotificationsData(updatedNotifications)
+}
+
+export function markAsReadByNotificationId(notificationId: string) {
+  const updatedNotifications = getNotificationsData().map(notification => {
+    if (notification.notificationId === notificationId) {
+      return {
+        ...notification,
+        isRead: true,
+      }
+    }
+
+    return notification
+  })
+
+  setNotificationsData(updatedNotifications)
+}

From f4147a097e32bf2e32cbd8ac1566e4c7f8f53c8d Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 5 Apr 2024 00:50:16 -0400
Subject: [PATCH 53/62] feat: Implement other type of notification handling

---
 .../SidebarActions/useCachedNotifications.ts  | 22 ++++----
 .../SidebarActions/useNotifications.ts        | 54 +------------------
 src/hooks/matrix/useGlobalEventListeners.ts   | 31 +++++++----
 src/utils/util.ts                             |  3 +-
 4 files changed, 35 insertions(+), 75 deletions(-)

diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index a281a2e4..59812d3c 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -38,28 +38,30 @@ export const useNotificationsStateStore = create<NotificationsState>(set => ({
 }))
 
 const useCachedNotifications = () => {
-  const {refreshContainsUnreadNotifications, state, setNotificationsState} =
-    useNotificationsStateStore()
+  const {state, setNotificationsState} = useNotificationsStateStore()
 
   const [cachedNotifications, setNotifications] = useState<
     LocalNotificationData[]
   >([])
 
   useEffect(() => {
-    if (state === NotificationsSyncState.Processed) {
+    if (
+      state === NotificationsSyncState.Processed &&
+      cachedNotifications.length > 0
+    ) {
       return
     }
 
     setNotifications(getNotificationsData())
     setNotificationsState(NotificationsSyncState.Processed)
-  }, [setNotificationsState, state])
+  }, [cachedNotifications.length, setNotificationsState, state])
 
-  useEffect(() => {
-    // Check if you have unread notifications with the `some` method and it will refresh the global status of notifications.
-    refreshContainsUnreadNotifications(
-      cachedNotifications.some(notification => !notification.isRead)
-    )
-  }, [cachedNotifications, refreshContainsUnreadNotifications])
+  // useEffect(() => {
+  //   // Check if you have unread notifications with the `some` method and it will refresh the global status of notifications.
+  //   refreshContainsUnreadNotifications(
+  //     cachedNotifications.some(notification => !notification.isRead)
+  //   )
+  // }, [cachedNotifications, refreshContainsUnreadNotifications])
 
   return {
     cachedNotifications,
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
index 6580564a..6c80297a 100644
--- a/src/components/SidebarActions/useNotifications.ts
+++ b/src/components/SidebarActions/useNotifications.ts
@@ -5,12 +5,7 @@ import useCachedNotifications, {
   NotificationsSyncState,
   useNotificationsStateStore,
 } from "./useCachedNotifications"
-import {checkIsDirectRoom, getImageUrl} from "@/utils/util"
-import {ButtonVariant} from "../Button"
-import {
-  deleteNotificationById,
-  markAllNotificationsAsRead,
-} from "@/utils/notifications"
+import {markAllNotificationsAsRead} from "@/utils/notifications"
 
 const useNotifications = () => {
   const {client} = useConnection()
@@ -35,53 +30,6 @@ const useNotifications = () => {
     // Handle history user notifications.
     const newNotifications: NotificationProps[] = []
 
-    const invitedRooms = client
-      .getRooms()
-      .filter(room => room.getMyMembership() === "invite")
-
-    for (const invitedRoom of invitedRooms) {
-      const isDirectRoom = checkIsDirectRoom(client, invitedRoom)
-      const inviteSenderMember = invitedRoom.getAvatarFallbackMember()
-
-      const avatarUrl = isDirectRoom
-        ? inviteSenderMember?.getMxcAvatarUrl()
-        : invitedRoom.getMxcAvatarUrl()
-
-      newNotifications.push({
-        body: "invited you to join this room",
-        notificationId: invitedRoom.roomId,
-        notificationTime: Date.now(),
-        avatarSenderUrl: getImageUrl(avatarUrl, client),
-        senderName: invitedRoom.name,
-        isRead: false,
-        actions: [
-          {
-            name: "Accept",
-            onClick: () => {
-              void client.joinRoom(invitedRoom.roomId).then(room => {
-                // TODO: Check because with direct rooms it does not delete the notification.
-                if (room.getMyMembership() === "join") {
-                  deleteNotificationById(invitedRoom.roomId)
-                  onRequestChanges()
-                }
-              })
-            },
-          },
-          {
-            name: "Decline",
-            onClick: () => {
-              void client.leave(invitedRoom.roomId).then(() => {
-                deleteNotificationById(invitedRoom.roomId)
-                onRequestChanges()
-              })
-            },
-            actionVariant: ButtonVariant.TextLink,
-          },
-        ],
-        onRequestChanges,
-      })
-    }
-
     for (const notification of cachedNotifications) {
       newNotifications.push({
         body: notification.body,
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
index 440167fe..767e1c23 100644
--- a/src/hooks/matrix/useGlobalEventListeners.ts
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -4,7 +4,8 @@ import {
   type MatrixEvent,
   type Room,
   RoomEvent,
-  type RoomMember,
+  RoomMemberEvent,
+  type RoomState,
   RoomStateEvent,
 } from "matrix-js-sdk"
 import useEventListener from "./useEventListener"
@@ -29,6 +30,15 @@ const useGlobalEventListeners = () => {
   }, [setNotificationsState])
 
   useEventListener(RoomStateEvent.Events, (event, state) => {
+    if (event.getType() === EventType.RoomMember) {
+      if (client === null) {
+        return
+      }
+
+      saveNotification(getNotificationFromMembersEvent(event, client, state))
+      onRequestChanges()
+    }
+
     // TODO: Handle here power level events.
     if (event.getType() !== EventType.RoomPowerLevels || client === null) {
       return
@@ -38,6 +48,7 @@ const useGlobalEventListeners = () => {
     saveNotification(
       getNotificationFromPowerLevelEvent(client, event, state.roomId)
     )
+
     onRequestChanges()
   })
 
@@ -56,14 +67,6 @@ const useGlobalEventListeners = () => {
     onRequestChanges()
   })
 
-  useEventListener(RoomStateEvent.Members, (event, _state, member) => {
-    if (client === null || client.getUserId() !== member.userId) {
-      return
-    }
-
-    saveNotification(getNotificationFromMembersEvent(event, client, member))
-  })
-
   return {containsUnreadNotifications}
 }
 
@@ -142,7 +145,7 @@ const getNotificationFromMentionEvent = (
 const getNotificationFromMembersEvent = (
   event: MatrixEvent,
   client: MatrixClient,
-  member: RoomMember
+  state: RoomState
 ): LocalNotificationData | null => {
   const eventId = event.getId()
   const myUserId = client.getUserId()
@@ -155,6 +158,12 @@ const getNotificationFromMembersEvent = (
 
   assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
+  const userId = client.getUserId()
+
+  assert(userId !== null, CommonAssertion.UserIdNotFound)
+
+  const member = state.getMember(userId)
+
   switch (event.getContent().membership) {
     case "leave": {
       if (sender === myUserId && prevContent.membership === "invite") {
@@ -207,7 +216,7 @@ const getNotificationFromMembersEvent = (
     }
   }
 
-  if (member.membership !== "ban" && prevContent.membership === "ban") {
+  if (member?.membership !== "ban" && prevContent.membership === "ban") {
     // The user ban was removed.
 
     return {
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 2d51b851..64862c64 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -46,6 +46,7 @@ export function timeFormatter(timestamp: number): string {
 
 export enum CommonAssertion {
   EventIdNotFound = "To confirm that an event happened, event id should not be undefined.",
+  UserIdNotFound = "The client must be logged in.",
 }
 
 export function assert(
@@ -163,7 +164,7 @@ export function checkIsDirectRoom(
 
   const myUserId = client.getUserId()
 
-  assert(myUserId !== null, "The client must be logged in.")
+  assert(myUserId !== null, CommonAssertion.UserIdNotFound)
 
   return (
     room

From 4205f7287dfea6d1d5eec21d6109fbaabc061a33 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 5 Apr 2024 03:50:44 -0400
Subject: [PATCH 54/62] feat: Upgrade new notification handling

---
 .../SidebarActions/Notification.tsx           | 152 +++++++++++++++
 .../SidebarActions/NotificationsModal.tsx     | 174 ++++--------------
 .../SidebarActions/useCachedNotifications.ts  |  33 ++--
 .../SidebarActions/useNotifications.ts        |  51 -----
 src/hooks/matrix/useGlobalEventListeners.ts   |  37 +++-
 src/hooks/matrix/useRooms.ts                  |  15 +-
 src/utils/notifications.ts                    |  11 +-
 src/utils/util.ts                             |   2 +-
 8 files changed, 255 insertions(+), 220 deletions(-)
 create mode 100644 src/components/SidebarActions/Notification.tsx
 delete mode 100644 src/components/SidebarActions/useNotifications.ts

diff --git a/src/components/SidebarActions/Notification.tsx b/src/components/SidebarActions/Notification.tsx
new file mode 100644
index 00000000..4e11c6f7
--- /dev/null
+++ b/src/components/SidebarActions/Notification.tsx
@@ -0,0 +1,152 @@
+import useMatrixAction from "@/hooks/matrix/useMatrixAction"
+import {
+  deleteNotificationById,
+  markAsReadByNotificationId,
+} from "@/utils/notifications"
+import {stringToColor, timeFormatter} from "@/utils/util"
+import {type FC} from "react"
+import {IoTime, IoCheckbox, IoTrash} from "react-icons/io5"
+import {twMerge} from "tailwind-merge"
+import AvatarImage, {AvatarType} from "../Avatar"
+import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
+import IconButton from "../IconButton"
+import Typography, {TypographyVariant} from "../Typography"
+import {type LocalNotificationData} from "./useCachedNotifications"
+
+export interface NotificationProps extends LocalNotificationData {
+  onRequestChanges: () => void
+  hasActions: boolean
+}
+
+const Notification: FC<NotificationProps> = ({
+  body,
+  notificationTime,
+  hasActions,
+  senderName,
+  avatarSenderUrl,
+  notificationId,
+  isRead,
+  onRequestChanges,
+}) => {
+  const onJoinRoom = useMatrixAction(client => {
+    if (!hasActions) {
+      return null
+    }
+
+    void client.joinRoom(notificationId)
+
+    deleteNotificationById(notificationId)
+    onRequestChanges()
+  })
+
+  const onLeaveRoom = useMatrixAction(client => {
+    if (!hasActions) {
+      return
+    }
+
+    void client.leave(notificationId)
+
+    deleteNotificationById(notificationId)
+    onRequestChanges()
+  })
+
+  const userComponent =
+    senderName === undefined ? undefined : (
+      <b style={{color: stringToColor(senderName)}}>{senderName}</b>
+    )
+
+  return (
+    <div
+      className={twMerge(
+        "flex gap-2 p-2",
+        !isRead && "rounded-lg bg-slate-100"
+      )}>
+      {senderName !== undefined && (
+        <div className="size-full max-h-8 max-w-8 overflow-hidden rounded-lg">
+          <AvatarImage
+            isRounded={false}
+            isLarge={false}
+            avatarType={AvatarType.Message}
+            displayName={senderName}
+            avatarUrl={avatarSenderUrl}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col gap-1">
+        <div className="flex flex-row">
+          <Typography variant={TypographyVariant.P}>
+            {userComponent} {body}
+          </Typography>
+        </div>
+
+        <div className="flex items-center gap-[2px]">
+          <IoTime size={13} />
+
+          <Typography variant={TypographyVariant.P}>
+            {timeFormatter(notificationTime)}
+          </Typography>
+        </div>
+
+        {hasActions && (
+          <div className="mt-2 flex flex-row gap-1">
+            <Button
+              label="Accept"
+              color={ButtonColor.Black}
+              size={ButtonSize.Small}
+              onClick={() => {
+                if (onJoinRoom === null) {
+                  return
+                }
+
+                void onJoinRoom()
+              }}
+            />
+
+            <Button
+              label="Decline"
+              variant={ButtonVariant.TextLink}
+              color={ButtonColor.Black}
+              size={ButtonSize.Small}
+              onClick={() => {
+                if (onLeaveRoom === null) {
+                  return
+                }
+
+                void onLeaveRoom()
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="ml-auto flex">
+        {!isRead && (
+          <IconButton
+            className="size-min"
+            size={14}
+            tooltip="Remove notification"
+            Icon={IoCheckbox}
+            onClick={() => {
+              markAsReadByNotificationId(notificationId)
+              onRequestChanges()
+            }}
+          />
+        )}
+
+        <IconButton
+          className="size-min"
+          size={14}
+          tooltip="Remove notification"
+          Icon={IoTrash}
+          onClick={() => {
+            deleteNotificationById(notificationId)
+            onRequestChanges()
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Notification
diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index f103d1bf..1c719e78 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -1,18 +1,16 @@
-import {stringToColor, timeFormatter} from "@/utils/util"
 import {useMemo, type FC} from "react"
-import {IoCheckbox, IoCloseCircle, IoTime, IoTrash} from "react-icons/io5"
-import AvatarImage, {AvatarType} from "../Avatar"
+import {IoCloseCircle} from "react-icons/io5"
 import Button, {ButtonColor, ButtonSize, ButtonVariant} from "../Button"
 import Typography, {TypographyVariant} from "../Typography"
 import {twMerge} from "tailwind-merge"
 import IconButton from "../IconButton"
 import {useSidebarModalActiveStore} from "./useSidebarActions"
-import {type LocalNotificationData} from "./useCachedNotifications"
-import {
-  deleteNotificationById,
-  markAsReadByNotificationId,
-} from "@/utils/notifications"
-import useNotifications from "./useNotifications"
+import useCachedNotifications, {
+  useNotificationsStateStore,
+  type LocalNotificationData,
+} from "./useCachedNotifications"
+import {markAllNotificationsAsRead} from "@/utils/notifications"
+import Notification from "./Notification"
 
 export type NotificationActions = {
   name: string
@@ -20,130 +18,20 @@ export type NotificationActions = {
   onClick: () => void
 }
 
-export interface NotificationProps extends LocalNotificationData {
-  onRequestChanges: () => void
-  actions?: NotificationActions[]
-}
-
-const Notification: FC<NotificationProps> = ({
-  body,
-  notificationTime,
-  actions,
-  senderName,
-  avatarSenderUrl,
-  notificationId,
-  isRead,
-  onRequestChanges,
-}) => {
-  const userComponent =
-    senderName === undefined ? undefined : (
-      <b style={{color: stringToColor(senderName)}}>{senderName}</b>
-    )
-
-  return (
-    <div
-      className={twMerge(
-        "flex gap-2 p-2",
-        !isRead && "rounded-lg bg-slate-100"
-      )}>
-      {senderName !== undefined && (
-        <div className="size-full max-h-8 max-w-8 overflow-hidden rounded-lg">
-          <AvatarImage
-            isRounded={false}
-            isLarge={false}
-            avatarType={AvatarType.Message}
-            displayName={senderName}
-            avatarUrl={avatarSenderUrl}
-          />
-        </div>
-      )}
-
-      <div className="flex flex-col gap-1">
-        <div className="flex flex-row">
-          <Typography variant={TypographyVariant.P}>
-            {userComponent} {body}
-          </Typography>
-        </div>
-
-        <div className="flex items-center gap-[2px]">
-          <IoTime size={13} />
-
-          <Typography variant={TypographyVariant.P}>
-            {timeFormatter(notificationTime)}
-          </Typography>
-        </div>
-
-        {actions !== undefined && (
-          <div className="mt-2 flex flex-row gap-1">
-            {actions.map(action => (
-              <Button
-                onClick={action.onClick}
-                label={action.name}
-                variant={action.actionVariant}
-                color={ButtonColor.Black}
-                size={ButtonSize.Small}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="ml-auto flex">
-        {!isRead && (
-          <IconButton
-            className="size-min"
-            size={14}
-            onClick={() => {
-              markAsReadByNotificationId(notificationId)
-              onRequestChanges()
-            }}
-            tooltip="Remove notification"
-            Icon={IoCheckbox}
-          />
-        )}
-
-        <IconButton
-          className="size-min"
-          size={14}
-          onClick={() => {
-            deleteNotificationById(notificationId)
-            onRequestChanges()
-          }}
-          tooltip="Remove notification"
-          Icon={IoTrash}
-        />
-      </div>
-    </div>
-  )
-}
-
 const NotificationsModal: FC = () => {
   const {clearActiveSidebarModal} = useSidebarModalActiveStore()
-  const {notifications, onMarkAllAsRead} = useNotifications()
-
-  const notificationsUnread = useMemo(() => {
-    const notificationsUnreadProps: React.JSX.Element[] = []
-
-    for (const notification of notifications) {
-      if (!notification.isRead) {
-        notificationsUnreadProps.push(<Notification {...notification} />)
-      }
-    }
-
-    return notificationsUnreadProps
-  }, [notifications])
-
-  const notificationsMarkAsRead = useMemo(() => {
-    const notificationsUnreadProps: React.JSX.Element[] = []
+  const {onRequestChanges} = useNotificationsStateStore()
+  const {notifications} = useCachedNotifications()
 
-    for (const notification of notifications) {
-      if (notification.isRead) {
-        notificationsUnreadProps.push(<Notification {...notification} />)
-      }
-    }
+  const notificationsUnread: LocalNotificationData[] = useMemo(
+    () => notifications.filter(notification => !notification.isRead),
+    [notifications]
+  )
 
-    return notificationsUnreadProps
-  }, [notifications])
+  const notificationsMarkAsRead: LocalNotificationData[] = useMemo(
+    () => notifications.filter(notification => notification.isRead),
+    [notifications]
+  )
 
   return (
     <div
@@ -161,14 +49,13 @@ const NotificationsModal: FC = () => {
           variant={ButtonVariant.TextLink}
           size={ButtonSize.Small}
           color={ButtonColor.Black}
+          label="Mark all as read"
           onClick={() => {
-            // TODO: Close modal after mark all as read.
-            clearActiveSidebarModal()
+            markAllNotificationsAsRead()
+            onRequestChanges()
 
-            // TODO: Temporarily, remove in the future.
-            onMarkAllAsRead()
+            clearActiveSidebarModal()
           }}
-          label="Mark all as read"
         />
 
         <IconButton
@@ -179,8 +66,23 @@ const NotificationsModal: FC = () => {
       </div>
 
       <div className="flex flex-col gap-1 overflow-y-scroll scrollbar-hide">
-        <div className="bg-slate-100">{notificationsUnread}</div>
-        {notificationsMarkAsRead}
+        <div className="bg-slate-100">
+          {notificationsUnread.map(notification => (
+            <Notification
+              {...notification}
+              hasActions={notification.hasActions ?? false}
+              onRequestChanges={onRequestChanges}
+            />
+          ))}
+        </div>
+
+        {notificationsMarkAsRead.map(notification => (
+          <Notification
+            {...notification}
+            hasActions={notification.hasActions ?? false}
+            onRequestChanges={onRequestChanges}
+          />
+        ))}
       </div>
     </div>
   )
diff --git a/src/components/SidebarActions/useCachedNotifications.ts b/src/components/SidebarActions/useCachedNotifications.ts
index 59812d3c..a30c28a1 100644
--- a/src/components/SidebarActions/useCachedNotifications.ts
+++ b/src/components/SidebarActions/useCachedNotifications.ts
@@ -9,6 +9,7 @@ export type LocalNotificationData = {
   notificationTime: number
   senderName?: string
   avatarSenderUrl?: string
+  hasActions?: boolean
 }
 
 export enum NotificationsSyncState {
@@ -19,20 +20,19 @@ export enum NotificationsSyncState {
 type NotificationsState = {
   state: NotificationsSyncState | null
   setNotificationsState: (state: NotificationsSyncState) => void
-  containsUnreadNotifications: boolean
-  refreshContainsUnreadNotifications: (newValue: boolean) => void
+  onRequestChanges: () => void
 }
 
 export const useNotificationsStateStore = create<NotificationsState>(set => ({
   state: null,
-  containsUnreadNotifications: false,
-  refreshContainsUnreadNotifications: newValue => {
-    set(_state => ({containsUnreadNotifications: newValue}))
-  },
   setNotificationsState: newState => {
     set(_state => ({
       state: newState,
-      containsUnreadNotifications: newState === NotificationsSyncState.Pending,
+    }))
+  },
+  onRequestChanges: () => {
+    set(_state => ({
+      state: NotificationsSyncState.Pending,
     }))
   },
 }))
@@ -40,31 +40,24 @@ export const useNotificationsStateStore = create<NotificationsState>(set => ({
 const useCachedNotifications = () => {
   const {state, setNotificationsState} = useNotificationsStateStore()
 
-  const [cachedNotifications, setNotifications] = useState<
-    LocalNotificationData[]
-  >([])
+  const [notifications, setNotifications] = useState<LocalNotificationData[]>(
+    []
+  )
 
   useEffect(() => {
     if (
       state === NotificationsSyncState.Processed &&
-      cachedNotifications.length > 0
+      notifications.length > 0
     ) {
       return
     }
 
     setNotifications(getNotificationsData())
     setNotificationsState(NotificationsSyncState.Processed)
-  }, [cachedNotifications.length, setNotificationsState, state])
-
-  // useEffect(() => {
-  //   // Check if you have unread notifications with the `some` method and it will refresh the global status of notifications.
-  //   refreshContainsUnreadNotifications(
-  //     cachedNotifications.some(notification => !notification.isRead)
-  //   )
-  // }, [cachedNotifications, refreshContainsUnreadNotifications])
+  }, [notifications.length, setNotificationsState, state])
 
   return {
-    cachedNotifications,
+    notifications,
   }
 }
 
diff --git a/src/components/SidebarActions/useNotifications.ts b/src/components/SidebarActions/useNotifications.ts
deleted file mode 100644
index 6c80297a..00000000
--- a/src/components/SidebarActions/useNotifications.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {useCallback, useEffect, useState} from "react"
-import {type NotificationProps} from "./NotificationsModal"
-import useConnection from "@/hooks/matrix/useConnection"
-import useCachedNotifications, {
-  NotificationsSyncState,
-  useNotificationsStateStore,
-} from "./useCachedNotifications"
-import {markAllNotificationsAsRead} from "@/utils/notifications"
-
-const useNotifications = () => {
-  const {client} = useConnection()
-  const {setNotificationsState} = useNotificationsStateStore()
-  const [notifications, setNotifications] = useState<NotificationProps[]>([])
-  const {cachedNotifications} = useCachedNotifications()
-
-  const onRequestChanges = useCallback(() => {
-    setNotificationsState(NotificationsSyncState.Pending)
-  }, [setNotificationsState])
-
-  const onMarkAllAsRead = useCallback(() => {
-    markAllNotificationsAsRead()
-    setNotificationsState(NotificationsSyncState.Processed)
-  }, [setNotificationsState])
-
-  useEffect(() => {
-    if (client === null) {
-      return
-    }
-
-    // Handle history user notifications.
-    const newNotifications: NotificationProps[] = []
-
-    for (const notification of cachedNotifications) {
-      newNotifications.push({
-        body: notification.body,
-        isRead: notification.isRead,
-        notificationTime: notification.notificationTime,
-        notificationId: notification.notificationId,
-        senderName: notification.senderName,
-        avatarSenderUrl: notification.avatarSenderUrl,
-        onRequestChanges,
-      })
-    }
-
-    setNotifications(newNotifications)
-  }, [cachedNotifications, client, onRequestChanges])
-
-  return {notifications, onMarkAllAsRead}
-}
-
-export default useNotifications
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
index 767e1c23..ae721b46 100644
--- a/src/hooks/matrix/useGlobalEventListeners.ts
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -4,30 +4,32 @@ import {
   type MatrixEvent,
   type Room,
   RoomEvent,
-  RoomMemberEvent,
   type RoomState,
   RoomStateEvent,
 } from "matrix-js-sdk"
 import useEventListener from "./useEventListener"
 import useConnection from "./useConnection"
-import {saveNotification} from "@/utils/notifications"
+import {getNotificationsData, saveNotification} from "@/utils/notifications"
 import {
   type LocalNotificationData,
   NotificationsSyncState,
   useNotificationsStateStore,
 } from "@/components/SidebarActions/useCachedNotifications"
-import {useCallback} from "react"
 import {UserPowerLevel} from "@/components/RosterUser"
 import {assert, CommonAssertion, getImageUrl} from "@/utils/util"
+import {useMemo} from "react"
 
 const useGlobalEventListeners = () => {
   const {client} = useConnection()
-  const {setNotificationsState, containsUnreadNotifications} =
-    useNotificationsStateStore()
+  const {onRequestChanges, state} = useNotificationsStateStore()
 
-  const onRequestChanges = useCallback(() => {
-    setNotificationsState(NotificationsSyncState.Pending)
-  }, [setNotificationsState])
+  const containsUnreadNotifications = useMemo(() => {
+    if (state === NotificationsSyncState.Processed) {
+      return false
+    }
+
+    return getNotificationsData().some(notification => notification.isRead)
+  }, [state])
 
   useEventListener(RoomStateEvent.Events, (event, state) => {
     if (event.getType() === EventType.RoomMember) {
@@ -70,6 +72,21 @@ const useGlobalEventListeners = () => {
   return {containsUnreadNotifications}
 }
 
+export const getNotificationFromInviteEvent = (
+  client: MatrixClient,
+  room: Room
+): LocalNotificationData | null => {
+  return {
+    body: "invited you to join this room",
+    notificationId: room.roomId,
+    notificationTime: Date.now(),
+    avatarSenderUrl: getImageUrl(room.getMxcAvatarUrl(), client),
+    senderName: room.name,
+    isRead: false,
+    hasActions: true,
+  }
+}
+
 const getNotificationFromPowerLevelEvent = (
   client: MatrixClient,
   event: MatrixEvent,
@@ -216,9 +233,9 @@ const getNotificationFromMembersEvent = (
     }
   }
 
-  if (member?.membership !== "ban" && prevContent.membership === "ban") {
-    // The user ban was removed.
+  // The user ban was removed.
 
+  if (member?.membership !== "ban" && prevContent.membership === "ban") {
     return {
       body: `your ban has been lifted in the ${roomName}`,
       isRead: false,
diff --git a/src/hooks/matrix/useRooms.ts b/src/hooks/matrix/useRooms.ts
index 45477e89..7adb9558 100644
--- a/src/hooks/matrix/useRooms.ts
+++ b/src/hooks/matrix/useRooms.ts
@@ -6,6 +6,8 @@ import {getDirectRoomsIds, getRoomsFromSpace, normalizeName} from "@/utils/util"
 import {RoomType, type RoomProps} from "@/components/Room"
 import {useActiveSpaceIdStore} from "./useSpaces"
 import useActiveRoomIdStore from "@/hooks/matrix/useActiveRoomIdStore"
+import {saveNotification} from "@/utils/notifications"
+import {getNotificationFromInviteEvent} from "./useGlobalEventListeners"
 
 const useRooms = () => {
   const [rooms, setRooms] = useState<RoomProps[]>([])
@@ -37,6 +39,7 @@ const useRooms = () => {
 
   // Initial gathering of rooms, when a connection is
   // established or re-established.
+
   useEffect(() => {
     if (client === null) {
       console.info("Client is null; cannot fetch rooms.")
@@ -46,7 +49,17 @@ const useRooms = () => {
 
     const storeRooms =
       activeSpaceId === null
-        ? client.getRooms().filter(room => room.getMyMembership() === "join")
+        ? client.getRooms().filter(room => {
+            if (room.getMyMembership() === "join") {
+              return true
+            }
+
+            if (room.getMyMembership() === "invite") {
+              saveNotification(getNotificationFromInviteEvent(client, room))
+            }
+
+            return false
+          })
         : getRoomsFromSpace(activeSpaceId, client)
 
     const directRoomIds = getDirectRoomsIds(client)
diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
index ea9ec5b5..7174390a 100644
--- a/src/utils/notifications.ts
+++ b/src/utils/notifications.ts
@@ -10,7 +10,7 @@ export function getNotificationsData(): LocalNotificationData[] {
   return savedNotifications ? JSON.parse(savedNotifications) : []
 }
 
-function setNotificationsData(notifications: LocalNotificationData[]) {
+export function setNotificationsData(notifications: LocalNotificationData[]) {
   localStorage.setItem(
     NOTIFICATIONS_LOCAL_STORAGE_KEY,
     JSON.stringify(notifications)
@@ -24,6 +24,15 @@ export function saveNotification(notification: LocalNotificationData | null) {
 
   const savedNotifications = getNotificationsData()
 
+  const isExist = savedNotifications.some(
+    prevNotification =>
+      prevNotification.notificationId === notification.notificationId
+  )
+
+  if (isExist) {
+    return
+  }
+
   savedNotifications.push(notification)
 
   setNotificationsData(savedNotifications)
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 64862c64..817ae72c 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -46,7 +46,7 @@ export function timeFormatter(timestamp: number): string {
 
 export enum CommonAssertion {
   EventIdNotFound = "To confirm that an event happened, event id should not be undefined.",
-  UserIdNotFound = "The client must be logged in.",
+  UserIdNotFound = "The client should be logged in.",
 }
 
 export function assert(

From d3d23f4e968a15f1c8f0823f132d7a8b5dcfa3d6 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Fri, 5 Apr 2024 23:21:22 -0400
Subject: [PATCH 55/62] feat: Upgrade `power levels` event for notifications

---
 src/components/UserBar.tsx                    |  37 +++---
 .../ChatContainer/ChatContainer.tsx           |   2 +-
 src/hooks/matrix/useActiveRoom.ts             |   7 +-
 src/hooks/matrix/useGlobalEventListeners.ts   | 106 ++++++++++++------
 src/views/login.tsx                           |   1 +
 5 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/src/components/UserBar.tsx b/src/components/UserBar.tsx
index e1b25fb3..c30a0d5f 100644
--- a/src/components/UserBar.tsx
+++ b/src/components/UserBar.tsx
@@ -1,5 +1,11 @@
 import {useMemo, type FC} from "react"
-import {getImageUrl, stringToColor, trim} from "../utils/util"
+import {
+  assert,
+  CommonAssertion,
+  getImageUrl,
+  stringToColor,
+  trim,
+} from "../utils/util"
 import IconButton from "./IconButton"
 import UserProfile, {
   type UserProfileProps as UserProfileProperties,
@@ -23,14 +29,24 @@ const UserBar: FC<UserBarProps> = ({className}) => {
   const {client, isConnecting} = useConnection()
 
   const userData = useMemo(() => {
-    const userId = client?.getUserId() ?? null
-
-    if (userId === null || client === null) {
+    if (client === null) {
       return
     }
 
-    const user = client?.getUser(userId)
-    const avatarUrl = user?.avatarUrl
+    const userId = client.getUserId()
+
+    // TODO: Improve this so that the user's credentials are obtained if they log in.
+    assert(userId !== null, CommonAssertion.UserIdNotFound)
+
+    const user = client.getUser(userId)
+
+    assert(
+      user !== null,
+      "Your same user should exist for there to be a session."
+    )
+
+    const avatarUrl = user.avatarUrl
+    const displayName = user.displayName ?? userId
 
     const status = client.isLoggedIn()
       ? UserStatus.Online
@@ -38,15 +54,8 @@ const UserBar: FC<UserBarProps> = ({className}) => {
         ? UserStatus.Idle
         : UserStatus.Offline
 
-    if (avatarUrl === undefined) {
-      return
-    }
-
-    const imgUrl = getImageUrl(avatarUrl, client)
-    const displayName = user?.displayName ?? userId
-
     const userBarProperties: UserProfileProperties = {
-      avatarUrl: imgUrl,
+      avatarUrl: getImageUrl(avatarUrl, client),
       displayName: trim(displayName, MAX_NAME_LENGTH),
       text: trim(getUsernameByUserId(userId), MAX_NAME_LENGTH),
       displayNameColor: stringToColor(userId),
diff --git a/src/containers/ChatContainer/ChatContainer.tsx b/src/containers/ChatContainer/ChatContainer.tsx
index 5825bea7..9f83728a 100644
--- a/src/containers/ChatContainer/ChatContainer.tsx
+++ b/src/containers/ChatContainer/ChatContainer.tsx
@@ -110,7 +110,7 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
           <ChatInput
             onAttach={openFilePicker}
             onSend={() => {
-              void sendTextMessage(MsgType.Text, query)
+              void sendTextMessage(query)
 
               setQuery("")
             }}
diff --git a/src/hooks/matrix/useActiveRoom.ts b/src/hooks/matrix/useActiveRoom.ts
index 691a66f7..e326a37f 100644
--- a/src/hooks/matrix/useActiveRoom.ts
+++ b/src/hooks/matrix/useActiveRoom.ts
@@ -168,13 +168,16 @@ const useActiveRoom = () => {
   }, [activeRoomId, clear, client, filesContent])
 
   const sendTextMessage = useCallback(
-    async (type: MsgType, body: string) => {
+    async (body: string) => {
       if (activeRoomId === null || client === null) {
         return
       }
 
       // TODO: Show toast when an error has occurred.
-      await client.sendMessage(activeRoomId, {body, msgtype: type})
+      await client.sendMessage(activeRoomId, {
+        body,
+        msgtype: MsgType.Text,
+      })
     },
     [activeRoomId, client]
   )
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
index ae721b46..e124402f 100644
--- a/src/hooks/matrix/useGlobalEventListeners.ts
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -1,11 +1,10 @@
 import {
-  EventType,
   type MatrixClient,
   type MatrixEvent,
   type Room,
   RoomEvent,
+  RoomMemberEvent,
   type RoomState,
-  RoomStateEvent,
 } from "matrix-js-sdk"
 import useEventListener from "./useEventListener"
 import useConnection from "./useConnection"
@@ -18,10 +17,12 @@ import {
 import {UserPowerLevel} from "@/components/RosterUser"
 import {assert, CommonAssertion, getImageUrl} from "@/utils/util"
 import {useMemo} from "react"
+import useActiveRoomIdStore from "./useActiveRoomIdStore"
 
 const useGlobalEventListeners = () => {
   const {client} = useConnection()
   const {onRequestChanges, state} = useNotificationsStateStore()
+  const {activeRoomId} = useActiveRoomIdStore()
 
   const containsUnreadNotifications = useMemo(() => {
     if (state === NotificationsSyncState.Processed) {
@@ -31,29 +32,63 @@ const useGlobalEventListeners = () => {
     return getNotificationsData().some(notification => notification.isRead)
   }, [state])
 
-  useEventListener(RoomStateEvent.Events, (event, state) => {
-    if (event.getType() === EventType.RoomMember) {
-      if (client === null) {
-        return
-      }
-
-      saveNotification(getNotificationFromMembersEvent(event, client, state))
-      onRequestChanges()
+  useEventListener(
+    RoomMemberEvent.Membership,
+    (event, member, oldMembership) => {
+      console.log("Membership", event, member, oldMembership)
     }
-
-    // TODO: Handle here power level events.
-    if (event.getType() !== EventType.RoomPowerLevels || client === null) {
+  )
+
+  useEventListener(RoomMemberEvent.PowerLevel, (event, member) => {
+    if (
+      client === null ||
+      event.getRoomId() === activeRoomId ||
+      member.userId !== client.getUserId()
+    ) {
       return
     }
 
-    // Handle power levels event for notifications.
     saveNotification(
-      getNotificationFromPowerLevelEvent(client, event, state.roomId)
+      getNotificationFromPowerLevelEvent(
+        client,
+        event,
+        member.powerLevel,
+        member.userId
+      )
     )
-
-    onRequestChanges()
   })
 
+  // useEventListener(RoomStateEvent.Members, (event, state, _member) => {
+  //   if (client === null || activeRoomId === state.roomId) {
+  //     return
+  //   }
+
+  //   console.log(event.getType())
+
+  //   let notification: LocalNotificationData | null = null
+
+  //   switch (event.getType()) {
+  //     case EventType.RoomPowerLevels: {
+  //       notification = getNotificationFromPowerLevelEvent(
+  //         client,
+  //         event,
+  //         state.roomId
+  //       )
+
+  //       break
+  //     }
+  //     case EventType.RoomMember: {
+  //       console.log("Of Members;", _member)
+  //       // notification = getNotificationFromMembersEvent(event, client, state)
+
+  //       break
+  //     }
+  //   }
+
+  //   saveNotification(notification)
+  //   onRequestChanges()
+  // })
+
   useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
     if (toStartOfTimeline) {
       // Ignore past events when starting sync.
@@ -65,6 +100,11 @@ const useGlobalEventListeners = () => {
       return
     }
 
+    if (activeRoomId === room.roomId) {
+      // If the room is the one that is active, no notification is sent.
+      return
+    }
+
     saveNotification(getNotificationFromMentionEvent(client, event, room))
     onRequestChanges()
   })
@@ -90,29 +130,20 @@ export const getNotificationFromInviteEvent = (
 const getNotificationFromPowerLevelEvent = (
   client: MatrixClient,
   event: MatrixEvent,
-  roomId: string
+  currentLevels: number,
+  userId: string
 ): LocalNotificationData | null => {
+  const isAdmin = currentLevels === UserPowerLevel.Admin
+  const isMod = currentLevels === UserPowerLevel.Moderator
   const eventId = event.getId()
-  const userId = client.getUserId()
-  const roomName = client.getRoom(roomId)?.name
-  let powerLevel: string = "Member"
-  let body: string | null = null
+  const roomName = client.getRoom(event.getRoomId())?.name
 
   assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
-  assert(userId !== null, "If userId is undefined, client is not initialized")
-  assert(roomName !== undefined, "The room must exist")
+  assert(roomName !== undefined, "The room should be exist")
 
-  const currentLevels: number = event.getContent().users[userId]
   const previousLevels: number = event.getPrevContent().users[userId] || 0
-
-  if (currentLevels === UserPowerLevel.Admin) {
-    powerLevel = "Admin"
-  } else if (
-    currentLevels >= UserPowerLevel.Moderator &&
-    currentLevels < UserPowerLevel.Admin
-  ) {
-    powerLevel = "Moderator"
-  }
+  const powerLevel = isAdmin ? "Admin" : isMod ? "Moderator" : "Member"
+  let body: string | null = null
 
   if (currentLevels > previousLevels) {
     body = `you have been promoted to ${powerLevel} at ${roomName}`
@@ -120,8 +151,8 @@ const getNotificationFromPowerLevelEvent = (
     body = `you has demoted you to ${powerLevel} at ${roomName}`
   }
 
+  // If the body is null then the power levels event did not occur or was not processed by the room.
   if (body === null) {
-    // If the body is null then the power levels event did not occur or was not processed by the room.
     return null
   }
 
@@ -135,6 +166,7 @@ const getNotificationFromPowerLevelEvent = (
   }
 }
 
+// TODO: If the room is encrypted, you will have to decrypt the message first.
 const getNotificationFromMentionEvent = (
   client: MatrixClient,
   event: MatrixEvent,
@@ -145,8 +177,8 @@ const getNotificationFromMentionEvent = (
   assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
   if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
-    // TODO: If the room is encrypted, you will have to decrypt the message first.
-    throw new Error("Not yet implemented")
+    // If there are no mentions there is no mention event.
+    return null
   }
 
   return {
diff --git a/src/views/login.tsx b/src/views/login.tsx
index 563a12a1..3967ded8 100644
--- a/src/views/login.tsx
+++ b/src/views/login.tsx
@@ -61,6 +61,7 @@ const LoginView: FC = () => {
       credentials === null ||
       isConnecting ||
       syncState === SyncState.Error ||
+      syncState === SyncState.Stopped ||
       client !== null
     ) {
       return

From ec397a9c71c9ff696a1cfeefe45dd45828a61945 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 00:22:00 -0400
Subject: [PATCH 56/62] feat: Upgrade members event for notifications

---
 .../SidebarActions/Notification.tsx           |  3 +-
 src/hooks/matrix/useGlobalEventListeners.ts   | 95 ++++++-------------
 2 files changed, 32 insertions(+), 66 deletions(-)

diff --git a/src/components/SidebarActions/Notification.tsx b/src/components/SidebarActions/Notification.tsx
index 4e11c6f7..95c26506 100644
--- a/src/components/SidebarActions/Notification.tsx
+++ b/src/components/SidebarActions/Notification.tsx
@@ -34,18 +34,17 @@ const Notification: FC<NotificationProps> = ({
     }
 
     void client.joinRoom(notificationId)
-
     deleteNotificationById(notificationId)
     onRequestChanges()
   })
 
+  // TODO: Launch `Toast` if you rejected the room invitation.
   const onLeaveRoom = useMatrixAction(client => {
     if (!hasActions) {
       return
     }
 
     void client.leave(notificationId)
-
     deleteNotificationById(notificationId)
     onRequestChanges()
   })
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
index e124402f..fde55947 100644
--- a/src/hooks/matrix/useGlobalEventListeners.ts
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -3,8 +3,8 @@ import {
   type MatrixEvent,
   type Room,
   RoomEvent,
+  type RoomMember,
   RoomMemberEvent,
-  type RoomState,
 } from "matrix-js-sdk"
 import useEventListener from "./useEventListener"
 import useConnection from "./useConnection"
@@ -35,7 +35,17 @@ const useGlobalEventListeners = () => {
   useEventListener(
     RoomMemberEvent.Membership,
     (event, member, oldMembership) => {
-      console.log("Membership", event, member, oldMembership)
+      if (
+        client === null ||
+        event.getRoomId() === activeRoomId ||
+        member.userId !== client.getUserId()
+      ) {
+        return
+      }
+
+      saveNotification(
+        getNotificationFromMembersEvent(event, client, member, oldMembership)
+      )
     }
   )
 
@@ -58,37 +68,6 @@ const useGlobalEventListeners = () => {
     )
   })
 
-  // useEventListener(RoomStateEvent.Members, (event, state, _member) => {
-  //   if (client === null || activeRoomId === state.roomId) {
-  //     return
-  //   }
-
-  //   console.log(event.getType())
-
-  //   let notification: LocalNotificationData | null = null
-
-  //   switch (event.getType()) {
-  //     case EventType.RoomPowerLevels: {
-  //       notification = getNotificationFromPowerLevelEvent(
-  //         client,
-  //         event,
-  //         state.roomId
-  //       )
-
-  //       break
-  //     }
-  //     case EventType.RoomMember: {
-  //       console.log("Of Members;", _member)
-  //       // notification = getNotificationFromMembersEvent(event, client, state)
-
-  //       break
-  //     }
-  //   }
-
-  //   saveNotification(notification)
-  //   onRequestChanges()
-  // })
-
   useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
     if (toStartOfTimeline) {
       // Ignore past events when starting sync.
@@ -194,28 +173,30 @@ const getNotificationFromMentionEvent = (
 const getNotificationFromMembersEvent = (
   event: MatrixEvent,
   client: MatrixClient,
-  state: RoomState
+  member: RoomMember,
+  oldMembership?: string
 ): LocalNotificationData | null => {
   const eventId = event.getId()
-  const myUserId = client.getUserId()
   const sender = event.getSender()
-  const prevContent = event.getPrevContent()
-  const room = client.getRoom(event.getRoomId())
-  const roomName = room?.name ?? "room"
+  const room = client.getRoom(member.roomId)
   const hasReason = event.getContent().reason
   const reason = hasReason === undefined ? "" : `for <<${hasReason}>>`
 
-  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
-
-  const userId = client.getUserId()
+  assert(
+    room !== null,
+    "There should be a room for there to be room member events."
+  )
 
-  assert(userId !== null, CommonAssertion.UserIdNotFound)
+  assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
-  const member = state.getMember(userId)
+  switch (member.membership) {
+    case "invite": {
+      saveNotification(getNotificationFromInviteEvent(client, room))
 
-  switch (event.getContent().membership) {
+      break
+    }
     case "leave": {
-      if (sender === myUserId && prevContent.membership === "invite") {
+      if (sender === member.userId && oldMembership === "invite") {
         return {
           body: "you rejected the invitation",
           isRead: false,
@@ -224,9 +205,9 @@ const getNotificationFromMembersEvent = (
           senderName: room?.name,
           avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
         }
-      } else if (sender !== myUserId && prevContent.membership === "join") {
+      } else if (sender !== member.userId && oldMembership === "join") {
         return {
-          body: `expelled you from the ${roomName} ${reason}`,
+          body: `expelled you from the ${room.name} ${reason}`,
           isRead: false,
           notificationId: eventId,
           notificationTime: event.localTimestamp,
@@ -237,22 +218,9 @@ const getNotificationFromMembersEvent = (
 
       break
     }
-    case "join": {
-      if (prevContent.membership === "invite") {
-        return {
-          body: `you accepted the invitation to join this room`,
-          isRead: false,
-          notificationId: eventId,
-          notificationTime: event.localTimestamp,
-          senderName: room?.name,
-          avatarSenderUrl: getImageUrl(room?.getMxcAvatarUrl(), client),
-        }
-      }
-      break
-    }
     case "ban": {
       return {
-        body: `you have been banned from the ${roomName} ${reason}`,
+        body: `you have been banned from the ${room.name} ${reason}`,
         isRead: false,
         notificationId: eventId,
         notificationTime: event.localTimestamp,
@@ -266,10 +234,9 @@ const getNotificationFromMembersEvent = (
   }
 
   // The user ban was removed.
-
-  if (member?.membership !== "ban" && prevContent.membership === "ban") {
+  if (member.membership !== "ban" && oldMembership === "ban") {
     return {
-      body: `your ban has been lifted in the ${roomName}`,
+      body: `your ban has been lifted in the ${room.name}`,
       isRead: false,
       notificationId: eventId,
       notificationTime: event.localTimestamp,

From b702ef1b9e1505b452fc4f09aefea26eb540fa38 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 00:28:47 -0400
Subject: [PATCH 57/62] refactor: Fix PR comments

---
 src/components/SidebarActions/NotificationsModal.tsx |  2 +-
 src/hooks/matrix/useGlobalEventListeners.ts          | 12 ++++++++----
 src/utils/util.ts                                    |  1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index 1c719e78..b264fcad 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -53,7 +53,6 @@ const NotificationsModal: FC = () => {
           onClick={() => {
             markAllNotificationsAsRead()
             onRequestChanges()
-
             clearActiveSidebarModal()
           }}
         />
@@ -78,6 +77,7 @@ const NotificationsModal: FC = () => {
 
         {notificationsMarkAsRead.map(notification => (
           <Notification
+            key={notification.notificationId}
             {...notification}
             hasActions={notification.hasActions ?? false}
             onRequestChanges={onRequestChanges}
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
index fde55947..f74a9db1 100644
--- a/src/hooks/matrix/useGlobalEventListeners.ts
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -46,6 +46,8 @@ const useGlobalEventListeners = () => {
       saveNotification(
         getNotificationFromMembersEvent(event, client, member, oldMembership)
       )
+
+      onRequestChanges()
     }
   )
 
@@ -66,21 +68,23 @@ const useGlobalEventListeners = () => {
         member.userId
       )
     )
+
+    onRequestChanges()
   })
 
   useEventListener(RoomEvent.Timeline, (event, room, toStartOfTimeline) => {
+    // Ignore past events when starting sync.
     if (toStartOfTimeline) {
-      // Ignore past events when starting sync.
       return
     }
 
+    // If there is no room, the event may not be a mention event.
     if (room === undefined || client === null) {
-      // If there is no room, the event may not be a mention event.
       return
     }
 
+    // If the room is the one that is active, no notification is sent.
     if (activeRoomId === room.roomId) {
-      // If the room is the one that is active, no notification is sent.
       return
     }
 
@@ -155,8 +159,8 @@ const getNotificationFromMentionEvent = (
 
   assert(eventId !== undefined, CommonAssertion.EventIdNotFound)
 
+  // If there are no mentions there is no mention event.
   if (!event.getContent()["m.mentions"]?.user_ids?.includes(room.myUserId)) {
-    // If there are no mentions there is no mention event.
     return null
   }
 
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 817ae72c..dc931dd3 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -312,6 +312,7 @@ export async function getRoomMembers(
     }
 
     adminUsersId.push(adminId)
+
     const member = joinedMembers[adminId]
     const displayName = normalizeName(member.display_name)
     const isAdmin = powerLevel === UserPowerLevel.Admin

From 2bbbeaefcdaa628430e89c782df889660aedfda4 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 00:33:56 -0400
Subject: [PATCH 58/62] fix: Upgrade `saveNotification` function

---
 src/utils/notifications.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
index 7174390a..d08ffa9e 100644
--- a/src/utils/notifications.ts
+++ b/src/utils/notifications.ts
@@ -33,7 +33,7 @@ export function saveNotification(notification: LocalNotificationData | null) {
     return
   }
 
-  savedNotifications.push(notification)
+  savedNotifications.unshift(notification)
 
   setNotificationsData(savedNotifications)
 }

From 528df73f2cf6d009e4f8a65bf32c40f68311a6e2 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 09:50:01 -0400
Subject: [PATCH 59/62] fix: Resolve PR comments

---
 src/components/SidebarActions/NotificationsModal.tsx |  1 +
 src/containers/ChatContainer/ChatContainer.tsx       | 11 +++++------
 src/containers/ChatContainer/useChatInput.ts         |  6 +++---
 src/hooks/matrix/useGlobalEventListeners.ts          |  2 +-
 src/utils/notifications.ts                           |  4 ++--
 src/utils/util.ts                                    |  5 +----
 6 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/SidebarActions/NotificationsModal.tsx b/src/components/SidebarActions/NotificationsModal.tsx
index b264fcad..562eda82 100644
--- a/src/components/SidebarActions/NotificationsModal.tsx
+++ b/src/components/SidebarActions/NotificationsModal.tsx
@@ -68,6 +68,7 @@ const NotificationsModal: FC = () => {
         <div className="bg-slate-100">
           {notificationsUnread.map(notification => (
             <Notification
+              key={notification.notificationId}
               {...notification}
               hasActions={notification.hasActions ?? false}
               onRequestChanges={onRequestChanges}
diff --git a/src/containers/ChatContainer/ChatContainer.tsx b/src/containers/ChatContainer/ChatContainer.tsx
index 9f83728a..1664f7b3 100644
--- a/src/containers/ChatContainer/ChatContainer.tsx
+++ b/src/containers/ChatContainer/ChatContainer.tsx
@@ -7,7 +7,6 @@ import ImageMessage from "../../components/ImageMessage"
 import TextMessage from "../../components/TextMessage"
 import EventMessage from "../../components/EventMessage"
 import {twMerge} from "tailwind-merge"
-import {MsgType} from "matrix-js-sdk"
 import Button, {ButtonVariant} from "../../components/Button"
 import UnreadIndicator from "../../components/UnreadIndicator"
 import {
@@ -27,7 +26,7 @@ export type ChatContainerProps = {
 }
 
 const ChatContainer: FC<ChatContainerProps> = ({className}) => {
-  const {query, setQuery} = useChatInput()
+  const {messageText, setMessageText} = useChatInput()
 
   const {
     messagesProp,
@@ -110,12 +109,12 @@ const ChatContainer: FC<ChatContainerProps> = ({className}) => {
           <ChatInput
             onAttach={openFilePicker}
             onSend={() => {
-              void sendTextMessage(query)
+              void sendTextMessage(messageText)
 
-              setQuery("")
+              setMessageText("")
             }}
-            onValueChange={setQuery}
-            value={query}
+            onValueChange={setMessageText}
+            value={messageText}
           />
 
           <div className="flex gap-3">
diff --git a/src/containers/ChatContainer/useChatInput.ts b/src/containers/ChatContainer/useChatInput.ts
index 54658d56..6c9a8d98 100644
--- a/src/containers/ChatContainer/useChatInput.ts
+++ b/src/containers/ChatContainer/useChatInput.ts
@@ -6,8 +6,8 @@ import {useCallback, useEffect, useState} from "react"
 const useChatInput = () => {
   const {client} = useConnection()
   const {activeRoomId} = useActiveRoomIdStore()
-  const [query, setQuery] = useState("")
-  const debouncedText = useDebounced(query, 500)
+  const [messageText, setMessageText] = useState("")
+  const debouncedText = useDebounced(messageText, 500)
 
   const sendEventTyping = useCallback(async () => {
     if (activeRoomId === null || client === null) {
@@ -25,7 +25,7 @@ const useChatInput = () => {
     void sendEventTyping()
   }, [debouncedText, sendEventTyping])
 
-  return {query, setQuery}
+  return {messageText, setMessageText}
 }
 
 export default useChatInput
diff --git a/src/hooks/matrix/useGlobalEventListeners.ts b/src/hooks/matrix/useGlobalEventListeners.ts
index f74a9db1..54cc6250 100644
--- a/src/hooks/matrix/useGlobalEventListeners.ts
+++ b/src/hooks/matrix/useGlobalEventListeners.ts
@@ -131,7 +131,7 @@ const getNotificationFromPowerLevelEvent = (
   if (currentLevels > previousLevels) {
     body = `you have been promoted to ${powerLevel} at ${roomName}`
   } else if (currentLevels < previousLevels) {
-    body = `you has demoted you to ${powerLevel} at ${roomName}`
+    body = `you have been demoted to ${powerLevel} at ${roomName}`
   }
 
   // If the body is null then the power levels event did not occur or was not processed by the room.
diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
index d08ffa9e..d543c3d1 100644
--- a/src/utils/notifications.ts
+++ b/src/utils/notifications.ts
@@ -24,12 +24,12 @@ export function saveNotification(notification: LocalNotificationData | null) {
 
   const savedNotifications = getNotificationsData()
 
-  const isExist = savedNotifications.some(
+  const exists = savedNotifications.some(
     prevNotification =>
       prevNotification.notificationId === notification.notificationId
   )
 
-  if (isExist) {
+  if (exists) {
     return
   }
 
diff --git a/src/utils/util.ts b/src/utils/util.ts
index dc931dd3..20932f18 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -154,10 +154,7 @@ export async function getImage(data: string): Promise<HTMLImageElement> {
 }
 
 // TODO: Is temporary, change it when the matrix js sdk is updated.
-export function checkIsDirectRoom(
-  client: MatrixClient | null,
-  room: Room
-): boolean {
+export function isDirectRoom(client: MatrixClient | null, room: Room): boolean {
   if (client === null) {
     return false
   }

From d936fd5e15980ffdd6948285c535e448a73e3e45 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 10:05:51 -0400
Subject: [PATCH 60/62] fix: Use key for lists

---
 .eslintrc.json                                       |  5 ++++-
 package.json                                         |  2 +-
 src/components/ContextMenu.tsx                       |  2 +-
 src/components/Input.tsx                             |  3 ++-
 src/components/Modal.tsx                             |  3 ++-
 src/components/SidebarActions/DirectMessageModal.tsx | 10 ++++++----
 src/components/Typography.tsx                        |  2 +-
 src/stories/eventMessage.stories.tsx                 |  1 -
 src/stories/keyCue.stories.tsx                       |  1 -
 yarn.lock                                            |  8 ++++----
 10 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 13a31dab..38103000 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -23,6 +23,8 @@
     ]
   },
   "extends": [
+    "eslint:recommended",
+    "plugin:react/jsx-runtime",
     "standard-with-typescript",
     "eslint-config-prettier",
     "plugin:storybook/recommended",
@@ -82,6 +84,7 @@
     ],
     "promise/always-return": "off",
     "unicorn/number-literal-case": "off",
-    "unicorn/prefer-spread": "off"
+    "unicorn/prefer-spread": "off",
+    "react/jsx-key": "error"
   }
 }
diff --git a/package.json b/package.json
index c3e21b3c..65c62d6d 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-no-use-extend-native": "^0.5.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-regexp": "^2.3.0",
     "eslint-plugin-sonarjs": "^0.24.0",
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 8dd4de01..8a939af3 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import type React from "react"
 import {useCallback, useEffect, type FC} from "react"
 import {create} from "zustand"
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 89bfcac7..f3fef455 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,4 +1,5 @@
-import React, {useState, type FC} from "react"
+import type React from "react";
+import {useState, type FC} from "react"
 import IconButton from "./IconButton"
 import Label from "./Label"
 import {twMerge} from "tailwind-merge"
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index fa7b9af3..3e0d0060 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,5 +1,6 @@
 import {assert} from "@/utils/util"
-import React, {type FC} from "react"
+import type React from "react";
+import {type FC} from "react"
 import {createPortal} from "react-dom"
 import {twMerge} from "tailwind-merge"
 
diff --git a/src/components/SidebarActions/DirectMessageModal.tsx b/src/components/SidebarActions/DirectMessageModal.tsx
index 4d48e66c..72ae0fa9 100644
--- a/src/components/SidebarActions/DirectMessageModal.tsx
+++ b/src/components/SidebarActions/DirectMessageModal.tsx
@@ -118,11 +118,13 @@ const DirectMessageModal: FC = () => {
 
         <div className="flex h-full flex-col gap-1 overflow-y-scroll scrollbar-hide">
           {results === null
-            ? directChats.map(directChatProps => (
-                <DirectChatRecent {...directChatProps} />
+            ? directChats.map((directChatProps, index) => (
+                <DirectChatRecent key={index} {...directChatProps} />
               ))
-            : results.map(userProps => (
-                <div className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
+            : results.map((userProps, index) => (
+                <div
+                  key={index}
+                  className="w-full cursor-pointer rounded-lg p-2 hover:bg-neutral-200">
                   <UserProfile {...userProps} />
                 </div>
               ))}
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
index c80fe0d5..f5556e57 100644
--- a/src/components/Typography.tsx
+++ b/src/components/Typography.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import type React from "react"
 import {type FC} from "react"
 import {twMerge} from "tailwind-merge"
 
diff --git a/src/stories/eventMessage.stories.tsx b/src/stories/eventMessage.stories.tsx
index 7a249a2d..19546bc0 100644
--- a/src/stories/eventMessage.stories.tsx
+++ b/src/stories/eventMessage.stories.tsx
@@ -2,7 +2,6 @@ import {type Meta, type StoryObj} from "@storybook/react"
 import EventMessage, {
   type EventMessageProps as EventMessageProperties,
 } from "../components/EventMessage"
-import React from "react"
 
 type Story = StoryObj<typeof EventMessage>
 
diff --git a/src/stories/keyCue.stories.tsx b/src/stories/keyCue.stories.tsx
index d18645ef..6f799543 100644
--- a/src/stories/keyCue.stories.tsx
+++ b/src/stories/keyCue.stories.tsx
@@ -2,7 +2,6 @@ import {type Meta, type StoryObj} from "@storybook/react"
 import KeyCue, {
   type KeyCueProps as KeyCueProperties,
 } from "../components/KeyCue"
-import React from "react"
 
 type Story = StoryObj<typeof KeyCue>
 
diff --git a/yarn.lock b/yarn.lock
index bed511bf..be2e9212 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7550,10 +7550,10 @@ eslint-plugin-react@^7.27.1:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.8"
 
-eslint-plugin-react@^7.34.0:
-  version "7.34.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.0.tgz#ab71484d54fc409c37025c5eca00eb4177a5e88c"
-  integrity sha512-MeVXdReleBTdkz/bvcQMSnCXGi+c9kvy51IpinjnJgutl3YTHWsDdke7Z1ufZpGfDG8xduBDKyjtB9JH1eBKIQ==
+eslint-plugin-react@^7.34.1:
+  version "7.34.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz#6806b70c97796f5bbfb235a5d3379ece5f4da997"
+  integrity sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==
   dependencies:
     array-includes "^3.1.7"
     array.prototype.findlast "^1.2.4"

From 596bd5ad3b7417db93ffaa665f4153fc9112696a Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 10:07:12 -0400
Subject: [PATCH 61/62] refactor: Use yarn for `pre-commit`

---
 .husky/pre-commit | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index bb8caf10..f780c297 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx eslint "src/**/*.ts"
+yarn lint
 npx commitlint --edit "$1"

From a21aae810a549bc07eaaa722febfb28fa157faa8 Mon Sep 17 00:00:00 2001
From: criss8X <carralerocristianx@gmail.com>
Date: Sat, 6 Apr 2024 10:27:50 -0400
Subject: [PATCH 62/62] fix: Fix prettier problems

---
 .husky/pre-commit        | 2 +-
 src/components/Input.tsx | 2 +-
 src/components/Modal.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index f780c297..86287a5c 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn lint
-npx commitlint --edit "$1"
+yarn commitlint --edit
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index f3fef455..ed8c971a 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,4 +1,4 @@
-import type React from "react";
+import type React from "react"
 import {useState, type FC} from "react"
 import IconButton from "./IconButton"
 import Label from "./Label"
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 3e0d0060..4e5f1e4f 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,5 +1,5 @@
 import {assert} from "@/utils/util"
-import type React from "react";
+import type React from "react"
 import {type FC} from "react"
 import {createPortal} from "react-dom"
 import {twMerge} from "tailwind-merge"