Merge pull request #1797 from jsit/fix/markdown-toolbar-button-focus

fix: Add focus border to markdown toolbar buttons

.github/pull_request_template.md

@@ -0,0 +1,12 @@
+## Description
+
+<!-- Please describe exactly what this PR changes, including URLs and issue
+numbers. If it fixes an issue, add "Fixes #XXXX" -->
+
+## Screenshots
+
+<!-- Please include before and after screenshots if applicable -->
+
+### Before
+
+### After

.prettierignore

@@ -2,3 +2,4 @@ src/shared/translations
 lemmy-translations
 src/assets/css/themes/*.css
 stats.json
+dist

Dockerfile

@@ -27,7 +27,7 @@ COPY .git .git
 RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"
 
 RUN yarn --production --prefer-offline
-RUN yarn build:prod
+RUN NODE_OPTIONS="--max-old-space-size=8192" yarn build:prod
 
 # Prune the image
 RUN node-prune /usr/src/app/node_modules

dev.dockerfile

@@ -20,6 +20,7 @@ COPY generate_translations.js \
 
 COPY lemmy-translations lemmy-translations
 COPY src src
+COPY .git .git
 
 # Set UI version 
 RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.1-rc.3",
+  "version": "0.18.1-rc.9",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -8,9 +8,9 @@
   "scripts": {
     "analyze": "webpack --mode=none",
     "prebuild:dev": "yarn clean && node generate_translations.js",
-    "build:dev": "webpack --mode=development",
+    "build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
     "prebuild:prod": "yarn clean && node generate_translations.js",
-    "build:prod": "webpack --mode=production",
+    "build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn build:dev --watch",
     "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
@@ -48,11 +48,11 @@
     "check-password-strength": "^2.0.7",
     "classnames": "^2.3.1",
     "clean-webpack-plugin": "^4.0.0",
+    "cookie": "^0.5.0",
     "copy-webpack-plugin": "^11.0.0",
     "cross-fetch": "^3.1.5",
     "css-loader": "^6.7.3",
     "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
     "emoji-mart": "^5.4.0",
     "emoji-short-name": "^2.0.0",
     "express": "~4.18.2",
@@ -66,7 +66,6 @@
     "inferno-i18next-dess": "0.0.2",
     "inferno-router": "^8.1.1",
     "inferno-server": "^8.1.1",
-    "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
     "lemmy-js-client": "0.18.0-rc.2",
     "lodash.isequal": "^4.5.0",
@@ -98,6 +97,7 @@
     "@babel/core": "^7.21.8",
     "@types/autosize": "^4.0.0",
     "@types/bootstrap": "^5.2.6",
+    "@types/cookie": "^0.5.1",
     "@types/express": "^4.17.17",
     "@types/html-to-text": "^9.0.0",
     "@types/lodash.isequal": "^4.5.6",
@@ -126,6 +126,7 @@
     "style-loader": "^3.3.2",
     "terser": "^5.17.3",
     "typescript": "^5.0.4",
+    "typescript-language-server": "^3.3.2",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-dev-server": "4.15.0"
   },

src/assets/css/main.css

@@ -81,6 +81,7 @@
 }
 
 .vote-bar {
+  min-width: 5ch;
   margin-top: -6.5px;
 }
 
@@ -253,10 +254,6 @@ hr {
   -ms-filter: blur(10px);
 }
 
-.img-cover {
-  object-fit: cover;
-}
-
 .img-expanded {
   max-height: 90vh;
 }
@@ -349,10 +346,12 @@ br.big {
 }
 
 .avatar-overlay {
-  width: 20%;
-  height: 20%;
+  width: 20vw;
+  height: 20vw;
   max-width: 120px;
   max-height: 120px;
+  min-width: 80px;
+  min-height: 80px;
 }
 
 .avatar-pushup {

src/server/handlers/catch-all-handler.tsx

@@ -1,11 +1,11 @@
 import { initializeSite, isAuthPath } from "@utils/app";
 import { getHttpBaseInternal } from "@utils/env";
 import { ErrorPageData } from "@utils/types";
+import * as cookie from "cookie";
 import fetch from "cross-fetch";
 import type { Request, Response } from "express";
 import { StaticRouter, matchPath } from "inferno-router";
 import { renderToString } from "inferno-server";
-import IsomorphicCookie from "isomorphic-cookie";
 import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import { App } from "../../shared/components/app/app";
 import {
@@ -25,11 +25,15 @@ import { setForwardedHeaders } from "../utils/set-forwarded-headers";
 export default async (req: Request, res: Response) => {
   try {
     const activeRoute = routes.find(route => matchPath(req.path, route));
-    let auth: string | undefined = IsomorphicCookie.load("jwt", req);
+
+    let auth = req.headers.cookie
+      ? cookie.parse(req.headers.cookie).jwt
+      : undefined;
 
     const getSiteForm: GetSite = { auth };
 
     const headers = setForwardedHeaders(req.headers);
+
     const client = wrapClient(
       new LemmyHttp(getHttpBaseInternal(), { fetchFunction: fetch, headers })
     );
@@ -43,6 +47,7 @@ export default async (req: Request, res: Response) => {
     let routeData: RouteData = {};
     let errorPageData: ErrorPageData | undefined = undefined;
     let try_site = await client.getSite(getSiteForm);
+
     if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
       console.error(
         "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
@@ -85,12 +90,13 @@ export default async (req: Request, res: Response) => {
     }
 
     const error = Object.values(routeData).find(
-      res => res.state === "failed"
+      res => res.state === "failed" && res.msg !== "couldnt_find_object" // TODO: find a better way of handling errors
     ) as FailedRequestState | undefined;
 
     // Redirect to the 404 if there's an API error
     if (error) {
       console.error(error.msg);
+
       if (error.msg === "instance_is_private") {
         return res.redirect(`/signup`);
       } else {
@@ -119,6 +125,7 @@ export default async (req: Request, res: Response) => {
     // If an error is caught here, the error page couldn't even be rendered
     console.error(err);
     res.statusCode = 500;
+
     return res.send(
       process.env.NODE_ENV === "development" ? err.message : "Server error"
     );

src/server/index.tsx

@@ -1,4 +1,5 @@
 import { setupDateFns } from "@utils/app";
+import { getStaticDir } from "@utils/env";
 import express from "express";
 import path from "path";
 import process from "process";
@@ -19,7 +20,13 @@ const [hostname, port] = process.env["LEMMY_UI_HOST"]
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
-server.use("/static", express.static(path.resolve("./dist")));
+server.use(
+  getStaticDir(),
+  express.static(path.resolve("./dist"), {
+    maxAge: 24 * 60 * 60 * 1000, // 1 day
+    immutable: true,
+  })
+);
 server.use(setCacheControl);
 
 if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {

src/server/middleware.ts

@@ -1,5 +1,5 @@
-import type { NextFunction, Response } from "express";
-import { UserService } from "../shared/services";
+import type { NextFunction, Request, Response } from "express";
+import { hasJwtCookie } from "./utils/has-jwt-cookie";
 
 export function setDefaultCsp({
   res,
@@ -18,24 +18,35 @@ export function setDefaultCsp({
 
 // Set cache-control headers. If user is logged in, set `private` to prevent storing data in
 // shared caches (eg nginx) and leaking of private data. If user is not logged in, allow caching
-// all responses for 60 seconds to reduce load on backend and database. The specific cache
+// all responses for 5 seconds to reduce load on backend and database. The specific cache
 // interval is rather arbitrary and could be set higher (less server load) or lower (fresher data).
 //
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-export function setCacheControl({
-  res,
-  next,
-}: {
-  res: Response;
-  next: NextFunction;
-}) {
-  const user = UserService.Instance;
-  let caching: string;
-  if (user.auth()) {
-    caching = "private";
-  } else {
-    caching = "public, max-age=60";
+export function setCacheControl(
+  req: Request,
+  res: Response,
+  next: NextFunction
+) {
+  if (process.env.NODE_ENV !== "production") {
+    return next();
   }
+
+  let caching: string;
+
+  if (
+    req.path.match(/\.(js|css|txt|manifest\.webmanifest)\/?$/) ||
+    req.path.includes("/css/themelist")
+  ) {
+    // Static content gets cached publicly for a day
+    caching = "public, max-age=86400";
+  } else {
+    if (hasJwtCookie(req)) {
+      caching = "private";
+    } else {
+      caching = "public, max-age=5";
+    }
+  }
+
   res.setHeader("Cache-Control", caching);
 
   next();

src/server/utils/create-ssr-html.tsx

@@ -1,3 +1,4 @@
+import { getStaticDir } from "@utils/env";
 import { Helmet } from "inferno-helmet";
 import { renderToString } from "inferno-server";
 import serialize from "serialize-javascript";
@@ -23,7 +24,7 @@ export async function createSsrHtml(
 
   if (!appleTouchIcon) {
     appleTouchIcon = site?.site_view.site.icon
-      ? `data:image/png;base64,${sharp(
+      ? `data:image/png;base64,${await sharp(
           await fetchIconPng(site.site_view.site.icon)
         )
           .resize(180, 180)
@@ -87,7 +88,7 @@ export async function createSsrHtml(
     <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
   
     <!-- Styles -->
-    <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
+    <link rel="stylesheet" type="text/css" href="${getStaticDir()}/styles/styles.css" />
   
     <!-- Current theme and more -->
     ${helmet.link.toString() || fallbackTheme}
@@ -102,7 +103,7 @@ export async function createSsrHtml(
       </noscript>
   
       <div id='root'>${root}</div>
-      <script defer src='/static/js/client.js'></script>
+      <script defer src='${getStaticDir()}/js/client.js'></script>
     </body>
   </html>
   `;

src/server/utils/has-jwt-cookie.ts

@@ -0,0 +1,6 @@
+import * as cookie from "cookie";
+import type { Request } from "express";
+
+export function hasJwtCookie(req: Request): boolean {
+  return Boolean(cookie.parse(req.headers.cookie ?? "").jwt?.length);
+}

src/shared/components/app/app.tsx

@@ -1,10 +1,11 @@
 import { isAuthPath, setIsoData } from "@utils/app";
+import { dataBsTheme } from "@utils/browser";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
-import { FirstLoadService, I18NextService } from "../../services";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
 import AuthGuard from "../common/auth-guard";
 import ErrorGuard from "../common/error-guard";
 import { ErrorPage } from "./error-page";
@@ -25,6 +26,13 @@ export class App extends Component<any, any> {
     event.preventDefault();
     this.mainContentRef.current?.focus();
   }
+
+  user = UserService.Instance.myUserInfo;
+
+  componentDidMount() {
+    this.setState({ bsTheme: dataBsTheme(this.user) });
+  }
+
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
@@ -32,7 +40,11 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site">
+          <div
+            id="app"
+            className="lemmy-site"
+            data-bs-theme={this.state?.bsTheme}
+          >
             <button
               type="button"
               className="btn skip-link bg-light position-absolute start-0 z-3"

src/shared/components/app/error-page.tsx

@@ -1,4 +1,5 @@
 import { setIsoData } from "@utils/app";
+import { removeAuthParam } from "@utils/helpers";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
@@ -58,7 +59,7 @@ export class ErrorPage extends Component<any, any> {
           <T
             i18nKey="error_code_message"
             parent="p"
-            interpolation={{ error: errorPageData.error }}
+            interpolation={{ error: removeAuthParam(errorPageData.error) }}
           >
             #<strong className="text-danger">#</strong>#
           </T>

src/shared/components/comment/comment-node.tsx

@@ -1,7 +1,6 @@
 import {
   colorList,
   getCommentParentId,
-  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   showScores,
@@ -63,6 +62,7 @@ import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
+import { UserBadges } from "../common/user-badges";
 import { VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@@ -299,7 +299,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           >
             <div className="d-flex flex-wrap align-items-center text-muted small">
               <button
-                className="btn btn-sm text-muted me-2"
+                className="btn btn-sm btn-link text-muted me-2"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
                 aria-label={this.expandText}
                 data-tippy-content={this.expandText}
@@ -310,41 +310,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 />
               </button>
 
-              <span className="me-2">
-                <PersonListing person={cv.creator} />
-              </span>
+              <PersonListing person={cv.creator} />
 
               {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes="text-danger me-2" />
+                <Icon icon="shield" inline classes="text-danger ms-1" />
               )}
 
-              {this.isPostCreator &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("op").toUpperCase(),
-                  tooltip: I18NextService.i18n.t("creator"),
-                  classes: "text-bg-info",
-                  shrink: false,
-                })}
-
-              {isMod_ &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("mod"),
-                  tooltip: I18NextService.i18n.t("mod"),
-                  classes: "text-bg-primary",
-                })}
-
-              {isAdmin_ &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("admin"),
-                  tooltip: I18NextService.i18n.t("admin"),
-                  classes: "text-bg-danger",
-                })}
-
-              {cv.creator.bot_account &&
-                getRoleLabelPill({
-                  label: I18NextService.i18n.t("bot_account").toLowerCase(),
-                  tooltip: I18NextService.i18n.t("bot_account"),
-                })}
+              <UserBadges
+                classNames="ms-1"
+                isPostCreator={this.isPostCreator}
+                isMod={isMod_}
+                isAdmin={isAdmin_}
+                isBot={cv.creator.bot_account}
+              />
 
               {this.props.showCommunity && (
                 <>
@@ -1483,6 +1461,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       comment_id: i.commentId,
       removed: !i.commentView.comment.removed,
       auth: myAuthRequired(),
+      reason: i.state.removeReason,
     });
   }
 

src/shared/components/common/emoji-picker.tsx

@@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     return (
       <span className="emoji-picker">
         <button
-          className="btn btn-sm text-muted"
+          className="btn btn-sm btn-link rounded-0 text-muted"
           data-tippy-content={I18NextService.i18n.t("emoji")}
           aria-label={I18NextService.i18n.t("emoji")}
           disabled={this.props.disabled}

src/shared/components/common/icon.tsx

@@ -1,3 +1,4 @@
+import { getStaticDir } from "@utils/env";
 import classNames from "classnames";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
@@ -23,7 +24,9 @@ export class Icon extends Component<IconProps, any> {
         })}
       >
         <use
-          xlinkHref={`/static/assets/symbols.svg#icon-${this.props.icon}`}
+          xlinkHref={`${getStaticDir()}/assets/symbols.svg#icon-${
+            this.props.icon
+          }`}
         ></use>
         <div className="visually-hidden">
           <title>{this.props.icon}</title>

src/shared/components/common/image-upload-form.tsx

@@ -1,4 +1,5 @@
 import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { HttpService, I18NextService, UserService } from "../../services";
 import { toast } from "../../toast";
@@ -33,38 +34,35 @@ export class ImageUploadForm extends Component<
   render() {
     return (
       <form className="image-upload-form d-inline">
-        <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 : ""}
-                className={`img-fluid ${
-                  this.props.rounded ? "rounded-circle" : ""
-                }`}
-              />
-              <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" />
-              </button>
-            </span>
-          ) : (
-            <span className="btn btn-secondary">{this.props.uploadTitle}</span>
-          )}
-        </label>
+        {this.props.imageSrc && (
+          <span className="d-inline-block position-relative mb-2">
+            {/* TODO: Create "Current Iamge" translation for alt text */}
+            <img
+              alt=""
+              src={this.props.imageSrc}
+              height={this.props.rounded ? 60 : ""}
+              width={this.props.rounded ? 60 : ""}
+              className={classNames({
+                "rounded-circle object-fit-cover": this.props.rounded,
+                "img-fluid": !this.props.rounded,
+              })}
+            />
+            <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" />
+            </button>
+          </span>
+        )}
         <input
           id={this.id}
           type="file"
           accept="image/*,video/*"
+          className="small form-control"
           name={this.id}
-          className="d-none"
           disabled={!UserService.Instance.myUserInfo}
           onChange={linkEvent(this, this.handleImageUpload)}
         />

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

@@ -170,31 +170,39 @@ export class MarkdownTextArea extends Component<
                 <EmojiPicker
                   onEmojiClick={e => this.handleEmoji(this, e)}
                 ></EmojiPicker>
-                <form className="btn btn-sm text-muted fw-bold">
-                  <label
-                    htmlFor={`file-upload-${this.id}`}
-                    className={`mb-0 ${
-                      UserService.Instance.myUserInfo && "pointer"
-                    }`}
-                    data-tippy-content={I18NextService.i18n.t("upload_image")}
-                  >
-                    {this.state.imageUploadStatus ? (
-                      <Spinner />
-                    ) : (
+                <label
+                  htmlFor={`file-upload-${this.id}`}
+                  className={classNames("mb-0", {
+                    pointer: UserService.Instance.myUserInfo,
+                  })}
+                  data-tippy-content={I18NextService.i18n.t("upload_image")}
+                >
+                  {this.state.imageUploadStatus ? (
+                    <Spinner />
+                  ) : (
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-link rounded-0 text-muted mb-0"
+                      onClick={() => {
+                        document
+                          .getElementById(`file-upload-${this.id}`)
+                          ?.click();
+                      }}
+                    >
                       <Icon icon="image" classes="icon-inline" />
-                    )}
-                  </label>
-                  <input
-                    id={`file-upload-${this.id}`}
-                    type="file"
-                    accept="image/*,video/*"
-                    name="file"
-                    className="d-none"
-                    multiple
-                    disabled={!UserService.Instance.myUserInfo}
-                    onChange={linkEvent(this, this.handleImageUpload)}
-                  />
-                </form>
+                    </button>
+                  )}
+                </label>
+                <input
+                  id={`file-upload-${this.id}`}
+                  type="file"
+                  accept="image/*,video/*"
+                  name="file"
+                  className="d-none"
+                  multiple
+                  disabled={!UserService.Instance.myUserInfo}
+                  onChange={linkEvent(this, this.handleImageUpload)}
+                />
                 {this.getFormatButton("header", this.handleInsertHeader)}
                 {this.getFormatButton(
                   "strikethrough",
@@ -345,7 +353,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <button
-        className="btn btn-sm text-muted"
+        className="btn btn-sm btn-link rounded-0 text-muted"
         data-tippy-content={I18NextService.i18n.t(type)}
         aria-label={I18NextService.i18n.t(type)}
         onClick={linkEvent(this, handleClick)}
@@ -473,7 +481,7 @@ export class MarkdownTextArea extends Component<
   // Keybind handler
   // Keybinds inspired by github comment area
   handleKeyBinds(i: MarkdownTextArea, event: KeyboardEvent) {
-    if (event.ctrlKey) {
+    if (event.ctrlKey || event.metaKey) {
       switch (event.key) {
         case "k": {
           i.handleInsertLink(i, event);
@@ -702,18 +710,20 @@ export class MarkdownTextArea extends Component<
   quoteInsert() {
     const textarea: any = document.getElementById(this.id);
     const selectedText = window.getSelection()?.toString();
-    const { content } = this.state;
+    let { content } = this.state;
     if (selectedText) {
       const quotedText =
         selectedText
           .split("\n")
           .map(t => `> ${t}`)
           .join("\n") + "\n\n";
+
       if (!content) {
-        this.setState({ content: "" });
+        content = "";
       } else {
-        this.setState({ content: `${content}\n` });
+        content = `${content}\n\n`;
       }
+
       this.setState({
         content: `${content}${quotedText}`,
       });

src/shared/components/common/moment-time.tsx

@@ -1,5 +1,5 @@
 import { capitalizeFirstLetter, formatPastDate } from "@utils/helpers";
-import { formatInTimeZone } from "date-fns-tz";
+import { format } from "date-fns";
 import parseISO from "date-fns/parseISO";
 import { Component } from "inferno";
 import { I18NextService } from "../../services";
@@ -13,9 +13,8 @@ interface MomentTimeProps {
 }
 
 function formatDate(input: string) {
-  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const parsed = parseISO(input + "Z");
-  return formatInTimeZone(parsed, tz, "PPPPpppp");
+  return format(parsed, "PPPPpppp");
 }
 
 export class MomentTime extends Component<MomentTimeProps, any> {

src/shared/components/common/pictrs-image.tsx

@@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
           className={classNames("overflow-hidden pictrs-image", {
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
             banner: this.props.banner,
-            "thumbnail rounded":
+            "thumbnail rounded object-fit-cover":
               this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "img-cover img-icon me-1": this.props.icon,
-            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+            "object-fit-cover img-icon me-1": this.props.icon,
+            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}

src/shared/components/common/searchable-select.tsx

@@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="searchable-select dropdown">
+      <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
         <button
           id={id}
           type="button"

src/shared/components/common/user-badges.tsx

@@ -0,0 +1,112 @@
+import classNames from "classnames";
+import { Component } from "inferno";
+import { I18NextService } from "../../services";
+
+interface UserBadgesProps {
+  isBanned?: boolean;
+  isDeleted?: boolean;
+  isPostCreator?: boolean;
+  isMod?: boolean;
+  isAdmin?: boolean;
+  isBot?: boolean;
+  classNames?: string;
+}
+
+export function getRoleLabelPill({
+  label,
+  tooltip,
+  classes,
+  shrink = true,
+}: {
+  label: string;
+  tooltip: string;
+  classes?: string;
+  shrink?: boolean;
+}) {
+  return (
+    <span
+      className={`badge ${classes ?? "text-bg-light"}`}
+      aria-label={tooltip}
+      data-tippy-content={tooltip}
+    >
+      {shrink ? label[0].toUpperCase() : label}
+    </span>
+  );
+}
+
+export class UserBadges extends Component<UserBadgesProps> {
+  render() {
+    return (
+      (this.props.isBanned ||
+        this.props.isPostCreator ||
+        this.props.isMod ||
+        this.props.isAdmin ||
+        this.props.isBot) && (
+        <span
+          className={classNames(
+            "row d-inline-flex gx-1",
+            this.props.classNames
+          )}
+        >
+          {this.props.isBanned && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("banned"),
+                tooltip: I18NextService.i18n.t("banned"),
+                classes: "text-bg-danger",
+                shrink: false,
+              })}
+            </span>
+          )}
+          {this.props.isDeleted && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("deleted"),
+                tooltip: I18NextService.i18n.t("deleted"),
+                classes: "text-bg-danger",
+                shrink: false,
+              })}
+            </span>
+          )}
+
+          {this.props.isPostCreator && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("op").toUpperCase(),
+                tooltip: I18NextService.i18n.t("creator"),
+                classes: "text-bg-info",
+                shrink: false,
+              })}
+            </span>
+          )}
+          {this.props.isMod && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("mod"),
+                tooltip: I18NextService.i18n.t("mod"),
+                classes: "text-bg-primary",
+              })}
+            </span>
+          )}
+          {this.props.isAdmin && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("admin"),
+                tooltip: I18NextService.i18n.t("admin"),
+                classes: "text-bg-danger",
+              })}
+            </span>
+          )}
+          {this.props.isBot && (
+            <span className="col">
+              {getRoleLabelPill({
+                label: I18NextService.i18n.t("bot_account").toLowerCase(),
+                tooltip: I18NextService.i18n.t("bot_account"),
+              })}
+            </span>
+          )}
+        </span>
+      )
+    );
+  }
+}

src/shared/components/common/vote-buttons.tsx

@@ -64,8 +64,6 @@ const handleUpvote = (i: VoteButtons) => {
         auth: myAuthRequired(),
       });
   }
-
-  i.setState({ upvoteLoading: false });
 };
 
 const handleDownvote = (i: VoteButtons) => {
@@ -86,7 +84,6 @@ const handleDownvote = (i: VoteButtons) => {
         auth: myAuthRequired(),
       });
   }
-  i.setState({ downvoteLoading: false });
 };
 
 export class VoteButtonsCompact extends Component<
@@ -102,12 +99,21 @@ export class VoteButtonsCompact extends Component<
     super(props, context);
   }
 
+  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+    if (this.props !== nextProps) {
+      this.setState({
+        upvoteLoading: false,
+        downvoteLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
       <>
         <button
           type="button"
-          className={`btn-animate btn py-0 px-1 ${
+          className={`btn btn-animate btn-sm btn-link py-0 px-1 ${
             this.props.my_vote === 1 ? "text-info" : "text-muted"
           }`}
           data-tippy-content={tippy(this.props.counts)}
@@ -131,7 +137,7 @@ export class VoteButtonsCompact extends Component<
         {this.props.enableDownvotes && (
           <button
             type="button"
-            className={`ms-2 btn-animate btn py-0 px-1 ${
+            className={`ms-2 btn btn-sm btn-link btn-animate btn py-0 px-1 ${
               this.props.my_vote === -1 ? "text-danger" : "text-muted"
             }`}
             onClick={linkEvent(this, handleDownvote)}
@@ -172,9 +178,18 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
     super(props, context);
   }
 
+  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+    if (this.props !== nextProps) {
+      this.setState({
+        upvoteLoading: false,
+        downvoteLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
-      <div className="vote-bar pe-0 small text-center">
+      <div className="vote-bar small text-center">
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${
@@ -193,7 +208,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
         </button>
         {showScores() ? (
           <div
-            className="unselectable pointer text-muted px-1 post-score"
+            className="unselectable pointer text-muted post-score"
             data-tippy-content={tippy(this.props.counts)}
           >
             {numToSI(this.props.counts.score)}

src/shared/components/community/communities.tsx

@@ -102,7 +102,7 @@ export class Communities extends Component<any, CommunitiesState> {
         const { listingType, page } = this.getCommunitiesQueryParams();
         return (
           <div>
-            <h1 className="h4">
+            <h1 className="h4 mb-4">
               {I18NextService.i18n.t("list_of_communities")}
             </h1>
             <div className="row g-2 justify-content-between">

src/shared/components/community/community.tsx

@@ -485,7 +485,7 @@ export class Community extends Component<
       community && (
         <div className="mb-2">
           <BannerIconHeader banner={community.banner} icon={community.icon} />
-          <h5 className="mb-0 overflow-wrap-anywhere">{community.title}</h5>
+          <h1 className="h4 mb-0 overflow-wrap-anywhere">{community.title}</h1>
           <CommunityLink
             community={community}
             realLink

src/shared/components/community/create-community.tsx

@@ -39,7 +39,9 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("create_community")}</h5>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("create_community")}
+            </h1>
             <CommunityForm
               onUpsertCommunity={this.handleCommunityCreate}
               enableNsfw={enableNsfw(this.state.siteRes)}

src/shared/components/community/sidebar.tsx

@@ -169,7 +169,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
     return (
       <div>
-        <h5 className="mb-0">
+        <h2 className="h5 mb-0">
           {this.props.showIcon && !community.removed && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
@@ -191,7 +191,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               {I18NextService.i18n.t("nsfw")}
             </small>
           )}
-        </h5>
+        </h2>
         <CommunityLink
           community={community}
           realLink
@@ -258,7 +258,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <Spinner />
           ) : (
             <>
-              <Icon icon="check" classes="icon-inline text-success me-1" />
+              <Icon icon="check" classes="icon-inline me-1" />
               {I18NextService.i18n.t("joined")}
             </>
           )}

src/shared/components/home/admin-settings.tsx

@@ -135,6 +135,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                   role="tabpanel"
                   id="site-tab-pane"
                 >
+                  <h1 className="h4 mb-4">
+                    {I18NextService.i18n.t("site_config")}
+                  </h1>
                   <div className="row">
                     <div className="col-12 col-md-6">
                       <SiteForm
@@ -149,6 +152,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                     </div>
                     <div className="col-12 col-md-6">
                       {this.admins()}
+                      <hr />
                       {this.bannedUsers()}
                     </div>
                   </div>
@@ -249,7 +253,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   admins() {
     return (
       <>
-        <h5>{capitalizeFirstLetter(I18NextService.i18n.t("admins"))}</h5>
+        <h2 className="h5">
+          {capitalizeFirstLetter(I18NextService.i18n.t("admins"))}
+        </h2>
         <ul className="list-unstyled">
           {this.state.siteRes.admins.map(admin => (
             <li key={admin.person.id} className="list-inline-item">
@@ -289,7 +295,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         const bans = this.state.bannedRes.data.banned;
         return (
           <>
-            <h5>{I18NextService.i18n.t("banned_users")}</h5>
+            <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
             <ul className="list-unstyled">
               {bans.map(banned => (
                 <li key={banned.person.id} className="list-inline-item">

src/shared/components/home/emojis-form.tsx

@@ -77,7 +77,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("custom_emojis")}</h1>
         {customEmojisLookup.size > 0 && (
           <div>
             <EmojiMart
@@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
           </div>
         )}
         <div className="table-responsive">
-          <table id="emojis_table" className="table table-sm table-hover">
+          <table
+            id="emojis_table"
+            className="table table-sm table-hover align-middle"
+          >
             <thead className="pointer">
               <tr>
                 <th>{I18NextService.i18n.t("column_emoji")}</th>
@@ -129,30 +132,31 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         />
                       )}
                       {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"
+                        <label
+                          // TODO: Fix this linting violation
+                          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                          tabIndex={0}
+                          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
                             )}
-                          >
-                            {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>
+                          />
+                        </label>
                       )}
                     </td>
                     <td className="text-right">

src/shared/components/home/home.tsx

@@ -279,13 +279,15 @@ export class Home extends Component<any, HomeState> {
         trendingCommunitiesRes,
         commentsRes,
         postsRes,
-        tagline: getRandomFromList(this.state?.siteRes?.taglines ?? [])
-          ?.content,
         isIsomorphic: true,
       };
 
       HomeCacheService.postsRes = postsRes;
     }
+
+    this.state.tagline = getRandomFromList(
+      this.state?.siteRes?.taglines ?? []
+    )?.content;
   }
 
   componentWillUnmount() {

src/shared/components/home/instances.tsx

@@ -85,24 +85,35 @@ export class Instances extends Component<any, InstancesState> {
       case "success": {
         const instances = this.state.instancesRes.data.federated_instances;
         return instances ? (
-          <div className="row">
-            <div className="col-md-6">
-              <h5>{I18NextService.i18n.t("linked_instances")}</h5>
-              {this.itemList(instances.linked)}
+          <>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("instances")}</h1>
+            <div className="row">
+              <div className="col-md-6">
+                <h2 className="h5 mb-3">
+                  {I18NextService.i18n.t("linked_instances")}
+                </h2>
+                {this.itemList(instances.linked)}
+              </div>
             </div>
-            {instances.allowed && instances.allowed.length > 0 && (
-              <div className="col-md-6">
-                <h5>{I18NextService.i18n.t("allowed_instances")}</h5>
-                {this.itemList(instances.allowed)}
-              </div>
-            )}
-            {instances.blocked && instances.blocked.length > 0 && (
-              <div className="col-md-6">
-                <h5>{I18NextService.i18n.t("blocked_instances")}</h5>
-                {this.itemList(instances.blocked)}
-              </div>
-            )}
-          </div>
+            <div className="row">
+              {instances.allowed && instances.allowed.length > 0 && (
+                <div className="col-md-6">
+                  <h2 className="h5 mb-3">
+                    {I18NextService.i18n.t("allowed_instances")}
+                  </h2>
+                  {this.itemList(instances.allowed)}
+                </div>
+              )}
+              {instances.blocked && instances.blocked.length > 0 && (
+                <div className="col-md-6">
+                  <h2 className="h5 mb-3">
+                    {I18NextService.i18n.t("blocked_instances")}
+                  </h2>
+                  {this.itemList(instances.blocked)}
+                </div>
+              )}
+            </div>
+          </>
         ) : (
           <></>
         );

src/shared/components/home/login-reset.tsx

@@ -59,9 +59,9 @@ export class LoginReset extends Component<any, State> {
   loginResetForm() {
     return (
       <form onSubmit={linkEvent(this, this.handlePasswordReset)}>
-        <h5>
+        <h1 className="h4 mb-4">
           {capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
-        </h5>
+        </h1>
 
         <div className="form-group row">
           <label className="col-form-label">

src/shared/components/home/login.tsx

@@ -69,7 +69,7 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>{I18NextService.i18n.t("login")}</h5>
+          <h1 className="h4 mb-4">{I18NextService.i18n.t("login")}</h1>
           <div className="mb-3 row">
             <label
               className="col-sm-2 col-form-label"

src/shared/components/home/rate-limit-form.tsx

@@ -145,7 +145,9 @@ export default class RateLimitsForm extends Component<
         className="rate-limit-form"
         onSubmit={linkEvent(this, submitRateLimitForm)}
       >
-        <h5>{I18NextService.i18n.t("rate_limit_header")}</h5>
+        <h1 className="h4 mb-4">
+          {I18NextService.i18n.t("rate_limit_header")}
+        </h1>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
             key: rateLimitType,

src/shared/components/home/setup.tsx

@@ -63,7 +63,9 @@ export class Setup extends Component<any, State> {
         <Helmet title={this.documentTitle} />
         <div className="row">
           <div className="col-12 offset-lg-3 col-lg-6">
-            <h3>{I18NextService.i18n.t("lemmy_instance_setup")}</h3>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("lemmy_instance_setup")}
+            </h1>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
             ) : (
@@ -84,7 +86,7 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>{I18NextService.i18n.t("setup_admin")}</h5>
+        <h2 className="h5 mb-3">{I18NextService.i18n.t("setup_admin")}</h2>
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="username">
             {I18NextService.i18n.t("username")}

src/shared/components/home/signup.tsx

@@ -144,7 +144,7 @@ export class Signup extends Component<any, State> {
         className="was-validated"
         onSubmit={linkEvent(this, this.handleRegisterSubmit)}
       >
-        <h5>{this.titleName(siteView)}</h5>
+        <h1 className="h4 mb-4">{this.titleName(siteView)}</h1>
 
         {this.isLemmyMl && (
           <div className="mb-3 row">

src/shared/components/home/site-form.tsx

@@ -136,11 +136,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             !this.state.submitted
           }
         />
-        <h5>{`${
+        <h2 className="h5">{`${
           siteSetup
             ? capitalizeFirstLetter(I18NextService.i18n.t("edit"))
             : capitalizeFirstLetter(I18NextService.i18n.t("setup"))
-        } ${I18NextService.i18n.t("your_site")}`}</h5>
+        } ${I18NextService.i18n.t("your_site")}`}</h2>
         <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="create-site-name">
             {I18NextService.i18n.t("name")}
@@ -158,28 +158,32 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="input-group mb-3">
-          <label className="me-2 col-form-label">
+        <div className="row mb-3">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("icon")}
           </label>
-          <ImageUploadForm
-            uploadTitle={I18NextService.i18n.t("upload_icon")}
-            imageSrc={this.state.siteForm.icon}
-            onUpload={this.handleIconUpload}
-            onRemove={this.handleIconRemove}
-            rounded
-          />
+          <div className="col-sm-10">
+            <ImageUploadForm
+              uploadTitle={I18NextService.i18n.t("upload_icon")}
+              imageSrc={this.state.siteForm.icon}
+              onUpload={this.handleIconUpload}
+              onRemove={this.handleIconRemove}
+              rounded
+            />
+          </div>
         </div>
-        <div className="input-group mb-3">
-          <label className="me-2 col-form-label">
+        <div className="row mb-3">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("banner")}
           </label>
-          <ImageUploadForm
-            uploadTitle={I18NextService.i18n.t("upload_banner")}
-            imageSrc={this.state.siteForm.banner}
-            onUpload={this.handleBannerUpload}
-            onRemove={this.handleBannerRemove}
-          />
+          <div className="col-sm-10">
+            <ImageUploadForm
+              uploadTitle={I18NextService.i18n.t("upload_banner")}
+              imageSrc={this.state.siteForm.banner}
+              onUpload={this.handleBannerUpload}
+              onRemove={this.handleBannerRemove}
+            />
+          </div>
         </div>
         <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="site-desc">

src/shared/components/home/tagline-form.tsx

@@ -37,7 +37,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5 className="col-12">{I18NextService.i18n.t("taglines")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("taglines")}</h1>
         <div className="table-responsive col-12">
           <table id="taglines_table" className="table table-sm table-hover">
             <thead className="pointer">
@@ -141,7 +141,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
 
   handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
     event.preventDefault();
-    if (this.state.editingRow == d.index) {
+    if (d.i.state.editingRow == d.index) {
       d.i.setState({ editingRow: undefined });
     } else {
       d.i.setState({ editingRow: d.index });

src/shared/components/modlog.tsx

@@ -751,87 +751,83 @@ export class Modlog extends Component<
           path={this.context.router.route.match.url}
         />
 
-        <div>
-          <div
-            className="alert alert-warning text-sm-start text-xs-center"
-            role="alert"
-          >
-            <Icon
-              icon="alert-triangle"
-              inline
-              classes="me-sm-2 mx-auto d-sm-inline d-block"
-            />
-            <T i18nKey="modlog_content_warning" class="d-inline">
-              #<strong>#</strong>#
-            </T>
-          </div>
-          {this.state.communityRes.state === "success" && (
-            <h5>
-              <Link
-                className="text-body"
-                to={`/c/${this.state.communityRes.data.community_view.community.name}`}
-              >
-                /c/{this.state.communityRes.data.community_view.community.name}{" "}
-              </Link>
-              <span>{I18NextService.i18n.t("modlog")}</span>
-            </h5>
-          )}
-          <div className="row mb-2">
-            <div className="col-sm-6">
-              <select
-                value={actionType}
-                onChange={linkEvent(this, this.handleFilterActionChange)}
-                className="form-select"
-                aria-label="action"
-              >
-                <option disabled aria-hidden="true">
-                  {I18NextService.i18n.t("filter_by_action")}
-                </option>
-                <option value={"All"}>{I18NextService.i18n.t("all")}</option>
-                <option value={"ModRemovePost"}>Removing Posts</option>
-                <option value={"ModLockPost"}>Locking Posts</option>
-                <option value={"ModFeaturePost"}>Featuring Posts</option>
-                <option value={"ModRemoveComment"}>Removing Comments</option>
-                <option value={"ModRemoveCommunity"}>
-                  Removing Communities
-                </option>
-                <option value={"ModBanFromCommunity"}>
-                  Banning From Communities
-                </option>
-                <option value={"ModAddCommunity"}>
-                  Adding Mod to Community
-                </option>
-                <option value={"ModTransferCommunity"}>
-                  Transferring Communities
-                </option>
-                <option value={"ModAdd"}>Adding Mod to Site</option>
-                <option value={"ModBan"}>Banning From Site</option>
-              </select>
-            </div>
-          </div>
-          <div className="row mb-2">
-            <Filter
-              filterType="user"
-              onChange={this.handleUserChange}
-              onSearch={this.handleSearchUsers}
-              value={userId}
-              options={userSearchOptions}
-              loading={loadingUserSearch}
-            />
-            {!this.isoData.site_res.site_view.local_site
-              .hide_modlog_mod_names && (
-              <Filter
-                filterType="mod"
-                onChange={this.handleModChange}
-                onSearch={this.handleSearchMods}
-                value={modId}
-                options={modSearchOptions}
-                loading={loadingModSearch}
-              />
-            )}
-          </div>
-          {this.renderModlogTable()}
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("modlog")}</h1>
+
+        <div
+          className="alert alert-warning text-sm-start text-xs-center"
+          role="alert"
+        >
+          <Icon
+            icon="alert-triangle"
+            inline
+            classes="me-sm-2 mx-auto d-sm-inline d-block"
+          />
+          <T i18nKey="modlog_content_warning" class="d-inline">
+            #<strong>#</strong>#
+          </T>
         </div>
+        {this.state.communityRes.state === "success" && (
+          <h5>
+            <Link
+              className="text-body"
+              to={`/c/${this.state.communityRes.data.community_view.community.name}`}
+            >
+              /c/{this.state.communityRes.data.community_view.community.name}{" "}
+            </Link>
+            <span>{I18NextService.i18n.t("modlog")}</span>
+          </h5>
+        )}
+        <div className="row mb-2">
+          <div className="col-sm-6">
+            <select
+              value={actionType}
+              onChange={linkEvent(this, this.handleFilterActionChange)}
+              className="form-select"
+              aria-label="action"
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("filter_by_action")}
+              </option>
+              <option value={"All"}>{I18NextService.i18n.t("all")}</option>
+              <option value={"ModRemovePost"}>Removing Posts</option>
+              <option value={"ModLockPost"}>Locking Posts</option>
+              <option value={"ModFeaturePost"}>Featuring Posts</option>
+              <option value={"ModRemoveComment"}>Removing Comments</option>
+              <option value={"ModRemoveCommunity"}>Removing Communities</option>
+              <option value={"ModBanFromCommunity"}>
+                Banning From Communities
+              </option>
+              <option value={"ModAddCommunity"}>Adding Mod to Community</option>
+              <option value={"ModTransferCommunity"}>
+                Transferring Communities
+              </option>
+              <option value={"ModAdd"}>Adding Mod to Site</option>
+              <option value={"ModBan"}>Banning From Site</option>
+            </select>
+          </div>
+        </div>
+        <div className="row mb-2">
+          <Filter
+            filterType="user"
+            onChange={this.handleUserChange}
+            onSearch={this.handleSearchUsers}
+            value={userId}
+            options={userSearchOptions}
+            loading={loadingUserSearch}
+          />
+          {!this.isoData.site_res.site_view.local_site
+            .hide_modlog_mod_names && (
+            <Filter
+              filterType="mod"
+              onChange={this.handleModChange}
+              onSearch={this.handleSearchMods}
+              value={modId}
+              options={modSearchOptions}
+              loading={loadingModSearch}
+            />
+          )}
+        </div>
+        {this.renderModlogTable()}
       </div>
     );
   }

src/shared/components/person/inbox.tsx

@@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
               title={this.documentTitle}
               path={this.context.router.route.match.url}
             />
-            <h5 className="mb-2">
+            <h1 className="h4 mb-4">
               {I18NextService.i18n.t("inbox")}
               {inboxRss && (
                 <small>
@@ -235,10 +235,10 @@ export class Inbox extends Component<any, InboxState> {
                   />
                 </small>
               )}
-            </h5>
+            </h1>
             {this.hasUnreads && (
               <button
-                className="btn btn-secondary mb-2"
+                className="btn btn-secondary mb-2 mb-sm-3"
                 onClick={linkEvent(this, this.handleMarkAllAsRead)}
               >
                 {this.state.markAllAsReadRes.state == "loading" ? (
@@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
 
   unreadOrAllRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
 
   messageTypeRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.All && "active"}
@@ -382,13 +382,15 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="mb-2">
-        <span className="me-3">{this.unreadOrAllRadios()}</span>
-        <span className="me-3">{this.messageTypeRadios()}</span>
-        <CommentSortSelect
-          sort={this.state.sort}
-          onChange={this.handleSortChange}
-        />
+      <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+        <div className="col">{this.unreadOrAllRadios()}</div>
+        <div className="col">{this.messageTypeRadios()}</div>
+        <div className="col">
+          <CommentSortSelect
+            sort={this.state.sort}
+            onChange={this.handleSortChange}
+          />
+        </div>
       </div>
     );
   }
@@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
       this.state.messagesRes.state == "loading"
     ) {
       return (
-        <h5>
+        <h1 className="h4">
           <Spinner large />
-        </h5>
+        </h1>
       );
     } else {
       return (
@@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.repliesRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const replies = this.state.repliesRes.data.replies;
@@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.mentionsRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const mentions = this.state.mentionsRes.data.mentions;
@@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.messagesRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const messages = this.state.messagesRes.data.private_messages;

src/shared/components/person/password-change.tsx

@@ -47,7 +47,9 @@ export class PasswordChange extends Component<any, State> {
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("password_change")}</h5>
+            <h1 className="h4 mb-4">
+              {I18NextService.i18n.t("password_change")}
+            </h1>
             {this.passwordChangeForm()}
           </div>
         </div>

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

@@ -1,4 +1,5 @@
 import { showAvatars } from "@utils/app";
+import { getStaticDir } from "@utils/env";
 import { hostname, isCakeDay } from "@utils/helpers";
 import classNames from "classnames";
 import { Component } from "inferno";
@@ -88,7 +89,7 @@ export class PersonListing extends Component<PersonListingProps, any> {
           !this.props.person.banned &&
           showAvatars() && (
             <PictrsImage
-              src={avatar ?? "/static/assets/icons/icon-96x96.png"}
+              src={avatar ?? `${getStaticDir()}/assets/icons/icon-96x96.png`}
               icon
             />
           )}

src/shared/components/person/profile.tsx

@@ -5,7 +5,6 @@ import {
   enableDownvotes,
   enableNsfw,
   getCommentParentId,
-  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   setIsoData,
@@ -85,6 +84,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { SortSelect } from "../common/sort-select";
+import { UserBadges } from "../common/user-badges";
 import { CommunityLink } from "../community/community-link";
 import { PersonDetails } from "./person-details";
 import { PersonListing } from "./person-listing";
@@ -137,7 +137,7 @@ const getCommunitiesListing = (
   communityViews.length > 0 && (
     <div className="card border-secondary mb-3">
       <div className="card-body">
-        <h5>{I18NextService.i18n.t(translationKey)}</h5>
+        <h2 className="h5">{I18NextService.i18n.t(translationKey)}</h2>
         <ul className="list-unstyled mb-0">
           {communityViews.map(({ community }) => (
             <li key={community.id}>
@@ -232,7 +232,7 @@ export class Profile extends Component<
   async fetchUserData() {
     const { page, sort, view } = getProfileQueryParams();
 
-    this.setState({ personRes: { state: "empty" } });
+    this.setState({ personRes: { state: "loading" } });
     this.setState({
       personRes: await HttpService.client.getPersonDetails({
         username: this.props.match.params.username,
@@ -472,7 +472,7 @@ export class Profile extends Component<
               <div className="mb-0 d-flex flex-wrap">
                 <div>
                   {pv.person.display_name && (
-                    <h5 className="mb-0">{pv.person.display_name}</h5>
+                    <h1 className="h4 mb-4">{pv.person.display_name}</h1>
                   )}
                   <ul className="list-inline mb-2">
                     <li className="list-inline-item">
@@ -484,46 +484,15 @@ export class Profile extends Component<
                         hideAvatar
                       />
                     </li>
-                    {isBanned(pv.person) && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("banned"),
-                          tooltip: I18NextService.i18n.t("banned"),
-                          classes: "text-bg-danger",
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.deleted && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("deleted"),
-                          tooltip: I18NextService.i18n.t("deleted"),
-                          classes: "text-bg-danger",
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.admin && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n.t("admin"),
-                          tooltip: I18NextService.i18n.t("admin"),
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
-                    {pv.person.bot_account && (
-                      <li className="list-inline-item">
-                        {getRoleLabelPill({
-                          label: I18NextService.i18n
-                            .t("bot_account")
-                            .toLowerCase(),
-                          tooltip: I18NextService.i18n.t("bot_account"),
-                          shrink: false,
-                        })}
-                      </li>
-                    )}
+                    <li className="list-inline-item">
+                      <UserBadges
+                        classNames="ms-1"
+                        isBanned={isBanned(pv.person)}
+                        isDeleted={pv.person.deleted}
+                        isAdmin={pv.person.admin}
+                        isBot={pv.person.bot_account}
+                      />
+                    </li>
                   </ul>
                 </div>
                 {this.banDialog(pv)}

src/shared/components/person/registration-applications.tsx

@@ -100,9 +100,9 @@ export class RegistrationApplications extends Component<
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
               />
-              <h5 className="mb-2">
+              <h1 className="h4 mb-4">
                 {I18NextService.i18n.t("registration_applications")}
-              </h5>
+              </h1>
               {this.selects()}
               {this.applicationList(apps)}
               <Paginator

src/shared/components/person/reports.tsx

@@ -152,7 +152,7 @@ export class Reports extends Component<any, ReportsState> {
               title={this.documentTitle}
               path={this.context.router.route.match.url}
             />
-            <h5 className="mb-2">{I18NextService.i18n.t("reports")}</h5>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("reports")}</h1>
             {this.selects()}
             {this.section}
             <Paginator

src/shared/components/person/settings.tsx

@@ -316,7 +316,7 @@ export class Settings extends Component<any, SettingsState> {
   changePasswordHtmlForm() {
     return (
       <>
-        <h5>{I18NextService.i18n.t("change_password")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("change_password")}</h2>
         <form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
           <div className="mb-3 row">
             <label className="col-sm-5 col-form-label" htmlFor="user-password">
@@ -409,7 +409,7 @@ export class Settings extends Component<any, SettingsState> {
   blockedUsersList() {
     return (
       <>
-        <h5>{I18NextService.i18n.t("blocked_users")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("blocked_users")}</h2>
         <ul className="list-unstyled mb-0">
           {this.state.personBlocks.map(pb => (
             <li key={pb.target.id}>
@@ -453,7 +453,7 @@ export class Settings extends Component<any, SettingsState> {
   blockedCommunitiesList() {
     return (
       <>
-        <h5>{I18NextService.i18n.t("blocked_communities")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("blocked_communities")}</h2>
         <ul className="list-unstyled mb-0">
           {this.state.communityBlocks.map(cb => (
             <li key={cb.community.id}>
@@ -484,7 +484,7 @@ export class Settings extends Component<any, SettingsState> {
 
     return (
       <>
-        <h5>{I18NextService.i18n.t("settings")}</h5>
+        <h2 className="h5">{I18NextService.i18n.t("settings")}</h2>
         <form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
           <div className="mb-3 row">
             <label className="col-sm-3 col-form-label" htmlFor="display-name">

src/shared/components/person/verify-email.tsx

@@ -60,7 +60,7 @@ export class VerifyEmail extends Component<any, State> {
         />
         <div className="row">
           <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>{I18NextService.i18n.t("verify_email")}</h5>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("verify_email")}</h1>
             {this.state.verifyRes.state == "loading" && (
               <h5>
                 <Spinner large />

src/shared/components/post/create-post.tsx

@@ -170,7 +170,9 @@ export class CreatePost extends Component<
               id="createPostForm"
               className="col-12 col-lg-6 offset-lg-3 mb-4"
             >
-              <h1 className="h4">{I18NextService.i18n.t("create_post")}</h1>
+              <h1 className="h4 mb-4">
+                {I18NextService.i18n.t("create_post")}
+              </h1>
               <PostForm
                 onCreate={this.handlePostCreate}
                 params={locationState}

src/shared/components/post/post-form.tsx

@@ -349,32 +349,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             <input
               type="url"
               id="post-url"
-              className="form-control"
+              className="form-control mb-3"
               value={url}
               onInput={linkEvent(this, handlePostUrlChange)}
               onPaste={linkEvent(this, handleImageUploadPaste)}
             />
             {this.renderSuggestedTitleCopy()}
-            <form>
-              <label
-                htmlFor="file-upload"
-                className={`${
-                  UserService.Instance.myUserInfo && "pointer"
-                } d-inline-block float-right text-muted fw-bold`}
-                data-tippy-content={I18NextService.i18n.t("upload_image")}
-              >
-                <Icon icon="image" classes="icon-inline" />
-              </label>
-              <input
-                id="file-upload"
-                type="file"
-                accept="image/*,video/*"
-                name="file"
-                className="d-none"
-                disabled={!UserService.Instance.myUserInfo}
-                onChange={linkEvent(this, handleImageUpload)}
-              />
-            </form>
             {url && validURL(url) && (
               <div>
                 <a
@@ -404,56 +384,73 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 </a>
               </div>
             )}
+          </div>
+        </div>
+
+        <div className="mb-3 row">
+          <label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
+            {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
+            <Icon icon="image" classes="icon-inline ms-1" />
+          </label>
+          <div className="col-sm-10">
+            <input
+              id="file-upload"
+              type="file"
+              accept="image/*,video/*"
+              name="file"
+              className="small col-sm-10 form-control"
+              disabled={!UserService.Instance.myUserInfo}
+              onChange={linkEvent(this, handleImageUpload)}
+            />
             {this.state.imageLoading && <Spinner />}
             {url && isImage(url) && (
-              <img src={url} className="img-fluid" alt="" />
+              <img src={url} className="img-fluid mt-2" alt="" />
             )}
             {this.state.imageDeleteUrl && (
               <button
                 className="btn btn-danger btn-sm mt-2"
                 onClick={linkEvent(this, handleImageDelete)}
-                aria-label={I18NextService.i18n.t("delete")}
-                data-tippy-content={I18NextService.i18n.t("delete")}
               >
                 <Icon icon="x" classes="icon-inline me-1" />
                 {capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
               </button>
             )}
-            {this.props.crossPosts && this.props.crossPosts.length > 0 && (
-              <>
-                <div className="my-1 text-muted small fw-bold">
-                  {I18NextService.i18n.t("cross_posts")}
-                </div>
-                <PostListings
-                  showCommunity
-                  posts={this.props.crossPosts}
-                  enableDownvotes={this.props.enableDownvotes}
-                  enableNsfw={this.props.enableNsfw}
-                  allLanguages={this.props.allLanguages}
-                  siteLanguages={this.props.siteLanguages}
-                  viewOnly
-                  // All of these are unused, since its view only
-                  onPostEdit={() => {}}
-                  onPostVote={() => {}}
-                  onPostReport={() => {}}
-                  onBlockPerson={() => {}}
-                  onLockPost={() => {}}
-                  onDeletePost={() => {}}
-                  onRemovePost={() => {}}
-                  onSavePost={() => {}}
-                  onFeaturePost={() => {}}
-                  onPurgePerson={() => {}}
-                  onPurgePost={() => {}}
-                  onBanPersonFromCommunity={() => {}}
-                  onBanPerson={() => {}}
-                  onAddModToCommunity={() => {}}
-                  onAddAdmin={() => {}}
-                  onTransferCommunity={() => {}}
-                />
-              </>
-            )}
           </div>
+          {this.props.crossPosts && this.props.crossPosts.length > 0 && (
+            <>
+              <div className="my-1 text-muted small fw-bold">
+                {I18NextService.i18n.t("cross_posts")}
+              </div>
+              <PostListings
+                showCommunity
+                posts={this.props.crossPosts}
+                enableDownvotes={this.props.enableDownvotes}
+                enableNsfw={this.props.enableNsfw}
+                allLanguages={this.props.allLanguages}
+                siteLanguages={this.props.siteLanguages}
+                viewOnly
+                // All of these are unused, since its view only
+                onPostEdit={() => {}}
+                onPostVote={() => {}}
+                onPostReport={() => {}}
+                onBlockPerson={() => {}}
+                onLockPost={() => {}}
+                onDeletePost={() => {}}
+                onRemovePost={() => {}}
+                onSavePost={() => {}}
+                onFeaturePost={() => {}}
+                onPurgePerson={() => {}}
+                onPurgePost={() => {}}
+                onBanPersonFromCommunity={() => {}}
+                onBanPerson={() => {}}
+                onAddModToCommunity={() => {}}
+                onAddAdmin={() => {}}
+                onTransferCommunity={() => {}}
+              />
+            </>
+          )}
         </div>
+
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="post-title">
             {I18NextService.i18n.t("title")}

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

@@ -1,4 +1,4 @@
-import { getRoleLabelPill, myAuthRequired } from "@utils/app";
+import { myAuthRequired } from "@utils/app";
 import { canShare, share } from "@utils/browser";
 import { getExternalHost, getHttpBase } from "@utils/env";
 import {
@@ -55,6 +55,7 @@ import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PictrsImage } from "../common/pictrs-image";
+import { UserBadges } from "../common/user-badges";
 import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
@@ -333,7 +334,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       return (
         <button
           type="button"
-          className="thumbnail rounded overflow-hidden d-inline-block position-relative mb-2 p-0 border-0"
+          className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0 bg-transparent"
           data-tippy-content={I18NextService.i18n.t("expand_here")}
           onClick={linkEvent(this, this.handleImageExpandClick)}
           aria-label={I18NextService.i18n.t("expand_here")}
@@ -348,7 +349,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
       return (
         <a
-          className="thumbnail rounded bg-light d-flex justify-content-center"
+          className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
           href={url}
           rel={relTags}
           title={url}
@@ -403,28 +404,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   createdLine() {
     const post_view = this.postView;
+
     return (
-      <div className="small">
-        <span className="me-1">
-          <PersonListing person={post_view.creator} />
-        </span>
-        {this.creatorIsMod_ &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("mod"),
-            tooltip: I18NextService.i18n.t("mod"),
-            classes: "text-bg-primary",
-          })}
-        {this.creatorIsAdmin_ &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("admin"),
-            tooltip: I18NextService.i18n.t("admin"),
-            classes: "text-bg-danger",
-          })}
-        {post_view.creator.bot_account &&
-          getRoleLabelPill({
-            label: I18NextService.i18n.t("bot_account").toLowerCase(),
-            tooltip: I18NextService.i18n.t("bot_account"),
-          })}
+      <div className="small mb-1 mb-md-0">
+        <PersonListing person={post_view.creator} />
+        <UserBadges
+          classNames="ms-1"
+          isMod={this.creatorIsMod_}
+          isAdmin={this.creatorIsAdmin_}
+          isBot={post_view.creator.bot_account}
+        />
         {this.props.showCommunity && (
           <>
             {" "}
@@ -476,8 +465,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     return (
       <>
-        <div className="post-title overflow-hidden">
-          <h5 className="d-inline">
+        <div className="post-title">
+          <h1 className="h5 d-inline text-break">
             {url && this.props.showBody ? (
               <a
                 className={
@@ -493,15 +482,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             ) : (
               this.postLink
             )}
-          </h5>
+          </h1>
 
           {/**
-           * If there is a URL, an embed title, and we were not told to show the
-           * body by the parent component, show the MetadataCard/body toggle.
+           * If there is (a) a URL and an embed title, or (b) a post body, and
+           * we were not told to show the body by the parent component, show the
+           * MetadataCard/body toggle.
            */}
           {!this.props.showBody &&
-            post.url &&
-            post.embed_title &&
+            ((post.url && post.embed_title) || post.body) &&
             this.showPreviewButton()}
 
           {post.removed && (
@@ -1426,6 +1415,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       UserService.Instance.myUserInfo?.local_user_view.person.id
     );
   }
+
   handleEditClick(i: PostListing) {
     i.setState({ showEdit: true });
   }
@@ -1549,6 +1539,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       post_id: i.postView.post.id,
       removed: !i.postView.post.removed,
       auth: myAuthRequired(),
+      reason: i.state.removeReason,
     });
   }
 
@@ -1620,13 +1611,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   handlePurgeSubmit(i: PostListing, event: any) {
     event.preventDefault();
     i.setState({ purgeLoading: true });
-    if (i.state.purgeType == PurgeType.Person) {
+    if (i.state.purgeType === PurgeType.Person) {
       i.props.onPurgePerson({
         person_id: i.postView.creator.id,
         reason: i.state.purgeReason,
         auth: myAuthRequired(),
       });
-    } else if (i.state.purgeType == PurgeType.Post) {
+    } else if (i.state.purgeType === PurgeType.Post) {
       i.props.onPurgePost({
         post_id: i.postView.post.id,
         reason: i.state.purgeReason,

src/shared/components/private_message/create-private-message.tsx

@@ -115,7 +115,7 @@ export class CreatePrivateMessage extends Component<
         return (
           <div className="row">
             <div className="col-12 col-lg-6 offset-lg-3 mb-4">
-              <h1 className="h4">
+              <h1 className="h4 mb-4">
                 {I18NextService.i18n.t("create_private_message")}
               </h1>
               <PrivateMessageForm

src/shared/components/private_message/private-message.tsx

@@ -284,7 +284,6 @@ export class PrivateMessage extends Component<
           <div className="row">
             <div className="col-sm-6">
               <PrivateMessageForm
-                privateMessageView={message_view}
                 replyType={true}
                 recipient={otherPerson}
                 onCreate={this.props.onCreate}

src/shared/components/search.tsx

@@ -181,8 +181,8 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="mb-3 col-sm-6">
-      <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
+    <div className="col-sm-6">
+      <label className="mb-1" htmlFor={`${filterType}-filter`}>
         {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
       </label>
       <SearchableSelect
@@ -467,7 +467,7 @@ export class Search extends Component<any, SearchState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5>{I18NextService.i18n.t("search")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
         {this.selects}
         {this.searchForm}
         {this.displayResults(type)}
@@ -500,8 +500,11 @@ export class Search extends Component<any, SearchState> {
 
   get searchForm() {
     return (
-      <form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
-        <div className="col-auto">
+      <form
+        className="row gx-2 gy-3"
+        onSubmit={linkEvent(this, this.handleSearchSubmit)}
+      >
+        <div className="col-auto flex-grow-1 flex-sm-grow-0">
           <input
             type="text"
             className="form-control me-2 mb-2 col-sm-8"
@@ -542,41 +545,45 @@ export class Search extends Component<any, SearchState> {
       communitiesRes.data.communities.length > 0;
 
     return (
-      <div className="mb-2">
-        <select
-          value={type}
-          onChange={linkEvent(this, this.handleTypeChange)}
-          className="form-select d-inline-block w-auto mb-2"
-          aria-label={I18NextService.i18n.t("type")}
-        >
-          <option disabled aria-hidden="true">
-            {I18NextService.i18n.t("type")}
-          </option>
-          {searchTypes.map(option => (
-            <option value={option} key={option}>
-              {I18NextService.i18n.t(
-                option.toString().toLowerCase() as NoOptionI18nKeys
-              )}
-            </option>
-          ))}
-        </select>
-        <span className="ms-2">
-          <ListingTypeSelect
-            type_={listingType}
-            showLocal={showLocal(this.isoData)}
-            showSubscribed
-            onChange={this.handleListingTypeChange}
-          />
-        </span>
-        <span className="ms-2">
-          <SortSelect
-            sort={sort}
-            onChange={this.handleSortChange}
-            hideHot
-            hideMostComments
-          />
-        </span>
-        <div className="row">
+      <>
+        <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+          <div className="col">
+            <select
+              value={type}
+              onChange={linkEvent(this, this.handleTypeChange)}
+              className="form-select d-inline-block w-auto"
+              aria-label={I18NextService.i18n.t("type")}
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("type")}
+              </option>
+              {searchTypes.map(option => (
+                <option value={option} key={option}>
+                  {I18NextService.i18n.t(
+                    option.toString().toLowerCase() as NoOptionI18nKeys
+                  )}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="col">
+            <ListingTypeSelect
+              type_={listingType}
+              showLocal={showLocal(this.isoData)}
+              showSubscribed
+              onChange={this.handleListingTypeChange}
+            />
+          </div>
+          <div className="col">
+            <SortSelect
+              sort={sort}
+              onChange={this.handleSortChange}
+              hideHot
+              hideMostComments
+            />
+          </div>
+        </div>
+        <div className="row gy-2 gx-4 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"
@@ -596,7 +603,7 @@ export class Search extends Component<any, SearchState> {
             loading={searchCreatorLoading}
           />
         </div>
-      </div>
+      </>
     );
   }
 

src/shared/config.ts

@@ -1,5 +1,7 @@
-export const favIconUrl = "/static/assets/icons/favicon.svg";
-export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
+import { getStaticDir } from "@utils/env";
+
+export const favIconUrl = `${getStaticDir()}/assets/icons/favicon.svg`;
+export const favIconPngUrl = `${getStaticDir()}/assets/icons/apple-touch-icon.png`;
 
 export const repoUrl = "https://github.com/LemmyNet";
 export const joinLemmyUrl = "https://join-lemmy.org";

src/shared/services/UserService.ts

@@ -2,7 +2,7 @@
 import { isAuthPath } from "@utils/app";
 import { isBrowser } from "@utils/browser";
 import { isHttps } from "@utils/env";
-import IsomorphicCookie from "isomorphic-cookie";
+import * as cookie from "cookie";
 import jwt_decode from "jwt-decode";
 import { LoginResponse, MyUserInfo } from "lemmy-js-client";
 import { toast } from "../toast";
@@ -31,9 +31,15 @@ export class UserService {
   public login(res: LoginResponse) {
     const expires = new Date();
     expires.setDate(expires.getDate() + 365);
-    if (res.jwt) {
+    if (isBrowser() && res.jwt) {
       toast(I18NextService.i18n.t("logged_in"));
-      IsomorphicCookie.save("jwt", res.jwt, { expires, secure: isHttps() });
+      document.cookie = cookie.serialize("jwt", res.jwt, {
+        expires,
+        secure: isHttps(),
+        domain: location.hostname,
+        sameSite: true,
+        path: "/",
+      });
       this.#setJwtInfo();
     }
   }
@@ -41,8 +47,14 @@ export class UserService {
   public logout() {
     this.jwtInfo = undefined;
     this.myUserInfo = undefined;
-    IsomorphicCookie.remove("jwt"); // TODO is sometimes unreliable for some reason
-    document.cookie = "jwt=; Max-Age=0; path=/; domain=" + location.hostname;
+    if (isBrowser()) {
+      document.cookie = cookie.serialize("jwt", "", {
+        maxAge: 0,
+        path: "/",
+        domain: location.hostname,
+        sameSite: true,
+      });
+    }
     if (isAuthPath(location.pathname)) {
       location.replace("/");
     } else {
@@ -66,10 +78,11 @@ export class UserService {
   }
 
   #setJwtInfo() {
-    const jwt: string | undefined = IsomorphicCookie.load("jwt");
-
-    if (jwt) {
-      this.jwtInfo = { jwt, claims: jwt_decode(jwt) };
+    if (isBrowser()) {
+      const { jwt } = cookie.parse(document.cookie);
+      if (jwt) {
+        this.jwtInfo = { jwt, claims: jwt_decode(jwt) };
+      }
     }
   }
 

src/shared/utils/app/get-role-label-pill.tsx

@@ -1,21 +0,0 @@
-export default function getRoleLabelPill({
-  label,
-  tooltip,
-  classes,
-  shrink = true,
-}: {
-  label: string;
-  tooltip: string;
-  classes?: string;
-  shrink?: boolean;
-}) {
-  return (
-    <span
-      className={`badge me-1 ${classes ?? "text-bg-light"}`}
-      aria-label={tooltip}
-      data-tippy-content={tooltip}
-    >
-      {shrink ? label[0].toUpperCase() : label}
-    </span>
-  );
-}

src/shared/utils/app/index.ts

@@ -29,7 +29,6 @@ import getDataTypeString from "./get-data-type-string";
 import getDepthFromComment from "./get-depth-from-comment";
 import getIdFromProps from "./get-id-from-props";
 import getRecipientIdFromProps from "./get-recipient-id-from-props";
-import getRoleLabelPill from "./get-role-label-pill";
 import getUpdatedSearchId from "./get-updated-search-id";
 import initializeSite from "./initialize-site";
 import insertCommentIntoTree from "./insert-comment-into-tree";
@@ -87,7 +86,6 @@ export {
   getDepthFromComment,
   getIdFromProps,
   getRecipientIdFromProps,
-  getRoleLabelPill,
   getUpdatedSearchId,
   initializeSite,
   insertCommentIntoTree,

src/shared/utils/app/is-auth-path.ts

@@ -1,5 +1,5 @@
 export default function isAuthPath(pathname: string) {
-  return /create_.*|inbox|settings|admin|reports|registration_applications/g.test(
+  return /^\/create_.*|inbox|settings|admin|reports|registration_applications/g.test(
     pathname
   );
 }

src/shared/utils/app/setup-date-fns.ts

@@ -1,18 +1,44 @@
 import setDefaultOptions from "date-fns/setDefaultOptions";
 import { I18NextService } from "../../services";
 
+const EN_US = "en-US";
+
 export default async function () {
   let lang = I18NextService.i18n.language;
   if (lang === "en") {
-    lang = "en-US";
+    lang = EN_US;
   }
 
-  const locale = (
-    await import(
-      /* webpackExclude: /\.js\.flow$/ */
-      `date-fns/locale/${lang}`
-    )
-  ).default;
+  // if lang and country are the same, then date-fns expects only the lang
+  // eg: instead of "fr-FR", we should import just "fr"
+
+  if (lang.includes("-")) {
+    const parts = lang.split("-");
+    if (parts[0] === parts[1].toLowerCase()) {
+      lang = parts[0];
+    }
+  }
+
+  let locale;
+
+  try {
+    locale = (
+      await import(
+        /* webpackExclude: /\.js\.flow$/ */
+        `date-fns/locale/${lang}`
+      )
+    ).default;
+  } catch (e) {
+    console.log(
+      `Could not load locale ${lang} from date-fns, falling back to ${EN_US}`
+    );
+    locale = (
+      await import(
+        /* webpackExclude: /\.js\.flow$/ */
+        `date-fns/locale/${EN_US}`
+      )
+    ).default;
+  }
   setDefaultOptions({
     locale,
   });

src/shared/utils/browser/data-bs-theme.ts

@@ -0,0 +1,11 @@
+import isDark from "./is-dark";
+
+export default function dataBsTheme(user) {
+  return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
+    (user &&
+      ["darkly", "darkly-red", "darkly-pureblack"].includes(
+        user.local_user_view.local_user.theme
+      ))
+    ? "dark"
+    : "light";
+}

src/shared/utils/browser/index.ts

@@ -1,5 +1,7 @@
 import canShare from "./can-share";
+import dataBsTheme from "./data-bs-theme";
 import isBrowser from "./is-browser";
+import isDark from "./is-dark";
 import loadCss from "./load-css";
 import restoreScrollPosition from "./restore-scroll-position";
 import saveScrollPosition from "./save-scroll-position";
@@ -7,7 +9,9 @@ import share from "./share";
 
 export {
   canShare,
+  dataBsTheme,
   isBrowser,
+  isDark,
   loadCss,
   restoreScrollPosition,
   saveScrollPosition,

src/shared/utils/browser/is-dark.ts

@@ -0,0 +1,7 @@
+import isBrowser from "./is-browser";
+
+export default function isDark() {
+  return (
+    isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+}

src/shared/utils/env/get-static-dir.ts

@@ -0,0 +1,5 @@
+// Returns path to static directory, intended
+// for cache-busting based on latest commit hash.
+export default function getStaticDir() {
+  return `/static/${process.env.COMMIT_HASH}`;
+}

src/shared/utils/env/index.ts

@@ -6,6 +6,7 @@ import getHttpBaseExternal from "./get-http-base-external";
 import getHttpBaseInternal from "./get-http-base-internal";
 import getInternalHost from "./get-internal-host";
 import getSecure from "./get-secure";
+import getStaticDir from "./get-static-dir";
 import httpExternalPath from "./http-external-path";
 import isHttps from "./is-https";
 
@@ -18,6 +19,7 @@ export {
   getHttpBaseInternal,
   getInternalHost,
   getSecure,
+  getStaticDir,
   httpExternalPath,
   isHttps,
 };

src/shared/utils/helpers/index.ts

@@ -17,6 +17,7 @@ import isCakeDay from "./is-cake-day";
 import numToSI from "./num-to-si";
 import poll from "./poll";
 import randomStr from "./random-str";
+import removeAuthParam from "./remove-auth-param";
 import sleep from "./sleep";
 import validEmail from "./valid-email";
 import validInstanceTLD from "./valid-instance-tld";
@@ -43,6 +44,7 @@ export {
   numToSI,
   poll,
   randomStr,
+  removeAuthParam,
   sleep,
   validEmail,
   validInstanceTLD,

src/shared/utils/helpers/remove-auth-param.ts

@@ -0,0 +1,6 @@
+export default function (err: any) {
+  return err
+    .toString()
+    .replace(new RegExp("[?&]auth=[^&#]*(#.*)?$"), "$1")
+    .replace(new RegExp("([?&])auth=[^&]*&"), "$1");
+}

webpack.config.js

@@ -14,56 +14,63 @@ const banner = `
   @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
   `;
 
-const base = {
-  output: {
-    filename: "js/server.js",
-    publicPath: "/",
-    hashFunction: "xxhash64",
-  },
-  resolve: {
-    extensions: [".js", ".jsx", ".ts", ".tsx"],
-    alias: {
-      "@": path.resolve(__dirname, "src/"),
-      "@utils": path.resolve(__dirname, "src/shared/utils/"),
+function getBase(env, mode) {
+  return {
+    output: {
+      filename: "js/server.js",
+      publicPath: "/",
+      hashFunction: "xxhash64",
     },
-  },
-  performance: {
-    hints: false,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(scss|css)$/i,
-        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+    resolve: {
+      extensions: [".js", ".jsx", ".ts", ".tsx"],
+      alias: {
+        "@": path.resolve(__dirname, "src/"),
+        "@utils": path.resolve(__dirname, "src/shared/utils/"),
       },
-      {
-        test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
-        exclude: /node_modules/, // ignore node_modules
-        loader: "babel-loader",
-      },
-      // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false,
+    },
+    performance: {
+      hints: false,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(scss|css)$/i,
+          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
         },
-      },
+        {
+          test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
+          exclude: /node_modules/, // ignore node_modules
+          loader: "babel-loader",
+        },
+        // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467
+        {
+          test: /\.m?js/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+      ],
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        "process.env.COMMIT_HASH": `"${env.COMMIT_HASH}"`,
+        "process.env.NODE_ENV": `"${mode}"`,
+      }),
+      new MiniCssExtractPlugin({
+        filename: "styles/styles.css",
+      }),
+      new CopyPlugin({
+        patterns: [{ from: "./src/assets", to: "./assets" }],
+      }),
+      new webpack.BannerPlugin({
+        banner,
+      }),
     ],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: "styles/styles.css",
-    }),
-    new CopyPlugin({
-      patterns: [{ from: "./src/assets", to: "./assets" }],
-    }),
-    new webpack.BannerPlugin({
-      banner,
-    }),
-  ],
-};
+  };
+}
 
-const createServerConfig = (_env, mode) => {
+const createServerConfig = (env, mode) => {
+  const base = getBase(env, mode);
   const config = merge({}, base, {
     mode,
     entry: "./src/server/index.tsx",
@@ -90,22 +97,20 @@ const createServerConfig = (_env, mode) => {
   return config;
 };
 
-const createClientConfig = (_env, mode) => {
+const createClientConfig = (env, mode) => {
+  const base = getBase(env, mode);
   const config = merge({}, base, {
     mode,
     entry: "./src/client/index.tsx",
     output: {
       filename: "js/client.js",
-      publicPath: "/static/",
+      publicPath: `/static/${env.COMMIT_HASH}/`,
     },
     plugins: [
       ...base.plugins,
       new ServiceWorkerPlugin({
         enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct
         workbox: {
-          modifyURLPrefix: {
-            "/": "/static/",
-          },
           cacheId: "lemmy",
           include: [/(assets|styles|js)\/.+\..+$/g],
           inlineWorkboxRuntime: true,