Merge branch 'main' into csp_media_src_data_urls

2024-11-08 17:44:16 +00:00 · 2023-06-25 19:16:46 +00:00 · 2023-06-25 19:16:46 +00:00 · 1ce6eb3284
parent 434502c678 e94b8b4e1f
commit 1ce6eb3284
25 changed files with 593 additions and 541 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -21,16 +21,6 @@
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/no-empty-function": 0,
    "arrow-body-style": 0,
-    "jsx-a11y/alt-text": 1,
-    "jsx-a11y/anchor-is-valid": 1,
-    "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,
    "eol-last": 0,
    "eqeqeq": 0,
--- 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%);
 }
@ -275,10 +276,7 @@ hr {
 }

 .mini-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 2px;
+  display: block;
  height: 1.5em;
  width: 1.5em;
  background: rgba(0, 0, 0, 0.4);
--- a/src/server/handlers/theme-handler.ts
+++ b/src/server/handlers/theme-handler.ts
@ -11,22 +11,21 @@ export default async (req: Request, res: Response) => {
  const theme = req.params.name;

  if (!theme.endsWith(".css")) {
-    res.statusCode = 400;
-    res.send("Theme must be a css file");
+    return res.status(400).send("Theme must be a css file");
  }

  const customTheme = path.resolve(extraThemesFolder, theme);

  if (existsSync(customTheme)) {
-    res.sendFile(customTheme);
+    return res.sendFile(customTheme);
  } else {
    const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);

    // If the theme doesn't exist, just send litely
    if (existsSync(internalTheme)) {
-      res.sendFile(internalTheme);
+      return res.sendFile(internalTheme);
    } else {
-      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
+      return res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
    }
  }
 };
--- 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 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-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@ -3,7 +3,6 @@ import {
  getCommentParentId,
  myAuth,
  myAuthRequired,
-  newVote,
  showScores,
 } from "@utils/app";
 import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
@ -56,13 +55,14 @@ import {
  CommentNodeI,
  CommentViewType,
  PurgeType,
-  VoteType,
+  VoteContentType,
 } from "../../interfaces";
 import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
+import { VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { CommentForm } from "./comment-form";
@ -283,7 +283,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
      node.comment_view.counts.child_count > 0;

    return (
-      <li className="comment" role="comment">
+      <li className="comment">
        <article
          id={`comment-${cv.comment.id}`}
          className={classNames(`details comment-node py-2`, {
@ -356,29 +356,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
              )}
              {/* This is an expanding spacer for mobile */}
              <div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
+
              {showScores() && (
                <>
-                  <a
-                    className={`unselectable pointer ${this.scoreColor}`}
-                    onClick={linkEvent(this, this.handleUpvote)}
-                    data-tippy-content={this.pointsTippy}
+                  <span
+                    className="me-1 fw-bold"
+                    aria-label={I18NextService.i18n.t("number_of_points", {
+                      count: Number(this.commentView.counts.score),
+                      formattedCount: numToSI(this.commentView.counts.score),
+                    })}
                  >
-                    {this.state.upvoteLoading ? (
-                      <Spinner />
-                    ) : (
-                      <span
-                        className="me-1 font-weight-bold"
-                        aria-label={I18NextService.i18n.t("number_of_points", {
-                          count: Number(this.commentView.counts.score),
-                          formattedCount: numToSI(
-                            this.commentView.counts.score
-                          ),
-                        })}
-                      >
-                        {numToSI(this.commentView.counts.score)}
-                      </span>
-                    )}
-                  </a>
+                    {numToSI(this.commentView.counts.score)}
+                  </span>
                  <span className="me-1">•</span>
                </>
              )}
@ -420,7 +409,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                    }
                  />
                )}
-                <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
+                <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
                  {this.props.showContext && this.linkBtn()}
                  {this.props.markable && (
                    <button
@ -451,60 +440,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                  )}
                  {UserService.Instance.myUserInfo && !this.props.viewOnly && (
                    <>
-                      <button
-                        className={`btn btn-link btn-animate ${
-                          this.commentView.my_vote === 1
-                            ? "text-info"
-                            : "text-muted"
-                        }`}
-                        onClick={linkEvent(this, this.handleUpvote)}
-                        data-tippy-content={I18NextService.i18n.t("upvote")}
-                        aria-label={I18NextService.i18n.t("upvote")}
-                        aria-pressed={this.commentView.my_vote === 1}
-                      >
-                        {this.state.upvoteLoading ? (
-                          <Spinner />
-                        ) : (
-                          <>
-                            <Icon icon="arrow-up1" classes="icon-inline" />
-                            {showScores() &&
-                              this.commentView.counts.upvotes !==
-                                this.commentView.counts.score && (
-                                <span className="ms-1">
-                                  {numToSI(this.commentView.counts.upvotes)}
-                                </span>
-                              )}
-                          </>
-                        )}
-                      </button>
-                      {this.props.enableDownvotes && (
-                        <button
-                          className={`btn btn-link btn-animate ${
-                            this.commentView.my_vote === -1
-                              ? "text-danger"
-                              : "text-muted"
-                          }`}
-                          onClick={linkEvent(this, this.handleDownvote)}
-                          data-tippy-content={I18NextService.i18n.t("downvote")}
-                          aria-label={I18NextService.i18n.t("downvote")}
-                          aria-pressed={this.commentView.my_vote === -1}
-                        >
-                          {this.state.downvoteLoading ? (
-                            <Spinner />
-                          ) : (
-                            <>
-                              <Icon icon="arrow-down1" classes="icon-inline" />
-                              {showScores() &&
-                                this.commentView.counts.upvotes !==
-                                  this.commentView.counts.score && (
-                                  <span className="ms-1">
-                                    {numToSI(this.commentView.counts.downvotes)}
-                                  </span>
-                                )}
-                            </>
-                          )}
-                        </button>
-                      )}
+                      <VoteButtonsCompact
+                        voteContentType={VoteContentType.Comment}
+                        id={this.commentView.comment.id}
+                        onVote={this.props.onCommentVote}
+                        enableDownvotes={this.props.enableDownvotes}
+                        counts={this.commentView.counts}
+                        my_vote={this.commentView.my_vote}
+                      />
                      <button
                        className="btn btn-link btn-animate text-muted"
                        onClick={linkEvent(this, this.handleReplyClick)}
@ -1483,24 +1426,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
    });
  }

-  handleUpvote(i: CommentNode) {
-    i.setState({ upvoteLoading: true });
-    i.props.onCommentVote({
-      comment_id: i.commentId,
-      score: newVote(VoteType.Upvote, i.commentView.my_vote),
-      auth: myAuthRequired(),
-    });
-  }
-
-  handleDownvote(i: CommentNode) {
-    i.setState({ downvoteLoading: true });
-    i.props.onCommentVote({
-      comment_id: i.commentId,
-      score: newVote(VoteType.Downvote, i.commentView.my_vote),
-      auth: myAuthRequired(),
-    });
-  }
-
  handleBlockPerson(i: CommentNode) {
    i.setState({ blockPersonLoading: true });
    i.props.onBlockPerson({
--- 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,13 +43,14 @@ 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={{}}
                ></EmojiMart>
              </div>
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
              <div
                onClick={linkEvent(this, this.togglePicker)}
                className="click-away-container"
@ -56,9 +62,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/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@ -33,13 +33,12 @@ export class ImageUploadForm extends Component<
  render() {
    return (
      <form className="image-upload-form d-inline">
-        <label
-          htmlFor={this.id}
-          className="pointer text-muted small font-weight-bold"
-        >
+        <label htmlFor={this.id} className="pointer text-muted small fw-bold">
          {this.props.imageSrc ? (
            <span className="d-inline-block position-relative">
+              {/* TODO: Create "Current Iamge" translation for alt text */}
              <img
+                alt=""
                src={this.props.imageSrc}
                height={this.props.rounded ? 60 : ""}
                width={this.props.rounded ? 60 : ""}
@ -47,12 +46,14 @@ export class ImageUploadForm extends Component<
                  this.props.rounded ? "rounded-circle" : ""
                }`}
              />
-              <a
+              <button
+                className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
+                type="button"
                onClick={linkEvent(this, this.handleRemoveImage)}
                aria-label={I18NextService.i18n.t("remove")}
              >
                <Icon icon="x" classes="mini-overlay" />
-              </a>
+              </button>
            </span>
          ) : (
            <span className="btn btn-secondary">{this.props.uploadTitle}</span>
--- 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;
@ -154,7 +167,7 @@ export class MarkdownTextArea extends Component<
                  onEmojiClick={e => this.handleEmoji(this, e)}
                  disabled={this.isDisabled}
                ></EmojiPicker>
-                <form className="btn btn-sm text-muted font-weight-bold">
+                <form className="btn btn-sm text-muted fw-bold">
                  <label
                    htmlFor={`file-upload-${this.id}`}
                    className={`mb-0 ${
@ -197,7 +210,7 @@ export class MarkdownTextArea extends Component<
                {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                <a
                  href={markdownHelpUrl}
-                  className="btn btn-sm text-muted font-weight-bold"
+                  className="btn btn-sm text-muted fw-bold"
                  title={I18NextService.i18n.t("formatting_help")}
                  rel={relTags}
                >
@ -276,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"
@ -298,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/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@ -39,7 +39,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
      return (
        <span
          data-tippy-content={this.createdAndModifiedTimes()}
-          className="moment-time font-italics pointer unselectable"
+          className="moment-time fst-italic pointer unselectable"
        >
          <Icon icon="edit-2" classes="icon-inline me-1" />
          {formatPastDate(this.props.updated)}
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@ -106,8 +106,12 @@ export class SearchableSelect extends Component<
        <button
          id={id}
          type="button"
+          role="combobox"
          className="form-select d-inline-block text-start"
          aria-haspopup="listbox"
+          aria-controls="searchable-select-input"
+          aria-activedescendant={options[selectedIndex].label}
+          aria-expanded={false}
          data-bs-toggle="dropdown"
          onClick={linkEvent(this, focusSearch)}
          ref={this.toggleButtonRef}
@ -116,17 +120,14 @@ export class SearchableSelect extends Component<
            ? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
            : options[selectedIndex].label}
        </button>
-        <div
-          role="combobox"
-          aria-activedescendant={options[selectedIndex].label}
-          className="modlog-choices-font-size dropdown-menu w-100 p-2"
-        >
+        <div className="modlog-choices-font-size dropdown-menu w-100 p-2">
          <div className="input-group">
            <span className="input-group-text">
              {loading ? <Spinner /> : <Icon icon="search" />}
            </span>
            <input
              type="text"
+              id="searchable-select-input"
              className="form-control"
              ref={this.searchInputRef}
              onInput={linkEvent(this, handleSearch)}
--- a/src/shared/components/common/vote-buttons.tsx
+++ b/src/shared/components/common/vote-buttons.tsx
@ -0,0 +1,225 @@
+import { myAuthRequired, newVote, showScores } from "@utils/app";
+import { numToSI } from "@utils/helpers";
+import classNames from "classnames";
+import { Component, linkEvent } from "inferno";
+import {
+  CommentAggregates,
+  CreateCommentLike,
+  CreatePostLike,
+  PostAggregates,
+} from "lemmy-js-client";
+import { VoteContentType, VoteType } from "../../interfaces";
+import { I18NextService } from "../../services";
+import { Icon, Spinner } from "../common/icon";
+
+interface VoteButtonsProps {
+  voteContentType: VoteContentType;
+  id: number;
+  onVote: (i: CreateCommentLike | CreatePostLike) => void;
+  enableDownvotes?: boolean;
+  counts: CommentAggregates | PostAggregates;
+  my_vote?: number;
+}
+
+interface VoteButtonsState {
+  upvoteLoading: boolean;
+  downvoteLoading: boolean;
+}
+
+const tippy = (counts: CommentAggregates | PostAggregates): string => {
+  const points = I18NextService.i18n.t("number_of_points", {
+    count: Number(counts.score),
+    formattedCount: Number(counts.score),
+  });
+
+  const upvotes = I18NextService.i18n.t("number_of_upvotes", {
+    count: Number(counts.upvotes),
+    formattedCount: Number(counts.upvotes),
+  });
+
+  const downvotes = I18NextService.i18n.t("number_of_downvotes", {
+    count: Number(counts.downvotes),
+    formattedCount: Number(counts.downvotes),
+  });
+
+  return `${points} • ${upvotes} • ${downvotes}`;
+};
+
+const handleUpvote = (i: VoteButtons) => {
+  i.setState({ upvoteLoading: true });
+
+  switch (i.props.voteContentType) {
+    case VoteContentType.Comment:
+      i.props.onVote({
+        comment_id: i.props.id,
+        score: newVote(VoteType.Upvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+      break;
+    case VoteContentType.Post:
+    default:
+      i.props.onVote({
+        post_id: i.props.id,
+        score: newVote(VoteType.Upvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+  }
+
+  i.setState({ upvoteLoading: false });
+};
+
+const handleDownvote = (i: VoteButtons) => {
+  i.setState({ downvoteLoading: true });
+  switch (i.props.voteContentType) {
+    case VoteContentType.Comment:
+      i.props.onVote({
+        comment_id: i.props.id,
+        score: newVote(VoteType.Downvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+      break;
+    case VoteContentType.Post:
+    default:
+      i.props.onVote({
+        post_id: i.props.id,
+        score: newVote(VoteType.Downvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+  }
+  i.setState({ downvoteLoading: false });
+};
+
+export class VoteButtonsCompact extends Component<
+  VoteButtonsProps,
+  VoteButtonsState
+> {
+  state: VoteButtonsState = {
+    upvoteLoading: false,
+    downvoteLoading: false,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          type="button"
+          className={`btn-animate btn py-0 px-1 ${
+            this.props.my_vote === 1 ? "text-info" : "text-muted"
+          }`}
+          data-tippy-content={tippy(this.props.counts)}
+          onClick={linkEvent(this, handleUpvote)}
+          aria-label={I18NextService.i18n.t("upvote")}
+          aria-pressed={this.props.my_vote === 1}
+        >
+          {this.state.upvoteLoading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Icon icon="arrow-up1" classes="icon-inline small" />
+              {showScores() && (
+                <span className="ms-2">
+                  {numToSI(this.props.counts.upvotes)}
+                </span>
+              )}
+            </>
+          )}
+        </button>
+        {this.props.enableDownvotes && (
+          <button
+            type="button"
+            className={`ms-2 btn-animate btn py-0 px-1 ${
+              this.props.my_vote === -1 ? "text-danger" : "text-muted"
+            }`}
+            onClick={linkEvent(this, handleDownvote)}
+            data-tippy-content={tippy(this.props.counts)}
+            aria-label={I18NextService.i18n.t("downvote")}
+            aria-pressed={this.props.my_vote === -1}
+          >
+            {this.state.downvoteLoading ? (
+              <Spinner />
+            ) : (
+              <>
+                <Icon icon="arrow-down1" classes="icon-inline small" />
+                {showScores() && (
+                  <span
+                    className={classNames("ms-2", {
+                      invisible: this.props.counts.downvotes === 0,
+                    })}
+                  >
+                    {numToSI(this.props.counts.downvotes)}
+                  </span>
+                )}
+              </>
+            )}
+          </button>
+        )}
+      </div>
+    );
+  }
+}
+
+export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
+  state: VoteButtonsState = {
+    upvoteLoading: false,
+    downvoteLoading: false,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div className={`vote-bar col-1 pe-0 small text-center`}>
+        <button
+          type="button"
+          className={`btn-animate btn btn-link p-0 ${
+            this.props.my_vote == 1 ? "text-info" : "text-muted"
+          }`}
+          onClick={linkEvent(this, handleUpvote)}
+          data-tippy-content={I18NextService.i18n.t("upvote")}
+          aria-label={I18NextService.i18n.t("upvote")}
+          aria-pressed={this.props.my_vote === 1}
+        >
+          {this.state.upvoteLoading ? (
+            <Spinner />
+          ) : (
+            <Icon icon="arrow-up1" classes="upvote" />
+          )}
+        </button>
+        {showScores() ? (
+          <div
+            className={`unselectable pointer text-muted px-1 post-score`}
+            data-tippy-content={tippy(this.props.counts)}
+          >
+            {numToSI(this.props.counts.score)}
+          </div>
+        ) : (
+          <div className="p-1"></div>
+        )}
+        {this.props.enableDownvotes && (
+          <button
+            type="button"
+            className={`btn-animate btn btn-link p-0 ${
+              this.props.my_vote == -1 ? "text-danger" : "text-muted"
+            }`}
+            onClick={linkEvent(this, handleDownvote)}
+            data-tippy-content={I18NextService.i18n.t("downvote")}
+            aria-label={I18NextService.i18n.t("downvote")}
+            aria-pressed={this.props.my_vote === -1}
+          >
+            {this.state.downvoteLoading ? (
+              <Spinner />
+            ) : (
+              <Icon icon="arrow-down1" classes="downvote" />
+            )}
+          </button>
+        )}
+      </div>
+    );
+  }
+}
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@ -204,17 +204,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
            </button>
          )}
          {community.removed && (
-            <small className="me-2 text-muted font-italic">
+            <small className="me-2 text-muted fst-italic">
              {I18NextService.i18n.t("removed")}
            </small>
          )}
          {community.deleted && (
-            <small className="me-2 text-muted font-italic">
+            <small className="me-2 text-muted fst-italic">
              {I18NextService.i18n.t("deleted")}
            </small>
          )}
          {community.nsfw && (
-            <small className="me-2 text-muted font-italic">
+            <small className="me-2 text-muted fst-italic">
              {I18NextService.i18n.t("nsfw")}
            </small>
          )}
@ -309,7 +309,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
    const community_view = this.props.community_view;
    return (
      <>
-        <ul className="list-inline mb-1 text-muted font-weight-bold">
+        <ul className="list-inline mb-1 text-muted fw-bold">
          {amMod(this.props.moderators) && (
            <>
              <li className="list-inline-item-action">
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@ -44,7 +44,6 @@ interface AdminSettingsState {
  instancesRes: RequestState<GetFederatedInstancesResponse>;
  bannedRes: RequestState<BannedPersonsResponse>;
  leaveAdminTeamRes: RequestState<GetSiteResponse>;
-  emojiLoading: boolean;
  loading: boolean;
  themeList: string[];
  isIsomorphic: boolean;
@ -59,7 +58,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
    bannedRes: { state: "empty" },
    instancesRes: { state: "empty" },
    leaveAdminTeamRes: { state: "empty" },
-    emojiLoading: false,
    loading: false,
    themeList: [],
    isIsomorphic: false,
@ -215,7 +213,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                      onCreate={this.handleCreateEmoji}
                      onDelete={this.handleDeleteEmoji}
                      onEdit={this.handleEditEmoji}
-                      loading={this.state.emojiLoading}
                    />
                  </div>
                </div>
@ -345,35 +342,23 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
  }

  async handleEditEmoji(form: EditCustomEmoji) {
-    this.setState({ emojiLoading: true });
-
    const res = await HttpService.client.editCustomEmoji(form);
    if (res.state === "success") {
      updateEmojiDataModel(res.data.custom_emoji);
    }
-
-    this.setState({ emojiLoading: false });
  }

  async handleDeleteEmoji(form: DeleteCustomEmoji) {
-    this.setState({ emojiLoading: true });
-
    const res = await HttpService.client.deleteCustomEmoji(form);
    if (res.state === "success") {
      removeFromEmojiDataModel(res.data.id);
    }
-
-    this.setState({ emojiLoading: false });
  }

  async handleCreateEmoji(form: CreateCustomEmoji) {
-    this.setState({ emojiLoading: true });
-
    const res = await HttpService.client.createCustomEmoji(form);
    if (res.state === "success") {
      updateEmojiDataModel(res.data.custom_emoji);
    }
-
-    this.setState({ emojiLoading: false });
  }
 }
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@ -1,4 +1,5 @@
 import { myAuthRequired, setIsoData } from "@utils/app";
+import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import {
  CreateCustomEmoji,
@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
 import { pictrsDeleteToast, toast } from "../../toast";
 import { EmojiMart } from "../common/emoji-mart";
 import { HtmlTags } from "../common/html-tags";
-import { Icon } from "../common/icon";
+import { Icon, Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";

 interface EmojiFormProps {
  onEdit(form: EditCustomEmoji): void;
  onCreate(form: CreateCustomEmoji): void;
  onDelete(form: DeleteCustomEmoji): void;
-  loading: boolean;
 }

 interface EmojiFormState {
@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
  keywords: string;
  changed: boolean;
  page: number;
+  loading: boolean;
 }

 export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
@ -52,6 +53,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
      keywords: x.keywords.map(x => x.keyword).join(" "),
      changed: false,
      page: 1 + Math.floor(index / this.itemsPerPage),
+      loading: false,
    })),
    page: 1,
  };
@ -119,33 +121,39 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                .map((cv, index) => (
                  <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
                    <td style="text-align:center;">
-                      <label
-                        htmlFor={index.toString()}
-                        className="pointer text-muted small font-weight-bold"
-                      >
-                        {cv.image_url.length > 0 && (
-                          <img
-                            className="icon-emoji-admin"
-                            src={cv.image_url}
-                          />
-                        )}
-                        {cv.image_url.length == 0 && (
-                          <span className="btn btn-sm btn-secondary">
-                            Upload
-                          </span>
-                        )}
-                      </label>
-                      <input
-                        name={index.toString()}
-                        id={index.toString()}
-                        type="file"
-                        accept="image/*"
-                        className="d-none"
-                        onChange={linkEvent(
-                          { form: this, index: index },
-                          this.handleImageUpload
-                        )}
-                      />
+                      {cv.image_url.length > 0 && (
+                        <img
+                          className="icon-emoji-admin"
+                          src={cv.image_url}
+                          alt={cv.alt_text}
+                        />
+                      )}
+                      {cv.image_url.length === 0 && (
+                        <form>
+                          <label
+                            className="btn btn-sm btn-secondary pointer"
+                            htmlFor={`file-uploader-${index}`}
+                            data-tippy-content={I18NextService.i18n.t(
+                              "upload_image"
+                            )}
+                          >
+                            {capitalizeFirstLetter(
+                              I18NextService.i18n.t("upload")
+                            )}
+                            <input
+                              name={`file-uploader-${index}`}
+                              id={`file-uploader-${index}`}
+                              type="file"
+                              accept="image/*"
+                              className="d-none"
+                              onChange={linkEvent(
+                                { form: this, index: index },
+                                this.handleImageUpload
+                              )}
+                            />
+                          </label>
+                        </form>
+                      )}
                    </td>
                    <td className="text-right">
                      <input
@ -213,8 +221,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                        <span title={this.getEditTooltip(cv)}>
                          <button
                            className={
-                              (cv.changed ? "text-success " : "text-muted ") +
-                              "btn btn-link btn-animate"
+                              (this.canEdit(cv)
+                                ? "text-success "
+                                : "text-muted ") + "btn btn-link btn-animate"
                            }
                            onClick={linkEvent(
                              { i: this, cv: cv },
@ -222,17 +231,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                            )}
                            data-tippy-content={I18NextService.i18n.t("save")}
                            aria-label={I18NextService.i18n.t("save")}
-                            disabled={
-                              this.props.loading ||
-                              !this.canEdit(cv) ||
-                              !cv.changed
-                            }
+                            disabled={!this.canEdit(cv)}
                          >
-                            {/* <Icon
-                                                            icon="edit"
-                                                            classes={`icon-inline`}
-                                                        /> */}
-                            Save
+                            {cv.loading ? (
+                              <Spinner />
+                            ) : (
+                              capitalizeFirstLetter(
+                                I18NextService.i18n.t("save")
+                              )
+                            )}
                          </button>
                        </span>
                        <button
@ -243,7 +250,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                          )}
                          data-tippy-content={I18NextService.i18n.t("delete")}
                          aria-label={I18NextService.i18n.t("delete")}
-                          disabled={this.props.loading}
+                          disabled={cv.loading}
                          title={I18NextService.i18n.t("delete")}
                        >
                          <Icon
@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
      this.state.customEmojis.filter(
        x => x.shortcode == cv.shortcode && x.id != cv.id
      ).length == 0;
-    return noEmptyFields && noDuplicateShortCodes;
+    return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
  }

  getEditTooltip(cv: CustomEmojiViewForm) {
@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
  }

  handleEmojiImageUrlChange(
-    props: { form: EmojiForm; index: number; overrideValue: string | null },
+    {
+      form,
+      index,
+      overrideValue,
+    }: { form: EmojiForm; index: number; overrideValue: string | null },
    event: any
  ) {
-    const custom_emojis = [...props.form.state.customEmojis];
-    const pagedIndex =
-      (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
-    const item = {
-      ...props.form.state.customEmojis[pagedIndex],
-      image_url: props.overrideValue ?? event.target.value,
-      changed: true,
-    };
-    custom_emojis[Number(pagedIndex)] = item;
-    props.form.setState({ customEmojis: custom_emojis });
+    form.setState(prevState => {
+      const custom_emojis = [...form.state.customEmojis];
+      const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
+      const item = {
+        ...form.state.customEmojis[pagedIndex],
+        image_url: overrideValue ?? event.target.value,
+        changed: true,
+      };
+      custom_emojis[Number(pagedIndex)] = item;
+      return {
+        ...prevState,
+        customEmojis: prevState.customEmojis.map((ce, i) =>
+          i === pagedIndex
+            ? {
+                ...ce,
+                image_url: overrideValue ?? event.target.value,
+                changed: true,
+                loading: false,
+              }
+            : ce
+        ),
+      };
+    });
  }

  handleEmojiAltTextChange(
@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
      .split(" ")
      .filter(x => x.length > 0) as string[];
    const uniqueKeywords = Array.from(new Set(keywords));
-    if (d.cv.id != 0) {
+    if (d.cv.id !== 0) {
      d.i.props.onEdit({
        id: d.cv.id,
        category: d.cv.category,
@ -432,24 +456,33 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {

  handleAddEmojiClick(form: EmojiForm, event: any) {
    event.preventDefault();
-    const custom_emojis = [...form.state.customEmojis];
-    const page =
-      1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
-    const item: CustomEmojiViewForm = {
-      id: 0,
-      shortcode: "",
-      alt_text: "",
-      category: "",
-      image_url: "",
-      keywords: "",
-      changed: true,
-      page: page,
-    };
-    custom_emojis.push(item);
-    form.setState({ customEmojis: custom_emojis, page: page });
+    form.setState(prevState => {
+      const page =
+        1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
+      const item: CustomEmojiViewForm = {
+        id: 0,
+        shortcode: "",
+        alt_text: "",
+        category: "",
+        image_url: "",
+        keywords: "",
+        changed: false,
+        page: page,
+        loading: false,
+      };
+
+      return {
+        ...prevState,
+        customEmojis: [...prevState.customEmojis, item],
+        page,
+      };
+    });
  }

-  handleImageUpload(props: { form: EmojiForm; index: number }, event: any) {
+  handleImageUpload(
+    { form, index }: { form: EmojiForm; index: number },
+    event: any
+  ) {
    let file: any;
    if (event.target) {
      event.preventDefault();
@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
      file = event;
    }

+    form.setState(prevState => ({
+      ...prevState,
+      customEmojis: prevState.customEmojis.map((cv, i) =>
+        i === index ? { ...cv, loading: true } : cv
+      ),
+    }));
+
    HttpService.client.uploadImage({ image: file }).then(res => {
      console.log("pictrs upload:");
      console.log(res);
      if (res.state === "success") {
        if (res.data.msg === "ok") {
          pictrsDeleteToast(file.name, res.data.delete_url as string);
-        } else {
-          toast(JSON.stringify(res), "danger");
-          const hash = res.data.files?.at(0)?.file;
-          const url = `${res.data.url}/${hash}`;
-          props.form.handleEmojiImageUrlChange(
-            { form: props.form, index: props.index, overrideValue: url },
+          form.handleEmojiImageUrlChange(
+            { form: form, index: index, overrideValue: res.data.url as string },
            event
          );
+        } else {
+          toast(JSON.stringify(res), "danger");
        }
      } else if (res.state === "failed") {
        console.error(res.msg);
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@ -108,7 +108,7 @@ export class Login extends Component<any, State> {
              <button
                type="button"
                onClick={linkEvent(this, this.handlePasswordReset)}
-                className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
+                className="btn p-0 btn-link d-inline-block float-right text-muted small fw-bold pointer-events not-allowed"
                disabled={
                  !!this.state.form.username_or_email &&
                  !validEmail(this.state.form.username_or_email)
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@ -1,8 +1,7 @@
-import { Component, linkEvent } from "inferno";
+import { Component } from "inferno";
 import { Post } from "lemmy-js-client";
 import * as sanitizeHtml from "sanitize-html";
 import { relTags } from "../../config";
-import { I18NextService } from "../../services";
 import { Icon } from "../common/icon";

 interface MetadataCardProps {
@ -17,10 +16,6 @@ export class MetadataCard extends Component<
  MetadataCardProps,
  MetadataCardState
 > {
-  state: MetadataCardState = {
-    expanded: false,
-  };
-
  constructor(props: any, context: any) {
    super(props, context);
  }
@ -29,7 +24,7 @@ export class MetadataCard extends Component<
    const post = this.props.post;
    return (
      <>
-        {!this.state.expanded && post.embed_title && post.url && (
+        {post.embed_title && post.url && (
          <div className="post-metadata-card card border-secondary mt-3 mb-2">
            <div className="row">
              <div className="col-12">
@ -43,7 +38,7 @@ export class MetadataCard extends Component<
                      </h5>
                      <span className="d-inline-block ms-2 mb-2 small text-muted">
                        <a
-                          className="text-muted font-italic"
+                          className="text-muted fst-italic"
                          href={post.url}
                          rel={relTags}
                        >
@ -61,34 +56,12 @@ export class MetadataCard extends Component<
                      }}
                    />
                  )}
-                  {post.embed_video_url && (
-                    <button
-                      className="mt-2 btn btn-secondary text-monospace"
-                      onClick={linkEvent(this, this.handleIframeExpand)}
-                    >
-                      {I18NextService.i18n.t("expand_here")}
-                    </button>
-                  )}
                </div>
              </div>
            </div>
          </div>
        )}
-        {this.state.expanded && post.embed_video_url && (
-          <div className="ratio ratio-16x9">
-            <iframe
-              allowFullScreen
-              className="post-metadata-iframe"
-              src={post.embed_video_url}
-              title={post.embed_title}
-            ></iframe>
-          </div>
-        )}
      </>
    );
  }
-
-  handleIframeExpand(i: MetadataCard) {
-    i.setState({ expanded: !i.state.expanded });
-  }
 }
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@ -358,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                htmlFor="file-upload"
                className={`${
                  UserService.Instance.myUserInfo && "pointer"
-                } d-inline-block float-right text-muted font-weight-bold`}
+                } d-inline-block float-right text-muted fw-bold`}
                data-tippy-content={I18NextService.i18n.t("upload_image")}
              >
                <Icon icon="image" classes="icon-inline" />
@ -377,7 +377,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
              <div>
                <a
                  href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
-                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small fw-bold"
                  rel={relTags}
                >
                  archive.org {I18NextService.i18n.t("archive_link")}
@ -386,7 +386,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                  href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
                    url
                  )}`}
-                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small fw-bold"
                  rel={relTags}
                >
                  ghostarchive.org {I18NextService.i18n.t("archive_link")}
@ -395,7 +395,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                  href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
                    url
                  )}`}
-                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small fw-bold"
                  rel={relTags}
                >
                  archive.today {I18NextService.i18n.t("archive_link")}
@ -419,7 +419,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
            )}
            {this.props.crossPosts && this.props.crossPosts.length > 0 && (
              <>
-                <div className="my-1 text-muted small font-weight-bold">
+                <div className="my-1 text-muted small fw-bold">
                  {I18NextService.i18n.t("cross_posts")}
                </div>
                <PostListings
@ -585,9 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {

        return (
          suggestedTitle && (
-            <div
-              className="mt-1 text-muted small font-weight-bold pointer"
-              role="button"
+            <button
+              type="button"
+              className="mt-1 small border-0 bg-transparent p-0 d-block text-muted fw-bold pointer"
              onClick={linkEvent(
                { i: this, suggestedTitle },
                copySuggestedTitle
@ -595,7 +595,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
            >
              {I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
              {suggestedTitle}
-            </div>
+            </button>
          )
        );
      }
@ -613,7 +613,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
          suggestedPosts &&
          suggestedPosts.length > 0 && (
            <>
-              <div className="my-1 text-muted small font-weight-bold">
+              <div className="my-1 text-muted small fw-bold">
                {I18NextService.i18n.t("related_posts")}
              </div>
              <PostListings
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -1,11 +1,10 @@
-import { myAuthRequired, newVote, showScores } from "@utils/app";
+import { myAuthRequired } from "@utils/app";
 import { canShare, share } from "@utils/browser";
 import { getExternalHost, getHttpBase } from "@utils/env";
 import {
  capitalizeFirstLetter,
  futureDaysToUnixTime,
  hostname,
-  numToSI,
 } from "@utils/helpers";
 import { isImage, isVideo } from "@utils/media";
 import {
@ -44,13 +43,19 @@ import {
  TransferCommunity,
 } from "lemmy-js-client";
 import { relTags } from "../../config";
-import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
+import {
+  BanType,
+  PostFormParams,
+  PurgeType,
+  VoteContentType,
+} from "../../interfaces";
 import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PictrsImage } from "../common/pictrs-image";
+import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { MetadataCard } from "./metadata-card";
@ -78,8 +83,6 @@ interface PostListingState {
  showBody: boolean;
  showReportDialog: boolean;
  reportReason?: string;
-  upvoteLoading: boolean;
-  downvoteLoading: boolean;
  reportLoading: boolean;
  blockLoading: boolean;
  lockLoading: boolean;
@ -142,8 +145,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    showMoreMobile: false,
    showBody: false,
    showReportDialog: false,
-    upvoteLoading: false,
-    downvoteLoading: false,
    purgeLoading: false,
    reportLoading: false,
    blockLoading: false,
@ -169,8 +170,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
  componentWillReceiveProps(nextProps: PostListingProps) {
    if (this.props !== nextProps) {
      this.setState({
-        upvoteLoading: false,
-        downvoteLoading: false,
        purgeLoading: false,
        reportLoading: false,
        blockLoading: false,
@ -248,12 +247,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
            </a>
          </div>
          <div className="my-2 d-block d-sm-none">
-            <a
-              className="d-inline-block"
+            <button
+              type="button"
+              className="p-0 border-0 bg-transparent d-inline-block"
              onClick={linkEvent(this, this.handleImageExpandClick)}
            >
              <PictrsImage src={this.imageSrc} />
-            </a>
+            </button>
          </div>
        </>
      );
@ -262,6 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    const { post } = this.postView;
    const { url } = post;

+    // if direct video link
    if (url && isVideo(url)) {
      return (
        <div className="embed-responsive mt-3">
@ -272,6 +273,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
      );
    }

+    // if embedded video link
+    if (url && post.embed_video_url) {
+      return (
+        <div className="ratio ratio-16x9">
+          <iframe
+            allowFullScreen
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+            title={post.embed_title}
+          ></iframe>
+        </div>
+      );
+    }
+
    return <></>;
  }

@ -338,7 +353,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        </a>
      );
    } else if (url) {
-      if (!this.props.hideImage && isVideo(url)) {
+      if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
        return (
          <a
            className="text-body"
@ -423,55 +438,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    );
  }

-  voteBar() {
-    return (
-      <div className={`vote-bar col-1 pe-0 small text-center`}>
-        <button
-          className={`btn-animate btn btn-link p-0 ${
-            this.postView.my_vote == 1 ? "text-info" : "text-muted"
-          }`}
-          onClick={linkEvent(this, this.handleUpvote)}
-          data-tippy-content={I18NextService.i18n.t("upvote")}
-          aria-label={I18NextService.i18n.t("upvote")}
-          aria-pressed={this.postView.my_vote === 1}
-        >
-          {this.state.upvoteLoading ? (
-            <Spinner />
-          ) : (
-            <Icon icon="arrow-up1" classes="upvote" />
-          )}
-        </button>
-        {showScores() ? (
-          <div
-            className={`unselectable pointer text-muted px-1 post-score`}
-            data-tippy-content={this.pointsTippy}
-          >
-            {numToSI(this.postView.counts.score)}
-          </div>
-        ) : (
-          <div className="p-1"></div>
-        )}
-        {this.props.enableDownvotes && (
-          <button
-            className={`btn-animate btn btn-link p-0 ${
-              this.postView.my_vote == -1 ? "text-danger" : "text-muted"
-            }`}
-            onClick={linkEvent(this, this.handleDownvote)}
-            data-tippy-content={I18NextService.i18n.t("downvote")}
-            aria-label={I18NextService.i18n.t("downvote")}
-            aria-pressed={this.postView.my_vote === -1}
-          >
-            {this.state.downvoteLoading ? (
-              <Spinner />
-            ) : (
-              <Icon icon="arrow-down1" classes="downvote" />
-            )}
-          </button>
-        )}
-      </div>
-    );
-  }
-
  get postLink() {
    const post = this.postView.post;
    return (
@ -538,7 +504,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          )}
          {post.deleted && (
            <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
              data-tippy-content={I18NextService.i18n.t("deleted")}
            >
              <Icon icon="trash" classes="icon-inline text-danger" />
@ -546,7 +512,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          )}
          {post.locked && (
            <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
              data-tippy-content={I18NextService.i18n.t("locked")}
            >
              <Icon icon="lock" classes="icon-inline text-danger" />
@ -554,7 +520,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          )}
          {post.featured_community && (
            <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
              data-tippy-content={I18NextService.i18n.t(
                "featured_in_community"
              )}
@ -565,7 +531,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          )}
          {post.featured_local && (
            <small
-              className="unselectable pointer ms-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted fst-italic"
              data-tippy-content={I18NextService.i18n.t("featured_in_local")}
              aria-label={I18NextService.i18n.t("featured_in_local")}
            >
@ -591,7 +557,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
      <p className="d-flex text-muted align-items-center gap-1 small m-0">
        {url && !(hostname(url) === getExternalHost()) && (
          <a
-            className="text-muted font-italic"
+            className="text-muted fst-italic"
            href={url}
            title={url}
            rel={relTags}
@ -651,7 +617,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
            <Icon icon="fedilink" inline />
          </a>
        )}
-        {mobile && !this.props.viewOnly && this.mobileVotes}
+        {mobile && !this.props.viewOnly && (
+          <VoteButtonsCompact
+            voteContentType={VoteContentType.Post}
+            id={this.postView.post.id}
+            onVote={this.props.onPostVote}
+            enableDownvotes={this.props.enableDownvotes}
+            counts={this.postView.counts}
+            my_vote={this.postView.my_vote}
+          />
+        )}
        {UserService.Instance.myUserInfo &&
          !this.props.viewOnly &&
          this.postActions()}
@ -707,13 +682,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>
@ -763,9 +741,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        <Icon icon="message-square" classes="me-1" inline />
        {post_view.counts.comments}
        {this.unreadCount && (
-          <span className="text-muted fst-italic">
-            ({this.unreadCount} {I18NextService.i18n.t("new")})
-          </span>
+          <>
+            {" "}
+            <span className="fst-italic">
+              ({this.unreadCount} {I18NextService.i18n.t("new")})
+            </span>
+          </>
        )}
      </Link>
    );
@ -778,69 +759,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
      : pv.unread_comments;
  }

-  get mobileVotes() {
-    // TODO: make nicer
-    const tippy = showScores()
-      ? { "data-tippy-content": this.pointsTippy }
-      : {};
-    return (
-      <>
-        <div>
-          <button
-            className={`btn-animate btn py-0 px-1 ${
-              this.postView.my_vote === 1 ? "text-info" : "text-muted"
-            }`}
-            {...tippy}
-            onClick={linkEvent(this, this.handleUpvote)}
-            aria-label={I18NextService.i18n.t("upvote")}
-            aria-pressed={this.postView.my_vote === 1}
-          >
-            {this.state.upvoteLoading ? (
-              <Spinner />
-            ) : (
-              <>
-                <Icon icon="arrow-up1" classes="icon-inline small" />
-                {showScores() && (
-                  <span className="ms-2">
-                    {numToSI(this.postView.counts.upvotes)}
-                  </span>
-                )}
-              </>
-            )}
-          </button>
-          {this.props.enableDownvotes && (
-            <button
-              className={`ms-2 btn-animate btn py-0 px-1 ${
-                this.postView.my_vote === -1 ? "text-danger" : "text-muted"
-              }`}
-              onClick={linkEvent(this, this.handleDownvote)}
-              {...tippy}
-              aria-label={I18NextService.i18n.t("downvote")}
-              aria-pressed={this.postView.my_vote === -1}
-            >
-              {this.state.downvoteLoading ? (
-                <Spinner />
-              ) : (
-                <>
-                  <Icon icon="arrow-down1" classes="icon-inline small" />
-                  {showScores() && (
-                    <span
-                      className={classNames("ms-2", {
-                        invisible: this.postView.counts.downvotes === 0,
-                      })}
-                    >
-                      {numToSI(this.postView.counts.downvotes)}
-                    </span>
-                  )}
-                </>
-              )}
-            </button>
-          )}
-        </div>
-      </>
-    );
-  }
-
  get saveButton() {
    const saved = this.postView.saved;
    const label = saved
@ -939,7 +857,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
      <button
        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
        onClick={linkEvent(this, this.handleDeleteClick)}
-        aria-label={label}
      >
        {this.state.deleteLoading ? (
          <Spinner />
@ -1442,7 +1359,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          {this.postTitleLine()}
        </div>
        <div className="col-4">
-          {/* Post body prev or thumbnail */}
+          {/* Post thumbnail */}
          {!this.state.imageExpanded && this.thumbnail()}
        </div>
      </div>
@ -1489,7 +1406,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
        {/* The larger view*/}
        <div className="d-none d-sm-block">
          <article className="row post-container">
-            {!this.props.viewOnly && this.voteBar()}
+            {!this.props.viewOnly && (
+              <VoteButtons
+                voteContentType={VoteContentType.Post}
+                id={this.postView.post.id}
+                onVote={this.props.onPostVote}
+                enableDownvotes={this.props.enableDownvotes}
+                counts={this.postView.counts}
+                my_vote={this.postView.my_vote}
+              />
+            )}
            <div className="col-sm-2 pe-0 post-media">
              <div className="">{this.thumbnail()}</div>
            </div>
@ -1854,24 +1780,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
    setupTippy();
  }

-  handleUpvote(i: PostListing) {
-    i.setState({ upvoteLoading: true });
-    i.props.onPostVote({
-      post_id: i.postView.post.id,
-      score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
-      auth: myAuthRequired(),
-    });
-  }
-
-  handleDownvote(i: PostListing) {
-    i.setState({ downvoteLoading: true });
-    i.props.onPostVote({
-      post_id: i.postView.post.id,
-      score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
-      auth: myAuthRequired(),
-    });
-  }
-
  get pointsTippy(): string {
    const points = I18NextService.i18n.t("number_of_points", {
      count: Number(this.postView.counts.score),
--- 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
@ -109,17 +109,17 @@ export class PrivateMessage extends Component<
              </span>
            </li>
            <li className="list-inline-item">
-              <div
-                role="button"
-                className="pointer text-monospace"
+              <button
+                type="button"
+                className="pointer text-monospace p-0 bg-transparent border-0 d-block"
                onClick={linkEvent(this, this.handleMessageCollapse)}
              >
                {this.state.collapsed ? (
-                  <Icon icon="plus-square" classes="icon-inline" />
+                  <Icon icon="plus-square" />
                ) : (
-                  <Icon icon="minus-square" classes="icon-inline" />
+                  <Icon icon="minus-square" />
                )}
-              </div>
+              </button>
            </li>
          </ul>
          {this.state.showEdit && (
@ -140,11 +140,12 @@ export class PrivateMessage extends Component<
                  dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
                />
              )}
-              <ul className="list-inline mb-0 text-muted font-weight-bold">
+              <ul className="list-inline mb-0 text-muted fw-bold">
                {!this.mine && (
                  <>
                    <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/components/search.tsx
+++ b/src/shared/components/search.tsx
@ -332,7 +332,9 @@ export class Search extends Component<any, SearchState> {
  }

  async componentDidMount() {
-    if (!this.state.isIsomorphic) {
+    if (
+      !(this.state.isIsomorphic || this.props.history.location.state?.searched)
+    ) {
      const promises = [this.fetchCommunities()];
      if (this.state.searchText) {
        promises.push(this.search());
@ -1095,7 +1097,9 @@ export class Search extends Component<any, SearchState> {
      sort: sort ?? urlSort,
    };

-    this.props.history.push(`/search${getQueryString(queryParams)}`);
+    this.props.history.push(`/search${getQueryString(queryParams)}`, {
+      searched: true,
+    });

    await this.search();
  }
--- a/src/shared/interfaces.ts
+++ b/src/shared/interfaces.ts
@ -77,6 +77,11 @@ export enum VoteType {
  Downvote,
 }

+export enum VoteContentType {
+  Post,
+  Comment,
+}
+
 export interface CommentNodeI {
  comment_view: CommentView;
  children: Array<CommentNodeI>;