Redesign user profile view (#2396)

* WIP - new profile view

* render common rooms in user profile

* add presence component

* WIP - room user profile

* temp hide profile button

* show mutual rooms in spaces, rooms and direct messages categories

* add message button

* add option to change user powers in profile

* improve ban info and option to unban

* add share user button in user profile

* add option to block user in user profile

* improve blocked user alert body

* add moderation tool in user profile

* open profile view on left side in member drawer

* open new user profile in all places

src/app/hooks/useUserPresence.ts

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from 'react';
+import { User, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
+import { useMatrixClient } from './useMatrixClient';
+
+export enum Presence {
+  Online = 'online',
+  Unavailable = 'unavailable',
+  Offline = 'offline',
+}
+
+export type UserPresence = {
+  presence: Presence;
+  status?: string;
+  active: boolean;
+  lastActiveTs?: number;
+};
+
+const getUserPresence = (user: User): UserPresence => ({
+  presence: user.presence as Presence,
+  status: user.presenceStatusMsg,
+  active: user.currentlyActive,
+  lastActiveTs: user.getLastActiveTs(),
+});
+
+export const useUserPresence = (userId: string): UserPresence | undefined => {
+  const mx = useMatrixClient();
+  const user = mx.getUser(userId);
+
+  const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined));
+
+  useEffect(() => {
+    const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => {
+      if (u.userId === user?.userId) {
+        setPresence(getUserPresence(user));
+      }
+    };
+    user?.on(UserEvent.Presence, updatePresence);
+    user?.on(UserEvent.CurrentlyActive, updatePresence);
+    user?.on(UserEvent.LastPresenceTs, updatePresence);
+    return () => {
+      user?.removeListener(UserEvent.Presence, updatePresence);
+      user?.removeListener(UserEvent.CurrentlyActive, updatePresence);
+      user?.removeListener(UserEvent.LastPresenceTs, updatePresence);
+    };
+  }, [user]);
+
+  return presence;
+};
+
+export const usePresenceLabel = (): Record<Presence, string> =>
+  useMemo(
+    () => ({
+      [Presence.Online]: 'Active',
+      [Presence.Unavailable]: 'Busy',
+      [Presence.Offline]: 'Away',
+    }),
+    []
+  );