fix: translations, typings, cleanup and fix view conversation

src/core/client/stream/components/App.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
@@ -9,6 +10,7 @@ import {
   TabPane,
 } from "talk-ui/components";
 
+import { PropTypesOf } from "talk-ui/types";
 import CommentsPaneContainer from "../tabs/comments/containers/CommentsPaneContainer";
 import ProfileQuery from "../tabs/profile/queries/ProfileQuery";
 import * as styles from "./App.css";
@@ -20,12 +22,24 @@ export interface AppProps {
   onTabClick: (tab: TabValue) => void;
 }
 
+const CommentsTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
+  <Localized id="general-app-commentsTab">
+    <Tab {...props}>Comments</Tab>
+  </Localized>
+);
+
+const MyProfileTab: StatelessComponent<PropTypesOf<typeof Tab>> = props => (
+  <Localized id="general-app-myProfileTab">
+    <Tab {...props}>My Profile</Tab>
+  </Localized>
+);
+
 const App: StatelessComponent<AppProps> = props => {
   return (
     <HorizontalGutter className={styles.root}>
       <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
-        <Tab tabId="COMMENTS">Comments</Tab>
-        <Tab tabId="PROFILE">My Profile</Tab>
+        <CommentsTab tabId="COMMENTS" />
+        <MyProfileTab tabId="PROFILE" />
       </TabBar>
       <TabContent activeTab={props.activeTab} className={styles.tabContent}>
         <TabPane tabId="COMMENTS">