Make it more obvious when a community is locked (#2329)

* Make it more obvious when a community is locked

* Add translations

---------

Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>

.eslintignore

@@ -5,3 +5,4 @@ src/api_tests
 **/*.css
 **/*.scss
 **/*.svg
+src/shared/translations/**

lemmy-translations

@@ -1 +1 @@
-Subproject commit 3c217c609aa8826fc725f708221c8b3eb825f41a
+Subproject commit c3e61706e2ff7977db83e964e3010f72cad5e408

src/shared/components/community/community.tsx

@@ -95,12 +95,12 @@ import { DataTypeSelect } from "../common/data-type-select";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { SortSelect } from "../common/sort-select";
-import { Sidebar } from "../community/sidebar";
 import { SiteSidebar } from "../home/site-sidebar";
 import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 import { PaginatorCursor } from "../common/paginator-cursor";
 import { getHttpBaseInternal } from "../../utils/env";
+import { Sidebar } from "./sidebar";
 
 type CommunityData = RouteDataResponse<{
   communityRes: GetCommunityResponse;
@@ -503,7 +503,21 @@ export class Community extends Component<
       community && (
         <div className="mb-2">
           <BannerIconHeader banner={community.banner} icon={community.icon} />
-          <h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
+          <div>
+            <h1
+              className="h4 mb-0 overflow-wrap-anywhere d-inline"
+              data-tippy-content={
+                community.posting_restricted_to_mods
+                  ? I18NextService.i18n.t("community_locked")
+                  : ""
+              }
+            >
+              {community.title}
+            </h1>
+            {community.posting_restricted_to_mods && (
+              <Icon icon="lock" inline classes="text-danger fs-4 ms-2" />
+            )}
+          </div>
           <CommunityLink
             community={community}
             realLink

src/shared/components/community/sidebar.tsx

@@ -122,9 +122,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   sidebar() {
-    const myUSerInfo = UserService.Instance.myUserInfo;
+    const myUserInfo = UserService.Instance.myUserInfo;
     const {
-      community: { name, actor_id },
+      community: { name, actor_id, id, posting_restricted_to_mods },
+      counts,
     } = this.props.community_view;
     return (
       <aside className="mb-3">
@@ -140,8 +141,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 loading={this.state.followCommunityLoading}
               />
               {this.canPost && this.createPost()}
-              {myUSerInfo && this.blockCommunity()}
+              {myUserInfo && this.blockCommunity()}
-              {!myUSerInfo && (
+              {!myUserInfo && (
                 <div className="alert alert-info" role="alert">
                   <T
                     i18nKey="community_not_logged_in_alert"
@@ -158,11 +159,23 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           </section>
           <section id="sidebarInfo" className="card border-secondary mb-3">
             <div className="card-body">
-              {this.description()}
+              {posting_restricted_to_mods && (
-              <Badges
+                <div
-                communityId={this.props.community_view.community.id}
+                  className="alert alert-warning text-sm-start text-xs-center"
-                counts={this.props.community_view.counts}
+                  role="alert"
+                >
+                  <Icon
+                    icon="lock"
+                    inline
+                    classes="me-sm-2 mx-auto d-sm-inline d-block"
                   />
+                  <T i18nKey="community_locked_message" className="d-inline">
+                    #<strong className="fw-bold">#</strong>#
+                  </T>
+                </div>
+              )}
+              {this.description()}
+              <Badges communityId={id} counts={counts} />
               {this.mods()}
             </div>
           </section>