feat: add the abilty to view pinned messages

src/Generic.tsx

@@ -382,6 +382,7 @@ export const app = {
   logOut: () => {},
   openMemberList: (data: Channel | Server | null) => {},
   openChannelContextMenu: (c: Channel | null) => {},
+  openPinnedMessagesMenu: (c: Channel | null) => {},
   openStatusMenu: (state: boolean) => {},
   openReportMenu: (object: ReportedObject | null) => {},
   openDeletionConfirmationModal: (object: DeletableObject | null) => {},

src/Modals.tsx

@@ -21,6 +21,7 @@ import {
   ChannelInfoSheet,
   MemberListSheet,
   MessageMenuSheet,
+  PinnedMessagesSheet,
   ProfileSheet,
   ReportSheet,
   ServerInfoSheet,
@@ -121,6 +122,7 @@ export const Modals = observer(() => {
       <ReportSheet />
       <ChannelInfoSheet />
       <MemberListSheet />
+      <PinnedMessagesSheet />
       <ServerInfoSheet />
       <FixedModal
         visible={!!imageViewerState.i}

src/components/common/messaging/Message.tsx

@@ -30,6 +30,7 @@ import {getReadableFileSize, openUrl, parseRevoltNodes} from '@rvmob/lib/utils';
 type MessageProps = {
   message: RevoltMessage;
   grouped: boolean;
+  noTopMargin?: boolean;
   queued?: boolean;
   onUserPress?: any;
   onUsernamePress?: any;
@@ -189,9 +190,10 @@ export const Message = observer((props: MessageProps) => {
         }>
         <View
           style={{
-            marginTop: props.grouped
-              ? 0
-              : (app.settings.get('ui.messaging.messageSpacing') as number),
+            marginTop:
+              props.grouped || props.noTopMargin
+                ? 0
+                : (app.settings.get('ui.messaging.messageSpacing') as number),
           }}
         />
         {props.message.author?.relationship === 'Blocked' ? (

src/components/sheets/PinnedMessagesSheet.tsx

@@ -0,0 +1,95 @@
+import {useContext, useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
+import {observer} from 'mobx-react-lite';
+
+import BottomSheetCore from '@gorhom/bottom-sheet';
+import {useBackHandler} from '@react-native-community/hooks';
+
+import type {Channel, Message as RevoltMessage} from 'revolt.js';
+
+import {setFunction} from '@rvmob/Generic';
+import {Text} from '@rvmob/components/common/atoms';
+import {BottomSheet} from '@rvmob/components/common/BottomSheet';
+import {Message} from '@rvmob/components/common/messaging';
+import {commonValues, ThemeContext} from '@rvmob/lib/themes';
+
+export const PinnedMessagesSheet = observer(() => {
+  const {currentTheme} = useContext(ThemeContext);
+
+  const [channel, setChannel] = useState(null as Channel | null);
+  const [pinnedMessages, setPinnedMessages] = useState([] as RevoltMessage[]);
+
+  const sheetRef = useRef<BottomSheetCore>(null);
+
+  useBackHandler(() => {
+    if (channel) {
+      sheetRef.current?.close();
+      setChannel(null);
+      return true;
+    }
+
+    return false;
+  });
+
+  setFunction('openPinnedMessagesMenu', async (c: Channel | null) => {
+    setChannel(c);
+    c ? sheetRef.current?.expand() : sheetRef.current?.close();
+  });
+
+  useEffect(() => {
+    async function fetchMessages() {
+      if (!channel) {
+        return;
+      }
+      const m = await channel.search({pinned: true});
+      setPinnedMessages(m);
+    }
+    fetchMessages();
+  }, [channel]);
+
+  return (
+    <BottomSheet sheetRef={sheetRef}>
+      <View style={{paddingHorizontal: commonValues.sizes.xl}}>
+        {!channel ? (
+          <></>
+        ) : (
+          <>
+            <View style={{justifyContent: 'center'}}>
+              <Text type={'h1'}>Pinned messages</Text>
+              <Text
+                colour={currentTheme.foregroundSecondary}
+                style={{
+                  marginVertical: commonValues.sizes.small,
+                }}>
+                {`${pinnedMessages.length} ${
+                  pinnedMessages.length === 1
+                    ? 'pinned message'
+                    : 'pinned messages'
+                }`}
+              </Text>
+              {pinnedMessages.length > 0 &&
+                pinnedMessages.map(message => {
+                  return (
+                    <View
+                      style={{
+                        backgroundColor: currentTheme.backgroundPrimary,
+                        padding: commonValues.sizes.medium,
+                        borderRadius: commonValues.sizes.medium,
+                        marginBlockEnd: commonValues.sizes.xl,
+                      }}>
+                      <Message
+                        key={message._id}
+                        message={message}
+                        grouped={false}
+                        noTopMargin={true}
+                      />
+                    </View>
+                  );
+                })}
+            </View>
+          </>
+        )}
+      </View>
+    </BottomSheet>
+  );
+});

src/components/sheets/index.tsx

@@ -2,6 +2,7 @@ export {BotInviteSheet} from './BotInviteSheet';
 export {ChannelInfoSheet} from './ChannelInfoSheet';
 export {MemberListSheet} from './MemberListSheet';
 export {MessageMenuSheet} from './MessageMenuSheet';
+export {PinnedMessagesSheet} from './PinnedMessagesSheet';
 export {ProfileSheet} from './ProfileSheet';
 export {ReportSheet} from './ReportSheet';
 export {ServerInfoSheet} from './ServerInfoSheet';

src/components/views/ChannelView.tsx

@@ -3,6 +3,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {ErrorBoundary} from 'react-error-boundary';
 import {observer} from 'mobx-react-lite';
 
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import {Channel} from 'revolt.js';
@@ -103,6 +104,18 @@ export const ChannelView = observer(({channel}: {channel: CVChannel}) => {
                   ? 'Saved Notes'
                   : channel.name}
               </Text>
+              {channel.channel_type !== 'VoiceChannel' ? (
+                <View style={{marginEnd: 16}}>
+                  <TouchableOpacity
+                    onPress={async () => app.openPinnedMessagesMenu(channel)}>
+                    <MaterialCommunityIcon
+                      name="pin"
+                      size={24}
+                      color={currentTheme.foregroundPrimary}
+                    />
+                  </TouchableOpacity>
+                </View>
+              ) : null}
               {channel.channel_type === 'Group' || channel.server ? (
                 <View style={{marginEnd: 16}}>
                   <TouchableOpacity