diff --git a/keyserver/src/fetchers/message-fetchers.js b/keyserver/src/fetchers/message-fetchers.js
index 7a1df0152..0e5d016a2 100644
--- a/keyserver/src/fetchers/message-fetchers.js
+++ b/keyserver/src/fetchers/message-fetchers.js
@@ -1,990 +1,991 @@
 // @flow
 
 import invariant from 'invariant';
 
 import {
   sortMessageInfoList,
   shimUnsupportedRawMessageInfos,
 } from 'lib/shared/message-utils.js';
 import { messageSpecs } from 'lib/shared/messages/message-specs.js';
 import { getNotifCollapseKey } from 'lib/shared/notif-utils.js';
 import { hasMinCodeVersion } from 'lib/shared/version-utils.js';
 import {
   messageTypes,
   type MessageType,
   assertMessageType,
 } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawComposableMessageInfo,
   type RawRobotextMessageInfo,
   type EditMessageContent,
   type MessageSelectionCriteria,
   type MessageTruncationStatus,
   messageTruncationStatus,
   type FetchMessageInfosResult,
   defaultMaxMessageAge,
   type FetchPinnedMessagesRequest,
   type FetchPinnedMessagesResult,
-  isMessageSidebarSourceReactionOrEdit,
+  isMessageSidebarSourceReactionEditOrPin,
   type SearchMessagesResponse,
 } from 'lib/types/message-types.js';
 import { defaultNumberPerThread } from 'lib/types/message-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { ServerError } from 'lib/utils/errors.js';
 
 import {
   constructMediaFromMediaMessageContentsAndUploadRows,
   imagesFromRow,
 } from './upload-fetchers.js';
 import {
   dbQuery,
   SQL,
   mergeOrConditions,
   mergeAndConditions,
 } from '../database/database.js';
 import { processQueryForSearch } from '../database/search-utils.js';
 import type { SQLStatementType } from '../database/types.js';
 import type { PushInfo } from '../push/send.js';
 import type { Viewer } from '../session/viewer.js';
 import {
   creationString,
   localIDFromCreationString,
 } from '../utils/idempotent.js';
 
 export type CollapsableNotifInfo = {
   collapseKey: ?string,
   existingMessageInfos: RawMessageInfo[],
   newMessageInfos: RawMessageInfo[],
 };
 export type FetchCollapsableNotifsResult = {
   [userID: string]: CollapsableNotifInfo[],
 };
 
 const visibleExtractString = `$.${threadPermissions.VISIBLE}.value`;
 
 // This function doesn't filter RawMessageInfos based on what messageTypes the
 // client supports, since each user can have multiple clients. The caller must
 // handle this filtering.
 async function fetchCollapsableNotifs(
   pushInfo: PushInfo,
 ): Promise<FetchCollapsableNotifsResult> {
   // First, we need to fetch any notifications that should be collapsed
   const usersToCollapseKeysToInfo = {};
   const usersToCollapsableNotifInfo = {};
   for (const userID in pushInfo) {
     usersToCollapseKeysToInfo[userID] = {};
     usersToCollapsableNotifInfo[userID] = [];
     for (let i = 0; i < pushInfo[userID].messageInfos.length; i++) {
       const rawMessageInfo = pushInfo[userID].messageInfos[i];
       const messageData = pushInfo[userID].messageDatas[i];
       const collapseKey = getNotifCollapseKey(rawMessageInfo, messageData);
       if (!collapseKey) {
         const collapsableNotifInfo = {
           collapseKey,
           existingMessageInfos: [],
           newMessageInfos: [rawMessageInfo],
         };
         usersToCollapsableNotifInfo[userID].push(collapsableNotifInfo);
         continue;
       }
       if (!usersToCollapseKeysToInfo[userID][collapseKey]) {
         usersToCollapseKeysToInfo[userID][collapseKey] = {
           collapseKey,
           existingMessageInfos: [],
           newMessageInfos: [],
         };
       }
       usersToCollapseKeysToInfo[userID][collapseKey].newMessageInfos.push(
         rawMessageInfo,
       );
     }
   }
 
   const sqlTuples = [];
   for (const userID in usersToCollapseKeysToInfo) {
     const collapseKeysToInfo = usersToCollapseKeysToInfo[userID];
     for (const collapseKey in collapseKeysToInfo) {
       sqlTuples.push(
         SQL`(n.user = ${userID} AND n.collapse_key = ${collapseKey})`,
       );
     }
   }
 
   if (sqlTuples.length === 0) {
     return usersToCollapsableNotifInfo;
   }
 
   const collapseQuery = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type,
       m.user AS creatorID, m.target_message as targetMessageID,
       stm.permissions AS subthread_permissions, n.user,
       n.collapse_key, up.id AS uploadID, up.type AS uploadType,
       up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM notifications n
     LEFT JOIN messages m ON m.id = n.message
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN memberships mm ON mm.thread = m.thread AND mm.user = n.user
     LEFT JOIN memberships stm
       ON m.type = ${messageTypes.CREATE_SUB_THREAD}
         AND stm.thread = m.content AND stm.user = n.user
     WHERE n.rescinded = 0 AND
       JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE AND
   `;
   collapseQuery.append(mergeOrConditions(sqlTuples));
   collapseQuery.append(SQL`ORDER BY m.time DESC, m.id DESC`);
   const [collapseResult] = await dbQuery(collapseQuery);
 
   const rowsByUser = new Map();
   for (const row of collapseResult) {
     const user = row.user.toString();
     const currentRowsForUser = rowsByUser.get(user);
     if (currentRowsForUser) {
       currentRowsForUser.push(row);
     } else {
       rowsByUser.set(user, [row]);
     }
   }
 
   const derivedMessages = await fetchDerivedMessages(collapseResult);
   for (const userRows of rowsByUser.values()) {
     const messages = parseMessageSQLResult(userRows, derivedMessages);
     for (const message of messages) {
       const { rawMessageInfo, rows } = message;
       const [row] = rows;
       const info = usersToCollapseKeysToInfo[row.user][row.collapse_key];
       info.existingMessageInfos.push(rawMessageInfo);
     }
   }
 
   for (const userID in usersToCollapseKeysToInfo) {
     const collapseKeysToInfo = usersToCollapseKeysToInfo[userID];
     for (const collapseKey in collapseKeysToInfo) {
       const info = collapseKeysToInfo[collapseKey];
       usersToCollapsableNotifInfo[userID].push({
         collapseKey: info.collapseKey,
         existingMessageInfos: sortMessageInfoList(info.existingMessageInfos),
         newMessageInfos: sortMessageInfoList(info.newMessageInfos),
       });
     }
   }
 
   return usersToCollapsableNotifInfo;
 }
 
 type MessageSQLResult = $ReadOnlyArray<{
   rawMessageInfo: RawMessageInfo,
   rows: $ReadOnlyArray<Object>,
 }>;
 function parseMessageSQLResult(
   rows: $ReadOnlyArray<Object>,
   derivedMessages: $ReadOnlyMap<
     string,
     RawComposableMessageInfo | RawRobotextMessageInfo,
   >,
   viewer?: Viewer,
 ): MessageSQLResult {
   const rowsByID = new Map();
   for (const row of rows) {
     const id = row.id.toString();
     const currentRowsForID = rowsByID.get(id);
     if (currentRowsForID) {
       currentRowsForID.push(row);
     } else {
       rowsByID.set(id, [row]);
     }
   }
 
   const messages = [];
   for (const messageRows of rowsByID.values()) {
     const rawMessageInfo = rawMessageInfoFromRows(
       messageRows,
       viewer,
       derivedMessages,
     );
     if (rawMessageInfo) {
       messages.push({ rawMessageInfo, rows: messageRows });
     }
   }
 
   return messages;
 }
 
 function assertSingleRow(rows: $ReadOnlyArray<Object>): Object {
   if (rows.length === 0) {
     throw new Error('expected single row, but none present!');
   } else if (rows.length !== 1) {
     const messageIDs = rows.map(row => row.id.toString());
     console.warn(
       `expected single row, but there are multiple! ${messageIDs.join(', ')}`,
     );
   }
   return rows[0];
 }
 
 function mostRecentRowType(rows: $ReadOnlyArray<Object>): MessageType {
   if (rows.length === 0) {
     throw new Error('expected row, but none present!');
   }
   return assertMessageType(rows[0].type);
 }
 
 function rawMessageInfoFromRows(
   rawRows: $ReadOnlyArray<Object>,
   viewer?: Viewer,
   derivedMessages: $ReadOnlyMap<
     string,
     RawComposableMessageInfo | RawRobotextMessageInfo,
   >,
 ): ?RawMessageInfo {
   const rows = rawRows.map(row => ({
     ...row,
     subthread_permissions: JSON.parse(row.subthread_permissions),
   }));
 
   const type = mostRecentRowType(rows);
   const messageSpec = messageSpecs[type];
 
   if (type === messageTypes.IMAGES || type === messageTypes.MULTIMEDIA) {
     let media;
     if (type === messageTypes.MULTIMEDIA) {
       const mediaMessageContents = JSON.parse(rows[0].content);
       media = constructMediaFromMediaMessageContentsAndUploadRows(
         mediaMessageContents,
         rows,
       );
     } else {
       media = rows.filter(row => row.uploadID).map(imagesFromRow);
     }
     const [row] = rows;
     const localID = localIDFromCreationString(viewer, row.creation);
     invariant(
       messageSpec.rawMessageInfoFromServerDBRow,
       `multimedia message spec should have rawMessageInfoFromServerDBRow`,
     );
     return messageSpec.rawMessageInfoFromServerDBRow(row, {
       media,
       derivedMessages,
       localID,
     });
   }
 
   const row = assertSingleRow(rows);
   const localID = localIDFromCreationString(viewer, row.creation);
   invariant(
     messageSpec.rawMessageInfoFromServerDBRow,
     `message spec ${type} should have rawMessageInfoFromServerDBRow`,
   );
   return messageSpec.rawMessageInfoFromServerDBRow(row, {
     derivedMessages,
     localID,
   });
 }
 
 async function fetchMessageInfos(
   viewer: Viewer,
   criteria: MessageSelectionCriteria,
   numberPerThread: number,
 ): Promise<FetchMessageInfosResult> {
   const { sqlClause: selectionClause, timeFilterData } =
     parseMessageSelectionCriteria(viewer, criteria);
   const truncationStatuses = {};
 
   const viewerID = viewer.id;
   const query = SQL`
     WITH thread_window AS (
       SELECT m.id, m.thread AS threadID, m.user AS creatorID,
         m.target_message as targetMessageID, m.content, m.time, m.type,
         m.creation, stm.permissions AS subthread_permissions,
         ROW_NUMBER() OVER (
           PARTITION BY threadID ORDER BY m.time DESC, m.id DESC
         ) n
       FROM messages m
       LEFT JOIN memberships mm
         ON mm.thread = m.thread AND mm.user = ${viewerID}
       LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
         AND stm.thread = m.content AND stm.user = ${viewerID}
       WHERE JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE AND
   `;
   query.append(selectionClause);
   query.append(SQL`
     )
     SELECT tw.*,
       up.id AS uploadID, up.type AS uploadType, up.secret AS uploadSecret,
       up.extra AS uploadExtra
     FROM thread_window tw
     LEFT JOIN uploads up ON up.container = tw.id
     WHERE tw.n <= ${numberPerThread}
     ORDER BY tw.threadID, tw.time DESC, tw.id DESC
   `);
 
   const [result] = await dbQuery(query);
   const derivedMessages = await fetchDerivedMessages(result, viewer);
   const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
 
   const rawMessageInfos = [];
   const threadToMessageCount = new Map();
   for (const message of messages) {
     const { rawMessageInfo } = message;
     rawMessageInfos.push(rawMessageInfo);
     const { threadID } = rawMessageInfo;
     const currentCountValue = threadToMessageCount.get(threadID);
     const currentCount = currentCountValue ? currentCountValue : 0;
     threadToMessageCount.set(threadID, currentCount + 1);
   }
 
   for (const [threadID, messageCount] of threadToMessageCount) {
     // If we matched the exact amount we limited to, we're probably truncating
     // our result set. By setting TRUNCATED here, we tell the client that the
     // result set might not be continguous with what's already in their
     // MessageStore. More details about TRUNCATED can be found in
     // lib/types/message-types.js
     if (messageCount >= numberPerThread) {
       // We won't set TRUNCATED if a cursor was specified for a given thread,
       // since then the result is guaranteed to be contiguous with what the
       // client has
       if (criteria.threadCursors && criteria.threadCursors[threadID]) {
         truncationStatuses[threadID] = messageTruncationStatus.UNCHANGED;
       } else {
         truncationStatuses[threadID] = messageTruncationStatus.TRUNCATED;
       }
       continue;
     }
     const hasTimeFilter = hasTimeFilterForThread(timeFilterData, threadID);
     if (!hasTimeFilter) {
       // If there is no time filter for a given thread, and there are fewer
       // messages returned than the max we queried for a given thread, we can
       // conclude that our result set includes all messages for that thread
       truncationStatuses[threadID] = messageTruncationStatus.EXHAUSTIVE;
     }
   }
 
   for (const rawMessageInfo of rawMessageInfos) {
     if (messageSpecs[rawMessageInfo.type].startsThread) {
       truncationStatuses[rawMessageInfo.threadID] =
         messageTruncationStatus.EXHAUSTIVE;
     }
   }
 
   for (const threadID in criteria.threadCursors) {
     const truncationStatus = truncationStatuses[threadID];
     if (truncationStatus !== null && truncationStatus !== undefined) {
       continue;
     }
     const hasTimeFilter = hasTimeFilterForThread(timeFilterData, threadID);
     if (!hasTimeFilter) {
       // If there is no time filter for a given thread, and zero messages were
       // returned, we can conclude that this thread has zero messages. This is
       // a case of database corruption that should not be possible, but likely
       // we have some threads like this on prod (either due to some transient
       // issues or due to old buggy code)
       truncationStatuses[threadID] = messageTruncationStatus.EXHAUSTIVE;
     } else {
       // If this thread was explicitly queried for, and we got no results, but
       // we can't conclude that it's EXHAUSTIVE, then we'll set to UNCHANGED.
       truncationStatuses[threadID] = messageTruncationStatus.UNCHANGED;
     }
   }
 
   const shimmedRawMessageInfos = shimUnsupportedRawMessageInfos(
     rawMessageInfos,
     viewer.platformDetails,
   );
 
   return {
     rawMessageInfos: shimmedRawMessageInfos,
     truncationStatuses,
   };
 }
 
 // ESLint doesn't recognize that invariant always throws
 // eslint-disable-next-line consistent-return
 function hasTimeFilterForThread(
   timeFilterData: TimeFilterData,
   threadID: string,
 ) {
   if (timeFilterData.timeFilter === 'ALL') {
     return true;
   } else if (timeFilterData.timeFilter === 'NONE') {
     return false;
   } else if (timeFilterData.timeFilter === 'ALL_EXCEPT_EXCLUDED') {
     return !timeFilterData.excludedFromTimeFilter.has(threadID);
   } else {
     invariant(
       false,
       `unrecognized timeFilter type ${timeFilterData.timeFilter}`,
     );
   }
 }
 
 type TimeFilterData =
   | { +timeFilter: 'ALL' | 'NONE' }
   | {
       +timeFilter: 'ALL_EXCEPT_EXCLUDED',
       +excludedFromTimeFilter: $ReadOnlySet<string>,
     };
 type ParsedMessageSelectionCriteria = {
   +sqlClause: SQLStatementType,
   +timeFilterData: TimeFilterData,
 };
 function parseMessageSelectionCriteria(
   viewer: Viewer,
   criteria: MessageSelectionCriteria,
 ): ParsedMessageSelectionCriteria {
   const minMessageTime = Date.now() - defaultMaxMessageAge;
   const shouldApplyTimeFilter = hasMinCodeVersion(viewer.platformDetails, {
     native: 130,
   });
 
   let globalTimeFilter;
   if (criteria.newerThan) {
     globalTimeFilter = SQL`m.time > ${criteria.newerThan}`;
   } else if (!criteria.threadCursors && shouldApplyTimeFilter) {
     globalTimeFilter = SQL`m.time > ${minMessageTime}`;
   }
 
   const threadConditions = [];
   if (
     criteria.joinedThreads === true &&
     shouldApplyTimeFilter &&
     !globalTimeFilter
   ) {
     threadConditions.push(SQL`(mm.role > 0 AND m.time > ${minMessageTime})`);
   } else if (criteria.joinedThreads === true) {
     threadConditions.push(SQL`mm.role > 0`);
   }
   if (criteria.threadCursors) {
     for (const threadID in criteria.threadCursors) {
       const cursor = criteria.threadCursors[threadID];
       if (cursor) {
         threadConditions.push(
           SQL`(m.thread = ${threadID} AND m.id < ${cursor})`,
         );
       } else {
         threadConditions.push(SQL`m.thread = ${threadID}`);
       }
     }
   }
   if (threadConditions.length === 0) {
     throw new ServerError('internal_error');
   }
   const threadClause = mergeOrConditions(threadConditions);
 
   let timeFilterData;
   if (globalTimeFilter) {
     timeFilterData = { timeFilter: 'ALL' };
   } else if (!shouldApplyTimeFilter) {
     timeFilterData = { timeFilter: 'NONE' };
   } else {
     invariant(
       criteria.threadCursors,
       'ALL_EXCEPT_EXCLUDED should correspond to threadCursors being set',
     );
     const excludedFromTimeFilter = new Set(Object.keys(criteria.threadCursors));
     timeFilterData = {
       timeFilter: 'ALL_EXCEPT_EXCLUDED',
       excludedFromTimeFilter,
     };
   }
 
   const conditions = [globalTimeFilter, threadClause].filter(Boolean);
   const sqlClause = mergeAndConditions(conditions);
 
   return { sqlClause, timeFilterData };
 }
 
 function messageSelectionCriteriaToInitialTruncationStatuses(
   criteria: MessageSelectionCriteria,
   defaultTruncationStatus: MessageTruncationStatus,
 ) {
   const truncationStatuses = {};
   if (criteria.threadCursors) {
     for (const threadID in criteria.threadCursors) {
       truncationStatuses[threadID] = defaultTruncationStatus;
     }
   }
   return truncationStatuses;
 }
 
 async function fetchMessageInfosSince(
   viewer: Viewer,
   criteria: MessageSelectionCriteria,
   maxNumberPerThread: number,
 ): Promise<FetchMessageInfosResult> {
   const { sqlClause: selectionClause } = parseMessageSelectionCriteria(
     viewer,
     criteria,
   );
   const truncationStatuses =
     messageSelectionCriteriaToInitialTruncationStatuses(
       criteria,
       messageTruncationStatus.UNCHANGED,
     );
 
   const viewerID = viewer.id;
   const query = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type,
       m.creation, m.user AS creatorID, m.target_message as targetMessageID,
       stm.permissions AS subthread_permissions, up.id AS uploadID,
       up.type AS uploadType, up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM messages m
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN memberships mm ON mm.thread = m.thread AND mm.user = ${viewerID}
     LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
       AND stm.thread = m.content AND stm.user = ${viewerID}
     WHERE JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE AND
   `;
   query.append(selectionClause);
   query.append(SQL`
     ORDER BY m.thread, m.time DESC, m.id DESC
   `);
   const [result] = await dbQuery(query);
   const derivedMessages = await fetchDerivedMessages(result, viewer);
   const messages = await parseMessageSQLResult(result, derivedMessages, viewer);
 
   const rawMessageInfos = [];
   let currentThreadID = null;
   let numMessagesForCurrentThreadID = 0;
   for (const message of messages) {
     const { rawMessageInfo } = message;
     const { threadID } = rawMessageInfo;
     if (threadID !== currentThreadID) {
       currentThreadID = threadID;
       numMessagesForCurrentThreadID = 1;
       truncationStatuses[threadID] = messageTruncationStatus.UNCHANGED;
     } else {
       numMessagesForCurrentThreadID++;
     }
     if (numMessagesForCurrentThreadID <= maxNumberPerThread) {
       if (messageSpecs[rawMessageInfo.type].startsThread) {
         truncationStatuses[threadID] = messageTruncationStatus.EXHAUSTIVE;
       }
       rawMessageInfos.push(rawMessageInfo);
     } else if (numMessagesForCurrentThreadID === maxNumberPerThread + 1) {
       truncationStatuses[threadID] = messageTruncationStatus.TRUNCATED;
     }
   }
 
   const shimmedRawMessageInfos = shimUnsupportedRawMessageInfos(
     rawMessageInfos,
     viewer.platformDetails,
   );
 
   return {
     rawMessageInfos: shimmedRawMessageInfos,
     truncationStatuses,
   };
 }
 
 function getMessageFetchResultFromRedisMessages(
   viewer: Viewer,
   rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 ): FetchMessageInfosResult {
   const truncationStatuses = {};
   for (const rawMessageInfo of rawMessageInfos) {
     truncationStatuses[rawMessageInfo.threadID] =
       messageTruncationStatus.UNCHANGED;
   }
   const shimmedRawMessageInfos = shimUnsupportedRawMessageInfos(
     rawMessageInfos,
     viewer.platformDetails,
   );
   return {
     rawMessageInfos: shimmedRawMessageInfos,
     truncationStatuses,
   };
 }
 
 async function fetchMessageInfoForLocalID(
   viewer: Viewer,
   localID: ?string,
 ): Promise<?RawMessageInfo> {
   if (!localID || !viewer.hasSessionInfo) {
     return null;
   }
   const creation = creationString(viewer, localID);
   const viewerID = viewer.id;
   const query = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, m.creation,
       m.user AS creatorID, m.target_message as targetMessageID,
       stm.permissions AS subthread_permissions, up.id AS uploadID,
       up.type AS uploadType, up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM messages m
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN memberships mm ON mm.thread = m.thread AND mm.user = ${viewerID}
     LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
       AND stm.thread = m.content AND stm.user = ${viewerID}
     WHERE m.user = ${viewerID} AND m.creation = ${creation} AND
       JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE
   `;
 
   const [result] = await dbQuery(query);
   if (result.length === 0) {
     return null;
   }
   const derivedMessages = await fetchDerivedMessages(result, viewer);
   return rawMessageInfoFromRows(result, viewer, derivedMessages);
 }
 
 const entryIDExtractString = '$.entryID';
 async function fetchMessageInfoForEntryAction(
   viewer: Viewer,
   messageType: MessageType,
   entryID: string,
   threadID: string,
 ): Promise<?RawMessageInfo> {
   const viewerID = viewer.id;
   const query = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, m.creation,
       m.user AS creatorID, m.target_message as targetMessageID,
       up.id AS uploadID, up.type AS uploadType, up.secret AS uploadSecret,
       up.extra AS uploadExtra
     FROM messages m
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN memberships mm ON mm.thread = m.thread AND mm.user = ${viewerID}
     WHERE m.user = ${viewerID} AND m.thread = ${threadID} AND
       m.type = ${messageType} AND
       JSON_EXTRACT(m.content, ${entryIDExtractString}) = ${entryID} AND
       JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE
   `;
 
   const [result] = await dbQuery(query);
   if (result.length === 0) {
     return null;
   }
   const derivedMessages = await fetchDerivedMessages(result, viewer);
   return rawMessageInfoFromRows(result, viewer, derivedMessages);
 }
 
 async function fetchMessageRowsByIDs(messageIDs: $ReadOnlyArray<string>) {
   const query = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, m.creation,
       m.user AS creatorID, m.target_message as targetMessageID,
       stm.permissions AS subthread_permissions, up.id AS uploadID,
       up.type AS uploadType, up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM messages m
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
       AND stm.thread = m.content AND stm.user = m.user
     WHERE m.id IN (${messageIDs})
   `;
   const [result] = await dbQuery(query);
   return result;
 }
 
 async function fetchPinnedMessageInfos(
   viewer: Viewer,
   request: FetchPinnedMessagesRequest,
 ): Promise<FetchPinnedMessagesResult> {
   // The only message types that can be pinned are 0, 14, and 15
   // (text, images, and multimedia), so we don't need to worry about
   // an admin pinning a message about creating a secret subchannel. This is
   // why we don't check subthread permissions (as opposed to other queries).
   const messageRowsQuery = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, m.creation,
       m.user AS creatorID, m.target_message as targetMessageID,
       NULL AS subthread_permissions, u.id AS uploadID,
       u.type AS uploadType, u.secret AS uploadSecret, u.extra AS uploadExtra
     FROM messages m
     LEFT JOIN uploads u ON u.container = m.id
     LEFT JOIN memberships mm ON mm.thread = m.thread AND mm.user = ${viewer.id}
     WHERE m.thread = ${request.threadID} 
       AND m.pinned = 1
       AND JSON_EXTRACT(mm.permissions, ${visibleExtractString}) IS TRUE
     ORDER BY m.pin_time DESC
   `;
   const [messageRows] = await dbQuery(messageRowsQuery);
   if (messageRows.length === 0) {
     return { pinnedMessages: [] };
   }
 
   const pinnedAndRelatedMessages =
     await rawMessageInfoForRowsAndRelatedMessages(messageRows, viewer);
 
   const shimmedPinnedRawMessageInfos = shimUnsupportedRawMessageInfos(
     pinnedAndRelatedMessages,
     viewer.platformDetails,
   );
 
   return {
     pinnedMessages: shimmedPinnedRawMessageInfos,
   };
 }
 
 async function fetchDerivedMessages(
   rows: $ReadOnlyArray<Object>,
   viewer?: Viewer,
 ): Promise<
   $ReadOnlyMap<string, RawComposableMessageInfo | RawRobotextMessageInfo>,
 > {
   const requiredIDs = new Set<string>();
   for (const row of rows) {
     if (row.type === messageTypes.SIDEBAR_SOURCE) {
       const content = JSON.parse(row.content);
       requiredIDs.add(content.sourceMessageID);
     } else if (row.type === messageTypes.TOGGLE_PIN) {
       const content = JSON.parse(row.content);
       requiredIDs.add(content.targetMessageID);
     }
   }
 
   const messagesByID = new Map<
     string,
     RawComposableMessageInfo | RawRobotextMessageInfo,
   >();
   if (requiredIDs.size === 0) {
     return messagesByID;
   }
 
   const [result, edits] = await Promise.all([
     fetchMessageRowsByIDs([...requiredIDs]),
     fetchLatestEditMessageContentByIDs([...requiredIDs]),
   ]);
   const messages = await parseMessageSQLResult(result, new Map(), viewer);
 
   for (const message of messages) {
     let { rawMessageInfo } = message;
     invariant(
-      !isMessageSidebarSourceReactionOrEdit(rawMessageInfo),
+      !isMessageSidebarSourceReactionEditOrPin(rawMessageInfo),
       'SIDEBAR_SOURCE or TOGGLE_PIN should not point to a ' +
-        'SIDEBAR_SOURCE, REACTION or EDIT_MESSAGE',
+        'SIDEBAR_SOURCE, REACTION, EDIT_MESSAGE or TOGGLE_PIN',
     );
     if (rawMessageInfo.id) {
       const editedContent = edits.get(rawMessageInfo.id);
       if (editedContent && rawMessageInfo.type === messageTypes.TEXT) {
         rawMessageInfo = {
           ...rawMessageInfo,
           text: editedContent.text,
         };
       }
       invariant(rawMessageInfo.id, 'rawMessageInfo.id should not be null');
       messagesByID.set(rawMessageInfo.id, rawMessageInfo);
     }
   }
   return messagesByID;
 }
 
 async function fetchMessageInfoByID(
   viewer?: Viewer,
   messageID: string,
 ): Promise<?RawMessageInfo> {
   const result = await fetchMessageRowsByIDs([messageID]);
   if (result.length === 0) {
     return null;
   }
   const derivedMessages = await fetchDerivedMessages(result, viewer);
   return rawMessageInfoFromRows(result, viewer, derivedMessages);
 }
 
 async function fetchThreadMessagesCount(threadID: string): Promise<number> {
   const query = SQL`
     SELECT COUNT(*) AS count
     FROM messages
     WHERE thread = ${threadID}
   `;
   const [result] = await dbQuery(query);
   return result[0].count;
 }
 
 async function fetchLatestEditMessageContentByIDs(
   messageIDs: $ReadOnlyArray<string>,
 ): Promise<$ReadOnlyMap<string, EditMessageContent>> {
   const latestEditedMessageQuery = SQL`
     SELECT m.id, (
       SELECT m2.content
       FROM messages m2
       WHERE m.id = m2.target_message
         AND m.thread = m2.thread
         AND m2.type = ${messageTypes.EDIT_MESSAGE}
       ORDER BY time DESC, id DESC
       LIMIT 1
     ) content
     FROM messages m
     WHERE m.id IN(${messageIDs})
   `;
 
   const [result] = await dbQuery(latestEditedMessageQuery);
   const latestContentByID = new Map();
   for (const row of result) {
     if (!row.content) {
       continue;
     }
     const content = JSON.parse(row.content);
     latestContentByID.set(row.id.toString(), content);
   }
 
   return latestContentByID;
 }
 
 async function fetchLatestEditMessageContentByID(
   messageID: string,
 ): Promise<?EditMessageContent> {
   const result = await fetchLatestEditMessageContentByIDs([messageID]);
   const content = result.get(messageID);
   return content;
 }
 
 async function fetchRelatedMessages(
   viewer?: Viewer,
   messages: $ReadOnlyMap<
     string,
     RawComposableMessageInfo | RawRobotextMessageInfo,
   >,
 ): Promise<$ReadOnlyArray<RawMessageInfo>> {
   if (messages.size === 0) {
     return [];
   }
   const originalMessageIDs = [...messages.keys()];
 
   const query = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, m.creation,
       m.user AS creatorID, m.target_message as targetMessageID,
       stm.permissions AS subthread_permissions, up.id AS uploadID,
       up.type AS uploadType, up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM messages m
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
       AND stm.thread = m.content AND stm.user = m.user
     WHERE m.target_message IN (${originalMessageIDs})
       AND (
         m.type = ${messageTypes.SIDEBAR_SOURCE}
         OR m.type = ${messageTypes.REACTION}
+        OR m.type = ${messageTypes.TOGGLE_PIN}
       )
     UNION SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, 
       m.creation, m.user AS creatorID, m.target_message as targetMessageID,
       stm.permissions AS subthread_permissions, up.id AS uploadID,
       up.type AS uploadType, up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM messages m2
     INNER JOIN messages m ON m.id = (
       SELECT m3.id FROM messages m3
       WHERE m3.target_message = m2.id
         AND m3.thread = m2.thread
         AND m3.type = ${messageTypes.EDIT_MESSAGE}
       ORDER BY time DESC, id DESC
       LIMIT 1
     )
     LEFT JOIN uploads up ON up.container = m2.id
     LEFT JOIN memberships stm ON m2.type = ${messageTypes.CREATE_SUB_THREAD}
       AND stm.thread = m2.content AND stm.user = m2.user
     WHERE m2.id IN (${originalMessageIDs})
   `;
 
   const [resultRows] = await dbQuery(query);
 
   if (resultRows.length === 0) {
     return [];
   }
   const SQLResult = await parseMessageSQLResult(resultRows, messages, viewer);
   return SQLResult.map(item => item.rawMessageInfo);
 }
 
 async function rawMessageInfoForRowsAndRelatedMessages(
   rows: $ReadOnlyArray<Object>,
   viewer?: Viewer,
 ): Promise<$ReadOnlyArray<RawMessageInfo>> {
   const parsedResults = await parseMessageSQLResult(rows, new Map(), viewer);
   const rawMessageInfoMap = new Map<
     string,
     RawComposableMessageInfo | RawRobotextMessageInfo,
   >();
   for (const message of parsedResults) {
     const { rawMessageInfo } = message;
-    if (isMessageSidebarSourceReactionOrEdit(rawMessageInfo)) {
+    if (isMessageSidebarSourceReactionEditOrPin(rawMessageInfo)) {
       continue;
     }
     invariant(rawMessageInfo.id, 'rawMessageInfo.id should not be null');
     rawMessageInfoMap.set(rawMessageInfo.id, rawMessageInfo);
   }
 
   const rawMessageInfos = parsedResults.map(item => item.rawMessageInfo);
   const rawRelatedMessageInfos = await fetchRelatedMessages(
     viewer,
     rawMessageInfoMap,
   );
 
   return [...rawMessageInfos, ...rawRelatedMessageInfos];
 }
 
 const searchMessagesPageSize = defaultNumberPerThread + 1;
 
 async function searchMessagesInSingleChat(
   inputQuery: string,
   threadID: string,
   viewer?: Viewer,
   cursor?: string,
 ): Promise<SearchMessagesResponse> {
   if (inputQuery === '') {
     console.warn('received empty search query');
     return { messages: [], endReached: true };
   }
   const pattern = processQueryForSearch(inputQuery);
 
   if (pattern === '') {
     return {
       endReached: true,
       messages: [],
     };
   }
 
   const query = SQL`
     SELECT m.id, m.thread AS threadID, m.content, m.time, m.type, m.creation,
     m.user AS creatorID, m.target_message as targetMessageID,
     stm.permissions AS subthread_permissions, up.id AS uploadID,
     up.type AS uploadType, up.secret AS uploadSecret, up.extra AS uploadExtra
     FROM message_search s
     LEFT JOIN messages m ON m.id = s.original_message_id
     LEFT JOIN memberships stm ON m.type = ${messageTypes.CREATE_SUB_THREAD}
       AND stm.thread = m.content AND stm.user = m.user
     LEFT JOIN uploads up ON up.container = m.id
     LEFT JOIN messages m2 ON m2.target_message = m.id 
       AND m2.type = ${messageTypes.SIDEBAR_SOURCE} AND m2.thread = ${threadID}
     WHERE MATCH(s.processed_content) AGAINST(${pattern} IN BOOLEAN MODE)
       AND (m.thread = ${threadID} OR m2.id IS NOT NULL)
   `;
 
   if (cursor) {
     query.append(SQL`AND m.id < ${cursor} `);
   }
   query.append(SQL`   
     ORDER BY m.time DESC, m.id DESC
     LIMIT ${searchMessagesPageSize}
   `);
 
   const [results] = await dbQuery(query);
   if (results.length === 0) {
     return { messages: [], endReached: true };
   }
 
   const endReached = results.length < searchMessagesPageSize;
 
   const resultsPage = endReached ? results : results.slice(0, -1);
 
   const rawMessageInfos = await rawMessageInfoForRowsAndRelatedMessages(
     resultsPage,
     viewer,
   );
 
   return {
     messages: shimUnsupportedRawMessageInfos(
       rawMessageInfos,
       viewer?.platformDetails,
     ),
     endReached: endReached,
   };
 }
 
 export {
   fetchCollapsableNotifs,
   fetchMessageInfos,
   fetchMessageInfosSince,
   getMessageFetchResultFromRedisMessages,
   fetchMessageInfoForLocalID,
   fetchMessageInfoForEntryAction,
   fetchMessageInfoByID,
   fetchThreadMessagesCount,
   fetchLatestEditMessageContentByID,
   fetchPinnedMessageInfos,
   fetchRelatedMessages,
   rawMessageInfoForRowsAndRelatedMessages,
   searchMessagesInSingleChat,
 };
diff --git a/lib/shared/messages/sidebar-source-message-spec.js b/lib/shared/messages/sidebar-source-message-spec.js
index 5c9191c15..7063bc863 100644
--- a/lib/shared/messages/sidebar-source-message-spec.js
+++ b/lib/shared/messages/sidebar-source-message-spec.js
@@ -1,179 +1,179 @@
 // @flow
 
 import invariant from 'invariant';
 
 import {
   pushTypes,
   type CreateMessageInfoParams,
   type MessageSpec,
   type RawMessageInfoFromServerDBRowParams,
 } from './message-spec.js';
 import { joinResult } from './utils.js';
 import type { PlatformDetails } from '../../types/device-types.js';
 import { messageTypes } from '../../types/message-types-enum.js';
 import {
   type RawSidebarSourceMessageInfo,
   type SidebarSourceMessageData,
   type SidebarSourceMessageInfo,
   type ClientDBMessageInfo,
-  isMessageSidebarSourceReactionOrEdit,
+  isMessageSidebarSourceReactionEditOrPin,
   rawSidebarSourceMessageInfoValidator,
 } from '../../types/message-types.js';
 import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
 import type { NotifTexts } from '../../types/notif-types.js';
 import type { RelativeUserInfo } from '../../types/user-types.js';
 import { hasMinCodeVersion } from '../version-utils.js';
 
 export const sidebarSourceMessageSpec: MessageSpec<
   SidebarSourceMessageData,
   RawSidebarSourceMessageInfo,
   SidebarSourceMessageInfo,
 > = Object.freeze({
   messageContentForServerDB(
     data: SidebarSourceMessageData | RawSidebarSourceMessageInfo,
   ): string {
     const sourceMessageID = data.sourceMessage?.id;
     invariant(sourceMessageID, 'Source message id should be set');
     return JSON.stringify({
       sourceMessageID,
     });
   },
 
   messageContentForClientDB(data: RawSidebarSourceMessageInfo): string {
     invariant(
       data.sourceMessage && data.sourceMessage.id,
       'sourceMessage and sourceMessage.id should be defined',
     );
     return JSON.stringify(data.sourceMessage);
   },
 
   rawMessageInfoFromClientDB(
     clientDBMessageInfo: ClientDBMessageInfo,
   ): RawSidebarSourceMessageInfo {
     invariant(
       clientDBMessageInfo.content !== undefined &&
         clientDBMessageInfo.content !== null,
       'content must be defined for SidebarSource',
     );
     const sourceMessage = JSON.parse(clientDBMessageInfo.content);
     const rawSidebarSourceMessageInfo: RawSidebarSourceMessageInfo = {
       type: messageTypes.SIDEBAR_SOURCE,
       id: clientDBMessageInfo.id,
       threadID: clientDBMessageInfo.thread,
       time: parseInt(clientDBMessageInfo.time),
       creatorID: clientDBMessageInfo.user,
       sourceMessage,
     };
     return rawSidebarSourceMessageInfo;
   },
 
   messageTitle() {
     invariant(false, 'Cannot call messageTitle on sidebarSourceMessageSpec');
   },
 
   rawMessageInfoFromServerDBRow(
     row: Object,
     params: RawMessageInfoFromServerDBRowParams,
   ): RawSidebarSourceMessageInfo {
     const { derivedMessages } = params;
     invariant(derivedMessages, 'Derived messages should be provided');
 
     const content = JSON.parse(row.content);
     const sourceMessage = derivedMessages.get(content.sourceMessageID);
     if (!sourceMessage) {
       console.warn(
         `Message with id ${row.id} has a derived message ` +
           `${content.sourceMessageID} which is not present in the database`,
       );
     }
     return {
       type: messageTypes.SIDEBAR_SOURCE,
       id: row.id.toString(),
       threadID: row.threadID.toString(),
       time: row.time,
       creatorID: row.creatorID.toString(),
       sourceMessage,
     };
   },
 
   createMessageInfo(
     rawMessageInfo: RawSidebarSourceMessageInfo,
     creator: RelativeUserInfo,
     params: CreateMessageInfoParams,
   ): ?SidebarSourceMessageInfo {
     if (!rawMessageInfo.sourceMessage) {
       return null;
     }
     const sourceMessage = params.createMessageInfoFromRaw(
       rawMessageInfo.sourceMessage,
     );
     invariant(
-      sourceMessage && !isMessageSidebarSourceReactionOrEdit(sourceMessage),
-      'Sidebars can not be created from SIDEBAR SOURCE, REACTION or EDIT MESSAGE',
+      sourceMessage && !isMessageSidebarSourceReactionEditOrPin(sourceMessage),
+      'Sidebars can not be created from SIDEBAR SOURCE, REACTION, EDIT OR PIN MESSAGE',
     );
 
     return {
       type: messageTypes.SIDEBAR_SOURCE,
       id: rawMessageInfo.id,
       threadID: rawMessageInfo.threadID,
       creator,
       time: rawMessageInfo.time,
       sourceMessage,
     };
   },
 
   rawMessageInfoFromMessageData(
     messageData: SidebarSourceMessageData,
     id: ?string,
   ): RawSidebarSourceMessageInfo {
     invariant(id, 'RawSidebarSourceMessageInfo needs id');
     return { ...messageData, id };
   },
 
   shimUnsupportedMessageInfo(
     rawMessageInfo: RawSidebarSourceMessageInfo,
     platformDetails: ?PlatformDetails,
   ): RawSidebarSourceMessageInfo | RawUnsupportedMessageInfo {
     if (
       hasMinCodeVersion(platformDetails, { native: 75 }) &&
       rawMessageInfo.sourceMessage
     ) {
       return rawMessageInfo;
     }
     const { id } = rawMessageInfo;
     invariant(id !== null && id !== undefined, 'id should be set on server');
     return {
       type: messageTypes.UNSUPPORTED,
       id,
       threadID: rawMessageInfo.threadID,
       creatorID: rawMessageInfo.creatorID,
       time: rawMessageInfo.time,
       robotext: 'first message in thread',
       dontPrefixCreator: true,
       unsupportedMessageInfo: rawMessageInfo,
     };
   },
 
   unshimMessageInfo(
     unwrapped: RawSidebarSourceMessageInfo,
   ): RawSidebarSourceMessageInfo {
     return unwrapped;
   },
 
   notificationTexts(): Promise<NotifTexts> {
     invariant(
       false,
       'SIDEBAR_SOURCE notificationTexts should never be called directly!',
     );
   },
 
   notificationCollapseKey(rawMessageInfo: RawSidebarSourceMessageInfo): string {
     return joinResult(messageTypes.CREATE_SIDEBAR, rawMessageInfo.threadID);
   },
 
   generatesNotifs: async () => pushTypes.NOTIF,
 
   startsThread: true,
 
   validator: rawSidebarSourceMessageInfoValidator,
 });
diff --git a/lib/types/message-types.js b/lib/types/message-types.js
index 63ad3e11a..79bf62804 100644
--- a/lib/types/message-types.js
+++ b/lib/types/message-types.js
@@ -1,660 +1,661 @@
 // @flow
 
 import invariant from 'invariant';
 import t, {
   type TDict,
   type TEnums,
   type TInterface,
   type TUnion,
 } from 'tcomb';
 
 import { type ClientDBMediaInfo } from './media-types.js';
 import { type MessageType, messageTypes } from './message-types-enum.js';
 import {
   type AddMembersMessageData,
   type AddMembersMessageInfo,
   type RawAddMembersMessageInfo,
   rawAddMembersMessageInfoValidator,
 } from './messages/add-members.js';
 import {
   type ChangeRoleMessageData,
   type ChangeRoleMessageInfo,
   type RawChangeRoleMessageInfo,
   rawChangeRoleMessageInfoValidator,
 } from './messages/change-role.js';
 import {
   type ChangeSettingsMessageData,
   type ChangeSettingsMessageInfo,
   type RawChangeSettingsMessageInfo,
   rawChangeSettingsMessageInfoValidator,
 } from './messages/change-settings.js';
 import {
   type CreateEntryMessageData,
   type CreateEntryMessageInfo,
   type RawCreateEntryMessageInfo,
   rawCreateEntryMessageInfoValidator,
 } from './messages/create-entry.js';
 import {
   type CreateSidebarMessageData,
   type CreateSidebarMessageInfo,
   type RawCreateSidebarMessageInfo,
   rawCreateSidebarMessageInfoValidator,
 } from './messages/create-sidebar.js';
 import {
   type CreateSubthreadMessageData,
   type CreateSubthreadMessageInfo,
   type RawCreateSubthreadMessageInfo,
   rawCreateSubthreadMessageInfoValidator,
 } from './messages/create-subthread.js';
 import {
   type CreateThreadMessageData,
   type CreateThreadMessageInfo,
   type RawCreateThreadMessageInfo,
   rawCreateThreadMessageInfoValidator,
 } from './messages/create-thread.js';
 import {
   type DeleteEntryMessageData,
   type DeleteEntryMessageInfo,
   type RawDeleteEntryMessageInfo,
   rawDeleteEntryMessageInfoValidator,
 } from './messages/delete-entry.js';
 import {
   type EditEntryMessageData,
   type EditEntryMessageInfo,
   type RawEditEntryMessageInfo,
   rawEditEntryMessageInfoValidator,
 } from './messages/edit-entry.js';
 import {
   type EditMessageData,
   type EditMessageInfo,
   type RawEditMessageInfo,
   rawEditMessageInfoValidator,
 } from './messages/edit.js';
 import {
   type ImagesMessageData,
   type ImagesMessageInfo,
   type RawImagesMessageInfo,
   rawImagesMessageInfoValidator,
 } from './messages/images.js';
 import {
   type JoinThreadMessageData,
   type JoinThreadMessageInfo,
   type RawJoinThreadMessageInfo,
   rawJoinThreadMessageInfoValidator,
 } from './messages/join-thread.js';
 import {
   type LeaveThreadMessageData,
   type LeaveThreadMessageInfo,
   type RawLeaveThreadMessageInfo,
   rawLeaveThreadMessageInfoValidator,
 } from './messages/leave-thread.js';
 import {
   type MediaMessageData,
   type MediaMessageInfo,
   type MediaMessageServerDBContent,
   type RawMediaMessageInfo,
   rawMediaMessageInfoValidator,
 } from './messages/media.js';
 import {
   type RawReactionMessageInfo,
   rawReactionMessageInfoValidator,
   type ReactionMessageData,
   type ReactionMessageInfo,
 } from './messages/reaction.js';
 import {
   type RawRemoveMembersMessageInfo,
   rawRemoveMembersMessageInfoValidator,
   type RemoveMembersMessageData,
   type RemoveMembersMessageInfo,
 } from './messages/remove-members.js';
 import {
   type RawRestoreEntryMessageInfo,
   rawRestoreEntryMessageInfoValidator,
   type RestoreEntryMessageData,
   type RestoreEntryMessageInfo,
 } from './messages/restore-entry.js';
 import {
   type RawTextMessageInfo,
   rawTextMessageInfoValidator,
   type TextMessageData,
   type TextMessageInfo,
 } from './messages/text.js';
 import {
   type RawTogglePinMessageInfo,
   rawTogglePinMessageInfoValidator,
   type TogglePinMessageData,
   type TogglePinMessageInfo,
 } from './messages/toggle-pin.js';
 import {
   type RawUnsupportedMessageInfo,
   rawUnsupportedMessageInfoValidator,
   type UnsupportedMessageInfo,
 } from './messages/unsupported.js';
 import {
   type RawUpdateRelationshipMessageInfo,
   rawUpdateRelationshipMessageInfoValidator,
   type UpdateRelationshipMessageData,
   type UpdateRelationshipMessageInfo,
 } from './messages/update-relationship.js';
 import { type RelativeUserInfo, type UserInfos } from './user-types.js';
 import type { CallServerEndpointResultInfoInterface } from '../utils/call-server-endpoint.js';
 import { values } from '../utils/objects.js';
 import { tID, tNumber, tShape } from '../utils/validation-utils.js';
 
 const composableMessageTypes = new Set([
   messageTypes.TEXT,
   messageTypes.IMAGES,
   messageTypes.MULTIMEDIA,
 ]);
 export function isComposableMessageType(ourMessageType: MessageType): boolean {
   return composableMessageTypes.has(ourMessageType);
 }
 export function assertComposableMessageType(
   ourMessageType: MessageType,
 ): MessageType {
   invariant(
     isComposableMessageType(ourMessageType),
     'MessageType is not composed',
   );
   return ourMessageType;
 }
 export function assertComposableRawMessage(
   message: RawMessageInfo,
 ): RawComposableMessageInfo {
   invariant(
     message.type === messageTypes.TEXT ||
       message.type === messageTypes.IMAGES ||
       message.type === messageTypes.MULTIMEDIA,
     'Message is not composable',
   );
   return message;
 }
 export function messageDataLocalID(messageData: MessageData): ?string {
   if (
     messageData.type !== messageTypes.TEXT &&
     messageData.type !== messageTypes.IMAGES &&
     messageData.type !== messageTypes.MULTIMEDIA &&
     messageData.type !== messageTypes.REACTION
   ) {
     return null;
   }
   return messageData.localID;
 }
 
-export function isMessageSidebarSourceReactionOrEdit(
+export function isMessageSidebarSourceReactionEditOrPin(
   message: RawMessageInfo | MessageInfo,
 ): boolean %checks {
   return (
     message.type === messageTypes.SIDEBAR_SOURCE ||
     message.type === messageTypes.REACTION ||
-    message.type === messageTypes.EDIT_MESSAGE
+    message.type === messageTypes.EDIT_MESSAGE ||
+    message.type === messageTypes.TOGGLE_PIN
   );
 }
 
 const mediaMessageTypes = new Set([
   messageTypes.IMAGES,
   messageTypes.MULTIMEDIA,
 ]);
 export function isMediaMessageType(ourMessageType: MessageType): boolean {
   return mediaMessageTypes.has(ourMessageType);
 }
 export function assertMediaMessageType(
   ourMessageType: MessageType,
 ): MessageType {
   invariant(isMediaMessageType(ourMessageType), 'MessageType is not media');
   return ourMessageType;
 }
 
 // *MessageData = passed to createMessages function to insert into database
 // Raw*MessageInfo = used by server, and contained in client's local store
 // *MessageInfo = used by client in UI code
 
 export type SidebarSourceMessageData = {
   +type: 17,
   +threadID: string,
   +creatorID: string,
   +time: number,
   +sourceMessage?: RawComposableMessageInfo | RawRobotextMessageInfo,
 };
 
 export type MessageData =
   | TextMessageData
   | CreateThreadMessageData
   | AddMembersMessageData
   | CreateSubthreadMessageData
   | ChangeSettingsMessageData
   | RemoveMembersMessageData
   | ChangeRoleMessageData
   | LeaveThreadMessageData
   | JoinThreadMessageData
   | CreateEntryMessageData
   | EditEntryMessageData
   | DeleteEntryMessageData
   | RestoreEntryMessageData
   | ImagesMessageData
   | MediaMessageData
   | UpdateRelationshipMessageData
   | SidebarSourceMessageData
   | CreateSidebarMessageData
   | ReactionMessageData
   | EditMessageData
   | TogglePinMessageData;
 
 export type MultimediaMessageData = ImagesMessageData | MediaMessageData;
 
 export type RawMultimediaMessageInfo =
   | RawImagesMessageInfo
   | RawMediaMessageInfo;
 export const rawMultimediaMessageInfoValidator: TUnion<RawMultimediaMessageInfo> =
   t.union([rawImagesMessageInfoValidator, rawMediaMessageInfoValidator]);
 
 export type RawComposableMessageInfo =
   | RawTextMessageInfo
   | RawMultimediaMessageInfo;
 const rawComposableMessageInfoValidator = t.union([
   rawTextMessageInfoValidator,
   rawMultimediaMessageInfoValidator,
 ]);
 
 export type RawRobotextMessageInfo =
   | RawCreateThreadMessageInfo
   | RawAddMembersMessageInfo
   | RawCreateSubthreadMessageInfo
   | RawChangeSettingsMessageInfo
   | RawRemoveMembersMessageInfo
   | RawChangeRoleMessageInfo
   | RawLeaveThreadMessageInfo
   | RawJoinThreadMessageInfo
   | RawCreateEntryMessageInfo
   | RawEditEntryMessageInfo
   | RawDeleteEntryMessageInfo
   | RawRestoreEntryMessageInfo
   | RawUpdateRelationshipMessageInfo
   | RawCreateSidebarMessageInfo
   | RawUnsupportedMessageInfo
   | RawTogglePinMessageInfo;
 const rawRobotextMessageInfoValidator = t.union([
   rawCreateThreadMessageInfoValidator,
   rawAddMembersMessageInfoValidator,
   rawCreateSubthreadMessageInfoValidator,
   rawChangeSettingsMessageInfoValidator,
   rawRemoveMembersMessageInfoValidator,
   rawChangeRoleMessageInfoValidator,
   rawLeaveThreadMessageInfoValidator,
   rawJoinThreadMessageInfoValidator,
   rawCreateEntryMessageInfoValidator,
   rawEditEntryMessageInfoValidator,
   rawDeleteEntryMessageInfoValidator,
   rawRestoreEntryMessageInfoValidator,
   rawUpdateRelationshipMessageInfoValidator,
   rawCreateSidebarMessageInfoValidator,
   rawUnsupportedMessageInfoValidator,
   rawTogglePinMessageInfoValidator,
 ]);
 
 export type RawSidebarSourceMessageInfo = {
   ...SidebarSourceMessageData,
   id: string,
 };
 export const rawSidebarSourceMessageInfoValidator: TInterface<RawSidebarSourceMessageInfo> =
   tShape<RawSidebarSourceMessageInfo>({
     type: tNumber(messageTypes.SIDEBAR_SOURCE),
     threadID: tID,
     creatorID: t.String,
     time: t.Number,
     sourceMessage: t.maybe(
       t.union([
         rawComposableMessageInfoValidator,
         rawRobotextMessageInfoValidator,
       ]),
     ),
     id: tID,
   });
 
 export type RawMessageInfo =
   | RawComposableMessageInfo
   | RawRobotextMessageInfo
   | RawSidebarSourceMessageInfo
   | RawReactionMessageInfo
   | RawEditMessageInfo;
 export const rawMessageInfoValidator: TUnion<RawMessageInfo> = t.union([
   rawComposableMessageInfoValidator,
   rawRobotextMessageInfoValidator,
   rawSidebarSourceMessageInfoValidator,
   rawReactionMessageInfoValidator,
   rawEditMessageInfoValidator,
 ]);
 
 export type LocallyComposedMessageInfo =
   | ({
       ...RawImagesMessageInfo,
       +localID: string,
     } & RawImagesMessageInfo)
   | ({
       ...RawMediaMessageInfo,
       +localID: string,
     } & RawMediaMessageInfo)
   | ({
       ...RawTextMessageInfo,
       +localID: string,
     } & RawTextMessageInfo)
   | ({
       ...RawReactionMessageInfo,
       +localID: string,
     } & RawReactionMessageInfo);
 
 export type MultimediaMessageInfo = ImagesMessageInfo | MediaMessageInfo;
 export type ComposableMessageInfo = TextMessageInfo | MultimediaMessageInfo;
 
 export type RobotextMessageInfo =
   | CreateThreadMessageInfo
   | AddMembersMessageInfo
   | CreateSubthreadMessageInfo
   | ChangeSettingsMessageInfo
   | RemoveMembersMessageInfo
   | ChangeRoleMessageInfo
   | LeaveThreadMessageInfo
   | JoinThreadMessageInfo
   | CreateEntryMessageInfo
   | EditEntryMessageInfo
   | DeleteEntryMessageInfo
   | RestoreEntryMessageInfo
   | UnsupportedMessageInfo
   | UpdateRelationshipMessageInfo
   | CreateSidebarMessageInfo
   | TogglePinMessageInfo;
 export type PreviewableMessageInfo =
   | RobotextMessageInfo
   | MultimediaMessageInfo
   | ReactionMessageInfo;
 
 export type SidebarSourceMessageInfo = {
   +type: 17,
   +id: string,
   +threadID: string,
   +creator: RelativeUserInfo,
   +time: number,
   +sourceMessage: ComposableMessageInfo | RobotextMessageInfo,
 };
 
 export type MessageInfo =
   | ComposableMessageInfo
   | RobotextMessageInfo
   | SidebarSourceMessageInfo
   | ReactionMessageInfo
   | EditMessageInfo;
 
 export type ThreadMessageInfo = {
   messageIDs: string[],
   startReached: boolean,
   lastNavigatedTo: number, // millisecond timestamp
   lastPruned: number, // millisecond timestamp
 };
 const threadMessageInfoValidator: TInterface<ThreadMessageInfo> =
   tShape<ThreadMessageInfo>({
     messageIDs: t.list(tID),
     startReached: t.Boolean,
     lastNavigatedTo: t.Number,
     lastPruned: t.Number,
   });
 
 // Tracks client-local information about a message that hasn't been assigned an
 // ID by the server yet. As soon as the client gets an ack from the server for
 // this message, it will clear the LocalMessageInfo.
 export type LocalMessageInfo = {
   +sendFailed?: boolean,
 };
 const localMessageInfoValidator: TInterface<LocalMessageInfo> =
   tShape<LocalMessageInfo>({
     sendFailed: t.maybe(t.Boolean),
   });
 
 export type MessageStoreThreads = {
   +[threadID: string]: ThreadMessageInfo,
 };
 const messageStoreThreadsValidator: TDict<MessageStoreThreads> = t.dict(
   tID,
   threadMessageInfoValidator,
 );
 
 export type MessageStore = {
   +messages: { +[id: string]: RawMessageInfo },
   +threads: MessageStoreThreads,
   +local: { +[id: string]: LocalMessageInfo },
   +currentAsOf: { +[keyserverID: string]: number },
 };
 export const messageStoreValidator: TInterface<MessageStore> =
   tShape<MessageStore>({
     messages: t.dict(tID, rawMessageInfoValidator),
     threads: messageStoreThreadsValidator,
     local: t.dict(t.String, localMessageInfoValidator),
     currentAsOf: t.dict(t.String, t.Number),
   });
 
 // We were initially using `number`s` for `thread`, `type`, `future_type`, etc.
 // However, we ended up changing `thread` to `string` to account for thread IDs
 // including information about the keyserver (eg 'GENESIS|123') in the future.
 //
 // At that point we discussed whether we should switch the remaining `number`
 // fields to `string`s for consistency and flexibility. We researched whether
 // there was any performance cost to using `string`s instead of `number`s and
 // found the differences to be negligible. We also concluded using `string`s
 // may be safer after considering `jsi::Number` and the various C++ number
 // representations on the CommCoreModule side.
 export type ClientDBMessageInfo = {
   +id: string,
   +local_id: ?string,
   +thread: string,
   +user: string,
   +type: string,
   +future_type: ?string,
   +content: ?string,
   +time: string,
   +media_infos: ?$ReadOnlyArray<ClientDBMediaInfo>,
 };
 
 export type ClientDBThreadMessageInfo = {
   +id: string,
   +start_reached: string,
   +last_navigated_to: string,
   +last_pruned: string,
 };
 
 export const messageTruncationStatus = Object.freeze({
   // EXHAUSTIVE means we've reached the start of the thread. Either the result
   // set includes the very first message for that thread, or there is nothing
   // behind the cursor you queried for. Given that the client only ever issues
   // ranged queries whose range, when unioned with what is in state, represent
   // the set of all messages for a given thread, we can guarantee that getting
   // EXHAUSTIVE means the start has been reached.
   EXHAUSTIVE: 'exhaustive',
   // TRUNCATED is rare, and means that the server can't guarantee that the
   // result set for a given thread is contiguous with what the client has in its
   // state. If the client can't verify the contiguousness itself, it needs to
   // replace its Redux store's contents with what it is in this payload.
   //  1) getMessageInfosSince: Result set for thread is equal to max, and the
   //     truncation status isn't EXHAUSTIVE (ie. doesn't include the very first
   //     message).
   //  2) getMessageInfos: MessageSelectionCriteria does not specify cursors, the
   //     result set for thread is equal to max, and the truncation status isn't
   //     EXHAUSTIVE. If cursors are specified, we never return truncated, since
   //     the cursor given us guarantees the contiguousness of the result set.
   // Note that in the reducer, we can guarantee contiguousness if there is any
   // intersection between messageIDs in the result set and the set currently in
   // the Redux store.
   TRUNCATED: 'truncated',
   // UNCHANGED means the result set is guaranteed to be contiguous with what the
   // client has in its state, but is not EXHAUSTIVE. Basically, it's anything
   // that isn't either EXHAUSTIVE or TRUNCATED.
   UNCHANGED: 'unchanged',
 });
 export type MessageTruncationStatus = $Values<typeof messageTruncationStatus>;
 export function assertMessageTruncationStatus(
   ourMessageTruncationStatus: string,
 ): MessageTruncationStatus {
   invariant(
     ourMessageTruncationStatus === 'truncated' ||
       ourMessageTruncationStatus === 'unchanged' ||
       ourMessageTruncationStatus === 'exhaustive',
     'string is not ourMessageTruncationStatus enum',
   );
   return ourMessageTruncationStatus;
 }
 export const messageTruncationStatusValidator: TEnums = t.enums.of(
   values(messageTruncationStatus),
 );
 export type MessageTruncationStatuses = {
   [threadID: string]: MessageTruncationStatus,
 };
 export const messageTruncationStatusesValidator: TDict<MessageTruncationStatuses> =
   t.dict(tID, messageTruncationStatusValidator);
 
 export type ThreadCursors = { +[threadID: string]: ?string };
 
 export type MessageSelectionCriteria = {
   +threadCursors?: ?ThreadCursors,
   +joinedThreads?: ?boolean,
   +newerThan?: ?number,
 };
 
 export type FetchMessageInfosRequest = {
   +cursors: ThreadCursors,
   +numberPerThread?: ?number,
 };
 export type FetchMessageInfosResponse = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
   +userInfos: UserInfos,
 };
 export type FetchMessageInfosResult = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
 };
 export type FetchMessageInfosPayload = {
   +threadID: string,
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatus: MessageTruncationStatus,
 };
 export type MessagesResponse = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
   +currentAsOf: number,
 };
 export const messagesResponseValidator: TInterface<MessagesResponse> =
   tShape<MessagesResponse>({
     rawMessageInfos: t.list(rawMessageInfoValidator),
     truncationStatuses: messageTruncationStatusesValidator,
     currentAsOf: t.Number,
   });
 export type SimpleMessagesPayload = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
 };
 export const defaultNumberPerThread = 20;
 export const defaultMaxMessageAge = 14 * 24 * 60 * 60 * 1000; // 2 weeks
 
 export type SendMessageResponse = {
   +newMessageInfo: RawMessageInfo,
 };
 export type SendMessageResult = {
   +id: string,
   +time: number,
   +interface: CallServerEndpointResultInfoInterface,
 };
 
 export type SendMessagePayload = {
   +localID: string,
   +serverID: string,
   +threadID: string,
   +time: number,
   +interface: CallServerEndpointResultInfoInterface,
 };
 
 export type SendTextMessageRequest = {
   +threadID: string,
   +localID?: string,
   +text: string,
   +sidebarCreation?: boolean,
 };
 export type SendMultimediaMessageRequest =
   // This option is only used for messageTypes.IMAGES
   | {
       +threadID: string,
       +localID: string,
       +sidebarCreation?: boolean,
       +mediaIDs: $ReadOnlyArray<string>,
     }
   | {
       +threadID: string,
       +localID: string,
       +sidebarCreation?: boolean,
       +mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
     };
 
 export type SendReactionMessageRequest = {
   +threadID: string,
   +localID?: string,
   +targetMessageID: string,
   +reaction: string,
   +action: 'add_reaction' | 'remove_reaction',
 };
 
 export type SendEditMessageRequest = {
   +targetMessageID: string,
   +text: string,
 };
 
 export type SendEditMessageResponse = {
   +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 };
 
 export type EditMessagePayload = SendEditMessageResponse;
 export type SendEditMessageResult = SendEditMessageResponse;
 
 export type EditMessageContent = {
   +text: string,
 };
 
 // Used for the message info included in log-in type actions
 export type GenericMessagesResult = {
   +messageInfos: RawMessageInfo[],
   +truncationStatus: MessageTruncationStatuses,
   +watchedIDsAtRequestTime: $ReadOnlyArray<string>,
   +currentAsOf: number,
 };
 
 export type SaveMessagesPayload = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +updatesCurrentAsOf: number,
 };
 
 export type NewMessagesPayload = {
   +messagesResult: MessagesResponse,
 };
 export const newMessagesPayloadValidator: TInterface<NewMessagesPayload> =
   tShape<NewMessagesPayload>({
     messagesResult: messagesResponseValidator,
   });
 
 export type MessageStorePrunePayload = {
   +threadIDs: $ReadOnlyArray<string>,
 };
 
 export type FetchPinnedMessagesRequest = {
   +threadID: string,
 };
 
 export type FetchPinnedMessagesResult = {
   +pinnedMessages: $ReadOnlyArray<RawMessageInfo>,
 };
 
 export type SearchMessagesRequest = {
   +query: string,
   +threadID: string,
   +cursor?: string,
 };
 
 export type SearchMessagesResponse = {
   +messages: $ReadOnlyArray<RawMessageInfo>,
   +endReached: boolean,
 };
diff --git a/native/chat/message-results-screen.react.js b/native/chat/message-results-screen.react.js
index 3277b5c4a..4d0bc651b 100644
--- a/native/chat/message-results-screen.react.js
+++ b/native/chat/message-results-screen.react.js
@@ -1,180 +1,179 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { fetchPinnedMessages } from 'lib/actions/message-actions.js';
 import { messageListData } from 'lib/selectors/chat-selectors.js';
 import { createMessageInfo } from 'lib/shared/message-utils.js';
+import { isComposableMessageType } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
 import { useHeightMeasurer } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react';
 import MessageResult from './message-result.react.js';
 import type { NavigationRoute } from '../navigation/route-names';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageItemWithHeight } from '../types/chat-types.js';
 
 export type MessageResultsScreenParams = {
   +threadInfo: ThreadInfo,
 };
 
 type MessageResultsScreenProps = {
   +navigation: ChatNavigationProp<'MessageResultsScreen'>,
   +route: NavigationRoute<'MessageResultsScreen'>,
 };
 
 function MessageResultsScreen(props: MessageResultsScreenProps): React.Node {
   const { navigation, route } = props;
   const { threadInfo } = route.params;
   const styles = useStyles(unboundStyles);
   const { id: threadID } = threadInfo;
   const [rawMessageResults, setRawMessageResults] = React.useState([]);
 
   const measureMessages = useHeightMeasurer();
   const [measuredMessages, setMeasuredMessages] = React.useState([]);
 
   const [messageVerticalBounds, setMessageVerticalBounds] = React.useState();
   const scrollViewContainerRef = React.useRef();
 
   const callFetchPinnedMessages = useServerCall(fetchPinnedMessages);
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   React.useEffect(() => {
     (async () => {
       const result = await callFetchPinnedMessages({ threadID });
       setRawMessageResults(result.pinnedMessages);
     })();
   }, [callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
     if (!chatMessageInfos) {
       return [];
     }
 
-    const pinnedMessageIDs = new Set();
-    translatedMessageResults.forEach(item => pinnedMessageIDs.add(item.id));
-
     const chatMessageInfoItems = chatMessageInfos.filter(
       item =>
         item.itemType === 'message' &&
-        pinnedMessageIDs.has(item.messageInfo.id),
+        item.isPinned &&
+        isComposableMessageType(item.messageInfo.type),
     );
 
     // By the nature of using messageListData and passing in
     // the desired translatedMessageResults as additional
     // messages, we will have duplicate ChatMessageInfoItems.
     const uniqueChatMessageInfoItemsMap = new Map();
     chatMessageInfoItems.forEach(
       item =>
         item.messageInfo &&
         item.messageInfo.id &&
         uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
     );
 
     // Push the items in the order they appear in the rawMessageResults
     // since the messages fetched from the server are already sorted
     // in the order of pin_time (newest first).
     const sortedChatMessageInfoItems = [];
     for (let i = 0; i < rawMessageResults.length; i++) {
       sortedChatMessageInfoItems.push(
         uniqueChatMessageInfoItemsMap.get(rawMessageResults[i].id),
       );
     }
 
     return sortedChatMessageInfoItems.filter(Boolean);
-  }, [translatedMessageResults, chatMessageInfos, rawMessageResults]);
+  }, [chatMessageInfos, rawMessageResults]);
 
   const measureCallback = React.useCallback(
     (listDataWithHeights: $ReadOnlyArray<ChatMessageItemWithHeight>) => {
       setMeasuredMessages(listDataWithHeights);
     },
     [],
   );
 
   React.useEffect(() => {
     measureMessages(
       sortedUniqueChatMessageInfoItems,
       threadInfo,
       measureCallback,
     );
   }, [
     measureCallback,
     measureMessages,
     sortedUniqueChatMessageInfoItems,
     threadInfo,
   ]);
 
   const onLayout = React.useCallback(() => {
     scrollViewContainerRef.current?.measure(
       (x, y, width, height, pageX, pageY) => {
         if (
           height === null ||
           height === undefined ||
           pageY === null ||
           pageY === undefined
         ) {
           return;
         }
 
         setMessageVerticalBounds({ height, y: pageY });
       },
     );
   }, []);
 
   const messageResultsToDisplay = React.useMemo(
     () =>
       measuredMessages.map(item => {
         invariant(item.itemType !== 'loader', 'should not be loader');
 
         return (
           <MessageResult
             key={item.messageInfo.id}
             item={item}
             threadInfo={threadInfo}
             navigation={navigation}
             route={route}
             messageVerticalBounds={messageVerticalBounds}
             scrollable={false}
           />
         );
       }),
     [measuredMessages, threadInfo, navigation, route, messageVerticalBounds],
   );
 
   return (
     <View
       ref={scrollViewContainerRef}
       onLayout={onLayout}
       style={styles.scrollViewContainer}
     >
       <ScrollView>{messageResultsToDisplay}</ScrollView>
     </View>
   );
 }
 
 const unboundStyles = {
   scrollViewContainer: {
     flex: 1,
   },
 };
 
 export default MessageResultsScreen;
diff --git a/web/modals/chat/message-results-modal.react.js b/web/modals/chat/message-results-modal.react.js
index bea2be3c5..807c8a4dc 100644
--- a/web/modals/chat/message-results-modal.react.js
+++ b/web/modals/chat/message-results-modal.react.js
@@ -1,153 +1,152 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   fetchPinnedMessages,
   fetchPinnedMessageActionTypes,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { messageListData } from 'lib/selectors/chat-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   createMessageInfo,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
+import { isComposableMessageType } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import css from './message-results-modal.css';
 import MessageResult from '../../components/message-result.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal from '../modal.react.js';
 
 type MessageResultsModalProps = {
   +threadInfo: ThreadInfo,
   +modalName: string,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   fetchPinnedMessageActionTypes,
 );
 
 function MessageResultsModal(props: MessageResultsModalProps): React.Node {
   const { threadInfo, modalName } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
   const [rawMessageResults, setRawMessageResults] = React.useState([]);
 
   const callFetchPinnedMessages = useServerCall(fetchPinnedMessages);
   const dispatchActionPromise = useDispatchActionPromise();
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const loadingStatus = useSelector(loadingStatusSelector);
 
   React.useEffect(() => {
     dispatchActionPromise(
       fetchPinnedMessageActionTypes,
       (async () => {
         const result = await callFetchPinnedMessages({ threadID });
         setRawMessageResults(result.pinnedMessages);
       })(),
     );
   }, [dispatchActionPromise, callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
     if (!chatMessageInfos) {
       return [];
     }
 
-    const pinnedMessageIDs = new Set();
-    translatedMessageResults.forEach(item => pinnedMessageIDs.add(item.id));
-
     const chatMessageInfoItems = chatMessageInfos.filter(
       item =>
         item.itemType === 'message' &&
-        pinnedMessageIDs.has(item.messageInfo.id),
+        item.isPinned &&
+        isComposableMessageType(item.messageInfo.type),
     );
 
     // By the nature of using messageListData and passing in
     // the desired translatedMessageResults as additional
     // messages, we will have duplicate ChatMessageInfoItems.
     const uniqueChatMessageInfoItemsMap = new Map();
     chatMessageInfoItems.forEach(
       item =>
         item.messageInfo &&
         item.messageInfo.id &&
         uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
     );
 
     // Push the items in the order they appear in the rawMessageResults
     // since the messages fetched from the server are already sorted
     // in the order of pin_time (newest first).
     const sortedChatMessageInfoItems = [];
     for (let i = 0; i < rawMessageResults.length; i++) {
       sortedChatMessageInfoItems.push(
         uniqueChatMessageInfoItemsMap.get(rawMessageResults[i].id),
       );
     }
 
     return sortedChatMessageInfoItems;
-  }, [translatedMessageResults, chatMessageInfos, rawMessageResults]);
+  }, [chatMessageInfos, rawMessageResults]);
 
   const modifiedItems = React.useMemo(
     () =>
       sortedUniqueChatMessageInfoItems
         .filter(Boolean)
         .map(item => modifyItemForResultScreen(item)),
     [sortedUniqueChatMessageInfoItems],
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
     const items = modifiedItems.map(item => (
       <MessageResult
         key={item.messageInfo.id}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ));
     return <>{items}</>;
   }, [modifiedItems, threadInfo]);
 
   const loadingIndicator = React.useMemo(() => {
     if (loadingStatus === 'loading') {
       return (
         <div className={css.loadingIndicator}>
           <LoadingIndicator status="loading" size="medium" />
         </div>
       );
     }
     return null;
   }, [loadingStatus]);
 
   return (
     <Modal name={modalName} onClose={popModal} size="large">
       <hr className={css.separator} />
       <div className={css.topSpace}>{loadingIndicator}</div>
       <div className={css.messageResultsContainer}>
         {messageResultsToDisplay}
       </div>
     </Modal>
   );
 }
 
 export default MessageResultsModal;