Keyboard shortcuts and accessibility

ts/state/smart/LeftPane.tsx

@@ -6,7 +6,11 @@ import { StateType } from '../reducer';
 
 import { getSearchResults, isSearching } from '../selectors/search';
 import { getIntl } from '../selectors/user';
-import { getLeftPaneLists, getShowArchived } from '../selectors/conversations';
+import {
+  getLeftPaneLists,
+  getSelectedConversation,
+  getShowArchived,
+} from '../selectors/conversations';
 
 import { SmartMainHeader } from './MainHeader';
 import { SmartMessageSearchResult } from './MessageSearchResult';
@@ -28,10 +32,12 @@ const mapStateToProps = (state: StateType) => {
 
   const lists = showSearch ? undefined : getLeftPaneLists(state);
   const searchResults = showSearch ? getSearchResults(state) : undefined;
+  const selectedConversationId = getSelectedConversation(state);
 
   return {
     ...lists,
     searchResults,
+    selectedConversationId,
     showArchived: getShowArchived(state),
     i18n: getIntl(state),
     renderMainHeader,

ts/state/smart/MainHeader.tsx

@@ -8,6 +8,7 @@ import {
   getQuery,
   getSearchConversationId,
   getSearchConversationName,
+  getStartSearchCounter,
 } from '../selectors/search';
 import { getIntl, getRegionCode, getUserNumber } from '../selectors/user';
 import { getMe } from '../selectors/conversations';
@@ -17,6 +18,7 @@ const mapStateToProps = (state: StateType) => {
     searchTerm: getQuery(state),
     searchConversationId: getSearchConversationId(state),
     searchConversationName: getSearchConversationName(state),
+    startSearchCounter: getStartSearchCounter(state),
     regionCode: getRegionCode(state),
     ourNumber: getUserNumber(state),
     ...getMe(state),

ts/state/smart/ShortcutGuideModal.tsx

@@ -0,0 +1,47 @@
+import { connect } from 'react-redux';
+import { mapDispatchToProps } from '../actions';
+import { ShortcutGuideModal } from '../../components/ShortcutGuideModal';
+import { StateType } from '../reducer';
+
+import { countStickers } from '../../components/stickers/lib';
+import { getIntl, getPlatform } from '../selectors/user';
+import {
+  getBlessedStickerPacks,
+  getInstalledStickerPacks,
+  getKnownStickerPacks,
+  getReceivedStickerPacks,
+} from '../selectors/stickers';
+
+type ExternalProps = {
+  close: () => unknown;
+};
+
+const mapStateToProps = (state: StateType, props: ExternalProps) => {
+  const { close } = props;
+
+  const blessedPacks = getBlessedStickerPacks(state);
+  const installedPacks = getInstalledStickerPacks(state);
+  const knownPacks = getKnownStickerPacks(state);
+  const receivedPacks = getReceivedStickerPacks(state);
+
+  const hasInstalledStickers =
+    countStickers({
+      knownPacks,
+      blessedPacks,
+      installedPacks,
+      receivedPacks,
+    }) === 0;
+
+  const platform = getPlatform(state);
+
+  return {
+    close,
+    hasInstalledStickers,
+    platform,
+    i18n: getIntl(state),
+  };
+};
+
+const smart = connect(mapStateToProps, mapDispatchToProps);
+
+export const SmartShortcutGuideModal = smart(ShortcutGuideModal);

ts/state/smart/Timeline.tsx

@@ -9,6 +9,7 @@ import { getIntl } from '../selectors/user';
 import {
   getConversationMessagesSelector,
   getConversationSelector,
+  getSelectedMessage,
 } from '../selectors/conversations';
 
 import { SmartTimelineItem } from './TimelineItem';
@@ -30,8 +31,18 @@ type ExternalProps = {
   //   are provided by ConversationView in setupTimeline().
 };
 
-function renderItem(messageId: string, actionProps: Object): JSX.Element {
-  return <FilteredSmartTimelineItem {...actionProps} id={messageId} />;
+function renderItem(
+  messageId: string,
+  conversationId: string,
+  actionProps: Object
+): JSX.Element {
+  return (
+    <FilteredSmartTimelineItem
+      {...actionProps}
+      conversationId={conversationId}
+      id={messageId}
+    />
+  );
 }
 function renderLastSeenIndicator(id: string): JSX.Element {
   return <FilteredSmartLastSeenIndicator id={id} />;
@@ -48,11 +59,13 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
 
   const conversation = getConversationSelector(state)(id);
   const conversationMessages = getConversationMessagesSelector(state)(id);
+  const selectedMessage = getSelectedMessage(state);
 
   return {
     id,
     ...pick(conversation, ['unreadCount', 'typingContact']),
     ...conversationMessages,
+    selectedMessageId: selectedMessage ? selectedMessage.id : undefined,
     i18n: getIntl(state),
     renderItem,
     renderLastSeenIndicator,

ts/state/smart/TimelineItem.tsx

@@ -5,20 +5,30 @@ import { StateType } from '../reducer';
 
 import { TimelineItem } from '../../components/conversation/TimelineItem';
 import { getIntl } from '../selectors/user';
-import { getMessageSelector } from '../selectors/conversations';
+import {
+  getMessageSelector,
+  getSelectedMessage,
+} from '../selectors/conversations';
 
 type ExternalProps = {
   id: string;
+  conversationId: string;
 };
 
 const mapStateToProps = (state: StateType, props: ExternalProps) => {
-  const { id } = props;
+  const { id, conversationId } = props;
 
   const messageSelector = getMessageSelector(state);
   const item = messageSelector(id);
 
+  const selectedMessage = getSelectedMessage(state);
+  const isSelected = Boolean(selectedMessage && id === selectedMessage.id);
+
   return {
     item,
+    id,
+    conversationId,
+    isSelected,
     i18n: getIntl(state),
   };
 };