From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 00:35:44 +0000 (-0400)
Subject: Merge remote-tracking branch 'origin/main' into feat/add-badges-common-component
X-Git-Url: http://these/git/%7Bthis.props.icon%7D?a=commitdiff_plain;h=8bbb6c9652bbbfda1ca9cc41592c413549f16c75;p=lemmy-ui.git

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
---

8bbb6c9652bbbfda1ca9cc41592c413549f16c75
diff --cc src/shared/components/common/badges.tsx
index 188d92c,0000000..4427895
mode 100644,000000..100644
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@@ -1,113 -1,0 +1,106 @@@
 +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;
-   online: number;
 +  community_view?: CommunityView;
 +}
 +
 +const isCommunityAggregates = (
 +  counts: CommunityAggregates | SiteAggregates
 +): counts is CommunityAggregates => {
 +  return "subscribers" in counts;
 +};
 +
- export const Badges = ({ counts, community_view, online }: BadgesProps) => {
++export const Badges = ({ counts, community_view }: BadgesProps) => {
 +  return (
 +    <ul className="my-1 list-inline">
-       <li className="list-inline-item badge badge-secondary">
-         {i18n.t("number_online", {
-           count: online,
-           formattedCount: numToSI(online),
-         })}
-       </li>
 +      <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}`}
++          to={`/modlog/${!!community_view ?? community_view?.community.id}`}
 +        >
 +          {i18n.t("modlog")}
 +        </Link>
 +      </li>
 +    </ul>
 +  );
 +};
diff --cc src/shared/components/community/sidebar.tsx
index 7023d13,f4c7452..711ab5e
--- a/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 5f32e59,8603c36..66a48ca
--- a/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>
      );