Merge branch 'main' into default-pfp

src/assets/css/themes/darkly-red.scss

@@ -1,2 +1,2 @@
 @import "variables.darkly-red";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";

src/assets/css/themes/darkly.scss

@@ -1,2 +1,2 @@
 @import "variables.darkly";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";

src/assets/css/themes/litely-red.scss

@@ -1,2 +1,2 @@
 @import "variables.litely-red";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";

src/assets/css/themes/litely.scss

@@ -1,2 +1,2 @@
 @import "variables.litely";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";

src/shared/components/app/styles.scss

@@ -1,6 +1,6 @@
 // Custom css
-@import "../../../../node_modules/tributejs/dist/tribute.css";
-@import "../../../../node_modules/toastify-js/src/toastify.css";
-@import "../../../../node_modules/tippy.js/dist/tippy.css";
-@import "../../../../node_modules/bootstrap/dist/css/bootstrap-utilities.min.css";
+@import "tributejs/dist/tribute.css";
+@import "toastify-js/src/toastify.css";
+@import "tippy.js/dist/tippy.css";
+@import "bootstrap/dist/css/bootstrap-utilities.min.css";
 @import "../../../assets/css/main.css";

src/shared/components/common/badges.tsx

@@ -0,0 +1,128 @@
+import { Link } from "inferno-router";
+import {
+  CommunityAggregates,
+  CommunityId,
+  SiteAggregates,
+} from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import { numToSI } from "../../utils";
+
+interface BadgesProps {
+  counts: CommunityAggregates | SiteAggregates;
+  communityId?: CommunityId;
+}
+
+const isCommunityAggregates = (
+  counts: CommunityAggregates | SiteAggregates
+): counts is CommunityAggregates => {
+  return "subscribers" in counts;
+};
+
+const isSiteAggregates = (
+  counts: CommunityAggregates | SiteAggregates
+): counts is SiteAggregates => {
+  return "communities" in counts;
+};
+
+export const Badges = ({ counts, communityId }: BadgesProps) => {
+  return (
+    <ul className="my-1 list-inline">
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_day", {
+          count: Number(counts.users_active_day),
+          formattedCount: numToSI(counts.users_active_day),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_day),
+          formattedCount: numToSI(counts.users_active_day),
+        })}{" "}
+        / {i18n.t("day")}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_week", {
+          count: Number(counts.users_active_week),
+          formattedCount: numToSI(counts.users_active_week),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_week),
+          formattedCount: numToSI(counts.users_active_week),
+        })}{" "}
+        / {i18n.t("week")}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_month", {
+          count: Number(counts.users_active_month),
+          formattedCount: numToSI(counts.users_active_month),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_month),
+          formattedCount: numToSI(counts.users_active_month),
+        })}{" "}
+        / {i18n.t("month")}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
+          count: Number(counts.users_active_half_year),
+          formattedCount: numToSI(counts.users_active_half_year),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_half_year),
+          formattedCount: numToSI(counts.users_active_half_year),
+        })}{" "}
+        / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
+      </li>
+      {isSiteAggregates(counts) && (
+        <>
+          <li className="list-inline-item badge badge-secondary">
+            {i18n.t("number_of_users", {
+              count: Number(counts.users),
+              formattedCount: numToSI(counts.users),
+            })}
+          </li>
+          <li className="list-inline-item badge badge-secondary">
+            {i18n.t("number_of_communities", {
+              count: Number(counts.communities),
+              formattedCount: numToSI(counts.communities),
+            })}
+          </li>
+        </>
+      )}
+      {isCommunityAggregates(counts) && (
+        <li className="list-inline-item badge badge-secondary">
+          {i18n.t("number_of_subscribers", {
+            count: Number(counts.subscribers),
+            formattedCount: numToSI(counts.subscribers),
+          })}
+        </li>
+      )}
+      <li className="list-inline-item badge badge-secondary">
+        {i18n.t("number_of_posts", {
+          count: Number(counts.posts),
+          formattedCount: numToSI(counts.posts),
+        })}
+      </li>
+      <li className="list-inline-item badge badge-secondary">
+        {i18n.t("number_of_comments", {
+          count: Number(counts.comments),
+          formattedCount: numToSI(counts.comments),
+        })}
+      </li>
+      <li className="list-inline-item">
+        <Link
+          className="badge badge-primary"
+          to={`/modlog${communityId ? `/${communityId}` : ""}`}
+        >
+          {i18n.t("modlog")}
+        </Link>
+      </li>
+    </ul>
+  );
+};

src/shared/components/common/markdown-textarea.tsx

@@ -146,18 +146,8 @@ export class MarkdownTextArea extends Component<
         />
         <div className="form-group row">
           <div className="col-12">
-            <div
-              className="rounded bg-light overflow-hidden"
-              style={{
-                border: "1px solid var(--medium-light)",
-              }}
-            >
-              <div
-                className="d-flex flex-wrap"
-                style={{
-                  "border-bottom": "1px solid var(--medium-light)",
-                }}
-              >
+            <div className="rounded bg-light border border-light">
+              <div className="d-flex flex-wrap border-bottom border-light">
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -219,9 +209,12 @@ export class MarkdownTextArea extends Component<
               <div>
                 <textarea
                   id={this.id}
-                  className={classNames("form-control border-0 rounded-0", {
-                    "d-none": this.state.previewMode,
-                  })}
+                  className={classNames(
+                    "form-control border-0 rounded-bottom",
+                    {
+                      "d-none": this.state.previewMode,
+                    }
+                  )}
                   value={this.state.content}
                   onInput={linkEvent(this, this.handleContentChange)}
                   onPaste={linkEvent(this, this.handleImageUploadPaste)}

src/shared/components/community/sidebar.tsx

@@ -24,8 +24,8 @@ import {
   hostname,
   mdToHtml,
   myAuthRequired,
-  numToSI,
 } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { CommunityForm } from "../community/community-form";
@@ -158,7 +158,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           <section id="sidebarInfo" className="card border-secondary mb-3">
             <div className="card-body">
               {this.description()}
-              {this.badges()}
+              <Badges
+                communityId={this.props.community_view.community.id}
+                counts={this.props.community_view.counts}
+              />
               {this.mods()}
             </div>
           </section>
@@ -233,93 +236,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  badges() {
-    const community_view = this.props.community_view;
-    const counts = community_view.counts;
-    return (
-      <ul className="my-1 list-inline">
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_subscribers", {
-            count: Number(counts.subscribers),
-            formattedCount: numToSI(counts.subscribers),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: Number(counts.posts),
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: Number(counts.comments),
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link
-            className="badge badge-primary"
-            to={`/modlog/${this.props.community_view.community.id}`}
-          >
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   mods() {
     return (
       <ul className="list-inline small">

src/shared/components/home/site-sidebar.tsx

@@ -1,8 +1,8 @@
 import { Component, linkEvent } from "inferno";
-import { Link } from "inferno-router";
 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { mdToHtml, numToSI } from "../../utils";
+import { mdToHtml } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
@@ -71,7 +71,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
       <div>
         {site.description && <h6>{site.description}</h6>}
         {site.sidebar && this.siteSidebar(site.sidebar)}
-        {this.props.counts && this.badges(this.props.counts)}
+        {this.props.counts && <Badges counts={this.props.counts} />}
         {this.props.admins && this.admins(this.props.admins)}
       </div>
     );
@@ -96,95 +96,6 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     );
   }
 
-  badges(siteAggregates: SiteAggregates) {
-    const counts = siteAggregates;
-    return (
-      <ul className="my-2 list-inline">
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_users", {
-            count: Number(counts.users),
-            formattedCount: numToSI(counts.users),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_communities", {
-            count: Number(counts.communities),
-            formattedCount: numToSI(counts.communities),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: Number(counts.posts),
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: Number(counts.comments),
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link className="badge badge-primary" to="/modlog">
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   handleCollapseSidebar(i: SiteSidebar) {
     i.setState({ collapsed: !i.state.collapsed });
   }