Finish new Message component, integrate into application

Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
  to show in conversation
- New MessageDetail react component
- New ConversationHeader react component

ts/components/conversation/ConversationHeader.md

@@ -0,0 +1,139 @@
+### Name variations, 1:1 conversation
+
+Note the five items in gear menu, and the second-level menu with disappearing messages options. Disappearing message set to 'off'.
+
+#### With name and profile, verified
+
+```jsx
+<ConversationHeader
+  i18n={util.i18n}
+  color="red"
+  isVerified={true}
+  avatarPath={util.gifObjectUrl}
+  name="Someone 🔥 Somewhere"
+  phoneNumber="(202) 555-0001"
+  id="1"
+  profileName="🔥Flames🔥"
+  onSetDisappearingMessages={seconds =>
+    console.log('onSetDisappearingMessages', seconds)
+  }
+  onDeleteMessages={() => console.log('onDeleteMessages')}
+  onResetSession={() => console.log('onResetSession')}
+  onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
+  onShowAllMedia={() => console.log('onShowAllMedia')}
+  onShowGroupMembers={() => console.log('onShowGroupMembers')}
+  onGoBack={() => console.log('onGoBack')}
+/>
+```
+
+#### With name, not verified, no avatar
+
+```jsx
+<ConversationHeader
+  i18n={util.i18n}
+  color="blue"
+  isVerified={false}
+  name="Someone 🔥 Somewhere"
+  phoneNumber="(202) 555-0002"
+  id="2"
+/>
+```
+
+#### Profile, no name
+
+```jsx
+<ConversationHeader
+  i18n={util.i18n}
+  color="teal"
+  isVerified={false}
+  phoneNumber="(202) 555-0003"
+  id="3"
+  profileName="🔥Flames🔥"
+/>
+```
+
+#### No name, no profile, no color
+
+```jsx
+<ConversationHeader i18n={util.i18n} phoneNumber="(202) 555-0011" id="11" />
+```
+
+### With back button
+
+```jsx
+<ConversationHeader
+  showBackButton={true}
+  color="deep_orange"
+  i18n={util.i18n}
+  phoneNumber="(202) 555-0004"
+  id="4"
+/>
+```
+
+### Disappearing messages set
+
+```jsx
+<ConversationHeader
+  color="indigo"
+  i18n={util.i18n}
+  phoneNumber="(202) 555-0005"
+  id="5"
+  expirationSettingName="10 seconds"
+  timerOptions={[
+    {
+      name: 'off',
+      value: 0,
+    },
+    {
+      name: '10 seconds',
+      value: 10,
+    },
+  ]}
+  onSetDisappearingMessages={seconds =>
+    console.log('onSetDisappearingMessages', seconds)
+  }
+  onDeleteMessages={() => console.log('onDeleteMessages')}
+  onResetSession={() => console.log('onResetSession')}
+  onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
+  onShowAllMedia={() => console.log('onShowAllMedia')}
+  onShowGroupMembers={() => console.log('onShowGroupMembers')}
+  onGoBack={() => console.log('onGoBack')}
+/>
+```
+
+### In a group
+
+Note that the menu should includes 'Show Members' instead of 'Show Safety Number'
+
+```jsx
+<ConversationHeader
+  i18n={util.i18n}
+  color="green"
+  phoneNumber="(202) 555-0006"
+  id="6"
+  isGroup={true}
+  onSetDisappearingMessages={seconds =>
+    console.log('onSetDisappearingMessages', seconds)
+  }
+  onDeleteMessages={() => console.log('onDeleteMessages')}
+  onResetSession={() => console.log('onResetSession')}
+  onShowSafetyNumber={() => console.log('onShowSafetyNumber')}
+  onShowAllMedia={() => console.log('onShowAllMedia')}
+  onShowGroupMembers={() => console.log('onShowGroupMembers')}
+  onGoBack={() => console.log('onGoBack')}
+/>
+```
+
+### In chat with yourself
+
+Note that the menu should not have a 'Show Safety Number' entry.
+
+```jsx
+<ConversationHeader
+  color="cyan"
+  i18n={util.i18n}
+  phoneNumber="(202) 555-0007"
+  id="7"
+  isMe={true}
+/>
+```