Show language on posts and comments

src/assets/symbols.svg

@@ -248,5 +248,8 @@
     <symbol id="icon-superscript" viewBox="0 0 20 20">
       <path d="M17.5 1h.5V0h-.5a1.49 1.49 0 0 0-1 .39 1.49 1.49 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.49 1.49 0 0 0 1-.39 1.49 1.49 0 0 0 1 .39h.5V8h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5zm-3.82 15h-2.42a.67.67 0 0 1-.46-.15 1.33 1.33 0 0 1-.28-.34l-2.77-4.44a2.65 2.65 0 0 1-.28.69L5 15.51a2.22 2.22 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.81.81 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.71 2.71 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71z" />
     </symbol>
+    <symbol id="icon-language" viewBox="0 0 24 24">
+      <path d="M20.58 19.37L17.59 11.01C17.38 10.46 16.91 10.12 16.37 10.12C15.83 10.12 15.37 10.46 15.14 11.03L12.16 19.37C12.02 19.76 12.22 20.19 12.61 20.33C13 20.47 13.43 20.27 13.57 19.88L14.19 18.15H18.54L19.16 19.88C19.27 20.19 19.56 20.38 19.87 20.38C19.95 20.38 20.04 20.37 20.12 20.34C20.51 20.2 20.71 19.77 20.57 19.38L20.58 19.37ZM14.74 16.64L16.38 12.05L18.02 16.64H14.74ZM12.19 7.85C9.92999 11.42 7.89 13.58 5.41 15.02C5.29 15.09 5.16 15.12 5.04 15.12C4.78 15.12 4.53 14.99 4.39 14.75C4.18 14.39 4.3 13.93 4.66 13.73C6.75999 12.51 8.48 10.76 10.41 7.86H4.12C3.71 7.86 3.37 7.52 3.37 7.11C3.37 6.7 3.71 6.36 4.12 6.36H7.87V4.38C7.87 3.97 8.21 3.63 8.62 3.63C9.02999 3.63 9.37 3.97 9.37 4.38V6.36H13.12C13.53 6.36 13.87 6.7 13.87 7.11C13.87 7.52 13.53 7.86 13.12 7.86H12.18L12.19 7.85ZM12.23 15.12C12.1 15.12 11.97 15.09 11.85 15.02C11.2 14.64 10.57 14.22 9.97999 13.78C9.64999 13.53 9.58 13.06 9.83 12.73C10.08 12.4 10.55 12.33 10.88 12.58C11.42 12.99 12.01 13.37 12.61 13.72C12.97 13.93 13.09 14.39 12.88 14.75C12.74 14.99 12.49 15.12 12.23 15.12Z"/>
+    </symbol>
   </defs>
 </svg>

src/shared/components/comment/comment-node.tsx

@@ -282,8 +282,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 )}
               </button>
               {this.linkBtn(true)}
+              <div className="d-inline mx-2">
+                <Icon icon="language" inline classes="mr-1" />
+                {
+                  this.props.allLanguages.find(
+                    lang => lang.id === cv.comment.language_id
+                  )?.name
+                }
+              </div>
               {/* This is an expanding spacer for mobile */}
-              <div className="mr-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
+              <div className="mr-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
               {showScores() && (
                 <>
                   <a

src/shared/components/post/post-listing.tsx

@@ -316,13 +316,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   createdLine() {
-    let post_view = this.props.post_view;
-    let url = post_view.post.url;
-    let body = post_view.post.body;
+    const {
+      post: { language_id, updated, published, url, body },
+      community,
+      creator,
+    } = this.props.post_view;
     return (
       <ul className="list-inline mb-1 text-muted small">
         <li className="list-inline-item">
-          <PersonListing person={post_view.creator} />
+          <PersonListing person={creator} />
 
           {this.creatorIsMod_ && (
             <span className="mx-1 badge badge-light">{i18n.t("mod")}</span>
@@ -330,7 +332,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           {this.creatorIsAdmin_ && (
             <span className="mx-1 badge badge-light">{i18n.t("admin")}</span>
           )}
-          {post_view.creator.bot_account && (
+          {creator.bot_account && (
             <span className="mx-1 badge badge-light">
               {i18n.t("bot_account").toLowerCase()}
             </span>
@@ -338,10 +340,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           {this.props.showCommunity && (
             <span>
               <span className="mx-1"> {i18n.t("to")} </span>
-              <CommunityLink community={post_view.community} />
+              <CommunityLink community={community} />
             </span>
           )}
         </li>
+        <li className="list-inline-item">
+          <Icon icon="language" inline classes="mr-1" />
+          {this.props.allLanguages.find(lang => lang.id === language_id)?.name}
+        </li>
         <li className="list-inline-item">•</li>
         {url && !(hostname(url) === getExternalHost()) && (
           <>
@@ -360,15 +366,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         )}
         <li className="list-inline-item">
           <span>
-            <MomentTime
-              published={post_view.post.published}
-              updated={post_view.post.updated}
-            />
+            <MomentTime published={published} updated={updated} />
           </span>
         </li>
         {body && (
           <>
-            <li className="list-inline-item">•</li>
             <li className="list-inline-item">
               <button
                 className="text-muted btn btn-sm btn-link p-0"