Merge branch 'main' into chore/sass-cleanup

src/shared/components/app/navbar.tsx

@@ -224,11 +224,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             )}
             <li className="nav-item">
               <a
-                className="nav-link"
+                className="nav-link d-inline-flex align-items-center d-md-inline-block"
                 title={i18n.t("support_lemmy")}
                 href={donateLemmyUrl}
               >
                 <Icon icon="heart" classes="small" />
+                <span className="d-inline ml-1 d-md-none ml-md-0">
+                  {i18n.t("support_lemmy")}
+                </span>
               </a>
             </li>
           </ul>
@@ -236,22 +239,28 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             <li id="navSearch" className="nav-item">
               <NavLink
                 to="/search"
-                className="nav-link"
+                className="nav-link d-inline-flex align-items-center d-md-inline-block"
                 title={i18n.t("search")}
                 onMouseUp={linkEvent(this, handleCollapseClick)}
               >
                 <Icon icon="search" />
+                <span className="d-inline ml-1 d-md-none ml-md-0">
+                  {i18n.t("search")}
+                </span>
               </NavLink>
             </li>
             {amAdmin() && (
               <li id="navAdmin" className="nav-item">
                 <NavLink
                   to="/admin"
-                  className="nav-link"
+                  className="nav-link d-inline-flex align-items-center d-md-inline-block"
                   title={i18n.t("admin_settings")}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
                   <Icon icon="settings" />
+                  <span className="d-inline ml-1 d-md-none ml-md-0">
+                    {i18n.t("admin_settings")}
+                  </span>
                 </NavLink>
               </li>
             )}
@@ -259,7 +268,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               <>
                 <li id="navMessages" className="nav-item">
                   <NavLink
-                    className="nav-link"
+                    className="nav-link d-inline-flex align-items-center d-md-inline-block"
                     to="/inbox"
                     title={i18n.t("unread_messages", {
                       count: Number(this.unreadInboxCount),
@@ -268,6 +277,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     <Icon icon="bell" />
+                    <span className="badge badge-light d-inline ml-1 d-md-none ml-md-0">
+                      {i18n.t("unread_messages", {
+                        count: Number(this.unreadInboxCount),
+                        formattedCount: numToSI(this.unreadInboxCount),
+                      })}
+                    </span>
                     {this.unreadInboxCount > 0 && (
                       <span className="mx-1 badge badge-light">
                         {numToSI(this.unreadInboxCount)}
@@ -278,7 +293,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 {this.moderatesSomething && (
                   <li id="navModeration" className="nav-item">
                     <NavLink
-                      className="nav-link"
+                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
                       to="/reports"
                       title={i18n.t("unread_reports", {
                         count: Number(this.unreadReportCount),
@@ -287,6 +302,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="shield" />
+                      <span className="badge badge-light d-inline ml-1 d-md-none ml-md-0">
+                        {i18n.t("unread_reports", {
+                          count: Number(this.unreadReportCount),
+                          formattedCount: numToSI(this.unreadReportCount),
+                        })}
+                      </span>
                       {this.unreadReportCount > 0 && (
                         <span className="mx-1 badge badge-light">
                           {numToSI(this.unreadReportCount)}
@@ -299,7 +320,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   <li id="navApplications" className="nav-item">
                     <NavLink
                       to="/registration_applications"
-                      className="nav-link"
+                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
                       title={i18n.t("unread_registration_applications", {
                         count: Number(this.unreadApplicationCount),
                         formattedCount: numToSI(this.unreadApplicationCount),
@@ -307,6 +328,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="clipboard" />
+                      <span className="badge badge-light d-inline ml-1 d-md-none ml-md-0">
+                        {i18n.t("unread_registration_applications", {
+                          count: Number(this.unreadApplicationCount),
+                          formattedCount: numToSI(this.unreadApplicationCount),
+                        })}
+                      </span>
                       {this.unreadApplicationCount > 0 && (
                         <span className="mx-1 badge badge-light">
                           {numToSI(this.unreadApplicationCount)}

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

@@ -210,7 +210,7 @@ export class MarkdownTextArea extends Component<
                 <textarea
                   id={this.id}
                   className={classNames(
-                    "form-control border-0 rounded-bottom",
+                    "form-control border-0 rounded-top-0 rounded-bottom",
                     {
                       "d-none": this.state.previewMode,
                     }

src/shared/components/person/person-details.tsx

@@ -107,16 +107,6 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
     setupTippy();
   }
 
-  // TODO wut?
-  // componentDidUpdate(lastProps: UserDetailsProps) {
-  //   for (const key of Object.keys(lastProps)) {
-  //     if (lastProps[key] !== this.props[key]) {
-  //       this.fetchUserData();
-  //       break;
-  //     }
-  //   }
-  // }
-
   render() {
     return (
       <div>

src/shared/components/person/person-listing.tsx

@@ -73,10 +73,14 @@ export class PersonListing extends Component<PersonListingProps, any> {
     const avatar = this.props.person.avatar;
     return (
       <>
-        {avatar &&
+        {!this.props.hideAvatar &&
-          !this.props.hideAvatar &&
           !this.props.person.banned &&
-          showAvatars() && <PictrsImage src={avatar} icon />}
+          showAvatars() && (
+            <PictrsImage
+              src={avatar ?? "/static/assets/icons/icon-96x96.png"}
+              icon
+            />
+          )}
         <span>{displayName}</span>
       </>
     );