Merge branch 'main' into large-screen-style

2023-06-25 00:49:29 -04:00 · 2023-06-25 00:49:29 -04:00 · 7ab788589f
commit 7ab788589f
parent 71e997cee4 5b2ef112b3
21 changed files with 172 additions and 154 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -26,9 +26,7 @@
    "jsx-a11y/aria-activedescendant-has-tabindex": 1,
    "jsx-a11y/aria-role": 1,
    "jsx-a11y/click-events-have-key-events": 1,
-    "jsx-a11y/iframe-has-title": 1,
    "jsx-a11y/interactive-supports-focus": 1,
-    "jsx-a11y/no-redundant-roles": 1,
    "jsx-a11y/no-static-element-interactions": 1,
    "jsx-a11y/role-has-required-aria-props": 1,
    "curly": 0,
--- a/package.json
+++ b/package.json
@ -68,7 +68,8 @@
    "isomorphic-cookie": "^1.2.4",
    "jwt-decode": "^3.1.2",
    "lemmy-js-client": "0.18.0-rc.2",
-    "lodash": "^4.17.21",
+    "lodash.isequal": "^4.5.0",
+    "lodash.merge": "^4.6.2",
    "markdown-it": "^13.0.1",
    "markdown-it-container": "^3.0.0",
    "markdown-it-emoji": "^2.0.2",
@ -98,6 +99,7 @@
    "@types/bootstrap": "^5.2.6",
    "@types/express": "^4.17.17",
    "@types/html-to-text": "^9.0.0",
+    "@types/lodash.isequal": "^4.5.6",
    "@types/markdown-it": "^12.2.3",
    "@types/markdown-it-container": "^2.0.5",
    "@types/node": "^20.1.2",
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -124,7 +124,8 @@

 .emoji-picker-container {
  position: absolute;
-  top: 30px;
+  top: 0;
+  left: 50%;
  z-index: 1000;
  transform: translateX(-50%);
 }
--- a/src/shared/components/app/app.tsx
+++ b/src/shared/components/app/app.tsx
@ -33,12 +33,13 @@ export class App extends Component<any, any> {
      <>
        <Provider i18next={I18NextService.i18n}>
          <div id="app" className="lemmy-site">
-            <a
-              className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
+            <button
+              type="button"
+              className="btn btn-text skip-link bg-light position-absolute start-0 z-3"
              onClick={linkEvent(this, this.handleJumpToContent)}
            >
-              ${I18NextService.i18n.t("jump_to_content", "Jump to content")}
-            </a>
+              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+            </button>
            {siteView && (
              <Theme defaultTheme={siteView.local_site.default_theme} />
            )}
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@ -347,10 +347,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                  </li>
                )}
                {person && (
-                  <div id="dropdownUser" className="dropdown">
+                  <li id="dropdownUser" className="dropdown">
                    <button
+                      type="button"
                      className="btn dropdown-toggle"
-                      role="button"
                      aria-expanded="false"
                      data-bs-toggle="dropdown"
                    >
@ -398,7 +398,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                        </button>
                      </li>
                    </ul>
-                  </div>
+                  </li>
                )}
              </>
            ) : (
--- a/src/shared/components/comment/comment-form.tsx
+++ b/src/shared/components/comment/comment-form.tsx
@ -1,4 +1,5 @@
 import { myAuthRequired } from "@utils/app";
+import getUserInterfaceLangId from "@utils/app/user-interface-language";
 import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
@ -40,6 +41,8 @@ export class CommentForm extends Component<CommentFormProps, any> {
          : undefined
        : undefined;

+    const userInterfaceLangId = getUserInterfaceLangId(this.props.allLanguages);
+
    return (
      <div
        className={["comment-form", "mb-3", this.props.containerClass].join(
@ -49,6 +52,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
        {UserService.Instance.myUserInfo ? (
          <MarkdownTextArea
            initialContent={initialContent}
+            initialLanguageId={userInterfaceLangId}
            showLanguage
            buttonTitle={this.buttonTitle}
            finished={this.props.finished}
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@ -49,6 +49,7 @@ import {
  SaveComment,
  TransferCommunity,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { commentTreeMaxDepth } from "../../config";
 import {
  BanType,
@ -198,7 +199,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
  componentWillReceiveProps(
    nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>
  ): void {
-    if (this.props != nextProps) {
+    if (!deepEqual(this.props, nextProps)) {
      this.setState({
        showReply: false,
        showEdit: false,
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@ -12,6 +12,10 @@ interface EmojiPickerState {
  showPicker: boolean;
 }

+function closeEmojiMartOnEsc(i, event): void {
+  event.key === "Escape" && i.setState({ showPicker: false });
+}
+
 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
  private emptyState: EmojiPickerState = {
    showPicker: false,
@ -23,6 +27,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
    this.state = this.emptyState;
    this.handleEmojiClick = this.handleEmojiClick.bind(this);
  }
+
  render() {
    return (
      <span className="emoji-picker">
@ -38,8 +43,8 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {

        {this.state.showPicker && (
          <>
-            <div className="position-relative">
-              <div className="emoji-picker-container position-absolute w-100">
+            <div className="position-relative" role="dialog">
+              <div className="emoji-picker-container">
                <EmojiMart
                  onEmojiClick={this.handleEmojiClick}
                  pickerOptions={{}}
@ -56,9 +61,17 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
    );
  }

+  componentWillUnmount() {
+    document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
+  }
+
  togglePicker(i: EmojiPicker, e: any) {
    e.preventDefault();
    i.setState({ showPicker: !i.state.showPicker });
+
+    i.state.showPicker
+      ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
+      : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
  }

  handleEmojiClick(e: any) {
--- a/src/shared/components/common/icon.tsx
+++ b/src/shared/components/common/icon.tsx
@ -35,6 +35,7 @@ export class Icon extends Component<IconProps, any> {

 interface SpinnerProps {
  large?: boolean;
+  className?: string;
 }

 export class Spinner extends Component<SpinnerProps, any> {
@ -46,7 +47,9 @@ export class Spinner extends Component<SpinnerProps, any> {
    return (
      <Icon
        icon="spinner"
-        classes={`spin ${this.props.large && "spinner-large"}`}
+        classes={classNames("spin", this.props.className, {
+          "spinner-large": this.props.large,
+        })}
      />
    );
  }
--- a/src/shared/components/common/language-select.tsx
+++ b/src/shared/components/common/language-select.tsx
@ -49,7 +49,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
    return this.props.iconVersion ? (
      this.selectBtn
    ) : (
-      <div className="language-select mb-3">
+      <div className="language-select row mb-3">
        <label
          className={classNames(
            "col-form-label",
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@ -23,15 +23,28 @@ import NavigationPrompt from "./navigation-prompt";
 import ProgressBar from "./progress-bar";

 interface MarkdownTextAreaProps {
+  /**
+   * Initial content inside the textarea
+   */
  initialContent?: string;
+  /**
+   * Numerical ID of the language to select in dropdown
+   */
  initialLanguageId?: number;
  placeholder?: string;
  buttonTitle?: string;
  maxLength?: number;
+  /**
+   * Whether this form is for a reply to a Private Message.
+   * If true, a "Cancel" button is shown that will close the reply.
+   */
  replyType?: boolean;
  focus?: boolean;
  disabled?: boolean;
  finished?: boolean;
+  /**
+   * Whether to show the language selector
+   */
  showLanguage?: boolean;
  hideNavigationWarnings?: boolean;
  onContentChange?(val: string): void;
@ -260,8 +273,12 @@ export class MarkdownTextArea extends Component<
              <LanguageSelect
                iconVersion
                allLanguages={this.props.allLanguages}
+                // Only set the selected language ID if it exists as an option
+                // in the dropdown; otherwise, set it to 0 (Undetermined)
                selectedLanguageIds={
-                  languageId ? Array.of(languageId) : undefined
+                  languageId && this.props.siteLanguages.includes(languageId)
+                    ? [languageId]
+                    : [0]
                }
                siteLanguages={this.props.siteLanguages}
                onChange={this.handleLanguageChange}
@ -272,19 +289,6 @@ export class MarkdownTextArea extends Component<
            {/* A flex expander */}
            <div className="flex-grow-1"></div>

-            {this.props.buttonTitle && (
-              <button
-                type="submit"
-                className="btn btn-sm btn-secondary ms-2"
-                disabled={this.isDisabled}
-              >
-                {this.state.loading ? (
-                  <Spinner />
-                ) : (
-                  <span>{this.props.buttonTitle}</span>
-                )}
-              </button>
-            )}
            {this.props.replyType && (
              <button
                type="button"
@ -294,16 +298,26 @@ export class MarkdownTextArea extends Component<
                {I18NextService.i18n.t("cancel")}
              </button>
            )}
-            {this.state.content && (
+            <button
+              type="button"
+              disabled={!this.state.content}
+              className={classNames("btn btn-sm btn-secondary ms-2", {
+                active: this.state.previewMode,
+              })}
+              onClick={linkEvent(this, this.handlePreviewToggle)}
+            >
+              {this.state.previewMode
+                ? I18NextService.i18n.t("edit")
+                : I18NextService.i18n.t("preview")}
+            </button>
+            {this.props.buttonTitle && (
              <button
-                className={`btn btn-sm btn-secondary ms-2 ${
-                  this.state.previewMode && "active"
-                }`}
-                onClick={linkEvent(this, this.handlePreviewToggle)}
+                type="submit"
+                className="btn btn-sm btn-secondary ms-2"
+                disabled={this.isDisabled || !this.state.content}
              >
-                {this.state.previewMode
-                  ? I18NextService.i18n.t("edit")
-                  : I18NextService.i18n.t("preview")}
+                {this.state.loading && <Spinner className="me-1" />}
+                {this.props.buttonTitle}
              </button>
            )}
          </div>
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@ -78,7 +78,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
      slur_filter_regex: ls.slur_filter_regex,
      actor_name_max_length: ls.actor_name_max_length,
      federation_enabled: ls.federation_enabled,
-      federation_worker_count: ls.federation_worker_count,
      captcha_enabled: ls.captcha_enabled,
      captcha_difficulty: ls.captcha_difficulty,
      allowed_instances: this.props.allowedInstances?.map(i => i.domain),
@ -554,27 +553,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                </div>
              </div>
            </div>
-            <div className="mb-3 row">
-              <label
-                className="col-12 col-form-label"
-                htmlFor="create-site-federation-worker-count"
-              >
-                {I18NextService.i18n.t("federation_worker_count")}
-              </label>
-              <div className="col-12">
-                <input
-                  type="number"
-                  id="create-site-federation-worker-count"
-                  className="form-control"
-                  min={0}
-                  value={this.state.siteForm.federation_worker_count}
-                  onInput={linkEvent(
-                    this,
-                    this.handleSiteFederationWorkerCount
-                  )}
-                />
-              </div>
-            </div>
          </>
        )}
        <div className="mb-3 row">
@ -781,7 +759,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
          stateSiteForm.rate_limit_search_per_second,
        federation_enabled: stateSiteForm.federation_enabled,
        federation_debug: stateSiteForm.federation_debug,
-        federation_worker_count: stateSiteForm.federation_worker_count,
        captcha_enabled: stateSiteForm.captcha_enabled,
        captcha_difficulty: stateSiteForm.captcha_difficulty,
        allowed_instances: stateSiteForm.allowed_instances,
@ -982,14 +959,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
    i.setState(i.state);
  }

-  handleSiteFederationWorkerCount(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.federation_worker_count = Number(event.target.value)), s
-      )
-    );
-  }
-
  handleSiteCaptchaEnabled(i: SiteForm, event: any) {
    i.state.siteForm.captcha_enabled = event.target.checked;
    i.setState(i.state);
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@ -4,6 +4,7 @@ import {
  myAuth,
  myAuthRequired,
 } from "@utils/app";
+import getUserInterfaceLangId from "@utils/app/user-interface-language";
 import {
  capitalizeFirstLetter,
  debounce,
@ -323,11 +324,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
  }

  render() {
-    const firstLang = this.state.form.language_id;
-    const selectedLangs = firstLang ? Array.of(firstLang) : undefined;
-
    const url = this.state.form.url;

+    const userInterfaceLangId = getUserInterfaceLangId(this.props.allLanguages);
+
    return (
      <form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
        <NavigationPrompt
@ -494,8 +494,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
        </div>
        <LanguageSelect
          allLanguages={this.props.allLanguages}
+          selectedLanguageIds={[userInterfaceLangId]}
          siteLanguages={this.props.siteLanguages}
-          selectedLanguageIds={selectedLangs}
          multiple={false}
          onChange={this.handleLanguageChange}
        />
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -704,13 +704,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
            data-tippy-content={I18NextService.i18n.t("more")}
            data-bs-toggle="dropdown"
            aria-expanded="false"
-            aria-controls="advancedButtonsDropdown"
+            aria-controls={`advancedButtonsDropdown${post.id}`}
            aria-label={I18NextService.i18n.t("more")}
          >
            <Icon icon="more-vertical" inline />
          </button>

-          <ul className="dropdown-menu" id="advancedButtonsDropdown">
+          <ul
+            className="dropdown-menu"
+            id={`advancedButtonsDropdown${post.id}`}
+          >
            {!this.myPost ? (
              <>
                <li>{this.reportButton}</li>
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@ -115,7 +115,9 @@ export class CreatePrivateMessage extends Component<
        return (
          <div className="row">
            <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-              <h5>{I18NextService.i18n.t("create_private_message")}</h5>
+              <h1 className="h4">
+                {I18NextService.i18n.t("create_private_message")}
+              </h1>
              <PrivateMessageForm
                onCreate={this.handlePrivateMessageCreate}
                recipient={res.person_view.person}
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@ -1,6 +1,6 @@
 import { myAuthRequired } from "@utils/app";
 import { capitalizeFirstLetter } from "@utils/helpers";
-import { Component, InfernoNode, linkEvent } from "inferno";
+import { Component, InfernoNode } from "inferno";
 import { T } from "inferno-i18next-dess";
 import {
  CreatePrivateMessage,
@ -11,7 +11,7 @@ import {
 import { relTags } from "../../config";
 import { I18NextService } from "../../services";
 import { setupTippy } from "../../tippy";
-import { Icon, Spinner } from "../common/icon";
+import { Icon } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 import { PersonListing } from "../person/person-listing";
@ -19,6 +19,7 @@ import { PersonListing } from "../person/person-listing";
 interface PrivateMessageFormProps {
  recipient: Person;
  privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
+  replyType?: boolean;
  onCancel?(): any;
  onCreate?(form: CreatePrivateMessage): void;
  onEdit?(form: EditPrivateMessage): void;
@ -28,7 +29,6 @@ interface PrivateMessageFormState {
  content?: string;
  loading: boolean;
  previewMode: boolean;
-  showDisclaimer: boolean;
  submitted: boolean;
 }

@ -39,7 +39,6 @@ export class PrivateMessageForm extends Component<
  state: PrivateMessageFormState = {
    loading: false,
    previewMode: false,
-    showDisclaimer: false,
    content: this.props.privateMessageView
      ? this.props.privateMessageView.private_message.content
      : undefined,
@ -71,98 +70,60 @@ export class PrivateMessageForm extends Component<

  render() {
    return (
-      <form
-        className="private-message-form"
-        onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
-      >
+      <form className="private-message-form">
        <NavigationPrompt
          when={
            !this.state.loading && !!this.state.content && !this.state.submitted
          }
        />
        {!this.props.privateMessageView && (
-          <div className="mb-3 row">
+          <div className="mb-3 row align-items-baseline">
            <label className="col-sm-2 col-form-label">
              {capitalizeFirstLetter(I18NextService.i18n.t("to"))}
            </label>

-            <div className="col-sm-10 form-control-plaintext">
+            <div className="col-sm-10">
              <PersonListing person={this.props.recipient} />
            </div>
          </div>
        )}
+        <div className="alert alert-warning small">
+          <Icon icon="alert-triangle" classes="icon-inline me-1" />
+          <T parent="span" i18nKey="private_message_disclaimer">
+            #
+            <a
+              className="alert-link"
+              rel={relTags}
+              href="https://element.io/get-started"
+            >
+              #
+            </a>
+          </T>
+        </div>
        <div className="mb-3 row">
          <label className="col-sm-2 col-form-label">
            {I18NextService.i18n.t("message")}
-            <button
-              className="btn btn-link text-warning d-inline-block"
-              onClick={linkEvent(this, this.handleShowDisclaimer)}
-              data-tippy-content={I18NextService.i18n.t(
-                "private_message_disclaimer"
-              )}
-              aria-label={I18NextService.i18n.t("private_message_disclaimer")}
-            >
-              <Icon icon="alert-triangle" classes="icon-inline" />
-            </button>
          </label>
          <div className="col-sm-10">
            <MarkdownTextArea
+              onSubmit={() => {
+                this.handlePrivateMessageSubmit(this, event);
+              }}
              initialContent={this.state.content}
              onContentChange={this.handleContentChange}
              allLanguages={[]}
              siteLanguages={[]}
              hideNavigationWarnings
+              onReplyCancel={() => this.handleCancel(this)}
+              replyType={this.props.replyType}
+              buttonTitle={
+                this.props.privateMessageView
+                  ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
+                  : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
+              }
            />
          </div>
        </div>
-
-        {this.state.showDisclaimer && (
-          <div className="mb-3 row">
-            <div className="offset-sm-2 col-sm-10">
-              <div className="alert alert-danger" role="alert">
-                <T i18nKey="private_message_disclaimer">
-                  #
-                  <a
-                    className="alert-link"
-                    rel={relTags}
-                    href="https://element.io/get-started"
-                  >
-                    #
-                  </a>
-                </T>
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="mb-3 row">
-          <div className="offset-sm-2 col-sm-10">
-            <button
-              type="submit"
-              className="btn btn-secondary me-2"
-              disabled={this.state.loading}
-            >
-              {this.state.loading ? (
-                <Spinner />
-              ) : this.props.privateMessageView ? (
-                capitalizeFirstLetter(I18NextService.i18n.t("save"))
-              ) : (
-                capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
-              )}
-            </button>
-            {this.props.privateMessageView && (
-              <button
-                type="button"
-                className="btn btn-secondary"
-                onClick={linkEvent(this, this.handleCancel)}
-              >
-                {I18NextService.i18n.t("cancel")}
-              </button>
-            )}
-            <ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
-              <li className="list-inline-item"></li>
-            </ul>
-          </div>
-        </div>
      </form>
    );
  }
@ -200,8 +161,4 @@ export class PrivateMessageForm extends Component<
    event.preventDefault();
    i.setState({ previewMode: !i.state.previewMode });
  }
-
-  handleShowDisclaimer(i: PrivateMessageForm) {
-    i.setState({ showDisclaimer: !i.state.showDisclaimer });
-  }
 }
--- a/src/shared/components/private_message/private-message.tsx
+++ b/src/shared/components/private_message/private-message.tsx
@ -145,6 +145,7 @@ export class PrivateMessage extends Component<
                  <>
                    <li className="list-inline-item">
                      <button
+                        type="button"
                        className="btn btn-link btn-animate text-muted"
                        onClick={linkEvent(this, this.handleMarkRead)}
                        data-tippy-content={
@ -174,6 +175,7 @@ export class PrivateMessage extends Component<
                    <li className="list-inline-item">{this.reportButton}</li>
                    <li className="list-inline-item">
                      <button
+                        type="button"
                        className="btn btn-link btn-animate text-muted"
                        onClick={linkEvent(this, this.handleReplyClick)}
                        data-tippy-content={I18NextService.i18n.t("reply")}
@ -188,6 +190,7 @@ export class PrivateMessage extends Component<
                  <>
                    <li className="list-inline-item">
                      <button
+                        type="button"
                        className="btn btn-link btn-animate text-muted"
                        onClick={linkEvent(this, this.handleEditClick)}
                        data-tippy-content={I18NextService.i18n.t("edit")}
@ -198,6 +201,7 @@ export class PrivateMessage extends Component<
                    </li>
                    <li className="list-inline-item">
                      <button
+                        type="button"
                        className="btn btn-link btn-animate text-muted"
                        onClick={linkEvent(this, this.handleDeleteClick)}
                        data-tippy-content={
@ -228,6 +232,7 @@ export class PrivateMessage extends Component<
                )}
                <li className="list-inline-item">
                  <button
+                    type="button"
                    className="btn btn-link btn-animate text-muted"
                    onClick={linkEvent(this, this.handleViewSource)}
                    data-tippy-content={I18NextService.i18n.t("view_source")}
@ -276,10 +281,17 @@ export class PrivateMessage extends Component<
          </form>
        )}
        {this.state.showReply && (
-          <PrivateMessageForm
-            recipient={otherPerson}
-            onCreate={this.props.onCreate}
-          />
+          <div className="row">
+            <div className="col-sm-6">
+              <PrivateMessageForm
+                privateMessageView={message_view}
+                replyType={true}
+                recipient={otherPerson}
+                onCreate={this.props.onCreate}
+                onCancel={this.handleReplyCancel}
+              />
+            </div>
+          </div>
        )}
        {/* A collapsed clearfix */}
        {this.state.collapsed && <div className="row col-12"></div>}
@ -290,6 +302,7 @@ export class PrivateMessage extends Component<
  get reportButton() {
    return (
      <button
+        type="button"
        className="btn btn-link btn-animate text-muted py-0"
        onClick={linkEvent(this, this.handleShowReportDialog)}
        data-tippy-content={I18NextService.i18n.t("show_report_dialog")}
--- a/src/shared/utils/app/index.ts
+++ b/src/shared/utils/app/index.ts
@ -53,6 +53,7 @@ import showScores from "./show-scores";
 import siteBannerCss from "./site-banner-css";
 import updateCommunityBlock from "./update-community-block";
 import updatePersonBlock from "./update-person-block";
+import getUserInterfaceLangId from "./user-interface-language";

 export {
  buildCommentsTree,
@ -87,6 +88,7 @@ export {
  getIdFromProps,
  getRecipientIdFromProps,
  getUpdatedSearchId,
+  getUserInterfaceLangId,
  initializeSite,
  insertCommentIntoTree,
  isAuthPath,
--- a/src/shared/utils/app/user-interface-language.ts
+++ b/src/shared/utils/app/user-interface-language.ts
@ -0,0 +1,18 @@
+import { Language } from "lemmy-js-client";
+import { I18NextService } from "../../services/I18NextService";
+
+export default function getUserInterfaceLangId(
+  allLanguages: Language[]
+): number {
+  // Get the string of the browser- or user-defined language, like en-US
+  const i18nLang = I18NextService.i18n.language;
+
+  // Find the Language object with a code that matches the initial characters of
+  // this string
+  const userLang = allLanguages.find(lang => {
+    return i18nLang.indexOf(lang.code) === 0;
+  });
+
+  // Return the ID of that language object, or "0" for Undetermined
+  return userLang?.id || 0;
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -4,7 +4,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const nodeExternals = require("webpack-node-externals");
 const CopyPlugin = require("copy-webpack-plugin");
 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
-const merge = require("lodash/merge");
+const merge = require("lodash.merge");
 const { ServiceWorkerPlugin } = require("service-worker-webpack");
 const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
--- a/yarn.lock
+++ b/yarn.lock
@ -1595,6 +1595,18 @@
  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==

+"@types/lodash.isequal@^4.5.6":
+  version "4.5.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.6.tgz#ff42a1b8e20caa59a97e446a77dc57db923bc02b"
+  integrity sha512-Ww4UGSe3DmtvLLJm2F16hDwEQSv7U0Rr8SujLUA2wHI2D2dm8kPu6Et+/y303LfjTIwSBKXB/YTUcAKpem/XEg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.195"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/markdown-it-container@^2.0.5":
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/@types/markdown-it-container/-/markdown-it-container-2.0.5.tgz#abd793b64c5adc7b2d1e8963eddb388198248152"
@ -5916,6 +5928,11 @@ lodash.debounce@^4.0.8:
  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==

+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@ -5951,7 +5968,7 @@ lodash@^3.10.1:
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
  integrity sha512-9mDDwqVIma6OZX79ZlDACZl8sBm0TEnkf99zV3iMA4GzkIT/9hiqP5mY0HoT1iNLCrKc/R1HByV+yJfRWVJryQ==

-lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.20:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==