Pinned Messages (#2081)

* add pinned room events hook

* room pinned message - WIP

* add room event hook

* fetch pinned messages before displaying

* use react-query in room event hook

* disable staleTime and gc to 1 hour in room event hook

* use room event hook in reply component

* render pinned messages

* add option to pin/unpin messages

* remove message base from message placeholders and add variant

* display message placeholder while loading pinned messages

* render pinned event error

* show no pinned message placeholder

* fix message placeholder flickering

src/app/hooks/useRoomPinnedEvents.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
+import { Room } from 'matrix-js-sdk';
+import { StateEvent } from '../../types/matrix/room';
+import { useStateEvent } from './useStateEvent';
+
+export const useRoomPinnedEvents = (room: Room): string[] => {
+  const pinEvent = useStateEvent(room, StateEvent.RoomPinnedEvents);
+  const events = useMemo(() => {
+    const content = pinEvent?.getContent<RoomPinnedEventsEventContent>();
+    return content?.pinned ?? [];
+  }, [pinEvent]);
+
+  return events;
+};