Fix typo and add subtitle to pinned posts

app/screens/channel_info/options/pinned_messages/index.ts

@@ -6,7 +6,7 @@ import withObservables from '@nozbe/with-observables';
 import {of as of$} from 'rxjs';
 import {switchMap} from 'rxjs/operators';
 
-import {observeChannelInfo} from '@queries/servers/channel';
+import {observeChannel, observeChannelInfo} from '@queries/servers/channel';
 
 import PinnedMessages from './pinned_messages';
 
@@ -17,13 +17,16 @@ type Props = WithDatabaseArgs & {
 }
 
 const enhanced = withObservables(['channelId'], ({channelId, database}: Props) => {
+    const channel = observeChannel(database, channelId);
     const info = observeChannelInfo(database, channelId);
     const count = info.pipe(
         switchMap((i) => of$(i?.pinnedPostCount || 0)),
     );
+    const displayName = channel.pipe(switchMap((c) => of$(c?.displayName)));
 
     return {
         count,
+        displayName,
     };
 });
 

app/screens/channel_info/options/pinned_messages/pinned_messages.tsx

@@ -8,19 +8,34 @@ import {Platform} from 'react-native';
 import {goToScreen} from '@app/screens/navigation';
 import OptionItem from '@components/option_item';
 import {Screens} from '@constants';
+import {useTheme} from '@context/theme';
 import {preventDoubleTap} from '@utils/tap';
+import {changeOpacity} from '@utils/theme';
 
 type Props = {
     channelId: string;
     count: number;
+    displayName: string;
 }
 
-const PinnedMessages = ({channelId, count}: Props) => {
+const PinnedMessages = ({channelId, count, displayName}: Props) => {
+    const theme = useTheme();
     const {formatMessage} = useIntl();
     const title = formatMessage({id: 'channel_info.pinned_messages', defaultMessage: 'Pinned Messages'});
 
     const goToPinnedMessages = preventDoubleTap(() => {
-        goToScreen(Screens.PINNED_MESSAGES, title, {channelId});
+        const options = {
+            topBar: {
+                title: {
+                    text: title,
+                },
+                subtitle: {
+                    color: changeOpacity(theme.sidebarHeaderTextColor, 0.72),
+                    text: displayName,
+                },
+            },
+        };
+        goToScreen(Screens.PINNED_MESSAGES, title, {channelId}, options);
     });
 
     return (

app/screens/pinned_messages/empty/index.tsx

@@ -43,7 +43,7 @@ function EmptySavedPosts() {
                 testID='pinned_messages.empty.title'
             />
             <FormattedText
-                defaultMessage={'To pin important messages, long-press on a message and chose Pin To Channel. Pinned messages will be visible to everyone in this channel.'}
+                defaultMessage={'To pin important messages, long-press on a message and choose Pin To Channel. Pinned messages will be visible to everyone in this channel.'}
                 id='pinned_messages.empty.paragraph'
                 style={styles.paragraph}
                 testID='pinned_messages.empty.paragraph'

assets/base/i18n/en.json

@@ -597,7 +597,7 @@
   "permalink.show_dialog_warn.description": "You are about to join {channel} without explicitly being added by the channel admin. Are you sure you wish to join this private channel?",
   "permalink.show_dialog_warn.join": "Join",
   "permalink.show_dialog_warn.title": "Join private channel",
-  "pinned_messages.empty.paragraph": "To pin important messages, long-press on a message and chose Pin To Channel. Pinned messages will be visible to everyone in this channel.",
+  "pinned_messages.empty.paragraph": "To pin important messages, long-press on a message and choose Pin To Channel. Pinned messages will be visible to everyone in this channel.",
   "pinned_messages.empty.title": "No pinned messages yet",
   "plus_menu.browse_channels.title": "Browse Channels",
   "plus_menu.create_new_channel.title": "Create New Channel",