Community visibility setting (#2376)

* Update deps

* Add community visibility to community form for editing and creating

* Add translations

* Make visibility display

* Add translations

---------

Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>
Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

lemmy-translations

@@ -1 +1 @@
-Subproject commit b4cb42fbdd63dece5de2abf7f33249e489166501
+Subproject commit 62c8418021bc39543c87b4ae3dcf2419d13f61e0

src/assets/symbols.svg

@@ -279,5 +279,18 @@
       <path d="M11 21C4 21 4 18 4 18V12" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       <path d="M19 22V16M19 16L22 19M19 16L16 19" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
+    <symbol id="icon-globe" viewBox="0 0 256 256">
+      <rect width="256" height="256" fill="none"/>
+      <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <path d="M88,128c0,37.46,13.33,70.92,34.28,93.49a7.77,7.77,0,0,0,11.44,0C154.67,198.92,168,165.46,168,128s-13.33-70.92-34.28-93.49a7.77,7.77,0,0,0-11.44,0C101.33,57.08,88,90.54,88,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="37.46" y1="96" x2="218.54" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="37.46" y1="160" x2="218.54" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    </symbol>
+    <symbol id="icon-house" viewBox="0 0 256 256">
+      <rect width="256" height="256" fill="none"/>
+      <path d="M216,216V115.54a8,8,0,0,0-2.62-5.92l-80-75.54a8,8,0,0,0-10.77,0l-80,75.54A8,8,0,0,0,40,115.54V216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <line x1="16" y1="216" x2="240" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+      <path d="M152,216V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+    </symbol>
   </defs>
 </svg>

src/shared/components/community/community-form.tsx

@@ -3,6 +3,7 @@ import { Component, linkEvent } from "inferno";
 import { Prompt } from "inferno-router";
 import {
   CommunityView,
+  CommunityVisibility,
   CreateCommunity,
   EditCommunity,
   Language,
@@ -34,6 +35,7 @@ interface CommunityFormState {
     nsfw?: boolean;
     posting_restricted_to_mods?: boolean;
     discussion_languages?: number[];
+    visibilty?: CommunityVisibility;
   };
   submitted: boolean;
 }
@@ -78,6 +80,7 @@ export class CommunityForm extends Component<
           banner: cv.community.banner,
           posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
           discussion_languages: this.props.communityLanguages,
+          visibilty: cv.community.visibility,
         },
       };
     }
@@ -217,6 +220,24 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
+        <div className="mb-3 row">
+          <legend className="col-form-label col-6 pt-0">
+            {I18NextService.i18n.t("community_visibility")}
+          </legend>
+          <div className="col-6">
+            <select
+              className="form-select position-static"
+              id="community-visibility"
+              onChange={linkEvent(this, this.handleCommunityVisibilityChange)}
+              value={this.state.form.visibilty ?? "Public"}
+            >
+              <option value="Public">{I18NextService.i18n.t("public")}</option>
+              <option value="LocalOnly">
+                {I18NextService.i18n.t("local_only")}
+              </option>
+            </select>
+          </div>
+        </div>
         <div className="mb-3 row">
           <legend className="col-form-label col-6 pt-0">
             {I18NextService.i18n.t("only_mods_can_post_in_community")}
@@ -291,6 +312,7 @@ export class CommunityForm extends Component<
         nsfw: cForm.nsfw,
         posting_restricted_to_mods: cForm.posting_restricted_to_mods,
         discussion_languages: cForm.discussion_languages,
+        visibility: cForm.visibilty,
       });
     } else {
       if (cForm.title && cForm.name) {
@@ -303,6 +325,7 @@ export class CommunityForm extends Component<
           nsfw: cForm.nsfw,
           posting_restricted_to_mods: cForm.posting_restricted_to_mods,
           discussion_languages: cForm.discussion_languages,
+          visibility: cForm.visibilty,
         });
       }
     }
@@ -330,6 +353,10 @@ export class CommunityForm extends Component<
     );
   }
 
+  handleCommunityVisibilityChange(i: CommunityForm, event: any) {
+    i.setState(s => ((s.form.visibilty = event.target.value), s));
+  }
+
   handleCancel(i: CommunityForm) {
     i.props.onCancel?.();
   }

src/shared/components/community/sidebar.tsx

@@ -124,7 +124,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   sidebar() {
     const myUserInfo = UserService.Instance.myUserInfo;
     const {
-      community: { name, actor_id, id, posting_restricted_to_mods },
+      community: { name, actor_id, id, posting_restricted_to_mods, visibility },
       counts,
     } = this.props.community_view;
     return (
@@ -175,6 +175,30 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </div>
               )}
               {this.description()}
+              <div>
+                <div className="fw-semibold mb-1">
+                  <span className="align-middle">
+                    {I18NextService.i18n.t("community_visibility")}:&nbsp;
+                  </span>
+                  <span className="fs-5 fw-medium align-middle">
+                    {I18NextService.i18n.t(
+                      visibility === "Public" ? "public" : "local_only",
+                    )}
+                    <Icon
+                      icon={visibility === "Public" ? "globe" : "house"}
+                      inline
+                      classes="ms-1 text-secondary"
+                    />
+                  </span>
+                </div>
+                <p>
+                  {I18NextService.i18n.t(
+                    visibility === "Public"
+                      ? "public_blurb"
+                      : "local_only_blurb",
+                  )}
+                </p>
+              </div>
               <Badges communityId={id} counts={counts} />
               {this.mods()}
             </div>