Merge remote-tracking branch 'origin/main' into feat/add-badges-common-component

* origin/main:
  handle login failures correctly
  wrap login call in try/catch for error handling
  Remove extra div in post sidebar
  Add a class to the more button on a comment node
  Switch navbar classes to ids
  Adding a few more 0.18.0 API changes. (#1324)
  Use aside semantic HTML tag for sidebars
  Use article semantic HTML tag for posts/comments
  Use footer semantic HTML tag
  Adding codeowners.
  Add lemmy-site class for easier detection
  Add ID's and classes to sidebars
  Add clases and ID's to post form/listing
  Add classes to post and comment repy textareas
  Rename markdown-textarea ID's
  Add nav and footer ID's

diff --cc src/shared/components/common/badges.tsx
index 188d92ce8cd891f3ffcac238a7195c922a3b9412,0000000000000000000000000000000000000000..4427895032a14f1c82c9e72624d3bd5469b12ebf
mode 100644,000000..100644
--- 1/src/shared/components/common/badges.tsx
--- /dev/null
+++ b/src/shared/components/common/badges.tsx
@@@ -1,113 -1,0 +1,106 @@@
-   online: number;
 +import { Link } from "inferno-router";
 +import {
 +  CommunityAggregates,
 +  CommunityView,
 +  SiteAggregates,
 +} from "lemmy-js-client";
 +import { i18n } from "../../i18next";
 +import { numToSI } from "../../utils";
 +
 +interface BadgesProps {
 +  counts: CommunityAggregates | SiteAggregates;
- export const Badges = ({ counts, community_view, online }: BadgesProps) => {
 +  community_view?: CommunityView;
 +}
 +
 +const isCommunityAggregates = (
 +  counts: CommunityAggregates | SiteAggregates
 +): counts is CommunityAggregates => {
 +  return "subscribers" in counts;
 +};
 +
-       <li className="list-inline-item badge badge-secondary">
-         {i18n.t("number_online", {
-           count: online,
-           formattedCount: numToSI(online),
-         })}
-       </li>
++export const Badges = ({ counts, community_view }: BadgesProps) => {
 +  return (
 +    <ul className="my-1 list-inline">
-           to={`/modlog/${community_view ?? community_view?.community.id}`}
 +      <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>
 +      {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/${!!community_view ?? community_view?.community.id}`}
 +        >
 +          {i18n.t("modlog")}
 +        </Link>
 +      </li>
 +    </ul>
 +  );
 +};

diff --cc src/shared/components/community/sidebar.tsx
index 7023d133f5582435c3cbb685eb7bfab222ca1cf2,f4c74528bd74a6b3ae57e0cb129d8903d46647b1..711ab5e664df4c9c6bf057d1ea614a7d2b300ab1
--- 1/src/shared/components/community/sidebar.tsx
--- 2/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@@ -132,41 -131,39 +131,42 @@@ export class Sidebar extends Component<
      const myUSerInfo = UserService.Instance.myUserInfo;
      const { name, actor_id } = this.props.community_view.community;
      return (
-       <div>
-         <div className="card border-secondary mb-3">
-           <div className="card-body">
-             {this.communityTitle()}
-             {this.props.editable && this.adminButtons()}
-             {myUSerInfo && this.subscribe()}
-             {this.canPost && this.createPost()}
-             {myUSerInfo && this.blockCommunity()}
-             {!myUSerInfo && (
-               <div className="alert alert-info" role="alert">
-                 <T
-                   i18nKey="community_not_logged_in_alert"
-                   interpolation={{
-                     community: name,
-                     instance: hostname(actor_id),
-                   }}
-                 >
-                   #<code className="user-select-all">#</code>#
-                 </T>
-               </div>
-             )}
-           </div>
-         </div>
-         <div className="card border-secondary mb-3">
-           <div className="card-body">
-             {this.description()}
-             <Badges
-               online={this.props.online}
-               community_view={this.props.community_view}
-               counts={this.props.community_view.counts}
-             />
-             {this.mods()}
-           </div>
+       <aside className="mb-3">
+         <div id="sidebarContainer">
+           <section id="sidebarMain" className="card border-secondary mb-3">
+             <div className="card-body">
+               {this.communityTitle()}
+               {this.props.editable && this.adminButtons()}
+               {myUSerInfo && this.subscribe()}
+               {this.canPost && this.createPost()}
+               {myUSerInfo && this.blockCommunity()}
+               {!myUSerInfo && (
+                 <div className="alert alert-info" role="alert">
+                   <T
+                     i18nKey="community_not_logged_in_alert"
+                     interpolation={{
+                       community: name,
+                       instance: hostname(actor_id),
+                     }}
+                   >
+                     #<code className="user-select-all">#</code>#
+                   </T>
+                 </div>
+               )}
+             </div>
+           </section>
+           <section id="sidebarInfo" className="card border-secondary mb-3">
+             <div className="card-body">
+               {this.description()}
 -              {this.badges()}
++              <Badges
++                community_view={this.props.community_view}
++                counts={this.props.community_view.counts}
++              />
+               {this.mods()}
+             </div>
+           </section>
          </div>
-       </div>
+       </aside>
      );
    }
  

diff --cc src/shared/components/home/site-sidebar.tsx
index 5f32e59e69058917bfde3a00db985f2559886aee,8603c36d935c0f3f98c24261890ce75d8fc31247..66a48ca11e095ec909343a4ba94a170c9eb3baca
--- 1/src/shared/components/home/site-sidebar.tsx
--- 2/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@@ -72,9 -71,7 +71,7 @@@ export class SiteSidebar extends Compon
        <div>
          {site.description && <h6>{site.description}</h6>}
          {site.sidebar && this.siteSidebar(site.sidebar)}
-         {this.props.counts && (
-           <Badges online={this.props.online ?? 1} counts={this.props.counts} />
-         )}
 -        {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>
      );