Saving replies, the actual fixes will be in the merge to dev.

17 files changed, 310 insertions, 131 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index dcfb18a9..c1fc059b 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -1,12 +1,14 @@
 import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
-import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, BanFromCommunityForm, CommunityUser, AddModToCommunityForm } from '../interfaces';
+import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI, SaveCommentForm, BanFromCommunityForm, BanUserForm, CommunityUser, UserView, AddModToCommunityForm, AddAdminForm } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { mdToHtml, getUnixTime } from '../utils';
+import { mdToHtml, getUnixTime, canMod, isMod } from '../utils';
 import { MomentTime } from './moment-time';
 import { CommentForm } from './comment-form';
 import { CommentNodes } from './comment-nodes';
 
+enum BanType {Community, Site};
+
 interface CommentNodeState {
   showReply: boolean;
   showEdit: boolean;
@@ -15,6 +17,7 @@ interface CommentNodeState {
   showBanDialog: boolean;
   banReason: string;
   banExpires: string;
+  banType: BanType;
 }
 
 interface CommentNodeProps {
@@ -23,6 +26,7 @@ interface CommentNodeProps {
   viewOnly?: boolean;
   locked?: boolean;
   moderators: Array<CommunityUser>;
+  admins: Array<UserView>;
 }
 
 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
@@ -35,6 +39,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     showBanDialog: false,
     banReason: null,
     banExpires: null,
+    banType: BanType.Community
   }
 
   constructor(props: any, context: any) {
@@ -60,6 +65,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             <li className="list-inline-item">
               <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
             </li>
+            {this.isMod && 
+              <li className="list-inline-item badge badge-secondary">mod</li>
+            }
+            {this.isAdmin && 
+              <li className="list-inline-item badge badge-secondary">admin</li>
+            }
             <li className="list-inline-item">
               <span>(
                 <span className="text-info">+{node.comment.upvotes}</span>
@@ -77,47 +88,70 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             <div>
               <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.removed ? '*removed*' : node.comment.content)} />
               <ul class="list-inline mb-1 text-muted small font-weight-bold">
-                {!this.props.viewOnly && 
-                  <span class="mr-2">
+                {UserService.Instance.user && !this.props.viewOnly && 
+                  <>
                     <li className="list-inline-item">
                       <span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
                     </li>
+                    <li className="list-inline-item mr-2">
+                      <span class="pointer" onClick={linkEvent(this, this.handleSaveCommentClick)}>{node.comment.saved ? 'unsave' : 'save'}</span>
+                    </li>
                     {this.myComment && 
                       <>
-                      <li className="list-inline-item">
-                        <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
-                      </li>
-                      <li className="list-inline-item">
-                        <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span>
-                      </li>
-                    </>
+                        <li className="list-inline-item">
+                          <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
+                        </li>
+                        <li className="list-inline-item">
+                          <span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span>
+                        </li>
+                      </>
                     }
-                    {this.canMod &&
-                      <>
+                    {/* Admins and mods can remove comments */}
+                    {this.canMod && 
                       <li className="list-inline-item">
                         {!this.props.node.comment.removed ? 
                         <span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}>remove</span> :
                         <span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}>restore</span>
                         }
                       </li>
-                      {!this.isMod &&
-                        <>
+                    }
+                    {/* Mods can ban from community, and appoint as mods to community */}
+                    {this.canMod &&
+                      <>
+                        {!this.isMod && 
+                          <li className="list-inline-item">
+                            {!this.props.node.comment.banned_from_community ? 
+                            <span class="pointer" onClick={linkEvent(this, this.handleModBanFromCommunityShow)}>ban</span> :
+                            <span class="pointer" onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}>unban</span>
+                            }
+                          </li>
+                        }
+                        {!this.props.node.comment.banned_from_community &&
+                          <li className="list-inline-item">
+                            <span class="pointer" onClick={linkEvent(this, this.handleAddModToCommunity)}>{`${this.isMod ? 'remove' : 'appoint'} as mod`}</span>
+                          </li>
+                        }
+                      </>
+                    }
+                    {/* Admins can ban from all, and appoint other admins */}
+                    {this.canAdmin &&
+                      <>
+                        {!this.isAdmin && 
                           <li className="list-inline-item">
                             {!this.props.node.comment.banned ? 
-                            <span class="pointer" onClick={linkEvent(this, this.handleModBanShow)}>ban</span> :
-                            <span class="pointer" onClick={linkEvent(this, this.handleModBanSubmit)}>unban</span>
+                            <span class="pointer" onClick={linkEvent(this, this.handleModBanShow)}>ban from site</span> :
+                            <span class="pointer" onClick={linkEvent(this, this.handleModBanSubmit)}>unban from site</span>
                             }
                           </li>
-                        </>
-                      }
-                      {!this.props.node.comment.banned &&
-                        <li className="list-inline-item">
-                          <span class="pointer" onClick={linkEvent(this, this.handleAddModToCommunity)}>{`${this.isMod ? 'remove' : 'appoint'} as mod`}</span>
-                        </li>
-                      }
-                    </>
+                        }
+                        {!this.props.node.comment.banned &&
+                          <li className="list-inline-item">
+                            <span class="pointer" onClick={linkEvent(this, this.addAdmin)}>{`${this.isAdmin ? 'remove' : 'appoint'} as admin`}</span>
+                          </li>
+                        }
+                      </>
                     }
-                  </span>
+                  </>
                 }
                 <li className="list-inline-item">
                   <Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`} target="_blank">link</Link>
@@ -133,22 +167,35 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           </form>
         }
         {this.state.showBanDialog && 
-        <form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
-          <div class="form-group row">
-            <label class="col-form-label">Reason</label>
-            <input type="text" class="form-control mr-2" placeholder="Optional" value={this.state.banReason} onInput={linkEvent(this, this.handleModBanReasonChange)} />
-          </div>
-          <div class="form-group row">
-            <label class="col-form-label">Expires</label>
-            <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} />
-          </div>
-          <div class="form-group row">
-            <button type="submit" class="btn btn-secondary">Ban {this.props.node.comment.creator_name}</button>
-          </div>
-        </form>
+          <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
+            <div class="form-group row">
+              <label class="col-form-label">Reason</label>
+              <input type="text" class="form-control mr-2" placeholder="Optional" value={this.state.banReason} onInput={linkEvent(this, this.handleModBanReasonChange)} />
+            </div>
+            <div class="form-group row">
+              <label class="col-form-label">Expires</label>
+              <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} />
+            </div>
+            <div class="form-group row">
+              <button type="submit" class="btn btn-secondary">Ban {this.props.node.comment.creator_name}</button>
+            </div>
+          </form>
+        }
+        {this.state.showReply && 
+          <CommentForm 
+            node={node} 
+            onReplyCancel={this.handleReplyCancel} 
+            disabled={this.props.locked} 
+          />
+        }
+        {this.props.node.children && 
+          <CommentNodes 
+            nodes={this.props.node.children} 
+            locked={this.props.locked} 
+            moderators={this.props.moderators}
+            admins={this.props.admins}
+          />
         }
-        {this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} disabled={this.props.locked} />}
-        {this.props.node.children && <CommentNodes nodes={this.props.node.children} locked={this.props.locked} moderators={this.props.moderators}/>}
       </div>
     )
   }
@@ -158,27 +205,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   }
 
   get canMod(): boolean {
+    let adminsThenMods = this.props.admins.map(a => a.id)
+    .concat(this.props.moderators.map(m => m.user_id));
 
-    // You can do moderator actions only on the mods added after you.
-    if (UserService.Instance.user) {
-      let modIds = this.props.moderators.map(m => m.user_id);
-      let yourIndex = modIds.findIndex(id => id == UserService.Instance.user.id);
-      if (yourIndex == -1) {
-        return false;
-      } else { 
-        console.log(modIds);
-        modIds = modIds.slice(0, yourIndex+1); // +1 cause you cant mod yourself
-        console.log(modIds);
-        return !modIds.includes(this.props.node.comment.creator_id);
-      }
-    } else {
-      return false;
-    }
-
+    return canMod(UserService.Instance.user, adminsThenMods, this.props.node.comment.creator_id);
   }
 
   get isMod(): boolean {
-    return this.props.moderators.map(m => m.user_id).includes(this.props.node.comment.creator_id);
+    return isMod(this.props.moderators.map(m => m.user_id), this.props.node.comment.creator_id);
+  }
+
+  get isAdmin(): boolean {
+    return isMod(this.props.admins.map(a => a.id), this.props.node.comment.creator_id);
+  }
+
+  get canAdmin(): boolean {
+    return canMod(UserService.Instance.user, this.props.admins.map(a => a.id), this.props.node.comment.creator_id);
   }
 
   handleReplyClick(i: CommentNode) {
@@ -193,16 +235,27 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
   handleDeleteClick(i: CommentNode) {
     let deleteForm: CommentFormI = {
-      content: "*deleted*",
+      content: '*deleted*',
       edit_id: i.props.node.comment.id,
       creator_id: i.props.node.comment.creator_id,
       post_id: i.props.node.comment.post_id,
       parent_id: i.props.node.comment.parent_id,
+      removed: i.props.node.comment.removed,
       auth: null
     };
     WebSocketService.Instance.editComment(deleteForm);
   }
 
+  handleSaveCommentClick(i: CommentNode) {
+    let saved = (i.props.node.comment.saved == undefined) ? true : !i.props.node.comment.saved;
+    let form: SaveCommentForm = {
+      comment_id: i.props.node.comment.id,
+      save: saved
+    };
+
+    WebSocketService.Instance.saveComment(form);
+  }
+
   handleReplyCancel() {
     this.state.showReply = false;
     this.state.showEdit = false;
@@ -257,8 +310,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.setState(i.state);
   }
 
+  handleModBanFromCommunityShow(i: CommentNode) {
+    i.state.showBanDialog = true;
+    i.state.banType = BanType.Community;
+    i.setState(i.state);
+  }
+
   handleModBanShow(i: CommentNode) {
     i.state.showBanDialog = true;
+    i.state.banType = BanType.Site;
     i.setState(i.state);
   }
 
@@ -272,16 +332,42 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.setState(i.state);
   }
 
+  handleModBanFromCommunitySubmit(i: CommentNode) {
+    i.state.banType = BanType.Community;
+    i.setState(i.state);
+    i.handleModBanBothSubmit(i);
+  }
+
   handleModBanSubmit(i: CommentNode) {
+    i.state.banType = BanType.Site;
+    i.setState(i.state);
+    i.handleModBanBothSubmit(i);
+  }
+
+  handleModBanBothSubmit(i: CommentNode) {
     event.preventDefault();
-    let form: BanFromCommunityForm = {
-      user_id: i.props.node.comment.creator_id,
-      community_id: i.props.node.comment.community_id,
-      ban: !i.props.node.comment.banned,
-      reason: i.state.banReason,
-      expires: getUnixTime(i.state.banExpires),
-    };
-    WebSocketService.Instance.banFromCommunity(form);
+
+    console.log(BanType[i.state.banType]);
+    console.log(i.props.node.comment.banned);
+
+    if (i.state.banType == BanType.Community) {
+      let form: BanFromCommunityForm = {
+        user_id: i.props.node.comment.creator_id,
+        community_id: i.props.node.comment.community_id,
+        ban: !i.props.node.comment.banned_from_community,
+        reason: i.state.banReason,
+        expires: getUnixTime(i.state.banExpires),
+      };
+      WebSocketService.Instance.banFromCommunity(form);
+    } else {
+      let form: BanUserForm = {
+        user_id: i.props.node.comment.creator_id,
+        ban: !i.props.node.comment.banned,
+        reason: i.state.banReason,
+        expires: getUnixTime(i.state.banExpires),
+      };
+      WebSocketService.Instance.banUser(form);
+    }
 
     i.state.showBanDialog = false;
     i.setState(i.state);
@@ -296,4 +382,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     WebSocketService.Instance.addModToCommunity(form);
     i.setState(i.state);
   }
+
+  addAdmin(i: CommentNode) {
+    let form: AddAdminForm = {
+      user_id: i.props.node.comment.creator_id,
+      added: !i.isAdmin,
+    };
+    WebSocketService.Instance.addAdmin(form);
+    i.setState(i.state);
+  }
 }
diff --git a/ui/src/components/comment-nodes.tsx b/ui/src/components/comment-nodes.tsx
index 498c69b8..abbb1719 100644
--- a/ui/src/components/comment-nodes.tsx
+++ b/ui/src/components/comment-nodes.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'inferno';
-import { CommentNode as CommentNodeI, CommunityUser } from '../interfaces';
+import { CommentNode as CommentNodeI, CommunityUser, UserView } from '../interfaces';
 import { CommentNode } from './comment-node';
 
 interface CommentNodesState {
@@ -8,6 +8,7 @@ interface CommentNodesState {
 interface CommentNodesProps {
   nodes: Array<CommentNodeI>;
   moderators?: Array<CommunityUser>;
+  admins?: Array<UserView>;
   noIndent?: boolean;
   viewOnly?: boolean;
   locked?: boolean;
@@ -27,7 +28,9 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
             noIndent={this.props.noIndent} 
             viewOnly={this.props.viewOnly} 
             locked={this.props.locked} 
-            moderators={this.props.moderators}/>
+            moderators={this.props.moderators}
+            admins={this.props.admins}
+            />
         )}
       </div>
     )
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 86800684..9145c1cd 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -53,9 +53,9 @@ export class Communities extends Component<any, CommunitiesState> {
     return (
       <div class="container">
         {this.state.loading ? 
-        <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
+        <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
         <div>
-          <h4>Communities</h4>
+          <h5>Communities</h5>
           <div class="table-responsive">
             <table id="community_table" class="table table-sm table-hover">
               <thead class="pointer">
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index cd95f991..6271bde5 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -60,14 +60,14 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         {this.state.loading ? 
-        <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
+        <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
         <div class="row">
           <div class="col-12 col-md-9">
-            <h4>{this.state.community.title}
+            <h5>{this.state.community.title}
             {this.state.community.removed &&
               <small className="ml-2 text-muted font-italic">removed</small>
             }
-          </h4>
+          </h5>
             <PostListings communityId={this.state.communityId} />
           </div>
           <div class="col-12 col-md-3">
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index 5f397411..0e806dbb 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -13,7 +13,7 @@ export class CreateCommunity extends Component<any, any> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 mb-4">
-            <h4>Create Forum</h4>
+            <h5>Create Forum</h5>
             <CommunityForm onCreate={this.handleCommunityCreate}/>
           </div>
         </div>
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index 041ffd17..7d2f1dd4 100644
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -13,7 +13,7 @@ export class CreatePost extends Component<any, any> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 mb-4">
-            <h4>Create a Post</h4>
+            <h5>Create a Post</h5>
             <PostForm onCreate={this.handlePostCreate}/>
           </div>
         </div>
diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx
index 4d0b22d0..6d15a382 100644
--- a/ui/src/components/login.tsx
+++ b/ui/src/components/login.tsx
@@ -67,7 +67,7 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h4>Login</h4>
+          <h5>Login</h5>
           <div class="form-group row">
             <label class="col-sm-2 col-form-label">Email or Username</label>
             <div class="col-sm-10">
@@ -94,7 +94,7 @@ export class Login extends Component<any, State> {
   registerForm() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h4>Sign Up</h4>
+        <h5>Sign Up</h5>
         <div class="form-group row">
           <label class="col-sm-2 col-form-label">Username</label>
           <div class="col-sm-10">
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 0b5923c0..01c70f94 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -78,12 +78,12 @@ export class Main extends Component<any, State> {
           </div>
           <div class="col-12 col-md-4">
             {this.state.loading ? 
-            <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
+            <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
             <div>
               {this.trendingCommunities()}
               {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && 
               <div>
-                <h4>Subscribed forums</h4>
+                <h5>Subscribed forums</h5>
                 <ul class="list-inline"> 
                   {this.state.subscribedCommunities.map(community =>
                     <li class="list-inline-item"><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
@@ -103,7 +103,7 @@ export class Main extends Component<any, State> {
   trendingCommunities() {
     return (
       <div>
-        <h4>Trending <Link class="text-white" to="/communities">forums</Link></h4> 
+        <h5>Trending <Link class="text-white" to="/communities">forums</Link></h5> 
         <ul class="list-inline"> 
           {this.state.trendingCommunities.map(community =>
             <li class="list-inline-item"><Link to={`/community/${community.id}`}>{community.name}</Link></li>
@@ -116,7 +116,7 @@ export class Main extends Component<any, State> {
   landing() {
     return (
       <div>
-        <h4>{`${this.state.site.site.name}`}</h4>
+        <h5>{`${this.state.site.site.name}`}</h5>
         <ul class="my-1 list-inline">
           <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_users} Users</li>
           <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_posts} Posts</li>
@@ -136,10 +136,10 @@ export class Main extends Component<any, State> {
             <hr />
           </div>
         }
-        <h4>Welcome to 
+        <h5>Welcome to 
           <svg class="icon mx-2"><use xlinkHref="#icon-mouse"></use></svg>
           <a href={repoUrl}>Lemmy<sup>Beta</sup></a>
-        </h4>
+        </h5>
         <p>Lemmy is a <a href="https://en.wikipedia.org/wiki/Link_aggregation">link aggregator</a> / reddit alternative, intended to work in the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>.</p>
         <p>Its self-hostable, has live-updating comment threads, and is tiny (<code>~80kB</code>). Federation into the ActivityPub network is on the roadmap.</p>
         <p>This is a <b>very early beta version</b>, and a lot of features are currently broken or missing.</p>
diff --git a/ui/src/components/modlog.tsx b/ui/src/components/modlog.tsx
index 56b08a7e..7145b4f6 100644
--- a/ui/src/components/modlog.tsx
+++ b/ui/src/components/modlog.tsx
@@ -9,7 +9,7 @@ import { MomentTime } from './moment-time';
 import * as moment from 'moment';
 
 interface ModlogState {
-  combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModRemoveCommunity}>,
+  combined: Array<{type_: string, data: ModRemovePost | ModLockPost | ModRemoveCommunity | ModAdd | ModBan}>,
   communityId?: number,
   communityName?: string,
   page: number;
@@ -51,6 +51,8 @@ export class Modlog extends Component<any, ModlogState> {
     let removed_communities = addTypeInfo(res.removed_communities, "removed_communities");
     let banned_from_community = addTypeInfo(res.banned_from_community, "banned_from_community");
     let added_to_community = addTypeInfo(res.added_to_community, "added_to_community");
+    let added = addTypeInfo(res.added, "added");
+    let banned = addTypeInfo(res.banned, "banned");
     this.state.combined = [];
 
     this.state.combined.push(...removed_posts);
@@ -59,9 +61,11 @@ export class Modlog extends Component<any, ModlogState> {
     this.state.combined.push(...removed_communities);
     this.state.combined.push(...banned_from_community);
     this.state.combined.push(...added_to_community);
+    this.state.combined.push(...added);
+    this.state.combined.push(...banned);
 
     if (this.state.communityId && this.state.combined.length > 0) {
-      this.state.communityName = this.state.combined[0].data.community_name;
+      this.state.communityName = (this.state.combined[0].data as ModRemovePost).community_name;
     }
 
     // Sort them by time
@@ -95,13 +99,14 @@ export class Modlog extends Component<any, ModlogState> {
                 <>
                   {(i.data as ModRemoveComment).removed? 'Removed' : 'Restored'} 
                   <span> Comment <Link to={`/post/${(i.data as ModRemoveComment).post_id}/comment/${(i.data as ModRemoveComment).comment_id}`}>{(i.data as ModRemoveComment).comment_content}</Link></span>
+                  <span> by <Link to={`/user/${(i.data as ModRemoveComment).comment_user_id}`}>{(i.data as ModRemoveComment).comment_user_name}</Link></span>
                   <div>{(i.data as ModRemoveComment).reason && ` reason: ${(i.data as ModRemoveComment).reason}`}</div>
                 </>
               }
               {i.type_ == 'removed_communities' && 
                 <>
                   {(i.data as ModRemoveCommunity).removed ? 'Removed' : 'Restored'} 
-                  <span> Community <Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span>
+                  <span> Community <Link to={`/community/${(i.data as ModRemoveCommunity).community_id}`}>{(i.data as ModRemoveCommunity).community_name}</Link></span>
                   <div>{(i.data as ModRemoveCommunity).reason && ` reason: ${(i.data as ModRemoveCommunity).reason}`}</div>
                   <div>{(i.data as ModRemoveCommunity).expires && ` expires: ${moment.utc((i.data as ModRemoveCommunity).expires).fromNow()}`}</div>
                 </>
@@ -110,6 +115,8 @@ export class Modlog extends Component<any, ModlogState> {
                 <>
                   <span>{(i.data as ModBanFromCommunity).banned ? 'Banned ' : 'Unbanned '} </span>
                   <span><Link to={`/user/${(i.data as ModBanFromCommunity).other_user_id}`}>{(i.data as ModBanFromCommunity).other_user_name}</Link></span>
+                  <span> from the community </span>
+                  <span><Link to={`/community/${(i.data as ModBanFromCommunity).community_id}`}>{(i.data as ModBanFromCommunity).community_name}</Link></span>
                   <div>{(i.data as ModBanFromCommunity).reason && ` reason: ${(i.data as ModBanFromCommunity).reason}`}</div>
                   <div>{(i.data as ModBanFromCommunity).expires && ` expires: ${moment.utc((i.data as ModBanFromCommunity).expires).fromNow()}`}</div>
                 </>
@@ -119,12 +126,27 @@ export class Modlog extends Component<any, ModlogState> {
                   <span>{(i.data as ModAddCommunity).removed ? 'Removed ' : 'Appointed '} </span>
                   <span><Link to={`/user/${(i.data as ModAddCommunity).other_user_id}`}>{(i.data as ModAddCommunity).other_user_name}</Link></span>
                   <span> as a mod to the community </span>
-                  <span><Link to={`/community/${i.data.community_id}`}>{i.data.community_name}</Link></span>
+                  <span><Link to={`/community/${(i.data as ModAddCommunity).community_id}`}>{(i.data as ModAddCommunity).community_name}</Link></span>
+                </>
+              }
+              {i.type_ == 'banned' && 
+                <>
+                  <span>{(i.data as ModBan).banned ? 'Banned ' : 'Unbanned '} </span>
+                  <span><Link to={`/user/${(i.data as ModBan).other_user_id}`}>{(i.data as ModBan).other_user_name}</Link></span>
+                  <div>{(i.data as ModBan).reason && ` reason: ${(i.data as ModBan).reason}`}</div>
+                  <div>{(i.data as ModBan).expires && ` expires: ${moment.utc((i.data as ModBan).expires).fromNow()}`}</div>
+                </>
+              }
+              {i.type_ == 'added' && 
+                <>
+                  <span>{(i.data as ModAdd).removed ? 'Removed ' : 'Appointed '} </span>
+                  <span><Link to={`/user/${(i.data as ModAdd).other_user_id}`}>{(i.data as ModAdd).other_user_name}</Link></span>
+                  <span> as an admin </span>
                 </>
               }
             </td>
           </tr>
-                     )
+                                )
         }
 
       </tbody>
@@ -136,12 +158,12 @@ export class Modlog extends Component<any, ModlogState> {
     return (
       <div class="container">
         {this.state.loading ? 
-        <h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : 
+        <h5 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
         <div>
-          <h4>
+          <h5>
             {this.state.communityName && <Link className="text-white" to={`/community/${this.state.communityId}`}>/f/{this.state.communityName} </Link>}
             <span>Modlog</span>
-          </h4>
+          </h5>
           <div class="table-responsive">
             <table id="modlog_table" class="table table-sm table-hover">
               <thead class="pointer">
@@ -183,7 +205,7 @@ export class Modlog extends Component<any, ModlogState> {
     i.setState(i.state);
     i.refetch();
   }
-  
+
   refetch(){
     let modlogForm: GetModlogForm = {
       community_id: this.state.communityId,
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index ae693825..be98912e 100644
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -64,16 +64,22 @@ export class Navbar extends Component<any, NavbarState> {
           </ul>
           <ul class="navbar-nav ml-auto mr-2">
             {this.state.isLoggedIn ? 
-            <li className={`nav-item dropdown ${this.state.expandUserDropdown && 'show'}`}>
-              <a class="pointer nav-link dropdown-toggle" onClick={linkEvent(this, this.expandUserDropdown)} role="button">
-                {UserService.Instance.user.username}
-              </a>
-              <div className={`dropdown-menu dropdown-menu-right ${this.state.expandUserDropdown && 'show'}`}>
-                <a role="button" class="dropdown-item pointer" onClick={linkEvent(this, this.handleOverviewClick)}>Overview</a>
-                <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a>
-              </div>
-            </li> : 
-            <Link class="nav-link" to="/login">Login / Sign up</Link>
+            <>
+              <li className="nav-item">
+                <Link class="nav-link" to="/communities">🖂</Link>
+              </li>
+              <li className={`nav-item dropdown ${this.state.expandUserDropdown && 'show'}`}>
+                <a class="pointer nav-link dropdown-toggle" onClick={linkEvent(this, this.expandUserDropdown)} role="button">
+                  {UserService.Instance.user.username}
+                </a>
+                <div className={`dropdown-menu dropdown-menu-right ${this.state.expandUserDropdown && 'show'}`}>
+                  <a role="button" class="dropdown-item pointer" onClick={linkEvent(this, this.handleOverviewClick)}>Overview</a>
+                  <a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a>
+                </div>
+              </li> 
+            </>
+              : 
+              <Link class="nav-link" to="/login">Login / Sign up</Link>
             }
           </ul>
         </div>
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 1a52bf79..da375aee 100644
--- a/ui/src/components/post-listing.tsx
+++ b/