From d829b9b5aca04ccf2d79e7fb17da8ff15fb888e0 Mon Sep 17 00:00:00 2001
From: Richard <richard@tripaneer.com>
Date: Fri, 31 Jan 2020 21:52:27 +0100
Subject: [PATCH 1/6] usability features

This are all the commits from another PR combined into a single commit.
---
 ui/src/components/communities.tsx      | 25 ++++----
 ui/src/components/community-form.tsx   | 28 +++++----
 ui/src/components/community.tsx        | 12 ++--
 ui/src/components/create-community.tsx |  2 +-
 ui/src/components/create-post.tsx      |  2 +-
 ui/src/components/footer.tsx           | 10 ++--
 ui/src/components/inbox.tsx            | 26 +++++----
 ui/src/components/login.tsx            | 53 ++++++++++-------
 ui/src/components/main.tsx             | 10 ++--
 ui/src/components/modlog.tsx           | 14 ++---
 ui/src/components/navbar.tsx           | 13 +++--
 ui/src/components/password_change.tsx  |  2 +-
 ui/src/components/post-form.tsx        | 40 +++++++------
 ui/src/components/post-listing.tsx     | 49 ++++++++--------
 ui/src/components/post-listings.tsx    | 11 ++--
 ui/src/components/post.tsx             | 27 ++-------
 ui/src/components/search.tsx           | 22 +++----
 ui/src/components/setup.tsx            | 27 +++++----
 ui/src/components/sidebar.tsx          | 21 +++----
 ui/src/components/site-form.tsx        | 27 +++++----
 ui/src/components/sort-select.tsx      | 18 +++---
 ui/src/components/sponsors.tsx         | 16 ++---
 ui/src/components/user.tsx             | 81 ++++++++++++++------------
 ui/src/translations/de.ts              | 64 ++++++++++----------
 ui/src/translations/en.ts              |  2 +
 25 files changed, 316 insertions(+), 286 deletions(-)

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index b1da988..eef39cc 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -76,37 +76,37 @@ export class Communities extends Component<any, CommunitiesState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="">
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div>
             <h5>
-              <T i18nKey="list_of_communities">#</T>
+              { i18n.t('list_of_communities') }
             </h5>
             <div class="table-responsive">
               <table id="community_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
                     <th>
-                      <T i18nKey="name">#</T>
+                      { i18n.t('name') }
                     </th>
                     <th class="d-none d-lg-table-cell">
-                      <T i18nKey="title">#</T>
+                      { i18n.t('title') }
                     </th>
                     <th>
-                      <T i18nKey="category">#</T>
+                      { i18n.t('category') }
                     </th>
                     <th class="text-right">
-                      <T i18nKey="subscribers">#</T>
+                      { i18n.t('subscribers') }
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      <T i18nKey="posts">#</T>
+                      { i18n.t('posts') }
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      <T i18nKey="comments">#</T>
+                      { i18n.t('comments') }
                     </th>
                     <th></th>
                   </tr>
@@ -149,7 +149,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleSubscribe
                             )}
                           >
-                            <T i18nKey="subscribe">#</T>
+                            { i18n.t('subscribe') }
                           </span>
                         )}
                       </td>
@@ -173,15 +173,16 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
+
         {this.state.communities.length == communityLimit && (
           <button
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            <T i18nKey="next">#</T>
+            { i18n.t('next') }
           </button>
         )}
       </div>
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index c8d888b..46fc418 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -108,12 +108,13 @@ export class CommunityForm extends Component<
     return (
       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="name">#</T>
+          <label class="col-12 col-form-label" for="community-name">
+            { i18n.t('name') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="community-name"
               class="form-control"
               value={this.state.communityForm.name}
               onInput={linkEvent(this, this.handleCommunityNameChange)}
@@ -125,13 +126,15 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="title">#</T>
+          <label class="col-12 col-form-label" for="community-title">
+            { i18n.t('title') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="community-title"
               value={this.state.communityForm.title}
               onInput={linkEvent(this, this.handleCommunityTitleChange)}
               class="form-control"
@@ -142,13 +145,14 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="sidebar">#</T>
+          <label class="col-12 col-form-label" for="community-sidebar">
+            { i18n.t('sidebar') }
           </label>
           <div class="col-12">
             <textarea
               id={this.id}
               value={this.state.communityForm.description}
+              id="community-sidebar"
               onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
               class="form-control"
               rows={3}
@@ -157,12 +161,13 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="category">#</T>
+          <label class="col-12 col-form-label" for="community-category">
+            { i18n.t('category') }
           </label>
           <div class="col-12">
             <select
               class="form-control"
+              id="community-category"
               value={this.state.communityForm.category_id}
               onInput={linkEvent(this, this.handleCommunityCategoryChange)}
             >
@@ -179,12 +184,13 @@ export class CommunityForm extends Component<
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="community-nsfw"
                   type="checkbox"
                   checked={this.state.communityForm.nsfw}
                   onChange={linkEvent(this, this.handleCommunityNsfwChange)}
                 />
-                <label class="form-check-label">
-                  <T i18nKey="nsfw">#</T>
+                <label class="form-check-label" for="community-nsfw">
+                  { i18n.t('nsfw') }
                 </label>
               </div>
             </div>
@@ -209,7 +215,7 @@ export class CommunityForm extends Component<
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                <T i18nKey="cancel">#</T>
+                { i18n.t('cancel') }
               </button>
             )}
           </div>
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 3c5f689..3075634 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -128,11 +128,11 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -140,12 +140,12 @@ export class Community extends Component<any, State> {
                 {this.state.community.title}
                 {this.state.community.removed && (
                   <small className="ml-2 text-muted font-italic">
-                    <T i18nKey="removed">#</T>
+                    { i18n.t('removed') }
                   </small>
                 )}
                 {this.state.community.nsfw && (
                   <small className="ml-2 text-muted font-italic">
-                    <T i18nKey="nsfw">#</T>
+                    { i18n.t('nsfw') }
                   </small>
                 )}
               </h5>
@@ -192,7 +192,7 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         {this.state.posts.length == fetchLimit && (
@@ -200,7 +200,7 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            <T i18nKey="next">#</T>
+            { i18n.t('next') }
           </button>
         )}
       </div>
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index f16b642..49cfb0e 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -23,7 +23,7 @@ export class CreateCommunity extends Component<any, any> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="create_community">#</T>
+              { i18n.t('create_community') }
             </h5>
             <CommunityForm onCreate={this.handleCommunityCreate} />
           </div>
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index ad013d0..39a5e5f 100644
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -23,7 +23,7 @@ export class CreatePost extends Component<any, any> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="create_post">#</T>
+              { i18n.t('create_post') }
             </h5>
             <PostForm onCreate={this.handlePostCreate} params={this.params} />
           </div>
diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx
index 5451da2..f48120b 100644
--- a/ui/src/components/footer.tsx
+++ b/ui/src/components/footer.tsx
@@ -2,7 +2,7 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { repoUrl } from '../utils';
 import { version } from '../version';
-import { T } from 'inferno-i18next';
+import { i18n } from '../i18next';
 
 export class Footer extends Component<any, any> {
   constructor(props: any, context: any) {
@@ -19,22 +19,22 @@ export class Footer extends Component<any, any> {
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/modlog">
-                <T i18nKey="modlog">#</T>
+                { i18n.t('modlog') }
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={'/docs/index.html'}>
-                <T i18nKey="docs">#</T>
+                { i18n.t('docs') }
               </a>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/sponsors">
-                <T i18nKey="donate">#</T>
+                { i18n.t('donate') }
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={repoUrl}>
-                <T i18nKey="code">#</T>
+                { i18n.t('code') }
               </a>
             </li>
           </ul>
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index 41c1ce6..c89beb4 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -122,7 +122,7 @@ export class Inbox extends Component<any, InboxState> {
                 <ul class="list-inline mb-1 text-muted small font-weight-bold">
                   <li className="list-inline-item">
                     <span class="pointer" onClick={this.markAllAsRead}>
-                      <T i18nKey="mark_all_as_read">#</T>
+                      { i18n.t('mark_all_as_read') }
                     </span>
                   </li>
                 </ul>
@@ -148,13 +148,14 @@ export class Inbox extends Component<any, InboxState> {
           class="custom-select custom-select-sm w-auto mr-2"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
+            
           </option>
           <option value={UnreadOrAll.Unread}>
-            <T i18nKey="unread">#</T>
+            { i18n.t('unread') }
           </option>
           <option value={UnreadOrAll.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
           </option>
         </select>
         <select
@@ -163,19 +164,22 @@ export class Inbox extends Component<any, InboxState> {
           class="custom-select custom-select-sm w-auto mr-2"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
           </option>
           <option value={UnreadType.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
+          </option>
+          <option value={UnreadType.Both}>
+            { i18n.t('both') }
           </option>
           <option value={UnreadType.Replies}>
-            <T i18nKey="replies">#</T>
+            { i18n.t('replies') }
           </option>
           <option value={UnreadType.Mentions}>
-            <T i18nKey="mentions">#</T>
+            { i18n.t('mentions') }
           </option>
           <option value={UnreadType.Messages}>
-            <T i18nKey="messages">#</T>
+            { i18n.t('messages') }
           </option>
         </select>
         <SortSelect
@@ -248,14 +252,14 @@ export class Inbox extends Component<any, InboxState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 64687a3..bea8564 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -78,15 +78,16 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>Login</h5>
+          <h2>{ i18n.t('login') }</h2>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="email_or_username">#</T>
+            <label class="col-sm-2 col-form-label" for="login-email-or-username">
+                { i18n.t('email_or_username') }
             </label>
             <div class="col-sm-10">
               <input
                 type="text"
                 class="form-control"
+                id="login-email-or-username"
                 value={this.state.loginForm.username_or_email}
                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
                 required
@@ -95,12 +96,13 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="password">#</T>
+            <label class="col-sm-2 col-form-label" for="login-password">
+                { i18n.t('password') }
             </label>
             <div class="col-sm-10">
               <input
                 type="password"
+                id="login-password"
                 value={this.state.loginForm.password}
                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
                 class="form-control"
@@ -111,7 +113,7 @@ export class Login extends Component<any, State> {
                 onClick={linkEvent(this, this.handlePasswordReset)}
                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="forgot_password">#</T>
+                { i18n.t('forgot_password') }
               </button>
             </div>
           </div>
@@ -135,16 +137,19 @@ export class Login extends Component<any, State> {
   registerForm() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="sign_up">#</T>
-        </h5>
+        <h2>
+          { i18n.t('sign_up') }
+        </h2>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" for="register-username">
+            { i18n.t('username') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="text"
+              id="register-username"
               class="form-control"
               value={this.state.registerForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@@ -155,13 +160,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" for="register-email">
+            { i18n.t('email') }
           </label>
           <div class="col-sm-10">
             <input
               type="email"
+              id="register-email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.registerForm.email}
@@ -170,13 +177,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" for="register-password">
+            { i18n.t('password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-password"
               value={this.state.registerForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -184,13 +193,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" for="register-verify-password">
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-verify-password"
               value={this.state.registerForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"
@@ -198,18 +209,20 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
-        {this.state.enable_nsfw && (
+
+        { this.state.enable_nsfw && (
           <div class="form-group row">
             <div class="col-sm-10">
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="register-show-nsfw"
                   type="checkbox"
                   checked={this.state.registerForm.show_nsfw}
                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
                 />
-                <label class="form-check-label">
-                  <T i18nKey="show_nsfw">#</T>
+                <label class="form-check-label" for="register-show-nsfw">
+                    { i18n.t('show_nsfw') }
                 </label>
               </div>
             </div>
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 6bf4164..e578cc8 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -159,8 +159,8 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-md-8">{this.posts()}</div>
-          <div class="col-12 col-md-4">{this.my_sidebar()}</div>
+          <main role="main" class="col-12 col-md-8">{this.posts()}</main>
+          <aside class="col-12 col-md-4">{this.my_sidebar()}</aside>
         </div>
       </div>
     );
@@ -413,13 +413,13 @@ export class Main extends Component<any, MainState> {
 
   posts() {
     return (
-      <div>
+      <div class="main-content-wrapper">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div>
             {this.selects()}
diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx
index e03f1ff..6da10ee 100644
--- a/ui/src/components/modlog.tsx
+++ b/ui/src/components/modlog.tsx
@@ -343,7 +343,7 @@ export class Modlog extends Component<any, ModlogState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="">
+          <h5 class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
@@ -359,15 +359,15 @@ export class Modlog extends Component<any, ModlogState> {
                   /c/{this.state.communityName}{' '}
                 </Link>
               )}
-              <span>Modlog</span>
+              <span>{ i18n.t('modlog') }</span>
             </h5>
             <div class="table-responsive">
               <table id="modlog_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th>Time</th>
-                    <th>Mod</th>
-                    <th>Action</th>
+                    <th> { i18n.t('time')}</th>
+                    <th>{ i18n.t('mod')}</th>
+                    <th>{ i18n.t('action')}</th>
                   </tr>
                 </thead>
                 {this.combined()}
@@ -388,14 +388,14 @@ export class Modlog extends Component<any, ModlogState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            Prev
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          Next
+          { i18n.t('next') }
         </button>
       </div>
     );
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 1828fce..61ec01c 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -102,6 +102,7 @@ export class Navbar extends Component<any, NavbarState> {
         <button
           class="navbar-toggler"
           type="button"
+          aria-label="menu"
           onClick={linkEvent(this, this.expandNavbar)}
         >
           <span class="navbar-toggler-icon"></span>
@@ -112,12 +113,12 @@ export class Navbar extends Component<any, NavbarState> {
           <ul class="navbar-nav mr-auto">
             <li class="nav-item">
               <Link class="nav-link" to="/communities">
-                <T i18nKey="communities">#</T>
+                { i18n.t('communities') }
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/search">
-                <T i18nKey="search">#</T>
+                { i18n.t('search') }
               </Link>
             </li>
             <li class="nav-item">
@@ -128,17 +129,17 @@ export class Navbar extends Component<any, NavbarState> {
                   state: { prevPath: this.currentLocation },
                 }}
               >
-                <T i18nKey="create_post">#</T>
+                { i18n.t('create_post') }
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/create_community">
-                <T i18nKey="create_community">#</T>
+                { i18n.t('create_community') }
               </Link>
             </li>
             <li className="nav-item">
               <Link
-                class="nav-link"
+                class="nav-link ml-2"
                 to="/sponsors"
                 title={i18n.t('donate_to_lemmy')}
               >
@@ -186,7 +187,7 @@ export class Navbar extends Component<any, NavbarState> {
               </>
             ) : (
               <Link class="nav-link" to="/login">
-                <T i18nKey="login_sign_up">#</T>
+                { i18n.t('login_sign_up') }
               </Link>
             )}
           </ul>
diff --git a/ui/src/components/password_change.tsx b/ui/src/components/password_change.tsx
index 10b6867..7774b78 100644
--- a/ui/src/components/password_change.tsx
+++ b/ui/src/components/password_change.tsx
@@ -59,7 +59,7 @@ export class PasswordChange extends Component<any, State> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="password_change">#</T>
+              { i18n.t('password_change') }
             </h5>
             {this.passwordChangeForm()}
           </div>
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 57d9a96..858b6b7 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -151,12 +151,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       <div>
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="url">#</T>
+            <label class="col-sm-2 col-form-label" for="post-url">
+              { i18n.t('url') }
             </label>
             <div class="col-sm-10">
               <input
                 type="url"
+                id="post-url"
                 class="form-control"
                 value={this.state.postForm.url}
                 onInput={linkEvent(this, this.handlePostUrlChange)}
@@ -181,7 +182,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   className={`${UserService.Instance.user &&
                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
                 >
-                  <T i18nKey="upload_image">#</T>
+                  { i18n.t('upload_image') }
                 </label>
                 <input
                   id="file-upload"
@@ -201,7 +202,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   target="_blank"
                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                 >
-                  <T i18nKey="archive_link">#</T>
+                  { i18n.t('archive_link') }
                 </a>
               )}
               {this.state.imageLoading && (
@@ -215,7 +216,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="cross_posts">#</T>
+                    { i18n.t('cross_posts') }
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -223,12 +224,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="title">#</T>
+            <label class="col-sm-2 col-form-label" for="post-title">
+              { i18n.t('title') }
             </label>
             <div class="col-sm-10">
               <textarea
                 value={this.state.postForm.name}
+                id="post-title"
                 onInput={linkEvent(this, this.handlePostNameChange)}
                 class="form-control"
                 required
@@ -239,21 +241,23 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.suggestedPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="related_posts">#</T>
+                    { i18n.t('related_posts') }
                   </div>
                   <PostListings posts={this.state.suggestedPosts} />
                 </>
               )}
             </div>
           </div>
+
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="body">#</T>
+            <label class="col-sm-2 col-form-label" for="post-body">
+              { i18n.t('body') }
             </label>
             <div class="col-sm-10">
               <textarea
                 id={this.id}
                 value={this.state.postForm.body}
+                id="post-body"
                 onInput={linkEvent(this, this.handlePostBodyChange)}
                 className={`form-control ${this.state.previewMode && 'd-none'}`}
                 rows={4}
@@ -271,7 +275,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                     .previewMode && 'active'}`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
-                  <T i18nKey="preview">#</T>
+                  { i18n.t('preview') }
                 </button>
               )}
               <a
@@ -279,18 +283,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 target="_blank"
                 class="d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="formatting_help">#</T>
+                { i18n.t('formatting_help') }
               </a>
             </div>
           </div>
           {!this.props.post && (
             <div class="form-group row">
-              <label class="col-sm-2 col-form-label">
-                <T i18nKey="community">#</T>
+              <label class="col-sm-2 col-form-label" for="post-community">
+                { i18n.t('community') }
               </label>
               <div class="col-sm-10">
                 <select
                   class="form-control"
+                  id="post-community"
                   value={this.state.postForm.community_id}
                   onInput={linkEvent(this, this.handlePostCommunityChange)}
                 >
@@ -307,12 +312,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="post-nsfw"
                     type="checkbox"
                     checked={this.state.postForm.nsfw}
                     onChange={linkEvent(this, this.handlePostNsfwChange)}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="nsfw">#</T>
+                  <label class="form-check-label" for="post-nsfw">
+                    { i18n.t('nsfw') }
                   </label>
                 </div>
               </div>
@@ -337,7 +343,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   class="btn btn-secondary"
                   onClick={linkEvent(this, this.handleCancel)}
                 >
-                  <T i18nKey="cancel">#</T>
+                  { i18n.t('cancel') }
                 </button>
               )}
             </div>
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index c9a29e8..2103745 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -247,27 +247,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             )}
             {post.removed && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="removed">#</T>
+                { i18n.t('removed') }
               </small>
             )}
             {post.deleted && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="deleted">#</T>
+                { i18n.t('deleted') }
               </small>
             )}
             {post.locked && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="locked">#</T>
+                { i18n.t('locked') }
               </small>
             )}
             {post.stickied && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="stickied">#</T>
+                { i18n.t('stickied') }
               </small>
             )}
             {post.nsfw && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="nsfw">#</T>
+                { i18n.t('nsfw') }
               </small>
             )}
           </div>
@@ -289,17 +289,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               </Link>
               {this.isMod && (
                 <span className="mx-1 badge badge-light">
-                  <T i18nKey="mod">#</T>
+                  { i18n.t('mod') }
                 </span>
               )}
               {this.isAdmin && (
                 <span className="mx-1 badge badge-light">
-                  <T i18nKey="admin">#</T>
+                  { i18n.t('admin') }
                 </span>
               )}
               {(post.banned_from_community || post.banned) && (
                 <span className="mx-1 badge badge-danger">
-                  <T i18nKey="banned">#</T>
+                  { i18n.t('banned') }
                 </span>
               )}
               {this.props.showCommunity && (
@@ -406,14 +406,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         class="pointer"
                         onClick={linkEvent(this, this.handleModRemoveShow)}
                       >
-                        <T i18nKey="remove">#</T>
+                        { i18n.t('remove') }
                       </span>
                     ) : (
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleModRemoveSubmit)}
                       >
-                        <T i18nKey="restore">#</T>
+                        { i18n.t('restore') }
                       </span>
                     )}
                   </li>
@@ -430,7 +430,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               this.handleModBanFromCommunityShow
                             )}
                           >
-                            <T i18nKey="ban">#</T>
+                            { i18n.t('ban') }
                           </span>
                         ) : (
                           <span
@@ -440,7 +440,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               this.handleModBanFromCommunitySubmit
                             )}
                           >
-                            <T i18nKey="unban">#</T>
+                            { i18n.t('unban') }
                           </span>
                         )}
                       </li>
@@ -487,7 +487,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleTransferCommunity
                           )}
                         >
-                          <T i18nKey="yes">#</T>
+                          { i18n.t('yes') }
                         </span>
                         <span
                           class="pointer d-inline-block"
@@ -496,7 +496,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleCancelShowConfirmTransferCommunity
                           )}
                         >
-                          <T i18nKey="no">#</T>
+                          { i18n.t('no') }
                         </span>
                       </>
                     )}
@@ -512,14 +512,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             class="pointer"
                             onClick={linkEvent(this, this.handleModBanShow)}
                           >
-                            <T i18nKey="ban_from_site">#</T>
+                            { i18n.t('ban_from_site') }
                           </span>
                         ) : (
                           <span
                             class="pointer"
                             onClick={linkEvent(this, this.handleModBanSubmit)}
                           >
-                            <T i18nKey="unban_from_site">#</T>
+                            { i18n.t('unban_from_site') }
                           </span>
                         )}
                       </li>
@@ -549,18 +549,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           this.handleShowConfirmTransferSite
                         )}
                       >
-                        <T i18nKey="transfer_site">#</T>
+                        { i18n.t('transfer_site') }
                       </span>
                     ) : (
                       <>
                         <span class="d-inline-block mr-1">
-                          <T i18nKey="are_you_sure">#</T>
+                          { i18n.t('are_you_sure') }
                         </span>
                         <span
                           class="pointer d-inline-block mr-1"
                           onClick={linkEvent(this, this.handleTransferSite)}
                         >
-                          <T i18nKey="yes">#</T>
+                          { i18n.t('yes') }
                         </span>
                         <span
                           class="pointer d-inline-block"
@@ -569,7 +569,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleCancelShowConfirmTransferSite
                           )}
                         >
-                          <T i18nKey="no">#</T>
+                          { i18n.t('no') }
                         </span>
                       </>
                     )}
@@ -583,7 +583,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   className="pointer"
                   onClick={linkEvent(this, this.handleViewSource)}
                 >
-                  <T i18nKey="view_source">#</T>
+                  { i18n.t('view_source') }
                 </span>
               </li>
             )}
@@ -601,18 +601,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
               />
               <button type="submit" class="btn btn-secondary">
-                <T i18nKey="remove_post">#</T>
+                { i18n.t('remove_post') }
               </button>
             </form>
           )}
           {this.state.showBanDialog && (
             <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
               <div class="form-group row">
-                <label class="col-form-label">
-                  <T i18nKey="reason">#</T>
+                <label class="col-form-label" for="post-listing-reason">
+                  { i18n.t('reason') }
                 </label>
                 <input
                   type="text"
+                  id="post-listing-reason"
                   class="form-control mr-2"
                   placeholder={i18n.t('reason')}
                   value={this.state.banReason}
diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index b65c919..d3d89e5 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -2,6 +2,7 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { Post } from '../interfaces';
 import { PostListing } from './post-listing';
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 interface PostListingsProps {
@@ -30,14 +31,12 @@ export class PostListings extends Component<PostListingsProps, any> {
           ))
         ) : (
           <>
-            <div>
-              <T i18nKey="no_posts">#</T>
-            </div>
+            <h2>
+              { i18n.t('no_posts') }
+            </h2>
             {this.props.showCommunity !== undefined && (
               <div>
-                <T i18nKey="subscribe_to_communities">
-                  #<Link to="/communities">#</Link>
-                </T>
+                <Link to="/communities">{ i18n.t('subscribe_to_communities') }</Link>
               </div>
             )}
           </>
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 3662124..1d84efa 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -155,11 +155,11 @@ export class Post extends Component<any, PostState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8 mb-3">
@@ -173,7 +173,7 @@ export class Post extends Component<any, PostState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="cross_posts">#</T>
+                    { i18n.t('cross_posts') }
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -235,18 +235,6 @@ export class Post extends Component<any, PostState> {
             onChange={linkEvent(this, this.handleCommentSortChange)}
           />
         </label>
-        <label
-          className={`btn btn-sm btn-secondary pointer ${this.state
-            .commentSort === CommentSortType.Old && 'active'}`}
-        >
-          {i18n.t('old')}
-          <input
-            type="radio"
-            value={CommentSortType.Old}
-            checked={this.state.commentSort === CommentSortType.Old}
-            onChange={linkEvent(this, this.handleCommentSortChange)}
-          />
-        </label>
       </div>
     );
   }
@@ -256,7 +244,7 @@ export class Post extends Component<any, PostState> {
       <div class="d-none d-md-block new-comments mb-3 card border-secondary">
         <div class="card-body small">
           <h6>
-            <T i18nKey="recent_comments">#</T>
+            { i18n.t('recent_comments') }
           </h6>
           {this.state.comments.map(comment => (
             <CommentNodes
@@ -329,13 +317,6 @@ export class Post extends Component<any, PostState> {
           +a.comment.deleted - +b.comment.deleted ||
           b.comment.published.localeCompare(a.comment.published)
       );
-    } else if (this.state.commentSort == CommentSortType.Old) {
-      tree.sort(
-        (a, b) =>
-          +a.comment.removed - +b.comment.removed ||
-          +a.comment.deleted - +b.comment.deleted ||
-          a.comment.published.localeCompare(b.comment.published)
-      );
     } else if (this.state.commentSort == CommentSortType.Hot) {
       tree.sort(
         (a, b) =>
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index 604c261..e3789d5 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -127,7 +127,7 @@ export class Search extends Component<any, SearchState> {
     return (
       <div class="container">
         <h5>
-          <T i18nKey="search">#</T>
+          { i18n.t('search') }
         </h5>
         {this.selects()}
         {this.searchForm()}
@@ -164,7 +164,7 @@ export class Search extends Component<any, SearchState> {
             </svg>
           ) : (
             <span>
-              <T i18nKey="search">#</T>
+              { i18n.t('search') }
             </span>
           )}
         </button>
@@ -181,22 +181,22 @@ export class Search extends Component<any, SearchState> {
           class="custom-select custom-select-sm w-auto"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
           </option>
           <option value={SearchType.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
           </option>
           <option value={SearchType.Comments}>
-            <T i18nKey="comments">#</T>
+            { i18n.t('comments') }
           </option>
           <option value={SearchType.Posts}>
-            <T i18nKey="posts">#</T>
+            { i18n.t('posts') }
           </option>
           <option value={SearchType.Communities}>
-            <T i18nKey="communities">#</T>
+            { i18n.t('communities') }
           </option>
           <option value={SearchType.Users}>
-            <T i18nKey="users">#</T>
+            { i18n.t('users') }
           </option>
         </select>
         <span class="ml-2">
@@ -383,14 +383,14 @@ export class Search extends Component<any, SearchState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );
@@ -406,7 +406,7 @@ export class Search extends Component<any, SearchState> {
           res.communities.length == 0 &&
           res.users.length == 0 && (
             <span>
-              <T i18nKey="no_results">#</T>
+              { i18n.t('no_results') }
             </span>
           )}
       </div>
diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx
index 25cfade..029f22b 100644
--- a/ui/src/components/setup.tsx
+++ b/ui/src/components/setup.tsx
@@ -62,7 +62,7 @@ export class Setup extends Component<any, State> {
         <div class="row">
           <div class="col-12 offset-lg-3 col-lg-6">
             <h3>
-              <T i18nKey="lemmy_instance_setup">#</T>
+                { i18n.t('lemmy_instance_setup') }
             </h3>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
@@ -78,17 +78,16 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="setup_admin">#</T>
-        </h5>
+        <h4>{ i18n.t('setup_admin')}</h4>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" for="username">
+            { i18n.t('username') } 
           </label>
           <div class="col-sm-10">
             <input
               type="text"
               class="form-control"
+              id="username"
               value={this.state.userForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
               required
@@ -99,12 +98,14 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" for="email">
+            { i18n.t('email') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="email"
+              id="email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.userForm.email}
@@ -114,12 +115,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" for="password">
+            { i18n.t('password')}
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="password"
               value={this.state.userForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -128,12 +130,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" for="verify-password">
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="verify-password"
               value={this.state.userForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 089dd55..809ec91 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -72,7 +72,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               <span>{community.title}</span>
               {community.removed && (
                 <small className="ml-2 text-muted font-italic">
-                  <T i18nKey="removed">#</T>
+                  { i18n.t('removed') }
                 </small>
               )}
               {community.deleted && (
@@ -92,7 +92,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                       class="pointer"
                       onClick={linkEvent(this, this.handleEditClick)}
                     >
-                      <T i18nKey="edit">#</T>
+                      { i18n.t('edit') }
                     </span>
                   </li>
                   {this.amCreator && (
@@ -116,14 +116,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                       class="pointer"
                       onClick={linkEvent(this, this.handleModRemoveShow)}
                     >
-                      <T i18nKey="remove">#</T>
+                      { i18n.t('remove') }
                     </span>
                   ) : (
                     <span
                       class="pointer"
                       onClick={linkEvent(this, this.handleModRemoveSubmit)}
                     >
-                      <T i18nKey="restore">#</T>
+                      { i18n.t('restore') }
                     </span>
                   )}
                 </li>
@@ -132,11 +132,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {this.state.showRemoveDialog && (
               <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
                 <div class="form-group row">
-                  <label class="col-form-label">
-                    <T i18nKey="reason">#</T>
+                  <label class="col-form-label" for="remove-reason">
+                    { i18n.t('reason') }
                   </label>
                   <input
                     type="text"
+                    id="remove-reason"
                     class="form-control mr-2"
                     placeholder={i18n.t('optional')}
                     value={this.state.removeReason}
@@ -150,7 +151,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 {/* </div> */}
                 <div class="form-group row">
                   <button type="submit" class="btn btn-secondary">
-                    <T i18nKey="remove_community">#</T>
+                    { i18n.t('remove_community') }
                   </button>
                 </div>
               </form>
@@ -218,7 +219,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 'no-click'}`}
               to={`/create_post?community=${community.name}`}
             >
-              <T i18nKey="create_a_post">#</T>
+              { i18n.t('create_a_post') }
             </Link>
             <div>
               {community.subscribed ? (
@@ -226,14 +227,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   class="btn btn-sm btn-secondary btn-block"
                   onClick={linkEvent(community.id, this.handleUnsubscribe)}
                 >
-                  <T i18nKey="unsubscribe">#</T>
+                  { i18n.t('unsubscribe') }
                 </button>
               ) : (
                 <button
                   class="btn btn-sm btn-secondary btn-block"
                   onClick={linkEvent(community.id, this.handleSubscribe)}
                 >
-                  <T i18nKey="subscribe">#</T>
+                  { i18n.t('subscribe') }
                 </button>
               )}
             </div>
diff --git a/ui/src/components/site-form.tsx b/ui/src/components/site-form.tsx
index 936a9d5..1c4f94a 100644
--- a/ui/src/components/site-form.tsx
+++ b/ui/src/components/site-form.tsx
@@ -67,12 +67,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             : capitalizeFirstLetter(i18n.t('name'))
         } ${i18n.t('your_site')}`}</h5>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="name">#</T>
+          <label class="col-12 col-form-label" for="create-site-name">
+            { i18n.t('name') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="create-site-name"
               class="form-control"
               value={this.state.siteForm.name}
               onInput={linkEvent(this, this.handleSiteNameChange)}
@@ -83,13 +84,14 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="sidebar">#</T>
+          <label class="col-12 col-form-label" for="create-site-sidebar">
+            { i18n.t('sidebar') }
           </label>
           <div class="col-12">
             <textarea
               id={this.id}
               value={this.state.siteForm.description}
+              id="create-site-sidebar"
               onInput={linkEvent(this, this.handleSiteDescriptionChange)}
               class="form-control"
               rows={3}
@@ -102,12 +104,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-downvotes"
                 type="checkbox"
                 checked={this.state.siteForm.enable_downvotes}
                 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
               />
-              <label class="form-check-label">
-                <T i18nKey="enable_downvotes">#</T>
+              <label class="form-check-label" for="create-site-downvotes">
+                { i18n.t('enable_downvotes') }
               </label>
             </div>
           </div>
@@ -117,12 +120,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-enable-nsfw"
                 type="checkbox"
                 checked={this.state.siteForm.enable_nsfw}
                 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
               />
-              <label class="form-check-label">
-                <T i18nKey="enable_nsfw">#</T>
+              <label class="form-check-label" for="create-site-enable-nsfw">
+                { i18n.t('enable_nsfw') }
               </label>
             </div>
           </div>
@@ -132,6 +136,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-open-registration"
                 type="checkbox"
                 checked={this.state.siteForm.open_registration}
                 onChange={linkEvent(
@@ -139,8 +144,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   this.handleSiteOpenRegistrationChange
                 )}
               />
-              <label class="form-check-label">
-                <T i18nKey="open_registration">#</T>
+              <label class="form-check-label" for="create-site-open-registration">
+                { i18n.t('open_registration') }
               </label>
             </div>
           </div>
@@ -164,7 +169,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                <T i18nKey="cancel">#</T>
+                { i18n.t('cancel') }
               </button>
             )}
           </div>
diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx
index a3ef0f8..fbdaa59 100644
--- a/ui/src/components/sort-select.tsx
+++ b/ui/src/components/sort-select.tsx
@@ -1,6 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { SortType } from '../interfaces';
-
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 interface SortSelectProps {
@@ -31,31 +31,31 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
         class="custom-select custom-select-sm w-auto"
       >
         <option disabled>
-          <T i18nKey="sort_type">#</T>
+          { i18n.t('sort_type') }
         </option>
         {!this.props.hideHot && (
           <option value={SortType.Hot}>
-            <T i18nKey="hot">#</T>
+            { i18n.t('hot') }
           </option>
         )}
         <option value={SortType.New}>
-          <T i18nKey="new">#</T>
+          { i18n.t('new') }
         </option>
         <option disabled>─────</option>
         <option value={SortType.TopDay}>
-          <T i18nKey="top_day">#</T>
+          { i18n.t('top_day') }
         </option>
         <option value={SortType.TopWeek}>
-          <T i18nKey="week">#</T>
+          { i18n.t('week') }
         </option>
         <option value={SortType.TopMonth}>
-          <T i18nKey="month">#</T>
+          { i18n.t('month') }
         </option>
         <option value={SortType.TopYear}>
-          <T i18nKey="year">#</T>
+          { i18n.t('year') }
         </option>
         <option value={SortType.TopAll}>
-          <T i18nKey="all">#</T>
+          { i18n.t('all') }
         </option>
       </select>
     );
diff --git a/ui/src/components/sponsors.tsx b/ui/src/components/sponsors.tsx
index 5b78e2b..dd12914 100644
--- a/ui/src/components/sponsors.tsx
+++ b/ui/src/components/sponsors.tsx
@@ -37,7 +37,7 @@ export class Sponsors extends Component<any, any> {
     return (
       <div>
         <h5>
-          <T i18nKey="donate_to_lemmy">#</T>
+          { i18n.t('donate_to_lemmy') }
         </h5>
         <p>
           <T i18nKey="sponsor_message">
@@ -45,7 +45,7 @@ export class Sponsors extends Component<any, any> {
           </T>
         </p>
         <a class="btn btn-secondary" href="https://www.patreon.com/dessalines">
-          <T i18nKey="support_on_patreon">#</T>
+          { i18n.t('support_on_patreon') }
         </a>
       </div>
     );
@@ -54,10 +54,10 @@ export class Sponsors extends Component<any, any> {
     return (
       <div class="container">
         <h5>
-          <T i18nKey="sponsors">#</T>
+          { i18n.t('sponsors') }
         </h5>
         <p>
-          <T i18nKey="general_sponsors">#</T>
+          { i18n.t('general_sponsors') }
         </p>
         <div class="row card-columns">
           {highlighted.map(s => (
@@ -79,14 +79,14 @@ export class Sponsors extends Component<any, any> {
     return (
       <div>
         <h5>
-          <T i18nKey="crypto">#</T>
+          { i18n.t('crypto') }
         </h5>
         <div class="table-responsive">
           <table class="table table-hover text-center">
             <tbody>
               <tr>
                 <td>
-                  <T i18nKey="bitcoin">#</T>
+                  { i18n.t('bitcoin') }
                 </td>
                 <td>
                   <code>1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK</code>
@@ -94,7 +94,7 @@ export class Sponsors extends Component<any, any> {
               </tr>
               <tr>
                 <td>
-                  <T i18nKey="ethereum">#</T>
+                  { i18n.t('ethereum') }
                 </td>
                 <td>
                   <code>0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01</code>
@@ -102,7 +102,7 @@ export class Sponsors extends Component<any, any> {
               </tr>
               <tr>
                 <td>
-                  <T i18nKey="monero">#</T>
+                  { i18n.t('monero') }
                 </td>
                 <td>
                   <code>
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index 1475de6..a2959d7 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -199,11 +199,11 @@ export class User extends Component<any, UserState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -246,19 +246,19 @@ export class User extends Component<any, UserState> {
           class="custom-select custom-select-sm w-auto"
         >
           <option disabled>
-            <T i18nKey="view">#</T>
+            { i18n.t('view') }
           </option>
           <option value={View.Overview}>
-            <T i18nKey="overview">#</T>
+            { i18n.t('overview') }
           </option>
           <option value={View.Comments}>
-            <T i18nKey="comments">#</T>
+            { i18n.t('comments') }
           </option>
           <option value={View.Posts}>
-            <T i18nKey="posts">#</T>
+            { i18n.t('posts') }
           </option>
           <option value={View.Saved}>
-            <T i18nKey="saved">#</T>
+            { i18n.t('saved') }
           </option>
         </select>
         <span class="ml-2">
@@ -359,7 +359,7 @@ export class User extends Component<any, UserState> {
                 <li className="list-inline-item">{user.name}</li>
                 {user.banned && (
                   <li className="list-inline-item badge badge-danger">
-                    <T i18nKey="banned">#</T>
+                    { i18n.t('banned') }
                   </li>
                 )}
               </ul>
@@ -412,7 +412,7 @@ export class User extends Component<any, UserState> {
                 class="btn btn-block btn-secondary mt-3"
                 onClick={linkEvent(this, this.handleLogoutClick)}
               >
-                <T i18nKey="logout">#</T>
+                { i18n.t('logout') }
               </button>
             ) : (
               <>
@@ -444,12 +444,12 @@ export class User extends Component<any, UserState> {
         <div class="card border-secondary mb-3">
           <div class="card-body">
             <h5>
-              <T i18nKey="settings">#</T>
+              { i18n.t('settings') }
             </h5>
             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
               <div class="form-group">
                 <label>
-                  <T i18nKey="avatar">#</T>
+                  { i18n.t('avatar') }
                 </label>
                 <form class="d-inline">
                   <label
@@ -458,7 +458,7 @@ export class User extends Component<any, UserState> {
                   >
                     {!this.state.userSettingsForm.avatar ? (
                       <span class="btn btn-sm btn-secondary">
-                        <T i18nKey="upload_avatar">#</T>
+                        { i18n.t('upload_avatar') }
                       </span>
                     ) : (
                       <img
@@ -482,7 +482,7 @@ export class User extends Component<any, UserState> {
               </div>
               <div class="form-group">
                 <label>
-                  <T i18nKey="language">#</T>
+                  { i18n.t('language') }
                 </label>
                 <select
                   value={this.state.userSettingsForm.lang}
@@ -490,10 +490,10 @@ export class User extends Component<any, UserState> {
                   class="ml-2 custom-select custom-select-sm w-auto"
                 >
                   <option disabled>
-                    <T i18nKey="language">#</T>
+                    { i18n.t('language') }
                   </option>
                   <option value="browser">
-                    <T i18nKey="browser_default">#</T>
+                    { i18n.t('browser_default') }
                   </option>
                   <option disabled>──</option>
                   {languages.map(lang => (
@@ -503,7 +503,7 @@ export class User extends Component<any, UserState> {
               </div>
               <div class="form-group">
                 <label>
-                  <T i18nKey="theme">#</T>
+                  { i18n.t('theme') }
                 </label>
                 <select
                   value={this.state.userSettingsForm.theme}
@@ -511,7 +511,7 @@ export class User extends Component<any, UserState> {
                   class="ml-2 custom-select custom-select-sm w-auto"
                 >
                   <option disabled>
-                    <T i18nKey="theme">#</T>
+                    { i18n.t('theme') }
                   </option>
                   {themes.map(theme => (
                     <option value={theme}>{theme}</option>
@@ -541,12 +541,13 @@ export class User extends Component<any, UserState> {
                 />
               </form>
               <div class="form-group row">
-                <label class="col-lg-3 col-form-label">
-                  <T i18nKey="email">#</T>
+                <label class="col-lg-3 col-form-label" for="user-email">
+                  { i18n.t('email') }
                 </label>
                 <div class="col-lg-9">
                   <input
                     type="email"
+                    id="user-email"
                     class="form-control"
                     placeholder={i18n.t('optional')}
                     value={this.state.userSettingsForm.email}
@@ -579,12 +580,13 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label">
-                  <T i18nKey="new_password">#</T>
+                <label class="col-lg-5 col-form-label" for="user-password">
+                  { i18n.t('new_password') }
                 </label>
                 <div class="col-lg-7">
                   <input
                     type="password"
+                    id="user-password"
                     class="form-control"
                     value={this.state.userSettingsForm.new_password}
                     onInput={linkEvent(
@@ -595,12 +597,13 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label">
-                  <T i18nKey="verify_password">#</T>
+                <label class="col-lg-5 col-form-label" for="user-verify-password">
+                  { i18n.t('verify_password') }
                 </label>
                 <div class="col-lg-7">
                   <input
                     type="password"
+                    id="user-verify-password"
                     class="form-control"
                     value={this.state.userSettingsForm.new_password_verify}
                     onInput={linkEvent(
@@ -611,12 +614,13 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label">
-                  <T i18nKey="old_password">#</T>
+                <label class="col-lg-5 col-form-label" for="user-old-password">
+                  { i18n.t('old_password') }
                 </label>
                 <div class="col-lg-7">
                   <input
                     type="password"
+                    id="user-old-password"
                     class="form-control"
                     value={this.state.userSettingsForm.old_password}
                     onInput={linkEvent(
@@ -631,6 +635,7 @@ export class User extends Component<any, UserState> {
                   <div class="form-check">
                     <input
                       class="form-check-input"
+                      id="user-show-nsfw"
                       type="checkbox"
                       checked={this.state.userSettingsForm.show_nsfw}
                       onChange={linkEvent(
@@ -638,8 +643,8 @@ export class User extends Component<any, UserState> {
                         this.handleUserSettingsShowNsfwChange
                       )}
                     />
-                    <label class="form-check-label">
-                      <T i18nKey="show_nsfw">#</T>
+                    <label class="form-check-label" for="user-show-nsfw">
+                      { i18n.t('show_nsfw') }
                     </label>
                   </div>
                 </div>
@@ -648,6 +653,7 @@ export class User extends Component<any, UserState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="user-show-avatars"
                     type="checkbox"
                     checked={this.state.userSettingsForm.show_avatars}
                     onChange={linkEvent(
@@ -655,8 +661,8 @@ export class User extends Component<any, UserState> {
                       this.handleUserSettingsShowAvatarsChange
                     )}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="show_avatars">#</T>
+                  <label class="form-check-label" for="user-show-avatars">
+                    { i18n.t('show_avatars') }
                   </label>
                 </div>
               </div>
@@ -664,6 +670,7 @@ export class User extends Component<any, UserState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="user-send-notifications-to-email"
                     type="checkbox"
                     disabled={!this.state.user.email}
                     checked={
@@ -674,8 +681,8 @@ export class User extends Component<any, UserState> {
                       this.handleUserSettingsSendNotificationsToEmailChange
                     )}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="send_notifications_to_email">#</T>
+                  <label class="form-check-label" for="user-send-notifications-to-email">
+                    { i18n.t('send_notifications_to_email') }
                   </label>
                 </div>
               </div>
@@ -699,12 +706,12 @@ export class User extends Component<any, UserState> {
                     this.handleDeleteAccountShowConfirmToggle
                   )}
                 >
-                  <T i18nKey="delete_account">#</T>
+                  { i18n.t('delete_account') }
                 </button>
                 {this.state.deleteAccountShowConfirm && (
                   <>
                     <div class="my-2 alert alert-danger" role="alert">
-                      <T i18nKey="delete_account_confirm">#</T>
+                      { i18n.t('delete_account_confirm') }
                     </div>
                     <input
                       type="password"
@@ -735,7 +742,7 @@ export class User extends Component<any, UserState> {
                         this.handleDeleteAccountShowConfirmToggle
                       )}
                     >
-                      <T i18nKey="cancel">#</T>
+                      { i18n.t('cancel') }
                     </button>
                   </>
                 )}
@@ -754,7 +761,7 @@ export class User extends Component<any, UserState> {
           <div class="card border-secondary mb-3">
             <div class="card-body">
               <h5>
-                <T i18nKey="moderates">#</T>
+                { i18n.t('moderates') }
               </h5>
               <ul class="list-unstyled mb-0">
                 {this.state.moderates.map(community => (
@@ -779,7 +786,7 @@ export class User extends Component<any, UserState> {
           <div class="card border-secondary mb-3">
             <div class="card-body">
               <h5>
-                <T i18nKey="subscribed">#</T>
+                { i18n.t('subscribed') }
               </h5>
               <ul class="list-unstyled mb-0">
                 {this.state.follows.map(community => (
@@ -812,7 +819,7 @@ export class User extends Component<any, UserState> {
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );
diff --git a/ui/src/translations/de.ts b/ui/src/translations/de.ts
index fafec57..1ecaada 100644
--- a/ui/src/translations/de.ts
+++ b/ui/src/translations/de.ts
@@ -15,9 +15,9 @@ export const de = {
     remove_comment: 'Kommentar löschen',
     communities: 'Communities',
     users: 'Benutzer',
-    create_a_community: 'Eine Gemeinschaft anlegen',
-    create_community: 'Gemeinschaft anlegen',
-    remove_community: 'Gemeinschaft entfernen',
+    create_a_community: 'Eine community anlegen',
+    create_community: 'Community anlegen',
+    remove_community: 'Community entfernen',
     subscribed_to_communities: 'Abonnierte <1>communities</1>',
     trending_communities: 'Trending <1>communities</1>',
     list_of_communities: 'Liste von communities',
@@ -36,17 +36,17 @@ export const de = {
     unsticky: 'nicht haftend',
     link: 'link',
     archive_link: 'Archiv-Link',
-    mod: 'Moderator',
-    mods: 'Moderatoren',
+    mod: 'mod',
+    mods: 'mods',
     moderates: 'Moderiert',
     settings: 'Einstellungen',
-    remove_as_mod: 'Als Moderator entfernen',
-    appoint_as_mod: 'Zum Moderator ernennen',
+    remove_as_mod: 'Als mod entfernen',
+    appoint_as_mod: 'Zum mod ernennen',
     modlog: 'Modlog',
-    admin: 'Administrator',
-    admins: 'Administratoren',
-    remove_as_admin: 'Als Administrator entfernen',
-    appoint_as_admin: 'Zum Administrator ernennen',
+    admin: 'admin',
+    admins: 'admins',
+    remove_as_admin: 'Als admin entfernen',
+    appoint_as_admin: 'Zum admin ernennen',
     remove: 'entfernen',
     removed: 'entfernt',
     locked: 'gesperrt',
@@ -66,11 +66,11 @@ export const de = {
     unban_from_site: 'Von der Seite entbannen',
     banned: 'gesperrt',
     save: 'speichern',
-    unsave: 'nicht speichern',
+    unsave: 'unsave',
     create: 'anlegen',
     creator: 'Ersteller',
-    username: 'Benutzername',
-    email_or_username: 'E-mail oder Username',
+    username: 'Username',
+    email_or_username: 'Email oder Username',
     number_of_users: '{{count}} Benutzer',
     number_of_subscribers: '{{count}} Abonnenten',
     number_of_points: '{{count}} Punkte',
@@ -86,7 +86,7 @@ export const de = {
     subscribed: 'Abonniert',
     prev: 'Zurück',
     next: 'Weiter',
-    sidebar: 'Seitenleiste',
+    sidebar: 'Sidebar',
     sort_type: 'Sortieren nach',
     hot: 'Hot',
     new: 'Neu',
@@ -122,22 +122,22 @@ export const de = {
     no_email_setup: "Dieser Server hat E-Mails nicht korrekt eingerichtet.",
     login: 'Einloggen',
     sign_up: 'Registrieren',
-    email: 'E-Mail',
-    optional: 'optional',
+    email: 'Email',
+    optional: 'Optional',
     expires: 'Ablaufdatum',
     language: 'Sprache',
     browser_default: 'Standard-Browser',
     url: 'URL',
     body: 'Text',
     copy_suggested_title: 'Vorgeschlagenen Titel übernehmen: {{title}}',
-    community: 'Gemeinschaft',
-    expand_here: 'hier erweitern',
+    community: 'Community',
+    expand_here: 'Expand here',
     subscribe_to_communities: 'Abonniere ein paar <1>communities</1>.',
     chat: 'Chat',
     recent_comments: 'Neueste Kommentare',
     no_results: 'Keine Ergebnisse.',
-    setup: 'Einrichten',
-    lemmy_instance_setup: 'Lemmy Instanz Einrichten',
+    setup: 'Setup',
+    lemmy_instance_setup: 'Lemmy Instanz Setup',
     setup_admin: 'Seiten Administrator konfigurieren',
     your_site: 'deine Seite',
     modified: 'verändert',
@@ -151,7 +151,7 @@ export const de = {
     support_on_patreon: 'Auf Patreon unterstützen',
     general_sponsors:
       'Allgemeine Sponsoren sind die, die zwischen $10 und $39 zu Lemmy beitragen.',
-    crypto: 'Kryptowährung',
+    crypto: 'Crypto',
     bitcoin: 'Bitcoin',
     ethereum: 'Ethereum',
     monero: 'Monero',
@@ -159,16 +159,16 @@ export const de = {
     joined: 'beigetreten',
     by: 'von',
     to: 'bis',
-    transfer_community: 'Gemeinschaft übertragen',
+    transfer_community: 'Transfer-Community',
     transfer_site: 'Transferseite',
     are_you_sure: 'Bist du sicher?',
     yes: 'Ja',
     no: 'Nein',
     powered_by: 'Bereitgestellt durch',
     landing_0:
-      'Lemmy ist ein <1>Link-Aggregator</1> / Reddit Alternative im <2>Fediverse</2>.<3></3>Es ist selbst-hostbar, hat live-updates von Kommentar-threads und ist winzig (<4>~80kB</4>). Federation in das ActivityPub Netzwerk ist geplant. <5></5>Dies ist eine <6>sehr frühe Beta Version</6>, und viele Features funktionieren zurzeit nicht richtig oder fehlen. <7></7>Schlage neue Features vor oder melde Bugs <8>hier.</8><9></9>Gebaut mit <10>Rust</10>, <11>Actix</11>, <12>Inferno</12>, <13>Typescript</13>.',
+      'Lemmy ist ein <1>Link Aggregator</1> / Reddit Alternative im <2>Fediverse</2>.<3></3>Es ist selbst-hostbar, hat live-updates von Kommentar-threads und ist winzig (<4>~80kB</4>). Federation in das ActivityPub Netzwerk ist geplant. <5></5>Dies ist eine <6>sehr frühe Beta Version</6>, und viele Features funktionieren zurzeit nicht richtig oder fehlen. <7></7>Schlage neue Features vor oder melde Bugs <8>hier.</8><9></9>Gebaut mit <10>Rust</10>, <11>Actix</11>, <12>Inferno</12>, <13>Typescript</13>.',
     not_logged_in: 'Nicht eingeloggt.',
-    community_ban: 'Du wurdest von dieser Gemeinschaft gebannt.',
+    community_ban: 'Du wurdest von dieser Community gebannt.',
     site_ban: 'Du wurdest von dieser Seite gebannt',
     couldnt_create_comment: 'Konnte Kommentar nicht anlegen.',
     couldnt_like_comment: 'Konnte nicht liken.',
@@ -176,14 +176,14 @@ export const de = {
     couldnt_save_comment: 'Konnte Kommentar nicht speichern.',
     no_comment_edit_allowed: 'Keine Erlaubnis Kommentar zu editieren.',
     no_post_edit_allowed: 'Keine Erlaubnis Beitrag zu editieren.',
-    no_community_edit_allowed: 'Keine Erlaubnis Gemeinschaft zu editieren.',
-    couldnt_find_community: 'Konnte Gemeinschaft nicht finden.',
-    couldnt_update_community: 'Konnte Gemeinschaft nicht aktualisieren.',
-    community_already_exists: 'Gemeinschaft existiert bereits.',
+    no_community_edit_allowed: 'Keine Erlaubnis Community zu editieren.',
+    couldnt_find_community: 'Konnte Community nicht finden.',
+    couldnt_update_community: 'Konnte Community nicht aktualisieren.',
+    community_already_exists: 'Community existiert bereits.',
     community_moderator_already_exists:
-      'Gemeinschaft Moderator existiert bereits.',
-    community_follower_already_exists: 'Gemeinschaft Follower existiert bereits.',
-    community_user_already_banned: 'Gemeinschaft Nutzer schon gebannt.',
+      'Community Moderator existiert bereits.',
+    community_follower_already_exists: 'Community Follower existiert bereits.',
+    community_user_already_banned: 'Community Nutzer schon gebannt.',
     couldnt_create_post: 'Konnte Beitrag nicht anlegen.',
     couldnt_like_post: 'Konnte Beitrag nicht liken.',
     couldnt_find_post: 'Konnte Beitrag nicht finden.',
diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts
index 90aff0b..ea33c5c 100644
--- a/ui/src/translations/en.ts
+++ b/ui/src/translations/en.ts
@@ -230,5 +230,7 @@ export const en = {
     couldnt_create_private_message: "Couldn't create private message.",
     no_private_message_edit_allowed: 'Not allowed to edit private message.',
     couldnt_update_private_message: "Couldn't update private message.",
+    time: 'Time',
+    action: 'Action'
   },
 };

From d5bacc2839b630f6cf1b02ceff8c8c08b5aa6035 Mon Sep 17 00:00:00 2001
From: Richard <richard@tripaneer.com>
Date: Sat, 1 Feb 2020 19:24:11 +0100
Subject: [PATCH 2/6] changed h2 back to h5

---
 ui/src/components/login.tsx         | 2 +-
 ui/src/components/post-listings.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index bea8564..1aacac0 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -78,7 +78,7 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h2>{ i18n.t('login') }</h2>
+          <h5>{ i18n.t('login') }</h5>
           <div class="form-group row">
             <label class="col-sm-2 col-form-label" for="login-email-or-username">
                 { i18n.t('email_or_username') }
diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index d3d89e5..d61316b 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -31,9 +31,9 @@ export class PostListings extends Component<PostListingsProps, any> {
           ))
         ) : (
           <>
-            <h2>
+            <h5>
               { i18n.t('no_posts') }
-            </h2>
+            </h5>
             {this.props.showCommunity !== undefined && (
               <div>
                 <Link to="/communities">{ i18n.t('subscribe_to_communities') }</Link>

From a40a7d515de954f27c5f31b9813502db4ed1ae0d Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Sun, 2 Feb 2020 12:54:35 -0500
Subject: [PATCH 3/6] Updating ansible version.

---
 ansible/templates/docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ansible/templates/docker-compose.yml b/ansible/templates/docker-compose.yml
index 96489c7..9829f70 100644
--- a/ansible/templates/docker-compose.yml
+++ b/ansible/templates/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.3'
 
 services:
   lemmy:
-    image: dessalines/lemmy:v0.6.5
+    image: dessalines/lemmy:v0.6.8
     ports:
       - "127.0.0.1:8536:8536"
     restart: always

From 680eab53c1196356d89f3c04838e3febdfce02ee Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Sun, 2 Feb 2020 13:50:44 -0500
Subject: [PATCH 4/6] Finishing up interpolation rework.

---
 README.md                              |  24 ++--
 ui/src/components/communities.tsx      |  39 +++----
 ui/src/components/community-form.tsx   |  24 ++--
 ui/src/components/community.tsx        |  17 ++-
 ui/src/components/create-community.tsx |   5 +-
 ui/src/components/create-post.tsx      |   5 +-
 ui/src/components/inbox.tsx            |  42 ++-----
 ui/src/components/login.tsx            |  45 +++----
 ui/src/components/main.tsx             |  84 +++++--------
 ui/src/components/modlog.tsx           |  15 +--
 ui/src/components/navbar.tsx           |  13 +--
 ui/src/components/password_change.tsx  |   9 +-
 ui/src/components/post-form.tsx        |  45 ++++---
 ui/src/components/post-listing.tsx     |  68 +++++------
 ui/src/components/post-listings.tsx    |   9 +-
 ui/src/components/post.tsx             |  14 +--
 ui/src/components/search.tsx           |  45 +++----
 ui/src/components/setup.tsx            |  23 ++--
 ui/src/components/sidebar.tsx          |  52 ++++-----
 ui/src/components/site-form.tsx        |  27 ++---
 ui/src/components/sort-select.tsx      |  33 ++----
 ui/src/components/user.tsx             | 156 +++++++++----------------
 22 files changed, 309 insertions(+), 485 deletions(-)

diff --git a/README.md b/README.md
index dd550fd..74c0d05 100644
--- a/README.md
+++ b/README.md
@@ -167,18 +167,18 @@ If you'd like to add translations, take a look at the [English translation file]
 
 lang | done | missing
 ---- | ---- | -------
-ca | 100% | old
-de | 87% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,old,docs,message_sent,messages,old_password,matrix_user_id,private_message_disclaimer,send_notifications_to_email,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-fa | 73% | cross_post,subscribed_to_communities,trending_communities,create_private_message,send_secure_message,send_message,message,mod,mods,moderates,remove_as_mod,appoint_as_mod,modlog,stickied,ban,ban_from_site,unban,unban_from_site,banned,number_of_subscribers,subscribers,both,saved,unsubscribe,subscribe,subscribed,old,api,docs,inbox,inbox_for,message_sent,notifications_error,messages,no_email_setup,matrix_user_id,private_message_disclaimer,url,body,copy_suggested_title,community,expand_here,subscribe_to_communities,theme,sponsor_message,general_sponsors,joined,by,to,from,landing_0,logged_in,community_moderator_already_exists,community_follower_already_exists,community_user_already_banned,no_slurs,admin_already_created,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-eo | 75% | number_of_communities,create_private_message,send_secure_message,send_message,message,preview,upload_image,avatar,upload_avatar,show_avatars,formatting_help,view_source,sticky,unsticky,archive_link,stickied,delete_account,delete_account_confirm,banned,creator,number_online,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,theme,donate_to_lemmy,donate,from,are_you_sure,yes,no,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-es | 100% | old
-fi | 100% | old
-fr | 83% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,archive_link,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-it | 84% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,archive_link,old,docs,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-nl | 100% | 
-ru | 72% | cross_posts,cross_post,number_of_communities,create_private_message,send_secure_message,send_message,message,preview,upload_image,avatar,upload_avatar,show_avatars,formatting_help,view_source,sticky,unsticky,archive_link,stickied,delete_account,delete_account_confirm,banned,creator,number_online,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,recent_comments,theme,donate_to_lemmy,donate,monero,by,to,from,transfer_community,transfer_site,are_you_sure,yes,no,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-sv | 83% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,archive_link,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
-zh | 70% | cross_posts,cross_post,users,number_of_communities,create_private_message,send_secure_message,send_message,message,preview,upload_image,avatar,upload_avatar,show_avatars,formatting_help,view_source,sticky,unsticky,archive_link,settings,stickied,delete_account,delete_account_confirm,banned,creator,number_online,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,recent_comments,nsfw,show_nsfw,theme,donate_to_lemmy,donate,monero,by,to,from,transfer_community,transfer_site,are_you_sure,yes,no,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message
+ca | 99% | old,time,action
+de | 87% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,old,docs,message_sent,messages,old_password,matrix_user_id,private_message_disclaimer,send_notifications_to_email,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+fa | 72% | cross_post,subscribed_to_communities,trending_communities,create_private_message,send_secure_message,send_message,message,mod,mods,moderates,remove_as_mod,appoint_as_mod,modlog,stickied,ban,ban_from_site,unban,unban_from_site,banned,number_of_subscribers,subscribers,both,saved,unsubscribe,subscribe,subscribed,old,api,docs,inbox,inbox_for,message_sent,notifications_error,messages,no_email_setup,matrix_user_id,private_message_disclaimer,url,body,copy_suggested_title,community,expand_here,subscribe_to_communities,theme,sponsor_message,general_sponsors,joined,by,to,from,landing_0,logged_in,community_moderator_already_exists,community_follower_already_exists,community_user_already_banned,no_slurs,admin_already_created,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+eo | 75% | number_of_communities,create_private_message,send_secure_message,send_message,message,preview,upload_image,avatar,upload_avatar,show_avatars,formatting_help,view_source,sticky,unsticky,archive_link,stickied,delete_account,delete_account_confirm,banned,creator,number_online,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,theme,donate_to_lemmy,donate,from,are_you_sure,yes,no,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+es | 99% | old,time,action
+fi | 99% | old,time,action
+fr | 82% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,archive_link,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+it | 83% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,archive_link,old,docs,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+nl | 99% | time,action
+ru | 71% | cross_posts,cross_post,number_of_communities,create_private_message,send_secure_message,send_message,message,preview,upload_image,avatar,upload_avatar,show_avatars,formatting_help,view_source,sticky,unsticky,archive_link,stickied,delete_account,delete_account_confirm,banned,creator,number_online,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,recent_comments,theme,donate_to_lemmy,donate,monero,by,to,from,transfer_community,transfer_site,are_you_sure,yes,no,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+sv | 82% | create_private_message,send_secure_message,send_message,message,avatar,upload_avatar,show_avatars,archive_link,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,donate_to_lemmy,donate,from,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
+zh | 69% | cross_posts,cross_post,users,number_of_communities,create_private_message,send_secure_message,send_message,message,preview,upload_image,avatar,upload_avatar,show_avatars,formatting_help,view_source,sticky,unsticky,archive_link,settings,stickied,delete_account,delete_account_confirm,banned,creator,number_online,old,docs,replies,mentions,message_sent,messages,old_password,forgot_password,reset_password_mail_sent,password_change,new_password,no_email_setup,matrix_user_id,private_message_disclaimer,send_notifications_to_email,language,browser_default,downvotes_disabled,enable_downvotes,open_registration,registration_closed,enable_nsfw,recent_comments,nsfw,show_nsfw,theme,donate_to_lemmy,donate,monero,by,to,from,transfer_community,transfer_site,are_you_sure,yes,no,logged_in,email_already_exists,couldnt_create_private_message,no_private_message_edit_allowed,couldnt_update_private_message,time,action
 <!-- translationsstop -->
 
 If you'd like to update this report, run:
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index eef39cc..8d130ae 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -15,7 +15,6 @@ import {
 import { WebSocketService } from '../services';
 import { wsJsonToRes, toast } from '../utils';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 declare const Sortable: any;
 
@@ -76,37 +75,27 @@ export class Communities extends Component<any, CommunitiesState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <p class="text-center">
+          <h5 class="">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </p>
+          </h5>
         ) : (
           <div>
-            <h5>
-              { i18n.t('list_of_communities') }
-            </h5>
+            <h5>{i18n.t('list_of_communities')}</h5>
             <div class="table-responsive">
               <table id="community_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th>
-                      { i18n.t('name') }
-                    </th>
-                    <th class="d-none d-lg-table-cell">
-                      { i18n.t('title') }
-                    </th>
-                    <th>
-                      { i18n.t('category') }
-                    </th>
-                    <th class="text-right">
-                      { i18n.t('subscribers') }
+                    <th>{i18n.t('name')}</th>
+                    <th class="d-none d-lg-table-cell">{i18n.t('title')}</th>
+                    <th>{i18n.t('category')}</th>
+                    <th class="text-right">{i18n.t('subscribers')}</th>
+                    <th class="text-right d-none d-lg-table-cell">
+                      {i18n.t('posts')}
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      { i18n.t('posts') }
-                    </th>
-                    <th class="text-right d-none d-lg-table-cell">
-                      { i18n.t('comments') }
+                      {i18n.t('comments')}
                     </th>
                     <th></th>
                   </tr>
@@ -139,7 +128,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleUnsubscribe
                             )}
                           >
-                            <T i18nKey="unsubscribe">#</T>
+                            {i18n.t('unsubscribe')}
                           </span>
                         ) : (
                           <span
@@ -149,7 +138,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleSubscribe
                             )}
                           >
-                            { i18n.t('subscribe') }
+                            {i18n.t('subscribe')}
                           </span>
                         )}
                       </td>
@@ -173,7 +162,7 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            { i18n.t('prev') }
+            {i18n.t('prev')}
           </button>
         )}
 
@@ -182,7 +171,7 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            { i18n.t('next') }
+            {i18n.t('next')}
           </button>
         )}
       </div>
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index 46fc418..aaa3e6c 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -21,7 +21,6 @@ import {
 import Tribute from 'tributejs/src/Tribute.js';
 import autosize from 'autosize';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 import { Community } from '../interfaces';
 
@@ -108,8 +107,8 @@ export class CommunityForm extends Component<
     return (
       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <div class="form-group row">
-          <label class="col-12 col-form-label" for="community-name">
-            { i18n.t('name') }
+          <label class="col-12 col-form-label" htmlFor="community-name">
+            {i18n.t('name')}
           </label>
           <div class="col-12">
             <input
@@ -128,8 +127,8 @@ export class CommunityForm extends Component<
         </div>
 
         <div class="form-group row">
-          <label class="col-12 col-form-label" for="community-title">
-            { i18n.t('title') }
+          <label class="col-12 col-form-label" htmlFor="community-title">
+            {i18n.t('title')}
           </label>
           <div class="col-12">
             <input
@@ -145,14 +144,13 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label" for="community-sidebar">
-            { i18n.t('sidebar') }
+          <label class="col-12 col-form-label" htmlFor={this.id}>
+            {i18n.t('sidebar')}
           </label>
           <div class="col-12">
             <textarea
               id={this.id}
               value={this.state.communityForm.description}
-              id="community-sidebar"
               onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
               class="form-control"
               rows={3}
@@ -161,8 +159,8 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label" for="community-category">
-            { i18n.t('category') }
+          <label class="col-12 col-form-label" htmlFor="community-category">
+            {i18n.t('category')}
           </label>
           <div class="col-12">
             <select
@@ -189,8 +187,8 @@ export class CommunityForm extends Component<
                   checked={this.state.communityForm.nsfw}
                   onChange={linkEvent(this, this.handleCommunityNsfwChange)}
                 />
-                <label class="form-check-label" for="community-nsfw">
-                  { i18n.t('nsfw') }
+                <label class="form-check-label" htmlFor="community-nsfw">
+                  {i18n.t('nsfw')}
                 </label>
               </div>
             </div>
@@ -215,7 +213,7 @@ export class CommunityForm extends Component<
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                { i18n.t('cancel') }
+                {i18n.t('cancel')}
               </button>
             )}
           </div>
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 3075634..da456fe 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -14,7 +14,7 @@ import {
   GetCommunityForm,
   ListingType,
   GetPostsResponse,
-  CreatePostLikeResponse,
+  PostResponse,
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
@@ -28,7 +28,6 @@ import {
   postRefetchSeconds,
   toast,
 } from '../utils';
-import { T } from 'inferno-i18next';
 import { i18n } from '../i18next';
 
 interface State {
@@ -128,11 +127,11 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <p class="text-center">
+          <h5>
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </p>
+          </h5>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -140,12 +139,12 @@ export class Community extends Component<any, State> {
                 {this.state.community.title}
                 {this.state.community.removed && (
                   <small className="ml-2 text-muted font-italic">
-                    { i18n.t('removed') }
+                    {i18n.t('removed')}
                   </small>
                 )}
                 {this.state.community.nsfw && (
                   <small className="ml-2 text-muted font-italic">
-                    { i18n.t('nsfw') }
+                    {i18n.t('nsfw')}
                   </small>
                 )}
               </h5>
@@ -192,7 +191,7 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            { i18n.t('prev') }
+            {i18n.t('prev')}
           </button>
         )}
         {this.state.posts.length == fetchLimit && (
@@ -200,7 +199,7 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            { i18n.t('next') }
+            {i18n.t('next')}
           </button>
         )}
       </div>
@@ -287,7 +286,7 @@ export class Community extends Component<any, State> {
       this.state.loading = false;
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
-      let data = res.data as CreatePostLikeResponse;
+      let data = res.data as PostResponse;
       let found = this.state.posts.find(c => c.id == data.post.id);
       found.my_vote = data.post.my_vote;
       found.score = data.post.score;
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index 49cfb0e..5c7a0a9 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -3,7 +3,6 @@ import { CommunityForm } from './community-form';
 import { Community } from '../interfaces';
 import { WebSocketService } from '../services';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 export class CreateCommunity extends Component<any, any> {
   constructor(props: any, context: any) {
@@ -22,9 +21,7 @@ export class CreateCommunity extends Component<any, any> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>
-              { i18n.t('create_community') }
-            </h5>
+            <h5>{i18n.t('create_community')}</h5>
             <CommunityForm onCreate={this.handleCommunityCreate} />
           </div>
         </div>
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index 39a5e5f..adbdfb5 100644
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -3,7 +3,6 @@ import { PostForm } from './post-form';
 import { WebSocketService } from '../services';
 import { PostFormParams } from '../interfaces';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 export class CreatePost extends Component<any, any> {
   constructor(props: any, context: any) {
@@ -22,9 +21,7 @@ export class CreatePost extends Component<any, any> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>
-              { i18n.t('create_post') }
-            </h5>
+            <h5>{i18n.t('create_post')}</h5>
             <PostForm onCreate={this.handlePostCreate} params={this.params} />
           </div>
         </div>
diff --git a/ui/src/components/inbox.tsx b/ui/src/components/inbox.tsx
index c89beb4..d4fdf91 100644
--- a/ui/src/components/inbox.tsx
+++ b/ui/src/components/inbox.tsx
@@ -122,7 +122,7 @@ export class Inbox extends Component<any, InboxState> {
                 <ul class="list-inline mb-1 text-muted small font-weight-bold">
                   <li className="list-inline-item">
                     <span class="pointer" onClick={this.markAllAsRead}>
-                      { i18n.t('mark_all_as_read') }
+                      {i18n.t('mark_all_as_read')}
                     </span>
                   </li>
                 </ul>
@@ -147,40 +147,20 @@ export class Inbox extends Component<any, InboxState> {
           onChange={linkEvent(this, this.handleUnreadOrAllChange)}
           class="custom-select custom-select-sm w-auto mr-2"
         >
-          <option disabled>
-            { i18n.t('type') }
-            
-          </option>
-          <option value={UnreadOrAll.Unread}>
-            { i18n.t('unread') }
-          </option>
-          <option value={UnreadOrAll.All}>
-            { i18n.t('all') }
-          </option>
+          <option disabled>{i18n.t('type')}</option>
+          <option value={UnreadOrAll.Unread}>{i18n.t('unread')}</option>
+          <option value={UnreadOrAll.All}>{i18n.t('all')}</option>
         </select>
         <select
           value={this.state.unreadType}
           onChange={linkEvent(this, this.handleUnreadTypeChange)}
           class="custom-select custom-select-sm w-auto mr-2"
         >
-          <option disabled>
-            { i18n.t('type') }
-          </option>
-          <option value={UnreadType.All}>
-            { i18n.t('all') }
-          </option>
-          <option value={UnreadType.Both}>
-            { i18n.t('both') }
-          </option>
-          <option value={UnreadType.Replies}>
-            { i18n.t('replies') }
-          </option>
-          <option value={UnreadType.Mentions}>
-            { i18n.t('mentions') }
-          </option>
-          <option value={UnreadType.Messages}>
-            { i18n.t('messages') }
-          </option>
+          <option disabled>{i18n.t('type')}</option>
+          <option value={UnreadType.All}>{i18n.t('all')}</option>
+          <option value={UnreadType.Replies}>{i18n.t('replies')}</option>
+          <option value={UnreadType.Mentions}>{i18n.t('mentions')}</option>
+          <option value={UnreadType.Messages}>{i18n.t('messages')}</option>
         </select>
         <SortSelect
           sort={this.state.sort}
@@ -252,14 +232,14 @@ export class Inbox extends Component<any, InboxState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            { i18n.t('prev') }
+            {i18n.t('prev')}
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          { i18n.t('next') }
+          {i18n.t('next')}
         </button>
       </div>
     );
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 1aacac0..8eee016 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -13,7 +13,6 @@ import {
 import { WebSocketService, UserService } from '../services';
 import { wsJsonToRes, validEmail, toast } from '../utils';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface State {
   loginForm: LoginForm;
@@ -78,10 +77,13 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>{ i18n.t('login') }</h5>
+          <h5>{i18n.t('login')}</h5>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label" for="login-email-or-username">
-                { i18n.t('email_or_username') }
+            <label
+              class="col-sm-2 col-form-label"
+              htmlFor="login-email-or-username"
+            >
+              {i18n.t('email_or_username')}
             </label>
             <div class="col-sm-10">
               <input
@@ -96,8 +98,8 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label" for="login-password">
-                { i18n.t('password') }
+            <label class="col-sm-2 col-form-label" htmlFor="login-password">
+              {i18n.t('password')}
             </label>
             <div class="col-sm-10">
               <input
@@ -113,7 +115,7 @@ export class Login extends Component<any, State> {
                 onClick={linkEvent(this, this.handlePasswordReset)}
                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
               >
-                { i18n.t('forgot_password') }
+                {i18n.t('forgot_password')}
               </button>
             </div>
           </div>
@@ -137,13 +139,11 @@ export class Login extends Component<any, State> {
   registerForm() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h2>
-          { i18n.t('sign_up') }
-        </h2>
+        <h5>{i18n.t('sign_up')}</h5>
 
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="register-username">
-            { i18n.t('username') }
+          <label class="col-sm-2 col-form-label" htmlFor="register-username">
+            {i18n.t('username')}
           </label>
 
           <div class="col-sm-10">
@@ -162,8 +162,8 @@ export class Login extends Component<any, State> {
         </div>
 
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="register-email">
-            { i18n.t('email') }
+          <label class="col-sm-2 col-form-label" htmlFor="register-email">
+            {i18n.t('email')}
           </label>
           <div class="col-sm-10">
             <input
@@ -179,8 +179,8 @@ export class Login extends Component<any, State> {
         </div>
 
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="register-password">
-            { i18n.t('password') }
+          <label class="col-sm-2 col-form-label" htmlFor="register-password">
+            {i18n.t('password')}
           </label>
           <div class="col-sm-10">
             <input
@@ -195,8 +195,11 @@ export class Login extends Component<any, State> {
         </div>
 
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="register-verify-password">
-            { i18n.t('verify_password') }
+          <label
+            class="col-sm-2 col-form-label"
+            htmlFor="register-verify-password"
+          >
+            {i18n.t('verify_password')}
           </label>
           <div class="col-sm-10">
             <input
@@ -210,7 +213,7 @@ export class Login extends Component<any, State> {
           </div>
         </div>
 
-        { this.state.enable_nsfw && (
+        {this.state.enable_nsfw && (
           <div class="form-group row">
             <div class="col-sm-10">
               <div class="form-check">
@@ -221,8 +224,8 @@ export class Login extends Component<any, State> {
                   checked={this.state.registerForm.show_nsfw}
                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
                 />
-                <label class="form-check-label" for="register-show-nsfw">
-                    { i18n.t('show_nsfw') }
+                <label class="form-check-label" htmlFor="register-show-nsfw">
+                  {i18n.t('show_nsfw')}
                 </label>
               </div>
             </div>
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index e578cc8..b39cec8 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -14,7 +14,7 @@ import {
   ListingType,
   SiteResponse,
   GetPostsResponse,
-  CreatePostLikeResponse,
+  PostResponse,
   Post,
   GetPostsForm,
   WebSocketJsonResponse,
@@ -159,7 +159,9 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="container">
         <div class="row">
-          <main role="main" class="col-12 col-md-8">{this.posts()}</main>
+          <main role="main" class="col-12 col-md-8">
+            {this.posts()}
+          </main>
           <aside class="col-12 col-md-4">{this.my_sidebar()}</aside>
         </div>
       </div>
@@ -200,7 +202,7 @@ export class Main extends Component<any, MainState> {
                   class="btn btn-sm btn-secondary btn-block"
                   to="/create_community"
                 >
-                  <T i18nKey="create_a_community">#</T>
+                  {i18n.t('create_a_community')}
                 </Link>
               </div>
             </div>
@@ -270,73 +272,43 @@ export class Main extends Component<any, MainState> {
                     class="pointer"
                     onClick={linkEvent(this, this.handleEditClick)}
                   >
-                    <T i18nKey="edit">#</T>
+                    {i18n.t('edit')}
                   </span>
                 </li>
               </ul>
             )}
             <ul class="my-2 list-inline">
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_online"
-                  interpolation={{ count: this.state.site.online }}
-                >
-                  #
-                </T>
+                {i18n.t('number_online', { count: this.state.site.online })}
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_users"
-                  interpolation={{
-                    count: this.state.site.site.number_of_users,
-                  }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_users', {
+                  count: this.state.site.site.number_of_users,
+                })}
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_communities"
-                  interpolation={{
-                    count: this.state.site.site.number_of_communities,
-                  }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_communities', {
+                  count: this.state.site.site.number_of_communities,
+                })}
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_posts"
-                  interpolation={{
-                    count: this.state.site.site.number_of_posts,
-                  }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_posts', {
+                  count: this.state.site.site.number_of_posts,
+                })}
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_comments"
-                  interpolation={{
-                    count: this.state.site.site.number_of_comments,
-                  }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_comments', {
+                  count: this.state.site.site.number_of_comments,
+                })}
               </li>
               <li className="list-inline-item">
                 <Link className="badge badge-secondary" to="/modlog">
-                  <T i18nKey="modlog">#</T>
+                  {i18n.t('modlog')}
                 </Link>
               </li>
             </ul>
             <ul class="mt-1 list-inline small mb-0">
-              <li class="list-inline-item">
-                <T i18nKey="admins" class="d-inline">
-                  #
-                </T>
-                :
-              </li>
+              <li class="list-inline-item">{i18n.t('admins')}:</li>
               {this.state.site.admins.map(admin => (
                 <li class="list-inline-item">
                   <Link class="text-info" to={`/u/${admin.name}`}>
@@ -376,9 +348,7 @@ export class Main extends Component<any, MainState> {
       <div class="card border-secondary">
         <div class="card-body">
           <h5>
-            <T i18nKey="powered_by" class="d-inline">
-              #
-            </T>
+            {i18n.t('powered_by')}
             <svg class="icon mx-2">
               <use xlinkHref="#icon-mouse">#</use>
             </svg>
@@ -415,11 +385,11 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="main-content-wrapper">
         {this.state.loading ? (
-          <p class="text-center">
+          <h5>
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </p>
+          </h5>
         ) : (
           <div>
             {this.selects()}
@@ -476,7 +446,7 @@ export class Main extends Component<any, MainState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            {i18n.t('prev')}
           </button>
         )}
         {this.state.posts.length == fetchLimit && (
@@ -484,7 +454,7 @@ export class Main extends Component<any, MainState> {
             class="btn btn-sm btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            <T i18nKey="next">#</T>
+            {i18n.t('next')}
           </button>
         )}
       </div>
@@ -601,7 +571,7 @@ export class Main extends Component<any, MainState> {
       this.state.loading = false;
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
-      let data = res.data as CreatePostLikeResponse;
+      let data = res.data as PostResponse;
       let found = this.state.posts.find(c => c.id == data.post.id);
       found.my_vote = data.post.my_vote;
       found.score = data.post.score;
diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx
index 6da10ee..f57e1c6 100644
--- a/ui/src/components/modlog.tsx
+++ b/ui/src/components/modlog.tsx
@@ -15,6 +15,7 @@ import {
   ModBan,
   ModAddCommunity,
   ModAdd,
+  WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import { wsJsonToRes, addTypeInfo, fetchLimit, toast } from '../utils';
@@ -343,7 +344,7 @@ export class Modlog extends Component<any, ModlogState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="text-center">
+          <h5 class="">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
@@ -359,15 +360,15 @@ export class Modlog extends Component<any, ModlogState> {
                   /c/{this.state.communityName}{' '}
                 </Link>
               )}
-              <span>{ i18n.t('modlog') }</span>
+              <span>{i18n.t('modlog')}</span>
             </h5>
             <div class="table-responsive">
               <table id="modlog_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th> { i18n.t('time')}</th>
-                    <th>{ i18n.t('mod')}</th>
-                    <th>{ i18n.t('action')}</th>
+                    <th> {i18n.t('time')}</th>
+                    <th>{i18n.t('mod')}</th>
+                    <th>{i18n.t('action')}</th>
                   </tr>
                 </thead>
                 {this.combined()}
@@ -388,14 +389,14 @@ export class Modlog extends Component<any, ModlogState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            { i18n.t('prev') }
+            {i18n.t('prev')}
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          { i18n.t('next') }
+          {i18n.t('next')}
         </button>
       </div>
     );
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index cfec365..fa52680 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -27,7 +27,6 @@ import {
 } from '../utils';
 import { version } from '../version';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface NavbarState {
   isLoggedIn: boolean;
@@ -113,12 +112,12 @@ export class Navbar extends Component<any, NavbarState> {
           <ul class="navbar-nav mr-auto">
             <li class="nav-item">
               <Link class="nav-link" to="/communities">
-                { i18n.t('communities') }
+                {i18n.t('communities')}
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/search">
-                { i18n.t('search') }
+                {i18n.t('search')}
               </Link>
             </li>
             <li class="nav-item">
@@ -129,17 +128,17 @@ export class Navbar extends Component<any, NavbarState> {
                   state: { prevPath: this.currentLocation },
                 }}
               >
-                { i18n.t('create_post') }
+                {i18n.t('create_post')}
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/create_community">
-                { i18n.t('create_community') }
+                {i18n.t('create_community')}
               </Link>
             </li>
             <li className="nav-item">
               <Link
-                class="nav-link ml-2"
+                class="nav-link"
                 to="/sponsors"
                 title={i18n.t('donate_to_lemmy')}
               >
@@ -187,7 +186,7 @@ export class Navbar extends Component<any, NavbarState> {
               </>
             ) : (
               <Link class="nav-link" to="/login">
-                { i18n.t('login_sign_up') }
+                {i18n.t('login_sign_up')}
               </Link>
             )}
           </ul>
diff --git a/ui/src/components/password_change.tsx b/ui/src/components/password_change.tsx
index 7774b78..9445e8e 100644
--- a/ui/src/components/password_change.tsx
+++ b/ui/src/components/password_change.tsx
@@ -10,7 +10,6 @@ import {
 import { WebSocketService, UserService } from '../services';
 import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface State {
   passwordChangeForm: PasswordChangeForm;
@@ -58,9 +57,7 @@ export class PasswordChange extends Component<any, State> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>
-              { i18n.t('password_change') }
-            </h5>
+            <h5>{i18n.t('password_change')}</h5>
             {this.passwordChangeForm()}
           </div>
         </div>
@@ -73,7 +70,7 @@ export class PasswordChange extends Component<any, State> {
       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">
-            <T i18nKey="new_password">#</T>
+            {i18n.t('new_password')}
           </label>
           <div class="col-sm-10">
             <input
@@ -87,7 +84,7 @@ export class PasswordChange extends Component<any, State> {
         </div>
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+            {i18n.t('verify_password')}
           </label>
           <div class="col-sm-10">
             <input
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 858b6b7..5d9c0f3 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -36,7 +36,6 @@ import {
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface PostFormProps {
   post?: Post; // If a post is given, that means this is an edit
@@ -151,8 +150,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       <div>
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label" for="post-url">
-              { i18n.t('url') }
+            <label class="col-sm-2 col-form-label" htmlFor="post-url">
+              {i18n.t('url')}
             </label>
             <div class="col-sm-10">
               <input
@@ -168,12 +167,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   class="mt-1 text-muted small font-weight-bold pointer"
                   onClick={linkEvent(this, this.copySuggestedTitle)}
                 >
-                  <T
-                    i18nKey="copy_suggested_title"
-                    interpolation={{ title: this.state.suggestedTitle }}
-                  >
-                    #
-                  </T>
+                  {i18n.t('copy_suggested_title', {
+                    title: this.state.suggestedTitle,
+                  })}
                 </div>
               )}
               <form>
@@ -182,7 +178,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   className={`${UserService.Instance.user &&
                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
                 >
-                  { i18n.t('upload_image') }
+                  {i18n.t('upload_image')}
                 </label>
                 <input
                   id="file-upload"
@@ -202,7 +198,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   target="_blank"
                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                 >
-                  { i18n.t('archive_link') }
+                  {i18n.t('archive_link')}
                 </a>
               )}
               {this.state.imageLoading && (
@@ -216,7 +212,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    { i18n.t('cross_posts') }
+                    {i18n.t('cross_posts')}
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -224,8 +220,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label" for="post-title">
-              { i18n.t('title') }
+            <label class="col-sm-2 col-form-label" htmlFor="post-title">
+              {i18n.t('title')}
             </label>
             <div class="col-sm-10">
               <textarea
@@ -241,7 +237,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.suggestedPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    { i18n.t('related_posts') }
+                    {i18n.t('related_posts')}
                   </div>
                   <PostListings posts={this.state.suggestedPosts} />
                 </>
@@ -250,14 +246,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
 
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label" for="post-body">
-              { i18n.t('body') }
+            <label class="col-sm-2 col-form-label" htmlFor={this.id}>
+              {i18n.t('body')}
             </label>
             <div class="col-sm-10">
               <textarea
                 id={this.id}
                 value={this.state.postForm.body}
-                id="post-body"
                 onInput={linkEvent(this, this.handlePostBodyChange)}
                 className={`form-control ${this.state.previewMode && 'd-none'}`}
                 rows={4}
@@ -275,7 +270,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                     .previewMode && 'active'}`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
-                  { i18n.t('preview') }
+                  {i18n.t('preview')}
                 </button>
               )}
               <a
@@ -283,14 +278,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 target="_blank"
                 class="d-inline-block float-right text-muted small font-weight-bold"
               >
-                { i18n.t('formatting_help') }
+                {i18n.t('formatting_help')}
               </a>
             </div>
           </div>
           {!this.props.post && (
             <div class="form-group row">
-              <label class="col-sm-2 col-form-label" for="post-community">
-                { i18n.t('community') }
+              <label class="col-sm-2 col-form-label" htmlFor="post-community">
+                {i18n.t('community')}
               </label>
               <div class="col-sm-10">
                 <select
@@ -317,8 +312,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                     checked={this.state.postForm.nsfw}
                     onChange={linkEvent(this, this.handlePostNsfwChange)}
                   />
-                  <label class="form-check-label" for="post-nsfw">
-                    { i18n.t('nsfw') }
+                  <label class="form-check-label" htmlFor="post-nsfw">
+                    {i18n.t('nsfw')}
                   </label>
                 </div>
               </div>
@@ -343,7 +338,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   class="btn btn-secondary"
                   onClick={linkEvent(this, this.handleCancel)}
                 >
-                  { i18n.t('cancel') }
+                  {i18n.t('cancel')}
                 </button>
               )}
             </div>
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index cb2e731..ba8e698 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -30,7 +30,6 @@ import {
   imageThumbnailer,
 } from '../utils';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface PostListingState {
   showEdit: boolean;
@@ -247,27 +246,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             )}
             {post.removed && (
               <small className="ml-2 text-muted font-italic">
-                { i18n.t('removed') }
+                {i18n.t('removed')}
               </small>
             )}
             {post.deleted && (
               <small className="ml-2 text-muted font-italic">
-                { i18n.t('deleted') }
+                {i18n.t('deleted')}
               </small>
             )}
             {post.locked && (
               <small className="ml-2 text-muted font-italic">
-                { i18n.t('locked') }
+                {i18n.t('locked')}
               </small>
             )}
             {post.stickied && (
               <small className="ml-2 text-muted font-italic">
-                { i18n.t('stickied') }
+                {i18n.t('stickied')}
               </small>
             )}
             {post.nsfw && (
               <small className="ml-2 text-muted font-italic">
-                { i18n.t('nsfw') }
+                {i18n.t('nsfw')}
               </small>
             )}
           </div>
@@ -288,18 +287,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 <span>{post.creator_name}</span>
               </Link>
               {this.isMod && (
-                <span className="mx-1 badge badge-light">
-                  { i18n.t('mod') }
-                </span>
+                <span className="mx-1 badge badge-light">{i18n.t('mod')}</span>
               )}
               {this.isAdmin && (
                 <span className="mx-1 badge badge-light">
-                  { i18n.t('admin') }
+                  {i18n.t('admin')}
                 </span>
               )}
               {(post.banned_from_community || post.banned) && (
                 <span className="mx-1 badge badge-danger">
-                  { i18n.t('banned') }
+                  {i18n.t('banned')}
                 </span>
               )}
               {this.props.showCommunity && (
@@ -326,12 +323,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </li>
             <li className="list-inline-item">
               <Link className="text-muted" to={`/post/${post.id}`}>
-                <T
-                  i18nKey="number_of_comments"
-                  interpolation={{ count: post.number_of_comments }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_comments', {
+                  count: post.number_of_comments,
+                })}
               </Link>
             </li>
           </ul>
@@ -353,7 +347,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         className="text-muted"
                         to={`/create_post${this.crossPostParams}`}
                       >
-                        <T i18nKey="cross_post">#</T>
+                        {i18n.t('cross_post')}
                       </Link>
                     </li>
                   </>
@@ -365,7 +359,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         class="pointer"
                         onClick={linkEvent(this, this.handleEditClick)}
                       >
-                        <T i18nKey="edit">#</T>
+                        {i18n.t('edit')}
                       </span>
                     </li>
                     <li className="list-inline-item mr-2">
@@ -406,14 +400,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         class="pointer"
                         onClick={linkEvent(this, this.handleModRemoveShow)}
                       >
-                        { i18n.t('remove') }
+                        {i18n.t('remove')}
                       </span>
                     ) : (
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleModRemoveSubmit)}
                       >
-                        { i18n.t('restore') }
+                        {i18n.t('restore')}
                       </span>
                     )}
                   </li>
@@ -430,7 +424,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               this.handleModBanFromCommunityShow
                             )}
                           >
-                            { i18n.t('ban') }
+                            {i18n.t('ban')}
                           </span>
                         ) : (
                           <span
@@ -440,7 +434,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               this.handleModBanFromCommunitySubmit
                             )}
                           >
-                            { i18n.t('unban') }
+                            {i18n.t('unban')}
                           </span>
                         )}
                       </li>
@@ -473,12 +467,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           this.handleShowConfirmTransferCommunity
                         )}
                       >
-                        <T i18nKey="transfer_community">#</T>
+                        {i18n.t('transfer_community')}
                       </span>
                     ) : (
                       <>
                         <span class="d-inline-block mr-1">
-                          <T i18nKey="are_you_sure">#</T>
+                          {i18n.t('are_you_sure')}
                         </span>
                         <span
                           class="pointer d-inline-block mr-1"
@@ -487,7 +481,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleTransferCommunity
                           )}
                         >
-                          { i18n.t('yes') }
+                          {i18n.t('yes')}
                         </span>
                         <span
                           class="pointer d-inline-block"
@@ -496,7 +490,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleCancelShowConfirmTransferCommunity
                           )}
                         >
-                          { i18n.t('no') }
+                          {i18n.t('no')}
                         </span>
                       </>
                     )}
@@ -512,14 +506,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             class="pointer"
                             onClick={linkEvent(this, this.handleModBanShow)}
                           >
-                            { i18n.t('ban_from_site') }
+                            {i18n.t('ban_from_site')}
                           </span>
                         ) : (
                           <span
                             class="pointer"
                             onClick={linkEvent(this, this.handleModBanSubmit)}
                           >
-                            { i18n.t('unban_from_site') }
+                            {i18n.t('unban_from_site')}
                           </span>
                         )}
                       </li>
@@ -549,18 +543,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           this.handleShowConfirmTransferSite
                         )}
                       >
-                        { i18n.t('transfer_site') }
+                        {i18n.t('transfer_site')}
                       </span>
                     ) : (
                       <>
                         <span class="d-inline-block mr-1">
-                          { i18n.t('are_you_sure') }
+                          {i18n.t('are_you_sure')}
                         </span>
                         <span
                           class="pointer d-inline-block mr-1"
                           onClick={linkEvent(this, this.handleTransferSite)}
                         >
-                          { i18n.t('yes') }
+                          {i18n.t('yes')}
                         </span>
                         <span
                           class="pointer d-inline-block"
@@ -569,7 +563,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleCancelShowConfirmTransferSite
                           )}
                         >
-                          { i18n.t('no') }
+                          {i18n.t('no')}
                         </span>
                       </>
                     )}
@@ -583,7 +577,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   className="pointer"
                   onClick={linkEvent(this, this.handleViewSource)}
                 >
-                  { i18n.t('view_source') }
+                  {i18n.t('view_source')}
                 </span>
               </li>
             )}
@@ -601,15 +595,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
               />
               <button type="submit" class="btn btn-secondary">
-                { i18n.t('remove_post') }
+                {i18n.t('remove_post')}
               </button>
             </form>
           )}
           {this.state.showBanDialog && (
             <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
               <div class="form-group row">
-                <label class="col-form-label" for="post-listing-reason">
-                  { i18n.t('reason') }
+                <label class="col-form-label" htmlFor="post-listing-reason">
+                  {i18n.t('reason')}
                 </label>
                 <input
                   type="text"
diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index d61316b..df0bac8 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -3,7 +3,6 @@ import { Link } from 'inferno-router';
 import { Post } from '../interfaces';
 import { PostListing } from './post-listing';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface PostListingsProps {
   posts: Array<Post>;
@@ -31,12 +30,12 @@ export class PostListings extends Component<PostListingsProps, any> {
           ))
         ) : (
           <>
-            <h5>
-              { i18n.t('no_posts') }
-            </h5>
+            <div>{i18n.t('no_posts')}</div>
             {this.props.showCommunity !== undefined && (
               <div>
-                <Link to="/communities">{ i18n.t('subscribe_to_communities') }</Link>
+                <Link to="/communities">
+                  {i18n.t('subscribe_to_communities')}
+                </Link>
               </div>
             )}
           </>
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 1d84efa..9bde858 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -11,7 +11,6 @@ import {
   CommentForm as CommentFormI,
   CommentResponse,
   CommentSortType,
-  CreatePostLikeResponse,
   CommunityUser,
   CommunityResponse,
   CommentNode as CommentNodeI,
@@ -38,7 +37,6 @@ import { CommentForm } from './comment-form';
 import { CommentNodes } from './comment-nodes';
 import autosize from 'autosize';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface PostState {
   post: PostI;
@@ -155,11 +153,11 @@ export class Post extends Component<any, PostState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <p class="text-center">
+          <h5>
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </p>
+          </h5>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8 mb-3">
@@ -173,7 +171,7 @@ export class Post extends Component<any, PostState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    { i18n.t('cross_posts') }
+                    {i18n.t('cross_posts')}
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -243,9 +241,7 @@ export class Post extends Component<any, PostState> {
     return (
       <div class="d-none d-md-block new-comments mb-3 card border-secondary">
         <div class="card-body small">
-          <h6>
-            { i18n.t('recent_comments') }
-          </h6>
+          <h6>{i18n.t('recent_comments')}</h6>
           {this.state.comments.map(comment => (
             <CommentNodes
               nodes={[{ comment: comment }]}
@@ -412,7 +408,7 @@ export class Post extends Component<any, PostState> {
       }
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
-      let data = res.data as CreatePostLikeResponse;
+      let data = res.data as PostResponse;
       this.state.post.my_vote = data.post.my_vote;
       this.state.post.score = data.post.score;
       this.state.post.upvotes = data.post.upvotes;
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index e3789d5..3acb716 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -12,7 +12,7 @@ import {
   SearchForm,
   SearchResponse,
   SearchType,
-  CreatePostLikeResponse,
+  PostResponse,
   CommentResponse,
   WebSocketJsonResponse,
 } from '../interfaces';
@@ -30,7 +30,6 @@ import { PostListing } from './post-listing';
 import { SortSelect } from './sort-select';
 import { CommentNodes } from './comment-nodes';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface SearchState {
   q: string;
@@ -126,9 +125,7 @@ export class Search extends Component<any, SearchState> {
   render() {
     return (
       <div class="container">
-        <h5>
-          { i18n.t('search') }
-        </h5>
+        <h5>{i18n.t('search')}</h5>
         {this.selects()}
         {this.searchForm()}
         {this.state.type_ == SearchType.All && this.all()}
@@ -163,9 +160,7 @@ export class Search extends Component<any, SearchState> {
               <use xlinkHref="#icon-spinner"></use>
             </svg>
           ) : (
-            <span>
-              { i18n.t('search') }
-            </span>
+            <span>{i18n.t('search')}</span>
           )}
         </button>
       </form>
@@ -180,24 +175,14 @@ export class Search extends Component<any, SearchState> {
           onChange={linkEvent(this, this.handleTypeChange)}
           class="custom-select custom-select-sm w-auto"
         >
-          <option disabled>
-            { i18n.t('type') }
-          </option>
-          <option value={SearchType.All}>
-            { i18n.t('all') }
-          </option>
-          <option value={SearchType.Comments}>
-            { i18n.t('comments') }
-          </option>
-          <option value={SearchType.Posts}>
-            { i18n.t('posts') }
-          </option>
+          <option disabled>{i18n.t('type')}</option>
+          <option value={SearchType.All}>{i18n.t('all')}</option>
+          <option value={SearchType.Comments}>{i18n.t('comments')}</option>
+          <option value={SearchType.Posts}>{i18n.t('posts')}</option>
           <option value={SearchType.Communities}>
-            { i18n.t('communities') }
-          </option>
-          <option value={SearchType.Users}>
-            { i18n.t('users') }
+            {i18n.t('communities')}
           </option>
+          <option value={SearchType.Users}>{i18n.t('users')}</option>
         </select>
         <span class="ml-2">
           <SortSelect
@@ -383,14 +368,14 @@ export class Search extends Component<any, SearchState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            { i18n.t('prev') }
+            {i18n.t('prev')}
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          { i18n.t('next') }
+          {i18n.t('next')}
         </button>
       </div>
     );
@@ -404,11 +389,7 @@ export class Search extends Component<any, SearchState> {
           res.posts.length == 0 &&
           res.comments.length == 0 &&
           res.communities.length == 0 &&
-          res.users.length == 0 && (
-            <span>
-              { i18n.t('no_results') }
-            </span>
-          )}
+          res.users.length == 0 && <span>{i18n.t('no_results')}</span>}
       </div>
     );
   }
@@ -506,7 +487,7 @@ export class Search extends Component<any, SearchState> {
       }
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
-      let data = res.data as CreatePostLikeResponse;
+      let data = res.data as PostResponse;
       let found = this.state.searchResponse.posts.find(
         c => c.id == data.post.id
       );
diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx
index 029f22b..ed1c88c 100644
--- a/ui/src/components/setup.tsx
+++ b/ui/src/components/setup.tsx
@@ -11,7 +11,6 @@ import { WebSocketService, UserService } from '../services';
 import { wsJsonToRes, toast } from '../utils';
 import { SiteForm } from './site-form';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface State {
   userForm: RegisterForm;
@@ -61,9 +60,7 @@ export class Setup extends Component<any, State> {
       <div class="container">
         <div class="row">
           <div class="col-12 offset-lg-3 col-lg-6">
-            <h3>
-                { i18n.t('lemmy_instance_setup') }
-            </h3>
+            <h3>{i18n.t('lemmy_instance_setup')}</h3>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
             ) : (
@@ -78,10 +75,10 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h4>{ i18n.t('setup_admin')}</h4>
+        <h5>{i18n.t('setup_admin')}</h5>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="username">
-            { i18n.t('username') } 
+          <label class="col-sm-2 col-form-label" htmlFor="username">
+            {i18n.t('username')}
           </label>
           <div class="col-sm-10">
             <input
@@ -98,8 +95,8 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="email">
-            { i18n.t('email') }
+          <label class="col-sm-2 col-form-label" htmlFor="email">
+            {i18n.t('email')}
           </label>
 
           <div class="col-sm-10">
@@ -115,8 +112,8 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="password">
-            { i18n.t('password')}
+          <label class="col-sm-2 col-form-label" htmlFor="password">
+            {i18n.t('password')}
           </label>
           <div class="col-sm-10">
             <input
@@ -130,8 +127,8 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label" for="verify-password">
-            { i18n.t('verify_password') }
+          <label class="col-sm-2 col-form-label" htmlFor="verify-password">
+            {i18n.t('verify_password')}
           </label>
           <div class="col-sm-10">
             <input
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 809ec91..fe0b28b 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -16,7 +16,6 @@ import {
 } from '../utils';
 import { CommunityForm } from './community-form';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface SidebarProps {
   community: Community;
@@ -72,12 +71,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               <span>{community.title}</span>
               {community.removed && (
                 <small className="ml-2 text-muted font-italic">
-                  { i18n.t('removed') }
+                  {i18n.t('removed')}
                 </small>
               )}
               {community.deleted && (
                 <small className="ml-2 text-muted font-italic">
-                  <T i18nKey="deleted">#</T>
+                  {i18n.t('deleted')}
                 </small>
               )}
             </h5>
@@ -92,7 +91,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                       class="pointer"
                       onClick={linkEvent(this, this.handleEditClick)}
                     >
-                      { i18n.t('edit') }
+                      {i18n.t('edit')}
                     </span>
                   </li>
                   {this.amCreator && (
@@ -116,14 +115,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                       class="pointer"
                       onClick={linkEvent(this, this.handleModRemoveShow)}
                     >
-                      { i18n.t('remove') }
+                      {i18n.t('remove')}
                     </span>
                   ) : (
                     <span
                       class="pointer"
                       onClick={linkEvent(this, this.handleModRemoveSubmit)}
                     >
-                      { i18n.t('restore') }
+                      {i18n.t('restore')}
                     </span>
                   )}
                 </li>
@@ -132,8 +131,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {this.state.showRemoveDialog && (
               <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
                 <div class="form-group row">
-                  <label class="col-form-label" for="remove-reason">
-                    { i18n.t('reason') }
+                  <label class="col-form-label" htmlFor="remove-reason">
+                    {i18n.t('reason')}
                   </label>
                   <input
                     type="text"
@@ -151,7 +150,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 {/* </div> */}
                 <div class="form-group row">
                   <button type="submit" class="btn btn-secondary">
-                    { i18n.t('remove_community') }
+                    {i18n.t('remove_community')}
                   </button>
                 </div>
               </form>
@@ -163,35 +162,26 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </Link>
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_subscribers"
-                  interpolation={{ count: community.number_of_subscribers }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_subscribers', {
+                  count: community.number_of_subscribers,
+                })}
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_posts"
-                  interpolation={{ count: community.number_of_posts }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_posts', {
+                  count: community.number_of_posts,
+                })}
               </li>
               <li className="list-inline-item badge badge-secondary">
-                <T
-                  i18nKey="number_of_comments"
-                  interpolation={{ count: community.number_of_comments }}
-                >
-                  #
-                </T>
+                {i18n.t('number_of_comments', {
+                  count: community.number_of_comments,
+                })}
               </li>
               <li className="list-inline-item">
                 <Link
                   className="badge badge-secondary"
                   to={`/modlog/community/${this.props.community.id}`}
                 >
-                  <T i18nKey="modlog">#</T>
+                  {i18n.t('modlog')}
                 </Link>
               </li>
             </ul>
@@ -219,7 +209,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 'no-click'}`}
               to={`/create_post?community=${community.name}`}
             >
-              { i18n.t('create_a_post') }
+              {i18n.t('create_a_post')}
             </Link>
             <div>
               {community.subscribed ? (
@@ -227,14 +217,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   class="btn btn-sm btn-secondary btn-block"
                   onClick={linkEvent(community.id, this.handleUnsubscribe)}
                 >
-                  { i18n.t('unsubscribe') }
+                  {i18n.t('unsubscribe')}
                 </button>
               ) : (
                 <button
                   class="btn btn-sm btn-secondary btn-block"
                   onClick={linkEvent(community.id, this.handleSubscribe)}
                 >
-                  { i18n.t('subscribe') }
+                  {i18n.t('subscribe')}
                 </button>
               )}
             </div>
diff --git a/ui/src/components/site-form.tsx b/ui/src/components/site-form.tsx
index 1c4f94a..113e9c6 100644
--- a/ui/src/components/site-form.tsx
+++ b/ui/src/components/site-form.tsx
@@ -5,7 +5,6 @@ import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface SiteFormProps {
   site?: Site; // If a site is given, that means this is an edit
@@ -67,8 +66,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             : capitalizeFirstLetter(i18n.t('name'))
         } ${i18n.t('your_site')}`}</h5>
         <div class="form-group row">
-          <label class="col-12 col-form-label" for="create-site-name">
-            { i18n.t('name') }
+          <label class="col-12 col-form-label" htmlFor="create-site-name">
+            {i18n.t('name')}
           </label>
           <div class="col-12">
             <input
@@ -84,14 +83,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label" for="create-site-sidebar">
-            { i18n.t('sidebar') }
+          <label class="col-12 col-form-label" htmlFor={this.id}>
+            {i18n.t('sidebar')}
           </label>
           <div class="col-12">
             <textarea
               id={this.id}
               value={this.state.siteForm.description}
-              id="create-site-sidebar"
               onInput={linkEvent(this, this.handleSiteDescriptionChange)}
               class="form-control"
               rows={3}
@@ -109,8 +107,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 checked={this.state.siteForm.enable_downvotes}
                 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
               />
-              <label class="form-check-label" for="create-site-downvotes">
-                { i18n.t('enable_downvotes') }
+              <label class="form-check-label" htmlFor="create-site-downvotes">
+                {i18n.t('enable_downvotes')}
               </label>
             </div>
           </div>
@@ -125,8 +123,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 checked={this.state.siteForm.enable_nsfw}
                 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
               />
-              <label class="form-check-label" for="create-site-enable-nsfw">
-                { i18n.t('enable_nsfw') }
+              <label class="form-check-label" htmlFor="create-site-enable-nsfw">
+                {i18n.t('enable_nsfw')}
               </label>
             </div>
           </div>
@@ -144,8 +142,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   this.handleSiteOpenRegistrationChange
                 )}
               />
-              <label class="form-check-label" for="create-site-open-registration">
-                { i18n.t('open_registration') }
+              <label
+                class="form-check-label"
+                htmlFor="create-site-open-registration"
+              >
+                {i18n.t('open_registration')}
               </label>
             </div>
           </div>
@@ -169,7 +170,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                { i18n.t('cancel') }
+                {i18n.t('cancel')}
               </button>
             )}
           </div>
diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx
index fbdaa59..5515f74 100644
--- a/ui/src/components/sort-select.tsx
+++ b/ui/src/components/sort-select.tsx
@@ -1,7 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { SortType } from '../interfaces';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface SortSelectProps {
   sort: SortType;
@@ -30,33 +29,17 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
         onChange={linkEvent(this, this.handleSortChange)}
         class="custom-select custom-select-sm w-auto"
       >
-        <option disabled>
-          { i18n.t('sort_type') }
-        </option>
+        <option disabled>{i18n.t('sort_type')}</option>
         {!this.props.hideHot && (
-          <option value={SortType.Hot}>
-            { i18n.t('hot') }
-          </option>
+          <option value={SortType.Hot}>{i18n.t('hot')}</option>
         )}
-        <option value={SortType.New}>
-          { i18n.t('new') }
-        </option>
+        <option value={SortType.New}>{i18n.t('new')}</option>
         <option disabled>─────</option>
-        <option value={SortType.TopDay}>
-          { i18n.t('top_day') }
-        </option>
-        <option value={SortType.TopWeek}>
-          { i18n.t('week') }
-        </option>
-        <option value={SortType.TopMonth}>
-          { i18n.t('month') }
-        </option>
-        <option value={SortType.TopYear}>
-          { i18n.t('year') }
-        </option>
-        <option value={SortType.TopAll}>
-          { i18n.t('all') }
-        </option>
+        <option value={SortType.TopDay}>{i18n.t('top_day')}</option>
+        <option value={SortType.TopWeek}>{i18n.t('week')}</option>
+        <option value={SortType.TopMonth}>{i18n.t('month')}</option>
+        <option value={SortType.TopYear}>{i18n.t('year')}</option>
+        <option value={SortType.TopAll}>{i18n.t('all')}</option>
       </select>
     );
   }
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index a2959d7..ebdf6d5 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -18,7 +18,7 @@ import {
   BanUserResponse,
   AddAdminResponse,
   DeleteAccountForm,
-  CreatePostLikeResponse,
+  PostResponse,
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
@@ -39,7 +39,6 @@ import { ListingTypeSelect } from './listing-type-select';
 import { CommentNodes } from './comment-nodes';
 import { MomentTime } from './moment-time';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 enum View {
   Overview,
@@ -199,11 +198,11 @@ export class User extends Component<any, UserState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <p class="text-center">
+          <h5>
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </p>
+          </h5>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -245,21 +244,11 @@ export class User extends Component<any, UserState> {
           onChange={linkEvent(this, this.handleViewChange)}
           class="custom-select custom-select-sm w-auto"
         >
-          <option disabled>
-            { i18n.t('view') }
-          </option>
-          <option value={View.Overview}>
-            { i18n.t('overview') }
-          </option>
-          <option value={View.Comments}>
-            { i18n.t('comments') }
-          </option>
-          <option value={View.Posts}>
-            { i18n.t('posts') }
-          </option>
-          <option value={View.Saved}>
-            { i18n.t('saved') }
-          </option>
+          <option disabled>{i18n.t('view')}</option>
+          <option value={View.Overview}>{i18n.t('overview')}</option>
+          <option value={View.Comments}>{i18n.t('comments')}</option>
+          <option value={View.Posts}>{i18n.t('posts')}</option>
+          <option value={View.Saved}>{i18n.t('saved')}</option>
         </select>
         <span class="ml-2">
           <SortSelect
@@ -359,7 +348,7 @@ export class User extends Component<any, UserState> {
                 <li className="list-inline-item">{user.name}</li>
                 {user.banned && (
                   <li className="list-inline-item badge badge-danger">
-                    { i18n.t('banned') }
+                    {i18n.t('banned')}
                   </li>
                 )}
               </ul>
@@ -371,38 +360,20 @@ export class User extends Component<any, UserState> {
               <table class="table table-bordered table-sm mt-2 mb-0">
                 <tr>
                   <td>
-                    <T
-                      i18nKey="number_of_points"
-                      interpolation={{ count: user.post_score }}
-                    >
-                      #
-                    </T>
+                    {i18n.t('number_of_points', { count: user.post_score })}
                   </td>
                   <td>
-                    <T
-                      i18nKey="number_of_posts"
-                      interpolation={{ count: user.number_of_posts }}
-                    >
-                      #
-                    </T>
+                    {i18n.t('number_of_posts', { count: user.number_of_posts })}
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    <T
-                      i18nKey="number_of_points"
-                      interpolation={{ count: user.comment_score }}
-                    >
-                      #
-                    </T>
+                    {i18n.t('number_of_points', { count: user.comment_score })}
                   </td>
                   <td>
-                    <T
-                      i18nKey="number_of_comments"
-                      interpolation={{ count: user.number_of_comments }}
-                    >
-                      #
-                    </T>
+                    {i18n.t('number_of_comments', {
+                      count: user.number_of_comments,
+                    })}
                   </td>
                 </tr>
               </table>
@@ -412,7 +383,7 @@ export class User extends Component<any, UserState> {
                 class="btn btn-block btn-secondary mt-3"
                 onClick={linkEvent(this, this.handleLogoutClick)}
               >
-                { i18n.t('logout') }
+                {i18n.t('logout')}
               </button>
             ) : (
               <>
@@ -443,14 +414,10 @@ export class User extends Component<any, UserState> {
       <div>
         <div class="card border-secondary mb-3">
           <div class="card-body">
-            <h5>
-              { i18n.t('settings') }
-            </h5>
+            <h5>{i18n.t('settings')}</h5>
             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
               <div class="form-group">
-                <label>
-                  { i18n.t('avatar') }
-                </label>
+                <label>{i18n.t('avatar')}</label>
                 <form class="d-inline">
                   <label
                     htmlFor="file-upload"
@@ -458,7 +425,7 @@ export class User extends Component<any, UserState> {
                   >
                     {!this.state.userSettingsForm.avatar ? (
                       <span class="btn btn-sm btn-secondary">
-                        { i18n.t('upload_avatar') }
+                        {i18n.t('upload_avatar')}
                       </span>
                     ) : (
                       <img
@@ -481,20 +448,14 @@ export class User extends Component<any, UserState> {
                 </form>
               </div>
               <div class="form-group">
-                <label>
-                  { i18n.t('language') }
-                </label>
+                <label>{i18n.t('language')}</label>
                 <select
                   value={this.state.userSettingsForm.lang}
                   onChange={linkEvent(this, this.handleUserSettingsLangChange)}
                   class="ml-2 custom-select custom-select-sm w-auto"
                 >
-                  <option disabled>
-                    { i18n.t('language') }
-                  </option>
-                  <option value="browser">
-                    { i18n.t('browser_default') }
-                  </option>
+                  <option disabled>{i18n.t('language')}</option>
+                  <option value="browser">{i18n.t('browser_default')}</option>
                   <option disabled>──</option>
                   {languages.map(lang => (
                     <option value={lang.code}>{lang.name}</option>
@@ -502,17 +463,13 @@ export class User extends Component<any, UserState> {
                 </select>
               </div>
               <div class="form-group">
-                <label>
-                  { i18n.t('theme') }
-                </label>
+                <label>{i18n.t('theme')}</label>
                 <select
                   value={this.state.userSettingsForm.theme}
                   onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
                   class="ml-2 custom-select custom-select-sm w-auto"
                 >
-                  <option disabled>
-                    { i18n.t('theme') }
-                  </option>
+                  <option disabled>{i18n.t('theme')}</option>
                   {themes.map(theme => (
                     <option value={theme}>{theme}</option>
                   ))}
@@ -520,9 +477,7 @@ export class User extends Component<any, UserState> {
               </div>
               <form className="form-group">
                 <label>
-                  <T i18nKey="sort_type" class="mr-2">
-                    #
-                  </T>
+                  <div class="mr-2">{i18n.t('sort_type')}</div>
                 </label>
                 <ListingTypeSelect
                   type_={this.state.userSettingsForm.default_listing_type}
@@ -531,9 +486,7 @@ export class User extends Component<any, UserState> {
               </form>
               <form className="form-group">
                 <label>
-                  <T i18nKey="type" class="mr-2">
-                    #
-                  </T>
+                  <div class="mr-2">{i18n.t('type')}</div>
                 </label>
                 <SortSelect
                   sort={this.state.userSettingsForm.default_sort_type}
@@ -541,8 +494,8 @@ export class User extends Component<any, UserState> {
                 />
               </form>
               <div class="form-group row">
-                <label class="col-lg-3 col-form-label" for="user-email">
-                  { i18n.t('email') }
+                <label class="col-lg-3 col-form-label" htmlFor="user-email">
+                  {i18n.t('email')}
                 </label>
                 <div class="col-lg-9">
                   <input
@@ -580,8 +533,8 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label" for="user-password">
-                  { i18n.t('new_password') }
+                <label class="col-lg-5 col-form-label" htmlFor="user-password">
+                  {i18n.t('new_password')}
                 </label>
                 <div class="col-lg-7">
                   <input
@@ -597,8 +550,11 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label" for="user-verify-password">
-                  { i18n.t('verify_password') }
+                <label
+                  class="col-lg-5 col-form-label"
+                  htmlFor="user-verify-password"
+                >
+                  {i18n.t('verify_password')}
                 </label>
                 <div class="col-lg-7">
                   <input
@@ -614,8 +570,11 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label" for="user-old-password">
-                  { i18n.t('old_password') }
+                <label
+                  class="col-lg-5 col-form-label"
+                  htmlFor="user-old-password"
+                >
+                  {i18n.t('old_password')}
                 </label>
                 <div class="col-lg-7">
                   <input
@@ -643,8 +602,8 @@ export class User extends Component<any, UserState> {
                         this.handleUserSettingsShowNsfwChange
                       )}
                     />
-                    <label class="form-check-label" for="user-show-nsfw">
-                      { i18n.t('show_nsfw') }
+                    <label class="form-check-label" htmlFor="user-show-nsfw">
+                      {i18n.t('show_nsfw')}
                     </label>
                   </div>
                 </div>
@@ -661,8 +620,8 @@ export class User extends Component<any, UserState> {
                       this.handleUserSettingsShowAvatarsChange
                     )}
                   />
-                  <label class="form-check-label" for="user-show-avatars">
-                    { i18n.t('show_avatars') }
+                  <label class="form-check-label" htmlFor="user-show-avatars">
+                    {i18n.t('show_avatars')}
                   </label>
                 </div>
               </div>
@@ -681,8 +640,11 @@ export class User extends Component<any, UserState> {
                       this.handleUserSettingsSendNotificationsToEmailChange
                     )}
                   />
-                  <label class="form-check-label" for="user-send-notifications-to-email">
-                    { i18n.t('send_notifications_to_email') }
+                  <label
+                    class="form-check-label"
+                    htmlFor="user-send-notifications-to-email"
+                  >
+                    {i18n.t('send_notifications_to_email')}
                   </label>
                 </div>
               </div>
@@ -706,12 +668,12 @@ export class User extends Component<any, UserState> {
                     this.handleDeleteAccountShowConfirmToggle
                   )}
                 >
-                  { i18n.t('delete_account') }
+                  {i18n.t('delete_account')}
                 </button>
                 {this.state.deleteAccountShowConfirm && (
                   <>
                     <div class="my-2 alert alert-danger" role="alert">
-                      { i18n.t('delete_account_confirm') }
+                      {i18n.t('delete_account_confirm')}
                     </div>
                     <input
                       type="password"
@@ -742,7 +704,7 @@ export class User extends Component<any, UserState> {
                         this.handleDeleteAccountShowConfirmToggle
                       )}
                     >
-                      { i18n.t('cancel') }
+                      {i18n.t('cancel')}
                     </button>
                   </>
                 )}
@@ -760,9 +722,7 @@ export class User extends Component<any, UserState> {
         {this.state.moderates.length > 0 && (
           <div class="card border-secondary mb-3">
             <div class="card-body">
-              <h5>
-                { i18n.t('moderates') }
-              </h5>
+              <h5>{i18n.t('moderates')}</h5>
               <ul class="list-unstyled mb-0">
                 {this.state.moderates.map(community => (
                   <li>
@@ -785,9 +745,7 @@ export class User extends Component<any, UserState> {
         {this.state.follows.length > 0 && (
           <div class="card border-secondary mb-3">
             <div class="card-body">
-              <h5>
-                { i18n.t('subscribed') }
-              </h5>
+              <h5>{i18n.t('subscribed')}</h5>
               <ul class="list-unstyled mb-0">
                 {this.state.follows.map(community => (
                   <li>
@@ -812,14 +770,14 @@ export class User extends Component<any, UserState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            {i18n.t('prev')}
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          { i18n.t('next') }
+          {i18n.t('next')}
         </button>
       </div>
     );
@@ -1097,7 +1055,7 @@ export class User extends Component<any, UserState> {
       if (data.comment.my_vote !== null) found.my_vote = data.comment.my_vote;
       this.setState(this.state);
     } else if (res.op == UserOperation.CreatePostLike) {
-      let data = res.data as CreatePostLikeResponse;
+      let data = res.data as PostResponse;
       let found = this.state.posts.find(c => c.id == data.post.id);
       found.my_vote = data.post.my_vote;
       found.score = data.post.score;

From 04df95b8b2d3babdeecac48831ac2632495df449 Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Sun, 2 Feb 2020 14:10:15 -0500
Subject: [PATCH 5/6] Some minor fixes.

---
 ui/src/components/login.tsx |  1 -
 ui/src/components/post.tsx  | 19 ++++++++++
 ui/src/translations/de.ts   | 70 +++++++++++++++++++------------------
 3 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 8eee016..81f9817 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -212,7 +212,6 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
-
         {this.state.enable_nsfw && (
           <div class="form-group row">
             <div class="col-sm-10">
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 9bde858..a8a94f0 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -233,6 +233,18 @@ export class Post extends Component<any, PostState> {
             onChange={linkEvent(this, this.handleCommentSortChange)}
           />
         </label>
+        <label
+          className={`btn btn-sm btn-secondary pointer ${this.state
+            .commentSort === CommentSortType.Old && 'active'}`}
+        >
+          {i18n.t('old')}
+          <input
+            type="radio"
+            value={CommentSortType.Old}
+            checked={this.state.commentSort === CommentSortType.Old}
+            onChange={linkEvent(this, this.handleCommentSortChange)}
+          />
+        </label>
       </div>
     );
   }
@@ -313,6 +325,13 @@ export class Post extends Component<any, PostState> {
           +a.comment.deleted - +b.comment.deleted ||
           b.comment.published.localeCompare(a.comment.published)
       );
+    } else if (this.state.commentSort == CommentSortType.Old) {
+      tree.sort(
+        (a, b) =>
+          +a.comment.removed - +b.comment.removed ||
+          +a.comment.deleted - +b.comment.deleted ||
+          a.comment.published.localeCompare(b.comment.published)
+      );
     } else if (this.state.commentSort == CommentSortType.Hot) {
       tree.sort(
         (a, b) =>
diff --git a/ui/src/translations/de.ts b/ui/src/translations/de.ts
index 1ecaada..7a1b0f5 100644
--- a/ui/src/translations/de.ts
+++ b/ui/src/translations/de.ts
@@ -15,9 +15,9 @@ export const de = {
     remove_comment: 'Kommentar löschen',
     communities: 'Communities',
     users: 'Benutzer',
-    create_a_community: 'Eine community anlegen',
-    create_community: 'Community anlegen',
-    remove_community: 'Community entfernen',
+    create_a_community: 'Eine Gemeinschaft anlegen',
+    create_community: 'Gemeinschaft anlegen',
+    remove_community: 'Gemeinschaft entfernen',
     subscribed_to_communities: 'Abonnierte <1>communities</1>',
     trending_communities: 'Trending <1>communities</1>',
     list_of_communities: 'Liste von communities',
@@ -36,17 +36,17 @@ export const de = {
     unsticky: 'nicht haftend',
     link: 'link',
     archive_link: 'Archiv-Link',
-    mod: 'mod',
-    mods: 'mods',
+    mod: 'Moderator',
+    mods: 'Moderatoren',
     moderates: 'Moderiert',
     settings: 'Einstellungen',
-    remove_as_mod: 'Als mod entfernen',
-    appoint_as_mod: 'Zum mod ernennen',
+    remove_as_mod: 'Als Moderator entfernen',
+    appoint_as_mod: 'Zum Moderator ernennen',
     modlog: 'Modlog',
-    admin: 'admin',
-    admins: 'admins',
-    remove_as_admin: 'Als admin entfernen',
-    appoint_as_admin: 'Zum admin ernennen',
+    admin: 'Administrator',
+    admins: 'Administratoren',
+    remove_as_admin: 'Als Administrator entfernen',
+    appoint_as_admin: 'Zum Administrator ernennen',
     remove: 'entfernen',
     removed: 'entfernt',
     locked: 'gesperrt',
@@ -66,11 +66,11 @@ export const de = {
     unban_from_site: 'Von der Seite entbannen',
     banned: 'gesperrt',
     save: 'speichern',
-    unsave: 'unsave',
+    unsave: 'nicht speichern',
     create: 'anlegen',
     creator: 'Ersteller',
-    username: 'Username',
-    email_or_username: 'Email oder Username',
+    username: 'Benutzername',
+    email_or_username: 'E-mail oder Username',
     number_of_users: '{{count}} Benutzer',
     number_of_subscribers: '{{count}} Abonnenten',
     number_of_points: '{{count}} Punkte',
@@ -86,7 +86,7 @@ export const de = {
     subscribed: 'Abonniert',
     prev: 'Zurück',
     next: 'Weiter',
-    sidebar: 'Sidebar',
+    sidebar: 'Seitenleiste',
     sort_type: 'Sortieren nach',
     hot: 'Hot',
     new: 'Neu',
@@ -116,28 +116,29 @@ export const de = {
     password: 'Passwort',
     verify_password: 'Passwort überprüfen',
     forgot_password: 'Passwort vergessen',
-    reset_password_mail_sent: 'Eine E-Mail wurde geschickt, um dein Passwort zurückzusetzen.',
+    reset_password_mail_sent:
+      'Eine E-Mail wurde geschickt, um dein Passwort zurückzusetzen.',
     password_change: 'Passwort geändert',
     new_password: 'neues Passwort',
-    no_email_setup: "Dieser Server hat E-Mails nicht korrekt eingerichtet.",
+    no_email_setup: 'Dieser Server hat E-Mails nicht korrekt eingerichtet.',
     login: 'Einloggen',
     sign_up: 'Registrieren',
-    email: 'Email',
-    optional: 'Optional',
+    email: 'E-Mail',
+    optional: 'optional',
     expires: 'Ablaufdatum',
     language: 'Sprache',
     browser_default: 'Standard-Browser',
     url: 'URL',
     body: 'Text',
     copy_suggested_title: 'Vorgeschlagenen Titel übernehmen: {{title}}',
-    community: 'Community',
-    expand_here: 'Expand here',
+    community: 'Gemeinschaft',
+    expand_here: 'hier erweitern',
     subscribe_to_communities: 'Abonniere ein paar <1>communities</1>.',
     chat: 'Chat',
     recent_comments: 'Neueste Kommentare',
     no_results: 'Keine Ergebnisse.',
-    setup: 'Setup',
-    lemmy_instance_setup: 'Lemmy Instanz Setup',
+    setup: 'Einrichten',
+    lemmy_instance_setup: 'Lemmy Instanz Einrichten',
     setup_admin: 'Seiten Administrator konfigurieren',
     your_site: 'deine Seite',
     modified: 'verändert',
@@ -151,7 +152,7 @@ export const de = {
     support_on_patreon: 'Auf Patreon unterstützen',
     general_sponsors:
       'Allgemeine Sponsoren sind die, die zwischen $10 und $39 zu Lemmy beitragen.',
-    crypto: 'Crypto',
+    crypto: 'Kryptowährung',
     bitcoin: 'Bitcoin',
     ethereum: 'Ethereum',
     monero: 'Monero',
@@ -159,16 +160,16 @@ export const de = {
     joined: 'beigetreten',
     by: 'von',
     to: 'bis',
-    transfer_community: 'Transfer-Community',
+    transfer_community: 'Gemeinschaft übertragen',
     transfer_site: 'Transferseite',
     are_you_sure: 'Bist du sicher?',
     yes: 'Ja',
     no: 'Nein',
     powered_by: 'Bereitgestellt durch',
     landing_0:
-      'Lemmy ist ein <1>Link Aggregator</1> / Reddit Alternative im <2>Fediverse</2>.<3></3>Es ist selbst-hostbar, hat live-updates von Kommentar-threads und ist winzig (<4>~80kB</4>). Federation in das ActivityPub Netzwerk ist geplant. <5></5>Dies ist eine <6>sehr frühe Beta Version</6>, und viele Features funktionieren zurzeit nicht richtig oder fehlen. <7></7>Schlage neue Features vor oder melde Bugs <8>hier.</8><9></9>Gebaut mit <10>Rust</10>, <11>Actix</11>, <12>Inferno</12>, <13>Typescript</13>.',
+      'Lemmy ist ein <1>Link-Aggregator</1> / Reddit Alternative im <2>Fediverse</2>.<3></3>Es ist selbst-hostbar, hat live-updates von Kommentar-threads und ist winzig (<4>~80kB</4>). Federation in das ActivityPub Netzwerk ist geplant. <5></5>Dies ist eine <6>sehr frühe Beta Version</6>, und viele Features funktionieren zurzeit nicht richtig oder fehlen. <7></7>Schlage neue Features vor oder melde Bugs <8>hier.</8><9></9>Gebaut mit <10>Rust</10>, <11>Actix</11>, <12>Inferno</12>, <13>Typescript</13>.',
     not_logged_in: 'Nicht eingeloggt.',
-    community_ban: 'Du wurdest von dieser Community gebannt.',
+    community_ban: 'Du wurdest von dieser Gemeinschaft gebannt.',
     site_ban: 'Du wurdest von dieser Seite gebannt',
     couldnt_create_comment: 'Konnte Kommentar nicht anlegen.',
     couldnt_like_comment: 'Konnte nicht liken.',
@@ -176,14 +177,15 @@ export const de = {
     couldnt_save_comment: 'Konnte Kommentar nicht speichern.',
     no_comment_edit_allowed: 'Keine Erlaubnis Kommentar zu editieren.',
     no_post_edit_allowed: 'Keine Erlaubnis Beitrag zu editieren.',
-    no_community_edit_allowed: 'Keine Erlaubnis Community zu editieren.',
-    couldnt_find_community: 'Konnte Community nicht finden.',
-    couldnt_update_community: 'Konnte Community nicht aktualisieren.',
-    community_already_exists: 'Community existiert bereits.',
+    no_community_edit_allowed: 'Keine Erlaubnis Gemeinschaft zu editieren.',
+    couldnt_find_community: 'Konnte Gemeinschaft nicht finden.',
+    couldnt_update_community: 'Konnte Gemeinschaft nicht aktualisieren.',
+    community_already_exists: 'Gemeinschaft existiert bereits.',
     community_moderator_already_exists:
-      'Community Moderator existiert bereits.',
-    community_follower_already_exists: 'Community Follower existiert bereits.',
-    community_user_already_banned: 'Community Nutzer schon gebannt.',
+      'Gemeinschaft Moderator existiert bereits.',
+    community_follower_already_exists:
+      'Gemeinschaft Follower existiert bereits.',
+    community_user_already_banned: 'Gemeinschaft Nutzer schon gebannt.',
     couldnt_create_post: 'Konnte Beitrag nicht anlegen.',
     couldnt_like_post: 'Konnte Beitrag nicht liken.',
     couldnt_find_post: 'Konnte Beitrag nicht finden.',

From bf2543c4e64d29ff93455b6aa6dd2dd070d9d504 Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Sun, 2 Feb 2020 14:22:35 -0500
Subject: [PATCH 6/6] Doing comment-node, comment-form and private-message.

---
 ui/src/components/comment-form.tsx    |  9 ++--
 ui/src/components/comment-node.tsx    | 63 +++++++++++++--------------
 ui/src/components/private-message.tsx |  7 ++-
 3 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx
index 7eb30f5..eaa054d 100644
--- a/ui/src/components/comment-form.tsx
+++ b/ui/src/components/comment-form.tsx
@@ -15,7 +15,6 @@ import { WebSocketService, UserService } from '../services';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface CommentFormProps {
   postId?: number;
@@ -127,7 +126,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
                     .previewMode && 'active'}`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
-                  <T i18nKey="preview">#</T>
+                  {i18n.t('preview')}
                 </button>
               )}
               {this.props.node && (
@@ -136,7 +135,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
                   class="btn btn-sm btn-secondary mr-2"
                   onClick={linkEvent(this, this.handleReplyCancel)}
                 >
-                  <T i18nKey="cancel">#</T>
+                  {i18n.t('cancel')}
                 </button>
               )}
               <a
@@ -144,14 +143,14 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
                 target="_blank"
                 class="d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="formatting_help">#</T>
+                {i18n.t('formatting_help')}
               </a>
               <form class="d-inline-block mr-2 float-right text-muted small font-weight-bold">
                 <label
                   htmlFor={`file-upload-${this.id}`}
                   className={`${UserService.Instance.user && 'pointer'}`}
                 >
-                  <T i18nKey="upload_image">#</T>
+                  {i18n.t('upload_image')}
                 </label>
                 <input
                   id={`file-upload-${this.id}`}
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 76a4c30..3296a5c 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -30,7 +30,6 @@ import { MomentTime } from './moment-time';
 import { CommentForm } from './comment-form';
 import { CommentNodes } from './comment-nodes';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface CommentNodeState {
   showReply: boolean;
@@ -180,22 +179,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             </li>
             {this.isMod && (
               <li className="list-inline-item badge badge-light">
-                <T i18nKey="mod">#</T>
+                {i18n.t('mod')}
               </li>
             )}
             {this.isAdmin && (
               <li className="list-inline-item badge badge-light">
-                <T i18nKey="admin">#</T>
+                {i18n.t('admin')}
               </li>
             )}
             {this.isPostCreator && (
               <li className="list-inline-item badge badge-light">
-                <T i18nKey="creator">#</T>
+                {i18n.t('creator')}
               </li>
             )}
             {(node.comment.banned_from_community || node.comment.banned) && (
               <li className="list-inline-item badge badge-danger">
-                <T i18nKey="banned">#</T>
+                {i18n.t('banned')}
               </li>
             )}
             <li className="list-inline-item">
@@ -258,7 +257,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         class="pointer"
                         onClick={linkEvent(this, this.handleReplyClick)}
                       >
-                        <T i18nKey="reply">#</T>
+                        {i18n.t('reply')}
                       </span>
                     </li>
                     <li className="list-inline-item mr-2">
@@ -276,7 +275,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                             class="pointer"
                             onClick={linkEvent(this, this.handleEditClick)}
                           >
-                            <T i18nKey="edit">#</T>
+                            {i18n.t('edit')}
                           </span>
                         </li>
                         <li className="list-inline-item">
@@ -307,7 +306,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         className="pointer"
                         onClick={linkEvent(this, this.handleViewSource)}
                       >
-                        <T i18nKey="view_source">#</T>
+                        {i18n.t('view_source')}
                       </span>
                     </li>
                     <li className="list-inline-item">
@@ -315,7 +314,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         className="text-muted"
                         to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
                       >
-                        <T i18nKey="link">#</T>
+                        {i18n.t('link')}
                       </Link>
                     </li>
                     {/* Admins and mods can remove comments */}
@@ -331,7 +330,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 this.handleModRemoveShow
                               )}
                             >
-                              <T i18nKey="remove">#</T>
+                              {i18n.t('remove')}
                             </span>
                           ) : (
                             <span
@@ -341,7 +340,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 this.handleModRemoveSubmit
                               )}
                             >
-                              <T i18nKey="restore">#</T>
+                              {i18n.t('restore')}
                             </span>
                           )}
                         </li>
@@ -360,7 +359,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                   this.handleModBanFromCommunityShow
                                 )}
                               >
-                                <T i18nKey="ban">#</T>
+                                {i18n.t('ban')}
                               </span>
                             ) : (
                               <span
@@ -370,7 +369,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                   this.handleModBanFromCommunitySubmit
                                 )}
                               >
-                                <T i18nKey="unban">#</T>
+                                {i18n.t('unban')}
                               </span>
                             )}
                           </li>
@@ -392,7 +391,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                             ) : (
                               <>
                                 <span class="d-inline-block mr-1">
-                                  <T i18nKey="are_you_sure">#</T>
+                                  {i18n.t('are_you_sure')}
                                 </span>
                                 <span
                                   class="pointer d-inline-block mr-1"
@@ -401,7 +400,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                     this.handleAddModToCommunity
                                   )}
                                 >
-                                  <T i18nKey="yes">#</T>
+                                  {i18n.t('yes')}
                                 </span>
                                 <span
                                   class="pointer d-inline-block"
@@ -410,7 +409,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                     this.handleCancelConfirmAppointAsMod
                                   )}
                                 >
-                                  <T i18nKey="no">#</T>
+                                  {i18n.t('no')}
                                 </span>
                               </>
                             )}
@@ -429,12 +428,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               this.handleShowConfirmTransferCommunity
                             )}
                           >
-                            <T i18nKey="transfer_community">#</T>
+                            {i18n.t('transfer_community')}
                           </span>
                         ) : (
                           <>
                             <span class="d-inline-block mr-1">
-                              <T i18nKey="are_you_sure">#</T>
+                              {i18n.t('are_you_sure')}
                             </span>
                             <span
                               class="pointer d-inline-block mr-1"
@@ -443,7 +442,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 this.handleTransferCommunity
                               )}
                             >
-                              <T i18nKey="yes">#</T>
+                              {i18n.t('yes')}
                             </span>
                             <span
                               class="pointer d-inline-block"
@@ -452,7 +451,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 this.handleCancelShowConfirmTransferCommunity
                               )}
                             >
-                              <T i18nKey="no">#</T>
+                              {i18n.t('no')}
                             </span>
                           </>
                         )}
@@ -468,7 +467,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 class="pointer"
                                 onClick={linkEvent(this, this.handleModBanShow)}
                               >
-                                <T i18nKey="ban_from_site">#</T>
+                                {i18n.t('ban_from_site')}
                               </span>
                             ) : (
                               <span
@@ -478,7 +477,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                   this.handleModBanSubmit
                                 )}
                               >
-                                <T i18nKey="unban_from_site">#</T>
+                                {i18n.t('unban_from_site')}
                               </span>
                             )}
                           </li>
@@ -500,13 +499,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                             ) : (
                               <>
                                 <span class="d-inline-block mr-1">
-                                  <T i18nKey="are_you_sure">#</T>
+                                  {i18n.t('are_you_sure')}
                                 </span>
                                 <span
                                   class="pointer d-inline-block mr-1"
                                   onClick={linkEvent(this, this.handleAddAdmin)}
                                 >
-                                  <T i18nKey="yes">#</T>
+                                  {i18n.t('yes')}
                                 </span>
                                 <span
                                   class="pointer d-inline-block"
@@ -515,7 +514,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                     this.handleCancelConfirmAppointAsAdmin
                                   )}
                                 >
-                                  <T i18nKey="no">#</T>
+                                  {i18n.t('no')}
                                 </span>
                               </>
                             )}
@@ -534,18 +533,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               this.handleShowConfirmTransferSite
                             )}
                           >
-                            <T i18nKey="transfer_site">#</T>
+                            {i18n.t('transfer_site')}
                           </span>
                         ) : (
                           <>
                             <span class="d-inline-block mr-1">
-                              <T i18nKey="are_you_sure">#</T>
+                              {i18n.t('are_you_sure')}
                             </span>
                             <span
                               class="pointer d-inline-block mr-1"
                               onClick={linkEvent(this, this.handleTransferSite)}
                             >
-                              <T i18nKey="yes">#</T>
+                              {i18n.t('yes')}
                             </span>
                             <span
                               class="pointer d-inline-block"
@@ -554,7 +553,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                 this.handleCancelShowConfirmTransferSite
                               )}
                             >
-                              <T i18nKey="no">#</T>
+                              {i18n.t('no')}
                             </span>
                           </>
                         )}
@@ -579,16 +578,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
             />
             <button type="submit" class="btn btn-secondary">
-              <T i18nKey="remove_comment">#</T>
+              {i18n.t('remove_comment')}
             </button>
           </form>
         )}
         {this.state.showBanDialog && (
           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
             <div class="form-group row">
-              <label class="col-form-label">
-                <T i18nKey="reason">#</T>
-              </label>
+              <label class="col-form-label">{i18n.t('reason')}</label>
               <input
                 type="text"
                 class="form-control mr-2"
diff --git a/ui/src/components/private-message.tsx b/ui/src/components/private-message.tsx
index 5b6748d..a2f82ad 100644
--- a/ui/src/components/private-message.tsx
+++ b/ui/src/components/private-message.tsx
@@ -14,7 +14,6 @@ import {
 import { MomentTime } from './moment-time';
 import { PrivateMessageForm } from './private-message-form';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 interface PrivateMessageState {
   showReply: boolean;
@@ -140,7 +139,7 @@ export class PrivateMessage extends Component<
                         class="pointer"
                         onClick={linkEvent(this, this.handleReplyClick)}
                       >
-                        <T i18nKey="reply">#</T>
+                        {i18n.t('reply')}
                       </span>
                     </li>
                   </>
@@ -152,7 +151,7 @@ export class PrivateMessage extends Component<
                         class="pointer"
                         onClick={linkEvent(this, this.handleEditClick)}
                       >
-                        <T i18nKey="edit">#</T>
+                        {i18n.t('edit')}
                       </span>
                     </li>
                     <li className="list-inline-item">
@@ -173,7 +172,7 @@ export class PrivateMessage extends Component<
                     className="pointer"
                     onClick={linkEvent(this, this.handleViewSource)}
                   >
-                    <T i18nKey="view_source">#</T>
+                    {i18n.t('view_source')}
                   </span>
                 </li>
               </ul>